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

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

@@ -4,37 +4,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useDrawerHeaderTitle_unstable", {
     enumerable: true,
-    get: ()=>useDrawerHeaderTitle_unstable
+    get: function() {
+        return useDrawerHeaderTitle_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 _reactDialog = require("@fluentui/react-dialog");
+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 useDrawerHeaderTitle_unstable = (props, ref)=>{
-    const { root: heading , action , components: titleComponents  } = (0, _reactDialog.useDialogTitle_unstable)(props, ref);
+    let heading = _reactutilities.slot.resolveShorthand(props.heading);
+    if (!heading) {
+        heading = {
+            children: props.children
+        };
+    }
+    var _heading_as;
     return {
         components: {
             root: 'div',
-            heading: titleComponents.root,
-            action: titleComponents.action
+            heading: 'h2',
+            action: 'div'
         },
-        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
             ref,
             ...props
         }), {
             elementType: 'div'
         }),
-        heading: _reactUtilities.slot.optional(props.heading, {
-            renderByDefault: true,
+        heading: _reactutilities.slot.optional((0, _reactutilities.getNativeElementProps)((_heading_as = heading.as) !== null && _heading_as !== void 0 ? _heading_as : 'h2', heading), {
             defaultProps: {
-                ...heading,
-                className: undefined
+                children: props.children
             },
-            elementType: titleComponents.root
+            renderByDefault: true,
+            elementType: 'h2'
         }),
-        action: _reactUtilities.slot.optional(props.action, {
-            defaultProps: action,
-            elementType: titleComponents.action
+        action: _reactutilities.slot.optional(props.action, {
+            elementType: 'div'
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogTitle_unstable } from '@fluentui/react-dialog';\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{\n    const { root: heading , action , components: titleComponents  } = useDialogTitle_unstable(props, ref);\n    return {\n        components: {\n            root: 'div',\n            heading: titleComponents.root,\n            action: titleComponents.action\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        heading: slot.optional(props.heading, {\n            renderByDefault: true,\n            defaultProps: {\n                ...heading,\n                className: undefined\n            },\n            elementType: titleComponents.root\n        }),\n        action: slot.optional(props.action, {\n            defaultProps: action,\n            elementType: titleComponents.action\n        })\n    };\n};\n"],"names":["useDrawerHeaderTitle_unstable","props","ref","root","heading","action","components","titleComponents","useDialogTitle_unstable","slot","always","getNativeElementProps","elementType","optional","renderByDefault","defaultProps","className","undefined"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;gCACqB;6BACJ;AAS7B,MAAMA,gCAAgC,CAACC,OAAOC,MAAM;IAC3D,MAAM,EAAEC,MAAMC,QAAO,EAAGC,OAAM,EAAGC,YAAYC,gBAAe,EAAG,GAAGC,IAAAA,oCAAuB,EAACP,OAAOC;IACjG,OAAO;QACHI,YAAY;YACRH,MAAM;YACNC,SAASG,gBAAgBJ,IAAI;YAC7BE,QAAQE,gBAAgBF,MAAM;QAClC;QACAF,MAAMM,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CT;YACA,GAAGD,KAAK;QACZ,IAAI;YACAW,aAAa;QACjB;QACAR,SAASK,oBAAI,CAACI,QAAQ,CAACZ,MAAMG,OAAO,EAAE;YAClCU,iBAAiB,IAAI;YACrBC,cAAc;gBACV,GAAGX,OAAO;gBACVY,WAAWC;YACf;YACAL,aAAaL,gBAAgBJ,IAAI;QACrC;QACAE,QAAQI,oBAAI,CAACI,QAAQ,CAACZ,MAAMI,MAAM,EAAE;YAChCU,cAAcV;YACdO,aAAaL,gBAAgBF,MAAM;QACvC;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerHeaderTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{\n    let heading = slot.resolveShorthand(props.heading);\n    if (!heading) {\n        heading = {\n            children: props.children\n        };\n    }\n    var _heading_as;\n    return {\n        components: {\n            root: 'div',\n            heading: 'h2',\n            action: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        heading: slot.optional(getNativeElementProps((_heading_as = heading.as) !== null && _heading_as !== void 0 ? _heading_as : 'h2', heading), {\n            defaultProps: {\n                children: props.children\n            },\n            renderByDefault: true,\n            elementType: 'h2'\n        }),\n        action: slot.optional(props.action, {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useDrawerHeaderTitle_unstable","props","ref","heading","slot","resolveShorthand","children","_heading_as","components","root","action","always","getNativeElementProps","elementType","optional","as","defaultProps","renderByDefault"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACqB;AASjC,MAAMA,gCAAgC,CAACC,OAAOC;IACrD,IAAIC,UAAUC,oBAAI,CAACC,gBAAgB,CAACJ,MAAME,OAAO;IACjD,IAAI,CAACA,SAAS;QACVA,UAAU;YACNG,UAAUL,MAAMK,QAAQ;QAC5B;IACJ;IACA,IAAIC;IACJ,OAAO;QACHC,YAAY;YACRC,MAAM;YACNN,SAAS;YACTO,QAAQ;QACZ;QACAD,MAAML,oBAAI,CAACO,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CV;YACA,GAAGD,KAAK;QACZ,IAAI;YACAY,aAAa;QACjB;QACAV,SAASC,oBAAI,CAACU,QAAQ,CAACF,IAAAA,qCAAqB,EAAC,AAACL,CAAAA,cAAcJ,QAAQY,EAAE,AAAD,MAAO,QAAQR,gBAAgB,KAAK,IAAIA,cAAc,MAAMJ,UAAU;YACvIa,cAAc;gBACVV,UAAUL,MAAMK,QAAQ;YAC5B;YACAW,iBAAiB;YACjBJ,aAAa;QACjB;QACAH,QAAQN,oBAAI,CAACU,QAAQ,CAACb,MAAMS,MAAM,EAAE;YAChCG,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js

@@ -9,11 +9,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    drawerHeaderTitleClassNames: ()=>drawerHeaderTitleClassNames,
-    useDrawerHeaderTitleStyles_unstable: ()=>useDrawerHeaderTitleStyles_unstable
+    drawerHeaderTitleClassNames: function() {
+        return drawerHeaderTitleClassNames;
+    },
+    useDrawerHeaderTitleStyles_unstable: function() {
+        return useDrawerHeaderTitleStyles_unstable;
+    }
 });
 const _react = require("@griffel/react");
-const _reactDialog = require("@fluentui/react-dialog");
+const _reactdialog = require("@fluentui/react-dialog");
 const drawerHeaderTitleClassNames = {
     root: 'fui-DrawerHeaderTitle',
     heading: 'fui-DrawerHeaderTitle__heading',
@@ -21,7 +25,7 @@ const drawerHeaderTitleClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
         mc9l5x: "f22iagw",
         Brf1p80: "f1869bpl",
@@ -46,8 +50,8 @@ const drawerHeaderTitleClassNames = {
 });
 const useDrawerHeaderTitleStyles_unstable = (state)=>{
     const styles = useStyles();
-    const { heading: root = {} , action , components  } = state;
-    (0, _reactDialog.useDialogTitleStyles_unstable)({
+    const { heading: root = {}, action, components } = state;
+    (0, _reactdialog.useDialogTitleStyles_unstable)({
         components: {
             root: components.heading,
             action: components.action

package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n  root: 'fui-DrawerHeaderTitle',\n  heading: 'fui-DrawerHeaderTitle__heading',\n  action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Brf1p80: \"f1869bpl\",\n    Bt984gj: \"f122n59\",\n    i8kkvl: \"fsnqrgy\"\n  },\n  action: {\n    t21cq0: [\"faqnl2i\", \"fd75udd\"]\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f1869bpl{justify-content:space-between;}\", \".f122n59{align-items:center;}\", \".fsnqrgy{column-gap:var(--spacingHorizontalS);}\", \".faqnl2i{margin-right:calc(var(--spacingHorizontalS) * -1);}\", \".fd75udd{margin-left:calc(var(--spacingHorizontalS) * -1);}\"]\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = state => {\n  const styles = useStyles();\n  const {\n    heading: root = {},\n    action,\n    components\n  } = state;\n  useDialogTitleStyles_unstable({\n    components: {\n      root: components.heading,\n      action: components.action\n    },\n    root,\n    action\n  });\n  state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n  if (state.heading) {\n    state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n  }\n  if (state.action) {\n    state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDrawerHeaderTitleStyles.styles.js.map"],"names":["drawerHeaderTitleClassNames","useDrawerHeaderTitleStyles_unstable","root","heading","action","useStyles","__styles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","state","styles","components","useDialogTitleStyles_unstable","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,2BAA2B,MAA3BA;IAwBAC,mCAAmC,MAAnCA;;uBA3B0B;6BACO;AAEvC,MAAMD,8BAA8B;IACzCE,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCJ,MAAM;QACJK,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;IACAN,QAAQ;QACNO,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDC,GAAG;QAAC;QAA2B;QAA6C;QAAiC;QAAmD;QAAgE;KAA8D;AAChS;AAIO,MAAMX,sCAAsCY,CAAAA,QAAS;IAC1D,MAAMC,SAAST;IACf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,CAAA,EAClBE,OAAM,EACNW,WAAU,EACX,GAAGF;IACJG,IAAAA,0CAA6B,EAAC;QAC5BD,YAAY;YACVb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAM;QAC3B;QACAF;QACAE;IACF;IACAS,MAAMX,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,4BAA4BE,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACe,SAAS;IACvG,IAAIJ,MAAMV,OAAO,EAAE;QACjBU,MAAMV,OAAO,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,4BAA4BG,OAAO,EAAEU,MAAMV,OAAO,CAACc,SAAS;IACrG,CAAC;IACD,IAAIJ,MAAMT,MAAM,EAAE;QAChBS,MAAMT,MAAM,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,4BAA4BI,MAAM,EAAEU,OAAOV,MAAM,EAAES,MAAMT,MAAM,CAACa,SAAS;IACjH,CAAC;IACD,OAAOJ;AACT,GACA,6DAA6D"}
+{"version":3,"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n  root: 'fui-DrawerHeaderTitle',\n  heading: 'fui-DrawerHeaderTitle__heading',\n  action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Brf1p80: \"f1869bpl\",\n    Bt984gj: \"f122n59\",\n    i8kkvl: \"fsnqrgy\"\n  },\n  action: {\n    t21cq0: [\"faqnl2i\", \"fd75udd\"]\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f1869bpl{justify-content:space-between;}\", \".f122n59{align-items:center;}\", \".fsnqrgy{column-gap:var(--spacingHorizontalS);}\", \".faqnl2i{margin-right:calc(var(--spacingHorizontalS) * -1);}\", \".fd75udd{margin-left:calc(var(--spacingHorizontalS) * -1);}\"]\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = state => {\n  const styles = useStyles();\n  const {\n    heading: root = {},\n    action,\n    components\n  } = state;\n  useDialogTitleStyles_unstable({\n    components: {\n      root: components.heading,\n      action: components.action\n    },\n    root,\n    action\n  });\n  state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n  if (state.heading) {\n    state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n  }\n  if (state.action) {\n    state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDrawerHeaderTitleStyles.styles.js.map"],"names":["drawerHeaderTitleClassNames","useDrawerHeaderTitleStyles_unstable","root","heading","action","useStyles","__styles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","state","styles","components","useDialogTitleStyles_unstable","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,2BAA2B;eAA3BA;;IAwBAC,mCAAmC;eAAnCA;;;uBA3B0B;6BACO;AAEvC,MAAMD,8BAA8B;IACzCE,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCJ,MAAM;QACJK,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;IACAN,QAAQ;QACNO,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDC,GAAG;QAAC;QAA2B;QAA6C;QAAiC;QAAmD;QAAgE;KAA8D;AAChS;AAIO,MAAMX,sCAAsCY,CAAAA;IACjD,MAAMC,SAAST;IACf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,EAClBE,MAAM,EACNW,UAAU,EACX,GAAGF;IACJG,IAAAA,0CAA6B,EAAC;QAC5BD,YAAY;YACVb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAM;QAC3B;QACAF;QACAE;IACF;IACAS,MAAMX,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,4BAA4BE,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACe,SAAS;IACvG,IAAIJ,MAAMV,OAAO,EAAE;QACjBU,MAAMV,OAAO,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,4BAA4BG,OAAO,EAAEU,MAAMV,OAAO,CAACc,SAAS;IACrG;IACA,IAAIJ,MAAMT,MAAM,EAAE;QAChBS,MAAMT,MAAM,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,4BAA4BI,MAAM,EAAEU,OAAOV,MAAM,EAAES,MAAMT,MAAM,CAACa,SAAS;IACjH;IACA,OAAOJ;AACT,GACA,6DAA6D"}

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

@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DrawerInline", {
     enumerable: true,
-    get: ()=>DrawerInline
+    get: function() {
+        return DrawerInline;
+    }
 });
-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 _useDrawerInline = require("./useDrawerInline");
 const _renderDrawerInline = require("./renderDrawerInline");
-const _useDrawerInlineStylesStyles = require("./useDrawerInlineStyles.styles");
+const _useDrawerInlineStylesstyles = require("./useDrawerInlineStyles.styles");
 const DrawerInline = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useDrawerInline.useDrawerInline_unstable)(props, ref);
-    (0, _useDrawerInlineStylesStyles.useDrawerInlineStyles_unstable)(state);
+    (0, _useDrawerInlineStylesstyles.useDrawerInlineStyles_unstable)(state);
     return (0, _renderDrawerInline.renderDrawerInline_unstable)(state);
 });
 DrawerInline.displayName = 'DrawerInline';

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerInline_unstable } from './useDrawerInline';\nimport { renderDrawerInline_unstable } from './renderDrawerInline';\nimport { useDrawerInlineStyles_unstable } from './useDrawerInlineStyles.styles';\n/**\n * DrawerInline is often used for navigation that is not dissmissable. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */ export const DrawerInline = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawerInline_unstable(props, ref);\n    useDrawerInlineStyles_unstable(state);\n    return renderDrawerInline_unstable(state);\n});\nDrawerInline.displayName = 'DrawerInline';\n"],"names":["DrawerInline","React","forwardRef","props","ref","state","useDrawerInline_unstable","useDrawerInlineStyles_unstable","renderDrawerInline_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;iCACkB;oCACG;6CACG;AAIpC,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACzE,MAAMC,QAAQC,IAAAA,yCAAwB,EAACH,OAAOC;IAC9CG,IAAAA,2DAA8B,EAACF;IAC/B,OAAOG,IAAAA,+CAA2B,EAACH;AACvC;AACAL,aAAaS,WAAW,GAAG"}
+{"version":3,"sources":["DrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerInline_unstable } from './useDrawerInline';\nimport { renderDrawerInline_unstable } from './renderDrawerInline';\nimport { useDrawerInlineStyles_unstable } from './useDrawerInlineStyles.styles';\n/**\n * DrawerInline is often used for navigation that is not dismissible. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */ export const DrawerInline = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawerInline_unstable(props, ref);\n    useDrawerInlineStyles_unstable(state);\n    return renderDrawerInline_unstable(state);\n});\nDrawerInline.displayName = 'DrawerInline';\n"],"names":["DrawerInline","React","forwardRef","props","ref","state","useDrawerInline_unstable","useDrawerInlineStyles_unstable","renderDrawerInline_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;iCACkB;oCACG;6CACG;AAIpC,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnE,MAAMC,QAAQC,IAAAA,yCAAwB,EAACH,OAAOC;IAC9CG,IAAAA,2DAA8B,EAACF;IAC/B,OAAOG,IAAAA,+CAA2B,EAACH;AACvC;AACAL,aAAaS,WAAW,GAAG"}

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

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

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

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

package/lib-commonjs/components/DrawerInline/renderDrawerInline.js

@@ -1,17 +1,19 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
 Object.defineProperty(exports, "renderDrawerInline_unstable", {
     enumerable: true,
-    get: ()=>renderDrawerInline_unstable
+    get: function() {
+        return renderDrawerInline_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 renderDrawerInline_unstable = (state)=>{
-    (0, _reactUtilities.assertSlots)(state);
-    if (!state.open) {
+    if (!state.motion.canRender) {
         return null;
     }
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null);
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
 };

package/lib-commonjs/components/DrawerInline/renderDrawerInline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerInline.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of DrawerInline\n */ export const renderDrawerInline_unstable = (state)=>{\n    assertSlots(state);\n    if (!state.open) {\n        return null;\n    }\n    return /*#__PURE__*/ createElement(state.root, null);\n};\n"],"names":["renderDrawerInline_unstable","state","assertSlots","open","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,8BAA8B,CAACC,QAAQ;IACpDC,IAAAA,2BAAW,EAACD;IACZ,IAAI,CAACA,MAAME,IAAI,EAAE;QACb,OAAO,IAAI;IACf,CAAC;IACD,OAAO,WAAW,GAAGC,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAE,IAAI;AACvD"}
+{"version":3,"sources":["renderDrawerInline.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of DrawerInline\n */ export const renderDrawerInline_unstable = (state)=>{\n    if (!state.motion.canRender) {\n        return null;\n    }\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {});\n};\n"],"names":["renderDrawerInline_unstable","state","motion","canRender","assertSlots","_jsx","root"],"mappings":"AAAA,0BAA0B,GAAG,iDAAiD;;;;+BAI7DA;;;eAAAA;;;4BAJ4F;gCACjF;AAGjB,MAAMA,8BAA8B,CAACC;IAC5C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QACzB,OAAO;IACX;IACAC,IAAAA,2BAAW,EAACH;IACZ,OAAO,WAAW,GAAGI,IAAAA,eAAI,EAACJ,MAAMK,IAAI,EAAE,CAAC;AAC3C"}

package/lib-commonjs/components/DrawerInline/useDrawerInline.js

@@ -4,33 +4,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useDrawerInline_unstable", {
     enumerable: true,
-    get: ()=>useDrawerInline_unstable
+    get: function() {
+        return useDrawerInline_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 _getDefaultDrawerProps = require("../../util/getDefaultDrawerProps");
+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 _reactmotionpreview = require("@fluentui/react-motion-preview");
+const _useDrawerDefaultProps = require("../../util/useDrawerDefaultProps");
 const useDrawerInline_unstable = (props, ref)=>{
-    const { open: initialOpen , defaultOpen , size , position  } = (0, _getDefaultDrawerProps.getDefaultDrawerProps)(props);
-    const { separator =false  } = props;
-    const [open] = (0, _reactUtilities.useControllableState)({
-        state: initialOpen,
-        defaultState: defaultOpen,
+    const { size, position, ...defaultProps } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
+    const { separator = false } = props;
+    const [open] = (0, _reactutilities.useControllableState)({
+        state: defaultProps.open,
+        defaultState: defaultProps.defaultOpen,
         initialState: false
     });
+    const motion = (0, _reactmotionpreview.useMotion)(open);
     return {
         components: {
             root: 'div'
         },
-        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
-            ref,
-            ...props
+        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+            ...props,
+            ref: (0, _reactutilities.useMergedRefs)(ref, motion.ref)
         }), {
             elementType: 'div'
         }),
         size,
         position,
-        open,
-        separator
+        separator,
+        motion
     };
 };

package/lib-commonjs/components/DrawerInline/useDrawerInline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, slot } from '@fluentui/react-utilities';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */ export const useDrawerInline_unstable = (props, ref)=>{\n    const { open: initialOpen , defaultOpen , size , position  } = getDefaultDrawerProps(props);\n    const { separator =false  } = props;\n    const [open] = useControllableState({\n        state: initialOpen,\n        defaultState: defaultOpen,\n        initialState: false\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        size,\n        position,\n        open,\n        separator\n    };\n};\n"],"names":["useDrawerInline_unstable","props","ref","open","initialOpen","defaultOpen","size","position","getDefaultDrawerProps","separator","useControllableState","state","defaultState","initialState","components","root","slot","always","getNativeElementProps","elementType"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;gCAC2C;uCAC5B;AAS3B,MAAMA,2BAA2B,CAACC,OAAOC,MAAM;IACtD,MAAM,EAAEC,MAAMC,YAAW,EAAGC,YAAW,EAAGC,KAAI,EAAGC,SAAQ,EAAG,GAAGC,IAAAA,4CAAqB,EAACP;IACrF,MAAM,EAAEQ,WAAW,KAAK,CAAA,EAAG,GAAGR;IAC9B,MAAM,CAACE,KAAK,GAAGO,IAAAA,oCAAoB,EAAC;QAChCC,OAAOP;QACPQ,cAAcP;QACdQ,cAAc,KAAK;IACvB;IACA,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3ChB;YACA,GAAGD,KAAK;QACZ,IAAI;YACAkB,aAAa;QACjB;QACAb;QACAC;QACAJ;QACAM;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */ export const useDrawerInline_unstable = (props, ref)=>{\n    const { size, position, ...defaultProps } = useDrawerDefaultProps(props);\n    const { separator = false } = props;\n    const [open] = useControllableState({\n        state: defaultProps.open,\n        defaultState: defaultProps.defaultOpen,\n        initialState: false\n    });\n    const motion = useMotion(open);\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ...props,\n            ref: useMergedRefs(ref, motion.ref)\n        }), {\n            elementType: 'div'\n        }),\n        size,\n        position,\n        separator,\n        motion\n    };\n};\n"],"names":["useDrawerInline_unstable","props","ref","size","position","defaultProps","useDrawerDefaultProps","separator","open","useControllableState","state","defaultState","defaultOpen","initialState","motion","useMotion","components","root","slot","always","getNativeElementProps","useMergedRefs","elementType"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCAC0D;oCACvD;uCACY;AAS3B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,cAAc,GAAGC,IAAAA,4CAAqB,EAACL;IAClE,MAAM,EAAEM,YAAY,KAAK,EAAE,GAAGN;IAC9B,MAAM,CAACO,KAAK,GAAGC,IAAAA,oCAAoB,EAAC;QAChCC,OAAOL,aAAaG,IAAI;QACxBG,cAAcN,aAAaO,WAAW;QACtCC,cAAc;IAClB;IACA,MAAMC,SAASC,IAAAA,6BAAS,EAACP;IACzB,OAAO;QACHQ,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C,GAAGnB,KAAK;YACRC,KAAKmB,IAAAA,6BAAa,EAACnB,KAAKY,OAAOZ,GAAG;QACtC,IAAI;YACAoB,aAAa;QACjB;QACAnB;QACAC;QACAG;QACAO;IACJ;AACJ"}

package/lib-commonjs/components/DrawerInline/useDrawerInlineStyles.styles.js

@@ -9,21 +9,34 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    drawerInlineClassNames: ()=>drawerInlineClassNames,
-    useDrawerInlineStyles_unstable: ()=>useDrawerInlineStyles_unstable
+    drawerInlineClassNames: function() {
+        return drawerInlineClassNames;
+    },
+    useDrawerInlineStyles_unstable: function() {
+        return useDrawerInlineStyles_unstable;
+    }
 });
-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 _react1 = require("@griffel/react");
-const _useDrawerBaseStylesStyles = require("../../util/useDrawerBaseStyles.styles");
+const _reacttheme = require("@fluentui/react-theme");
+const _useDrawerBaseStylesstyles = require("../../util/useDrawerBaseStyles.styles");
 const drawerInlineClassNames = {
     root: 'fui-DrawerInline'
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react1["__styles"])({
+ */ const separatorValues = [
+    '1px',
+    'solid',
+    _reacttheme.tokens.colorNeutralBackground3
+];
+const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
     root: {
-        qhf8xq: "f10pi13n"
+        qhf8xq: "f10pi13n",
+        abs64n: "fk73vx1",
+        Bmy1vo4: "f15rjlgw",
+        Es3by: "f1blt7p"
     },
     separatorStart: {
         Bekrc4i: [
@@ -52,32 +65,49 @@ const drawerInlineClassNames = {
             "f17e9lqh",
             "fa8zu9y"
         ]
+    },
+    start: {
+        Bz10aip: "f1d8gkik"
+    },
+    end: {
+        Bz10aip: "f1h1g6jt"
+    },
+    visible: {
+        abs64n: "f5p0z4x",
+        Bz10aip: "f87uvqx"
     }
 }, {
     d: [
         ".f10pi13n{position:relative;}",
+        ".fk73vx1{opacity:0;}",
+        ".f15rjlgw{transition-property:opacity,transform;}",
+        ".f1blt7p{will-change:opacity,transform;}",
         ".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);}"
+        ".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);}",
+        ".f5p0z4x{opacity:1;}",
+        ".f87uvqx{transform:translate3D(0, 0, 0);}"
     ]
 });
 const useDrawerInlineStyles_unstable = (state)=>{
-    const baseStyles = (0, _useDrawerBaseStylesStyles.useDrawerBaseStyles)();
-    const styles = useStyles();
+    const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
+    const rootStyles = useDrawerRootStyles();
     const separatorClass = _react.useMemo(()=>{
         if (!state.separator) {
             return undefined;
         }
-        return state.position === 'start' ? styles.separatorStart : styles.separatorEnd;
+        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
     }, [
         state.position,
         state.separator,
-        styles.separatorEnd,
-        styles.separatorStart
+        rootStyles.separatorEnd,
+        rootStyles.separatorStart
     ]);
-    state.root.className = (0, _react1.mergeClasses)(drawerInlineClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], separatorClass, state.root.className);
+    state.root.className = (0, _react1.mergeClasses)(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
     return state;
 }; //# sourceMappingURL=useDrawerInlineStyles.styles.js.map

package/lib-commonjs/components/DrawerInline/useDrawerInlineStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerInlineClassNames = {\n  root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    qhf8xq: \"f10pi13n\"\n  },\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}, {\n  d: [\".f10pi13n{position:relative;}\", \".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);}\"]\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */\nexport const useDrawerInlineStyles_unstable = state => {\n  const baseStyles = useDrawerBaseStyles();\n  const styles = useStyles();\n  const separatorClass = React.useMemo(() => {\n    if (!state.separator) {\n      return undefined;\n    }\n    return state.position === 'start' ? styles.separatorStart : styles.separatorEnd;\n  }, [state.position, state.separator, styles.separatorEnd, styles.separatorStart]);\n  state.root.className = mergeClasses(drawerInlineClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], separatorClass, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerInlineStyles.styles.js.map"],"names":["drawerInlineClassNames","useDrawerInlineStyles_unstable","root","useStyles","__styles","qhf8xq","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","d","state","baseStyles","useDrawerBaseStyles","styles","separatorClass","React","useMemo","separator","undefined","position","className","mergeClasses","size"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB,MAAtBA;IA0BAC,8BAA8B,MAA9BA;;;6DA9BU;wBAC4B;2CACf;AAE7B,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,mBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;IACV;IACAC,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;AACF,GAAG;IACDC,GAAG;QAAC;QAAiC;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;KAA+D;AAC7T;AAIO,MAAMb,iCAAiCc,CAAAA,QAAS;IACrD,MAAMC,aAAaC,IAAAA,8CAAmB;IACtC,MAAMC,SAASf;IACf,MAAMgB,iBAAiBC,OAAMC,OAAO,CAAC,IAAM;QACzC,IAAI,CAACN,MAAMO,SAAS,EAAE;YACpB,OAAOC;QACT,CAAC;QACD,OAAOR,MAAMS,QAAQ,KAAK,UAAUN,OAAOZ,cAAc,GAAGY,OAAOR,YAAY;IACjF,GAAG;QAACK,MAAMS,QAAQ;QAAET,MAAMO,SAAS;QAAEJ,OAAOR,YAAY;QAAEQ,OAAOZ,cAAc;KAAC;IAChFS,MAAMb,IAAI,CAACuB,SAAS,GAAGC,IAAAA,oBAAY,EAAC1B,uBAAuBE,IAAI,EAAEc,WAAWd,IAAI,EAAEgB,OAAOhB,IAAI,EAAEa,MAAMY,IAAI,IAAIX,UAAU,CAACD,MAAMY,IAAI,CAAC,EAAEZ,MAAMS,QAAQ,IAAIR,UAAU,CAACD,MAAMS,QAAQ,CAAC,EAAEL,gBAAgBJ,MAAMb,IAAI,CAACuB,SAAS;IACvN,OAAOV;AACT,GACA,wDAAwD"}
+{"version":3,"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames } from '../../util/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n  root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */\nconst separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n  root: {\n    qhf8xq: \"f10pi13n\",\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f15rjlgw\",\n    Es3by: \"f1blt7p\"\n  },\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  visible: {\n    abs64n: \"f5p0z4x\",\n    Bz10aip: \"f87uvqx\"\n  }\n}, {\n  d: [\".f10pi13n{position:relative;}\", \".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".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);}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */\nexport const useDrawerInlineStyles_unstable = state => {\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\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(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerInlineStyles.styles.js.map"],"names":["drawerInlineClassNames","useDrawerInlineStyles_unstable","root","separatorValues","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","qhf8xq","abs64n","Bmy1vo4","Es3by","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","d","state","baseClassNames","useDrawerBaseClassNames","rootStyles","separatorClass","React","useMemo","separator","undefined","position","className","mergeClasses","motion","active"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;IAwCAC,8BAA8B;eAA9BA;;;;iEA5CU;wBAC4B;4BAC5B;2CACgC;AAChD,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,kBAAkB;IAAC;IAAO;IAASC,kBAAM,CAACC,uBAAuB;CAAC;AACxE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDL,MAAM;QACJM,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,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;IACAE,SAAS;QACPd,QAAQ;QACRY,SAAS;IACX;AACF,GAAG;IACDG,GAAG;QAAC;QAAiC;QAAwB;QAAqD;QAA4C;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAA+E;QAAoE;QAAwB;KAA4C;AAC9oB;AAIO,MAAMvB,iCAAiCwB,CAAAA;IAC5C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,aAAatB;IACnB,MAAMuB,iBAAiBC,OAAMC,OAAO,CAAC;QACnC,IAAI,CAACN,MAAMO,SAAS,EAAE;YACpB,OAAOC;QACT;QACA,OAAOR,MAAMS,QAAQ,KAAK,UAAUN,WAAWhB,cAAc,GAAGgB,WAAWZ,YAAY;IACzF,GAAG;QAACS,MAAMS,QAAQ;QAAET,MAAMO,SAAS;QAAEJ,WAAWZ,YAAY;QAAEY,WAAWhB,cAAc;KAAC;IACxFa,MAAMvB,IAAI,CAACiC,SAAS,GAAGC,IAAAA,oBAAY,EAACpC,uBAAuBE,IAAI,EAAEwB,gBAAgBE,WAAW1B,IAAI,EAAE2B,gBAAgBD,UAAU,CAACH,MAAMS,QAAQ,CAAC,EAAET,MAAMY,MAAM,CAACC,MAAM,IAAIV,WAAWL,OAAO,EAAEE,MAAMvB,IAAI,CAACiC,SAAS;IAC7M,OAAOV;AACT,GACA,wDAAwD"}

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

@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DrawerOverlay", {
     enumerable: true,
-    get: ()=>DrawerOverlay
+    get: function() {
+        return DrawerOverlay;
+    }
 });
-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 _useDrawerOverlay = require("./useDrawerOverlay");
 const _renderDrawerOverlay = require("./renderDrawerOverlay");
-const _useDrawerOverlayStylesStyles = require("./useDrawerOverlayStyles.styles");
+const _useDrawerOverlayStylesstyles = require("./useDrawerOverlayStyles.styles");
 const DrawerOverlay = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useDrawerOverlay.useDrawerOverlay_unstable)(props, ref);
-    (0, _useDrawerOverlayStylesStyles.useDrawerOverlayStyles_unstable)(state);
+    (0, _useDrawerOverlayStylesstyles.useDrawerOverlayStyles_unstable)(state);
     return (0, _renderDrawerOverlay.renderDrawerOverlay_unstable)(state);
 });
 DrawerOverlay.displayName = 'DrawerOverlay';

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerOverlay_unstable } from './useDrawerOverlay';\nimport { renderDrawerOverlay_unstable } from './renderDrawerOverlay';\nimport { useDrawerOverlayStyles_unstable } from './useDrawerOverlayStyles.styles';\n/**\n * DrawerOverlay contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const DrawerOverlay = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawerOverlay_unstable(props, ref);\n    useDrawerOverlayStyles_unstable(state);\n    return renderDrawerOverlay_unstable(state);\n});\nDrawerOverlay.displayName = 'DrawerOverlay';\n"],"names":["DrawerOverlay","React","forwardRef","props","ref","state","useDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","renderDrawerOverlay_unstable","displayName"],"mappings":";;;;+BAMiBA;;aAAAA;;;6DANM;kCACmB;qCACG;8CACG;AAGrC,MAAMA,gBAAgB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IAC1E,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,6DAA+B,EAACF;IAChC,OAAOG,IAAAA,iDAA4B,EAACH;AACxC;AACAL,cAAcS,WAAW,GAAG"}
+{"version":3,"sources":["DrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerOverlay_unstable } from './useDrawerOverlay';\nimport { renderDrawerOverlay_unstable } from './renderDrawerOverlay';\nimport { useDrawerOverlayStyles_unstable } from './useDrawerOverlayStyles.styles';\n/**\n * DrawerOverlay contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const DrawerOverlay = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawerOverlay_unstable(props, ref);\n    useDrawerOverlayStyles_unstable(state);\n    return renderDrawerOverlay_unstable(state);\n});\nDrawerOverlay.displayName = 'DrawerOverlay';\n"],"names":["DrawerOverlay","React","forwardRef","props","ref","state","useDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","renderDrawerOverlay_unstable","displayName"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;kCACmB;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;IAChC,OAAOG,IAAAA,iDAA4B,EAACH;AACxC;AACAL,cAAcS,WAAW,GAAG"}

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

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

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

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

package/lib-commonjs/components/DrawerOverlay/renderDrawerOverlay.js

@@ -1,15 +1,23 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
 Object.defineProperty(exports, "renderDrawerOverlay_unstable", {
     enumerable: true,
-    get: ()=>renderDrawerOverlay_unstable
+    get: function() {
+        return renderDrawerOverlay_unstable;
+    }
 });
-const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
-const _reactUtilities = require("@fluentui/react-utilities");
-const _reactDialog = require("@fluentui/react-dialog");
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactdialog = require("@fluentui/react-dialog");
 const renderDrawerOverlay_unstable = (state)=>{
-    (0, _reactUtilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactDialog.Dialog, state.dialog, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null));
+    if (!state.motion.canRender) {
+        return null;
+    }
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactdialog.Dialog, {
+        ...state.dialog,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerOverlay.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\n/**\n * Render the final JSX of DrawerOverlay\n */ export const renderDrawerOverlay_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(Dialog, state.dialog, /*#__PURE__*/ createElement(state.root, null));\n};\n"],"names":["renderDrawerOverlay_unstable","state","assertSlots","createElement","Dialog","dialog","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;6BACL;AAGZ,MAAMA,+BAA+B,CAACC,QAAQ;IACrDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACC,mBAAM,EAAEH,MAAMI,MAAM,EAAE,WAAW,GAAGF,IAAAA,8BAAa,EAACF,MAAMK,IAAI,EAAE,IAAI;AACzG"}
+{"version":3,"sources":["renderDrawerOverlay.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\n/**\n * Render the final JSX of DrawerOverlay\n */ export const renderDrawerOverlay_unstable = (state)=>{\n    if (!state.motion.canRender) {\n        return null;\n    }\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(Dialog, {\n        ...state.dialog,\n        children: /*#__PURE__*/ _jsx(state.root, {})\n    });\n};\n"],"names":["renderDrawerOverlay_unstable","state","motion","canRender","assertSlots","_jsx","Dialog","dialog","children","root"],"mappings":"AAAA,0BAA0B,GAAG,iDAAiD;;;;+BAK7DA;;;eAAAA;;;4BAL4F;gCACjF;6BACL;AAGZ,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,EAACC,mBAAM,EAAE;QAC9B,GAAGL,MAAMM,MAAM;QACfC,UAAU,WAAW,GAAGH,IAAAA,eAAI,EAACJ,MAAMQ,IAAI,EAAE,CAAC;IAC9C;AACJ"}

