@fluentui/react-drawer 9.0.0-beta.2 → 9.0.0-beta.21

package/lib/components/DrawerOverlay/renderDrawerOverlay.js

@@ -1,9 +1,15 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 import { Dialog } from '@fluentui/react-dialog';
 /**
  * Render the final JSX of DrawerOverlay
  */ export const renderDrawerOverlay_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(Dialog, state.dialog, /*#__PURE__*/ React.createElement(slots.root, slotProps.root));
+    if (!state.motion.canRender) {
+        return null;
+    }
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(Dialog, {
+        ...state.dialog,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\nimport { Dialog } from '@fluentui/react-dialog';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  const { slots, slotProps } = getSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <Dialog {...state.dialog}>\n      <slots.root {...slotProps.root} />\n    </Dialog>\n  );\n};\n"],"names":["React","getSlots","Dialog","renderDrawerOverlay_unstable","state","slots","slotProps","dialog","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAErD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,SAA6BG;IAE1D,qBACE,oBAACF,QAAWE,MAAMG,MAAM,gBACtB,oBAACF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\nimport { Dialog } from '@fluentui/react-dialog';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <Dialog {...state.dialog}>\n      <state.root />\n    </Dialog>\n  );\n};\n"],"names":["assertSlots","Dialog","renderDrawerOverlay_unstable","state","motion","canRender","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAL,YAAgCG;IAEhC,qBACE,KAACF;QAAQ,GAAGE,MAAMG,MAAM;kBACtB,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/DrawerOverlay/useDrawerOverlay.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
 import { DialogSurface } from '@fluentui/react-dialog';
