@fluentui/react-dialog 0.0.0-nightly-20221007-1237.1

package/lib/components/DialogSurface/DialogSurface.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useDialogSurface_unstable } from './useDialogSurface';
+import { renderDialogSurface_unstable } from './renderDialogSurface';
+import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles';
+import { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';
+/**
+ * DialogSurface component represents the visual part of a `Dialog` as a whole,
+ * it contains everything that should be visible.
+ */
+
+export const DialogSurface = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDialogSurface_unstable(props, ref);
+  const contextValues = useDialogSurfaceContextValues_unstable(state);
+  useDialogSurfaceStyles_unstable(state);
+  return renderDialogSurface_unstable(state, contextValues);
+});
+DialogSurface.displayName = 'DialogSurface';
+//# sourceMappingURL=DialogSurface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AAGA,SAAS,sCAAT,QAAuD,iCAAvD;AAEA;;;AAGG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,EAAQ,GAAR,CAAvC;EACA,MAAM,aAAa,GAAG,sCAAsC,CAAC,KAAD,CAA5D;EAEA,+BAA+B,CAAC,KAAD,CAA/B;EACA,OAAO,4BAA4B,CAAC,KAAD,EAAQ,aAAR,CAAnC;AACD,CANqE,CAA/D;AAQP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = useDialogSurface_unstable(props, ref);\n  const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n  useDialogSurfaceStyles_unstable(state);\n  return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"sourceRoot":""}

package/lib/components/DialogSurface/DialogSurface.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DialogSurface.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogSurface.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSurfaceSlots = {\n  /**\n   * Dimmed background of dialog.\n   * The default backdrop is rendered as a `<div>` with styling.\n   * This slot expects a `<div>` element which will replace the default backdrop.\n   * The backdrop should have `aria-hidden=\"true\"`.\n   *\n   * By default if `DialogSurface` is `<dialog>` element the backdrop is ignored,\n   * since native `<dialog>` element supports [::backdrop](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)\n   */\n  backdrop?: Slot<'div'>;\n  root: Slot<'div'>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLDialogElement | HTMLDivElement;\n\n/** @internal */\nexport type DialogSurfaceElementIntersection = HTMLDialogElement & HTMLDivElement;\n\n/**\n * DialogSurface Props\n *\n * Omits basic types from native `dialog` (`open`, `onCancel` and `onClose`)\n * to ensure `onOpenChange`, `open` and `defaultOpen` from `Dialog` is used instead\n */\nexport type DialogSurfaceProps = Omit<ComponentProps<DialogSurfaceSlots>, 'open' | 'onCancel' | 'onClose'>;\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;\n"]}

package/lib/components/DialogSurface/index.js

@@ -0,0 +1,6 @@
+export * from './DialogSurface';
+export * from './DialogSurface.types';
+export * from './renderDialogSurface';
+export * from './useDialogSurface';
+export * from './useDialogSurfaceStyles';
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/DialogSurface/renderDialogSurface.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import { DialogSurfaceProvider } from '../../contexts';
+import { Portal } from '@fluentui/react-portal';
+/**
+ * Render the final JSX of DialogSurface
+ */
+
+export const renderDialogSurface_unstable = (state, contextValues) => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(Portal, null, slots.backdrop && /*#__PURE__*/React.createElement(slots.backdrop, { ...slotProps.backdrop
+  }), /*#__PURE__*/React.createElement(DialogSurfaceProvider, {
+    value: contextValues.dialogSurface
+  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  })));
+};
+//# sourceMappingURL=renderDialogSurface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,MAAT,QAAuB,wBAAvB;AAEA;;AAEG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAAC,KAAD,EAA4B,aAA5B,KAAyE;EACnH,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAqB,KAArB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,EACG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADrB,eAEE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CAFF,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\nimport { DialogSurfaceProvider } from '../../contexts';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n  const { slots, slotProps } = getSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <Portal>\n      {slots.backdrop && <slots.backdrop {...slotProps.backdrop} />}\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        <slots.root {...slotProps.root} />\n      </DialogSurfaceProvider>\n    </Portal>\n  );\n};\n"],"sourceRoot":""}

