@wonderflow/react-components/dist/components/modal/modal.d.ts

UI components from Wonderflow's Wanda design system

import { PropsWithChildren } from 'react';
import { Button, OverlayContainerProps } from '../..';
import { ModalContentComponent } from './content/modal-content';
import { ModalFooterComponent } from './footer/modal-footer';
import { ModalHeaderComponent } from './header/modal-header';
export declare type ModalProps = PropsWithChildren<PropsWithClass<{
    /**
     * Display the Modal
     */
    isVisible: boolean;
    /**
     * Callback function to be called when the Modal is closed.
     */
    onCloseModal: () => void;
    /**
     * Set the Modal Header title.
     */
    title?: React.ReactNode;
    /**
     * Set the Modal Header subtitle. This value depends on the presence of the title.
     */
    subtitle?: React.ReactNode;
    /**
     * Hide the Close icon Button.
     */
    hideCloseButton?: boolean;
    /**
     * Hide the border at the bottom of the header. This will be automatically dismissed
     * if no content is provided inside the Modal Header.
     */
    hideHeaderBorder?: boolean;
    /**
     * Hide the border at the top of the footer. This will be automatically dismissed
     * if no actions are provided inside the Modal Footer.
     */
    hideFooterBorder?: boolean;
    /**
     * Set the Modal body content.
     */
    content?: React.ReactNode;
    /**
     * Set the Primary Button with a constrain in kind and size.
     */
    primaryAction?: React.ComponentPropsWithRef<typeof Button>;
    /**
     * Set the Secondary Button with a constrain in kind and size.
     */
    secondaryAction?: React.ComponentPropsWithRef<typeof Button>;
    /**
     * Set a Custom Modal Action element.
     */
    tertiaryAction?: React.ReactNode;
    /**
     * Set Modal action buttons in the center on a desktop screen. On Mobile
     * they will always be stacked vertically in a column.
     */
    alignActionCenter?: boolean;
    /**
     * Set Modal content vertically in the center on a mobile screen.
     */
    alignContentCenter?: boolean;
    /**
     * Set the loading state by displaying a spinner while true.
     */
    isLoading?: boolean;
    /**
     * Set the theme of the content card. To ensure contrast with the default overlay color (dark),
     * this is set to `light` by default.
     */
    theme?: 'dark' | 'light' | 'auto';
    /**
     * Set the Modal size.
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * This prevent the modal to be closed by clicking on the overlay.
     */
    preventCloseOnClickOutside?: boolean;
}>> & Pick<OverlayContainerProps, 'obfuscate' | 'overlayColor' | 'index' | 'root'>;
declare type ModalComponent = React.ForwardRefExoticComponent<ModalProps> & {
    Header: ModalHeaderComponent;
    Content: ModalContentComponent;
    Footer: ModalFooterComponent;
};
export declare const Modal: ModalComponent;
export {};
//# sourceMappingURL=modal.d.ts.map