@saas-ui/modals 2.0.0-next.8 → 2.0.0-rc.22

package/CHANGELOG.md

@@ -1,5 +1,114 @@
 # @saas-ui/modals
 
+## 2.0.0-rc.22
+
+### Patch Changes
+
+- @saas-ui/forms@2.0.0-rc.22
+
+## 2.0.0-next.21
+
+### Patch Changes
+
+- @saas-ui/forms@2.0.0-next.21
+
+## 2.0.0-next.20
+
+### Patch Changes
+
+- Updated dependencies [a9ca90dd]
+  - @saas-ui/forms@2.0.0-next.20
+
+## 2.0.0-next.19
+
+### Patch Changes
+
+- @saas-ui/forms@2.0.0-next.19
+
+## 2.0.0-next.18
+
+### Patch Changes
+
+- Updated dependencies [01ac442f]
+  - @saas-ui/forms@2.0.0-next.18
+
+## 2.0.0-next.17
+
+### Patch Changes
+
+- @saas-ui/forms@2.0.0-next.17
+
+## 2.0.0-next.16
+
+### Patch Changes
+
+- cc713117: Fix issue where onCloseComplete would not be called
+  - @saas-ui/forms@2.0.0-next.16
+
+## 2.0.0-next.15
+
+### Minor Changes
+
+- 2d18cdc2: New createFormDialog function to create Zod or Yup specific FormDialogs
+
+### Patch Changes
+
+- Updated dependencies [2d18cdc2]
+  - @saas-ui/forms@2.0.0-next.15
+
+## 2.0.0-next.14
+
+### Patch Changes
+
+- Fix esm bundle import
+- Updated dependencies
+  - @saas-ui/react-utils@2.0.0-next.3
+  - @saas-ui/forms@2.0.0-next.14
+  - @saas-ui/hooks@2.0.0-next.4
+
+## 2.0.0-next.13
+
+### Patch Changes
+
+- 1563cc9a: BaseDrawer now accepts header, content and footer props.
+- Bump version
+- Updated dependencies
+- Updated dependencies [6c63217c]
+  - @saas-ui/react-utils@2.0.0-next.2
+  - @saas-ui/forms@2.0.0-next.13
+  - @saas-ui/hooks@2.0.0-next.3
+
+## 2.0.0-next.12
+
+### Patch Changes
+
+- Updated dependencies [a7ef6dd9]
+  - @saas-ui/forms@2.0.0-next.12
+
+## 2.0.0-next.11
+
+### Patch Changes
+
+- @saas-ui/forms@2.0.0-next.11
+
+## 2.0.0-next.10
+
+### Patch Changes
+
+- @saas-ui/forms@2.0.0-next.10
+
+## 2.0.0-next.9
+
+### Minor Changes
+
+- 84e59fec: Added new createModals method to create typesafe modals managers with support for custom modals
+- 1177329d: BaseModal now accepts header, content and footer props
+
+### Patch Changes
+
+- Updated dependencies [84e59fec]
+  - @saas-ui/forms@2.0.0-next.9
+
 ## 2.0.0-next.8
 
 ### Patch Changes
@@ -78,6 +187,26 @@
   - @saas-ui/hooks@2.0.0-next.0
   - @saas-ui/react-utils@2.0.0-next.0
 
