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

package/CHANGELOG.json

@@ -2,7 +2,91 @@
   "name": "@fluentui/react-drawer",
   "entries": [
     {
-      "date": "Tue, 01 Aug 2023 10:14:29 GMT",
+      "date": "Wed, 09 Aug 2023 13:11:37 GMT",
+      "tag": "@fluentui/react-drawer_v9.0.0-beta.13",
+      "version": "9.0.0-beta.13",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-drawer",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-drawer",
+            "commit": "d5ece238df797e84a59affc6162b0fa5cc46649d",
+            "comment": "chore(cxe-prg): migrate to new slot API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-dialog to v9.5.21",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:58 GMT",
+      "tag": "@fluentui/react-drawer_v9.0.0-beta.12",
+      "version": "9.0.0-beta.12",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-dialog to v9.5.20",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-theme to v9.1.10",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-drawer",
+            "comment": "Bump @fluentui/react-utilities to v9.11.0",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
       "tag": "@fluentui/react-drawer_v9.0.0-beta.11",
       "version": "9.0.0-beta.11",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Tue, 01 Aug 2023 10:14:29 GMT and should not be manually modified.
+This log was last generated on Wed, 09 Aug 2023 13:11:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.13)
+
+Wed, 09 Aug 2023 13:11:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.12..@fluentui/react-drawer_v9.0.0-beta.13)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- chore(cxe-prg): migrate to new slot API ([PR #28752](https://github.com/microsoft/fluentui/pull/28752) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-dialog to v9.5.21 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+
+## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.12)
+
+Fri, 04 Aug 2023 08:52:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.11..@fluentui/react-drawer_v9.0.0-beta.12)
+
+### Changes
+
+- Bump @fluentui/react-dialog to v9.5.20 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+
 ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.0.0-beta.11)
 
-Tue, 01 Aug 2023 10:14:29 GMT 
+Tue, 01 Aug 2023 10:17:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.0.0-beta.10..@fluentui/react-drawer_v9.0.0-beta.11)
 
 ### Changes

