@situaction/traq-ui-ste 1.2.17 → 1.2.18

package/dist/components/carousel/Carousel.js

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

package/package.json

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