@fluentui/react-dialog 9.5.2 → 9.5.3

package/CHANGELOG.json

@@ -2,7 +2,40 @@
   "name": "@fluentui/react-dialog",
   "entries": [
     {
-      "date": "Mon, 17 Apr 2023 17:50:00 GMT",
+      "date": "Mon, 24 Apr 2023 08:09:10 GMT",
+      "tag": "@fluentui/react-dialog_v9.5.3",
+      "version": "9.5.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "b287dc6426477a8ec03b6a845ea0ee3ba0bfb726",
+            "comment": "bugfix: DialogTitle root as h2 by default"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "85c36e249b33b0bad79be4edd1a943dfc5233b11",
+            "comment": "bugfix: remove caret from react-jsx-runtime prerelease dependency"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "1227882a7a3813f21c45df6eb27aa65a89a5c45c",
+            "comment": "chore: hoist tabster modal attributes to Dialog component"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2",
+            "commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 17 Apr 2023 17:53:49 GMT",
       "tag": "@fluentui/react-dialog_v9.5.2",
       "version": "9.5.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Mon, 17 Apr 2023 17:50:00 GMT and should not be manually modified.
+This log was last generated on Mon, 24 Apr 2023 08:09:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.3)
+
+Mon, 24 Apr 2023 08:09:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.2..@fluentui/react-dialog_v9.5.3)
+
+### Patches
+
+- bugfix: DialogTitle root as h2 by default ([PR #27555](https://github.com/microsoft/fluentui/pull/27555) by bernardo.sunderhus@gmail.com)
+- bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com)
+- chore: hoist tabster modal attributes to Dialog component ([PR #27541](https://github.com/microsoft/fluentui/pull/27541) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by beachball)
+
 ## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.2)
 
-Mon, 17 Apr 2023 17:50:00 GMT 
+Mon, 17 Apr 2023 17:53:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.1..@fluentui/react-dialog_v9.5.2)
 
 ### Patches

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TriggerProps } from '@fluentui/react-utilities';
+import { useModalAttributes } from '@fluentui/react-tabster';
 
 /**
  * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.
@@ -111,7 +112,7 @@ declare type DialogContextValue = {
      * Requests dialog main component to update it's internal open state
      */
     requestOpenChange: (data: DialogOpenChangeData) => void;
-};
+} & Partial<ReturnType<typeof useModalAttributes>>;
 
 declare type DialogContextValues = {
     dialog: DialogContextValue;
@@ -264,9 +265,10 @@ export declare type DialogTitleProps = ComponentProps<DialogTitleSlots>;
 
 export declare type DialogTitleSlots = {
     /**
-     * By default this is a div, but can be a heading.
+     * By default this is a h2, but can be any heading or div,
+     * if `div` is provided do not forget to also provide proper `role="heading"` and `aria-level` attributes
      */
-    root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+    root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;
     /**
      * By default a Dialog with modalType='non-modal' will have a close button action
      */

package/lib/components/Dialog/useDialog.js

@@ -3,6 +3,7 @@ import { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffec
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useDisableBodyScroll, useFocusFirstElement } from '../../utils';
 import { DialogContext } from '../../contexts';
+import { useModalAttributes } from '@fluentui/react-tabster';
 /**
  * Create the state required to render Dialog.
  *
@@ -40,6 +41,13 @@ export const useDialog_unstable = props => {
       return disableBodyScroll();
     }
   }, [disableBodyScroll, isBodyScrollLocked]);
+  const {
+    modalAttributes,
+    triggerAttributes
+  } = useModalAttributes({
+    trapFocus: modalType !== 'non-modal',
+    legacyTrapFocus: !inertTrapFocus
+  });
   return {
     components: {
       backdrop: 'div'
@@ -52,7 +60,9 @@ export const useDialog_unstable = props => {
     requestOpenChange,
     dialogTitleId: useId('dialog-title-'),
     isNestedDialog: useHasParentContext(DialogContext),
-    dialogRef: focusRef
+    dialogRef: focusRef,
+    modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,
+    triggerAttributes
   };
 };
 /**

package/lib/components/Dialog/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useHasParentContext","useDisableBodyScroll","useFocusFirstElement","DialogContext","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","disableBodyScroll","isBodyScrollLocked","Boolean","components","backdrop","dialogTitleId","isNestedDialog","dialogRef","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"sources":["../../../src/components/Dialog/useDialog.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n  const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n\n  const [trigger, content] = childrenToTriggerAndContent(children);\n\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n    onOpenChange?.(data.event, data);\n\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n\n  const focusRef = useFocusFirstElement(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n\n  return {\n    components: {\n      backdrop: 'div',\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content: open ? content : null,\n    trigger,\n    requestOpenChange,\n    dialogTitleId: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: focusRef,\n  };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n  children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n  const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'Dialog must contain at least one child <DialogSurface/>,\\n' +\n          'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)',\n      );\n    }\n  }\n  switch (childrenArray.length) {\n    // case where there's a trigger followed by content\n    case 2:\n      return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n    // case where there's only content\n    case 1:\n      return [undefined, childrenArray[0]];\n    // unknown case\n    default:\n      return [undefined, undefined];\n  }\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,yBAAyB,QAAQ;AACzF,SAASC,mBAAmB,QAAQ;AACpC,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ;AAC3D,SAASC,aAAa,QAAQ;AAI9B;;;;;;;;AAQA,OAAO,MAAMC,kBAAA,GAAsBC,KAAA,IAAoC;EACrE,MAAM;IAAEC,QAAA;IAAUC,SAAA,GAAY;IAASC,YAAA;IAAcC,cAAA,GAAiB;EAAK,CAAE,GAAGJ,KAAA;EAEhF,MAAM,CAACK,OAAA,EAASC,OAAA,CAAQ,GAAGC,2BAAA,CAA4BN,QAAA;EAEvD,MAAM,CAACO,IAAA,EAAMC,OAAA,CAAQ,GAAGlB,oBAAA,CAAqB;IAC3CmB,KAAA,EAAOV,KAAA,CAAMQ,IAAI;IACjBG,YAAA,EAAcX,KAAA,CAAMY,WAAW;IAC/BC,YAAA,EAAc;EAChB;EAEA,MAAMC,iBAAA,GAAoBtB,gBAAA,CAAkBuB,IAAA,IAA+B;IACzEZ,YAAA,aAAAA,YAAA,uBAAAA,YAAA,CAAeY,IAAA,CAAKC,KAAK,EAAED,IAAA;IAE3B;IACA;IACA,IAAI,CAACA,IAAA,CAAKC,KAAK,CAACC,kBAAkB,IAAI;MACpCR,OAAA,CAAQM,IAAA,CAAKP,IAAI;IACnB;EACF;EAEA,MAAMU,QAAA,GAAWrB,oBAAA,CAAqBW,IAAA,EAAMN,SAAA;EAC5C,MAAMiB,iBAAA,GAAoBvB,oBAAA;EAC1B,MAAMwB,kBAAA,GAAqBC,OAAA,CAAQb,IAAA,IAAQN,SAAA,KAAc;EAEzDR,yBAAA,CAA0B,MAAM;IAC9B,IAAI0B,kBAAA,EAAoB;MACtB,OAAOD,iBAAA;IACT;EACF,GAAG,CAACA,iBAAA,EAAmBC,kBAAA,CAAmB;EAE1C,OAAO;IACLE,UAAA,EAAY;MACVC,QAAA,EAAU;IACZ;IACAnB,cAAA;IACAI,IAAA;IACAN,SAAA;IACAI,OAAA,EAASE,IAAA,GAAOF,OAAA,GAAU,IAAI;IAC9BD,OAAA;IACAS,iBAAA;IACAU,aAAA,EAAe/B,KAAA,CAAM;IACrBgC,cAAA,EAAgB9B,mBAAA,CAAoBG,aAAA;IACpC4B,SAAA,EAAWR;EACb;AACF;AAEA;;;AAGA,SAASX,4BACPN,QAAyB,EACsC;EAC/D,MAAM0B,aAAA,GAAgBrC,KAAA,CAAMsC,QAAQ,CAACC,OAAO,CAAC5B,QAAA;EAC7C,IAAI6B,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC,IAAIL,aAAA,CAAcM,MAAM,KAAK,KAAKN,aAAA,CAAcM,MAAM,KAAK,GAAG;MAC5D;MACAC,OAAA,CAAQC,IAAI,CACV,+DACE;IAEN;EACF;EACA,QAAQR,aAAA,CAAcM,MAAM;IAC1B;IACA,KAAK;MACH,OAAON,aAAA;IACT;IACA,KAAK;MACH,OAAO,CAACS,SAAA,EAAWT,aAAa,CAAC,EAAE,CAAC;IACtC;IACA;MACE,OAAO,CAACS,SAAA,EAAWA,SAAA,CAAU;EAAA;AAEnC"}
+{"version":3,"names":["React","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useHasParentContext","useDisableBodyScroll","useFocusFirstElement","DialogContext","useModalAttributes","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","disableBodyScroll","isBodyScrollLocked","Boolean","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","components","backdrop","dialogTitleId","isNestedDialog","dialogRef","undefined","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"sources":["../../../src/components/Dialog/useDialog.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n  const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n\n  const [trigger, content] = childrenToTriggerAndContent(children);\n\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n    onOpenChange?.(data.event, data);\n\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n\n  const focusRef = useFocusFirstElement(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n\n  const { modalAttributes, triggerAttributes } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus,\n  });\n\n  return {\n    components: {\n      backdrop: 'div',\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content: open ? content : null,\n    trigger,\n    requestOpenChange,\n    dialogTitleId: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: focusRef,\n    modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,\n    triggerAttributes,\n  };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n  children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n  const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'Dialog must contain at least one child <DialogSurface/>,\\n' +\n          'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)',\n      );\n    }\n  }\n  switch (childrenArray.length) {\n    // case where there's a trigger followed by content\n    case 2:\n      return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n    // case where there's only content\n    case 1:\n      return [undefined, childrenArray[0]];\n    // unknown case\n    default:\n      return [undefined, undefined];\n  }\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,yBAAyB,QAAQ;AACzF,SAASC,mBAAmB,QAAQ;AACpC,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ;AAC3D,SAASC,aAAa,QAAQ;AAG9B,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;AAQA,OAAO,MAAMC,kBAAA,GAAsBC,KAAA,IAAoC;EACrE,MAAM;IAAEC,QAAA;IAAUC,SAAA,GAAY;IAASC,YAAA;IAAcC,cAAA,GAAiB;EAAK,CAAE,GAAGJ,KAAA;EAEhF,MAAM,CAACK,OAAA,EAASC,OAAA,CAAQ,GAAGC,2BAAA,CAA4BN,QAAA;EAEvD,MAAM,CAACO,IAAA,EAAMC,OAAA,CAAQ,GAAGnB,oBAAA,CAAqB;IAC3CoB,KAAA,EAAOV,KAAA,CAAMQ,IAAI;IACjBG,YAAA,EAAcX,KAAA,CAAMY,WAAW;IAC/BC,YAAA,EAAc;EAChB;EAEA,MAAMC,iBAAA,GAAoBvB,gBAAA,CAAkBwB,IAAA,IAA+B;IACzEZ,YAAA,aAAAA,YAAA,uBAAAA,YAAA,CAAeY,IAAA,CAAKC,KAAK,EAAED,IAAA;IAE3B;IACA;IACA,IAAI,CAACA,IAAA,CAAKC,KAAK,CAACC,kBAAkB,IAAI;MACpCR,OAAA,CAAQM,IAAA,CAAKP,IAAI;IACnB;EACF;EAEA,MAAMU,QAAA,GAAWtB,oBAAA,CAAqBY,IAAA,EAAMN,SAAA;EAC5C,MAAMiB,iBAAA,GAAoBxB,oBAAA;EAC1B,MAAMyB,kBAAA,GAAqBC,OAAA,CAAQb,IAAA,IAAQN,SAAA,KAAc;EAEzDT,yBAAA,CAA0B,MAAM;IAC9B,IAAI2B,kBAAA,EAAoB;MACtB,OAAOD,iBAAA;IACT;EACF,GAAG,CAACA,iBAAA,EAAmBC,kBAAA,CAAmB;EAE1C,MAAM;IAAEE,eAAA;IAAiBC;EAAiB,CAAE,GAAGzB,kBAAA,CAAmB;IAChE0B,SAAA,EAAWtB,SAAA,KAAc;IACzBuB,eAAA,EAAiB,CAACrB;EACpB;EAEA,OAAO;IACLsB,UAAA,EAAY;MACVC,QAAA,EAAU;IACZ;IACAvB,cAAA;IACAI,IAAA;IACAN,SAAA;IACAI,OAAA,EAASE,IAAA,GAAOF,OAAA,GAAU,IAAI;IAC9BD,OAAA;IACAS,iBAAA;IACAc,aAAA,EAAepC,KAAA,CAAM;IACrBqC,cAAA,EAAgBnC,mBAAA,CAAoBG,aAAA;IACpCiC,SAAA,EAAWZ,QAAA;IACXI,eAAA,EAAiBpB,SAAA,KAAc,cAAcoB,eAAA,GAAkBS,SAAS;IACxER;EACF;AACF;AAEA;;;AAGA,SAAShB,4BACPN,QAAyB,EACsC;EAC/D,MAAM+B,aAAA,GAAgB3C,KAAA,CAAM4C,QAAQ,CAACC,OAAO,CAACjC,QAAA;EAC7C,IAAIkC,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC,IAAIL,aAAA,CAAcM,MAAM,KAAK,KAAKN,aAAA,CAAcM,MAAM,KAAK,GAAG;MAC5D;MACAC,OAAA,CAAQC,IAAI,CACV,+DACE;IAEN;EACF;EACA,QAAQR,aAAA,CAAcM,MAAM;IAC1B;IACA,KAAK;MACH,OAAON,aAAA;IACT;IACA,KAAK;MACH,OAAO,CAACD,SAAA,EAAWC,aAAa,CAAC,EAAE,CAAC;IACtC;IACA;MACE,OAAO,CAACD,SAAA,EAAWA,SAAA,CAAU;EAAA;AAEnC"}

package/lib/components/Dialog/useDialogContextValues.js

@@ -6,7 +6,9 @@ export function useDialogContextValues_unstable(state) {
     dialogTitleId,
     isNestedDialog,
     inertTrapFocus,
-    requestOpenChange
+    requestOpenChange,
+    modalAttributes,
+    triggerAttributes
   } = state;
   /**
   * This context is created with "@fluentui/react-context-selector",
@@ -19,6 +21,8 @@ export function useDialogContextValues_unstable(state) {
     dialogTitleId,
     isNestedDialog,
     inertTrapFocus,
+    modalAttributes,
+    triggerAttributes,
     requestOpenChange
   };
   const dialogSurface = false;

package/lib/components/Dialog/useDialogContextValues.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","dialog","dialogSurface"],"sources":["../../../src/components/Dialog/useDialogContextValues.ts"],"sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n  const { modalType, open, dialogRef, dialogTitleId, isNestedDialog, inertTrapFocus, requestOpenChange } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const dialog: DialogContextValue = {\n    open,\n    modalType,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    requestOpenChange,\n  };\n\n  const dialogSurface: DialogSurfaceContextValue = false;\n\n  return { dialog, dialogSurface };\n}\n"],"mappings":"AAGA,OAAO,SAASA,gCAAgCC,KAAkB,EAAuB;EACvF,MAAM;IAAEC,SAAA;IAAWC,IAAA;IAAMC,SAAA;IAAWC,aAAA;IAAeC,cAAA;IAAgBC,cAAA;IAAgBC;EAAiB,CAAE,GAAGP,KAAA;EAEzG;;;;EAIA,MAAMQ,MAAA,GAA6B;IACjCN,IAAA;IACAD,SAAA;IACAE,SAAA;IACAC,aAAA;IACAC,cAAA;IACAC,cAAA;IACAC;EACF;EAEA,MAAME,aAAA,GAA2C,KAAK;EAEtD,OAAO;IAAED,MAAA;IAAQC;EAAc;AACjC"}
+{"version":3,"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","modalAttributes","triggerAttributes","dialog","dialogSurface"],"sources":["../../../src/components/Dialog/useDialogContextValues.ts"],"sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n  const {\n    modalType,\n    open,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    requestOpenChange,\n    modalAttributes,\n    triggerAttributes,\n  } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const dialog: DialogContextValue = {\n    open,\n    modalType,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    modalAttributes,\n    triggerAttributes,\n    requestOpenChange,\n  };\n\n  const dialogSurface: DialogSurfaceContextValue = false;\n\n  return { dialog, dialogSurface };\n}\n"],"mappings":"AAGA,OAAO,SAASA,gCAAgCC,KAAkB,EAAuB;EACvF,MAAM;IACJC,SAAA;IACAC,IAAA;IACAC,SAAA;IACAC,aAAA;IACAC,cAAA;IACAC,cAAA;IACAC,iBAAA;IACAC,eAAA;IACAC;EAAiB,CAClB,GAAGT,KAAA;EAEJ;;;;EAIA,MAAMU,MAAA,GAA6B;IACjCR,IAAA;IACAD,SAAA;IACAE,SAAA;IACAC,aAAA;IACAC,cAAA;IACAC,cAAA;IACAE,eAAA;IACAC,iBAAA;IACAF;EACF;EAEA,MAAMI,aAAA,GAA2C,KAAK;EAEtD,OAAO;IAAED,MAAA;IAAQC;EAAc;AACjC"}

package/lib/components/DialogSurface/useDialogSurface.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } from '@fluentui/react-utilities';
 import { useDialogContext_unstable } from '../../contexts';
 import { isEscapeKeyDismiss } from '../../utils';
-import { useModalAttributes } from '@fluentui/react-tabster';
 /**
  * Create the state required to render DialogSurface.
  *
@@ -18,7 +17,7 @@ export const useDialogSurface_unstable = (props, ref) => {
     as
   } = props;
   const modalType = useDialogContext_unstable(ctx => ctx.modalType);
-  const inertTrapFocus = useDialogContext_unstable(ctx => ctx.inertTrapFocus);
+  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);
   const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);
   const open = useDialogContext_unstable(ctx => ctx.open);
   const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
@@ -50,12 +49,6 @@ export const useDialogSurface_unstable = (props, ref) => {
       event.stopPropagation();
     }
   });
-  const {
-    modalAttributes
-  } = useModalAttributes({
-    trapFocus: modalType !== 'non-modal',
-    legacyTrapFocus: !inertTrapFocus
-  });
   return {
     components: {
       backdrop: 'div',

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","isResolvedShorthand","useDialogContext_unstable","isEscapeKeyDismiss","useModalAttributes","useDialogSurface_unstable","props","ref","backdrop","as","modalType","ctx","inertTrapFocus","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","_props_backdrop","_props_backdrop_onClick","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","stopPropagation","modalAttributes","trapFocus","legacyTrapFocus","components","root","required","defaultProps","tabIndex","role","undefined"],"sources":["../../../src/components/DialogSurface/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 { isEscapeKeyDismiss } from '../../utils';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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 { backdrop, as } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const inertTrapFocus = useDialogContext_unstable(ctx => ctx.inertTrapFocus);\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 (isEscapeKeyDismiss(event, modalType)) {\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 { modalAttributes } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus,\n  });\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n    },\n    backdrop: resolveShorthand(backdrop, {\n      required: open && modalType !== 'non-modal',\n      defaultProps: {\n        'aria-hidden': 'true',\n        onClick: handledBackdropClick,\n      },\n    }),\n    root: getNativeElementProps(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"],"mappings":"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"}
+{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","isResolvedShorthand","useDialogContext_unstable","isEscapeKeyDismiss","useDialogSurface_unstable","props","ref","backdrop","as","modalType","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","_props_backdrop","_props_backdrop_onClick","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","stopPropagation","components","root","required","defaultProps","tabIndex","role","undefined"],"sources":["../../../src/components/DialogSurface/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 { isEscapeKeyDismiss } from '../../utils';\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 { backdrop, as } = props;\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 (isEscapeKeyDismiss(event, modalType)) {\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  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n    },\n    backdrop: resolveShorthand(backdrop, {\n      required: open && modalType !== 'non-modal',\n      defaultProps: {\n        'aria-hidden': 'true',\n        onClick: handledBackdropClick,\n      },\n    }),\n    root: getNativeElementProps(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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,QACd;AAEP,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;;AASA,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,KAAA,EACAC,GAAA,KACuB;EACvB,MAAM;IAAEC,QAAA;IAAUC;EAAE,CAAE,GAAGH,KAAA;EACzB,MAAMI,SAAA,GAAYP,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAID,SAAS;EAChE,MAAME,eAAA,GAAkBT,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIC,eAAe;EAC5E,MAAMC,SAAA,GAAYV,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIE,SAAS;EAChE,MAAMC,IAAA,GAAOX,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIG,IAAI;EACtD,MAAMC,iBAAA,GAAoBZ,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAII,iBAAiB;EAChF,MAAMC,aAAA,GAAgBb,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIM,aAAa;EAExE,MAAMC,oBAAA,GAAuBlB,gBAAA,CAAkBmB,KAAA,IAA4C;IACzF,IAAIjB,mBAAA,CAAoBI,KAAA,CAAME,QAAQ,GAAG;UACvCY,eAAA,EAAAC,uBAAA;MAAA,CAAAA,uBAAA,IAAAD,eAAA,GAAAd,KAAA,CAAME,QAAQ,EAACc,OAAO,cAAtBD,uBAAA,uBAAAA,uBAAA,CAAAE,IAAA,CAAAH,eAAA,EAAyBD,KAAA;IAC3B;IACA,IAAIT,SAAA,KAAc,WAAW,CAACS,KAAA,CAAMK,kBAAkB,IAAI;MACxDT,iBAAA,CAAkB;QAChBI,KAAA;QACAL,IAAA,EAAM,KAAK;QACXW,IAAA,EAAM;MACR;IACF;EACF;EAEA,MAAMC,aAAA,GAAgB1B,gBAAA,CAAkBmB,KAAA,IAA+C;QACrFQ,gBAAA;IAAA,CAAAA,gBAAA,GAAArB,KAAA,CAAMsB,SAAS,cAAfD,gBAAA,uBAAAA,gBAAA,CAAAJ,IAAA,CAAAjB,KAAA,EAAkBa,KAAA;IAElB,IAAIf,kBAAA,CAAmBe,KAAA,EAAOT,SAAA,GAAY;MACxCK,iBAAA,CAAkB;QAChBI,KAAA;QACAL,IAAA,EAAM,KAAK;QACXW,IAAA,EAAM;MACR;MACA;MACA;MACAN,KAAA,CAAMU,eAAe;IACvB;EACF;EAEA,OAAO;IACLC,UAAA,EAAY;MACVtB,QAAA,EAAU;MACVuB,IAAA,EAAM;IACR;IACAvB,QAAA,EAAUT,gBAAA,CAAiBS,QAAA,EAAU;MACnCwB,QAAA,EAAUlB,IAAA,IAAQJ,SAAA,KAAc;MAChCuB,YAAA,EAAc;QACZ,eAAe;QACfX,OAAA,EAASJ;MACX;IACF;IACAa,IAAA,EAAMjC,qBAAA,CAAsBW,EAAA,aAAAA,EAAA,cAAAA,EAAA,GAAM,KAAK,EAAE;MACvCyB,QAAA,EAAU,CAAC;MACX,cAAcxB,SAAA,KAAc;MAC5ByB,IAAA,EAAMzB,SAAA,KAAc,UAAU,gBAAgB,QAAQ;MACtD,mBAAmBJ,KAAK,CAAC,aAAa,GAAG8B,SAAA,GAAYpB,aAAa;MAClE,GAAGV,KAAK;MACR,GAAGM,eAAe;MAClBgB,SAAA,EAAWF,aAAA;MACXnB,GAAA,EAAKN,aAAA,CAAcM,GAAA,EAAKM,SAAA;IAC1B;EACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DialogTitle/DialogTitle.types.ts"],"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"],"mappings":"AAAA"}
+{"version":3,"names":[],"sources":["../../../src/components/DialogTitle/DialogTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogTitleSlots = {\n  /**\n   * By default this is a h2, but can be any heading or div,\n   * if `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes\n   */\n  root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\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"],"mappings":"AAAA"}

package/lib/components/DialogTitle/useDialogTitle.js

@@ -23,10 +23,10 @@ export const useDialogTitle_unstable = (props, ref) => {
   const internalStyles = useDialogTitleInternalStyles();
   return {
     components: {
-      root: 'div',
+      root: 'h2',
       action: 'div'
     },
-    root: getNativeElementProps(as !== null && as !== void 0 ? as : 'div', {
+    root: getNativeElementProps(as !== null && as !== void 0 ? as : 'h2', {
       ref,
       id: useDialogContext_unstable(ctx => ctx.dialogTitleId),
       ...props

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","useDialogContext_unstable","Dismiss24Regular","resolveShorthand","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","as","action","modalType","ctx","internalStyles","components","root","id","dialogTitleId","required","defaultProps","children","createElement","disableButtonEnhancement","type","className","button"],"sources":["../../../src/components/DialogTitle/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 { 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 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              <Dismiss24Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAEtC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,gBAAgB,QAAQ;AACjC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,aAAa,QAAQ;AAC9B,SAASC,4BAA4B,QAAQ;AAE7C;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAM;IAAEC,EAAA;IAAIC;EAAM,CAAE,GAAGH,KAAA;EACvB,MAAMI,SAAA,GAAYV,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAID,SAAS;EAChE,MAAME,cAAA,GAAiBR,4BAAA;EAEvB,OAAO;IACLS,UAAA,EAAY;MACVC,IAAA,EAAM;MACNL,MAAA,EAAQ;IACV;IACAK,IAAA,EAAMf,qBAAA,CAAsBS,EAAA,aAAAA,EAAA,cAAAA,EAAA,GAAM,KAAK,EAAE;MACvCD,GAAA;MACAQ,EAAA,EAAIf,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAIK,aAAa;MACtD,GAAGV;IACL;IACAG,MAAA,EAAQP,gBAAA,CAAiBO,MAAA,EAAQ;MAC/BQ,QAAA,EAAUP,SAAA,KAAc;MACxBQ,YAAA,EAAc;QACZC,QAAA,eACErB,KAAA,CAAAsB,aAAA,CAACjB,aAAA;UAAckB,wBAAA,MAAwB;UAACZ,MAAA,EAAO;wBAC7CX,KAAA,CAAAsB,aAAA,CAAC;UACCE,IAAA,EAAK;UACLC,SAAA,EAAWX,cAAA,CAAeY,MAAM;UAChC;UACA,cAAW;wBAEX1B,KAAA,CAAAsB,aAAA,CAACnB,gBAAA;MAIT;IACF;EACF;AACF"}
+{"version":3,"names":["React","getNativeElementProps","useDialogContext_unstable","Dismiss24Regular","resolveShorthand","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","as","action","modalType","ctx","internalStyles","components","root","id","dialogTitleId","required","defaultProps","children","createElement","disableButtonEnhancement","type","className","button"],"sources":["../../../src/components/DialogTitle/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 { 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: '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              <Dismiss24Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAEtC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,gBAAgB,QAAQ;AACjC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,aAAa,QAAQ;AAC9B,SAASC,4BAA4B,QAAQ;AAE7C;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAM;IAAEC,EAAA;IAAIC;EAAM,CAAE,GAAGH,KAAA;EACvB,MAAMI,SAAA,GAAYV,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAID,SAAS;EAChE,MAAME,cAAA,GAAiBR,4BAAA;EAEvB,OAAO;IACLS,UAAA,EAAY;MACVC,IAAA,EAAM;MACNL,MAAA,EAAQ;IACV;IACAK,IAAA,EAAMf,qBAAA,CAAsBS,EAAA,aAAAA,EAAA,cAAAA,EAAA,GAAM,IAAI,EAAE;MACtCD,GAAA;MACAQ,EAAA,EAAIf,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAIK,aAAa;MACtD,GAAGV;IACL;IACAG,MAAA,EAAQP,gBAAA,CAAiBO,MAAA,EAAQ;MAC/BQ,QAAA,EAAUP,SAAA,KAAc;MACxBQ,YAAA,EAAc;QACZC,QAAA,eACErB,KAAA,CAAAsB,aAAA,CAACjB,aAAA;UAAckB,wBAAA,MAAwB;UAACZ,MAAA,EAAO;wBAC7CX,KAAA,CAAAsB,aAAA,CAAC;UACCE,IAAA,EAAK;UACLC,SAAA,EAAWX,cAAA,CAAeY,MAAM;UAChC;UACA,cAAW;wBAEX1B,KAAA,CAAAsB,aAAA,CAACnB,gBAAA;MAIT;IACF;EACF;AACF"}

package/lib/components/DialogTitle/useDialogTitleStyles.js

@@ -18,7 +18,11 @@ const useStyles = /*#__PURE__*/__styles({
     Ijaq50: "faq1aip",
     Br312pm: "f1m489tg",
     nk6f5a: "fv2srd9",
-    Bw0ie65: "f1tz6hh8"
+    Bw0ie65: "f1tz6hh8",
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["f11qmguv", "f1tyq0we"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1tyq0we", "f11qmguv"]
   },
   rootWithoutCloseButton: {
     Ijaq50: "faq1aip",
@@ -33,7 +37,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bw0ie65: "f98d4vj"
   }
 }, {
-  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".faq1aip{grid-row-start:title;}", ".f1m489tg{grid-column-start:title;}", ".fv2srd9{grid-row-end:title;}", ".f1tz6hh8{grid-column-end:title;}", ".f11nczdl{grid-row-end:close-button;}", ".f98d4vj{grid-column-end:close-button;}", ".f1hysmiz{grid-row-start:close-button;}", ".f1379kmu{grid-column-start:close-button;}"]
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".faq1aip{grid-row-start:title;}", ".f1m489tg{grid-column-start:title;}", ".fv2srd9{grid-row-end:title;}", ".f1tz6hh8{grid-column-end:title;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f11nczdl{grid-row-end:close-button;}", ".f98d4vj{grid-column-end:close-button;}", ".f1hysmiz{grid-row-start:close-button;}", ".f1379kmu{grid-column-start:close-button;}"]
 });
 /**
  * Styles to be applied on internal elements used by default action on non-modal Dialog

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","typographyStyles","TITLE_ACTION_GRID_AREA","TITLE_GRID_AREA","createFocusOutlineStyle","dialogTitleClassNames","root","action","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","rootWithoutCloseButton","d","useDialogTitleInternalStyles","button","qhf8xq","B7ck84d","De3pzq","sj55zd","Bceei9c","B68tc82","Bmxbyg5","z8tnut","z189sj","Byoj8tv","uwmqm3","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","f","i","useDialogTitleStyles_unstable","state","styles","className"],"sources":["../../../src/components/DialogTitle/useDialogTitleStyles.ts"],"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    cursor: 'pointer',\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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,SAASC,gBAAgB,QAAQ;AACjC,SAASC,sBAAsB,EAAEC,eAAe,QAAQ;AACxD,SAASC,uBAAuB,QAAQ;AAExC,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,MAAA,EAAQ;AACV;AAEA;;;AAGA,MAAMC,SAAA,gBAAYV,QAAA;EAAAQ,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,sBAAA;IAAAJ,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAT,MAAA;IAAAM,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,EAWlB;AAEA;;;;AAIA,OAAO,MAAMC,4BAAA,gBAA+BrB,QAAA;EAAAsB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAf,OAAA;IAAAC,OAAA;IAAAe,OAAA;IAAAb,OAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAjD,CAAA;EAAAkD,CAAA;EAAAC,CAAA;AAAA,EAiB5C;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,MAAA,GAAShE,SAAA;EACf+D,KAAA,CAAMjE,IAAI,CAACmE,SAAS,GAAG1E,YAAA,CACrBM,qBAAA,CAAsBC,IAAI,EAC1BkE,MAAA,CAAOlE,IAAI,EACX,CAACiE,KAAA,CAAMhE,MAAM,IAAIiE,MAAA,CAAOvD,sBAAsB,EAC9CsD,KAAA,CAAMjE,IAAI,CAACmE,SAAS;EAEtB,IAAIF,KAAA,CAAMhE,MAAM,EAAE;IAChBgE,KAAA,CAAMhE,MAAM,CAACkE,SAAS,GAAG1E,YAAA,CAAaM,qBAAA,CAAsBE,MAAM,EAAEiE,MAAA,CAAOjE,MAAM,EAAEgE,KAAA,CAAMhE,MAAM,CAACkE,SAAS;EAC3G;EACA,OAAOF,KAAA;AACT"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","typographyStyles","TITLE_ACTION_GRID_AREA","TITLE_GRID_AREA","createFocusOutlineStyle","dialogTitleClassNames","root","action","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","B6of3ja","t21cq0","jrapky","Frg6f3","rootWithoutCloseButton","d","useDialogTitleInternalStyles","button","qhf8xq","B7ck84d","De3pzq","sj55zd","Bceei9c","B68tc82","Bmxbyg5","z8tnut","z189sj","Byoj8tv","uwmqm3","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","f","i","useDialogTitleStyles_unstable","state","styles","className"],"sources":["../../../src/components/DialogTitle/useDialogTitleStyles.ts"],"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    ...shorthands.margin(0),\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    cursor: 'pointer',\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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,SAASC,gBAAgB,QAAQ;AACjC,SAASC,sBAAsB,EAAEC,eAAe,QAAQ;AACxD,SAASC,uBAAuB,QAAQ;AAExC,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,MAAA,EAAQ;AACV;AAEA;;;AAGA,MAAMC,SAAA,gBAAYV,QAAA;EAAAQ,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,sBAAA;IAAAR,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAT,MAAA;IAAAM,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAM,CAAA;AAAA,EAYlB;AAEA;;;;AAIA,OAAO,MAAMC,4BAAA,gBAA+BzB,QAAA;EAAA0B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAnB,OAAA;IAAAC,OAAA;IAAAmB,OAAA;IAAAjB,OAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAjD,CAAA;EAAAkD,CAAA;EAAAC,CAAA;AAAA,EAiB5C;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,MAAA,GAASpE,SAAA;EACfmE,KAAA,CAAMrE,IAAI,CAACuE,SAAS,GAAG9E,YAAA,CACrBM,qBAAA,CAAsBC,IAAI,EAC1BsE,MAAA,CAAOtE,IAAI,EACX,CAACqE,KAAA,CAAMpE,MAAM,IAAIqE,MAAA,CAAOvD,sBAAsB,EAC9CsD,KAAA,CAAMrE,IAAI,CAACuE,SAAS;EAEtB,IAAIF,KAAA,CAAMpE,MAAM,EAAE;IAChBoE,KAAA,CAAMpE,MAAM,CAACsE,SAAS,GAAG9E,YAAA,CAAaM,qBAAA,CAAsBE,MAAM,EAAEqE,MAAA,CAAOrE,MAAM,EAAEoE,KAAA,CAAMpE,MAAM,CAACsE,SAAS;EAC3G;EACA,OAAOF,KAAA;AACT"}

package/lib/components/DialogTrigger/useDialogTrigger.js

@@ -1,5 +1,4 @@
 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';
 import { useARIAButtonProps } from '@fluentui/react-aria';
@@ -18,9 +17,7 @@ export const useDialogTrigger_unstable = props => {
   } = props;
   const child = getTriggerChild(children);
   const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
-  const {
-    triggerAttributes
-  } = useModalAttributes();
+  const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes);
   const handleClick = useEventCallback(event => {
     var _child_props, _child_props_onClick;
     (_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);

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

@@ -1 +1 @@
-{"version":3,"names":["React","useModalAttributes","applyTriggerPropsToChildren","getTriggerChild","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"sources":["../../../src/components/DialogTrigger/useDialogTrigger.ts"],"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, disableButtonEnhancement = false, 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  const triggerChildProps = {\n    ...child?.props,\n    ref: child?.ref,\n    onClick: handleClick,\n    ...triggerAttributes,\n  } as const;\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    {\n      ...triggerChildProps,\n      type: 'button',\n    },\n  );\n\n  return {\n    children: applyTriggerPropsToChildren(\n      children,\n      disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n    ),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ;AAE/E,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ;AAC5E,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;AAMA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAAkD;EAC1F,MAAMC,qBAAA,GAAwBJ,gCAAA;EAE9B,MAAM;IAAEK,QAAA;IAAUC,wBAAA,GAA2B,KAAK;IAAEC,MAAA,GAASH,qBAAA,GAAwB,UAAU;EAAM,CAAE,GAAGD,KAAA;EAE1G,MAAMK,KAAA,GAAQX,eAAA,CAAgBQ,QAAA;EAE9B,MAAMI,iBAAA,GAAoBV,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAID,iBAAiB;EAEhF,MAAM;IAAEE;EAAiB,CAAE,GAAGhB,kBAAA;EAE9B,MAAMiB,WAAA,GAAcd,gBAAA,CACjBe,KAAA,IAAoF;QACnFC,YAAA,EAAAC,oBAAA;IAAA,CAAAA,oBAAA,IAAAD,YAAA,GAAAN,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOL,KAAK,EAACa,OAAO,cAApBD,oBAAA,uBAAAA,oBAAA,CAAAE,IAAA,CAAAH,YAAA,EAAuBD,KAAA;IACvB,IAAI,CAACA,KAAA,CAAMK,kBAAkB,IAAI;MAC/BT,iBAAA,CAAkB;QAChBI,KAAA;QACAM,IAAA,EAAM;QACNC,IAAA,EAAMb,MAAA,KAAW;MACnB;IACF;EACF;EAGF,MAAMc,iBAAA,GAAoB;IACxB,IAAGb,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOL,KAAK;IACfmB,GAAA,EAAKd,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOc,GAAG;IACfN,OAAA,EAASJ,WAAA;IACT,GAAGD;EACL;EAEA,MAAMY,2BAAA,GAA8BtB,kBAAA,CAClC,CAAAO,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOW,IAAI,MAAK,YAAY,CAAAX,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOW,IAAI,MAAK,MAAMX,KAAA,CAAMW,IAAI,GAAG,KAAK,EACpE;IACE,GAAGE,iBAAiB;IACpBF,IAAA,EAAM;EACR;EAGF,OAAO;IACLd,QAAA,EAAUT,2BAAA,CACRS,QAAA,EACAC,wBAAA,GAA2Be,iBAAA,GAAoBE,2BAA2B;EAE9E;AACF"}
+{"version":3,"names":["React","applyTriggerPropsToChildren","getTriggerChild","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"sources":["../../../src/components/DialogTrigger/useDialogTrigger.ts"],"sourcesContent":["import * as React from 'react';\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, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n  const child = getTriggerChild(children);\n\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes);\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  const triggerChildProps = {\n    ...child?.props,\n    ref: child?.ref,\n    onClick: handleClick,\n    ...triggerAttributes,\n  } as const;\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    {\n      ...triggerChildProps,\n      type: 'button',\n    },\n  );\n\n  return {\n    children: applyTriggerPropsToChildren(\n      children,\n      disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n    ),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ;AAE/E,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ;AAC5E,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;AAMA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAAkD;EAC1F,MAAMC,qBAAA,GAAwBJ,gCAAA;EAE9B,MAAM;IAAEK,QAAA;IAAUC,wBAAA,GAA2B,KAAK;IAAEC,MAAA,GAASH,qBAAA,GAAwB,UAAU;EAAM,CAAE,GAAGD,KAAA;EAE1G,MAAMK,KAAA,GAAQX,eAAA,CAAgBQ,QAAA;EAE9B,MAAMI,iBAAA,GAAoBV,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAID,iBAAiB;EAChF,MAAME,iBAAA,GAAoBZ,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAIC,iBAAiB;EAEhF,MAAMC,WAAA,GAAcd,gBAAA,CACjBe,KAAA,IAAoF;QACnFC,YAAA,EAAAC,oBAAA;IAAA,CAAAA,oBAAA,IAAAD,YAAA,GAAAN,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOL,KAAK,EAACa,OAAO,cAApBD,oBAAA,uBAAAA,oBAAA,CAAAE,IAAA,CAAAH,YAAA,EAAuBD,KAAA;IACvB,IAAI,CAACA,KAAA,CAAMK,kBAAkB,IAAI;MAC/BT,iBAAA,CAAkB;QAChBI,KAAA;QACAM,IAAA,EAAM;QACNC,IAAA,EAAMb,MAAA,KAAW;MACnB;IACF;EACF;EAGF,MAAMc,iBAAA,GAAoB;IACxB,IAAGb,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOL,KAAK;IACfmB,GAAA,EAAKd,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOc,GAAG;IACfN,OAAA,EAASJ,WAAA;IACT,GAAGD;EACL;EAEA,MAAMY,2BAAA,GAA8BtB,kBAAA,CAClC,CAAAO,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOW,IAAI,MAAK,YAAY,CAAAX,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOW,IAAI,MAAK,MAAMX,KAAA,CAAMW,IAAI,GAAG,KAAK,EACpE;IACE,GAAGE,iBAAiB;IACpBF,IAAA,EAAM;EACR;EAGF,OAAO;IACLd,QAAA,EAAUT,2BAAA,CACRS,QAAA,EACAC,wBAAA,GAA2Be,iBAAA,GAAoBE,2BAA2B;EAE9E;AACF"}

package/lib/contexts/dialogContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useContextSelector","defaultContextValue","open","inertTrapFocus","modalType","isNestedDialog","dialogRef","current","requestOpenChange","DialogContext","undefined","DialogProvider","Provider","useDialogContext_unstable","selector","ctx"],"sources":["../../src/contexts/dialogContext.ts"],"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  inertTrapFocus: boolean;\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  inertTrapFocus: 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,aAAa,EAAmBC,kBAAkB,QAAQ;AAkBnE,MAAMC,mBAAA,GAA0C;EAC9CC,IAAA,EAAM,KAAK;EACXC,cAAA,EAAgB,KAAK;EACrBC,SAAA,EAAW;EACXC,cAAA,EAAgB,KAAK;EACrBC,SAAA,EAAW;IAAEC,OAAA,EAAS;EAAK;EAC3BC,kBAAA,EAAoB;IAClB;AAEJ;AAEA;AACA,OAAO,MAAMC,aAAA,gBAAyDV,aAAA,CACpEW,SAAA;AAGF,OAAO,MAAMC,cAAA,GAAiBF,aAAA,CAAcG,QAAQ;AACpD,OAAO,MAAMC,yBAAA,GAAgCC,QAAA,IAC3Cd,kBAAA,CAAmBS,aAAA,EAAe,CAACM,GAAA,GAAMd,mBAAmB,KAAKa,QAAA,CAASC,GAAA"}
+{"version":3,"names":["React","createContext","useContextSelector","defaultContextValue","open","inertTrapFocus","modalType","isNestedDialog","dialogRef","current","requestOpenChange","DialogContext","undefined","DialogProvider","Provider","useDialogContext_unstable","selector","ctx"],"sources":["../../src/contexts/dialogContext.ts"],"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';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\nexport type DialogContextValue = {\n  open: boolean;\n  inertTrapFocus: boolean;\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} & Partial<ReturnType<typeof useModalAttributes>>;\n\nconst defaultContextValue: DialogContextValue = {\n  open: false,\n  inertTrapFocus: 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,aAAa,EAAmBC,kBAAkB,QAAQ;AAmBnE,MAAMC,mBAAA,GAA0C;EAC9CC,IAAA,EAAM,KAAK;EACXC,cAAA,EAAgB,KAAK;EACrBC,SAAA,EAAW;EACXC,cAAA,EAAgB,KAAK;EACrBC,SAAA,EAAW;IAAEC,OAAA,EAAS;EAAK;EAC3BC,kBAAA,EAAoB;IAClB;AAEJ;AAEA;AACA,OAAO,MAAMC,aAAA,gBAAyDV,aAAA,CACpEW,SAAA;AAGF,OAAO,MAAMC,cAAA,GAAiBF,aAAA,CAAcG,QAAQ;AACpD,OAAO,MAAMC,yBAAA,GAAgCC,QAAA,IAC3Cd,kBAAA,CAAmBS,aAAA,EAAe,CAACM,GAAA,GAAMd,mBAAmB,KAAKa,QAAA,CAASC,GAAA"}

package/lib-commonjs/components/Dialog/useDialog.js

@@ -12,6 +12,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
 const _reactContextSelector = require("@fluentui/react-context-selector");
 const _utils = require("../../utils");
 const _contexts = require("../../contexts");
+const _reactTabster = require("@fluentui/react-tabster");
 const useDialog_unstable = (props)=>{
     const { children , modalType ='modal' , onOpenChange , inertTrapFocus =false  } = props;
     const [trigger, content] = childrenToTriggerAndContent(children);
@@ -39,6 +40,10 @@ const useDialog_unstable = (props)=>{
         disableBodyScroll,
         isBodyScrollLocked
     ]);
+    const { modalAttributes , triggerAttributes  } = (0, _reactTabster.useModalAttributes)({
+        trapFocus: modalType !== 'non-modal',
+        legacyTrapFocus: !inertTrapFocus
+    });
     return {
         components: {
             backdrop: 'div'
@@ -51,7 +56,9 @@ const useDialog_unstable = (props)=>{
         requestOpenChange,
         dialogTitleId: (0, _reactUtilities.useId)('dialog-title-'),
         isNestedDialog: (0, _reactContextSelector.useHasParentContext)(_contexts.DialogContext),
-        dialogRef: focusRef
+        dialogRef: focusRef,
+        modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,
+        triggerAttributes
     };
 };
 /**

package/lib-commonjs/components/Dialog/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Dialog/useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = props => {\n  const {\n    children,\n    modalType = 'modal',\n    onOpenChange,\n    inertTrapFocus = false\n  } = props;\n  const [trigger, content] = childrenToTriggerAndContent(children);\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false\n  });\n  const requestOpenChange = useEventCallback(data => {\n    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n  const focusRef = useFocusFirstElement(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n  return {\n    components: {\n      backdrop: 'div'\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content: open ? content : null,\n    trigger,\n    requestOpenChange,\n    dialogTitleId: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: focusRef\n  };\n};\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(children) {\n  const childrenArray = React.Children.toArray(children);\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Dialog must contain at least one child <DialogSurface/>,\\n' + 'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)');\n    }\n  }\n  switch (childrenArray.length) {\n    // case where there's a trigger followed by content\n    case 2:\n      return childrenArray;\n    // case where there's only content\n    case 1:\n      return [undefined, childrenArray[0]];\n    // unknown case\n    default:\n      return [undefined, undefined];\n  }\n}\n//# sourceMappingURL=useDialog.js.map"],"names":["useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","useControllableState","state","defaultState","defaultOpen","initialState","requestOpenChange","useEventCallback","data","event","isDefaultPrevented","focusRef","useFocusFirstElement","disableBodyScroll","useDisableBodyScroll","isBodyScrollLocked","Boolean","useIsomorphicLayoutEffect","components","backdrop","dialogTitleId","useId","isNestedDialog","useHasParentContext","DialogContext","dialogRef","childrenArray","React","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACkE;sCACrD;uBACuB;0BAC7B;AASvB,MAAMA,qBAAqBC,CAAAA,QAAS;IACzC,MAAM,EACJC,SAAQ,EACRC,WAAY,QAAO,EACnBC,aAAY,EACZC,gBAAiB,KAAK,CAAA,EACvB,GAAGJ;IACJ,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IACvD,MAAM,CAACO,MAAMC,QAAQ,GAAGC,IAAAA,oCAAoB,EAAC;QAC3CC,OAAOX,MAAMQ,IAAI;QACjBI,cAAcZ,MAAMa,WAAW;QAC/BC,cAAc,KAAK;IACrB;IACA,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAACC,CAAAA,OAAQ;QACjDd,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAac,KAAKC,KAAK,EAAED,KAAK;QAC1F,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCV,QAAQQ,KAAKT,IAAI;QACnB,CAAC;IACH;IACA,MAAMY,WAAWC,IAAAA,2BAAoB,EAACb,MAAMN;IAC5C,MAAMoB,oBAAoBC,IAAAA,2BAAoB;IAC9C,MAAMC,qBAAqBC,QAAQjB,QAAQN,cAAc;IACzDwB,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIF,oBAAoB;YACtB,OAAOF;QACT,CAAC;IACH,GAAG;QAACA;QAAmBE;KAAmB;IAC1C,OAAO;QACLG,YAAY;YACVC,UAAU;QACZ;QACAxB;QACAI;QACAN;QACAI,SAASE,OAAOF,UAAU,IAAI;QAC9BD;QACAU;QACAc,eAAeC,IAAAA,qBAAK,EAAC;QACrBC,gBAAgBC,IAAAA,yCAAmB,EAACC,uBAAa;QACjDC,WAAWd;IACb;AACF;AACA;;CAEC,GACD,SAASb,4BAA4BN,QAAQ,EAAE;IAC7C,MAAMkC,gBAAgBC,OAAMC,QAAQ,CAACC,OAAO,CAACrC;IAC7C,IAAIsC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIN,cAAcO,MAAM,KAAK,KAAKP,cAAcO,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,+DAA+D;QAC9E,CAAC;IACH,CAAC;IACD,OAAQT,cAAcO,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAOP;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACU;gBAAWV,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACU;gBAAWA;aAAU;IACjC;AACF,EACA,qCAAqC"}
+{"version":3,"sources":["../../../lib/components/Dialog/useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = props => {\n  const {\n    children,\n    modalType = 'modal',\n    onOpenChange,\n    inertTrapFocus = false\n  } = props;\n  const [trigger, content] = childrenToTriggerAndContent(children);\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false\n  });\n  const requestOpenChange = useEventCallback(data => {\n    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n  const focusRef = useFocusFirstElement(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n  const {\n    modalAttributes,\n    triggerAttributes\n  } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus\n  });\n  return {\n    components: {\n      backdrop: 'div'\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content: open ? content : null,\n    trigger,\n    requestOpenChange,\n    dialogTitleId: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: focusRef,\n    modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,\n    triggerAttributes\n  };\n};\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(children) {\n  const childrenArray = React.Children.toArray(children);\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Dialog must contain at least one child <DialogSurface/>,\\n' + 'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)');\n    }\n  }\n  switch (childrenArray.length) {\n    // case where there's a trigger followed by content\n    case 2:\n      return childrenArray;\n    // case where there's only content\n    case 1:\n      return [undefined, childrenArray[0]];\n    // unknown case\n    default:\n      return [undefined, undefined];\n  }\n}\n//# sourceMappingURL=useDialog.js.map"],"names":["useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","useControllableState","state","defaultState","defaultOpen","initialState","requestOpenChange","useEventCallback","data","event","isDefaultPrevented","focusRef","useFocusFirstElement","disableBodyScroll","useDisableBodyScroll","isBodyScrollLocked","Boolean","useIsomorphicLayoutEffect","modalAttributes","triggerAttributes","useModalAttributes","trapFocus","legacyTrapFocus","components","backdrop","dialogTitleId","useId","isNestedDialog","useHasParentContext","DialogContext","dialogRef","undefined","childrenArray","React","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":";;;;+BAcaA;;aAAAA;;;6DAdU;gCACkE;sCACrD;uBACuB;0BAC7B;8BACK;AAS5B,MAAMA,qBAAqBC,CAAAA,QAAS;IACzC,MAAM,EACJC,SAAQ,EACRC,WAAY,QAAO,EACnBC,aAAY,EACZC,gBAAiB,KAAK,CAAA,EACvB,GAAGJ;IACJ,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IACvD,MAAM,CAACO,MAAMC,QAAQ,GAAGC,IAAAA,oCAAoB,EAAC;QAC3CC,OAAOX,MAAMQ,IAAI;QACjBI,cAAcZ,MAAMa,WAAW;QAC/BC,cAAc,KAAK;IACrB;IACA,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAACC,CAAAA,OAAQ;QACjDd,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAac,KAAKC,KAAK,EAAED,KAAK;QAC1F,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCV,QAAQQ,KAAKT,IAAI;QACnB,CAAC;IACH;IACA,MAAMY,WAAWC,IAAAA,2BAAoB,EAACb,MAAMN;IAC5C,MAAMoB,oBAAoBC,IAAAA,2BAAoB;IAC9C,MAAMC,qBAAqBC,QAAQjB,QAAQN,cAAc;IACzDwB,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIF,oBAAoB;YACtB,OAAOF;QACT,CAAC;IACH,GAAG;QAACA;QAAmBE;KAAmB;IAC1C,MAAM,EACJG,gBAAe,EACfC,kBAAiB,EAClB,GAAGC,IAAAA,gCAAkB,EAAC;QACrBC,WAAW5B,cAAc;QACzB6B,iBAAiB,CAAC3B;IACpB;IACA,OAAO;QACL4B,YAAY;YACVC,UAAU;QACZ;QACA7B;QACAI;QACAN;QACAI,SAASE,OAAOF,UAAU,IAAI;QAC9BD;QACAU;QACAmB,eAAeC,IAAAA,qBAAK,EAAC;QACrBC,gBAAgBC,IAAAA,yCAAmB,EAACC,uBAAa;QACjDC,WAAWnB;QACXO,iBAAiBzB,cAAc,cAAcyB,kBAAkBa,SAAS;QACxEZ;IACF;AACF;AACA;;CAEC,GACD,SAASrB,4BAA4BN,QAAQ,EAAE;IAC7C,MAAMwC,gBAAgBC,OAAMC,QAAQ,CAACC,OAAO,CAAC3C;IAC7C,IAAI4C,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIN,cAAcO,MAAM,KAAK,KAAKP,cAAcO,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,+DAA+D;QAC9E,CAAC;IACH,CAAC;IACD,OAAQT,cAAcO,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAOP;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAWC,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACD;gBAAWA;aAAU;IACjC;AACF,EACA,qCAAqC"}

package/lib-commonjs/components/Dialog/useDialogContextValues.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "useDialogContextValues_unstable", {
     get: ()=>useDialogContextValues_unstable
 });
 function useDialogContextValues_unstable(state) {
-    const { modalType , open , dialogRef , dialogTitleId , isNestedDialog , inertTrapFocus , requestOpenChange  } = state;
+    const { modalType , open , dialogRef , dialogTitleId , isNestedDialog , inertTrapFocus , requestOpenChange , modalAttributes , triggerAttributes  } = state;
     /**
   * This context is created with "@fluentui/react-context-selector",
   * there is no sense to memoize it
@@ -18,6 +18,8 @@ function useDialogContextValues_unstable(state) {
         dialogTitleId,
         isNestedDialog,
         inertTrapFocus,
+        modalAttributes,
+        triggerAttributes,
         requestOpenChange
     };
     const dialogSurface = false;

package/lib-commonjs/components/Dialog/useDialogContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Dialog/useDialogContextValues.js"],"sourcesContent":["export function useDialogContextValues_unstable(state) {\n  const {\n    modalType,\n    open,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    requestOpenChange\n  } = state;\n  /**\n  * This context is created with \"@fluentui/react-context-selector\",\n  * there is no sense to memoize it\n  */\n  const dialog = {\n    open,\n    modalType,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    requestOpenChange\n  };\n  const dialogSurface = false;\n  return {\n    dialog,\n    dialogSurface\n  };\n}\n//# sourceMappingURL=useDialogContextValues.js.map"],"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","dialog","dialogSurface"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,gCAAgCC,KAAK,EAAE;IACrD,MAAM,EACJC,UAAS,EACTC,KAAI,EACJC,UAAS,EACTC,cAAa,EACbC,eAAc,EACdC,eAAc,EACdC,kBAAiB,EAClB,GAAGP;IACJ;;;EAGA,GACA,MAAMQ,SAAS;QACbN;QACAD;QACAE;QACAC;QACAC;QACAC;QACAC;IACF;IACA,MAAME,gBAAgB,KAAK;IAC3B,OAAO;QACLD;QACAC;IACF;AACF,EACA,kDAAkD"}
+{"version":3,"sources":["../../../lib/components/Dialog/useDialogContextValues.js"],"sourcesContent":["export function useDialogContextValues_unstable(state) {\n  const {\n    modalType,\n    open,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    requestOpenChange,\n    modalAttributes,\n    triggerAttributes\n  } = state;\n  /**\n  * This context is created with \"@fluentui/react-context-selector\",\n  * there is no sense to memoize it\n  */\n  const dialog = {\n    open,\n    modalType,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    modalAttributes,\n    triggerAttributes,\n    requestOpenChange\n  };\n  const dialogSurface = false;\n  return {\n    dialog,\n    dialogSurface\n  };\n}\n//# sourceMappingURL=useDialogContextValues.js.map"],"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","modalAttributes","triggerAttributes","dialog","dialogSurface"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,gCAAgCC,KAAK,EAAE;IACrD,MAAM,EACJC,UAAS,EACTC,KAAI,EACJC,UAAS,EACTC,cAAa,EACbC,eAAc,EACdC,eAAc,EACdC,kBAAiB,EACjBC,gBAAe,EACfC,kBAAiB,EAClB,GAAGT;IACJ;;;EAGA,GACA,MAAMU,SAAS;QACbR;QACAD;QACAE;QACAC;QACAC;QACAC;QACAE;QACAC;QACAF;IACF;IACA,MAAMI,gBAAgB,KAAK;IAC3B,OAAO;QACLD;QACAC;IACF;AACF,EACA,kDAAkD"}

package/lib-commonjs/components/DialogSurface/useDialogSurface.js

@@ -11,11 +11,10 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactUtilities = require("@fluentui/react-utilities");
 const _contexts = require("../../contexts");
 const _utils = require("../../utils");
-const _reactTabster = require("@fluentui/react-tabster");
 const useDialogSurface_unstable = (props, ref)=>{
     const { backdrop , as  } = props;
     const modalType = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalType);
-    const inertTrapFocus = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.inertTrapFocus);
+    const modalAttributes = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalAttributes);
     const dialogRef = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogRef);
     const open = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.open);
     const requestOpenChange = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.requestOpenChange);
@@ -47,10 +46,6 @@ const useDialogSurface_unstable = (props, ref)=>{
             event.stopPropagation();
         }
     });
-    const { modalAttributes  } = (0, _reactTabster.useModalAttributes)({
-        trapFocus: modalType !== 'non-modal',
-        legacyTrapFocus: !inertTrapFocus
-    });
     return {
         components: {
             backdrop: 'div',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/DialogSurface/useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { isEscapeKeyDismiss } from '../../utils';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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 = (props, ref) => {\n  const {\n    backdrop,\n    as\n  } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const inertTrapFocus = useDialogContext_unstable(ctx => ctx.inertTrapFocus);\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  const handledBackdropClick = useEventCallback(event => {\n    if (isResolvedShorthand(props.backdrop)) {\n      var _props_backdrop, _props_backdrop_onClick;\n      (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick'\n      });\n    }\n  });\n  const handleKeyDown = useEventCallback(event => {\n    var _props_onKeyDown;\n    (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n    if (isEscapeKeyDismiss(event, modalType)) {\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  const {\n    modalAttributes\n  } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus\n  });\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div'\n    },\n    backdrop: resolveShorthand(backdrop, {\n      required: open && modalType !== 'non-modal',\n      defaultProps: {\n        'aria-hidden': 'true',\n        onClick: handledBackdropClick\n      }\n    }),\n    root: getNativeElementProps(as !== null && as !== void 0 ? as : 'div', {\n      tabIndex: -1,\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//# sourceMappingURL=useDialogSurface.js.map"],"names":["useDialogSurface_unstable","props","ref","backdrop","as","modalType","useDialogContext_unstable","ctx","inertTrapFocus","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","useEventCallback","event","isResolvedShorthand","_props_backdrop","_props_backdrop_onClick","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","isEscapeKeyDismiss","stopPropagation","modalAttributes","useModalAttributes","trapFocus","legacyTrapFocus","components","root","resolveShorthand","required","defaultProps","getNativeElementProps","tabIndex","role","undefined","useMergedRefs"],"mappings":";;;;+BAcaA;;aAAAA;;;6DAdU;gCACuF;0BACpE;uBACP;8BACA;AAU5B,MAAMA,4BAA4B,CAACC,OAAOC,MAAQ;IACvD,MAAM,EACJC,SAAQ,EACRC,GAAE,EACH,GAAGH;IACJ,MAAMI,YAAYC,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIF,SAAS;IAChE,MAAMG,iBAAiBF,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIC,cAAc;IAC1E,MAAMC,YAAYH,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIE,SAAS;IAChE,MAAMC,OAAOJ,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBL,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBN,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIM,aAAa;IACxE,MAAMC,uBAAuBC,IAAAA,gCAAgB,EAACC,CAAAA,QAAS;QACrD,IAAIC,IAAAA,mCAAmB,EAAChB,MAAME,QAAQ,GAAG;YACvC,IAAIe,iBAAiBC;YACpBA,CAAAA,0BAA0B,AAACD,CAAAA,kBAAkBjB,MAAME,QAAQ,AAAD,EAAGiB,OAAO,AAAD,MAAO,IAAI,IAAID,4BAA4B,KAAK,IAAI,KAAK,IAAIA,wBAAwBE,IAAI,CAACH,iBAAiBF,MAAM;QACvL,CAAC;QACD,IAAIX,cAAc,WAAW,CAACW,MAAMM,kBAAkB,IAAI;YACxDX,kBAAkB;gBAChBK;gBACAN,MAAM,KAAK;gBACXa,MAAM;YACR;QACF,CAAC;IACH;IACA,MAAMC,gBAAgBT,IAAAA,gCAAgB,EAACC,CAAAA,QAAS;QAC9C,IAAIS;QACHA,CAAAA,mBAAmBxB,MAAMyB,SAAS,AAAD,MAAO,IAAI,IAAID,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBJ,IAAI,CAACpB,OAAOe,MAAM;QAC3H,IAAIW,IAAAA,yBAAkB,EAACX,OAAOX,YAAY;YACxCM,kBAAkB;gBAChBK;gBACAN,MAAM,KAAK;gBACXa,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDP,MAAMY,eAAe;QACvB,CAAC;IACH;IACA,MAAM,EACJC,gBAAe,EAChB,GAAGC,IAAAA,gCAAkB,EAAC;QACrBC,WAAW1B,cAAc;QACzB2B,iBAAiB,CAACxB;IACpB;IACA,OAAO;QACLyB,YAAY;YACV9B,UAAU;YACV+B,MAAM;QACR;QACA/B,UAAUgC,IAAAA,gCAAgB,EAAChC,UAAU;YACnCiC,UAAU1B,QAAQL,cAAc;YAChCgC,cAAc;gBACZ,eAAe;gBACfjB,SAASN;YACX;QACF;QACAoB,MAAMI,IAAAA,qCAAqB,EAAClC,OAAO,IAAI,IAAIA,OAAO,KAAK,IAAIA,KAAK,KAAK,EAAE;YACrEmC,UAAU,CAAC;YACX,cAAclC,cAAc;YAC5BmC,MAAMnC,cAAc,UAAU,gBAAgB,QAAQ;YACtD,mBAAmBJ,KAAK,CAAC,aAAa,GAAGwC,YAAY7B,aAAa;YAClE,GAAGX,KAAK;YACR,GAAG4B,eAAe;YAClBH,WAAWF;YACXtB,KAAKwC,IAAAA,6BAAa,EAACxC,KAAKO;QAC1B;IACF;AACF,GACA,4CAA4C"}
+{"version":3,"sources":["../../../lib/components/DialogSurface/useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { isEscapeKeyDismiss } from '../../utils';\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 = (props, ref) => {\n  const {\n    backdrop,\n    as\n  } = props;\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  const handledBackdropClick = useEventCallback(event => {\n    if (isResolvedShorthand(props.backdrop)) {\n      var _props_backdrop, _props_backdrop_onClick;\n      (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick'\n      });\n    }\n  });\n  const handleKeyDown = useEventCallback(event => {\n    var _props_onKeyDown;\n    (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n    if (isEscapeKeyDismiss(event, modalType)) {\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  return {\n    components: {\n      backdrop: 'div',\n      root: 'div'\n    },\n    backdrop: resolveShorthand(backdrop, {\n      required: open && modalType !== 'non-modal',\n      defaultProps: {\n        'aria-hidden': 'true',\n        onClick: handledBackdropClick\n      }\n    }),\n    root: getNativeElementProps(as !== null && as !== void 0 ? as : 'div', {\n      tabIndex: -1,\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//# sourceMappingURL=useDialogSurface.js.map"],"names":["useDialogSurface_unstable","props","ref","backdrop","as","modalType","useDialogContext_unstable","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","useEventCallback","event","isResolvedShorthand","_props_backdrop","_props_backdrop_onClick","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","isEscapeKeyDismiss","stopPropagation","components","root","resolveShorthand","required","defaultProps","getNativeElementProps","tabIndex","role","undefined","useMergedRefs"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACuF;0BACpE;uBACP;AAU5B,MAAMA,4BAA4B,CAACC,OAAOC,MAAQ;IACvD,MAAM,EACJC,SAAQ,EACRC,GAAE,EACH,GAAGH;IACJ,MAAMI,YAAYC,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIF,SAAS;IAChE,MAAMG,kBAAkBF,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIC,eAAe;IAC5E,MAAMC,YAAYH,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIE,SAAS;IAChE,MAAMC,OAAOJ,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBL,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBN,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIM,aAAa;IACxE,MAAMC,uBAAuBC,IAAAA,gCAAgB,EAACC,CAAAA,QAAS;QACrD,IAAIC,IAAAA,mCAAmB,EAAChB,MAAME,QAAQ,GAAG;YACvC,IAAIe,iBAAiBC;YACpBA,CAAAA,0BAA0B,AAACD,CAAAA,kBAAkBjB,MAAME,QAAQ,AAAD,EAAGiB,OAAO,AAAD,MAAO,IAAI,IAAID,4BAA4B,KAAK,IAAI,KAAK,IAAIA,wBAAwBE,IAAI,CAACH,iBAAiBF,MAAM;QACvL,CAAC;QACD,IAAIX,cAAc,WAAW,CAACW,MAAMM,kBAAkB,IAAI;YACxDX,kBAAkB;gBAChBK;gBACAN,MAAM,KAAK;gBACXa,MAAM;YACR;QACF,CAAC;IACH;IACA,MAAMC,gBAAgBT,IAAAA,gCAAgB,EAACC,CAAAA,QAAS;QAC9C,IAAIS;QACHA,CAAAA,mBAAmBxB,MAAMyB,SAAS,AAAD,MAAO,IAAI,IAAID,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBJ,IAAI,CAACpB,OAAOe,MAAM;QAC3H,IAAIW,IAAAA,yBAAkB,EAACX,OAAOX,YAAY;YACxCM,kBAAkB;gBAChBK;gBACAN,MAAM,KAAK;gBACXa,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDP,MAAMY,eAAe;QACvB,CAAC;IACH;IACA,OAAO;QACLC,YAAY;YACV1B,UAAU;YACV2B,MAAM;QACR;QACA3B,UAAU4B,IAAAA,gCAAgB,EAAC5B,UAAU;YACnC6B,UAAUtB,QAAQL,cAAc;YAChC4B,cAAc;gBACZ,eAAe;gBACfb,SAASN;YACX;QACF;QACAgB,MAAMI,IAAAA,qCAAqB,EAAC9B,OAAO,IAAI,IAAIA,OAAO,KAAK,IAAIA,KAAK,KAAK,EAAE;YACrE+B,UAAU,CAAC;YACX,cAAc9B,cAAc;YAC5B+B,MAAM/B,cAAc,UAAU,gBAAgB,QAAQ;YACtD,mBAAmBJ,KAAK,CAAC,aAAa,GAAGoC,YAAYzB,aAAa;YAClE,GAAGX,KAAK;YACR,GAAGO,eAAe;YAClBkB,WAAWF;YACXtB,KAAKoC,IAAAA,6BAAa,EAACpC,KAAKO;QAC1B;IACF;AACF,GACA,4CAA4C"}

package/lib-commonjs/components/DialogTitle/useDialogTitle.js

@@ -19,10 +19,10 @@ const useDialogTitle_unstable = (props, ref)=>{
     const internalStyles = (0, _useDialogTitleStyles.useDialogTitleInternalStyles)();
     return {
         components: {
-            root: 'div',
+            root: 'h2',
             action: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)(as !== null && as !== void 0 ? as : 'div', {
+        root: (0, _reactUtilities.getNativeElementProps)(as !== null && as !== void 0 ? as : 'h2', {
             ref,
             id: (0, _dialogContext.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId),
             ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/DialogTitle/useDialogTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\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 * 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, ref) => {\n  const {\n    as,\n    action\n  } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const internalStyles = useDialogTitleInternalStyles();\n  return {\n    components: {\n      root: 'div',\n      action: 'div'\n    },\n    root: getNativeElementProps(as !== null && as !== void 0 ? 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: /*#__PURE__*/React.createElement(DialogTrigger, {\n          disableButtonEnhancement: true,\n          action: \"close\"\n        }, /*#__PURE__*/React.createElement(\"button\", {\n          type: \"button\",\n          className: internalStyles.button,\n          // TODO: find a better way to add internal labels\n          \"aria-label\": \"close\"\n        }, /*#__PURE__*/React.createElement(Dismiss24Regular, null)))\n      }\n    })\n  };\n};\n//# sourceMappingURL=useDialogTitle.js.map"],"names":["useDialogTitle_unstable","props","ref","as","action","modalType","useDialogContext_unstable","ctx","internalStyles","useDialogTitleInternalStyles","components","root","getNativeElementProps","id","dialogTitleId","resolveShorthand","required","defaultProps","children","React","createElement","DialogTrigger","disableButtonEnhancement","type","className","button","Dismiss24Regular"],"mappings":";;;;+BAgBaA;;aAAAA;;;6DAhBU;gCACe;+BACI;4BACT;+BAEH;sCACe;AAUtC,MAAMA,0BAA0B,CAACC,OAAOC,MAAQ;IACrD,MAAM,EACJC,GAAE,EACFC,OAAM,EACP,GAAGH;IACJ,MAAMI,YAAYC,IAAAA,wCAAyB,EAACC,CAAAA,MAAOA,IAAIF,SAAS;IAChE,MAAMG,iBAAiBC,IAAAA,kDAA4B;IACnD,OAAO;QACLC,YAAY;YACVC,MAAM;YACNP,QAAQ;QACV;QACAO,MAAMC,IAAAA,qCAAqB,EAACT,OAAO,IAAI,IAAIA,OAAO,KAAK,IAAIA,KAAK,KAAK,EAAE;YACrED;YACAW,IAAIP,IAAAA,wCAAyB,EAACC,CAAAA,MAAOA,IAAIO,aAAa;YACtD,GAAGb,KAAK;QACV;QACAG,QAAQW,IAAAA,gCAAgB,EAACX,QAAQ;YAC/BY,UAAUX,cAAc;YACxBY,cAAc;gBACZC,UAAU,WAAW,GAAEC,OAAMC,aAAa,CAACC,4BAAa,EAAE;oBACxDC,0BAA0B,IAAI;oBAC9BlB,QAAQ;gBACV,GAAG,WAAW,GAAEe,OAAMC,aAAa,CAAC,UAAU;oBAC5CG,MAAM;oBACNC,WAAWhB,eAAeiB,MAAM;oBAChC,iDAAiD;oBACjD,cAAc;gBAChB,GAAG,WAAW,GAAEN,OAAMC,aAAa,CAACM,4BAAgB,EAAE,IAAI;YAC5D;QACF;IACF;AACF,GACA,0CAA0C"}
+{"version":3,"sources":["../../../lib/components/DialogTitle/useDialogTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\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 * 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, ref) => {\n  const {\n    as,\n    action\n  } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const internalStyles = useDialogTitleInternalStyles();\n  return {\n    components: {\n      root: 'h2',\n      action: 'div'\n    },\n    root: getNativeElementProps(as !== null && as !== void 0 ? 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: /*#__PURE__*/React.createElement(DialogTrigger, {\n          disableButtonEnhancement: true,\n          action: \"close\"\n        }, /*#__PURE__*/React.createElement(\"button\", {\n          type: \"button\",\n          className: internalStyles.button,\n          // TODO: find a better way to add internal labels\n          \"aria-label\": \"close\"\n        }, /*#__PURE__*/React.createElement(Dismiss24Regular, null)))\n      }\n    })\n  };\n};\n//# sourceMappingURL=useDialogTitle.js.map"],"names":["useDialogTitle_unstable","props","ref","as","action","modalType","useDialogContext_unstable","ctx","internalStyles","useDialogTitleInternalStyles","components","root","getNativeElementProps","id","dialogTitleId","resolveShorthand","required","defaultProps","children","React","createElement","DialogTrigger","disableButtonEnhancement","type","className","button","Dismiss24Regular"],"mappings":";;;;+BAgBaA;;aAAAA;;;6DAhBU;gCACe;+BACI;4BACT;+BAEH;sCACe;AAUtC,MAAMA,0BAA0B,CAACC,OAAOC,MAAQ;IACrD,MAAM,EACJC,GAAE,EACFC,OAAM,EACP,GAAGH;IACJ,MAAMI,YAAYC,IAAAA,wCAAyB,EAACC,CAAAA,MAAOA,IAAIF,SAAS;IAChE,MAAMG,iBAAiBC,IAAAA,kDAA4B;IACnD,OAAO;QACLC,YAAY;YACVC,MAAM;YACNP,QAAQ;QACV;QACAO,MAAMC,IAAAA,qCAAqB,EAACT,OAAO,IAAI,IAAIA,OAAO,KAAK,IAAIA,KAAK,IAAI,EAAE;YACpED;YACAW,IAAIP,IAAAA,wCAAyB,EAACC,CAAAA,MAAOA,IAAIO,aAAa;YACtD,GAAGb,KAAK;QACV;QACAG,QAAQW,IAAAA,gCAAgB,EAACX,QAAQ;YAC/BY,UAAUX,cAAc;YACxBY,cAAc;gBACZC,UAAU,WAAW,GAAEC,OAAMC,aAAa,CAACC,4BAAa,EAAE;oBACxDC,0BAA0B,IAAI;oBAC9BlB,QAAQ;gBACV,GAAG,WAAW,GAAEe,OAAMC,aAAa,CAAC,UAAU;oBAC5CG,MAAM;oBACNC,WAAWhB,eAAeiB,MAAM;oBAChC,iDAAiD;oBACjD,cAAc;gBAChB,GAAG,WAAW,GAAEN,OAAMC,aAAa,CAACM,4BAAgB,EAAE,IAAI;YAC5D;QACF;IACF;AACF,GACA,0CAA0C"}

package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.js

@@ -29,7 +29,17 @@ const dialogTitleClassNames = {
         Ijaq50: "faq1aip",
         Br312pm: "f1m489tg",
         nk6f5a: "fv2srd9",
-        Bw0ie65: "f1tz6hh8"
+        Bw0ie65: "f1tz6hh8",
+        B6of3ja: "f1hu3pq6",
+        t21cq0: [
+            "f11qmguv",
+            "f1tyq0we"
+        ],
+        jrapky: "f19f4twv",
+        Frg6f3: [
+            "f1tyq0we",
+            "f11qmguv"
+        ]
     },
     rootWithoutCloseButton: {
         Ijaq50: "faq1aip",
@@ -53,6 +63,10 @@ const dialogTitleClassNames = {
         ".f1m489tg{grid-column-start:title;}",
         ".fv2srd9{grid-row-end:title;}",
         ".f1tz6hh8{grid-column-end:title;}",
+        ".f1hu3pq6{margin-top:0;}",
+        ".f11qmguv{margin-right:0;}",
+        ".f1tyq0we{margin-left:0;}",
+        ".f19f4twv{margin-bottom:0;}",
         ".f11nczdl{grid-row-end:close-button;}",
         ".f98d4vj{grid-column-end:close-button;}",
         ".f1hysmiz{grid-row-start:close-button;}",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/DialogTitle/useDialogTitleStyles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { TITLE_ACTION_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n  root: 'fui-DialogTitle',\n  action: 'fui-DialogTitle__action'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"f1pp30po\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"f106mvju\",\n    Ijaq50: \"faq1aip\",\n    Br312pm: \"f1m489tg\",\n    nk6f5a: \"fv2srd9\",\n    Bw0ie65: \"f1tz6hh8\"\n  },\n  rootWithoutCloseButton: {\n    Ijaq50: \"faq1aip\",\n    Br312pm: \"f1m489tg\",\n    nk6f5a: \"f11nczdl\",\n    Bw0ie65: \"f98d4vj\"\n  },\n  action: {\n    Ijaq50: \"f1hysmiz\",\n    Br312pm: \"f1379kmu\",\n    nk6f5a: \"f11nczdl\",\n    Bw0ie65: \"f98d4vj\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".f106mvju{line-height:var(--lineHeightBase500);}\", \".faq1aip{grid-row-start:title;}\", \".f1m489tg{grid-column-start:title;}\", \".fv2srd9{grid-row-end:title;}\", \".f1tz6hh8{grid-column-end:title;}\", \".f11nczdl{grid-row-end:close-button;}\", \".f98d4vj{grid-column-end:close-button;}\", \".f1hysmiz{grid-row-start:close-button;}\", \".f1379kmu{grid-column-start:close-button;}\"]\n});\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */\nexport const useDialogTitleInternalStyles = /*#__PURE__*/__styles({\n  button: {\n    qhf8xq: \"f10pi13n\",\n    B7ck84d: \"f1e4lqlz\",\n    De3pzq: \"f1u2r49w\",\n    sj55zd: \"f1ym3bx4\",\n    Bahqtrf: \"f1mo0ibp\",\n    Be2twd7: \"fjoy568\",\n    Bceei9c: \"f1k6fduh\",\n    Bg96gwp: \"fez10in\",\n    B68tc82: \"f1mtd64y\",\n    Bmxbyg5: \"f1y7q3j9\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    icvyot: \"f1ern45e\",\n    vrafjx: [\"f1n71otn\", \"f1deefiw\"],\n    oivjwe: \"f1h8hb77\",\n    wvpqe5: [\"f1deefiw\", \"f1n71otn\"],\n    Bv0vk6g: \"f37px4s\",\n    fsow6f: \"fgusgyc\",\n    Brovlpu: \"ftqa4ok\",\n    B486eqv: \"f2hkw1w\",\n    B8q5s1w: \"f8hki3x\",\n    Bci5o5g: [\"f1d2448m\", \"ffh67wi\"],\n    n8qw10: \"f1bjia2o\",\n    Bdrgwmp: [\"ffh67wi\", \"f1d2448m\"],\n    Bm4h7ae: \"f15bsgw9\",\n    B7ys5i9: \"f14e48fq\",\n    Busjfv9: \"f18yb2kv\",\n    Bhk32uz: \"fd6o370\",\n    Bf4ptjt: \"fh1cnn4\",\n    kclons: [\"fy7oxxb\", \"f184ne2d\"],\n    Bhdgwq3: \"fpukqih\",\n    Blkhhs4: [\"f184ne2d\", \"fy7oxxb\"],\n    Bqtpl0w: \"frrh606\",\n    clg4pj: [\"f1v5zibi\", \"fo2hd23\"],\n    hgwjuy: \"ful5kiu\",\n    Bonggc9: [\"fo2hd23\", \"f1v5zibi\"],\n    B1tsrr9: [\"f1jqcqds\", \"ftffrms\"],\n    Dah5zi: [\"ftffrms\", \"f1jqcqds\"],\n    Bkh64rk: [\"f2e7qr6\", \"fsr1zz6\"],\n    qqdqy8: [\"fsr1zz6\", \"f2e7qr6\"],\n    B6dhp37: \"f1dvezut\",\n    i03rao: [\"fd0oaoj\", \"f1cwg4i8\"],\n    Boxcth7: \"fjvm52t\",\n    Bsom6fd: [\"f1cwg4i8\", \"fd0oaoj\"],\n    J0r882: \"fdiulkx\",\n    Bjwuhne: \"f1yalx80\",\n    Ghsupd: [\"fq22d5a\", \"f1jw7pan\"],\n    Bule8hv: [\"f1jw7pan\", \"fq22d5a\"]\n  }\n}, {\n  d: [\".f10pi13n{position:relative;}\", \".f1e4lqlz{box-sizing:content-box;}\", \".f1u2r49w{background-color:inherit;}\", \".f1ym3bx4{color:inherit;}\", \".f1mo0ibp{font-family:inherit;}\", \".fjoy568{font-size:inherit;}\", \".f1k6fduh{cursor:pointer;}\", \".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;}\"],\n  f: [\".ftqa4ok:focus{outline-style:none;}\"],\n  i: [\".f2hkw1w:focus-visible{outline-style:none;}\"]\n});\n/**\n * Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogTitleClassNames.root, styles.root, !state.action && styles.rootWithoutCloseButton, state.root.className);\n  if (state.action) {\n    state.action.className = mergeClasses(dialogTitleClassNames.action, styles.action, state.action.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDialogTitleStyles.js.map"],"names":["dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable","root","action","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","rootWithoutCloseButton","d","button","qhf8xq","B7ck84d","De3pzq","sj55zd","Bceei9c","B68tc82","Bmxbyg5","z8tnut","z189sj","Byoj8tv","uwmqm3","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","f","i","state","styles","className","mergeClasses"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/DialogTitle/useDialogTitleStyles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { TITLE_ACTION_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n  root: 'fui-DialogTitle',\n  action: 'fui-DialogTitle__action'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"f1pp30po\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"f106mvju\",\n    Ijaq50: \"faq1aip\",\n    Br312pm: \"f1m489tg\",\n    nk6f5a: \"fv2srd9\",\n    Bw0ie65: \"f1tz6hh8\",\n    B6of3ja: \"f1hu3pq6\",\n    t21cq0: [\"f11qmguv\", \"f1tyq0we\"],\n    jrapky: \"f19f4twv\",\n    Frg6f3: [\"f1tyq0we\", \"f11qmguv\"]\n  },\n  rootWithoutCloseButton: {\n    Ijaq50: \"faq1aip\",\n    Br312pm: \"f1m489tg\",\n    nk6f5a: \"f11nczdl\",\n    Bw0ie65: \"f98d4vj\"\n  },\n  action: {\n    Ijaq50: \"f1hysmiz\",\n    Br312pm: \"f1379kmu\",\n    nk6f5a: \"f11nczdl\",\n    Bw0ie65: \"f98d4vj\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".f106mvju{line-height:var(--lineHeightBase500);}\", \".faq1aip{grid-row-start:title;}\", \".f1m489tg{grid-column-start:title;}\", \".fv2srd9{grid-row-end:title;}\", \".f1tz6hh8{grid-column-end:title;}\", \".f1hu3pq6{margin-top:0;}\", \".f11qmguv{margin-right:0;}\", \".f1tyq0we{margin-left:0;}\", \".f19f4twv{margin-bottom:0;}\", \".f11nczdl{grid-row-end:close-button;}\", \".f98d4vj{grid-column-end:close-button;}\", \".f1hysmiz{grid-row-start:close-button;}\", \".f1379kmu{grid-column-start:close-button;}\"]\n});\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */\nexport const useDialogTitleInternalStyles = /*#__PURE__*/__styles({\n  button: {\n    qhf8xq: \"f10pi13n\",\n    B7ck84d: \"f1e4lqlz\",\n    De3pzq: \"f1u2r49w\",\n    sj55zd: \"f1ym3bx4\",\n    Bahqtrf: \"f1mo0ibp\",\n    Be2twd7: \"fjoy568\",\n    Bceei9c: \"f1k6fduh\",\n    Bg96gwp: \"fez10in\",\n    B68tc82: \"f1mtd64y\",\n    Bmxbyg5: \"f1y7q3j9\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    icvyot: \"f1ern45e\",\n    vrafjx: [\"f1n71otn\", \"f1deefiw\"],\n    oivjwe: \"f1h8hb77\",\n    wvpqe5: [\"f1deefiw\", \"f1n71otn\"],\n    Bv0vk6g: \"f37px4s\",\n    fsow6f: \"fgusgyc\",\n    Brovlpu: \"ftqa4ok\",\n    B486eqv: \"f2hkw1w\",\n    B8q5s1w: \"f8hki3x\",\n    Bci5o5g: [\"f1d2448m\", \"ffh67wi\"],\n    n8qw10: \"f1bjia2o\",\n    Bdrgwmp: [\"ffh67wi\", \"f1d2448m\"],\n    Bm4h7ae: \"f15bsgw9\",\n    B7ys5i9: \"f14e48fq\",\n    Busjfv9: \"f18yb2kv\",\n    Bhk32uz: \"fd6o370\",\n    Bf4ptjt: \"fh1cnn4\",\n    kclons: [\"fy7oxxb\", \"f184ne2d\"],\n    Bhdgwq3: \"fpukqih\",\n    Blkhhs4: [\"f184ne2d\", \"fy7oxxb\"],\n    Bqtpl0w: \"frrh606\",\n    clg4pj: [\"f1v5zibi\", \"fo2hd23\"],\n    hgwjuy: \"ful5kiu\",\n    Bonggc9: [\"fo2hd23\", \"f1v5zibi\"],\n    B1tsrr9: [\"f1jqcqds\", \"ftffrms\"],\n    Dah5zi: [\"ftffrms\", \"f1jqcqds\"],\n    Bkh64rk: [\"f2e7qr6\", \"fsr1zz6\"],\n    qqdqy8: [\"fsr1zz6\", \"f2e7qr6\"],\n    B6dhp37: \"f1dvezut\",\n    i03rao: [\"fd0oaoj\", \"f1cwg4i8\"],\n    Boxcth7: \"fjvm52t\",\n    Bsom6fd: [\"f1cwg4i8\", \"fd0oaoj\"],\n    J0r882: \"fdiulkx\",\n    Bjwuhne: \"f1yalx80\",\n    Ghsupd: [\"fq22d5a\", \"f1jw7pan\"],\n    Bule8hv: [\"f1jw7pan\", \"fq22d5a\"]\n  }\n}, {\n  d: [\".f10pi13n{position:relative;}\", \".f1e4lqlz{box-sizing:content-box;}\", \".f1u2r49w{background-color:inherit;}\", \".f1ym3bx4{color:inherit;}\", \".f1mo0ibp{font-family:inherit;}\", \".fjoy568{font-size:inherit;}\", \".f1k6fduh{cursor:pointer;}\", \".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;}\"],\n  f: [\".ftqa4ok:focus{outline-style:none;}\"],\n  i: [\".f2hkw1w:focus-visible{outline-style:none;}\"]\n});\n/**\n * Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogTitleClassNames.root, styles.root, !state.action && styles.rootWithoutCloseButton, state.root.className);\n  if (state.action) {\n    state.action.className = mergeClasses(dialogTitleClassNames.action, styles.action, state.action.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDialogTitleStyles.js.map"],"names":["dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable","root","action","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","B6of3ja","t21cq0","jrapky","Frg6f3","rootWithoutCloseButton","d","button","qhf8xq","B7ck84d","De3pzq","sj55zd","Bceei9c","B68tc82","Bmxbyg5","z8tnut","z189sj","Byoj8tv","uwmqm3","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","f","i","state","styles","className","mergeClasses"],"mappings":"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"}

package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "useDialogTrigger_unstable", {
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactTabster = require("@fluentui/react-tabster");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _contexts = require("../../contexts");
 const _reactAria = require("@fluentui/react-aria");
@@ -17,7 +16,7 @@ const useDialogTrigger_unstable = (props)=>{
     const { children , disableButtonEnhancement =false , action =isInsideSurfaceDialog ? 'close' : 'open'  } = props;
     const child = (0, _reactUtilities.getTriggerChild)(children);
     const requestOpenChange = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.requestOpenChange);
-    const { triggerAttributes  } = (0, _reactTabster.useModalAttributes)();
+    const triggerAttributes = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.triggerAttributes);
     const handleClick = (0, _reactUtilities.useEventCallback)((event)=>{
         var _child_props, _child_props_onClick;
         (_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/DialogTrigger/useDialogTrigger.js"],"sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\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 => {\n  const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n  const {\n    children,\n    disableButtonEnhancement = false,\n    action = isInsideSurfaceDialog ? 'close' : 'open'\n  } = props;\n  const child = getTriggerChild(children);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const {\n    triggerAttributes\n  } = useModalAttributes();\n  const handleClick = useEventCallback(event => {\n    var _child_props, _child_props_onClick;\n    (_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);\n    if (!event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        type: 'triggerClick',\n        open: action === 'open'\n      });\n    }\n  });\n  const triggerChildProps = {\n    ...(child === null || child === void 0 ? void 0 : child.props),\n    ref: child === null || child === void 0 ? void 0 : child.ref,\n    onClick: handleClick,\n    ...triggerAttributes\n  };\n  const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {\n    ...triggerChildProps,\n    type: 'button'\n  });\n  return {\n    children: applyTriggerPropsToChildren(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)\n  };\n};\n//# sourceMappingURL=useDialogTrigger.js.map"],"names":["useDialogTrigger_unstable","props","isInsideSurfaceDialog","useDialogSurfaceContext_unstable","children","disableButtonEnhancement","action","child","getTriggerChild","requestOpenChange","useDialogContext_unstable","ctx","triggerAttributes","useModalAttributes","handleClick","useEventCallback","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps","useARIAButtonProps","applyTriggerPropsToChildren"],"mappings":";;;;+BAWaA;;aAAAA;;;6DAXU;8BACY;gCAC4C;0BACH;2BACzC;AAO5B,MAAMA,4BAA4BC,CAAAA,QAAS;IAChD,MAAMC,wBAAwBC,IAAAA,0CAAgC;IAC9D,MAAM,EACJC,SAAQ,EACRC,0BAA2B,KAAK,CAAA,EAChCC,QAASJ,wBAAwB,UAAU,MAAM,CAAA,EAClD,GAAGD;IACJ,MAAMM,QAAQC,IAAAA,+BAAe,EAACJ;IAC9B,MAAMK,oBAAoBC,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIF,iBAAiB;IAChF,MAAM,EACJG,kBAAiB,EAClB,GAAGC,IAAAA,gCAAkB;IACtB,MAAMC,cAAcC,IAAAA,gCAAgB,EAACC,CAAAA,QAAS;QAC5C,IAAIC,cAAcC;QACjBA,CAAAA,uBAAuB,AAACD,CAAAA,eAAeV,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK,AAAD,EAAGkB,OAAO,AAAD,MAAO,IAAI,IAAID,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBE,IAAI,CAACH,cAAcD,MAAM;QACjN,IAAI,CAACA,MAAMK,kBAAkB,IAAI;YAC/BZ,kBAAkB;gBAChBO;gBACAM,MAAM;gBACNC,MAAMjB,WAAW;YACnB;QACF,CAAC;IACH;IACA,MAAMkB,oBAAoB;QACxB,GAAIjB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK;QAC7DwB,KAAKlB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMkB,GAAG;QAC5DN,SAASL;QACT,GAAGF,iBAAiB;IACtB;IACA,MAAMc,8BAA8BC,IAAAA,6BAAkB,EAAC,AAACpB,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMe,IAAI,AAAD,MAAO,YAAY,AAACf,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMe,IAAI,AAAD,MAAO,MAAMf,MAAMe,IAAI,GAAG,KAAK,EAAE;QACzN,GAAGE,iBAAiB;QACpBF,MAAM;IACR;IACA,OAAO;QACLlB,UAAUwB,IAAAA,2CAA2B,EAACxB,UAAUC,2BAA2BmB,oBAAoBE,2BAA2B;IAC5H;AACF,GACA,4CAA4C"}
+{"version":3,"sources":["../../../lib/components/DialogTrigger/useDialogTrigger.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\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 => {\n  const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n  const {\n    children,\n    disableButtonEnhancement = false,\n    action = isInsideSurfaceDialog ? 'close' : 'open'\n  } = props;\n  const child = getTriggerChild(children);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes);\n  const handleClick = useEventCallback(event => {\n    var _child_props, _child_props_onClick;\n    (_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);\n    if (!event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        type: 'triggerClick',\n        open: action === 'open'\n      });\n    }\n  });\n  const triggerChildProps = {\n    ...(child === null || child === void 0 ? void 0 : child.props),\n    ref: child === null || child === void 0 ? void 0 : child.ref,\n    onClick: handleClick,\n    ...triggerAttributes\n  };\n  const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {\n    ...triggerChildProps,\n    type: 'button'\n  });\n  return {\n    children: applyTriggerPropsToChildren(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)\n  };\n};\n//# sourceMappingURL=useDialogTrigger.js.map"],"names":["useDialogTrigger_unstable","props","isInsideSurfaceDialog","useDialogSurfaceContext_unstable","children","disableButtonEnhancement","action","child","getTriggerChild","requestOpenChange","useDialogContext_unstable","ctx","triggerAttributes","handleClick","useEventCallback","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps","useARIAButtonProps","applyTriggerPropsToChildren"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;gCACwD;0BACH;2BACzC;AAO5B,MAAMA,4BAA4BC,CAAAA,QAAS;IAChD,MAAMC,wBAAwBC,IAAAA,0CAAgC;IAC9D,MAAM,EACJC,SAAQ,EACRC,0BAA2B,KAAK,CAAA,EAChCC,QAASJ,wBAAwB,UAAU,MAAM,CAAA,EAClD,GAAGD;IACJ,MAAMM,QAAQC,IAAAA,+BAAe,EAACJ;IAC9B,MAAMK,oBAAoBC,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIF,iBAAiB;IAChF,MAAMG,oBAAoBF,IAAAA,mCAAyB,EAACC,CAAAA,MAAOA,IAAIC,iBAAiB;IAChF,MAAMC,cAAcC,IAAAA,gCAAgB,EAACC,CAAAA,QAAS;QAC5C,IAAIC,cAAcC;QACjBA,CAAAA,uBAAuB,AAACD,CAAAA,eAAeT,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK,AAAD,EAAGiB,OAAO,AAAD,MAAO,IAAI,IAAID,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBE,IAAI,CAACH,cAAcD,MAAM;QACjN,IAAI,CAACA,MAAMK,kBAAkB,IAAI;YAC/BX,kBAAkB;gBAChBM;gBACAM,MAAM;gBACNC,MAAMhB,WAAW;YACnB;QACF,CAAC;IACH;IACA,MAAMiB,oBAAoB;QACxB,GAAIhB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMN,KAAK;QAC7DuB,KAAKjB,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMiB,GAAG;QAC5DN,SAASL;QACT,GAAGD,iBAAiB;IACtB;IACA,MAAMa,8BAA8BC,IAAAA,6BAAkB,EAAC,AAACnB,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMc,IAAI,AAAD,MAAO,YAAY,AAACd,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMc,IAAI,AAAD,MAAO,MAAMd,MAAMc,IAAI,GAAG,KAAK,EAAE;QACzN,GAAGE,iBAAiB;QACpBF,MAAM;IACR;IACA,OAAO;QACLjB,UAAUuB,IAAAA,2CAA2B,EAACvB,UAAUC,2BAA2BkB,oBAAoBE,2BAA2B;IAC5H;AACF,GACA,4CAA4C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.5.2",
+  "version": "9.5.3",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@griffel/react": "^1.5.2",
     "@fluentui/react-utilities": "^9.8.0",
-    "@fluentui/react-jsx-runtime": "^9.0.0-alpha.1",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.2",
     "@fluentui/keyboard-keys": "^9.0.2",
     "@fluentui/react-context-selector": "^9.1.18",
     "@fluentui/react-shared-contexts": "^9.3.3",