@helpwave/hightide/dist/components/modals/Modal.d.ts

helpwave's component and theming library

import * as react from 'react';
import { MouseEventHandler, ReactNode, PropsWithChildren } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { PropsForTranslation } from '../../hooks/useTranslation.js';
import '../../hooks/useLanguage.js';

type ModalHeaderTranslation = {
    close: string;
};
type ModalHeaderProps = {
    onCloseClick?: () => void;
    /** The title of the Modal. If you want to only set the text use `titleText` instead */
    title?: ReactNode;
    /** The title text of the Modal. If you want to set a custom title use `title` instead */
    titleText?: string;
    /** The description of the Modal. If you want to only set the text use `descriptionText` instead */
    description?: ReactNode;
    /** The description text of the Modal. If you want to set a custom description use `description` instead */
    descriptionText?: string;
};
/**
 * A default Header to be used by modals to have a uniform design
 */
declare const ModalHeader: ({ overwriteTranslation, onCloseClick, title, titleText, description, descriptionText }: PropsForTranslation<ModalHeaderTranslation, ModalHeaderProps>) => react_jsx_runtime.JSX.Element;
declare const modalRootName = "modal-root";
type ModalProps = {
    id: string;
    isOpen: boolean;
    onBackgroundClick?: MouseEventHandler<HTMLDivElement>;
    backgroundClassName?: string;
    modalClassName?: string;
    containerClassName?: string;
} & ModalHeaderProps;
/**
 * A Generic Modal Window
 *
 * The state needs to be managed by the parent of this component
 *
 * DO NOT Conditionally render this always use the isOpen to ensure that the ModalRegister is working properly
 */
declare const Modal: ({ children, id, isOpen, onBackgroundClick, backgroundClassName, modalClassName, containerClassName, ...modalHeaderProps }: PropsWithChildren<ModalProps>) => react.ReactPortal | null;

export { Modal, ModalHeader, type ModalHeaderProps, type ModalProps, modalRootName };