react-spring-carousel 3.0.0-beta068 → 3.0.0-beta070

package/dist/useTransitionCarousel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./useThumbsModule-0c05dcf5.cjs"),g=require("@react-spring/web"),o=require("react"),K=require("@use-gesture/react");require("screenfull");const c={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"relative"},enter:{position:"relative",opacity:1},leave:{opacity:1,position:"absolute"}};function Q({init:l=!0,disableGestures:q=!1,items:r,springConfig:M=g.config.default,exitBeforeEnter:N=!1,trail:_,withLoop:s=!1,activeItem:a,toPrevItemSpringProps:h=c,toNextItemSpringProps:v=c,draggingSlideTreshold:b=50,thumbsSlideAxis:$="x"}){const d=o.useRef("next"),p=o.useRef("initial"),S=o.useRef(null),[n,R]=o.useState(a??0),{emitEvent:x,useListenToCustomEvent:I}=u.useEventsModule(),{handleScroll:A,thumbsFragment:D}=u.useThumbsModule({thumbsSlideAxis:$,items:r,renderThumbFnProps:{getIsNextItem:w,getIsPrevItem:k,useListenToCustomEvent:I,activeItem:{index:n,id:r[n].id}}});function O(){return d.current==="prev"?{initial:{...h.initial},from:{...h.from},enter:{...h.enter},leave:{...h.leave}}:d.current==="next"?{initial:{...v.initial},from:{...v.from},enter:{...v.enter},leave:{...v.leave}}:{initial:{...c.initial},from:{...c.from},enter:{...c.enter},leave:{...c.leave}}}o.useEffect(()=>{typeof a=="number"&&a!==n&&R(a)},[a]);function T({to:e,slideType:t,slideMode:i}){d.current=t,p.current=i,x({eventName:"onSlideStartChange",slideActionType:d.current,slideMode:p.current,nextItem:{index:e,id:r[e].id,startReached:e===0,endReached:e===r.length-1}}),R(e),A(n)}function E(e){if(!l)return;const t=n===0;!s&&t||T(s&&t?{to:r.length-1,slideType:"prev",slideMode:e}:{to:n-1,slideType:"prev",slideMode:e})}function j(e){if(!l)return;const t=n===r.length-1;!s&&t||T(s&&t?{to:0,slideType:"next",slideMode:e}:{to:n+1,slideType:"next",slideMode:e})}const W=g.useTransition(n,{config:M,key:null,trail:_,exitBeforeEnter:N,...O(),onRest(e,t,i){e.finished&&i===n&&x({eventName:"onSlideChange",slideActionType:d.current,slideMode:p.current,currentItem:{index:n,id:r[n].id,startReached:n===0,endReached:n===r.length-1}})}}),z=K.useDrag(({last:e,movement:[t]})=>{if(e){const i=t>b,f=t<-b,m=n===0,J=n===r.length-1;if(f){if(!s&&J)return;x({eventName:"onLeftSwipe"}),j("swipe")}else if(i){if(!s&&m)return;x({eventName:"onRightSwipe"}),E("swipe")}}},{enabled:!q});function F(e,t){let i=0;if(typeof e=="string"?i=r.findIndex(f=>f.id===e):i=e,i<0||i>=r.length){if(t)throw new Error(t);console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`),i=-1}return i}function w(e){const t=F(e,"The item doesn't exist; check the provided id."),i=n;return s&&i===r.length-1?t===0:t===i+1}function k(e){const t=F(e,"The item doesn't exist; check the provided id."),i=n;return s&&i===0?t===r.length-1:t===i-1}const B=W((e,t,i,f)=>{const m=r[t].renderItem;return u.jsxRuntimeExports.jsx(g.a.div,{id:`use-transition-carousel-item-${f}`,className:"use-transition-carousel-item",style:{...e,flex:"1 0 100%",width:"100%",height:"100%"},children:typeof m=="function"?m({useListenToCustomEvent:I,getIsNextItem:w,getIsPrevItem:k,activeItem:{index:n,id:r[n].id}}):m})}),y={useListenToCustomEvent:I,slideToPrevItem:()=>E("click"),slideToNextItem:()=>j("click")},G=u.jsxRuntimeExports.jsx(C.Provider,{value:y,children:D}),H=u.jsxRuntimeExports.jsx(C.Provider,{value:y,children:u.jsxRuntimeExports.jsx("div",{ref:S,...z(),style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:B})});return{...y,carouselFragment:H,thumbsFragment:G}}const C=o.createContext(void 0);function U(){const l=o.useContext(C);if(!l)throw new Error("useTransitionCarouselContext must be used within the carousel.");return l}exports.useTransitionCarousel=Q;exports.useTransitionCarouselContext=U;

package/dist/{types/useTransitionCarousel.d.ts → useTransitionCarousel.d.ts}

