@fluentui/react-dialog 9.0.0-beta.7

package/lib/components/Dialog/useDialog.js

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { resolveShorthand, useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { normalizeDefaultPrevented, isEscapeKeyDismiss } from '../../utils';
+/**
+ * Create the state required to render Dialog.
+ *
+ * The returned state can be modified with hooks such as useDialogStyles_unstable,
+ * before being passed to renderDialog_unstable.
+ *
+ * @param props - props from this instance of Dialog
+ */
+
+export const useDialog_unstable = props => {
+  const {
+    children,
+    overlay,
+    modalType = 'modal',
+    onOpenChange
+  } = props;
+  const [trigger, content] = childrenToTriggerAndContent(children);
+  const [open, setOpen] = useControllableState({
+    state: props.open,
+    defaultState: props.defaultOpen,
+    initialState: false
+  });
+  const overlayShorthand = resolveShorthand(overlay, {
+    required: modalType !== 'non-modal',
+    defaultProps: {
+      'aria-hidden': 'true'
+    }
+  });
+  const requestOpenChange = useEventCallback(data => {
+    const isDefaultPrevented = normalizeDefaultPrevented(data.event);
+
+    if (onOpenChange) {
+      onOpenChange(data.event, data);
+    } // if user prevents default then do not change state value
+    // otherwise updates state value and trigger reference to the element that caused the opening
+
+
+    if (!isDefaultPrevented()) {
+      triggerRef.current = !open && data.open ? data.event.currentTarget : null;
+      setOpen(data.open);
+    }
+  });
+  const {
+    contentRef,
+    triggerRef
+  } = useFocusFirstElement({
+    open,
+    modalType,
+    requestOpenChange
+  });
+  const handleOverLayClick = useEventCallback(event => {
+    var _a;
+
+    (_a = overlayShorthand === null || overlayShorthand === void 0 ? void 0 : overlayShorthand.onClick) === null || _a === void 0 ? void 0 : _a.call(overlayShorthand, event);
+
+    if (isOverlayClickDismiss(event, modalType)) {
+      requestOpenChange({
+        event,
+        open: false,
+        type: 'overlayClick'
+      });
+    }
+  });
+  return {
+    components: {
+      overlay: 'div'
+    },
+    overlay: overlayShorthand && { ...overlayShorthand,
+      onClick: handleOverLayClick
+    },
+    open,
+    modalType,
+    content,
+    trigger,
+    triggerRef,
+    contentRef,
+    requestOpenChange,
+    dialogBodyID: useId('dialog-body-'),
+    dialogTitleID: useId('dialog-title-')
+  };
+};
+/**
+ * Extracts trigger and content from children
+ */
+
+function childrenToTriggerAndContent(children) {
+  const childrenArray = React.Children.toArray(children);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (childrenArray.length !== 1 && childrenArray.length !== 2) {
+      // eslint-disable-next-line no-console
+      console.warn('Dialog must contain at least one child <DialogSurface/>,\n' + 'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)');
+    }
+  }
+
+  switch (childrenArray.length) {
+    // case where there's a trigger followed by content
+    case 2:
+      return childrenArray;
+    // case where there's only content
+
+    case 1:
+      return [undefined, childrenArray[0]];
+    // unknown case
+
+    default:
+      return [undefined, undefined];
+  }
+}
+/**
+ * Checks is click event is a proper Overlay click dismiss
+ */
+
+
+function isOverlayClickDismiss(event, type) {
+  const isDefaultPrevented = normalizeDefaultPrevented(event);
+  return type === 'modal' && !isDefaultPrevented();
+}
+/**
+ * Focus first element on content when dialog is opened,
+ * in case there's no focusable element, then a eventlistener is added to document
+ * to ensure Escape keydown functionality
+ */
+
+
+function useFocusFirstElement({
+  open,
+  requestOpenChange,
+  modalType
+}) {
+  const {
+    findFirstFocusable
+  } = useFocusFinders();
+  const {
+    targetDocument
+  } = useFluent_unstable();
+  const contentRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const element = contentRef.current && findFirstFocusable(contentRef.current);
+
+    if (element) {
+      element.focus(); // NOTE: if it's non-modal global listener to escape is necessary
+
+      if (modalType !== 'non-modal') {
+        return;
+      }
+    } else {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn('A Dialog should have at least one focusable element inside DialogSurface');
+      }
+    }
+
+    if (triggerRef.current && targetDocument) {
+      const trigger = triggerRef.current; // if the trigger is still the active element, the default behavior is to return focus to document.body,
+      // which can be achived by blurring
+
+      if (targetDocument.activeElement === trigger) {
+        trigger.blur();
+      }
+
+      const listener = event => {
+        if (isEscapeKeyDismiss(event, modalType)) {
+          requestOpenChange({
+            event,
+            open: false,
+            type: 'documentEscapeKeyDown'
+          });
+          trigger.focus();
+          event.stopImmediatePropagation();
+        }
+      };
+
+      targetDocument.addEventListener('keydown', listener, {
+        passive: false
+      });
+      return () => {
+        targetDocument.removeEventListener('keydown', listener);
+      };
+    }
+  }, [findFirstFocusable, requestOpenChange, open, modalType, targetDocument]);
+  return {
+    contentRef,
+    triggerRef
+  };
+}
+//# sourceMappingURL=useDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Dialog/useDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand, useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { normalizeDefaultPrevented, isEscapeKeyDismiss } from '../../utils';\n\nimport type { DialogProps, DialogState, DialogModalType, DialogOpenChangeData } from './Dialog.types';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n  const { children, overlay, modalType = 'modal', onOpenChange } = props;\n\n  const [trigger, content] = childrenToTriggerAndContent(children);\n\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const overlayShorthand = resolveShorthand(overlay, {\n    required: modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n  });\n\n  const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n    const isDefaultPrevented = normalizeDefaultPrevented(data.event);\n\n    if (onOpenChange) {\n      onOpenChange(data.event, data);\n    }\n\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!isDefaultPrevented()) {\n      (triggerRef as React.MutableRefObject<HTMLElement | null>).current =\n        !open && data.open ? (data.event.currentTarget as HTMLElement) : null;\n      setOpen(data.open);\n    }\n  });\n\n  const { contentRef, triggerRef } = useFocusFirstElement({\n    open,\n    modalType,\n    requestOpenChange,\n  });\n\n  const handleOverLayClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    overlayShorthand?.onClick?.(event);\n    if (isOverlayClickDismiss(event, modalType)) {\n      requestOpenChange({ event, open: false, type: 'overlayClick' });\n    }\n  });\n\n  return {\n    components: {\n      overlay: 'div',\n    },\n    overlay: overlayShorthand && {\n      ...overlayShorthand,\n      onClick: handleOverLayClick,\n    },\n    open,\n    modalType,\n    content,\n    trigger,\n    triggerRef,\n    contentRef,\n    requestOpenChange,\n    dialogBodyID: useId('dialog-body-'),\n    dialogTitleID: useId('dialog-title-'),\n  };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n  children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n  const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'Dialog must contain at least one child <DialogSurface/>,\\n' +\n          'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)',\n      );\n    }\n  }\n  switch (childrenArray.length) {\n    // case where there's a trigger followed by content\n    case 2:\n      return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n    // case where there's only content\n    case 1:\n      return [undefined, childrenArray[0]];\n    // unknown case\n    default:\n      return [undefined, undefined];\n  }\n}\n\n/**\n * Checks is click event is a proper Overlay click dismiss\n */\nfunction isOverlayClickDismiss(event: React.MouseEvent, type: DialogModalType): boolean {\n  const isDefaultPrevented = normalizeDefaultPrevented(event);\n  return type === 'modal' && !isDefaultPrevented();\n}\n\n/**\n * Focus first element on content when dialog is opened,\n * in case there's no focusable element, then a eventlistener is added to document\n * to ensure Escape keydown functionality\n */\nfunction useFocusFirstElement({\n  open,\n  requestOpenChange,\n  modalType,\n}: Pick<DialogState, 'open' | 'requestOpenChange' | 'modalType'>) {\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent_unstable();\n  const contentRef = React.useRef<HTMLElement>(null);\n  const triggerRef = React.useRef<HTMLElement>(null);\n\n  React.useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const element = contentRef.current && findFirstFocusable(contentRef.current);\n    if (element) {\n      element.focus();\n      // NOTE: if it's non-modal global listener to escape is necessary\n      if (modalType !== 'non-modal') {\n        return;\n      }\n    } else {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn('A Dialog should have at least one focusable element inside DialogSurface');\n      }\n    }\n\n    if (triggerRef.current && targetDocument) {\n      const trigger = triggerRef.current;\n      // if the trigger is still the active element, the default behavior is to return focus to document.body,\n      // which can be achived by blurring\n      if (targetDocument.activeElement === trigger) {\n        trigger.blur();\n      }\n      const listener = (event: KeyboardEvent) => {\n        if (isEscapeKeyDismiss(event, modalType)) {\n          requestOpenChange({\n            event,\n            open: false,\n            type: 'documentEscapeKeyDown',\n          });\n          trigger.focus();\n          event.stopImmediatePropagation();\n        }\n      };\n      targetDocument.addEventListener('keydown', listener, { passive: false });\n      return () => {\n        targetDocument.removeEventListener('keydown', listener);\n      };\n    }\n  }, [findFirstFocusable, requestOpenChange, open, modalType, targetDocument]);\n\n  return { contentRef, triggerRef };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/Dialog/useDialogContextValues.js

