@sinchsmb/ui-kit/dist/types/layout/ModalDialog/ModalDialog.d.ts

UI kit for SinchSMB frontend

import { ReactNode } from 'react';
import { CommonProps } from '../../types';
import { ModalDialogSize } from './constants';
/** Props for {@link ModalDialog} */
export interface ModalDialogProps extends CommonProps {
    /** If `true` then dialog will be visible. */
    visible?: boolean;
    /**
     * Size of dialog
     *
     * @default {@link ModalDialogSize.Default}
     */
    size?: ModalDialogSize;
    /**
     * Invokes when the user presses the ESC key or clicks on a dialog backdrop
     */
    onDismiss(): void;
    children: ReactNode;
}
/**
 * Component that show common modal dialog with scrollable content.
 *
 * ```tsx
 * <ModalDialog visible={visible} onDismiss={() => setVisible(false)}>
 *   <ModalHeader>
 *     <ModalTitle>Title</ModalTitle>
 *     <ModalSubTitle>Subtitle</ModalSubTitle>
 *   </ModalHeader>
 *   <ModalBody>
 *     Some content
 *   </ModalBody>
 *   <ModalFooter>
 *     <ModalFooterButtonGroup>
 *       <Button appearance={ButtonAppearance.Subtle}>Left Button</Button>
 *     </ModalFooterButtonGroup>
 *     <ModalFooterButtonGroup>
 *       <Button>Close</Button>
 *       <Button appearance={ButtonAppearance.Primary}>Ok</Button>
 *     </ModalFooterButtonGroup>
 *   </ModalFooter>
 * </ModalDialog>
 * ```
 *
 * ### Dialog closing
 *
 * The {@link ModalDialog} has `onDismiss` callback that invokes when the user presses the ESC key or clicks on a dialog backdrop.
 *
 * According to [accessibility recommendations](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/), a dialog should be closed by the ESC keypress.
 * Therefore in most cases, you should define this logic in your code.
 *
 * ```tsx
 * const [visible, setVisible] = useState(false);
 * return <ModalDialog visible={visible} onDismiss={() => setVisible(false)}></ModalDialog>
 * ```
 *
 * If you want to forbid closing a dialog and do it, for example, only when a form inside the dialog was submitted, you can use a stub for `onDismiss.`
 *
 * ```tsx
 * const [visible, setVisible] = useState(false);
 * return <ModalDialog visible={visible} onDismiss={() => {}}></ModalDialog>
 * ```
 */
export declare function ModalDialog(props: ModalDialogProps): JSX.Element;