@faststore/components 2.0.123-alpha.0 → 2.0.128-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/hooks/index.d.ts +3 -0
  2. package/dist/hooks/index.js +2 -0
  3. package/dist/hooks/index.js.map +1 -1
  4. package/dist/hooks/useSlideVisibility.d.ts +9 -0
  5. package/dist/hooks/useSlideVisibility.js +29 -0
  6. package/dist/hooks/useSlideVisibility.js.map +1 -0
  7. package/dist/hooks/useSlider.d.ts +64 -0
  8. package/dist/hooks/useSlider.js +103 -0
  9. package/dist/hooks/useSlider.js.map +1 -0
  10. package/dist/index.d.ts +2 -0
  11. package/dist/index.js +1 -0
  12. package/dist/index.js.map +1 -1
  13. package/dist/molecules/Carousel/Carousel.d.ts +54 -0
  14. package/dist/molecules/Carousel/Carousel.js +184 -0
  15. package/dist/molecules/Carousel/Carousel.js.map +1 -0
  16. package/dist/molecules/Carousel/CarouselBullets.d.ts +35 -0
  17. package/dist/molecules/Carousel/CarouselBullets.js +12 -0
  18. package/dist/molecules/Carousel/CarouselBullets.js.map +1 -0
  19. package/dist/molecules/Carousel/CarouselItem.d.ts +11 -0
  20. package/dist/molecules/Carousel/CarouselItem.js +18 -0
  21. package/dist/molecules/Carousel/CarouselItem.js.map +1 -0
  22. package/dist/molecules/Carousel/index.d.ts +6 -0
  23. package/dist/molecules/Carousel/index.js +4 -0
  24. package/dist/molecules/Carousel/index.js.map +1 -0
  25. package/package.json +2 -2
  26. package/src/hooks/index.ts +10 -0
  27. package/src/hooks/useSlideVisibility.ts +59 -0
  28. package/src/hooks/useSlider.ts +209 -0
  29. package/src/index.ts +12 -0
  30. package/src/molecules/Carousel/Carousel.tsx +396 -0
  31. package/src/molecules/Carousel/CarouselBullets.tsx +90 -0
  32. package/src/molecules/Carousel/CarouselItem.tsx +52 -0
  33. package/src/molecules/Carousel/index.ts +8 -0
@@ -3,3 +3,6 @@ export { useFadeEffect } from './useFadeEffect';
3
3
  export { useTrapFocus } from './useTrapFocus';
4
4
  export { useSearch } from './useSearch';
5
5
  export { useScrollDirection } from './useScrollDirection';
6
+ export { useSlider } from './useSlider';
7
+ export type { UseSliderArgs, SliderState, SliderDispatch, SlideDirection, } from './useSlider';
8
+ export { useSlideVisibility } from './useSlideVisibility';
@@ -3,4 +3,6 @@ export { useFadeEffect } from './useFadeEffect';
3
3
  export { useTrapFocus } from './useTrapFocus';
4
4
  export { useSearch } from './useSearch';
5
5
  export { useScrollDirection } from './useScrollDirection';
