react-spring-carousel 1.9.29-beta1 → 1.9.29-beta2

package/dist/index.es.js

@@ -1,1195 +1,2 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect, createContext, useCallback, useContext, useState } from 'react';
-import { useSpring, animated, config, useTransition } from 'react-spring';
-import { useDrag } from '@use-gesture/react';
-import { Subject } from 'rxjs';
-import screenfull from 'screenfull';
-
-function useCustomEventsModule() {
-    const eventsObserverRef = useRef(new Subject());
-    function useListenToCustomEvent(fn) {
-        useEffect(() => {
-            const subscribe = eventsObserverRef.current.subscribe(fn);
-            return () => subscribe.unsubscribe();
-        }, [fn]);
-    }
-    const emitObservable = data => {
-        eventsObserverRef.current.next(data);
-    };
-    return {
-        useListenToCustomEvent,
-        emitObservable,
-    };
-}
-
-function useFullscreenModule({ mainCarouselWrapperRef, emitObservable, handleResize, }) {
-    const isFullscreen = useRef(false);
-    useEffect(() => {
-        function handleFullscreenChange() {
-            if (document.fullscreenElement) {
-                setIsFullscreen(true);
-                emitObservable({
-                    eventName: 'onFullscreenChange',
-                    isFullscreen: true,
-                });
-                handleResize && handleResize();
-            }
-            if (!document.fullscreenElement) {
-                setIsFullscreen(false);
-                emitObservable({
-                    eventName: 'onFullscreenChange',
-                    isFullscreen: false,
-                });
-                handleResize && handleResize();
-            }
-        }
-        if (screenfull.isEnabled) {
-            screenfull.on('change', handleFullscreenChange);
-            return () => {
-                if (screenfull.isEnabled) {
-                    screenfull.off('change', handleFullscreenChange);
-                }
-            };
-        }
-    });
-    function setIsFullscreen(_isFullscreen) {
-        isFullscreen.current = _isFullscreen;
-    }
-    function getIsFullscreen() {
-        return isFullscreen.current;
-    }
-    function enterFullscreen(elementRef) {
-        if (screenfull.isEnabled) {
-            screenfull.request((elementRef || mainCarouselWrapperRef.current));
-        }
-    }
-    function exitFullscreen() {
-        screenfull.isEnabled && screenfull.exit();
-    }
-    return {
-        enterFullscreen,
-        exitFullscreen,
-        getIsFullscreen,
-    };
-}
-
-function useMount(callback) {
-    const isMounted = useRef(false);
-    useEffect(() => {
-        if (!isMounted.current) {
-            const clean = callback();
-            isMounted.current = true;
-            return () => {
-                clean && clean();
-            };
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-}
-function getIsBrowser() {
-    return typeof window !== 'undefined';
-}
-
-function useThumbsModule({ items, withThumbs, thumbsSlideAxis = 'x', springConfig, thumbsWrapperRef, prepareThumbsData, }) {
-    const internalThumbsWrapperRef = useRef(null);
-    const [thumbListStyles, setThumbListStyles] = useSpring(() => ({
-        [thumbsSlideAxis]: 0,
-        config: springConfig,
-    }));
-    useMount(() => {
-        if (withThumbs) {
-            const missingThumbs = items.some(item => !item.renderThumb);
-            if (missingThumbs) {
-                throw new Error('The renderThumb property is missing in one or more items. You need to add the renderThumb property to every item of the carousel when the prop withThumbs={true} or eventually set withThumbs={false}.');
-            }
-        }
-    });
-    function handleThumbsScroll(activeItem) {
-        function getOffsetDirection() {
-            return thumbsSlideAxis === 'x' ? 'offsetLeft' : 'offsetTop';
-        }
-        function getOffsetDimension() {
-            return thumbsSlideAxis === 'x' ? 'offsetWidth' : 'offsetHeight';
-        }
-        function getScrollDirecton() {
-            return thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop';
-        }
-        function getThumbNode() {
-            return internalThumbsWrapperRef.current.querySelector(`#thumb-${items[activeItem].id}`);
-        }
-        function getThumbOffsetPosition({ thumbNode, offsetDirection, offsetDimension, }) {
-            return thumbNode[offsetDirection] + thumbNode[offsetDimension] / 2;
-        }
-        function getThumbScrollDimension({ thumbWrapper, offsetDimension, }) {
-            return thumbWrapper[offsetDimension] / 2;
-        }
-        function getScrollFromValue({ thumbWrapper, scrollDirection, }) {
-            return thumbWrapper[scrollDirection];
-        }
-        function getScrollToValue({ thumbWrapper, thumbOffsetPosition, thumbScrollDimension, offsetDimension, }) {
-            const scrollDimensionProperty = thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight';
-            if (activeItem === items.length - 1 ||
-                thumbOffsetPosition - thumbScrollDimension >
-                    thumbWrapper[scrollDimensionProperty] - thumbWrapper[offsetDimension]) {
-                return thumbWrapper[scrollDimensionProperty] - thumbWrapper[offsetDimension];
-            }
-            if (activeItem === 0) {
-                return 0;
-            }
-            return thumbOffsetPosition - thumbScrollDimension;
-        }
-        if (thumbsWrapperRef && thumbsWrapperRef.current) {
-            internalThumbsWrapperRef.current = thumbsWrapperRef.current;
-        }
-        const thumbNode = getThumbNode();
-        if (thumbNode) {
-            const thumbWrapper = internalThumbsWrapperRef.current;
-            const offsetDirection = getOffsetDirection();
-            const offsetDimension = getOffsetDimension();
-            const scrollDirection = getScrollDirecton();
-            const thumbOffsetPosition = getThumbOffsetPosition({
-                thumbNode,
-                offsetDimension,
-                offsetDirection,
-            });
-            const thumbScrollDimension = getThumbScrollDimension({
-                thumbWrapper,
-                offsetDimension,
-            });
-            setThumbListStyles.start({
-                from: {
-                    [thumbsSlideAxis]: getScrollFromValue({
-                        thumbWrapper,
-                        scrollDirection,
-                    }),
-                },
-                to: {
-                    [thumbsSlideAxis]: getScrollToValue({
-                        thumbWrapper,
-                        thumbOffsetPosition,
-                        thumbScrollDimension,
-                        offsetDimension,
-                    }),
-                },
-                onChange: val => {
-                    if (thumbsSlideAxis === 'x') {
-                        // @ts-ignore
-                        internalThumbsWrapperRef.current.scrollLeft = val.x;
-                    }
-                    else {
-                        // @ts-ignore
-                        internalThumbsWrapperRef.current.scrollTop = val.y;
-                    }
-                },
-            });
-        }
-    }
-    function handlePrepareThumbsDate() {
-        function getPreparedItems(_items) {
-            return _items.map(i => ({
-                id: i.id,
-                renderThumb: i.renderThumb,
-            }));
-        }
-        if (prepareThumbsData) {
-            return prepareThumbsData(getPreparedItems(items));
-        }
-        return getPreparedItems(items);
-    }
-    function getScrollDirectionSpringValue() {
-        if (thumbsSlideAxis === 'x') {
-            return {
-                // @ts-ignore
-                scrollLeft: thumbListStyles.x,
-            };
-        }
-        return {
-            // @ts-ignore
-            scrollTop: thumbListStyles.y,
-        };
-    }
-    const thumbsFragment = withThumbs ? (jsx(animated.div, Object.assign({ ref: internalThumbsWrapperRef }, getScrollDirectionSpringValue(), { style: {
-            display: 'flex',
-            flex: 1,
-            position: 'relative',
-            flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column',
-            ...(thumbsSlideAxis === 'x'
-                ? { overflowX: 'auto' }
-                : {
-                    overflowY: 'auto',
-                    maxHeight: '100%',
-                }),
-        } }, { children: handlePrepareThumbsDate().map(({ id, renderThumb }) => {
-            const thumbId = `thumb-${id}`;
-            return (jsx("div", Object.assign({ id: thumbId }, { children: renderThumb }), thumbId));
-        }) }), void 0)) : null;
-    return {
-        thumbsFragment,
-        handleThumbsScroll,
-    };
-}
-
-const UseSpringCarouselContext = createContext(undefined);
-function useSpringCarouselContext() {
-    const context = useContext(UseSpringCarouselContext);
-    if (!context) {
-        throw new Error(`useSpringCarouselContext isn't being used within the useSringCarousel context; 
-    use the context only inside a component that is rendered within the Carousel.`);
-    }
-    return context;
-}
-function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 140, springConfig = config.default, shouldResizeOnWindowResize = true, withThumbs = false, enableThumbsWrapperScroll = true, carouselSlideAxis = 'x', thumbsSlideAxis = 'x', thumbsWrapperRef, prepareThumbsData, itemsPerSlide = 1, initialActiveItem = 0, initialStartingPosition = 'start', disableGestures = false, gutter = 0, startEndGutter = 0, touchAction = 'none', slideAmount, }) {
-    function getItems() {
-        if (withLoop) {
-            return [...items, ...items, ...items];
-        }
-        return items;
-    }
-    const slideActionType = useRef('next');
-    const internalItems = getItems();
-    const activeItem = useRef(initialActiveItem);
-    const mainCarouselWrapperRef = useRef(null);
-    const carouselTrackWrapperRef = useRef(null);
-    const isDragging = useRef(false);
-    const isAnimating = useRef(false);
-    const windowIsHidden = useRef(false);
-    const currentWindowWidth = useRef(0);
-    const fluidTotalWrapperScrollValue = useRef(0);
-    const slideFluidEndReached = useRef(false);
-    const currentSlidedValue = useRef(0);
-    const currentStepSlideValue = useRef(0);
-    function getCarouselItem() {
-        return carouselTrackWrapperRef.current?.querySelector('.use-spring-carousel-item');
-    }
-    const getFluidWrapperScrollValue = useCallback(() => {
-        return Math.round(Number(carouselTrackWrapperRef.current?.[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
-            carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
-    }, [carouselSlideAxis]);
-    const [carouselStyles, setCarouselStyles] = useSpring(() => ({
-        y: 0,
-        x: 0,
-        config: springConfig,
-        onRest: ({ value }) => {
-            currentSlidedValue.current = value[carouselSlideAxis];
-            currentStepSlideValue.current = value[carouselSlideAxis];
-        },
-    }));
-    const getSlideValue = useCallback(() => {
-        if (!carouselTrackWrapperRef.current) {
-            return 0;
-        }
-        const carouselItem = getCarouselItem();
-        if (!carouselItem) {
-            throw Error('No carousel items available!');
-        }
-        const itemVal = carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter;
-        if (itemsPerSlide === 'fluid' && typeof slideAmount === 'number') {
-            if (slideAmount < itemVal) {
-                throw new Error('slideAmount must be greater than the width of a single item.');
-            }
-            return slideAmount;
-        }
-        return itemVal;
-    }, [carouselSlideAxis, gutter, itemsPerSlide, slideAmount]);
-    const adjustCarouselWrapperPosition = useCallback((ref) => {
-        if (itemsPerSlide !== 'fluid' && typeof itemsPerSlide === 'number') {
-            const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top';
-            function getDefaultPositionValue() {
-                return getSlideValue() * items.length;
-            }
-            function setPosition(v) {
-                ref.style.top = '0px';
-                ref.style.left = '0px';
-                ref.style[positionProperty] = `-${v - startEndGutter}px`;
-            }
-            function setStartPosition() {
-                setPosition(getDefaultPositionValue());
-            }
-            function setCenterPosition() {
-                setPosition(getDefaultPositionValue() -
-                    getSlideValue() * Math.round((itemsPerSlide - 1) / 2));
-            }
-            function setEndPosition() {
-                setPosition(getDefaultPositionValue() -
-                    getSlideValue() * Math.round(itemsPerSlide - 1));
-            }
-            if (itemsPerSlide > 1) {
-                switch (initialStartingPosition) {
-                    default:
-                    case 'start': {
-                        setStartPosition();
-                        break;
-                    }
-                    case 'center': {
-                        setCenterPosition();
-                        break;
-                    }
-                    case 'end': {
-                        setEndPosition();
-                        break;
-                    }
-                }
-            }
-            else {
-                setStartPosition();
-            }
-        }
-    }, [
-        startEndGutter,
-        carouselSlideAxis,
-        getSlideValue,
-        initialStartingPosition,
-        items.length,
-        itemsPerSlide,
-    ]);
-    const handleResize = useCallback(() => {
-        if (window.innerWidth === currentWindowWidth.current) {
-            return;
-        }
-        currentWindowWidth.current = window.innerWidth;
-        if (itemsPerSlide === 'fluid') {
-            fluidTotalWrapperScrollValue.current = getFluidWrapperScrollValue();
-            if (slideFluidEndReached.current) {
-                setCarouselStyles.start({
-                    immediate: true,
-                    [carouselSlideAxis]: -fluidTotalWrapperScrollValue.current,
-                });
-            }
-            else {
-                const lastItem = document.querySelector('.use-spring-carousel-item:last-of-type');
-                console.log({
-                    lastItem: lastItem.offsetLeft,
-                });
-            }
-        }
-        else {
-            setCarouselStyles.start({
-                immediate: true,
-                x: 0,
-                y: 0,
-            });
-            setCarouselStyles.start({
-                immediate: true,
-                [carouselSlideAxis]: -(getSlideValue() * getCurrentActiveItem()),
-            });
-        }
-        if (withLoop) {
-            adjustCarouselWrapperPosition(carouselTrackWrapperRef.current);
-        }
-    }, [
-        adjustCarouselWrapperPosition,
-        carouselSlideAxis,
-        getSlideValue,
-        setCarouselStyles,
-        withLoop,
-        itemsPerSlide,
-        getFluidWrapperScrollValue,
-    ]);
-    // Custom modules
-    const { useListenToCustomEvent, emitObservable } = useCustomEventsModule();
-    const { enterFullscreen, exitFullscreen, getIsFullscreen } = useFullscreenModule({
-        mainCarouselWrapperRef,
-        emitObservable,
-        handleResize,
-    });
-    const { thumbsFragment: _thumbsFragment, handleThumbsScroll } = useThumbsModule({
-        withThumbs,
-        items,
-        thumbsSlideAxis,
-        springConfig,
-        thumbsWrapperRef,
-        prepareThumbsData,
-    });
-    function getCurrentSlidedValue() {
-        return carouselStyles[carouselSlideAxis].get();
-    }
-    const bindDrag = useDrag(props => {
-        const isDragging = props.dragging;
-        const movement = props.movement[carouselSlideAxis === 'x' ? 0 : 1];
-        function resetAnimation() {
-            if (itemsPerSlide === 'fluid') {
-                if (getIsFirstItem()) {
-                    slideToPrevItem();
-                }
-                else if (slideFluidEndReached.current) {
-                    setCarouselStyles.start({
-                        [carouselSlideAxis]: -fluidTotalWrapperScrollValue.current,
-                    });
-                }
-                else {
-                    setCarouselStyles.start({
-                        [carouselSlideAxis]: currentStepSlideValue.current,
-                    });
-                }
-            }
-            else {
-                setCarouselStyles.start({
-                    [carouselSlideAxis]: -(getCurrentActiveItem() * getSlideValue()),
-                });
-            }
-        }
-        if (props.first) {
-            currentSlidedValue.current = getCurrentSlidedValue();
-        }
-        if (isDragging) {
-            setIsDragging(true);
-            emitObservable({
-                eventName: 'onDrag',
-                ...props,
-            });
-            setCarouselStyles.start({
-                [carouselSlideAxis]: currentSlidedValue.current + movement,
-            });
-            const prevItemTreshold = movement > draggingSlideTreshold;
-            const nextItemTreshold = movement < -draggingSlideTreshold;
-            if (mainCarouselWrapperRef.current.getBoundingClientRect().width >=
-                items.length * getSlideValue()) {
-                slideFluidEndReached.current = true;
-            }
-            if (slideFluidEndReached.current && movement < 0) {
-                if (nextItemTreshold) {
-                    props.cancel();
-                    setCarouselStyles.start({
-                        [carouselSlideAxis]: -fluidTotalWrapperScrollValue.current,
-                    });
-                }
-            }
-            else if (nextItemTreshold) {
-                props.cancel();
-                if (!withLoop && getIsLastItem()) {
-                    resetAnimation();
-                }
-                else {
-                    slideToNextItem();
-                }
-            }
-            else if (prevItemTreshold) {
-                props.cancel();
-                if (!withLoop && getIsFirstItem()) {
-                    resetAnimation();
-                }
-                else {
-                    slideToPrevItem();
-                }
-            }
-        }
-        if (props.last && !props.pressed) {
-            resetAnimation();
-        }
-    }, {
-        enabled: !disableGestures,
-    });
-    // Perform some check on first mount
-    useMount(() => {
-        if (itemsPerSlide !== 'fluid' && !Number.isInteger(itemsPerSlide)) {
-            throw new Error(`itemsPerSlide should be an integer.`);
-        }
-        if (itemsPerSlide > items.length) {
-            throw new Error(`The itemsPerSlide prop can't be greater than the total length of the items you provide.`);
-        }
-        if (itemsPerSlide < 1) {
-            throw new Error(`The itemsPerSlide prop can't be less than 1.`);
-        }
-        if (!shouldResizeOnWindowResize) {
-            console.warn('You set shouldResizeOnWindowResize={false}; be aware that the carousel could behave in a strange way if you also use the fullscreen functionality or if you change the mobile orientation.');
-        }
-        if (initialActiveItem < 0) {
-            console.warn('The initialActiveItem cannot be less than 0.');
-        }
-        if (initialActiveItem > items.length) {
-            console.warn('The initialActiveItem cannot be greater than the total length of the items you provide.');
-        }
-    });
-    useMount(() => {
-        fluidTotalWrapperScrollValue.current = getFluidWrapperScrollValue();
-        function handleVisibilityChange() {
-            if (document.hidden) {
-                windowIsHidden.current = true;
-            }
-            else {
-                windowIsHidden.current = false;
-            }
-        }
-        if (getIsBrowser()) {
-            document.addEventListener('visibilitychange', handleVisibilityChange);
-            return () => {
-                document.removeEventListener('visibilitychange', handleVisibilityChange);
-            };
-        }
-    });
-    useMount(() => {
-        if (initialActiveItem > 0 && initialActiveItem <= items.length) {
-            slideToItem({
-                to: initialActiveItem,
-                immediate: true,
-            });
-            setActiveItem(initialActiveItem);
-        }
-    });
-    useEffect(() => {
-        if (shouldResizeOnWindowResize) {
-            window.addEventListener('resize', handleResize);
-            return () => {
-                window.removeEventListener('resize', handleResize);
-            };
-        }
-    }, [handleResize, shouldResizeOnWindowResize]);
-    useEffect(() => {
-        if (carouselTrackWrapperRef.current) {
-            if (carouselSlideAxis === 'x') {
-                carouselTrackWrapperRef.current.style.top = '0px';
-            }
-            if (carouselSlideAxis === 'y') {
-                carouselTrackWrapperRef.current.style.left = '0px';
-            }
-        }
-    }, [carouselSlideAxis]);
-    function setSlideActionType(type) {
-        slideActionType.current = type;
-    }
-    function getSlideActionType() {
-        return slideActionType.current;
-    }
-    function setActiveItem(newItem) {
-        activeItem.current = newItem;
-    }
-    function getCurrentActiveItem() {
-        return activeItem.current;
-    }
-    function getIsAnimating() {
-        return isAnimating.current;
-    }
-    function setIsAnimating(val) {
-        isAnimating.current = val;
-    }
-    function setIsDragging(val) {
-        isDragging.current = val;
-    }
-    function getIsDragging() {
-        return isDragging.current;
-    }
-    function getPrevItem() {
-        const currentActiveItem = getCurrentActiveItem();
-        if (currentActiveItem === 0) {
-            return items.length - 1;
-        }
-        return currentActiveItem - 1;
-    }
-    function getNextItem() {
-        const currentActiveItem = getCurrentActiveItem();
-        if (currentActiveItem === items.length - 1) {
-            return 0;
-        }
-        return currentActiveItem + 1;
-    }
-    function getIsNextItem(id) {
-        const itemIndex = findItemIndex(id);
-        const activeItem = getCurrentActiveItem();
-        if (withLoop && activeItem === items.length - 1) {
-            return itemIndex === 0;
-        }
-        return itemIndex === activeItem + 1;
-    }
-    function getIsPrevItem(id) {
-        const itemIndex = findItemIndex(id);
-        const activeItem = getCurrentActiveItem();
-        if (withLoop && activeItem === 0) {
-            return itemIndex === items.length - 1;
-        }
-        return itemIndex === activeItem - 1;
-    }
-    function findItemIndex(id) {
-        return items.findIndex(item => item.id === id);
-    }
-    function slideToItem({ from, to, customTo, immediate = false, onRest = () => { }, }) {
-        if (!immediate) {
-            setActiveItem(to);
-            setIsAnimating(true);
-            emitObservable({
-                eventName: 'onSlideStartChange',
-                nextItem: to,
-                slideActionType: getSlideActionType(),
-            });
-        }
-        function getFromValue() {
-            if (from) {
-                return {
-                    from: {
-                        [carouselSlideAxis]: from,
-                    },
-                };
-            }
-            return {};
-        }
-        function getToValue() {
-            if (customTo) {
-                return {
-                    [carouselSlideAxis]: customTo,
-                };
-            }
-            return {
-                [carouselSlideAxis]: -(getSlideValue() * to),
-            };
-        }
-        setCarouselStyles.start({
-            ...getFromValue(),
-            to: getToValue(),
-            immediate,
-            onRest: val => {
-                if (val.finished) {
-                    setIsDragging(false);
-                    setIsAnimating(false);
-                    onRest();
-                    if (!immediate) {
-                        emitObservable({
-                            eventName: 'onSlideChange',
-                            currentItem: getCurrentActiveItem(),
-                            slideActionType: getSlideActionType(),
-                        });
-                    }
-                }
-            },
-        });
-        if (enableThumbsWrapperScroll && withThumbs && !immediate) {
-            handleThumbsScroll(to);
-        }
-    }
-    function getWrapperFromValue(element) {
-        if (element.style.transform === 'none') {
-            return 0;
-        }
-        const values = element.style.transform.split(/\w+\(|\);?/);
-        return Number(values[1].split(/,\s?/g)[carouselSlideAxis === 'x' ? 0 : 1].replace('px', ''));
-    }
-    function getIsFirstItem() {
-        return getCurrentActiveItem() === 0;
-    }
-    function getIsLastItem() {
-        return getCurrentActiveItem() === items.length - 1;
-    }
-    function slideToPrevItem() {
-        if (itemsPerSlide === 'fluid' && !withLoop) {
-            const currentSlideVal = getWrapperFromValue(carouselTrackWrapperRef.current);
-            const nextPrevValue = currentSlideVal + getSlideValue() + 100;
-            if (getIsFirstItem()) {
-                slideToItem({
-                    to: 0,
-                });
-                return;
-            }
-            if (nextPrevValue >= 0) {
-                slideToItem({
-                    to: 0,
-                });
-                currentStepSlideValue.current = 0;
-            }
-            else {
-                const nextVal = currentStepSlideValue.current + getSlideValue();
-                currentStepSlideValue.current = nextVal;
-                slideToItem({
-                    to: getPrevItem(),
-                    customTo: nextVal,
-                });
-            }
-            if (slideFluidEndReached.current) {
-                slideFluidEndReached.current = false;
-            }
-        }
-        else if ((!withLoop && getCurrentActiveItem() === 0) || windowIsHidden.current) {
-            return;
-        }
-        else {
-            setSlideActionType('prev');
-            if (getIsFirstItem()) {
-                slideToItem({
-                    from: -(Math.abs(getWrapperFromValue(carouselTrackWrapperRef.current)) +
-                        getSlideValue() * items.length),
-                    to: items.length - 1,
-                });
-            }
-            else {
-                slideToItem({
-                    to: getPrevItem(),
-                });
-            }
-        }
-    }
-    function slideToNextItem() {
-        if (itemsPerSlide === 'fluid' && !withLoop) {
-            const willGoAfterLastFluidItem = Math.abs(getNextItem() * getSlideValue()) + 100 >=
-                fluidTotalWrapperScrollValue.current;
-            function getDefaultNextValue() {
-                return -(getNextItem() * getSlideValue());
-            }
-            console.log(getDefaultNextValue());
-            if (mainCarouselWrapperRef.current.getBoundingClientRect().width >=
-                items.length * getSlideValue()) {
-                slideFluidEndReached.current = true;
-            }
-            if (slideFluidEndReached.current) {
-                return;
-            }
-            if (willGoAfterLastFluidItem) {
-                const nextValue = -fluidTotalWrapperScrollValue.current;
-                slideFluidEndReached.current = true;
-                currentStepSlideValue.current = nextValue;
-                slideToItem({
-                    customTo: nextValue,
-                    to: getNextItem(),
-                });
-            }
-            else {
-                const isPure = Math.abs(currentStepSlideValue.current % getSlideValue()) === 0;
-                if (!isPure) {
-                    const nextValue = currentStepSlideValue.current - getSlideValue();
-                    currentStepSlideValue.current = nextValue;
-                    slideToItem({
-                        to: getNextItem(),
-                        customTo: nextValue,
-                    });
-                }
-                else {
-                    currentStepSlideValue.current = getDefaultNextValue();
-                    slideToItem({
-                        to: getNextItem(),
-                        customTo: getDefaultNextValue(),
-                    });
-                }
-            }
-        }
-        else if ((!withLoop && getCurrentActiveItem() === internalItems.length - 1) ||
-            windowIsHidden.current) {
-            return;
-        }
-        else {
-            setSlideActionType('next');
-            if (getIsLastItem()) {
-                slideToItem({
-                    from: getWrapperFromValue(carouselTrackWrapperRef.current) +
-                        getSlideValue() * items.length,
-                    to: 0,
-                });
-            }
-            else {
-                slideToItem({
-                    to: getNextItem(),
-                });
-            }
-        }
-    }
-    function _slideToItem(item) {
-        let itemIndex = 0;
-        if (typeof item === 'string') {
-            itemIndex = items.findIndex(_item => _item.id === item);
-        }
-        else {
-            itemIndex = item;
-        }
-        if (itemIndex >= items.length) {
-            throw Error(`The item you want to slide to doesn't exist. This could be due to the fact that 
-        you provide a wrong id or a higher numeric index.`);
-        }
-        if (itemIndex === getCurrentActiveItem()) {
-            return;
-        }
-        const currentItem = findItemIndex(items[getCurrentActiveItem()].id);
-        const newActiveItem = findItemIndex(items[itemIndex].id);
-        if (newActiveItem > currentItem) {
-            setSlideActionType('next');
-        }
-        else {
-            setSlideActionType('prev');
-        }
-        slideToItem({
-            to: itemIndex,
-        });
-    }
-    const contextProps = {
-        useListenToCustomEvent,
-        getIsFullscreen,
-        enterFullscreen,
-        exitFullscreen,
-        getIsAnimating,
-        getIsDragging,
-        getIsNextItem,
-        getIsPrevItem,
-        slideToPrevItem,
-        slideToNextItem,
-        slideToItem: _slideToItem,
-        getIsActiveItem: id => {
-            return findItemIndex(id) === getCurrentActiveItem();
-        },
-        getCurrentActiveItem: () => ({
-            id: items[getCurrentActiveItem()].id,
-            index: getCurrentActiveItem(),
-        }),
-    };
-    function getItemStyles() {
-        if (typeof itemsPerSlide === 'number') {
-            return {
-                ...(carouselSlideAxis === 'x'
-                    ? { marginRight: `${gutter}px` }
-                    : { marginBottom: `${gutter}px` }),
-                flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)`,
-            };
-        }
-        return {
-            ...(carouselSlideAxis === 'x'
-                ? { marginRight: `${gutter}px` }
-                : { marginBottom: `${gutter}px` }),
-        };
-    }
-    function getAnimatedWrapperStyles() {
-        const percentValue = `calc(100% - ${startEndGutter * 2}px)`;
-        return {
-            width: carouselSlideAxis === 'x' ? percentValue : '100%',
-            height: carouselSlideAxis === 'y' ? percentValue : '100%',
-        };
-    }
-    const carouselFragment = (jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: jsx("div", Object.assign({ ref: mainCarouselWrapperRef, "data-testid": "use-spring-carousel-wrapper", style: {
-                display: 'flex',
-                position: 'relative',
-                width: '100%',
-                height: '100%',
-                overflow: 'hidden',
-            } }, { children: jsx(animated.div, Object.assign({}, bindDrag(), { "data-testid": "use-spring-carousel-animated-wrapper", style: {
-                    display: 'flex',
-                    top: 0,
-                    left: 0,
-                    position: 'relative',
-                    touchAction,
-                    flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column',
-                    ...getAnimatedWrapperStyles(),
-                    ...carouselStyles,
-                }, ref: ref => {
-                    if (ref) {
-                        carouselTrackWrapperRef.current = ref;
-                        if (withLoop) {
-                            adjustCarouselWrapperPosition(ref);
-                        }
-                    }
-                } }, { children: internalItems.map(({ id, renderItem }, index) => {
-                    return (jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: {
-                            display: 'flex',
-                            position: 'relative',
-                            ...getItemStyles(),
-                        } }, { children: renderItem }), `${id}-${index}`));
-                }) }), void 0) }), void 0) }), void 0));
-    const thumbsFragment = (jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: _thumbsFragment }), void 0));
-    return {
-        carouselFragment,
-        thumbsFragment,
-        ...contextProps,
-    };
-}
-
-const UseTransitionCarouselContext = createContext(undefined);
-function useTransitionCarouselContext() {
-    const context = useContext(UseTransitionCarouselContext);
-    if (!context) {
-        throw new Error(`useTransitionCarouselContext isn't being used within the useTransitionCarousel context; 
-    use the context only inside a component that is rendered within the Carousel.`);
-    }
-    return context;
-}
-function useTransitionCarousel({ items, withLoop = false, withThumbs = false, springConfig = config.default, thumbsSlideAxis = 'x', enableThumbsWrapperScroll = true, draggingSlideTreshold = 50, prepareThumbsData, toPrevItemSpringProps, toNextItemSpringProps, disableGestures = false, springAnimationProps = {
-    initial: {
-        opacity: 1,
-        position: 'relative',
-    },
-    from: {
-        opacity: 0,
-        position: 'absolute',
-    },
-    enter: {
-        opacity: 1,
-        position: 'relative',
-    },
-    leave: {
-        opacity: 0,
-        position: 'absolute',
-    },
-}, }) {
-    const slideActionType = useRef('next');
-    const mainCarouselWrapperRef = useRef(null);
-    const isAnimating = useRef(false);
-    const [activeItem, setActiveItem] = useState(0);
-    const { emitObservable, useListenToCustomEvent } = useCustomEventsModule();
-    const { enterFullscreen, exitFullscreen, getIsFullscreen } = useFullscreenModule({
-        emitObservable,
-        mainCarouselWrapperRef,
-    });
-    const { thumbsFragment: _thumbsFragment, handleThumbsScroll } = useThumbsModule({
-        items,
-        withThumbs,
-        thumbsSlideAxis,
-        springConfig,
-        prepareThumbsData,
-    });
-    const bindSwipe = useDrag(({ last, movement: [mx] }) => {
-        if (getIsAnimating()) {
-            return;
-        }
-        if (last) {
-            const prevItemTreshold = mx > draggingSlideTreshold;
-            const nextItemTreshold = mx < -draggingSlideTreshold;
-            const isFirstItem = activeItem === 0;
-            const isLastItem = activeItem === items.length - 1;
-            if (nextItemTreshold) {
-                if (!withLoop && isLastItem) {
-                    return;
-                }
-                slideToNextItem();
-                emitObservable({
-                    eventName: 'onLeftSwipe',
-                });
-            }
-            else if (prevItemTreshold) {
-                if (!withLoop && isFirstItem) {
-                    return;
-                }
-                slideToPrevItem();
-                emitObservable({
-                    eventName: 'onRightSwipe',
-                });
-            }
-        }
-    }, {
-        enabled: !disableGestures,
-    });
-    function getTransitionConfig() {
-        const slideActionType = getSlideActionType();
-        if (slideActionType === 'prev' && toPrevItemSpringProps) {
-            return {
-                initial: {
-                    ...springAnimationProps.initial,
-                },
-                from: {
-                    ...toPrevItemSpringProps.from,
-                },
-                enter: {
-                    ...toPrevItemSpringProps.enter,
-                },
-                leave: {
-                    ...toPrevItemSpringProps.leave,
-                },
-            };
-        }
-        if (slideActionType === 'next' && toNextItemSpringProps) {
-            return {
-                initial: {
-                    ...springAnimationProps.initial,
-                },
-                from: {
-                    ...toNextItemSpringProps.from,
-                },
-                enter: {
-                    ...toNextItemSpringProps.enter,
-                },
-                leave: {
-                    ...toNextItemSpringProps.leave,
-                },
-            };
-        }
-        return {
-            initial: {
-                ...springAnimationProps.initial,
-            },
-            from: {
-                ...springAnimationProps.from,
-            },
-            enter: {
-                ...springAnimationProps.enter,
-            },
-            leave: {
-                ...springAnimationProps.leave,
-            },
-        };
-    }
-    const transitions = useTransition(activeItem, {
-        config: springConfig,
-        ...getTransitionConfig(),
-        onStart: () => setIsAnimating(true),
-        keys: null,
-        onRest: val => {
-            if (val.finished) {
-                setIsAnimating(false);
-                emitObservable({
-                    eventName: 'onSlideChange',
-                    currentItem: activeItem,
-                    slideActionType: getSlideActionType(),
-                });
-            }
-        },
-    });
-    const itemsFragment = transitions((styles, item) => (jsx(animated.div, Object.assign({ style: {
-            ...styles,
-            flex: '1 0 100%',
-            width: '100%',
-            height: '100%',
-        } }, { children: items[item].renderItem }), void 0)));
-    function getIsAnimating() {
-        return isAnimating.current;
-    }
-    function setIsAnimating(val) {
-        isAnimating.current = val;
-    }
-    function setSlideActionType(type) {
-        slideActionType.current = type;
-    }
-    function getSlideActionType() {
-        return slideActionType.current;
-    }
-    function slideToItem(item) {
-        let itemIndex = 0;
-        if (typeof item === 'string') {
-            itemIndex = items.findIndex(_item => _item.id === item);
-        }
-        else {
-            itemIndex = item;
-        }
-        if (itemIndex >= items.length) {
-            throw Error(`The item you want to slide to doesn't exist. This could be due to the fact that 
-        you provide a wrong id or a higher numeric index.`);
-        }
-        if (itemIndex === activeItem) {
-            return;
-        }
-        const currentItem = findItemIndex(items[activeItem].id);
-        const newActiveItem = findItemIndex(items[itemIndex].id);
-        emitObservable({
-            eventName: 'onSlideStartChange',
-            nextItem: newActiveItem,
-            slideActionType: getSlideActionType(),
-        });
-        if (newActiveItem > currentItem) {
-            setSlideActionType('next');
-        }
-        else {
-            setSlideActionType('prev');
-        }
-        setActiveItem(itemIndex);
-        if (enableThumbsWrapperScroll && withThumbs) {
-            handleThumbsScroll(itemIndex);
-        }
-    }
-    function slideToNextItem() {
-        const isLastItem = activeItem === items.length - 1;
-        if (withLoop) {
-            setSlideActionType('next');
-            if (isLastItem) {
-                emitObservable({
-                    eventName: 'onSlideStartChange',
-                    nextItem: 0,
-                    slideActionType: getSlideActionType(),
-                });
-                setActiveItem(0);
-            }
-            else {
-                emitObservable({
-                    eventName: 'onSlideStartChange',
-                    nextItem: activeItem + 1,
-                    slideActionType: getSlideActionType(),
-                });
-                setActiveItem(activeItem + 1);
-            }
-        }
-        else {
-            if (!isLastItem) {
-                emitObservable({
-                    eventName: 'onSlideStartChange',
-                    nextItem: activeItem + 1,
-                    slideActionType: getSlideActionType(),
-                });
-                setSlideActionType('next');
-                setActiveItem(activeItem + 1);
-            }
-        }
-    }
-    function slideToPrevItem() {
-        const isFirstItem = activeItem === 0;
-        if (withLoop) {
-            setSlideActionType('prev');
-            if (isFirstItem) {
-                emitObservable({
-                    eventName: 'onSlideStartChange',
-                    nextItem: items.length - 1,
-                    slideActionType: getSlideActionType(),
-                });
-                setActiveItem(items.length - 1);
-            }
-            else {
-                emitObservable({
-                    eventName: 'onSlideStartChange',
-                    nextItem: activeItem - 1,
-                    slideActionType: getSlideActionType(),
-                });
-                setActiveItem(activeItem - 1);
-            }
-        }
-        else {
-            if (!isFirstItem) {
-                setSlideActionType('prev');
-                emitObservable({
-                    eventName: 'onSlideStartChange',
-                    nextItem: activeItem - 1,
-                    slideActionType: getSlideActionType(),
-                });
-                setActiveItem(activeItem - 1);
-            }
-        }
-    }
-    function findItemIndex(id) {
-        return items.findIndex(item => item.id === id);
-    }
-    function getIsNextItem(id) {
-        const itemIndex = findItemIndex(id);
-        if (withLoop && activeItem === items.length - 1) {
-            return itemIndex === 0;
-        }
-        return itemIndex === activeItem + 1;
-    }
-    function getIsPrevItem(id) {
-        const itemIndex = findItemIndex(id);
-        if (withLoop && activeItem === 0) {
-            return itemIndex === items.length - 1;
-        }
-        return itemIndex === activeItem - 1;
-    }
-    const contextProps = {
-        activeItem,
-        slideToItem,
-        slideToNextItem,
-        slideToPrevItem,
-        enterFullscreen,
-        exitFullscreen,
-        useListenToCustomEvent,
-        getIsNextItem,
-        getIsPrevItem,
-        getIsAnimating,
-        getIsFullscreen,
-        getIsActiveItem: id => {
-            return findItemIndex(id) === activeItem;
-        },
-        getCurrentActiveItem: () => ({
-            id: items[activeItem].id,
-            index: activeItem,
-        }),
-    };
-    const carouselFragment = (jsx(UseTransitionCarouselContext.Provider, Object.assign({ value: contextProps }, { children: jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, bindSwipe(), { style: {
-                display: 'flex',
-                position: 'relative',
-                width: '100%',
-                height: '100%',
-                overflow: 'hidden',
-            } }, { children: itemsFragment }), void 0) }), void 0));
-    const thumbsFragment = (jsx(UseTransitionCarouselContext.Provider, Object.assign({ value: contextProps }, { children: _thumbsFragment }), void 0));
-    return {
-        carouselFragment,
-        thumbsFragment,
-        ...contextProps,
-    };
-}
-
-export { useSpringCarousel, useSpringCarouselContext, useTransitionCarousel, useTransitionCarouselContext };
+import{jsx as e}from"react/jsx-runtime";import{useRef as t,useEffect as n,createContext as r,useCallback as i,useContext as o,useState as s}from"react";import{useSpring as u,animated as l,config as c,useTransition as a}from"react-spring";import{useDrag as d}from"@use-gesture/react";import{Subject as m}from"rxjs";import f from"screenfull";function h(){const e=t(new m);return{useListenToCustomEvent:function(t){n((()=>{const n=e.current.subscribe(t);return()=>n.unsubscribe()}),[t])},emitObservable:t=>{e.current.next(t)}}}function g({mainCarouselWrapperRef:e,emitObservable:r,handleResize:i}){const o=t(!1);function s(e){o.current=e}return n((()=>{function e(){document.fullscreenElement&&(s(!0),r({eventName:"onFullscreenChange",isFullscreen:!0}),i&&i()),document.fullscreenElement||(s(!1),r({eventName:"onFullscreenChange",isFullscreen:!1}),i&&i())}if(f.isEnabled)return f.on("change",e),()=>{f.isEnabled&&f.off("change",e)}})),{enterFullscreen:function(t){f.isEnabled&&f.request(t||e.current)},exitFullscreen:function(){f.isEnabled&&f.exit()},getIsFullscreen:function(){return o.current}}}function p(e){const r=t(!1);n((()=>{if(!r.current){const t=e();return r.current=!0,()=>{t&&t()}}}),[])}function b({items:n,withThumbs:r,thumbsSlideAxis:i="x",springConfig:o,thumbsWrapperRef:s,prepareThumbsData:c}){const a=t(null),[d,m]=u((()=>({[i]:0,config:o})));p((()=>{if(r){if(n.some((e=>!e.renderThumb)))throw new Error("The renderThumb property is missing in one or more items. You need to add the renderThumb property to every item of the carousel when the prop withThumbs={true} or eventually set withThumbs={false}.")}}));return{thumbsFragment:r?e(l.div,Object.assign({ref:a},"x"===i?{scrollLeft:d.x}:{scrollTop:d.y},{style:{display:"flex",flex:1,position:"relative",flexDirection:"x"===i?"row":"column",..."x"===i?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"}}},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return c?c(e(n)):e(n)}().map((({id:t,renderThumb:n})=>{const r=`thumb-${t}`;return e("div",Object.assign({id:r},{children:n}),r)}))}),void 0):null,handleThumbsScroll:function(e){s&&s.current&&(a.current=s.current);const t=a.current.querySelector(`#thumb-${n[e].id}`);if(t){const r=a.current,o="x"===i?"offsetWidth":"offsetHeight",s="x"===i?"scrollLeft":"scrollTop",u=function({thumbNode:e,offsetDirection:t,offsetDimension:n}){return e[t]+e[n]/2}({thumbNode:t,offsetDimension:o,offsetDirection:"x"===i?"offsetLeft":"offsetTop"}),l=function({thumbWrapper:e,offsetDimension:t}){return e[t]/2}({thumbWrapper:r,offsetDimension:o});m.start({from:{[i]:function({thumbWrapper:e,scrollDirection:t}){return e[t]}({thumbWrapper:r,scrollDirection:s})},to:{[i]:function({thumbWrapper:t,thumbOffsetPosition:r,thumbScrollDimension:o,offsetDimension:s}){const u="x"===i?"scrollWidth":"scrollHeight";return e===n.length-1||r-o>t[u]-t[s]?t[u]-t[s]:0===e?0:r-o}({thumbWrapper:r,thumbOffsetPosition:u,thumbScrollDimension:l,offsetDimension:o})},onChange:e=>{"x"===i?a.current.scrollLeft=e.x:a.current.scrollTop=e.y}})}}}}const v=r(void 0);function x(){const e=o(v);if(!e)throw new Error("useSpringCarouselContext isn't being used within the useSringCarousel context; \n    use the context only inside a component that is rendered within the Carousel.");return e}function w({items:r,withLoop:o=!1,draggingSlideTreshold:s=140,springConfig:a=c.default,shouldResizeOnWindowResize:m=!0,withThumbs:f=!1,enableThumbsWrapperScroll:x=!0,carouselSlideAxis:w="x",thumbsSlideAxis:y="x",thumbsWrapperRef:T,prepareThumbsData:I,itemsPerSlide:S=1,initialActiveItem:C=0,initialStartingPosition:A="start",disableGestures:N=!1,gutter:E=0,startEndGutter:F=0,touchAction:R="none",slideAmount:D}){const O=t("next"),W=o?[...r,...r,...r]:r,P=t(C),L=t(null),j=t(null),$=t(!1),z=t(!1),B=t(!1),M=t(0),q=t(0),H=t(!1),k=t(0),G=t(0);const Y=i((()=>Math.round(Number(j.current?.["x"===w?"scrollWidth":"scrollHeight"])-j.current.getBoundingClientRect()["x"===w?"width":"height"])),[w]),[X,J]=u((()=>({y:0,x:0,config:a,onRest:({value:e})=>{k.current=e[w],G.current=e[w]}}))),K=i((()=>{if(!j.current)return 0;const e=j.current?.querySelector(".use-spring-carousel-item");if(!e)throw Error("No carousel items available!");const t=e.getBoundingClientRect()["x"===w?"width":"height"]+E;if("fluid"===S&&"number"==typeof D){if(D<t)throw new Error("slideAmount must be greater than the width of a single item.");return D}return t}),[w,E,S,D]),Q=i((e=>{if("fluid"!==S&&"number"==typeof S){const o="x"===w?"left":"top";function t(){return K()*r.length}function n(t){e.style.top="0px",e.style.left="0px",e.style[o]=`-${t-F}px`}function i(){n(t())}if(S>1)switch(A){default:case"start":i();break;case"center":n(t()-K()*Math.round((S-1)/2));break;case"end":n(t()-K()*Math.round(S-1))}else i()}}),[F,w,K,A,r.length,S]),U=i((()=>{if(window.innerWidth!==M.current){if(M.current=window.innerWidth,"fluid"===S)if(q.current=Y(),H.current)J.start({immediate:!0,[w]:-q.current});else{const e=document.querySelector(".use-spring-carousel-item:last-of-type");console.log({lastItem:e.offsetLeft})}else J.start({immediate:!0,x:0,y:0}),J.start({immediate:!0,[w]:-K()*le()});o&&Q(j.current)}}),[Q,w,K,J,o,S,Y]),{useListenToCustomEvent:V,emitObservable:Z}=h(),{enterFullscreen:_,exitFullscreen:ee,getIsFullscreen:te}=g({mainCarouselWrapperRef:L,emitObservable:Z,handleResize:U}),{thumbsFragment:ne,handleThumbsScroll:re}=b({withThumbs:f,items:r,thumbsSlideAxis:y,springConfig:a,thumbsWrapperRef:T,prepareThumbsData:I});const ie=d((e=>{const t=e.dragging,n=e.movement["x"===w?0:1];function i(){"fluid"===S?pe()?ve():H.current?J.start({[w]:-q.current}):J.start({[w]:G.current}):J.start({[w]:-le()*K()})}if(e.first&&(k.current=X[w].get()),t){ae(!0),Z({eventName:"onDrag",...e}),J.start({[w]:k.current+n});const t=n>s,u=n<-s;L.current.getBoundingClientRect().width>=r.length*K()&&(H.current=!0),H.current&&n<0?u&&(e.cancel(),J.start({[w]:-q.current})):u?(e.cancel(),!o&&be()?i():xe()):t&&(e.cancel(),!o&&pe()?i():ve())}e.last&&!e.pressed&&i()}),{enabled:!N});function oe(e){O.current=e}function se(){return O.current}function ue(e){P.current=e}function le(){return P.current}function ce(e){z.current=e}function ae(e){$.current=e}function de(){const e=le();return 0===e?r.length-1:e-1}function me(){const e=le();return e===r.length-1?0:e+1}function fe(e){return r.findIndex((t=>t.id===e))}function he({from:e,to:t,customTo:n,immediate:r=!1,onRest:i=(()=>{})}){r||(ue(t),ce(!0),Z({eventName:"onSlideStartChange",nextItem:t,slideActionType:se()})),J.start({...e?{from:{[w]:e}}:{},to:n?{[w]:n}:{[w]:-K()*t},immediate:r,onRest:e=>{e.finished&&(ae(!1),ce(!1),i(),r||Z({eventName:"onSlideChange",currentItem:le(),slideActionType:se()}))}}),x&&f&&!r&&re(t)}function ge(e){if("none"===e.style.transform)return 0;const t=e.style.transform.split(/\w+\(|\);?/);return Number(t[1].split(/,\s?/g)["x"===w?0:1].replace("px",""))}function pe(){return 0===le()}function be(){return le()===r.length-1}function ve(){if("fluid"!==S||o){if(!o&&0===le()||B.current)return;oe("prev"),pe()?he({from:-(Math.abs(ge(j.current))+K()*r.length),to:r.length-1}):he({to:de()})}else{const e=ge(j.current)+K()+100;if(pe())return void he({to:0});if(e>=0)he({to:0}),G.current=0;else{const e=G.current+K();G.current=e,he({to:de(),customTo:e})}H.current&&(H.current=!1)}}function xe(){if("fluid"!==S||o){if(!o&&le()===W.length-1||B.current)return;oe("next"),be()?he({from:ge(j.current)+K()*r.length,to:0}):he({to:me()})}else{const e=Math.abs(me()*K())+100>=q.current;if(L.current.getBoundingClientRect().width>=r.length*K()&&(H.current=!0),H.current)return;if(e){const e=-q.current;H.current=!0,G.current=e,he({to:me(),customTo:e})}else{const e=G.current-K();G.current=e,he({to:me(),customTo:e})}}}p((()=>{if("fluid"!==S&&!Number.isInteger(S))throw new Error("itemsPerSlide should be an integer.");if(S>r.length)throw new Error("The itemsPerSlide prop can't be greater than the total length of the items you provide.");if(S<1)throw new Error("The itemsPerSlide prop can't be less than 1.");m||console.warn("You set shouldResizeOnWindowResize={false}; be aware that the carousel could behave in a strange way if you also use the fullscreen functionality or if you change the mobile orientation."),C<0&&console.warn("The initialActiveItem cannot be less than 0."),C>r.length&&console.warn("The initialActiveItem cannot be greater than the total length of the items you provide.")})),p((()=>{function e(){document.hidden?B.current=!0:B.current=!1}if(q.current=Y(),"undefined"!=typeof window)return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}})),p((()=>{C>0&&C<=r.length&&(he({to:C,immediate:!0}),ue(C))})),n((()=>{if(m)return window.addEventListener("resize",U),()=>{window.removeEventListener("resize",U)}}),[U,m]),n((()=>{j.current&&("x"===w&&(j.current.style.top="0px"),"y"===w&&(j.current.style.left="0px"))}),[w]);const we={useListenToCustomEvent:V,getIsFullscreen:te,enterFullscreen:_,exitFullscreen:ee,getIsAnimating:function(){return z.current},getIsDragging:function(){return $.current},getIsNextItem:function(e){const t=fe(e),n=le();return o&&n===r.length-1?0===t:t===n+1},getIsPrevItem:function(e){const t=fe(e),n=le();return o&&0===n?t===r.length-1:t===n-1},slideToPrevItem:ve,slideToNextItem:xe,slideToItem:function(e){let t=0;if(t="string"==typeof e?r.findIndex((t=>t.id===e)):e,t>=r.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n        you provide a wrong id or a higher numeric index.");if(t===le())return;const n=fe(r[le()].id);oe(fe(r[t].id)>n?"next":"prev"),he({to:t})},getIsActiveItem:e=>fe(e)===le(),getCurrentActiveItem:()=>({id:r[le()].id,index:le()})};return{carouselFragment:e(v.Provider,Object.assign({value:we},{children:e("div",Object.assign({ref:L,"data-testid":"use-spring-carousel-wrapper",style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:e(l.div,Object.assign({},ie(),{"data-testid":"use-spring-carousel-animated-wrapper",style:{display:"flex",top:0,left:0,position:"relative",touchAction:R,flexDirection:"x"===w?"row":"column",...function(){const e=`calc(100% - ${2*F}px)`;return{width:"x"===w?e:"100%",height:"y"===w?e:"100%"}}(),...X},ref:e=>{e&&(j.current=e,o&&Q(e))}},{children:W.map((({id:t,renderItem:n},r)=>e("div",Object.assign({className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:{display:"flex",position:"relative",..."number"==typeof S?{..."x"===w?{marginRight:`${E}px`}:{marginBottom:`${E}px`},flex:`1 0 calc(100% / ${S} - ${E*(S-1)/S}px)`}:{..."x"===w?{marginRight:`${E}px`}:{marginBottom:`${E}px`}}}},{children:n}),`${t}-${r}`)))}),void 0)}),void 0)}),void 0),thumbsFragment:e(v.Provider,Object.assign({value:we},{children:ne}),void 0),...we}}const y=r(void 0);function T(){const e=o(y);if(!e)throw new Error("useTransitionCarouselContext isn't being used within the useTransitionCarousel context; \n    use the context only inside a component that is rendered within the Carousel.");return e}function I({items:n,withLoop:r=!1,withThumbs:i=!1,springConfig:o=c.default,thumbsSlideAxis:u="x",enableThumbsWrapperScroll:m=!0,draggingSlideTreshold:f=50,prepareThumbsData:p,toPrevItemSpringProps:v,toNextItemSpringProps:x,disableGestures:w=!1,springAnimationProps:T={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"absolute"},enter:{opacity:1,position:"relative"},leave:{opacity:0,position:"absolute"}}}){const I=t("next"),S=t(null),C=t(!1),[A,N]=s(0),{emitObservable:E,useListenToCustomEvent:F}=h(),{enterFullscreen:R,exitFullscreen:D,getIsFullscreen:O}=g({emitObservable:E,mainCarouselWrapperRef:S}),{thumbsFragment:W,handleThumbsScroll:P}=b({items:n,withThumbs:i,thumbsSlideAxis:u,springConfig:o,prepareThumbsData:p}),L=d((({last:e,movement:[t]})=>{if(!$()&&e){const e=t>f,i=t<-f,o=0===A,s=A===n.length-1;if(i){if(!r&&s)return;q(),E({eventName:"onLeftSwipe"})}else if(e){if(!r&&o)return;H(),E({eventName:"onRightSwipe"})}}}),{enabled:!w});const j=a(A,{config:o,...function(){const e=M();return"prev"===e&&v?{initial:{...T.initial},from:{...v.from},enter:{...v.enter},leave:{...v.leave}}:"next"===e&&x?{initial:{...T.initial},from:{...x.from},enter:{...x.enter},leave:{...x.leave}}:{initial:{...T.initial},from:{...T.from},enter:{...T.enter},leave:{...T.leave}}}(),onStart:()=>z(!0),keys:null,onRest:e=>{e.finished&&(z(!1),E({eventName:"onSlideChange",currentItem:A,slideActionType:M()}))}})(((t,r)=>e(l.div,Object.assign({style:{...t,flex:"1 0 100%",width:"100%",height:"100%"}},{children:n[r].renderItem}),void 0)));function $(){return C.current}function z(e){C.current=e}function B(e){I.current=e}function M(){return I.current}function q(){const e=A===n.length-1;r?(B("next"),e?(E({eventName:"onSlideStartChange",nextItem:0,slideActionType:M()}),N(0)):(E({eventName:"onSlideStartChange",nextItem:A+1,slideActionType:M()}),N(A+1))):e||(E({eventName:"onSlideStartChange",nextItem:A+1,slideActionType:M()}),B("next"),N(A+1))}function H(){const e=0===A;r?(B("prev"),e?(E({eventName:"onSlideStartChange",nextItem:n.length-1,slideActionType:M()}),N(n.length-1)):(E({eventName:"onSlideStartChange",nextItem:A-1,slideActionType:M()}),N(A-1))):e||(B("prev"),E({eventName:"onSlideStartChange",nextItem:A-1,slideActionType:M()}),N(A-1))}function k(e){return n.findIndex((t=>t.id===e))}const G={activeItem:A,slideToItem:function(e){let t=0;if(t="string"==typeof e?n.findIndex((t=>t.id===e)):e,t>=n.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n        you provide a wrong id or a higher numeric index.");if(t===A)return;const r=k(n[A].id),o=k(n[t].id);E({eventName:"onSlideStartChange",nextItem:o,slideActionType:M()}),B(o>r?"next":"prev"),N(t),m&&i&&P(t)},slideToNextItem:q,slideToPrevItem:H,enterFullscreen:R,exitFullscreen:D,useListenToCustomEvent:F,getIsNextItem:function(e){const t=k(e);return r&&A===n.length-1?0===t:t===A+1},getIsPrevItem:function(e){const t=k(e);return r&&0===A?t===n.length-1:t===A-1},getIsAnimating:$,getIsFullscreen:O,getIsActiveItem:e=>k(e)===A,getCurrentActiveItem:()=>({id:n[A].id,index:A})};return{carouselFragment:e(y.Provider,Object.assign({value:G},{children:e("div",Object.assign({ref:S},L(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:j}),void 0)}),void 0),thumbsFragment:e(y.Provider,Object.assign({value:G},{children:W}),void 0),...G}}export{w as useSpringCarousel,x as useSpringCarouselContext,I as useTransitionCarousel,T as useTransitionCarouselContext};
 //# sourceMappingURL=index.es.js.map