@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/CHANGELOG.md +11 -5
- package/dist/index.cjs +206 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +182 -0
- package/dist/index.d.ts +110 -185
- package/dist/index.js +86 -531
- package/dist/index.js.map +1 -1
- package/package.json +15 -33
- package/src/alert-dialog.tsx +156 -0
- package/src/default-modals.ts +3 -7
- package/src/drawer.tsx +46 -60
- package/src/form.tsx +15 -22
- package/src/index.ts +22 -38
- package/src/modal.tsx +43 -52
- package/src/types.ts +46 -33
- package/dist/chunk-FRC2HTO7.mjs +0 -154
- package/dist/chunk-FRC2HTO7.mjs.map +0 -1
- package/dist/form-BtCUKHAs.d.mts +0 -82
- package/dist/form-BtCUKHAs.d.ts +0 -82
- package/dist/index.d.mts +0 -257
- package/dist/index.mjs +0 -469
- package/dist/index.mjs.map +0 -1
- package/dist/yup/index.d.mts +0 -15
- package/dist/yup/index.d.ts +0 -15
- package/dist/yup/index.js +0 -165
- package/dist/yup/index.js.map +0 -1
- package/dist/yup/index.mjs +0 -20
- package/dist/yup/index.mjs.map +0 -1
- package/dist/zod/index.d.mts +0 -15
- package/dist/zod/index.d.ts +0 -15
- package/dist/zod/index.js +0 -165
- package/dist/zod/index.js.map +0 -1
- package/dist/zod/index.mjs +0 -20
- package/dist/zod/index.mjs.map +0 -1
- package/src/create-modals.tsx +0 -30
- package/src/dialog.tsx +0 -151
- package/src/menu.tsx +0 -107
- package/src/provider.tsx +0 -357
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 {
|
3
|
-
export type {
|
6
|
+
export { AlertDialog } from './alert-dialog.tsx'
|
7
|
+
export type { AlertDialogProps } from './alert-dialog.tsx'
|
4
8
|
|
5
9
|
// Exporting from './drawer'
|
6
|
-
export {
|
7
|
-
export type {
|
10
|
+
export { Drawer } from './drawer'
|
11
|
+
export type { DrawerProps } from './drawer'
|
8
12
|
|
9
13
|
// Exporting from './modal'
|
10
|
-
export {
|
11
|
-
export type {
|
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
|
-
|
21
|
-
|
22
|
-
|
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
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
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
|
-
|
5
|
-
|
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
|
-
|
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
|
-
|
29
|
-
|
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
|
-
|
38
|
+
hideBackdrop?: boolean
|
43
39
|
/**
|
44
40
|
* Props for the modal header
|
45
41
|
*/
|
46
|
-
headerProps?:
|
42
|
+
headerProps?: HTMLChakraProps<'div'>
|
47
43
|
/**
|
48
44
|
* Props for the modal content
|
49
45
|
*/
|
50
|
-
contentProps?:
|
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?:
|
54
|
+
footerProps?: HTMLChakraProps<'div'>
|
55
55
|
}
|
56
56
|
|
57
|
-
export const
|
57
|
+
export const Modal: React.FC<ModalProps> = (props) => {
|
58
58
|
const {
|
59
59
|
title,
|
60
60
|
footer,
|
61
61
|
children,
|
62
|
-
|
63
|
-
|
62
|
+
open,
|
63
|
+
onOpenChange,
|
64
64
|
hideCloseButton,
|
65
|
-
|
65
|
+
hideBackdrop,
|
66
66
|
headerProps,
|
67
67
|
contentProps,
|
68
|
+
bodyProps,
|
68
69
|
footerProps,
|
69
70
|
...rest
|
70
71
|
} = props
|
71
72
|
return (
|
72
|
-
<
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
{
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
}
|
86
|
-
|
87
|
-
|
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 {
|
2
|
-
|
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> =
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
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
|
package/dist/chunk-FRC2HTO7.mjs
DELETED
@@ -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"]}
|
package/dist/form-BtCUKHAs.d.mts
DELETED
@@ -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 };
|