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

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, 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/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/components/ItemProvider/ItemProvider.js

@@ -4,7 +4,7 @@ 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,
@@ -116,11 +116,16 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, scroll
         }
         : {};
     const handleSlideClick = useCallback(e => {
-        const isHidden = e.currentTarget.hasAttribute('aria-hidden');
-        if (isHidden) {
-            scrollToNextPage();
+        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);
         }
-    }, [scrollToNextPage]);
+    }, [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`,

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.21-preview-d46fe148.0",
+  "version": "0.2.21-preview-e6983aad.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "39027f47c1a2c50919d064ec52bc41730821fc55"
+  "gitHead": "b0f78be1b5a0b02fcd7c8fed0c0f39f912bf0f30"
 }

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/ItemProvider/ItemProvider.tsx

@@ -20,7 +20,6 @@ export type ItemProviderProps = {
   showItems: number;
   scrollBy: number;
   slideCallback(direction: number): void;
-  scrollToNextPage(): void;
   transition: number;
   swipe: boolean;
   swipeActivateLength: number;
@@ -33,7 +32,6 @@ export function ItemProvider({
   showItems,
   scrollBy,
   slideCallback,
-  scrollToNextPage,
   transition,
   swipe,
   swipeActivateLength,
@@ -192,13 +190,17 @@ export function ItemProvider({
 
   const handleSlideClick: MouseEventHandler = useCallback(
     e => {
-      const isHidden = e.currentTarget.hasAttribute('aria-hidden');
-
-      if (isHidden) {
-        scrollToNextPage();
+      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);
       }
     },
-    [scrollToNextPage],
+    [slideCallback],
   );
 
   return (