react-spring-carousel 3.0.0-beta010 → 3.0.0-beta015

package/dist/umd/index.js

@@ -1,779 +1,2 @@
-(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.ReactSpring, global.React, global.UseGestureReact, global.Screenfull));
-})(this, (function (exports, jsxRuntime, web, react, react$1, screenfull) { 'use strict';
-
-  const eventLabel = 'RSC::Event';
-  function useEventsModule() {
-      const targetEvent = react.useRef(null);
-      react.useEffect(() => {
-          targetEvent.current = document.createElement('div');
-      }, []);
-      function useListenToCustomEvent(eventHandler) {
-          react.useEffect(() => {
-              function handleEvent(event) {
-                  eventHandler(event.detail);
-              }
-              if (targetEvent.current) {
-                  // @ts-ignore
-                  targetEvent.current.addEventListener(eventLabel, handleEvent, false);
-                  return () => {
-                      var _a;
-                      // @ts-ignore
-                      (_a = targetEvent.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(eventLabel, handleEvent, false);
-                  };
-              }
-          }, []);
-      }
-      function emitEvent(event) {
-          if (targetEvent.current) {
-              const newEvent = new CustomEvent(eventLabel, {
-                  detail: event,
-              });
-              targetEvent.current.dispatchEvent(newEvent);
-          }
-      }
-      return {
-          useListenToCustomEvent,
-          emitEvent,
-      };
-  }
-
-  function useFullscreenModule({ mainCarouselWrapperRef, emitEvent, handleResize, }) {
-      const isFullscreen = react.useRef(false);
-      react.useEffect(() => {
-          function handleFullscreenChange() {
-              if (document.fullscreenElement) {
-                  setIsFullscreen(true);
-                  emitEvent({
-                      eventName: 'onFullscreenChange',
-                      isFullscreen: true,
-                  });
-                  handleResize && handleResize();
-              }
-              if (!document.fullscreenElement) {
-                  setIsFullscreen(false);
-                  emitEvent({
-                      eventName: 'onFullscreenChange',
-                      isFullscreen: false,
-                  });
-                  handleResize && handleResize();
-              }
-          }
-          if (screenfull.isEnabled) {
-              screenfull.on('change', handleFullscreenChange);
-              return () => {
-                  if (screenfull.isEnabled) {
-                      screenfull.off('change', handleFullscreenChange);
-                  }
-              };
-          }
-      }, []);
-      function setIsFullscreen(_isFullscreen) {
-          isFullscreen.current = _isFullscreen;
-      }
-      function getIsFullscreen() {
-          return isFullscreen.current;
-      }
-      function enterFullscreen(elementRef) {
-          if (screenfull.isEnabled) {
-              screenfull.request((elementRef || mainCarouselWrapperRef.current));
-          }
-      }
-      function exitFullscreen() {
-          screenfull.isEnabled && screenfull.exit();
-      }
-      return {
-          enterFullscreen,
-          exitFullscreen,
-          getIsFullscreen,
-      };
-  }
-
-  function isInViewport(el) {
-      const rect = el.getBoundingClientRect();
-      return (rect.top >= 0 &&
-          rect.left >= 0 &&
-          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-          rect.right <= (window.innerWidth || document.documentElement.clientWidth));
-  }
-  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']);
-      }
-      function handleScroll(activeItem) {
-          var _a, _b;
-          function getThumbNode() {
-              if (wrapperRef.current) {
-                  return wrapperRef.current.querySelector(`#thumb-item-${items[activeItem].id}`);
-              }
-              return null;
-          }
-          const thumbNode = getThumbNode();
-          if (thumbNode && wrapperRef.current) {
-              if (!isInViewport(thumbNode)) {
-                  const offset = thumbNode.offsetLeft;
-                  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,
-                      },
-                      to: {
-                          val,
-                      },
-                      onChange: ({ value }) => {
-                          if (wrapperRef.current) {
-                              wrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] =
-                                  Math.abs(value.val);
-                          }
-                      },
-                  });
-              }
-          }
-      }
-      function handlePrepareThumbsData() {
-          function getPreparedItems(_items) {
-              return _items.map(i => ({
-                  id: i.id,
-                  renderThumb: i.renderThumb,
-              }));
-          }
-          if (prepareThumbsData) {
-              return prepareThumbsData(getPreparedItems(items));
-          }
-          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' }
-              : {
-                  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));
-          }) }))) : null;
-      return {
-          thumbsFragment,
-          handleScroll,
-      };
-  }
-
-  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 prevSlidedValue = react.useRef(0);
-      const [spring, setSpring] = web.useSpring(() => ({
-          val: 0,
-          pause: !init,
-          onChange({ value }) {
-              if (freeScroll && mainCarouselWrapperRef.current) {
-                  setStartEndItemReachedOnFreeScroll();
-                  if (carouselSlideAxis === 'x') {
-                      mainCarouselWrapperRef.current.scrollLeft = Math.abs(value.val);
-                  }
-                  else {
-                      mainCarouselWrapperRef.current.scrollTop = Math.abs(value.val);
-                  }
-              }
-              else if (carouselTrackWrapperRef.current) {
-                  if (carouselSlideAxis === 'x') {
-                      carouselTrackWrapperRef.current.style.transform = `translate3d(${value.val}px, 0px,0px)`;
-                  }
-                  else {
-                      carouselTrackWrapperRef.current.style.transform = `translate3d(0px,${value.val}px,0px)`;
-                  }
-              }
-          },
-      }));
-      const activeItem = react.useRef(initialActiveItem);
-      const firstItemReached = react.useRef(initialActiveItem === 0);
-      const lastItemReached = react.useRef(false);
-      const mainCarouselWrapperRef = react.useRef(null);
-      const carouselTrackWrapperRef = react.useRef(null);
-      const getItems = react.useCallback(() => {
-          if (withLoop) {
-              return [
-                  ...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}` }))),
-              ];
-          }
-          return [...items];
-      }, [items, withLoop]);
-      const internalItems = getItems();
-      const { emitEvent, useListenToCustomEvent } = useEventsModule();
-      const { thumbsFragment, handleScroll } = useThumbsModule({
-          withThumbs: !!withThumbs,
-          thumbsSlideAxis,
-          prepareThumbsData,
-          items: items,
-      });
-      const { enterFullscreen, exitFullscreen, getIsFullscreen } = useFullscreenModule({
-          mainCarouselWrapperRef,
-          emitEvent,
-          handleResize: () => adjustCarouselWrapperPosition(),
-      });
-      function getItemStyles() {
-          if (slideType === 'fixed' && !freeScroll) {
-              return {
-                  marginRight: `${gutter}px`,
-                  flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)`,
-              };
-          }
-          return Object.assign({ marginRight: `${gutter}px` });
-      }
-      function getSlideValue() {
-          var _a;
-          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!');
-          }
-          return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
-      }
-      function slideToItem({ from, to, nextActiveItem, immediate = false, slideMode, }) {
-          slideModeType.current = slideMode;
-          if (typeof nextActiveItem === 'number') {
-              if (!freeScroll) {
-                  activeItem.current = nextActiveItem;
-              }
-              emitEvent({
-                  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,
-                  },
-              });
-          }
-          prevSlidedValue.current = to;
-          setSpring.start({
-              immediate,
-              from: {
-                  val: from,
-              },
-              to: {
-                  val: to,
-              },
-              config: Object.assign(Object.assign({}, web.config.default), { velocity: spring.val.velocity }),
-              onRest(value) {
-                  if (!immediate && value.finished) {
-                      emitEvent({
-                          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,
-                          },
-                      });
-                  }
-              },
-          });
-          if (withThumbs && !immediate) {
-              handleScroll(activeItem.current);
-          }
-      }
-      function getTotalScrollValue() {
-          var _a;
-          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']);
-      }
-      function getAnimatedWrapperStyles() {
-          const percentValue = `calc(100% - ${startEndGutter * 2}px)`;
-          return {
-              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');
-          if (!carouselItem) {
-              throw Error('No carousel items available!');
-          }
-          return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
-      }
-      function adjustCarouselWrapperPosition() {
-          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[positionProperty] = `-${v - startEndGutter}px`;
-              }
-              else {
-                  ref.style.left = '0px';
-                  ref.style.top = '0px';
-              }
-          }
-          const currentFromValue = Math.abs(getFromValue());
-          if (currentFromValue < getTotalScrollValue() && lastItemReached.current) {
-              lastItemReached.current = false;
-          }
-          if (currentFromValue > getTotalScrollValue()) {
-              const val = -getTotalScrollValue();
-              lastItemReached.current = true;
-              prevSlidedValue.current = val;
-              setSpring.start({
-                  immediate: true,
-                  val,
-              });
-              return;
-          }
-          if (initialStartingPosition === 'center') {
-              setPosition(getCarouselItemWidth() * items.length -
-                  getSlideValue() * Math.round((itemsPerSlide - 1) / 2));
-          }
-          else if (initialStartingPosition === 'end') {
-              setPosition(getCarouselItemWidth() * items.length -
-                  getSlideValue() * Math.round(itemsPerSlide - 1));
-          }
-          else {
-              setPosition(getCarouselItemWidth() * items.length);
-          }
-          if (!freeScroll && slideType === 'fixed') {
-              const val = -(getSlideValue() * activeItem.current);
-              prevSlidedValue.current = val;
-              setSpring.start({
-                  immediate: true,
-                  val,
-              });
-          }
-      }
-      function getFromValue() {
-          if (freeScroll && mainCarouselWrapperRef.current) {
-              return mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
-          }
-          return spring.val.get();
-      }
-      function getToValue(type, index) {
-          if (freeScroll && type === 'next') {
-              const next = prevSlidedValue.current + getSlideValue();
-              if (next > getTotalScrollValue()) {
-                  return getTotalScrollValue();
-              }
-              return next;
-          }
-          if (freeScroll && type === 'prev') {
-              const next = prevSlidedValue.current - getSlideValue();
-              if (next < 0) {
-                  return 0;
-              }
-              return next;
-          }
-          if (type === 'next') {
-              if (index) {
-                  return -(index * getSlideValue());
-              }
-              return prevSlidedValue.current - getSlideValue();
-          }
-          if (index) {
-              return -(index * getSlideValue());
-          }
-          return prevSlidedValue.current + getSlideValue();
-      }
-      function slideToPrevItem(type = 'click', index) {
-          if (!init || (firstItemReached.current && !withLoop))
-              return;
-          slideActionType.current = 'prev';
-          lastItemReached.current = false;
-          const nextItem = index || activeItem.current - 1;
-          if (!withLoop) {
-              const nextItemWillExceed = getToValue('prev', index) + getSlideValue() / 3 > 0;
-              if (firstItemReached.current)
-                  return;
-              if (nextItemWillExceed) {
-                  firstItemReached.current = true;
-                  lastItemReached.current = false;
-                  slideToItem({
-                      slideMode: type,
-                      from: getFromValue(),
-                      to: 0,
-                      nextActiveItem: 0,
-                  });
-                  return;
-              }
-          }
-          if (withLoop && firstItemReached.current) {
-              firstItemReached.current = false;
-              lastItemReached.current = true;
-              slideToItem({
-                  slideMode: type,
-                  from: getFromValue() - getSlideValue() * items.length,
-                  to: -(getSlideValue() * items.length) + getSlideValue(),
-                  nextActiveItem: items.length - 1,
-              });
-              return;
-          }
-          if (nextItem === 0) {
-              firstItemReached.current = true;
-          }
-          if (nextItem === items.length - 1 || nextItem === -1) {
-              lastItemReached.current = true;
-          }
-          slideToItem({
-              slideMode: type,
-              from: getFromValue(),
-              to: getToValue('prev', index),
-              nextActiveItem: nextItem,
-          });
-      }
-      function slideToNextItem(type = 'click', index) {
-          if (!init || (lastItemReached.current && !withLoop))
-              return;
-          slideActionType.current = 'next';
-          firstItemReached.current = false;
-          const nextItem = index || activeItem.current + 1;
-          if (!withLoop) {
-              const nextItemWillExceed = Math.abs(getToValue('next', index)) > getTotalScrollValue() - getSlideValue() / 3;
-              if (lastItemReached.current)
-                  return;
-              if (nextItemWillExceed) {
-                  firstItemReached.current = false;
-                  lastItemReached.current = true;
-                  slideToItem({
-                      slideMode: type,
-                      from: getFromValue(),
-                      to: -getTotalScrollValue(),
-                      nextActiveItem: nextItem,
-                  });
-                  return;
-              }
-          }
-          if (withLoop && lastItemReached.current) {
-              lastItemReached.current = false;
-              firstItemReached.current = true;
-              slideToItem({
-                  slideMode: type,
-                  from: getFromValue() + getSlideValue() * items.length,
-                  to: 0,
-                  nextActiveItem: 0,
-              });
-              return;
-          }
-          if (nextItem === 0) {
-              firstItemReached.current = true;
-          }
-          if (nextItem === items.length - 1) {
-              lastItemReached.current = true;
-          }
-          slideToItem({
-              slideMode: type,
-              from: getFromValue(),
-              to: getToValue('next', index),
-              nextActiveItem: nextItem,
-          });
-      }
-      react.useEffect(() => {
-          prevWindowWidth.current = window.innerWidth;
-      }, []);
-      react.useEffect(() => {
-          adjustCarouselWrapperPosition();
-      }, [
-          initialStartingPosition,
-          itemsPerSlide,
-          withLoop,
-          startEndGutter,
-          gutter,
-          freeScroll,
-          slideType,
-          init,
-      ]);
-      react.useLayoutEffect(() => {
-          /**
-           * Set initial track position
-           */
-          if (carouselTrackWrapperRef.current) {
-              adjustCarouselWrapperPosition();
-          }
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
-      react.useEffect(() => {
-          if (_draggingSlideTreshold) {
-              draggingSlideTreshold.current = _draggingSlideTreshold;
-          }
-          else {
-              draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2);
-          }
-      }, [_draggingSlideTreshold]);
-      react.useEffect(() => {
-          function handleResize() {
-              if (window.innerWidth === prevWindowWidth.current)
-                  return;
-              prevWindowWidth.current = window.innerWidth;
-              adjustCarouselWrapperPosition();
-          }
-          window.addEventListener('resize', handleResize);
-          return () => {
-              window.removeEventListener('resize', handleResize);
-          };
-      }, []);
-      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 prevItemTreshold = currentMovement > draggingSlideTreshold.current;
-          const nextItemTreshold = currentMovement < -draggingSlideTreshold.current;
-          if (isDragging) {
-              if (direction > 0) {
-                  slideActionType.current = 'prev';
-              }
-              else {
-                  slideActionType.current = 'next';
-              }
-              emitEvent(Object.assign(Object.assign({}, state), { eventName: 'onDrag', slideActionType: slideActionType.current }));
-              if (freeScroll) {
-                  if (slideActionType.current === 'prev' && movement > 0) {
-                      state.cancel();
-                      setSpring.start({
-                          from: {
-                              val: getFromValue(),
-                          },
-                          to: {
-                              val: 0,
-                          },
-                          config: {
-                              velocity: state.velocity,
-                              friction: 50,
-                              tension: 1000,
-                          },
-                      });
-                      return;
-                  }
-                  setSpring.start({
-                      from: {
-                          val: getFromValue(),
-                      },
-                      to: {
-                          val: -movement,
-                      },
-                      config: {
-                          velocity: state.velocity,
-                          friction: 50,
-                          tension: 1000,
-                      },
-                  });
-                  return;
-              }
-              setSpring.start({
-                  val: movement,
-                  config: {
-                      velocity: state.velocity,
-                      friction: 50,
-                      tension: 1000,
-                  },
-              });
-              if (slideWhenThresholdIsReached && nextItemTreshold) {
-                  slideToNextItem('drag');
-                  state.cancel();
-              }
-              else if (slideWhenThresholdIsReached && prevItemTreshold) {
-                  slideToPrevItem('drag');
-                  state.cancel();
-              }
-              return;
-          }
-          if (state.last && !state.canceled && freeScroll) {
-              if (slideActionType.current === 'prev') {
-                  slideToPrevItem('drag');
-              }
-              if (slideActionType.current === 'next') {
-                  slideToNextItem('drag');
-              }
-          }
-          if (state.last && !state.canceled && !freeScroll) {
-              if (nextItemTreshold) {
-                  if (!withLoop && lastItemReached.current) {
-                      setSpring.start({
-                          val: -getTotalScrollValue(),
-                          config: Object.assign(Object.assign({}, web.config.default), { velocity: state.velocity }),
-                      });
-                  }
-                  else {
-                      slideToNextItem('drag');
-                  }
-              }
-              else if (prevItemTreshold) {
-                  if (!withLoop && firstItemReached.current) {
-                      setSpring.start({
-                          val: 0,
-                          config: Object.assign(Object.assign({}, web.config.default), { velocity: state.velocity }),
-                      });
-                  }
-                  else {
-                      slideToPrevItem('drag');
-                  }
-              }
-              else {
-                  setSpring.start({
-                      val: prevSlidedValue.current,
-                      config: Object.assign(Object.assign({}, web.config.default), { velocity: state.velocity }),
-                  });
-              }
-          }
-      }, {
-          enabled: (init && !disableGestures && !freeScroll) ||
-              (!!freeScroll && !!enableFreeScrollDrag),
-          axis: carouselSlideAxis,
-          from: () => {
-              if (freeScroll && mainCarouselWrapperRef.current) {
-                  return [
-                      -mainCarouselWrapperRef.current.scrollLeft,
-                      -mainCarouselWrapperRef.current.scrollTop,
-                  ];
-              }
-              if (carouselSlideAxis === 'x') {
-                  return [spring.val.get(), spring.val.get()];
-              }
-              return [spring.val.get(), spring.val.get()];
-          },
-      });
-      function getWrapperOverflowStyles() {
-          if (freeScroll) {
-              if (carouselSlideAxis === 'x') {
-                  return {
-                      overflowX: 'auto',
-                  };
-              }
-              return {
-                  overflowY: 'auto',
-              };
-          }
-          return {};
-      }
-      function setStartEndItemReachedOnFreeScroll() {
-          if (mainCarouselWrapperRef.current) {
-              prevSlidedValue.current =
-                  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()) {
-                  firstItemReached.current = false;
-                  lastItemReached.current = false;
-              }
-              if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] === getTotalScrollValue()) {
-                  firstItemReached.current = false;
-                  lastItemReached.current = true;
-              }
-          }
-      }
-      function getScrollHandlers() {
-          if (freeScroll) {
-              return {
-                  onWheel() {
-                      spring.val.stop();
-                      setStartEndItemReachedOnFreeScroll();
-                  },
-              };
-          }
-          return {};
-      }
-      function findItemIndex(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);
-          }
-          else {
-              itemIndex = id;
-          }
-          if (itemIndex < 0 || itemIndex >= items.length) {
-              throw new Error(error);
-          }
-          return itemIndex;
-      }
-      function internalSlideToItem(id) {
-          if (!init)
-              return;
-          firstItemReached.current = false;
-          lastItemReached.current = false;
-          const itemIndex = findItemIndexById(id, "The item you want to slide to doesn't exist; please check che item id or the index you're passing to.");
-          if (itemIndex === activeItem.current) {
-              return;
-          }
-          const currentItem = findItemIndex(items[activeItem.current].id);
-          const newActiveItem = findItemIndex(items[itemIndex].id);
-          if (newActiveItem > currentItem) {
-              slideToNextItem('click', newActiveItem);
-          }
-          else {
-              slideToPrevItem('click', newActiveItem);
-          }
-      }
-      function getIsNextItem(id) {
-          const itemIndex = findItemIndex(id);
-          const _activeItem = activeItem.current;
-          if (withLoop && _activeItem === items.length - 1) {
-              return itemIndex === 0;
-          }
-          return itemIndex === _activeItem + 1;
-      }
-      function getIsPrevItem(id) {
-          const itemIndex = findItemIndex(id);
-          const _activeItem = activeItem.current;
-          if (withLoop && _activeItem === 0) {
-              return itemIndex === items.length - 1;
-          }
-          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}`));
-              }) })) })));
-      return {
-          useListenToCustomEvent,
-          carouselFragment,
-          enterFullscreen,
-          exitFullscreen,
-          getIsFullscreen,
-          thumbsFragment,
-          slideToItem: internalSlideToItem,
-          getIsNextItem,
-          getIsPrevItem,
-          slideToPrevItem: () => slideToPrevItem(),
-          slideToNextItem: () => slideToNextItem(),
-          getIsActiveItem: (id) => {
-              return (findItemIndexById(id, "The item you want to check doesn't exist") ===
-                  activeItem.current);
-          },
-      };
-  }
-  const Context = react.createContext(undefined);
-  function useSpringCarouselContext() {
-      const context = react.useContext(Context);
-      if (!context) {
-          throw new Error('useSpringCarouselContext must be used within the carousel.');
-      }
-      return context;
-  }
-
-  exports.useSpringCarousel = useSpringCarousel;
-  exports.useSpringCarouselContext = useSpringCarouselContext;
-
-}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("@react-spring/web"),require("react"),require("@use-gesture/react"),require("screenfull")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","@react-spring/web","react","@use-gesture/react","screenfull"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactSpringCarousel={},e.ReactJSXRuntime,e.ReactSpring,e.React,e.UseGestureReact,e.Screenfull)}(this,(function(e,t,r,n,i,c){"use strict";const u="RSC::Event";function s({thumbsSlideAxis:e="x",withThumbs:i=!1,prepareThumbsData:c,items:u}){const s=n.useRef(null),[o,l]=r.useSpring((()=>({val:0})));function a(){var t;return Math.round(Number(null===(t=s.current)||void 0===t?void 0:t["x"===e?"scrollWidth":"scrollHeight"])-s.current.getBoundingClientRect()["x"===e?"width":"height"])}return{thumbsFragment:i?t.jsx("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:s,onWheel:()=>o.val.stop(),style:Object.assign({display:"flex",flex:"1",position:"relative",width:"100%",height:"100%",flexDirection:"x"===e?"row":"column"},"x"===e?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"})},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return c?c(e(u)):e(u)}().map((({id:e,renderThumb:r})=>{const n=`thumb-item-${e}`;return t.jsx("div",Object.assign({id:n,className:"thumb-item"},{children:r}),n)}))})):null,handleScroll:function(t){var r,n;const i=s.current?s.current.querySelector(`#thumb-item-${u[t].id}`):null;if(i&&s.current&&!function(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}(i)){const t=i.offsetLeft,c=t>a()?a():t;l.start({from:{val:null!==(n=null===(r=s.current)||void 0===r?void 0:r["x"===e?"scrollLeft":"scrollTop"])&&void 0!==n?n:0},to:{val:c},onChange:({value:t})=>{s.current&&(s.current["x"===e?"scrollLeft":"scrollTop"]=Math.abs(t.val))}})}}}}const o=n.createContext(void 0);e.useSpringCarousel=function({items:e,init:o=!0,withThumbs:l,thumbsSlideAxis:a="x",itemsPerSlide:d=1,slideType:f="fixed",gutter:h=0,withLoop:g=!1,startEndGutter:m=0,carouselSlideAxis:v="x",disableGestures:x=!1,draggingSlideTreshold:p,slideWhenThresholdIsReached:b=!1,freeScroll:w,enableFreeScrollDrag:y,initialStartingPosition:T,prepareThumbsData:E,initialActiveItem:R=0}){const j=d>e.length?e.length:d,S=n.useRef(0),C=n.useRef(null!=p?p:0),I=n.useRef("initial"),F=n.useRef("initial"),O=n.useRef(0),[L,$]=r.useSpring((()=>({val:0,pause:!o,onChange({value:e}){w&&N.current?("x"===v?N.current.scrollLeft=Math.abs(e.val):N.current.scrollTop=Math.abs(e.val),re()):W.current&&(W.current.style.transform="x"===v?`translate3d(${e.val}px, 0px,0px)`:`translate3d(0px,${e.val}px,0px)`)}}))),M=n.useRef(R),A=n.useRef(0===R),k=n.useRef(!1),N=n.useRef(null),W=n.useRef(null),q=n.useCallback((()=>g?[...e.map((e=>Object.assign(Object.assign({},e),{id:`prev-repeated-item-${e.id}`}))),...e,...e.map((e=>Object.assign(Object.assign({},e),{id:`next-repeated-item-${e.id}`})))]:[...e]),[e,g])(),{emitEvent:D,useListenToCustomEvent:P}=function(){const e=n.useRef(null);return n.useEffect((()=>{e.current=document.createElement("div")}),[]),{useListenToCustomEvent:function(t){n.useEffect((()=>{function r(e){t(e.detail)}if(e.current)return e.current.addEventListener(u,r,!1),()=>{var t;null===(t=e.current)||void 0===t||t.removeEventListener(u,r,!1)}}),[])},emitEvent:function(t){if(e.current){const r=new CustomEvent(u,{detail:t});e.current.dispatchEvent(r)}}}}(),{thumbsFragment:B,handleScroll:H}=s({withThumbs:!!l,thumbsSlideAxis:a,prepareThumbsData:E,items:e}),{enterFullscreen:z,exitFullscreen:G,getIsFullscreen:X}=function({mainCarouselWrapperRef:e,onFullScreenChange:t,handleResize:r}){const i=n.useRef(!1);function u(e){i.current=e}return n.useEffect((()=>{function e(){document.fullscreenElement&&(u(!0),t(!0),r&&r()),document.fullscreenElement||(u(!1),t(!1),r&&r())}if(c.isEnabled)return c.on("change",e),()=>{c.isEnabled&&c.off("change",e)}}),[]),{enterFullscreen:function(t){c.isEnabled&&c.request(t||e.current)},exitFullscreen:function(){c.isEnabled&&c.exit()},getIsFullscreen:function(){return i.current}}}({mainCarouselWrapperRef:N,handleResize:()=>Q(),onFullScreenChange:e=>{D({eventName:"onFullscreenChange",isFullscreen:e})}});function Y(){var e;const t=null===(e=N.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===v?"width":"height"]+h}function J({from:t,to:n,nextActiveItem:i,immediate:c=!1,slideMode:u}){F.current=u,"number"==typeof i&&(w||(M.current=i),D({eventName:"onSlideStartChange",slideActionType:I.current,slideMode:F.current,nextItem:{startReached:A.current,endReached:k.current,index:w?-1:M.current,id:w?"":e[M.current].id}})),O.current=n,$.start({immediate:c,from:{val:t},to:{val:n},config:Object.assign(Object.assign({},r.config.default),{velocity:L.val.velocity}),onRest(t){!c&&t.finished&&D({eventName:"onSlideChange",slideActionType:I.current,slideMode:F.current,currentItem:{startReached:A.current,endReached:k.current,index:w?-1:M.current,id:w?"":e[M.current].id}})}}),l&&!c&&H(M.current)}function U(){var t;return g?Y()*e.length:Math.round(Number(null===(t=W.current)||void 0===t?void 0:t["x"===v?"scrollWidth":"scrollHeight"])-W.current.getBoundingClientRect()["x"===v?"width":"height"]-2*m)}function K(){var e;const t=null===(e=W.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===v?"width":"height"]+h}function Q(){const t="x"===v?"left":"top";function r(e){const r=W.current;r&&(g?(r.style.top="0px",r.style.left="0px",r.style[t]=`-${e-m}px`):(r.style.left="0px",r.style.top="0px"))}const n=Math.abs(V());if(n<U()&&k.current&&(k.current=!1),n>U()){const e=-U();return k.current=!0,O.current=e,void $.start({immediate:!0,val:e})}if(r("center"===T?K()*e.length-Y()*Math.round((j-1)/2):"end"===T?K()*e.length-Y()*Math.round(j-1):K()*e.length),!w&&"fixed"===f){const e=-Y()*M.current;O.current=e,$.start({immediate:!0,val:e})}}function V(){return w&&N.current?N.current["x"===v?"scrollLeft":"scrollTop"]:L.val.get()}function Z(e,t){if(w&&"next"===e){const e=O.current+Y();return e>U()?U():e}if(w&&"prev"===e){const e=O.current-Y();return e<0?0:e}return"next"===e?t?-t*Y():O.current-Y():t?-t*Y():O.current+Y()}function _(t="click",r){if(!o||A.current&&!g)return;I.current="prev",k.current=!1;const n=r||M.current-1;if(!g){const e=w?Z("prev",r)-Y()/3<0:Z("prev",r)+Y()/3>0;if(A.current)return;if(e)return A.current=!0,k.current=!1,void J({slideMode:t,from:V(),to:0,nextActiveItem:0})}if(g&&A.current)return A.current=!1,k.current=!0,void J({slideMode:t,from:V()-Y()*e.length,to:-Y()*e.length+Y(),nextActiveItem:e.length-1});0===n&&(A.current=!0),n!==e.length-1&&-1!==n||(k.current=!0),J({slideMode:t,from:V(),to:Z("prev",r),nextActiveItem:n})}function ee(t="click",r){if(!o||k.current&&!g)return;I.current="next",A.current=!1;const n=r||M.current+1;if(!g){const e=Math.abs(Z("next",r))>U()-Y()/3;if(k.current)return;if(e)return A.current=!1,k.current=!0,void J({slideMode:t,from:V(),to:w?U():-U(),nextActiveItem:n})}if(g&&k.current)return k.current=!1,A.current=!0,void J({slideMode:t,from:V()+Y()*e.length,to:0,nextActiveItem:0});0===n&&(A.current=!0),n===e.length-1&&(k.current=!0),J({slideMode:t,from:V(),to:Z("next",r),nextActiveItem:n})}n.useEffect((()=>{if(o){if(R>e.length-1)throw new Error(`initialActiveItem (${R}) is greater than the total quantity available items (${e.length}).`);j>e.length&&console.warn(`itemsPerSlide (${j}) is greater than the total quantity available items (${e.length}). Fallback to ${e.length})`)}}),[R,e,j,o]),n.useEffect((()=>{S.current=window.innerWidth}),[]),n.useEffect((()=>{Q()}),[T,j,g,m,h,w,f,o]),n.useLayoutEffect((()=>{W.current&&Q()}),[]),n.useEffect((()=>{C.current=p||Math.floor(Y()/2/2)}),[p]),n.useEffect((()=>{function e(){window.innerWidth!==S.current&&(S.current=window.innerWidth,Q())}return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const te=i.useDrag((e=>{const t=e.dragging,n=e.offset["x"===v?0:1],i=e.movement["x"===v?0:1],c=e.direction["x"===v?0:1],u=i>C.current,s=i<-C.current;if(t)return I.current=c>0?"prev":"next",D(Object.assign(Object.assign({},e),{eventName:"onDrag",slideActionType:I.current})),w?"prev"===I.current&&n>0?(e.cancel(),void $.start({from:{val:V()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}})):void $.start({from:{val:V()},to:{val:-n},config:{velocity:e.velocity,friction:50,tension:1e3}}):($.start({val:n,config:{velocity:e.velocity,friction:50,tension:1e3}}),void(b&&s?(ee("drag"),e.cancel()):b&&u&&(_("drag"),e.cancel())));e.last&&!e.canceled&&w&&("prev"===I.current&&_("drag"),"next"===I.current&&ee("drag")),!e.last||e.canceled||w||(s?!g&&k.current?$.start({val:-U(),config:Object.assign(Object.assign({},r.config.default),{velocity:e.velocity})}):ee("drag"):u?!g&&A.current?$.start({val:0,config:Object.assign(Object.assign({},r.config.default),{velocity:e.velocity})}):_("drag"):$.start({val:O.current,config:Object.assign(Object.assign({},r.config.default),{velocity:e.velocity})}))}),{enabled:o&&!x&&!w||!!w&&!!y,axis:v,from:()=>w&&N.current?[-N.current.scrollLeft,-N.current.scrollTop]:[L.val.get(),L.val.get()]});function re(){N.current&&(O.current=N.current["x"===v?"scrollLeft":"scrollTop"],0===N.current["x"===v?"scrollLeft":"scrollTop"]&&(A.current=!0,k.current=!1),N.current["x"===v?"scrollLeft":"scrollTop"]>0&&N.current["x"===v?"scrollLeft":"scrollTop"]<U()&&(A.current=!1,k.current=!1),N.current["x"===v?"scrollLeft":"scrollTop"]===U()&&(A.current=!1,k.current=!0))}function ne(t,r){let n=0;if(n="string"==typeof t?e.findIndex((e=>e.id===t)):t,n<0||n>=e.length){if(r)throw new Error(r);console.error(`The item doesn't exist; check that the id provided - ${t} - is correct.`),n=-1}return n}const ie=t.jsx("div",Object.assign({ref:N},w?{onWheel(){L.val.stop(),re()}}:{},{style:Object.assign({display:"flex",position:"relative",width:"100%",height:"100%"},w?"x"===v?{overflowX:"auto"}:{overflowY:"auto"}:{})},{children:t.jsxs("div",Object.assign({ref:W},te(),{style:Object.assign({position:"relative",display:"flex",flexDirection:"x"===v?"row":"column",touchAction:"none"},function(){const e=`calc(100% - ${2*m}px)`;return{width:"x"===v?e:"100%",height:"y"===v?e:"100%"}}())},{children:[w&&m?t.jsx("div",{style:{flexShrink:0,width:m}}):null,q.map(((r,n)=>{return t.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"},(i=!!w&&n===e.length-1,"fixed"!==f||w?Object.assign({marginRight:`${i?0:h}px`}):{marginRight:`${i?0:h}px`,flex:`1 0 calc(100% / ${j} - ${h*(j-1)/j}px)`}))},{children:r.renderItem}),`${r.id}-${n}`);var i})),w&&m?t.jsx("div",{style:{flexShrink:0,width:m}}):null]}))}));return w?{useListenToCustomEvent:P,carouselFragment:ie,enterFullscreen:z,exitFullscreen:G,getIsFullscreen:X,thumbsFragment:B,slideToPrevItem:()=>_(),slideToNextItem:()=>ee()}:{useListenToCustomEvent:P,carouselFragment:ie,enterFullscreen:z,exitFullscreen:G,getIsFullscreen:X,thumbsFragment:B,slideToPrevItem:()=>_(),slideToNextItem:()=>ee(),slideToItem:function(t){if(!o)return;A.current=!1,k.current=!1;const r=ne(t,"The item you want to slide to doesn't exist; check the provided id.");if(r===M.current)return;const n=ne(e[M.current].id),i=ne(e[r].id);i>n?ee("click",i):_("click",i)},getIsNextItem:function(t){const r=ne(t,"The item doesn't exist; check the provided id."),n=M.current;return g&&n===e.length-1?0===r:r===n+1},getIsPrevItem:function(t){const r=ne(t,"The item doesn't exist; check the provided id."),n=M.current;return g&&0===n?r===e.length-1:r===n-1},getIsActiveItem:e=>ne(e,"The item you want to check doesn't exist; check the provided id.")===M.current}},e.useSpringCarouselContext=function(){const e=n.useContext(o);if(!e)throw new Error("useSpringCarouselContext must be used within the carousel.");return e}}));
 //# sourceMappingURL=index.js.map