@fluentui/react-drawer 9.1.12 → 9.2.0

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Tue, 23 Apr 2024 08:12:12 GMT and should not be manually modified.
+This log was last generated on Thu, 02 May 2024 11:31:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.2.0)
+
+Thu, 02 May 2024 11:31:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.1.12..@fluentui/react-drawer_v9.2.0)
+
+### Minor changes
+
+- feat: move scroll detector to a dedicated react context ([PR #31156](https://github.com/microsoft/fluentui/pull/31156) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-dialog to v9.10.2 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+
 ## [9.1.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.1.12)
 
-Tue, 23 Apr 2024 08:12:12 GMT 
+Tue, 23 Apr 2024 08:17:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.1.11..@fluentui/react-drawer_v9.1.12)
 
 ### Patches

package/dist/index.d.ts

@@ -68,6 +68,11 @@ export declare type DrawerBodySlots = {
  */
 export declare type DrawerBodyState = ComponentState<DrawerBodySlots>;
 
+declare type DrawerContextValue = {
+    scrollState: DrawerScrollState;
+    setScrollState: (scrollState: DrawerScrollState) => void;
+};
+
 /**
  * DrawerFooter provides a structured footer for the drawer component.
  */
@@ -87,7 +92,9 @@ export declare type DrawerFooterSlots = {
 /**
  * State used in rendering DrawerFooter
  */
-export declare type DrawerFooterState = ComponentState<DrawerFooterSlots>;
+export declare type DrawerFooterState = ComponentState<DrawerFooterSlots> & {
+    scrollState: DrawerScrollState;
+};
 
 /**
  * DrawerHeader provides a structured header for the drawer component.
@@ -132,7 +139,9 @@ export declare type DrawerHeaderSlots = {
 /**
  * State used in rendering DrawerHeader
  */
-export declare type DrawerHeaderState = ComponentState<DrawerHeaderSlots>;
+export declare type DrawerHeaderState = ComponentState<DrawerHeaderSlots> & {
+    scrollState: DrawerScrollState;
+};
 
 /**
  * DrawerHeader provides a structured header for the drawer component.
@@ -179,6 +188,8 @@ export declare type DrawerProps = ComponentProps<DrawerSlots> & {
     type?: 'inline' | 'overlay';
 };
 
+declare type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';
+
 export declare type DrawerSlots = {
     /**
      * Root slot of the Drawer.
@@ -300,7 +311,7 @@ declare type OverlayDrawerSurfaceSlots = DialogSurfaceSlots;
 /**
  * Render the final JSX of Drawer
  */
-export declare const renderDrawer_unstable: (state: DrawerState) => JSX.Element;
+export declare const renderDrawer_unstable: (state: DrawerState, contextValue: DrawerContextValue) => JSX.Element;
 
 /**
  * Render the final JSX of DrawerBody
@@ -330,12 +341,12 @@ export declare const renderDrawerHeaderTitle_unstable: (state: DrawerHeaderTitle
 /**
  * Render the final JSX of InlineDrawer
  */
-export declare const renderInlineDrawer_unstable: (state: InlineDrawerState) => JSX.Element | null;
+export declare const renderInlineDrawer_unstable: (state: InlineDrawerState, contextValue: DrawerContextValue) => JSX.Element | null;
 
 /**
  * Render the final JSX of OverlayDrawer
  */
-export declare const renderOverlayDrawer_unstable: (state: OverlayDrawerState) => JSX.Element | null;
+export declare const renderOverlayDrawer_unstable: (state: OverlayDrawerState, contextValue: DrawerContextValue) => JSX.Element | null;
 
 /**
  * Create the state required to render Drawer.

package/lib/components/Drawer/Drawer.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useDrawerContextValue } from '../../contexts/drawerContext';
 import { useDrawer_unstable } from './useDrawer';
 import { renderDrawer_unstable } from './renderDrawer';
 import { useDrawerStyles_unstable } from './useDrawerStyles.styles';
@@ -7,8 +8,9 @@ import { useDrawerStyles_unstable } from './useDrawerStyles.styles';
  * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.
  */ export const Drawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useDrawer_unstable(props, ref);
+    const contextValue = useDrawerContextValue();
     useDrawerStyles_unstable(state);
     useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);
-    return renderDrawer_unstable(state);
+    return renderDrawer_unstable(state, contextValue);
 });
 Drawer.displayName = 'Drawer';

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

