@situaction/traq-ui-ste 1.2.16 → 1.2.17

package/dist/components/carousel/Carousel.js

@@ -1,15 +1,15 @@
-import { jsxs as ae, jsx as I, Fragment as We } from "react/jsx-runtime";
-import ze, { forwardRef as Ee, useMemo as ie, useRef as l, useState as q, useCallback as i, useImperativeHandle as Fe, useEffect as Y } from "react";
-import '../../styles/Carousel.css';const Be = "_root_1kths_1", $e = "_viewport_1kths_6", qe = "_dragEnabled_1kths_22", je = "_dragging_1kths_27", Oe = "_slide_1kths_34", Xe = "_navButton_1kths_41", He = "_navPrev_1kths_63", Ve = "_navNext_1kths_67", d = {
-  root: Be,
-  viewport: $e,
-  dragEnabled: qe,
+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 = Ee(
+}, C = (...M) => M.filter(Boolean).join(" "), Ye = ze(
   ({
     children: M,
     className: ue,
@@ -17,56 +17,56 @@ import '../../styles/Carousel.css';const Be = "_root_1kths_1", $e = "_viewport_1
     slideClassName: fe,
     style: de,
     slideSize: pe = "30%",
-    gap: ve = 12,
-    align: h = "center",
-    showArrows: me = !0,
-    dragEnabled: R = !0,
+    gap: me = 12,
+    align: w = "center",
+    showArrows: ve = !0,
+    dragEnabled: y = !0,
     snapOnRelease: G = !0,
-    keyboardNavigation: he = !0,
-    step: we = 1,
+    keyboardNavigation: we = !0,
+    step: ge = 1,
     initialIndex: J = 0,
-    loop: y = !1,
+    loop: N = !1,
     ariaLabel: Q = "Carousel",
-    iconLeft: ge,
+    iconLeft: he,
     iconRight: xe,
     onIndexChange: A
   }, _e) => {
-    const w = ie(() => ze.Children.toArray(M), [M]), s = w.length, c = y && s > 1, T = Math.max(1, Math.min(we, Math.max(1, s))), p = c ? s : 0, g = ie(() => {
+    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(() => {
       if (!c)
-        return w.map((n, o) => ({
+        return g.map((n, o) => ({
           key: `real-${o}`,
           node: n,
           realIndex: o,
           isClone: !1
         }));
-      const e = w.map((n, o) => ({
+      const e = g.map((n, o) => ({
         key: `clone-head-${o}`,
         node: n,
         realIndex: o,
         isClone: !0
-      })), t = w.map((n, o) => ({
+      })), t = g.map((n, o) => ({
         key: `real-${o}`,
         node: n,
         realIndex: o,
         isClone: !1
-      })), r = w.map((n, o) => ({
+      })), r = g.map((n, o) => ({
         key: `clone-tail-${o}`,
         node: n,
         realIndex: o,
         isClone: !0
       }));
       return [...e, ...t, ...r];
-    }, [c, w]), j = g.length, a = l(null), x = l([]), [Le, be] = q(0), N = l(0), [ke, Z] = q(!1), [Ie, ee] = q(!1), _ = l(!1), te = l(0), O = l(0), X = l(!1), H = l(!1), [Re, re] = q(!1), v = i(
+    }, [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) => {
-        N.current = e, be(e), A == null || A(e);
+        k.current = e, Ie(e), A == null || A(e);
       },
       [A]
     ), ne = i((e) => {
       const t = a.current;
       t && (t.style.scrollSnapType = e ? "x mandatory" : "none", t.style.scrollBehavior = e ? "smooth" : "auto");
     }, []), P = i(
-      (e, t) => h === "center" ? t.offsetLeft - (e.clientWidth - t.offsetWidth) / 2 : t.offsetLeft,
-      [h]
+      (e, t) => w === "center" ? t.offsetLeft - (e.clientWidth - t.offsetWidth) / 2 : t.offsetLeft,
+      [w]
     ), L = i(
       (e, t = "smooth") => {
         const r = a.current, n = x.current[e];
@@ -75,37 +75,37 @@ import '../../styles/Carousel.css';const Be = "_root_1kths_1", $e = "_viewport_1
         r.scrollTo({ left: o, behavior: t });
       },
       [P]
+    ), q = i(
+      (e) => s === 0 ? 0 : N ? (e % s + s) % s : Math.max(0, Math.min(s - 1, e)),
+      [N, s]
     ), D = i(
-      (e) => s === 0 ? 0 : y ? (e % s + s) % s : Math.max(0, Math.min(s - 1, e)),
-      [y, s]
-    ), W = i(
       (e) => c ? p + e : e,
       [c, p]
-    ), b = i(
+    ), I = i(
       (e, t = "smooth") => {
-        const r = D(e), n = W(r);
-        L(n, t), v(r);
+        const r = q(e), n = D(r);
+        L(n, t), m(r);
       },
-      [D, W, L, v]
-    ), z = i(() => {
+      [q, D, L, m]
+    ), W = i(() => {
       const e = a.current;
       if (!e || j === 0) return 0;
-      const t = e.scrollLeft, r = h === "center" ? t + e.clientWidth / 2 : t;
+      const t = e.scrollLeft, r = w === "center" ? t + e.clientWidth / 2 : t;
       let n = 0, o = Number.POSITIVE_INFINITY;
       for (let f = 0; f < j; f++) {
         const u = x.current[f];
         if (!u) continue;
-        const m = h === "center" ? u.offsetLeft + u.offsetWidth / 2 : u.offsetLeft, $ = Math.abs(m - r);
-        $ < o && (o = $, n = f);
+        const v = w === "center" ? u.offsetLeft + u.offsetWidth / 2 : u.offsetLeft, B = Math.abs(v - r);
+        B < o && (o = B, n = f);
       }
       return n;
-    }, [h, j]), E = i(
+    }, [w, j]), z = i(
       (e) => c ? e < p ? e + s : e >= p + s ? e - s : e : e,
       [c, p, s]
     ), oe = l({
       middleStart: 0,
       groupWidth: 0
-    }), k = i(() => {
+    }), b = i(() => {
       if (!c) return;
       const e = a.current;
       if (!e) return;
@@ -124,12 +124,12 @@ import '../../styles/Carousel.css';const Be = "_root_1kths_1", $e = "_viewport_1
         const { middleStart: r, groupWidth: n } = oe.current;
         if (n <= 0) return;
         const o = r, f = r + n;
-        let u = t.scrollLeft, m = 0;
-        u < o ? m = Math.ceil((o - u) / n) * n : u > f && (m = -Math.ceil((u - f) / n) * n), m !== 0 && (V.current = !0, t.scrollLeft = u + m, e === "drag" && (O.current += m), V.current = !1);
+        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);
       },
       [c]
     ), S = i(() => {
-      if (y) {
+      if (N) {
         Z(s > 1), ee(s > 1);
         return;
       }
@@ -137,73 +137,73 @@ import '../../styles/Carousel.css';const Be = "_root_1kths_1", $e = "_viewport_1
       if (!e) return;
       const t = e.scrollWidth - e.clientWidth, r = 1;
       Z(t > r && e.scrollLeft > r), ee(t > r && e.scrollLeft < t - r);
-    }, [y, s]), F = i(() => {
-      s <= 1 || b(N.current + T);
-    }, [b, s, T]), B = i(() => {
-      s <= 1 || b(N.current - T);
-    }, [b, s, T]), ye = i(() => {
+    }, [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(() => {
       var n;
       if (!G) return;
-      const e = z(), t = E(e);
+      const e = W(), t = z(e);
       L(t, "smooth");
-      const r = ((n = g[t]) == null ? void 0 : n.realIndex) ?? 0;
-      v(r);
+      const r = ((n = h[t]) == null ? void 0 : n.realIndex) ?? 0;
+      m(r);
     }, [
       G,
+      W,
       z,
-      E,
       L,
-      g,
-      v
+      h,
+      m
     ]);
-    Fe(
+    Ee(
       _e,
       () => ({
-        next: F,
-        prev: B,
-        goTo: b,
-        getIndex: () => N.current,
+        next: E,
+        prev: F,
+        goTo: I,
+        getIndex: () => k.current,
         getLength: () => s
       }),
-      [b, F, B, s]
+      [I, E, F, s]
     ), Y(() => {
       if (s === 0) return;
-      const e = D(J), t = W(e), r = window.requestAnimationFrame(() => {
-        k(), L(t, "auto"), v(e), S();
+      const e = q(J), t = D(e), r = window.requestAnimationFrame(() => {
+        b(), L(t, "auto"), m(e), S();
       });
       return () => window.cancelAnimationFrame(r);
     }, [
       s,
       J,
+      q,
       D,
-      W,
       L,
-      v,
+      m,
       S,
-      k
+      b
     ]), Y(() => {
       if (!c) return;
       const e = a.current;
       if (!e) return;
       const t = typeof ResizeObserver < "u" ? new ResizeObserver(() => {
-        k();
+        b();
       }) : null;
       t == null || t.observe(e), x.current.forEach((o) => o && (t == null ? void 0 : t.observe(o)));
-      const r = () => k();
+      const r = () => b();
       window.addEventListener("resize", r);
-      const n = window.requestAnimationFrame(() => k());
+      const n = window.requestAnimationFrame(() => b());
       return () => {
         window.removeEventListener("resize", r), window.cancelAnimationFrame(n), t == null || t.disconnect();
       };
-    }, [c, k]), Y(() => {
+    }, [c, b]), Y(() => {
       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(() => {
           var u;
           t.current = 0;
-          const n = z(), o = E(n), f = ((u = g[o]) == null ? void 0 : u.realIndex) ?? 0;
-          f !== N.current && v(f);
+          const n = W(), o = z(n), f = ((u = h[o]) == null ? void 0 : u.realIndex) ?? 0;
+          f !== k.current && m(f);
         })));
       };
       return e.addEventListener("scroll", r, { passive: !0 }), () => {
@@ -213,18 +213,18 @@ import '../../styles/Carousel.css';const Be = "_root_1kths_1", $e = "_viewport_1
       c,
       K,
       S,
+      W,
       z,
-      E,
-      g,
-      v
+      h,
+      m
     ]);
-    const Ne = (e) => e instanceof HTMLElement ? !!e.closest(
+    const ke = (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) => {
       var t, r, n, o;
-      R && a.current && (Ne(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 && (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)));
     }, Se = (e) => {
-      if (!R || !_.current || (e.preventDefault(), !a.current)) return;
+      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;
@@ -243,54 +243,52 @@ import '../../styles/Carousel.css';const Be = "_root_1kths_1", $e = "_viewport_1
         }
       X.current && (H.current = !0, window.setTimeout(() => {
         H.current = !1;
-      }, 0)), ne(!0), ye(), S();
+      }, 0)), ne(!0), Ne(), S();
     }, Ce = (e) => {
-      R && _.current && ce(e.pointerId);
+      y && _.current && ce(e.pointerId);
     }, Me = (e) => {
-      R && _.current && ce(e.pointerId);
+      y && _.current && ce(e.pointerId);
     }, Ae = (e) => {
       H.current && (e.preventDefault(), e.stopPropagation());
     }, Te = (e) => {
-      he && (e.key === "ArrowLeft" ? (e.preventDefault(), B()) : e.key === "ArrowRight" && (e.preventDefault(), F()));
-    }, De = {
+      we && (e.key === "ArrowLeft" ? (e.preventDefault(), F()) : e.key === "ArrowRight" && (e.preventDefault(), E()));
+    }, qe = {
       ...de ?? {},
-      "--carousel-gap": `${ve}px`,
+      "--carousel-gap": `${me}px`,
       "--carousel-slide-size": pe,
-      "--carousel-snap-align": h
+      "--carousel-snap-align": w
     };
-    return /* @__PURE__ */ ae("div", { className: C(d.root, ue), style: De, "aria-label": Q, children: [
-      me && s > 1 && /* @__PURE__ */ ae(We, { children: [
-        /* @__PURE__ */ I(
+    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(
           "button",
           {
             type: "button",
             className: C(d.navButton, d.navPrev),
-            onClick: B,
-            disabled: !ke,
+            onClick: F,
             "aria-label": "Précédent",
-            children: ge ?? /* @__PURE__ */ I("span", { "aria-hidden": !0, children: "‹" })
+            children: he ?? /* @__PURE__ */ R("span", { "aria-hidden": !0, children: "‹" })
           }
         ),
-        /* @__PURE__ */ I(
+        Re && /* @__PURE__ */ R(
           "button",
           {
             type: "button",
             className: C(d.navButton, d.navNext),
-            onClick: F,
-            disabled: !Ie,
+            onClick: E,
             "aria-label": "Suivant",
-            children: xe ?? /* @__PURE__ */ I("span", { "aria-hidden": !0, children: "›" })
+            children: xe ?? /* @__PURE__ */ R("span", { "aria-hidden": !0, children: "›" })
           }
         )
       ] }),
-      /* @__PURE__ */ I(
+      /* @__PURE__ */ R(
         "div",
         {
           ref: a,
           className: C(
             d.viewport,
-            R && d.dragEnabled,
-            Re && d.dragging,
+            y && d.dragEnabled,
+            ye && d.dragging,
             le
           ),
           tabIndex: 0,
@@ -303,7 +301,7 @@ import '../../styles/Carousel.css';const Be = "_root_1kths_1", $e = "_viewport_1
           onPointerUp: Ce,
           onPointerCancel: Me,
           onClickCapture: Ae,
-          children: g.map((e, t) => /* @__PURE__ */ I(
+          children: h.map((e, t) => /* @__PURE__ */ R(
             "div",
             {
               ref: (r) => {

package/dist/styles/Carousel.css

@@ -1 +1 @@
-._root_1kths_1{position:relative;width:100%}._viewport_1kths_6{display:flex;gap:var(--carousel-gap, 12px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px;scrollbar-width:none}._viewport_1kths_6::-webkit-scrollbar{display:none}._dragEnabled_1kths_22{cursor:grab;touch-action:pan-y}._dragging_1kths_27{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;-webkit-user-select:none;user-select:none}._slide_1kths_34{flex:0 0 var(--carousel-slide-size, 280px);width:var(--carousel-slide-size, 280px);scroll-snap-align:var(--carousel-snap-align, start);min-width:0}._navButton_1kths_41{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:36px;height:36px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#ffffffeb;box-shadow:0 2px 8px #00000026;cursor:pointer;-webkit-user-select:none;user-select:none}._navButton_1kths_41:disabled{opacity:.4;cursor:not-allowed}._navPrev_1kths_63{left:8px}._navNext_1kths_67{right:8px}
+._root_36mqp_6{position:relative;width:100%}._viewport_36mqp_11{display:flex;gap:var(--carousel-gap, 12px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px;scrollbar-width:none}._viewport_36mqp_11::-webkit-scrollbar{display:none}._dragEnabled_36mqp_27{cursor:grab;touch-action:pan-y}._dragging_36mqp_32{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;-webkit-user-select:none;user-select:none}._slide_36mqp_39{flex:0 0 var(--carousel-slide-size, 280px);width:var(--carousel-slide-size, 280px);scroll-snap-align:var(--carousel-snap-align, start);min-width:0}._navButton_36mqp_46{position:absolute;top:50%;transform:translateY(-50%);z-index:2;padding:.375rem;border:.75px solid var(--button-tertiary-default-border);border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--background-primary);box-shadow:0 2px 8px #00000026;cursor:pointer;-webkit-user-select:none;user-select:none}._navPrev_36mqp_63{left:8px}._navNext_36mqp_67{right:8px}

package/package.json

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