@saas-ui/modals 2.0.0-next.7 → 2.0.0-next.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @saas-ui/modals
2
2
 
3
+ ## 2.0.0-next.9
4
+
5
+ ### Minor Changes
6
+
7
+ - 84e59fec: Added new createModals method to create typesafe modals managers with support for custom modals
8
+ - 1177329d: BaseModal now accepts header, content and footer props
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies [84e59fec]
13
+ - @saas-ui/forms@2.0.0-next.9
14
+
15
+ ## 2.0.0-next.8
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies [6d3f5717]
20
+ - @saas-ui/forms@2.0.0-next.8
21
+
3
22
  ## 2.0.0-next.7
4
23
 
5
24
  ### Patch Changes
package/dist/index.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import * as React from 'react';
2
- import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalProps, MenuListProps } from '@chakra-ui/react';
2
+ import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, MenuListProps } from '@chakra-ui/react';
3
+ import { MaybeRenderProp } from '@chakra-ui/react-utils';
3
4
  import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
4
- import { FieldValues, FormProps, FieldResolver } from '@saas-ui/forms';
5
+ import * as _saas_ui_forms from '@saas-ui/forms';
6
+ import { FieldValues, FieldProps, FormProps, FieldResolver } from '@saas-ui/forms';
7
+ import * as react_hook_form from 'react-hook-form';
5
8
 
6
9
  interface ConfirmDialogProps extends Omit<AlertDialogProps, 'leastDestructiveRef'> {
7
10
  /**
@@ -78,11 +81,18 @@ interface DrawerProps extends BaseDrawerProps {
78
81
  }
79
82
  declare const Drawer: React.FC<DrawerProps>;
80
83
 
81
- interface BaseModalProps extends ModalProps {
84
+ interface BaseModalProps extends Omit<ModalProps, 'children'> {
82
85
  /**
83
86
  * The modal title
84
87
  */
85
88
  title?: React.ReactNode;
89
+ /**
90
+ * The modal children
91
+ */
92
+ children: MaybeRenderProp<{
93
+ isOpen: boolean;
94
+ onClose: () => void;
95
+ }>;
86
96
  /**
87
97
  * The modal footer
88
98
  */
@@ -95,6 +105,18 @@ interface BaseModalProps extends ModalProps {
95
105
  * Hide the overlay
96
106
  */
97
107
  hideOverlay?: boolean;
108
+ /**
109
+ * Props for the modal header
110
+ */
111
+ headerProps?: ModalHeaderProps;
112
+ /**
113
+ * Props for the modal content
114
+ */
115
+ contentProps?: ModalContentProps;
116
+ /**
117
+ * Props for the modal footer
118
+ */
119
+ footerProps?: ModalFooterProps;
98
120
  }
99
121
  declare const BaseModal: React.FC<BaseModalProps>;
100
122
  declare const Modal: React.FC<BaseModalProps>;
@@ -110,7 +132,7 @@ interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose'
110
132
  }
111
133
  declare const MenuDialogList: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", MenuDialogListProps>;
112
134
 
