react-spring-carousel 3.0.0-beta002 → 3.0.0-beta005

package/dist/esm/index.js

@@ -1,2 +1,8 @@
-export{useSpringCarousel,useSpringCarouselContext}from"./useSpringCarousel.js";import"react/jsx-runtime";import"@react-spring/web";import"react";import"./useThumbsModule-ce69c348.js";import"screenfull";import"@use-gesture/react";
+export { useSpringCarousel, useSpringCarouselContext } from './useSpringCarousel.js';
+import 'react/jsx-runtime';
+import './useThumbsModule-dc12dd34.js';
+import 'react';
+import 'screenfull';
+import 'react-dom';
+import '@use-gesture/react';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/index2.js

@@ -1,2 +1,6 @@
-export{u as useEventsModule,b as useFullscreenModule,a as useThumbsModule}from"./useThumbsModule-ce69c348.js";import"react";import"screenfull";import"react/jsx-runtime";import"@react-spring/web";
+export { a as useEventsModule, c as useFullscreenModule, b as useThumbsModule } from './useThumbsModule-dc12dd34.js';
+import 'react';
+import 'screenfull';
+import 'react/jsx-runtime';
+import 'react-dom';
 //# sourceMappingURL=index2.js.map

package/dist/esm/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/useSpringCarousel.js

@@ -1,2 +1,615 @@
-import{jsx as e}from"react/jsx-runtime";import{useSpring as t,config as r}from"@react-spring/web";import{createContext as n,useRef as i,useCallback as c,useEffect as o,useLayoutEffect as s,useContext as l}from"react";import{u,a,b as d}from"./useThumbsModule-ce69c348.js";import{useDrag as f}from"@use-gesture/react";import"screenfull";function g({items:n,init:l=!0,withThumbs:g,thumbsSlideAxis:m="x",itemsPerSlide:v=1,slideType:h="fixed",gutter:x=0,withLoop:p=!1,startEndGutter:b=0,carouselSlideAxis:y="x",disableGestures:w=!1,draggingSlideTreshold:T,slideWhenThresholdIsReached:I=!1,freeScroll:j,enableFreeScrollDrag:O,initialStartingPosition:M,prepareThumbsData:A,initialActiveItem:S=0}){const L=i(0),R=i(null!=T?T:0),$=i("initial"),C=i("initial"),E=i(0),[F,N]=t((()=>({val:0,pause:!l,onChange({value:e}){j&&P.current?(ce(),"x"===y?P.current.scrollLeft=Math.abs(e.val):P.current.scrollTop=Math.abs(e.val)):z.current&&(z.current.style.transform="x"===y?`translate3d(${e.val}px, 0px,0px)`:`translate3d(0px,${e.val}px,0px)`)}}))),W=i(S),k=i(0===S),D=i(!1),P=i(null),z=i(null),B=c((()=>p?[...n.map((e=>Object.assign(Object.assign({},e),{id:`prev-repeated-item-${e.id}`}))),...n,...n.map((e=>Object.assign(Object.assign({},e),{id:`next-repeated-item-${e.id}`})))]:[...n]),[n,p])(),{emitEvent:q,useListenToCustomEvent:G}=u(),{thumbsFragment:H,handleScroll:X}=a({withThumbs:!!g,thumbsSlideAxis:m,prepareThumbsData:A,items:n}),{enterFullscreen:Y,exitFullscreen:J,getIsFullscreen:K}=d({mainCarouselWrapperRef:P,emitEvent:q,handleResize:()=>_()});function Q(){var e;const t=null===(e=P.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===y?"width":"height"]+x}function U({from:e,to:t,nextActiveItem:i,immediate:c=!1,slideMode:o}){C.current=o,"number"==typeof i&&(j||(W.current=i),q({eventName:"onSlideStartChange",slideActionType:$.current,slideMode:C.current,nextItem:{startReached:k.current,endReached:D.current,index:j?-1:W.current,id:j?"":n[W.current].id}})),E.current=t,N.start({immediate:c,from:{val:e},to:{val:t},config:Object.assign(Object.assign({},r.default),{velocity:F.val.velocity}),onRest(e){!c&&e.finished&&q({eventName:"onSlideChange",slideActionType:$.current,slideMode:C.current,currentItem:{startReached:k.current,endReached:D.current,index:j?-1:W.current,id:j?"":n[W.current].id}})}}),g&&!c&&X(W.current)}function V(){var e;return p?Q()*n.length:Math.round(Number(null===(e=z.current)||void 0===e?void 0:e["x"===y?"scrollWidth":"scrollHeight"])-z.current.getBoundingClientRect()["x"===y?"width":"height"])}function Z(){var e;const t=null===(e=z.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===y?"width":"height"]+x}function _(){const e="x"===y?"left":"top";function t(t){const r=z.current;r&&(p?(r.style.top="0px",r.style.left="0px",r.style[e]=`-${t-b}px`):(r.style.left="0px",r.style.top="0px"))}const r=Math.abs(ee());if(r<V()&&D.current&&(D.current=!1),r>V()){const e=-V();return D.current=!0,E.current=e,void N.start({immediate:!0,val:e})}if(t("center"===M?Z()*n.length-Q()*Math.round((v-1)/2):"end"===M?Z()*n.length-Q()*Math.round(v-1):Z()*n.length),!j&&"fixed"===h){const e=-Q()*W.current;E.current=e,N.start({immediate:!0,val:e})}}function ee(){return j&&P.current?P.current["x"===y?"scrollLeft":"scrollTop"]:F.val.get()}function te(e,t){if(j&&"next"===e){const e=E.current+Q();return e>V()?V():e}if(j&&"prev"===e){const e=E.current-Q();return e<0?0:e}return"next"===e?t?-t*Q():E.current-Q():t?-t*Q():E.current+Q()}function re(e="click",t){if(!l||k.current&&!p)return;$.current="prev",D.current=!1;const r=t||W.current-1;if(!p){const r=te("prev",t)+Q()/3>0;if(k.current)return;if(r)return k.current=!0,D.current=!1,void U({slideMode:e,from:ee(),to:0,nextActiveItem:0})}if(p&&k.current)return k.current=!1,D.current=!0,void U({slideMode:e,from:ee()-Q()*n.length,to:-Q()*n.length+Q(),nextActiveItem:n.length-1});0===r&&(k.current=!0),r!==n.length-1&&-1!==r||(D.current=!0),U({slideMode:e,from:ee(),to:te("prev",t),nextActiveItem:r})}function ne(e="click",t){if(!l||D.current&&!p)return;$.current="next",k.current=!1;const r=t||W.current+1;if(!p){const n=Math.abs(te("next",t))>V()-Q()/3;if(D.current)return;if(n)return k.current=!1,D.current=!0,void U({slideMode:e,from:ee(),to:-V(),nextActiveItem:r})}if(p&&D.current)return D.current=!1,k.current=!0,void U({slideMode:e,from:ee()+Q()*n.length,to:0,nextActiveItem:0});0===r&&(k.current=!0),r===n.length-1&&(D.current=!0),U({slideMode:e,from:ee(),to:te("next",t),nextActiveItem:r})}o((()=>{L.current=window.innerWidth}),[]),o((()=>{_()}),[M,v,p,b,x,j,h,l]),s((()=>{z.current&&_()}),[]),o((()=>{R.current=T||Math.floor(Q()/2/2)}),[T]),o((()=>{function e(){window.innerWidth!==L.current&&(L.current=window.innerWidth,_())}return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const ie=f((e=>{const t=e.dragging,n=e.offset["x"===y?0:1],i=e.movement["x"===y?0:1],c=e.direction["x"===y?0:1],o=i>R.current,s=i<-R.current;if(t)return $.current=c>0?"prev":"next",q(Object.assign(Object.assign({},e),{eventName:"onDrag",slideActionType:$.current})),j?"prev"===$.current&&n>0?(e.cancel(),void N.start({from:{val:ee()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}})):void N.start({from:{val:ee()},to:{val:-n},config:{velocity:e.velocity,friction:50,tension:1e3}}):(N.start({val:n,config:{velocity:e.velocity,friction:50,tension:1e3}}),void(I&&s?(ne("drag"),e.cancel()):I&&o&&(re("drag"),e.cancel())));e.last&&!e.canceled&&j&&("prev"===$.current&&re("drag"),"next"===$.current&&ne("drag")),!e.last||e.canceled||j||(s?!p&&D.current?N.start({val:-V(),config:Object.assign(Object.assign({},r.default),{velocity:e.velocity})}):ne("drag"):o?!p&&k.current?N.start({val:0,config:Object.assign(Object.assign({},r.default),{velocity:e.velocity})}):re("drag"):N.start({val:E.current,config:Object.assign(Object.assign({},r.default),{velocity:e.velocity})}))}),{enabled:l&&!w&&!j||!!j&&!!O,axis:y,from:()=>j&&P.current?[-P.current.scrollLeft,-P.current.scrollTop]:[F.val.get(),F.val.get()]});function ce(){P.current&&(E.current=P.current["x"===y?"scrollLeft":"scrollTop"],0===P.current["x"===y?"scrollLeft":"scrollTop"]&&(k.current=!0,D.current=!1),P.current["x"===y?"scrollLeft":"scrollTop"]>0&&P.current["x"===y?"scrollLeft":"scrollTop"]<V()&&(k.current=!1,D.current=!1),P.current["x"===y?"scrollLeft":"scrollTop"]===V()&&(k.current=!1,D.current=!0))}function oe(e){return n.findIndex((t=>t.id===e))}function se(e,t){let r=0;if(r="string"==typeof e?n.findIndex((t=>t.id===e)):e,r<0||r>=n.length)throw new Error(t);return r}return{useListenToCustomEvent:G,carouselFragment:e("div",Object.assign({ref:P},j?{onWheel(){F.val.stop(),ce()}}:{},{style:Object.assign({display:"flex",position:"relative",width:"100%",height:"100%"},j?"x"===y?{overflowX:"auto"}:{overflowY:"auto"}:{})},{children:e("div",Object.assign({ref:z},ie(),{style:Object.assign({position:"relative",display:"flex",flexDirection:"x"===y?"row":"column",touchAction:"none"},function(){const e=`calc(100% - ${2*b}px)`;return{width:"x"===y?e:"100%",height:"y"===y?e:"100%"}}())},{children:B.map(((t,r)=>e("div",Object.assign({className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:Object.assign({display:"flex",position:"relative",flex:"1"},"fixed"!==h||j?Object.assign({marginRight:`${x}px`}):{marginRight:`${x}px`,flex:`1 0 calc(100% / ${v} - ${x*(v-1)/v}px)`})},{children:t.renderItem}),`${t.id}-${r}`)))}))})),enterFullscreen:Y,exitFullscreen:J,getIsFullscreen:K,thumbsFragment:H,slideToItem:function(e){if(!l)return;k.current=!1,D.current=!1;const t=se(e,"The item you want to slide to doesn't exist; please check che item id or the index you're passing to.");if(t===W.current)return;const r=oe(n[W.current].id),i=oe(n[t].id);i>r?ne("click",i):re("click",i)},getIsNextItem:function(e){const t=oe(e),r=W.current;return p&&r===n.length-1?0===t:t===r+1},getIsPrevItem:function(e){const t=oe(e),r=W.current;return p&&0===r?t===n.length-1:t===r-1},slideToPrevItem:()=>re(),slideToNextItem:()=>ne(),getIsActiveItem:e=>se(e,"The item you want to check doesn't exist")===W.current}}const m=n(void 0);function v(){const e=l(m);if(!e)throw new Error("useSpringCarouselContext must be used within the carousel.");return e}export{g as useSpringCarousel,v as useSpringCarouselContext};
+import { jsx } from 'react/jsx-runtime';
+import { u as useSpring, a as useEventsModule, b as useThumbsModule, c as useFullscreenModule, d as config } from './useThumbsModule-dc12dd34.js';
+import { createContext, useRef, useCallback, useEffect, useLayoutEffect, useContext } from 'react';
+import { useDrag } from '@use-gesture/react';
+import 'screenfull';
+import 'react-dom';
+
+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 = useRef(0);
+    const draggingSlideTreshold = useRef(_draggingSlideTreshold !== null && _draggingSlideTreshold !== void 0 ? _draggingSlideTreshold : 0);
+    const slideActionType = useRef('initial');
+    const slideModeType = useRef('initial');
+    const prevSlidedValue = useRef(0);
+    const [spring, setSpring] = 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 = useRef(initialActiveItem);
+    const firstItemReached = useRef(initialActiveItem === 0);
+    const lastItemReached = useRef(false);
+    const mainCarouselWrapperRef = useRef(null);
+    const carouselTrackWrapperRef = useRef(null);
+    const getItems = 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({}, 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,
+        });
+    }
+    useEffect(() => {
+        prevWindowWidth.current = window.innerWidth;
+    }, []);
+    useEffect(() => {
+        adjustCarouselWrapperPosition();
+    }, [
+        initialStartingPosition,
+        itemsPerSlide,
+        withLoop,
+        startEndGutter,
+        gutter,
+        freeScroll,
+        slideType,
+        init,
+    ]);
+    useLayoutEffect(() => {
+        /**
+         * Set initial track position
+         */
+        if (carouselTrackWrapperRef.current) {
+            adjustCarouselWrapperPosition();
+        }
+    }, []);
+    useEffect(() => {
+        if (_draggingSlideTreshold) {
+            draggingSlideTreshold.current = _draggingSlideTreshold;
+        }
+        else {
+            draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2);
+        }
+    }, [_draggingSlideTreshold]);
+    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 = 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({}, config.default), { velocity: state.velocity }),
+                    });
+                }
+                else {
+                    slideToNextItem('drag');
+                }
+            }
+            else if (prevItemTreshold) {
+                if (!withLoop && firstItemReached.current) {
+                    setSpring.start({
+                        val: 0,
+                        config: Object.assign(Object.assign({}, config.default), { velocity: state.velocity }),
+                    });
+                }
+                else {
+                    slideToPrevItem('drag');
+                }
+            }
+            else {
+                setSpring.start({
+                    val: prevSlidedValue.current,
+                    config: Object.assign(Object.assign({}, 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 = (jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, getScrollHandlers(), { style: Object.assign({ display: 'flex', position: 'relative', width: '100%', height: '100%' }, getWrapperOverflowStyles()) }, { children: 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 (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 = createContext(undefined);
+function useSpringCarouselContext() {
+    const context = useContext(Context);
+    if (!context) {
+        throw new Error('useSpringCarouselContext must be used within the carousel.');
+    }
+    return context;
+}
+
+export { useSpringCarousel, useSpringCarouselContext };
 //# sourceMappingURL=useSpringCarousel.js.map