@snack-uikit/carousel 0.2.14-preview-95fbee92.0 → 0.2.14-preview-a4b7f13c.0

package/dist/components/ItemProvider/ItemProvider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash.debounce';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TEST_IDS } from '../../testIds';
 import { getPageX } from './helpers';
-import { useWindowWidthChange } from './hooks';
 import styles from './styles.module.css';
 export function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, page, gap, }) {
     const containerRef = useRef(null);
@@ -10,8 +10,8 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         itemWidth: 200,
         gap: 0,
     });
-    const containerElement = containerRef.current;
-    useEffect(() => {
+    const recalculateItemsSize = useCallback(() => {
+        const containerElement = containerRef.current;
         if (!containerElement) {
             return;
         }
@@ -25,7 +25,17 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
             paddingRight) /
             showItems;
         setComputedValues({ itemWidth, gap });
-    }, [showItems, containerElement]);
+    }, [showItems]);
+    useEffect(() => {
+        const node = containerRef.current;
+        if (!node) {
+            return;
+        }
+        recalculateItemsSize();
+        const observer = new ResizeObserver(debounce(recalculateItemsSize, 100));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [recalculateItemsSize]);
     const itemsTrackerRef = useRef(null);
     function hideNonVisibleItems() {
         var _a;
@@ -56,9 +66,6 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         hideNonVisibleItems();
         showVisibleItems(scrollBy, page, showItems);
     }, [page, scrollBy, showItems]);
-    useWindowWidthChange((change) => {
-        setComputedValues(computedValues => (Object.assign(Object.assign({}, computedValues), { itemWidth: computedValues.itemWidth - change })));
-    });
     const [drag, setDrag] = useState({
         initial: transform,
         start: 0,

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.14-preview-95fbee92.0",
+  "version": "0.2.14-preview-a4b7f13c.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,7 +36,8 @@
     "@snack-uikit/pagination": "0.6.9",
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2",
+    "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "6cc00922d59ee9d6b574beb9c7009bb95c36331a"
+  "gitHead": "fbb9cb273b770568f1e0887bed83995b081b3351"
 }

package/src/components/ItemProvider/ItemProvider.tsx

@@ -1,8 +1,8 @@
-import { MouseEvent, ReactElement, TouchEvent, useEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash.debounce';
+import { MouseEvent, ReactElement, TouchEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { TEST_IDS } from '../../testIds';
 import { getPageX } from './helpers';
-import { useWindowWidthChange } from './hooks';
 import styles from './styles.module.scss';
 
 export type ItemProviderProps = {
@@ -33,9 +33,9 @@ export function ItemProvider({
     gap: 0,
   });
 
-  const containerElement = containerRef.current;
+  const recalculateItemsSize = useCallback(() => {
+    const containerElement = containerRef.current;
 
-  useEffect(() => {
     if (!containerElement) {
       return;
     }
@@ -53,7 +53,21 @@ export function ItemProvider({
         paddingRight) /
       showItems;
     setComputedValues({ itemWidth, gap });
-  }, [showItems, containerElement]);
+  }, [showItems]);
+
+  useEffect(() => {
+    const node = containerRef.current;
+
+    if (!node) {
+      return;
+    }
+
+    recalculateItemsSize();
+
+    const observer = new ResizeObserver(debounce(recalculateItemsSize, 100));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [recalculateItemsSize]);
 
   const itemsTrackerRef = useRef<HTMLDivElement>(null);
 
@@ -92,10 +106,6 @@ export function ItemProvider({
     showVisibleItems(scrollBy, page, showItems);
   }, [page, scrollBy, showItems]);
 
-  useWindowWidthChange((change: number) => {
-    setComputedValues(computedValues => ({ ...computedValues, itemWidth: computedValues.itemWidth - change }));
-  });
-
   const [drag, setDrag] = useState({
     initial: transform,
     start: 0,

package/dist/components/ItemProvider/hooks.d.ts

@@ -1 +0,0 @@
-export declare const useWindowWidthChange: (cb: (changed: number) => void) => void;

package/dist/components/ItemProvider/hooks.js

@@ -1,20 +0,0 @@
-import { useLayoutEffect, useState } from 'react';
-const getWindowWidth = () => {
-    if (typeof window === 'undefined') {
-        return 0;
-    }
-    return window.innerWidth;
-};
-export const useWindowWidthChange = (cb) => {
-    const [windowWidth, setWindowWidth] = useState(getWindowWidth());
-    useLayoutEffect(() => {
-        const update = () => {
-            const changed = windowWidth - window.innerWidth;
-            setWindowWidth(window.innerWidth);
-            cb(changed);
-        };
-        window.addEventListener('resize', update);
-        return () => window.removeEventListener('resize', update);
-    }, [cb, windowWidth]);
-    return;
-};

package/src/components/ItemProvider/hooks.ts

@@ -1,26 +0,0 @@
-import { useLayoutEffect, useState } from 'react';
-
-const getWindowWidth = () => {
-  if (typeof window === 'undefined') {
-    return 0;
-  }
-
-  return window.innerWidth;
-};
-
-export const useWindowWidthChange = (cb: (changed: number) => void) => {
-  const [windowWidth, setWindowWidth] = useState(getWindowWidth());
-
-  useLayoutEffect(() => {
-    const update = () => {
-      const changed = windowWidth - window.innerWidth;
-      setWindowWidth(window.innerWidth);
-      cb(changed);
-    };
-
-    window.addEventListener('resize', update);
-
-    return () => window.removeEventListener('resize', update);
-  }, [cb, windowWidth]);
-  return;
-};