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

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/index.d.ts +5 -0
  3. package/dist/index.js +150 -104
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +148 -103
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -3
  8. package/src/form.tsx +7 -3
  9. package/src/menu.tsx +5 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @saas-ui/modals
2
2
 
3
+ ## 2.0.0-next.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [a8ea24da]
8
+ - @saas-ui/forms@2.0.0-next.5
9
+
10
+ ## 2.0.0-next.4
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies [27a68bca]
15
+ - @saas-ui/hooks@2.0.0-next.2
16
+ - @saas-ui/forms@2.0.0-next.4
17
+
18
+ ## 2.0.0-next.3
19
+
20
+ ### Patch Changes
21
+
22
+ - @saas-ui/forms@2.0.0-next.3
23
+
3
24
  ## 2.0.0-next.2
4
25
 
5
26
  ### Patch Changes
@@ -33,6 +54,13 @@
33
54
  - @saas-ui/hooks@2.0.0-next.0
34
55
  - @saas-ui/react-utils@2.0.0-next.0
35
56
 
57
+ ## 1.5.5
58
+
59
+ ### Patch Changes
60
+
61
+ - Updated dependencies [382e095]
62
+ - @saas-ui/forms@1.5.3
63
+
36
64
  ## 1.5.4
37
65
 
38
66
  ### Patch Changes
package/dist/index.d.ts CHANGED
@@ -135,6 +135,11 @@ interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TConte
135
135
  */
136
136
  fieldResolver?: FieldResolver;
137
137
  }
138
+ /**
139
+ * Can be used to quickly request information from people without leaving the current page.
140
+ *
141
+ * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
142
+ */
138
143
  declare const FormDialog: <TFieldValues extends FieldValues>(props: FormDialogProps<TFieldValues, object> & {
139
144
  ref?: React.ForwardedRef<HTMLFormElement> | undefined;
140
145
  }) => React.ReactElement;
package/dist/index.js CHANGED
@@ -1,11 +1,13 @@
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');
5
6
  var reactUtils = require('@saas-ui/react-utils');
6
7
  var forms = require('@saas-ui/forms');
7
8
 
8
- function _interopNamespaceDefault(e) {
9
+ function _interopNamespace(e) {
10
+ if (e && e.__esModule) return e;
9
11
  var n = Object.create(null);
10
12
  if (e) {
11
13
  Object.keys(e).forEach(function (k) {
@@ -22,7 +24,7 @@ function _interopNamespaceDefault(e) {
22
24
  return Object.freeze(n);
23
25
  }
24
26
 
25
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
27
+ var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
26
28
 
27
29
  // src/dialog.tsx
28
30
  var ConfirmDialog = (props) => {
@@ -43,30 +45,47 @@ var ConfirmDialog = (props) => {
43
45
  children,
44
46
  ...rest
45
47
  } = 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();
48
+ const cancelRef = React2__namespace.useRef(null);
49
+ const confirmRef = React2__namespace.useRef(null);
50
+ return /* @__PURE__ */ jsxRuntime.jsx(
51
+ react.AlertDialog,
52
+ {
53
+ isOpen,
54
+ onClose,
55
+ ...rest,
56
+ leastDestructiveRef: leastDestructiveFocus === "cancel" ? cancelRef : confirmRef,
57
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.AlertDialogOverlay, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.AlertDialogContent, { children: [
58
+ /* @__PURE__ */ jsxRuntime.jsx(react.AlertDialogHeader, { children: title }),
59
+ /* @__PURE__ */ jsxRuntime.jsx(react.AlertDialogBody, { children }),
60
+ /* @__PURE__ */ jsxRuntime.jsx(react.AlertDialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.ButtonGroup, { ...buttonGroupProps, children: [
61
+ /* @__PURE__ */ jsxRuntime.jsx(
62
+ react.Button,
63
+ {
64
+ ref: cancelRef,
65
+ ...cancelProps,
66
+ onClick: () => {
67
+ onCancel == null ? void 0 : onCancel();
68
+ closeOnCancel && onClose();
69
+ },
70
+ children: (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel
71
+ }
72
+ ),
73
+ /* @__PURE__ */ jsxRuntime.jsx(
74
+ react.Button,
75
+ {
76
+ ref: confirmRef,
77
+ ...confirmProps,
78
+ onClick: () => {
79
+ onConfirm == null ? void 0 : onConfirm();
80
+ closeOnConfirm && onClose();
81
+ },
82
+ children: (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel
83
+ }
84
+ )
85
+ ] }) })
86
+ ] }) })
68
87
  }
69
- }, (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel))))));
88
+ );
70
89
  };
