@saas-ui/modals 2.4.2 → 3.0.0-alpha.0

package/dist/index.d.ts

@@ -1,257 +1,182 @@
-import * as React$1 from 'react';
-import * as _chakra_ui_react from '@chakra-ui/react';
-import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalHeaderProps, ModalContentProps, ModalFooterProps, MenuListProps } from '@chakra-ui/react';
-import { MaybeRenderProp } from '@chakra-ui/utils';
-import { B as BaseModalProps, F as FormDialogFieldOverrides, a as FormDialogProps } from './form-BtCUKHAs.js';
-export { b as BaseModal, D as DefaultFormType, c as FormDialog, M as Modal, d as createFormDialog } from './form-BtCUKHAs.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _saas_ui_forms from '@saas-ui/forms';
-import { FormType, WithFields, FormProps, FieldValues } from '@saas-ui/forms';
-import { YupFormType, AnyObjectSchema } from '@saas-ui/forms/yup';
-import { z } from 'zod';
-import { InferType } from 'yup';
-import { ZodFormType } from '@saas-ui/forms/zod';
+import * as _saas_ui_modals_provider from '@saas-ui/modals-provider';
+import * as React from 'react';
+import { HTMLChakraProps, ButtonProps } from '@chakra-ui/react';
+import { MaybeRenderProp } from '@saas-ui/core/utils';
+import { Dialog } from '@saas-ui/react/dialog';
+import { Drawer as Drawer$1 } from '@saas-ui/react/drawer';
 
