@saas-ui/modals 2.4.2 → 3.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/index.ts CHANGED
@@ -1,47 +1,31 @@
1
+ import { createModals } from '@saas-ui/modals-provider'
2
+
3
+ import { defaultModals } from './default-modals.ts'
4
+
1
5
  // Exporting from './dialog'
2
- export { ConfirmDialog } from './dialog'
3
- export type { ConfirmDialogProps } from './dialog'
6
+ export { AlertDialog } from './alert-dialog.tsx'
7
+ export type { AlertDialogProps } from './alert-dialog.tsx'
4
8
 
5
9
  // Exporting from './drawer'
6
- export { BaseDrawer, Drawer } from './drawer'
7
- export type { BaseDrawerProps, DrawerProps } from './drawer'
10
+ export { Drawer } from './drawer'
11
+ export type { DrawerProps } from './drawer'
8
12
 
9
13
  // Exporting from './modal'
10
- export { BaseModal, Modal } from './modal'
11
- export type { BaseModalProps } from './modal'
12
-
13
- // Exporting from './menu'
14
- export { MenuDialog, MenuDialogList } from './menu'
15
- export type { MenuDialogListProps, MenuDialogProps } from './menu'
14
+ export { Modal } from './modal'
15
+ export type { ModalProps } from './modal'
16
16
 
17
17
  // Exporting from './form'
18
- export { FormDialog, createFormDialog } from './form'
19
- export type {
20
- DefaultFormType,
21
- FormDialogFieldOverrides,
22
- FormDialogProps,
23
- } from './form'
18
+ // export { FormDialog, createFormDialog } from './form'
19
+ // export type {
20
+ // DefaultFormType,
21
+ // FormDialogFieldOverrides,
22
+ // FormDialogProps,
23
+ // } from './form'
24
24
 
25
25
  // Exporting from './provider'
26
- export {
27
- ModalsContext,
28
- ModalsProvider,
29
- useModals,
30
- useModalsContext,
31
- } from './provider'
32
- export type {
33
- ConfirmDialogOptions,
34
- DrawerOptions,
35
- FormDialogOptions,
36
- MenuDialogOptions,
37
- ModalConfig,
38
- ModalId,
39
- ModalScopes,
40
- ModalsContextValue,
41
- ModalsProviderProps,
42
- OpenOptions,
43
- } from './provider'
44
-
45
- // Exporting from './create-modals'
46
- export { createModals } from './create-modals'
47
- export type { CreateModalsOptions } from './create-modals'
26
+
27
+ const { useModals, ModalsProvider } = createModals({
28
+ modals: defaultModals,
29
+ })
30
+
31
+ export { ModalsProvider, useModals }
package/src/modal.tsx CHANGED
@@ -1,32 +1,28 @@
1
1
  import * as React from 'react'
2
2
 