@@ -1,5 +1,5 @@
-import { UseTransitionCarouselProps, UseTransitionCarouselReturnProps } from './types';
-declare function useTransitionCarousel({ init, disableGestures, items, springConfig, exitBeforeEnter, trail, withLoop, activeItem: externalActiveItem, toPrevItemSpringProps, toNextItemSpringProps, draggingSlideTreshold, thumbsSlideAxis, }: UseTransitionCarouselProps): UseTransitionCarouselReturnProps;
-type ContextProps = Omit<UseTransitionCarouselReturnProps, 'carouselFragment' | 'thumbsFragment'>;
-declare function useTransitionCarouselContext(): ContextProps;
-export { useTransitionCarousel, useTransitionCarouselContext };
+import { UseTransitionCarouselProps, UseTransitionCarouselReturnProps } from './types';
+declare function useTransitionCarousel({ init, disableGestures, items, springConfig, exitBeforeEnter, trail, withLoop, activeItem: externalActiveItem, toPrevItemSpringProps, toNextItemSpringProps, draggingSlideTreshold, thumbsSlideAxis, }: UseTransitionCarouselProps): UseTransitionCarouselReturnProps;
+type ContextProps = Omit<UseTransitionCarouselReturnProps, 'carouselFragment' | 'thumbsFragment'>;
+declare function useTransitionCarouselContext(): ContextProps;
+export { useTransitionCarousel, useTransitionCarouselContext };

package/dist/useTransitionCarousel.js

@@ -0,0 +1,257 @@
+import { u as K, a as O, j as x } from "./useThumbsModule-db93025f.js";
+import { useTransition as Q, a as U, config as V } from "@react-spring/web";
+import { createContext as X, useRef as y, useState as Y, useEffect as Z, useContext as P } from "react";
+import { useDrag as L } from "@use-gesture/react";
+import "screenfull";
+const o = {
+  initial: {
+    opacity: 1,
+    position: "relative"
+  },
+  from: {
+    opacity: 0,
+    position: "relative"
+  },
+  enter: {
+    position: "relative",
+    opacity: 1
+  },
+  leave: {
+    opacity: 1,
+    position: "absolute"
+  }
+};
+function se({
+  init: c = !0,
+  disableGestures: w = !1,
+  items: r,
+  springConfig: N = V.default,
+  exitBeforeEnter: _ = !1,
+  trail: M,
+  withLoop: s = !1,
+  activeItem: a,
+  toPrevItemSpringProps: f = o,
+  toNextItemSpringProps: m = o,
+  draggingSlideTreshold: C = 50,
+  thumbsSlideAxis: $ = "x"
+}) {
+  const l = y("next"), p = y("initial"), A = y(null), [n, b] = Y(a ?? 0), { emitEvent: h, useListenToCustomEvent: T } = K(), { handleScroll: D, thumbsFragment: S } = O({
+    thumbsSlideAxis: $,
+    items: r,
+    renderThumbFnProps: {
+      getIsNextItem: j,
+      getIsPrevItem: k,
+      useListenToCustomEvent: T,
+      activeItem: {
+        index: n,
+        id: r[n].id
+      }
+    }
+  });
+  function W() {
+    return l.current === "prev" ? {
+      initial: {
+        ...f.initial
+      },
+      from: {
+        ...f.from
+      },
+      enter: {
+        ...f.enter
+      },
+      leave: {
+        ...f.leave
+      }
+    } : l.current === "next" ? {
+      initial: {
+        ...m.initial
+      },
+      from: {
+        ...m.from
+      },
+      enter: {
+        ...m.enter
+      },
+      leave: {
+        ...m.leave
+      }
+    } : {
+      initial: {
+        ...o.initial
+      },
+      from: {
+        ...o.from
+      },
+      enter: {
+        ...o.enter
+      },
+      leave: {
+        ...o.leave
+      }
+    };
+  }
+  Z(() => {
+    typeof a == "number" && a !== n && b(a);
+  }, [a]);
+  function v({ to: e, slideType: t, slideMode: i }) {
+    l.current = t, p.current = i, h({
+      eventName: "onSlideStartChange",
+      slideActionType: l.current,
+      slideMode: p.current,
+      nextItem: {
+        index: e,
+        id: r[e].id,
+        startReached: e === 0,
+        endReached: e === r.length - 1
+      }
+    }), b(e), D(n);
+  }
+  function R(e) {
+    if (!c)
+      return;
+    const t = n === 0;
+    !s && t || v(s && t ? {
+      to: r.length - 1,
+      slideType: "prev",
+      slideMode: e
+    } : {
+      to: n - 1,
+      slideType: "prev",
+      slideMode: e
+    });
+  }
+  function F(e) {
+    if (!c)
+      return;
+    const t = n === r.length - 1;
+    !s && t || v(s && t ? {
+      to: 0,
+      slideType: "next",
+      slideMode: e
+    } : {
+      to: n + 1,
+      slideType: "next",
+      slideMode: e
+    });
+  }
+  const q = Q(n, {
+    config: N,
+    key: null,
+    trail: M,
+    exitBeforeEnter: _,
+    ...W(),
+    onRest(e, t, i) {
+      e.finished && i === n && h({
+        eventName: "onSlideChange",
+        slideActionType: l.current,
+        slideMode: p.current,
+        currentItem: {
+          index: n,
+          id: r[n].id,
+          startReached: n === 0,
+          endReached: n === r.length - 1
+        }
+      });
+    }
+  }), z = L(
+    ({ last: e, movement: [t] }) => {
+      if (e) {
+        const i = t > C, u = t < -C, d = n === 0, J = n === r.length - 1;
+        if (u) {
+          if (!s && J)
+            return;
+          h({
+            eventName: "onLeftSwipe"
+          }), F("swipe");
+        } else if (i) {
+          if (!s && d)
+            return;
+          h({
+            eventName: "onRightSwipe"
+          }), R("swipe");
+        }
+      }
+    },
+    {
+      enabled: !w
+    }
+  );
+  function E(e, t) {
+    let i = 0;
+    if (typeof e == "string" ? i = r.findIndex((u) => u.id === e) : i = e, i < 0 || i >= r.length) {
+      if (t)
+        throw new Error(t);
+      console.error(
+        `The item doesn't exist; check that the id provided - ${e} - is correct.`
+      ), i = -1;
+    }
+    return i;
+  }
+  function j(e) {
+    const t = E(e, "The item doesn't exist; check the provided id."), i = n;
+    return s && i === r.length - 1 ? t === 0 : t === i + 1;
+  }
+  function k(e) {
+    const t = E(e, "The item doesn't exist; check the provided id."), i = n;
+    return s && i === 0 ? t === r.length - 1 : t === i - 1;
+  }
+  const B = q((e, t, i, u) => {
+    const d = r[t].renderItem;
+    return /* @__PURE__ */ x.jsx(
+      U.div,
+      {
+        id: `use-transition-carousel-item-${u}`,
+        className: "use-transition-carousel-item",
+        style: {
+          ...e,
+          flex: "1 0 100%",
+          width: "100%",
+          height: "100%"
+        },
+        children: typeof d == "function" ? d({
+          useListenToCustomEvent: T,
+          getIsNextItem: j,
+          getIsPrevItem: k,
+          activeItem: {
+            index: n,
+            id: r[n].id
+          }
+        }) : d
+      }
+    );
+  }), I = {
+    useListenToCustomEvent: T,
+    slideToPrevItem: () => R("click"),
+    slideToNextItem: () => F("click")
+  }, G = /* @__PURE__ */ x.jsx(g.Provider, { value: I, children: S }), H = /* @__PURE__ */ x.jsx(g.Provider, { value: I, children: /* @__PURE__ */ x.jsx(
+    "div",
+    {
+      ref: A,
+      ...z(),
+      style: {
+        display: "flex",
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      },
+      children: B
+    }
+  ) });
+  return {
+    ...I,
+    carouselFragment: H,
+    thumbsFragment: G
+  };
+}
+const g = X(void 0);
+function oe() {
+  const c = P(g);
+  if (!c)
+    throw new Error("useTransitionCarouselContext must be used within the carousel.");
+  return c;
+}
+export {
+  se as useTransitionCarousel,
+  oe as useTransitionCarouselContext
+};

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-spring-carousel",
-  "version": "3.0.0-beta068",
+  "version": "3.0.0-beta070",
+  "type": "module",
   "description": "A new <Carousel /> experience for the web",
   "homepage": "https://react-spring-carousel.emilianobucci.com",
   "repository": "https://github.com/Emiliano-Bucci/react-spring-carousel",
