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

package/dist/index.umd.js

@@ -93,98 +93,140 @@
       return typeof window !== 'undefined';
   }
 
-  function useThumbsModule({ items, withThumbs, thumbsSlideAxis = 'x', springConfig, thumbsWrapperRef, prepareThumbsData, }) {
+  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(() => ({
-          [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() {
@@ -199,19 +241,12 @@
           }
           return getPreparedItems(items);
       }
-      function getScrollDirectionSpringValue() {
-          if (thumbsSlideAxis === 'x') {
-              return {
-                  // @ts-ignore
-                  scrollLeft: thumbListStyles.x,
-              };
-          }
-          return {
-              // @ts-ignore
-              scrollTop: thumbListStyles.y,
-          };
-      }
-      const thumbsFragment = withThumbs ? (jsxRuntime.jsx(reactSpring.animated.div, Object.assign({ ref: internalThumbsWrapperRef }, getScrollDirectionSpringValue(), { style: {
+      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',
@@ -233,22 +268,14 @@
   }
 
   const UseSpringCarouselContext = react.createContext(undefined);
-  function useSpringCarouselContext() {
-      const context = react.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 = reactSpring.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 = reactSpring.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 = react.useRef('next');
+      const slideActionType = react.useRef('initial');
       const internalItems = getItems();
       const activeItem = react.useRef(initialActiveItem);
       const mainCarouselWrapperRef = react.useRef(null);
@@ -259,33 +286,51 @@
       const currentWindowWidth = react.useRef(0);
       const fluidTotalWrapperScrollValue = react.useRef(0);
       const slideFluidEndReached = react.useRef(false);
-      const currentSlidedValue = react.useRef(0);
-      const currentStepSlideValue = react.useRef(0);
-      function getCarouselItem() {
-          return carouselTrackWrapperRef.current?.querySelector('.use-spring-carousel-item');
-      }
-      const getFluidWrapperScrollValue = react.useCallback(() => {
-          return Math.round(Number(carouselTrackWrapperRef.current?.[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
-              carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
-      }, [carouselSlideAxis]);
+      const initialWindowWidth = react.useRef(0);
       const [carouselStyles, setCarouselStyles] = reactSpring.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 = react.useCallback(() => {
-          if (!carouselTrackWrapperRef.current) {
-              return 0;
+      function getCarouselItem() {
+          return carouselTrackWrapperRef.current?.querySelector('.use-spring-carousel-item');
+      }
+      const getMainCarouselWrapperWidth = react.useCallback(() => {
+          if (!mainCarouselWrapperRef.current) {
+              throw new Error('mainCarouselWrapperRef is not available');
           }
+          return mainCarouselWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'];
+      }, [carouselSlideAxis]);
+      const getCarouselItemWidth = react.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 = react.useCallback(() => {
+          return carouselStyles[carouselSlideAxis].get();
+      }, [carouselSlideAxis, carouselStyles]);
+      const getIfItemsNotFillTheCarousel = react.useCallback(() => {
+          return getCarouselItemWidth() * items.length < getMainCarouselWrapperWidth();
+      }, [getCarouselItemWidth, getMainCarouselWrapperWidth, items.length]);
+      const getFluidWrapperScrollValue = react.useCallback(() => {
+          return Math.round(Number(carouselTrackWrapperRef.current?.[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+              carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
+      }, [carouselSlideAxis]);
+      const getIsFirstItem = react.useCallback(() => {
+          return getCurrentActiveItem() === 0;
+      }, []);
+      const getSlideValue = react.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.');
@@ -293,21 +338,23 @@
               return slideAmount;
           }
           return itemVal;
-      }, [carouselSlideAxis, gutter, itemsPerSlide, slideAmount]);
+      }, [getCarouselItemWidth, itemsPerSlide, slideAmount]);
       const adjustCarouselWrapperPosition = react.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));
@@ -337,33 +384,49 @@
                   setStartPosition();
               }
           }
+          else {
+              setStartPosition();
+          }
       }, [
-          startEndGutter,
           carouselSlideAxis,
+          itemsPerSlide,
+          getCarouselItemWidth,
+          items.length,
+          startEndGutter,
           getSlideValue,
           initialStartingPosition,
-          items.length,
-          itemsPerSlide,
+          withLoop,
       ]);
       const handleResize = react.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({
@@ -376,17 +439,17 @@
                   [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();
@@ -400,18 +463,29 @@
           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 = react$1.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) {
@@ -421,7 +495,7 @@
                   }
                   else {
                       setCarouselStyles.start({
-                          [carouselSlideAxis]: currentStepSlideValue.current,
+                          [carouselSlideAxis]: getCurrentSlidedValue(),
                       });
                   }
               }
@@ -431,24 +505,46 @@
                   });
               }
           }
-          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();
@@ -476,7 +572,7 @@
                   }
               }
           }
-          if (props.last && !props.pressed) {
+          if (props.last && !props.pressed && !freeScroll) {
               resetAnimation();
           }
       }, {
@@ -521,6 +617,7 @@
           }
       });
       useMount(() => {
+          initialWindowWidth.current = window.innerWidth;
           if (initialActiveItem > 0 && initialActiveItem <= items.length) {
               slideToItem({
                   to: initialActiveItem,
@@ -530,10 +627,13 @@
           }
       });
       react.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]);
@@ -604,18 +704,21 @@
       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,
@@ -625,7 +728,7 @@
               return {};
           }
           function getToValue() {
-              if (customTo) {
+              if (typeof customTo === 'number') {
                   return {
                       [carouselSlideAxis]: customTo,
                   };
@@ -646,67 +749,68 @@
                       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,
                   });
               }
@@ -718,58 +822,51 @@
           }
       }
       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,
                   });
               }
@@ -818,14 +915,18 @@
           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') {
@@ -849,28 +950,59 @@
               height: carouselSlideAxis === 'y' ? percentValue : '100%',
           };
       }
-      const carouselFragment = (jsxRuntime.jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: jsxRuntime.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 = (jsxRuntime.jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: jsxRuntime.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: jsxRuntime.jsx(reactSpring.animated.div, Object.assign({}, bindDrag(), { "data-testid": "use-spring-carousel-animated-wrapper", style: {
+                  ...getOverflowStyles(),
+              } }, { children: jsxRuntime.jsx(reactSpring.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 (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: {
                               display: 'flex',
@@ -880,10 +1012,17 @@
                   }) }), void 0) }), void 0) }), void 0));
       const thumbsFragment = (jsxRuntime.jsx(UseSpringCarouselContext.Provider, Object.assign({ value: contextProps }, { children: _thumbsFragment }), void 0));
       return {
+          ...contextProps,
           carouselFragment,
           thumbsFragment,
-          ...contextProps,
       };
+  }
+  function useSpringCarouselContext() {
+      const context = react.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 = react.createContext(undefined);
@@ -895,7 +1034,7 @@
       }
       return context;
   }
-  function useTransitionCarousel({ items, withLoop = false, withThumbs = false, springConfig = reactSpring.config.default, thumbsSlideAxis = 'x', enableThumbsWrapperScroll = true, draggingSlideTreshold = 50, prepareThumbsData, toPrevItemSpringProps, toNextItemSpringProps, disableGestures = false, springAnimationProps = {
+  function useTransitionCarousel({ items, withLoop = false, withThumbs = false, springConfig = reactSpring.config.default, thumbsSlideAxis = 'x', enableThumbsWrapperScroll = true, draggingSlideTreshold = 50, prepareThumbsData, toPrevItemSpringProps, toNextItemSpringProps, disableGestures = false, CustomThumbsWrapperComponent, springAnimationProps = {
       initial: {
           opacity: 1,
           position: 'relative',
@@ -928,6 +1067,7 @@
           thumbsSlideAxis,
           springConfig,
           prepareThumbsData,
+          CustomThumbsWrapperComponent,
       });
       const bindSwipe = react$1.useDrag(({ last, movement: [mx] }) => {
           if (getIsAnimating()) {
@@ -1019,8 +1159,11 @@
                   setIsAnimating(false);
                   emitObservable({
                       eventName: 'onSlideChange',
-                      currentItem: activeItem,
                       slideActionType: getSlideActionType(),
+                      currentItem: {
+                          index: activeItem,
+                          id: items[activeItem].id,
+                      },
                   });
               }
           },
@@ -1062,8 +1205,11 @@
           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');
@@ -1083,16 +1229,22 @@
               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);
               }
@@ -1101,8 +1253,11 @@
               if (!isLastItem) {
                   emitObservable({
                       eventName: 'onSlideStartChange',
-                      nextItem: activeItem + 1,
                       slideActionType: getSlideActionType(),
+                      nextItem: {
+                          index: activeItem + 1,
+                          id: items[activeItem + 1].id,
+                      },
                   });
                   setSlideActionType('next');
                   setActiveItem(activeItem + 1);
@@ -1116,16 +1271,22 @@
               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);
               }
@@ -1135,8 +1296,11 @@
                   setSlideActionType('prev');
                   emitObservable({
                       eventName: 'onSlideStartChange',
-                      nextItem: activeItem - 1,
                       slideActionType: getSlideActionType(),
+                      nextItem: {
+                          index: activeItem - 1,
+                          id: items[activeItem - 1].id,
+                      },
                   });
                   setActiveItem(activeItem - 1);
               }