From 527faf540f3117b4ed121e00eef4e67cf47a4ff3 Mon Sep 17 00:00:00 2001 From: Karan Kakroo Date: Tue, 4 Jul 2023 18:57:31 +0100 Subject: [PATCH 1/2] added openItems to onToggle --- ...act-accordion-2072fdcd-6e91-497d-8a09-567c6d4e60a1.json | 7 +++++++ .../react-accordion/etc/react-accordion.api.md | 1 + .../src/components/Accordion/Accordion.types.ts | 1 + .../src/components/Accordion/useAccordion.ts | 5 +++-- .../src/components/AccordionItem/useAccordionItem.ts | 4 ++-- 5 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 change/@fluentui-react-accordion-2072fdcd-6e91-497d-8a09-567c6d4e60a1.json diff --git a/change/@fluentui-react-accordion-2072fdcd-6e91-497d-8a09-567c6d4e60a1.json b/change/@fluentui-react-accordion-2072fdcd-6e91-497d-8a09-567c6d4e60a1.json new file mode 100644 index 0000000000000..e9732301636c5 --- /dev/null +++ b/change/@fluentui-react-accordion-2072fdcd-6e91-497d-8a09-567c6d4e60a1.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix: added openItems to AccordionToggleData which respects multiple and collapsible props for controlled Accordion", + "packageName": "@fluentui/react-accordion", + "email": "kakrookaran@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 32e6a4b5ad3fa..6a48a7cad7a3e 100644 --- a/packages/react-components/react-accordion/etc/react-accordion.api.md +++ b/packages/react-components/react-accordion/etc/react-accordion.api.md @@ -159,6 +159,7 @@ export type AccordionState = ComponentState & AccordionContextVa // @public (undocumented) export type AccordionToggleData = { value: AccordionItemValue; + openItems: AccordionItemValue[]; }; // @public (undocumented) diff --git a/packages/react-components/react-accordion/src/components/Accordion/Accordion.types.ts b/packages/react-components/react-accordion/src/components/Accordion/Accordion.types.ts index de93ff2ff5353..cd492b0c78457 100644 --- a/packages/react-components/react-accordion/src/components/Accordion/Accordion.types.ts +++ b/packages/react-components/react-accordion/src/components/Accordion/Accordion.types.ts @@ -31,6 +31,7 @@ export type AccordionSlots = { export type AccordionToggleData = { value: AccordionItemValue; + openItems: AccordionItemValue[]; }; export type AccordionProps = ComponentProps & { diff --git a/packages/react-components/react-accordion/src/components/Accordion/useAccordion.ts b/packages/react-components/react-accordion/src/components/Accordion/useAccordion.ts index 0b06b206ac3df..e5e7b2b4f5e0e 100644 --- a/packages/react-components/react-accordion/src/components/Accordion/useAccordion.ts +++ b/packages/react-components/react-accordion/src/components/Accordion/useAccordion.ts @@ -30,8 +30,9 @@ export const useAccordion_unstable = (props: AccordionProps, ref: React.Ref { - onToggle?.(event, data); - setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, multiple, collapsible)); + const currentOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible); + onToggle?.(event, { value: data.value, openItems: currentOpenItems }); + setOpenItems(currentOpenItems); }); return { 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 bf1141e0df65b..72f0dd0d40dd6 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts +++ b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts @@ -18,7 +18,7 @@ export const useAccordionItem_unstable = ( const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle); const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value)); const onAccordionHeaderClick = React.useCallback( - (ev: AccordionToggleEvent) => requestToggle(ev, { value }), + (ev: AccordionToggleEvent) => requestToggle(ev, { value, openItems: [] }), [requestToggle, value], ); @@ -30,7 +30,7 @@ export const useAccordionItem_unstable = ( root: 'div', }, root: getNativeElementProps('div', { - ref: ref, + ref, ...props, }), }; From a82ea9319ce660ec2822638477ad1db41d452498 Mon Sep 17 00:00:00 2001 From: Karan Kakroo Date: Tue, 4 Jul 2023 20:32:09 +0100 Subject: [PATCH 2/2] fixed errors in test file --- .../components/Accordion/useAccordion.test.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/react-components/react-accordion/src/components/Accordion/useAccordion.test.ts b/packages/react-components/react-accordion/src/components/Accordion/useAccordion.test.ts index e5ec379d29f85..7e6848d971de6 100644 --- a/packages/react-components/react-accordion/src/components/Accordion/useAccordion.test.ts +++ b/packages/react-components/react-accordion/src/components/Accordion/useAccordion.test.ts @@ -10,7 +10,7 @@ describe('useAccordion_unstable', () => { expect(result.current.openItems.length).toEqual(1); expect(result.current.openItems.includes(0)).toBeTruthy(); - act(() => result.current.requestToggle(undefined!, { value: 1 })); + act(() => result.current.requestToggle(undefined!, { value: 1, openItems: [] })); expect(result.current.openItems.length).toEqual(1); expect(result.current.openItems.includes(1)).toBeTruthy(); @@ -20,9 +20,9 @@ describe('useAccordion_unstable', () => { it('should only have zero open items before having any items', () => { const { result } = renderHook(() => useAccordion_unstable({ multiple: true }, React.createRef())); expect(result.current.openItems.length).toEqual(0); - act(() => result.current.requestToggle(undefined!, { value: 0 })); + act(() => result.current.requestToggle(undefined!, { value: 0, openItems: [] })); expect(result.current.openItems.length).toEqual(1); - act(() => result.current.requestToggle(undefined!, { value: 0 })); + act(() => result.current.requestToggle(undefined!, { value: 0, openItems: [] })); expect(result.current.openItems.length).toEqual(1); }); it('should not have less than 1 open item', () => { @@ -32,16 +32,16 @@ describe('useAccordion_unstable', () => { expect(result.current.openItems.length).toEqual(1); - act(() => result.current.requestToggle(undefined!, { value: 0 })); + act(() => result.current.requestToggle(undefined!, { value: 0, openItems: [] })); expect(result.current.openItems.length).toEqual(1); expect(result.current.openItems.includes(0)).toBeTruthy(); }); it('should open multiple panels', () => { const { result } = renderHook(() => useAccordion_unstable({ multiple: true }, React.createRef())); expect(result.current.openItems.length).toEqual(0); - act(() => result.current.requestToggle(undefined!, { value: 0 })); + act(() => result.current.requestToggle(undefined!, { value: 0, openItems: [] })); expect(result.current.openItems.includes(0)).toBeTruthy(); - act(() => result.current.requestToggle(undefined!, { value: 1 })); + act(() => result.current.requestToggle(undefined!, { value: 1, openItems: [] })); expect(result.current.openItems.includes(1)).toBeTruthy(); expect(result.current.openItems.length).toEqual(2); }); @@ -50,18 +50,18 @@ describe('useAccordion_unstable', () => { it('should have zero panels opened', () => { const { result } = renderHook(() => useAccordion_unstable({ collapsible: true }, React.createRef())); expect(result.current.openItems.length).toEqual(0); - act(() => result.current.requestToggle(undefined!, { value: 0 })); + act(() => result.current.requestToggle(undefined!, { value: 0, openItems: [] })); expect(result.current.openItems.length).toEqual(1); - act(() => result.current.requestToggle(undefined!, { value: 0 })); + act(() => result.current.requestToggle(undefined!, { value: 0, openItems: [] })); expect(result.current.openItems.length).toEqual(0); }); it('should not open more than one panel', () => { const { result } = renderHook(() => useAccordion_unstable({ collapsible: true }, React.createRef())); expect(result.current.openItems.length).toEqual(0); - act(() => result.current.requestToggle(undefined!, { value: 0 })); + act(() => result.current.requestToggle(undefined!, { value: 0, openItems: [] })); expect(result.current.openItems.length).toEqual(1); expect(result.current.openItems.includes(0)).toBeTruthy(); - act(() => result.current.requestToggle(undefined!, { value: 1 })); + act(() => result.current.requestToggle(undefined!, { value: 1, openItems: [] })); expect(result.current.openItems.length).toEqual(1); expect(result.current.openItems.includes(1)).toBeTruthy(); expect(result.current.openItems.includes(0)).toBeFalsy();