@fluentui/react-dialog 9.0.0-beta.8 → 9.0.0

package/lib/components/DialogSurface/useDialogSurfaceStyles.js

@@ -1,7 +1,7 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { TITLE_GRID_AREA, ACTIONS_END_GRID_AREA, ACTIONS_START_GRID_AREA, SURFACE_BORDER_RADIUS, SURFACE_BORDER_WIDTH, SURFACE_PADDING, DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, BODY_GRID_AREA, TITLE_ACTION_GRID_AREA } from '../../contexts/constants';
-import { useDialogContext_unstable } from '../../contexts/dialogContext';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_RADIUS, SURFACE_BORDER_WIDTH, SURFACE_PADDING, useDialogContext_unstable } from '../../contexts';
 export const dialogSurfaceClassNames = {
   root: 'fui-DialogSurface',
   backdrop: 'fui-DialogSurface__backdrop'
@@ -11,7 +11,61 @@ export const dialogSurfaceClassNames = {
  */
 
 const useStyles = /*#__PURE__*/__styles({
+  "focusOutline": {
+    "Brovlpu": "ftqa4ok",
+    "B486eqv": "f2hkw1w",
+    "B8q5s1w": "f8hki3x",
+    "Bci5o5g": ["f1d2448m", "ffh67wi"],
+    "n8qw10": "f1bjia2o",
+    "Bdrgwmp": ["ffh67wi", "f1d2448m"],
+    "Bm4h7ae": "f15bsgw9",
+    "B7ys5i9": "f14e48fq",
+    "Busjfv9": "f18yb2kv",
+    "Bhk32uz": "fd6o370",
+    "Bf4ptjt": "fh1cnn4",
+    "kclons": ["fy7oxxb", "f184ne2d"],
+    "Bhdgwq3": "fpukqih",
+    "Blkhhs4": ["f184ne2d", "fy7oxxb"],
+    "Bqtpl0w": "frrh606",
+    "clg4pj": ["f1v5zibi", "fo2hd23"],
+    "hgwjuy": "ful5kiu",
+    "Bonggc9": ["fo2hd23", "f1v5zibi"],
+    "B1tsrr9": ["f1jqcqds", "ftffrms"],
+    "Dah5zi": ["ftffrms", "f1jqcqds"],
+    "Bkh64rk": ["f2e7qr6", "fsr1zz6"],
+    "qqdqy8": ["fsr1zz6", "f2e7qr6"],
+    "B6dhp37": "f1dvezut",
+    "i03rao": ["fd0oaoj", "f1cwg4i8"],
+    "Boxcth7": "fjvm52t",
+    "Bsom6fd": ["f1cwg4i8", "fd0oaoj"],
+    "J0r882": "fdiulkx",
+    "Bjwuhne": "f1yalx80",
+    "Ghsupd": ["fq22d5a", "f1jw7pan"],
+    "Bule8hv": ["f1jw7pan", "fq22d5a"]
+  },
   "root": {
+    "mc9l5x": "ftgm304",
+    "famaaq": "f1c515w",
+    "Bcdw1i0": "f1bitti",
+    "Bhzewxz": "f15twtuk",
+    "j35jbq": ["f1e31b4d", "f1vgc2s3"],
+    "B5kzvoi": "f1yab3r1",
+    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
+    "z8tnut": "fuq56rw",
+    "z189sj": ["f15kemlc", "fdgang7"],
+    "Byoj8tv": "fl2zwns",
+    "uwmqm3": ["fdgang7", "f15kemlc"],
+    "B6of3ja": "fgr6219",
+    "t21cq0": ["f1ujusj6", "fcgxt0o"],
+    "jrapky": "f10jk5vf",
+    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "B68tc82": "f1ln0qer",
+    "Bmxbyg5": "fa2wlxz",
+    "fshzfu": "f120kxnn",
     "qhf8xq": "f19dog8a",
     "a9b677": "fly5x3f",
     "Bqenvij": "f3052tw",
@@ -20,16 +74,11 @@ const useStyles = /*#__PURE__*/__styles({
     "B7ck84d": "f1ewtqcl",
     "E5pizo": "f10nrhrw",
     "De3pzq": "fxugw4r",
-    "i8kkvl": "f4px1ci",
-    "Belr9w4": "fn67r4l",
+    "sj55zd": "f19n0e5",
     "B4j52fo": "f5ogflp",
     "Bekrc4i": ["f1hqa2wf", "finvdd3"],
     "Bn0qgzm": "f1f09k3d",
     "ibv6hh": ["finvdd3", "f1hqa2wf"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
     "g2u3we": "fghlq4f",
     "h3c5rm": ["f1gn591s", "fjscplz"],
     "B9xav0g": "fb073pr",
@@ -38,51 +87,7 @@ const useStyles = /*#__PURE__*/__styles({
     "Beyfa6y": ["f1ehz9de", "f1erghxr"],
     "B7oj6ja": ["f1spoy8", "fmb70yw"],
     "Btl43ni": ["fmb70yw", "f1spoy8"],
-    "B6of3ja": "fgr6219",
-    "t21cq0": ["f1ujusj6", "fcgxt0o"],
-    "jrapky": "f10jk5vf",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
-    "mc9l5x": "f13qh94s",
-    "wkccdc": "f874eam",
-    "Budl1dq": "fjj47a5",
-    "zoa1oz": "f16o7v7l",
-    "z8tnut": "fuq56rw",
-    "z189sj": ["f15kemlc", "fdgang7"],
-    "Byoj8tv": "fl2zwns",
-    "uwmqm3": ["fdgang7", "f15kemlc"],
-    "B5xtmjs": "ff54dml",
-    "Bqu9lor": "f52bj20",
-    "B06wobe": "f1dangjo"
-  },
-  "dialog": {
-    "mc9l5x": "ftgm304",
-    "qhf8xq": "f19dog8a",
-    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
-    "j35jbq": ["f1e31b4d", "f1vgc2s3"],
-    "Bhzewxz": "f15twtuk",
-    "B5kzvoi": "f1yab3r1",
-    "a9b677": "f1acs6jw",
-    "Bqenvij": "f3052tw",
-    "De3pzq": "f1k92xex",
-    "B2u0y6b": "fheyfof",
-    "Bxyxcbc": "f1xxuklu",
-    "famaaq": "f1c515w",
-    "Bcdw1i0": "f1bitti",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"],
-    "B6of3ja": "fgr6219",
-    "t21cq0": ["f1ujusj6", "fcgxt0o"],
-    "jrapky": "f10jk5vf",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
-    "icvyot": "f1ern45e",
-    "vrafjx": ["f1n71otn", "f1deefiw"],
-    "oivjwe": "f1h8hb77",
-    "wvpqe5": ["f1deefiw", "f1n71otn"],
-    "B68tc82": "f1ln0qer",
-    "Bmxbyg5": "fa2wlxz",
-    "fshzfu": "f120kxnn"
+    "B5xtmjs": "ff54dml"
   },
   "backdrop": {
     "qhf8xq": "f19dog8a",
@@ -99,13 +104,11 @@ const useStyles = /*#__PURE__*/__styles({
     "fshzfu": "foe20jx"
   }
 }, {
-  "d": [".f19dog8a{position:fixed;}", ".fly5x3f{width:100%;}", ".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);}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1erghxr{border-bottom-right-radius:8px;}", ".f1ehz9de{border-bottom-left-radius:8px;}", ".f1spoy8{border-top-right-radius:8px;}", ".fmb70yw{border-top-left-radius:8px;}", ".fgr6219{margin-top:auto;}", ".f1ujusj6{margin-right:auto;}", ".fcgxt0o{margin-left:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".f13qh94s{display:grid;}", ".f874eam{grid-template-rows:auto 1fr auto;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}", ".f16o7v7l{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-end actions-end\";}", ".fuq56rw{padding-top:24px;}", ".f15kemlc{padding-right:24px;}", ".fdgang7{padding-left:24px;}", ".fl2zwns{padding-bottom:24px;}", ".ftgm304{display:block;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1acs6jw{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}", ".f1k92xex{background-color:unset;}", ".fheyfof{max-width:unset;}", ".f1xxuklu{max-height:unset;}", ".f1c515w{-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;}", ".f1bitti{visibility:unset;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".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;}"],
+  "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);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".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;}", ".fly5x3f{width:100%;}", ".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);}", ".f1erghxr{border-bottom-right-radius:8px;}", ".f1ehz9de{border-bottom-left-radius:8px;}", ".f1spoy8{border-top-right-radius:8px;}", ".fmb70yw{border-top-left-radius:8px;}", ".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)"
-  }], ["@media screen and (max-width: 480px){.f52bj20{grid-template-rows:auto 1fr auto auto;}}", {
-    "m": "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f1dangjo{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-start actions-start\" \"actions-end actions-end actions-end\";}}", {
-    "m": "screen and (max-width: 480px)"
   }]]
 });
 /**
@@ -116,7 +119,7 @@ const useStyles = /*#__PURE__*/__styles({
 export const useDialogSurfaceStyles_unstable = state => {
   const styles = useStyles();
   const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);
-  state.root.className = mergeClasses(dialogSurfaceClassNames.root, styles.dialog, styles.root, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
+  state.root.className = mergeClasses(dialogSurfaceClassNames.root, styles.root, styles.focusOutline, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
 
   if (state.backdrop) {
     state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, styles.backdrop, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogSurface/useDialogSurfaceStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAEA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SACE,eADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,qBAJF,EAKE,oBALF,EAME,eANF,EAOE,UAPF,EAQE,+BARF,EASE,cATF,EAUE,sBAVF,QAWO,0BAXP;AAYA,SAAS,yBAAT,QAA0C,8BAA1C;AAGA,OAAO,MAAM,uBAAuB,GAAuC;EACzE,IAAI,EAAE,mBADmE;EAEzE,QAAQ,EAAE;AAF+D,CAApE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAuEA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,cAAc,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,cAAZ,CAAhD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,uBAAuB,CAAC,IADS,EAEjC,MAAM,CAAC,MAF0B,EAGjC,MAAM,CAAC,IAH0B,EAIjC,cAAc,IAAI,MAAM,CAAC,0BAJQ,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,uBAAuB,CAAC,QADa,EAErC,MAAM,CAAC,QAF8B,EAGrC,cAAc,IAAI,MAAM,CAAC,oBAHY,EAIrC,KAAK,CAAC,QAAN,CAAe,SAJsB,CAAvC;EAMD;;EACD,OAAO,KAAP;AACD,CApBM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport {\n  TITLE_GRID_AREA,\n  ACTIONS_END_GRID_AREA,\n  ACTIONS_START_GRID_AREA,\n  SURFACE_BORDER_RADIUS,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n  DIALOG_GAP,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  BODY_GRID_AREA,\n  TITLE_ACTION_GRID_AREA,\n} from '../../contexts/constants';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'fixed',\n    width: '100%',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    boxShadow: tokens.shadow64,\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.gap(DIALOG_GAP),\n    ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n    ...shorthands.borderRadius(SURFACE_BORDER_RADIUS),\n    ...shorthands.margin('auto'),\n    display: 'grid',\n    gridTemplateRows: 'auto 1fr auto',\n    gridTemplateColumns: '1fr 1fr auto',\n    gridTemplateAreas: `\n      \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n      \"${BODY_GRID_AREA} ${BODY_GRID_AREA} ${BODY_GRID_AREA}\"\n      \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n    `,\n    ...shorthands.padding(SURFACE_PADDING),\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      maxWidth: '100vw',\n      gridTemplateRows: 'auto 1fr auto auto',\n      gridTemplateAreas: `\n        \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n        \"${BODY_GRID_AREA} ${BODY_GRID_AREA} ${BODY_GRID_AREA}\"\n        \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n        \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n      `,\n    },\n  },\n  dialog: {\n    display: 'block',\n    position: 'fixed',\n    left: 0,\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: 'fit-content',\n    height: 'fit-content',\n    backgroundColor: 'unset',\n    maxWidth: 'unset',\n    maxHeight: 'unset',\n    userSelect: 'unset',\n    visibility: 'unset',\n    ...shorthands.padding(0),\n    ...shorthands.margin('auto'),\n    ...shorthands.borderStyle('none'),\n    ...shorthands.overflow('unset'),\n    '&::backdrop': {\n      backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    },\n  },\n  backdrop: {\n    position: 'fixed',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    ...shorthands.inset('0px'),\n  },\n  nestedDialogBackdrop: {\n    backgroundColor: 'transparent',\n  },\n  nestedNativeDialogBackdrop: {\n    '&::backdrop': {\n      backgroundColor: 'transparent',\n    },\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  const styles = useStyles();\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n  state.root.className = mergeClasses(\n    dialogSurfaceClassNames.root,\n    styles.dialog,\n    styles.root,\n    isNestedDialog && styles.nestedNativeDialogBackdrop,\n    state.root.className,\n  );\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(\n      dialogSurfaceClassNames.backdrop,\n      styles.backdrop,\n      isNestedDialog && styles.nestedDialogBackdrop,\n      state.backdrop.className,\n    );\n  }\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAEA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SACE,+BADF,EAEE,qBAFF,EAGE,oBAHF,EAIE,eAJF,EAKE,yBALF,QAMO,gBANP;AASA,OAAO,MAAM,uBAAuB,GAAuC;EACzE,IAAI,EAAE,mBADmE;EAEzE,QAAQ,EAAE;AAF+D,CAApE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AA6CA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,cAAc,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,cAAZ,CAAhD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,uBAAuB,CAAC,IADS,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,CAAC,YAH0B,EAIjC,cAAc,IAAI,MAAM,CAAC,0BAJQ,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,uBAAuB,CAAC,QADa,EAErC,MAAM,CAAC,QAF8B,EAGrC,cAAc,IAAI,MAAM,CAAC,oBAHY,EAIrC,KAAK,CAAC,QAAN,CAAe,SAJsB,CAAvC;EAMD;;EACD,OAAO,KAAP;AACD,CApBM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  SURFACE_BORDER_RADIUS,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n  useDialogContext_unstable,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  focusOutline: createFocusOutlineStyle(),\n  root: {\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    ...shorthands.inset(0),\n    ...shorthands.padding(0),\n    ...shorthands.padding(SURFACE_PADDING),\n    ...shorthands.margin('auto'),\n    ...shorthands.borderStyle('none'),\n    ...shorthands.overflow('unset'),\n    '&::backdrop': {\n      backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    },\n    position: 'fixed',\n    width: '100%',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    boxShadow: tokens.shadow64,\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n    ...shorthands.borderRadius(SURFACE_BORDER_RADIUS),\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      maxWidth: '100vw',\n    },\n  },\n  backdrop: {\n    position: 'fixed',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    ...shorthands.inset('0px'),\n  },\n  nestedDialogBackdrop: {\n    backgroundColor: 'transparent',\n  },\n  nestedNativeDialogBackdrop: {\n    '&::backdrop': {\n      backgroundColor: 'transparent',\n    },\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  const styles = useStyles();\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n  state.root.className = mergeClasses(\n    dialogSurfaceClassNames.root,\n    styles.root,\n    styles.focusOutline,\n    isNestedDialog && styles.nestedNativeDialogBackdrop,\n    state.root.className,\n  );\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(\n      dialogSurfaceClassNames.backdrop,\n      styles.backdrop,\n      isNestedDialog && styles.nestedDialogBackdrop,\n      state.backdrop.className,\n    );\n  }\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogTitle/DialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `DialogTitle` component expects to have a title/header\n * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n  const state = useDialogTitle_unstable(props, ref);\n\n  useDialogTitleStyles_unstable(state);\n  return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `DialogTitle` component expects to have a title/header\n * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n  const state = useDialogTitle_unstable(props, ref);\n\n  useDialogTitleStyles_unstable(state);\n  return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"DialogTitle.types.js","sourceRoot":"../src/","sources":["components/DialogTitle/DialogTitle.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogTitleSlots = {\n  /**\n   * By default this is a div, but can be a heading.\n   */\n  root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\n  /**\n   * By default a Dialog with modalType='non-modal' will have a close button action\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * DialogTitle Props\n */\nexport type DialogTitleProps = ComponentProps<DialogTitleSlots> & {};\n\n/**\n * State used in rendering DialogTitle\n */\nexport type DialogTitleState = ComponentState<DialogTitleSlots>;\n"]}
+{"version":3,"file":"DialogTitle.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/DialogTitle/DialogTitle.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogTitleSlots = {\n  /**\n   * By default this is a div, but can be a heading.\n   */\n  root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\n  /**\n   * By default a Dialog with modalType='non-modal' will have a close button action\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * DialogTitle Props\n */\nexport type DialogTitleProps = ComponentProps<DialogTitleSlots>;\n\n/**\n * State used in rendering DialogTitle\n */\nexport type DialogTitleState = ComponentState<DialogTitleSlots>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DialogTitle/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './DialogTitle';\nexport * from './DialogTitle.types';\nexport * from './renderDialogTitle';\nexport * from './useDialogTitle';\nexport * from './useDialogTitleStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/DialogTitle/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './DialogTitle';\nexport * from './DialogTitle.types';\nexport * from './renderDialogTitle';\nexport * from './useDialogTitle';\nexport * from './useDialogTitleStyles';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogTitle/renderDialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTitle/renderDialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"],"sourceRoot":"../src/"}

package/lib/components/DialogTitle/useDialogTitle.js

@@ -29,7 +29,7 @@ export const useDialogTitle_unstable = (props, ref) => {
     },
     root: getNativeElementProps(as !== null && as !== void 0 ? as : 'div', {
       ref,
-      id: useDialogContext_unstable(ctx => ctx.dialogTitleID),
+      id: useDialogContext_unstable(ctx => ctx.dialogTitleId),
       ...props
     }),
     action: resolveShorthand(action, {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogTitle/useDialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,yBAAT,QAA0C,8BAA1C;AACA,SAAS,gBAAT,QAAiC,uBAAjC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,aAAT,QAA8B,gCAA9B;AACA,SAAS,4BAAT,QAA6C,wBAA7C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,EAAF;IAAM;EAAN,IAAiB,KAAvB;EACA,MAAM,SAAS,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,SAAZ,CAA3C;EACA,MAAM,cAAc,GAAG,4BAA4B,EAAnD;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE;IAFE,CADP;IAKL,IAAI,EAAE,qBAAqB,CAAC,EAAE,KAAA,IAAF,IAAA,EAAE,KAAA,KAAA,CAAF,GAAA,EAAA,GAAM,KAAP,EAAc;MACvC,GADuC;MAEvC,EAAE,EAAE,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,aAAZ,CAFU;MAGvC,GAAG;IAHoC,CAAd,CALtB;IAUL,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;MAC/B,QAAQ,EAAE,SAAS,KAAK,WADO;MAE/B,YAAY,EAAE;QACZ,QAAQ,eACN,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc;UAAC,MAAM,EAAC;QAAR,CAAd,eACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;UACE,SAAS,EAAE,cAAc,CAAC,MAD5B;UACkC,cAErB;QAHb,CAAA,eAKE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,IAAjB,CALF,CADF;MAFU;IAFiB,CAAT;EAVnB,CAAP;AA2BD,CAhCM","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 { Dismiss24Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles';\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<HTMLElement>): 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: 'div',\n      action: 'div',\n    },\n    root: getNativeElementProps(as ?? 'div', {\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 action=\"close\">\n            <button\n              className={internalStyles.button}\n              // TODO: find a better way to add internal labels\n              aria-label=\"close\"\n            >\n              <Dismiss24Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,yBAAT,QAA0C,8BAA1C;AACA,SAAS,gBAAT,QAAiC,uBAAjC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,aAAT,QAA8B,gCAA9B;AACA,SAAS,4BAAT,QAA6C,wBAA7C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,EAAF;IAAM;EAAN,IAAiB,KAAvB;EACA,MAAM,SAAS,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,SAAZ,CAA3C;EACA,MAAM,cAAc,GAAG,4BAA4B,EAAnD;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE;IAFE,CADP;IAKL,IAAI,EAAE,qBAAqB,CAAC,EAAE,KAAA,IAAF,IAAA,EAAE,KAAA,KAAA,CAAF,GAAA,EAAA,GAAM,KAAP,EAAc;MACvC,GADuC;MAEvC,EAAE,EAAE,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,aAAZ,CAFU;MAGvC,GAAG;IAHoC,CAAd,CALtB;IAUL,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;MAC/B,QAAQ,EAAE,SAAS,KAAK,WADO;MAE/B,YAAY,EAAE;QACZ,QAAQ,eACN,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc;UAAC,MAAM,EAAC;QAAR,CAAd,eACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;UACE,SAAS,EAAE,cAAc,CAAC,MAD5B;UACkC,cAErB;QAHb,CAAA,eAKE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,IAAjB,CALF,CADF;MAFU;IAFiB,CAAT;EAVnB,CAAP;AA2BD,CAhCM","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 { Dismiss24Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles';\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<HTMLElement>): 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: 'div',\n      action: 'div',\n    },\n    root: getNativeElementProps(as ?? 'div', {\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 action=\"close\">\n            <button\n              className={internalStyles.button}\n              // TODO: find a better way to add internal labels\n              aria-label=\"close\"\n            >\n              <Dismiss24Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogTitle/useDialogTitleStyles.js

@@ -65,37 +65,37 @@ export const useDialogTitleInternalStyles = /*#__PURE__*/__styles({
     "fsow6f": "fgusgyc",
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "r6j8yp": "f9sgzds",
-    "w235jp": ["fut1j4r", "fkf1fqv"],
-    "Bjm0d8m": "f1t0sa4d",
-    "jwfw70": ["fkf1fqv", "fut1j4r"],
-    "Boz55fv": "f1m3tk81",
-    "pmqz9c": "f1pr2mxm",
-    "Bl9sb7i": "f29vp72",
-    "h4jxiv": "f1b5h9zn",
-    "E4x6tl": "f1ltau7e",
-    "B9c4r0f": ["f18ihh6m", "fzaptb5"],
-    "Bstwoin": "f1or3dzb",
-    "Bflkndj": ["fzaptb5", "f18ihh6m"],
-    "h1egvf": "fciubpk",
-    "vw8w2h": ["fzvtil0", "f1e7tdtt"],
-    "Bbpctgi": "f14oz5ke",
-    "Dyu7ee": ["f1e7tdtt", "fzvtil0"],
-    "gnkc5c": ["f1clxaxy", "f1pefego"],
-    "Bw9c0us": ["f1pefego", "f1clxaxy"],
-    "B9ptage": ["f1e14n0d", "f19um3kx"],
-    "c7u8z9": ["f19um3kx", "f1e14n0d"],
-    "Bgf7pbm": "f1a5bpr6",
-    "Btw8xqj": ["fjsutlp", "f1fz4ffz"],
-    "B6j1cfa": "f11bfvwp",
-    "B3wlxu": ["f1fz4ffz", "fjsutlp"],
-    "Beastro": "f1hebwof",
-    "Bhizb9d": "f19pyrw2",
-    "B2fkz8r": ["fjebp7m", "f1m6puf8"],
-    "B0gbj9w": ["f1m6puf8", "fjebp7m"]
+    "B8q5s1w": "f8hki3x",
+    "Bci5o5g": ["f1d2448m", "ffh67wi"],
+    "n8qw10": "f1bjia2o",
+    "Bdrgwmp": ["ffh67wi", "f1d2448m"],
+    "Bm4h7ae": "f15bsgw9",
+    "B7ys5i9": "f14e48fq",
+    "Busjfv9": "f18yb2kv",
+    "Bhk32uz": "fd6o370",
+    "Bf4ptjt": "fh1cnn4",
+    "kclons": ["fy7oxxb", "f184ne2d"],
+    "Bhdgwq3": "fpukqih",
+    "Blkhhs4": ["f184ne2d", "fy7oxxb"],
+    "Bqtpl0w": "frrh606",
+    "clg4pj": ["f1v5zibi", "fo2hd23"],
+    "hgwjuy": "ful5kiu",
+    "Bonggc9": ["fo2hd23", "f1v5zibi"],
+    "B1tsrr9": ["f1jqcqds", "ftffrms"],
+    "Dah5zi": ["ftffrms", "f1jqcqds"],
+    "Bkh64rk": ["f2e7qr6", "fsr1zz6"],
+    "qqdqy8": ["fsr1zz6", "f2e7qr6"],
+    "B6dhp37": "f1dvezut",
+    "i03rao": ["fd0oaoj", "f1cwg4i8"],
+    "Boxcth7": "fjvm52t",
+    "Bsom6fd": ["f1cwg4i8", "fd0oaoj"],
+    "J0r882": "fdiulkx",
+    "Bjwuhne": "f1yalx80",
+    "Ghsupd": ["fq22d5a", "f1jw7pan"],
+    "Bule8hv": ["f1jw7pan", "fq22d5a"]
   }
 }, {
-  "d": [".f10pi13n{position:relative;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fez10in{line-height:0;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f9sgzds.fui-focus-visible{border-top-color:transparent;}", ".fut1j4r.fui-focus-visible{border-right-color:transparent;}", ".fkf1fqv.fui-focus-visible{border-left-color:transparent;}", ".f1t0sa4d.fui-focus-visible{border-bottom-color:transparent;}", ".f1m3tk81.fui-focus-visible::after{content:\"\";}", ".f1pr2mxm.fui-focus-visible::after{position:absolute;}", ".f29vp72.fui-focus-visible::after{pointer-events:none;}", ".f1b5h9zn.fui-focus-visible::after{z-index:1;}", ".f1ltau7e.fui-focus-visible::after{border-top-style:solid;}", ".f18ihh6m.fui-focus-visible::after{border-right-style:solid;}", ".fzaptb5.fui-focus-visible::after{border-left-style:solid;}", ".f1or3dzb.fui-focus-visible::after{border-bottom-style:solid;}", ".fciubpk.fui-focus-visible::after{border-top-width:2px;}", ".fzvtil0.fui-focus-visible::after{border-right-width:2px;}", ".f1e7tdtt.fui-focus-visible::after{border-left-width:2px;}", ".f14oz5ke.fui-focus-visible::after{border-bottom-width:2px;}", ".f1clxaxy.fui-focus-visible::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1pefego.fui-focus-visible::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1e14n0d.fui-focus-visible::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f19um3kx.fui-focus-visible::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1a5bpr6.fui-focus-visible::after{border-top-color:var(--colorStrokeFocus2);}", ".fjsutlp.fui-focus-visible::after{border-right-color:var(--colorStrokeFocus2);}", ".f1fz4ffz.fui-focus-visible::after{border-left-color:var(--colorStrokeFocus2);}", ".f11bfvwp.fui-focus-visible::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1hebwof.fui-focus-visible::after{top:-2px;}", ".f19pyrw2.fui-focus-visible::after{bottom:-2px;}", ".fjebp7m.fui-focus-visible::after{left:-2px;}", ".f1m6puf8.fui-focus-visible::after{right:-2px;}"],
+  "d": [".f10pi13n{position:relative;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fez10in{line-height:0;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".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);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}"],
   "f": [".ftqa4ok:focus{outline-style:none;}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogTitle/useDialogTitleStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AACA,SAAS,sBAAT,EAAiC,eAAjC,QAAwD,0BAAxD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,MAAM,EAAE;AAF6D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAaA;;;AAGG;;;AACH,OAAO,MAAM,4BAA4B,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAArC;AAkBP;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,KAAK,CAAC,MAAP,IAAiB,MAAM,CAAC,sBAHS,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAMA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,qBAAqB,CAAC,MAAvB,EAA+B,MAAM,CAAC,MAAtC,EAA8C,KAAK,CAAC,MAAN,CAAa,SAA3D,CAArC;EACD;;EACD,OAAO,KAAP;AACD,CAZM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { TITLE_ACTION_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n  root: 'fui-DialogTitle',\n  action: 'fui-DialogTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.subtitle1,\n    ...shorthands.gridArea(TITLE_GRID_AREA),\n  },\n  rootWithoutCloseButton: {\n    ...shorthands.gridArea(TITLE_GRID_AREA, TITLE_GRID_AREA, TITLE_ACTION_GRID_AREA, TITLE_ACTION_GRID_AREA),\n  },\n  action: {\n    ...shorthands.gridArea(TITLE_ACTION_GRID_AREA),\n  },\n});\n\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */\nexport const useDialogTitleInternalStyles = makeStyles({\n  button: {\n    position: 'relative',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 0,\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n    ...createFocusOutlineStyle(),\n  },\n});\n\n/**\n * Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    dialogTitleClassNames.root,\n    styles.root,\n    !state.action && styles.rootWithoutCloseButton,\n    state.root.className,\n  );\n  if (state.action) {\n    state.action.className = mergeClasses(dialogTitleClassNames.action, styles.action, state.action.className);\n  }\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AACA,SAAS,sBAAT,EAAiC,eAAjC,QAAwD,0BAAxD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,MAAM,EAAE;AAF6D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAaA;;;AAGG;;;AACH,OAAO,MAAM,4BAA4B,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAArC;AAkBP;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,KAAK,CAAC,MAAP,IAAiB,MAAM,CAAC,sBAHS,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAMA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,qBAAqB,CAAC,MAAvB,EAA+B,MAAM,CAAC,MAAtC,EAA8C,KAAK,CAAC,MAAN,CAAa,SAA3D,CAArC;EACD;;EACD,OAAO,KAAP;AACD,CAZM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { TITLE_ACTION_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n  root: 'fui-DialogTitle',\n  action: 'fui-DialogTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.subtitle1,\n    ...shorthands.gridArea(TITLE_GRID_AREA),\n  },\n  rootWithoutCloseButton: {\n    ...shorthands.gridArea(TITLE_GRID_AREA, TITLE_GRID_AREA, TITLE_ACTION_GRID_AREA, TITLE_ACTION_GRID_AREA),\n  },\n  action: {\n    ...shorthands.gridArea(TITLE_ACTION_GRID_AREA),\n  },\n});\n\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */\nexport const useDialogTitleInternalStyles = makeStyles({\n  button: {\n    position: 'relative',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 0,\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n    ...createFocusOutlineStyle(),\n  },\n});\n\n/**\n * Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    dialogTitleClassNames.root,\n    styles.root,\n    !state.action && styles.rootWithoutCloseButton,\n    state.root.className,\n  );\n  if (state.action) {\n    state.action.className = mergeClasses(dialogTitleClassNames.action, styles.action, state.action.className);\n  }\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogTrigger/DialogTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogTrigger/DialogTrigger.tsx"],"names":[],"mappings":"AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;;;;;;;;AASG;;AACH,OAAO,MAAM,aAAa,GAA0D,KAAK,IAAG;EAC1F,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,CAAvC;EAEA,OAAO,4BAA4B,CAAC,KAAD,CAAnC;AACD,CAJM;AAMP,aAAa,CAAC,WAAd,GAA4B,eAA5B;AACA,aAAa,CAAC,wBAAd,GAAyC,IAAzC","sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nimport type { DialogTriggerProps } from './DialogTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n * In case the trigger is used outside `Dialog` component\n * it'll still provide basic ARIA related attributes\n * to it's wrapped child, but it won't be able to alter the dialog `open` state anymore,\n * in that case the user must provide a `controlled state`\n */\nexport const DialogTrigger: React.FC<DialogTriggerProps> & FluentTriggerComponent = props => {\n  const state = useDialogTrigger_unstable(props);\n\n  return renderDialogTrigger_unstable(state);\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialogTrigger.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx"],"names":[],"mappings":"AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;;;;;;;;AASG;;AACH,OAAO,MAAM,aAAa,GAA0D,KAAK,IAAG;EAC1F,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,CAAvC;EAEA,OAAO,4BAA4B,CAAC,KAAD,CAAnC;AACD,CAJM;AAMP,aAAa,CAAC,WAAd,GAA4B,eAA5B;AACA,aAAa,CAAC,wBAAd,GAAyC,IAAzC","sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nimport type { DialogTriggerProps } from './DialogTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n * In case the trigger is used outside `Dialog` component\n * it'll still provide basic ARIA related attributes\n * to it's wrapped child, but it won't be able to alter the dialog `open` state anymore,\n * in that case the user must provide a `controlled state`\n */\nexport const DialogTrigger: React.FC<DialogTriggerProps> & FluentTriggerComponent = props => {\n  const state = useDialogTrigger_unstable(props);\n\n  return renderDialogTrigger_unstable(state);\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialogTrigger.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}

package/lib/components/DialogTrigger/DialogTrigger.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTrigger.types.js","sourceRoot":"../src/","sources":["components/DialogTrigger/DialogTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nexport type DialogTriggerAction = 'open' | 'close';\n\nexport type DialogTriggerProps = {\n  /**\n   * Explicitly declare if the trigger is responsible for opening or\n   * closing a Dialog visibility state.\n   * @default 'open' // if it's outside DialogSurface\n   * @default 'close' // if it's inside DialogSurface\n   */\n  action?: DialogTriggerAction;\n  /**\n   * Explicitly require single child or render function\n   * to inject properties\n   */\n  children: React.ReactElement | ((props: DialogTriggerChildProps) => React.ReactElement | null);\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n  Type,\n  Props & {\n    ref: React.Ref<unknown>;\n    'aria-haspopup'?: 'dialog';\n  }\n>;\n\nexport type DialogTriggerState = {\n  children: React.ReactElement | null;\n};\n"]}
+{"version":3,"file":"DialogTrigger.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type DialogTriggerAction = 'open' | 'close';\n\nexport type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {\n  /**\n   * Explicitly declare if the trigger is responsible for opening or\n   * closing a Dialog visibility state.\n   *\n   * If `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default\n   *\n   * If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default\n   */\n  action?: DialogTriggerAction;\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n  Type,\n  Props & {\n    'aria-haspopup'?: 'dialog';\n  }\n>;\n\nexport type DialogTriggerState = {\n  children: React.ReactElement | null;\n};\n"]}

package/lib/components/DialogTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DialogTrigger/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './DialogTrigger';\nexport * from './DialogTrigger.types';\nexport * from './renderDialogTrigger';\nexport * from './useDialogTrigger';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/DialogTrigger/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './DialogTrigger';\nexport * from './DialogTrigger.types';\nexport * from './renderDialogTrigger';\nexport * from './useDialogTrigger';\n"]}

package/lib/components/DialogTrigger/renderDialogTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogTrigger/renderDialogTrigger.tsx"],"names":[],"mappings":"AAEA;;;;AAIG;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA+B,KAAK,CAAC,QAA1E","sourcesContent":["import type { DialogTriggerState } from './DialogTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderDialogTrigger_unstable = (state: DialogTriggerState) => state.children;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTrigger/renderDialogTrigger.tsx"],"names":[],"mappings":"AAEA;;;;AAIG;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA+B,KAAK,CAAC,QAA1E","sourcesContent":["import type { DialogTriggerState } from './DialogTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderDialogTrigger_unstable = (state: DialogTriggerState) => state.children;\n"],"sourceRoot":"../src/"}

package/lib/components/DialogTrigger/useDialogTrigger.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useModalAttributes } from '@fluentui/react-tabster';
 import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';
 import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
@@ -16,7 +15,7 @@ export const useDialogTrigger_unstable = props => {
     children,
     action = isInsideSurfaceDialog ? 'close' : 'open'
   } = props;
-  const child = /*#__PURE__*/React.isValidElement(children) ? getTriggerChild(children) : undefined;
+  const child = getTriggerChild(children);
   const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
   const {
     triggerAttributes
@@ -35,7 +34,9 @@ export const useDialogTrigger_unstable = props => {
     }
   });
   return {
-    children: applyTriggerPropsToChildren(children, useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', { ...(child === null || child === void 0 ? void 0 : child.props),
+    children: applyTriggerPropsToChildren(children, useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {
+      type: 'button',
+      ...(child === null || child === void 0 ? void 0 : child.props),
       'aria-haspopup': action === 'close' ? undefined : 'dialog',
       ref: child === null || child === void 0 ? void 0 : child.ref,
       onClick: handleClick,

package/lib/components/DialogTrigger/useDialogTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogTrigger/useDialogTrigger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,yBAAnC;AACA,SAAS,2BAAT,EAAsC,eAAtC,EAAuD,gBAAvD,QAA+E,2BAA/E;AAEA,SAAS,yBAAT,EAAoC,gCAApC,QAA4E,gBAA5E;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AAEA;;;;;AAKG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAkD;EACzF,MAAM,qBAAqB,GAAG,gCAAgC,EAA9D;EAEA,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,qBAAqB,GAAG,OAAH,GAAa;EAAvD,IAAkE,KAAxE;EAEA,MAAM,KAAK,GAAG,aAAA,KAAK,CAAC,cAAN,CAAqB,QAArB,IAAiC,eAAe,CAA0B,QAA1B,CAAhD,GAAsF,SAApG;EAEA,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,iBAAZ,CAAnD;EAEA,MAAM;IAAE;EAAF,IAAwB,kBAAkB,EAAhD;EAEA,MAAM,WAAW,GAAG,gBAAgB,CACjC,KAAD,IAAoF;;;IAClF,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,CAAA,EAAA,GAAL,KAAK,CAAE,KAAF,EAAQ,OAAb,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,KAAH,CAApB;;IACA,IAAI,CAAC,KAAK,CAAC,kBAAN,EAAL,EAAiC;MAC/B,iBAAiB,CAAC;QAChB,KADgB;QAEhB,IAAI,EAAE,cAFU;QAGhB,IAAI,EAAE,MAAM,KAAK;MAHD,CAAD,CAAjB;IAKD;EACF,CAViC,CAApC;EAaA,OAAO;IACL,QAAQ,EAAE,2BAA2B,CACnC,QADmC,EAEnC,kBAAkB,CAAC,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,QAAhB,IAA4B,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,GAA5C,GAAkD,KAAK,CAAC,IAAxD,GAA+D,KAAhE,EAAuE,EACvF,IAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,CADuF;MAEvF,iBAAiB,MAAM,KAAK,OAAX,GAAqB,SAArB,GAAiC,QAFqC;MAGvF,GAAG,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAH2E;MAIvF,OAAO,EAAE,WAJ8E;MAKvF,GAAG;IALoF,CAAvE,CAFiB;EADhC,CAAP;AAYD,CApCM","sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { DialogTriggerChildProps, DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n  const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n  const { children, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n  const child = React.isValidElement(children) ? getTriggerChild<DialogTriggerChildProps>(children) : undefined;\n\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n\n  const { triggerAttributes } = useModalAttributes();\n\n  const handleClick = useEventCallback(\n    (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n      child?.props.onClick?.(event);\n      if (!event.isDefaultPrevented()) {\n        requestOpenChange({\n          event,\n          type: 'triggerClick',\n          open: action === 'open',\n        });\n      }\n    },\n  );\n\n  return {\n    children: applyTriggerPropsToChildren<DialogTriggerChildProps>(\n      children,\n      useARIAButtonProps(child?.type === 'button' || child?.type === 'a' ? child.type : 'div', {\n        ...child?.props,\n        'aria-haspopup': action === 'close' ? undefined : 'dialog',\n        ref: child?.ref as React.Ref<never>,\n        onClick: handleClick,\n        ...triggerAttributes,\n      }),\n    ),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,yBAAnC;AACA,SAAS,2BAAT,EAAsC,eAAtC,EAAuD,gBAAvD,QAA+E,2BAA/E;AAEA,SAAS,yBAAT,EAAoC,gCAApC,QAA4E,gBAA5E;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AAEA;;;;;AAKG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAkD;EACzF,MAAM,qBAAqB,GAAG,gCAAgC,EAA9D;EAEA,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,qBAAqB,GAAG,OAAH,GAAa;EAAvD,IAAkE,KAAxE;EAEA,MAAM,KAAK,GAAG,eAAe,CAAC,QAAD,CAA7B;EAEA,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,iBAAZ,CAAnD;EAEA,MAAM;IAAE;EAAF,IAAwB,kBAAkB,EAAhD;EAEA,MAAM,WAAW,GAAG,gBAAgB,CACjC,KAAD,IAAoF;;;IAClF,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,CAAA,EAAA,GAAL,KAAK,CAAE,KAAF,EAAQ,OAAb,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,KAAH,CAApB;;IACA,IAAI,CAAC,KAAK,CAAC,kBAAN,EAAL,EAAiC;MAC/B,iBAAiB,CAAC;QAChB,KADgB;QAEhB,IAAI,EAAE,cAFU;QAGhB,IAAI,EAAE,MAAM,KAAK;MAHD,CAAD,CAAjB;IAKD;EACF,CAViC,CAApC;EAaA,OAAO;IACL,QAAQ,EAAE,2BAA2B,CACnC,QADmC,EAEnC,kBAAkB,CAAC,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,QAAhB,IAA4B,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,GAA5C,GAAkD,KAAK,CAAC,IAAxD,GAA+D,KAAhE,EAAuE;MACvF,IAAI,EAAE,QADiF;MAEvF,IAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,CAFuF;MAGvF,iBAAiB,MAAM,KAAK,OAAX,GAAqB,SAArB,GAAiC,QAHqC;MAIvF,GAAG,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAJ2E;MAKvF,OAAO,EAAE,WAL8E;MAMvF,GAAG;IANoF,CAAvE,CAFiB;EADhC,CAAP;AAaD,CArCM","sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n  const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n  const { children, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n  const child = getTriggerChild(children);\n\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n\n  const { triggerAttributes } = useModalAttributes();\n\n  const handleClick = useEventCallback(\n    (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n      child?.props.onClick?.(event);\n      if (!event.isDefaultPrevented()) {\n        requestOpenChange({\n          event,\n          type: 'triggerClick',\n          open: action === 'open',\n        });\n      }\n    },\n  );\n\n  return {\n    children: applyTriggerPropsToChildren(\n      children,\n      useARIAButtonProps(child?.type === 'button' || child?.type === 'a' ? child.type : 'div', {\n        type: 'button',\n        ...child?.props,\n        'aria-haspopup': action === 'close' ? undefined : 'dialog',\n        ref: child?.ref,\n        onClick: handleClick,\n        ...triggerAttributes,\n      }),\n    ),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/contexts/constants.js

@@ -7,5 +7,5 @@ export const ACTIONS_START_GRID_AREA = 'actions-start';
 export const ACTIONS_END_GRID_AREA = 'actions-end';
 export const TITLE_GRID_AREA = 'title';
 export const TITLE_ACTION_GRID_AREA = 'close-button';
-export const BODY_GRID_AREA = 'body';
+export const CONTENT_GRID_AREA = 'body';
 //# sourceMappingURL=constants.js.map

package/lib/contexts/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["contexts/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,+BAA+B,GAAG,sCAAsC,CAAC;AACtF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;AACtC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC;AAChC,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;AACvD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC;AACnD,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAC;AACrD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC","sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_RADIUS = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\n\nexport const ACTIONS_START_GRID_AREA = 'actions-start';\nexport const ACTIONS_END_GRID_AREA = 'actions-end';\nexport const TITLE_GRID_AREA = 'title';\nexport const TITLE_ACTION_GRID_AREA = 'close-button';\nexport const BODY_GRID_AREA = 'body';\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/contexts/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,+BAA+B,GAAG,sCAAsC,CAAC;AACtF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;AACtC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC;AAChC,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;AACvD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC;AACnD,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAC;AACrD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC","sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_RADIUS = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\n\nexport const ACTIONS_START_GRID_AREA = 'actions-start';\nexport const ACTIONS_END_GRID_AREA = 'actions-end';\nexport const TITLE_GRID_AREA = 'title';\nexport const TITLE_ACTION_GRID_AREA = 'close-button';\nexport const CONTENT_GRID_AREA = 'body';\n"]}

package/lib/contexts/dialogContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/dialogContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAkBA,MAAM,mBAAmB,GAAuB;EAC9C,IAAI,EAAE,KADwC;EAE9C,SAAS,EAAE,OAFmC;EAG9C,cAAc,EAAE,KAH8B;EAI9C,SAAS,EAAE;IAAE,OAAO,EAAE;EAAX,CAJmC;;EAK9C,iBAAiB,GAAA;IACf;EACD;;AAP6C,CAAhD,C,CAUA;;AACA,OAAO,MAAM,aAAa,gBAA4C,aAAa,CACjF,SADiF,CAA5E;AAIP,OAAO,MAAM,cAAc,GAAG,aAAa,CAAC,QAArC;AACP,OAAO,MAAM,yBAAyB,GAAO,QAAJ,IACvC,kBAAkB,CAAC,aAAD,EAAgB,CAAC,GAAG,GAAG,mBAAP,KAA+B,QAAQ,CAAC,GAAD,CAAvD,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogModalType, DialogOpenChangeData } from '../Dialog';\n\nexport type DialogContextValue = {\n  open: boolean;\n  dialogBodyID?: string;\n  dialogTitleID?: string;\n  isNestedDialog: boolean;\n  dialogRef: React.Ref<DialogSurfaceElement>;\n  modalType: DialogModalType;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange: (data: DialogOpenChangeData) => void;\n};\n\nconst defaultContextValue: DialogContextValue = {\n  open: false,\n  modalType: 'modal',\n  isNestedDialog: false,\n  dialogRef: { current: null },\n  requestOpenChange() {\n    /* noop */\n  },\n};\n\n// Contexts should default to undefined\nexport const DialogContext: Context<DialogContextValue | undefined> = createContext<DialogContextValue | undefined>(\n  undefined,\n);\n\nexport const DialogProvider = DialogContext.Provider;\nexport const useDialogContext_unstable = <T>(selector: ContextSelector<DialogContextValue, T>): T =>\n  useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/contexts/dialogContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAkBA,MAAM,mBAAmB,GAAuB;EAC9C,IAAI,EAAE,KADwC;EAE9C,SAAS,EAAE,OAFmC;EAG9C,cAAc,EAAE,KAH8B;EAI9C,SAAS,EAAE;IAAE,OAAO,EAAE;EAAX,CAJmC;;EAK9C,iBAAiB,GAAA;IACf;EACD;;AAP6C,CAAhD,C,CAUA;;AACA,OAAO,MAAM,aAAa,gBAA4C,aAAa,CACjF,SADiF,CAA5E;AAIP,OAAO,MAAM,cAAc,GAAG,aAAa,CAAC,QAArC;AACP,OAAO,MAAM,yBAAyB,GAAO,QAAJ,IACvC,kBAAkB,CAAC,aAAD,EAAgB,CAAC,GAAG,GAAG,mBAAP,KAA+B,QAAQ,CAAC,GAAD,CAAvD,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogModalType, DialogOpenChangeData } from '../Dialog';\n\nexport type DialogContextValue = {\n  open: boolean;\n  dialogContentId?: string;\n  dialogTitleId?: string;\n  isNestedDialog: boolean;\n  dialogRef: React.Ref<DialogSurfaceElement>;\n  modalType: DialogModalType;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange: (data: DialogOpenChangeData) => void;\n};\n\nconst defaultContextValue: DialogContextValue = {\n  open: false,\n  modalType: 'modal',\n  isNestedDialog: false,\n  dialogRef: { current: null },\n  requestOpenChange() {\n    /* noop */\n  },\n};\n\n// Contexts should default to undefined\nexport const DialogContext: Context<DialogContextValue | undefined> = createContext<DialogContextValue | undefined>(\n  undefined,\n);\n\nexport const DialogProvider = DialogContext.Provider;\nexport const useDialogContext_unstable = <T>(selector: ContextSelector<DialogContextValue, T>): T =>\n  useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));\n"],"sourceRoot":"../src/"}

package/lib/contexts/dialogSurfaceContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/dialogSurfaceContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,UAAxB,QAA0C,OAA1C;AAIA,MAAM,mBAAmB,GAA8B,KAAvD;AAEA,OAAO,MAAM,oBAAoB,gBAAG,aAAa,CAAwC,SAAxC,CAA1C;AAEP,OAAO,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,QAAnD;AAEP,OAAO,MAAM,gCAAgC,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,UAAU,CAAC,oBAAD,CAAV,MAAgC,IAAhC,IAAgC,EAAA,KAAA,KAAA,CAAhC,GAAgC,EAAhC,GAAoC,mBAApC;AAAuD,CAAtG","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type DialogSurfaceContextValue = boolean;\n\nconst defaultContextValue: DialogSurfaceContextValue = false;\n\nexport const DialogSurfaceContext = createContext<DialogSurfaceContextValue | undefined>(undefined);\n\nexport const DialogSurfaceProvider = DialogSurfaceContext.Provider;\n\nexport const useDialogSurfaceContext_unstable = () => useContext(DialogSurfaceContext) ?? defaultContextValue;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/contexts/dialogSurfaceContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,UAAxB,QAA0C,OAA1C;AAIA,MAAM,mBAAmB,GAA8B,KAAvD;AAEA,OAAO,MAAM,oBAAoB,gBAAG,aAAa,CAAwC,SAAxC,CAA1C;AAEP,OAAO,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,QAAnD;AAEP,OAAO,MAAM,gCAAgC,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,UAAU,CAAC,oBAAD,CAAV,MAAgC,IAAhC,IAAgC,EAAA,KAAA,KAAA,CAAhC,GAAgC,EAAhC,GAAoC,mBAApC;AAAuD,CAAtG","sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type DialogSurfaceContextValue = boolean;\n\nconst defaultContextValue: DialogSurfaceContextValue = false;\n\nexport const DialogSurfaceContext = createContext<DialogSurfaceContextValue | undefined>(undefined);\n\nexport const DialogSurfaceProvider = DialogSurfaceContext.Provider;\n\nexport const useDialogSurfaceContext_unstable = () => useContext(DialogSurfaceContext) ?? defaultContextValue;\n"],"sourceRoot":"../src/"}

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './constants';\nexport * from './dialogContext';\nexport * from './dialogSurfaceContext';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './constants';\nexport * from './dialogContext';\nexport * from './dialogSurfaceContext';\n"]}

package/lib/index.js

@@ -4,4 +4,5 @@ export { DialogActions, dialogActionsClassNames, useDialogActions_unstable, useD
 export { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBodyStyles_unstable, renderDialogBody_unstable } from './DialogBody';
 export { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogTitleStyles_unstable, renderDialogTitle_unstable } from './DialogTitle';
 export { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, renderDialogSurface_unstable } from './DialogSurface';
+export { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from './DialogContent';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,EAAiB,qBAAjB,EAAwC,kBAAxC,QAAkE,UAAlE;AAUA,SAAS,aAAT,EAAwB,yBAAxB,EAAmD,4BAAnD,QAAuF,iBAAvF;AAQA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP;AAcA,SACE,UADF,EAEE,oBAFF,EAGE,sBAHF,EAIE,4BAJF,EAKE,yBALF,QAMO,cANP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,6BAJF,EAKE,0BALF,QAMO,eANP;AASA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP","sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport type {\n  DialogSlots,\n  DialogProps,\n  DialogState,\n  DialogOpenChangeData,\n  DialogOpenChangeEvent,\n  DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n  DialogTriggerProps,\n  DialogTriggerChildProps,\n  DialogTriggerState,\n  DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n  DialogActions,\n  dialogActionsClassNames,\n  useDialogActions_unstable,\n  useDialogActionsStyles_unstable,\n  renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n  DialogActionsProps,\n  DialogActionsSlots,\n  DialogActionsState,\n  DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n  DialogBody,\n  dialogBodyClassNames,\n  useDialogBody_unstable,\n  useDialogBodyStyles_unstable,\n  renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n  DialogTitle,\n  dialogTitleClassNames,\n  useDialogTitle_unstable,\n  useDialogTitleStyles_unstable,\n  renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  useDialogSurface_unstable,\n  useDialogSurfaceStyles_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/index.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,EAAiB,qBAAjB,EAAwC,kBAAxC,QAAkE,UAAlE;AAUA,SAAS,aAAT,EAAwB,yBAAxB,EAAmD,4BAAnD,QAAuF,iBAAvF;AAQA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP;AAcA,SACE,UADF,EAEE,oBAFF,EAGE,sBAHF,EAIE,4BAJF,EAKE,yBALF,QAMO,cANP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,6BAJF,EAKE,0BALF,QAMO,eANP;AASA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP;AASA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP","sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport type {\n  DialogSlots,\n  DialogProps,\n  DialogState,\n  DialogOpenChangeData,\n  DialogOpenChangeEvent,\n  DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n  DialogTriggerProps,\n  DialogTriggerChildProps,\n  DialogTriggerState,\n  DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n  DialogActions,\n  dialogActionsClassNames,\n  useDialogActions_unstable,\n  useDialogActionsStyles_unstable,\n  renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n  DialogActionsProps,\n  DialogActionsSlots,\n  DialogActionsState,\n  DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n  DialogBody,\n  dialogBodyClassNames,\n  useDialogBody_unstable,\n  useDialogBodyStyles_unstable,\n  renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n  DialogTitle,\n  dialogTitleClassNames,\n  useDialogTitle_unstable,\n  useDialogTitleStyles_unstable,\n  renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  useDialogSurface_unstable,\n  useDialogSurfaceStyles_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState, DialogSurfaceElement } from './DialogSurface';\n\nexport {\n  DialogContent,\n  dialogContentClassNames,\n  useDialogContent_unstable,\n  useDialogContentStyles_unstable,\n  renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n"],"sourceRoot":"../src/"}

package/lib/utils/index.js

@@ -1,6 +1,4 @@
 export * from './isEscapeKeyDown';
 export * from './useDisableBodyScroll';
 export * from './useFocusFirstElement';
-export * from './isHTMLDialogElement';
-export * from './useControlNativeDialogOpenState';
 //# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './isEscapeKeyDown';\nexport * from './useDisableBodyScroll';\nexport * from './useFocusFirstElement';\nexport * from './isHTMLDialogElement';\nexport * from './useControlNativeDialogOpenState';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './isEscapeKeyDown';\nexport * from './useDisableBodyScroll';\nexport * from './useFocusFirstElement';\n"]}

package/lib/utils/isEscapeKeyDown.js

@@ -1,12 +1,9 @@
 import { Escape } from '@fluentui/keyboard-keys';
-import { isHTMLDialogElement } from './isHTMLDialogElement';
 /**
  * Checks if keydown event is a proper Escape key dismiss
  */
 
 export function isEscapeKeyDismiss(event, modalType) {
-  return event.key === Escape && ( // `non-modal` should always have Escape key handling
-  // `modal` should only be handled in the case of non native dialog
-  modalType === 'non-modal' || !isHTMLDialogElement(event.currentTarget) && modalType === 'modal') && !event.isDefaultPrevented();
+  return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented();
 }
 //# sourceMappingURL=isEscapeKeyDown.js.map

package/lib/utils/isEscapeKeyDown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/isEscapeKeyDown.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,yBAAvB;AAGA,SAAS,mBAAT,QAAoC,uBAApC;AAEA;;AAEG;;AACH,OAAM,SAAU,kBAAV,CACJ,KADI,EAEJ,SAFI,EAEsB;EAE1B,OACE,KAAK,CAAC,GAAN,KAAc,MAAd,MACA;EACA;EACC,SAAS,KAAK,WAAd,IAA8B,CAAC,mBAAmB,CAAC,KAAK,CAAC,aAAP,CAApB,IAA6C,SAAS,KAAK,OAH1F,KAIA,CAAC,KAAK,CAAC,kBAAN,EALH;AAOD","sourcesContent":["import * as React from 'react';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { DialogModalType } from '../components/Dialog/Dialog.types';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport { isHTMLDialogElement } from './isHTMLDialogElement';\n\n/**\n * Checks if keydown event is a proper Escape key dismiss\n */\nexport function isEscapeKeyDismiss(\n  event: React.KeyboardEvent<DialogSurfaceElement>,\n  modalType: DialogModalType,\n): boolean {\n  return (\n    event.key === Escape &&\n    // `non-modal` should always have Escape key handling\n    // `modal` should only be handled in the case of non native dialog\n    (modalType === 'non-modal' || (!isHTMLDialogElement(event.currentTarget) && modalType === 'modal')) &&\n    !event.isDefaultPrevented()\n  );\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/utils/isEscapeKeyDown.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,yBAAvB;AAIA;;AAEG;;AACH,OAAM,SAAU,kBAAV,CACJ,KADI,EAEJ,SAFI,EAEsB;EAE1B,OAAO,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,SAAS,KAAK,OAAtC,IAAiD,CAAC,KAAK,CAAC,kBAAN,EAAzD;AACD","sourcesContent":["import * as React from 'react';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { DialogModalType } from '../components/Dialog/Dialog.types';\nimport { DialogSurfaceElement } from '../DialogSurface';\n\n/**\n * Checks if keydown event is a proper Escape key dismiss\n */\nexport function isEscapeKeyDismiss(\n  event: React.KeyboardEvent<DialogSurfaceElement>,\n  modalType: DialogModalType,\n): boolean {\n  return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented();\n}\n"],"sourceRoot":"../src/"}