@@ -1 +1 @@
-{"version":3,"sources":["Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawer_unstable } from './useDrawer';\nimport { renderDrawer_unstable } from './renderDrawer';\nimport { useDrawerStyles_unstable } from './useDrawerStyles.styles';\nimport type { DrawerProps } from './Drawer.types';\n\n/**\n * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const Drawer: ForwardRefComponent<DrawerProps> = React.forwardRef((props, ref) => {\n  const state = useDrawer_unstable(props, ref);\n\n  useDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);\n\n  return renderDrawer_unstable(state);\n});\n\nDrawer.displayName = 'Drawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawer_unstable","renderDrawer_unstable","useDrawerStyles_unstable","Drawer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCJ,yBAAyBK;IACzBR,4BAA4B,4BAA4BQ;IAExD,OAAON,sBAAsBM;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\n\nimport { useDrawer_unstable } from './useDrawer';\nimport { renderDrawer_unstable } from './renderDrawer';\nimport { useDrawerStyles_unstable } from './useDrawerStyles.styles';\nimport type { DrawerProps } from './Drawer.types';\n\n/**\n * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const Drawer: ForwardRefComponent<DrawerProps> = React.forwardRef((props, ref) => {\n  const state = useDrawer_unstable(props, ref);\n  const contextValue = useDrawerContextValue();\n\n  useDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);\n\n  return renderDrawer_unstable(state, contextValue);\n});\n\nDrawer.displayName = 'Drawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerContextValue","useDrawer_unstable","renderDrawer_unstable","useDrawerStyles_unstable","Drawer","forwardRef","props","ref","state","contextValue","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,+BAA+B;AAErE,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE;;CAEC,GACD,OAAO,MAAMC,uBAA2CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IACxC,MAAME,eAAeT;IAErBG,yBAAyBK;IACzBT,4BAA4B,4BAA4BS;IAExD,OAAON,sBAAsBM,OAAOC;AACtC,GAAG;AAEHL,OAAOM,WAAW,GAAG"}

package/lib/components/Drawer/renderDrawer.js

@@ -1,8 +1,12 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
+import { DrawerProvider } from '../../contexts/drawerContext';
 /**
  * Render the final JSX of Drawer
- */ export const renderDrawer_unstable = (state)=>{
+ */ export const renderDrawer_unstable = (state, contextValue)=>{
     assertSlots(state);
-    return /*#__PURE__*/ _jsx(state.root, {});
+    return /*#__PURE__*/ _jsx(DrawerProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState) => {\n  assertSlots<DrawerSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawer_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue) => {\n  assertSlots<DrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.root />\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDJ,YAAyBG;IAEzB,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,IAAI;;AAGjB,EAAE"}

package/lib/components/DrawerBody/useDrawerBody.js

@@ -1,5 +1,24 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { mergeCallbacks, slot, useAnimationFrame, useMergedRefs, useIsomorphicLayoutEffect, getIntrinsicElementProps } from '@fluentui/react-utilities';
+import { useDrawerContext_unstable } from '../../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';
+};
 /**
  * Create the state required to render DrawerBody.
  *
@@ -9,6 +28,32 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
  * @param props - props from this instance of DrawerBody
  * @param ref - reference to root HTMLElement of DrawerBody
  */ export const useDrawerBody_unstable = (props, ref)=>{
+    const { setScrollState } = useDrawerContext_unstable();
+    const scrollRef = React.useRef(null);
+    const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();
+    const onScroll = React.useCallback(()=>{
+        cancelAnimationFrame();
+        setAnimationFrame(()=>{
+            if (!scrollRef.current) {
+                return;
+            }
+            setScrollState(getScrollState(scrollRef.current));
+        });
+    }, [
+        cancelAnimationFrame,
+        setAnimationFrame,
+        setScrollState
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (!scrollRef.current) {
+            return;
+        }
+        setScrollState(getScrollState(scrollRef.current));
+        return ()=>cancelAnimationFrame();
+    }, [
+        cancelAnimationFrame,
+        setScrollState
+    ]);
     return {
         components: {
             root: 'div'
@@ -17,8 +62,9 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
             // 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: useMergedRefs(ref, scrollRef),
+            ...props,
+            onScroll: mergeCallbacks(props.onScroll, onScroll)
         }), {
             elementType: 'div'
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\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  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerBody_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAI3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * 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 { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * @internal\n *\n * Get the current scroll state of the DrawerBody.\n *\n * @param param0 - 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 { setScrollState } = useDrawerContext_unstable();\n\n  const scrollRef = React.useRef<HTMLDivElement | null>(null);\n  const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n\n  const onScroll = React.useCallback(() => {\n    cancelAnimationFrame();\n    setAnimationFrame(() => {\n      if (!scrollRef.current) {\n        return;\n      }\n\n      setScrollState(getScrollState(scrollRef.current));\n    });\n  }, [cancelAnimationFrame, setAnimationFrame, setScrollState]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!scrollRef.current) {\n      return;\n    }\n\n    setScrollState(getScrollState(scrollRef.current));\n\n    return () => cancelAnimationFrame();\n  }, [cancelAnimationFrame, setScrollState]);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<DrawerBodyProps>('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<HTMLDivElement>(ref as React.Ref<HTMLDivElement>, scrollRef),\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","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","setScrollState","scrollRef","useRef","setAnimationFrame","cancelAnimationFrame","onScroll","useCallback","current","components","root","always","elementType"],"mappings":"AAAA,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;AAKzE;;;;;;CAMC,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;IAE3B,MAAMS,YAAYhB,MAAMiB,MAAM,CAAwB;IACtD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGhB;IAElD,MAAMiB,WAAWpB,MAAMqB,WAAW,CAAC;QACjCF;QACAD,kBAAkB;YAChB,IAAI,CAACF,UAAUM,OAAO,EAAE;gBACtB;YACF;YAEAP,eAAeP,eAAeQ,UAAUM,OAAO;QACjD;IACF,GAAG;QAACH;QAAsBD;QAAmBH;KAAe;IAE5DV,0BAA0B;QACxB,IAAI,CAACW,UAAUM,OAAO,EAAE;YACtB;QACF;QAEAP,eAAeP,eAAeQ,UAAUM,OAAO;QAE/C,OAAO,IAAMH;IACf,GAAG;QAACA;QAAsBJ;KAAe;IAEzC,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMtB,KAAKuB,MAAM,CACfnB,yBAA0C,OAAO;YAC/C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FQ,KAAKV,cAA8BU,KAAkCE;YACrE,GAAGH,KAAK;YACRO,UAAUnB,eAAeY,MAAMO,QAAQ,EAAEA;QAC3C,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

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

@@ -6,7 +6,7 @@ export const drawerBodyClassNames = {
 /**
  * Styles for the root slot
  */
-const 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);}"]);
+const 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);}"]);
 /**
  * Apply styling to the DrawerBody slots based on the state
  */

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { 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    margin: '-1px 0',\n    padding: `1px ${tokens.spacingHorizontalXXL}`,\n    overflow: 'auto',\n    flex: 1,\n    alignSelf: 'stretch',\n    // A \"good hack\" to display top and bottom borders based on the scroll position\n    backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`,\n    'background-position': 'bottom center, top center, bottom center, top center',\n    backgroundRepeat: 'no-repeat',\n    backgroundColor: tokens.colorNeutralBackground1,\n    backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px',\n    backgroundAttachment: 'local, local, scroll, scroll',\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    const styles = useStyles();\n    state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,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,g9BAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,4BAA4B,GAAIC,KAAK,IAAG;EACrD,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"}
+{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { 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    const styles = useStyles();\n    state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,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,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"}

package/lib/components/DrawerFooter/DrawerFooter.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DrawerFooterSlots = {\n  root: Slot<'footer'>;\n};\n\n/**\n * DrawerFooter Props\n */\nexport type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;\n\n/**\n * State used in rendering DrawerFooter\n */\nexport type DrawerFooterState = ComponentState<DrawerFooterSlots>;\n"],"names":[],"mappings":"AAAA,WAckE"}
+{"version":3,"sources":["DrawerFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerFooterSlots = {\n  root: Slot<'footer'>;\n};\n\n/**\n * DrawerFooter Props\n */\nexport type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;\n\n/**\n * State used in rendering DrawerFooter\n */\nexport type DrawerFooterState = ComponentState<DrawerFooterSlots> & {\n  scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAAA,WAiBE"}

package/lib/components/DrawerFooter/useDrawerFooter.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useDrawerContext_unstable } from '../../contexts/drawerContext';
 /**
  * Create the state required to render DrawerFooter.
  *
@@ -9,6 +10,7 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
  * @param props - props from this instance of DrawerFooter
  * @param ref - reference to root HTMLElement of DrawerFooter
  */ export const useDrawerFooter_unstable = (props, ref)=>{
+    const { scrollState } = useDrawerContext_unstable();
     return {
         components: {
             root: 'footer'
@@ -18,6 +20,7 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
             ...props
         }), {
             elementType: 'footer'
-        })
+        }),
+        scrollState
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\n\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 */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n  return {\n    components: {\n      root: 'footer',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('footer', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'footer' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerFooter_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAI3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,UAAU;YACjCI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAS;IAE5B;AACF,EAAE"}
+{"version":3,"sources":["useDrawerFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n\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 */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n  const { scrollState } = useDrawerContext_unstable();\n\n  return {\n    components: {\n      root: 'footer',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('footer', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'footer' },\n    ),\n\n    scrollState,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerContext_unstable","useDrawerFooter_unstable","props","ref","scrollState","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E,SAASC,yBAAyB,QAAQ,+BAA+B;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGJ;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,UAAU;YACjCK;YACA,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAS;QAG1BJ;IACF;AACF,EAAE"}

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

@@ -1,18 +1,40 @@
-import { __resetStyles, mergeClasses } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+import { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';
 export const drawerFooterClassNames = {
   root: 'fui-DrawerFooter'
 };
 /**
  * Styles for the root slot
  */
-const 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;}"]);
+const 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;}"]);
+const useDrawerFooterStyles = /*#__PURE__*/__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;}"]
+});
 /**
  * Apply styling to the DrawerFooter slots based on the state
  */
 export const useDrawerFooterStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);
+  const rootStyles = useDrawerFooterStyles();
+  state.root.className = 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/components/DrawerFooter/useDrawerFooterStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles_unstable","state","styles","className"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, 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 */ const useStyles = makeResetStyles({\n    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n    width: '100%',\n    maxWidth: '100%',\n    display: 'flex',\n    justifyContent: 'flex-start',\n    alignItems: 'center',\n    columnGap: tokens.spacingHorizontalS,\n    boxSizing: 'border-box'\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,sQASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles","separator","Bbc2r3f","xx9plb","qd6xl9","Byque4d","ngabwx","B1dvbpk","B5szp9g","iukgx1","Br7k87z","rurcny","Bf8kmfk","separatorVisible","d","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { 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    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,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,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,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"}

package/lib/components/DrawerHeader/DrawerHeader.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DrawerHeaderSlots = {\n  /**\n   * The root of the DrawerHeader.\n   */\n  root: Slot<'header'>;\n};\n\n/**\n * DrawerHeader Props\n */\nexport type DrawerHeaderProps = ComponentProps<DrawerHeaderSlots>;\n\n/**\n * State used in rendering DrawerHeader\n */\nexport type DrawerHeaderState = ComponentState<DrawerHeaderSlots>;\n"],"names":[],"mappings":"AAAA,WAiBkE"}
+{"version":3,"sources":["DrawerHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerHeaderSlots = {\n  /**\n   * The root of the DrawerHeader.\n   */\n  root: Slot<'header'>;\n};\n\n/**\n * DrawerHeader Props\n */\nexport type DrawerHeaderProps = ComponentProps<DrawerHeaderSlots>;\n\n/**\n * State used in rendering DrawerHeader\n */\nexport type DrawerHeaderState = ComponentState<DrawerHeaderSlots> & {\n  scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAAA,WAqBE"}

package/lib/components/DrawerHeader/useDrawerHeader.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useDrawerContext_unstable } from '../../contexts/drawerContext';
 /**
  * Create the state required to render DrawerHeader.
  *
@@ -9,6 +10,7 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
  * @param props - props from this instance of DrawerHeader
  * @param ref - reference to root HTMLElement of DrawerHeader
  */ export const useDrawerHeader_unstable = (props, ref)=>{
+    const { scrollState } = useDrawerContext_unstable();
     return {
         components: {
             root: 'header'
@@ -18,6 +20,7 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
             ...props
         }), {
             elementType: 'header'
-        })
+        }),
+        scrollState
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\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 */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n  return {\n    components: {\n      root: 'header',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('header', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'header' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerHeader_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAI3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,UAAU;YACjCI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAS;IAE5B;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\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 */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n  const { scrollState } = useDrawerContext_unstable();\n\n  return {\n    components: {\n      root: 'header',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('header', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'header' },\n    ),\n\n    scrollState,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerContext_unstable","useDrawerHeader_unstable","props","ref","scrollState","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ,+BAA+B;AAIzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,GAAGJ;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,UAAU;YACjCK;YACA,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAS;QAG1BJ;IACF;AACF,EAAE"}

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

@@ -1,18 +1,40 @@
-import { __resetStyles, mergeClasses } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+import { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';
 export const drawerHeaderClassNames = {
   root: 'fui-DrawerHeader'
 };
 /**
  * Styles for the root slot
  */
-const 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;}"]);
+const 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;}"]);
+const useDrawerHeaderStyles = /*#__PURE__*/__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;}"]
+});
 /**
  * Apply styling to the DrawerHeader slots based on the state
  */
 export const useDrawerHeaderStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);
