npm - @fluentui/react-drawer - Versions diffs - 9.12.0 → 9.13.0 - Mend

@fluentui/react-drawer 9.12.0 → 9.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,24 +1,40 @@
 # Change Log - @fluentui/react-drawer
-This log was last generated on Thu, 23 Apr 2026 11:59:21 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:19 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.13.0)
+Tue, 26 May 2026 09:34:19 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.12.0..@fluentui/react-drawer_v9.13.0)
+### Minor changes
+- feat: expose inline drawer types and base hooks ([PR #36042](https://github.com/microsoft/fluentui/pull/36042) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-dialog to v9.18.1 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-motion to v9.16.0 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-portal to v9.8.13 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.5 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
 ## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.12.0)
-Thu, 23 Apr 2026 11:59:21 GMT
+Thu, 23 Apr 2026 14:21:03 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.11.6..@fluentui/react-drawer_v9.12.0)
 ### Minor changes
 - fix: update type for drawerMotion slot ([PR #36011](https://github.com/microsoft/fluentui/pull/36011) by robertpenner@microsoft.com)
-- Bump @fluentui/react-dialog to v9.18.0 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-motion to v9.15.0 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-portal to v9.8.12 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-dialog to v9.18.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-motion to v9.15.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-portal to v9.8.12 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 ## [9.11.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.11.6)

package/dist/index.d.ts CHANGED Viewed

@@ -222,6 +222,12 @@ export declare type DrawerState = ComponentState<DrawerSlots>;
  */
 export declare const InlineDrawer: ForwardRefComponent<InlineDrawerProps>;
+export declare type InlineDrawerBaseProps = ComponentProps<InlineDrawerBaseSlots> & Omit<DrawerBaseProps, 'size'>;
+declare type InlineDrawerBaseSlots = Omit<InlineDrawerSlots, 'surfaceMotion'>;
+export declare type InlineDrawerBaseState = Required<ComponentState<InlineDrawerBaseSlots> & Omit<DrawerBaseState, 'size' | 'motion'>>;
 export declare const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>>;
 /**
@@ -500,6 +506,8 @@ export declare const useDrawerStyles_unstable: (state: DrawerState) => DrawerSta
  */
 export declare const useInlineDrawer_unstable: (props: InlineDrawerProps, ref: React_2.Ref<HTMLElement>) => InlineDrawerState;
+export declare const useInlineDrawerBase_unstable: (props: InlineDrawerBaseProps, ref: React_2.Ref<HTMLElement>) => InlineDrawerBaseState;
 /**
  * Apply styling to the InlineDrawer slots based on the state
  */

package/lib/InlineDrawer.js CHANGED Viewed

	@@ -1 +1 @@
1	- export { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable } from './components/InlineDrawer/index';
1	+ export { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable, useInlineDrawerBase_unstable } from './components/InlineDrawer/index';

package/lib/InlineDrawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/InlineDrawer.ts"],"sourcesContent":["export type {\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './components/InlineDrawer/index';\nexport {\n InlineDrawer,\n inlineDrawerClassNames,\n renderInlineDrawer_unstable,\n useInlineDrawerStyles_unstable,\n useInlineDrawer_unstable,\n} from './components/InlineDrawer/index';\n"],"names":["InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable"],"mappings":"~~AAMA~~,SACEA,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,~~QACnB~~,kCAAkC"}
1	+ {"version":3,"sources":["../src/InlineDrawer.ts"],"sourcesContent":["export type {\n InlineDrawerBaseProps,\n InlineDrawerBaseState,\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './components/InlineDrawer/index';\nexport {\n InlineDrawer,\n inlineDrawerClassNames,\n renderInlineDrawer_unstable,\n useInlineDrawerStyles_unstable,\n useInlineDrawer_unstable,\n useInlineDrawerBase_unstable,\n} from './components/InlineDrawer/index';\n"],"names":["InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable","useInlineDrawerBase_unstable"],"mappings":"AAQA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,kCAAkC"}

package/lib/components/DrawerBody/useDrawerBody.js CHANGED Viewed

@@ -81,6 +81,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
         root: slot.always(getIntrinsicElementProps('div', {
             ref: mergedRef,
             ...props,
+            // eslint-disable-next-line react-hooks/refs
             onScroll: mergeCallbacks(props.onScroll, onScroll)
         }), {
             elementType: 'div'

package/lib/components/DrawerBody/useDrawerBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport type { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/*\n Get the current scroll state of the DrawerBody.\n \n @internal\n * @param element - HTMLElement to check scroll state of\n /\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/\n Create the state required to render DrawerBody.\n \n The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n \n @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement \| null>(null);\n const mergedRef = useMergedRefs(ref, scrollRef);\n\n const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelScrollAnimationFrame();\n setScrollAnimationFrame(updateScrollState);\n }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n // Update scroll state on children change\n useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n // Update scroll state on mount and when resize occurs\n useIsomorphicLayoutEffect(() => {\n if (!scrollRef.current \|\| !win?.ResizeObserver) {\n return;\n }\n\n const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n observer.observe(scrollRef.current);\n\n return () => {\n observer.disconnect();\n cancelResizeAnimationFrame();\n };\n }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n ref: mergedRef,\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,aAAa,EACbC,yBAAyB,EACzBC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,GAAGb;IAE3B,MAAMc,YAAYrB,MAAMsB,MAAM,CAAwB;IACtD,MAAMC,YAAYnB,cAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,GAAGtB;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,GAAGxB;IAE9D,MAAMyB,oBAAoB5B,MAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,MAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;IACzCvB,0BAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;IACtDvB,0BAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,gBAAAA,0BAAAA,IAAKe,cAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,KAAKqC,MAAM,CACfjC,yBAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;~~YACRgB~~,UAAU9B,eAAec,MAAMgB,QAAQ,EAAEA;QAC3C,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/DrawerBody/useDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport type { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/*\n Get the current scroll state of the DrawerBody.\n \n @internal\n * @param element - HTMLElement to check scroll state of\n /\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/\n Create the state required to render DrawerBody.\n \n The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n \n @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement \| null>(null);\n const mergedRef = useMergedRefs(ref, scrollRef);\n\n const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();\n const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelScrollAnimationFrame();\n setScrollAnimationFrame(updateScrollState);\n }, [cancelScrollAnimationFrame, setScrollAnimationFrame, updateScrollState]);\n\n // Update scroll state on children change\n useIsomorphicLayoutEffect(updateScrollState, [props.children, updateScrollState]);\n\n // Update scroll state on mount and when resize occurs\n useIsomorphicLayoutEffect(() => {\n if (!scrollRef.current \|\| !win?.ResizeObserver) {\n return;\n }\n\n const observer = new win.ResizeObserver(() => setResizeAnimationFrame(updateScrollState));\n\n observer.observe(scrollRef.current);\n\n return () => {\n observer.disconnect();\n cancelResizeAnimationFrame();\n };\n }, [setResizeAnimationFrame, cancelResizeAnimationFrame, updateScrollState, win]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n ref: mergedRef,\n ...props,\n // eslint-disable-next-line react-hooks/refs\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","useFluent_unstable","useFluent","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","targetDocument","win","defaultView","setScrollState","scrollRef","useRef","mergedRef","setScrollAnimationFrame","cancelScrollAnimationFrame","setResizeAnimationFrame","cancelResizeAnimationFrame","updateScrollState","useCallback","current","onScroll","children","ResizeObserver","observer","observe","disconnect","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,aAAa,EACbC,yBAAyB,EACzBC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAM,EAAEC,cAAc,EAAE,GAAGb;IAE3B,MAAMc,YAAYrB,MAAMsB,MAAM,CAAwB;IACtD,MAAMC,YAAYnB,cAAcY,KAAKK;IAErC,MAAM,CAACG,yBAAyBC,2BAA2B,GAAGtB;IAC9D,MAAM,CAACuB,yBAAyBC,2BAA2B,GAAGxB;IAE9D,MAAMyB,oBAAoB5B,MAAM6B,WAAW,CAAC;QAC1C,IAAI,CAACR,UAAUS,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeV,eAAeW,UAAUS,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAW/B,MAAM6B,WAAW,CAAC;QACjCJ;QACAD,wBAAwBI;IAC1B,GAAG;QAACH;QAA4BD;QAAyBI;KAAkB;IAE3E,yCAAyC;IACzCvB,0BAA0BuB,mBAAmB;QAACb,MAAMiB,QAAQ;QAAEJ;KAAkB;IAEhF,sDAAsD;IACtDvB,0BAA0B;QACxB,IAAI,CAACgB,UAAUS,OAAO,IAAI,EAACZ,gBAAAA,0BAAAA,IAAKe,cAAc,GAAE;YAC9C;QACF;QAEA,MAAMC,WAAW,IAAIhB,IAAIe,cAAc,CAAC,IAAMP,wBAAwBE;QAEtEM,SAASC,OAAO,CAACd,UAAUS,OAAO;QAElC,OAAO;YACLI,SAASE,UAAU;YACnBT;QACF;IACF,GAAG;QAACD;QAAyBC;QAA4BC;QAAmBV;KAAI;IAEhF,OAAO;QACLmB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMpC,KAAKqC,MAAM,CACfjC,yBAA0C,OAAO;YAC/CU,KAAKO;YACL,GAAGR,KAAK;YACR,4CAA4C;YAC5CgB,UAAU9B,eAAec,MAAMgB,QAAQ,EAAEA;QAC3C,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js CHANGED Viewed

@@ -16,6 +16,7 @@ export const useDrawerBodyStyles_unstable = state => {
   'use no memo';
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
   return state;
 };

package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n root: 'fui-DrawerBody'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n },\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n }\n});\n/\n Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,wSAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;~~EAC1BE~~,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n root: 'fui-DrawerBody'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n },\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n }\n});\n/\n Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,wSAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1B;EACAE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DrawerBody/useDrawerBodyStyles.styles.raw.js CHANGED Viewed

@@ -25,6 +25,7 @@ export const drawerBodyClassNames = {
  */ export const useDrawerBodyStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
     return state;
 };

package/lib/components/DrawerBody/useDrawerBodyStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DrawerBody/useDrawerBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\nexport const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {\n root: 'fui-DrawerBody',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n});\n\n/\n Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","padding","spacingHorizontalXXL","flex","alignSelf","position","zIndex","overflow","paddingBottom","paddingTop","useDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,SAAS,CAAC,EAAE,EAAEJ,OAAOK,oBAAoB,EAAE;IAC3CC,MAAM;IACNC,WAAW;IACXC,UAAU;IACVC,QAAQ;IACRC,UAAU;IAEV,eAAe;QACbC,eAAe,CAAC,KAAK,EAAEX,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC7D;IAEA,gBAAgB;QACdO,YAAY,CAAC,KAAK,EAAEZ,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC1D;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASZ;~~IAEfW~~,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,qBAAqBC,IAAI,EAAEa,QAAQD,MAAMZ,IAAI,CAACc,SAAS;IAE3F,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DrawerBody/useDrawerBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\nexport const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {\n root: 'fui-DrawerBody',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXL}`,\n flex: 1,\n alignSelf: 'stretch',\n position: 'relative',\n zIndex: 1,\n overflow: 'auto',\n\n ':last-child': {\n paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n\n ':first-child': {\n paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n },\n});\n\n/\n Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => {\n 'use no memo';\n\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","padding","spacingHorizontalXXL","flex","alignSelf","position","zIndex","overflow","paddingBottom","paddingTop","useDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,SAAS,CAAC,EAAE,EAAEJ,OAAOK,oBAAoB,EAAE;IAC3CC,MAAM;IACNC,WAAW;IACXC,UAAU;IACVC,QAAQ;IACRC,UAAU;IAEV,eAAe;QACbC,eAAe,CAAC,KAAK,EAAEX,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC7D;IAEA,gBAAgB;QACdO,YAAY,CAAC,KAAK,EAAEZ,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC1D;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASZ;IAEf,oDAAoD;IACpDW,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,qBAAqBC,IAAI,EAAEa,QAAQD,MAAMZ,IAAI,CAACc,SAAS;IAE3F,OAAOF;AACT,EAAE"}

package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js CHANGED Viewed

@@ -38,6 +38,7 @@ export const useDrawerFooterStyles_unstable = state => {
   const styles = useStyles();
   const rootStyles = useDrawerFooterStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
   return state;
 };

package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","Baz25je","Brfgrao","mdwyqc","Fbdkly","vz82u","cmx5o7","h7gv66","B8bqphf","wjn42g","Ftih45","Bciustq","separatorVisible","d","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0\n }\n },\n separatorVisible: {\n '::before': {\n opacity: 1\n }\n }\n});\n/\n Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'top'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,oSAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,KAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;~~EAC1CgB~~,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,KAAK,CACR,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","Baz25je","Brfgrao","mdwyqc","Fbdkly","vz82u","cmx5o7","h7gv66","B8bqphf","wjn42g","Ftih45","Bciustq","separatorVisible","d","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerFooterClassNames = {\n root: 'fui-DrawerFooter'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0\n }\n },\n separatorVisible: {\n '::before': {\n opacity: 1\n }\n }\n});\n/\n Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'top'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,oSAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,KAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1C;EACAgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,KAAK,CACR,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.raw.js CHANGED Viewed

@@ -38,6 +38,7 @@ const useDrawerFooterStyles = makeStyles({
     'use no memo';
     const styles = useStyles();
     const rootStyles = useDrawerFooterStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
         'middle',
         'top'

package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\nexport const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {\n root: 'fui-DrawerFooter',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0,\n },\n },\n\n separatorVisible: {\n '::before': {\n opacity: 1,\n },\n },\n});\n\n/\n Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => {\n 'use no memo';\n\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n\n state.root.className = mergeClasses(\n drawerFooterClassNames.root,\n styles,\n state.scrollState !== 'none' && rootStyles.separator,\n ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalL","spacingHorizontalXXL","spacingVerticalXXL","display","justifyContent","alignItems","columnGap","spacingHorizontalS","boxSizing","position","zIndex","useDrawerFooterStyles","separator","top","separatorVisible","opacity","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,OAAOQ,gBAAgB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,kBAAkB,EAAE;IACjGC,SAAS;IACTC,gBAAgB;IAChBC,YAAY;IACZC,WAAWd,OAAOe,kBAAkB;IACpCC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,YAAY;YACV,GAAGnB,qBAAqB;YACxBoB,KAAK;QACP;IACF;IAEAC,kBAAkB;QAChB,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;~~IAEnBM~~,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAM,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC5EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\nexport const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {\n root: 'fui-DrawerFooter',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerFooterStyles = makeStyles({\n separator: {\n '::before': {\n ...drawerSeparatorStyles,\n top: 0,\n },\n },\n\n separatorVisible: {\n '::before': {\n opacity: 1,\n },\n },\n});\n\n/\n Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => {\n 'use no memo';\n\n const styles = useStyles();\n const rootStyles = useDrawerFooterStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n drawerFooterClassNames.root,\n styles,\n state.scrollState !== 'none' && rootStyles.separator,\n ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalL","spacingHorizontalXXL","spacingVerticalXXL","display","justifyContent","alignItems","columnGap","spacingHorizontalS","boxSizing","position","zIndex","useDrawerFooterStyles","separator","top","separatorVisible","opacity","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,OAAOQ,gBAAgB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,kBAAkB,EAAE;IACjGC,SAAS;IACTC,gBAAgB;IAChBC,YAAY;IACZC,WAAWd,OAAOe,kBAAkB;IACpCC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,YAAY;YACV,GAAGnB,qBAAqB;YACxBoB,KAAK;QACP;IACF;IAEAC,kBAAkB;QAChB,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnB,oDAAoD;IACpDM,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAM,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC5EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}

package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js CHANGED Viewed

@@ -38,6 +38,7 @@ export const useDrawerHeaderStyles_unstable = state => {
   const styles = useStyles();
   const rootStyles = useDrawerHeaderStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
   return state;
 };

package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","Dlnsje","E3zdtr","B1piin3","Eqx8gd","Bp15pi3","Bjyk6c5","F2fol1","Ba2ppi3","B1dyfl9","Bsft5z2","By385i5","separatorVisible","d","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0\n }\n },\n separatorVisible: {\n '::after': {\n opacity: 1\n }\n }\n});\n/\n Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'bottom'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sRAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,OAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;~~EAC1CgB~~,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,QAAQ,CACX,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","Dlnsje","E3zdtr","B1piin3","Eqx8gd","Bp15pi3","Bjyk6c5","F2fol1","Ba2ppi3","B1dyfl9","Bsft5z2","By385i5","separatorVisible","d","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2\n});\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0\n }\n },\n separatorVisible: {\n '::after': {\n opacity: 1\n }\n }\n});\n/\n Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n 'middle',\n 'bottom'\n ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sRAWrB,CAAC;AACF,MAAMQ,qBAAqB,gBAAGP,QAAA;EAAAQ,SAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,OAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;EAC1C;EACAgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGzB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE,CAC3H,QAAQ,EACR,QAAQ,CACX,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EACnF,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js CHANGED Viewed

@@ -38,6 +38,7 @@ const useDrawerHeaderStyles = makeStyles({
     'use no memo';
     const styles = useStyles();
     const rootStyles = useDrawerHeaderStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
         'middle',
         'bottom'

package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\n\nexport const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {\n root: 'fui-DrawerHeader',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0,\n },\n },\n\n separatorVisible: {\n '::after': {\n opacity: 1,\n },\n },\n});\n\n/\n Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => {\n 'use no memo';\n\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n\n state.root.className = mergeClasses(\n drawerHeaderClassNames.root,\n styles,\n state.scrollState !== 'none' && rootStyles.separator,\n ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalXXL","spacingHorizontalXXL","spacingVerticalS","gap","spacingHorizontalS","alignSelf","display","flexDirection","boxSizing","position","zIndex","useDrawerHeaderStyles","separator","bottom","separatorVisible","opacity","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,OAAOQ,kBAAkB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,gBAAgB,EAAE;IACjGC,KAAKX,OAAOY,kBAAkB;IAC9BC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,WAAW;YACT,GAAGnB,qBAAqB;YACxBoB,QAAQ;QACV;IACF;IAEAC,kBAAkB;QAChB,WAAW;YACTC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;~~IAEnBM~~,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAS,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC/EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\n\nexport const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {\n root: 'fui-DrawerHeader',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n width: '100%',\n maxWidth: '100%',\n padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n gap: tokens.spacingHorizontalS,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n position: 'relative',\n zIndex: 2,\n});\n\nconst useDrawerHeaderStyles = makeStyles({\n separator: {\n '::after': {\n ...drawerSeparatorStyles,\n bottom: 0,\n },\n },\n\n separatorVisible: {\n '::after': {\n opacity: 1,\n },\n },\n});\n\n/\n Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => {\n 'use no memo';\n\n const styles = useStyles();\n const rootStyles = useDrawerHeaderStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n drawerHeaderClassNames.root,\n styles,\n state.scrollState !== 'none' && rootStyles.separator,\n ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalXXL","spacingHorizontalXXL","spacingVerticalS","gap","spacingHorizontalS","alignSelf","display","flexDirection","boxSizing","position","zIndex","useDrawerHeaderStyles","separator","bottom","separatorVisible","opacity","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,OAAOQ,kBAAkB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,gBAAgB,EAAE;IACjGC,KAAKX,OAAOY,kBAAkB;IAC9BC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,WAAW;YACT,GAAGnB,qBAAqB;YACxBoB,QAAQ;QACV;IACF;IAEAC,kBAAkB;QAChB,WAAW;YACTC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnB,oDAAoD;IACpDM,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAS,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC/EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js CHANGED Viewed

@@ -16,6 +16,7 @@ export const useDrawerHeaderNavigationStyles_unstable = state => {
   'use no memo';
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);
   return state;
 };

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} -1) calc(${tokens.spacingHorizontalL} * -1)`\n});\n/*\n Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,iHAErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;~~EAC1BE~~,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,gCAAgC,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} -1) calc(${tokens.spacingHorizontalL} * -1)`\n});\n/*\n Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,iHAErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1B;EACAE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,gCAAgC,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js CHANGED Viewed

@@ -14,6 +14,7 @@ export const drawerHeaderNavigationClassNames = {
  */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);
     return state;
 };

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\nexport const drawerHeaderNavigationClassNames: SlotClassNames<DrawerHeaderNavigationSlots> = {\n root: 'fui-DrawerHeaderNavigation',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} -1) calc(${tokens.spacingHorizontalL} * -1)`,\n});\n\n/*\n Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = (\n state: DrawerHeaderNavigationState,\n): DrawerHeaderNavigationState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","margin","spacingVerticalS","spacingHorizontalL","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,QAAQ,CAAC,KAAK,EAAEJ,OAAOK,gBAAgB,CAAC,YAAY,EAAEL,OAAOM,kBAAkB,CAAC,MAAM,CAAC;AACzF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA;IAEA,MAAMC,SAASN;~~IAEfK~~,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,iCAAiCC,IAAI,EAAEO,QAAQD,MAAMN,IAAI,CAACQ,SAAS;IAEvG,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\nexport const drawerHeaderNavigationClassNames: SlotClassNames<DrawerHeaderNavigationSlots> = {\n root: 'fui-DrawerHeaderNavigation',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n margin: `calc(${tokens.spacingVerticalS} -1) calc(${tokens.spacingHorizontalL} * -1)`,\n});\n\n/*\n Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = (\n state: DrawerHeaderNavigationState,\n): DrawerHeaderNavigationState => {\n 'use no memo';\n\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","margin","spacingVerticalS","spacingHorizontalL","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,QAAQ,CAAC,KAAK,EAAEJ,OAAOK,gBAAgB,CAAC,YAAY,EAAEL,OAAOM,kBAAkB,CAAC,MAAM,CAAC;AACzF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA;IAEA,MAAMC,SAASN;IAEf,oDAAoD;IACpDK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,iCAAiCC,IAAI,EAAEO,QAAQD,MAAMN,IAAI,CAACQ,SAAS;IAEvG,OAAOF;AACT,EAAE"}

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js CHANGED Viewed

@@ -49,11 +49,14 @@ export const useDrawerHeaderTitleStyles_unstable = state => {
     root,
     action
   });
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
   if (state.heading) {
+    // eslint-disable-next-line react-hooks/immutability
     state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);
   }
   if (state.action) {
+    // eslint-disable-next-line react-hooks/immutability
     state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
   }
   return state;

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS\n },\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} -1)`\n }\n});\n/*\n Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { heading: root = {}, action, // We should not use components to pass along the base element type of a slot\n // but there's no way to retrieve the element type of a slot from the slot definition\n // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n // TODO: create a method to retrieve the element type of a slot\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components } = state;\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action\n },\n root,\n action\n });\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n if (state.heading) {\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n if (state.action) {\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAEE,MAAM;IAAE;IACpC;IACA;IACA;IACA;IACAW;EAAW,CAAC,GAAGF,KAAK;EACpBd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;~~EACFS~~,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;~~IACfU~~,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;~~IACdS~~,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS\n },\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} -1)`\n }\n});\n/*\n Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { heading: root = {}, action, // We should not use components to pass along the base element type of a slot\n // but there's no way to retrieve the element type of a slot from the slot definition\n // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n // TODO: create a method to retrieve the element type of a slot\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components } = state;\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action\n },\n root,\n action\n });\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n if (state.heading) {\n // eslint-disable-next-line react-hooks/immutability\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAEE,MAAM;IAAE;IACpC;IACA;IACA;IACA;IACAW;EAAW,CAAC,GAAGF,KAAK;EACpBd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;EACF;EACAS,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;IACf;IACAU,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;IACd;IACAS,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js CHANGED Viewed

@@ -39,11 +39,14 @@ export const drawerHeaderTitleClassNames = {
         root,
         action
     });
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
     if (state.heading) {
+        // eslint-disable-next-line react-hooks/immutability
         state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);
     }
     if (state.action) {
+        // eslint-disable-next-line react-hooks/immutability
         state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
     }
     return state;

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\nexport const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots> = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n },\n\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} -1)`,\n },\n});\n\n/*\n Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleState): DrawerHeaderTitleState => {\n 'use no memo';\n\n const styles = useStyles();\n\n const {\n heading: root = {},\n action,\n // We should not use components to pass along the base element type of a slot\n // but there's no way to retrieve the element type of a slot from the slot definition\n // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n // TODO: create a method to retrieve the element type of a slot\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components,\n } = state;\n\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action,\n },\n root,\n action,\n });\n\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n\n if (state.heading) {\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n\n if (state.action) {\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","display","justifyContent","alignItems","columnGap","spacingHorizontalS","marginRight","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BK,MAAM;QACJI,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZC,WAAWT,OAAOU,kBAAkB;IACtC;IAEAN,QAAQ;QACNO,aAAa,CAAC,KAAK,EAAEX,OAAOU,kBAAkB,CAAC,MAAM,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,sCAAsC,CAACC;IAClD;IAEA,MAAMC,SAAST;IAEf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,EAClBE,MAAM,EACN,6EAA6E;IAC7E,qFAAqF;IACrF,mDAAmD;IACnD,+DAA+D;IAC/D,4DAA4D;IAC5DW,UAAU,EACX,GAAGF;IAEJd,8BAA8B;QAC5BgB,YAAY;YACVb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAM;QAC3B;QACAF;QACAE;IACF;~~IAEAS~~,MAAMX,IAAI,CAACc,SAAS,GAAGlB,aAAaG,4BAA4BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IAEvG,IAAIH,MAAMV,OAAO,EAAE;~~QACjBU~~,MAAMV,OAAO,CAACa,SAAS,GAAGlB,aAAaG,4BAA4BE,OAAO,EAAEU,MAAMV,OAAO,CAACa,SAAS;IACrG;IAEA,IAAIH,MAAMT,MAAM,EAAE;~~QAChBS~~,MAAMT,MAAM,CAACY,SAAS,GAAGlB,aAAaG,4BAA4BG,MAAM,EAAEU,OAAOV,MAAM,EAAES,MAAMT,MAAM,CAACY,SAAS;IACjH;IAEA,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\nexport const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots> = {\n root: 'fui-DrawerHeaderTitle',\n heading: 'fui-DrawerHeaderTitle__heading',\n action: 'fui-DrawerHeaderTitle__action',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalS,\n },\n\n action: {\n marginRight: `calc(${tokens.spacingHorizontalS} -1)`,\n },\n});\n\n/*\n Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleState): DrawerHeaderTitleState => {\n 'use no memo';\n\n const styles = useStyles();\n\n const {\n heading: root = {},\n action,\n // We should not use components to pass along the base element type of a slot\n // but there's no way to retrieve the element type of a slot from the slot definition\n // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n // TODO: create a method to retrieve the element type of a slot\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n components,\n } = state;\n\n useDialogTitleStyles_unstable({\n components: {\n root: components.heading,\n action: components.action,\n },\n root,\n action,\n });\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n\n if (state.heading) {\n // eslint-disable-next-line react-hooks/immutability\n state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n }\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","display","justifyContent","alignItems","columnGap","spacingHorizontalS","marginRight","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BK,MAAM;QACJI,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZC,WAAWT,OAAOU,kBAAkB;IACtC;IAEAN,QAAQ;QACNO,aAAa,CAAC,KAAK,EAAEX,OAAOU,kBAAkB,CAAC,MAAM,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,sCAAsC,CAACC;IAClD;IAEA,MAAMC,SAAST;IAEf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,EAClBE,MAAM,EACN,6EAA6E;IAC7E,qFAAqF;IACrF,mDAAmD;IACnD,+DAA+D;IAC/D,4DAA4D;IAC5DW,UAAU,EACX,GAAGF;IAEJd,8BAA8B;QAC5BgB,YAAY;YACVb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAM;QAC3B;QACAF;QACAE;IACF;IAEA,oDAAoD;IACpDS,MAAMX,IAAI,CAACc,SAAS,GAAGlB,aAAaG,4BAA4BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IAEvG,IAAIH,MAAMV,OAAO,EAAE;QACjB,oDAAoD;QACpDU,MAAMV,OAAO,CAACa,SAAS,GAAGlB,aAAaG,4BAA4BE,OAAO,EAAEU,MAAMV,OAAO,CAACa,SAAS;IACrG;IAEA,IAAIH,MAAMT,MAAM,EAAE;QAChB,oDAAoD;QACpDS,MAAMT,MAAM,CAACY,SAAS,GAAGlB,aAAaG,4BAA4BG,MAAM,EAAEU,OAAOV,MAAM,EAAES,MAAMT,MAAM,CAACY,SAAS;IACjH;IAEA,OAAOH;AACT,EAAE"}

package/lib/components/InlineDrawer/InlineDrawer.types.js CHANGED Viewed

@@ -1,3 +1 @@
-/**
- * State used in rendering InlineDrawer
- */ export { };
+export { };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.types.ts"],"sourcesContent":["import type { PresenceDirection, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;\n\nexport type InlineDrawerSlots = {\n root: Slot<'div', 'aside'>;\n surfaceMotion?: Slot<SurfaceMotionSlotProps>;\n};\n\n/*\n InlineDrawer Props\n /\nexport type InlineDrawerProps = ComponentProps<InlineDrawerSlots> &\n DrawerBaseProps & {\n /\n Whether the drawer has a separator line.\n \n @default false\n /\n separator?: boolean;\n };\n\n/\n State used in rendering InlineDrawer\n */\nexport type InlineDrawerState = Required<\n ComponentState<NonNullable<InlineDrawerSlots>> &\n DrawerBaseState &\n Pick<InlineDrawerProps, 'separator'> & {\n animationDirection: PresenceDirection;\n }\n>;\n"],"names":[],"mappings":"~~AA0BA;;CAEC~~,~~GACD,WAME~~"}
1	+ {"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.types.ts"],"sourcesContent":["import type { PresenceDirection, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;\n\nexport type InlineDrawerSlots = {\n root: Slot<'div', 'aside'>;\n surfaceMotion?: Slot<SurfaceMotionSlotProps>;\n};\n\nexport type InlineDrawerBaseSlots = Omit<InlineDrawerSlots, 'surfaceMotion'>;\n\n/*\n InlineDrawer Props\n /\nexport type InlineDrawerProps = ComponentProps<InlineDrawerSlots> &\n DrawerBaseProps & {\n /\n Whether the drawer has a separator line.\n \n @default false\n /\n separator?: boolean;\n };\n\nexport type InlineDrawerBaseProps = ComponentProps<InlineDrawerBaseSlots> & Omit<DrawerBaseProps, 'size'>;\n\n/\n State used in rendering InlineDrawer\n */\nexport type InlineDrawerState = Required<\n ComponentState<NonNullable<InlineDrawerSlots>> &\n DrawerBaseState &\n Pick<InlineDrawerProps, 'separator'> & {\n animationDirection: PresenceDirection;\n }\n>;\n\nexport type InlineDrawerBaseState = Required<\n ComponentState<InlineDrawerBaseSlots> & Omit<DrawerBaseState, 'size' \| 'motion'>\n>;\n"],"names":[],"mappings":"AAyCA,WAEE"}

