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

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

@@ -12,239 +12,116 @@ 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-C2FDVZhu.js";
+import { A as t } from "../../../AdditionalOptions-DiXvUzhu.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 L } from "react/jsx-runtime";
+import { jsx as N } from "react/jsx-runtime";
 import { useState as e, useRef as f, useCallback as T, useEffect as p } from "react";
-import { SelectContext as N } from "./select.context.js";
-import { useToggle as O } from "../../../hooks/useToggle.js";
-const c = 1, R = 300, V = ({
+import { SelectContext as O } from "./select.context.js";
+import { useToggle as R } from "../../../hooks/useToggle.js";
+const c = 1, Y = 300, V = ({
   children: C,
   value: E,
   name: i,
@@ -11,47 +11,40 @@ const c = 1, R = 300, V = ({
   onChange: a,
   onBlur: u
 }) => {
-  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]
-  );
+  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]);
   return p(() => {
     l(n);
   }, [n.length]), p(() => () => {
     t.current && clearTimeout(t.current);
-  }, []), /* @__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
-    }
-  );
+  }, []), /* @__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 });
 };
 export {
   V as SelectProvider

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

@@ -1,50 +1,56 @@
-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());
+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());
     };
-    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;
-          }
+    return n.current?.addEventListener("keydown", (m) => {
+      m.preventDefault();
+      e: switch (m.key) {
+        case "ArrowDown": {
+          b();
+          break e;
         }
-      },
-      { signal: u.signal }
-    ), () => {
-      u.abort();
+        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();
     };
-  }, [n, r, e, o, f.length]), a(() => {
-    s || (r.current = 0);
-  }, [s]);
+  }, 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);
 };
+function x(a) {
+  return a.getAttribute("data-action") !== "true";
+}
 export {
-  d as useNavigationUlList
+  S as useNavigationUlList
 };