+  const rootStyles = useDrawerHeaderStyles();
+  state.root.className = 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/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeResetStyles, 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 */ const useStyles = makeResetStyles({\n    padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n    gap: tokens.spacingHorizontalS,\n    width: '100%',\n    maxWidth: '100%',\n    alignSelf: 'stretch',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box'\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,4PASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","mpb1vu","Hdbjpj","cnmfks","jc51t6","Bmyypfa","Bkbwdz4","mafdb0","wbfbqe","Jgwf15","Bs6t6z0","Bj55yzk","separatorVisible","d","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { 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    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,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,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;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,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"}

package/lib/components/InlineDrawer/InlineDrawer.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useDrawerContextValue } from '../../contexts/drawerContext';
 import { useInlineDrawer_unstable } from './useInlineDrawer';
 import { renderInlineDrawer_unstable } from './renderInlineDrawer';
 import { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';
@@ -8,9 +9,10 @@ import { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';
  * the main surface, users can still interact with other UI elements.
  */ export const InlineDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useInlineDrawer_unstable(props, ref);
+    const contextValue = useDrawerContextValue();
     useInlineDrawerStyles_unstable(state);
     useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);
     useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);
-    return renderInlineDrawer_unstable(state);
+    return renderInlineDrawer_unstable(state, contextValue);
 });
 InlineDrawer.displayName = 'InlineDrawer';

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

