@fluentui/react-drawer 9.0.0-beta.9 → 9.0.1

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

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    inlineDrawerClassNames: function() {
+        return inlineDrawerClassNames;
+    },
+    useInlineDrawerStyles_unstable: function() {
+        return useInlineDrawerStyles_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
+const _reactmotionpreview = require("@fluentui/react-motion-preview");
+const inlineDrawerClassNames = {
+    root: 'fui-InlineDrawer'
+};
+const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r46ju4x", null, [
+    ".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;}"
+]);
+/**
+ * Styles for the root slot
+ */ const separatorValues = [
+    '1px',
+    'solid',
+    _reacttheme.tokens.colorNeutralBackground3
+];
+const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
+    separatorStart: {
+        Bekrc4i: [
+            "f1hqa2wf",
+            "finvdd3"
+        ],
+        vrafjx: [
+            "fcdblym",
+            "fjik90z"
+        ],
+        h3c5rm: [
+            "fa8zu9y",
+            "f17e9lqh"
+        ]
+    },
+    separatorEnd: {
+        ibv6hh: [
+            "finvdd3",
+            "f1hqa2wf"
+        ],
+        wvpqe5: [
+            "fjik90z",
+            "fcdblym"
+        ],
+        zhjwy3: [
+            "f17e9lqh",
+            "fa8zu9y"
+        ]
+    },
+    start: {
+        Bz10aip: "f1d8gkik"
+    },
+    end: {
+        Bz10aip: "f1h1g6jt"
+    }
+}, {
+    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);}"
+    ]
+});
+const useDrawerMotionStyles = /*#__PURE__*/ (0, _react1.__styles)({
+    "default": {
+        abs64n: "fk73vx1",
+        Bmy1vo4: "f15rjlgw",
+        Es3by: "f1blt7p"
+    },
+    enter: {
+        abs64n: "f5p0z4x",
+        Bz10aip: "f87uvqx"
+    }
+}, {
+    d: [
+        ".fk73vx1{opacity:0;}",
+        ".f15rjlgw{transition-property:opacity,transform;}",
+        ".f1blt7p{will-change:opacity,transform;}",
+        ".f5p0z4x{opacity:1;}",
+        ".f87uvqx{transform:translate3D(0, 0, 0);}"
+    ]
+});
+const useInlineDrawerStyles_unstable = (state)=>{
+    const resetStyles = useDrawerResetStyles();
+    const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
+    const rootStyles = useDrawerRootStyles();
+    const motionClassNames = (0, _reactmotionpreview.useMotionClassNames)(state.motion, useDrawerMotionStyles());
+    const separatorClass = _react.useMemo(()=>{
+        if (!state.separator) {
+            return undefined;
+        }
+        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
+    }, [
+        state.position,
+        state.separator,
+        rootStyles.separatorEnd,
+        rootStyles.separatorStart
+    ]);
+    state.root.className = (0, _react1.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);
+    return state;
+}; //# sourceMappingURL=useInlineDrawerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useInlineDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n  root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"r46ju4x\", null, [\".r46ju4x{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}\"]);\n/**\n * Styles for the root slot\n */\nconst separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n  separatorStart: {\n    Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n    vrafjx: [\"fcdblym\", \"fjik90z\"],\n    h3c5rm: [\"fa8zu9y\", \"f17e9lqh\"]\n  },\n  separatorEnd: {\n    ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n    wvpqe5: [\"fjik90z\", \"fcdblym\"],\n    zhjwy3: [\"f17e9lqh\", \"fa8zu9y\"]\n  },\n  start: {\n    Bz10aip: \"f1d8gkik\"\n  },\n  end: {\n    Bz10aip: \"f1h1g6jt\"\n  }\n}, {\n  d: [\".f1hqa2wf{border-right-width:1px;}\", \".finvdd3{border-left-width:1px;}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}\", \".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n  \"default\": {\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f15rjlgw\",\n    Es3by: \"f1blt7p\"\n  },\n  enter: {\n    abs64n: \"f5p0z4x\",\n    Bz10aip: \"f87uvqx\"\n  }\n}, {\n  d: [\".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\n});\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = state => {\n  const resetStyles = useDrawerResetStyles();\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n  const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n  const separatorClass = React.useMemo(() => {\n    if (!state.separator) {\n      return undefined;\n    }\n    return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n  }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);\n  state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useInlineDrawerStyles.styles.js.map"],"names":["inlineDrawerClassNames","useInlineDrawerStyles_unstable","root","useDrawerResetStyles","__resetStyles","separatorValues","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","state","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","motionClassNames","useMotionClassNames","motion","separatorClass","React","useMemo","separator","undefined","position","className","mergeClasses"],"mappings":";;;;;;;;;;;IAKaA,sBAAsB;eAAtBA;;IA4CAC,8BAA8B;eAA9BA;;;;iEAjDU;wBAC2C;4BAC3C;2CACqD;oCACxC;AAC7B,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,WAAW,MAAM;IAAC;CAA8U;AACxZ;;CAEC,GACD,MAAMC,kBAAkB;IAAC;IAAO;IAASC,kBAAM,CAACC,uBAAuB;CAAC;AACxE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDC,gBAAgB;QACdC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,cAAc;QACZC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAA+E;KAAmE;AAC/a;AACA,MAAMC,wBAAwB,WAAW,GAAEb,IAAAA,gBAAQ,EAAC;IAClD,WAAW;QACTc,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLH,QAAQ;QACRJ,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAAwB;QAAqD;QAA4C;QAAwB;KAA4C;AACnM;AAIO,MAAMpB,iCAAiC0B,CAAAA;IAC5C,MAAMC,cAAczB;IACpB,MAAM0B,iBAAiBC,IAAAA,kDAAuB,EAACH;IAC/C,MAAMI,aAAavB;IACnB,MAAMwB,mBAAmBC,IAAAA,uCAAmB,EAACN,MAAMO,MAAM,EAAEZ;IAC3D,MAAMa,iBAAiBC,OAAMC,OAAO,CAAC;QACnC,IAAI,CAACV,MAAMW,SAAS,EAAE;YACpB,OAAOC;QACT;QACA,OAAOZ,MAAMa,QAAQ,KAAK,UAAUT,WAAWrB,cAAc,GAAGqB,WAAWjB,YAAY;IACzF,GAAG;QAACa,MAAMa,QAAQ;QAAEb,MAAMW,SAAS;QAAEP,WAAWjB,YAAY;QAAEiB,WAAWrB,cAAc;KAAC;IACxFiB,MAAMzB,IAAI,CAACuC,SAAS,GAAGC,IAAAA,oBAAY,EAAC1C,uBAAuBE,IAAI,EAAE0B,aAAaC,gBAAgBM,gBAAgBJ,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAER,kBAAkBL,MAAMzB,IAAI,CAACuC,SAAS;IAChL,OAAOd;AACT,GACA,wDAAwD"}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverlayDrawer", {
+    enumerable: true,
+    get: function() {
+        return OverlayDrawer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useOverlayDrawer = require("./useOverlayDrawer");
+const _renderOverlayDrawer = require("./renderOverlayDrawer");
+const _useOverlayDrawerStylesstyles = require("./useOverlayDrawerStyles.styles");
+const OverlayDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useOverlayDrawer.useOverlayDrawer_unstable)(props, ref);
+    (0, _useOverlayDrawerStylesstyles.useOverlayDrawerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerOverlayStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOverlayDrawerStyles_unstable')(state);
+    return (0, _renderOverlayDrawer.renderOverlayDrawer_unstable)(state);
+});
+OverlayDrawer.displayName = 'OverlayDrawer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const OverlayDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useOverlayDrawer_unstable(props, ref);\n    useOverlayDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n    useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n    return renderOverlayDrawer_unstable(state);\n});\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["OverlayDrawer","React","forwardRef","props","ref","state","useOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useCustomStyleHook_unstable","renderOverlayDrawer_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;qCACqB;kCACF;qCACG;8CACG;AAGrC,MAAMA,gBAAgB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACpE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,6DAA+B,EAACF;IAChCG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/DG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/D,OAAOI,IAAAA,iDAA4B,EAACJ;AACxC;AACAL,cAAcU,WAAW,GAAG"}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverlayDrawerSurface", {
+    enumerable: true,
+    get: function() {
+        return OverlayDrawerSurface;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactdialog = require("@fluentui/react-dialog");
+const _useOverlayDrawerSurfaceStylesstyles = require("./useOverlayDrawerSurfaceStyles.styles");
+const OverlayDrawerSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const dialogSurfaceState = (0, _reactdialog.useDialogSurface_unstable)(props, ref);
+    const dialogSurfaceContextValues = (0, _reactdialog.useDialogSurfaceContextValues_unstable)(dialogSurfaceState);
+    (0, _useOverlayDrawerSurfaceStylesstyles.useOverlayDrawerSurfaceStyles_unstable)(dialogSurfaceState);
+    return (0, _reactdialog.renderDialogSurface_unstable)(dialogSurfaceState, dialogSurfaceContextValues);
+});
+OverlayDrawerSurface.displayName = 'OverlayDrawerSurface';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawerSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from '@fluentui/react-dialog';\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\n/**\n * @internal\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */ export const OverlayDrawerSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const dialogSurfaceState = useDialogSurface_unstable(props, ref);\n    const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n    useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n    return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["OverlayDrawerSurface","React","forwardRef","props","ref","dialogSurfaceState","useDialogSurface_unstable","dialogSurfaceContextValues","useDialogSurfaceContextValues_unstable","useOverlayDrawerSurfaceStyles_unstable","renderDialogSurface_unstable","displayName"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;6BACyF;qDACzD;AAI5C,MAAMA,uBAAuB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,qBAAqBC,IAAAA,sCAAyB,EAACH,OAAOC;IAC5D,MAAMG,6BAA6BC,IAAAA,mDAAsC,EAACH;IAC1EI,IAAAA,2EAAsC,EAACJ;IACvC,OAAOK,IAAAA,yCAA4B,EAACL,oBAAoBE;AAC5D;AACAP,qBAAqBW,WAAW,GAAG"}

package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./OverlayDrawerSurface"), exports);
+_export_star._(require("./OverlayDrawerSurface.types"), exports);

package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './OverlayDrawerSurface';\nexport * from './OverlayDrawerSurface.types';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA"}

package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    OverlayDrawerSurfaceClassNames: function() {
+        return OverlayDrawerSurfaceClassNames;
+    },
+    useOverlayDrawerSurfaceStyles_unstable: function() {
+        return useOverlayDrawerSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const OverlayDrawerSurfaceClassNames = {
+    root: 'fui-OverlayDrawerSurface',
+    backdrop: 'fui-OverlayDrawerSurface__backdrop'
+};
+/**
+ * Styles for the backdrop slot
+ */ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rivxbo", "r1trjn1z", [
+    ".rivxbo{top:0px;right:0px;bottom:0px;left:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}",
+    ".r1trjn1z{top:0px;left:0px;bottom:0px;right:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}"
+]);
+const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
+    nested: {
+        De3pzq: "f1c21dwh"
+    }
+}, {
+    d: [
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}"
+    ]
+});
+const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
+    const backdropResetStyles = useBackdropResetStyles();
+    const backdropStyles = useBackdropStyles();
+    if (state.backdrop) {
+        state.backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+    }
+    return state;
+}; //# sourceMappingURL=useOverlayDrawerSurfaceStyles.styles.js.map

