@snack-uikit/carousel 0.2.20-preview-94780dcd.0 → 0.2.21-preview-d46fe148.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.2.20 (2024-09-23)
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.22.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/pagination@0.7.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/pagination/CHANGELOG.md)
+* [@snack-uikit/utils@3.4.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
 ## 0.2.19 (2024-09-07)
 
 

package/dist/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 }), 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, 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) => {
                         setPage(page - 1);
                     }, total: total }) }))] })));
 }

package/dist/components/Control/Control.js

@@ -16,7 +16,5 @@ 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 === null || onClick === void 0 ? void 0 : 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, type: 'button', "data-variant": variant }, extractSupportProps(rest), { children: _jsx(ChevronLeftSVG, { size: 24, className: styles.icon }) })));
 });

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

@@ -4,10 +4,11 @@ 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, transition, swipe, swipeActivateLength, page, gap, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ItemProvider({ items, showItems, scrollBy, slideCallback, scrollToNextPage, transition, swipe, swipeActivateLength, page, gap, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/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, transition, swipe, swipeActivateLength, page, gap, }) {
+export function ItemProvider({ items, showItems, scrollBy, slideCallback, scrollToNextPage, transition, swipe, swipeActivateLength, page, gap, }) {
     const containerRef = useRef(null);
     const [computedValues, setComputedValues] = useState({
         itemWidth: 200,
@@ -37,30 +37,28 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         return () => observer.disconnect();
     }, [recalculateItemsSize]);
     const itemsTrackerRef = useRef(null);
-    function hideNonVisibleItems() {
+    const hideNonVisibleItems = () => {
         var _a;
-        (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(function (slide) {
+        (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(slide => {
             slide.setAttribute('aria-hidden', '0');
-            slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(function (focusableElement) {
+            slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(focusableElement => {
                 focusableElement.setAttribute('tabindex', '-5');
                 focusableElement.classList.add(styles.hiddenItem);
             });
         });
-    }
-    function showVisibleItems(slide, page, show) {
+    };
+    const 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(function (focusableElement) {
+                item.querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]').forEach(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();
@@ -117,8 +115,16 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
             onMouseMove: handleDragMove,
         }
         : {};
-    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: {
+    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: {
                 transform: `translateX(${transform - drag.drag}px)`,
                 transition: `transform ${transition}s ease 0s`,
-            }, 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))) })) }));
+            }, 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))) })) }));
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.20-preview-94780dcd.0",
+  "version": "0.2.21-preview-d46fe148.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,12 +32,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.22.1-preview-94780dcd.0",
-    "@snack-uikit/pagination": "0.7.1-preview-94780dcd.0",
-    "@snack-uikit/utils": "3.3.1-preview-94780dcd.0",
+    "@snack-uikit/icons": "0.22.1",
+    "@snack-uikit/pagination": "0.7.1",
+    "@snack-uikit/utils": "3.4.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "0b67805c876ec8ccc1567d110a3b37b04d2f0fb6"
+  "gitHead": "39027f47c1a2c50919d064ec52bc41730821fc55"
 }

package/src/components/Carousel/Carousel.tsx

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

package/src/components/Control/Control.tsx

@@ -15,9 +15,7 @@ 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,5 +1,15 @@
 import debounce from 'lodash.debounce';
-import { MouseEvent, ReactElement, TouchEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  MouseEvent,
+  MouseEventHandler,
+  ReactElement,
+  TouchEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { TEST_IDS } from '../../testIds';
 import { getPageX } from './helpers';
@@ -10,6 +20,7 @@ export type ItemProviderProps = {
   showItems: number;
   scrollBy: number;
   slideCallback(direction: number): void;
+  scrollToNextPage(): void;
   transition: number;
   swipe: boolean;
   swipeActivateLength: number;
@@ -22,6 +33,7 @@ export function ItemProvider({
   showItems,
   scrollBy,
   slideCallback,
+  scrollToNextPage,
   transition,
   swipe,
   swipeActivateLength,
@@ -73,30 +85,28 @@ export function ItemProvider({
 
   const itemsTrackerRef = useRef<HTMLDivElement>(null);
 
-  function hideNonVisibleItems() {
-    itemsTrackerRef.current?.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(function (slide) {
+  const hideNonVisibleItems = () => {
+    itemsTrackerRef.current?.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(slide => {
       slide.setAttribute('aria-hidden', '0');
 
-      slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(function (focusableElement) {
+      slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(focusableElement => {
         focusableElement.setAttribute('tabindex', '-5');
         focusableElement.classList.add(styles.hiddenItem);
       });
     });
-  }
+  };
 
-  function showVisibleItems(slide: number, page: number, show: number) {
+  const 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(function (focusableElement) {
-            focusableElement.setAttribute('tabindex', '0');
-            focusableElement.classList.remove(styles.hiddenItem);
-          });
+        item.querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]').forEach(focusableElement => {
+          focusableElement.setAttribute('tabindex', '0');
+          focusableElement.classList.remove(styles.hiddenItem);
+        });
       }
     });
-  }
+  };
 
   const transform = useMemo(
     () => Number(-(page * scrollBy * computedValues.itemWidth + computedValues.gap * page * scrollBy)),
@@ -130,9 +140,11 @@ export function ItemProvider({
 
   const handleDragFinish = (e: MouseEvent | TouchEvent) => {
     e.persist();
+
     if (drag.finished) {
       return;
     }
+
     if (Math.abs(drag.drag) < swipeActivateLength) {
       return setDrag({
         initial: transform,
@@ -178,12 +190,24 @@ 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 } : {}),
       }}
@@ -199,12 +223,14 @@ 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;
   }
-}
+}