@@ -1 +1 @@
-{"version":3,"sources":["InlineDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport type { InlineDrawerProps } from './InlineDrawer.types';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n\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 */\nexport const InlineDrawer: ForwardRefComponent<InlineDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useInlineDrawer_unstable(props, ref);\n\n  useInlineDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n  useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n\n  return renderInlineDrawer_unstable(state);\n});\n\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useInlineDrawer_unstable","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","InlineDrawer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF;;;CAGC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAC9DR,4BAA4B,kCAAkCQ;IAE9D,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["InlineDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerProps } from './InlineDrawer.types';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n\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 */\nexport const InlineDrawer: ForwardRefComponent<InlineDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useInlineDrawer_unstable(props, ref);\n  const contextValue = useDrawerContextValue();\n\n  useInlineDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n  useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n\n  return renderInlineDrawer_unstable(state, contextValue);\n});\n\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerContextValue","useInlineDrawer_unstable","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","InlineDrawer","forwardRef","props","ref","state","contextValue","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,+BAA+B;AAGrE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF;;;CAGC,GACD,OAAO,MAAMC,6BAAuDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAC9C,MAAME,eAAeT;IAErBG,+BAA+BK;IAC/BT,4BAA4B,kCAAkCS;IAC9DT,4BAA4B,kCAAkCS;IAE9D,OAAON,4BAA4BM,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

