@saas-ui/modals 0.2.1 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @saas-ui/modals
2
2
 
3
+ ## 0.2.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [385b760]
8
+ - @saas-ui/forms@0.3.0
9
+
10
+ ## 0.2.4
11
+
12
+ ### Patch Changes
13
+
14
+ - 0456a9f: Improved modals typings
15
+
16
+ ## 0.2.3
17
+
18
+ ### Patch Changes
19
+
20
+ - 65cd402: Added new FormDialog component
21
+ - @saas-ui/forms@0.2.5
22
+
23
+ ## 0.2.2
24
+
25
+ ### Patch Changes
26
+
27
+ - b3159a7: Only publish dist and src files
28
+ - Updated dependencies [b3159a7]
29
+ - @saas-ui/button@0.2.1
30
+
3
31
  ## 0.2.1
4
32
 
5
33
  ### Patch Changes
package/dist/form.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import * as React from 'react';
2
+ import { FormProps } from '@saas-ui/forms';
3
+ import { BaseModalProps } from './modal';
4
+ export interface FormDialogProps extends Omit<BaseModalProps, 'children'>, Pick<FormProps, 'schema' | 'defaultValues' | 'onSubmit' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError'> {
5
+ /**
6
+ * The modal footer, will be wrapped with `ModalFooter`.
7
+ * Defaults to a cancel and submit button.
8
+ */
9
+ footer?: React.ReactNode;
10
+ /**
11
+ * The cancel button label
12
+ * @default "Cancel"
13
+ */
14
+ cancelLabel?: React.ReactNode;
15
+ /**
16
+ * The submit button label
17
+ * @default "Submit"
18
+ */
19
+ submitLabel?: React.ReactNode;
20
+ /**
21
+ * If no children are passed, this will auto render fields based on the supplied schema.
22
+ */
23
+ children?: React.ReactNode;
24
+ }
25
+ export declare const FormDialog: React.FC<FormDialogProps>;
26
+ //# sourceMappingURL=form.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAA8B,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAGtE,OAAO,EAAa,cAAc,EAAE,MAAM,SAAS,CAAA;AAEnD,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EACtC,IAAI,CACF,SAAS,EACP,QAAQ,GACR,eAAe,GACf,UAAU,GACV,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,kBAAkB,GAClB,kBAAkB,GAClB,2BAA2B,GAC3B,cAAc,GACd,YAAY,CACf;IACH;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyDhD,CAAA"}
package/dist/index.d.ts CHANGED
@@ -2,5 +2,6 @@ export * from './dialog';
2
2
  export * from './drawer';
3
3
  export * from './modal';
4
4
  export * from './menu';
5
+ export * from './form';
5
6
  export * from './provider';
