react-spring-carousel 1.9.29-beta31 → 1.9.29-beta35

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export * from './useSpringCarousel';
-export * from './useTransitionCarousel';
+import * as useSpringCarousel from './useSpringCarousel';
+import * as useTransitionCarousel from './useTransitionCarousel';
+export { useSpringCarousel, useTransitionCarousel };

package/dist/index.js

@@ -1,2 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./useSpringCarousel.js"),r=require("./useTransitionCarousel.js");exports.useSpringCarouselContext=e.useSpringCarouselContext,exports.useTransitionCarouselContext=r.useTransitionCarouselContext;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useSpringCarousel = require('./useSpringCarousel.js');
+var useTransitionCarousel = require('./useTransitionCarousel.js');
+
+
+
+exports.useSpringCarousel = useSpringCarousel;
+exports.useTransitionCarousel = useTransitionCarousel;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/modules/useCustomEventsModule.js

@@ -1,2 +1,26 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("rxjs");exports.useCustomEventsModule=function(){const r=e.useRef(new t.Subject);return{useListenToCustomEvent:function(t){e.useEffect((()=>{const e=r.current.subscribe(t);return()=>e.unsubscribe()}),[t])},emitObservable:e=>{r.current.next(e)}}};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var rxjs = require('rxjs');
+
+function useCustomEventsModule() {
+    const eventsObserverRef = react.useRef(new rxjs.Subject());
+    function useListenToCustomEvent(fn) {
+        react.useEffect(() => {
+            const subscribe = eventsObserverRef.current.subscribe(fn);
+            return () => subscribe.unsubscribe();
+        }, [fn]);
+    }
+    const emitObservable = data => {
+        eventsObserverRef.current.next(data);
+    };
+    return {
+        useListenToCustomEvent,
+        emitObservable,
+    };
+}
+
+exports.useCustomEventsModule = useCustomEventsModule;
 //# sourceMappingURL=useCustomEventsModule.js.map

package/dist/modules/useCustomEventsModule.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCustomEventsModule.js","sources":["../../src/modules/useCustomEventsModule.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { Subject } from 'rxjs'\nimport { EventsObservableProps, ObservableCallbackFn, EmitObservableFn } from '../types'\n\nexport function useCustomEventsModule() {\n  const eventsObserverRef = useRef(new Subject<EventsObservableProps>())\n\n  function useListenToCustomEvent(fn: ObservableCallbackFn) {\n    useEffect(() => {\n      const subscribe = eventsObserverRef.current.subscribe(fn)\n      return () => subscribe.unsubscribe()\n    }, [fn])\n  }\n\n  const emitObservable: EmitObservableFn = data => {\n    eventsObserverRef.current.next(data)\n  }\n\n  return {\n    useListenToCustomEvent,\n    emitObservable,\n  }\n}\n"],"names":["eventsObserverRef","useRef","Subject","useListenToCustomEvent","fn","useEffect","subscribe","current","unsubscribe","emitObservable","data","next"],"mappings":"sJAKE,MAAMA,EAAoBC,SAAO,IAAIC,WAarC,MAAO,CACLC,uBAZF,SAAgCC,GAC9BC,aAAU,KACR,MAAMC,EAAYN,EAAkBO,QAAQD,UAAUF,GACtD,MAAO,IAAME,EAAUE,gBACtB,CAACJ,KASJK,eANuCC,IACvCV,EAAkBO,QAAQI,KAAKD"}
+{"version":3,"file":"useCustomEventsModule.js","sources":["../../src/modules/useCustomEventsModule.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { Subject } from 'rxjs'\nimport { EventsObservableProps, ObservableCallbackFn, EmitObservableFn } from '../types'\n\nexport function useCustomEventsModule() {\n  const eventsObserverRef = useRef(new Subject<EventsObservableProps>())\n\n  function useListenToCustomEvent(fn: ObservableCallbackFn) {\n    useEffect(() => {\n      const subscribe = eventsObserverRef.current.subscribe(fn)\n      return () => subscribe.unsubscribe()\n    }, [fn])\n  }\n\n  const emitObservable: EmitObservableFn = data => {\n    eventsObserverRef.current.next(data)\n  }\n\n  return {\n    useListenToCustomEvent,\n    emitObservable,\n  }\n}\n"],"names":["useRef","Subject","useEffect"],"mappings":";;;;;;;SAIgB,qBAAqB;IACnC,MAAM,iBAAiB,GAAGA,YAAM,CAAC,IAAIC,YAAO,EAAyB,CAAC,CAAA;IAEtE,SAAS,sBAAsB,CAAC,EAAwB;QACtDC,eAAS,CAAC;YACR,MAAM,SAAS,GAAG,iBAAiB,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;YACzD,OAAO,MAAM,SAAS,CAAC,WAAW,EAAE,CAAA;SACrC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;KACT;IAED,MAAM,cAAc,GAAqB,IAAI;QAC3C,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KACrC,CAAA;IAED,OAAO;QACL,sBAAsB;QACtB,cAAc;KACf,CAAA;AACH;;;;"}

package/dist/modules/useFullscreenModule.js

