@saas-ui/modals 2.0.0-next.2 → 2.0.0-next.21

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/dist/index.js CHANGED
@@ -1,11 +1,14 @@
1
1
  'use strict';
2
2
 
3
- var React = require('react');
3
+ var React2 = require('react');
4
4
  var react = require('@chakra-ui/react');
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var utils = require('@chakra-ui/utils');
5
7
  var reactUtils = require('@saas-ui/react-utils');
6
8
  var forms = require('@saas-ui/forms');
7
9
 
8
- function _interopNamespaceDefault(e) {
10
+ function _interopNamespace(e) {
11
+ if (e && e.__esModule) return e;
9
12
  var n = Object.create(null);
10
13
  if (e) {
11
14
  Object.keys(e).forEach(function (k) {
@@ -22,7 +25,7 @@ function _interopNamespaceDefault(e) {
22
25
  return Object.freeze(n);
23
26
  }
24
27
 
25
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
28
+ var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
26
29
 
27
30
  // src/dialog.tsx
28
31
  var ConfirmDialog = (props) => {
@@ -43,52 +46,81 @@ var ConfirmDialog = (props) => {
43
46
  children,
44
47
  ...rest
45
48
  } = props;
46
- const cancelRef = React__namespace.useRef(null);
47
- const confirmRef = React__namespace.useRef(null);
48
- return /* @__PURE__ */ React__namespace.createElement(react.AlertDialog, {
49
- isOpen,
50
- onClose,
51
- ...rest,
52
- leastDestructiveRef: leastDestructiveFocus === "cancel" ? cancelRef : confirmRef
53
- }, /* @__PURE__ */ React__namespace.createElement(react.AlertDialogOverlay, null, /* @__PURE__ */ React__namespace.createElement(react.AlertDialogContent, null, /* @__PURE__ */ React__namespace.createElement(react.AlertDialogHeader, null, title), /* @__PURE__ */ React__namespace.createElement(react.AlertDialogBody, null, children), /* @__PURE__ */ React__namespace.createElement(react.AlertDialogFooter, null, /* @__PURE__ */ React__namespace.createElement(react.ButtonGroup, {
54
- ...buttonGroupProps
55
- }, /* @__PURE__ */ React__namespace.createElement(react.Button, {
56
- ref: cancelRef,
57
- ...cancelProps,
58
- onClick: () => {
59
- onCancel == null ? void 0 : onCancel();
60
- closeOnCancel && onClose();
61
- }
62
- }, (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel), /* @__PURE__ */ React__namespace.createElement(react.Button, {
63
- ref: confirmRef,
64
- ...confirmProps,
65
- onClick: () => {
66
- onConfirm == null ? void 0 : onConfirm();
67
- closeOnConfirm && onClose();
49
+ const cancelRef = React2__namespace.useRef(null);
50
+ const confirmRef = React2__namespace.useRef(null);
51
+ return /* @__PURE__ */ jsxRuntime.jsx(
52
+ react.AlertDialog,
53
+ {
54
+ isOpen,
55
+ onClose,
56
+ ...rest,
57
+ leastDestructiveRef: leastDestructiveFocus === "cancel" ? cancelRef : confirmRef,
58
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.AlertDialogOverlay, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.AlertDialogContent, { children: [
59
+ /* @__PURE__ */ jsxRuntime.jsx(react.AlertDialogHeader, { children: title }),
60
+ /* @__PURE__ */ jsxRuntime.jsx(react.AlertDialogBody, { children }),
61
+ /* @__PURE__ */ jsxRuntime.jsx(react.AlertDialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.ButtonGroup, { ...buttonGroupProps, children: [
62
+ /* @__PURE__ */ jsxRuntime.jsx(
63
+ react.Button,
64
+ {
65
+ ref: cancelRef,
66
+ ...cancelProps,
67
+ onClick: () => {
68
+ onCancel == null ? void 0 : onCancel();
69
+ closeOnCancel && onClose();
70
+ },
71
+ children: (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel
72
+ }
73
+ ),
74
+ /* @__PURE__ */ jsxRuntime.jsx(
75
+ react.Button,
76
+ {
77
+ ref: confirmRef,
78
+ ...confirmProps,
79
+ onClick: () => {
80
+ onConfirm == null ? void 0 : onConfirm();
81
+ closeOnConfirm && onClose();
82
+ },
83
+ children: (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel
84
+ }
85
+ )
86
+ ] }) })
87
+ ] }) })
68
88
  }
69
- }, (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel))))));
89
+ );
70
90
  };
71
91
  var BaseDrawer = (props) => {
72
92
  const {
73
93
  title,
74
94
  children,
95
+ footer,
75
96
  isOpen,
76
97
  onClose,
77
98
  hideCloseButton,
78
99
  hideOverlay,
100
+ headerProps,
101
+ contentProps,
102
+ footerProps,
79
103
  ...rest
80
104
  } = props;
81
- return /* @__PURE__ */ React__namespace.createElement(react.Drawer, {
82
- isOpen,
83
- onClose,
84
- ...rest
85
- }, !hideOverlay && /* @__PURE__ */ React__namespace.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React__namespace.createElement(react.DrawerContent, null, /* @__PURE__ */ React__namespace.createElement(react.DrawerHeader, null, title), !hideCloseButton && /* @__PURE__ */ React__namespace.createElement(react.DrawerCloseButton, null), children));
105
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.Drawer, { isOpen, onClose, ...rest, children: [
106
+ !hideOverlay && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerOverlay, {}),
107
+ /* @__PURE__ */ jsxRuntime.jsxs(react.DrawerContent, { ...contentProps, children: [
108
+ title && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerHeader, { ...headerProps, children: title }),
109
+ !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerCloseButton, {}),
110
+ utils.runIfFn(children, {
111
+ isOpen,
112
+ onClose
113
+ }),
114
+ footer && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerFooter, { ...footerProps, children: footer })
115
+ ] })
116
+ ] });
86
117
  };