113
- interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TFieldValues, TContext>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError'> {
135
+ interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TFieldValues, TContext, TSchema, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'children'> {
114
136
  /**
115
137
  * The modal footer, will be wrapped with `ModalFooter`.
116
138
  * Defaults to a cancel and submit button.
@@ -126,10 +148,6 @@ interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TConte
126
148
  * @default "Submit"
127
149
  */
128
150
  submitLabel?: React.ReactNode;
129
- /**
130
- * If no children are passed, this will auto render fields based on the supplied schema.
131
- */
132
- children?: React.ReactNode;
133
151
  /**
134
152
  * A schema field resolver used to auto generate form fields.
135
153
  */
@@ -140,32 +158,44 @@ interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TConte
140
158
  *
141
159
  * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
142
160
  */
143
- declare const FormDialog: <TFieldValues extends FieldValues>(props: FormDialogProps<TFieldValues, object> & {
161
+ declare const FormDialog: <TFieldValues extends FieldValues>(props: FormDialogProps<TFieldValues, object, any, FieldProps<TFieldValues>> & {
144
162
  ref?: React.ForwardedRef<HTMLFormElement> | undefined;
145
163
  }) => React.ReactElement;
146
164
 
147
- interface ModalsContextValue {
148
- open: (options: OpenOptions) => ModalId;
165
+ interface ModalsContextValue<TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>, TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>> {
166
+ open: <T extends OpenOptions<TTypes>>(componentOrOptions: T extends {
167
+ component: infer TComponent extends React.FC<any>;
168
+ } ? WithModalOptions<React.ComponentPropsWithRef<TComponent>> : T extends {
169
+ type: infer TType extends keyof TModals;
170
+ } ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>> : T, options?: T extends React.FC<any> ? WithModalOptions<React.ComponentPropsWithRef<T>> : never) => ModalId;
149
171
  drawer: (options: DrawerOptions) => ModalId;
150
172
  alert: (options: ConfirmDialogOptions) => ModalId;
151
173
  confirm: (options: ConfirmDialogOptions) => ModalId;
152
174
  menu: (options: MenuDialogOptions) => ModalId;
153
- form: (options: FormDialogOptions) => ModalId;
175
+ form: <TProps extends FormDialogProps = FormDialogProps>(options: WithModalOptions<TProps>) => ModalId;
154
176
  close: (id: ModalId) => void;
155
177
  closeAll: () => void;
156
178
  }
157
- declare const ModalsContext: React.Context<ModalsContextValue | null>;
158
- interface ModalsProviderProps {
179
+ declare const ModalsContext: React.Context<ModalsContextValue<{
180
+ alert: React.FC<ConfirmDialogProps>;
181
+ confirm: React.FC<ConfirmDialogProps>;
182
+ drawer: React.FC<DrawerProps>;
183
+ modal: React.FC<BaseModalProps>;
184
+ menu: React.FC<MenuDialogProps>;
185
+ form: <TFieldValues extends react_hook_form.FieldValues>(props: FormDialogProps<TFieldValues, object, any, _saas_ui_forms.FieldProps<TFieldValues>> & {
186
+ ref?: React.ForwardedRef<HTMLFormElement> | undefined;
187
+ }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
188
+ }, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null>;
189
+ interface ModalsProviderProps<TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>> {
159
190
  children: React.ReactNode;
160
- modals?: Record<string, React.FC<any>>;
191
+ modals?: TModals;
161
192
  }
162
193
  type ModalId = string | number;
163
- interface ModalOptions extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
194
+ type WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions;
195
+ interface ModalOptions extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {
164
196
  onClose?: (args: {
165
197
  force?: boolean;
166
198
  }) => Promise<boolean | undefined> | void;
167
- body?: React.ReactNode;
168
- children?: React.ReactNode;
169
199
  [key: string]: any;
170
200
  }
171
201
  interface DrawerOptions extends ModalOptions, Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {
@@ -176,13 +206,12 @@ interface MenuDialogOptions extends ModalOptions, Omit<MenuDialogProps, 'onClose
176
206
  }
177
207
  interface FormDialogOptions extends ModalOptions, Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {
178
208
  }
179
- interface OpenOptions extends ModalOptions {
180
- type?: ModalTypes;
209
+ interface OpenOptions<TModalTypes extends string> extends ModalOptions {
210
+ type?: TModalTypes;
181
211
  scope?: ModalScopes;
182
212
  }
183
213
  type ModalScopes = 'modal' | 'alert';
184
- type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu' | string;
185
- interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
214
+ interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions, TModalTypes extends string = string> {
186
215
  /**
187
216
  * The modal id, autogenerated when not set.
188
217
  * Can be used to close modals.
@@ -204,7 +233,7 @@ interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
204
233
  *
205
234
  * Custom types can be configured using the `modals` prop of `ModalProvider`
206
235
  */
207
- type?: ModalTypes;
236
+ type?: TModalTypes;
208
237
  /**
209
238
  * Render a custom modal component.
210
239
  * This will ignore the `type` param.
@@ -217,7 +246,24 @@ interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
217
246
  isOpen?: boolean;
218
247
  }
219
248
  declare function ModalsProvider({ children, modals }: ModalsProviderProps): JSX.Element;
220
- declare const useModalsContext: () => ModalsContextValue;
221
- declare const useModals: () => ModalsContextValue;
249
+ declare const useModalsContext: () => ModalsContextValue<Record<string, React.FC<any>>, string>;
250
+ declare const useModals: () => ModalsContextValue<Record<string, React.FC<any>>, string>;
251
+
252
+ interface CreateModalsOptions<TModalDefs> {
253
+ modals: TModalDefs;
254
+ }
255
+ declare const createModals: <TModalDefs extends Record<string, React.FC<any>>>(options: CreateModalsOptions<TModalDefs>) => {
256
+ ModalsProvider: (props: Omit<ModalsProviderProps, 'modals'>) => JSX.Element;
257
+ useModals: () => ModalsContextValue<{
258
+ alert: React.FC<ConfirmDialogProps>;
259
+ confirm: React.FC<ConfirmDialogProps>;
260
+ drawer: React.FC<DrawerProps>;
261
+ modal: React.FC<BaseModalProps>;
262
+ menu: React.FC<MenuDialogProps>;
263
+ form: <TFieldValues extends react_hook_form.FieldValues>(props: FormDialogProps<TFieldValues, object, any, _saas_ui_forms.FieldProps<TFieldValues>> & {
264
+ ref?: React.ForwardedRef<HTMLFormElement> | undefined;
265
+ }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
266
+ } & TModalDefs, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer" | Extract<keyof TModalDefs, string>>;
267
+ };
222
268
 
223
- export { BaseDrawer, BaseDrawerProps, BaseModal, BaseModalProps, ConfirmDialog, ConfirmDialogOptions, ConfirmDialogProps, Drawer, DrawerOptions, DrawerProps, FormDialog, FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, MenuDialogListProps, MenuDialogOptions, MenuDialogProps, Modal, ModalConfig, ModalId, ModalScopes, ModalTypes, ModalsContext, ModalsContextValue, ModalsProvider, OpenOptions, useModals, useModalsContext };
269
+ export { BaseDrawer, BaseDrawerProps, BaseModal, BaseModalProps, ConfirmDialog, ConfirmDialogOptions, ConfirmDialogProps, CreateModalsOptions, Drawer, DrawerOptions, DrawerProps, FormDialog, FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, MenuDialogListProps, MenuDialogOptions, MenuDialogProps, Modal, ModalConfig, ModalId, ModalScopes, ModalsContext, ModalsContextValue, ModalsProvider, ModalsProviderProps, OpenOptions, createModals, useModals, useModalsContext };
package/dist/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var React2 = require('react');
4
4
  var react = require('@chakra-ui/react');
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
+ var utils = require('@chakra-ui/utils');
6
7
  var reactUtils = require('@saas-ui/react-utils');
7
8
  var forms = require('@saas-ui/forms');
8
9
 
@@ -122,21 +123,30 @@ var BaseModal = (props) => {
122
123
  onClose,
123
124
  hideCloseButton,
124
125
  hideOverlay,
126
+ headerProps,
127
+ contentProps,
128
+ footerProps,
125
129
  ...rest
126
130
  } = props;
127
131
  return /* @__PURE__ */ jsxRuntime.jsxs(react.Modal, { isOpen, onClose, ...rest, children: [
128
132
  !hideOverlay && /* @__PURE__ */ jsxRuntime.jsx(react.ModalOverlay, {}),
129
- /* @__PURE__ */ jsxRuntime.jsxs(react.ModalContent, { children: [
130
- title && /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { children: title }),
133
+ /* @__PURE__ */ jsxRuntime.jsxs(react.ModalContent, { ...contentProps, children: [
134
+ title && /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { ...headerProps, children: title }),
131
135
  !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {}),
132
- children,
133
- footer && /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { children: footer })
136
+ utils.runIfFn(children, {
137
+ isOpen,
138
+ onClose
139
+ }),
140
+ footer && /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { ...footerProps, children: footer })
134
141
  ] })
135
142
  ] });
136
143
  };
137
144
  var Modal = (props) => {
138
- const { children, ...rest } = props;
139
- return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children }) });
145
+ const { children, isOpen, onClose, ...rest } = props;
146
+ return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { ...rest, isOpen, onClose, children: /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: utils.runIfFn(children, {
147
+ isOpen,
148
+ onClose
149
+ }) }) });
140
150
  };
141
151
  var [StylesProvider] = react.createStylesContext("SuiMenuDialog");
142
152
  var MenuDialog = (props) => {
@@ -161,12 +171,14 @@ var MenuDialogList = react.forwardRef(
161
171
  footer,
162
172
  initialFocusRef,
163
173
  hideCloseButton,
164
- motionPreset,
174
+ motionPreset = "slideInBottom",
175
+ isCentered: isCenteredProp,
165
176
  ...rest
166
177
  } = props;
167
178
  const { isOpen, onClose, menuRef } = react.useMenuContext();
168
179
  const { ref, ...ownProps } = react.useMenuList(rest, forwardedRef);
169
180
  const styles = react.useMultiStyleConfig("Menu", props);
181
+ const isCentered = react.useBreakpointValue({ base: true, md: false });
170
182
  return /* @__PURE__ */ jsxRuntime.jsxs(
171
183
  BaseModal,
172
184
  {
@@ -176,6 +188,8 @@ var MenuDialogList = react.forwardRef(
176
188
  title,
177
189
  hideCloseButton,
178
190
  motionPreset,
191
+ isCentered: isCenteredProp != null ? isCenteredProp : isCentered,
192
+ contentProps: { mx: 4 },
179
193
  children: [
180
194
  /* @__PURE__ */ jsxRuntime.jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(
181
195
  react.chakra.div,
@@ -266,14 +280,8 @@ var FormDialog = react.forwardRef(
266
280
  ] }) }) });
267
281
  }
268
282
  );