@@ -18,6 +19,15 @@
       "default": "./dist/esm/index.js"
     }
   },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release:beta": "git push && npm run build && npm publish --tag beta"
+  },
   "keywords": [
     "react",
     "react-spring",
@@ -29,62 +39,41 @@
     "react-spring-slider",
     "animated"
   ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "clean": "rimraf dist",
-    "build:lib": "npm run clean && rollup -c",
-    "release:beta": "git push && npm run build:lib && npm publish --tag beta"
+  "dependencies": {
+    "@use-gesture/react": "^10.2.26",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "screenfull": "^5.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@simbathesailor/babel-plugin-use-what-changed": "^2.1.0",
-    "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack4": "^6.5.16",
-    "@storybook/manager-webpack4": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-vite": "^7.0.6",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/parser": "^5.54.0",
-    "babel-loader": "^9.1.2",
-    "eslint": "^8.35.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0-beta.0",
+    "eslint": "^8.38.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "html-webpack-plugin": "^5.5.0",
-    "prettier": "^2.8.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rimraf": "^4.2.0",
-    "rollup": "^3.18.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.23",
-    "rollup-plugin-filesize": "^10.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-storybook": "^0.6.11",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.0.6",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.0",
+    "vite-plugin-dts": "^2.3.0",
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "peerDependencies": {
-    "@react-spring/web": "^9.5.5",
+    "@react-spring/web": "^9.7.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@use-gesture/react": "^10.2.24",
-    "resize-observer-polyfill": "^1.5.1",
-    "screenfull": "^5.2.0"
   }
 }

package/README.md

@@ -1,54 +0,0 @@
-# react-spring-carousel
-
-> A performant React carousel component powered by `react-spring` and `@use-gesture`.
-
-[![NPM](https://img.shields.io/npm/v/react-spring-carousel.svg)](https://www.npmjs.com/package/react-spring-carousel) [![NPM](https://img.shields.io/bundlephobia/minzip/react-spring-carousel)](https://img.shields.io/bundlephobia/minzip/react-spring-carousel)
-
-## Install
-
-```bash
-// npm v7.x
-npm install --save react-spring-carousel
-```
-
-```bash
-// npm v6.x or less
-npm install --save react-spring react-spring-carousel
-```
-
-```bash
-yarn add react-spring react-spring-carousel
-```
-
-## Usage
-
-```tsx
-import { useSpringCarousel } from 'react-spring-carousel'
-
-const { carouselFragment, slideToPrevItem, slideToNextItem } = useSpringCarousel({
-  items: [
-    {
-      id: 'item-1',
-      renderItem: <div>Item 1</div>,
-    },
-    {
-      id: 'item-2',
-      renderItem: <div>Item 2</div>,
-    },
-  ],
-})
-
-return (
-  <div>
-    <button onClick={slideToPrevItem}>Prev item</button>
-    <div>{carouselFragment}</div>
-    <button onClick={slideToNextItem}>Next item</button>
-  </div>
-)
-```
-
-## Official documentation
-
-For a complete overview of the library, please visit the official documentation.
-
-[Visit here](https://react-spring-carousel.emilianobucci.com)

package/dist/cjs/index.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@react-spring/web"),n=require("react"),r=require("@use-gesture/react"),i=require("screenfull"),s=require("resize-observer-polyfill");const c="RSC::Event";function o(){const e=n.useRef(null);return{useListenToCustomEvent:function(t){n.useEffect((()=>{function n(e){t(e.detail)}if(e.current||(e.current=document.createElement("div")),e.current)return e.current.addEventListener(c,n,!1),()=>{var t;null===(t=e.current)||void 0===t||t.removeEventListener(c,n,!1)}}),[t])},emitEvent:function(t){if(e.current){const n=new CustomEvent(c,{detail:t});e.current.dispatchEvent(n)}}}}function u({mainCarouselWrapperRef:e,onFullScreenChange:t,handleResize:r}){const s=n.useRef(!1);function c(e){s.current=e}return n.useEffect((()=>{function e(){document.fullscreenElement&&(c(!0),t(!0),r&&r()),document.fullscreenElement||(c(!1),t(!1),r&&r())}if(i.isEnabled)return i.on("change",e),()=>{i.isEnabled&&i.off("change",e)}}),[]),{enterFullscreen:function(t){i.isEnabled&&i.request(t||e.current)},exitFullscreen:function(){i.isEnabled&&i.exit()},getIsFullscreen:function(){return s.current}}}function l({thumbsSlideAxis:r="x",withThumbs:i=!1,prepareThumbsData:s,items:c,renderThumbFnProps:o}){const u=n.useRef(null),[l,a]=t.useSpring((()=>({val:0})));function d(){var e;return Math.round(Number(null===(e=u.current)||void 0===e?void 0:e["x"===r?"scrollWidth":"scrollHeight"])-u.current.getBoundingClientRect()["x"===r?"width":"height"])}return{thumbsFragment:i?e.jsx("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:u,onWheel:()=>l.val.stop(),style:Object.assign({display:"flex",flex:"1",position:"relative",width:"100%",height:"100%",flexDirection:"x"===r?"row":"column"},"x"===r?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"})},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return s?s(e(c)):e(c)}().map((({id:t,renderThumb:n})=>{const r=`thumb-item-${t}`;return e.jsx("div",Object.assign({id:r,className:"thumb-item"},{children:"function"==typeof n?n(o):n}),r)}))})):null,handleScroll:function(e){var t,n;const i=u.current?u.current.querySelector(`#thumb-item-${c[e].id}`):null;if(i&&u.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 e=i.offsetLeft,s=e>d()?d():e;a.start({from:{val:null!==(n=null===(t=u.current)||void 0===t?void 0:t["x"===r?"scrollLeft":"scrollTop"])&&void 0!==n?n:0},to:{val:s},onChange:({value:e})=>{u.current&&(u.current["x"===r?"scrollLeft":"scrollTop"]=Math.abs(e.val))}})}}}}const a=n.createContext(void 0);const d={initial:{opacity:1,position:"relative"},from:{opacity:0,position:"relative"},enter:{position:"relative",opacity:1},leave:{opacity:1,position:"absolute"}};const f=n.createContext(void 0);exports.useEventsModule=o,exports.useFullscreenModule=u,exports.useSpringCarousel=function({items:i,init:c=!0,withThumbs:d,thumbsSlideAxis:f="x",itemsPerSlide:m=1,slideType:h="fixed",gutter:g=0,withLoop:v=!1,startEndGutter:p=0,carouselSlideAxis:x="x",disableGestures:b=!1,draggingSlideTreshold:y,slideWhenThresholdIsReached:T=!1,freeScroll:I,enableFreeScrollDrag:j,initialStartingPosition:w,prepareThumbsData:O,initialActiveItem:E=0,animateWhenActiveItemChange:R=!0,getControllerRef:C}){const S=m>i.length?i.length:m,M=n.useRef(!1),N=n.useRef(null!=y?y:0),F=n.useRef("initial"),L=n.useRef("initial"),k=n.useRef("initial"),A=n.useRef(E),P=n.useRef(0===E),$=n.useRef("fixed"===h&&E===i.length-1),W=n.useRef(null),q=n.useRef(null),D=n.useRef(!0),B=n.useRef(0),H=n.useRef(0),z=n.useRef(0),G=n.useRef(v),X=n.useRef(h),Y=n.useRef(I),J=n.useRef(!1),K=n.useCallback((()=>v?[...i.map((e=>Object.assign(Object.assign({},e),{id:`prev-repeated-item-${e.id}`}))),...i,...i.map((e=>Object.assign(Object.assign({},e),{id:`next-repeated-item-${e.id}`})))]:[...i]),[i,v])(),[Q,U]=t.useSpring((()=>({val:0,pause:!c,onChange:({value:e})=>{I&&W.current?("x"===x?W.current.scrollLeft=Math.abs(e.val):W.current.scrollTop=Math.abs(e.val),pe()):q.current&&(q.current.style.transform="x"===x?`translate3d(${e.val}px, 0px,0px)`:`translate3d(0px,${e.val}px,0px)`)}})),[I]),{emitEvent:V,useListenToCustomEvent:Z}=o(),{thumbsFragment:_,handleScroll:ee}=l({withThumbs:!!d,thumbsSlideAxis:f,prepareThumbsData:O,items:i,renderThumbFnProps:{getIsActiveItem:Ie,getIsPrevItem:Te,useListenToCustomEvent:Z,getIsNextItem:ye}}),{enterFullscreen:te,exitFullscreen:ne,getIsFullscreen:re}=u({mainCarouselWrapperRef:W,handleResize:()=>le(),onFullScreenChange:e=>{V({eventName:"onFullscreenChange",isFullscreen:e})}});function ie(){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"===x?"width":"height"]+g}function se({from:e,to:n,nextActiveItem:r,immediate:s=!1,slideMode:c}){L.current=c,"number"==typeof r&&(I||(A.current=r),V({eventName:"onSlideStartChange",slideActionType:F.current,slideMode:L.current,nextItem:{startReached:P.current,endReached:$.current,index:I?-1:A.current,id:I?"":i[A.current].id}})),z.current=n,U.start({immediate:s,from:{val:e},to:{val:n},config:Object.assign(Object.assign({},t.config.default),{velocity:Q.val.velocity}),onRest(e){!s&&e.finished&&V({eventName:"onSlideChange",slideActionType:F.current,slideMode:L.current,currentItem:{startReached:P.current,endReached:$.current,index:I?-1:A.current,id:I?"":i[A.current].id}})}}),d&&!s&&ee(A.current)}function ce(){var e;return v?ie()*i.length:Math.round(Number(null===(e=q.current)||void 0===e?void 0:e["x"===x?"scrollWidth":"scrollHeight"])-q.current.getBoundingClientRect()["x"===x?"width":"height"]-2*p)}function oe(){var e;const t=null===(e=q.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===x?"width":"height"]+g}function ue(e){const t="x"===x?"left":"top",n=q.current;n&&(v?(n.style.top="0px",n.style.left="0px",n.style[t]=`-${e-p}px`,P.current=!1,$.current=!1):(n.style.left="0px",n.style.top="0px"))}function le(e=!1){if(q.current&&e&&(q.current.style.transform="translate3d(0px, 0px,0px)",q.current.style.left="0",q.current.style.top="0"),"fixed"===h&&ue("center"===w?oe()*i.length-ie()*Math.round((S-1)/2):"end"===w?oe()*i.length-ie()*Math.round(S-1):oe()*i.length),"fluid"!==h){if(!I&&"fixed"===h){const e=-ie()*A.current;if(Math.abs(e)>ce()&&!v){const e=-ce();$.current=!0,z.current=e,U.start({immediate:!0,val:z.current})}else z.current=e,U.start({immediate:!0,val:e});setTimeout((()=>{M.current=!1}),0)}}else{if($.current&&ce()!==Math.abs(z.current)&&!v){const e=-ce();return z.current=e,void U.start({immediate:!0,val:z.current})}if(Math.abs(z.current)>0&&ce()!==Math.abs(z.current)&&!v&&!I&&"backward"===k.current){const e=B.current-ce(),t=z.current+e;return U.start({immediate:!0,val:t}),()=>{z.current=t}}}}function ae(){return I&&W.current?W.current["x"===x?"scrollLeft":"scrollTop"]:Q.val.get()}function de(e,t){if(I&&"next"===e){const e=z.current+ie();return e>ce()?ce():e}if(I&&"prev"===e){const e=z.current-ie();return e<0?0:e}return"next"===e?"number"==typeof t?-t*ie():z.current-ie():"number"==typeof t?-t*ie():z.current+ie()}function fe({type:e,index:t,immediate:n}){if(!c||J.current||P.current&&!v)return;$.current&&(k.current="backward"),F.current="prev",$.current=!1;const r="number"==typeof t?t:A.current-1;if(I&&pe(),!v){const r=I?de("prev",t)-ie()/3<0:de("prev",t)+ie()/3>0;if(P.current)return;if(r)return P.current=!0,$.current=!1,void se({slideMode:e,from:ae(),to:0,nextActiveItem:0,immediate:n})}if(v&&(P.current||r<0))return P.current=!1,$.current=!0,void se({slideMode:e,from:ae()-ie()*i.length,to:-ie()*i.length+ie(),nextActiveItem:i.length-1,immediate:n});0===r&&(P.current=!0),r!==i.length-1&&-1!==r||($.current=!0),se({slideMode:e,from:ae(),to:de("prev",t),nextActiveItem:r,immediate:n})}function me({type:e,index:t,immediate:n}){if(!c||J.current||$.current&&!v)return;P.current&&(k.current="forward"),F.current="next",P.current=!1;const r=t||A.current+1;if(I&&pe(),!v){const i=Math.abs(de("next",t))>ce()-ie()/3;if($.current)return;if(i)return P.current=!1,$.current=!0,void se({slideMode:e,from:ae(),to:I?ce():-ce(),nextActiveItem:r,immediate:n})}if(v&&($.current||r>i.length-1))return $.current=!1,P.current=!0,void se({slideMode:e,from:ae()+ie()*i.length,to:0,nextActiveItem:0,immediate:n});0===r&&(P.current=!0),r===i.length-1&&($.current=!0),se({slideMode:e,from:ae(),to:de("next",t),nextActiveItem:r,immediate:n})}function he(){!D.current&&q.current&&(B.current=ce(),G.current=v,X.current=h,Y.current=I,H.current=window.innerWidth,z.current=0,be({id:0,immediate:!0,shouldReset:!0}),N.current=y||Math.floor(ie()/2/2),le())}const ge=c&&!b&&!I||!!I&&!!j,ve=r.useDrag((e=>{const n=e.dragging,r=e.offset["x"===x?0:1],i=e.movement["x"===x?0:1],s=e.direction["x"===x?0:1],c=i>N.current,o=i<-N.current,u=ce();if(n){if(F.current=s>0?"prev":"next",V(Object.assign(Object.assign({},e),{eventName:"onDrag",slideActionType:F.current})),I)return r>0?(U.start({from:{val:ae()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}}),void e.cancel()):void U.start({from:{val:ae()},to:{val:-r},config:{velocity:e.velocity,friction:50,tension:1e3}});U.start({val:r,config:{velocity:e.velocity,friction:50,tension:1e3}}),T&&o?(me({type:"drag"}),e.cancel()):T&&c&&(fe({type:"drag"}),e.cancel());u-Math.abs(r)<-2*ie()&&e.cancel()}else e.last&&I&&r>0?U.start({from:{val:ae()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}}):(e.last&&!e.canceled&&I&&("prev"===F.current&&fe({type:"drag"}),"next"===F.current&&me({type:"drag"})),!e.last||e.canceled||I||(o?!v&&$.current?U.start({val:-ce(),config:Object.assign(Object.assign({},t.config.default),{velocity:e.velocity})}):me({type:"drag"}):c?!v&&P.current?U.start({val:0,config:Object.assign(Object.assign({},t.config.default),{velocity:e.velocity})}):fe({type:"drag"}):U.start({val:z.current,config:Object.assign(Object.assign({},t.config.default),{velocity:e.velocity})})),e.last&&e.canceled&&U.start({val:z.current,config:Object.assign(Object.assign({},t.config.default),{velocity:e.velocity})}))}),{enabled:ge,axis:x,from:()=>I&&W.current?[-W.current.scrollLeft,-W.current.scrollTop]:[Q.val.get(),Q.val.get()]});function pe(){W.current&&(z.current=W.current["x"===x?"scrollLeft":"scrollTop"],0===W.current["x"===x?"scrollLeft":"scrollTop"]&&(P.current=!0,$.current=!1),W.current["x"===x?"scrollLeft":"scrollTop"]>0&&W.current["x"===x?"scrollLeft":"scrollTop"]<ce()&&(P.current=!1,$.current=!1),W.current["x"===x?"scrollLeft":"scrollTop"]===ce()&&(P.current=!1,$.current=!0))}function xe(e,t){let n=0;if(n="string"==typeof e?i.findIndex((t=>t.id===e)):e,n<0||n>=i.length){if(t)throw new Error(t);console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`),n=-1}return n}function be({id:e,immediate:t,shouldReset:n,type:r}){if(!c||J.current)return;P.current=!1,$.current=!1;const s=xe(e,"The item you want to slide to doesn't exist; check the provided id.");if(s===A.current&&!n)return;const o=xe(i[A.current].id),u=xe(i[s].id);u>o?me({type:r||n?"initial":"click",index:u,immediate:t}):fe({type:r||n?"initial":"click",index:u,immediate:t})}function ye(e){const t=xe(e,"The item doesn't exist; check the provided id."),n=A.current;return v&&n===i.length-1?0===t:t===n+1}function Te(e){const t=xe(e,"The item doesn't exist; check the provided id."),n=A.current;return v&&0===n?t===i.length-1:t===n-1}function Ie(e){return xe(e,"The item you want to check doesn't exist; check the provided id.")===A.current}const je=I?{useListenToCustomEvent:Z,enterFullscreen:te,exitFullscreen:ne,getIsFullscreen:re,slideToPrevItem:(e=!0)=>{fe({type:"click",immediate:!e})},slideToNextItem:(e=!0)=>{me({type:"click",immediate:!e})}}:{useListenToCustomEvent:Z,enterFullscreen:te,exitFullscreen:ne,getIsFullscreen:re,slideToPrevItem:(e=!0)=>{fe({type:"click",immediate:!e})},slideToNextItem:(e=!0)=>{me({type:"click",immediate:!e})},slideToItem:(e,t=!0)=>{be({id:e,immediate:!t})},getIsNextItem:ye,getIsPrevItem:Te,getIsActiveItem:Ie};t.useIsomorphicLayoutEffect((()=>{q.current&&c&&(M.current=!0,he())}),[c]),n.useEffect((()=>{A.current!==E&&be({id:E,immediate:!R})}),[E]),n.useEffect((()=>{if(c){if(E>i.length-1)throw new Error(`initialActiveItem (${E}) is greater than the total quantity available items (${i.length}).`);S>i.length&&console.warn(`itemsPerSlide (${S}) is greater than the total quantity available items (${i.length}). Fallback to ${i.length})`)}}),[E,i.length,S,c]),n.useEffect((()=>{H.current=window.innerWidth}),[]),n.useEffect((()=>{c&&(M.current=!0,he())}),[w,S,p,g,c,v]),n.useEffect((()=>{if(c)return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)};function e(){document.hidden?J.current=!0:J.current=!1}}),[c]),n.useEffect((()=>{if(W.current){let e;const t=new s((()=>{if(D.current)D.current=!1;else if(!J.current&&!M.current){H.current=window.innerWidth;const t=le();window.clearTimeout(e),e=setTimeout((()=>{B.current=ce(),"function"==typeof t&&t()}),100)}}));return t.observe(W.current),()=>{t.disconnect()}}}),[le,ce]),n.useEffect((()=>{C&&C({slideToNextItem:je.slideToNextItem,slideToPrevItem:je.slideToPrevItem,slideToItem:null==je?void 0:je.slideToItem})}),[C,je.slideToItem,je.slideToNextItem,je.slideToPrevItem]);const we=e.jsx(a.Provider,Object.assign({value:je},{children:_})),Oe=e.jsx(a.Provider,Object.assign({value:je},{children:e.jsx("div",Object.assign({className:"use-spring-carousel-main-wrapper",ref:W},I?{onWheel(){Q.val.stop(),pe()}}:{},{style:Object.assign({display:"flex",position:"relative",width:"100%",height:"100%"},I?"x"===x?{overflowX:"auto"}:{overflowY:"auto"}:{})},{children:e.jsxs("div",Object.assign({className:"use-spring-carousel-track-wrapper",ref:q},ve(),{style:Object.assign({position:"relative",display:"flex",flexDirection:"x"===x?"row":"column",touchAction:b?"unset":"x"===x?"pan-y":"pan-x"},function(){const e=`calc(100% - ${2*p}px)`;return{width:"x"===x?e:"100%",height:"y"===x?e:"100%"}}())},{children:[!I&&v||!p?null:e.jsx("div",{style:{flexShrink:0,width:p}}),K.map(((t,n)=>{return e.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"},(r=n===K.findIndex((e=>e.id===K[K.length-1].id)),"fixed"!==h||I?Object.assign({marginRight:`${r?0:g}px`}):{marginRight:`${r?0:g}px`,flex:`1 0 calc(100% / ${S} - ${g*(S-1)/S}px)`}))},{children:"function"==typeof t.renderItem?t.renderItem({getIsActiveItem:Ie,getIsNextItem:ye,getIsPrevItem:Te,useListenToCustomEvent:Z}):t.renderItem}),`${t.id}-${n}`);var r})),!I&&v||!p?null:e.jsx("div",{style:{flexShrink:0,width:p}})]}))}))}));return Object.assign(Object.assign({},je),{carouselFragment:Oe,thumbsFragment:we})},exports.useSpringCarouselContext=function(){const e=n.useContext(a);if(!e)throw new Error("useSpringCarouselContext must be used within the carousel.");return e},exports.useThumbsModule=l,exports.useTransitionCarousel=function({init:i=!0,disableGestures:s=!1,items:c,springConfig:u=t.config.default,exitBeforeEnter:a=!1,trail:m,withLoop:h=!1,activeItem:g,toPrevItemSpringProps:v=d,toNextItemSpringProps:p=d,draggingSlideTreshold:x=50,thumbsSlideAxis:b="x"}){const y=n.useRef("next"),T=n.useRef("initial"),I=n.useRef(null),[j,w]=n.useState(null!=g?g:0),{emitEvent:O,useListenToCustomEvent:E}=o(),{handleScroll:R,thumbsFragment:C}=l({thumbsSlideAxis:b,items:c,renderThumbFnProps:{getIsNextItem:A,getIsPrevItem:P,useListenToCustomEvent:E,activeItem:{index:j,id:c[j].id}}});function S({to:e,slideType:t,slideMode:n}){y.current=t,T.current=n,O({eventName:"onSlideStartChange",slideActionType:y.current,slideMode:T.current,nextItem:{index:e,id:c[e].id,startReached:0===e,endReached:e===c.length-1}}),w(e),R(j)}function M(e){if(!i)return;const t=0===j;!h&&t||S(h&&t?{to:c.length-1,slideType:"prev",slideMode:e}:{to:j-1,slideType:"prev",slideMode:e})}function N(e){if(!i)return;const t=j===c.length-1;!h&&t||S(h&&t?{to:0,slideType:"next",slideMode:e}:{to:j+1,slideType:"next",slideMode:e})}n.useEffect((()=>{"number"==typeof g&&g!==j&&w(g)}),[g]);const F=t.useTransition(j,Object.assign(Object.assign({config:u,key:null,trail:m,exitBeforeEnter:a},"prev"===y.current?{initial:Object.assign({},v.initial),from:Object.assign({},v.from),enter:Object.assign({},v.enter),leave:Object.assign({},v.leave)}:"next"===y.current?{initial:Object.assign({},p.initial),from:Object.assign({},p.from),enter:Object.assign({},p.enter),leave:Object.assign({},p.leave)}:{initial:Object.assign({},d.initial),from:Object.assign({},d.from),enter:Object.assign({},d.enter),leave:Object.assign({},d.leave)}),{onRest(e,t,n){e.finished&&n===j&&O({eventName:"onSlideChange",slideActionType:y.current,slideMode:T.current,currentItem:{index:j,id:c[j].id,startReached:0===j,endReached:j===c.length-1}})}})),L=r.useDrag((({last:e,movement:[t]})=>{if(e){const e=t>x,n=t<-x,r=0===j,i=j===c.length-1;if(n){if(!h&&i)return;O({eventName:"onLeftSwipe"}),N("swipe")}else if(e){if(!h&&r)return;O({eventName:"onRightSwipe"}),M("swipe")}}}),{enabled:!s});function k(e,t){let n=0;if(n="string"==typeof e?c.findIndex((t=>t.id===e)):e,n<0||n>=c.length){if(t)throw new Error(t);console.error(`The item doesn't exist; check that the id provided - ${e} - is correct.`),n=-1}return n}function A(e){const t=k(e,"The item doesn't exist; check the provided id."),n=j;return h&&n===c.length-1?0===t:t===n+1}function P(e){const t=k(e,"The item doesn't exist; check the provided id."),n=j;return h&&0===n?t===c.length-1:t===n-1}const $=F(((n,r,i,s)=>{const o=c[r].renderItem;return e.jsx(t.a.div,Object.assign({id:`use-transition-carousel-item-${s}`,className:"use-transition-carousel-item",style:Object.assign(Object.assign({},n),{flex:"1 0 100%",width:"100%",height:"100%"})},{children:"function"==typeof o?o({useListenToCustomEvent:E,getIsNextItem:A,getIsPrevItem:P,activeItem:{index:j,id:c[j].id}}):o}))})),W={useListenToCustomEvent:E,slideToPrevItem:()=>M("click"),slideToNextItem:()=>N("click")},q=e.jsx(f.Provider,Object.assign({value:W},{children:C})),D=e.jsx(f.Provider,Object.assign({value:W},{children:e.jsx("div",Object.assign({ref:I},L(),{style:{display:"flex",position:"relative",width:"100%",height:"100%",overflow:"hidden"}},{children:$}))}));return Object.assign(Object.assign({},W),{carouselFragment:D,thumbsFragment:q})},exports.useTransitionCarouselContext=function(){const e=n.useContext(f);if(!e)throw new Error("useTransitionCarouselContext must be used within the carousel.");return e};
-//# sourceMappingURL=index.js.map