6
+ export { useSlider } from './useSlider';
7
+ export { useSlideVisibility } from './useSlideVisibility';
6
8
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAuB,KAAK,EAAE,MAAM,cAAc,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAuB,KAAK,EAAE,MAAM,cAAc,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAOvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA"}
@@ -0,0 +1,9 @@
1
+ export interface UseSlideVisibilityArgs {
2
+ currentSlide: number;
3
+ itemsPerPage: number;
4
+ totalItems: number;
5
+ }
6
+ export declare const useSlideVisibility: ({ currentSlide, itemsPerPage, totalItems, }: UseSlideVisibilityArgs) => {
7
+ shouldRenderItem: (index: number) => boolean;
8
+ isItemVisible: (index: number) => boolean;
9
+ };
@@ -0,0 +1,29 @@
1
+ import { useRef, useEffect } from 'react';
2
+ function isSlideVisible({ itemsPerPage, currentSlide, slideIdx, totalItems, }) {
3
+ const isClonedSlide = currentSlide < 0 || currentSlide >= totalItems;
4
+ const isVisible = slideIdx >= currentSlide && slideIdx < currentSlide + itemsPerPage;
5
+ return isClonedSlide || isVisible;
6
+ }
7
+ export const useSlideVisibility = ({ currentSlide, itemsPerPage, totalItems, }) => {
8
+ /** Keeps track of slides that have been visualized before.
9
+ * We want to keep rendering them because the issue is mostly rendering
10
+ * slides that might never be viewed; On the other hand, hiding slides
11
+ * that were visible causes visual glitches */
12
+ const visitedSlides = useRef(new Set());
13
+ useEffect(() => {
14
+ for (let i = 0; i < itemsPerPage; i++) {
15
+ visitedSlides.current.add(currentSlide + i);
16
+ }
17
+ }, [currentSlide, itemsPerPage]);
18
+ const isItemVisible = (index) => isSlideVisible({
19
+ slideIdx: index,
20
+ currentSlide,
21
+ itemsPerPage,
22
+ totalItems,
23
+ });
24
+ const shouldRenderItem = (index) => {
25
+ return visitedSlides.current.has(index) || isItemVisible(index);
26
+ };
27
+ return { shouldRenderItem, isItemVisible };
28
+ };
29
+ //# sourceMappingURL=useSlideVisibility.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSlideVisibility.js","sourceRoot":"","sources":["../../src/hooks/useSlideVisibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAezC,SAAS,cAAc,CAAC,EACtB,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,UAAU,GACS;IACnB,MAAM,aAAa,GAAG,YAAY,GAAG,CAAC,IAAI,YAAY,IAAI,UAAU,CAAA;IACpE,MAAM,SAAS,GACb,QAAQ,IAAI,YAAY,IAAI,QAAQ,GAAG,YAAY,GAAG,YAAY,CAAA;IAEpE,OAAO,aAAa,IAAI,SAAS,CAAA;AACnC,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,YAAY,EACZ,YAAY,EACZ,UAAU,GACa,EAAE,EAAE;IAC3B;;;kDAG8C;IAC9C,MAAM,aAAa,GAAG,MAAM,CAAc,IAAI,GAAG,EAAE,CAAC,CAAA;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,EAAE,CAAC,EAAE,EAAE;YACrC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA;SAC5C;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAA;IAEhC,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE,CACtC,cAAc,CAAC;QACb,QAAQ,EAAE,KAAK;QACf,YAAY;QACZ,YAAY;QACZ,UAAU;KACX,CAAC,CAAA;IAEJ,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE;QACzC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,CAAA;IACjE,CAAC,CAAA;IAED,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA;AAC5C,CAAC,CAAA"}
@@ -0,0 +1,64 @@
1
+ import type { Dispatch } from 'react';
2
+ import type { SwipeableProps } from 'react-swipeable';
3
+ export type SlideDirection = 'next' | 'previous';
4
+ interface NextPageAction {
5
+ type: 'NEXT_PAGE';
6
+ }
7
+ interface PreviousPageAction {
8
+ type: 'PREVIOUS_PAGE';
9
+ }
10
+ interface GoToPageAction {
11
+ type: 'GO_TO_PAGE';
12
+ payload: {
13
+ pageIndex: number;
14
+ shouldSlide: boolean;
15
+ };
16
+ }
17
+ interface StopSlideAction {
18
+ type: 'STOP_SLIDE';
19
+ }
20
+ export type Action = NextPageAction | PreviousPageAction | StopSlideAction | GoToPageAction;
21
+ export type SliderDispatch = Dispatch<Action>;
22
+ export interface SliderState {
23
+ /**
24
+ * The `currentItem` in a Slider with multiple items in a single page is
25
+ * always **the one with the lowest index** in the current page.
26
+ */
27
+ currentItem: number;
28
+ /** Currently active page */
29
+ currentPage: number;
30
+ /**
31
+ * Whether or not the Slider is currently sliding. This is useful to
32
+ * manipulate the `transition` property in a component.
33
+ */
34
+ sliding: boolean;
35
+ /** The direction in which the Slider is sliding. */
36
+ slideDirection: SlideDirection;
37
+ /** The total number of unique items in the slider. */
38
+ totalItems: number;
39
+ /** The number of items in a single page. */
40
+ itemsPerPage: number;
41
+ /** The total number of pages in the slider. */
42
+ totalPages: number;
43
+ /** Whether or not the slider is infinite. */
44
+ infinite: boolean;
45
+ }
46
+ export declare const nextPage: (current: number, total: number) => number;
47
+ export declare const previousPage: (current: number, total: number) => number;
48
+ export interface UseSliderArgs extends SwipeableProps {
49
+ /** The total number of unique items in the slider. */
50
+ totalItems: number;
51
+ /** The number of items in a single slider page. */
52
+ itemsPerPage?: number;
53
+ /** Whether or not the slider is infinite. */
54
+ infiniteMode?: boolean;
55
+ /** Whether or not slide after swiping left/right. */
56
+ shouldSlideOnSwipe?: boolean;
57
+ }
58
+ export declare const useSlider: ({ totalItems, itemsPerPage, infiniteMode, shouldSlideOnSwipe, ...swipeableConfigOverrides }: UseSliderArgs) => {
59
+ handlers: import("react-swipeable").SwipeableHandlers;
60
+ slide: (page: SlideDirection | number, dispatch: Dispatch<Action>) => void;
61
+ sliderState: SliderState;
62
+ sliderDispatch: Dispatch<Action>;
63
+ };
64
+ export {};
@@ -0,0 +1,103 @@
1
+ import { useReducer } from 'react';
2
+ import { useSwipeable } from 'react-swipeable';
3
+ export const nextPage = (current, total) => (current + 1) % total;
4
+ export const previousPage = (current, total) => (total - ((total - current + 1) % total)) % total;
5
+ function reducer(state, action) {
6
+ switch (action.type) {
7
+ case 'NEXT_PAGE': {
8
+ // If `state.infinite` is true, we need to take into account an extra
9
+ // page in the calculation. This extra page is a clone of the first page.
10
+ const adjustedTotalPages = state.infinite
11
+ ? state.totalPages + 1
12
+ : state.totalPages;
13
+ const nextPageIndex = nextPage(state.currentPage, adjustedTotalPages);
14
+ const nextItemIndex = (nextPageIndex % adjustedTotalPages) * state.itemsPerPage;
15
+ return {
16
+ ...state,
17
+ sliding: true,
18
+ slideDirection: 'next',
19
+ currentItem: nextItemIndex,
20
+ currentPage: nextPageIndex,
21
+ };
22
+ }
23
+ case 'PREVIOUS_PAGE': {
24
+ // If `state.infinite` is true, we need to take into account an extra
25
+ // page in the calculation. This extra page is a clone of the first page.
26
+ const adjustedTotalPages = state.infinite
27
+ ? state.totalPages + 1
28
+ : state.totalPages;
29
+ // If `state.infinite` is true and we're currently on page 0, we need to
30
+ // let the slider go to page -1. This -1 page is a clone of the last page.
31
+ const shouldGoToClone = state.infinite && state.currentPage === 0;
32
+ const previousPageIndex = shouldGoToClone
33
+ ? -1
34
+ : previousPage(state.currentPage, state.totalPages);
35
+ return {
36
+ ...state,
37
+ sliding: true,
38
+ slideDirection: 'previous',
39
+ currentItem: (previousPageIndex % adjustedTotalPages) * state.itemsPerPage,
40
+ currentPage: previousPageIndex,
41
+ };
42
+ }
43
+ case 'GO_TO_PAGE': {
44
+ if (action.payload.pageIndex === state.currentPage) {
45
+ return state;
46
+ }
47
+ return {
48
+ ...state,
49
+ sliding: action.payload.shouldSlide,
50
+ slideDirection: action.payload.pageIndex > state.currentPage ? 'next' : 'previous',
51
+ currentItem: (action.payload.pageIndex % state.totalPages) * state.itemsPerPage,
52
+ currentPage: action.payload.pageIndex,
53
+ };
54
+ }
55
+ case 'STOP_SLIDE':
56
+ return { ...state, sliding: false };
57
+ default:
58
+ return state;
59
+ }
60
+ }
61
+ const defaultSliderState = (totalItems, itemsPerPage, infinite) => ({
62
+ currentItem: 0,
63
+ currentPage: 0,
64
+ sliding: false,
65
+ slideDirection: 'next',
66
+ totalItems,
67
+ itemsPerPage,
68
+ totalPages: Math.ceil(totalItems / itemsPerPage),
69
+ infinite,
70
+ });
71
+ const slide = (page, dispatch) => {
72
+ if (page === 'next') {
73
+ dispatch({ type: 'NEXT_PAGE' });
74
+ }
75
+ if (page === 'previous') {
76
+ dispatch({ type: 'PREVIOUS_PAGE' });
77
+ }
78
+ if (typeof page === 'number') {
79
+ dispatch({
80
+ type: 'GO_TO_PAGE',
81
+ payload: {
82
+ pageIndex: page,
83
+ shouldSlide: true,
84
+ },
85
+ });
86
+ }
87
+ };
88
+ export const useSlider = ({ totalItems, itemsPerPage = 1, infiniteMode = false, shouldSlideOnSwipe = true, ...swipeableConfigOverrides }) => {
89
+ const [sliderState, sliderDispatch] = useReducer(reducer, undefined, () => defaultSliderState(totalItems, itemsPerPage, infiniteMode));
90
+ const handlers = useSwipeable({
91
+ onSwipedRight: () => shouldSlideOnSwipe && slide('previous', sliderDispatch),
92
+ onSwipedLeft: () => shouldSlideOnSwipe && slide('next', sliderDispatch),
93
+ trackMouse: true,
94
+ ...swipeableConfigOverrides,
95
+ });
96
+ return {
97
+ handlers,
98
+ slide,
99
+ sliderState,
100
+ sliderDispatch,
101
+ };
102
+ };
103
+ //# sourceMappingURL=useSlider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../src/hooks/useSlider.ts"],"names":[],"mappings":"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"}
package/dist/index.d.ts CHANGED
@@ -37,6 +37,8 @@ export type { AlertProps } from './molecules/Alert';
37
37
  export { BreadcrumbPure, Breadcrumb } from './molecules/Breadcrumb';
