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

package/src/create-modals.tsx

@@ -0,0 +1,34 @@
+import { defaultModals } from './default-modals'
+import {
+  ModalsContextValue,
+  ModalsProvider,
+  ModalsProviderProps,
+  useModals,
+} from './provider'
+
+interface CreateModalOptions {}
+
+const createModal = (Component: React.FC<any>, options: CreateModalOptions) => {
+  return Component
+}
+
+export interface CreateModalsOptions<TModalDefs> {
+  modals: TModalDefs
+}
+
+export const createModals = <TModalDefs extends Record<string, React.FC<any>>>(
+  options: CreateModalsOptions<TModalDefs>
+) => {
+  const modals = {
+    ...defaultModals,
+    ...options.modals,
+  }
+  const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {
+    return <ModalsProvider children={props.children} modals={modals} />
+  }
+
+  return {
+    ModalsProvider: Provider,
+    useModals: useModals as () => ModalsContextValue<typeof modals>,
+  }
+}

package/src/default-modals.ts

@@ -0,0 +1,14 @@
+import { ConfirmDialog } from './dialog'
+import { MenuDialog } from './menu'
+import { FormDialog } from './form'
+import { Drawer } from './drawer'
+import { Modal } from './modal'
+
+export const defaultModals = {
+  alert: ConfirmDialog,
+  confirm: ConfirmDialog,
+  drawer: Drawer,
+  modal: Modal,
+  menu: MenuDialog,
+  form: FormDialog,
+}

package/src/form.tsx

@@ -5,21 +5,24 @@ import { runIfFn } from '@saas-ui/react-utils'
 
 import {
   Form,
-  Fields,
+  AutoFields,
   SubmitButton,
   FormProps,
   FieldValues,
   FieldResolver,
+  FieldProps,
 } from '@saas-ui/forms'
 
 import { BaseModal, BaseModalProps } from './modal'
 
 export interface FormDialogProps<
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object
+  TContext extends object = object,
+  TSchema = any,
+  TFieldTypes = FieldProps<TFieldValues>
 > extends Omit<BaseModalProps, 'children'>,
     Pick<
-      FormProps<TFieldValues, TContext>,
+      FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,
       | 'schema'
       | 'defaultValues'
       | 'values'
@@ -35,6 +38,8 @@ export interface FormDialogProps<
       | 'shouldUseNativeValidation'
       | 'criteriaMode'
       | 'delayError'