6
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA"}
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- var e=require("react"),n=require("@chakra-ui/react"),t=require("@saas-ui/button");function r(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,n}var o=/*#__PURE__*/r(e);function l(){return l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},l.apply(this,arguments)}function a(e,n){if(null==e)return{};var t,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n.indexOf(t=l[r])>=0||(o[t]=e[t]);return o}var i=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],u=function(e){var r=e.title,u=e.cancelProps,c=e.confirmProps,s=e.buttonGroupProps,d=e.isOpen,f=e.closeOnCancel,p=void 0===f||f,m=e.closeOnConfirm,v=void 0===m||m,C=e.leastDestructiveFocus,h=void 0===C?"cancel":C,O=e.onClose,E=e.onCancel,y=e.onConfirm,M=e.children,D=a(e,i),P=o.useRef(null),g=o.useRef(null);/*#__PURE__*/return o.createElement(n.AlertDialog,l({isOpen:d,onClose:O},D,{leastDestructiveRef:"cancel"===h?P:g}),/*#__PURE__*/o.createElement(n.AlertDialogOverlay,null,/*#__PURE__*/o.createElement(n.AlertDialogContent,null,/*#__PURE__*/o.createElement(n.AlertDialogHeader,null,r),/*#__PURE__*/o.createElement(n.AlertDialogBody,null,M),/*#__PURE__*/o.createElement(n.AlertDialogFooter,null,/*#__PURE__*/o.createElement(t.ButtonGroup,s,/*#__PURE__*/o.createElement(t.Button,l({ref:P},u,{onClick:function(){null==E||E(),p&&O()}}),"Cancel"),/*#__PURE__*/o.createElement(t.Button,l({ref:g},c,{onClick:function(){null==y||y(),v&&O()}}),"Confirm"))))))},c=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],s=["footer","children"],d=function(e){var t=e.title,r=e.children,i=e.isOpen,u=e.onClose,s=e.hideCloseButton,d=e.hideOverlay,f=a(e,c);/*#__PURE__*/return o.createElement(n.Drawer,l({isOpen:i,onClose:u},f),!d&&/*#__PURE__*/o.createElement(n.DrawerOverlay,null),/*#__PURE__*/o.createElement(n.DrawerContent,null,/*#__PURE__*/o.createElement(n.DrawerHeader,null,t),!s&&/*#__PURE__*/o.createElement(n.DrawerCloseButton,null),r))},f=function(e){var t=e.footer,r=e.children,l=a(e,s);/*#__PURE__*/return o.createElement(d,l,/*#__PURE__*/o.createElement(n.DrawerBody,null,r),t&&/*#__PURE__*/o.createElement(n.DrawerFooter,null,t))},p=["title","footer","children","isOpen","onClose","hideCloseButton","hideOverlay"],m=["children","footer"],v=function(e){var t=e.title,r=e.footer,i=e.children,u=e.isOpen,c=e.onClose,s=e.hideCloseButton,d=e.hideOverlay,f=a(e,p);/*#__PURE__*/return o.createElement(n.Modal,l({isOpen:u,onClose:c},f),!d&&/*#__PURE__*/o.createElement(n.ModalOverlay,null),/*#__PURE__*/o.createElement(n.ModalContent,null,t&&/*#__PURE__*/o.createElement(n.ModalHeader,null,t),!s&&/*#__PURE__*/o.createElement(n.ModalCloseButton,null),i,r&&/*#__PURE__*/o.createElement(n.ModalFooter,null,r)))},C=function(e){var t=e.children,r=a(e,m);/*#__PURE__*/return o.createElement(v,r,/*#__PURE__*/o.createElement(n.ModalBody,null,t))},h=["children","footer","isOpen","onClose"],O=["descendants"],E=["rootProps"],y=function(e){var t=e.children,r=e.footer,i=e.isOpen,u=e.onClose,c=a(e,h),s=n.useMultiStyleConfig("Menu",e),d=n.useTheme(),f=n.useMenu({onClose:u,autoSelect:!0,defaultIsOpen:!0,closeOnBlur:!1,direction:d.direction}),p=f.descendants,m=a(f,O),C=o.useMemo(function(){return m},[m]);return o.useEffect(function(){m.openAndFocusFirstItem()},[e.isOpen]),/*#__PURE__*/o.createElement(v,l({isOpen:i,onClose:u,initialFocusRef:m.menuRef},c),/*#__PURE__*/o.createElement(n.MenuDescendantsProvider,{value:p},/*#__PURE__*/o.createElement(n.MenuProvider,{value:C},/*#__PURE__*/o.createElement(n.StylesProvider,{value:s},t))),r&&/*#__PURE__*/o.createElement(n.ModalFooter,null,r))};y.defaultProps={variant:"dialog"};var M=n.forwardRef(function(e,t){var r=a(e,E),i=n.useMenuList(r,t),u=n.useStyles();/*#__PURE__*/return o.createElement(n.chakra.div,l({},i,{__css:l({outline:0,maxHeight:"80vh",overflowY:"auto"},u.list,{boxShadow:"none",border:0})}))}),D=["id","type","scope"],P=["title","children"],g=o.createContext({}),b={id:null,props:null,type:"modal"},w={alert:u,confirm:u,drawer:f,modal:C,menu:y},x=function(){return o.useContext(g)};exports.BaseDrawer=d,exports.BaseModal=v,exports.ConfirmDialog=u,exports.Drawer=f,exports.MenuDialog=y,exports.MenuDialogList=M,exports.Modal=C,exports.ModalsContext=g,exports.ModalsProvider=function(e){var n=e.children,t=e.modals,r=o.useMemo(function(){return new Set},[]),i=o.useState({modal:b}),u=i[0],c=i[1],s=o.useMemo(function(){var e=l({},w,t);return function(n){return void 0===n&&(n="modal"),e[n]||e.modal}},[t]),d=function(e,n){if(!n)return c({modal:e});c(function(t){var r;return l({},t,((r={})[n]=e,r))})},f=function(e){var n=e.id,t=void 0===n?r.size+1:n,o=e.type,i=void 0===o?"modal":o,u=e.scope,c=void 0===u?"modal":u,s=a(e,D),f={id:t,props:l({},s,{children:s.body||s.children}),type:i,scope:c};return r.add(f),d(f,c),t},p=function(e,n){try{var t,o=[].concat(r),l=o.filter(function(n){return n.id===e})[0];return l?Promise.resolve(null==(t=l.props)||null==t.onClose?void 0:t.onClose({force:n})).then(function(e){if(!1!==e){r.delete(l);var n=o.filter(function(e){return e.scope===l.scope});d(n[n.length-2]||{id:null,props:null,type:l.type},l.scope)}}):Promise.resolve()}catch(e){return Promise.reject(e)}},m={open:f,drawer:function(e){return f(l({},e,{type:"drawer"}))},alert:function(e){return f(l({},e,{scope:"alert",type:"alert",cancelProps:{display:"none"},confirmProps:{label:"OK"},leastDestructiveFocus:"confirm"}))},confirm:function(e){return f(l({},e,{scope:"alert",type:"confirm"}))},menu:function(e){return f(l({},e,{type:"menu"}))},close:p,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(b)}},v=Object.entries(u).map(function(e){var n=e[0],t=e[1],i=s(t.type),u=t.props||{},c=u.title,d=u.children,f=a(u,P);/*#__PURE__*/return o.createElement(i,l({key:n,title:c,children:d},f,{isOpen:!(!t.id||!r.size),onClose:function(){return p(t.id)}}))});/*#__PURE__*/return o.createElement(g.Provider,{value:m},v,n)},exports.useModals=function(){return x()},exports.useModalsContext=x;
1
+ var e=require("react"),r=require("@chakra-ui/react"),t=require("@saas-ui/button"),n=require("@saas-ui/forms");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var l=/*#__PURE__*/o(e);function a(){return a=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},a.apply(this,arguments)}function i(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(o[t]=e[t]);return o}var u=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],c=function(e){var n=e.title,o=e.cancelProps,c=e.confirmProps,s=e.buttonGroupProps,d=e.isOpen,f=e.closeOnCancel,m=void 0===f||f,p=e.closeOnConfirm,v=void 0===p||p,h=e.leastDestructiveFocus,C=void 0===h?"cancel":h,E=e.onClose,O=e.onCancel,y=e.onConfirm,M=e.children,b=i(e,u),D=l.useRef(null),g=l.useRef(null);/*#__PURE__*/return l.createElement(r.AlertDialog,a({isOpen:d,onClose:E},b,{leastDestructiveRef:"cancel"===C?D:g}),/*#__PURE__*/l.createElement(r.AlertDialogOverlay,null,/*#__PURE__*/l.createElement(r.AlertDialogContent,null,/*#__PURE__*/l.createElement(r.AlertDialogHeader,null,n),/*#__PURE__*/l.createElement(r.AlertDialogBody,null,M),/*#__PURE__*/l.createElement(r.AlertDialogFooter,null,/*#__PURE__*/l.createElement(t.ButtonGroup,s,/*#__PURE__*/l.createElement(t.Button,a({ref:D},o,{onClick:function(){null==O||O(),m&&E()}}),"Cancel"),/*#__PURE__*/l.createElement(t.Button,a({ref:g},c,{onClick:function(){null==y||y(),v&&E()}}),"Confirm"))))))},s=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],d=["footer","children"],f=function(e){var t=e.title,n=e.children,o=e.isOpen,u=e.onClose,c=e.hideCloseButton,d=e.hideOverlay,f=i(e,s);/*#__PURE__*/return l.createElement(r.Drawer,a({isOpen:o,onClose:u},f),!d&&/*#__PURE__*/l.createElement(r.DrawerOverlay,null),/*#__PURE__*/l.createElement(r.DrawerContent,null,/*#__PURE__*/l.createElement(r.DrawerHeader,null,t),!c&&/*#__PURE__*/l.createElement(r.DrawerCloseButton,null),n))},m=function(e){var t=e.footer,n=e.children,o=i(e,d);/*#__PURE__*/return l.createElement(f,o,/*#__PURE__*/l.createElement(r.DrawerBody,null,n),t&&/*#__PURE__*/l.createElement(r.DrawerFooter,null,t))},p=["title","footer","children","isOpen","onClose","hideCloseButton","hideOverlay"],v=["children","footer"],h=function(e){var t=e.title,n=e.footer,o=e.children,u=e.isOpen,c=e.onClose,s=e.hideCloseButton,d=e.hideOverlay,f=i(e,p);/*#__PURE__*/return l.createElement(r.Modal,a({isOpen:u,onClose:c},f),!d&&/*#__PURE__*/l.createElement(r.ModalOverlay,null),/*#__PURE__*/l.createElement(r.ModalContent,null,t&&/*#__PURE__*/l.createElement(r.ModalHeader,null,t),!s&&/*#__PURE__*/l.createElement(r.ModalCloseButton,null),o,n&&/*#__PURE__*/l.createElement(r.ModalFooter,null,n)))},C=function(e){var t=e.children,n=i(e,v);/*#__PURE__*/return l.createElement(h,n,/*#__PURE__*/l.createElement(r.ModalBody,null,t))},E=["children","footer","isOpen","onClose"],O=["descendants"],y=["rootProps"],M=function(e){var t=e.children,n=e.footer,o=e.isOpen,u=e.onClose,c=i(e,E),s=r.useMultiStyleConfig("Menu",e),d=r.useTheme(),f=r.useMenu({onClose:u,autoSelect:!0,defaultIsOpen:!0,closeOnBlur:!1,direction:d.direction}),m=f.descendants,p=i(f,O),v=l.useMemo(function(){return p},[p]);return l.useEffect(function(){p.openAndFocusFirstItem()},[e.isOpen]),/*#__PURE__*/l.createElement(h,a({isOpen:o,onClose:u,initialFocusRef:p.menuRef},c),/*#__PURE__*/l.createElement(r.MenuDescendantsProvider,{value:m},/*#__PURE__*/l.createElement(r.MenuProvider,{value:v},/*#__PURE__*/l.createElement(r.StylesProvider,{value:s},t))),n&&/*#__PURE__*/l.createElement(r.ModalFooter,null,n))};M.defaultProps={variant:"dialog"};var b=r.forwardRef(function(e,t){var n=i(e,y),o=r.useMenuList(n,t),u=r.useStyles();/*#__PURE__*/return l.createElement(r.chakra.div,a({},o,{__css:a({outline:0,maxHeight:"80vh",overflowY:"auto"},u.list,{boxShadow:"none",border:0})}))}),D=["children","schema","defaultValues","onSubmit","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","cancelLabel","submitLabel","footer","isOpen","onClose"],g=function(e){var o=e.children,u=e.schema,c=e.defaultValues,s=e.onSubmit,d=e.reValidateMode,f=e.shouldFocusError,m=void 0===f||f,p=e.shouldUnregister,v=e.shouldUseNativeValidation,C=e.criteriaMode,E=e.delayError,O=e.cancelLabel,y=e.submitLabel,M=e.footer,b=e.isOpen,g=e.onClose,P=i(e,D),x={schema:u,defaultValues:c,onSubmit:s,reValidateMode:d,shouldFocusError:m,shouldUnregister:p,shouldUseNativeValidation:v,criteriaMode:C,delayError:E},w=l.useRef(null);/*#__PURE__*/return l.createElement(h,a({isOpen:b,onClose:g,initialFocusRef:w},P),/*#__PURE__*/l.createElement(n.Form,x,/*#__PURE__*/l.createElement(r.ModalBody,null,o||/*#__PURE__*/l.createElement(n.Fields,{schema:u})),M||/*#__PURE__*/l.createElement(r.ModalFooter,null,/*#__PURE__*/l.createElement(t.Button,{variant:"ghost",mr:3,onClick:g},O||"Cancel"),/*#__PURE__*/l.createElement(n.SubmitButton,{ref:w},y||"Submit"))))},P=["id","type","scope"],x=["title","children"],w=l.createContext({}),B={id:null,props:null,type:"modal"},F={alert:c,confirm:c,drawer:m,modal:C,menu:M,form:g},S=function(){return l.useContext(w)};exports.BaseDrawer=f,exports.BaseModal=h,exports.ConfirmDialog=c,exports.Drawer=m,exports.FormDialog=g,exports.MenuDialog=M,exports.MenuDialogList=b,exports.Modal=C,exports.ModalsContext=w,exports.ModalsProvider=function(e){var r=e.children,t=e.modals,n=l.useMemo(function(){return new Set},[]),o=l.useState({modal:B}),u=o[0],c=o[1],s=l.useMemo(function(){var e=a({},F,t);return function(r){return void 0===r&&(r="modal"),e[r]||e.modal}},[t]),d=function(e,r){if(!r)return c({modal:e});c(function(t){var n;return a({},t,((n={})[r]=e,n))})},f=function(e){var r=e.id,t=void 0===r?n.size+1:r,o=e.type,l=void 0===o?"modal":o,a=e.scope,u=void 0===a?"modal":a,c={id:t,props:i(e,P),type:l,scope:u};return n.add(c),d(c,u),t},m=function(e,r){try{var t,o=[].concat(n),l=o.filter(function(r){return r.id===e})[0];return l?Promise.resolve(null==(t=l.props)||null==t.onClose?void 0:t.onClose({force:r})).then(function(e){if(!1!==e){n.delete(l);var r=o.filter(function(e){return e.scope===l.scope});d(r[r.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(){n.forEach(function(e){var r;return null==(r=e.props)||null==r.onClose?void 0:r.onClose({force:!0})}),n.clear(),d(B)}},v=Object.entries(u).map(function(e){var r=e[0],t=e[1],o=s(t.type),u=t.props||{},c=u.title,d=u.children,f=i(u,x);/*#__PURE__*/return l.createElement(o,a({key:r,title:c,children:d},f,{isOpen:!(!t.id||!n.size),onClose:function(){return m(t.id)}}))});/*#__PURE__*/return l.createElement(w.Provider,{value:p},v,r)},exports.useModals=function(){return S()},exports.useModalsContext=S;
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@saas-ui/button'\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 Cancel\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n Confirm\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, footer, ...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 MenuDescendantsProvider,\n MenuProvider,\n MenuListProps,\n useMenu,\n useMenuList,\n chakra,\n StylesProvider,\n useMultiStyleConfig,\n useTheme,\n useStyles,\n forwardRef,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\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 { children, footer, isOpen, onClose, ...rest } = props\n\n const styles = useMultiStyleConfig('Menu', props)\n const { direction } = useTheme()\n const { descendants, ...ctx } = useMenu({\n onClose,\n autoSelect: true,\n defaultIsOpen: true,\n closeOnBlur: false,\n direction,\n })\n const context = React.useMemo(() => ctx, [ctx])\n\n React.useEffect(() => {\n ctx.openAndFocusFirstItem()\n }, [props.isOpen])\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={ctx.menuRef}\n {...rest}\n >\n <MenuDescendantsProvider value={descendants}>\n <MenuProvider value={context}>\n <StylesProvider value={styles}>{children}</StylesProvider>\n </MenuProvider>\n </MenuDescendantsProvider>\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n}\n\nMenuDialog.defaultProps = {\n variant: 'dialog',\n}\n\nexport const MenuDialogList = forwardRef<MenuListProps, 'div'>((props, ref) => {\n const { rootProps, ...rest } = props\n\n const ownProps = useMenuList(rest, ref) as any\n\n const styles = useStyles()\n\n return (\n <chakra.div\n {...ownProps}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n }}\n />\n )\n})\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'\n\nexport interface ModalsContextValue {\n open?: (options: OpenOptions) => ModalId\n drawer?: (options: ModalOptions) => ModalId\n alert?: (options: ModalOptions) => ModalId\n confirm?: (options: ModalOptions) => ModalId\n menu?: (options: ModalOptions) => ModalId\n close?: (id: ModalId) => void\n closeAll?: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue>({})\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<\n (BaseModalProps & DrawerProps & ConfirmDialogProps) & {\n body?: React.ReactNode\n },\n 'onClose' | 'isOpen' | 'children'\n > {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n children?: React.ReactNode\n}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes | string\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu'\n\nexport interface ModalConfig {\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?: ModalOptions | 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 | string\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}\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 = {\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 = (options: OpenOptions): ModalId => {\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n ...props\n } = options\n\n const modal: ModalConfig = {\n id,\n props: {\n ...props,\n children: props.body || props.children,\n },\n type,\n scope,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ModalOptions): 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: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n type: 'menu',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [..._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 _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n setActiveModal(\n scoped[scoped.length - 2] || {\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 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 close,\n closeAll,\n }\n\n const content = Object.entries(activeModals).map(([scope, config]) => {\n const Component = getModalComponent(config.type)\n\n const { title, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={children}\n {...props}\n isOpen={!!(config.id && _instances.size)}\n onClose={() => close(config.id)}\n />\n )\n })\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n React.useContext(ModalsContext)\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","ModalFooter","Modal","ModalBody","MenuDialog","styles","useMultiStyleConfig","useTheme","useMenu","autoSelect","defaultIsOpen","closeOnBlur","direction","descendants","ctx","context","useMemo","useEffect","openAndFocusFirstItem","initialFocusRef","menuRef","MenuDescendantsProvider","value","MenuProvider","StylesProvider","defaultProps","variant","MenuDialogList","forwardRef","rootProps","ownProps","useMenuList","useStyles","chakra","div","__css","outline","maxHeight","overflowY","list","boxShadow","border","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","menu","useModalsContext","useContext","modals","_instances","Set","useState","activeModals","setActiveModals","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","body","add","close","force","filter","_modal$props","shouldClose","scoped","length","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@saas-ui/button'\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 Cancel\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n Confirm\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, footer, ...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 MenuDescendantsProvider,\n MenuProvider,\n MenuListProps,\n useMenu,\n useMenuList,\n chakra,\n StylesProvider,\n useMultiStyleConfig,\n useTheme,\n useStyles,\n forwardRef,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\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 { children, footer, isOpen, onClose, ...rest } = props\n\n const styles = useMultiStyleConfig('Menu', props)\n const { direction } = useTheme()\n const { descendants, ...ctx } = useMenu({\n onClose,\n autoSelect: true,\n defaultIsOpen: true,\n closeOnBlur: false,\n direction,\n })\n const context = React.useMemo(() => ctx, [ctx])\n\n React.useEffect(() => {\n ctx.openAndFocusFirstItem()\n }, [props.isOpen])\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={ctx.menuRef}\n {...rest}\n >\n <MenuDescendantsProvider value={descendants}>\n <MenuProvider value={context}>\n <StylesProvider value={styles}>{children}</StylesProvider>\n </MenuProvider>\n </MenuDescendantsProvider>\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n}\n\nMenuDialog.defaultProps = {\n variant: 'dialog',\n}\n\nexport const MenuDialogList = forwardRef<MenuListProps, 'div'>((props, ref) => {\n const { rootProps, ...rest } = props\n\n const ownProps = useMenuList(rest, ref) as any\n\n const styles = useStyles()\n\n return (\n <chakra.div\n {...ownProps}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n }}\n />\n )\n})\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter } from '@chakra-ui/react'\n\nimport { Form, Fields, SubmitButton, FormProps } from '@saas-ui/forms'\nimport { Button } from '@saas-ui/button'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps\n extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps,\n | 'schema'\n | 'defaultValues'\n | 'onSubmit'\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\nexport const FormDialog: React.FC<FormDialogProps> = (props) => {\n const {\n children,\n schema,\n defaultValues,\n onSubmit,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n cancelLabel,\n submitLabel,\n footer,\n isOpen,\n onClose,\n ...rest\n } = props\n\n const formProps = {\n schema,\n defaultValues,\n onSubmit,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n const initialRef = React.useRef<HTMLButtonElement | null>(null)\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialRef}\n {...rest}\n >\n <Form {...formProps}>\n <ModalBody>{children || <Fields schema={schema} />}</ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button variant=\"ghost\" mr={3} onClick={onClose}>\n {cancelLabel || 'Cancel'}\n </Button>\n <SubmitButton ref={initialRef}>\n {submitLabel || 'Submit'}\n </SubmitButton>\n </ModalFooter>\n )}\n </Form>\n </BaseModal>\n )\n}\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>({})\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 | string\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu'\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 | string\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 = {\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 ModalOptions>(options: T): ModalId => {\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n ...props\n } = options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\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 = [..._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 _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n setActiveModal(\n scoped[scoped.length - 2] || {\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 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 = Object.entries(activeModals).map(([scope, config]) => {\n const Component = getModalComponent(config.type)\n\n const { title, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={children}\n {...props}\n isOpen={!!(config.id && _instances.size)}\n onClose={() => close(config.id)}\n />\n )\n })\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n React.useContext(ModalsContext)\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","ModalFooter","Modal","ModalBody","MenuDialog","styles","useMultiStyleConfig","useTheme","useMenu","autoSelect","defaultIsOpen","closeOnBlur","direction","descendants","ctx","context","useMemo","useEffect","openAndFocusFirstItem","initialFocusRef","menuRef","MenuDescendantsProvider","value","MenuProvider","StylesProvider","defaultProps","variant","MenuDialogList","forwardRef","rootProps","ownProps","useMenuList","useStyles","chakra","div","__css","outline","maxHeight","overflowY","list","boxShadow","border","FormDialog","schema","defaultValues","onSubmit","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","cancelLabel","submitLabel","formProps","initialRef","Form","Fields","mr","SubmitButton","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","menu","form","useModalsContext","useContext","modals","_instances","Set","useState","activeModals","setActiveModals","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","add","close","force","filter","_modal$props","shouldClose","scoped","length","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import*as e from"react";import{AlertDialog as n,AlertDialogOverlay as l,AlertDialogContent as t,AlertDialogHeader as r,AlertDialogBody as o,AlertDialogFooter as c,Drawer as s,DrawerOverlay as a,DrawerContent as i,DrawerHeader as u,DrawerCloseButton as m,DrawerBody as p,DrawerFooter as d,Modal as f,ModalOverlay as C,ModalContent as h,ModalHeader as E,ModalCloseButton as O,ModalFooter as v,ModalBody as y,forwardRef as b,useMenuList as P,useStyles as w,chakra as g,useMultiStyleConfig as x,useTheme as F,useMenu as k,MenuDescendantsProvider as B,MenuProvider as D,StylesProvider as M}from"@chakra-ui/react";import{ButtonGroup as R,Button as j}from"@saas-ui/button";function L(){return L=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var l=arguments[n];for(var t in l)Object.prototype.hasOwnProperty.call(l,t)&&(e[t]=l[t])}return e},L.apply(this,arguments)}function S(e,n){if(null==e)return{};var l,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)n.indexOf(l=o[t])>=0||(r[l]=e[l]);return r}const z=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],A=s=>{const{title:a,cancelLabel:i="Cancel",confirmLabel:u="Confirm",cancelProps:m,confirmProps:p,buttonGroupProps:d,isOpen:f,closeOnCancel:C=!0,closeOnConfirm:h=!0,leastDestructiveFocus:E="cancel",onClose:O,onCancel:v,onConfirm:y,children:b}=s,P=S(s,z),w=e.useRef(null),g=e.useRef(null);/*#__PURE__*/return e.createElement(n,L({isOpen:f,onClose:O},P,{leastDestructiveRef:"cancel"===E?w:g}),/*#__PURE__*/e.createElement(l,null,/*#__PURE__*/e.createElement(t,null,/*#__PURE__*/e.createElement(r,null,a),/*#__PURE__*/e.createElement(o,null,b),/*#__PURE__*/e.createElement(c,null,/*#__PURE__*/e.createElement(R,d,/*#__PURE__*/e.createElement(j,L({ref:w},m,{onClick:()=>{null==v||v(),C&&O()}}),"Cancel"),/*#__PURE__*/e.createElement(j,L({ref:g},p,{onClick:()=>{null==y||y(),h&&O()}}),"Confirm"))))))},G=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],I=["footer","children"],_=n=>{const{title:l,children:t,isOpen:r,onClose:o,hideCloseButton:c,hideOverlay:p}=n,d=S(n,G);/*#__PURE__*/return e.createElement(s,L({isOpen:r,onClose:o},d),!p&&/*#__PURE__*/e.createElement(a,null),/*#__PURE__*/e.createElement(i,null,/*#__PURE__*/e.createElement(u,null,l),!c&&/*#__PURE__*/e.createElement(m,null),t))},H=n=>{const{footer:l,children:t}=n,r=S(n,I);/*#__PURE__*/return e.createElement(_,r,/*#__PURE__*/e.createElement(p,null,t),l&&/*#__PURE__*/e.createElement(d,null,l))},K=["title","footer","children","isOpen","onClose","hideCloseButton","hideOverlay"],Y=["children","footer"],q=n=>{const{title:l,footer:t,children:r,isOpen:o,onClose:c,hideCloseButton:s,hideOverlay:a}=n,i=S(n,K);/*#__PURE__*/return e.createElement(f,L({isOpen:o,onClose:c},i),!a&&/*#__PURE__*/e.createElement(C,null),/*#__PURE__*/e.createElement(h,null,l&&/*#__PURE__*/e.createElement(E,null,l),!s&&/*#__PURE__*/e.createElement(O,null),r,t&&/*#__PURE__*/e.createElement(v,null,t)))},J=n=>{const{children:l}=n,t=S(n,Y);/*#__PURE__*/return e.createElement(q,t,/*#__PURE__*/e.createElement(y,null,l))},N=["children","footer","isOpen","onClose"],Q=["descendants"],T=["rootProps"],U=n=>{const{children:l,footer:t,isOpen:r,onClose:o}=n,c=S(n,N),s=x("Menu",n),{direction:a}=F(),i=k({onClose:o,autoSelect:!0,defaultIsOpen:!0,closeOnBlur:!1,direction:a}),{descendants:u}=i,m=S(i,Q),p=e.useMemo(()=>m,[m]);return e.useEffect(()=>{m.openAndFocusFirstItem()},[n.isOpen]),/*#__PURE__*/e.createElement(q,L({isOpen:r,onClose:o,initialFocusRef:m.menuRef},c),/*#__PURE__*/e.createElement(B,{value:u},/*#__PURE__*/e.createElement(D,{value:p},/*#__PURE__*/e.createElement(M,{value:s},l))),t&&/*#__PURE__*/e.createElement(v,null,t))};U.defaultProps={variant:"dialog"};const V=b((n,l)=>{const t=S(n,T),r=P(t,l),o=w();/*#__PURE__*/return e.createElement(g.div,L({},r,{__css:L({outline:0,maxHeight:"80vh",overflowY:"auto"},o.list,{boxShadow:"none",border:0})}))}),W=["id","type","scope"],X=["title","children"],Z=e.createContext({}),$={id:null,props:null,type:"modal"},ee={alert:A,confirm:A,drawer:H,modal:J,menu:U};function ne({children:n,modals:l}){const t=e.useMemo(()=>new Set,[]),[r,o]=e.useState({modal:$}),c=e.useMemo(()=>{const e=L({},ee,l);return(n="modal")=>e[n]||e.modal},[l]),s=(e,n)=>{if(!n)return o({modal:e});o(l=>L({},l,{[n]:e}))},a=e=>{const{id:n=t.size+1,type:l="modal",scope:r="modal"}=e,o=S(e,W),c={id:n,props:L({},o,{children:o.body||o.children}),type:l,scope:r};return t.add(c),s(c,r),n},i=async(e,n)=>{var l;const r=[...t],o=r.filter(n=>n.id===e)[0];if(!o)return;if(!1===await(null==(l=o.props)||null==l.onClose?void 0:l.onClose({force:n})))return;t.delete(o);const c=r.filter(({scope:e})=>e===o.scope);s(c[c.length-2]||{id:null,props:null,type:o.type},o.scope)},u={open:a,drawer:e=>a(L({},e,{type:"drawer"})),alert:e=>a(L({},e,{scope:"alert",type:"alert",cancelProps:{display:"none"},confirmProps:{label:"OK"},leastDestructiveFocus:"confirm"})),confirm:e=>a(L({},e,{scope:"alert",type:"confirm"})),menu:e=>a(L({},e,{type:"menu"})),close:i,closeAll:()=>{t.forEach(e=>{var n;return null==(n=e.props)||null==n.onClose?void 0:n.onClose({force:!0})}),t.clear(),s($)}},m=Object.entries(r).map(([n,l])=>{const r=c(l.type),o=l.props||{},{title:s,children:a}=o,u=S(o,X);/*#__PURE__*/return e.createElement(r,L({key:n,title:s,children:a},u,{isOpen:!(!l.id||!t.size),onClose:()=>i(l.id)}))});/*#__PURE__*/return e.createElement(Z.Provider,{value:u},m,n)}const le=()=>e.useContext(Z),te=()=>le();export{_ as BaseDrawer,q as BaseModal,A as ConfirmDialog,H as Drawer,U as MenuDialog,V as MenuDialogList,J as Modal,Z as ModalsContext,ne as ModalsProvider,te as useModals,le as useModalsContext};
1
+ import*as e from"react";import{AlertDialog as l,AlertDialogOverlay as n,AlertDialogContent as t,AlertDialogHeader as r,AlertDialogBody as o,AlertDialogFooter as a,Drawer as c,DrawerOverlay as s,DrawerContent as i,DrawerHeader as u,DrawerCloseButton as m,DrawerBody as d,DrawerFooter as p,Modal as f,ModalOverlay as h,ModalContent as E,ModalHeader as C,ModalCloseButton as O,ModalFooter as v,ModalBody as y,forwardRef as b,useMenuList as P,useStyles as M,chakra as g,useMultiStyleConfig as F,useTheme as w,useMenu as V,MenuDescendantsProvider as L,MenuProvider as S,StylesProvider as R}from"@chakra-ui/react";import{ButtonGroup as k,Button as x}from"@saas-ui/button";import{Form as U,Fields as B,SubmitButton as D}from"@saas-ui/forms";function j(){return j=Object.assign||function(e){for(var l=1;l<arguments.length;l++){var n=arguments[l];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},j.apply(this,arguments)}function N(e,l){if(null==e)return{};var n,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)l.indexOf(n=o[t])>=0||(r[n]=e[n]);return r}const z=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],A=c=>{const{title:s,cancelLabel:i="Cancel",confirmLabel:u="Confirm",cancelProps:m,confirmProps:d,buttonGroupProps:p,isOpen:f,closeOnCancel:h=!0,closeOnConfirm:E=!0,leastDestructiveFocus:C="cancel",onClose:O,onCancel:v,onConfirm:y,children:b}=c,P=N(c,z),M=e.useRef(null),g=e.useRef(null);/*#__PURE__*/return e.createElement(l,j({isOpen:f,onClose:O},P,{leastDestructiveRef:"cancel"===C?M:g}),/*#__PURE__*/e.createElement(n,null,/*#__PURE__*/e.createElement(t,null,/*#__PURE__*/e.createElement(r,null,s),/*#__PURE__*/e.createElement(o,null,b),/*#__PURE__*/e.createElement(a,null,/*#__PURE__*/e.createElement(k,p,/*#__PURE__*/e.createElement(x,j({ref:M},m,{onClick:()=>{null==v||v(),h&&O()}}),"Cancel"),/*#__PURE__*/e.createElement(x,j({ref:g},d,{onClick:()=>{null==y||y(),E&&O()}}),"Confirm"))))))},G=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],I=["footer","children"],_=l=>{const{title:n,children:t,isOpen:r,onClose:o,hideCloseButton:a,hideOverlay:d}=l,p=N(l,G);/*#__PURE__*/return e.createElement(c,j({isOpen:r,onClose:o},p),!d&&/*#__PURE__*/e.createElement(s,null),/*#__PURE__*/e.createElement(i,null,/*#__PURE__*/e.createElement(u,null,n),!a&&/*#__PURE__*/e.createElement(m,null),t))},H=l=>{const{footer:n,children:t}=l,r=N(l,I);/*#__PURE__*/return e.createElement(_,r,/*#__PURE__*/e.createElement(d,null,t),n&&/*#__PURE__*/e.createElement(p,null,n))},K=["title","footer","children","isOpen","onClose","hideCloseButton","hideOverlay"],Y=["children","footer"],q=l=>{const{title:n,footer:t,children:r,isOpen:o,onClose:a,hideCloseButton:c,hideOverlay:s}=l,i=N(l,K);/*#__PURE__*/return e.createElement(f,j({isOpen:o,onClose:a},i),!s&&/*#__PURE__*/e.createElement(h,null),/*#__PURE__*/e.createElement(E,null,n&&/*#__PURE__*/e.createElement(C,null,n),!c&&/*#__PURE__*/e.createElement(O,null),r,t&&/*#__PURE__*/e.createElement(v,null,t)))},J=l=>{const{children:n}=l,t=N(l,Y);/*#__PURE__*/return e.createElement(q,t,/*#__PURE__*/e.createElement(y,null,n))},Q=["children","footer","isOpen","onClose"],T=["descendants"],W=["rootProps"],X=l=>{const{children:n,footer:t,isOpen:r,onClose:o}=l,a=N(l,Q),c=F("Menu",l),{direction:s}=w(),i=V({onClose:o,autoSelect:!0,defaultIsOpen:!0,closeOnBlur:!1,direction:s}),{descendants:u}=i,m=N(i,T),d=e.useMemo(()=>m,[m]);return e.useEffect(()=>{m.openAndFocusFirstItem()},[l.isOpen]),/*#__PURE__*/e.createElement(q,j({isOpen:r,onClose:o,initialFocusRef:m.menuRef},a),/*#__PURE__*/e.createElement(L,{value:u},/*#__PURE__*/e.createElement(S,{value:d},/*#__PURE__*/e.createElement(R,{value:c},n))),t&&/*#__PURE__*/e.createElement(v,null,t))};X.defaultProps={variant:"dialog"};const Z=b((l,n)=>{const t=N(l,W),r=P(t,n),o=M();/*#__PURE__*/return e.createElement(g.div,j({},r,{__css:j({outline:0,maxHeight:"80vh",overflowY:"auto"},o.list,{boxShadow:"none",border:0})}))}),$=["children","schema","defaultValues","onSubmit","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","cancelLabel","submitLabel","footer","isOpen","onClose"],ee=l=>{const{children:n,schema:t,defaultValues:r,onSubmit:o,reValidateMode:a,shouldFocusError:c=!0,shouldUnregister:s,shouldUseNativeValidation:i,criteriaMode:u,delayError:m,cancelLabel:d,submitLabel:p,footer:f,isOpen:h,onClose:E}=l,C=N(l,$),O={schema:t,defaultValues:r,onSubmit:o,reValidateMode:a,shouldFocusError:c,shouldUnregister:s,shouldUseNativeValidation:i,criteriaMode:u,delayError:m},b=e.useRef(null);/*#__PURE__*/return e.createElement(q,j({isOpen:h,onClose:E,initialFocusRef:b},C),/*#__PURE__*/e.createElement(U,O,/*#__PURE__*/e.createElement(y,null,n||/*#__PURE__*/e.createElement(B,{schema:t})),f||/*#__PURE__*/e.createElement(v,null,/*#__PURE__*/e.createElement(x,{variant:"ghost",mr:3,onClick:E},d||"Cancel"),/*#__PURE__*/e.createElement(D,{ref:b},p||"Submit"))))},le=["id","type","scope"],ne=["title","children"],te=e.createContext({}),re={id:null,props:null,type:"modal"},oe={alert:A,confirm:A,drawer:H,modal:J,menu:X,form:ee};function ae({children:l,modals:n}){const t=e.useMemo(()=>new Set,[]),[r,o]=e.useState({modal:re}),a=e.useMemo(()=>{const e=j({},oe,n);return(l="modal")=>e[l]||e.modal},[n]),c=(e,l)=>{if(!l)return o({modal:e});o(n=>j({},n,{[l]:e}))},s=e=>{const{id:l=t.size+1,type:n="modal",scope:r="modal"}=e,o={id:l,props:N(e,le),type:n,scope:r};return t.add(o),c(o,r),l},i=async(e,l)=>{var n;const r=[...t],o=r.filter(l=>l.id===e)[0];if(!o)return;if(!1===await(null==(n=o.props)||null==n.onClose?void 0:n.onClose({force:l})))return;t.delete(o);const a=r.filter(({scope:e})=>e===o.scope);c(a[a.length-2]||{id:null,props:null,type:o.type},o.scope)},u={open:s,drawer:e=>s(j({},e,{type:"drawer"})),alert:e=>s(j({},e,{scope:"alert",type:"alert",cancelProps:{display:"none"},confirmProps:{label:"OK"},leastDestructiveFocus:"confirm"})),confirm:e=>s(j({},e,{scope:"alert",type:"confirm"})),menu:e=>s(j({},e,{type:"menu"})),form:e=>s(j({},e,{type:"form"})),close:i,closeAll:()=>{t.forEach(e=>{var l;return null==(l=e.props)||null==l.onClose?void 0:l.onClose({force:!0})}),t.clear(),c(re)}},m=Object.entries(r).map(([l,n])=>{const r=a(n.type),o=n.props||{},{title:c,children:s}=o,u=N(o,ne);/*#__PURE__*/return e.createElement(r,j({key:l,title:c,children:s},u,{isOpen:!(!n.id||!t.size),onClose:()=>i(n.id)}))});/*#__PURE__*/return e.createElement(te.Provider,{value:u},m,l)}const ce=()=>e.useContext(te),se=()=>ce();export{_ as BaseDrawer,q as BaseModal,A as ConfirmDialog,H as Drawer,ee as FormDialog,X as MenuDialog,Z as MenuDialogList,J as Modal,te as ModalsContext,ae as ModalsProvider,se as useModals,ce as useModalsContext};
2
2
  //# sourceMappingURL=index.modern.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.modern.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@saas-ui/button'\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 Cancel\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n Confirm\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, footer, ...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 MenuDescendantsProvider,\n MenuProvider,\n MenuListProps,\n useMenu,\n useMenuList,\n chakra,\n StylesProvider,\n useMultiStyleConfig,\n useTheme,\n useStyles,\n forwardRef,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\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 { children, footer, isOpen, onClose, ...rest } = props\n\n const styles = useMultiStyleConfig('Menu', props)\n const { direction } = useTheme()\n const { descendants, ...ctx } = useMenu({\n onClose,\n autoSelect: true,\n defaultIsOpen: true,\n closeOnBlur: false,\n direction,\n })\n const context = React.useMemo(() => ctx, [ctx])\n\n React.useEffect(() => {\n ctx.openAndFocusFirstItem()\n }, [props.isOpen])\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={ctx.menuRef}\n {...rest}\n >\n <MenuDescendantsProvider value={descendants}>\n <MenuProvider value={context}>\n <StylesProvider value={styles}>{children}</StylesProvider>\n </MenuProvider>\n </MenuDescendantsProvider>\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n}\n\nMenuDialog.defaultProps = {\n variant: 'dialog',\n}\n\nexport const MenuDialogList = forwardRef<MenuListProps, 'div'>((props, ref) => {\n const { rootProps, ...rest } = props\n\n const ownProps = useMenuList(rest, ref) as any\n\n const styles = useStyles()\n\n return (\n <chakra.div\n {...ownProps}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n }}\n />\n )\n})\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'\n\nexport interface ModalsContextValue {\n open?: (options: OpenOptions) => ModalId\n drawer?: (options: ModalOptions) => ModalId\n alert?: (options: ModalOptions) => ModalId\n confirm?: (options: ModalOptions) => ModalId\n menu?: (options: ModalOptions) => ModalId\n close?: (id: ModalId) => void\n closeAll?: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue>({})\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<\n (BaseModalProps & DrawerProps & ConfirmDialogProps) & {\n body?: React.ReactNode\n },\n 'onClose' | 'isOpen' | 'children'\n > {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n children?: React.ReactNode\n}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes | string\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu'\n\nexport interface ModalConfig {\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?: ModalOptions | 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 | string\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}\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 = {\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 = (options: OpenOptions): ModalId => {\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n ...props\n } = options\n\n const modal: ModalConfig = {\n id,\n props: {\n ...props,\n children: props.body || props.children,\n },\n type,\n scope,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ModalOptions): 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: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n type: 'menu',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [..._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 _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n setActiveModal(\n scoped[scoped.length - 2] || {\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 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 close,\n closeAll,\n }\n\n const content = Object.entries(activeModals).map(([scope, config]) => {\n const Component = getModalComponent(config.type)\n\n const { title, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={children}\n {...props}\n isOpen={!!(config.id && _instances.size)}\n onClose={() => close(config.id)}\n />\n )\n })\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n React.useContext(ModalsContext)\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","ModalFooter","Modal","ModalBody","MenuDialog","styles","useMultiStyleConfig","direction","useTheme","useMenu","autoSelect","defaultIsOpen","closeOnBlur","descendants","ctx","context","useMemo","useEffect","openAndFocusFirstItem","initialFocusRef","menuRef","MenuDescendantsProvider","value","MenuProvider","StylesProvider","defaultProps","variant","MenuDialogList","forwardRef","ownProps","useMenuList","useStyles","chakra","div","__css","outline","maxHeight","overflowY","list","boxShadow","border","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","menu","ModalsProvider","modals","_instances","Set","activeModals","setActiveModals","useState","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","body","add","close","async","force","filter","_modal$props","delete","scoped","length","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider","useModalsContext","useContext","useModals"],"mappings":"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"}
1
+ {"version":3,"file":"index.modern.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@saas-ui/button'\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 Cancel\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n Confirm\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, footer, ...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 MenuDescendantsProvider,\n MenuProvider,\n MenuListProps,\n useMenu,\n useMenuList,\n chakra,\n StylesProvider,\n useMultiStyleConfig,\n useTheme,\n useStyles,\n forwardRef,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\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 { children, footer, isOpen, onClose, ...rest } = props\n\n const styles = useMultiStyleConfig('Menu', props)\n const { direction } = useTheme()\n const { descendants, ...ctx } = useMenu({\n onClose,\n autoSelect: true,\n defaultIsOpen: true,\n closeOnBlur: false,\n direction,\n })\n const context = React.useMemo(() => ctx, [ctx])\n\n React.useEffect(() => {\n ctx.openAndFocusFirstItem()\n }, [props.isOpen])\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={ctx.menuRef}\n {...rest}\n >\n <MenuDescendantsProvider value={descendants}>\n <MenuProvider value={context}>\n <StylesProvider value={styles}>{children}</StylesProvider>\n </MenuProvider>\n </MenuDescendantsProvider>\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n}\n\nMenuDialog.defaultProps = {\n variant: 'dialog',\n}\n\nexport const MenuDialogList = forwardRef<MenuListProps, 'div'>((props, ref) => {\n const { rootProps, ...rest } = props\n\n const ownProps = useMenuList(rest, ref) as any\n\n const styles = useStyles()\n\n return (\n <chakra.div\n {...ownProps}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n }}\n />\n )\n})\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter } from '@chakra-ui/react'\n\nimport { Form, Fields, SubmitButton, FormProps } from '@saas-ui/forms'\nimport { Button } from '@saas-ui/button'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps\n extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps,\n | 'schema'\n | 'defaultValues'\n | 'onSubmit'\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\nexport const FormDialog: React.FC<FormDialogProps> = (props) => {\n const {\n children,\n schema,\n defaultValues,\n onSubmit,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n cancelLabel,\n submitLabel,\n footer,\n isOpen,\n onClose,\n ...rest\n } = props\n\n const formProps = {\n schema,\n defaultValues,\n onSubmit,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n const initialRef = React.useRef<HTMLButtonElement | null>(null)\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialRef}\n {...rest}\n >\n <Form {...formProps}>\n <ModalBody>{children || <Fields schema={schema} />}</ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button variant=\"ghost\" mr={3} onClick={onClose}>\n {cancelLabel || 'Cancel'}\n </Button>\n <SubmitButton ref={initialRef}>\n {submitLabel || 'Submit'}\n </SubmitButton>\n </ModalFooter>\n )}\n </Form>\n </BaseModal>\n )\n}\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>({})\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 | string\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu'\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 | string\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 = {\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 ModalOptions>(options: T): ModalId => {\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n ...props\n } = options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\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 = [..._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 _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n setActiveModal(\n scoped[scoped.length - 2] || {\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 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 = Object.entries(activeModals).map(([scope, config]) => {\n const Component = getModalComponent(config.type)\n\n const { title, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={children}\n {...props}\n isOpen={!!(config.id && _instances.size)}\n onClose={() => close(config.id)}\n />\n )\n })\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n React.useContext(ModalsContext)\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","ModalFooter","Modal","ModalBody","MenuDialog","styles","useMultiStyleConfig","direction","useTheme","useMenu","autoSelect","defaultIsOpen","closeOnBlur","descendants","ctx","context","useMemo","useEffect","openAndFocusFirstItem","initialFocusRef","menuRef","MenuDescendantsProvider","value","MenuProvider","StylesProvider","defaultProps","variant","MenuDialogList","forwardRef","ownProps","useMenuList","useStyles","chakra","div","__css","outline","maxHeight","overflowY","list","boxShadow","border","FormDialog","schema","defaultValues","onSubmit","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","submitLabel","formProps","initialRef","Form","Fields","mr","SubmitButton","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","menu","form","ModalsProvider","modals","_instances","Set","activeModals","setActiveModals","useState","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","add","close","async","force","filter","_modal$props","delete","scoped","length","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider","useModalsContext","useContext","useModals"],"mappings":"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"}
@@ -2,12 +2,15 @@ import * as React from 'react';
2
2
  import { BaseModalProps } from './modal';
3
3
  import { DrawerProps } from './drawer';
4
4
  import { ConfirmDialogProps } from './dialog';
5
+ import { MenuDialogProps } from './menu';
6
+ import { FormDialogProps } from './form';
5
7
  export interface ModalsContextValue {
6
8
  open?: (options: OpenOptions) => ModalId;
7
- drawer?: (options: ModalOptions) => ModalId;
8
- alert?: (options: ModalOptions) => ModalId;
9
- confirm?: (options: ModalOptions) => ModalId;
10
- menu?: (options: ModalOptions) => ModalId;
9
+ drawer?: (options: DrawerOptions) => ModalId;
10
+ alert?: (options: ConfirmDialogOptions) => ModalId;
11
+ confirm?: (options: ConfirmDialogOptions) => ModalId;
12
+ menu?: (options: MenuDialogOptions) => ModalId;
13
+ form?: (options: FormDialogOptions) => ModalId;
11
14
  close?: (id: ModalId) => void;
12
15
  closeAll?: () => void;
13
16
  }
@@ -17,13 +20,21 @@ interface ModalsProviderProps {
17
20
  modals?: Record<string, React.FC<any>>;
18
21
  }
19
22
  export declare type ModalId = string | number;
20
- interface ModalOptions extends Omit<(BaseModalProps & DrawerProps & ConfirmDialogProps) & {
21
- body?: React.ReactNode;
22
- }, 'onClose' | 'isOpen' | 'children'> {
23
+ interface ModalOptions extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
23
24
  onClose?: (args: {
24
25
  force?: boolean;
25
26
  }) => Promise<boolean | undefined> | void;
27
+ body?: React.ReactNode;
26
28
  children?: React.ReactNode;
29
+ [key: string]: any;
30
+ }
31
+ export interface DrawerOptions extends ModalOptions, Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {
32
+ }
33
+ export interface ConfirmDialogOptions extends ModalOptions, Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {
34
+ }
35
+ export interface MenuDialogOptions extends ModalOptions, Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {
36
+ }
37
+ export interface FormDialogOptions extends ModalOptions, Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {
27
38
  }
28
39
  export interface OpenOptions extends ModalOptions {
29
40
  type?: ModalTypes | string;
@@ -31,7 +42,7 @@ export interface OpenOptions extends ModalOptions {
31
42
  }
32
43
  export declare type ModalScopes = 'modal' | 'alert';
33
44
  export declare type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu';
34
- export interface ModalConfig {
45
+ export interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
35
46
  /**
36
47
  * The modal id, autogenerated when not set.
37
48
  * Can be used to close modals.
@@ -40,7 +51,7 @@ export interface ModalConfig {
40
51
  /**
41
52
  * The modal props
42
53
  */
43
- props?: ModalOptions | null;
54
+ props?: TModalOptions | null;
44
55
  /**
45
56
  * The modal scope
46
57
  * Modals can only have one level per scope.
@@ -1 +1 @@
1
- {"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAS,cAAc,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAiB,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAG5D,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IAC3C,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IAC1C,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IAC5C,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IACzC,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAO,MAAM,aAAa,mCAA8C,CAAA;AAExE,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;CACvC;AAED,oBAAY,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAErC,UAAU,YACR,SAAQ,IAAI,CACV,CAAC,cAAc,GAAG,WAAW,GAAG,kBAAkB,CAAC,GAAG;IACpD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,EACD,SAAS,GAAG,QAAQ,GAAG,UAAU,CAClC;IACD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,IAAI,CAAA;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB;AAED,oBAAY,WAAW,GAAG,OAAO,GAAG,OAAO,CAAA;AAE3C,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAE1E,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC5B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;CAC3B;AAgBD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,mBAAmB,eAoKvE;AAED,eAAO,MAAM,gBAAgB,QAAO,kBACH,CAAA;AAEjC,eAAO,MAAM,SAAS,0BAErB,CAAA"}
1
+ {"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saas-ui/modals",
3
- "version": "0.2.1",
3
+ "version": "0.2.5",
4
4
  "description": "A modal manager for Chakra UI",
5
5
  "source": "src/index.ts",
6
6
  "exports": {
@@ -22,6 +22,10 @@
22
22
  "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
23
23
  "typecheck": "tsc --noEmit"
24
24
  },
25
+ "files": [
26
+ "dist",
27
+ "src"
28
+ ],
25
29
  "sideEffects": false,
26
30
  "publishConfig": {
27
31
  "access": "public"
@@ -52,7 +56,8 @@
52
56
  "url": "https://storybook.saas-ui.dev"
53
57
  },
54
58
  "dependencies": {
55
- "@saas-ui/button": "0.2.0"
59
+ "@saas-ui/button": "0.2.1",
60
+ "@saas-ui/forms": "0.3.0"
56
61
  },
57
62
  "peerDependencies": {
58
63
  "@chakra-ui/react": ">=1.8.0",
package/src/form.tsx ADDED
@@ -0,0 +1,104 @@
1
+ import * as React from 'react'
2
+
3
+ import { ModalBody, ModalFooter } from '@chakra-ui/react'
4
+
5
+ import { Form, Fields, SubmitButton, FormProps } from '@saas-ui/forms'
6
+ import { Button } from '@saas-ui/button'
7
+
8
+ import { BaseModal, BaseModalProps } from './modal'
9
+
10
+ export interface FormDialogProps
11
+ extends Omit<BaseModalProps, 'children'>,
12
+ Pick<
13
+ FormProps,
14
+ | 'schema'
15
+ | 'defaultValues'
16
+ | 'onSubmit'
17
+ | 'resolver'
18
+ | 'mode'
19
+ | 'reValidateMode'
20
+ | 'shouldFocusError'
21
+ | 'shouldUnregister'
22
+ | 'shouldUseNativeValidation'
23
+ | 'criteriaMode'
24
+ | 'delayError'
25
+ > {
26
+ /**
27
+ * The modal footer, will be wrapped with `ModalFooter`.
28
+ * Defaults to a cancel and submit button.
29
+ */
30
+ footer?: React.ReactNode
31
+ /**
32
+ * The cancel button label
33
+ * @default "Cancel"
34
+ */
35
+ cancelLabel?: React.ReactNode
36
+ /**
37
+ * The submit button label
38
+ * @default "Submit"
39
+ */
40
+ submitLabel?: React.ReactNode
41
+ /**
42
+ * If no children are passed, this will auto render fields based on the supplied schema.
43
+ */
44
+ children?: React.ReactNode
45
+ }
46
+
47
+ export const FormDialog: React.FC<FormDialogProps> = (props) => {
48
+ const {
49
+ children,
50
+ schema,
51
+ defaultValues,
52
+ onSubmit,
53
+ reValidateMode,
54
+ shouldFocusError = true,
55
+ shouldUnregister,
56
+ shouldUseNativeValidation,
57
+ criteriaMode,
58
+ delayError,
59
+ cancelLabel,
60
+ submitLabel,
61
+ footer,
62
+ isOpen,
63
+ onClose,
64
+ ...rest
65
+ } = props
66
+
67
+ const formProps = {
68
+ schema,
69
+ defaultValues,
70
+ onSubmit,
71
+ reValidateMode,
72
+ shouldFocusError,
73
+ shouldUnregister,
74
+ shouldUseNativeValidation,
75
+ criteriaMode,
76
+ delayError,
77
+ }
78
+
79
+ const initialRef = React.useRef<HTMLButtonElement | null>(null)
80
+
81
+ return (
82
+ <BaseModal
83
+ isOpen={isOpen}
84
+ onClose={onClose}
85
+ initialFocusRef={initialRef}
86
+ {...rest}
87
+ >
88
+ <Form {...formProps}>
89
+ <ModalBody>{children || <Fields schema={schema} />}</ModalBody>
90
+
91
+ {footer || (
92
+ <ModalFooter>
93
+ <Button variant="ghost" mr={3} onClick={onClose}>
94
+ {cancelLabel || 'Cancel'}
95
+ </Button>
96
+ <SubmitButton ref={initialRef}>
97
+ {submitLabel || 'Submit'}
98
+ </SubmitButton>
99
+ </ModalFooter>
100
+ )}
101
+ </Form>
102
+ </BaseModal>
103
+ )
104
+ }
package/src/index.ts CHANGED
@@ -2,4 +2,5 @@ export * from './dialog'
2
2
  export * from './drawer'
3
3
  export * from './modal'
4
4
  export * from './menu'
5
+ export * from './form'
5
6
  export * from './provider'
package/src/provider.tsx CHANGED
@@ -4,13 +4,15 @@ import { Modal, BaseModalProps } from './modal'
4
4
  import { Drawer, DrawerProps } from './drawer'
5
5
  import { ConfirmDialog, ConfirmDialogProps } from './dialog'
6
6
  import { MenuDialog, MenuDialogProps } from './menu'
7
+ import { FormDialog, FormDialogProps } from './form'
7
8
 
8
9
  export interface ModalsContextValue {
9
10
  open?: (options: OpenOptions) => ModalId
10
- drawer?: (options: ModalOptions) => ModalId
11
- alert?: (options: ModalOptions) => ModalId
12
- confirm?: (options: ModalOptions) => ModalId
13
- menu?: (options: ModalOptions) => ModalId
11
+ drawer?: (options: DrawerOptions) => ModalId
12
+ alert?: (options: ConfirmDialogOptions) => ModalId
13
+ confirm?: (options: ConfirmDialogOptions) => ModalId
14
+ menu?: (options: MenuDialogOptions) => ModalId
15
+ form?: (options: FormDialogOptions) => ModalId
14
16
  close?: (id: ModalId) => void
15
17
  closeAll?: () => void
16
18
  }
@@ -25,16 +27,29 @@ interface ModalsProviderProps {
25
27
  export type ModalId = string | number
26
28
 
27
29
  interface ModalOptions
28
- extends Omit<
29
- (BaseModalProps & DrawerProps & ConfirmDialogProps) & {
30
- body?: React.ReactNode
31
- },
32
- 'onClose' | 'isOpen' | 'children'
33
- > {
30
+ extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
34
31
  onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void
32
+ body?: React.ReactNode
35
33
  children?: React.ReactNode
34
+ [key: string]: any
36
35
  }
37
36
 
37
+ export interface DrawerOptions
38
+ extends ModalOptions,
39
+ Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}
40
+
41
+ export interface ConfirmDialogOptions
42
+ extends ModalOptions,
43
+ Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}
44
+
45
+ export interface MenuDialogOptions
46
+ extends ModalOptions,
47
+ Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}
48
+
49
+ export interface FormDialogOptions
50
+ extends ModalOptions,
51
+ Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}
52
+
38
53
  export interface OpenOptions extends ModalOptions {
39
54
  type?: ModalTypes | string
40
55
  scope?: ModalScopes
@@ -44,7 +59,9 @@ export type ModalScopes = 'modal' | 'alert'
44
59
 
45
60
  export type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu'
46
61
 
47
- export interface ModalConfig {
62
+ export interface ModalConfig<
63
+ TModalOptions extends ModalOptions = ModalOptions
64
+ > {
48
65
  /**
49
66
  * The modal id, autogenerated when not set.
50
67
  * Can be used to close modals.
@@ -53,7 +70,7 @@ export interface ModalConfig {
53
70
  /**
54
71
  * The modal props
55
72
  */
56
- props?: ModalOptions | null
73
+ props?: TModalOptions | null
57
74
  /**
58
75
  * The modal scope
59
76
  * Modals can only have one level per scope.
@@ -81,6 +98,7 @@ const defaultModals = {
81
98
  drawer: Drawer,
82
99
  modal: Modal,
83
100
  menu: MenuDialog,
101
+ form: FormDialog,
84
102
  }
85
103
 
86
104
  export function ModalsProvider({ children, modals }: ModalsProviderProps) {
@@ -119,7 +137,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
119
137
  }))
120
138
  }
121
139
 
122
- const open = (options: OpenOptions): ModalId => {
140
+ const open = <T extends ModalOptions>(options: T): ModalId => {
123
141
  const {
124
142
  id = _instances.size + 1,
125
143
  type = 'modal',
@@ -127,12 +145,9 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
127
145
  ...props
128
146
  } = options
129
147
 
130
- const modal: ModalConfig = {
148
+ const modal: ModalConfig<T> = {
131
149
  id,
132
- props: {
133
- ...props,
134
- children: props.body || props.children,
135
- },
150
+ props: props as T,
136
151
  type,
137
152
  scope,
138
153
  }
@@ -143,14 +158,14 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
143
158
  return id
144
159
  }
145
160
 
146
- const drawer = (options: ModalOptions): ModalId => {
147
- return open({
161
+ const drawer = (options: DrawerOptions): ModalId => {
162
+ return open<DrawerOptions>({
148
163
  ...options,
149
164
  type: 'drawer',
150
165
  })
151
166
  }
152
167
 
153
- const alert = (options: ModalOptions): ModalId => {
168
+ const alert = (options: ConfirmDialogOptions): ModalId => {
154
169
  return open({
155
170
  ...options,
156
171
  scope: 'alert',
@@ -165,21 +180,28 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
165
180
  })
166
181
  }
167
182
 
168
- const confirm = (options: ModalOptions): ModalId => {
169
- return open({
183
+ const confirm = (options: ConfirmDialogOptions): ModalId => {
184
+ return open<ConfirmDialogOptions>({
170
185
  ...options,
171
186
  scope: 'alert',
172
187
  type: 'confirm',
173
188
  })
174
189
  }
175
190
 
176
- const menu = (options: ModalOptions): ModalId => {
177
- return open({
191
+ const menu = (options: MenuDialogOptions): ModalId => {
192
+ return open<MenuDialogOptions>({
178
193
  ...options,
179
194
  type: 'menu',
180
195
  })
181
196
  }
182
197
 
198
+ const form = (options: FormDialogOptions): ModalId => {
199
+ return open<FormDialogOptions>({
200
+ ...options,
201
+ type: 'form',
202
+ })
203
+ }
204
+
183
205
  const close = async (id?: ModalId | null, force?: boolean) => {
184
206
  const modals = [..._instances]
185
207
  const modal = modals.filter((modal) => modal.id === id)[0]
@@ -220,6 +242,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
220
242
  alert,
221
243
  confirm,
222
244
  menu,
245
+ form,
223
246
  close,
224
247
  closeAll,
225
248
  }
@@ -1,6 +0,0 @@
1
- @saas-ui/modals:build: cache hit, replaying output 743c784647c8ec82
2
- @saas-ui/modals:build: Build "@saas-ui/modals" to dist:
3
- @saas-ui/modals:build:  2.22 kB: index.js.gz
4
- @saas-ui/modals:build:  1.98 kB: index.js.br
5
- @saas-ui/modals:build:  2.17 kB: index.modern.js.gz
6
- @saas-ui/modals:build:  1.94 kB: index.modern.js.br
@@ -1,139 +0,0 @@
1
- import * as React from 'react'
2
- import {
3
- Stack,
4
- Container,
5
- MenuItem,
6
- MenuGroup,
7
- useDisclosure,
8
- } from '@chakra-ui/react'
9
-
10
- import { MenuDialog, MenuDialogList } from '../src/menu'
11
-
12
- import { FiArchive, FiTag, FiUsers, FiSettings } from 'react-icons/fi'
13
-
14
- import { Button } from '@saas-ui/button'
15
-
16
- export default {
17
- title: 'Components/Overlay/MenuDialog',
18
- decorators: [
19
- (Story: any) => (
20
- <Container mt="40px">
21
- <Story />
22
- </Container>
23
- ),
24
- ],
25
- }
26
-
27
- export const basic = () => {
28
- const disclosure = useDisclosure()
29
-
30
- return (
31
- <Stack>
32
- <Button
33
- onClick={() => {
34
- disclosure.onOpen()
35
- }}
36
- >
37
- Open menu
38
- </Button>
39
-
40
- <MenuDialog title="Menu" {...disclosure}>
41
- <MenuDialogList>
42
- <MenuItem>Item 1</MenuItem>
43
- <MenuItem>Item 2</MenuItem>
44
- <MenuItem>Item 3</MenuItem>
45
- </MenuDialogList>
46
- </MenuDialog>
47
- </Stack>
48
- )
49
- }
50
-
51
- export const iconAndCommand = () => {
52
- const disclosure = useDisclosure()
53
-
54
- return (
55
- <Stack>
56
- <Button
57
- onClick={() => {
58
- disclosure.onOpen()
59
- }}
60
- >
61
- Open menu
62
- </Button>
63
-
64
- <MenuDialog title="Commands" {...disclosure}>
65
- <MenuDialogList>
66
- <MenuItem icon={<FiUsers />} command="A">
67
- Assign
68
- </MenuItem>
69
- <MenuItem icon={<FiTag />} command="L">
70
- Add label
71
- </MenuItem>
72
- <MenuItem icon={<FiArchive />} command="C">
73
- Close
74
- </MenuItem>
75
- </MenuDialogList>
76
- </MenuDialog>
77
- </Stack>
78
- )
79
- }
80
-
81
- export const menuGroup = () => {
82
- const disclosure = useDisclosure()
83
-
84
- return (
85
- <Stack>
86
- <Button
87
- onClick={() => {
88
- disclosure.onOpen()
89
- }}
90
- >
91
- Open menu
92
- </Button>
93
-
94
- <MenuDialog title="Commands" {...disclosure}>
95
- <MenuDialogList>
96
- <MenuGroup title="Message">
97
- <MenuItem icon={<FiUsers />} command="A">
98
- Assign
99
- </MenuItem>
100
- <MenuItem icon={<FiTag />} command="L">
101
- Add label
102
- </MenuItem>
103
- <MenuItem icon={<FiArchive />} command="C">
104
- Close
105
- </MenuItem>
106
- </MenuGroup>
107
- <MenuGroup title="Settings">
108
- <MenuItem icon={<FiSettings />}>Change theme</MenuItem>
109
- </MenuGroup>
110
- </MenuDialogList>
111
- </MenuDialog>
112
- </Stack>
113
- )
114
- }
115
-
116
- export const overflow = () => {
117
- const disclosure = useDisclosure()
118
-
119
- const items = []
120
- for (let i = 0; i < 50; i++) {
121
- items.push(<MenuItem key={i}>Item {i}</MenuItem>)
122
- }
123
-
124
- return (
125
- <Stack>
126
- <Button
127
- onClick={() => {
128
- disclosure.onOpen()
129
- }}
130
- >
131
- Open menu
132
- </Button>
133
-
134
- <MenuDialog title="Menu" {...disclosure}>
135
- <MenuDialogList>{items}</MenuDialogList>
136
- </MenuDialog>
137
- </Stack>
138
- )
139
- }
@@ -1,175 +0,0 @@
1
- import * as React from 'react'
2
- import { Stack, Container, MenuItem } from '@chakra-ui/react'
3
- import { ModalsProvider, useModals } from '../src/provider'
4
-
5
- import { MenuDialogList } from '../src/menu'
6
-
7
- import { Button } from '@saas-ui/button'
8
-
9
- const CustomModal: React.FC<{ title: string }> = ({ title, children }) => (
10
- <div>
11
- {title} - {children}
12
- </div>
13
- )
14
-
15
- const modals = {
16
- custom: CustomModal,
17
- }
18
-
19
- export default {
20
- title: 'Components/Overlay/Modals',
21
- decorators: [
22
- (Story: any) => (
23
- <Container mt="40px">
24
- <ModalsProvider modals={modals}>
25
- <Story />
26
- </ModalsProvider>
27
- </Container>
28
- ),
29
- ],
30
- }
31
-
32
- export const basic = () => {
33
- const modals = useModals()
34
-
35
- return (
36
- <Stack>
37
- <Button
38
- onClick={() => {
39
- const id = modals.open({
40
- title: 'My Modal',
41
- body: <>My modal</>,
42
- footer: <Button onClick={() => modals.close(id)} label="Close" />,
43
- })
44
- }}
45
- >
46
- Open modal
47
- </Button>
48
- <Button
49
- onClick={() =>
50
- modals.alert({
51
- title: 'Import finished',
52
- body: 'Your import has finish and can now be used.',
53
- })
54
- }
55
- >
56
- Open alert dialog
57
- </Button>
58
- <Button
59
- onClick={() =>
60
- modals.confirm({
61
- title: 'Delete user?',
62
- body: 'Are you sure you want to delete this user?',
63
- confirmProps: {
64
- colorScheme: 'red',
65
- label: 'Delete',
66
- },
67
- })
68
- }
69
- >
70
- Open confirm dialog
71
- </Button>
72
- <Button
73
- onClick={() =>
74
- modals.drawer({
75
- title: 'My drawer',
76
- body: (
77
- <Stack>
78
- <Button
79
- onClick={() =>
80
- modals.confirm({
81
- title: 'Delete user?',
82
- body: 'Are you sure you want to delete this user?',
83
- confirmProps: {
84
- colorScheme: 'red',
85
- label: 'Delete',
86
- },
87
- })
88
- }
89
- >
90
- Open confirm dialog
91
- </Button>
92
- <Button
93
- onClick={() =>
94
- modals.drawer({
95
- title: 'Subdrawer',
96
- body: (
97
- <>
98
- <Button
99
- onClick={() => modals.closeAll()}
100
- label="Close all"
101
- >
102
- Close all
103
- </Button>
104
- </>
105
- ),
106
- })
107
- }
108
- >
109
- Open drawer
110
- </Button>
111
- </Stack>
112
- ),
113
- })
114
- }
115
- >
116
- Open drawer
117
- </Button>
118
- <Button
119
- onClick={() =>
120
- modals.menu({
121
- title: 'Menu',
122
- body: (
123
- <MenuDialogList>
124
- <MenuItem>Item 1</MenuItem>
125
- <MenuItem>Item 1</MenuItem>
126
- </MenuDialogList>
127
- ),
128
- })
129
- }
130
- >
131
- Open menu
132
- </Button>
133
- </Stack>
134
- )
135
- }
136
-
137
- export const custom = () => {
138
- const modals = useModals()
139
-
140
- return (
141
- <Button
142
- onClick={() =>
143
- modals.open({
144
- title: 'My Modal',
145
- body: <>My modal</>,
146
- type: 'custom',
147
- })
148
- }
149
- >
150
- Open modal
151
- </Button>
152
- )
153
- }
154
-
155
- export const onClose = () => {
156
- const modals = useModals()
157
-
158
- return (
159
- <Button
160
- onClick={() =>
161
- modals.open({
162
- title: 'My Modal',
163
- body: <>My modal</>,
164
- onClose: () => {
165
- modals.confirm({
166
- title: 'You closed the modal',
167
- })
168
- },
169
- })
170
- }
171
- >
172
- Open modal
173
- </Button>
174
- )
175
- }
@@ -1 +0,0 @@
1
- import { Modal } from '../src'
package/tsconfig.json DELETED
@@ -1,12 +0,0 @@
1
- {
2
- "extends": "../../tsconfig.base.json",
3
- "include": ["src"],
4
- "exclude": [
5
- "src/tests",
6
- "**/*.spec.ts",
7
- "**/*.spec.tsx",
8
- "**/*.test.ts",
9
- "**/*.test.tsx",
10
- "**/*/*.stories.tsx"
11
- ]
12
- }