@snack-uikit/carousel 0.2.20 → 0.2.21-preview-e6983aad.0

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.js

@@ -1,6 +1,6 @@
 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';
@@ -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,21 @@ 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 => {
+        var _a, _b;
+        const slideRect = e.currentTarget.getBoundingClientRect();
+        const containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const containerViewport = (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _b !== void 0 ? _b : 0;
+        const slidePositionDelta = containerViewport - slideRect.right;
+        const minPos = Math.min(slidePositionDelta, slideRect.x);
+        if (minPos < 0) {
+            slideCallback(slidePositionDelta);
+        }
+    }, [slideCallback]);
+    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",
+  "version": "0.2.21-preview-e6983aad.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "f9212fe04b0dbba9bedea1bb3a034ab612287841"
+  "gitHead": "b0f78be1b5a0b02fcd7c8fed0c0f39f912bf0f30"
 }

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';
@@ -73,30 +83,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 +138,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 +188,28 @@ export function ItemProvider({
       }
     : {};
 
+  const handleSlideClick: MouseEventHandler = useCallback(
+    e => {
+      const slideRect = e.currentTarget.getBoundingClientRect();
+      const containerRect = containerRef.current?.getBoundingClientRect();
+      const containerViewport = containerRect?.right ?? 0;
+      const slidePositionDelta = containerViewport - slideRect.right;
+      const minPos = Math.min(slidePositionDelta, slideRect.x);
+
+      if (minPos < 0) {
+        slideCallback(slidePositionDelta);
+      }
+    },
+    [slideCallback],
+  );
+
   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 +225,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;
   }
-}
+}