@situaction/traq-ui-ste 1.2.19 → 1.2.20

package/dist/components/carousel/Carousel.js

@@ -1,193 +1,199 @@
-import { jsxs as ie, jsx as p, Fragment as De } from "react/jsx-runtime";
-import $e, { forwardRef as We, useMemo as ue, useRef as l, useState as F, useEffect as q, useCallback as i, useImperativeHandle as Ee } from "react";
-import '../../styles/Carousel.css';const Fe = "_root_zgsjf_6", qe = "_viewport_zgsjf_11", He = "_dragEnabled_zgsjf_27", Oe = "_dragging_zgsjf_32", Xe = "_slide_zgsjf_39", Ve = "_navButtonCtn_zgsjf_46", Ke = "_navButton_zgsjf_46", Ue = "_defaultBtn_zgsjf_64", Ye = "_navPrev_zgsjf_81", Ge = "_navNext_zgsjf_86", f = {
-  root: Fe,
-  viewport: qe,
-  dragEnabled: He,
-  dragging: Oe,
-  slide: Xe,
-  navButtonCtn: Ve,
-  navButton: Ke,
-  defaultBtn: Ue,
-  navPrev: Ye,
-  navNext: Ge
-}, k = (...P) => P.filter(Boolean).join(" "), Ze = We(
+import { jsxs as fe, jsx as p, Fragment as Ee } from "react/jsx-runtime";
+import Fe, { forwardRef as qe, useMemo as de, useRef as u, useState as O, useCallback as i, useEffect as B, useImperativeHandle as He } from "react";
+import '../../styles/Carousel.css';const Oe = "_root_zgsjf_6", Xe = "_viewport_zgsjf_11", Ue = "_dragEnabled_zgsjf_27", Ve = "_dragging_zgsjf_32", Ke = "_slide_zgsjf_39", Ye = "_navButtonCtn_zgsjf_46", Ge = "_navButton_zgsjf_46", Je = "_defaultBtn_zgsjf_64", Qe = "_navPrev_zgsjf_81", Ze = "_navNext_zgsjf_86", f = {
+  root: Oe,
+  viewport: Xe,
+  dragEnabled: Ue,
+  dragging: Ve,
+  slide: Ke,
+  navButtonCtn: Ye,
+  navButton: Ge,
+  defaultBtn: Je,
+  navPrev: Qe,
+  navNext: Ze
+}, T = (...P) => P.filter(Boolean).join(" "), rt = qe(
   ({
     children: P,
-    className: le,
-    viewportClassName: fe,
-    slideClassName: de,
-    style: ve,
-    slideSize: me = "30%",
-    gap: pe = 12,
-    align: h = "center",
-    showArrows: ge = !0,
+    className: ve,
+    viewportClassName: me,
+    slideClassName: pe,
+    style: ge,
+    slideSize: we = "30%",
+    gap: he = 12,
+    align: w = "center",
+    showArrows: _e = !0,
     dragEnabled: N = !0,
-    snapOnRelease: J = !0,
-    keyboardNavigation: he = !0,
-    btnGradientColor: we,
-    step: _e = 1,
-    initialIndex: Q = 0,
-    loop: R = !1,
-    ariaLabel: Z = "Carousel",
-    iconLeft: xe,
-    iconRight: Ie,
-    onIndexChange: H
-  }, Le) => {
-    const w = ue(() => $e.Children.toArray(P), [P]), s = w.length, c = R && s > 1, S = Math.max(1, Math.min(_e, Math.max(1, s))), v = c ? s : 0, _ = ue(() => {
-      if (!c)
-        return w.map((n, o) => ({
+    snapOnRelease: ee = !0,
+    keyboardNavigation: xe = !0,
+    btnGradientColor: Ie,
+    step: Le = 1,
+    initialIndex: te = 0,
+    loop: k = !1,
+    ariaLabel: re = "Carousel",
+    iconLeft: Re,
+    iconRight: be,
+    onIndexChange: X
+  }, ye) => {
+    const h = de(() => Fe.Children.toArray(P), [P]), c = h.length, s = k && c > 1, M = Math.max(1, Math.min(Le, Math.max(1, c))), v = s ? c : 0, _ = de(() => {
+      if (!s)
+        return h.map((n, o) => ({
           key: `real-${o}`,
           node: n,
           realIndex: o,
           isClone: !1
         }));
-      const e = w.map((n, o) => ({
+      const e = h.map((n, o) => ({
         key: `clone-head-${o}`,
         node: n,
         realIndex: o,
         isClone: !0
-      })), t = w.map((n, o) => ({
+      })), t = h.map((n, o) => ({
         key: `real-${o}`,
         node: n,
         realIndex: o,
         isClone: !1
-      })), r = w.map((n, o) => ({
+      })), r = h.map((n, o) => ({
         key: `clone-tail-${o}`,
         node: n,
         realIndex: o,
         isClone: !0
       }));
       return [...e, ...t, ...r];
-    }, [c, w]), O = _.length, a = l(null), x = l([]), [be, Ce] = F(0), y = l(0), [Ne, ee] = F(!1), [Re, te] = F(!1), I = l(!1), re = l(0), X = l(0), V = l(!1), K = l(!1), [ye, ne] = F(!1), M = l(H);
-    q(() => {
-      M.current = H;
-    }, [H]);
+    }, [s, h]), U = _.length, a = u(null), x = u([]), [Ce, Ne] = O(0), I = u(0), [ke, ne] = O(!1), [Se, oe] = O(!1), L = u(!1), ce = u(0), V = u(0), K = u(!1), Y = u(!1), [ze, se] = O(!1), j = u(X), A = u(!1), R = u(null), G = i(() => {
+      A.current = !0, R.current != null && window.clearTimeout(R.current), R.current = window.setTimeout(() => {
+        A.current = !1, R.current = null;
+      }, 120);
+    }, []);
+    B(() => () => {
+      R.current != null && window.clearTimeout(R.current);
+    }, []), B(() => {
+      j.current = X;
+    }, [X]);
     const m = i((e) => {
       var t;
-      y.current = e, Ce(e), (t = M.current) == null || t.call(M, e);
-    }, []), oe = i((e) => {
+      e !== I.current && (I.current = e, Ne(e), (t = j.current) == null || t.call(j, e));
+    }, []), ae = i((e) => {
       const t = a.current;
       t && (t.style.scrollSnapType = e ? "x mandatory" : "none", t.style.scrollBehavior = e ? "smooth" : "auto");
-    }, []), z = i(
-      (e, t) => h === "center" ? t.offsetLeft - (e.clientWidth - t.offsetWidth) / 2 : t.offsetLeft,
-      [h]
-    ), L = i(
+    }, []), S = i(
+      (e, t) => w === "center" ? t.offsetLeft - (e.clientWidth - t.offsetWidth) / 2 : t.offsetLeft,
+      [w]
+    ), b = i(
       (e, t = "smooth") => {
         const r = a.current, n = x.current[e];
         if (!r || !n) return;
-        const o = z(r, n);
+        const o = S(r, n);
         r.scrollTo({ left: o, behavior: t });
       },
-      [z]
-    ), j = i(
-      (e) => s === 0 ? 0 : R ? (e % s + s) % s : Math.max(0, Math.min(s - 1, e)),
-      [R, s]
-    ), A = i(
-      (e) => c ? v + e : e,
-      [c, v]
-    ), b = i(
+      [S]
+    ), D = i(
+      (e) => c === 0 ? 0 : k ? (e % c + c) % c : Math.max(0, Math.min(c - 1, e)),
+      [k, c]
+    ), $ = i(
+      (e) => s ? v + e : e,
+      [s, v]
+    ), y = i(
       (e, t = "smooth") => {
-        const r = j(e), n = A(r);
-        L(n, t), m(r);
+        const r = D(e), n = $(r);
+        t === "smooth" && G(), b(n, t), m(r);
       },
-      [j, A, L, m]
-    ), T = i(() => {
+      [D, $, b, m, G]
+    ), W = i(() => {
       const e = a.current;
-      if (!e || O === 0) return 0;
-      const t = e.scrollLeft, r = h === "center" ? t + e.clientWidth / 2 : t;
+      if (!e || U === 0) return 0;
+      const t = e.scrollLeft, r = w === "center" ? t + e.clientWidth / 2 : t;
       let n = 0, o = Number.POSITIVE_INFINITY;
-      for (let d = 0; d < O; d++) {
-        const u = x.current[d];
-        if (!u) continue;
-        const g = h === "center" ? u.offsetLeft + u.offsetWidth / 2 : u.offsetLeft, E = Math.abs(g - r);
-        E < o && (o = E, n = d);
+      for (let d = 0; d < U; d++) {
+        const l = x.current[d];
+        if (!l) continue;
+        const g = w === "center" ? l.offsetLeft + l.offsetWidth / 2 : l.offsetLeft, H = Math.abs(g - r);
+        H < o && (o = H, n = d);
       }
       return n;
-    }, [h, O]), D = i(
-      (e) => c ? e < v ? e + s : e >= v + s ? e - s : e : e,
-      [c, v, s]
-    ), se = l({
+    }, [w, U]), E = i(
+      (e) => s ? e < v ? e + c : e >= v + c ? e - c : e : e,
+      [s, v, c]
+    ), ie = u({
       middleStart: 0,
       groupWidth: 0
     }), C = i(() => {
-      if (!c) return;
+      if (!s) return;
       const e = a.current;
       if (!e) return;
-      const t = x.current[v], r = x.current[v + s];
+      const t = x.current[v], r = x.current[v + c];
       if (!t || !r) return;
-      const n = z(e, t), o = z(e, r);
-      se.current = {
+      const n = S(e, t), o = S(e, r);
+      ie.current = {
         middleStart: n,
         groupWidth: o - n
       };
-    }, [c, v, s, z]), U = l(!1), Y = i(
+    }, [s, v, c, S]), J = u(!1), Q = i(
       (e) => {
-        if (!c) return;
+        if (!s) return;
         const t = a.current;
         if (!t) return;
-        const { middleStart: r, groupWidth: n } = se.current;
+        const { middleStart: r, groupWidth: n } = ie.current;
         if (n <= 0) return;
         const o = r, d = r + n;
-        let u = t.scrollLeft, g = 0;
-        u < o ? g = Math.ceil((o - u) / n) * n : u > d && (g = -Math.ceil((u - d) / n) * n), g !== 0 && (U.current = !0, t.scrollLeft = u + g, e === "drag" && (X.current += g), U.current = !1);
+        let l = t.scrollLeft, g = 0;
+        l < o ? g = Math.ceil((o - l) / n) * n : l > d && (g = -Math.ceil((l - d) / n) * n), g !== 0 && (J.current = !0, t.scrollLeft = l + g, e === "drag" && (V.current += g), J.current = !1);
       },
-      [c]
-    ), B = i(() => {
-      if (R) {
-        ee(s > 1), te(s > 1);
+      [s]
+    ), z = i(() => {
+      if (k) {
+        ne(c > 1), oe(c > 1);
         return;
       }
       const e = a.current;
       if (!e) return;
       const t = e.scrollWidth - e.clientWidth, r = 1;
-      ee(t > r && e.scrollLeft > r), te(t > r && e.scrollLeft < t - r);
-    }, [R, s]), $ = i(() => {
-      s <= 1 || b(y.current + S);
-    }, [b, s, S]), W = i(() => {
-      s <= 1 || b(y.current - S);
-    }, [b, s, S]), ze = i(() => {
+      ne(t > r && e.scrollLeft > r), oe(t > r && e.scrollLeft < t - r);
+    }, [k, c]), F = i(() => {
+      c <= 1 || y(I.current + M);
+    }, [y, c, M]), q = i(() => {
+      c <= 1 || y(I.current - M);
+    }, [y, c, M]), Be = i(() => {
       var n;
-      if (!J) return;
-      const e = T(), t = D(e);
-      L(t, "smooth");
+      if (!ee) return;
+      const e = W(), t = E(e);
+      b(t, "smooth");
       const r = ((n = _[t]) == null ? void 0 : n.realIndex) ?? 0;
       m(r);
     }, [
-      J,
-      T,
-      D,
-      L,
+      ee,
+      W,
+      E,
+      b,
       _,
       m
     ]);
-    Ee(
-      Le,
+    He(
+      ye,
       () => ({
-        next: $,
-        prev: W,
-        goTo: b,
-        getIndex: () => y.current,
-        getLength: () => s
+        next: F,
+        prev: q,
+        goTo: y,
+        getIndex: () => I.current,
+        getLength: () => c
       }),
-      [b, $, W, s]
-    ), q(() => {
-      if (s === 0) return;
-      const e = j(Q), t = A(e), r = window.requestAnimationFrame(() => {
-        C(), L(t, "auto"), m(e), B();
+      [y, F, q, c]
+    ), B(() => {
+      if (c === 0) return;
+      const e = D(te), t = $(e), r = window.requestAnimationFrame(() => {
+        C(), b(t, "auto"), m(e), z();
       });
       return () => window.cancelAnimationFrame(r);
     }, [
-      s,
-      Q,
-      j,
-      A,
-      L,
+      c,
+      te,
+      D,
+      $,
+      b,
       m,
-      B,
+      z,
       C
-    ]), q(() => {
-      if (!c) return;
+    ]), B(() => {
+      if (!s) return;
       const e = a.current;
       if (!e) return;
       const t = typeof ResizeObserver < "u" ? new ResizeObserver(() => {
@@ -200,90 +206,90 @@ import '../../styles/Carousel.css';const Fe = "_root_zgsjf_6", qe = "_viewport_z
       return () => {
         window.removeEventListener("resize", r), window.cancelAnimationFrame(n), t == null || t.disconnect();
       };
-    }, [c, C]), q(() => {
+    }, [s, C]), B(() => {
       const e = a.current;
       if (!e) return;
       const t = { current: 0 }, r = () => {
-        U.current || (c && !I.current && Y("scroll"), B(), !t.current && (t.current = window.requestAnimationFrame(() => {
-          var u;
+        J.current || (s && !L.current && Q("scroll"), z(), !t.current && (A.current && G(), t.current = window.requestAnimationFrame(() => {
+          var l;
           t.current = 0;
-          const n = T(), o = D(n), d = ((u = _[o]) == null ? void 0 : u.realIndex) ?? 0;
-          d !== y.current && m(d);
+          const n = W(), o = E(n), d = ((l = _[o]) == null ? void 0 : l.realIndex) ?? 0;
+          A.current || d !== I.current && m(d);
         })));
       };
       return e.addEventListener("scroll", r, { passive: !0 }), () => {
         e.removeEventListener("scroll", r), t.current && window.cancelAnimationFrame(t.current);
       };
     }, [
-      c,
-      Y,
-      B,
-      T,
-      D,
+      s,
+      Q,
+      z,
+      W,
+      E,
       _,
       m
     ]);
-    const Be = (e) => e instanceof HTMLElement ? !!e.closest(
+    const Te = (e) => e instanceof HTMLElement ? !!e.closest(
       'button, a, input, textarea, select, option, [role="button"], [data-carousel-no-drag="true"]'
-    ) : !1, G = l(null), ce = l(0), ke = (e) => {
+    ) : !1, Z = u(null), ue = u(0), Pe = (e) => {
       var t, r, n, o;
-      N && a.current && (Be(e.target) || e.pointerType === "mouse" && e.button !== 0 || (e.preventDefault(), oe(!1), I.current = !0, V.current = !1, re.current = e.clientX, X.current = a.current.scrollLeft, ne(!0), (r = (t = a.current).focus) == null || r.call(t), (o = (n = a.current).setPointerCapture) == null || o.call(n, e.pointerId)));
-    }, Pe = (e) => {
-      if (!N || !I.current || (e.preventDefault(), !a.current)) return;
-      const r = e.clientX - re.current;
-      Math.abs(r) > 4 && (V.current = !0);
-      const n = X.current - r;
-      ce.current = n, G.current == null && (G.current = window.requestAnimationFrame(() => {
-        G.current = null;
+      N && a.current && (Te(e.target) || e.pointerType === "mouse" && e.button !== 0 || (e.preventDefault(), ae(!1), L.current = !0, K.current = !1, ce.current = e.clientX, V.current = a.current.scrollLeft, se(!0), (r = (t = a.current).focus) == null || r.call(t), (o = (n = a.current).setPointerCapture) == null || o.call(n, e.pointerId)));
+    }, Me = (e) => {
+      if (!N || !L.current || (e.preventDefault(), !a.current)) return;
+      const r = e.clientX - ce.current;
+      Math.abs(r) > 4 && (K.current = !0);
+      const n = V.current - r;
+      ue.current = n, Z.current == null && (Z.current = window.requestAnimationFrame(() => {
+        Z.current = null;
         const o = a.current;
-        o && (o.scrollLeft = ce.current, c && Y("drag"));
+        o && (o.scrollLeft = ue.current, s && Q("drag"));
       }));
-    }, ae = (e) => {
+    }, le = (e) => {
       var r;
       const t = a.current;
-      if (I.current = !1, ne(!1), t && e != null)
+      if (L.current = !1, se(!1), t && e != null)
         try {
           (r = t.releasePointerCapture) == null || r.call(t, e);
         } catch {
         }
-      V.current && (K.current = !0, window.setTimeout(() => {
-        K.current = !1;
-      }, 0)), oe(!0), ze(), B();
-    }, Se = (e) => {
-      N && I.current && ae(e.pointerId);
-    }, Me = (e) => {
-      N && I.current && ae(e.pointerId);
+      K.current && (Y.current = !0, window.setTimeout(() => {
+        Y.current = !1;
+      }, 0)), ae(!0), Be(), z();
     }, je = (e) => {
-      K.current && (e.preventDefault(), e.stopPropagation());
+      N && L.current && le(e.pointerId);
     }, Ae = (e) => {
-      he && (e.key === "ArrowLeft" ? (e.preventDefault(), W()) : e.key === "ArrowRight" && (e.preventDefault(), $()));
-    }, Te = {
-      ...ve ?? {},
-      "--carousel-gap": `${pe}px`,
-      "--carousel-slide-size": me,
-      "--carousel-snap-align": h,
-      "--carousel-button-gradient": we
+      N && L.current && le(e.pointerId);
+    }, De = (e) => {
+      Y.current && (e.preventDefault(), e.stopPropagation());
+    }, $e = (e) => {
+      xe && (e.key === "ArrowLeft" ? (e.preventDefault(), q()) : e.key === "ArrowRight" && (e.preventDefault(), F()));
+    }, We = {
+      ...ge ?? {},
+      "--carousel-gap": `${he}px`,
+      "--carousel-slide-size": we,
+      "--carousel-snap-align": w,
+      "--carousel-button-gradient": Ie
     };
-    return /* @__PURE__ */ ie("div", { className: k(f.root, le), style: Te, "aria-label": Z, children: [
-      ge && s > 1 && /* @__PURE__ */ ie(De, { children: [
-        Ne && /* @__PURE__ */ p("div", { className: `fullHeight ${f.navButtonCtn} ${f.navPrev}`, children: /* @__PURE__ */ p(
+    return /* @__PURE__ */ fe("div", { className: T(f.root, ve), style: We, "aria-label": re, children: [
+      _e && c > 1 && /* @__PURE__ */ fe(Ee, { children: [
+        ke && /* @__PURE__ */ p("div", { className: `fullHeight ${f.navButtonCtn} ${f.navPrev}`, children: /* @__PURE__ */ p(
           "button",
           {
             type: "button",
-            className: k(f.navButton),
-            onClick: W,
+            className: T(f.navButton),
+            onClick: q,
             "aria-label": "Précédent",
-            children: xe ?? /* @__PURE__ */ p("div", { className: f.defaultBtn, "aria-hidden": !0, children: "‹" })
+            children: Re ?? /* @__PURE__ */ p("div", { className: f.defaultBtn, "aria-hidden": !0, children: "‹" })
           }
         ) }),
-        Re && /* @__PURE__ */ p("div", { className: `fullHeight ${f.navButtonCtn} ${f.navNext}`, children: /* @__PURE__ */ p(
+        Se && /* @__PURE__ */ p("div", { className: `fullHeight ${f.navButtonCtn} ${f.navNext}`, children: /* @__PURE__ */ p(
           "button",
           {
             type: "button",
-            className: k(f.navButton),
-            onClick: $,
+            className: T(f.navButton),
+            onClick: F,
             "aria-label": "Suivant",
-            children: Ie ?? /* @__PURE__ */ p("div", { className: f.defaultBtn, "aria-hidden": !0, children: "›" })
+            children: be ?? /* @__PURE__ */ p("div", { className: f.defaultBtn, "aria-hidden": !0, children: "›" })
           }
         ) })
       ] }),
@@ -291,33 +297,33 @@ import '../../styles/Carousel.css';const Fe = "_root_zgsjf_6", qe = "_viewport_z
         "div",
         {
           ref: a,
-          className: k(
+          className: T(
             f.viewport,
             N && f.dragEnabled,
-            ye && f.dragging,
-            fe
+            ze && f.dragging,
+            me
           ),
           tabIndex: 0,
           role: "region",
           "aria-roledescription": "carousel",
-          "aria-label": Z,
-          onKeyDown: Ae,
-          onPointerDown: ke,
-          onPointerMove: Pe,
-          onPointerUp: Se,
-          onPointerCancel: Me,
-          onClickCapture: je,
+          "aria-label": re,
+          onKeyDown: $e,
+          onPointerDown: Pe,
+          onPointerMove: Me,
+          onPointerUp: je,
+          onPointerCancel: Ae,
+          onClickCapture: De,
           children: _.map((e, t) => /* @__PURE__ */ p(
             "div",
             {
               ref: (r) => {
                 x.current[t] = r;
               },
-              className: k(f.slide, de),
+              className: T(f.slide, pe),
               "data-carousel-slide": !0,
               "data-carousel-clone": e.isClone ? "true" : "false",
-              "aria-label": `Item ${e.realIndex + 1} sur ${s}`,
-              "aria-current": e.realIndex === be,
+              "aria-label": `Item ${e.realIndex + 1} sur ${c}`,
+              "aria-current": e.realIndex === Ce,
               children: e.node
             },
             e.key
@@ -328,5 +334,5 @@ import '../../styles/Carousel.css';const Fe = "_root_zgsjf_6", qe = "_viewport_z
   }
 );
 export {
-  Ze as Carousel
+  rt as Carousel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.2.19",
+  "version": "1.2.20",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",