npm - @saas-ui/modals - Versions diffs - 2.0.0-next.8 → 2.0.0-next.9 - Mend

@saas-ui/modals 2.0.0-next.8 → 2.0.0-next.9

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.

Files changed (15) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # @saas-ui/modals
+## 2.0.0-next.9
+### Minor Changes
+- 84e59fec: Added new createModals method to create typesafe modals managers with support for custom modals
+- 1177329d: BaseModal now accepts header, content and footer props
+### Patch Changes
+- Updated dependencies [84e59fec]
+  - @saas-ui/forms@2.0.0-next.9
 ## 2.0.0-next.8
 ### Patch Changes

package/dist/index.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalProps, MenuListProps } from '@chakra-ui/react';
+import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, MenuListProps } from '@chakra-ui/react';
+import { MaybeRenderProp } from '@chakra-ui/react-utils';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
-import { FieldValues, FormProps, FieldResolver } from '@saas-ui/forms';
+import * as _saas_ui_forms from '@saas-ui/forms';
+import { FieldValues, FieldProps, FormProps, FieldResolver } from '@saas-ui/forms';
+import * as react_hook_form from 'react-hook-form';
 interface ConfirmDialogProps extends Omit<AlertDialogProps, 'leastDestructiveRef'> {
     /**
@@ -78,11 +81,18 @@ interface DrawerProps extends BaseDrawerProps {
 }
 declare const Drawer: React.FC<DrawerProps>;
-interface BaseModalProps extends ModalProps {
+interface BaseModalProps extends Omit<ModalProps, 'children'> {
     /**
      * The modal title
      */
     title?: React.ReactNode;
+    /**
+     * The modal children
+     */
+    children: MaybeRenderProp<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
     /**
      * The modal footer
      */
@@ -95,6 +105,18 @@ interface BaseModalProps extends ModalProps {
      * Hide the overlay
      */
     hideOverlay?: boolean;
+    /**
+     * Props for the modal header
+     */
+    headerProps?: ModalHeaderProps;
+    /**
+     * Props for the modal content
+     */
+    contentProps?: ModalContentProps;
+    /**
+     * Props for the modal footer
+     */
+    footerProps?: ModalFooterProps;
 }
 declare const BaseModal: React.FC<BaseModalProps>;
 declare const Modal: React.FC<BaseModalProps>;
@@ -110,7 +132,7 @@ interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose'
 }
 declare const MenuDialogList: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", MenuDialogListProps>;
-interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TFieldValues, TContext>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError'> {
+interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TFieldValues, TContext, TSchema, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'children'> {
     /**
      * The modal footer, will be wrapped with `ModalFooter`.
      * Defaults to a cancel and submit button.
@@ -126,10 +148,6 @@ interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TConte
      * @default "Submit"
      */
     submitLabel?: React.ReactNode;
-    /**
-     * If no children are passed, this will auto render fields based on the supplied schema.
-     */
-    children?: React.ReactNode;
     /**
      * A schema field resolver used to auto generate form fields.
      */
@@ -140,32 +158,44 @@ interface FormDialogProps<TFieldValues extends FieldValues = FieldValues, TConte
  *
  * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
  */
-declare const FormDialog: <TFieldValues extends FieldValues>(props: FormDialogProps<TFieldValues, object> & {
+declare const FormDialog: <TFieldValues extends FieldValues>(props: FormDialogProps<TFieldValues, object, any, FieldProps<TFieldValues>> & {
     ref?: React.ForwardedRef<HTMLFormElement> | undefined;
 }) => React.ReactElement;
-interface ModalsContextValue {
-    open: (options: OpenOptions) => ModalId;
+interface ModalsContextValue<TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>, TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>> {
+    open: <T extends OpenOptions<TTypes>>(componentOrOptions: T extends {
+        component: infer TComponent extends React.FC<any>;
+    } ? WithModalOptions<React.ComponentPropsWithRef<TComponent>> : T extends {
+        type: infer TType extends keyof TModals;
+    } ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>> : T, options?: T extends React.FC<any> ? WithModalOptions<React.ComponentPropsWithRef<T>> : never) => ModalId;
     drawer: (options: DrawerOptions) => ModalId;
     alert: (options: ConfirmDialogOptions) => ModalId;
     confirm: (options: ConfirmDialogOptions) => ModalId;
     menu: (options: MenuDialogOptions) => ModalId;
-    form: (options: FormDialogOptions) => ModalId;
+    form: <TProps extends FormDialogProps = FormDialogProps>(options: WithModalOptions<TProps>) => ModalId;
     close: (id: ModalId) => void;
     closeAll: () => void;
 }
-declare const ModalsContext: React.Context<ModalsContextValue | null>;
-interface ModalsProviderProps {
+declare const ModalsContext: React.Context<ModalsContextValue<{
+    alert: React.FC<ConfirmDialogProps>;
+    confirm: React.FC<ConfirmDialogProps>;
+    drawer: React.FC<DrawerProps>;
+    modal: React.FC<BaseModalProps>;
+    menu: React.FC<MenuDialogProps>;
+    form: <TFieldValues extends react_hook_form.FieldValues>(props: FormDialogProps<TFieldValues, object, any, _saas_ui_forms.FieldProps<TFieldValues>> & {
+        ref?: React.ForwardedRef<HTMLFormElement> | undefined;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null>;
+interface ModalsProviderProps<TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>> {
     children: React.ReactNode;
-    modals?: Record<string, React.FC<any>>;
+    modals?: TModals;
 }
 type ModalId = string | number;
-interface ModalOptions extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
+type WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions;
+interface ModalOptions extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {
     onClose?: (args: {
         force?: boolean;
     }) => Promise<boolean | undefined> | void;
-    body?: React.ReactNode;
-    children?: React.ReactNode;
     [key: string]: any;
 }
 interface DrawerOptions extends ModalOptions, Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {
@@ -176,13 +206,12 @@ interface MenuDialogOptions extends ModalOptions, Omit<MenuDialogProps, 'onClose
 }
 interface FormDialogOptions extends ModalOptions, Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {
 }
-interface OpenOptions extends ModalOptions {
-    type?: ModalTypes;
+interface OpenOptions<TModalTypes extends string> extends ModalOptions {
+    type?: TModalTypes;
     scope?: ModalScopes;
 }
 type ModalScopes = 'modal' | 'alert';
-type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm' | 'menu' | string;
-interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
+interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions, TModalTypes extends string = string> {
     /**
      * The modal id, autogenerated when not set.
      * Can be used to close modals.
@@ -204,7 +233,7 @@ interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
      *
      * Custom types can be configured using the `modals` prop of `ModalProvider`
      */
-    type?: ModalTypes;
+    type?: TModalTypes;
     /**
      * Render a custom modal component.
      * This will ignore the `type` param.
@@ -217,7 +246,24 @@ interface ModalConfig<TModalOptions extends ModalOptions = ModalOptions> {
     isOpen?: boolean;
 }
 declare function ModalsProvider({ children, modals }: ModalsProviderProps): JSX.Element;
-declare const useModalsContext: () => ModalsContextValue;
-declare const useModals: () => ModalsContextValue;
+declare const useModalsContext: () => ModalsContextValue<Record<string, React.FC<any>>, string>;
+declare const useModals: () => ModalsContextValue<Record<string, React.FC<any>>, string>;
+interface CreateModalsOptions<TModalDefs> {
+    modals: TModalDefs;
+}
+declare const createModals: <TModalDefs extends Record<string, React.FC<any>>>(options: CreateModalsOptions<TModalDefs>) => {
+    ModalsProvider: (props: Omit<ModalsProviderProps, 'modals'>) => JSX.Element;
+    useModals: () => ModalsContextValue<{
+        alert: React.FC<ConfirmDialogProps>;
+        confirm: React.FC<ConfirmDialogProps>;
+        drawer: React.FC<DrawerProps>;
+        modal: React.FC<BaseModalProps>;
+        menu: React.FC<MenuDialogProps>;
+        form: <TFieldValues extends react_hook_form.FieldValues>(props: FormDialogProps<TFieldValues, object, any, _saas_ui_forms.FieldProps<TFieldValues>> & {
+            ref?: React.ForwardedRef<HTMLFormElement> | undefined;
+        }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    } & TModalDefs, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer" | Extract<keyof TModalDefs, string>>;
+};
-export { BaseDrawer, BaseDrawerProps, BaseModal, BaseModalProps, ConfirmDialog, ConfirmDialogOptions, ConfirmDialogProps, Drawer, DrawerOptions, DrawerProps, FormDialog, FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, MenuDialogListProps, MenuDialogOptions, MenuDialogProps, Modal, ModalConfig, ModalId, ModalScopes, ModalTypes, ModalsContext, ModalsContextValue, ModalsProvider, OpenOptions, useModals, useModalsContext };
+export { BaseDrawer, BaseDrawerProps, BaseModal, BaseModalProps, ConfirmDialog, ConfirmDialogOptions, ConfirmDialogProps, CreateModalsOptions, Drawer, DrawerOptions, DrawerProps, FormDialog, FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, MenuDialogListProps, MenuDialogOptions, MenuDialogProps, Modal, ModalConfig, ModalId, ModalScopes, ModalsContext, ModalsContextValue, ModalsProvider, ModalsProviderProps, OpenOptions, createModals, useModals, useModalsContext };

package/dist/index.js CHANGED Viewed

@@ -3,6 +3,7 @@
 var React2 = require('react');
 var react = require('@chakra-ui/react');
 var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@chakra-ui/utils');
 var reactUtils = require('@saas-ui/react-utils');
 var forms = require('@saas-ui/forms');
@@ -122,21 +123,30 @@ var BaseModal = (props) => {
     onClose,
     hideCloseButton,
     hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
     ...rest
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Modal, { isOpen, onClose, ...rest, children: [
     !hideOverlay && /* @__PURE__ */ jsxRuntime.jsx(react.ModalOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.ModalContent, { children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.ModalContent, { ...contentProps, children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { ...headerProps, children: title }),
       !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, {}),
-      children,
-      footer && /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { children: footer })
+      utils.runIfFn(children, {
+        isOpen,
+        onClose
+      }),
+      footer && /* @__PURE__ */ jsxRuntime.jsx(react.ModalFooter, { ...footerProps, children: footer })
     ] })
   ] });
 };
 var Modal = (props) => {
-  const { children, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children }) });
+  const { children, isOpen, onClose, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { ...rest, isOpen, onClose, children: /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: utils.runIfFn(children, {
+    isOpen,
+    onClose
+  }) }) });
 };
 var [StylesProvider] = react.createStylesContext("SuiMenuDialog");
 var MenuDialog = (props) => {
@@ -161,12 +171,14 @@ var MenuDialogList = react.forwardRef(
       footer,
       initialFocusRef,
       hideCloseButton,
-      motionPreset,
+      motionPreset = "slideInBottom",
+      isCentered: isCenteredProp,
       ...rest
     } = props;
     const { isOpen, onClose, menuRef } = react.useMenuContext();
     const { ref, ...ownProps } = react.useMenuList(rest, forwardedRef);
     const styles = react.useMultiStyleConfig("Menu", props);
+    const isCentered = react.useBreakpointValue({ base: true, md: false });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       BaseModal,
       {
@@ -176,6 +188,8 @@ var MenuDialogList = react.forwardRef(
         title,
         hideCloseButton,
         motionPreset,
+        isCentered: isCenteredProp != null ? isCenteredProp : isCentered,
+        contentProps: { mx: 4 },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(
             react.chakra.div,
@@ -266,14 +280,8 @@ var FormDialog = react.forwardRef(
     ] }) }) });
   }
 );
