@nex-ui/react/dist/types/components/modal/types.d.ts

🎉 A beautiful, modern, and reliable React component library.

import { Interpolation } from '@nex-ui/system';
import { Overwrite } from '../../types/utils.js';
import { ReactNode, ElementType, ComponentProps } from 'react';

type ModalSlotProps<RootComponent extends ElementType> = Overwrite<ComponentProps<RootComponent>, {
    as?: RootComponent;
    sx?: Interpolation;
}>;
type ModalProps = {
    children?: ReactNode;
    /**
     * If true, the component is shown.(controlled)
     */
    open?: boolean;
    /**
     * If true, the component is shown by default
     */
    defaultOpen?: boolean;
    /**
     * Handler that is called when the modal is opened or closed
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * The container element in which the overlay portal will be placed.
     * @default document.body
     */
    container?: Element | null | (() => Element | null);
    /**
     * Always keep the children in the DOM.
     * @default false
     */
    keepMounted?: boolean;
    /**
     * If true, close the modal when the outside is clicked.
     * @default true
     */
    closeOnInteractOutside?: boolean;
    /**
     * If true, the modal prevents page scrolling.
     * @default false
     */
    preventScroll?: boolean;
    /**
     * close the modal when the escape key is pressed
     * @default true
     */
    closeOnEscape?: boolean;
    /**
     * If true, the modal will restore focus to previously focused element once the modal is hidden or unmounted.
     * @default true
     */
    restoreFocus?: boolean;
    /**
     * The id(s) of the element(s) that describe the modal.
     */
    'aria-labelledby'?: string;
    /**
     * The id(s) of the element(s) that label the modal.
     */
    'aria-describedby'?: string;
};
type ModalTriggerProps = {
    children?: ReactNode;
};
interface ModalCloseProps {
    children?: ReactNode;
}
type ModalContentProps<RootComponent extends ElementType = 'section'> = ModalSlotProps<RootComponent>;
type ModalHeaderProps<RootComponent extends ElementType = 'h2'> = ModalSlotProps<RootComponent>;
type ModalBodyProps<RootComponent extends ElementType = 'div'> = ModalSlotProps<RootComponent>;
type ModalFooterProps<RootComponent extends ElementType = 'div'> = ModalSlotProps<RootComponent>;
type ModalRootProps<RootComponent extends ElementType = 'div'> = ModalSlotProps<RootComponent>;
type ModalBackdropProps<RootComponent extends ElementType = 'div'> = ModalSlotProps<RootComponent>;
type ModalPanelProps<RootComponent extends ElementType = 'div'> = ModalSlotProps<RootComponent>;

export type { ModalBackdropProps, ModalBodyProps, ModalCloseProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalPanelProps, ModalProps, ModalRootProps, ModalTriggerProps };