package/lib/components/InlineDrawer/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
 export { InlineDrawer } from './InlineDrawer';
 export { renderInlineDrawer_unstable } from './renderInlineDrawer';
-export { useInlineDrawer_unstable } from './useInlineDrawer';
+export { useInlineDrawer_unstable, useInlineDrawerBase_unstable } from './useInlineDrawer';
 export { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';

package/lib/components/InlineDrawer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/InlineDrawer/index.ts"],"sourcesContent":["export { InlineDrawer } from './InlineDrawer';\nexport type {\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\nexport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nexport { useInlineDrawer_unstable } from './useInlineDrawer';\nexport { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n"],"names":["InlineDrawer","renderInlineDrawer_unstable","useInlineDrawer_unstable","inlineDrawerClassNames","useInlineDrawerStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;~~AAO9C~~,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;~~AAC7D~~,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
1	+ {"version":3,"sources":["../src/components/InlineDrawer/index.ts"],"sourcesContent":["export { InlineDrawer } from './InlineDrawer';\nexport type {\n InlineDrawerProps,\n InlineDrawerSlots,\n InlineDrawerState,\n InlineDrawerBaseProps,\n InlineDrawerBaseState,\n SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\nexport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nexport { useInlineDrawer_unstable, useInlineDrawerBase_unstable } from './useInlineDrawer';\nexport { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n"],"names":["InlineDrawer","renderInlineDrawer_unstable","useInlineDrawer_unstable","useInlineDrawerBase_unstable","inlineDrawerClassNames","useInlineDrawerStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAS9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

package/lib/components/InlineDrawer/renderInlineDrawer.js CHANGED Viewed

@@ -7,8 +7,8 @@ import { DrawerProvider } from '../../contexts/drawerContext';
     assertSlots(state);
     return /*#__PURE__*/ _jsx(DrawerProvider, {
         value: contextValue,
-        children: /*#__PURE__*/ _jsx(state.surfaceMotion, {
+        children: state.surfaceMotion ? /*#__PURE__*/ _jsx(state.surfaceMotion, {
             children: /*#__PURE__*/ _jsx(state.root, {})
-        })
+        }) : /*#__PURE__*/ _jsx(state.root, {})
     });
 };

package/lib/components/InlineDrawer/renderInlineDrawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DrawerContextValue } from '../../contexts/drawerContext';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/\n Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<InlineDrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.surfaceMotion>\n <state.root />\n </state.surfaceMotion>\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,cAAc,QAAQ,+BAA+B;AAI9D;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAeI,OAAOD;~~kBACrB~~,~~cAAA~~,~~KAACD~~,MAAMG,aAAa;sBAClB,cAAA,KAACH,MAAMI,IAAI~~;;;~~AAInB,EAAE"}
1	+ {"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DrawerContextValue } from '../../contexts/drawerContext';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/\n Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue): JSXElement => {\n assertSlots<InlineDrawerSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n {state.surfaceMotion ? (\n <state.surfaceMotion>\n <state.root />\n </state.surfaceMotion>\n ) : (\n <state.root />\n )}\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,cAAc,QAAQ,+BAA+B;AAI9D;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAeI,OAAOD;kBACpBD,MAAMG,aAAa,iBAClB,KAACH,MAAMG,aAAa;sBAClB,cAAA,KAACH,MAAMI,IAAI;2BAGb,KAACJ,MAAMI,IAAI;;AAInB,EAAE"}

package/lib/components/InlineDrawer/useInlineDrawer.js CHANGED Viewed

@@ -21,29 +21,22 @@ const STATIC_MOTION = {
  * @param ref - reference to root HTMLElement of InlineDrawer
  */ export const useInlineDrawer_unstable = (props, ref)=>{
     const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);
-    const { separator = false, surfaceMotion } = props;
+    const { separator = false, surfaceMotion, ...baseProps } = props;
     const { dir } = useFluent();
     const [animationDirection, setAnimationDirection] = React.useState(open ? 'enter' : 'exit');
+    const baseState = useInlineDrawerBase_unstable(baseProps, ref);
     return {
+        ...baseState,
         components: {
-            root: 'div',
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...baseState.components,
             // casting from internal type that has required properties
             // to external type that only has optional properties
             // converting to unknown first as both Function component signatures are not compatible
             surfaceMotion: InlineDrawerMotion
         },
-        root: slot.always(getIntrinsicElementProps('div', {
-            ...props,
-            ref,
-            'aria-hidden': !unmountOnClose && !open ? true : undefined
-        }), {
-            elementType: 'div'
-        }),
-        open,
-        position,
         size,
         separator,
-        unmountOnClose,
         animationDirection,
         surfaceMotion: presenceMotionSlot(surfaceMotion, {
             elementType: InlineDrawerMotion,
@@ -66,3 +59,21 @@ const STATIC_MOTION = {
         motion: STATIC_MOTION
     };
 };
+export const useInlineDrawerBase_unstable = (props, ref)=>{
+    const { position, open, unmountOnClose } = useDrawerDefaultProps(props);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ...props,
+            ref,
+            'aria-hidden': !unmountOnClose && !open ? true : undefined
+        }), {
+            elementType: 'div'
+        }),
+        open,
+        position,
+        unmountOnClose
+    };
+};

package/lib/components/InlineDrawer/useInlineDrawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { PresenceDirection } from '@fluentui/react-motion';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/*\n Create the state required to render InlineDrawer.\n \n The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n \n @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion } = props;\n const { dir } = useFluent();\n const [animationDirection, setAnimationDirection] = React.useState<PresenceDirection>(open ? 'enter' : 'exit');\n\n return {\n components: {\n ~~root:~~ ~~'div'~~,\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n 'aria-hidden': !unmountOnClose && !open ? true : undefined,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n size,\n separator,\n ~~unmountOnClose,\n~~ animationDirection,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n dir,\n visible: open,\n appear: unmountOnClose,\n unmountOnExit: unmountOnClose,\n onMotionFinish: (_, { direction }) => setAnimationDirection(direction),\n onMotionStart: (_, { direction }) => {\n if (direction === 'enter') {\n setAnimationDirection('enter');\n }\n },\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n } satisfies InlineDrawerState;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","unmountOnClose","separator","surfaceMotion","dir","animationDirection","setAnimationDirection","useState","~~components~~","~~root~~","~~always~~","~~undefined","~~elementType","defaultProps","visible","appear","unmountOnExit","onMotionFinish","_","direction","onMotionStart","motion"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;~~AAG3E~~,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGZ,sBAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,~~GAAGN~~;~~IAC7C~~,MAAM,~~EAAEO~~,GAAG,EAAE,~~GAAGjB~~;IAChB,MAAM,~~CAACkB~~,oBAAoBC,sBAAsB,~~GAAGxB~~,~~MAAMyB~~,QAAQ,~~CAAoBP~~,OAAO,UAAU;IAEvG,~~OAAO;QACLQ~~,~~YAAY;YACVC~~,~~MAAM~~;~~YACN~~,~~0DAA0D~~;~~YAC1D~~,~~qDAAqD~~;~~YACrD~~,~~uFAAuF~~;~~YACvFN~~,~~eAAef~~;~~QACjB;QAEAqB~~,~~MAAMxB~~,~~KAAKyB~~,~~MAAM,CACf1B,yBAAyB,OAAO~~;~~YAC9B~~,~~GAAGa,KAAK~~;~~YACRJ;YACA~~,~~eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOW~~;~~QACnD~~,~~IACA~~;~~YAAEC~~,~~aAAa~~;~~QAAM~~;~~QAGvBZ~~;~~QACAD;QACAD;~~QACAI;~~QACAD;~~QACAI;~~QACAF~~,eAAepB,mBAAuCoB,eAAe;YACnES,aAAaxB;YACbyB,cAAc;gBACZd;gBACAD;~~gBACAM~~;~~gBACAU~~,SAASd;gBACTe,QAAQd;gBACRe,eAAef;gBACfgB,gBAAgB,CAACC,GAAG,EAAEC,SAAS,EAAE,~~GAAKb~~,~~sBAAsBa~~;gBAC5DC,eAAe,CAACF,GAAG,EAAEC,SAAS,EAAE;oBAC9B,IAAIA,cAAc,SAAS;~~wBACzBb~~,sBAAsB;oBACxB;gBACF;YACF;QACF;QAEA,mBAAmB;~~QACnBe~~,QAAQ/B;IACV;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { PresenceDirection } from '@fluentui/react-motion';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type {\n InlineDrawerBaseProps,\n InlineDrawerBaseState,\n InlineDrawerProps,\n InlineDrawerState,\n SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/*\n Create the state required to render InlineDrawer.\n \n The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n \n @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion, ...baseProps } = props;\n const { dir } = useFluent();\n const [animationDirection, setAnimationDirection] = React.useState<PresenceDirection>(open ? 'enter' : 'exit');\n\n const baseState = useInlineDrawerBase_unstable(baseProps, ref);\n\n return {\n ...baseState,\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...baseState.components,\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n size,\n separator,\n animationDirection,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n dir,\n visible: open,\n appear: unmountOnClose,\n unmountOnExit: unmountOnClose,\n onMotionFinish: (_, { direction }) => setAnimationDirection(direction),\n onMotionStart: (_, { direction }) => {\n if (direction === 'enter') {\n setAnimationDirection('enter');\n }\n },\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n } satisfies InlineDrawerState;\n};\n\nexport const useInlineDrawerBase_unstable = (\n props: InlineDrawerBaseProps,\n ref: React.Ref<HTMLElement>,\n): InlineDrawerBaseState => {\n const { position, open, unmountOnClose } = useDrawerDefaultProps(props);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n 'aria-hidden': !unmountOnClose && !open ? true : undefined,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n unmountOnClose,\n } satisfies InlineDrawerBaseState;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","unmountOnClose","separator","surfaceMotion","baseProps","dir","animationDirection","setAnimationDirection","useState","baseState","useInlineDrawerBase_unstable","components","elementType","defaultProps","visible","appear","unmountOnExit","onMotionFinish","_","direction","onMotionStart","motion","root","always","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAS3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGZ,sBAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGC,WAAW,GAAGP;IAC3D,MAAM,EAAEQ,GAAG,EAAE,GAAGlB;IAChB,MAAM,CAACmB,oBAAoBC,sBAAsB,GAAGzB,MAAM0B,QAAQ,CAAoBR,OAAO,UAAU;IAEvG,MAAMS,YAAYC,6BAA6BN,WAAWX;IAE1D,OAAO;QACL,GAAGgB,SAAS;QACZE,YAAY;YACV,4DAA4D;YAC5D,GAAGF,UAAUE,UAAU;YACvB,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFR,eAAef;QACjB;QACAU;QACAI;QACAI;QACAH,eAAepB,mBAAuCoB,eAAe;YACnES,aAAaxB;YACbyB,cAAc;gBACZd;gBACAD;gBACAO;gBACAS,SAASd;gBACTe,QAAQd;gBACRe,eAAef;gBACfgB,gBAAgB,CAACC,GAAG,EAAEC,SAAS,EAAE,GAAKZ,sBAAsBY;gBAC5DC,eAAe,CAACF,GAAG,EAAEC,SAAS,EAAE;oBAC9B,IAAIA,cAAc,SAAS;wBACzBZ,sBAAsB;oBACxB;gBACF;YACF;QACF;QAEA,mBAAmB;QACnBc,QAAQ/B;IACV;AACF,EAAE;AAEF,OAAO,MAAMoB,+BAA+B,CAC1Cb,OACAJ;IAEA,MAAM,EAAEM,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGZ,sBAAsBQ;IAEjE,OAAO;QACLc,YAAY;YACVW,MAAM;QACR;QAEAA,MAAMrC,KAAKsC,MAAM,CACfvC,yBAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOwB;QACnD,IACA;YAAEZ,aAAa;QAAM;QAGvBZ;QACAD;QACAE;IACF;AACF,EAAE"}

package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.js CHANGED Viewed

@@ -151,6 +151,7 @@ export const useInlineDrawerStyles_unstable = state => {
   const resetStyles = useDrawerResetStyles();
   const baseClassNames = useDrawerBaseClassNames(state);
   const rootStyles = useDrawerRootStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
   return state;
 };