@dotss/tictoccroc 0.0.2 → 0.0.4

package/dist/shared/components/Carousel/Carousel.mjs

@@ -1,67 +1,67 @@
-import { jsxs as ce, jsx as k } from "react/jsx-runtime";
-import { useState as J, useRef as g, Children as Q, isValidElement as ie, useCallback as ae, useEffect as C, cloneElement as le } from "react";
+import { jsxs as le, jsx as A } from "react/jsx-runtime";
+import { useState as I, useRef as p, Children as Z, isValidElement as ue, useCallback as fe, useEffect as C, cloneElement as de } from "react";
 import { Flexbox as W } from "@dotss/ui";
-import ue from "@dotss/ui/core/useTheme";
-import fe from "./CarouselSlide/CarouselSlide.mjs";
-function ve({
-  children: Z,
-  spacing: _ = 2,
-  edgeSpacing: K = 4,
+import he from "@dotss/ui/core/useTheme";
+import me from "./CarouselSlide/CarouselSlide.mjs";
+function Ee({
+  children: _,
+  spacing: K = 2,
+  edgeSpacing: O = 4,
   rowCount: a = 2,
-  step: x = 1,
-  renderPagination: A,
-  ...O
+  step: D = 1,
+  renderPagination: z,
+  ...T
 }) {
-  const { spacing: z } = ue(), [l, $] = J(1), [w, ee] = J(0), L = g(null), o = g(null), u = g(null), I = g(0), Y = g(0), R = g(0), b = g(!1), T = g(!0), D = g(0), v = z.content(_), y = z.content(K), X = Q.toArray(Z).filter(ie).filter((e) => e.type === fe), M = X.length, F = (e, t) => {
-    I.current = e, Y.current = t;
+  const { spacing: $ } = he(), [l, Y] = I(1), [S, ee] = I(0), [te, ne] = I(0), x = p(null), o = p(null), u = p(null), X = p(0), F = p(0), w = p(0), b = p(!1), L = p(!0), k = p(0), v = $.content(K), y = $.content(O), N = Z.toArray(_).filter(ue).filter((e) => e.type === me), M = N.length, j = (e, t) => {
+    X.current = e, F.current = t;
   }, P = () => {
     var s;
     if (!o.current || !b.current) return;
-    const e = (((s = u.current) == null ? void 0 : s.offsetWidth) || 0) * 0.01, t = -R.current >= e && l + 1 <= w, r = -R.current <= -e && l - 1 >= 1;
-    b.current = !1, T.current = !1, R.current = 0;
+    const e = (((s = u.current) == null ? void 0 : s.offsetWidth) || 0) * 0.01, t = -w.current >= e && l + 1 <= S, n = -w.current <= -e && l - 1 >= 1;
+    b.current = !1, L.current = !1, w.current = 0;
     let c = l;
-    t ? c = l + 1 : r ? c = l - 1 : T.current = !0, o.current.style.transition = "transform 0.2s", o.current.style.cursor = "grab", S(c);
-  }, S = ae(
+    t ? c = l + 1 : n ? c = l - 1 : L.current = !0, o.current.style.transition = "transform 0.2s", o.current.style.cursor = "grab", R(c);
+  }, R = fe(
     (e, t = 0) => {
-      var h, m, E;
+      var h, g, E;
       if (!o.current) return;
-      $(e);
-      const r = e === 1, c = e === w, s = (((h = L.current) == null ? void 0 : h.offsetWidth) || 0) - y, f = (((E = (m = u.current) == null ? void 0 : m.children[0]) == null ? void 0 : E.clientWidth) || 0) + v, i = (s - f * Math.floor(s / f) - v) / 2, d = f * (e - 1) - i;
-      r ? o.current.style.transform = `translate3d(${t}px, 0, 0)` : c ? o.current.style.transform = `translate3d(${-(d - i) + t}px, 0, 0)` : o.current.style.transform = `translate3d(${-d + t}px, 0, 0)`;
+      Y(e);
+      const n = e === 1, c = e === S, s = (((h = x.current) == null ? void 0 : h.offsetWidth) || 0) - y, f = (((E = (g = u.current) == null ? void 0 : g.children[0]) == null ? void 0 : E.clientWidth) || 0) + v, i = (s - f * Math.floor(s / f) - v) / 2, d = f * (e - 1) - i;
+      n ? o.current.style.transform = `translate3d(${t}px, 0, 0)` : c ? o.current.style.transform = `translate3d(${-(d - i) + t}px, 0, 0)` : o.current.style.transform = `translate3d(${-d + t}px, 0, 0)`;
     },
-    [y, v, w]
-  ), te = (e) => F(e.touches[0].clientX, e.touches[0].clientY), ne = (e) => {
-    b.current = !0, F(e.clientX, e.clientY);
-  }, re = (e) => {
-    o.current && (o.current.style.transition = "transform 0.2s", o.current.style.cursor = "grab", S(e));
-  }, se = (e) => (t) => {
-    var N, U, q, G, V, B;
+    [y, v, S]
+  ), re = (e) => j(e.touches[0].clientX, e.touches[0].clientY), se = (e) => {
+    b.current = !0, j(e.clientX, e.clientY);
+  }, oe = (e) => {
+    o.current && (o.current.style.transition = "transform 0.2s", o.current.style.cursor = "grab", R(e));
+  }, ce = (e) => (t) => {
+    var q, G, V, B, H, J;
     t.stopPropagation();
-    const r = Array.from(((N = u.current) == null ? void 0 : N.children) || []).indexOf(t.currentTarget), c = (((U = L.current) == null ? void 0 : U.offsetWidth) || 0) - y * 2, s = (((G = (q = u.current) == null ? void 0 : q.children[0]) == null ? void 0 : G.clientWidth) || 0) + v, i = Math.floor(c / (s / x)) * a, d = (l - 1) * i, h = d + i - 1, m = ((V = u.current) == null ? void 0 : V.children.length) || 0, E = r % a, j = Math.floor(r / a);
-    let p = r;
+    const n = Array.from(((q = u.current) == null ? void 0 : q.children) || []).indexOf(t.currentTarget), c = (((G = x.current) == null ? void 0 : G.offsetWidth) || 0) - y * 2, s = (((B = (V = u.current) == null ? void 0 : V.children[0]) == null ? void 0 : B.clientWidth) || 0) + v, i = Math.floor(c / (s / D)) * a, d = (l - 1) * i, h = d + i - 1, g = ((H = u.current) == null ? void 0 : H.children.length) || 0, E = n % a, U = Math.floor(n / a);
+    let m = n;
     switch (t.key) {
       case "ArrowRight": {
         t.preventDefault();
-        const n = (j + 1) * a + E;
-        n < m && (p = n);
+        const r = (U + 1) * a + E;
+        r < g && (m = r);
         break;
       }
       case "ArrowLeft": {
         t.preventDefault();
-        const n = (j - 1) * a + E;
-        n >= 0 && (p = n);
+        const r = (U - 1) * a + E;
+        r >= 0 && (m = r);
         break;
       }
       case "ArrowDown": {
         t.preventDefault();
-        const n = r + 1;
-        n < m && n % a > E && (p = n);
+        const r = n + 1;
+        r < g && r % a > E && (m = r);
         break;
       }
       case "ArrowUp": {
         t.preventDefault();
-        const n = r - 1;
-        n >= 0 && n % a < E && (p = n);
+        const r = n - 1;
+        r >= 0 && r % a < E && (m = r);
         break;
       }
       case "Enter":
@@ -72,55 +72,58 @@ function ve({
       default:
         return;
     }
-    if (p >= d && p <= h) {
-      const n = (B = u.current) == null ? void 0 : B.children[p];
-      n == null || n.focus();
+    if (m >= d && m <= h) {
+      const r = (J = u.current) == null ? void 0 : J.children[m];
+      r == null || r.focus();
       return;
     }
-    p >= 0 && p < m && (D.current = requestAnimationFrame(() => {
-      var H;
-      const n = (H = u.current) == null ? void 0 : H.children[p];
-      n == null || n.focus();
+    m >= 0 && m < g && (k.current = requestAnimationFrame(() => {
+      var Q;
+      const r = (Q = u.current) == null ? void 0 : Q.children[m];
+      r == null || r.focus();
     })), e == null || e(t);
-  }, oe = (e) => {
-    e.propertyName === "transform" && (T.current = !0);
+  }, ie = (e) => {
+    e.propertyName === "transform" && (L.current = !0);
+  }, ae = (e) => (t) => {
+    const n = Number(t.currentTarget.getAttribute("aria-posinset")) - 1;
+    ne(n), e == null || e(t);
   };
   return C(() => {
-    const e = () => S(l);
+    const e = () => R(l);
     return e(), window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
-  }, [S, l]), C(() => {
+  }, [R, l]), C(() => {
     const e = () => {
       var i, d, h;
-      const t = (((i = L.current) == null ? void 0 : i.offsetWidth) || 0) - y * 2, r = (((h = (d = u.current) == null ? void 0 : d.children[0]) == null ? void 0 : h.clientWidth) || 0) + v, c = Math.floor(t / (r / x)), s = Math.ceil(M / (a || 1)), f = Math.max(s - (c - 1), 1);
-      $((m) => m > f ? f : m), ee(f);
+      const t = (((i = x.current) == null ? void 0 : i.offsetWidth) || 0) - y * 2, n = (((h = (d = u.current) == null ? void 0 : d.children[0]) == null ? void 0 : h.clientWidth) || 0) + v, c = Math.floor(t / (n / D)), s = Math.ceil(M / (a || 1)), f = Math.max(s - (c - 1), 1);
+      Y((g) => g > f ? f : g), ee(f);
     };
     return e(), window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
-  }, [y, v, M, x, a]), C(() => {
+  }, [y, v, M, D, a]), C(() => {
     const e = o.current, t = (s, f, i) => {
-      if (!e || w <= 1) return;
-      e.style.transition = "none", e.style.cursor = "grabbing", R.current = s - I.current;
-      const d = f - Y.current, h = 5;
-      b.current = b.current || Math.abs(R.current) > h && Math.abs(d) < h * 2, b.current && (i.cancelable && (i.stopPropagation(), i.preventDefault()), e.style.transition = "none", e.style.cursor = "grabbing", S(l, R.current));
-    }, r = (s) => t(s.touches[0].clientX, s.touches[0].clientY, s), c = (s) => {
+      if (!e || S <= 1) return;
+      e.style.transition = "none", e.style.cursor = "grabbing", w.current = s - X.current;
+      const d = f - F.current, h = 5;
+      b.current = b.current || Math.abs(w.current) > h && Math.abs(d) < h * 2, b.current && (i.cancelable && (i.stopPropagation(), i.preventDefault()), e.style.transition = "none", e.style.cursor = "grabbing", R(l, w.current));
+    }, n = (s) => t(s.touches[0].clientX, s.touches[0].clientY, s), c = (s) => {
       b.current && t(s.clientX, s.clientY, s);
     };
-    return e && (e.addEventListener("mousemove", c), e.addEventListener("touchmove", r)), () => {
-      e && (e.removeEventListener("mousemove", c), e.removeEventListener("touchmove", r));
+    return e && (e.addEventListener("mousemove", c), e.addEventListener("touchmove", n)), () => {
+      e && (e.removeEventListener("mousemove", c), e.removeEventListener("touchmove", n));
     };
-  }, [S, l, w]), C(() => () => {
-    D.current && cancelAnimationFrame(D.current);
+  }, [R, l, S]), C(() => () => {
+    k.current && cancelAnimationFrame(k.current);
   }, []), C(() => {
-    const e = u.current, t = (r) => {
-      T.current || r.stopPropagation();
+    const e = u.current, t = (n) => {
+      L.current || n.stopPropagation();
     };
     return e == null || e.addEventListener("click", t), () => {
       e == null || e.removeEventListener("click", t);
     };
-  }, []), /* @__PURE__ */ ce(
+  }, []), /* @__PURE__ */ le(
     W,
     {
       flexDirection: "column",
@@ -128,29 +131,30 @@ function ve({
       "aria-roledescription": "carousel",
       "aria-label": "슬라이더",
       flexGrow: 1,
+      ...T,
       inlineCSS: {
-        width: "100%"
+        width: "100%",
+        ...T == null ? void 0 : T.inlineCSS
       },
-      ...O,
       children: [
-        /* @__PURE__ */ k(
+        /* @__PURE__ */ A(
           W,
           {
-            ref: L,
+            ref: x,
             inlineCSS: {
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ k(
+            children: /* @__PURE__ */ A(
               W,
               {
                 ref: o,
-                onMouseDown: ne,
+                onMouseDown: se,
                 onMouseUp: P,
                 onMouseLeave: P,
-                onTouchStart: te,
+                onTouchStart: re,
                 onTouchEnd: P,
                 onTouchCancel: P,
-                onTransitionEnd: oe,
+                onTransitionEnd: ie,
                 inlineCSS: {
                   gap: v,
                   paddingLeft: y,
@@ -159,7 +163,7 @@ function ve({
                   transform: "translate3d(0, 0, 0)",
                   cursor: "grab"
                 },
-                children: /* @__PURE__ */ k(
+                children: /* @__PURE__ */ A(
                   W,
                   {
                     ref: u,
@@ -169,21 +173,22 @@ function ve({
                       gridTemplateRows: "min-content",
                       transform: "translate3d(0, 0, 0)"
                     },
-                    children: Q.map(
-                      X,
+                    children: Z.map(
+                      N,
                       (e, t) => {
-                        var r;
-                        return le(e, {
+                        var n;
+                        return de(e, {
                           role: "listitem",
-                          tabIndex: 0,
+                          tabIndex: t === te ? 0 : -1,
                           "aria-roledescription": "slide",
                           "aria-label": `${M}개 중 ${t + 1}번째 슬라이드`,
                           "aria-posinset": t + 1,
                           "aria-setsize": M,
-                          onKeyDown: se(e.props.onKeyDown),
+                          onKeyDown: ce(e.props.onKeyDown),
+                          onFocus: ae(e.props.onFocus),
                           ...e.props,
                           style: {
-                            ...(r = e.props) == null ? void 0 : r.style,
+                            ...(n = e.props) == null ? void 0 : n.style,
                             gridRow: `${t % a + 1} / ${t % a + 1}`
                           }
                         });
@@ -195,11 +200,11 @@ function ve({
             )
           }
         ),
-        typeof A == "function" && A({ page: l, totalPages: w, onChange: re })
+        typeof z == "function" && z({ page: l, totalPages: S, onChange: oe })
       ]
     }
   );
 }
 export {
-  ve as default
+  Ee as default
 };