package/lib/components/DialogSurface/useDialogSurface.js

@@ -0,0 +1,86 @@
+import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } from '@fluentui/react-utilities';
+import { useDialogContext_unstable } from '../../contexts';
+import { isEscapeKeyDismiss } from '../../utils';
+import { useModalAttributes } from '@fluentui/react-tabster';
+/**
+ * Create the state required to render DialogSurface.
+ *
+ * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,
+ * before being passed to renderDialogSurface_unstable.
+ *
+ * @param props - props from this instance of DialogSurface
+ * @param ref - reference to root HTMLElement of DialogSurface
+ */
+
+export const useDialogSurface_unstable = (props, ref) => {
+  const {
+    backdrop,
+    as
+  } = props;
+  const modalType = useDialogContext_unstable(ctx => ctx.modalType);
+  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);
+  const open = useDialogContext_unstable(ctx => ctx.open);
+  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
+  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);
+  const dialogContentId = useDialogContext_unstable(ctx => ctx.dialogContentId);
+  const handledBackdropClick = useEventCallback(event => {
+    var _a, _b;
+
+    if (isResolvedShorthand(props.backdrop)) {
+      (_b = (_a = props.backdrop).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    }
+
+    if (modalType === 'modal' && !event.isDefaultPrevented()) {
+      requestOpenChange({
+        event,
+        open: false,
+        type: 'backdropClick'
+      });
+    }
+  });
+  const handleKeyDown = useEventCallback(event => {
+    var _a;
+
+    (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+
+    if (isEscapeKeyDismiss(event, modalType)) {
+      requestOpenChange({
+        event,
+        open: false,
+        type: 'escapeKeyDown'
+      }); // stop propagation to avoid conflicting with other elements that listen for `Escape`
+      // e,g: nested Dialog, Popover, Menu and Tooltip
+
+      event.stopPropagation();
+    }
+  });
+  const {
+    modalAttributes
+  } = useModalAttributes({
+    trapFocus: modalType !== 'non-modal'
+  });
+  return {
+    components: {
+      backdrop: 'div',
+      root: 'div'
+    },
+    backdrop: resolveShorthand(backdrop, {
+      required: open && modalType !== 'non-modal',
+      defaultProps: {
+        'aria-hidden': 'true',
+        onClick: handledBackdropClick
+      }
+    }),
+    root: getNativeElementProps(as !== null && as !== void 0 ? as : 'div', {
+      'aria-modal': modalType !== 'non-modal',
+      role: modalType === 'alert' ? 'alertdialog' : 'dialog',
+      'aria-describedby': dialogContentId,
+      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
+      ...props,
+      ...modalAttributes,
+      onKeyDown: handleKeyDown,
+      ref: useMergedRefs(ref, dialogRef)
+    })
+  };
+};
+//# sourceMappingURL=useDialogSurface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts"],"names":[],"mappings":"AACA,SACE,qBADF,EAEE,gBAFF,EAGE,gBAHF,EAIE,aAJF,EAKE,mBALF,QAMO,2BANP;AAaA,SAAS,yBAAT,QAA0C,gBAA1C;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,kBAAT,QAAmC,yBAAnC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM;IAAE,QAAF;IAAY;EAAZ,IAAmB,KAAzB;EACA,MAAM,SAAS,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,SAAZ,CAA3C;EACA,MAAM,SAAS,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,SAAZ,CAA3C;EACA,MAAM,IAAI,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAtC;EACA,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,iBAAZ,CAAnD;EACA,MAAM,aAAa,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,aAAZ,CAA/C;EACA,MAAM,eAAe,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,eAAZ,CAAjD;EAEA,MAAM,oBAAoB,GAAG,gBAAgB,CAAE,KAAD,IAA4C;;;IACxF,IAAI,mBAAmB,CAAC,KAAK,CAAC,QAAP,CAAvB,EAAyC;MACvC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,CAAC,QAAN,EAAe,OAAf,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,KAAH,CAAtB;IACD;;IACD,IAAI,SAAS,KAAK,OAAd,IAAyB,CAAC,KAAK,CAAC,kBAAN,EAA9B,EAA0D;MACxD,iBAAiB,CAAC;QAChB,KADgB;QAEhB,IAAI,EAAE,KAFU;QAGhB,IAAI,EAAE;MAHU,CAAD,CAAjB;IAKD;EACF,CAX4C,CAA7C;EAaA,MAAM,aAAa,GAAG,gBAAgB,CAAE,KAAD,IAAiE;;;IACtG,CAAA,EAAA,GAAA,KAAK,CAAC,SAAN,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAA,IAAA,CAAf,KAAe,EAAG,KAAH,CAAf;;IAEA,IAAI,kBAAkB,CAAC,KAAD,EAAQ,SAAR,CAAtB,EAA0C;MACxC,iBAAiB,CAAC;QAChB,KADgB;QAEhB,IAAI,EAAE,KAFU;QAGhB,IAAI,EAAE;MAHU,CAAD,CAAjB,CADwC,CAMxC;MACA;;MACA,KAAK,CAAC,eAAN;IACD;EACF,CAbqC,CAAtC;EAeA,MAAM;IAAE;EAAF,IAAsB,kBAAkB,CAAC;IAAE,SAAS,EAAE,SAAS,KAAK;EAA3B,CAAD,CAA9C;EAEA,OAAO;IACL,UAAU,EAAE;MACV,QAAQ,EAAE,KADA;MAEV,IAAI,EAAE;IAFI,CADP;IAKL,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;MACnC,QAAQ,EAAE,IAAI,IAAI,SAAS,KAAK,WADG;MAEnC,YAAY,EAAE;QACZ,eAAe,MADH;QAEZ,OAAO,EAAE;MAFG;IAFqB,CAAX,CALrB;IAYL,IAAI,EAAE,qBAAqB,CAAC,EAAE,KAAA,IAAF,IAAA,EAAE,KAAA,KAAA,CAAF,GAAA,EAAA,GAAM,KAAP,EAAc;MACvC,cAAc,SAAS,KAAK,WADW;MAEvC,IAAI,EAAE,SAAS,KAAK,OAAd,GAAwB,aAAxB,GAAwC,QAFP;MAGvC,oBAAoB,eAHmB;MAIvC,mBAAmB,KAAK,CAAC,YAAD,CAAL,GAAsB,SAAtB,GAAkC,aAJd;MAKvC,GAAG,KALoC;MAMvC,GAAG,eANoC;MAOvC,SAAS,EAAE,aAP4B;MAQvC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,SAAN;IARqB,CAAd;EAZtB,CAAP;AAuBD,CAjEM","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      '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":""}

package/lib/components/DialogSurface/useDialogSurfaceContextValues.js

@@ -0,0 +1,7 @@
+export function useDialogSurfaceContextValues_unstable(state) {
+  const dialogSurface = true;
+  return {
+    dialogSurface
+  };
+}
+//# sourceMappingURL=useDialogSurfaceContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceContextValues.ts"],"names":[],"mappings":"AAGA,OAAM,SAAU,sCAAV,CAAiD,KAAjD,EAA0E;EAC9E,MAAM,aAAa,GAA8B,IAAjD;EAEA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { DialogSurfaceContextValues, DialogSurfaceState } from './DialogSurface.types';\nimport type { DialogSurfaceContextValue } from '../../contexts';\n\nexport function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues {\n  const dialogSurface: DialogSurfaceContextValue = true;\n\n  return { dialogSurface };\n}\n"],"sourceRoot":""}

package/lib/components/DialogSurface/useDialogSurfaceStyles.js

@@ -0,0 +1,95 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_RADIUS, SURFACE_BORDER_WIDTH, SURFACE_PADDING, useDialogContext_unstable } from '../../contexts';
+export const dialogSurfaceClassNames = {
+  root: 'fui-DialogSurface',
+  backdrop: 'fui-DialogSurface__backdrop'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "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",
+    "B2u0y6b": "fvgz9i8",
+    "Bxyxcbc": "f6a9g1z",
+    "B7ck84d": "f1ewtqcl",
+    "E5pizo": "f10nrhrw",
+    "De3pzq": "fxugw4r",
+    "sj55zd": "f19n0e5",
+    "B4j52fo": "f5ogflp",
+    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
+    "Bn0qgzm": "f1f09k3d",
+    "ibv6hh": ["finvdd3", "f1hqa2wf"],
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "Bbmb7ep": ["f1erghxr", "f1ehz9de"],
+    "Beyfa6y": ["f1ehz9de", "f1erghxr"],
+    "B7oj6ja": ["f1spoy8", "fmb70yw"],
+    "Btl43ni": ["fmb70yw", "f1spoy8"],
+    "B5xtmjs": "ff54dml"
+  },
+  "backdrop": {
+    "qhf8xq": "f19dog8a",
+    "De3pzq": "fju19wo",
+    "Bhzewxz": "f113wtx2",
+    "j35jbq": ["f10k790i", "f1xynx9j"],
+    "B5kzvoi": "f5gq2j6",
+    "oyh7mz": ["f1xynx9j", "f10k790i"]
+  },
+  "nestedDialogBackdrop": {
+    "De3pzq": "f3rmtva"
+  },
+  "nestedNativeDialogBackdrop": {
+    "fshzfu": "foe20jx"
+  }
+}, {
+  "d": [".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)"
+  }]]
+});
+/**
+ * Apply styling to the DialogSurface slots based on the state
+ */
+
+
+export const useDialogSurfaceStyles_unstable = state => {
+  const styles = useStyles();
+  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);
+  state.root.className = mergeClasses(dialogSurfaceClassNames.root, styles.root, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
+
+  if (state.backdrop) {
+    state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, styles.backdrop, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
+  }
+
+  return state;
+};
+//# sourceMappingURL=useDialogSurfaceStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAEA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SACE,+BADF,EAEE,qBAFF,EAGE,oBAHF,EAIE,eAJF,EAKE,yBALF,QAMO,gBANP;AASA,OAAO,MAAM,uBAAuB,GAAuC;EACzE,IAAI,EAAE,mBADmE;EAEzE,QAAQ,EAAE;AAF+D,CAApE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;AAAA,EAAlB;AA4CA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,cAAc,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,cAAZ,CAAhD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,uBAAuB,CAAC,IADS,EAEjC,MAAM,CAAC,IAF0B,EAGjC,cAAc,IAAI,MAAM,CAAC,0BAHQ,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAMA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,uBAAuB,CAAC,QADa,EAErC,MAAM,CAAC,QAF8B,EAGrC,cAAc,IAAI,MAAM,CAAC,oBAHY,EAIrC,KAAK,CAAC,QAAN,CAAe,SAJsB,CAAvC;EAMD;;EACD,OAAO,KAAP;AACD,CAnBM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\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  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    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":""}