@@ -0,0 +1,31 @@
+export function useDialogContextValues_unstable(state) {
+  const {
+    modalType,
+    open,
+    triggerRef,
+    contentRef,
+    dialogBodyID,
+    dialogTitleID,
+    requestOpenChange
+  } = state;
+  /**
+   * This context is created with "@fluentui/react-context-selector",
+   * there is no sense to memoize it
+   */
+
+  const dialog = {
+    open,
+    modalType,
+    triggerRef,
+    contentRef,
+    dialogBodyID,
+    dialogTitleID,
+    requestOpenChange
+  };
+  const dialogSurface = false;
+  return {
+    dialog,
+    dialogSurface
+  };
+}
+//# sourceMappingURL=useDialogContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Dialog/useDialogContextValues.ts"],"names":[],"mappings":"AAGA,OAAM,SAAU,+BAAV,CAA0C,KAA1C,EAA4D;EAChE,MAAM;IAAE,SAAF;IAAa,IAAb;IAAmB,UAAnB;IAA+B,UAA/B;IAA2C,YAA3C;IAAyD,aAAzD;IAAwE;EAAxE,IAA8F,KAApG;EAEA;;;AAGG;;EACH,MAAM,MAAM,GAAuB;IACjC,IADiC;IAEjC,SAFiC;IAGjC,UAHiC;IAIjC,UAJiC;IAKjC,YALiC;IAMjC,aANiC;IAOjC;EAPiC,CAAnC;EAUA,MAAM,aAAa,GAA8B,KAAjD;EAEA,OAAO;IAAE,MAAF;IAAU;EAAV,CAAP;AACD","sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n  const { modalType, open, triggerRef, contentRef, dialogBodyID, dialogTitleID, requestOpenChange } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const dialog: DialogContextValue = {\n    open,\n    modalType,\n    triggerRef,\n    contentRef,\n    dialogBodyID,\n    dialogTitleID,\n    requestOpenChange,\n  };\n\n  const dialogSurface: DialogSurfaceContextValue = false;\n\n  return { dialog, dialogSurface };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/Dialog/useDialogStyles.js

