reoverlay/dist/index.d.ts

A tiny, typed modal manager for React.

import * as react_jsx_runtime from 'react/jsx-runtime';
import React from 'react';

declare const ModalContainer: () => react_jsx_runtime.JSX.Element;

type ModalProps = Record<string, unknown>;
type ModalComponent<P = any> = React.ElementType<P>;
type ModalElement<P = any> = React.ReactElement<P>;
type ModalRenderable<P = any> = ModalComponent<P> | ModalElement<P>;
type ModalConfigItem<P = any> = {
    name: string;
    component: ModalRenderable<P>;
};
type ModalAnimation = 'fade' | 'zoom' | 'flip' | 'door' | 'rotate' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight';
type ModalCloseEvent = React.MouseEvent<HTMLDivElement> | KeyboardEvent | React.KeyboardEvent<HTMLDivElement>;
type ModalWrapperProps = {
    'aria-describedby'?: string;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    animation?: ModalAnimation;
    children?: React.ReactNode;
    closeOnEscape?: boolean;
    contentContainerClassName?: string;
    onClose?: (event: ModalCloseEvent) => void;
    role?: 'dialog' | 'alertdialog';
    wrapperClassName?: string;
};
type ActiveModal<P = ModalProps> = {
    component: ModalRenderable<P>;
    modalKey: string;
    props: P;
};

declare const ModalWrapper: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, animation, children, closeOnEscape, contentContainerClassName, onClose, role, wrapperClassName, }: ModalWrapperProps) => react_jsx_runtime.JSX.Element;

declare const EVENT: {
    readonly CHANGE_MODAL: "change_modal";
    readonly HIDE_ALL: "hide_all";
    readonly HIDE_MODAL: "hide_modal";
    readonly SHOW_MODAL: "show_modal";
};

type ModalSnapshot<P extends ModalProps = ModalProps> = Omit<ActiveModal<P>, 'modalKey'>;
declare const Reoverlay: {
    modals: Map<string, ModalRenderable>;
    snapshots: Map<string, ModalSnapshot<any>>;
    config(configData?: ModalConfigItem[]): void;
    showModal<P extends ModalProps = ModalProps>(modal: ModalRenderable<P> | string, props?: P): void;
    getSnapshotsArray(): {
        component: ModalRenderable<any>;
        props: any;
        modalKey: string;
    }[];
    hideModal(modal?: string | null): void;
    hideAll(): void;
    applyModal({ component, modalKey, props, type, }: Partial<ActiveModal<any>> & {
        type: (typeof EVENT)[keyof typeof EVENT];
    }): void;
};

export { type ActiveModal, type ModalAnimation, type ModalCloseEvent, type ModalComponent, type ModalConfigItem, ModalContainer, type ModalElement, type ModalProps, type ModalRenderable, ModalWrapper, type ModalWrapperProps, Reoverlay };