@fluentui/react-dialog 9.5.20 → 9.5.21

package/CHANGELOG.json

@@ -2,7 +2,64 @@
   "name": "@fluentui/react-dialog",
   "entries": [
     {
-      "date": "Fri, 04 Aug 2023 08:48:25 GMT",
+      "date": "Wed, 09 Aug 2023 13:11:36 GMT",
+      "tag": "@fluentui/react-dialog_v9.5.21",
+      "version": "9.5.21",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "e615f12c54c8a4acad49930a02c3b703fd64692b",
+            "comment": "chore(teams-prg): migrate to new slot API"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-aria to v9.3.29",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.12.1",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.3.6",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:58 GMT",
       "tag": "@fluentui/react-dialog_v9.5.20",
       "version": "9.5.20",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Fri, 04 Aug 2023 08:48:25 GMT and should not be manually modified.
+This log was last generated on Wed, 09 Aug 2023 13:11:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.21)
+
+Wed, 09 Aug 2023 13:11:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.20..@fluentui/react-dialog_v9.5.21)
+
+### Patches
+
+- chore(teams-prg): migrate to new slot API ([PR #28751](https://github.com/microsoft/fluentui/pull/28751) by bernardo.sunderhus@gmail.com)
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- 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-aria to v9.3.29 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-tabster to v9.12.1 ([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)
+- Bump @fluentui/react-portal to v9.3.6 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+
 ## [9.5.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.20)
 
-Fri, 04 Aug 2023 08:48:25 GMT 
+Fri, 04 Aug 2023 08:52:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.19..@fluentui/react-dialog_v9.5.20)
 
 ### Patches

package/lib/components/DialogActions/renderDialogActions.js

@@ -1,9 +1,9 @@
 /** @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 DialogActions
  */ export const renderDialogActions_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     // TODO Add additional slots in the appropriate place
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

package/lib/components/DialogActions/renderDialogActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDialogActions.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';\n\n/**\n * Render the final JSX of DialogActions\n */\nexport const renderDialogActions_unstable = (state: DialogActionsState) => {\n  const { slots, slotProps } = getSlotsNext<DialogActionsSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderDialogActions_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,+BAA+B,CAACC,QAA8B;IACzE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAiCE;IAE9D,qDAAqD;IACrD,qBAAO,AAdT,cAcUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDialogActions.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';\n\n/**\n * Render the final JSX of DialogActions\n */\nexport const renderDialogActions_unstable = (state: DialogActionsState) => {\n  assertSlots<DialogActionsSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDialogActions_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzEF,YAAgCE;IAEhC,qDAAqD;IACrD,qBAAO,AAdT,cAcUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DialogActions/useDialogActions.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 DialogActions.
  *
@@ -14,9 +14,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
         position,
         fluid

package/lib/components/DialogActions/useDialogActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDialogActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n  props: DialogActionsProps,\n  ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n  const { position = 'end', fluid = false } = props;\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    position,\n    fluid,\n  };\n};\n"],"names":["React","getNativeElementProps","useDialogActions_unstable","props","ref","position","fluid","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,UAAW,MAAK,EAAEC,OAAQ,KAAK,CAAA,EAAE,GAAGH;IAC5C,OAAO;QACLI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;QACAE;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDialogActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n  props: DialogActionsProps,\n  ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n  const { position = 'end', fluid = false } = props;\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    position,\n    fluid,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogActions_unstable","props","ref","position","fluid","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,UAAW,MAAK,EAAEC,OAAQ,KAAK,CAAA,EAAE,GAAGH;IAC5C,OAAO;QACLI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL;QACAC;IACF;AACF,EAAE"}

package/lib/components/DialogActions/useDialogActionsStyles.styles.js

@@ -34,14 +34,14 @@ const useStyles = /*#__PURE__*/__styles({
     Br312pm: "fwpfdsa"
   }
 }, {
-  d: [".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1cztu7b{-ms-grid-row:3;grid-row-start:3;}", ".fcu02xx{-ms-grid-row-span:3;grid-row-end:3;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1a7i8kp{-ms-grid-column-align:end;justify-self:end;}", ".fd46tj4{-ms-grid-column:2;grid-column-start:2;}", ".fsyjsko{-ms-grid-column-span:4;grid-column-end:4;}", ".fsxvdwy{-ms-grid-column-align:start;justify-self:start;}", ".fwpfdsa{-ms-grid-column:1;grid-column-start:1;}", ".f1e2fz10{-ms-grid-column-span:2;grid-column-end:2;}"],
-  m: [["@media screen and (max-width: 480px){.f6glcwc{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}", {
+  d: [".f3052tw{height:fit-content;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1cztu7b{grid-row-start:3;}", ".fcu02xx{grid-row-end:3;}", ".f4px1ci{column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1a7i8kp{justify-self:end;}", ".fd46tj4{grid-column-start:2;}", ".fsyjsko{grid-column-end:4;}", ".fsxvdwy{justify-self:start;}", ".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}"],
+  m: [["@media screen and (max-width: 480px){.f6glcwc{flex-direction:column;}}", {
     m: "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f1e3st1r{-ms-grid-column-align:stretch;justify-self:stretch;}}", {
+  }], ["@media screen and (max-width: 480px){.f1e3st1r{justify-self:stretch;}}", {
     m: "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f1f41i0t{-ms-grid-column:1;grid-column-start:1;}}", {
+  }], ["@media screen and (max-width: 480px){.f1f41i0t{grid-column-start:1;}}", {
     m: "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f11ihkml{-ms-grid-column-span:4;grid-column-end:4;}}", {
+  }], ["@media screen and (max-width: 480px){.f11ihkml{grid-column-end:4;}}", {
     m: "screen and (max-width: 480px)"
   }]]
 });

package/lib/components/DialogBody/renderDialogBody.js

@@ -1,9 +1,9 @@
 /** @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 DialogBody
  */ export const renderDialogBody_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     // TODO Add additional slots in the appropriate place
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

package/lib/components/DialogBody/renderDialogBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDialogBody.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState) => {\n  const { slots, slotProps } = getSlotsNext<DialogBodySlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderDialogBody_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,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAE3D,qDAAqD;IACrD,qBAAO,AAdT,cAcUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDialogBody.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState) => {\n  assertSlots<DialogBodySlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDialogBody_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnEF,YAA6BE;IAE7B,qDAAqD;IACrD,qBAAO,AAdT,cAcUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DialogBody/useDialogBody.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 DialogBody.
  *
@@ -14,9 +14,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
+        root: slot.always(getNativeElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib/components/DialogBody/useDialogBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDialogBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogBodyProps, DialogBodyState } from './DialogBody.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HTMLElement>): DialogBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(props.as ?? 'div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDialogBody_unstable","props","ref","components","root","as"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;QAKhFD;IAJ9B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,sBAAsBE,CAAAA,YAAAA,MAAMI,EAAE,cAARJ,uBAAAA,YAAY,KAAK,EAAE;YAC7CC;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDialogBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogBodyProps, DialogBodyState } from './DialogBody.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HTMLElement>): DialogBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps(props.as ?? 'div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogBody_unstable","props","ref","components","root","always","as","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;QAMpFD;IAL1B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,sBAAsBG,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAY,KAAK,EAAE;YACvCC;YACA,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/DialogBody/useDialogBodyStyles.styles.js

@@ -22,10 +22,10 @@ const useStyles = /*#__PURE__*/__styles({
     Bqu9lor: "f1t97isy"
   }
 }, {
-  d: [".f13qh94s{display:-ms-grid;display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".flnwrvu{max-height:calc(100vh - 2 * 24px);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1x46k84{-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr;}", ".fjj47a5{-ms-grid-columns:1fr 1fr auto;grid-template-columns:1fr 1fr auto;}"],
+  d: [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".flnwrvu{max-height:calc(100vh - 2 * 24px);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f4px1ci{column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1x46k84{grid-template-rows:auto 1fr;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}"],
   m: [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
     m: "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f1t97isy{-ms-grid-rows:auto 1fr auto;grid-template-rows:auto 1fr auto;}}", {
+  }], ["@media screen and (max-width: 480px){.f1t97isy{grid-template-rows:auto 1fr auto;}}", {
     m: "screen and (max-width: 480px)"
   }]]
 });

package/lib/components/DialogContent/renderDialogContent.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 DialogContent
  */ export const renderDialogContent_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/DialogContent/renderDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDialogContent.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState) => {\n  const { slots, slotProps } = getSlotsNext<DialogContentSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderDialogContent_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,+BAA+B,CAACC,QAA8B;IACzE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAiCE;IAE9D,qBAAO,AAbT,cAaUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDialogContent.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState) => {\n  assertSlots<DialogContentSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDialogContent_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzEF,YAAgCE;IAEhC,qBAAO,AAbT,cAaUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DialogContent/useDialogContent.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 DialogBody.
  *
@@ -14,9 +14,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
+        root: slot.always(getNativeElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib/components/DialogContent/useDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDialogContent.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { DialogContentProps, DialogContentState } from './DialogContent.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogContent_unstable = (\n  props: DialogContentProps,\n  ref: React.Ref<HTMLElement>,\n): DialogContentState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(props.as ?? 'div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDialogContent_unstable","props","ref","components","root","as"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;QAKOD;IAJ9B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,sBAAsBE,CAAAA,YAAAA,MAAMI,EAAE,cAARJ,uBAAAA,YAAY,KAAK,EAAE;YAC7CC;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDialogContent.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { DialogContentProps, DialogContentState } from './DialogContent.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogContent_unstable = (\n  props: DialogContentProps,\n  ref: React.Ref<HTMLElement>,\n): DialogContentState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps(props.as ?? 'div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogContent_unstable","props","ref","components","root","always","as","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;QAMGD;IAL1B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,sBAAsBG,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAY,KAAK,EAAE;YACvCC;YACA,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/DialogContent/useDialogContentStyles.styles.js

@@ -29,7 +29,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bg96gwp: "f1i3iumi"
   }
 }, {
-  d: [".f5zp4f{overflow-y:auto;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".faunodf{-ms-grid-row:2;grid-row-start:2;}", ".f88nxoq{-ms-grid-row-span:2;grid-row-end:2;}", ".fwpfdsa{-ms-grid-column:1;grid-column-start:1;}", ".fsyjsko{-ms-grid-column-span:4;grid-column-end:4;}", ".fr4fn7s{padding-top:var(--strokeWidthThick);}", ".f171n1a0{padding-right:var(--strokeWidthThick);}", ".f1jwbs5a{padding-left:var(--strokeWidthThick);}", ".f1ean75l{padding-bottom:var(--strokeWidthThick);}", ".fxlnl9e{margin-top:calc(var(--strokeWidthThick) * -1);}", ".ffs23cn{margin-right:calc(var(--strokeWidthThick) * -1);}", ".f1v5tmjd{margin-left:calc(var(--strokeWidthThick) * -1);}", ".f2uu7rc{margin-bottom:calc(var(--strokeWidthThick) * -1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+  d: [".f5zp4f{overflow-y:auto;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".faunodf{grid-row-start:2;}", ".f88nxoq{grid-row-end:2;}", ".fwpfdsa{grid-column-start:1;}", ".fsyjsko{grid-column-end:4;}", ".fr4fn7s{padding-top:var(--strokeWidthThick);}", ".f171n1a0{padding-right:var(--strokeWidthThick);}", ".f1jwbs5a{padding-left:var(--strokeWidthThick);}", ".f1ean75l{padding-bottom:var(--strokeWidthThick);}", ".fxlnl9e{margin-top:calc(var(--strokeWidthThick) * -1);}", ".ffs23cn{margin-right:calc(var(--strokeWidthThick) * -1);}", ".f1v5tmjd{margin-left:calc(var(--strokeWidthThick) * -1);}", ".f2uu7rc{margin-bottom:calc(var(--strokeWidthThick) * -1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
 });
 /**
  * Apply styling to the DialogContent slots based on the state

package/lib/components/DialogSurface/renderDialogSurface.js

@@ -1,12 +1,12 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { DialogSurfaceProvider } from '../../contexts';
 import { Portal } from '@fluentui/react-portal';
 /**
  * Render the final JSX of DialogSurface
  */ export const renderDialogSurface_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(Portal, null, slots.backdrop && /*#__PURE__*/ createElement(slots.backdrop, slotProps.backdrop), /*#__PURE__*/ createElement(DialogSurfaceProvider, {
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(Portal, null, state.backdrop && /*#__PURE__*/ createElement(state.backdrop, null), /*#__PURE__*/ createElement(DialogSurfaceProvider, {
         value: contextValues.dialogSurface
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root)));
+    }, /*#__PURE__*/ createElement(state.root, null)));
 };

package/lib/components/DialogSurface/renderDialogSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\nimport { DialogSurfaceProvider } from '../../contexts';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n  const { slots, slotProps } = getSlotsNext<DialogSurfaceSlots>(state);\n\n  return (\n    <Portal>\n      {slots.backdrop && <slots.backdrop {...slotProps.backdrop} />}\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        <slots.root {...slotProps.root} />\n      </DialogSurfaceProvider>\n    </Portal>\n  );\n};\n"],"names":["createElement","getSlotsNext","DialogSurfaceProvider","Portal","renderDialogSurface_unstable","state","contextValues","slots","slotProps","backdrop","value","dialogSurface","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC,gBAA8C;IACpH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAiCI;IAE9D,qBACE,AAhBJ,cAgBKF,cACEI,MAAME,QAAQ,kBAAI,AAjBzB,cAiB0BF,MAAME,QAAQ,EAAKD,UAAUC,QAAQ,iBACzD,AAlBN,cAkBOP;QAAsBQ,OAAOJ,cAAcK,aAAa;qBACvD,AAnBR,cAmBSJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI;AAItC,EAAE"}
+{"version":3,"sources":["renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\nimport { DialogSurfaceProvider } from '../../contexts';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n  assertSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <Portal>\n      {state.backdrop && <state.backdrop />}\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        <state.root />\n      </DialogSurfaceProvider>\n    </Portal>\n  );\n};\n"],"names":["createElement","assertSlots","DialogSurfaceProvider","Portal","renderDialogSurface_unstable","state","contextValues","backdrop","value","dialogSurface","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC,gBAA8C;IACpHL,YAAgCI;IAEhC,qBACE,AAhBJ,cAgBKF,cACEE,MAAME,QAAQ,kBAAI,AAjBzB,cAiB0BF,MAAME,QAAQ,uBAClC,AAlBN,cAkBOL;QAAsBM,OAAOF,cAAcG,aAAa;qBACvD,AAnBR,cAmBSJ,MAAMK,IAAI;AAInB,EAAE"}

package/lib/components/DialogSurface/useDialogSurface.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, useEventCallback, useMergedRefs, isResolvedShorthand, slot } from '@fluentui/react-utilities';
 import { useDialogContext_unstable } from '../../contexts';
 import { Escape } from '@fluentui/keyboard-keys';
 /**
@@ -44,11 +44,12 @@ import { Escape } from '@fluentui/keyboard-keys';
             event.stopPropagation();
         }
     });
-    const backdrop = resolveShorthand(props.backdrop, {
-        required: open && modalType !== 'non-modal',
+    const backdrop = slot.optional(props.backdrop, {
+        renderByDefault: open && modalType !== 'non-modal',
         defaultProps: {
             'aria-hidden': 'true'
-        }
+        },
+        elementType: 'div'
     });
     if (backdrop) {
         backdrop.onClick = handledBackdropClick;
@@ -60,7 +61,7 @@ import { Escape } from '@fluentui/keyboard-keys';
             root: 'div'
         },
         backdrop,
-        root: getNativeElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
+        root: slot.always(getNativeElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
             tabIndex: -1,
             'aria-modal': modalType !== 'non-modal',
             role: modalType === 'alert' ? 'alertdialog' : 'dialog',
@@ -69,6 +70,8 @@ import { Escape } from '@fluentui/keyboard-keys';
             ...modalAttributes,
             onKeyDown: handleKeyDown,
             ref: useMergedRefs(ref, dialogRef)
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib/components/DialogSurface/useDialogSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  resolveShorthand,\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n  props: DialogSurfaceProps,\n  ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n  const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.backdrop)) {\n      props.backdrop.onClick?.(event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick',\n      });\n    }\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n\n    if (event.key === Escape && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.stopPropagation();\n    }\n  });\n\n  const backdrop = resolveShorthand(props.backdrop, {\n    required: open && modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n  });\n\n  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n  }\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n    },\n    backdrop,\n    root: getNativeElementProps(props.as ?? 'div', {\n      tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n      'aria-modal': modalType !== 'non-modal',\n      role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n      ...props,\n      ...modalAttributes,\n      onKeyDown: handleKeyDown,\n      ref: useMergedRefs(ref, dialogRef),\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","isResolvedShorthand","useDialogContext_unstable","Escape","useDialogSurface_unstable","props","ref","modalType","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","stopPropagation","required","defaultProps","components","root","as","tabIndex","role","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,QACd,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,iBAAiB;AAC3D,SAASC,MAAM,QAAQ,0BAA0B;AAEjD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAMC,YAAYL,0BAA0BM,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,kBAAkBP,0BAA0BM,CAAAA,MAAOA,IAAIC,eAAe;IAC5E,MAAMC,YAAYR,0BAA0BM,CAAAA,MAAOA,IAAIE,SAAS;IAChE,MAAMC,OAAOT,0BAA0BM,CAAAA,MAAOA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBV,0BAA0BM,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBX,0BAA0BM,CAAAA,MAAOA,IAAIM,aAAa;IAExE,MAAMC,uBAAuBhB,iBAAiB,CAACiB,QAA4C;QACzF,IAAIf,oBAAoBI,MAAMY,QAAQ,GAAG;gBACvCZ,iBAAAA;YAAAA,CAAAA,0BAAAA,CAAAA,kBAAAA,MAAMY,QAAQ,EAACC,OAAO,cAAtBb,qCAAAA,KAAAA,IAAAA,wBAAAA,KAAAA,iBAAyBW;QAC3B,CAAC;QACD,IAAIT,cAAc,WAAW,CAACS,MAAMG,kBAAkB,IAAI;YACxDP,kBAAkB;gBAChBI;gBACAL,MAAM,KAAK;gBACXS,MAAM;YACR;QACF,CAAC;IACH;IAEA,MAAMC,gBAAgBtB,iBAAiB,CAACiB,QAA+C;YACrFX;QAAAA,CAAAA,mBAAAA,MAAMiB,SAAS,cAAfjB,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkBW;QAElB,IAAIA,MAAMO,GAAG,KAAKpB,UAAU,CAACa,MAAMG,kBAAkB,IAAI;YACvDP,kBAAkB;gBAChBI;gBACAL,MAAM,KAAK;gBACXS,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,eAAe;QACvB,CAAC;IACH;IAEA,MAAMP,WAAWnB,iBAAiBO,MAAMY,QAAQ,EAAE;QAChDQ,UAAUd,QAAQJ,cAAc;QAChCmB,cAAc;YACZ,eAAe;QACjB;IACF;IAEA,IAAIT,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB,CAAC;QAQ6BV;IAN9B,OAAO;QACLsB,YAAY;YACVV,UAAU;YACVW,MAAM;QACR;QACAX;QACAW,MAAM/B,sBAAsBQ,CAAAA,YAAAA,MAAMwB,EAAE,cAARxB,uBAAAA,YAAY,KAAK,EAAE;YAC7CyB,UAAU,CAAC;YACX,cAAcvB,cAAc;YAC5BwB,MAAMxB,cAAc,UAAU,gBAAgB,QAAQ;YACtD,mBAAmBF,KAAK,CAAC,aAAa,GAAG2B,YAAYnB,aAAa;YAClE,GAAGR,KAAK;YACR,GAAGI,eAAe;YAClBa,WAAWD;YACXf,KAAKN,cAAcM,KAAKI;QAC1B;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n  props: DialogSurfaceProps,\n  ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n  const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.backdrop)) {\n      props.backdrop.onClick?.(event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick',\n      });\n    }\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n\n    if (event.key === Escape && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.stopPropagation();\n    }\n  });\n\n  const backdrop = slot.optional(props.backdrop, {\n    renderByDefault: open && modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n    elementType: 'div',\n  });\n  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n  }\n  return {\n    components: { backdrop: 'div', root: 'div' },\n    backdrop,\n    root: slot.always(\n      getNativeElementProps(props.as ?? 'div', {\n        tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n        'aria-modal': modalType !== 'non-modal',\n        role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n        'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n        ...props,\n        ...modalAttributes,\n        onKeyDown: handleKeyDown,\n        ref: useMergedRefs(ref, dialogRef),\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","useMergedRefs","isResolvedShorthand","slot","useDialogContext_unstable","Escape","useDialogSurface_unstable","props","ref","modalType","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","stopPropagation","optional","renderByDefault","defaultProps","elementType","components","root","always","as","tabIndex","role","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,iBAAiB;AAC3D,SAASC,MAAM,QAAQ,0BAA0B;AAEjD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAMC,YAAYL,0BAA0BM,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,kBAAkBP,0BAA0BM,CAAAA,MAAOA,IAAIC,eAAe;IAC5E,MAAMC,YAAYR,0BAA0BM,CAAAA,MAAOA,IAAIE,SAAS;IAChE,MAAMC,OAAOT,0BAA0BM,CAAAA,MAAOA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBV,0BAA0BM,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBX,0BAA0BM,CAAAA,MAAOA,IAAIM,aAAa;IAExE,MAAMC,uBAAuBjB,iBAAiB,CAACkB,QAA4C;QACzF,IAAIhB,oBAAoBK,MAAMY,QAAQ,GAAG;gBACvCZ,iBAAAA;YAAAA,CAAAA,0BAAAA,CAAAA,kBAAAA,MAAMY,QAAQ,EAACC,OAAO,cAAtBb,qCAAAA,KAAAA,IAAAA,wBAAAA,KAAAA,iBAAyBW;QAC3B,CAAC;QACD,IAAIT,cAAc,WAAW,CAACS,MAAMG,kBAAkB,IAAI;YACxDP,kBAAkB;gBAChBI;gBACAL,MAAM,KAAK;gBACXS,MAAM;YACR;QACF,CAAC;IACH;IAEA,MAAMC,gBAAgBvB,iBAAiB,CAACkB,QAA+C;YACrFX;QAAAA,CAAAA,mBAAAA,MAAMiB,SAAS,cAAfjB,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkBW;QAElB,IAAIA,MAAMO,GAAG,KAAKpB,UAAU,CAACa,MAAMG,kBAAkB,IAAI;YACvDP,kBAAkB;gBAChBI;gBACAL,MAAM,KAAK;gBACXS,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,eAAe;QACvB,CAAC;IACH;IAEA,MAAMP,WAAWhB,KAAKwB,QAAQ,CAACpB,MAAMY,QAAQ,EAAE;QAC7CS,iBAAiBf,QAAQJ,cAAc;QACvCoB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IACA,IAAIX,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB,CAAC;QAKyBV;IAJ1B,OAAO;QACLwB,YAAY;YAAEZ,UAAU;YAAOa,MAAM;QAAM;QAC3Cb;QACAa,MAAM7B,KAAK8B,MAAM,CACflC,sBAAsBQ,CAAAA,YAAAA,MAAM2B,EAAE,cAAR3B,uBAAAA,YAAY,KAAK,EAAE;YACvC4B,UAAU,CAAC;YACX,cAAc1B,cAAc;YAC5B2B,MAAM3B,cAAc,UAAU,gBAAgB,QAAQ;YACtD,mBAAmBF,KAAK,CAAC,aAAa,GAAG8B,YAAYtB,aAAa;YAClE,GAAGR,KAAK;YACR,GAAGI,eAAe;YAClBa,WAAWD;YACXf,KAAKP,cAAcO,KAAKI;QAC1B,IACA;YAAEkB,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js

@@ -104,7 +104,7 @@ const useStyles = /*#__PURE__*/__styles({
 }, {
   f: [".ftqa4ok:focus{outline-style:none;}"],
   i: [".f2hkw1w:focus-visible{outline-style:none;}"],
-  d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".ftgm304{display:block;}", ".f1c515w{-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;}", ".f1bitti{visibility:unset;}", ".f15twtuk{top:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1yab3r1{bottom:0;}", ".fuq56rw{padding-top:24px;}", ".f15kemlc{padding-right:24px;}", ".fdgang7{padding-left:24px;}", ".fl2zwns{padding-bottom:24px;}", ".fgr6219{margin-top:auto;}", ".f1ujusj6{margin-right:auto;}", ".fcgxt0o{margin-left:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".f19dog8a{position:fixed;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".fvgz9i8{max-width:600px;}", ".f6a9g1z{max-height:100vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10nrhrw{box-shadow:var(--shadow64);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".fju19wo{background-color:rgba(0, 0, 0, 0.4);}", ".f113wtx2{top:0px;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f5gq2j6{bottom:0px;}", ".f3rmtva{background-color:transparent;}", ".foe20jx::backdrop{background-color:transparent;}"],
+  d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".ftgm304{display:block;}", ".f1c515w{-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;}", ".f1bitti{visibility:unset;}", ".f15twtuk{top:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1yab3r1{bottom:0;}", ".fuq56rw{padding-top:24px;}", ".f15kemlc{padding-right:24px;}", ".fdgang7{padding-left:24px;}", ".fl2zwns{padding-bottom:24px;}", ".fgr6219{margin-top:auto;}", ".f1ujusj6{margin-right:auto;}", ".fcgxt0o{margin-left:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".f19dog8a{position:fixed;}", ".f3052tw{height:fit-content;}", ".fvgz9i8{max-width:600px;}", ".f6a9g1z{max-height:100vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10nrhrw{box-shadow:var(--shadow64);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".fju19wo{background-color:rgba(0, 0, 0, 0.4);}", ".f113wtx2{top:0px;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f5gq2j6{bottom:0px;}", ".f3rmtva{background-color:transparent;}", ".foe20jx::backdrop{background-color:transparent;}"],
   m: [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
     m: "screen and (max-width: 480px)"
   }]]

package/lib/components/DialogTitle/renderDialogTitle.js

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

package/lib/components/DialogTitle/renderDialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDialogTitle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState) => {\n  const { slots, slotProps } = getSlotsNext<DialogTitleSlots>(state);\n\n  return (\n    <>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n      {slots.action && <slots.action {...slotProps.action} />}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","getSlotsNext","renderDialogTitle_unstable","state","slots","slotProps","root","children","action"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AAEtE,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA+BE;IAE5D,qBACE,AAdJ,cADA,8BAgBM,AAfN,cAeOC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAAGD,UAAUC,IAAI,CAACC,QAAQ,GACvDH,MAAMI,MAAM,kBAAI,AAhBvB,cAgBwBJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM;AAGzD,EAAE"}
+{"version":3,"sources":["renderDialogTitle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState) => {\n  assertSlots<DialogTitleSlots>(state);\n\n  return (\n    <>\n      <state.root>{state.root.children}</state.root>\n      {state.action && <state.action />}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","assertSlots","renderDialogTitle_unstable","state","root","children","action"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AAEtE,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrEF,YAA8BE;IAE9B,qBACE,AAdJ,cADA,8BAgBM,AAfN,cAeOA,MAAMC,IAAI,QAAED,MAAMC,IAAI,CAACC,QAAQ,GAC/BF,MAAMG,MAAM,kBAAI,AAhBvB,cAgBwBH,MAAMG,MAAM;AAGpC,EAAE"}

package/lib/components/DialogTitle/useDialogTitle.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useDialogContext_unstable } from '../../contexts/dialogContext';
 import { Dismiss20Regular } from '@fluentui/react-icons';
-import { resolveShorthand } from '@fluentui/react-utilities';
 import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
 import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
 /**
@@ -22,13 +21,15 @@ import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
             root: 'h2',
             action: 'div'
         },
-        root: getNativeElementProps(as !== null && as !== void 0 ? as : 'h2', {
+        root: slot.always(getNativeElementProps(as !== null && as !== void 0 ? as : 'h2', {
             ref,
             id: useDialogContext_unstable((ctx)=>ctx.dialogTitleId),
             ...props
+        }), {
+            elementType: 'h2'
         }),
-        action: resolveShorthand(action, {
-            required: modalType === 'non-modal',
+        action: slot.optional(action, {
+            renderByDefault: modalType === 'non-modal',
             defaultProps: {
                 children: /*#__PURE__*/ React.createElement(DialogTrigger, {
                     disableButtonEnhancement: true,
@@ -39,7 +40,8 @@ import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
                     // TODO: find a better way to add internal labels
                     "aria-label": "close"
                 }, /*#__PURE__*/ React.createElement(Dismiss20Regular, null)))
-            }
+            },
+            elementType: 'div'
         })
     };
 };

package/lib/components/DialogTitle/useDialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {\n  const { as, action } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const internalStyles = useDialogTitleInternalStyles();\n\n  return {\n    components: {\n      root: 'h2',\n      action: 'div',\n    },\n    root: getNativeElementProps(as ?? 'h2', {\n      ref,\n      id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n      ...props,\n    }),\n    action: resolveShorthand(action, {\n      required: modalType === 'non-modal',\n      defaultProps: {\n        children: (\n          <DialogTrigger disableButtonEnhancement action=\"close\">\n            <button\n              type=\"button\"\n              className={internalStyles.button}\n              // TODO: find a better way to add internal labels\n              aria-label=\"close\"\n            >\n              <Dismiss20Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDialogContext_unstable","Dismiss20Regular","resolveShorthand","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","as","action","modalType","ctx","internalStyles","components","root","id","dialogTitleId","required","defaultProps","children","disableButtonEnhancement","button","type","className","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,SAASC,yBAAyB,QAAQ,+BAA+B;AACzE,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,4BAA4B,QAAQ,gCAAgC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAqD;IACpH,MAAM,EAAEC,GAAE,EAAEC,OAAM,EAAE,GAAGH;IACvB,MAAMI,YAAYV,0BAA0BW,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBR;IAEvB,OAAO;QACLS,YAAY;YACVC,MAAM;YACNL,QAAQ;QACV;QACAK,MAAMf,sBAAsBS,eAAAA,gBAAAA,KAAM,IAAI,EAAE;YACtCD;YACAQ,IAAIf,0BAA0BW,CAAAA,MAAOA,IAAIK,aAAa;YACtD,GAAGV,KAAK;QACV;QACAG,QAAQP,iBAAiBO,QAAQ;YAC/BQ,UAAUP,cAAc;YACxBQ,cAAc;gBACZC,wBACE,oBAAChB;oBAAciB,0BAAAA,IAAwB;oBAACX,QAAO;iCAC7C,oBAACY;oBACCC,MAAK;oBACLC,WAAWX,eAAeS,MAAM;oBAChC,iDAAiD;oBACjDG,cAAW;iCAEX,oBAACvB;YAIT;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {\n  const { as, action } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const internalStyles = useDialogTitleInternalStyles();\n\n  return {\n    components: {\n      root: 'h2',\n      action: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps(as ?? 'h2', {\n        ref,\n        id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n        ...props,\n      }),\n      { elementType: 'h2' },\n    ),\n    action: slot.optional(action, {\n      renderByDefault: modalType === 'non-modal',\n      defaultProps: {\n        children: (\n          <DialogTrigger disableButtonEnhancement action=\"close\">\n            <button\n              type=\"button\"\n              className={internalStyles.button}\n              // TODO: find a better way to add internal labels\n              aria-label=\"close\"\n            >\n              <Dismiss20Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogContext_unstable","Dismiss20Regular","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","as","action","modalType","ctx","internalStyles","components","root","always","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","disableButtonEnhancement","button","type","className","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,yBAAyB,QAAQ,+BAA+B;AACzE,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,4BAA4B,QAAQ,gCAAgC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAqD;IACpH,MAAM,EAAEC,GAAE,EAAEC,OAAM,EAAE,GAAGH;IACvB,MAAMI,YAAYT,0BAA0BU,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBR;IAEvB,OAAO;QACLS,YAAY;YACVC,MAAM;YACNL,QAAQ;QACV;QACAK,MAAMd,KAAKe,MAAM,CACfhB,sBAAsBS,eAAAA,gBAAAA,KAAM,IAAI,EAAE;YAChCD;YACAS,IAAIf,0BAA0BU,CAAAA,MAAOA,IAAIM,aAAa;YACtD,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAK;QAEtBT,QAAQT,KAAKmB,QAAQ,CAACV,QAAQ;YAC5BW,iBAAiBV,cAAc;YAC/BW,cAAc;gBACZC,wBACE,oBAACnB;oBAAcoB,0BAAAA,IAAwB;oBAACd,QAAO;iCAC7C,oBAACe;oBACCC,MAAK;oBACLC,WAAWd,eAAeY,MAAM;oBAChC,iDAAiD;oBACjDG,cAAW;iCAEX,oBAACzB;YAIT;YACAgB,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/DialogTitle/useDialogTitleStyles.styles.js

@@ -34,7 +34,7 @@ const useStyles = /*#__PURE__*/__styles({
     qb2dma: "f9h729m"
   }
 }, {
-  d: [".f16hsg94{-ms-grid-row:1;grid-row-start:1;}", ".f1amvztq{-ms-grid-row-span:1;grid-row-end:1;}", ".fwpfdsa{-ms-grid-column:1;grid-column-start:1;}", ".fz1yyy6{-ms-grid-column-span:3;grid-column-end:3;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fsyjsko{-ms-grid-column-span:4;grid-column-end:4;}", ".fis13di{-ms-grid-column:3;grid-column-start:3;}", ".f1a7i8kp{-ms-grid-column-align:end;justify-self:end;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;-ms-grid-row-align:start;align-self:start;}"]
+  d: [".f16hsg94{grid-row-start:1;}", ".f1amvztq{grid-row-end:1;}", ".fwpfdsa{grid-column-start:1;}", ".fz1yyy6{grid-column-end:3;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fsyjsko{grid-column-end:4;}", ".fis13di{grid-column-start:3;}", ".f1a7i8kp{justify-self:end;}", ".f9h729m{align-self:start;}"]
 });
 /**
  * Styles to be applied on internal elements used by default action on non-modal Dialog

package/lib-commonjs/components/DialogActions/renderDialogActions.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "renderDialogActions_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderDialogActions_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    (0, _reactUtilities.assertSlots)(state);
     // TODO Add additional slots in the appropriate place
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null);
 };

package/lib-commonjs/components/DialogActions/renderDialogActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDialogActions.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of DialogActions\n */ export const renderDialogActions_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    // TODO Add additional slots in the appropriate place\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root);\n};\n"],"names":["renderDialogActions_unstable","state","slots","slotProps","getSlotsNext","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,+BAA+B,CAACC,QAAQ;IACrD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,qDAAqD;IACrD,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI;AACjE"}
+{"version":3,"sources":["renderDialogActions.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 DialogActions\n */ export const renderDialogActions_unstable = (state)=>{\n    assertSlots(state);\n    // TODO Add additional slots in the appropriate place\n    return /*#__PURE__*/ createElement(state.root, null);\n};\n"],"names":["renderDialogActions_unstable","state","assertSlots","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,+BAA+B,CAACC,QAAQ;IACrDC,IAAAA,2BAAW,EAACD;IACZ,qDAAqD;IACrD,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI;AACvD"}

package/lib-commonjs/components/DialogActions/useDialogActions.js

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

package/lib-commonjs/components/DialogActions/useDialogActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDialogActions.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */ export const useDialogActions_unstable = (props, ref)=>{\n    const { position ='end' , fluid =false  } = props;\n    return {\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ref,\n            ...props\n        }),\n        position,\n        fluid\n    };\n};\n"],"names":["useDialogActions_unstable","props","ref","position","fluid","components","root","getNativeElementProps"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACe;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC,MAAM;IACvD,MAAM,EAAEC,UAAU,MAAK,EAAGC,OAAO,KAAK,CAAA,EAAG,GAAGH;IAC5C,OAAO;QACHI,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BL;YACA,GAAGD,KAAK;QACZ;QACAE;QACAC;IACJ;AACJ"}
+{"version":3,"sources":["useDialogActions.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */ export const useDialogActions_unstable = (props, ref)=>{\n    const { position ='end' , fluid =false  } = props;\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        position,\n        fluid\n    };\n};\n"],"names":["useDialogActions_unstable","props","ref","position","fluid","components","root","slot","always","getNativeElementProps","elementType"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACqB;AASjC,MAAMA,4BAA4B,CAACC,OAAOC,MAAM;IACvD,MAAM,EAAEC,UAAU,MAAK,EAAGC,OAAO,KAAK,CAAA,EAAG,GAAGH;IAC5C,OAAO;QACHI,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CP;YACA,GAAGD,KAAK;QACZ,IAAI;YACAS,aAAa;QACjB;QACAP;QACAC;IACJ;AACJ"}