package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const OverlayDrawerSurfaceClassNames = {\n  root: 'fui-OverlayDrawerSurface',\n  backdrop: 'fui-OverlayDrawerSurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = /*#__PURE__*/__resetStyles(\"rivxbo\", \"r1trjn1z\", [\".rivxbo{top:0px;right:0px;bottom:0px;left:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}\", \".r1trjn1z{top:0px;left:0px;bottom:0px;right:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}\"]);\nconst useBackdropStyles = /*#__PURE__*/__styles({\n  nested: {\n    De3pzq: \"f1c21dwh\"\n  }\n}, {\n  d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\"]\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = state => {\n  const backdropResetStyles = useBackdropResetStyles();\n  const backdropStyles = useBackdropStyles();\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useOverlayDrawerSurfaceStyles.styles.js.map"],"names":["OverlayDrawerSurfaceClassNames","useOverlayDrawerSurfaceStyles_unstable","root","backdrop","useBackdropResetStyles","__resetStyles","useBackdropStyles","__styles","nested","De3pzq","d","state","backdropResetStyles","backdropStyles","className","mergeClasses","isNestedDialog"],"mappings":";;;;;;;;;;;IAEaA,8BAA8B;eAA9BA;;IAkBAC,sCAAsC;eAAtCA;;;uBApBqD;AAE3D,MAAMD,iCAAiC;IAC5CE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,yBAAyB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,UAAU,YAAY;IAAC;IAAsG;CAAuG;AAC9R,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC9CC,QAAQ;QACNC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAiE;AACvE;AAIO,MAAMT,yCAAyCU,CAAAA;IACpD,MAAMC,sBAAsBR;IAC5B,MAAMS,iBAAiBP;IACvB,IAAIK,MAAMR,QAAQ,EAAE;QAClBQ,MAAMR,QAAQ,CAACW,SAAS,GAAGC,IAAAA,mBAAY,EAACH,qBAAqBD,MAAMK,cAAc,IAAIH,eAAeL,MAAM,EAAEG,MAAMR,QAAQ,CAACW,SAAS;IACtI;IACA,OAAOH;AACT,GACA,gEAAgE"}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./OverlayDrawer"), exports);
+_export_star._(require("./OverlayDrawer.types"), exports);
+_export_star._(require("./renderOverlayDrawer"), exports);
+_export_star._(require("./useOverlayDrawer"), exports);
+_export_star._(require("./useOverlayDrawerStyles.styles"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './OverlayDrawer';\nexport * from './OverlayDrawer.types';\nexport * from './renderOverlayDrawer';\nexport * from './useOverlayDrawer';\nexport * from './useOverlayDrawerStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderOverlayDrawer_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderOverlayDrawer_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderOverlayDrawer_unstable = (state)=>{
+    if (!state.motion.canRender) {
+        return null;
+    }
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dialog, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderOverlayDrawer.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of OverlayDrawer\n */ export const renderOverlayDrawer_unstable = (state)=>{\n    if (!state.motion.canRender) {\n        return null;\n    }\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.dialog, {\n        children: /*#__PURE__*/ _jsx(state.root, {})\n    });\n};\n"],"names":["renderOverlayDrawer_unstable","state","motion","canRender","assertSlots","_jsx","dialog","children","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,MAAMA,+BAA+B,CAACC;IAC7C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QACzB,OAAO;IACX;IACAC,IAAAA,2BAAW,EAACH;IACZ,OAAO,WAAW,GAAGI,IAAAA,eAAI,EAACJ,MAAMK,MAAM,EAAE;QACpCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACJ,MAAMO,IAAI,EAAE,CAAC;IAC9C;AACJ"}

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverlayDrawer_unstable", {
+    enumerable: true,
+    get: function() {
+        return useOverlayDrawer_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactdialog = require("@fluentui/react-dialog");
+const _reactmotionpreview = require("@fluentui/react-motion-preview");
+const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
+const _OverlayDrawerSurface = require("./OverlayDrawerSurface");
+const useOverlayDrawer_unstable = (props, ref)=>{
+    const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
+    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
+    const motion = (0, _reactmotionpreview.useMotion)(open);
+    const backdropProps = _reactutilities.slot.resolveShorthand(props.backdrop);
+    const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
+    const root = _reactutilities.slot.always({
+        ...props,
+        backdrop: hasCustomBackdrop ? {
+            ...backdropProps
+        } : null
+    }, {
+        elementType: _OverlayDrawerSurface.OverlayDrawerSurface,
+        defaultProps: {
+            ref: (0, _reactutilities.useMergedRefs)(ref, motion.ref)
+        }
+    });
+    const dialog = _reactutilities.slot.always({
+        open: true,
+        defaultOpen,
+        onOpenChange,
+        inertTrapFocus,
+        modalType,
+        /**
+       * children is not needed here because we construct the children in the render function,
+       * but it's required by DialogProps
+       */ children: null
+    }, {
+        elementType: _reactdialog.Dialog
+    });
+    return {
+        components: {
+            root: _OverlayDrawerSurface.OverlayDrawerSurface,
+            dialog: _reactdialog.Dialog
+        },
+        root,
+        dialog,
+        size,
+        position,
+        motion
+    };
+};

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

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

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

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    overlayDrawerClassNames: function() {
+        return overlayDrawerClassNames;
+    },
+    useOverlayDrawerStyles_unstable: function() {
+        return useOverlayDrawerStyles_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
+const _reactmotionpreview = require("@fluentui/react-motion-preview");
+const overlayDrawerClassNames = {
+    root: 'fui-OverlayDrawer',
+    backdrop: 'fui-OverlayDrawer__backdrop'
+};
+/**
+ * Styles for the root slot
+ */ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("rx0pfxe", "r1hp8xng", [
+    ".rx0pfxe{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;}",
+    ".rx0pfxe:focus{outline-style:none;}",
+    ".rx0pfxe:focus-visible{outline-style:none;}",
+    ".rx0pfxe[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+    ".rx0pfxe[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);}",
+    ".r1hp8xng{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;}",
+    ".r1hp8xng:focus{outline-style:none;}",
+    ".r1hp8xng:focus-visible{outline-style:none;}",
+    ".r1hp8xng[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+    ".r1hp8xng[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
+]);
+const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
+    start: {
+        Bz10aip: "f1d8gkik"
+    },
+    end: {
+        Bz10aip: "f1g0pcr8"
+    }
+}, {
+    d: [
+        ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}",
+        ".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}"
+    ]
+});
+const useDrawerMotionStyles = /*#__PURE__*/ (0, _react1.__styles)({
+    "default": {
+        abs64n: "fk73vx1",
+        E5pizo: "ff88big",
+        Bmy1vo4: "f1neo61",
+        Es3by: "f1ytgekk"
+    },
+    enter: {
+        abs64n: "f5p0z4x",
+        Bz10aip: "f87uvqx",
+        E5pizo: "f10nrhrw"
+    }
+}, {
+    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);}"
+    ]
+});
+/**
+ * Styles for the backdrop slot
+ */ const useBackdropMotionStyles = /*#__PURE__*/ (0, _react1.__styles)({
+    "default": {
+        abs64n: "fk73vx1",
+        Bmy1vo4: "f13u1uyl",
+        Bkqvd7p: "f17wnm97",
+        Es3by: "f1gqqdtu"
+    },
+    enter: {
+        abs64n: "f5p0z4x"
+    }
+}, {
+    d: [
+        ".fk73vx1{opacity:0;}",
+        ".f13u1uyl{transition-property:opacity;}",
+        ".f17wnm97{transition-timing-function:var(--curveEasyEase);}",
+        ".f1gqqdtu{will-change:opacity;}",
+        ".f5p0z4x{opacity:1;}"
+    ]
+});
+const useOverlayDrawerStyles_unstable = (state)=>{
+    const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
+    const resetStyles = useDrawerResetStyles();
+    const rootStyles = useDrawerRootStyles();
+    const durationStyles = (0, _useDrawerBaseStylesstyles.useDrawerDurationStyles)();
+    const drawerMotionClassNames = (0, _reactmotionpreview.useMotionClassNames)(state.motion, useDrawerMotionStyles());
+    const backdropMotionClassNames = (0, _reactmotionpreview.useMotionClassNames)(state.motion, useBackdropMotionStyles());
+    const backdrop = state.root.backdrop;
+    state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);
+    if (backdrop) {
+        backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], backdrop.className);
+    }
+    return state;
+}; //# sourceMappingURL=useOverlayDrawerStyles.styles.js.map

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

