@saas-ui/modals 1.5.5 → 2.0.0-next.0

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 # @saas-ui/modals
 
-## 1.5.5
+## 2.0.0-next.0
+
+### Major Changes
+
+- f1e99198: Restructured packages.
 
 ### Patch Changes
 
-- Updated dependencies [382e095]
-  - @saas-ui/forms@1.5.3
+- f1e99198: Migrated from microbundle to tsup for builds
+- Updated dependencies [d7c87a31]
+- Updated dependencies [f1e99198]
+- Updated dependencies [8b82d945]
+- Updated dependencies [f1e99198]
+  - @saas-ui/forms@2.0.0-next.0
+  - @saas-ui/hooks@2.0.0-next.0
+  - @saas-ui/react-utils@2.0.0-next.0
 
 ## 1.5.4
 

package/dist/index.d.ts

@@ -1,7 +1,218 @@
-export * from './dialog';
-export * from './drawer';
-export * from './modal';
-export * from './menu';
-export * from './form';
-export * from './provider';
-//# sourceMappingURL=index.d.ts.map
+import * as React from 'react';
+import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalProps, MenuListProps } from '@chakra-ui/react';
+import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
+import { FieldValues, FormProps, FieldResolver } from '@saas-ui/forms';
+
+interface ConfirmDialogProps extends Omit<AlertDialogProps, 'leastDestructiveRef'> {
+    /**
+     * The dialog title
+     */
+    title?: React.ReactNode;
+    /**
+     * The cancel button label
+     */
+    cancelLabel?: React.ReactNode;
+    /**
+     * The confirm button label
+     */
+    confirmLabel?: React.ReactNode;
+    /**
+     * The cancel button props
+     */
+    cancelProps?: ButtonProps;
+    /**
+     * The confirm button props
+     */
+    confirmProps?: ButtonProps;
+    /**
+     * The button group props
+     */
+    buttonGroupProps?: ButtonGroupProps;
+    /**
+     * Close the dialog on cancel
+     * @default true
+     */
+    closeOnCancel?: boolean;
+    /**
+     * Close the dialog on confirm
+     * @default true
+     */
+    closeOnConfirm?: boolean;
+    /**
+     * Defines which button gets initial focus
+     * https://www.w3.org/TR/wai-aria-practices/#alertdialog
+     */
+    leastDestructiveFocus?: 'cancel' | 'confirm';
+    /**
+     * Function that's called when cancel is clicked
+     */
+    onCancel?: () => void;
+    /**
+     * Function that's called when confirm is clicked
+     */
+    onConfirm?: () => void;
+}
+declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+
+interface BaseDrawerProps extends Omit<DrawerProps$1, 'children'> {
+    /**
+     * The drawer title
+     */
+    title: React.ReactNode;
+    /**
+     * Hide the close button
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Hide the overflow
+     */
+    hideOverlay?: boolean;
+    children?: React.ReactNode;
+}
+declare const BaseDrawer: React.FC<BaseDrawerProps>;
+interface DrawerProps extends BaseDrawerProps {
+    /**
+     * Drawer footer content, wrapped with `DrawerFooter`
+     */
+    footer?: React.ReactNode;
+}
+declare const Drawer: React.FC<DrawerProps>;
+
+interface BaseModalProps extends ModalProps {
+    /**
+     * The modal title
+     */
+    title?: React.ReactNode;
+    /**
+     * The modal footer
+     */
+    footer?: React.ReactNode;
+    /**
+     * Hide the close button
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Hide the overlay
+     */
+    hideOverlay?: boolean;
+}
+declare const BaseModal: React.FC<BaseModalProps>;
+declare const Modal: React.FC<BaseModalProps>;
+
+interface MenuDialogProps extends BaseModalProps {
+    /**
+     * The modal footer, wrapped with `ModalFooter`
+     */
+    footer?: React.ReactNode;
+}
+declare const MenuDialog: React.FC<MenuDialogProps>;
+interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'>, Omit<MenuListProps, 'title'> {
+}
+declare const MenuDialogList: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", MenuDialogListProps>;
+
+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'> {
+    /**
+     * The modal footer, will be wrapped with `ModalFooter`.
+     * Defaults to a cancel and submit button.
+     */
+    footer?: React.ReactNode;
+    /**
+     * The cancel button label
+     * @default "Cancel"
+     */
+    cancelLabel?: React.ReactNode;
+    /**
+     * The submit button label
+     * @default "Submit"
+     */
+    submitLabel?: React.ReactNode;
+    /**
+     * If no children are passed, this will auto render fields based on the supplied schema.
+     */
+    children?: React.ReactNode;
+    /**
+     * A schema field resolver used to auto generate form fields.
+     */
+    fieldResolver?: FieldResolver;
+}
+declare const FormDialog: <TFieldValues extends FieldValues>(props: FormDialogProps<TFieldValues, object> & {
+    ref?: React.ForwardedRef<HTMLFormElement> | undefined;
+}) => React.ReactElement;
+
+interface ModalsContextValue {
+    open: (options: OpenOptions) => ModalId;
+    drawer: (options: DrawerOptions) => ModalId;
+    alert: (options: ConfirmDialogOptions) => ModalId;
+    confirm: (options: ConfirmDialogOptions) => ModalId;
+    menu: (options: MenuDialogOptions) => ModalId;
+    form: (options: FormDialogOptions) => ModalId;
+    close: (id: ModalId) => void;
+    closeAll: () => void;
+}
+declare const ModalsContext: React.Context<ModalsContextValue | null>;
+interface ModalsProviderProps {
+    children: React.ReactNode;
+    modals?: Record<string, React.FC<any>>;
+}
+type ModalId = string | number;
+interface ModalOptions extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
+    onClose?: (args: {
+        force?: boolean;
+    }) => Promise<boolean | undefined> | void;
+    body?: React.ReactNode;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+interface DrawerOptions extends ModalOptions, Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {
+}
+interface ConfirmDialogOptions extends ModalOptions, Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {
+}
+interface MenuDialogOptions extends ModalOptions, Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {
+}
+interface FormDialogOptions extends ModalOptions, Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {
+}
+interface OpenOptions extends ModalOptions {
+    type?: ModalTypes;
+    scope?: ModalScopes;
+}
+type ModalScopes = 'modal' | 'alert';
+type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu' | string;
+interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
+    /**
+     * The modal id, autogenerated when not set.
+     * Can be used to close modals.
+     */
+    id?: ModalId | null;
+    /**
+     * The modal props
+     */
+    props?: TModalOptions | null;
+    /**
+     * The modal scope
+     * Modals can only have one level per scope.
+     * The default scopes are 'modal' and 'alert', alerts can be openend above modals.
+     */
+    scope?: ModalScopes | string;
+    /**
+     * The modal type to open.
+     * Build in types are 'modal', 'drawer', 'alert', 'confirm'
+     *
+     * Custom types can be configured using the `modals` prop of `ModalProvider`
+     */
+    type?: ModalTypes;
+    /**
+     * Render a custom modal component.
+     * This will ignore the `type` param.
+     */
+    component?: React.FC<BaseModalProps>;
+    /**
+     * Whether the modal is open or not.
+     * This is used internally to keep track of the modal state.
+     */
+    isOpen?: boolean;
+}
+declare function ModalsProvider({ children, modals }: ModalsProviderProps): JSX.Element;
+declare const useModalsContext: () => ModalsContextValue;
+declare const useModals: () => ModalsContextValue;
+
+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 };