package/lib/components/DialogTitle/DialogTitle.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useDialogTitle_unstable } from './useDialogTitle';
+import { renderDialogTitle_unstable } from './renderDialogTitle';
+import { useDialogTitleStyles_unstable } from './useDialogTitleStyles';
+/**
+ * The `DialogTitle` component expects to have a title/header
+ * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.
+ */
+
+export const DialogTitle = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDialogTitle_unstable(props, ref);
+  useDialogTitleStyles_unstable(state);
+  return renderDialogTitle_unstable(state);
+});
+DialogTitle.displayName = 'DialogTitle';
+//# sourceMappingURL=DialogTitle.js.map

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

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

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DialogTitle.types.js.map

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

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

package/lib/components/DialogTitle/index.js

@@ -0,0 +1,6 @@
+export * from './DialogTitle';
+export * from './DialogTitle.types';
+export * from './renderDialogTitle';
+export * from './useDialogTitle';
+export * from './useDialogTitleStyles';
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/DialogTitle/renderDialogTitle.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of DialogTitle
+ */
+
+export const renderDialogTitle_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children), slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
+  }));
+};
+//# sourceMappingURL=renderDialogTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogTitle/renderDialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState) => {\n  const { slots, slotProps } = getSlots<DialogTitleSlots>(state);\n\n  return (\n    <>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n      {slots.action && <slots.action {...slotProps.action} />}\n    </>\n  );\n};\n"],"sourceRoot":""}