@@ -0,0 +1,41 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { useHasParentContext } from '@fluentui/react-context-selector';
+import { DialogContext } from '../../contexts/dialogContext';
+export const dialogClassNames = {
+  overlay: 'fui-Dialog__overlay'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "overlay": {
+    "qhf8xq": "f19dog8a",
+    "De3pzq": "fju19wo",
+    "Bhzewxz": "f113wtx2",
+    "j35jbq": ["f10k790i", "f1xynx9j"],
+    "B5kzvoi": "f5gq2j6",
+    "oyh7mz": ["f1xynx9j", "f10k790i"]
+  },
+  "nestedDialogOverlay": {
+    "De3pzq": "f3rmtva"
+  }
+}, {
+  "d": [".f19dog8a{position:fixed;}", ".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;}"]
+});
+/**
+ * Apply styling to the Dialog slots based on the state
+ */
+
+
+export const useDialogStyles_unstable = state => {
+  const styles = useStyles();
+  const isNestedDialog = useHasParentContext(DialogContext);
+
+  if (state.overlay) {
+    state.overlay.className = mergeClasses(dialogClassNames.overlay, styles.overlay, isNestedDialog && styles.nestedDialogOverlay, state.overlay.className);
+  }
+
+  return state;
+};
+//# sourceMappingURL=useDialogStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Dialog/useDialogStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,mBAAT,QAAoC,kCAApC;AACA,SAAS,aAAT,QAA8B,8BAA9B;AAGA,OAAO,MAAM,gBAAgB,GAAgC;EAC3D,OAAO,EAAE;AADkD,CAAtD;AAGP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;EAC1E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,cAAc,GAAG,mBAAmB,CAAC,aAAD,CAA1C;;EAEA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CACpC,gBAAgB,CAAC,OADmB,EAEpC,MAAM,CAAC,OAF6B,EAGpC,cAAc,IAAI,MAAM,CAAC,mBAHW,EAIpC,KAAK,CAAC,OAAN,CAAc,SAJsB,CAAtC;EAMD;;EAED,OAAO,KAAP;AACD,CAdM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { DialogContext } from '../../contexts/dialogContext';\nimport type { DialogSlots, DialogState } from './Dialog.types';\n\nexport const dialogClassNames: SlotClassNames<DialogSlots> = {\n  overlay: 'fui-Dialog__overlay',\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  overlay: {\n    position: 'fixed',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    ...shorthands.inset('0px'),\n  },\n  nestedDialogOverlay: {\n    backgroundColor: 'transparent',\n  },\n});\n\n/**\n * Apply styling to the Dialog slots based on the state\n */\nexport const useDialogStyles_unstable = (state: DialogState): DialogState => {\n  const styles = useStyles();\n  const isNestedDialog = useHasParentContext(DialogContext);\n\n  if (state.overlay) {\n    state.overlay.className = mergeClasses(\n      dialogClassNames.overlay,\n      styles.overlay,\n      isNestedDialog && styles.nestedDialogOverlay,\n      state.overlay.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogActions/DialogActions.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useDialogActions_unstable } from './useDialogActions';
+import { renderDialogActions_unstable } from './renderDialogActions';
+import { useDialogActionsStyles_unstable } from './useDialogActionsStyles';
+/**
+ * `DialogActions` is a container for the actions of the dialog.
+ * Apart from styling, this component does not have other behavior.
+ */
+
+export const DialogActions = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDialogActions_unstable(props, ref);
+  useDialogActionsStyles_unstable(state);
+  return renderDialogActions_unstable(state);
+});
+DialogActions.displayName = 'DialogActions';
+//# sourceMappingURL=DialogActions.js.map

