react-spring-carousel 3.0.0-beta068 → 3.0.0-beta071

package/dist/useSpringCarousel.js

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