@fluentui/react-drawer 9.0.0-beta.11 → 9.0.0-beta.13

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

@@ -36,10 +36,10 @@ const drawerHeaderTitleClassNames = {
     }
 }, {
     d: [
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
-        ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}",
-        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
-        ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}",
+        ".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);}"
     ]

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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);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;QAAwF;QAA4G;QAA2G;QAAgG;QAAgE;KAA8D;AACnhB;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,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"}

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

@@ -1,4 +1,4 @@
-"use strict";
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -6,13 +6,12 @@ Object.defineProperty(exports, "renderDrawerInline_unstable", {
     enumerable: true,
     get: ()=>renderDrawerInline_unstable
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderDrawerInline_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
+    (0, _reactUtilities.assertSlots)(state);
     if (!state.open) {
         return null;
     }
-    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of DrawerInline\n */ export const renderDrawerInline_unstable = (state)=>{\n    const { slots , slotProps  } = getSlots(state);\n    if (!state.open) {\n        return null;\n    }\n    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);\n};\n"],"names":["renderDrawerInline_unstable","state","slots","slotProps","getSlots","open","React","createElement","root"],"mappings":";;;;+BAIiBA;;aAAAA;;;6DAJM;gCACE;AAGd,MAAMA,8BAA8B,CAACC,QAAQ;IACpD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,wBAAQ,EAACH;IACxC,IAAI,CAACA,MAAMI,IAAI,EAAE;QACb,OAAO,IAAI;IACf,CAAC;IACD,OAAO,WAAW,GAAGC,OAAMC,aAAa,CAACL,MAAMM,IAAI,EAAEL,UAAUK,IAAI;AACvE"}
+{"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"}

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

@@ -22,9 +22,11 @@ const useDrawerInline_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
         size,
         position,

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState } 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: getNativeElementProps('div', {\n            ref,\n            ...props\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","getNativeElementProps"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;gCACqC;uCACtB;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,IAAAA,qCAAqB,EAAC,OAAO;YAC/Bd;YACA,GAAGD,KAAK;QACZ;QACAK;QACAC;QACAJ;QACAM;IACJ;AACJ"}
+{"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"}

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

@@ -1,4 +1,4 @@
-"use strict";
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -6,11 +6,10 @@ Object.defineProperty(exports, "renderDrawerOverlay_unstable", {
     enumerable: true,
     get: ()=>renderDrawerOverlay_unstable
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _reactDialog = require("@fluentui/react-dialog");
 const renderDrawerOverlay_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(_reactDialog.Dialog, state.dialog, /*#__PURE__*/ _react.createElement(slots.root, slotProps.root));
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactDialog.Dialog, state.dialog, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } 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    const { slots , slotProps  } = getSlots(state);\n    return /*#__PURE__*/ React.createElement(Dialog, state.dialog, /*#__PURE__*/ React.createElement(slots.root, slotProps.root));\n};\n"],"names":["renderDrawerOverlay_unstable","state","slots","slotProps","getSlots","React","createElement","Dialog","dialog","root"],"mappings":";;;;+BAKiBA;;aAAAA;;;6DALM;gCACE;6BACF;AAGZ,MAAMA,+BAA+B,CAACC,QAAQ;IACrD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,wBAAQ,EAACH;IACxC,OAAO,WAAW,GAAGI,OAAMC,aAAa,CAACC,mBAAM,EAAEN,MAAMO,MAAM,EAAE,WAAW,GAAGH,OAAMC,aAAa,CAACJ,MAAMO,IAAI,EAAEN,UAAUM,IAAI;AAC/H"}
+{"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"}

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

@@ -19,9 +19,11 @@ const useDrawerOverlay_unstable = (props, ref)=>{
             root: _reactDialog.DialogSurface,
             backdrop: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref,
             ...props
+        }), {
+            elementType: _reactDialog.DialogSurface
         }),
         dialog: {
             open,

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n    const { open , defaultOpen , size , position  } = getDefaultDrawerProps(props);\n    const { modalType ='modal' , inertTrapFocus , onOpenChange  } = props;\n    return {\n        components: {\n            root: DialogSurface,\n            backdrop: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ref,\n            ...props\n        }),\n        dialog: {\n            open,\n            defaultOpen,\n            onOpenChange,\n            inertTrapFocus,\n            modalType\n        },\n        size,\n        position\n    };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","getDefaultDrawerProps","modalType","inertTrapFocus","onOpenChange","components","root","DialogSurface","backdrop","getNativeElementProps","dialog"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACe;6BACR;uCACQ;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC,MAAM;IACvD,MAAM,EAAEC,KAAI,EAAGC,YAAW,EAAGC,KAAI,EAAGC,SAAQ,EAAG,GAAGC,IAAAA,4CAAqB,EAACN;IACxE,MAAM,EAAEO,WAAW,QAAO,EAAGC,eAAc,EAAGC,aAAY,EAAG,GAAGT;IAChE,OAAO;QACHU,YAAY;YACRC,MAAMC,0BAAa;YACnBC,UAAU;QACd;QACAF,MAAMG,IAAAA,qCAAqB,EAAC,OAAO;YAC/Bb;YACA,GAAGD,KAAK;QACZ;QACAe,QAAQ;YACJb;YACAC;YACAM;YACAD;YACAD;QACJ;QACAH;QACAC;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n    const { open , defaultOpen , size , position  } = getDefaultDrawerProps(props);\n    const { modalType ='modal' , inertTrapFocus , onOpenChange  } = props;\n    return {\n        components: {\n            root: DialogSurface,\n            backdrop: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: DialogSurface\n        }),\n        dialog: {\n            open,\n            defaultOpen,\n            onOpenChange,\n            inertTrapFocus,\n            modalType\n        },\n        size,\n        position\n    };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","getDefaultDrawerProps","modalType","inertTrapFocus","onOpenChange","components","root","DialogSurface","backdrop","slot","always","getNativeElementProps","elementType","dialog"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACqB;6BACd;uCACQ;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC,MAAM;IACvD,MAAM,EAAEC,KAAI,EAAGC,YAAW,EAAGC,KAAI,EAAGC,SAAQ,EAAG,GAAGC,IAAAA,4CAAqB,EAACN;IACxE,MAAM,EAAEO,WAAW,QAAO,EAAGC,eAAc,EAAGC,aAAY,EAAG,GAAGT;IAChE,OAAO;QACHU,YAAY;YACRC,MAAMC,0BAAa;YACnBC,UAAU;QACd;QACAF,MAAMG,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3Cf;YACA,GAAGD,KAAK;QACZ,IAAI;YACAiB,aAAaL,0BAAa;QAC9B;QACAM,QAAQ;YACJhB;YACAC;YACAM;YACAD;YACAD;QACJ;QACAH;QACAC;IACJ;AACJ"}

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

