@fluentui/react-drawer 9.1.12 → 9.2.1

package/lib/contexts/drawerContext.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+const defaultContextValue = {
+    scrollState: 'none',
+    setScrollState: ()=>({})
+};
+export const drawerContext = React.createContext(undefined);
+export const DrawerProvider = drawerContext.Provider;
+export const useDrawerContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(drawerContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultContextValue;
+};
+export const useDrawerContextValue = ()=>{
+    const [scrollState, setScrollState] = React.useState('none');
+    return {
+        setScrollState,
+        scrollState
+    };
+};

package/lib/contexts/drawerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["drawerContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { DrawerScrollState } from '../shared/DrawerBase.types';\n\nexport type DrawerContextValue = {\n  scrollState: DrawerScrollState;\n  setScrollState: (scrollState: DrawerScrollState) => void;\n};\n\nconst defaultContextValue: DrawerContextValue = {\n  scrollState: 'none',\n  setScrollState: () => ({}),\n};\n\nexport const drawerContext = React.createContext<DrawerContextValue | undefined>(undefined);\nexport const DrawerProvider = drawerContext.Provider;\nexport const useDrawerContext_unstable = () => React.useContext(drawerContext) ?? defaultContextValue;\n\nexport const useDrawerContextValue = (): DrawerContextValue => {\n  const [scrollState, setScrollState] = React.useState<DrawerScrollState>('none');\n\n  return {\n    setScrollState,\n    scrollState,\n  };\n};\n"],"names":["React","defaultContextValue","scrollState","setScrollState","drawerContext","createContext","undefined","DrawerProvider","Provider","useDrawerContext_unstable","useContext","useDrawerContextValue","useState"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,MAAMC,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,CAAC,CAAA;AAC1B;AAEA,OAAO,MAAMC,gBAAgBJ,MAAMK,aAAa,CAAiCC,WAAW;AAC5F,OAAO,MAAMC,iBAAiBH,cAAcI,QAAQ,CAAC;AACrD,OAAO,MAAMC,4BAA4B;QAAMT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACN,4BAAjBJ,+BAAAA,oBAAmCC;AAAkB,EAAE;AAEtG,OAAO,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,MAAMY,QAAQ,CAAoB;IAExE,OAAO;QACLT;QACAD;IACF;AACF,EAAE"}

package/lib/contexts/index.js

@@ -0,0 +1 @@
+export * from './drawerContext';

package/lib/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './drawerContext';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB"}

package/lib/shared/DrawerBase.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["import * as React from 'react';\n\ntype MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n\ntype MotionState<Element extends HTMLElement = HTMLElement> = {\n  /**\n   * Ref to the element.\n   */\n  ref: React.Ref<Element>;\n\n  /**\n   * Current state of the element.\n   *\n   * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.\n   * - `entering` - The element is performing enter animation.\n   * - `entered` - The element has finished enter animation.\n   * - `idle` - The element is currently not animating, but rendered on screen.\n   * - `exiting` - The element is performing exit animation.\n   * - `exited` - The element has finished exit animation.\n   */\n  type: MotionType;\n\n  /**\n   * Indicates whether the component can be rendered.\n   * Useful to render the element before animating it or to remove it from the DOM after exit animation.\n   */\n  canRender: boolean;\n\n  /**\n   * Indicates whether the component is ready to receive a CSS transition className.\n   * Useful to apply CSS transitions when the element is mounted and ready to be animated.\n   */\n  active: boolean;\n};\n\nexport type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * Note: 'bottom' does not supports size, but it supports customized height.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end' | 'bottom';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  motion: MotionState<HTMLDivElement>;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["import * as React from 'react';\n\ntype MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n\ntype MotionState<Element extends HTMLElement = HTMLElement> = {\n  /**\n   * Ref to the element.\n   */\n  ref: React.Ref<Element>;\n\n  /**\n   * Current state of the element.\n   *\n   * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.\n   * - `entering` - The element is performing enter animation.\n   * - `entered` - The element has finished enter animation.\n   * - `idle` - The element is currently not animating, but rendered on screen.\n   * - `exiting` - The element is performing exit animation.\n   * - `exited` - The element has finished exit animation.\n   */\n  type: MotionType;\n\n  /**\n   * Indicates whether the component can be rendered.\n   * Useful to render the element before animating it or to remove it from the DOM after exit animation.\n   */\n  canRender: boolean;\n\n  /**\n   * Indicates whether the component is ready to receive a CSS transition className.\n   * Useful to apply CSS transitions when the element is mounted and ready to be animated.\n   */\n  active: boolean;\n};\n\nexport type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * Note: 'bottom' does not supports size, but it supports customized height.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end' | 'bottom';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  motion: MotionState<HTMLDivElement>;\n};\n\nexport type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/shared/drawerSeparatorStyles.js

@@ -0,0 +1,13 @@
+import { tokens } from '@fluentui/react-theme';
+export const drawerSeparatorStyles = {
+    height: '1px',
+    position: 'absolute',
+    right: 0,
+    left: 0,
+    opacity: 0,
+    backgroundColor: tokens.colorNeutralStroke1,
+    transitionDuration: tokens.durationNormal,
+    transitionProperty: 'opacity',
+    transitionTimingFunction: tokens.curveEasyEase,
+    content: '""'
+};

package/lib/shared/drawerSeparatorStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["drawerSeparatorStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { GriffelStyle } from '@griffel/react';\n\nexport const drawerSeparatorStyles: GriffelStyle = {\n  height: '1px',\n  position: 'absolute',\n  right: 0,\n  left: 0,\n  opacity: 0,\n  backgroundColor: tokens.colorNeutralStroke1,\n  transitionDuration: tokens.durationNormal,\n  transitionProperty: 'opacity',\n  transitionTimingFunction: tokens.curveEasyEase,\n  content: '\"\"',\n};\n"],"names":["tokens","drawerSeparatorStyles","height","position","right","left","opacity","backgroundColor","colorNeutralStroke1","transitionDuration","durationNormal","transitionProperty","transitionTimingFunction","curveEasyEase","content"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,wBAAsC;IACjDC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,iBAAiBP,OAAOQ,mBAAmB;IAC3CC,oBAAoBT,OAAOU,cAAc;IACzCC,oBAAoB;IACpBC,0BAA0BZ,OAAOa,aAAa;IAC9CC,SAAS;AACX,EAAE"}

package/lib-commonjs/components/Drawer/Drawer.js

@@ -11,13 +11,15 @@ Object.defineProperty(exports, "Drawer", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _drawerContext = require("../../contexts/drawerContext");
 const _useDrawer = require("./useDrawer");
 const _renderDrawer = require("./renderDrawer");
 const _useDrawerStylesstyles = require("./useDrawerStyles.styles");
 const Drawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useDrawer.useDrawer_unstable)(props, ref);
+    const contextValue = (0, _drawerContext.useDrawerContextValue)();
     (0, _useDrawerStylesstyles.useDrawerStyles_unstable)(state);
     (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerStyles_unstable')(state);
-    return (0, _renderDrawer.renderDrawer_unstable)(state);
+    return (0, _renderDrawer.renderDrawer_unstable)(state, contextValue);
 });
 Drawer.displayName = 'Drawer';

package/lib-commonjs/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Drawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useDrawer_unstable } from './useDrawer';\nimport { renderDrawer_unstable } from './renderDrawer';\nimport { useDrawerStyles_unstable } from './useDrawerStyles.styles';\n/**\n * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const Drawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawer_unstable(props, ref);\n    useDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);\n    return renderDrawer_unstable(state);\n});\nDrawer.displayName = 'Drawer';\n"],"names":["Drawer","React","forwardRef","props","ref","state","useDrawer_unstable","useDrawerStyles_unstable","useCustomStyleHook_unstable","renderDrawer_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;qCACqB;2BACT;8BACG;uCACG;AAG9B,MAAMA,SAAS,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7D,MAAMC,QAAQC,IAAAA,6BAAkB,EAACH,OAAOC;IACxCG,IAAAA,+CAAwB,EAACF;IACzBG,IAAAA,gDAA2B,EAAC,4BAA4BH;IACxD,OAAOI,IAAAA,mCAAqB,EAACJ;AACjC;AACAL,OAAOU,WAAW,GAAG"}
+{"version":3,"sources":["Drawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\nimport { useDrawer_unstable } from './useDrawer';\nimport { renderDrawer_unstable } from './renderDrawer';\nimport { useDrawerStyles_unstable } from './useDrawerStyles.styles';\n/**\n * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const Drawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawer_unstable(props, ref);\n    const contextValue = useDrawerContextValue();\n    useDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);\n    return renderDrawer_unstable(state, contextValue);\n});\nDrawer.displayName = 'Drawer';\n"],"names":["Drawer","React","forwardRef","props","ref","state","useDrawer_unstable","contextValue","useDrawerContextValue","useDrawerStyles_unstable","useCustomStyleHook_unstable","renderDrawer_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;qCACqB;+BACN;2BACH;8BACG;uCACG;AAG9B,MAAMA,SAAS,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7D,MAAMC,QAAQC,IAAAA,6BAAkB,EAACH,OAAOC;IACxC,MAAMG,eAAeC,IAAAA,oCAAqB;IAC1CC,IAAAA,+CAAwB,EAACJ;IACzBK,IAAAA,gDAA2B,EAAC,4BAA4BL;IACxD,OAAOM,IAAAA,mCAAqB,EAACN,OAAOE;AACxC;AACAP,OAAOY,WAAW,GAAG"}

package/lib-commonjs/components/Drawer/renderDrawer.js

@@ -10,7 +10,11 @@ Object.defineProperty(exports, "renderDrawer_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const renderDrawer_unstable = (state)=>{
+const _drawerContext = require("../../contexts/drawerContext");
+const renderDrawer_unstable = (state, contextValue)=>{
     (0, _reactutilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    });
 };

package/lib-commonjs/components/Drawer/renderDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawer.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Drawer\n */ export const renderDrawer_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {});\n};\n"],"names":["renderDrawer_unstable","state","assertSlots","_jsx","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,MAAMA,wBAAwB,CAACC;IACtCC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,eAAI,EAACF,MAAMG,IAAI,EAAE,CAAC;AAC3C"}
+{"version":3,"sources":["renderDrawer.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n/**\n * Render the final JSX of Drawer\n */ export const renderDrawer_unstable = (state, contextValue)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(DrawerProvider, {\n        value: contextValue,\n        children: /*#__PURE__*/ _jsx(state.root, {})\n    });\n};\n"],"names":["renderDrawer_unstable","state","contextValue","assertSlots","_jsx","DrawerProvider","value","children","root"],"mappings":";;;;+BAKiBA;;;eAAAA;;;4BALa;gCACF;+BACG;AAGpB,MAAMA,wBAAwB,CAACC,OAAOC;IAC7CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,6BAAc,EAAE;QACtCC,OAAOJ;QACPK,UAAU,WAAW,GAAGH,IAAAA,eAAI,EAACH,MAAMO,IAAI,EAAE,CAAC;IAC9C;AACJ"}

package/lib-commonjs/components/DrawerBody/useDrawerBody.js

@@ -11,7 +11,52 @@ Object.defineProperty(exports, "useDrawerBody_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
+const _drawerContext = require("../../contexts/drawerContext");
+/**
+ * @internal
+ *
+ * Get the current scroll state of the DrawerBody.
+ *
+ * @param param0 - HTMLElement to check scroll state of
+ */ const getScrollState = ({ scrollTop, scrollHeight, clientHeight })=>{
+    if (scrollHeight <= clientHeight) {
+        return 'none';
+    }
+    if (scrollTop === 0) {
+        return 'top';
+    }
+    if (scrollTop + clientHeight === scrollHeight) {
+        return 'bottom';
+    }
+    return 'middle';
+};
 const useDrawerBody_unstable = (props, ref)=>{
+    const { setScrollState } = (0, _drawerContext.useDrawerContext_unstable)();
+    const scrollRef = _react.useRef(null);
+    const [setAnimationFrame, cancelAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
+    const onScroll = _react.useCallback(()=>{
+        cancelAnimationFrame();
+        setAnimationFrame(()=>{
+            if (!scrollRef.current) {
+                return;
+            }
+            setScrollState(getScrollState(scrollRef.current));
+        });
+    }, [
+        cancelAnimationFrame,
+        setAnimationFrame,
+        setScrollState
+    ]);
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (!scrollRef.current) {
+            return;
+        }
+        setScrollState(getScrollState(scrollRef.current));
+        return ()=>cancelAnimationFrame();
+    }, [
+        cancelAnimationFrame,
+        setScrollState
+    ]);
     return {
         components: {
             root: 'div'
@@ -20,8 +65,9 @@ const useDrawerBody_unstable = (props, ref)=>{
             // FIXME:
             // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: ref,
-            ...props
+            ref: (0, _reactutilities.useMergedRefs)(ref, scrollRef),
+            ...props,
+            onScroll: (0, _reactutilities.mergeCallbacks)(props.onScroll, onScroll)
         }), {
             elementType: 'div'
         })

package/lib-commonjs/components/DrawerBody/useDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\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 */ export const useDrawerBody_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useDrawerBody_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FL,KAAKA;YACL,GAAGD,KAAK;QACZ,IAAI;YACAO,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot, useAnimationFrame, useMergedRefs, useIsomorphicLayoutEffect, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n/**\n * @internal\n *\n * Get the current scroll state of the DrawerBody.\n *\n * @param param0 - HTMLElement to check scroll state of\n */ const getScrollState = ({ scrollTop, scrollHeight, clientHeight })=>{\n    if (scrollHeight <= clientHeight) {\n        return 'none';\n    }\n    if (scrollTop === 0) {\n        return 'top';\n    }\n    if (scrollTop + clientHeight === scrollHeight) {\n        return 'bottom';\n    }\n    return 'middle';\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 */ export const useDrawerBody_unstable = (props, ref)=>{\n    const { setScrollState } = useDrawerContext_unstable();\n    const scrollRef = React.useRef(null);\n    const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n    const onScroll = React.useCallback(()=>{\n        cancelAnimationFrame();\n        setAnimationFrame(()=>{\n            if (!scrollRef.current) {\n                return;\n            }\n            setScrollState(getScrollState(scrollRef.current));\n        });\n    }, [\n        cancelAnimationFrame,\n        setAnimationFrame,\n        setScrollState\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        if (!scrollRef.current) {\n            return;\n        }\n        setScrollState(getScrollState(scrollRef.current));\n        return ()=>cancelAnimationFrame();\n    }, [\n        cancelAnimationFrame,\n        setScrollState\n    ]);\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, scrollRef),\n            ...props,\n            onScroll: mergeCallbacks(props.onScroll, onScroll)\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useDrawerBody_unstable","getScrollState","scrollTop","scrollHeight","clientHeight","props","ref","setScrollState","useDrawerContext_unstable","scrollRef","React","useRef","setAnimationFrame","cancelAnimationFrame","useAnimationFrame","onScroll","useCallback","current","useIsomorphicLayoutEffect","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","mergeCallbacks","elementType"],"mappings":";;;;+BA6BiBA;;;eAAAA;;;;iEA7BM;gCACqG;+BAClF;AAC1C;;;;;;CAMC,GAAG,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAE;IACjE,IAAID,gBAAgBC,cAAc;QAC9B,OAAO;IACX;IACA,IAAIF,cAAc,GAAG;QACjB,OAAO;IACX;IACA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC3C,OAAO;IACX;IACA,OAAO;AACX;AASW,MAAMH,yBAAyB,CAACK,OAAOC;IAC9C,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,wCAAyB;IACpD,MAAMC,YAAYC,OAAMC,MAAM,CAAC;IAC/B,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,IAAAA,iCAAiB;IACnE,MAAMC,WAAWL,OAAMM,WAAW,CAAC;QAC/BH;QACAD,kBAAkB;YACd,IAAI,CAACH,UAAUQ,OAAO,EAAE;gBACpB;YACJ;YACAV,eAAeN,eAAeQ,UAAUQ,OAAO;QACnD;IACJ,GAAG;QACCJ;QACAD;QACAL;KACH;IACDW,IAAAA,yCAAyB,EAAC;QACtB,IAAI,CAACT,UAAUQ,OAAO,EAAE;YACpB;QACJ;QACAV,eAAeN,eAAeQ,UAAUQ,OAAO;QAC/C,OAAO,IAAIJ;IACf,GAAG;QACCA;QACAN;KACH;IACD,OAAO;QACHY,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FjB,KAAKkB,IAAAA,6BAAa,EAAClB,KAAKG;YACxB,GAAGJ,KAAK;YACRU,UAAUU,IAAAA,8BAAc,EAACpB,MAAMU,QAAQ,EAAEA;QAC7C,IAAI;YACAW,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js

@@ -22,10 +22,10 @@ const drawerBodyClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1boqb07", null, [
-    ".r1boqb07{margin:-1px 0;padding:1px var(--spacingHorizontalXXL);overflow:auto;flex:1;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}",
-    ".r1boqb07:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}",
-    ".r1boqb07:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ri6rvx7", null, [
+    ".ri6rvx7{padding:0 var(--spacingHorizontalXXL);flex:1;align-self:stretch;position:relative;z-index:1;overflow:auto;}",
+    ".ri6rvx7:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}",
+    ".ri6rvx7:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"
 ]);
 const useDrawerBodyStyles_unstable = (state)=>{
     const styles = useStyles();

package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, 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 */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r1boqb07\", null, [\".r1boqb07{margin:-1px 0;padding:1px var(--spacingHorizontalXXL);overflow:auto;flex:1;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}\", \".r1boqb07:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}\", \".r1boqb07:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}\"]);\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerBodyStyles.styles.js.map"],"names":["drawerBodyClassNames","useDrawerBodyStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAUAC,4BAA4B;eAA5BA;;;uBAZ+B;AAErC,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;IAA6xB;IAAiF;CAA8E;AAIr/B,MAAMH,+BAA+BI,CAAAA;IAC1C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,qBAAqBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC3F,OAAOF;AACT,GACA,sDAAsD"}
+{"version":3,"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, 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 */\nconst useStyles = /*#__PURE__*/__resetStyles(\"ri6rvx7\", null, [\".ri6rvx7{padding:0 var(--spacingHorizontalXXL);flex:1;align-self:stretch;position:relative;z-index:1;overflow:auto;}\", \".ri6rvx7:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}\", \".ri6rvx7:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}\"]);\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerBodyStyles.styles.js.map"],"names":["drawerBodyClassNames","useDrawerBodyStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAUAC,4BAA4B;eAA5BA;;;uBAZ+B;AAErC,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;IAAwH;IAAgF;CAA6E;AAI7U,MAAMH,+BAA+BI,CAAAA;IAC1C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,qBAAqBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC3F,OAAOF;AACT,GACA,sDAAsD"}

package/lib-commonjs/components/DrawerFooter/useDrawerFooter.js

@@ -11,7 +11,9 @@ Object.defineProperty(exports, "useDrawerFooter_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
+const _drawerContext = require("../../contexts/drawerContext");
 const useDrawerFooter_unstable = (props, ref)=>{
+    const { scrollState } = (0, _drawerContext.useDrawerContext_unstable)();
     return {
         components: {
             root: 'footer'
@@ -21,6 +23,7 @@ const useDrawerFooter_unstable = (props, ref)=>{
             ...props
         }), {
             elementType: 'footer'
-        })
+        }),
+        scrollState
     };
 };