269
- var ModalsContext = React2__namespace.createContext(
270
- null
271
- );
272
- var initialModalState = {
273
- id: null,
274
- props: null,
275
- type: "modal"
276
- };
283
+
284
+ // src/default-modals.ts
277
285
  var defaultModals = {
278
286
  alert: ConfirmDialog,
279
287
  confirm: ConfirmDialog,
@@ -282,6 +290,12 @@ var defaultModals = {
282
290
  menu: MenuDialog,
283
291
  form: FormDialog
284
292
  };
293
+ var ModalsContext = React2__namespace.createContext(null);
294
+ var initialModalState = {
295
+ id: null,
296
+ props: null,
297
+ type: "modal"
298
+ };
285
299
  function ModalsProvider({ children, modals }) {
286
300
  const _instances = React2__namespace.useMemo(() => /* @__PURE__ */ new Set(), []);
287
301
  const [activeModals, setActiveModals] = React2__namespace.useState({
@@ -308,12 +322,15 @@ function ModalsProvider({ children, modals }) {
308
322
  [scope]: modal
309
323
  }));
310
324
  };
311
- const open = (options) => {
312
- if (typeof options === "function") {
313
- const component2 = options;
314
- options = {
315
- component: component2
325
+ const open = (componentOrOptions, options) => {
326
+ let _options;
327
+ if (typeof componentOrOptions === "function") {
328
+ _options = {
329
+ component: componentOrOptions,
330
+ ...options
316
331
  };
332
+ } else {
333
+ _options = componentOrOptions;
317
334
  }
318
335
  const {
319
336
  id = _instances.size + 1,
@@ -321,7 +338,7 @@ function ModalsProvider({ children, modals }) {
321
338
  scope = "modal",
322
339
  component,
323
340
  ...props
324
- } = options;
341
+ } = _options;
325
342
  const modal = {
326
343
  id,
327
344
  props,
@@ -462,6 +479,19 @@ var useModalsContext = () => React2__namespace.useContext(ModalsContext);
462
479
  var useModals = () => {
463
480
  return useModalsContext();
464
481
  };
482
+ var createModals = (options) => {
483
+ const modals = {
484
+ ...defaultModals,
485
+ ...options.modals
486
+ };
487
+ const Provider = (props) => {
488
+ return /* @__PURE__ */ jsxRuntime.jsx(ModalsProvider, { children: props.children, modals });
489
+ };
490
+ return {
491
+ ModalsProvider: Provider,
492
+ useModals
493
+ };
494
+ };
465
495
 
466
496
  exports.BaseDrawer = BaseDrawer;
467
497
  exports.BaseModal = BaseModal;
@@ -473,6 +503,7 @@ exports.MenuDialogList = MenuDialogList;
473
503
  exports.Modal = Modal;
474
504
  exports.ModalsContext = ModalsContext;
475
505
  exports.ModalsProvider = ModalsProvider;
506
+ exports.createModals = createModals;
476
507
  exports.useModals = useModals;
477
508
  exports.useModalsContext = useModalsContext;
478
509
  //# sourceMappingURL=out.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx"],"names":["jsx","jsxs","ModalFooter","ModalBody","Button","forwardRef","React","component","modals","modal","children"],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n {cancelProps?.children || cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children || confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n {title && <ModalHeader>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n Menu,\n MenuListProps,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n const { onClose, onCloseComplete, ...rest } = props\n\n return (\n <Menu\n variant=\"dialog\"\n onClose={() => {\n onClose?.()\n // Not supported in Menu, so we call it here instead\n // @todo Refactor this in v2?\n onCloseComplete?.()\n }}\n {...rest}\n />\n )\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n _dark: {\n /* @ts-expect-error */\n ...(styles.list._dark || {}),\n boxShadow: 'none',\n },\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n }\n)\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'\nimport { runIfFn } from '@saas-ui/react-utils'\n\nimport {\n Form,\n AutoFields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues, TContext>,\n | 'schema'\n | 'defaultValues'\n | 'values'\n | 'context'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * The cancel button label\n * @default \"Cancel\"\n */\n cancelLabel?: React.ReactNode\n /**\n * The submit button label\n * @default \"Submit\"\n */\n submitLabel?: React.ReactNode\n /**\n * If no children are passed, this will auto render fields based on the supplied schema.\n */\n children?: React.ReactNode\n /**\n * A schema field resolver used to auto generate form fields.\n */\n fieldResolver?: FieldResolver\n}\n/**\n * Can be used to quickly request information from people without leaving the current page.\n *\n * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog\n */\nexport const FormDialog = forwardRef(\n <\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n >(\n props: FormDialogProps<TFieldValues, TContext>,\n ref: React.ForwardedRef<HTMLFormElement>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError = 100,\n cancelLabel = 'Cancel',\n submitLabel = 'Submit',\n footer,\n isOpen,\n onClose,\n ...rest\n } = props\n\n const formProps = {\n ref,\n schema,\n resolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n return (\n <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>\n <Form {...formProps} ref={ref}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) || (\n <AutoFields\n schema={schema}\n fieldResolver={fieldResolver}\n focusFirstField\n />\n )}\n </ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button variant=\"ghost\" mr={3} onClick={onClose}>\n {cancelLabel}\n </Button>\n <SubmitButton>{submitLabel}</SubmitButton>\n </ModalFooter>\n )}\n </>\n )}\n </Form>\n </BaseModal>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormDialogProps<TFieldValues> & {\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { Modal, BaseModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\nimport { MenuDialog, MenuDialogProps } from './menu'\nimport { FormDialog, FormDialogProps } from './form'\n\nexport interface ModalsContextValue {\n open: (options: OpenOptions) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: (options: FormDialogOptions) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue | null>(\n null\n)\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n body?: React.ReactNode\n children?: React.ReactNode\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes =\n | 'modal'\n | 'drawer'\n | 'alert'\n | 'confirm'\n | 'menu'\n | string\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n /**\n * Whether the modal is open or not.\n * This is used internally to keep track of the modal state.\n */\n isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type: ModalTypes = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends ModalOptions>(\n options: T | React.FC<BaseModalProps>\n ): ModalId => {\n if (typeof options === 'function') {\n const component: React.FC<BaseModalProps> = options\n options = {\n component,\n } as unknown as T\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n isOpen: true,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions): ModalId => {\n return open<DrawerOptions>({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ConfirmDialogOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ConfirmDialogOptions): ModalId => {\n return open<ConfirmDialogOptions>({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: MenuDialogOptions): ModalId => {\n return open<MenuDialogOptions>({\n ...options,\n type: 'menu',\n })\n }\n\n const form = (options: FormDialogOptions): ModalId => {\n return open<FormDialogOptions>({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(\n {\n ...modal,\n isOpen: false,\n },\n modal.scope\n )\n } else if (scoped.length > 1) {\n setActiveModal(scoped[scoped.length - 2], modal.scope)\n } else {\n setActiveModal(\n {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n }\n\n const closeComplete = (id?: ModalId | null) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(initialModalState, modal.scope)\n }\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n menu,\n form,\n close,\n closeAll,\n }\n\n const content = React.useMemo(\n () =>\n Object.entries(activeModals).map(([scope, config]) => {\n const Component = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!config.isOpen}\n onClose={() => close(config.id)}\n onCloseComplete={() => closeComplete(config.id)}\n />\n )\n }),\n [activeModals]\n )\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = () =>\n React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"]}
1
+ {"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx","../src/default-modals.ts","../src/create-modals.tsx"],"names":["jsx","jsxs","ModalFooter","ModalBody","Button","forwardRef","runIfFn","React","modals","modal","children"],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n {cancelProps?.children || cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children || confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} 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 ModalContentProps,\n ModalHeaderProps,\n ModalFooterProps,\n} from '@chakra-ui/react'\nimport { MaybeRenderProp } from '@chakra-ui/react-utils'\nimport { runIfFn } from '@chakra-ui/utils'\n\nexport interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal children\n */\n children: MaybeRenderProp<{\n isOpen: boolean\n onClose: () => void\n }>\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n /**\n * Props for the modal header\n */\n headerProps?: ModalHeaderProps\n /**\n * Props for the modal content\n */\n contentProps?: ModalContentProps\n /**\n * Props for the modal footer\n */\n footerProps?: ModalFooterProps\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n headerProps,\n contentProps,\n footerProps,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent {...contentProps}>\n {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, isOpen, onClose, ...rest } = props\n return (\n <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>\n <ModalBody>\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n </ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n Menu,\n MenuListProps,\n useBreakpointValue,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n const { onClose, onCloseComplete, ...rest } = props\n\n return (\n <Menu\n variant=\"dialog\"\n onClose={() => {\n onClose?.()\n // Not supported in Menu, so we call it here instead\n // @todo Refactor this in v2?\n onCloseComplete?.()\n }}\n {...rest}\n />\n )\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset = 'slideInBottom',\n isCentered: isCenteredProp,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n const isCentered = useBreakpointValue({ base: true, md: false })\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n isCentered={isCenteredProp ?? isCentered}\n contentProps={{ mx: 4 }}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n _dark: {\n /* @ts-expect-error */\n ...(styles.list._dark || {}),\n boxShadow: 'none',\n },\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n }\n)\n","import * as React from 'react'\n\nimport { 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 FieldProps,\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 TSchema = any,\n TFieldTypes = FieldProps<TFieldValues>\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,\n | 'schema'\n | 'defaultValues'\n | 'values'\n | 'context'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n | 'resetOptions'\n | 'children'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * 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 * 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 { BaseModalProps } from './modal'\nimport { DrawerProps } from './drawer'\nimport { ConfirmDialogProps } from './dialog'\nimport { MenuDialogProps } from './menu'\nimport { FormDialogProps } from './form'\nimport { defaultModals } from './default-modals'\n\nexport interface ModalsContextValue<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,\n TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>\n> {\n open: <T extends OpenOptions<TTypes>>(\n componentOrOptions: T extends {\n component: infer TComponent extends React.FC<any>\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>\n : T extends {\n type: infer TType extends keyof TModals\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>\n : T,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: <TProps extends FormDialogProps = FormDialogProps>(\n options: WithModalOptions<TProps>\n ) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue<\n typeof defaultModals\n> | null>(null)\n\nexport interface ModalsProviderProps<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>\n> {\n children: React.ReactNode\n modals?: TModals\n}\n\nexport type ModalId = string | number\n\ntype WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions<TModalTypes extends string> extends ModalOptions {\n type?: TModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions,\n TModalTypes extends string = string\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: TModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n /**\n * Whether the modal is open or not.\n * This is used internally to keep track of the modal state.\n */\n isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends OpenOptions<any>>(\n componentOrOptions: any,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ): ModalId => {\n let _options: ModalOptions\n if (typeof componentOrOptions === 'function') {\n _options = {\n component: componentOrOptions,\n ...options,\n } as unknown as T\n } else {\n _options = componentOrOptions\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = _options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n isOpen: true,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions): 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 = <TProps extends FormDialogProps = FormDialogProps>(\n options: WithModalOptions<TProps>\n ): ModalId => {\n return open({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(\n {\n ...modal,\n isOpen: false,\n },\n modal.scope\n )\n } else if (scoped.length > 1) {\n setActiveModal(scoped[scoped.length - 2], modal.scope)\n } else {\n setActiveModal(\n {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n }\n\n const closeComplete = (id?: ModalId | null) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(initialModalState, modal.scope)\n }\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n menu,\n form,\n close,\n closeAll,\n }\n\n const content = React.useMemo(\n () =>\n Object.entries(activeModals).map(([scope, config]) => {\n const Component = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!config.isOpen}\n onClose={() => close(config.id)}\n onCloseComplete={() => closeComplete(config.id)}\n />\n )\n }),\n [activeModals]\n )\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = () =>\n React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n return useModalsContext()\n}\n","import { ConfirmDialog } from './dialog'\nimport { MenuDialog } from './menu'\nimport { FormDialog } from './form'\nimport { Drawer } from './drawer'\nimport { Modal } from './modal'\n\nexport const defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n","import { defaultModals } from './default-modals'\nimport {\n ModalsContextValue,\n ModalsProvider,\n ModalsProviderProps,\n useModals,\n} from './provider'\n\ninterface CreateModalOptions {}\n\nconst createModal = (Component: React.FC<any>, options: CreateModalOptions) => {\n return Component\n}\n\nexport interface CreateModalsOptions<TModalDefs> {\n modals: TModalDefs\n}\n\nexport const createModals = <TModalDefs extends Record<string, React.FC<any>>>(\n options: CreateModalsOptions<TModalDefs>\n) => {\n const modals = {\n ...defaultModals,\n ...options.modals,\n }\n const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {\n return <ModalsProvider children={props.children} modals={modals} />\n }\n\n return {\n ModalsProvider: Provider,\n useModals: useModals as () => ModalsContextValue<typeof modals>,\n }\n}\n"]}
package/dist/index.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as React2 from 'react';
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';
2
+ import { createStylesContext, forwardRef, useMenuContext, useMenuList, useMultiStyleConfig, useBreakpointValue, 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
3
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
4
+ import { runIfFn as runIfFn$1 } from '@chakra-ui/utils';
4
5
  import { runIfFn } from '@saas-ui/react-utils';
5
6
  import { Form, AutoFields, SubmitButton } from '@saas-ui/forms';
6
7
 
@@ -100,21 +101,30 @@ var BaseModal = (props) => {
100
101
  onClose,
101
102
  hideCloseButton,
102
103
  hideOverlay,
104
+ headerProps,
105
+ contentProps,
106
+ footerProps,
103
107
  ...rest
104
108
  } = props;
105
109
  return /* @__PURE__ */ jsxs(Modal$1, { isOpen, onClose, ...rest, children: [
106
110
  !hideOverlay && /* @__PURE__ */ jsx(ModalOverlay, {}),
107
- /* @__PURE__ */ jsxs(ModalContent, { children: [
108
- title && /* @__PURE__ */ jsx(ModalHeader, { children: title }),
111
+ /* @__PURE__ */ jsxs(ModalContent, { ...contentProps, children: [
112
+ title && /* @__PURE__ */ jsx(ModalHeader, { ...headerProps, children: title }),
109
113
  !hideCloseButton && /* @__PURE__ */ jsx(ModalCloseButton, {}),
110
- children,
111
- footer && /* @__PURE__ */ jsx(ModalFooter, { children: footer })
114
+ runIfFn$1(children, {
115
+ isOpen,
116
+ onClose
117
+ }),
118
+ footer && /* @__PURE__ */ jsx(ModalFooter, { ...footerProps, children: footer })
112
119
  ] })
113
120
  ] });
114
121
  };
115
122
  var Modal = (props) => {
116
- const { children, ...rest } = props;
117
- return /* @__PURE__ */ jsx(BaseModal, { ...rest, children: /* @__PURE__ */ jsx(ModalBody, { children }) });
123
+ const { children, isOpen, onClose, ...rest } = props;
124
+ return /* @__PURE__ */ jsx(BaseModal, { ...rest, isOpen, onClose, children: /* @__PURE__ */ jsx(ModalBody, { children: runIfFn$1(children, {
125
+ isOpen,
126
+ onClose
127
+ }) }) });
118
128
  };
119
129
  var [StylesProvider] = createStylesContext("SuiMenuDialog");
120
130
  var MenuDialog = (props) => {
@@ -139,12 +149,14 @@ var MenuDialogList = forwardRef(
139
149
  footer,
140
150
  initialFocusRef,
141
151
  hideCloseButton,
142
- motionPreset,
152
+ motionPreset = "slideInBottom",
153
+ isCentered: isCenteredProp,
143
154
  ...rest
144
155
  } = props;
145
156
  const { isOpen, onClose, menuRef } = useMenuContext();
146
157
  const { ref, ...ownProps } = useMenuList(rest, forwardedRef);
147
158
  const styles = useMultiStyleConfig("Menu", props);
159
+ const isCentered = useBreakpointValue({ base: true, md: false });
148
160
  return /* @__PURE__ */ jsxs(
149
161
  BaseModal,
150
162
  {
@@ -154,6 +166,8 @@ var MenuDialogList = forwardRef(
154
166
  title,
155
167
  hideCloseButton,
156
168
  motionPreset,
169
+ isCentered: isCenteredProp != null ? isCenteredProp : isCentered,
170
+ contentProps: { mx: 4 },
157
171
  children: [
158
172
  /* @__PURE__ */ jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx(
159
173
  chakra.div,
@@ -244,14 +258,8 @@ var FormDialog = forwardRef(
244
258
  ] }) }) });
245
259
  }
246
260
  );
247
- var ModalsContext = React2.createContext(
248
- null
249
- );
250
- var initialModalState = {
251
- id: null,
252
- props: null,
253
- type: "modal"
254
- };
261
+
262
+ // src/default-modals.ts
255
263
  var defaultModals = {
256
264
  alert: ConfirmDialog,
257
265
  confirm: ConfirmDialog,
@@ -260,6 +268,12 @@ var defaultModals = {
260
268
  menu: MenuDialog,
261
269
  form: FormDialog
262
270
  };
271
+ var ModalsContext = React2.createContext(null);
272
+ var initialModalState = {
273
+ id: null,
274
+ props: null,
275
+ type: "modal"
276
+ };
263
277
  function ModalsProvider({ children, modals }) {
264
278
  const _instances = React2.useMemo(() => /* @__PURE__ */ new Set(), []);
265
279
  const [activeModals, setActiveModals] = React2.useState({
@@ -286,12 +300,15 @@ function ModalsProvider({ children, modals }) {
286
300
  [scope]: modal
287
301
  }));
288
302
  };
289
- const open = (options) => {
290
- if (typeof options === "function") {
291
- const component2 = options;
292
- options = {
293
- component: component2
303
+ const open = (componentOrOptions, options) => {
304
+ let _options;
305
+ if (typeof componentOrOptions === "function") {
306
+ _options = {
307
+ component: componentOrOptions,
308
+ ...options
294
309
  };
310
+ } else {
311
+ _options = componentOrOptions;
295
312
  }
296
313
  const {
297
314
  id = _instances.size + 1,
@@ -299,7 +316,7 @@ function ModalsProvider({ children, modals }) {
299
316
  scope = "modal",
300
317
  component,
301
318
  ...props
302
- } = options;
319
+ } = _options;
303
320
  const modal = {
304
321
  id,
305
322
  props,
@@ -440,7 +457,20 @@ var useModalsContext = () => React2.useContext(ModalsContext);
440
457
  var useModals = () => {
441
458
  return useModalsContext();
442
459
  };
460
+ var createModals = (options) => {
461
+ const modals = {
462
+ ...defaultModals,
463
+ ...options.modals
464
+ };
465
+ const Provider = (props) => {
466
+ return /* @__PURE__ */ jsx(ModalsProvider, { children: props.children, modals });
467
+ };
468
+ return {
469
+ ModalsProvider: Provider,
470
+ useModals
471
+ };
472
+ };
443
473
 
444
- export { BaseDrawer, BaseModal, ConfirmDialog, Drawer, FormDialog, MenuDialog, MenuDialogList, Modal, ModalsContext, ModalsProvider, useModals, useModalsContext };
474
+ export { BaseDrawer, BaseModal, ConfirmDialog, Drawer, FormDialog, MenuDialog, MenuDialogList, Modal, ModalsContext, ModalsProvider, createModals, useModals, useModalsContext };
445
475
  //# sourceMappingURL=out.js.map
446
476
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx"],"names":["jsx","jsxs","ModalFooter","ModalBody","Button","forwardRef","React","component","modals","modal","children"],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n {cancelProps?.children || cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children || confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n {title && <ModalHeader>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n Menu,\n MenuListProps,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n const { onClose, onCloseComplete, ...rest } = props\n\n return (\n <Menu\n variant=\"dialog\"\n onClose={() => {\n onClose?.()\n // Not supported in Menu, so we call it here instead\n // @todo Refactor this in v2?\n onCloseComplete?.()\n }}\n {...rest}\n />\n )\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n _dark: {\n /* @ts-expect-error */\n ...(styles.list._dark || {}),\n boxShadow: 'none',\n },\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n }\n)\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'\nimport { runIfFn } from '@saas-ui/react-utils'\n\nimport {\n Form,\n AutoFields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues, TContext>,\n | 'schema'\n | 'defaultValues'\n | 'values'\n | 'context'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * The cancel button label\n * @default \"Cancel\"\n */\n cancelLabel?: React.ReactNode\n /**\n * The submit button label\n * @default \"Submit\"\n */\n submitLabel?: React.ReactNode\n /**\n * If no children are passed, this will auto render fields based on the supplied schema.\n */\n children?: React.ReactNode\n /**\n * A schema field resolver used to auto generate form fields.\n */\n fieldResolver?: FieldResolver\n}\n/**\n * Can be used to quickly request information from people without leaving the current page.\n *\n * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog\n */\nexport const FormDialog = forwardRef(\n <\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n >(\n props: FormDialogProps<TFieldValues, TContext>,\n ref: React.ForwardedRef<HTMLFormElement>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError = 100,\n cancelLabel = 'Cancel',\n submitLabel = 'Submit',\n footer,\n isOpen,\n onClose,\n ...rest\n } = props\n\n const formProps = {\n ref,\n schema,\n resolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n return (\n <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>\n <Form {...formProps} ref={ref}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) || (\n <AutoFields\n schema={schema}\n fieldResolver={fieldResolver}\n focusFirstField\n />\n )}\n </ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button variant=\"ghost\" mr={3} onClick={onClose}>\n {cancelLabel}\n </Button>\n <SubmitButton>{submitLabel}</SubmitButton>\n </ModalFooter>\n )}\n </>\n )}\n </Form>\n </BaseModal>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormDialogProps<TFieldValues> & {\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { Modal, BaseModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\nimport { MenuDialog, MenuDialogProps } from './menu'\nimport { FormDialog, FormDialogProps } from './form'\n\nexport interface ModalsContextValue {\n open: (options: OpenOptions) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: (options: FormDialogOptions) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue | null>(\n null\n)\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n body?: React.ReactNode\n children?: React.ReactNode\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes =\n | 'modal'\n | 'drawer'\n | 'alert'\n | 'confirm'\n | 'menu'\n | string\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n /**\n * Whether the modal is open or not.\n * This is used internally to keep track of the modal state.\n */\n isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type: ModalTypes = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends ModalOptions>(\n options: T | React.FC<BaseModalProps>\n ): ModalId => {\n if (typeof options === 'function') {\n const component: React.FC<BaseModalProps> = options\n options = {\n component,\n } as unknown as T\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n isOpen: true,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions): ModalId => {\n return open<DrawerOptions>({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ConfirmDialogOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ConfirmDialogOptions): ModalId => {\n return open<ConfirmDialogOptions>({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: MenuDialogOptions): ModalId => {\n return open<MenuDialogOptions>({\n ...options,\n type: 'menu',\n })\n }\n\n const form = (options: FormDialogOptions): ModalId => {\n return open<FormDialogOptions>({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(\n {\n ...modal,\n isOpen: false,\n },\n modal.scope\n )\n } else if (scoped.length > 1) {\n setActiveModal(scoped[scoped.length - 2], modal.scope)\n } else {\n setActiveModal(\n {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n }\n\n const closeComplete = (id?: ModalId | null) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(initialModalState, modal.scope)\n }\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n menu,\n form,\n close,\n closeAll,\n }\n\n const content = React.useMemo(\n () =>\n Object.entries(activeModals).map(([scope, config]) => {\n const Component = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!config.isOpen}\n onClose={() => close(config.id)}\n onCloseComplete={() => closeComplete(config.id)}\n />\n )\n }),\n [activeModals]\n )\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = () =>\n React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"]}
1
+ {"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx","../src/default-modals.ts","../src/create-modals.tsx"],"names":["jsx","jsxs","ModalFooter","ModalBody","Button","forwardRef","runIfFn","React","modals","modal","children"],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n {cancelProps?.children || cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children || confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} 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 ModalContentProps,\n ModalHeaderProps,\n ModalFooterProps,\n} from '@chakra-ui/react'\nimport { MaybeRenderProp } from '@chakra-ui/react-utils'\nimport { runIfFn } from '@chakra-ui/utils'\n\nexport interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal children\n */\n children: MaybeRenderProp<{\n isOpen: boolean\n onClose: () => void\n }>\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n /**\n * Props for the modal header\n */\n headerProps?: ModalHeaderProps\n /**\n * Props for the modal content\n */\n contentProps?: ModalContentProps\n /**\n * Props for the modal footer\n */\n footerProps?: ModalFooterProps\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n headerProps,\n contentProps,\n footerProps,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent {...contentProps}>\n {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, isOpen, onClose, ...rest } = props\n return (\n <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>\n <ModalBody>\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n </ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n Menu,\n MenuListProps,\n useBreakpointValue,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n const { onClose, onCloseComplete, ...rest } = props\n\n return (\n <Menu\n variant=\"dialog\"\n onClose={() => {\n onClose?.()\n // Not supported in Menu, so we call it here instead\n // @todo Refactor this in v2?\n onCloseComplete?.()\n }}\n {...rest}\n />\n )\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset = 'slideInBottom',\n isCentered: isCenteredProp,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n const isCentered = useBreakpointValue({ base: true, md: false })\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n isCentered={isCenteredProp ?? isCentered}\n contentProps={{ mx: 4 }}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n _dark: {\n /* @ts-expect-error */\n ...(styles.list._dark || {}),\n boxShadow: 'none',\n },\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n }\n)\n","import * as React from 'react'\n\nimport { 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 FieldProps,\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 TSchema = any,\n TFieldTypes = FieldProps<TFieldValues>\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,\n | 'schema'\n | 'defaultValues'\n | 'values'\n | 'context'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n | 'resetOptions'\n | 'children'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * 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 * 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 { BaseModalProps } from './modal'\nimport { DrawerProps } from './drawer'\nimport { ConfirmDialogProps } from './dialog'\nimport { MenuDialogProps } from './menu'\nimport { FormDialogProps } from './form'\nimport { defaultModals } from './default-modals'\n\nexport interface ModalsContextValue<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,\n TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>\n> {\n open: <T extends OpenOptions<TTypes>>(\n componentOrOptions: T extends {\n component: infer TComponent extends React.FC<any>\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>\n : T extends {\n type: infer TType extends keyof TModals\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>\n : T,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: <TProps extends FormDialogProps = FormDialogProps>(\n options: WithModalOptions<TProps>\n ) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue<\n typeof defaultModals\n> | null>(null)\n\nexport interface ModalsProviderProps<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>\n> {\n children: React.ReactNode\n modals?: TModals\n}\n\nexport type ModalId = string | number\n\ntype WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions<TModalTypes extends string> extends ModalOptions {\n type?: TModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions,\n TModalTypes extends string = string\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: TModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n /**\n * Whether the modal is open or not.\n * This is used internally to keep track of the modal state.\n */\n isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends OpenOptions<any>>(\n componentOrOptions: any,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ): ModalId => {\n let _options: ModalOptions\n if (typeof componentOrOptions === 'function') {\n _options = {\n component: componentOrOptions,\n ...options,\n } as unknown as T\n } else {\n _options = componentOrOptions\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = _options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n isOpen: true,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions): 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 = <TProps extends FormDialogProps = FormDialogProps>(\n options: WithModalOptions<TProps>\n ): ModalId => {\n return open({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(\n {\n ...modal,\n isOpen: false,\n },\n modal.scope\n )\n } else if (scoped.length > 1) {\n setActiveModal(scoped[scoped.length - 2], modal.scope)\n } else {\n setActiveModal(\n {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n }\n\n const closeComplete = (id?: ModalId | null) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(initialModalState, modal.scope)\n }\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n menu,\n form,\n close,\n closeAll,\n }\n\n const content = React.useMemo(\n () =>\n Object.entries(activeModals).map(([scope, config]) => {\n const Component = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!config.isOpen}\n onClose={() => close(config.id)}\n onCloseComplete={() => closeComplete(config.id)}\n />\n )\n }),\n [activeModals]\n )\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = () =>\n React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n return useModalsContext()\n}\n","import { ConfirmDialog } from './dialog'\nimport { MenuDialog } from './menu'\nimport { FormDialog } from './form'\nimport { Drawer } from './drawer'\nimport { Modal } from './modal'\n\nexport const defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n","import { defaultModals } from './default-modals'\nimport {\n ModalsContextValue,\n ModalsProvider,\n ModalsProviderProps,\n useModals,\n} from './provider'\n\ninterface CreateModalOptions {}\n\nconst createModal = (Component: React.FC<any>, options: CreateModalOptions) => {\n return Component\n}\n\nexport interface CreateModalsOptions<TModalDefs> {\n modals: TModalDefs\n}\n\nexport const createModals = <TModalDefs extends Record<string, React.FC<any>>>(\n options: CreateModalsOptions<TModalDefs>\n) => {\n const modals = {\n ...defaultModals,\n ...options.modals,\n }\n const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {\n return <ModalsProvider children={props.children} modals={modals} />\n }\n\n return {\n ModalsProvider: Provider,\n useModals: useModals as () => ModalsContextValue<typeof modals>,\n }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saas-ui/modals",
3
- "version": "2.0.0-next.7",
3
+ "version": "2.0.0-next.9",
4
4
  "description": "A modal manager for Chakra UI",
5
5
  "source": "src/index.ts",
6
6
  "exports": {
@@ -57,7 +57,8 @@
57
57
  },
58
58
  "dependencies": {
59
59
  "@chakra-ui/utils": "^2.0.15",
60
- "@saas-ui/forms": "2.0.0-next.7",
60
+ "@chakra-ui/react-utils": "^2.0.11",
61
+ "@saas-ui/forms": "2.0.0-next.9",
61
62
  "@saas-ui/hooks": "2.0.0-next.2",
62
63
  "@saas-ui/react-utils": "2.0.0-next.1"
63
64
  },
@@ -0,0 +1,34 @@
1
+ import { defaultModals } from './default-modals'
2
+ import {
3
+ ModalsContextValue,
4
+ ModalsProvider,
5
+ ModalsProviderProps,
6
+ useModals,
7
+ } from './provider'
8
+
9
+ interface CreateModalOptions {}
10
+
11
+ const createModal = (Component: React.FC<any>, options: CreateModalOptions) => {
12
+ return Component
13
+ }
14
+
15
+ export interface CreateModalsOptions<TModalDefs> {
16
+ modals: TModalDefs
17
+ }
18
+
19
+ export const createModals = <TModalDefs extends Record<string, React.FC<any>>>(
20
+ options: CreateModalsOptions<TModalDefs>
21
+ ) => {
22
+ const modals = {
23
+ ...defaultModals,
24
+ ...options.modals,
25
+ }
26
+ const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {
27
+ return <ModalsProvider children={props.children} modals={modals} />
28
+ }
29
+
30
+ return {
31
+ ModalsProvider: Provider,
32
+ useModals: useModals as () => ModalsContextValue<typeof modals>,
33
+ }
34
+ }
@@ -0,0 +1,14 @@
1
+ import { ConfirmDialog } from './dialog'
2
+ import { MenuDialog } from './menu'
3
+ import { FormDialog } from './form'
4
+ import { Drawer } from './drawer'
5
+ import { Modal } from './modal'
6
+
7
+ export const defaultModals = {
8
+ alert: ConfirmDialog,
9
+ confirm: ConfirmDialog,
10
+ drawer: Drawer,
11
+ modal: Modal,
12
+ menu: MenuDialog,
13
+ form: FormDialog,
14
+ }
package/src/form.tsx CHANGED
@@ -10,16 +10,19 @@ import {
10
10
  FormProps,
11
11
  FieldValues,
12
12
  FieldResolver,
13
+ FieldProps,
13
14
  } from '@saas-ui/forms'
14
15
 
15
16
  import { BaseModal, BaseModalProps } from './modal'
16
17
 
17
18
  export interface FormDialogProps<
18
19
  TFieldValues extends FieldValues = FieldValues,
19
- TContext extends object = object
20
+ TContext extends object = object,
21
+ TSchema = any,
22
+ TFieldTypes = FieldProps<TFieldValues>
20
23
  > extends Omit<BaseModalProps, 'children'>,
21
24
  Pick<
22
- FormProps<TFieldValues, TContext>,
25
+ FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,
23
26
  | 'schema'
24
27
  | 'defaultValues'
25
28
  | 'values'
@@ -35,6 +38,8 @@ export interface FormDialogProps<
35
38
  | 'shouldUseNativeValidation'
36
39
  | 'criteriaMode'
37
40
  | 'delayError'
41
+ | 'resetOptions'
42
+ | 'children'
38
43
  > {
39
44
  /**
40
45
  * The modal footer, will be wrapped with `ModalFooter`.
@@ -51,10 +56,6 @@ export interface FormDialogProps<
51
56
  * @default "Submit"
52
57
  */
53
58
  submitLabel?: React.ReactNode
54
- /**
55
- * If no children are passed, this will auto render fields based on the supplied schema.
56
- */
57
- children?: React.ReactNode
58
59
  /**
59
60
  * A schema field resolver used to auto generate form fields.
60
61
  */
package/src/index.ts CHANGED
@@ -4,3 +4,5 @@ export * from './modal'
4
4
  export * from './menu'
5
5
  export * from './form'
6
6
  export * from './provider'
7
+
8
+ export { createModals, type CreateModalsOptions } from './create-modals'
package/src/menu.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  useMultiStyleConfig,
11
11
  Menu,
12
12
  MenuListProps,
13
+ useBreakpointValue,
13
14
  } from '@chakra-ui/react'
14
15
 
15
16
  import { BaseModal, BaseModalProps } from './modal'
@@ -55,7 +56,8 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
55
56
  footer,
56
57
  initialFocusRef,
57
58
  hideCloseButton,
58
- motionPreset,
59
+ motionPreset = 'slideInBottom',
60
+ isCentered: isCenteredProp,
59
61
  ...rest
60
62
  } = props
61
63
 
@@ -65,6 +67,8 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
65
67
 
66
68
  const styles = useMultiStyleConfig('Menu', props)
67
69
 
70
+ const isCentered = useBreakpointValue({ base: true, md: false })
71
+
68
72
  return (
69
73
  <BaseModal
70
74
  isOpen={isOpen}
@@ -73,6 +77,8 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
73
77
  title={title}
74
78
  hideCloseButton={hideCloseButton}
75
79
  motionPreset={motionPreset}
80
+ isCentered={isCenteredProp ?? isCentered}
81
+ contentProps={{ mx: 4 }}
76
82
  >
77
83
  {/* We forward the styles again, otherwise the modal styles will be picked up */}
78
84
  <StylesProvider value={styles}>
package/src/modal.tsx CHANGED
@@ -9,13 +9,25 @@ import {
9
9
  ModalBody,
10
10
  ModalCloseButton,
11
11
  ModalProps as ChakraModalProps,
12
+ ModalContentProps,
13
+ ModalHeaderProps,
14
+ ModalFooterProps,
12
15
  } from '@chakra-ui/react'
16
+ import { MaybeRenderProp } from '@chakra-ui/react-utils'
17
+ import { runIfFn } from '@chakra-ui/utils'
13
18
 
14
- export interface BaseModalProps extends ChakraModalProps {
19
+ export interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {
15
20
  /**
16
21
  * The modal title
17
22
  */
18
23
  title?: React.ReactNode
24
+ /**
25
+ * The modal children
26
+ */
27
+ children: MaybeRenderProp<{
28
+ isOpen: boolean
29
+ onClose: () => void
30
+ }>
19
31
  /**
20
32
  * The modal footer
21
33
  */
@@ -28,6 +40,18 @@ export interface BaseModalProps extends ChakraModalProps {
28
40
  * Hide the overlay
29
41
  */
30
42
  hideOverlay?: boolean
43
+ /**
44
+ * Props for the modal header
45
+ */
46
+ headerProps?: ModalHeaderProps
47
+ /**
48
+ * Props for the modal content
49
+ */
50
+ contentProps?: ModalContentProps
51
+ /**
52
+ * Props for the modal footer
53
+ */
54
+ footerProps?: ModalFooterProps
31
55
  }
32
56
 
33
57
  export const BaseModal: React.FC<BaseModalProps> = (props) => {
@@ -39,26 +63,37 @@ export const BaseModal: React.FC<BaseModalProps> = (props) => {
39
63
  onClose,
40
64
  hideCloseButton,
41
65
  hideOverlay,
66
+ headerProps,
67
+ contentProps,
68
+ footerProps,
42
69
  ...rest
43
70
  } = props
44
71
  return (
45
72
  <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>
46
73
  {!hideOverlay && <ModalOverlay />}
47
- <ModalContent>
48
- {title && <ModalHeader>{title}</ModalHeader>}
74
+ <ModalContent {...contentProps}>
75
+ {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}
49
76
  {!hideCloseButton && <ModalCloseButton />}
50
- {children}
51
- {footer && <ModalFooter>{footer}</ModalFooter>}
77
+ {runIfFn(children, {
78
+ isOpen,
79
+ onClose,
80
+ })}
81
+ {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}
52
82
  </ModalContent>
53
83
  </ChakraModal>
54
84
  )
55
85
  }
56
86
 
57
87
  export const Modal: React.FC<BaseModalProps> = (props) => {
58
- const { children, ...rest } = props
88
+ const { children, isOpen, onClose, ...rest } = props
59
89
  return (
60
- <BaseModal {...rest}>
61
- <ModalBody>{children}</ModalBody>
90
+ <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>
91
+ <ModalBody>
92
+ {runIfFn(children, {
93
+ isOpen,
94
+ onClose,
95
+ })}
96
+ </ModalBody>
62
97
  </BaseModal>
63
98
  )
64
99
  }
package/src/provider.tsx CHANGED
@@ -1,38 +1,59 @@
1
1
  import * as React from 'react'
2
2
 
3
- import { Modal, BaseModalProps } from './modal'
4
- import { Drawer, DrawerProps } from './drawer'
5
- import { ConfirmDialog, ConfirmDialogProps } from './dialog'
6
- import { MenuDialog, MenuDialogProps } from './menu'
7
- import { FormDialog, FormDialogProps } from './form'
8
-
9
- export interface ModalsContextValue {
10
- open: (options: OpenOptions) => ModalId
3
+ import { BaseModalProps } from './modal'
4
+ import { DrawerProps } from './drawer'
5
+ import { ConfirmDialogProps } from './dialog'
6
+ import { MenuDialogProps } from './menu'
7
+ import { FormDialogProps } from './form'
8
+ import { defaultModals } from './default-modals'
9
+
10
+ export interface ModalsContextValue<
11
+ TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,
12
+ TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>
13
+ > {
14
+ open: <T extends OpenOptions<TTypes>>(
15
+ componentOrOptions: T extends {
16
+ component: infer TComponent extends React.FC<any>
17
+ }
18
+ ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>
19
+ : T extends {
20
+ type: infer TType extends keyof TModals
21
+ }
22
+ ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>
23
+ : T,
24
+ options?: T extends React.FC<any>
25
+ ? WithModalOptions<React.ComponentPropsWithRef<T>>
26
+ : never
27
+ ) => ModalId
11
28
  drawer: (options: DrawerOptions) => ModalId
12
29
  alert: (options: ConfirmDialogOptions) => ModalId
13
30
  confirm: (options: ConfirmDialogOptions) => ModalId
14
31
  menu: (options: MenuDialogOptions) => ModalId
15
- form: (options: FormDialogOptions) => ModalId
32
+ form: <TProps extends FormDialogProps = FormDialogProps>(
33
+ options: WithModalOptions<TProps>
34
+ ) => ModalId
16
35
  close: (id: ModalId) => void
17
36
  closeAll: () => void
18
37
  }
19
38
 
20
- export const ModalsContext = React.createContext<ModalsContextValue | null>(
21
- null
22
- )
39
+ export const ModalsContext = React.createContext<ModalsContextValue<
40
+ typeof defaultModals
41
+ > | null>(null)
23
42
 
24
- interface ModalsProviderProps {
43
+ export interface ModalsProviderProps<
44
+ TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>
45
+ > {
25
46
  children: React.ReactNode
26
- modals?: Record<string, React.FC<any>>
47
+ modals?: TModals
27
48
  }
28
49
 
29
50
  export type ModalId = string | number
30
51
 
52
+ type WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions
53
+
31
54
  interface ModalOptions
32
- extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
55
+ extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {
33
56
  onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void
34
- body?: React.ReactNode
35
- children?: React.ReactNode
36
57
  [key: string]: any
37
58
  }
38
59
 
@@ -52,23 +73,16 @@ export interface FormDialogOptions
52
73
  extends ModalOptions,
53
74
  Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}
54
75
 
55
- export interface OpenOptions extends ModalOptions {
56
- type?: ModalTypes
76
+ export interface OpenOptions<TModalTypes extends string> extends ModalOptions {
77
+ type?: TModalTypes
57
78
  scope?: ModalScopes
58
79
  }
59
80
 
60
81
  export type ModalScopes = 'modal' | 'alert'
61
82
 
62
- export type ModalTypes =
63
- | 'modal'
64
- | 'drawer'
65
- | 'alert'
66
- | 'confirm'
67
- | 'menu'
68
- | string
69
-
70
83
  export interface ModalConfig<
71
- TModalOptions extends ModalOptions = ModalOptions
84
+ TModalOptions extends ModalOptions = ModalOptions,
85
+ TModalTypes extends string = string
72
86
  > {
73
87
  /**
74
88
  * The modal id, autogenerated when not set.
@@ -91,7 +105,7 @@ export interface ModalConfig<
91
105
  *
92
106
  * Custom types can be configured using the `modals` prop of `ModalProvider`
93
107
  */
94
- type?: ModalTypes
108
+ type?: TModalTypes
95
109
  /**
96
110
  * Render a custom modal component.
97
111
  * This will ignore the `type` param.
@@ -110,15 +124,6 @@ const initialModalState: ModalConfig = {
110
124
  type: 'modal',
111
125
  }
112
126
 
113
- const defaultModals = {
114
- alert: ConfirmDialog,
115
- confirm: ConfirmDialog,
116
- drawer: Drawer,
117
- modal: Modal,
118
- menu: MenuDialog,
119
- form: FormDialog,
120
- }
121
-
122
127
  export function ModalsProvider({ children, modals }: ModalsProviderProps) {
123
128
  // Note that updating the Set doesn't trigger a re-render,
124
129
  // use in conjuction with setActiveModals
@@ -136,7 +141,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
136
141
  ...modals,
137
142
  }
138
143
 
139
- return (type: ModalTypes = 'modal') => {
144
+ return (type = 'modal') => {
140
145
  const component = _modals[type] || _modals.modal
141
146
 
142
147
  return component
@@ -155,14 +160,20 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
155
160
  }))
156
161
  }
157
162
 
158
- const open = <T extends ModalOptions>(
159
- options: T | React.FC<BaseModalProps>
163
+ const open = <T extends OpenOptions<any>>(
164
+ componentOrOptions: any,
165
+ options?: T extends React.FC<any>
166
+ ? WithModalOptions<React.ComponentPropsWithRef<T>>
167
+ : never
160
168
  ): ModalId => {
161
- if (typeof options === 'function') {
162
- const component: React.FC<BaseModalProps> = options
163
- options = {
164
- component,
169
+ let _options: ModalOptions
170
+ if (typeof componentOrOptions === 'function') {
171
+ _options = {
172
+ component: componentOrOptions,
173
+ ...options,
165
174
  } as unknown as T
175
+ } else {
176
+ _options = componentOrOptions
166
177
  }
167
178
 
168
179
  const {
@@ -171,7 +182,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
171
182
  scope = 'modal',
172
183
  component,
173
184
  ...props
174
- } = options
185
+ } = _options
175
186
 
176
187
  const modal: ModalConfig<T> = {
177
188
  id,
@@ -225,8 +236,10 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
225
236
  })
226
237
  }
227
238
 
228
- const form = (options: FormDialogOptions): ModalId => {
229
- return open<FormDialogOptions>({
239
+ const form = <TProps extends FormDialogProps = FormDialogProps>(
240
+ options: WithModalOptions<TProps>
241
+ ): ModalId => {
242
+ return open({
230
243
  ...options,
231
244
  type: 'form',
232
245
  })
File without changes