diff --git a/change/@fluentui-react-accordion-1f6c3656-ba94-49a5-b40b-8e9b2a8836a7.json b/change/@fluentui-react-accordion-1f6c3656-ba94-49a5-b40b-8e9b2a8836a7.json new file mode 100644 index 0000000000000..4d3a12c41abfb --- /dev/null +++ b/change/@fluentui-react-accordion-1f6c3656-ba94-49a5-b40b-8e9b2a8836a7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "bugfix: Breaking Change, onHeaderClick erroneously removed", + "packageName": "@fluentui/react-accordion", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-accordion/etc/react-accordion.api.md b/packages/react-components/react-accordion/etc/react-accordion.api.md index 9b6a507f62919..d3704b97a87bc 100644 --- a/packages/react-components/react-accordion/etc/react-accordion.api.md +++ b/packages/react-components/react-accordion/etc/react-accordion.api.md @@ -98,6 +98,7 @@ export type AccordionItemContextValue = { open: boolean; disabled: boolean; value: Value; + onHeaderClick(event: AccordionToggleEvent): void; }; // @public (undocumented) diff --git a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeader.test.tsx b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeader.test.tsx index 5025534c3bfc3..bfbc2ae28de93 100644 --- a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeader.test.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeader.test.tsx @@ -4,28 +4,22 @@ import * as React from 'react'; import { useAccordionHeader_unstable } from './useAccordionHeader'; import { AccordionProvider } from '../../contexts/accordion'; import { AccordionItemProvider } from '../../contexts/accordionItem'; +import { mockAccordionContextValue, mockAccordionItemContextValue } from '../../testing/mockContextValue'; describe('useAccordionHeader_unstable', () => { it('should return button props as disabled even when it is not disabled (forceDisabled)', () => { const ref = React.createRef(); const wrapper: React.FC = ({ children }) => ( { - /* ... */ - }, - }} + })} > {children} diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts index 9e8d7e679747f..34d7cb82c6c87 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts +++ b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts @@ -1,7 +1,8 @@ import * as React from 'react'; -import { getNativeElementProps, slot } from '@fluentui/react-utilities'; -import { useAccordionContext_unstable } from '../../contexts/accordion'; +import { getNativeElementProps, slot, useEventCallback } from '@fluentui/react-utilities'; import type { AccordionItemProps, AccordionItemState } from './AccordionItem.types'; +import type { AccordionToggleEvent } from '../Accordion/Accordion.types'; +import { useAccordionContext_unstable } from '../../contexts/accordion'; /** * Returns the props and state required to render the component @@ -14,12 +15,15 @@ export const useAccordionItem_unstable = ( ): AccordionItemState => { const { value, disabled = false } = props; + const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle); const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value)); + const onAccordionHeaderClick = useEventCallback((event: AccordionToggleEvent) => requestToggle({ event, value })); return { open, value, disabled, + onHeaderClick: onAccordionHeaderClick, components: { root: 'div', }, diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemContextValues.ts b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemContextValues.ts index bb56cbb56c0eb..48aa5b3207e9f 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemContextValues.ts +++ b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemContextValues.ts @@ -3,10 +3,11 @@ import type { AccordionItemContextValues, AccordionItemState } from './Accordion import { AccordionItemContextValue } from '../../contexts/accordionItem'; export function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues { - const { disabled, open, value } = state; + // eslint-disable-next-line deprecation/deprecation + const { disabled, open, value, onHeaderClick } = state; const accordionItem = React.useMemo( - () => ({ disabled, open, value }), - [disabled, open, value], + () => ({ disabled, open, value, onHeaderClick }), + [disabled, open, value, onHeaderClick], ); return { accordionItem }; diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.test.tsx b/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.test.tsx index fc1dd450a3b76..228996f025efe 100644 --- a/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.test.tsx +++ b/packages/react-components/react-accordion/src/components/AccordionPanel/AccordionPanel.test.tsx @@ -3,10 +3,15 @@ import { AccordionPanel } from './AccordionPanel'; import * as renderer from 'react-test-renderer'; import { isConformant } from '../../testing/isConformant'; import { AccordionItemProvider } from '../../contexts/accordionItem'; +import { mockAccordionItemContextValue } from '../../testing/mockContextValue'; describe('AccordionPanel', () => { const Wrapper: React.FC = props => ( - + {props.children} ); diff --git a/packages/react-components/react-accordion/src/contexts/accordionItem.ts b/packages/react-components/react-accordion/src/contexts/accordionItem.ts index 153cda9090a2e..1ac5142eab71b 100644 --- a/packages/react-components/react-accordion/src/contexts/accordionItem.ts +++ b/packages/react-components/react-accordion/src/contexts/accordionItem.ts @@ -1,10 +1,15 @@ import * as React from 'react'; import { AccordionItemValue } from '../AccordionItem'; +import { AccordionToggleEvent } from '../Accordion'; export type AccordionItemContextValue = { open: boolean; disabled: boolean; value: Value; + /** + * @deprecated - use `requestToggle` from AccordionContent instead + */ + onHeaderClick(event: AccordionToggleEvent): void; }; const AccordionItemContext = React.createContext | undefined>( @@ -15,6 +20,9 @@ const accordionItemContextDefaultValue: AccordionItemContextValue = { open: false, disabled: false, value: undefined, + onHeaderClick() { + /* noop */ + }, }; export const { Provider: AccordionItemProvider } = AccordionItemContext; diff --git a/packages/react-components/react-accordion/src/testing/mockContextValue.ts b/packages/react-components/react-accordion/src/testing/mockContextValue.ts new file mode 100644 index 0000000000000..aacd4c721fb6e --- /dev/null +++ b/packages/react-components/react-accordion/src/testing/mockContextValue.ts @@ -0,0 +1,29 @@ +import type { AccordionContextValue } from '../contexts/accordion'; +import type { AccordionItemContextValue } from '../contexts/accordionItem'; + +export function mockAccordionContextValue(partialValue?: Partial): AccordionContextValue { + return { + collapsible: false, + multiple: false, + navigation: undefined, + openItems: [], + requestToggle() { + /* noop */ + }, + ...partialValue, + }; +} + +export function mockAccordionItemContextValue( + partialValue?: Partial, +): AccordionItemContextValue { + return { + open: false, + disabled: false, + value: undefined, + onHeaderClick() { + /* noop */ + }, + ...partialValue, + }; +}