87
118
  var Drawer = (props) => {
88
- const { footer, children, ...rest } = props;
89
- return /* @__PURE__ */ React__namespace.createElement(BaseDrawer, {
90
- ...rest
91
- }, /* @__PURE__ */ React__namespace.createElement(react.DrawerBody, null, children), footer && /* @__PURE__ */ React__namespace.createElement(react.DrawerFooter, null, footer));
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
+ }) }) });
92
124
  };
93
125
  var BaseModal = (props) => {
94
126
  const {
@@ -99,31 +131,45 @@ var BaseModal = (props) => {
99
131
  onClose,
100
132
  hideCloseButton,
101
133
  hideOverlay,
134
+ headerProps,
135
+ contentProps,
136
+ footerProps,
102
137
  ...rest
103
138
  } = props;
104
- return /* @__PURE__ */ React__namespace.createElement(react.Modal, {
105
- isOpen,
106
- onClose,
107
- ...rest
108
- }, !hideOverlay && /* @__PURE__ */ React__namespace.createElement(react.ModalOverlay, null), /* @__PURE__ */ React__namespace.createElement(react.ModalContent, null, title && /* @__PURE__ */ React__namespace.createElement(react.ModalHeader, null, title), !hideCloseButton && /* @__PURE__ */ React__namespace.createElement(react.ModalCloseButton, null), children, footer && /* @__PURE__ */ React__namespace.createElement(react.ModalFooter, null, footer)));
139
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.Modal, { isOpen, onClose, ...rest, children: [
140
+ !hideOverlay && /* @__PURE__ */ jsxRuntime.jsx(react.ModalOverlay, {}),
141
+ /* @__PURE__ */ jsxRuntime.jsxs(react.ModalContent, { ...contentProps, children: [
142
+ title && /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { ...headerProps, children: title }),
143
+ !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {}),
144
+ utils.runIfFn(children, {
145
+ isOpen,
146
+ onClose
147
+ }),
148
+ footer && /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { ...footerProps, children: footer })
149
+ ] })
150
+ ] });
109
151
  };
110
152
  var Modal = (props) => {
111
- const { children, ...rest } = props;
112
- return /* @__PURE__ */ React__namespace.createElement(BaseModal, {
113
- ...rest
114
- }, /* @__PURE__ */ React__namespace.createElement(react.ModalBody, null, 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
+ }) }) });
115
158
  };
116
159
  var [StylesProvider] = react.createStylesContext("SuiMenuDialog");
117
160
  var MenuDialog = (props) => {
118
161
  const { onClose, onCloseComplete, ...rest } = props;
119
- return /* @__PURE__ */ React__namespace.createElement(react.Menu, {
120
- variant: "dialog",
121
- onClose: () => {
122
- onClose == null ? void 0 : onClose();
123
- onCloseComplete == null ? void 0 : onCloseComplete();
124
- },
125
- ...rest
126
- });
162
+ return /* @__PURE__ */ jsxRuntime.jsx(
163
+ react.Menu,
164
+ {
165
+ variant: "dialog",
166
+ onClose: () => {
167
+ onClose == null ? void 0 : onClose();
168
+ onCloseComplete == null ? void 0 : onCloseComplete();
169
+ },
170
+ ...rest
171
+ }
172
+ );
127
173
  };
