react-spring-carousel 3.0.0-beta003 → 3.0.0-beta005

package/dist/esm/index.js

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

package/dist/esm/index2.js

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

package/dist/esm/useSpringCarousel.js

@@ -1,15 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import { useSpring, config } from '@react-spring/web';
+import { u as useSpring, a as useEventsModule, b as useThumbsModule, c as useFullscreenModule, d as config } from './useThumbsModule-dc12dd34.js';
 import { createContext, useRef, useCallback, useEffect, useLayoutEffect, useContext } from 'react';
-import { u as useEventsModule, a as useThumbsModule, b as useFullscreenModule } from './useThumbsModule-12c81348.js';
 import { useDrag } from '@use-gesture/react';
 import 'screenfull';
+import 'react-dom';
 
-function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "x", itemsPerSlide = 1, slideType = "fixed", gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = "x", disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, }) {
+function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = 'x', itemsPerSlide = 1, slideType = 'fixed', gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = 'x', disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, }) {
     const prevWindowWidth = useRef(0);
     const draggingSlideTreshold = useRef(_draggingSlideTreshold !== null && _draggingSlideTreshold !== void 0 ? _draggingSlideTreshold : 0);
-    const slideActionType = useRef("initial");
-    const slideModeType = useRef("initial");
+    const slideActionType = useRef('initial');
+    const slideModeType = useRef('initial');
     const prevSlidedValue = useRef(0);
     const [spring, setSpring] = useSpring(() => ({
         val: 0,
@@ -17,7 +17,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         onChange({ value }) {
             if (freeScroll && mainCarouselWrapperRef.current) {
                 setStartEndItemReachedOnFreeScroll();
-                if (carouselSlideAxis === "x") {
+                if (carouselSlideAxis === 'x') {
                     mainCarouselWrapperRef.current.scrollLeft = Math.abs(value.val);
                 }
                 else {
@@ -25,7 +25,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                 }
             }
             else if (carouselTrackWrapperRef.current) {
-                if (carouselSlideAxis === "x") {
+                if (carouselSlideAxis === 'x') {
                     carouselTrackWrapperRef.current.style.transform = `translate3d(${value.val}px, 0px,0px)`;
                 }
                 else {
@@ -42,9 +42,9 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     const getItems = useCallback(() => {
         if (withLoop) {
             return [
-                ...items.map((i) => (Object.assign(Object.assign({}, i), { id: `prev-repeated-item-${i.id}` }))),
+                ...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}` }))),
+                ...items.map(i => (Object.assign(Object.assign({}, i), { id: `next-repeated-item-${i.id}` }))),
             ];
         }
         return [...items];
@@ -63,7 +63,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         handleResize: () => adjustCarouselWrapperPosition(),
     });
     function getItemStyles() {
-        if (slideType === "fixed" && !freeScroll) {
+        if (slideType === 'fixed' && !freeScroll) {
             return {
                 marginRight: `${gutter}px`,
                 flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)`,
@@ -73,27 +73,27 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     }
     function getSlideValue() {
         var _a;
-        const carouselItem = (_a = mainCarouselWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".use-spring-carousel-item");
+        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!");
+            throw Error('No carousel items available!');
         }
-        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === "x" ? "width" : "height"] + gutter);
+        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
     }
     function slideToItem({ from, to, nextActiveItem, immediate = false, slideMode, }) {
         slideModeType.current = slideMode;
-        if (typeof nextActiveItem === "number") {
+        if (typeof nextActiveItem === 'number') {
             if (!freeScroll) {
                 activeItem.current = nextActiveItem;
             }
             emitEvent({
-                eventName: "onSlideStartChange",
+                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,
+                    id: freeScroll ? '' : items[activeItem.current].id,
                 },
             });
         }
@@ -110,14 +110,14 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
             onRest(value) {
                 if (!immediate && value.finished) {
                     emitEvent({
-                        eventName: "onSlideChange",
+                        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,
+                            id: freeScroll ? '' : items[activeItem.current].id,
                         },
                     });
                 }
@@ -132,38 +132,38 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         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"]);
+        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%",
+            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");
+        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!");
+            throw Error('No carousel items available!');
         }
-        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === "x" ? "width" : "height"] + gutter);
+        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
     }
     function adjustCarouselWrapperPosition() {
-        const positionProperty = carouselSlideAxis === "x" ? "left" : "top";
+        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.top = '0px';
+                ref.style.left = '0px';
                 ref.style[positionProperty] = `-${v - startEndGutter}px`;
             }
             else {
-                ref.style.left = "0px";
-                ref.style.top = "0px";
+                ref.style.left = '0px';
+                ref.style.top = '0px';
             }
         }
         const currentFromValue = Math.abs(getFromValue());
@@ -180,18 +180,18 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
             });
             return;
         }
-        if (initialStartingPosition === "center") {
+        if (initialStartingPosition === 'center') {
             setPosition(getCarouselItemWidth() * items.length -
                 getSlideValue() * Math.round((itemsPerSlide - 1) / 2));
         }
-        else if (initialStartingPosition === "end") {
+        else if (initialStartingPosition === 'end') {
             setPosition(getCarouselItemWidth() * items.length -
                 getSlideValue() * Math.round(itemsPerSlide - 1));
         }
         else {
             setPosition(getCarouselItemWidth() * items.length);
         }
-        if (!freeScroll && slideType === "fixed") {
+        if (!freeScroll && slideType === 'fixed') {
             const val = -(getSlideValue() * activeItem.current);
             prevSlidedValue.current = val;
             setSpring.start({
@@ -202,26 +202,26 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     }
     function getFromValue() {
         if (freeScroll && mainCarouselWrapperRef.current) {
-            return mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"];
+            return mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
         }
         return spring.val.get();
     }
     function getToValue(type, index) {
-        if (freeScroll && type === "next") {
+        if (freeScroll && type === 'next') {
             const next = prevSlidedValue.current + getSlideValue();
             if (next > getTotalScrollValue()) {
                 return getTotalScrollValue();
             }
             return next;
         }
-        if (freeScroll && type === "prev") {
+        if (freeScroll && type === 'prev') {
             const next = prevSlidedValue.current - getSlideValue();
             if (next < 0) {
                 return 0;
             }
             return next;
         }
-        if (type === "next") {
+        if (type === 'next') {
             if (index) {
                 return -(index * getSlideValue());
             }
@@ -232,14 +232,14 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         }
         return prevSlidedValue.current + getSlideValue();
     }
-    function slideToPrevItem(type = "click", index) {
+    function slideToPrevItem(type = 'click', index) {
         if (!init || (firstItemReached.current && !withLoop))
             return;
-        slideActionType.current = "prev";
+        slideActionType.current = 'prev';
         lastItemReached.current = false;
         const nextItem = index || activeItem.current - 1;
         if (!withLoop) {
-            const nextItemWillExceed = getToValue("prev", index) + getSlideValue() / 3 > 0;
+            const nextItemWillExceed = getToValue('prev', index) + getSlideValue() / 3 > 0;
             if (firstItemReached.current)
                 return;
             if (nextItemWillExceed) {
@@ -274,19 +274,18 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         slideToItem({
             slideMode: type,
             from: getFromValue(),
-            to: getToValue("prev", index),
+            to: getToValue('prev', index),
             nextActiveItem: nextItem,
         });
     }
-    function slideToNextItem(type = "click", index) {
+    function slideToNextItem(type = 'click', index) {
         if (!init || (lastItemReached.current && !withLoop))
             return;
-        slideActionType.current = "next";
+        slideActionType.current = 'next';
         firstItemReached.current = false;
         const nextItem = index || activeItem.current + 1;
         if (!withLoop) {
-            const nextItemWillExceed = Math.abs(getToValue("next", index)) >
-                getTotalScrollValue() - getSlideValue() / 3;
+            const nextItemWillExceed = Math.abs(getToValue('next', index)) > getTotalScrollValue() - getSlideValue() / 3;
             if (lastItemReached.current)
                 return;
             if (nextItemWillExceed) {
@@ -321,7 +320,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         slideToItem({
             slideMode: type,
             from: getFromValue(),
-            to: getToValue("next", index),
+            to: getToValue('next', index),
             nextActiveItem: nextItem,
         });
     }
@@ -363,28 +362,28 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
             prevWindowWidth.current = window.innerWidth;
             adjustCarouselWrapperPosition();
         }
-        window.addEventListener("resize", handleResize);
+        window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener("resize", handleResize);
+            window.removeEventListener('resize', handleResize);
         };
     }, []);
-    const bindDrag = useDrag((state) => {
+    const bindDrag = useDrag(state => {
         const isDragging = state.dragging;
-        const movement = state.offset[carouselSlideAxis === "x" ? 0 : 1];
-        const currentMovement = state.movement[carouselSlideAxis === "x" ? 0 : 1];
-        const direction = state.direction[carouselSlideAxis === "x" ? 0 : 1];
+        const 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";
+                slideActionType.current = 'prev';
             }
             else {
-                slideActionType.current = "next";
+                slideActionType.current = 'next';
             }
-            emitEvent(Object.assign(Object.assign({}, state), { eventName: "onDrag", slideActionType: slideActionType.current }));
+            emitEvent(Object.assign(Object.assign({}, state), { eventName: 'onDrag', slideActionType: slideActionType.current }));
             if (freeScroll) {
-                if (slideActionType.current === "prev" && movement > 0) {
+                if (slideActionType.current === 'prev' && movement > 0) {
                     state.cancel();
                     setSpring.start({
                         from: {
@@ -425,21 +424,21 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                 },
             });
             if (slideWhenThresholdIsReached && nextItemTreshold) {
-                slideToNextItem("drag");
+                slideToNextItem('drag');
                 state.cancel();
             }
             else if (slideWhenThresholdIsReached && prevItemTreshold) {
-                slideToPrevItem("drag");
+                slideToPrevItem('drag');
                 state.cancel();
             }
             return;
         }
         if (state.last && !state.canceled && freeScroll) {
-            if (slideActionType.current === "prev") {
-                slideToPrevItem("drag");
+            if (slideActionType.current === 'prev') {
+                slideToPrevItem('drag');
             }
-            if (slideActionType.current === "next") {
-                slideToNextItem("drag");
+            if (slideActionType.current === 'next') {
+                slideToNextItem('drag');
             }
         }
         if (state.last && !state.canceled && !freeScroll) {
@@ -451,7 +450,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                     });
                 }
                 else {
-                    slideToNextItem("drag");
+                    slideToNextItem('drag');
                 }
             }
             else if (prevItemTreshold) {
@@ -462,7 +461,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                     });
                 }
                 else {
-                    slideToPrevItem("drag");
+                    slideToPrevItem('drag');
                 }
             }
             else {
@@ -483,7 +482,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                     -mainCarouselWrapperRef.current.scrollTop,
                 ];
             }
-            if (carouselSlideAxis === "x") {
+            if (carouselSlideAxis === 'x') {
                 return [spring.val.get(), spring.val.get()];
             }
             return [spring.val.get(), spring.val.get()];
@@ -491,13 +490,13 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     });
     function getWrapperOverflowStyles() {
         if (freeScroll) {
-            if (carouselSlideAxis === "x") {
+            if (carouselSlideAxis === 'x') {
                 return {
-                    overflowX: "auto",
+                    overflowX: 'auto',
                 };
             }
             return {
-                overflowY: "auto",
+                overflowY: 'auto',
             };
         }
         return {};
@@ -505,17 +504,17 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     function setStartEndItemReachedOnFreeScroll() {
         if (mainCarouselWrapperRef.current) {
             prevSlidedValue.current =
-                mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"];
-            if (mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"] === 0) {
+                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()) {
+            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()) {
+            if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] === getTotalScrollValue()) {
                 firstItemReached.current = false;
                 lastItemReached.current = true;
             }
@@ -533,12 +532,12 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         return {};
     }
     function findItemIndex(id) {
-        return items.findIndex((item) => item.id === 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);
+        if (typeof id === 'string') {
+            itemIndex = items.findIndex(_item => _item.id === id);
         }
         else {
             itemIndex = id;
@@ -560,10 +559,10 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         const currentItem = findItemIndex(items[activeItem.current].id);
         const newActiveItem = findItemIndex(items[itemIndex].id);
         if (newActiveItem > currentItem) {
-            slideToNextItem("click", newActiveItem);
+            slideToNextItem('click', newActiveItem);
         }
         else {
-            slideToPrevItem("click", newActiveItem);
+            slideToPrevItem('click', newActiveItem);
         }
     }
     function getIsNextItem(id) {
@@ -582,8 +581,8 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         }
         return itemIndex === _activeItem - 1;
     }
-    const carouselFragment = (jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, getScrollHandlers(), { style: Object.assign({ display: "flex", position: "relative", width: "100%", height: "100%" }, getWrapperOverflowStyles()) }, { children: jsx("div", Object.assign({ ref: carouselTrackWrapperRef }, bindDrag(), { style: Object.assign({ position: "relative", display: "flex", flexDirection: carouselSlideAxis === "x" ? "row" : "column", touchAction: "none" }, getAnimatedWrapperStyles()) }, { children: internalItems.map((item, index) => {
-                return (jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: Object.assign({ display: "flex", position: "relative", flex: "1" }, getItemStyles()) }, { children: item.renderItem }), `${item.id}-${index}`));
+    const carouselFragment = (jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, getScrollHandlers(), { style: Object.assign({ display: 'flex', position: 'relative', width: '100%', height: '100%' }, getWrapperOverflowStyles()) }, { children: jsx("div", Object.assign({ ref: carouselTrackWrapperRef }, bindDrag(), { style: Object.assign({ position: 'relative', display: 'flex', flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column', touchAction: 'none' }, getAnimatedWrapperStyles()) }, { children: internalItems.map((item, index) => {
+                return (jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: Object.assign({ display: 'flex', position: 'relative', flex: '1' }, getItemStyles()) }, { children: item.renderItem }), `${item.id}-${index}`));
             }) })) })));
     return {
         useListenToCustomEvent,
@@ -607,7 +606,7 @@ const Context = createContext(undefined);
 function useSpringCarouselContext() {
     const context = useContext(Context);
     if (!context) {
-        throw new Error("useSpringCarouselContext must be used within the carousel.");
+        throw new Error('useSpringCarouselContext must be used within the carousel.');
     }
     return context;
 }