package/lib/components/DialogTitle/useDialogTitle.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import { useDialogContext_unstable } from '../../contexts/dialogContext';
+import { Dismiss24Regular } from '@fluentui/react-icons';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
+import { useDialogTitleInternalStyles } from './useDialogTitleStyles';
+/**
+ * Create the state required to render DialogTitle.
+ *
+ * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,
+ * before being passed to renderDialogTitle_unstable.
+ *
+ * @param props - props from this instance of DialogTitle
+ * @param ref - reference to root HTMLElement of DialogTitle
+ */
+
+export const useDialogTitle_unstable = (props, ref) => {
+  const {
+    as,
+    action
+  } = props;
+  const modalType = useDialogContext_unstable(ctx => ctx.modalType);
+  const internalStyles = useDialogTitleInternalStyles();
+  return {
+    components: {
+      root: 'div',
+      action: 'div'
+    },
+    root: getNativeElementProps(as !== null && as !== void 0 ? as : 'div', {
+      ref,
+      id: useDialogContext_unstable(ctx => ctx.dialogTitleId),
+      ...props
+    }),
+    action: resolveShorthand(action, {
+      required: modalType === 'non-modal',
+      defaultProps: {
+        children: /*#__PURE__*/React.createElement(DialogTrigger, {
+          action: "close"
+        }, /*#__PURE__*/React.createElement("button", {
+          className: internalStyles.button,
+          "aria-label": "close"
+        }, /*#__PURE__*/React.createElement(Dismiss24Regular, null)))
+      }
+    })
+  };
+};
+//# sourceMappingURL=useDialogTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,yBAAT,QAA0C,8BAA1C;AACA,SAAS,gBAAT,QAAiC,uBAAjC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,aAAT,QAA8B,gCAA9B;AACA,SAAS,4BAAT,QAA6C,wBAA7C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,EAAF;IAAM;EAAN,IAAiB,KAAvB;EACA,MAAM,SAAS,GAAG,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,SAAZ,CAA3C;EACA,MAAM,cAAc,GAAG,4BAA4B,EAAnD;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE;IAFE,CADP;IAKL,IAAI,EAAE,qBAAqB,CAAC,EAAE,KAAA,IAAF,IAAA,EAAE,KAAA,KAAA,CAAF,GAAA,EAAA,GAAM,KAAP,EAAc;MACvC,GADuC;MAEvC,EAAE,EAAE,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,aAAZ,CAFU;MAGvC,GAAG;IAHoC,CAAd,CALtB;IAUL,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;MAC/B,QAAQ,EAAE,SAAS,KAAK,WADO;MAE/B,YAAY,EAAE;QACZ,QAAQ,eACN,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc;UAAC,MAAM,EAAC;QAAR,CAAd,eACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;UACE,SAAS,EAAE,cAAc,CAAC,MAD5B;UACkC,cAErB;QAHb,CAAA,eAKE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,IAAjB,CALF,CADF;MAFU;IAFiB,CAAT;EAVnB,CAAP;AA2BD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss24Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLElement>): DialogTitleState => {\n  const { as, action } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const internalStyles = useDialogTitleInternalStyles();\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n    root: getNativeElementProps(as ?? 'div', {\n      ref,\n      id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n      ...props,\n    }),\n    action: resolveShorthand(action, {\n      required: modalType === 'non-modal',\n      defaultProps: {\n        children: (\n          <DialogTrigger action=\"close\">\n            <button\n              className={internalStyles.button}\n              // TODO: find a better way to add internal labels\n              aria-label=\"close\"\n            >\n              <Dismiss24Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n    }),\n  };\n};\n"],"sourceRoot":""}