package/dist/index.js

@@ -1,2 +1,433 @@
-var e=require("react"),n=require("@chakra-ui/react"),o=require("@saas-ui/button"),r=require("@chakra-ui/utils"),t=require("@saas-ui/forms");function l(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}}),n.default=e,n}var i=/*#__PURE__*/l(e);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var o=arguments[n];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},a.apply(this,arguments)}function u(e,n){if(null==e)return{};var o,r,t={},l=Object.keys(e);for(r=0;r<l.length;r++)n.indexOf(o=l[r])>=0||(t[o]=e[o]);return t}var c=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],s=function(e){var r=e.title,t=e.cancelLabel,l=void 0===t?"Cancel":t,s=e.confirmLabel,d=void 0===s?"Confirm":s,f=e.cancelProps,m=e.confirmProps,p=e.buttonGroupProps,v=e.isOpen,C=e.closeOnCancel,h=void 0===C||C,E=e.closeOnConfirm,y=void 0===E||E,O=e.leastDestructiveFocus,b=void 0===O?"cancel":O,M=e.onClose,g=e.onCancel,D=e.onConfirm,x=e.children,F=u(e,c),B=i.useRef(null),P=i.useRef(null);/*#__PURE__*/return i.createElement(n.AlertDialog,a({isOpen:v,onClose:M},F,{leastDestructiveRef:"cancel"===b?B:P}),/*#__PURE__*/i.createElement(n.AlertDialogOverlay,null,/*#__PURE__*/i.createElement(n.AlertDialogContent,null,/*#__PURE__*/i.createElement(n.AlertDialogHeader,null,r),/*#__PURE__*/i.createElement(n.AlertDialogBody,null,x),/*#__PURE__*/i.createElement(n.AlertDialogFooter,null,/*#__PURE__*/i.createElement(o.ButtonGroup,p,/*#__PURE__*/i.createElement(o.Button,a({ref:B},f,{onClick:function(){null==g||g(),h&&M()}}),(null==f?void 0:f.children)||(null==f?void 0:f.label)||l),/*#__PURE__*/i.createElement(o.Button,a({ref:P},m,{onClick:function(){null==D||D(),y&&M()}}),(null==m?void 0:m.children)||(null==m?void 0:m.label)||d))))))},d=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],f=["footer","children"],m=function(e){var o=e.title,r=e.children,t=e.isOpen,l=e.onClose,c=e.hideCloseButton,s=e.hideOverlay,f=u(e,d);/*#__PURE__*/return i.createElement(n.Drawer,a({isOpen:t,onClose:l},f),!s&&/*#__PURE__*/i.createElement(n.DrawerOverlay,null),/*#__PURE__*/i.createElement(n.DrawerContent,null,/*#__PURE__*/i.createElement(n.DrawerHeader,null,o),!c&&/*#__PURE__*/i.createElement(n.DrawerCloseButton,null),r))},p=function(e){var o=e.footer,r=e.children,t=u(e,f);/*#__PURE__*/return i.createElement(m,t,/*#__PURE__*/i.createElement(n.DrawerBody,null,r),o&&/*#__PURE__*/i.createElement(n.DrawerFooter,null,o))},v=["title","footer","children","isOpen","onClose","hideCloseButton","hideOverlay"],C=["children"],h=function(e){var o=e.title,r=e.footer,t=e.children,l=e.isOpen,c=e.onClose,s=e.hideCloseButton,d=e.hideOverlay,f=u(e,v);/*#__PURE__*/return i.createElement(n.Modal,a({isOpen:l,onClose:c},f),!d&&/*#__PURE__*/i.createElement(n.ModalOverlay,null),/*#__PURE__*/i.createElement(n.ModalContent,null,o&&/*#__PURE__*/i.createElement(n.ModalHeader,null,o),!s&&/*#__PURE__*/i.createElement(n.ModalCloseButton,null),t,r&&/*#__PURE__*/i.createElement(n.ModalFooter,null,r)))},E=function(e){var o=e.children,r=u(e,C);/*#__PURE__*/return i.createElement(h,r,/*#__PURE__*/i.createElement(n.ModalBody,null,o))},y=["onClose","onCloseComplete"],O=["rootProps","title","footer","initialFocusRef","hideCloseButton","motionPreset"],b=["ref"],M=n.createStylesContext("MenuDialog")[0],g=function(e){var o=e.onClose,r=e.onCloseComplete,t=u(e,y);/*#__PURE__*/return i.createElement(n.Menu,a({variant:"dialog",onClose:function(){null==o||o(),null==r||r()}},t))},D=n.forwardRef(function(e,o){var r=e.title,t=e.footer,l=e.initialFocusRef,c=e.hideCloseButton,s=e.motionPreset,d=u(e,O),f=n.useMenuContext(),m=f.isOpen,p=f.onClose,v=f.menuRef,C=n.useMenuList(d,o),E=C.ref,y=u(C,b),g=n.useMultiStyleConfig("Menu",e);/*#__PURE__*/return i.createElement(h,{isOpen:m,onClose:p,initialFocusRef:l||v,title:r,hideCloseButton:c,motionPreset:s},/*#__PURE__*/i.createElement(M,{value:g},/*#__PURE__*/i.createElement(n.chakra.div,a({},y,{ref:E,__css:a({outline:0,maxHeight:"80vh",overflowY:"auto"},g.list,{boxShadow:"none",border:0})}))),t&&/*#__PURE__*/i.createElement(n.ModalFooter,null,t))}),x=["children","schema","resolver","fieldResolver","defaultValues","onChange","onSubmit","onError","mode","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","cancelLabel","submitLabel","footer","isOpen","onClose"],F=n.forwardRef(function(e,o){var l=e.children,c=e.schema,s=e.resolver,d=e.fieldResolver,f=e.defaultValues,m=e.onChange,p=e.onSubmit,v=e.onError,C=e.mode,E=e.reValidateMode,y=e.shouldFocusError,O=void 0===y||y,b=e.shouldUnregister,M=e.shouldUseNativeValidation,g=e.criteriaMode,D=e.delayError,F=void 0===D?100:D,B=e.cancelLabel,P=e.submitLabel,w=e.footer,R=e.isOpen,j=e.onClose,L=u(e,x),S={ref:o,schema:c,resolver:s,defaultValues:f,onChange:m,onSubmit:p,onError:v,mode:C,reValidateMode:E,shouldFocusError:O,shouldUnregister:b,shouldUseNativeValidation:M,criteriaMode:g,delayError:F};/*#__PURE__*/return i.createElement(h,a({isOpen:R,onClose:j},L),/*#__PURE__*/i.createElement(t.Form,S,function(e){/*#__PURE__*/return i.createElement(i.Fragment,null,/*#__PURE__*/i.createElement(n.ModalBody,null,r.runIfFn(l,e)||/*#__PURE__*/i.createElement(t.Fields,{schema:c,fieldResolver:d,focusFirstField:!0})),w||/*#__PURE__*/i.createElement(n.ModalFooter,null,/*#__PURE__*/i.createElement(n.Button,{variant:"ghost",mr:3,onClick:j},B||"Cancel"),/*#__PURE__*/i.createElement(t.SubmitButton,null,P||"Submit")))}))}),B=["id","type","scope","component"],P=["title","body","children"],w=i.createContext(null),R={id:null,props:null,type:"modal"},j={alert:s,confirm:s,drawer:p,modal:E,menu:g,form:F},L=function(){return i.useContext(w)};exports.BaseDrawer=m,exports.BaseModal=h,exports.ConfirmDialog=s,exports.Drawer=p,exports.FormDialog=F,exports.MenuDialog=g,exports.MenuDialogList=D,exports.Modal=E,exports.ModalsContext=w,exports.ModalsProvider=function(e){var n=e.children,o=e.modals,r=i.useMemo(function(){return new Set},[]),t=i.useState({modal:R}),l=t[0],c=t[1],s=i.useMemo(function(){var e=a({},j,o);return function(n){return void 0===n&&(n="modal"),e[n]||e.modal}},[o]),d=function(e,n){if(!n)return c({modal:e});c(function(o){var r;return a({},o,((r={})[n]=e,r))})},f=function(e){"function"==typeof e&&(e={component:e});var n=e.id,o=void 0===n?r.size+1:n,t=e.type,l=void 0===t?"modal":t,i=e.scope,a=void 0===i?"modal":i,c=e.component,s={id:o,props:u(e,B),type:l,scope:a,component:c,isOpen:!0};return r.add(s),d(s,a),o},m=function(e,n){try{var o,t=[].concat(Array.from(r)),l=t.filter(function(n){return n.id===e})[0];return l?Promise.resolve(null==(o=l.props)||null==o.onClose?void 0:o.onClose({force:n})).then(function(e){if(!1!==e){var n=t.filter(function(e){return e.scope===l.scope});d(1===n.length?a({},l,{isOpen:!1}):n.length>1?n[n.length-2]:{id:null,props:null,type:l.type},l.scope)}}):Promise.resolve()}catch(e){return Promise.reject(e)}},p={open:f,drawer:function(e){return f(a({},e,{type:"drawer"}))},alert:function(e){return f(a({},e,{scope:"alert",type:"alert",cancelProps:{display:"none"},confirmProps:{label:"OK"},leastDestructiveFocus:"confirm"}))},confirm:function(e){return f(a({},e,{scope:"alert",type:"confirm"}))},menu:function(e){return f(a({},e,{type:"menu"}))},form:function(e){return f(a({},e,{type:"form"}))},close:m,closeAll:function(){r.forEach(function(e){var n;return null==(n=e.props)||null==n.onClose?void 0:n.onClose({force:!0})}),r.clear(),d(R)}},v=i.useMemo(function(){return Object.entries(l).map(function(e){var n=e[0],o=e[1],t=o.component||s(o.type),l=o.props||{},c=l.title,f=l.body,p=l.children,v=u(l,P);/*#__PURE__*/return i.createElement(t,a({key:n,title:c,children:f||p},v,{isOpen:!!o.isOpen,onClose:function(){return m(o.id)},onCloseComplete:function(){return function(e){var n=[].concat(Array.from(r)),o=n.filter(function(n){return n.id===e})[0];r.delete(o),1===n.filter(function(e){return e.scope===o.scope}).length&&d(R,o.scope)}(o.id)}}))})},[l]);/*#__PURE__*/return i.createElement(w.Provider,{value:p},v,n)},exports.useModals=function(){return L()},exports.useModalsContext=L;
-//# sourceMappingURL=index.js.map
+'use strict';
+
+var React = require('react');
+var react = require('@chakra-ui/react');
+var reactUtils = require('@saas-ui/react-utils');
+var forms = require('@saas-ui/forms');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+// src/dialog.tsx
+var ConfirmDialog = (props) => {
+  const {
+    title,
+    cancelLabel = "Cancel",
+    confirmLabel = "Confirm",
+    cancelProps,
+    confirmProps,
+    buttonGroupProps,
+    isOpen,
+    closeOnCancel = true,
+    closeOnConfirm = true,
+    leastDestructiveFocus = "cancel",
+    onClose,
+    onCancel,
+    onConfirm,
+    children,
+    ...rest
+  } = props;
+  const cancelRef = React__namespace.useRef(null);
+  const confirmRef = React__namespace.useRef(null);
+  return /* @__PURE__ */ React__namespace.createElement(react.AlertDialog, {
+    isOpen,
+    onClose,
+    ...rest,
+    leastDestructiveRef: leastDestructiveFocus === "cancel" ? cancelRef : confirmRef
+  }, /* @__PURE__ */ React__namespace.createElement(react.AlertDialogOverlay, null, /* @__PURE__ */ React__namespace.createElement(react.AlertDialogContent, null, /* @__PURE__ */ React__namespace.createElement(react.AlertDialogHeader, null, title), /* @__PURE__ */ React__namespace.createElement(react.AlertDialogBody, null, children), /* @__PURE__ */ React__namespace.createElement(react.AlertDialogFooter, null, /* @__PURE__ */ React__namespace.createElement(react.ButtonGroup, {
+    ...buttonGroupProps
+  }, /* @__PURE__ */ React__namespace.createElement(react.Button, {
+    ref: cancelRef,
+    ...cancelProps,
+    onClick: () => {
+      onCancel == null ? void 0 : onCancel();
+      closeOnCancel && onClose();
+    }
+  }, (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel), /* @__PURE__ */ React__namespace.createElement(react.Button, {
+    ref: confirmRef,
+    ...confirmProps,
+    onClick: () => {
+      onConfirm == null ? void 0 : onConfirm();
+      closeOnConfirm && onClose();
+    }
+  }, (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel))))));
+};
+var BaseDrawer = (props) => {
+  const {
+    title,
+    children,
+    isOpen,
+    onClose,
+    hideCloseButton,
+    hideOverlay,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ React__namespace.createElement(react.Drawer, {
+    isOpen,
+    onClose,
+    ...rest
+  }, !hideOverlay && /* @__PURE__ */ React__namespace.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React__namespace.createElement(react.DrawerContent, null, /* @__PURE__ */ React__namespace.createElement(react.DrawerHeader, null, title), !hideCloseButton && /* @__PURE__ */ React__namespace.createElement(react.DrawerCloseButton, null), children));
+};
+var Drawer = (props) => {
+  const { footer, children, ...rest } = props;
+  return /* @__PURE__ */ React__namespace.createElement(BaseDrawer, {
+    ...rest
+  }, /* @__PURE__ */ React__namespace.createElement(react.DrawerBody, null, children), footer && /* @__PURE__ */ React__namespace.createElement(react.DrawerFooter, null, footer));
+};
+var BaseModal = (props) => {
+  const {
+    title,
+    footer,
+    children,
+    isOpen,
+    onClose,
+    hideCloseButton,
+    hideOverlay,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ React__namespace.createElement(react.Modal, {
+    isOpen,
+    onClose,
+    ...rest
+  }, !hideOverlay && /* @__PURE__ */ React__namespace.createElement(react.ModalOverlay, null), /* @__PURE__ */ React__namespace.createElement(react.ModalContent, null, title && /* @__PURE__ */ React__namespace.createElement(react.ModalHeader, null, title), !hideCloseButton && /* @__PURE__ */ React__namespace.createElement(react.ModalCloseButton, null), children, footer && /* @__PURE__ */ React__namespace.createElement(react.ModalFooter, null, footer)));
+};
+var Modal = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ React__namespace.createElement(BaseModal, {
+    ...rest
+  }, /* @__PURE__ */ React__namespace.createElement(react.ModalBody, null, children));
+};
+var [StylesProvider] = react.createStylesContext("SuiMenuDialog");
+var MenuDialog = (props) => {
+  const { onClose, onCloseComplete, ...rest } = props;
+  return /* @__PURE__ */ React__namespace.createElement(react.Menu, {
+    variant: "dialog",
+    onClose: () => {
+      onClose == null ? void 0 : onClose();
+      onCloseComplete == null ? void 0 : onCloseComplete();
+    },
+    ...rest
+  });
+};
+var MenuDialogList = react.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      rootProps,
+      title,
+      footer,
+      initialFocusRef,
+      hideCloseButton,
+      motionPreset,
+      ...rest
+    } = props;
+    const { isOpen, onClose, menuRef } = react.useMenuContext();
+    const { ref, ...ownProps } = react.useMenuList(rest, forwardedRef);
+    const styles = react.useMultiStyleConfig("Menu", props);
+    return /* @__PURE__ */ React__namespace.createElement(BaseModal, {
+      isOpen,
+      onClose,
+      initialFocusRef: initialFocusRef || menuRef,
+      title,
+      hideCloseButton,
+      motionPreset
+    }, /* @__PURE__ */ React__namespace.createElement(StylesProvider, {
+      value: styles
+    }, /* @__PURE__ */ React__namespace.createElement(react.chakra.div, {
+      ...ownProps,
+      ref,
+      __css: {
+        outline: 0,
+        maxHeight: "80vh",
+        overflowY: "auto",
+        ...styles.list,
+        boxShadow: "none",
+        border: 0
+      }
+    })), footer && /* @__PURE__ */ React__namespace.createElement(react.ModalFooter, null, footer));
+  }
+);
+var FormDialog = react.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__namespace.createElement(BaseModal, {
+      isOpen,
+      onClose,
+      ...rest
+    }, /* @__PURE__ */ React__namespace.createElement(forms.Form, {
+      ...formProps,
+      ref
+    }, (form) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(react.ModalBody, null, reactUtils.runIfFn(children, form) || /* @__PURE__ */ React__namespace.createElement(forms.Fields, {
+      schema,
+      fieldResolver,
+      focusFirstField: true
+    })), footer || /* @__PURE__ */ React__namespace.createElement(react.ModalFooter, null, /* @__PURE__ */ React__namespace.createElement(react.Button, {
+      variant: "ghost",
+      mr: 3,
+      onClick: onClose
+    }, cancelLabel), /* @__PURE__ */ React__namespace.createElement(forms.SubmitButton, null, submitLabel)))));
+  }
+);
+var ModalsContext = React__namespace.createContext(
+  null
+);
+var initialModalState = {
+  id: null,
+  props: null,
+  type: "modal"
+};
+var defaultModals = {
+  alert: ConfirmDialog,
+  confirm: ConfirmDialog,
+  drawer: Drawer,
+  modal: Modal,
+  menu: MenuDialog,
+  form: FormDialog
+};
+function ModalsProvider({ children, modals }) {
+  const _instances = React__namespace.useMemo(() => /* @__PURE__ */ new Set(), []);
+  const [activeModals, setActiveModals] = React__namespace.useState({
+    modal: initialModalState
+  });
+  const getModalComponent = React__namespace.useMemo(() => {
+    const _modals = {
+      ...defaultModals,
+      ...modals
+    };
+    return (type = "modal") => {
+      const component = _modals[type] || _modals.modal;
+      return component;
+    };
+  }, [modals]);
+  const setActiveModal = (modal, scope) => {
+    if (!scope) {
+      return setActiveModals({
+        modal
+      });
+    }
+    setActiveModals((prevState) => ({
+      ...prevState,
+      [scope]: modal
+    }));
+  };
+  const open = (options) => {
+    if (typeof options === "function") {
+      const component2 = options;
+      options = {
+        component: component2
+      };
+    }
+    const {
+      id = _instances.size + 1,
+      type = "modal",
+      scope = "modal",
+      component,
+      ...props
+    } = options;
+    const modal = {
+      id,
+      props,
+      type,
+      scope,
+      component,
+      isOpen: true
+    };
+    _instances.add(modal);
+    setActiveModal(modal, scope);
+    return id;
+  };
+  const drawer = (options) => {
+    return open({
+      ...options,
+      type: "drawer"
+    });
+  };
+  const alert = (options) => {
+    return open({
+      ...options,
+      scope: "alert",
+      type: "alert",
+      cancelProps: {
+        display: "none"
+      },
+      confirmProps: {
+        label: "OK"
+      },
+      leastDestructiveFocus: "confirm"
+    });
+  };
+  const confirm = (options) => {
+    return open({
+      ...options,
+      scope: "alert",
+      type: "confirm"
+    });
+  };
+  const menu = (options) => {
+    return open({
+      ...options,
+      type: "menu"
+    });
+  };
+  const form = (options) => {
+    return open({
+      ...options,
+      type: "form"
+    });
+  };
+  const close = async (id, force) => {
+    var _a, _b;
+    const modals2 = [...Array.from(_instances)];
+    const modal = modals2.filter((modal2) => modal2.id === id)[0];
+    if (!modal) {
+      return;
+    }
+    const shouldClose = await ((_b = (_a = modal.props) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a, { force }));
+    if (shouldClose === false) {
+      return;
+    }
+    const scoped = modals2.filter(({ scope }) => scope === modal.scope);
+    if (scoped.length === 1) {
+      setActiveModal(
+        {
+          ...modal,
+          isOpen: false
+        },
+        modal.scope
+      );
+    } else if (scoped.length > 1) {
+      setActiveModal(scoped[scoped.length - 2], modal.scope);
+    } else {
+      setActiveModal(
+        {
+          id: null,
+          props: null,
+          type: modal.type
+        },
+        modal.scope
+      );
+    }
+  };
+  const closeComplete = (id) => {
+    const modals2 = [...Array.from(_instances)];
+    const modal = modals2.filter((modal2) => modal2.id === id)[0];
+    _instances.delete(modal);
+    const scoped = modals2.filter(({ scope }) => scope === modal.scope);
+    if (scoped.length === 1) {
+      setActiveModal(initialModalState, modal.scope);
+    }
+  };
+  const closeAll = () => {
+    _instances.forEach((modal) => {
+      var _a, _b;
+      return (_b = (_a = modal.props) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a, { force: true });
+    });
+    _instances.clear();
+    setActiveModal(initialModalState);
+  };
+  const context = {
+    open,
+    drawer,
+    alert,
+    confirm,
+    menu,
+    form,
+    close,
+    closeAll
+  };
+  const content = React__namespace.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__namespace.createElement(Component, {
+        key: scope,
+        title,
+        children: body || children2,
+        ...props,
+        isOpen: !!config.isOpen,
+        onClose: () => close(config.id),
+        onCloseComplete: () => closeComplete(config.id)
+      });
+    }),
+    [activeModals]
+  );
+  return /* @__PURE__ */ React__namespace.createElement(ModalsContext.Provider, {
+    value: context
+  }, content, children);
+}
+var useModalsContext = () => React__namespace.useContext(ModalsContext);
+var useModals = () => {
+  return useModalsContext();
+};
+
+exports.BaseDrawer = BaseDrawer;
+exports.BaseModal = BaseModal;
+exports.ConfirmDialog = ConfirmDialog;
+exports.Drawer = Drawer;
+exports.FormDialog = FormDialog;
+exports.MenuDialog = MenuDialog;
+exports.MenuDialogList = MenuDialogList;
+exports.Modal = Modal;
+exports.ModalsContext = ModalsContext;
+exports.ModalsProvider = ModalsProvider;
+exports.useModals = useModals;
+exports.useModalsContext = useModalsContext;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map