yet-another-react-lightbox 3.25.0 → 3.27.0

package/README.md

@@ -9,7 +9,7 @@ extendable.
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox.svg?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
 [![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox.svg?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
 
-- **Built for React:** works with React 18, 17 and 16.8.0+
+- **Built for React:** works with React 19, 18, 17 and 16.8.0+
 - **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
 - **Preloading:** never displays partially downloaded images
 - **Performance:** preloads limited number of images without compromising

package/dist/index.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from 'react';
 import { IMAGE_FIT_COVER, IMAGE_FIT_CONTAIN, ACTION_CLOSE, MODULE_CONTROLLER, UNKNOWN_ACTION_TYPE, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_WHEEL, EVENT_ON_KEY_UP, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_UP, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_DOWN, SLIDE_STATUS_LOADING, activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_PLACEHOLDER, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, ACTION_PREV, ACTION_NEXT, ACTION_SWIPE, MODULE_PORTAL, CLASS_FLEX_CENTER, MODULE_CAROUSEL, VK_ARROW_RIGHT, VK_ARROW_LEFT, VK_ESCAPE, MODULE_NAVIGATION, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL, MODULE_ROOT, MODULE_TOOLBAR } from './types.js';
 import { createPortal } from 'react-dom';

package/dist/plugins/captions/captions.css

@@ -1 +1 @@
-.yarl__slide_captions_container{background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));left:var(--yarl__slide_captions_container_left,0);padding:var(--yarl__slide_captions_container_padding,16px);position:absolute;right:var(--yarl__slide_captions_container_right,0);-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{display:-webkit-box;-webkit-hyphens:auto;hyphens:auto;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);color:var(--yarl__slide_description_color,#fff);text-align:var(--yarl__slide_description_text_align,start)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}
+.yarl__slide_captions_container{background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));left:var(--yarl__slide_captions_container_left,0);padding:var(--yarl__slide_captions_container_padding,16px);position:absolute;right:var(--yarl__slide_captions_container_right,0);-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{display:-webkit-box;hyphens:auto;overflow:hidden;-webkit-box-orient:vertical;color:var(--yarl__slide_description_color,#fff);-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);text-align:var(--yarl__slide_description_text_align,start)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}

package/dist/plugins/zoom/index.d.ts

@@ -26,8 +26,10 @@ declare module "yet-another-react-lightbox" {
             keyboardMoveDistance?: number;
             /** wheel zoom distance factor */
             wheelZoomDistanceFactor?: number;
-            /** pinch zoom distance factor */
+            /** @deprecated - pinch zoom distance factor */
             pinchZoomDistanceFactor?: number;
+            /** if `true`, enables the experimental pinch zoom implementation slated for v4 */
+            pinchZoomV4?: boolean;
             /** if `true`, enables image zoom via scroll gestures for mouse and trackpad users */
             scrollToZoom?: boolean;
         };

package/dist/plugins/zoom/index.js

@@ -12,6 +12,7 @@ const defaultZoomProps = {
     keyboardMoveDistance: 50,
     wheelZoomDistanceFactor: 100,
     pinchZoomDistanceFactor: 100,
+    pinchZoomV4: false,
     scrollToZoom: false,
 };
 function validateMinZoom(minZoom) {
@@ -117,7 +118,7 @@ function useZoomImageRect(slideRect, imageDimensions) {
 }
 
 function distance(pointerA, pointerB) {
-    return ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+    return Math.hypot(pointerA.clientX - pointerB.clientX, pointerA.clientY - pointerB.clientY);
 }
 function scaleZoom(value, delta, factor = 100, clamp = 2) {
     return value * Math.min(1 + Math.abs(delta / factor), clamp) ** Math.sign(delta);
@@ -125,11 +126,11 @@ function scaleZoom(value, delta, factor = 100, clamp = 2) {
 function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapperRef) {
     const activePointers = React.useRef([]);
     const lastPointerDown = React.useRef(0);
-    const pinchZoomDistance = React.useRef(undefined);
+    const pinchZoom = React.useRef(undefined);
     const { globalIndex } = useLightboxState();
     const { getOwnerWindow } = useDocumentContext();
     const { containerRef, subscribeSensors } = useController();
-    const { keyboardMoveDistance, zoomInMultiplier, wheelZoomDistanceFactor, scrollToZoom, doubleTapDelay, doubleClickDelay, doubleClickMaxStops, pinchZoomDistanceFactor, } = useZoomProps();
+    const { keyboardMoveDistance, zoomInMultiplier, wheelZoomDistanceFactor, scrollToZoom, doubleTapDelay, doubleClickDelay, doubleClickMaxStops, pinchZoomDistanceFactor, pinchZoomV4, } = useZoomProps();
     const translateCoordinates = React.useCallback((event) => {
         if (containerRef.current) {
             const { pageX, pageY } = event;
@@ -229,23 +230,28 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
         }
         replacePointer(event);
         if (pointers.length === 2) {
-            pinchZoomDistance.current = distance(pointers[0], pointers[1]);
+            const initialDistance = distance(pointers[0], pointers[1]);
+            pinchZoom.current = {
+                previousDistance: initialDistance,
+                initialDistance: Math.max(initialDistance, 1),
+                initialZoom: zoom,
+            };
         }
     });
     const onPointerMove = useEventCallback((event) => {
         const pointers = activePointers.current;
         const activePointer = pointers.find((p) => p.pointerId === event.pointerId);
-        if (pointers.length === 2 && pinchZoomDistance.current) {
+        if (pointers.length === 2 && pinchZoom.current) {
             event.stopPropagation();
             replacePointer(event);
             const currentDistance = distance(pointers[0], pointers[1]);
-            const delta = currentDistance - pinchZoomDistance.current;
-            if (Math.abs(delta) > 0) {
-                changeZoom(scaleZoom(zoom, delta, pinchZoomDistanceFactor), true, ...pointers
-                    .map((x) => translateCoordinates(x))
-                    .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
-                pinchZoomDistance.current = currentDistance;
-            }
+            const targetZoom = pinchZoomV4
+                ? (pinchZoom.current.initialZoom / pinchZoom.current.initialDistance) * currentDistance
+                : scaleZoom(zoom, currentDistance - pinchZoom.current.previousDistance, pinchZoomDistanceFactor);
+            changeZoom(targetZoom, true, ...pointers
+                .map((x) => translateCoordinates(x))
+                .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
+            pinchZoom.current.previousDistance = currentDistance;
             return;
         }
         if (zoom > 1) {
@@ -261,7 +267,7 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
     const onPointerUp = React.useCallback((event) => {
         const pointers = activePointers.current;
         if (pointers.length === 2 && pointers.find((p) => p.pointerId === event.pointerId)) {
-            pinchZoomDistance.current = undefined;
+            pinchZoom.current = undefined;
         }
         clearPointer(event);
     }, [clearPointer]);
@@ -269,7 +275,7 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
         const pointers = activePointers.current;
         pointers.splice(0, pointers.length);
         lastPointerDown.current = 0;
-        pinchZoomDistance.current = undefined;
+        pinchZoom.current = undefined;
     }, []);
     usePointerEvents(subscribeSensors, onPointerDown, onPointerMove, onPointerUp, disabled);
     React.useEffect(cleanupSensors, [globalIndex, cleanupSensors]);
@@ -306,9 +312,7 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
         setOffsetY(Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY));
     }, [zoom, offsetX, offsetY, slideRect, imageRect.width, imageRect.height]);
     const changeZoom = React.useCallback((targetZoom, rapid, dx, dy) => {
-        const newZoom = round(Math.min(Math.max(targetZoom + 0.001 < maxZoom ? targetZoom : maxZoom, minZoom), maxZoom), 5);
-        if (newZoom === zoom)
-            return;
+        const newZoom = round(targetZoom + 0.01 < maxZoom ? (targetZoom - 0.01 > minZoom ? targetZoom : minZoom) : maxZoom, 5);
         if (!rapid) {
             animate();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.25.0",
+  "version": "3.27.0",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",
@@ -141,7 +141,7 @@
   "homepage": "https://yet-another-react-lightbox.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/igordanchenko/yet-another-react-lightbox.git"
+    "url": "git+https://github.com/igordanchenko/yet-another-react-lightbox.git"
   },
   "bugs": {
     "url": "https://github.com/igordanchenko/yet-another-react-lightbox/issues"
@@ -149,10 +149,6 @@
   "engines": {
     "node": ">=14"
   },
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
-  },
   "peerDependencies": {
     "@types/react": "^16 || ^17 || ^18 || ^19",
     "@types/react-dom": "^16 || ^17 || ^18 || ^19",