488 lines
17 KiB
TypeScript
488 lines
17 KiB
TypeScript
/// <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 { ContextSelector } from '@fluentui/react-context-selector';
|
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
import { JSXElementConstructor } from 'react';
|
|
import type { PortalProps } from '@fluentui/react-portal';
|
|
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
|
|
import { Provider } 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';
|
|
import type { TriggerProps } from '@fluentui/react-utilities';
|
|
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
|
|
/**
|
|
* 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;
|
|
/**
|
|
* Makes the actions expand the entire width of the DialogBody
|
|
* @default false
|
|
*/
|
|
fluid?: boolean;
|
|
};
|
|
|
|
export declare type DialogActionsSlots = {
|
|
root: Slot<'div'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering DialogActions
|
|
*/
|
|
export declare type DialogActionsState = ComponentState<DialogActionsSlots> & Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;
|
|
|
|
/**
|
|
* 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>;
|
|
|
|
export declare type DialogContextValue = {
|
|
open: boolean;
|
|
inertTrapFocus: boolean;
|
|
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;
|
|
} & Partial<ReturnType<typeof useModalAttributes>>;
|
|
|
|
export 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;
|
|
};
|
|
|
|
export declare type DialogModalType = 'modal' | 'non-modal' | 'alert';
|
|
|
|
export declare type DialogOpenChangeData = {
|
|
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 of interaction that created the event
|
|
*/
|
|
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.
|
|
*
|
|
* @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 of interaction that created the event
|
|
*/
|
|
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;
|
|
/**
|
|
* Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
|
|
* where the focus trap involves setting outside elements inert.
|
|
*
|
|
* @default false
|
|
*/
|
|
inertTrapFocus?: boolean;
|
|
};
|
|
|
|
export declare const DialogProvider: React_2.Provider<DialogContextValue | undefined> & React_2.FC<React_2.ProviderProps<DialogContextValue | undefined>>;
|
|
|
|
export declare type DialogSlots = {
|
|
surfaceMotion: Slot<PresenceMotionSlotProps>;
|
|
};
|
|
|
|
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<Omit<DialogSurfaceSlots, 'backdropMotion'>>;
|
|
|
|
export declare type DialogSurfaceContextValue = boolean;
|
|
|
|
export declare type DialogSurfaceContextValues = {
|
|
dialogSurface: DialogSurfaceContextValue;
|
|
};
|
|
|
|
/**
|
|
* Union between all possible semantic element that represent a DialogSurface
|
|
*/
|
|
export declare type DialogSurfaceElement = HTMLElement;
|
|
|
|
/**
|
|
* DialogSurface Props
|
|
*/
|
|
export declare type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;
|
|
|
|
export declare const DialogSurfaceProvider: Provider<boolean | undefined>;
|
|
|
|
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"`.
|
|
*
|
|
*/
|
|
backdrop?: Slot<'div'>;
|
|
root: Slot<'div'>;
|
|
backdropMotion: Slot<PresenceMotionSlotProps>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering DialogSurface
|
|
*/
|
|
export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<DialogContextValue, 'isNestedDialog'> & Pick<PortalProps, 'mountNode'> & {
|
|
open?: boolean;
|
|
/**
|
|
* Transition status for animation.
|
|
* In test environment, this is always `undefined`.
|
|
*
|
|
* @deprecated Will be always `undefined`.
|
|
*/
|
|
transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
|
|
};
|
|
|
|
/**
|
|
* 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 h2, but can be any heading or div,
|
|
* if `div` is provided do not forget to also provide proper `role="heading"` and `aria-level` attributes
|
|
*/
|
|
root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;
|
|
/**
|
|
* 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.
|
|
*
|
|
* This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`
|
|
* Besides being a trigger that opens/close a dialog through context this component doesn't do much,
|
|
* making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.
|
|
*/
|
|
export declare const DialogTrigger: React_2.FC<DialogTriggerProps>;
|
|
|
|
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 & {
|
|
'aria-haspopup'?: 'dialog';
|
|
}>;
|
|
|
|
export declare type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {
|
|
/**
|
|
* Explicitly declare if the trigger is responsible for opening or
|
|
* closing a Dialog visibility state.
|
|
*
|
|
* If `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default
|
|
*
|
|
* If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default
|
|
*/
|
|
action?: DialogTriggerAction;
|
|
/**
|
|
* Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.
|
|
* @default false
|
|
*/
|
|
disableButtonEnhancement?: boolean;
|
|
};
|
|
|
|
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;
|
|
|
|
export declare const useDialogContext_unstable: <T>(selector: ContextSelector<DialogContextValue, T>) => T;
|
|
|
|
export declare function useDialogContextValues_unstable(state: DialogState): DialogContextValues;
|
|
|
|
/**
|
|
* 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;
|
|
|
|
export declare const useDialogSurfaceContext_unstable: () => boolean;
|
|
|
|
export declare function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues;
|
|
|
|
/**
|
|
* 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<HTMLDivElement>) => 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 { }
|