@saas-ui/modals 2.0.0-next.8 → 2.0.0-rc.22
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 +129 -0
- package/dist/index.d.ts +147 -57
- package/dist/index.js +139 -89
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +141 -93
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -4
- package/src/create-modals.tsx +30 -0
- package/src/default-modals.ts +14 -0
- package/src/drawer.tsx +47 -9
- package/src/form.tsx +166 -93
- package/src/index.ts +2 -0
- package/src/menu.tsx +7 -1
- package/src/modal.tsx +43 -8
- package/src/provider.tsx +65 -52
- package/src/types.ts +83 -0
- package/src/create-modals.ts +0 -0
package/dist/index.js
CHANGED
@@ -3,6 +3,7 @@
|
|
3
3
|
var React2 = require('react');
|
4
4
|
var react = require('@chakra-ui/react');
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
6
|
+
var utils = require('@chakra-ui/utils');
|
6
7
|
var reactUtils = require('@saas-ui/react-utils');
|
7
8
|
var forms = require('@saas-ui/forms');
|
8
9
|
|
@@ -91,27 +92,35 @@ var BaseDrawer = (props) => {
|
|
91
92
|
const {
|
92
93
|
title,
|
93
94
|
children,
|
95
|
+
footer,
|
94
96
|
isOpen,
|
95
97
|
onClose,
|
96
98
|
hideCloseButton,
|
97
99
|
hideOverlay,
|
100
|
+
headerProps,
|
101
|
+
contentProps,
|
102
|
+
footerProps,
|
98
103
|
...rest
|
99
104
|
} = props;
|
100
105
|
return /* @__PURE__ */ jsxRuntime.jsxs(react.Drawer, { isOpen, onClose, ...rest, children: [
|
101
106
|
!hideOverlay && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerOverlay, {}),
|
102
|
-
/* @__PURE__ */ jsxRuntime.jsxs(react.DrawerContent, { children: [
|
103
|
-
/* @__PURE__ */ jsxRuntime.jsx(react.DrawerHeader, { children: title }),
|
107
|
+
/* @__PURE__ */ jsxRuntime.jsxs(react.DrawerContent, { ...contentProps, children: [
|
108
|
+
title && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerHeader, { ...headerProps, children: title }),
|
104
109
|
!hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerCloseButton, {}),
|
105
|
-
children
|
110
|
+
utils.runIfFn(children, {
|
111
|
+
isOpen,
|
112
|
+
onClose
|
113
|
+
}),
|
114
|
+
footer && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerFooter, { ...footerProps, children: footer })
|
106
115
|
] })
|
107
116
|
] });
|
108
117
|
};
|
109
118
|
var Drawer = (props) => {
|
110
|
-
const {
|
111
|
-
return /* @__PURE__ */ jsxRuntime.
|
112
|
-
|
113
|
-
|
114
|
-
|
119
|
+
const { children, isOpen, onClose, ...rest } = props;
|
120
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BaseDrawer, { isOpen, onClose, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.DrawerBody, { children: utils.runIfFn(children, {
|
121
|
+
isOpen,
|
122
|
+
onClose
|
123
|
+
}) }) });
|
115
124
|
};
|
116
125
|
var BaseModal = (props) => {
|
117
126
|
const {
|
@@ -122,21 +131,30 @@ var BaseModal = (props) => {
|
|
122
131
|
onClose,
|
123
132
|
hideCloseButton,
|
124
133
|
hideOverlay,
|
134
|
+
headerProps,
|
135
|
+
contentProps,
|
136
|
+
footerProps,
|
125
137
|
...rest
|
126
138
|
} = props;
|
127
139
|
return /* @__PURE__ */ jsxRuntime.jsxs(react.Modal, { isOpen, onClose, ...rest, children: [
|
128
140
|
!hideOverlay && /* @__PURE__ */ jsxRuntime.jsx(react.ModalOverlay, {}),
|
129
|
-
/* @__PURE__ */ jsxRuntime.jsxs(react.ModalContent, { children: [
|
130
|
-
title && /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { children: title }),
|
141
|
+
/* @__PURE__ */ jsxRuntime.jsxs(react.ModalContent, { ...contentProps, children: [
|
142
|
+
title && /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { ...headerProps, children: title }),
|
131
143
|
!hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {}),
|
132
|
-
children,
|
133
|
-
|
144
|
+
utils.runIfFn(children, {
|
145
|
+
isOpen,
|
146
|
+
onClose
|
147
|
+
}),
|
148
|
+
footer && /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { ...footerProps, children: footer })
|
134
149
|
] })
|
135
150
|
] });
|
136
151
|
};
|
137
152
|
var Modal = (props) => {
|
138
|
-
const { children, ...rest } = props;
|
139
|
-
return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children
|
153
|
+
const { children, isOpen, onClose, ...rest } = props;
|
154
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { ...rest, isOpen, onClose, children: /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: utils.runIfFn(children, {
|
155
|
+
isOpen,
|
156
|
+
onClose
|
157
|
+
}) }) });
|
140
158
|
};
|
141
159
|
var [StylesProvider] = react.createStylesContext("SuiMenuDialog");
|
142
160
|
var MenuDialog = (props) => {
|
@@ -161,12 +179,14 @@ var MenuDialogList = react.forwardRef(
|
|
161
179
|
footer,
|
162
180
|
initialFocusRef,
|
163
181
|
hideCloseButton,
|
164
|
-
motionPreset,
|
182
|
+
motionPreset = "slideInBottom",
|
183
|
+
isCentered: isCenteredProp,
|
165
184
|
...rest
|
166
185
|
} = props;
|
167
186
|
const { isOpen, onClose, menuRef } = react.useMenuContext();
|
168
187
|
const { ref, ...ownProps } = react.useMenuList(rest, forwardedRef);
|
169
188
|
const styles = react.useMultiStyleConfig("Menu", props);
|
189
|
+
const isCentered = react.useBreakpointValue({ base: true, md: false });
|
170
190
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
171
191
|
BaseModal,
|
172
192
|
{
|
@@ -176,6 +196,8 @@ var MenuDialogList = react.forwardRef(
|
|
176
196
|
title,
|
177
197
|
hideCloseButton,
|
178
198
|
motionPreset,
|
199
|
+
isCentered: isCenteredProp != null ? isCenteredProp : isCentered,
|
200
|
+
contentProps: { mx: 4 },
|
179
201
|
children: [
|
180
202
|
/* @__PURE__ */ jsxRuntime.jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(
|
181
203
|
react.chakra.div,
|
@@ -205,75 +227,78 @@ var MenuDialogList = react.forwardRef(
|
|
205
227
|
);
|
206
228
|
}
|
207
229
|
);
|
208
|
-
var
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
shouldUnregister,
|
249
|
-
shouldUseNativeValidation,
|
250
|
-
criteriaMode,
|
251
|
-
delayError
|
252
|
-
};
|
253
|
-
return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { isOpen, onClose, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(forms.Form, { ...formProps, ref, children: (form) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
254
|
-
/* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: reactUtils.runIfFn(children, form) || /* @__PURE__ */ jsxRuntime.jsx(
|
255
|
-
forms.AutoFields,
|
256
|
-
{
|
257
|
-
schema,
|
258
|
-
fieldResolver,
|
259
|
-
focusFirstField: true
|
260
|
-
}
|
261
|
-
) }),
|
262
|
-
footer || /* @__PURE__ */ jsxRuntime.jsxs(react.ModalFooter, { children: [
|
263
|
-
/* @__PURE__ */ jsxRuntime.jsx(react.Button, { variant: "ghost", mr: 3, onClick: onClose, children: cancelLabel }),
|
264
|
-
/* @__PURE__ */ jsxRuntime.jsx(forms.SubmitButton, { children: submitLabel })
|
265
|
-
] })
|
266
|
-
] }) }) });
|
267
|
-
}
|
268
|
-
);
|
269
|
-
var ModalsContext = React2__namespace.createContext(
|
270
|
-
null
|
271
|
-
);
|
272
|
-
var initialModalState = {
|
273
|
-
id: null,
|
274
|
-
props: null,
|
275
|
-
type: "modal"
|
230
|
+
var useFormProps = (props) => {
|
231
|
+
const {
|
232
|
+
schema,
|
233
|
+
resolver,
|
234
|
+
fieldResolver,
|
235
|
+
defaultValues,
|
236
|
+
values,
|
237
|
+
context,
|
238
|
+
onChange,
|
239
|
+
onSubmit,
|
240
|
+
onError,
|
241
|
+
mode,
|
242
|
+
reValidateMode,
|
243
|
+
shouldFocusError = true,
|
244
|
+
shouldUnregister,
|
245
|
+
shouldUseNativeValidation,
|
246
|
+
criteriaMode,
|
247
|
+
delayError = 100,
|
248
|
+
fields,
|
249
|
+
...modalProps
|
250
|
+
} = props;
|
251
|
+
const formProps = {
|
252
|
+
schema,
|
253
|
+
resolver,
|
254
|
+
defaultValues,
|
255
|
+
values,
|
256
|
+
context,
|
257
|
+
onChange,
|
258
|
+
onSubmit,
|
259
|
+
onError,
|
260
|
+
mode,
|
261
|
+
reValidateMode,
|
262
|
+
shouldFocusError,
|
263
|
+
shouldUnregister,
|
264
|
+
shouldUseNativeValidation,
|
265
|
+
criteriaMode,
|
266
|
+
delayError,
|
267
|
+
fields
|
268
|
+
};
|
269
|
+
return { modalProps, formProps, fields };
|
276
270
|
};
|
271
|
+
function createFormDialog(Form2) {
|
272
|
+
const Dialog = react.forwardRef((props, ref) => {
|
273
|
+
const { isOpen, onClose, footer, children, ...rest } = props;
|
274
|
+
const { modalProps, formProps, fields } = useFormProps(rest);
|
275
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { ...modalProps, isOpen, onClose, children: /* @__PURE__ */ jsxRuntime.jsx(Form2, { ref, ...formProps, children: (form) => {
|
276
|
+
var _a, _b;
|
277
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
278
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: reactUtils.runIfFn(children, form) || /* @__PURE__ */ jsxRuntime.jsx(forms.AutoFields, {}) }),
|
279
|
+
footer || /* @__PURE__ */ jsxRuntime.jsxs(react.ModalFooter, { children: [
|
280
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
281
|
+
react.Button,
|
282
|
+
{
|
283
|
+
variant: "ghost",
|
284
|
+
mr: 3,
|
285
|
+
onClick: onClose,
|
286
|
+
...fields == null ? void 0 : fields.cancel,
|
287
|
+
children: (_b = (_a = fields == null ? void 0 : fields.cancel) == null ? void 0 : _a.children) != null ? _b : "Cancel"
|
288
|
+
}
|
289
|
+
),
|
290
|
+
/* @__PURE__ */ jsxRuntime.jsx(forms.SubmitButton, { ...fields == null ? void 0 : fields.submit })
|
291
|
+
] })
|
292
|
+
] });
|
293
|
+
} }) });
|
294
|
+
});
|
295
|
+
Dialog.displayName = `${Form2.displayName || Form2.name}Dialog`;
|
296
|
+
Dialog.id = Form2.id;
|
297
|
+
return Dialog;
|
298
|
+
}
|
299
|
+
var FormDialog = createFormDialog(forms.Form);
|
300
|
+
|
301
|
+
// src/default-modals.ts
|
277
302
|
var defaultModals = {
|
278
303
|
alert: ConfirmDialog,
|
279
304
|
confirm: ConfirmDialog,
|
@@ -282,6 +307,12 @@ var defaultModals = {
|
|
282
307
|
menu: MenuDialog,
|
283
308
|
form: FormDialog
|
284
309
|
};
|
310
|
+
var ModalsContext = React2__namespace.createContext(null);
|
311
|
+
var initialModalState = {
|
312
|
+
id: null,
|
313
|
+
props: null,
|
314
|
+
type: "modal"
|
315
|
+
};
|
285
316
|
function ModalsProvider({ children, modals }) {
|
286
317
|
const _instances = React2__namespace.useMemo(() => /* @__PURE__ */ new Set(), []);
|
287
318
|
const [activeModals, setActiveModals] = React2__namespace.useState({
|
@@ -308,12 +339,15 @@ function ModalsProvider({ children, modals }) {
|
|
308
339
|
[scope]: modal
|
309
340
|
}));
|
310
341
|
};
|
311
|
-
const open = (options) => {
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
component:
|
342
|
+
const open = (componentOrOptions, options) => {
|
343
|
+
let _options;
|
344
|
+
if (typeof componentOrOptions === "function") {
|
345
|
+
_options = {
|
346
|
+
component: componentOrOptions,
|
347
|
+
...options
|
316
348
|
};
|
349
|
+
} else {
|
350
|
+
_options = componentOrOptions;
|
317
351
|
}
|
318
352
|
const {
|
319
353
|
id = _instances.size + 1,
|
@@ -321,7 +355,7 @@ function ModalsProvider({ children, modals }) {
|
|
321
355
|
scope = "modal",
|
322
356
|
component,
|
323
357
|
...props
|
324
|
-
} =
|
358
|
+
} = _options;
|
325
359
|
const modal = {
|
326
360
|
id,
|
327
361
|
props,
|
@@ -406,6 +440,7 @@ function ModalsProvider({ children, modals }) {
|
|
406
440
|
modal.scope
|
407
441
|
);
|
408
442
|
}
|
443
|
+
closeComplete(id);
|
409
444
|
};
|
410
445
|
const closeComplete = (id) => {
|
411
446
|
const modals2 = [...Array.from(_instances)];
|
@@ -462,6 +497,19 @@ var useModalsContext = () => React2__namespace.useContext(ModalsContext);
|
|
462
497
|
var useModals = () => {
|
463
498
|
return useModalsContext();
|
464
499
|
};
|
500
|
+
var createModals = (options) => {
|
501
|
+
const modals = {
|
502
|
+
...defaultModals,
|
503
|
+
...options.modals
|
504
|
+
};
|
505
|
+
const Provider = (props) => {
|
506
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ModalsProvider, { children: props.children, modals });
|
507
|
+
};
|
508
|
+
return {
|
509
|
+
ModalsProvider: Provider,
|
510
|
+
useModals
|
511
|
+
};
|
512
|
+
};
|
465
513
|
|
466
514
|
exports.BaseDrawer = BaseDrawer;
|
467
515
|
exports.BaseModal = BaseModal;
|
@@ -473,6 +521,8 @@ exports.MenuDialogList = MenuDialogList;
|
|
473
521
|
exports.Modal = Modal;
|
474
522
|
exports.ModalsContext = ModalsContext;
|
475
523
|
exports.ModalsProvider = ModalsProvider;
|
524
|
+
exports.createFormDialog = createFormDialog;
|
525
|
+
exports.createModals = createModals;
|
476
526
|
exports.useModals = useModals;
|
477
527
|
exports.useModalsContext = useModalsContext;
|
478
528
|
//# sourceMappingURL=out.js.map
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx"],"names":["jsx","jsxs","ModalFooter","ModalBody","Button","forwardRef","React","component","modals","modal","children"],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n {cancelProps?.children || cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children || confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","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} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title?: React.ReactNode\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\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n {title && <ModalHeader>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n Menu,\n MenuListProps,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n const { onClose, onCloseComplete, ...rest } = props\n\n return (\n <Menu\n variant=\"dialog\"\n onClose={() => {\n onClose?.()\n // Not supported in Menu, so we call it here instead\n // @todo Refactor this in v2?\n onCloseComplete?.()\n }}\n {...rest}\n />\n )\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n _dark: {\n /* @ts-expect-error */\n ...(styles.list._dark || {}),\n boxShadow: 'none',\n },\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n }\n)\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter, Button, forwardRef } 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} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues, TContext>,\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 > {\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 * The cancel button label\n * @default \"Cancel\"\n */\n cancelLabel?: React.ReactNode\n /**\n * The submit button label\n * @default \"Submit\"\n */\n submitLabel?: React.ReactNode\n /**\n * If no children are passed, this will auto render fields based on the supplied schema.\n */\n children?: React.ReactNode\n /**\n * A schema field resolver used to auto generate form fields.\n */\n fieldResolver?: FieldResolver\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 = forwardRef(\n <\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n >(\n props: FormDialogProps<TFieldValues, TContext>,\n ref: React.ForwardedRef<HTMLFormElement>\n ) => {\n const {\n children,\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 cancelLabel = 'Cancel',\n submitLabel = 'Submit',\n footer,\n isOpen,\n onClose,\n ...rest\n } = props\n\n const formProps = {\n ref,\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 }\n\n return (\n <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>\n <Form {...formProps} ref={ref}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) || (\n <AutoFields\n schema={schema}\n fieldResolver={fieldResolver}\n focusFirstField\n />\n )}\n </ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button variant=\"ghost\" mr={3} onClick={onClose}>\n {cancelLabel}\n </Button>\n <SubmitButton>{submitLabel}</SubmitButton>\n </ModalFooter>\n )}\n </>\n )}\n </Form>\n </BaseModal>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormDialogProps<TFieldValues> & {\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { Modal, BaseModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\nimport { MenuDialog, MenuDialogProps } from './menu'\nimport { FormDialog, FormDialogProps } from './form'\n\nexport interface ModalsContextValue {\n open: (options: OpenOptions) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: (options: FormDialogOptions) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue | null>(\n null\n)\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n body?: React.ReactNode\n children?: React.ReactNode\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes =\n | 'modal'\n | 'drawer'\n | 'alert'\n | 'confirm'\n | 'menu'\n | string\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n /**\n * Whether the modal is open or not.\n * This is used internally to keep track of the modal state.\n */\n isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type: ModalTypes = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends ModalOptions>(\n options: T | React.FC<BaseModalProps>\n ): ModalId => {\n if (typeof options === 'function') {\n const component: React.FC<BaseModalProps> = options\n options = {\n component,\n } as unknown as T\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n isOpen: true,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions): ModalId => {\n return open<DrawerOptions>({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ConfirmDialogOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ConfirmDialogOptions): ModalId => {\n return open<ConfirmDialogOptions>({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: MenuDialogOptions): ModalId => {\n return open<MenuDialogOptions>({\n ...options,\n type: 'menu',\n })\n }\n\n const form = (options: FormDialogOptions): ModalId => {\n return open<FormDialogOptions>({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(\n {\n ...modal,\n isOpen: false,\n },\n modal.scope\n )\n } else if (scoped.length > 1) {\n setActiveModal(scoped[scoped.length - 2], modal.scope)\n } else {\n setActiveModal(\n {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n }\n\n const closeComplete = (id?: ModalId | null) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(initialModalState, modal.scope)\n }\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n menu,\n form,\n close,\n closeAll,\n }\n\n const content = React.useMemo(\n () =>\n Object.entries(activeModals).map(([scope, config]) => {\n const Component = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!config.isOpen}\n onClose={() => close(config.id)}\n onCloseComplete={() => closeComplete(config.id)}\n />\n )\n }),\n [activeModals]\n )\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = () =>\n React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"]}
|
1
|
+
{"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx","../src/default-modals.ts","../src/create-modals.tsx"],"names":["jsx","jsxs","runIfFn","ModalFooter","ModalBody","Button","forwardRef","Form","React","modals","modal","children"],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n {cancelProps?.children || cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children || confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n ModalHeaderProps,\n ModalContentProps,\n ModalFooterProps,\n} from '@chakra-ui/react'\nimport { MaybeRenderProp } from '@chakra-ui/react-utils'\nimport { runIfFn } from '@chakra-ui/utils'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer 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 overflow\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 BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n footer,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n headerProps,\n contentProps,\n footerProps,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent {...contentProps}>\n {title && <DrawerHeader {...headerProps}>{title}</DrawerHeader>}\n {!hideCloseButton && <DrawerCloseButton />}\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n {footer && <DrawerFooter {...footerProps}>{footer}</DrawerFooter>}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { children, isOpen, onClose, ...rest } = props\n return (\n <BaseDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n <DrawerBody>\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n </DrawerBody>\n </BaseDrawer>\n )\n}\n","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'\nimport { MaybeRenderProp } from '@chakra-ui/react-utils'\nimport { runIfFn } 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 ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n Menu,\n MenuListProps,\n useBreakpointValue,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n const { onClose, onCloseComplete, ...rest } = props\n\n return (\n <Menu\n variant=\"dialog\"\n onClose={() => {\n onClose?.()\n // Not supported in Menu, so we call it here instead\n // @todo Refactor this in v2?\n onCloseComplete?.()\n }}\n {...rest}\n />\n )\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset = 'slideInBottom',\n isCentered: isCenteredProp,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n const isCentered = useBreakpointValue({ base: true, md: false })\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n isCentered={isCenteredProp ?? isCentered}\n contentProps={{ mx: 4 }}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n _dark: {\n /* @ts-expect-error */\n ...(styles.list._dark || {}),\n boxShadow: 'none',\n },\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\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 { YupFormType } from '@saas-ui/forms/yup'\nimport { ZodFormType } from '@saas-ui/forms/zod'\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 TFieldTypes = FieldProps<TFieldValues>\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TSchema, TFieldValues, TContext, 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 | '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 ...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 }\n\n return { modalProps, formProps, fields }\n}\n\n/**\n * @todo make this dynamic to support other schema types\n */\ntype MergeDialogProps<T> = T extends YupFormType<\n infer FieldDefs,\n infer ExtraProps,\n infer ExtraOverrides,\n 'yup'\n>\n ? YupFormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraOverrides & FormDialogFieldOverrides\n >\n : T extends ZodFormType<\n infer FieldDefs,\n infer ExtraProps,\n infer ExtraOverrides,\n 'zod'\n >\n ? ZodFormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraOverrides & FormDialogFieldOverrides\n >\n : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides>\n ? FormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraOverrides & FormDialogFieldOverrides\n >\n : never\n\ntype IsSchemaType<T, Schema, FieldDefs> = 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 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 ExtraOverrides = FormDialogFieldOverrides,\n TFormType extends DefaultFormType<\n FieldDefs,\n ExtraProps,\n ExtraOverrides\n > = DefaultFormType<FieldDefs, ExtraProps, 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 ref={ref} {...(formProps as any)}>\n {(form: any) => (\n <>\n <ModalBody>{runIfFn(children, form) || <AutoFields />}</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","import * as React from 'react'\n\nimport { BaseModalProps } from './modal'\nimport { DrawerProps } from './drawer'\nimport { ConfirmDialogProps } from './dialog'\nimport { MenuDialogProps } from './menu'\nimport { FormDialogProps } from './form'\nimport { defaultModals } from './default-modals'\nimport { FieldValues, FormType } from '@saas-ui/forms'\nimport { FormDialogHandler, FormHandler } from './types'\n\nexport interface ModalsContextValue<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,\n TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>\n> {\n open: <T extends OpenOptions<TTypes>>(\n componentOrOptions: T extends {\n component: infer TComponent extends React.FC<any>\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>\n : T extends {\n type: infer TType extends keyof TModals\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>\n : T,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: FormDialogHandler<TModals['form']>\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue<\n typeof defaultModals\n> | null>(null)\n\nexport interface ModalsProviderProps<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>\n> {\n children: React.ReactNode\n modals?: TModals\n}\n\nexport type ModalId = string | number\n\ntype WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions<TModalTypes extends string> extends ModalOptions {\n type?: TModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions,\n TModalTypes extends string = string\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: TModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n /**\n * Whether the modal is open or not.\n * This is used internally to keep track of the modal state.\n */\n isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends OpenOptions<any>>(\n componentOrOptions: any,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ): ModalId => {\n let _options: ModalOptions\n if (typeof componentOrOptions === 'function') {\n _options = {\n component: componentOrOptions,\n ...options,\n } as unknown as T\n } else {\n _options = componentOrOptions\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = _options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n isOpen: true,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions) => {\n return open<DrawerOptions>({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ConfirmDialogOptions) => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ConfirmDialogOptions) => {\n return open<ConfirmDialogOptions>({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: MenuDialogOptions) => {\n return open<MenuDialogOptions>({\n ...options,\n type: 'menu',\n })\n }\n\n const form = (options: any) => {\n return open({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(\n {\n ...modal,\n isOpen: false,\n },\n modal.scope\n )\n } else if (scoped.length > 1) {\n setActiveModal(scoped[scoped.length - 2], modal.scope)\n } else {\n setActiveModal(\n {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n\n closeComplete(id)\n }\n\n const closeComplete = (id?: ModalId | null) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(initialModalState, modal.scope)\n }\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n menu,\n form,\n close,\n closeAll,\n }\n\n const content = React.useMemo(\n () =>\n Object.entries(activeModals).map(([scope, config]) => {\n const Component = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!config.isOpen}\n onClose={() => close(config.id)}\n onCloseComplete={() => closeComplete(config.id)}\n />\n )\n }),\n [activeModals]\n )\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = () =>\n React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n return useModalsContext()\n}\n","import { ConfirmDialog } from './dialog'\nimport { MenuDialog } from './menu'\nimport { FormDialog } from './form'\nimport { Drawer } from './drawer'\nimport { Modal } from './modal'\n\nexport const defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n","import { defaultModals } from './default-modals'\nimport {\n ModalsContextValue,\n ModalsProvider,\n ModalsProviderProps,\n useModals,\n} from './provider'\n\nexport interface CreateModalsOptions<\n TModalDefs extends Record<string, React.FC<any>>\n> {\n modals: TModalDefs\n}\n\nexport const createModals = <TModalDefs extends Record<string, React.FC<any>>>(\n options: CreateModalsOptions<TModalDefs>\n) => {\n const modals = {\n ...defaultModals,\n ...options.modals,\n }\n const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {\n return <ModalsProvider children={props.children} modals={modals} />\n }\n\n return {\n ModalsProvider: Provider,\n useModals: useModals as () => ModalsContextValue<typeof modals>,\n }\n}\n"]}
|