package/lib-commonjs/components/DrawerFooter/useDrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */ export const useDrawerFooter_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'footer'\n        },\n        root: slot.always(getIntrinsicElementProps('footer', {\n            ref,\n            ...props\n        }), {\n            elementType: 'footer'\n        })\n    };\n};\n"],"names":["useDrawerFooter_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,UAAU;YACjDL;YACA,GAAGD,KAAK;QACZ,IAAI;YACAO,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */ export const useDrawerFooter_unstable = (props, ref)=>{\n    const { scrollState } = useDrawerContext_unstable();\n    return {\n        components: {\n            root: 'footer'\n        },\n        root: slot.always(getIntrinsicElementProps('footer', {\n            ref,\n            ...props\n        }), {\n            elementType: 'footer'\n        }),\n        scrollState\n    };\n};\n"],"names":["useDrawerFooter_unstable","props","ref","scrollState","useDrawerContext_unstable","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACwB;+BACL;AAS/B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,MAAM,EAAEC,WAAW,EAAE,GAAGC,IAAAA,wCAAyB;IACjD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,UAAU;YACjDP;YACA,GAAGD,KAAK;QACZ,IAAI;YACAS,aAAa;QACjB;QACAP;IACJ;AACJ"}

package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js

@@ -22,11 +22,54 @@ const drawerFooterClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r41rrse", null, [
-    ".r41rrse{padding:var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}"
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1snvl2j", null, [
+    ".r1snvl2j{width:100%;max-width:100%;padding:var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;position:relative;z-index:2;}"
 ]);
