@faststore/ui 1.12.19 → 1.12.23

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.23](https://github.com/vtex/faststore/compare/v1.12.22...v1.12.23) (2022-11-04)
+
+
+### Features
+
+* Revisit `Carousel` component ([#1476](https://github.com/vtex/faststore/issues/1476)) ([5bf8662](https://github.com/vtex/faststore/commit/5bf86628e04fd5cf47c10071e66058de035d8023))
+
+
+
+## 1.12.20 (2022-10-26)
+
+
+### Chores
+
+* git blame ignore modification by data-fs ([#1494](https://github.com/vtex/faststore/issues/1494)) ([783079e](https://github.com/vtex/faststore/commit/783079e7095b39270bbb60e79063b774056dc5d4))
+
+
+
 ## 1.12.19 (2022-10-25)
 
 

package/dist/hooks/useSlider/useSlider.d.ts

@@ -52,8 +52,10 @@ export interface UseSliderArgs extends SwipeableProps {
     itemsPerPage?: number;
     /** Whether or not the slider is infinite. */
     infiniteMode?: boolean;
+    /**  Whether or not slide after swiping left/right. */
+    shouldSlideOnSwipe?: boolean;
 }
-export default function useSlider({ totalItems, itemsPerPage, infiniteMode, ...swipeableConfigOverrides }: UseSliderArgs): {
+export default function useSlider({ totalItems, itemsPerPage, infiniteMode, shouldSlideOnSwipe, ...swipeableConfigOverrides }: UseSliderArgs): {
     handlers: import("react-swipeable").SwipeableHandlers;
     slide: (page: number | SlideDirection, dispatch: Dispatch<Action>) => void;
     sliderState: SliderState;

package/dist/hooks/useSlider/useSlider.js

@@ -70,14 +70,10 @@ const defaultSliderState = (totalItems, itemsPerPage, infinite) => ({
 });
 const slide = (page, dispatch) => {
     if (page === 'next') {
-        dispatch({
-            type: 'NEXT_PAGE',
-        });
+        dispatch({ type: 'NEXT_PAGE' });
     }
     if (page === 'previous') {
-        dispatch({
-            type: 'PREVIOUS_PAGE',
-        });
+        dispatch({ type: 'PREVIOUS_PAGE' });
     }
     if (typeof page === 'number') {
         dispatch({
@@ -89,12 +85,11 @@ const slide = (page, dispatch) => {
         });
     }
 };
-export default function useSlider({ totalItems, itemsPerPage = 1, infiniteMode = false, ...swipeableConfigOverrides }) {
+export default function useSlider({ totalItems, itemsPerPage = 1, infiniteMode = false, shouldSlideOnSwipe = true, ...swipeableConfigOverrides }) {
     const [sliderState, sliderDispatch] = useReducer(reducer, undefined, () => defaultSliderState(totalItems, itemsPerPage, infiniteMode));
     const handlers = useSwipeable({
-        onSwipedRight: () => slide('previous', sliderDispatch),
-        onSwipedLeft: () => slide('next', sliderDispatch),
-        preventDefaultTouchmoveEvent: true,
+        onSwipedRight: () => shouldSlideOnSwipe && slide('previous', sliderDispatch),
+        onSwipedLeft: () => shouldSlideOnSwipe && slide('next', sliderDispatch),
         trackMouse: true,
         ...swipeableConfigOverrides,
     });

package/dist/hooks/useSlider/useSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../../src/hooks/useSlider/useSlider.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../../src/hooks/useSlider/useSlider.ts"],"names":[],"mappings":"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"}

package/dist/molecules/Bullets/Bullets.js

@@ -5,7 +5,7 @@ const Bullets = forwardRef(function Bullets({ totalQuantity, activeBullet, onCli
     const bulletIndexes = useMemo(() => Array(totalQuantity).fill(0), [totalQuantity]);
     return (React.createElement("div", Object.assign({ ref: ref, "data-fs-bullets": true, "data-testid": testId, role: "tablist" }, otherProps), bulletIndexes.map((_, idx) => {
         const isActive = activeBullet === idx;
-        return (React.createElement(Button, { "data-bullet-item": true, role: "tab", tabIndex: -1, key: idx, testId: `${testId}-item`, onClick: (e) => onClick(e, idx), "aria-label": ariaLabelGenerator(idx, isActive), "aria-controls": ariaControlsGenerator?.(idx), "aria-selected": isActive }));
+        return (React.createElement(Button, { key: idx, role: "tab", tabIndex: -1, "data-fs-bullet": true, testId: `${testId}-bullet`, onClick: (e) => onClick(e, idx), "aria-label": ariaLabelGenerator(idx, isActive), "aria-controls": ariaControlsGenerator?.(idx), "aria-selected": isActive }));
     })));
 });
 export default Bullets;

package/dist/molecules/Bullets/Bullets.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bullets.js","sourceRoot":"","sources":["../../../src/molecules/Bullets/Bullets.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAmCvC,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAE,QAAiB,EAAE,EAAE,CAC1D,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,GAAG,GAAG,CAAC,EAAE,CAAA;AAErD,MAAM,OAAO,GAAG,UAAU,CAA+B,SAAS,OAAO,CACvE,EACE,aAAa,EACb,YAAY,EACZ,OAAO,EACP,MAAM,GAAG,eAAe,EACxB,kBAAkB,GAAG,gBAAgB,EACrC,qBAAqB,EACrB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAClC,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,0CAEK,MAAM,EACnB,IAAI,EAAC,SAAS,IACV,UAAU,GAEb,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;QAC5B,MAAM,QAAQ,GAAG,YAAY,KAAK,GAAG,CAAA;QAErC,OAAO,CACL,oBAAC,MAAM,8BAEL,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,GAAG,MAAM,OAAO,EACxB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,gBACnB,kBAAkB,CAAC,GAAG,EAAE,QAAQ,CAAC,mBAC9B,qBAAqB,EAAE,CAAC,GAAG,CAAC,mBAC5B,QAAQ,GACvB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Bullets.js","sourceRoot":"","sources":["../../../src/molecules/Bullets/Bullets.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAmCvC,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAE,QAAiB,EAAE,EAAE,CAC1D,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,GAAG,GAAG,CAAC,EAAE,CAAA;AAErD,MAAM,OAAO,GAAG,UAAU,CAA+B,SAAS,OAAO,CACvE,EACE,aAAa,EACb,YAAY,EACZ,OAAO,EACP,MAAM,GAAG,eAAe,EACxB,kBAAkB,GAAG,gBAAgB,EACrC,qBAAqB,EACrB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAClC,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,0CAEK,MAAM,EACnB,IAAI,EAAC,SAAS,IACV,UAAU,GAEb,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;QAC5B,MAAM,QAAQ,GAAG,YAAY,KAAK,GAAG,CAAA;QAErC,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,0BAEZ,MAAM,EAAE,GAAG,MAAM,SAAS,EAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,gBACnB,kBAAkB,CAAC,GAAG,EAAE,QAAQ,CAAC,mBAC9B,qBAAqB,EAAE,CAAC,GAAG,CAAC,mBAC5B,QAAQ,GACvB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/molecules/Carousel/Carousel.d.ts

@@ -1,16 +1,54 @@
-import type { PropsWithChildren } from 'react';
+import type { ReactNode, PropsWithChildren } from 'react';
 import type { SwipeableProps } from 'react-swipeable';
 export interface CarouselProps extends SwipeableProps {
+    /**
+     * ID of the current instance of the component.
+     */
     id?: string;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
     testId?: string;
+    /**
+     * Returns the value of element's class content attribute.
+     */
+    className?: string;
+    /**
+     * Whether or not the Carousel is infinite slide/scroll. Only for the `slide` variant.
+     * @default true
+     */
     infiniteMode?: boolean;
+    /**
+     * Specifies which navigation elements should be visible.
+     * @default complete
+     */
     controls?: 'complete' | 'navigationArrows' | 'paginationBullets';
+    /**
+     * Specifies the slide transition. Only for the `slide` variant
+     */
     transition?: {
         duration: number;
         property: string;
         delay?: number;
         timing?: string;
     };
+    /**
+     * Specifies the number of items per page.
+     * @default 1
+     */
+    itemsPerPage?: number;
+    /**
+     * Specifies the Carousel track variant.
+     * @default slide
+     */
+    variant?: 'slide' | 'scroll';
+    /**
+     * Specifies the navigation icons.
+     */
+    navigationIcons?: {
+        left?: ReactNode;
+        right?: ReactNode;
+    };
 }
-declare function Carousel({ infiniteMode, controls, testId, transition, children, id, ...swipeableConfigOverrides }: PropsWithChildren<CarouselProps>): JSX.Element;
+declare function Carousel({ infiniteMode, controls, testId, transition, children, className, id, variant, itemsPerPage, navigationIcons, ...swipeableConfigOverrides }: PropsWithChildren<CarouselProps>): JSX.Element;
 export default Carousel;

package/dist/molecules/Carousel/Carousel.js

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { RightArrowIcon, LeftArrowIcon } from './Arrows';
+import CarouselItem from './CarouselItem';
 import useSlider from '../../hooks/useSlider/useSlider';
-import useSlideVisibility from './hooks/useSlideVisibility';
 import Bullets from '../Bullets';
 import IconButton from '../IconButton';
 const createTransformValues = (infinite, totalItems) => {
@@ -17,7 +17,10 @@ const createTransformValues = (infinite, totalItems) => {
 function Carousel({ infiniteMode = true, controls = 'complete', testId = 'store-carousel', transition = {
     duration: 400,
     property: 'transform',
-}, children, id = 'store-carousel', ...swipeableConfigOverrides }) {
+}, children, className, id = 'store-carousel', variant = 'slide', itemsPerPage = 1, navigationIcons = undefined, ...swipeableConfigOverrides }) {
+    const carouselTrackRef = useRef(null);
+    const isSlideCarousel = variant === 'slide';
+    const isScrollCarousel = variant === 'scroll';
     const childrenArray = React.Children.toArray(children);
     const childrenCount = childrenArray.length;
     const numberOfSlides = infiniteMode ? childrenCount + 2 : childrenCount;
@@ -26,19 +29,35 @@ function Carousel({ infiniteMode = true, controls = 'complete', testId = 'store-
     const showPaginationBullets = controls === 'complete' || controls === 'paginationBullets';
     const transformValues = useMemo(() => createTransformValues(infiniteMode, numberOfSlides), [numberOfSlides, infiniteMode]);
     const { handlers, slide, sliderState, sliderDispatch } = useSlider({
-        totalItems: childrenCount,
-        itemsPerPage: 1,
+        itemsPerPage,
         infiniteMode,
-        ...swipeableConfigOverrides,
-    });
-    const { isItemVisible, shouldRenderItem } = useSlideVisibility({
-        itemsPerPage: sliderState.itemsPerPage,
-        currentSlide: sliderState.currentItem,
         totalItems: childrenCount,
+        shouldSlideOnSwipe: isSlideCarousel,
+        ...swipeableConfigOverrides,
     });
     const postRenderedSlides = infiniteMode && children ? childrenArray.slice(0, 1) : [];
     const preRenderedSlides = infiniteMode && children ? childrenArray.slice(childrenCount - 1) : [];
     const slides = preRenderedSlides.concat(children ?? [], postRenderedSlides);
+    const slideCarouselTrackStyle = useMemo(() => ({
+        display: 'flex',
+        width: `${numberOfSlides * 100}%`,
+        transition: sliderState.sliding ? slidingTransition : undefined,
+        transform: `translate3d(${transformValues[sliderState.currentPage]}%, 0, 0)`,
+    }), [
+        numberOfSlides,
+        transformValues,
+        slidingTransition,
+        sliderState.sliding,
+        sliderState.currentPage,
+    ]);
+    const scrollCarouselTrackStyle = useMemo(() => ({
+        width: '100%',
+        display: 'block',
+        overflowX: 'scroll',
+        whiteSpace: 'nowrap',
+    }), []);
+    const carouselTrackStyle = (isSlideCarousel && slideCarouselTrackStyle) ||
+        (isScrollCarousel && scrollCarouselTrackStyle);
     const slidePrevious = () => {
         if (sliderState.sliding ||
             (!infiniteMode && sliderState.currentPage === 0)) {
@@ -53,15 +72,74 @@ function Carousel({ infiniteMode = true, controls = 'complete', testId = 'store-
         }
         slide('next', sliderDispatch);
     };
+    const onScrollTrack = (event) => {
+        if (isSlideCarousel || itemsPerPage > 1) {
+            return;
+        }
+        const itemWidth = Number(event.currentTarget.firstElementChild?.scrollWidth);
+        const scrollOffset = event.currentTarget?.scrollLeft;
+        const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor;
+        const page = formatter(scrollOffset / itemWidth);
+        slide(page, sliderDispatch);
+    };
+    const onTransitionTrackEnd = () => {
+        sliderDispatch({
+            type: 'STOP_SLIDE',
+        });
+        if (infiniteMode && sliderState.currentItem >= childrenCount) {
+            sliderDispatch({
+                type: 'GO_TO_PAGE',
+                payload: {
+                    pageIndex: 0,
+                    shouldSlide: false,
+                },
+            });
+        }
+        if (infiniteMode && sliderState.currentItem < 0) {
+            sliderDispatch({
+                type: 'GO_TO_PAGE',
+                payload: {
+                    pageIndex: sliderState.totalPages - 1,
+                    shouldSlide: false,
+                },
+            });
+        }
+    };
+    const onScrollPagination = async (index, slideDirection) => {
+        if (slideDirection === 'previous' && sliderState.currentPage === 0) {
+            return;
+        }
+        if (slideDirection === 'next' &&
+            sliderState.currentPage === sliderState.totalPages - 1) {
+            return;
+        }
+        let scrollOffset;
+        const carouselItemsWidth = Number(carouselTrackRef.current?.firstElementChild?.clientWidth);
+        if (itemsPerPage > 1) {
+            scrollOffset = index * carouselItemsWidth * itemsPerPage;
+        }
+        else {
+            scrollOffset = index * carouselItemsWidth - carouselItemsWidth * 0.125;
+        }
+        carouselTrackRef.current?.scrollTo({
+            left: scrollOffset,
+            behavior: 'smooth',
+        });
+        slide(index, sliderDispatch);
+    };
     // accessible behavior for tablist
     const handleBulletsKeyDown = (event) => {
         switch (event.key) {
             case 'ArrowLeft': {
-                slidePrevious();
+                isSlideCarousel && slidePrevious();
+                isScrollCarousel &&
+                    onScrollPagination(sliderState.currentPage - 1, 'previous');
                 break;
             }
             case 'ArrowRight': {
-                slideNext();
+                isSlideCarousel && slideNext();
+                isScrollCarousel &&
+                    onScrollPagination(sliderState.currentPage + 1, 'next');
                 break;
             }
             case 'Home': {
@@ -75,50 +153,31 @@ function Carousel({ infiniteMode = true, controls = 'complete', testId = 'store-
             default:
         }
     };
-    return (React.createElement("section", { id: id, "data-fs-carousel": true, "data-testid": testId, "aria-label": "carousel", "aria-roledescription": "carousel" },
-        React.createElement("div", Object.assign({ "data-carousel-track-container": true, style: { overflow: 'hidden', width: '100%' } }, handlers),
-            React.createElement("div", { "data-carousel-track": true, style: {
-                    display: 'flex',
-                    transition: sliderState.sliding ? slidingTransition : undefined,
-                    width: `${numberOfSlides * 100}%`,
-                    transform: `translate3d(${transformValues[sliderState.currentPage]}%, 0, 0)`,
-                }, onTransitionEnd: () => {
-                    sliderDispatch({
-                        type: 'STOP_SLIDE',
-                    });
-                    if (sliderState.currentItem >= childrenCount) {
-                        sliderDispatch({
-                            type: 'GO_TO_PAGE',
-                            payload: {
-                                pageIndex: 0,
-                                shouldSlide: false,
-                            },
-                        });
-                    }
-                    if (sliderState.currentItem < 0) {
-                        sliderDispatch({
-                            type: 'GO_TO_PAGE',
-                            payload: {
-                                pageIndex: sliderState.totalPages - 1,
-                                shouldSlide: false,
-                            },
-                        });
-                    }
-                }, "aria-live": "polite" }, slides.map((currentSlide, idx) => (React.createElement("div", { role: "tabpanel", "aria-roledescription": "slide", key: idx, id: `carousel-item-${idx}`, "data-carousel-item": true, style: { width: '100%' }, "data-visible": isItemVisible(idx - Number(infiniteMode)) || undefined }, shouldRenderItem(idx - Number(infiniteMode))
-                ? currentSlide
-                : null))))),
-        showNavigationArrows && (React.createElement("div", { "data-carousel-controls": true },
-            React.createElement(IconButton, { "aria-label": "previous", "data-arrow": "left", "aria-controls": id, onClick: slidePrevious, icon: React.createElement(LeftArrowIcon, null) }),
-            React.createElement(IconButton, { "aria-label": "next", "data-arrow": "right", "aria-controls": id, onClick: slideNext, icon: React.createElement(RightArrowIcon, null) }))),
-        showPaginationBullets && (React.createElement("div", { "data-carousel-bullets": true },
-            React.createElement(Bullets, { tabIndex: 0, totalQuantity: childrenCount, activeBullet: sliderState.currentPage, onClick: (_, idx) => {
-                    if (sliderState.sliding) {
-                        return;
-                    }
-                    slide(idx, sliderDispatch);
-                }, ariaControlsGenerator: (idx) => `carousel-item-${idx}`, onKeyDown: handleBulletsKeyDown, onFocus: (event) => {
-                    event.currentTarget.focus();
-                } })))));
+    return (React.createElement("section", { id: id, "data-fs-carousel": true, className: className, "data-testid": testId, "aria-label": "carousel", "aria-roledescription": "carousel" },
+        React.createElement("div", Object.assign({ "data-fs-carousel-track-container": true, style: {
+                width: '100%',
+                overflow: 'hidden',
+                display: isScrollCarousel ? 'block' : undefined,
+            } }, handlers),
+            React.createElement("ul", { "aria-live": "polite", ref: carouselTrackRef, style: carouselTrackStyle, "data-fs-carousel-track": true, onScroll: onScrollTrack, onTransitionEnd: onTransitionTrackEnd }, slides.map((currentSlide, idx) => (React.createElement(CarouselItem, { index: idx, key: String(idx), state: sliderState, totalItems: childrenCount, infiniteMode: infiniteMode, isScrollCarousel: isScrollCarousel }, currentSlide))))),
+        showNavigationArrows && (React.createElement("div", { "data-fs-carousel-controls": true },
+            React.createElement(IconButton, { "data-fs-carousel-control": "left", "aria-controls": id, "aria-label": "previous", icon: navigationIcons?.left ?? React.createElement(LeftArrowIcon, null), onClick: () => {
+                    isSlideCarousel && slidePrevious();
+                    isScrollCarousel &&
+                        onScrollPagination(sliderState.currentPage - 1, 'previous');
+                } }),
+            React.createElement(IconButton, { "data-fs-carousel-control": "right", "aria-controls": id, "aria-label": "next", icon: navigationIcons?.right ?? React.createElement(RightArrowIcon, null), onClick: () => {
+                    isSlideCarousel && slideNext();
+                    isScrollCarousel &&
+                        onScrollPagination(sliderState.currentPage + 1, 'next');
+                } }))),
+        showPaginationBullets && (React.createElement("div", { "data-fs-carousel-bullets": true },
+            React.createElement(Bullets, { tabIndex: 0, activeBullet: sliderState.currentPage, totalQuantity: Math.ceil(childrenCount / sliderState.itemsPerPage), onKeyDown: handleBulletsKeyDown, onClick: async (_, idx) => {
+                    isSlideCarousel &&
+                        !sliderState.sliding &&
+                        slide(idx, sliderDispatch);
+                    isScrollCarousel && onScrollPagination(idx);
+                }, onFocus: (event) => event.currentTarget.focus(), ariaControlsGenerator: (idx) => `carousel-item-${idx}` })))));
 }
 export default Carousel;
 //# sourceMappingURL=Carousel.js.map

package/dist/molecules/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}

package/dist/molecules/Carousel/CarouselItem.d.ts

@@ -0,0 +1,11 @@
+import type { PropsWithChildren, HTMLAttributes } from 'react';
+import type { SliderState } from '../../hooks/useSlider/useSlider';
+interface CarouselItemProps extends HTMLAttributes<HTMLLIElement> {
+    index: number;
+    totalItems: number;
+    state: SliderState;
+    infiniteMode: boolean;
+    isScrollCarousel: boolean;
+}
+declare function CarouselItem({ index, state, children, totalItems, infiniteMode, isScrollCarousel, }: PropsWithChildren<CarouselItemProps>): JSX.Element;
+export default CarouselItem;

package/dist/molecules/Carousel/CarouselItem.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import useSlideVisibility from './hooks/useSlideVisibility';
+function CarouselItem({ index, state, children, totalItems, infiniteMode, isScrollCarousel, }) {
+    const { isItemVisible, shouldRenderItem } = useSlideVisibility({
+        totalItems,
+        currentSlide: state.currentItem,
+        itemsPerPage: state.itemsPerPage,
+    });
+    const style = (!isScrollCarousel && { width: '100%' }) ||
+        (isScrollCarousel && {
+            maxWidth: '80%',
+            display: 'inline-block',
+        });
+    const shouldDisplayItem = isScrollCarousel || shouldRenderItem(index - Number(infiniteMode));
+    return (React.createElement("li", { style: style, "data-fs-carousel-item": true, "aria-roledescription": "slide", id: `carousel-item-${index}`, "data-fs-carousel-item-visible": isItemVisible(index - Number(infiniteMode)) || undefined }, shouldDisplayItem ? children : null));
+}
+export default CarouselItem;
+//# sourceMappingURL=CarouselItem.js.map

package/dist/molecules/Carousel/CarouselItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselItem.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,kBAAkB,MAAM,4BAA4B,CAAA;AAU3D,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,gBAAgB,GACqB;IACrC,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,CAAC;QAC7D,UAAU;QACV,YAAY,EAAE,KAAK,CAAC,WAAW;QAC/B,YAAY,EAAE,KAAK,CAAC,YAAY;KACjC,CAAC,CAAA;IAEF,MAAM,KAAK,GACR,CAAC,CAAC,gBAAgB,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAmB;QAC1D,CAAC,gBAAgB,IAAI;YACpB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,cAAc;SACxB,CAAmB,CAAA;IAEtB,MAAM,iBAAiB,GACrB,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAA;IAEpE,OAAO,CACL,4BACE,KAAK,EAAE,KAAK,yDAES,OAAO,EAC5B,EAAE,EAAE,iBAAiB,KAAK,EAAE,mCAE1B,aAAa,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,SAAS,IAGzD,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACjC,CACN,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.12.19",
+  "version": "1.12.23",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -49,7 +49,7 @@
   "dependencies": {
     "@reach/popover": "^0.16.0",
     "@storybook/addon-a11y": "^6.4.4",
-    "react-swipeable": "^6.1.2",
+    "react-swipeable": "^7.0.0",
     "tabbable": "^5.2.1"
   },
   "peerDependencies": {
@@ -57,8 +57,8 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@faststore/shared": "^1.12.19",
-    "@faststore/styles": "^1.12.19",
+    "@faststore/shared": "^1.12.20",
+    "@faststore/styles": "^1.12.23",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-actions": "^6.4.4",
     "@storybook/addon-docs": "^6.4.4",
@@ -85,5 +85,5 @@
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "5d5338e9f856f19c8b190ddbaba1ee243f1ea8b6"
+  "gitHead": "75646edad6c5c1726d7e2858e7d6677411edf678"
 }

package/src/hooks/useSlider/useSlider.ts

@@ -152,15 +152,11 @@ const defaultSliderState = (
 
 const slide = (page: SlideDirection | number, dispatch: Dispatch<Action>) => {
   if (page === 'next') {
-    dispatch({
-      type: 'NEXT_PAGE',
-    })
+    dispatch({ type: 'NEXT_PAGE' })
   }
 
   if (page === 'previous') {
-    dispatch({
-      type: 'PREVIOUS_PAGE',
-    })
+    dispatch({ type: 'PREVIOUS_PAGE' })
   }
 
   if (typeof page === 'number') {
@@ -181,12 +177,15 @@ export interface UseSliderArgs extends SwipeableProps {
   itemsPerPage?: number
   /** Whether or not the slider is infinite. */
   infiniteMode?: boolean
+  /**  Whether or not slide after swiping left/right. */
+  shouldSlideOnSwipe?: boolean
 }
 
 export default function useSlider({
   totalItems,
   itemsPerPage = 1,
   infiniteMode = false,
+  shouldSlideOnSwipe = true,
   ...swipeableConfigOverrides
 }: UseSliderArgs) {
   const [sliderState, sliderDispatch] = useReducer(reducer, undefined, () =>
@@ -194,9 +193,9 @@ export default function useSlider({
   )
 
   const handlers = useSwipeable({
-    onSwipedRight: () => slide('previous', sliderDispatch),
-    onSwipedLeft: () => slide('next', sliderDispatch),
-    preventDefaultTouchmoveEvent: true,
+    onSwipedRight: () =>
+      shouldSlideOnSwipe && slide('previous', sliderDispatch),
+    onSwipedLeft: () => shouldSlideOnSwipe && slide('next', sliderDispatch),
     trackMouse: true,
     ...swipeableConfigOverrides,
   })

package/src/molecules/Bullets/Bullets.test.tsx

@@ -13,17 +13,17 @@ describe('Bullets', () => {
     expect(getByTestId('store-bullets')).toHaveAttribute('data-fs-bullets')
   })
 
-  it('should render 5 bullets with `data-bullet-item` attribute', () => {
+  it('should render 5 bullets with `data-fs-bullet` attribute', () => {
     const { queryAllByTestId } = render(
       <Bullets totalQuantity={5} activeBullet={2} onClick={() => null} />
     )
 
-    const bulletItems = queryAllByTestId('store-bullets-item')
+    const bulletItems = queryAllByTestId('store-bullets-bullet')
 
     expect(bulletItems).toHaveLength(5)
 
     bulletItems.forEach((bullet) =>
-      expect(bullet).toHaveAttribute('data-bullet-item')
+      expect(bullet).toHaveAttribute('data-fs-bullet')
     )
   })
 
@@ -32,7 +32,7 @@ describe('Bullets', () => {
       <Bullets totalQuantity={5} activeBullet={2} onClick={() => null} />
     )
 
-    const bulletItems = queryAllByTestId('store-bullets-item')
+    const bulletItems = queryAllByTestId('store-bullets-bullet')
 
     // eslint-disable-next-line prefer-destructuring
     const expectedActiveBullet = bulletItems[2]
@@ -59,7 +59,7 @@ describe('Bullets', () => {
       />
     )
 
-    const bulletItems = queryAllByTestId('store-bullets-item')
+    const bulletItems = queryAllByTestId('store-bullets-bullet')
 
     expect(bulletItems).toHaveLength(5)
 

package/src/molecules/Bullets/Bullets.tsx

@@ -69,11 +69,11 @@ const Bullets = forwardRef<HTMLDivElement, BulletsProps>(function Bullets(
 
         return (
           <Button
-            data-bullet-item
+            key={idx}
             role="tab"
             tabIndex={-1}
-            key={idx}
-            testId={`${testId}-item`}
+            data-fs-bullet
+            testId={`${testId}-bullet`}
             onClick={(e) => onClick(e, idx)}
             aria-label={ariaLabelGenerator(idx, isActive)}
             aria-controls={ariaControlsGenerator?.(idx)}

package/src/molecules/Bullets/stories/Bullets.mdx

@@ -17,9 +17,9 @@ import Bullets from '../Bullets'
 ```css
 [data-fs-bullets] {}
 
-[data-bullet-item] {}
+[data-fs-bullet] {}
 
-[data-bullet-item][aria-selected="true"] {}
+[data-fs-bullet][aria-selected="true"] {}
 ```
 
 This component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors.