react-spring-carousel 3.0.0-beta001 → 3.0.0-beta003

package/dist/umd/index.js

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