@@ -0,0 +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(\"rx0pfxe\", \"r1hp8xng\", [\".rx0pfxe{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;}\", \".rx0pfxe:focus{outline-style:none;}\", \".rx0pfxe:focus-visible{outline-style:none;}\", \".rx0pfxe[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rx0pfxe[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);}\", \".r1hp8xng{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;}\", \".r1hp8xng:focus{outline-style:none;}\", \".r1hp8xng:focus-visible{outline-style:none;}\", \".r1hp8xng[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1hp8xng[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);}\"]);\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","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;;IAoDAC,+BAA+B;eAA/BA;;;;iEA1DU;wBAC+B;2CAG+C;oCACjE;AAC7B,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,WAAW,YAAY;IAAC;IAA2V;IAAuC;IAA+C;IAAgK;IAAkvB;IAA4V;IAAwC;IAAgD;IAAiK;CAAkvB;AAC1tF,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,MAAMV,kCAAkCmB,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAcnB;IACpB,MAAMoB,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,MAAMf,WAAWiB,MAAMlB,IAAI,CAACC,QAAQ;IACpCiB,MAAMlB,IAAI,CAAC6B,SAAS,GAAGC,IAAAA,oBAAY,EAAChC,wBAAwBE,IAAI,EAAEmB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAEN,wBAAwBP,MAAMlB,IAAI,CAAC6B,SAAS;IACvK,IAAI5B,UAAU;QACZA,SAAS4B,SAAS,GAAGC,IAAAA,oBAAY,EAAChC,wBAAwBG,QAAQ,EAAE2B,0BAA0BL,cAAc,CAACL,MAAMc,IAAI,CAAC,EAAE/B,SAAS4B,SAAS;IAC9I;IACA,OAAOX;AACT,GACA,yDAAyD"}

