react-spring-carousel 3.0.0-beta078 → 3.0.0-beta079

package/dist/types/src/useSpringCarousel.js

@@ -0,0 +1,917 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { config, useIsomorphicLayoutEffect, useSpring } from '@react-spring/web';
+import { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+import { useEventsModule } from './modules/useEventsModule';
+import { useDrag } from '@use-gesture/react';
+import { useThumbsModule } from './modules/useThumbsModule';
+import ResizeObserver from 'resize-observer-polyfill';
+import { useFullscreenModule } from './modules/useFullscreenModule';
+function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = 'x', itemsPerSlide: _itemsPerSlide = 1, slideType = 'fixed', gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = 'x', disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, animateWhenActiveItemChange = true, getControllerRef, }) {
+    const itemsPerSlide = _itemsPerSlide > items.length ? items.length : _itemsPerSlide;
+    const resizeByPropChange = useRef(false);
+    const draggingSlideTreshold = useRef(_draggingSlideTreshold ?? 0);
+    const slideActionType = useRef('initial');
+    const slideModeType = useRef('initial');
+    /**
+     * After the user hits start/end edges of the carousel,
+     * we check where the user is going. This is useful
+     * to correctly resize the carousel when the carousel is going
+     * backward after reaching the last item in fluid slide mode
+     */
+    const directionAfterReachingEdges = useRef('initial');
+    const activeItem = useRef(initialActiveItem);
+    const firstItemReached = useRef(initialActiveItem === 0);
+    const lastItemReached = useRef(slideType === 'fixed' && initialActiveItem === items.length - 1);
+    const mainCarouselWrapperRef = useRef(null);
+    const carouselTrackWrapperRef = useRef(null);
+    const isFirstMount = useRef(true);
+    const prevTotalScrollValue = useRef(0);
+    const prevWindowWidth = useRef(0);
+    const prevSlidedValue = useRef(0);
+    const prevWithLoop = useRef(withLoop);
+    const prevSlideType = useRef(slideType);
+    const prevFreeScroll = useRef(freeScroll);
+    const windowIsHidden = useRef(false);
+    const getItems = useCallback(() => {
+        if (withLoop) {
+            return [
+                ...items.map((i) => ({
+                    ...i,
+                    id: `prev-repeated-item-${i.id}`,
+                })),
+                ...items,
+                ...items.map((i) => ({
+                    ...i,
+                    id: `next-repeated-item-${i.id}`,
+                })),
+            ];
+        }
+        return [...items];
+    }, [items, withLoop]);
+    const internalItems = getItems();
+    const [spring, setSpring] = useSpring(() => ({
+        val: 0,
+        pause: !init,
+        onChange: ({ value }) => {
+            if (freeScroll && mainCarouselWrapperRef.current) {
+                if (carouselSlideAxis === 'x') {
+                    mainCarouselWrapperRef.current.scrollLeft = Math.abs(value.val);
+                }
+                else {
+                    mainCarouselWrapperRef.current.scrollTop = Math.abs(value.val);
+                }
+                setStartEndItemReachedOnFreeScroll();
+            }
+            else if (carouselTrackWrapperRef.current) {
+                if (carouselSlideAxis === 'x') {
+                    carouselTrackWrapperRef.current.style.transform = `translate3d(${value.val}px, 0px,0px)`;
+                }
+                else {
+                    carouselTrackWrapperRef.current.style.transform = `translate3d(0px,${value.val}px,0px)`;
+                }
+            }
+        },
+    }), [freeScroll]);
+    const { emitEvent, useListenToCustomEvent } = useEventsModule();
+    const { thumbsFragment, handleScroll } = useThumbsModule({
+        withThumbs: !!withThumbs,
+        thumbsSlideAxis,
+        prepareThumbsData,
+        items: items,
+        renderThumbFnProps: {
+            getIsActiveItem,
+            getIsPrevItem,
+            useListenToCustomEvent,
+            getIsNextItem,
+        },
+    });
+    const { enterFullscreen, exitFullscreen, getIsFullscreen } = useFullscreenModule({
+        mainCarouselWrapperRef,
+        handleResize: () => adjustCarouselWrapperPosition(),
+        onFullScreenChange: (val) => {
+            emitEvent({
+                eventName: 'onFullscreenChange',
+                isFullscreen: val,
+            });
+        },
+    });
+    function getItemStyles(isLastItem) {
+        if (slideType === 'fixed' && !freeScroll) {
+            return {
+                marginRight: `${isLastItem ? 0 : gutter}px`,
+                flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)`,
+            };
+        }
+        return {
+            ...{ marginRight: `${isLastItem ? 0 : gutter}px` },
+        };
+    }
+    function getSlideValue() {
+        const carouselItem = mainCarouselWrapperRef.current?.querySelector('.use-spring-carousel-item');
+        if (!carouselItem) {
+            throw Error('No carousel items available!');
+        }
+        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
+    }
+    function slideToItem({ from, to, nextActiveItem, immediate = false, slideMode }) {
+        slideModeType.current = slideMode;
+        if (typeof nextActiveItem === 'number') {
+            if (!freeScroll) {
+                activeItem.current = nextActiveItem;
+            }
+            emitEvent({
+                eventName: 'onSlideStartChange',
+                slideActionType: slideActionType.current,
+                slideMode: slideModeType.current,
+                nextItem: {
+                    startReached: firstItemReached.current,
+                    endReached: lastItemReached.current,
+                    index: freeScroll ? -1 : activeItem.current,
+                    id: freeScroll ? '' : items[activeItem.current].id,
+                },
+            });
+        }
+        prevSlidedValue.current = to;
+        setSpring.start({
+            immediate,
+            from: {
+                val: from,
+            },
+            to: {
+                val: to,
+            },
+            config: {
+                ...config.default,
+                velocity: spring.val.velocity,
+            },
+            onRest(value) {
+                if (!immediate && value.finished) {
+                    emitEvent({
+                        eventName: 'onSlideChange',
+                        slideActionType: slideActionType.current,
+                        slideMode: slideModeType.current,
+                        currentItem: {
+                            startReached: firstItemReached.current,
+                            endReached: lastItemReached.current,
+                            index: freeScroll ? -1 : activeItem.current,
+                            id: freeScroll ? '' : items[activeItem.current].id,
+                        },
+                    });
+                }
+            },
+        });
+        if (withThumbs && !immediate) {
+            handleScroll(activeItem.current);
+        }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    function getTotalScrollValue() {
+        if (withLoop) {
+            return getSlideValue() * items.length;
+        }
+        return Math.round(Number(carouselTrackWrapperRef.current?.[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+            carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] -
+            startEndGutter * 2);
+    }
+    function getAnimatedWrapperStyles() {
+        const percentValue = `calc(100% - ${startEndGutter * 2}px)`;
+        return {
+            width: carouselSlideAxis === 'x' ? percentValue : '100%',
+            height: carouselSlideAxis === 'y' ? percentValue : '100%',
+        };
+    }
+    function getCarouselItemWidth() {
+        const carouselItem = carouselTrackWrapperRef.current?.querySelector('.use-spring-carousel-item');
+        if (!carouselItem) {
+            throw Error('No carousel items available!');
+        }
+        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
+    }
+    function setPosition(v) {
+        const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top';
+        const ref = carouselTrackWrapperRef.current;
+        if (!ref)
+            return;
+        if (withLoop) {
+            ref.style.top = '0px';
+            ref.style.left = '0px';
+            ref.style[positionProperty] = `-${v - startEndGutter}px`;
+            firstItemReached.current = false;
+            lastItemReached.current = false;
+        }
+        else {
+            ref.style.left = '0px';
+            ref.style.top = '0px';
+        }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    function adjustCarouselWrapperPosition(shouldResetPosition = false) {
+        if (carouselTrackWrapperRef.current && shouldResetPosition) {
+            carouselTrackWrapperRef.current.style.transform = `translate3d(0px, 0px,0px)`;
+            carouselTrackWrapperRef.current.style.left = `0`;
+            carouselTrackWrapperRef.current.style.top = `0`;
+        }
+        if (slideType === 'fixed') {
+            if (initialStartingPosition === 'center') {
+                setPosition(getCarouselItemWidth() * items.length -
+                    getSlideValue() * Math.round((itemsPerSlide - 1) / 2));
+            }
+            else if (initialStartingPosition === 'end') {
+                setPosition(getCarouselItemWidth() * items.length - getSlideValue() * Math.round(itemsPerSlide - 1));
+            }
+            else {
+                setPosition(getCarouselItemWidth() * items.length);
+            }
+        }
+        if (slideType === 'fluid') {
+            /**
+             * User reached the last item and now is resizing the container that becomes smaller/bigger.
+             * Example: on mobile devices the user rotates the device
+             */
+            if (lastItemReached.current &&
+                getTotalScrollValue() !== Math.abs(prevSlidedValue.current) &&
+                !withLoop) {
+                const newVal = -getTotalScrollValue();
+                prevSlidedValue.current = newVal;
+                setSpring.start({
+                    immediate: true,
+                    val: prevSlidedValue.current,
+                });
+                return;
+            }
+            if (Math.abs(prevSlidedValue.current) > 0 &&
+                getTotalScrollValue() !== Math.abs(prevSlidedValue.current) &&
+                !withLoop &&
+                !freeScroll &&
+                directionAfterReachingEdges.current === 'backward') {
+                const diff = prevTotalScrollValue.current - getTotalScrollValue();
+                const next = prevSlidedValue.current + diff;
+                setSpring.start({
+                    immediate: true,
+                    val: next,
+                });
+                return () => {
+                    prevSlidedValue.current = next;
+                };
+            }
+            return;
+        }
+        if (!freeScroll && slideType === 'fixed') {
+            const nextValue = -(getSlideValue() * activeItem.current);
+            /**
+             * Here we make sure to always show the latest item as the
+             * latest item visible in the carousel viewport.
+             */
+            if (Math.abs(nextValue) > getTotalScrollValue() && !withLoop) {
+                const val = -getTotalScrollValue();
+                lastItemReached.current = true;
+                prevSlidedValue.current = val;
+                setSpring.start({
+                    immediate: true,
+                    val: prevSlidedValue.current,
+                });
+            }
+            else {
+                prevSlidedValue.current = nextValue;
+                setSpring.start({
+                    immediate: true,
+                    val: nextValue,
+                });
+            }
+            setTimeout(() => {
+                resizeByPropChange.current = false;
+            }, 0);
+        }
+    }
+    function getFromValue() {
+        if (freeScroll && mainCarouselWrapperRef.current) {
+            return mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
+        }
+        return spring.val.get();
+    }
+    function getToValue(type, index) {
+        if (freeScroll && type === 'next') {
+            const next = prevSlidedValue.current + getSlideValue();
+            if (next > getTotalScrollValue()) {
+                return getTotalScrollValue();
+            }
+            return next;
+        }
+        if (freeScroll && type === 'prev') {
+            const next = prevSlidedValue.current - getSlideValue();
+            if (next < 0) {
+                return 0;
+            }
+            return next;
+        }
+        if (type === 'next') {
+            if (typeof index === 'number') {
+                return -(index * getSlideValue());
+            }
+            return prevSlidedValue.current - getSlideValue();
+        }
+        if (typeof index === 'number') {
+            return -(index * getSlideValue());
+        }
+        return prevSlidedValue.current + getSlideValue();
+    }
+    function slideToPrevItem({ type, index, immediate }) {
+        if (!init || windowIsHidden.current || (firstItemReached.current && !withLoop))
+            return;
+        if (lastItemReached.current) {
+            directionAfterReachingEdges.current = 'backward';
+        }
+        slideActionType.current = 'prev';
+        lastItemReached.current = false;
+        const nextItem = typeof index === 'number' ? index : activeItem.current - 1;
+        if (freeScroll) {
+            setStartEndItemReachedOnFreeScroll();
+        }
+        if (!withLoop) {
+            const nextItemWillExceed = freeScroll
+                ? getToValue('prev', index) - getSlideValue() / 3 < 0
+                : getToValue('prev', index) + getSlideValue() / 3 > 0;
+            if (firstItemReached.current)
+                return;
+            if (nextItemWillExceed) {
+                firstItemReached.current = true;
+                lastItemReached.current = false;
+                slideToItem({
+                    slideMode: type,
+                    from: getFromValue(),
+                    to: 0,
+                    nextActiveItem: 0,
+                    immediate,
+                });
+                return;
+            }
+        }
+        if (withLoop && (firstItemReached.current || nextItem < 0)) {
+            firstItemReached.current = false;
+            lastItemReached.current = true;
+            slideToItem({
+                slideMode: type,
+                from: getFromValue() - getSlideValue() * items.length,
+                to: -(getSlideValue() * items.length) + getSlideValue(),
+                nextActiveItem: items.length - 1,
+                immediate,
+            });
+            return;
+        }
+        if (nextItem === 0) {
+            firstItemReached.current = true;
+        }
+        if (nextItem === items.length - 1 || nextItem === -1) {
+            lastItemReached.current = true;
+        }
+        slideToItem({
+            slideMode: type,
+            from: getFromValue(),
+            to: getToValue('prev', index),
+            nextActiveItem: nextItem,
+            immediate,
+        });
+    }
+    function slideToNextItem({ type, index, immediate }) {
+        if (!init || windowIsHidden.current || (lastItemReached.current && !withLoop))
+            return;
+        if (firstItemReached.current) {
+            directionAfterReachingEdges.current = 'forward';
+        }
+        slideActionType.current = 'next';
+        firstItemReached.current = false;
+        const nextItem = index || activeItem.current + 1;
+        if (freeScroll) {
+            setStartEndItemReachedOnFreeScroll();
+        }
+        if (!withLoop) {
+            const nextItemWillExceed = Math.abs(getToValue('next', index)) > getTotalScrollValue() - getSlideValue() / 3;
+            if (lastItemReached.current)
+                return;
+            if (nextItemWillExceed) {
+                firstItemReached.current = false;
+                lastItemReached.current = true;
+                slideToItem({
+                    slideMode: type,
+                    from: getFromValue(),
+                    to: freeScroll ? getTotalScrollValue() : -getTotalScrollValue(),
+                    nextActiveItem: nextItem,
+                    immediate,
+                });
+                return;
+            }
+        }
+        if (withLoop && (lastItemReached.current || nextItem > items.length - 1)) {
+            lastItemReached.current = false;
+            firstItemReached.current = true;
+            slideToItem({
+                slideMode: type,
+                from: getFromValue() + getSlideValue() * items.length,
+                to: 0,
+                nextActiveItem: 0,
+                immediate,
+            });
+            return;
+        }
+        if (nextItem === 0) {
+            firstItemReached.current = true;
+        }
+        if (nextItem === items.length - 1) {
+            lastItemReached.current = true;
+        }
+        slideToItem({
+            slideMode: type,
+            from: getFromValue(),
+            to: getToValue('next', index),
+            nextActiveItem: nextItem,
+            immediate,
+        });
+    }
+    function setDraggingSliderTreshold() {
+        if (_draggingSlideTreshold) {
+            draggingSlideTreshold.current = _draggingSlideTreshold;
+        }
+        else {
+            draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2);
+        }
+    }
+    function initializeCarousel() {
+        if (!isFirstMount.current && carouselTrackWrapperRef.current) {
+            prevTotalScrollValue.current = getTotalScrollValue();
+            prevWithLoop.current = withLoop;
+            prevSlideType.current = slideType;
+            prevFreeScroll.current = freeScroll;
+            prevWindowWidth.current = window.innerWidth;
+            prevSlidedValue.current = 0;
+            internalSlideToItem({ id: 0, immediate: true, shouldReset: true });
+            setDraggingSliderTreshold();
+            adjustCarouselWrapperPosition();
+        }
+    }
+    const enableDrag = (init && !disableGestures && !freeScroll) || (!!freeScroll && !!enableFreeScrollDrag);
+    const bindDrag = useDrag((state) => {
+        const isDragging = state.dragging;
+        const movement = state.offset[carouselSlideAxis === 'x' ? 0 : 1];
+        const currentMovement = state.movement[carouselSlideAxis === 'x' ? 0 : 1];
+        const direction = state.direction[carouselSlideAxis === 'x' ? 0 : 1];
+        const prevItemTreshold = currentMovement > draggingSlideTreshold.current;
+        const nextItemTreshold = currentMovement < -draggingSlideTreshold.current;
+        const tot = getTotalScrollValue();
+        if (isDragging) {
+            if (direction > 0) {
+                slideActionType.current = 'prev';
+            }
+            else {
+                slideActionType.current = 'next';
+            }
+            emitEvent({
+                ...state,
+                eventName: 'onDrag',
+                slideActionType: slideActionType.current,
+            });
+            if (freeScroll) {
+                if (movement > 0) {
+                    setSpring.start({
+                        from: {
+                            val: getFromValue(),
+                        },
+                        to: {
+                            val: 0,
+                        },
+                        config: {
+                            velocity: state.velocity,
+                            friction: 50,
+                            tension: 1000,
+                        },
+                    });
+                    state.cancel();
+                    return;
+                }
+                setSpring.start({
+                    from: {
+                        val: getFromValue(),
+                    },
+                    to: {
+                        val: -movement,
+                    },
+                    config: {
+                        velocity: state.velocity,
+                        friction: 50,
+                        tension: 1000,
+                    },
+                });
+                return;
+            }
+            setSpring.start({
+                val: movement,
+                config: {
+                    velocity: state.velocity,
+                    friction: 50,
+                    tension: 1000,
+                },
+            });
+            if (slideWhenThresholdIsReached && nextItemTreshold) {
+                slideToNextItem({ type: 'drag' });
+                state.cancel();
+            }
+            else if (slideWhenThresholdIsReached && prevItemTreshold) {
+                slideToPrevItem({ type: 'drag' });
+                state.cancel();
+            }
+            const res = tot - Math.abs(movement);
+            if (res < -(getSlideValue() * 2)) {
+                state.cancel();
+            }
+            return;
+        }
+        if (state.last && freeScroll && movement > 0) {
+            setSpring.start({
+                from: {
+                    val: getFromValue(),
+                },
+                to: {
+                    val: 0,
+                },
+                config: {
+                    velocity: state.velocity,
+                    friction: 50,
+                    tension: 1000,
+                },
+            });
+            return;
+        }
+        if (state.last && !state.canceled && freeScroll) {
+            if (slideActionType.current === 'prev') {
+                slideToPrevItem({ type: 'drag' });
+            }
+            if (slideActionType.current === 'next') {
+                slideToNextItem({ type: 'drag' });
+            }
+        }
+        if (state.last && !state.canceled && !freeScroll) {
+            if (nextItemTreshold) {
+                if (!withLoop && lastItemReached.current) {
+                    setSpring.start({
+                        val: -getTotalScrollValue(),
+                        config: {
+                            ...config.default,
+                            velocity: state.velocity,
+                        },
+                    });
+                }
+                else {
+                    slideToNextItem({ type: 'drag' });
+                }
+            }
+            else if (prevItemTreshold) {
+                if (!withLoop && firstItemReached.current) {
+                    setSpring.start({
+                        val: 0,
+                        config: {
+                            ...config.default,
+                            velocity: state.velocity,
+                        },
+                    });
+                }
+                else {
+                    slideToPrevItem({ type: 'drag' });
+                }
+            }
+            else {
+                setSpring.start({
+                    val: prevSlidedValue.current,
+                    config: {
+                        ...config.default,
+                        velocity: state.velocity,
+                    },
+                });
+            }
+        }
+        if (state.last && state.canceled) {
+            setSpring.start({
+                val: prevSlidedValue.current,
+                config: {
+                    ...config.default,
+                    velocity: state.velocity,
+                },
+            });
+        }
+    }, {
+        enabled: enableDrag,
+        axis: carouselSlideAxis,
+        from: () => {
+            if (freeScroll && mainCarouselWrapperRef.current) {
+                return [
+                    -mainCarouselWrapperRef.current.scrollLeft,
+                    -mainCarouselWrapperRef.current.scrollTop,
+                ];
+            }
+            if (carouselSlideAxis === 'x') {
+                return [spring.val.get(), spring.val.get()];
+            }
+            return [spring.val.get(), spring.val.get()];
+        },
+    });
+    function getWrapperOverflowStyles() {
+        if (freeScroll) {
+            if (carouselSlideAxis === 'x') {
+                return {
+                    overflowX: 'auto',
+                };
+            }
+            return {
+                overflowY: 'auto',
+            };
+        }
+        return {};
+    }
+    function setStartEndItemReachedOnFreeScroll() {
+        if (mainCarouselWrapperRef.current) {
+            prevSlidedValue.current =
+                mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
+            if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] === 0) {
+                firstItemReached.current = true;
+                lastItemReached.current = false;
+            }
+            if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] >
+                0 &&
+                mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] <
+                    getTotalScrollValue()) {
+                firstItemReached.current = false;
+                lastItemReached.current = false;
+            }
+            if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] ===
+                getTotalScrollValue()) {
+                firstItemReached.current = false;
+                lastItemReached.current = true;
+            }
+        }
+    }
+    function getScrollHandlers() {
+        if (freeScroll) {
+            return {
+                onWheel() {
+                    spring.val.stop();
+                    setStartEndItemReachedOnFreeScroll();
+                },
+            };
+        }
+        return {};
+    }
+    function findItemIndex(id, error) {
+        let itemIndex = 0;
+        if (typeof id === 'string') {
+            itemIndex = items.findIndex((item) => item.id === id);
+        }
+        else {
+            itemIndex = id;
+        }
+        if (itemIndex < 0 || itemIndex >= items.length) {
+            if (error) {
+                throw new Error(error);
+            }
+            console.error(`The item doesn't exist; check that the id provided - ${id} - is correct.`);
+            itemIndex = -1;
+        }
+        return itemIndex;
+    }
+    function internalSlideToItem({ id, immediate, shouldReset, type }) {
+        if (!init || windowIsHidden.current)
+            return;
+        firstItemReached.current = false;
+        lastItemReached.current = false;
+        const itemIndex = findItemIndex(id, "The item you want to slide to doesn't exist; check the provided id.");
+        if (itemIndex === activeItem.current && !shouldReset) {
+            return;
+        }
+        const currentItem = findItemIndex(items[activeItem.current].id);
+        const newActiveItem = findItemIndex(items[itemIndex].id);
+        if (newActiveItem > currentItem) {
+            slideToNextItem({
+                type: type || shouldReset ? 'initial' : 'click',
+                index: newActiveItem,
+                immediate,
+            });
+        }
+        else {
+            slideToPrevItem({
+                type: type || shouldReset ? 'initial' : 'click',
+                index: newActiveItem,
+                immediate,
+            });
+        }
+    }
+    function getIsNextItem(id) {
+        const itemIndex = findItemIndex(id, "The item doesn't exist; check the provided id.");
+        const _activeItem = activeItem.current;
+        if (withLoop && _activeItem === items.length - 1) {
+            return itemIndex === 0;
+        }
+        return itemIndex === _activeItem + 1;
+    }
+    function getIsPrevItem(id) {
+        const itemIndex = findItemIndex(id, "The item doesn't exist; check the provided id.");
+        const _activeItem = activeItem.current;
+        if (withLoop && _activeItem === 0) {
+            return itemIndex === items.length - 1;
+        }
+        return itemIndex === _activeItem - 1;
+    }
+    function getIsActiveItem(id) {
+        return (findItemIndex(id, "The item you want to check doesn't exist; check the provided id.") ===
+            activeItem.current);
+    }
+    function getTouchAction() {
+        if (disableGestures) {
+            return 'unset';
+        }
+        if (carouselSlideAxis === 'x') {
+            return 'pan-y';
+        }
+        return 'pan-x';
+    }
+    const res = freeScroll
+        ? {
+            useListenToCustomEvent,
+            enterFullscreen,
+            exitFullscreen,
+            getIsFullscreen,
+            slideToPrevItem: (animate = true) => {
+                slideToPrevItem({
+                    type: 'click',
+                    immediate: !animate,
+                });
+            },
+            slideToNextItem: (animate = true) => {
+                slideToNextItem({
+                    type: 'click',
+                    immediate: !animate,
+                });
+            },
+        }
+        : {
+            useListenToCustomEvent,
+            enterFullscreen,
+            exitFullscreen,
+            getIsFullscreen,
+            slideToPrevItem: (animate = true) => {
+                slideToPrevItem({
+                    type: 'click',
+                    immediate: !animate,
+                });
+            },
+            slideToNextItem: (animate = true) => {
+                slideToNextItem({
+                    type: 'click',
+                    immediate: !animate,
+                });
+            },
+            slideToItem: (id, animate = true) => {
+                internalSlideToItem({ id, immediate: !animate });
+            },
+            getIsNextItem,
+            getIsPrevItem,
+            getIsActiveItem,
+        };
+    // uwc-debug-below
+    useIsomorphicLayoutEffect(() => {
+        /**
+         * Set initial track position
+         */
+        if (carouselTrackWrapperRef.current && init) {
+            resizeByPropChange.current = true;
+            initializeCarousel();
+        }
+    }, [init]);
+    useEffect(() => {
+        if (activeItem.current !== initialActiveItem) {
+            internalSlideToItem({
+                id: initialActiveItem,
+                immediate: !animateWhenActiveItemChange,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialActiveItem]);
+    useEffect(() => {
+        if (init) {
+            if (initialActiveItem > items.length - 1) {
+                throw new Error(`initialActiveItem (${initialActiveItem}) is greater than the total quantity available items (${items.length}).`);
+            }
+            if (itemsPerSlide > items.length) {
+                console.warn(`itemsPerSlide (${itemsPerSlide}) is greater than the total quantity available items (${items.length}). Fallback to ${items.length})`);
+            }
+        }
+    }, [initialActiveItem, items.length, itemsPerSlide, init]);
+    useEffect(() => {
+        prevWindowWidth.current = window.innerWidth;
+    }, []);
+    useEffect(() => {
+        /**
+         * When these props change we reset the carousel
+         */
+        if (init) {
+            resizeByPropChange.current = true;
+            initializeCarousel();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialStartingPosition, itemsPerSlide, startEndGutter, gutter, init, withLoop]);
+    useEffect(() => {
+        if (!init)
+            return;
+        function handleVisibilityChange() {
+            if (document.hidden) {
+                windowIsHidden.current = true;
+            }
+            else {
+                windowIsHidden.current = false;
+            }
+        }
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [init]);
+    useEffect(() => {
+        if (mainCarouselWrapperRef.current) {
+            let timer;
+            const observer = new ResizeObserver(() => {
+                if (isFirstMount.current) {
+                    isFirstMount.current = false;
+                    return;
+                }
+                if (windowIsHidden.current)
+                    return;
+                if (!resizeByPropChange.current) {
+                    prevWindowWidth.current = window.innerWidth;
+                    const cb = adjustCarouselWrapperPosition();
+                    window.clearTimeout(timer);
+                    timer = setTimeout(() => {
+                        prevTotalScrollValue.current = getTotalScrollValue();
+                        if (typeof cb === 'function') {
+                            cb();
+                        }
+                    }, 100);
+                }
+            });
+            observer.observe(mainCarouselWrapperRef.current);
+            return () => {
+                observer.disconnect();
+            };
+        }
+    }, [adjustCarouselWrapperPosition, getTotalScrollValue]);
+    useEffect(() => {
+        if (getControllerRef) {
+            getControllerRef({
+                slideToNextItem: res.slideToNextItem,
+                slideToPrevItem: res.slideToPrevItem,
+                slideToItem: res?.slideToItem,
+            });
+        }
+    }, [getControllerRef, res.slideToItem, res.slideToNextItem, res.slideToPrevItem]);
+    const _thumbsFragment = _jsx(Context.Provider, { value: res, children: thumbsFragment });
+    const carouselFragment = (_jsx(Context.Provider, { value: res, children: _jsx("div", { className: "use-spring-carousel-main-wrapper", ref: mainCarouselWrapperRef, ...getScrollHandlers(), style: {
+                display: 'flex',
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+                ...getWrapperOverflowStyles(),
+            }, children: _jsxs("div", { className: "use-spring-carousel-track-wrapper", ref: carouselTrackWrapperRef, ...bindDrag(), style: {
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column',
+                    touchAction: getTouchAction(),
+                    ...getAnimatedWrapperStyles(),
+                }, children: [(freeScroll || !withLoop) && startEndGutter ? (_jsx("div", { style: {
+                            flexShrink: 0,
+                            width: startEndGutter,
+                        } })) : null, internalItems.map((item, index) => {
+                        return (_jsx("div", { className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: {
+                                display: 'flex',
+                                position: 'relative',
+                                flex: '1',
+                                ...getItemStyles(index ===
+                                    internalItems.findIndex((i) => i.id === internalItems[internalItems.length - 1].id)),
+                            }, children: typeof item.renderItem === 'function'
+                                ? item.renderItem({
+                                    getIsActiveItem,
+                                    getIsNextItem,
+                                    getIsPrevItem,
+                                    useListenToCustomEvent,
+                                })
+                                : item.renderItem }, `${item.id}-${index}`));
+                    }), (freeScroll || !withLoop) && startEndGutter ? (_jsx("div", { style: {
+                            flexShrink: 0,
+                            width: startEndGutter,
+                        } })) : null] }) }) }));
+    return { ...res, carouselFragment, thumbsFragment: _thumbsFragment };
+}
+const Context = createContext(undefined);
+function useSpringCarouselContext() {
+    const context = useContext(Context);
+    if (!context) {
+        throw new Error('useSpringCarouselContext must be used within the carousel.');
+    }
+    return context;
+}
+export { useSpringCarousel, useSpringCarouselContext };
+//# sourceMappingURL=useSpringCarousel.js.map