128
174
  var MenuDialogList = react.forwardRef(
129
175
  (props, forwardedRef) => {
@@ -133,106 +179,126 @@ var MenuDialogList = react.forwardRef(
133
179
  footer,
134
180
  initialFocusRef,
135
181
  hideCloseButton,
136
- motionPreset,
182
+ motionPreset = "slideInBottom",
183
+ isCentered: isCenteredProp,
137
184
  ...rest
138
185
  } = props;
139
186
  const { isOpen, onClose, menuRef } = react.useMenuContext();
140
187
  const { ref, ...ownProps } = react.useMenuList(rest, forwardedRef);
141
188
  const styles = react.useMultiStyleConfig("Menu", props);
142
- return /* @__PURE__ */ React__namespace.createElement(BaseModal, {
143
- isOpen,
144
- onClose,
145
- initialFocusRef: initialFocusRef || menuRef,
146
- title,
147
- hideCloseButton,
148
- motionPreset
149
- }, /* @__PURE__ */ React__namespace.createElement(StylesProvider, {
150
- value: styles
151
- }, /* @__PURE__ */ React__namespace.createElement(react.chakra.div, {
152
- ...ownProps,
153
- ref,
154
- __css: {
155
- outline: 0,
156
- maxHeight: "80vh",
157
- overflowY: "auto",
158
- ...styles.list,
159
- boxShadow: "none",
160
- border: 0
189
+ const isCentered = react.useBreakpointValue({ base: true, md: false });
190
+ return /* @__PURE__ */ jsxRuntime.jsxs(
191
+ BaseModal,
192
+ {
193
+ isOpen,
194
+ onClose,
195
+ initialFocusRef: initialFocusRef || menuRef,
196
+ title,
197
+ hideCloseButton,
198
+ motionPreset,
199
+ isCentered: isCenteredProp != null ? isCenteredProp : isCentered,
200
+ contentProps: { mx: 4 },
201
+ children: [
202
+ /* @__PURE__ */ jsxRuntime.jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(
203
+ react.chakra.div,
204
+ {
205
+ ...ownProps,
206
+ ref,
207
+ __css: {
208
+ outline: 0,
209
+ maxHeight: "80vh",
210
+ // can override this in theme
211
+ overflowY: "auto",
212
+ // can override this in theme
213
+ ...styles.list,
214
+ boxShadow: "none",
215
+ border: 0,
216
+ _dark: {
217
+ /* @ts-expect-error */
218
+ ...styles.list._dark || {},
219
+ boxShadow: "none"
220
+ }
221
+ }
222
+ }
223
+ ) }),
224
+ footer && /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { children: footer })
225
+ ]
161
226
  }
162
- })), footer && /* @__PURE__ */ React__namespace.createElement(react.ModalFooter, null, footer));
227
+ );
163
228
  }
164
229
  );
