npm - @fluentui/react-accordion - Versions diffs - 0.0.0-nightly-20240819-2110.1 → 0.0.0-nightly-20240820-2210.1 - Mend

@fluentui/react-accordion 0.0.0-nightly-20240819-2110.1 → 0.0.0-nightly-20240820-2210.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.

Files changed (21) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,26 +1,38 @@
 # Change Log - @fluentui/react-accordion
-This log was last generated on Mon, 19 Aug 2024 21:21:02 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Aug 2024 22:15:02 GMT and should not be manually modified.
 <!-- Start content -->
-## [0.0.0-nightly-20240819-2110.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v0.0.0-nightly-20240819-2110.1)
+## [0.0.0-nightly-20240820-2210.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v0.0.0-nightly-20240820-2210.1)
-Mon, 19 Aug 2024 21:21:02 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.4.4..@fluentui/react-accordion_v0.0.0-nightly-20240819-2110.1)
+Tue, 20 Aug 2024 22:15:02 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.5.0..@fluentui/react-accordion_v0.0.0-nightly-20240820-2210.1)
 ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-aria to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2110.1 ([commit](https://github.com/microsoft/fluentui/commit/99f7b9c0d9c2a4cb1f7dad43045108122895102e) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-motion to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.5.0)
+Tue, 30 Jul 2024 18:47:31 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.4.4..@fluentui/react-accordion_v9.5.0)
+### Minor changes
+- feat: add collapse motion to Accordion ([PR #32086](https://github.com/microsoft/fluentui/pull/32086) by olkatruk@microsoft.com)
+- Bump @fluentui/react-motion to v9.4.0 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
 ## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.4.4)

package/dist/index.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
 import * as React_2 from 'react';
@@ -148,12 +149,13 @@ export declare type AccordionItemValue = unknown;
  */
 export declare const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
-export declare const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots>;
+export declare const accordionPanelClassNames: SlotClassNames<Omit<AccordionPanelSlots, 'collapseMotion'>>;
 export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
 export declare type AccordionPanelSlots = {
     root: NonNullable<Slot<'div'>>;
+    collapseMotion?: Slot<PresenceMotionSlotProps>;
 };
 export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
@@ -230,7 +232,7 @@ export declare const renderAccordionItem_unstable: (state: AccordionItemState, c
 /**
  * Function that renders the final JSX of the component
  */
-export declare const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSX.Element | null;
+export declare const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSX.Element;
 /**
  * Returns the props and state required to render the component

package/lib/components/AccordionHeader/useAccordionHeader.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { useAccordionContext_unstable } from '../../contexts/accordion';
 import { ChevronRightRegular } from '@fluentui/react-icons';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
+import { motionTokens } from '@fluentui/react-motion';
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionHeader properties
@@ -77,7 +78,8 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
             defaultProps: {
                 children: /*#__PURE__*/ React.createElement(ChevronRightRegular, {
                     style: {
-                        transform: `rotate(${expandIconRotation}deg)`
+                        transform: `rotate(${expandIconRotation}deg)`,
+                        transition: `transform ${motionTokens.durationNormal}ms ease-out`
                     }
                 }),
                 'aria-hidden': true

package/lib/components/AccordionHeader/useAccordionHeader.js.map CHANGED Viewed

	@@ -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 style={{ transform: `rotate(${expandIconRotation}deg)` }} ~~/>,\~~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","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","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;~~AAEhF~~;;;;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,~~GAAGZ~~;IAClC,~~MAAMa~~,~~gBAAgBjB~~,~~6BAA6BkB~~,CAAAA,MAAOA,IAAID,aAAa;IAE3E;;;GAGC,GACD,MAAME,~~oBAAoBnB~~,~~6BAA6BkB~~,CAAAA,MAAO,CAACA,IAAIE,WAAW,IAAIF,IAAIG,SAAS,CAACC,MAAM,KAAK,KAAKN;IAEhH,MAAM,EAAEO,GAAG,EAAE,~~GAAGpB~~;IAEhB,oEAAoE;IACpE,~~IAAIqB~~;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,~~aAAa5B~~,~~KAAK6B~~,MAAM,CAACjB,QAAQ;QACrCkB,aAAa;QACbC,cAAc;YACZb;YACAI;YACA,iBAAiBH;YACjBa,MAAM;QACR;IACF;IAEAJ,WAAWK,OAAO,~~GAAGlC~~,~~iBAAiBmC~~,CAAAA;QACpC,~~IAAIjC~~,~~oBAAoBW~~,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,~~MAAMrC~~,~~KAAK6B~~,MAAM,~~CACf/B~~,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;~~YAC5FY~~,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEqB,aAAa;QAAM;QAEvBnB,~~MAAMX~~,~~KAAKsC~~,QAAQ,CAAC3B,MAAM;YAAEmB,aAAa;QAAM;QAC/CjB,~~YAAYb~~,~~KAAKsC~~,QAAQ,CAACzB,YAAY;YACpC0B,iBAAiB;YACjBR,cAAc;gBACZS,~~wBAAU~~,~~oBAACpC~~;~~oBAAoBqC~~,OAAO;~~wBAAEC~~,WAAW,CAAC,OAAO,EAAEf,mBAAmB,IAAI,CAAC;~~oBAAC~~;;~~gBACtF~~,eAAe;YACjB;~~YACAG~~,aAAa;QACf;QACAlB,~~QAAQV~~,~~mBAAmB0B~~,~~WAAWe~~,EAAE,~~EAAEf~~;IAC5C;AACF,EAAE"}
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"}

package/lib/components/AccordionHeader/useAccordionHeaderStyles.styles.js CHANGED Viewed

@@ -69,8 +69,8 @@ const useStyles = /*#__PURE__*/__styles({
     Ghsupd: ["fs1por5", "f4stah7"]
   },
   root: {
-    sj55zd: "fkx3v4b",
-    De3pzq: "f1e07xkv",
+    sj55zd: "f1v7fcui",
+    De3pzq: "f37gl7r",
     jrapky: 0,
     Frg6f3: 0,
     t21cq0: 0,
@@ -80,11 +80,11 @@ const useStyles = /*#__PURE__*/__styles({
     Bbmb7ep: 0,
     Btl43ni: 0,
     B7oj6ja: 0,
-    Dimara: "fmefyee"
+    Dimara: "f6hfwmg"
   },
   rootDisabled: {
     Bcmaq0h: "fwrgwhw",
-    sj55zd: "f9oqc51"
+    sj55zd: "f18cqbvb"
   },
   rootInline: {
     mc9l5x: "f14t3ns0"
@@ -113,24 +113,24 @@ const useStyles = /*#__PURE__*/__styles({
   },
   buttonSmall: {
     sshi5w: "f1nxs5xn",
-    Be2twd7: "f1xlz0if"
+    Be2twd7: "fbya9uh"
   },
   buttonLarge: {
-    Bg96gwp: "fid86g1",
-    Be2twd7: "f1uoxbql"
+    Bg96gwp: "f1gwo4u",
+    Be2twd7: "fdxm454"
   },
   buttonExtraLarge: {
-    Bg96gwp: "fk5l032",
-    Be2twd7: "f1ibc4bv"
+    Bg96gwp: "fuzvf4v",
+    Be2twd7: "f9b35j"
   },
   buttonInline: {
     mc9l5x: "ftuwxu6"
   },
   buttonExpandIconEndNoIcon: {
-    uwmqm3: ["fv9ta2t", "f8xoddt"]
+    uwmqm3: ["faxq3q", "f1ul0v5k"]
   },
   buttonExpandIconEnd: {
-    z189sj: ["f1pfi13p", "f18hjqzt"]
+    z189sj: ["fh48rhi", "f10q0swl"]
   },
   buttonDisabled: {
     Bceei9c: "fdrzuqr"
@@ -139,11 +139,11 @@ const useStyles = /*#__PURE__*/__styles({
     Bqenvij: "f1l02sjl",
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
-    Bg96gwp: "f1s7sj0s",
-    Be2twd7: "f1wykkka"
+    Bg96gwp: "favydws",
+    Be2twd7: "fgf7ic7"
   },
   expandIconStart: {
-    z189sj: ["f1njp1az", "f100az87"]
+    z189sj: ["fwvqrpg", "fej9vfb"]
   },
   expandIconEnd: {
     Bh6795r: "fqerorx",
@@ -151,15 +151,15 @@ const useStyles = /*#__PURE__*/__styles({
     xawz: "flqd7gy",
     mc9l5x: "f22iagw",
     Brf1p80: "f9c4gz4",
-    uwmqm3: ["f1lrbzs4", "feqb5vt"]
+    uwmqm3: ["ffkr8d8", "f1q1wrpf"]
   },
   icon: {
     Bqenvij: "f1l02sjl",
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
-    z189sj: ["f1d866du", "f1c1vsf3"],
-    Bg96gwp: "f15jt4eb",
-    Be2twd7: "f1ifvmx6"
+    z189sj: ["f17sndc6", "f1u6ndid"],
+    Bg96gwp: "fwl8c6e",
+    Be2twd7: "fyiobl8"
   }
 }, {
   d: [".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", [".f1gl81tg{overflow:visible;}", {
@@ -170,15 +170,15 @@ const useStyles = /*#__PURE__*/__styles({
     p: -2
   }], [".f3znvyf[data-fui-focus-visible]::after{border-radius:var(--borderRadiusMedium);}", {
     p: -1
-  }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".fkx3v4b{color:var(--ctrl-token-AccordionHeader-17, var(--semantic-token-AccordionHeader-18, var(--colorNeutralForeground1)));}", ".f1e07xkv{background-color:var(--ctrl-token-AccordionHeader-19, var(--semantic-token-AccordionHeader-20, var(--colorTransparentBackground)));}", [".f1s184ao{margin:0;}", {
+  }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".f1v7fcui{color:var(--17, var(--18, var(--colorNeutralForeground1)));}", ".f37gl7r{background-color:var(--19, var(--20, var(--colorTransparentBackground)));}", [".f1s184ao{margin:0;}", {
     p: -1
-  }], [".fmefyee{border-radius:var(--ctrl-token-AccordionHeader-21, var(--semantic-token-AccordionHeader-22, var(--borderRadiusMedium)));}", {
+  }], [".f6hfwmg{border-radius:var(--21, var(--22, var(--borderRadiusMedium)));}", {
     p: -1
-  }], ".fwrgwhw{background-image:none;}", ".f9oqc51{color:var(--ctrl-token-AccordionHeader-23, var(--semantic-token-AccordionHeader-24, var(--colorNeutralForegroundDisabled)));}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", [".f1rmphuq{padding:0 var(--spacingHorizontalM) 0 var(--spacingHorizontalMNudge);}", {
+  }], ".fwrgwhw{background-image:none;}", ".f18cqbvb{color:var(--23, var(--24, var(--colorNeutralForegroundDisabled)));}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", [".f1rmphuq{padding:0 var(--spacingHorizontalM) 0 var(--spacingHorizontalMNudge);}", {
     p: -1
   }], [".f26yw9j{padding:0 var(--spacingHorizontalMNudge) 0 var(--spacingHorizontalM);}", {
     p: -1
-  }], ".f5pgtk9{min-height:44px;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1nxs5xn{min-height:32px;}", ".f1xlz0if{font-size:var(--ctrl-token-AccordionHeader-25, var(--semantic-token-AccordionHeader-26, var(--fontSizeBase200)));}", ".fid86g1{line-height:var(--ctrl-token-AccordionHeader-27, var(--semantic-token-AccordionHeader-28, var(--lineHeightBase400)));}", ".f1uoxbql{font-size:var(--ctrl-token-AccordionHeader-29, var(--semantic-token-AccordionHeader-30, var(--fontSizeBase400)));}", ".fk5l032{line-height:var(--ctrl-token-AccordionHeader-31, var(--semantic-token-AccordionHeader-32, var(--lineHeightBase500)));}", ".f1ibc4bv{font-size:var(--ctrl-token-AccordionHeader-33, var(--semantic-token-AccordionHeader-34, var(--fontSizeBase500)));}", ".ftuwxu6{display:inline-flex;}", ".fv9ta2t{padding-left:var(--ctrl-token-AccordionHeader-35, var(--semantic-token-AccordionHeader-36, var(--spacingHorizontalM)));}", ".f8xoddt{padding-right:var(--ctrl-token-AccordionHeader-35, var(--semantic-token-AccordionHeader-36, var(--spacingHorizontalM)));}", ".f1pfi13p{padding-right:var(--ctrl-token-AccordionHeader-37, var(--semantic-token-AccordionHeader-38, var(--spacingHorizontalMNudge)));}", ".f18hjqzt{padding-left:var(--ctrl-token-AccordionHeader-37, var(--semantic-token-AccordionHeader-38, var(--spacingHorizontalMNudge)));}", ".fdrzuqr{cursor:not-allowed;}", ".f1l02sjl{height:100%;}", ".f1s7sj0s{line-height:var(--ctrl-token-AccordionHeader-39, var(--semantic-token-AccordionHeader-40, var(--lineHeightBase500)));}", ".f1wykkka{font-size:var(--ctrl-token-AccordionHeader-41, var(--semantic-token-AccordionHeader-42, var(--fontSizeBase500)));}", ".f1njp1az{padding-right:var(--ctrl-token-AccordionHeader-43, var(--semantic-token-AccordionHeader-44, var(--spacingHorizontalS)));}", ".f100az87{padding-left:var(--ctrl-token-AccordionHeader-43, var(--semantic-token-AccordionHeader-44, var(--spacingHorizontalS)));}", ".fqerorx{flex-grow:1;}", ".f1neuvcm{flex-shrink:1;}", ".flqd7gy{flex-basis:0%;}", ".f9c4gz4{justify-content:flex-end;}", ".f1lrbzs4{padding-left:var(--ctrl-token-AccordionHeader-45, var(--semantic-token-AccordionHeader-46, var(--spacingHorizontalS)));}", ".feqb5vt{padding-right:var(--ctrl-token-AccordionHeader-45, var(--semantic-token-AccordionHeader-46, var(--spacingHorizontalS)));}", ".f1d866du{padding-right:var(--ctrl-token-AccordionHeader-47, var(--semantic-token-AccordionHeader-48, var(--spacingHorizontalS)));}", ".f1c1vsf3{padding-left:var(--ctrl-token-AccordionHeader-47, var(--semantic-token-AccordionHeader-48, var(--spacingHorizontalS)));}", ".f15jt4eb{line-height:var(--ctrl-token-AccordionHeader-49, var(--semantic-token-AccordionHeader-50, var(--lineHeightBase500)));}", ".f1ifvmx6{font-size:var(--ctrl-token-AccordionHeader-51, var(--semantic-token-AccordionHeader-52, var(--fontSizeBase500)));}"],
+  }], ".f5pgtk9{min-height:44px;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1nxs5xn{min-height:32px;}", ".fbya9uh{font-size:var(--25, var(--26, var(--fontSizeBase200)));}", ".f1gwo4u{line-height:var(--27, var(--28, var(--lineHeightBase400)));}", ".fdxm454{font-size:var(--29, var(--30, var(--fontSizeBase400)));}", ".fuzvf4v{line-height:var(--31, var(--32, var(--lineHeightBase500)));}", ".f9b35j{font-size:var(--33, var(--34, var(--fontSizeBase500)));}", ".ftuwxu6{display:inline-flex;}", ".faxq3q{padding-left:var(--35, var(--36, var(--spacingHorizontalM)));}", ".f1ul0v5k{padding-right:var(--35, var(--36, var(--spacingHorizontalM)));}", ".fh48rhi{padding-right:var(--37, var(--38, var(--spacingHorizontalMNudge)));}", ".f10q0swl{padding-left:var(--37, var(--38, var(--spacingHorizontalMNudge)));}", ".fdrzuqr{cursor:not-allowed;}", ".f1l02sjl{height:100%;}", ".favydws{line-height:var(--39, var(--40, var(--lineHeightBase500)));}", ".fgf7ic7{font-size:var(--41, var(--42, var(--fontSizeBase500)));}", ".fwvqrpg{padding-right:var(--43, var(--44, var(--spacingHorizontalS)));}", ".fej9vfb{padding-left:var(--43, var(--44, var(--spacingHorizontalS)));}", ".fqerorx{flex-grow:1;}", ".f1neuvcm{flex-shrink:1;}", ".flqd7gy{flex-basis:0%;}", ".f9c4gz4{justify-content:flex-end;}", ".ffkr8d8{padding-left:var(--45, var(--46, var(--spacingHorizontalS)));}", ".f1q1wrpf{padding-right:var(--45, var(--46, var(--spacingHorizontalS)));}", ".f17sndc6{padding-right:var(--47, var(--48, var(--spacingHorizontalS)));}", ".f1u6ndid{padding-left:var(--47, var(--48, var(--spacingHorizontalS)));}", ".fwl8c6e{line-height:var(--49, var(--50, var(--lineHeightBase500)));}", ".fyiobl8{font-size:var(--51, var(--52, var(--fontSizeBase500)));}"],
   f: [".ftqa4ok:focus{outline-style:none;}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
   m: [["@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {

package/lib/components/AccordionHeader/useAccordionHeaderStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["shorthands","__styles","mergeClasses","createFocusOutlineStyle","tokens","typographyStyles","accordionHeaderClassNames","root","button","expandIcon","icon","useStyles","resetButton","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bv0vk6g","fsow6f","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rootDisabled","Bcmaq0h","rootInline","mc9l5x","qhf8xq","a9b677","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sshi5w","Bt984gj","Bceei9c","Bhrd7zp","buttonSmall","buttonLarge","buttonExtraLarge","buttonInline","buttonExpandIconEndNoIcon","buttonExpandIconEnd","buttonDisabled","Bqenvij","expandIconStart","expandIconEnd","Bh6795r","Bnnss6s","xawz","Brf1p80","d","p","f","i","m","useAccordionHeaderStyles_unstable","state","styles","className","inline","disabled","expandIconPosition","size"],"sources":["useAccordionHeaderStyles.styles.js"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const accordionHeaderClassNames = {\n root: 'fui-AccordionHeader',\n button: 'fui-AccordionHeader__button',\n expandIcon: 'fui-AccordionHeader__expandIcon',\n icon: 'fui-AccordionHeader__icon'\n};\nconst useStyles = makeStyles({\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n overflow: 'visible',\n padding: '0',\n WebkitAppearance: 'button',\n textAlign: 'unset'\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: `var(--ctrl-token-AccordionHeader-17, var(--semantic-token-AccordionHeader-18, ${tokens.colorNeutralForeground1}))`,\n backgroundColor: `var(--ctrl-token-AccordionHeader-19, var(--semantic-token-AccordionHeader-20, ${tokens.colorTransparentBackground}))`,\n margin: '0',\n borderRadius: `var(--ctrl-token-AccordionHeader-21, var(--semantic-token-AccordionHeader-22, ${tokens.borderRadiusMedium}))`\n },\n rootDisabled: {\n backgroundImage: 'none',\n color: `var(--ctrl-token-AccordionHeader-23, var(--semantic-token-AccordionHeader-24, ${tokens.colorNeutralForegroundDisabled}))`\n },\n rootInline: {\n display: 'inline-block'\n },\n button: {\n position: 'relative',\n width: '100%',\n ...shorthands.borderWidth('0'),\n padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,\n minHeight: '44px',\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box'\n },\n buttonSmall: {\n minHeight: '32px',\n fontSize: `var(--ctrl-token-AccordionHeader-25, var(--semantic-token-AccordionHeader-26, ${tokens.fontSizeBase200}))`\n },\n buttonLarge: {\n lineHeight: `var(--ctrl-token-AccordionHeader-27, var(--semantic-token-AccordionHeader-28, ${tokens.lineHeightBase400}))`,\n fontSize: `var(--ctrl-token-AccordionHeader-29, var(--semantic-token-AccordionHeader-30, ${tokens.fontSizeBase400}))`\n },\n buttonExtraLarge: {\n lineHeight: `var(--ctrl-token-AccordionHeader-31, var(--semantic-token-AccordionHeader-32, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--ctrl-token-AccordionHeader-33, var(--semantic-token-AccordionHeader-34, ${tokens.fontSizeBase500}))`\n },\n buttonInline: {\n display: 'inline-flex'\n },\n buttonExpandIconEndNoIcon: {\n paddingLeft: `var(--ctrl-token-AccordionHeader-35, var(--semantic-token-AccordionHeader-36, ${tokens.spacingHorizontalM}))`\n },\n buttonExpandIconEnd: {\n paddingRight: `var(--ctrl-token-AccordionHeader-37, var(--semantic-token-AccordionHeader-38, ${tokens.spacingHorizontalMNudge}))`\n },\n buttonDisabled: {\n cursor: 'not-allowed'\n },\n expandIcon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n lineHeight: `var(--ctrl-token-AccordionHeader-39, var(--semantic-token-AccordionHeader-40, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--ctrl-token-AccordionHeader-41, var(--semantic-token-AccordionHeader-42, ${tokens.fontSizeBase500}))`\n },\n expandIconStart: {\n paddingRight: `var(--ctrl-token-AccordionHeader-43, var(--semantic-token-AccordionHeader-44, ${tokens.spacingHorizontalS}))`\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: `var(--ctrl-token-AccordionHeader-45, var(--semantic-token-AccordionHeader-46, ${tokens.spacingHorizontalS}))`\n },\n icon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: `var(--ctrl-token-AccordionHeader-47, var(--semantic-token-AccordionHeader-48, ${tokens.spacingHorizontalS}))`,\n lineHeight: `var(--ctrl-token-AccordionHeader-49, var(--semantic-token-AccordionHeader-50, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--ctrl-token-AccordionHeader-51, var(--semantic-token-AccordionHeader-52, ${tokens.fontSizeBase500}))`\n }\n});\n/** Applies style classnames to slots */ export const useAccordionHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);\n state.button.className = mergeClasses(accordionHeaderClassNames.button, styles.resetButton, styles.button, styles.focusIndicator, state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon, state.expandIconPosition === 'end' && styles.buttonExpandIconEnd, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.size === 'large' && styles.buttonLarge, state.size === 'extra-large' && styles.buttonExtraLarge, state.disabled && styles.buttonDisabled, state.button.className);\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["shorthands","__styles","mergeClasses","createFocusOutlineStyle","tokens","typographyStyles","accordionHeaderClassNames","root","button","expandIcon","icon","useStyles","resetButton","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bv0vk6g","fsow6f","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rootDisabled","Bcmaq0h","rootInline","mc9l5x","qhf8xq","a9b677","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sshi5w","Bt984gj","Bceei9c","Bhrd7zp","buttonSmall","buttonLarge","buttonExtraLarge","buttonInline","buttonExpandIconEndNoIcon","buttonExpandIconEnd","buttonDisabled","Bqenvij","expandIconStart","expandIconEnd","Bh6795r","Bnnss6s","xawz","Brf1p80","d","p","f","i","m","useAccordionHeaderStyles_unstable","state","styles","className","inline","disabled","expandIconPosition","size"],"sources":["useAccordionHeaderStyles.styles.js"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const accordionHeaderClassNames = {\n root: 'fui-AccordionHeader',\n button: 'fui-AccordionHeader__button',\n expandIcon: 'fui-AccordionHeader__expandIcon',\n icon: 'fui-AccordionHeader__icon'\n};\nconst useStyles = makeStyles({\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n overflow: 'visible',\n padding: '0',\n WebkitAppearance: 'button',\n textAlign: 'unset'\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: `var(--17, var(--18, ${tokens.colorNeutralForeground1}))`,\n backgroundColor: `var(--19, var(--20, ${tokens.colorTransparentBackground}))`,\n margin: '0',\n borderRadius: `var(--21, var(--22, ${tokens.borderRadiusMedium}))`\n },\n rootDisabled: {\n backgroundImage: 'none',\n color: `var(--23, var(--24, ${tokens.colorNeutralForegroundDisabled}))`\n },\n rootInline: {\n display: 'inline-block'\n },\n button: {\n position: 'relative',\n width: '100%',\n ...shorthands.borderWidth('0'),\n padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,\n minHeight: '44px',\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box'\n },\n buttonSmall: {\n minHeight: '32px',\n fontSize: `var(--25, var(--26, ${tokens.fontSizeBase200}))`\n },\n buttonLarge: {\n lineHeight: `var(--27, var(--28, ${tokens.lineHeightBase400}))`,\n fontSize: `var(--29, var(--30, ${tokens.fontSizeBase400}))`\n },\n buttonExtraLarge: {\n lineHeight: `var(--31, var(--32, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--33, var(--34, ${tokens.fontSizeBase500}))`\n },\n buttonInline: {\n display: 'inline-flex'\n },\n buttonExpandIconEndNoIcon: {\n paddingLeft: `var(--35, var(--36, ${tokens.spacingHorizontalM}))`\n },\n buttonExpandIconEnd: {\n paddingRight: `var(--37, var(--38, ${tokens.spacingHorizontalMNudge}))`\n },\n buttonDisabled: {\n cursor: 'not-allowed'\n },\n expandIcon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n lineHeight: `var(--39, var(--40, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--41, var(--42, ${tokens.fontSizeBase500}))`\n },\n expandIconStart: {\n paddingRight: `var(--43, var(--44, ${tokens.spacingHorizontalS}))`\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: `var(--45, var(--46, ${tokens.spacingHorizontalS}))`\n },\n icon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: `var(--47, var(--48, ${tokens.spacingHorizontalS}))`,\n lineHeight: `var(--49, var(--50, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--51, var(--52, ${tokens.fontSizeBase500}))`\n }\n});\n/** Applies style classnames to slots */ export const useAccordionHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);\n state.button.className = mergeClasses(accordionHeaderClassNames.button, styles.resetButton, styles.button, styles.focusIndicator, state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon, state.expandIconPosition === 'end' && styles.buttonExpandIconEnd, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.size === 'large' && styles.buttonLarge, state.size === 'extra-large' && styles.buttonExtraLarge, state.disabled && styles.buttonDisabled, state.button.className);\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/AccordionPanel/AccordionPanel.types.js.map CHANGED Viewed

	@@ -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":"~~AAQA~~,WAKE"}
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"}

package/lib/components/AccordionPanel/renderAccordionPanel.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { assertSlots } from '@fluentui/react-utilities';
  * Function that renders the final JSX of the component
  */ export const renderAccordionPanel_unstable = (state)=>{
     assertSlots(state);
-    return state.open ? /*#__PURE__*/ _jsx(state.root, {
-        children: state.root.children
-    }) : null;
+    return state.collapseMotion ? /*#__PURE__*/ _jsx(state.collapseMotion, {
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    }) : /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/AccordionPanel/renderAccordionPanel.js.map CHANGED Viewed

	@@ -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.~~open~~ ? <state.~~root>{~~state.root~~.children}~~</state.~~root>~~ : ~~null~~;\n};\n"],"names":["assertSlots","renderAccordionPanel_unstable","state","~~open~~","root"~~,"children"~~],"rangeMappings":";;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IACjC,OAAOA,MAAMC,~~IAAI~~,~~iBAAG~~,KAACD,MAAME,IAAI;~~kBAAEF~~,MAAME,IAAI~~,CAACC,QAAQ~~;~~SAAiB;AACvE~~,EAAE"}
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"}

package/lib/components/AccordionPanel/useAccordionPanel.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
+import { presenceMotionSlot } from '@fluentui/react-motion';
+import { Collapse } from '@fluentui/react-motion-components-preview';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
 import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
 /**
@@ -18,7 +20,12 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
     return {
         open,
         components: {
-            root: 'div'
+            root: 'div',
+            // TODO: remove once React v18 slot API is modified
+            // This is a problem at the moment due to UnknownSlotProps assumption
+            // that `children` property is `ReactNode`, which in this case is not valid
+            // as PresenceComponentProps['children'] is `ReactElement`
+            collapseMotion: Collapse
         },
         root: slot.always(getIntrinsicElementProps('div', {
             // FIXME:
@@ -29,6 +36,13 @@ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
             ...navigation && focusableProps
         }), {
             elementType: 'div'
+        }),
+        collapseMotion: presenceMotionSlot(props.collapseMotion, {
+            elementType: Collapse,
+            defaultProps: {
+                visible: open,
+                unmountOnExit: true
+            }
         })
     };
 };

package/lib/components/AccordionPanel/useAccordionPanel.js.map CHANGED Viewed

	@@ -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":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,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,~~iBAAiBP~~,qBAAqB;~~QAAEQ~~,WAAW;YAAEC,kBAAkB;QAAK;IAAE;IACpF,MAAMC,aAAaT,6BAA6BU,CAAAA,MAAOA,IAAID,UAAU;IAErE,OAAO;QACLJ;QACAM,YAAY;YACVC,MAAM;~~QACR~~;~~QACAA~~,~~MAAMd~~,~~KAAKe~~,MAAM,~~CACfhB~~,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;~~YAC5FO~~,KAAKA;YACL,GAAGD,KAAK;YACR,GAAIM,cAAcH,cAAc;QAClC,IACA;~~YAAEQ~~,aAAa;QAAM;~~IAEzB~~;AACF,EAAE"}
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"}

package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js CHANGED Viewed

@@ -16,6 +16,7 @@ const _accordion = require("../../contexts/accordion");
 const _reacticons = require("@fluentui/react-icons");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _accordionItem = require("../../contexts/accordionItem");
+const _reactmotion = require("@fluentui/react-motion");
 const useAccordionHeader_unstable = (props, ref)=>{
     const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;
     const { value, disabled, open } = (0, _accordionItem.useAccordionItemContext_unstable)();
@@ -84,7 +85,8 @@ const useAccordionHeader_unstable = (props, ref)=>{
             defaultProps: {
                 children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronRightRegular, {
                     style: {
-                        transform: `rotate(${expandIconRotation}deg)`
+                        transform: `rotate(${expandIconRotation}deg)`,
+                        transition: `transform ${_reactmotion.motionTokens.durationNormal}ms ease-out`
                     }
                 }),
                 'aria-hidden': true

package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map CHANGED Viewed

	@@ -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 style={{ transform: `rotate(${expandIconRotation}deg)` }} ~~/>,\~~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","useARIAButtonProps","as"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAcaA~~;;;eAAAA;;;;~~iEAdU~~;gCAC+D;2BACnD;2BAEU;4BACT;qCACY;+BACC;~~AAO1C~~,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,~~GAAUC~~,OAAAC,aAAA,CAACC,+BAAAA,EAAAA;~~oBAAoBC~~,OAAO;~~wBAAEC~~,WAAW,CAAC,OAAO,EAAEtB,mBAAmB,IAAI,CAAC;~~oBAAC~~;;~~gBACtF~~,eAAe;YACjB;~~YACAI~~,aAAa;QACf;QACAtB,~~QAAQyC~~,IAAAA,6BAAAA,~~EAAmBtB~~,~~WAAWuB~~,EAAE,~~EAAEvB~~;IAC5C;AACF"}
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"}

package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.styles.js CHANGED Viewed

@@ -103,8 +103,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ]
     },
     root: {
-        sj55zd: "fkx3v4b",
-        De3pzq: "f1e07xkv",
+        sj55zd: "f1v7fcui",
+        De3pzq: "f37gl7r",
         jrapky: 0,
         Frg6f3: 0,
         t21cq0: 0,
@@ -114,11 +114,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bbmb7ep: 0,
         Btl43ni: 0,
         B7oj6ja: 0,
-        Dimara: "fmefyee"
+        Dimara: "f6hfwmg"
     },
     rootDisabled: {
         Bcmaq0h: "fwrgwhw",
-        sj55zd: "f9oqc51"
+        sj55zd: "f18cqbvb"
     },
     rootInline: {
         mc9l5x: "f14t3ns0"
@@ -156,29 +156,29 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     },
     buttonSmall: {
         sshi5w: "f1nxs5xn",
-        Be2twd7: "f1xlz0if"
+        Be2twd7: "fbya9uh"
     },
     buttonLarge: {
-        Bg96gwp: "fid86g1",
-        Be2twd7: "f1uoxbql"
+        Bg96gwp: "f1gwo4u",
+        Be2twd7: "fdxm454"
     },
     buttonExtraLarge: {
-        Bg96gwp: "fk5l032",
-        Be2twd7: "f1ibc4bv"
+        Bg96gwp: "fuzvf4v",
+        Be2twd7: "f9b35j"
     },
     buttonInline: {
         mc9l5x: "ftuwxu6"
     },
     buttonExpandIconEndNoIcon: {
         uwmqm3: [
-            "fv9ta2t",
-            "f8xoddt"
+            "faxq3q",
+            "f1ul0v5k"
         ]
     },
     buttonExpandIconEnd: {
         z189sj: [
-            "f1pfi13p",
-            "f18hjqzt"
+            "fh48rhi",
+            "f10q0swl"
         ]
     },
     buttonDisabled: {
@@ -188,13 +188,13 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bqenvij: "f1l02sjl",
         mc9l5x: "f22iagw",
         Bt984gj: "f122n59",
-        Bg96gwp: "f1s7sj0s",
-        Be2twd7: "f1wykkka"
+        Bg96gwp: "favydws",
+        Be2twd7: "fgf7ic7"
     },
     expandIconStart: {
         z189sj: [
-            "f1njp1az",
-            "f100az87"
+            "fwvqrpg",
+            "fej9vfb"
         ]
     },
     expandIconEnd: {
@@ -204,8 +204,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         mc9l5x: "f22iagw",
         Brf1p80: "f9c4gz4",
         uwmqm3: [
-            "f1lrbzs4",
-            "feqb5vt"
+            "ffkr8d8",
+            "f1q1wrpf"
         ]
     },
     icon: {
@@ -213,11 +213,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         mc9l5x: "f22iagw",
         Bt984gj: "f122n59",
         z189sj: [
-            "f1d866du",
-            "f1c1vsf3"
+            "f17sndc6",
+            "f1u6ndid"
         ],
-        Bg96gwp: "f15jt4eb",
-        Be2twd7: "f1ifvmx6"
+        Bg96gwp: "fwl8c6e",
+        Be2twd7: "fyiobl8"
     }
 }, {
     d: [
@@ -265,8 +265,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}",
         ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}",
         ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}",
-        ".fkx3v4b{color:var(--ctrl-token-AccordionHeader-17, var(--semantic-token-AccordionHeader-18, var(--colorNeutralForeground1)));}",
-        ".f1e07xkv{background-color:var(--ctrl-token-AccordionHeader-19, var(--semantic-token-AccordionHeader-20, var(--colorTransparentBackground)));}",
+        ".f1v7fcui{color:var(--17, var(--18, var(--colorNeutralForeground1)));}",
+        ".f37gl7r{background-color:var(--19, var(--20, var(--colorTransparentBackground)));}",
         [
             ".f1s184ao{margin:0;}",
             {
@@ -274,13 +274,13 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             }
         ],
         [
-            ".fmefyee{border-radius:var(--ctrl-token-AccordionHeader-21, var(--semantic-token-AccordionHeader-22, var(--borderRadiusMedium)));}",
+            ".f6hfwmg{border-radius:var(--21, var(--22, var(--borderRadiusMedium)));}",
             {
                 p: -1
             }
         ],
         ".fwrgwhw{background-image:none;}",
-        ".f9oqc51{color:var(--ctrl-token-AccordionHeader-23, var(--semantic-token-AccordionHeader-24, var(--colorNeutralForegroundDisabled)));}",
+        ".f18cqbvb{color:var(--23, var(--24, var(--colorNeutralForegroundDisabled)));}",
         ".f14t3ns0{display:inline-block;}",
         ".f10pi13n{position:relative;}",
         ".fly5x3f{width:100%;}",
@@ -310,32 +310,32 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1i3iumi{line-height:var(--lineHeightBase300);}",
         ".f1ewtqcl{box-sizing:border-box;}",
         ".f1nxs5xn{min-height:32px;}",
-        ".f1xlz0if{font-size:var(--ctrl-token-AccordionHeader-25, var(--semantic-token-AccordionHeader-26, var(--fontSizeBase200)));}",
-        ".fid86g1{line-height:var(--ctrl-token-AccordionHeader-27, var(--semantic-token-AccordionHeader-28, var(--lineHeightBase400)));}",
-        ".f1uoxbql{font-size:var(--ctrl-token-AccordionHeader-29, var(--semantic-token-AccordionHeader-30, var(--fontSizeBase400)));}",
-        ".fk5l032{line-height:var(--ctrl-token-AccordionHeader-31, var(--semantic-token-AccordionHeader-32, var(--lineHeightBase500)));}",
-        ".f1ibc4bv{font-size:var(--ctrl-token-AccordionHeader-33, var(--semantic-token-AccordionHeader-34, var(--fontSizeBase500)));}",
+        ".fbya9uh{font-size:var(--25, var(--26, var(--fontSizeBase200)));}",
+        ".f1gwo4u{line-height:var(--27, var(--28, var(--lineHeightBase400)));}",
+        ".fdxm454{font-size:var(--29, var(--30, var(--fontSizeBase400)));}",
+        ".fuzvf4v{line-height:var(--31, var(--32, var(--lineHeightBase500)));}",
+        ".f9b35j{font-size:var(--33, var(--34, var(--fontSizeBase500)));}",
         ".ftuwxu6{display:inline-flex;}",
-        ".fv9ta2t{padding-left:var(--ctrl-token-AccordionHeader-35, var(--semantic-token-AccordionHeader-36, var(--spacingHorizontalM)));}",
-        ".f8xoddt{padding-right:var(--ctrl-token-AccordionHeader-35, var(--semantic-token-AccordionHeader-36, var(--spacingHorizontalM)));}",
-        ".f1pfi13p{padding-right:var(--ctrl-token-AccordionHeader-37, var(--semantic-token-AccordionHeader-38, var(--spacingHorizontalMNudge)));}",
-        ".f18hjqzt{padding-left:var(--ctrl-token-AccordionHeader-37, var(--semantic-token-AccordionHeader-38, var(--spacingHorizontalMNudge)));}",
+        ".faxq3q{padding-left:var(--35, var(--36, var(--spacingHorizontalM)));}",
+        ".f1ul0v5k{padding-right:var(--35, var(--36, var(--spacingHorizontalM)));}",
+        ".fh48rhi{padding-right:var(--37, var(--38, var(--spacingHorizontalMNudge)));}",
+        ".f10q0swl{padding-left:var(--37, var(--38, var(--spacingHorizontalMNudge)));}",
         ".fdrzuqr{cursor:not-allowed;}",
         ".f1l02sjl{height:100%;}",
-        ".f1s7sj0s{line-height:var(--ctrl-token-AccordionHeader-39, var(--semantic-token-AccordionHeader-40, var(--lineHeightBase500)));}",
-        ".f1wykkka{font-size:var(--ctrl-token-AccordionHeader-41, var(--semantic-token-AccordionHeader-42, var(--fontSizeBase500)));}",
-        ".f1njp1az{padding-right:var(--ctrl-token-AccordionHeader-43, var(--semantic-token-AccordionHeader-44, var(--spacingHorizontalS)));}",
-        ".f100az87{padding-left:var(--ctrl-token-AccordionHeader-43, var(--semantic-token-AccordionHeader-44, var(--spacingHorizontalS)));}",
+        ".favydws{line-height:var(--39, var(--40, var(--lineHeightBase500)));}",
+        ".fgf7ic7{font-size:var(--41, var(--42, var(--fontSizeBase500)));}",
+        ".fwvqrpg{padding-right:var(--43, var(--44, var(--spacingHorizontalS)));}",
+        ".fej9vfb{padding-left:var(--43, var(--44, var(--spacingHorizontalS)));}",
         ".fqerorx{flex-grow:1;}",
         ".f1neuvcm{flex-shrink:1;}",
         ".flqd7gy{flex-basis:0%;}",
         ".f9c4gz4{justify-content:flex-end;}",
-        ".f1lrbzs4{padding-left:var(--ctrl-token-AccordionHeader-45, var(--semantic-token-AccordionHeader-46, var(--spacingHorizontalS)));}",
-        ".feqb5vt{padding-right:var(--ctrl-token-AccordionHeader-45, var(--semantic-token-AccordionHeader-46, var(--spacingHorizontalS)));}",
-        ".f1d866du{padding-right:var(--ctrl-token-AccordionHeader-47, var(--semantic-token-AccordionHeader-48, var(--spacingHorizontalS)));}",
-        ".f1c1vsf3{padding-left:var(--ctrl-token-AccordionHeader-47, var(--semantic-token-AccordionHeader-48, var(--spacingHorizontalS)));}",
-        ".f15jt4eb{line-height:var(--ctrl-token-AccordionHeader-49, var(--semantic-token-AccordionHeader-50, var(--lineHeightBase500)));}",
-        ".f1ifvmx6{font-size:var(--ctrl-token-AccordionHeader-51, var(--semantic-token-AccordionHeader-52, var(--fontSizeBase500)));}"
+        ".ffkr8d8{padding-left:var(--45, var(--46, var(--spacingHorizontalS)));}",
+        ".f1q1wrpf{padding-right:var(--45, var(--46, var(--spacingHorizontalS)));}",
+        ".f17sndc6{padding-right:var(--47, var(--48, var(--spacingHorizontalS)));}",
+        ".f1u6ndid{padding-left:var(--47, var(--48, var(--spacingHorizontalS)));}",
+        ".fwl8c6e{line-height:var(--49, var(--50, var(--lineHeightBase500)));}",
+        ".fyiobl8{font-size:var(--51, var(--52, var(--fontSizeBase500)));}"
     ],
     f: [
         ".ftqa4ok:focus{outline-style:none;}"

package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAccordionHeaderStyles.styles.js"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const accordionHeaderClassNames = {\n root: 'fui-AccordionHeader',\n button: 'fui-AccordionHeader__button',\n expandIcon: 'fui-AccordionHeader__expandIcon',\n icon: 'fui-AccordionHeader__icon'\n};\nconst useStyles = makeStyles({\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n overflow: 'visible',\n padding: '0',\n WebkitAppearance: 'button',\n textAlign: 'unset'\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: `var(--ctrl-token-AccordionHeader-17, var(--semantic-token-AccordionHeader-18, ${tokens.colorNeutralForeground1}))`,\n backgroundColor: `var(--ctrl-token-AccordionHeader-19, var(--semantic-token-AccordionHeader-20, ${tokens.colorTransparentBackground}))`,\n margin: '0',\n borderRadius: `var(--ctrl-token-AccordionHeader-21, var(--semantic-token-AccordionHeader-22, ${tokens.borderRadiusMedium}))`\n },\n rootDisabled: {\n backgroundImage: 'none',\n color: `var(--ctrl-token-AccordionHeader-23, var(--semantic-token-AccordionHeader-24, ${tokens.colorNeutralForegroundDisabled}))`\n },\n rootInline: {\n display: 'inline-block'\n },\n button: {\n position: 'relative',\n width: '100%',\n ...shorthands.borderWidth('0'),\n padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,\n minHeight: '44px',\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box'\n },\n buttonSmall: {\n minHeight: '32px',\n fontSize: `var(--ctrl-token-AccordionHeader-25, var(--semantic-token-AccordionHeader-26, ${tokens.fontSizeBase200}))`\n },\n buttonLarge: {\n lineHeight: `var(--ctrl-token-AccordionHeader-27, var(--semantic-token-AccordionHeader-28, ${tokens.lineHeightBase400}))`,\n fontSize: `var(--ctrl-token-AccordionHeader-29, var(--semantic-token-AccordionHeader-30, ${tokens.fontSizeBase400}))`\n },\n buttonExtraLarge: {\n lineHeight: `var(--ctrl-token-AccordionHeader-31, var(--semantic-token-AccordionHeader-32, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--ctrl-token-AccordionHeader-33, var(--semantic-token-AccordionHeader-34, ${tokens.fontSizeBase500}))`\n },\n buttonInline: {\n display: 'inline-flex'\n },\n buttonExpandIconEndNoIcon: {\n paddingLeft: `var(--ctrl-token-AccordionHeader-35, var(--semantic-token-AccordionHeader-36, ${tokens.spacingHorizontalM}))`\n },\n buttonExpandIconEnd: {\n paddingRight: `var(--ctrl-token-AccordionHeader-37, var(--semantic-token-AccordionHeader-38, ${tokens.spacingHorizontalMNudge}))`\n },\n buttonDisabled: {\n cursor: 'not-allowed'\n },\n expandIcon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n lineHeight: `var(--ctrl-token-AccordionHeader-39, var(--semantic-token-AccordionHeader-40, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--ctrl-token-AccordionHeader-41, var(--semantic-token-AccordionHeader-42, ${tokens.fontSizeBase500}))`\n },\n expandIconStart: {\n paddingRight: `var(--ctrl-token-AccordionHeader-43, var(--semantic-token-AccordionHeader-44, ${tokens.spacingHorizontalS}))`\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: `var(--ctrl-token-AccordionHeader-45, var(--semantic-token-AccordionHeader-46, ${tokens.spacingHorizontalS}))`\n },\n icon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: `var(--ctrl-token-AccordionHeader-47, var(--semantic-token-AccordionHeader-48, ${tokens.spacingHorizontalS}))`,\n lineHeight: `var(--ctrl-token-AccordionHeader-49, var(--semantic-token-AccordionHeader-50, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--ctrl-token-AccordionHeader-51, var(--semantic-token-AccordionHeader-52, ${tokens.fontSizeBase500}))`\n }\n});\n/** Applies style classnames to slots */ export const useAccordionHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);\n state.button.className = mergeClasses(accordionHeaderClassNames.button, styles.resetButton, styles.button, styles.focusIndicator, state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon, state.expandIconPosition === 'end' && styles.buttonExpandIconEnd, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.size === 'large' && styles.buttonLarge, state.size === 'extra-large' && styles.buttonExtraLarge, state.disabled && styles.buttonDisabled, state.button.className);\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["accordionHeaderClassNames","useAccordionHeaderStyles_unstable","root","button","expandIcon","icon","useStyles","__styles","resetButton","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bv0vk6g","fsow6f","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rootDisabled","Bcmaq0h","rootInline","mc9l5x","qhf8xq","a9b677","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sshi5w","Bt984gj","Bceei9c","Bhrd7zp","buttonSmall","buttonLarge","buttonExtraLarge","buttonInline","buttonExpandIconEndNoIcon","buttonExpandIconEnd","buttonDisabled","Bqenvij","expandIconStart","expandIconEnd","Bh6795r","Bnnss6s","xawz","Brf1p80","d","p","f","i","m","state","styles","className","mergeClasses","inline","disabled","expandIconPosition","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useAccordionHeaderStyles.styles.js"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const accordionHeaderClassNames = {\n root: 'fui-AccordionHeader',\n button: 'fui-AccordionHeader__button',\n expandIcon: 'fui-AccordionHeader__expandIcon',\n icon: 'fui-AccordionHeader__icon'\n};\nconst useStyles = makeStyles({\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n overflow: 'visible',\n padding: '0',\n WebkitAppearance: 'button',\n textAlign: 'unset'\n },\n focusIndicator: createFocusOutlineStyle(),\n root: {\n color: `var(--17, var(--18, ${tokens.colorNeutralForeground1}))`,\n backgroundColor: `var(--19, var(--20, ${tokens.colorTransparentBackground}))`,\n margin: '0',\n borderRadius: `var(--21, var(--22, ${tokens.borderRadiusMedium}))`\n },\n rootDisabled: {\n backgroundImage: 'none',\n color: `var(--23, var(--24, ${tokens.colorNeutralForegroundDisabled}))`\n },\n rootInline: {\n display: 'inline-block'\n },\n button: {\n position: 'relative',\n width: '100%',\n ...shorthands.borderWidth('0'),\n padding: `0 ${tokens.spacingHorizontalM} 0 ${tokens.spacingHorizontalMNudge}`,\n minHeight: '44px',\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n ...typographyStyles.body1,\n boxSizing: 'border-box'\n },\n buttonSmall: {\n minHeight: '32px',\n fontSize: `var(--25, var(--26, ${tokens.fontSizeBase200}))`\n },\n buttonLarge: {\n lineHeight: `var(--27, var(--28, ${tokens.lineHeightBase400}))`,\n fontSize: `var(--29, var(--30, ${tokens.fontSizeBase400}))`\n },\n buttonExtraLarge: {\n lineHeight: `var(--31, var(--32, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--33, var(--34, ${tokens.fontSizeBase500}))`\n },\n buttonInline: {\n display: 'inline-flex'\n },\n buttonExpandIconEndNoIcon: {\n paddingLeft: `var(--35, var(--36, ${tokens.spacingHorizontalM}))`\n },\n buttonExpandIconEnd: {\n paddingRight: `var(--37, var(--38, ${tokens.spacingHorizontalMNudge}))`\n },\n buttonDisabled: {\n cursor: 'not-allowed'\n },\n expandIcon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n lineHeight: `var(--39, var(--40, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--41, var(--42, ${tokens.fontSizeBase500}))`\n },\n expandIconStart: {\n paddingRight: `var(--43, var(--44, ${tokens.spacingHorizontalS}))`\n },\n expandIconEnd: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n display: 'flex',\n justifyContent: 'flex-end',\n paddingLeft: `var(--45, var(--46, ${tokens.spacingHorizontalS}))`\n },\n icon: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n paddingRight: `var(--47, var(--48, ${tokens.spacingHorizontalS}))`,\n lineHeight: `var(--49, var(--50, ${tokens.lineHeightBase500}))`,\n fontSize: `var(--51, var(--52, ${tokens.fontSizeBase500}))`\n }\n});\n/** Applies style classnames to slots */ export const useAccordionHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(accordionHeaderClassNames.root, styles.root, state.inline && styles.rootInline, state.disabled && styles.rootDisabled, state.root.className);\n state.button.className = mergeClasses(accordionHeaderClassNames.button, styles.resetButton, styles.button, styles.focusIndicator, state.expandIconPosition === 'end' && !state.icon && styles.buttonExpandIconEndNoIcon, state.expandIconPosition === 'end' && styles.buttonExpandIconEnd, state.inline && styles.buttonInline, state.size === 'small' && styles.buttonSmall, state.size === 'large' && styles.buttonLarge, state.size === 'extra-large' && styles.buttonExtraLarge, state.disabled && styles.buttonDisabled, state.button.className);\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(accordionHeaderClassNames.expandIcon, styles.expandIcon, state.expandIconPosition === 'start' && styles.expandIconStart, state.expandIconPosition === 'end' && styles.expandIconEnd, state.expandIcon.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(accordionHeaderClassNames.icon, styles.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["accordionHeaderClassNames","useAccordionHeaderStyles_unstable","root","button","expandIcon","icon","useStyles","__styles","resetButton","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bv0vk6g","fsow6f","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rootDisabled","Bcmaq0h","rootInline","mc9l5x","qhf8xq","a9b677","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sshi5w","Bt984gj","Bceei9c","Bhrd7zp","buttonSmall","buttonLarge","buttonExtraLarge","buttonInline","buttonExpandIconEndNoIcon","buttonExpandIconEnd","buttonDisabled","Bqenvij","expandIconStart","expandIconEnd","Bh6795r","Bnnss6s","xawz","Brf1p80","d","p","f","i","m","state","styles","className","mergeClasses","inline","disabled","expandIconPosition","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js.map CHANGED Viewed

	@@ -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":""}

package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js CHANGED Viewed

@@ -12,7 +12,7 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
 const renderAccordionPanel_unstable = (state)=>{
     (0, _reactutilities.assertSlots)(state);
-    return state.open ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
-        children: state.root.children
-    }) : null;
+    return state.collapseMotion ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.collapseMotion, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
 };

package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js.map CHANGED Viewed

	@@ -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.~~open~~ ? <state.~~root>{~~state.root~~.children}~~</state.~~root>~~ : ~~null~~;\n};\n"],"names":["renderAccordionPanel_unstable","state","assertSlots","~~open~~","_jsx","root"~~,"children"~~],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,2BAAAA,EAAiCD;IACjC,OAAOA,MAAME,~~IAAI~~,GAAA,WAAA,~~GAAGC~~,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;~~kBAAEJ~~,MAAMI,IAAI,~~CAACC~~,~~QAAQ~~;~~SAAiB;AACvE~~"}
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"}

package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js CHANGED Viewed

@@ -12,6 +12,8 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttabster = require("@fluentui/react-tabster");
+const _reactmotion = require("@fluentui/react-motion");
+const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
 const _accordion = require("../../contexts/accordion");
 const _accordionItem = require("../../contexts/accordionItem");
 const useAccordionPanel_unstable = (props, ref)=>{
@@ -25,7 +27,12 @@ const useAccordionPanel_unstable = (props, ref)=>{
     return {
         open,
         components: {
-            root: 'div'
+            root: 'div',
+            // TODO: remove once React v18 slot API is modified
+            // This is a problem at the moment due to UnknownSlotProps assumption
+            // that `children` property is `ReactNode`, which in this case is not valid
+            // as PresenceComponentProps['children'] is `ReactElement`
+            collapseMotion: _reactmotioncomponentspreview.Collapse
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             // FIXME:
@@ -36,6 +43,13 @@ const useAccordionPanel_unstable = (props, ref)=>{
             ...navigation && focusableProps
         }), {
             elementType: 'div'
+        }),
+        collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
+            elementType: _reactmotioncomponentspreview.Collapse,
+            defaultProps: {
+                visible: open,
+                unmountOnExit: true
+            }
         })
     };
 };

package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map CHANGED Viewed

	@@ -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":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAYaA~~;;;eAAAA;;;;~~iEAZU~~;gCACwB;8BACV;~~2BACQ~~;+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;~~QACR~~;~~QACAA~~,~~MAAMC~~,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;~~YAC5Fd~~,KAAKA;YACL,GAAGD,KAAK;YACR,GAAIQ,cAAcJ,cAAc;QAClC,IACA;~~YAAEY~~,aAAa;QAAM;~~IAEzB~~;AACF"}
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 Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-accordion",
-  "version": "0.0.0-nightly-20240819-2110.1",
+  "version": "0.0.0-nightly-20240820-2210.1",
   "description": "Fluent UI accordion component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,20 +26,22 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20240819-2110.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2110.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240820-2210.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "0.0.0-nightly-20240819-2110.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20240819-2110.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20240820-2210.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2110.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240819-2110.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20240819-2110.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20240819-2110.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240819-2110.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-motion": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-motion-components-preview": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240820-2210.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },