@yamada-ui/modal 1.3.12-next-20241005220055 → 1.3.12-next-20241008193728

package/dist/dialog.js

@@ -56,11 +56,11 @@ var [DrawerProvider, useDrawer] = (0, import_utils.createContext)({
 var import_jsx_runtime = require("react/jsx-runtime");
 var ModalBody = (0, import_core.forwardRef)(
   ({ className, __css, ...rest }, ref) => {
-    const { styles, scrollBehavior } = useModal();
+    const { scrollBehavior, styles } = useModal();
     const css = {
+      alignItems: "flex-start",
       display: "flex",
       flexDirection: "column",
-      alignItems: "flex-start",
       overflow: scrollBehavior === "inside" ? "auto" : void 0,
       ...__css ? __css : styles.body
     };
@@ -119,11 +119,11 @@ var ModalCloseButton = (0, import_core3.forwardRef)(
       {
         ref,
         className: (0, import_utils4.cx)("ui-modal__close-button"),
-        __css: css,
         onClick: (0, import_utils4.handlerAll)(onClick, (ev) => {
           ev.stopPropagation();
           onClose == null ? void 0 : onClose();
         }),
+        __css: css,
         ...rest
       }
     );
@@ -164,8 +164,8 @@ var ModalFooter = (0, import_core5.forwardRef)(
   ({ className, __css, ...rest }, ref) => {
     const { styles } = useModal();
     const css = {
-      display: "flex",
       alignItems: "center",
+      display: "flex",
       justifyContent: "flex-end",
       ...__css ? __css : styles.footer
     };
@@ -215,8 +215,8 @@ var ModalHeader = (0, import_core7.forwardRef)(
   ({ className, __css, ...rest }, ref) => {
     const { styles } = useModal();
     const css = {
-      display: "flex",
       alignItems: "center",
+      display: "flex",
       justifyContent: "flex-start",
       ...__css ? __css : styles.header
     };
@@ -264,21 +264,21 @@ var import_transitions = require("@yamada-ui/transitions");
 var import_utils10 = require("@yamada-ui/utils");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ModalOverlay = (0, import_motion.motionForwardRef)(
-  ({ className, __css, onClick, ...rest }, ref) => {
+  ({ className, onClick, __css, ...rest }, ref) => {
     const {
-      styles,
+      animation,
       closeOnOverlay,
-      onOverlayClick,
+      duration,
+      styles,
       onClose,
-      animation,
-      duration
+      onOverlayClick
     } = useModal();
     const css = {
+      h: "100dvh",
+      left: 0,
       position: "fixed",
       top: 0,
-      left: 0,
       w: "100vw",
-      h: "100dvh",
       ...__css ? __css : styles.overlay
     };
     const props = animation !== "none" ? import_transitions.fadeProps : {};
@@ -288,11 +288,11 @@ var ModalOverlay = (0, import_motion.motionForwardRef)(
         ref,
         className: (0, import_utils10.cx)("ui-modal__overlay", className),
         custom: { duration },
-        __css: css,
         onClick: (0, import_utils10.handlerAll)(onClick, onOverlayClick, (ev) => {
           ev.stopPropagation();
           if (closeOnOverlay) onClose == null ? void 0 : onClose();
         }),
+        __css: css,
         ...props,
         ...rest
       }
@@ -390,18 +390,18 @@ var DrawerContent = (0, import_motion3.motionForwardRef)(
   ({
     className,
     children,
-    placement: _placement,
-    withCloseButton,
-    withDragBar,
     closeOnDrag,
     dragConstraints,
     dragElastic,
     dragOffset,
     dragVelocity,
+    placement: _placement,
+    withCloseButton,
+    withDragBar,
     blankForDragProps,
     ...rest
   }, ref) => {
-    const { isOpen, onClose, duration } = useModal();
+    const { duration, isOpen, onClose } = useModal();
     const styles = useDrawer();
     const placement = (0, import_use_value.useValue)(_placement);
     const validChildren = (0, import_utils14.getValidChildren)(children);
@@ -420,27 +420,27 @@ var DrawerContent = (0, import_motion3.motionForwardRef)(
       let position = {};
       switch (placement) {
         case "top":
-          position = { top: "calc(-100dvh + 1px)", left: 0, right: 0 };
+          position = { left: 0, right: 0, top: "calc(-100dvh + 1px)" };
           break;
         case "bottom":
           position = { bottom: "calc(-100dvh + 1px)", left: 0, right: 0 };
           break;
         case "left":
-          position = { left: "calc(-100% + 1px)", top: 0, bottom: 0 };
+          position = { bottom: 0, left: "calc(-100% + 1px)", top: 0 };
           break;
         case "right":
-          position = { right: "calc(-100% + 1px)", top: 0, bottom: 0 };
+          position = { bottom: 0, right: "calc(-100% + 1px)", top: 0 };
           break;
       }
       const [lightBg, darkBg] = blankForDragBg;
       return {
         _after: {
+          bg: lightBg,
           content: '""',
           display: "block",
-          w: "100%",
           h: "100dvh",
-          bg: lightBg,
           position: "absolute",
+          w: "100%",
           ...position,
           ...blankForDragProps
         },
@@ -506,18 +506,18 @@ var DrawerContent = (0, import_motion3.motionForwardRef)(
       {
         ref,
         className: (0, import_utils14.cx)("ui-drawer", className),
-        isOpen,
-        placement,
-        duration,
         drag: closeOnDrag ? getDragDirection() : false,
         dragConstraints: getDragDirectionRestriction(dragConstraints),
         dragElastic: getDragDirectionRestriction(dragElastic),
-        dragSnapToOrigin: true,
         dragMomentum: false,
+        dragSnapToOrigin: true,
+        duration,
+        isOpen,
+        placement,
+        tabIndex: -1,
         onDragEnd: (_, info) => {
           if (isCloseByDragInfo(info)) onClose == null ? void 0 : onClose();
         },
-        tabIndex: -1,
         __css: css,
         ...rest,
         children: [
@@ -577,39 +577,39 @@ var getModalContentProps = (animation = "scale", duration) => {
     case "scale":
       return {
         ...import_transitions3.scaleFadeProps,
-        custom: { scale: 0.95, reverse: true, duration }
+        custom: { duration, reverse: true, scale: 0.95 }
       };
     case "top":
       return {
         ...import_transitions3.slideFadeProps,
-        custom: { offsetY: -16, reverse: true, duration }
+        custom: { duration, offsetY: -16, reverse: true }
       };
     case "right":
       return {
         ...import_transitions3.slideFadeProps,
-        custom: { offsetX: 16, reverse: true, duration }
+        custom: { duration, offsetX: 16, reverse: true }
       };
     case "left":
       return {
         ...import_transitions3.slideFadeProps,
-        custom: { offsetX: -16, reverse: true, duration }
+        custom: { duration, offsetX: -16, reverse: true }
       };
     case "bottom":
       return {
         ...import_transitions3.slideFadeProps,
-        custom: { offsetY: 16, reverse: true, duration }
+        custom: { duration, offsetY: 16, reverse: true }
       };
   }
 };
 var ModalContent = (0, import_motion5.motionForwardRef)(
   ({ className, children, __css, ...rest }, ref) => {
     const {
-      styles,
+      animation,
+      duration,
       scrollBehavior,
+      styles,
       withCloseButton,
-      onClose,
-      animation,
-      duration
+      onClose
     } = useModal();
     const validChildren = (0, import_utils16.getValidChildren)(children);
     const [customModalCloseButton, ...cloneChildren] = (0, import_utils16.findChildren)(
@@ -619,21 +619,21 @@ var ModalContent = (0, import_motion5.motionForwardRef)(
     );
     const props = animation !== "none" ? getModalContentProps(animation, duration) : {};
     const css = {
-      position: "relative",
-      maxH: "100%",
       display: "flex",
       flexDirection: "column",
-      overflow: scrollBehavior === "inside" ? "hidden" : "auto",
+      maxH: "100%",
       outline: 0,
+      overflow: scrollBehavior === "inside" ? "hidden" : "auto",
+      position: "relative",
       ...__css ? __css : styles.container
     };
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       import_motion5.motion.section,
       {
-        role: "dialog",
-        "aria-modal": "true",
         ref,
         className: (0, import_utils16.cx)("ui-modal", className),
+        "aria-modal": "true",
+        role: "dialog",
         tabIndex: -1,
         __css: css,
         ...props,
@@ -659,30 +659,30 @@ var Modal = (0, import_motion6.motionForwardRef)(
     });
     const {
       className,
-      children,
-      isOpen,
-      onClose,
-      onOverlayClick,
-      onEsc,
-      onCloseComplete,
-      placement: _placement = "center",
-      outside = "fallback(4, 1rem)",
-      withCloseButton = true,
-      withOverlay = true,
       allowPinchZoom = false,
-      scrollBehavior = "inside",
+      animation = "scale",
       autoFocus,
-      restoreFocus,
-      initialFocusRef,
-      finalFocusRef,
       blockScrollOnMount = true,
-      closeOnOverlay = true,
+      children,
       closeOnEsc = true,
-      lockFocusAcrossFrames = true,
-      animation = "scale",
+      closeOnOverlay = true,
       duration,
-      portalProps,
+      finalFocusRef,
+      initialFocusRef,
+      isOpen,
+      lockFocusAcrossFrames = true,
+      outside = "fallback(4, 1rem)",
+      placement: _placement = "center",
+      restoreFocus,
+      scrollBehavior = "inside",
+      withCloseButton = true,
+      withOverlay = true,
       containerProps,
+      portalProps,
+      onClose,
+      onCloseComplete,
+      onEsc,
+      onOverlayClick,
       ...rest
     } = (0, import_core12.omitThemeProps)(mergedProps);
     const onKeyDown = (0, import_react2.useCallback)(
@@ -706,39 +706,39 @@ var Modal = (0, import_motion6.motionForwardRef)(
       drawerContent = (0, import_react2.cloneElement)(drawerContent, { onKeyDown });
     const placement = (0, import_use_value2.useValue)(_placement);
     const css = {
+      alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center",
+      display: "flex",
+      h: "100dvh",
+      justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center",
+      left: 0,
+      p: size !== "full" ? outside : void 0,
       position: "fixed",
       top: 0,
-      left: 0,
-      zIndex: "fallback(jeice, 110)",
       w: "100vw",
-      h: "100dvh",
-      p: size !== "full" ? outside : void 0,
-      display: "flex",
-      justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center",
-      alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center"
+      zIndex: "fallback(jeice, 110)"
     };
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ModalProvider,
       {
         value: {
-          isOpen,
-          onClose,
-          onOverlayClick,
-          withCloseButton,
-          scrollBehavior,
-          closeOnOverlay,
           animation,
+          closeOnOverlay,
           duration,
-          styles
+          isOpen,
+          scrollBehavior,
+          styles,
+          withCloseButton,
+          onClose,
+          onOverlayClick
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_motion6.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_focus_lock.FocusLock,
           {
             autoFocus,
-            initialFocusRef,
             finalFocusRef,
-            restoreFocus,
+            initialFocusRef,
             lockFocusAcrossFrames,
+            restoreFocus,
             children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               import_react_remove_scroll.RemoveScroll,
               {
@@ -777,19 +777,19 @@ var Dialog = (0, import_motion7.motionForwardRef)(
     });
     const {
       className,
+      cancel,
       children,
-      withOverlay = true,
-      withCloseButton = true,
-      header,
       footer,
-      cancel,
+      header,
       other,
       success,
-      onClose,
+      withCloseButton = true,
+      withOverlay = true,
+      containerProps,
       onCancel,
+      onClose,
       onOther,
       onSuccess,
-      containerProps,
       ...rest
     } = (0, import_core13.omitThemeProps)(mergedProps);
     const validChildren = (0, import_utils18.getValidChildren)(children);
@@ -807,15 +807,18 @@ var Dialog = (0, import_motion7.motionForwardRef)(
       DialogFooter
     ) : children;
     const css = { ...styles.container };
-    const cancelButtonProps = (0, import_utils18.isValidElement)(cancel) ? { children: cancel } : cancel;
-    const otherButtonProps = (0, import_utils18.isValidElement)(other) ? { children: other } : other;
-    const successButtonProps = (0, import_utils18.isValidElement)(success) ? { children: success } : success;
-    if (cancelButtonProps && !cancelButtonProps.variant)
-      cancelButtonProps.variant = "ghost";
-    if (otherButtonProps && !otherButtonProps.colorScheme)
+    const cancelButtonProps = (0, import_utils18.isValidElement)(cancel) || (0, import_utils18.isUndefined)(cancel) ? { children: cancel } : cancel;
+    const otherButtonProps = (0, import_utils18.isValidElement)(other) || (0, import_utils18.isUndefined)(other) ? { children: other } : other;
+    const successButtonProps = (0, import_utils18.isValidElement)(success) || (0, import_utils18.isUndefined)(success) ? { children: success } : success;
+    if (!cancelButtonProps.variant) cancelButtonProps.variant = "ghost";
+    if (!otherButtonProps.colorScheme)
       otherButtonProps.colorScheme = "secondary";
-    if (successButtonProps && !successButtonProps.colorScheme)
+    if (!successButtonProps.colorScheme)
       successButtonProps.colorScheme = "primary";
+    const hasCancelButton = !!cancelButtonProps.children;
+    const hasOtherButton = !!otherButtonProps.children;
+    const hasSuccessButton = !!successButtonProps.children;
+    const hasFooter = hasCancelButton || hasOtherButton || hasSuccessButton;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       Modal,
       {
@@ -823,10 +826,10 @@ var Dialog = (0, import_motion7.motionForwardRef)(
         className: (0, import_utils18.cx)("ui-dialog", className),
         __css: css,
         ...{
-          onClose,
-          withOverlay: false,
           withCloseButton: false,
+          withOverlay: false,
           containerProps,
+          onClose,
           ...rest,
           size
         },
@@ -835,22 +838,22 @@ var Dialog = (0, import_motion7.motionForwardRef)(
           customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogCloseButton, {}) : null,
           customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogHeader, { children: header }) : null,
           customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogBody, { children: cloneChildren }) : null,
-          customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-            cancelButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          customDialogFooter != null ? customDialogFooter : footer || hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+            hasCancelButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               import_button.Button,
               {
                 onClick: () => onCancel == null ? void 0 : onCancel(onClose),
                 ...cancelButtonProps
               }
             ) : null,
-            otherButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            hasOtherButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               import_button.Button,
               {
                 onClick: () => onOther == null ? void 0 : onOther(onClose),
                 ...otherButtonProps
               }
             ) : null,
-            successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            hasSuccessButton ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               import_button.Button,
               {
                 onClick: () => onSuccess == null ? void 0 : onSuccess(onClose),