165
- var FormDialog = react.forwardRef(
166
- (props, ref) => {
167
- const {
168
- children,
169
- schema,
170
- resolver,
171
- fieldResolver,
172
- defaultValues,
173
- values,
174
- context,
175
- onChange,
176
- onSubmit,
177
- onError,
178
- mode,
179
- reValidateMode,
180
- shouldFocusError = true,
181
- shouldUnregister,
182
- shouldUseNativeValidation,
183
- criteriaMode,
184
- delayError = 100,
185
- cancelLabel = "Cancel",
186
- submitLabel = "Submit",
187
- footer,
188
- isOpen,
189
- onClose,
190
- ...rest
191
- } = props;
192
- const formProps = {
193
- ref,
194
- schema,
195
- resolver,
196
- defaultValues,
197
- values,
198
- context,
199
- onChange,
200
- onSubmit,
201
- onError,
202
- mode,
203
- reValidateMode,
204
- shouldFocusError,
205
- shouldUnregister,
206
- shouldUseNativeValidation,
207
- criteriaMode,
208
- delayError
209
- };
210
- return /* @__PURE__ */ React__namespace.createElement(BaseModal, {
211
- isOpen,
212
- onClose,
213
- ...rest
214
- }, /* @__PURE__ */ React__namespace.createElement(forms.Form, {
215
- ...formProps,
216
- ref
217
- }, (form) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(react.ModalBody, null, reactUtils.runIfFn(children, form) || /* @__PURE__ */ React__namespace.createElement(forms.Fields, {
218
- schema,
219
- fieldResolver,
220
- focusFirstField: true
221
- })), footer || /* @__PURE__ */ React__namespace.createElement(react.ModalFooter, null, /* @__PURE__ */ React__namespace.createElement(react.Button, {
222
- variant: "ghost",
223
- mr: 3,
224
- onClick: onClose
225
- }, cancelLabel), /* @__PURE__ */ React__namespace.createElement(forms.SubmitButton, null, submitLabel)))));
226
- }
227
- );
228
- var ModalsContext = React__namespace.createContext(
229
- null
230
- );
231
- var initialModalState = {
232
- id: null,
233
- props: null,
234
- 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 };
235
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
236
302
  var defaultModals = {
237
303
  alert: ConfirmDialog,
238
304
  confirm: ConfirmDialog,
@@ -241,12 +307,18 @@ var defaultModals = {
241
307
  menu: MenuDialog,
242
308
  form: FormDialog
243
309
  };
310
+ var ModalsContext = React2__namespace.createContext(null);
311
+ var initialModalState = {
312
+ id: null,
313
+ props: null,
314
+ type: "modal"
315
+ };
244
316
  function ModalsProvider({ children, modals }) {
245
- const _instances = React__namespace.useMemo(() => /* @__PURE__ */ new Set(), []);
246
- const [activeModals, setActiveModals] = React__namespace.useState({
317
+ const _instances = React2__namespace.useMemo(() => /* @__PURE__ */ new Set(), []);
318
+ const [activeModals, setActiveModals] = React2__namespace.useState({
247
319
  modal: initialModalState
248
320
  });
249
- const getModalComponent = React__namespace.useMemo(() => {
321
+ const getModalComponent = React2__namespace.useMemo(() => {
250
322
  const _modals = {
251
323
  ...defaultModals,
252
324
  ...modals
@@ -267,12 +339,15 @@ function ModalsProvider({ children, modals }) {
267
339
  [scope]: modal
268
340
  }));
269
341
  };
270
- const open = (options) => {
271
- if (typeof options === "function") {
272
- const component2 = options;
273
- options = {
274
- component: component2
342
+ const open = (componentOrOptions, options) => {
343
+ let _options;
344
+ if (typeof componentOrOptions === "function") {
345
+ _options = {
346
+ component: componentOrOptions,
347
+ ...options
275
348
  };
349
+ } else {
350
+ _options = componentOrOptions;
276
351
  }
277
352
  const {
278
353
  id = _instances.size + 1,
@@ -280,7 +355,7 @@ function ModalsProvider({ children, modals }) {
280
355
  scope = "modal",
281
356
  component,
282
357
  ...props
283
- } = options;
358
+ } = _options;
284
359
  const modal = {
285
360
  id,
286
361
  props,
@@ -360,10 +435,12 @@ function ModalsProvider({ children, modals }) {
360
435
  id: null,
361
436
  props: null,
362
437
  type: modal.type
438
+ // Keep type same as last modal type to make sure the animation isn't interrupted
363
439
  },
364
440
  modal.scope
365
441
  );
366
442
  }
443
+ closeComplete(id);
367
444
  };
368
445
  const closeComplete = (id) => {
369
446
  const modals2 = [...Array.from(_instances)];
@@ -392,30 +469,47 @@ function ModalsProvider({ children, modals }) {
392
469
  close,
393
470
  closeAll
394
471
  };
395
- const content = React__namespace.useMemo(
472
+ const content = React2__namespace.useMemo(
396
473
  () => Object.entries(activeModals).map(([scope, config]) => {
397
474
  const Component = config.component || getModalComponent(config.type);
398
475
  const { title, body, children: children2, ...props } = config.props || {};
399
- return /* @__PURE__ */ React__namespace.createElement(Component, {
400
- key: scope,
401
- title,
402
- children: body || children2,
403
- ...props,
404
- isOpen: !!config.isOpen,
405
- onClose: () => close(config.id),
406
- onCloseComplete: () => closeComplete(config.id)
407
- });
476
+ return /* @__PURE__ */ jsxRuntime.jsx(
477
+ Component,
478
+ {
479
+ title,
480
+ children: body || children2,
481
+ ...props,
482
+ isOpen: !!config.isOpen,
483
+ onClose: () => close(config.id),
484
+ onCloseComplete: () => closeComplete(config.id)
485
+ },
486
+ scope
487
+ );
408
488
  }),
409
489
  [activeModals]
410
490
  );
411
- return /* @__PURE__ */ React__namespace.createElement(ModalsContext.Provider, {
412
- value: context
413
- }, content, children);
491
+ return /* @__PURE__ */ jsxRuntime.jsxs(ModalsContext.Provider, { value: context, children: [
492
+ content,
493
+ children
494
+ ] });
414
495
  }
415
- var useModalsContext = () => React__namespace.useContext(ModalsContext);
496
+ var useModalsContext = () => React2__namespace.useContext(ModalsContext);
416
497
  var useModals = () => {
417
498
  return useModalsContext();
418
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
+ };
419
513
 
420
514
  exports.BaseDrawer = BaseDrawer;
421
515
  exports.BaseModal = BaseModal;
@@ -427,6 +521,8 @@ exports.MenuDialogList = MenuDialogList;
427
521
  exports.Modal = Modal;
428
522
  exports.ModalsContext = ModalsContext;
429
523
  exports.ModalsProvider = ModalsProvider;
524
+ exports.createFormDialog = createFormDialog;
525
+ exports.createModals = createModals;
430
526
  exports.useModals = useModals;
431
527
  exports.useModalsContext = useModalsContext;
432
528
  //# sourceMappingURL=out.js.map