@fluentui/react-dialog 9.0.0-beta.7

package/dist/index.d.ts

@@ -0,0 +1,406 @@
+/// <reference types="react" />
+
+import { ARIAButtonSlotProps } 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>;
+
+export declare const dialogClassNames: SlotClassNames<DialogSlots>;
+
+declare type DialogContextValue = {
+    /**
+     * Reference to trigger element that opened the Dialog
+     * null if Dialog is closed
+     */
+    triggerRef: React_2.RefObject<HTMLElement>;
+    contentRef: React_2.RefObject<HTMLElement>;
+    modalType: DialogModalType;
+    dialogTitleID?: string;
+    dialogBodyID?: string;
+    open: boolean;
+    /**
+     * 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 = {
+    type: 'escapeKeyDown';
+    open: boolean;
+    event: React_2.KeyboardEvent;
+}
+/**
+* document escape keydown defers from internal escape keydown events because of the synthetic event API
+*/
+| {
+    type: 'documentEscapeKeyDown';
+    open: boolean;
+    event: KeyboardEvent;
+} | {
+    type: 'overlayClick';
+    open: boolean;
+    event: React_2.MouseEvent;
+} | {
+    type: 'triggerClick';
+    open: boolean;
+    event: React_2.MouseEvent;
+};
+
+export declare type DialogOpenChangeEvent = React_2.KeyboardEvent | React_2.MouseEvent | KeyboardEvent;
+
+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;
+    /**
+     * 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
+     */
+    onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;
+    /**
+     * 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 = {
+    /**
+     * Dimmed background of dialog.
+     * The default overlay is rendered as a `<div>` with styling.
+     * This slot expects a `<div>` element which will replace the default overlay.
+     * The overlay should have `aria-hidden="true"`.
+     */
+    overlay?: Slot<'div'>;
+};
+
+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;
+};
+
+/**
+ * DialogSurface Props
+ */
+export declare type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & {};
+
+export declare type DialogSurfaceSlots = {
+    root: Slot<'div', 'main'>;
+};
+
+/**
+ * State used in rendering DialogSurface
+ */
+export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;
+
+/**
+ * The `DialogTitle` component will expect to have a dialog title/header
+ * and will show the close (X icon) button if specified so.
+ * Apart from styling and presenting `closeButton`, this component does not have other behavior.
+ */
+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'>;
+    closeButton?: Slot<ARIAButtonSlotProps>;
+};
+
+/**
+ * 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 = Pick<React_2.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'aria-haspopup'> & {
+    ref?: React_2.Ref<never>;
+};
+
+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 & {
+        ref?: React_2.Ref<unknown>;
+    }) | ((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 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;
+
+/**
+ * Apply styling to the Dialog slots based on the state
+ */
+export declare const useDialogStyles_unstable: (state: DialogState) => DialogState;
+
+/**
+ * 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<HTMLElement>) => 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/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.18.1"
+    }
+  ]
+}

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":["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":["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":["DialogBody.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/DialogBody/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":["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":["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":["DialogTrigger.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogTrigger/index';\n"]}

package/lib/components/Dialog/Dialog.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useDialog_unstable } from './useDialog';
+import { renderDialog_unstable } from './renderDialog';
+import { useDialogStyles_unstable } from './useDialogStyles';
+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);
+  useDialogStyles_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":["components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;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,wBAAwB,CAAC,KAAD,CAAxB;EACA,OAAO,qBAAqB,CAAC,KAAD,EAAQ,aAAR,CAA5B;AACD,CAN4C,CAAtC;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport { useDialogStyles_unstable } from './useDialogStyles';\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  useDialogStyles_unstable(state);\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":["components/Dialog/Dialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSlots = {\n  /**\n   * Dimmed background of dialog.\n   * The default overlay is rendered as a `<div>` with styling.\n   * This slot expects a `<div>` element which will replace the default overlay.\n   * The overlay should have `aria-hidden=\"true\"`.\n   */\n  overlay?: Slot<'div'>;\n};\n\nexport type DialogOpenChangeEvent = React.KeyboardEvent | React.MouseEvent | KeyboardEvent;\n\nexport type DialogOpenChangeData =\n  | { type: 'escapeKeyDown'; open: boolean; event: React.KeyboardEvent }\n  /**\n   * document escape keydown defers from internal escape keydown events because of the synthetic event API\n   */\n  | { type: 'documentEscapeKeyDown'; open: boolean; event: KeyboardEvent }\n  | { type: 'overlayClick'; open: boolean; event: React.MouseEvent }\n  | { type: 'triggerClick'; open: boolean; event: React.MouseEvent };\n\nexport type DialogModalType = 'modal' | 'non-modal' | 'alert';\n\nexport type DialogContextValues = {\n  dialog: DialogContextValue;\n  /**\n   * dialogSurface context is provided by Dialog as false\n   * to ensure components inside Dialog but outside DialogSurface will consume this as false\n   */\n  dialogSurface: DialogSurfaceContextValue;\n};\n\nexport type DialogProps = ComponentProps<Partial<DialogSlots>> & {\n  /**\n   * Dialog variations.\n   *\n   * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\n   * The tab sequence is kept within the dialog and moving the focus outside\n   * the dialog will imply closing it. This is the default type of the component.\n   *\n   * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\n   * and users can interact with the rest of the page.\n   * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n   *\n   * `alert`: is a special type of modal dialogs that interrupts the user's workflow\n   * to communicate an important message or ask for a decision.\n   * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\n   * and it cannot be dismissed through the dimmed background or escape key.\n   *\n   * @default modal\n   */\n  modalType?: DialogModalType;\n  /**\n   * Controls the open state of the dialog\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Default value for the uncontrolled open state of the dialog.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback fired when the component changes value from open state.\n   *\n   * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n   * @param data - A data object with relevant information, such as open value and type\n   */\n  onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;\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,6 @@
+export * from './Dialog';
+export * from './Dialog.types';
+export * from './renderDialog';
+export * from './useDialog';
+export * from './useDialogStyles';
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/Dialog/renderDialog.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import { Portal } from '@fluentui/react-portal';
+import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
+/**
+ * Render the final JSX of Dialog
+ */
+
+export const renderDialog_unstable = (state, contextValues) => {
+  const {
+    content,
+    trigger,
+    open
+  } = state;
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(DialogProvider, {
+    value: contextValues.dialog
+  }, /*#__PURE__*/React.createElement(DialogSurfaceProvider, {
+    value: contextValues.dialogSurface
+  }, trigger, open && /*#__PURE__*/React.createElement(Portal, null, slots.overlay && /*#__PURE__*/React.createElement(slots.overlay, { ...slotProps.overlay
+  }), content)));
+};
+//# sourceMappingURL=renderDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Dialog/renderDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,gBAAtD;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAqB,aAArB,KAA2D;EAC9F,MAAM;IAAE,OAAF;IAAW,OAAX;IAAoB;EAApB,IAA6B,KAAnC;EACA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;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,IAAI,iBACH,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,EACG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADpB,EAEG,OAFH,CAHJ,CADF,CADF;AAaD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogSlots, 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, open } = state;\n  const { slots, slotProps } = getSlots<DialogSlots>(state);\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {open && (\n          <Portal>\n            {slots.overlay && <slots.overlay {...slotProps.overlay} />}\n            {content}\n          </Portal>\n        )}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"sourceRoot":"../src/"}