@fluentui/react-drawer 9.3.2 → 9.4.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Mon, 20 May 2024 12:36:31 GMT and should not be manually modified.
+This log was last generated on Thu, 23 May 2024 07:57:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.4.0)
+
+Thu, 23 May 2024 07:57:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.3.2..@fluentui/react-drawer_v9.4.0)
+
+### Minor changes
+
+- deprecate: defaultOpen as it is not being used ([PR #31435](https://github.com/microsoft/fluentui/pull/31435) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-dialog to v9.10.7 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+
+### Patches
+
+- fix(OverlayDrawer): unlock scroll when reduced motion is enabled ([PR #31380](https://github.com/microsoft/fluentui/pull/31380) by olfedias@microsoft.com)
+- chore: replace usage of .shorthands() in styles ([PR #31448](https://github.com/microsoft/fluentui/pull/31448) by olfedias@microsoft.com)
+
 ## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.3.2)
 
-Mon, 20 May 2024 12:36:31 GMT 
+Mon, 20 May 2024 12:44:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.3.1..@fluentui/react-drawer_v9.3.2)
 
 ### Patches

package/dist/index.d.ts

@@ -283,7 +283,13 @@ declare type OverlayDrawerInternalSlots = OverlayDrawerSlots & {
 /**
  * OverlayDrawer Props
  */
-export declare type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> & DrawerBaseProps;
+export declare type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'> & DrawerBaseProps & {
+    /**
+     * @deprecated OverlayDrawer can work only as a controlled component
+     * and does not support uncontrolled mode i.e. defaultOpen prop
+     */
+    defaultOpen?: boolean;
+};
 
 /**
  * OverlayDrawer slots

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

@@ -1,4 +1,4 @@
-import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
 import { useMotionClassNames } from '@fluentui/react-motion-preview';
@@ -9,22 +9,25 @@ const useDrawerResetStyles = /*#__PURE__*/__resetStyles("rkjj3x6", null, [".rkjj
 /**
  * Styles for the root slot
  */
-const separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];
+const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;
 const useDrawerRootStyles = /*#__PURE__*/__styles({
   separatorStart: {
-    Bekrc4i: ["f1hqa2wf", "finvdd3"],
-    vrafjx: ["fcdblym", "fjik90z"],
-    h3c5rm: ["fa8zu9y", "f17e9lqh"]
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    u1mtju: ["f1cxmi7i", "f1j970fk"]
   },
   separatorEnd: {
-    ibv6hh: ["finvdd3", "f1hqa2wf"],
-    wvpqe5: ["fjik90z", "fcdblym"],
-    zhjwy3: ["f17e9lqh", "fa8zu9y"]
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    B4g9neb: ["f1j970fk", "f1cxmi7i"]
   },
   separatorBottom: {
-    B4j52fo: "f5ogflp",
-    icvyot: "fzkkow9",
-    g2u3we: "fo8z57v"
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    i8vvqc: "f1n3kblk"
   },
   start: {
     Bz10aip: "f1d8gkik"
@@ -38,7 +41,17 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
     Bqenvij: "fub80nq"
   }
 }, {
-  d: [".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}", ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}", ".f5ogflp{border-top-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fo8z57v{border-top-color:var(--colorNeutralBackground3);}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}", ".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}", ".fly5x3f{width:100%;}", ".fub80nq{height:var(--fui-Drawer--size);}"]
+  d: [[".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}", {
+    p: -1
+  }], [".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}", {
+    p: -1
+  }], [".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}", {
+    p: -1
+  }], [".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}", {
+    p: -1
+  }], [".f1n3kblk{border-top:1px solid var(--colorNeutralBackground3);}", {
+    p: -1
+  }], ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}", ".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}", ".fly5x3f{width:100%;}", ".fub80nq{height:var(--fui-Drawer--size);}"]
 });
 const useDrawerMotionStyles = /*#__PURE__*/__styles({
   "default": {

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","separatorBottom","B4j52fo","icvyot","g2u3we","start","Bz10aip","end","bottom","a9b677","Bqenvij","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","getSeparatorClass","state","classNames","separator","undefined","position","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","motionClassNames","motion","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n    root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative'\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    separatorBottom: {\n        ...shorthands.borderTop(...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    bottom: {\n        transform: `translate3D(0, var(${drawerCSSVars.drawerSizeVar}), 0)`,\n        width: '100%',\n        height: `var(${drawerCSSVars.drawerSizeVar})`\n    }\n});\nconst useDrawerMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        transitionProperty: 'opacity, transform',\n        willChange: 'opacity, transform'\n    },\n    enter: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)'\n    }\n});\nfunction getSeparatorClass(state, classNames) {\n    if (!state.separator) {\n        return undefined;\n    }\n    switch(state.position){\n        case 'start':\n            return classNames.separatorStart;\n        case 'end':\n            return classNames.separatorEnd;\n        case 'bottom':\n            return classNames.separatorBottom;\n        default:\n            return undefined;\n    }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n    const resetStyles = useDrawerResetStyles();\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGX,aAAA,6UAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMY,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPR,MAAM,CAACS,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAc,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,MAAA;IAAAF,OAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAqB3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGjC,QAAA;EAAA;IAAAkC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAH,MAAA;IAAAP,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAU7B,CAAC;AACF,SAASM,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;EAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;IAClB,OAAOC,SAAS;EACpB;EACA,QAAOH,KAAK,CAACI,QAAQ;IACjB,KAAK,OAAO;MACR,OAAOH,UAAU,CAAC1B,cAAc;IACpC,KAAK,KAAK;MACN,OAAO0B,UAAU,CAACtB,YAAY;IAClC,KAAK,QAAQ;MACT,OAAOsB,UAAU,CAAClB,eAAe;IACrC;MACI,OAAOoB,SAAS;EACxB;AACJ;AACA;AACA;AACA;AAAI,OAAO,MAAME,8BAA8B,GAAIL,KAAK,IAAG;EACvD,MAAMM,WAAW,GAAGnC,oBAAoB,CAAC,CAAC;EAC1C,MAAMoC,cAAc,GAAGxC,uBAAuB,CAACiC,KAAK,CAAC;EACrD,MAAMQ,UAAU,GAAGlC,mBAAmB,CAAC,CAAC;EACxC,MAAMmC,gBAAgB,GAAGzC,mBAAmB,CAACgC,KAAK,CAACU,MAAM,EAAEhB,qBAAqB,CAAC,CAAC,CAAC;EACnFM,KAAK,CAAC9B,IAAI,CAACyC,SAAS,GAAGjD,YAAY,CAACO,sBAAsB,CAACC,IAAI,EAAEoC,WAAW,EAAEC,cAAc,EAAER,iBAAiB,CAACC,KAAK,EAAEQ,UAAU,CAAC,EAAEA,UAAU,CAACR,KAAK,CAACI,QAAQ,CAAC,EAAEK,gBAAgB,EAAET,KAAK,CAAC9B,IAAI,CAACyC,SAAS,CAAC;EACvM,OAAOX,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","h3c5rm","vrafjx","Bekrc4i","u1mtju","separatorEnd","zhjwy3","wvpqe5","ibv6hh","B4g9neb","separatorBottom","g2u3we","icvyot","B4j52fo","i8vvqc","start","Bz10aip","end","bottom","a9b677","Bqenvij","d","p","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","getSeparatorClass","state","classNames","separator","undefined","position","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","motionClassNames","motion","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n    root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative'\n});\n/**\n * Styles for the root slot\n */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n    /* Separator */ separatorStart: {\n        borderRight: borderValue\n    },\n    separatorEnd: {\n        borderLeft: borderValue\n    },\n    separatorBottom: {\n        borderTop: borderValue\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    bottom: {\n        transform: `translate3D(0, var(${drawerCSSVars.drawerSizeVar}), 0)`,\n        width: '100%',\n        height: `var(${drawerCSSVars.drawerSizeVar})`\n    }\n});\nconst useDrawerMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        transitionProperty: 'opacity, transform',\n        willChange: 'opacity, transform'\n    },\n    enter: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)'\n    }\n});\nfunction getSeparatorClass(state, classNames) {\n    if (!state.separator) {\n        return undefined;\n    }\n    switch(state.position){\n        case 'start':\n            return classNames.separatorStart;\n        case 'end':\n            return classNames.separatorEnd;\n        case 'bottom':\n            return classNames.separatorBottom;\n        default:\n            return undefined;\n    }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n    const resetStyles = useDrawerResetStyles();\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, 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,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGV,aAAA,6UAG5B,CAAC;AACF;AACA;AACA;AAAI,MAAMW,WAAW,GAAI,aAAYR,MAAM,CAACS,uBAAwB,EAAC;AACrE,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,cAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,MAAA;IAAAF,OAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAqB3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGpC,QAAA;EAAA;IAAAqC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAH,MAAA;IAAAR,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAU7B,CAAC;AACF,SAASO,iBAAiBA,CAACC,KAAK,EAAEC,UAAU,EAAE;EAC1C,IAAI,CAACD,KAAK,CAACE,SAAS,EAAE;IAClB,OAAOC,SAAS;EACpB;EACA,QAAOH,KAAK,CAACI,QAAQ;IACjB,KAAK,OAAO;MACR,OAAOH,UAAU,CAAC9B,cAAc;IACpC,KAAK,KAAK;MACN,OAAO8B,UAAU,CAACzB,YAAY;IAClC,KAAK,QAAQ;MACT,OAAOyB,UAAU,CAACpB,eAAe;IACrC;MACI,OAAOsB,SAAS;EACxB;AACJ;AACA;AACA;AACA;AAAI,OAAO,MAAME,8BAA8B,GAAIL,KAAK,IAAG;EACvD,MAAMM,WAAW,GAAGvC,oBAAoB,CAAC,CAAC;EAC1C,MAAMwC,cAAc,GAAG5C,uBAAuB,CAACqC,KAAK,CAAC;EACrD,MAAMQ,UAAU,GAAGtC,mBAAmB,CAAC,CAAC;EACxC,MAAMuC,gBAAgB,GAAG7C,mBAAmB,CAACoC,KAAK,CAACU,MAAM,EAAEhB,qBAAqB,CAAC,CAAC,CAAC;EACnFM,KAAK,CAAClC,IAAI,CAAC6C,SAAS,GAAGpD,YAAY,CAACM,sBAAsB,CAACC,IAAI,EAAEwC,WAAW,EAAEC,cAAc,EAAER,iBAAiB,CAACC,KAAK,EAAEQ,UAAU,CAAC,EAAEA,UAAU,CAACR,KAAK,CAACI,QAAQ,CAAC,EAAEK,gBAAgB,EAAET,KAAK,CAAClC,IAAI,CAAC6C,SAAS,CAAC;EACvM,OAAOX,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n  /**\n   * Slot for the root element.\n   */\n  root: Slot<OverlayDrawerSurfaceProps>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = OverlayDrawerSlots & {\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog: Slot<DialogProps>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> &\n  DrawerBaseProps;\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = Omit<ComponentState<OverlayDrawerInternalSlots>, 'backdrop'> &\n  Required<DrawerBaseState>;\n"],"names":[],"mappings":"AAAA,WAqC4B"}
+{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n  /**\n   * Slot for the root element.\n   */\n  root: Slot<OverlayDrawerSurfaceProps>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = OverlayDrawerSlots & {\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog: Slot<DialogProps>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'> &\n  DrawerBaseProps & {\n    /**\n     * @deprecated OverlayDrawer can work only as a controlled component\n     * and does not support uncontrolled mode i.e. defaultOpen prop\n     */\n    defaultOpen?: boolean;\n  };\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = Omit<ComponentState<OverlayDrawerInternalSlots>, 'backdrop'> &\n  Required<DrawerBaseState>;\n"],"names":[],"mappings":"AAAA,WA2C4B"}

package/lib/components/OverlayDrawer/OverlayDrawerDialog.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { DialogProvider, DialogSurfaceProvider, useDialog_unstable, useDialogContextValues_unstable } from '@fluentui/react-dialog';
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const renderOverlayDrawerDialog_unstable = (state, contextValues)=>{
+    const { content, trigger } = state;
+    return /*#__PURE__*/ React.createElement(DialogProvider, {
+        value: contextValues.dialog
+    }, /*#__PURE__*/ React.createElement(DialogSurfaceProvider, {
+        value: contextValues.dialogSurface
+    }, trigger, content));
+};
+/**
+ * Temporary component to render Dialog without built-in motion as Drawer has own motion implementation.
+ *
+ * @todo Remove after https://github.com/microsoft/fluentui/issues/30700.
+ * @internal
+ */ export const OverlayDrawerDialog = /*#__PURE__*/ React.memo((props)=>{
+    const state = useDialog_unstable(props);
+    const contextValues = useDialogContextValues_unstable(state);
+    return renderOverlayDrawerDialog_unstable(state, contextValues);
+});
+OverlayDrawerDialog.displayName = 'OverlayDrawerDialog';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawerDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  type DialogContextValues,\n  type DialogProps,\n  DialogProvider,\n  type DialogState,\n  DialogSurfaceProvider,\n  useDialog_unstable,\n  useDialogContextValues_unstable,\n} from '@fluentui/react-dialog';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst renderOverlayDrawerDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n  const { content, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {content}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n\n/**\n * Temporary component to render Dialog without built-in motion as Drawer has own motion implementation.\n *\n * @todo Remove after https://github.com/microsoft/fluentui/issues/30700.\n * @internal\n */\nexport const OverlayDrawerDialog: React.FC<DialogProps> = React.memo(props => {\n  const state = useDialog_unstable(props);\n  const contextValues = useDialogContextValues_unstable(state);\n\n  return renderOverlayDrawerDialog_unstable(state, contextValues);\n});\n\nOverlayDrawerDialog.displayName = 'OverlayDrawerDialog';\n"],"names":["React","DialogProvider","DialogSurfaceProvider","useDialog_unstable","useDialogContextValues_unstable","renderOverlayDrawerDialog_unstable","state","contextValues","content","trigger","value","dialog","dialogSurface","OverlayDrawerDialog","memo","props","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAGEC,cAAc,EAEdC,qBAAqB,EACrBC,kBAAkB,EAClBC,+BAA+B,QAC1B,yBAAyB;AAEhC,gEAAgE;AAChE,MAAMC,qCAAqC,CAACC,OAAoBC;IAC9D,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAE7B,qBACE,oBAACL;QAAeS,OAAOH,cAAcI,MAAM;qBACzC,oBAACT;QAAsBQ,OAAOH,cAAcK,aAAa;OACtDH,SACAD;AAIT;AAEA;;;;;CAKC,GACD,OAAO,MAAMK,oCAA6Cb,MAAMc,IAAI,CAACC,CAAAA;IACnE,MAAMT,QAAQH,mBAAmBY;IACjC,MAAMR,gBAAgBH,gCAAgCE;IAEtD,OAAOD,mCAAmCC,OAAOC;AACnD,GAAG;AAEHM,oBAAoBG,WAAW,GAAG"}

package/lib/components/OverlayDrawer/useOverlayDrawer.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { slot, useMergedRefs } from '@fluentui/react-utilities';
-import { Dialog } from '@fluentui/react-dialog';
 import { useMotion } from '@fluentui/react-motion-preview';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
+import { OverlayDrawerDialog } from './OverlayDrawerDialog';
 import { OverlayDrawerSurface } from './OverlayDrawerSurface';
 /**
  * Create the state required to render OverlayDrawer.
@@ -14,7 +14,7 @@ import { OverlayDrawerSurface } from './OverlayDrawerSurface';
  * @param ref - reference to root HTMLDivElement of OverlayDrawer
  */ export const useOverlayDrawer_unstable = (props, ref)=>{
     const { open, size, position } = useDrawerDefaultProps(props);
-    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
+    const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
     const motion = useMotion(open);
     const backdropProps = slot.resolveShorthand(props.backdrop);
     const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
@@ -31,7 +31,6 @@ import { OverlayDrawerSurface } from './OverlayDrawerSurface';
     });
     const dialog = slot.always({
         open,
-        defaultOpen,
         onOpenChange,
         inertTrapFocus,
         modalType,
@@ -40,12 +39,12 @@ import { OverlayDrawerSurface } from './OverlayDrawerSurface';
        * but it's required by DialogProps
        */ children: null
     }, {
-        elementType: Dialog
+        elementType: OverlayDrawerDialog
     });
     return {
         components: {
             root: OverlayDrawerSurface,
-            dialog: Dialog
+            dialog: OverlayDrawerDialog
         },
         root,
         dialog,

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

@@ -1 +1 @@
-{"version":3,"sources":["useOverlayDrawer.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 { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\n\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLDivElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n  props: OverlayDrawerProps,\n  ref: React.Ref<HTMLDivElement>,\n): OverlayDrawerState => {\n  const { open, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  const backdropProps = slot.resolveShorthand(props.backdrop);\n  const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n  const root = slot.always(\n    {\n      ...props,\n      backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n    },\n    {\n      elementType: OverlayDrawerSurface,\n      defaultProps: {\n        ref: useMergedRefs(ref, motion.ref),\n      },\n    },\n  );\n\n  const dialog = slot.always(\n    {\n      open,\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: OverlayDrawerSurface,\n      dialog: Dialog,\n    },\n\n    root,\n    dialog,\n\n    size,\n    position,\n    motion,\n  };\n};\n"],"names":["React","slot","useMergedRefs","Dialog","useMotion","useDrawerDefaultProps","OverlayDrawerSurface","useOverlayDrawer_unstable","props","ref","open","size","position","modalType","inertTrapFocus","defaultOpen","onOpenChange","motion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","defaultProps","dialog","children","components"],"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,SAASb,UAA0BM;IAEzC,MAAMQ,gBAAgBjB,KAAKkB,gBAAgB,CAACX,MAAMY,QAAQ;IAC1D,MAAMC,oBAAoBR,cAAc,eAAeK,kBAAkB;IAEzE,MAAMI,OAAOrB,KAAKsB,MAAM,CACtB;QACE,GAAGf,KAAK;QACRY,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;IACvD,GACA;QACEM,aAAalB;QACbmB,cAAc;YACZhB,KAAKP,cAAcO,KAAKQ,OAAOR,GAAG;QACpC;IACF;IAGF,MAAMiB,SAASzB,KAAKsB,MAAM,CACxB;QACEb;QACAK;QACAC;QACAF;QACAD;QACA;;;OAGC,GACDc,UAAU;IACZ,GACA;QACEH,aAAarB;IACf;IAGF,OAAO;QACLyB,YAAY;YACVN,MAAMhB;YACNoB,QAAQvB;QACV;QAEAmB;QACAI;QAEAf;QACAC;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["useOverlayDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerDialog } from './OverlayDrawerDialog';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\n\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLDivElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n  props: OverlayDrawerProps,\n  ref: React.Ref<HTMLDivElement>,\n): OverlayDrawerState => {\n  const { open, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  const backdropProps = slot.resolveShorthand(props.backdrop);\n  const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n  const root = slot.always(\n    {\n      ...props,\n      backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n    },\n    {\n      elementType: OverlayDrawerSurface,\n      defaultProps: {\n        ref: useMergedRefs(ref, motion.ref),\n      },\n    },\n  );\n\n  const dialog = slot.always(\n    {\n      open,\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: OverlayDrawerDialog,\n    },\n  );\n\n  return {\n    components: {\n      root: OverlayDrawerSurface,\n      dialog: OverlayDrawerDialog,\n    },\n\n    root,\n    dialog,\n\n    size,\n    position,\n    motion,\n  };\n};\n"],"names":["React","slot","useMergedRefs","useMotion","useDrawerDefaultProps","OverlayDrawerDialog","OverlayDrawerSurface","useOverlayDrawer_unstable","props","ref","open","size","position","modalType","inertTrapFocus","onOpenChange","motion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","defaultProps","dialog","children","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGR,sBAAsBI;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGP;IAE9D,MAAMQ,SAASb,UAA0BO;IAEzC,MAAMO,gBAAgBhB,KAAKiB,gBAAgB,CAACV,MAAMW,QAAQ;IAC1D,MAAMC,oBAAoBP,cAAc,eAAeI,kBAAkB;IAEzE,MAAMI,OAAOpB,KAAKqB,MAAM,CACtB;QACE,GAAGd,KAAK;QACRW,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;IACvD,GACA;QACEM,aAAajB;QACbkB,cAAc;YACZf,KAAKP,cAAcO,KAAKO,OAAOP,GAAG;QACpC;IACF;IAGF,MAAMgB,SAASxB,KAAKqB,MAAM,CACxB;QACEZ;QACAK;QACAD;QACAD;QACA;;;OAGC,GACDa,UAAU;IACZ,GACA;QACEH,aAAalB;IACf;IAGF,OAAO;QACLsB,YAAY;YACVN,MAAMf;YACNmB,QAAQpB;QACV;QAEAgB;QACAI;QAEAd;QACAC;QACAI;IACF;AACF,EAAE"}

package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js

@@ -11,9 +11,9 @@ export const overlayDrawerClassNames = {
 /**
  * Styles for the root slot
  */
-const useDrawerResetStyles = /*#__PURE__*/__resetStyles("r1mbnmj9", "rem9xf8", {
-  r: [".r1mbnmj9{overflow: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;}", ".r1mbnmj9:focus{outline-style:none;}", ".r1mbnmj9:focus-visible{outline-style:none;}", ".r1mbnmj9[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1mbnmj9[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);}", ".rem9xf8{overflow: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;}", ".rem9xf8:focus{outline-style:none;}", ".rem9xf8:focus-visible{outline-style:none;}", ".rem9xf8[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rem9xf8[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);}"],
-  s: ["@media (forced-colors: active){.r1mbnmj9[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.rem9xf8[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
+const useDrawerResetStyles = /*#__PURE__*/__resetStyles("r7dfyj8", "rmx02j7", {
+  r: [".r7dfyj8{overflow: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;}", ".r7dfyj8:focus{outline-style:none;}", ".r7dfyj8:focus-visible{outline-style:none;}", ".r7dfyj8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r7dfyj8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".rmx02j7{overflow: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;}", ".rmx02j7:focus{outline-style:none;}", ".rmx02j7:focus-visible{outline-style:none;}", ".rmx02j7[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rmx02j7[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media (forced-colors: active){.r7dfyj8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.rmx02j7[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
 });
 const useDrawerRootStyles = /*#__PURE__*/__styles({
   start: {

package/lib/shared/useDrawerBaseStyles.styles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 /**
  * CSS variable names used internally for uniform styling in Drawer.
@@ -37,16 +37,18 @@ const useDrawerStyles = /*#__PURE__*/__styles({
     Hwfdqs: "f5e8c63"
   },
   start: {
-    Bekrc4i: ["f5tn483", "f1ojsxk5"],
-    vrafjx: ["fcdblym", "fjik90z"],
-    h3c5rm: ["f1gn591s", "fjscplz"],
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    u1mtju: ["f1xteiwb", "fsqykmd"],
     oyh7mz: ["f1vgc2s3", "f1e31b4d"],
     j35jbq: ["fvfyk4", "frppm18"]
   },
   end: {
-    ibv6hh: ["f1ojsxk5", "f5tn483"],
-    wvpqe5: ["fjik90z", "fcdblym"],
-    zhjwy3: ["fjscplz", "f1gn591s"],
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    B4g9neb: ["fsqykmd", "f1xteiwb"],
     j35jbq: ["f1e31b4d", "f1vgc2s3"],
     oyh7mz: ["frppm18", "fvfyk4"]
   },
@@ -67,7 +69,15 @@ const useDrawerStyles = /*#__PURE__*/__styles({
     Bjr0ffy: "fsdmzs6"
   }
 }, {
-  d: [".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", ".f1yab3r1{bottom:0;}", ".f198g47y{top:auto;}", ".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fsdmzs6{--fui-Drawer--size:100vw;}"],
+  d: [".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}", [".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], [".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", [".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], [".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], ".f1yab3r1{bottom:0;}", ".f198g47y{top:auto;}", ".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fsdmzs6{--fui-Drawer--size:100vw;}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
   }]]

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

@@ -1 +1 @@
-{"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","Bekrc4i","vrafjx","h3c5rm","oyh7mz","j35jbq","end","ibv6hh","wvpqe5","zhjwy3","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","m","useDrawerBottomBaseStyles","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","bottomBaseStyles","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    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        ...shorthands.borderRight(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n        right: 0,\n        left: 'auto'\n    },\n    bottom: {\n        bottom: 0,\n        top: '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 useDrawerBottomBaseStyles = makeStyles({\n    /* Sizes for position bottom */ 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]: '100vh'\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 bottomBaseStyles = useDrawerBottomBaseStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], durationStyles[size], position !== 'bottom' && 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;EACnCC,QAAQ,EAAE,QAAQ;EAClBC,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,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAD,MAAA;EAAA;EAAAM,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,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,CAsC3B,CAAC;AACF,OAAO,MAAMC,yBAAyB,gBAAG/C,QAAA;EAAAwC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAaxC,CAAC;AACF,OAAO,MAAMG,uBAAuB,gBAAGhD,QAAA;EAAAwC,KAAA;IAAAS,OAAA;EAAA;EAAAP,MAAA;IAAAO,OAAA;EAAA;EAAAN,KAAA;IAAAM,OAAA;EAAA;EAAAL,IAAA;IAAAK,OAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMK,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAGjC,eAAe,CAAC,CAAC;EACpC,MAAMkC,gBAAgB,GAAGR,yBAAyB,CAAC,CAAC;EACpD,MAAMS,cAAc,GAAGR,uBAAuB,CAAC,CAAC;EAChD,OAAO/C,YAAY,CAACqD,UAAU,CAACH,QAAQ,CAAC,EAAEA,QAAQ,KAAK,QAAQ,IAAII,gBAAgB,CAACH,IAAI,CAAC,EAAEI,cAAc,CAACJ,IAAI,CAAC,EAAED,QAAQ,KAAK,QAAQ,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAAC7B,aAAa,EAAE4B,MAAM,CAACI,IAAI,KAAK,UAAU,IAAIH,UAAU,CAAChC,QAAQ,EAAE+B,MAAM,CAACI,IAAI,KAAK,SAAS,IAAIH,UAAU,CAAC9B,OAAO,CAAC;AAC7R,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","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","h3c5rm","vrafjx","Bekrc4i","u1mtju","oyh7mz","j35jbq","end","zhjwy3","wvpqe5","ibv6hh","B4g9neb","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","p","m","useDrawerBottomBaseStyles","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","bottomBaseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } 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    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        borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n        right: 0,\n        left: 'auto'\n    },\n    bottom: {\n        bottom: 0,\n        top: '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 useDrawerBottomBaseStyles = makeStyles({\n    /* Sizes for position bottom */ 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]: '100vh'\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 bottomBaseStyles = useDrawerBottomBaseStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], durationStyles[size], position !== 'bottom' && baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,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;EACnCC,QAAQ,EAAE,QAAQ;EAClBC,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,gBAAGpB,QAAA;EAAAqB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAL,MAAA;IAAAD,MAAA;EAAA;EAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAsC3B,CAAC;AACF,OAAO,MAAMC,yBAAyB,gBAAGjD,QAAA;EAAAyC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAaxC,CAAC;AACF,OAAO,MAAMI,uBAAuB,gBAAGlD,QAAA;EAAAyC,KAAA;IAAAU,OAAA;EAAA;EAAAR,MAAA;IAAAQ,OAAA;EAAA;EAAAP,KAAA;IAAAO,OAAA;EAAA;EAAAN,IAAA;IAAAM,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMM,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAGpC,eAAe,CAAC,CAAC;EACpC,MAAMqC,gBAAgB,GAAGR,yBAAyB,CAAC,CAAC;EACpD,MAAMS,cAAc,GAAGR,uBAAuB,CAAC,CAAC;EAChD,OAAOjD,YAAY,CAACuD,UAAU,CAACH,QAAQ,CAAC,EAAEA,QAAQ,KAAK,QAAQ,IAAII,gBAAgB,CAACH,IAAI,CAAC,EAAEI,cAAc,CAACJ,IAAI,CAAC,EAAED,QAAQ,KAAK,QAAQ,IAAIG,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAAChC,aAAa,EAAE+B,MAAM,CAACI,IAAI,KAAK,UAAU,IAAIH,UAAU,CAACnC,QAAQ,EAAEkC,MAAM,CAACI,IAAI,KAAK,SAAS,IAAIH,UAAU,CAACjC,OAAO,CAAC;AAC7R,CAAC","ignoreList":[]}

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

@@ -28,44 +28,31 @@ const useDrawerResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rkjj3x6",
 ]);
 /**
  * Styles for the root slot
- */ const separatorValues = [
-    '1px',
-    'solid',
-    _reacttheme.tokens.colorNeutralBackground3
-];
+ */ const borderValue = `1px solid ${_reacttheme.tokens.colorNeutralBackground3}`;
 const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     separatorStart: {
-        Bekrc4i: [
-            "f1hqa2wf",
-            "finvdd3"
-        ],
-        vrafjx: [
-            "fcdblym",
-            "fjik90z"
-        ],
-        h3c5rm: [
-            "fa8zu9y",
-            "f17e9lqh"
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        u1mtju: [
+            "f1cxmi7i",
+            "f1j970fk"
         ]
     },
     separatorEnd: {
-        ibv6hh: [
-            "finvdd3",
-            "f1hqa2wf"
-        ],
-        wvpqe5: [
-            "fjik90z",
-            "fcdblym"
-        ],
-        zhjwy3: [
-            "f17e9lqh",
-            "fa8zu9y"
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        B4g9neb: [
+            "f1j970fk",
+            "f1cxmi7i"
         ]
     },
     separatorBottom: {
-        B4j52fo: "f5ogflp",
-        icvyot: "fzkkow9",
-        g2u3we: "fo8z57v"
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        i8vvqc: "f1n3kblk"
     },
     start: {
         Bz10aip: "f1d8gkik"
@@ -80,15 +67,36 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     }
 }, {
     d: [
-        ".f1hqa2wf{border-right-width:1px;}",
-        ".finvdd3{border-left-width:1px;}",
-        ".fcdblym{border-right-style:solid;}",
-        ".fjik90z{border-left-style:solid;}",
-        ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}",
-        ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}",
-        ".f5ogflp{border-top-width:1px;}",
-        ".fzkkow9{border-top-style:solid;}",
-        ".fo8z57v{border-top-color:var(--colorNeutralBackground3);}",
+        [
+            ".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1n3kblk{border-top:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
         ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}",
         ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}",
         ".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}",

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

@@ -1 +1 @@
-{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n  root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"rkjj3x6\", null, [\".rkjj3x6{overflow: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;}\"]);\n/**\n * Styles for the root slot\n */\nconst separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n  separatorStart: {\n    Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n    vrafjx: [\"fcdblym\", \"fjik90z\"],\n    h3c5rm: [\"fa8zu9y\", \"f17e9lqh\"]\n  },\n  separatorEnd: {\n    ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n    wvpqe5: [\"fjik90z\", \"fcdblym\"],\n    zhjwy3: [\"f17e9lqh\", \"fa8zu9y\"]\n  },\n  separatorBottom: {\n    B4j52fo: \"f5ogflp\",\n    icvyot: \"fzkkow9\",\n    g2u3we: \"fo8z57v\"\n  },\n  start: {\n    Bz10aip: \"f1d8gkik\"\n  },\n  end: {\n    Bz10aip: \"f1h1g6jt\"\n  },\n  bottom: {\n    Bz10aip: \"f1rdfgt8\",\n    a9b677: \"fly5x3f\",\n    Bqenvij: \"fub80nq\"\n  }\n}, {\n  d: [\".f1hqa2wf{border-right-width:1px;}\", \".finvdd3{border-left-width:1px;}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}\", \".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}\", \".f5ogflp{border-top-width:1px;}\", \".fzkkow9{border-top-style:solid;}\", \".fo8z57v{border-top-color:var(--colorNeutralBackground3);}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}\", \".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}\", \".fly5x3f{width:100%;}\", \".fub80nq{height:var(--fui-Drawer--size);}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n  \"default\": {\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f15rjlgw\",\n    Es3by: \"f1blt7p\"\n  },\n  enter: {\n    abs64n: \"f5p0z4x\",\n    Bz10aip: \"f87uvqx\"\n  }\n}, {\n  d: [\".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\n});\nfunction getSeparatorClass(state, classNames) {\n  if (!state.separator) {\n    return undefined;\n  }\n  switch (state.position) {\n    case 'start':\n      return classNames.separatorStart;\n    case 'end':\n      return classNames.separatorEnd;\n    case 'bottom':\n      return classNames.separatorBottom;\n    default:\n      return undefined;\n  }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = state => {\n  const resetStyles = useDrawerResetStyles();\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n  const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useInlineDrawerStyles.styles.js.map"],"names":["inlineDrawerClassNames","useInlineDrawerStyles_unstable","root","useDrawerResetStyles","__resetStyles","separatorValues","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","separatorBottom","B4j52fo","icvyot","g2u3we","start","Bz10aip","end","bottom","a9b677","Bqenvij","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","getSeparatorClass","state","classNames","separator","undefined","position","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","motionClassNames","useMotionClassNames","motion","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;IAqEAC,8BAA8B;eAA9BA;;;uBAzEqD;4BAC3C;2CACqD;oCACxC;AAC7B,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA0T;AACpY;;CAEC,GACD,MAAMC,kBAAkB;IAAC;IAAO;IAASC,kBAAM,CAACC,uBAAuB;CAAC;AACxE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAChDC,gBAAgB;QACdC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,cAAc;QACZC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,iBAAiB;QACfC,SAAS;QACTC,QAAQ;QACRC,QAAQ;IACV;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,QAAQ;QACNF,SAAS;QACTG,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAAmC;QAAqC;QAA8D;QAA+E;QAAoE;QAAoE;QAAyB;KAA4C;AAC/rB;AACA,MAAMC,wBAAwB,WAAW,GAAEpB,IAAAA,eAAQ,EAAC;IAClD,WAAW;QACTqB,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLH,QAAQ;QACRP,SAAS;IACX;AACF,GAAG;IACDK,GAAG;QAAC;QAAwB;QAAqD;QAA4C;QAAwB;KAA4C;AACnM;AACA,SAASM,kBAAkBC,KAAK,EAAEC,UAAU;IAC1C,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IACA,OAAQH,MAAMI,QAAQ;QACpB,KAAK;YACH,OAAOH,WAAW1B,cAAc;QAClC,KAAK;YACH,OAAO0B,WAAWtB,YAAY;QAChC,KAAK;YACH,OAAOsB,WAAWlB,eAAe;QACnC;YACE,OAAOoB;IACX;AACF;AAIO,MAAMrC,iCAAiCkC,CAAAA;IAC5C,MAAMK,cAAcrC;IACpB,MAAMsC,iBAAiBC,IAAAA,kDAAuB,EAACP;IAC/C,MAAMQ,aAAanC;IACnB,MAAMoC,mBAAmBC,IAAAA,uCAAmB,EAACV,MAAMW,MAAM,EAAEjB;IAC3DM,MAAMjC,IAAI,CAAC6C,SAAS,GAAGC,IAAAA,mBAAY,EAAChD,uBAAuBE,IAAI,EAAEsC,aAAaC,gBAAgBP,kBAAkBC,OAAOQ,aAAaA,UAAU,CAACR,MAAMI,QAAQ,CAAC,EAAEK,kBAAkBT,MAAMjC,IAAI,CAAC6C,SAAS;IACtM,OAAOZ;AACT,GACA,wDAAwD"}
+{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n  root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"rkjj3x6\", null, [\".rkjj3x6{overflow: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;}\"]);\n/**\n * Styles for the root slot\n */\nconst borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n  separatorStart: {\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    u1mtju: [\"f1cxmi7i\", \"f1j970fk\"]\n  },\n  separatorEnd: {\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    B4g9neb: [\"f1j970fk\", \"f1cxmi7i\"]\n  },\n  separatorBottom: {\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    i8vvqc: \"f1n3kblk\"\n  },\n  start: {\n    Bz10aip: \"f1d8gkik\"\n  },\n  end: {\n    Bz10aip: \"f1h1g6jt\"\n  },\n  bottom: {\n    Bz10aip: \"f1rdfgt8\",\n    a9b677: \"fly5x3f\",\n    Bqenvij: \"fub80nq\"\n  }\n}, {\n  d: [[\".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}\", {\n    p: -1\n  }], [\".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}\", {\n    p: -1\n  }], [\".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}\", {\n    p: -1\n  }], [\".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}\", {\n    p: -1\n  }], [\".f1n3kblk{border-top:1px solid var(--colorNeutralBackground3);}\", {\n    p: -1\n  }], \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}\", \".f1rdfgt8{transform:translate3D(0, var(--fui-Drawer--size), 0);}\", \".fly5x3f{width:100%;}\", \".fub80nq{height:var(--fui-Drawer--size);}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n  \"default\": {\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f15rjlgw\",\n    Es3by: \"f1blt7p\"\n  },\n  enter: {\n    abs64n: \"f5p0z4x\",\n    Bz10aip: \"f87uvqx\"\n  }\n}, {\n  d: [\".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\n});\nfunction getSeparatorClass(state, classNames) {\n  if (!state.separator) {\n    return undefined;\n  }\n  switch (state.position) {\n    case 'start':\n      return classNames.separatorStart;\n    case 'end':\n      return classNames.separatorEnd;\n    case 'bottom':\n      return classNames.separatorBottom;\n    default:\n      return undefined;\n  }\n}\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = state => {\n  const resetStyles = useDrawerResetStyles();\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n  const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useInlineDrawerStyles.styles.js.map"],"names":["inlineDrawerClassNames","useInlineDrawerStyles_unstable","root","useDrawerResetStyles","__resetStyles","borderValue","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","separatorStart","h3c5rm","vrafjx","Bekrc4i","u1mtju","separatorEnd","zhjwy3","wvpqe5","ibv6hh","B4g9neb","separatorBottom","g2u3we","icvyot","B4j52fo","i8vvqc","start","Bz10aip","end","bottom","a9b677","Bqenvij","d","p","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","getSeparatorClass","state","classNames","separator","undefined","position","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","motionClassNames","useMotionClassNames","motion","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;IAkFAC,8BAA8B;eAA9BA;;;uBAtFyC;4BAC/B;2CACqD;oCACxC;AAC7B,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA0T;AACpY;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAEC,kBAAM,CAACC,uBAAuB,CAAC,CAAC;AACjE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAChDC,gBAAgB;QACdC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAC,cAAc;QACZC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;YAAC;YAAY;SAAW;IACnC;IACAC,iBAAiB;QACfC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,QAAQ;QACNF,SAAS;QACTG,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;YAAC;YAAqE;gBACxEC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAoE;gBACvEA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAoE;gBACvEA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAqE;gBACxEA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAmE;gBACtEA,GAAG,CAAC;YACN;SAAE;QAAE;QAA+E;QAAoE;QAAoE;QAAyB;KAA4C;AAClS;AACA,MAAMC,wBAAwB,WAAW,GAAExB,IAAAA,eAAQ,EAAC;IAClD,WAAW;QACTyB,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLH,QAAQ;QACRR,SAAS;IACX;AACF,GAAG;IACDK,GAAG;QAAC;QAAwB;QAAqD;QAA4C;QAAwB;KAA4C;AACnM;AACA,SAASO,kBAAkBC,KAAK,EAAEC,UAAU;IAC1C,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IACA,OAAQH,MAAMI,QAAQ;QACpB,KAAK;YACH,OAAOH,WAAW9B,cAAc;QAClC,KAAK;YACH,OAAO8B,WAAWzB,YAAY;QAChC,KAAK;YACH,OAAOyB,WAAWpB,eAAe;QACnC;YACE,OAAOsB;IACX;AACF;AAIO,MAAMzC,iCAAiCsC,CAAAA;IAC5C,MAAMK,cAAczC;IACpB,MAAM0C,iBAAiBC,IAAAA,kDAAuB,EAACP;IAC/C,MAAMQ,aAAavC;IACnB,MAAMwC,mBAAmBC,IAAAA,uCAAmB,EAACV,MAAMW,MAAM,EAAEjB;IAC3DM,MAAMrC,IAAI,CAACiD,SAAS,GAAGC,IAAAA,mBAAY,EAACpD,uBAAuBE,IAAI,EAAE0C,aAAaC,gBAAgBP,kBAAkBC,OAAOQ,aAAaA,UAAU,CAACR,MAAMI,QAAQ,CAAC,EAAEK,kBAAkBT,MAAMrC,IAAI,CAACiD,SAAS;IACtM,OAAOZ;AACT,GACA,wDAAwD"}

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverlayDrawerDialog", {
+    enumerable: true,
+    get: function() {
+        return OverlayDrawerDialog;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactdialog = require("@fluentui/react-dialog");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const renderOverlayDrawerDialog_unstable = (state, contextValues)=>{
+    const { content, trigger } = state;
+    return /*#__PURE__*/ _react.createElement(_reactdialog.DialogProvider, {
+        value: contextValues.dialog
+    }, /*#__PURE__*/ _react.createElement(_reactdialog.DialogSurfaceProvider, {
+        value: contextValues.dialogSurface
+    }, trigger, content));
+};
+const OverlayDrawerDialog = /*#__PURE__*/ _react.memo((props)=>{
+    const state = (0, _reactdialog.useDialog_unstable)(props);
+    const contextValues = (0, _reactdialog.useDialogContextValues_unstable)(state);
+    return renderOverlayDrawerDialog_unstable(state, contextValues);
+});
+OverlayDrawerDialog.displayName = 'OverlayDrawerDialog';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawerDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { DialogProvider, DialogSurfaceProvider, useDialog_unstable, useDialogContextValues_unstable } from '@fluentui/react-dialog';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst renderOverlayDrawerDialog_unstable = (state, contextValues)=>{\n    const { content, trigger } = state;\n    return /*#__PURE__*/ React.createElement(DialogProvider, {\n        value: contextValues.dialog\n    }, /*#__PURE__*/ React.createElement(DialogSurfaceProvider, {\n        value: contextValues.dialogSurface\n    }, trigger, content));\n};\n/**\n * Temporary component to render Dialog without built-in motion as Drawer has own motion implementation.\n *\n * @todo Remove after https://github.com/microsoft/fluentui/issues/30700.\n * @internal\n */ export const OverlayDrawerDialog = /*#__PURE__*/ React.memo((props)=>{\n    const state = useDialog_unstable(props);\n    const contextValues = useDialogContextValues_unstable(state);\n    return renderOverlayDrawerDialog_unstable(state, contextValues);\n});\nOverlayDrawerDialog.displayName = 'OverlayDrawerDialog';\n"],"names":["OverlayDrawerDialog","renderOverlayDrawerDialog_unstable","state","contextValues","content","trigger","React","createElement","DialogProvider","value","dialog","DialogSurfaceProvider","dialogSurface","memo","props","useDialog_unstable","useDialogContextValues_unstable","displayName"],"mappings":";;;;+BAgBiBA;;;eAAAA;;;;iEAhBM;6BACoF;AAC3G,gEAAgE;AAChE,MAAMC,qCAAqC,CAACC,OAAOC;IAC/C,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAC7B,OAAO,WAAW,GAAGI,OAAMC,aAAa,CAACC,2BAAc,EAAE;QACrDC,OAAON,cAAcO,MAAM;IAC/B,GAAG,WAAW,GAAGJ,OAAMC,aAAa,CAACI,kCAAqB,EAAE;QACxDF,OAAON,cAAcS,aAAa;IACtC,GAAGP,SAASD;AAChB;AAMW,MAAMJ,sBAAsB,WAAW,GAAGM,OAAMO,IAAI,CAAC,CAACC;IAC7D,MAAMZ,QAAQa,IAAAA,+BAAkB,EAACD;IACjC,MAAMX,gBAAgBa,IAAAA,4CAA+B,EAACd;IACtD,OAAOD,mCAAmCC,OAAOC;AACrD;AACAH,oBAAoBiB,WAAW,GAAG"}

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

@@ -11,13 +11,13 @@ Object.defineProperty(exports, "useOverlayDrawer_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
-const _reactdialog = require("@fluentui/react-dialog");
 const _reactmotionpreview = require("@fluentui/react-motion-preview");
 const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
+const _OverlayDrawerDialog = require("./OverlayDrawerDialog");
 const _OverlayDrawerSurface = require("./OverlayDrawerSurface");
 const useOverlayDrawer_unstable = (props, ref)=>{
     const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
-    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
+    const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
     const motion = (0, _reactmotionpreview.useMotion)(open);
     const backdropProps = _reactutilities.slot.resolveShorthand(props.backdrop);
     const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
@@ -34,7 +34,6 @@ const useOverlayDrawer_unstable = (props, ref)=>{
     });
     const dialog = _reactutilities.slot.always({
         open,
-        defaultOpen,
         onOpenChange,
         inertTrapFocus,
         modalType,
@@ -43,12 +42,12 @@ const useOverlayDrawer_unstable = (props, ref)=>{
        * but it's required by DialogProps
        */ children: null
     }, {
-        elementType: _reactdialog.Dialog
+        elementType: _OverlayDrawerDialog.OverlayDrawerDialog
     });
     return {
         components: {
             root: _OverlayDrawerSurface.OverlayDrawerSurface,
-            dialog: _reactdialog.Dialog
+            dialog: _OverlayDrawerDialog.OverlayDrawerDialog
         },
         root,
         dialog,

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

@@ -1 +1 @@
-{"version":3,"sources":["useOverlayDrawer.js"],"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';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLDivElement of OverlayDrawer\n */ export const useOverlayDrawer_unstable = (props, ref)=>{\n    const { open, size, position } = useDrawerDefaultProps(props);\n    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n    const motion = useMotion(open);\n    const backdropProps = slot.resolveShorthand(props.backdrop);\n    const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n    const root = slot.always({\n        ...props,\n        backdrop: hasCustomBackdrop ? {\n            ...backdropProps\n        } : null\n    }, {\n        elementType: OverlayDrawerSurface,\n        defaultProps: {\n            ref: useMergedRefs(ref, motion.ref)\n        }\n    });\n    const dialog = slot.always({\n        open,\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       */ children: null\n    }, {\n        elementType: Dialog\n    });\n    return {\n        components: {\n            root: OverlayDrawerSurface,\n            dialog: Dialog\n        },\n        root,\n        dialog,\n        size,\n        position,\n        motion\n    };\n};\n"],"names":["useOverlayDrawer_unstable","props","ref","open","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","defaultOpen","onOpenChange","motion","useMotion","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","OverlayDrawerSurface","defaultProps","useMergedRefs","dialog","children","Dialog","components"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACa;6BACb;oCACG;uCACY;sCACD;AAS1B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,EAACL;IACvD,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGT;IACnF,MAAMU,SAASC,IAAAA,6BAAS,EAACT;IACzB,MAAMU,gBAAgBC,oBAAI,CAACC,gBAAgB,CAACd,MAAMe,QAAQ;IAC1D,MAAMC,oBAAoBV,cAAc,eAAeM,kBAAkB;IACzE,MAAMK,OAAOJ,oBAAI,CAACK,MAAM,CAAC;QACrB,GAAGlB,KAAK;QACRe,UAAUC,oBAAoB;YAC1B,GAAGJ,aAAa;QACpB,IAAI;IACR,GAAG;QACCO,aAAaC,0CAAoB;QACjCC,cAAc;YACVpB,KAAKqB,IAAAA,6BAAa,EAACrB,KAAKS,OAAOT,GAAG;QACtC;IACJ;IACA,MAAMsB,SAASV,oBAAI,CAACK,MAAM,CAAC;QACvBhB;QACAM;QACAC;QACAF;QACAD;QACA;;;OAGD,GAAGkB,UAAU;IAChB,GAAG;QACCL,aAAaM,mBAAM;IACvB;IACA,OAAO;QACHC,YAAY;YACRT,MAAMG,0CAAoB;YAC1BG,QAAQE,mBAAM;QAClB;QACAR;QACAM;QACApB;QACAC;QACAM;IACJ;AACJ"}
+{"version":3,"sources":["useOverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport { OverlayDrawerDialog } from './OverlayDrawerDialog';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLDivElement of OverlayDrawer\n */ export const useOverlayDrawer_unstable = (props, ref)=>{\n    const { open, size, position } = useDrawerDefaultProps(props);\n    const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n    const motion = useMotion(open);\n    const backdropProps = slot.resolveShorthand(props.backdrop);\n    const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n    const root = slot.always({\n        ...props,\n        backdrop: hasCustomBackdrop ? {\n            ...backdropProps\n        } : null\n    }, {\n        elementType: OverlayDrawerSurface,\n        defaultProps: {\n            ref: useMergedRefs(ref, motion.ref)\n        }\n    });\n    const dialog = slot.always({\n        open,\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       */ children: null\n    }, {\n        elementType: OverlayDrawerDialog\n    });\n    return {\n        components: {\n            root: OverlayDrawerSurface,\n            dialog: OverlayDrawerDialog\n        },\n        root,\n        dialog,\n        size,\n        position,\n        motion\n    };\n};\n"],"names":["useOverlayDrawer_unstable","props","ref","open","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","onOpenChange","motion","useMotion","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","OverlayDrawerSurface","defaultProps","useMergedRefs","dialog","children","OverlayDrawerDialog","components"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACa;oCACV;uCACY;qCACF;sCACC;AAS1B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,EAACL;IACvD,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGR;IAC9D,MAAMS,SAASC,IAAAA,6BAAS,EAACR;IACzB,MAAMS,gBAAgBC,oBAAI,CAACC,gBAAgB,CAACb,MAAMc,QAAQ;IAC1D,MAAMC,oBAAoBT,cAAc,eAAeK,kBAAkB;IACzE,MAAMK,OAAOJ,oBAAI,CAACK,MAAM,CAAC;QACrB,GAAGjB,KAAK;QACRc,UAAUC,oBAAoB;YAC1B,GAAGJ,aAAa;QACpB,IAAI;IACR,GAAG;QACCO,aAAaC,0CAAoB;QACjCC,cAAc;YACVnB,KAAKoB,IAAAA,6BAAa,EAACpB,KAAKQ,OAAOR,GAAG;QACtC;IACJ;IACA,MAAMqB,SAASV,oBAAI,CAACK,MAAM,CAAC;QACvBf;QACAM;QACAD;QACAD;QACA;;;OAGD,GAAGiB,UAAU;IAChB,GAAG;QACCL,aAAaM,wCAAmB;IACpC;IACA,OAAO;QACHC,YAAY;YACRT,MAAMG,0CAAoB;YAC1BG,QAAQE,wCAAmB;QAC/B;QACAR;QACAM;QACAnB;QACAC;QACAK;IACJ;AACJ"}

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

@@ -27,22 +27,22 @@ const overlayDrawerClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r1mbnmj9", "rem9xf8", {
+ */ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r7dfyj8", "rmx02j7", {
     r: [
-        ".r1mbnmj9{overflow: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;}",
-        ".r1mbnmj9:focus{outline-style:none;}",
-        ".r1mbnmj9:focus-visible{outline-style:none;}",
-        ".r1mbnmj9[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
-        ".r1mbnmj9[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);}",
-        ".rem9xf8{overflow: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;}",
-        ".rem9xf8:focus{outline-style:none;}",
-        ".rem9xf8:focus-visible{outline-style:none;}",
-        ".rem9xf8[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
-        ".rem9xf8[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);}"
+        ".r7dfyj8{overflow: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;}",
+        ".r7dfyj8:focus{outline-style:none;}",
+        ".r7dfyj8:focus-visible{outline-style:none;}",
+        ".r7dfyj8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".r7dfyj8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+        ".rmx02j7{overflow: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;}",
+        ".rmx02j7:focus{outline-style:none;}",
+        ".rmx02j7:focus-visible{outline-style:none;}",
+        ".rmx02j7[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".rmx02j7[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
     ],
     s: [
-        "@media (forced-colors: active){.r1mbnmj9[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
-        "@media (forced-colors: active){.rem9xf8[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
+        "@media (forced-colors: active){.r7dfyj8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
+        "@media (forced-colors: active){.rmx02j7[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
     ]
 });
 const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({

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

@@ -1 +1 @@
-{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __resetStyles, __styles, 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';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const overlayDrawerClassNames = {\n  root: 'fui-OverlayDrawer',\n  backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"r1mbnmj9\", \"rem9xf8\", {\n  r: [\".r1mbnmj9{overflow: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;}\", \".r1mbnmj9:focus{outline-style:none;}\", \".r1mbnmj9:focus-visible{outline-style:none;}\", \".r1mbnmj9[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1mbnmj9[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);}\", \".rem9xf8{overflow: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;}\", \".rem9xf8:focus{outline-style:none;}\", \".rem9xf8:focus-visible{outline-style:none;}\", \".rem9xf8[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rem9xf8[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);}\"],\n  s: [\"@media (forced-colors: active){.r1mbnmj9[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rem9xf8[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n  start: {\n    Bz10aip: \"f1d8gkik\"\n  },\n  end: {\n    Bz10aip: \"f1g0pcr8\"\n  },\n  bottom: {\n    Bz10aip: \"fip488n\",\n    Bhzewxz: \"f198g47y\",\n    Bqenvij: \"fub80nq\",\n    a9b677: \"fr97h3j\"\n  }\n}, {\n  d: [\".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\", \".fip488n{transform:translate3D(0, calc(var(--fui-Drawer--size) * 1), 0);}\", \".f198g47y{top:auto;}\", \".fub80nq{height:var(--fui-Drawer--size);}\", \".fr97h3j{width:100vw;}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n  \"default\": {\n    abs64n: \"fk73vx1\",\n    E5pizo: \"ff88big\",\n    Bmy1vo4: \"f1neo61\",\n    Es3by: \"f1ytgekk\"\n  },\n  enter: {\n    abs64n: \"f5p0z4x\",\n    Bz10aip: \"f87uvqx\",\n    E5pizo: \"f10nrhrw\"\n  }\n}, {\n  d: [\".fk73vx1{opacity:0;}\", \".ff88big{box-shadow:0px var(--colorTransparentBackground);}\", \".f1neo61{transition-property:transform,box-shadow,opacity;}\", \".f1ytgekk{will-change:transform,box-shadow,opacity;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropMotionStyles = /*#__PURE__*/__styles({\n  \"default\": {\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f13u1uyl\",\n    Bkqvd7p: \"f17wnm97\",\n    Es3by: \"f1gqqdtu\"\n  },\n  enter: {\n    abs64n: \"f5p0z4x\"\n  }\n}, {\n  d: [\".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".f17wnm97{transition-timing-function:var(--curveEasyEase);}\", \".f1gqqdtu{will-change:opacity;}\", \".f5p0z4x{opacity:1;}\"]\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */\nexport const useOverlayDrawerStyles_unstable = state => {\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const resetStyles = useDrawerResetStyles();\n  const rootStyles = useDrawerRootStyles();\n  const durationStyles = useDrawerDurationStyles();\n  const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n  const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());\n  const backdrop = state.root.backdrop;\n  state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);\n  if (backdrop) {\n    backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useOverlayDrawerStyles.styles.js.map"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","r","s","useDrawerRootStyles","__styles","start","Bz10aip","end","bottom","Bhzewxz","Bqenvij","a9b677","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","durationStyles","useDrawerDurationStyles","drawerMotionClassNames","useMotionClassNames","motion","backdropMotionClassNames","className","mergeClasses","position","size"],"mappings":";;;;;;;;;;;IAMaA,uBAAuB;eAAvBA;;IA6DAC,+BAA+B;eAA/BA;;;;iEAnEU;wBAC+B;2CAG+C;oCACjE;AAC7B,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,YAAY,WAAW;IAC7EC,GAAG;QAAC;QAAwU;QAAwC;QAAgD;QAAiK;QAAmvB;QAAuU;QAAuC;QAA+C;QAAgK;KAAivB;IACtmFC,GAAG;QAAC;QAAgM;KAA8L;AACpY;AACA,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,QAAQ;QACNF,SAAS;QACTG,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA+E;QAA8E;QAA6E;QAAwB;QAA6C;KAAyB;AAC9U;AACA,MAAMC,wBAAwB,WAAW,GAAET,IAAAA,gBAAQ,EAAC;IAClD,WAAW;QACTU,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;QACRR,SAAS;QACTS,QAAQ;IACV;AACF,GAAG;IACDH,GAAG;QAAC;QAAwB;QAA+D;QAA+D;QAAwD;QAAwB;QAA6C;KAAyC;AAClU;AACA;;CAEC,GACD,MAAMO,0BAA0B,WAAW,GAAEf,IAAAA,gBAAQ,EAAC;IACpD,WAAW;QACTU,QAAQ;QACRE,SAAS;QACTI,SAAS;QACTH,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;IACV;AACF,GAAG;IACDF,GAAG;QAAC;QAAwB;QAA2C;QAA+D;QAAmC;KAAuB;AAClM;AAIO,MAAMhB,kCAAkCyB,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAczB;IACpB,MAAM0B,aAAatB;IACnB,MAAMuB,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAMC,yBAAyBC,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEjB;IACjE,MAAMkB,2BAA2BF,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEX;IACnE,MAAMrB,WAAWuB,MAAMxB,IAAI,CAACC,QAAQ;IACpCuB,MAAMxB,IAAI,CAACmC,SAAS,GAAGC,IAAAA,oBAAY,EAACtC,wBAAwBE,IAAI,EAAEyB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAEN,wBAAwBP,MAAMxB,IAAI,CAACmC,SAAS;IACvK,IAAIlC,UAAU;QACZA,SAASkC,SAAS,GAAGC,IAAAA,oBAAY,EAACtC,wBAAwBG,QAAQ,EAAEiC,0BAA0BL,cAAc,CAACL,MAAMc,IAAI,CAAC,EAAErC,SAASkC,SAAS;IAC9I;IACA,OAAOX;AACT,GACA,yDAAyD"}
+{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __resetStyles, __styles, 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';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const overlayDrawerClassNames = {\n  root: 'fui-OverlayDrawer',\n  backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"r7dfyj8\", \"rmx02j7\", {\n  r: [\".r7dfyj8{overflow: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;}\", \".r7dfyj8:focus{outline-style:none;}\", \".r7dfyj8:focus-visible{outline-style:none;}\", \".r7dfyj8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r7dfyj8[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rmx02j7{overflow: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;}\", \".rmx02j7:focus{outline-style:none;}\", \".rmx02j7:focus-visible{outline-style:none;}\", \".rmx02j7[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rmx02j7[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n  s: [\"@media (forced-colors: active){.r7dfyj8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.rmx02j7[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n  start: {\n    Bz10aip: \"f1d8gkik\"\n  },\n  end: {\n    Bz10aip: \"f1g0pcr8\"\n  },\n  bottom: {\n    Bz10aip: \"fip488n\",\n    Bhzewxz: \"f198g47y\",\n    Bqenvij: \"fub80nq\",\n    a9b677: \"fr97h3j\"\n  }\n}, {\n  d: [\".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\", \".fip488n{transform:translate3D(0, calc(var(--fui-Drawer--size) * 1), 0);}\", \".f198g47y{top:auto;}\", \".fub80nq{height:var(--fui-Drawer--size);}\", \".fr97h3j{width:100vw;}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n  \"default\": {\n    abs64n: \"fk73vx1\",\n    E5pizo: \"ff88big\",\n    Bmy1vo4: \"f1neo61\",\n    Es3by: \"f1ytgekk\"\n  },\n  enter: {\n    abs64n: \"f5p0z4x\",\n    Bz10aip: \"f87uvqx\",\n    E5pizo: \"f10nrhrw\"\n  }\n}, {\n  d: [\".fk73vx1{opacity:0;}\", \".ff88big{box-shadow:0px var(--colorTransparentBackground);}\", \".f1neo61{transition-property:transform,box-shadow,opacity;}\", \".f1ytgekk{will-change:transform,box-shadow,opacity;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropMotionStyles = /*#__PURE__*/__styles({\n  \"default\": {\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f13u1uyl\",\n    Bkqvd7p: \"f17wnm97\",\n    Es3by: \"f1gqqdtu\"\n  },\n  enter: {\n    abs64n: \"f5p0z4x\"\n  }\n}, {\n  d: [\".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".f17wnm97{transition-timing-function:var(--curveEasyEase);}\", \".f1gqqdtu{will-change:opacity;}\", \".f5p0z4x{opacity:1;}\"]\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */\nexport const useOverlayDrawerStyles_unstable = state => {\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const resetStyles = useDrawerResetStyles();\n  const rootStyles = useDrawerRootStyles();\n  const durationStyles = useDrawerDurationStyles();\n  const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n  const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());\n  const backdrop = state.root.backdrop;\n  state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);\n  if (backdrop) {\n    backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useOverlayDrawerStyles.styles.js.map"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","r","s","useDrawerRootStyles","__styles","start","Bz10aip","end","bottom","Bhzewxz","Bqenvij","a9b677","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","durationStyles","useDrawerDurationStyles","drawerMotionClassNames","useMotionClassNames","motion","backdropMotionClassNames","className","mergeClasses","position","size"],"mappings":";;;;;;;;;;;IAMaA,uBAAuB;eAAvBA;;IA6DAC,+BAA+B;eAA/BA;;;;iEAnEU;wBAC+B;2CAG+C;oCACjE;AAC7B,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,WAAW,WAAW;IAC5EC,GAAG;QAAC;QAAuU;QAAuC;QAA+C;QAAgK;QAA8Q;QAAuU;QAAuC;QAA+C;QAAgK;KAA6Q;IACzpDC,GAAG;QAAC;QAA+L;KAA8L;AACnY;AACA,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,QAAQ;QACNF,SAAS;QACTG,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA+E;QAA8E;QAA6E;QAAwB;QAA6C;KAAyB;AAC9U;AACA,MAAMC,wBAAwB,WAAW,GAAET,IAAAA,gBAAQ,EAAC;IAClD,WAAW;QACTU,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;QACRR,SAAS;QACTS,QAAQ;IACV;AACF,GAAG;IACDH,GAAG;QAAC;QAAwB;QAA+D;QAA+D;QAAwD;QAAwB;QAA6C;KAAyC;AAClU;AACA;;CAEC,GACD,MAAMO,0BAA0B,WAAW,GAAEf,IAAAA,gBAAQ,EAAC;IACpD,WAAW;QACTU,QAAQ;QACRE,SAAS;QACTI,SAAS;QACTH,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;IACV;AACF,GAAG;IACDF,GAAG;QAAC;QAAwB;QAA2C;QAA+D;QAAmC;KAAuB;AAClM;AAIO,MAAMhB,kCAAkCyB,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAczB;IACpB,MAAM0B,aAAatB;IACnB,MAAMuB,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAMC,yBAAyBC,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEjB;IACjE,MAAMkB,2BAA2BF,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEX;IACnE,MAAMrB,WAAWuB,MAAMxB,IAAI,CAACC,QAAQ;IACpCuB,MAAMxB,IAAI,CAACmC,SAAS,GAAGC,IAAAA,oBAAY,EAACtC,wBAAwBE,IAAI,EAAEyB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAEN,wBAAwBP,MAAMxB,IAAI,CAACmC,SAAS;IACvK,IAAIlC,UAAU;QACZA,SAASkC,SAAS,GAAGC,IAAAA,oBAAY,EAACtC,wBAAwBG,QAAQ,EAAEiC,0BAA0BL,cAAc,CAACL,MAAMc,IAAI,CAAC,EAAErC,SAASkC,SAAS;IAC9I;IACA,OAAOX;AACT,GACA,yDAAyD"}

package/lib-commonjs/shared/useDrawerBaseStyles.styles.js

@@ -57,17 +57,12 @@ const drawerDefaultStyles = {
         Hwfdqs: "f5e8c63"
     },
     start: {
-        Bekrc4i: [
-            "f5tn483",
-            "f1ojsxk5"
-        ],
-        vrafjx: [
-            "fcdblym",
-            "fjik90z"
-        ],
-        h3c5rm: [
-            "f1gn591s",
-            "fjscplz"
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        u1mtju: [
+            "f1xteiwb",
+            "fsqykmd"
         ],
         oyh7mz: [
             "f1vgc2s3",
@@ -79,17 +74,12 @@ const drawerDefaultStyles = {
         ]
     },
     end: {
-        ibv6hh: [
-            "f1ojsxk5",
-            "f5tn483"
-        ],
-        wvpqe5: [
-            "fjik90z",
-            "fcdblym"
-        ],
-        zhjwy3: [
-            "fjscplz",
-            "f1gn591s"
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        B4g9neb: [
+            "fsqykmd",
+            "f1xteiwb"
         ],
         j35jbq: [
             "f1e31b4d",
@@ -120,16 +110,34 @@ const drawerDefaultStyles = {
     d: [
         ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}",
         ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}",
-        ".f5tn483{border-right-width:var(--strokeWidthThin);}",
-        ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}",
-        ".fcdblym{border-right-style:solid;}",
-        ".fjik90z{border-left-style:solid;}",
-        ".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
-        ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
+        [
+            ".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -1
+            }
+        ],
         ".f1vgc2s3{left:0;}",
         ".f1e31b4d{right:0;}",
         ".fvfyk4{right:auto;}",
         ".frppm18{left:auto;}",
+        [
+            ".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -1
+            }
+        ],
         ".f1yab3r1{bottom:0;}",
         ".f198g47y{top:auto;}",
         ".f1exhnwo{--fui-Drawer--size:320px;}",

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n  drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles = {\n  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 */\nconst useDrawerStyles = /*#__PURE__*/__styles({\n  entering: {\n    Bkqvd7p: \"f18ad807\"\n  },\n  exiting: {\n    Bkqvd7p: \"f1mfizis\"\n  },\n  reducedMotion: {\n    Hwfdqs: \"f5e8c63\"\n  },\n  start: {\n    Bekrc4i: [\"f5tn483\", \"f1ojsxk5\"],\n    vrafjx: [\"fcdblym\", \"fjik90z\"],\n    h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n    j35jbq: [\"fvfyk4\", \"frppm18\"]\n  },\n  end: {\n    ibv6hh: [\"f1ojsxk5\", \"f5tn483\"],\n    wvpqe5: [\"fjik90z\", \"fcdblym\"],\n    zhjwy3: [\"fjscplz\", \"f1gn591s\"],\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    oyh7mz: [\"frppm18\", \"fvfyk4\"]\n  },\n  bottom: {\n    B5kzvoi: \"f1yab3r1\",\n    Bhzewxz: \"f198g47y\"\n  },\n  small: {\n    Bjr0ffy: \"f1exhnwo\"\n  },\n  medium: {\n    Bjr0ffy: \"fqofjzu\"\n  },\n  large: {\n    Bjr0ffy: \"fce6y3m\"\n  },\n  full: {\n    Bjr0ffy: \"fsdmzs6\"\n  }\n}, {\n  d: [\".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\", \".f5tn483{border-right-width:var(--strokeWidthThin);}\", \".f1ojsxk5{border-left-width:var(--strokeWidthThin);}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".f1gn591s{border-right-color:var(--colorTransparentStroke);}\", \".fjscplz{border-left-color:var(--colorTransparentStroke);}\", \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", \".f1yab3r1{bottom:0;}\", \".f198g47y{top:auto;}\", \".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fsdmzs6{--fui-Drawer--size:100vw;}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }]]\n});\nexport const useDrawerBottomBaseStyles = /*#__PURE__*/__styles({\n  small: {\n    Bjr0ffy: \"f1exhnwo\"\n  },\n  medium: {\n    Bjr0ffy: \"fqofjzu\"\n  },\n  large: {\n    Bjr0ffy: \"fce6y3m\"\n  },\n  full: {\n    Bjr0ffy: \"fno8cgj\"\n  }\n}, {\n  d: [\".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fno8cgj{--fui-Drawer--size:100vh;}\"]\n});\nexport const useDrawerDurationStyles = /*#__PURE__*/__styles({\n  small: {\n    B3o57yi: \"fc397y7\"\n  },\n  medium: {\n    B3o57yi: \"f78771\"\n  },\n  large: {\n    B3o57yi: \"f9ymmep\"\n  },\n  full: {\n    B3o57yi: \"f1loko9l\"\n  }\n}, {\n  d: [\".fc397y7{transition-duration:var(--durationGentle);}\", \".f78771{transition-duration:var(--durationSlow);}\", \".f9ymmep{transition-duration:var(--durationSlower);}\", \".f1loko9l{transition-duration:var(--durationUltraSlow);}\"]\n});\nexport const useDrawerBaseClassNames = ({\n  position,\n  size,\n  motion\n}) => {\n  const baseStyles = useDrawerStyles();\n  const bottomBaseStyles = useDrawerBottomBaseStyles();\n  const durationStyles = useDrawerDurationStyles();\n  return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], durationStyles[size], position !== 'bottom' && baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerBottomBaseStyles","useDrawerDurationStyles","useDrawerBaseClassNames","drawerSizeVar","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","__styles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","Bekrc4i","vrafjx","h3c5rm","oyh7mz","j35jbq","end","ibv6hh","wvpqe5","zhjwy3","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","m","B3o57yi","position","size","motion","baseStyles","bottomBaseStyles","durationStyles","mergeClasses","type"],"mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAMAC,mBAAmB;eAAnBA;;IA+DAC,yBAAyB;eAAzBA;;IAgBAC,uBAAuB;eAAvBA;;IAgBAC,uBAAuB;eAAvBA;;;uBA1GsC;4BAC5B;AAIhB,MAAMJ,gBAAgB;IAC3BK,eAAe;AACjB;AAIO,MAAMJ,sBAAsB;IACjCK,UAAU;IACVC,OAAO,CAAC,IAAI,EAAEP,cAAcK,aAAa,CAAC,CAAC,CAAC;IAC5CG,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBC,kBAAM,CAACC,uBAAuB;IAC/CC,OAAOF,kBAAM,CAACG,uBAAuB;AACvC;AACA;;CAEC,GACD,MAAMC,kBAAkB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC5CC,UAAU;QACRC,SAAS;IACX;IACAC,SAAS;QACPD,SAAS;IACX;IACAE,eAAe;QACbC,QAAQ;IACV;IACAC,OAAO;QACLC,SAAS;YAAC;YAAW;SAAW;QAChCC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAU;SAAU;IAC/B;IACAC,KAAK;QACHC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAW;QAC/BJ,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAW;SAAS;IAC/B;IACAM,QAAQ;QACNC,SAAS;QACTC,SAAS;IACX;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;IACAG,MAAM;QACJH,SAAS;IACX;AACF,GAAG;IACDI,GAAG;QAAC;QAAoE;QAAoE;QAAwD;QAAwD;QAAuC;QAAsC;QAAgE;QAA8D;QAAsB;QAAuB;QAAwB;QAAwB;QAAwB;QAAwB;QAAwC;QAAuC;QAAuC;KAAsC;IAChvBC,GAAG;QAAC;YAAC;YAA8F;gBACjGA,GAAG;YACL;SAAE;KAAC;AACL;AACO,MAAM7C,4BAA4B,WAAW,GAAEoB,IAAAA,eAAQ,EAAC;IAC7DmB,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;IACAG,MAAM;QACJH,SAAS;IACX;AACF,GAAG;IACDI,GAAG;QAAC;QAAwC;QAAuC;QAAuC;KAAsC;AAClK;AACO,MAAM3C,0BAA0B,WAAW,GAAEmB,IAAAA,eAAQ,EAAC;IAC3DmB,OAAO;QACLO,SAAS;IACX;IACAL,QAAQ;QACNK,SAAS;IACX;IACAJ,OAAO;QACLI,SAAS;IACX;IACAH,MAAM;QACJG,SAAS;IACX;AACF,GAAG;IACDF,GAAG;QAAC;QAAwD;QAAqD;QAAwD;KAA2D;AACtO;AACO,MAAM1C,0BAA0B,CAAC,EACtC6C,QAAQ,EACRC,IAAI,EACJC,MAAM,EACP;IACC,MAAMC,aAAa/B;IACnB,MAAMgC,mBAAmBnD;IACzB,MAAMoD,iBAAiBnD;IACvB,OAAOoD,IAAAA,mBAAY,EAACH,UAAU,CAACH,SAAS,EAAEA,aAAa,YAAYI,gBAAgB,CAACH,KAAK,EAAEI,cAAc,CAACJ,KAAK,EAAED,aAAa,YAAYG,UAAU,CAACF,KAAK,EAAEE,WAAW1B,aAAa,EAAEyB,OAAOK,IAAI,KAAK,cAAcJ,WAAW7B,QAAQ,EAAE4B,OAAOK,IAAI,KAAK,aAAaJ,WAAW3B,OAAO;AAC1R,GACA,sDAAsD"}
+{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n  drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles = {\n  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 */\nconst useDrawerStyles = /*#__PURE__*/__styles({\n  entering: {\n    Bkqvd7p: \"f18ad807\"\n  },\n  exiting: {\n    Bkqvd7p: \"f1mfizis\"\n  },\n  reducedMotion: {\n    Hwfdqs: \"f5e8c63\"\n  },\n  start: {\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    u1mtju: [\"f1xteiwb\", \"fsqykmd\"],\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n    j35jbq: [\"fvfyk4\", \"frppm18\"]\n  },\n  end: {\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    B4g9neb: [\"fsqykmd\", \"f1xteiwb\"],\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    oyh7mz: [\"frppm18\", \"fvfyk4\"]\n  },\n  bottom: {\n    B5kzvoi: \"f1yab3r1\",\n    Bhzewxz: \"f198g47y\"\n  },\n  small: {\n    Bjr0ffy: \"f1exhnwo\"\n  },\n  medium: {\n    Bjr0ffy: \"fqofjzu\"\n  },\n  large: {\n    Bjr0ffy: \"fce6y3m\"\n  },\n  full: {\n    Bjr0ffy: \"fsdmzs6\"\n  }\n}, {\n  d: [\".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\", [\".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n    p: -1\n  }], [\".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n    p: -1\n  }], \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", [\".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n    p: -1\n  }], [\".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}\", {\n    p: -1\n  }], \".f1yab3r1{bottom:0;}\", \".f198g47y{top:auto;}\", \".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fsdmzs6{--fui-Drawer--size:100vw;}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }]]\n});\nexport const useDrawerBottomBaseStyles = /*#__PURE__*/__styles({\n  small: {\n    Bjr0ffy: \"f1exhnwo\"\n  },\n  medium: {\n    Bjr0ffy: \"fqofjzu\"\n  },\n  large: {\n    Bjr0ffy: \"fce6y3m\"\n  },\n  full: {\n    Bjr0ffy: \"fno8cgj\"\n  }\n}, {\n  d: [\".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fno8cgj{--fui-Drawer--size:100vh;}\"]\n});\nexport const useDrawerDurationStyles = /*#__PURE__*/__styles({\n  small: {\n    B3o57yi: \"fc397y7\"\n  },\n  medium: {\n    B3o57yi: \"f78771\"\n  },\n  large: {\n    B3o57yi: \"f9ymmep\"\n  },\n  full: {\n    B3o57yi: \"f1loko9l\"\n  }\n}, {\n  d: [\".fc397y7{transition-duration:var(--durationGentle);}\", \".f78771{transition-duration:var(--durationSlow);}\", \".f9ymmep{transition-duration:var(--durationSlower);}\", \".f1loko9l{transition-duration:var(--durationUltraSlow);}\"]\n});\nexport const useDrawerBaseClassNames = ({\n  position,\n  size,\n  motion\n}) => {\n  const baseStyles = useDrawerStyles();\n  const bottomBaseStyles = useDrawerBottomBaseStyles();\n  const durationStyles = useDrawerDurationStyles();\n  return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], durationStyles[size], position !== 'bottom' && baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerBottomBaseStyles","useDrawerDurationStyles","useDrawerBaseClassNames","drawerSizeVar","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","__styles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","h3c5rm","vrafjx","Bekrc4i","u1mtju","oyh7mz","j35jbq","end","zhjwy3","wvpqe5","ibv6hh","B4g9neb","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","p","m","B3o57yi","position","size","motion","baseStyles","bottomBaseStyles","durationStyles","mergeClasses","type"],"mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAMAC,mBAAmB;eAAnBA;;IAyEAC,yBAAyB;eAAzBA;;IAgBAC,uBAAuB;eAAvBA;;IAgBAC,uBAAuB;eAAvBA;;;uBApH0B;4BAChB;AAIhB,MAAMJ,gBAAgB;IAC3BK,eAAe;AACjB;AAIO,MAAMJ,sBAAsB;IACjCK,UAAU;IACVC,OAAO,CAAC,IAAI,EAAEP,cAAcK,aAAa,CAAC,CAAC,CAAC;IAC5CG,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBC,kBAAM,CAACC,uBAAuB;IAC/CC,OAAOF,kBAAM,CAACG,uBAAuB;AACvC;AACA;;CAEC,GACD,MAAMC,kBAAkB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC5CC,UAAU;QACRC,SAAS;IACX;IACAC,SAAS;QACPD,SAAS;IACX;IACAE,eAAe;QACbC,QAAQ;IACV;IACAC,OAAO;QACLC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAU;SAAU;IAC/B;IACAC,KAAK;QACHC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;YAAC;YAAW;SAAW;QAChCL,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAW;SAAS;IAC/B;IACAO,QAAQ;QACNC,SAAS;QACTC,SAAS;IACX;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;IACAG,MAAM;QACJH,SAAS;IACX;AACF,GAAG;IACDI,GAAG;QAAC;QAAoE;QAAoE;YAAC;YAAuF;gBAClOC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAqF;gBACxFA,GAAG,CAAC;YACN;SAAE;QAAE;QAAsB;QAAuB;QAAwB;QAAwB;YAAC;YAAqF;gBACrLA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAuF;gBAC1FA,GAAG,CAAC;YACN;SAAE;QAAE;QAAwB;QAAwB;QAAwC;QAAuC;QAAuC;KAAsC;IAChNC,GAAG;QAAC;YAAC;YAA8F;gBACjGA,GAAG;YACL;SAAE;KAAC;AACL;AACO,MAAMhD,4BAA4B,WAAW,GAAEoB,IAAAA,eAAQ,EAAC;IAC7DqB,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;IACAG,MAAM;QACJH,SAAS;IACX;AACF,GAAG;IACDI,GAAG;QAAC;QAAwC;QAAuC;QAAuC;KAAsC;AAClK;AACO,MAAM7C,0BAA0B,WAAW,GAAEmB,IAAAA,eAAQ,EAAC;IAC3DqB,OAAO;QACLQ,SAAS;IACX;IACAN,QAAQ;QACNM,SAAS;IACX;IACAL,OAAO;QACLK,SAAS;IACX;IACAJ,MAAM;QACJI,SAAS;IACX;AACF,GAAG;IACDH,GAAG;QAAC;QAAwD;QAAqD;QAAwD;KAA2D;AACtO;AACO,MAAM5C,0BAA0B,CAAC,EACtCgD,QAAQ,EACRC,IAAI,EACJC,MAAM,EACP;IACC,MAAMC,aAAalC;IACnB,MAAMmC,mBAAmBtD;IACzB,MAAMuD,iBAAiBtD;IACvB,OAAOuD,IAAAA,mBAAY,EAACH,UAAU,CAACH,SAAS,EAAEA,aAAa,YAAYI,gBAAgB,CAACH,KAAK,EAAEI,cAAc,CAACJ,KAAK,EAAED,aAAa,YAAYG,UAAU,CAACF,KAAK,EAAEE,WAAW7B,aAAa,EAAE4B,OAAOK,IAAI,KAAK,cAAcJ,WAAWhC,QAAQ,EAAE+B,OAAOK,IAAI,KAAK,aAAaJ,WAAW9B,OAAO;AAC1R,GACA,sDAAsD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.3.2",
+  "version": "9.4.0",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,11 +35,11 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.10.6",
+    "@fluentui/react-dialog": "^9.10.7",
     "@fluentui/react-jsx-runtime": "^9.0.38",
     "@fluentui/react-motion-preview": "^0.5.21",
     "@fluentui/react-shared-contexts": "^9.19.0",
-    "@fluentui/react-tabster": "^9.21.3",
+    "@fluentui/react-tabster": "^9.21.4",
     "@fluentui/react-theme": "^9.1.19",
     "@fluentui/react-utilities": "^9.18.9",
     "@griffel/react": "^1.5.22",