@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.78

package/dist/components/TimePicker/components/MeridianList/MeridianList.js

@@ -1,82 +1,91 @@
-import { jsx as D, jsxs as U } from "react/jsx-runtime";
-import { c as $ } from "../../../../compiler-runtime-DA41awpA.js";
-import { useRef as z } from "react";
-import { cn as h } from "../../../../utils/index.js";
-import { liVariants as L, buttonVariants as V } from "../../TimePicker.variants.js";
-import { useTimePickerContext as G } from "../../contexts/time-picker.hook.js";
-const H = (M) => {
-  const e = $.c(46), {
-    listClassName: T,
-    listItemClassName: s,
-    listItemButtonClassName: i,
-    onClose: K
-  } = M, S = z(null), {
-    format: g,
-    isAM: l,
-    onSelectAM: o,
-    onSelectPM: r
-  } = G(), B = J;
-  let A;
-  e[0] !== K || e[1] !== o || e[2] !== r ? (A = (t, E) => {
-    const R = S.current?.querySelectorAll("button");
-    if (!R)
-      return;
-    const q = t.key === "Tab" && !t.shiftKey, F = t.key === "Tab" && t.shiftKey;
-    t.key === "ArrowDown" || t.key === "ArrowUp" || q || F ? (t.preventDefault(), E ? R[1]?.focus() : R[0]?.focus()) : t.key === "Enter" && (t.preventDefault(), E ? o() : r(), K?.());
-  }, e[0] = K, e[1] = o, e[2] = r, e[3] = A) : A = e[3];
-  const a = A;
-  if (g === "24")
-    return null;
-  let n;
-  e[4] !== T ? (n = h("flex items-center justify-center flex-col", T), e[4] = T, e[5] = n) : n = e[5];
-  let c;
-  e[6] !== s ? (c = h(L({
-    className: s
-  })), e[6] = s, e[7] = c) : c = e[7];
-  const I = l ? 0 : -1;
-  let f;
-  e[8] !== l || e[9] !== i ? (f = h(V({
-    className: i
-  }), {
-    "dark:text-slate-50": !l
-  }), e[8] = l, e[9] = i, e[10] = f) : f = e[10];
-  let m;
-  e[11] !== o ? (m = (t) => B(t, o), e[11] = o, e[12] = m) : m = e[12];
-  let u;
-  e[13] !== a ? (u = (t) => a(t, !0), e[13] = a, e[14] = u) : u = e[14];
-  let p;
-  e[15] !== I || e[16] !== f || e[17] !== m || e[18] !== u ? (p = /* @__PURE__ */ D("button", { type: "button", role: "option", tabIndex: I, className: f, onClick: m, onKeyDown: u, children: "AM" }), e[15] = I, e[16] = f, e[17] = m, e[18] = u, e[19] = p) : p = e[19];
-  let d;
-  e[20] !== l || e[21] !== c || e[22] !== p ? (d = /* @__PURE__ */ D("li", { className: c, "data-active": l, role: "presentation", children: p }), e[20] = l, e[21] = c, e[22] = p, e[23] = d) : d = e[23];
-  let b;
-  e[24] !== s ? (b = h(L({
-    className: s
-  })), e[24] = s, e[25] = b) : b = e[25];
-  const j = !l, P = l ? -1 : 0;
-  let y;
-  e[26] !== l || e[27] !== i ? (y = h(V({
-    className: i
-  }), {
-    "dark:text-slate-50": l
-  }), e[26] = l, e[27] = i, e[28] = y) : y = e[28];
-  let N;
-  e[29] !== r ? (N = (t) => B(t, r), e[29] = r, e[30] = N) : N = e[30];
-  let k;
-  e[31] !== a ? (k = (t) => a(t, !1), e[31] = a, e[32] = k) : k = e[32];
-  let x;
-  e[33] !== P || e[34] !== y || e[35] !== N || e[36] !== k ? (x = /* @__PURE__ */ D("button", { type: "button", role: "option", tabIndex: P, className: y, onClick: N, onKeyDown: k, children: "PM" }), e[33] = P, e[34] = y, e[35] = N, e[36] = k, e[37] = x) : x = e[37];
-  let w;
-  e[38] !== b || e[39] !== j || e[40] !== x ? (w = /* @__PURE__ */ D("li", { className: b, "data-active": j, role: "presentation", children: x }), e[38] = b, e[39] = j, e[40] = x, e[41] = w) : w = e[41];
-  let C;
-  return e[42] !== w || e[43] !== n || e[44] !== d ? (C = /* @__PURE__ */ U("ul", { ref: S, className: n, "aria-label": "meridian", role: "listbox", children: [
-    d,
-    w
-  ] }), e[42] = w, e[43] = n, e[44] = d, e[45] = C) : C = e[45], C;
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import { useRef as A, useCallback as p } from "react";
+import { cn as t } from "../../../../utils/index.js";
+import { buttonVariants as b, liVariants as y } from "../../TimePicker.variants.js";
+import { useTimePickerContext as D } from "../../contexts/time-picker.hook.js";
+const M = ({
+  listClassName: k,
+  listItemClassName: n,
+  listItemButtonClassName: c,
+  onClose: f
+}) => {
+  const u = A(null), { format: w, isAM: r, onSelectAM: s, onSelectPM: i } = D(), m = p(
+    (e, a) => {
+      e.currentTarget?.blur(), a();
+    },
+    []
+  ), d = p(
+    (e, a) => {
+      const l = u.current?.querySelectorAll("button");
+      if (!l) return;
+      const x = e.key === "Tab" && !e.shiftKey, h = e.key === "Tab" && e.shiftKey;
+      e.key === "ArrowDown" || e.key === "ArrowUp" || x || h ? (e.preventDefault(), a ? l[1]?.focus() : l[0]?.focus()) : e.key === "Enter" && (e.preventDefault(), a ? s() : i(), f?.());
+    },
+    [s, i, f]
+  );
+  return w === "24" ? null : /* @__PURE__ */ N(
+    "ul",
+    {
+      ref: u,
+      className: t("flex items-center justify-center flex-col", k),
+      "aria-label": "meridian",
+      role: "listbox",
+      children: [
+        /* @__PURE__ */ o(
+          "li",
+          {
+            className: t(y({ className: n })),
+            "data-active": r,
+            role: "presentation",
+            children: /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                tabIndex: r ? 0 : -1,
+                className: t(
+                  b({ className: c }),
+                  {
+                    "dark:text-slate-50": !r
+                  }
+                ),
+                onClick: (e) => m(e, s),
+                onKeyDown: (e) => d(e, !0),
+                children: "AM"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o(
+          "li",
+          {
+            className: t(y({ className: n })),
+            "data-active": !r,
+            role: "presentation",
+            children: /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                tabIndex: r ? -1 : 0,
+                className: t(
+                  b({ className: c }),
+                  {
+                    "dark:text-slate-50": r
+                  }
+                ),
+                onClick: (e) => m(e, i),
+                onKeyDown: (e) => d(e, !1),
+                children: "PM"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
-H.displayName = "MeridianList";
-function J(M, e) {
-  M.currentTarget?.blur(), e();
-}
+M.displayName = "MeridianList";
 export {
-  H as MeridianList
+  M as MeridianList
 };

package/dist/components/TimePicker/components/MinutesList/MinutesList.js

@@ -1,79 +1,102 @@
-import { jsx as S } from "react/jsx-runtime";
-import { c as T } from "../../../../compiler-runtime-DA41awpA.js";
-import { useRef as D, useEffect as q } from "react";
-import { cn as $ } from "../../../../utils/index.js";
-import { ulVariants as V, buttonVariants as K, liVariants as L } from "../../TimePicker.variants.js";
-import { useTimePickerContext as N } from "../../contexts/time-picker.hook.js";
-const R = (v) => {
-  const t = T.c(17), {
-    minutes: i,
-    scrollBehavior: s,
-    onClose: a
-  } = v, c = D(null), A = D(i), {
-    isTyping: u,
-    onSelectMinute: n
-  } = N();
-  let f, m;
-  t[0] !== s ? (f = () => {
-    const e = c.current;
-    if (e) {
-      const r = `0${A.current}`.slice(-2);
-      e.querySelector(`[data-value="${r}"]`)?.scrollIntoView({
-        behavior: s,
+import { jsx as s } from "react/jsx-runtime";
+import { useRef as m, useEffect as p, useCallback as b } from "react";
+import { cn as c } from "../../../../utils/index.js";
+import { buttonVariants as h, liVariants as M, ulVariants as S } from "../../TimePicker.variants.js";
+import { useTimePickerContext as D } from "../../contexts/time-picker.hook.js";
+const $ = ({
+  minutes: o,
+  scrollBehavior: u,
+  onClose: l
+}) => {
+  const a = m(null), y = m(o), { isTyping: f, onSelectMinute: n } = D();
+  p(() => {
+    const t = a.current;
+    if (t) {
+      const e = `0${y.current}`.slice(-2);
+      t.querySelector(
+        `[data-value="${e}"]`
+      )?.scrollIntoView({
+        behavior: u,
         block: "center"
       });
     }
-  }, m = [s], t[0] = s, t[1] = f, t[2] = m) : (f = t[1], m = t[2]), q(f, m);
-  let p, y;
-  t[3] !== u || t[4] !== i ? (p = () => {
-    if (!u)
-      return;
-    const e = c.current;
-    if (e) {
-      const r = `0${i}`.slice(-2);
-      e.querySelector(`[data-value="${r}"]`)?.scrollIntoView({
+  }, [u]), p(() => {
+    if (!f) return;
+    const t = a.current;
+    if (t) {
+      const e = `0${o}`.slice(-2);
+      t.querySelector(
+        `[data-value="${e}"]`
+      )?.scrollIntoView({
         behavior: "instant",
         block: "center"
       });
     }
-  }, y = [i, u], t[3] = u, t[4] = i, t[5] = p, t[6] = y) : (p = t[5], y = t[6]), q(p, y);
-  let b;
-  t[7] !== n ? (b = (e, r) => {
-    n(e), r.currentTarget?.blur();
-  }, t[7] = n, t[8] = b) : b = t[8];
-  const k = b;
-  let d;
-  t[9] !== a || t[10] !== n ? (d = (e, r) => {
-    const l = c.current?.querySelectorAll("button");
-    if (!l)
-      return;
-    let o = r;
-    if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey)
-      e.preventDefault(), o = (r + 1) % 60;
-    else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey)
-      e.preventDefault(), o = (r - 1 + 60) % 60;
-    else if (e.key === "Enter") {
-      if (e.preventDefault(), n(r), a) {
-        a();
+  }, [o, f]);
+  const d = b(
+    (t, e) => {
+      n(t), e.currentTarget?.blur();
+    },
+    [n]
+  ), k = b(
+    (t, e) => {
+      const i = a.current?.querySelectorAll("button");
+      if (!i) return;
+      let r = e;
+      if (t.key === "ArrowDown" || t.key === "Tab" && !t.shiftKey)
+        t.preventDefault(), r = (e + 1) % 60;
+      else if (t.key === "ArrowUp" || t.key === "Tab" && t.shiftKey)
+        t.preventDefault(), r = (e - 1 + 60) % 60;
+      else if (t.key === "Enter") {
+        if (t.preventDefault(), n(e), l) {
+          l();
+          return;
+        }
+        document.querySelector('[aria-label="meridian"]')?.querySelector(
+          'li[data-active="true"] button'
+        )?.focus();
         return;
       }
-      document.querySelector('[aria-label="meridian"]')?.querySelector('li[data-active="true"] button')?.focus();
-      return;
+      r !== e && i[r]?.focus();
+    },
+    [n, l]
+  );
+  return /* @__PURE__ */ s(
+    "ul",
+    {
+      ref: a,
+      className: c(S()),
+      "aria-label": "minutes",
+      role: "listbox",
+      children: Array.from({ length: 60 }, (t, e) => {
+        const i = o === e;
+        return /* @__PURE__ */ s(
+          "li",
+          {
+            className: c(M()),
+            "data-value": `0${e}`.slice(-2),
+            "data-active": i,
+            role: "presentation",
+            children: /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                tabIndex: i ? 0 : -1,
+                className: c(h()),
+                onClick: (r) => d(e, r),
+                onKeyDown: (r) => k(r, e),
+                children: `0${e}`.slice(-2)
+              }
+            )
+          },
+          e
+        );
+      })
     }
-    o !== r && l[o]?.focus();
-  }, t[9] = a, t[10] = n, t[11] = d) : d = t[11];
-  const M = d;
-  let h;
-  t[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = $(V()), t[12] = h) : h = t[12];
-  let w;
-  return t[13] !== M || t[14] !== k || t[15] !== i ? (w = /* @__PURE__ */ S("ul", { ref: c, className: h, "aria-label": "minutes", role: "listbox", children: Array.from({
-    length: 60
-  }, (e, r) => {
-    const l = i === r;
-    return /* @__PURE__ */ S("li", { className: $(L()), "data-value": `0${r}`.slice(-2), "data-active": l, role: "presentation", children: /* @__PURE__ */ S("button", { type: "button", role: "option", tabIndex: l ? 0 : -1, className: $(K()), onClick: (o) => k(r, o), onKeyDown: (o) => M(o, r), children: `0${r}`.slice(-2) }) }, r);
-  }) }), t[13] = M, t[14] = k, t[15] = i, t[16] = w) : w = t[16], w;
+  );
 };
-R.displayName = "MinutesList";
+$.displayName = "MinutesList";
 export {
-  R as MinutesList
+  $ as MinutesList
 };