package/lib/components/DialogActions/DialogActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogActions/DialogActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AAIA;;;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;EAEA,+BAA+B,CAAC,KAAD,CAA/B;EACA,OAAO,4BAA4B,CAAC,KAAD,CAAnC;AACD,CALqE,CAA/D;AAOP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles';\nimport type { DialogActionsProps } from './DialogActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions: ForwardRefComponent<DialogActionsProps> = React.forwardRef((props, ref) => {\n  const state = useDialogActions_unstable(props, ref);\n\n  useDialogActionsStyles_unstable(state);\n  return renderDialogActions_unstable(state);\n});\n\nDialogActions.displayName = 'DialogActions';\n"],"sourceRoot":"../src/"}

package/lib/components/DialogActions/DialogActions.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogActions.types.js","sourceRoot":"../src/","sources":["components/DialogActions/DialogActions.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogActionsSlots = {\n  root: Slot<'div'>;\n};\n\nexport type DialogActionsPosition = 'start' | 'end';\n\n/**\n * DialogActions Props\n */\nexport type DialogActionsProps = ComponentProps<DialogActionsSlots> & {\n  /**\n   * defines the position on the dialog grid of the actions\n   * @default 'end'\n   */\n  position?: DialogActionsPosition;\n};\n\n/**\n * State used in rendering DialogActions\n */\nexport type DialogActionsState = ComponentState<DialogActionsSlots> & {\n  position: DialogActionsPosition;\n};\n"]}

