@fluentui/react-dialog 9.0.0-beta.10

package/dist/index.d.ts

@@ -0,0 +1,451 @@
+/// <reference types="react" />
+
+import { ARIAButtonResultProps } from '@fluentui/react-aria';
+import { ARIAButtonType } from '@fluentui/react-aria';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { FluentTriggerComponent } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { JSXElementConstructor } from 'react';
+import * as React_2 from 'react';
+import { ReactElement } from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.
+ * It provides context down the hierarchy to `children` compound components to allow functionality.
+ * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`
+ * and a `DialogSurface` (or some component that will eventually render one of those compound components)
+ * in this specific order
+ */
+export declare const Dialog: React_2.FC<DialogProps>;
+
+/**
+ * `DialogActions` is a container for the actions of the dialog.
+ * Apart from styling, this component does not have other behavior.
+ */
+export declare const DialogActions: ForwardRefComponent<DialogActionsProps>;
+
+export declare const dialogActionsClassNames: SlotClassNames<DialogActionsSlots>;
+
+export declare type DialogActionsPosition = 'start' | 'end';
+
+/**
+ * DialogActions Props
+ */
+export declare type DialogActionsProps = ComponentProps<DialogActionsSlots> & {
+    /**
+     * defines the position on the dialog grid of the actions
+     * @default 'end'
+     */
+    position?: DialogActionsPosition;
+};
+
+export declare type DialogActionsSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering DialogActions
+ */
+export declare type DialogActionsState = ComponentState<DialogActionsSlots> & {
+    position: DialogActionsPosition;
+};
+
+/**
+ * The `DialogBody` is a container where the content of the dialog is rendered.
+ * Apart from styling, this component does not have other behavior.
+ */
+export declare const DialogBody: ForwardRefComponent<DialogBodyProps>;
+
+export declare const dialogBodyClassNames: SlotClassNames<DialogBodySlots>;
+
+/**
+ * DialogBody Props
+ */
+export declare type DialogBodyProps = ComponentProps<DialogBodySlots> & {};
+
+export declare type DialogBodySlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering DialogBody
+ */
+export declare type DialogBodyState = ComponentState<DialogBodySlots>;
+
+/**
+ * The `DialogContent` is a container where the content of the dialog is rendered.
+ * Apart from styling, this component does not have other behavior.
+ */
+export declare const DialogContent: ForwardRefComponent<DialogContentProps>;
+
+export declare const dialogContentClassNames: SlotClassNames<DialogContentSlots>;
+
+/**
+ * DialogContent Props
+ */
+export declare type DialogContentProps = ComponentProps<DialogContentSlots>;
+
+export declare type DialogContentSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering DialogContent
+ */
+export declare type DialogContentState = ComponentState<DialogContentSlots>;
+
+declare type DialogContextValue = {
+    open: boolean;
+    dialogContentId?: string;
+    dialogTitleId?: string;
+    isNestedDialog: boolean;
+    dialogRef: React_2.Ref<DialogSurfaceElement>;
+    modalType: DialogModalType;
+    /**
+     * Requests dialog main component to update it's internal open state
+     */
+    requestOpenChange: (data: DialogOpenChangeData) => void;
+};
+
+declare type DialogContextValues = {
+    dialog: DialogContextValue;
+    /**
+     * dialogSurface context is provided by Dialog as false
+     * to ensure components inside Dialog but outside DialogSurface will consume this as false
+     */
+    dialogSurface: DialogSurfaceContextValue;
+};
+
+declare type DialogModalType = 'modal' | 'non-modal' | 'alert';
+
+export declare type DialogOpenChangeData = {
+    /**
+     * triggered when Escape key is pressed in a native `dialog`
+     */
+    type: 'dialogCancel';
+    open: boolean;
+    event: React_2.SyntheticEvent<DialogSurfaceElement>;
+} | {
+    type: 'escapeKeyDown';
+    open: boolean;
+    event: React_2.KeyboardEvent<DialogSurfaceElement>;
+} | {
+    type: 'backdropClick';
+    open: boolean;
+    event: React_2.MouseEvent<DialogSurfaceElement>;
+} | {
+    type: 'triggerClick';
+    open: boolean;
+    event: React_2.MouseEvent<DialogSurfaceElement>;
+};
+
+export declare type DialogOpenChangeEvent = DialogOpenChangeData['event'];
+
+/**
+ * Callback fired when the component changes value from open state.
+ *
+ * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`
+ * @param data - A data object with relevant information, such as open value and type
+ */
+export declare type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;
+
+export declare type DialogProps = ComponentProps<Partial<DialogSlots>> & {
+    /**
+     * Dialog variations.
+     *
+     * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.
+     * The tab sequence is kept within the dialog and moving the focus outside
+     * the dialog will imply closing it. This is the default type of the component.
+     *
+     * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out
+     * and users can interact with the rest of the page.
+     * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.
+     *
+     * `alert`: is a special type of modal dialogs that interrupts the user's workflow
+     * to communicate an important message or ask for a decision.
+     * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,
+     * and it cannot be dismissed through the dimmed background or escape key.
+     *
+     * @default modal
+     */
+    modalType?: DialogModalType;
+    /**
+     * Controls the open state of the dialog
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Default value for the uncontrolled open state of the dialog.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: DialogOpenChangeEventHandler;
+    /**
+     * Can contain two children including {@link DialogTrigger} and {@link DialogSurface}.
+     * Alternatively can only contain {@link DialogSurface} if using trigger outside dialog, or controlling state.
+     */
+    children: [JSX.Element, JSX.Element] | JSX.Element;
+};
+
+export declare type DialogSlots = {};
+
+export declare type DialogState = ComponentState<DialogSlots> & DialogContextValue & {
+    content: React_2.ReactNode;
+    trigger: React_2.ReactNode;
+};
+
+/**
+ * DialogSurface component represents the visual part of a `Dialog` as a whole,
+ * it contains everything that should be visible.
+ */
+export declare const DialogSurface: ForwardRefComponent<DialogSurfaceProps>;
+
+export declare const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots>;
+
+declare type DialogSurfaceContextValue = boolean;
+
+declare type DialogSurfaceContextValues = {
+    dialogSurface: DialogSurfaceContextValue;
+};
+
+/**
+ * Union between all possible semantic element that represent a DialogSurface
+ */
+export declare type DialogSurfaceElement = HTMLDialogElement | HTMLDivElement;
+
+/**
+ * DialogSurface Props
+ *
+ * Omits basic types from native `dialog` (`open`, `onCancel` and `onClose`)
+ * to ensure `onOpenChange`, `open` and `defaultOpen` from `Dialog` is used instead
+ */
+export declare type DialogSurfaceProps = Omit<ComponentProps<DialogSurfaceSlots>, 'open' | 'onCancel' | 'onClose'>;
+
+export declare type DialogSurfaceSlots = {
+    /**
+     * Dimmed background of dialog.
+     * The default backdrop is rendered as a `<div>` with styling.
+     * This slot expects a `<div>` element which will replace the default backdrop.
+     * The backdrop should have `aria-hidden="true"`.
+     *
+     * By default if `DialogSurface` is `<dialog>` element the backdrop is ignored,
+     * since native `<dialog>` element supports [::backdrop](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)
+     */
+    backdrop?: Slot<'div'>;
+    root: NonNullable<Slot<'dialog', 'div'>>;
+};
+
+/**
+ * State used in rendering DialogSurface
+ */
+export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;
+
+/**
+ * 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 declare const DialogTitle: ForwardRefComponent<DialogTitleProps>;
+
+export declare const dialogTitleClassNames: SlotClassNames<DialogTitleSlots>;
+
+/**
+ * DialogTitle Props
+ */
+export declare type DialogTitleProps = ComponentProps<DialogTitleSlots> & {};
+
+export declare type DialogTitleSlots = {
+    /**
+     * By default this is a div, but can be a heading.
+     */
+    root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+    /**
+     * By default a Dialog with modalType='non-modal' will have a close button action
+     */
+    action?: Slot<'div'>;
+};
+
+/**
+ * State used in rendering DialogTitle
+ */
+export declare type DialogTitleState = ComponentState<DialogTitleSlots>;
+
+/**
+ * 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 declare const DialogTrigger: React_2.FC<DialogTriggerProps> & FluentTriggerComponent;
+
+export declare type DialogTriggerAction = 'open' | 'close';
+
+/**
+ * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog
+ */
+export declare type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
+    ref: React_2.Ref<unknown>;
+    'aria-haspopup'?: 'dialog';
+}>;
+
+export declare type DialogTriggerProps = {
+    /**
+     * Explicitly declare if the trigger is responsible for opening or
+     * closing a Dialog visibility state.
+     * @default 'open' // if it's outside DialogSurface
+     * @default 'close' // if it's inside DialogSurface
+     */
+    action?: DialogTriggerAction;
+    /**
+     * Explicitly require single child or render function
+     * to inject properties
+     */
+    children: React_2.ReactElement | ((props: DialogTriggerChildProps) => React_2.ReactElement | null);
+};
+
+export declare type DialogTriggerState = {
+    children: React_2.ReactElement | null;
+};
+
+/**
+ * Render the final JSX of Dialog
+ */
+export declare const renderDialog_unstable: (state: DialogState, contextValues: DialogContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of DialogActions
+ */
+export declare const renderDialogActions_unstable: (state: DialogActionsState) => JSX.Element;
+
+/**
+ * Render the final JSX of DialogBody
+ */
+export declare const renderDialogBody_unstable: (state: DialogBodyState) => JSX.Element;
+
+/**
+ * Render the final JSX of DialogContent
+ */
+export declare const renderDialogContent_unstable: (state: DialogContentState) => JSX.Element;
+
+/**
+ * Render the final JSX of DialogSurface
+ */
+export declare const renderDialogSurface_unstable: (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of DialogTitle
+ */
+export declare const renderDialogTitle_unstable: (state: DialogTitleState) => JSX.Element;
+
+/**
+ * Render the final JSX of MenuTrigger
+ *
+ * Only renders children
+ */
+export declare const renderDialogTrigger_unstable: (state: DialogTriggerState) => ReactElement<any, string | JSXElementConstructor<any>> | null;
+
+/**
+ * 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 declare const useDialog_unstable: (props: DialogProps) => DialogState;
+
+/**
+ * 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 declare const useDialogActions_unstable: (props: DialogActionsProps, ref: React_2.Ref<HTMLElement>) => DialogActionsState;
+
+/**
+ * Apply styling to the DialogActions slots based on the state
+ */
+export declare const useDialogActionsStyles_unstable: (state: DialogActionsState) => DialogActionsState;
+
+/**
+ * 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 declare const useDialogBody_unstable: (props: DialogBodyProps, ref: React_2.Ref<HTMLElement>) => DialogBodyState;
+
+/**
+ * Apply styling to the DialogBody slots based on the state
+ */
+export declare const useDialogBodyStyles_unstable: (state: DialogBodyState) => DialogBodyState;
+
+/**
+ * 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 declare const useDialogContent_unstable: (props: DialogContentProps, ref: React_2.Ref<HTMLElement>) => DialogContentState;
+
+/**
+ * Apply styling to the DialogContent slots based on the state
+ */
+export declare const useDialogContentStyles_unstable: (state: DialogContentState) => DialogContentState;
+
+/**
+ * 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 declare const useDialogSurface_unstable: (props: DialogSurfaceProps, ref: React_2.Ref<DialogSurfaceElement>) => DialogSurfaceState;
+
+/**
+ * Apply styling to the DialogSurface slots based on the state
+ */
+export declare const useDialogSurfaceStyles_unstable: (state: DialogSurfaceState) => DialogSurfaceState;
+
+/**
+ * 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 declare const useDialogTitle_unstable: (props: DialogTitleProps, ref: React_2.Ref<HTMLElement>) => DialogTitleState;
+
+/**
+ * Apply styling to the DialogTitle slots based on the state
+ */
+export declare const useDialogTitleStyles_unstable: (state: DialogTitleState) => DialogTitleState;
+
+/**
+ * Create the state required to render DialogTrigger.
+ * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog
+ *
+ * @param props - props from this instance of DialogTrigger
+ */
+export declare const useDialogTrigger_unstable: (props: DialogTriggerProps) => DialogTriggerState;
+
+export { }

package/lib/Dialog.js

@@ -0,0 +1,2 @@
+export * from './components/Dialog/index';
+//# sourceMappingURL=Dialog.js.map

package/lib/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/Dialog.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Dialog/index';\n"]}

package/lib/DialogActions.js

@@ -0,0 +1,2 @@
+export * from './components/DialogActions/index';
+//# sourceMappingURL=DialogActions.js.map

package/lib/DialogActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogActions.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogActions.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogActions/index';\n"]}

package/lib/DialogBody.js

@@ -0,0 +1,2 @@
+export * from './components/DialogBody/index';
+//# sourceMappingURL=DialogBody.js.map

package/lib/DialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBody.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogBody.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/DialogBody/index';\n"]}

package/lib/DialogContent.js

@@ -0,0 +1,2 @@
+export * from './components/DialogContent/index';
+//# sourceMappingURL=DialogContent.js.map

package/lib/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogContent.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogContent/index';\n"]}

package/lib/DialogSurface.js

@@ -0,0 +1,2 @@
+export * from './components/DialogSurface/index';
+//# sourceMappingURL=DialogSurface.js.map

package/lib/DialogSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogSurface.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogSurface.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogSurface/index';\n"]}

package/lib/DialogTitle.js

@@ -0,0 +1,2 @@
+export * from './components/DialogTitle/index';
+//# sourceMappingURL=DialogTitle.js.map

package/lib/DialogTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTitle.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogTitle.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/DialogTitle/index';\n"]}

package/lib/DialogTrigger.js

@@ -0,0 +1,2 @@
+export * from './components/DialogTrigger/index';
+//# sourceMappingURL=DialogTrigger.js.map

package/lib/DialogTrigger.js.map

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

package/lib/components/Dialog/Dialog.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useDialog_unstable } from './useDialog';
+import { renderDialog_unstable } from './renderDialog';
+import { useDialogContextValues_unstable } from './useDialogContextValues';
+/**
+ * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.
+ * It provides context down the hierarchy to `children` compound components to allow functionality.
+ * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`
+ * and a `DialogSurface` (or some component that will eventually render one of those compound components)
+ * in this specific order
+ */
+
+export const Dialog = /*#__PURE__*/React.memo(props => {
+  const state = useDialog_unstable(props);
+  const contextValues = useDialogContextValues_unstable(state);
+  return renderDialog_unstable(state, contextValues);
+});
+Dialog.displayName = 'Dialog';
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAEA,SAAS,+BAAT,QAAgD,0BAAhD;AAEA;;;;;;AAMG;;AACH,OAAO,MAAM,MAAM,gBAA0B,KAAK,CAAC,IAAN,CAAW,KAAK,IAAG;EAC9D,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,CAAhC;EACA,MAAM,aAAa,GAAG,+BAA+B,CAAC,KAAD,CAArD;EAEA,OAAO,qBAAqB,CAAC,KAAD,EAAQ,aAAR,CAA5B;AACD,CAL4C,CAAtC;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport type { DialogProps } from './Dialog.types';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n\n/**\n * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.\n * It provides context down the hierarchy to `children` compound components to allow functionality.\n * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`\n * and a `DialogSurface` (or some component that will eventually render one of those compound components)\n * in this specific order\n */\nexport const Dialog: React.FC<DialogProps> = React.memo(props => {\n  const state = useDialog_unstable(props);\n  const contextValues = useDialogContextValues_unstable(state);\n\n  return renderDialog_unstable(state, contextValues);\n});\n\nDialog.displayName = 'Dialog';\n"],"sourceRoot":"../src/"}

package/lib/components/Dialog/Dialog.types.js

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

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

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

package/lib/components/Dialog/index.js

@@ -0,0 +1,5 @@
+export * from './Dialog';
+export * from './Dialog.types';
+export * from './renderDialog';
+export * from './useDialog';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC","sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\n"]}

package/lib/components/Dialog/renderDialog.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
+/**
+ * Render the final JSX of Dialog
+ */
+
+export const renderDialog_unstable = (state, contextValues) => {
+  const {
+    content,
+    trigger
+  } = state;
+  return /*#__PURE__*/React.createElement(DialogProvider, {
+    value: contextValues.dialog
+  }, /*#__PURE__*/React.createElement(DialogSurfaceProvider, {
+    value: contextValues.dialogSurface
+  }, trigger, content));
+};
+//# sourceMappingURL=renderDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,gBAAtD;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAqB,aAArB,KAA2D;EAC9F,MAAM;IAAE,OAAF;IAAW;EAAX,IAAuB,KAA7B;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAf,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,EACG,OADH,EAEG,OAFH,CADF,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n  const { content, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {content}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Dialog/useDialog.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import { useHasParentContext } from '@fluentui/react-context-selector';
+import { useControlNativeDialogOpenState, useDisableBodyScroll, useFocusFirstElement } from '../../utils';
+import { DialogContext } from '../../contexts';
+/**
+ * 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,
+    modalType = 'modal',
+    onOpenChange
+  } = props;
+  const [trigger, content] = childrenToTriggerAndContent(children);
+  const [open, setOpen] = useControllableState({
+    state: props.open,
+    defaultState: props.defaultOpen,
+    initialState: false
+  });
+  const requestOpenChange = useEventCallback(data => {
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data); // if user prevents default then do not change state value
+    // otherwise updates state value and trigger reference to the element that caused the opening
+
+    if (!data.event.isDefaultPrevented()) {
+      setOpen(data.open);
+    }
+  });
+  const focusRef = useFocusFirstElement(open, modalType);
+  const nativeControlRef = useControlNativeDialogOpenState(open, modalType);
+  const disableBodyScroll = useDisableBodyScroll();
+  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
+  useIsomorphicLayoutEffect(() => {
+    if (isBodyScrollLocked) {
+      return disableBodyScroll();
+    }
+  }, [disableBodyScroll, isBodyScrollLocked]);
+  return {
+    components: {
+      backdrop: 'div'
+    },
+    open,
+    modalType,
+    content: open ? content : null,
+    trigger,
+    requestOpenChange,
+    dialogContentId: useId('dialog-content-'),
+    dialogTitleId: useId('dialog-title-'),
+    isNestedDialog: useHasParentContext(DialogContext),
+    dialogRef: useMergedRefs(focusRef, nativeControlRef)
+  };
+};
+/**
+ * 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];
+  }
+}
+//# sourceMappingURL=useDialog.js.map