npm - @fluentui/react-drawer - Versions diffs - 9.0.9 → 9.1.1 - Mend

@fluentui/react-drawer 9.0.9 → 9.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-drawer
-This log was last generated on Tue, 16 Jan 2024 13:07:11 GMT and should not be manually modified.
+This log was last generated on Thu, 18 Jan 2024 14:19:09 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.1.1)
+Thu, 18 Jan 2024 14:19:09 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.1.0..@fluentui/react-drawer_v9.1.1)
+### Patches
+- Bump @fluentui/react-dialog to v9.9.7 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.27 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-motion-preview to v0.5.10 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.14.0 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-tabster to v9.17.3 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-utilities to v9.16.1 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.1.0)
+Wed, 17 Jan 2024 16:18:49 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:07:11 GMT
+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

package/dist/index.d.ts CHANGED Viewed

@@ -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/InlineDrawer/useInlineDrawerStyles.styles.js CHANGED Viewed

@@ -21,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": {
@@ -43,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
  */
@@ -51,8 +76,7 @@ export const useInlineDrawerStyles_unstable = state => {
   const baseClassNames = useDrawerBaseClassNames(state);
   const rootStyles = useDrawerRootStyles();
   const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());
-  const separatorClass = state.separator && (state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd);
-  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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","~~useInlineDrawerStyles_unstable~~","state","~~resetStyles~~","~~baseClassNames~~","~~rootStyles~~","~~motionClassNames~~","~~motion~~","~~separatorClass~~","~~separator~~","~~position~~","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 / 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 =~~ state.~~separator && (state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd);\n state.~~root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, ~~separatorClass~~, 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,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,GAAGN,~~KAAK,~~CAACO~~,~~SAAS,KAAKP,KAAK,CAACQ,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAACrB,cAAc,GAAGqB,UAAU,CAACjB,YAAY,CAAC;EAC5Hc,KAAK,CAACvB,~~IAAI,~~CAACgC~~,SAAS,~~GAAGxC~~,YAAY,CAACO,sBAAsB,CAACC,IAAI,~~EAAEwB~~,WAAW,EAAEC,cAAc,~~EAAEI~~,~~cAAc~~,~~EAAEH~~,UAAU,~~CAACH~~,KAAK,~~CAACQ~~,QAAQ,CAAC,~~EAAEJ~~,gBAAgB,~~EAAEJ~~,KAAK,~~CAACvB~~,IAAI,~~CAACgC~~,SAAS,CAAC;~~EACjL~~,~~OAAOT~~,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useMotionClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","separatorBottom","B4j52fo","icvyot","g2u3we","start","Bz10aip","end","bottom","a9b677","Bqenvij","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","getSeparatorClass","state","classNames","separator","undefined","position","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","motionClassNames","motion","className"],"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = makeResetStyles({\n ...drawerDefaultStyles,\n position: 'relative'\n});\n/*\n Styles for the root slot\n / const separatorValues = [\n '1px',\n 'solid',\n tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n / Separator / separatorStart: {\n ...shorthands.borderRight(...separatorValues)\n },\n separatorEnd: {\n ...shorthands.borderLeft(...separatorValues)\n },\n separatorBottom: {\n ...shorthands.borderTop(...separatorValues)\n },\n / Positioning / start: {\n transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) -1), 0, 0)`\n },\n end: {\n transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n },\n bottom: {\n transform: `translate3D(0, var(${drawerCSSVars.drawerSizeVar}), 0)`,\n width: '100%',\n height: `var(${drawerCSSVars.drawerSizeVar})`\n }\n});\nconst useDrawerMotionStyles = makeStyles({\n default: {\n opacity: 0,\n transitionProperty: 'opacity, transform',\n willChange: 'opacity, transform'\n },\n enter: {\n opacity: 1,\n transform: 'translate3D(0, 0, 0)'\n }\n});\nfunction getSeparatorClass(state, classNames) {\n if (!state.separator) {\n return undefined;\n }\n switch(state.position){\n case 'start':\n return classNames.separatorStart;\n case 'end':\n return classNames.separatorEnd;\n case 'bottom':\n return classNames.separatorBottom;\n default:\n return undefined;\n }\n}\n/*\n Apply styling to the InlineDrawer slots based on the state\n */ export const useInlineDrawerStyles_unstable = (state)=>{\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], motionClassNames, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGX,aAAA,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,aAAa,QAAQ,wBAAwB;AAGtD,MAAMC,cAAc,CAACC;IACnBJ,oBAAM,oBAACC;QAAeI,OAAOH;OAAgBE;AAC/C;AAEA,OAAO,SAASE,wBAAwBC,SAA2C;IACjFC,SAAS,uBAAuB;QAC9BC,GAAG,6CAA6C;YAC9CN,0BAAY,oBAACI;gBAAUG,IAAG;;YAE1BC,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,wCAAwC;YACzCN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;QAEAJ,GAAG,kCAAkC;YACnC,MAAMM,UAAU;YAChBZ,0BACE,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;eACpBC;YAILJ,GAAGC,GAAG,CAAC,WAAWI,QAAQ,CAACD;QAC7B;QAEAN,GAAG,gDAAgD;YACjD,MAAMQ,gBAAgB;gBACpB,MAAM,CAACH,MAAMI,QAAQ,GAAGnB,MAAMoB,QAAQ,CAAC;gBAEvC,qBACE,wDACE,oBAACZ;oBAAUG,IAAG;oBAASI,MAAMA;kCAC7B,oBAACM;oBAAOV,IAAG;oBAASW,SAAS,IAAMH,QAAQ;mBAAO;YAKxD;YAEAf,0BAAY,oBAACc;YAEbN,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;YACzBF,GAAGC,GAAG,CAAC,WAAWU,KAAK;YACvBX,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC3B;IACF;IAEAL,SAAS,aAAa;QACpB,MAAMe,QAAQ;YACZC,OAAO;YACPC,QAAQ;YACRC,OAAO;YACPC,MAAM;QACR;QAEAC,OAAOC,OAAO,CAACN,OAAOO,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;YAC1C,MAAMC,WAAWF;YAEjBtB,GAAG,CAAC,sCAAsC,EAAEsB,KAAK,CAAC,EAAE;gBAClD5B,0BAAY,oBAACI;oBAAUwB,MAAME;oBAAUvB,IAAG;oBAASI,MAAAA;;gBAEnDH,GAAGuB,QAAQ,CAAC,MAAM;gBAClBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAASmB,QAAQ;gBACtDrB,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAASmB;YACzD;QACF;QAEAvB,GAAG,4CAA4C;YAC7CN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;;YAEnCH,GAAGuB,QAAQ,CAAC,KAAK;YACjBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;QAEAJ,GAAG,2BAA2B;YAC5BN,0BAAY,oBAACI;gBAAUG,IAAG;gBAASI,MAAAA;gBAAKsB,OAAO;oBAAEJ,OAAO;gBAAQ;;YAEhErB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QACzD;IACF;IAEAL,SAAS,iBAAiB;QACxB,MAAM6B,YAAY;YAChBC,OAAO;YACPC,KAAK;~~QACP~~;~~QAEAX~~,OAAOC,OAAO,CAACQ,WAAWP,OAAO,CAAC,CAAC,~~CAACU~~,UAAUC,KAAK;YACjD,MAAMC,eAAeF;~~YAErB/B~~,GAAG,CAAC,8CAA8C,~~EAAE+B~~,SAAS,CAAC,EAAE;~~gBAC9DrC~~,0BAAY,oBAACI;~~oBAAUiC~~,UAAUE;~~oBAAchC~~,IAAG;oBAASI,MAAAA;;gBAE3DH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,~~YAAY4B~~,MAAM;YAC7C;QACF;IACF;AACF"}
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 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 CHANGED Viewed

	@@ -1 +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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","Bekrc4i","vrafjx","h3c5rm","oyh7mz","j35jbq","end","ibv6hh","wvpqe5","zhjwy3","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","m","useDrawerBottomBaseStyles","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","bottomBaseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/*\n CSS variable names used internally for uniform styling in Drawer.\n / export const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size'\n};\n/\n Default shared styles for the Drawer component\n / export const drawerDefaultStyles = {\n ...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/InlineDrawer/useInlineDrawerStyles.styles.js CHANGED Viewed

@@ -62,11 +62,21 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fa8zu9y"
         ]
     },
+    separatorBottom: {
+        B4j52fo: "f5ogflp",
+        icvyot: "fzkkow9",
+        g2u3we: "fo8z57v"
+    },
     start: {
         Bz10aip: "f1d8gkik"
     },
     end: {
         Bz10aip: "f1h1g6jt"
+    },
+    bottom: {
+        Bz10aip: "f1rdfgt8",
+        a9b677: "fly5x3f",
+        Bqenvij: "fub80nq"
     }
 }, {
     d: [
@@ -76,8 +86,14 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__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, _react.__styles)({
@@ -99,12 +115,26 @@ const useDrawerMotionStyles = /*#__PURE__*/ (0, _react.__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 = state.separator && (state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd);
-    state.root.className = (0, _react.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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = /#__PURE__/__resetStyles(\"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 =~~ state.~~separator && (state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd);\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~~","~~separator~~","~~position~~","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;~~IA4CAC~~,8BAA8B;eAA9BA;;;~~uBAhDqD~~;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,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,eAAQ,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~~,~~iBAAiBR~~,~~MAAMS~~,~~SAAS~~,~~IAAKT~~,CAAAA,~~MAAMU~~,~~QAAQ~~,~~KAAK~~,~~UAAUN~~,~~WAAWrB~~,~~cAAc~~,~~GAAGqB~~,~~WAAWjB~~,~~YAAY~~,~~AAAD~~;~~IAC1Ha~~,~~MAAMzB~~,IAAI,~~CAACoC~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAACvC~~,uBAAuBE,IAAI,~~EAAE0B~~,aAAaC,~~gBAAgBM~~,~~gBAAgBJ~~,UAAU,~~CAACJ~~,~~MAAMU~~,QAAQ,CAAC,~~EAAEL~~,~~kBAAkBL~~,~~MAAMzB~~,IAAI,~~CAACoC~~,SAAS;~~IAChL~~,~~OAAOX~~;AACT,GACA,wDAAwD"}
1	+ {"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = /#__PURE__/__resetStyles(\"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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~~QACT~~;~~QACAX~~,OAAOC,OAAO,CAACQ,WAAWP,OAAO,CAAC,CAAC,~~CAACU~~,UAAUC,KAAK;YAC/C,MAAMC,eAAeF;~~YACrB/B~~,GAAG,CAAC,8CAA8C,~~EAAE+B~~,SAAS,CAAC,EAAE;~~gBAC5DzC~~,YAAY,WAAW,GAAGG,OAAMC,aAAa,CAACI,WAAW;~~oBACrDiC~~,UAAUE;~~oBACVhC~~,IAAI;oBACJI,MAAM;gBACV;gBACAH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,~~YAAY4B~~,MAAM;YAC/C;QACJ;IACJ;AACJ"}
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 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":";;;;+BASgBA;;;eAAAA;;;;iEATO;wBACD;+BACS;4BACD;AAC9B,MAAMC,cAAc,CAACC;IACjBC,IAAAA,aAAK,EAAC,WAAW,GAAGC,OAAMC,aAAa,CAACC,6BAAc,EAAE;QACpDC,OAAOC,yBAAa;IACxB,GAAGN;AACP;AACO,SAASF,wBAAwBS,SAAS;IAC7CC,SAAS,uBAAuB;QAC5BC,GAAG,6CAA6C;YAC5CV,YAAY,WAAW,GAAGG,OAAMC,aAAa,CAACI,WAAW;gBACrDG,IAAI;YACR;YACAC,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC7B;QACAJ,GAAG,wCAAwC;YACvCV,YAAY,WAAW,GAAGG,OAAMC,aAAa,CAACI,WAAW;gBACrDG,IAAI;gBACJI,MAAM;YACV;YACAH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC7B;QACAJ,GAAG,kCAAkC;YACjC,MAAMM,UAAU;YAChBhB,YAAY,WAAW,GAAGG,OAAMC,aAAa,CAACI,WAAW;gBACrDG,IAAI;gBACJI,MAAM;YACV,GAAGC;YACHJ,GAAGC,GAAG,CAAC,WAAWI,QAAQ,CAACD;QAC/B;QACAN,GAAG,gDAAgD;YAC/C,MAAMQ,gBAAgB;gBAClB,MAAM,CAACH,MAAMI,QAAQ,GAAGhB,OAAMiB,QAAQ,CAAC;gBACvC,OAAO,WAAW,GAAGjB,OAAMC,aAAa,CAACD,OAAMkB,QAAQ,EAAE,MAAM,WAAW,GAAGlB,OAAMC,aAAa,CAACI,WAAW;oBACxGG,IAAI;oBACJI,MAAMA;gBACV,IAAI,WAAW,GAAGZ,OAAMC,aAAa,CAAC,UAAU;oBAC5CO,IAAI;oBACJW,SAAS,IAAIH,QAAQ;gBACzB,GAAG;YACP;YACAnB,YAAY,WAAW,GAAGG,OAAMC,aAAa,CAACc,eAAe;YAC7DN,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;YACzBF,GAAGC,GAAG,CAAC,WAAWU,KAAK;YACvBX,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC;QAC7B;IACJ;IACAL,SAAS,aAAa;QAClB,MAAMe,QAAQ;YACVC,OAAO;YACPC,QAAQ;YACRC,OAAO;YACPC,MAAM;QACV;QACAC,OAAOC,OAAO,CAACN,OAAOO,OAAO,CAAC,CAAC,CAACC,MAAMC,MAAM;YACxC,MAAMC,WAAWF;YACjBtB,GAAG,CAAC,sCAAsC,EAAEsB,KAAK,CAAC,EAAE;gBAChDhC,YAAY,WAAW,GAAGG,OAAMC,aAAa,CAACI,WAAW;oBACrDwB,MAAME;oBACNvB,IAAI;oBACJI,MAAM;gBACV;gBACAH,GAAGuB,QAAQ,CAAC,MAAM;gBAClBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAASmB,QAAQ;gBACtDrB,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAASmB;YAC3D;QACJ;QACAvB,GAAG,4CAA4C;YAC3CV,YAAY,WAAW,GAAGG,OAAMC,aAAa,CAACI,WAAW;gBACrDG,IAAI;gBACJI,MAAM;YACV;YACAH,GAAGuB,QAAQ,CAAC,KAAK;YACjBvB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QAC3D;QACAJ,GAAG,2BAA2B;YAC1BV,YAAY,WAAW,GAAGG,OAAMC,aAAa,CAACI,WAAW;gBACrDG,IAAI;gBACJI,MAAM;gBACNsB,OAAO;oBACHJ,OAAO;gBACX;YACJ;YACArB,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY,SAAS;YAC9CF,GAAGC,GAAG,CAAC,WAAWuB,MAAM,CAAC,cAActB,MAAM,CAAC,SAAS;QAC3D;IACJ;IACAL,SAAS,iBAAiB;QACtB,MAAM6B,YAAY;YACdC,OAAO;YACPC,KAAK;YACLC,QAAQ;QACZ;QACAZ,OAAOC,OAAO,CAACQ,WAAWP,OAAO,CAAC,CAAC,CAACW,UAAUC,KAAK;YAC/C,MAAMC,eAAeF;YACrBhC,GAAG,CAAC,8CAA8C,EAAEgC,SAAS,CAAC,EAAE;gBAC5D1C,YAAY,WAAW,GAAGG,OAAMC,aAAa,CAACI,WAAW;oBACrDkC,UAAUE;oBACVjC,IAAI;oBACJI,MAAM;gBACV;gBACAH,GAAGC,GAAG,CAAC,WAAWC,MAAM,CAAC,YAAY6B,MAAM;YAC/C;QACJ;IACJ;AACJ"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.0.9",
+  "version": "9.1.1",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,13 +35,13 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.9.5",
-    "@fluentui/react-jsx-runtime": "^9.0.25",
-    "@fluentui/react-motion-preview": "^0.5.8",
-    "@fluentui/react-shared-contexts": "^9.13.2",
-    "@fluentui/react-tabster": "^9.17.1",
+    "@fluentui/react-dialog": "^9.9.7",
+    "@fluentui/react-jsx-runtime": "^9.0.27",
+    "@fluentui/react-motion-preview": "^0.5.10",
+    "@fluentui/react-shared-contexts": "^9.14.0",
+    "@fluentui/react-tabster": "^9.17.3",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.15.6",
+    "@fluentui/react-utilities": "^9.16.1",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },