@jekrch/react-viewport-lightbox 0.3.0 → 0.3.1

package/dist/index.cjs

@@ -741,6 +741,7 @@ function NavButton({ direction, enabled, onClick, icon, className }) {
 }
 var ANIM_MS = 250;
 var IMG_PADDING = 44;
+var GHOST_CLICK_MS = 700;
 var ZOOM_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
 function prefersReducedMotion() {
   if (typeof window === "undefined" || !window.matchMedia) return false;
@@ -794,6 +795,11 @@ function ImageViewer({
   const [collapsing, setCollapsing] = react.useState(false);
   const [isTouchDevice, setIsTouchDevice] = react.useState(false);
   const [contentShift, setContentShiftState] = react.useState({ transform: null, animate: true });
+  const openedAtRef = react.useRef(Date.now());
+  const isGhostMouseEvent = react.useCallback(
+    () => Date.now() - openedAtRef.current < GHOST_CLICK_MS,
+    []
+  );
   const containerRef = react.useRef(null);
   const imgWrapperRef = react.useRef(null);
   const topBarRef = react.useRef(null);
@@ -941,6 +947,33 @@ function ImageViewer({
     }
     setTimeout(onClose, reduce ? 0 : ANIM_MS);
   }, [onClose, getOriginRect, index, isZoomed, imgRef, imgWrapperRef]);
+  const handleBackdropTouchEnd = react.useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      e.preventDefault();
+      handleClose();
+    },
+    [handleClose]
+  );
+  const handleDoubleClickGuarded = react.useCallback(
+    (e) => {
+      if (isGhostMouseEvent()) return;
+      handleDoubleClick(e);
+    },
+    [handleDoubleClick, isGhostMouseEvent]
+  );
+  const handleBackdropClick = react.useCallback(() => {
+    if (isGhostMouseEvent()) return;
+    handleClose();
+  }, [handleClose, isGhostMouseEvent]);
+  const handleStageClick = react.useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (isGhostMouseEvent()) return;
+      handleClose();
+    },
+    [handleClose, isGhostMouseEvent]
+  );
   const navigate = react.useCallback(
     (dir) => {
       if (dir === "prev") {
@@ -1042,7 +1075,8 @@ function ImageViewer({
           "div",
           {
             className: cx("rvl-backdrop", cn("backdrop")),
-            onClick: closeOnBackdropClick ? handleClose : void 0,
+            onClick: closeOnBackdropClick ? handleBackdropClick : void 0,
+            onTouchEnd: closeOnBackdropClick ? handleBackdropTouchEnd : void 0,
             "aria-hidden": "true"
           }
         ),
@@ -1115,9 +1149,8 @@ function ImageViewer({
           "div",
           {
             className: "rvl-stage",
-            onClick: closeOnBackdropClick ? (e) => {
-              if (e.target === e.currentTarget) handleClose();
-            } : void 0,
+            onClick: closeOnBackdropClick ? handleStageClick : void 0,
+            onTouchEnd: closeOnBackdropClick ? handleBackdropTouchEnd : void 0,
             style: {
               transform: contentShift.transform ?? "translateY(0)",
               // animate=false snaps with no transition (overrides the CSS transition)
@@ -1160,7 +1193,7 @@ function ImageViewer({
                       ref: imgWrapperRef,
                       className: "rvl-img-wrapper",
                       onClick: (e) => e.stopPropagation(),
-                      onDoubleClick: handleDoubleClick,
+                      onDoubleClick: handleDoubleClickGuarded,
                       onPointerDown: gestures.handlePointerDown,
                       onPointerMove: gestures.handlePointerMove,
                       onPointerUp: gestures.handlePointerUp,