-var ModalsContext = React2__namespace.createContext(
-  null
-);
-var initialModalState = {
-  id: null,
-  props: null,
-  type: "modal"
-};
+// src/default-modals.ts
 var defaultModals = {
   alert: ConfirmDialog,
   confirm: ConfirmDialog,
@@ -282,6 +290,12 @@ var defaultModals = {
   menu: MenuDialog,
   form: FormDialog
 };
+var ModalsContext = React2__namespace.createContext(null);
+var initialModalState = {
+  id: null,
+  props: null,
+  type: "modal"
+};
 function ModalsProvider({ children, modals }) {
   const _instances = React2__namespace.useMemo(() => /* @__PURE__ */ new Set(), []);
   const [activeModals, setActiveModals] = React2__namespace.useState({
@@ -308,12 +322,15 @@ function ModalsProvider({ children, modals }) {
       [scope]: modal
     }));
   };
-  const open = (options) => {
-    if (typeof options === "function") {
-      const component2 = options;
-      options = {
-        component: component2
+  const open = (componentOrOptions, options) => {
+    let _options;
+    if (typeof componentOrOptions === "function") {
+      _options = {
+        component: componentOrOptions,
+        ...options
       };
+    } else {
+      _options = componentOrOptions;
     }
     const {
       id = _instances.size + 1,
@@ -321,7 +338,7 @@ function ModalsProvider({ children, modals }) {
       scope = "modal",
       component,
       ...props
-    } = options;
+    } = _options;
     const modal = {
       id,
       props,
@@ -462,6 +479,19 @@ var useModalsContext = () => React2__namespace.useContext(ModalsContext);
 var useModals = () => {
   return useModalsContext();
 };
+var createModals = (options) => {
+  const modals = {
+    ...defaultModals,
+    ...options.modals
+  };
+  const Provider = (props) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ModalsProvider, { children: props.children, modals });
+  };
+  return {
+    ModalsProvider: Provider,
+    useModals
+  };
+};
 exports.BaseDrawer = BaseDrawer;
 exports.BaseModal = BaseModal;
@@ -473,6 +503,7 @@ exports.MenuDialogList = MenuDialogList;
 exports.Modal = Modal;
 exports.ModalsContext = ModalsContext;
 exports.ModalsProvider = ModalsProvider;
+exports.createModals = createModals;
 exports.useModals = useModals;
 exports.useModalsContext = useModalsContext;
 //# sourceMappingURL=out.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx"],"names":["jsx","jsxs","ModalFooter","ModalBody","Button","forwardRef","React","component","modals","modal","children"],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\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 {cancelProps?.children \|\| cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children \|\| 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 { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\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 _dark: {\n / @ts-expect-error /\n ...(styles.list._dark \|\| {}),\n boxShadow: 'none',\n },\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 '@saas-ui/react-utils'\n\nimport {\n Form,\n AutoFields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues, TContext>,\n \| 'schema'\n \| 'defaultValues'\n \| 'values'\n \| 'context'\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/\n Can be used to quickly request information from people without leaving the current page.\n \n @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog\n /\nexport const FormDialog = forwardRef(\n <\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n >(\n props: FormDialogProps<TFieldValues, TContext>,\n ref: React.ForwardedRef<HTMLFormElement>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError = 100,\n cancelLabel = 'Cancel',\n submitLabel = 'Submit',\n footer,\n isOpen,\n onClose,\n ...rest\n } = props\n\n const formProps = {\n ref,\n schema,\n resolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\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} ref={ref}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) \|\| (\n <AutoFields\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}\n </Button>\n <SubmitButton>{submitLabel}</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<HTMLFormElement>\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"]}
1	+ {"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx","../src/default-modals.ts","../src/create-modals.tsx"],"names":["jsx","jsxs","ModalFooter","ModalBody","Button","forwardRef","runIfFn","React","modals","modal","children"],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\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 {cancelProps?.children \|\| cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children \|\| 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 ModalContentProps,\n ModalHeaderProps,\n ModalFooterProps,\n} from '@chakra-ui/react'\nimport { MaybeRenderProp } from '@chakra-ui/react-utils'\nimport { runIfFn } from '@chakra-ui/utils'\n\nexport interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {\n /*\n The modal title\n /\n title?: React.ReactNode\n /\n The modal children\n /\n children: MaybeRenderProp<{\n isOpen: boolean\n onClose: () => void\n }>\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 Props for the modal header\n /\n headerProps?: ModalHeaderProps\n /\n Props for the modal content\n /\n contentProps?: ModalContentProps\n /\n Props for the modal footer\n /\n footerProps?: ModalFooterProps\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 headerProps,\n contentProps,\n footerProps,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent {...contentProps}>\n {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, isOpen, onClose, ...rest } = props\n return (\n <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>\n <ModalBody>\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n </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 useBreakpointValue,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\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 = 'slideInBottom',\n isCentered: isCenteredProp,\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 const isCentered = useBreakpointValue({ base: true, md: false })\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 isCentered={isCenteredProp ?? isCentered}\n contentProps={{ mx: 4 }}\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 _dark: {\n / @ts-expect-error /\n ...(styles.list._dark \|\| {}),\n boxShadow: 'none',\n },\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 '@saas-ui/react-utils'\n\nimport {\n Form,\n AutoFields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n FieldProps,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object,\n TSchema = any,\n TFieldTypes = FieldProps<TFieldValues>\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,\n \| 'schema'\n \| 'defaultValues'\n \| 'values'\n \| 'context'\n \| 'onChange'\n \| 'onSubmit'\n \| 'onError'\n \| 'resolver'\n \| 'mode'\n \| 'reValidateMode'\n \| 'shouldFocusError'\n \| 'shouldUnregister'\n \| 'shouldUseNativeValidation'\n \| 'criteriaMode'\n \| 'delayError'\n \| 'resetOptions'\n \| 'children'\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 A schema field resolver used to auto generate form fields.\n /\n fieldResolver?: FieldResolver\n}\n/\n Can be used to quickly request information from people without leaving the current page.\n \n @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog\n /\nexport const FormDialog = forwardRef(\n <\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n >(\n props: FormDialogProps<TFieldValues, TContext>,\n ref: React.ForwardedRef<HTMLFormElement>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError = 100,\n cancelLabel = 'Cancel',\n submitLabel = 'Submit',\n footer,\n isOpen,\n onClose,\n ...rest\n } = props\n\n const formProps = {\n ref,\n schema,\n resolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\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} ref={ref}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) \|\| (\n <AutoFields\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}\n </Button>\n <SubmitButton>{submitLabel}</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<HTMLFormElement>\n }\n) => React.ReactElement\n","import as React from 'react'\n\nimport { BaseModalProps } from './modal'\nimport { DrawerProps } from './drawer'\nimport { ConfirmDialogProps } from './dialog'\nimport { MenuDialogProps } from './menu'\nimport { FormDialogProps } from './form'\nimport { defaultModals } from './default-modals'\n\nexport interface ModalsContextValue<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,\n TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>\n> {\n open: <T extends OpenOptions<TTypes>>(\n componentOrOptions: T extends {\n component: infer TComponent extends React.FC<any>\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>\n : T extends {\n type: infer TType extends keyof TModals\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>\n : T,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: <TProps extends FormDialogProps = FormDialogProps>(\n options: WithModalOptions<TProps>\n ) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue<\n typeof defaultModals\n> \| null>(null)\n\nexport interface ModalsProviderProps<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>\n> {\n children: React.ReactNode\n modals?: TModals\n}\n\nexport type ModalId = string \| number\n\ntype WithModalOptions<T> = Omit<T, 'isOpen' \| 'onClose'> & ModalOptions\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'isOpen' \| 'onClose' \| 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean \| undefined> \| void\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<TModalTypes extends string> extends ModalOptions {\n type?: TModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' \| 'alert'\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions,\n TModalTypes extends string = string\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?: TModalTypes\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\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 = '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 OpenOptions<any>>(\n componentOrOptions: any,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ): ModalId => {\n let _options: ModalOptions\n if (typeof componentOrOptions === 'function') {\n _options = {\n component: componentOrOptions,\n ...options,\n } as unknown as T\n } else {\n _options = componentOrOptions\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 = <TProps extends FormDialogProps = FormDialogProps>(\n options: WithModalOptions<TProps>\n ): ModalId => {\n return open({\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","import { ConfirmDialog } from './dialog'\nimport { MenuDialog } from './menu'\nimport { FormDialog } from './form'\nimport { Drawer } from './drawer'\nimport { Modal } from './modal'\n\nexport const defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n","import { defaultModals } from './default-modals'\nimport {\n ModalsContextValue,\n ModalsProvider,\n ModalsProviderProps,\n useModals,\n} from './provider'\n\ninterface CreateModalOptions {}\n\nconst createModal = (Component: React.FC<any>, options: CreateModalOptions) => {\n return Component\n}\n\nexport interface CreateModalsOptions<TModalDefs> {\n modals: TModalDefs\n}\n\nexport const createModals = <TModalDefs extends Record<string, React.FC<any>>>(\n options: CreateModalsOptions<TModalDefs>\n) => {\n const modals = {\n ...defaultModals,\n ...options.modals,\n }\n const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {\n return <ModalsProvider children={props.children} modals={modals} />\n }\n\n return {\n ModalsProvider: Provider,\n useModals: useModals as () => ModalsContextValue<typeof modals>,\n }\n}\n"]}

package/dist/index.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React2 from 'react';
-import { createStylesContext, forwardRef, useMenuContext, useMenuList, useMultiStyleConfig, chakra, ModalFooter, ModalBody, Button, AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, ButtonGroup, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, DrawerBody, DrawerFooter, Modal as Modal$1, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, Menu } from '@chakra-ui/react';
+import { createStylesContext, forwardRef, useMenuContext, useMenuList, useMultiStyleConfig, useBreakpointValue, chakra, ModalFooter, ModalBody, Button, AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, ButtonGroup, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, DrawerBody, DrawerFooter, Modal as Modal$1, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, Menu } from '@chakra-ui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { runIfFn as runIfFn$1 } from '@chakra-ui/utils';
 import { runIfFn } from '@saas-ui/react-utils';
 import { Form, AutoFields, SubmitButton } from '@saas-ui/forms';
@@ -100,21 +101,30 @@ var BaseModal = (props) => {
     onClose,
     hideCloseButton,
     hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
     ...rest
   } = props;
   return /* @__PURE__ */ jsxs(Modal$1, { isOpen, onClose, ...rest, children: [
     !hideOverlay && /* @__PURE__ */ jsx(ModalOverlay, {}),
-    /* @__PURE__ */ jsxs(ModalContent, { children: [
-      title && /* @__PURE__ */ jsx(ModalHeader, { children: title }),
+    /* @__PURE__ */ jsxs(ModalContent, { ...contentProps, children: [
+      title && /* @__PURE__ */ jsx(ModalHeader, { ...headerProps, children: title }),
       !hideCloseButton && /* @__PURE__ */ jsx(ModalCloseButton, {}),
-      children,
-      footer && /* @__PURE__ */ jsx(ModalFooter, { children: footer })
+      runIfFn$1(children, {
+        isOpen,
+        onClose
+      }),
+      footer && /* @__PURE__ */ jsx(ModalFooter, { ...footerProps, children: footer })
     ] })
   ] });
 };
 var Modal = (props) => {
-  const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx(BaseModal, { ...rest, children: /* @__PURE__ */ jsx(ModalBody, { children }) });
+  const { children, isOpen, onClose, ...rest } = props;
+  return /* @__PURE__ */ jsx(BaseModal, { ...rest, isOpen, onClose, children: /* @__PURE__ */ jsx(ModalBody, { children: runIfFn$1(children, {
+    isOpen,
+    onClose
+  }) }) });
 };
 var [StylesProvider] = createStylesContext("SuiMenuDialog");
 var MenuDialog = (props) => {
@@ -139,12 +149,14 @@ var MenuDialogList = forwardRef(
       footer,
       initialFocusRef,
       hideCloseButton,
-      motionPreset,
+      motionPreset = "slideInBottom",
+      isCentered: isCenteredProp,
       ...rest
     } = props;
     const { isOpen, onClose, menuRef } = useMenuContext();
     const { ref, ...ownProps } = useMenuList(rest, forwardedRef);
     const styles = useMultiStyleConfig("Menu", props);
+    const isCentered = useBreakpointValue({ base: true, md: false });
     return /* @__PURE__ */ jsxs(
       BaseModal,
       {
@@ -154,6 +166,8 @@ var MenuDialogList = forwardRef(
         title,
         hideCloseButton,
         motionPreset,
+        isCentered: isCenteredProp != null ? isCenteredProp : isCentered,
+        contentProps: { mx: 4 },
         children: [
           /* @__PURE__ */ jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx(
             chakra.div,
@@ -244,14 +258,8 @@ var FormDialog = forwardRef(
     ] }) }) });
   }
 );
-var ModalsContext = React2.createContext(
-  null
-);
-var initialModalState = {
-  id: null,
-  props: null,
-  type: "modal"
-};
+// src/default-modals.ts
 var defaultModals = {
   alert: ConfirmDialog,
   confirm: ConfirmDialog,
@@ -260,6 +268,12 @@ var defaultModals = {
   menu: MenuDialog,
   form: FormDialog
 };
+var ModalsContext = React2.createContext(null);
+var initialModalState = {
+  id: null,
+  props: null,
+  type: "modal"
+};
 function ModalsProvider({ children, modals }) {
   const _instances = React2.useMemo(() => /* @__PURE__ */ new Set(), []);
   const [activeModals, setActiveModals] = React2.useState({
@@ -286,12 +300,15 @@ function ModalsProvider({ children, modals }) {
       [scope]: modal
     }));
   };
-  const open = (options) => {
-    if (typeof options === "function") {
-      const component2 = options;
-      options = {
-        component: component2
+  const open = (componentOrOptions, options) => {
+    let _options;
+    if (typeof componentOrOptions === "function") {
+      _options = {
+        component: componentOrOptions,
+        ...options
       };
+    } else {
+      _options = componentOrOptions;
     }
     const {
       id = _instances.size + 1,
@@ -299,7 +316,7 @@ function ModalsProvider({ children, modals }) {
       scope = "modal",
       component,
       ...props
-    } = options;
+    } = _options;
     const modal = {
       id,
       props,
@@ -440,7 +457,20 @@ var useModalsContext = () => React2.useContext(ModalsContext);
 var useModals = () => {
   return useModalsContext();
 };
+var createModals = (options) => {
+  const modals = {
+    ...defaultModals,
+    ...options.modals
+  };
+  const Provider = (props) => {
+    return /* @__PURE__ */ jsx(ModalsProvider, { children: props.children, modals });
+  };
+  return {
+    ModalsProvider: Provider,
+    useModals
+  };
+};
-export { BaseDrawer, BaseModal, ConfirmDialog, Drawer, FormDialog, MenuDialog, MenuDialogList, Modal, ModalsContext, ModalsProvider, useModals, useModalsContext };
+export { BaseDrawer, BaseModal, ConfirmDialog, Drawer, FormDialog, MenuDialog, MenuDialogList, Modal, ModalsContext, ModalsProvider, createModals, useModals, useModalsContext };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx"],"names":["jsx","jsxs","ModalFooter","ModalBody","Button","forwardRef","React","component","modals","modal","children"],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\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 {cancelProps?.children \|\| cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children \|\| 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 { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\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 _dark: {\n / @ts-expect-error /\n ...(styles.list._dark \|\| {}),\n boxShadow: 'none',\n },\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 '@saas-ui/react-utils'\n\nimport {\n Form,\n AutoFields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues, TContext>,\n \| 'schema'\n \| 'defaultValues'\n \| 'values'\n \| 'context'\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/\n Can be used to quickly request information from people without leaving the current page.\n \n @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog\n /\nexport const FormDialog = forwardRef(\n <\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n >(\n props: FormDialogProps<TFieldValues, TContext>,\n ref: React.ForwardedRef<HTMLFormElement>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError = 100,\n cancelLabel = 'Cancel',\n submitLabel = 'Submit',\n footer,\n isOpen,\n onClose,\n ...rest\n } = props\n\n const formProps = {\n ref,\n schema,\n resolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\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} ref={ref}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) \|\| (\n <AutoFields\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}\n </Button>\n <SubmitButton>{submitLabel}</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<HTMLFormElement>\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"]}
1	+ {"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx","../src/default-modals.ts","../src/create-modals.tsx"],"names":["jsx","jsxs","ModalFooter","ModalBody","Button","forwardRef","runIfFn","React","modals","modal","children"],"mappings":";AAAA,YAAY,WAAW;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,OAEK;AAsFG,cAKE,YALF;AAjCH,IAAM,gBAA8C,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,YAAkB,aAAO,IAAI;AACnC,QAAM,aAAmB,aAAO,IAAI;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,qBACE,0BAA0B,WAAW,YAAY;AAAA,MAGnD,8BAAC,sBACC,+BAAC,sBACC;AAAA,4BAAC,qBAAmB,iBAAM;AAAA,QAE1B,oBAAC,mBAAiB,UAAS;AAAA,QAE3B,oBAAC,qBACC,+BAAC,eAAa,GAAG,kBACf;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACJ,GAAG;AAAA,cACJ,SAAS,MAAM;AACb;AAEA,iCAAiB,QAAQ;AAAA,cAC3B;AAAA,cAEC,sDAAa,aAAY;AAAA;AAAA,UAC5B;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACJ,GAAG;AAAA,cACJ,SAAS,MAAM;AACb;AAEA,kCAAkB,QAAQ;AAAA,cAC5B;AAAA,cAEC,wDAAc,aAAY;AAAA;AAAA,UAC7B;AAAA,WACF,GACF;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;;;ACpIA;AAAA,EACE,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA8BgB,gBAAAA,MACjB,QAAAC,aADiB;AAZhB,IAAM,aAAwC,CAAC,UAAU;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SACE,gBAAAA,MAAC,gBAAa,QAAgB,SAAmB,GAAG,MACjD;AAAA,KAAC,eAAe,gBAAAD,KAAC,iBAAc;AAAA,IAChC,gBAAAC,MAAC,iBACC;AAAA,sBAAAD,KAAC,gBAAc,iBAAM;AAAA,MACpB,CAAC,mBAAmB,gBAAAA,KAAC,qBAAkB;AAAA,MACvC;AAAA,OACH;AAAA,KACF;AAEJ;AASO,IAAM,SAAgC,CAAC,UAAU;AACtD,QAAM,EAAE,QAAQ,UAAU,GAAG,KAAK,IAAI;AACtC,SACE,gBAAAC,MAAC,cAAY,GAAG,MACd;AAAA,oBAAAD,KAAC,cAAY,UAAS;AAAA,IAErB,UAAU,gBAAAA,KAAC,gBAAc,kBAAO;AAAA,KACnC;AAEJ;;;ACjEA;AAAA,EACE,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAEP,SAAS,eAAe;AAwDD,gBAAAA,MACjB,QAAAC,aADiB;AAhBhB,IAAM,YAAsC,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SACE,gBAAAA,MAAC,eAAY,QAAgB,SAAmB,GAAG,MAChD;AAAA,KAAC,eAAe,gBAAAD,KAAC,gBAAa;AAAA,IAC/B,gBAAAC,MAAC,gBAAc,GAAG,cACf;AAAA,eAAS,gBAAAD,KAAC,eAAa,GAAG,aAAc,iBAAM;AAAA,MAC9C,CAAC,mBAAmB,gBAAAA,KAAC,oBAAiB;AAAA,MACtC,QAAQ,UAAU;AAAA,QACjB;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACA,UAAU,gBAAAA,KAAC,eAAa,GAAG,aAAc,kBAAO;AAAA,OACnD;AAAA,KACF;AAEJ;AAEO,IAAM,QAAkC,CAAC,UAAU;AACxD,QAAM,EAAE,UAAU,QAAQ,SAAS,GAAG,KAAK,IAAI;AAC/C,SACE,gBAAAA,KAAC,aAAW,GAAG,MAAM,QAAgB,SACnC,0BAAAA,KAAC,aACE,kBAAQ,UAAU;AAAA,IACjB;AAAA,IACA;AAAA,EACF,CAAC,GACH,GACF;AAEJ;;;AChGA;AAAA,EACE,eAAAE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAiBH,gBAAAF,MA0CE,QAAAC,aA1CF;AAbJ,IAAM,CAAC,cAAc,IAAI,oBAAoB,eAAe;AASrD,IAAM,aAAwC,CAAC,UAAU;AAC9D,QAAM,EAAE,SAAS,iBAAiB,GAAG,KAAK,IAAI;AAE9C,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,MAAM;AACb;AAGA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AASO,IAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,EAAE,QAAQ,SAAS,QAAQ,IAAI,eAAe;AAEpD,UAAM,EAAE,KAAK,GAAG,SAAS,IAAI,YAAY,MAAM,YAAY;AAE3D,UAAM,SAAS,oBAAoB,QAAQ,KAAK;AAEhD,UAAM,aAAa,mBAAmB,EAAE,MAAM,MAAM,IAAI,MAAM,CAAC;AAE/D,WACE,gBAAAC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAiB,mBAAmB;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,0CAAkB;AAAA,QAC9B,cAAc,EAAE,IAAI,EAAE;AAAA,QAGtB;AAAA,0BAAAD,KAAC,kBAAe,OAAO,QACrB,0BAAAA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACE,GAAG;AAAA,cACJ;AAAA,cACA,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,WAAW;AAAA;AAAA,gBACX,WAAW;AAAA;AAAA,gBACX,GAAG,OAAO;AAAA,gBACV,WAAW;AAAA,gBACX,QAAQ;AAAA,gBACR,OAAO;AAAA;AAAA,kBAEL,GAAI,OAAO,KAAK,SAAS,CAAC;AAAA,kBAC1B,WAAW;AAAA,gBACb;AAAA,cACF;AAAA;AAAA,UACF,GACF;AAAA,UACC,UAAU,gBAAAA,KAACE,cAAA,EAAa,kBAAO;AAAA;AAAA;AAAA,IAClC;AAAA,EAEJ;AACF;;;ACxGA,SAAS,aAAAC,YAAW,eAAAD,cAAa,UAAAE,SAAQ,cAAAC,mBAAkB;AAC3D,SAAS,WAAAC,gBAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAgHK,mBAGM,OAAAN,MASF,QAAAC,aAZJ;AAzDL,IAAM,aAAaI;AAAA,EACxB,CAIE,OACA,QACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,cAAc;AAAA,MACd,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,WACE,gBAAAL,KAAC,aAAU,QAAgB,SAAmB,GAAG,MAC/C,0BAAAA,KAAC,QAAM,GAAG,WAAW,KAClB,WAAC,SACA,gBAAAC,MAAA,YACE;AAAA,sBAAAD,KAACG,YAAA,EACE,UAAAG,SAAQ,UAAU,IAAI,KACrB,gBAAAN;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,iBAAe;AAAA;AAAA,MACjB,GAEJ;AAAA,MAEC,UACC,gBAAAC,MAACC,cAAA,EACC;AAAA,wBAAAF,KAACI,SAAA,EAAO,SAAQ,SAAQ,IAAI,GAAG,SAAS,SACrC,uBACH;AAAA,QACA,gBAAAJ,KAAC,gBAAc,uBAAY;AAAA,SAC7B;AAAA,OAEJ,GAEJ,GACF;AAAA,EAEJ;AACF;;;ACtJA,YAAYO,YAAW;;;ACMhB,IAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;;;ADsTU,gBAAAP,MAeN,QAAAC,aAfM;AA7RH,IAAM,gBAAsB,qBAEzB,IAAI;AAgFd,IAAM,oBAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AACR;AAEO,SAAS,eAAe,EAAE,UAAU,OAAO,GAAwB;AAGxE,QAAM,aAAmB,eAAQ,MAAM,oBAAI,IAAiB,GAAG,CAAC,CAAC;AAEjE,QAAM,CAAC,cAAc,eAAe,IAAU,gBAE5C;AAAA,IACA,OAAO;AAAA,EACT,CAAC;AAED,QAAM,oBAA0B,eAAQ,MAAM;AAC5C,UAAM,UAAyC;AAAA,MAC7C,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAEA,WAAO,CAAC,OAAO,YAAY;AACzB,YAAM,YAAY,QAAQ,IAAI,KAAK,QAAQ;AAE3C,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,iBAAiB,CAAC,OAAoB,UAAmB;AAC7D,QAAI,CAAC,OAAO;AACV,aAAO,gBAAgB;AAAA,QACrB;AAAA,MACF,CAAC;AAAA,IACH;AACA,oBAAgB,CAAC,eAAe;AAAA,MAC9B,GAAG;AAAA,MACH,CAAC,KAAK,GAAG;AAAA,IACX,EAAE;AAAA,EACJ;AAEA,QAAM,OAAO,CACX,oBACA,YAGY;AACZ,QAAI;AACJ,QAAI,OAAO,uBAAuB,YAAY;AAC5C,iBAAW;AAAA,QACT,WAAW;AAAA,QACX,GAAG;AAAA,MACL;AAAA,IACF,OAAO;AACL,iBAAW;AAAA,IACb;AAEA,UAAM;AAAA,MACJ,KAAK,WAAW,OAAO;AAAA,MACvB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,QAAwB;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV;AAEA,eAAW,IAAI,KAAK;AACpB,mBAAe,OAAO,KAAK;AAE3B,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,CAAC,YAAoC;AAClD,WAAO,KAAoB;AAAA,MACzB,GAAG;AAAA,MACH,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAEA,QAAM,QAAQ,CAAC,YAA2C;AACxD,WAAO,KAAK;AAAA,MACV,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,QACX,SAAS;AAAA,MACX;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MACA,uBAAuB;AAAA,IACzB,CAAC;AAAA,EACH;AAEA,QAAM,UAAU,CAAC,YAA2C;AAC1D,WAAO,KAA2B;AAAA,MAChC,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAEA,QAAM,OAAO,CAAC,YAAwC;AACpD,WAAO,KAAwB;AAAA,MAC7B,GAAG;AAAA,MACH,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAEA,QAAM,OAAO,CACX,YACY;AACZ,WAAO,KAAK;AAAA,MACV,GAAG;AAAA,MACH,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAEA,QAAM,QAAQ,OAAO,IAAqB,UAAoB;AAvPhE;AAwPI,UAAMO,UAAS,CAAC,GAAG,MAAM,KAAK,UAAU,CAAC;AACzC,UAAM,QAAQA,QAAO,OAAO,CAACC,WAAUA,OAAM,OAAO,EAAE,EAAE,CAAC;AAEzD,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,UAAM,cAAc,QAAM,iBAAM,UAAN,mBAAa,YAAb,4BAAuB,EAAE,MAAM;AACzD,QAAI,gBAAgB,OAAO;AACzB;AAAA,IACF;AAEA,UAAM,SAASD,QAAO,OAAO,CAAC,EAAE,MAAM,MAAM,UAAU,MAAM,KAAK;AAEjE,QAAI,OAAO,WAAW,GAAG;AACvB;AAAA,QACE;AAAA,UACE,GAAG;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,MAAM;AAAA,MACR;AAAA,IACF,WAAW,OAAO,SAAS,GAAG;AAC5B,qBAAe,OAAO,OAAO,SAAS,CAAC,GAAG,MAAM,KAAK;AAAA,IACvD,OAAO;AACL;AAAA,QACE;AAAA,UACE,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,MAAM,MAAM;AAAA;AAAA,QACd;AAAA,QACA,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,OAAwB;AAC7C,UAAMA,UAAS,CAAC,GAAG,MAAM,KAAK,UAAU,CAAC;AACzC,UAAM,QAAQA,QAAO,OAAO,CAACC,WAAUA,OAAM,OAAO,EAAE,EAAE,CAAC;AAEzD,eAAW,OAAO,KAAK;AAEvB,UAAM,SAASD,QAAO,OAAO,CAAC,EAAE,MAAM,MAAM,UAAU,MAAM,KAAK;AAEjE,QAAI,OAAO,WAAW,GAAG;AACvB,qBAAe,mBAAmB,MAAM,KAAK;AAAA,IAC/C;AAAA,EACF;AAEA,QAAM,WAAW,MAAM;AACrB,eAAW,QAAQ,CAAC,UAAO;AA1S/B;AA0SkC,+BAAM,UAAN,mBAAa,YAAb,4BAAuB,EAAE,OAAO,KAAK;AAAA,KAAE;AACrE,eAAW,MAAM;AAEjB,mBAAe,iBAAiB;AAAA,EAClC;AAEA,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,UAAgB;AAAA,IACpB,MACE,OAAO,QAAQ,YAAY,EAAE,IAAI,CAAC,CAAC,OAAO,MAAM,MAAM;AACpD,YAAM,YAAY,OAAO,aAAa,kBAAkB,OAAO,IAAI;AAEnE,YAAM,EAAE,OAAO,MAAM,UAAAE,WAAU,GAAG,MAAM,IAAI,OAAO,SAAS,CAAC;AAE7D,aACE,gBAAAV;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,UAAU,QAAQU;AAAA,UACjB,GAAG;AAAA,UACJ,QAAQ,CAAC,CAAC,OAAO;AAAA,UACjB,SAAS,MAAM,MAAM,OAAO,EAAE;AAAA,UAC9B,iBAAiB,MAAM,cAAc,OAAO,EAAE;AAAA;AAAA,QANzC;AAAA,MAOP;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,YAAY;AAAA,EACf;AAEA,SACE,gBAAAT,MAAC,cAAc,UAAd,EAAuB,OAAO,SAC5B;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAEO,IAAM,mBAAmB,MACxB,kBAAW,aAAa;AAEzB,IAAM,YAAY,MAAM;AAC7B,SAAO,iBAAiB;AAC1B;;;AEpUW,gBAAAD,YAAA;AARJ,IAAM,eAAe,CAC1B,YACG;AACH,QAAM,SAAS;AAAA,IACb,GAAG;AAAA,IACH,GAAG,QAAQ;AAAA,EACb;AACA,QAAM,WAAW,CAAC,UAA+C;AAC/D,WAAO,gBAAAA,KAAC,kBAAe,UAAU,MAAM,UAAU,QAAgB;AAAA,EACnE;AAEA,SAAO;AAAA,IACL,gBAAgB;AAAA,IAChB;AAAA,EACF;AACF","sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\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 {cancelProps?.children \|\| cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n {confirmProps?.children \|\| 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 ModalContentProps,\n ModalHeaderProps,\n ModalFooterProps,\n} from '@chakra-ui/react'\nimport { MaybeRenderProp } from '@chakra-ui/react-utils'\nimport { runIfFn } from '@chakra-ui/utils'\n\nexport interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {\n /*\n The modal title\n /\n title?: React.ReactNode\n /\n The modal children\n /\n children: MaybeRenderProp<{\n isOpen: boolean\n onClose: () => void\n }>\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 Props for the modal header\n /\n headerProps?: ModalHeaderProps\n /\n Props for the modal content\n /\n contentProps?: ModalContentProps\n /\n Props for the modal footer\n /\n footerProps?: ModalFooterProps\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 headerProps,\n contentProps,\n footerProps,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent {...contentProps}>\n {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, isOpen, onClose, ...rest } = props\n return (\n <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>\n <ModalBody>\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n </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 useBreakpointValue,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\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 = 'slideInBottom',\n isCentered: isCenteredProp,\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 const isCentered = useBreakpointValue({ base: true, md: false })\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 isCentered={isCenteredProp ?? isCentered}\n contentProps={{ mx: 4 }}\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 _dark: {\n / @ts-expect-error /\n ...(styles.list._dark \|\| {}),\n boxShadow: 'none',\n },\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 '@saas-ui/react-utils'\n\nimport {\n Form,\n AutoFields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n FieldProps,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object,\n TSchema = any,\n TFieldTypes = FieldProps<TFieldValues>\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,\n \| 'schema'\n \| 'defaultValues'\n \| 'values'\n \| 'context'\n \| 'onChange'\n \| 'onSubmit'\n \| 'onError'\n \| 'resolver'\n \| 'mode'\n \| 'reValidateMode'\n \| 'shouldFocusError'\n \| 'shouldUnregister'\n \| 'shouldUseNativeValidation'\n \| 'criteriaMode'\n \| 'delayError'\n \| 'resetOptions'\n \| 'children'\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 A schema field resolver used to auto generate form fields.\n /\n fieldResolver?: FieldResolver\n}\n/\n Can be used to quickly request information from people without leaving the current page.\n \n @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog\n /\nexport const FormDialog = forwardRef(\n <\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object\n >(\n props: FormDialogProps<TFieldValues, TContext>,\n ref: React.ForwardedRef<HTMLFormElement>\n ) => {\n const {\n children,\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError = 100,\n cancelLabel = 'Cancel',\n submitLabel = 'Submit',\n footer,\n isOpen,\n onClose,\n ...rest\n } = props\n\n const formProps = {\n ref,\n schema,\n resolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\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} ref={ref}>\n {(form) => (\n <>\n <ModalBody>\n {runIfFn(children, form) \|\| (\n <AutoFields\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}\n </Button>\n <SubmitButton>{submitLabel}</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<HTMLFormElement>\n }\n) => React.ReactElement\n","import as React from 'react'\n\nimport { BaseModalProps } from './modal'\nimport { DrawerProps } from './drawer'\nimport { ConfirmDialogProps } from './dialog'\nimport { MenuDialogProps } from './menu'\nimport { FormDialogProps } from './form'\nimport { defaultModals } from './default-modals'\n\nexport interface ModalsContextValue<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,\n TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>\n> {\n open: <T extends OpenOptions<TTypes>>(\n componentOrOptions: T extends {\n component: infer TComponent extends React.FC<any>\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>\n : T extends {\n type: infer TType extends keyof TModals\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>\n : T,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: <TProps extends FormDialogProps = FormDialogProps>(\n options: WithModalOptions<TProps>\n ) => ModalId\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue<\n typeof defaultModals\n> \| null>(null)\n\nexport interface ModalsProviderProps<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>\n> {\n children: React.ReactNode\n modals?: TModals\n}\n\nexport type ModalId = string \| number\n\ntype WithModalOptions<T> = Omit<T, 'isOpen' \| 'onClose'> & ModalOptions\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'isOpen' \| 'onClose' \| 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean \| undefined> \| void\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<TModalTypes extends string> extends ModalOptions {\n type?: TModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' \| 'alert'\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions,\n TModalTypes extends string = string\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?: TModalTypes\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\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 = '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 OpenOptions<any>>(\n componentOrOptions: any,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ): ModalId => {\n let _options: ModalOptions\n if (typeof componentOrOptions === 'function') {\n _options = {\n component: componentOrOptions,\n ...options,\n } as unknown as T\n } else {\n _options = componentOrOptions\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 = <TProps extends FormDialogProps = FormDialogProps>(\n options: WithModalOptions<TProps>\n ): ModalId => {\n return open({\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","import { ConfirmDialog } from './dialog'\nimport { MenuDialog } from './menu'\nimport { FormDialog } from './form'\nimport { Drawer } from './drawer'\nimport { Modal } from './modal'\n\nexport const defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n","import { defaultModals } from './default-modals'\nimport {\n ModalsContextValue,\n ModalsProvider,\n ModalsProviderProps,\n useModals,\n} from './provider'\n\ninterface CreateModalOptions {}\n\nconst createModal = (Component: React.FC<any>, options: CreateModalOptions) => {\n return Component\n}\n\nexport interface CreateModalsOptions<TModalDefs> {\n modals: TModalDefs\n}\n\nexport const createModals = <TModalDefs extends Record<string, React.FC<any>>>(\n options: CreateModalsOptions<TModalDefs>\n) => {\n const modals = {\n ...defaultModals,\n ...options.modals,\n }\n const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {\n return <ModalsProvider children={props.children} modals={modals} />\n }\n\n return {\n ModalsProvider: Provider,\n useModals: useModals as () => ModalsContextValue<typeof modals>,\n }\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/modals",
-  "version": "2.0.0-next.8",
+  "version": "2.0.0-next.9",
   "description": "A modal manager for Chakra UI",
   "source": "src/index.ts",
   "exports": {
@@ -57,7 +57,8 @@
   },
   "dependencies": {
     "@chakra-ui/utils": "^2.0.15",
-    "@saas-ui/forms": "2.0.0-next.8",
+    "@chakra-ui/react-utils": "^2.0.11",
+    "@saas-ui/forms": "2.0.0-next.9",
     "@saas-ui/hooks": "2.0.0-next.2",
     "@saas-ui/react-utils": "2.0.0-next.1"
   },

package/src/create-modals.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { defaultModals } from './default-modals'
+import {
+  ModalsContextValue,
+  ModalsProvider,
+  ModalsProviderProps,
+  useModals,
+} from './provider'
+interface CreateModalOptions {}
+const createModal = (Component: React.FC<any>, options: CreateModalOptions) => {
+  return Component
+}
+export interface CreateModalsOptions<TModalDefs> {
+  modals: TModalDefs
+}
+export const createModals = <TModalDefs extends Record<string, React.FC<any>>>(
+  options: CreateModalsOptions<TModalDefs>
+) => {
+  const modals = {
+    ...defaultModals,
+    ...options.modals,
+  }
+  const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {
+    return <ModalsProvider children={props.children} modals={modals} />
+  }
+  return {
+    ModalsProvider: Provider,
+    useModals: useModals as () => ModalsContextValue<typeof modals>,
+  }
+}

package/src/default-modals.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { ConfirmDialog } from './dialog'
+import { MenuDialog } from './menu'
+import { FormDialog } from './form'
+import { Drawer } from './drawer'
+import { Modal } from './modal'
+export const defaultModals = {
+  alert: ConfirmDialog,
+  confirm: ConfirmDialog,
+  drawer: Drawer,
+  modal: Modal,
+  menu: MenuDialog,
+  form: FormDialog,
+}

package/src/form.tsx CHANGED Viewed

@@ -10,16 +10,19 @@ import {
   FormProps,
   FieldValues,
   FieldResolver,
+  FieldProps,
 } from '@saas-ui/forms'
 import { BaseModal, BaseModalProps } from './modal'
 export interface FormDialogProps<
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object
+  TContext extends object = object,
+  TSchema = any,
+  TFieldTypes = FieldProps<TFieldValues>
 > extends Omit<BaseModalProps, 'children'>,
     Pick<
-      FormProps<TFieldValues, TContext>,
+      FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,
       | 'schema'
       | 'defaultValues'
       | 'values'
@@ -35,6 +38,8 @@ export interface FormDialogProps<
       | 'shouldUseNativeValidation'
       | 'criteriaMode'
       | 'delayError'
+      | 'resetOptions'
+      | 'children'
     > {
   /**
    * The modal footer, will be wrapped with `ModalFooter`.
@@ -51,10 +56,6 @@ export interface FormDialogProps<
    * @default "Submit"
    */
   submitLabel?: React.ReactNode
-  /**
-   * If no children are passed, this will auto render fields based on the supplied schema.
-   */
-  children?: React.ReactNode
   /**
    * A schema field resolver used to auto generate form fields.
    */

package/src/index.ts CHANGED Viewed

@@ -4,3 +4,5 @@ export * from './modal'
 export * from './menu'
 export * from './form'
 export * from './provider'
+export { createModals, type CreateModalsOptions } from './create-modals'

package/src/menu.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ import {
   useMultiStyleConfig,
   Menu,
   MenuListProps,
+  useBreakpointValue,
 } from '@chakra-ui/react'
 import { BaseModal, BaseModalProps } from './modal'
@@ -55,7 +56,8 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
       footer,
       initialFocusRef,
       hideCloseButton,
-      motionPreset,
+      motionPreset = 'slideInBottom',
+      isCentered: isCenteredProp,
       ...rest
     } = props
@@ -65,6 +67,8 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
     const styles = useMultiStyleConfig('Menu', props)
+    const isCentered = useBreakpointValue({ base: true, md: false })
     return (
       <BaseModal
         isOpen={isOpen}
@@ -73,6 +77,8 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
         title={title}
         hideCloseButton={hideCloseButton}
         motionPreset={motionPreset}
+        isCentered={isCenteredProp ?? isCentered}
+        contentProps={{ mx: 4 }}
       >
         {/* We forward the styles again, otherwise the modal styles will be picked up */}
         <StylesProvider value={styles}>

package/src/modal.tsx CHANGED Viewed

@@ -9,13 +9,25 @@ import {
   ModalBody,
   ModalCloseButton,
   ModalProps as ChakraModalProps,
+  ModalContentProps,
+  ModalHeaderProps,
+  ModalFooterProps,
 } from '@chakra-ui/react'
+import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { runIfFn } from '@chakra-ui/utils'
-export interface BaseModalProps extends ChakraModalProps {
+export interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {
   /**
    * The modal title
    */
   title?: React.ReactNode
+  /**
+   * The modal children
+   */
+  children: MaybeRenderProp<{
+    isOpen: boolean
+    onClose: () => void
+  }>
   /**
    * The modal footer
    */
@@ -28,6 +40,18 @@ export interface BaseModalProps extends ChakraModalProps {
    * Hide the overlay
    */
   hideOverlay?: boolean
+  /**
+   * Props for the modal header
+   */
+  headerProps?: ModalHeaderProps
+  /**
+   * Props for the modal content
+   */
+  contentProps?: ModalContentProps
+  /**
+   * Props for the modal footer
+   */
+  footerProps?: ModalFooterProps
 }
 export const BaseModal: React.FC<BaseModalProps> = (props) => {
@@ -39,26 +63,37 @@ export const BaseModal: React.FC<BaseModalProps> = (props) => {
     onClose,
     hideCloseButton,
     hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
     ...rest
   } = props
   return (
     <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>
       {!hideOverlay && <ModalOverlay />}
-      <ModalContent>
-        {title && <ModalHeader>{title}</ModalHeader>}
+      <ModalContent {...contentProps}>
+        {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}
         {!hideCloseButton && <ModalCloseButton />}
-        {children}
-        {footer && <ModalFooter>{footer}</ModalFooter>}
+        {runIfFn(children, {
+          isOpen,
+          onClose,
+        })}
+        {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}
       </ModalContent>
     </ChakraModal>
   )
 }
 export const Modal: React.FC<BaseModalProps> = (props) => {
-  const { children, ...rest } = props
+  const { children, isOpen, onClose, ...rest } = props
   return (
-    <BaseModal {...rest}>
-      <ModalBody>{children}</ModalBody>
+    <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>
+      <ModalBody>
+        {runIfFn(children, {
+          isOpen,
+          onClose,
+        })}
+      </ModalBody>
     </BaseModal>
   )
 }

package/src/provider.tsx CHANGED Viewed

@@ -1,38 +1,59 @@
 import * as React from 'react'
-import { Modal, BaseModalProps } from './modal'
-import { Drawer, DrawerProps } from './drawer'
-import { ConfirmDialog, ConfirmDialogProps } from './dialog'
-import { MenuDialog, MenuDialogProps } from './menu'
-import { FormDialog, FormDialogProps } from './form'
-export interface ModalsContextValue {
-  open: (options: OpenOptions) => ModalId
+import { BaseModalProps } from './modal'
+import { DrawerProps } from './drawer'
+import { ConfirmDialogProps } from './dialog'
+import { MenuDialogProps } from './menu'
+import { FormDialogProps } from './form'
+import { defaultModals } from './default-modals'
+export interface ModalsContextValue<
+  TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,
+  TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>
+> {
+  open: <T extends OpenOptions<TTypes>>(
+    componentOrOptions: T extends {
+      component: infer TComponent extends React.FC<any>
+    }
+      ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>
+      : T extends {
+          type: infer TType extends keyof TModals
+        }
+      ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>
+      : T,
+    options?: T extends React.FC<any>
+      ? WithModalOptions<React.ComponentPropsWithRef<T>>
+      : never
+  ) => ModalId
   drawer: (options: DrawerOptions) => ModalId
   alert: (options: ConfirmDialogOptions) => ModalId
   confirm: (options: ConfirmDialogOptions) => ModalId
   menu: (options: MenuDialogOptions) => ModalId
-  form: (options: FormDialogOptions) => ModalId
+  form: <TProps extends FormDialogProps = FormDialogProps>(
+    options: WithModalOptions<TProps>
+  ) => ModalId
   close: (id: ModalId) => void
   closeAll: () => void
 }
-export const ModalsContext = React.createContext<ModalsContextValue | null>(
-  null
-)
+export const ModalsContext = React.createContext<ModalsContextValue<
+  typeof defaultModals
+> | null>(null)
-interface ModalsProviderProps {
+export interface ModalsProviderProps<
+  TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>
+> {
   children: React.ReactNode
-  modals?: Record<string, React.FC<any>>
+  modals?: TModals
 }
 export type ModalId = string | number
+type WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions
 interface ModalOptions
-  extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
+  extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {
   onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void
-  body?: React.ReactNode
-  children?: React.ReactNode
   [key: string]: any
 }
@@ -52,23 +73,16 @@ export interface FormDialogOptions
   extends ModalOptions,
     Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}
-export interface OpenOptions extends ModalOptions {
-  type?: ModalTypes
+export interface OpenOptions<TModalTypes extends string> extends ModalOptions {
+  type?: TModalTypes
   scope?: ModalScopes
 }
 export type ModalScopes = 'modal' | 'alert'
-export type ModalTypes =
-  | 'modal'
-  | 'drawer'
-  | 'alert'
-  | 'confirm'
-  | 'menu'
-  | string
 export interface ModalConfig<
-  TModalOptions extends ModalOptions = ModalOptions
+  TModalOptions extends ModalOptions = ModalOptions,
+  TModalTypes extends string = string
 > {
   /**
    * The modal id, autogenerated when not set.
@@ -91,7 +105,7 @@ export interface ModalConfig<
    *
    * Custom types can be configured using the `modals` prop of `ModalProvider`
    */
-  type?: ModalTypes
+  type?: TModalTypes
   /**
    * Render a custom modal component.
    * This will ignore the `type` param.
@@ -110,15 +124,6 @@ const initialModalState: ModalConfig = {
   type: 'modal',
 }
-const defaultModals = {
-  alert: ConfirmDialog,
-  confirm: ConfirmDialog,
-  drawer: Drawer,
-  modal: Modal,
-  menu: MenuDialog,
-  form: FormDialog,
-}
 export function ModalsProvider({ children, modals }: ModalsProviderProps) {
   // Note that updating the Set doesn't trigger a re-render,
   // use in conjuction with setActiveModals
@@ -136,7 +141,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
       ...modals,
     }
-    return (type: ModalTypes = 'modal') => {
+    return (type = 'modal') => {
       const component = _modals[type] || _modals.modal
       return component
@@ -155,14 +160,20 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     }))
   }
-  const open = <T extends ModalOptions>(
-    options: T | React.FC<BaseModalProps>
+  const open = <T extends OpenOptions<any>>(
+    componentOrOptions: any,
+    options?: T extends React.FC<any>
+      ? WithModalOptions<React.ComponentPropsWithRef<T>>
+      : never
   ): ModalId => {
-    if (typeof options === 'function') {
-      const component: React.FC<BaseModalProps> = options
-      options = {
-        component,
+    let _options: ModalOptions
+    if (typeof componentOrOptions === 'function') {
+      _options = {
+        component: componentOrOptions,
+        ...options,
       } as unknown as T
+    } else {
+      _options = componentOrOptions
     }
     const {
@@ -171,7 +182,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
       scope = 'modal',
       component,
       ...props
-    } = options
+    } = _options
     const modal: ModalConfig<T> = {
       id,
@@ -225,8 +236,10 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     })
   }
-  const form = (options: FormDialogOptions): ModalId => {
-    return open<FormDialogOptions>({
+  const form = <TProps extends FormDialogProps = FormDialogProps>(
+    options: WithModalOptions<TProps>
+  ): ModalId => {
+    return open({
       ...options,
       type: 'form',
     })

package/src/create-modals.ts DELETED Viewed

File without changes