-interface ConfirmDialogProps extends Omit<AlertDialogProps, 'leastDestructiveRef'> {
+interface ModalProps extends Omit<Dialog.RootProps, 'children'> {
     /**
-     * The dialog title
+     * The modal title
      */
-    title?: React$1.ReactNode;
+    title?: React.ReactNode;
     /**
-     * The cancel button label
+     * Whether the modal is open
      */
-    cancelLabel?: React$1.ReactNode;
+    open: boolean;
     /**
-     * The confirm button label
+     * Callback when the modal is opened or closed
      */
-    confirmLabel?: React$1.ReactNode;
+    onOpenChange: (details: {
+        open: boolean;
+    }) => void;
     /**
-     * The cancel button props
+     * The modal children
      */
-    cancelProps?: ButtonProps;
+    children: MaybeRenderProp<{
+        open: boolean;
+        setOpen: (open: boolean) => void;
+    }>;
     /**
-     * The confirm button props
+     * The modal footer
      */
-    confirmProps?: ButtonProps;
+    footer?: React.ReactNode;
     /**
-     * The button group props
+     * Hide the close button
      */
-    buttonGroupProps?: ButtonGroupProps;
+    hideCloseButton?: boolean;
     /**
-     * Close the dialog on cancel
-     * @default true
+     * Hide the overlay
      */
-    closeOnCancel?: boolean;
+    hideBackdrop?: boolean;
     /**
-     * Close the dialog on confirm
-     * @default true
+     * Props for the modal header
      */
-    closeOnConfirm?: boolean;
+    headerProps?: HTMLChakraProps<'div'>;
     /**
-     * Defines which button gets initial focus
-     * https://www.w3.org/TR/wai-aria-practices/#alertdialog
+     * Props for the modal content
      */
-    leastDestructiveFocus?: 'cancel' | 'confirm';
+    contentProps?: HTMLChakraProps<'div'>;
     /**
-     * Function that's called when cancel is clicked
+     * Props for the modal body
      */
-    onCancel?: () => void;
+    bodyProps?: HTMLChakraProps<'div'>;
     /**
-     * Function that's called when confirm is clicked.
+     * Props for the modal footer
      */
-    onConfirm?: () => Promise<void> | void;
+    footerProps?: HTMLChakraProps<'div'>;
 }
-declare const ConfirmDialog: React$1.FC<ConfirmDialogProps>;
+declare const Modal: React.FC<ModalProps>;
 
-interface BaseDrawerProps extends Omit<DrawerProps$1, 'children'> {
+interface DrawerProps extends Omit<Drawer$1.RootProps, 'children'> {
     /**
      * The drawer title
      */
-    title: React$1.ReactNode;
+    title: React.ReactNode;
     /**
-     * The modal children
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when the drawer is opened or closed
+     */
+    onOpenChange: (details: {
+        open: boolean;
+    }) => void;
+    /**
+     * The drawer children
      */
     children: MaybeRenderProp<{
-        isOpen: boolean;
-        onClose: () => void;
+        open: boolean;
+        setOpen: (open: boolean) => void;
     }>;
     /**
      * The modal footer
      */
-    footer?: React$1.ReactNode;
+    footer?: React.ReactNode;
     /**
      * Hide the close button
      */
     hideCloseButton?: boolean;
     /**
-     * Hide the overflow
+     * Hide the backdrop
      */
-    hideOverlay?: boolean;
+    hideBackdrop?: boolean;
     /**
      * Props for the modal header
      */
-    headerProps?: ModalHeaderProps;
+    headerProps?: HTMLChakraProps<'div'>;
     /**
      * Props for the modal content
      */
-    contentProps?: ModalContentProps;
+    contentProps?: Drawer$1.ContentProps;
     /**
      * Props for the modal footer
      */
-    footerProps?: ModalFooterProps;
-}
-declare const BaseDrawer: React$1.FC<BaseDrawerProps>;
-interface DrawerProps extends BaseDrawerProps {
+    footerProps?: HTMLChakraProps<'div'>;
     /**
-     * Drawer footer content, wrapped with `DrawerFooter`
+     * Props for the modal body
      */
-    footer?: React$1.ReactNode;
+    bodyProps?: HTMLChakraProps<'div'>;
 }
-declare const Drawer: React$1.FC<DrawerProps>;
+declare const Drawer: React.FC<DrawerProps>;
 
-interface MenuDialogProps extends BaseModalProps {
+interface AlertDialogProps extends Omit<Dialog.RootProps, 'leastDestructiveRef' | 'onOpenChange' | 'open'> {
     /**
-     * The modal footer, wrapped with `ModalFooter`
+     * Whether the dialog is open
      */
-    footer?: React$1.ReactNode;
-}
-declare const MenuDialog: React$1.FC<MenuDialogProps>;
-interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'>, Omit<MenuListProps, 'title'> {
-}
-declare const MenuDialogList: _chakra_ui_react.ComponentWithAs<"div", MenuDialogListProps>;
-
-type FormDialogHandler<T> = T extends YupFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'yup'> ? YupHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends ZodFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'zod'> ? ZodHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides> ? FormHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : never;
-type ZodHandler<FieldDefs, ExtraProps = object, ExtraOverrides = object, Type extends 'zod' = 'zod'> = <TSchema extends z.AnyZodObject = z.AnyZodObject, TFieldValues extends z.infer<TSchema> = z.infer<TSchema>, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs, ExtraOverrides> & {
-    ref?: React.ForwardedRef<HTMLFormElement>;
-} & ExtraProps) => ModalId;
-type FormHandler<FieldDefs, ExtraProps = object, ExtraOverrides = object> = <TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs, ExtraOverrides> & {
-    ref?: React.ForwardedRef<HTMLFormElement>;
-} & ExtraProps) => ModalId;
-type YupHandler<FieldDefs, ExtraProps = object, ExtraOverrides = object, Type extends 'yup' = 'yup'> = <TSchema extends AnyObjectSchema = AnyObjectSchema, TFieldValues extends InferType<TSchema> = InferType<TSchema>, // placeholder
-TContext extends object = object>(props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs, ExtraOverrides> & {
-    ref?: React.ForwardedRef<HTMLFormElement>;
-} & ExtraProps) => ModalId;
-
-interface ModalsContextValue<TModals extends Record<string, React$1.FC<any>> = Record<string, React$1.FC<any>>, TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>> {
-    open: <T extends OpenOptions<TTypes>>(componentOrOptions: T extends {
-        component: infer TComponent extends React$1.FC<any>;
-    } ? WithModalOptions<React$1.ComponentPropsWithRef<TComponent>> : T extends {
-        type: infer TType extends keyof TModals;
-    } ? WithModalOptions<React$1.ComponentPropsWithRef<TModals[TType]>> : T, options?: T extends React$1.FC<any> ? WithModalOptions<React$1.ComponentPropsWithRef<T>> : never) => ModalId;
-    drawer: (options: DrawerOptions) => ModalId;
-    alert: (options: ConfirmDialogOptions) => ModalId;
-    confirm: (options: ConfirmDialogOptions) => ModalId;
-    menu: (options: MenuDialogOptions) => ModalId;
-    form: FormDialogHandler<TModals['form']>;
-    close: (id: ModalId) => void;
-    closeAll: () => void;
-}
-declare const ModalsContext: React$1.Context<ModalsContextValue<{
-    alert: React$1.FC<ConfirmDialogProps>;
-    confirm: React$1.FC<ConfirmDialogProps>;
-    drawer: React$1.FC<DrawerProps>;
-    modal: React$1.FC<BaseModalProps>;
-    menu: React$1.FC<MenuDialogProps>;
-    form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
-        cancel?: _chakra_ui_react.ButtonProps;
-    }>;
-}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null>;
-interface ModalsProviderProps<TModals extends Record<string, React$1.FC<any>> = Record<string, React$1.FC<any>>> {
-    children: React$1.ReactNode;
-    modals?: TModals;
-}
-type ModalId = string | number;
-type WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions;
-interface ModalOptions extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {
-    onClose?: (args: {
-        force?: boolean;
-    }) => Promise<boolean | undefined> | void;
-    [key: string]: any;
-}
-interface DrawerOptions extends ModalOptions, Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {
-}
-interface ConfirmDialogOptions extends ModalOptions, Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {
-}
-interface MenuDialogOptions extends ModalOptions, Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {
-}
-interface FormDialogOptions extends ModalOptions, Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {
-}
-interface OpenOptions<TModalTypes extends string> extends ModalOptions {
-    type?: TModalTypes;
-    scope?: ModalScopes;
-}
-type ModalScopes = 'modal' | 'alert';
-interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions, TModalTypes extends string = string> {
+    open: boolean;
     /**
-     * The modal id, autogenerated when not set.
-     * Can be used to close modals.
+     * Callback when the dialog is opened or closed
      */
-    id?: ModalId | null;
+    onOpenChange: (details: {
+        open: boolean;
+    }) => void;
     /**
-     * The modal props
+     * The dialog title
      */
-    props?: TModalOptions | null;
+    title?: React.ReactNode;
+    translations?: {
+        cancel?: React.ReactNode;
+        confirm?: React.ReactNode;
+        close?: React.ReactNode;
+    };
+    slotProps?: {
+        cancel?: ButtonProps;
+        confirm?: ButtonProps;
+        footer?: HTMLChakraProps<'div'>;
+    };
     /**
-     * The modal scope
-     * Modals can only have one level per scope.
-     * The default scopes are 'modal' and 'alert', alerts can be openend above modals.
+     * Close the dialog on cancel
+     * @default true
      */
-    scope?: ModalScopes | string;
+    closeOnCancel?: boolean;
     /**
-     * The modal type to open.
-     * Build in types are 'modal', 'drawer', 'alert', 'confirm'
-     *
-     * Custom types can be configured using the `modals` prop of `ModalProvider`
+     * Close the dialog on confirm
+     * @default true
      */
-    type?: TModalTypes;
+    closeOnConfirm?: boolean;
     /**
-     * Render a custom modal component.
-     * This will ignore the `type` param.
+     * Hide the backdrop
      */
-    component?: React$1.FC<BaseModalProps>;
+    backdrop?: boolean;
     /**
-     * Whether the modal is open or not.
-     * This is used internally to keep track of the modal state.
+     * Hide the close button
      */
-    isOpen?: boolean;
+    hideCloseButton?: boolean;
+    /**
+     * Defines which button gets initial focus
+     * https://www.w3.org/TR/wai-aria-practices/#alertdialog
+     */
+    leastDestructiveFocus?: 'cancel' | 'confirm';
+    /**
+     * Function that's called when cancel is clicked
+     */
+    onCancel?: () => void;
+    /**
+     * Function that's called when confirm is clicked.
+     */
+    onConfirm?: () => Promise<void> | void;
 }