+const useDrawerFooterStyles = /*#__PURE__*/ (0, _react.__styles)({
+    separator: {
+        Bbc2r3f: "fhufbb2",
+        xx9plb: "fxf9f1y",
+        qd6xl9: [
+            "fmlx6bj",
+            "f1t0u0az"
+        ],
+        Byque4d: [
+            "f1t0u0az",
+            "fmlx6bj"
+        ],
+        ngabwx: "f1429bq1",
+        B1dvbpk: "fv3cwj",
+        B5szp9g: "f1ayei5p",
+        iukgx1: "fkgtggm",
+        Br7k87z: "f44t985",
+        rurcny: "fuzzvh5",
+        Bf8kmfk: "f14oqhab"
+    },
+    separatorVisible: {
+        ngabwx: "f3ve9t9"
+    }
+}, {
+    d: [
+        ".fhufbb2:before{height:1px;}",
+        ".fxf9f1y:before{position:absolute;}",
+        ".fmlx6bj:before{right:0;}",
+        ".f1t0u0az:before{left:0;}",
+        ".f1429bq1:before{opacity:0;}",
+        ".fv3cwj:before{background-color:var(--colorNeutralStroke1);}",
+        ".f1ayei5p:before{transition-duration:var(--durationNormal);}",
+        ".fkgtggm:before{transition-property:opacity;}",
+        ".f44t985:before{transition-timing-function:var(--curveEasyEase);}",
+        ".fuzzvh5:before{content:\"\";}",
+        ".f14oqhab:before{top:0;}",
+        ".f3ve9t9:before{opacity:1;}"
+    ]
+});
 const useDrawerFooterStyles_unstable = (state)=>{
     const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(drawerFooterClassNames.root, styles, state.root.className);
+    const rootStyles = useDrawerFooterStyles();
+    state.root.className = (0, _react.mergeClasses)(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
+        'middle',
+        'top'
+    ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
     return state;
 }; //# sourceMappingURL=useDrawerFooterStyles.styles.js.map

package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n  root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r41rrse\", null, [\".r41rrse{padding:var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}\"]);\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerFooterStyles.styles.js.map"],"names":["drawerFooterClassNames","useDrawerFooterStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAUAC,8BAA8B;eAA9BA;;;uBAZ+B;AAErC,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAmP;AAI3S,MAAMH,iCAAiCI,CAAAA;IAC5C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,uBAAuBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,wDAAwD"}
+{"version":3,"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r1snvl2j\", null, [\".r1snvl2j{width:100%;max-width:100%;padding:var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;position:relative;z-index:2;}\"]);\nconst useDrawerFooterStyles = /*#__PURE__*/__styles({\n  separator: {\n    Bbc2r3f: \"fhufbb2\",\n    xx9plb: \"fxf9f1y\",\n    qd6xl9: [\"fmlx6bj\", \"f1t0u0az\"],\n    Byque4d: [\"f1t0u0az\", \"fmlx6bj\"],\n    ngabwx: \"f1429bq1\",\n    B1dvbpk: \"fv3cwj\",\n    B5szp9g: \"f1ayei5p\",\n    iukgx1: \"fkgtggm\",\n    Br7k87z: \"f44t985\",\n    rurcny: \"fuzzvh5\",\n    Bf8kmfk: \"f14oqhab\"\n  },\n  separatorVisible: {\n    ngabwx: \"f3ve9t9\"\n  }\n}, {\n  d: [\".fhufbb2:before{height:1px;}\", \".fxf9f1y:before{position:absolute;}\", \".fmlx6bj:before{right:0;}\", \".f1t0u0az:before{left:0;}\", \".f1429bq1:before{opacity:0;}\", \".fv3cwj:before{background-color:var(--colorNeutralStroke1);}\", \".f1ayei5p:before{transition-duration:var(--durationNormal);}\", \".fkgtggm:before{transition-property:opacity;}\", \".f44t985:before{transition-timing-function:var(--curveEasyEase);}\", \".fuzzvh5:before{content:\\\"\\\";}\", \".f14oqhab:before{top:0;}\", \".f3ve9t9:before{opacity:1;}\"]\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = state => {\n  const styles = useStyles();\n  const rootStyles = useDrawerFooterStyles();\n  state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerFooterStyles.styles.js.map"],"names":["drawerFooterClassNames","useDrawerFooterStyles_unstable","root","useStyles","__resetStyles","useDrawerFooterStyles","__styles","separator","Bbc2r3f","xx9plb","qd6xl9","Byque4d","ngabwx","B1dvbpk","B5szp9g","iukgx1","Br7k87z","rurcny","Bf8kmfk","separatorVisible","d","state","styles","rootStyles","className","mergeClasses","scrollState","includes"],"mappings":";;;;;;;;;;;IAGaA,sBAAsB;eAAtBA;;IA8BAC,8BAA8B;eAA9BA;;;uBAjCyC;AAG/C,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAAgR;AAChV,MAAMC,wBAAwB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAClDC,WAAW;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAC,kBAAkB;QAChBP,QAAQ;IACV;AACF,GAAG;IACDQ,GAAG;QAAC;QAAgC;QAAuC;QAA6B;QAA6B;QAAgC;QAAgE;QAAgE;QAAiD;QAAqE;QAAkC;QAA4B;KAA8B;AACzf;AAIO,MAAMnB,iCAAiCoB,CAAAA;IAC5C,MAAMC,SAASnB;IACf,MAAMoB,aAAalB;IACnBgB,MAAMnB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,uBAAuBE,IAAI,EAAEoB,QAAQD,MAAMK,WAAW,KAAK,UAAUH,WAAWhB,SAAS,EAAE;QAAC;QAAU;KAAM,CAACoB,QAAQ,CAACN,MAAMK,WAAW,KAAKH,WAAWJ,gBAAgB,EAAEE,MAAMnB,IAAI,CAACsB,SAAS;IACjO,OAAOH;AACT,GACA,wDAAwD"}

package/lib-commonjs/components/DrawerHeader/useDrawerHeader.js

@@ -11,7 +11,9 @@ Object.defineProperty(exports, "useDrawerHeader_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
+const _drawerContext = require("../../contexts/drawerContext");
 const useDrawerHeader_unstable = (props, ref)=>{
+    const { scrollState } = (0, _drawerContext.useDrawerContext_unstable)();
     return {
         components: {
             root: 'header'
@@ -21,6 +23,7 @@ const useDrawerHeader_unstable = (props, ref)=>{
             ...props
         }), {
             elementType: 'header'
-        })
+        }),
+        scrollState
     };
 };

package/lib-commonjs/components/DrawerHeader/useDrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */ export const useDrawerHeader_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'header'\n        },\n        root: slot.always(getIntrinsicElementProps('header', {\n            ref,\n            ...props\n        }), {\n            elementType: 'header'\n        })\n    };\n};\n"],"names":["useDrawerHeader_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,UAAU;YACjDL;YACA,GAAGD,KAAK;QACZ,IAAI;YACAO,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */ export const useDrawerHeader_unstable = (props, ref)=>{\n    const { scrollState } = useDrawerContext_unstable();\n    return {\n        components: {\n            root: 'header'\n        },\n        root: slot.always(getIntrinsicElementProps('header', {\n            ref,\n            ...props\n        }), {\n            elementType: 'header'\n        }),\n        scrollState\n    };\n};\n"],"names":["useDrawerHeader_unstable","props","ref","scrollState","useDrawerContext_unstable","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACwB;+BACL;AAS/B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,MAAM,EAAEC,WAAW,EAAE,GAAGC,IAAAA,wCAAyB;IACjD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,UAAU;YACjDP;YACA,GAAGD,KAAK;QACZ,IAAI;YACAS,aAAa;QACjB;QACAP;IACJ;AACJ"}