71
90
  var BaseDrawer = (props) => {
72
91
  const {
@@ -78,17 +97,21 @@ var BaseDrawer = (props) => {
78
97
  hideOverlay,
79
98
  ...rest
80
99
  } = 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));
100
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.Drawer, { isOpen, onClose, ...rest, children: [
101
+ !hideOverlay && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerOverlay, {}),
102
+ /* @__PURE__ */ jsxRuntime.jsxs(react.DrawerContent, { children: [
103
+ /* @__PURE__ */ jsxRuntime.jsx(react.DrawerHeader, { children: title }),
104
+ !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerCloseButton, {}),
105
+ children
106
+ ] })
107
+ ] });
86
108
  };
87
109
  var Drawer = (props) => {
88
110
  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));
111
+ return /* @__PURE__ */ jsxRuntime.jsxs(BaseDrawer, { ...rest, children: [
112
+ /* @__PURE__ */ jsxRuntime.jsx(react.DrawerBody, { children }),
113
+ footer && /* @__PURE__ */ jsxRuntime.jsx(react.DrawerFooter, { children: footer })
114
+ ] });
92
115
  };
93
116
  var BaseModal = (props) => {
94
117
  const {
@@ -101,29 +124,34 @@ var BaseModal = (props) => {
101
124
  hideOverlay,
102
125
  ...rest
103
126
  } = 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)));
127
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.Modal, { isOpen, onClose, ...rest, children: [
128
+ !hideOverlay && /* @__PURE__ */ jsxRuntime.jsx(react.ModalOverlay, {}),
129
+ /* @__PURE__ */ jsxRuntime.jsxs(react.ModalContent, { children: [
130
+ title && /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { children: title }),
131
+ !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {}),
132
+ children,
133
+ footer && /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { children: footer })
134
+ ] })
135
+ ] });
109
136
  };
110
137
  var Modal = (props) => {
111
138
  const { children, ...rest } = props;
112
- return /* @__PURE__ */ React__namespace.createElement(BaseModal, {
113
- ...rest
114
- }, /* @__PURE__ */ React__namespace.createElement(react.ModalBody, null, children));
139
+ return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children }) });
115
140
  };
116
141
  var [StylesProvider] = react.createStylesContext("SuiMenuDialog");
117
142
  var MenuDialog = (props) => {
118
143
  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
- });
144
+ return /* @__PURE__ */ jsxRuntime.jsx(
145
+ react.Menu,
146
+ {
147
+ variant: "dialog",
148
+ onClose: () => {
149
+ onClose == null ? void 0 : onClose();
150
+ onCloseComplete == null ? void 0 : onCloseComplete();
151
+ },
152
+ ...rest
153
+ }
154
+ );
127
155
  };
128
156
  var MenuDialogList = react.forwardRef(
129
157
  (props, forwardedRef) => {
@@ -139,27 +167,42 @@ var MenuDialogList = react.forwardRef(
139
167
  const { isOpen, onClose, menuRef } = react.useMenuContext();
140
168
  const { ref, ...ownProps } = react.useMenuList(rest, forwardedRef);
141
169
  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
170
+ return /* @__PURE__ */ jsxRuntime.jsxs(
171
+ BaseModal,
172
+ {
173
+ isOpen,
174
+ onClose,
175
+ initialFocusRef: initialFocusRef || menuRef,
176
+ title,
177
+ hideCloseButton,
178
+ motionPreset,
179
+ children: [
180
+ /* @__PURE__ */ jsxRuntime.jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(
181
+ react.chakra.div,
182
+ {
183
+ ...ownProps,
184
+ ref,
185
+ __css: {
186
+ outline: 0,
187
+ maxHeight: "80vh",
188
+ // can override this in theme
189
+ overflowY: "auto",
190
+ // can override this in theme
191
+ ...styles.list,
192
+ boxShadow: "none",
193
+ border: 0,
194
+ _dark: {
195
+ /* @ts-expect-error */
196
+ ...styles.list._dark || {},
197
+ boxShadow: "none"
198
+ }
199
+ }
200
+ }
201
+ ) }),
202
+ footer && /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { children: footer })
203
+ ]
161
204
  }
162
- })), footer && /* @__PURE__ */ React__namespace.createElement(react.ModalFooter, null, footer));
205
+ );
163
206
  }