package/lib-commonjs/e2e/DrawerShared.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "testDrawerBaseScenarios", {
+    enumerable: true,
+    get: function() {
+        return testDrawerBaseScenarios;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@cypress/react");
+const _reactprovider = require("@fluentui/react-provider");
+const _reacttheme = require("@fluentui/react-theme");
+const mountFluent = (element)=>{
+    (0, _react1.mount)(/*#__PURE__*/ _react.createElement(_reactprovider.FluentProvider, {
+        theme: _reacttheme.webLightTheme
+    }, element));
+};
+function testDrawerBaseScenarios(Component) {
+    describe('basic functionality', ()=>{
+        it('should not render any element when closed', ()=>{
+            mountFluent(/*#__PURE__*/ _react.createElement(Component, {
+                id: "drawer"
+            }));
+            cy.get('#drawer').should('not.exist');
+        });
+        it('should render an element when opened', ()=>{
+            mountFluent(/*#__PURE__*/ _react.createElement(Component, {
+                id: "drawer",
+                open: true
+            }));
+            cy.get('#drawer').should('exist');
+        });
+        it('should render children content', ()=>{
+            const content = 'Test the renderization';
+            mountFluent(/*#__PURE__*/ _react.createElement(Component, {
+                id: "drawer",
+                open: true
+            }, content));
+            cy.get('#drawer').contains(content);
+        });
+        it('should toggle visibility on open prop change', ()=>{
+            const ExampleDrawer = ()=>{
+                const [open, setOpen] = _react.useState(false);
+                return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(Component, {
+                    id: "drawer",
+                    open: open
+                }), /*#__PURE__*/ _react.createElement("button", {
+                    id: "button",
+                    onClick: ()=>setOpen(true)
+                }, "Open"));
+            };
+            mountFluent(/*#__PURE__*/ _react.createElement(ExampleDrawer, null));
+            cy.get('#drawer').should('not.exist');
+            cy.get('#button').click();
+            cy.get('#drawer').should('exist');
+        });
+    });
+    describe('size prop', ()=>{
+        const sizes = {
+            small: 320,
+            medium: 592,
+            large: 940,
+            full: 1000
+        };
+        Object.entries(sizes).forEach(([size, width])=>{
+            const sizeProp = size;
+            it(`should have correct size when size is ${size}`, ()=>{
+                mountFluent(/*#__PURE__*/ _react.createElement(Component, {
+                    size: sizeProp,
+                    id: "drawer",
+                    open: true
+                }));
+                cy.viewport(1000, 1000);
+                cy.get('#drawer').should('have.css', 'width', width + 'px');
+                cy.get('#drawer').invoke('outerWidth').should('equal', width);
+            });
+        });
+        it('width should not be bigger than viewport', ()=>{
+            mountFluent(/*#__PURE__*/ _react.createElement(Component, {
+                id: "drawer",
+                open: true
+            }));
+            cy.viewport(319, 319);
+            cy.get('#drawer').should('have.css', 'width', '319px');
+            cy.get('#drawer').invoke('outerWidth').should('equal', 319);
+        });
+        it('should have custom size', ()=>{
+            mountFluent(/*#__PURE__*/ _react.createElement(Component, {
+                id: "drawer",
+                open: true,
+                style: {
+                    width: '200px'
+                }
+            }));
+            cy.get('#drawer').should('have.css', 'width', '200px');
+            cy.get('#drawer').invoke('outerWidth').should('equal', 200);
+        });
+    });
+    describe('position prop', ()=>{
+        const positions = {
+            start: 'left',
+            end: 'right'
+        };
+        Object.entries(positions).forEach(([position, side])=>{
+            const positionProp = position;
+            it(`should have correct position when position is ${position}`, ()=>{
+                mountFluent(/*#__PURE__*/ _react.createElement(Component, {
+                    position: positionProp,
+                    id: "drawer",
+                    open: true
+                }));
+                cy.get('#drawer').should('have.css', side, '0px');
+            });
+        });
+    });
+}