package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js

@@ -22,11 +22,54 @@ const drawerHeaderClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r11m9gl0", null, [
-    ".r11m9gl0{padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}"
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r3ovn4i", null, [
+    ".r3ovn4i{width:100%;max-width:100%;padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;position:relative;z-index:2;}"
 ]);
+const useDrawerHeaderStyles = /*#__PURE__*/ (0, _react.__styles)({
+    separator: {
+        mpb1vu: "f1bc0r91",
+        Hdbjpj: "f11ef69",
+        cnmfks: [
+            "f15lyva8",
+            "f1cvlmu2"
+        ],
+        jc51t6: [
+            "f1cvlmu2",
+            "f15lyva8"
+        ],
+        Bmyypfa: "f9pox2d",
+        Bkbwdz4: "f1swzn7y",
+        mafdb0: "f1pb4rwf",
+        wbfbqe: "fsav6n4",
+        Jgwf15: "f1iuoiuj",
+        Bs6t6z0: "fqc6z8f",
+        Bj55yzk: "fw2wsqs"
+    },
+    separatorVisible: {
+        Bmyypfa: "frwhdur"
+    }
+}, {
+    d: [
+        ".f1bc0r91:after{height:1px;}",
+        ".f11ef69:after{position:absolute;}",
+        ".f15lyva8:after{right:0;}",
+        ".f1cvlmu2:after{left:0;}",
+        ".f9pox2d:after{opacity:0;}",
+        ".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}",
+        ".f1pb4rwf:after{transition-duration:var(--durationNormal);}",
+        ".fsav6n4:after{transition-property:opacity;}",
+        ".f1iuoiuj:after{transition-timing-function:var(--curveEasyEase);}",
+        ".fqc6z8f:after{content:\"\";}",
+        ".fw2wsqs:after{bottom:0;}",
+        ".frwhdur:after{opacity:1;}"
+    ]
+});
 const useDrawerHeaderStyles_unstable = (state)=>{
     const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(drawerHeaderClassNames.root, styles, state.root.className);
+    const rootStyles = useDrawerHeaderStyles();
+    state.root.className = (0, _react.mergeClasses)(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
+        'middle',
+        'bottom'
+    ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
     return state;
 }; //# sourceMappingURL=useDrawerHeaderStyles.styles.js.map

package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n  root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r11m9gl0\", null, [\".r11m9gl0{padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}\"]);\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerHeaderStyles.styles.js.map"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAUAC,8BAA8B;eAA9BA;;;uBAZ+B;AAErC,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAAwO;AAIjS,MAAMH,iCAAiCI,CAAAA;IAC5C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,uBAAuBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,wDAAwD"}
+{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r3ovn4i\", null, [\".r3ovn4i{width:100%;max-width:100%;padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;position:relative;z-index:2;}\"]);\nconst useDrawerHeaderStyles = /*#__PURE__*/__styles({\n  separator: {\n    mpb1vu: \"f1bc0r91\",\n    Hdbjpj: \"f11ef69\",\n    cnmfks: [\"f15lyva8\", \"f1cvlmu2\"],\n    jc51t6: [\"f1cvlmu2\", \"f15lyva8\"],\n    Bmyypfa: \"f9pox2d\",\n    Bkbwdz4: \"f1swzn7y\",\n    mafdb0: \"f1pb4rwf\",\n    wbfbqe: \"fsav6n4\",\n    Jgwf15: \"f1iuoiuj\",\n    Bs6t6z0: \"fqc6z8f\",\n    Bj55yzk: \"fw2wsqs\"\n  },\n  separatorVisible: {\n    Bmyypfa: \"frwhdur\"\n  }\n}, {\n  d: [\".f1bc0r91:after{height:1px;}\", \".f11ef69:after{position:absolute;}\", \".f15lyva8:after{right:0;}\", \".f1cvlmu2:after{left:0;}\", \".f9pox2d:after{opacity:0;}\", \".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}\", \".f1pb4rwf:after{transition-duration:var(--durationNormal);}\", \".fsav6n4:after{transition-property:opacity;}\", \".f1iuoiuj:after{transition-timing-function:var(--curveEasyEase);}\", \".fqc6z8f:after{content:\\\"\\\";}\", \".fw2wsqs:after{bottom:0;}\", \".frwhdur:after{opacity:1;}\"]\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = state => {\n  const styles = useStyles();\n  const rootStyles = useDrawerHeaderStyles();\n  state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerHeaderStyles.styles.js.map"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","__resetStyles","useDrawerHeaderStyles","__styles","separator","mpb1vu","Hdbjpj","cnmfks","jc51t6","Bmyypfa","Bkbwdz4","mafdb0","wbfbqe","Jgwf15","Bs6t6z0","Bj55yzk","separatorVisible","d","state","styles","rootStyles","className","mergeClasses","scrollState","includes"],"mappings":";;;;;;;;;;;IAGaA,sBAAsB;eAAtBA;;IA8BAC,8BAA8B;eAA9BA;;;uBAjCyC;AAG/C,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAmQ;AAClU,MAAMC,wBAAwB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAClDC,WAAW;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,kBAAkB;QAChBP,SAAS;IACX;AACF,GAAG;IACDQ,GAAG;QAAC;QAAgC;QAAsC;QAA6B;QAA4B;QAA8B;QAAiE;QAA+D;QAAgD;QAAqE;QAAiC;QAA6B;KAA6B;AACnf;AAIO,MAAMnB,iCAAiCoB,CAAAA;IAC5C,MAAMC,SAASnB;IACf,MAAMoB,aAAalB;IACnBgB,MAAMnB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,mBAAY,EAACzB,uBAAuBE,IAAI,EAAEoB,QAAQD,MAAMK,WAAW,KAAK,UAAUH,WAAWhB,SAAS,EAAE;QAAC;QAAU;KAAS,CAACoB,QAAQ,CAACN,MAAMK,WAAW,KAAKH,WAAWJ,gBAAgB,EAAEE,MAAMnB,IAAI,CAACsB,SAAS;IACpO,OAAOH;AACT,GACA,wDAAwD"}

package/lib-commonjs/components/InlineDrawer/InlineDrawer.js

@@ -11,14 +11,16 @@ Object.defineProperty(exports, "InlineDrawer", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _drawerContext = require("../../contexts/drawerContext");
 const _useInlineDrawer = require("./useInlineDrawer");
 const _renderInlineDrawer = require("./renderInlineDrawer");
 const _useInlineDrawerStylesstyles = require("./useInlineDrawerStyles.styles");
 const InlineDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useInlineDrawer.useInlineDrawer_unstable)(props, ref);
+    const contextValue = (0, _drawerContext.useDrawerContextValue)();
     (0, _useInlineDrawerStylesstyles.useInlineDrawerStyles_unstable)(state);
     (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerInlineStyles_unstable')(state);
     (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useInlineDrawerStyles_unstable')(state);
-    return (0, _renderInlineDrawer.renderInlineDrawer_unstable)(state);
+    return (0, _renderInlineDrawer.renderInlineDrawer_unstable)(state, contextValue);
 });
 InlineDrawer.displayName = 'InlineDrawer';

package/lib-commonjs/components/InlineDrawer/InlineDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InlineDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n/**\n * InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */ export const InlineDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useInlineDrawer_unstable(props, ref);\n    useInlineDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n    useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n    return renderInlineDrawer_unstable(state);\n});\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["InlineDrawer","React","forwardRef","props","ref","state","useInlineDrawer_unstable","useInlineDrawerStyles_unstable","useCustomStyleHook_unstable","renderInlineDrawer_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;qCACqB;iCACH;oCACG;6CACG;AAIpC,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnE,MAAMC,QAAQC,IAAAA,yCAAwB,EAACH,OAAOC;IAC9CG,IAAAA,2DAA8B,EAACF;IAC/BG,IAAAA,gDAA2B,EAAC,kCAAkCH;IAC9DG,IAAAA,gDAA2B,EAAC,kCAAkCH;IAC9D,OAAOI,IAAAA,+CAA2B,EAACJ;AACvC;AACAL,aAAaU,WAAW,GAAG"}
+{"version":3,"sources":["InlineDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n/**\n * InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */ export const InlineDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useInlineDrawer_unstable(props, ref);\n    const contextValue = useDrawerContextValue();\n    useInlineDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n    useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n    return renderInlineDrawer_unstable(state, contextValue);\n});\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["InlineDrawer","React","forwardRef","props","ref","state","useInlineDrawer_unstable","contextValue","useDrawerContextValue","useInlineDrawerStyles_unstable","useCustomStyleHook_unstable","renderInlineDrawer_unstable","displayName"],"mappings":";;;;+BASiBA;;;eAAAA;;;;iEATM;qCACqB;+BACN;iCACG;oCACG;6CACG;AAIpC,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnE,MAAMC,QAAQC,IAAAA,yCAAwB,EAACH,OAAOC;IAC9C,MAAMG,eAAeC,IAAAA,oCAAqB;IAC1CC,IAAAA,2DAA8B,EAACJ;IAC/BK,IAAAA,gDAA2B,EAAC,kCAAkCL;IAC9DK,IAAAA,gDAA2B,EAAC,kCAAkCL;IAC9D,OAAOM,IAAAA,+CAA2B,EAACN,OAAOE;AAC9C;AACAP,aAAaY,WAAW,GAAG"}

package/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js

@@ -10,10 +10,14 @@ Object.defineProperty(exports, "renderInlineDrawer_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const renderInlineDrawer_unstable = (state)=>{
+const _drawerContext = require("../../contexts/drawerContext");
+const renderInlineDrawer_unstable = (state, contextValue)=>{
     if (!state.motion.canRender) {
         return null;
     }
     (0, _reactutilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    });
 };

package/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderInlineDrawer.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of InlineDrawer\n */ export const renderInlineDrawer_unstable = (state)=>{\n    if (!state.motion.canRender) {\n        return null;\n    }\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {});\n};\n"],"names":["renderInlineDrawer_unstable","state","motion","canRender","assertSlots","_jsx","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,MAAMA,8BAA8B,CAACC;IAC5C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QACzB,OAAO;IACX;IACAC,IAAAA,2BAAW,EAACH;IACZ,OAAO,WAAW,GAAGI,IAAAA,eAAI,EAACJ,MAAMK,IAAI,EAAE,CAAC;AAC3C"}
+{"version":3,"sources":["renderInlineDrawer.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n/**\n * Render the final JSX of InlineDrawer\n */ export const renderInlineDrawer_unstable = (state, contextValue)=>{\n    if (!state.motion.canRender) {\n        return null;\n    }\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(DrawerProvider, {\n        value: contextValue,\n        children: /*#__PURE__*/ _jsx(state.root, {})\n    });\n};\n"],"names":["renderInlineDrawer_unstable","state","contextValue","motion","canRender","assertSlots","_jsx","DrawerProvider","value","children","root"],"mappings":";;;;+BAKiBA;;;eAAAA;;;4BALa;gCACF;+BACG;AAGpB,MAAMA,8BAA8B,CAACC,OAAOC;IACnD,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QACzB,OAAO;IACX;IACAC,IAAAA,2BAAW,EAACJ;IACZ,OAAO,WAAW,GAAGK,IAAAA,eAAI,EAACC,6BAAc,EAAE;QACtCC,OAAON;QACPO,UAAU,WAAW,GAAGH,IAAAA,eAAI,EAACL,MAAMS,IAAI,EAAE,CAAC;IAC9C;AACJ"}

package/lib-commonjs/components/OverlayDrawer/OverlayDrawer.js

@@ -11,14 +11,16 @@ Object.defineProperty(exports, "OverlayDrawer", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _drawerContext = require("../../contexts/drawerContext");
 const _useOverlayDrawer = require("./useOverlayDrawer");
 const _renderOverlayDrawer = require("./renderOverlayDrawer");
 const _useOverlayDrawerStylesstyles = require("./useOverlayDrawerStyles.styles");
 const OverlayDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useOverlayDrawer.useOverlayDrawer_unstable)(props, ref);
+    const contextValue = (0, _drawerContext.useDrawerContextValue)();
     (0, _useOverlayDrawerStylesstyles.useOverlayDrawerStyles_unstable)(state);
     (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerOverlayStyles_unstable')(state);
     (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOverlayDrawerStyles_unstable')(state);
-    return (0, _renderOverlayDrawer.renderOverlayDrawer_unstable)(state);
+    return (0, _renderOverlayDrawer.renderOverlayDrawer_unstable)(state, contextValue);
 });
 OverlayDrawer.displayName = 'OverlayDrawer';

package/lib-commonjs/components/OverlayDrawer/OverlayDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["OverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const OverlayDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useOverlayDrawer_unstable(props, ref);\n    useOverlayDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n    useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n    return renderOverlayDrawer_unstable(state);\n});\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["OverlayDrawer","React","forwardRef","props","ref","state","useOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useCustomStyleHook_unstable","renderOverlayDrawer_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;qCACqB;kCACF;qCACG;8CACG;AAGrC,MAAMA,gBAAgB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACpE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,6DAA+B,EAACF;IAChCG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/DG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/D,OAAOI,IAAAA,iDAA4B,EAACJ;AACxC;AACAL,cAAcU,WAAW,GAAG"}
+{"version":3,"sources":["OverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\nimport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const OverlayDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useOverlayDrawer_unstable(props, ref);\n    const contextValue = useDrawerContextValue();\n    useOverlayDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n    useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n    return renderOverlayDrawer_unstable(state, contextValue);\n});\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["OverlayDrawer","React","forwardRef","props","ref","state","useOverlayDrawer_unstable","contextValue","useDrawerContextValue","useOverlayDrawerStyles_unstable","useCustomStyleHook_unstable","renderOverlayDrawer_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;qCACqB;+BACN;kCACI;qCACG;8CACG;AAGrC,MAAMA,gBAAgB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACpE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/C,MAAMG,eAAeC,IAAAA,oCAAqB;IAC1CC,IAAAA,6DAA+B,EAACJ;IAChCK,IAAAA,gDAA2B,EAAC,mCAAmCL;IAC/DK,IAAAA,gDAA2B,EAAC,mCAAmCL;IAC/D,OAAOM,IAAAA,iDAA4B,EAACN,OAAOE;AAC/C;AACAP,cAAcY,WAAW,GAAG"}

package/lib-commonjs/components/OverlayDrawer/renderOverlayDrawer.js

@@ -10,12 +10,16 @@ Object.defineProperty(exports, "renderOverlayDrawer_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const renderOverlayDrawer_unstable = (state)=>{
+const _drawerContext = require("../../contexts/drawerContext");
+const renderOverlayDrawer_unstable = (state, contextValue)=>{
     if (!state.motion.canRender) {
         return null;
     }
     (0, _reactutilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dialog, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dialog, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+        })
     });
 };

package/lib-commonjs/components/OverlayDrawer/renderOverlayDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderOverlayDrawer.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of OverlayDrawer\n */ export const renderOverlayDrawer_unstable = (state)=>{\n    if (!state.motion.canRender) {\n        return null;\n    }\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.dialog, {\n        children: /*#__PURE__*/ _jsx(state.root, {})\n    });\n};\n"],"names":["renderOverlayDrawer_unstable","state","motion","canRender","assertSlots","_jsx","dialog","children","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,MAAMA,+BAA+B,CAACC;IAC7C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QACzB,OAAO;IACX;IACAC,IAAAA,2BAAW,EAACH;IACZ,OAAO,WAAW,GAAGI,IAAAA,eAAI,EAACJ,MAAMK,MAAM,EAAE;QACpCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACJ,MAAMO,IAAI,EAAE,CAAC;IAC9C;AACJ"}
+{"version":3,"sources":["renderOverlayDrawer.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerProvider } from '../../contexts/drawerContext';\n/**\n * Render the final JSX of OverlayDrawer\n */ export const renderOverlayDrawer_unstable = (state, contextValue)=>{\n    if (!state.motion.canRender) {\n        return null;\n    }\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(DrawerProvider, {\n        value: contextValue,\n        children: /*#__PURE__*/ _jsx(state.dialog, {\n            children: /*#__PURE__*/ _jsx(state.root, {})\n        })\n    });\n};\n"],"names":["renderOverlayDrawer_unstable","state","contextValue","motion","canRender","assertSlots","_jsx","DrawerProvider","value","children","dialog","root"],"mappings":";;;;+BAKiBA;;;eAAAA;;;4BALa;gCACF;+BACG;AAGpB,MAAMA,+BAA+B,CAACC,OAAOC;IACpD,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QACzB,OAAO;IACX;IACAC,IAAAA,2BAAW,EAACJ;IACZ,OAAO,WAAW,GAAGK,IAAAA,eAAI,EAACC,6BAAc,EAAE;QACtCC,OAAON;QACPO,UAAU,WAAW,GAAGH,IAAAA,eAAI,EAACL,MAAMS,MAAM,EAAE;YACvCD,UAAU,WAAW,GAAGH,IAAAA,eAAI,EAACL,MAAMU,IAAI,EAAE,CAAC;QAC9C;IACJ;AACJ"}