+## 1.5.7
+
+### Patch Changes
+
+- Fix types path
+- Updated dependencies
+  - @saas-ui/button@1.4.2
+  - @saas-ui/forms@1.5.5
+  - @saas-ui/menu@1.4.3
+
+## 1.5.6
+
+### Patch Changes
+
+- b2302a3: Add types to package.json exports
+- Updated dependencies [b2302a3]
+  - @saas-ui/button@1.4.1
+  - @saas-ui/forms@1.5.4
+  - @saas-ui/menu@1.4.2
+
 ## 1.5.5
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,21 +1,28 @@
-import * as React from 'react';
-import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalProps, MenuListProps } from '@chakra-ui/react';
+import * as React$1 from 'react';
+import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalHeaderProps, ModalContentProps, ModalFooterProps, ModalProps, MenuListProps } from '@chakra-ui/react';
+import { MaybeRenderProp } from '@chakra-ui/react-utils';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
-import { FieldValues, FormProps, FieldResolver } from '@saas-ui/forms';
+import * as _saas_ui_forms from '@saas-ui/forms';
+import { DefaultFieldOverrides, FieldValues, FieldProps, FormProps, FieldResolver, FormType, WithFields } from '@saas-ui/forms';
+import { YupFormType, AnyObjectSchema } from '@saas-ui/forms/yup';
+import { ZodFormType } from '@saas-ui/forms/zod';
+import * as _chakra_ui_button_dist_button from '@chakra-ui/button/dist/button';
+import { z } from 'zod';
+import { InferType } from 'yup';
 
 interface ConfirmDialogProps extends Omit<AlertDialogProps, 'leastDestructiveRef'> {
     /**
      * The dialog title
      */
-    title?: React.ReactNode;
+    title?: React$1.ReactNode;
     /**
      * The cancel button label
      */
-    cancelLabel?: React.ReactNode;
+    cancelLabel?: React$1.ReactNode;
     /**
      * The confirm button label
      */
-    confirmLabel?: React.ReactNode;
+    confirmLabel?: React$1.ReactNode;
     /**
      * The cancel button props
      */
@@ -52,13 +59,24 @@ interface ConfirmDialogProps extends Omit<AlertDialogProps, 'leastDestructiveRef
      */
     onConfirm?: () => void;
 }
-declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+declare const ConfirmDialog: React$1.FC<ConfirmDialogProps>;
 
 interface BaseDrawerProps extends Omit<DrawerProps$1, 'children'> {
     /**
      * The drawer title
      */
-    title: React.ReactNode;
+    title: React$1.ReactNode;
+    /**
+     * The modal children
+     */
+    children: MaybeRenderProp<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
+    /**
+     * The modal footer
+     */
+    footer?: React$1.ReactNode;
     /**
      * Hide the close button
      */
@@ -67,26 +85,44 @@ interface BaseDrawerProps extends Omit<DrawerProps$1, 'children'> {
      * Hide the overflow
      */
     hideOverlay?: boolean;
-    children?: React.ReactNode;
+    /**
+     * Props for the modal header
+     */
+    headerProps?: ModalHeaderProps;
+    /**
+     * Props for the modal content
+     */
+    contentProps?: ModalContentProps;
+    /**
+     * Props for the modal footer
+     */
+    footerProps?: ModalFooterProps;
 }
-declare const BaseDrawer: React.FC<BaseDrawerProps>;
+declare const BaseDrawer: React$1.FC<BaseDrawerProps>;
 interface DrawerProps extends BaseDrawerProps {
     /**
      * Drawer footer content, wrapped with `DrawerFooter`
      */
-    footer?: React.ReactNode;
+    footer?: React$1.ReactNode;
 }
-declare const Drawer: React.FC<DrawerProps>;
+declare const Drawer: React$1.FC<DrawerProps>;
 
-interface BaseModalProps extends ModalProps {
+interface BaseModalProps extends Omit<ModalProps, 'children'> {
     /**
      * The modal title
      */
-    title?: React.ReactNode;
+    title?: React$1.ReactNode;
+    /**
+     * The modal children
+     */
+    children: MaybeRenderProp<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
     /**
      * The modal footer
      */
-    footer?: React.ReactNode;
+    footer?: React$1.ReactNode;
     /**
      * Hide the close button
      */
@@ -95,77 +131,115 @@ interface BaseModalProps extends ModalProps {
      * Hide the overlay
      */
     hideOverlay?: boolean;
+    /**
+     * Props for the modal header
+     */
+    headerProps?: ModalHeaderProps;
+    /**
+     * Props for the modal content
+     */
+    contentProps?: ModalContentProps;
+    /**
+     * Props for the modal footer
+     */
+    footerProps?: ModalFooterProps;
 }
-declare const BaseModal: React.FC<BaseModalProps>;
-declare const Modal: React.FC<BaseModalProps>;
+declare const BaseModal: React$1.FC<BaseModalProps>;
+declare const Modal: React$1.FC<BaseModalProps>;
 
 interface MenuDialogProps extends BaseModalProps {
     /**
      * The modal footer, wrapped with `ModalFooter`
      */
-    footer?: React.ReactNode;
+    footer?: React$1.ReactNode;
 }
-declare const MenuDialog: React.FC<MenuDialogProps>;
+declare const MenuDialog: React$1.FC<MenuDialogProps>;
 interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'>, Omit<MenuListProps, 'title'> {
 }
 declare const MenuDialogList: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", MenuDialogListProps>;
 
-interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TFieldValues, TContext>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError'> {
+type FormDialogFieldOverrides = DefaultFieldOverrides & {
+    cancel?: ButtonProps;
+};
+interface FormDialogProps<TSchema = any, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TSchema, TFieldValues, TContext, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'children'> {
     /**
      * The modal footer, will be wrapped with `ModalFooter`.
      * Defaults to a cancel and submit button.
      */
-    footer?: React.ReactNode;
-    /**
-     * The cancel button label
-     * @default "Cancel"
-     */
-    cancelLabel?: React.ReactNode;
-    /**
-     * The submit button label
-     * @default "Submit"
-     */
-    submitLabel?: React.ReactNode;
-    /**
-     * If no children are passed, this will auto render fields based on the supplied schema.
-     */
-    children?: React.ReactNode;
+    footer?: React$1.ReactNode;
     /**
      * A schema field resolver used to auto generate form fields.
      */
     fieldResolver?: FieldResolver;
+    /**
+     * Field overrides
+     */
+    fields?: FormDialogFieldOverrides;
 }
+/**
+ * @todo make this dynamic to support other schema types
+ */
+type MergeDialogProps<T> = T extends YupFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'yup'> ? YupFormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraOverrides & FormDialogFieldOverrides> : T extends ZodFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'zod'> ? ZodFormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraOverrides & FormDialogFieldOverrides> : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides> ? FormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraOverrides & FormDialogFieldOverrides> : never;
+type DefaultFormType<FieldDefs = any, ExtraProps = object, ExtraOverrides = FormDialogFieldOverrides> = (<TSchema = unknown, TFieldValues extends Record<string, any> = any, TContext extends object = object>(props: any) => React$1.ReactElement) & {
+    displayName?: string;
+    id?: string;
+};
+declare function createFormDialog<FieldDefs = any, ExtraProps = object, ExtraOverrides = FormDialogFieldOverrides, TFormType extends DefaultFormType<FieldDefs, ExtraProps, ExtraOverrides> = DefaultFormType<FieldDefs, ExtraProps, ExtraOverrides>>(Form: TFormType): MergeDialogProps<TFormType>;
 /**
  * Can be used to quickly request information from people without leaving the current page.
  *
  * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
  */
-declare const FormDialog: <TFieldValues extends FieldValues>(props: FormDialogProps<TFieldValues, object> & {
-    ref?: React.ForwardedRef<HTMLFormElement> | undefined;
-}) => React.ReactElement;
+declare const FormDialog: FormType<unknown, object & Omit<BaseModalProps, "children">, object & DefaultFieldOverrides & {
+    cancel?: ButtonProps | undefined;
+}>;
+
+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 {
-    open: (options: OpenOptions) => 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: (options: FormDialogOptions) => ModalId;
+    form: FormDialogHandler<TModals['form']>;
     close: (id: ModalId) => void;
     closeAll: () => void;
 }
-declare const ModalsContext: React.Context<ModalsContextValue | null>;
-interface ModalsProviderProps {
-    children: React.ReactNode;
-    modals?: Record<string, React.FC<any>>;
+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">, object & _saas_ui_forms.DefaultFieldOverrides & {
+        cancel?: _chakra_ui_button_dist_button.ButtonProps | undefined;
+    }>;
+}, "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;
-interface ModalOptions extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
+type WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions;
+interface ModalOptions extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {
     onClose?: (args: {
         force?: boolean;
     }) => Promise<boolean | undefined> | void;
-    body?: React.ReactNode;
-    children?: React.ReactNode;
     [key: string]: any;
 }
 interface DrawerOptions extends ModalOptions, Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {
@@ -176,13 +250,12 @@ interface MenuDialogOptions extends ModalOptions, Omit<MenuDialogProps, 'onClose
 }
 interface FormDialogOptions extends ModalOptions, Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {
 }
-interface OpenOptions extends ModalOptions {
-    type?: ModalTypes;
+interface OpenOptions<TModalTypes extends string> extends ModalOptions {
+    type?: TModalTypes;
     scope?: ModalScopes;
 }
 type ModalScopes = 'modal' | 'alert';
-type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu' | string;
-interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
+interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions, TModalTypes extends string = string> {
     /**
      * The modal id, autogenerated when not set.
      * Can be used to close modals.
@@ -204,12 +277,12 @@ interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
      *
      * Custom types can be configured using the `modals` prop of `ModalProvider`
      */
-    type?: ModalTypes;
+    type?: TModalTypes;
     /**
      * Render a custom modal component.
      * This will ignore the `type` param.
      */
-    component?: React.FC<BaseModalProps>;
+    component?: React$1.FC<BaseModalProps>;
     /**
      * Whether the modal is open or not.
      * This is used internally to keep track of the modal state.
@@ -217,7 +290,24 @@ interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
     isOpen?: boolean;
 }
 declare function ModalsProvider({ children, modals }: ModalsProviderProps): JSX.Element;
-declare const useModalsContext: () => ModalsContextValue;
-declare const useModals: () => ModalsContextValue;
+declare const useModalsContext: () => ModalsContextValue<Record<string, React$1.FC<any>>, string>;
+declare const useModals: () => ModalsContextValue<Record<string, React$1.FC<any>>, string>;
+
+interface CreateModalsOptions<TModalDefs extends Record<string, React.FC<any>>> {
+    modals: TModalDefs;
+}
+declare const createModals: <TModalDefs extends Record<string, React$1.FC<any>>>(options: CreateModalsOptions<TModalDefs>) => {
+    ModalsProvider: (props: Omit<ModalsProviderProps, 'modals'>) => 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">, object & _saas_ui_forms.DefaultFieldOverrides & {
+            cancel?: _chakra_ui_button_dist_button.ButtonProps | undefined;
+        }>;
+    } & TModalDefs, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer" | Extract<keyof TModalDefs, string>>;
+};
 
-export { BaseDrawer, BaseDrawerProps, BaseModal, BaseModalProps, ConfirmDialog, ConfirmDialogOptions, ConfirmDialogProps, Drawer, DrawerOptions, DrawerProps, FormDialog, FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, MenuDialogListProps, MenuDialogOptions, MenuDialogProps, Modal, ModalConfig, ModalId, ModalScopes, ModalTypes, ModalsContext, ModalsContextValue, ModalsProvider, OpenOptions, useModals, useModalsContext };
+export { BaseDrawer, BaseDrawerProps, BaseModal, BaseModalProps, ConfirmDialog, ConfirmDialogOptions, ConfirmDialogProps, CreateModalsOptions, DefaultFormType, Drawer, DrawerOptions, DrawerProps, FormDialog, FormDialogFieldOverrides, FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, MenuDialogListProps, MenuDialogOptions, MenuDialogProps, Modal, ModalConfig, ModalId, ModalScopes, ModalsContext, ModalsContextValue, ModalsProvider, ModalsProviderProps, OpenOptions, createFormDialog, createModals, useModals, useModalsContext };