@snack-uikit/carousel 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.4.2 (2024-11-06)
+
+
+### Bug Fixes
+
+* **PDS-1011:** carousel item width calculation fixed ([0975a99](https://github.com/cloud-ru-tech/snack-uikit/commit/0975a99b76286a9f8adf528a0aa283cfccd0d1fc))
+
+
+
+
+
 ## 0.4.1 (2024-10-31)
 
 ### Only dependencies have been changed

package/dist/cjs/components/ItemProvider/ItemProvider.js

@@ -29,7 +29,7 @@ function ItemProvider(_ref) {
   } = _ref;
   const containerRef = (0, react_1.useRef)(null);
   const [computedValues, setComputedValues] = (0, react_1.useState)({
-    itemWidth: 200,
+    itemWidth: 0,
     gap: 0
   });
   const recalculateItemsSize = (0, react_1.useCallback)(() => {
@@ -158,6 +158,13 @@ function ItemProvider(_ref) {
       slideCallback(slidePositionDelta);
     }
   }, [slideCallback]);
+  const itemWidth = (0, react_1.useMemo)(() => {
+    if (computedValues.itemWidth > 0) {
+      return computedValues.itemWidth;
+    }
+    const fallbackWidth = Math.floor(100 / showItems);
+    return `${fallbackWidth}%`;
+  }, [computedValues.itemWidth, showItems]);
   return (0, jsx_runtime_1.jsx)("div", {
     ref: containerRef,
     className: styles_module_scss_1.default.itemProvider,
@@ -179,7 +186,7 @@ function ItemProvider(_ref) {
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       (0, jsx_runtime_1.jsx)("div", {
         style: {
-          width: computedValues.itemWidth
+          width: itemWidth
         },
         className: styles_module_scss_1.default.itemContainer,
         role: 'group',

package/dist/esm/components/ItemProvider/ItemProvider.js

@@ -7,7 +7,7 @@ import styles from './styles.module.css';
 export function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }) {
     const containerRef = useRef(null);
     const [computedValues, setComputedValues] = useState({
-        itemWidth: 200,
+        itemWidth: 0,
         gap: 0,
     });
     const recalculateItemsSize = useCallback(() => {
@@ -126,10 +126,17 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
             slideCallback(slidePositionDelta);
         }
     }, [slideCallback]);
+    const itemWidth = useMemo(() => {
+        if (computedValues.itemWidth > 0) {
+            return computedValues.itemWidth;
+        }
+        const fallbackWidth = Math.floor(100 / showItems);
+        return `${fallbackWidth}%`;
+    }, [computedValues.itemWidth, showItems]);
     return (_jsx("div", { ref: containerRef, className: styles.itemProvider, "data-pointers": !drag.pointers || undefined, "data-swipe": swipe || undefined, "data-gap": gap, 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) => (
             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-            _jsx("div", { style: { width: computedValues.itemWidth }, className: styles.itemContainer, role: 'group', "data-test-id": TEST_IDS.trackItem, onClick: handleSlideClick, children: item }, i))) })) }));
+            _jsx("div", { style: { width: itemWidth }, className: styles.itemContainer, role: 'group', "data-test-id": TEST_IDS.trackItem, onClick: handleSlideClick, children: item }, i))) })) }));
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.1",
+  "version": "0.4.2",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -43,5 +43,5 @@
     "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
+  "gitHead": "5de970443105960cc6e30c5605d7f3deac3f064e"
 }

package/src/components/ItemProvider/ItemProvider.tsx

@@ -41,7 +41,7 @@ export function ItemProvider({
   const containerRef = useRef<HTMLDivElement>(null);
 
   const [computedValues, setComputedValues] = useState({
-    itemWidth: 200,
+    itemWidth: 0,
     gap: 0,
   });
 
@@ -203,6 +203,15 @@ export function ItemProvider({
     [slideCallback],
   );
 
+  const itemWidth = useMemo(() => {
+    if (computedValues.itemWidth > 0) {
+      return computedValues.itemWidth;
+    }
+
+    const fallbackWidth = Math.floor(100 / showItems);
+    return `${fallbackWidth}%`;
+  }, [computedValues.itemWidth, showItems]);
+
   return (
     <div
       ref={containerRef}
@@ -228,7 +237,7 @@ export function ItemProvider({
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
           <div
             key={i}
-            style={{ width: computedValues.itemWidth }}
+            style={{ width: itemWidth }}
             className={styles.itemContainer}
             role='group'
             data-test-id={TEST_IDS.trackItem}