3
- import {
4
- Modal as ChakraModal,
5
- ModalOverlay,
6
- ModalContent,
7
- ModalHeader,
8
- ModalFooter,
9
- ModalBody,
10
- ModalCloseButton,
11
- ModalProps as ChakraModalProps,
12
- ModalContentProps,
13
- ModalHeaderProps,
14
- ModalFooterProps,
15
- } from '@chakra-ui/react'
3
+ import type { HTMLChakraProps } from '@chakra-ui/react'
4
+ import { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'
5
+ import { Dialog as BaseDialog } from '@saas-ui/react/dialog'
16
6
 
17
- import { runIfFn, MaybeRenderProp } from '@chakra-ui/utils'
18
-
19
- export interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {
7
+ export interface ModalProps extends Omit<BaseDialog.RootProps, 'children'> {
20
8
  /**
21
9
  * The modal title
22
10
  */
23
11
  title?: React.ReactNode
12
+ /**
13
+ * Whether the modal is open
14
+ */
15
+ open: boolean
16
+ /**
17
+ * Callback when the modal is opened or closed
18
+ */
19
+ onOpenChange: (details: { open: boolean }) => void
24
20
  /**
25
21
  * The modal children
26
22
  */
27
23
  children: MaybeRenderProp<{
28
- isOpen: boolean
29
- onClose: () => void
24
+ open: boolean
25
+ setOpen: (open: boolean) => void
30
26
  }>
31
27
  /**
32
28
  * The modal footer
@@ -39,61 +35,56 @@ export interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {
39
35
  /**
40
36
  * Hide the overlay
41
37
  */
42
- hideOverlay?: boolean
38
+ hideBackdrop?: boolean
43
39
  /**
44
40
  * Props for the modal header
45
41
  */
46
- headerProps?: ModalHeaderProps
42
+ headerProps?: HTMLChakraProps<'div'>
47
43
  /**
48
44
  * Props for the modal content
49
45
  */
50
- contentProps?: ModalContentProps
46
+ contentProps?: HTMLChakraProps<'div'>
47
+ /**
48
+ * Props for the modal body
49
+ */
50
+ bodyProps?: HTMLChakraProps<'div'>
51
51
  /**
52
52
  * Props for the modal footer
53
53
  */
54
- footerProps?: ModalFooterProps
54
+ footerProps?: HTMLChakraProps<'div'>
55
55
  }
56
56
 
57
- export const BaseModal: React.FC<BaseModalProps> = (props) => {
57
+ export const Modal: React.FC<ModalProps> = (props) => {
58
58
  const {
59
59
  title,
60
60
  footer,
61
61
  children,
62
- isOpen,
63
- onClose,
62
+ open,
63
+ onOpenChange,
64
64
  hideCloseButton,
65
- hideOverlay,
65
+ hideBackdrop,
66
66
  headerProps,
67
67
  contentProps,
68
+ bodyProps,
68
69
  footerProps,
69
70
  ...rest
70
71
  } = props
71
72
  return (
72
- <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>
73
- {!hideOverlay && <ModalOverlay />}
74
- <ModalContent {...contentProps}>
75
- {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}
76
- {!hideCloseButton && <ModalCloseButton />}
77
- {runIfFn(children, {
78
- isOpen,
79
- onClose,
80
- })}
81
- {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}
82
- </ModalContent>
83
- </ChakraModal>
84
- )
85
- }
86
-
87
- export const Modal: React.FC<BaseModalProps> = (props) => {
88
- const { children, isOpen, onClose, ...rest } = props
89
- return (
90
- <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>
91
- <ModalBody>
92
- {runIfFn(children, {
93
- isOpen,
94
- onClose,
95
- })}
96
- </ModalBody>
97
- </BaseModal>
73
+ <BaseDialog.Root open={open} onOpenChange={onOpenChange} {...rest}>
74
+ <BaseDialog.Content {...contentProps}>
75
+ {title && (
76
+ <BaseDialog.Header {...headerProps}>{title}</BaseDialog.Header>
77
+ )}
78
+ {!hideCloseButton && <BaseDialog.CloseTrigger />}
79
+ <BaseDialog.Body>
80
+ <BaseDialog.Context>
81
+ {({ open, setOpen }) => runIfFn(children, { open, setOpen })}
82
+ </BaseDialog.Context>
83
+ </BaseDialog.Body>
84
+ {footer && (
85
+ <BaseDialog.Footer {...footerProps}>{footer}</BaseDialog.Footer>
86
+ )}
87
+ </BaseDialog.Content>
88
+ </BaseDialog.Root>
98
89
  )
99
90
  }
package/src/types.ts CHANGED
@@ -1,40 +1,53 @@
1
- import { FormProps, FormType } from '@saas-ui/forms'
2
- import { ModalId } from './provider'
1
+ import type {
2
+ FieldValues,
3
+ FormProps,
4
+ FormType,
5
+ WithFields,
6
+ } from '@saas-ui/forms'
3
7
  import { AnyObjectSchema, YupFormType } from '@saas-ui/forms/yup'
4
- import { FormDialogFieldOverrides } from './form'
5
- import { WithFields } from '@saas-ui/forms'
6
- import { FieldValues } from '@saas-ui/forms'
7
- import type { z } from 'zod'
8
- import type { InferType } from 'yup'
9
8
  import { ZodFormType } from '@saas-ui/forms/zod'
9
+ import { ModalId } from '@saas-ui/modals-provider'
10
+ import type { InferType } from 'yup'
11
+ import type { z } from 'zod'
12
+
13
+ import { FormDialogFieldOverrides } from './form'
10
14
 
11
- export type FormDialogHandler<T> = T extends YupFormType<
12
- infer FieldDefs,
13
- infer ExtraProps,
14
- infer ExtraOverrides,
15
- 'yup'
16
- >
17
- ? YupHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
18
- : T extends ZodFormType<
19
- infer FieldDefs,
20
- infer ExtraProps,
21
- infer ExtraOverrides,
22
- 'zod'
23
- >
24
- ? ZodHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
25
- : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides>
26
- ? FormHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
27
- : never
15
+ export type FormDialogHandler<T> =
16
+ T extends YupFormType<
17
+ infer FieldDefs,
18
+ infer ExtraProps,
19
+ infer ExtraOverrides,
20
+ 'yup'
21
+ >
22
+ ? YupHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
23
+ : T extends ZodFormType<
24
+ infer FieldDefs,
25
+ infer ExtraProps,
26
+ infer ExtraOverrides,
27
+ 'zod'
28
+ >
29
+ ? ZodHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
30
+ : T extends FormType<
31
+ infer FieldDefs,
32
+ infer ExtraProps,
33
+ infer ExtraOverrides
34
+ >
35
+ ? FormHandler<
36
+ FieldDefs,
37
+ object,
38
+ ExtraOverrides & FormDialogFieldOverrides
39
+ >
40
+ : never
28
41
 
29
42
  export type ZodHandler<
30
43
  FieldDefs,
31
44
  ExtraProps = object,
32
45
  ExtraOverrides = object,
33
- Type extends 'zod' = 'zod'
46
+ Type extends 'zod' = 'zod',
34
47
  > = <
35
48
  TSchema extends z.AnyZodObject = z.AnyZodObject,
36
49
  TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,
37
- TContext extends object = object
50
+ TContext extends object = object,
38
51
  >(
39
52
  props: WithFields<
40
53
  FormProps<TSchema, TFieldValues, TContext>,
@@ -42,17 +55,17 @@ export type ZodHandler<
42
55
  ExtraOverrides
43
56
  > & {
44
57
  ref?: React.ForwardedRef<HTMLFormElement>
45
- } & ExtraProps
58
+ } & ExtraProps,
46
59
  ) => ModalId
47
60
 
48
61
  export type FormHandler<
49
62
  FieldDefs,
50
63
  ExtraProps = object,
51
- ExtraOverrides = object
64
+ ExtraOverrides = object,
52
65
  > = <
53
66
  TSchema = unknown,
54
67
  TFieldValues extends FieldValues = FieldValues,
55
- TContext extends object = object
68
+ TContext extends object = object,
56
69
  >(
57
70
  props: WithFields<
58
71
  FormProps<TSchema, TFieldValues, TContext>,
@@ -60,18 +73,18 @@ export type FormHandler<
60
73
  ExtraOverrides
61
74
  > & {
62
75
  ref?: React.ForwardedRef<HTMLFormElement>
63
- } & ExtraProps
76
+ } & ExtraProps,
64
77
  ) => ModalId
65
78
 
66
79
  export type YupHandler<
67
80
  FieldDefs,
68
81
  ExtraProps = object,
69
82
  ExtraOverrides = object,
70
- Type extends 'yup' = 'yup'
83
+ Type extends 'yup' = 'yup',
71
84
  > = <
72
85
  TSchema extends AnyObjectSchema = AnyObjectSchema,
73
86
  TFieldValues extends InferType<TSchema> = InferType<TSchema>, // placeholder
74
- TContext extends object = object
87
+ TContext extends object = object,
75
88
  >(
76
89
  props: WithFields<
77
90
  FormProps<TFieldValues, TContext, TSchema>,
@@ -79,5 +92,5 @@ export type YupHandler<
79
92
  ExtraOverrides
80
93
  > & {
81
94
  ref?: React.ForwardedRef<HTMLFormElement>
82
- } & ExtraProps
95
+ } & ExtraProps,
83
96
  ) => ModalId
@@ -1,154 +0,0 @@
1
- 'use client'
2
-
3
- // src/modal.tsx
4
- import {
5
- Modal as ChakraModal,
6
- ModalOverlay,
7
- ModalContent,
8
- ModalHeader,
9
- ModalFooter,
10
- ModalBody,
11
- ModalCloseButton
12
- } from "@chakra-ui/react";
13
- import { runIfFn } from "@chakra-ui/utils";
14
- import { jsx, jsxs } from "react/jsx-runtime";
15
- var BaseModal = (props) => {
16
- const {
17
- title,
18
- footer,
19
- children,
20
- isOpen,
21
- onClose,
22
- hideCloseButton,
23
- hideOverlay,
24
- headerProps,
25
- contentProps,
26
- footerProps,
27
- ...rest
28
- } = props;
29
- return /* @__PURE__ */ jsxs(ChakraModal, { isOpen, onClose, ...rest, children: [
30
- !hideOverlay && /* @__PURE__ */ jsx(ModalOverlay, {}),
31
- /* @__PURE__ */ jsxs(ModalContent, { ...contentProps, children: [
32
- title && /* @__PURE__ */ jsx(ModalHeader, { ...headerProps, children: title }),
33
- !hideCloseButton && /* @__PURE__ */ jsx(ModalCloseButton, {}),
34
- runIfFn(children, {
35
- isOpen,
36
- onClose
37
- }),
38
- footer && /* @__PURE__ */ jsx(ModalFooter, { ...footerProps, children: footer })
39
- ] })
40
- ] });
41
- };
42
- var Modal = (props) => {
43
- const { children, isOpen, onClose, ...rest } = props;
44
- return /* @__PURE__ */ jsx(BaseModal, { ...rest, isOpen, onClose, children: /* @__PURE__ */ jsx(ModalBody, { children: runIfFn(children, {
45
- isOpen,
46
- onClose
47
- }) }) });
48
- };
49
-
50
- // src/form.tsx
51
- import {
52
- ModalBody as ModalBody2,
53
- ModalFooter as ModalFooter2,
54
- Button,
55
- forwardRef
56
- } from "@chakra-ui/react";
57
- import { runIfFn as runIfFn2 } from "@saas-ui/react-utils";
58
- import {
59
- Form,
60
- AutoFields,
61
- SubmitButton
62
- } from "@saas-ui/forms";
63
- import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
64
- var useFormProps = (props) => {
65
- const {
66
- schema,
67
- resolver,
68
- fieldResolver,
69
- defaultValues,
70
- values,
71
- context,
72
- onChange,
73
- onSubmit,
74
- onError,
75
- mode,
76
- reValidateMode,
77
- shouldFocusError = true,
78
- shouldUnregister,
79
- shouldUseNativeValidation,
80
- criteriaMode,
81
- delayError = 100,
82
- fields,
83
- formRef,
84
- ...modalProps
85
- } = props;
86
- const formProps = {
87
- schema,
88
- resolver,
89
- defaultValues,
90
- values,
91
- context,
92
- onChange,
93
- onSubmit,
94
- onError,
95
- mode,
96
- reValidateMode,
97
- shouldFocusError,
98
- shouldUnregister,
99
- shouldUseNativeValidation,
100
- criteriaMode,
101
- delayError,
102
- fields,
103
- formRef
104
- };
105
- return { modalProps, formProps, fields };
106
- };
107
- function createFormDialog(Form2) {
108
- const Dialog = forwardRef((props, ref) => {
109
- const { isOpen, onClose, footer, children, ...rest } = props;
110
- const { modalProps, formProps, fields } = useFormProps(rest);
111
- return /* @__PURE__ */ jsx2(BaseModal, { ...modalProps, isOpen, onClose, children: /* @__PURE__ */ jsx2(
112
- Form2,
113
- {
114
- ref,
115
- ...formProps,
116
- flex: "1",
117
- minHeight: "0px",
118
- display: "flex",
119
- flexDirection: "column",
120
- children: (form) => {
121
- var _a, _b;
122
- return /* @__PURE__ */ jsxs2(Fragment, { children: [
123
- /* @__PURE__ */ jsx2(ModalBody2, { height: "100%", children: runIfFn2(children, form) || /* @__PURE__ */ jsx2(AutoFields, {}) }),
124
- footer || /* @__PURE__ */ jsxs2(ModalFooter2, { children: [
125
- /* @__PURE__ */ jsx2(
126
- Button,
127
- {
128
- variant: "ghost",
129
- mr: 3,
130
- onClick: onClose,
131
- ...fields == null ? void 0 : fields.cancel,
132
- children: (_b = (_a = fields == null ? void 0 : fields.cancel) == null ? void 0 : _a.children) != null ? _b : "Cancel"
133
- }
134
- ),
135
- /* @__PURE__ */ jsx2(SubmitButton, { ...fields == null ? void 0 : fields.submit })
136
- ] })
137
- ] });
138
- }
139
- }
140
- ) });
141
- });
142
- Dialog.displayName = `${Form2.displayName || Form2.name}Dialog`;
143
- Dialog.id = Form2.id;
144
- return Dialog;
145
- }
146
- var FormDialog = createFormDialog(Form);
147
-
148
- export {
149
- BaseModal,
150
- Modal,
151
- createFormDialog,
152
- FormDialog
153
- };
154
- //# sourceMappingURL=chunk-FRC2HTO7.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/modal.tsx","../src/form.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n ModalContentProps,\n ModalHeaderProps,\n ModalFooterProps,\n} from '@chakra-ui/react'\n\nimport { runIfFn, MaybeRenderProp } from '@chakra-ui/utils'\n\nexport interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal children\n */\n children: MaybeRenderProp<{\n isOpen: boolean\n onClose: () => void\n }>\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n /**\n * Props for the modal header\n */\n headerProps?: ModalHeaderProps\n /**\n * Props for the modal content\n */\n contentProps?: ModalContentProps\n /**\n * Props for the modal footer\n */\n footerProps?: ModalFooterProps\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n headerProps,\n contentProps,\n footerProps,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent {...contentProps}>\n {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, isOpen, onClose, ...rest } = props\n return (\n <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>\n <ModalBody>\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n </ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalBody,\n ModalFooter,\n Button,\n forwardRef,\n ButtonProps,\n} from '@chakra-ui/react'\nimport { runIfFn } from '@saas-ui/react-utils'\n\nimport {\n Form,\n AutoFields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n FieldProps,\n FormType,\n DefaultFieldOverrides,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport type FormDialogFieldOverrides = DefaultFieldOverrides & {\n cancel?: ButtonProps\n}\n\nexport interface FormDialogProps<\n TSchema = any,\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object,\n TExtraFieldProps extends object = object,\n TFieldTypes = FieldProps<TFieldValues>,\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>,\n | 'schema'\n | 'defaultValues'\n | 'values'\n | 'context'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n | 'resetOptions'\n | 'formRef'\n | 'children'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * A schema field resolver used to auto generate form fields.\n */\n fieldResolver?: FieldResolver\n /**\n * Field overrides\n */\n fields?: FormDialogFieldOverrides\n}\n\nconst useFormProps = (props: FormDialogProps) => {\n const {\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError = 100,\n fields,\n formRef,\n ...modalProps\n } = props\n\n const formProps = {\n schema,\n resolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n fields,\n formRef,\n }\n\n return { modalProps, formProps, fields }\n}\n\n/**\n * @todo make this dynamic to support other schema types\n */\ntype MergeDialogProps<T> =\n T extends FormType<\n infer FieldDefs,\n infer ExtraProps,\n infer ExtraFieldProps,\n infer ExtraOverrides\n >\n ? FormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraFieldProps,\n ExtraOverrides & FormDialogFieldOverrides\n >\n : never\n\ntype IsSchemaType<T, Schema, FieldDefs> =\n T extends DefaultFormType<FieldDefs>\n ? T extends (\n props: FormProps<infer TSchema, infer TFieldValues, infer TContext>\n ) => any\n ? Schema extends TSchema\n ? true\n : false\n : false\n : false\n\nexport type DefaultFormType<\n FieldDefs = any,\n ExtraProps = object,\n ExtraFieldProps extends object = object,\n ExtraOverrides = FormDialogFieldOverrides,\n> = (<\n TSchema = unknown,\n TFieldValues extends Record<string, any> = any,\n TContext extends object = object,\n>(\n props: any\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport function createFormDialog<\n FieldDefs = any,\n ExtraProps = object,\n ExtraFieldProps extends object = object,\n ExtraOverrides = FormDialogFieldOverrides,\n TFormType extends DefaultFormType<\n FieldDefs,\n ExtraProps,\n ExtraFieldProps,\n ExtraOverrides\n > = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>,\n>(Form: TFormType) {\n const Dialog = forwardRef<any, 'div'>((props, ref) => {\n const { isOpen, onClose, footer, children, ...rest } = props\n const { modalProps, formProps, fields } = useFormProps(rest)\n return (\n <BaseModal {...modalProps} isOpen={isOpen} onClose={onClose}>\n <Form\n ref={ref}\n {...(formProps as any)}\n flex=\"1\"\n minHeight=\"0px\"\n display=\"flex\"\n flexDirection=\"column\"\n >\n {(form: any) => (\n <>\n <ModalBody height=\"100%\">\n {runIfFn(children, form) || <AutoFields />}\n </ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button\n variant=\"ghost\"\n mr={3}\n onClick={onClose}\n {...fields?.cancel}\n >\n {fields?.cancel?.children ?? 'Cancel'}\n </Button>\n <SubmitButton {...fields?.submit} />\n </ModalFooter>\n )}\n </>\n )}\n </Form>\n </BaseModal>\n )\n }) as MergeDialogProps<TFormType>\n\n Dialog.displayName = `${Form.displayName || Form.name}Dialog`\n Dialog.id = Form.id\n\n return Dialog\n}\n\n/**\n * Can be used to quickly request information from people without leaving the current page.\n *\n * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog\n */\nexport const FormDialog = createFormDialog(Form)\n"],"mappings":"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","names":["ModalBody","ModalFooter","runIfFn","jsx","jsxs","Form","ModalBody","runIfFn","ModalFooter"]}
@@ -1,82 +0,0 @@
1
- import * as React from 'react';
2
- import { ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, ButtonProps } from '@chakra-ui/react';
3
- import { DefaultFieldOverrides, FieldValues, FieldProps, FormProps, FieldResolver, FormType } from '@saas-ui/forms';
4
- import { MaybeRenderProp } from '@chakra-ui/utils';
5
-
6
- interface BaseModalProps extends Omit<ModalProps, 'children'> {
7
- /**
8
- * The modal title
9
- */
10
- title?: React.ReactNode;
11
- /**
12
- * The modal children
13
- */
14
- children: MaybeRenderProp<{
15
- isOpen: boolean;
16
- onClose: () => void;
17
- }>;
18
- /**
19
- * The modal footer
20
- */
21
- footer?: React.ReactNode;
22
- /**
23
- * Hide the close button
24
- */
25
- hideCloseButton?: boolean;
26
- /**
27
- * Hide the overlay
28
- */
29
- hideOverlay?: boolean;
30
- /**
31
- * Props for the modal header
32
- */
33
- headerProps?: ModalHeaderProps;
34
- /**
35
- * Props for the modal content
36
- */
37
- contentProps?: ModalContentProps;
38
- /**
39
- * Props for the modal footer
40
- */
41
- footerProps?: ModalFooterProps;
42
- }
43
- declare const BaseModal: React.FC<BaseModalProps>;
44
- declare const Modal: React.FC<BaseModalProps>;
45
-
46
- type FormDialogFieldOverrides = DefaultFieldOverrides & {
47
- cancel?: ButtonProps;
48
- };
49
- interface FormDialogProps<TSchema = any, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'formRef' | 'children'> {
50
- /**
51
- * The modal footer, will be wrapped with `ModalFooter`.
52
- * Defaults to a cancel and submit button.
53
- */
54
- footer?: React.ReactNode;
55
- /**
56
- * A schema field resolver used to auto generate form fields.
57
- */
58
- fieldResolver?: FieldResolver;
59
- /**
60
- * Field overrides
61
- */
62
- fields?: FormDialogFieldOverrides;
63
- }
64
- /**
65
- * @todo make this dynamic to support other schema types
66
- */
67
- type MergeDialogProps<T> = T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraFieldProps, infer ExtraOverrides> ? FormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides> : never;
68
- type DefaultFormType<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides> = (<TSchema = unknown, TFieldValues extends Record<string, any> = any, TContext extends object = object>(props: any) => React.ReactElement) & {
69
- displayName?: string;
70
- id?: string;
71
- };
72
- declare function createFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides, TFormType extends DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>>(Form: TFormType): MergeDialogProps<TFormType>;
73
- /**
74
- * Can be used to quickly request information from people without leaving the current page.
75
- *
76
- * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
77
- */
78
- declare const FormDialog: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & DefaultFieldOverrides & {
79
- cancel?: ButtonProps;
80
- }>;
81
-
82
- export { type BaseModalProps as B, type DefaultFormType as D, type FormDialogFieldOverrides as F, Modal as M, type FormDialogProps as a, BaseModal as b, FormDialog as c, createFormDialog as d };