Outlook_Addin_LLM/node_modules/@fluentui/react-dialog/dist/index.d.ts

488 lines
17 KiB
TypeScript
Raw Normal View History

/// <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 { }