164
207
  );
165
208
  var FormDialog = react.forwardRef(
@@ -207,25 +250,23 @@ var FormDialog = react.forwardRef(
207
250
  criteriaMode,
208
251
  delayError
209
252
  };
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)))));
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
+ ] }) }) });
226
267
  }
227
268
  );
228
- var ModalsContext = React__namespace.createContext(
269
+ var ModalsContext = React2__namespace.createContext(
229
270
  null
230
271
  );
231
272
  var initialModalState = {
@@ -242,11 +283,11 @@ var defaultModals = {
242
283
  form: FormDialog
243
284
  };
244
285
  function ModalsProvider({ children, modals }) {
245
- const _instances = React__namespace.useMemo(() => /* @__PURE__ */ new Set(), []);
246
- const [activeModals, setActiveModals] = React__namespace.useState({
286
+ const _instances = React2__namespace.useMemo(() => /* @__PURE__ */ new Set(), []);
287
+ const [activeModals, setActiveModals] = React2__namespace.useState({
247
288
  modal: initialModalState
248
289
  });
249
- const getModalComponent = React__namespace.useMemo(() => {
290
+ const getModalComponent = React2__namespace.useMemo(() => {
250
291
  const _modals = {
251
292
  ...defaultModals,
252
293
  ...modals
@@ -360,6 +401,7 @@ function ModalsProvider({ children, modals }) {
360
401
  id: null,
361
402
  props: null,
362
403
  type: modal.type
404
+ // Keep type same as last modal type to make sure the animation isn't interrupted
363
405
  },
364
406
  modal.scope
365
407
  );
@@ -392,27 +434,31 @@ function ModalsProvider({ children, modals }) {
392
434
  close,
393
435
  closeAll
394
436
  };
395
- const content = React__namespace.useMemo(
437
+ const content = React2__namespace.useMemo(
396
438
  () => Object.entries(activeModals).map(([scope, config]) => {
397
439
  const Component = config.component || getModalComponent(config.type);
398
440
  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
- });
441
+ return /* @__PURE__ */ jsxRuntime.jsx(
442
+ Component,
443
+ {
444
+ title,
445
+ children: body || children2,
446
+ ...props,
447
+ isOpen: !!config.isOpen,
448
+ onClose: () => close(config.id),
449
+ onCloseComplete: () => closeComplete(config.id)
450
+ },
451
+ scope
452
+ );
408
453
  }),
409
454
  [activeModals]
410
455
  );
411
- return /* @__PURE__ */ React__namespace.createElement(ModalsContext.Provider, {
412
- value: context
413
- }, content, children);
456
+ return /* @__PURE__ */ jsxRuntime.jsxs(ModalsContext.Provider, { value: context, children: [
457
+ content,
458
+ children
459
+ ] });
414
460
  }
415
- var useModalsContext = () => React__namespace.useContext(ModalsContext);
461
+ var useModalsContext = () => React2__namespace.useContext(ModalsContext);
416
462
  var useModals = () => {
417
463
  return useModalsContext();
418
464
  };
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":["React","ModalFooter","ModalBody","Button","forwardRef","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 }}\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 Fields,\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\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 <Fields\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"],"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"]}
package/dist/index.mjs CHANGED
@@ -1,7 +1,8 @@
1
- import * as React from 'react';
1
+ import * as React2 from 'react';
2
2
  import { createStylesContext, forwardRef, useMenuContext, useMenuList, useMultiStyleConfig, chakra, ModalFooter, ModalBody, Button, AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, ButtonGroup, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, DrawerBody, DrawerFooter, Modal as Modal$1, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, Menu } from '@chakra-ui/react';
3
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
4
  import { runIfFn } from '@saas-ui/react-utils';
4
- import { Form, Fields, SubmitButton } from '@saas-ui/forms';
5
+ import { Form, AutoFields, SubmitButton } from '@saas-ui/forms';
5
6
 
6
7
  // src/dialog.tsx
7
8
  var ConfirmDialog = (props) => {
@@ -22,30 +23,47 @@ var ConfirmDialog = (props) => {
22
23
  children,
23
24
  ...rest
24
25
  } = props;
25
- const cancelRef = React.useRef(null);
26
- const confirmRef = React.useRef(null);
27
- return /* @__PURE__ */ React.createElement(AlertDialog, {
28
- isOpen,
29
- onClose,
30
- ...rest,
31
- leastDestructiveRef: leastDestructiveFocus === "cancel" ? cancelRef : confirmRef
32
- }, /* @__PURE__ */ React.createElement(AlertDialogOverlay, null, /* @__PURE__ */ React.createElement(AlertDialogContent, null, /* @__PURE__ */ React.createElement(AlertDialogHeader, null, title), /* @__PURE__ */ React.createElement(AlertDialogBody, null, children), /* @__PURE__ */ React.createElement(AlertDialogFooter, null, /* @__PURE__ */ React.createElement(ButtonGroup, {
33
- ...buttonGroupProps
34
- }, /* @__PURE__ */ React.createElement(Button, {
35
- ref: cancelRef,
36
- ...cancelProps,
37
- onClick: () => {
38
- onCancel == null ? void 0 : onCancel();
39
- closeOnCancel && onClose();
40
- }
41
- }, (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel), /* @__PURE__ */ React.createElement(Button, {
42
- ref: confirmRef,
43
- ...confirmProps,
44
- onClick: () => {
45
- onConfirm == null ? void 0 : onConfirm();
46
- closeOnConfirm && onClose();
26
+ const cancelRef = React2.useRef(null);
27
+ const confirmRef = React2.useRef(null);
28
+ return /* @__PURE__ */ jsx(
29
+ AlertDialog,
30
+ {
31
+ isOpen,
32
+ onClose,
33
+ ...rest,
34
+ leastDestructiveRef: leastDestructiveFocus === "cancel" ? cancelRef : confirmRef,
35
+ children: /* @__PURE__ */ jsx(AlertDialogOverlay, { children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
36
+ /* @__PURE__ */ jsx(AlertDialogHeader, { children: title }),
37
+ /* @__PURE__ */ jsx(AlertDialogBody, { children }),
38
+ /* @__PURE__ */ jsx(AlertDialogFooter, { children: /* @__PURE__ */ jsxs(ButtonGroup, { ...buttonGroupProps, children: [
39
+ /* @__PURE__ */ jsx(
40
+ Button,
41
+ {
42
+ ref: cancelRef,
43
+ ...cancelProps,
44
+ onClick: () => {
45
+ onCancel == null ? void 0 : onCancel();
46
+ closeOnCancel && onClose();
47
+ },
48
+ children: (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel
49
+ }
50
+ ),
51
+ /* @__PURE__ */ jsx(
52
+ Button,
53
+ {
54
+ ref: confirmRef,
55
+ ...confirmProps,
56
+ onClick: () => {
57
+ onConfirm == null ? void 0 : onConfirm();
58
+ closeOnConfirm && onClose();
59
+ },
60
+ children: (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel
61
+ }
62
+ )
63
+ ] }) })
64
+ ] }) })
47
65
  }
48
- }, (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel))))));
66
+ );
49
67
  };
50
68
  var BaseDrawer = (props) => {
51
69
  const {
@@ -57,17 +75,21 @@ var BaseDrawer = (props) => {
57
75
  hideOverlay,
58
76
  ...rest
59
77
  } = props;
60
- return /* @__PURE__ */ React.createElement(Drawer$1, {
61
- isOpen,
62
- onClose,
63
- ...rest
64
- }, !hideOverlay && /* @__PURE__ */ React.createElement(DrawerOverlay, null), /* @__PURE__ */ React.createElement(DrawerContent, null, /* @__PURE__ */ React.createElement(DrawerHeader, null, title), !hideCloseButton && /* @__PURE__ */ React.createElement(DrawerCloseButton, null), children));
78
+ return /* @__PURE__ */ jsxs(Drawer$1, { isOpen, onClose, ...rest, children: [
79
+ !hideOverlay && /* @__PURE__ */ jsx(DrawerOverlay, {}),
80
+ /* @__PURE__ */ jsxs(DrawerContent, { children: [
81
+ /* @__PURE__ */ jsx(DrawerHeader, { children: title }),
82
+ !hideCloseButton && /* @__PURE__ */ jsx(DrawerCloseButton, {}),
83
+ children
84
+ ] })
85
+ ] });
65
86
  };
66
87
  var Drawer = (props) => {
67
88
  const { footer, children, ...rest } = props;
68
- return /* @__PURE__ */ React.createElement(BaseDrawer, {
69
- ...rest
70
- }, /* @__PURE__ */ React.createElement(DrawerBody, null, children), footer && /* @__PURE__ */ React.createElement(DrawerFooter, null, footer));
89
+ return /* @__PURE__ */ jsxs(BaseDrawer, { ...rest, children: [
90
+ /* @__PURE__ */ jsx(DrawerBody, { children }),
91
+ footer && /* @__PURE__ */ jsx(DrawerFooter, { children: footer })
92
+ ] });
71
93
  };
72
94
  var BaseModal = (props) => {
73
95
  const {
@@ -80,29 +102,34 @@ var BaseModal = (props) => {
80
102
  hideOverlay,
81
103
  ...rest
82
104
  } = props;
83
- return /* @__PURE__ */ React.createElement(Modal$1, {
84
- isOpen,
85
- onClose,
86
- ...rest
87
- }, !hideOverlay && /* @__PURE__ */ React.createElement(ModalOverlay, null), /* @__PURE__ */ React.createElement(ModalContent, null, title && /* @__PURE__ */ React.createElement(ModalHeader, null, title), !hideCloseButton && /* @__PURE__ */ React.createElement(ModalCloseButton, null), children, footer && /* @__PURE__ */ React.createElement(ModalFooter, null, footer)));
105
+ return /* @__PURE__ */ jsxs(Modal$1, { isOpen, onClose, ...rest, children: [
106
+ !hideOverlay && /* @__PURE__ */ jsx(ModalOverlay, {}),
107
+ /* @__PURE__ */ jsxs(ModalContent, { children: [
108
+ title && /* @__PURE__ */ jsx(ModalHeader, { children: title }),
109
+ !hideCloseButton && /* @__PURE__ */ jsx(ModalCloseButton, {}),
110
+ children,
111
+ footer && /* @__PURE__ */ jsx(ModalFooter, { children: footer })
112
+ ] })
113
+ ] });
88
114
  };
89
115
  var Modal = (props) => {
90
116
  const { children, ...rest } = props;
91
- return /* @__PURE__ */ React.createElement(BaseModal, {
92
- ...rest
93
- }, /* @__PURE__ */ React.createElement(ModalBody, null, children));
117
+ return /* @__PURE__ */ jsx(BaseModal, { ...rest, children: /* @__PURE__ */ jsx(ModalBody, { children }) });
94
118
  };
95
119
  var [StylesProvider] = createStylesContext("SuiMenuDialog");
96
120
  var MenuDialog = (props) => {
97
121
  const { onClose, onCloseComplete, ...rest } = props;
98
- return /* @__PURE__ */ React.createElement(Menu, {
99
- variant: "dialog",
100
- onClose: () => {
101
- onClose == null ? void 0 : onClose();
102
- onCloseComplete == null ? void 0 : onCloseComplete();
103
- },
104
- ...rest
105
- });
122
+ return /* @__PURE__ */ jsx(
123
+ Menu,
124
+ {
125
+ variant: "dialog",
126
+ onClose: () => {
127
+ onClose == null ? void 0 : onClose();
128
+ onCloseComplete == null ? void 0 : onCloseComplete();
129
+ },
130
+ ...rest
131
+ }
132
+ );
106
133
  };
107
134
  var MenuDialogList = forwardRef(
108
135
  (props, forwardedRef) => {
@@ -118,27 +145,42 @@ var MenuDialogList = forwardRef(
118
145
  const { isOpen, onClose, menuRef } = useMenuContext();
119
146
  const { ref, ...ownProps } = useMenuList(rest, forwardedRef);
120
147
  const styles = useMultiStyleConfig("Menu", props);
121
- return /* @__PURE__ */ React.createElement(BaseModal, {
122
- isOpen,
123
- onClose,
124
- initialFocusRef: initialFocusRef || menuRef,
125
- title,
126
- hideCloseButton,
127
- motionPreset
128
- }, /* @__PURE__ */ React.createElement(StylesProvider, {
129
- value: styles
130
- }, /* @__PURE__ */ React.createElement(chakra.div, {
131
- ...ownProps,
132
- ref,
133
- __css: {
134
- outline: 0,
135
- maxHeight: "80vh",
136
- overflowY: "auto",
137
- ...styles.list,
138
- boxShadow: "none",
139
- border: 0
148
+ return /* @__PURE__ */ jsxs(
149
+ BaseModal,
150
+ {
151
+ isOpen,
152
+ onClose,
153
+ initialFocusRef: initialFocusRef || menuRef,
154
+ title,
155
+ hideCloseButton,
156
+ motionPreset,
157
+ children: [
158
+ /* @__PURE__ */ jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx(
159
+ chakra.div,
160
+ {
161
+ ...ownProps,
162
+ ref,
163
+ __css: {
164
+ outline: 0,
165
+ maxHeight: "80vh",
166
+ // can override this in theme
167
+ overflowY: "auto",
168
+ // can override this in theme
169
+ ...styles.list,
170
+ boxShadow: "none",
171
+ border: 0,
172
+ _dark: {
173
+ /* @ts-expect-error */
174
+ ...styles.list._dark || {},
175
+ boxShadow: "none"
176
+ }
177
+ }
178
+ }
179
+ ) }),
180
+ footer && /* @__PURE__ */ jsx(ModalFooter, { children: footer })
181
+ ]
140
182
  }
141
- })), footer && /* @__PURE__ */ React.createElement(ModalFooter, null, footer));
183
+ );
142
184
  }
143
185
  );
144
186
  var FormDialog = forwardRef(
@@ -186,25 +228,23 @@ var FormDialog = forwardRef(
186
228
  criteriaMode,
187
229
  delayError
188
230
  };
189
- return /* @__PURE__ */ React.createElement(BaseModal, {
190
- isOpen,
191
- onClose,
192
- ...rest
193
- }, /* @__PURE__ */ React.createElement(Form, {
194
- ...formProps,
195
- ref
196
- }, (form) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ModalBody, null, runIfFn(children, form) || /* @__PURE__ */ React.createElement(Fields, {
197
- schema,
198
- fieldResolver,
199
- focusFirstField: true
200
- })), footer || /* @__PURE__ */ React.createElement(ModalFooter, null, /* @__PURE__ */ React.createElement(Button, {
201
- variant: "ghost",
202
- mr: 3,
203
- onClick: onClose
204
- }, cancelLabel), /* @__PURE__ */ React.createElement(SubmitButton, null, submitLabel)))));
231
+ return /* @__PURE__ */ jsx(BaseModal, { isOpen, onClose, ...rest, children: /* @__PURE__ */ jsx(Form, { ...formProps, ref, children: (form) => /* @__PURE__ */ jsxs(Fragment, { children: [
232
+ /* @__PURE__ */ jsx(ModalBody, { children: runIfFn(children, form) || /* @__PURE__ */ jsx(
233
+ AutoFields,
234
+ {
235
+ schema,
236
+ fieldResolver,
237
+ focusFirstField: true
238
+ }
239
+ ) }),
240
+ footer || /* @__PURE__ */ jsxs(ModalFooter, { children: [
241
+ /* @__PURE__ */ jsx(Button, { variant: "ghost", mr: 3, onClick: onClose, children: cancelLabel }),
242
+ /* @__PURE__ */ jsx(SubmitButton, { children: submitLabel })
243
+ ] })
244
+ ] }) }) });
205
245
  }
206
246
  );
207
- var ModalsContext = React.createContext(
247
+ var ModalsContext = React2.createContext(
208
248
  null
209
249
  );
210
250
  var initialModalState = {
@@ -221,11 +261,11 @@ var defaultModals = {
221
261
  form: FormDialog
222
262
  };
223
263
  function ModalsProvider({ children, modals }) {
224
- const _instances = React.useMemo(() => /* @__PURE__ */ new Set(), []);
225
- const [activeModals, setActiveModals] = React.useState({
264
+ const _instances = React2.useMemo(() => /* @__PURE__ */ new Set(), []);
265
+ const [activeModals, setActiveModals] = React2.useState({
226
266
  modal: initialModalState
227
267
  });
228
- const getModalComponent = React.useMemo(() => {
268
+ const getModalComponent = React2.useMemo(() => {
229
269
  const _modals = {
230
270
  ...defaultModals,
231
271
  ...modals
@@ -339,6 +379,7 @@ function ModalsProvider({ children, modals }) {
339
379
  id: null,
340
380
  props: null,
341
381
  type: modal.type
382
+ // Keep type same as last modal type to make sure the animation isn't interrupted
342
383
  },
343
384
  modal.scope
344
385
  );
@@ -371,27 +412,31 @@ function ModalsProvider({ children, modals }) {
371
412
  close,
372
413
  closeAll
373
414
  };
374
- const content = React.useMemo(
415
+ const content = React2.useMemo(
375
416
  () => Object.entries(activeModals).map(([scope, config]) => {
376
417
  const Component = config.component || getModalComponent(config.type);
377
418
  const { title, body, children: children2, ...props } = config.props || {};
378
- return /* @__PURE__ */ React.createElement(Component, {
379
- key: scope,
380
- title,
381
- children: body || children2,
382
- ...props,
383
- isOpen: !!config.isOpen,
384
- onClose: () => close(config.id),
385
- onCloseComplete: () => closeComplete(config.id)
386
- });
419
+ return /* @__PURE__ */ jsx(
420
+ Component,
421
+ {
422
+ title,
423
+ children: body || children2,
424
+ ...props,
425
+ isOpen: !!config.isOpen,
426
+ onClose: () => close(config.id),
427
+ onCloseComplete: () => closeComplete(config.id)
428
+ },
429
+ scope
430
+ );
387
431
  }),
388
432
  [activeModals]
389
433
  );
390
- return /* @__PURE__ */ React.createElement(ModalsContext.Provider, {
391
- value: context
392
- }, content, children);
434
+ return /* @__PURE__ */ jsxs(ModalsContext.Provider, { value: context, children: [
435
+ content,
436
+ children
437
+ ] });
393
438
  }
394
- var useModalsContext = () => React.useContext(ModalsContext);
439
+ var useModalsContext = () => React2.useContext(ModalsContext);
395
440
  var useModals = () => {
396
441
  return useModalsContext();
397
442
  };
package/dist/index.mjs.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":["React","ModalFooter","ModalBody","Button","forwardRef","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 }}\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 Fields,\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\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 <Fields\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"],"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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saas-ui/modals",
3
- "version": "2.0.0-next.2",
3
+ "version": "2.0.0-next.5",
4
4
  "description": "A modal manager for Chakra UI",
5
5
  "source": "src/index.ts",
6
6
  "exports": {
@@ -57,8 +57,8 @@
57
57
  },
58
58
  "dependencies": {
59
59
  "@chakra-ui/utils": "^2.0.14",
60
- "@saas-ui/forms": "2.0.0-next.2",
61
- "@saas-ui/hooks": "2.0.0-next.1",
60
+ "@saas-ui/forms": "2.0.0-next.5",
61
+ "@saas-ui/hooks": "2.0.0-next.2",
62
62
  "@saas-ui/react-utils": "2.0.0-next.1"
63
63
  },
64
64
  "peerDependencies": {
package/src/form.tsx CHANGED
@@ -5,7 +5,7 @@ import { runIfFn } from '@saas-ui/react-utils'
5
5
 
6
6
  import {
7
7
  Form,
8
- Fields,
8
+ AutoFields,
9
9
  SubmitButton,
10
10
  FormProps,
11
11
  FieldValues,
@@ -60,7 +60,11 @@ export interface FormDialogProps<
60
60
  */
61
61
  fieldResolver?: FieldResolver
62
62
  }
63
-
63
+ /**
64
+ * Can be used to quickly request information from people without leaving the current page.
65
+ *
66
+ * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
67
+ */
64
68
  export const FormDialog = forwardRef(
65
69
  <
66
70
  TFieldValues extends FieldValues = FieldValues,
@@ -121,7 +125,7 @@ export const FormDialog = forwardRef(
121
125
  <>
122
126
  <ModalBody>
123
127
  {runIfFn(children, form) || (
124
- <Fields
128
+ <AutoFields
125
129
  schema={schema}
126
130
  fieldResolver={fieldResolver}
127
131
  focusFirstField
package/src/menu.tsx CHANGED
@@ -86,6 +86,11 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
86
86
  ...styles.list,
87
87
  boxShadow: 'none',
88
88
  border: 0,
89
+ _dark: {
90
+ /* @ts-expect-error */
91
+ ...(styles.list._dark || {}),
92
+ boxShadow: 'none',
93
+ },
89
94
  }}
90
95
  />
91
96
  </StylesProvider>