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

package/lib/shared/useDrawerBaseStyles.styles.js

@@ -0,0 +1,96 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * CSS variable names used internally for uniform styling in Drawer.
+ */
+export const drawerCSSVars = {
+  drawerSizeVar: '--fui-Drawer--size'
+};
+/**
+ * Default shared styles for the Drawer component
+ */
+export const drawerDefaultStyles = {
+  ... /*#__PURE__*/shorthands.overflow('hidden'),
+  width: `var(${drawerCSSVars.drawerSizeVar})`,
+  maxWidth: '100vw',
+  height: 'auto',
+  maxHeight: '100vh',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  backgroundColor: tokens.colorNeutralBackground1,
+  color: tokens.colorNeutralForeground1
+};
+/**
+ * Shared dynamic styles for the Drawer component
+ */
+const useDrawerStyles = /*#__PURE__*/__styles({
+  entering: {
+    Bkqvd7p: "f18ad807"
+  },
+  exiting: {
+    Bkqvd7p: "f1mfizis"
+  },
+  reducedMotion: {
+    Hwfdqs: "f5e8c63"
+  },
+  start: {
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    vrafjx: ["fcdblym", "fjik90z"],
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"],
+    j35jbq: ["fvfyk4", "frppm18"]
+  },
+  end: {
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    wvpqe5: ["fjik90z", "fcdblym"],
+    zhjwy3: ["fjscplz", "f1gn591s"],
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    oyh7mz: ["frppm18", "fvfyk4"]
+  },
+  small: {
+    Bjr0ffy: "f1exhnwo"
+  },
+  medium: {
+    Bjr0ffy: "fqofjzu"
+  },
+  large: {
+    Bjr0ffy: "fce6y3m"
+  },
+  full: {
+    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;}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }]]
+});
+export const useDrawerDurationStyles = /*#__PURE__*/__styles({
+  small: {
+    B3o57yi: "fc397y7"
+  },
+  medium: {
+    B3o57yi: "f78771"
+  },
+  large: {
+    B3o57yi: "f9ymmep"
+  },
+  full: {
+    B3o57yi: "f1loko9l"
+  }
+}, {
+  d: [".fc397y7{transition-duration:var(--durationGentle);}", ".f78771{transition-duration:var(--durationSlow);}", ".f9ymmep{transition-duration:var(--durationSlower);}", ".f1loko9l{transition-duration:var(--durationUltraSlow);}"]
+});
+export const useDrawerBaseClassNames = ({
+  position,
+  size,
+  motion
+}) => {
+  const baseStyles = useDrawerStyles();
+  const durationStyles = useDrawerDurationStyles();
+  return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
+};
+//# sourceMappingURL=useDrawerBaseStyles.styles.js.map

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

@@ -0,0 +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"}

package/lib/shared/useDrawerDefaultProps.js

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

package/lib/shared/useDrawerDefaultProps.js.map

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

package/lib-commonjs/Drawer.js

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

package/lib-commonjs/Drawer.js.map

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

package/lib-commonjs/DrawerBody.js

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

package/lib-commonjs/DrawerBody.js.map

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

package/lib-commonjs/DrawerFooter.js

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

package/lib-commonjs/DrawerFooter.js.map

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

package/lib-commonjs/DrawerHeader.js

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

package/lib-commonjs/DrawerHeader.js.map

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

package/lib-commonjs/DrawerHeaderNavigation.js

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

package/lib-commonjs/DrawerHeaderNavigation.js.map

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

package/lib-commonjs/DrawerHeaderTitle.js

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

package/lib-commonjs/DrawerHeaderTitle.js.map

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

package/lib-commonjs/InlineDrawer.js

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

package/lib-commonjs/InlineDrawer.js.map

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

package/lib-commonjs/OverlayDrawer.js

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

package/lib-commonjs/OverlayDrawer.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,24 +4,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useDrawer_unstable", {
     enumerable: true,
