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

package/dist/components/Select/components/Wrapper.js

@@ -12,116 +12,239 @@ import { useSelectContext as ve } from "../contexts/select.hook.js";
 const Ne = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], Ce = de("search", Ne), Re = re(({
-  additionalOptions: z,
-  className: O,
-  defaultValue: x,
-  disabled: t = !1,
-  error: f,
-  groupedOptions: R,
-  iconClassName: F,
-  inputClassName: S,
-  isInfiniteScrollEnabled: T = !1,
-  isLoading: g,
-  isRequired: h,
-  label: v,
-  labelAction: E,
-  labelClassName: M,
-  labelWrapperClassName: W,
-  listClassName: _,
-  listItemClassName: $,
-  listItemSecondRowClassName: H,
-  name: d,
-  noOptionsText: P,
-  placeholder: N,
-  searchable: k = !1,
-  showSearchIcon: C,
-  theme: U,
-  visibleItems: q,
-  wrapperClassName: A,
-  onFetchMoreOptions: B,
-  onBlur: D,
-  onSearchChange: G,
-  ...y
-}, J) => {
-  const I = ne(), c = w(null), j = w(null), K = w(0), {
-    isOpen: i,
-    options: l,
-    searchTerm: Q,
-    value: s,
-    setCanFilter: X,
-    setSearchTerm: Y,
-    setValue: m,
-    toggleOpen: Z
-  } = ve(), e = le(() => l.find(({
-    value: a
-  }) => a === s), [l, s]), {
-    wrapperRef: ee,
-    wrapperInputRef: L,
-    handleOpen: V
-  } = ue({
-    ulRef: j,
-    inputRef: c,
-    disabled: t,
-    internalValue: e,
-    onBlur: D
-  }), p = d ? `${I}-${d}` : I;
-  se(J, () => c.current, [c]), oe(() => {
-    if (x && !s) {
-      const a = l && l.find((u) => u.value === x);
-      a && m(a.value);
-    }
-  }, [x, l, m, s]);
-  const te = (a) => {
-    const u = a.target.value;
-    X(!0), m(""), Y(u ?? ""), G?.(u);
-    const b = l.find((ae) => ae.value.toLocaleLowerCase() === u.toLocaleLowerCase());
-    m(b ? b.value : e?.value ?? "");
-  };
-  return /* @__PURE__ */ o("div", { ref: ee, className: n("flex flex-col gap-2 w-full relative", A), "data-theme": U, children: [
-    v ? /* @__PURE__ */ o("div", { className: n("flex items-center justify-between", W), children: [
-      /* @__PURE__ */ o("label", { id: p, className: n(ie({
-        className: M
-      })), htmlFor: p, onClick: () => !t && V(), children: [
-        v,
-        h && /* @__PURE__ */ r("span", { className: "text-red-600 dark:text-red-500 ml-1", children: "*" })
-      ] }),
-      E
-    ] }) : null,
-    /* @__PURE__ */ o("div", { ref: L, id: p, className: n(pe({
-      className: O,
-      hasError: !!f,
-      disabled: t
-    })), role: "combobox", onClick: () => !t && Z(!i), "aria-expanded": i, tabIndex: K.current, "aria-labelledby": p, children: [
-      /* @__PURE__ */ o("div", { className: "flex gap-2.5 items-center flex-1", children: [
-        e?.leftIcon && !C && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
-        C && /* @__PURE__ */ r(Ce, { className: n("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
-        k ? /* @__PURE__ */ r("input", { type: "text", value: i ? Q : e?.label ?? s ?? "", onChange: te, placeholder: N, className: n(me({
-          className: S
-        }), {
-          "text-red-700 placeholder:text-red-700": !!f
-        }), onClick: (a) => {
-          a.stopPropagation(), t || V();
-        }, "aria-label": v || N, "aria-labelledby": p, required: h, autoComplete: "off", autoCapitalize: "words", disabled: t, tabIndex: -1, ...y }) : /* @__PURE__ */ o(ce, { variant: "body2", className: n("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
-          "text-red-700": !!f,
-          "select-none": !e,
-          "text-metal-800 dark:text-metal-50": e,
-          "text-metal-400/50 dark:text-metal-50/50": t
-        }, e?.wrapperClassNameOnSelectedValue), children: [
-          e?.label || N,
-          " ",
-          e?.showRightComponentOnselectedValue ? e?.rightComponent : null
-        ] })
-      ] }),
-      g ? /* @__PURE__ */ r(xe, { size: 16, className: "text-metal-400 animate-spin select-none" }) : !C && /* @__PURE__ */ r(he, { "data-state": i ? "open" : "closed", className: n("w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50", F, {
-        "text-red-700": !!f,
-        "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
-      }) })
-    ] }),
-    /* @__PURE__ */ r("input", { ref: c, type: "text", name: d, className: "hidden", "aria-hidden": "true", required: h, inert: !0, defaultValue: e?.value ?? s ?? void 0, ...y }),
-    i && /* @__PURE__ */ r(fe, { ref: j, additionalOptions: z, className: _, groupedOptions: R, itemClassName: $, name: d, wrapperInputRef: L, inputRef: c, options: l, isLoading: !!g, searchable: k, listItemSecondRowClassName: H, isInfiniteScrollEnabled: T, onFetchMoreOptions: B, noOptionsText: P, visibleItems: q })
-  ] });
-});
+], Ce = de("search", Ne), Re = re(
+  ({
+    additionalOptions: z,
+    className: O,
+    defaultValue: x,
+    disabled: t = !1,
+    error: f,
+    groupedOptions: R,
+    iconClassName: F,
+    inputClassName: S,
+    isInfiniteScrollEnabled: T = !1,
+    isLoading: g,
+    isRequired: h,
+    label: v,
+    labelAction: E,
+    labelClassName: M,
+    labelWrapperClassName: W,
+    listClassName: _,
+    listItemClassName: $,
+    listItemSecondRowClassName: H,
+    name: d,
+    noOptionsText: P,
+    placeholder: N,
+    searchable: k = !1,
+    showSearchIcon: C,
+    theme: U,
+    visibleItems: q,
+    wrapperClassName: A,
+    onFetchMoreOptions: B,
+    onBlur: D,
+    onSearchChange: G,
+    ...y
+  }, J) => {
+    const I = ne(), c = w(null), j = w(null), K = w(0), {
+      isOpen: i,
+      options: l,
+      searchTerm: Q,
+      value: s,
+      setCanFilter: X,
+      setSearchTerm: Y,
+      setValue: m,
+      toggleOpen: Z
+    } = ve(), e = le(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: ee, wrapperInputRef: L, handleOpen: V } = ue({
+      ulRef: j,
+      inputRef: c,
+      disabled: t,
+      internalValue: e,
+      onBlur: D
+    }), p = d ? `${I}-${d}` : I;
+    se(J, () => c.current, [c]), oe(() => {
+      if (x && !s) {
+        const a = l && l.find((u) => u.value === x);
+        a && m(a.value);
+      }
+    }, [x, l, m, s]);
+    const te = (a) => {
+      const u = a.target.value;
+      X(!0), m(""), Y(u ?? ""), G?.(u);
+      const b = l.find(
+        (ae) => ae.value.toLocaleLowerCase() === u.toLocaleLowerCase()
+      );
+      m(b ? b.value : e?.value ?? "");
+    };
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: ee,
+        className: n("flex flex-col gap-2 w-full relative", A),
+        "data-theme": U,
+        children: [
+          v ? /* @__PURE__ */ o(
+            "div",
+            {
+              className: n(
+                "flex items-center justify-between",
+                W
+              ),
+              children: [
+                /* @__PURE__ */ o(
+                  "label",
+                  {
+                    id: p,
+                    className: n(ie({ className: M })),
+                    htmlFor: p,
+                    onClick: () => !t && V(),
+                    children: [
+                      v,
+                      h && /* @__PURE__ */ r("span", { className: "text-red-600 dark:text-red-500 ml-1", children: "*" })
+                    ]
+                  }
+                ),
+                E
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ o(
+            "div",
+            {
+              ref: L,
+              id: p,
+              className: n(
+                pe({ className: O, hasError: !!f, disabled: t })
+              ),
+              role: "combobox",
+              onClick: () => !t && Z(!i),
+              "aria-expanded": i,
+              tabIndex: K.current,
+              "aria-labelledby": p,
+              children: [
+                /* @__PURE__ */ o("div", { className: "flex gap-2.5 items-center flex-1", children: [
+                  e?.leftIcon && !C && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
+                  C && /* @__PURE__ */ r(
+                    Ce,
+                    {
+                      className: n(
+                        "w-4",
+                        "h-4",
+                        "text-zinc-500",
+                        "select-none",
+                        "transition-colors",
+                        "duration-300",
+                        "dark:text-metal-300",
+                        "dark:group-focus-within:text-metal-50"
+                      )
+                    }
+                  ),
+                  k ? /* @__PURE__ */ r(
+                    "input",
+                    {
+                      type: "text",
+                      value: i ? Q : e?.label ?? s ?? "",
+                      onChange: te,
+                      placeholder: N,
+                      className: n(me({ className: S }), {
+                        "text-red-700 placeholder:text-red-700": !!f
+                      }),
+                      onClick: (a) => {
+                        a.stopPropagation(), t || V();
+                      },
+                      "aria-label": v || N,
+                      "aria-labelledby": p,
+                      required: h,
+                      autoComplete: "off",
+                      autoCapitalize: "words",
+                      disabled: t,
+                      tabIndex: -1,
+                      ...y
+                    }
+                  ) : /* @__PURE__ */ o(
+                    ce,
+                    {
+                      variant: "body2",
+                      className: n(
+                        "flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center",
+                        {
+                          "text-red-700": !!f,
+                          "select-none": !e,
+                          "text-metal-800 dark:text-metal-50": e,
+                          "text-metal-400/50 dark:text-metal-50/50": t
+                        },
+                        e?.wrapperClassNameOnSelectedValue
+                      ),
+                      children: [
+                        e?.label || N,
+                        " ",
+                        e?.showRightComponentOnselectedValue ? e?.rightComponent : null
+                      ]
+                    }
+                  )
+                ] }),
+                g ? /* @__PURE__ */ r(
+                  xe,
+                  {
+                    size: 16,
+                    className: "text-metal-400 animate-spin select-none"
+                  }
+                ) : !C && /* @__PURE__ */ r(
+                  he,
+                  {
+                    "data-state": i ? "open" : "closed",
+                    className: n(
+                      "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50",
+                      F,
+                      {
+                        "text-red-700": !!f,
+                        "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: c,
+              type: "text",
+              name: d,
+              className: "hidden",
+              "aria-hidden": "true",
+              required: h,
+              inert: !0,
+              defaultValue: e?.value ?? s ?? void 0,
+              ...y
+            }
+          ),
+          i && /* @__PURE__ */ r(
+            fe,
+            {
+              ref: j,
+              additionalOptions: z,
+              className: _,
+              groupedOptions: R,
+              itemClassName: $,
+              name: d,
+              wrapperInputRef: L,
+              inputRef: c,
+              options: l,
+              isLoading: !!g,
+              searchable: k,
+              listItemSecondRowClassName: H,
+              isInfiniteScrollEnabled: T,
+              onFetchMoreOptions: B,
+              noOptionsText: P,
+              visibleItems: q
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 export {
   Re as Wrapper
 };

package/dist/components/Select/components/index.js

@@ -1,4 +1,4 @@
-import { A as t } from "../../../AdditionalOptions-DiXvUzhu.js";
+import { A as t } from "../../../AdditionalOptions-C2FDVZhu.js";
 import { EmptyList as e } from "./EmptyList.js";
 import { List as m } from "./List/List.js";
 import { Wrapper as s } from "./Wrapper.js";

package/dist/components/Select/contexts/select.provider.js

@@ -1,8 +1,8 @@
-import { jsx as N } from "react/jsx-runtime";
+import { jsx as L } from "react/jsx-runtime";
 import { useState as e, useRef as f, useCallback as T, useEffect as p } from "react";
-import { SelectContext as O } from "./select.context.js";
-import { useToggle as R } from "../../../hooks/useToggle.js";
-const c = 1, Y = 300, V = ({
+import { SelectContext as N } from "./select.context.js";
+import { useToggle as O } from "../../../hooks/useToggle.js";
+const c = 1, R = 300, V = ({
   children: C,
   value: E,
   name: i,
@@ -11,40 +11,47 @@ const c = 1, Y = 300, V = ({
   onChange: a,
   onBlur: u
 }) => {
-  const [d, l] = e(n), v = f(S), [F, g] = R(!1), [P, I] = e(""), [b, x] = e(!0), [A, o] = e(!0), [y, s] = e(c), [D, h] = e(!1), t = f(void 0), G = T((r, m) => {
-    m?.current && (m.current.value = r), t.current && clearTimeout(t.current), h(!0), o(!0), s(c), a?.({
-      target: {
-        value: r,
-        name: i ?? ""
-      }
-    }), u?.(), t.current = setTimeout(() => {
-      h(!1);
-    }, Y);
-  }, [a, i, u]), L = T((r) => {
-    g(r), o(!0), s(c);
-  }, [g]);
+  const [d, l] = e(n), v = f(S), [F, g] = O(!1), [P, I] = e(""), [b, x] = e(!0), [A, o] = e(!0), [_, s] = e(c), [y, h] = e(!1), t = f(void 0), D = T(
+    (r, m) => {
+      m?.current && (m.current.value = r), t.current && clearTimeout(t.current), h(!0), o(!0), s(c), a?.({ target: { value: r, name: i ?? "" } }), u?.(), t.current = setTimeout(() => {
+        h(!1);
+      }, R);
+    },
+    [a, i, u]
+  ), G = T(
+    (r) => {
+      g(r), o(!0), s(c);
+    },
+    [g]
+  );
   return p(() => {
     l(n);
   }, [n.length]), p(() => () => {
     t.current && clearTimeout(t.current);
-  }, []), /* @__PURE__ */ N(O.Provider, { value: {
-    highlightSearchEnabled: v.current,
-    isOpen: F,
-    searchTerm: P,
-    value: E,
-    canFilter: b,
-    canContinueFetching: A,
-    page: y,
-    options: d,
-    isTyping: D,
-    setOptions: l,
-    setPage: s,
-    setCanContinueFetching: o,
-    setCanFilter: x,
-    setSearchTerm: I,
-    setValue: G,
-    toggleOpen: L
-  }, children: C });
+  }, []), /* @__PURE__ */ L(
+    N.Provider,
+    {
+      value: {
+        highlightSearchEnabled: v.current,
+        isOpen: F,
+        searchTerm: P,
+        value: E,
+        canFilter: b,
+        canContinueFetching: A,
+        page: _,
+        options: d,
+        isTyping: y,
+        setOptions: l,
+        setPage: s,
+        setCanContinueFetching: o,
+        setCanFilter: x,
+        setSearchTerm: I,
+        setValue: D,
+        toggleOpen: G
+      },
+      children: C
+    }
+  );
 };
 export {
   V as SelectProvider

package/dist/components/Select/hooks/useNavigationList.js

@@ -1,56 +1,50 @@
-import { c as d } from "../../../compiler-runtime-DA41awpA.js";
-import { useRef as y, useEffect as k } from "react";
-import { useSelectContext as A } from "../contexts/select.hook.js";
-const S = (a) => {
-  const e = d.c(12), {
-    searchable: c,
-    ulRef: n,
-    wrapperInputRef: r,
-    filteredOptions: p
-  } = a, t = y(0), {
-    isOpen: s
-  } = A();
-  let u;
-  e[0] !== c || e[1] !== n || e[2] !== r ? (u = () => {
-    const w = n.current?.querySelectorAll("li") ?? [], o = Array.from(w).filter(x), g = new AbortController(), b = () => {
-      t.current < o.length - 1 ? (t.current = t.current + 1, o[t.current].focus()) : (t.current = 0, o[0].focus());
-    }, h = () => {
-      t.current > 0 ? (t.current = t.current - 1, o[t.current].focus()) : (t.current = 0, r?.current && c ? r.current.querySelector("input")?.focus() : r.current?.focus());
+import { useRef as g, useEffect as a } from "react";
+import { useSelectContext as k } from "../contexts/select.hook.js";
+const d = ({
+  searchable: o,
+  ulRef: n,
+  wrapperInputRef: e,
+  filteredOptions: f
+}) => {
+  const r = g(0), { isOpen: s } = k();
+  a(() => {
+    const m = n.current?.querySelectorAll("li") ?? [], t = Array.from(m).filter(
+      (c) => c.getAttribute("data-action") !== "true"
+    ), u = new AbortController(), i = () => {
+      r.current < t.length - 1 ? (r.current = r.current + 1, t[r.current].focus()) : (r.current = 0, t[0].focus());
+    }, l = () => {
+      r.current > 0 ? (r.current = r.current - 1, t[r.current].focus()) : (r.current = 0, e?.current && o ? e.current.querySelector("input")?.focus() : e.current?.focus());
     };
-    return n.current?.addEventListener("keydown", (m) => {
-      m.preventDefault();
-      e: switch (m.key) {
-        case "ArrowDown": {
-          b();
-          break e;
+    return n.current?.addEventListener(
+      "keydown",
+      (c) => {
+        switch (c.preventDefault(), c.key) {
+          case "ArrowDown": {
+            i();
+            break;
+          }
+          case "Tab": {
+            c.shiftKey ? l() : i();
+            break;
+          }
+          case "ArrowUp": {
+            r.current === 0 ? e.current?.focus() : l();
+            break;
+          }
+          case "Enter": {
+            t[r.current]?.click();
+            break;
+          }
         }
-        case "Tab": {
-          m.shiftKey ? h() : b();
-          break e;
-        }
-        case "ArrowUp": {
-          t.current === 0 ? r.current?.focus() : h();
-          break e;
-        }
-        case "Enter":
-          o[t.current]?.click();
-      }
-    }, {
-      signal: g.signal
-    }), () => {
-      g.abort();
+      },
+      { signal: u.signal }
+    ), () => {
+      u.abort();
     };
-  }, e[0] = c, e[1] = n, e[2] = r, e[3] = u) : u = e[3];
-  let l;
-  e[4] !== p.length || e[5] !== c || e[6] !== n || e[7] !== r ? (l = [n, t, r, c, p.length], e[4] = p.length, e[5] = c, e[6] = n, e[7] = r, e[8] = l) : l = e[8], k(u, l);
-  let i, f;
-  e[9] !== s ? (i = () => {
-    s || (t.current = 0);
-  }, f = [s], e[9] = s, e[10] = i, e[11] = f) : (i = e[10], f = e[11]), k(i, f);
+  }, [n, r, e, o, f.length]), a(() => {
+    s || (r.current = 0);
+  }, [s]);
 };
-function x(a) {
-  return a.getAttribute("data-action") !== "true";
-}
 export {
-  S as useNavigationUlList
+  d as useNavigationUlList
 };