package/lib-commonjs/components/DrawerOverlay/useDrawerOverlay.js

@@ -4,35 +4,56 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useDrawerOverlay_unstable", {
     enumerable: true,
-    get: ()=>useDrawerOverlay_unstable
+    get: function() {
+        return useDrawerOverlay_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 _reactDialog = require("@fluentui/react-dialog");
-const _getDefaultDrawerProps = require("../../util/getDefaultDrawerProps");
+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 _useDrawerDefaultProps = require("../../util/useDrawerDefaultProps");
+const _reactmotionpreview = require("@fluentui/react-motion-preview");
 const useDrawerOverlay_unstable = (props, ref)=>{
-    const { open , defaultOpen , size , position  } = (0, _getDefaultDrawerProps.getDefaultDrawerProps)(props);
-    const { modalType ='modal' , inertTrapFocus , onOpenChange  } = props;
+    const { open, defaultOpen, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
+    const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
+    const drawerMotion = (0, _reactmotionpreview.useMotion)(open);
+    const backdropMotion = (0, _reactmotionpreview.useMotion)(open);
+    const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;
+    const root = _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+        ...props,
+        ref: (0, _reactutilities.useMergedRefs)(ref, drawerMotion.ref)
+    }), {
+        elementType: _reactdialog.DialogSurface,
+        defaultProps: {
+            backdrop: _reactutilities.slot.optional(props.backdrop, {
+                elementType: 'div',
+                renderByDefault: hasCustomBackdrop,
+                defaultProps: {
+                    ref: backdropMotion.ref
+                }
+            })
+        }
+    });
+    const dialog = _reactutilities.slot.always({
+        open: true,
+        defaultOpen,
+        onOpenChange,
+        inertTrapFocus,
+        modalType
+    }, {
+        elementType: 'div'
+    });
     return {
         components: {
-            root: _reactDialog.DialogSurface,
+            root: _reactdialog.DialogSurface,
             backdrop: 'div'
         },
-        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
-            ref,
-            ...props
-        }), {
-            elementType: _reactDialog.DialogSurface
-        }),
-        dialog: {
-            open,
-            defaultOpen,
-            onOpenChange,
-            inertTrapFocus,
-            modalType
-        },
+        root,
+        dialog,
         size,
-        position
+        position,
+        motion: drawerMotion,
+        backdropMotion
     };
 };