npm - @fluentui/react-dialog - Versions diffs - 9.7.1 → 9.7.4 - Mend

@fluentui/react-dialog 9.7.1 → 9.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,196 @@
   "name": "@fluentui/react-dialog",
   "entries": [
     {
-      "date": "Wed, 20 Sep 2023 17:40:43 GMT",
+      "date": "Mon, 02 Oct 2023 08:53:05 GMT",
+      "tag": "@fluentui/react-dialog_v9.7.4",
+      "version": "9.7.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.9.2",
+            "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.13.2",
+            "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.3.19",
+            "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 26 Sep 2023 17:49:05 GMT",
+      "tag": "@fluentui/react-dialog_v9.7.3",
+      "version": "9.7.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
+            "comment": "chore: trigger manual version bump after broken release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-utilities to v9.13.5",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.12",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.6",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.36",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.9.1",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-aria to v9.3.38",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.13.1",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-theme to v9.1.14",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.3.18",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 26 Sep 2023 15:32:01 GMT",
+      "tag": "@fluentui/react-dialog_v9.7.2",
+      "version": "9.7.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "031ecaf9c383f81965aa5d057cd779f222a6d10a",
+            "comment": "fix: use makeResetStyles for base dialog components styles"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
+            "comment": "fix: bump swc core to mitigate transpilation memory leaks"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "a31e7394d9f169bc5aa55430a22cdc65425a1b49",
+            "comment": "chore: Update react-icons version to pick up IconDirectionContextProvider updated export"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "530a6a6a4513d0a28b6c0f7a447b3ebc8eeac750",
+            "comment": "chore: adds CSS containment to DialogSurface"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "6e1421bed0b194d31235fb8f83e09c61fa40a13a",
+            "comment": "doc: updates documentation on alert dialog escape dismiss"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-utilities to v9.13.4",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.11",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.5",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.35",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.9.0",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-aria to v9.3.37",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.13.0",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-theme to v9.1.13",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.3.17",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 20 Sep 2023 17:47:36 GMT",
       "tag": "@fluentui/react-dialog_v9.7.1",
       "version": "9.7.1",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,63 @@
 # Change Log - @fluentui/react-dialog
-This log was last generated on Wed, 20 Sep 2023 17:40:43 GMT and should not be manually modified.
+This log was last generated on Mon, 02 Oct 2023 08:53:05 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.4)
+Mon, 02 Oct 2023 08:53:05 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.3..@fluentui/react-dialog_v9.7.4)
+### Patches
+- Bump @fluentui/react-shared-contexts to v9.9.2 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
+- Bump @fluentui/react-tabster to v9.13.2 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
+- Bump @fluentui/react-portal to v9.3.19 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
+## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.3)
+Tue, 26 Sep 2023 17:49:05 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.2..@fluentui/react-dialog_v9.7.3)
+### Patches
+- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
+- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.12 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/keyboard-keys to v9.0.6 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.36 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.9.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-aria to v9.3.38 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-tabster to v9.13.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-portal to v9.3.18 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.2)
+Tue, 26 Sep 2023 15:32:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.1..@fluentui/react-dialog_v9.7.2)
+### Patches
+- fix: use makeResetStyles for base dialog components styles ([PR #29280](https://github.com/microsoft/fluentui/pull/29280) by marcosvmmoura@gmail.com)
+- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
+- chore: Update react-icons version to pick up IconDirectionContextProvider updated export ([PR #29151](https://github.com/microsoft/fluentui/pull/29151) by ololubek@microsoft.com)
+- chore: adds CSS containment to DialogSurface ([PR #29213](https://github.com/microsoft/fluentui/pull/29213) by bernardo.sunderhus@gmail.com)
+- doc: updates documentation on alert dialog escape dismiss ([PR #29211](https://github.com/microsoft/fluentui/pull/29211) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.11 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/keyboard-keys to v9.0.5 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.35 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.9.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-aria to v9.3.37 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-tabster to v9.13.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-portal to v9.3.17 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
 ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.1)
-Wed, 20 Sep 2023 17:40:43 GMT
+Wed, 20 Sep 2023 17:47:36 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.0..@fluentui/react-dialog_v9.7.1)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -168,7 +168,7 @@ export declare type DialogProps = ComponentProps<Partial<DialogSlots>> & {
      * `alert`: is a special type of modal dialogs that interrupts the user's workflow
      * to communicate an important message or ask for a decision.
      * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,
-     * and it cannot be dismissed through the dimmed background or escape key.
+     * and it cannot be dismissed through the dimmed background.
      *
      * @default modal
      */

package/lib/components/Dialog/Dialog.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Dialog.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types';\n\nexport type DialogSlots = {};\n\nexport type DialogOpenChangeEvent = DialogOpenChangeData['event'];\n\nexport type DialogOpenChangeData =\n \| {\n type: 'escapeKeyDown';\n open: boolean;\n event: React.KeyboardEvent<DialogSurfaceElement>;\n }\n \| {\n type: 'backdropClick';\n open: boolean;\n event: React.MouseEvent<DialogSurfaceElement>;\n }\n \| {\n type: 'triggerClick';\n open: boolean;\n event: React.MouseEvent<DialogSurfaceElement>;\n };\n\nexport type DialogModalType = 'modal' \| 'non-modal' \| 'alert';\n\n/*\n Callback fired when the component changes value from open state.\n \n @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event\n /\nexport type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;\n\nexport type DialogContextValues = {\n dialog: DialogContextValue;\n /\n dialogSurface context is provided by Dialog as false\n * to ensure components inside Dialog but outside DialogSurface will consume this as false\n /\n dialogSurface: DialogSurfaceContextValue;\n};\n\nexport type DialogProps = ComponentProps<Partial<DialogSlots>> & {\n /\n Dialog variations.\n \n `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\n * The tab sequence is kept within the dialog and moving the focus outside\n * the dialog will imply closing it. This is the default type of the component.\n \n `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\n * and users can interact with the rest of the page.\n * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n \n `alert`: is a special type of modal dialogs that interrupts the user's workflow\n * to communicate an important message or ask for a decision.\n * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\n * and it cannot be dismissed through the dimmed background ~~or escape key~~.\n \n @default modal\n /\n modalType?: DialogModalType;\n /\n Controls the open state of the dialog\n * @default false\n /\n open?: boolean;\n /\n Default value for the uncontrolled open state of the dialog.\n * @default false\n /\n defaultOpen?: boolean;\n /\n Callback fired when the component changes value from open state.\n \n @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event\n /\n onOpenChange?: DialogOpenChangeEventHandler;\n /\n Can contain two children including {@link DialogTrigger} and {@link DialogSurface}.\n * Alternatively can only contain {@link DialogSurface} if using trigger outside dialog, or controlling state.\n /\n children: [JSX.Element, JSX.Element] \| JSX.Element;\n /\n Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n * where the focus trap involves setting outside elements inert.\n \n @default false\n */\n inertTrapFocus?: boolean;\n};\n\nexport type DialogState = ComponentState<DialogSlots> &\n DialogContextValue & {\n content: React.ReactNode;\n trigger: React.ReactNode;\n };\n"],"names":[],"mappings":"AAAA,WAsGI"}
1	+ {"version":3,"sources":["Dialog.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types';\n\nexport type DialogSlots = {};\n\nexport type DialogOpenChangeEvent = DialogOpenChangeData['event'];\n\nexport type DialogOpenChangeData =\n \| {\n type: 'escapeKeyDown';\n open: boolean;\n event: React.KeyboardEvent<DialogSurfaceElement>;\n }\n \| {\n type: 'backdropClick';\n open: boolean;\n event: React.MouseEvent<DialogSurfaceElement>;\n }\n \| {\n type: 'triggerClick';\n open: boolean;\n event: React.MouseEvent<DialogSurfaceElement>;\n };\n\nexport type DialogModalType = 'modal' \| 'non-modal' \| 'alert';\n\n/*\n Callback fired when the component changes value from open state.\n \n @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event\n /\nexport type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;\n\nexport type DialogContextValues = {\n dialog: DialogContextValue;\n /\n dialogSurface context is provided by Dialog as false\n * to ensure components inside Dialog but outside DialogSurface will consume this as false\n /\n dialogSurface: DialogSurfaceContextValue;\n};\n\nexport type DialogProps = ComponentProps<Partial<DialogSlots>> & {\n /\n Dialog variations.\n \n `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\n * The tab sequence is kept within the dialog and moving the focus outside\n * the dialog will imply closing it. This is the default type of the component.\n \n `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\n * and users can interact with the rest of the page.\n * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n \n `alert`: is a special type of modal dialogs that interrupts the user's workflow\n * to communicate an important message or ask for a decision.\n * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\n * and it cannot be dismissed through the dimmed background.\n \n @default modal\n /\n modalType?: DialogModalType;\n /\n Controls the open state of the dialog\n * @default false\n /\n open?: boolean;\n /\n Default value for the uncontrolled open state of the dialog.\n * @default false\n /\n defaultOpen?: boolean;\n /\n Callback fired when the component changes value from open state.\n \n @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event\n /\n onOpenChange?: DialogOpenChangeEventHandler;\n /\n Can contain two children including {@link DialogTrigger} and {@link DialogSurface}.\n * Alternatively can only contain {@link DialogSurface} if using trigger outside dialog, or controlling state.\n /\n children: [JSX.Element, JSX.Element] \| JSX.Element;\n /\n Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n * where the focus trap involves setting outside elements inert.\n \n @default false\n */\n inertTrapFocus?: boolean;\n};\n\nexport type DialogState = ComponentState<DialogSlots> &\n DialogContextValue & {\n content: React.ReactNode;\n trigger: React.ReactNode;\n };\n"],"names":[],"mappings":"AAAA,WAsGI"}

package/lib/components/Dialog/useDialog.js CHANGED Viewed

@@ -20,8 +20,7 @@ import { useModalAttributes } from '@fluentui/react-tabster';
         initialState: false
     });
     const requestOpenChange = useEventCallback((data)=>{
-        var _onOpenChange;
-        (_onOpenChange = onOpenChange) === null || _onOpenChange === void 0 ? void 0 : _onOpenChange(data.event, data);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);
         // if user prevents default then do not change state value
         // otherwise updates state value and trigger reference to the element that caused the opening
         if (!data.event.isDefaultPrevented()) {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["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(/ #__DE-INDENT__ */ `\n @fluentui/react-dialog [useDialog]:\n Dialog must contain at least one child <DialogSurface/>,\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"],"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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AACrH,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,cAAc;AACzE,SAASC,aAAa,QAAQ,iBAAiB;AAG/C,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAEhF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IAEvD,MAAM,CAACO,MAAMC,QAAQ,GAAGnB,qBAAqB;QAC3CoB,OAAOV,MAAMQ,IAAI;QACjBG,cAAcX,MAAMY,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,oBAAoBvB,iBAAiB,CAACwB;~~YAC1CZ;SAAAA~~,~~gBAAAA~~,~~0BAAAA~~,~~oCAAAA~~,~~cAAeY,~~KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,WAAWtB,qBAAqBY,MAAMN;IAC5C,MAAMiB,oBAAoBxB;IAC1B,MAAMyB,qBAAqBC,QAAQb,QAAQN,cAAc;IAEzDT,0BAA0B;QACxB,IAAI2B,oBAAoB;YACtB,OAAOD;QACT;IACF,GAAG;QAACA;QAAmBC;KAAmB;IAE1C,MAAM,EAAEE,eAAe,EAAEC,iBAAiB,EAAE,GAAGzB,mBAAmB;QAChE0B,WAAWtB,cAAc;QACzBuB,iBAAiB,CAACrB;IACpB;IAEA,OAAO;QACLsB,YAAY;YACVC,UAAU;QACZ;QACAvB;QACAI;QACAN;QACAI,SAASE,OAAOF,UAAU;QAC1BD;QACAS;QACAc,eAAepC,MAAM;QACrBqC,gBAAgBnC,oBAAoBG;QACpCiC,WAAWZ;QACXI,iBAAiBpB,cAAc,cAAcoB,kBAAkBS;QAC/DR;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAAShB,4BACPN,QAAyB;IAEzB,MAAM+B,gBAAgB3C,MAAM4C,QAAQ,CAACC,OAAO,CAACjC;IAC7C,IAAIkC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAWC,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACD;gBAAWA;aAAU;IACjC;AACF"}
1	+ {"version":3,"sources":["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(/ #__DE-INDENT__ */ `\n @fluentui/react-dialog [useDialog]:\n Dialog must contain at least one child <DialogSurface/>,\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"],"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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AACrH,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,cAAc;AACzE,SAASC,aAAa,QAAQ,iBAAiB;AAG/C,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAEhF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IAEvD,MAAM,CAACO,MAAMC,QAAQ,GAAGnB,qBAAqB;QAC3CoB,OAAOV,MAAMQ,IAAI;QACjBG,cAAcX,MAAMY,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,oBAAoBvB,iBAAiB,CAACwB;QAC1CZ,yBAAAA,mCAAAA,aAAeY,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,WAAWtB,qBAAqBY,MAAMN;IAC5C,MAAMiB,oBAAoBxB;IAC1B,MAAMyB,qBAAqBC,QAAQb,QAAQN,cAAc;IAEzDT,0BAA0B;QACxB,IAAI2B,oBAAoB;YACtB,OAAOD;QACT;IACF,GAAG;QAACA;QAAmBC;KAAmB;IAE1C,MAAM,EAAEE,eAAe,EAAEC,iBAAiB,EAAE,GAAGzB,mBAAmB;QAChE0B,WAAWtB,cAAc;QACzBuB,iBAAiB,CAACrB;IACpB;IAEA,OAAO;QACLsB,YAAY;YACVC,UAAU;QACZ;QACAvB;QACAI;QACAN;QACAI,SAASE,OAAOF,UAAU;QAC1BD;QACAS;QACAc,eAAepC,MAAM;QACrBqC,gBAAgBnC,oBAAoBG;QACpCiC,WAAWZ;QACXI,iBAAiBpB,cAAc,cAAcoB,kBAAkBS;QAC/DR;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAAShB,4BACPN,QAAyB;IAEzB,MAAM+B,gBAAgB3C,MAAM4C,QAAQ,CAACC,OAAO,CAACjC;IAC7C,IAAIkC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAWC,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACD;gBAAWA;aAAU;IACjC;AACF"}

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

@@ -1,20 +1,16 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
 export const dialogActionsClassNames = {
   root: 'fui-DialogActions'
 };
+/**
+ * Styles for the root slot
+ */
+const useResetStyles = /*#__PURE__*/__resetStyles("r78gbj", null, {
+  r: [".r78gbj{column-gap:8px;row-gap:8px;height:fit-content;box-sizing:border-box;display:flex;grid-row-start:3;grid-row-end:3;}"],
+  s: ["@media screen and (max-width: 480px){.r78gbj{flex-direction:column;justify-self:stretch;}}"]
+});
 const useStyles = /*#__PURE__*/__styles({
-  root: {
-    Bqenvij: "f3052tw",
-    B7ck84d: "f1ewtqcl",
-    mc9l5x: "f22iagw",
-    Ijaq50: "f1cztu7b",
-    nk6f5a: "fcu02xx",
-    i8kkvl: "f4px1ci",
-    Belr9w4: "fn67r4l",
-    Bmdcpmo: "f6glcwc",
-    th9wkt: "f1e3st1r"
-  },
   gridPositionEnd: {
     Bdqf98w: "f1a7i8kp",
     Br312pm: "fd46tj4",
@@ -38,12 +34,8 @@ const useStyles = /*#__PURE__*/__styles({
     Br312pm: "fwpfdsa"
   }
 }, {
-  d: [".f3052tw{height:fit-content;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1cztu7b{grid-row-start:3;}", ".fcu02xx{grid-row-end:3;}", ".f4px1ci{column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1a7i8kp{justify-self:end;}", ".fd46tj4{grid-column-start:2;}", ".fsyjsko{grid-column-end:4;}", ".fsxvdwy{justify-self:start;}", ".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}"],
-  m: [["@media screen and (max-width: 480px){.f6glcwc{flex-direction:column;}}", {
-    m: "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f1e3st1r{justify-self:stretch;}}", {
-    m: "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f1f41i0t{grid-column-start:1;}}", {
+  d: [".f1a7i8kp{justify-self:end;}", ".fd46tj4{grid-column-start:2;}", ".fsyjsko{grid-column-end:4;}", ".fsxvdwy{justify-self:start;}", ".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}"],
+  m: [["@media screen and (max-width: 480px){.f1f41i0t{grid-column-start:1;}}", {
     m: "screen and (max-width: 480px)"
   }], ["@media screen and (max-width: 480px){.f1jaqex3{grid-row-start:4;}}", {
     m: "screen and (max-width: 480px)"
@@ -59,8 +51,9 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the DialogActions slots based on the state
  */
 export const useDialogActionsStyles_unstable = state => {
+  const resetStyles = useResetStyles();
   const styles = useStyles();
-  state.root.className = mergeClasses(dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
+  state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDialogActionsStyles.styles.js.map

package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","~~useStyles~~","~~Bqenvij~~","~~B7ck84d~~","~~mc9l5x~~","~~Ijaq50","nk6f5a","i8kkvl","Belr9w4","Bmdcpmo","th9wkt","~~gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","styles","className","position","fluid"],"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\~~nconst~~ ~~useStyles~~ = ~~makeStyles~~({\n ~~root: {\~~n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n ~~...shorthands.gap(DIALOG_GAP),\n~~ [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n },\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/*\n Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(dialogActionsClassNames.root, ~~styles.root~~, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,~~EAAqBC~~,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;~~AACrE~~,SAASC,UAAU,EAAEC,+BAA+B,QAAQ,0BAA0B;AACtF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,~~SAAS~~,~~gBAAGP~~,~~QAAA~~;~~EAAAM~~,~~IAAA~~;~~IAAAE~~,~~OAAA~~;~~IAAAC~~,~~OAAA;IAAAC~~,~~MAAA~~;~~IAAAC~~,~~MAAA;IAAAC~~,~~MAAA;IAAAC~~,~~MAAA;IAAAC~~,~~OAAA~~;~~IAAAC~~,~~OAAA;IAAAC,MAAA;EAAA;EAAAC,~~eAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAK,OAAA;IAAAH,OAAA;IAAAC,MAAA;EAAA;EAAAG,UAAA;IAAAN,OAAA;EAAA;EAAAO,QAAA;IAAAR,OAAA;EAAA;AAAA;EAAAS,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;~~IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;~~AAAA,~~CAuCjB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,MAAM,~~GAAGzB~~,SAAS,CAAC,CAAC;~~EAC1BwB~~,KAAK,~~CAACzB~~,IAAI,~~CAAC2B~~,SAAS,~~GAAGhC~~,YAAY,CAACI,uBAAuB,CAACC,IAAI,~~EAAE0B~~,~~MAAM~~,~~CAAC1B~~,~~IAAI,EAAEyB,~~KAAK,~~CAACG~~,QAAQ,KAAK,OAAO,IAAIF,MAAM,~~CAACR~~,iBAAiB,EAAEO,KAAK,~~CAACG~~,QAAQ,KAAK,KAAK,IAAIF,MAAM,~~CAACf~~,eAAe,EAAEc,KAAK,~~CAACI~~,KAAK,~~IAAIJ~~,KAAK,~~CAACG~~,QAAQ,KAAK,OAAO,IAAIF,MAAM,~~CAACN~~,UAAU,EAAEK,KAAK,~~CAACI~~,KAAK,~~IAAIJ~~,KAAK,~~CAACG~~,QAAQ,KAAK,KAAK,IAAIF,MAAM,~~CAACL~~,QAAQ,EAAEI,KAAK,~~CAACzB~~,IAAI,~~CAAC2B~~,SAAS,CAAC;EAC5U,~~OAAOF~~,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n ...shorthands.gap(DIALOG_GAP),\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n});\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/\n Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,UAAU,EAAEC,+BAA+B,QAAQ,0BAA0B;AACtF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGR,aAAA;EAAAS,CAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,gBAAGV,QAAA;EAAAW,eAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAK,OAAA;IAAAH,OAAA;IAAAC,MAAA;EAAA;EAAAG,UAAA;IAAAN,OAAA;EAAA;EAAAO,QAAA;IAAAR,OAAA;EAAA;AAAA;EAAAS,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1Be,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAG3B,YAAY,CAACI,uBAAuB,CAACC,IAAI,EAAEoB,WAAW,EAAED,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACT,iBAAiB,EAAEO,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAAChB,eAAe,EAAEc,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,UAAU,EAAEK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACN,QAAQ,EAAEI,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;EAC5U,OAAOH,KAAK;AAChB,CAAC"}

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

@@ -1,40 +1,22 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
 import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';
+import { backdropStyles } from '../DialogSurface/useDialogSurfaceStyles.styles';
 export const dialogBodyClassNames = {
   root: 'fui-DialogBody'
 };
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
-  root: {
-    mc9l5x: "f13qh94s",
-    fshzfu: "f120kxnn",
-    Bxyxcbc: "flnwrvu",
-    B7ck84d: "f1ewtqcl",
-    B68tc82: "f1ln0qer",
-    Bmxbyg5: "fa2wlxz",
-    i8kkvl: "f4px1ci",
-    Belr9w4: "fn67r4l",
-    wkccdc: "f1x46k84",
-    Budl1dq: "fjj47a5",
-    B5xtmjs: "ff54dml",
-    Bqu9lor: "f1t97isy"
-  }
-}, {
-  d: [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".flnwrvu{max-height:calc(100vh - 2 * 24px);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f4px1ci{column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1x46k84{grid-template-rows:auto 1fr;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}"],
-  m: [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
-    m: "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f1t97isy{grid-template-rows:auto 1fr auto;}}", {
-    m: "screen and (max-width: 480px)"
-  }]]
+const useResetStyles = /*#__PURE__*/__resetStyles("r1evyu59", null, {
+  r: [".r1evyu59{overflow-x:unset;overflow-y:unset;column-gap:8px;row-gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}", ".r1evyu59::backdrop{background-color:rgba(0, 0, 0, 0.4);}"],
+  s: ["@media screen and (max-width: 480px){.r1evyu59{max-width:100vw;grid-template-rows:auto 1fr auto;}}"]
 });
 /**
  * Apply styling to the DialogBody slots based on the state
  */
 export const useDialogBodyStyles_unstable = state => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);
+  const resetStyles = useResetStyles();
+  state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDialogBodyStyles.styles.js.map

package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~__styles~~","mergeClasses","shorthands","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","~~dialogBodyClassNames~~","~~root~~","~~useStyles~~","~~mc9l5x~~","~~fshzfu~~","~~Bxyxcbc~~","~~B7ck84d","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","wkccdc","Budl1dq","B5xtmjs","Bqu9lor","d","m","~~useDialogBodyStyles_unstable","state","~~styles~~","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { ~~makeStyles~~, mergeClasses, shorthands } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/*\n Styles for the root slot\n / const ~~useStyles~~ = ~~makeStyles~~({\n ~~root: {\n display:~~ '~~grid~~',\n ~~'&::backdrop': {\~~n ~~backgroundColor~~: '~~rgba(0, 0, 0, 0.4)~~'~~\n }~~,\n maxHeight: `calc(100vh - 2 ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n ~~...shorthands.overflow('unset'),\n ...shorthands.gap(DIALOG_GAP),\n~~ gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n ~~}\n~~ }\n});\n/*\n Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n const ~~styles~~ = ~~useStyles~~();\n state.root.className = mergeClasses(dialogBodyClassNames.root, ~~styles.root~~, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,~~QAAA~~,~~EAAqBC~~,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;~~AACrE~~,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,eAAe,QAAQ,gBAAgB;AAC7F,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,~~SAAS~~,~~gBAAGR~~,~~QAAA~~;~~EAAAO~~,~~IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,~~CAAA;EAAAC,CAAA;~~IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;~~AAAA,~~CAiBrB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,~~MAAM~~,~~GAAGjB~~,~~SAAS~~,CAAC,CAAC;~~EAC1BgB~~,KAAK,~~CAACjB~~,IAAI,~~CAACmB~~,SAAS,~~GAAGzB~~,YAAY,~~CAACK~~,oBAAoB,CAACC,IAAI,~~EAAEkB~~,~~MAAM~~,~~CAAClB~~,~~IAAI,EAAEiB,~~KAAK,~~CAACjB~~,IAAI,~~CAACmB~~,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","shorthands","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","backdropStyles","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';\nimport { backdropStyles } from '../DialogSurface/useDialogSurfaceStyles.styles';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n ...shorthands.overflow('unset'),\n ...shorthands.gap(DIALOG_GAP),\n display: 'grid',\n maxHeight: `calc(100vh - 2 ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n '&::backdrop': backdropStyles,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n }\n});\n/*\n Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,eAAe,QAAQ,gBAAgB;AAC7F,SAASC,cAAc,QAAQ,gDAAgD;AAC/E,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGT,aAAA;EAAAU,CAAA;EAAAC,CAAA;AAAA,CAa1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;EACpCI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGd,YAAY,CAACM,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC"}

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

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const dialogContentClassNames = {
   root: 'fui-DialogContent'
@@ -6,37 +6,13 @@ export const dialogContentClassNames = {
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
-  root: {
-    Bmxbyg5: "f5zp4f",
-    sshi5w: "f1nxs5xn",
-    B7ck84d: "f1ewtqcl",
-    Ijaq50: "faunodf",
-    nk6f5a: "f88nxoq",
-    Br312pm: "fwpfdsa",
-    Bw0ie65: "fsyjsko",
-    z8tnut: "fr4fn7s",
-    z189sj: ["f171n1a0", "f1jwbs5a"],
-    Byoj8tv: "f1ean75l",
-    uwmqm3: ["f1jwbs5a", "f171n1a0"],
-    B6of3ja: "fxlnl9e",
-    t21cq0: ["ffs23cn", "f1v5tmjd"],
-    jrapky: "f2uu7rc",
-    Frg6f3: ["f1v5tmjd", "ffs23cn"],
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fkhj508",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "f1i3iumi"
-  }
-}, {
-  d: [".f5zp4f{overflow-y:auto;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".faunodf{grid-row-start:2;}", ".f88nxoq{grid-row-end:2;}", ".fwpfdsa{grid-column-start:1;}", ".fsyjsko{grid-column-end:4;}", ".fr4fn7s{padding-top:var(--strokeWidthThick);}", ".f171n1a0{padding-right:var(--strokeWidthThick);}", ".f1jwbs5a{padding-left:var(--strokeWidthThick);}", ".f1ean75l{padding-bottom:var(--strokeWidthThick);}", ".fxlnl9e{margin-top:calc(var(--strokeWidthThick) * -1);}", ".ffs23cn{margin-right:calc(var(--strokeWidthThick) * -1);}", ".f1v5tmjd{margin-left:calc(var(--strokeWidthThick) * -1);}", ".f2uu7rc{margin-bottom:calc(var(--strokeWidthThick) * -1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
-});
+const useStyles = /*#__PURE__*/__resetStyles("r1e0mpcm", "r1equu0b", [".r1e0mpcm{padding-top:var(--strokeWidthThick);padding-right:var(--strokeWidthThick);padding-bottom:var(--strokeWidthThick);padding-left:var(--strokeWidthThick);margin-top:calc(var(--strokeWidthThick) * -1);margin-right:calc(var(--strokeWidthThick) * -1);margin-bottom:calc(var(--strokeWidthThick) * -1);margin-left:calc(var(--strokeWidthThick) * -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}", ".r1equu0b{padding-top:var(--strokeWidthThick);padding-left:var(--strokeWidthThick);padding-bottom:var(--strokeWidthThick);padding-right:var(--strokeWidthThick);margin-top:calc(var(--strokeWidthThick) * -1);margin-left:calc(var(--strokeWidthThick) * -1);margin-bottom:calc(var(--strokeWidthThick) * -1);margin-right:calc(var(--strokeWidthThick) * -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}"]);
 /**
  * Apply styling to the DialogContent slots based on the state
  */
 export const useDialogContentStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(dialogContentClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDialogContentStyles.styles.js.map

package/lib/components/DialogContent/useDialogContentStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~__styles~~","mergeClasses","shorthands","tokens","typographyStyles","dialogContentClassNames","root","useStyles","~~Bmxbyg5","sshi5w","B7ck84d","Ijaq50","nk6f5a","Br312pm","Bw0ie65","z8tnut","z189sj","Byoj8tv","uwmqm3","B6of3ja","t21cq0","jrapky","Frg6f3","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","~~useDialogContentStyles_unstable","state","styles","className"],"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { ~~makeStyles~~, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/*\n Styles for the root slot\n / const useStyles = ~~makeStyles~~({\n ~~root:~~ {\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4~~,\n ...shorthands.padding(tokens.strokeWidthThick),\n ...shorthands.margin(`calc(${tokens.strokeWidthThick} -1)`),\n ...typographyStyles.body1~~\n }~~\n}~~);\n/*\n Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles~~.root~~, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,~~QAAA~~,~~EAAqBC~~,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;~~AACrE~~,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,~~QAAA;EAAAM~~,~~IAAA;IAAAE~~,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,~~MAAMC~~,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,MAAM,~~GAAGvB~~,SAAS,CAAC,CAAC;~~EAC1BsB~~,KAAK,~~CAACvB~~,IAAI,~~CAACyB~~,SAAS,~~GAAG9B~~,YAAY,CAACI,uBAAuB,CAACC,IAAI,~~EAAEwB~~,MAAM,~~CAACxB~~,~~IAAI,EAAEuB,~~KAAK,~~CAACvB~~,IAAI,~~CAACyB~~,SAAS,CAAC;~~EACpG~~,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","typographyStyles","dialogContentClassNames","root","useStyles","useDialogContentStyles_unstable","state","styles","className"],"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n ...shorthands.padding(tokens.strokeWidthThick),\n ...shorthands.margin(`calc(${tokens.strokeWidthThick} -1)`),\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4\n});\n/*\n Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,ivCAWrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMQ,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGV,YAAY,CAACI,uBAAuB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/DialogSurface/useDialogSurface.js CHANGED Viewed

@@ -31,8 +31,8 @@ import { Escape } from '@fluentui/keyboard-keys';
         }
     });
     const handleKeyDown = useEventCallback((event)=>{
-        var _props_onKeyDown, _props;
-        (_props_onKeyDown = (_props = props).onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(_props, event);
+        var _props_onKeyDown;
+        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
         if (event.key === Escape && !event.isDefaultPrevented()) {
             requestOpenChange({
                 event,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n slot,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/*\n Create the state required to render DialogSurface.\n \n The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n \n @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n props: DialogSurfaceProps,\n ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const open = useDialogContext_unstable(ctx => ctx.open);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.backdrop)) {\n props.backdrop.onClick?.(event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick',\n });\n }\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event);\n\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown',\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.stopPropagation();\n }\n });\n\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'div',\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n return {\n components: { backdrop: 'div', root: 'div' },\n backdrop,\n mountNode: props.mountNode,\n root: slot.always(\n getNativeElementProps(props.as ?? 'div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n ref: useMergedRefs(ref, dialogRef),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","useMergedRefs","isResolvedShorthand","slot","useDialogContext_unstable","Escape","useDialogSurface_unstable","props","ref","modalType","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","stopPropagation","optional","renderByDefault","defaultProps","elementType","components","root","mountNode","always","as","tabIndex","role","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,iBAAiB;AAC3D,SAASC,MAAM,QAAQ,0BAA0B;AAEjD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,YAAYL,0BAA0BM,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,kBAAkBP,0BAA0BM,CAAAA,MAAOA,IAAIC,eAAe;IAC5E,MAAMC,YAAYR,0BAA0BM,CAAAA,MAAOA,IAAIE,SAAS;IAChE,MAAMC,OAAOT,0BAA0BM,CAAAA,MAAOA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBV,0BAA0BM,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBX,0BAA0BM,CAAAA,MAAOA,IAAIM,aAAa;IAExE,MAAMC,uBAAuBjB,iBAAiB,CAACkB;QAC7C,IAAIhB,oBAAoBK,MAAMY,QAAQ,GAAG;gBACvCZ,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMY,QAAQ,EAACC,OAAO,cAAtBb,8CAAAA,6BAAAA,iBAAyBW;QAC3B;QACA,IAAIT,cAAc,WAAW,CAACS,MAAMG,kBAAkB,IAAI;YACxDP,kBAAkB;gBAChBI;gBACAL,MAAM;gBACNS,MAAM;YACR;QACF;IACF;IAEA,MAAMC,gBAAgBvB,iBAAiB,CAACkB;YACtCX~~,kBAAAA~~;SAAAA,mBAAAA,~~CAAAA~~,~~SAAAA,OAAMiB,~~SAAS,cAAfjB,uCAAAA,sBAAAA,~~QAAkBW~~;QAElB,IAAIA,MAAMO,GAAG,KAAKpB,UAAU,CAACa,MAAMG,kBAAkB,IAAI;YACvDP,kBAAkB;gBAChBI;gBACAL,MAAM;gBACNS,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,eAAe;QACvB;IACF;IAEA,MAAMP,WAAWhB,KAAKwB,QAAQ,CAACpB,MAAMY,QAAQ,EAAE;QAC7CS,iBAAiBf,QAAQJ,cAAc;QACvCoB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IACA,IAAIX,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB;QAM0BV;IAL1B,OAAO;QACLwB,YAAY;YAAEZ,UAAU;YAAOa,MAAM;QAAM;QAC3Cb;QACAc,WAAW1B,MAAM0B,SAAS;QAC1BD,MAAM7B,KAAK+B,MAAM,CACfnC,sBAAsBQ,CAAAA,YAAAA,MAAM4B,EAAE,cAAR5B,uBAAAA,YAAY,OAAO;YACvC6B,UAAU,CAAC;YACX,cAAc3B,cAAc;YAC5B4B,MAAM5B,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAG+B,YAAYvB;YACrD,GAAGR,KAAK;YACR,GAAGI,eAAe;YAClBa,WAAWD;YACXf,KAAKP,cAAcO,KAAKI;QAC1B,IACA;YAAEkB,aAAa;QAAM;IAEzB;AACF,EAAE"}
1	+ {"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n slot,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/*\n Create the state required to render DialogSurface.\n \n The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n \n @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n props: DialogSurfaceProps,\n ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n const open = useDialogContext_unstable(ctx => ctx.open);\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\n const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.backdrop)) {\n props.backdrop.onClick?.(event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick',\n });\n }\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n props.onKeyDown?.(event);\n\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown',\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.stopPropagation();\n }\n });\n\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'div',\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n return {\n components: { backdrop: 'div', root: 'div' },\n backdrop,\n mountNode: props.mountNode,\n root: slot.always(\n getNativeElementProps(props.as ?? 'div', {\n tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n ref: useMergedRefs(ref, dialogRef),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","useMergedRefs","isResolvedShorthand","slot","useDialogContext_unstable","Escape","useDialogSurface_unstable","props","ref","modalType","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","stopPropagation","optional","renderByDefault","defaultProps","elementType","components","root","mountNode","always","as","tabIndex","role","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,iBAAiB;AAC3D,SAASC,MAAM,QAAQ,0BAA0B;AAEjD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,YAAYL,0BAA0BM,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,kBAAkBP,0BAA0BM,CAAAA,MAAOA,IAAIC,eAAe;IAC5E,MAAMC,YAAYR,0BAA0BM,CAAAA,MAAOA,IAAIE,SAAS;IAChE,MAAMC,OAAOT,0BAA0BM,CAAAA,MAAOA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBV,0BAA0BM,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBX,0BAA0BM,CAAAA,MAAOA,IAAIM,aAAa;IAExE,MAAMC,uBAAuBjB,iBAAiB,CAACkB;QAC7C,IAAIhB,oBAAoBK,MAAMY,QAAQ,GAAG;gBACvCZ,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMY,QAAQ,EAACC,OAAO,cAAtBb,8CAAAA,6BAAAA,iBAAyBW;QAC3B;QACA,IAAIT,cAAc,WAAW,CAACS,MAAMG,kBAAkB,IAAI;YACxDP,kBAAkB;gBAChBI;gBACAL,MAAM;gBACNS,MAAM;YACR;QACF;IACF;IAEA,MAAMC,gBAAgBvB,iBAAiB,CAACkB;YACtCX;SAAAA,mBAAAA,MAAMiB,SAAS,cAAfjB,uCAAAA,sBAAAA,OAAkBW;QAElB,IAAIA,MAAMO,GAAG,KAAKpB,UAAU,CAACa,MAAMG,kBAAkB,IAAI;YACvDP,kBAAkB;gBAChBI;gBACAL,MAAM;gBACNS,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,eAAe;QACvB;IACF;IAEA,MAAMP,WAAWhB,KAAKwB,QAAQ,CAACpB,MAAMY,QAAQ,EAAE;QAC7CS,iBAAiBf,QAAQJ,cAAc;QACvCoB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IACA,IAAIX,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB;QAM0BV;IAL1B,OAAO;QACLwB,YAAY;YAAEZ,UAAU;YAAOa,MAAM;QAAM;QAC3Cb;QACAc,WAAW1B,MAAM0B,SAAS;QAC1BD,MAAM7B,KAAK+B,MAAM,CACfnC,sBAAsBQ,CAAAA,YAAAA,MAAM4B,EAAE,cAAR5B,uBAAAA,YAAY,OAAO;YACvC6B,UAAU,CAAC;YACX,cAAc3B,cAAc;YAC5B4B,MAAM5B,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAG+B,YAAYvB;YACrD,GAAGR,KAAK;YACR,GAAGI,eAAe;YAClBa,WAAWD;YACXf,KAAKP,cAAcO,KAAKI;QAC1B,IACA;YAAEkB,aAAa;QAAM;IAEzB;AACF,EAAE"}