package/lib/components/Drawer/renderDrawer.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Drawer
  */ export const renderDrawer_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState) => {\n  const { slots, slotProps } = getSlotsNext<DrawerSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderDrawer_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3D,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA0BE;IAEvD,qBAAO,AAbT,cAaUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState) => {\n  assertSlots<DrawerSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDrawer_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3DF,YAAyBE;IAEzB,qBAAO,AAbT,cAaUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/Drawer/useDrawer.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { resolveShorthand } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
 import { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay';
 import { DrawerInline } from '../DrawerInline/DrawerInline';
 /**
@@ -16,11 +16,11 @@ import { DrawerInline } from '../DrawerInline/DrawerInline';
         components: {
             root: type === 'overlay' ? DrawerOverlay : DrawerInline
         },
-        root: resolveShorthand(props, {
-            required: true,
+        root: slot.always(props, {
             defaultProps: {
                 ref
-            }
+            },
+            elementType: type === 'overlay' ? DrawerOverlay : DrawerInline
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline/DrawerInline';\n\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 */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n  const { type = 'overlay' } = props;\n\n  return {\n    components: {\n      root: type === 'overlay' ? DrawerOverlay : DrawerInline,\n    },\n\n    root: resolveShorthand(props, {\n      required: true,\n      defaultProps: {\n        ref,\n      } as DrawerProps,\n    }),\n  };\n};\n"],"names":["React","resolveShorthand","DrawerOverlay","DrawerInline","useDrawer_unstable","props","ref","type","components","root","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAG7D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,YAAY,QAAQ,+BAA+B;AAE5D;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC,MAA6C;IAClG,MAAM,EAAEC,MAAO,UAAS,EAAE,GAAGF;IAE7B,OAAO;QACLG,YAAY;YACVC,MAAMF,SAAS,YAAYL,gBAAgBC,YAAY;QACzD;QAEAM,MAAMR,iBAAiBI,OAAO;YAC5BK,UAAU,IAAI;YACdC,cAAc;gBACZL;YACF;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport type { DrawerProps, DrawerState } from './Drawer.types';\nimport { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline/DrawerInline';\n\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 */\nexport const useDrawer_unstable = (props: DrawerProps, ref: React.Ref<HTMLElement>): DrawerState => {\n  const { type = 'overlay' } = props;\n\n  return {\n    components: {\n      root: type === 'overlay' ? DrawerOverlay : DrawerInline,\n    },\n\n    root: slot.always(props, {\n      defaultProps: {\n        ref,\n      } as DrawerProps,\n      elementType: type === 'overlay' ? DrawerOverlay : DrawerInline,\n    }),\n  };\n};\n"],"names":["React","slot","DrawerOverlay","DrawerInline","useDrawer_unstable","props","ref","type","components","root","always","defaultProps","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,YAAY,QAAQ,+BAA+B;AAE5D;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC,MAA6C;IAClG,MAAM,EAAEC,MAAO,UAAS,EAAE,GAAGF;IAE7B,OAAO;QACLG,YAAY;YACVC,MAAMF,SAAS,YAAYL,gBAAgBC,YAAY;QACzD;QAEAM,MAAMR,KAAKS,MAAM,CAACL,OAAO;YACvBM,cAAc;gBACZL;YACF;YACAM,aAAaL,SAAS,YAAYL,gBAAgBC,YAAY;QAChE;IACF;AACF,EAAE"}

package/lib/components/DrawerBody/renderDrawerBody.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerBody
  */ export const renderDrawerBody_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerBodyState, DrawerBodySlots } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState) => {\n  const { slots, slotProps } = getSlots<DrawerBodySlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerBody_unstable","state","slots","slotProps","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA0BE;IAEvD,qBAAO,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerBody.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerBodyState, DrawerBodySlots } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState) => {\n  assertSlots<DrawerBodySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDrawerBody_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnEF,YAA6BE;IAE7B,qBAAO,AAZT,cAYUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DrawerBody/useDrawerBody.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerBody.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\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 */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDrawerBody_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\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 */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerBody_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/DrawerBody/useDrawerBodyStyles.styles.js

@@ -32,7 +32,7 @@ const useStyles = /*#__PURE__*/__styles({
     gonrqn: "f2c46kh"
   }
 }, {
-  d: [".fkrn0sh{margin-top:-1px;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".fmxx68s{margin-bottom:-1px;}", ".f1sl3k7w{padding-top:1px;}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".f1brlhvm{padding-bottom:1px;}", ".f1oy3dpc{overflow-x:auto;}", ".f5zp4f{overflow-y:auto;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1pztt34{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}", ".f1ub7u0d{-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;}", ".f1igvcbx{background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));}", ".f1fofb6i{-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;}", ".fo6xqva{background-repeat:no-repeat;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fcre6b6{-webkit-background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-size:100% 2px,100% 2px,100% 1px,100% 1px;}", ".f1besv5s{background-attachment:local,local,scroll,scroll;}", ".f1pqm9hp:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".f2c46kh:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"]
+  d: [".fkrn0sh{margin-top:-1px;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".fmxx68s{margin-bottom:-1px;}", ".f1sl3k7w{padding-top:1px;}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".f1brlhvm{padding-bottom:1px;}", ".f1oy3dpc{overflow-x:auto;}", ".f5zp4f{overflow-y:auto;}", ".fqerorx{flex-grow:1;}", ".f1neuvcm{flex-shrink:1;}", ".f1pztt34{flex-basis:0;}", ".f1ub7u0d{align-self:stretch;}", ".f1igvcbx{background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));}", ".f1fofb6i{-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;}", ".fo6xqva{background-repeat:no-repeat;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fcre6b6{background-size:100% 2px,100% 2px,100% 1px,100% 1px;}", ".f1besv5s{background-attachment:local,local,scroll,scroll;}", ".f1pqm9hp:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".f2c46kh:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"]
 });
 /**
  * Apply styling to the DrawerBody slots based on the state

package/lib/components/DrawerFooter/renderDrawerFooter.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerFooter
  */ export const renderDrawerFooter_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

package/lib/components/DrawerFooter/renderDrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerFooterState, DrawerFooterSlots } from './DrawerFooter.types';\n\n/**\n * Render the final JSX of DrawerFooter\n */\nexport const renderDrawerFooter_unstable = (state: DrawerFooterState) => {\n  const { slots, slotProps } = getSlots<DrawerFooterSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerFooter_unstable","state","slots","slotProps","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA4BE;IAEzD,qBAAO,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerFooterState, DrawerFooterSlots } from './DrawerFooter.types';\n\n/**\n * Render the final JSX of DrawerFooter\n */\nexport const renderDrawerFooter_unstable = (state: DrawerFooterState) => {\n  assertSlots<DrawerFooterSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDrawerFooter_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvEF,YAA+BE;IAE/B,qBAAO,AAZT,cAYUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DrawerFooter/useDrawerFooter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerFooter.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'footer'
         },
-        root: getNativeElementProps('footer', {
+        root: slot.always(getNativeElementProps('footer', {
             ref,
             ...props
+        }), {
+            elementType: 'footer'
         })
     };
 };

package/lib/components/DrawerFooter/useDrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n  return {\n    components: {\n      root: 'footer',\n    },\n\n    root: getNativeElementProps('footer', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDrawerFooter_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,sBAAsB,UAAU;YACpCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n  return {\n    components: {\n      root: 'footer',\n    },\n\n    root: slot.always(\n      getNativeElementProps('footer', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'footer' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerFooter_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,UAAU;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAS;IAE5B;AACF,EAAE"}

package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.js

@@ -18,7 +18,7 @@ const useStyles = /*#__PURE__*/__styles({
     i8kkvl: "fsnqrgy"
   }
 }, {
-  d: [".fikn0iw{padding-top:var(--spacingVerticalL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".fz66xbh{padding-bottom:var(--spacingVerticalXXL);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".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);}"]
+  d: [".fikn0iw{padding-top:var(--spacingVerticalL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".fz66xbh{padding-bottom:var(--spacingVerticalXXL);}", ".f22iagw{display:flex;}", ".fbhxue7{justify-content:flex-start;}", ".f122n59{align-items:center;}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}"]
 });
 /**
  * Apply styling to the DrawerFooter slots based on the state

package/lib/components/DrawerHeader/renderDrawerHeader.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerHeader
  */ export const renderDrawerHeader_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

package/lib/components/DrawerHeader/renderDrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';\n\n/**\n * Render the final JSX of DrawerHeader\n */\nexport const renderDrawerHeader_unstable = (state: DrawerHeaderState) => {\n  const { slots, slotProps } = getSlots<DrawerHeaderSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerHeader_unstable","state","slots","slotProps","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA4BE;IAEzD,qBAAO,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';\n\n/**\n * Render the final JSX of DrawerHeader\n */\nexport const renderDrawerHeader_unstable = (state: DrawerHeaderState) => {\n  assertSlots<DrawerHeaderSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDrawerHeader_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvEF,YAA+BE;IAE/B,qBAAO,AAZT,cAYUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DrawerHeader/useDrawerHeader.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerHeader.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'header'
         },
-        root: getNativeElementProps('header', {
+        root: slot.always(getNativeElementProps('header', {
             ref,
             ...props
+        }), {
+            elementType: 'header'
         })
     };
 };

package/lib/components/DrawerHeader/useDrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n  return {\n    components: {\n      root: 'header',\n    },\n\n    root: getNativeElementProps('header', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDrawerHeader_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,sBAAsB,UAAU;YACpCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n  return {\n    components: {\n      root: 'header',\n    },\n\n    root: slot.always(\n      getNativeElementProps('header', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'header' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeader_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,UAAU;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAS;IAE5B;AACF,EAAE"}

package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.js

@@ -19,7 +19,7 @@ const useStyles = /*#__PURE__*/__styles({
     Beiy3e4: "f1vx9l62"
   }
 }, {
-  d: [".f1ggmyuv{padding-top:var(--spacingVerticalXXL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f1ub7u0d{-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
+  d: [".f1ggmyuv{padding-top:var(--spacingVerticalXXL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f1ub7u0d{align-self:stretch;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}"]
 });
 /**
  * Apply styling to the DrawerHeader slots based on the state

package/lib/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerHeaderNavigation
  */ export const renderDrawerHeaderNavigation_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

package/lib/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerHeaderNavigation.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderNavigationState, DrawerHeaderNavigationSlots } from './DrawerHeaderNavigation.types';\n\n/**\n * Render the final JSX of DrawerHeaderNavigation\n */\nexport const renderDrawerHeaderNavigation_unstable = (state: DrawerHeaderNavigationState) => {\n  const { slots, slotProps } = getSlots<DrawerHeaderNavigationSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerHeaderNavigation_unstable","state","slots","slotProps","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC,QAAuC;IAC3F,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAAsCE;IAEnE,qBAAO,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerHeaderNavigation.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderNavigationState, DrawerHeaderNavigationSlots } from './DrawerHeaderNavigation.types';\n\n/**\n * Render the final JSX of DrawerHeaderNavigation\n */\nexport const renderDrawerHeaderNavigation_unstable = (state: DrawerHeaderNavigationState) => {\n  assertSlots<DrawerHeaderNavigationSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDrawerHeaderNavigation_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC,QAAuC;IAC3FF,YAAyCE;IAEzC,qBAAO,AAZT,cAYUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerHeaderNavigation.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'nav'
         },
-        root: getNativeElementProps('nav', {
+        root: slot.always(getNativeElementProps('nav', {
             ref,
             ...props
+        }), {
+            elementType: 'nav'
         })
     };
 };

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Create the state required to render DrawerHeaderNavigation.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,\n * before being passed to renderDrawerHeaderNavigation_unstable.\n *\n * @param props - props from this instance of DrawerHeaderNavigation\n * @param ref - reference to root HTMLElement of DrawerHeaderNavigation\n */\nexport const useDrawerHeaderNavigation_unstable = (\n  props: DrawerHeaderNavigationProps,\n  ref: React.Ref<HTMLElement>,\n): DrawerHeaderNavigationState => {\n  return {\n    components: {\n      root: 'nav',\n    },\n\n    root: getNativeElementProps('nav', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDrawerHeaderNavigation_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC,MACgC;IAChC,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeaderNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Create the state required to render DrawerHeaderNavigation.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,\n * before being passed to renderDrawerHeaderNavigation_unstable.\n *\n * @param props - props from this instance of DrawerHeaderNavigation\n * @param ref - reference to root HTMLElement of DrawerHeaderNavigation\n */\nexport const useDrawerHeaderNavigation_unstable = (\n  props: DrawerHeaderNavigationProps,\n  ref: React.Ref<HTMLElement>,\n): DrawerHeaderNavigationState => {\n  return {\n    components: {\n      root: 'nav',\n    },\n\n    root: slot.always(\n      getNativeElementProps('nav', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'nav' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeaderNavigation_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC,MACgC;IAChC,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js

@@ -15,7 +15,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bxn5svx: "f1ftwmyh"
   }
 }, {
-  d: [".f19304h5{margin-top:calc(var(--spacingVerticalS) * -1);}", ".f1qb19o0{margin-right:calc(var(--spacingHorizontalL) * -1);}", ".f1p10pdi{margin-left:calc(var(--spacingHorizontalL) * -1);}", ".f118i8d9{margin-bottom:calc(var(--spacingVerticalS) * -1);}", ".f1ftwmyh{-webkit-order:0;-ms-flex-order:0;order:0;}"]
+  d: [".f19304h5{margin-top:calc(var(--spacingVerticalS) * -1);}", ".f1qb19o0{margin-right:calc(var(--spacingHorizontalL) * -1);}", ".f1p10pdi{margin-left:calc(var(--spacingHorizontalL) * -1);}", ".f118i8d9{margin-bottom:calc(var(--spacingVerticalS) * -1);}", ".f1ftwmyh{order:0;}"]
 });
 /**
  * Apply styling to the DrawerHeaderNavigation slots based on the state

package/lib/components/DrawerHeaderTitle/renderDrawerHeaderTitle.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerHeaderTitle
  */ export const renderDrawerHeaderTitle_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root, slots.heading && /*#__PURE__*/ React.createElement(slots.heading, slotProps.heading), slots.action && /*#__PURE__*/ React.createElement(slots.action, slotProps.action));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.heading && /*#__PURE__*/ createElement(state.heading, null), state.action && /*#__PURE__*/ createElement(state.action, null));
 };

package/lib/components/DrawerHeaderTitle/renderDrawerHeaderTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n  const { slots, slotProps } = getSlots<DrawerHeaderTitleSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.heading && <slots.heading {...slotProps.heading} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"names":["React","getSlots","renderDrawerHeaderTitle_unstable","state","slots","slotProps","root","heading","action"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC,QAAkC;IACjF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAAiCE;IAE9D,qBACE,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,OAAO,kBAAI,oBAACH,MAAMG,OAAO,EAAKF,UAAUE,OAAO,GACrDH,MAAMI,MAAM,kBAAI,oBAACJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM;AAGzD,EAAE"}
+{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n  assertSlots<DrawerHeaderTitleSlots>(state);\n\n  return (\n    <state.root>\n      {state.heading && <state.heading />}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderDrawerHeaderTitle_unstable","state","root","heading","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC,QAAkC;IACjFF,YAAoCE;IAEpC,qBACE,AAbJ,cAaKA,MAAMC,IAAI,QACRD,MAAME,OAAO,kBAAI,AAdxB,cAcyBF,MAAME,OAAO,SAC/BF,MAAMG,MAAM,kBAAI,AAfvB,cAewBH,MAAMG,MAAM;AAGpC,EAAE"}

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useDialogTitle_unstable } from '@fluentui/react-dialog';
 /**
  * Create the state required to render DrawerHeaderTitle.
@@ -17,19 +17,23 @@ import { useDialogTitle_unstable } from '@fluentui/react-dialog';
             heading: titleComponents.root,
             action: titleComponents.action
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        heading: resolveShorthand(props.heading, {
-            required: true,
+        heading: slot.optional(props.heading, {
+            renderByDefault: true,
             defaultProps: {
                 ...heading,
                 className: undefined
-            }
+            },
+            elementType: titleComponents.root
         }),
-        action: resolveShorthand(props.action, {
-            defaultProps: action
+        action: slot.optional(props.action, {
+            defaultProps: action,
+            elementType: titleComponents.action
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\nimport { useDialogTitle_unstable } from '@fluentui/react-dialog';\n\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 */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  const { root: heading, action, components: titleComponents } = useDialogTitle_unstable(props, ref);\n\n  return {\n    components: {\n      root: 'div',\n      heading: titleComponents.root,\n      action: titleComponents.action,\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    heading: resolveShorthand(props.heading, {\n      required: true,\n      defaultProps: {\n        ...heading,\n        className: undefined, // remove className from heading\n      },\n    }),\n    action: resolveShorthand(props.action, {\n      defaultProps: action,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useDialogTitle_unstable","useDrawerHeaderTitle_unstable","props","ref","root","heading","action","components","titleComponents","required","defaultProps","className","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAEpF,SAASC,uBAAuB,QAAQ,yBAAyB;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,MAC2B;IAC3B,MAAM,EAAEC,MAAMC,QAAO,EAAEC,OAAM,EAAEC,YAAYC,gBAAe,EAAE,GAAGR,wBAAwBE,OAAOC;IAE9F,OAAO;QACLI,YAAY;YACVH,MAAM;YACNC,SAASG,gBAAgBJ,IAAI;YAC7BE,QAAQE,gBAAgBF,MAAM;QAChC;QAEAF,MAAMN,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QACAG,SAASN,iBAAiBG,MAAMG,OAAO,EAAE;YACvCI,UAAU,IAAI;YACdC,cAAc;gBACZ,GAAGL,OAAO;gBACVM,WAAWC;YACb;QACF;QACAN,QAAQP,iBAAiBG,MAAMI,MAAM,EAAE;YACrCI,cAAcJ;QAChB;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\nimport { useDialogTitle_unstable } from '@fluentui/react-dialog';\n\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 */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  const { root: heading, action, components: titleComponents } = useDialogTitle_unstable(props, ref);\n\n  return {\n    components: {\n      root: 'div',\n      heading: titleComponents.root,\n      action: titleComponents.action,\n    },\n\n    root: slot.always(\n      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, // remove className from heading\n      },\n      elementType: titleComponents.root,\n    }),\n    action: slot.optional(props.action, {\n      defaultProps: action,\n      elementType: titleComponents.action,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogTitle_unstable","useDrawerHeaderTitle_unstable","props","ref","root","heading","action","components","titleComponents","always","elementType","optional","renderByDefault","defaultProps","className","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,uBAAuB,QAAQ,yBAAyB;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,MAC2B;IAC3B,MAAM,EAAEC,MAAMC,QAAO,EAAEC,OAAM,EAAEC,YAAYC,gBAAe,EAAE,GAAGR,wBAAwBE,OAAOC;IAE9F,OAAO;QACLI,YAAY;YACVH,MAAM;YACNC,SAASG,gBAAgBJ,IAAI;YAC7BE,QAAQE,gBAAgBF,MAAM;QAChC;QAEAF,MAAML,KAAKU,MAAM,CACfX,sBAAsB,OAAO;YAC3BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBL,SAASN,KAAKY,QAAQ,CAACT,MAAMG,OAAO,EAAE;YACpCO,iBAAiB,IAAI;YACrBC,cAAc;gBACZ,GAAGR,OAAO;gBACVS,WAAWC;YACb;YACAL,aAAaF,gBAAgBJ,IAAI;QACnC;QACAE,QAAQP,KAAKY,QAAQ,CAACT,MAAMI,MAAM,EAAE;YAClCO,cAAcP;YACdI,aAAaF,gBAAgBF,MAAM;QACrC;IACF;AACF,EAAE"}

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

@@ -20,7 +20,7 @@ const useStyles = /*#__PURE__*/__styles({
     t21cq0: ["faqnl2i", "fd75udd"]
   }
 }, {
-  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);}"]
+  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);}"]
 });
 /**
  * Apply styling to the DrawerHeaderTitle slots based on the state

package/lib/components/DrawerInline/renderDrawerInline.js

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerInline
  */ export const renderDrawerInline_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
+    assertSlots(state);
     if (!state.open) {
         return null;
     }
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n  const { slots, slotProps } = getSlots<DrawerInlineSlots>(state);\n\n  if (!state.open) {\n    return null;\n  }\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerInline_unstable","state","slots","slotProps","open","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA4BE;IAEzD,IAAI,CAACA,MAAMG,IAAI,EAAE;QACf,OAAO,IAAI;IACb,CAAC;IAED,qBAAO,oBAACF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n  assertSlots<DrawerInlineSlots>(state);\n\n  if (!state.open) {\n    return null;\n  }\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDrawerInline_unstable","state","open","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvEF,YAA+BE;IAE/B,IAAI,CAACA,MAAMC,IAAI,EAAE;QACf,OAAO,IAAI;IACb,CAAC;IACD,qBAAO,AAfT,cAeUD,MAAME,IAAI;AACpB,EAAE"}

package/lib/components/DrawerInline/useDrawerInline.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useControllableState } from '@fluentui/react-utilities';
+import { getNativeElementProps, useControllableState, slot } from '@fluentui/react-utilities';
 import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
 /**
  * Create the state required to render DrawerInline.
@@ -21,9 +21,11 @@ import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
         size,
         position,