@@ -1,2 +1,64 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(require("screenfull"));exports.useFullscreenModule=function({mainCarouselWrapperRef:n,emitObservable:t,handleResize:l}){const r=e.useRef(!1);function c(e){r.current=e}return e.useEffect((()=>{function e(){document.fullscreenElement&&(c(!0),t({eventName:"onFullscreenChange",isFullscreen:!0}),l&&l()),document.fullscreenElement||(c(!1),t({eventName:"onFullscreenChange",isFullscreen:!1}),l&&l())}if(u.default.isEnabled)return u.default.on("change",e),()=>{u.default.isEnabled&&u.default.off("change",e)}})),{enterFullscreen:function(e){u.default.isEnabled&&u.default.request(e||n.current)},exitFullscreen:function(){u.default.isEnabled&&u.default.exit()},getIsFullscreen:function(){return r.current}}};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var screenfull = require('screenfull');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var screenfull__default = /*#__PURE__*/_interopDefaultLegacy(screenfull);
+
+function useFullscreenModule({ mainCarouselWrapperRef, emitObservable, handleResize, }) {
+    const isFullscreen = react.useRef(false);
+    react.useEffect(() => {
+        function handleFullscreenChange() {
+            if (document.fullscreenElement) {
+                setIsFullscreen(true);
+                emitObservable({
+                    eventName: 'onFullscreenChange',
+                    isFullscreen: true,
+                });
+                handleResize && handleResize();
+            }
+            if (!document.fullscreenElement) {
+                setIsFullscreen(false);
+                emitObservable({
+                    eventName: 'onFullscreenChange',
+                    isFullscreen: false,
+                });
+                handleResize && handleResize();
+            }
+        }
+        if (screenfull__default["default"].isEnabled) {
+            screenfull__default["default"].on('change', handleFullscreenChange);
+            return () => {
+                if (screenfull__default["default"].isEnabled) {
+                    screenfull__default["default"].off('change', handleFullscreenChange);
+                }
+            };
+        }
+    });
+    function setIsFullscreen(_isFullscreen) {
+        isFullscreen.current = _isFullscreen;
+    }
+    function getIsFullscreen() {
+        return isFullscreen.current;
+    }
+    function enterFullscreen(elementRef) {
+        if (screenfull__default["default"].isEnabled) {
+            screenfull__default["default"].request((elementRef || mainCarouselWrapperRef.current));
+        }
+    }
+    function exitFullscreen() {
+        screenfull__default["default"].isEnabled && screenfull__default["default"].exit();
+    }
+    return {
+        enterFullscreen,
+        exitFullscreen,
+        getIsFullscreen,
+    };
+}
+
+exports.useFullscreenModule = useFullscreenModule;
 //# sourceMappingURL=useFullscreenModule.js.map

package/dist/modules/useFullscreenModule.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFullscreenModule.js","sources":["../../src/modules/useFullscreenModule.tsx"],"sourcesContent":["import { useRef, MutableRefObject, useEffect } from 'react'\nimport screenfull from 'screenfull'\nimport { EmitObservableFn } from '../types'\n\ntype FullscreenModule = {\n  mainCarouselWrapperRef: MutableRefObject<HTMLDivElement | null>\n  emitObservable: EmitObservableFn\n  handleResize?(): void\n}\n\nexport function useFullscreenModule({\n  mainCarouselWrapperRef,\n  emitObservable,\n  handleResize,\n}: FullscreenModule) {\n  const isFullscreen = useRef(false)\n\n  useEffect(() => {\n    function handleFullscreenChange() {\n      if (document.fullscreenElement) {\n        setIsFullscreen(true)\n        emitObservable({\n          eventName: 'onFullscreenChange',\n          isFullscreen: true,\n        })\n\n        handleResize && handleResize()\n      }\n\n      if (!document.fullscreenElement) {\n        setIsFullscreen(false)\n        emitObservable({\n          eventName: 'onFullscreenChange',\n          isFullscreen: false,\n        })\n        handleResize && handleResize()\n      }\n    }\n\n    if (screenfull.isEnabled) {\n      screenfull.on('change', handleFullscreenChange)\n      return () => {\n        if (screenfull.isEnabled) {\n          screenfull.off('change', handleFullscreenChange)\n        }\n      }\n    }\n  })\n\n  function setIsFullscreen(_isFullscreen: boolean) {\n    isFullscreen.current = _isFullscreen\n  }\n\n  function getIsFullscreen() {\n    return isFullscreen.current\n  }\n\n  function enterFullscreen(elementRef?: HTMLElement) {\n    if (screenfull.isEnabled) {\n      screenfull.request((elementRef || mainCarouselWrapperRef.current) as Element)\n    }\n  }\n\n  function exitFullscreen() {\n    screenfull.isEnabled && screenfull.exit()\n  }\n\n  return {\n    enterFullscreen,\n    exitFullscreen,\n    getIsFullscreen,\n  }\n}\n"],"names":["mainCarouselWrapperRef","emitObservable","handleResize","isFullscreen","useRef","setIsFullscreen","_isFullscreen","current","useEffect","handleFullscreenChange","document","fullscreenElement","eventName","screenfull","isEnabled","on","off","enterFullscreen","elementRef","request","exitFullscreen","exit","getIsFullscreen"],"mappings":"wOAUoCA,uBAClCA,EAAsBC,eACtBA,EAAcC,aACdA,IAEA,MAAMC,EAAeC,UAAO,GAkC5B,SAASC,EAAgBC,GACvBH,EAAaI,QAAUD,EAiBzB,OAlDAE,aAAU,KACR,SAASC,IACHC,SAASC,oBACXN,GAAgB,GAChBJ,EAAe,CACbW,UAAW,qBACXT,cAAc,IAGhBD,GAAgBA,KAGbQ,SAASC,oBACZN,GAAgB,GAChBJ,EAAe,CACbW,UAAW,qBACXT,cAAc,IAEhBD,GAAgBA,KAIpB,GAAIW,UAAWC,UAEb,OADAD,UAAWE,GAAG,SAAUN,GACjB,KACDI,UAAWC,WACbD,UAAWG,IAAI,SAAUP,OAwB1B,CACLQ,gBAXF,SAAyBC,GACnBL,UAAWC,WACbD,UAAWM,QAASD,GAAclB,EAAuBO,UAU3Da,eANF,WACEP,UAAWC,WAAaD,UAAWQ,QAMnCC,gBAjBF,WACE,OAAOnB,EAAaI"}
+{"version":3,"file":"useFullscreenModule.js","sources":["../../src/modules/useFullscreenModule.tsx"],"sourcesContent":["import { useRef, MutableRefObject, useEffect } from 'react'\nimport screenfull from 'screenfull'\nimport { EmitObservableFn } from '../types'\n\ntype FullscreenModule = {\n  mainCarouselWrapperRef: MutableRefObject<HTMLDivElement | null>\n  emitObservable: EmitObservableFn\n  handleResize?(): void\n}\n\nexport function useFullscreenModule({\n  mainCarouselWrapperRef,\n  emitObservable,\n  handleResize,\n}: FullscreenModule) {\n  const isFullscreen = useRef(false)\n\n  useEffect(() => {\n    function handleFullscreenChange() {\n      if (document.fullscreenElement) {\n        setIsFullscreen(true)\n        emitObservable({\n          eventName: 'onFullscreenChange',\n          isFullscreen: true,\n        })\n\n        handleResize && handleResize()\n      }\n\n      if (!document.fullscreenElement) {\n        setIsFullscreen(false)\n        emitObservable({\n          eventName: 'onFullscreenChange',\n          isFullscreen: false,\n        })\n        handleResize && handleResize()\n      }\n    }\n\n    if (screenfull.isEnabled) {\n      screenfull.on('change', handleFullscreenChange)\n      return () => {\n        if (screenfull.isEnabled) {\n          screenfull.off('change', handleFullscreenChange)\n        }\n      }\n    }\n  })\n\n  function setIsFullscreen(_isFullscreen: boolean) {\n    isFullscreen.current = _isFullscreen\n  }\n\n  function getIsFullscreen() {\n    return isFullscreen.current\n  }\n\n  function enterFullscreen(elementRef?: HTMLElement) {\n    if (screenfull.isEnabled) {\n      screenfull.request((elementRef || mainCarouselWrapperRef.current) as Element)\n    }\n  }\n\n  function exitFullscreen() {\n    screenfull.isEnabled && screenfull.exit()\n  }\n\n  return {\n    enterFullscreen,\n    exitFullscreen,\n    getIsFullscreen,\n  }\n}\n"],"names":["useRef","useEffect","screenfull"],"mappings":";;;;;;;;;;;SAUgB,mBAAmB,CAAC,EAClC,sBAAsB,EACtB,cAAc,EACd,YAAY,GACK;IACjB,MAAM,YAAY,GAAGA,YAAM,CAAC,KAAK,CAAC,CAAA;IAElCC,eAAS,CAAC;QACR,SAAS,sBAAsB;YAC7B,IAAI,QAAQ,CAAC,iBAAiB,EAAE;gBAC9B,eAAe,CAAC,IAAI,CAAC,CAAA;gBACrB,cAAc,CAAC;oBACb,SAAS,EAAE,oBAAoB;oBAC/B,YAAY,EAAE,IAAI;iBACnB,CAAC,CAAA;gBAEF,YAAY,IAAI,YAAY,EAAE,CAAA;aAC/B;YAED,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE;gBAC/B,eAAe,CAAC,KAAK,CAAC,CAAA;gBACtB,cAAc,CAAC;oBACb,SAAS,EAAE,oBAAoB;oBAC/B,YAAY,EAAE,KAAK;iBACpB,CAAC,CAAA;gBACF,YAAY,IAAI,YAAY,EAAE,CAAA;aAC/B;SACF;QAED,IAAIC,8BAAU,CAAC,SAAS,EAAE;YACxBA,8BAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAA;YAC/C,OAAO;gBACL,IAAIA,8BAAU,CAAC,SAAS,EAAE;oBACxBA,8BAAU,CAAC,GAAG,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAA;iBACjD;aACF,CAAA;SACF;KACF,CAAC,CAAA;IAEF,SAAS,eAAe,CAAC,aAAsB;QAC7C,YAAY,CAAC,OAAO,GAAG,aAAa,CAAA;KACrC;IAED,SAAS,eAAe;QACtB,OAAO,YAAY,CAAC,OAAO,CAAA;KAC5B;IAED,SAAS,eAAe,CAAC,UAAwB;QAC/C,IAAIA,8BAAU,CAAC,SAAS,EAAE;YACxBA,8BAAU,CAAC,OAAO,EAAE,UAAU,IAAI,sBAAsB,CAAC,OAAO,EAAa,CAAA;SAC9E;KACF;IAED,SAAS,cAAc;QACrBA,8BAAU,CAAC,SAAS,IAAIA,8BAAU,CAAC,IAAI,EAAE,CAAA;KAC1C;IAED,OAAO;QACL,eAAe;QACf,cAAc;QACd,eAAe;KAChB,CAAA;AACH;;;;"}

