@fluentui/react-accordion 9.8.16 → 9.9.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 +13 -2
- package/dist/index.d.ts +1 -0
- package/lib/Accordion.js +1 -1
- package/lib/Accordion.js.map +1 -1
- package/lib/AccordionHeader.js +1 -1
- package/lib/AccordionHeader.js.map +1 -1
- package/lib/AccordionPanel.js +1 -1
- package/lib/AccordionPanel.js.map +1 -1
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/Accordion/index.js +1 -1
- package/lib/components/Accordion/index.js.map +1 -1
- package/lib/components/Accordion/useAccordion.js +27 -16
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/AccordionHeader/index.js +1 -1
- package/lib/components/AccordionHeader/index.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeader.js +34 -23
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.js +6 -8
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib/components/AccordionPanel/index.js +1 -1
- package/lib/components/AccordionPanel/index.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js +30 -14
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib/index.js +6 -0
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Accordion.js +3 -0
- package/lib-commonjs/Accordion.js.map +1 -1
- package/lib-commonjs/AccordionHeader.js +3 -0
- package/lib-commonjs/AccordionHeader.js.map +1 -1
- package/lib-commonjs/AccordionPanel.js +3 -0
- package/lib-commonjs/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.types.js.map +1 -1
- package/lib-commonjs/components/Accordion/index.js +3 -0
- package/lib-commonjs/components/Accordion/index.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.js +32 -17
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/index.js +3 -0
- package/lib-commonjs/components/AccordionHeader/index.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +38 -25
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +5 -7
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/index.js +3 -0
- package/lib-commonjs/components/AccordionPanel/index.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +35 -16
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/index.js +6 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-accordion
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 12 Feb 2026 10:42:45 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.9.0)
|
|
8
|
+
|
|
9
|
+
Thu, 12 Feb 2026 10:42:45 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.8.16..@fluentui/react-accordion_v9.9.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: add base hooks for Accordion components ([PR #35682](https://github.com/microsoft/fluentui/pull/35682) by dmytrokirpa@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.17.9 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.8.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.8.16)
|
|
8
19
|
|
|
9
|
-
Thu, 22 Jan 2026 17:01
|
|
20
|
+
Thu, 22 Jan 2026 17:07:01 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.8.15..@fluentui/react-accordion_v9.8.16)
|
|
11
22
|
|
|
12
23
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -246,6 +246,7 @@ export declare function useAccordionContextValues_unstable(state: AccordionState
|
|
|
246
246
|
|
|
247
247
|
/**
|
|
248
248
|
* Returns the props and state required to render the component
|
|
249
|
+
*
|
|
249
250
|
* @param props - AccordionHeader properties
|
|
250
251
|
* @param ref - reference to root HTMLElement of AccordionHeader
|
|
251
252
|
*/
|
package/lib/Accordion.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Accordion, accordionClassNames, renderAccordion_unstable, useAccordionContextValues_unstable, useAccordionStyles_unstable, useAccordion_unstable } from './components/Accordion/index';
|
|
1
|
+
export { Accordion, accordionClassNames, renderAccordion_unstable, useAccordionContextValues_unstable, useAccordionStyles_unstable, useAccordion_unstable, useAccordionBase_unstable } from './components/Accordion/index';
|
package/lib/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Accordion.ts"],"sourcesContent":["export type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n} from './components/Accordion/index';\nexport {\n Accordion,\n accordionClassNames,\n renderAccordion_unstable,\n useAccordionContextValues_unstable,\n useAccordionStyles_unstable,\n useAccordion_unstable,\n} from './components/Accordion/index';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/Accordion.ts"],"sourcesContent":["export type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n AccordionBaseState,\n AccordionBaseProps,\n} from './components/Accordion/index';\nexport {\n Accordion,\n accordionClassNames,\n renderAccordion_unstable,\n useAccordionContextValues_unstable,\n useAccordionStyles_unstable,\n useAccordion_unstable,\n useAccordionBase_unstable,\n} from './components/Accordion/index';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","useAccordionBase_unstable"],"mappings":"AAYA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,EACrBC,yBAAyB,QACpB,+BAA+B"}
|
package/lib/AccordionHeader.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { AccordionHeader, accordionHeaderClassNames, renderAccordionHeader_unstable, useAccordionHeaderContextValues_unstable, useAccordionHeaderStyles_unstable, useAccordionHeader_unstable } from './components/AccordionHeader/index';
|
|
1
|
+
export { AccordionHeader, accordionHeaderClassNames, renderAccordionHeader_unstable, useAccordionHeaderContextValues_unstable, useAccordionHeaderStyles_unstable, useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './components/AccordionHeader/index';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AccordionHeader.ts"],"sourcesContent":["export type {\n AccordionHeaderContextValues,\n AccordionHeaderExpandIconPosition,\n AccordionHeaderProps,\n AccordionHeaderSize,\n AccordionHeaderSlots,\n AccordionHeaderState,\n} from './components/AccordionHeader/index';\nexport {\n AccordionHeader,\n accordionHeaderClassNames,\n renderAccordionHeader_unstable,\n useAccordionHeaderContextValues_unstable,\n useAccordionHeaderStyles_unstable,\n useAccordionHeader_unstable,\n} from './components/AccordionHeader/index';\n"],"names":["AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable"],"mappings":"AAQA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,
|
|
1
|
+
{"version":3,"sources":["../src/AccordionHeader.ts"],"sourcesContent":["export type {\n AccordionHeaderContextValues,\n AccordionHeaderExpandIconPosition,\n AccordionHeaderProps,\n AccordionHeaderSize,\n AccordionHeaderSlots,\n AccordionHeaderState,\n} from './components/AccordionHeader/index';\nexport {\n AccordionHeader,\n accordionHeaderClassNames,\n renderAccordionHeader_unstable,\n useAccordionHeaderContextValues_unstable,\n useAccordionHeaderStyles_unstable,\n useAccordionHeader_unstable,\n useAccordionHeaderBase_unstable,\n} from './components/AccordionHeader/index';\n"],"names":["AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","useAccordionHeaderBase_unstable"],"mappings":"AAQA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,EAC3BC,+BAA+B,QAC1B,qCAAqC"}
|
package/lib/AccordionPanel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { AccordionPanel, accordionPanelClassNames, renderAccordionPanel_unstable, useAccordionPanelStyles_unstable, useAccordionPanel_unstable } from './components/AccordionPanel/index';
|
|
1
|
+
export { AccordionPanel, accordionPanelClassNames, renderAccordionPanel_unstable, useAccordionPanelStyles_unstable, useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './components/AccordionPanel/index';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AccordionPanel.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"version":3,"sources":["../src/AccordionPanel.ts"],"sourcesContent":["export type {\n AccordionPanelProps,\n AccordionPanelSlots,\n AccordionPanelState,\n AccordionPanelBaseProps,\n AccordionPanelBaseState,\n} from './components/AccordionPanel/index';\nexport {\n AccordionPanel,\n accordionPanelClassNames,\n renderAccordionPanel_unstable,\n useAccordionPanelStyles_unstable,\n useAccordionPanel_unstable,\n useAccordionPanelBase_unstable,\n} from './components/AccordionPanel/index';\n"],"names":["AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable","useAccordionPanelBase_unstable"],"mappings":"AAOA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,oCAAoC"}
|
|
@@ -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 AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
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":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { Accordion } from './Accordion';
|
|
2
2
|
export { renderAccordion_unstable } from './renderAccordion';
|
|
3
|
-
export { useAccordion_unstable } from './useAccordion';
|
|
3
|
+
export { useAccordion_unstable, useAccordionBase_unstable } from './useAccordion';
|
|
4
4
|
export { accordionClassNames, useAccordionStyles_unstable } from './useAccordionStyles.styles';
|
|
5
5
|
export { useAccordionContextValues_unstable } from './useAccordionContextValues';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/index.ts"],"sourcesContent":["export { Accordion } from './Accordion';\nexport type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n} from './Accordion.types';\nexport { renderAccordion_unstable } from './renderAccordion';\nexport { useAccordion_unstable } from './useAccordion';\nexport { accordionClassNames, useAccordionStyles_unstable } from './useAccordionStyles.styles';\nexport { useAccordionContextValues_unstable } from './useAccordionContextValues';\n"],"names":["Accordion","renderAccordion_unstable","useAccordion_unstable","accordionClassNames","useAccordionStyles_unstable","useAccordionContextValues_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"sources":["../src/components/Accordion/index.ts"],"sourcesContent":["export { Accordion } from './Accordion';\nexport type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n AccordionBaseState,\n AccordionBaseProps,\n} from './Accordion.types';\nexport { renderAccordion_unstable } from './renderAccordion';\nexport { useAccordion_unstable, useAccordionBase_unstable } from './useAccordion';\nexport { accordionClassNames, useAccordionStyles_unstable } from './useAccordionStyles.styles';\nexport { useAccordionContextValues_unstable } from './useAccordionContextValues';\n"],"names":["Accordion","renderAccordion_unstable","useAccordion_unstable","useAccordionBase_unstable","accordionClassNames","useAccordionStyles_unstable","useAccordionContextValues_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAaxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,iBAAiB;AAClF,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B;AAC/F,SAASC,kCAAkC,QAAQ,8BAA8B"}
|
|
@@ -1,14 +1,34 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
|
|
4
4
|
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
5
5
|
/**
|
|
6
6
|
* Returns the props and state required to render the component
|
|
7
7
|
* @param props - Accordion properties
|
|
8
8
|
* @param ref - reference to root HTMLElement of Accordion
|
|
9
9
|
*/ export const useAccordion_unstable = (props, ref)=>{
|
|
10
|
-
const {
|
|
11
|
-
navigation, ...
|
|
10
|
+
const { // eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
11
|
+
navigation, ...baseProps } = props;
|
|
12
|
+
const state = useAccordionBase_unstable(baseProps, ref);
|
|
13
|
+
/** FIXME: deprecated will be removed after navigation prop is removed */ const arrowNavigationProps = useArrowNavigationGroup({
|
|
14
|
+
circular: navigation === 'circular',
|
|
15
|
+
tabbable: true
|
|
16
|
+
});
|
|
17
|
+
return {
|
|
18
|
+
navigation,
|
|
19
|
+
...state,
|
|
20
|
+
root: {
|
|
21
|
+
...state.root,
|
|
22
|
+
...navigation ? arrowNavigationProps : undefined
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Returns the props and state required to render the component
|
|
28
|
+
* @param props - Accordion properties
|
|
29
|
+
* @param ref - reference to root HTMLElement of Accordion
|
|
30
|
+
*/ export const useAccordionBase_unstable = (props, ref)=>{
|
|
31
|
+
const { openItems: controlledOpenItems, defaultOpenItems, multiple = false, collapsible = false, onToggle, ...rest } = props;
|
|
12
32
|
const [openItems, setOpenItems] = useControllableState({
|
|
13
33
|
state: React.useMemo(()=>normalizeValues(controlledOpenItems), [
|
|
14
34
|
controlledOpenItems
|
|
@@ -19,10 +39,6 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
19
39
|
})),
|
|
20
40
|
initialState: []
|
|
21
41
|
});
|
|
22
|
-
/** FIXME: deprecated will be removed after navigation prop is removed */ const arrowNavigationProps = useArrowNavigationGroup({
|
|
23
|
-
circular: navigation === 'circular',
|
|
24
|
-
tabbable: true
|
|
25
|
-
});
|
|
26
42
|
const requestToggle = useEventCallback((data)=>{
|
|
27
43
|
const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);
|
|
28
44
|
onToggle === null || onToggle === void 0 ? void 0 : onToggle(data.event, {
|
|
@@ -34,20 +50,15 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
34
50
|
return {
|
|
35
51
|
collapsible,
|
|
36
52
|
multiple,
|
|
37
|
-
navigation,
|
|
38
53
|
openItems,
|
|
39
54
|
requestToggle,
|
|
40
55
|
components: {
|
|
41
56
|
root: 'div'
|
|
42
57
|
},
|
|
43
|
-
root: slot.always(
|
|
44
|
-
|
|
45
|
-
...
|
|
46
|
-
|
|
47
|
-
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
48
|
-
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
49
|
-
ref: ref
|
|
50
|
-
}), {
|
|
58
|
+
root: slot.always({
|
|
59
|
+
ref: ref,
|
|
60
|
+
...rest
|
|
61
|
+
}, {
|
|
51
62
|
elementType: 'div'
|
|
52
63
|
})
|
|
53
64
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Accordion/useAccordion.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {
|
|
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,5 +1,5 @@
|
|
|
1
1
|
export { AccordionHeader } from './AccordionHeader';
|
|
2
2
|
export { renderAccordionHeader_unstable } from './renderAccordionHeader';
|
|
3
|
-
export { useAccordionHeader_unstable } from './useAccordionHeader';
|
|
3
|
+
export { useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './useAccordionHeader';
|
|
4
4
|
export { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';
|
|
5
5
|
export { accordionHeaderClassNames, useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionHeader/index.ts"],"sourcesContent":["export { AccordionHeader } from './AccordionHeader';\nexport type {\n AccordionHeaderContextValues,\n AccordionHeaderExpandIconPosition,\n AccordionHeaderProps,\n AccordionHeaderSize,\n AccordionHeaderSlots,\n AccordionHeaderState,\n} from './AccordionHeader.types';\nexport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nexport { useAccordionHeader_unstable } from './useAccordionHeader';\nexport { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';\nexport { accordionHeaderClassNames, useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';\n"],"names":["AccordionHeader","renderAccordionHeader_unstable","useAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","accordionHeaderClassNames","useAccordionHeaderStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AASpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionHeader/index.ts"],"sourcesContent":["export { AccordionHeader } from './AccordionHeader';\nexport type {\n AccordionHeaderContextValues,\n AccordionHeaderExpandIconPosition,\n AccordionHeaderProps,\n AccordionHeaderSize,\n AccordionHeaderSlots,\n AccordionHeaderState,\n} from './AccordionHeader.types';\nexport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nexport { useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './useAccordionHeader';\nexport { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';\nexport { accordionHeaderClassNames, useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles.styles';\n"],"names":["AccordionHeader","renderAccordionHeader_unstable","useAccordionHeader_unstable","useAccordionHeaderBase_unstable","useAccordionHeaderContextValues_unstable","accordionHeaderClassNames","useAccordionHeaderStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AASpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,EAAEC,+BAA+B,QAAQ,uBAAuB;AACpG,SAASC,wCAAwC,QAAQ,oCAAoC;AAC7F,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { useEventCallback, slot, isResolvedShorthand } from '@fluentui/react-utilities';
|
|
4
4
|
import { useARIAButtonProps } from '@fluentui/react-aria';
|
|
5
5
|
import { useAccordionContext_unstable } from '../../contexts/accordion';
|
|
6
6
|
import { ChevronRightRegular } from '@fluentui/react-icons';
|
|
@@ -9,26 +9,46 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
|
|
|
9
9
|
import { motionTokens } from '@fluentui/react-motion';
|
|
10
10
|
/**
|
|
11
11
|
* Returns the props and state required to render the component
|
|
12
|
+
*
|
|
12
13
|
* @param props - AccordionHeader properties
|
|
13
14
|
* @param ref - reference to root HTMLElement of AccordionHeader
|
|
14
15
|
*/ export const useAccordionHeader_unstable = (props, ref)=>{
|
|
15
|
-
const
|
|
16
|
-
const { value, disabled, open } = useAccordionItemContext_unstable();
|
|
17
|
-
const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
|
|
18
|
-
/**
|
|
19
|
-
* force disabled state on button if accordion isn't collapsible
|
|
20
|
-
* and this is the only item opened
|
|
21
|
-
*/ const disabledFocusable = useAccordionContext_unstable((ctx)=>!ctx.collapsible && ctx.openItems.length === 1 && open);
|
|
16
|
+
const state = useAccordionHeaderBase_unstable(props, ref);
|
|
22
17
|
const { dir } = useFluent();
|
|
23
18
|
// Calculate how to rotate the expand icon [>] (ChevronRightRegular)
|
|
24
19
|
let expandIconRotation;
|
|
25
|
-
if (expandIconPosition === 'end') {
|
|
20
|
+
if (state.expandIconPosition === 'end') {
|
|
26
21
|
// If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed
|
|
27
|
-
expandIconRotation = open ? -90 : 90;
|
|
22
|
+
expandIconRotation = state.open ? -90 : 90;
|
|
28
23
|
} else {
|
|
29
24
|
// Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed
|
|
30
|
-
expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
|
|
25
|
+
expandIconRotation = state.open ? 90 : dir !== 'rtl' ? 0 : 180;
|
|
26
|
+
}
|
|
27
|
+
if (state.expandIcon) {
|
|
28
|
+
var _state_expandIcon;
|
|
29
|
+
var _children;
|
|
30
|
+
(_children = (_state_expandIcon = state.expandIcon).children) !== null && _children !== void 0 ? _children : _state_expandIcon.children = /*#__PURE__*/ React.createElement(ChevronRightRegular, {
|
|
31
|
+
style: {
|
|
32
|
+
transform: `rotate(${expandIconRotation}deg)`,
|
|
33
|
+
transition: `transform ${motionTokens.durationNormal}ms ease-out`
|
|
34
|
+
}
|
|
35
|
+
});
|
|
31
36
|
}
|
|
37
|
+
return state;
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Base state hook for AccordionHeader, without design related features.
|
|
41
|
+
*
|
|
42
|
+
* @param props - AccordionHeader properties
|
|
43
|
+
* @param ref - reference to root HTMLElement of AccordionHeader
|
|
44
|
+
*/ export const useAccordionHeaderBase_unstable = (props, ref)=>{
|
|
45
|
+
const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start', ...rest } = props;
|
|
46
|
+
const { value, disabled, open } = useAccordionItemContext_unstable();
|
|
47
|
+
const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
|
|
48
|
+
/**
|
|
49
|
+
* force disabled state on button if accordion isn't collapsible
|
|
50
|
+
* and this is the only item opened
|
|
51
|
+
*/ const disabledFocusable = useAccordionContext_unstable((ctx)=>!ctx.collapsible && ctx.openItems.length === 1 && open);
|
|
32
52
|
const buttonSlot = slot.always(button, {
|
|
33
53
|
elementType: 'button',
|
|
34
54
|
defaultProps: {
|
|
@@ -62,13 +82,10 @@ import { motionTokens } from '@fluentui/react-motion';
|
|
|
62
82
|
expandIcon: 'span',
|
|
63
83
|
icon: 'div'
|
|
64
84
|
},
|
|
65
|
-
root: slot.always(
|
|
66
|
-
// FIXME:
|
|
67
|
-
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
68
|
-
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
85
|
+
root: slot.always({
|
|
69
86
|
ref: ref,
|
|
70
|
-
...
|
|
71
|
-
}
|
|
87
|
+
...rest
|
|
88
|
+
}, {
|
|
72
89
|
elementType: 'div'
|
|
73
90
|
}),
|
|
74
91
|
icon: slot.optional(icon, {
|
|
@@ -77,12 +94,6 @@ import { motionTokens } from '@fluentui/react-motion';
|
|
|
77
94
|
expandIcon: slot.optional(expandIcon, {
|
|
78
95
|
renderByDefault: true,
|
|
79
96
|
defaultProps: {
|
|
80
|
-
children: /*#__PURE__*/ React.createElement(ChevronRightRegular, {
|
|
81
|
-
style: {
|
|
82
|
-
transform: `rotate(${expandIconRotation}deg)`,
|
|
83
|
-
transition: `transform ${motionTokens.durationNormal}ms ease-out`
|
|
84
|
-
}
|
|
85
|
-
}),
|
|
86
97
|
'aria-hidden': true
|
|
87
98
|
},
|
|
88
99
|
elementType: 'span'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionHeader/useAccordionHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionHeader/useAccordionHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, slot, isResolvedShorthand } from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\nimport { motionTokens } from '@fluentui/react-motion';\n\n/**\n * Returns the props and state required to render the component\n *\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeader_unstable = (\n props: AccordionHeaderProps,\n ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n const state = useAccordionHeaderBase_unstable(props, ref);\n const { dir } = useFluent();\n\n // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n let expandIconRotation: 0 | 90 | -90 | 180;\n if (state.expandIconPosition === 'end') {\n // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n expandIconRotation = state.open ? -90 : 90;\n } else {\n // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n expandIconRotation = state.open ? 90 : dir !== 'rtl' ? 0 : 180;\n }\n\n if (state.expandIcon) {\n state.expandIcon.children ??= (\n <ChevronRightRegular\n style={{\n transform: `rotate(${expandIconRotation}deg)`,\n transition: `transform ${motionTokens.durationNormal}ms ease-out`,\n }}\n />\n );\n }\n\n return state;\n};\n\n/**\n * Base state hook for AccordionHeader, without design related features.\n *\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeaderBase_unstable = (\n props: AccordionHeaderProps,\n ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start', ...rest } = props;\n const { value, disabled, open } = useAccordionItemContext_unstable();\n const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\n\n /**\n * force disabled state on button if accordion isn't collapsible\n * and this is the only item opened\n */\n const disabledFocusable = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);\n\n const buttonSlot = slot.always(button, {\n elementType: 'button',\n defaultProps: {\n disabled,\n disabledFocusable,\n 'aria-expanded': open,\n type: 'button',\n },\n });\n\n buttonSlot.onClick = useEventCallback(event => {\n if (isResolvedShorthand(button)) {\n button.onClick?.(event);\n }\n if (!event.defaultPrevented) {\n requestToggle({ value, event });\n }\n });\n\n return {\n disabled,\n open,\n size,\n inline,\n expandIconPosition,\n components: {\n root: 'div',\n button: 'button',\n expandIcon: 'span',\n icon: 'div',\n },\n root: slot.always(\n {\n ref: ref as React.Ref<HTMLDivElement>,\n ...rest,\n },\n { elementType: 'div' },\n ),\n icon: slot.optional(icon, { elementType: 'div' }),\n expandIcon: slot.optional(expandIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': true,\n },\n elementType: 'span',\n }),\n button: useARIAButtonProps(buttonSlot.as, buttonSlot),\n };\n};\n"],"names":["React","useEventCallback","slot","isResolvedShorthand","useARIAButtonProps","useAccordionContext_unstable","ChevronRightRegular","useFluent_unstable","useFluent","useAccordionItemContext_unstable","motionTokens","useAccordionHeader_unstable","props","ref","state","useAccordionHeaderBase_unstable","dir","expandIconRotation","expandIconPosition","open","expandIcon","children","style","transform","transition","durationNormal","icon","button","inline","size","rest","value","disabled","requestToggle","ctx","disabledFocusable","collapsible","openItems","length","buttonSlot","always","elementType","defaultProps","type","onClick","event","defaultPrevented","components","root","optional","renderByDefault","as"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,4BAA4B;AACxF,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,4BAA4B,QAAQ,2BAA2B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gCAAgC,QAAQ,+BAA+B;AAChF,SAASC,YAAY,QAAQ,yBAAyB;AAEtD;;;;;CAKC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,QAAQC,gCAAgCH,OAAOC;IACrD,MAAM,EAAEG,GAAG,EAAE,GAAGR;IAEhB,oEAAoE;IACpE,IAAIS;IACJ,IAAIH,MAAMI,kBAAkB,KAAK,OAAO;QACtC,8FAA8F;QAC9FD,qBAAqBH,MAAMK,IAAI,GAAG,CAAC,KAAK;IAC1C,OAAO;QACL,mGAAmG;QACnGF,qBAAqBH,MAAMK,IAAI,GAAG,KAAKH,QAAQ,QAAQ,IAAI;IAC7D;IAEA,IAAIF,MAAMM,UAAU,EAAE;YACpBN;;QAAAA,cAAAA,oBAAAA,MAAMM,UAAU,EAACC,yDAAjBP,kBAAiBO,yBACf,oBAACf;YACCgB,OAAO;gBACLC,WAAW,CAAC,OAAO,EAAEN,mBAAmB,IAAI,CAAC;gBAC7CO,YAAY,CAAC,UAAU,EAAEd,aAAae,cAAc,CAAC,WAAW,CAAC;YACnE;;IAGN;IAEA,OAAOX;AACT,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,kCAAkC,CAC7CH,OACAC;IAEA,MAAM,EAAEa,IAAI,EAAEC,MAAM,EAAEP,UAAU,EAAEQ,SAAS,KAAK,EAAEC,OAAO,QAAQ,EAAEX,qBAAqB,OAAO,EAAE,GAAGY,MAAM,GAAGlB;IAC7G,MAAM,EAAEmB,KAAK,EAAEC,QAAQ,EAAEb,IAAI,EAAE,GAAGV;IAClC,MAAMwB,gBAAgB5B,6BAA6B6B,CAAAA,MAAOA,IAAID,aAAa;IAE3E;;;GAGC,GACD,MAAME,oBAAoB9B,6BAA6B6B,CAAAA,MAAO,CAACA,IAAIE,WAAW,IAAIF,IAAIG,SAAS,CAACC,MAAM,KAAK,KAAKnB;IAEhH,MAAMoB,aAAarC,KAAKsC,MAAM,CAACb,QAAQ;QACrCc,aAAa;QACbC,cAAc;YACZV;YACAG;YACA,iBAAiBhB;YACjBwB,MAAM;QACR;IACF;IAEAJ,WAAWK,OAAO,GAAG3C,iBAAiB4C,CAAAA;QACpC,IAAI1C,oBAAoBwB,SAAS;gBAC/BA;aAAAA,kBAAAA,OAAOiB,OAAO,cAAdjB,sCAAAA,qBAAAA,QAAiBkB;QACnB;QACA,IAAI,CAACA,MAAMC,gBAAgB,EAAE;YAC3Bb,cAAc;gBAAEF;gBAAOc;YAAM;QAC/B;IACF;IAEA,OAAO;QACLb;QACAb;QACAU;QACAD;QACAV;QACA6B,YAAY;YACVC,MAAM;YACNrB,QAAQ;YACRP,YAAY;YACZM,MAAM;QACR;QACAsB,MAAM9C,KAAKsC,MAAM,CACf;YACE3B,KAAKA;YACL,GAAGiB,IAAI;QACT,GACA;YAAEW,aAAa;QAAM;QAEvBf,MAAMxB,KAAK+C,QAAQ,CAACvB,MAAM;YAAEe,aAAa;QAAM;QAC/CrB,YAAYlB,KAAK+C,QAAQ,CAAC7B,YAAY;YACpC8B,iBAAiB;YACjBR,cAAc;gBACZ,eAAe;YACjB;YACAD,aAAa;QACf;QACAd,QAAQvB,mBAAmBmC,WAAWY,EAAE,EAAEZ;IAC5C;AACF,EAAE"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { slot, useEventCallback } from '@fluentui/react-utilities';
|
|
4
4
|
import { useAccordionContext_unstable } from '../../contexts/accordion';
|
|
5
5
|
/**
|
|
6
6
|
* Returns the props and state required to render the component
|
|
7
7
|
* @param props - AccordionItem properties
|
|
8
8
|
* @param ref - reference to root HTMLElement of AccordionItem
|
|
9
9
|
*/ export const useAccordionItem_unstable = (props, ref)=>{
|
|
10
|
-
const { value, disabled = false } = props;
|
|
10
|
+
const { value, disabled = false, ...rest } = props;
|
|
11
11
|
const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
|
|
12
12
|
const open = useAccordionContext_unstable((ctx)=>ctx.openItems.includes(value));
|
|
13
13
|
const onAccordionHeaderClick = useEventCallback((event)=>requestToggle({
|
|
@@ -22,13 +22,11 @@ import { useAccordionContext_unstable } from '../../contexts/accordion';
|
|
|
22
22
|
components: {
|
|
23
23
|
root: 'div'
|
|
24
24
|
},
|
|
25
|
-
root: slot.always(
|
|
26
|
-
|
|
27
|
-
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
28
|
-
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
25
|
+
root: slot.always({
|
|
26
|
+
disabled,
|
|
29
27
|
ref: ref,
|
|
30
|
-
...
|
|
31
|
-
}
|
|
28
|
+
...rest
|
|
29
|
+
}, {
|
|
32
30
|
elementType: 'div'
|
|
33
31
|
})
|
|
34
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionItem/useAccordionItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {
|
|
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":["React","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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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/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>;\n};\n\nexport type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;\n\nexport type AccordionPanelState = ComponentState<AccordionPanelSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n"],"names":[],"mappings":"
|
|
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>;\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":"AAmBA,WACoC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { AccordionPanel } from './AccordionPanel';
|
|
2
2
|
export { renderAccordionPanel_unstable } from './renderAccordionPanel';
|
|
3
|
-
export { useAccordionPanel_unstable } from './useAccordionPanel';
|
|
3
|
+
export { useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './useAccordionPanel';
|
|
4
4
|
export { accordionPanelClassNames, useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionPanel/index.ts"],"sourcesContent":["export { AccordionPanel } from './AccordionPanel';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/AccordionPanel/index.ts"],"sourcesContent":["export { AccordionPanel } from './AccordionPanel';\nexport type {\n AccordionPanelProps,\n AccordionPanelSlots,\n AccordionPanelState,\n AccordionPanelBaseProps,\n AccordionPanelBaseState,\n} from './AccordionPanel.types';\nexport { renderAccordionPanel_unstable } from './renderAccordionPanel';\nexport { useAccordionPanel_unstable, useAccordionPanelBase_unstable } from './useAccordionPanel';\nexport { accordionPanelClassNames, useAccordionPanelStyles_unstable } from './useAccordionPanelStyles.styles';\n"],"names":["AccordionPanel","renderAccordionPanel_unstable","useAccordionPanel_unstable","useAccordionPanelBase_unstable","accordionPanelClassNames","useAccordionPanelStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,sBAAsB;AACjG,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { slot } from '@fluentui/react-utilities';
|
|
4
4
|
import { useTabsterAttributes } from '@fluentui/react-tabster';
|
|
5
5
|
import { presenceMotionSlot } from '@fluentui/react-motion';
|
|
6
6
|
import { Collapse } from '@fluentui/react-motion-components-preview';
|
|
@@ -11,7 +11,8 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
|
|
|
11
11
|
* @param props - AccordionPanel properties
|
|
12
12
|
* @param ref - reference to root HTMLElement of AccordionPanel
|
|
13
13
|
*/ export const useAccordionPanel_unstable = (props, ref)=>{
|
|
14
|
-
const {
|
|
14
|
+
const { collapseMotion, ...baseProps } = props;
|
|
15
|
+
const state = useAccordionPanelBase_unstable(baseProps, ref);
|
|
15
16
|
const focusableProps = useTabsterAttributes({
|
|
16
17
|
focusable: {
|
|
17
18
|
excludeFromMover: true
|
|
@@ -19,27 +20,42 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
|
|
|
19
20
|
});
|
|
20
21
|
const navigation = useAccordionContext_unstable((ctx)=>ctx.navigation);
|
|
21
22
|
return {
|
|
22
|
-
|
|
23
|
+
...state,
|
|
23
24
|
components: {
|
|
24
|
-
|
|
25
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
26
|
+
...state.components,
|
|
25
27
|
collapseMotion: Collapse
|
|
26
28
|
},
|
|
27
|
-
root:
|
|
28
|
-
|
|
29
|
-
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
30
|
-
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
31
|
-
ref: ref,
|
|
32
|
-
...props,
|
|
29
|
+
root: {
|
|
30
|
+
...state.root,
|
|
33
31
|
...navigation && focusableProps
|
|
34
|
-
}
|
|
35
|
-
elementType: 'div'
|
|
36
|
-
}),
|
|
32
|
+
},
|
|
37
33
|
collapseMotion: presenceMotionSlot(props.collapseMotion, {
|
|
38
34
|
elementType: Collapse,
|
|
39
35
|
defaultProps: {
|
|
40
|
-
visible: open,
|
|
36
|
+
visible: state.open,
|
|
41
37
|
unmountOnExit: true
|
|
42
38
|
}
|
|
43
39
|
})
|
|
44
40
|
};
|
|
45
41
|
};
|
|
42
|
+
/**
|
|
43
|
+
* Base state hook for AccordionPanel, without design related features.
|
|
44
|
+
*
|
|
45
|
+
* @param props - AccordionPanelBaseProps properties
|
|
46
|
+
* @param ref - reference to root HTMLElement of AccordionPanel
|
|
47
|
+
*/ export const useAccordionPanelBase_unstable = (props, ref)=>{
|
|
48
|
+
const { open } = useAccordionItemContext_unstable();
|
|
49
|
+
return {
|
|
50
|
+
open,
|
|
51
|
+
components: {
|
|
52
|
+
root: 'div'
|
|
53
|
+
},
|
|
54
|
+
root: slot.always({
|
|
55
|
+
ref: ref,
|
|
56
|
+
...props
|
|
57
|
+
}, {
|
|
58
|
+
elementType: 'div'
|
|
59
|
+
})
|
|
60
|
+
};
|
|
61
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AccordionPanel/useAccordionPanel.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {
|
|
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":["React","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"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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;QACV,GACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
package/lib/index.js
CHANGED
|
@@ -5,3 +5,9 @@ export { AccordionPanel, accordionPanelClassNames, renderAccordionPanel_unstable
|
|
|
5
5
|
export { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';
|
|
6
6
|
export { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';
|
|
7
7
|
export { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';
|
|
8
|
+
// Experimental APIs
|
|
9
|
+
// export type { AccordionBaseState, AccordionBaseProps } from './Accordion';
|
|
10
|
+
// export { useAccordionBase_unstable } from './Accordion';
|
|
11
|
+
// export { useAccordionHeaderBase_unstable } from './AccordionHeader';
|
|
12
|
+
// export type { AccordionPanelBaseState, AccordionPanelBaseProps } from './AccordionPanel';
|
|
13
|
+
// export { useAccordionPanelBase_unstable } from './AccordionPanel';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Accordion,\n accordionClassNames,\n renderAccordion_unstable,\n useAccordionContextValues_unstable,\n useAccordionStyles_unstable,\n useAccordion_unstable,\n} from './Accordion';\nexport type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n} from './Accordion';\nexport {\n AccordionItem,\n accordionItemClassNames,\n renderAccordionItem_unstable,\n useAccordionItemContextValues_unstable,\n useAccordionItemStyles_unstable,\n useAccordionItem_unstable,\n} from './AccordionItem';\nexport type {\n AccordionItemContextValues,\n AccordionItemProps,\n AccordionItemSlots,\n AccordionItemState,\n AccordionItemValue,\n} from './AccordionItem';\nexport {\n AccordionHeader,\n accordionHeaderClassNames,\n renderAccordionHeader_unstable,\n useAccordionHeaderContextValues_unstable,\n useAccordionHeaderStyles_unstable,\n useAccordionHeader_unstable,\n} from './AccordionHeader';\nexport type {\n AccordionHeaderContextValues,\n AccordionHeaderExpandIconPosition,\n AccordionHeaderProps,\n AccordionHeaderSize,\n AccordionHeaderSlots,\n AccordionHeaderState,\n} from './AccordionHeader';\nexport {\n AccordionPanel,\n accordionPanelClassNames,\n renderAccordionPanel_unstable,\n useAccordionPanelStyles_unstable,\n useAccordionPanel_unstable,\n} from './AccordionPanel';\nexport type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel';\n\nexport { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';\n\nexport type { AccordionContextValue } from './contexts/accordion';\n\nexport { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';\n\nexport type { AccordionItemContextValue } from './contexts/accordionItem';\n\nexport { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';\n\nexport type { AccordionHeaderContextValue } from './contexts/accordionHeader';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","AccordionItem","accordionItemClassNames","renderAccordionItem_unstable","useAccordionItemContextValues_unstable","useAccordionItemStyles_unstable","useAccordionItem_unstable","AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable","AccordionProvider","useAccordionContext_unstable","AccordionItemProvider","useAccordionItemContext_unstable","AccordionHeaderProvider","useAccordionHeaderContext_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAWrB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAQzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAS3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SAASC,iBAAiB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAIvF,SAASC,qBAAqB,EAAEC,gCAAgC,QAAQ,2BAA2B;AAInG,SAASC,uBAAuB,EAAEC,kCAAkC,QAAQ,6BAA6B"}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Accordion,\n accordionClassNames,\n renderAccordion_unstable,\n useAccordionContextValues_unstable,\n useAccordionStyles_unstable,\n useAccordion_unstable,\n} from './Accordion';\nexport type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n} from './Accordion';\nexport {\n AccordionItem,\n accordionItemClassNames,\n renderAccordionItem_unstable,\n useAccordionItemContextValues_unstable,\n useAccordionItemStyles_unstable,\n useAccordionItem_unstable,\n} from './AccordionItem';\nexport type {\n AccordionItemContextValues,\n AccordionItemProps,\n AccordionItemSlots,\n AccordionItemState,\n AccordionItemValue,\n} from './AccordionItem';\nexport {\n AccordionHeader,\n accordionHeaderClassNames,\n renderAccordionHeader_unstable,\n useAccordionHeaderContextValues_unstable,\n useAccordionHeaderStyles_unstable,\n useAccordionHeader_unstable,\n} from './AccordionHeader';\nexport type {\n AccordionHeaderContextValues,\n AccordionHeaderExpandIconPosition,\n AccordionHeaderProps,\n AccordionHeaderSize,\n AccordionHeaderSlots,\n AccordionHeaderState,\n} from './AccordionHeader';\nexport {\n AccordionPanel,\n accordionPanelClassNames,\n renderAccordionPanel_unstable,\n useAccordionPanelStyles_unstable,\n useAccordionPanel_unstable,\n} from './AccordionPanel';\nexport type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel';\n\nexport { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';\n\nexport type { AccordionContextValue } from './contexts/accordion';\n\nexport { AccordionItemProvider, useAccordionItemContext_unstable } from './contexts/accordionItem';\n\nexport type { AccordionItemContextValue } from './contexts/accordionItem';\n\nexport { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';\n\nexport type { AccordionHeaderContextValue } from './contexts/accordionHeader';\n\n// Experimental APIs\n// export type { AccordionBaseState, AccordionBaseProps } from './Accordion';\n// export { useAccordionBase_unstable } from './Accordion';\n// export { useAccordionHeaderBase_unstable } from './AccordionHeader';\n// export type { AccordionPanelBaseState, AccordionPanelBaseProps } from './AccordionPanel';\n// export { useAccordionPanelBase_unstable } from './AccordionPanel';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","AccordionItem","accordionItemClassNames","renderAccordionItem_unstable","useAccordionItemContextValues_unstable","useAccordionItemStyles_unstable","useAccordionItem_unstable","AccordionHeader","accordionHeaderClassNames","renderAccordionHeader_unstable","useAccordionHeaderContextValues_unstable","useAccordionHeaderStyles_unstable","useAccordionHeader_unstable","AccordionPanel","accordionPanelClassNames","renderAccordionPanel_unstable","useAccordionPanelStyles_unstable","useAccordionPanel_unstable","AccordionProvider","useAccordionContext_unstable","AccordionItemProvider","useAccordionItemContext_unstable","AccordionHeaderProvider","useAccordionHeaderContext_unstable"],"mappings":"AAAA,SACEA,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,kCAAkC,EAClCC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAWrB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAQzB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wCAAwC,EACxCC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAS3B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SAASC,iBAAiB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAIvF,SAASC,qBAAqB,EAAEC,gCAAgC,QAAQ,2BAA2B;AAInG,SAASC,uBAAuB,EAAEC,kCAAkC,QAAQ,6BAA6B;CAIzG,oBAAoB;CACpB,6EAA6E;CAC7E,2DAA2D;CAC3D,uEAAuE;CACvE,4FAA4F;CAC5F,qEAAqE"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderAccordion_unstable: function() {
|
|
19
19
|
return _index.renderAccordion_unstable;
|
|
20
20
|
},
|
|
21
|
+
useAccordionBase_unstable: function() {
|
|
22
|
+
return _index.useAccordionBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useAccordionContextValues_unstable: function() {
|
|
22
25
|
return _index.useAccordionContextValues_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Accordion.ts"],"sourcesContent":["export type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n} from './components/Accordion/index';\nexport {\n Accordion,\n accordionClassNames,\n renderAccordion_unstable,\n useAccordionContextValues_unstable,\n useAccordionStyles_unstable,\n useAccordion_unstable,\n} from './components/Accordion/index';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Accordion.ts"],"sourcesContent":["export type {\n AccordionContextValues,\n AccordionIndex,\n AccordionProps,\n AccordionSlots,\n AccordionState,\n AccordionToggleData,\n AccordionToggleEvent,\n AccordionToggleEventHandler,\n AccordionBaseState,\n AccordionBaseProps,\n} from './components/Accordion/index';\nexport {\n Accordion,\n accordionClassNames,\n renderAccordion_unstable,\n useAccordionContextValues_unstable,\n useAccordionStyles_unstable,\n useAccordion_unstable,\n useAccordionBase_unstable,\n} from './components/Accordion/index';\n"],"names":["Accordion","accordionClassNames","renderAccordion_unstable","useAccordionContextValues_unstable","useAccordionStyles_unstable","useAccordion_unstable","useAccordionBase_unstable"],"mappings":";;;;;;;;;;;;eAaEA,gBAAS;;;eACTC,0BAAmB;;;eACnBC,+BAAwB;;;eAIxBI,gCAAyB;;;eAHzBH,yCAAkC;;;eAClCC,kCAA2B;;;eAC3BC,4BAAqB;;;uBAEhB,+BAA+B"}
|