react-photo-album - npm Package Compare versions

Comparing version 1.13.0 to 1.13.1

dist/index.cjs.js

@@ -601,6 +601,8 @@ 'use strict';
 const useContainerWidth = (resizeObserverProvider, breakpoints) => {
+    const [containerWidth, setContainerWidth] = react.useState();
     const observerRef = react.useRef();
     const breakpointsArray = useArray(breakpoints);
-    const resizeObserverProviderLatest = useLatest(resizeObserverProvider);
-    const [containerWidth, setContainerWidth] = react.useState();
+    const resizeObserverProviderRef = useLatest(resizeObserverProvider);
+    const containerWidthRef = useLatest(containerWidth);
+    const scrollbarWidthRef = react.useRef();
     const containerRef = react.useCallback((node) => {
@@ -620,2 +622,13 @@ var _a, _b;
             }
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            const previousScrollbarWidth = scrollbarWidthRef.current;
+            scrollbarWidthRef.current = scrollbarWidth;
+            if (containerWidthRef.current !== undefined &&
+                previousScrollbarWidth !== undefined &&
+                newWidth !== undefined &&
+                newWidth > containerWidthRef.current &&
+                newWidth - containerWidthRef.current <= 20 &&
+                scrollbarWidth < previousScrollbarWidth) {
+                return;
+            }
             setContainerWidth(newWidth);
@@ -628,6 +641,6 @@ };
                     ? new ResizeObserver(updateWidth)
-                    : (_a = resizeObserverProviderLatest.current) === null || _a === void 0 ? void 0 : _a.call(resizeObserverProviderLatest, updateWidth);
+                    : (_a = resizeObserverProviderRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeObserverProviderRef, updateWidth);
             (_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.observe(node);
         }
-    }, [breakpointsArray, resizeObserverProviderLatest]);
+    }, [breakpointsArray, resizeObserverProviderRef, containerWidthRef]);
     return react.useMemo(() => ({ containerRef, containerWidth }), [containerRef, containerWidth]);
@@ -634,0 +647,0 @@ };

dist/index.esm.js

@@ -597,6 +597,8 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 const useContainerWidth = (resizeObserverProvider, breakpoints) => {
+    const [containerWidth, setContainerWidth] = useState();
     const observerRef = useRef();
     const breakpointsArray = useArray(breakpoints);
-    const resizeObserverProviderLatest = useLatest(resizeObserverProvider);
-    const [containerWidth, setContainerWidth] = useState();
+    const resizeObserverProviderRef = useLatest(resizeObserverProvider);
+    const containerWidthRef = useLatest(containerWidth);
+    const scrollbarWidthRef = useRef();
     const containerRef = useCallback((node) => {
@@ -616,2 +618,13 @@ var _a, _b;
             }
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            const previousScrollbarWidth = scrollbarWidthRef.current;
+            scrollbarWidthRef.current = scrollbarWidth;
+            if (containerWidthRef.current !== undefined &&
+                previousScrollbarWidth !== undefined &&
+                newWidth !== undefined &&
+                newWidth > containerWidthRef.current &&
+                newWidth - containerWidthRef.current <= 20 &&
+                scrollbarWidth < previousScrollbarWidth) {
+                return;
+            }
             setContainerWidth(newWidth);
@@ -624,6 +637,6 @@ };
                     ? new ResizeObserver(updateWidth)
-                    : (_a = resizeObserverProviderLatest.current) === null || _a === void 0 ? void 0 : _a.call(resizeObserverProviderLatest, updateWidth);
+                    : (_a = resizeObserverProviderRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeObserverProviderRef, updateWidth);
             (_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.observe(node);
         }
-    }, [breakpointsArray, resizeObserverProviderLatest]);
+    }, [breakpointsArray, resizeObserverProviderRef, containerWidthRef]);
     return useMemo(() => ({ containerRef, containerWidth }), [containerRef, containerWidth]);
@@ -630,0 +643,0 @@ };

package.json

 {
     "name": "react-photo-album",
-    "version": "1.13.0",
+    "version": "1.13.1",
     "description": "Responsive photo gallery component for React",
@@ -41,4 +41,4 @@ "author": "Igor Danchenko",
     "devDependencies": {
-        "@commitlint/cli": "^16.2.3",
-        "@commitlint/config-conventional": "^16.2.1",
+        "@commitlint/cli": "^16.2.4",
+        "@commitlint/config-conventional": "^16.2.4",
         "@rollup/plugin-node-resolve": "^13.2.1",
@@ -49,3 +49,3 @@ "@semantic-release/changelog": "^6.0.1",
         "@types/jest": "^27.4.1",
-        "@types/react": "^18.0.7",
+        "@types/react": "^18.0.8",
         "@types/react-dom": "^18.0.0",
@@ -60,10 +60,10 @@ "@types/react-test-renderer": "^18.0.0",
         "eslint-plugin-react": "^7.29.4",
-        "eslint-plugin-react-hooks": "^4.4.0",
+        "eslint-plugin-react-hooks": "^4.5.0",
         "husky": "^7.0.4",
         "jest": "^27.5.1",
-        "lint-staged": "^12.4.0",
+        "lint-staged": "^12.4.1",
         "prettier": "^2.6.2",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0",
-        "react-test-renderer": "^18.0.0",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
+        "react-test-renderer": "^18.1.0",
         "rimraf": "^3.0.2",
@@ -70,0 +70,0 @@ "rollup": "^2.70.2",

No alert changes

Improved metrics

Total package byte prevSize

81709

increased by1.77%

Lines of code

1476

increased by1.79%

No dependency changes