package/lib/components/DialogActions/index.js

@@ -0,0 +1,6 @@
+export * from './DialogActions';
+export * from './DialogActions.types';
+export * from './renderDialogActions';
+export * from './useDialogActions';
+export * from './useDialogActionsStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DialogActions/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 './DialogActions';\nexport * from './DialogActions.types';\nexport * from './renderDialogActions';\nexport * from './useDialogActions';\nexport * from './useDialogActionsStyles';\n"]}

package/lib/components/DialogActions/renderDialogActions.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of DialogActions
+ */
+
+export const renderDialogActions_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state); // TODO Add additional slots in the appropriate place
+
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
+};
+//# sourceMappingURL=renderDialogActions.js.map

package/lib/components/DialogActions/renderDialogActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogActions/renderDialogActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA8B;EACxE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAqB,KAArB,CAArC,CADwE,CAGxE;;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';\n\n/**\n * Render the final JSX of DialogActions\n */\nexport const renderDialogActions_unstable = (state: DialogActionsState) => {\n  const { slots, slotProps } = getSlots<DialogActionsSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogActions/useDialogActions.js

@@ -0,0 +1,27 @@
+import { getNativeElementProps } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render DialogActions.
+ *
+ * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,
+ * before being passed to renderDialogActions_unstable.
+ *
+ * @param props - props from this instance of DialogActions
+ * @param ref - reference to root HTMLElement of DialogActions
+ */
+
+export const useDialogActions_unstable = (props, ref) => {
+  const {
+    position = 'end'
+  } = props;
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    position
+  };
+};
+//# sourceMappingURL=useDialogActions.js.map

package/lib/components/DialogActions/useDialogActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogActions/useDialogActions.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM;IAAE,QAAQ,GAAG;EAAb,IAAuB,KAA7B;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CAJtB;IAQL;EARK,CAAP;AAUD,CAfM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n  props: DialogActionsProps,\n  ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n  const { position = 'end' } = props;\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    position,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogActions/useDialogActionsStyles.js

@@ -0,0 +1,51 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { DIALOG_GAP, ACTIONS_END_GRID_AREA, ACTIONS_START_GRID_AREA, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
+import * as localShorthands from '../../utils/localShorthands';
+export const dialogActionsClassNames = {
+  root: 'fui-DialogActions'
+};
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bqenvij": "f3052tw",
+    "B7ck84d": "f1ewtqcl",
+    "mc9l5x": "f22iagw",
+    "i8kkvl": "f4px1ci",
+    "Belr9w4": "fn67r4l",
+    "Bnr8eeb": "f12ep7o",
+    "Bmdcpmo": "f6glcwc",
+    "th9wkt": "f1e3st1r"
+  },
+  "gridPositionEnd": {
+    "Bdqf98w": "f1a7i8kp",
+    "Ijaq50": "f11u0jfc",
+    "nk6f5a": "f23awfp",
+    "Br312pm": "f1d6tb1o",
+    "Bw0ie65": "fiappcv"
+  },
+  "gridPositionStart": {
+    "Bdqf98w": "fsxvdwy",
+    "Ijaq50": "f1vnb230",
+    "nk6f5a": "f13d374e",
+    "Br312pm": "f14781pt",
+    "Bw0ie65": "f1fjo411"
+  }
+}, {
+  "d": [".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f12ep7o>.fui-Button{max-width:100%;}", ".f1a7i8kp{justify-self:end;}", ".f11u0jfc{grid-row-start:actions-end;}", ".f23awfp{grid-row-end:actions-end;}", ".f1d6tb1o{grid-column-start:actions-end;}", ".fiappcv{grid-column-end:actions-end;}", ".fsxvdwy{justify-self:start;}", ".f1vnb230{grid-row-start:actions-start;}", ".f13d374e{grid-row-end:actions-start;}", ".f14781pt{grid-column-start:actions-start;}", ".f1fjo411{grid-column-end:actions-start;}"],
+  "m": [["@media screen and (max-width: 480px){.f6glcwc{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}", {
+    "m": "screen and (max-width: 480px)"
+  }], ["@media screen and (max-width: 480px){.f1e3st1r{justify-self:stretch;}}", {
+    "m": "screen and (max-width: 480px)"
+  }]]
+});
+/**
+ * Apply styling to the DialogActions slots based on the state
+ */
+
+
+export const useDialogActionsStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useDialogActionsStyles.js.map

