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

Fluid Design System React

import React from 'react';
import { WithHTMLAttributes } from '../../utils/typeHelpers';
import { NJIconProps } from '../icon';
export declare const NJModalContent: React.ForwardRefExoticComponent<NJModalContentOwnProps & NJModalContentRef & import("../../utils/typeHelpers").HTMLAttributesWithoutComponentProps<"div", NJModalContentOwnProps> & React.RefAttributes<HTMLDivElement>>;
type NJModalContentRef = {
    closeButtonRef?: React.RefObject<HTMLButtonElement>;
    backdropRef?: React.RefObject<HTMLDivElement>;
};
type NJModalContentOwnProps = {
    children?: React.ReactNode;
    /**
     *  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?: NJIconProps['variant'];
    /**
     * Header title
     */
    title?: string;
    /**
     * 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?: React.ReactNode | undefined;
    /**
     * Whether the footer should be centered or not
     */
    centeredFooter?: boolean;
    /**
     * Accessible text alternative for the "close" button.
     *
     * @default "Close"
     */
    closeLabel?: string;
    /**
     *  Callback fired when the close button is clicked. If set, a close button will be rendered.
     */
    onClose?: () => void;
    /**
     * Callback fired when the backdrop is clicked.
     */
    onBackdropClick?: () => void;
    /**
     * Callback fired when the escape key is pressed.
     */
    onEscapeKey?: () => 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;
};
export type NJModalContentProps = NJModalContentOwnProps & NJModalContentRef & WithHTMLAttributes<NJModalContentOwnProps, 'div'>;
export {};