+      | 'resetOptions'
+      | 'children'
     > {
   /**
    * The modal footer, will be wrapped with `ModalFooter`.
@@ -51,16 +56,16 @@ export interface FormDialogProps<
    * @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
 }
-
+/**
+ * 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
+ */
 export const FormDialog = forwardRef(
   <
     TFieldValues extends FieldValues = FieldValues,
@@ -121,7 +126,7 @@ export const FormDialog = forwardRef(
             <>
               <ModalBody>
                 {runIfFn(children, form) || (
-                  <Fields
+                  <AutoFields
                     schema={schema}
                     fieldResolver={fieldResolver}
                     focusFirstField

package/src/index.ts

@@ -4,3 +4,5 @@ export * from './modal'
 export * from './menu'
 export * from './form'
 export * from './provider'
+
+export { createModals, type CreateModalsOptions } from './create-modals'

package/src/menu.tsx

@@ -10,6 +10,7 @@ import {
   useMultiStyleConfig,
   Menu,
   MenuListProps,
+  useBreakpointValue,
 } from '@chakra-ui/react'
 
 import { BaseModal, BaseModalProps } from './modal'
@@ -55,7 +56,8 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
       footer,
       initialFocusRef,
       hideCloseButton,
-      motionPreset,
+      motionPreset = 'slideInBottom',
+      isCentered: isCenteredProp,
       ...rest
     } = props
 
@@ -65,6 +67,8 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
 
     const styles = useMultiStyleConfig('Menu', props)
 
+    const isCentered = useBreakpointValue({ base: true, md: false })
+
     return (
       <BaseModal
         isOpen={isOpen}
@@ -73,6 +77,8 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
         title={title}
         hideCloseButton={hideCloseButton}
         motionPreset={motionPreset}
+        isCentered={isCenteredProp ?? isCentered}
+        contentProps={{ mx: 4 }}
       >
         {/* We forward the styles again, otherwise the modal styles will be picked up */}
         <StylesProvider value={styles}>
@@ -86,6 +92,11 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
               ...styles.list,
               boxShadow: 'none',
               border: 0,
+              _dark: {
+                /* @ts-expect-error */
+                ...(styles.list._dark || {}),
+                boxShadow: 'none',
+              },
             }}
           />
         </StylesProvider>

package/src/modal.tsx

@@ -9,13 +9,25 @@ import {
   ModalBody,
   ModalCloseButton,
   ModalProps as ChakraModalProps,
+  ModalContentProps,
+  ModalHeaderProps,
+  ModalFooterProps,
 } from '@chakra-ui/react'
+import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { runIfFn } from '@chakra-ui/utils'
 
-export interface BaseModalProps extends ChakraModalProps {
+export interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {
   /**
    * The modal title
    */
   title?: React.ReactNode
+  /**
+   * The modal children
+   */
+  children: MaybeRenderProp<{
+    isOpen: boolean
+    onClose: () => void
+  }>
   /**
    * The modal footer
    */
@@ -28,6 +40,18 @@ export interface BaseModalProps extends ChakraModalProps {
    * 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
 }
 
 export const BaseModal: React.FC<BaseModalProps> = (props) => {
@@ -39,26 +63,37 @@ export const BaseModal: React.FC<BaseModalProps> = (props) => {
     onClose,
     hideCloseButton,
     hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
     ...rest
   } = props
   return (
     <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>
       {!hideOverlay && <ModalOverlay />}
-      <ModalContent>
-        {title && <ModalHeader>{title}</ModalHeader>}
+      <ModalContent {...contentProps}>
+        {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}
         {!hideCloseButton && <ModalCloseButton />}
-        {children}
-        {footer && <ModalFooter>{footer}</ModalFooter>}
+        {runIfFn(children, {
+          isOpen,
+          onClose,
+        })}
+        {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}
       </ModalContent>
     </ChakraModal>
   )
 }
 
 export const Modal: React.FC<BaseModalProps> = (props) => {
-  const { children, ...rest } = props
+  const { children, isOpen, onClose, ...rest } = props
   return (
-    <BaseModal {...rest}>
-      <ModalBody>{children}</ModalBody>
+    <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>
+      <ModalBody>
+        {runIfFn(children, {
+          isOpen,
+          onClose,
+        })}
+      </ModalBody>
     </BaseModal>
   )
 }

package/src/provider.tsx

@@ -1,38 +1,59 @@
 import * as React from 'react'
 
-import { Modal, BaseModalProps } from './modal'
-import { Drawer, DrawerProps } from './drawer'
-import { ConfirmDialog, ConfirmDialogProps } from './dialog'
-import { MenuDialog, MenuDialogProps } from './menu'
-import { FormDialog, FormDialogProps } from './form'
-
-export interface ModalsContextValue {
-  open: (options: OpenOptions) => ModalId
+import { BaseModalProps } from './modal'
+import { DrawerProps } from './drawer'
+import { ConfirmDialogProps } from './dialog'
+import { MenuDialogProps } from './menu'
+import { FormDialogProps } from './form'
+import { defaultModals } from './default-modals'
+
+export 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
 }
 
-export const ModalsContext = React.createContext<ModalsContextValue | null>(
-  null
-)
+export const ModalsContext = React.createContext<ModalsContextValue<
+  typeof defaultModals
+> | null>(null)
 
-interface ModalsProviderProps {
+export 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
 }
 
 export type ModalId = string | number
 
+type WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions
+
 interface ModalOptions
-  extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
+  extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {
   onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void
-  body?: React.ReactNode
-  children?: React.ReactNode
   [key: string]: any
 }
 
@@ -52,23 +73,16 @@ export interface FormDialogOptions
   extends ModalOptions,
     Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}
 
-export interface OpenOptions extends ModalOptions {
-  type?: ModalTypes
+export interface OpenOptions<TModalTypes extends string> extends ModalOptions {
+  type?: TModalTypes
   scope?: ModalScopes
 }
 
 export type ModalScopes = 'modal' | 'alert'
 
-export type ModalTypes =
-  | 'modal'
-  | 'drawer'
-  | 'alert'
-  | 'confirm'
-  | 'menu'
-  | string
-
 export interface ModalConfig<
-  TModalOptions extends ModalOptions = ModalOptions
+  TModalOptions extends ModalOptions = ModalOptions,
+  TModalTypes extends string = string
 > {
   /**
    * The modal id, autogenerated when not set.
@@ -91,7 +105,7 @@ export interface ModalConfig<
    *
    * 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.
@@ -110,15 +124,6 @@ const initialModalState: ModalConfig = {
   type: 'modal',
 }
 
-const defaultModals = {
-  alert: ConfirmDialog,
-  confirm: ConfirmDialog,
-  drawer: Drawer,
-  modal: Modal,
-  menu: MenuDialog,
-  form: FormDialog,
-}
-
 export function ModalsProvider({ children, modals }: ModalsProviderProps) {
   // Note that updating the Set doesn't trigger a re-render,
   // use in conjuction with setActiveModals
@@ -136,7 +141,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
       ...modals,
     }
 
-    return (type: ModalTypes = 'modal') => {
+    return (type = 'modal') => {
       const component = _modals[type] || _modals.modal
 
       return component
@@ -155,14 +160,20 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     }))
   }
 
-  const open = <T extends ModalOptions>(
-    options: T | React.FC<BaseModalProps>
+  const open = <T extends OpenOptions<any>>(
+    componentOrOptions: any,
+    options?: T extends React.FC<any>
+      ? WithModalOptions<React.ComponentPropsWithRef<T>>
+      : never
   ): ModalId => {
-    if (typeof options === 'function') {
-      const component: React.FC<BaseModalProps> = options
-      options = {
-        component,
+    let _options: ModalOptions
+    if (typeof componentOrOptions === 'function') {
+      _options = {
+        component: componentOrOptions,
+        ...options,
       } as unknown as T
+    } else {
+      _options = componentOrOptions
     }
 
     const {
@@ -171,7 +182,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
       scope = 'modal',
       component,
       ...props
-    } = options
+    } = _options
 
     const modal: ModalConfig<T> = {
       id,
@@ -225,8 +236,10 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     })
   }
 
-  const form = (options: FormDialogOptions): ModalId => {
-    return open<FormDialogOptions>({
+  const form = <TProps extends FormDialogProps = FormDialogProps>(
+    options: WithModalOptions<TProps>
+  ): ModalId => {
+    return open({
       ...options,
       type: 'form',
     })