@yamada-ui/modal 0.2.7 → 0.2.9

package/dist/modal.mjs

@@ -1,7 +1,7 @@
 import {
   Modal,
   useModal
-} from "./chunk-OUW3Q5QN.mjs";
+} from "./chunk-VHMYEQE4.mjs";
 export {
   Modal,
   useModal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/modal",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Yamada UI modal component",
   "keywords": [
     "yamada",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "react-remove-scroll": "^2.5.4",
-    "@yamada-ui/core": "0.5.1",
-    "@yamada-ui/utils": "0.1.3",
-    "@yamada-ui/motion": "0.3.4",
-    "@yamada-ui/portal": "0.2.2",
-    "@yamada-ui/button": "0.2.6",
-    "@yamada-ui/focus-lock": "0.2.2",
-    "@yamada-ui/close-button": "0.2.6",
-    "@yamada-ui/transitions": "0.2.7",
-    "@yamada-ui/use-value": "0.1.18"
+    "@yamada-ui/core": "0.5.3",
+    "@yamada-ui/utils": "0.1.4",
+    "@yamada-ui/motion": "0.3.6",
+    "@yamada-ui/portal": "0.2.3",
+    "@yamada-ui/button": "0.2.8",
+    "@yamada-ui/focus-lock": "0.2.3",
+    "@yamada-ui/close-button": "0.2.8",
+    "@yamada-ui/transitions": "0.2.9",
+    "@yamada-ui/use-value": "0.1.20"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/dist/chunk-OUW3Q5QN.mjs

@@ -1,623 +0,0 @@
-// src/drawer.tsx
-import {
-  forwardRef as forwardRef8,
-  useMultiComponentStyle as useMultiComponentStyle3,
-  omitThemeProps as omitThemeProps3
-} from "@yamada-ui/core";
-import { Slide } from "@yamada-ui/transitions";
-import { createContext as createContext3, getValidChildren as getValidChildren3, findChildren as findChildren3, cx as cx8 } from "@yamada-ui/utils";
-
-// src/modal.tsx
-import {
-  ui as ui5,
-  forwardRef as forwardRef7,
-  omitThemeProps as omitThemeProps2,
-  useMultiComponentStyle as useMultiComponentStyle2
-} from "@yamada-ui/core";
-import { FocusLock } from "@yamada-ui/focus-lock";
-import {
-  motion as motion2,
-  AnimatePresence
-} from "@yamada-ui/motion";
-import { Portal } from "@yamada-ui/portal";
-import { scaleFadeProps, slideFadeProps } from "@yamada-ui/transitions";
-import { useValue } from "@yamada-ui/use-value";
-import { cx as cx7, createContext as createContext2, getValidChildren as getValidChildren2, findChildren as findChildren2 } from "@yamada-ui/utils";
-import { cloneElement, useCallback } from "react";
-import { RemoveScroll } from "react-remove-scroll";
-
-// src/modal-overlay.tsx
-import { ui, forwardRef } from "@yamada-ui/core";
-import { motion } from "@yamada-ui/motion";
-import { fadeProps } from "@yamada-ui/transitions";
-import { cx, handlerAll } from "@yamada-ui/utils";
-import { jsx } from "react/jsx-runtime";
-var ModalOverlay = forwardRef(
-  ({ className, __css, onClick, ...rest }, ref) => {
-    const { styles, closeOnOverlay, onOverlayClick, onClose, animation, duration } = useModal();
-    const css = {
-      position: "fixed",
-      top: 0,
-      left: 0,
-      w: "100vw",
-      h: "100vh",
-      ...__css ? __css : styles.overlay
-    };
-    const props = animation !== "none" ? fadeProps : {};
-    return /* @__PURE__ */ jsx(
-      ui.div,
-      {
-        as: motion.div,
-        ref,
-        className: cx("ui-modal-overlay", className),
-        custom: { duration },
-        __css: css,
-        onClick: handlerAll(onClick, onOverlayClick, (event) => {
-          event.stopPropagation();
-          if (closeOnOverlay)
-            onClose == null ? void 0 : onClose();
-        }),
-        ...props,
-        ...rest
-      }
-    );
-  }
-);
-
-// src/modal-close-button.tsx
-import { CloseButton } from "@yamada-ui/close-button";
-import { forwardRef as forwardRef2 } from "@yamada-ui/core";
-import { cx as cx2, handlerAll as handlerAll2 } from "@yamada-ui/utils";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ModalCloseButton = forwardRef2(
-  ({ onClick, __css, ...rest }, ref) => {
-    const { styles, onClose } = useModal();
-    const css = {
-      position: "absolute",
-      ...__css ? __css : styles.closeButton
-    };
-    return /* @__PURE__ */ jsx2(
-      CloseButton,
-      {
-        ref,
-        className: cx2("ui-modal-close-button"),
-        __css: css,
-        onClick: handlerAll2(onClick, (event) => {
-          event.stopPropagation();
-          onClose == null ? void 0 : onClose();
-        }),
-        ...rest
-      }
-    );
-  }
-);
-
-// src/modal-header.tsx
-import { ui as ui2, forwardRef as forwardRef3 } from "@yamada-ui/core";
-import { cx as cx3 } from "@yamada-ui/utils";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ModalHeader = forwardRef3(
-  ({ className, __css, ...rest }, ref) => {
-    const { styles } = useModal();
-    const css = {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      ...__css ? __css : styles.header
-    };
-    return /* @__PURE__ */ jsx3(ui2.header, { ref, className: cx3("ui-modal-header", className), __css: css, ...rest });
-  }
-);
-
-// src/modal-body.tsx
-import { ui as ui3, forwardRef as forwardRef4 } from "@yamada-ui/core";
-import { cx as cx4 } from "@yamada-ui/utils";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ModalBody = forwardRef4(
-  ({ className, __css, ...rest }, ref) => {
-    const { styles, scrollBehavior } = useModal();
-    const css = {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      overflow: scrollBehavior === "inside" ? "auto" : void 0,
-      ...__css ? __css : styles.body
-    };
-    return /* @__PURE__ */ jsx4(ui3.main, { ref, className: cx4("ui-modal-body", className), __css: css, ...rest });
-  }
-);
-
-// src/modal-footer.tsx
-import { ui as ui4, forwardRef as forwardRef5 } from "@yamada-ui/core";
-import { cx as cx5 } from "@yamada-ui/utils";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ModalFooter = forwardRef5(
-  ({ className, __css, ...rest }, ref) => {
-    const { styles } = useModal();
-    const css = {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      ...__css ? __css : styles.footer
-    };
-    return /* @__PURE__ */ jsx5(ui4.footer, { ref, className: cx5("ui-modal-footer", className), __css: css, ...rest });
-  }
-);
-
-// src/dialog.tsx
-import { Button } from "@yamada-ui/button";
-import {
-  forwardRef as forwardRef6,
-  useMultiComponentStyle,
-  omitThemeProps
-} from "@yamada-ui/core";
-import {
-  createContext,
-  getValidChildren,
-  findChildren,
-  omitChildren,
-  isValidElement,
-  isEmpty,
-  cx as cx6
-} from "@yamada-ui/utils";
-import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
-var [DialogProvider, useDialog] = createContext({
-  name: `DialogContext`,
-  errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in "<Dialog />" `
-});
-var Dialog = forwardRef6(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = useMultiComponentStyle("Dialog", { size, ...props });
-  const {
-    className,
-    children,
-    withOverlay = true,
-    withCloseButton = true,
-    header,
-    footer,
-    cancel,
-    other,
-    success,
-    onClose,
-    onCancel,
-    onOther,
-    onSuccess,
-    ...rest
-  } = omitThemeProps(mergedProps);
-  const validChildren = getValidChildren(children);
-  const [customDialogOverlay] = findChildren(validChildren, DialogOverlay);
-  const [customDialogCloseButton] = findChildren(validChildren, DialogCloseButton);
-  const [customDialogHeader] = findChildren(validChildren, DialogHeader);
-  const [customDialogBody] = findChildren(validChildren, DialogBody);
-  const [customDialogFooter] = findChildren(validChildren, DialogFooter);
-  const cloneChildren = !isEmpty(validChildren) ? omitChildren(
-    validChildren,
-    DialogOverlay,
-    DialogCloseButton,
-    DialogHeader,
-    DialogBody,
-    DialogFooter
-  ) : children;
-  const css = { ...styles.container };
-  const cancelButtonProps = isValidElement(cancel) ? { children: cancel } : cancel;
-  const otherButtonProps = isValidElement(other) ? { children: other } : other;
-  const successButtonProps = isValidElement(success) ? { children: success } : success;
-  if (cancelButtonProps && !cancelButtonProps.variant)
-    cancelButtonProps.variant = "ghost";
-  if (otherButtonProps && !otherButtonProps.colorScheme)
-    otherButtonProps.colorScheme = "secondary";
-  if (successButtonProps && !successButtonProps.colorScheme)
-    successButtonProps.colorScheme = "primary";
-  return /* @__PURE__ */ jsx6(DialogProvider, { value: styles, children: /* @__PURE__ */ jsxs(
-    Modal,
-    {
-      ref,
-      className: cx6("ui-dialog", className),
-      __css: css,
-      ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
-      children: [
-        customDialogOverlay != null ? customDialogOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ jsx6(DialogOverlay, {}) : null,
-        customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx6(DialogCloseButton, {}) : null,
-        customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ jsx6(DialogHeader, { children: header }) : null,
-        customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ jsx6(DialogBody, { children: cloneChildren }) : null,
-        customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ jsx6(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ jsxs(Fragment, { children: [
-          cancelButtonProps ? /* @__PURE__ */ jsx6(Button, { onClick: () => onCancel == null ? void 0 : onCancel(onClose), ...cancelButtonProps }) : null,
-          otherButtonProps ? /* @__PURE__ */ jsx6(Button, { onClick: () => onOther == null ? void 0 : onOther(onClose), ...otherButtonProps }) : null,
-          successButtonProps ? /* @__PURE__ */ jsx6(Button, { onClick: () => onSuccess == null ? void 0 : onSuccess(onClose), ...successButtonProps }) : null
-        ] }) }) : null
-      ]
-    }
-  ) });
-});
-var DialogOverlay = forwardRef6(
-  ({ className, ...rest }, ref) => {
-    const styles = useDialog();
-    const css = { ...styles.overlay };
-    return /* @__PURE__ */ jsx6(
-      ModalOverlay,
-      {
-        ref,
-        className: cx6("ui-dialog-overlay", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-var DialogCloseButton = forwardRef6(
-  ({ className, ...rest }, ref) => {
-    const styles = useDialog();
-    const css = { ...styles.closeButton };
-    return /* @__PURE__ */ jsx6(
-      ModalCloseButton,
-      {
-        ref,
-        className: cx6("ui-dialog-close-button", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-var DialogHeader = forwardRef6(
-  ({ className, ...rest }, ref) => {
-    const styles = useDialog();
-    const css = { ...styles.header };
-    return /* @__PURE__ */ jsx6(ModalHeader, { ref, className: cx6("ui-dialog-header", className), __css: css, ...rest });
-  }
-);
-var DialogBody = forwardRef6(({ className, ...rest }, ref) => {
-  const styles = useDialog();
-  const css = { ...styles.body };
-  return /* @__PURE__ */ jsx6(ModalBody, { ref, className: cx6("ui-dialog-body", className), __css: css, ...rest });
-});
-var DialogFooter = forwardRef6(
-  ({ className, ...rest }, ref) => {
-    const styles = useDialog();
-    const css = { ...styles.footer };
-    return /* @__PURE__ */ jsx6(ModalFooter, { ref, className: cx6("ui-dialog-footer", className), __css: css, ...rest });
-  }
-);
-
-// src/modal.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var [ModalProvider, useModal] = createContext2({
-  name: `ModalContext`,
-  errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
-});
-var Modal = forwardRef7(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = useMultiComponentStyle2("Modal", { size, ...props });
-  const {
-    className,
-    children,
-    isOpen,
-    onClose,
-    onOverlayClick,
-    onEsc,
-    onCloseComplete,
-    placement: _placement = "center",
-    outside = "md",
-    withCloseButton = true,
-    withOverlay = true,
-    allowPinchZoom = false,
-    scrollBehavior = "inside",
-    autoFocus,
-    restoreFocus,
-    initialFocusRef,
-    finalFocusRef,
-    blockScrollOnMount = true,
-    closeOnOverlay = true,
-    closeOnEsc = true,
-    lockFocusAcrossFrames = true,
-    animation = "scale",
-    duration,
-    ...rest
-  } = omitThemeProps2(mergedProps);
-  const onKeyDown = useCallback(
-    (event) => {
-      if (event.key !== "Escape")
-        return;
-      event.stopPropagation();
-      if (closeOnEsc)
-        onClose == null ? void 0 : onClose();
-      onEsc == null ? void 0 : onEsc();
-    },
-    [closeOnEsc, onClose, onEsc]
-  );
-  const validChildren = getValidChildren2(children);
-  const [customModalOverlay, ...cloneChildren] = findChildren2(
-    validChildren,
-    ModalOverlay,
-    DialogOverlay,
-    DrawerOverlay
-  );
-  let [drawerContent] = findChildren2(validChildren, DrawerContent);
-  if (drawerContent)
-    drawerContent = cloneElement(drawerContent, { onKeyDown });
-  const placement = useValue(_placement);
-  const css = {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    zIndex: "beerus",
-    w: "100vw",
-    h: "100vh",
-    p: size !== "full" ? outside : void 0,
-    display: "flex",
-    justifyContent: placement.includes("right") ? "flex-start" : placement.includes("left") ? "flex-end" : "center",
-    alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center"
-  };
-  return /* @__PURE__ */ jsx7(
-    ModalProvider,
-    {
-      value: {
-        isOpen,
-        onClose,
-        onOverlayClick,
-        withCloseButton,
-        scrollBehavior,
-        closeOnOverlay,
-        animation,
-        duration,
-        styles
-      },
-      children: /* @__PURE__ */ jsx7(AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ jsx7(Portal, { children: /* @__PURE__ */ jsx7(
-        FocusLock,
-        {
-          autoFocus,
-          initialFocusRef,
-          finalFocusRef,
-          restoreFocus,
-          lockFocusAcrossFrames,
-          children: /* @__PURE__ */ jsx7(
-            RemoveScroll,
-            {
-              allowPinchZoom,
-              enabled: blockScrollOnMount,
-              forwardProps: true,
-              children: /* @__PURE__ */ jsxs2(ui5.div, { __css: css, children: [
-                customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ jsx7(ModalOverlay, {}) : null,
-                drawerContent != null ? drawerContent : /* @__PURE__ */ jsx7(ModalContent, { ref, className, onKeyDown, ...rest, children: cloneChildren })
-              ] })
-            }
-          )
-        }
-      ) }) : null })
-    }
-  );
-});
-var getModalContentProps = (animation = "scale", duration) => {
-  switch (animation) {
-    case "scale":
-      return {
-        ...scaleFadeProps,
-        custom: { scale: 0.95, reverse: true, duration }
-      };
-    case "top":
-      return {
-        ...slideFadeProps,
-        custom: { offsetY: -16, reverse: true, duration }
-      };
-    case "right":
-      return {
-        ...slideFadeProps,
-        custom: { offsetX: 16, reverse: true, duration }
-      };
-    case "left":
-      return {
-        ...slideFadeProps,
-        custom: { offsetX: -16, reverse: true, duration }
-      };
-    case "bottom":
-      return {
-        ...slideFadeProps,
-        custom: { offsetY: 16, reverse: true, duration }
-      };
-  }
-};
-var ModalContent = forwardRef7(
-  ({ className, children, __css, ...rest }, ref) => {
-    const { styles, scrollBehavior, withCloseButton, onClose, animation, duration } = useModal();
-    const validChildren = getValidChildren2(children);
-    const [customModalCloseButton, ...cloneChildren] = findChildren2(
-      validChildren,
-      ModalCloseButton,
-      DialogCloseButton
-    );
-    const props = animation !== "none" ? getModalContentProps(animation, duration) : {};
-    const css = {
-      position: "relative",
-      maxH: "100%",
-      display: "flex",
-      flexDirection: "column",
-      overflow: scrollBehavior === "inside" ? "hidden" : "auto",
-      outline: 0,
-      ...__css ? __css : styles.container
-    };
-    return /* @__PURE__ */ jsxs2(
-      ui5.section,
-      {
-        as: motion2.section,
-        ref,
-        className: cx7("ui-modal", className),
-        tabIndex: -1,
-        __css: css,
-        ...props,
-        ...rest,
-        children: [
-          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx7(ModalCloseButton, {}) : null,
-          cloneChildren
-        ]
-      }
-    );
-  }
-);
-
-// src/drawer.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-var [DrawerProvider, useDrawer] = createContext3({
-  name: `DrawerContext`,
-  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
-});
-var Drawer = forwardRef8(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = useMultiComponentStyle3("Drawer", { size, ...props });
-  const {
-    children,
-    isOpen,
-    placement = "right",
-    onClose,
-    onOverlayClick,
-    onEsc,
-    onCloseComplete,
-    withCloseButton = true,
-    withOverlay = true,
-    allowPinchZoom,
-    autoFocus,
-    restoreFocus,
-    initialFocusRef,
-    finalFocusRef,
-    blockScrollOnMount,
-    closeOnOverlay,
-    closeOnEsc,
-    lockFocusAcrossFrames,
-    duration = { enter: 0.4, exit: 0.3 },
-    ...rest
-  } = omitThemeProps3(mergedProps);
-  const validChildren = getValidChildren3(children);
-  const [customDrawerOverlay, ...cloneChildren] = findChildren3(validChildren, DrawerOverlay);
-  return /* @__PURE__ */ jsx8(DrawerProvider, { value: styles, children: /* @__PURE__ */ jsxs3(
-    Modal,
-    {
-      ref,
-      ...{
-        isOpen,
-        onClose,
-        onOverlayClick,
-        onEsc,
-        onCloseComplete,
-        withCloseButton: false,
-        withOverlay: false,
-        allowPinchZoom,
-        autoFocus,
-        restoreFocus,
-        initialFocusRef,
-        finalFocusRef,
-        blockScrollOnMount,
-        closeOnOverlay,
-        closeOnEsc,
-        lockFocusAcrossFrames,
-        duration
-      },
-      children: [
-        customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ jsx8(DrawerOverlay, {}) : null,
-        /* @__PURE__ */ jsx8(DrawerContent, { ...{ placement, withCloseButton, ...rest }, children: cloneChildren })
-      ]
-    }
-  ) });
-});
-var DrawerContent = forwardRef8(
-  ({ className, children, placement, withCloseButton, ...rest }, ref) => {
-    const { isOpen, onClose, duration } = useModal();
-    const styles = useDrawer();
-    const validChildren = getValidChildren3(children);
-    const [customDrawerCloseButton, ...cloneChildren] = findChildren3(
-      validChildren,
-      DrawerCloseButton
-    );
-    const css = {
-      display: "flex",
-      flexDirection: "column",
-      width: "100%",
-      outline: 0,
-      ...styles.container
-    };
-    return /* @__PURE__ */ jsxs3(
-      Slide,
-      {
-        ref,
-        className: cx8("ui-drawer", className),
-        tabIndex: -1,
-        isOpen,
-        placement,
-        duration,
-        __css: css,
-        ...rest,
-        children: [
-          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx8(DrawerCloseButton, {}) : null,
-          cloneChildren
-        ]
-      }
-    );
-  }
-);
-var DrawerOverlay = forwardRef8(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.overlay };
-    return /* @__PURE__ */ jsx8(
-      ModalOverlay,
-      {
-        ref,
-        className: cx8("ui-drawer-overlay", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-var DrawerCloseButton = forwardRef8(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.closeButton };
-    return /* @__PURE__ */ jsx8(
-      ModalCloseButton,
-      {
-        ref,
-        className: cx8("ui-drawer-close-button", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-var DrawerHeader = forwardRef8(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.header };
-    return /* @__PURE__ */ jsx8(ModalHeader, { ref, className: cx8("ui-drawer-header", className), __css: css, ...rest });
-  }
-);
-var DrawerBody = forwardRef8(({ className, ...rest }, ref) => {
-  const styles = useDrawer();
-  const css = { ...styles.body };
-  return /* @__PURE__ */ jsx8(ModalBody, { ref, className: cx8("ui-drawer-body", className), __css: css, ...rest });
-});
-var DrawerFooter = forwardRef8(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.footer };
-    return /* @__PURE__ */ jsx8(ModalFooter, { ref, className: cx8("ui-drawer-footer", className), __css: css, ...rest });
-  }
-);
-
-export {
-  Drawer,
-  DrawerContent,
-  DrawerOverlay,
-  DrawerCloseButton,
-  DrawerHeader,
-  DrawerBody,
-  DrawerFooter,
-  useModal,
-  Modal,
-  ModalOverlay,
-  ModalCloseButton,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Dialog,
-  DialogOverlay,
-  DialogCloseButton,
-  DialogHeader,
-  DialogBody,
-  DialogFooter
-};