package/lib/components/InlineDrawer/renderInlineDrawer.js

@@ -1,11 +1,15 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
+import { DrawerProvider } from '../../contexts/drawerContext';
 /**
  * Render the final JSX of InlineDrawer
- */ export const renderInlineDrawer_unstable = (state)=>{
+ */ export const renderInlineDrawer_unstable = (state, contextValue)=>{
     if (!state.motion.canRender) {
         return null;
     }
     assertSlots(state);
-    return /*#__PURE__*/ _jsx(state.root, {});
+    return /*#__PURE__*/ _jsx(DrawerProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<InlineDrawerSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInlineDrawer_unstable","state","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAA+BE;IAE/B,qBAAO,KAACA,MAAMG,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, 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) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<InlineDrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.root />\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","motion","canRender","value","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpE,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAN,YAA+BG;IAE/B,qBACE,KAACF;QAAeM,OAAOH;kBACrB,cAAA,KAACD,MAAMK,IAAI;;AAGjB,EAAE"}

package/lib/components/OverlayDrawer/OverlayDrawer.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useDrawerContextValue } from '../../contexts/drawerContext';
 import { useOverlayDrawer_unstable } from './useOverlayDrawer';
 import { renderOverlayDrawer_unstable } from './renderOverlayDrawer';
 import { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';
@@ -7,9 +8,10 @@ import { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles
  * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.
  */ export const OverlayDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useOverlayDrawer_unstable(props, ref);
+    const contextValue = useDrawerContextValue();
     useOverlayDrawerStyles_unstable(state);
     useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);
     useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);
-    return renderOverlayDrawer_unstable(state);
+    return renderOverlayDrawer_unstable(state, contextValue);
 });
 OverlayDrawer.displayName = 'OverlayDrawer';

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

