@saas-ui/modals 0.1.1 → 0.2.3

package/dist/index.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  AlertDialog,\n  AlertDialogBody,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogContent,\n  AlertDialogOverlay,\n  AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n  ButtonGroup,\n  ButtonGroupProps,\n  Button,\n  ButtonProps,\n} from '@saas-ui/button'\n\nexport interface ConfirmDialogProps\n  extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n  /**\n   * The dialog title\n   */\n  title?: React.ReactNode\n  /**\n   * The cancel button label\n   */\n  cancelLabel?: React.ReactNode\n  /**\n   * The confirm button label\n   */\n  confirmLabel?: React.ReactNode\n  /**\n   * The cancel button props\n   */\n  cancelProps?: ButtonProps\n  /**\n   * The confirm button props\n   */\n  confirmProps?: ButtonProps\n  /**\n   * The button group props\n   */\n  buttonGroupProps?: ButtonGroupProps\n  /**\n   * Close the dialog on cancel\n   * @default true\n   */\n  closeOnCancel?: boolean\n  /**\n   * Close the dialog on confirm\n   * @default true\n   */\n  closeOnConfirm?: boolean\n  /**\n   * Defines which button gets initial focus\n   * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n   */\n  leastDestructiveFocus?: 'cancel' | 'confirm'\n  /**\n   * Function that's called when cancel is clicked\n   */\n  onCancel?: () => void\n  /**\n   * Function that's called when confirm is clicked\n   */\n  onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n  const {\n    title,\n    cancelLabel = 'Cancel',\n    confirmLabel = 'Confirm',\n    cancelProps,\n    confirmProps,\n    buttonGroupProps,\n    isOpen,\n    closeOnCancel = true,\n    closeOnConfirm = true,\n    leastDestructiveFocus = 'cancel',\n    onClose,\n    onCancel,\n    onConfirm,\n    children,\n    ...rest\n  } = props\n\n  const cancelRef = React.useRef(null)\n  const confirmRef = React.useRef(null)\n\n  return (\n    <AlertDialog\n      isOpen={isOpen}\n      onClose={onClose}\n      {...rest}\n      leastDestructiveRef={\n        leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n      }\n    >\n      <AlertDialogOverlay>\n        <AlertDialogContent>\n          <AlertDialogHeader>{title}</AlertDialogHeader>\n\n          <AlertDialogBody>{children}</AlertDialogBody>\n\n          <AlertDialogFooter>\n            <ButtonGroup {...buttonGroupProps}>\n              <Button\n                ref={cancelRef}\n                {...cancelProps}\n                onClick={() => {\n                  onCancel?.()\n\n                  closeOnCancel && onClose()\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                ref={confirmRef}\n                {...confirmProps}\n                onClick={() => {\n                  onConfirm?.()\n\n                  closeOnConfirm && onClose()\n                }}\n              >\n                Confirm\n              </Button>\n            </ButtonGroup>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialogOverlay>\n    </AlertDialog>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  Drawer as ChakraDrawer,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerBody,\n  DrawerCloseButton,\n  DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n  /**\n   * The drawer title\n   */\n  title: React.ReactNode\n  /**\n   * Hide the close button\n   */\n  hideCloseButton?: boolean\n  /**\n   * Hide the overflow\n   */\n  hideOverlay?: boolean\n  children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n  const {\n    title,\n    children,\n    isOpen,\n    onClose,\n    hideCloseButton,\n    hideOverlay,\n    ...rest\n  } = props\n  return (\n    <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n      {!hideOverlay && <DrawerOverlay />}\n      <DrawerContent>\n        <DrawerHeader>{title}</DrawerHeader>\n        {!hideCloseButton && <DrawerCloseButton />}\n        {children}\n      </DrawerContent>\n    </ChakraDrawer>\n  )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n  /**\n   * Drawer footer content, wrapped with `DrawerFooter`\n   */\n  footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n  const { footer, children, ...rest } = props\n  return (\n    <BaseDrawer {...rest}>\n      <DrawerBody>{children}</DrawerBody>\n\n      {footer && <DrawerFooter>{footer}</DrawerFooter>}\n    </BaseDrawer>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  Modal as ChakraModal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalFooter,\n  ModalBody,\n  ModalCloseButton,\n  ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n  /**\n   * The modal title\n   */\n  title: React.ReactNode\n  /**\n   * 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    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        <ModalHeader>{title}</ModalHeader>\n        {!hideCloseButton && <ModalCloseButton />}\n        {children}\n      </ModalContent>\n    </ChakraModal>\n  )\n}\n\nexport interface ModalProps extends BaseModalProps {\n  /**\n   * The modal footer, wrapped with `ModalFooter`\n   */\n  footer?: React.ReactNode\n}\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n  const { children, footer, ...rest } = props\n  return (\n    <BaseModal {...rest}>\n      <ModalBody>{children}</ModalBody>\n\n      {footer && <ModalFooter>{footer}</ModalFooter>}\n    </BaseModal>\n  )\n}\n","import * as React from 'react'\n\nimport { Modal, ModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\n\nexport interface ModalsContextValue {\n  open?: (options: OpenOptions) => ModalId\n  drawer?: (options: ModalOptions) => ModalId\n  alert?: (options: ModalOptions) => ModalId\n  confirm?: (options: ModalOptions) => ModalId\n  close?: (id: ModalId) => void\n  closeAll?: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue>({})\n\ninterface ModalsProviderProps {\n  children: React.ReactNode\n  modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n  extends Omit<\n    (ModalProps & DrawerProps & ConfirmDialogProps) & {\n      body?: React.ReactNode\n    },\n    'onClose' | 'isOpen' | 'children'\n  > {\n  onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n  children?: React.ReactNode\n}\n\nexport interface OpenOptions extends ModalOptions {\n  type?: ModalTypes | string\n  scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm'\n\nexport interface ModalConfig {\n  /**\n   * The modal id, autogenerated when not set.\n   * Can be used to close modals.\n   */\n  id?: ModalId | null\n  /**\n   * The modal props\n   */\n  props?: ModalOptions | null\n  /**\n   * The modal scope\n   * Modals can only have one level per scope.\n   * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n   */\n  scope?: ModalScopes | string\n  /**\n   * The modal type to open.\n   * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n   *\n   * Custom types can be configured using the `modals` prop of `ModalProvider`\n   */\n  type?: ModalTypes | string\n}\n\nconst initialModalState: ModalConfig = {\n  id: null,\n  props: null,\n  type: 'modal',\n}\n\nconst defaultModals = {\n  alert: ConfirmDialog,\n  confirm: ConfirmDialog,\n  drawer: Drawer,\n  modal: Modal,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n  // Note that updating the Set doesn't trigger a re-render,\n  // use in conjuction with setActiveModals\n  const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n  const [activeModals, setActiveModals] = React.useState<\n    Record<string, ModalConfig>\n  >({\n    modal: initialModalState,\n  })\n\n  const getModalComponent = React.useMemo(() => {\n    const _modals = {\n      ...defaultModals,\n      ...modals,\n    }\n\n    return (type = 'modal') => {\n      const component = _modals[type] || _modals.modal\n\n      return component\n    }\n  }, [modals])\n\n  const setActiveModal = (modal: ModalConfig, scope?: string) => {\n    if (!scope) {\n      return setActiveModals({\n        modal,\n      })\n    }\n    setActiveModals((prevState) => ({\n      ...prevState,\n      [scope]: modal,\n    }))\n  }\n\n  const open = (options: OpenOptions): ModalId => {\n    const {\n      id = _instances.size + 1,\n      type = 'modal',\n      scope = 'modal',\n      ...props\n    } = options\n\n    const modal: ModalConfig = {\n      id,\n      props: {\n        ...props,\n        children: props.body || props.children,\n      },\n      type,\n      scope,\n    }\n\n    _instances.add(modal)\n    setActiveModal(modal, scope)\n\n    return id\n  }\n\n  const drawer = (options: ModalOptions): ModalId => {\n    return open({\n      ...options,\n      type: 'drawer',\n    })\n  }\n\n  const alert = (options: ModalOptions): ModalId => {\n    return open({\n      ...options,\n      scope: 'alert',\n      type: 'alert',\n      cancelProps: {\n        display: 'none',\n      },\n      confirmProps: {\n        label: 'OK',\n      },\n      leastDestructiveFocus: 'confirm',\n    })\n  }\n\n  const confirm = (options: ModalOptions): ModalId => {\n    return open({\n      ...options,\n      scope: 'alert',\n      type: 'confirm',\n    })\n  }\n\n  const close = async (id?: ModalId | null, force?: boolean) => {\n    const modals = [..._instances]\n    const modal = modals.filter((modal) => modal.id === id)[0]\n\n    if (!modal) {\n      return\n    }\n\n    const shouldClose = await modal.props?.onClose?.({ force })\n    if (shouldClose === false) {\n      return\n    }\n\n    _instances.delete(modal)\n\n    const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n    setActiveModal(\n      scoped[scoped.length - 2] || {\n        id: null,\n        props: null,\n        type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n      },\n      modal.scope\n    )\n  }\n\n  const closeAll = () => {\n    _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n    _instances.clear()\n\n    setActiveModal(initialModalState)\n  }\n\n  const context = {\n    open,\n    drawer,\n    alert,\n    confirm,\n    close,\n    closeAll,\n  }\n\n  const content = Object.entries(activeModals).map(([scope, config]) => {\n    const Component = getModalComponent(config.type)\n\n    const { title, children, ...props } = config.props || {}\n\n    return (\n      <Component\n        key={scope}\n        title={title}\n        children={children}\n        {...props}\n        isOpen={!!(config.id && _instances.size)}\n        onClose={() => close(config.id)}\n      />\n    )\n  })\n\n  return (\n    <ModalsContext.Provider value={context}>\n      {content}\n      {children}\n    </ModalsContext.Provider>\n  )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n  React.useContext(ModalsContext)\n\nexport const useModals = () => {\n  return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","Modal","ModalBody","ModalFooter","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","ModalsProvider","modals","_instances","useMemo","Set","activeModals","setActiveModals","useState","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","body","add","close","async","force","filter","_modal$props","delete","scoped","length","context","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider","value","useModalsContext","useContext","useModals"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  AlertDialog,\n  AlertDialogBody,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogContent,\n  AlertDialogOverlay,\n  AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n  ButtonGroup,\n  ButtonGroupProps,\n  Button,\n  ButtonProps,\n} from '@saas-ui/button'\n\nexport interface ConfirmDialogProps\n  extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n  /**\n   * The dialog title\n   */\n  title?: React.ReactNode\n  /**\n   * The cancel button label\n   */\n  cancelLabel?: React.ReactNode\n  /**\n   * The confirm button label\n   */\n  confirmLabel?: React.ReactNode\n  /**\n   * The cancel button props\n   */\n  cancelProps?: ButtonProps\n  /**\n   * The confirm button props\n   */\n  confirmProps?: ButtonProps\n  /**\n   * The button group props\n   */\n  buttonGroupProps?: ButtonGroupProps\n  /**\n   * Close the dialog on cancel\n   * @default true\n   */\n  closeOnCancel?: boolean\n  /**\n   * Close the dialog on confirm\n   * @default true\n   */\n  closeOnConfirm?: boolean\n  /**\n   * Defines which button gets initial focus\n   * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n   */\n  leastDestructiveFocus?: 'cancel' | 'confirm'\n  /**\n   * Function that's called when cancel is clicked\n   */\n  onCancel?: () => void\n  /**\n   * Function that's called when confirm is clicked\n   */\n  onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n  const {\n    title,\n    cancelLabel = 'Cancel',\n    confirmLabel = 'Confirm',\n    cancelProps,\n    confirmProps,\n    buttonGroupProps,\n    isOpen,\n    closeOnCancel = true,\n    closeOnConfirm = true,\n    leastDestructiveFocus = 'cancel',\n    onClose,\n    onCancel,\n    onConfirm,\n    children,\n    ...rest\n  } = props\n\n  const cancelRef = React.useRef(null)\n  const confirmRef = React.useRef(null)\n\n  return (\n    <AlertDialog\n      isOpen={isOpen}\n      onClose={onClose}\n      {...rest}\n      leastDestructiveRef={\n        leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n      }\n    >\n      <AlertDialogOverlay>\n        <AlertDialogContent>\n          <AlertDialogHeader>{title}</AlertDialogHeader>\n\n          <AlertDialogBody>{children}</AlertDialogBody>\n\n          <AlertDialogFooter>\n            <ButtonGroup {...buttonGroupProps}>\n              <Button\n                ref={cancelRef}\n                {...cancelProps}\n                onClick={() => {\n                  onCancel?.()\n\n                  closeOnCancel && onClose()\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                ref={confirmRef}\n                {...confirmProps}\n                onClick={() => {\n                  onConfirm?.()\n\n                  closeOnConfirm && onClose()\n                }}\n              >\n                Confirm\n              </Button>\n            </ButtonGroup>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialogOverlay>\n    </AlertDialog>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  Drawer as ChakraDrawer,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerBody,\n  DrawerCloseButton,\n  DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n  /**\n   * The drawer title\n   */\n  title: React.ReactNode\n  /**\n   * Hide the close button\n   */\n  hideCloseButton?: boolean\n  /**\n   * Hide the overflow\n   */\n  hideOverlay?: boolean\n  children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n  const {\n    title,\n    children,\n    isOpen,\n    onClose,\n    hideCloseButton,\n    hideOverlay,\n    ...rest\n  } = props\n  return (\n    <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n      {!hideOverlay && <DrawerOverlay />}\n      <DrawerContent>\n        <DrawerHeader>{title}</DrawerHeader>\n        {!hideCloseButton && <DrawerCloseButton />}\n        {children}\n      </DrawerContent>\n    </ChakraDrawer>\n  )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n  /**\n   * Drawer footer content, wrapped with `DrawerFooter`\n   */\n  footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n  const { footer, children, ...rest } = props\n  return (\n    <BaseDrawer {...rest}>\n      <DrawerBody>{children}</DrawerBody>\n\n      {footer && <DrawerFooter>{footer}</DrawerFooter>}\n    </BaseDrawer>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  Modal as ChakraModal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalFooter,\n  ModalBody,\n  ModalCloseButton,\n  ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n  /**\n   * The modal title\n   */\n  title?: React.ReactNode\n  /**\n   * The modal footer\n   */\n  footer?: React.ReactNode\n  /**\n   * Hide the close button\n   */\n  hideCloseButton?: boolean\n  /**\n   * Hide the overlay\n   */\n  hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n  const {\n    title,\n    footer,\n    children,\n    isOpen,\n    onClose,\n    hideCloseButton,\n    hideOverlay,\n    ...rest\n  } = props\n  return (\n    <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n      {!hideOverlay && <ModalOverlay />}\n      <ModalContent>\n        {title && <ModalHeader>{title}</ModalHeader>}\n        {!hideCloseButton && <ModalCloseButton />}\n        {children}\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </ModalContent>\n    </ChakraModal>\n  )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n  const { children, footer, ...rest } = props\n  return (\n    <BaseModal {...rest}>\n      <ModalBody>{children}</ModalBody>\n    </BaseModal>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  ModalFooter,\n  MenuDescendantsProvider,\n  MenuProvider,\n  MenuListProps,\n  useMenu,\n  useMenuList,\n  chakra,\n  StylesProvider,\n  useMultiStyleConfig,\n  useTheme,\n  useStyles,\n  forwardRef,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface MenuDialogProps extends BaseModalProps {\n  /**\n   * The modal footer, wrapped with `ModalFooter`\n   */\n  footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n  const { children, footer, isOpen, onClose, ...rest } = props\n\n  const styles = useMultiStyleConfig('Menu', props)\n  const { direction } = useTheme()\n  const { descendants, ...ctx } = useMenu({\n    onClose,\n    autoSelect: true,\n    defaultIsOpen: true,\n    closeOnBlur: false,\n    direction,\n  })\n  const context = React.useMemo(() => ctx, [ctx])\n\n  React.useEffect(() => {\n    ctx.openAndFocusFirstItem()\n  }, [props.isOpen])\n\n  return (\n    <BaseModal\n      isOpen={isOpen}\n      onClose={onClose}\n      initialFocusRef={ctx.menuRef}\n      {...rest}\n    >\n      <MenuDescendantsProvider value={descendants}>\n        <MenuProvider value={context}>\n          <StylesProvider value={styles}>{children}</StylesProvider>\n        </MenuProvider>\n      </MenuDescendantsProvider>\n\n      {footer && <ModalFooter>{footer}</ModalFooter>}\n    </BaseModal>\n  )\n}\n\nMenuDialog.defaultProps = {\n  variant: 'dialog',\n}\n\nexport const MenuDialogList = forwardRef<MenuListProps, 'div'>((props, ref) => {\n  const { rootProps, ...rest } = props\n\n  const ownProps = useMenuList(rest, ref) as any\n\n  const styles = useStyles()\n\n  return (\n    <chakra.div\n      {...ownProps}\n      __css={{\n        outline: 0,\n        maxHeight: '80vh', // can override this in theme\n        overflowY: 'auto', // can override this in theme\n        ...styles.list,\n        boxShadow: 'none',\n        border: 0,\n      }}\n    />\n  )\n})\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter } from '@chakra-ui/react'\n\nimport { Form, Fields, SubmitButton, FormProps } from '@saas-ui/forms'\nimport { Button } from '@saas-ui/button'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps\n  extends Omit<BaseModalProps, 'children'>,\n    Pick<\n      FormProps,\n      | 'schema'\n      | 'defaultValues'\n      | 'onSubmit'\n      | 'resolver'\n      | 'mode'\n      | 'reValidateMode'\n      | 'shouldFocusError'\n      | 'shouldUnregister'\n      | 'shouldUseNativeValidation'\n      | 'criteriaMode'\n      | 'delayError'\n    > {\n  /**\n   * The modal footer, will be wrapped with `ModalFooter`.\n   * Defaults to a cancel and submit button.\n   */\n  footer?: React.ReactNode\n  /**\n   * The cancel button label\n   * @default \"Cancel\"\n   */\n  cancelLabel?: React.ReactNode\n  /**\n   * The submit button label\n   * @default \"Submit\"\n   */\n  submitLabel?: React.ReactNode\n  /**\n   * If no children are passed, this will auto render fields based on the supplied schema.\n   */\n  children?: React.ReactNode\n}\n\nexport const FormDialog: React.FC<FormDialogProps> = (props) => {\n  const {\n    children,\n    schema,\n    defaultValues,\n    onSubmit,\n    reValidateMode,\n    shouldFocusError = true,\n    shouldUnregister,\n    shouldUseNativeValidation,\n    criteriaMode,\n    delayError,\n    cancelLabel,\n    submitLabel,\n    footer,\n    isOpen,\n    onClose,\n    ...rest\n  } = props\n\n  const formProps = {\n    schema,\n    defaultValues,\n    onSubmit,\n    reValidateMode,\n    shouldFocusError,\n    shouldUnregister,\n    shouldUseNativeValidation,\n    criteriaMode,\n    delayError,\n  }\n\n  const initialRef = React.useRef<HTMLButtonElement | null>(null)\n\n  return (\n    <BaseModal\n      isOpen={isOpen}\n      onClose={onClose}\n      initialFocusRef={initialRef}\n      {...rest}\n    >\n      <Form {...formProps}>\n        <ModalBody>{children || <Fields schema={schema} />}</ModalBody>\n\n        {footer || (\n          <ModalFooter>\n            <Button variant=\"ghost\" mr={3} onClick={onClose}>\n              {cancelLabel || 'Cancel'}\n            </Button>\n            <SubmitButton ref={initialRef}>\n              {submitLabel || 'Submit'}\n            </SubmitButton>\n          </ModalFooter>\n        )}\n      </Form>\n    </BaseModal>\n  )\n}\n","import * as React from 'react'\n\nimport { Modal, BaseModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\nimport { MenuDialog, MenuDialogProps } from './menu'\nimport { FormDialog } from './form'\n\nexport interface ModalsContextValue {\n  open?: (options: OpenOptions) => ModalId\n  drawer?: (options: ModalOptions) => ModalId\n  alert?: (options: ModalOptions) => ModalId\n  confirm?: (options: ModalOptions) => ModalId\n  menu?: (options: ModalOptions) => ModalId\n  form?: (options: ModalOptions) => ModalId\n  close?: (id: ModalId) => void\n  closeAll?: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue>({})\n\ninterface ModalsProviderProps {\n  children: React.ReactNode\n  modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n  extends Omit<\n    (BaseModalProps & DrawerProps & ConfirmDialogProps) & {\n      body?: React.ReactNode\n    },\n    'onClose' | 'isOpen' | 'children'\n  > {\n  onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n  children?: React.ReactNode\n}\n\nexport interface OpenOptions extends ModalOptions {\n  type?: ModalTypes | string\n  scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu'\n\nexport interface ModalConfig {\n  /**\n   * The modal id, autogenerated when not set.\n   * Can be used to close modals.\n   */\n  id?: ModalId | null\n  /**\n   * The modal props\n   */\n  props?: ModalOptions | null\n  /**\n   * The modal scope\n   * Modals can only have one level per scope.\n   * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n   */\n  scope?: ModalScopes | string\n  /**\n   * The modal type to open.\n   * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n   *\n   * Custom types can be configured using the `modals` prop of `ModalProvider`\n   */\n  type?: ModalTypes | string\n}\n\nconst initialModalState: ModalConfig = {\n  id: null,\n  props: null,\n  type: 'modal',\n}\n\nconst defaultModals = {\n  alert: ConfirmDialog,\n  confirm: ConfirmDialog,\n  drawer: Drawer,\n  modal: Modal,\n  menu: MenuDialog,\n  form: FormDialog,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n  // Note that updating the Set doesn't trigger a re-render,\n  // use in conjuction with setActiveModals\n  const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n  const [activeModals, setActiveModals] = React.useState<\n    Record<string, ModalConfig>\n  >({\n    modal: initialModalState,\n  })\n\n  const getModalComponent = React.useMemo(() => {\n    const _modals = {\n      ...defaultModals,\n      ...modals,\n    }\n\n    return (type = 'modal') => {\n      const component = _modals[type] || _modals.modal\n\n      return component\n    }\n  }, [modals])\n\n  const setActiveModal = (modal: ModalConfig, scope?: string) => {\n    if (!scope) {\n      return setActiveModals({\n        modal,\n      })\n    }\n    setActiveModals((prevState) => ({\n      ...prevState,\n      [scope]: modal,\n    }))\n  }\n\n  const open = (options: OpenOptions): ModalId => {\n    const {\n      id = _instances.size + 1,\n      type = 'modal',\n      scope = 'modal',\n      ...props\n    } = options\n\n    const modal: ModalConfig = {\n      id,\n      props: {\n        ...props,\n        children: props.body || props.children,\n      },\n      type,\n      scope,\n    }\n\n    _instances.add(modal)\n    setActiveModal(modal, scope)\n\n    return id\n  }\n\n  const drawer = (options: ModalOptions): ModalId => {\n    return open({\n      ...options,\n      type: 'drawer',\n    })\n  }\n\n  const alert = (options: ModalOptions): ModalId => {\n    return open({\n      ...options,\n      scope: 'alert',\n      type: 'alert',\n      cancelProps: {\n        display: 'none',\n      },\n      confirmProps: {\n        label: 'OK',\n      },\n      leastDestructiveFocus: 'confirm',\n    })\n  }\n\n  const confirm = (options: ModalOptions): ModalId => {\n    return open({\n      ...options,\n      scope: 'alert',\n      type: 'confirm',\n    })\n  }\n\n  const menu = (options: ModalOptions): ModalId => {\n    return open({\n      ...options,\n      type: 'menu',\n    })\n  }\n\n  const form = (options: ModalOptions): ModalId => {\n    return open({\n      ...options,\n      type: 'form',\n    })\n  }\n\n  const close = async (id?: ModalId | null, force?: boolean) => {\n    const modals = [..._instances]\n    const modal = modals.filter((modal) => modal.id === id)[0]\n\n    if (!modal) {\n      return\n    }\n\n    const shouldClose = await modal.props?.onClose?.({ force })\n    if (shouldClose === false) {\n      return\n    }\n\n    _instances.delete(modal)\n\n    const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n    setActiveModal(\n      scoped[scoped.length - 2] || {\n        id: null,\n        props: null,\n        type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n      },\n      modal.scope\n    )\n  }\n\n  const closeAll = () => {\n    _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n    _instances.clear()\n\n    setActiveModal(initialModalState)\n  }\n\n  const context = {\n    open,\n    drawer,\n    alert,\n    confirm,\n    menu,\n    form,\n    close,\n    closeAll,\n  }\n\n  const content = Object.entries(activeModals).map(([scope, config]) => {\n    const Component = getModalComponent(config.type)\n\n    const { title, children, ...props } = config.props || {}\n\n    return (\n      <Component\n        key={scope}\n        title={title}\n        children={children}\n        {...props}\n        isOpen={!!(config.id && _instances.size)}\n        onClose={() => close(config.id)}\n      />\n    )\n  })\n\n  return (\n    <ModalsContext.Provider value={context}>\n      {content}\n      {children}\n    </ModalsContext.Provider>\n  )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n  React.useContext(ModalsContext)\n\nexport const useModals = () => {\n  return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","ModalFooter","Modal","ModalBody","MenuDialog","styles","useMultiStyleConfig","direction","useTheme","useMenu","autoSelect","defaultIsOpen","closeOnBlur","descendants","ctx","context","useMemo","useEffect","openAndFocusFirstItem","initialFocusRef","menuRef","MenuDescendantsProvider","value","MenuProvider","StylesProvider","defaultProps","variant","MenuDialogList","forwardRef","ownProps","useMenuList","useStyles","chakra","div","__css","outline","maxHeight","overflowY","list","boxShadow","border","FormDialog","schema","defaultValues","onSubmit","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","submitLabel","formProps","initialRef","Form","Fields","mr","SubmitButton","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","menu","form","ModalsProvider","modals","_instances","Set","activeModals","setActiveModals","useState","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","body","add","close","async","force","filter","_modal$props","delete","scoped","length","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider","useModalsContext","useContext","useModals"],"mappings":"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"}

package/dist/menu.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { MenuListProps } from '@chakra-ui/react';
+import { BaseModalProps } from './modal';
+export interface MenuDialogProps extends BaseModalProps {
+    /**
+     * The modal footer, wrapped with `ModalFooter`
+     */
+    footer?: React.ReactNode;
+}
+export declare const MenuDialog: React.FC<MenuDialogProps>;
+export declare const MenuDialogList: import("@chakra-ui/react").ComponentWithAs<"div", MenuListProps>;
+//# sourceMappingURL=menu.d.ts.map

package/dist/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAIL,aAAa,EASd,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAa,cAAc,EAAE,MAAM,SAAS,CAAA;AAEnD,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,CAkChD,CAAA;AAMD,eAAO,MAAM,cAAc,kEAoBzB,CAAA"}

package/dist/modal.d.ts

@@ -4,7 +4,11 @@ export interface BaseModalProps extends ChakraModalProps {
     /**
      * The modal title
      */
-    title: React.ReactNode;
+    title?: React.ReactNode;
+    /**
+     * The modal footer
+     */
+    footer?: React.ReactNode;
     /**
      * Hide the close button
      */
@@ -15,11 +19,5 @@ export interface BaseModalProps extends ChakraModalProps {
     hideOverlay?: boolean;
 }
 export declare const BaseModal: React.FC<BaseModalProps>;
-export interface ModalProps extends BaseModalProps {
-    /**
-     * The modal footer, wrapped with `ModalFooter`
-     */
-    footer?: React.ReactNode;
-}
-export declare const Modal: React.FC<ModalProps>;
+export declare const Modal: React.FC<BaseModalProps>;
 //# sourceMappingURL=modal.d.ts.map

package/dist/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAQL,UAAU,IAAI,gBAAgB,EAC/B,MAAM,kBAAkB,CAAA;AAEzB,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACtD;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoB9C,CAAA;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAStC,CAAA"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAQL,UAAU,IAAI,gBAAgB,EAC/B,MAAM,kBAAkB,CAAA;AAEzB,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsB9C,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAO1C,CAAA"}

package/dist/provider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ModalProps } from './modal';
+import { BaseModalProps } from './modal';
 import { DrawerProps } from './drawer';
 import { ConfirmDialogProps } from './dialog';
 export interface ModalsContextValue {
@@ -7,6 +7,8 @@ export interface ModalsContextValue {
     drawer?: (options: ModalOptions) => ModalId;
     alert?: (options: ModalOptions) => ModalId;
     confirm?: (options: ModalOptions) => ModalId;
+    menu?: (options: ModalOptions) => ModalId;
+    form?: (options: ModalOptions) => ModalId;
     close?: (id: ModalId) => void;
     closeAll?: () => void;
 }
@@ -16,7 +18,7 @@ interface ModalsProviderProps {
     modals?: Record<string, React.FC<any>>;
 }
 export declare type ModalId = string | number;
-interface ModalOptions extends Omit<(ModalProps & DrawerProps & ConfirmDialogProps) & {
+interface ModalOptions extends Omit<(BaseModalProps & DrawerProps & ConfirmDialogProps) & {
     body?: React.ReactNode;
 }, 'onClose' | 'isOpen' | 'children'> {
     onClose?: (args: {
@@ -29,7 +31,7 @@ export interface OpenOptions extends ModalOptions {
     scope?: ModalScopes;
 }
 export declare type ModalScopes = 'modal' | 'alert';
-export declare type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm';
+export declare type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu';
 export interface ModalConfig {
     /**
      * The modal id, autogenerated when not set.

package/dist/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAiB,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IAC3C,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IAC1C,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IAC5C,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAO,MAAM,aAAa,mCAA8C,CAAA;AAExE,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;CACvC;AAED,oBAAY,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAErC,UAAU,YACR,SAAQ,IAAI,CACV,CAAC,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAAC,GAAG;IAChD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,EACD,SAAS,GAAG,QAAQ,GAAG,UAAU,CAClC;IACD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,IAAI,CAAA;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB;AAED,oBAAY,WAAW,GAAG,OAAO,GAAG,OAAO,CAAA;AAE3C,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAEjE,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC5B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;CAC3B;AAeD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,mBAAmB,eA4JvE;AAED,eAAO,MAAM,gBAAgB,QAAO,kBACH,CAAA;AAEjC,eAAO,MAAM,SAAS,0BAErB,CAAA"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAS,cAAc,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAiB,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAI5D,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAA;IACxC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IAC3C,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IAC1C,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IAC5C,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IACzC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAA;IACzC,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAO,MAAM,aAAa,mCAA8C,CAAA;AAExE,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;CACvC;AAED,oBAAY,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAErC,UAAU,YACR,SAAQ,IAAI,CACV,CAAC,cAAc,GAAG,WAAW,GAAG,kBAAkB,CAAC,GAAG;IACpD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,EACD,SAAS,GAAG,QAAQ,GAAG,UAAU,CAClC;IACD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,IAAI,CAAA;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB;AAED,oBAAY,WAAW,GAAG,OAAO,GAAG,OAAO,CAAA;AAE3C,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAE1E,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC5B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;CAC3B;AAiBD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,mBAAmB,eA4KvE;AAED,eAAO,MAAM,gBAAgB,QAAO,kBACH,CAAA;AAEjC,eAAO,MAAM,SAAS,0BAErB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/modals",
-  "version": "0.1.1",
+  "version": "0.2.3",
   "description": "A modal manager for Chakra UI",
   "source": "src/index.ts",
   "exports": {
@@ -22,6 +22,10 @@
     "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
     "typecheck": "tsc --noEmit"
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -52,7 +56,8 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@saas-ui/button": "0.2.0"
+    "@saas-ui/button": "0.2.1",
+    "@saas-ui/forms": "0.2.5"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=1.8.0",

package/src/form.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react'
+
+import { ModalBody, ModalFooter } from '@chakra-ui/react'
+
+import { Form, Fields, SubmitButton, FormProps } from '@saas-ui/forms'
+import { Button } from '@saas-ui/button'
+
+import { BaseModal, BaseModalProps } from './modal'
+
+export interface FormDialogProps
+  extends Omit<BaseModalProps, 'children'>,
+    Pick<
+      FormProps,
+      | 'schema'
+      | 'defaultValues'
+      | 'onSubmit'
+      | 'resolver'
+      | 'mode'
+      | 'reValidateMode'
+      | 'shouldFocusError'
+      | 'shouldUnregister'
+      | 'shouldUseNativeValidation'
+      | 'criteriaMode'
+      | 'delayError'
+    > {
+  /**
+   * The modal footer, will be wrapped with `ModalFooter`.
+   * Defaults to a cancel and submit button.
+   */
+  footer?: React.ReactNode
+  /**
+   * The cancel button label
+   * @default "Cancel"
+   */
+  cancelLabel?: React.ReactNode
+  /**
+   * The submit button label
+   * @default "Submit"
+   */
+  submitLabel?: React.ReactNode
+  /**
+   * If no children are passed, this will auto render fields based on the supplied schema.
+   */
+  children?: React.ReactNode
+}
+
+export const FormDialog: React.FC<FormDialogProps> = (props) => {
+  const {
+    children,
+    schema,
+    defaultValues,
+    onSubmit,
+    reValidateMode,
+    shouldFocusError = true,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError,
+    cancelLabel,
+    submitLabel,
+    footer,
+    isOpen,
+    onClose,
+    ...rest
+  } = props
+
+  const formProps = {
+    schema,
+    defaultValues,
+    onSubmit,
+    reValidateMode,
+    shouldFocusError,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError,
+  }
+
+  const initialRef = React.useRef<HTMLButtonElement | null>(null)
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      initialFocusRef={initialRef}
+      {...rest}
+    >
+      <Form {...formProps}>
+        <ModalBody>{children || <Fields schema={schema} />}</ModalBody>
+
+        {footer || (
+          <ModalFooter>
+            <Button variant="ghost" mr={3} onClick={onClose}>
+              {cancelLabel || 'Cancel'}
+            </Button>
+            <SubmitButton ref={initialRef}>
+              {submitLabel || 'Submit'}
+            </SubmitButton>
+          </ModalFooter>
+        )}
+      </Form>
+    </BaseModal>
+  )
+}

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from './dialog'
 export * from './drawer'
 export * from './modal'
+export * from './menu'
+export * from './form'
 export * from './provider'

package/src/menu.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+
+import {
+  ModalFooter,
+  MenuDescendantsProvider,
+  MenuProvider,
+  MenuListProps,
+  useMenu,
+  useMenuList,
+  chakra,
+  StylesProvider,
+  useMultiStyleConfig,
+  useTheme,
+  useStyles,
+  forwardRef,
+} from '@chakra-ui/react'
+
+import { BaseModal, BaseModalProps } from './modal'
+
+export interface MenuDialogProps extends BaseModalProps {
+  /**
+   * The modal footer, wrapped with `ModalFooter`
+   */
+  footer?: React.ReactNode
+}
+
+export const MenuDialog: React.FC<MenuDialogProps> = (props) => {
+  const { children, footer, isOpen, onClose, ...rest } = props
+
+  const styles = useMultiStyleConfig('Menu', props)
+  const { direction } = useTheme()
+  const { descendants, ...ctx } = useMenu({
+    onClose,
+    autoSelect: true,
+    defaultIsOpen: true,
+    closeOnBlur: false,
+    direction,
+  })
+  const context = React.useMemo(() => ctx, [ctx])
+
+  React.useEffect(() => {
+    ctx.openAndFocusFirstItem()
+  }, [props.isOpen])
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      initialFocusRef={ctx.menuRef}
+      {...rest}
+    >
+      <MenuDescendantsProvider value={descendants}>
+        <MenuProvider value={context}>
+          <StylesProvider value={styles}>{children}</StylesProvider>
+        </MenuProvider>
+      </MenuDescendantsProvider>
+
+      {footer && <ModalFooter>{footer}</ModalFooter>}
+    </BaseModal>
+  )
+}
+
+MenuDialog.defaultProps = {
+  variant: 'dialog',
+}
+
+export const MenuDialogList = forwardRef<MenuListProps, 'div'>((props, ref) => {
+  const { rootProps, ...rest } = props
+
+  const ownProps = useMenuList(rest, ref) as any
+
+  const styles = useStyles()
+
+  return (
+    <chakra.div
+      {...ownProps}
+      __css={{
+        outline: 0,
+        maxHeight: '80vh', // can override this in theme
+        overflowY: 'auto', // can override this in theme
+        ...styles.list,
+        boxShadow: 'none',
+        border: 0,
+      }}
+    />
+  )
+})

package/src/modal.tsx

@@ -15,7 +15,11 @@ export interface BaseModalProps extends ChakraModalProps {
   /**
    * The modal title
    */
-  title: React.ReactNode
+  title?: React.ReactNode
+  /**
+   * The modal footer
+   */
+  footer?: React.ReactNode
   /**
    * Hide the close button
    */
@@ -29,6 +33,7 @@ export interface BaseModalProps extends ChakraModalProps {
 export const BaseModal: React.FC<BaseModalProps> = (props) => {
   const {
     title,
+    footer,
     children,
     isOpen,
     onClose,
@@ -40,28 +45,20 @@ export const BaseModal: React.FC<BaseModalProps> = (props) => {
     <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>
       {!hideOverlay && <ModalOverlay />}
       <ModalContent>
-        <ModalHeader>{title}</ModalHeader>
+        {title && <ModalHeader>{title}</ModalHeader>}
         {!hideCloseButton && <ModalCloseButton />}
         {children}
+        {footer && <ModalFooter>{footer}</ModalFooter>}
       </ModalContent>
     </ChakraModal>
   )
 }
 
-export interface ModalProps extends BaseModalProps {
-  /**
-   * The modal footer, wrapped with `ModalFooter`
-   */
-  footer?: React.ReactNode
-}
-
-export const Modal: React.FC<ModalProps> = (props) => {
+export const Modal: React.FC<BaseModalProps> = (props) => {
   const { children, footer, ...rest } = props
   return (
     <BaseModal {...rest}>
       <ModalBody>{children}</ModalBody>
-
-      {footer && <ModalFooter>{footer}</ModalFooter>}
     </BaseModal>
   )
 }

package/src/provider.tsx

@@ -1,14 +1,18 @@
 import * as React from 'react'
 
-import { Modal, ModalProps } from './modal'
+import { Modal, BaseModalProps } from './modal'
 import { Drawer, DrawerProps } from './drawer'
 import { ConfirmDialog, ConfirmDialogProps } from './dialog'
+import { MenuDialog, MenuDialogProps } from './menu'
+import { FormDialog } from './form'
 
 export interface ModalsContextValue {
   open?: (options: OpenOptions) => ModalId
   drawer?: (options: ModalOptions) => ModalId
   alert?: (options: ModalOptions) => ModalId
   confirm?: (options: ModalOptions) => ModalId
+  menu?: (options: ModalOptions) => ModalId
+  form?: (options: ModalOptions) => ModalId
   close?: (id: ModalId) => void
   closeAll?: () => void
 }
@@ -24,7 +28,7 @@ export type ModalId = string | number
 
 interface ModalOptions
   extends Omit<
-    (ModalProps & DrawerProps & ConfirmDialogProps) & {
+    (BaseModalProps & DrawerProps & ConfirmDialogProps) & {
       body?: React.ReactNode
     },
     'onClose' | 'isOpen' | 'children'
@@ -40,7 +44,7 @@ export interface OpenOptions extends ModalOptions {
 
 export type ModalScopes = 'modal' | 'alert'
 
-export type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm'
+export type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu'
 
 export interface ModalConfig {
   /**
@@ -78,6 +82,8 @@ const defaultModals = {
   confirm: ConfirmDialog,
   drawer: Drawer,
   modal: Modal,
+  menu: MenuDialog,
+  form: FormDialog,
 }
 
 export function ModalsProvider({ children, modals }: ModalsProviderProps) {
@@ -170,6 +176,20 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     })
   }
 
+  const menu = (options: ModalOptions): ModalId => {
+    return open({
+      ...options,
+      type: 'menu',
+    })
+  }
+
+  const form = (options: ModalOptions): ModalId => {
+    return open({
+      ...options,
+      type: 'form',
+    })
+  }
+
   const close = async (id?: ModalId | null, force?: boolean) => {
     const modals = [..._instances]
     const modal = modals.filter((modal) => modal.id === id)[0]
@@ -209,6 +229,8 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     drawer,
     alert,
     confirm,
+    menu,
+    form,
     close,
     closeAll,
   }

package/.turbo/turbo-build.log

@@ -1,6 +0,0 @@
-@saas-ui/modals:build: cache hit, replaying output c20143510457fd4d
-@saas-ui/modals:build: Build "@saas-ui/modals" to dist:
-@saas-ui/modals:build:       1.82 kB: index.js.gz
-@saas-ui/modals:build:       1.63 kB: index.js.br
-@saas-ui/modals:build:        1696 B: index.modern.js.gz
-@saas-ui/modals:build:        1529 B: index.modern.js.br