@@ -108,10 +108,10 @@ const useDrawerBaseStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f1w39fev{max-width:100vw;}",
         ".f11ysow2{height:auto;}",
         ".f1ewtqcl{box-sizing:border-box;}",
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
-        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
-        ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}",
-        ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}",
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f6jr5hl{align-items:flex-start;}",
+        ".fbhxue7{justify-content:flex-start;}",
         ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
         ".f1vgc2s3{left:0;}",
         ".f1e31b4d{right:0;}",

package/lib-commonjs/util/useDrawerBaseStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the root slot\n */\nexport const useDrawerBaseStyles = /*#__PURE__*/__styles({\n  root: {\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    B68tc82: \"f1p9o1ba\",\n    Bmxbyg5: \"f1sil6mw\",\n    Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n    Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n    B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n    Btl43ni: [\"f1ozlkrg\", \"f10ostut\"],\n    B4j52fo: \"fre7gi1\",\n    Bekrc4i: [\"f1358rze\", \"f1rvrf73\"],\n    Bn0qgzm: \"fqdk4by\",\n    ibv6hh: [\"f1rvrf73\", \"f1358rze\"],\n    B2u0y6b: \"f1w39fev\",\n    Bqenvij: \"f11ysow2\",\n    B7ck84d: \"f1ewtqcl\",\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Bt984gj: \"f6jr5hl\",\n    Brf1p80: \"fbhxue7\",\n    De3pzq: \"fxugw4r\"\n  },\n  left: {\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n    j35jbq: [\"fvfyk4\", \"frppm18\"]\n  },\n  right: {\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    oyh7mz: [\"frppm18\", \"fvfyk4\"]\n  },\n  small: {\n    a9b677: \"f1nfxovz\"\n  },\n  medium: {\n    a9b677: \"fb8d3vz\"\n  },\n  large: {\n    a9b677: \"fi96w9z\"\n  },\n  full: {\n    a9b677: \"fr97h3j\",\n    B2u0y6b: \"f1w39fev\"\n  }\n}, {\n  d: [\".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f1krrbdw{border-bottom-right-radius:0;}\", \".f1deotkl{border-bottom-left-radius:0;}\", \".f10ostut{border-top-right-radius:0;}\", \".f1ozlkrg{border-top-left-radius:0;}\", \".fre7gi1{border-top-width:0;}\", \".f1358rze{border-right-width:0;}\", \".f1rvrf73{border-left-width:0;}\", \".fqdk4by{border-bottom-width:0;}\", \".f1w39fev{max-width:100vw;}\", \".f11ysow2{height:auto;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}\", \".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", \".f1nfxovz{width:320px;}\", \".fb8d3vz{width:592px;}\", \".fi96w9z{width:940px;}\", \".fr97h3j{width:100vw;}\"]\n});\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["useDrawerBaseStyles","__styles","root","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","left","oyh7mz","j35jbq","right","small","a9b677","medium","large","full","d"],"mappings":";;;;+BAKaA;;aAAAA;;uBALwB;AAK9B,MAAMA,sBAAsB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACvDC,MAAM;QACJC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;IACAC,MAAM;QACJC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAU;SAAU;IAC/B;IACAC,OAAO;QACLD,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAW;SAAS;IAC/B;IACAG,OAAO;QACLC,QAAQ;IACV;IACAC,QAAQ;QACND,QAAQ;IACV;IACAE,OAAO;QACLF,QAAQ;IACV;IACAG,MAAM;QACJH,QAAQ;QACRb,SAAS;IACX;AACF,GAAG;IACDiB,GAAG;QAAC;QAA6B;QAA8B;QAA8B;QAAgC;QAAiC;QAAiC;QAA4C;QAA2C;QAAyC;QAAwC;QAAiC;QAAoC;QAAmC;QAAoC;QAA+B;QAA2B;QAAqC;QAAwF;QAA6F;QAA2H;QAAuH;QAA8D;QAAsB;QAAuB;QAAwB;QAAwB;QAA2B;QAA0B;QAA0B;KAAyB;AAC9vC,IACA,sDAAsD"}
+{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the root slot\n */\nexport const useDrawerBaseStyles = /*#__PURE__*/__styles({\n  root: {\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    B68tc82: \"f1p9o1ba\",\n    Bmxbyg5: \"f1sil6mw\",\n    Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n    Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n    B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n    Btl43ni: [\"f1ozlkrg\", \"f10ostut\"],\n    B4j52fo: \"fre7gi1\",\n    Bekrc4i: [\"f1358rze\", \"f1rvrf73\"],\n    Bn0qgzm: \"fqdk4by\",\n    ibv6hh: [\"f1rvrf73\", \"f1358rze\"],\n    B2u0y6b: \"f1w39fev\",\n    Bqenvij: \"f11ysow2\",\n    B7ck84d: \"f1ewtqcl\",\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Bt984gj: \"f6jr5hl\",\n    Brf1p80: \"fbhxue7\",\n    De3pzq: \"fxugw4r\"\n  },\n  left: {\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n    j35jbq: [\"fvfyk4\", \"frppm18\"]\n  },\n  right: {\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    oyh7mz: [\"frppm18\", \"fvfyk4\"]\n  },\n  small: {\n    a9b677: \"f1nfxovz\"\n  },\n  medium: {\n    a9b677: \"fb8d3vz\"\n  },\n  large: {\n    a9b677: \"fi96w9z\"\n  },\n  full: {\n    a9b677: \"fr97h3j\",\n    B2u0y6b: \"f1w39fev\"\n  }\n}, {\n  d: [\".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f1krrbdw{border-bottom-right-radius:0;}\", \".f1deotkl{border-bottom-left-radius:0;}\", \".f10ostut{border-top-right-radius:0;}\", \".f1ozlkrg{border-top-left-radius:0;}\", \".fre7gi1{border-top-width:0;}\", \".f1358rze{border-right-width:0;}\", \".f1rvrf73{border-left-width:0;}\", \".fqdk4by{border-bottom-width:0;}\", \".f1w39fev{max-width:100vw;}\", \".f11ysow2{height:auto;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:flex;}\", \".f1vx9l62{flex-direction:column;}\", \".f6jr5hl{align-items:flex-start;}\", \".fbhxue7{justify-content:flex-start;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", \".f1nfxovz{width:320px;}\", \".fb8d3vz{width:592px;}\", \".fi96w9z{width:940px;}\", \".fr97h3j{width:100vw;}\"]\n});\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["useDrawerBaseStyles","__styles","root","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","left","oyh7mz","j35jbq","right","small","a9b677","medium","large","full","d"],"mappings":";;;;+BAKaA;;aAAAA;;uBALwB;AAK9B,MAAMA,sBAAsB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACvDC,MAAM;QACJC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;IACAC,MAAM;QACJC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAU;SAAU;IAC/B;IACAC,OAAO;QACLD,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAW;SAAS;IAC/B;IACAG,OAAO;QACLC,QAAQ;IACV;IACAC,QAAQ;QACND,QAAQ;IACV;IACAE,OAAO;QACLF,QAAQ;IACV;IACAG,MAAM;QACJH,QAAQ;QACRb,SAAS;IACX;AACF,GAAG;IACDiB,GAAG;QAAC;QAA6B;QAA8B;QAA8B;QAAgC;QAAiC;QAAiC;QAA4C;QAA2C;QAAyC;QAAwC;QAAiC;QAAoC;QAAmC;QAAoC;QAA+B;QAA2B;QAAqC;QAA2B;QAAqC;QAAqC;QAAyC;QAA8D;QAAsB;QAAuB;QAAwB;QAAwB;QAA2B;QAA0B;QAA0B;KAAyB;AACr+B,IACA,sDAAsD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.0.0-beta.11",
+  "version": "9.0.0-beta.13",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,12 +35,12 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.5.19",
-    "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",
-    "@fluentui/react-shared-contexts": "^9.7.0",
-    "@fluentui/react-theme": "^9.1.9",
-    "@fluentui/react-utilities": "^9.10.1",
-    "@griffel/react": "^1.5.7",
+    "@fluentui/react-dialog": "^9.5.21",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.14",
+    "@fluentui/react-shared-contexts": "^9.7.2",
+    "@fluentui/react-theme": "^9.1.11",
+    "@fluentui/react-utilities": "^9.11.0",
+    "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {