@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

package/dist/components/TimePicker/components/HoursList/HoursList.js

@@ -1,88 +1,99 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useRef as p, useCallback as v, useEffect as y } from "react";
-import { cn as o } from "../../../../utils/index.js";
-import { buttonVariants as b, liVariants as d, ulVariants as h } from "../../TimePicker.variants.js";
-import { useTimePickerContext as k } from "../../contexts/time-picker.hook.js";
-const H = ({ hours: l, scrollBehavior: i }) => {
-  const n = p(null), u = p(!0), { format: c, onSelectHour: m } = k(), s = c === "12" && l >= 12 ? l - 12 : l, f = v(
-    (r, t) => {
-      r.currentTarget?.blur(), m(t);
-    },
-    [m]
-  );
-  if (y(() => {
-    if (u.current) {
-      const r = n.current, t = s === 0 && c === "12" ? 12 : s;
-      r && r.querySelector(
-        `[data-value="${`0${t}`.slice(-2)}"]`
-      )?.scrollIntoView({
-        behavior: i,
-        block: "center"
-      }), u.current = !1;
+import { t as s } from "../../../../utils-DHuiYnx1.js";
+import { useTimePickerContext as v } from "../../contexts/time-picker.hook.js";
+import { buttonVariants as k, liVariants as d, ulVariants as H } from "../../TimePicker.variants.js";
+import { useCallback as A, useEffect as D, useRef as N } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var $ = ({ hours: a, scrollBehavior: m }) => {
+  const c = N(null), S = N(a), { format: l, isTyping: p, onSelectHour: n } = v(), b = l === "12" && a >= 12 ? a - 12 : a, u = l === "12" ? 12 : 24, y = A((e, t) => {
+    e.currentTarget?.blur(), n(t);
+  }, [n]), w = A((e, t) => {
+    const r = c.current?.querySelectorAll("button");
+    if (!r) return;
+    let o = t;
+    if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey)
+      e.preventDefault(), o = (t + 1) % u;
+    else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey)
+      e.preventDefault(), o = (t - 1 + u) % u;
+    else if (e.key === "Enter") {
+      e.preventDefault(), n(l === "12" ? t + 1 : t), document.querySelector('[aria-label="minutes"]')?.querySelector('li[data-active="true"] button')?.focus();
+      return;
     }
-  }, [c, s, i]), c === "12") {
-    const r = s === 0 ? 12 : s;
-    return /* @__PURE__ */ a(
-      "ul",
-      {
-        ref: n,
-        className: o(h()),
-        "aria-label": "hours",
-        role: "listbox",
-        children: Array.from({ length: 12 }, (t, e) => /* @__PURE__ */ a(
-          "li",
-          {
-            className: o(d()),
-            "data-value": `0${e + 1}`.slice(-2),
-            "data-active": r - 1 === e,
-            role: "presentation",
-            children: /* @__PURE__ */ a(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                className: o(b()),
-                onClick: (N) => f(N, e + 1),
-                children: e + 1
-              }
-            )
-          },
-          e
-        ))
-      }
-    );
-  }
-  return /* @__PURE__ */ a(
-    "ul",
-    {
-      ref: n,
-      className: o(h()),
+    o !== t && r[o]?.focus();
+  }, [
+    l,
+    u,
+    n
+  ]);
+  if (D(() => {
+    const e = c.current, t = S.current, r = l === "12" && t >= 12 ? t - 12 : t, o = r === 0 && l === "12" ? 12 : r;
+    e && e.querySelector(`[data-value="${`0${o}`.slice(-2)}"]`)?.scrollIntoView({
+      behavior: m,
+      block: "center"
+    });
+  }, [l, m]), D(() => {
+    if (!p) return;
+    const e = c.current, t = l === "12" && a >= 12 ? a - 12 : a, r = t === 0 && l === "12" ? 12 : t;
+    e && e.querySelector(`[data-value="${`0${r}`.slice(-2)}"]`)?.scrollIntoView({
+      behavior: "instant",
+      block: "center"
+    });
+  }, [
+    a,
+    l,
+    p
+  ]), l === "12") {
+    const e = b === 0 ? 12 : b;
+    return /* @__PURE__ */ i("ul", {
+      ref: c,
+      className: s(H()),
       "aria-label": "hours",
       role: "listbox",
-      children: Array.from({ length: 24 }, (r, t) => /* @__PURE__ */ a(
-        "li",
-        {
-          className: o(d()),
-          "data-value": `0${t}`.slice(-2),
-          "data-active": l === t,
+      children: Array.from({ length: 12 }, (t, r) => {
+        const o = e - 1 === r;
+        return /* @__PURE__ */ i("li", {
+          className: s(d()),
+          "data-value": `0${r + 1}`.slice(-2),
+          "data-active": o,
           role: "presentation",
-          children: /* @__PURE__ */ a(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              className: o(b()),
-              onClick: (e) => f(e, t),
-              children: t
-            }
-          )
-        },
-        t
-      ))
-    }
-  );
+          children: /* @__PURE__ */ i("button", {
+            type: "button",
+            role: "option",
+            tabIndex: o ? 0 : -1,
+            className: s(k()),
+            onClick: (f) => y(f, r + 1),
+            onKeyDown: (f) => w(f, r),
+            children: r + 1
+          })
+        }, r);
+      })
+    });
+  }
+  return /* @__PURE__ */ i("ul", {
+    ref: c,
+    className: s(H()),
+    "aria-label": "hours",
+    role: "listbox",
+    children: Array.from({ length: 24 }, (e, t) => {
+      const r = a === t;
+      return /* @__PURE__ */ i("li", {
+        className: s(d()),
+        "data-value": `0${t}`.slice(-2),
+        "data-active": r,
+        role: "presentation",
+        children: /* @__PURE__ */ i("button", {
+          type: "button",
+          role: "option",
+          tabIndex: r ? 0 : -1,
+          className: s(k()),
+          onClick: (o) => y(o, t),
+          onKeyDown: (o) => w(o, t),
+          children: t
+        })
+      }, t);
+    })
+  });
 };
-H.displayName = "HoursList";
+$.displayName = "HoursList";
 export {
-  H as HoursList
+  $ as HoursList
 };

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

@@ -1,67 +1,56 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { useCallback as b } from "react";
-import { cn as t } from "../../../../utils/index.js";
-import { buttonVariants as n, liVariants as c } from "../../TimePicker.variants.js";
+import { t } from "../../../../utils-DHuiYnx1.js";
 import { useTimePickerContext as N } from "../../contexts/time-picker.hook.js";
-const x = ({
-  listClassName: s,
-  listItemClassName: a,
-  listItemButtonClassName: i
-}) => {
-  const { format: m, isAM: l, onSelectAM: p, onSelectPM: u } = N(), o = b(
-    (e, d) => {
-      e.currentTarget?.blur(), d();
-    },
-    []
-  );
-  return m === "24" ? null : /* @__PURE__ */ f(
-    "ul",
-    {
-      className: t("flex items-center justify-center flex-col", s),
-      "aria-label": "meridian",
-      role: "listbox",
-      children: [
-        /* @__PURE__ */ r(
-          "li",
-          {
-            className: t(c({ className: a })),
-            "data-active": l,
-            role: "presentation",
-            children: /* @__PURE__ */ r(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                className: t(n({ className: i })),
-                onClick: (e) => o(e, p),
-                children: "AM"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ r(
-          "li",
-          {
-            className: t(c({ className: a })),
-            "data-active": !l,
-            role: "presentation",
-            children: /* @__PURE__ */ r(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                className: t(n({ className: i })),
-                onClick: (e) => o(e, u),
-                children: "PM"
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+import { buttonVariants as p, liVariants as b } from "../../TimePicker.variants.js";
+import { useCallback as y, useRef as D } from "react";
+import { jsx as o, jsxs as M } from "react/jsx-runtime";
+var T = ({ listClassName: k, listItemClassName: n, listItemButtonClassName: c, onClose: f }) => {
+  const u = D(null), { format: x, isAM: r, onSelectAM: l, onSelectPM: s } = N(), m = y((e, a) => {
+    e.currentTarget?.blur(), a();
+  }, []), d = y((e, a) => {
+    const i = u.current?.querySelectorAll("button");
+    if (!i) return;
+    const h = e.key === "Tab" && !e.shiftKey, w = e.key === "Tab" && e.shiftKey;
+    e.key === "ArrowDown" || e.key === "ArrowUp" || h || w ? (e.preventDefault(), a ? i[1]?.focus() : i[0]?.focus()) : e.key === "Enter" && (e.preventDefault(), a ? l() : s(), f?.());
+  }, [
+    l,
+    s,
+    f
+  ]);
+  return x === "24" ? null : /* @__PURE__ */ M("ul", {
+    ref: u,
+    className: t("flex items-center justify-center flex-col", k),
+    "aria-label": "meridian",
+    role: "listbox",
+    children: [/* @__PURE__ */ o("li", {
+      className: t(b({ className: n })),
+      "data-active": r,
+      role: "presentation",
+      children: /* @__PURE__ */ o("button", {
+        type: "button",
+        role: "option",
+        tabIndex: r ? 0 : -1,
+        className: t(p({ className: c }), { "dark:text-slate-50": !r }),
+        onClick: (e) => m(e, l),
+        onKeyDown: (e) => d(e, !0),
+        children: "AM"
+      })
+    }), /* @__PURE__ */ o("li", {
+      className: t(b({ className: n })),
+      "data-active": !r,
+      role: "presentation",
+      children: /* @__PURE__ */ o("button", {
+        type: "button",
+        role: "option",
+        tabIndex: r ? -1 : 0,
+        className: t(p({ className: c }), { "dark:text-slate-50": r }),
+        onClick: (e) => m(e, s),
+        onKeyDown: (e) => d(e, !1),
+        children: "PM"
+      })
+    })]
+  });
 };
-x.displayName = "MeridianList";
+T.displayName = "MeridianList";
 export {
-  x as MeridianList
+  T as MeridianList
 };

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

@@ -1,59 +1,76 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useRef as c, useEffect as p, useCallback as f } from "react";
-import { cn as o } from "../../../../utils/index.js";
-import { buttonVariants as b, liVariants as h, ulVariants as d } from "../../TimePicker.variants.js";
-import { useTimePickerContext as k } from "../../contexts/time-picker.hook.js";
-const y = ({ minutes: n, scrollBehavior: a }) => {
-  const l = c(null), u = c(n), { onSelectMinute: s } = k();
-  p(() => {
-    const t = l.current;
+import { t as s } from "../../../../utils-DHuiYnx1.js";
+import { useTimePickerContext as h } from "../../contexts/time-picker.hook.js";
+import { buttonVariants as d, liVariants as M, ulVariants as S } from "../../TimePicker.variants.js";
+import { useCallback as p, useEffect as b, useRef as m } from "react";
+import { jsx as c } from "react/jsx-runtime";
+var D = ({ minutes: o, scrollBehavior: u, onClose: n }) => {
+  const i = m(null), y = m(o), { isTyping: f, onSelectMinute: l } = h();
+  b(() => {
+    const t = i.current;
     if (t) {
-      const e = `0${u.current}`.slice(-2);
-      t.querySelector(
-        `[data-value="${e}"]`
-      )?.scrollIntoView({
-        behavior: a,
+      const e = `0${y.current}`.slice(-2);
+      t.querySelector(`[data-value="${e}"]`)?.scrollIntoView({
+        behavior: u,
         block: "center"
       });
     }
-  }, [a]);
-  const m = f(
-    (t, e) => {
-      s(t), e.currentTarget?.blur();
-    },
-    [s]
-  );
-  return /* @__PURE__ */ r(
-    "ul",
-    {
-      ref: l,
-      className: o(d()),
-      "aria-label": "minutes",
-      role: "listbox",
-      children: Array.from({ length: 60 }, (t, e) => /* @__PURE__ */ r(
-        "li",
-        {
-          className: o(h()),
-          "data-value": `0${e}`.slice(-2),
-          "data-active": n === e,
-          role: "presentation",
-          children: /* @__PURE__ */ r(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              className: o(b()),
-              onClick: (i) => m(e, i),
-              children: `0${e}`.slice(-2)
-            }
-          )
-        },
-        e
-      ))
+  }, [u]), b(() => {
+    if (!f) return;
+    const t = i.current;
+    if (t) {
+      const e = `0${o}`.slice(-2);
+      t.querySelector(`[data-value="${e}"]`)?.scrollIntoView({
+        behavior: "instant",
+        block: "center"
+      });
+    }
+  }, [o, f]);
+  const k = p((t, e) => {
+    l(t), e.currentTarget?.blur();
+  }, [l]), w = p((t, e) => {
+    const a = i.current?.querySelectorAll("button");
+    if (!a) 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(), l(e), n) {
+        n();
+        return;
+      }
+      document.querySelector('[aria-label="meridian"]')?.querySelector('li[data-active="true"] button')?.focus();
+      return;
     }
-  );
+    r !== e && a[r]?.focus();
+  }, [l, n]);
+  return /* @__PURE__ */ c("ul", {
+    ref: i,
+    className: s(S()),
+    "aria-label": "minutes",
+    role: "listbox",
+    children: Array.from({ length: 60 }, (t, e) => {
+      const a = o === e;
+      return /* @__PURE__ */ c("li", {
+        className: s(M()),
+        "data-value": `0${e}`.slice(-2),
+        "data-active": a,
+        role: "presentation",
+        children: /* @__PURE__ */ c("button", {
+          type: "button",
+          role: "option",
+          tabIndex: a ? 0 : -1,
+          className: s(d()),
+          onClick: (r) => k(e, r),
+          onKeyDown: (r) => w(r, e),
+          children: `0${e}`.slice(-2)
+        })
+      }, e);
+    })
+  });
 };
-y.displayName = "MinutesList";
+D.displayName = "MinutesList";
 export {
-  y as MinutesList
+  D as MinutesList
 };