@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/dist/index.d.ts
CHANGED
@@ -1,257 +1,182 @@
|
|
1
|
-
import * as React$1 from 'react';
|
2
|
-
import * as _chakra_ui_react from '@chakra-ui/react';
|
3
|
-
import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalHeaderProps, ModalContentProps, ModalFooterProps, MenuListProps } from '@chakra-ui/react';
|
4
|
-
import { MaybeRenderProp } from '@chakra-ui/utils';
|
5
|
-
import { B as BaseModalProps, F as FormDialogFieldOverrides, a as FormDialogProps } from './form-BtCUKHAs.js';
|
6
|
-
export { b as BaseModal, D as DefaultFormType, c as FormDialog, M as Modal, d as createFormDialog } from './form-BtCUKHAs.js';
|
7
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
8
|
-
import * as
|
9
|
-
import
|
10
|
-
import {
|
11
|
-
import {
|
12
|
-
import {
|
13
|
-
import {
|
2
|
+
import * as _saas_ui_modals_provider from '@saas-ui/modals-provider';
|
3
|
+
import * as React from 'react';
|
4
|
+
import { HTMLChakraProps, ButtonProps } from '@chakra-ui/react';
|
5
|
+
import { MaybeRenderProp } from '@saas-ui/core/utils';
|
6
|
+
import { Dialog } from '@saas-ui/react/dialog';
|
7
|
+
import { Drawer as Drawer$1 } from '@saas-ui/react/drawer';
|
14
8
|
|
15
|
-
interface
|
9
|
+
interface ModalProps extends Omit<Dialog.RootProps, 'children'> {
|
16
10
|
/**
|
17
|
-
* The
|
11
|
+
* The modal title
|
18
12
|
*/
|
19
|
-
title?: React
|
13
|
+
title?: React.ReactNode;
|
20
14
|
/**
|
21
|
-
*
|
15
|
+
* Whether the modal is open
|
22
16
|
*/
|
23
|
-
|
17
|
+
open: boolean;
|
24
18
|
/**
|
25
|
-
*
|
19
|
+
* Callback when the modal is opened or closed
|
26
20
|
*/
|
27
|
-
|
21
|
+
onOpenChange: (details: {
|
22
|
+
open: boolean;
|
23
|
+
}) => void;
|
28
24
|
/**
|
29
|
-
* The
|
25
|
+
* The modal children
|
30
26
|
*/
|
31
|
-
|
27
|
+
children: MaybeRenderProp<{
|
28
|
+
open: boolean;
|
29
|
+
setOpen: (open: boolean) => void;
|
30
|
+
}>;
|
32
31
|
/**
|
33
|
-
* The
|
32
|
+
* The modal footer
|
34
33
|
*/
|
35
|
-
|
34
|
+
footer?: React.ReactNode;
|
36
35
|
/**
|
37
|
-
*
|
36
|
+
* Hide the close button
|
38
37
|
*/
|
39
|
-
|
38
|
+
hideCloseButton?: boolean;
|
40
39
|
/**
|
41
|
-
*
|
42
|
-
* @default true
|
40
|
+
* Hide the overlay
|
43
41
|
*/
|
44
|
-
|
42
|
+
hideBackdrop?: boolean;
|
45
43
|
/**
|
46
|
-
*
|
47
|
-
* @default true
|
44
|
+
* Props for the modal header
|
48
45
|
*/
|
49
|
-
|
46
|
+
headerProps?: HTMLChakraProps<'div'>;
|
50
47
|
/**
|
51
|
-
*
|
52
|
-
* https://www.w3.org/TR/wai-aria-practices/#alertdialog
|
48
|
+
* Props for the modal content
|
53
49
|
*/
|
54
|
-
|
50
|
+
contentProps?: HTMLChakraProps<'div'>;
|
55
51
|
/**
|
56
|
-
*
|
52
|
+
* Props for the modal body
|
57
53
|
*/
|
58
|
-
|
54
|
+
bodyProps?: HTMLChakraProps<'div'>;
|
59
55
|
/**
|
60
|
-
*
|
56
|
+
* Props for the modal footer
|
61
57
|
*/
|
62
|
-
|
58
|
+
footerProps?: HTMLChakraProps<'div'>;
|
63
59
|
}
|
64
|
-
declare const
|
60
|
+
declare const Modal: React.FC<ModalProps>;
|
65
61
|
|
66
|
-
interface
|
62
|
+
interface DrawerProps extends Omit<Drawer$1.RootProps, 'children'> {
|
67
63
|
/**
|
68
64
|
* The drawer title
|
69
65
|
*/
|
70
|
-
title: React
|
66
|
+
title: React.ReactNode;
|
71
67
|
/**
|
72
|
-
*
|
68
|
+
* Whether the modal is open
|
69
|
+
*/
|
70
|
+
open: boolean;
|
71
|
+
/**
|
72
|
+
* Callback when the drawer is opened or closed
|
73
|
+
*/
|
74
|
+
onOpenChange: (details: {
|
75
|
+
open: boolean;
|
76
|
+
}) => void;
|
77
|
+
/**
|
78
|
+
* The drawer children
|
73
79
|
*/
|
74
80
|
children: MaybeRenderProp<{
|
75
|
-
|
76
|
-
|
81
|
+
open: boolean;
|
82
|
+
setOpen: (open: boolean) => void;
|
77
83
|
}>;
|
78
84
|
/**
|
79
85
|
* The modal footer
|
80
86
|
*/
|
81
|
-
footer?: React
|
87
|
+
footer?: React.ReactNode;
|
82
88
|
/**
|
83
89
|
* Hide the close button
|
84
90
|
*/
|
85
91
|
hideCloseButton?: boolean;
|
86
92
|
/**
|
87
|
-
* Hide the
|
93
|
+
* Hide the backdrop
|
88
94
|
*/
|
89
|
-
|
95
|
+
hideBackdrop?: boolean;
|
90
96
|
/**
|
91
97
|
* Props for the modal header
|
92
98
|
*/
|
93
|
-
headerProps?:
|
99
|
+
headerProps?: HTMLChakraProps<'div'>;
|
94
100
|
/**
|
95
101
|
* Props for the modal content
|
96
102
|
*/
|
97
|
-
contentProps?:
|
103
|
+
contentProps?: Drawer$1.ContentProps;
|
98
104
|
/**
|
99
105
|
* Props for the modal footer
|
100
106
|
*/
|
101
|
-
footerProps?:
|
102
|
-
}
|
103
|
-
declare const BaseDrawer: React$1.FC<BaseDrawerProps>;
|
104
|
-
interface DrawerProps extends BaseDrawerProps {
|
107
|
+
footerProps?: HTMLChakraProps<'div'>;
|
105
108
|
/**
|
106
|
-
*
|
109
|
+
* Props for the modal body
|
107
110
|
*/
|
108
|
-
|
111
|
+
bodyProps?: HTMLChakraProps<'div'>;
|
109
112
|
}
|
110
|
-
declare const Drawer: React
|
113
|
+
declare const Drawer: React.FC<DrawerProps>;
|
111
114
|
|
112
|
-
interface
|
115
|
+
interface AlertDialogProps extends Omit<Dialog.RootProps, 'leastDestructiveRef' | 'onOpenChange' | 'open'> {
|
113
116
|
/**
|
114
|
-
*
|
117
|
+
* Whether the dialog is open
|
115
118
|
*/
|
116
|
-
|
117
|
-
}
|
118
|
-
declare const MenuDialog: React$1.FC<MenuDialogProps>;
|
119
|
-
interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'>, Omit<MenuListProps, 'title'> {
|
120
|
-
}
|
121
|
-
declare const MenuDialogList: _chakra_ui_react.ComponentWithAs<"div", MenuDialogListProps>;
|
122
|
-
|
123
|
-
type FormDialogHandler<T> = T extends YupFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'yup'> ? YupHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends ZodFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'zod'> ? ZodHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides> ? FormHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : never;
|
124
|
-
type ZodHandler<FieldDefs, ExtraProps = object, ExtraOverrides = object, Type extends 'zod' = 'zod'> = <TSchema extends z.AnyZodObject = z.AnyZodObject, TFieldValues extends z.infer<TSchema> = z.infer<TSchema>, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs, ExtraOverrides> & {
|
125
|
-
ref?: React.ForwardedRef<HTMLFormElement>;
|
126
|
-
} & ExtraProps) => ModalId;
|
127
|
-
type FormHandler<FieldDefs, ExtraProps = object, ExtraOverrides = object> = <TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs, ExtraOverrides> & {
|
128
|
-
ref?: React.ForwardedRef<HTMLFormElement>;
|
129
|
-
} & ExtraProps) => ModalId;
|
130
|
-
type YupHandler<FieldDefs, ExtraProps = object, ExtraOverrides = object, Type extends 'yup' = 'yup'> = <TSchema extends AnyObjectSchema = AnyObjectSchema, TFieldValues extends InferType<TSchema> = InferType<TSchema>, // placeholder
|
131
|
-
TContext extends object = object>(props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs, ExtraOverrides> & {
|
132
|
-
ref?: React.ForwardedRef<HTMLFormElement>;
|
133
|
-
} & ExtraProps) => ModalId;
|
134
|
-
|
135
|
-
interface ModalsContextValue<TModals extends Record<string, React$1.FC<any>> = Record<string, React$1.FC<any>>, TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>> {
|
136
|
-
open: <T extends OpenOptions<TTypes>>(componentOrOptions: T extends {
|
137
|
-
component: infer TComponent extends React$1.FC<any>;
|
138
|
-
} ? WithModalOptions<React$1.ComponentPropsWithRef<TComponent>> : T extends {
|
139
|
-
type: infer TType extends keyof TModals;
|
140
|
-
} ? WithModalOptions<React$1.ComponentPropsWithRef<TModals[TType]>> : T, options?: T extends React$1.FC<any> ? WithModalOptions<React$1.ComponentPropsWithRef<T>> : never) => ModalId;
|
141
|
-
drawer: (options: DrawerOptions) => ModalId;
|
142
|
-
alert: (options: ConfirmDialogOptions) => ModalId;
|
143
|
-
confirm: (options: ConfirmDialogOptions) => ModalId;
|
144
|
-
menu: (options: MenuDialogOptions) => ModalId;
|
145
|
-
form: FormDialogHandler<TModals['form']>;
|
146
|
-
close: (id: ModalId) => void;
|
147
|
-
closeAll: () => void;
|
148
|
-
}
|
149
|
-
declare const ModalsContext: React$1.Context<ModalsContextValue<{
|
150
|
-
alert: React$1.FC<ConfirmDialogProps>;
|
151
|
-
confirm: React$1.FC<ConfirmDialogProps>;
|
152
|
-
drawer: React$1.FC<DrawerProps>;
|
153
|
-
modal: React$1.FC<BaseModalProps>;
|
154
|
-
menu: React$1.FC<MenuDialogProps>;
|
155
|
-
form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
156
|
-
cancel?: _chakra_ui_react.ButtonProps;
|
157
|
-
}>;
|
158
|
-
}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null>;
|
159
|
-
interface ModalsProviderProps<TModals extends Record<string, React$1.FC<any>> = Record<string, React$1.FC<any>>> {
|
160
|
-
children: React$1.ReactNode;
|
161
|
-
modals?: TModals;
|
162
|
-
}
|
163
|
-
type ModalId = string | number;
|
164
|
-
type WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions;
|
165
|
-
interface ModalOptions extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {
|
166
|
-
onClose?: (args: {
|
167
|
-
force?: boolean;
|
168
|
-
}) => Promise<boolean | undefined> | void;
|
169
|
-
[key: string]: any;
|
170
|
-
}
|
171
|
-
interface DrawerOptions extends ModalOptions, Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {
|
172
|
-
}
|
173
|
-
interface ConfirmDialogOptions extends ModalOptions, Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {
|
174
|
-
}
|
175
|
-
interface MenuDialogOptions extends ModalOptions, Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {
|
176
|
-
}
|
177
|
-
interface FormDialogOptions extends ModalOptions, Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {
|
178
|
-
}
|
179
|
-
interface OpenOptions<TModalTypes extends string> extends ModalOptions {
|
180
|
-
type?: TModalTypes;
|
181
|
-
scope?: ModalScopes;
|
182
|
-
}
|
183
|
-
type ModalScopes = 'modal' | 'alert';
|
184
|
-
interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions, TModalTypes extends string = string> {
|
119
|
+
open: boolean;
|
185
120
|
/**
|
186
|
-
*
|
187
|
-
* Can be used to close modals.
|
121
|
+
* Callback when the dialog is opened or closed
|
188
122
|
*/
|
189
|
-
|
123
|
+
onOpenChange: (details: {
|
124
|
+
open: boolean;
|
125
|
+
}) => void;
|
190
126
|
/**
|
191
|
-
* The
|
127
|
+
* The dialog title
|
192
128
|
*/
|
193
|
-
|
129
|
+
title?: React.ReactNode;
|
130
|
+
translations?: {
|
131
|
+
cancel?: React.ReactNode;
|
132
|
+
confirm?: React.ReactNode;
|
133
|
+
close?: React.ReactNode;
|
134
|
+
};
|
135
|
+
slotProps?: {
|
136
|
+
cancel?: ButtonProps;
|
137
|
+
confirm?: ButtonProps;
|
138
|
+
footer?: HTMLChakraProps<'div'>;
|
139
|
+
};
|
194
140
|
/**
|
195
|
-
*
|
196
|
-
*
|
197
|
-
* The default scopes are 'modal' and 'alert', alerts can be openend above modals.
|
141
|
+
* Close the dialog on cancel
|
142
|
+
* @default true
|
198
143
|
*/
|
199
|
-
|
144
|
+
closeOnCancel?: boolean;
|
200
145
|
/**
|
201
|
-
*
|
202
|
-
*
|
203
|
-
*
|
204
|
-
* Custom types can be configured using the `modals` prop of `ModalProvider`
|
146
|
+
* Close the dialog on confirm
|
147
|
+
* @default true
|
205
148
|
*/
|
206
|
-
|
149
|
+
closeOnConfirm?: boolean;
|
207
150
|
/**
|
208
|
-
*
|
209
|
-
* This will ignore the `type` param.
|
151
|
+
* Hide the backdrop
|
210
152
|
*/
|
211
|
-
|
153
|
+
backdrop?: boolean;
|
212
154
|
/**
|
213
|
-
*
|
214
|
-
* This is used internally to keep track of the modal state.
|
155
|
+
* Hide the close button
|
215
156
|
*/
|
216
|
-
|
157
|
+
hideCloseButton?: boolean;
|
158
|
+
/**
|
159
|
+
* Defines which button gets initial focus
|
160
|
+
* https://www.w3.org/TR/wai-aria-practices/#alertdialog
|
161
|
+
*/
|
162
|
+
leastDestructiveFocus?: 'cancel' | 'confirm';
|
163
|
+
/**
|
164
|
+
* Function that's called when cancel is clicked
|
165
|
+
*/
|
166
|
+
onCancel?: () => void;
|
167
|
+
/**
|
168
|
+
* Function that's called when confirm is clicked.
|
169
|
+
*/
|
170
|
+
onConfirm?: () => Promise<void> | void;
|
217
171
|
}
|
218
|
-
declare
|
219
|
-
declare const useModalsContext: () => ModalsContextValue<{
|
220
|
-
alert: React$1.FC<ConfirmDialogProps>;
|
221
|
-
confirm: React$1.FC<ConfirmDialogProps>;
|
222
|
-
drawer: React$1.FC<DrawerProps>;
|
223
|
-
modal: React$1.FC<BaseModalProps>;
|
224
|
-
menu: React$1.FC<MenuDialogProps>;
|
225
|
-
form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
226
|
-
cancel?: _chakra_ui_react.ButtonProps;
|
227
|
-
}>;
|
228
|
-
}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null;
|
229
|
-
declare const useModals: () => ModalsContextValue<{
|
230
|
-
alert: React$1.FC<ConfirmDialogProps>;
|
231
|
-
confirm: React$1.FC<ConfirmDialogProps>;
|
232
|
-
drawer: React$1.FC<DrawerProps>;
|
233
|
-
modal: React$1.FC<BaseModalProps>;
|
234
|
-
menu: React$1.FC<MenuDialogProps>;
|
235
|
-
form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
236
|
-
cancel?: _chakra_ui_react.ButtonProps;
|
237
|
-
}>;
|
238
|
-
}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer">;
|
172
|
+
declare const AlertDialog: React.FC<AlertDialogProps>;
|
239
173
|
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
confirm: React$1.FC<ConfirmDialogProps>;
|
248
|
-
drawer: React$1.FC<DrawerProps>;
|
249
|
-
modal: React$1.FC<BaseModalProps>;
|
250
|
-
menu: React$1.FC<MenuDialogProps>;
|
251
|
-
form: _saas_ui_forms.FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
252
|
-
cancel?: _chakra_ui_react.ButtonProps;
|
253
|
-
}>;
|
254
|
-
} & TModalDefs>;
|
255
|
-
};
|
174
|
+
declare const useModals: () => _saas_ui_modals_provider.ModalsContextValue<{
|
175
|
+
alert: React.FC<AlertDialogProps>;
|
176
|
+
confirm: React.FC<AlertDialogProps>;
|
177
|
+
drawer: React.FC<DrawerProps>;
|
178
|
+
modal: React.FC<ModalProps>;
|
179
|
+
}, "alert" | "drawer" | "modal" | "confirm">;
|
180
|
+
declare const ModalsProvider: (props: Omit<_saas_ui_modals_provider.ModalsProviderProps, "modals">) => react_jsx_runtime.JSX.Element;
|
256
181
|
|
257
|
-
export {
|
182
|
+
export { AlertDialog, type AlertDialogProps, Drawer, type DrawerProps, Modal, type ModalProps, ModalsProvider, useModals };
|