npm - @fluentui/react-dialog - Versions diffs - 9.0.0-beta.9 → 9.0.0 - Mend

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

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 (86) hide show

package/lib-commonjs/components/DialogContent/useDialogContentStyles.js CHANGED Viewed

@@ -7,18 +7,36 @@ exports.useDialogContentStyles_unstable = exports.dialogContentClassNames = void
 const react_1 = /*#__PURE__*/require("@griffel/react");
-exports.dialogContentClassNames = {
-  root: 'fui-DialogContent' // TODO: add class names for all slots on DialogContentSlots.
-  // Should be of the form `<slotName>: 'fui-DialogContent__<slotName>`
+const constants_1 = /*#__PURE__*/require("../../contexts/constants");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+exports.dialogContentClassNames = {
+  root: 'fui-DialogContent'
 };
 /**
  * Styles for the root slot
  */
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {}
-}, {});
+  "root": {
+    "a9b677": "fly5x3f",
+    "Bqenvij": "f1l02sjl",
+    "Bmxbyg5": "f5zp4f",
+    "sshi5w": "f1nxs5xn",
+    "B7ck84d": "f1ewtqcl",
+    "Ijaq50": "f6owso0",
+    "Br312pm": "fupswjn",
+    "nk6f5a": "foucsne",
+    "Bw0ie65": "f1ka72gx",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "f1i3iumi"
+  }
+}, {
+  "d": [".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f5zp4f{overflow-y:auto;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f6owso0{grid-row-start:body;}", ".fupswjn{grid-column-start:body;}", ".foucsne{grid-row-end:body;}", ".f1ka72gx{grid-column-end:body;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+});
 /**
  * Apply styling to the DialogContent slots based on the state
  */
@@ -26,9 +44,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 const useDialogContentStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.dialogContentClassNames.root, styles.root, state.root.className); // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+  state.root.className = react_1.mergeClasses(exports.dialogContentClassNames.root, styles.root, state.root.className);
   return state;
 };

package/lib-commonjs/components/DialogContent/useDialogContentStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;~~AAIa~~,OAAA,CAAA,uBAAA,GAA8D;EACzE,IAAI,EAAE~~,mBADmE,CAEzE~~;~~EACA;;AAHyE~~,CAA9D;~~AAMb~~;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;AAAA,~~MAAlB~~;~~AAQA~~;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAA,CAAwB,IAArC,EAA2C,MAAM,CAAC,IAAlD,EAAwD,KAAK,CAAC,IAAN,CAAW,SAAnE,CAAvB~~,CAF+F,CAI/F~~;EACA~~;;EAEA~~,OAAO,KAAP;AACD,~~CARM~~;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n root: 'fui-DialogContent',\n ~~// TODO: add class names for all slots on DialogContentSlots.\n // Should be of the form `<slotName>: 'fui-DialogContent__<slotName>`\n~~};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n // ~~TODO~~ ~~Add~~ ~~default~~ ~~styles~~ ~~for the root element\~~n },\n\n ~~// TODO add additional classes for different states and/or slots\~~n});\n\n/\n Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles.root, state.root.className);\n\n ~~// TODO Add class names to slots, for example:\n // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n~~ return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,WAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEa,OAAA,CAAA,uBAAA,GAA8D;EACzE,IAAI,EAAE;AADmE,CAA9D;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAA,CAAwB,IAArC,EAA2C,MAAM,CAAC,IAAlD,EAAwD,KAAK,CAAC,IAAN,CAAW,SAAnE,CAAvB;EACA,OAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { CONTENT_GRID_AREA } from '../../contexts/constants';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n root: 'fui-DialogContent',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n width: '100%',\n height: '100%',\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n ...shorthands.gridArea(CONTENT_GRID_AREA),\n ...typographyStyles.body1,\n },\n});\n\n/\n Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -28,78 +28,12 @@ const useDialogSurface_unstable = (props, ref) => {
     backdrop,
     as
   } = props;
-  const isNativeDialog = as === 'dialog' || as === undefined;
   const modalType = contexts_1.useDialogContext_unstable(ctx => ctx.modalType);
   const dialogRef = contexts_1.useDialogContext_unstable(ctx => ctx.dialogRef);
   const open = contexts_1.useDialogContext_unstable(ctx => ctx.open);
   const requestOpenChange = contexts_1.useDialogContext_unstable(ctx => ctx.requestOpenChange);
