@snack-uikit/carousel 0.2.21-preview-e5174ad1.0 → 0.2.22-preview-71543426.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.21 (2024-10-17)
+
+
+### Bug Fixes
+
+* **PDS-882:** scroll to partially visible slide on click ([f974fa2](https://github.com/cloud-ru-tech/snack-uikit/commit/f974fa298b3b972e4a27cb9cc5a065d92c583577))
+
+
+
+
+
 ## 0.2.20 (2024-09-23)
 
 ### Only dependencies have been changed

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

@@ -31,9 +31,7 @@ exports.Control = (0, react_1.forwardRef)((_a, ref) => {
   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();
-    },
+    onClick: onClick,
     type: 'button',
     "data-variant": variant
   }, (0, utils_1.extractSupportProps)(rest), {

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

@@ -58,28 +58,28 @@ function ItemProvider(_ref) {
     return () => observer.disconnect();
   }, [recalculateItemsSize]);
   const itemsTrackerRef = (0, react_1.useRef)(null);
-  function hideNonVisibleItems() {
+  const 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) {
+    (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${testIds_1.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_module_scss_1.default.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=${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) {
+        item.querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]').forEach(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();
@@ -147,11 +147,23 @@ function ItemProvider(_ref) {
     onMouseUp: handleDragFinish,
     onMouseMove: handleDragMove
   } : {};
+  const handleSlideClick = (0, react_1.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 (0, jsx_runtime_1.jsx)("div", {
     ref: containerRef,
     className: styles_module_scss_1.default.itemProvider,
     "data-pointers": !drag.pointers || undefined,
     "data-swipe": swipe || undefined,
+    "data-gap": gap,
     style: Object.assign({}, Boolean(gap) ? {
       '--gap': gap
     } : {}),
@@ -163,13 +175,16 @@ function ItemProvider(_ref) {
         transition: `transform ${transition}s ease 0s`
       },
       ref: itemsTrackerRef,
-      children: items.map((item, i) => (0, jsx_runtime_1.jsx)("div", {
+      children: items.map((item, i) =>
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      (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,
+        onClick: handleSlideClick,
         children: item
       }, i))
     }))

package/dist/esm/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/esm/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.21-preview-e5174ad1.0",
+  "version": "0.2.22-preview-71543426.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,12 +34,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.22.2-preview-e5174ad1.0",
-    "@snack-uikit/pagination": "0.7.2-preview-e5174ad1.0",
-    "@snack-uikit/utils": "3.4.1-preview-e5174ad1.0",
+    "@snack-uikit/icons": "0.22.2-preview-71543426.0",
+    "@snack-uikit/pagination": "0.7.2-preview-71543426.0",
+    "@snack-uikit/utils": "3.4.1-preview-71543426.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "3e1b0165a7ffe4fec49e268ad4c171ec97385243"
+  "gitHead": "3102614275e261c8f41db0f6c00a1f6b6276b2a9"
 }

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;
   }
-}
+}