react-spring-carousel 3.0.0-beta010 → 3.0.0-beta016

package/dist/cjs/index.js

@@ -1,779 +1,2 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var web = require('@react-spring/web');
-var react = require('react');
-var react$1 = require('@use-gesture/react');
-var screenfull = require('screenfull');
-
-const eventLabel = 'RSC::Event';
-function useEventsModule() {
-    const targetEvent = react.useRef(null);
-    react.useEffect(() => {
-        targetEvent.current = document.createElement('div');
-    }, []);
-    function useListenToCustomEvent(eventHandler) {
-        react.useEffect(() => {
-            function handleEvent(event) {
-                eventHandler(event.detail);
-            }
-            if (targetEvent.current) {
-                // @ts-ignore
-                targetEvent.current.addEventListener(eventLabel, handleEvent, false);
-                return () => {
-                    var _a;
-                    // @ts-ignore
-                    (_a = targetEvent.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(eventLabel, handleEvent, false);
-                };
-            }
-        }, []);
-    }
-    function emitEvent(event) {
-        if (targetEvent.current) {
-            const newEvent = new CustomEvent(eventLabel, {
-                detail: event,
-            });
-            targetEvent.current.dispatchEvent(newEvent);
-        }
-    }
-    return {
-        useListenToCustomEvent,
-        emitEvent,
-    };
-}
-
-function useFullscreenModule({ mainCarouselWrapperRef, emitEvent, handleResize, }) {
-    const isFullscreen = react.useRef(false);
-    react.useEffect(() => {
-        function handleFullscreenChange() {
-            if (document.fullscreenElement) {
-                setIsFullscreen(true);
-                emitEvent({
-                    eventName: 'onFullscreenChange',
-                    isFullscreen: true,
-                });
-                handleResize && handleResize();
-            }
-            if (!document.fullscreenElement) {
-                setIsFullscreen(false);
-                emitEvent({
-                    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 isInViewport(el) {
-    const rect = el.getBoundingClientRect();
-    return (rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
-}
-function useThumbsModule({ thumbsSlideAxis = 'x', withThumbs = false, prepareThumbsData, items, }) {
-    const wrapperRef = react.useRef(null);
-    const [spring, setSpring] = web.useSpring(() => ({
-        val: 0,
-    }));
-    function getTotalScrollValue() {
-        var _a;
-        return Math.round(Number((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
-            wrapperRef.current.getBoundingClientRect()[thumbsSlideAxis === 'x' ? 'width' : 'height']);
-    }
-    function handleScroll(activeItem) {
-        var _a, _b;
-        function getThumbNode() {
-            if (wrapperRef.current) {
-                return wrapperRef.current.querySelector(`#thumb-item-${items[activeItem].id}`);
-            }
-            return null;
-        }
-        const thumbNode = getThumbNode();
-        if (thumbNode && wrapperRef.current) {
-            if (!isInViewport(thumbNode)) {
-                const offset = thumbNode.offsetLeft;
-                const val = offset > getTotalScrollValue() ? getTotalScrollValue() : offset;
-                setSpring.start({
-                    from: {
-                        val: (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop']) !== null && _b !== void 0 ? _b : 0,
-                    },
-                    to: {
-                        val,
-                    },
-                    onChange: ({ value }) => {
-                        if (wrapperRef.current) {
-                            wrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] =
-                                Math.abs(value.val);
-                        }
-                    },
-                });
-            }
-        }
-    }
-    function handlePrepareThumbsData() {
-        function getPreparedItems(_items) {
-            return _items.map(i => ({
-                id: i.id,
-                renderThumb: i.renderThumb,
-            }));
-        }
-        if (prepareThumbsData) {
-            return prepareThumbsData(getPreparedItems(items));
-        }
-        return getPreparedItems(items);
-    }
-    const thumbsFragment = withThumbs ? (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-thumbs-wrapper", ref: wrapperRef, onWheel: () => spring.val.stop(), style: Object.assign({ display: 'flex', flex: '1', position: 'relative', width: '100%', height: '100%', flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column' }, (thumbsSlideAxis === 'x'
-            ? { overflowX: 'auto' }
-            : {
-                overflowY: 'auto',
-                maxHeight: '100%',
-            })) }, { children: handlePrepareThumbsData().map(({ id, renderThumb }) => {
-            const thumbId = `thumb-item-${id}`;
-            return (jsxRuntime.jsx("div", Object.assign({ id: thumbId, className: "thumb-item" }, { children: renderThumb }), thumbId));
-        }) }))) : null;
-    return {
-        thumbsFragment,
-        handleScroll,
-    };
-}
-
-function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = 'x', itemsPerSlide = 1, slideType = 'fixed', gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = 'x', disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, }) {
-    const prevWindowWidth = react.useRef(0);
-    const draggingSlideTreshold = react.useRef(_draggingSlideTreshold !== null && _draggingSlideTreshold !== void 0 ? _draggingSlideTreshold : 0);
-    const slideActionType = react.useRef('initial');
-    const slideModeType = react.useRef('initial');
-    const prevSlidedValue = react.useRef(0);
-    const [spring, setSpring] = web.useSpring(() => ({
-        val: 0,
-        pause: !init,
-        onChange({ value }) {
-            if (freeScroll && mainCarouselWrapperRef.current) {
-                setStartEndItemReachedOnFreeScroll();
-                if (carouselSlideAxis === 'x') {
-                    mainCarouselWrapperRef.current.scrollLeft = Math.abs(value.val);
-                }
-                else {
-                    mainCarouselWrapperRef.current.scrollTop = Math.abs(value.val);
-                }
-            }
-            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)`;
-                }
-            }
-        },
-    }));
-    const activeItem = react.useRef(initialActiveItem);
-    const firstItemReached = react.useRef(initialActiveItem === 0);
-    const lastItemReached = react.useRef(false);
-    const mainCarouselWrapperRef = react.useRef(null);
-    const carouselTrackWrapperRef = react.useRef(null);
-    const getItems = react.useCallback(() => {
-        if (withLoop) {
-            return [
-                ...items.map(i => (Object.assign(Object.assign({}, i), { id: `prev-repeated-item-${i.id}` }))),
-                ...items,
-                ...items.map(i => (Object.assign(Object.assign({}, i), { id: `next-repeated-item-${i.id}` }))),
-            ];
-        }
-        return [...items];
-    }, [items, withLoop]);
-    const internalItems = getItems();
-    const { emitEvent, useListenToCustomEvent } = useEventsModule();
-    const { thumbsFragment, handleScroll } = useThumbsModule({
-        withThumbs: !!withThumbs,
-        thumbsSlideAxis,
-        prepareThumbsData,
-        items: items,
-    });
-    const { enterFullscreen, exitFullscreen, getIsFullscreen } = useFullscreenModule({
-        mainCarouselWrapperRef,
-        emitEvent,
-        handleResize: () => adjustCarouselWrapperPosition(),
-    });
-    function getItemStyles() {
-        if (slideType === 'fixed' && !freeScroll) {
-            return {
-                marginRight: `${gutter}px`,
-                flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)`,
-            };
-        }
-        return Object.assign({ marginRight: `${gutter}px` });
-    }
-    function getSlideValue() {
-        var _a;
-        const carouselItem = (_a = mainCarouselWrapperRef.current) === null || _a === void 0 ? void 0 : _a.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: Object.assign(Object.assign({}, web.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);
-        }
-    }
-    function getTotalScrollValue() {
-        var _a;
-        if (withLoop) {
-            return getSlideValue() * items.length;
-        }
-        return Math.round(Number((_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
-            carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
-    }
-    function getAnimatedWrapperStyles() {
-        const percentValue = `calc(100% - ${startEndGutter * 2}px)`;
-        return {
-            width: carouselSlideAxis === 'x' ? percentValue : '100%',
-            height: carouselSlideAxis === 'y' ? percentValue : '100%',
-        };
-    }
-    function getCarouselItemWidth() {
-        var _a;
-        const carouselItem = (_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.use-spring-carousel-item');
-        if (!carouselItem) {
-            throw Error('No carousel items available!');
-        }
-        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
-    }
-    function adjustCarouselWrapperPosition() {
-        const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top';
-        function setPosition(v) {
-            const ref = carouselTrackWrapperRef.current;
-            if (!ref)
-                return;
-            if (withLoop) {
-                ref.style.top = '0px';
-                ref.style.left = '0px';
-                ref.style[positionProperty] = `-${v - startEndGutter}px`;
-            }
-            else {
-                ref.style.left = '0px';
-                ref.style.top = '0px';
-            }
-        }
-        const currentFromValue = Math.abs(getFromValue());
-        if (currentFromValue < getTotalScrollValue() && lastItemReached.current) {
-            lastItemReached.current = false;
-        }
-        if (currentFromValue > getTotalScrollValue()) {
-            const val = -getTotalScrollValue();
-            lastItemReached.current = true;
-            prevSlidedValue.current = val;
-            setSpring.start({
-                immediate: true,
-                val,
-            });
-            return;
-        }
-        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 (!freeScroll && slideType === 'fixed') {
-            const val = -(getSlideValue() * activeItem.current);
-            prevSlidedValue.current = val;
-            setSpring.start({
-                immediate: true,
-                val,
-            });
-        }
-    }
-    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 (index) {
-                return -(index * getSlideValue());
-            }
-            return prevSlidedValue.current - getSlideValue();
-        }
-        if (index) {
-            return -(index * getSlideValue());
-        }
-        return prevSlidedValue.current + getSlideValue();
-    }
-    function slideToPrevItem(type = 'click', index) {
-        if (!init || (firstItemReached.current && !withLoop))
-            return;
-        slideActionType.current = 'prev';
-        lastItemReached.current = false;
-        const nextItem = index || activeItem.current - 1;
-        if (!withLoop) {
-            const nextItemWillExceed = 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,
-                });
-                return;
-            }
-        }
-        if (withLoop && firstItemReached.current) {
-            firstItemReached.current = false;
-            lastItemReached.current = true;
-            slideToItem({
-                slideMode: type,
-                from: getFromValue() - getSlideValue() * items.length,
-                to: -(getSlideValue() * items.length) + getSlideValue(),
-                nextActiveItem: items.length - 1,
-            });
-            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,
-        });
-    }
-    function slideToNextItem(type = 'click', index) {
-        if (!init || (lastItemReached.current && !withLoop))
-            return;
-        slideActionType.current = 'next';
-        firstItemReached.current = false;
-        const nextItem = index || activeItem.current + 1;
-        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: -getTotalScrollValue(),
-                    nextActiveItem: nextItem,
-                });
-                return;
-            }
-        }
-        if (withLoop && lastItemReached.current) {
-            lastItemReached.current = false;
-            firstItemReached.current = true;
-            slideToItem({
-                slideMode: type,
-                from: getFromValue() + getSlideValue() * items.length,
-                to: 0,
-                nextActiveItem: 0,
-            });
-            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,
-        });
-    }
-    react.useEffect(() => {
-        prevWindowWidth.current = window.innerWidth;
-    }, []);
-    react.useEffect(() => {
-        adjustCarouselWrapperPosition();
-    }, [
-        initialStartingPosition,
-        itemsPerSlide,
-        withLoop,
-        startEndGutter,
-        gutter,
-        freeScroll,
-        slideType,
-        init,
-    ]);
-    react.useLayoutEffect(() => {
-        /**
-         * Set initial track position
-         */
-        if (carouselTrackWrapperRef.current) {
-            adjustCarouselWrapperPosition();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    react.useEffect(() => {
-        if (_draggingSlideTreshold) {
-            draggingSlideTreshold.current = _draggingSlideTreshold;
-        }
-        else {
-            draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2);
-        }
-    }, [_draggingSlideTreshold]);
-    react.useEffect(() => {
-        function handleResize() {
-            if (window.innerWidth === prevWindowWidth.current)
-                return;
-            prevWindowWidth.current = window.innerWidth;
-            adjustCarouselWrapperPosition();
-        }
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    const bindDrag = react$1.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;
-        if (isDragging) {
-            if (direction > 0) {
-                slideActionType.current = 'prev';
-            }
-            else {
-                slideActionType.current = 'next';
-            }
-            emitEvent(Object.assign(Object.assign({}, state), { eventName: 'onDrag', slideActionType: slideActionType.current }));
-            if (freeScroll) {
-                if (slideActionType.current === 'prev' && movement > 0) {
-                    state.cancel();
-                    setSpring.start({
-                        from: {
-                            val: getFromValue(),
-                        },
-                        to: {
-                            val: 0,
-                        },
-                        config: {
-                            velocity: state.velocity,
-                            friction: 50,
-                            tension: 1000,
-                        },
-                    });
-                    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('drag');
-                state.cancel();
-            }
-            else if (slideWhenThresholdIsReached && prevItemTreshold) {
-                slideToPrevItem('drag');
-                state.cancel();
-            }
-            return;
-        }
-        if (state.last && !state.canceled && freeScroll) {
-            if (slideActionType.current === 'prev') {
-                slideToPrevItem('drag');
-            }
-            if (slideActionType.current === 'next') {
-                slideToNextItem('drag');
-            }
-        }
-        if (state.last && !state.canceled && !freeScroll) {
-            if (nextItemTreshold) {
-                if (!withLoop && lastItemReached.current) {
-                    setSpring.start({
-                        val: -getTotalScrollValue(),
-                        config: Object.assign(Object.assign({}, web.config.default), { velocity: state.velocity }),
-                    });
-                }
-                else {
-                    slideToNextItem('drag');
-                }
-            }
-            else if (prevItemTreshold) {
-                if (!withLoop && firstItemReached.current) {
-                    setSpring.start({
-                        val: 0,
-                        config: Object.assign(Object.assign({}, web.config.default), { velocity: state.velocity }),
-                    });
-                }
-                else {
-                    slideToPrevItem('drag');
-                }
-            }
-            else {
-                setSpring.start({
-                    val: prevSlidedValue.current,
-                    config: Object.assign(Object.assign({}, web.config.default), { velocity: state.velocity }),
-                });
-            }
-        }
-    }, {
-        enabled: (init && !disableGestures && !freeScroll) ||
-            (!!freeScroll && !!enableFreeScrollDrag),
-        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) {
-        return items.findIndex(item => item.id === id);
-    }
-    function findItemIndexById(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) {
-            throw new Error(error);
-        }
-        return itemIndex;
-    }
-    function internalSlideToItem(id) {
-        if (!init)
-            return;
-        firstItemReached.current = false;
-        lastItemReached.current = false;
-        const itemIndex = findItemIndexById(id, "The item you want to slide to doesn't exist; please check che item id or the index you're passing to.");
-        if (itemIndex === activeItem.current) {
-            return;
-        }
-        const currentItem = findItemIndex(items[activeItem.current].id);
-        const newActiveItem = findItemIndex(items[itemIndex].id);
-        if (newActiveItem > currentItem) {
-            slideToNextItem('click', newActiveItem);
-        }
-        else {
-            slideToPrevItem('click', newActiveItem);
-        }
-    }
-    function getIsNextItem(id) {
-        const itemIndex = findItemIndex(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);
-        const _activeItem = activeItem.current;
-        if (withLoop && _activeItem === 0) {
-            return itemIndex === items.length - 1;
-        }
-        return itemIndex === _activeItem - 1;
-    }
-    const carouselFragment = (jsxRuntime.jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, getScrollHandlers(), { style: Object.assign({ display: 'flex', position: 'relative', width: '100%', height: '100%' }, getWrapperOverflowStyles()) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: carouselTrackWrapperRef }, bindDrag(), { style: Object.assign({ position: 'relative', display: 'flex', flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column', touchAction: 'none' }, getAnimatedWrapperStyles()) }, { children: internalItems.map((item, index) => {
-                return (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: Object.assign({ display: 'flex', position: 'relative', flex: '1' }, getItemStyles()) }, { children: item.renderItem }), `${item.id}-${index}`));
-            }) })) })));
-    return {
-        useListenToCustomEvent,
-        carouselFragment,
-        enterFullscreen,
-        exitFullscreen,
-        getIsFullscreen,
-        thumbsFragment,
-        slideToItem: internalSlideToItem,
-        getIsNextItem,
-        getIsPrevItem,
-        slideToPrevItem: () => slideToPrevItem(),
-        slideToNextItem: () => slideToNextItem(),
-        getIsActiveItem: (id) => {
-            return (findItemIndexById(id, "The item you want to check doesn't exist") ===
-                activeItem.current);
-        },
-    };
-}
-const Context = react.createContext(undefined);
-function useSpringCarouselContext() {
-    const context = react.useContext(Context);
-    if (!context) {
-        throw new Error('useSpringCarouselContext must be used within the carousel.');
-    }
-    return context;
-}
-
-exports.useSpringCarousel = useSpringCarousel;
-exports.useSpringCarouselContext = useSpringCarouselContext;
+"use strict";var e=require("react/jsx-runtime"),t=require("@react-spring/web"),n=require("react"),r=require("@use-gesture/react"),i=require("screenfull");function s(){const e=n.useRef(null);return n.useEffect((()=>{e.current=document.createElement("div")}),[]),{useListenToCustomEvent:function(t){n.useEffect((()=>{function n(e){t(e.detail)}if(e.current)return e.current.addEventListener("RSC::Event",n,!1),()=>{var t;null===(t=e.current)||void 0===t||t.removeEventListener("RSC::Event",n,!1)}}),[])},emitEvent:function(t){if(e.current){const n=new CustomEvent("RSC::Event",{detail:t});e.current.dispatchEvent(n)}}}}function c({thumbsSlideAxis:r="x",withThumbs:i=!1,prepareThumbsData:s,items:c}){const o=n.useRef(null),[l,u]=t.useSpring((()=>({val:0})));function a(){var e;return Math.round(Number(null===(e=o.current)||void 0===e?void 0:e["x"===r?"scrollWidth":"scrollHeight"])-o.current.getBoundingClientRect()["x"===r?"width":"height"])}return{thumbsFragment:i?e.jsx("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:o,onWheel:()=>l.val.stop(),style:Object.assign({display:"flex",flex:"1",position:"relative",width:"100%",height:"100%",flexDirection:"x"===r?"row":"column"},"x"===r?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"})},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return s?s(e(c)):e(c)}().map((({id:t,renderThumb:n})=>{const r=`thumb-item-${t}`;return e.jsx("div",Object.assign({id:r,className:"thumb-item"},{children:n}),r)}))})):null,handleScroll:function(e){var t,n;const i=o.current?o.current.querySelector(`#thumb-item-${c[e].id}`):null;if(i&&o.current&&!function(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}(i)){const e=i.offsetLeft,s=e>a()?a():e;u.start({from:{val:null!==(n=null===(t=o.current)||void 0===t?void 0:t["x"===r?"scrollLeft":"scrollTop"])&&void 0!==n?n:0},to:{val:s},onChange:({value:e})=>{o.current&&(o.current["x"===r?"scrollLeft":"scrollTop"]=Math.abs(e.val))}})}}}}const o=n.createContext(void 0);const l={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"relative"},enter:{position:"relative",opacity:1},leave:{opacity:1,position:"absolute"}};exports.useSpringCarousel=function({items:o,init:l=!0,withThumbs:u,thumbsSlideAxis:a="x",itemsPerSlide:d=1,slideType:f="fixed",gutter:g=0,withLoop:h=!1,startEndGutter:v=0,carouselSlideAxis:m="x",disableGestures:p=!1,draggingSlideTreshold:x,slideWhenThresholdIsReached:b=!1,freeScroll:y,enableFreeScrollDrag:w,initialStartingPosition:T,prepareThumbsData:j,initialActiveItem:E=0}){const O=d>o.length?o.length:d,R=n.useRef(0),S=n.useRef(null!=x?x:0),I=n.useRef("initial"),C=n.useRef("initial"),M=n.useRef(0),[F,L]=t.useSpring((()=>({val:0,pause:!l,onChange({value:e}){y&&k.current?("x"===m?k.current.scrollLeft=Math.abs(e.val):k.current.scrollTop=Math.abs(e.val),ne()):W.current&&(W.current.style.transform="x"===m?`translate3d(${e.val}px, 0px,0px)`:`translate3d(0px,${e.val}px,0px)`)}}))),N=n.useRef(E),$=n.useRef(0===E),A=n.useRef(!1),k=n.useRef(null),W=n.useRef(null),q=n.useCallback((()=>h?[...o.map((e=>Object.assign(Object.assign({},e),{id:`prev-repeated-item-${e.id}`}))),...o,...o.map((e=>Object.assign(Object.assign({},e),{id:`next-repeated-item-${e.id}`})))]:[...o]),[o,h])(),{emitEvent:P,useListenToCustomEvent:D}=s(),{thumbsFragment:B,handleScroll:H}=c({withThumbs:!!u,thumbsSlideAxis:a,prepareThumbsData:j,items:o}),{enterFullscreen:z,exitFullscreen:G,getIsFullscreen:X}=function({mainCarouselWrapperRef:e,onFullScreenChange:t,handleResize:r}){const s=n.useRef(!1);function c(e){s.current=e}return n.useEffect((()=>{function e(){document.fullscreenElement&&(c(!0),t(!0),r&&r()),document.fullscreenElement||(c(!1),t(!1),r&&r())}if(i.isEnabled)return i.on("change",e),()=>{i.isEnabled&&i.off("change",e)}}),[]),{enterFullscreen:function(t){i.isEnabled&&i.request(t||e.current)},exitFullscreen:function(){i.isEnabled&&i.exit()},getIsFullscreen:function(){return s.current}}}({mainCarouselWrapperRef:k,handleResize:()=>U(),onFullScreenChange:e=>{P({eventName:"onFullscreenChange",isFullscreen:e})}});function Y(){var e;const t=null===(e=k.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===m?"width":"height"]+g}function J({from:e,to:n,nextActiveItem:r,immediate:i=!1,slideMode:s}){C.current=s,"number"==typeof r&&(y||(N.current=r),P({eventName:"onSlideStartChange",slideActionType:I.current,slideMode:C.current,nextItem:{startReached:$.current,endReached:A.current,index:y?-1:N.current,id:y?"":o[N.current].id}})),M.current=n,L.start({immediate:i,from:{val:e},to:{val:n},config:Object.assign(Object.assign({},t.config.default),{velocity:F.val.velocity}),onRest(e){!i&&e.finished&&P({eventName:"onSlideChange",slideActionType:I.current,slideMode:C.current,currentItem:{startReached:$.current,endReached:A.current,index:y?-1:N.current,id:y?"":o[N.current].id}})}}),u&&!i&&H(N.current)}function K(){var e;return h?Y()*o.length:Math.round(Number(null===(e=W.current)||void 0===e?void 0:e["x"===m?"scrollWidth":"scrollHeight"])-W.current.getBoundingClientRect()["x"===m?"width":"height"]-2*v)}function Q(){var e;const t=null===(e=W.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===m?"width":"height"]+g}function U(){const e="x"===m?"left":"top";function t(t){const n=W.current;n&&(h?(n.style.top="0px",n.style.left="0px",n.style[e]=`-${t-v}px`):(n.style.left="0px",n.style.top="0px"))}const n=Math.abs(V());if(n<K()&&A.current&&(A.current=!1),n>K()){const e=-K();return A.current=!0,M.current=e,void L.start({immediate:!0,val:e})}if(t("center"===T?Q()*o.length-Y()*Math.round((O-1)/2):"end"===T?Q()*o.length-Y()*Math.round(O-1):Q()*o.length),!y&&"fixed"===f){const e=-Y()*N.current;M.current=e,L.start({immediate:!0,val:e})}}function V(){return y&&k.current?k.current["x"===m?"scrollLeft":"scrollTop"]:F.val.get()}function Z(e,t){if(y&&"next"===e){const e=M.current+Y();return e>K()?K():e}if(y&&"prev"===e){const e=M.current-Y();return e<0?0:e}return"next"===e?t?-t*Y():M.current-Y():t?-t*Y():M.current+Y()}function _(e="click",t){if(!l||$.current&&!h)return;I.current="prev",A.current=!1;const n=t||N.current-1;if(!h){const n=y?Z("prev",t)-Y()/3<0:Z("prev",t)+Y()/3>0;if($.current)return;if(n)return $.current=!0,A.current=!1,void J({slideMode:e,from:V(),to:0,nextActiveItem:0})}if(h&&$.current)return $.current=!1,A.current=!0,void J({slideMode:e,from:V()-Y()*o.length,to:-Y()*o.length+Y(),nextActiveItem:o.length-1});0===n&&($.current=!0),n!==o.length-1&&-1!==n||(A.current=!0),J({slideMode:e,from:V(),to:Z("prev",t),nextActiveItem:n})}function ee(e="click",t){if(!l||A.current&&!h)return;I.current="next",$.current=!1;const n=t||N.current+1;if(!h){const r=Math.abs(Z("next",t))>K()-Y()/3;if(A.current)return;if(r)return $.current=!1,A.current=!0,void J({slideMode:e,from:V(),to:y?K():-K(),nextActiveItem:n})}if(h&&A.current)return A.current=!1,$.current=!0,void J({slideMode:e,from:V()+Y()*o.length,to:0,nextActiveItem:0});0===n&&($.current=!0),n===o.length-1&&(A.current=!0),J({slideMode:e,from:V(),to:Z("next",t),nextActiveItem:n})}n.useEffect((()=>{if(l){if(E>o.length-1)throw new Error(`initialActiveItem (${E}) is greater than the total quantity available items (${o.length}).`);O>o.length&&console.warn(`itemsPerSlide (${O}) is greater than the total quantity available items (${o.length}). Fallback to ${o.length})`)}}),[E,o,O,l]),n.useEffect((()=>{R.current=window.innerWidth}),[]),n.useEffect((()=>{U()}),[T,O,h,v,g,y,f,l]),n.useLayoutEffect((()=>{W.current&&U()}),[]),n.useEffect((()=>{S.current=x||Math.floor(Y()/2/2)}),[x]),n.useEffect((()=>{function e(){window.innerWidth!==R.current&&(R.current=window.innerWidth,U())}return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const te=r.useDrag((e=>{const n=e.dragging,r=e.offset["x"===m?0:1],i=e.movement["x"===m?0:1],s=e.direction["x"===m?0:1],c=i>S.current,o=i<-S.current;if(n)return I.current=s>0?"prev":"next",P(Object.assign(Object.assign({},e),{eventName:"onDrag",slideActionType:I.current})),y?"prev"===I.current&&r>0?(e.cancel(),void L.start({from:{val:V()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}})):void L.start({from:{val:V()},to:{val:-r},config:{velocity:e.velocity,friction:50,tension:1e3}}):(L.start({val:r,config:{velocity:e.velocity,friction:50,tension:1e3}}),void(b&&o?(ee("drag"),e.cancel()):b&&c&&(_("drag"),e.cancel())));e.last&&!e.canceled&&y&&("prev"===I.current&&_("drag"),"next"===I.current&&ee("drag")),!e.last||e.canceled||y||(o?!h&&A.current?L.start({val:-K(),config:Object.assign(Object.assign({},t.config.default),{velocity:e.velocity})}):ee("drag"):c?!h&&$.current?L.start({val:0,config:Object.assign(Object.assign({},t.config.default),{velocity:e.velocity})}):_("drag"):L.start({val:M.current,config:Object.assign(Object.assign({},t.config.default),{velocity:e.velocity})}))}),{enabled:l&&!p&&!y||!!y&&!!w,axis:m,from:()=>y&&k.current?[-k.current.scrollLeft,-k.current.scrollTop]:[F.val.get(),F.val.get()]});function ne(){k.current&&(M.current=k.current["x"===m?"scrollLeft":"scrollTop"],0===k.current["x"===m?"scrollLeft":"scrollTop"]&&($.current=!0,A.current=!1),k.current["x"===m?"scrollLeft":"scrollTop"]>0&&k.current["x"===m?"scrollLeft":"scrollTop"]<K()&&($.current=!1,A.current=!1),k.current["x"===m?"scrollLeft":"scrollTop"]===K()&&($.current=!1,A.current=!0))}function re(e,t){let n=0;if(n="string"==typeof e?o.findIndex((t=>t.id===e)):e,n<0||n>=o.length){if(t)throw new Error(t);console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`),n=-1}return n}const ie=e.jsx("div",Object.assign({ref:k},y?{onWheel(){F.val.stop(),ne()}}:{},{style:Object.assign({display:"flex",position:"relative",width:"100%",height:"100%"},y?"x"===m?{overflowX:"auto"}:{overflowY:"auto"}:{})},{children:e.jsxs("div",Object.assign({ref:W},te(),{style:Object.assign({position:"relative",display:"flex",flexDirection:"x"===m?"row":"column",touchAction:"none"},function(){const e=`calc(100% - ${2*v}px)`;return{width:"x"===m?e:"100%",height:"y"===m?e:"100%"}}())},{children:[y&&v?e.jsx("div",{style:{flexShrink:0,width:v}}):null,q.map(((t,n)=>{return e.jsx("div",Object.assign({className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:Object.assign({display:"flex",position:"relative",flex:"1"},(r=!!y&&n===o.length-1,"fixed"!==f||y?Object.assign({marginRight:`${r?0:g}px`}):{marginRight:`${r?0:g}px`,flex:`1 0 calc(100% / ${O} - ${g*(O-1)/O}px)`}))},{children:t.renderItem}),`${t.id}-${n}`);var r})),y&&v?e.jsx("div",{style:{flexShrink:0,width:v}}):null]}))}));return y?{useListenToCustomEvent:D,carouselFragment:ie,enterFullscreen:z,exitFullscreen:G,getIsFullscreen:X,thumbsFragment:B,slideToPrevItem:()=>_(),slideToNextItem:()=>ee()}:{useListenToCustomEvent:D,carouselFragment:ie,enterFullscreen:z,exitFullscreen:G,getIsFullscreen:X,thumbsFragment:B,slideToPrevItem:()=>_(),slideToNextItem:()=>ee(),slideToItem:function(e){if(!l)return;$.current=!1,A.current=!1;const t=re(e,"The item you want to slide to doesn't exist; check the provided id.");if(t===N.current)return;const n=re(o[N.current].id),r=re(o[t].id);r>n?ee("click",r):_("click",r)},getIsNextItem:function(e){const t=re(e,"The item doesn't exist; check the provided id."),n=N.current;return h&&n===o.length-1?0===t:t===n+1},getIsPrevItem:function(e){const t=re(e,"The item doesn't exist; check the provided id."),n=N.current;return h&&0===n?t===o.length-1:t===n-1},getIsActiveItem:e=>re(e,"The item you want to check doesn't exist; check the provided id.")===N.current}},exports.useSpringCarouselContext=function(){const e=n.useContext(o);if(!e)throw new Error("useSpringCarouselContext must be used within the carousel.");return e},exports.useTransitionCarousel=function({init:i=!0,disableGestures:c=!1,items:o,springConfig:u=t.config.default,exitBeforeEnter:a=!1,trail:d,withLoop:f=!1,activeItem:g,toPrevItemSpringProps:h=l,toNextItemSpringProps:v=l,draggingSlideTreshold:m=50}){const p=n.useRef("next"),x=n.useRef("initial"),b=n.useRef(null),[y,w]=n.useState(null!=g?g:0),{emitEvent:T,useListenToCustomEvent:j}=s();function E({to:e,slideType:t,slideMode:n}){p.current=t,x.current=n,T({eventName:"onSlideStartChange",slideActionType:p.current,slideMode:x.current,nextItem:{index:e,id:o[e].id,startReached:0===e,endReached:e===o.length-1}}),w(e)}function O(e){if(!i)return;const t=0===y;!f&&t||E(f&&t?{to:o.length-1,slideType:"prev",slideMode:e}:{to:y-1,slideType:"prev",slideMode:e})}function R(e){if(!i)return;const t=y===o.length-1;!f&&t||E(f&&t?{to:0,slideType:"next",slideMode:e}:{to:y+1,slideType:"next",slideMode:e})}n.useEffect((()=>{"number"==typeof g&&g!==y&&w(g)}),[g]);const S=t.useTransition(y,Object.assign(Object.assign({config:u,key:null,trail:d,exitBeforeEnter:a},"prev"===p.current?{initial:Object.assign({},h.initial),from:Object.assign({},h.from),enter:Object.assign({},h.enter),leave:Object.assign({},h.leave)}:"next"===p.current?{initial:Object.assign({},v.initial),from:Object.assign({},v.from),enter:Object.assign({},v.enter),leave:Object.assign({},v.leave)}:{initial:Object.assign({},l.initial),from:Object.assign({},l.from),enter:Object.assign({},l.enter),leave:Object.assign({},l.leave)}),{onRest(e,t,n){e.finished&&n===y&&T({eventName:"onSlideChange",slideActionType:p.current,slideMode:x.current,currentItem:{index:y,id:o[y].id,startReached:0===y,endReached:y===o.length-1}})}})),I=r.useDrag((({last:e,movement:[t]})=>{if(e){const e=t>m,n=t<-m,r=0===y,i=y===o.length-1;if(n){if(!f&&i)return;T({eventName:"onLeftSwipe"}),R("swipe")}else if(e){if(!f&&r)return;T({eventName:"onRightSwipe"}),O("swipe")}}}),{enabled:!c}),C=S(((n,r,i,s)=>e.jsx(t.a.div,Object.assign({id:`use-transition-carousel-item-${s}`,className:"use-transition-carousel-item",style:Object.assign(Object.assign({},n),{flex:"1 0 100%",width:"100%",height:"100%"})},{children:o[r].renderItem}))));return{useListenToCustomEvent:j,carouselFragment:e.jsx("div",Object.assign({ref:b},I(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:C})),slideToPrevItem:()=>O("click"),slideToNextItem:()=>R("click")}};
 //# sourceMappingURL=index.js.map