@fluentui/react-drawer 9.0.8 → 9.1.0

package/CHANGELOG.md

@@ -1,17 +1,45 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Thu, 11 Jan 2024 09:02:16 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Jan 2024 16:13:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.1.0)
+
+Wed, 17 Jan 2024 16:13:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.9..@fluentui/react-drawer_v9.1.0)
+
+### Minor changes
+
+- Add bottom position ([PR #29137](https://github.com/microsoft/fluentui/pull/29137) by yiliu9@microsoft.com)
+- Bump @fluentui/react-dialog to v9.9.6 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.26 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
+- Bump @fluentui/react-motion-preview to v0.5.9 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
+- Bump @fluentui/react-tabster to v9.17.2 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
+- Bump @fluentui/react-utilities to v9.16.0 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
+
+## [9.0.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.9)
+
+Tue, 16 Jan 2024 13:14:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.8..@fluentui/react-drawer_v9.0.9)
+
+### Patches
+
+- chore: remove useHeadingProps() and React.useMemo() ([PR #29360](https://github.com/microsoft/fluentui/pull/29360) by olfedias@microsoft.com)
+- fix: correct version of @types/react-dom peer dep that matches for 16.x ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by mgodbolt@microsoft.com)
+- Bump @fluentui/react-dialog to v9.9.5 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.25 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-motion-preview to v0.5.8 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-tabster to v9.17.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+
 ## [9.0.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.8)
 
-Thu, 11 Jan 2024 09:02:16 GMT 
+Thu, 11 Jan 2024 09:04:29 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.7..@fluentui/react-drawer_v9.0.8)
 
 ### Patches
 
-- Bump @fluentui/react-dialog to v9.9.4 ([PR #30250](https://github.com/microsoft/fluentui/pull/30250) by beachball)
+- Bump @fluentui/react-dialog to v9.9.4 ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by beachball)
 
 ## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.7)
 

package/dist/index.d.ts

@@ -19,9 +19,11 @@ declare type DrawerBaseProps = {
     /**
      * Position of the drawer.
      *
+     * Note: 'bottom' does not supports size, but it supports customized height.
+     *
      * @default 'start'
      */
-    position?: 'start' | 'end';
+    position?: 'start' | 'end' | 'bottom';
     /**
      * Size of the drawer.
      *

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js

@@ -1,21 +1,6 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useDialogContext_unstable } from '@fluentui/react-dialog';
-/**
- * @internal
- * Create the shorthand for the heading element.
- * @param props - props from this instance of DrawerHeaderTitle
- */ const useHeadingProps = ({ children, heading })=>{
-    const id = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
-    return slot.optional(heading, {
-        defaultProps: {
-            id,
-            children
-        },
-        renderByDefault: true,
-        elementType: 'h2'
-    });
-};
 /**
  * Create the state required to render DrawerHeaderTitle.
  *
@@ -25,7 +10,8 @@ import { useDialogContext_unstable } from '@fluentui/react-dialog';
  * @param props - props from this instance of DrawerHeaderTitle
  * @param ref - reference to root HTMLElement of DrawerHeaderTitle
  */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{
-    const headingProps = useHeadingProps(props);
+    const { children, heading } = props;
+    const headingId = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
     return {
         components: {
             root: 'div',
@@ -38,7 +24,14 @@ import { useDialogContext_unstable } from '@fluentui/react-dialog';
         }), {
             elementType: 'div'
         }),
-        heading: headingProps,
+        heading: slot.optional(heading, {
+            defaultProps: {
+                id: headingId,
+                children
+            },
+            renderByDefault: true,
+            elementType: 'h2'
+        }),
         action: slot.optional(props.action, {
             elementType: 'div'
         })

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * @internal\n * Create the shorthand for the heading element.\n * @param props - props from this instance of DrawerHeaderTitle\n */\nconst useHeadingProps = ({ children, heading }: DrawerHeaderTitleProps) => {\n  const id = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n  return slot.optional(heading, {\n    defaultProps: {\n      id,\n      children,\n    },\n    renderByDefault: true,\n    elementType: 'h2',\n  });\n};\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  const headingProps = useHeadingProps(props);\n\n  return {\n    components: {\n      root: 'div',\n      heading: 'h2',\n      action: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    heading: headingProps,\n    action: slot.optional(props.action, {\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","useHeadingProps","children","heading","id","ctx","dialogTitleId","optional","defaultProps","renderByDefault","elementType","useDrawerHeaderTitle_unstable","props","ref","headingProps","components","root","action","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;CAIC,GACD,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAA0B;IACpE,MAAMC,KAAKJ,0BAA0BK,CAAAA,MAAOA,IAAIC,aAAa;IAE7D,OAAOP,KAAKQ,QAAQ,CAACJ,SAAS;QAC5BK,cAAc;YACZJ;YACAF;QACF;QACAO,iBAAiB;QACjBC,aAAa;IACf;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAMC,eAAeb,gBAAgBW;IAErC,OAAO;QACLG,YAAY;YACVC,MAAM;YACNb,SAAS;YACTc,QAAQ;QACV;QAEAD,MAAMjB,KAAKmB,MAAM,CACfpB,yBAAyB,OAAO;YAC9Be;YACA,GAAGD,KAAK;QACV,IACA;YAAEF,aAAa;QAAM;QAEvBP,SAASW;QACTG,QAAQlB,KAAKQ,QAAQ,CAACK,MAAMK,MAAM,EAAE;YAClCP,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  const { children, heading } = props;\n  const headingId = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n  return {\n    components: {\n      root: 'div',\n      heading: 'h2',\n      action: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    heading: slot.optional(heading, {\n      defaultProps: {\n        id: headingId,\n        children,\n      },\n      renderByDefault: true,\n      elementType: 'h2',\n    }),\n    action: slot.optional(props.action, {\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","ctx","dialogTitleId","components","root","action","always","elementType","optional","defaultProps","id","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,yBAAyB,QAAQ,yBAAyB;AAInE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYN,0BAA0BO,CAAAA,MAAOA,IAAIC,aAAa;IAEpE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNL,SAAS;YACTM,QAAQ;QACV;QAEAD,MAAMX,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBR,SAASN,KAAKe,QAAQ,CAACT,SAAS;YAC9BU,cAAc;gBACZC,IAAIV;gBACJF;YACF;YACAa,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQZ,KAAKe,QAAQ,CAACZ,MAAMS,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
@@ -22,14 +21,24 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
     wvpqe5: ["fjik90z", "fcdblym"],
     zhjwy3: ["f17e9lqh", "fa8zu9y"]
   },
+  separatorBottom: {
+    B4j52fo: "f5ogflp",
+    icvyot: "fzkkow9",
+    g2u3we: "fo8z57v"
+  },
   start: {
     Bz10aip: "f1d8gkik"
   },
   end: {
     Bz10aip: "f1h1g6jt"
+  },
+  bottom: {
+    Bz10aip: "f1rdfgt8",
+    a9b677: "fly5x3f",
+    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);}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}"]
+  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);}"]
 });
 const useDrawerMotionStyles = /*#__PURE__*/__styles({
   "default": {
@@ -44,6 +53,21 @@ const useDrawerMotionStyles = /*#__PURE__*/__styles({
 }, {
   d: [".fk73vx1{opacity:0;}", ".f15rjlgw{transition-property:opacity,transform;}", ".f1blt7p{will-change:opacity,transform;}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}"]
 });
+function getSeparatorClass(state, classNames) {
+  if (!state.separator) {
+    return undefined;
+  }
+  switch (state.position) {
+    case 'start':
+      return classNames.separatorStart;
+    case 'end':
+      return classNames.separatorEnd;
+    case 'bottom':
+      return classNames.separatorBottom;
+    default:
+      return undefined;
+  }
+}
 /**
  * Apply styling to the InlineDrawer slots based on the state
  */
@@ -52,13 +76,7 @@ export const useInlineDrawerStyles_unstable = state => {
   const baseClassNames = useDrawerBaseClassNames(state);
   const rootStyles = useDrawerRootStyles();
   const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());
-  const separatorClass = React.useMemo(() => {
-    if (!state.separator) {
-      return undefined;
-    }
-    return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
-  }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);
-  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);
+  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);
   return state;
 };
 //# sourceMappingURL=useInlineDrawerStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","useInlineDrawerStyles_unstable","state","resetStyles","baseClassNames","rootStyles","motionClassNames","motion","separatorClass","useMemo","separator","undefined","position","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\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    /* 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});\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});\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    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        rootStyles.separatorEnd,\n        rootStyles.separatorStart\n    ]);\n    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGX,aAAA,iWAG5B,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,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAa3B,CAAC;AACF,MAAMC,qBAAqB,gBAAG1B,QAAA;EAAA;IAAA2B,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAH,MAAA;IAAAJ,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAU7B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,WAAW,GAAGvB,oBAAoB,CAAC,CAAC;EAC1C,MAAMwB,cAAc,GAAG5B,uBAAuB,CAAC0B,KAAK,CAAC;EACrD,MAAMG,UAAU,GAAGtB,mBAAmB,CAAC,CAAC;EACxC,MAAMuB,gBAAgB,GAAG7B,mBAAmB,CAACyB,KAAK,CAACK,MAAM,EAAEX,qBAAqB,CAAC,CAAC,CAAC;EACnF,MAAMY,cAAc,GAAGxC,KAAK,CAACyC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACP,KAAK,CAACQ,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAOT,KAAK,CAACU,QAAQ,KAAK,OAAO,GAAGP,UAAU,CAACrB,cAAc,GAAGqB,UAAU,CAACjB,YAAY;EAC3F,CAAC,EAAE,CACCc,KAAK,CAACU,QAAQ,EACdV,KAAK,CAACQ,SAAS,EACfL,UAAU,CAACjB,YAAY,EACvBiB,UAAU,CAACrB,cAAc,CAC5B,CAAC;EACFkB,KAAK,CAACvB,IAAI,CAACkC,SAAS,GAAG1C,YAAY,CAACO,sBAAsB,CAACC,IAAI,EAAEwB,WAAW,EAAEC,cAAc,EAAEI,cAAc,EAAEH,UAAU,CAACH,KAAK,CAACU,QAAQ,CAAC,EAAEN,gBAAgB,EAAEJ,KAAK,CAACvB,IAAI,CAACkC,SAAS,CAAC;EACjL,OAAOX,KAAK;AAChB,CAAC"}
+{"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,iWAG5B,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"}

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

@@ -21,9 +21,15 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
   },
   end: {
     Bz10aip: "f1g0pcr8"
+  },
+  bottom: {
+    Bz10aip: "fip488n",
+    Bhzewxz: "f198g47y",
+    Bqenvij: "fub80nq",
+    a9b677: "fr97h3j"
   }
 }, {
-  d: [".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}"]
+  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;}"]
 });
 const useDrawerMotionStyles = /*#__PURE__*/__styles({
   "default": {

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

@@ -1 +1 @@
-{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","useMotionClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","durationStyles","drawerMotionClassNames","motion","backdropMotionClassNames","className","position","size"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\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 */ const useDrawerResetStyles = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    ...drawerDefaultStyles,\n    position: 'fixed',\n    top: 0,\n    bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    }\n});\nconst useDrawerMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        boxShadow: `0px ${tokens.colorTransparentBackground}`,\n        transitionProperty: 'transform, box-shadow, opacity',\n        willChange: 'transform, box-shadow, opacity'\n    },\n    enter: {\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    default: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    enter: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export 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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGf,QAAA;EAAAgB,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAO3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGpB,QAAA;EAAA;IAAAqB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;IAAAJ,OAAA;IAAAK,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,MAAMO,uBAAuB,gBAAG1B,QAAA;EAAA;IAAAqB,MAAA;IAAAE,OAAA;IAAAI,OAAA;IAAAH,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMS,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAGxB,uBAAuB,CAACuB,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGnB,oBAAoB,CAAC,CAAC;EAC1C,MAAMoB,UAAU,GAAGjB,mBAAmB,CAAC,CAAC;EACxC,MAAMkB,cAAc,GAAG1B,uBAAuB,CAAC,CAAC;EAChD,MAAM2B,sBAAsB,GAAG1B,mBAAmB,CAACqB,KAAK,CAACM,MAAM,EAAEf,qBAAqB,CAAC,CAAC,CAAC;EACzF,MAAMgB,wBAAwB,GAAG5B,mBAAmB,CAACqB,KAAK,CAACM,MAAM,EAAET,uBAAuB,CAAC,CAAC,CAAC;EAC7F,MAAMf,QAAQ,GAAGkB,KAAK,CAACnB,IAAI,CAACC,QAAQ;EACpCkB,KAAK,CAACnB,IAAI,CAAC2B,SAAS,GAAGpC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEoB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACS,QAAQ,CAAC,EAAEJ,sBAAsB,EAAEL,KAAK,CAACnB,IAAI,CAAC2B,SAAS,CAAC;EACxK,IAAI1B,QAAQ,EAAE;IACVA,QAAQ,CAAC0B,SAAS,GAAGpC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEyB,wBAAwB,EAAEH,cAAc,CAACJ,KAAK,CAACU,IAAI,CAAC,EAAE5B,QAAQ,CAAC0B,SAAS,CAAC;EACjJ;EACA,OAAOR,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","useMotionClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","Bz10aip","end","bottom","Bhzewxz","Bqenvij","a9b677","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","durationStyles","drawerMotionClassNames","motion","backdropMotionClassNames","className","position","size"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\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 */ const useDrawerResetStyles = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    ...drawerDefaultStyles,\n    position: 'fixed',\n    top: 0,\n    bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    },\n    bottom: {\n        transform: `translate3D(0, calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0)`,\n        top: 'auto',\n        height: `var(${drawerCSSVars.drawerSizeVar})`,\n        width: '100vw'\n    }\n});\nconst useDrawerMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        boxShadow: `0px ${tokens.colorTransparentBackground}`,\n        transitionProperty: 'transform, box-shadow, opacity',\n        willChange: 'transform, box-shadow, opacity'\n    },\n    enter: {\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    default: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    enter: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export 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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGf,QAAA;EAAAgB,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,MAAA;IAAAF,OAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAa3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGxB,QAAA;EAAA;IAAAyB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAS,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,MAAMO,uBAAuB,gBAAG9B,QAAA;EAAA;IAAAyB,MAAA;IAAAE,OAAA;IAAAI,OAAA;IAAAH,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMS,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAG5B,uBAAuB,CAAC2B,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGvB,oBAAoB,CAAC,CAAC;EAC1C,MAAMwB,UAAU,GAAGrB,mBAAmB,CAAC,CAAC;EACxC,MAAMsB,cAAc,GAAG9B,uBAAuB,CAAC,CAAC;EAChD,MAAM+B,sBAAsB,GAAG9B,mBAAmB,CAACyB,KAAK,CAACM,MAAM,EAAEf,qBAAqB,CAAC,CAAC,CAAC;EACzF,MAAMgB,wBAAwB,GAAGhC,mBAAmB,CAACyB,KAAK,CAACM,MAAM,EAAET,uBAAuB,CAAC,CAAC,CAAC;EAC7F,MAAMnB,QAAQ,GAAGsB,KAAK,CAACvB,IAAI,CAACC,QAAQ;EACpCsB,KAAK,CAACvB,IAAI,CAAC+B,SAAS,GAAGxC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEwB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACS,QAAQ,CAAC,EAAEJ,sBAAsB,EAAEL,KAAK,CAACvB,IAAI,CAAC+B,SAAS,CAAC;EACxK,IAAI9B,QAAQ,EAAE;IACVA,QAAQ,CAAC8B,SAAS,GAAGxC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAE6B,wBAAwB,EAAEH,cAAc,CAACJ,KAAK,CAACU,IAAI,CAAC,EAAEhC,QAAQ,CAAC8B,SAAS,CAAC;EACjJ;EACA,OAAOR,KAAK;AAChB,CAAC"}

package/lib/e2e/DrawerShared.js

@@ -91,7 +91,8 @@ export function testDrawerBaseScenarios(Component) {
     describe('position prop', ()=>{
         const positions = {
             start: 'left',
-            end: 'right'
+            end: 'right',
+            bottom: 'bottom'
         };
         Object.entries(positions).forEach(([position, side])=>{
             const positionProp = position;

package/lib/e2e/DrawerShared.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport { DrawerProps } from '@fluentui/react-components';\n\nconst mountFluent = (element: JSX.Element) => {\n  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: React.ComponentType<DrawerProps>) {\n  describe('basic functionality', () => {\n    it('should not render any element when closed', () => {\n      mountFluent(<Component id=\"drawer\" />);\n\n      cy.get('#drawer').should('not.exist');\n    });\n\n    it('should render an element when opened', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.get('#drawer').should('exist');\n    });\n\n    it('should render children content', () => {\n      const content = 'Test the renderization';\n      mountFluent(\n        <Component id=\"drawer\" open>\n          {content}\n        </Component>,\n      );\n\n      cy.get('#drawer').contains(content);\n    });\n\n    it('should toggle visibility on open prop change', () => {\n      const ExampleDrawer = () => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n          <>\n            <Component id=\"drawer\" open={open} />\n            <button id=\"button\" onClick={() => setOpen(true)}>\n              Open\n            </button>\n          </>\n        );\n      };\n\n      mountFluent(<ExampleDrawer />);\n\n      cy.get('#drawer').should('not.exist');\n      cy.get('#button').click();\n      cy.get('#drawer').should('exist');\n    });\n  });\n\n  describe('size prop', () => {\n    const sizes = {\n      small: 320,\n      medium: 592,\n      large: 940,\n      full: 1000,\n    };\n\n    Object.entries(sizes).forEach(([size, width]) => {\n      const sizeProp = size as DrawerProps['size'];\n\n      it(`should have correct size when size is ${size}`, () => {\n        mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n        cy.viewport(1000, 1000);\n        cy.get('#drawer').should('have.css', 'width', width + 'px');\n        cy.get('#drawer').invoke('outerWidth').should('equal', width);\n      });\n    });\n\n    it('width should not be bigger than viewport', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.viewport(319, 319);\n      cy.get('#drawer').should('have.css', 'width', '319px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n    });\n\n    it('should have custom size', () => {\n      mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n      cy.get('#drawer').should('have.css', 'width', '200px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n    });\n  });\n\n  describe('position prop', () => {\n    const positions = {\n      start: 'left',\n      end: 'right',\n    };\n\n    Object.entries(positions).forEach(([position, side]) => {\n      const positionProp = position as DrawerProps['position'];\n\n      it(`should have correct position when position is ${position}`, () => {\n        mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n        cy.get('#drawer').should('have.css', side, '0px');\n      });\n    });\n  });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","position","side","positionProp"],"mappings":"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"}
+{"version":3,"sources":["DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport { DrawerProps } from '@fluentui/react-components';\n\nconst mountFluent = (element: JSX.Element) => {\n  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: React.ComponentType<DrawerProps>) {\n  describe('basic functionality', () => {\n    it('should not render any element when closed', () => {\n      mountFluent(<Component id=\"drawer\" />);\n\n      cy.get('#drawer').should('not.exist');\n    });\n\n    it('should render an element when opened', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.get('#drawer').should('exist');\n    });\n\n    it('should render children content', () => {\n      const content = 'Test the renderization';\n      mountFluent(\n        <Component id=\"drawer\" open>\n          {content}\n        </Component>,\n      );\n\n      cy.get('#drawer').contains(content);\n    });\n\n    it('should toggle visibility on open prop change', () => {\n      const ExampleDrawer = () => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n          <>\n            <Component id=\"drawer\" open={open} />\n            <button id=\"button\" onClick={() => setOpen(true)}>\n              Open\n            </button>\n          </>\n        );\n      };\n\n      mountFluent(<ExampleDrawer />);\n\n      cy.get('#drawer').should('not.exist');\n      cy.get('#button').click();\n      cy.get('#drawer').should('exist');\n    });\n  });\n\n  describe('size prop', () => {\n    const sizes = {\n      small: 320,\n      medium: 592,\n      large: 940,\n      full: 1000,\n    };\n\n    Object.entries(sizes).forEach(([size, width]) => {\n      const sizeProp = size as DrawerProps['size'];\n\n      it(`should have correct size when size is ${size}`, () => {\n        mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n        cy.viewport(1000, 1000);\n        cy.get('#drawer').should('have.css', 'width', width + 'px');\n        cy.get('#drawer').invoke('outerWidth').should('equal', width);\n      });\n    });\n\n    it('width should not be bigger than viewport', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.viewport(319, 319);\n      cy.get('#drawer').should('have.css', 'width', '319px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n    });\n\n    it('should have custom size', () => {\n      mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n      cy.get('#drawer').should('have.css', 'width', '200px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n    });\n  });\n\n  describe('position prop', () => {\n    const positions = {\n      start: 'left',\n      end: 'right',\n      bottom: 'bottom',\n    };\n\n    Object.entries(positions).forEach(([position, side]) => {\n      const positionProp = position as DrawerProps['position'];\n\n      it(`should have correct position when position is ${position}`, () => {\n        mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n        cy.get('#drawer').should('have.css', side, '0px');\n      });\n    });\n  });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"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"}

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

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

package/lib/shared/useDrawerBaseStyles.styles.js

@@ -50,6 +50,10 @@ const useDrawerStyles = /*#__PURE__*/__styles({
     j35jbq: ["f1e31b4d", "f1vgc2s3"],
     oyh7mz: ["frppm18", "fvfyk4"]
   },
+  bottom: {
+    B5kzvoi: "f1yab3r1",
+    Bhzewxz: "f198g47y"
+  },
   small: {
     Bjr0ffy: "f1exhnwo"
   },
@@ -63,11 +67,27 @@ 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;}", ".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);}", ".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;}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
   }]]
 });
+export const useDrawerBottomBaseStyles = /*#__PURE__*/__styles({
+  small: {
+    Bjr0ffy: "f1exhnwo"
+  },
+  medium: {
+    Bjr0ffy: "fqofjzu"
+  },
+  large: {
+    Bjr0ffy: "fce6y3m"
+  },
+  full: {
+    Bjr0ffy: "fno8cgj"
+  }
+}, {
+  d: [".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fno8cgj{--fui-Drawer--size:100vh;}"]
+});
 export const useDrawerDurationStyles = /*#__PURE__*/__styles({
   small: {
     B3o57yi: "fc397y7"
@@ -90,7 +110,8 @@ export const useDrawerBaseClassNames = ({
   motion
 }) => {
   const baseStyles = useDrawerStyles();
+  const bottomBaseStyles = useDrawerBottomBaseStyles();
   const durationStyles = useDrawerDurationStyles();
-  return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
+  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);
 };
 //# sourceMappingURL=useDrawerBaseStyles.styles.js.map

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","small","Bjr0ffy","medium","large","full","d","m","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n    ...shorthands.overflow('hidden'),\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        ...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    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerDurationStyles = makeStyles({\n    small: {\n        transitionDuration: tokens.durationGentle\n    },\n    medium: {\n        transitionDuration: tokens.durationSlow\n    },\n    large: {\n        transitionDuration: tokens.durationSlower\n    },\n    full: {\n        transitionDuration: tokens.durationUltraSlow\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n    const baseStyles = useDrawerStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnC,iBAAGJ,UAAU,CAACK,QAAQ,CAAC,QAAQ,CAAC;EAChCC,KAAK,EAAG,OAAMJ,aAAa,CAACC,aAAc,GAAE;EAC5CI,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,OAAO;EAClBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEd,MAAM,CAACe,uBAAuB;EAC/CC,KAAK,EAAEhB,MAAM,CAACiB;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGrB,QAAA;EAAAsB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAD,MAAA;EAAA;EAAAM,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,CAkC3B,CAAC;AACF,OAAO,MAAMC,uBAAuB,gBAAG5C,QAAA;EAAAqC,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,GAAG7B,eAAe,CAAC,CAAC;EACpC,MAAM8B,cAAc,GAAGP,uBAAuB,CAAC,CAAC;EAChD,OAAO3C,YAAY,CAACiD,UAAU,CAACH,QAAQ,CAAC,EAAEI,cAAc,CAACH,IAAI,CAAC,EAAEE,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAACzB,aAAa,EAAEwB,MAAM,CAACG,IAAI,KAAK,UAAU,IAAIF,UAAU,CAAC5B,QAAQ,EAAE2B,MAAM,CAACG,IAAI,KAAK,SAAS,IAAIF,UAAU,CAAC1B,OAAO,CAAC;AACnN,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","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    ...shorthands.overflow('hidden'),\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        ...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;EACnC,iBAAGJ,UAAU,CAACK,QAAQ,CAAC,QAAQ,CAAC;EAChCC,KAAK,EAAG,OAAMJ,aAAa,CAACC,aAAc,GAAE;EAC5CI,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,OAAO;EAClBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEd,MAAM,CAACe,uBAAuB;EAC/CC,KAAK,EAAEhB,MAAM,CAACiB;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGrB,QAAA;EAAAsB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,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"}

package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js

@@ -12,23 +12,9 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactdialog = require("@fluentui/react-dialog");
-/**
- * @internal
- * Create the shorthand for the heading element.
- * @param props - props from this instance of DrawerHeaderTitle
- */ const useHeadingProps = ({ children, heading })=>{
-    const id = (0, _reactdialog.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
-    return _reactutilities.slot.optional(heading, {
-        defaultProps: {
-            id,
-            children
-        },
-        renderByDefault: true,
-        elementType: 'h2'
-    });
-};
 const useDrawerHeaderTitle_unstable = (props, ref)=>{
-    const headingProps = useHeadingProps(props);
+    const { children, heading } = props;
+    const headingId = (0, _reactdialog.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
     return {
         components: {
             root: 'div',
@@ -41,7 +27,14 @@ const useDrawerHeaderTitle_unstable = (props, ref)=>{
         }), {
             elementType: 'div'
         }),
-        heading: headingProps,
+        heading: _reactutilities.slot.optional(heading, {
+            defaultProps: {
+                id: headingId,
+                children
+            },
+            renderByDefault: true,
+            elementType: 'h2'
+        }),
         action: _reactutilities.slot.optional(props.action, {
             elementType: 'div'
         })

package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n/**\n * @internal\n * Create the shorthand for the heading element.\n * @param props - props from this instance of DrawerHeaderTitle\n */ const useHeadingProps = ({ children, heading })=>{\n    const id = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n    return slot.optional(heading, {\n        defaultProps: {\n            id,\n            children\n        },\n        renderByDefault: true,\n        elementType: 'h2'\n    });\n};\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{\n    const headingProps = useHeadingProps(props);\n    return {\n        components: {\n            root: 'div',\n            heading: 'h2',\n            action: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        heading: headingProps,\n        action: slot.optional(props.action, {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useDrawerHeaderTitle_unstable","useHeadingProps","children","heading","id","useDialogContext_unstable","ctx","dialogTitleId","slot","optional","defaultProps","renderByDefault","elementType","props","ref","headingProps","components","root","action","always","getIntrinsicElementProps"],"mappings":";;;;+BA0BiBA;;;eAAAA;;;;iEA1BM;gCACwB;6BACL;AAC1C;;;;CAIC,GAAG,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC9C,MAAMC,KAAKC,IAAAA,sCAAyB,EAAC,CAACC,MAAMA,IAAIC,aAAa;IAC7D,OAAOC,oBAAI,CAACC,QAAQ,CAACN,SAAS;QAC1BO,cAAc;YACVN;YACAF;QACJ;QACAS,iBAAiB;QACjBC,aAAa;IACjB;AACJ;AASW,MAAMZ,gCAAgC,CAACa,OAAOC;IACrD,MAAMC,eAAed,gBAAgBY;IACrC,OAAO;QACHG,YAAY;YACRC,MAAM;YACNd,SAAS;YACTe,QAAQ;QACZ;QACAD,MAAMT,oBAAI,CAACW,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CN;YACA,GAAGD,KAAK;QACZ,IAAI;YACAD,aAAa;QACjB;QACAT,SAASY;QACTG,QAAQV,oBAAI,CAACC,QAAQ,CAACI,MAAMK,MAAM,EAAE;YAChCN,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerHeaderTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{\n    const { children, heading } = props;\n    const headingId = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n    return {\n        components: {\n            root: 'div',\n            heading: 'h2',\n            action: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        heading: slot.optional(heading, {\n            defaultProps: {\n                id: headingId,\n                children\n            },\n            renderByDefault: true,\n            elementType: 'h2'\n        }),\n        action: slot.optional(props.action, {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useDrawerHeaderTitle_unstable","props","ref","children","heading","headingId","useDialogContext_unstable","ctx","dialogTitleId","components","root","action","slot","always","getIntrinsicElementProps","elementType","optional","defaultProps","id","renderByDefault"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCACwB;6BACL;AAS/B,MAAMA,gCAAgC,CAACC,OAAOC;IACrD,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGH;IAC9B,MAAMI,YAAYC,IAAAA,sCAAyB,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACpE,OAAO;QACHC,YAAY;YACRC,MAAM;YACNN,SAAS;YACTO,QAAQ;QACZ;QACAD,MAAME,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CZ;YACA,GAAGD,KAAK;QACZ,IAAI;YACAc,aAAa;QACjB;QACAX,SAASQ,oBAAI,CAACI,QAAQ,CAACZ,SAAS;YAC5Ba,cAAc;gBACVC,IAAIb;gBACJF;YACJ;YACAgB,iBAAiB;YACjBJ,aAAa;QACjB;QACAJ,QAAQC,oBAAI,CAACI,QAAQ,CAACf,MAAMU,MAAM,EAAE;YAChCI,aAAa;QACjB;IACJ;AACJ"}

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

@@ -16,16 +16,14 @@ _export(exports, {
         return useInlineDrawerStyles_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _react1 = require("@griffel/react");
+const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
 const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
 const _reactmotionpreview = require("@fluentui/react-motion-preview");
 const inlineDrawerClassNames = {
     root: 'fui-InlineDrawer'
 };
-const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r46ju4x", null, [
+const useDrawerResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r46ju4x", null, [
     ".r46ju4x{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}"
 ]);
 /**
@@ -35,7 +33,7 @@ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r46ju4x",
     'solid',
     _reacttheme.tokens.colorNeutralBackground3
 ];
-const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
+const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     separatorStart: {
         Bekrc4i: [
             "f1hqa2wf",
@@ -64,11 +62,21 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
             "fa8zu9y"
         ]
     },
+    separatorBottom: {
+        B4j52fo: "f5ogflp",
+        icvyot: "fzkkow9",
+        g2u3we: "fo8z57v"
+    },
     start: {
         Bz10aip: "f1d8gkik"
     },
     end: {
         Bz10aip: "f1h1g6jt"
+    },
+    bottom: {
+        Bz10aip: "f1rdfgt8",
+        a9b677: "fly5x3f",
+        Bqenvij: "fub80nq"
     }
 }, {
     d: [
@@ -78,11 +86,17 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
         ".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);}"
+        ".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__*/ (0, _react1.__styles)({
+const useDrawerMotionStyles = /*#__PURE__*/ (0, _react.__styles)({
     "default": {
         abs64n: "fk73vx1",
         Bmy1vo4: "f15rjlgw",
@@ -101,22 +115,26 @@ const useDrawerMotionStyles = /*#__PURE__*/ (0, _react1.__styles)({
         ".f87uvqx{transform:translate3D(0, 0, 0);}"
     ]
 });
+function getSeparatorClass(state, classNames) {
+    if (!state.separator) {
+        return undefined;
+    }
+    switch(state.position){
+        case 'start':
+            return classNames.separatorStart;
+        case 'end':
+            return classNames.separatorEnd;
+        case 'bottom':
+            return classNames.separatorBottom;
+        default:
+            return undefined;
+    }
+}
 const useInlineDrawerStyles_unstable = (state)=>{
     const resetStyles = useDrawerResetStyles();
     const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
     const rootStyles = useDrawerRootStyles();
     const motionClassNames = (0, _reactmotionpreview.useMotionClassNames)(state.motion, useDrawerMotionStyles());
-    const separatorClass = _react.useMemo(()=>{
-        if (!state.separator) {
-            return undefined;
-        }
-        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
-    }, [
-        state.position,
-        state.separator,
-        rootStyles.separatorEnd,
-        rootStyles.separatorStart
-    ]);
-    state.root.className = (0, _react1.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);
+    state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);
     return state;
 }; //# sourceMappingURL=useInlineDrawerStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __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(\"r46ju4x\", null, [\".r46ju4x{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}\"]);\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  start: {\n    Bz10aip: \"f1d8gkik\"\n  },\n  end: {\n    Bz10aip: \"f1h1g6jt\"\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);}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}\"]\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});\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  const separatorClass = React.useMemo(() => {\n    if (!state.separator) {\n      return undefined;\n    }\n    return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n  }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);\n  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, 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","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","state","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","motionClassNames","useMotionClassNames","motion","separatorClass","React","useMemo","separator","undefined","position","className","mergeClasses"],"mappings":";;;;;;;;;;;IAKaA,sBAAsB;eAAtBA;;IA4CAC,8BAA8B;eAA9BA;;;;iEAjDU;wBAC2C;4BAC3C;2CACqD;oCACxC;AAC7B,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,WAAW,MAAM;IAAC;CAA8U;AACxZ;;CAEC,GACD,MAAMC,kBAAkB;IAAC;IAAO;IAASC,kBAAM,CAACC,uBAAuB;CAAC;AACxE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,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,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAA+E;KAAmE;AAC/a;AACA,MAAMC,wBAAwB,WAAW,GAAEb,IAAAA,gBAAQ,EAAC;IAClD,WAAW;QACTc,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLH,QAAQ;QACRJ,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAAwB;QAAqD;QAA4C;QAAwB;KAA4C;AACnM;AAIO,MAAMpB,iCAAiC0B,CAAAA;IAC5C,MAAMC,cAAczB;IACpB,MAAM0B,iBAAiBC,IAAAA,kDAAuB,EAACH;IAC/C,MAAMI,aAAavB;IACnB,MAAMwB,mBAAmBC,IAAAA,uCAAmB,EAACN,MAAMO,MAAM,EAAEZ;IAC3D,MAAMa,iBAAiBC,OAAMC,OAAO,CAAC;QACnC,IAAI,CAACV,MAAMW,SAAS,EAAE;YACpB,OAAOC;QACT;QACA,OAAOZ,MAAMa,QAAQ,KAAK,UAAUT,WAAWrB,cAAc,GAAGqB,WAAWjB,YAAY;IACzF,GAAG;QAACa,MAAMa,QAAQ;QAAEb,MAAMW,SAAS;QAAEP,WAAWjB,YAAY;QAAEiB,WAAWrB,cAAc;KAAC;IACxFiB,MAAMzB,IAAI,CAACuC,SAAS,GAAGC,IAAAA,oBAAY,EAAC1C,uBAAuBE,IAAI,EAAE0B,aAAaC,gBAAgBM,gBAAgBJ,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAER,kBAAkBL,MAAMzB,IAAI,CAACuC,SAAS;IAChL,OAAOd;AACT,GACA,wDAAwD"}
+{"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(\"r46ju4x\", null, [\".r46ju4x{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}\"]);\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;CAA8U;AACxZ;;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"}

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

@@ -51,11 +51,21 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
     },
     end: {
         Bz10aip: "f1g0pcr8"
+    },
+    bottom: {
+        Bz10aip: "fip488n",
+        Bhzewxz: "f198g47y",
+        Bqenvij: "fub80nq",
+        a9b677: "fr97h3j"
     }
 }, {
     d: [
         ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}",
-        ".f1g0pcr8{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;}"
     ]
 });
 const useDrawerMotionStyles = /*#__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(\"r1vxc6jp\", \"r1uky7bi\", {\n  r: [\".r1vxc6jp{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}\", \".r1vxc6jp:focus{outline-style:none;}\", \".r1vxc6jp:focus-visible{outline-style:none;}\", \".r1vxc6jp[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1vxc6jp[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);}\", \".r1uky7bi{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}\", \".r1uky7bi:focus{outline-style:none;}\", \".r1uky7bi:focus-visible{outline-style:none;}\", \".r1uky7bi[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1uky7bi[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){.r1vxc6jp[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){.r1uky7bi[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}, {\n  d: [\".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\"]\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","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;;IAuDAC,+BAA+B;eAA/BA;;;;iEA7DU;wBAC+B;2CAG+C;oCACjE;AAC7B,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,YAAY,YAAY;IAC9EC,GAAG;QAAC;QAA4V;QAAwC;QAAgD;QAAiK;QAAmvB;QAA4V;QAAwC;QAAgD;QAAiK;KAAkvB;IACnpFC,GAAG;QAAC;QAAgM;KAA+L;AACrY;AACA,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAA+E;KAA6E;AAClK;AACA,MAAMC,wBAAwB,WAAW,GAAEL,IAAAA,gBAAQ,EAAC;IAClD,WAAW;QACTM,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLJ,QAAQ;QACRJ,SAAS;QACTK,QAAQ;IACV;AACF,GAAG;IACDH,GAAG;QAAC;QAAwB;QAA+D;QAA+D;QAAwD;QAAwB;QAA6C;KAAyC;AAClU;AACA;;CAEC,GACD,MAAMO,0BAA0B,WAAW,GAAEX,IAAAA,gBAAQ,EAAC;IACpD,WAAW;QACTM,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,MAAMZ,kCAAkCqB,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAcrB;IACpB,MAAMsB,aAAalB;IACnB,MAAMmB,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAMC,yBAAyBC,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEjB;IACjE,MAAMkB,2BAA2BF,IAAAA,uCAAmB,EAACR,MAAMS,MAAM,EAAEX;IACnE,MAAMjB,WAAWmB,MAAMpB,IAAI,CAACC,QAAQ;IACpCmB,MAAMpB,IAAI,CAAC+B,SAAS,GAAGC,IAAAA,oBAAY,EAAClC,wBAAwBE,IAAI,EAAEqB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAEN,wBAAwBP,MAAMpB,IAAI,CAAC+B,SAAS;IACvK,IAAI9B,UAAU;QACZA,SAAS8B,SAAS,GAAGC,IAAAA,oBAAY,EAAClC,wBAAwBG,QAAQ,EAAE6B,0BAA0BL,cAAc,CAACL,MAAMc,IAAI,CAAC,EAAEjC,SAAS8B,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(\"r1vxc6jp\", \"r1uky7bi\", {\n  r: [\".r1vxc6jp{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}\", \".r1vxc6jp:focus{outline-style:none;}\", \".r1vxc6jp:focus-visible{outline-style:none;}\", \".r1vxc6jp[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1vxc6jp[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);}\", \".r1uky7bi{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}\", \".r1uky7bi:focus{outline-style:none;}\", \".r1uky7bi:focus-visible{outline-style:none;}\", \".r1uky7bi[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1uky7bi[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){.r1vxc6jp[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){.r1uky7bi[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,YAAY;IAC9EC,GAAG;QAAC;QAA4V;QAAwC;QAAgD;QAAiK;QAAmvB;QAA4V;QAAwC;QAAgD;QAAiK;KAAkvB;IACnpFC,GAAG;QAAC;QAAgM;KAA+L;AACrY;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/e2e/DrawerShared.js

@@ -102,7 +102,8 @@ function testDrawerBaseScenarios(Component) {
     describe('position prop', ()=>{
         const positions = {
             start: 'left',
-            end: 'right'
+            end: 'right',
+            bottom: 'bottom'
         };
         Object.entries(positions).forEach(([position, side])=>{
             const positionProp = position;

package/lib-commonjs/e2e/DrawerShared.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerShared.js"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nconst mountFluent = (element)=>{\n    mount(/*#__PURE__*/ React.createElement(FluentProvider, {\n        theme: webLightTheme\n    }, element));\n};\nexport function testDrawerBaseScenarios(Component) {\n    describe('basic functionality', ()=>{\n        it('should not render any element when closed', ()=>{\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\"\n            }));\n            cy.get('#drawer').should('not.exist');\n        });\n        it('should render an element when opened', ()=>{\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\",\n                open: true\n            }));\n            cy.get('#drawer').should('exist');\n        });\n        it('should render children content', ()=>{\n            const content = 'Test the renderization';\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\",\n                open: true\n            }, content));\n            cy.get('#drawer').contains(content);\n        });\n        it('should toggle visibility on open prop change', ()=>{\n            const ExampleDrawer = ()=>{\n                const [open, setOpen] = React.useState(false);\n                return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Component, {\n                    id: \"drawer\",\n                    open: open\n                }), /*#__PURE__*/ React.createElement(\"button\", {\n                    id: \"button\",\n                    onClick: ()=>setOpen(true)\n                }, \"Open\"));\n            };\n            mountFluent(/*#__PURE__*/ React.createElement(ExampleDrawer, null));\n            cy.get('#drawer').should('not.exist');\n            cy.get('#button').click();\n            cy.get('#drawer').should('exist');\n        });\n    });\n    describe('size prop', ()=>{\n        const sizes = {\n            small: 320,\n            medium: 592,\n            large: 940,\n            full: 1000\n        };\n        Object.entries(sizes).forEach(([size, width])=>{\n            const sizeProp = size;\n            it(`should have correct size when size is ${size}`, ()=>{\n                mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                    size: sizeProp,\n                    id: \"drawer\",\n                    open: true\n                }));\n                cy.viewport(1000, 1000);\n                cy.get('#drawer').should('have.css', 'width', width + 'px');\n                cy.get('#drawer').invoke('outerWidth').should('equal', width);\n            });\n        });\n        it('width should not be bigger than viewport', ()=>{\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\",\n                open: true\n            }));\n            cy.viewport(319, 319);\n            cy.get('#drawer').should('have.css', 'width', '319px');\n            cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n        });\n        it('should have custom size', ()=>{\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\",\n                open: true,\n                style: {\n                    width: '200px'\n                }\n            }));\n            cy.get('#drawer').should('have.css', 'width', '200px');\n            cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n        });\n    });\n    describe('position prop', ()=>{\n        const positions = {\n            start: 'left',\n            end: 'right'\n        };\n        Object.entries(positions).forEach(([position, side])=>{\n            const positionProp = position;\n            it(`should have correct position when position is ${position}`, ()=>{\n                mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                    position: positionProp,\n                    id: \"drawer\",\n                    open: true\n                }));\n                cy.get('#drawer').should('have.css', side, '0px');\n            });\n        });\n    });\n}\n"],"names":["testDrawerBaseScenarios","mountFluent","element","mount","React","createElement","FluentProvider","theme","webLightTheme","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","Fragment","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","position","side","positionProp"],"mappings":"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"}
+{"version":3,"sources":["DrawerShared.js"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nconst mountFluent = (element)=>{\n    mount(/*#__PURE__*/ React.createElement(FluentProvider, {\n        theme: webLightTheme\n    }, element));\n};\nexport function testDrawerBaseScenarios(Component) {\n    describe('basic functionality', ()=>{\n        it('should not render any element when closed', ()=>{\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\"\n            }));\n            cy.get('#drawer').should('not.exist');\n        });\n        it('should render an element when opened', ()=>{\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\",\n                open: true\n            }));\n            cy.get('#drawer').should('exist');\n        });\n        it('should render children content', ()=>{\n            const content = 'Test the renderization';\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\",\n                open: true\n            }, content));\n            cy.get('#drawer').contains(content);\n        });\n        it('should toggle visibility on open prop change', ()=>{\n            const ExampleDrawer = ()=>{\n                const [open, setOpen] = React.useState(false);\n                return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Component, {\n                    id: \"drawer\",\n                    open: open\n                }), /*#__PURE__*/ React.createElement(\"button\", {\n                    id: \"button\",\n                    onClick: ()=>setOpen(true)\n                }, \"Open\"));\n            };\n            mountFluent(/*#__PURE__*/ React.createElement(ExampleDrawer, null));\n            cy.get('#drawer').should('not.exist');\n            cy.get('#button').click();\n            cy.get('#drawer').should('exist');\n        });\n    });\n    describe('size prop', ()=>{\n        const sizes = {\n            small: 320,\n            medium: 592,\n            large: 940,\n            full: 1000\n        };\n        Object.entries(sizes).forEach(([size, width])=>{\n            const sizeProp = size;\n            it(`should have correct size when size is ${size}`, ()=>{\n                mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                    size: sizeProp,\n                    id: \"drawer\",\n                    open: true\n                }));\n                cy.viewport(1000, 1000);\n                cy.get('#drawer').should('have.css', 'width', width + 'px');\n                cy.get('#drawer').invoke('outerWidth').should('equal', width);\n            });\n        });\n        it('width should not be bigger than viewport', ()=>{\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\",\n                open: true\n            }));\n            cy.viewport(319, 319);\n            cy.get('#drawer').should('have.css', 'width', '319px');\n            cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n        });\n        it('should have custom size', ()=>{\n            mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                id: \"drawer\",\n                open: true,\n                style: {\n                    width: '200px'\n                }\n            }));\n            cy.get('#drawer').should('have.css', 'width', '200px');\n            cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n        });\n    });\n    describe('position prop', ()=>{\n        const positions = {\n            start: 'left',\n            end: 'right',\n            bottom: 'bottom'\n        };\n        Object.entries(positions).forEach(([position, side])=>{\n            const positionProp = position;\n            it(`should have correct position when position is ${position}`, ()=>{\n                mountFluent(/*#__PURE__*/ React.createElement(Component, {\n                    position: positionProp,\n                    id: \"drawer\",\n                    open: true\n                }));\n                cy.get('#drawer').should('have.css', side, '0px');\n            });\n        });\n    });\n}\n"],"names":["testDrawerBaseScenarios","mountFluent","element","mount","React","createElement","FluentProvider","theme","webLightTheme","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","Fragment","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"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"}

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

@@ -15,6 +15,9 @@ _export(exports, {
     drawerDefaultStyles: function() {
         return drawerDefaultStyles;
     },
+    useDrawerBottomBaseStyles: function() {
+        return useDrawerBottomBaseStyles;
+    },
     useDrawerDurationStyles: function() {
         return useDrawerDurationStyles;
     },
@@ -97,6 +100,10 @@ const drawerDefaultStyles = {
             "fvfyk4"
         ]
     },
+    bottom: {
+        B5kzvoi: "f1yab3r1",
+        Bhzewxz: "f198g47y"
+    },
     small: {
         Bjr0ffy: "f1exhnwo"
     },
@@ -123,6 +130,8 @@ const drawerDefaultStyles = {
         ".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;}",
@@ -137,6 +146,27 @@ const drawerDefaultStyles = {
         ]
     ]
 });
+const useDrawerBottomBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
+    small: {
+        Bjr0ffy: "f1exhnwo"
+    },
+    medium: {
+        Bjr0ffy: "fqofjzu"
+    },
+    large: {
+        Bjr0ffy: "fce6y3m"
+    },
+    full: {
+        Bjr0ffy: "fno8cgj"
+    }
+}, {
+    d: [
+        ".f1exhnwo{--fui-Drawer--size:320px;}",
+        ".fqofjzu{--fui-Drawer--size:592px;}",
+        ".fce6y3m{--fui-Drawer--size:940px;}",
+        ".fno8cgj{--fui-Drawer--size:100vh;}"
+    ]
+});
 const useDrawerDurationStyles = /*#__PURE__*/ (0, _react.__styles)({
     small: {
         B3o57yi: "fc397y7"
@@ -160,6 +190,7 @@ const useDrawerDurationStyles = /*#__PURE__*/ (0, _react.__styles)({
 });
 const useDrawerBaseClassNames = ({ position, size, motion })=>{
     const baseStyles = useDrawerStyles();
+    const bottomBaseStyles = useDrawerBottomBaseStyles();
     const durationStyles = useDrawerDurationStyles();
-    return (0, _react.mergeClasses)(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
+    return (0, _react.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);
 }; //# sourceMappingURL=useDrawerBaseStyles.styles.js.map

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  ... /*#__PURE__*/shorthands.overflow('hidden'),\n  width: `var(${drawerCSSVars.drawerSizeVar})`,\n  maxWidth: '100vw',\n  height: 'auto',\n  maxHeight: '100vh',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  justifyContent: 'flex-start',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */\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  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;}\", \".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 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 durationStyles = useDrawerDurationStyles();\n  return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerDurationStyles","useDrawerBaseClassNames","drawerSizeVar","shorthands","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","small","Bjr0ffy","medium","large","full","d","m","B3o57yi","position","size","motion","baseStyles","durationStyles","mergeClasses","type"],"mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAMAC,mBAAmB;eAAnBA;;IA2DAC,uBAAuB;eAAvBA;;IAgBAC,uBAAuB;eAAvBA;;;uBAtFsC;4BAC5B;AAIhB,MAAMH,gBAAgB;IAC3BI,eAAe;AACjB;AAIO,MAAMH,sBAAsB;IACjC,GAAI,WAAW,GAAEI,iBAAU,CAACC,QAAQ,CAAC,SAAS;IAC9CC,OAAO,CAAC,IAAI,EAAEP,cAAcI,aAAa,CAAC,CAAC,CAAC;IAC5CI,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,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;QAAwC;QAAuC;QAAuC;KAAsC;IAChsBC,GAAG;QAAC;YAAC;YAA8F;gBACjGA,GAAG;YACL;SAAE;KAAC;AACL;AACO,MAAM1C,0BAA0B,WAAW,GAAEoB,IAAAA,eAAQ,EAAC;IAC3DgB,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,MAAMxC,0BAA0B,CAAC,EACtC2C,QAAQ,EACRC,IAAI,EACJC,MAAM,EACP;IACC,MAAMC,aAAa5B;IACnB,MAAM6B,iBAAiBhD;IACvB,OAAOiD,IAAAA,mBAAY,EAACF,UAAU,CAACH,SAAS,EAAEI,cAAc,CAACH,KAAK,EAAEE,UAAU,CAACF,KAAK,EAAEE,WAAWvB,aAAa,EAAEsB,OAAOI,IAAI,KAAK,cAAcH,WAAW1B,QAAQ,EAAEyB,OAAOI,IAAI,KAAK,aAAaH,WAAWxB,OAAO;AAChN,GACA,sDAAsD"}
+{"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  ... /*#__PURE__*/shorthands.overflow('hidden'),\n  width: `var(${drawerCSSVars.drawerSizeVar})`,\n  maxWidth: '100vw',\n  height: 'auto',\n  maxHeight: '100vh',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  justifyContent: 'flex-start',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */\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","shorthands","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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.0.8",
+  "version": "9.1.0",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,19 +35,19 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.9.4",
-    "@fluentui/react-jsx-runtime": "^9.0.24",
-    "@fluentui/react-motion-preview": "^0.5.7",
+    "@fluentui/react-dialog": "^9.9.6",
+    "@fluentui/react-jsx-runtime": "^9.0.26",
+    "@fluentui/react-motion-preview": "^0.5.9",
     "@fluentui/react-shared-contexts": "^9.13.2",
-    "@fluentui/react-tabster": "^9.17.0",
+    "@fluentui/react-tabster": "^9.17.2",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.15.6",
+    "@fluentui/react-utilities": "^9.16.0",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.14.0 <19.0.0",
+    "@types/react-dom": ">=16.9.0 <19.0.0",
     "react": ">=16.14.0 <19.0.0",
     "react-dom": ">=16.14.0 <19.0.0"
   },