package/lib/components/DialogActions/useDialogActionsStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogActions/useDialogActionsStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,SACE,UADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,+BAJF,QAKO,0BALP;AAMA,OAAO,KAAK,eAAZ,MAAiC,6BAAjC;AAEA,OAAO,MAAM,uBAAuB,GAAuC;EACzE,IAAI,EAAE;AADmE,CAApE;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAwBA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,uBAAuB,CAAC,IADS,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,KAAmB,OAAnB,IAA8B,MAAM,CAAC,iBAHJ,EAIjC,KAAK,CAAC,QAAN,KAAmB,KAAnB,IAA4B,MAAM,CAAC,eAJF,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAVM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n  DIALOG_GAP,\n  ACTIONS_END_GRID_AREA,\n  ACTIONS_START_GRID_AREA,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n} from '../../contexts/constants';\nimport * as localShorthands from '../../utils/localShorthands';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n  root: 'fui-DialogActions',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    height: 'fit-content',\n    boxSizing: 'border-box',\n    display: 'flex',\n    ...shorthands.gap(DIALOG_GAP),\n    '> .fui-Button': {\n      maxWidth: '100%',\n    },\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      flexDirection: 'column',\n      justifySelf: 'stretch',\n    },\n  },\n  gridPositionEnd: {\n    justifySelf: 'end',\n    ...localShorthands.gridArea(ACTIONS_END_GRID_AREA),\n  },\n  gridPositionStart: {\n    justifySelf: 'start',\n    ...localShorthands.gridArea(ACTIONS_START_GRID_AREA),\n  },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    dialogActionsClassNames.root,\n    styles.root,\n    state.position === 'start' && styles.gridPositionStart,\n    state.position === 'end' && styles.gridPositionEnd,\n    state.root.className,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogBody/DialogBody.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useDialogBody_unstable } from './useDialogBody';
+import { renderDialogBody_unstable } from './renderDialogBody';
+import { useDialogBodyStyles_unstable } from './useDialogBodyStyles';
+/**
+ * The `DialogBody` is a container where the content of the dialog is rendered.
+ * Apart from styling, this component does not have other behavior.
+ */
+
+export const DialogBody = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDialogBody_unstable(props, ref);
+  useDialogBodyStyles_unstable(state);
+  return renderDialogBody_unstable(state);
+});
+DialogBody.displayName = 'DialogBody';
+//# sourceMappingURL=DialogBody.js.map

package/lib/components/DialogBody/DialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogBody/DialogBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;;AAGG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;EAEA,4BAA4B,CAAC,KAAD,CAA5B;EACA,OAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles';\nimport type { DialogBodyProps } from './DialogBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody: ForwardRefComponent<DialogBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDialogBody_unstable(props, ref);\n\n  useDialogBodyStyles_unstable(state);\n  return renderDialogBody_unstable(state);\n});\n\nDialogBody.displayName = 'DialogBody';\n"],"sourceRoot":"../src/"}

package/lib/components/DialogBody/DialogBody.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBody.types.js","sourceRoot":"../src/","sources":["components/DialogBody/DialogBody.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogBodySlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * DialogBody Props\n */\nexport type DialogBodyProps = ComponentProps<DialogBodySlots> & {};\n\n/**\n * State used in rendering DialogBody\n */\nexport type DialogBodyState = ComponentState<DialogBodySlots>;\n"]}

