@snack-uikit/carousel 0.2.21-preview-d46fe148.0 → 0.2.21-preview-1f246c4a.0

package/dist/cjs/components/Carousel/Carousel.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__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 = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Carousel = Carousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const pagination_1 = require("@snack-uikit/pagination");
+const utils_1 = require("@snack-uikit/utils");
+const testIds_1 = require("../../testIds");
+const Control_1 = require("../Control");
+const ItemProvider_1 = require("../ItemProvider");
+const styles_module_scss_1 = __importDefault({});
+function Carousel(_a) {
+  var _b;
+  var {
+      children: items,
+      showItems = 1,
+      scrollBy: scrollByProp,
+      transition = 0.4,
+      swipe = true,
+      arrows = true,
+      pagination = true,
+      className,
+      gap,
+      state,
+      infiniteScroll = false,
+      swipeActivateLength = 48
+    } = _a,
+    rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength"]);
+  const scrollBy = (0, react_1.useMemo)(() => scrollByProp !== null && scrollByProp !== void 0 ? scrollByProp : Math.trunc(showItems), [showItems, scrollByProp]);
+  const [page, setPage] = (0, uncontrollable_1.useUncontrolledProp)(state === null || state === void 0 ? void 0 : state.page, (_b = state === null || state === void 0 ? void 0 : state.page) !== null && _b !== void 0 ? _b : 0, newPage => {
+    const result = typeof newPage === 'function' ? newPage(page) : newPage;
+    state === null || state === void 0 ? void 0 : state.onChange(result);
+  });
+  const total = (0, react_1.useMemo)(() => Math.trunc(items.length / scrollBy) + (items.length % scrollBy ? 1 : 0), [items.length, scrollBy]);
+  const onLeftArrowClick = (0, react_1.useCallback)(() => {
+    setPage(page => infiniteScroll ? (total + page - 1) % total : Math.max(0, page - 1));
+  }, [infiniteScroll, setPage, total]);
+  const onRightArrowClick = (0, react_1.useCallback)(() => {
+    setPage(page => infiniteScroll ? (page + 1) % total : Math.min(total - 1, page + 1));
+  }, [infiniteScroll, setPage, total]);
+  const slideCallback = (0, react_1.useCallback)(direction => {
+    if (direction < 0) {
+      onRightArrowClick();
+      return;
+    }
+    onLeftArrowClick();
+  }, [onLeftArrowClick, onRightArrowClick]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.carousel, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.carouselBase,
+      children: [(0, jsx_runtime_1.jsx)(ItemProvider_1.ItemProvider, {
+        showItems: showItems,
+        scrollBy: scrollBy,
+        swipe: swipe,
+        transition: transition,
+        items: items,
+        slideCallback: slideCallback,
+        page: page,
+        gap: gap,
+        swipeActivateLength: swipeActivateLength
+      }), arrows && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        children: [(infiniteScroll || page > 0) && (0, jsx_runtime_1.jsx)(Control_1.Control, {
+          onClick: onLeftArrowClick,
+          variant: 'prev',
+          "data-test-id": testIds_1.TEST_IDS.arrowPrev
+        }), (infiniteScroll || page + 1 < total) && (0, jsx_runtime_1.jsx)(Control_1.Control, {
+          onClick: onRightArrowClick,
+          variant: 'next',
+          "data-test-id": testIds_1.TEST_IDS.arrowNext
+        })]
+      })]
+    }), 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: page => {
+          setPage(page - 1);
+        },
+        total: total
+      })
+    })]
+  }));
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Carousel"), exports);

package/dist/cjs/components/Control/Control.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__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 = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Control = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@snack-uikit/icons");
+const utils_1 = require("@snack-uikit/utils");
+const styles_module_scss_1 = __importDefault({});
+exports.Control = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      onClick,
+      variant
+    } = _a,
+    rest = __rest(_a, ["onClick", "variant"]);
+  return (0, jsx_runtime_1.jsx)("button", Object.assign({
+    ref: ref,
+    className: styles_module_scss_1.default.control,
+    onClick: () => {
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    type: 'button',
+    "data-variant": variant
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: (0, jsx_runtime_1.jsx)(icons_1.ChevronLeftSVG, {
+      size: 24,
+      className: styles_module_scss_1.default.icon
+    })
+  }));
+});

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Control"), exports);

