UNPKG

@helpwave/hightide

Version:

helpwave's component and theming library

44 lines (41 loc) 1.97 kB
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.mjs'; import '../../hooks/useLanguage.mjs'; 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 };