@konstructio/ui 0.1.2-alpha.51 → 0.1.2-alpha.53

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

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

package/dist/components/TimePicker/components/HoursList/HoursList.types.d.ts

@@ -0,0 +1,8 @@
+import { TimePickerProps } from '../../TimePicker.types';
+export type HourListProps = {
+    hours: number;
+    scrollBehavior?: TimePickerProps['scrollBehavior'];
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+};

package/dist/components/TimePicker/components/MeridianList/MeridianList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MeridianListProps } from './MeridianList.types';
+declare const MeridianList: FC<MeridianListProps>;
+export { MeridianList };

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

@@ -1,67 +1,81 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { useCallback as b } from "react";
+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 n, liVariants as s } from "../../TimePicker.variants.js";
-import { useTimePickerContext as x } from "../../contexts/time-picker.hook.js";
-const N = ({
-  listClassName: c,
-  listItemClassName: i,
-  listItemButtonClassName: l
+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 { format: m, isAM: a, onSelectAM: d, onSelectPM: p } = x(), o = b(
-    (e, u) => {
-      e.currentTarget?.blur(), u();
+  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 m === "24" ? null : /* @__PURE__ */ f(
+  return w === "24" ? null : /* @__PURE__ */ N(
     "ul",
     {
-      className: t("flex items-center justify-center flex-col", c),
+      ref: u,
+      className: t("flex items-center justify-center flex-col", k),
       "aria-label": "meridian",
       role: "listbox",
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ o(
           "li",
           {
-            className: t(s({ className: i })),
-            "data-active": a,
+            className: t(y({ className: n })),
+            "data-active": r,
             role: "presentation",
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ o(
               "button",
               {
                 type: "button",
                 role: "option",
+                tabIndex: r ? 0 : -1,
                 className: t(
-                  n({ className: l }),
+                  b({ className: c }),
                   {
-                    "dark:text-slate-50": !a
+                    "dark:text-slate-50": !r
                   }
                 ),
-                onClick: (e) => o(e, d),
+                onClick: (e) => m(e, s),
+                onKeyDown: (e) => d(e, !0),
                 children: "AM"
               }
             )
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ o(
           "li",
           {
-            className: t(s({ className: i })),
-            "data-active": !a,
+            className: t(y({ className: n })),
+            "data-active": !r,
             role: "presentation",
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ o(
               "button",
               {
                 type: "button",
                 role: "option",
+                tabIndex: r ? -1 : 0,
                 className: t(
-                  n({ className: l }),
+                  b({ className: c }),
                   {
-                    "dark:text-slate-50": a
+                    "dark:text-slate-50": r
                   }
                 ),
-                onClick: (e) => o(e, p),
+                onClick: (e) => m(e, i),
+                onKeyDown: (e) => d(e, !1),
                 children: "PM"
               }
             )
@@ -71,7 +85,7 @@ const N = ({
     }
   );
 };
-N.displayName = "MeridianList";
+M.displayName = "MeridianList";
 export {
-  N as MeridianList
+  M as MeridianList
 };

package/dist/components/TimePicker/components/MeridianList/MeridianList.types.d.ts

@@ -0,0 +1,7 @@
+import { TimePickerProps } from '../../TimePicker.types';
+export type MeridianListProps = {
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+    onClose?: () => void;
+};

package/dist/components/TimePicker/components/MinutesList/MinutesList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MinutesLitProps } from './MinutesList.types';
+declare const MinutesList: FC<MinutesLitProps>;
+export { MinutesList };

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

@@ -1,59 +1,102 @@
-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();
+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 = l.current;
+    const t = a.current;
     if (t) {
-      const e = `0${u.current}`.slice(-2);
+      const e = `0${y.current}`.slice(-2);
       t.querySelector(
         `[data-value="${e}"]`
       )?.scrollIntoView({
-        behavior: a,
+        behavior: u,
         block: "center"
       });
     }
-  }, [a]);
-  const m = f(
+  }, [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"
+      });
+    }
+  }, [o, f]);
+  const d = b(
+    (t, e) => {
+      n(t), e.currentTarget?.blur();
+    },
+    [n]
+  ), k = b(
     (t, e) => {
-      s(t), e.currentTarget?.blur();
+      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;
+      }
+      r !== e && i[r]?.focus();
     },
-    [s]
+    [n, l]
   );
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     "ul",
     {
-      ref: l,
-      className: o(d()),
+      ref: a,
+      className: c(S()),
       "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
-      ))
+      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
+        );
+      })
     }
   );
 };
-y.displayName = "MinutesList";
+$.displayName = "MinutesList";
 export {
-  y as MinutesList
+  $ as MinutesList
 };

package/dist/components/TimePicker/components/MinutesList/MinutesList.types.d.ts

@@ -0,0 +1,9 @@
+import { TimePickerProps } from '../../TimePicker.types';
+export type MinutesLitProps = {
+    minutes: number;
+    scrollBehavior?: TimePickerProps['scrollBehavior'];
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+    onClose?: () => void;
+};

package/dist/components/TimePicker/components/Wrapper/Wrapper.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { WrapperProps } from './Wrapper.types';
+export declare const Wrapper: FC<WrapperProps>;