react-spring-carousel 3.0.0-beta002 → 3.0.0-beta003

package/dist/cjs/index.js

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