@engie-group/fluid-design-system-react/lib/components/modal/NJModalBase.d.ts

Fluid Design System React

import { BeforeHideEventSource } from '@engie-group/fluid-design-system';
import React, { PropsWithChildren, ReactNode } from 'react';
import { IIconProps } from '../icon';
export declare const NJModalBase: React.ForwardRefExoticComponent<IModalBaseProps & React.RefAttributes<HTMLDivElement>>;
export interface IModalBaseProps extends PropsWithChildren {
    /**
     *  Material icon name https://material.io/resources/icons/?style=baseline
     *  If provided, the icon appears on the left of the modal header title
     */
    icon?: string;
    /**
     * Icon theme color variant
     */
    iconVariant?: IIconProps['variant'];
    /**
     * Header title
     */
    title?: string;
    /**
     * Whether modal is opened or not
     */
    isOpen: boolean;
    /**
     * Modal id
     */
    id: string;
    /**
     * Whether modal should be aligned in the center of the screen or not
     */
    verticalCentered?: boolean;
    /**
     * Opening animated with slight fade
     */
    fade?: boolean;
    /**
     * Footer elements (like Buttons, ...)
     */
    footer?: ReactNode | undefined;
    /**
     * Whether the footer should be centered or not
     */
    centeredFooter?: boolean;
    /**
     * Accessible text alternative for the "close" button.
     *
     * @default "Close"
     */
    closeLabel?: string;
    /**
     *  This callback is called for all modal's close events with the closing cause as parameter:
     *   - `'keyboard'` if a closing keyboard touch is pressed (escape key for now).
     *   - `'button'` if the cross button is clicked.
     *   - `'backdrop'` if the backdrop is clicked.
     *
     *  Make sure to handle modal closing in this callback.
     *
     *  @example () => {
     *    setIsOpen(false)
     *  }
     */
    onClose?: (source: BeforeHideEventSource) => void;
    /**
     * Optional additional className
     */
    className?: string;
    /**
     * Aria role to use for the modal element depending on its content.
     *
     * @default "dialog"
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role
     */
    role?: 'dialog' | 'alertDialog';
    /**
     * The selector of the DOM element on which the modal will be appended
     * It can take any valid `querySelector` as it uses `element.querySelector` under the hood
     *
     * @see [querySelector documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
     *
     * @example
     * appendTo="body" or appendTo="#<element_id>"
     */
    appendTo?: string;
    /**
     * Whether the modal should fit the viewport area
     *
     * @default true
     */
    shouldFitViewport?: boolean;
}