-declare function ModalsProvider({ children, modals }: ModalsProviderProps): react_jsx_runtime.JSX.Element;
-declare const useModalsContext: () => ModalsContextValue<{
-    alert: React$1.FC<ConfirmDialogProps>;
-    confirm: React$1.FC<ConfirmDialogProps>;
-    drawer: React$1.FC<DrawerProps>;
-    modal: React$1.FC<BaseModalProps>;
-    menu: React$1.FC<MenuDialogProps>;
-    form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
-        cancel?: _chakra_ui_react.ButtonProps;
-    }>;
-}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null;
-declare const useModals: () => ModalsContextValue<{
-    alert: React$1.FC<ConfirmDialogProps>;
-    confirm: React$1.FC<ConfirmDialogProps>;
-    drawer: React$1.FC<DrawerProps>;
-    modal: React$1.FC<BaseModalProps>;
-    menu: React$1.FC<MenuDialogProps>;
-    form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
-        cancel?: _chakra_ui_react.ButtonProps;
-    }>;
-}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer">;
+declare const AlertDialog: React.FC<AlertDialogProps>;
 
-interface CreateModalsOptions<TModalDefs extends Record<string, React.FC<any>>> {
-    modals: TModalDefs;
-}
-declare const createModals: <TModalDefs extends Record<string, React.FC<any>>>(options: CreateModalsOptions<TModalDefs>) => {
-    ModalsProvider: (props: Omit<ModalsProviderProps, "modals">) => react_jsx_runtime.JSX.Element;
-    useModals: () => ModalsContextValue<{
-        alert: React$1.FC<ConfirmDialogProps>;
-        confirm: React$1.FC<ConfirmDialogProps>;
-        drawer: React$1.FC<DrawerProps>;
-        modal: React$1.FC<BaseModalProps>;
-        menu: React$1.FC<MenuDialogProps>;
-        form: _saas_ui_forms.FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
-            cancel?: _chakra_ui_react.ButtonProps;
-        }>;
-    } & TModalDefs>;
-};
+declare const useModals: () => _saas_ui_modals_provider.ModalsContextValue<{
+    alert: React.FC<AlertDialogProps>;
+    confirm: React.FC<AlertDialogProps>;
+    drawer: React.FC<DrawerProps>;
+    modal: React.FC<ModalProps>;
+}, "alert" | "drawer" | "modal" | "confirm">;
+declare const ModalsProvider: (props: Omit<_saas_ui_modals_provider.ModalsProviderProps, "modals">) => react_jsx_runtime.JSX.Element;
 
-export { BaseDrawer, type BaseDrawerProps, BaseModalProps, ConfirmDialog, type ConfirmDialogOptions, type ConfirmDialogProps, type CreateModalsOptions, Drawer, type DrawerOptions, type DrawerProps, FormDialogFieldOverrides, type FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, type MenuDialogListProps, type MenuDialogOptions, type MenuDialogProps, type ModalConfig, type ModalId, type ModalScopes, ModalsContext, type ModalsContextValue, ModalsProvider, type ModalsProviderProps, type OpenOptions, createModals, useModals, useModalsContext };
+export { AlertDialog, type AlertDialogProps, Drawer, type DrawerProps, Modal, type ModalProps, ModalsProvider, useModals };