-  const dialogTitleID = contexts_1.useDialogContext_unstable(ctx => ctx.dialogTitleID);
-  const dialogBodyID = contexts_1.useDialogContext_unstable(ctx => ctx.dialogBodyID);
-  const handleNativeClick = react_utilities_1.useEventCallback(event => {
-    var _a;
-    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
-    if (modalType === 'alert' || event.target !== event.currentTarget) {
-      return;
-    }
-    const {
-      clientX,
-      clientY
-    } = event;
-    const {
-      top,
-      left,
-      width,
-      height
-    } = event.currentTarget.getBoundingClientRect();
-    const isBackdropClick = top > clientY || clientY > top + height || left > clientX || clientX > left + width;
-    if (isBackdropClick) {
-      requestOpenChange({
-        event,
-        open: false,
-        type: 'backdropClick'
-      });
-    }
-  });
-  const handleNativeCancel = react_utilities_1.useEventCallback(event => {
-    var _a, _b;
-    (_b = (_a = props).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-    if (event.currentTarget !== event.target) {
-      return;
-    }
-    if (modalType !== 'alert') {
-      requestOpenChange({
-        event,
-        open: false,
-        type: 'dialogCancel'
-      });
-    }
-    event.preventDefault();
-  });
-  const handleNativeClose = react_utilities_1.useEventCallback(event => {
-    var _a, _b;
-    (_b = (_a = props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a, event); // Ensure dialog remains open if force closed by close event
-    if (event.currentTarget.open !== open) {
-      if (open) {
-        if (modalType === 'non-modal') {
-          event.currentTarget.show();
-        } else {
-          event.currentTarget.showModal();
-        }
-      } else {
-        event.currentTarget.close();
-      }
-    }
-  });
+  const dialogTitleID = contexts_1.useDialogContext_unstable(ctx => ctx.dialogTitleId);
+  const dialogContentId = contexts_1.useDialogContext_unstable(ctx => ctx.dialogContentId);
   const handledBackdropClick = react_utilities_1.useEventCallback(event => {
     var _a, _b;
@@ -139,29 +73,24 @@ const useDialogSurface_unstable = (props, ref) => {
   return {
     components: {
       backdrop: 'div',
-      root: 'dialog'
+      root: 'div'
     },
     backdrop: react_utilities_1.resolveShorthand(backdrop, {
-      required: !isNativeDialog && open && modalType !== 'non-modal',
+      required: open && modalType !== 'non-modal',
       defaultProps: {
         'aria-hidden': 'true',
         onClick: handledBackdropClick
       }
     }),
-    root: react_utilities_1.getNativeElementProps(as !== null && as !== void 0 ? as : 'dialog', { ...(isNativeDialog ? {
-        role: modalType === 'alert' ? 'alertdialog' : undefined,
-        onClose: handleNativeClose,
-        onClick: handleNativeClick,
-        onCancel: handleNativeCancel
-      } : {
-        'aria-modal': modalType !== 'non-modal',
-        role: modalType === 'alert' ? 'alertdialog' : 'dialog'
-      }),
+    root: react_utilities_1.getNativeElementProps(as !== null && as !== void 0 ? as : 'div', {
+      tabIndex: -1,
+      'aria-modal': modalType !== 'non-modal',
+      role: modalType === 'alert' ? 'alertdialog' : 'dialog',
+      'aria-describedby': dialogContentId,
+      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
       ...props,
       ...modalAttributes,
       onKeyDown: handleKeyDown,
-      'aria-describedby': dialogBodyID,
-      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
       ref: react_utilities_1.useMergedRefs(ref, dialogRef)
     })
   };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAaA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;~~AACA~~;;;;;;;;AAQG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM;IAAE,QAAF;IAAY;EAAZ,IAAmB,KAAzB;EACA,MAAM,~~cAAc,GAAG,EAAE,KAAK,QAAP,IAAmB,EAAE,KAAK,SAAjD;EACA,MAAM,~~SAAS,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,SAArC,CAAlB;EACA,MAAM,SAAS,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,SAArC,CAAlB;EACA,MAAM,IAAI,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,IAArC,CAAb;EACA,MAAM,iBAAiB,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,iBAArC,CAA1B;EACA,MAAM,aAAa,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,aAArC,CAAtB;EACA,MAAM,~~YAAY~~,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,~~YAArC~~,~~CAArB~~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~~CAAC~~,~~cAAD~~,~~IAAmB,IAAnB,IAA2B,~~SAAS,KAAK,~~WADhB~~;MAEnC,YAAY,EAAE;QACZ,eAAe,MADH;QAEZ,OAAO,EAAE;MAFG;IAFqB,CAA3B,CALL;IAYL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,EAAE,KAAA,IAAF,IAAA,EAAE,KAAA,KAAA,CAAF,GAAA,EAAA,GAAM,~~QAA5B~~,~~EAAsC,EAC1C,IAAI,cAAc,GACd~~;~~QACE~~,~~IAAI,EAAE,SAAS,KAAK,OAAd,GAAwB,aAAxB,GAAwC,SADhD;QAEE,OAAO,EAAE,iBAFX;QAGE,OAAO,EAAE,iBAHX;QAIE,~~QAAQ,EAAE~~;MAJZ~~,~~CADc~~,~~GAOd~~;~~QACE~~,cAAc,SAAS,KAAK,~~WAD9B~~;~~QAEE~~,IAAI,EAAE,SAAS,KAAK,OAAd,GAAwB,aAAxB,GAAwC~~;MAFhD~~,~~CAPJ,CAD0C~~;~~MAY1C~~,~~GAAG,KAZuC;MAa1C,GAAG,eAbuC;MAc1C,SAAS,EAAE,aAd+B;MAe1C,~~oBAAoB,~~YAfsB~~;~~MAgB1C~~,mBAAmB,KAAK,CAAC,YAAD,CAAL,GAAsB,SAAtB,GAAkC,~~aAhBX~~;~~MAiB1C~~,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,SAAnB;~~IAjBqC~~,~~CAAtC~~;EAZD,CAAP;~~AAgCD~~,~~CA3HM~~;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n resolveShorthand,\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n} from '@fluentui/react-utilities';\nimport type {\n DialogSurfaceElement,\n DialogSurfaceElementIntersection,\n DialogSurfaceProps,\n DialogSurfaceState,\n} from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { isEscapeKeyDismiss, ~~HTMLDialogElementProps~~ } 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 = (\n props: DialogSurfaceProps,\n ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n const { backdrop, as } = props;\n const ~~isNativeDialog = as === 'dialog' \|\| as === undefined;\n const~~ modalType = useDialogContext_unstable(ctx => ctx.modalType);\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 ~~dialogBodyID~~ = useDialogContext_unstable(ctx => ctx.~~dialogBodyID~~);\n\n const handleNativeClick = useEventCallback((event: React.MouseEvent<DialogSurfaceElementIntersection>) => {\n props.onClick?.(event);\n if (modalType === 'alert' \|\| event.target !== event.currentTarget) {\n return;\n }\n const { clientX, clientY } = event;\n const { top, left, width, height } = event.currentTarget.getBoundingClientRect();\n const isBackdropClick = top > clientY \|\| clientY > top + height \|\| left > clientX \|\| clientX > left + width;\n if (isBackdropClick) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick',\n });\n }\n });\n\n const handleNativeCancel = useEventCallback((event: React.SyntheticEvent<DialogSurfaceElementIntersection>) => {\n (props as HTMLDialogElementProps).onCancel?.(event);\n if (event.currentTarget !== event.target) {\n return;\n }\n if (modalType !== 'alert') {\n requestOpenChange({\n event,\n open: false,\n type: 'dialogCancel',\n });\n }\n event.preventDefault();\n });\n\n const handleNativeClose = useEventCallback((event: React.SyntheticEvent<DialogSurfaceElementIntersection>) => {\n (props as HTMLDialogElementProps).onClose?.(event);\n // Ensure dialog remains open if force closed by close event\n if (event.currentTarget.open !== open) {\n if (open) {\n if (modalType === 'non-modal') {\n event.currentTarget.show();\n } else {\n event.currentTarget.showModal();\n }\n } else {\n event.currentTarget.close();\n }\n }\n });\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<DialogSurfaceElementIntersection>) => {\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({ trapFocus: modalType !== 'non-modal' });\n\n return {\n components: {\n backdrop: 'div',\n root: '~~dialog~~',\n },\n backdrop: resolveShorthand(backdrop, {\n required: ~~!isNativeDialog &&~~ open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true',\n onClick: handledBackdropClick,\n },\n }),\n root: getNativeElementProps(as ?? '~~dialog~~', {\n ~~...(isNativeDialog\n ? {\n role~~: ~~modalType~~ ~~===~~ ~~'alert' ? 'alertdialog' : undefined,\n onClose: handleNativeClose,\n onClick: handleNativeClick,\n onCancel: handleNativeCancel,\n }~~\n ~~: {\n~~ 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n ~~}),\n~~ ~~...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n~~ 'aria-describedby': ~~dialogBodyID~~,\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ref: useMergedRefs(ref, dialogRef),\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n resolveShorthand,\n useEventCallback,\n useMergedRefs,\n isResolvedShorthand,\n} from '@fluentui/react-utilities';\nimport type {\n DialogSurfaceElement,\n DialogSurfaceElementIntersection,\n DialogSurfaceProps,\n DialogSurfaceState,\n} 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 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 dialogContentId = useDialogContext_unstable(ctx => ctx.dialogContentId);\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<DialogSurfaceElementIntersection>) => {\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({ trapFocus: modalType !== 'non-modal' });\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-describedby': dialogContentId,\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n ref: useMergedRefs(ref, dialogRef),\n }),\n };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.js CHANGED Viewed

@@ -9,9 +9,9 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-const constants_1 = /*#__PURE__*/require("../../contexts/constants");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-const dialogContext_1 = /*#__PURE__*/require("../../contexts/dialogContext");
+const contexts_1 = /*#__PURE__*/require("../../contexts");
 exports.dialogSurfaceClassNames = {
   root: 'fui-DialogSurface',
@@ -22,7 +22,61 @@ exports.dialogSurfaceClassNames = {
  */
 const useStyles = /*#__PURE__*/react_1.__styles({
+  "focusOutline": {
+    "Brovlpu": "ftqa4ok",
+    "B486eqv": "f2hkw1w",
+    "B8q5s1w": "f8hki3x",
+    "Bci5o5g": ["f1d2448m", "ffh67wi"],
+    "n8qw10": "f1bjia2o",
+    "Bdrgwmp": ["ffh67wi", "f1d2448m"],
+    "Bm4h7ae": "f15bsgw9",
+    "B7ys5i9": "f14e48fq",
+    "Busjfv9": "f18yb2kv",
+    "Bhk32uz": "fd6o370",
+    "Bf4ptjt": "fh1cnn4",
+    "kclons": ["fy7oxxb", "f184ne2d"],
+    "Bhdgwq3": "fpukqih",
+    "Blkhhs4": ["f184ne2d", "fy7oxxb"],
+    "Bqtpl0w": "frrh606",
+    "clg4pj": ["f1v5zibi", "fo2hd23"],
+    "hgwjuy": "ful5kiu",
+    "Bonggc9": ["fo2hd23", "f1v5zibi"],
+    "B1tsrr9": ["f1jqcqds", "ftffrms"],
+    "Dah5zi": ["ftffrms", "f1jqcqds"],
+    "Bkh64rk": ["f2e7qr6", "fsr1zz6"],
+    "qqdqy8": ["fsr1zz6", "f2e7qr6"],
+    "B6dhp37": "f1dvezut",
+    "i03rao": ["fd0oaoj", "f1cwg4i8"],
+    "Boxcth7": "fjvm52t",
+    "Bsom6fd": ["f1cwg4i8", "fd0oaoj"],
+    "J0r882": "fdiulkx",
+    "Bjwuhne": "f1yalx80",
+    "Ghsupd": ["fq22d5a", "f1jw7pan"],
+    "Bule8hv": ["f1jw7pan", "fq22d5a"]
+  },
   "root": {
+    "mc9l5x": "ftgm304",
+    "famaaq": "f1c515w",
+    "Bcdw1i0": "f1bitti",
+    "Bhzewxz": "f15twtuk",
+    "j35jbq": ["f1e31b4d", "f1vgc2s3"],
+    "B5kzvoi": "f1yab3r1",
+    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
+    "z8tnut": "fuq56rw",
+    "z189sj": ["f15kemlc", "fdgang7"],
+    "Byoj8tv": "fl2zwns",
+    "uwmqm3": ["fdgang7", "f15kemlc"],
+    "B6of3ja": "fgr6219",
+    "t21cq0": ["f1ujusj6", "fcgxt0o"],
+    "jrapky": "f10jk5vf",
+    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "B68tc82": "f1ln0qer",
+    "Bmxbyg5": "fa2wlxz",
+    "fshzfu": "f120kxnn",
     "qhf8xq": "f19dog8a",
     "a9b677": "fly5x3f",
     "Bqenvij": "f3052tw",
@@ -32,16 +86,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "E5pizo": "f10nrhrw",
     "De3pzq": "fxugw4r",
     "sj55zd": "f19n0e5",
-    "i8kkvl": "f4px1ci",
-    "Belr9w4": "fn67r4l",
     "B4j52fo": "f5ogflp",
     "Bekrc4i": ["f1hqa2wf", "finvdd3"],
     "Bn0qgzm": "f1f09k3d",
     "ibv6hh": ["finvdd3", "f1hqa2wf"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
     "g2u3we": "fghlq4f",
     "h3c5rm": ["f1gn591s", "fjscplz"],
     "B9xav0g": "fb073pr",
@@ -50,51 +98,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "Beyfa6y": ["f1ehz9de", "f1erghxr"],
     "B7oj6ja": ["f1spoy8", "fmb70yw"],
     "Btl43ni": ["fmb70yw", "f1spoy8"],
-    "B6of3ja": "fgr6219",
-    "t21cq0": ["f1ujusj6", "fcgxt0o"],
-    "jrapky": "f10jk5vf",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
-    "mc9l5x": "f13qh94s",
-    "wkccdc": "f874eam",
-    "Budl1dq": "fjj47a5",
-    "zoa1oz": "f16o7v7l",
-    "z8tnut": "fuq56rw",
-    "z189sj": ["f15kemlc", "fdgang7"],
-    "Byoj8tv": "fl2zwns",
-    "uwmqm3": ["fdgang7", "f15kemlc"],
-    "B5xtmjs": "ff54dml",
-    "Bqu9lor": "f52bj20",
-    "B06wobe": "f1dangjo"
-  },
-  "dialog": {
-    "mc9l5x": "ftgm304",
-    "qhf8xq": "f19dog8a",
-    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
-    "j35jbq": ["f1e31b4d", "f1vgc2s3"],
-    "Bhzewxz": "f15twtuk",
-    "B5kzvoi": "f1yab3r1",
-    "a9b677": "f1acs6jw",
-    "Bqenvij": "f3052tw",
-    "De3pzq": "f1k92xex",
-    "B2u0y6b": "fheyfof",
-    "Bxyxcbc": "f1xxuklu",
-    "famaaq": "f1c515w",
-    "Bcdw1i0": "f1bitti",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"],
-    "B6of3ja": "fgr6219",
-    "t21cq0": ["f1ujusj6", "fcgxt0o"],
-    "jrapky": "f10jk5vf",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
-    "icvyot": "f1ern45e",
-    "vrafjx": ["f1n71otn", "f1deefiw"],
-    "oivjwe": "f1h8hb77",
-    "wvpqe5": ["f1deefiw", "f1n71otn"],
-    "B68tc82": "f1ln0qer",
-    "Bmxbyg5": "fa2wlxz",
-    "fshzfu": "f120kxnn"
+    "B5xtmjs": "ff54dml"
   },
   "backdrop": {
     "qhf8xq": "f19dog8a",
@@ -111,13 +115,11 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "fshzfu": "foe20jx"
   }
 }, {
-  "d": [".f19dog8a{position:fixed;}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".fvgz9i8{max-width:600px;}", ".f6a9g1z{max-height:100vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10nrhrw{box-shadow:var(--shadow64);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1erghxr{border-bottom-right-radius:8px;}", ".f1ehz9de{border-bottom-left-radius:8px;}", ".f1spoy8{border-top-right-radius:8px;}", ".fmb70yw{border-top-left-radius:8px;}", ".fgr6219{margin-top:auto;}", ".f1ujusj6{margin-right:auto;}", ".fcgxt0o{margin-left:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".f13qh94s{display:grid;}", ".f874eam{grid-template-rows:auto 1fr auto;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}", ".f16o7v7l{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-end actions-end\";}", ".fuq56rw{padding-top:24px;}", ".f15kemlc{padding-right:24px;}", ".fdgang7{padding-left:24px;}", ".fl2zwns{padding-bottom:24px;}", ".ftgm304{display:block;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1acs6jw{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}", ".f1k92xex{background-color:unset;}", ".fheyfof{max-width:unset;}", ".f1xxuklu{max-height:unset;}", ".f1c515w{-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;}", ".f1bitti{visibility:unset;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".fju19wo{background-color:rgba(0, 0, 0, 0.4);}", ".f113wtx2{top:0px;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f5gq2j6{bottom:0px;}", ".f3rmtva{background-color:transparent;}", ".foe20jx::backdrop{background-color:transparent;}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "d": [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".ftgm304{display:block;}", ".f1c515w{-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;}", ".f1bitti{visibility:unset;}", ".f15twtuk{top:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1yab3r1{bottom:0;}", ".fuq56rw{padding-top:24px;}", ".f15kemlc{padding-right:24px;}", ".fdgang7{padding-left:24px;}", ".fl2zwns{padding-bottom:24px;}", ".fgr6219{margin-top:auto;}", ".f1ujusj6{margin-right:auto;}", ".fcgxt0o{margin-left:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".f19dog8a{position:fixed;}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".fvgz9i8{max-width:600px;}", ".f6a9g1z{max-height:100vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10nrhrw{box-shadow:var(--shadow64);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1erghxr{border-bottom-right-radius:8px;}", ".f1ehz9de{border-bottom-left-radius:8px;}", ".f1spoy8{border-top-right-radius:8px;}", ".fmb70yw{border-top-left-radius:8px;}", ".fju19wo{background-color:rgba(0, 0, 0, 0.4);}", ".f113wtx2{top:0px;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f5gq2j6{bottom:0px;}", ".f3rmtva{background-color:transparent;}", ".foe20jx::backdrop{background-color:transparent;}"],
   "m": [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
     "m": "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f52bj20{grid-template-rows:auto 1fr auto auto;}}", {
-    "m": "screen and (max-width: 480px)"
-  }], ["@media screen and (max-width: 480px){.f1dangjo{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-start actions-start\" \"actions-end actions-end actions-end\";}}", {
-    "m": "screen and (max-width: 480px)"
   }]]
 });
 /**
@@ -127,8 +129,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 const useDialogSurfaceStyles_unstable = state => {
   const styles = useStyles();
-  const isNestedDialog = dialogContext_1.useDialogContext_unstable(ctx => ctx.isNestedDialog);
-  state.root.className = react_1.mergeClasses(exports.dialogSurfaceClassNames.root, styles.dialog, styles.root, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
+  const isNestedDialog = contexts_1.useDialogContext_unstable(ctx => ctx.isNestedDialog);
+  state.root.className = react_1.mergeClasses(exports.dialogSurfaceClassNames.root, styles.root, styles.focusOutline, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
   if (state.backdrop) {
     state.backdrop.className = react_1.mergeClasses(exports.dialogSurfaceClassNames.backdrop, styles.backdrop, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,~~WAAA~~,gBAAA,OAAA,CAAA,~~0BAAA~~,CAAA;;~~AAYA~~,MAAA,~~eAAA~~,gBAAA,OAAA,CAAA,~~8BAAA~~,CAAA;;~~AAGa~~,OAAA,CAAA,uBAAA,GAA8D;EACzE,IAAI,EAAE,mBADmE;EAEzE,QAAQ,EAAE;AAF+D,CAA9D;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;~~EAAA~~;~~EAAA~~;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;~~IAAA;~~EAAA;~~IAAA;~~EAAA;IAAA;EAAA;AAAA,EAAlB;~~AAwEA~~;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,cAAc,GAAG,~~eAAA~~,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,cAArC,CAAvB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,uBAAA,CAAwB,IADH,EAErB,MAAM,CAAC,~~MAFc~~,EAGrB,MAAM,CAAC,~~IAHc~~,EAIrB,cAAc,IAAI,MAAM,CAAC,0BAJJ,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;EAOA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,uBAAA,CAAwB,QADC,EAEzB,MAAM,CAAC,QAFkB,EAGzB,cAAc,IAAI,MAAM,CAAC,oBAHA,EAIzB,KAAK,CAAC,QAAN,CAAe,SAJU,CAA3B;EAMD;;EACD,OAAO,KAAP;AACD,CApBM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport {\n ~~TITLE_GRID_AREA~~,\n ~~ACTIONS_END_GRID_AREA,\n ACTIONS_START_GRID_AREA,\n~~ SURFACE_BORDER_RADIUS,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n ~~DIALOG_GAP~~,\n ~~MEDIA_QUERY_BREAKPOINT_SELECTOR,\n BODY_GRID_AREA,\n TITLE_ACTION_GRID_AREA,\n~~} from '../../contexts~~/constants~~';\nimport ~~{ useDialogContext_unstable } from '../../contexts/dialogContext';\nimport~~ type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots> = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n ~~root~~: ~~{\n position: 'fixed'~~,\n ~~width~~: ~~'100%',\~~n ~~height~~: '~~fit-content~~',\n ~~maxWidth~~: '~~600px~~',\n ~~maxHeight~~: '~~100vh~~',\n ~~boxSizing: 'border-box',\n boxShadow: tokens.shadow64,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n~~ ...shorthands.~~gap~~(~~DIALOG_GAP~~),\n ...shorthands.~~border~~(~~SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke~~),\n ...shorthands.~~borderRadius~~(~~SURFACE_BORDER_RADIUS~~),\n ...shorthands.margin('auto'),\n ~~display:~~ '~~grid~~',\n gridTemplateRows: 'auto 1fr auto',\n gridTemplateColumns: '1fr 1fr auto',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${BODY_GRID_AREA} ${BODY_GRID_AREA} ${BODY_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n ...shorthands.~~padding~~(~~SURFACE_PADDING~~),\n ~~[MEDIA_QUERY_BREAKPOINT_SELECTOR]~~: {\n ~~maxWidth~~: '~~100vw',\n gridTemplateRows:~~ ~~'auto~~ ~~1fr~~ ~~auto auto~~',\n gridTemplateAreas: `\n \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n \"${BODY_GRID_AREA} ${BODY_GRID_AREA} ${BODY_GRID_AREA}\"\n \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n `,\n },\n ~~},\n dialog: {\n~~ ~~display: 'block',\n~~ position: 'fixed',\n ~~left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n~~ width: '~~fit-content~~',\n height: 'fit-content',\n ~~backgroundColor~~: '~~unset~~',\n ~~maxWidth~~: '~~unset~~',\n ~~maxHeight~~: '~~unset~~',\n ~~userSelect~~: ~~'unset'~~,\n ~~visibility~~: ~~'unset'~~,\n ~~...shorthands~~.~~padding(0)~~,\n ...shorthands.~~margin~~('~~auto~~'~~),\n ...shorthands~~.~~borderStyle('none'~~),\n ...shorthands.~~overflow~~(~~'unset'~~),\n ~~'&::backdrop'~~: {\n ~~backgroundColor~~: '~~rgba(0, 0, 0, 0.4)~~',\n },\n },\n backdrop: {\n position: 'fixed',\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n ...shorthands.inset('0px'),\n },\n nestedDialogBackdrop: {\n backgroundColor: 'transparent',\n },\n nestedNativeDialogBackdrop: {\n '&::backdrop': {\n backgroundColor: 'transparent',\n },\n },\n});\n\n/\n Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n const styles = useStyles();\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n state.root.className = mergeClasses(\n dialogSurfaceClassNames.root,\n styles.~~dialog~~,\n styles.~~root~~,\n isNestedDialog && styles.nestedNativeDialogBackdrop,\n state.root.className,\n );\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(\n dialogSurfaceClassNames.backdrop,\n styles.backdrop,\n isNestedDialog && styles.nestedDialogBackdrop,\n state.backdrop.className,\n );\n }\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AASa,OAAA,CAAA,uBAAA,GAA8D;EACzE,IAAI,EAAE,mBADmE;EAEzE,QAAQ,EAAE;AAF+D,CAA9D;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AA6CA;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,cAAc,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,cAArC,CAAvB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,uBAAA,CAAwB,IADH,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,CAAC,YAHc,EAIrB,cAAc,IAAI,MAAM,CAAC,0BAJJ,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;EAOA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,uBAAA,CAAwB,QADC,EAEzB,MAAM,CAAC,QAFkB,EAGzB,cAAc,IAAI,MAAM,CAAC,oBAHA,EAIzB,KAAK,CAAC,QAAN,CAAe,SAJU,CAA3B;EAMD;;EACD,OAAO,KAAP;AACD,CApBM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n MEDIA_QUERY_BREAKPOINT_SELECTOR,\n SURFACE_BORDER_RADIUS,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n useDialogContext_unstable,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots> = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n focusOutline: createFocusOutlineStyle(),\n root: {\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n ...shorthands.inset(0),\n ...shorthands.padding(0),\n ...shorthands.padding(SURFACE_PADDING),\n ...shorthands.margin('auto'),\n ...shorthands.borderStyle('none'),\n ...shorthands.overflow('unset'),\n '&::backdrop': {\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n },\n position: 'fixed',\n width: '100%',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n boxShadow: tokens.shadow64,\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n ...shorthands.borderRadius(SURFACE_BORDER_RADIUS),\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n },\n },\n backdrop: {\n position: 'fixed',\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n ...shorthands.inset('0px'),\n },\n nestedDialogBackdrop: {\n backgroundColor: 'transparent',\n },\n nestedNativeDialogBackdrop: {\n '&::backdrop': {\n backgroundColor: 'transparent',\n },\n },\n});\n\n/\n Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n const styles = useStyles();\n const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n state.root.className = mergeClasses(\n dialogSurfaceClassNames.root,\n styles.root,\n styles.focusOutline,\n isNestedDialog && styles.nestedNativeDialogBackdrop,\n state.root.className,\n );\n if (state.backdrop) {\n state.backdrop.className = mergeClasses(\n dialogSurfaceClassNames.backdrop,\n styles.backdrop,\n isNestedDialog && styles.nestedDialogBackdrop,\n state.backdrop.className,\n );\n }\n return state;\n};\n"],"sourceRoot":"../src/"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,EAAF;IAAM;EAAN,IAAiB,KAAvB;EACA,MAAM,SAAS,GAAG,eAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,SAArC,CAAlB;EACA,MAAM,cAAc,GAAG,sBAAA,CAAA,4BAAA,EAAvB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE;IAFE,CADP;IAKL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,EAAE,KAAA,IAAF,IAAA,EAAE,KAAA,KAAA,CAAF,GAAA,EAAA,GAAM,KAA5B,EAAmC;MACvC,GADuC;MAEvC,EAAE,EAAE,eAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,aAArC,CAFmC;MAGvC,GAAG;IAHoC,CAAnC,CALD;IAUL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;MAC/B,QAAQ,EAAE,SAAS,KAAK,WADO;MAE/B,YAAY,EAAE;QACZ,QAAQ,EACN,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,aAAD,EAAc;UAAC,MAAM,EAAC;QAAR,CAAd,EACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;UACE,SAAS,EAAE,cAAc,CAAC,MAD5B;UACkC,cAErB;QAHb,CAAA,EAKE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,gBAAD,EAAiB,IAAjB,CALF,CADF;MAFU;IAFiB,CAAzB;EAVH,CAAP;AA2BD,CAhCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss24Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles';\n\n/*\n Create the state required to render DialogTitle.\n \n The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n \n @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLElement>): DialogTitleState => {\n const { as, action } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n\n return {\n components: {\n root: 'div',\n action: 'div',\n },\n root: getNativeElementProps(as ?? 'div', {\n ref,\n id: useDialogContext_unstable(ctx => ctx.~~dialogTitleID~~),\n ...props,\n }),\n action: resolveShorthand(action, {\n required: modalType === 'non-modal',\n defaultProps: {\n children: (\n <DialogTrigger action=\"close\">\n <button\n className={internalStyles.button}\n // TODO: find a better way to add internal labels\n aria-label=\"close\"\n >\n <Dismiss24Regular />\n </button>\n </DialogTrigger>\n ),\n },\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,EAAF;IAAM;EAAN,IAAiB,KAAvB;EACA,MAAM,SAAS,GAAG,eAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,SAArC,CAAlB;EACA,MAAM,cAAc,GAAG,sBAAA,CAAA,4BAAA,EAAvB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE;IAFE,CADP;IAKL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,EAAE,KAAA,IAAF,IAAA,EAAE,KAAA,KAAA,CAAF,GAAA,EAAA,GAAM,KAA5B,EAAmC;MACvC,GADuC;MAEvC,EAAE,EAAE,eAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,aAArC,CAFmC;MAGvC,GAAG;IAHoC,CAAnC,CALD;IAUL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;MAC/B,QAAQ,EAAE,SAAS,KAAK,WADO;MAE/B,YAAY,EAAE;QACZ,QAAQ,EACN,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,aAAD,EAAc;UAAC,MAAM,EAAC;QAAR,CAAd,EACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;UACE,SAAS,EAAE,cAAc,CAAC,MAD5B;UACkC,cAErB;QAHb,CAAA,EAKE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,gBAAD,EAAiB,IAAjB,CALF,CADF;MAFU;IAFiB,CAAzB;EAVH,CAAP;AA2BD,CAhCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss24Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles';\n\n/*\n Create the state required to render DialogTitle.\n \n The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n \n @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLElement>): DialogTitleState => {\n const { as, action } = props;\n const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n const internalStyles = useDialogTitleInternalStyles();\n\n return {\n components: {\n root: 'div',\n action: 'div',\n },\n root: getNativeElementProps(as ?? 'div', {\n ref,\n id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n ...props,\n }),\n action: resolveShorthand(action, {\n required: modalType === 'non-modal',\n defaultProps: {\n children: (\n <DialogTrigger action=\"close\">\n <button\n className={internalStyles.button}\n // TODO: find a better way to add internal labels\n aria-label=\"close\"\n >\n <Dismiss24Regular />\n </button>\n </DialogTrigger>\n ),\n },\n }),\n };\n};\n"],"sourceRoot":"../src/"}

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

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

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDialogTrigger_unstable = void 0;
-const React = /*#__PURE__*/require("react");
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
@@ -28,7 +26,7 @@ const useDialogTrigger_unstable = props => {
     children,
     action = isInsideSurfaceDialog ? 'close' : 'open'
   } = props;
-  const child = React.isValidElement(children) ? react_utilities_1.getTriggerChild(children) : undefined;
+  const child = react_utilities_1.getTriggerChild(children);
   const requestOpenChange = contexts_1.useDialogContext_unstable(ctx => ctx.requestOpenChange);
   const {
     triggerAttributes
@@ -47,7 +45,9 @@ const useDialogTrigger_unstable = props => {
     }
   });
   return {
-    children: react_utilities_1.applyTriggerPropsToChildren(children, react_aria_1.useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', { ...(child === null || child === void 0 ? void 0 : child.props),
+    children: react_utilities_1.applyTriggerPropsToChildren(children, react_aria_1.useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', {
+      type: 'button',
+      ...(child === null || child === void 0 ? void 0 : child.props),
       'aria-haspopup': action === 'close' ? undefined : 'dialog',
       ref: child === null || child === void 0 ? void 0 : child.ref,
       onClick: handleClick,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts"],"names":[],"mappings":";;;;;;;~~AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;~~AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAEA;;;;;AAKG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAkD;EACzF,MAAM,qBAAqB,GAAG,UAAA,CAAA,gCAAA,EAA9B;EAEA,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,qBAAqB,GAAG,OAAH,GAAa;EAAvD,IAAkE,KAAxE;EAEA,MAAM,KAAK,GAAG,~~KAAK,CAAC,cAAN,CAAqB,QAArB,IAAiC,~~iBAAA,CAAA,eAAA,~~CAAyC~~,~~QAAzC~~,~~CAAjC,GAAsF,SAApG~~;EAEA,MAAM,iBAAiB,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,iBAArC,CAA1B;EAEA,MAAM;IAAE;EAAF,IAAwB,eAAA,CAAA,kBAAA,EAA9B;EAEA,MAAM,WAAW,GAAG,iBAAA,CAAA,gBAAA,CACjB,KAAD,IAAoF;;;IAClF,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,CAAA,EAAA,GAAL,KAAK,CAAE,KAAF,EAAQ,OAAb,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,KAAH,CAApB;;IACA,IAAI,CAAC,KAAK,CAAC,kBAAN,EAAL,EAAiC;MAC/B,iBAAiB,CAAC;QAChB,KADgB;QAEhB,IAAI,EAAE,cAFU;QAGhB,IAAI,EAAE,MAAM,KAAK;MAHD,CAAD,CAAjB;IAKD;EACF,CAViB,CAApB;EAaA,OAAO;IACL,QAAQ,EAAE,iBAAA,CAAA,2BAAA,CACR,QADQ,EAER,YAAA,CAAA,kBAAA,CAAmB,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,QAAhB,IAA4B,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,GAA5C,GAAkD,KAAK,CAAC,IAAxD,GAA+D,KAAlF,EAAyF,~~EACvF~~,IAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,~~CADuF~~;~~MAEvF~~,iBAAiB,MAAM,KAAK,OAAX,GAAqB,SAArB,GAAiC,~~QAFqC~~;~~MAGvF~~,GAAG,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,~~GAH2E~~;~~MAIvF~~,OAAO,EAAE,~~WAJ8E~~;~~MAKvF~~,GAAG;~~IALoF~~,CAAzF,CAFQ;EADL,CAAP;~~AAYD~~,~~CApCM~~;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport { ~~DialogTriggerChildProps,~~ DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n\n/*\n Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n \n @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n const { children, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = ~~React.isValidElement(children) ?~~ getTriggerChild~~<DialogTriggerChildProps>~~(children) ~~: undefined~~;\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n\n const { triggerAttributes } = useModalAttributes();\n\n const handleClick = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n child?.props.onClick?.(event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open',\n });\n }\n },\n );\n\n return {\n children: applyTriggerPropsToChildren~~<DialogTriggerChildProps>~~(\n children,\n useARIAButtonProps(child?.type === 'button' \|\| child?.type === 'a' ? child.type : 'div', {\n ...child?.props,\n 'aria-haspopup': action === 'close' ? undefined : 'dialog',\n ref: child?.ref ~~as React.Ref<never>,\~~n onClick: handleClick,\n ...triggerAttributes,\n }),\n ),\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;AAEA;;;;;AAKG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAkD;EACzF,MAAM,qBAAqB,GAAG,UAAA,CAAA,gCAAA,EAA9B;EAEA,MAAM;IAAE,QAAF;IAAY,MAAM,GAAG,qBAAqB,GAAG,OAAH,GAAa;EAAvD,IAAkE,KAAxE;EAEA,MAAM,KAAK,GAAG,iBAAA,CAAA,eAAA,CAAgB,QAAhB,CAAd;EAEA,MAAM,iBAAiB,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,iBAArC,CAA1B;EAEA,MAAM;IAAE;EAAF,IAAwB,eAAA,CAAA,kBAAA,EAA9B;EAEA,MAAM,WAAW,GAAG,iBAAA,CAAA,gBAAA,CACjB,KAAD,IAAoF;;;IAClF,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAK,CAAA,EAAA,GAAL,KAAK,CAAE,KAAF,EAAQ,OAAb,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,KAAH,CAApB;;IACA,IAAI,CAAC,KAAK,CAAC,kBAAN,EAAL,EAAiC;MAC/B,iBAAiB,CAAC;QAChB,KADgB;QAEhB,IAAI,EAAE,cAFU;QAGhB,IAAI,EAAE,MAAM,KAAK;MAHD,CAAD,CAAjB;IAKD;EACF,CAViB,CAApB;EAaA,OAAO;IACL,QAAQ,EAAE,iBAAA,CAAA,2BAAA,CACR,QADQ,EAER,YAAA,CAAA,kBAAA,CAAmB,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,QAAhB,IAA4B,CAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,IAAP,MAAgB,GAA5C,GAAkD,KAAK,CAAC,IAAxD,GAA+D,KAAlF,EAAyF;MACvF,IAAI,EAAE,QADiF;MAEvF,IAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,CAFuF;MAGvF,iBAAiB,MAAM,KAAK,OAAX,GAAqB,SAArB,GAAiC,QAHqC;MAIvF,GAAG,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAJ2E;MAKvF,OAAO,EAAE,WAL8E;MAMvF,GAAG;IANoF,CAAzF,CAFQ;EADL,CAAP;AAaD,CArCM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n\n/*\n Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n \n @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n const { children, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n const child = getTriggerChild(children);\n\n const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n\n const { triggerAttributes } = useModalAttributes();\n\n const handleClick = useEventCallback(\n (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n child?.props.onClick?.(event);\n if (!event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n type: 'triggerClick',\n open: action === 'open',\n });\n }\n },\n );\n\n return {\n children: applyTriggerPropsToChildren(\n children,\n useARIAButtonProps(child?.type === 'button' \|\| child?.type === 'a' ? child.type : 'div', {\n type: 'button',\n ...child?.props,\n 'aria-haspopup': action === 'close' ? undefined : 'dialog',\n ref: child?.ref,\n onClick: handleClick,\n ...triggerAttributes,\n }),\n ),\n };\n};\n"],"sourceRoot":"../src/"}