@cloud-ru/uikit-product-mobile-carousel 0.1.12 → 0.1.14

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.1.14 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-utils@7.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+## 0.1.13 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.1.12 (2025-11-12)
 
 ### Only dependencies have been changed

package/dist/cjs/components/AdaptiveCarousel/AdaptiveCarousel.d.ts

@@ -0,0 +1,5 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { CarouselProps } from '@snack-uikit/carousel';
+export type AdaptiveCarouselProps = WithLayoutType<CarouselProps>;
+export declare function AdaptiveCarousel({ layoutType, ...props }: AdaptiveCarouselProps): import("react/jsx-runtime").JSX.Element;
+export type { CarouselProps };

package/dist/cjs/components/AdaptiveCarousel/AdaptiveCarousel.js

@@ -0,0 +1,22 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptiveCarousel = AdaptiveCarousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const carousel_1 = require("@snack-uikit/carousel");
+const MobileCarousel_1 = require("../MobileCarousel");
+function AdaptiveCarousel(_a) {
+    var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? (0, jsx_runtime_1.jsx)(MobileCarousel_1.MobileCarousel, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(carousel_1.Carousel, Object.assign({}, props));
+}

package/dist/cjs/components/AdaptiveCarousel/index.d.ts

@@ -0,0 +1 @@
+export * from './AdaptiveCarousel';

package/dist/cjs/components/AdaptiveCarousel/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AdaptiveCarousel"), exports);

package/dist/cjs/components/MobileCarousel/MobileCarousel.d.ts

@@ -0,0 +1,3 @@
+import { CarouselProps } from '@snack-uikit/carousel';
+export type MobileCarouselProps = Omit<CarouselProps, 'transition' | 'swipe' | 'swipeActivateLength' | 'arrows' | 'state'>;
+export declare function MobileCarousel({ children: items, showItems, scrollBy: scrollByProp, className, gap, pagination, infiniteScroll, autoSwipe, ...rest }: MobileCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MobileCarousel/MobileCarousel.js

@@ -0,0 +1,38 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileCarousel = MobileCarousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const pagination_1 = require("@snack-uikit/pagination");
+const testIds_1 = require("../../testIds");
+const components_1 = require("./components");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const noop = () => { };
+function MobileCarousel(_a) {
+    var { children: items, showItems = 1.1, scrollBy: scrollByProp, className, gap, pagination, infiniteScroll = false, autoSwipe } = _a, rest = __rest(_a, ["children", "showItems", "scrollBy", "className", "gap", "pagination", "infiniteScroll", "autoSwipe"]);
+    const scrollBy = (0, react_1.useMemo)(() => scrollByProp !== null && scrollByProp !== void 0 ? scrollByProp : Math.trunc(showItems), [showItems, scrollByProp]);
+    const [page, setPage] = (0, react_1.useState)(0);
+    const total = (0, react_1.useMemo)(() => {
+        if (items.length <= showItems) {
+            return 1;
+        }
+        return 1 + Math.ceil((items.length - showItems) / scrollBy);
+    }, [items.length, scrollBy, showItems]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.carousel, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.carouselBase, children: (0, jsx_runtime_1.jsx)(components_1.ItemList, { showItems: showItems, scrollBy: scrollBy, items: items, gap: gap, autoSwipe: autoSwipe, infiniteScroll: infiniteScroll, totalPages: total, onPageChange: setPage }) }), pagination && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.pagination, children: (0, jsx_runtime_1.jsx)(pagination_1.PaginationSlider, { "data-test-id": testIds_1.TEST_IDS.pagination, page: page + 1, onChange: noop, total: total }) }))] })));
+}

package/dist/cjs/components/MobileCarousel/components/ItemList/ItemList.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+export type ItemProviderProps = {
+    items: ReactElement[];
+    showItems: number;
+    scrollBy: number;
+    gap?: string;
+    autoSwipe?: number;
+    infiniteScroll?: boolean;
+    totalPages: number;
+    onPageChange(page: number): void;
+};
+export declare function ItemList({ items, showItems, scrollBy, gap, autoSwipe, infiniteScroll, totalPages, onPageChange, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MobileCarousel/components/ItemList/ItemList.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemList = ItemList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const react_1 = require("react");
+const testIds_1 = require("../../../../testIds");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const DELTA = 5;
+function ItemList({ items, showItems, scrollBy, gap, autoSwipe, infiniteScroll, totalPages, onPageChange, }) {
+    const timerRef = (0, react_1.useRef)();
+    const containerRef = (0, react_1.useRef)(null);
+    const [scrollLeft, setScrollLeft] = (0, react_1.useState)(0);
+    const [computedValues, setComputedValues] = (0, react_1.useState)({ itemWidth: 0, gap: 0 });
+    const [canDoInfiniteScroll, setCanDoInfiniteScroll] = (0, react_1.useState)(true);
+    const recalculateItemsSize = (0, react_1.useCallback)(() => {
+        const containerElement = containerRef.current;
+        if (!containerElement) {
+            return;
+        }
+        const styles = getComputedStyle(containerElement);
+        const gap = Number.parseFloat(styles.getPropertyValue('--mobile-carousel--list-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]);
+    (0, react_1.useEffect)(() => {
+        const node = containerRef.current;
+        if (!node) {
+            return;
+        }
+        recalculateItemsSize();
+        const observer = new ResizeObserver((0, lodash_debounce_1.default)(recalculateItemsSize, 100));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [recalculateItemsSize]);
+    const itemWidth = (0, react_1.useMemo)(() => {
+        if (computedValues.itemWidth > 0) {
+            return computedValues.itemWidth;
+        }
+        const fallbackWidth = Math.floor(100 / showItems);
+        return `${fallbackWidth}%`;
+    }, [computedValues.itemWidth, showItems]);
+    (0, react_1.useEffect)(() => {
+        if (!autoSwipe) {
+            return;
+        }
+        const handleAutoSwipe = () => {
+            const deltaWidth = computedValues.itemWidth * scrollBy;
+            if (containerRef.current) {
+                const newLeft = containerRef.current.scrollLeft + deltaWidth;
+                containerRef.current.scrollTo({
+                    left: newLeft > containerRef.current.scrollWidth - deltaWidth ? 0 : newLeft,
+                    behavior: 'smooth',
+                });
+            }
+        };
+        timerRef.current = setInterval(() => handleAutoSwipe(), autoSwipe * 1000);
+        return () => clearInterval(timerRef.current);
+    }, [autoSwipe, computedValues.itemWidth, scrollBy, scrollLeft]);
+    /**
+     * Устанавливает номер текущей страницы.
+     * Текущей страницей считается та, над которой располагается центр контейнера.
+     * Странице принадлежит ее правый гап, если по центру контейнера он, то текущей страницей считается та что слева от этого gap-а
+     */
+    const setCurrentPage = event => {
+        var _a, _b;
+        const scrollLeft = event.currentTarget.scrollLeft;
+        setScrollLeft(scrollLeft);
+        const pageWith = scrollBy > 1
+            ? computedValues.itemWidth * scrollBy + computedValues.gap * (scrollBy - 1) // scrollBy=3 [item + gap + item + gap + item]
+            : computedValues.itemWidth; // scrollBy=1 [item]
+        const centerOfScrollContainer = scrollLeft + ((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) / 2;
+        for (let i = 0; i < totalPages; i++) {
+            const pageStart = i * pageWith;
+            const pageEnd = pageStart + pageWith + computedValues.gap;
+            if (centerOfScrollContainer >= pageStart && centerOfScrollContainer <= pageEnd) {
+                onPageChange(Math.max(0, Math.min(totalPages - 1, i)));
+                return;
+            }
+        }
+    };
+    const isScrolledLeft = () => Boolean(containerRef.current && containerRef.current.scrollLeft <= DELTA);
+    const isScrolledRight = () => Boolean(containerRef.current &&
+        containerRef.current.scrollWidth - containerRef.current.scrollLeft - containerRef.current.offsetWidth <= DELTA);
+    const handleTouchStart = () => {
+        setCanDoInfiniteScroll(isScrolledLeft() || isScrolledRight());
+    };
+    const handleTouchEnd = () => {
+        const scrollArea = containerRef.current;
+        if (!canDoInfiniteScroll || !infiniteScroll || !scrollArea) {
+            return;
+        }
+        if (isScrolledLeft()) {
+            scrollArea.scrollTo({ left: scrollArea.scrollWidth, behavior: 'smooth' });
+        }
+        else if (isScrolledRight()) {
+            scrollArea.scrollTo({ left: 0, behavior: 'smooth' });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: styles_module_scss_1.default.itemList, "data-gap": gap, style: Object.assign({}, (gap ? { '--mobile-carousel--list-gap': gap } : {})), onScroll: setCurrentPage, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: items.map((item, i) => ((0, jsx_runtime_1.jsx)("div", { style: { width: itemWidth }, className: styles_module_scss_1.default.itemContainer, role: 'group', "data-test-id": testIds_1.TEST_IDS.trackItem, children: item }, i))) }));
+}

package/dist/cjs/components/MobileCarousel/components/ItemList/index.d.ts

@@ -0,0 +1 @@
+export * from './ItemList';

package/dist/cjs/components/MobileCarousel/components/ItemList/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ItemList"), exports);

package/dist/cjs/components/MobileCarousel/components/ItemList/styles.module.css

@@ -0,0 +1,27 @@
+.itemList{
+  --mobile-carousel--list-gap:var(--dimension-2m, 16px);
+  scrollbar-width:none;
+  scroll-snap-type:x mandatory;
+  scroll-snap-stop:always;
+  overflow-x:scroll;
+  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);
+  width:100%;
+  height:100%;
+  display:flex;
+  flex:none;
+  flex-flow:row nowrap;
+  gap:var(--mobile-carousel--list-gap, var(--dimension-2m, 16px));
+}
+.itemList ::-webkit-scrollbar{
+  display:none;
+}
+
+.itemContainer{
+  scroll-snap-align:start;
+  flex:none;
+  width:calc(100% - 1px);
+  margin:1px;
+}

package/dist/cjs/components/MobileCarousel/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ItemList';

package/dist/cjs/components/MobileCarousel/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ItemList"), exports);

package/dist/cjs/components/MobileCarousel/index.d.ts

@@ -0,0 +1 @@
+export * from './MobileCarousel';

package/dist/cjs/components/MobileCarousel/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MobileCarousel"), exports);

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

@@ -0,0 +1,21 @@
+.carouselBase{
+  position:relative;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+  outline:none;
+}
+
+.carousel{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  box-sizing:border-box;
+}
+
+.pagination{
+  padding-top:var(--space-carousel-sliders-wrap-padding-top, 8px);
+  display:flex;
+  justify-content:center;
+  box-sizing:border-box;
+}

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AdaptiveCarousel';
+export * from './MobileCarousel';

package/dist/cjs/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AdaptiveCarousel"), exports);
+__exportStar(require("./MobileCarousel"), exports);

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/cjs/testIds.d.ts

@@ -0,0 +1,7 @@
+export declare const TEST_IDS: {
+    arrowNext: string;
+    arrowPrev: string;
+    pagination: string;
+    trackLine: string;
+    trackItem: string;
+};

package/dist/cjs/testIds.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = void 0;
+exports.TEST_IDS = {
+    arrowNext: 'carousel__arrow-next',
+    arrowPrev: 'carousel__arrow-prev',
+    pagination: 'carousel__pagination',
+    trackLine: 'carousel__track-line',
+    trackItem: 'carousel__track-item',
+};

package/dist/esm/components/AdaptiveCarousel/AdaptiveCarousel.d.ts

@@ -0,0 +1,5 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { CarouselProps } from '@snack-uikit/carousel';
+export type AdaptiveCarouselProps = WithLayoutType<CarouselProps>;
+export declare function AdaptiveCarousel({ layoutType, ...props }: AdaptiveCarouselProps): import("react/jsx-runtime").JSX.Element;
+export type { CarouselProps };

package/dist/esm/components/AdaptiveCarousel/AdaptiveCarousel.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Carousel } from '@snack-uikit/carousel';
+import { MobileCarousel } from '../MobileCarousel';
+export function AdaptiveCarousel(_a) {
+    var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? _jsx(MobileCarousel, Object.assign({}, props)) : _jsx(Carousel, Object.assign({}, props));
+}

package/dist/esm/components/AdaptiveCarousel/index.d.ts

@@ -0,0 +1 @@
+export * from './AdaptiveCarousel';

package/dist/esm/components/AdaptiveCarousel/index.js

@@ -0,0 +1 @@
+export * from './AdaptiveCarousel';

package/dist/esm/components/MobileCarousel/MobileCarousel.d.ts

@@ -0,0 +1,3 @@
+import { CarouselProps } from '@snack-uikit/carousel';
+export type MobileCarouselProps = Omit<CarouselProps, 'transition' | 'swipe' | 'swipeActivateLength' | 'arrows' | 'state'>;
+export declare function MobileCarousel({ children: items, showItems, scrollBy: scrollByProp, className, gap, pagination, infiniteScroll, autoSwipe, ...rest }: MobileCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MobileCarousel/MobileCarousel.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useMemo, useState } from 'react';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { PaginationSlider } from '@snack-uikit/pagination';
+import { TEST_IDS } from '../../testIds';
+import { ItemList } from './components';
+import styles from './styles.module.css';
+const noop = () => { };
+export function MobileCarousel(_a) {
+    var { children: items, showItems = 1.1, scrollBy: scrollByProp, className, gap, pagination, infiniteScroll = false, autoSwipe } = _a, rest = __rest(_a, ["children", "showItems", "scrollBy", "className", "gap", "pagination", "infiniteScroll", "autoSwipe"]);
+    const scrollBy = useMemo(() => scrollByProp !== null && scrollByProp !== void 0 ? scrollByProp : Math.trunc(showItems), [showItems, scrollByProp]);
+    const [page, setPage] = useState(0);
+    const total = useMemo(() => {
+        if (items.length <= showItems) {
+            return 1;
+        }
+        return 1 + Math.ceil((items.length - showItems) / scrollBy);
+    }, [items.length, scrollBy, showItems]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.carousel, className) }, extractSupportProps(rest), { children: [_jsx("div", { className: styles.carouselBase, children: _jsx(ItemList, { showItems: showItems, scrollBy: scrollBy, items: items, gap: gap, autoSwipe: autoSwipe, infiniteScroll: infiniteScroll, totalPages: total, onPageChange: setPage }) }), pagination && (_jsx("div", { className: styles.pagination, children: _jsx(PaginationSlider, { "data-test-id": TEST_IDS.pagination, page: page + 1, onChange: noop, total: total }) }))] })));
+}

package/dist/esm/components/MobileCarousel/components/ItemList/ItemList.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+export type ItemProviderProps = {
+    items: ReactElement[];
+    showItems: number;
+    scrollBy: number;
+    gap?: string;
+    autoSwipe?: number;
+    infiniteScroll?: boolean;
+    totalPages: number;
+    onPageChange(page: number): void;
+};
+export declare function ItemList({ items, showItems, scrollBy, gap, autoSwipe, infiniteScroll, totalPages, onPageChange, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MobileCarousel/components/ItemList/ItemList.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import debounce from 'lodash.debounce';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { TEST_IDS } from '../../../../testIds';
+import styles from './styles.module.css';
+const DELTA = 5;
+export function ItemList({ items, showItems, scrollBy, gap, autoSwipe, infiniteScroll, totalPages, onPageChange, }) {
+    const timerRef = useRef();
+    const containerRef = useRef(null);
+    const [scrollLeft, setScrollLeft] = useState(0);
+    const [computedValues, setComputedValues] = useState({ itemWidth: 0, gap: 0 });
+    const [canDoInfiniteScroll, setCanDoInfiniteScroll] = useState(true);
+    const recalculateItemsSize = useCallback(() => {
+        const containerElement = containerRef.current;
+        if (!containerElement) {
+            return;
+        }
+        const styles = getComputedStyle(containerElement);
+        const gap = Number.parseFloat(styles.getPropertyValue('--mobile-carousel--list-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 node = containerRef.current;
+        if (!node) {
+            return;
+        }
+        recalculateItemsSize();
+        const observer = new ResizeObserver(debounce(recalculateItemsSize, 100));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [recalculateItemsSize]);
+    const itemWidth = useMemo(() => {
+        if (computedValues.itemWidth > 0) {
+            return computedValues.itemWidth;
+        }
+        const fallbackWidth = Math.floor(100 / showItems);
+        return `${fallbackWidth}%`;
+    }, [computedValues.itemWidth, showItems]);
+    useEffect(() => {
+        if (!autoSwipe) {
+            return;
+        }
+        const handleAutoSwipe = () => {
+            const deltaWidth = computedValues.itemWidth * scrollBy;
+            if (containerRef.current) {
+                const newLeft = containerRef.current.scrollLeft + deltaWidth;
+                containerRef.current.scrollTo({
+                    left: newLeft > containerRef.current.scrollWidth - deltaWidth ? 0 : newLeft,
+                    behavior: 'smooth',
+                });
+            }
+        };
+        timerRef.current = setInterval(() => handleAutoSwipe(), autoSwipe * 1000);
+        return () => clearInterval(timerRef.current);
+    }, [autoSwipe, computedValues.itemWidth, scrollBy, scrollLeft]);
+    /**
+     * Устанавливает номер текущей страницы.
+     * Текущей страницей считается та, над которой располагается центр контейнера.
+     * Странице принадлежит ее правый гап, если по центру контейнера он, то текущей страницей считается та что слева от этого gap-а
+     */
+    const setCurrentPage = event => {
+        var _a, _b;
+        const scrollLeft = event.currentTarget.scrollLeft;
+        setScrollLeft(scrollLeft);
+        const pageWith = scrollBy > 1
+            ? computedValues.itemWidth * scrollBy + computedValues.gap * (scrollBy - 1) // scrollBy=3 [item + gap + item + gap + item]
+            : computedValues.itemWidth; // scrollBy=1 [item]
+        const centerOfScrollContainer = scrollLeft + ((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) / 2;
+        for (let i = 0; i < totalPages; i++) {
+            const pageStart = i * pageWith;
+            const pageEnd = pageStart + pageWith + computedValues.gap;
+            if (centerOfScrollContainer >= pageStart && centerOfScrollContainer <= pageEnd) {
+                onPageChange(Math.max(0, Math.min(totalPages - 1, i)));
+                return;
+            }
+        }
+    };
+    const isScrolledLeft = () => Boolean(containerRef.current && containerRef.current.scrollLeft <= DELTA);
+    const isScrolledRight = () => Boolean(containerRef.current &&
+        containerRef.current.scrollWidth - containerRef.current.scrollLeft - containerRef.current.offsetWidth <= DELTA);
+    const handleTouchStart = () => {
+        setCanDoInfiniteScroll(isScrolledLeft() || isScrolledRight());
+    };
+    const handleTouchEnd = () => {
+        const scrollArea = containerRef.current;
+        if (!canDoInfiniteScroll || !infiniteScroll || !scrollArea) {
+            return;
+        }
+        if (isScrolledLeft()) {
+            scrollArea.scrollTo({ left: scrollArea.scrollWidth, behavior: 'smooth' });
+        }
+        else if (isScrolledRight()) {
+            scrollArea.scrollTo({ left: 0, behavior: 'smooth' });
+        }
+    };
+    return (_jsx("div", { ref: containerRef, className: styles.itemList, "data-gap": gap, style: Object.assign({}, (gap ? { '--mobile-carousel--list-gap': gap } : {})), onScroll: setCurrentPage, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: items.map((item, i) => (_jsx("div", { style: { width: itemWidth }, className: styles.itemContainer, role: 'group', "data-test-id": TEST_IDS.trackItem, children: item }, i))) }));
+}

package/dist/esm/components/MobileCarousel/components/ItemList/index.d.ts

@@ -0,0 +1 @@
+export * from './ItemList';

package/dist/esm/components/MobileCarousel/components/ItemList/index.js

@@ -0,0 +1 @@
+export * from './ItemList';

package/dist/esm/components/MobileCarousel/components/ItemList/styles.module.css

@@ -0,0 +1,27 @@
+.itemList{
+  --mobile-carousel--list-gap:var(--dimension-2m, 16px);
+  scrollbar-width:none;
+  scroll-snap-type:x mandatory;
+  scroll-snap-stop:always;
+  overflow-x:scroll;
+  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);
+  width:100%;
+  height:100%;
+  display:flex;
+  flex:none;
+  flex-flow:row nowrap;
+  gap:var(--mobile-carousel--list-gap, var(--dimension-2m, 16px));
+}
+.itemList ::-webkit-scrollbar{
+  display:none;
+}
+
+.itemContainer{
+  scroll-snap-align:start;
+  flex:none;
+  width:calc(100% - 1px);
+  margin:1px;
+}

package/dist/esm/components/MobileCarousel/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ItemList';

package/dist/esm/components/MobileCarousel/components/index.js

@@ -0,0 +1 @@
+export * from './ItemList';

package/dist/esm/components/MobileCarousel/index.d.ts

@@ -0,0 +1 @@
+export * from './MobileCarousel';

package/dist/esm/components/MobileCarousel/index.js

@@ -0,0 +1 @@
+export * from './MobileCarousel';

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

@@ -0,0 +1,21 @@
+.carouselBase{
+  position:relative;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+  outline:none;
+}
+
+.carousel{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  box-sizing:border-box;
+}
+
+.pagination{
+  padding-top:var(--space-carousel-sliders-wrap-padding-top, 8px);
+  display:flex;
+  justify-content:center;
+  box-sizing:border-box;
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AdaptiveCarousel';
+export * from './MobileCarousel';

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './AdaptiveCarousel';
+export * from './MobileCarousel';

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/testIds.d.ts

@@ -0,0 +1,7 @@
+export declare const TEST_IDS: {
+    arrowNext: string;
+    arrowPrev: string;
+    pagination: string;
+    trackLine: string;
+    trackItem: string;
+};

package/dist/esm/testIds.js

@@ -0,0 +1,7 @@
+export const TEST_IDS = {
+    arrowNext: 'carousel__arrow-next',
+    arrowPrev: 'carousel__arrow-prev',
+    pagination: 'carousel__pagination',
+    trackLine: 'carousel__track-line',
+    trackItem: 'carousel__track-item',
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-carousel",
   "title": "Mobile Carousel",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,13 +30,14 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
+  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@cloud-ru/uikit-product-utils": "7.0.2",
     "@snack-uikit/carousel": "0.6.4",
     "@snack-uikit/pagination": "0.10.18",
     "classnames": "2.5.1",
@@ -45,5 +46,5 @@
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
 }