@saas-ui/modals 2.0.0-next.0 → 2.0.0-next.10

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @saas-ui/modals
 
+## 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
+
+- Updated dependencies [6d3f5717]
+  - @saas-ui/forms@2.0.0-next.8
+
+## 2.0.0-next.7
+
+### Patch Changes
+
+- @saas-ui/forms@2.0.0-next.7
+
+## 2.0.0-next.6
+
+### Patch Changes
+
+- Updated dependencies [532011d6]
+- Updated dependencies [532011d6]
+- Updated dependencies [6dd737ce]
+- Updated dependencies [c85541cb]
+- Updated dependencies [39e778d8]
+  - @saas-ui/forms@2.0.0-next.6
+
+## 2.0.0-next.5
+
+### Patch Changes
+
+- Updated dependencies [a8ea24da]
+  - @saas-ui/forms@2.0.0-next.5
+
+## 2.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies [27a68bca]
+  - @saas-ui/hooks@2.0.0-next.2
+  - @saas-ui/forms@2.0.0-next.4
+
+## 2.0.0-next.3
+
+### Patch Changes
+
+- @saas-ui/forms@2.0.0-next.3
+
+## 2.0.0-next.2
+
+### Patch Changes
+
+- @saas-ui/forms@2.0.0-next.2
+
+## 2.0.0-next.1
+
+### Patch Changes
+
+- 166978bd: Fix esm bundle filename.
+- Updated dependencies [166978bd]
+  - @saas-ui/forms@2.0.0-next.1
+  - @saas-ui/hooks@2.0.0-next.1
+  - @saas-ui/react-utils@2.0.0-next.1
+
 ## 2.0.0-next.0
 
 ### Major Changes
@@ -17,6 +96,13 @@
   - @saas-ui/hooks@2.0.0-next.0
   - @saas-ui/react-utils@2.0.0-next.0
 
+## 1.5.5
+
+### Patch Changes
+
+- Updated dependencies [382e095]
+  - @saas-ui/forms@1.5.3
+
 ## 1.5.4
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalProps, MenuListProps } from '@chakra-ui/react';
+import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, 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 { FieldValues, FieldProps, FormProps, FieldResolver } from '@saas-ui/forms';
+import * as react_hook_form from 'react-hook-form';
 
 interface ConfirmDialogProps extends Omit<AlertDialogProps, 'leastDestructiveRef'> {
     /**
@@ -78,11 +81,18 @@ interface DrawerProps extends BaseDrawerProps {
 }
 declare const Drawer: React.FC<DrawerProps>;
 
-interface BaseModalProps extends ModalProps {
+interface BaseModalProps extends Omit<ModalProps, 'children'> {
     /**
      * The modal title
      */
     title?: React.ReactNode;
+    /**
+     * The modal children
+     */
+    children: MaybeRenderProp<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
     /**
      * The modal footer
      */
@@ -95,6 +105,18 @@ 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>;
@@ -110,7 +132,7 @@ interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose'
 }
 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'> {
+interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TFieldValues, TContext, TSchema, 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.
@@ -126,41 +148,54 @@ interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TConte
      * @default "Submit"
      */
     submitLabel?: React.ReactNode;
-    /**
-     * If no children are passed, this will auto render fields based on the supplied schema.
-     */
-    children?: React.ReactNode;
     /**
      * A schema field resolver used to auto generate form fields.
      */
     fieldResolver?: FieldResolver;
 }
-declare const FormDialog: <TFieldValues extends FieldValues>(props: FormDialogProps<TFieldValues, object> & {
+/**
+ * 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, any, FieldProps<TFieldValues>> & {
     ref?: React.ForwardedRef<HTMLFormElement> | undefined;
 }) => React.ReactElement;
 
-interface ModalsContextValue {
-    open: (options: OpenOptions) => ModalId;
+interface ModalsContextValue<TModals extends Record<string, React.FC<any>> = Record<string, React.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.FC<any>;
+    } ? WithModalOptions<React.ComponentPropsWithRef<TComponent>> : T extends {
+        type: infer TType extends keyof TModals;
+    } ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>> : T, options?: T extends React.FC<any> ? WithModalOptions<React.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: <TProps extends FormDialogProps = FormDialogProps>(options: WithModalOptions<TProps>) => ModalId;
     close: (id: ModalId) => void;
     closeAll: () => void;
 }
-declare const ModalsContext: React.Context<ModalsContextValue | null>;
-interface ModalsProviderProps {
+declare const ModalsContext: React.Context<ModalsContextValue<{
+    alert: React.FC<ConfirmDialogProps>;
+    confirm: React.FC<ConfirmDialogProps>;
+    drawer: React.FC<DrawerProps>;
+    modal: React.FC<BaseModalProps>;
+    menu: React.FC<MenuDialogProps>;
+    form: <TFieldValues extends react_hook_form.FieldValues>(props: FormDialogProps<TFieldValues, object, any, _saas_ui_forms.FieldProps<TFieldValues>> & {
+        ref?: React.ForwardedRef<HTMLFormElement> | undefined;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null>;
+interface ModalsProviderProps<TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>> {
     children: React.ReactNode;
-    modals?: Record<string, React.FC<any>>;
+    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'> {
@@ -171,13 +206,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.
@@ -199,7 +233,7 @@ 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.
@@ -212,7 +246,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.FC<any>>, string>;
+declare const useModals: () => ModalsContextValue<Record<string, React.FC<any>>, string>;
+
+interface CreateModalsOptions<TModalDefs> {
+    modals: TModalDefs;
+}
+declare const createModals: <TModalDefs extends Record<string, React.FC<any>>>(options: CreateModalsOptions<TModalDefs>) => {
+    ModalsProvider: (props: Omit<ModalsProviderProps, 'modals'>) => JSX.Element;
+    useModals: () => ModalsContextValue<{
+        alert: React.FC<ConfirmDialogProps>;
+        confirm: React.FC<ConfirmDialogProps>;
+        drawer: React.FC<DrawerProps>;
+        modal: React.FC<BaseModalProps>;
+        menu: React.FC<MenuDialogProps>;
+        form: <TFieldValues extends react_hook_form.FieldValues>(props: FormDialogProps<TFieldValues, object, any, _saas_ui_forms.FieldProps<TFieldValues>> & {
+            ref?: React.ForwardedRef<HTMLFormElement> | undefined;
+        }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    } & 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, Drawer, DrawerOptions, DrawerProps, FormDialog, FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, MenuDialogListProps, MenuDialogOptions, MenuDialogProps, Modal, ModalConfig, ModalId, ModalScopes, ModalsContext, ModalsContextValue, ModalsProvider, ModalsProviderProps, OpenOptions, createModals, useModals, useModalsContext };