package/dist/modules/useThumbsModule.js

@@ -1,2 +1,185 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-spring"),n=require("../utils.js");const o=t.forwardRef((({children:t,...n},o)=>e.jsx(r.animated.div,Object.assign({},n,{ref:o},{children:t}),void 0)));exports.useThumbsModule=function({items:i,withThumbs:s,thumbsSlideAxis:u="x",springConfig:c,prepareThumbsData:l,itemsPerSlide:f,getFluidWrapperScrollValue:a=(()=>0),getSlideValue:m=(()=>0),CustomThumbsWrapperComponent:h}){const p=t.useRef(null),[d,b]=r.useSpring((()=>({x:0,y:0,config:c,onChange:({value:e})=>{p.current&&(p.current["x"===u?"scrollLeft":"scrollTop"]=Math.abs(e[u]))}})));function x(){return p.current["x"===u?"scrollLeft":"scrollTop"]}function g(){return Math.round(Number(p.current?.["x"===u?"scrollWidth":"scrollHeight"])-p.current.getBoundingClientRect()["x"===u?"width":"height"])}function D(){const e=Math.round(a()/m());return g()/e}n.useMount((()=>{if(s&&!p.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.")}));const T=h?r.animated(h):o;return{thumbsFragment:s?e.jsx(T,Object.assign({ref:p,className:"use-spring-carousel-thumbs-wrapper",onWheel:()=>{d[u].stop()},style:{display:"flex",flex:1,position:"relative",flexDirection:"x"===u?"row":"column",..."x"===u?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"}}},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return l?l(e(i)):e(i)}().map((({id:t,renderThumb:r})=>{const n=`thumb-${t}`;return e.jsx("div",Object.assign({id:n},{children:r}),n)}))}),void 0):null,handleThumbsScroll:function(e,t){if("fluid"===f){const e=g();if("next"===t){const t=x()+D();b.start({from:{[u]:x()},to:{[u]:t>e?e:t}})}if("prev"===t){const e=x()-D();b.start({from:{[u]:x()},to:{[u]:e<0?0:e}})}}else{const t=p.current.querySelector(`#thumb-${i[e].id}`);if(t){const r=p.current,n="x"===u?"offsetWidth":"offsetHeight",o="x"===u?"scrollLeft":"scrollTop",s=function({thumbNode:e,offsetDirection:t,offsetDimension:r}){return e[t]+e[r]/2}({thumbNode:t,offsetDimension:n,offsetDirection:"x"===u?"offsetLeft":"offsetTop"}),c=function({thumbWrapper:e,offsetDimension:t}){return e[t]/2}({thumbWrapper:r,offsetDimension:n});b.start({from:{[u]:function({thumbWrapper:e,scrollDirection:t}){return e[t]}({thumbWrapper:r,scrollDirection:o})},to:{[u]:function({thumbWrapper:t,thumbOffsetPosition:r,thumbScrollDimension:n,offsetDimension:o}){const s="x"===u?"scrollWidth":"scrollHeight";return e===i.length-1||r-n>t[s]-t[o]?t[s]-t[o]:0===e?0:r-n}({thumbWrapper:r,thumbOffsetPosition:s,thumbScrollDimension:c,offsetDimension:n})},onChange:e=>{"x"===u?p.current.scrollLeft=e.x:p.current.scrollTop=e.y}})}}}}};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactSpring = require('react-spring');
+var utils = require('../utils.js');
+
+const InternalWrapper = react.forwardRef(({ children, ...rest }, ref) => {
+    return (jsxRuntime.jsx(reactSpring.animated.div, Object.assign({}, rest, { ref: ref }, { children: children }), void 0));
+});
+function useThumbsModule({ items, withThumbs, thumbsSlideAxis = 'x', springConfig, prepareThumbsData, itemsPerSlide, getFluidWrapperScrollValue = () => 0, getSlideValue = () => 0, CustomThumbsWrapperComponent, }) {
+    const internalThumbsWrapperRef = react.useRef(null);
+    const [thumbListStyles, setThumbListStyles] = reactSpring.useSpring(() => ({
+        x: 0,
+        y: 0,
+        config: springConfig,
+        onChange: ({ value }) => {
+            if (internalThumbsWrapperRef.current) {
+                internalThumbsWrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] = Math.abs(value[thumbsSlideAxis]);
+            }
+        },
+    }));
+    utils.useMount(() => {
+        if (withThumbs && !internalThumbsWrapperRef.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.");
+        }
+    });
+    function getCurrentThumbScrollValue() {
+        return internalThumbsWrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
+    }
+    function getThumbsTotalScrollableValue() {
+        return Math.round(Number(internalThumbsWrapperRef.current?.[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+            internalThumbsWrapperRef.current.getBoundingClientRect()[thumbsSlideAxis === 'x' ? 'width' : 'height']);
+    }
+    function getThumbSlideValue() {
+        const thumbSlideTotal = Math.round(getFluidWrapperScrollValue() / getSlideValue());
+        const totalScrollableValue = getThumbsTotalScrollableValue();
+        return totalScrollableValue / thumbSlideTotal;
+    }
+    function handleThumbsScroll(activeItem, actionType) {
+        if (itemsPerSlide === 'fluid') {
+            const totalScrollableValue = getThumbsTotalScrollableValue();
+            if (actionType === 'next') {
+                const nextValue = getCurrentThumbScrollValue() + getThumbSlideValue();
+                setThumbListStyles.start({
+                    from: {
+                        [thumbsSlideAxis]: getCurrentThumbScrollValue(),
+                    },
+                    to: {
+                        [thumbsSlideAxis]: nextValue > totalScrollableValue ? totalScrollableValue : nextValue,
+                    },
+                });
+            }
+            if (actionType === 'prev') {
+                const nextValue = getCurrentThumbScrollValue() - getThumbSlideValue();
+                setThumbListStyles.start({
+                    from: {
+                        [thumbsSlideAxis]: getCurrentThumbScrollValue(),
+                    },
+                    to: {
+                        [thumbsSlideAxis]: nextValue < 0 ? 0 : nextValue,
+                    },
+                });
+            }
+        }
+        else {
+            function getOffsetDirection() {
+                return thumbsSlideAxis === 'x' ? 'offsetLeft' : 'offsetTop';
+            }
+            function getOffsetDimension() {
+                return thumbsSlideAxis === 'x' ? 'offsetWidth' : 'offsetHeight';
+            }
+            function getScrollDirecton() {
+                return thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop';
+            }
+            function getThumbNode() {
+                return internalThumbsWrapperRef.current.querySelector(`#thumb-${items[activeItem].id}`);
+            }
+            function getThumbOffsetPosition({ thumbNode, offsetDirection, offsetDimension, }) {
+                return thumbNode[offsetDirection] + thumbNode[offsetDimension] / 2;
+            }
+            function getThumbScrollDimension({ thumbWrapper, offsetDimension, }) {
+                return thumbWrapper[offsetDimension] / 2;
+            }
+            function getScrollFromValue({ thumbWrapper, scrollDirection, }) {
+                return thumbWrapper[scrollDirection];
+            }
+            function getScrollToValue({ thumbWrapper, thumbOffsetPosition, thumbScrollDimension, offsetDimension, }) {
+                const scrollDimensionProperty = thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight';
+                if (activeItem === items.length - 1 ||
+                    thumbOffsetPosition - thumbScrollDimension >
+                        thumbWrapper[scrollDimensionProperty] - thumbWrapper[offsetDimension]) {
+                    return thumbWrapper[scrollDimensionProperty] - thumbWrapper[offsetDimension];
+                }
+                if (activeItem === 0) {
+                    return 0;
+                }
+                return thumbOffsetPosition - thumbScrollDimension;
+            }
+            const thumbNode = getThumbNode();
+            if (thumbNode) {
+                const thumbWrapper = internalThumbsWrapperRef.current;
+                const offsetDirection = getOffsetDirection();
+                const offsetDimension = getOffsetDimension();
+                const scrollDirection = getScrollDirecton();
+                const thumbOffsetPosition = getThumbOffsetPosition({
+                    thumbNode,
+                    offsetDimension,
+                    offsetDirection,
+                });
+                const thumbScrollDimension = getThumbScrollDimension({
+                    thumbWrapper,
+                    offsetDimension,
+                });
+                setThumbListStyles.start({
+                    from: {
+                        [thumbsSlideAxis]: getScrollFromValue({
+                            thumbWrapper,
+                            scrollDirection,
+                        }),
+                    },
+                    to: {
+                        [thumbsSlideAxis]: getScrollToValue({
+                            thumbWrapper,
+                            thumbOffsetPosition,
+                            thumbScrollDimension,
+                            offsetDimension,
+                        }),
+                    },
+                    onChange: val => {
+                        if (thumbsSlideAxis === 'x') {
+                            // @ts-ignore
+                            internalThumbsWrapperRef.current.scrollLeft = val.x;
+                        }
+                        else {
+                            // @ts-ignore
+                            internalThumbsWrapperRef.current.scrollTop = val.y;
+                        }
+                    },
+                });
+            }
+        }
+    }
+    function handlePrepareThumbsDate() {
+        function getPreparedItems(_items) {
+            return _items.map(i => ({
+                id: i.id,
+                renderThumb: i.renderThumb,
+            }));
+        }
+        if (prepareThumbsData) {
+            return prepareThumbsData(getPreparedItems(items));
+        }
+        return getPreparedItems(items);
+    }
+    const Wrapper = CustomThumbsWrapperComponent
+        ? reactSpring.animated(CustomThumbsWrapperComponent)
+        : InternalWrapper;
+    const thumbsFragment = withThumbs ? (jsxRuntime.jsx(Wrapper, Object.assign({ ref: internalThumbsWrapperRef, className: "use-spring-carousel-thumbs-wrapper", onWheel: () => {
+            thumbListStyles[thumbsSlideAxis].stop();
+        }, style: {
+            display: 'flex',
+            flex: 1,
+            position: 'relative',
+            flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column',
+            ...(thumbsSlideAxis === 'x'
+                ? { overflowX: 'auto' }
+                : {
+                    overflowY: 'auto',
+                    maxHeight: '100%',
+                }),
+        } }, { children: handlePrepareThumbsDate().map(({ id, renderThumb }) => {
+            const thumbId = `thumb-${id}`;
+            return (jsxRuntime.jsx("div", Object.assign({ id: thumbId }, { children: renderThumb }), thumbId));
+        }) }), void 0)) : null;
+    return {
+        thumbsFragment,
+        handleThumbsScroll,
+    };
+}
+
+exports.useThumbsModule = useThumbsModule;
 //# sourceMappingURL=useThumbsModule.js.map

package/dist/modules/useThumbsModule.js.map

@@ -1 +1 @@
-{"version":3,"file":"useThumbsModule.js","sources":["../../src/modules/useThumbsModule.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useRef } from 'react'\nimport { useSpring, SpringConfig, animated } from 'react-spring'\nimport { useMount } from 'src/utils'\nimport {\n  UseSpringCarouselProps,\n  ReactSpringThumbItem,\n  PrepareThumbsData,\n  UseSpringCarouselItems,\n  SlideActionType,\n} from '../types'\n\ntype OffsetDimension = 'offsetWidth' | 'offsetHeight'\ntype OffsetDirection = 'offsetLeft' | 'offsetTop'\ntype ScrollDirection = 'scrollLeft' | 'scrollTop'\n\ntype Props = {\n  items: UseSpringCarouselItems['items']\n  withThumbs: boolean\n  thumbsSlideAxis: UseSpringCarouselProps['thumbsSlideAxis']\n  springConfig: SpringConfig\n  prepareThumbsData?: PrepareThumbsData\n  itemsPerSlide?: UseSpringCarouselProps['itemsPerSlide']\n  CustomThumbsWrapperComponent?: UseSpringCarouselProps['CustomThumbsWrapperComponent']\n  getFluidWrapperScrollValue?(): number\n  getSlideValue?(): number\n}\n\ntype WrapperProps = {\n  children: React.ReactNode\n} & HTMLAttributes<HTMLDivElement>\n\nconst InternalWrapper = forwardRef<HTMLDivElement, WrapperProps>(\n  ({ children, ...rest }, ref) => {\n    return (\n      <animated.div {...rest} ref={ref}>\n        {children}\n      </animated.div>\n    )\n  },\n)\n\nexport function useThumbsModule({\n  items,\n  withThumbs,\n  thumbsSlideAxis = 'x',\n  springConfig,\n  prepareThumbsData,\n  itemsPerSlide,\n  getFluidWrapperScrollValue = () => 0,\n  getSlideValue = () => 0,\n  CustomThumbsWrapperComponent,\n}: Props) {\n  const internalThumbsWrapperRef = useRef<HTMLDivElement | null>(null)\n  const [thumbListStyles, setThumbListStyles] = useSpring(() => ({\n    x: 0,\n    y: 0,\n    config: springConfig,\n    onChange: ({ value }) => {\n      if (internalThumbsWrapperRef.current) {\n        internalThumbsWrapperRef.current[\n          thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n        ] = Math.abs(value[thumbsSlideAxis])\n      }\n    },\n  }))\n\n  useMount(() => {\n    if (withThumbs && !internalThumbsWrapperRef.current) {\n      throw new Error(\n        \"The thumbs wrapper is not defined. If you've passed a Functional component, be sure to wrap your component in forwardRef.\",\n      )\n    }\n  })\n\n  function getCurrentThumbScrollValue() {\n    return internalThumbsWrapperRef.current![\n      thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n    ]\n  }\n  function getThumbsTotalScrollableValue() {\n    return Math.round(\n      Number(\n        internalThumbsWrapperRef.current?.[\n          thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight'\n        ],\n      ) -\n        internalThumbsWrapperRef.current!.getBoundingClientRect()[\n          thumbsSlideAxis === 'x' ? 'width' : 'height'\n        ],\n    )\n  }\n\n  function getThumbSlideValue() {\n    const thumbSlideTotal = Math.round(getFluidWrapperScrollValue() / getSlideValue())\n    const totalScrollableValue = getThumbsTotalScrollableValue()\n    return totalScrollableValue / thumbSlideTotal\n  }\n\n  function handleThumbsScroll(activeItem: number, actionType?: SlideActionType) {\n    if (itemsPerSlide === 'fluid') {\n      const totalScrollableValue = getThumbsTotalScrollableValue()\n\n      if (actionType === 'next') {\n        const nextValue = getCurrentThumbScrollValue() + getThumbSlideValue()\n        setThumbListStyles.start({\n          from: {\n            [thumbsSlideAxis]: getCurrentThumbScrollValue(),\n          },\n          to: {\n            [thumbsSlideAxis]:\n              nextValue > totalScrollableValue ? totalScrollableValue : nextValue,\n          },\n        })\n      }\n      if (actionType === 'prev') {\n        const nextValue = getCurrentThumbScrollValue() - getThumbSlideValue()\n        setThumbListStyles.start({\n          from: {\n            [thumbsSlideAxis]: getCurrentThumbScrollValue(),\n          },\n          to: {\n            [thumbsSlideAxis]: nextValue < 0 ? 0 : nextValue,\n          },\n        })\n      }\n    } else {\n      function getOffsetDirection() {\n        return thumbsSlideAxis === 'x' ? 'offsetLeft' : 'offsetTop'\n      }\n      function getOffsetDimension() {\n        return thumbsSlideAxis === 'x' ? 'offsetWidth' : 'offsetHeight'\n      }\n      function getScrollDirecton() {\n        return thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n      }\n      function getThumbNode() {\n        return internalThumbsWrapperRef.current!.querySelector(\n          `#thumb-${items[activeItem].id}`,\n        ) as HTMLElement\n      }\n      function getThumbOffsetPosition({\n        thumbNode,\n        offsetDirection,\n        offsetDimension,\n      }: {\n        thumbNode: HTMLElement\n        offsetDirection: OffsetDirection\n        offsetDimension: OffsetDimension\n      }) {\n        return thumbNode[offsetDirection] + thumbNode[offsetDimension] / 2\n      }\n      function getThumbScrollDimension({\n        thumbWrapper,\n        offsetDimension,\n      }: {\n        thumbWrapper: HTMLDivElement\n        offsetDimension: OffsetDimension\n      }) {\n        return thumbWrapper[offsetDimension] / 2\n      }\n      function getScrollFromValue({\n        thumbWrapper,\n        scrollDirection,\n      }: {\n        thumbWrapper: HTMLDivElement\n        scrollDirection: ScrollDirection\n      }) {\n        return thumbWrapper[scrollDirection]\n      }\n      function getScrollToValue({\n        thumbWrapper,\n        thumbOffsetPosition,\n        thumbScrollDimension,\n        offsetDimension,\n      }: {\n        thumbWrapper: HTMLDivElement\n        thumbOffsetPosition: number\n        thumbScrollDimension: number\n        offsetDimension: OffsetDimension\n      }) {\n        const scrollDimensionProperty =\n          thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight'\n\n        if (\n          activeItem === items.length - 1 ||\n          thumbOffsetPosition - thumbScrollDimension >\n            thumbWrapper[scrollDimensionProperty] - thumbWrapper[offsetDimension]\n        ) {\n          return thumbWrapper[scrollDimensionProperty] - thumbWrapper[offsetDimension]\n        }\n        if (activeItem === 0) {\n          return 0\n        }\n\n        return thumbOffsetPosition - thumbScrollDimension\n      }\n\n      const thumbNode = getThumbNode()\n\n      if (thumbNode) {\n        const thumbWrapper = internalThumbsWrapperRef.current!\n        const offsetDirection = getOffsetDirection()\n        const offsetDimension = getOffsetDimension()\n        const scrollDirection = getScrollDirecton()\n        const thumbOffsetPosition = getThumbOffsetPosition({\n          thumbNode,\n          offsetDimension,\n          offsetDirection,\n        })\n        const thumbScrollDimension = getThumbScrollDimension({\n          thumbWrapper,\n          offsetDimension,\n        })\n\n        setThumbListStyles.start({\n          from: {\n            [thumbsSlideAxis]: getScrollFromValue({\n              thumbWrapper,\n              scrollDirection,\n            }),\n          },\n          to: {\n            [thumbsSlideAxis]: getScrollToValue({\n              thumbWrapper,\n              thumbOffsetPosition,\n              thumbScrollDimension,\n              offsetDimension,\n            }),\n          },\n          onChange: val => {\n            if (thumbsSlideAxis === 'x') {\n              // @ts-ignore\n              internalThumbsWrapperRef!.current!.scrollLeft = val.x\n            } else {\n              // @ts-ignore\n              internalThumbsWrapperRef!.current!.scrollTop = val.y\n            }\n          },\n        })\n      }\n    }\n  }\n  function handlePrepareThumbsDate() {\n    function getPreparedItems(\n      _items: UseSpringCarouselItems['items'],\n    ): ReactSpringThumbItem[] {\n      return _items.map(i => ({\n        id: i.id,\n        renderThumb: i.renderThumb,\n      }))\n    }\n\n    if (prepareThumbsData) {\n      return prepareThumbsData(getPreparedItems(items))\n    }\n    return getPreparedItems(items)\n  }\n\n  const Wrapper = CustomThumbsWrapperComponent\n    ? animated(CustomThumbsWrapperComponent)\n    : InternalWrapper\n\n  const thumbsFragment = withThumbs ? (\n    <Wrapper\n      ref={internalThumbsWrapperRef}\n      className=\"use-spring-carousel-thumbs-wrapper\"\n      onWheel={() => {\n        thumbListStyles[thumbsSlideAxis].stop()\n      }}\n      style={{\n        display: 'flex',\n        flex: 1,\n        position: 'relative',\n        flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column',\n        ...(thumbsSlideAxis === 'x'\n          ? { overflowX: 'auto' }\n          : {\n              overflowY: 'auto',\n              maxHeight: '100%',\n            }),\n      }}\n    >\n      {handlePrepareThumbsDate().map(({ id, renderThumb }) => {\n        const thumbId = `thumb-${id}`\n        return (\n          <div key={thumbId} id={thumbId}>\n            {renderThumb}\n          </div>\n        )\n      })}\n    </Wrapper>\n  ) : null\n\n  return {\n    thumbsFragment,\n    handleThumbsScroll,\n  }\n}\n"],"names":["InternalWrapper","forwardRef","children","rest","ref","_jsx","animated","div","items","withThumbs","thumbsSlideAxis","springConfig","prepareThumbsData","itemsPerSlide","getFluidWrapperScrollValue","getSlideValue","CustomThumbsWrapperComponent","internalThumbsWrapperRef","useRef","thumbListStyles","setThumbListStyles","useSpring","x","y","config","onChange","value","current","Math","abs","getCurrentThumbScrollValue","getThumbsTotalScrollableValue","round","Number","getBoundingClientRect","getThumbSlideValue","thumbSlideTotal","useMount","Error","Wrapper","thumbsFragment","className","onWheel","stop","style","display","flex","position","flexDirection","overflowX","overflowY","maxHeight","getPreparedItems","_items","map","i","id","renderThumb","handlePrepareThumbsDate","thumbId","handleThumbsScroll","activeItem","actionType","totalScrollableValue","nextValue","start","from","[object Object]","to","thumbNode","querySelector","thumbWrapper","offsetDimension","scrollDirection","thumbOffsetPosition","offsetDirection","getThumbOffsetPosition","thumbScrollDimension","getThumbScrollDimension","getScrollFromValue","scrollDimensionProperty","length","getScrollToValue","val","scrollLeft","scrollTop"],"mappings":"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"}
+{"version":3,"file":"useThumbsModule.js","sources":["../../src/modules/useThumbsModule.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useRef } from 'react'\nimport { useSpring, SpringConfig, animated } from 'react-spring'\nimport { useMount } from 'src/utils'\nimport {\n  UseSpringCarouselProps,\n  ReactSpringThumbItem,\n  PrepareThumbsData,\n  UseSpringCarouselItems,\n  SlideActionType,\n} from '../types'\n\ntype OffsetDimension = 'offsetWidth' | 'offsetHeight'\ntype OffsetDirection = 'offsetLeft' | 'offsetTop'\ntype ScrollDirection = 'scrollLeft' | 'scrollTop'\n\ntype Props = {\n  items: UseSpringCarouselItems['items']\n  withThumbs: boolean\n  thumbsSlideAxis: UseSpringCarouselProps['thumbsSlideAxis']\n  springConfig: SpringConfig\n  prepareThumbsData?: PrepareThumbsData\n  itemsPerSlide?: UseSpringCarouselProps['itemsPerSlide']\n  CustomThumbsWrapperComponent?: UseSpringCarouselProps['CustomThumbsWrapperComponent']\n  getFluidWrapperScrollValue?(): number\n  getSlideValue?(): number\n}\n\ntype WrapperProps = {\n  children: React.ReactNode\n} & HTMLAttributes<HTMLDivElement>\n\nconst InternalWrapper = forwardRef<HTMLDivElement, WrapperProps>(\n  ({ children, ...rest }, ref) => {\n    return (\n      <animated.div {...rest} ref={ref}>\n        {children}\n      </animated.div>\n    )\n  },\n)\n\nexport function useThumbsModule({\n  items,\n  withThumbs,\n  thumbsSlideAxis = 'x',\n  springConfig,\n  prepareThumbsData,\n  itemsPerSlide,\n  getFluidWrapperScrollValue = () => 0,\n  getSlideValue = () => 0,\n  CustomThumbsWrapperComponent,\n}: Props) {\n  const internalThumbsWrapperRef = useRef<HTMLDivElement | null>(null)\n  const [thumbListStyles, setThumbListStyles] = useSpring(() => ({\n    x: 0,\n    y: 0,\n    config: springConfig,\n    onChange: ({ value }) => {\n      if (internalThumbsWrapperRef.current) {\n        internalThumbsWrapperRef.current[\n          thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n        ] = Math.abs(value[thumbsSlideAxis])\n      }\n    },\n  }))\n\n  useMount(() => {\n    if (withThumbs && !internalThumbsWrapperRef.current) {\n      throw new Error(\n        \"The thumbs wrapper is not defined. If you've passed a Functional component, be sure to wrap your component in forwardRef.\",\n      )\n    }\n  })\n\n  function getCurrentThumbScrollValue() {\n    return internalThumbsWrapperRef.current![\n      thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n    ]\n  }\n  function getThumbsTotalScrollableValue() {\n    return Math.round(\n      Number(\n        internalThumbsWrapperRef.current?.[\n          thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight'\n        ],\n      ) -\n        internalThumbsWrapperRef.current!.getBoundingClientRect()[\n          thumbsSlideAxis === 'x' ? 'width' : 'height'\n        ],\n    )\n  }\n\n  function getThumbSlideValue() {\n    const thumbSlideTotal = Math.round(getFluidWrapperScrollValue() / getSlideValue())\n    const totalScrollableValue = getThumbsTotalScrollableValue()\n    return totalScrollableValue / thumbSlideTotal\n  }\n\n  function handleThumbsScroll(activeItem: number, actionType?: SlideActionType) {\n    if (itemsPerSlide === 'fluid') {\n      const totalScrollableValue = getThumbsTotalScrollableValue()\n\n      if (actionType === 'next') {\n        const nextValue = getCurrentThumbScrollValue() + getThumbSlideValue()\n        setThumbListStyles.start({\n          from: {\n            [thumbsSlideAxis]: getCurrentThumbScrollValue(),\n          },\n          to: {\n            [thumbsSlideAxis]:\n              nextValue > totalScrollableValue ? totalScrollableValue : nextValue,\n          },\n        })\n      }\n      if (actionType === 'prev') {\n        const nextValue = getCurrentThumbScrollValue() - getThumbSlideValue()\n        setThumbListStyles.start({\n          from: {\n            [thumbsSlideAxis]: getCurrentThumbScrollValue(),\n          },\n          to: {\n            [thumbsSlideAxis]: nextValue < 0 ? 0 : nextValue,\n          },\n        })\n      }\n    } else {\n      function getOffsetDirection() {\n        return thumbsSlideAxis === 'x' ? 'offsetLeft' : 'offsetTop'\n      }\n      function getOffsetDimension() {\n        return thumbsSlideAxis === 'x' ? 'offsetWidth' : 'offsetHeight'\n      }\n      function getScrollDirecton() {\n        return thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'\n      }\n      function getThumbNode() {\n        return internalThumbsWrapperRef.current!.querySelector(\n          `#thumb-${items[activeItem].id}`,\n        ) as HTMLElement\n      }\n      function getThumbOffsetPosition({\n        thumbNode,\n        offsetDirection,\n        offsetDimension,\n      }: {\n        thumbNode: HTMLElement\n        offsetDirection: OffsetDirection\n        offsetDimension: OffsetDimension\n      }) {\n        return thumbNode[offsetDirection] + thumbNode[offsetDimension] / 2\n      }\n      function getThumbScrollDimension({\n        thumbWrapper,\n        offsetDimension,\n      }: {\n        thumbWrapper: HTMLDivElement\n        offsetDimension: OffsetDimension\n      }) {\n        return thumbWrapper[offsetDimension] / 2\n      }\n      function getScrollFromValue({\n        thumbWrapper,\n        scrollDirection,\n      }: {\n        thumbWrapper: HTMLDivElement\n        scrollDirection: ScrollDirection\n      }) {\n        return thumbWrapper[scrollDirection]\n      }\n      function getScrollToValue({\n        thumbWrapper,\n        thumbOffsetPosition,\n        thumbScrollDimension,\n        offsetDimension,\n      }: {\n        thumbWrapper: HTMLDivElement\n        thumbOffsetPosition: number\n        thumbScrollDimension: number\n        offsetDimension: OffsetDimension\n      }) {\n        const scrollDimensionProperty =\n          thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight'\n\n        if (\n          activeItem === items.length - 1 ||\n          thumbOffsetPosition - thumbScrollDimension >\n            thumbWrapper[scrollDimensionProperty] - thumbWrapper[offsetDimension]\n        ) {\n          return thumbWrapper[scrollDimensionProperty] - thumbWrapper[offsetDimension]\n        }\n        if (activeItem === 0) {\n          return 0\n        }\n\n        return thumbOffsetPosition - thumbScrollDimension\n      }\n\n      const thumbNode = getThumbNode()\n\n      if (thumbNode) {\n        const thumbWrapper = internalThumbsWrapperRef.current!\n        const offsetDirection = getOffsetDirection()\n        const offsetDimension = getOffsetDimension()\n        const scrollDirection = getScrollDirecton()\n        const thumbOffsetPosition = getThumbOffsetPosition({\n          thumbNode,\n          offsetDimension,\n          offsetDirection,\n        })\n        const thumbScrollDimension = getThumbScrollDimension({\n          thumbWrapper,\n          offsetDimension,\n        })\n\n        setThumbListStyles.start({\n          from: {\n            [thumbsSlideAxis]: getScrollFromValue({\n              thumbWrapper,\n              scrollDirection,\n            }),\n          },\n          to: {\n            [thumbsSlideAxis]: getScrollToValue({\n              thumbWrapper,\n              thumbOffsetPosition,\n              thumbScrollDimension,\n              offsetDimension,\n            }),\n          },\n          onChange: val => {\n            if (thumbsSlideAxis === 'x') {\n              // @ts-ignore\n              internalThumbsWrapperRef!.current!.scrollLeft = val.x\n            } else {\n              // @ts-ignore\n              internalThumbsWrapperRef!.current!.scrollTop = val.y\n            }\n          },\n        })\n      }\n    }\n  }\n  function handlePrepareThumbsDate() {\n    function getPreparedItems(\n      _items: UseSpringCarouselItems['items'],\n    ): ReactSpringThumbItem[] {\n      return _items.map(i => ({\n        id: i.id,\n        renderThumb: i.renderThumb,\n      }))\n    }\n\n    if (prepareThumbsData) {\n      return prepareThumbsData(getPreparedItems(items))\n    }\n    return getPreparedItems(items)\n  }\n\n  const Wrapper = CustomThumbsWrapperComponent\n    ? animated(CustomThumbsWrapperComponent)\n    : InternalWrapper\n\n  const thumbsFragment = withThumbs ? (\n    <Wrapper\n      ref={internalThumbsWrapperRef}\n      className=\"use-spring-carousel-thumbs-wrapper\"\n      onWheel={() => {\n        thumbListStyles[thumbsSlideAxis].stop()\n      }}\n      style={{\n        display: 'flex',\n        flex: 1,\n        position: 'relative',\n        flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column',\n        ...(thumbsSlideAxis === 'x'\n          ? { overflowX: 'auto' }\n          : {\n              overflowY: 'auto',\n              maxHeight: '100%',\n            }),\n      }}\n    >\n      {handlePrepareThumbsDate().map(({ id, renderThumb }) => {\n        const thumbId = `thumb-${id}`\n        return (\n          <div key={thumbId} id={thumbId}>\n            {renderThumb}\n          </div>\n        )\n      })}\n    </Wrapper>\n  ) : null\n\n  return {\n    thumbsFragment,\n    handleThumbsScroll,\n  }\n}\n"],"names":["forwardRef","_jsx","animated","useRef","useSpring","useMount"],"mappings":"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"}

package/dist/useSpringCarousel.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { UseSpringCarouselProps, UseSpringDafaultTypeReturnProps, UseSpringFluidTypeReturnProps } from './types';
 declare type ReturnHook<T> = T extends 'fluid' ? UseSpringFluidTypeReturnProps : UseSpringDafaultTypeReturnProps;
-export default function useSpringCarousel<T>({ itemsPerSlide, items, withLoop, draggingSlideTreshold, springConfig, shouldResizeOnWindowResize, withThumbs, enableThumbsWrapperScroll, carouselSlideAxis, thumbsSlideAxis, prepareThumbsData, initialActiveItem, initialStartingPosition, disableGestures, gutter, startEndGutter, touchAction, slideAmount, freeScroll, CustomThumbsWrapperComponent, }: UseSpringCarouselProps): ReturnHook<T> & {
+export declare function useSpringCarousel<T>({ itemsPerSlide, items, withLoop, draggingSlideTreshold, springConfig, shouldResizeOnWindowResize, withThumbs, enableThumbsWrapperScroll, carouselSlideAxis, thumbsSlideAxis, prepareThumbsData, initialActiveItem, initialStartingPosition, disableGestures, gutter, startEndGutter, touchAction, slideAmount, freeScroll, CustomThumbsWrapperComponent, }: UseSpringCarouselProps): ReturnHook<T> & {
     carouselFragment: JSX.Element;
     thumbsFragment: JSX.Element;
 };