react-spring-carousel 1.9.29-beta1 → 1.9.29-beta13

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect, createContext, useCallback, useContext, useState } from 'react';
-import { useSpring, animated, config, useTransition } from 'react-spring';
+import { useRef, useEffect, forwardRef, createContext, useCallback, useContext, useState } from 'react';
+import { animated, useSpring, config, useTransition } from 'react-spring';
 import { useDrag } from '@use-gesture/react';
 import { Subject } from 'rxjs';
 import screenfull from 'screenfull';
@@ -90,98 +90,140 @@ function getIsBrowser() {
     return typeof window !== 'undefined';
 }
 
-function useThumbsModule({ items, withThumbs, thumbsSlideAxis = 'x', springConfig, thumbsWrapperRef, prepareThumbsData, }) {
+const InternalWrapper = forwardRef(({ children, ...rest }, ref) => {
+    return (jsx(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 = useRef(null);
     const [thumbListStyles, setThumbListStyles] = useSpring(() => ({
-        [thumbsSlideAxis]: 0,
+        x: 0,
+        y: 0,
         config: springConfig,
+        onChange: ({ value }) => {
+            if (internalThumbsWrapperRef.current) {
+                internalThumbsWrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] = Math.abs(value[thumbsSlideAxis]);
+            }
+        },
     }));
     useMount(() => {
-        if (withThumbs) {
-            const missingThumbs = items.some(item => !item.renderThumb);
-            if (missingThumbs) {
-                throw new Error('The renderThumb property is missing in one or more items. You need to add the renderThumb property to every item of the carousel when the prop withThumbs={true} or eventually set withThumbs={false}.');
-            }
+        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 handleThumbsScroll(activeItem) {
-        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];
+    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 (activeItem === 0) {
-                return 0;
+            if (actionType === 'prev') {
+                const nextValue = getCurrentThumbScrollValue() - getThumbSlideValue();
+                setThumbListStyles.start({
+                    from: {
+                        [thumbsSlideAxis]: getCurrentThumbScrollValue(),
+                    },
+                    to: {
+                        [thumbsSlideAxis]: nextValue < 0 ? 0 : nextValue,
+                    },
+                });
             }
-            return thumbOffsetPosition - thumbScrollDimension;
         }
-        if (thumbsWrapperRef && thumbsWrapperRef.current) {
-            internalThumbsWrapperRef.current = thumbsWrapperRef.current;
-        }
-        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;
-                    }
-                },
-            });
+        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() {
@@ -196,19 +238,12 @@ function useThumbsModule({ items, withThumbs, thumbsSlideAxis = 'x', springConfi
         }
         return getPreparedItems(items);
     }
-    function getScrollDirectionSpringValue() {
-        if (thumbsSlideAxis === 'x') {
-            return {
-                // @ts-ignore
-                scrollLeft: thumbListStyles.x,
-            };
-        }
-        return {
-            // @ts-ignore
-            scrollTop: thumbListStyles.y,
-        };
-    }
-    const thumbsFragment = withThumbs ? (jsx(animated.div, Object.assign({ ref: internalThumbsWrapperRef }, getScrollDirectionSpringValue(), { style: {
+    const Wrapper = CustomThumbsWrapperComponent
+        ? animated(CustomThumbsWrapperComponent)
+        : InternalWrapper;
+    const thumbsFragment = withThumbs ? (jsx(Wrapper, Object.assign({ ref: internalThumbsWrapperRef, className: "use-spring-carousel-thumbs-wrapper", onWheel: () => {
+            thumbListStyles[thumbsSlideAxis].stop();
+        }, style: {
             display: 'flex',
             flex: 1,
             position: 'relative',
@@ -230,22 +265,14 @@ function useThumbsModule({ items, withThumbs, thumbsSlideAxis = 'x', springConfi
 }
 
 const UseSpringCarouselContext = createContext(undefined);
-function useSpringCarouselContext() {
-    const context = useContext(UseSpringCarouselContext);
-    if (!context) {
-        throw new Error(`useSpringCarouselContext isn't being used within the useSringCarousel context; 
-    use the context only inside a component that is rendered within the Carousel.`);
-    }
-    return context;
-}
-function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 140, springConfig = config.default, shouldResizeOnWindowResize = true, withThumbs = false, enableThumbsWrapperScroll = true, carouselSlideAxis = 'x', thumbsSlideAxis = 'x', thumbsWrapperRef, prepareThumbsData, itemsPerSlide = 1, initialActiveItem = 0, initialStartingPosition = 'start', disableGestures = false, gutter = 0, startEndGutter = 0, touchAction = 'none', slideAmount, }) {
+function useSpringCarousel({ itemsPerSlide = 1, items, withLoop = false, draggingSlideTreshold = 140, springConfig = config.default, shouldResizeOnWindowResize = true, withThumbs = false, enableThumbsWrapperScroll = true, carouselSlideAxis = 'x', thumbsSlideAxis = 'x', prepareThumbsData, initialActiveItem = 0, initialStartingPosition = 'start', disableGestures = false, gutter = 0, startEndGutter = 0, touchAction, slideAmount, freeScroll = false, CustomThumbsWrapperComponent, }) {
     function getItems() {
         if (withLoop) {
             return [...items, ...items, ...items];
         }
         return items;
     }
-    const slideActionType = useRef('next');
+    const slideActionType = useRef('initial');
     const internalItems = getItems();
     const activeItem = useRef(initialActiveItem);
     const mainCarouselWrapperRef = useRef(null);
@@ -256,33 +283,51 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
     const currentWindowWidth = useRef(0);
     const fluidTotalWrapperScrollValue = useRef(0);
     const slideFluidEndReached = useRef(false);
-    const currentSlidedValue = useRef(0);
-    const currentStepSlideValue = useRef(0);
-    function getCarouselItem() {
-        return carouselTrackWrapperRef.current?.querySelector('.use-spring-carousel-item');
-    }
-    const getFluidWrapperScrollValue = useCallback(() => {
-        return Math.round(Number(carouselTrackWrapperRef.current?.[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
-            carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
-    }, [carouselSlideAxis]);
+    const initialWindowWidth = useRef(0);
     const [carouselStyles, setCarouselStyles] = useSpring(() => ({
         y: 0,
         x: 0,
         config: springConfig,
-        onRest: ({ value }) => {
-            currentSlidedValue.current = value[carouselSlideAxis];
-            currentStepSlideValue.current = value[carouselSlideAxis];
+        onChange: ({ value }) => {
+            if (mainCarouselWrapperRef.current && freeScroll) {
+                mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] = Math.abs(value[carouselSlideAxis]);
+            }
         },
     }));
-    const getSlideValue = useCallback(() => {
-        if (!carouselTrackWrapperRef.current) {
-            return 0;
+    function getCarouselItem() {
+        return carouselTrackWrapperRef.current?.querySelector('.use-spring-carousel-item');
+    }
+    const getMainCarouselWrapperWidth = useCallback(() => {
+        if (!mainCarouselWrapperRef.current) {
+            throw new Error('mainCarouselWrapperRef is not available');
         }
+        return mainCarouselWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'];
+    }, [carouselSlideAxis]);
+    const getCarouselItemWidth = useCallback(() => {
         const carouselItem = getCarouselItem();
         if (!carouselItem) {
             throw Error('No carousel items available!');
         }
-        const itemVal = carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter;
+        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
+    }, [carouselSlideAxis, gutter]);
+    const getCurrentSlidedValue = useCallback(() => {
+        return carouselStyles[carouselSlideAxis].get();
+    }, [carouselSlideAxis, carouselStyles]);
+    const getIfItemsNotFillTheCarousel = useCallback(() => {
+        return getCarouselItemWidth() * items.length < getMainCarouselWrapperWidth();
+    }, [getCarouselItemWidth, getMainCarouselWrapperWidth, items.length]);
+    const getFluidWrapperScrollValue = useCallback(() => {
+        return Math.round(Number(carouselTrackWrapperRef.current?.[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+            carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
+    }, [carouselSlideAxis]);
+    const getIsFirstItem = useCallback(() => {
+        return getCurrentActiveItem() === 0;
+    }, []);
+    const getSlideValue = useCallback(() => {
+        if (!carouselTrackWrapperRef.current) {
+            return 0;
+        }
+        const itemVal = getCarouselItemWidth();
         if (itemsPerSlide === 'fluid' && typeof slideAmount === 'number') {
             if (slideAmount < itemVal) {
                 throw new Error('slideAmount must be greater than the width of a single item.');
@@ -290,21 +335,23 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
             return slideAmount;
         }
         return itemVal;
-    }, [carouselSlideAxis, gutter, itemsPerSlide, slideAmount]);
+    }, [getCarouselItemWidth, itemsPerSlide, slideAmount]);
     const adjustCarouselWrapperPosition = useCallback((ref) => {
-        if (itemsPerSlide !== 'fluid' && typeof itemsPerSlide === 'number') {
-            const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top';
-            function getDefaultPositionValue() {
-                return getSlideValue() * items.length;
-            }
-            function setPosition(v) {
-                ref.style.top = '0px';
-                ref.style.left = '0px';
+        const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top';
+        function getDefaultPositionValue() {
+            return getCarouselItemWidth() * items.length;
+        }
+        function setPosition(v) {
+            ref.style.top = '0px';
+            ref.style.left = '0px';
+            if (withLoop) {
                 ref.style[positionProperty] = `-${v - startEndGutter}px`;
             }
-            function setStartPosition() {
-                setPosition(getDefaultPositionValue());
-            }
+        }
+        function setStartPosition() {
+            setPosition(getDefaultPositionValue());
+        }
+        if (itemsPerSlide !== 'fluid' && typeof itemsPerSlide === 'number') {
             function setCenterPosition() {
                 setPosition(getDefaultPositionValue() -
                     getSlideValue() * Math.round((itemsPerSlide - 1) / 2));
@@ -334,33 +381,49 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
                 setStartPosition();
             }
         }
+        else {
+            setStartPosition();
+        }
     }, [
-        startEndGutter,
         carouselSlideAxis,
+        itemsPerSlide,
+        getCarouselItemWidth,
+        items.length,
+        startEndGutter,
         getSlideValue,
         initialStartingPosition,
-        items.length,
-        itemsPerSlide,
+        withLoop,
     ]);
     const handleResize = useCallback(() => {
-        if (window.innerWidth === currentWindowWidth.current) {
+        if (window.innerWidth === currentWindowWidth.current || freeScroll) {
             return;
         }
         currentWindowWidth.current = window.innerWidth;
         if (itemsPerSlide === 'fluid') {
+            if (getIfItemsNotFillTheCarousel()) {
+                setCarouselStyles.start({
+                    immediate: true,
+                    [carouselSlideAxis]: 0,
+                });
+                return;
+            }
             fluidTotalWrapperScrollValue.current = getFluidWrapperScrollValue();
+            const diff = currentWindowWidth.current - initialWindowWidth.current;
             if (slideFluidEndReached.current) {
+                const nextValue = -fluidTotalWrapperScrollValue.current;
                 setCarouselStyles.start({
                     immediate: true,
-                    [carouselSlideAxis]: -fluidTotalWrapperScrollValue.current,
+                    [carouselSlideAxis]: nextValue,
                 });
             }
             else {
-                const lastItem = document.querySelector('.use-spring-carousel-item:last-of-type');
-                console.log({
-                    lastItem: lastItem.offsetLeft,
+                const nextValue = getCurrentSlidedValue() + diff;
+                setCarouselStyles.start({
+                    immediate: true,
+                    [carouselSlideAxis]: nextValue,
                 });
             }
+            initialWindowWidth.current = window.innerWidth;
         }
         else {
             setCarouselStyles.start({
@@ -373,17 +436,17 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
                 [carouselSlideAxis]: -(getSlideValue() * getCurrentActiveItem()),
             });
         }
-        if (withLoop) {
-            adjustCarouselWrapperPosition(carouselTrackWrapperRef.current);
-        }
+        adjustCarouselWrapperPosition(carouselTrackWrapperRef.current);
     }, [
-        adjustCarouselWrapperPosition,
-        carouselSlideAxis,
-        getSlideValue,
-        setCarouselStyles,
-        withLoop,
         itemsPerSlide,
+        getIfItemsNotFillTheCarousel,
         getFluidWrapperScrollValue,
+        freeScroll,
+        setCarouselStyles,
+        carouselSlideAxis,
+        getCurrentSlidedValue,
+        getSlideValue,
+        adjustCarouselWrapperPosition,
     ]);
     // Custom modules
     const { useListenToCustomEvent, emitObservable } = useCustomEventsModule();
@@ -397,18 +460,29 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
         items,
         thumbsSlideAxis,
         springConfig,
-        thumbsWrapperRef,
         prepareThumbsData,
+        itemsPerSlide,
+        getFluidWrapperScrollValue,
+        getSlideValue,
+        CustomThumbsWrapperComponent,
     });
-    function getCurrentSlidedValue() {
-        return carouselStyles[carouselSlideAxis].get();
+    function getWrapperScrollDirection() {
+        if (!mainCarouselWrapperRef.current) {
+            throw new Error('Missing mainCarouselWrapperRef.current');
+        }
+        return mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
     }
     const bindDrag = useDrag(props => {
         const isDragging = props.dragging;
         const movement = props.movement[carouselSlideAxis === 'x' ? 0 : 1];
         function resetAnimation() {
             if (itemsPerSlide === 'fluid') {
-                if (getIsFirstItem()) {
+                if (getIfItemsNotFillTheCarousel()) {
+                    setCarouselStyles.start({
+                        [carouselSlideAxis]: 0,
+                    });
+                }
+                else if (getIsFirstItem()) {
                     slideToPrevItem();
                 }
                 else if (slideFluidEndReached.current) {
@@ -418,7 +492,7 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
                 }
                 else {
                     setCarouselStyles.start({
-                        [carouselSlideAxis]: currentStepSlideValue.current,
+                        [carouselSlideAxis]: getCurrentSlidedValue(),
                     });
                 }
             }
@@ -428,24 +502,46 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
                 });
             }
         }
-        if (props.first) {
-            currentSlidedValue.current = getCurrentSlidedValue();
-        }
         if (isDragging) {
             setIsDragging(true);
             emitObservable({
                 eventName: 'onDrag',
                 ...props,
             });
-            setCarouselStyles.start({
-                [carouselSlideAxis]: currentSlidedValue.current + movement,
-            });
+            if (freeScroll) {
+                const direction = props.direction[carouselSlideAxis === 'x' ? 0 : 1];
+                if (getWrapperScrollDirection() === 0 && direction > 0) {
+                    props.cancel();
+                }
+                else {
+                    setCarouselStyles.start({
+                        from: {
+                            [carouselSlideAxis]: getWrapperScrollDirection(),
+                        },
+                        to: {
+                            [carouselSlideAxis]: direction > 0
+                                ? getWrapperScrollDirection() - Math.abs(movement)
+                                : getWrapperScrollDirection() + Math.abs(movement),
+                        },
+                    });
+                }
+            }
+            else {
+                setCarouselStyles.start({
+                    [carouselSlideAxis]: getCurrentSlidedValue() + movement,
+                });
+            }
             const prevItemTreshold = movement > draggingSlideTreshold;
             const nextItemTreshold = movement < -draggingSlideTreshold;
             if (mainCarouselWrapperRef.current.getBoundingClientRect().width >=
                 items.length * getSlideValue()) {
                 slideFluidEndReached.current = true;
             }
+            if ((prevItemTreshold || nextItemTreshold) && getIfItemsNotFillTheCarousel()) {
+                props.cancel();
+                resetAnimation();
+                return;
+            }
             if (slideFluidEndReached.current && movement < 0) {
                 if (nextItemTreshold) {
                     props.cancel();
@@ -473,7 +569,7 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
                 }
             }
         }
-        if (props.last && !props.pressed) {
+        if (props.last && !props.pressed && !freeScroll) {
             resetAnimation();
         }
     }, {
@@ -518,6 +614,7 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
         }
     });
     useMount(() => {
+        initialWindowWidth.current = window.innerWidth;
         if (initialActiveItem > 0 && initialActiveItem <= items.length) {
             slideToItem({
                 to: initialActiveItem,
@@ -527,10 +624,13 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
         }
     });
     useEffect(() => {
+        function resize() {
+            setTimeout(handleResize);
+        }
         if (shouldResizeOnWindowResize) {
-            window.addEventListener('resize', handleResize);
+            window.addEventListener('resize', resize);
             return () => {
-                window.removeEventListener('resize', handleResize);
+                window.removeEventListener('resize', resize);
             };
         }
     }, [handleResize, shouldResizeOnWindowResize]);
@@ -601,18 +701,21 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
     function findItemIndex(id) {
         return items.findIndex(item => item.id === id);
     }
-    function slideToItem({ from, to, customTo, immediate = false, onRest = () => { }, }) {
+    function slideToItem({ from, to = -1, customTo, immediate = false, onRest = () => { }, }) {
         if (!immediate) {
             setActiveItem(to);
             setIsAnimating(true);
             emitObservable({
                 eventName: 'onSlideStartChange',
-                nextItem: to,
                 slideActionType: getSlideActionType(),
+                nextItem: {
+                    index: to,
+                    id: items[to].id,
+                },
             });
         }
         function getFromValue() {
-            if (from) {
+            if (typeof from === 'number') {
                 return {
                     from: {
                         [carouselSlideAxis]: from,
@@ -622,7 +725,7 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
             return {};
         }
         function getToValue() {
-            if (customTo) {
+            if (typeof customTo === 'number') {
                 return {
                     [carouselSlideAxis]: customTo,
                 };
@@ -643,67 +746,68 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
                     if (!immediate) {
                         emitObservable({
                             eventName: 'onSlideChange',
-                            currentItem: getCurrentActiveItem(),
                             slideActionType: getSlideActionType(),
+                            currentItem: {
+                                index: getCurrentActiveItem(),
+                                id: items[getCurrentActiveItem()].id,
+                            },
                         });
                     }
                 }
             },
         });
         if (enableThumbsWrapperScroll && withThumbs && !immediate) {
-            handleThumbsScroll(to);
-        }
-    }
-    function getWrapperFromValue(element) {
-        if (element.style.transform === 'none') {
-            return 0;
+            handleThumbsScroll(to, getSlideActionType());
         }
-        const values = element.style.transform.split(/\w+\(|\);?/);
-        return Number(values[1].split(/,\s?/g)[carouselSlideAxis === 'x' ? 0 : 1].replace('px', ''));
-    }
-    function getIsFirstItem() {
-        return getCurrentActiveItem() === 0;
     }
     function getIsLastItem() {
         return getCurrentActiveItem() === items.length - 1;
     }
     function slideToPrevItem() {
-        if (itemsPerSlide === 'fluid' && !withLoop) {
-            const currentSlideVal = getWrapperFromValue(carouselTrackWrapperRef.current);
-            const nextPrevValue = currentSlideVal + getSlideValue() + 100;
-            if (getIsFirstItem()) {
-                slideToItem({
-                    to: 0,
-                });
+        setSlideActionType('prev');
+        if (itemsPerSlide === 'fluid') {
+            if (getIfItemsNotFillTheCarousel()) {
                 return;
             }
-            if (nextPrevValue >= 0) {
+            const nextPrevValue = getCurrentSlidedValue() + getSlideValue() + 200;
+            if (freeScroll) {
+                const nextValue = mainCarouselWrapperRef.current.scrollLeft - getSlideValue();
                 slideToItem({
-                    to: 0,
+                    customTo: nextValue < 0 ? 0 : nextValue,
+                    from: mainCarouselWrapperRef.current.scrollLeft,
                 });
-                currentStepSlideValue.current = 0;
+            }
+            else if (nextPrevValue >= 0) {
+                if (withLoop) {
+                    slideToItem({
+                        from: getCurrentSlidedValue() - getCarouselItemWidth() * items.length,
+                        customTo: getCurrentSlidedValue() -
+                            getCarouselItemWidth() * items.length +
+                            getSlideValue(),
+                    });
+                }
+                else {
+                    slideToItem({
+                        customTo: 0,
+                    });
+                }
             }
             else {
-                const nextVal = currentStepSlideValue.current + getSlideValue();
-                currentStepSlideValue.current = nextVal;
                 slideToItem({
-                    to: getPrevItem(),
-                    customTo: nextVal,
+                    customTo: getCurrentSlidedValue() + getSlideValue(),
                 });
             }
             if (slideFluidEndReached.current) {
                 slideFluidEndReached.current = false;
             }
         }
-        else if ((!withLoop && getCurrentActiveItem() === 0) || windowIsHidden.current) {
-            return;
-        }
         else {
-            setSlideActionType('prev');
+            if ((!withLoop && getCurrentActiveItem() === 0) || windowIsHidden.current) {
+                return;
+            }
             if (getIsFirstItem()) {
                 slideToItem({
-                    from: -(Math.abs(getWrapperFromValue(carouselTrackWrapperRef.current)) +
-                        getSlideValue() * items.length),
+                    from: getCurrentSlidedValue() - getSlideValue() * items.length,
                     to: items.length - 1,
                 });
             }
@@ -715,58 +819,51 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
         }
     }
     function slideToNextItem() {
-        if (itemsPerSlide === 'fluid' && !withLoop) {
-            const willGoAfterLastFluidItem = Math.abs(getNextItem() * getSlideValue()) + 100 >=
+        setSlideActionType('next');
+        if (itemsPerSlide === 'fluid') {
+            if (getIfItemsNotFillTheCarousel()) {
+                return;
+            }
+            const willGoAfterLastFluidItem = Math.abs(getCurrentSlidedValue() - getSlideValue()) + 100 >=
                 fluidTotalWrapperScrollValue.current;
-            function getDefaultNextValue() {
-                return -(getNextItem() * getSlideValue());
+            if (freeScroll) {
+                slideToItem({
+                    customTo: mainCarouselWrapperRef.current.scrollLeft + getSlideValue(),
+                    from: mainCarouselWrapperRef.current.scrollLeft,
+                });
             }
-            console.log(getDefaultNextValue());
-            if (mainCarouselWrapperRef.current.getBoundingClientRect().width >=
-                items.length * getSlideValue()) {
-                slideFluidEndReached.current = true;
+            else if (withLoop &&
+                Math.abs(getCurrentSlidedValue() - getSlideValue()) >=
+                    items.length * getCarouselItemWidth()) {
+                const currentWidth = getCarouselItemWidth() * items.length;
+                slideToItem({
+                    from: getCurrentSlidedValue() + currentWidth,
+                    customTo: getCurrentSlidedValue() + currentWidth - getSlideValue(),
+                });
             }
-            if (slideFluidEndReached.current) {
+            else if (slideFluidEndReached.current) {
                 return;
             }
-            if (willGoAfterLastFluidItem) {
-                const nextValue = -fluidTotalWrapperScrollValue.current;
+            else if (willGoAfterLastFluidItem) {
                 slideFluidEndReached.current = true;
-                currentStepSlideValue.current = nextValue;
                 slideToItem({
-                    customTo: nextValue,
-                    to: getNextItem(),
+                    customTo: -fluidTotalWrapperScrollValue.current,
                 });
             }
             else {
-                const isPure = Math.abs(currentStepSlideValue.current % getSlideValue()) === 0;
-                if (!isPure) {
-                    const nextValue = currentStepSlideValue.current - getSlideValue();
-                    currentStepSlideValue.current = nextValue;
-                    slideToItem({
-                        to: getNextItem(),
-                        customTo: nextValue,
-                    });
-                }
-                else {
-                    currentStepSlideValue.current = getDefaultNextValue();
-                    slideToItem({
-                        to: getNextItem(),
-                        customTo: getDefaultNextValue(),
-                    });
-                }
+                slideToItem({
+                    customTo: getCurrentSlidedValue() - getSlideValue(),
+                });
             }
         }
-        else if ((!withLoop && getCurrentActiveItem() === internalItems.length - 1) ||
-            windowIsHidden.current) {
-            return;
-        }
         else {
-            setSlideActionType('next');
+            if ((!withLoop && getCurrentActiveItem() === internalItems.length - 1) ||
+                windowIsHidden.current) {
+                return;
+            }
             if (getIsLastItem()) {
                 slideToItem({
-                    from: getWrapperFromValue(carouselTrackWrapperRef.current) +
-                        getSlideValue() * items.length,
+                    from: getCurrentSlidedValue() + getSlideValue() * items.length,
                     to: 0,
                 });
             }
@@ -815,14 +912,18 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
         getIsPrevItem,
         slideToPrevItem,
         slideToNextItem,
-        slideToItem: _slideToItem,
-        getIsActiveItem: id => {
-            return findItemIndex(id) === getCurrentActiveItem();
-        },
-        getCurrentActiveItem: () => ({
-            id: items[getCurrentActiveItem()].id,
-            index: getCurrentActiveItem(),
-        }),
+        ...(typeof itemsPerSlide === 'number'
+            ? {
+                slideToItem: _slideToItem,
+                getIsActiveItem: (id) => {
+                    return findItemIndex(id) === getCurrentActiveItem();
+                },
+                getCurrentActiveItem: () => ({
+                    id: items[getCurrentActiveItem()].id,
+                    index: getCurrentActiveItem(),
+                }),
+            }
+            : {}),
     };
     function getItemStyles() {
         if (typeof itemsPerSlide === 'number') {
@@ -846,28 +947,59 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
             height: carouselSlideAxis === 'y' ? percentValue : '100%',
         };
     }
-    const carouselFragment = (jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: jsx("div", Object.assign({ ref: mainCarouselWrapperRef, "data-testid": "use-spring-carousel-wrapper", style: {
+    function handleCarouselFragmentRef(ref) {
+        if (ref) {
+            carouselTrackWrapperRef.current = ref;
+            adjustCarouselWrapperPosition(ref);
+        }
+    }
+    function getOverflowStyles() {
+        if (freeScroll) {
+            if (carouselSlideAxis === 'x') {
+                return {
+                    overflowX: 'auto',
+                };
+            }
+            return {
+                overflowY: 'auto',
+            };
+        }
+        return {};
+    }
+    function getWheelEvent() {
+        if (freeScroll) {
+            return {
+                onWheel() {
+                    carouselStyles[carouselSlideAxis].stop();
+                },
+            };
+        }
+        return {};
+    }
+    function getTouchAction() {
+        if (!touchAction) {
+            if (carouselSlideAxis === 'x') {
+                return 'pan-y';
+            }
+            return 'pan-x';
+        }
+        return touchAction;
+    }
+    const carouselFragment = (jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: jsx("div", Object.assign({ ref: mainCarouselWrapperRef, className: "use-spring-carousel-main-wrapper", "data-testid": "use-spring-carousel-wrapper" }, getWheelEvent(), { 
+            // @ts-ignore
+            style: {
                 display: 'flex',
                 position: 'relative',
                 width: '100%',
                 height: '100%',
-                overflow: 'hidden',
-            } }, { children: jsx(animated.div, Object.assign({}, bindDrag(), { "data-testid": "use-spring-carousel-animated-wrapper", style: {
+                ...getOverflowStyles(),
+            } }, { children: jsx(animated.div, Object.assign({}, bindDrag(), { className: "use-spring-carousel-track-wrapper", "data-testid": "use-spring-carousel-animated-wrapper", ref: handleCarouselFragmentRef, style: {
                     display: 'flex',
-                    top: 0,
-                    left: 0,
                     position: 'relative',
-                    touchAction,
+                    touchAction: getTouchAction(),
                     flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column',
                     ...getAnimatedWrapperStyles(),
-                    ...carouselStyles,
-                }, ref: ref => {
-                    if (ref) {
-                        carouselTrackWrapperRef.current = ref;
-                        if (withLoop) {
-                            adjustCarouselWrapperPosition(ref);
-                        }
-                    }
+                    ...(freeScroll ? {} : carouselStyles),
                 } }, { children: internalItems.map(({ id, renderItem }, index) => {
                     return (jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: {
                             display: 'flex',
@@ -877,10 +1009,17 @@ function useSpringCarousel({ items, withLoop = false, draggingSlideTreshold = 14
                 }) }), void 0) }), void 0) }), void 0));
     const thumbsFragment = (jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: _thumbsFragment }), void 0));
     return {
+        ...contextProps,
         carouselFragment,
         thumbsFragment,
-        ...contextProps,
     };
+}
+function useSpringCarouselContext() {
+    const context = useContext(UseSpringCarouselContext);
+    if (!context) {
+        throw new Error('useSpringCarouselContext must be used only inside a component that is rendered inside the Carousel.');
+    }
+    return context;
 }
 
 const UseTransitionCarouselContext = createContext(undefined);
@@ -892,7 +1031,7 @@ function useTransitionCarouselContext() {
     }
     return context;
 }
-function useTransitionCarousel({ items, withLoop = false, withThumbs = false, springConfig = config.default, thumbsSlideAxis = 'x', enableThumbsWrapperScroll = true, draggingSlideTreshold = 50, prepareThumbsData, toPrevItemSpringProps, toNextItemSpringProps, disableGestures = false, springAnimationProps = {
+function useTransitionCarousel({ items, withLoop = false, withThumbs = false, springConfig = config.default, thumbsSlideAxis = 'x', enableThumbsWrapperScroll = true, draggingSlideTreshold = 50, prepareThumbsData, toPrevItemSpringProps, toNextItemSpringProps, disableGestures = false, CustomThumbsWrapperComponent, springAnimationProps = {
     initial: {
         opacity: 1,
         position: 'relative',
@@ -925,6 +1064,7 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
         thumbsSlideAxis,
         springConfig,
         prepareThumbsData,
+        CustomThumbsWrapperComponent,
     });
     const bindSwipe = useDrag(({ last, movement: [mx] }) => {
         if (getIsAnimating()) {
@@ -1016,8 +1156,11 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
                 setIsAnimating(false);
                 emitObservable({
                     eventName: 'onSlideChange',
-                    currentItem: activeItem,
                     slideActionType: getSlideActionType(),
+                    currentItem: {
+                        index: activeItem,
+                        id: items[activeItem].id,
+                    },
                 });
             }
         },
@@ -1059,8 +1202,11 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
         const newActiveItem = findItemIndex(items[itemIndex].id);
         emitObservable({
             eventName: 'onSlideStartChange',
-            nextItem: newActiveItem,
             slideActionType: getSlideActionType(),
+            nextItem: {
+                index: newActiveItem,
+                id: items[itemIndex].id,
+            },
         });
         if (newActiveItem > currentItem) {
             setSlideActionType('next');
@@ -1080,16 +1226,22 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
             if (isLastItem) {
                 emitObservable({
                     eventName: 'onSlideStartChange',
-                    nextItem: 0,
                     slideActionType: getSlideActionType(),
+                    nextItem: {
+                        index: 0,
+                        id: items[0].id,
+                    },
                 });
                 setActiveItem(0);
             }
             else {
                 emitObservable({
                     eventName: 'onSlideStartChange',
-                    nextItem: activeItem + 1,
                     slideActionType: getSlideActionType(),
+                    nextItem: {
+                        index: activeItem + 1,
+                        id: items[activeItem + 1].id,
+                    },
                 });
                 setActiveItem(activeItem + 1);
             }
@@ -1098,8 +1250,11 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
             if (!isLastItem) {
                 emitObservable({
                     eventName: 'onSlideStartChange',
-                    nextItem: activeItem + 1,
                     slideActionType: getSlideActionType(),
+                    nextItem: {
+                        index: activeItem + 1,
+                        id: items[activeItem + 1].id,
+                    },
                 });
                 setSlideActionType('next');
                 setActiveItem(activeItem + 1);
@@ -1113,16 +1268,22 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
             if (isFirstItem) {
                 emitObservable({
                     eventName: 'onSlideStartChange',
-                    nextItem: items.length - 1,
                     slideActionType: getSlideActionType(),
+                    nextItem: {
+                        index: activeItem - 1,
+                        id: items[activeItem - 1].id,
+                    },
                 });
                 setActiveItem(items.length - 1);
             }
             else {
                 emitObservable({
                     eventName: 'onSlideStartChange',
-                    nextItem: activeItem - 1,
                     slideActionType: getSlideActionType(),
+                    nextItem: {
+                        index: activeItem - 1,
+                        id: items[activeItem - 1].id,
+                    },
                 });
                 setActiveItem(activeItem - 1);
             }
@@ -1132,8 +1293,11 @@ function useTransitionCarousel({ items, withLoop = false, withThumbs = false, sp
                 setSlideActionType('prev');
                 emitObservable({
                     eventName: 'onSlideStartChange',
-                    nextItem: activeItem - 1,
                     slideActionType: getSlideActionType(),
+                    nextItem: {
+                        index: activeItem - 1,
+                        id: items[activeItem - 1].id,
+                    },
                 });
                 setActiveItem(activeItem - 1);
             }