@saas-ui/modals 3.0.0-alpha.1 → 3.0.0-alpha.11
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +102 -0
- package/package.json +8 -10
- package/src/alert-dialog.tsx +0 -156
- package/src/default-modals.ts +0 -10
- package/src/drawer.tsx +0 -91
- package/src/form.tsx +0 -219
- package/src/index.ts +0 -31
- package/src/modal.tsx +0 -90
- package/src/types.ts +0 -96
- package/src/yup/create-yup-form-dialog.ts +0 -18
- package/src/yup/index.ts +0 -6
- package/src/zod/create-zod-form-dialog.ts +0 -17
- package/src/zod/index.ts +0 -6
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,107 @@
|
|
1
1
|
# @saas-ui/modals
|
2
2
|
|
3
|
+
## 3.0.0-alpha.11
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- Updated dependencies [19309d4]
|
8
|
+
- Updated dependencies [19309d4]
|
9
|
+
- @saas-ui/react@3.0.0-alpha.11
|
10
|
+
- @saas-ui/forms@3.0.0-alpha.11
|
11
|
+
|
12
|
+
## 3.0.0-alpha.10
|
13
|
+
|
14
|
+
### Patch Changes
|
15
|
+
|
16
|
+
- Updated dependencies [212a7e6]
|
17
|
+
- Updated dependencies [942e9a0]
|
18
|
+
- Updated dependencies [212a7e6]
|
19
|
+
- Updated dependencies [65fac53]
|
20
|
+
- @saas-ui/react@3.0.0-alpha.10
|
21
|
+
- @saas-ui/forms@3.0.0-alpha.10
|
22
|
+
|
23
|
+
## 3.0.0-alpha.9
|
24
|
+
|
25
|
+
### Patch Changes
|
26
|
+
|
27
|
+
- Updated dependencies [f0f5ab0]
|
28
|
+
- @saas-ui/react@3.0.0-alpha.9
|
29
|
+
- @saas-ui/forms@3.0.0-alpha.9
|
30
|
+
|
31
|
+
## 3.0.0-alpha.8
|
32
|
+
|
33
|
+
### Patch Changes
|
34
|
+
|
35
|
+
- Updated dependencies [64e680e]
|
36
|
+
- Updated dependencies [64e680e]
|
37
|
+
- @saas-ui/react@3.0.0-alpha.8
|
38
|
+
- @saas-ui/forms@3.0.0-alpha.8
|
39
|
+
|
40
|
+
## 3.0.0-alpha.7
|
41
|
+
|
42
|
+
### Patch Changes
|
43
|
+
|
44
|
+
- Updated dependencies [8e760c5]
|
45
|
+
- @saas-ui/react@3.0.0-alpha.7
|
46
|
+
- @saas-ui/forms@3.0.0-alpha.7
|
47
|
+
|
48
|
+
## 3.0.0-alpha.6
|
49
|
+
|
50
|
+
### Minor Changes
|
51
|
+
|
52
|
+
- 95c8652: Update to Chakra UI 3.2.1
|
53
|
+
|
54
|
+
### Patch Changes
|
55
|
+
|
56
|
+
- Updated dependencies [95c8652]
|
57
|
+
- @saas-ui/modals-provider@1.0.0-alpha.3
|
58
|
+
- @saas-ui/forms@3.0.0-alpha.6
|
59
|
+
- @saas-ui/hooks@3.0.0-alpha.4
|
60
|
+
- @saas-ui/react@3.0.0-alpha.6
|
61
|
+
- @saas-ui/core@3.0.0-alpha.4
|
62
|
+
|
63
|
+
## 3.0.0-alpha.5
|
64
|
+
|
65
|
+
### Patch Changes
|
66
|
+
|
67
|
+
- Updated dependencies [e9fec88]
|
68
|
+
- Updated dependencies [f62c3d6]
|
69
|
+
- @saas-ui/react@3.0.0-alpha.5
|
70
|
+
- @saas-ui/forms@3.0.0-alpha.5
|
71
|
+
|
72
|
+
## 3.0.0-alpha.4
|
73
|
+
|
74
|
+
### Patch Changes
|
75
|
+
|
76
|
+
- Updated dependencies [7808a76]
|
77
|
+
- @saas-ui/react@3.0.0-alpha.4
|
78
|
+
- @saas-ui/forms@3.0.0-alpha.4
|
79
|
+
|
80
|
+
## 3.0.0-alpha.3
|
81
|
+
|
82
|
+
### Patch Changes
|
83
|
+
|
84
|
+
- Updated dependencies [cee2e9c]
|
85
|
+
- @saas-ui/forms@3.0.0-alpha.3
|
86
|
+
- @saas-ui/hooks@3.0.0-alpha.3
|
87
|
+
- @saas-ui/core@3.0.0-alpha.3
|
88
|
+
- @saas-ui/react@3.0.0-alpha.3
|
89
|
+
|
90
|
+
## 3.0.0-alpha.2
|
91
|
+
|
92
|
+
### Minor Changes
|
93
|
+
|
94
|
+
- 6459de4: Removed src exports and files from packages
|
95
|
+
|
96
|
+
### Patch Changes
|
97
|
+
|
98
|
+
- Updated dependencies [6459de4]
|
99
|
+
- @saas-ui/modals-provider@1.0.0-alpha.2
|
100
|
+
- @saas-ui/forms@3.0.0-alpha.2
|
101
|
+
- @saas-ui/hooks@3.0.0-alpha.2
|
102
|
+
- @saas-ui/react@3.0.0-alpha.2
|
103
|
+
- @saas-ui/core@3.0.0-alpha.2
|
104
|
+
|
3
105
|
## 3.0.0-alpha.1
|
4
106
|
|
5
107
|
### Major Changes
|
package/package.json
CHANGED
@@ -1,8 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@saas-ui/modals",
|
3
|
-
"version": "3.0.0-alpha.
|
3
|
+
"version": "3.0.0-alpha.11",
|
4
4
|
"description": "A modal manager for Chakra UI",
|
5
|
-
"source": "src/index.ts",
|
6
5
|
"type": "module",
|
7
6
|
"exports": {
|
8
7
|
".": {
|
@@ -35,8 +34,7 @@
|
|
35
34
|
"typecheck": "tsc --noEmit"
|
36
35
|
},
|
37
36
|
"files": [
|
38
|
-
"dist"
|
39
|
-
"src"
|
37
|
+
"dist"
|
40
38
|
],
|
41
39
|
"sideEffects": false,
|
42
40
|
"publishConfig": {
|
@@ -68,15 +66,15 @@
|
|
68
66
|
"url": "https://storybook.saas-ui.dev"
|
69
67
|
},
|
70
68
|
"dependencies": {
|
71
|
-
"@saas-ui/core": "3.0.0-alpha.
|
72
|
-
"@saas-ui/forms": "3.0.0-alpha.
|
73
|
-
"@saas-ui/hooks": "3.0.0-alpha.
|
74
|
-
"@saas-ui/modals-provider": "1.0.0-alpha.
|
69
|
+
"@saas-ui/core": "3.0.0-alpha.4",
|
70
|
+
"@saas-ui/forms": "3.0.0-alpha.11",
|
71
|
+
"@saas-ui/hooks": "3.0.0-alpha.4",
|
72
|
+
"@saas-ui/modals-provider": "1.0.0-alpha.3"
|
75
73
|
},
|
76
74
|
"peerDependencies": {
|
77
|
-
"@chakra-ui/react": "^3.
|
75
|
+
"@chakra-ui/react": "^3.2.3",
|
78
76
|
"@emotion/react": ">=11.0.0",
|
79
|
-
"@saas-ui/react": "3.0.0-alpha.
|
77
|
+
"@saas-ui/react": "3.0.0-alpha.11",
|
80
78
|
"react": ">=18.0.0",
|
81
79
|
"react-dom": ">=18.0.0"
|
82
80
|
},
|
package/src/alert-dialog.tsx
DELETED
@@ -1,156 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
3
|
-
import { Button, ButtonProps, type HTMLChakraProps } from '@chakra-ui/react'
|
4
|
-
import { callAll } from '@saas-ui/core/utils'
|
5
|
-
import { Dialog } from '@saas-ui/react/dialog'
|
6
|
-
|
7
|
-
export interface AlertDialogProps
|
8
|
-
extends Omit<
|
9
|
-
Dialog.RootProps,
|
10
|
-
'leastDestructiveRef' | 'onOpenChange' | 'open'
|
11
|
-
> {
|
12
|
-
/**
|
13
|
-
* Whether the dialog is open
|
14
|
-
*/
|
15
|
-
open: boolean
|
16
|
-
/**
|
17
|
-
* Callback when the dialog is opened or closed
|
18
|
-
*/
|
19
|
-
onOpenChange: (details: { open: boolean }) => void
|
20
|
-
/**
|
21
|
-
* The dialog title
|
22
|
-
*/
|
23
|
-
title?: React.ReactNode
|
24
|
-
translations?: {
|
25
|
-
cancel?: React.ReactNode
|
26
|
-
confirm?: React.ReactNode
|
27
|
-
close?: React.ReactNode
|
28
|
-
}
|
29
|
-
slotProps?: {
|
30
|
-
cancel?: ButtonProps
|
31
|
-
confirm?: ButtonProps
|
32
|
-
footer?: HTMLChakraProps<'div'>
|
33
|
-
}
|
34
|
-
/**
|
35
|
-
* Close the dialog on cancel
|
36
|
-
* @default true
|
37
|
-
*/
|
38
|
-
closeOnCancel?: boolean
|
39
|
-
/**
|
40
|
-
* Close the dialog on confirm
|
41
|
-
* @default true
|
42
|
-
*/
|
43
|
-
closeOnConfirm?: boolean
|
44
|
-
/**
|
45
|
-
* Hide the backdrop
|
46
|
-
*/
|
47
|
-
backdrop?: boolean
|
48
|
-
/**
|
49
|
-
* Hide the close button
|
50
|
-
*/
|
51
|
-
hideCloseButton?: boolean
|
52
|
-
/**
|
53
|
-
* Defines which button gets initial focus
|
54
|
-
* https://www.w3.org/TR/wai-aria-practices/#alertdialog
|
55
|
-
*/
|
56
|
-
leastDestructiveFocus?: 'cancel' | 'confirm'
|
57
|
-
/**
|
58
|
-
* Function that's called when cancel is clicked
|
59
|
-
*/
|
60
|
-
onCancel?: () => void
|
61
|
-
/**
|
62
|
-
* Function that's called when confirm is clicked.
|
63
|
-
*/
|
64
|
-
onConfirm?: () => Promise<void> | void
|
65
|
-
}
|
66
|
-
|
67
|
-
export const AlertDialog: React.FC<AlertDialogProps> = (props) => {
|
68
|
-
const {
|
69
|
-
title,
|
70
|
-
translations,
|
71
|
-
slotProps,
|
72
|
-
open,
|
73
|
-
closeOnCancel = true,
|
74
|
-
closeOnConfirm = true,
|
75
|
-
leastDestructiveFocus = 'cancel',
|
76
|
-
onOpenChange,
|
77
|
-
onCancel,
|
78
|
-
onConfirm,
|
79
|
-
children,
|
80
|
-
...rest
|
81
|
-
} = props
|
82
|
-
|
83
|
-
const cancelRef = React.useRef(null)
|
84
|
-
const confirmRef = React.useRef(null)
|
85
|
-
const [isLoading, setIsLoading] = React.useState(false)
|
86
|
-
|
87
|
-
const handleConfirm = async () => {
|
88
|
-
try {
|
89
|
-
const result = onConfirm?.()
|
90
|
-
if (typeof result?.then === 'function') {
|
91
|
-
setIsLoading(true)
|
92
|
-
await result
|
93
|
-
}
|
94
|
-
|
95
|
-
closeOnConfirm && onOpenChange({ open: false })
|
96
|
-
/* eslint-disable no-useless-catch */
|
97
|
-
} catch (e: any) {
|
98
|
-
throw e
|
99
|
-
} finally {
|
100
|
-
setIsLoading(false)
|
101
|
-
}
|
102
|
-
/* eslint-enable */
|
103
|
-
}
|
104
|
-
|
105
|
-
const titleId = React.useId()
|
106
|
-
const contentId = React.useId()
|
107
|
-
|
108
|
-
return (
|
109
|
-
<Dialog.Root
|
110
|
-
open={open}
|
111
|
-
onOpenChange={onOpenChange}
|
112
|
-
size="sm"
|
113
|
-
aria-labelledby={titleId}
|
114
|
-
aria-describedby={contentId}
|
115
|
-
{...rest}
|
116
|
-
initialFocusEl={() =>
|
117
|
-
leastDestructiveFocus === 'cancel'
|
118
|
-
? cancelRef.current
|
119
|
-
: confirmRef.current
|
120
|
-
}
|
121
|
-
>
|
122
|
-
<Dialog.Content>
|
123
|
-
<Dialog.Header>
|
124
|
-
<Dialog.Title id={titleId}>{title}</Dialog.Title>
|
125
|
-
</Dialog.Header>
|
126
|
-
|
127
|
-
<Dialog.Body id={contentId}>{children}</Dialog.Body>
|
128
|
-
|
129
|
-
<Dialog.Footer {...slotProps?.footer}>
|
130
|
-
<Button
|
131
|
-
ref={cancelRef}
|
132
|
-
variant="ghost"
|
133
|
-
colorPalette="gray"
|
134
|
-
{...slotProps?.cancel}
|
135
|
-
onClick={callAll(slotProps?.cancel?.onClick, () => {
|
136
|
-
onCancel?.()
|
137
|
-
|
138
|
-
closeOnCancel && onOpenChange({ open: false })
|
139
|
-
})}
|
140
|
-
>
|
141
|
-
{slotProps?.cancel?.children || translations?.cancel || 'Cancel'}
|
142
|
-
</Button>
|
143
|
-
<Button
|
144
|
-
ref={confirmRef}
|
145
|
-
variant="solid"
|
146
|
-
disabled={isLoading}
|
147
|
-
{...slotProps?.confirm}
|
148
|
-
onClick={callAll(handleConfirm, slotProps?.confirm?.onClick)}
|
149
|
-
>
|
150
|
-
{slotProps?.confirm?.children || translations?.confirm || 'OK'}
|
151
|
-
</Button>
|
152
|
-
</Dialog.Footer>
|
153
|
-
</Dialog.Content>
|
154
|
-
</Dialog.Root>
|
155
|
-
)
|
156
|
-
}
|
package/src/default-modals.ts
DELETED
package/src/drawer.tsx
DELETED
@@ -1,91 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
3
|
-
import { type HTMLChakraProps } from '@chakra-ui/react'
|
4
|
-
import { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'
|
5
|
-
import { Drawer as BaseDrawer } from '@saas-ui/react/drawer'
|
6
|
-
|
7
|
-
export interface DrawerProps extends Omit<BaseDrawer.RootProps, 'children'> {
|
8
|
-
/**
|
9
|
-
* The drawer title
|
10
|
-
*/
|
11
|
-
title: React.ReactNode
|
12
|
-
/**
|
13
|
-
* Whether the modal is open
|
14
|
-
*/
|
15
|
-
open: boolean
|
16
|
-
/**
|
17
|
-
* Callback when the drawer is opened or closed
|
18
|
-
*/
|
19
|
-
onOpenChange: (details: { open: boolean }) => void
|
20
|
-
/**
|
21
|
-
* The drawer children
|
22
|
-
*/
|
23
|
-
children: MaybeRenderProp<{
|
24
|
-
open: boolean
|
25
|
-
setOpen: (open: boolean) => void
|
26
|
-
}>
|
27
|
-
/**
|
28
|
-
* The modal footer
|
29
|
-
*/
|
30
|
-
footer?: React.ReactNode
|
31
|
-
/**
|
32
|
-
* Hide the close button
|
33
|
-
*/
|
34
|
-
hideCloseButton?: boolean
|
35
|
-
/**
|
36
|
-
* Hide the backdrop
|
37
|
-
*/
|
38
|
-
hideBackdrop?: boolean
|
39
|
-
/**
|
40
|
-
* Props for the modal header
|
41
|
-
*/
|
42
|
-
headerProps?: HTMLChakraProps<'div'>
|
43
|
-
/**
|
44
|
-
* Props for the modal content
|
45
|
-
*/
|
46
|
-
contentProps?: BaseDrawer.ContentProps
|
47
|
-
/**
|
48
|
-
* Props for the modal footer
|
49
|
-
*/
|
50
|
-
footerProps?: HTMLChakraProps<'div'>
|
51
|
-
/**
|
52
|
-
* Props for the modal body
|
53
|
-
*/
|
54
|
-
bodyProps?: HTMLChakraProps<'div'>
|
55
|
-
}
|
56
|
-
|
57
|
-
export const Drawer: React.FC<DrawerProps> = (props) => {
|
58
|
-
const {
|
59
|
-
title,
|
60
|
-
children,
|
61
|
-
footer,
|
62
|
-
open,
|
63
|
-
onOpenChange,
|
64
|
-
hideCloseButton,
|
65
|
-
hideBackdrop,
|
66
|
-
headerProps,
|
67
|
-
contentProps,
|
68
|
-
bodyProps,
|
69
|
-
footerProps,
|
70
|
-
...rest
|
71
|
-
} = props
|
72
|
-
return (
|
73
|
-
<BaseDrawer.Root open={open} onOpenChange={onOpenChange} {...rest}>
|
74
|
-
{!hideBackdrop && <BaseDrawer.Backdrop />}
|
75
|
-
<BaseDrawer.Content {...contentProps}>
|
76
|
-
{title && (
|
77
|
-
<BaseDrawer.Header {...headerProps}>{title}</BaseDrawer.Header>
|
78
|
-
)}
|
79
|
-
{!hideCloseButton && <BaseDrawer.CloseTrigger />}
|
80
|
-
<BaseDrawer.Body {...bodyProps}>
|
81
|
-
<BaseDrawer.Context>
|
82
|
-
{({ open, setOpen }) => runIfFn(children, { open, setOpen })}
|
83
|
-
</BaseDrawer.Context>
|
84
|
-
</BaseDrawer.Body>
|
85
|
-
{footer && (
|
86
|
-
<BaseDrawer.Footer {...footerProps}>{footer}</BaseDrawer.Footer>
|
87
|
-
)}
|
88
|
-
</BaseDrawer.Content>
|
89
|
-
</BaseDrawer.Root>
|
90
|
-
)
|
91
|
-
}
|
package/src/form.tsx
DELETED
@@ -1,219 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
3
|
-
import { Button, ButtonProps, Dialog } from '@chakra-ui/react'
|
4
|
-
import { runIfFn } from '@saas-ui/core/utils'
|
5
|
-
import {
|
6
|
-
AutoFields,
|
7
|
-
DefaultFieldOverrides,
|
8
|
-
FieldProps,
|
9
|
-
FieldResolver,
|
10
|
-
FieldValues,
|
11
|
-
Form,
|
12
|
-
FormProps,
|
13
|
-
FormType,
|
14
|
-
SubmitButton,
|
15
|
-
} from '@saas-ui/forms'
|
16
|
-
|
17
|
-
import { BaseModal, BaseModalProps } from './modal'
|
18
|
-
|
19
|
-
export type FormDialogFieldOverrides = DefaultFieldOverrides & {
|
20
|
-
cancel?: ButtonProps
|
21
|
-
}
|
22
|
-
|
23
|
-
export interface FormDialogProps<
|
24
|
-
TSchema = any,
|
25
|
-
TFieldValues extends FieldValues = FieldValues,
|
26
|
-
TContext extends object = object,
|
27
|
-
TExtraFieldProps extends object = object,
|
28
|
-
TFieldTypes = FieldProps<TFieldValues>,
|
29
|
-
> extends Omit<BaseModalProps, 'children'>,
|
30
|
-
Pick<
|
31
|
-
FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>,
|
32
|
-
| 'schema'
|
33
|
-
| 'defaultValues'
|
34
|
-
| 'values'
|
35
|
-
| 'context'
|
36
|
-
| 'onChange'
|
37
|
-
| 'onSubmit'
|
38
|
-
| 'onError'
|
39
|
-
| 'resolver'
|
40
|
-
| 'mode'
|
41
|
-
| 'reValidateMode'
|
42
|
-
| 'shouldFocusError'
|
43
|
-
| 'shouldUnregister'
|
44
|
-
| 'shouldUseNativeValidation'
|
45
|
-
| 'criteriaMode'
|
46
|
-
| 'delayError'
|
47
|
-
| 'resetOptions'
|
48
|
-
| 'formRef'
|
49
|
-
| 'children'
|
50
|
-
> {
|
51
|
-
/**
|
52
|
-
* The modal footer, will be wrapped with `ModalFooter`.
|
53
|
-
* Defaults to a cancel and submit button.
|
54
|
-
*/
|
55
|
-
footer?: React.ReactNode
|
56
|
-
/**
|
57
|
-
* A schema field resolver used to auto generate form fields.
|
58
|
-
*/
|
59
|
-
fieldResolver?: FieldResolver
|
60
|
-
/**
|
61
|
-
* Field overrides
|
62
|
-
*/
|
63
|
-
fields?: FormDialogFieldOverrides
|
64
|
-
}
|
65
|
-
|
66
|
-
const useFormProps = (props: FormDialogProps) => {
|
67
|
-
const {
|
68
|
-
schema,
|
69
|
-
resolver,
|
70
|
-
fieldResolver,
|
71
|
-
defaultValues,
|
72
|
-
values,
|
73
|
-
context,
|
74
|
-
onChange,
|
75
|
-
onSubmit,
|
76
|
-
onError,
|
77
|
-
mode,
|
78
|
-
reValidateMode,
|
79
|
-
shouldFocusError = true,
|
80
|
-
shouldUnregister,
|
81
|
-
shouldUseNativeValidation,
|
82
|
-
criteriaMode,
|
83
|
-
delayError = 100,
|
84
|
-
fields,
|
85
|
-
formRef,
|
86
|
-
...modalProps
|
87
|
-
} = props
|
88
|
-
|
89
|
-
const formProps = {
|
90
|
-
schema,
|
91
|
-
resolver,
|
92
|
-
defaultValues,
|
93
|
-
values,
|
94
|
-
context,
|
95
|
-
onChange,
|
96
|
-
onSubmit,
|
97
|
-
onError,
|
98
|
-
mode,
|
99
|
-
reValidateMode,
|
100
|
-
shouldFocusError,
|
101
|
-
shouldUnregister,
|
102
|
-
shouldUseNativeValidation,
|
103
|
-
criteriaMode,
|
104
|
-
delayError,
|
105
|
-
fields,
|
106
|
-
formRef,
|
107
|
-
}
|
108
|
-
|
109
|
-
return { modalProps, formProps, fields }
|
110
|
-
}
|
111
|
-
|
112
|
-
/**
|
113
|
-
* @todo make this dynamic to support other schema types
|
114
|
-
*/
|
115
|
-
type MergeDialogProps<T> =
|
116
|
-
T extends FormType<
|
117
|
-
infer FieldDefs,
|
118
|
-
infer ExtraProps,
|
119
|
-
infer ExtraFieldProps,
|
120
|
-
infer ExtraOverrides
|
121
|
-
>
|
122
|
-
? FormType<
|
123
|
-
FieldDefs,
|
124
|
-
ExtraProps & Omit<BaseModalProps, 'children'>,
|
125
|
-
ExtraFieldProps,
|
126
|
-
ExtraOverrides & FormDialogFieldOverrides
|
127
|
-
>
|
128
|
-
: never
|
129
|
-
|
130
|
-
type IsSchemaType<T, Schema, FieldDefs> =
|
131
|
-
T extends DefaultFormType<FieldDefs>
|
132
|
-
? T extends (
|
133
|
-
props: FormProps<infer TSchema, infer TFieldValues, infer TContext>,
|
134
|
-
) => any
|
135
|
-
? Schema extends TSchema
|
136
|
-
? true
|
137
|
-
: false
|
138
|
-
: false
|
139
|
-
: false
|
140
|
-
|
141
|
-
export type DefaultFormType<
|
142
|
-
FieldDefs = any,
|
143
|
-
ExtraProps = object,
|
144
|
-
ExtraFieldProps extends object = object,
|
145
|
-
ExtraOverrides = FormDialogFieldOverrides,
|
146
|
-
> = (<
|
147
|
-
TSchema = unknown,
|
148
|
-
TFieldValues extends Record<string, any> = any,
|
149
|
-
TContext extends object = object,
|
150
|
-
>(
|
151
|
-
props: any,
|
152
|
-
) => React.ReactElement) & {
|
153
|
-
displayName?: string
|
154
|
-
id?: string
|
155
|
-
}
|
156
|
-
|
157
|
-
export function createFormDialog<
|
158
|
-
FieldDefs = any,
|
159
|
-
ExtraProps = object,
|
160
|
-
ExtraFieldProps extends object = object,
|
161
|
-
ExtraOverrides = FormDialogFieldOverrides,
|
162
|
-
TFormType extends DefaultFormType<
|
163
|
-
FieldDefs,
|
164
|
-
ExtraProps,
|
165
|
-
ExtraFieldProps,
|
166
|
-
ExtraOverrides
|
167
|
-
> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>,
|
168
|
-
>(Form: TFormType) {
|
169
|
-
const Dialog = React.forwardRef<HTMLDivElement, any>((props, ref) => {
|
170
|
-
const { isOpen, onClose, footer, children, ...rest } = props
|
171
|
-
const { modalProps, formProps, fields } = useFormProps(rest)
|
172
|
-
return (
|
173
|
-
<BaseModal {...modalProps} isOpen={isOpen} onClose={onClose}>
|
174
|
-
<Form
|
175
|
-
ref={ref}
|
176
|
-
{...(formProps as any)}
|
177
|
-
flex="1"
|
178
|
-
minHeight="0px"
|
179
|
-
display="flex"
|
180
|
-
flexDirection="column"
|
181
|
-
>
|
182
|
-
{(form: any) => (
|
183
|
-
<>
|
184
|
-
<Dialog.Body height="100%">
|
185
|
-
{runIfFn(children, form) || <AutoFields />}
|
186
|
-
</Dialog.Body>
|
187
|
-
|
188
|
-
{footer || (
|
189
|
-
<Dialog.Footer>
|
190
|
-
<Button
|
191
|
-
variant="ghost"
|
192
|
-
mr={3}
|
193
|
-
onClick={onClose}
|
194
|
-
{...fields?.cancel}
|
195
|
-
>
|
196
|
-
{fields?.cancel?.children ?? 'Cancel'}
|
197
|
-
</Button>
|
198
|
-
<SubmitButton {...fields?.submit} />
|
199
|
-
</Dialog.Footer>
|
200
|
-
)}
|
201
|
-
</>
|
202
|
-
)}
|
203
|
-
</Form>
|
204
|
-
</BaseModal>
|
205
|
-
)
|
206
|
-
}) as MergeDialogProps<TFormType>
|
207
|
-
|
208
|
-
Dialog.displayName = `${Form.displayName || Form.name}Dialog`
|
209
|
-
Dialog.id = Form.id
|
210
|
-
|
211
|
-
return Dialog
|
212
|
-
}
|
213
|
-
|
214
|
-
/**
|
215
|
-
* Can be used to quickly request information from people without leaving the current page.
|
216
|
-
*
|
217
|
-
* @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
|
218
|
-
*/
|
219
|
-
export const FormDialog = createFormDialog(Form)
|
package/src/index.ts
DELETED
@@ -1,31 +0,0 @@
|
|
1
|
-
import { createModals } from '@saas-ui/modals-provider'
|
2
|
-
|
3
|
-
import { defaultModals } from './default-modals.ts'
|
4
|
-
|
5
|
-
// Exporting from './dialog'
|
6
|
-
export { AlertDialog } from './alert-dialog.tsx'
|
7
|
-
export type { AlertDialogProps } from './alert-dialog.tsx'
|
8
|
-
|
9
|
-
// Exporting from './drawer'
|
10
|
-
export { Drawer } from './drawer'
|
11
|
-
export type { DrawerProps } from './drawer'
|
12
|
-
|
13
|
-
// Exporting from './modal'
|
14
|
-
export { Modal } from './modal'
|
15
|
-
export type { ModalProps } from './modal'
|
16
|
-
|
17
|
-
// Exporting from './form'
|
18
|
-
// export { FormDialog, createFormDialog } from './form'
|
19
|
-
// export type {
|
20
|
-
// DefaultFormType,
|
21
|
-
// FormDialogFieldOverrides,
|
22
|
-
// FormDialogProps,
|
23
|
-
// } from './form'
|
24
|
-
|
25
|
-
// Exporting from './provider'
|
26
|
-
|
27
|
-
const { useModals, ModalsProvider } = createModals({
|
28
|
-
modals: defaultModals,
|
29
|
-
})
|
30
|
-
|
31
|
-
export { ModalsProvider, useModals }
|
package/src/modal.tsx
DELETED
@@ -1,90 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
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'
|
6
|
-
|
7
|
-
export interface ModalProps extends Omit<BaseDialog.RootProps, 'children'> {
|
8
|
-
/**
|
9
|
-
* The modal title
|
10
|
-
*/
|
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
|
20
|
-
/**
|
21
|
-
* The modal children
|
22
|
-
*/
|
23
|
-
children: MaybeRenderProp<{
|
24
|
-
open: boolean
|
25
|
-
setOpen: (open: boolean) => void
|
26
|
-
}>
|
27
|
-
/**
|
28
|
-
* The modal footer
|
29
|
-
*/
|
30
|
-
footer?: React.ReactNode
|
31
|
-
/**
|
32
|
-
* Hide the close button
|
33
|
-
*/
|
34
|
-
hideCloseButton?: boolean
|
35
|
-
/**
|
36
|
-
* Hide the overlay
|
37
|
-
*/
|
38
|
-
hideBackdrop?: boolean
|
39
|
-
/**
|
40
|
-
* Props for the modal header
|
41
|
-
*/
|
42
|
-
headerProps?: HTMLChakraProps<'div'>
|
43
|
-
/**
|
44
|
-
* Props for the modal content
|
45
|
-
*/
|
46
|
-
contentProps?: HTMLChakraProps<'div'>
|
47
|
-
/**
|
48
|
-
* Props for the modal body
|
49
|
-
*/
|
50
|
-
bodyProps?: HTMLChakraProps<'div'>
|
51
|
-
/**
|
52
|
-
* Props for the modal footer
|
53
|
-
*/
|
54
|
-
footerProps?: HTMLChakraProps<'div'>
|
55
|
-
}
|
56
|
-
|
57
|
-
export const Modal: React.FC<ModalProps> = (props) => {
|
58
|
-
const {
|
59
|
-
title,
|
60
|
-
footer,
|
61
|
-
children,
|
62
|
-
open,
|
63
|
-
onOpenChange,
|
64
|
-
hideCloseButton,
|
65
|
-
hideBackdrop,
|
66
|
-
headerProps,
|
67
|
-
contentProps,
|
68
|
-
bodyProps,
|
69
|
-
footerProps,
|
70
|
-
...rest
|
71
|
-
} = props
|
72
|
-
return (
|
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>
|
89
|
-
)
|
90
|
-
}
|
package/src/types.ts
DELETED
@@ -1,96 +0,0 @@
|
|
1
|
-
import type {
|
2
|
-
FieldValues,
|
3
|
-
FormProps,
|
4
|
-
FormType,
|
5
|
-
WithFields,
|
6
|
-
} from '@saas-ui/forms'
|
7
|
-
import { AnyObjectSchema, YupFormType } from '@saas-ui/forms/yup'
|
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'
|
14
|
-
|
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
|
41
|
-
|
42
|
-
export type ZodHandler<
|
43
|
-
FieldDefs,
|
44
|
-
ExtraProps = object,
|
45
|
-
ExtraOverrides = object,
|
46
|
-
Type extends 'zod' = 'zod',
|
47
|
-
> = <
|
48
|
-
TSchema extends z.AnyZodObject = z.AnyZodObject,
|
49
|
-
TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,
|
50
|
-
TContext extends object = object,
|
51
|
-
>(
|
52
|
-
props: WithFields<
|
53
|
-
FormProps<TSchema, TFieldValues, TContext>,
|
54
|
-
FieldDefs,
|
55
|
-
ExtraOverrides
|
56
|
-
> & {
|
57
|
-
ref?: React.ForwardedRef<HTMLFormElement>
|
58
|
-
} & ExtraProps,
|
59
|
-
) => ModalId
|
60
|
-
|
61
|
-
export type FormHandler<
|
62
|
-
FieldDefs,
|
63
|
-
ExtraProps = object,
|
64
|
-
ExtraOverrides = object,
|
65
|
-
> = <
|
66
|
-
TSchema = unknown,
|
67
|
-
TFieldValues extends FieldValues = FieldValues,
|
68
|
-
TContext extends object = object,
|
69
|
-
>(
|
70
|
-
props: WithFields<
|
71
|
-
FormProps<TSchema, TFieldValues, TContext>,
|
72
|
-
FieldDefs,
|
73
|
-
ExtraOverrides
|
74
|
-
> & {
|
75
|
-
ref?: React.ForwardedRef<HTMLFormElement>
|
76
|
-
} & ExtraProps,
|
77
|
-
) => ModalId
|
78
|
-
|
79
|
-
export type YupHandler<
|
80
|
-
FieldDefs,
|
81
|
-
ExtraProps = object,
|
82
|
-
ExtraOverrides = object,
|
83
|
-
Type extends 'yup' = 'yup',
|
84
|
-
> = <
|
85
|
-
TSchema extends AnyObjectSchema = AnyObjectSchema,
|
86
|
-
TFieldValues extends InferType<TSchema> = InferType<TSchema>, // placeholder
|
87
|
-
TContext extends object = object,
|
88
|
-
>(
|
89
|
-
props: WithFields<
|
90
|
-
FormProps<TFieldValues, TContext, TSchema>,
|
91
|
-
FieldDefs,
|
92
|
-
ExtraOverrides
|
93
|
-
> & {
|
94
|
-
ref?: React.ForwardedRef<HTMLFormElement>
|
95
|
-
} & ExtraProps,
|
96
|
-
) => ModalId
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import type { YupFormType } from '@saas-ui/forms/yup'
|
2
|
-
import { FormDialogFieldOverrides, createFormDialog } from '../form'
|
3
|
-
|
4
|
-
import type { BaseModalProps } from '../modal'
|
5
|
-
|
6
|
-
export function createYupFormDialog<
|
7
|
-
FieldDefs = any,
|
8
|
-
ExtraProps = object,
|
9
|
-
ExtraFieldProps extends object = object,
|
10
|
-
ExtraOverrides = object,
|
11
|
-
>(Form: YupFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {
|
12
|
-
return createFormDialog(Form) as unknown as YupFormType<
|
13
|
-
FieldDefs,
|
14
|
-
ExtraProps & Omit<BaseModalProps, 'children'>,
|
15
|
-
ExtraFieldProps,
|
16
|
-
ExtraOverrides & FormDialogFieldOverrides
|
17
|
-
>
|
18
|
-
}
|
package/src/yup/index.ts
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
import type { ZodFormType } from '@saas-ui/forms/zod'
|
2
|
-
import { createFormDialog, FormDialogFieldOverrides } from '../form'
|
3
|
-
import type { BaseModalProps } from '../modal'
|
4
|
-
|
5
|
-
export function createZodFormDialog<
|
6
|
-
FieldDefs = any,
|
7
|
-
ExtraProps = object,
|
8
|
-
ExtraFieldProps extends object = object,
|
9
|
-
ExtraOverrides = object,
|
10
|
-
>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {
|
11
|
-
return createFormDialog(Form) as unknown as ZodFormType<
|
12
|
-
FieldDefs,
|
13
|
-
ExtraProps & Omit<BaseModalProps, 'children'>,
|
14
|
-
ExtraFieldProps,
|
15
|
-
ExtraOverrides & FormDialogFieldOverrides
|
16
|
-
>
|
17
|
-
}
|