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

package/dist/index.mjs

@@ -1,7 +1,9 @@
-import * as React from 'react';
-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';
-import { runIfFn } from '@saas-ui/react-utils';
-import { Form, Fields, SubmitButton } from '@saas-ui/forms';
+import * as React2 from 'react';
+import { createStylesContext, forwardRef, useMenuContext, useMenuList, useMultiStyleConfig, useBreakpointValue, chakra, ModalFooter, AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, ButtonGroup, Button, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, DrawerFooter, DrawerBody, Modal as Modal$1, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Menu } from '@chakra-ui/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { runIfFn } from '@chakra-ui/utils';
+import { runIfFn as runIfFn$1 } from '@saas-ui/react-utils';
+import { AutoFields, SubmitButton, Form } from '@saas-ui/forms';
 
 // src/dialog.tsx
 var ConfirmDialog = (props) => {
@@ -22,52 +24,81 @@ var ConfirmDialog = (props) => {
     children,
     ...rest
   } = props;
-  const cancelRef = React.useRef(null);
-  const confirmRef = React.useRef(null);
-  return /* @__PURE__ */ React.createElement(AlertDialog, {
-    isOpen,
-    onClose,
-    ...rest,
-    leastDestructiveRef: leastDestructiveFocus === "cancel" ? cancelRef : confirmRef
-  }, /* @__PURE__ */ React.createElement(AlertDialogOverlay, null, /* @__PURE__ */ React.createElement(AlertDialogContent, null, /* @__PURE__ */ React.createElement(AlertDialogHeader, null, title), /* @__PURE__ */ React.createElement(AlertDialogBody, null, children), /* @__PURE__ */ React.createElement(AlertDialogFooter, null, /* @__PURE__ */ React.createElement(ButtonGroup, {
-    ...buttonGroupProps
-  }, /* @__PURE__ */ React.createElement(Button, {
-    ref: cancelRef,
-    ...cancelProps,
-    onClick: () => {
-      onCancel == null ? void 0 : onCancel();
-      closeOnCancel && onClose();
-    }
-  }, (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel), /* @__PURE__ */ React.createElement(Button, {
-    ref: confirmRef,
-    ...confirmProps,
-    onClick: () => {
-      onConfirm == null ? void 0 : onConfirm();
-      closeOnConfirm && onClose();
+  const cancelRef = React2.useRef(null);
+  const confirmRef = React2.useRef(null);
+  return /* @__PURE__ */ jsx(
+    AlertDialog,
+    {
+      isOpen,
+      onClose,
+      ...rest,
+      leastDestructiveRef: leastDestructiveFocus === "cancel" ? cancelRef : confirmRef,
+      children: /* @__PURE__ */ jsx(AlertDialogOverlay, { children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsx(AlertDialogHeader, { children: title }),
+        /* @__PURE__ */ jsx(AlertDialogBody, { children }),
+        /* @__PURE__ */ jsx(AlertDialogFooter, { children: /* @__PURE__ */ jsxs(ButtonGroup, { ...buttonGroupProps, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: cancelRef,
+              ...cancelProps,
+              onClick: () => {
+                onCancel == null ? void 0 : onCancel();
+                closeOnCancel && onClose();
+              },
+              children: (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: confirmRef,
+              ...confirmProps,
+              onClick: () => {
+                onConfirm == null ? void 0 : onConfirm();
+                closeOnConfirm && onClose();
+              },
+              children: (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel
+            }
+          )
+        ] }) })
+      ] }) })
     }
-  }, (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel))))));
+  );
 };
 var BaseDrawer = (props) => {
   const {
     title,
     children,
+    footer,
     isOpen,
     onClose,
     hideCloseButton,
     hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
     ...rest
   } = props;
-  return /* @__PURE__ */ React.createElement(Drawer$1, {
-    isOpen,
-    onClose,
-    ...rest
-  }, !hideOverlay && /* @__PURE__ */ React.createElement(DrawerOverlay, null), /* @__PURE__ */ React.createElement(DrawerContent, null, /* @__PURE__ */ React.createElement(DrawerHeader, null, title), !hideCloseButton && /* @__PURE__ */ React.createElement(DrawerCloseButton, null), children));
+  return /* @__PURE__ */ jsxs(Drawer$1, { isOpen, onClose, ...rest, children: [
+    !hideOverlay && /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(DrawerContent, { ...contentProps, children: [
+      title && /* @__PURE__ */ jsx(DrawerHeader, { ...headerProps, children: title }),
+      !hideCloseButton && /* @__PURE__ */ jsx(DrawerCloseButton, {}),
+      runIfFn(children, {
+        isOpen,
+        onClose
+      }),
+      footer && /* @__PURE__ */ jsx(DrawerFooter, { ...footerProps, children: footer })
+    ] })
+  ] });
 };
 var Drawer = (props) => {
-  const { footer, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(BaseDrawer, {
-    ...rest
-  }, /* @__PURE__ */ React.createElement(DrawerBody, null, children), footer && /* @__PURE__ */ React.createElement(DrawerFooter, null, footer));
+  const { children, isOpen, onClose, ...rest } = props;
+  return /* @__PURE__ */ jsx(BaseDrawer, { isOpen, onClose, ...rest, children: /* @__PURE__ */ jsx(DrawerBody, { children: runIfFn(children, {
+    isOpen,
+    onClose
+  }) }) });
 };
 var BaseModal = (props) => {
   const {
@@ -78,31 +109,45 @@ var BaseModal = (props) => {
     onClose,
     hideCloseButton,
     hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
     ...rest
   } = props;
-  return /* @__PURE__ */ React.createElement(Modal$1, {
-    isOpen,
-    onClose,
-    ...rest
-  }, !hideOverlay && /* @__PURE__ */ React.createElement(ModalOverlay, null), /* @__PURE__ */ React.createElement(ModalContent, null, title && /* @__PURE__ */ React.createElement(ModalHeader, null, title), !hideCloseButton && /* @__PURE__ */ React.createElement(ModalCloseButton, null), children, footer && /* @__PURE__ */ React.createElement(ModalFooter, null, footer)));
+  return /* @__PURE__ */ jsxs(Modal$1, { isOpen, onClose, ...rest, children: [
+    !hideOverlay && /* @__PURE__ */ jsx(ModalOverlay, {}),
+    /* @__PURE__ */ jsxs(ModalContent, { ...contentProps, children: [
+      title && /* @__PURE__ */ jsx(ModalHeader, { ...headerProps, children: title }),
+      !hideCloseButton && /* @__PURE__ */ jsx(ModalCloseButton, {}),
+      runIfFn(children, {
+        isOpen,
+        onClose
+      }),
+      footer && /* @__PURE__ */ jsx(ModalFooter, { ...footerProps, children: footer })
+    ] })
+  ] });
 };
 var Modal = (props) => {
-  const { children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(BaseModal, {
-    ...rest
-  }, /* @__PURE__ */ React.createElement(ModalBody, null, children));
+  const { children, isOpen, onClose, ...rest } = props;
+  return /* @__PURE__ */ jsx(BaseModal, { ...rest, isOpen, onClose, children: /* @__PURE__ */ jsx(ModalBody, { children: runIfFn(children, {
+    isOpen,
+    onClose
+  }) }) });
 };
 var [StylesProvider] = createStylesContext("SuiMenuDialog");
 var MenuDialog = (props) => {
   const { onClose, onCloseComplete, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(Menu, {
-    variant: "dialog",
-    onClose: () => {
-      onClose == null ? void 0 : onClose();
-      onCloseComplete == null ? void 0 : onCloseComplete();
-    },
-    ...rest
-  });
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      variant: "dialog",
+      onClose: () => {
+        onClose == null ? void 0 : onClose();
+        onCloseComplete == null ? void 0 : onCloseComplete();
+      },
+      ...rest
+    }
+  );
 };
 var MenuDialogList = forwardRef(
   (props, forwardedRef) => {
@@ -112,106 +157,126 @@ var MenuDialogList = forwardRef(
       footer,
       initialFocusRef,
       hideCloseButton,
-      motionPreset,
+      motionPreset = "slideInBottom",
+      isCentered: isCenteredProp,
       ...rest
     } = props;
     const { isOpen, onClose, menuRef } = useMenuContext();
     const { ref, ...ownProps } = useMenuList(rest, forwardedRef);
     const styles = useMultiStyleConfig("Menu", props);
-    return /* @__PURE__ */ React.createElement(BaseModal, {
-      isOpen,
-      onClose,
-      initialFocusRef: initialFocusRef || menuRef,
-      title,
-      hideCloseButton,
-      motionPreset
-    }, /* @__PURE__ */ React.createElement(StylesProvider, {
-      value: styles
-    }, /* @__PURE__ */ React.createElement(chakra.div, {
-      ...ownProps,
-      ref,
-      __css: {
-        outline: 0,
-        maxHeight: "80vh",
-        overflowY: "auto",
-        ...styles.list,
-        boxShadow: "none",
-        border: 0
+    const isCentered = useBreakpointValue({ base: true, md: false });
+    return /* @__PURE__ */ jsxs(
+      BaseModal,
+      {
+        isOpen,
+        onClose,
+        initialFocusRef: initialFocusRef || menuRef,
+        title,
+        hideCloseButton,
+        motionPreset,
+        isCentered: isCenteredProp != null ? isCenteredProp : isCentered,
+        contentProps: { mx: 4 },
+        children: [
+          /* @__PURE__ */ jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx(
+            chakra.div,
+            {
+              ...ownProps,
+              ref,
+              __css: {
+                outline: 0,
+                maxHeight: "80vh",
+                // can override this in theme
+                overflowY: "auto",
+                // can override this in theme
+                ...styles.list,
+                boxShadow: "none",
+                border: 0,
+                _dark: {
+                  /* @ts-expect-error */
+                  ...styles.list._dark || {},
+                  boxShadow: "none"
+                }
+              }
+            }
+          ) }),
+          footer && /* @__PURE__ */ jsx(ModalFooter, { children: footer })
+        ]
       }
-    })), footer && /* @__PURE__ */ React.createElement(ModalFooter, null, footer));
+    );
   }
 );
-var FormDialog = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      schema,
-      resolver,
-      fieldResolver,
-      defaultValues,
-      values,
-      context,
-      onChange,
-      onSubmit,
-      onError,
-      mode,
-      reValidateMode,
-      shouldFocusError = true,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError = 100,
-      cancelLabel = "Cancel",
-      submitLabel = "Submit",
-      footer,
-      isOpen,
-      onClose,
-      ...rest
-    } = props;
-    const formProps = {
-      ref,
-      schema,
-      resolver,
-      defaultValues,
-      values,
-      context,
-      onChange,
-      onSubmit,
-      onError,
-      mode,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError
-    };
-    return /* @__PURE__ */ React.createElement(BaseModal, {
-      isOpen,
-      onClose,
-      ...rest
-    }, /* @__PURE__ */ React.createElement(Form, {
-      ...formProps,
-      ref
-    }, (form) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ModalBody, null, runIfFn(children, form) || /* @__PURE__ */ React.createElement(Fields, {
-      schema,
-      fieldResolver,
-      focusFirstField: true
-    })), footer || /* @__PURE__ */ React.createElement(ModalFooter, null, /* @__PURE__ */ React.createElement(Button, {
-      variant: "ghost",
-      mr: 3,
-      onClick: onClose
-    }, cancelLabel), /* @__PURE__ */ React.createElement(SubmitButton, null, submitLabel)))));
-  }
-);
-var ModalsContext = React.createContext(
-  null
-);
-var initialModalState = {
-  id: null,
-  props: null,
-  type: "modal"
+var useFormProps = (props) => {
+  const {
+    schema,
+    resolver,
+    fieldResolver,
+    defaultValues,
+    values,
+    context,
+    onChange,
+    onSubmit,
+    onError,
+    mode,
+    reValidateMode,
+    shouldFocusError = true,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError = 100,
+    fields,
+    ...modalProps
+  } = props;
+  const formProps = {
+    schema,
+    resolver,
+    defaultValues,
+    values,
+    context,
+    onChange,
+    onSubmit,
+    onError,
+    mode,
+    reValidateMode,
+    shouldFocusError,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError,
+    fields
+  };
+  return { modalProps, formProps, fields };
 };
+function createFormDialog(Form2) {
+  const Dialog = forwardRef((props, ref) => {
+    const { isOpen, onClose, footer, children, ...rest } = props;
+    const { modalProps, formProps, fields } = useFormProps(rest);
+    return /* @__PURE__ */ jsx(BaseModal, { ...modalProps, isOpen, onClose, children: /* @__PURE__ */ jsx(Form2, { ref, ...formProps, children: (form) => {
+      var _a, _b;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ModalBody, { children: runIfFn$1(children, form) || /* @__PURE__ */ jsx(AutoFields, {}) }),
+        footer || /* @__PURE__ */ jsxs(ModalFooter, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              mr: 3,
+              onClick: onClose,
+              ...fields == null ? void 0 : fields.cancel,
+              children: (_b = (_a = fields == null ? void 0 : fields.cancel) == null ? void 0 : _a.children) != null ? _b : "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
+        ] })
+      ] });
+    } }) });
+  });
+  Dialog.displayName = `${Form2.displayName || Form2.name}Dialog`;
+  Dialog.id = Form2.id;
+  return Dialog;
+}
+var FormDialog = createFormDialog(Form);
+
+// src/default-modals.ts
 var defaultModals = {
   alert: ConfirmDialog,
   confirm: ConfirmDialog,
@@ -220,12 +285,18 @@ var defaultModals = {
   menu: MenuDialog,
   form: FormDialog
 };
+var ModalsContext = React2.createContext(null);
+var initialModalState = {
+  id: null,
+  props: null,
+  type: "modal"
+};
 function ModalsProvider({ children, modals }) {
-  const _instances = React.useMemo(() => /* @__PURE__ */ new Set(), []);
-  const [activeModals, setActiveModals] = React.useState({
+  const _instances = React2.useMemo(() => /* @__PURE__ */ new Set(), []);
+  const [activeModals, setActiveModals] = React2.useState({
     modal: initialModalState
   });
-  const getModalComponent = React.useMemo(() => {
+  const getModalComponent = React2.useMemo(() => {
     const _modals = {
       ...defaultModals,
       ...modals
@@ -246,12 +317,15 @@ function ModalsProvider({ children, modals }) {
       [scope]: modal
     }));
   };
-  const open = (options) => {
-    if (typeof options === "function") {
-      const component2 = options;
-      options = {
-        component: component2
+  const open = (componentOrOptions, options) => {
+    let _options;
+    if (typeof componentOrOptions === "function") {
+      _options = {
+        component: componentOrOptions,
+        ...options
       };
+    } else {
+      _options = componentOrOptions;
     }
     const {
       id = _instances.size + 1,
@@ -259,7 +333,7 @@ function ModalsProvider({ children, modals }) {
       scope = "modal",
       component,
       ...props
-    } = options;
+    } = _options;
     const modal = {
       id,
       props,
@@ -339,10 +413,12 @@ function ModalsProvider({ children, modals }) {
           id: null,
           props: null,
           type: modal.type
+          // Keep type same as last modal type to make sure the animation isn't interrupted
         },
         modal.scope
       );
     }
+    closeComplete(id);
   };
   const closeComplete = (id) => {
     const modals2 = [...Array.from(_instances)];
@@ -371,31 +447,48 @@ function ModalsProvider({ children, modals }) {
     close,
     closeAll
   };
-  const content = React.useMemo(
+  const content = React2.useMemo(
     () => Object.entries(activeModals).map(([scope, config]) => {
       const Component = config.component || getModalComponent(config.type);
       const { title, body, children: children2, ...props } = config.props || {};
-      return /* @__PURE__ */ React.createElement(Component, {
-        key: scope,
-        title,
-        children: body || children2,
-        ...props,
-        isOpen: !!config.isOpen,
-        onClose: () => close(config.id),
-        onCloseComplete: () => closeComplete(config.id)
-      });
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          title,
+          children: body || children2,
+          ...props,
+          isOpen: !!config.isOpen,
+          onClose: () => close(config.id),
+          onCloseComplete: () => closeComplete(config.id)
+        },
+        scope
+      );
     }),
     [activeModals]
   );
-  return /* @__PURE__ */ React.createElement(ModalsContext.Provider, {
-    value: context
-  }, content, children);
+  return /* @__PURE__ */ jsxs(ModalsContext.Provider, { value: context, children: [
+    content,
+    children
+  ] });
 }
-var useModalsContext = () => React.useContext(ModalsContext);
+var useModalsContext = () => React2.useContext(ModalsContext);
 var useModals = () => {
   return useModalsContext();
 };
+var createModals = (options) => {
+  const modals = {
+    ...defaultModals,
+    ...options.modals
+  };
+  const Provider = (props) => {
+    return /* @__PURE__ */ jsx(ModalsProvider, { children: props.children, modals });
+  };
+  return {
+    ModalsProvider: Provider,
+    useModals
+  };
+};
 
-export { BaseDrawer, BaseModal, ConfirmDialog, Drawer, FormDialog, MenuDialog, MenuDialogList, Modal, ModalsContext, ModalsProvider, useModals, useModalsContext };
+export { BaseDrawer, BaseModal, ConfirmDialog, Drawer, FormDialog, MenuDialog, MenuDialogList, Modal, ModalsContext, ModalsProvider, createFormDialog, createModals, useModals, useModalsContext };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map