yet-another-react-lightbox 3.24.0 → 3.26.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

@@ -10,6 +10,8 @@ declare module "yet-another-react-lightbox" {
         zoom?: {
             /** Zoom plugin ref */
             ref?: React.ForwardedRef<ZoomRef>;
+            /** override minimum zoom level (default: 1.0) */
+            minZoom?: number;
             /** ratio of image pixels to physical pixels at maximum zoom level */
             maxZoomPixelRatio?: number;
             /** zoom-in multiplier */
@@ -70,6 +72,8 @@ declare module "yet-another-react-lightbox" {
     interface ZoomRef {
         /** current zoom level */
         zoom: number;
+        /** minimum zoom level */
+        minZoom: number;
         /** maximum zoom level */
         maxZoom: number;
         /** horizontal offset */

package/dist/plugins/zoom/index.js

@@ -3,6 +3,7 @@ import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffec
 import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, PLUGIN_ZOOM } from '../../types.js';
 
 const defaultZoomProps = {
+    minZoom: 1,
     maxZoomPixelRatio: 1,
     zoomInMultiplier: 2,
     doubleTapDelay: 300,
@@ -13,10 +14,13 @@ const defaultZoomProps = {
     pinchZoomDistanceFactor: 100,
     scrollToZoom: false,
 };
-const resolveZoomProps = (zoom) => ({
-    ...defaultZoomProps,
-    ...zoom,
-});
+function validateMinZoom(minZoom) {
+    return Math.min(Math.max(minZoom, Number.EPSILON), 1);
+}
+function resolveZoomProps(zoom) {
+    const { minZoom, ...rest } = { ...defaultZoomProps, ...zoom };
+    return { minZoom: validateMinZoom(minZoom), ...rest };
+}
 
 function useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef) {
     const zoomAnimation = React.useRef(undefined);
@@ -118,7 +122,7 @@ function distance(pointerA, pointerB) {
 function scaleZoom(value, delta, factor = 100, clamp = 2) {
     return value * Math.min(1 + Math.abs(delta / factor), clamp) ** Math.sign(delta);
 }
-function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapperRef) {
+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);
@@ -160,18 +164,17 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
                 move(keyboardMoveDistance, 0);
             }
         }
-        const handleChangeZoom = (zoomValue) => {
-            preventDefault();
-            changeZoom(zoomValue);
-        };
         if (key === "+" || (meta && key === "=")) {
-            handleChangeZoom(zoom * zoomInMultiplier);
+            preventDefault();
+            zoomIn();
         }
         else if (key === "-" || (meta && key === "_")) {
-            handleChangeZoom(zoom / zoomInMultiplier);
+            preventDefault();
+            zoomOut();
         }
         else if (meta && key === "0") {
-            handleChangeZoom(1);
+            preventDefault();
+            changeZoom(1);
         }
     });
     const onWheel = useEventCallback((event) => {
@@ -212,7 +215,14 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
         if (pointers.length === 0 &&
             timeStamp - lastPointerDown.current < (event.pointerType === "touch" ? doubleTapDelay : doubleClickDelay)) {
             lastPointerDown.current = 0;
-            changeZoom(zoom !== maxZoom ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier) : 1, false, ...translateCoordinates(event));
+            const targetZoom = zoom >= 1
+                ? zoom !== maxZoom
+                    ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier)
+                    : 1
+                : zoom !== minZoom
+                    ? zoom / Math.max(minZoom ** (-1 / doubleClickMaxStops), zoomInMultiplier)
+                    : 1;
+            changeZoom(targetZoom, false, ...translateCoordinates(event));
         }
         else {
             lastPointerDown.current = timeStamp;
@@ -278,7 +288,7 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
     const animate = useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef);
     const { currentSlide, globalIndex } = useLightboxState();
     const { containerRect, slideRect } = useController();
-    const { zoomInMultiplier } = useZoomProps();
+    const { minZoom, zoomInMultiplier } = useZoomProps();
     const currentSource = currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined;
     const disabled = !currentSource || !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
     useLayoutEffect(() => {
@@ -296,7 +306,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, 1), maxZoom), 5);
+        const newZoom = round(Math.min(Math.max(targetZoom + 0.001 < maxZoom ? targetZoom : maxZoom, minZoom), maxZoom), 5);
         if (newZoom === zoom)
             return;
         if (!rapid) {
@@ -304,7 +314,7 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
         }
         changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
         setZoom(newZoom);
-    }, [zoom, maxZoom, changeOffsets, animate]);
+    }, [zoom, minZoom, maxZoom, changeOffsets, animate]);
     const handleControllerRectChange = useEventCallback(() => {
         if (zoom > 1) {
             if (zoom > maxZoom) {
@@ -314,8 +324,14 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
         }
     });
     useLayoutEffect(handleControllerRectChange, [containerRect.width, containerRect.height, handleControllerRectChange]);
-    const zoomIn = React.useCallback(() => changeZoom(zoom * zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
-    const zoomOut = React.useCallback(() => changeZoom(zoom / zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
+    const zoomIn = React.useCallback(() => {
+        const targetZoom = zoom * zoomInMultiplier;
+        changeZoom(zoom < 1 && targetZoom > 1 ? 1 : targetZoom);
+    }, [zoom, zoomInMultiplier, changeZoom]);
+    const zoomOut = React.useCallback(() => {
+        const targetZoom = zoom / zoomInMultiplier;
+        changeZoom(zoom > 1 && targetZoom < 1 ? 1 : targetZoom);
+    }, [zoom, zoomInMultiplier, changeZoom]);
     return { zoom, offsetX, offsetY, disabled, changeOffsets, changeZoom, zoomIn, zoomOut };
 }
 
@@ -324,12 +340,13 @@ const useZoom = makeUseContext("useZoom", "ZoomControllerContext", ZoomControlle
 function ZoomContextProvider({ children }) {
     const [zoomWrapper, setZoomWrapper] = React.useState();
     const { slideRect } = useController();
+    const { ref, minZoom } = useZoomProps();
     const { imageRect, maxZoom } = useZoomImageRect(slideRect, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.imageDimensions);
     const { zoom, offsetX, offsetY, disabled, changeZoom, changeOffsets, zoomIn, zoomOut } = useZoomState(imageRect, maxZoom, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
     useZoomCallback(zoom, disabled);
-    useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
-    const zoomRef = React.useMemo(() => ({ zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom }), [zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom]);
-    React.useImperativeHandle(useZoomProps().ref, () => zoomRef, [zoomRef]);
+    useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
+    const zoomRef = React.useMemo(() => ({ zoom, minZoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom }), [zoom, minZoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom]);
+    React.useImperativeHandle(ref, () => zoomRef, [zoomRef]);
     const context = React.useMemo(() => ({ ...zoomRef, setZoomWrapper }), [zoomRef, setZoomWrapper]);
     return React.createElement(ZoomControllerContext.Provider, { value: context }, children);
 }
@@ -341,9 +358,9 @@ const ZoomOutIcon = createIcon("ZoomOut", React.createElement("path", { d: "M15.
 const ZoomButton = React.forwardRef(function ZoomButton({ zoomIn, onLoseFocus }, ref) {
     const wasEnabled = React.useRef(false);
     const wasFocused = React.useRef(false);
-    const { zoom, maxZoom, zoomIn: zoomInCallback, zoomOut: zoomOutCallback, disabled: zoomDisabled } = useZoom();
+    const { zoom, minZoom, maxZoom, zoomIn: zoomInCallback, zoomOut: zoomOutCallback, disabled: zoomDisabled, } = useZoom();
     const { render } = useLightboxProps();
-    const disabled = zoomDisabled || (zoomIn ? zoom >= maxZoom : zoom <= 1);
+    const disabled = zoomDisabled || (zoomIn ? zoom >= maxZoom : zoom <= minZoom);
     React.useEffect(() => {
         if (disabled && wasEnabled.current && wasFocused.current) {
             onLoseFocus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.24.0",
+  "version": "3.26.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",