38
38
  export type { BreadcrumbPureProps, BreadcrumbProps, } from './molecules/Breadcrumb';
39
39
  export { default as BuyButton } from './molecules/BuyButton';
40
+ export { default as Carousel, CarouselItem, CarouselBullets, } from './molecules/Carousel';
41
+ export type { CarouselProps, CarouselItemProps, CarouselBulletsProps, } from './molecules/Carousel';
40
42
  export { default as CartItem, CartItemImage, CartItemSummary, } from './molecules/CartItem';
41
43
  export type { CartItemProps, CartItemImageProps, CartItemSummaryProps, } from './molecules/CartItem';
42
44
  export { default as CheckboxField } from './molecules/CheckboxField';
package/dist/index.js CHANGED
@@ -22,6 +22,7 @@ export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, }
22
22
  export { default as Alert } from './molecules/Alert';
23
23
  export { BreadcrumbPure, Breadcrumb } from './molecules/Breadcrumb';
24
24
  export { default as BuyButton } from './molecules/BuyButton';
25
+ export { default as Carousel, CarouselItem, CarouselBullets, } from './molecules/Carousel';
25
26
  export { default as CartItem, CartItemImage, CartItemSummary, } from './molecules/CartItem';
26
27
  export { default as CheckboxField } from './molecules/CheckboxField';
