react-spring-carousel 3.0.0-beta003 → 3.0.0-beta006

package/dist/umd/index.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('@react-spring/web'), require('react'), require('@use-gesture/react'), require('screenfull')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', '@react-spring/web', 'react', '@use-gesture/react', 'screenfull'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactSpringCarousel = {}, global.ReactJSXRuntime, global.web, global.React, global.UseGestureReact, global.Screenfull));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactSpringCarousel = {}, global.ReactJSXRuntime, global.ReactSpring, global.React, global.UseGestureReact, global.Screenfull));
 })(this, (function (exports, jsxRuntime, web, react, react$1, screenfull) { 'use strict';
 
-  const eventLabel = "RSC::Event";
+  const eventLabel = 'RSC::Event';
   function useEventsModule() {
       const targetEvent = react.useRef(null);
       react.useEffect(() => {
-          targetEvent.current = document.createElement("div");
+          targetEvent.current = document.createElement('div');
       }, []);
       function useListenToCustomEvent(eventHandler) {
           react.useEffect(() => {
@@ -47,7 +47,7 @@
               if (document.fullscreenElement) {
                   setIsFullscreen(true);
                   emitEvent({
-                      eventName: "onFullscreenChange",
+                      eventName: 'onFullscreenChange',
                       isFullscreen: true,
                   });
                   handleResize && handleResize();
@@ -55,17 +55,17 @@
               if (!document.fullscreenElement) {
                   setIsFullscreen(false);
                   emitEvent({
-                      eventName: "onFullscreenChange",
+                      eventName: 'onFullscreenChange',
                       isFullscreen: false,
                   });
                   handleResize && handleResize();
               }
           }
           if (screenfull.isEnabled) {
-              screenfull.on("change", handleFullscreenChange);
+              screenfull.on('change', handleFullscreenChange);
               return () => {
                   if (screenfull.isEnabled) {
-                      screenfull.off("change", handleFullscreenChange);
+                      screenfull.off('change', handleFullscreenChange);
                   }
               };
           }
@@ -95,19 +95,18 @@
       const rect = el.getBoundingClientRect();
       return (rect.top >= 0 &&
           rect.left >= 0 &&
-          rect.bottom <=
-              (window.innerHeight || document.documentElement.clientHeight) &&
+          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
           rect.right <= (window.innerWidth || document.documentElement.clientWidth));
   }
-  function useThumbsModule({ thumbsSlideAxis = "x", withThumbs = false, prepareThumbsData, items, }) {
+  function useThumbsModule({ thumbsSlideAxis = 'x', withThumbs = false, prepareThumbsData, items, }) {
       const wrapperRef = react.useRef(null);
       const [spring, setSpring] = web.useSpring(() => ({
           val: 0,
       }));
       function getTotalScrollValue() {
           var _a;
-          return Math.round(Number((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === "x" ? "scrollWidth" : "scrollHeight"]) -
-              wrapperRef.current.getBoundingClientRect()[thumbsSlideAxis === "x" ? "width" : "height"]);
+          return Math.round(Number((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+              wrapperRef.current.getBoundingClientRect()[thumbsSlideAxis === 'x' ? 'width' : 'height']);
       }
       function handleScroll(activeItem) {
           var _a, _b;
@@ -124,14 +123,15 @@
                   const val = offset > getTotalScrollValue() ? getTotalScrollValue() : offset;
                   setSpring.start({
                       from: {
-                          val: (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === "x" ? "scrollLeft" : "scrollTop"]) !== null && _b !== void 0 ? _b : 0,
+                          val: (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop']) !== null && _b !== void 0 ? _b : 0,
                       },
                       to: {
                           val,
                       },
                       onChange: ({ value }) => {
                           if (wrapperRef.current) {
-                              wrapperRef.current[thumbsSlideAxis === "x" ? "scrollLeft" : "scrollTop"] = Math.abs(value.val);
+                              wrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] =
+                                  Math.abs(value.val);
                           }
                       },
                   });
@@ -140,7 +140,7 @@
       }
       function handlePrepareThumbsData() {
           function getPreparedItems(_items) {
-              return _items.map((i) => ({
+              return _items.map(i => ({
                   id: i.id,
                   renderThumb: i.renderThumb,
               }));
@@ -150,11 +150,11 @@
           }
           return getPreparedItems(items);
       }
-      const thumbsFragment = withThumbs ? (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-thumbs-wrapper", ref: wrapperRef, onWheel: () => spring.val.stop(), style: Object.assign({ display: "flex", flex: "1", position: "relative", width: "100%", height: "100%", flexDirection: thumbsSlideAxis === "x" ? "row" : "column" }, (thumbsSlideAxis === "x"
-              ? { overflowX: "auto" }
+      const thumbsFragment = withThumbs ? (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-thumbs-wrapper", ref: wrapperRef, onWheel: () => spring.val.stop(), style: Object.assign({ display: 'flex', flex: '1', position: 'relative', width: '100%', height: '100%', flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column' }, (thumbsSlideAxis === 'x'
+              ? { overflowX: 'auto' }
               : {
-                  overflowY: "auto",
-                  maxHeight: "100%",
+                  overflowY: 'auto',
+                  maxHeight: '100%',
               })) }, { children: handlePrepareThumbsData().map(({ id, renderThumb }) => {
               const thumbId = `thumb-item-${id}`;
               return (jsxRuntime.jsx("div", Object.assign({ id: thumbId, className: "thumb-item" }, { children: renderThumb }), thumbId));
@@ -165,11 +165,11 @@
       };
   }
 
-  function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "x", itemsPerSlide = 1, slideType = "fixed", gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = "x", disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, }) {
+  function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = 'x', itemsPerSlide = 1, slideType = 'fixed', gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = 'x', disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, }) {
       const prevWindowWidth = react.useRef(0);
       const draggingSlideTreshold = react.useRef(_draggingSlideTreshold !== null && _draggingSlideTreshold !== void 0 ? _draggingSlideTreshold : 0);
-      const slideActionType = react.useRef("initial");
-      const slideModeType = react.useRef("initial");
+      const slideActionType = react.useRef('initial');
+      const slideModeType = react.useRef('initial');
       const prevSlidedValue = react.useRef(0);
       const [spring, setSpring] = web.useSpring(() => ({
           val: 0,
@@ -177,7 +177,7 @@
           onChange({ value }) {
               if (freeScroll && mainCarouselWrapperRef.current) {
                   setStartEndItemReachedOnFreeScroll();
-                  if (carouselSlideAxis === "x") {
+                  if (carouselSlideAxis === 'x') {
                       mainCarouselWrapperRef.current.scrollLeft = Math.abs(value.val);
                   }
                   else {
@@ -185,7 +185,7 @@
                   }
               }
               else if (carouselTrackWrapperRef.current) {
-                  if (carouselSlideAxis === "x") {
+                  if (carouselSlideAxis === 'x') {
                       carouselTrackWrapperRef.current.style.transform = `translate3d(${value.val}px, 0px,0px)`;
                   }
                   else {
@@ -202,9 +202,9 @@
       const getItems = react.useCallback(() => {
           if (withLoop) {
               return [
-                  ...items.map((i) => (Object.assign(Object.assign({}, i), { id: `prev-repeated-item-${i.id}` }))),
+                  ...items.map(i => (Object.assign(Object.assign({}, i), { id: `prev-repeated-item-${i.id}` }))),
                   ...items,
-                  ...items.map((i) => (Object.assign(Object.assign({}, i), { id: `next-repeated-item-${i.id}` }))),
+                  ...items.map(i => (Object.assign(Object.assign({}, i), { id: `next-repeated-item-${i.id}` }))),
               ];
           }
           return [...items];
@@ -223,7 +223,7 @@
           handleResize: () => adjustCarouselWrapperPosition(),
       });
       function getItemStyles() {
-          if (slideType === "fixed" && !freeScroll) {
+          if (slideType === 'fixed' && !freeScroll) {
               return {
                   marginRight: `${gutter}px`,
                   flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)`,
@@ -233,27 +233,27 @@
       }
       function getSlideValue() {
           var _a;
-          const carouselItem = (_a = mainCarouselWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".use-spring-carousel-item");
+          const carouselItem = (_a = mainCarouselWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.use-spring-carousel-item');
           if (!carouselItem) {
-              throw Error("No carousel items available!");
+              throw Error('No carousel items available!');
           }
-          return (carouselItem.getBoundingClientRect()[carouselSlideAxis === "x" ? "width" : "height"] + gutter);
+          return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
       }
       function slideToItem({ from, to, nextActiveItem, immediate = false, slideMode, }) {
           slideModeType.current = slideMode;
-          if (typeof nextActiveItem === "number") {
+          if (typeof nextActiveItem === 'number') {
               if (!freeScroll) {
                   activeItem.current = nextActiveItem;
               }
               emitEvent({
-                  eventName: "onSlideStartChange",
+                  eventName: 'onSlideStartChange',
                   slideActionType: slideActionType.current,
                   slideMode: slideModeType.current,
                   nextItem: {
                       startReached: firstItemReached.current,
                       endReached: lastItemReached.current,
                       index: freeScroll ? -1 : activeItem.current,
-                      id: freeScroll ? "" : items[activeItem.current].id,
+                      id: freeScroll ? '' : items[activeItem.current].id,
                   },
               });
           }
@@ -270,14 +270,14 @@
               onRest(value) {
                   if (!immediate && value.finished) {
                       emitEvent({
-                          eventName: "onSlideChange",
+                          eventName: 'onSlideChange',
                           slideActionType: slideActionType.current,
                           slideMode: slideModeType.current,
                           currentItem: {
                               startReached: firstItemReached.current,
                               endReached: lastItemReached.current,
                               index: freeScroll ? -1 : activeItem.current,
-                              id: freeScroll ? "" : items[activeItem.current].id,
+                              id: freeScroll ? '' : items[activeItem.current].id,
                           },
                       });
                   }
@@ -292,38 +292,38 @@
           if (withLoop) {
               return getSlideValue() * items.length;
           }
-          return Math.round(Number((_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a[carouselSlideAxis === "x" ? "scrollWidth" : "scrollHeight"]) -
-              carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === "x" ? "width" : "height"]);
+          return Math.round(Number((_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+              carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
       }
       function getAnimatedWrapperStyles() {
           const percentValue = `calc(100% - ${startEndGutter * 2}px)`;
           return {
-              width: carouselSlideAxis === "x" ? percentValue : "100%",
-              height: carouselSlideAxis === "y" ? percentValue : "100%",
+              width: carouselSlideAxis === 'x' ? percentValue : '100%',
+              height: carouselSlideAxis === 'y' ? percentValue : '100%',
           };
       }
       function getCarouselItemWidth() {
           var _a;
-          const carouselItem = (_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".use-spring-carousel-item");
+          const carouselItem = (_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.use-spring-carousel-item');
           if (!carouselItem) {
-              throw Error("No carousel items available!");
+              throw Error('No carousel items available!');
           }
-          return (carouselItem.getBoundingClientRect()[carouselSlideAxis === "x" ? "width" : "height"] + gutter);
+          return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
       }
       function adjustCarouselWrapperPosition() {
-          const positionProperty = carouselSlideAxis === "x" ? "left" : "top";
+          const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top';
           function setPosition(v) {
               const ref = carouselTrackWrapperRef.current;
               if (!ref)
                   return;
               if (withLoop) {
-                  ref.style.top = "0px";
-                  ref.style.left = "0px";
+                  ref.style.top = '0px';
+                  ref.style.left = '0px';
                   ref.style[positionProperty] = `-${v - startEndGutter}px`;
               }
               else {
-                  ref.style.left = "0px";
-                  ref.style.top = "0px";
+                  ref.style.left = '0px';
+                  ref.style.top = '0px';
               }
           }
           const currentFromValue = Math.abs(getFromValue());
@@ -340,18 +340,18 @@
               });
               return;
           }
-          if (initialStartingPosition === "center") {
+          if (initialStartingPosition === 'center') {
               setPosition(getCarouselItemWidth() * items.length -
                   getSlideValue() * Math.round((itemsPerSlide - 1) / 2));
           }
-          else if (initialStartingPosition === "end") {
+          else if (initialStartingPosition === 'end') {
               setPosition(getCarouselItemWidth() * items.length -
                   getSlideValue() * Math.round(itemsPerSlide - 1));
           }
           else {
               setPosition(getCarouselItemWidth() * items.length);
           }
-          if (!freeScroll && slideType === "fixed") {
+          if (!freeScroll && slideType === 'fixed') {
               const val = -(getSlideValue() * activeItem.current);
               prevSlidedValue.current = val;
               setSpring.start({
@@ -362,26 +362,26 @@
       }
       function getFromValue() {
           if (freeScroll && mainCarouselWrapperRef.current) {
-              return mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"];
+              return mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
           }
           return spring.val.get();
       }
       function getToValue(type, index) {
-          if (freeScroll && type === "next") {
+          if (freeScroll && type === 'next') {
               const next = prevSlidedValue.current + getSlideValue();
               if (next > getTotalScrollValue()) {
                   return getTotalScrollValue();
               }
               return next;
           }
-          if (freeScroll && type === "prev") {
+          if (freeScroll && type === 'prev') {
               const next = prevSlidedValue.current - getSlideValue();
               if (next < 0) {
                   return 0;
               }
               return next;
           }
-          if (type === "next") {
+          if (type === 'next') {
               if (index) {
                   return -(index * getSlideValue());
               }
@@ -392,14 +392,14 @@
           }
           return prevSlidedValue.current + getSlideValue();
       }
-      function slideToPrevItem(type = "click", index) {
+      function slideToPrevItem(type = 'click', index) {
           if (!init || (firstItemReached.current && !withLoop))
               return;
-          slideActionType.current = "prev";
+          slideActionType.current = 'prev';
           lastItemReached.current = false;
           const nextItem = index || activeItem.current - 1;
           if (!withLoop) {
-              const nextItemWillExceed = getToValue("prev", index) + getSlideValue() / 3 > 0;
+              const nextItemWillExceed = getToValue('prev', index) + getSlideValue() / 3 > 0;
               if (firstItemReached.current)
                   return;
               if (nextItemWillExceed) {
@@ -434,19 +434,18 @@
           slideToItem({
               slideMode: type,
               from: getFromValue(),
-              to: getToValue("prev", index),
+              to: getToValue('prev', index),
               nextActiveItem: nextItem,
           });
       }
-      function slideToNextItem(type = "click", index) {
+      function slideToNextItem(type = 'click', index) {
           if (!init || (lastItemReached.current && !withLoop))
               return;
-          slideActionType.current = "next";
+          slideActionType.current = 'next';
           firstItemReached.current = false;
           const nextItem = index || activeItem.current + 1;
           if (!withLoop) {
-              const nextItemWillExceed = Math.abs(getToValue("next", index)) >
-                  getTotalScrollValue() - getSlideValue() / 3;
+              const nextItemWillExceed = Math.abs(getToValue('next', index)) > getTotalScrollValue() - getSlideValue() / 3;
               if (lastItemReached.current)
                   return;
               if (nextItemWillExceed) {
@@ -481,7 +480,7 @@
           slideToItem({
               slideMode: type,
               from: getFromValue(),
-              to: getToValue("next", index),
+              to: getToValue('next', index),
               nextActiveItem: nextItem,
           });
       }
@@ -523,28 +522,28 @@
               prevWindowWidth.current = window.innerWidth;
               adjustCarouselWrapperPosition();
           }
-          window.addEventListener("resize", handleResize);
+          window.addEventListener('resize', handleResize);
           return () => {
-              window.removeEventListener("resize", handleResize);
+              window.removeEventListener('resize', handleResize);
           };
       }, []);
-      const bindDrag = react$1.useDrag((state) => {
+      const bindDrag = react$1.useDrag(state => {
           const isDragging = state.dragging;
-          const movement = state.offset[carouselSlideAxis === "x" ? 0 : 1];
-          const currentMovement = state.movement[carouselSlideAxis === "x" ? 0 : 1];
-          const direction = state.direction[carouselSlideAxis === "x" ? 0 : 1];
+          const movement = state.offset[carouselSlideAxis === 'x' ? 0 : 1];
+          const currentMovement = state.movement[carouselSlideAxis === 'x' ? 0 : 1];
+          const direction = state.direction[carouselSlideAxis === 'x' ? 0 : 1];
           const prevItemTreshold = currentMovement > draggingSlideTreshold.current;
           const nextItemTreshold = currentMovement < -draggingSlideTreshold.current;
           if (isDragging) {
               if (direction > 0) {
-                  slideActionType.current = "prev";
+                  slideActionType.current = 'prev';
               }
               else {
-                  slideActionType.current = "next";
+                  slideActionType.current = 'next';
               }
-              emitEvent(Object.assign(Object.assign({}, state), { eventName: "onDrag", slideActionType: slideActionType.current }));
+              emitEvent(Object.assign(Object.assign({}, state), { eventName: 'onDrag', slideActionType: slideActionType.current }));
               if (freeScroll) {
-                  if (slideActionType.current === "prev" && movement > 0) {
+                  if (slideActionType.current === 'prev' && movement > 0) {
                       state.cancel();
                       setSpring.start({
                           from: {
@@ -585,21 +584,21 @@
                   },
               });
               if (slideWhenThresholdIsReached && nextItemTreshold) {
-                  slideToNextItem("drag");
+                  slideToNextItem('drag');
                   state.cancel();
               }
               else if (slideWhenThresholdIsReached && prevItemTreshold) {
-                  slideToPrevItem("drag");
+                  slideToPrevItem('drag');
                   state.cancel();
               }
               return;
           }
           if (state.last && !state.canceled && freeScroll) {
-              if (slideActionType.current === "prev") {
-                  slideToPrevItem("drag");
+              if (slideActionType.current === 'prev') {
+                  slideToPrevItem('drag');
               }
-              if (slideActionType.current === "next") {
-                  slideToNextItem("drag");
+              if (slideActionType.current === 'next') {
+                  slideToNextItem('drag');
               }
           }
           if (state.last && !state.canceled && !freeScroll) {
@@ -611,7 +610,7 @@
                       });
                   }
                   else {
-                      slideToNextItem("drag");
+                      slideToNextItem('drag');
                   }
               }
               else if (prevItemTreshold) {
@@ -622,7 +621,7 @@
                       });
                   }
                   else {
-                      slideToPrevItem("drag");
+                      slideToPrevItem('drag');
                   }
               }
               else {
@@ -643,7 +642,7 @@
                       -mainCarouselWrapperRef.current.scrollTop,
                   ];
               }
-              if (carouselSlideAxis === "x") {
+              if (carouselSlideAxis === 'x') {
                   return [spring.val.get(), spring.val.get()];
               }
               return [spring.val.get(), spring.val.get()];
@@ -651,13 +650,13 @@
       });
       function getWrapperOverflowStyles() {
           if (freeScroll) {
-              if (carouselSlideAxis === "x") {
+              if (carouselSlideAxis === 'x') {
                   return {
-                      overflowX: "auto",
+                      overflowX: 'auto',
                   };
               }
               return {
-                  overflowY: "auto",
+                  overflowY: 'auto',
               };
           }
           return {};
@@ -665,17 +664,17 @@
       function setStartEndItemReachedOnFreeScroll() {
           if (mainCarouselWrapperRef.current) {
               prevSlidedValue.current =
-                  mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"];
-              if (mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"] === 0) {
+                  mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
+              if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] === 0) {
                   firstItemReached.current = true;
                   lastItemReached.current = false;
               }
-              if (mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"] > 0 &&
-                  mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"] < getTotalScrollValue()) {
+              if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] > 0 &&
+                  mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] < getTotalScrollValue()) {
                   firstItemReached.current = false;
                   lastItemReached.current = false;
               }
-              if (mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"] === getTotalScrollValue()) {
+              if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] === getTotalScrollValue()) {
                   firstItemReached.current = false;
                   lastItemReached.current = true;
               }
@@ -693,12 +692,12 @@
           return {};
       }
       function findItemIndex(id) {
-          return items.findIndex((item) => item.id === id);
+          return items.findIndex(item => item.id === id);
       }
       function findItemIndexById(id, error) {
           let itemIndex = 0;
-          if (typeof id === "string") {
-              itemIndex = items.findIndex((_item) => _item.id === id);
+          if (typeof id === 'string') {
+              itemIndex = items.findIndex(_item => _item.id === id);
           }
           else {
               itemIndex = id;
@@ -720,10 +719,10 @@
           const currentItem = findItemIndex(items[activeItem.current].id);
           const newActiveItem = findItemIndex(items[itemIndex].id);
           if (newActiveItem > currentItem) {
-              slideToNextItem("click", newActiveItem);
+              slideToNextItem('click', newActiveItem);
           }
           else {
-              slideToPrevItem("click", newActiveItem);
+              slideToPrevItem('click', newActiveItem);
           }
       }
       function getIsNextItem(id) {
@@ -742,8 +741,8 @@
           }
           return itemIndex === _activeItem - 1;
       }
-      const carouselFragment = (jsxRuntime.jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, getScrollHandlers(), { style: Object.assign({ display: "flex", position: "relative", width: "100%", height: "100%" }, getWrapperOverflowStyles()) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: carouselTrackWrapperRef }, bindDrag(), { style: Object.assign({ position: "relative", display: "flex", flexDirection: carouselSlideAxis === "x" ? "row" : "column", touchAction: "none" }, getAnimatedWrapperStyles()) }, { children: internalItems.map((item, index) => {
-                  return (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: Object.assign({ display: "flex", position: "relative", flex: "1" }, getItemStyles()) }, { children: item.renderItem }), `${item.id}-${index}`));
+      const carouselFragment = (jsxRuntime.jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, getScrollHandlers(), { style: Object.assign({ display: 'flex', position: 'relative', width: '100%', height: '100%' }, getWrapperOverflowStyles()) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: carouselTrackWrapperRef }, bindDrag(), { style: Object.assign({ position: 'relative', display: 'flex', flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column', touchAction: 'none' }, getAnimatedWrapperStyles()) }, { children: internalItems.map((item, index) => {
+                  return (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: Object.assign({ display: 'flex', position: 'relative', flex: '1' }, getItemStyles()) }, { children: item.renderItem }), `${item.id}-${index}`));
               }) })) })));
       return {
           useListenToCustomEvent,
@@ -767,7 +766,7 @@
   function useSpringCarouselContext() {
       const context = react.useContext(Context);
       if (!context) {
-          throw new Error("useSpringCarouselContext must be used within the carousel.");
+          throw new Error('useSpringCarouselContext must be used within the carousel.');
       }
       return context;
   }