-import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
+import { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';
+import { useMotion } from '@fluentui/react-motion-preview';
 /**
  * Create the state required to render DrawerOverlay.
  *
@@ -9,26 +10,47 @@ import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
  * before being passed to renderDrawerOverlay_unstable.
  *
  * @param props - props from this instance of DrawerOverlay
- * @param ref - reference to root HTMLElement of DrawerOverlay
+ * @param ref - reference to root HTMLDivElement of DrawerOverlay
  */ export const useDrawerOverlay_unstable = (props, ref)=>{
-    const { open , defaultOpen , size , position  } = getDefaultDrawerProps(props);
-    const { modalType ='modal' , inertTrapFocus , onOpenChange  } = props;
+    const { open, defaultOpen, size, position } = useDrawerDefaultProps(props);
+    const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
+    const drawerMotion = useMotion(open);
+    const backdropMotion = useMotion(open);
+    const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;
+    const root = slot.always(getNativeElementProps('div', {
+        ...props,
+        ref: useMergedRefs(ref, drawerMotion.ref)
+    }), {
+        elementType: DialogSurface,
+        defaultProps: {
+            backdrop: slot.optional(props.backdrop, {
+                elementType: 'div',
+                renderByDefault: hasCustomBackdrop,
+                defaultProps: {
+                    ref: backdropMotion.ref
+                }
+            })
+        }
+    });
+    const dialog = slot.always({
+        open: true,
+        defaultOpen,
+        onOpenChange,
+        inertTrapFocus,
+        modalType
+    }, {
+        elementType: 'div'
+    });
     return {
         components: {
-            root: DialogSurface
-        },
-        root: getNativeElementProps('div', {
-            ref,
-            ...props
-        }),
-        dialog: {
-            open,
-            defaultOpen,
-            onOpenChange,
-            inertTrapFocus,
-            modalType
+            root: DialogSurface,
+            backdrop: 'div'
         },
+        root,
+        dialog,
         size,
-        position
+        position,
+        motion: drawerMotion,
+        backdropMotion
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\nimport { DialogProps, DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLElement>,\n): DrawerOverlayState => {\n  const { open, defaultOpen, size, position } = getDefaultDrawerProps(props);\n  const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n  return {\n    components: {\n      root: DialogSurface,\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    dialog: {\n      open,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    } as DialogProps,\n\n    size,\n    position,\n  };\n};\n"],"names":["React","getNativeElementProps","DialogSurface","getDefaultDrawerProps","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","components","root","dialog"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,SAAsBC,aAAa,QAAQ,yBAAyB;AACpE,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,KAAI,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGP,sBAAsBE;IACpE,MAAM,EAAEM,WAAY,QAAO,EAAEC,eAAc,EAAEC,aAAY,EAAE,GAAGR;IAE9D,OAAO;QACLS,YAAY;YACVC,MAAMb;QACR;QAEAa,MAAMd,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QACAW,QAAQ;YACNT;YACAC;YACAK;YACAD;YACAD;QACF;QAEAF;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\nimport { DialogProps, DialogSurface, DialogSurfaceProps } from '@fluentui/react-dialog';\nimport { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerOverlayState => {\n  const { open, defaultOpen, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n  const drawerMotion = useMotion<HTMLDivElement>(open);\n  const backdropMotion = useMotion<HTMLDivElement>(open);\n\n  const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n\n  const root = slot.always<DialogSurfaceProps>(\n    getNativeElementProps('div', {\n      ...props,\n      ref: useMergedRefs(ref, drawerMotion.ref),\n    }),\n    {\n      elementType: DialogSurface,\n      defaultProps: {\n        backdrop: slot.optional(props.backdrop, {\n          elementType: 'div',\n          renderByDefault: hasCustomBackdrop,\n          defaultProps: {\n            ref: backdropMotion.ref,\n          },\n        }),\n      },\n    },\n  );\n\n  const dialog = slot.always(\n    {\n      open: true,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    } as DialogProps,\n    {\n      elementType: 'div',\n    },\n  );\n\n  return {\n    components: {\n      root: DialogSurface,\n      backdrop: 'div',\n    },\n\n    root,\n\n    dialog,\n    size,\n    position,\n    motion: drawerMotion,\n    backdropMotion,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useMergedRefs","DialogSurface","useDrawerDefaultProps","useMotion","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","drawerMotion","backdropMotion","hasCustomBackdrop","backdrop","root","always","elementType","defaultProps","optional","renderByDefault","dialog","components","motion"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAEvF,SAAsBC,aAAa,QAA4B,yBAAyB;AACxF,SAASC,qBAAqB,QAAQ,mCAAmC;AACzE,SAASC,SAAS,QAAQ,iCAAiC;AAE3D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGR,sBAAsBG;IACpE,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGR;IAE9D,MAAMS,eAAeX,UAA0BI;IAC/C,MAAMQ,iBAAiBZ,UAA0BI;IAEjD,MAAMS,oBAAoBL,cAAc,eAAeN,MAAMY,QAAQ,KAAK;IAE1E,MAAMC,OAAOnB,KAAKoB,MAAM,CACtBrB,sBAAsB,OAAO;QAC3B,GAAGO,KAAK;QACRC,KAAKN,cAAcM,KAAKQ,aAAaR,GAAG;IAC1C,IACA;QACEc,aAAanB;QACboB,cAAc;YACZJ,UAAUlB,KAAKuB,QAAQ,CAACjB,MAAMY,QAAQ,EAAE;gBACtCG,aAAa;gBACbG,iBAAiBP;gBACjBK,cAAc;oBACZf,KAAKS,eAAeT,GAAG;gBACzB;YACF;QACF;IACF;IAGF,MAAMkB,SAASzB,KAAKoB,MAAM,CACxB;QACEZ,MAAM;QACNC;QACAK;QACAD;QACAD;IACF,GACA;QACES,aAAa;IACf;IAGF,OAAO;QACLK,YAAY;YACVP,MAAMjB;YACNgB,UAAU;QACZ;QAEAC;QAEAM;QACAf;QACAC;QACAgB,QAAQZ;QACRC;IACF;AACF,EAAE"}

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

@@ -1,27 +1,67 @@
+import * as React from 'react';
 import { __styles, mergeClasses } from '@griffel/react';
-import { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
+import { tokens } from '@fluentui/react-theme';
+import { useDrawerBaseClassNames, drawerCSSVars, useDrawerDurationStyles } from '../../util/useDrawerBaseStyles.styles';
 export const drawerOverlayClassNames = {
-  root: 'fui-DrawerOverlay'
+  root: 'fui-DrawerOverlay',
+  backdrop: 'fui-DrawerOverlay__backdrop'
 };
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
+const useDrawerRootStyles = /*#__PURE__*/__styles({
   root: {
     qhf8xq: "f19dog8a",
     Bhzewxz: "f15twtuk",
-    B5kzvoi: "f1yab3r1"
+    B5kzvoi: "f1yab3r1",
+    abs64n: "fk73vx1",
+    E5pizo: "fliqkoi",
+    Bmy1vo4: "f1neo61",
+    Es3by: "f1ytgekk"
+  },
+  start: {
+    Bz10aip: "f1d8gkik"
+  },
+  end: {
+    Bz10aip: "f1g0pcr8"
+  },
+  visible: {
+    abs64n: "f5p0z4x",
+    Bz10aip: "f87uvqx",
+    E5pizo: "f10nrhrw"
   }
 }, {
-  d: [".f19dog8a{position:fixed;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}"]
+  d: [".f19dog8a{position:fixed;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fk73vx1{opacity:0;}", ".fliqkoi{box-shadow:0px transparent;}", ".f1neo61{transition-property:transform,box-shadow,opacity;}", ".f1ytgekk{will-change:transform,box-shadow,opacity;}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}", ".f10nrhrw{box-shadow:var(--shadow64);}"]
+});
+/**
+ * Styles for the backdrop slot
+ */
+const useBackdropMotionStyles = /*#__PURE__*/__styles({
+  backdrop: {
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f13u1uyl",
+    Bkqvd7p: "f17wnm97",
+    Es3by: "f1gqqdtu"
+  },
+  visible: {
+    abs64n: "f5p0z4x"
+  }
+}, {
+  d: [".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".f17wnm97{transition-timing-function:var(--curveEasyEase);}", ".f1gqqdtu{will-change:opacity;}", ".f5p0z4x{opacity:1;}"]
 });
 /**
  * Apply styling to the DrawerOverlay slots based on the state
  */
 export const useDrawerOverlayStyles_unstable = state => {
-  const baseStyles = useDrawerBaseStyles();
-  const styles = useStyles();
-  state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);
+  const baseClassNames = useDrawerBaseClassNames(state);
+  const rootStyles = useDrawerRootStyles();
+  const backdropMotionStyles = useBackdropMotionStyles();
+  const durationStyles = useDrawerDurationStyles();
+  const backdrop = state.root.backdrop;
+  state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
+  if (backdrop) {
+    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);
+  }
   return state;
 };
 //# sourceMappingURL=useDrawerOverlayStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useDrawerBaseStyles","drawerOverlayClassNames","root","useStyles","qhf8xq","Bhzewxz","B5kzvoi","d","useDrawerOverlayStyles_unstable","state","baseStyles","styles","className","size","position"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'fixed',\n        top: 0,\n        bottom: 0\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n    const baseStyles = useDrawerBaseStyles();\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,UAAU,GAAGV,mBAAmB,CAAC,CAAC;EACxC,MAAMW,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACP,IAAI,CAACU,SAAS,GAAGb,YAAY,CAACE,uBAAuB,CAACC,IAAI,EAAEQ,UAAU,CAACR,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEO,KAAK,CAACI,IAAI,IAAIH,UAAU,CAACD,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACK,QAAQ,IAAIJ,UAAU,CAACD,KAAK,CAACK,QAAQ,CAAC,EAAEL,KAAK,CAACP,IAAI,CAACU,SAAS,CAAC;EACzM,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__styles","mergeClasses","tokens","useDrawerBaseClassNames","drawerCSSVars","useDrawerDurationStyles","drawerOverlayClassNames","root","backdrop","useDrawerRootStyles","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","useDrawerOverlayStyles_unstable","state","baseClassNames","rootStyles","backdropMotionStyles","durationStyles","className","position","motion","active","size","backdropMotion"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBaseClassNames, drawerCSSVars, useDrawerDurationStyles } from '../../util/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay',\n    backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerRootStyles = makeStyles({\n    root: {\n        position: 'fixed',\n        top: 0,\n        bottom: 0,\n        opacity: 0,\n        boxShadow: '0px transparent',\n        transitionProperty: 'transform, box-shadow, opacity',\n        willChange: 'transform, box-shadow, opacity'\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)',\n        boxShadow: tokens.shadow64\n    }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n    backdrop: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    visible: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const backdropMotionStyles = useBackdropMotionStyles();\n    const durationStyles = useDrawerDurationStyles();\n    const backdrop = state.root.backdrop;\n    state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,EAAEC,aAAa,EAAEC,uBAAuB,QAAQ,uCAAuC;AACvH,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,mBAAmB,gBAAGT,QAAA;EAAAO,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAP,MAAA;IAAAK,OAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAO,CAAA;AAAA,CAqB/B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,uBAAuB,gBAAGtB,QAAA;EAAAQ,QAAA;IAAAK,MAAA;IAAAE,OAAA;IAAAQ,OAAA;IAAAP,KAAA;EAAA;EAAAI,OAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAGvB,uBAAuB,CAACsB,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGlB,mBAAmB,CAAC,CAAC;EACxC,MAAMmB,oBAAoB,GAAGN,uBAAuB,CAAC,CAAC;EACtD,MAAMO,cAAc,GAAGxB,uBAAuB,CAAC,CAAC;EAChD,MAAMG,QAAQ,GAAGiB,KAAK,CAAClB,IAAI,CAACC,QAAQ;EACpCiB,KAAK,CAAClB,IAAI,CAACuB,SAAS,GAAG7B,YAAY,CAACK,uBAAuB,CAACC,IAAI,EAAEmB,cAAc,EAAEC,UAAU,CAACpB,IAAI,EAAEoB,UAAU,CAACF,KAAK,CAACM,QAAQ,CAAC,EAAEN,KAAK,CAACO,MAAM,CAACC,MAAM,IAAIN,UAAU,CAACP,OAAO,EAAEK,KAAK,CAAClB,IAAI,CAACuB,SAAS,CAAC;EAC/L,IAAItB,QAAQ,EAAE;IACVA,QAAQ,CAACsB,SAAS,GAAG7B,YAAY,CAACK,uBAAuB,CAACE,QAAQ,EAAEoB,oBAAoB,CAACpB,QAAQ,EAAEqB,cAAc,CAACJ,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACU,cAAc,CAACF,MAAM,IAAIL,oBAAoB,CAACR,OAAO,EAAEZ,QAAQ,CAACsB,SAAS,CAAC;EACnN;EACA,OAAOL,KAAK;AAChB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["export type DrawerBaseTypes = {\n  /**\n   * Position of the drawer.\n   *\n   * @default 'left'\n   */\n  position?: 'left' | 'right';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: boolean;\n\n  /**\n   * Default value for the uncontrolled open state of the Drawer.\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n};\n"],"names":[],"mappings":"AAAA,WAiCE"}
+{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["import { MotionShorthand, MotionState } from '@fluentui/react-motion-preview';\n\nexport type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: MotionShorthand<HTMLDivElement>;\n\n  /**\n   * Default value for the uncontrolled open state of the Drawer.\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  motion: MotionState<HTMLDivElement>;\n};\n"],"names":[],"mappings":"AAAA,WAuCE"}

package/lib/util/useDrawerBaseStyles.styles.js

@@ -1,5 +1,11 @@
-import { __styles, shorthands } from '@griffel/react';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+/**
+ * CSS variable names used internally for uniform styling in Drawer.
+ */
+export const drawerCSSVars = {
+  drawerSizeVar: '--fui-Drawer--size'
+};
 /**
  * Styles for the root slot
  */
@@ -19,6 +25,7 @@ export const useDrawerBaseStyles = /*#__PURE__*/__styles({
     Bekrc4i: ["f1358rze", "f1rvrf73"],
     Bn0qgzm: "fqdk4by",
     ibv6hh: ["f1rvrf73", "f1358rze"],
+    a9b677: "f3rx6dk",
     B2u0y6b: "f1w39fev",
     Bqenvij: "f11ysow2",
     B7ck84d: "f1ewtqcl",
@@ -28,28 +35,64 @@ export const useDrawerBaseStyles = /*#__PURE__*/__styles({
     Brf1p80: "fbhxue7",
     De3pzq: "fxugw4r"
   },
-  left: {
+  entering: {
+    Bkqvd7p: "f18ad807"
+  },
+  exiting: {
+    Bkqvd7p: "f1mfizis"
+  },
+  reducedMotion: {
+    Hwfdqs: "f5e8c63"
+  },
+  start: {
     oyh7mz: ["f1vgc2s3", "f1e31b4d"],
     j35jbq: ["fvfyk4", "frppm18"]
   },
-  right: {
+  end: {
     j35jbq: ["f1e31b4d", "f1vgc2s3"],
     oyh7mz: ["frppm18", "fvfyk4"]
   },
   small: {
-    a9b677: "f1nfxovz"
+    Bjr0ffy: "f1exhnwo"
+  },
+  medium: {
+    Bjr0ffy: "fqofjzu"
+  },
+  large: {
+    Bjr0ffy: "fce6y3m"
+  },
+  full: {
+    Bjr0ffy: "fsdmzs6"
+  }
+}, {
+  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f3rx6dk{width:var(--fui-Drawer--size);}", ".f1w39fev{max-width:100vw;}", ".f11ysow2{height:auto;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f6jr5hl{align-items:flex-start;}", ".fbhxue7{justify-content:flex-start;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left: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)"
+  }]]
+});
+export const useDrawerDurationStyles = /*#__PURE__*/__styles({
+  small: {
+    B3o57yi: "fc397y7"
   },
   medium: {
-    a9b677: "fb8d3vz"
+    B3o57yi: "f78771"
   },
   large: {
-    a9b677: "fi96w9z"
+    B3o57yi: "f9ymmep"
   },
   full: {
-    a9b677: "fr97h3j",
-    B2u0y6b: "f1w39fev"
+    B3o57yi: "f1loko9l"
   }
 }, {
-  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1w39fev{max-width:100vw;}", ".f11ysow2{height:auto;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", ".f1nfxovz{width:320px;}", ".fb8d3vz{width:592px;}", ".fi96w9z{width:940px;}", ".fr97h3j{width:100vw;}"]
+  d: [".fc397y7{transition-duration:var(--durationGentle);}", ".f78771{transition-duration:var(--durationSlow);}", ".f9ymmep{transition-duration:var(--durationSlower);}", ".f1loko9l{transition-duration:var(--durationUltraSlow);}"]
 });
+export const useDrawerBaseClassNames = ({
+  position,
+  size,
+  motion
+}) => {
+  const baseStyles = useDrawerBaseStyles();
+  const durationStyles = useDrawerDurationStyles();
+  return mergeClasses(baseStyles.root, baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
+};
 //# sourceMappingURL=useDrawerBaseStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","shorthands","tokens","useDrawerBaseStyles","root","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","left","oyh7mz","j35jbq","right","small","a9b677","medium","large","full","d"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the root slot\n */ export const useDrawerBaseStyles = makeStyles({\n    root: {\n        ...shorthands.padding(0),\n        ...shorthands.overflow('hidden'),\n        ...shorthands.borderRadius(0),\n        ...shorthands.border(0),\n        maxWidth: '100vw',\n        height: 'auto',\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        justifyContent: 'flex-start',\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    /* Positioning */ left: {\n        left: 0,\n        right: 'auto'\n    },\n    right: {\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        width: '320px'\n    },\n    medium: {\n        width: '592px'\n    },\n    large: {\n        width: '940px'\n    },\n    full: {\n        width: '100vw',\n        maxWidth: '100vw'\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,UAAU,QAAQ,gBAAgB;AACvD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,gBAAGH,QAAA;EAAAI,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAD,MAAA;EAAA;EAAAG,KAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,KAAA;IAAAF,MAAA;EAAA;EAAAG,IAAA;IAAAH,MAAA;IAAAb,OAAA;EAAA;AAAA;EAAAiB,CAAA;AAAA,CAoCtC,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","useDrawerBaseStyles","root","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","a9b677","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","oyh7mz","j35jbq","end","small","Bjr0ffy","medium","large","full","d","m","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Styles for the root slot\n */ export const useDrawerBaseStyles = makeStyles({\n    root: {\n        ...shorthands.padding(0),\n        ...shorthands.overflow('hidden'),\n        ...shorthands.borderRadius(0),\n        ...shorthands.border(0),\n        width: `var(${drawerCSSVars.drawerSizeVar})`,\n        maxWidth: '100vw',\n        height: 'auto',\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        justifyContent: 'flex-start',\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerDurationStyles = makeStyles({\n    small: {\n        transitionDuration: tokens.durationGentle\n    },\n    medium: {\n        transitionDuration: tokens.durationSlow\n    },\n    large: {\n        transitionDuration: tokens.durationSlower\n    },\n    full: {\n        transitionDuration: tokens.durationUltraSlow\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n    const baseStyles = useDrawerBaseStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles.root, baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAD,MAAA;IAAAD,MAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA+CtC,CAAC;AACF,OAAO,MAAMC,uBAAuB,gBAAG/C,QAAA;EAAAwC,KAAA;IAAAQ,OAAA;EAAA;EAAAN,MAAA;IAAAM,OAAA;EAAA;EAAAL,KAAA;IAAAK,OAAA;EAAA;EAAAJ,IAAA;IAAAI,OAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMI,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAG/C,mBAAmB,CAAC,CAAC;EACxC,MAAMgD,cAAc,GAAGP,uBAAuB,CAAC,CAAC;EAChD,OAAO9C,YAAY,CAACoD,UAAU,CAAC9C,IAAI,EAAE8C,UAAU,CAACH,QAAQ,CAAC,EAAEI,cAAc,CAACH,IAAI,CAAC,EAAEE,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAACnB,aAAa,EAAEkB,MAAM,CAACG,IAAI,KAAK,UAAU,IAAIF,UAAU,CAACtB,QAAQ,EAAEqB,MAAM,CAACG,IAAI,KAAK,SAAS,IAAIF,UAAU,CAACpB,OAAO,CAAC;AACpO,CAAC"}

package/lib/util/useDrawerDefaultProps.js

@@ -0,0 +1,9 @@
+export function useDrawerDefaultProps(props) {
+    const { open = false, defaultOpen = false, size = 'small', position = 'start' } = props;
+    return {
+        size,
+        position,
+        open,
+        defaultOpen
+    };
+}

package/lib/util/useDrawerDefaultProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDrawerDefaultProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function useDrawerDefaultProps(props: DrawerBaseProps) {\n  const { open = false, defaultOpen = false, size = 'small', position = 'start' } = props;\n\n  return {\n    size,\n    position,\n    open,\n    defaultOpen,\n  };\n}\n"],"names":["useDrawerDefaultProps","props","open","defaultOpen","size","position"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB;IAC1D,MAAM,EAAEC,OAAO,KAAK,EAAEC,cAAc,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAE,GAAGJ;IAElF,OAAO;QACLG;QACAC;QACAH;QACAC;IACF;AACF"}

package/lib-commonjs/Drawer.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./components/Drawer/index"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/Drawer/index"), exports);

package/lib-commonjs/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Drawer.js"],"sourcesContent":["export * from './components/Drawer/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
+{"version":3,"sources":["Drawer.js"],"sourcesContent":["export * from './components/Drawer/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/DrawerBody.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./components/DrawerBody/index"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/DrawerBody/index"), exports);

package/lib-commonjs/DrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerBody.js"],"sourcesContent":["export * from './components/DrawerBody/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
+{"version":3,"sources":["DrawerBody.js"],"sourcesContent":["export * from './components/DrawerBody/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/DrawerFooter.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./components/DrawerFooter/index"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/DrawerFooter/index"), exports);

package/lib-commonjs/DrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerFooter.js"],"sourcesContent":["export * from './components/DrawerFooter/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
+{"version":3,"sources":["DrawerFooter.js"],"sourcesContent":["export * from './components/DrawerFooter/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/DrawerHeader.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./components/DrawerHeader/index"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/DrawerHeader/index"), exports);

package/lib-commonjs/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerHeader.js"],"sourcesContent":["export * from './components/DrawerHeader/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
+{"version":3,"sources":["DrawerHeader.js"],"sourcesContent":["export * from './components/DrawerHeader/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/DrawerHeaderNavigation.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./components/DrawerHeaderNavigation/index"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/DrawerHeaderNavigation/index"), exports);

package/lib-commonjs/DrawerHeaderNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerHeaderNavigation.js"],"sourcesContent":["export * from './components/DrawerHeaderNavigation/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
+{"version":3,"sources":["DrawerHeaderNavigation.js"],"sourcesContent":["export * from './components/DrawerHeaderNavigation/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/DrawerHeaderTitle.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./components/DrawerHeaderTitle/index"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/DrawerHeaderTitle/index"), exports);

package/lib-commonjs/DrawerHeaderTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerHeaderTitle.js"],"sourcesContent":["export * from './components/DrawerHeaderTitle/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
+{"version":3,"sources":["DrawerHeaderTitle.js"],"sourcesContent":["export * from './components/DrawerHeaderTitle/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/DrawerInline.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./components/DrawerInline/index"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/DrawerInline/index"), exports);

package/lib-commonjs/DrawerInline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerInline.js"],"sourcesContent":["export * from './components/DrawerInline/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
+{"version":3,"sources":["DrawerInline.js"],"sourcesContent":["export * from './components/DrawerInline/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/DrawerOverlay.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./components/DrawerOverlay/index"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/DrawerOverlay/index"), exports);

package/lib-commonjs/DrawerOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerOverlay.js"],"sourcesContent":["export * from './components/DrawerOverlay/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
+{"version":3,"sources":["DrawerOverlay.js"],"sourcesContent":["export * from './components/DrawerOverlay/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

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

@@ -4,18 +4,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Drawer", {
     enumerable: true,
-    get: ()=>Drawer
+    get: function() {
+        return Drawer;
+    }
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useDrawer = require("./useDrawer");
 const _renderDrawer = require("./renderDrawer");
-const _useDrawerStylesStyles = require("./useDrawerStyles.styles");
-const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const _useDrawerStylesstyles = require("./useDrawerStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const Drawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useDrawer.useDrawer_unstable)(props, ref);
-    (0, _useDrawerStylesStyles.useDrawerStyles_unstable)(state);
-    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useDrawerStyles_unstable')(state);
+    (0, _useDrawerStylesstyles.useDrawerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerStyles_unstable')(state);
     return (0, _renderDrawer.renderDrawer_unstable)(state);
 });
 Drawer.displayName = 'Drawer';

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

@@ -1 +1 @@
-{"version":3,"sources":["Drawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useDrawer_unstable } from './useDrawer';\nimport { renderDrawer_unstable } from './renderDrawer';\nimport { useDrawerStyles_unstable } from './useDrawerStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const Drawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawer_unstable(props, ref);\n    useDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);\n    return renderDrawer_unstable(state);\n});\nDrawer.displayName = 'Drawer';\n"],"names":["Drawer","React","forwardRef","props","ref","state","useDrawer_unstable","useDrawerStyles_unstable","useCustomStyleHook_unstable","renderDrawer_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;2BACY;8BACG;uCACG;qCACG;AAGjC,MAAMA,SAAS,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACnE,MAAMC,QAAQC,IAAAA,6BAAkB,EAACH,OAAOC;IACxCG,IAAAA,+CAAwB,EAACF;IACzBG,IAAAA,gDAA2B,EAAC,4BAA4BH;IACxD,OAAOI,IAAAA,mCAAqB,EAACJ;AACjC;AACAL,OAAOU,WAAW,GAAG"}
+{"version":3,"sources":["Drawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useDrawer_unstable } from './useDrawer';\nimport { renderDrawer_unstable } from './renderDrawer';\nimport { useDrawerStyles_unstable } from './useDrawerStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Drawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const Drawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawer_unstable(props, ref);\n    useDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerStyles_unstable')(state);\n    return renderDrawer_unstable(state);\n});\nDrawer.displayName = 'Drawer';\n"],"names":["Drawer","React","forwardRef","props","ref","state","useDrawer_unstable","useDrawerStyles_unstable","useCustomStyleHook_unstable","renderDrawer_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;2BACY;8BACG;uCACG;qCACG;AAGjC,MAAMA,SAAS,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7D,MAAMC,QAAQC,IAAAA,6BAAkB,EAACH,OAAOC;IACxCG,IAAAA,+CAAwB,EAACF;IACzBG,IAAAA,gDAA2B,EAAC,4BAA4BH;IACxD,OAAOI,IAAAA,mCAAqB,EAACJ;AACjC;AACAL,OAAOU,WAAW,GAAG"}

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./Drawer"), exports);
-_exportStar(require("./Drawer.types"), exports);
-_exportStar(require("./renderDrawer"), exports);
-_exportStar(require("./useDrawer"), exports);
-_exportStar(require("./useDrawerStyles.styles"), exports);
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Drawer"), exports);
+_export_star._(require("./Drawer.types"), exports);
+_export_star._(require("./renderDrawer"), exports);
+_export_star._(require("./useDrawer"), exports);
+_export_star._(require("./useDrawerStyles.styles"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Drawer';\nexport * from './Drawer.types';\nexport * from './renderDrawer';\nexport * from './useDrawer';\nexport * from './useDrawerStyles.styles';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Drawer';\nexport * from './Drawer.types';\nexport * from './renderDrawer';\nexport * from './useDrawer';\nexport * from './useDrawerStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1,14 +1,16 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
 Object.defineProperty(exports, "renderDrawer_unstable", {
     enumerable: true,
-    get: ()=>renderDrawer_unstable
+    get: function() {
+        return renderDrawer_unstable;
+    }
 });
-const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
-const _reactUtilities = require("@fluentui/react-utilities");
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
 const renderDrawer_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root);
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawer.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Drawer\n */ export const renderDrawer_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root);\n};\n"],"names":["renderDrawer_unstable","state","slots","slotProps","getSlotsNext","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,wBAAwB,CAACC,QAAQ;IAC9C,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI;AACjE"}
+{"version":3,"sources":["renderDrawer.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Drawer\n */ export const renderDrawer_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {});\n};\n"],"names":["renderDrawer_unstable","state","assertSlots","_jsx","root"],"mappings":"AAAA,0BAA0B,GAAG,iDAAiD;;;;+BAI7DA;;;eAAAA;;;4BAJ4F;gCACjF;AAGjB,MAAMA,wBAAwB,CAACC;IACtCC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,eAAI,EAACF,MAAMG,IAAI,EAAE,CAAC;AAC3C"}