@@ -1 +1 @@
-{"version":3,"sources":["OverlayDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\nimport type { OverlayDrawerProps } from './OverlayDrawer.types';\n\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useOverlayDrawer_unstable(props, ref);\n\n  useOverlayDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n  useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n\n  return renderOverlayDrawer_unstable(state);\n});\n\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useOverlayDrawer_unstable","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","OverlayDrawer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAChCR,4BAA4B,mCAAmCQ;IAC/DR,4BAA4B,mCAAmCQ;IAE/D,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["OverlayDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\n\nimport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\nimport type { OverlayDrawerProps } from './OverlayDrawer.types';\n\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useOverlayDrawer_unstable(props, ref);\n  const contextValue = useDrawerContextValue();\n\n  useOverlayDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n  useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n\n  return renderOverlayDrawer_unstable(state, contextValue);\n});\n\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerContextValue","useOverlayDrawer_unstable","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","OverlayDrawer","forwardRef","props","ref","state","contextValue","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,+BAA+B;AAErE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAC/C,MAAME,eAAeT;IAErBG,gCAAgCK;IAChCT,4BAA4B,mCAAmCS;IAC/DT,4BAA4B,mCAAmCS;IAE/D,OAAON,6BAA6BM,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

package/lib/components/OverlayDrawer/renderOverlayDrawer.js

@@ -1,13 +1,17 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
+import { DrawerProvider } from '../../contexts/drawerContext';
 /**
  * Render the final JSX of OverlayDrawer
- */ export const renderOverlayDrawer_unstable = (state)=>{
+ */ export const renderOverlayDrawer_unstable = (state, contextValue)=>{
     if (!state.motion.canRender) {
         return null;
     }
     assertSlots(state);
-    return /*#__PURE__*/ _jsx(state.dialog, {
-        children: /*#__PURE__*/ _jsx(state.root, {})
+    return /*#__PURE__*/ _jsx(DrawerProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx(state.dialog, {
+            children: /*#__PURE__*/ _jsx(state.root, {})
+        })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <state.dialog>\n      <state.root />\n    </state.dialog>\n  );\n};\n"],"names":["assertSlots","renderOverlayDrawer_unstable","state","motion","canRender","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAAwCE;IAExC,qBACE,KAACA,MAAMG,MAAM;kBACX,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState, contextValue: DrawerContextValue) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.dialog>\n        <state.root />\n      </state.dialog>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderOverlayDrawer_unstable","state","contextValue","motion","canRender","value","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtE,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAN,YAAwCG;IAExC,qBACE,KAACF;QAAeM,OAAOH;kBACrB,cAAA,KAACD,MAAMK,MAAM;sBACX,cAAA,KAACL,MAAMM,IAAI;;;AAInB,EAAE"}