package/lib/components/DialogBody/index.js

@@ -0,0 +1,6 @@
+export * from './DialogBody';
+export * from './DialogBody.types';
+export * from './renderDialogBody';
+export * from './useDialogBody';
+export * from './useDialogBodyStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DialogBody/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './DialogBody';\nexport * from './DialogBody.types';\nexport * from './renderDialogBody';\nexport * from './useDialogBody';\nexport * from './useDialogBodyStyles';\n"]}

package/lib/components/DialogBody/renderDialogBody.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of DialogBody
+ */
+
+export const renderDialogBody_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state); // TODO Add additional slots in the appropriate place
+
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
+};
+//# sourceMappingURL=renderDialogBody.js.map

package/lib/components/DialogBody/renderDialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogBody/renderDialogBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAkB,KAAlB,CAArC,CADkE,CAGlE;;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState) => {\n  const { slots, slotProps } = getSlots<DialogBodySlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogBody/useDialogBody.js

@@ -0,0 +1,25 @@
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import { useDialogContext_unstable } from '../../contexts';
+/**
+ * Create the state required to render DialogBody.
+ *
+ * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,
+ * before being passed to renderDialogBody_unstable.
+ *
+ * @param props - props from this instance of DialogBody
+ * @param ref - reference to root HTMLElement of DialogBody
+ */
+
+export const useDialogBody_unstable = (props, ref) => {
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      id: useDialogContext_unstable(ctx => ctx.dialogBodyID),
+      ...props
+    })
+  };
+};
+//# sourceMappingURL=useDialogBody.js.map

package/lib/components/DialogBody/useDialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogBody/useDialogBody.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,yBAAT,QAA0C,gBAA1C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,EAAE,EAAE,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,YAAZ,CAFI;MAGjC,GAAG;IAH8B,CAAR;EAJtB,CAAP;AAUD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogBodyProps, DialogBodyState } from './DialogBody.types';\nimport { useDialogContext_unstable } from '../../contexts';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HTMLElement>): DialogBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      id: useDialogContext_unstable(ctx => ctx.dialogBodyID),\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogBody/useDialogBodyStyles.js

@@ -0,0 +1,42 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { typographyStyles } from '@fluentui/react-theme';
+import * as localShorthands from '../../utils/localShorthands';
+import { BODY_GRID_AREA } from '../../contexts/constants';
+export const dialogBodyClassNames = {
+  root: 'fui-DialogBody'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "a9b677": "fly5x3f",
+    "Bqenvij": "f3052tw",
+    "sshi5w": "f1nxs5xn",
+    "B7ck84d": "f1ewtqcl",
+    "Ijaq50": "f6owso0",
+    "nk6f5a": "foucsne",
+    "Br312pm": "fupswjn",
+    "Bw0ie65": "f1ka72gx",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "f1i3iumi"
+  }
+}, {
+  "d": [".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f6owso0{grid-row-start:body;}", ".foucsne{grid-row-end:body;}", ".fupswjn{grid-column-start: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 DialogBody slots based on the state
+ */
+
+
+export const useDialogBodyStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className); // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};
+//# sourceMappingURL=useDialogBodyStyles.js.map

package/lib/components/DialogBody/useDialogBodyStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogBody/useDialogBodyStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AACA,OAAO,KAAK,eAAZ,MAAiC,6BAAjC;AACA,SAAS,cAAT,QAA+B,0BAA/B;AAEA,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE;AAD6D,CAA9D;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC,CAFsF,CAItF;EACA;;EAEA,OAAO,KAAP;AACD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport * as localShorthands from '../../utils/localShorthands';\nimport { BODY_GRID_AREA } from '../../contexts/constants';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n  root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    height: 'fit-content',\n    minHeight: '32px',\n    boxSizing: 'border-box',\n    ...localShorthands.gridArea(BODY_GRID_AREA),\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogBodyClassNames.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/"}

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