react-spring-carousel 3.0.0-beta090.12 → 3.0.0-beta090.13

package/dist/index.es2.js

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