@saas-ui/modals 2.0.0-next.2 → 2.0.0-next.21

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'
+import { FieldValues, FormType } from '@saas-ui/forms'
+import { FormDialogHandler, FormHandler } from './types'
+
+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: FormDialogHandler<TModals['form']>
   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,
@@ -188,14 +199,14 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     return id
   }
 
-  const drawer = (options: DrawerOptions): ModalId => {
+  const drawer = (options: DrawerOptions) => {
     return open<DrawerOptions>({
       ...options,
       type: 'drawer',
     })
   }
 
-  const alert = (options: ConfirmDialogOptions): ModalId => {
+  const alert = (options: ConfirmDialogOptions) => {
     return open({
       ...options,
       scope: 'alert',
@@ -210,7 +221,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     })
   }
 
-  const confirm = (options: ConfirmDialogOptions): ModalId => {
+  const confirm = (options: ConfirmDialogOptions) => {
     return open<ConfirmDialogOptions>({
       ...options,
       scope: 'alert',
@@ -218,15 +229,15 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     })
   }
 
-  const menu = (options: MenuDialogOptions): ModalId => {
+  const menu = (options: MenuDialogOptions) => {
     return open<MenuDialogOptions>({
       ...options,
       type: 'menu',
     })
   }
 
-  const form = (options: FormDialogOptions): ModalId => {
-    return open<FormDialogOptions>({
+  const form = (options: any) => {
+    return open({
       ...options,
       type: 'form',
     })
@@ -267,6 +278,8 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
         modal.scope
       )
     }
+
+    closeComplete(id)
   }
 
   const closeComplete = (id?: ModalId | null) => {

package/src/types.ts

@@ -0,0 +1,83 @@
+import { FormProps, FormType } from '@saas-ui/forms'
+import { ModalId } from './provider'
+import { AnyObjectSchema, YupFormType } from '@saas-ui/forms/yup'
+import { FormDialogFieldOverrides } from './form'
+import { WithFields } from '@saas-ui/forms'
+import { FieldValues } from '@saas-ui/forms'
+import type { z } from 'zod'
+import type { InferType } from 'yup'
+import { ZodFormType } from '@saas-ui/forms/zod'
+
+export 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
+
+export 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
+
+export 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
+
+export 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