@saas-ui/modals 1.4.2 → 1.4.3
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 +8 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +1 -1
- package/dist/index.modern.js.map +1 -1
- package/dist/menu.d.ts +1 -1
- package/dist/menu.d.ts.map +1 -1
- package/dist/provider.d.ts +5 -0
- package/dist/provider.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/menu.tsx +19 -4
- package/src/provider.tsx +58 -24
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,13 @@
|
|
1
1
|
# @saas-ui/modals
|
2
2
|
|
3
|
+
## 1.4.3
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- c8f7b32: Fixed issue where closing dialogs opened by the modals manager to flicker, due to config reset before closing animation was finished.
|
8
|
+
- Updated dependencies [523b5ca]
|
9
|
+
- @saas-ui/forms@1.4.2
|
10
|
+
|
3
11
|
## 1.4.2
|
4
12
|
|
5
13
|
### Patch Changes
|
package/dist/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
var e=require("react"),
|
1
|
+
var e=require("react"),n=require("@chakra-ui/react"),r=require("@saas-ui/button"),t=require("@chakra-ui/utils"),o=require("@saas-ui/forms");function l(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}}),n.default=e,n}var i=/*#__PURE__*/l(e);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},a.apply(this,arguments)}function u(e,n){if(null==e)return{};var r,t,o={},l=Object.keys(e);for(t=0;t<l.length;t++)n.indexOf(r=l[t])>=0||(o[r]=e[r]);return o}var c=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],s=function(e){var t=e.title,o=e.cancelLabel,l=void 0===o?"Cancel":o,s=e.confirmLabel,d=void 0===s?"Confirm":s,f=e.cancelProps,m=e.confirmProps,p=e.buttonGroupProps,v=e.isOpen,C=e.closeOnCancel,h=void 0===C||C,E=e.closeOnConfirm,y=void 0===E||E,O=e.leastDestructiveFocus,b=void 0===O?"cancel":O,M=e.onClose,g=e.onCancel,D=e.onConfirm,x=e.children,F=u(e,c),B=i.useRef(null),P=i.useRef(null);/*#__PURE__*/return i.createElement(n.AlertDialog,a({isOpen:v,onClose:M},F,{leastDestructiveRef:"cancel"===b?B:P}),/*#__PURE__*/i.createElement(n.AlertDialogOverlay,null,/*#__PURE__*/i.createElement(n.AlertDialogContent,null,/*#__PURE__*/i.createElement(n.AlertDialogHeader,null,t),/*#__PURE__*/i.createElement(n.AlertDialogBody,null,x),/*#__PURE__*/i.createElement(n.AlertDialogFooter,null,/*#__PURE__*/i.createElement(r.ButtonGroup,p,/*#__PURE__*/i.createElement(r.Button,a({ref:B},f,{onClick:function(){null==g||g(),h&&M()}}),l),/*#__PURE__*/i.createElement(r.Button,a({ref:P},m,{onClick:function(){null==D||D(),y&&M()}}),d))))))},d=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],f=["footer","children"],m=function(e){var r=e.title,t=e.children,o=e.isOpen,l=e.onClose,c=e.hideCloseButton,s=e.hideOverlay,f=u(e,d);/*#__PURE__*/return i.createElement(n.Drawer,a({isOpen:o,onClose:l},f),!s&&/*#__PURE__*/i.createElement(n.DrawerOverlay,null),/*#__PURE__*/i.createElement(n.DrawerContent,null,/*#__PURE__*/i.createElement(n.DrawerHeader,null,r),!c&&/*#__PURE__*/i.createElement(n.DrawerCloseButton,null),t))},p=function(e){var r=e.footer,t=e.children,o=u(e,f);/*#__PURE__*/return i.createElement(m,o,/*#__PURE__*/i.createElement(n.DrawerBody,null,t),r&&/*#__PURE__*/i.createElement(n.DrawerFooter,null,r))},v=["title","footer","children","isOpen","onClose","hideCloseButton","hideOverlay"],C=["children"],h=function(e){var r=e.title,t=e.footer,o=e.children,l=e.isOpen,c=e.onClose,s=e.hideCloseButton,d=e.hideOverlay,f=u(e,v);/*#__PURE__*/return i.createElement(n.Modal,a({isOpen:l,onClose:c},f),!d&&/*#__PURE__*/i.createElement(n.ModalOverlay,null),/*#__PURE__*/i.createElement(n.ModalContent,null,r&&/*#__PURE__*/i.createElement(n.ModalHeader,null,r),!s&&/*#__PURE__*/i.createElement(n.ModalCloseButton,null),o,t&&/*#__PURE__*/i.createElement(n.ModalFooter,null,t)))},E=function(e){var r=e.children,t=u(e,C);/*#__PURE__*/return i.createElement(h,t,/*#__PURE__*/i.createElement(n.ModalBody,null,r))},y=["onClose","onCloseComplete"],O=["rootProps","title","footer","initialFocusRef","hideCloseButton","motionPreset"],b=["ref"],M=n.createStylesContext("MenuDialog")[0],g=function(e){var r=e.onClose,t=e.onCloseComplete,o=u(e,y);/*#__PURE__*/return i.createElement(n.Menu,a({variant:"dialog",onClose:function(){null==r||r(),null==t||t()}},o))},D=n.forwardRef(function(e,r){var t=e.title,o=e.footer,l=e.initialFocusRef,c=e.hideCloseButton,s=e.motionPreset,d=u(e,O),f=n.useMenuContext(),m=f.isOpen,p=f.onClose,v=f.menuRef,C=n.useMenuList(d,r),E=C.ref,y=u(C,b),g=n.useMultiStyleConfig("Menu",e);/*#__PURE__*/return i.createElement(h,{isOpen:m,onClose:p,initialFocusRef:l||v,title:t,hideCloseButton:c,motionPreset:s},/*#__PURE__*/i.createElement(M,{value:g},/*#__PURE__*/i.createElement(n.chakra.div,a({},y,{ref:E,__css:a({outline:0,maxHeight:"80vh",overflowY:"auto"},g.list,{boxShadow:"none",border:0})}))),o&&/*#__PURE__*/i.createElement(n.ModalFooter,null,o))}),x=["children","schema","resolver","fieldResolver","defaultValues","onChange","onSubmit","onError","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","cancelLabel","submitLabel","footer","isOpen","onClose"],F=n.forwardRef(function(e,r){var l=e.children,c=e.schema,s=e.resolver,d=e.fieldResolver,f=e.defaultValues,m=e.onChange,p=e.onSubmit,v=e.onError,C=e.reValidateMode,E=e.shouldFocusError,y=void 0===E||E,O=e.shouldUnregister,b=e.shouldUseNativeValidation,M=e.criteriaMode,g=e.delayError,D=e.cancelLabel,F=e.submitLabel,B=e.footer,P=e.isOpen,w=e.onClose,R=u(e,x),j={ref:r,schema:c,resolver:s,defaultValues:f,onChange:m,onSubmit:p,onError:v,reValidateMode:C,shouldFocusError:y,shouldUnregister:O,shouldUseNativeValidation:b,criteriaMode:M,delayError:g};/*#__PURE__*/return i.createElement(h,a({isOpen:P,onClose:w},R),/*#__PURE__*/i.createElement(o.Form,j,function(e){/*#__PURE__*/return i.createElement(i.Fragment,null,/*#__PURE__*/i.createElement(n.ModalBody,null,t.runIfFn(l,e)||/*#__PURE__*/i.createElement(o.Fields,{schema:c,fieldResolver:d,focusFirstField:!0})),B||/*#__PURE__*/i.createElement(n.ModalFooter,null,/*#__PURE__*/i.createElement(n.Button,{variant:"ghost",mr:3,onClick:w},D||"Cancel"),/*#__PURE__*/i.createElement(o.SubmitButton,null,F||"Submit")))}))}),B=["id","type","scope","component"],P=["title","body","children"],w=i.createContext(null),R={id:null,props:null,type:"modal"},j={alert:s,confirm:s,drawer:p,modal:E,menu:g,form:F},L=function(){return i.useContext(w)};exports.BaseDrawer=m,exports.BaseModal=h,exports.ConfirmDialog=s,exports.Drawer=p,exports.FormDialog=F,exports.MenuDialog=g,exports.MenuDialogList=D,exports.Modal=E,exports.ModalsContext=w,exports.ModalsProvider=function(e){var n=e.children,r=e.modals,t=i.useMemo(function(){return new Set},[]),o=i.useState({modal:R}),l=o[0],c=o[1],s=i.useMemo(function(){var e=a({},j,r);return function(n){return void 0===n&&(n="modal"),e[n]||e.modal}},[r]),d=function(e,n){if(!n)return c({modal:e});c(function(r){var t;return a({},r,((t={})[n]=e,t))})},f=function(e){"function"==typeof e&&(e={component:e});var n=e.id,r=void 0===n?t.size+1:n,o=e.type,l=void 0===o?"modal":o,i=e.scope,a=void 0===i?"modal":i,c=e.component,s={id:r,props:u(e,B),type:l,scope:a,component:c,isOpen:!0};return t.add(s),d(s,a),r},m=function(e,n){try{var r,o=[].concat(Array.from(t)),l=o.filter(function(n){return n.id===e})[0];return l?Promise.resolve(null==(r=l.props)||null==r.onClose?void 0:r.onClose({force:n})).then(function(e){if(!1!==e){var n=o.filter(function(e){return e.scope===l.scope});d(1===n.length?a({},l,{isOpen:!1}):n.length>1?n[n.length-2]:{id:null,props:null,type:l.type},l.scope)}}):Promise.resolve()}catch(e){return Promise.reject(e)}},p={open:f,drawer:function(e){return f(a({},e,{type:"drawer"}))},alert:function(e){return f(a({},e,{scope:"alert",type:"alert",cancelProps:{display:"none"},confirmProps:{label:"OK"},leastDestructiveFocus:"confirm"}))},confirm:function(e){return f(a({},e,{scope:"alert",type:"confirm"}))},menu:function(e){return f(a({},e,{type:"menu"}))},form:function(e){return f(a({},e,{type:"form"}))},close:m,closeAll:function(){t.forEach(function(e){var n;return null==(n=e.props)||null==n.onClose?void 0:n.onClose({force:!0})}),t.clear(),d(R)}},v=i.useMemo(function(){return Object.entries(l).map(function(e){var n=e[0],r=e[1],o=r.component||s(r.type),l=r.props||{},c=l.title,f=l.body,p=l.children,v=u(l,P);/*#__PURE__*/return i.createElement(o,a({key:n,title:c,children:f||p},v,{isOpen:!!r.isOpen,onClose:function(){return m(r.id)},onCloseComplete:function(){return function(e){var n=[].concat(Array.from(t)),r=n.filter(function(n){return n.id===e})[0];t.delete(r),1===n.filter(function(e){return e.scope===r.scope}).length&&d(R,r.scope)}(r.id)}}))})},[l]);/*#__PURE__*/return i.createElement(w.Provider,{value:p},v,n)},exports.useModals=function(){return L()},exports.useModalsContext=L;
|
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/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 {cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n {title && <ModalHeader>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nimport { Menu, MenuListProps } from '@saas-ui/menu'\n\nconst [StylesProvider, useStyles] = createStylesContext('MenuDialog')\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 return <Menu variant=\"dialog\" {...props} />\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n }\n)\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'\nimport { runIfFn } from '@chakra-ui/utils'\n\nimport {\n Form,\n Fields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n UseFormReturn,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<TFieldValues extends FieldValues = FieldValues>\n extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues>,\n | 'schema'\n | 'defaultValues'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * The cancel button label\n * @default \"Cancel\"\n */\n cancelLabel?: React.ReactNode\n /**\n * The submit button label\n * @default \"Submit\"\n */\n submitLabel?: React.ReactNode\n /**\n * If no children are passed, this will auto render fields based on the supplied schema.\n */\n children?: React.ReactNode\n /**\n * A schema field resolver used to auto generate form fields.\n */\n fieldResolver?: FieldResolver\n}\n\nexport const FormDialog = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FormDialogProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n onChange,\n onSubmit,\n onError,\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 ref,\n schema,\n resolver,\n defaultValues,\n onChange,\n onSubmit,\n onError,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n return (\n <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>\n <Form {...formProps}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) || (\n <Fields\n schema={schema}\n fieldResolver={fieldResolver}\n focusFirstField\n />\n )}\n </ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button variant=\"ghost\" mr={3} onClick={onClose}>\n {cancelLabel || 'Cancel'}\n </Button>\n <SubmitButton>{submitLabel || 'Submit'}</SubmitButton>\n </ModalFooter>\n )}\n </>\n )}\n </Form>\n </BaseModal>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormDialogProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { Modal, BaseModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\nimport { MenuDialog, MenuDialogProps } from './menu'\nimport { FormDialog, FormDialogProps } from './form'\n\nexport interface ModalsContextValue {\n open: (options: OpenOptions) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: (options: FormDialogOptions) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue | null>(\n null\n)\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n body?: React.ReactNode\n children?: React.ReactNode\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes =\n | 'modal'\n | 'drawer'\n | 'alert'\n | 'confirm'\n | 'menu'\n | string\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type: ModalTypes = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends ModalOptions>(\n options: T | React.FC<BaseModalProps>\n ): ModalId => {\n if (typeof options === 'function') {\n const component: React.FC<BaseModalProps> = options\n options = {\n component,\n } as unknown as T\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions): ModalId => {\n return open<DrawerOptions>({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ConfirmDialogOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ConfirmDialogOptions): ModalId => {\n return open<ConfirmDialogOptions>({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: MenuDialogOptions): ModalId => {\n return open<MenuDialogOptions>({\n ...options,\n type: 'menu',\n })\n }\n\n const form = (options: FormDialogOptions): ModalId => {\n return open<FormDialogOptions>({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n _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 = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!(config.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 = () =>\n React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["_excluded","ConfirmDialog","props","title","cancelLabel","_props$cancelLabel","_props$confirmLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","_props$closeOnCancel","closeOnConfirm","_props$closeOnConfirm","_props$leastDestructi","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","_objectWithoutPropertiesLoose","cancelRef","React","useRef","confirmRef","createElement","AlertDialog","_extends","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","_excluded2","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","BaseDrawer","DrawerBody","DrawerFooter","ChakraModal","Modal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","ModalFooter","BaseModal","ModalBody","StylesProvider","createStylesContext","useStyles","MenuDialog","Menu","variant","MenuDialogList","forwardRef","forwardedRef","rootProps","initialFocusRef","motionPreset","useMenuContext","menuRef","_useMenuList","useMenuList","ownProps","styles","useMultiStyleConfig","value","chakra","div","__css","outline","maxHeight","overflowY","list","boxShadow","border","FormDialog","schema","resolver","fieldResolver","defaultValues","onChange","onSubmit","onError","reValidateMode","shouldFocusError","_props$shouldFocusErr","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","submitLabel","formProps","Form","form","Fragment","runIfFn","Fields","focusFirstField","mr","SubmitButton","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","menu","useContext","ModalsContext","_ref","modals","_instances","useMemo","Set","useState","activeModals","setActiveModals","getModalComponent","_modals","setActiveModal","scope","prevState","_extends2","open","options","component","_options$id","size","_options$type","_options$scope","add","close","force","_modal$props","Array","from","filter","Promise","resolve","shouldClose","scoped","length","display","label","closeAll","forEach","_modal$props2","clear","Object","entries","map","_ref3","config","Component","_ref4","body","key","Provider","context","content","useModalsContext"],"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 {cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n {title && <ModalHeader>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n Menu,\n MenuListProps,\n} from '@chakra-ui/react'\n\nimport {} from '@chakra-ui/system'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('MenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n const { onClose, onCloseComplete, ...rest } = props\n\n return (\n <Menu\n variant=\"dialog\"\n onClose={() => {\n onClose?.()\n // Not supported in Menu, so we call it here instead\n // @todo Refactor this in v2?\n onCloseComplete?.()\n }}\n {...rest}\n />\n )\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n }\n)\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'\nimport { runIfFn } from '@chakra-ui/utils'\n\nimport {\n Form,\n Fields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n UseFormReturn,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<TFieldValues extends FieldValues = FieldValues>\n extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues>,\n | 'schema'\n | 'defaultValues'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * The cancel button label\n * @default \"Cancel\"\n */\n cancelLabel?: React.ReactNode\n /**\n * The submit button label\n * @default \"Submit\"\n */\n submitLabel?: React.ReactNode\n /**\n * If no children are passed, this will auto render fields based on the supplied schema.\n */\n children?: React.ReactNode\n /**\n * A schema field resolver used to auto generate form fields.\n */\n fieldResolver?: FieldResolver\n}\n\nexport const FormDialog = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FormDialogProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n onChange,\n onSubmit,\n onError,\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 ref,\n schema,\n resolver,\n defaultValues,\n onChange,\n onSubmit,\n onError,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n return (\n <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>\n <Form {...formProps}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) || (\n <Fields\n schema={schema}\n fieldResolver={fieldResolver}\n focusFirstField\n />\n )}\n </ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button variant=\"ghost\" mr={3} onClick={onClose}>\n {cancelLabel || 'Cancel'}\n </Button>\n <SubmitButton>{submitLabel || 'Submit'}</SubmitButton>\n </ModalFooter>\n )}\n </>\n )}\n </Form>\n </BaseModal>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormDialogProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { Modal, BaseModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\nimport { MenuDialog, MenuDialogProps } from './menu'\nimport { FormDialog, FormDialogProps } from './form'\n\nexport interface ModalsContextValue {\n open: (options: OpenOptions) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: (options: FormDialogOptions) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue | null>(\n null\n)\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n body?: React.ReactNode\n children?: React.ReactNode\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes =\n | 'modal'\n | 'drawer'\n | 'alert'\n | 'confirm'\n | 'menu'\n | string\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n /**\n * Whether the modal is open or not.\n * This is used internally to keep track of the modal state.\n */\n isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type: ModalTypes = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends ModalOptions>(\n options: T | React.FC<BaseModalProps>\n ): ModalId => {\n if (typeof options === 'function') {\n const component: React.FC<BaseModalProps> = options\n options = {\n component,\n } as unknown as T\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n isOpen: true,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions): ModalId => {\n return open<DrawerOptions>({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ConfirmDialogOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ConfirmDialogOptions): ModalId => {\n return open<ConfirmDialogOptions>({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: MenuDialogOptions): ModalId => {\n return open<MenuDialogOptions>({\n ...options,\n type: 'menu',\n })\n }\n\n const form = (options: FormDialogOptions): ModalId => {\n return open<FormDialogOptions>({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(\n {\n ...modal,\n isOpen: false,\n },\n modal.scope\n )\n } else if (scoped.length > 1) {\n setActiveModal(scoped[scoped.length - 2], modal.scope)\n } else {\n setActiveModal(\n {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n }\n\n const closeComplete = (id?: ModalId | null) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(initialModalState, modal.scope)\n }\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n menu,\n form,\n close,\n closeAll,\n }\n\n const content = React.useMemo(\n () =>\n Object.entries(activeModals).map(([scope, config]) => {\n const Component = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!config.isOpen}\n onClose={() => close(config.id)}\n onCloseComplete={() => closeComplete(config.id)}\n />\n )\n }),\n [activeModals]\n )\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = () =>\n React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["_excluded","ConfirmDialog","props","title","cancelLabel","_props$cancelLabel","_props$confirmLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","_props$closeOnCancel","closeOnConfirm","_props$closeOnConfirm","_props$leastDestructi","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","_objectWithoutPropertiesLoose","cancelRef","React","useRef","confirmRef","createElement","AlertDialog","_extends","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","_excluded2","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","BaseDrawer","DrawerBody","DrawerFooter","ChakraModal","Modal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","ModalFooter","BaseModal","ModalBody","_excluded3","StylesProvider","createStylesContext","MenuDialog","onCloseComplete","Menu","variant","MenuDialogList","forwardRef","forwardedRef","rootProps","initialFocusRef","motionPreset","_useMenuContext","useMenuContext","menuRef","useMenuList","ownProps","_useMenuList","styles","useMultiStyleConfig","value","chakra","div","__css","outline","maxHeight","overflowY","list","boxShadow","border","FormDialog","schema","resolver","fieldResolver","defaultValues","onChange","onSubmit","onError","reValidateMode","_props$shouldFocusErr","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","submitLabel","formProps","Form","form","Fragment","runIfFn","Fields","focusFirstField","mr","SubmitButton","ModalsContext","createContext","id","type","defaultModals","alert","confirm","drawer","modal","menu","useModalsContext","useContext","_ref","modals","useMemo","Set","useState","initialModalState","activeModals","_React$useState","setActiveModals","getModalComponent","_modals","setActiveModal","scope","prevState","_extends2","open","options","component","_instances","size","_options$type","_options$scope","add","close","force","_modal$props","Array","from","filter","shouldClose","scoped","length","Promise","resolve","e","reject","context","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","_ref4","config","Component","_ref5","body","key","closeComplete","_ref3","Provider"],"mappings":"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"}
|
package/dist/index.modern.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
import*as e from"react";import{AlertDialog as
|
1
|
+
import*as e from"react";import{AlertDialog as n,AlertDialogOverlay as l,AlertDialogContent as t,AlertDialogHeader as o,AlertDialogBody as r,AlertDialogFooter as s,Drawer as a,DrawerOverlay as i,DrawerContent as c,DrawerHeader as u,DrawerCloseButton as m,DrawerBody as d,DrawerFooter as p,Modal as f,ModalOverlay as h,ModalContent as C,ModalHeader as E,ModalCloseButton as O,ModalFooter as v,ModalBody as y,createStylesContext as b,forwardRef as g,useMenuContext as P,useMenuList as F,useMultiStyleConfig as M,chakra as R,Menu as w,Button as V}from"@chakra-ui/react";import{ButtonGroup as B,Button as L}from"@saas-ui/button";import{runIfFn as k}from"@chakra-ui/utils";import{Form as S,Fields as x,SubmitButton as D}from"@saas-ui/forms";function U(){return U=Object.assign?Object.assign.bind():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},U.apply(this,arguments)}function j(e,n){if(null==e)return{};var l,t,o={},r=Object.keys(e);for(t=0;t<r.length;t++)n.indexOf(l=r[t])>=0||(o[l]=e[l]);return o}const A=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],N=a=>{const{title:i,cancelLabel:c="Cancel",confirmLabel:u="Confirm",cancelProps:m,confirmProps:d,buttonGroupProps:p,isOpen:f,closeOnCancel:h=!0,closeOnConfirm:C=!0,leastDestructiveFocus:E="cancel",onClose:O,onCancel:v,onConfirm:y,children:b}=a,g=j(a,A),P=e.useRef(null),F=e.useRef(null);/*#__PURE__*/return e.createElement(n,U({isOpen:f,onClose:O},g,{leastDestructiveRef:"cancel"===E?P:F}),/*#__PURE__*/e.createElement(l,null,/*#__PURE__*/e.createElement(t,null,/*#__PURE__*/e.createElement(o,null,i),/*#__PURE__*/e.createElement(r,null,b),/*#__PURE__*/e.createElement(s,null,/*#__PURE__*/e.createElement(B,p,/*#__PURE__*/e.createElement(L,U({ref:P},m,{onClick:()=>{null==v||v(),h&&O()}}),c),/*#__PURE__*/e.createElement(L,U({ref:F},d,{onClick:()=>{null==y||y(),C&&O()}}),u))))))},G=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],_=["footer","children"],z=n=>{const{title:l,children:t,isOpen:o,onClose:r,hideCloseButton:s,hideOverlay:d}=n,p=j(n,G);/*#__PURE__*/return e.createElement(a,U({isOpen:o,onClose:r},p),!d&&/*#__PURE__*/e.createElement(i,null),/*#__PURE__*/e.createElement(c,null,/*#__PURE__*/e.createElement(u,null,l),!s&&/*#__PURE__*/e.createElement(m,null),t))},H=n=>{const{footer:l,children:t}=n,o=j(n,_);/*#__PURE__*/return e.createElement(z,o,/*#__PURE__*/e.createElement(d,null,t),l&&/*#__PURE__*/e.createElement(p,null,l))},K=["title","footer","children","isOpen","onClose","hideCloseButton","hideOverlay"],Y=["children"],q=n=>{const{title:l,footer:t,children:o,isOpen:r,onClose:s,hideCloseButton:a,hideOverlay:i}=n,c=j(n,K);/*#__PURE__*/return e.createElement(f,U({isOpen:r,onClose:s},c),!i&&/*#__PURE__*/e.createElement(h,null),/*#__PURE__*/e.createElement(C,null,l&&/*#__PURE__*/e.createElement(E,null,l),!a&&/*#__PURE__*/e.createElement(O,null),o,t&&/*#__PURE__*/e.createElement(v,null,t)))},I=n=>{const{children:l}=n,t=j(n,Y);/*#__PURE__*/return e.createElement(q,t,/*#__PURE__*/e.createElement(y,null,l))},J=["onClose","onCloseComplete"],Q=["rootProps","title","footer","initialFocusRef","hideCloseButton","motionPreset"],T=["ref"],[W]=b("MenuDialog"),X=n=>{const{onClose:l,onCloseComplete:t}=n,o=j(n,J);/*#__PURE__*/return e.createElement(w,U({variant:"dialog",onClose:()=>{null==l||l(),null==t||t()}},o))},Z=g((n,l)=>{const{title:t,footer:o,initialFocusRef:r,hideCloseButton:s,motionPreset:a}=n,i=j(n,Q),{isOpen:c,onClose:u,menuRef:m}=P(),d=F(i,l),{ref:p}=d,f=j(d,T),h=M("Menu",n);/*#__PURE__*/return e.createElement(q,{isOpen:c,onClose:u,initialFocusRef:r||m,title:t,hideCloseButton:s,motionPreset:a},/*#__PURE__*/e.createElement(W,{value:h},/*#__PURE__*/e.createElement(R.div,U({},f,{ref:p,__css:U({outline:0,maxHeight:"80vh",overflowY:"auto"},h.list,{boxShadow:"none",border:0})}))),o&&/*#__PURE__*/e.createElement(v,null,o))}),$=["children","schema","resolver","fieldResolver","defaultValues","onChange","onSubmit","onError","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","cancelLabel","submitLabel","footer","isOpen","onClose"],ee=g((n,l)=>{const{children:t,schema:o,resolver:r,fieldResolver:s,defaultValues:a,onChange:i,onSubmit:c,onError:u,reValidateMode:m,shouldFocusError:d=!0,shouldUnregister:p,shouldUseNativeValidation:f,criteriaMode:h,delayError:C,cancelLabel:E,submitLabel:O,footer:b,isOpen:g,onClose:P}=n,F=j(n,$),M={ref:l,schema:o,resolver:r,defaultValues:a,onChange:i,onSubmit:c,onError:u,reValidateMode:m,shouldFocusError:d,shouldUnregister:p,shouldUseNativeValidation:f,criteriaMode:h,delayError:C};/*#__PURE__*/return e.createElement(q,U({isOpen:g,onClose:P},F),/*#__PURE__*/e.createElement(S,M,n=>/*#__PURE__*/e.createElement(e.Fragment,null,/*#__PURE__*/e.createElement(y,null,k(t,n)||/*#__PURE__*/e.createElement(x,{schema:o,fieldResolver:s,focusFirstField:!0})),b||/*#__PURE__*/e.createElement(v,null,/*#__PURE__*/e.createElement(V,{variant:"ghost",mr:3,onClick:P},E||"Cancel"),/*#__PURE__*/e.createElement(D,null,O||"Submit")))))}),ne=["id","type","scope","component"],le=["title","body","children"],te=e.createContext(null),oe={id:null,props:null,type:"modal"},re={alert:N,confirm:N,drawer:H,modal:I,menu:X,form:ee};function se({children:n,modals:l}){const t=e.useMemo(()=>new Set,[]),[o,r]=e.useState({modal:oe}),s=e.useMemo(()=>{const e=U({},re,l);return(n="modal")=>e[n]||e.modal},[l]),a=(e,n)=>{if(!n)return r({modal:e});r(l=>U({},l,{[n]:e}))},i=e=>{"function"==typeof e&&(e={component:e});const{id:n=t.size+1,type:l="modal",scope:o="modal",component:r}=e,s={id:n,props:j(e,ne),type:l,scope:o,component:r,isOpen:!0};return t.add(s),a(s,o),n},c=async(e,n)=>{var l;const o=[...Array.from(t)],r=o.filter(n=>n.id===e)[0];if(!r)return;if(!1===await(null==(l=r.props)||null==l.onClose?void 0:l.onClose({force:n})))return;const s=o.filter(({scope:e})=>e===r.scope);a(1===s.length?U({},r,{isOpen:!1}):s.length>1?s[s.length-2]:{id:null,props:null,type:r.type},r.scope)},u={open:i,drawer:e=>i(U({},e,{type:"drawer"})),alert:e=>i(U({},e,{scope:"alert",type:"alert",cancelProps:{display:"none"},confirmProps:{label:"OK"},leastDestructiveFocus:"confirm"})),confirm:e=>i(U({},e,{scope:"alert",type:"confirm"})),menu:e=>i(U({},e,{type:"menu"})),form:e=>i(U({},e,{type:"form"})),close:c,closeAll:()=>{t.forEach(e=>{var n;return null==(n=e.props)||null==n.onClose?void 0:n.onClose({force:!0})}),t.clear(),a(oe)}},m=e.useMemo(()=>Object.entries(o).map(([n,l])=>{const o=l.component||s(l.type),r=l.props||{},{title:i,body:u,children:m}=r,d=j(r,le);/*#__PURE__*/return e.createElement(o,U({key:n,title:i,children:u||m},d,{isOpen:!!l.isOpen,onClose:()=>c(l.id),onCloseComplete:()=>(e=>{const n=[...Array.from(t)],l=n.filter(n=>n.id===e)[0];t.delete(l),1===n.filter(({scope:e})=>e===l.scope).length&&a(oe,l.scope)})(l.id)}))}),[o]);/*#__PURE__*/return e.createElement(te.Provider,{value:u},m,n)}const ae=()=>e.useContext(te),ie=()=>ae();export{z as BaseDrawer,q as BaseModal,N as ConfirmDialog,H as Drawer,ee as FormDialog,X as MenuDialog,Z as MenuDialogList,I as Modal,te as ModalsContext,se as ModalsProvider,ie as useModals,ae as useModalsContext};
|
2
2
|
//# sourceMappingURL=index.modern.js.map
|
package/dist/index.modern.js.map
CHANGED
@@ -1 +1 @@
|
|
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 {cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n {title && <ModalHeader>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nimport { Menu, MenuListProps } from '@saas-ui/menu'\n\nconst [StylesProvider, useStyles] = createStylesContext('MenuDialog')\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 return <Menu variant=\"dialog\" {...props} />\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n }\n)\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'\nimport { runIfFn } from '@chakra-ui/utils'\n\nimport {\n Form,\n Fields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n UseFormReturn,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<TFieldValues extends FieldValues = FieldValues>\n extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues>,\n | 'schema'\n | 'defaultValues'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * The cancel button label\n * @default \"Cancel\"\n */\n cancelLabel?: React.ReactNode\n /**\n * The submit button label\n * @default \"Submit\"\n */\n submitLabel?: React.ReactNode\n /**\n * If no children are passed, this will auto render fields based on the supplied schema.\n */\n children?: React.ReactNode\n /**\n * A schema field resolver used to auto generate form fields.\n */\n fieldResolver?: FieldResolver\n}\n\nexport const FormDialog = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FormDialogProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n onChange,\n onSubmit,\n onError,\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 ref,\n schema,\n resolver,\n defaultValues,\n onChange,\n onSubmit,\n onError,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n return (\n <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>\n <Form {...formProps}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) || (\n <Fields\n schema={schema}\n fieldResolver={fieldResolver}\n focusFirstField\n />\n )}\n </ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button variant=\"ghost\" mr={3} onClick={onClose}>\n {cancelLabel || 'Cancel'}\n </Button>\n <SubmitButton>{submitLabel || 'Submit'}</SubmitButton>\n </ModalFooter>\n )}\n </>\n )}\n </Form>\n </BaseModal>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormDialogProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { Modal, BaseModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\nimport { MenuDialog, MenuDialogProps } from './menu'\nimport { FormDialog, FormDialogProps } from './form'\n\nexport interface ModalsContextValue {\n open: (options: OpenOptions) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: (options: FormDialogOptions) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue | null>(\n null\n)\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n body?: React.ReactNode\n children?: React.ReactNode\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes =\n | 'modal'\n | 'drawer'\n | 'alert'\n | 'confirm'\n | 'menu'\n | string\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type: ModalTypes = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends ModalOptions>(\n options: T | React.FC<BaseModalProps>\n ): ModalId => {\n if (typeof options === 'function') {\n const component: React.FC<BaseModalProps> = options\n options = {\n component,\n } as unknown as T\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions): ModalId => {\n return open<DrawerOptions>({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ConfirmDialogOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ConfirmDialogOptions): ModalId => {\n return open<ConfirmDialogOptions>({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: MenuDialogOptions): ModalId => {\n return open<MenuDialogOptions>({\n ...options,\n type: 'menu',\n })\n }\n\n const form = (options: FormDialogOptions): ModalId => {\n return open<FormDialogOptions>({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n _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 = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!(config.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 = () =>\n React.useContext(ModalsContext) as ModalsContextValue\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","_excluded","cancelRef","React","useRef","confirmRef","createElement","AlertDialog","_extends","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","_excluded2","BaseDrawer","hideCloseButton","hideOverlay","_objectWithoutPropertiesLoose","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","ModalFooter","Modal","ModalBody","StylesProvider","useStyles","createStylesContext","Menu","variant","MenuDialogList","forwardRef","forwardedRef","initialFocusRef","motionPreset","menuRef","useMenuContext","_useMenuList","useMenuList","ownProps","styles","useMultiStyleConfig","value","chakra","div","__css","outline","maxHeight","overflowY","list","boxShadow","border","schema","resolver","fieldResolver","defaultValues","onChange","onSubmit","onError","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","submitLabel","formProps","Form","form","Fragment","runIfFn","Fields","focusFirstField","mr","SubmitButton","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","menu","MenuDialog","FormDialog","ModalsProvider","modals","_instances","useMemo","activeModals","setActiveModals","useState","_modals","scope","prevState","open","options","component","size","add","setActiveModal","close","async","force","Array","from","filter","_modal$props","delete","scoped","length","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","getModalComponent","body","Component","key","ModalsContext","Provider","context","useModalsContext","useContext"],"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 {cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmLabel}\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n {title && <ModalHeader>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n Menu,\n MenuListProps,\n} from '@chakra-ui/react'\n\nimport {} from '@chakra-ui/system'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('MenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n const { onClose, onCloseComplete, ...rest } = props\n\n return (\n <Menu\n variant=\"dialog\"\n onClose={() => {\n onClose?.()\n // Not supported in Menu, so we call it here instead\n // @todo Refactor this in v2?\n onCloseComplete?.()\n }}\n {...rest}\n />\n )\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n }\n)\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'\nimport { runIfFn } from '@chakra-ui/utils'\n\nimport {\n Form,\n Fields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n UseFormReturn,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<TFieldValues extends FieldValues = FieldValues>\n extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues>,\n | 'schema'\n | 'defaultValues'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * The cancel button label\n * @default \"Cancel\"\n */\n cancelLabel?: React.ReactNode\n /**\n * The submit button label\n * @default \"Submit\"\n */\n submitLabel?: React.ReactNode\n /**\n * If no children are passed, this will auto render fields based on the supplied schema.\n */\n children?: React.ReactNode\n /**\n * A schema field resolver used to auto generate form fields.\n */\n fieldResolver?: FieldResolver\n}\n\nexport const FormDialog = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FormDialogProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n onChange,\n onSubmit,\n onError,\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 ref,\n schema,\n resolver,\n defaultValues,\n onChange,\n onSubmit,\n onError,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n return (\n <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>\n <Form {...formProps}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) || (\n <Fields\n schema={schema}\n fieldResolver={fieldResolver}\n focusFirstField\n />\n )}\n </ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button variant=\"ghost\" mr={3} onClick={onClose}>\n {cancelLabel || 'Cancel'}\n </Button>\n <SubmitButton>{submitLabel || 'Submit'}</SubmitButton>\n </ModalFooter>\n )}\n </>\n )}\n </Form>\n </BaseModal>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormDialogProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { Modal, BaseModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\nimport { MenuDialog, MenuDialogProps } from './menu'\nimport { FormDialog, FormDialogProps } from './form'\n\nexport interface ModalsContextValue {\n open: (options: OpenOptions) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: (options: FormDialogOptions) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue | null>(\n null\n)\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n body?: React.ReactNode\n children?: React.ReactNode\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes =\n | 'modal'\n | 'drawer'\n | 'alert'\n | 'confirm'\n | 'menu'\n | string\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions\n> {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: TModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n /**\n * Whether the modal is open or not.\n * This is used internally to keep track of the modal state.\n */\n isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals: Record<string, React.FC<any>> = {\n ...defaultModals,\n ...modals,\n }\n\n return (type: ModalTypes = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = <T extends ModalOptions>(\n options: T | React.FC<BaseModalProps>\n ): ModalId => {\n if (typeof options === 'function') {\n const component: React.FC<BaseModalProps> = options\n options = {\n component,\n } as unknown as T\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n isOpen: true,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions): ModalId => {\n return open<DrawerOptions>({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ConfirmDialogOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ConfirmDialogOptions): ModalId => {\n return open<ConfirmDialogOptions>({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: MenuDialogOptions): ModalId => {\n return open<MenuDialogOptions>({\n ...options,\n type: 'menu',\n })\n }\n\n const form = (options: FormDialogOptions): ModalId => {\n return open<FormDialogOptions>({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(\n {\n ...modal,\n isOpen: false,\n },\n modal.scope\n )\n } else if (scoped.length > 1) {\n setActiveModal(scoped[scoped.length - 2], modal.scope)\n } else {\n setActiveModal(\n {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n }\n\n const closeComplete = (id?: ModalId | null) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(initialModalState, modal.scope)\n }\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n menu,\n form,\n close,\n closeAll,\n }\n\n const content = React.useMemo(\n () =>\n Object.entries(activeModals).map(([scope, config]) => {\n const Component = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!config.isOpen}\n onClose={() => close(config.id)}\n onCloseComplete={() => closeComplete(config.id)}\n />\n )\n }),\n [activeModals]\n )\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = () =>\n React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","createElement","AlertDialog","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","_extends","ref","onClick","_excluded","_excluded2","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","_objectWithoutPropertiesLoose","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","ModalFooter","Modal","ModalBody","StylesProvider","createStylesContext","MenuDialog","onCloseComplete","Menu","variant","forwardRef","forwardedRef","initialFocusRef","motionPreset","menuRef","useMenuContext","_useMenuList","useMenuList","ownProps","_excluded3","styles","useMultiStyleConfig","value","chakra","div","__css","outline","maxHeight","overflowY","list","boxShadow","border","schema","resolver","fieldResolver","defaultValues","onChange","onSubmit","onError","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","submitLabel","formProps","Form","form","Fragment","runIfFn","Fields","focusFirstField","mr","SubmitButton","createContext","initialModalState","id","type","alert","confirm","drawer","modal","menu","FormDialog","ModalsProvider","modals","_instances","useMemo","Set","activeModals","setActiveModals","useState","getModalComponent","_modals","defaultModals","setActiveModal","scope","prevState","open","options","component","size","add","close","async","force","_modal$props","Array","from","filter","scoped","length","context","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","_ref","body","Component","key","delete","closeComplete","ModalsContext","Provider","useModalsContext","useContext","useModals"],"mappings":"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"}
|
package/dist/menu.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
+
import { MenuListProps } from '@chakra-ui/react';
|
2
3
|
import { BaseModalProps } from './modal';
|
3
|
-
import { MenuListProps } from '@saas-ui/menu';
|
4
4
|
export interface MenuDialogProps extends BaseModalProps {
|
5
5
|
/**
|
6
6
|
* The modal footer, wrapped with `ModalFooter`
|
package/dist/menu.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EASL,aAAa,EACd,MAAM,kBAAkB,CAAA;AAIzB,OAAO,EAAa,cAAc,EAAE,MAAM,SAAS,CAAA;AAInD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAehD,CAAA;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CACR,cAAc,EACd,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,gBAAgB,CACrD,EACD,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;CAAG;AAEnC,eAAO,MAAM,cAAc,yEA8C1B,CAAA"}
|
package/dist/provider.d.ts
CHANGED
@@ -70,6 +70,11 @@ export interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions>
|
|
70
70
|
* This will ignore the `type` param.
|
71
71
|
*/
|
72
72
|
component?: React.FC<BaseModalProps>;
|
73
|
+
/**
|
74
|
+
* Whether the modal is open or not.
|
75
|
+
* This is used internally to keep track of the modal state.
|
76
|
+
*/
|
77
|
+
isOpen?: boolean;
|
73
78
|
}
|
74
79
|
export declare function ModalsProvider({ children, modals }: ModalsProviderProps): JSX.Element;
|
75
80
|
export declare const useModalsContext: () => ModalsContextValue;
|
package/dist/provider.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"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
|
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": "1.4.
|
3
|
+
"version": "1.4.3",
|
4
4
|
"description": "A modal manager for Chakra UI",
|
5
5
|
"source": "src/index.ts",
|
6
6
|
"exports": {
|
@@ -58,7 +58,7 @@
|
|
58
58
|
"dependencies": {
|
59
59
|
"@chakra-ui/utils": "^2.0.12",
|
60
60
|
"@saas-ui/button": "1.3.0",
|
61
|
-
"@saas-ui/forms": "1.4.
|
61
|
+
"@saas-ui/forms": "1.4.2",
|
62
62
|
"@saas-ui/menu": "1.3.2"
|
63
63
|
},
|
64
64
|
"peerDependencies": {
|
package/src/menu.tsx
CHANGED
@@ -8,13 +8,15 @@ import {
|
|
8
8
|
useMenuList,
|
9
9
|
createStylesContext,
|
10
10
|
useMultiStyleConfig,
|
11
|
+
Menu,
|
12
|
+
MenuListProps,
|
11
13
|
} from '@chakra-ui/react'
|
12
14
|
|
13
|
-
import {
|
15
|
+
import {} from '@chakra-ui/system'
|
14
16
|
|
15
|
-
import {
|
17
|
+
import { BaseModal, BaseModalProps } from './modal'
|
16
18
|
|
17
|
-
const [StylesProvider
|
19
|
+
const [StylesProvider] = createStylesContext('MenuDialog')
|
18
20
|
|
19
21
|
export interface MenuDialogProps extends BaseModalProps {
|
20
22
|
/**
|
@@ -24,7 +26,20 @@ export interface MenuDialogProps extends BaseModalProps {
|
|
24
26
|
}
|
25
27
|
|
26
28
|
export const MenuDialog: React.FC<MenuDialogProps> = (props) => {
|
27
|
-
|
29
|
+
const { onClose, onCloseComplete, ...rest } = props
|
30
|
+
|
31
|
+
return (
|
32
|
+
<Menu
|
33
|
+
variant="dialog"
|
34
|
+
onClose={() => {
|
35
|
+
onClose?.()
|
36
|
+
// Not supported in Menu, so we call it here instead
|
37
|
+
// @todo Refactor this in v2?
|
38
|
+
onCloseComplete?.()
|
39
|
+
}}
|
40
|
+
{...rest}
|
41
|
+
/>
|
42
|
+
)
|
28
43
|
}
|
29
44
|
|
30
45
|
export interface MenuDialogListProps
|
package/src/provider.tsx
CHANGED
@@ -97,6 +97,11 @@ export interface ModalConfig<
|
|
97
97
|
* This will ignore the `type` param.
|
98
98
|
*/
|
99
99
|
component?: React.FC<BaseModalProps>
|
100
|
+
/**
|
101
|
+
* Whether the modal is open or not.
|
102
|
+
* This is used internally to keep track of the modal state.
|
103
|
+
*/
|
104
|
+
isOpen?: boolean
|
100
105
|
}
|
101
106
|
|
102
107
|
const initialModalState: ModalConfig = {
|
@@ -174,6 +179,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
|
|
174
179
|
type,
|
175
180
|
scope,
|
176
181
|
component,
|
182
|
+
isOpen: true,
|
177
183
|
}
|
178
184
|
|
179
185
|
_instances.add(modal)
|
@@ -239,18 +245,41 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
|
|
239
245
|
return
|
240
246
|
}
|
241
247
|
|
248
|
+
const scoped = modals.filter(({ scope }) => scope === modal.scope)
|
249
|
+
|
250
|
+
if (scoped.length === 1) {
|
251
|
+
setActiveModal(
|
252
|
+
{
|
253
|
+
...modal,
|
254
|
+
isOpen: false,
|
255
|
+
},
|
256
|
+
modal.scope
|
257
|
+
)
|
258
|
+
} else if (scoped.length > 1) {
|
259
|
+
setActiveModal(scoped[scoped.length - 2], modal.scope)
|
260
|
+
} else {
|
261
|
+
setActiveModal(
|
262
|
+
{
|
263
|
+
id: null,
|
264
|
+
props: null,
|
265
|
+
type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted
|
266
|
+
},
|
267
|
+
modal.scope
|
268
|
+
)
|
269
|
+
}
|
270
|
+
}
|
271
|
+
|
272
|
+
const closeComplete = (id?: ModalId | null) => {
|
273
|
+
const modals = [...Array.from(_instances)]
|
274
|
+
const modal = modals.filter((modal) => modal.id === id)[0]
|
275
|
+
|
242
276
|
_instances.delete(modal)
|
243
277
|
|
244
278
|
const scoped = modals.filter(({ scope }) => scope === modal.scope)
|
245
279
|
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
props: null,
|
250
|
-
type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted
|
251
|
-
},
|
252
|
-
modal.scope
|
253
|
-
)
|
280
|
+
if (scoped.length === 1) {
|
281
|
+
setActiveModal(initialModalState, modal.scope)
|
282
|
+
}
|
254
283
|
}
|
255
284
|
|
256
285
|
const closeAll = () => {
|
@@ -271,22 +300,27 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
|
|
271
300
|
closeAll,
|
272
301
|
}
|
273
302
|
|
274
|
-
const content =
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
303
|
+
const content = React.useMemo(
|
304
|
+
() =>
|
305
|
+
Object.entries(activeModals).map(([scope, config]) => {
|
306
|
+
const Component = config.component || getModalComponent(config.type)
|
307
|
+
|
308
|
+
const { title, body, children, ...props } = config.props || {}
|
309
|
+
|
310
|
+
return (
|
311
|
+
<Component
|
312
|
+
key={scope}
|
313
|
+
title={title}
|
314
|
+
children={body || children}
|
315
|
+
{...props}
|
316
|
+
isOpen={!!config.isOpen}
|
317
|
+
onClose={() => close(config.id)}
|
318
|
+
onCloseComplete={() => closeComplete(config.id)}
|
319
|
+
/>
|
320
|
+
)
|
321
|
+
}),
|
322
|
+
[activeModals]
|
323
|
+
)
|
290
324
|
|
291
325
|
return (
|
292
326
|
<ModalsContext.Provider value={context}>
|