@snack-uikit/carousel 0.4.0 → 0.4.2-preview-1becd961.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.4.1 (2024-10-31)
+
+### Only dependencies have been changed
+* [@snack-uikit/pagination@0.9.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/pagination/CHANGELOG.md)
+
+
+
+
+
 # 0.4.0 (2024-10-28)
 
 

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.0",
+  "version": "0.4.2-preview-1becd961.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,11 +37,11 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.24.0",
-    "@snack-uikit/pagination": "0.9.0",
+    "@snack-uikit/pagination": "0.9.1",
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
+  "gitHead": "09e245c9e38c2e661fc37bdb9bed5c13e23b4844"
 }

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}