@fluentui/react/lib/components/Modal/Modal.types.d.ts

Reusable React components for building web experiences.

import * as React from 'react';
import { ResponsiveMode } from '../../ResponsiveMode';
import type { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps';
import type { IContextualMenuProps } from '../../ContextualMenu';
import type { IFocusTrapZoneProps } from '../../FocusTrapZone';
import type { IIconProps } from '../../Icon';
import type { ILayerProps } from '../../Layer';
import type { IOverlayProps } from '../../Overlay';
import type { IStyle, ITheme } from '../../Styling';
import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
import { IPopupProps } from '../Popup/Popup.types';
export interface IDragOptions {
    /**
     * Optional selector for the element where the drag can be initiated. If not supplied when
     * isDraggable is true dragging can be initiated by the whole contents of the modal
     */
    dragHandleSelector?: string;
    /**
     * IconProps for the icon used to indicate that the dialog is in keyboard move mode
     */
    keyboardMoveIconProps?: IIconProps;
    /**
     * The text to use for the modal move menu item
     */
    moveMenuItemText: string;
    /**
     * The text to use for the modal close menu item
     */
    closeMenuItemText: string;
    /**
     * The Draggable Control Menu so that the draggable zone can be moved via the keyboard
     */
    menu: React.FunctionComponent<IContextualMenuProps>;
    /**
     * Whether the draggable content should be prevented from going off-screen
     */
    keepInBounds?: boolean;
}
/**
 * {@docCategory Modal}
 */
export interface IModal {
    /**
     * Sets focus on the first focusable, or configured, child in focus trap zone
     */
    focus: () => void;
}
/**
 * {@docCategory Modal}
 */
export interface IModalProps extends React.RefAttributes<HTMLDivElement>, IAccessiblePopupProps {
    children?: React.ReactNode;
    /**
     * Optional ref to access the `IModal` interface. Use this instead of `ref` for accessing
     * public API of the component.
     */
    componentRef?: IRefObject<IModal>;
    /**
     * Call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;
    /**
     * Theme provided by higher-order component.
     */
    theme?: ITheme;
    /**
     * Whether the dialog is displayed.
     * @default false
     */
    isOpen?: boolean;
    /**
     * Whether the overlay is dark themed.
     * @default true
     */
    isDarkOverlay?: boolean;
    /**
     * A callback function for when the Modal is dismissed light dismiss, before the animation completes.
     */
    onDismiss?: (ev?: React.MouseEvent<HTMLButtonElement | HTMLElement>) => any;
    /**
     * A callback function which is called after the Modal is dismissed and the animation is complete.
     */
    onDismissed?: () => any;
    /**
     * The specified responsiveMode value for Modal to use.
     * @default ResponsiveMode.small
     */
    responsiveMode?: ResponsiveMode;
    /**
     * Defines an optional set of props to be passed through to Layer
     */
    layerProps?: ILayerProps;
    /**
     * Defines an optional set of props to be passed through to Overlay
     */
    overlay?: IOverlayProps;
    /**
     * Whether the dialog can be light dismissed by clicking outside the dialog (on the overlay).
     * @default false
     */
    isBlocking?: boolean;
    /**
     * Whether the dialog should be modeless (e.g. not dismiss when focusing/clicking outside of the dialog).
     * if true: isBlocking is ignored, there will be no overlay (isDarkOverlay is ignored),
     * isClickableOutsideFocusTrap is true, and forceFocusInsideTrap is false
     */
    isModeless?: boolean;
    /**
     * Determines the ARIA role of the dialog (alertdialog/dialog)
     * If this is set, it will override the ARIA role determined by isBlocking and isModeless
     *
     * For more information regarding dialogs please see https://w3c.github.io/aria-practices/#alertdialog
     */
    isAlert?: boolean;
    /**
     * Optional class name to be added to the root class
     */
    className?: string;
    /**
     * Optional override for container class
     */
    containerClassName?: string;
    /**
     * Optional override for scrollable content class
     */
    scrollableContentClassName?: string;
    /**
     * A callback function for when the Modal content is mounted on the overlay layer
     * @deprecated Use `layerProps.onLayerDidMount` instead
     */
    onLayerDidMount?: () => void;
    /**
     * ARIA id for the title of the Modal, if any
     */
    titleAriaId?: string;
    /**
     * ARIA id for the subtitle of the Modal, if any
     */
    subtitleAriaId?: string;
    /**
     * Whether the modal should have top offset fixed once opened and expand from the bottom only
     * when the content changes dynamically.
     */
    topOffsetFixed?: boolean;
    /**
     * The options to make the modal draggable
     */
    dragOptions?: IDragOptions;
    /**
     * Allow body scroll on content and overlay on touch devices. Changing after mounting has no effect.
     * @default false
     */
    allowTouchBodyScroll?: boolean;
    /**
     * Puts aria-hidden=true on all non-ancestors of the current modal, for screen readers
     * (unless `isModeless` is true).
     * @default true
     * @deprecated Setting this to `false` is deprecated since it breaks modal behavior for some screen readers.
     * It will not be supported in future versions of the library (except for modeless modals).
     */
    enableAriaHiddenSiblings?: boolean;
    /**
     * Set of props to customize the `FocusTrapZone` inside of the `Modal`.
     * @default `{}`
     */
    focusTrapZoneProps?: IFocusTrapZoneProps;
    /**
     * Props to be passed through to Popup
     */
    popupProps?: IPopupProps;
}
/**
 * {@docCategory Modal}
 */
export type IModalStyleProps = Required<Pick<IModalProps, 'theme'>> & Pick<IModalProps, 'className' | 'containerClassName' | 'scrollableContentClassName' | 'topOffsetFixed' | 'isModeless'> & {
    /** Modal open state. */
    isOpen?: boolean;
    /** Modal visible state. */
    isVisible?: boolean;
    /** Modal has been opened state. */
    hasBeenOpened?: boolean;
    /** Positioning of modal on first render */
    modalRectangleTop?: number;
    /** Classname for layer element */
    layerClassName?: string;
    /** Whether this modal is draggable and using the default handler */
    isDefaultDragHandle?: boolean;
    /** The windows inner height */
    windowInnerHeight?: number;
};
/**
 * {@docCategory Modal}
 */
export interface IModalStyles {
    root: IStyle;
    main: IStyle;
    scrollableContent: IStyle;
    layer: IStyle;
    keyboardMoveIconContainer: IStyle;
    keyboardMoveIcon: IStyle;
}