react-spring-carousel 2.0.5-beta002 → 2.0.5-beta005

package/dist/umd/index.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react"),require("react-spring"),require("@use-gesture/react"),require("rxjs"),require("screenfull")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react","react-spring","@use-gesture/react","rxjs","screenfull"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactSpringCarousel={},e.ReactJSXRuntime,e.React,e.reactSpring,e.UseGestureReact,e.rxjs,e.Screenfull)}(this,(function(e,t,r,n,i,u,o){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(o);function l(){const e=r.useRef(new u.Subject);return{useListenToCustomEvent:function(t){r.useEffect((()=>{const r=e.current.subscribe(t);return()=>r.unsubscribe()}),[t])},emitObservable:t=>{e.current.next(t)}}}const a="undefined"!=typeof window?r.useLayoutEffect:r.useEffect;function f(e){const t=r.useRef(!1);a((()=>{if(!t.current){const r=e();return t.current=!0,()=>{r&&r()}}}),[])}function d({mainCarouselWrapperRef:e,emitObservable:t,handleResize:n}){const i=r.useRef(!1);function u(e){i.current=e}return f((()=>{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(c.default.isEnabled)return c.default.on("change",e),()=>{c.default.isEnabled&&c.default.off("change",e)}})),{enterFullscreen:function(t){c.default.isEnabled&&c.default.request(t||e.current)},exitFullscreen:function(){c.default.isEnabled&&c.default.exit()},getIsFullscreen:function(){return i.current}}}function h({items:e,withThumbs:i,thumbsSlideAxis:u="x",springConfig:o,prepareThumbsData:s,getFluidWrapperScrollValue:c=(()=>0),getSlideValue:l=(()=>0),slideType:a}){const d=r.useRef(null),[h,m]=n.useSpring((()=>({x:0,y:0,config:o,onChange:({value:e})=>{d.current&&"fluid"===a&&(d.current["x"===u?"scrollLeft":"scrollTop"]=Math.abs(e[u]))}})));function g(){return d.current["x"===u?"scrollLeft":"scrollTop"]}function p(){return Math.round(Number(d.current?.["x"===u?"scrollWidth":"scrollHeight"])-d.current.getBoundingClientRect()["x"===u?"width":"height"])}function x(){const e=Math.round(c()/l());return p()/e}f((()=>{if(i&&!d.current)throw new Error("The thumbs wrapper is not defined. If you've passed a Functional component, be sure to wrap your component in forwardRef.")}));return{thumbsFragment:i?t.jsx(n.animated.div,{ref:d,className:"use-spring-carousel-thumbs-wrapper",onWheel:()=>{h[u].stop()},style:{display:"flex",flex:1,position:"relative",width:"100%",height:"100%",flexDirection:"x"===u?"row":"column",..."x"===u?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"}},children:function(){function t(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return s?s(t(e)):t(e)}().map((({id:e,renderThumb:r})=>{const n=`thumb-${e}`;return t.jsx("div",{id:n,className:"thumb-item",children:r},n)}))}):null,handleThumbsScroll:function(t,r){if("fluid"===a){const e=p();if("next"===r){const t=g()+x();m.start({from:{[u]:g()},to:{[u]:t>e?e:t}})}if("prev"===r){const e=g()-x();m.start({from:{[u]:g()},to:{[u]:e<0?0:e}})}}else{const n=d.current.querySelector(`#thumb-${e[t].id}`);if(n){const i=d.current,o="x"===u?"offsetWidth":"offsetHeight",s="x"===u?"scrollLeft":"scrollTop",c=function({thumbNode:e,offsetDirection:t,offsetDimension:r}){return e[t]+e[r]/2}({thumbNode:n,offsetDimension:o,offsetDirection:"x"===u?"offsetLeft":"offsetTop"}),l=function({thumbWrapper:e,offsetDimension:t}){return e[t]/2}({thumbWrapper:i,offsetDimension:o}),a=function({thumbWrapper:e,scrollDirection:t}){return e[t]}({thumbWrapper:i,scrollDirection:s}),f=function({thumbWrapper:r,thumbOffsetPosition:n,thumbScrollDimension:i,offsetDimension:o}){const s="x"===u?"scrollWidth":"scrollHeight";return t===e.length-1||n-i>r[s]-r[o]?r[s]-r[o]:0===t?0:n-i}({thumbWrapper:i,thumbOffsetPosition:c,thumbScrollDimension:l,offsetDimension:o});m.start({from:{[u]:a},to:{[u]:"prev"===r&&f<0?0:f},onChange:({value:e})=>{"x"===u?d.current.scrollLeft=e.x:d.current.scrollTop=e.y}})}}}}}const m=r.createContext(void 0);const g=r.createContext(void 0);e.useSpringCarousel=function({items:e,withLoop:u=!1,draggingSlideTreshold:o,springConfig:s=n.config.default,shouldResizeOnWindowResize:c=!0,withThumbs:g=!1,enableThumbsWrapperScroll:p=!0,carouselSlideAxis:x="x",thumbsSlideAxis:b="x",prepareThumbsData:v,initialActiveItem:w=0,initialStartingPosition:y,disableGestures:T=!1,gutter:S=0,startEndGutter:R=0,touchAction:C,slideAmount:I,freeScroll:E=!1,enableFreeScrollDrag:A,itemsPerSlide:N=1,slideType:F="fixed"}){const W=r.useRef(!0),D=r.useRef("initial"),L=u?e.length===N?[...e,...e,...e,...e,...e]:[...e,...e,...e]:e,P=r.useRef(w),j=r.useRef(null),$=r.useRef(null),M=r.useRef(!1),O=r.useRef(!1),q=r.useRef(!1),z=r.useRef(0),B=r.useRef(!1),H=r.useRef(0),k=r.useRef(0),G=r.useRef(0),V=r.useRef(e),X=r.useRef(o??0),Y=r.useRef(N),_=r.useRef(S),J=r.useRef(R),U=r.useRef(w),K=r.useRef(y),Q=r.useRef(x);Y.current=N,_.current=S,J.current=R,U.current=w,K.current=y,Q.current=x;const[Z,ee]=n.useSpring((()=>({y:0,x:0,config:s,onChange:({value:e})=>{j.current&&E&&(j.current["x"===Q.current?"scrollLeft":"scrollTop"]=Math.abs(e[Q.current]))}})));function te(){const e=$.current?.querySelector(".use-spring-carousel-item");if(!e)throw Error("No carousel items available!");return e.getBoundingClientRect()["x"===Q.current?"width":"height"]+_.current}function re(){return Z[Q.current].get()}function ne(){return te()*e.length<function(){if(!j.current)throw new Error("mainCarouselWrapperRef is not available");return j.current.getBoundingClientRect()["x"===Q.current?"width":"height"]}()}function ie(){return Math.round(Number($.current?.["x"===Q.current?"scrollWidth":"scrollHeight"])-$.current.getBoundingClientRect()["x"===Q.current?"width":"height"])}function ue(){return 0===Te()}function oe(){if(!$.current)return 0;const e=te();if("fluid"===F&&"number"==typeof I){if(I<e)throw new Error("slideAmount must be greater than the width of a single item.");return I}return e}function se(t,r){const n="x"===Q.current?"left":"top";function i(){return te()*e.length}function o(e){u?(t.style.top="0px",t.style[n]=`-${e-J.current}px`):(t.style.left="0px",t.style.top="0px",r&&W.current&&(t.style[n]=`calc(-${r} * 100%)`))}function s(){o(i())}if("fixed"===F){if(Y.current>1)switch(K.current){default:case"start":s();break;case"center":c=Y.current,o(i()-oe()*Math.round((c-1)/2));break;case"end":!function(e){o(i()-oe()*Math.round(e-1))}(Y.current)}else s()}else s();var c}function ce(){if(H.current=window.innerWidth,"fluid"===F){if(ne())return void ee.start({immediate:!0,[Q.current]:0});if(z.current=ie(),B.current){const e=-z.current;ee.start({immediate:!0,[Q.current]:e})}k.current=window.innerWidth}else ee.start({immediate:!0,[Q.current]:-oe()*Te()});z.current=ie(),se($.current)}function le(){window.innerWidth===H.current||E||ce()}a((()=>{X.current=o||Math.floor(oe()/2/2),ce()}),[o,N,S,R,w,y,x,b]);const{useListenToCustomEvent:ae,emitObservable:fe}=l(),{enterFullscreen:de,exitFullscreen:he,getIsFullscreen:me}=d({mainCarouselWrapperRef:j,emitObservable:fe,handleResize:le}),{thumbsFragment:ge,handleThumbsScroll:pe}=h({withThumbs:g,items:e,thumbsSlideAxis:b,springConfig:s,prepareThumbsData:v,slideType:F,getFluidWrapperScrollValue:ie,getSlideValue:oe});function xe(){if(!j.current)throw new Error("Missing mainCarouselWrapperRef.current");return j.current["x"===Q.current?"scrollLeft":"scrollTop"]}const be=i.useDrag((e=>{const t=e.dragging,r=e.offset["x"===Q.current?0:1],n=e.movement["x"===Q.current?0:1],i=n>X.current,o=n<-X.current,s=e.direction["x"===Q.current?0:1];function c(){e.cancel()}function l(){"fluid"===F?ne()||ue()&&"prev"===we()?ee.start({[Q.current]:0}):B.current&&"next"===we()?ee.start({[Q.current]:-z.current}):ee.start({[Q.current]:G.current}):ee.start({[Q.current]:-Te()*oe()})}if(t){Ce()||Re(!0),fe({eventName:"onDrag",slideActionType:we(),...e}),ve(s>0?"prev":"next");if(Math.abs(re())+100>=z.current&&"next"===we()&&(B.current=!0),"prev"===we()&&(B.current=!1),E){if("boolean"==typeof A?A:"function"==typeof A&&A()){if(0===xe()&&"prev"===we())return void c();ee.start({from:{[Q.current]:xe()},to:{[Q.current]:-r}})}return}if(ee.start({[Q.current]:r}),(i||o)&&ne()&&"fluid"===F)c(),l();else if(B.current&&"next"===we()&&o)B.current=!1,c(),ee.start({[Q.current]:-z.current});else{if(o)return c(),void(!u&&De()?l():Pe());if(i)return c(),void(!u&&ue()?l():Le())}}!e.last||o||i||E||(l(),fe({eventName:"onDrag",slideActionType:we(),...e}))}),{enabled:!T,from:()=>E?"x"===Q.current?[-xe(),0]:[0,-xe()]:[Z.x.get(),Z.y.get()]});function ve(e){D.current=e}function we(){return D.current}function ye(e){P.current=e}function Te(){return P.current}function Se(e){O.current=e}function Re(e){M.current=e}function Ce(){return M.current}function Ie(){const t=Te();return 0===t?e.length-1:t-1}function Ee(){const t=Te();return t===e.length-1?0:t+1}function Ae(t){return e.findIndex((e=>e.id===t))}function Ne(e){return"number"==typeof e?{from:{[Q.current]:e}}:{}}function Fe(e,t){if("number"==typeof e)return{[Q.current]:e};if("number"!=typeof t)throw new Error("to values is not a number!");return{[Q.current]:-oe()*t}}function We({from:t,to:r=-1,customTo:n,immediate:i=!1,onRest:u=(()=>{})}){i||(ye(r),Se(!0),fe({eventName:"onSlideStartChange",slideActionType:we(),nextItem:{index:"fluid"===F?-1:r,id:"fluid"===F?"":e[r].id}})),G.current=Fe(n,r)[x],ee.start({...Ne(t),to:Fe(n,r),immediate:i,onRest:t=>{t.finished&&(Re(!1),Se(!1),u(),i||fe({eventName:"onSlideChange",slideActionType:we(),currentItem:{index:"fluid"===F?-1:Te(),id:"fluid"===F?"":e[Te()].id}}))}}),p&&g&&!i&&pe(r,we())}function De(){return Te()===e.length-1}function Le(){if(ve("prev"),B.current=!1,"fluid"===F){if(B.current=!1,ne())return;const t=re()+oe()+200;if(E){const e=j.current.scrollLeft-oe();We({customTo:e<0?0:e,from:j.current.scrollLeft})}else We(t>=0?u?{from:re()-te()*e.length,customTo:re()-te()*e.length+oe()}:{customTo:0}:{customTo:re()+oe()})}else{if(!u&&0===Te()||q.current)return;ue()?We({from:re()-oe()*e.length,to:e.length-1}):We({to:Ie()})}}function Pe(){if(ve("next"),"fluid"===F){if(ne())return;const t=Math.abs(re()-oe())+100>=z.current;if(E){const e=j.current.scrollLeft+oe()>z.current,t=j.current.scrollLeft+oe();We({customTo:e?z.current:t,from:j.current.scrollLeft})}else if(u&&Math.abs(re()-oe())>=e.length*te()){const t=te()*e.length;We({from:re()+t,customTo:re()+t-oe()})}else{if(B.current)return;t?(B.current=!0,We({customTo:-z.current})):We({customTo:re()-oe()})}}else{if(!u&&Te()===L.length-1||q.current)return;Math.abs(re()-oe()+25)>z.current&&!Ce()?B.current=!0:B.current?We({to:e.length-Y.current}):De()?We({from:re()+oe()*e.length,to:0}):We({to:Ee()})}}function je(t){let r=0;if(r="string"==typeof t?e.findIndex((e=>e.id===t)):t,r>=e.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n        you provide a wrong id or a higher numeric index.");if(r===Te()||e.length!==V.current.length&&Te()<e.length)return;const n=Ae(V.current[Te()].id);ve(Ae(e[r].id)>n?"next":"prev"),We({to:r})}f((()=>{if(N%2==0&&K.current)throw new Error("initialStartingPosition can be only used if itemsPerSlide is an even value.");if(X.current<0)throw new Error("draggingSlideTreshold must be greater than 0");if(X.current>oe()/2)throw new Error(`draggingSlideTreshold must be equal or less than the half of the width of an item, which is ${Math.floor(oe()/2)}`);if(Y.current<1)throw new Error("The itemsPerSlide prop can't be less than 1.");if(Y.current>e.length)throw new Error("The itemsPerSlide prop can't be greater than the total length of the items you provide.");if(U.current<0)throw new Error("The initialActiveItem cannot be less than 0.");if(U.current>e.length)throw new Error("The initialActiveItem cannot be greater than the total length of the items you provide.");c||console.warn("You set shouldResizeOnWindowResize={false}; be aware that the carousel could behave in a strange way if you also use the fullscreen functionality or if you change the mobile orientation.")})),f((()=>{function e(){document.hidden?q.current=!0:q.current=!1}return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}})),f((()=>{W.current=!1,z.current=ie(),k.current=window.innerWidth,H.current=window.innerWidth,w>0&&(We({to:w,immediate:!0}),ye(w),!u&&$.current&&($.current.style.top="0px",$.current.style.left="0px"))})),a((()=>{U.current<e.length&&U.current!==P.current&&(We({to:U.current,immediate:!0}),ye(U.current))}),[]),a((()=>{if(c)return window.addEventListener("resize",le),()=>{window.removeEventListener("resize",le)}}),[c]),a((()=>{$.current&&("x"===Q.current&&($.current.style.top="0px"),"y"===Q.current&&($.current.style.left="0px"))}),[x]),a((()=>{z.current=ie();!(e.length===V.current.length)&&e.length<V.current.length&&je(e.length-1),V.current=e}),[ie,e]);const $e={useListenToCustomEvent:ae,getIsFullscreen:me,enterFullscreen:de,exitFullscreen:he,getIsAnimating:function(){return O.current},getIsDragging:Ce,getIsNextItem:function(t){const r=Ae(t),n=Te();return u&&n===e.length-1?0===r:r===n+1},getIsPrevItem:function(t){const r=Ae(t),n=Te();return u&&0===n?r===e.length-1:r===n-1},slideToPrevItem:Le,slideToNextItem:Pe,..."fixed"===F?{slideToItem:je,getIsActiveItem:e=>Ae(e)===Te(),getCurrentActiveItem:()=>({id:e[Te()].id,index:Te()})}:{}},Me=t.jsx(m.Provider,{value:$e,children:t.jsx("div",{ref:j,className:"use-spring-carousel-main-wrapper","data-testid":"use-spring-carousel-wrapper",...E?{onWheel(){Z[Q.current].stop()}}:{},style:{display:"flex",position:"relative",width:"100%",height:"100%",...E?"x"===Q.current?{overflowX:"auto"}:{overflowY:"auto"}:{}},children:t.jsx(n.animated.div,{...be(),className:"use-spring-carousel-track-wrapper","data-testid":"use-spring-carousel-animated-wrapper",ref:e=>{e&&($.current=e,se(e,U.current))},style:{display:"flex",position:"relative",touchAction:T?"unset":C||("x"===Q.current?"pan-y":"pan-x"),flexDirection:"x"===Q.current?"row":"column",...function(){const e=`calc(100% - ${2*J.current}px)`;return{width:"x"===Q.current?e:"100%",height:"y"===Q.current?e:"100%"}}(),...function(){const t=e.length/N*100,r=100/N,n="x"===Q.current?"left":"y",i=Math.floor(50/r);if("fixed"===F){if("center"===K.current)return{[n]:`calc(-${t}% + ${r*i}%)`};if("end"===K.current)return{[n]:`calc(-${t}% + ${r*(2*i)}%)`}}return{[n]:"0px"}}(),...E?{}:Z},children:L.map((({id:e,renderItem:r},n)=>{return t.jsx("div",{className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:{display:"flex",position:"relative",...(i=Y.current,"fixed"===F?{..."x"===Q.current?{marginRight:`${_.current}px`}:{marginBottom:`${_.current}px`},flex:`1 0 calc(100% / ${i} - ${_.current*(i-1)/i}px)`}:{..."x"===Q.current?{marginRight:`${_.current}px`}:{marginBottom:`${_.current}px`}})},children:r},`${e}-${n}`);var i}))})})}),Oe=t.jsx(m.Provider,{value:$e,children:ge});return{...$e,carouselFragment:Me,thumbsFragment:Oe}},e.useSpringCarouselContext=function(){const e=r.useContext(m);if(!e)throw new Error("useSpringCarouselContext must be used only inside a component that is rendered inside the Carousel.");return e},e.useTransitionCarousel=function({items:e,withLoop:u=!1,withThumbs:o=!1,springConfig:s=n.config.default,thumbsSlideAxis:c="x",enableThumbsWrapperScroll:a=!0,draggingSlideTreshold:f=50,prepareThumbsData:m,toPrevItemSpringProps:p,toNextItemSpringProps:x,disableGestures:b=!1,trail:v,exitBeforeEnter:w=!1,springAnimationProps:y={initial:{opacity:1,position:"absolute"},from:{opacity:0,position:"absolute"},enter:{opacity:1,position:"absolute"},leave:{opacity:0,position:"absolute"}}}){const T=r.useRef("next"),S=r.useRef(null),R=r.useRef(!1),[C,I]=r.useState(0),{emitObservable:E,useListenToCustomEvent:A}=l(),{enterFullscreen:N,exitFullscreen:F,getIsFullscreen:W}=d({emitObservable:E,mainCarouselWrapperRef:S}),{thumbsFragment:D,handleThumbsScroll:L}=h({items:e,withThumbs:o,thumbsSlideAxis:c,springConfig:s,prepareThumbsData:m,slideType:"fixed"}),P=i.useDrag((({last:t,movement:[r]})=>{if(!$()&&t){const t=r>f,n=r<-f,i=0===C,o=C===e.length-1;if(n){if(!u&&o)return;z(),E({eventName:"onLeftSwipe"})}else if(t){if(!u&&i)return;B(),E({eventName:"onRightSwipe"})}}}),{enabled:!b}),j=n.useTransition(C,{config:s,...function(){const e=q();return"prev"===e&&p?{initial:{...y.initial},from:{...p.from},enter:{...p.enter},leave:{...p.leave}}:"next"===e&&x?{initial:{...y.initial},from:{...x.from},enter:{...x.enter},leave:{...x.leave}}:{initial:{...y.initial},from:{...y.from},enter:{...y.enter},leave:{...y.leave}}}(),onStart:()=>M(!0),trail:v,exitBeforeEnter:w,key:e[C].id,onRest:t=>{t.finished&&(M(!1),E({eventName:"onSlideChange",slideActionType:q(),currentItem:{index:C,id:e[C].id}}))}})(((r,i)=>t.jsx(n.animated.div,{style:{...r,flex:"1 0 100%",width:"100%",height:"100%"},children:e[i].renderItem})));function $(){return R.current}function M(e){R.current=e}function O(e){T.current=e}function q(){return T.current}function z(){const t=C===e.length-1;u?(O("next"),t?(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:0,id:e[0].id}}),I(0)):(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:C+1,id:e[C+1].id}}),I(C+1))):t||(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:C+1,id:e[C+1].id}}),O("next"),I(C+1))}function B(){const t=0===C;u?(O("prev"),t?(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:e.length-1,id:e[e.length-1].id}}),I(e.length-1)):(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:C-1,id:e[C-1].id}}),I(C-1))):t||(O("prev"),E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:C-1,id:e[C-1].id}}),I(C-1))}function H(t){return e.findIndex((e=>e.id===t))}const k={activeItem:C,slideToItem:function(t){let r=0;if(r="string"==typeof t?e.findIndex((e=>e.id===t)):t,r>=e.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n        you provide a wrong id or a higher numeric index.");if(r===C)return;const n=H(e[C].id),i=H(e[r].id);E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:i,id:e[r].id}}),O(i>n?"next":"prev"),I(r),a&&o&&L(r)},slideToNextItem:z,slideToPrevItem:B,enterFullscreen:N,exitFullscreen:F,useListenToCustomEvent:A,getIsNextItem:function(t){const r=H(t);return u&&C===e.length-1?0===r:r===C+1},getIsPrevItem:function(t){const r=H(t);return u&&0===C?r===e.length-1:r===C-1},getIsAnimating:$,getIsFullscreen:W,getIsActiveItem:e=>H(e)===C,getCurrentActiveItem:()=>({id:e[C].id,index:C})};return{carouselFragment:t.jsx(g.Provider,{value:k,children:t.jsx("div",{ref:S,...P(),style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:j})}),thumbsFragment:t.jsx(g.Provider,{value:k,children:D}),...k}},e.useTransitionCarouselContext=function(){const e=r.useContext(g);if(!e)throw new Error("useTransitionCarouselContext isn't being used within the useTransitionCarousel context; \n    use the context only inside a component that is rendered within the Carousel.");return e},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react"),require("react-spring"),require("@use-gesture/react"),require("rxjs"),require("screenfull")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react","react-spring","@use-gesture/react","rxjs","screenfull"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactSpringCarousel={},e.ReactJSXRuntime,e.React,e.ReactSpring,e.UseGestureReact,e.rxjs,e.Screenfull)}(this,(function(e,t,r,n,i,u,o){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(o);function l(){const e=r.useRef(new u.Subject);return{useListenToCustomEvent:function(t){r.useEffect((()=>{const r=e.current.subscribe(t);return()=>r.unsubscribe()}),[t])},emitObservable:t=>{e.current.next(t)}}}const a="undefined"!=typeof window?r.useLayoutEffect:r.useEffect;function f(e){const t=r.useRef(!1);a((()=>{if(!t.current){const r=e();return t.current=!0,()=>{r&&r()}}}),[])}function d({mainCarouselWrapperRef:e,emitObservable:t,handleResize:n}){const i=r.useRef(!1);function u(e){i.current=e}return f((()=>{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(c.default.isEnabled)return c.default.on("change",e),()=>{c.default.isEnabled&&c.default.off("change",e)}})),{enterFullscreen:function(t){c.default.isEnabled&&c.default.request(t||e.current)},exitFullscreen:function(){c.default.isEnabled&&c.default.exit()},getIsFullscreen:function(){return i.current}}}function h({items:e,withThumbs:i,thumbsSlideAxis:u="x",springConfig:o,prepareThumbsData:s,getFluidWrapperScrollValue:c=(()=>0),getSlideValue:l=(()=>0),slideType:a}){const d=r.useRef(null),[h,m]=n.useSpring((()=>({x:0,y:0,config:o,onChange:({value:e})=>{d.current&&"fluid"===a&&(d.current["x"===u?"scrollLeft":"scrollTop"]=Math.abs(e[u]))}})));function g(){return d.current["x"===u?"scrollLeft":"scrollTop"]}function p(){return Math.round(Number(d.current?.["x"===u?"scrollWidth":"scrollHeight"])-d.current.getBoundingClientRect()["x"===u?"width":"height"])}function x(){const e=Math.round(c()/l());return p()/e}f((()=>{if(i&&!d.current)throw new Error("The thumbs wrapper is not defined. If you've passed a Functional component, be sure to wrap your component in forwardRef.")}));return{thumbsFragment:i?t.jsx(n.animated.div,{ref:d,className:"use-spring-carousel-thumbs-wrapper",onWheel:()=>{h[u].stop()},style:{display:"flex",flex:1,position:"relative",width:"100%",height:"100%",flexDirection:"x"===u?"row":"column",..."x"===u?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"}},children:function(){function t(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return s?s(t(e)):t(e)}().map((({id:e,renderThumb:r})=>{const n=`thumb-${e}`;return t.jsx("div",{id:n,className:"thumb-item",children:r},n)}))}):null,handleThumbsScroll:function(t,r){if("fluid"===a){const e=p();if("next"===r){const t=g()+x();m.start({from:{[u]:g()},to:{[u]:t>e?e:t}})}if("prev"===r){const e=g()-x();m.start({from:{[u]:g()},to:{[u]:e<0?0:e}})}}else{const n=d.current.querySelector(`#thumb-${e[t].id}`);if(n){const i=d.current,o="x"===u?"offsetWidth":"offsetHeight",s="x"===u?"scrollLeft":"scrollTop",c=function({thumbNode:e,offsetDirection:t,offsetDimension:r}){return e[t]+e[r]/2}({thumbNode:n,offsetDimension:o,offsetDirection:"x"===u?"offsetLeft":"offsetTop"}),l=function({thumbWrapper:e,offsetDimension:t}){return e[t]/2}({thumbWrapper:i,offsetDimension:o}),a=function({thumbWrapper:e,scrollDirection:t}){return e[t]}({thumbWrapper:i,scrollDirection:s}),f=function({thumbWrapper:r,thumbOffsetPosition:n,thumbScrollDimension:i,offsetDimension:o}){const s="x"===u?"scrollWidth":"scrollHeight";return t===e.length-1||n-i>r[s]-r[o]?r[s]-r[o]:0===t?0:n-i}({thumbWrapper:i,thumbOffsetPosition:c,thumbScrollDimension:l,offsetDimension:o});m.start({from:{[u]:a},to:{[u]:"prev"===r&&f<0?0:f},onChange:({value:e})=>{"x"===u?d.current.scrollLeft=e.x:d.current.scrollTop=e.y}})}}}}}const m=r.createContext(void 0);const g=r.createContext(void 0);e.useSpringCarousel=function({items:e,withLoop:u=!1,draggingSlideTreshold:o,springConfig:s=n.config.default,shouldResizeOnWindowResize:c=!0,withThumbs:g=!1,enableThumbsWrapperScroll:p=!0,carouselSlideAxis:x="x",thumbsSlideAxis:b="x",prepareThumbsData:v,initialActiveItem:w=0,initialStartingPosition:y,disableGestures:T=!1,gutter:S=0,startEndGutter:R=0,touchAction:C,slideAmount:I,freeScroll:E=!1,enableFreeScrollDrag:A,itemsPerSlide:N=1,slideType:F="fixed"}){const W=r.useRef(!0),D=r.useRef("initial"),L=u?e.length===N?[...e,...e,...e,...e,...e]:[...e,...e,...e]:e,P=r.useRef(w),j=r.useRef(null),$=r.useRef(null),M=r.useRef(!1),O=r.useRef(!1),q=r.useRef(!1),z=r.useRef(0),B=r.useRef(!1),H=r.useRef(0),k=r.useRef(0),G=r.useRef(0),V=r.useRef(e),X=r.useRef(o??0),Y=r.useRef(N),_=r.useRef(S),J=r.useRef(R),U=r.useRef(w),K=r.useRef(y),Q=r.useRef(x);Y.current=N,_.current=S,J.current=R,U.current=w,K.current=y,Q.current=x;const[Z,ee]=n.useSpring((()=>({y:0,x:0,config:s,onChange:({value:e})=>{j.current&&E&&(j.current["x"===Q.current?"scrollLeft":"scrollTop"]=Math.abs(e[Q.current]))}})));function te(){const e=$.current?.querySelector(".use-spring-carousel-item");if(!e)throw Error("No carousel items available!");return e.getBoundingClientRect()["x"===Q.current?"width":"height"]+_.current}function re(){return Z[Q.current].get()}function ne(){return te()*e.length<function(){if(!j.current)throw new Error("mainCarouselWrapperRef is not available");return j.current.getBoundingClientRect()["x"===Q.current?"width":"height"]}()}function ie(){return Math.round(Number($.current?.["x"===Q.current?"scrollWidth":"scrollHeight"])-$.current.getBoundingClientRect()["x"===Q.current?"width":"height"])}function ue(){return 0===Te()}function oe(){if(!$.current)return 0;const e=te();if("fluid"===F&&"number"==typeof I){if(I<e)throw new Error("slideAmount must be greater than the width of a single item.");return I}return e}function se(t,r){const n="x"===Q.current?"left":"top";function i(){return te()*e.length}function o(e){u?(t.style.top="0px",t.style[n]=`-${e-J.current}px`):(t.style.left="0px",t.style.top="0px",r&&W.current&&(t.style[n]=`calc(-${r} * 100%)`))}function s(){o(i())}if("fixed"===F){if(Y.current>1)switch(K.current){default:case"start":s();break;case"center":c=Y.current,o(i()-oe()*Math.round((c-1)/2));break;case"end":!function(e){o(i()-oe()*Math.round(e-1))}(Y.current)}else s()}else s();var c}function ce(){if(H.current=window.innerWidth,"fluid"===F){if(ne())return void ee.start({immediate:!0,[Q.current]:0});if(z.current=ie(),B.current){const e=-z.current;ee.start({immediate:!0,[Q.current]:e})}k.current=window.innerWidth}else ee.start({immediate:!0,[Q.current]:-oe()*Te()});z.current=ie(),se($.current)}function le(){window.innerWidth===H.current||E||ce()}a((()=>{X.current=o||Math.floor(oe()/2/2),ce()}),[o,N,S,R,w,y,x,b]);const{useListenToCustomEvent:ae,emitObservable:fe}=l(),{enterFullscreen:de,exitFullscreen:he,getIsFullscreen:me}=d({mainCarouselWrapperRef:j,emitObservable:fe,handleResize:le}),{thumbsFragment:ge,handleThumbsScroll:pe}=h({withThumbs:g,items:e,thumbsSlideAxis:b,springConfig:s,prepareThumbsData:v,slideType:F,getFluidWrapperScrollValue:ie,getSlideValue:oe});function xe(){if(!j.current)throw new Error("Missing mainCarouselWrapperRef.current");return j.current["x"===Q.current?"scrollLeft":"scrollTop"]}const be=i.useDrag((e=>{const t=e.dragging,r=e.offset["x"===Q.current?0:1],n=e.movement["x"===Q.current?0:1],i=n>X.current,o=n<-X.current,s=e.direction["x"===Q.current?0:1];function c(){e.cancel()}function l(){"fluid"===F?ne()||ue()&&"prev"===we()?ee.start({[Q.current]:0}):B.current&&"next"===we()?ee.start({[Q.current]:-z.current}):ee.start({[Q.current]:G.current}):ee.start({[Q.current]:-Te()*oe()})}if(t){Ce()||Re(!0),fe({eventName:"onDrag",slideActionType:we(),...e}),ve(s>0?"prev":"next");if(Math.abs(re())+100>=z.current&&"next"===we()&&(B.current=!0),"prev"===we()&&(B.current=!1),E){if("boolean"==typeof A?A:"function"==typeof A&&A()){if(0===xe()&&"prev"===we())return void c();ee.start({from:{[Q.current]:xe()},to:{[Q.current]:-r}})}return}if(ee.start({[Q.current]:r}),(i||o)&&ne()&&"fluid"===F)c(),l();else if(B.current&&"next"===we()&&o)B.current=!1,c(),ee.start({[Q.current]:-z.current});else{if(o)return c(),void(!u&&De()?l():Pe());if(i)return c(),void(!u&&ue()?l():Le())}}!e.last||o||i||E||(l(),fe({eventName:"onDrag",slideActionType:we(),...e}))}),{enabled:!T,from:()=>E?"x"===Q.current?[-xe(),0]:[0,-xe()]:[Z.x.get(),Z.y.get()]});function ve(e){D.current=e}function we(){return D.current}function ye(e){P.current=e}function Te(){return P.current}function Se(e){O.current=e}function Re(e){M.current=e}function Ce(){return M.current}function Ie(){const t=Te();return 0===t?e.length-1:t-1}function Ee(){const t=Te();return t===e.length-1?0:t+1}function Ae(t){return e.findIndex((e=>e.id===t))}function Ne(e){return"number"==typeof e?{from:{[Q.current]:e}}:{}}function Fe(e,t){if("number"==typeof e)return{[Q.current]:e};if("number"!=typeof t)throw new Error("to values is not a number!");return{[Q.current]:-oe()*t}}function We({from:t,to:r=-1,customTo:n,immediate:i=!1,onRest:u=(()=>{})}){i||(ye(r),Se(!0),fe({eventName:"onSlideStartChange",slideActionType:we(),nextItem:{index:"fluid"===F?-1:r,id:"fluid"===F?"":e[r].id}})),G.current=Fe(n,r)[x],ee.start({...Ne(t),to:Fe(n,r),immediate:i,onRest:t=>{t.finished&&(Re(!1),Se(!1),u(),i||fe({eventName:"onSlideChange",slideActionType:we(),currentItem:{index:"fluid"===F?-1:Te(),id:"fluid"===F?"":e[Te()].id}}))}}),p&&g&&!i&&pe(r,we())}function De(){return Te()===e.length-1}function Le(){if(ve("prev"),B.current=!1,"fluid"===F){if(B.current=!1,ne())return;const t=re()+oe()+200;if(E){const e=j.current.scrollLeft-oe();We({customTo:e<0?0:e,from:j.current.scrollLeft})}else We(t>=0?u?{from:re()-te()*e.length,customTo:re()-te()*e.length+oe()}:{customTo:0}:{customTo:re()+oe()})}else{if(!u&&0===Te()||q.current)return;ue()?We({from:re()-oe()*e.length,to:e.length-1}):We({to:Ie()})}}function Pe(){if(ve("next"),"fluid"===F){if(ne())return;const t=Math.abs(re()-oe())+100>=z.current;if(E){const e=j.current.scrollLeft+oe()>z.current,t=j.current.scrollLeft+oe();We({customTo:e?z.current:t,from:j.current.scrollLeft})}else if(u&&Math.abs(re()-oe())>=e.length*te()){const t=te()*e.length;We({from:re()+t,customTo:re()+t-oe()})}else{if(B.current)return;t?(B.current=!0,We({customTo:-z.current})):We({customTo:re()-oe()})}}else{if(!u&&Te()===L.length-1||q.current)return;Math.abs(re()-oe()+25)>z.current&&!Ce()?B.current=!0:B.current?We({to:e.length-Y.current}):De()?We({from:re()+oe()*e.length,to:0}):We({to:Ee()})}}function je(t){let r=0;if(r="string"==typeof t?e.findIndex((e=>e.id===t)):t,r>=e.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n        you provide a wrong id or a higher numeric index.");if(r===Te()||e.length!==V.current.length&&Te()<e.length)return;const n=Ae(V.current[Te()].id);ve(Ae(e[r].id)>n?"next":"prev"),We({to:r})}f((()=>{if(N%2==0&&K.current)throw new Error("initialStartingPosition can be only used if itemsPerSlide is an even value.");if(X.current<0)throw new Error("draggingSlideTreshold must be greater than 0");if(X.current>oe()/2)throw new Error(`draggingSlideTreshold must be equal or less than the half of the width of an item, which is ${Math.floor(oe()/2)}`);if(Y.current<1)throw new Error("The itemsPerSlide prop can't be less than 1.");if(Y.current>e.length)throw new Error("The itemsPerSlide prop can't be greater than the total length of the items you provide.");if(U.current<0)throw new Error("The initialActiveItem cannot be less than 0.");if(U.current>e.length)throw new Error("The initialActiveItem cannot be greater than the total length of the items you provide.");c||console.warn("You set shouldResizeOnWindowResize={false}; be aware that the carousel could behave in a strange way if you also use the fullscreen functionality or if you change the mobile orientation.")})),f((()=>{function e(){document.hidden?q.current=!0:q.current=!1}return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}})),f((()=>{W.current=!1,z.current=ie(),k.current=window.innerWidth,H.current=window.innerWidth,w>0&&(We({to:w,immediate:!0}),ye(w),!u&&$.current&&($.current.style.top="0px",$.current.style.left="0px"))})),a((()=>{U.current<e.length&&U.current!==P.current&&(We({to:U.current,immediate:!0}),ye(U.current))}),[]),a((()=>{if(c)return window.addEventListener("resize",le),()=>{window.removeEventListener("resize",le)}}),[c]),a((()=>{$.current&&("x"===Q.current&&($.current.style.top="0px"),"y"===Q.current&&($.current.style.left="0px"))}),[x]),a((()=>{z.current=ie();!(e.length===V.current.length)&&e.length<V.current.length&&je(e.length-1),V.current=e}),[ie,e]);const $e={useListenToCustomEvent:ae,getIsFullscreen:me,enterFullscreen:de,exitFullscreen:he,getIsAnimating:function(){return O.current},getIsDragging:Ce,getIsNextItem:function(t){const r=Ae(t),n=Te();return u&&n===e.length-1?0===r:r===n+1},getIsPrevItem:function(t){const r=Ae(t),n=Te();return u&&0===n?r===e.length-1:r===n-1},slideToPrevItem:Le,slideToNextItem:Pe,..."fixed"===F?{slideToItem:je,getIsActiveItem:e=>Ae(e)===Te(),getCurrentActiveItem:()=>({id:e[Te()].id,index:Te()})}:{}},Me=t.jsx(m.Provider,{value:$e,children:t.jsx("div",{ref:j,className:"use-spring-carousel-main-wrapper","data-testid":"use-spring-carousel-wrapper",...E?{onWheel(){Z[Q.current].stop()}}:{},style:{display:"flex",position:"relative",width:"100%",height:"100%",...E?"x"===Q.current?{overflowX:"auto"}:{overflowY:"auto"}:{}},children:t.jsx(n.animated.div,{...be(),className:"use-spring-carousel-track-wrapper","data-testid":"use-spring-carousel-animated-wrapper",ref:e=>{e&&($.current=e,se(e,U.current))},style:{display:"flex",position:"relative",touchAction:T?"unset":C||("x"===Q.current?"pan-y":"pan-x"),flexDirection:"x"===Q.current?"row":"column",...function(){const e=`calc(100% - ${2*J.current}px)`;return{width:"x"===Q.current?e:"100%",height:"y"===Q.current?e:"100%"}}(),...function(){const t=e.length/N*100,r=100/N,n="x"===Q.current?"left":"y",i=Math.floor(50/r);if("fixed"===F){if("center"===K.current)return{[n]:`calc(-${t}% + ${r*i}%)`};if("end"===K.current)return{[n]:`calc(-${t}% + ${r*(2*i)}%)`}}return{[n]:"0px"}}(),...E?{}:Z},children:L.map((({id:e,renderItem:r},n)=>{return t.jsx("div",{className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:{display:"flex",position:"relative",...(i=Y.current,"fixed"===F?{..."x"===Q.current?{marginRight:`${_.current}px`}:{marginBottom:`${_.current}px`},flex:`1 0 calc(100% / ${i} - ${_.current*(i-1)/i}px)`}:{..."x"===Q.current?{marginRight:`${_.current}px`}:{marginBottom:`${_.current}px`}})},children:r},`${e}-${n}`);var i}))})})}),Oe=t.jsx(m.Provider,{value:$e,children:ge});return{...$e,carouselFragment:Me,thumbsFragment:Oe}},e.useSpringCarouselContext=function(){const e=r.useContext(m);if(!e)throw new Error("useSpringCarouselContext must be used only inside a component that is rendered inside the Carousel.");return e},e.useTransitionCarousel=function({items:e,withLoop:u=!1,withThumbs:o=!1,springConfig:s=n.config.default,thumbsSlideAxis:c="x",enableThumbsWrapperScroll:a=!0,draggingSlideTreshold:f=50,prepareThumbsData:m,toPrevItemSpringProps:p,toNextItemSpringProps:x,disableGestures:b=!1,trail:v,exitBeforeEnter:w=!1,springAnimationProps:y={initial:{opacity:1,position:"absolute"},from:{opacity:0,position:"absolute"},enter:{opacity:1,position:"absolute"},leave:{opacity:0,position:"absolute"}}}){const T=r.useRef("next"),S=r.useRef(null),R=r.useRef(!1),[C,I]=r.useState(0),{emitObservable:E,useListenToCustomEvent:A}=l(),{enterFullscreen:N,exitFullscreen:F,getIsFullscreen:W}=d({emitObservable:E,mainCarouselWrapperRef:S}),{thumbsFragment:D,handleThumbsScroll:L}=h({items:e,withThumbs:o,thumbsSlideAxis:c,springConfig:s,prepareThumbsData:m,slideType:"fixed"}),P=i.useDrag((({last:t,movement:[r]})=>{if(!$()&&t){const t=r>f,n=r<-f,i=0===C,o=C===e.length-1;if(n){if(!u&&o)return;z(),E({eventName:"onLeftSwipe"})}else if(t){if(!u&&i)return;B(),E({eventName:"onRightSwipe"})}}}),{enabled:!b}),j=n.useTransition(C,{config:s,...function(){const e=q();return"prev"===e&&p?{initial:{...y.initial},from:{...p.from},enter:{...p.enter},leave:{...p.leave}}:"next"===e&&x?{initial:{...y.initial},from:{...x.from},enter:{...x.enter},leave:{...x.leave}}:{initial:{...y.initial},from:{...y.from},enter:{...y.enter},leave:{...y.leave}}}(),onStart:()=>M(!0),trail:v,exitBeforeEnter:w,key:e[C].id,onRest:t=>{t.finished&&(M(!1),E({eventName:"onSlideChange",slideActionType:q(),currentItem:{index:C,id:e[C].id}}))}})(((r,i)=>t.jsx(n.animated.div,{style:{...r,flex:"1 0 100%",width:"100%",height:"100%"},children:e[i].renderItem})));function $(){return R.current}function M(e){R.current=e}function O(e){T.current=e}function q(){return T.current}function z(){const t=C===e.length-1;u?(O("next"),t?(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:0,id:e[0].id}}),I(0)):(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:C+1,id:e[C+1].id}}),I(C+1))):t||(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:C+1,id:e[C+1].id}}),O("next"),I(C+1))}function B(){const t=0===C;u?(O("prev"),t?(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:e.length-1,id:e[e.length-1].id}}),I(e.length-1)):(E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:C-1,id:e[C-1].id}}),I(C-1))):t||(O("prev"),E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:C-1,id:e[C-1].id}}),I(C-1))}function H(t){return e.findIndex((e=>e.id===t))}const k={activeItem:C,slideToItem:function(t){let r=0;if(r="string"==typeof t?e.findIndex((e=>e.id===t)):t,r>=e.length)throw Error("The item you want to slide to doesn't exist. This could be due to the fact that \n        you provide a wrong id or a higher numeric index.");if(r===C)return;const n=H(e[C].id),i=H(e[r].id);E({eventName:"onSlideStartChange",slideActionType:q(),nextItem:{index:i,id:e[r].id}}),O(i>n?"next":"prev"),I(r),a&&o&&L(r)},slideToNextItem:z,slideToPrevItem:B,enterFullscreen:N,exitFullscreen:F,useListenToCustomEvent:A,getIsNextItem:function(t){const r=H(t);return u&&C===e.length-1?0===r:r===C+1},getIsPrevItem:function(t){const r=H(t);return u&&0===C?r===e.length-1:r===C-1},getIsAnimating:$,getIsFullscreen:W,getIsActiveItem:e=>H(e)===C,getCurrentActiveItem:()=>({id:e[C].id,index:C})};return{carouselFragment:t.jsx(g.Provider,{value:k,children:t.jsx("div",{ref:S,...P(),style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:j})}),thumbsFragment:t.jsx(g.Provider,{value:k,children:D}),...k}},e.useTransitionCarouselContext=function(){const e=r.useContext(g);if(!e)throw new Error("useTransitionCarouselContext isn't being used within the useTransitionCarousel context; \n    use the context only inside a component that is rendered within the Carousel.");return e},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spring-carousel",
-  "version": "2.0.5-beta002",
+  "version": "2.0.5-beta005",
   "description": "A new <Carousel /> experience for the web",
   "homepage": "https://react-spring-carousel.emilianobucci.com",
   "repository": "https://github.com/Emiliano-Bucci/react-spring-carousel",
@@ -26,7 +26,8 @@
   "exports": {
     ".": {
       "require": "./dist/cjs/index.cjs",
-      "default": "./dist/esm/index.mjs"
+      "import": "./dist/esm/index.mjs",
+      "default": "./dist/esm/index.js"
     }
   },
   "scripts": {
@@ -55,7 +56,6 @@
     "@babel/core": "^7.17.5",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
     "@emotion/babel-plugin": "^11.7.2",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/jest": "^11.8.0",
@@ -65,7 +65,7 @@
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-links": "^6.4.19",
-    "@storybook/react": "^6.5.0-alpha.42",
+    "@storybook/react": "^6.4.19",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@types/jest": "^27.4.1",
@@ -86,7 +86,7 @@
     "jest": "^27.5.1",
     "lint-staged": "^12.3.4",
     "prettier": "^2.5.1",
-    "react-spring-carousel": "^2.0.5",
+    "react-spring-carousel": "^2.0.5-beta003",
     "rimraf": "^3.0.2",
     "rollup": "^2.69.0",
     "rollup-plugin-babel": "^4.4.0",
@@ -96,7 +96,6 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-visualizer": "^5.6.0",
-    "storybook": "^6.4.19",
     "ts-jest": "^27.1.3",
     "typescript": "^4.6.2"
   },