bugfix: Breaking Change, onHeaderClick erroneously removed

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-accordion/etc/react-accordion.api.md

@@ -98,6 +98,7 @@ export type AccordionItemContextValue<Value = AccordionItemValue> = {
     open: boolean;
     disabled: boolean;
     value: Value;
+    onHeaderClick(event: AccordionToggleEvent): void;
 };
 
 // @public (undocumented)

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<HTMLElement>();
     const wrapper: React.FC = ({ children }) => (
       <AccordionProvider
-        value={{
-          collapsible: false,
-          multiple: false,
-          navigation: undefined,
+        value={mockAccordionContextValue({
           openItems: [1],
-          requestToggle: () => {
-            /* ... */
-          },
-        }}
+        })}
       >
         <AccordionItemProvider
-          value={{
-            disabled: false,
+          value={mockAccordionItemContextValue({
             open: true,
             value: 1,
-          }}
+          })}
         >
           {children}
         </AccordionItemProvider>

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',
     },

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<AccordionItemContextValue>(
-    () => ({ disabled, open, value }),
-    [disabled, open, value],
+    () => ({ disabled, open, value, onHeaderClick }),
+    [disabled, open, value, onHeaderClick],
   );
 
   return { accordionItem };

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 => (
-    <AccordionItemProvider value={{ open: true, disabled: false, value: undefined }}>
+    <AccordionItemProvider
+      value={mockAccordionItemContextValue({
+        open: true,
+      })}
+    >
       {props.children}
     </AccordionItemProvider>
   );

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<Value = AccordionItemValue> = {
   open: boolean;
   disabled: boolean;
   value: Value;
+  /**
+   * @deprecated - use `requestToggle` from AccordionContent instead
+   */
+  onHeaderClick(event: AccordionToggleEvent): void;
 };
 
 const AccordionItemContext = React.createContext<AccordionItemContextValue<unknown> | undefined>(
@@ -15,6 +20,9 @@ const accordionItemContextDefaultValue: AccordionItemContextValue<unknown> = {
   open: false,
   disabled: false,
   value: undefined,
+  onHeaderClick() {
+    /* noop */
+  },
 };
 
 export const { Provider: AccordionItemProvider } = AccordionItemContext;

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>): AccordionContextValue {
+  return {
+    collapsible: false,
+    multiple: false,
+    navigation: undefined,
+    openItems: [],
+    requestToggle() {
+      /* noop */
+    },
+    ...partialValue,
+  };
+}
+
+export function mockAccordionItemContextValue(
+  partialValue?: Partial<AccordionItemContextValue>,
+): AccordionItemContextValue {
+  return {
+    open: false,
+    disabled: false,
+    value: undefined,
+    onHeaderClick() {
+      /* noop */
+    },
+    ...partialValue,
+  };
+}