@easy-shadcn/react/dist/modal/index.d.ts

Use shadcn/ui easy&enhance like component library

import * as React$1 from 'react';
import React__default, { ComponentProps, ReactNode, PropsWithChildren } from 'react';
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
import { Root } from '@radix-ui/react-alert-dialog';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { DialogProps } from '@radix-ui/react-dialog';
import * as react_jsx_runtime from 'react/jsx-runtime';

declare const AlertDialogOverlay: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
declare const AlertDialogContent: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
    overlayProps?: React$1.ComponentProps<typeof AlertDialogOverlay>;
} & React$1.RefAttributes<HTMLDivElement>>;
declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;

interface AlertModalProps extends ComponentProps<typeof Root> {
    title?: ReactNode;
    content?: ReactNode;
    contentProps?: ComponentProps<typeof AlertDialogContent>;
    cancelText?: ReactNode;
    onCancel?: () => void | Promise<void>;
    cancelProps?: ComponentProps<typeof AlertDialogCancel>;
    confirmText?: ReactNode;
    onConfirm?: () => void | Promise<void>;
    confirmProps?: ComponentProps<typeof AlertDialogCancel>;
    afterClose?: () => void;
}
declare const AlertModal$1: React__default.FC<AlertModalProps>;

declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
declare const DialogFooter: {
    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
    displayName: string;
};
declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;

interface ModalProps extends DialogProps {
    title?: ReactNode;
    titleProps?: ComponentProps<typeof DialogTitle>;
    description?: ReactNode;
    descriptionProps?: ComponentProps<typeof DialogDescription>;
    footer?: ReactNode;
    footerProps?: ComponentProps<typeof DialogFooter>;
    content?: ReactNode;
    contentProps?: ComponentProps<typeof DialogContent>;
    afterClose?: () => void;
}
declare const Modal$1: React__default.FC<PropsWithChildren<ModalProps>>;

declare const symModalId: unique symbol;

interface ModalHelperState {
    id: string;
    args?: Record<string, unknown>;
    visible?: boolean;
    delayVisible?: boolean;
    keepMounted?: boolean;
}
interface ModalHelperStore {
    [key: string]: ModalHelperState;
}
declare enum ActionType {
    showModal = "modal-helper/show",
    setModalFlags = "modal-helper/set-flags",
    hideModal = "modal-helper/hide",
    removeModal = "modal-helper/remove"
}
interface ModalHelperAction {
    type: ActionType;
    payload: {
        modalId: string;
        args?: Record<string, unknown>;
        flags?: Record<string, unknown>;
    };
}
type ShadCNModalProps = {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    afterClose?: () => void;
};
/**
 * The handler to manage a modal returned by {@link useModal | useModal} hook.
 */
interface ModalHelperHandler<Props = Record<string, unknown>> extends ModalHelperState {
    /**
     * Whether a modal is visible, it's controlled by {@link ModalHelperHandler.show | show}/{@link ModalHelperHandler.hide | hide} method.
     */
    visible: boolean;
    /**
     * If you don't want to remove the modal from the tree after hide when using helpers, set it to true.
     */
    keepMounted: boolean;
    /**
     * Show the modal, it will change {@link ModalHelperHandler.visible | visible} state to true.
     * @param args - an object passed to modal component as props.
     */
    show: (args?: Props) => Promise<unknown>;
    /**
     * Hide the modal, it will change {@link ModalHelperHandler.visible | visible} state to false.
     */
    hide: () => Promise<unknown>;
    /**
     * Resolve the promise returned by {@link ModalHelperHandler.show | show} method.
     */
    resolve: (args?: unknown) => void;
    /**
     * Reject the promise returned by {@link ModalHelperHandler.show | show} method.
     */
    reject: (args?: unknown) => void;
    /**
     * Remove the modal component from React component tree. It improves performance compared to just making a modal invisible.
     */
    remove: () => void;
    /**
     * Resolve the promise returned by {@link ModalHelperHandler.hide | hide} method.
     */
    resolveHide: (args?: unknown) => void;
}
interface ModalHelperHocProps {
    id: string;
    defaultVisible?: boolean;
    keepMounted?: boolean;
}
type CreateModalComponent<T = object> = React.FC<T & ModalHelperHocProps> & {
    [symModalId]?: string;
};
type ModalHelperArgs<T> = T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<unknown> ? React.ComponentProps<T> : Record<string, unknown>;

declare function show<T, C, P extends Partial<ModalHelperArgs<React__default.FC<C>>>>(modal: CreateModalComponent<C>, args?: P): Promise<T>;
declare function show<T>(modal: string, args?: Record<string, unknown>): Promise<T>;
declare function show<T, P>(modal: string, args: P): Promise<T>;
declare function hide<T, C>(modal: string | CreateModalComponent<C>): Promise<T>;

type ModalHolderActions = {
    show: (args?: unknown) => Promise<unknown>;
    hide: () => Promise<unknown>;
};

declare function useModal(): ModalHelperHandler & {
    modalProps: ShadCNModalProps;
};
declare function useModal(modal: string, args?: Record<string, unknown>): ModalHelperHandler & {
    modalProps: ShadCNModalProps;
};
declare function useModal<C, P extends Partial<ModalHelperArgs<React__default.FC<C>>>>(modal: React__default.FC<C>, args?: P): Omit<ModalHelperHandler, 'show'> & {
    show: (args?: P) => Promise<unknown>;
} & {
    modalProps: ShadCNModalProps;
};
declare function useModalHolder<T>(modal: string | CreateModalComponent<T>): readonly [ModalHolderActions, React__default.FC<T>];

declare const ModalHelper: {
    Provider: React$1.FC<{
        children?: React$1.ReactNode | undefined;
    }>;
    ModalHelperContext: React$1.Context<ModalHelperStore>;
    create: <P extends object>(Comp: React.ComponentType<P>) => CreateModalComponent<P>;
    register: <T extends CreateModalComponent<any>>(id: string, comp: T, props?: Partial<ModalHelperArgs<T>>) => void;
    show: typeof show;
    hide: typeof hide;
    remove: (modal: string | CreateModalComponent) => void;
    useModal: typeof useModal;
    useModalHolder: typeof useModalHolder;
    reducer: (state: ModalHelperStore | undefined, action: ModalHelperAction) => ModalHelperStore;
    modalProps: (modal: ModalHelperHandler) => ShadCNModalProps;
};

declare const _default: {
    alert: (props: Omit<AlertModalProps, "open" | "onOpenChange" | "cancelProps" | "onCancel" | "cancelText">) => Promise<unknown>;
    confirm: (props: Omit<AlertModalProps, "open" | "onOpenChange">) => Promise<unknown>;
};

declare const AlertModal: typeof AlertModal$1 & typeof _default;
declare const Modal: typeof Modal$1 & typeof ModalHelper;

export { AlertModal, type AlertModalProps, Modal, type ModalHelperHandler, type ModalProps };