@fluentui/react-accordion 9.10.0 → 9.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -2
- package/dist/index.d.ts +3 -2
- package/lib/components/Accordion/Accordion.types.js +1 -1
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordionContextValues.js +10 -3
- package/lib/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.js +0 -1
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js +8 -2
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib/contexts/accordion.js.map +1 -1
- package/lib/contexts/accordionItem.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.types.js +0 -2
- package/lib-commonjs/components/Accordion/Accordion.types.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js +11 -3
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +0 -2
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +8 -3
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/contexts/accordion.js.map +1 -1
- package/lib-commonjs/contexts/accordionItem.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-accordion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 23 Apr 2026 11:59:38 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.11.0)
|
|
8
|
+
|
|
9
|
+
Thu, 23 Apr 2026 11:59:38 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.10.0..@fluentui/react-accordion_v9.11.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: add CollapseParams to the motion slot type ([PR #36011](https://github.com/microsoft/fluentui/pull/36011) by robertpenner@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.17.11 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
18
|
+
- Bump @fluentui/react-motion to v9.15.0 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
19
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
|
|
26
|
+
- fix: prevent keyboard focus from entering a collapsing panel ([PR #35960](https://github.com/microsoft/fluentui/pull/35960) by 198982749+Copilot@users.noreply.github.com)
|
|
27
|
+
|
|
7
28
|
## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.10.0)
|
|
8
29
|
|
|
9
|
-
Mon, 30 Mar 2026 14:
|
|
30
|
+
Mon, 30 Mar 2026 14:37:39 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.9.2..@fluentui/react-accordion_v9.10.0)
|
|
11
32
|
|
|
12
33
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
|
|
2
|
+
import type { CollapseParams } from '@fluentui/react-motion-components-preview';
|
|
2
3
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
3
4
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
4
|
-
import { ContextSelector } from '@fluentui/react-context-selector';
|
|
5
|
+
import type { ContextSelector } from '@fluentui/react-context-selector';
|
|
5
6
|
import { FC } from 'react';
|
|
6
7
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
7
8
|
import type { JSXElement } from '@fluentui/react-utilities';
|
|
@@ -166,7 +167,7 @@ export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
|
|
|
166
167
|
|
|
167
168
|
export declare type AccordionPanelSlots = {
|
|
168
169
|
root: NonNullable<Slot<'div'>>;
|
|
169
|
-
collapseMotion?: Slot<PresenceMotionSlotProps
|
|
170
|
+
collapseMotion?: Slot<PresenceMotionSlotProps<CollapseParams>>;
|
|
170
171
|
};
|
|
171
172
|
|
|
172
173
|
export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/Accordion.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler<Value = AccordionItemValue> = (\n event: AccordionToggleEvent,\n data: AccordionToggleData<Value>,\n) => void;\n\nexport type AccordionContextValues = {\n accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionToggleData<Value = AccordionItemValue> = {\n value: Value;\n openItems: Value[];\n};\n\nexport type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {\n /**\n * Default value for the uncontrolled state of the panel.\n */\n defaultOpenItems?: Value | Value[];\n\n /**\n * Indicates if Accordion support multiple Panels closed at the same time.\n */\n collapsible?: boolean;\n\n /**\n * Indicates if Accordion support multiple Panels opened at the same time.\n */\n multiple?: boolean;\n\n /**\n * @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.\n * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.\n */\n navigation?: 'linear' | 'circular';\n\n /**\n * Callback to be called when the opened items change.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onToggle?: AccordionToggleEventHandler<Value>;\n\n /**\n * Controls the state of the panel.\n */\n openItems?: Value | Value[];\n};\n\nexport type AccordionBaseProps<Value = AccordionItemValue> = Omit<AccordionProps<Value>, 'navigation'>;\n\nexport type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;\n\nexport type AccordionBaseState<Value = AccordionItemValue> = Omit<AccordionState<Value>, 'navigation'>;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/Accordion.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler<Value = AccordionItemValue> = (\n event: AccordionToggleEvent,\n data: AccordionToggleData<Value>,\n) => void;\n\nexport type AccordionContextValues = {\n accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionToggleData<Value = AccordionItemValue> = {\n value: Value;\n openItems: Value[];\n};\n\nexport type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {\n /**\n * Default value for the uncontrolled state of the panel.\n */\n defaultOpenItems?: Value | Value[];\n\n /**\n * Indicates if Accordion support multiple Panels closed at the same time.\n */\n collapsible?: boolean;\n\n /**\n * Indicates if Accordion support multiple Panels opened at the same time.\n */\n multiple?: boolean;\n\n /**\n * @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.\n * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.\n */\n navigation?: 'linear' | 'circular';\n\n /**\n * Callback to be called when the opened items change.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onToggle?: AccordionToggleEventHandler<Value>;\n\n /**\n * Controls the state of the panel.\n */\n openItems?: Value | Value[];\n};\n\nexport type AccordionBaseProps<Value = AccordionItemValue> = Omit<AccordionProps<Value>, 'navigation'>;\n\nexport type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;\n\nexport type AccordionBaseState<Value = AccordionItemValue> = Omit<AccordionState<Value>, 'navigation'>;\n"],"names":[],"mappings":"AAiEA,WAAuG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/useAccordion.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { AccordionBaseProps, AccordionBaseState, AccordionProps, AccordionState } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { AccordionRequestToggleData } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = <Value = AccordionItemValue>(\n props: AccordionProps<Value>,\n ref: React.Ref<HTMLElement>,\n): AccordionState<Value> => {\n const {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n navigation,\n ...baseProps\n } = props;\n const state = useAccordionBase_unstable(baseProps, ref);\n\n /** FIXME: deprecated will be removed after navigation prop is removed */\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: navigation === 'circular',\n tabbable: true,\n });\n\n return {\n navigation,\n ...state,\n\n root: {\n ...state.root,\n ...(navigation ? arrowNavigationProps : undefined),\n },\n };\n};\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordionBase_unstable = <Value = AccordionItemValue>(\n props: AccordionBaseProps<Value>,\n ref: React.Ref<HTMLElement>,\n): AccordionBaseState<Value> => {\n const {\n openItems: controlledOpenItems,\n defaultOpenItems,\n multiple = false,\n collapsible = false,\n onToggle,\n ...rest\n } = props;\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n defaultState: defaultOpenItems && (() => initializeUncontrolledOpenItems({ defaultOpenItems, multiple })),\n initialState: [],\n });\n\n const requestToggle = useEventCallback((data: AccordionRequestToggleData<Value>) => {\n const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);\n onToggle?.(data.event, { value: data.value, openItems: nextOpenItems });\n setOpenItems(nextOpenItems);\n });\n\n return {\n collapsible,\n multiple,\n openItems,\n requestToggle,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems<Value = AccordionItemValue>({\n defaultOpenItems,\n multiple,\n}: Pick<AccordionProps<Value>, 'defaultOpenItems' | 'multiple'>): Value[] {\n if (defaultOpenItems !== undefined) {\n if (Array.isArray(defaultOpenItems)) {\n return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n }\n return [defaultOpenItems];\n }\n return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems<Value = AccordionItemValue>(\n value: Value,\n previousOpenItems: Value[],\n multiple: boolean,\n collapsible: boolean,\n) {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n if (previousOpenItems.length > 1 || collapsible) {\n return previousOpenItems.filter(i => i !== value);\n }\n } else {\n return [...previousOpenItems, value].sort();\n }\n } else {\n return previousOpenItems[0] === value && collapsible ? [] : [value];\n }\n return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues<Value = AccordionItemValue>(index?: Value | Value[]): Value[] | undefined {\n if (index === undefined) {\n return undefined;\n }\n return Array.isArray(index) ? index : [index];\n}\n"],"names":["React","useControllableState","useEventCallback","slot","useArrowNavigationGroup","useAccordion_unstable","props","ref","navigation","baseProps","state","useAccordionBase_unstable","arrowNavigationProps","circular","tabbable","root","undefined","openItems","controlledOpenItems","defaultOpenItems","multiple","collapsible","onToggle","rest","setOpenItems","useMemo","normalizeValues","defaultState","initializeUncontrolledOpenItems","initialState","requestToggle","data","nextOpenItems","updateOpenItems","value","event","components","always","elementType","Array","isArray","previousOpenItems","includes","length","filter","i","sort","index"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAGzF,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;CAIC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EACJ,4DAA4D;IAC5DC,UAAU,EACV,GAAGC,WACJ,GAAGH;IACJ,MAAMI,QAAQC,0BAA0BF,WAAWF;IAEnD,uEAAuE,GACvE,MAAMK,uBAAuBR,wBAAwB;QACnDS,UAAUL,eAAe;QACzBM,UAAU;IACZ;IAEA,OAAO;QACLN;QACA,GAAGE,KAAK;QAERK,MAAM;YACJ,GAAGL,MAAMK,IAAI;YACb,GAAIP,aAAaI,uBAAuBI,SAAS;QACnD;IACF;AACF,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAML,4BAA4B,CACvCL,OACAC;IAEA,MAAM,EACJU,WAAWC,mBAAmB,EAC9BC,gBAAgB,EAChBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,QAAQ,EACR,GAAGC,MACJ,GAAGjB;IACJ,MAAM,CAACW,WAAWO,aAAa,GAAGvB,qBAAqB;QACrDS,OAAOV,MAAMyB,OAAO,CAAC,IAAMC,gBAAgBR,sBAAsB;YAACA;SAAoB;QACtFS,cAAcR,oBAAqB,CAAA,IAAMS,gCAAgC;gBAAET;gBAAkBC;YAAS,EAAC;QACvGS,cAAc,EAAE;IAClB;IAEA,MAAMC,gBAAgB5B,iBAAiB,CAAC6B;QACtC,MAAMC,gBAAgBC,gBAAgBF,KAAKG,KAAK,EAAEjB,WAAWG,UAAUC;QACvEC,qBAAAA,+BAAAA,SAAWS,KAAKI,KAAK,EAAE;YAAED,OAAOH,KAAKG,KAAK;YAAEjB,WAAWe;QAAc;QACrER,aAAaQ;IACf;IAEA,OAAO;QACLX;QACAD;QACAH;QACAa;QACAM,YAAY;YACVrB,MAAM;QACR;QACAA,MAAMZ,KAAKkC,MAAM,CACf;YACE9B,KAAKA;YACL,GAAGgB,IAAI;QACT,GACA;YAAEe,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;CAEC,GACD,SAASV,gCAA4D,EACnET,gBAAgB,EAChBC,QAAQ,EACqD;IAC7D,IAAID,qBAAqBH,WAAW;QAClC,IAAIuB,MAAMC,OAAO,CAACrB,mBAAmB;YACnC,OAAOC,WAAWD,mBAAmB;gBAACA,gBAAgB,CAAC,EAAE;aAAC;QAC5D;QACA,OAAO;YAACA;SAAiB;IAC3B;IACA,OAAO,EAAE;AACX;AAEA;;;;;;CAMC,GACD,SAASc,gBACPC,KAAY,EACZO,iBAA0B,EAC1BrB,QAAiB,EACjBC,WAAoB;IAEpB,IAAID,UAAU;QACZ,IAAIqB,kBAAkBC,QAAQ,CAACR,QAAQ;YACrC,IAAIO,kBAAkBE,MAAM,GAAG,KAAKtB,aAAa;gBAC/C,OAAOoB,kBAAkBG,MAAM,CAACC,CAAAA,IAAKA,MAAMX;YAC7C;QACF,OAAO;YACL,OAAO;mBAAIO;gBAAmBP;aAAM,CAACY,IAAI;QAC3C;IACF,OAAO;QACL,OAAOL,iBAAiB,CAAC,EAAE,KAAKP,SAASb,cAAc,EAAE,GAAG;YAACa;SAAM;IACrE;IACA,OAAOO;AACT;AAEA;;CAEC,GACD,SAASf,gBAA4CqB,KAAuB;IAC1E,IAAIA,UAAU/B,WAAW;QACvB,OAAOA;IACT;IACA,OAAOuB,MAAMC,OAAO,CAACO,SAASA,QAAQ;QAACA;KAAM;AAC/C"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/useAccordion.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { AccordionBaseProps, AccordionBaseState, AccordionProps, AccordionState } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { AccordionRequestToggleData } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = <Value = AccordionItemValue>(\n props: AccordionProps<Value>,\n ref: React.Ref<HTMLElement>,\n): AccordionState<Value> => {\n const {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n navigation,\n ...baseProps\n } = props;\n const state = useAccordionBase_unstable(baseProps, ref);\n\n /** FIXME: deprecated will be removed after navigation prop is removed */\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: navigation === 'circular',\n tabbable: true,\n });\n\n return {\n navigation,\n ...state,\n\n root: {\n ...state.root,\n ...(navigation ? arrowNavigationProps : undefined),\n },\n };\n};\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordionBase_unstable = <Value = AccordionItemValue>(\n props: AccordionBaseProps<Value>,\n ref: React.Ref<HTMLElement>,\n): AccordionBaseState<Value> => {\n const {\n openItems: controlledOpenItems,\n defaultOpenItems,\n multiple = false,\n collapsible = false,\n onToggle,\n ...rest\n } = props;\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n defaultState: defaultOpenItems && (() => initializeUncontrolledOpenItems({ defaultOpenItems, multiple })),\n initialState: [],\n });\n\n const requestToggle = useEventCallback((data: AccordionRequestToggleData<Value>) => {\n const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);\n onToggle?.(data.event, { value: data.value, openItems: nextOpenItems });\n setOpenItems(nextOpenItems);\n });\n\n return {\n collapsible,\n multiple,\n openItems,\n requestToggle,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems<Value = AccordionItemValue>({\n defaultOpenItems,\n multiple,\n}: Pick<AccordionProps<Value>, 'defaultOpenItems' | 'multiple'>): Value[] {\n if (defaultOpenItems !== undefined) {\n if (Array.isArray(defaultOpenItems)) {\n return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n }\n return [defaultOpenItems];\n }\n return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems<Value = AccordionItemValue>(\n value: Value,\n previousOpenItems: Value[],\n multiple: boolean,\n collapsible: boolean,\n) {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n if (previousOpenItems.length > 1 || collapsible) {\n return previousOpenItems.filter(i => i !== value);\n }\n } else {\n return [...previousOpenItems, value].sort();\n }\n } else {\n return previousOpenItems[0] === value && collapsible ? [] : [value];\n }\n return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues<Value = AccordionItemValue>(index?: Value | Value[]): Value[] | undefined {\n if (index === undefined) {\n return undefined;\n }\n return Array.isArray(index) ? index : [index];\n}\n"],"names":["React","useControllableState","useEventCallback","slot","useArrowNavigationGroup","useAccordion_unstable","props","ref","navigation","baseProps","state","useAccordionBase_unstable","arrowNavigationProps","circular","tabbable","root","undefined","openItems","controlledOpenItems","defaultOpenItems","multiple","collapsible","onToggle","rest","setOpenItems","useMemo","normalizeValues","defaultState","initializeUncontrolledOpenItems","initialState","requestToggle","data","nextOpenItems","updateOpenItems","value","event","components","always","elementType","Array","isArray","previousOpenItems","includes","length","filter","i","sort","index"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAGzF,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;CAIC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EACJ,4DAA4D;IAC5DC,UAAU,EACV,GAAGC,WACJ,GAAGH;IACJ,MAAMI,QAAQC,0BAA0BF,WAAWF;IAEnD,uEAAuE,GACvE,MAAMK,uBAAuBR,wBAAwB;QACnDS,UAAUL,eAAe;QACzBM,UAAU;IACZ;IAEA,OAAO;QACLN;QACA,GAAGE,KAAK;QAERK,MAAM;YACJ,GAAGL,MAAMK,IAAI;YACb,GAAIP,aAAaI,uBAAuBI,SAAS;QACnD;IACF;AACF,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAML,4BAA4B,CACvCL,OACAC;IAEA,MAAM,EACJU,WAAWC,mBAAmB,EAC9BC,gBAAgB,EAChBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,QAAQ,EACR,GAAGC,MACJ,GAAGjB;IACJ,MAAM,CAACW,WAAWO,aAAa,GAAGvB,qBAAqB;QACrDS,OAAOV,MAAMyB,OAAO,CAAC,IAAMC,gBAAgBR,sBAAsB;YAACA;SAAoB;QACtFS,cAAcR,oBAAqB,CAAA,IAAMS,gCAAgC;gBAAET;gBAAkBC;YAAS,EAAC;QACvGS,cAAc,EAAE;IAClB;IAEA,MAAMC,gBAAgB5B,iBAAiB,CAAC6B;QACtC,MAAMC,gBAAgBC,gBAAgBF,KAAKG,KAAK,EAAEjB,WAAWG,UAAUC;QACvEC,qBAAAA,+BAAAA,SAAWS,KAAKI,KAAK,EAAE;YAAED,OAAOH,KAAKG,KAAK;YAAEjB,WAAWe;QAAc;QACrER,aAAaQ;IACf;IAEA,OAAO;QACLX;QACAD;QACAH;QACAa;QACAM,YAAY;YACVrB,MAAM;QACR;QACAA,MAAMZ,KAAKkC,MAAM,CACf;YACE9B,KAAKA;YACL,GAAGgB,IAAI;QACT,GACA;YAAEe,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;CAEC,GACD,SAASV,gCAA4D,EACnET,gBAAgB,EAChBC,QAAQ,EACqD;IAC7D,IAAID,qBAAqBH,WAAW;QAClC,IAAIuB,MAAMC,OAAO,CAACrB,mBAAmB;YACnC,OAAOC,WAAWD,mBAAmB;gBAACA,gBAAgB,CAAC,EAAE;aAAC;QAC5D;QACA,OAAO;YAACA;SAAiB;IAC3B;IACA,OAAO,EAAE;AACX;AAEA;;;;;;CAMC,GACD,SAASc,gBACPC,KAAY,EACZO,iBAA0B,EAC1BrB,QAAiB,EACjBC,WAAoB;IAEpB,IAAID,UAAU;QACZ,IAAIqB,kBAAkBC,QAAQ,CAACR,QAAQ;YACrC,IAAIO,kBAAkBE,MAAM,GAAG,KAAKtB,aAAa;gBAC/C,OAAOoB,kBAAkBG,MAAM,CAACC,CAAAA,IAAKA,MAAMX;YAC7C;QACF,OAAO;YACL,OAAO;mBAAIO;gBAAmBP;aAAM,CAACY,IAAI;QAC3C;IACF,OAAO;QACL,OAAOL,iBAAiB,CAAC,EAAE,KAAKP,SAASb,cAAc,EAAE,GAAG;YAACa;SAAM;IACrE;IACA,OAAOO;AACT;AAEA;;CAEC,GACD,SAASf,gBAA4CqB,KAAuB;IAC1E,IAAIA,UAAU/B,WAAW;QACvB,OAAOA;IACT;IACA,OAAOuB,MAAMC,OAAO,CAACO,SAASA,QAAQ;QAACA;KAAM;AAC/C"}
|
|
@@ -1,13 +1,20 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import * as React from 'react';
|
|
1
3
|
export function useAccordionContextValues_unstable(state) {
|
|
2
4
|
const { navigation, openItems, requestToggle, multiple, collapsible } = state;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
+
const accordion = React.useMemo(()=>({
|
|
6
|
+
navigation,
|
|
7
|
+
openItems,
|
|
8
|
+
requestToggle,
|
|
9
|
+
collapsible,
|
|
10
|
+
multiple
|
|
11
|
+
}), [
|
|
5
12
|
navigation,
|
|
6
13
|
openItems,
|
|
7
14
|
requestToggle,
|
|
8
15
|
collapsible,
|
|
9
16
|
multiple
|
|
10
|
-
|
|
17
|
+
]);
|
|
11
18
|
return {
|
|
12
19
|
accordion
|
|
13
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/useAccordionContextValues.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/useAccordionContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionContextValues, AccordionState } from './Accordion.types';\n\nexport function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues {\n const { navigation, openItems, requestToggle, multiple, collapsible } = state;\n\n const accordion = React.useMemo<AccordionContextValue>(\n () => ({\n navigation,\n openItems,\n requestToggle,\n collapsible,\n multiple,\n }),\n [navigation, openItems, requestToggle, collapsible, multiple],\n );\n\n return { accordion };\n}\n"],"names":["React","useAccordionContextValues_unstable","state","navigation","openItems","requestToggle","multiple","collapsible","accordion","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,mCAAmCC,KAAqB;IACtE,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGL;IAExE,MAAMM,YAAYR,MAAMS,OAAO,CAC7B,IAAO,CAAA;YACLN;YACAC;YACAC;YACAE;YACAD;QACF,CAAA,GACA;QAACH;QAAYC;QAAWC;QAAeE;QAAaD;KAAS;IAG/D,OAAO;QAAEE;IAAU;AACrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionItem/AccordionItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport type AccordionItemContextValues<Value = AccordionItemValue> = {\n accordionItem: AccordionItemContextValue<Value>;\n};\n\nexport type AccordionItemSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionItemProps<Value = AccordionItemValue> = ComponentProps<AccordionItemSlots> & {\n /**\n * Disables opening/closing of panel.\n */\n disabled?: boolean;\n /**\n * Required value that identifies this item inside an Accordion component.\n */\n value: Value;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> &\n AccordionItemContextValue<Value>;\n"],"names":[],"mappings":"AAwBA,WACmC"}
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionItem/AccordionItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport type AccordionItemContextValues<Value = AccordionItemValue> = {\n accordionItem: AccordionItemContextValue<Value>;\n};\n\nexport type AccordionItemSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionItemProps<Value = AccordionItemValue> = ComponentProps<AccordionItemSlots> & {\n /**\n * Disables opening/closing of panel.\n */\n disabled?: boolean;\n /**\n * Required value that identifies this item inside an Accordion component.\n */\n value: Value;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> &\n AccordionItemContextValue<Value>;\n"],"names":[],"mappings":"AAwBA,WACmC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false, ...rest } = props;\n\n const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = useEventCallback((event: AccordionToggleEvent) => requestToggle({ event, value }));\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n disabled,\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItem.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false, ...rest } = props;\n\n const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = useEventCallback((event: AccordionToggleEvent) => requestToggle({ event, value }));\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n disabled,\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["slot","useEventCallback","useAccordionContext_unstable","useAccordionItem_unstable","props","ref","value","disabled","rest","requestToggle","ctx","open","openItems","includes","onAccordionHeaderClick","event","onHeaderClick","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGnE,SAASC,4BAA4B,QAAQ,2BAA2B;AAExE;;;;CAIC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE7C,MAAMK,gBAAgBP,6BAA6BQ,CAAAA,MAAOA,IAAID,aAAa;IAC3E,MAAME,OAAOT,6BAA6BQ,CAAAA,MAAOA,IAAIE,SAAS,CAACC,QAAQ,CAACP;IACxE,MAAMQ,yBAAyBb,iBAAiB,CAACc,QAAgCN,cAAc;YAAEM;YAAOT;QAAM;IAE9G,OAAO;QACLK;QACAL;QACAC;QACAS,eAAeF;QACfG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,KAAKmB,MAAM,CACf;YACEZ;YACAF,KAAKA;YACL,GAAGG,IAAI;QACT,GACA;YAAEY,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItemContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';\nimport { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { disabled, open, value, onHeaderClick } = state;\n const accordionItem = React.useMemo<AccordionItemContextValue>(\n () => ({ disabled, open, value, onHeaderClick }),\n [disabled, open, value, onHeaderClick],\n );\n\n return { accordionItem };\n}\n"],"names":["React","useAccordionItemContextValues_unstable","state","disabled","open","value","onHeaderClick","accordionItem","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,uCAAuCC,KAAyB;IAC9E,4DAA4D;IAC5D,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGJ;IACjD,MAAMK,gBAAgBP,MAAMQ,OAAO,CACjC,IAAO,CAAA;YAAEL;YAAUC;YAAMC;YAAOC;QAAc,CAAA,GAC9C;QAACH;QAAUC;QAAMC;QAAOC;KAAc;IAGxC,OAAO;QAAEC;IAAc;AACzB"}
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItemContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { disabled, open, value, onHeaderClick } = state;\n const accordionItem = React.useMemo<AccordionItemContextValue>(\n () => ({ disabled, open, value, onHeaderClick }),\n [disabled, open, value, onHeaderClick],\n );\n\n return { accordionItem };\n}\n"],"names":["React","useAccordionItemContextValues_unstable","state","disabled","open","value","onHeaderClick","accordionItem","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,uCAAuCC,KAAyB;IAC9E,4DAA4D;IAC5D,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGJ;IACjD,MAAMK,gBAAgBP,MAAMQ,OAAO,CACjC,IAAO,CAAA;YAAEL;YAAUC;YAAMC;YAAOC;QAAc,CAAA,GAC9C;QAACH;QAAUC;QAAMC;QAAOC;KAAc;IAGxC,OAAO;QAAEC;IAAc;AACzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionPanel/AccordionPanel.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: NonNullable<Slot<'div'>>;\n collapseMotion?: Slot<PresenceMotionSlotProps
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionPanel/AccordionPanel.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { CollapseParams } from '@fluentui/react-motion-components-preview';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: NonNullable<Slot<'div'>>;\n collapseMotion?: Slot<PresenceMotionSlotProps<CollapseParams>>;\n};\n\nexport type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;\n\nexport type AccordionPanelBaseProps = ComponentProps<Omit<AccordionPanelSlots, 'collapseMotion'>>;\n\nexport type AccordionPanelState = ComponentState<AccordionPanelSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n\nexport type AccordionPanelBaseState = ComponentState<Omit<AccordionPanelSlots, 'collapseMotion'>> &\n Pick<AccordionPanelState, 'open'>;\n"],"names":[],"mappings":"AAoBA,WACoC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from 'react';
|
|
3
2
|
import { slot } from '@fluentui/react-utilities';
|
|
4
3
|
import { useTabsterAttributes } from '@fluentui/react-tabster';
|
|
5
4
|
import { presenceMotionSlot } from '@fluentui/react-motion';
|
|
@@ -53,7 +52,14 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
|
|
|
53
52
|
},
|
|
54
53
|
root: slot.always({
|
|
55
54
|
ref: ref,
|
|
56
|
-
...props
|
|
55
|
+
...props,
|
|
56
|
+
// Prevent keyboard focus from entering the panel while it is closed/collapsing.
|
|
57
|
+
// tabIndex: -1 prevents the panel itself from being focused, and inert prevents
|
|
58
|
+
// all focusable descendants from being reachable via keyboard navigation.
|
|
59
|
+
...open ? {} : {
|
|
60
|
+
tabIndex: -1,
|
|
61
|
+
inert: true
|
|
62
|
+
}
|
|
57
63
|
}, {
|
|
58
64
|
elementType: 'div'
|
|
59
65
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanel.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type {\n AccordionPanelBaseProps,\n AccordionPanelBaseState,\n AccordionPanelProps,\n AccordionPanelState,\n} from './AccordionPanel.types';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n props: AccordionPanelProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n const { collapseMotion, ...baseProps } = props;\n const state = useAccordionPanelBase_unstable(baseProps, ref);\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n collapseMotion: Collapse,\n },\n root: {\n ...state.root,\n ...(navigation && focusableProps),\n },\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: state.open,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Base state hook for AccordionPanel, without design related features.\n *\n * @param props - AccordionPanelBaseProps properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanelBase_unstable = (\n props: AccordionPanelBaseProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelBaseState => {\n const { open } = useAccordionItemContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanel.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type {\n AccordionPanelBaseProps,\n AccordionPanelBaseState,\n AccordionPanelProps,\n AccordionPanelState,\n} from './AccordionPanel.types';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n props: AccordionPanelProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n const { collapseMotion, ...baseProps } = props;\n const state = useAccordionPanelBase_unstable(baseProps, ref);\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n collapseMotion: Collapse,\n },\n root: {\n ...state.root,\n ...(navigation && focusableProps),\n },\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: state.open,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Base state hook for AccordionPanel, without design related features.\n *\n * @param props - AccordionPanelBaseProps properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanelBase_unstable = (\n props: AccordionPanelBaseProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelBaseState => {\n const { open } = useAccordionItemContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n // Prevent keyboard focus from entering the panel while it is closed/collapsing.\n // tabIndex: -1 prevents the panel itself from being focused, and inert prevents\n // all focusable descendants from being reachable via keyboard navigation.\n ...(open ? {} : { tabIndex: -1, inert: true }),\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["slot","useTabsterAttributes","presenceMotionSlot","Collapse","useAccordionContext_unstable","useAccordionItemContext_unstable","useAccordionPanel_unstable","props","ref","collapseMotion","baseProps","state","useAccordionPanelBase_unstable","focusableProps","focusable","excludeFromMover","navigation","ctx","components","root","elementType","defaultProps","visible","open","unmountOnExit","always","tabIndex","inert"],"mappings":"AAAA;AAGA,SAASA,IAAI,QAAQ,4BAA4B;AACjD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,QAAQ,QAAQ,4CAA4C;AACrE,SAASC,4BAA4B,QAAQ,2BAA2B;AAOxE,SAASC,gCAAgC,QAAQ,+BAA+B;AAEhF;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGC,WAAW,GAAGH;IACzC,MAAMI,QAAQC,+BAA+BF,WAAWF;IACxD,MAAMK,iBAAiBZ,qBAAqB;QAAEa,WAAW;YAAEC,kBAAkB;QAAK;IAAE;IACpF,MAAMC,aAAaZ,6BAA6Ba,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACL,GAAGL,KAAK;QACRO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,MAAMO,UAAU;YACnBT,gBAAgBN;QAClB;QACAgB,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,GAAIH,cAAcH,cAAc;QAClC;QACAJ,gBAAgBP,mBAAmBK,MAAME,cAAc,EAAE;YACvDW,aAAajB;YACbkB,cAAc;gBACZC,SAASX,MAAMY,IAAI;gBACnBC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMZ,iCAAiC,CAC5CL,OACAC;IAEA,MAAM,EAAEe,IAAI,EAAE,GAAGlB;IAEjB,OAAO;QACLkB;QACAL,YAAY;YACVC,MAAM;QACR;QACAA,MAAMnB,KAAKyB,MAAM,CACf;YACEjB,KAAKA;YACL,GAAGD,KAAK;YACR,gFAAgF;YAChF,gFAAgF;YAChF,0EAA0E;YAC1E,GAAIgB,OAAO,CAAC,IAAI;gBAAEG,UAAU,CAAC;gBAAGC,OAAO;YAAK,CAAC;QAC/C,GACA;YAAEP,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/accordion.ts"],"sourcesContent":["'use client';\n\nimport { createContext,
|
|
1
|
+
{"version":3,"sources":["../src/contexts/accordion.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AccordionItemValue } from '../AccordionItem';\nimport type { AccordionToggleData, AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionRequestToggleData<Value = AccordionItemValue> = { event: AccordionToggleEvent } & Pick<\n AccordionToggleData<Value>,\n 'value'\n>;\n\nexport type AccordionContextValue<Value = AccordionItemValue> = {\n /**\n * The list of opened panels by index\n */\n openItems: AccordionItemValue[];\n /**\n * Callback used by AccordionItem to request a change on it's own opened state\n * Should be used to toggle AccordionItem\n */\n requestToggle: (data: AccordionRequestToggleData<Value>) => void;\n collapsible: boolean;\n multiple: boolean;\n navigation: 'linear' | 'circular' | undefined;\n};\n\nconst AccordionContext = createContext<AccordionContextValue | undefined>(undefined) as Context<AccordionContextValue>;\n\nconst accordionContextDefaultValue: AccordionContextValue = {\n openItems: [],\n collapsible: false,\n multiple: false,\n navigation: undefined,\n requestToggle() {\n /* noop */\n },\n};\n\nexport const { Provider: AccordionProvider } = AccordionContext;\nexport const useAccordionContext_unstable = <T>(selector: ContextSelector<AccordionContextValue, T>): T =>\n useContextSelector(AccordionContext, (ctx = accordionContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AccordionContext","undefined","accordionContextDefaultValue","openItems","collapsible","multiple","navigation","requestToggle","Provider","AccordionProvider","useAccordionContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAyBrF,MAAMC,mBAAmBF,cAAiDG;AAE1E,MAAMC,+BAAsD;IAC1DC,WAAW,EAAE;IACbC,aAAa;IACbC,UAAU;IACVC,YAAYL;IACZM;IACE,QAAQ,GACV;AACF;AAEA,OAAO,MAAM,EAAEC,UAAUC,iBAAiB,EAAE,GAAGT,iBAAiB;AAChE,OAAO,MAAMU,+BAA+B,CAAIC,WAC9CZ,mBAAmBC,kBAAkB,CAACY,MAAMV,4BAA4B,GAAKS,SAASC,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/accordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AccordionItemValue } from '../AccordionItem';\nimport { AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionItemContextValue<Value = AccordionItemValue> = {\n open: boolean;\n disabled: boolean;\n value: Value;\n /**\n * @deprecated - use `requestToggle` from AccordionContent instead\n */\n onHeaderClick(event: AccordionToggleEvent): void;\n};\n\nconst AccordionItemContext = React.createContext<AccordionItemContextValue<unknown> | undefined>(\n undefined,\n) as React.Context<AccordionItemContextValue<unknown>>;\n\nconst accordionItemContextDefaultValue: AccordionItemContextValue<unknown> = {\n open: false,\n disabled: false,\n value: undefined,\n onHeaderClick() {\n /* noop */\n },\n};\n\nexport const { Provider: AccordionItemProvider } = AccordionItemContext;\n\nexport const useAccordionItemContext_unstable = (): AccordionItemContextValue<unknown> => {\n return React.useContext(AccordionItemContext) ?? accordionItemContextDefaultValue;\n};\n"],"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","open","disabled","value","onHeaderClick","Provider","AccordionItemProvider","useAccordionItemContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAc/B,MAAMC,uBAAuBD,MAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAAuE;IAC3EC,MAAM;IACNC,UAAU;IACVC,OAAOJ;IACPK;IACE,QAAQ,GACV;AACF;AAEA,OAAO,MAAM,EAAEC,UAAUC,qBAAqB,EAAE,GAAGT,qBAAqB;AAExE,OAAO,MAAMU,mCAAmC;QACvCX;IAAP,OAAOA,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,mCAAjBD,+BAAAA,oBAA0CI;AACnD,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/contexts/accordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionItemValue } from '../AccordionItem';\nimport type { AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionItemContextValue<Value = AccordionItemValue> = {\n open: boolean;\n disabled: boolean;\n value: Value;\n /**\n * @deprecated - use `requestToggle` from AccordionContent instead\n */\n onHeaderClick(event: AccordionToggleEvent): void;\n};\n\nconst AccordionItemContext = React.createContext<AccordionItemContextValue<unknown> | undefined>(\n undefined,\n) as React.Context<AccordionItemContextValue<unknown>>;\n\nconst accordionItemContextDefaultValue: AccordionItemContextValue<unknown> = {\n open: false,\n disabled: false,\n value: undefined,\n onHeaderClick() {\n /* noop */\n },\n};\n\nexport const { Provider: AccordionItemProvider } = AccordionItemContext;\n\nexport const useAccordionItemContext_unstable = (): AccordionItemContextValue<unknown> => {\n return React.useContext(AccordionItemContext) ?? accordionItemContextDefaultValue;\n};\n"],"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","open","disabled","value","onHeaderClick","Provider","AccordionItemProvider","useAccordionItemContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAc/B,MAAMC,uBAAuBD,MAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAAuE;IAC3EC,MAAM;IACNC,UAAU;IACVC,OAAOJ;IACPK;IACE,QAAQ,GACV;AACF;AAEA,OAAO,MAAM,EAAEC,UAAUC,qBAAqB,EAAE,GAAGT,qBAAqB;AAExE,OAAO,MAAMU,mCAAmC;QACvCX;IAAP,OAAOA,CAAAA,oBAAAA,MAAMY,UAAU,CAACX,mCAAjBD,+BAAAA,oBAA0CI;AACnD,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/Accordion.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler<Value = AccordionItemValue> = (\n event: AccordionToggleEvent,\n data: AccordionToggleData<Value>,\n) => void;\n\nexport type AccordionContextValues = {\n accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionToggleData<Value = AccordionItemValue> = {\n value: Value;\n openItems: Value[];\n};\n\nexport type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {\n /**\n * Default value for the uncontrolled state of the panel.\n */\n defaultOpenItems?: Value | Value[];\n\n /**\n * Indicates if Accordion support multiple Panels closed at the same time.\n */\n collapsible?: boolean;\n\n /**\n * Indicates if Accordion support multiple Panels opened at the same time.\n */\n multiple?: boolean;\n\n /**\n * @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.\n * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.\n */\n navigation?: 'linear' | 'circular';\n\n /**\n * Callback to be called when the opened items change.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onToggle?: AccordionToggleEventHandler<Value>;\n\n /**\n * Controls the state of the panel.\n */\n openItems?: Value | Value[];\n};\n\nexport type AccordionBaseProps<Value = AccordionItemValue> = Omit<AccordionProps<Value>, 'navigation'>;\n\nexport type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;\n\nexport type AccordionBaseState<Value = AccordionItemValue> = Omit<AccordionState<Value>, 'navigation'>;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/Accordion.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler<Value = AccordionItemValue> = (\n event: AccordionToggleEvent,\n data: AccordionToggleData<Value>,\n) => void;\n\nexport type AccordionContextValues = {\n accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionToggleData<Value = AccordionItemValue> = {\n value: Value;\n openItems: Value[];\n};\n\nexport type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {\n /**\n * Default value for the uncontrolled state of the panel.\n */\n defaultOpenItems?: Value | Value[];\n\n /**\n * Indicates if Accordion support multiple Panels closed at the same time.\n */\n collapsible?: boolean;\n\n /**\n * Indicates if Accordion support multiple Panels opened at the same time.\n */\n multiple?: boolean;\n\n /**\n * @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.\n * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.\n */\n navigation?: 'linear' | 'circular';\n\n /**\n * Callback to be called when the opened items change.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onToggle?: AccordionToggleEventHandler<Value>;\n\n /**\n * Controls the state of the panel.\n */\n openItems?: Value | Value[];\n};\n\nexport type AccordionBaseProps<Value = AccordionItemValue> = Omit<AccordionProps<Value>, 'navigation'>;\n\nexport type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;\n\nexport type AccordionBaseState<Value = AccordionItemValue> = Omit<AccordionState<Value>, 'navigation'>;\n"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/useAccordion.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { AccordionBaseProps, AccordionBaseState, AccordionProps, AccordionState } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { AccordionRequestToggleData } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = <Value = AccordionItemValue>(\n props: AccordionProps<Value>,\n ref: React.Ref<HTMLElement>,\n): AccordionState<Value> => {\n const {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n navigation,\n ...baseProps\n } = props;\n const state = useAccordionBase_unstable(baseProps, ref);\n\n /** FIXME: deprecated will be removed after navigation prop is removed */\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: navigation === 'circular',\n tabbable: true,\n });\n\n return {\n navigation,\n ...state,\n\n root: {\n ...state.root,\n ...(navigation ? arrowNavigationProps : undefined),\n },\n };\n};\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordionBase_unstable = <Value = AccordionItemValue>(\n props: AccordionBaseProps<Value>,\n ref: React.Ref<HTMLElement>,\n): AccordionBaseState<Value> => {\n const {\n openItems: controlledOpenItems,\n defaultOpenItems,\n multiple = false,\n collapsible = false,\n onToggle,\n ...rest\n } = props;\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n defaultState: defaultOpenItems && (() => initializeUncontrolledOpenItems({ defaultOpenItems, multiple })),\n initialState: [],\n });\n\n const requestToggle = useEventCallback((data: AccordionRequestToggleData<Value>) => {\n const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);\n onToggle?.(data.event, { value: data.value, openItems: nextOpenItems });\n setOpenItems(nextOpenItems);\n });\n\n return {\n collapsible,\n multiple,\n openItems,\n requestToggle,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems<Value = AccordionItemValue>({\n defaultOpenItems,\n multiple,\n}: Pick<AccordionProps<Value>, 'defaultOpenItems' | 'multiple'>): Value[] {\n if (defaultOpenItems !== undefined) {\n if (Array.isArray(defaultOpenItems)) {\n return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n }\n return [defaultOpenItems];\n }\n return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems<Value = AccordionItemValue>(\n value: Value,\n previousOpenItems: Value[],\n multiple: boolean,\n collapsible: boolean,\n) {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n if (previousOpenItems.length > 1 || collapsible) {\n return previousOpenItems.filter(i => i !== value);\n }\n } else {\n return [...previousOpenItems, value].sort();\n }\n } else {\n return previousOpenItems[0] === value && collapsible ? [] : [value];\n }\n return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues<Value = AccordionItemValue>(index?: Value | Value[]): Value[] | undefined {\n if (index === undefined) {\n return undefined;\n }\n return Array.isArray(index) ? index : [index];\n}\n"],"names":["React","useControllableState","useEventCallback","slot","useArrowNavigationGroup","useAccordion_unstable","props","ref","navigation","baseProps","state","useAccordionBase_unstable","arrowNavigationProps","circular","tabbable","root","undefined","openItems","controlledOpenItems","defaultOpenItems","multiple","collapsible","onToggle","rest","setOpenItems","useMemo","normalizeValues","defaultState","initializeUncontrolledOpenItems","initialState","requestToggle","data","nextOpenItems","updateOpenItems","value","event","components","always","elementType","Array","isArray","previousOpenItems","includes","length","filter","i","sort","index"],"mappings":"AAAA;;;;;;;;;;;;IA+CaW,yBAAAA;;;yBAjCAN;;;;;iEAZU,QAAQ;gCAC8B,4BAA4B;8BAGjD,0BAA0B;AAQ3D,MAAMA,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EACJ,AACAC,UAAU,EACV,GAAGC,WACJ,GAAGH,+BAH0D;IAI9D,MAAMI,QAAQC,0BAA0BF,WAAWF;IAEnD,uEAAuE,GACvE,MAAMK,2BAAuBR,qCAAAA,EAAwB;QACnDS,UAAUL,eAAe;QACzBM,UAAU;IACZ;IAEA,OAAO;QACLN;QACA,GAAGE,KAAK;QAERK,MAAM;YACJ,GAAGL,MAAMK,IAAI;YACb,GAAIP,aAAaI,uBAAuBI,SAAS;QACnD;IACF;AACF,EAAE;AAOK,kCAAkC,CACvCV,OACAC;IAEA,MAAM,EACJU,WAAWC,mBAAmB,EAC9BC,gBAAgB,EAChBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,QAAQ,EACR,GAAGC,MACJ,GAAGjB;IACJ,MAAM,CAACW,WAAWO,aAAa,OAAGvB,oCAAAA,EAAqB;QACrDS,OAAOV,OAAMyB,OAAO,CAAC,IAAMC,gBAAgBR,sBAAsB;YAACA;SAAoB;QACtFS,cAAcR,oBAAqB,CAAA,IAAMS,gCAAgC;gBAAET;gBAAkBC;YAAS,EAAA,CAAC;QACvGS,cAAc,EAAE;IAClB;IAEA,MAAMC,oBAAgB5B,gCAAAA,EAAiB,CAAC6B;QACtC,MAAMC,gBAAgBC,gBAAgBF,KAAKG,KAAK,EAAEjB,WAAWG,UAAUC;QACvEC,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWS,KAAKI,KAAK,EAAE;YAAED,OAAOH,KAAKG,KAAK;YAAEjB,WAAWe;QAAc;QACrER,aAAaQ;IACf;IAEA,OAAO;QACLX;QACAD;QACAH;QACAa;QACAM,YAAY;YACVrB,MAAM;QACR;QACAA,MAAMZ,oBAAAA,CAAKkC,MAAM,CACf;YACE9B,KAAKA;YACL,GAAGgB,IAAI;QACT,GACA;YAAEe,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;CAEC,GACD,SAASV,gCAA4D,EACnET,gBAAgB,EAChBC,QAAQ,EACqD;IAC7D,IAAID,qBAAqBH,WAAW;QAClC,IAAIuB,MAAMC,OAAO,CAACrB,mBAAmB;YACnC,OAAOC,WAAWD,mBAAmB;gBAACA,gBAAgB,CAAC,EAAE;aAAC;QAC5D;QACA,OAAO;YAACA;SAAiB;IAC3B;IACA,OAAO,EAAE;AACX;AAEA;;;;;;CAMC,GACD,SAASc,gBACPC,KAAY,EACZO,iBAA0B,EAC1BrB,QAAiB,EACjBC,WAAoB;IAEpB,IAAID,UAAU;QACZ,IAAIqB,kBAAkBC,QAAQ,CAACR,QAAQ;YACrC,IAAIO,kBAAkBE,MAAM,GAAG,KAAKtB,aAAa;gBAC/C,OAAOoB,kBAAkBG,MAAM,CAACC,CAAAA,IAAKA,MAAMX;YAC7C;QACF,OAAO;YACL,OAAO;mBAAIO;gBAAmBP;aAAM,CAACY,IAAI;QAC3C;IACF,OAAO;QACL,OAAOL,iBAAiB,CAAC,EAAE,KAAKP,SAASb,cAAc,EAAE,GAAG;YAACa;SAAM;IACrE;IACA,OAAOO;AACT;AAEA;;CAEC,GACD,SAASf,gBAA4CqB,KAAuB;IAC1E,IAAIA,UAAU/B,WAAW;QACvB,OAAOA;IACT;IACA,OAAOuB,MAAMC,OAAO,CAACO,SAASA,QAAQ;QAACA;KAAM;AAC/C"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/useAccordion.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { AccordionBaseProps, AccordionBaseState, AccordionProps, AccordionState } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { AccordionRequestToggleData } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = <Value = AccordionItemValue>(\n props: AccordionProps<Value>,\n ref: React.Ref<HTMLElement>,\n): AccordionState<Value> => {\n const {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n navigation,\n ...baseProps\n } = props;\n const state = useAccordionBase_unstable(baseProps, ref);\n\n /** FIXME: deprecated will be removed after navigation prop is removed */\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: navigation === 'circular',\n tabbable: true,\n });\n\n return {\n navigation,\n ...state,\n\n root: {\n ...state.root,\n ...(navigation ? arrowNavigationProps : undefined),\n },\n };\n};\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordionBase_unstable = <Value = AccordionItemValue>(\n props: AccordionBaseProps<Value>,\n ref: React.Ref<HTMLElement>,\n): AccordionBaseState<Value> => {\n const {\n openItems: controlledOpenItems,\n defaultOpenItems,\n multiple = false,\n collapsible = false,\n onToggle,\n ...rest\n } = props;\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n defaultState: defaultOpenItems && (() => initializeUncontrolledOpenItems({ defaultOpenItems, multiple })),\n initialState: [],\n });\n\n const requestToggle = useEventCallback((data: AccordionRequestToggleData<Value>) => {\n const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);\n onToggle?.(data.event, { value: data.value, openItems: nextOpenItems });\n setOpenItems(nextOpenItems);\n });\n\n return {\n collapsible,\n multiple,\n openItems,\n requestToggle,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems<Value = AccordionItemValue>({\n defaultOpenItems,\n multiple,\n}: Pick<AccordionProps<Value>, 'defaultOpenItems' | 'multiple'>): Value[] {\n if (defaultOpenItems !== undefined) {\n if (Array.isArray(defaultOpenItems)) {\n return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n }\n return [defaultOpenItems];\n }\n return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems<Value = AccordionItemValue>(\n value: Value,\n previousOpenItems: Value[],\n multiple: boolean,\n collapsible: boolean,\n) {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n if (previousOpenItems.length > 1 || collapsible) {\n return previousOpenItems.filter(i => i !== value);\n }\n } else {\n return [...previousOpenItems, value].sort();\n }\n } else {\n return previousOpenItems[0] === value && collapsible ? [] : [value];\n }\n return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues<Value = AccordionItemValue>(index?: Value | Value[]): Value[] | undefined {\n if (index === undefined) {\n return undefined;\n }\n return Array.isArray(index) ? index : [index];\n}\n"],"names":["React","useControllableState","useEventCallback","slot","useArrowNavigationGroup","useAccordion_unstable","props","ref","navigation","baseProps","state","useAccordionBase_unstable","arrowNavigationProps","circular","tabbable","root","undefined","openItems","controlledOpenItems","defaultOpenItems","multiple","collapsible","onToggle","rest","setOpenItems","useMemo","normalizeValues","defaultState","initializeUncontrolledOpenItems","initialState","requestToggle","data","nextOpenItems","updateOpenItems","value","event","components","always","elementType","Array","isArray","previousOpenItems","includes","length","filter","i","sort","index"],"mappings":"AAAA;;;;;;;;;;;;IA+CaW,yBAAAA;;;yBAjCAN;;;;;iEAZU,QAAQ;gCAC8B,4BAA4B;8BAGjD,0BAA0B;AAQ3D,MAAMA,wBAAwB,CACnCC,OACAC;IAEA,MAAM,EACJ,AACAC,UAAU,EACV,GAAGC,WACJ,GAAGH,+BAH0D;IAI9D,MAAMI,QAAQC,0BAA0BF,WAAWF;IAEnD,uEAAuE,GACvE,MAAMK,2BAAuBR,qCAAAA,EAAwB;QACnDS,UAAUL,eAAe;QACzBM,UAAU;IACZ;IAEA,OAAO;QACLN;QACA,GAAGE,KAAK;QAERK,MAAM;YACJ,GAAGL,MAAMK,IAAI;YACb,GAAIP,aAAaI,uBAAuBI,SAAS;QACnD;IACF;AACF,EAAE;AAOK,kCAAkC,CACvCV,OACAC;IAEA,MAAM,EACJU,WAAWC,mBAAmB,EAC9BC,gBAAgB,EAChBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,QAAQ,EACR,GAAGC,MACJ,GAAGjB;IACJ,MAAM,CAACW,WAAWO,aAAa,OAAGvB,oCAAAA,EAAqB;QACrDS,OAAOV,OAAMyB,OAAO,CAAC,IAAMC,gBAAgBR,sBAAsB;YAACA;SAAoB;QACtFS,cAAcR,oBAAqB,CAAA,IAAMS,gCAAgC;gBAAET;gBAAkBC;YAAS,EAAA,CAAC;QACvGS,cAAc,EAAE;IAClB;IAEA,MAAMC,oBAAgB5B,gCAAAA,EAAiB,CAAC6B;QACtC,MAAMC,gBAAgBC,gBAAgBF,KAAKG,KAAK,EAAEjB,WAAWG,UAAUC;QACvEC,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWS,KAAKI,KAAK,EAAE;YAAED,OAAOH,KAAKG,KAAK;YAAEjB,WAAWe;QAAc;QACrER,aAAaQ;IACf;IAEA,OAAO;QACLX;QACAD;QACAH;QACAa;QACAM,YAAY;YACVrB,MAAM;QACR;QACAA,MAAMZ,oBAAAA,CAAKkC,MAAM,CACf;YACE9B,KAAKA;YACL,GAAGgB,IAAI;QACT,GACA;YAAEe,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;CAEC,GACD,SAASV,gCAA4D,EACnET,gBAAgB,EAChBC,QAAQ,EACqD;IAC7D,IAAID,qBAAqBH,WAAW;QAClC,IAAIuB,MAAMC,OAAO,CAACrB,mBAAmB;YACnC,OAAOC,WAAWD,mBAAmB;gBAACA,gBAAgB,CAAC,EAAE;aAAC;QAC5D;QACA,OAAO;YAACA;SAAiB;IAC3B;IACA,OAAO,EAAE;AACX;AAEA;;;;;;CAMC,GACD,SAASc,gBACPC,KAAY,EACZO,iBAA0B,EAC1BrB,QAAiB,EACjBC,WAAoB;IAEpB,IAAID,UAAU;QACZ,IAAIqB,kBAAkBC,QAAQ,CAACR,QAAQ;YACrC,IAAIO,kBAAkBE,MAAM,GAAG,KAAKtB,aAAa;gBAC/C,OAAOoB,kBAAkBG,MAAM,CAACC,CAAAA,IAAKA,MAAMX;YAC7C;QACF,OAAO;YACL,OAAO;mBAAIO;gBAAmBP;aAAM,CAACY,IAAI;QAC3C;IACF,OAAO;QACL,OAAOL,iBAAiB,CAAC,EAAE,KAAKP,SAASb,cAAc,EAAE,GAAG;YAACa;SAAM;IACrE;IACA,OAAOO;AACT;AAEA;;CAEC,GACD,SAASf,gBAA4CqB,KAAuB;IAC1E,IAAIA,UAAU/B,WAAW;QACvB,OAAOA;IACT;IACA,OAAOuB,MAAMC,OAAO,CAACO,SAASA,QAAQ;QAACA;KAAM;AAC/C"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
"use strict";
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
4
|
value: true
|
|
@@ -8,16 +9,23 @@ Object.defineProperty(exports, "useAccordionContextValues_unstable", {
|
|
|
8
9
|
return useAccordionContextValues_unstable;
|
|
9
10
|
}
|
|
10
11
|
});
|
|
12
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
11
14
|
function useAccordionContextValues_unstable(state) {
|
|
12
15
|
const { navigation, openItems, requestToggle, multiple, collapsible } = state;
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
const accordion = _react.useMemo(()=>({
|
|
17
|
+
navigation,
|
|
18
|
+
openItems,
|
|
19
|
+
requestToggle,
|
|
20
|
+
collapsible,
|
|
21
|
+
multiple
|
|
22
|
+
}), [
|
|
15
23
|
navigation,
|
|
16
24
|
openItems,
|
|
17
25
|
requestToggle,
|
|
18
26
|
collapsible,
|
|
19
27
|
multiple
|
|
20
|
-
|
|
28
|
+
]);
|
|
21
29
|
return {
|
|
22
30
|
accordion
|
|
23
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/useAccordionContextValues.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/useAccordionContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionContextValues, AccordionState } from './Accordion.types';\n\nexport function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues {\n const { navigation, openItems, requestToggle, multiple, collapsible } = state;\n\n const accordion = React.useMemo<AccordionContextValue>(\n () => ({\n navigation,\n openItems,\n requestToggle,\n collapsible,\n multiple,\n }),\n [navigation, openItems, requestToggle, collapsible, multiple],\n );\n\n return { accordion };\n}\n"],"names":["React","useAccordionContextValues_unstable","state","navigation","openItems","requestToggle","multiple","collapsible","accordion","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,SAASC,mCAAmCC,KAAqB;IACtE,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGL;IAExE,MAAMM,YAAYR,OAAMS,OAAO,CAC7B,IAAO,CAAA;YACLN;YACAC;YACAC;YACAE;YACAD;SACF,CAAA,EACA;QAACH;QAAYC;QAAWC;QAAeE;QAAaD;KAAS;IAG/D,OAAO;QAAEE;IAAU;AACrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionItem/AccordionItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport type AccordionItemContextValues<Value = AccordionItemValue> = {\n accordionItem: AccordionItemContextValue<Value>;\n};\n\nexport type AccordionItemSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionItemProps<Value = AccordionItemValue> = ComponentProps<AccordionItemSlots> & {\n /**\n * Disables opening/closing of panel.\n */\n disabled?: boolean;\n /**\n * Required value that identifies this item inside an Accordion component.\n */\n value: Value;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> &\n AccordionItemContextValue<Value>;\n"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionItem/AccordionItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport type AccordionItemContextValues<Value = AccordionItemValue> = {\n accordionItem: AccordionItemContextValue<Value>;\n};\n\nexport type AccordionItemSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionItemProps<Value = AccordionItemValue> = ComponentProps<AccordionItemSlots> & {\n /**\n * Disables opening/closing of panel.\n */\n disabled?: boolean;\n /**\n * Required value that identifies this item inside an Accordion component.\n */\n value: Value;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> &\n AccordionItemContextValue<Value>;\n"],"names":[],"mappings":""}
|
|
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useAccordionItem_unstable", {
|
|
|
9
9
|
return useAccordionItem_unstable;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
13
|
const _accordion = require("../../contexts/accordion");
|
|
16
14
|
const useAccordionItem_unstable = (props, ref)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false, ...rest } = props;\n\n const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = useEventCallback((event: AccordionToggleEvent) => requestToggle({ event, value }));\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n disabled,\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItem.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false, ...rest } = props;\n\n const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = useEventCallback((event: AccordionToggleEvent) => requestToggle({ event, value }));\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n disabled,\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["slot","useEventCallback","useAccordionContext_unstable","useAccordionItem_unstable","props","ref","value","disabled","rest","requestToggle","ctx","open","openItems","includes","onAccordionHeaderClick","event","onHeaderClick","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAaaG;;;;;;gCAV0B,4BAA4B;2BAGtB,2BAA2B;AAOjE,kCAAkC,CACvCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE7C,MAAMK,oBAAgBP,uCAAAA,EAA6BQ,CAAAA,MAAOA,IAAID,aAAa;IAC3E,MAAME,WAAOT,uCAAAA,EAA6BQ,CAAAA,MAAOA,IAAIE,SAAS,CAACC,QAAQ,CAACP;IACxE,MAAMQ,6BAAyBb,gCAAAA,EAAiB,CAACc,QAAgCN,cAAc;YAAEM;YAAOT;QAAM;IAE9G,OAAO;QACLK;QACAL;QACAC;QACAS,eAAeF;QACfG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,oBAAAA,CAAKmB,MAAM,CACf;YACEZ;YACAF,KAAKA;YACL,GAAGG,IAAI;QACT,GACA;YAAEY,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItemContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';\nimport { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { disabled, open, value, onHeaderClick } = state;\n const accordionItem = React.useMemo<AccordionItemContextValue>(\n () => ({ disabled, open, value, onHeaderClick }),\n [disabled, open, value, onHeaderClick],\n );\n\n return { accordionItem };\n}\n"],"names":["React","useAccordionItemContextValues_unstable","state","disabled","open","value","onHeaderClick","accordionItem","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,SAASC,uCAAuCC,KAAyB;IAC9E,4DAA4D;IAC5D,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGJ;IACjD,MAAMK,gBAAgBP,OAAMQ,OAAO,CACjC,IAAO,CAAA;YAAEL;YAAUC;YAAMC;YAAOC;SAAc,CAAA,EAC9C;QAACH;QAAUC;QAAMC;QAAOC;KAAc;IAGxC,OAAO;QAAEC;IAAc;AACzB"}
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItemContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionItemContextValues, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { disabled, open, value, onHeaderClick } = state;\n const accordionItem = React.useMemo<AccordionItemContextValue>(\n () => ({ disabled, open, value, onHeaderClick }),\n [disabled, open, value, onHeaderClick],\n );\n\n return { accordionItem };\n}\n"],"names":["React","useAccordionItemContextValues_unstable","state","disabled","open","value","onHeaderClick","accordionItem","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,SAASC,uCAAuCC,KAAyB;IAC9E,4DAA4D;IAC5D,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGJ;IACjD,MAAMK,gBAAgBP,OAAMQ,OAAO,CACjC,IAAO,CAAA;YAAEL;YAAUC;YAAMC;YAAOC;SAAc,CAAA,EAC9C;QAACH;QAAUC;QAAMC;QAAOC;KAAc;IAGxC,OAAO;QAAEC;IAAc;AACzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionPanel/AccordionPanel.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: NonNullable<Slot<'div'>>;\n collapseMotion?: Slot<PresenceMotionSlotProps
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionPanel/AccordionPanel.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { CollapseParams } from '@fluentui/react-motion-components-preview';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: NonNullable<Slot<'div'>>;\n collapseMotion?: Slot<PresenceMotionSlotProps<CollapseParams>>;\n};\n\nexport type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;\n\nexport type AccordionPanelBaseProps = ComponentProps<Omit<AccordionPanelSlots, 'collapseMotion'>>;\n\nexport type AccordionPanelState = ComponentState<AccordionPanelSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n\nexport type AccordionPanelBaseState = ComponentState<Omit<AccordionPanelSlots, 'collapseMotion'>> &\n Pick<AccordionPanelState, 'open'>;\n"],"names":[],"mappings":""}
|
|
@@ -17,8 +17,6 @@ _export(exports, {
|
|
|
17
17
|
return useAccordionPanel_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
21
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
20
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
23
21
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
24
22
|
const _reactmotion = require("@fluentui/react-motion");
|
|
@@ -63,7 +61,14 @@ const useAccordionPanelBase_unstable = (props, ref)=>{
|
|
|
63
61
|
},
|
|
64
62
|
root: _reactutilities.slot.always({
|
|
65
63
|
ref: ref,
|
|
66
|
-
...props
|
|
64
|
+
...props,
|
|
65
|
+
// Prevent keyboard focus from entering the panel while it is closed/collapsing.
|
|
66
|
+
// tabIndex: -1 prevents the panel itself from being focused, and inert prevents
|
|
67
|
+
// all focusable descendants from being reachable via keyboard navigation.
|
|
68
|
+
...open ? {} : {
|
|
69
|
+
tabIndex: -1,
|
|
70
|
+
inert: true
|
|
71
|
+
}
|
|
67
72
|
}, {
|
|
68
73
|
elementType: 'div'
|
|
69
74
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanel.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type {\n AccordionPanelBaseProps,\n AccordionPanelBaseState,\n AccordionPanelProps,\n AccordionPanelState,\n} from './AccordionPanel.types';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n props: AccordionPanelProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n const { collapseMotion, ...baseProps } = props;\n const state = useAccordionPanelBase_unstable(baseProps, ref);\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n collapseMotion: Collapse,\n },\n root: {\n ...state.root,\n ...(navigation && focusableProps),\n },\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: state.open,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Base state hook for AccordionPanel, without design related features.\n *\n * @param props - AccordionPanelBaseProps properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanelBase_unstable = (\n props: AccordionPanelBaseProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelBaseState => {\n const { open } = useAccordionItemContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanel.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type {\n AccordionPanelBaseProps,\n AccordionPanelBaseState,\n AccordionPanelProps,\n AccordionPanelState,\n} from './AccordionPanel.types';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n props: AccordionPanelProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n const { collapseMotion, ...baseProps } = props;\n const state = useAccordionPanelBase_unstable(baseProps, ref);\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n ...state,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...state.components,\n collapseMotion: Collapse,\n },\n root: {\n ...state.root,\n ...(navigation && focusableProps),\n },\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: state.open,\n unmountOnExit: true,\n },\n }),\n };\n};\n\n/**\n * Base state hook for AccordionPanel, without design related features.\n *\n * @param props - AccordionPanelBaseProps properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanelBase_unstable = (\n props: AccordionPanelBaseProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelBaseState => {\n const { open } = useAccordionItemContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n // Prevent keyboard focus from entering the panel while it is closed/collapsing.\n // tabIndex: -1 prevents the panel itself from being focused, and inert prevents\n // all focusable descendants from being reachable via keyboard navigation.\n ...(open ? {} : { tabIndex: -1, inert: true }),\n },\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["slot","useTabsterAttributes","presenceMotionSlot","Collapse","useAccordionContext_unstable","useAccordionItemContext_unstable","useAccordionPanel_unstable","props","ref","collapseMotion","baseProps","state","useAccordionPanelBase_unstable","focusableProps","focusable","excludeFromMover","navigation","ctx","components","root","elementType","defaultProps","visible","open","unmountOnExit","always","tabIndex","inert"],"mappings":"AAAA;;;;;;;;;;;;IAyDaY,8BAAAA;;;IApCAN,0BAAAA;;;;gCAlBQ,4BAA4B;8BACZ,0BAA0B;6BAC5B,yBAAyB;8CACnC,4CAA4C;2BACxB,2BAA2B;+BAOvB,+BAA+B;AAOzE,mCAAmC,CACxCC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGC,WAAW,GAAGH;IACzC,MAAMI,QAAQC,+BAA+BF,WAAWF;IACxD,MAAMK,qBAAiBZ,kCAAAA,EAAqB;QAAEa,WAAW;YAAEC,kBAAkB;QAAK;IAAE;IACpF,MAAMC,iBAAaZ,uCAAAA,EAA6Ba,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACL,GAAGL,KAAK;QACRO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,MAAMO,UAAU;YACnBT,gBAAgBN,sCAAAA;QAClB;QACAgB,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,GAAIH,cAAcH,cAAc;QAClC;QACAJ,oBAAgBP,+BAAAA,EAAmBK,MAAME,cAAc,EAAE;YACvDW,aAAajB,sCAAAA;YACbkB,cAAc;gBACZC,SAASX,MAAMY,IAAI;gBACnBC,eAAe;YACjB;QACF;IACF;AACF,EAAE;AAQK,uCAAuC,CAC5CjB,OACAC;IAEA,MAAM,EAAEe,IAAI,EAAE,OAAGlB,+CAAAA;IAEjB,OAAO;QACLkB;QACAL,YAAY;YACVC,MAAM;QACR;QACAA,MAAMnB,oBAAAA,CAAKyB,MAAM,CACf;YACEjB,KAAKA;YACL,GAAGD,KAAK;YACR,gFAAgF;YAChF,gFAAgF;YAChF,0EAA0E;YAC1E,GAAIgB,OAAO,CAAC,IAAI;gBAAEG,UAAU,CAAC;gBAAGC,OAAO;YAAK,CAAC;QAC/C,GACA;YAAEP,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/accordion.ts"],"sourcesContent":["'use client';\n\nimport { createContext,
|
|
1
|
+
{"version":3,"sources":["../src/contexts/accordion.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AccordionItemValue } from '../AccordionItem';\nimport type { AccordionToggleData, AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionRequestToggleData<Value = AccordionItemValue> = { event: AccordionToggleEvent } & Pick<\n AccordionToggleData<Value>,\n 'value'\n>;\n\nexport type AccordionContextValue<Value = AccordionItemValue> = {\n /**\n * The list of opened panels by index\n */\n openItems: AccordionItemValue[];\n /**\n * Callback used by AccordionItem to request a change on it's own opened state\n * Should be used to toggle AccordionItem\n */\n requestToggle: (data: AccordionRequestToggleData<Value>) => void;\n collapsible: boolean;\n multiple: boolean;\n navigation: 'linear' | 'circular' | undefined;\n};\n\nconst AccordionContext = createContext<AccordionContextValue | undefined>(undefined) as Context<AccordionContextValue>;\n\nconst accordionContextDefaultValue: AccordionContextValue = {\n openItems: [],\n collapsible: false,\n multiple: false,\n navigation: undefined,\n requestToggle() {\n /* noop */\n },\n};\n\nexport const { Provider: AccordionProvider } = AccordionContext;\nexport const useAccordionContext_unstable = <T>(selector: ContextSelector<AccordionContextValue, T>): T =>\n useContextSelector(AccordionContext, (ctx = accordionContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","AccordionContext","undefined","accordionContextDefaultValue","openItems","collapsible","multiple","navigation","requestToggle","Provider","AccordionProvider","useAccordionContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;qBAuC0C;;;gCAC7BY;;;;sCAtCqC,mCAAmC;AAyBrF,MAAMV,uBAAmBF,mCAAAA,EAAiDG;AAE1E,MAAMC,+BAAsD;IAC1DC,WAAW,EAAE;IACbC,aAAa;IACbC,UAAU;IACVC,YAAYL;IACZM;IACE,QAAQ,GACV;AACF;AAEO,MAAM,EAAEC,UAAUC,mBAAmB,GAAGT,iBAAiB;AACzD,MAAMU,+BAA+B,CAAIC,eAC9CZ,wCAAAA,EAAmBC,kBAAkB,CAACY,MAAMV,4BAA4B,GAAKS,SAASC,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/accordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AccordionItemValue } from '../AccordionItem';\nimport { AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionItemContextValue<Value = AccordionItemValue> = {\n open: boolean;\n disabled: boolean;\n value: Value;\n /**\n * @deprecated - use `requestToggle` from AccordionContent instead\n */\n onHeaderClick(event: AccordionToggleEvent): void;\n};\n\nconst AccordionItemContext = React.createContext<AccordionItemContextValue<unknown> | undefined>(\n undefined,\n) as React.Context<AccordionItemContextValue<unknown>>;\n\nconst accordionItemContextDefaultValue: AccordionItemContextValue<unknown> = {\n open: false,\n disabled: false,\n value: undefined,\n onHeaderClick() {\n /* noop */\n },\n};\n\nexport const { Provider: AccordionItemProvider } = AccordionItemContext;\n\nexport const useAccordionItemContext_unstable = (): AccordionItemContextValue<unknown> => {\n return React.useContext(AccordionItemContext) ?? accordionItemContextDefaultValue;\n};\n"],"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","open","disabled","value","onHeaderClick","Provider","AccordionItemProvider","useAccordionItemContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;IA6ByBU;;;oCAEZC;;;;;iEA7BU,QAAQ;AAc/B,MAAMV,qCAAuBD,OAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAAuE;IAC3EC,MAAM;IACNC,UAAU;IACVC,OAAOJ;IACPK;IACE,QAAQ,GACV;AACF;AAEO,MAAM,EAAEC,+BAA+B,EAAE,GAAGR,qBAAqB;AAEjE,MAAMU,mCAAmC;QACvCX;IAAP,OAAOA,CAAAA,oBAAAA,OAAMY,UAAU,CAACX,qBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA0CI;AACnD,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/contexts/accordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AccordionItemValue } from '../AccordionItem';\nimport type { AccordionToggleEvent } from '../Accordion';\n\nexport type AccordionItemContextValue<Value = AccordionItemValue> = {\n open: boolean;\n disabled: boolean;\n value: Value;\n /**\n * @deprecated - use `requestToggle` from AccordionContent instead\n */\n onHeaderClick(event: AccordionToggleEvent): void;\n};\n\nconst AccordionItemContext = React.createContext<AccordionItemContextValue<unknown> | undefined>(\n undefined,\n) as React.Context<AccordionItemContextValue<unknown>>;\n\nconst accordionItemContextDefaultValue: AccordionItemContextValue<unknown> = {\n open: false,\n disabled: false,\n value: undefined,\n onHeaderClick() {\n /* noop */\n },\n};\n\nexport const { Provider: AccordionItemProvider } = AccordionItemContext;\n\nexport const useAccordionItemContext_unstable = (): AccordionItemContextValue<unknown> => {\n return React.useContext(AccordionItemContext) ?? accordionItemContextDefaultValue;\n};\n"],"names":["React","AccordionItemContext","createContext","undefined","accordionItemContextDefaultValue","open","disabled","value","onHeaderClick","Provider","AccordionItemProvider","useAccordionItemContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;IA6ByBU;;;oCAEZC;;;;;iEA7BU,QAAQ;AAc/B,MAAMV,qCAAuBD,OAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAAuE;IAC3EC,MAAM;IACNC,UAAU;IACVC,OAAOJ;IACPK;IACE,QAAQ,GACV;AACF;AAEO,MAAM,EAAEC,+BAA+B,EAAE,GAAGR,qBAAqB;AAEjE,MAAMU,mCAAmC;QACvCX;IAAP,OAAOA,CAAAA,oBAAAA,OAAMY,UAAU,CAACX,qBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA0CI;AACnD,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-accordion",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.11.0",
|
|
4
4
|
"description": "Fluent UI accordion component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,16 +12,16 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/react-aria": "^9.17.
|
|
16
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
15
|
+
"@fluentui/react-aria": "^9.17.11",
|
|
16
|
+
"@fluentui/react-context-selector": "^9.2.16",
|
|
17
17
|
"@fluentui/react-icons": "^2.0.245",
|
|
18
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
18
|
+
"@fluentui/react-jsx-runtime": "^9.4.2",
|
|
19
19
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
20
|
-
"@fluentui/react-motion": "^9.
|
|
21
|
-
"@fluentui/react-motion-components-preview": "^0.15.
|
|
22
|
-
"@fluentui/react-tabster": "^9.26.
|
|
20
|
+
"@fluentui/react-motion": "^9.15.0",
|
|
21
|
+
"@fluentui/react-motion-components-preview": "^0.15.4",
|
|
22
|
+
"@fluentui/react-tabster": "^9.26.14",
|
|
23
23
|
"@fluentui/react-theme": "^9.2.1",
|
|
24
|
-
"@fluentui/react-utilities": "^9.26.
|
|
24
|
+
"@fluentui/react-utilities": "^9.26.3",
|
|
25
25
|
"@griffel/react": "^1.5.32",
|
|
26
26
|
"@swc/helpers": "^0.5.1"
|
|
27
27
|
},
|