package/lib/components/DialogTitle/useDialogTitleStyles.js

@@ -0,0 +1,116 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { typographyStyles } from '@fluentui/react-theme';
+import { TITLE_ACTION_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+export const dialogTitleClassNames = {
+  root: 'fui-DialogTitle',
+  action: 'fui-DialogTitle__action'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f1pp30po",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f106mvju",
+    "Ijaq50": "faq1aip",
+    "Br312pm": "f1m489tg",
+    "nk6f5a": "fv2srd9",
+    "Bw0ie65": "f1tz6hh8"
+  },
+  "rootWithoutCloseButton": {
+    "Ijaq50": "faq1aip",
+    "Br312pm": "f1m489tg",
+    "nk6f5a": "f11nczdl",
+    "Bw0ie65": "f98d4vj"
+  },
+  "action": {
+    "Ijaq50": "f1hysmiz",
+    "Br312pm": "f1379kmu",
+    "nk6f5a": "f11nczdl",
+    "Bw0ie65": "f98d4vj"
+  }
+}, {
+  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".faq1aip{grid-row-start:title;}", ".f1m489tg{grid-column-start:title;}", ".fv2srd9{grid-row-end:title;}", ".f1tz6hh8{grid-column-end:title;}", ".f11nczdl{grid-row-end:close-button;}", ".f98d4vj{grid-column-end:close-button;}", ".f1hysmiz{grid-row-start:close-button;}", ".f1379kmu{grid-column-start:close-button;}"]
+});
+/**
+ * Styles to be applied on internal elements used by default action on non-modal Dialog
+ * @internal
+ */
+
+
+export const useDialogTitleInternalStyles = /*#__PURE__*/__styles({
+  "button": {
+    "qhf8xq": "f10pi13n",
+    "B7ck84d": "f1e4lqlz",
+    "De3pzq": "f1u2r49w",
+    "sj55zd": "f1ym3bx4",
+    "Bahqtrf": "f1mo0ibp",
+    "Be2twd7": "fjoy568",
+    "Bg96gwp": "fez10in",
+    "B68tc82": "f1mtd64y",
+    "Bmxbyg5": "f1y7q3j9",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1cnd47f", "fhxju0i"],
+    "icvyot": "f1ern45e",
+    "vrafjx": ["f1n71otn", "f1deefiw"],
+    "oivjwe": "f1h8hb77",
+    "wvpqe5": ["f1deefiw", "f1n71otn"],
+    "Bv0vk6g": "f37px4s",
+    "fsow6f": "fgusgyc",
+    "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"]
+  }
+}, {
+  "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;}"]
+});
+/**
+ * Apply styling to the DialogTitle slots based on the state
+ */
+
+export const useDialogTitleStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(dialogTitleClassNames.root, styles.root, !state.action && styles.rootWithoutCloseButton, state.root.className);
+
+  if (state.action) {
+    state.action.className = mergeClasses(dialogTitleClassNames.action, styles.action, state.action.className);
+  }
+
+  return state;
+};
+//# sourceMappingURL=useDialogTitleStyles.js.map

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

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