package/dist/{components → cjs/components}/ItemProvider/ItemProvider.d.ts

@@ -4,11 +4,10 @@ export type ItemProviderProps = {
     showItems: number;
     scrollBy: number;
     slideCallback(direction: number): void;
-    scrollToNextPage(): void;
     transition: number;
     swipe: boolean;
     swipeActivateLength: number;
     page: number;
     gap?: string;
 };
-export declare function ItemProvider({ items, showItems, scrollBy, slideCallback, scrollToNextPage, transition, swipe, swipeActivateLength, page, gap, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,177 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ItemProvider = ItemProvider;
+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 helpers_1 = require("./helpers");
+const styles_module_scss_1 = __importDefault({});
+function ItemProvider(_ref) {
+  let {
+    items,
+    showItems,
+    scrollBy,
+    slideCallback,
+    transition,
+    swipe,
+    swipeActivateLength,
+    page,
+    gap
+  } = _ref;
+  const containerRef = (0, react_1.useRef)(null);
+  const [computedValues, setComputedValues] = (0, react_1.useState)({
+    itemWidth: 200,
+    gap: 0
+  });
+  const recalculateItemsSize = (0, react_1.useCallback)(() => {
+    const containerElement = containerRef.current;
+    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 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 itemsTrackerRef = (0, react_1.useRef)(null);
+  function hideNonVisibleItems() {
+    var _a;
+    (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${testIds_1.TEST_IDS.trackItem}]`).forEach(function (slide) {
+      slide.setAttribute('aria-hidden', '0');
+      slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(function (focusableElement) {
+        focusableElement.setAttribute('tabindex', '-5');
+        focusableElement.classList.add(styles_module_scss_1.default.hiddenItem);
+      });
+    });
+  }
+  function showVisibleItems(slide, page, show) {
+    var _a;
+    (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${testIds_1.TEST_IDS.trackItem}]`).forEach((item, i) => {
+      if (i >= page * slide && i < page * slide + Math.trunc(show)) {
+        item.removeAttribute('aria-hidden');
+        item.querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]').forEach(function (focusableElement) {
+          focusableElement.setAttribute('tabindex', '0');
+          focusableElement.classList.remove(styles_module_scss_1.default.hiddenItem);
+        });
+      }
+    });
+  }
+  const transform = (0, react_1.useMemo)(() => Number(-(page * scrollBy * computedValues.itemWidth + computedValues.gap * page * scrollBy)), [computedValues.gap, computedValues.itemWidth, page, scrollBy]);
+  (0, react_1.useEffect)(() => {
+    hideNonVisibleItems();
+    showVisibleItems(scrollBy, page, showItems);
+  }, [page, scrollBy, showItems]);
+  const [drag, setDrag] = (0, react_1.useState)({
+    initial: transform,
+    start: 0,
+    isDown: false,
+    drag: 0,
+    finished: true,
+    pointers: true
+  });
+  const handleDragStart = e => {
+    e.persist();
+    setDrag(Object.assign(Object.assign({}, drag), {
+      isDown: true,
+      start: (0, helpers_1.getPageX)(e),
+      initial: transform,
+      finished: false
+    }));
+  };
+  const handleDragFinish = e => {
+    e.persist();
+    if (drag.finished) {
+      return;
+    }
+    if (Math.abs(drag.drag) < swipeActivateLength) {
+      return setDrag({
+        initial: transform,
+        start: 0,
+        isDown: false,
+        drag: 0,
+        finished: true,
+        pointers: true
+      });
+    }
+    slideCallback(drag.drag > 0 ? -1 : 1);
+    setDrag(Object.assign(Object.assign({}, drag), {
+      drag: 0,
+      isDown: false,
+      finished: true,
+      pointers: true
+    }));
+    return;
+  };
+  const handleDragMove = e => {
+    e.persist();
+    if (!drag.isDown) {
+      return;
+    }
+    const pos = (0, helpers_1.getPageX)(e);
+    setDrag(Object.assign(Object.assign({}, drag), {
+      drag: drag.start - pos,
+      pointers: Math.abs(drag.start - pos) < Number.MIN_SAFE_INTEGER
+    }));
+  };
+  const swipeProps = swipe ? {
+    onTouchCancel: handleDragFinish,
+    onTouchEnd: handleDragFinish,
+    onTouchMove: handleDragMove,
+    onTouchStart: handleDragStart,
+    onMouseDown: handleDragStart,
+    onMouseLeave: handleDragFinish,
+    onMouseUp: handleDragFinish,
+    onMouseMove: handleDragMove
+  } : {};
+  return (0, jsx_runtime_1.jsx)("div", {
+    ref: containerRef,
+    className: styles_module_scss_1.default.itemProvider,
+    "data-pointers": !drag.pointers || undefined,
+    "data-swipe": swipe || undefined,
+    style: Object.assign({}, Boolean(gap) ? {
+      '--gap': gap
+    } : {}),
+    children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, swipeProps, {
+      className: styles_module_scss_1.default.itemTracker,
+      "data-test-id": testIds_1.TEST_IDS.trackLine,
+      style: {
+        transform: `translateX(${transform - drag.drag}px)`,
+        transition: `transform ${transition}s ease 0s`
+      },
+      ref: itemsTrackerRef,
+      children: items.map((item, i) => (0, jsx_runtime_1.jsx)("div", {
+        style: {
+          width: computedValues.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/ItemProvider/helpers.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPageX = getPageX;
+function getPageX(e) {
+  if (e.nativeEvent instanceof globalThis.MouseEvent) {
+    return e.nativeEvent.pageX;
+  } else if (e.nativeEvent instanceof globalThis.TouchEvent) {
+    return e.nativeEvent.changedTouches[0].pageX;
+  }
+  return 0;
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./ItemProvider"), exports);

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Carousel"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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.js

@@ -0,0 +1,13 @@
+"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/Carousel/Carousel.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CarouselProps = WithSupportProps<{
+    /** CSS - класснейм */
+    className?: string;
+    /** Массив айтемов */
+    children: ReactElement[];
+    /** Кол-во отображаемых единовременно айтемов @default 1 */
+    showItems?: number;
+    /** Сдвиг айтемов при смене 1 страницы @default Math.trunc(show) */
+    scrollBy?: number;
+    /** Время переключения 1 страницы (в s) @default 0.4 */
+    transition?: number;
+    /** Переключение страниц свайпом @default true */
+    swipe?: boolean;
+    /** Минимальная длина в px для активации свайпа @default 48 */
+    swipeActivateLength?: number;
+    /** Использовать стрелки для переключения страниц @default true */
+    arrows?: boolean;
+    /** Использовать пагинацию для переключения страниц @default true */
+    pagination?: boolean;
+    /** Расстояние между айтемами @default var(--dimension-2m)*/
+    gap?: string;
+    /** Управление состоянием извне */
+    state?: {
+        page: number;
+        onChange(page: number): void;
+    };
+    /** Цикличная прокрутка @default false*/
+    infiniteScroll?: boolean;
+}>;
+export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, swipeActivateLength, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/{components → esm/components}/Carousel/Carousel.js

@@ -41,7 +41,7 @@ export function Carousel(_a) {
         }
         onLeftArrowClick();
     }, [onLeftArrowClick, onRightArrowClick]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.carousel, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.carouselBase, children: [_jsx(ItemProvider, { showItems: showItems, scrollBy: scrollBy, swipe: swipe, transition: transition, items: items, slideCallback: slideCallback, page: page, gap: gap, swipeActivateLength: swipeActivateLength, scrollToNextPage: onRightArrowClick }), arrows && (_jsxs(_Fragment, { children: [(infiniteScroll || page > 0) && (_jsx(Control, { onClick: onLeftArrowClick, variant: 'prev', "data-test-id": TEST_IDS.arrowPrev })), (infiniteScroll || page + 1 < total) && (_jsx(Control, { onClick: onRightArrowClick, variant: 'next', "data-test-id": TEST_IDS.arrowNext }))] }))] }), pagination && (_jsx("div", { className: styles.pagination, children: _jsx(PaginationSlider, { "data-test-id": TEST_IDS.pagination, page: page + 1, onChange: (page) => {
+    return (_jsxs("div", Object.assign({ className: cn(styles.carousel, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.carouselBase, children: [_jsx(ItemProvider, { showItems: showItems, scrollBy: scrollBy, swipe: swipe, transition: transition, items: items, slideCallback: slideCallback, page: page, gap: gap, swipeActivateLength: swipeActivateLength }), arrows && (_jsxs(_Fragment, { children: [(infiniteScroll || page > 0) && (_jsx(Control, { onClick: onLeftArrowClick, variant: 'prev', "data-test-id": TEST_IDS.arrowPrev })), (infiniteScroll || page + 1 < total) && (_jsx(Control, { onClick: onRightArrowClick, variant: 'next', "data-test-id": TEST_IDS.arrowNext }))] }))] }), pagination && (_jsx("div", { className: styles.pagination, children: _jsx(PaginationSlider, { "data-test-id": TEST_IDS.pagination, page: page + 1, onChange: (page) => {
                         setPage(page - 1);
                     }, total: total }) }))] })));
 }

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

@@ -0,0 +1,6 @@
+export declare const Control: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    onClick?(): void;
+    variant: "prev" | "next";
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/{components → esm/components}/Control/Control.js

@@ -16,5 +16,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import styles from './styles.module.css';
 export const Control = forwardRef((_a, ref) => {
     var { onClick, variant } = _a, rest = __rest(_a, ["onClick", "variant"]);
-    return (_jsx("button", Object.assign({ ref: ref, className: styles.control, onClick: onClick, type: 'button', "data-variant": variant }, extractSupportProps(rest), { children: _jsx(ChevronLeftSVG, { size: 24, className: styles.icon }) })));
+    return (_jsx("button", Object.assign({ ref: ref, className: styles.control, onClick: () => {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }, type: 'button', "data-variant": variant }, extractSupportProps(rest), { children: _jsx(ChevronLeftSVG, { size: 24, className: styles.icon }) })));
 });

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

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

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

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+export type ItemProviderProps = {
+    items: ReactElement[];
+    showItems: number;
+    scrollBy: number;
+    slideCallback(direction: number): void;
+    transition: number;
+    swipe: boolean;
+    swipeActivateLength: number;
+    page: number;
+    gap?: string;
+};
+export declare function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/{components → esm/components}/ItemProvider/ItemProvider.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import debounce from 'lodash.debounce';
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TEST_IDS } from '../../testIds';
 import { getPageX } from './helpers';
 import styles from './styles.module.css';
-export function ItemProvider({ items, showItems, scrollBy, slideCallback, scrollToNextPage, transition, swipe, swipeActivateLength, page, gap, }) {
+export function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }) {
     const containerRef = useRef(null);
     const [computedValues, setComputedValues] = useState({
         itemWidth: 200,
@@ -37,28 +37,30 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, scroll
         return () => observer.disconnect();
     }, [recalculateItemsSize]);
     const itemsTrackerRef = useRef(null);
-    const hideNonVisibleItems = () => {
+    function hideNonVisibleItems() {
         var _a;
-        (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(slide => {
+        (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(function (slide) {
             slide.setAttribute('aria-hidden', '0');
-            slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(focusableElement => {
+            slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(function (focusableElement) {
                 focusableElement.setAttribute('tabindex', '-5');
                 focusableElement.classList.add(styles.hiddenItem);
             });
         });
-    };
-    const showVisibleItems = (slide, page, show) => {
+    }
+    function showVisibleItems(slide, page, show) {
         var _a;
         (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach((item, i) => {
             if (i >= page * slide && i < page * slide + Math.trunc(show)) {
                 item.removeAttribute('aria-hidden');
-                item.querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]').forEach(focusableElement => {
+                item
+                    .querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]')
+                    .forEach(function (focusableElement) {
                     focusableElement.setAttribute('tabindex', '0');
                     focusableElement.classList.remove(styles.hiddenItem);
                 });
             }
         });
-    };
+    }
     const transform = useMemo(() => Number(-(page * scrollBy * computedValues.itemWidth + computedValues.gap * page * scrollBy)), [computedValues.gap, computedValues.itemWidth, page, scrollBy]);
     useEffect(() => {
         hideNonVisibleItems();
@@ -115,16 +117,8 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, scroll
             onMouseMove: handleDragMove,
         }
         : {};
-    const handleSlideClick = useCallback(e => {
-        const isHidden = e.currentTarget.hasAttribute('aria-hidden');
-        if (isHidden) {
-            scrollToNextPage();
-        }
-    }, [scrollToNextPage]);
-    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: {
+    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) => (
-            // 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))) })) }));
+            }, 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/dist/esm/components/ItemProvider/helpers.d.ts

@@ -0,0 +1,2 @@
+import { MouseEvent, TouchEvent } from 'react';
+export declare function getPageX(e: TouchEvent | MouseEvent): number;

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

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

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

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

package/dist/esm/components/index.js

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

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/package.json

@@ -4,15 +4,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.21-preview-d46fe148.0",
+  "version": "0.2.21-preview-1f246c4a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/carousel",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Nikita Ershov <niershov@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,12 +34,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/pagination": "0.7.1",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/icons": "0.22.2-preview-1f246c4a.0",
+    "@snack-uikit/pagination": "0.7.2-preview-1f246c4a.0",
+    "@snack-uikit/utils": "3.4.1-preview-1f246c4a.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "39027f47c1a2c50919d064ec52bc41730821fc55"
+  "gitHead": "a185a55c0722b19f70dd168cf299e6f53a0fd93f"
 }

package/src/components/Carousel/Carousel.tsx

@@ -100,7 +100,6 @@ export function Carousel({
           page={page}
           gap={gap}
           swipeActivateLength={swipeActivateLength}
-          scrollToNextPage={onRightArrowClick}
         />
 
         {arrows && (

package/src/components/Control/Control.tsx

@@ -15,7 +15,9 @@ export const Control = forwardRef<HTMLButtonElement, ControlProps>(
     <button
       ref={ref}
       className={styles.control}
-      onClick={onClick}
+      onClick={() => {
+        onClick?.();
+      }}
       type='button'
       data-variant={variant}
       {...extractSupportProps(rest)}

package/src/components/ItemProvider/ItemProvider.tsx

@@ -1,15 +1,5 @@
 import debounce from 'lodash.debounce';
-import {
-  MouseEvent,
-  MouseEventHandler,
-  ReactElement,
-  TouchEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { MouseEvent, ReactElement, TouchEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { TEST_IDS } from '../../testIds';
 import { getPageX } from './helpers';
@@ -20,7 +10,6 @@ export type ItemProviderProps = {
   showItems: number;
   scrollBy: number;
   slideCallback(direction: number): void;
-  scrollToNextPage(): void;
   transition: number;
   swipe: boolean;
   swipeActivateLength: number;
@@ -33,7 +22,6 @@ export function ItemProvider({
   showItems,
   scrollBy,
   slideCallback,
-  scrollToNextPage,
   transition,
   swipe,
   swipeActivateLength,
@@ -85,28 +73,30 @@ export function ItemProvider({
 
   const itemsTrackerRef = useRef<HTMLDivElement>(null);
 
-  const hideNonVisibleItems = () => {
-    itemsTrackerRef.current?.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(slide => {
+  function hideNonVisibleItems() {
+    itemsTrackerRef.current?.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(function (slide) {
       slide.setAttribute('aria-hidden', '0');
 
-      slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(focusableElement => {
+      slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(function (focusableElement) {
         focusableElement.setAttribute('tabindex', '-5');
         focusableElement.classList.add(styles.hiddenItem);
       });
     });
-  };
+  }
 
-  const showVisibleItems = (slide: number, page: number, show: number) => {
+  function showVisibleItems(slide: number, page: number, show: number) {
     itemsTrackerRef.current?.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach((item, i) => {
       if (i >= page * slide && i < page * slide + Math.trunc(show)) {
         item.removeAttribute('aria-hidden');
-        item.querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]').forEach(focusableElement => {
-          focusableElement.setAttribute('tabindex', '0');
-          focusableElement.classList.remove(styles.hiddenItem);
-        });
+        item
+          .querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]')
+          .forEach(function (focusableElement) {
+            focusableElement.setAttribute('tabindex', '0');
+            focusableElement.classList.remove(styles.hiddenItem);
+          });
       }
     });
-  };
+  }
 
   const transform = useMemo(
     () => Number(-(page * scrollBy * computedValues.itemWidth + computedValues.gap * page * scrollBy)),
@@ -140,11 +130,9 @@ export function ItemProvider({
 
   const handleDragFinish = (e: MouseEvent | TouchEvent) => {
     e.persist();
-
     if (drag.finished) {
       return;
     }
-
     if (Math.abs(drag.drag) < swipeActivateLength) {
       return setDrag({
         initial: transform,
@@ -190,24 +178,12 @@ export function ItemProvider({
       }
     : {};
 
-  const handleSlideClick: MouseEventHandler = useCallback(
-    e => {
-      const isHidden = e.currentTarget.hasAttribute('aria-hidden');
-
-      if (isHidden) {
-        scrollToNextPage();
-      }
-    },
-    [scrollToNextPage],
-  );
-
   return (
     <div
       ref={containerRef}
       className={styles.itemProvider}
       data-pointers={!drag.pointers || undefined}
       data-swipe={swipe || undefined}
-      data-gap={gap}
       style={{
         ...(Boolean(gap) ? { '--gap': gap } : {}),
       }}
@@ -223,14 +199,12 @@ export function ItemProvider({
         ref={itemsTrackerRef}
       >
         {items.map((item, i) => (
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
           <div
             key={i}
             style={{ width: computedValues.itemWidth }}
             className={styles.itemContainer}
             role='group'
             data-test-id={TEST_IDS.trackItem}
-            onClick={handleSlideClick}
           >
             {item}
           </div>

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

@@ -39,4 +39,4 @@
   * {
     pointer-events: none;
   }
-}
+}

package/dist/components/Carousel/styles.module.css

@@ -1,21 +0,0 @@
-.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/components/Control/styles.module.css

@@ -1,45 +0,0 @@
-.control{
-  width:var(--size-carousel-control-container, 40px);
-  height:var(--size-carousel-control-container, 40px);
-  border-radius:var(--radius-carousel-control-container, 24px);
-  border-width:var(--border-width-025m, 2px);
-  cursor:pointer;
-  position:absolute;
-  top:50%;
-  left:calc(var(--size-carousel-control-wrap-width, 20px) - var(--size-carousel-control-container, 40px));
-  transform:translateY(-50%);
-  display:flex;
-  flex-shrink:0;
-  align-items:center;
-  justify-content:center;
-  color:var(--sys-neutral-text-light, #8b8e9b);
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-  border-color:transparent;
-  border-style:solid;
-  outline-color:transparent;
-  box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
-}
-.control:hover, .control:focus-visible{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.control:hover{
-  box-shadow:var(--box-shadow-elevation-level4, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 16px 16px 0px rgba(0, 0, 0, 0.0784313725));
-}
-.control:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  border-color:var(--sys-available-complementary, #1c1c24);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-  box-shadow:none;
-}
-.control[data-variant=next]{
-  right:calc(var(--size-carousel-control-wrap-width, 20px) - var(--size-carousel-control-container, 40px));
-  left:auto;
-}
-.control[data-variant=next]:focus-visible{
-  outline-offset:var(--dimension-025m, 2px);
-}
-.control[data-variant=next] .icon{
-  transform:rotate(180deg);
-}

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

@@ -1,39 +0,0 @@
-.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:hidden;
-  width:100%;
-  margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
-}
-.itemProvider[data-swipe]{
-  cursor:grab;
-}
-.itemProvider[data-swipe][data-pointers]{
-  cursor:grabbing;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
-  -webkit-user-drag:none;
-}
-
-.itemContainer{
-  flex-shrink:0;
-  box-sizing:border-box;
-}
-
-.itemTracker{
-  display:flex;
-  gap:var(--gap, var(--dimension-2m, 16px));
-  box-sizing:border-box;
-  height:100%;
-}
-
-.hiddenItem{
-  pointer-events:none;
-}
-.hiddenItem *{
-  pointer-events:none;
-}