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

package/src/drawer.tsx

@@ -9,13 +9,29 @@ import {
   DrawerBody,
   DrawerCloseButton,
   DrawerProps as ChakraDrawerProps,
+  ModalHeaderProps,
+  ModalContentProps,
+  ModalFooterProps,
 } from '@chakra-ui/react'
+import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { runIfFn } from '@chakra-ui/utils'
 
 export interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {
   /**
    * The drawer title
    */
   title: React.ReactNode
+  /**
+   * The modal children
+   */
+  children: MaybeRenderProp<{
+    isOpen: boolean
+    onClose: () => void
+  }>
+  /**
+   * The modal footer
+   */
+  footer?: React.ReactNode
   /**
    * Hide the close button
    */
@@ -24,26 +40,45 @@ export interface BaseDrawerProps extends Omit<ChakraDrawerProps, '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
 }
 
 export const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {
   const {
     title,
     children,
+    footer,
     isOpen,
     onClose,
     hideCloseButton,
     hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
     ...rest
   } = props
   return (
     <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>
       {!hideOverlay && <DrawerOverlay />}
-      <DrawerContent>
-        <DrawerHeader>{title}</DrawerHeader>
+      <DrawerContent {...contentProps}>
+        {title && <DrawerHeader {...headerProps}>{title}</DrawerHeader>}
         {!hideCloseButton && <DrawerCloseButton />}
-        {children}
+        {runIfFn(children, {
+          isOpen,
+          onClose,
+        })}
+        {footer && <DrawerFooter {...footerProps}>{footer}</DrawerFooter>}
       </DrawerContent>
     </ChakraDrawer>
   )
@@ -57,12 +92,15 @@ export interface DrawerProps extends BaseDrawerProps {
 }
 
 export const Drawer: React.FC<DrawerProps> = (props) => {
-  const { footer, children, ...rest } = props
+  const { children, isOpen, onClose, ...rest } = props
   return (
-    <BaseDrawer {...rest}>
-      <DrawerBody>{children}</DrawerBody>
-
-      {footer && <DrawerFooter>{footer}</DrawerFooter>}
+    <BaseDrawer isOpen={isOpen} onClose={onClose} {...rest}>
+      <DrawerBody>
+        {runIfFn(children, {
+          isOpen,
+          onClose,
+        })}
+      </DrawerBody>
     </BaseDrawer>
   )
 }

package/src/form.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react'
 
-import { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'
+import {
+  ModalBody,
+  ModalFooter,
+  Button,
+  forwardRef,
+  ButtonProps,
+} from '@chakra-ui/react'
 import { runIfFn } from '@saas-ui/react-utils'
 
 import {
@@ -10,16 +16,28 @@ import {
   FormProps,
   FieldValues,
   FieldResolver,
+  FieldProps,
+  FormType,
+  DefaultFieldOverrides,
 } from '@saas-ui/forms'
 
+import { YupFormType } from '@saas-ui/forms/yup'
+import { ZodFormType } from '@saas-ui/forms/zod'
+
 import { BaseModal, BaseModalProps } from './modal'
 
+export type FormDialogFieldOverrides = DefaultFieldOverrides & {
+  cancel?: ButtonProps
+}
+
 export interface FormDialogProps<
+  TSchema = any,
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
 > extends Omit<BaseModalProps, 'children'>,
     Pick<
-      FormProps<TFieldValues, TContext>,
+      FormProps<TSchema, TFieldValues, TContext, TFieldTypes>,
       | 'schema'
       | 'defaultValues'
       | 'values'
@@ -35,110 +53,157 @@ export interface FormDialogProps<
       | '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
   /**
    * A schema field resolver used to auto generate form fields.
    */
   fieldResolver?: FieldResolver
+  /**
+   * Field overrides
+   */
+  fields?: FormDialogFieldOverrides
 }
+
+const useFormProps = (props: FormDialogProps) => {
+  const {
+    schema,
+    resolver,
+    fieldResolver,
+    defaultValues,
+    values,
+    context,
+    onChange,
+    onSubmit,
+    onError,
+    mode,
+    reValidateMode,
+    shouldFocusError = true,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError = 100,
+    fields,
+    ...modalProps
+  } = props
+
+  const formProps = {
+    schema,
+    resolver,
+    defaultValues,
+    values,
+    context,
+    onChange,
+    onSubmit,
+    onError,
+    mode,
+    reValidateMode,
+    shouldFocusError,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError,
+    fields,
+  }
+
+  return { modalProps, formProps, fields }
+}
+
 /**
- * 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
+ * @todo make this dynamic to support other schema types
  */
-export const FormDialog = forwardRef(
-  <
-    TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object
-  >(
-    props: FormDialogProps<TFieldValues, TContext>,
-    ref: React.ForwardedRef<HTMLFormElement>
-  ) => {
-    const {
-      children,
-      schema,
-      resolver,
-      fieldResolver,
-      defaultValues,
-      values,
-      context,
-      onChange,
-      onSubmit,
-      onError,
-      mode,
-      reValidateMode,
-      shouldFocusError = true,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError = 100,
-      cancelLabel = 'Cancel',
-      submitLabel = 'Submit',
-      footer,
-      isOpen,
-      onClose,
-      ...rest
-    } = props
-
-    const formProps = {
-      ref,
-      schema,
-      resolver,
-      defaultValues,
-      values,
-      context,
-      onChange,
-      onSubmit,
-      onError,
-      mode,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-    }
+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 IsSchemaType<T, Schema, FieldDefs> = T extends DefaultFormType<FieldDefs>
+  ? T extends (
+      props: FormProps<infer TSchema, infer TFieldValues, infer TContext>
+    ) => any
+    ? Schema extends TSchema
+      ? true
+      : false
+    : false
+  : false
+
+export type DefaultFormType<
+  FieldDefs = any,
+  ExtraProps = object,
+  ExtraOverrides = FormDialogFieldOverrides
+> = (<
+  TSchema = unknown,
+  TFieldValues extends Record<string, any> = any,
+  TContext extends object = object
+>(
+  props: any
+) => React.ReactElement) & {
+  displayName?: string
+  id?: string
+}
+
+export function createFormDialog<
+  FieldDefs = any,
+  ExtraProps = object,
+  ExtraOverrides = FormDialogFieldOverrides,
+  TFormType extends DefaultFormType<
+    FieldDefs,
+    ExtraProps,
+    ExtraOverrides
+  > = DefaultFormType<FieldDefs, ExtraProps, ExtraOverrides>
+>(Form: TFormType) {
+  const Dialog = forwardRef<any, 'div'>((props, ref) => {
+    const { isOpen, onClose, footer, children, ...rest } = props
+    const { modalProps, formProps, fields } = useFormProps(rest)
     return (
-      <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>
-        <Form {...formProps} ref={ref}>
-          {(form) => (
+      <BaseModal {...modalProps} isOpen={isOpen} onClose={onClose}>
+        <Form ref={ref} {...(formProps as any)}>
+          {(form: any) => (
             <>
-              <ModalBody>
-                {runIfFn(children, form) || (
-                  <AutoFields
-                    schema={schema}
-                    fieldResolver={fieldResolver}
-                    focusFirstField
-                  />
-                )}
-              </ModalBody>
+              <ModalBody>{runIfFn(children, form) || <AutoFields />}</ModalBody>
 
               {footer || (
                 <ModalFooter>
-                  <Button variant="ghost" mr={3} onClick={onClose}>
-                    {cancelLabel}
+                  <Button
+                    variant="ghost"
+                    mr={3}
+                    onClick={onClose}
+                    {...fields?.cancel}
+                  >
+                    {fields?.cancel?.children ?? 'Cancel'}
                   </Button>
-                  <SubmitButton>{submitLabel}</SubmitButton>
+                  <SubmitButton {...fields?.submit} />
                 </ModalFooter>
               )}
             </>
@@ -146,9 +211,17 @@ export const FormDialog = forwardRef(
         </Form>
       </BaseModal>
     )
-  }
-) as <TFieldValues extends FieldValues>(
-  props: FormDialogProps<TFieldValues> & {
-    ref?: React.ForwardedRef<HTMLFormElement>
-  }
-) => React.ReactElement
+  }) as MergeDialogProps<TFormType>
+
+  Dialog.displayName = `${Form.displayName || Form.name}Dialog`
+  Dialog.id = Form.id
+
+  return Dialog
+}
+
+/**
+ * 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 = createFormDialog(Form)

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}>

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>
   )
 }