@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-54HN5BXW.mjs → chunk-OES5DL3S.mjs}

@@ -1,23 +1,24 @@
+import {
+  composeRefs
+} from "./chunk-WWZZRB7H.mjs";
 import {
   Button
-} from "./chunk-5TE7KLE5.mjs";
+} from "./chunk-WFLXJOFU.mjs";
 import {
-  renderBodyPortal,
+  renderOverlayPortal,
   useBodyScrollLock,
   useEscapeKey,
-  useFocusTrap
-} from "./chunk-HKAZXG74.mjs";
+  useFocusTrap,
+  useOverlayPortalTarget
+} from "./chunk-NPGU6VYD.mjs";
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/Modal.tsx
 import React, { useEffect, useMemo, useCallback, useRef, useId } from "react";
 import {
-  ANIMATION_DURATION_MS,
-  captureActiveElement,
   classNames,
-  focusFirst,
   closeIconViewBox,
   closeIconPathD,
   closeIconPathStrokeLinecap,
@@ -26,7 +27,7 @@ import {
   getModalContentClasses,
   getGestureTouchPoint,
   isModalSheetSwipeCloseGesture,
-  resolveLocaleText,
+  getModalLabels,
   modalWrapperClasses,
   modalMaskClasses,
   getModalContainerClasses,
@@ -35,13 +36,21 @@ import {
   modalCloseButtonClasses,
   modalBodyClasses,
   modalFooterClasses,
-  restoreFocus,
+  shouldRenderOverlay,
+  isOverlayVisuallyHidden,
+  scheduleOverlayLeave,
+  canStartOverlaySwipeClose,
+  isOverlayDragHandleEvent,
+  clampOverlayDragOffset,
+  OVERLAY_SWIPE_HANDLE_ATTR,
   shouldCloseOnMaskClick,
   resolveSwipeGesture,
-  mergeTigerLocale
+  mergeTigerLocale,
+  OVERLAY_Z_INDEX,
+  createDocumentDragSession
 } from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Modal = ({
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Modal = React.forwardRef(function Modal2({
   open = false,
   size = "md",
   width,
@@ -50,10 +59,11 @@ var Modal = ({
   closable = true,
   mask = true,
   maskClosable = true,
+  keyboard = true,
   centered = false,
   mobileSheet = false,
   destroyOnClose = false,
-  zIndex = 1e3,
+  zIndex = OVERLAY_Z_INDEX.modal,
   className,
   children,
   footer,
@@ -71,54 +81,88 @@ var Modal = ({
   style,
   draggable: isDraggable = false,
   ...rest
-}) => {
+}, forwardedRef) {
   const config = useTigerConfig();
   const mergedLocale = useMemo(
     () => mergeTigerLocale(config.locale, locale),
     [config.locale, locale]
   );
-  const [hasBeenOpened, setHasBeenOpened] = React.useState(open);
+  const [hasOpened, setHasOpened] = React.useState(open);
+  const [leaving, setLeaving] = React.useState(false);
   const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
-  const prevOpenRef = useRef(open);
+  const [dragging, setDragging] = React.useState(false);
+  const wasOpenRef = useRef(open);
+  const afterCloseRef = useRef(onAfterClose);
+  afterCloseRef.current = onAfterClose;
+  const dragSessionRef = useRef(null);
+  const cleanupDragSession = useCallback(() => {
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = null;
+  }, []);
   useEffect(() => {
     if (open) {
-      setHasBeenOpened(true);
-    } else {
-      setDragOffset({ x: 0, y: 0 });
+      setHasOpened(true);
+      setLeaving(false);
+      wasOpenRef.current = true;
+      return;
     }
-  }, [open]);
-  const handleDragMouseDown = useCallback(
+    cleanupDragSession();
+    setDragOffset({ x: 0, y: 0 });
+    if (!wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    setLeaving(true);
+    return scheduleOverlayLeave({
+      onFinish: () => {
+        setLeaving(false);
+        afterCloseRef.current?.();
+      }
+    });
+  }, [open, cleanupDragSession]);
+  useEffect(() => cleanupDragSession, [cleanupDragSession]);
+  const handleDragPointerDown = useCallback(
     (e) => {
-      if (!isDraggable) return;
-      const startX = e.clientX;
-      const startY = e.clientY;
-      let offsetX = dragOffset.x;
-      let offsetY = dragOffset.y;
-      const onMouseMove = (ev) => {
-        offsetX = dragOffset.x + (ev.clientX - startX);
-        offsetY = dragOffset.y + (ev.clientY - startY);
-        setDragOffset({ x: offsetX, y: offsetY });
-      };
-      const onMouseUp = () => {
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
+      if (!isDraggable || e.button !== 0 || !isOverlayDragHandleEvent(e)) return;
+      e.preventDefault();
+      const originX = dragOffset.x;
+      const originY = dragOffset.y;
+      const startRect = (dialogRef.current ?? e.currentTarget).getBoundingClientRect();
+      const view = e.currentTarget.ownerDocument.defaultView;
+      const viewport = {
+        width: view?.innerWidth ?? startRect.width,
+        height: view?.innerHeight ?? startRect.height
       };
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      cleanupDragSession();
+      setDragging(true);
+      dragSessionRef.current = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget.ownerDocument,
+        pointerId: e.pointerId,
+        pointerTarget: e.currentTarget,
+        onMove: ({ deltaX, deltaY }) => {
+          setDragOffset(
+            clampOverlayDragOffset(
+              { x: originX, y: originY },
+              { x: deltaX, y: deltaY },
+              startRect,
+              viewport
+            )
+          );
+        },
+        onEnd: () => {
+          dragSessionRef.current = null;
+          setDragging(false);
+        }
+      });
     },
-    [isDraggable, dragOffset]
+    [isDraggable, dragOffset, cleanupDragSession]
   );
-  useEffect(() => {
-    if (prevOpenRef.current && !open) {
-      const timer = window.setTimeout(() => {
-        onAfterClose?.();
-      }, ANIMATION_DURATION_MS);
-      prevOpenRef.current = open;
-      return () => window.clearTimeout(timer);
-    }
-    prevOpenRef.current = open;
-  }, [open, onAfterClose]);
-  const shouldRender = destroyOnClose ? open : hasBeenOpened;
+  const shouldRender = shouldRenderOverlay({
+    open,
+    hasOpened,
+    leaving,
+    destroyOnClose
+  });
   const handleClose = useCallback(() => {
     onCancel?.();
     onOpenChange?.(false);
@@ -142,65 +186,57 @@ var Modal = ({
     [size, className, mobileSheet]
   );
   const containerClasses = useMemo(() => getModalContainerClasses(centered), [centered]);
-  const resolvedCloseAriaLabel = resolveLocaleText(
-    "Close",
-    closeAriaLabel,
-    labels?.closeAriaLabel,
-    mergedLocale?.modal?.closeAriaLabel,
-    mergedLocale?.common?.closeText
-  );
-  const resolvedCancelText = resolveLocaleText(
-    "\u53D6\u6D88",
-    cancelText,
-    labels?.cancelText,
-    mergedLocale?.modal?.cancelText,
-    mergedLocale?.common?.cancelText
-  );
-  const resolvedOkText = resolveLocaleText(
-    "\u786E\u5B9A",
-    okText,
-    labels?.okText,
-    mergedLocale?.modal?.okText,
-    mergedLocale?.common?.okText
-  );
+  const modalLabels = getModalLabels(mergedLocale, {
+    ...labels,
+    ...closeAriaLabel ? { closeAriaLabel } : {},
+    ...okText ? { okText } : {},
+    ...cancelText ? { cancelText } : {}
+  });
+  const resolvedCloseAriaLabel = modalLabels.closeAriaLabel;
+  const resolvedCancelText = modalLabels.cancelText;
+  const resolvedOkText = modalLabels.okText;
   const reactId = useId();
   const modalId = useMemo(() => `tiger-modal-${reactId}`, [reactId]);
   const titleId = `${modalId}-title`;
+  const bodyId = `${modalId}-body`;
   const overlayHostId = `${modalId}-overlay-host`;
   const {
     ["aria-labelledby"]: _ariaLabelledby,
+    ["aria-label"]: ariaLabelFromRest,
+    ["aria-describedby"]: ariaDescribedbyFromRest,
     role: _role,
     tabIndex: _tabIndex,
     ...dialogDivProps
   } = rest;
-  const ariaLabelledby = rest["aria-labelledby"] ?? (title || titleContent ? titleId : void 0);
+  const hasTitle = Boolean(title || titleContent);
+  const ariaLabelledby = rest["aria-labelledby"] ?? (hasTitle ? titleId : void 0);
+  const ariaLabel = ariaLabelFromRest ?? (hasTitle ? void 0 : modalLabels.dialogAriaLabel);
+  const ariaDescribedby = ariaDescribedbyFromRest ?? (children ? bodyId : void 0);
+  const { anchorRef, target: portalTarget } = useOverlayPortalTarget();
   const dialogRef = useRef(null);
   const rootRef = useRef(null);
   const closeButtonRef = useRef(null);
-  const previousActiveElementRef = useRef(null);
+  const bodyRef = useRef(null);
   const touchStartRef = useRef(null);
   const touchCurrentRef = useRef(null);
-  useEffect(() => {
-    if (open) {
-      previousActiveElementRef.current = captureActiveElement();
-      const timer = setTimeout(() => {
-        focusFirst([closeButtonRef.current, dialogRef.current]);
-      }, 0);
-      return () => clearTimeout(timer);
-    }
-    restoreFocus(previousActiveElementRef.current);
-  }, [open]);
-  useEscapeKey({ enabled: open, onEscape: handleClose, layerRef: rootRef });
+  const swipeAllowedRef = useRef(false);
+  useEscapeKey({ enabled: open && keyboard, onEscape: handleClose, layerRef: rootRef });
   useBodyScrollLock({ enabled: open });
-  useFocusTrap({ enabled: open, containerRef: rootRef });
+  useFocusTrap({ enabled: open, containerRef: rootRef, inert: true, autoFocus: true });
   const resetTouchGesture = useCallback(() => {
     touchStartRef.current = null;
     touchCurrentRef.current = null;
+    swipeAllowedRef.current = false;
   }, []);
   const handleTouchStart = useCallback(
     (event) => {
       dialogDivProps.onTouchStart?.(event);
       if (!open || !mobileSheet) return;
+      swipeAllowedRef.current = canStartOverlaySwipeClose({
+        target: event.target,
+        scrollContainer: bodyRef.current,
+        closeDirection: "down"
+      });
       const point = getGestureTouchPoint(event.touches);
       touchStartRef.current = point;
       touchCurrentRef.current = point;
@@ -226,8 +262,9 @@ var Modal = ({
         getGestureTouchPoint(event.changedTouches) ?? touchCurrentRef.current,
         { minDistance: 48, minVelocity: 0.15 }
       );
+      const allowed = swipeAllowedRef.current;
       resetTouchGesture();
-      if (mobileSheet && isModalSheetSwipeCloseGesture(gesture)) {
+      if (allowed && mobileSheet && isModalSheetSwipeCloseGesture(gesture)) {
         handleClose();
       }
     },
@@ -248,6 +285,8 @@ var Modal = ({
       fill: "none",
       viewBox: closeIconViewBox,
       stroke: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
       children: /* @__PURE__ */ jsx(
         "path",
         {
@@ -259,16 +298,17 @@ var Modal = ({
       )
     }
   );
+  const anchor = /* @__PURE__ */ jsx("span", { ref: anchorRef, hidden: true });
   if (!shouldRender) {
-    return null;
+    return anchor;
   }
   const modalContent = /* @__PURE__ */ jsxs(
     "div",
     {
       ref: rootRef,
-      className: classNames(modalWrapperClasses, !open && "pointer-events-none"),
+      className: modalWrapperClasses,
       style: { zIndex },
-      hidden: !open,
+      hidden: isOverlayVisuallyHidden(open, leaving),
       "aria-hidden": !open ? "true" : void 0,
       "data-tiger-overlay-layer": "",
       "data-tiger-modal-root": "",
@@ -278,10 +318,11 @@ var Modal = ({
           {
             className: classNames(modalMaskClasses, open ? "opacity-100" : "opacity-0"),
             "aria-hidden": "true",
-            "data-tiger-modal-mask": ""
+            "data-tiger-modal-mask": "",
+            onClick: handleMaskClick
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: containerClasses, onClick: handleMaskClick, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerClasses, children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: contentClasses,
@@ -294,9 +335,11 @@ var Modal = ({
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": ariaLabelledby,
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedby,
             "aria-owns": overlayHostId,
             tabIndex: -1,
-            ref: dialogRef,
+            ref: composeRefs(forwardedRef, dialogRef),
             onTouchStart: handleTouchStart,
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
@@ -307,8 +350,13 @@ var Modal = ({
                 "div",
                 {
                   className: modalHeaderClasses,
-                  onMouseDown: isDraggable ? handleDragMouseDown : void 0,
-                  style: isDraggable ? { cursor: "grab", userSelect: "none" } : void 0,
+                  ...{ [OVERLAY_SWIPE_HANDLE_ATTR]: "" },
+                  onPointerDown: isDraggable ? handleDragPointerDown : void 0,
+                  style: isDraggable ? {
+                    cursor: dragging ? "grabbing" : "grab",
+                    userSelect: "none",
+                    touchAction: "none"
+                  } : void 0,
                   children: [
                     (title || titleContent) && /* @__PURE__ */ jsx("h3", { id: titleId, className: modalTitleClasses, children: titleContent || title }),
                     closable && /* @__PURE__ */ jsx(
@@ -325,8 +373,8 @@ var Modal = ({
                   ]
                 }
               ),
-              children && /* @__PURE__ */ jsx("div", { className: modalBodyClasses, children }),
-              footer ? /* @__PURE__ */ jsx("div", { className: modalFooterClasses, "data-tiger-modal-footer": "", children: footer }) : showDefaultFooter ? /* @__PURE__ */ jsxs("div", { className: modalFooterClasses, "data-tiger-modal-footer": "", children: [
+              children && /* @__PURE__ */ jsx("div", { className: modalBodyClasses, ref: bodyRef, id: bodyId, "data-tiger-modal-body": "", children }),
+              footer ? /* @__PURE__ */ jsx("div", { className: modalFooterClasses, "data-tiger-modal-footer": "", children: typeof footer === "function" ? footer({ ok: handleOk, cancel: handleClose }) : footer }) : showDefaultFooter ? /* @__PURE__ */ jsxs("div", { className: modalFooterClasses, "data-tiger-modal-footer": "", children: [
                 /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleClose, children: resolvedCancelText }),
                 /* @__PURE__ */ jsx(Button, { onClick: handleOk, children: resolvedOkText })
               ] }) : null
@@ -337,8 +385,11 @@ var Modal = ({
       ]
     }
   );
-  return renderBodyPortal(modalContent);
-};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    anchor,
+    renderOverlayPortal(modalContent, portalTarget)
+  ] });
+});
 
 export {
   Modal