-    get: ()=>useDrawer_unstable
+    get: function() {
+        return useDrawer_unstable;
+    }
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactUtilities = require("@fluentui/react-utilities");
-const _drawerOverlay = require("../DrawerOverlay/DrawerOverlay");
-const _drawerInline = require("../DrawerInline/DrawerInline");
+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 _OverlayDrawer = require("../OverlayDrawer");
+const _InlineDrawer = require("../InlineDrawer");
 const useDrawer_unstable = (props, ref)=>{
-    const { type ='overlay'  } = props;
+    const elementType = props.type === 'inline' ? _InlineDrawer.InlineDrawer : _OverlayDrawer.OverlayDrawer;
     return {
         components: {
-            root: type === 'overlay' ? _drawerOverlay.DrawerOverlay : _drawerInline.DrawerInline
+            root: elementType
         },
-        root: (0, _reactUtilities.resolveShorthand)(props, {
-            required: true,
-            defaultProps: {
-                ref
-            }
+        root: _reactutilities.slot.always(_reactutilities.slot.resolveShorthand({
+            ref,
+            ...props
+        }), {
+            elementType
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline/DrawerInline';\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */ export const useDrawer_unstable = (props, ref)=>{\n    const { type ='overlay'  } = props;\n    return {\n        components: {\n            root: type === 'overlay' ? DrawerOverlay : DrawerInline\n        },\n        root: resolveShorthand(props, {\n            required: true,\n            defaultProps: {\n                ref\n            }\n        })\n    };\n};\n"],"names":["useDrawer_unstable","props","ref","type","components","root","DrawerOverlay","DrawerInline","resolveShorthand","required","defaultProps"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACU;+BACH;8BACD;AASlB,MAAMA,qBAAqB,CAACC,OAAOC,MAAM;IAChD,MAAM,EAAEC,MAAM,UAAS,EAAG,GAAGF;IAC7B,OAAO;QACHG,YAAY;YACRC,MAAMF,SAAS,YAAYG,4BAAa,GAAGC,0BAAY;QAC3D;QACAF,MAAMG,IAAAA,gCAAgB,EAACP,OAAO;YAC1BQ,UAAU,IAAI;YACdC,cAAc;gBACVR;YACJ;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { OverlayDrawer } from '../OverlayDrawer';\nimport { InlineDrawer } from '../InlineDrawer';\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */ export const useDrawer_unstable = (props, ref)=>{\n    const elementType = props.type === 'inline' ? InlineDrawer : OverlayDrawer;\n    return {\n        components: {\n            root: elementType\n        },\n        root: slot.always(slot.resolveShorthand({\n            ref,\n            ...props\n        }), {\n            elementType\n        })\n    };\n};\n"],"names":["useDrawer_unstable","props","ref","elementType","type","InlineDrawer","OverlayDrawer","components","root","slot","always","resolveShorthand"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACF;+BACS;8BACD;AASlB,MAAMA,qBAAqB,CAACC,OAAOC;IAC1C,MAAMC,cAAcF,MAAMG,IAAI,KAAK,WAAWC,0BAAY,GAAGC,4BAAa;IAC1E,OAAO;QACHC,YAAY;YACRC,MAAML;QACV;QACAK,MAAMC,oBAAI,CAACC,MAAM,CAACD,oBAAI,CAACE,gBAAgB,CAAC;YACpCT;YACA,GAAGD,KAAK;QACZ,IAAI;YACAE;QACJ;IACJ;AACJ"}

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

@@ -9,8 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    drawerClassNames: ()=>drawerClassNames,
-    useDrawerStyles_unstable: ()=>useDrawerStyles_unstable
+    drawerClassNames: function() {
+        return drawerClassNames;
+    },
+    useDrawerStyles_unstable: function() {
+        return useDrawerStyles_unstable;
+    }
 });
 const _react = require("@griffel/react");
 const drawerClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const drawerClassNames = {\n  root: 'fui-Drawer'\n};\n/**\n * Apply styling to the Drawer slots based on the state\n */\nexport const useDrawerStyles_unstable = state => {\n  state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerStyles.styles.js.map"],"names":["drawerClassNames","useDrawerStyles_unstable","root","state","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,gBAAgB,MAAhBA;IAMAC,wBAAwB,MAAxBA;;uBAPgB;AACtB,MAAMD,mBAAmB;IAC9BE,MAAM;AACR;AAIO,MAAMD,2BAA2BE,CAAAA,QAAS;IAC/CA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAY,EAACL,iBAAiBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAC/E,OAAOD;AACT,GACA,kDAAkD"}
+{"version":3,"sources":["useDrawerStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const drawerClassNames = {\n  root: 'fui-Drawer'\n};\n/**\n * Apply styling to the Drawer slots based on the state\n */\nexport const useDrawerStyles_unstable = state => {\n  state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerStyles.styles.js.map"],"names":["drawerClassNames","useDrawerStyles_unstable","root","state","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,gBAAgB;eAAhBA;;IAMAC,wBAAwB;eAAxBA;;;uBAPgB;AACtB,MAAMD,mBAAmB;IAC9BE,MAAM;AACR;AAIO,MAAMD,2BAA2BE,CAAAA;IACtCA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAY,EAACL,iBAAiBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAC/E,OAAOD;AACT,GACA,kDAAkD"}

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

@@ -4,18 +4,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DrawerBody", {
     enumerable: true,
-    get: ()=>DrawerBody
+    get: function() {
+        return DrawerBody;
+    }
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useDrawerBody = require("./useDrawerBody");
 const _renderDrawerBody = require("./renderDrawerBody");
-const _useDrawerBodyStylesStyles = require("./useDrawerBodyStyles.styles");
-const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const _useDrawerBodyStylesstyles = require("./useDrawerBodyStyles.styles");
 const DrawerBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useDrawerBody.useDrawerBody_unstable)(props, ref);
-    (0, _useDrawerBodyStylesStyles.useDrawerBodyStyles_unstable)(state);
-    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useDrawerBodyStyles_unstable')(state);
+    (0, _useDrawerBodyStylesstyles.useDrawerBodyStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerBodyStyles_unstable')(state);
     return (0, _renderDrawerBody.renderDrawerBody_unstable)(state);
 });
 DrawerBody.displayName = 'DrawerBody';

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerBody_unstable } from './useDrawerBody';\nimport { renderDrawerBody_unstable } from './renderDrawerBody';\nimport { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * DrawerBody provides with a container for the main content of a Drawer.\n */ export const DrawerBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawerBody_unstable(props, ref);\n    useDrawerBodyStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);\n    return renderDrawerBody_unstable(state);\n});\nDrawerBody.displayName = 'DrawerBody';\n"],"names":["DrawerBody","React","forwardRef","props","ref","state","useDrawerBody_unstable","useDrawerBodyStyles_unstable","useCustomStyleHook_unstable","renderDrawerBody_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;+BACgB;kCACG;2CACG;qCACD;AAGjC,MAAMA,aAAa,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACvE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5CG,IAAAA,uDAA4B,EAACF;IAC7BG,IAAAA,gDAA2B,EAAC,gCAAgCH;IAC5D,OAAOI,IAAAA,2CAAyB,EAACJ;AACrC;AACAL,WAAWU,WAAW,GAAG"}
+{"version":3,"sources":["DrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useDrawerBody_unstable } from './useDrawerBody';\nimport { renderDrawerBody_unstable } from './renderDrawerBody';\nimport { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\n/**\n * DrawerBody provides with a container for the main content of a Drawer.\n */ export const DrawerBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawerBody_unstable(props, ref);\n    useDrawerBodyStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);\n    return renderDrawerBody_unstable(state);\n});\nDrawerBody.displayName = 'DrawerBody';\n"],"names":["DrawerBody","React","forwardRef","props","ref","state","useDrawerBody_unstable","useDrawerBodyStyles_unstable","useCustomStyleHook_unstable","renderDrawerBody_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;qCACqB;+BACL;kCACG;2CACG;AAGlC,MAAMA,aAAa,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5CG,IAAAA,uDAA4B,EAACF;IAC7BG,IAAAA,gDAA2B,EAAC,gCAAgCH;IAC5D,OAAOI,IAAAA,2CAAyB,EAACJ;AACrC;AACAL,WAAWU,WAAW,GAAG"}

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

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

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

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

package/lib-commonjs/components/DrawerBody/renderDrawerBody.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "renderDrawerBody_unstable", {
     enumerable: true,
-    get: ()=>renderDrawerBody_unstable
+    get: function() {
+        return renderDrawerBody_unstable;
+    }
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactUtilities = require("@fluentui/react-utilities");
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
 const renderDrawerBody_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root);
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
 };

package/lib-commonjs/components/DrawerBody/renderDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of DrawerBody\n */ export const renderDrawerBody_unstable = (state)=>{\n    const { slots , slotProps  } = getSlots(state);\n    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);\n};\n"],"names":["renderDrawerBody_unstable","state","slots","slotProps","getSlots","React","createElement","root"],"mappings":";;;;+BAIiBA;;aAAAA;;;6DAJM;gCACE;AAGd,MAAMA,4BAA4B,CAACC,QAAQ;IAClD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,wBAAQ,EAACH;IACxC,OAAO,WAAW,GAAGI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI;AACvE"}
+{"version":3,"sources":["renderDrawerBody.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 DrawerBody\n */ export const renderDrawerBody_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {});\n};\n"],"names":["renderDrawerBody_unstable","state","assertSlots","_jsx","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,MAAMA,4BAA4B,CAACC;IAC1CC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,eAAI,EAACF,MAAMG,IAAI,EAAE,CAAC;AAC3C"}

package/lib-commonjs/components/DrawerBody/useDrawerBody.js

@@ -4,19 +4,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useDrawerBody_unstable", {
     enumerable: true,
-    get: ()=>useDrawerBody_unstable
+    get: function() {
+        return useDrawerBody_unstable;
+    }
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactUtilities = require("@fluentui/react-utilities");
+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 useDrawerBody_unstable = (props, ref)=>{
     return {
         components: {
             root: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
-            ref,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib-commonjs/components/DrawerBody/useDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */ export const useDrawerBody_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ref,\n            ...props\n        })\n    };\n};\n"],"names":["useDrawerBody_unstable","props","ref","components","root","getNativeElementProps"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACe;AAS3B,MAAMA,yBAAyB,CAACC,OAAOC,MAAM;IACpD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BH;YACA,GAAGD,KAAK;QACZ;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */ export const useDrawerBody_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useDrawerBody_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","elementType"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FL,KAAKA;YACL,GAAGD,KAAK;QACZ,IAAI;YACAO,aAAa;QACjB;IACJ;AACJ"}