@fluentui/react-drawer 9.0.0-beta.32 → 9.0.0-beta.33

package/CHANGELOG.json

@@ -2,7 +2,58 @@
   "name": "@fluentui/react-drawer",
   "entries": [
     {
-      "date": "Thu, 05 Oct 2023 15:18:01 GMT",
+      "date": "Mon, 09 Oct 2023 20:41:55 GMT",
+      "tag": "@fluentui/react-drawer_v9.0.0-beta.33",
+      "version": "9.0.0-beta.33",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-drawer",
+            "commit": "fd51d508488549b816c5d7d0d3f89b2bac2b1065",
+            "comment": "feat: make dialog slot internal to be used for composition only"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-dialog to v9.7.7",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.15",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-motion-preview to v0.3.1",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.10.0",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-tabster to v9.13.5",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-utilities to v9.14.2",
+            "commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 Oct 2023 15:25:35 GMT",
       "tag": "@fluentui/react-drawer_v9.0.0-beta.32",
       "version": "9.0.0-beta.32",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Thu, 05 Oct 2023 15:18:01 GMT and should not be manually modified.
+This log was last generated on Mon, 09 Oct 2023 20:41:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.33](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.33)
+
+Mon, 09 Oct 2023 20:41:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.32..@fluentui/react-drawer_v9.0.0-beta.33)
+
+### Changes
+
+- feat: make dialog slot internal to be used for composition only ([PR #29392](https://github.com/microsoft/fluentui/pull/29392) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-dialog to v9.7.7 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.15 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-motion-preview to v0.3.1 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.10.0 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-tabster to v9.13.5 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+- Bump @fluentui/react-utilities to v9.14.2 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
+
 ## [9.0.0-beta.32](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.32)
 
-Thu, 05 Oct 2023 15:18:01 GMT 
+Thu, 05 Oct 2023 15:25:35 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.31..@fluentui/react-drawer_v9.0.0-beta.32)
 
 ### Changes

package/dist/index.d.ts

@@ -2,9 +2,8 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import { DialogProps } from '@fluentui/react-dialog';
-import { DialogSurfaceProps } from '@fluentui/react-dialog';
-import { DialogSurfaceSlots } from '@fluentui/react-dialog';
+import type { DialogProps } from '@fluentui/react-dialog';
+import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { MotionShorthand } from '@fluentui/react-motion-preview';
 import { MotionState } from '@fluentui/react-motion-preview';
@@ -198,28 +197,53 @@ export declare type DrawerInlineState = Required<ComponentState<DrawerInlineSlot
  */
 export declare const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps>;
 
-export declare const drawerOverlayClassNames: Omit<SlotClassNames<DrawerOverlaySlots>, 'dialog'>;
+export declare const drawerOverlayClassNames: SlotClassNames<DrawerOverlaySurfaceSlots>;
+
+/**
+ * DrawerOverlay internal slots for when using with composition API
+ */
+declare type DrawerOverlayInternalSlots = DrawerOverlaySlots & {
+    /**
+     * Slot for the dialog component that wraps the drawer.
+     */
+    dialog: Slot<DialogProps>;
+};
 
 /**
  * DrawerOverlay Props
  */
 export declare type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> & DrawerBaseProps;
 
-export declare type DrawerOverlaySlots = DialogSurfaceSlots & {
-    root: Slot<DialogSurfaceProps>;
+/**
+ * DrawerOverlay slots
+ */
+export declare type DrawerOverlaySlots = {
     /**
-     * Slot for the dialog component that wraps the drawer.
+     * Slot for the root element.
      */
-    dialog?: Slot<DialogProps>;
+    root: Slot<DrawerOverlaySurfaceProps>;
 };
 
 /**
  * State used in rendering DrawerOverlay
  */
-export declare type DrawerOverlayState = Omit<ComponentState<DrawerOverlaySlots>, 'backdrop'> & Required<DrawerBaseState & {
+export declare type DrawerOverlayState = Omit<ComponentState<DrawerOverlayInternalSlots>, 'backdrop'> & Required<DrawerBaseState & {
+    /**
+     * Motion state for the drawer backdrop.
+     */
     backdropMotion: MotionState<HTMLDivElement>;
 }>;
 
+/**
+ * DrawerOverlaySurface Props
+ */
+declare type DrawerOverlaySurfaceProps = ComponentProps<DrawerOverlaySurfaceSlots>;
+
+/**
+ * DrawerOverlaySurface slots
+ */
+declare type DrawerOverlaySurfaceSlots = DialogSurfaceSlots;
+
 /**
  * Drawer Props
  */

package/lib/components/Drawer/useDrawer.js

@@ -11,8 +11,7 @@ import { DrawerInline } from '../DrawerInline';
  * @param props - props from this instance of Drawer
  * @param ref - reference to root HTMLElement of Drawer
  */ export const useDrawer_unstable = (props, ref)=>{
-    const { type = 'overlay' } = props;
-    const elementType = type === 'overlay' ? DrawerOverlay : DrawerInline;
+    const elementType = props.type === 'inline' ? DrawerInline : DrawerOverlay;
     return {
         components: {
             root: elementType

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { DrawerOverlay } from '../DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n  const { type = 'overlay' } = props;\n\n  const elementType = type === 'overlay' ? DrawerOverlay : DrawerInline;\n\n  return {\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always<DrawerProps>(\n      slot.resolveShorthand({\n        ref,\n        ...props,\n      }),\n      {\n        elementType,\n      },\n    ),\n  };\n};\n"],"names":["React","slot","DrawerOverlay","DrawerInline","useDrawer_unstable","props","ref","type","elementType","components","root","always","resolveShorthand"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,YAAY,QAAQ,kBAAkB;AAE/C;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAM,EAAEC,OAAO,SAAS,EAAE,GAAGF;IAE7B,MAAMG,cAAcD,SAAS,YAAYL,gBAAgBC;IAEzD,OAAO;QACLM,YAAY;YACVC,MAAMF;QACR;QAEAE,MAAMT,KAAKU,MAAM,CACfV,KAAKW,gBAAgB,CAAC;YACpBN;YACA,GAAGD,KAAK;QACV,IACA;YACEG;QACF;IAEJ;AACF,EAAE"}
+{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { DrawerOverlay } from '../DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline';\n\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n  const elementType = props.type === 'inline' ? DrawerInline : DrawerOverlay;\n\n  return {\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always<DrawerProps>(\n      slot.resolveShorthand({\n        ref,\n        ...props,\n      }),\n      {\n        elementType,\n      },\n    ),\n  };\n};\n"],"names":["React","slot","DrawerOverlay","DrawerInline","useDrawer_unstable","props","ref","elementType","type","components","root","always","resolveShorthand"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,YAAY,QAAQ,kBAAkB;AAE/C;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAMC,cAAcF,MAAMG,IAAI,KAAK,WAAWL,eAAeD;IAE7D,OAAO;QACLO,YAAY;YACVC,MAAMH;QACR;QAEAG,MAAMT,KAAKU,MAAM,CACfV,KAAKW,gBAAgB,CAAC;YACpBN;YACA,GAAGD,KAAK;QACV,IACA;YACEE;QACF;IAEJ;AACF,EAAE"}

package/lib/components/DrawerInline/useDrawerInlineStyles.styles.js

@@ -5,7 +5,7 @@ import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../
 export const drawerInlineClassNames = {
   root: 'fui-DrawerInline'
 };
-const useDrawerResetStyles = /*#__PURE__*/__resetStyles("r1aiwccr", "rzg5lxf", [".r1aiwccr{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;overflow-x:hidden;overflow-y:hidden;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:0;border-top-left-radius:0;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}", ".rzg5lxf{padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;overflow-x:hidden;overflow-y:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}"]);
+const useDrawerResetStyles = /*#__PURE__*/__resetStyles("rlrvcho", null, [".rlrvcho{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}"]);
 /**
  * Styles for the root slot
  */

package/lib/components/DrawerInline/useDrawerInlineStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","drawerInlineClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","abs64n","d","useDrawerInlineStyles_unstable","state","resetStyles","baseClassNames","rootStyles","separatorClass","useMemo","separator","undefined","position","className","motion","active"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative',\n    opacity: 0,\n    transitionProperty: 'opacity, transform',\n    willChange: 'opacity, transform'\n});\n/**\n * Styles for the root slot\n */ const separatorValues = [\n    '1px',\n    'solid',\n    tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n    /* Separator */ separatorStart: {\n        ...shorthands.borderRight(...separatorValues)\n    },\n    separatorEnd: {\n        ...shorthands.borderLeft(...separatorValues)\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: `translate3D(0, 0, 0)`\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const resetStyles = useDrawerResetStyles();\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        rootStyles.separatorEnd,\n        rootStyles.separatorStart\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGV,aAAA,+tCAM5B,CAAC;AACF;AACA;AACA;AAAI,MAAMW,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPP,MAAM,CAACQ,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiB3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,WAAW,GAAGpB,oBAAoB,CAAC,CAAC;EAC1C,MAAMqB,cAAc,GAAGxB,uBAAuB,CAACsB,KAAK,CAAC;EACrD,MAAMG,UAAU,GAAGnB,mBAAmB,CAAC,CAAC;EACxC,MAAMoB,cAAc,GAAGlC,KAAK,CAACmC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACL,KAAK,CAACM,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAOP,KAAK,CAACQ,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAAClB,cAAc,GAAGkB,UAAU,CAACd,YAAY;EAC3F,CAAC,EAAE,CACCW,KAAK,CAACQ,QAAQ,EACdR,KAAK,CAACM,SAAS,EACfH,UAAU,CAACd,YAAY,EACvBc,UAAU,CAAClB,cAAc,CAC5B,CAAC;EACFe,KAAK,CAACpB,IAAI,CAAC6B,SAAS,GAAGpC,YAAY,CAACM,sBAAsB,CAACC,IAAI,EAAEqB,WAAW,EAAEC,cAAc,EAAEE,cAAc,EAAED,UAAU,CAACH,KAAK,CAACQ,QAAQ,CAAC,EAAER,KAAK,CAACU,MAAM,CAACC,MAAM,IAAIR,UAAU,CAACP,OAAO,EAAEI,KAAK,CAACpB,IAAI,CAAC6B,SAAS,CAAC;EAC1M,OAAOT,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","drawerInlineClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","abs64n","d","useDrawerInlineStyles_unstable","state","resetStyles","baseClassNames","rootStyles","separatorClass","useMemo","separator","undefined","position","className","motion","active"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative',\n    opacity: 0,\n    transitionProperty: 'opacity, transform',\n    willChange: 'opacity, transform'\n});\n/**\n * Styles for the root slot\n */ const separatorValues = [\n    '1px',\n    'solid',\n    tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n    /* Separator */ separatorStart: {\n        ...shorthands.borderRight(...separatorValues)\n    },\n    separatorEnd: {\n        ...shorthands.borderLeft(...separatorValues)\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: `translate3D(0, 0, 0)`\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const resetStyles = useDrawerResetStyles();\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        rootStyles.separatorEnd,\n        rootStyles.separatorStart\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGV,aAAA,+aAM5B,CAAC;AACF;AACA;AACA;AAAI,MAAMW,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPP,MAAM,CAACQ,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiB3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,WAAW,GAAGpB,oBAAoB,CAAC,CAAC;EAC1C,MAAMqB,cAAc,GAAGxB,uBAAuB,CAACsB,KAAK,CAAC;EACrD,MAAMG,UAAU,GAAGnB,mBAAmB,CAAC,CAAC;EACxC,MAAMoB,cAAc,GAAGlC,KAAK,CAACmC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACL,KAAK,CAACM,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAOP,KAAK,CAACQ,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAAClB,cAAc,GAAGkB,UAAU,CAACd,YAAY;EAC3F,CAAC,EAAE,CACCW,KAAK,CAACQ,QAAQ,EACdR,KAAK,CAACM,SAAS,EACfH,UAAU,CAACd,YAAY,EACvBc,UAAU,CAAClB,cAAc,CAC5B,CAAC;EACFe,KAAK,CAACpB,IAAI,CAAC6B,SAAS,GAAGpC,YAAY,CAACM,sBAAsB,CAACC,IAAI,EAAEqB,WAAW,EAAEC,cAAc,EAAEE,cAAc,EAAED,UAAU,CAACH,KAAK,CAACQ,QAAQ,CAAC,EAAER,KAAK,CAACU,MAAM,CAACC,MAAM,IAAIR,UAAU,CAACP,OAAO,EAAEI,KAAK,CAACpB,IAAI,CAAC6B,SAAS,CAAC;EAC1M,OAAOT,KAAK;AAChB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerOverlay.types.ts"],"sourcesContent":["import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MotionState } from '@fluentui/react-motion-preview';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type DrawerOverlaySlots = DialogSurfaceSlots & {\n  root: Slot<DialogSurfaceProps>;\n\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog?: Slot<DialogProps>;\n};\n\n/**\n * DrawerOverlay Props\n */\nexport type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> &\n  DrawerBaseProps;\n\n/**\n * State used in rendering DrawerOverlay\n */\nexport type DrawerOverlayState = Omit<ComponentState<DrawerOverlaySlots>, 'backdrop'> &\n  Required<\n    DrawerBaseState & {\n      backdropMotion: MotionState<HTMLDivElement>;\n    }\n  >;\n"],"names":[],"mappings":"AAAA,WA8BI"}
+{"version":3,"sources":["DrawerOverlay.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MotionState } from '@fluentui/react-motion-preview';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface';\n\n/**\n * DrawerOverlay slots\n */\nexport type DrawerOverlaySlots = {\n  /**\n   * Slot for the root element.\n   */\n  root: Slot<DrawerOverlaySurfaceProps>;\n};\n\n/**\n * DrawerOverlay internal slots for when using with composition API\n */\nexport type DrawerOverlayInternalSlots = DrawerOverlaySlots & {\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog: Slot<DialogProps>;\n};\n\n/**\n * DrawerOverlay Props\n */\nexport type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> &\n  DrawerBaseProps;\n\n/**\n * State used in rendering DrawerOverlay\n */\nexport type DrawerOverlayState = Omit<ComponentState<DrawerOverlayInternalSlots>, 'backdrop'> &\n  Required<\n    DrawerBaseState & {\n      /**\n       * Motion state for the drawer backdrop.\n       */\n      backdropMotion: MotionState<HTMLDivElement>;\n    }\n  >;\n"],"names":[],"mappings":"AAAA,WA6CI"}

package/lib/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useDialogSurface_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from '@fluentui/react-dialog';
+import { useDrawerOverlaySurfaceStyles_unstable } from './useDrawerOverlaySurfaceStyles.styles';
+/**
+ * @internal
+ * DrawerOverlaySurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.
+ */ export const DrawerOverlaySurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const dialogSurfaceState = useDialogSurface_unstable(props, ref);
+    const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);
+    useDrawerOverlaySurfaceStyles_unstable(dialogSurfaceState);
+    return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);
+});
+DrawerOverlaySurface.displayName = 'DrawerOverlaySurface';

package/lib/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DrawerOverlaySurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  useDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from '@fluentui/react-dialog';\n\nimport { useDrawerOverlaySurfaceStyles_unstable } from './useDrawerOverlaySurfaceStyles.styles';\nimport type { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface.types';\n\n/**\n * @internal\n * DrawerOverlaySurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */\nexport const DrawerOverlaySurface: ForwardRefComponent<DrawerOverlaySurfaceProps> = React.forwardRef((props, ref) => {\n  const dialogSurfaceState = useDialogSurface_unstable(props, ref);\n  const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n\n  useDrawerOverlaySurfaceStyles_unstable(dialogSurfaceState);\n\n  return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\n\nDrawerOverlaySurface.displayName = 'DrawerOverlaySurface';\n"],"names":["React","useDialogSurface_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","useDrawerOverlaySurfaceStyles_unstable","DrawerOverlaySurface","forwardRef","props","ref","dialogSurfaceState","dialogSurfaceContextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SACEC,yBAAyB,EACzBC,sCAAsC,EACtCC,4BAA4B,QACvB,yBAAyB;AAEhC,SAASC,sCAAsC,QAAQ,yCAAyC;AAGhG;;;CAGC,GACD,OAAO,MAAMC,qCAAuEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,qBAAqBR,0BAA0BM,OAAOC;IAC5D,MAAME,6BAA6BR,uCAAuCO;IAE1EL,uCAAuCK;IAEvC,OAAON,6BAA6BM,oBAAoBC;AAC1D,GAAG;AAEHL,qBAAqBM,WAAW,GAAG"}

package/lib/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DrawerOverlaySurface.types.ts"],"sourcesContent":["import type { DialogSurfaceSlots, DialogSurfaceState } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\n\n/**\n * DrawerOverlaySurface slots\n */\nexport type DrawerOverlaySurfaceSlots = DialogSurfaceSlots;\n\n/**\n * DrawerOverlaySurface Props\n */\nexport type DrawerOverlaySurfaceProps = ComponentProps<DrawerOverlaySurfaceSlots>;\n\n/**\n * State used in rendering DrawerOverlaySurface\n */\nexport type DrawerOverlaySurfaceState = ComponentState<DrawerOverlaySurfaceSlots> & DialogSurfaceState;\n"],"names":[],"mappings":"AAAA,WAgBuG"}

package/lib/components/DrawerOverlay/DrawerOverlaySurface/index.js

@@ -0,0 +1,2 @@
+export * from './DrawerOverlaySurface';
+export * from './DrawerOverlaySurface.types';

package/lib/components/DrawerOverlay/DrawerOverlaySurface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DrawerOverlaySurface';\nexport * from './DrawerOverlaySurface.types';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,+BAA+B"}

package/lib/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.js

@@ -0,0 +1,29 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const drawerOverlaySurfaceClassNames = {
+  root: 'fui-DrawerOverlaySurface',
+  backdrop: 'fui-DrawerOverlaySurface__backdrop'
+};
+/**
+ * Styles for the backdrop slot
+ */
+const useBackdropResetStyles = /*#__PURE__*/__resetStyles("rivxbo", "r1trjn1z", [".rivxbo{top:0px;right:0px;bottom:0px;left:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}", ".r1trjn1z{top:0px;left:0px;bottom:0px;right:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}"]);
+const useBackdropStyles = /*#__PURE__*/__styles({
+  nested: {
+    De3pzq: "f1c21dwh"
+  }
+}, {
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}"]
+});
+/**
+ * Apply styling to the DrawerOverlaySurface slots based on the state
+ */
+export const useDrawerOverlaySurfaceStyles_unstable = state => {
+  const backdropResetStyles = useBackdropResetStyles();
+  const backdropStyles = useBackdropStyles();
+  if (state.backdrop) {
+    state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useDrawerOverlaySurfaceStyles.styles.js.map

package/lib/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerOverlaySurfaceClassNames","root","backdrop","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useDrawerOverlaySurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","className","isNestedDialog"],"sources":["useDrawerOverlaySurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerOverlaySurfaceClassNames = {\n    root: 'fui-DrawerOverlaySurface',\n    backdrop: 'fui-DrawerOverlaySurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n    ...shorthands.inset('0px'),\n    position: 'fixed',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)'\n});\nconst useBackdropStyles = makeStyles({\n    nested: {\n        backgroundColor: tokens.colorTransparentBackground\n    }\n});\n/**\n * Apply styling to the DrawerOverlaySurface slots based on the state\n */ export const useDrawerOverlaySurfaceStyles_unstable = (state)=>{\n    const backdropResetStyles = useBackdropResetStyles();\n    const backdropStyles = useBackdropStyles();\n    if (state.backdrop) {\n        state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGR,aAAA,qOAIlC,CAAC;AACF,MAAMS,iBAAiB,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C,IAAIK,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACU,SAAS,GAAGf,YAAY,CAACa,mBAAmB,EAAED,KAAK,CAACI,cAAc,IAAIF,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACP,QAAQ,CAACU,SAAS,CAAC;EACzI;EACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/DrawerOverlay/renderDrawerOverlay.js

@@ -3,7 +3,7 @@ import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerOverlay
  */ export const renderDrawerOverlay_unstable = (state)=>{
-    if (!state.dialog || !state.motion.canRender) {
+    if (!state.motion.canRender) {
         return null;
     }
     assertSlots(state);

package/lib/components/DrawerOverlay/renderDrawerOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  if (!state.dialog || !state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <state.dialog>\n      <state.root />\n    </state.dialog>\n  );\n};\n"],"names":["assertSlots","renderDrawerOverlay_unstable","state","dialog","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QAC5C,OAAO;IACT;IAEAL,YAAgCE;IAEhC,qBACE,KAACA,MAAMC,MAAM;kBACX,cAAA,KAACD,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerOverlayState, DrawerOverlayInternalSlots } from './DrawerOverlay.types';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerOverlayInternalSlots>(state);\n\n  return (\n    <state.dialog>\n      <state.root />\n    </state.dialog>\n  );\n};\n"],"names":["assertSlots","renderDrawerOverlay_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"}

package/lib/components/DrawerOverlay/useDrawerOverlay.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { slot, useMergedRefs } from '@fluentui/react-utilities';
-import { Dialog, DialogSurface } from '@fluentui/react-dialog';
+import { Dialog } from '@fluentui/react-dialog';
 import { useMotion } from '@fluentui/react-motion-preview';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
+import { DrawerOverlaySurface } from './DrawerOverlaySurface';
 /**
  * Create the state required to render DrawerOverlay.
  *
@@ -16,38 +17,38 @@ import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
     const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
     const drawerMotion = useMotion(open);
     const backdropMotion = useMotion(open);
-    const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;
+    const backdropInnerProps = slot.resolveShorthand(props.backdrop);
+    const hasCustomBackdrop = modalType !== 'non-modal' && backdropInnerProps !== null;
+    const backdropProps = {
+        ...backdropInnerProps,
+        ref: useMergedRefs(backdropMotion.ref, backdropInnerProps === null || backdropInnerProps === void 0 ? void 0 : backdropInnerProps.ref)
+    };
     const root = slot.always({
         ...props,
-        ref: useMergedRefs(ref, drawerMotion.ref)
+        backdrop: hasCustomBackdrop ? backdropProps : null
     }, {
-        elementType: DialogSurface,
+        elementType: DrawerOverlaySurface,
         defaultProps: {
-            backdrop: slot.optional(props.backdrop, {
-                elementType: 'div',
-                renderByDefault: hasCustomBackdrop,
-                defaultProps: {
-                    ref: backdropMotion.ref
-                }
-            })
+            ref: useMergedRefs(ref, drawerMotion.ref)
         }
     });
-    const dialog = slot.optional(props.dialog, {
-        elementType: Dialog,
-        renderByDefault: true,
-        defaultProps: {
-            open: true,
-            defaultOpen,
-            onOpenChange,
-            inertTrapFocus,
-            modalType
-        }
+    const dialog = slot.always({
+        open: true,
+        defaultOpen,
+        onOpenChange,
+        inertTrapFocus,
+        modalType,
+        /*
+       * children is not needed here because we construct the children in the render function,
+       * but it's required by DialogProps
+       */ children: null
+    }, {
+        elementType: Dialog
     });
     return {
         components: {
-            root: DialogSurface,
-            dialog: Dialog,
-            backdrop: 'div'
+            root: DrawerOverlaySurface,
+            dialog: Dialog
         },
         root,
         dialog,

package/lib/components/DrawerOverlay/useDrawerOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog, DialogSurface } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\n\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerOverlayState => {\n  const { open, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n\n  const drawerMotion = useMotion<HTMLDivElement>(open);\n  const backdropMotion = useMotion<HTMLDivElement>(open);\n\n  const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n\n  const root = slot.always(\n    {\n      ...props,\n      ref: useMergedRefs(ref, drawerMotion.ref),\n    },\n    {\n      elementType: DialogSurface,\n      defaultProps: {\n        backdrop: slot.optional(props.backdrop, {\n          elementType: 'div',\n          renderByDefault: hasCustomBackdrop,\n          defaultProps: {\n            ref: backdropMotion.ref,\n          },\n        }),\n      },\n    },\n  );\n\n  const dialog = slot.optional(props.dialog, {\n    elementType: Dialog,\n    renderByDefault: true,\n    defaultProps: {\n      open: true,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    },\n  });\n\n  return {\n    components: {\n      root: DialogSurface,\n      dialog: Dialog,\n      backdrop: 'div',\n    },\n\n    root,\n    dialog,\n\n    size,\n    position,\n    motion: drawerMotion,\n    backdropMotion,\n  };\n};\n"],"names":["React","slot","useMergedRefs","Dialog","DialogSurface","useMotion","useDrawerDefaultProps","useDrawerOverlay_unstable","props","ref","open","size","position","modalType","inertTrapFocus","defaultOpen","onOpenChange","drawerMotion","backdropMotion","hasCustomBackdrop","backdrop","root","always","elementType","defaultProps","optional","renderByDefault","dialog","components","motion"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,MAAM,EAAEC,aAAa,QAAQ,yBAAyB;AAC/D,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,sBAAsBE;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGR;IAEnF,MAAMS,eAAeZ,UAA0BK;IAC/C,MAAMQ,iBAAiBb,UAA0BK;IAEjD,MAAMS,oBAAoBN,cAAc,eAAeL,MAAMY,QAAQ,KAAK;IAE1E,MAAMC,OAAOpB,KAAKqB,MAAM,CACtB;QACE,GAAGd,KAAK;QACRC,KAAKP,cAAcO,KAAKQ,aAAaR,GAAG;IAC1C,GACA;QACEc,aAAanB;QACboB,cAAc;YACZJ,UAAUnB,KAAKwB,QAAQ,CAACjB,MAAMY,QAAQ,EAAE;gBACtCG,aAAa;gBACbG,iBAAiBP;gBACjBK,cAAc;oBACZf,KAAKS,eAAeT,GAAG;gBACzB;YACF;QACF;IACF;IAGF,MAAMkB,SAAS1B,KAAKwB,QAAQ,CAACjB,MAAMmB,MAAM,EAAE;QACzCJ,aAAapB;QACbuB,iBAAiB;QACjBF,cAAc;YACZd,MAAM;YACNK;YACAC;YACAF;YACAD;QACF;IACF;IAEA,OAAO;QACLe,YAAY;YACVP,MAAMjB;YACNuB,QAAQxB;YACRiB,UAAU;QACZ;QAEAC;QACAM;QAEAhB;QACAC;QACAiB,QAAQZ;QACRC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\nimport { DrawerOverlaySurface } from './DrawerOverlaySurface';\n\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerOverlayState => {\n  const { open, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n\n  const drawerMotion = useMotion<HTMLDivElement>(open);\n  const backdropMotion = useMotion<HTMLDivElement>(open);\n\n  const backdropInnerProps = slot.resolveShorthand(props.backdrop);\n  const hasCustomBackdrop = modalType !== 'non-modal' && backdropInnerProps !== null;\n\n  const backdropProps = {\n    ...backdropInnerProps,\n    ref: useMergedRefs(backdropMotion.ref, backdropInnerProps?.ref),\n  };\n  const root = slot.always(\n    {\n      ...props,\n      backdrop: hasCustomBackdrop ? backdropProps : null,\n    },\n    {\n      elementType: DrawerOverlaySurface,\n      defaultProps: {\n        ref: useMergedRefs(ref, drawerMotion.ref),\n      },\n    },\n  );\n\n  const dialog = slot.always(\n    {\n      open: true,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n      /*\n       * children is not needed here because we construct the children in the render function,\n       * but it's required by DialogProps\n       */\n      children: null as unknown as JSX.Element,\n    },\n    {\n      elementType: Dialog,\n    },\n  );\n\n  return {\n    components: {\n      root: DrawerOverlaySurface,\n      dialog: Dialog,\n    },\n\n    root,\n    dialog,\n\n    size,\n    position,\n    motion: drawerMotion,\n    backdropMotion,\n  };\n};\n"],"names":["React","slot","useMergedRefs","Dialog","useMotion","useDrawerDefaultProps","DrawerOverlaySurface","useDrawerOverlay_unstable","props","ref","open","size","position","modalType","inertTrapFocus","defaultOpen","onOpenChange","drawerMotion","backdropMotion","backdropInnerProps","resolveShorthand","backdrop","hasCustomBackdrop","backdropProps","root","always","elementType","defaultProps","dialog","children","components","motion"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGP,sBAAsBG;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGR;IAEnF,MAAMS,eAAeb,UAA0BM;IAC/C,MAAMQ,iBAAiBd,UAA0BM;IAEjD,MAAMS,qBAAqBlB,KAAKmB,gBAAgB,CAACZ,MAAMa,QAAQ;IAC/D,MAAMC,oBAAoBT,cAAc,eAAeM,uBAAuB;IAE9E,MAAMI,gBAAgB;QACpB,GAAGJ,kBAAkB;QACrBV,KAAKP,cAAcgB,eAAeT,GAAG,EAAEU,+BAAAA,yCAAAA,mBAAoBV,GAAG;IAChE;IACA,MAAMe,OAAOvB,KAAKwB,MAAM,CACtB;QACE,GAAGjB,KAAK;QACRa,UAAUC,oBAAoBC,gBAAgB;IAChD,GACA;QACEG,aAAapB;QACbqB,cAAc;YACZlB,KAAKP,cAAcO,KAAKQ,aAAaR,GAAG;QAC1C;IACF;IAGF,MAAMmB,SAAS3B,KAAKwB,MAAM,CACxB;QACEf,MAAM;QACNK;QACAC;QACAF;QACAD;QACA;;;OAGC,GACDgB,UAAU;IACZ,GACA;QACEH,aAAavB;IACf;IAGF,OAAO;QACL2B,YAAY;YACVN,MAAMlB;YACNsB,QAAQzB;QACV;QAEAqB;QACAI;QAEAjB;QACAC;QACAmB,QAAQd;QACRC;IACF;AACF,EAAE"}

package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { __styles, mergeClasses } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';
 export const drawerOverlayClassNames = {
   root: 'fui-DrawerOverlay',
@@ -9,39 +10,8 @@ export const drawerOverlayClassNames = {
 /**
  * Styles for the root slot
  */
+const useDrawerResetStyles = /*#__PURE__*/__resetStyles("rspikg4", "r195rwb6", [".rspikg4{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;opacity:0;box-shadow:0px var(--colorTransparentBackground);transition-property:transform,box-shadow,opacity;will-change:transform,box-shadow,opacity;}", ".rspikg4:focus{outline-style:none;}", ".rspikg4:focus-visible{outline-style:none;}", ".rspikg4[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rspikg4[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r195rwb6{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;opacity:0;box-shadow:0px var(--colorTransparentBackground);transition-property:transform,box-shadow,opacity;will-change:transform,box-shadow,opacity;}", ".r195rwb6:focus{outline-style:none;}", ".r195rwb6:focus-visible{outline-style:none;}", ".r195rwb6[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r195rwb6[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"]);
 const useDrawerRootStyles = /*#__PURE__*/__styles({
-  root: {
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1cnd47f", "fhxju0i"],
-    B68tc82: "f1p9o1ba",
-    Bmxbyg5: "f1sil6mw",
-    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
-    Beyfa6y: ["f1deotkl", "f1krrbdw"],
-    B7oj6ja: ["f10ostut", "f1ozlkrg"],
-    Btl43ni: ["f1ozlkrg", "f10ostut"],
-    B4j52fo: "fre7gi1",
-    Bekrc4i: ["f1358rze", "f1rvrf73"],
-    Bn0qgzm: "fqdk4by",
-    ibv6hh: ["f1rvrf73", "f1358rze"],
-    a9b677: "f3rx6dk",
-    B2u0y6b: "f1w39fev",
-    Bqenvij: "f11ysow2",
-    B7ck84d: "f1ewtqcl",
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
-    Bt984gj: "f6jr5hl",
-    Brf1p80: "fbhxue7",
-    De3pzq: "fxugw4r",
-    qhf8xq: "f19dog8a",
-    Bhzewxz: "f15twtuk",
-    B5kzvoi: "f1yab3r1",
-    abs64n: "fk73vx1",
-    E5pizo: "fliqkoi",
-    Bmy1vo4: "f1neo61",
-    Es3by: "f1ytgekk"
-  },
   start: {
     Bz10aip: "f1d8gkik"
   },
@@ -54,12 +24,12 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
     E5pizo: "f10nrhrw"
   }
 }, {
-  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f3rx6dk{width:var(--fui-Drawer--size);}", ".f1w39fev{max-width:100vw;}", ".f11ysow2{height:auto;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f6jr5hl{align-items:flex-start;}", ".fbhxue7{justify-content:flex-start;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19dog8a{position:fixed;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fk73vx1{opacity:0;}", ".fliqkoi{box-shadow:0px transparent;}", ".f1neo61{transition-property:transform,box-shadow,opacity;}", ".f1ytgekk{will-change:transform,box-shadow,opacity;}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}", ".f10nrhrw{box-shadow:var(--shadow64);}"]
+  d: [".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}", ".f10nrhrw{box-shadow:var(--shadow64);}"]
 });
 /**
  * Styles for the backdrop slot
  */
-const useBackdropMotionStyles = /*#__PURE__*/__styles({
+const useBackdropStyles = /*#__PURE__*/__styles({
   backdrop: {
     abs64n: "fk73vx1",
     Bmy1vo4: "f13u1uyl",
@@ -77,13 +47,14 @@ const useBackdropMotionStyles = /*#__PURE__*/__styles({
  */
 export const useDrawerOverlayStyles_unstable = state => {
   const baseClassNames = useDrawerBaseClassNames(state);
+  const resetStyles = useDrawerResetStyles();
   const rootStyles = useDrawerRootStyles();
-  const backdropMotionStyles = useBackdropMotionStyles();
+  const backdropStyles = useBackdropStyles();
   const durationStyles = useDrawerDurationStyles();
   const backdrop = state.root.backdrop;
-  state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
+  state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
   if (backdrop) {
-    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);
+    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropStyles.visible, backdrop.className);
   }
   return state;
 };

package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","drawerOverlayClassNames","root","backdrop","useDrawerRootStyles","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","a9b677","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","useDrawerOverlayStyles_unstable","state","baseClassNames","rootStyles","backdropMotionStyles","durationStyles","className","position","motion","active","size","backdropMotion"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay',\n    backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerRootStyles = makeStyles({\n    root: {\n        ...drawerDefaultStyles,\n        position: 'fixed',\n        top: 0,\n        bottom: 0,\n        opacity: 0,\n        boxShadow: '0px transparent',\n        transitionProperty: 'transform, box-shadow, opacity',\n        willChange: 'transform, box-shadow, opacity'\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)',\n        boxShadow: tokens.shadow64\n    }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n    backdrop: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    visible: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const backdropMotionStyles = useBackdropMotionStyles();\n    const durationStyles = useDrawerDurationStyles();\n    const backdrop = state.root.backdrop;\n    state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,mBAAmB,gBAAGV,QAAA;EAAAQ,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAP,MAAA;IAAAK,OAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAO,CAAA;AAAA,CAsB/B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,uBAAuB,gBAAG9C,QAAA;EAAAS,QAAA;IAAA4B,MAAA;IAAAE,OAAA;IAAAQ,OAAA;IAAAP,KAAA;EAAA;EAAAI,OAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAG7C,uBAAuB,CAAC4C,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGzC,mBAAmB,CAAC,CAAC;EACxC,MAAM0C,oBAAoB,GAAGN,uBAAuB,CAAC,CAAC;EACtD,MAAMO,cAAc,GAAG/C,uBAAuB,CAAC,CAAC;EAChD,MAAMG,QAAQ,GAAGwC,KAAK,CAACzC,IAAI,CAACC,QAAQ;EACpCwC,KAAK,CAACzC,IAAI,CAAC8C,SAAS,GAAGrD,YAAY,CAACM,uBAAuB,CAACC,IAAI,EAAE0C,cAAc,EAAEC,UAAU,CAAC3C,IAAI,EAAE2C,UAAU,CAACF,KAAK,CAACM,QAAQ,CAAC,EAAEN,KAAK,CAACO,MAAM,CAACC,MAAM,IAAIN,UAAU,CAACP,OAAO,EAAEK,KAAK,CAACzC,IAAI,CAAC8C,SAAS,CAAC;EAC/L,IAAI7C,QAAQ,EAAE;IACVA,QAAQ,CAAC6C,SAAS,GAAGrD,YAAY,CAACM,uBAAuB,CAACE,QAAQ,EAAE2C,oBAAoB,CAAC3C,QAAQ,EAAE4C,cAAc,CAACJ,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACU,cAAc,CAACF,MAAM,IAAIL,oBAAoB,CAACR,OAAO,EAAEnC,QAAQ,CAAC6C,SAAS,CAAC;EACnN;EACA,OAAOL,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","drawerOverlayClassNames","root","backdrop","useDrawerResetStyles","useDrawerRootStyles","start","Bz10aip","end","visible","abs64n","E5pizo","d","useBackdropStyles","Bmy1vo4","Bkqvd7p","Es3by","useDrawerOverlayStyles_unstable","state","baseClassNames","resetStyles","rootStyles","backdropStyles","durationStyles","className","position","motion","active","size","backdropMotion"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay',\n    backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    ...drawerDefaultStyles,\n    position: 'fixed',\n    top: 0,\n    bottom: 0,\n    opacity: 0,\n    boxShadow: `0px ${tokens.colorTransparentBackground}`,\n    transitionProperty: 'transform, box-shadow, opacity',\n    willChange: 'transform, box-shadow, opacity'\n});\nconst useDrawerRootStyles = makeStyles({\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)',\n        boxShadow: tokens.shadow64\n    }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropStyles = makeStyles({\n    backdrop: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    visible: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const resetStyles = useDrawerResetStyles();\n    const rootStyles = useDrawerRootStyles();\n    const backdropStyles = useBackdropStyles();\n    const durationStyles = useDrawerDurationStyles();\n    const backdrop = state.root.backdrop;\n    state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropStyles.visible, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGZ,aAAA,68FAUhC,CAAC;AACF,MAAMa,mBAAmB,gBAAGZ,QAAA;EAAAa,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAC,MAAA;IAAAH,OAAA;IAAAI,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAY3B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,iBAAiB,gBAAGpB,QAAA;EAAAU,QAAA;IAAAO,MAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAP,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAU7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAGpB,uBAAuB,CAACmB,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGhB,oBAAoB,CAAC,CAAC;EAC1C,MAAMiB,UAAU,GAAGhB,mBAAmB,CAAC,CAAC;EACxC,MAAMiB,cAAc,GAAGT,iBAAiB,CAAC,CAAC;EAC1C,MAAMU,cAAc,GAAGvB,uBAAuB,CAAC,CAAC;EAChD,MAAMG,QAAQ,GAAGe,KAAK,CAAChB,IAAI,CAACC,QAAQ;EACpCe,KAAK,CAAChB,IAAI,CAACsB,SAAS,GAAG9B,YAAY,CAACO,uBAAuB,CAACC,IAAI,EAAEiB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACO,QAAQ,CAAC,EAAEP,KAAK,CAACQ,MAAM,CAACC,MAAM,IAAIN,UAAU,CAACZ,OAAO,EAAES,KAAK,CAAChB,IAAI,CAACsB,SAAS,CAAC;EAC3L,IAAIrB,QAAQ,EAAE;IACVA,QAAQ,CAACqB,SAAS,GAAG9B,YAAY,CAACO,uBAAuB,CAACE,QAAQ,EAAEmB,cAAc,CAACnB,QAAQ,EAAEoB,cAAc,CAACL,KAAK,CAACU,IAAI,CAAC,EAAEV,KAAK,CAACW,cAAc,CAACF,MAAM,IAAIL,cAAc,CAACb,OAAO,EAAEN,QAAQ,CAACqB,SAAS,CAAC;EACvM;EACA,OAAON,KAAK;AAChB,CAAC"}

package/lib/shared/useDrawerBaseStyles.styles.js

@@ -10,19 +10,18 @@ export const drawerCSSVars = {
  * Default shared styles for the Drawer component
  */
 export const drawerDefaultStyles = {
-  ... /*#__PURE__*/shorthands.padding(0),
   ... /*#__PURE__*/shorthands.overflow('hidden'),
-  ... /*#__PURE__*/shorthands.borderRadius(0),
-  ... /*#__PURE__*/shorthands.border(0),
   width: `var(${drawerCSSVars.drawerSizeVar})`,
   maxWidth: '100vw',
   height: 'auto',
+  maxHeight: '100vh',
   boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
   justifyContent: 'flex-start',
-  backgroundColor: tokens.colorNeutralBackground1
+  backgroundColor: tokens.colorNeutralBackground1,
+  color: tokens.colorNeutralForeground1
 };
 /**
  * Shared dynamic styles for the Drawer component

package/lib/shared/useDrawerBaseStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","padding","overflow","borderRadius","border","width","maxWidth","height","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","useDrawerStyles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","oyh7mz","j35jbq","end","small","Bjr0ffy","medium","large","full","d","m","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n    ...shorthands.padding(0),\n    ...shorthands.overflow('hidden'),\n    ...shorthands.borderRadius(0),\n    ...shorthands.border(0),\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerDurationStyles = makeStyles({\n    small: {\n        transitionDuration: tokens.durationGentle\n    },\n    medium: {\n        transitionDuration: tokens.durationSlow\n    },\n    large: {\n        transitionDuration: tokens.durationSlower\n    },\n    full: {\n        transitionDuration: tokens.durationUltraSlow\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n    const baseStyles = useDrawerStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnC,iBAAGJ,UAAU,CAACK,OAAO,CAAC,CAAC,CAAC;EACxB,iBAAGL,UAAU,CAACM,QAAQ,CAAC,QAAQ,CAAC;EAChC,iBAAGN,UAAU,CAACO,YAAY,CAAC,CAAC,CAAC;EAC7B,iBAAGP,UAAU,CAACQ,MAAM,CAAC,CAAC,CAAC;EACvBC,KAAK,EAAG,OAAMP,aAAa,CAACC,aAAc,GAAE;EAC5CO,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEhB,MAAM,CAACiB;AAC5B,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGrB,QAAA;EAAAsB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAD,MAAA;IAAAD,MAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAgC3B,CAAC;AACF,OAAO,MAAMC,uBAAuB,gBAAGtC,QAAA;EAAA+B,KAAA;IAAAQ,OAAA;EAAA;EAAAN,MAAA;IAAAM,OAAA;EAAA;EAAAL,KAAA;IAAAK,OAAA;EAAA;EAAAJ,IAAA;IAAAI,OAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMI,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAGvB,eAAe,CAAC,CAAC;EACpC,MAAMwB,cAAc,GAAGP,uBAAuB,CAAC,CAAC;EAChD,OAAOrC,YAAY,CAAC2C,UAAU,CAACH,QAAQ,CAAC,EAAEI,cAAc,CAACH,IAAI,CAAC,EAAEE,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAACnB,aAAa,EAAEkB,MAAM,CAACG,IAAI,KAAK,UAAU,IAAIF,UAAU,CAACtB,QAAQ,EAAEqB,MAAM,CAACG,IAAI,KAAK,SAAS,IAAIF,UAAU,CAACpB,OAAO,CAAC;AACnN,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","oyh7mz","j35jbq","end","small","Bjr0ffy","medium","large","full","d","m","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n    ...shorthands.overflow('hidden'),\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerDurationStyles = makeStyles({\n    small: {\n        transitionDuration: tokens.durationGentle\n    },\n    medium: {\n        transitionDuration: tokens.durationSlow\n    },\n    large: {\n        transitionDuration: tokens.durationSlower\n    },\n    full: {\n        transitionDuration: tokens.durationUltraSlow\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n    const baseStyles = useDrawerStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnC,iBAAGJ,UAAU,CAACK,QAAQ,CAAC,QAAQ,CAAC;EAChCC,KAAK,EAAG,OAAMJ,aAAa,CAACC,aAAc,GAAE;EAC5CI,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,OAAO;EAClBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEd,MAAM,CAACe,uBAAuB;EAC/CC,KAAK,EAAEhB,MAAM,CAACiB;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGrB,QAAA;EAAAsB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAD,MAAA;IAAAD,MAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAgC3B,CAAC;AACF,OAAO,MAAMC,uBAAuB,gBAAGtC,QAAA;EAAA+B,KAAA;IAAAQ,OAAA;EAAA;EAAAN,MAAA;IAAAM,OAAA;EAAA;EAAAL,KAAA;IAAAK,OAAA;EAAA;EAAAJ,IAAA;IAAAI,OAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMI,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAGvB,eAAe,CAAC,CAAC;EACpC,MAAMwB,cAAc,GAAGP,uBAAuB,CAAC,CAAC;EAChD,OAAOrC,YAAY,CAAC2C,UAAU,CAACH,QAAQ,CAAC,EAAEI,cAAc,CAACH,IAAI,CAAC,EAAEE,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAACnB,aAAa,EAAEkB,MAAM,CAACG,IAAI,KAAK,UAAU,IAAIF,UAAU,CAACtB,QAAQ,EAAEqB,MAAM,CAACG,IAAI,KAAK,SAAS,IAAIF,UAAU,CAACpB,OAAO,CAAC;AACnN,CAAC"}