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

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.2.13 (2024-06-11)
+
+### Only dependencies have been changed
+* [@snack-uikit/pagination@0.6.9](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/pagination/CHANGELOG.md)
+
+
+
+
+
 ## 0.2.12 (2024-05-08)
 
 ### Only dependencies have been changed

package/dist/components/ItemProvider/ItemProvider.js

@@ -1,27 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { 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);
     const [computedValues, setComputedValues] = useState({
         itemWidth: 200,
         gap: 0,
     });
-    const ref = useCallback((node) => {
-        if (node !== null) {
-            const styles = getComputedStyle(node);
-            const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
-            const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
-            const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
-            const itemWidth = (node.getBoundingClientRect().width - (Math.trunc(showItems) - 1) * gap - paddingLeft - paddingRight) /
-                showItems;
-            setComputedValues({ itemWidth, gap });
+    const containerElement = containerRef.current;
+    useEffect(() => {
+        if (!containerElement) {
+            return;
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [computedValues.itemWidth, showItems]);
+        const styles = getComputedStyle(containerElement);
+        const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
+        const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
+        const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
+        const itemWidth = (containerElement.getBoundingClientRect().width -
+            (Math.trunc(showItems) - 1) * gap -
+            paddingLeft -
+            paddingRight) /
+            showItems;
+        setComputedValues({ itemWidth, gap });
+    }, [showItems, containerElement]);
     const itemsTrackerRef = useRef(null);
     function hideNonVisibleItems() {
         var _a;
@@ -106,7 +110,7 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
             onMouseMove: handleDragMove,
         }
         : {};
-    return (_jsx("div", { ref: ref, className: styles.itemProvider, "data-pointers": !drag.pointers || undefined, "data-swipe": swipe || undefined, style: Object.assign({}, (Boolean(gap) ? { '--gap': gap } : {})), children: _jsx("div", Object.assign({}, swipeProps, { className: styles.itemTracker, "data-test-id": TEST_IDS.trackLine, style: {
+    return (_jsx("div", { ref: containerRef, className: styles.itemProvider, "data-pointers": !drag.pointers || undefined, "data-swipe": swipe || undefined, style: Object.assign({}, (Boolean(gap) ? { '--gap': gap } : {})), children: _jsx("div", Object.assign({}, swipeProps, { className: styles.itemTracker, "data-test-id": TEST_IDS.trackLine, style: {
                 transform: `translateX(${transform - drag.drag}px)`,
                 transition: `transform ${transition}s ease 0s`,
             }, ref: itemsTrackerRef, children: items.map((item, i) => (_jsx("div", { style: { width: computedValues.itemWidth }, className: styles.itemContainer, role: 'group', "data-test-id": TEST_IDS.trackItem, children: item }, i))) })) }));

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.12",
+  "version": "0.2.14-preview-95fbee92.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,10 +33,10 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.21.0",
-    "@snack-uikit/pagination": "0.6.8",
+    "@snack-uikit/pagination": "0.6.9",
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "59bd2ac46a341357d543ada864a34e09745b3e42"
+  "gitHead": "6cc00922d59ee9d6b574beb9c7009bb95c36331a"
 }

package/src/components/ItemProvider/ItemProvider.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactElement, TouchEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { MouseEvent, ReactElement, TouchEvent, useEffect, useMemo, useRef, useState } from 'react';
 
 import { TEST_IDS } from '../../testIds';
 import { getPageX } from './helpers';
@@ -26,29 +26,34 @@ export function ItemProvider({
   page,
   gap,
 }: ItemProviderProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const [computedValues, setComputedValues] = useState({
     itemWidth: 200,
     gap: 0,
   });
 
-  const ref = useCallback(
-    (node: HTMLDivElement) => {
-      if (node !== null) {
-        const styles = getComputedStyle(node);
+  const containerElement = containerRef.current;
+
+  useEffect(() => {
+    if (!containerElement) {
+      return;
+    }
+
+    const styles = getComputedStyle(containerElement);
 
-        const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
-        const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
-        const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
+    const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
+    const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
+    const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
 
-        const itemWidth =
-          (node.getBoundingClientRect().width - (Math.trunc(showItems) - 1) * gap - paddingLeft - paddingRight) /
-          showItems;
-        setComputedValues({ itemWidth, gap });
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [computedValues.itemWidth, showItems],
-  );
+    const itemWidth =
+      (containerElement.getBoundingClientRect().width -
+        (Math.trunc(showItems) - 1) * gap -
+        paddingLeft -
+        paddingRight) /
+      showItems;
+    setComputedValues({ itemWidth, gap });
+  }, [showItems, containerElement]);
 
   const itemsTrackerRef = useRef<HTMLDivElement>(null);
 
@@ -163,7 +168,7 @@ export function ItemProvider({
 
   return (
     <div
-      ref={ref}
+      ref={containerRef}
       className={styles.itemProvider}
       data-pointers={!drag.pointers || undefined}
       data-swipe={swipe || undefined}