@snack-uikit/carousel 0.6.14-preview-eff3bc02.0 → 0.6.14

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.14 (2026-08-07)
+
+
+### Bug Fixes
+
+* **PDS-3768:** carousel cards overflow from siblings pages fixed ([a46e4f3](https://github.com/cloud-ru-tech/snack-uikit/commit/a46e4f389f798b2a3b758eb45d3f04e8decc06a8))
+* **PDS-3768:** replaced deprecated lodash specific packages with a global latest lodash to resolve vulnerabilities ([260f60d](https://github.com/cloud-ru-tech/snack-uikit/commit/260f60ddb5e644d44787116e5034d8d8d723a8ac))
+
+
+
+
+
 ## 0.6.13 (2026-06-24)
 
 ### Only dependencies have been changed

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

@@ -20,12 +20,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ItemProvider = ItemProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const lodash_1 = require("lodash");
 const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const utils_1 = require("@snack-uikit/utils");
 const testIds_1 = require("../../testIds");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function parseCssLength(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
 function ItemProvider(_ref) {
   let items = _ref.items,
     showItems = _ref.showItems,
@@ -37,6 +41,7 @@ function ItemProvider(_ref) {
     page = _ref.page,
     gap = _ref.gap;
   const containerRef = (0, react_1.useRef)(null);
+  const itemsTrackerRef = (0, react_1.useRef)(null);
   const _ref2 = (0, react_1.useState)({
       itemWidth: 0,
       gap: 0
@@ -46,30 +51,33 @@ function ItemProvider(_ref) {
     setComputedValues = _ref3[1];
   const recalculateItemsSize = (0, react_1.useCallback)(() => {
     const containerElement = containerRef.current;
-    if (!containerElement) {
+    const trackerElement = itemsTrackerRef.current;
+    if (!containerElement || !trackerElement) {
       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 itemWidth = (containerElement.getBoundingClientRect().width - (Math.trunc(showItems) - 1) * gap - paddingLeft - paddingRight) / showItems;
+    const containerStyles = getComputedStyle(containerElement);
+    const trackerStyles = getComputedStyle(trackerElement);
+    const gapValue = gap ? parseCssLength(gap) : parseCssLength(trackerStyles.columnGap || trackerStyles.gap);
+    const paddingLeft = parseCssLength(containerStyles.paddingLeft);
+    const paddingRight = parseCssLength(containerStyles.paddingRight);
+    const gapsCount = Math.max(Math.trunc(showItems) - 1, 0);
+    const contentWidth = containerElement.getBoundingClientRect().width - paddingLeft - paddingRight;
+    const itemWidth = (contentWidth - gapsCount * gapValue) / showItems;
     setComputedValues({
       itemWidth,
-      gap
+      gap: gapValue
     });
-  }, [showItems]);
-  (0, react_1.useEffect)(() => {
+  }, [showItems, gap]);
+  (0, utils_1.useLayoutEffect)(() => {
     const node = containerRef.current;
     if (!node) {
       return;
     }
     recalculateItemsSize();
-    const observer = new ResizeObserver((0, lodash_debounce_1.default)(recalculateItemsSize, 100));
+    const observer = new ResizeObserver((0, lodash_1.debounce)(recalculateItemsSize, 100));
     observer.observe(node);
     return () => observer.disconnect();
   }, [recalculateItemsSize]);
-  const itemsTrackerRef = (0, react_1.useRef)(null);
   const hideNonVisibleItems = () => {
     var _a;
     (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-test-id=".concat(testIds_1.TEST_IDS.trackItem, "]")).forEach(slide => {

package/dist/cjs/components/ItemProvider/styles.module.css

@@ -1,12 +1,9 @@
 .itemProvider{
   --gap:var(--dimension-2m, 16px);
-  padding-top:var(--space-carousel-content-layout-padding, 4px);
-  padding-bottom:var(--space-carousel-content-layout-padding, 4px);
-  padding-left:var(--space-carousel-content-layout-padding, 4px);
-  padding-right:var(--space-carousel-content-layout-padding, 4px);
   overflow-x:hidden;
   width:100%;
-  margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+  margin-block:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+  padding-block:var(--space-carousel-content-layout-padding, 4px);
 }
 .itemProvider[data-swipe]{
   cursor:grab;
@@ -22,6 +19,7 @@
 .itemContainer{
   flex-shrink:0;
   box-sizing:border-box;
+  padding:var(--border-width-card-container, 1px);
 }
 
 .itemTracker{

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

@@ -10,35 +10,40 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import debounce from 'lodash.debounce';
+import { debounce } from 'lodash';
 import mergeRefs from 'merge-refs';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useSwipeable } from '@snack-uikit/utils';
+import { useLayoutEffect, useSwipeable } from '@snack-uikit/utils';
 import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
+function parseCssLength(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
 export function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }) {
     const containerRef = useRef(null);
+    const itemsTrackerRef = useRef(null);
     const [computedValues, setComputedValues] = useState({
         itemWidth: 0,
         gap: 0,
     });
     const recalculateItemsSize = useCallback(() => {
         const containerElement = containerRef.current;
-        if (!containerElement) {
+        const trackerElement = itemsTrackerRef.current;
+        if (!containerElement || !trackerElement) {
             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 itemWidth = (containerElement.getBoundingClientRect().width -
-            (Math.trunc(showItems) - 1) * gap -
-            paddingLeft -
-            paddingRight) /
-            showItems;
-        setComputedValues({ itemWidth, gap });
-    }, [showItems]);
-    useEffect(() => {
+        const containerStyles = getComputedStyle(containerElement);
+        const trackerStyles = getComputedStyle(trackerElement);
+        const gapValue = gap ? parseCssLength(gap) : parseCssLength(trackerStyles.columnGap || trackerStyles.gap);
+        const paddingLeft = parseCssLength(containerStyles.paddingLeft);
+        const paddingRight = parseCssLength(containerStyles.paddingRight);
+        const gapsCount = Math.max(Math.trunc(showItems) - 1, 0);
+        const contentWidth = containerElement.getBoundingClientRect().width - paddingLeft - paddingRight;
+        const itemWidth = (contentWidth - gapsCount * gapValue) / showItems;
+        setComputedValues({ itemWidth, gap: gapValue });
+    }, [showItems, gap]);
+    useLayoutEffect(() => {
         const node = containerRef.current;
         if (!node) {
             return;
@@ -48,7 +53,6 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         observer.observe(node);
         return () => observer.disconnect();
     }, [recalculateItemsSize]);
-    const itemsTrackerRef = useRef(null);
     const hideNonVisibleItems = () => {
         var _a;
         (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(slide => {

package/dist/esm/components/ItemProvider/styles.module.css

@@ -1,12 +1,9 @@
 .itemProvider{
   --gap:var(--dimension-2m, 16px);
-  padding-top:var(--space-carousel-content-layout-padding, 4px);
-  padding-bottom:var(--space-carousel-content-layout-padding, 4px);
-  padding-left:var(--space-carousel-content-layout-padding, 4px);
-  padding-right:var(--space-carousel-content-layout-padding, 4px);
   overflow-x:hidden;
   width:100%;
-  margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+  margin-block:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+  padding-block:var(--space-carousel-content-layout-padding, 4px);
 }
 .itemProvider[data-swipe]{
   cursor:grab;
@@ -22,6 +19,7 @@
 .itemContainer{
   flex-shrink:0;
   box-sizing:border-box;
+  padding:var(--border-width-card-container, 1px);
 }
 
 .itemTracker{

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.14-preview-eff3bc02.0",
+  "version": "0.6.14",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,13 +36,13 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.27.8-preview-eff3bc02.0",
-    "@snack-uikit/pagination": "0.10.27-preview-eff3bc02.0",
+    "@snack-uikit/icons": "0.27.8",
+    "@snack-uikit/pagination": "0.10.27",
     "@snack-uikit/utils": "4.0.2",
     "classnames": "2.5.1",
-    "lodash.debounce": "4.0.8",
+    "lodash": "4.18.1",
     "merge-refs": "1.3.0",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "2ada20a05882c3ba2fa0e5a6ef967b504cfa6c31"
+  "gitHead": "9e6abdd71a846caf1f1252b9504560a3b796942f"
 }

package/src/components/ItemProvider/ItemProvider.tsx

@@ -1,8 +1,8 @@
-import debounce from 'lodash.debounce';
+import { debounce } from 'lodash';
 import mergeRefs from 'merge-refs';
 import { MouseEventHandler, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { SwipeCallback, useSwipeable } from '@snack-uikit/utils';
+import { SwipeCallback, useLayoutEffect, useSwipeable } from '@snack-uikit/utils';
 
 import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.scss';
@@ -19,6 +19,12 @@ export type ItemProviderProps = {
   gap?: string;
 };
 
+function parseCssLength(value: string): number {
+  const parsed = Number.parseFloat(value);
+
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
 export function ItemProvider({
   items,
   showItems,
@@ -31,6 +37,7 @@ export function ItemProvider({
   gap,
 }: ItemProviderProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const itemsTrackerRef = useRef<HTMLDivElement>(null);
 
   const [computedValues, setComputedValues] = useState({
     itemWidth: 0,
@@ -39,27 +46,27 @@ export function ItemProvider({
 
   const recalculateItemsSize = useCallback(() => {
     const containerElement = containerRef.current;
+    const trackerElement = itemsTrackerRef.current;
 
-    if (!containerElement) {
+    if (!containerElement || !trackerElement) {
       return;
     }
 
-    const styles = getComputedStyle(containerElement);
+    const containerStyles = getComputedStyle(containerElement);
+    const trackerStyles = getComputedStyle(trackerElement);
 
-    const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
-    const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
-    const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
+    const gapValue = gap ? parseCssLength(gap) : parseCssLength(trackerStyles.columnGap || trackerStyles.gap);
+    const paddingLeft = parseCssLength(containerStyles.paddingLeft);
+    const paddingRight = parseCssLength(containerStyles.paddingRight);
 
-    const itemWidth =
-      (containerElement.getBoundingClientRect().width -
-        (Math.trunc(showItems) - 1) * gap -
-        paddingLeft -
-        paddingRight) /
-      showItems;
-    setComputedValues({ itemWidth, gap });
-  }, [showItems]);
+    const gapsCount = Math.max(Math.trunc(showItems) - 1, 0);
+    const contentWidth = containerElement.getBoundingClientRect().width - paddingLeft - paddingRight;
+    const itemWidth = (contentWidth - gapsCount * gapValue) / showItems;
 
-  useEffect(() => {
+    setComputedValues({ itemWidth, gap: gapValue });
+  }, [showItems, gap]);
+
+  useLayoutEffect(() => {
     const node = containerRef.current;
 
     if (!node) {
@@ -73,8 +80,6 @@ export function ItemProvider({
     return () => observer.disconnect();
   }, [recalculateItemsSize]);
 
-  const itemsTrackerRef = useRef<HTMLDivElement>(null);
-
   const hideNonVisibleItems = () => {
     itemsTrackerRef.current?.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(slide => {
       slide.setAttribute('aria-hidden', '0');

package/src/components/ItemProvider/styles.module.scss

@@ -3,11 +3,14 @@
 .itemProvider {
   --gap: #{styles-tokens-carousel.$dimension-2m};
 
-  @include styles-tokens-carousel.composite-var(styles-tokens-carousel.$carousel-content-layout);
-
   overflow-x: hidden;
   width: 100%;
-  margin: calc(0px - styles-tokens-carousel.$space-carousel-content-layout-padding);
+  margin-block: calc(0px - #{styles-tokens-carousel.$space-carousel-content-layout-padding});
+
+  // Only block padding: inline padding created a gutter where the next item
+  // (and its outline) painted through when gap < padding. Card outline is
+  // contained by .itemContainer padding instead.
+  padding-block: styles-tokens-carousel.$space-carousel-content-layout-padding;
 
   &[data-swipe] {
     cursor: grab;
@@ -24,6 +27,9 @@
 .itemContainer {
   flex-shrink: 0;
   box-sizing: border-box;
+  // Reserve space inside the slide for card outline/border so it is not clipped
+  // by overflow and does not paint into a shared gutter with the next slide.
+  padding: styles-tokens-carousel.$border-width-card-container;
 }
 
 .itemTracker {