package/lib/components/DialogTrigger/DialogTrigger.js

@@ -0,0 +1,20 @@
+import { useDialogTrigger_unstable } from './useDialogTrigger';
+import { renderDialogTrigger_unstable } from './renderDialogTrigger';
+/**
+ * A non-visual component that wraps its child
+ * and configures them to be the trigger that will open or close a `Dialog`.
+ * This component should only accept one child.
+ *
+ * In case the trigger is used outside `Dialog` component
+ * it'll still provide basic ARIA related attributes
+ * to it's wrapped child, but it won't be able to alter the dialog `open` state anymore,
+ * in that case the user must provide a `controlled state`
+ */
+
+export const DialogTrigger = props => {
+  const state = useDialogTrigger_unstable(props);
+  return renderDialogTrigger_unstable(state);
+};
+DialogTrigger.displayName = 'DialogTrigger';
+DialogTrigger.isFluentTriggerComponent = true;
+//# sourceMappingURL=DialogTrigger.js.map

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

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

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DialogTrigger.types.js.map

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

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

package/lib/components/DialogTrigger/index.js

@@ -0,0 +1,5 @@
+export * from './DialogTrigger';
+export * from './DialogTrigger.types';
+export * from './renderDialogTrigger';
+export * from './useDialogTrigger';
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/DialogTrigger/renderDialogTrigger.js

@@ -0,0 +1,7 @@
+/**
+ * Render the final JSX of MenuTrigger
+ *
+ * Only renders children
+ */
+export const renderDialogTrigger_unstable = state => state.children;
+//# sourceMappingURL=renderDialogTrigger.js.map

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

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