27
28
  export { default as IconButton } from './molecules/IconButton';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,54 @@
1
+ import type { ReactNode, PropsWithChildren } from 'react';
2
+ import type { SwipeableProps } from 'react-swipeable';
3
+ export interface CarouselProps extends SwipeableProps {
4
+ /**
5
+ * ID of the current instance of the component.
6
+ */
7
+ id?: string;
8
+ /**
9
+ * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
10
+ */
11
+ testId?: string;
12
+ /**
13
+ * Returns the value of element's class content attribute.
14
+ */
15
+ className?: string;
16
+ /**
17
+ * Whether or not the Carousel is infinite slide/scroll. Only for the `slide` variant.
18
+ * @default true
19
+ */
20
+ infiniteMode?: boolean;
21
+ /**
22
+ * Specifies which navigation elements should be visible.
23
+ * @default complete
24
+ */
25
+ controls?: 'complete' | 'navigationArrows' | 'paginationBullets';
26
+ /**
27
+ * Specifies the slide transition. Only for the `slide` variant
28
+ */
29
+ transition?: {
30
+ duration: number;
31
+ property: string;
32
+ delay?: number;
33
+ timing?: string;
34
+ };
35
+ /**
36
+ * Specifies the number of items per page.
37
+ * @default 1
38
+ */
39
+ itemsPerPage?: number;
40
+ /**
41
+ * Specifies the Carousel track variant.
42
+ * @default slide
43
+ */
44
+ variant?: 'slide' | 'scroll';
45
+ /**
46
+ * Specifies the navigation icons.
47
+ */
48
+ navigationIcons?: {
49
+ left?: ReactNode;
50
+ right?: ReactNode;
51
+ };
52
+ }
53
+ declare function Carousel({ infiniteMode, controls, testId, transition, children, className, id, variant, itemsPerPage, navigationIcons, ...swipeableConfigOverrides }: PropsWithChildren<CarouselProps>): JSX.Element;
54
+ export default Carousel;
@@ -0,0 +1,184 @@
1
+ import React, { useMemo, useRef } from 'react';
2
+ import CarouselItem from './CarouselItem';
3
+ import { useSlider } from '../../hooks';
4
+ import CarouselBullets from './CarouselBullets';
5
+ import { IconButton, Icon } from '../..';
6
+ const createTransformValues = (infinite, totalItems) => {
7
+ const transformMap = {};
8
+ const slideWidth = 100 / totalItems;
9
+ for (let idx = 0; idx < totalItems; ++idx) {
10
+ const currIdx = infinite ? idx - 1 : idx;
11
+ const transformValue = -(slideWidth * idx);
12
+ transformMap[currIdx] = transformValue;
13
+ }
14
+ return transformMap;
15
+ };
16
+ function Carousel({ infiniteMode = true, controls = 'complete', testId = 'fs-carousel', transition = {
17
+ duration: 400,
18
+ property: 'transform',
19
+ }, children, className, id = 'fs-carousel', variant = 'slide', itemsPerPage = 1, navigationIcons = undefined, ...swipeableConfigOverrides }) {
20
+ const carouselTrackRef = useRef(null);
21
+ const isSlideCarousel = variant === 'slide';
22
+ const isScrollCarousel = variant === 'scroll';
23
+ const childrenArray = React.Children.toArray(children);
24
+ const childrenCount = childrenArray.length;
25
+ const numberOfSlides = infiniteMode ? childrenCount + 2 : childrenCount;
26
+ const slidingTransition = `${transition.property} ${transition.duration}ms ${transition.timing ?? ''} ${transition.delay ?? ''}`;
27
+ const { handlers, slide, sliderState, sliderDispatch } = useSlider({
28
+ itemsPerPage,
29
+ infiniteMode,
30
+ totalItems: childrenCount,
31
+ shouldSlideOnSwipe: isSlideCarousel,
32
+ ...swipeableConfigOverrides,
33
+ });
34
+ const pagesCount = Math.ceil(childrenCount / sliderState.itemsPerPage);
35
+ const showNavigationArrows = pagesCount !== 1 &&
36
+ (controls === 'complete' || controls === 'navigationArrows');
37
+ const showPaginationBullets = pagesCount !== 1 &&
38
+ (controls === 'complete' || controls === 'paginationBullets');
39
+ const transformValues = useMemo(() => createTransformValues(infiniteMode, numberOfSlides), [numberOfSlides, infiniteMode]);
40
+ const postRenderedSlides = infiniteMode && children ? childrenArray.slice(0, 1) : [];
41
+ const preRenderedSlides = infiniteMode && children ? childrenArray.slice(childrenCount - 1) : [];
42
+ const slides = preRenderedSlides.concat(children ?? [], postRenderedSlides);
43
+ const slideCarouselTrackStyle = useMemo(() => ({
44
+ display: 'flex',
45
+ width: `${numberOfSlides * 100}%`,
46
+ transition: sliderState.sliding ? slidingTransition : undefined,
47
+ transform: `translate3d(${transformValues[sliderState.currentPage]}%, 0, 0)`,
48
+ }), [
49
+ numberOfSlides,
50
+ transformValues,
51
+ slidingTransition,
52
+ sliderState.sliding,
53
+ sliderState.currentPage,
54
+ ]);
55
+ const scrollCarouselTrackStyle = useMemo(() => ({
56
+ width: '100%',
57
+ display: 'block',
58
+ overflowX: 'scroll',
59
+ whiteSpace: 'nowrap',
60
+ }), []);
61
+ const carouselTrackStyle = (isSlideCarousel && slideCarouselTrackStyle) ||
62
+ (isScrollCarousel && scrollCarouselTrackStyle);
63
+ const slidePrevious = () => {
64
+ if (sliderState.sliding ||
65
+ (!infiniteMode && sliderState.currentPage === 0)) {
66
+ return;
67
+ }
68
+ slide('previous', sliderDispatch);
69
+ };
70
+ const slideNext = () => {
71
+ if (sliderState.sliding ||
72
+ (!infiniteMode && sliderState.currentPage === childrenCount - 1)) {
73
+ return;
74
+ }
75
+ slide('next', sliderDispatch);
76
+ };
77
+ const onScrollTrack = (event) => {
78
+ if (isSlideCarousel || itemsPerPage > 1) {
79
+ return;
80
+ }
81
+ const itemWidth = Number(event.currentTarget.firstElementChild?.scrollWidth);
82
+ const scrollOffset = event.currentTarget?.scrollLeft;
83
+ const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor;
84
+ const page = formatter(scrollOffset / itemWidth);
85
+ slide(page, sliderDispatch);
86
+ };
87
+ const onTransitionTrackEnd = () => {
88
+ sliderDispatch({
89
+ type: 'STOP_SLIDE',
90
+ });
91
+ if (infiniteMode && sliderState.currentItem >= childrenCount) {
92
+ sliderDispatch({
93
+ type: 'GO_TO_PAGE',
94
+ payload: {
95
+ pageIndex: 0,
96
+ shouldSlide: false,
97
+ },
98
+ });
99
+ }
100
+ if (infiniteMode && sliderState.currentItem < 0) {
101
+ sliderDispatch({
102
+ type: 'GO_TO_PAGE',
103
+ payload: {
104
+ pageIndex: sliderState.totalPages - 1,
105
+ shouldSlide: false,
106
+ },
107
+ });
108
+ }
109
+ };
110
+ const onScrollPagination = async (index, slideDirection) => {
111
+ if (slideDirection === 'previous' && sliderState.currentPage === 0) {
112
+ return;
113
+ }
114
+ if (slideDirection === 'next' &&
115
+ sliderState.currentPage === sliderState.totalPages - 1) {
116
+ return;
117
+ }
118
+ let scrollOffset;
119
+ const carouselItemsWidth = Number(carouselTrackRef.current?.firstElementChild?.clientWidth);
120
+ if (itemsPerPage > 1) {
121
+ scrollOffset = index * carouselItemsWidth * itemsPerPage;
122
+ }
123
+ else {
124
+ scrollOffset = index * carouselItemsWidth - carouselItemsWidth * 0.125;
125
+ }
126
+ carouselTrackRef.current?.scrollTo({
127
+ left: scrollOffset,
128
+ behavior: 'smooth',
129
+ });
130
+ slide(index, sliderDispatch);
131
+ };
132
+ // accessible behavior for tablist
133
+ const handleBulletsKeyDown = (event) => {
134
+ switch (event.key) {
135
+ case 'ArrowLeft': {
136
+ isSlideCarousel && slidePrevious();
137
+ isScrollCarousel &&
138
+ onScrollPagination(sliderState.currentPage - 1, 'previous');
139
+ break;
140
+ }
141
+ case 'ArrowRight': {
142
+ isSlideCarousel && slideNext();
143
+ isScrollCarousel &&
144
+ onScrollPagination(sliderState.currentPage + 1, 'next');
145
+ break;
146
+ }
147
+ case 'Home': {
148
+ slide(0, sliderDispatch);
149
+ break;
150
+ }
151
+ case 'End': {
152
+ slide(childrenCount - 1, sliderDispatch);
153
+ break;
154
+ }
155
+ default:
156
+ }
157
+ };
158
+ return (React.createElement("section", { id: id, "data-fs-carousel": true, className: className, "data-testid": testId, "aria-label": "carousel", "aria-roledescription": "carousel" },
159
+ React.createElement("div", { "data-fs-carousel-track-container": true, style: {
160
+ width: '100%',
161
+ overflow: 'hidden',
162
+ display: isScrollCarousel ? 'block' : undefined,
163
+ }, ...handlers },
164
+ 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))))),
165
+ showNavigationArrows && (React.createElement("div", { "data-fs-carousel-controls": true },
166
+ React.createElement(IconButton, { "data-fs-carousel-control": "left", "aria-controls": id, "aria-label": "previous", icon: navigationIcons?.left ?? (React.createElement(Icon, { name: "ArrowLeft", width: 20, height: 20, weight: "bold" })), onClick: () => {
167
+ isSlideCarousel && slidePrevious();
168
+ isScrollCarousel &&
169
+ onScrollPagination(sliderState.currentPage - 1, 'previous');
170
+ } }),
171
+ React.createElement(IconButton, { "data-fs-carousel-control": "right", "aria-controls": id, "aria-label": "next", icon: navigationIcons?.right ?? (React.createElement(Icon, { name: "ArrowRight", width: 20, height: 20, weight: "bold" })), onClick: () => {
172
+ isSlideCarousel && slideNext();
173
+ isScrollCarousel &&
174
+ onScrollPagination(sliderState.currentPage + 1, 'next');
175
+ } }))),
176
+ showPaginationBullets && (React.createElement(CarouselBullets, { tabIndex: 0, activeBullet: sliderState.currentPage, totalQuantity: pagesCount, onKeyDown: handleBulletsKeyDown, onClick: async (_, idx) => {
177
+ isSlideCarousel &&
178
+ !sliderState.sliding &&
179
+ slide(idx, sliderDispatch);
180
+ isScrollCarousel && onScrollPagination(idx);
181
+ }, onFocus: (event) => event.currentTarget.focus(), ariaControlsGenerator: (idx) => `carousel-item-${idx}` }))));
182
+ }
183
+ export default Carousel;
184
+ //# sourceMappingURL=Carousel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,35 @@
1
+ import type { HTMLAttributes, MouseEvent } from 'react';
2
+ import React from 'react';
3
+ export interface CarouselBulletsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role'> {
4
+ /**
5
+ * Number of bullets that should be rendered.
6
+ */
7
+ totalQuantity: number;
8
+ /**
9
+ * The currently active bullet (zero-indexed).
10
+ */
11
+ activeBullet: number;
12
+ /**
13
+ * Event handler for clicks on each bullet. The handler will be called with
14
+ * the index of the bullet that received the click.
15
+ */
16
+ onClick: (e: MouseEvent, bulletIdx: number) => void;
17
+ /**
18
+ * ID to find this component in testing tools (e.g.: cypress,
19
+ * testing-library, and jest).
20
+ */
21
+ testId?: string;
22
+ /**
23
+ * Function that should be used to generate the aria-label attribute added
24
+ * to each bullet that is inactive. It receives the bullet index as an
25
+ * argument so that it can be interpolated in the generated string.
26
+ */
27
+ ariaLabelGenerator?: (index: number, isActive: boolean) => string;
28
+ /**
29
+ * Function that should be used to generate the aria-controls attribute added
30
+ * to each bullet. It receives the bullet index as argument and should return a string.
31
+ */
32
+ ariaControlsGenerator?: (index: number) => string;
33
+ }
34
+ declare const CarouselBullets: React.ForwardRefExoticComponent<CarouselBulletsProps & React.RefAttributes<HTMLDivElement>>;
35
+ export default CarouselBullets;
@@ -0,0 +1,12 @@
1
+ import React, { forwardRef, useMemo } from 'react';
2
+ import { Button } from '../..';
3
+ const defaultAriaLabel = (idx, isActive) => isActive ? 'Current page' : `Go to page ${idx + 1}`;
4
+ const CarouselBullets = forwardRef(function Bullets({ totalQuantity, activeBullet, onClick, testId = 'fs-carousel-bullets', ariaLabelGenerator = defaultAriaLabel, ariaControlsGenerator, ...otherProps }, ref) {
5
+ const bulletIndexes = useMemo(() => Array(totalQuantity).fill(0), [totalQuantity]);
6
+ return (React.createElement("div", { ref: ref, "data-fs-carousel-bullets": true, "data-testid": testId, role: "tablist", ...otherProps }, bulletIndexes.map((_, idx) => {
7
+ const isActive = activeBullet === idx;
8
+ return (React.createElement(Button, { key: idx, role: "tab", tabIndex: -1, "data-fs-carousel-bullet": true, testId: `${testId}-bullet`, onClick: (e) => onClick(e, idx), "aria-label": ariaLabelGenerator(idx, isActive), "aria-controls": ariaControlsGenerator?.(idx), "aria-selected": isActive }));
9
+ })));
10
+ });
11
+ export default CarouselBullets;
12
+ //# sourceMappingURL=CarouselBullets.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CarouselBullets.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/CarouselBullets.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAmC9B,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,eAAe,GAAG,UAAU,CAChC,SAAS,OAAO,CACd,EACE,aAAa,EACb,YAAY,EACZ,OAAO,EACP,MAAM,GAAG,qBAAqB,EAC9B,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,6BACE,GAAG,EAAE,GAAG,mDAEK,MAAM,EACnB,IAAI,EAAC,SAAS,KACV,UAAU,IAEb,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,mCAEZ,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,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}
@@ -0,0 +1,11 @@
1
+ import type { PropsWithChildren, HTMLAttributes } from 'react';
2
+ import { SliderState } from '../../hooks';
3
+ export interface CarouselItemProps extends HTMLAttributes<HTMLLIElement> {
4
+ index: number;
5
+ totalItems: number;
6
+ state: SliderState;
7
+ infiniteMode: boolean;
8
+ isScrollCarousel: boolean;
9
+ }
10
+ declare function CarouselItem({ index, state, children, totalItems, infiniteMode, isScrollCarousel, }: PropsWithChildren<CarouselItemProps>): JSX.Element;
11
+ export default CarouselItem;
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { useSlideVisibility } from '../../hooks';
3
+ function CarouselItem({ index, state, children, totalItems, infiniteMode, isScrollCarousel, }) {
4
+ const { isItemVisible, shouldRenderItem } = useSlideVisibility({
5
+ totalItems,
6
+ currentSlide: state.currentItem,
7
+ itemsPerPage: state.itemsPerPage,
8
+ });
9
+ const style = (!isScrollCarousel && { width: '100%' }) ||
10
+ (isScrollCarousel && {
11
+ maxWidth: '60%',
12
+ display: 'inline-block',
13
+ });
14
+ const shouldDisplayItem = isScrollCarousel || shouldRenderItem(index - Number(infiniteMode));
15
+ 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));
16
+ }
17
+ export default CarouselItem;
18
+ //# sourceMappingURL=CarouselItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CarouselItem.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,kBAAkB,EAAe,MAAM,aAAa,CAAA;AAU7D,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"}
@@ -0,0 +1,6 @@
1
+ export { default } from './Carousel';
2
+ export type { CarouselProps } from './Carousel';
3
+ export { default as CarouselItem } from './CarouselItem';
4
+ export type { CarouselItemProps } from './CarouselItem';
5
+ export { default as CarouselBullets } from './CarouselBullets';
6
+ export type { CarouselBulletsProps } from './CarouselBullets';