yet-another-react-lightbox 1.11.0 → 1.11.1

package/dist/plugins/Zoom.js

@@ -173,11 +173,29 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
             offsetY: Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY),
         }));
     }, []);
+    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
+        const { current } = refs;
+        const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
+        if (!containerRef.current || !containerRect)
+            return;
+        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
+        if (newZoom === zoom)
+            return;
+        if (!rapid) {
+            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
+        }
+        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
+        setState((prev) => ({ ...prev, zoom: newZoom }));
+    }, [changeOffsets]);
     useLayoutEffect(() => {
         if (refs.current.state.zoom > 1) {
+            const { maxZoom, state: { zoom: currentZoom }, } = refs.current;
+            if (currentZoom > maxZoom) {
+                changeZoom(maxZoom, true);
+            }
             changeOffsets();
         }
-    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets]);
+    }, [currentControllerRect.width, currentControllerRect.height, changeOffsets, changeZoom]);
     useLayoutEffect(() => {
         var _a, _b;
         const { current } = refs;
@@ -227,20 +245,6 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
             }
         }
     }, [offset, state.zoom, currentMaxZoom, isMinZoom, isMaxZoom, setIsMinZoom, setIsMaxZoom]);
-    const changeZoom = React.useCallback((value, rapid, dx, dy) => {
-        const { current } = refs;
-        const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
-        if (!containerRef.current || !containerRect)
-            return;
-        const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
-        if (newZoom === zoom)
-            return;
-        if (!rapid) {
-            current.zoomAnimationStart = window.getComputedStyle(containerRef.current).transform;
-        }
-        changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
-        setState((prev) => ({ ...prev, zoom: newZoom }));
-    }, [changeOffsets]);
     const translateCoordinates = React.useCallback((event) => {
         const { controllerRef } = refs.current;
         if (controllerRef.current) {
@@ -253,9 +257,13 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
     }, []);
     const onKeyDown = React.useCallback((event) => {
         const { state: { zoom }, zoomProps: { keyboardMoveDistance, zoomInMultiplier }, } = refs.current;
+        const preventDefault = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
         if (zoom > 1) {
             const move = (deltaX, deltaY) => {
-                event.stopPropagation();
+                preventDefault();
                 changeOffsets(deltaX, deltaY);
             };
             if (event.key === "ArrowDown") {
@@ -271,14 +279,19 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
                 move(keyboardMoveDistance, 0);
             }
         }
-        if (event.key === "+" || (event.key === "=" && event.metaKey)) {
-            changeZoom(zoom * zoomInMultiplier);
+        const handleChangeZoom = (zoomValue) => {
+            preventDefault();
+            changeZoom(zoomValue);
+        };
+        const hasMeta = () => event.getModifierState("Meta") || event.getModifierState("OS");
+        if (event.key === "+" || (event.key === "=" && hasMeta())) {
+            handleChangeZoom(zoom * zoomInMultiplier);
         }
-        else if (event.key === "-" || (event.key === "_" && event.metaKey)) {
-            changeZoom(zoom / zoomInMultiplier);
+        else if (event.key === "-" || (event.key === "_" && hasMeta())) {
+            handleChangeZoom(zoom / zoomInMultiplier);
         }
-        else if (event.key === "0" && event.metaKey) {
-            changeZoom(1);
+        else if (event.key === "0" && hasMeta()) {
+            handleChangeZoom(1);
         }
     }, [changeZoom, changeOffsets]);
     const onWheel = React.useCallback((event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.11.0",
+    "version": "1.11.1",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -96,19 +96,19 @@
         "@semantic-release/github": "^8.0.5",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
-        "@testing-library/user-event": "^14.2.3",
-        "@types/jest": "^28.1.5",
+        "@testing-library/user-event": "^14.3.0",
+        "@types/jest": "^28.1.6",
         "@types/react": "^18.0.15",
         "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^5.30.6",
-        "@typescript-eslint/parser": "^5.30.6",
-        "autoprefixer": "^10.4.7",
-        "eslint": "^8.19.0",
+        "@typescript-eslint/eslint-plugin": "^5.31.0",
+        "@typescript-eslint/parser": "^5.31.0",
+        "autoprefixer": "^10.4.8",
+        "eslint": "^8.20.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsx-a11y": "^6.6.0",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -123,8 +123,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.53.0",
-        "ts-jest": "^28.0.6",
+        "sass": "^1.54.0",
+        "ts-jest": "^28.0.7",
         "typescript": "^4.7.4"
     },
     "keywords": [