@fluentui/react-accordion 9.4.4 → 9.5.1
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 +22 -2
- package/dist/index.d.ts +4 -2
- package/lib/components/AccordionHeader/useAccordionHeader.js +3 -1
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.js +3 -3
- package/lib/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js +15 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +3 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js +3 -3
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +15 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/package.json +5 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-accordion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 15 Aug 2024 08:18:59 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.5.1)
|
|
8
|
+
|
|
9
|
+
Thu, 15 Aug 2024 08:18:59 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.5.0..@fluentui/react-accordion_v9.5.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.13.3 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.5.0)
|
|
18
|
+
|
|
19
|
+
Tue, 30 Jul 2024 18:47:31 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.4.4..@fluentui/react-accordion_v9.5.0)
|
|
21
|
+
|
|
22
|
+
### Minor changes
|
|
23
|
+
|
|
24
|
+
- feat: add collapse motion to Accordion ([PR #32086](https://github.com/microsoft/fluentui/pull/32086) by olkatruk@microsoft.com)
|
|
25
|
+
- Bump @fluentui/react-motion to v9.4.0 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
|
|
26
|
+
|
|
7
27
|
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.4.4)
|
|
8
28
|
|
|
9
|
-
Tue, 23 Jul 2024 20:
|
|
29
|
+
Tue, 23 Jul 2024 20:13:14 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.4.3..@fluentui/react-accordion_v9.4.4)
|
|
11
31
|
|
|
12
32
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
|
|
|
6
6
|
import { ContextSelector } from '@fluentui/react-context-selector';
|
|
7
7
|
import { FC } from 'react';
|
|
8
8
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
9
|
+
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
|
|
9
10
|
import { Provider } from 'react';
|
|
10
11
|
import { ProviderProps } from 'react';
|
|
11
12
|
import * as React_2 from 'react';
|
|
@@ -148,12 +149,13 @@ export declare type AccordionItemValue = unknown;
|
|
|
148
149
|
*/
|
|
149
150
|
export declare const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
|
|
150
151
|
|
|
151
|
-
export declare const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots
|
|
152
|
+
export declare const accordionPanelClassNames: SlotClassNames<Omit<AccordionPanelSlots, 'collapseMotion'>>;
|
|
152
153
|
|
|
153
154
|
export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
|
|
154
155
|
|
|
155
156
|
export declare type AccordionPanelSlots = {
|
|
156
157
|
root: NonNullable<Slot<'div'>>;
|
|
158
|
+
collapseMotion?: Slot<PresenceMotionSlotProps>;
|
|
157
159
|
};
|
|
158
160
|
|
|
159
161
|
export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
|
|
@@ -230,7 +232,7 @@ export declare const renderAccordionItem_unstable: (state: AccordionItemState, c
|
|
|
230
232
|
/**
|
|
231
233
|
* Function that renders the final JSX of the component
|
|
232
234
|
*/
|
|
233
|
-
export declare const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSX.Element
|
|
235
|
+
export declare const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSX.Element;
|
|
234
236
|
|
|
235
237
|
/**
|
|
236
238
|
* Returns the props and state required to render the component
|
|
@@ -5,6 +5,7 @@ import { useAccordionContext_unstable } from '../../contexts/accordion';
|
|
|
5
5
|
import { ChevronRightRegular } from '@fluentui/react-icons';
|
|
6
6
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
7
7
|
import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
|
|
8
|
+
import { motionTokens } from '@fluentui/react-motion';
|
|
8
9
|
/**
|
|
9
10
|
* Returns the props and state required to render the component
|
|
10
11
|
* @param props - AccordionHeader properties
|
|
@@ -77,7 +78,8 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
|
|
|
77
78
|
defaultProps: {
|
|
78
79
|
children: /*#__PURE__*/ React.createElement(ChevronRightRegular, {
|
|
79
80
|
style: {
|
|
80
|
-
transform: `rotate(${expandIconRotation}deg)
|
|
81
|
+
transform: `rotate(${expandIconRotation}deg)`,
|
|
82
|
+
transition: `transform ${motionTokens.durationNormal}ms ease-out`
|
|
81
83
|
}
|
|
82
84
|
}),
|
|
83
85
|
'aria-hidden': true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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';\n\n/**\n * Returns the props and state required to render the component\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 { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = 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 { dir } = useFluent();\n\n // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n let expandIconRotation: 0 | 90 | -90 | 180;\n if (expandIconPosition === 'end') {\n // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n expandIconRotation = open ? -90 : 90;\n } else {\n // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n }\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 getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(icon, { elementType: 'div' }),\n expandIcon: slot.optional(expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: <ChevronRightRegular
|
|
1
|
+
{"version":3,"sources":["useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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 * @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 { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = 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 { dir } = useFluent();\n\n // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n let expandIconRotation: 0 | 90 | -90 | 180;\n if (expandIconPosition === 'end') {\n // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n expandIconRotation = open ? -90 : 90;\n } else {\n // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n }\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 getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(icon, { elementType: 'div' }),\n expandIcon: slot.optional(expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: (\n <ChevronRightRegular\n style={{\n transform: `rotate(${expandIconRotation}deg)`,\n transition: `transform ${motionTokens.durationNormal}ms ease-out`,\n }}\n />\n ),\n 'aria-hidden': true,\n },\n elementType: 'span',\n }),\n button: useARIAButtonProps(buttonSlot.as, buttonSlot),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","isResolvedShorthand","useARIAButtonProps","useAccordionContext_unstable","ChevronRightRegular","useFluent_unstable","useFluent","useAccordionItemContext_unstable","motionTokens","useAccordionHeader_unstable","props","ref","icon","button","expandIcon","inline","size","expandIconPosition","value","disabled","open","requestToggle","ctx","disabledFocusable","collapsible","openItems","length","dir","expandIconRotation","buttonSlot","always","elementType","defaultProps","type","onClick","event","defaultPrevented","components","root","optional","renderByDefault","children","style","transform","transition","durationNormal","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,4BAA4B;AAClH,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;;;;CAIC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,MAAM,EAAEC,UAAU,EAAEC,SAAS,KAAK,EAAEC,OAAO,QAAQ,EAAEC,qBAAqB,OAAO,EAAE,GAAGP;IACpG,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGb;IAClC,MAAMc,gBAAgBlB,6BAA6BmB,CAAAA,MAAOA,IAAID,aAAa;IAE3E;;;GAGC,GACD,MAAME,oBAAoBpB,6BAA6BmB,CAAAA,MAAO,CAACA,IAAIE,WAAW,IAAIF,IAAIG,SAAS,CAACC,MAAM,KAAK,KAAKN;IAEhH,MAAM,EAAEO,GAAG,EAAE,GAAGrB;IAEhB,oEAAoE;IACpE,IAAIsB;IACJ,IAAIX,uBAAuB,OAAO;QAChC,8FAA8F;QAC9FW,qBAAqBR,OAAO,CAAC,KAAK;IACpC,OAAO;QACL,mGAAmG;QACnGQ,qBAAqBR,OAAO,KAAKO,QAAQ,QAAQ,IAAI;IACvD;IAEA,MAAME,aAAa7B,KAAK8B,MAAM,CAACjB,QAAQ;QACrCkB,aAAa;QACbC,cAAc;YACZb;YACAI;YACA,iBAAiBH;YACjBa,MAAM;QACR;IACF;IAEAJ,WAAWK,OAAO,GAAGnC,iBAAiBoC,CAAAA;QACpC,IAAIlC,oBAAoBY,SAAS;gBAC/BA;aAAAA,kBAAAA,OAAOqB,OAAO,cAAdrB,sCAAAA,qBAAAA,QAAiBsB;QACnB;QACA,IAAI,CAACA,MAAMC,gBAAgB,EAAE;YAC3Bf,cAAc;gBAAEH;gBAAOiB;YAAM;QAC/B;IACF;IAEA,OAAO;QACLhB;QACAC;QACAJ;QACAD;QACAE;QACAoB,YAAY;YACVC,MAAM;YACNzB,QAAQ;YACRC,YAAY;YACZF,MAAM;QACR;QACA0B,MAAMtC,KAAK8B,MAAM,CACfhC,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fa,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEqB,aAAa;QAAM;QAEvBnB,MAAMZ,KAAKuC,QAAQ,CAAC3B,MAAM;YAAEmB,aAAa;QAAM;QAC/CjB,YAAYd,KAAKuC,QAAQ,CAACzB,YAAY;YACpC0B,iBAAiB;YACjBR,cAAc;gBACZS,wBACE,oBAACrC;oBACCsC,OAAO;wBACLC,WAAW,CAAC,OAAO,EAAEf,mBAAmB,IAAI,CAAC;wBAC7CgB,YAAY,CAAC,UAAU,EAAEpC,aAAaqC,cAAc,CAAC,WAAW,CAAC;oBACnE;;gBAGJ,eAAe;YACjB;YACAd,aAAa;QACf;QACAlB,QAAQX,mBAAmB2B,WAAWiB,EAAE,EAAEjB;IAC5C;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionPanel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: NonNullable<Slot<'div'>>;\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":[],"rangeMappings":"","mappings":"
|
|
1
|
+
{"version":3,"sources":["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":[],"rangeMappings":"","mappings":"AAUA,WAKE"}
|
|
@@ -4,7 +4,7 @@ import { assertSlots } from '@fluentui/react-utilities';
|
|
|
4
4
|
* Function that renders the final JSX of the component
|
|
5
5
|
*/ export const renderAccordionPanel_unstable = (state)=>{
|
|
6
6
|
assertSlots(state);
|
|
7
|
-
return state.
|
|
8
|
-
children: state.root
|
|
9
|
-
}) :
|
|
7
|
+
return state.collapseMotion ? /*#__PURE__*/ _jsx(state.collapseMotion, {
|
|
8
|
+
children: /*#__PURE__*/ _jsx(state.root, {})
|
|
9
|
+
}) : /*#__PURE__*/ _jsx(state.root, {});
|
|
10
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderAccordionPanel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionPanel_unstable = (state: AccordionPanelState) => {\n assertSlots<AccordionPanelSlots>(state);\n return state.
|
|
1
|
+
{"version":3,"sources":["renderAccordionPanel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionPanel_unstable = (state: AccordionPanelState) => {\n assertSlots<AccordionPanelSlots>(state);\n return state.collapseMotion ? (\n <state.collapseMotion>\n <state.root />\n </state.collapseMotion>\n ) : (\n <state.root />\n );\n};\n"],"names":["assertSlots","renderAccordionPanel_unstable","state","collapseMotion","root"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IACjC,OAAOA,MAAMC,cAAc,iBACzB,KAACD,MAAMC,cAAc;kBACnB,cAAA,KAACD,MAAME,IAAI;uBAGb,KAACF,MAAME,IAAI;AAEf,EAAE"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useTabsterAttributes } from '@fluentui/react-tabster';
|
|
4
|
+
import { presenceMotionSlot } from '@fluentui/react-motion';
|
|
5
|
+
import { Collapse } from '@fluentui/react-motion-components-preview';
|
|
4
6
|
import { useAccordionContext_unstable } from '../../contexts/accordion';
|
|
5
7
|
import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
|
|
6
8
|
/**
|
|
@@ -18,7 +20,12 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
|
|
|
18
20
|
return {
|
|
19
21
|
open,
|
|
20
22
|
components: {
|
|
21
|
-
root: 'div'
|
|
23
|
+
root: 'div',
|
|
24
|
+
// TODO: remove once React v18 slot API is modified
|
|
25
|
+
// This is a problem at the moment due to UnknownSlotProps assumption
|
|
26
|
+
// that `children` property is `ReactNode`, which in this case is not valid
|
|
27
|
+
// as PresenceComponentProps['children'] is `ReactElement`
|
|
28
|
+
collapseMotion: Collapse
|
|
22
29
|
},
|
|
23
30
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
24
31
|
// FIXME:
|
|
@@ -29,6 +36,13 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
|
|
|
29
36
|
...navigation && focusableProps
|
|
30
37
|
}), {
|
|
31
38
|
elementType: 'div'
|
|
39
|
+
}),
|
|
40
|
+
collapseMotion: presenceMotionSlot(props.collapseMotion, {
|
|
41
|
+
elementType: Collapse,
|
|
42
|
+
defaultProps: {
|
|
43
|
+
visible: open,
|
|
44
|
+
unmountOnExit: true
|
|
45
|
+
}
|
|
32
46
|
})
|
|
33
47
|
};
|
|
34
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAccordionPanel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type { AccordionPanelProps, AccordionPanelState } 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 { open } = useAccordionItemContext_unstable();\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n ...(navigation && focusableProps),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTabsterAttributes","useAccordionContext_unstable","useAccordionItemContext_unstable","useAccordionPanel_unstable","props","ref","open","focusableProps","focusable","excludeFromMover","navigation","ctx","components","root","always","elementType"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useAccordionPanel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot, type PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type { AccordionPanelProps, AccordionPanelState } 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 { open } = useAccordionItemContext_unstable();\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n open,\n components: {\n root: 'div',\n // TODO: remove once React v18 slot API is modified\n // This is a problem at the moment due to UnknownSlotProps assumption\n // that `children` property is `ReactNode`, which in this case is not valid\n // as PresenceComponentProps['children'] is `ReactElement`\n collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n ...(navigation && focusableProps),\n }),\n { elementType: 'div' },\n ),\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n },\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTabsterAttributes","presenceMotionSlot","Collapse","useAccordionContext_unstable","useAccordionItemContext_unstable","useAccordionPanel_unstable","props","ref","open","focusableProps","focusable","excludeFromMover","navigation","ctx","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,kBAAkB,QAAsC,yBAAyB;AAC1F,SAASC,QAAQ,QAAQ,4CAA4C;AACrE,SAASC,4BAA4B,QAAQ,2BAA2B;AAExE,SAASC,gCAAgC,QAAQ,+BAA+B;AAEhF;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IACjB,MAAMK,iBAAiBT,qBAAqB;QAAEU,WAAW;YAAEC,kBAAkB;QAAK;IAAE;IACpF,MAAMC,aAAaT,6BAA6BU,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACLJ;QACAM,YAAY;YACVC,MAAM;YACN,mDAAmD;YACnD,qEAAqE;YACrE,2EAA2E;YAC3E,0DAA0D;YAC1DC,gBAAgBd;QAClB;QACAa,MAAMhB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FS,KAAKA;YACL,GAAGD,KAAK;YACR,GAAIM,cAAcH,cAAc;QAClC,IACA;YAAES,aAAa;QAAM;QAEvBF,gBAAgBf,mBAAmBK,MAAMU,cAAc,EAAE;YACvDE,aAAahB;YACbiB,cAAc;gBACZC,SAASZ;gBACTa,eAAe;YACjB;QACF;IACF;AACF,EAAE"}
|
|
@@ -16,6 +16,7 @@ const _accordion = require("../../contexts/accordion");
|
|
|
16
16
|
const _reacticons = require("@fluentui/react-icons");
|
|
17
17
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
18
18
|
const _accordionItem = require("../../contexts/accordionItem");
|
|
19
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
19
20
|
const useAccordionHeader_unstable = (props, ref)=>{
|
|
20
21
|
const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;
|
|
21
22
|
const { value, disabled, open } = (0, _accordionItem.useAccordionItemContext_unstable)();
|
|
@@ -84,7 +85,8 @@ const useAccordionHeader_unstable = (props, ref)=>{
|
|
|
84
85
|
defaultProps: {
|
|
85
86
|
children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronRightRegular, {
|
|
86
87
|
style: {
|
|
87
|
-
transform: `rotate(${expandIconRotation}deg)
|
|
88
|
+
transform: `rotate(${expandIconRotation}deg)`,
|
|
89
|
+
transition: `transform ${_reactmotion.motionTokens.durationNormal}ms ease-out`
|
|
88
90
|
}
|
|
89
91
|
}),
|
|
90
92
|
'aria-hidden': true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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';\n\n/**\n * Returns the props and state required to render the component\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 { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = 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 { dir } = useFluent();\n\n // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n let expandIconRotation: 0 | 90 | -90 | 180;\n if (expandIconPosition === 'end') {\n // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n expandIconRotation = open ? -90 : 90;\n } else {\n // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n }\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 getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(icon, { elementType: 'div' }),\n expandIcon: slot.optional(expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: <ChevronRightRegular
|
|
1
|
+
{"version":3,"sources":["useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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 * @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 { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = 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 { dir } = useFluent();\n\n // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n let expandIconRotation: 0 | 90 | -90 | 180;\n if (expandIconPosition === 'end') {\n // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n expandIconRotation = open ? -90 : 90;\n } else {\n // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n }\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 getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(icon, { elementType: 'div' }),\n expandIcon: slot.optional(expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: (\n <ChevronRightRegular\n style={{\n transform: `rotate(${expandIconRotation}deg)`,\n transition: `transform ${motionTokens.durationNormal}ms ease-out`,\n }}\n />\n ),\n 'aria-hidden': true,\n },\n elementType: 'span',\n }),\n button: useARIAButtonProps(buttonSlot.as, buttonSlot),\n };\n};\n"],"names":["useAccordionHeader_unstable","props","ref","icon","button","expandIcon","inline","size","expandIconPosition","value","disabled","open","useAccordionItemContext_unstable","requestToggle","useAccordionContext_unstable","ctx","disabledFocusable","collapsible","openItems","length","dir","useFluent","expandIconRotation","buttonSlot","slot","always","elementType","defaultProps","type","onClick","useEventCallback","event","isResolvedShorthand","defaultPrevented","components","root","getIntrinsicElementProps","optional","renderByDefault","children","React","createElement","ChevronRightRegular","style","transform","transition","motionTokens","durationNormal","useARIAButtonProps","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCAC+D;2BACnD;2BAEU;4BACT;qCACY;+BACC;6BACpB;AAOtB,MAAMA,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,MAAM,EAAEC,UAAU,EAAEC,SAAS,KAAK,EAAEC,OAAO,QAAQ,EAAEC,qBAAqB,OAAO,EAAE,GAAGP;IACpG,MAAM,EAAEQ,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,IAAAA,+CAAAA;IAClC,MAAMC,gBAAgBC,IAAAA,uCAAAA,EAA6BC,CAAAA,MAAOA,IAAIF,aAAa;IAE3E;;;GAGC,GACD,MAAMG,oBAAoBF,IAAAA,uCAAAA,EAA6BC,CAAAA,MAAO,CAACA,IAAIE,WAAW,IAAIF,IAAIG,SAAS,CAACC,MAAM,KAAK,KAAKR;IAEhH,MAAM,EAAES,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAEhB,oEAAoE;IACpE,IAAIC;IACJ,IAAId,uBAAuB,OAAO;QAChC,8FAA8F;QAC9Fc,qBAAqBX,OAAO,CAAC,KAAK;IACpC,OAAO;QACL,mGAAmG;QACnGW,qBAAqBX,OAAO,KAAKS,QAAQ,QAAQ,IAAI;IACvD;IAEA,MAAMG,aAAaC,oBAAAA,CAAKC,MAAM,CAACrB,QAAQ;QACrCsB,aAAa;QACbC,cAAc;YACZjB;YACAM;YACA,iBAAiBL;YACjBiB,MAAM;QACR;IACF;IAEAL,WAAWM,OAAO,GAAGC,IAAAA,gCAAAA,EAAiBC,CAAAA;QACpC,IAAIC,IAAAA,mCAAAA,EAAoB5B,SAAS;gBAC/BA;YAAAA,CAAAA,kBAAAA,OAAOyB,OAAO,AAAPA,MAAO,QAAdzB,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,QAAiB2B;QACnB;QACA,IAAI,CAACA,MAAME,gBAAgB,EAAE;YAC3BpB,cAAc;gBAAEJ;gBAAOsB;YAAM;QAC/B;IACF;IAEA,OAAO;QACLrB;QACAC;QACAJ;QACAD;QACAE;QACA0B,YAAY;YACVC,MAAM;YACN/B,QAAQ;YACRC,YAAY;YACZF,MAAM;QACR;QACAgC,MAAMX,oBAAAA,CAAKC,MAAM,CACfW,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FlC,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEyB,aAAa;QAAM;QAEvBvB,MAAMqB,oBAAAA,CAAKa,QAAQ,CAAClC,MAAM;YAAEuB,aAAa;QAAM;QAC/CrB,YAAYmB,oBAAAA,CAAKa,QAAQ,CAAChC,YAAY;YACpCiC,iBAAiB;YACjBX,cAAc;gBACZY,UAAAA,WAAAA,GACEC,OAAAC,aAAA,CAACC,+BAAAA,EAAAA;oBACCC,OAAO;wBACLC,WAAW,CAAC,OAAO,EAAEtB,mBAAmB,IAAI,CAAC;wBAC7CuB,YAAY,CAAC,UAAU,EAAEC,yBAAAA,CAAaC,cAAc,CAAC,WAAW,CAAC;oBACnE;;gBAGJ,eAAe;YACjB;YACArB,aAAa;QACf;QACAtB,QAAQ4C,IAAAA,6BAAAA,EAAmBzB,WAAW0B,EAAE,EAAE1B;IAC5C;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AccordionPanel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: NonNullable<Slot<'div'>>;\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":[],"rangeMappings":"","mappings":""}
|
|
1
|
+
{"version":3,"sources":["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":[],"rangeMappings":"","mappings":""}
|
|
@@ -12,7 +12,7 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
13
|
const renderAccordionPanel_unstable = (state)=>{
|
|
14
14
|
(0, _reactutilities.assertSlots)(state);
|
|
15
|
-
return state.
|
|
16
|
-
children: state.root
|
|
17
|
-
}) :
|
|
15
|
+
return state.collapseMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.collapseMotion, {
|
|
16
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
|
|
17
|
+
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderAccordionPanel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionPanel_unstable = (state: AccordionPanelState) => {\n assertSlots<AccordionPanelSlots>(state);\n return state.
|
|
1
|
+
{"version":3,"sources":["renderAccordionPanel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionPanel_unstable = (state: AccordionPanelState) => {\n assertSlots<AccordionPanelSlots>(state);\n return state.collapseMotion ? (\n <state.collapseMotion>\n <state.root />\n </state.collapseMotion>\n ) : (\n <state.root />\n );\n};\n"],"names":["renderAccordionPanel_unstable","state","assertSlots","collapseMotion","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,2BAAAA,EAAiCD;IACjC,OAAOA,MAAME,cAAc,GAAA,WAAA,GACzBC,IAAAA,eAAA,EAACH,MAAME,cAAc,EAAA;kBACnB,WAAA,GAAAC,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;uBAGbD,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;AAEf"}
|
|
@@ -12,6 +12,8 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
15
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
16
|
+
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
|
|
15
17
|
const _accordion = require("../../contexts/accordion");
|
|
16
18
|
const _accordionItem = require("../../contexts/accordionItem");
|
|
17
19
|
const useAccordionPanel_unstable = (props, ref)=>{
|
|
@@ -25,7 +27,12 @@ const useAccordionPanel_unstable = (props, ref)=>{
|
|
|
25
27
|
return {
|
|
26
28
|
open,
|
|
27
29
|
components: {
|
|
28
|
-
root: 'div'
|
|
30
|
+
root: 'div',
|
|
31
|
+
// TODO: remove once React v18 slot API is modified
|
|
32
|
+
// This is a problem at the moment due to UnknownSlotProps assumption
|
|
33
|
+
// that `children` property is `ReactNode`, which in this case is not valid
|
|
34
|
+
// as PresenceComponentProps['children'] is `ReactElement`
|
|
35
|
+
collapseMotion: _reactmotioncomponentspreview.Collapse
|
|
29
36
|
},
|
|
30
37
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
31
38
|
// FIXME:
|
|
@@ -36,6 +43,13 @@ const useAccordionPanel_unstable = (props, ref)=>{
|
|
|
36
43
|
...navigation && focusableProps
|
|
37
44
|
}), {
|
|
38
45
|
elementType: 'div'
|
|
46
|
+
}),
|
|
47
|
+
collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
|
|
48
|
+
elementType: _reactmotioncomponentspreview.Collapse,
|
|
49
|
+
defaultProps: {
|
|
50
|
+
visible: open,
|
|
51
|
+
unmountOnExit: true
|
|
52
|
+
}
|
|
39
53
|
})
|
|
40
54
|
};
|
|
41
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAccordionPanel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type { AccordionPanelProps, AccordionPanelState } 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 { open } = useAccordionItemContext_unstable();\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n ...(navigation && focusableProps),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useAccordionPanel_unstable","props","ref","open","useAccordionItemContext_unstable","focusableProps","useTabsterAttributes","focusable","excludeFromMover","navigation","useAccordionContext_unstable","ctx","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useAccordionPanel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot, type PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport type { AccordionPanelProps, AccordionPanelState } 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 { open } = useAccordionItemContext_unstable();\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useAccordionContext_unstable(ctx => ctx.navigation);\n\n return {\n open,\n components: {\n root: 'div',\n // TODO: remove once React v18 slot API is modified\n // This is a problem at the moment due to UnknownSlotProps assumption\n // that `children` property is `ReactNode`, which in this case is not valid\n // as PresenceComponentProps['children'] is `ReactElement`\n collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n ...(navigation && focusableProps),\n }),\n { elementType: 'div' },\n ),\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n },\n }),\n };\n};\n"],"names":["useAccordionPanel_unstable","props","ref","open","useAccordionItemContext_unstable","focusableProps","useTabsterAttributes","focusable","excludeFromMover","navigation","useAccordionContext_unstable","ctx","components","root","collapseMotion","Collapse","slot","always","getIntrinsicElementProps","elementType","presenceMotionSlot","defaultProps","visible","unmountOnExit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gCACwB;8BACV;6BAC4B;8CACxC;2BACoB;+BAEI;AAO1C,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGC,IAAAA,+CAAAA;IACjB,MAAMC,iBAAiBC,IAAAA,kCAAAA,EAAqB;QAAEC,WAAW;YAAEC,kBAAkB;QAAK;IAAE;IACpF,MAAMC,aAAaC,IAAAA,uCAAAA,EAA6BC,CAAAA,MAAOA,IAAIF,UAAU;IAErE,OAAO;QACLN;QACAS,YAAY;YACVC,MAAM;YACN,mDAAmD;YACnD,qEAAqE;YACrE,2EAA2E;YAC3E,0DAA0D;YAC1DC,gBAAgBC,sCAAAA;QAClB;QACAF,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FhB,KAAKA;YACL,GAAGD,KAAK;YACR,GAAIQ,cAAcJ,cAAc;QAClC,IACA;YAAEc,aAAa;QAAM;QAEvBL,gBAAgBM,IAAAA,+BAAAA,EAAmBnB,MAAMa,cAAc,EAAE;YACvDK,aAAaJ,sCAAAA;YACbM,cAAc;gBACZC,SAASnB;gBACToB,eAAe;YACjB;QACF;IACF;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-accordion",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.1",
|
|
4
4
|
"description": "Fluent UI accordion component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,12 +32,14 @@
|
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-aria": "^9.13.
|
|
35
|
+
"@fluentui/react-aria": "^9.13.3",
|
|
36
36
|
"@fluentui/react-context-selector": "^9.1.65",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.245",
|
|
38
38
|
"@fluentui/react-jsx-runtime": "^9.0.42",
|
|
39
39
|
"@fluentui/react-shared-contexts": "^9.20.0",
|
|
40
|
-
"@fluentui/react-
|
|
40
|
+
"@fluentui/react-motion": "^9.4.0",
|
|
41
|
+
"@fluentui/react-motion-components-preview": "^0.1.1",
|
|
42
|
+
"@fluentui/react-tabster": "^9.22.4",
|
|
41
43
|
"@fluentui/react-theme": "^9.1.19",
|
|
42
44
|
"@fluentui/react-utilities": "^9.18.13",
|
|
43
45
|
"@griffel/react": "^1.5.22",
|