@konstructio/ui 0.1.2-alpha.3 → 0.1.2-alpha.30

package/dist/components/Dropdown/components/Wrapper.js

@@ -1,133 +1,161 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as W, useId as q, useRef as T, useImperativeHandle as G, useMemo as J, useEffect as N } from "react";
-import { Loading as K } from "../../Loading/Loading.js";
-import { Typography as Q } from "../../Typography/Typography.js";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { forwardRef as Y, useId as Z, useRef as C, useMemo as ee, useImperativeHandle as te, useEffect as ae } from "react";
+import { Loading as re } from "../../Loading/Loading.js";
+import { Typography as ne } from "../../Typography/Typography.js";
 import { cn as s } from "../../../utils/index.js";
-import { labelVariants as X, dropdownVariants as Y } from "../Dropdown.variants.js";
-import { useDropdown as Z } from "../hooks/useDropdown.js";
-import { List as _ } from "./List/List.js";
-import { C as B } from "../../../chevron-up-RLP4nX7V.js";
-import { useDropdownContext as ee } from "../contexts/dropdown.hook.js";
-const fe = W(
+import { labelVariants as oe, inputVariants as se, dropdownVariants as le } from "../Dropdown.variants.js";
+import { useDropdown as ie } from "../hooks/useDropdown.js";
+import { List as ce } from "./List/List.js";
+import { c as pe } from "../../../createLucideIcon-D4r5Phnh.js";
+import { C as ue } from "../../../chevron-up-DrQr2Fwd.js";
+import { useDropdownContext as fe } from "../contexts/dropdown.hook.js";
+const me = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], de = pe("search", me), je = Y(
   ({
-    className: j,
-    defaultValue: p,
+    additionalOptions: V,
+    className: O,
+    defaultValue: x,
+    disabled: a = !1,
     error: f,
-    iconClassName: k,
-    isLoading: C,
-    label: x,
-    labelClassName: V,
+    iconClassName: R,
+    inputClassName: F,
+    isLoading: k,
+    isRequired: h,
+    label: v,
+    labelClassName: T,
     listClassName: D,
-    listItemClassName: F,
-    name: u,
-    options: a,
-    placeholder: h,
-    isRequired: g,
-    searchable: y = !1,
-    theme: M,
-    wrapperClassName: $,
-    onBlur: I
-  }, A) => {
-    const L = q(), n = T(null), O = T(null), { wrapperRef: c, wrapperInputRef: R, handleOpen: z, handleOpenIfClosed: H } = Z({ ulRef: O }), { isOpen: v, searchTerm: P, value: r, toggleOpen: E, setValue: b, setSearchTerm: w } = ee(), i = u ? `${L}-${u}` : L;
-    G(A, () => n.current, [n]);
-    const l = J(() => a.find(({ value: e }) => e === r), [a, r]);
-    N(() => {
-      n.current && (n.current.value = r ? l?.value : "");
-    }, [l, r]), N(() => {
-      if (p && !r) {
-        const e = a && a.find((o) => o.value === p);
-        e && b(e.value);
+    listItemClassName: E,
+    listItemSecondRowClassName: M,
+    name: m,
+    placeholder: N,
+    searchable: g = !1,
+    showSearchIcon: w,
+    theme: W,
+    wrapperClassName: _,
+    isInfiniteScrollEnabled: $ = !1,
+    onFetchMoreOptions: H,
+    onBlur: P,
+    onSearchChange: U,
+    ...y
+  }, q) => {
+    const I = Z(), l = C(null), L = C(null), A = C(0), {
+      isOpen: i,
+      searchTerm: B,
+      value: o,
+      options: n,
+      setValue: c,
+      setSearchTerm: G,
+      setCanFilter: J,
+      toggleOpen: K
+    } = fe(), e = ee(() => n.find(({ value: r }) => r === o), [n, o]), { wrapperRef: Q, wrapperInputRef: j, handleOpen: z } = ie({
+      ulRef: L,
+      inputRef: l,
+      disabled: a,
+      internalValue: e,
+      onBlur: P
+    }), p = m ? `${I}-${m}` : I;
+    te(q, () => l.current, [l]), ae(() => {
+      if (x && !o) {
+        const r = n && n.find((u) => u.value === x);
+        r && c(r.value);
       }
-    }, [p, a, b, r]), N(() => {
-      const e = new AbortController();
-      return c.current?.addEventListener("focusout", (o) => {
-        const d = o.relatedTarget;
-        (!d || !c.current?.contains(d)) && (E(!1), w(""), n.current?.value || I?.());
-      }), () => {
-        e.abort();
-      };
-    }, [E, c, w, I, r]);
-    const S = (e) => {
-      const o = e.target.value;
-      w(o);
-      const d = a.find(
-        (U) => U.value.toLocaleLowerCase() === o.toLocaleLowerCase()
+    }, [x, n, c, o]);
+    const S = (r) => {
+      const u = r.target.value;
+      J(!0), c(""), G(u ?? ""), U?.(u);
+      const b = n.find(
+        (X) => X.value.toLocaleLowerCase() === u.toLocaleLowerCase()
       );
-      d && b(d.value);
+      c(b ? b.value : e?.value ?? "");
     };
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ d(
       "div",
       {
-        ref: c,
-        className: s("flex flex-col w-full relative", $),
-        "data-theme": M,
+        ref: Q,
+        className: s("flex flex-col w-full relative", _),
+        "data-theme": W,
         children: [
-          x ? /* @__PURE__ */ m(
+          v ? /* @__PURE__ */ d(
             "label",
             {
-              id: i,
-              className: s(X({ className: V })),
-              htmlFor: i,
-              onClick: H,
+              id: p,
+              className: s(oe({ className: T })),
+              htmlFor: p,
+              onClick: () => !a && z(),
               children: [
-                x,
-                g ? /* @__PURE__ */ t("span", { className: "text-red-600 ml-1", children: "*" }) : null
+                v,
+                h && /* @__PURE__ */ t("span", { className: "text-red-600 ml-1", children: "*" })
               ]
             }
           ) : null,
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ d(
             "div",
             {
-              ref: R,
-              id: i,
-              className: s(Y({ className: j, hasError: !!f })),
+              ref: j,
+              id: p,
+              className: s(
+                le({ className: O, hasError: !!f, disabled: a })
+              ),
               role: "combobox",
-              onClick: z,
-              "aria-expanded": v,
-              tabIndex: 0,
-              "aria-labelledby": i,
+              onClick: () => !a && K(!i),
+              "aria-expanded": i,
+              tabIndex: A.current,
+              "aria-labelledby": p,
               children: [
-                /* @__PURE__ */ m("div", { className: "flex gap-3 items-center flex-1", children: [
-                  l?.leftIcon && /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: l.leftIcon }),
-                  y ? /* @__PURE__ */ t(
+                /* @__PURE__ */ d("div", { className: "flex gap-2.5 items-center flex-1", children: [
+                  e?.leftIcon && !w && /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: e.leftIcon }),
+                  w && /* @__PURE__ */ t(de, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
+                  g ? /* @__PURE__ */ t(
                     "input",
                     {
                       type: "text",
-                      value: v ? P : l?.label || "",
+                      value: i ? B : e?.label ?? o ?? "",
                       onChange: S,
-                      placeholder: h,
-                      className: s(
-                        "flex-1 bg-transparent border-none outline-none text-zinc-700 text-base",
-                        {
-                          "text-red-700 placeholder:text-red-700": !!f
-                        }
-                      ),
-                      onClick: (e) => {
-                        e.stopPropagation(), z();
+                      placeholder: N,
+                      className: s(se({ className: F }), {
+                        "text-red-700 placeholder:text-red-700": !!f
+                      }),
+                      onClick: (r) => {
+                        r.stopPropagation(), a || z();
                       },
-                      "aria-label": x || h,
-                      "aria-labelledby": i
+                      "aria-label": v || N,
+                      "aria-labelledby": p,
+                      required: h,
+                      autoComplete: "off",
+                      autoCapitalize: "words",
+                      disabled: a,
+                      tabIndex: -1,
+                      ...y
                     }
                   ) : /* @__PURE__ */ t(
-                    Q,
+                    ne,
                     {
                       variant: "body2",
-                      className: s("flex-1 text-zinc-700 text-base", {
-                        "text-red-700": !!f
-                      }),
-                      children: l?.label || h
+                      className: s(
+                        "flex-1 text-zinc-400 text-sm dark:text-slate-400",
+                        {
+                          "text-red-700": !!f,
+                          "select-none": !e,
+                          "text-slate-800 dark:text-slate-50": e,
+                          "text-slate-400/50 dark:text-slate-50/50": a
+                        }
+                      ),
+                      children: e?.label || N
                     }
                   )
                 ] }),
-                C ? /* @__PURE__ */ t(K, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ t(
-                  B,
+                k ? /* @__PURE__ */ t(re, { className: "w-4 h-4 text-zinc-500 select-none" }) : !w && /* @__PURE__ */ t(
+                  ue,
                   {
-                    "data-state": v ? "open" : "closed",
+                    "data-state": i ? "open" : "closed",
                     className: s(
-                      "w-4 h-4 text-zinc-500 transition-all duration-50 data-[state=open]:rotate-0 data-[state=closed]:rotate-180",
-                      k,
+                      "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-slate-50",
+                      R,
                       {
-                        "text-red-700": !!f
+                        "text-red-700": !!f,
+                        "text-slate-400/50 dark:group-focus-within:text-zinc-500": a
                       }
                     )
                   }
@@ -138,26 +166,33 @@ const fe = W(
           /* @__PURE__ */ t(
             "input",
             {
-              ref: n,
+              ref: l,
               type: "text",
-              name: u,
+              name: m,
               className: "hidden",
               "aria-hidden": "true",
-              required: g
+              required: h,
+              inert: !0,
+              defaultValue: e?.value ?? o ?? void 0,
+              ...y
             }
           ),
-          /* @__PURE__ */ t(
-            _,
+          i && /* @__PURE__ */ t(
+            ce,
             {
-              ref: O,
+              ref: L,
+              additionalOptions: V,
               className: D,
-              itemClassName: F,
-              name: u,
-              wrapperRef: c,
-              wrapperInputRef: R,
-              options: a,
-              isLoading: !!C,
-              searchable: y
+              itemClassName: E,
+              name: m,
+              wrapperInputRef: j,
+              inputRef: l,
+              options: n,
+              isLoading: !!k,
+              searchable: g,
+              listItemSecondRowClassName: M,
+              isInfiniteScrollEnabled: $,
+              onFetchMoreOptions: H
             }
           )
         ]
@@ -166,5 +201,5 @@ const fe = W(
   }
 );
 export {
-  fe as Wrapper
+  je as Wrapper
 };

package/dist/components/Dropdown/constants/index.js

@@ -0,0 +1,4 @@
+import { DEFAULT_LIST_SIZE as E } from "./pagination.js";
+export {
+  E as DEFAULT_LIST_SIZE
+};

package/dist/components/Dropdown/constants/pagination.js

@@ -0,0 +1,4 @@
+const o = 10;
+export {
+  o as DEFAULT_LIST_SIZE
+};

package/dist/components/Dropdown/contexts/dropdown.context.js

@@ -1,18 +1,36 @@
 import { createContext as e } from "react";
-const o = e({
+const t = e({
+  highlightSearchEnabled: !1,
   isOpen: !1,
-  toggleOpen() {
-    throw new Error("toggleOpen function must be overridden");
-  },
+  searchTerm: "",
   value: void 0,
-  setValue() {
-    throw new Error("setValue function must be overridden");
+  canFilter: !0,
+  canContinueFetching: !0,
+  page: 1,
+  options: [],
+  isTyping: !1,
+  setOptions() {
+    throw new Error("setOptions function must be overridden");
+  },
+  setPage() {
+    throw new Error("setPage function must be overridden");
+  },
+  setCanContinueFetching() {
+    throw new Error("setCanContinueFetching function must be overridden");
+  },
+  setCanFilter() {
+    throw new Error("setCanFilter function must be overridden");
   },
-  searchTerm: "",
   setSearchTerm() {
     throw new Error("setSearchTerm function must be overridden");
+  },
+  setValue() {
+    throw new Error("setValue function must be overridden");
+  },
+  toggleOpen() {
+    throw new Error("toggleOpen function must be overridden");
   }
 });
 export {
-  o as DropdownContext
+  t as DropdownContext
 };

package/dist/components/Dropdown/contexts/dropdown.provider.js

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

package/dist/components/Dropdown/hooks/useDropdown.js

@@ -1,59 +1,103 @@
-import { useRef as c, useEffect as d, useCallback as u } from "react";
-import { useDropdownContext as g } from "../contexts/dropdown.hook.js";
-const b = ({ ulRef: a }) => {
-  const o = c(null), t = c(null), { isOpen: i, toggleOpen: e } = g();
-  d(() => {
-    const n = new AbortController(), s = (l) => {
-      l.key === "Escape" && e(!1);
-    }, r = (l) => {
-      o.current?.contains(l.target) || e(!1);
+import { useRef as m, useEffect as c, useCallback as b } from "react";
+import { useDropdownContext as L } from "../contexts/dropdown.hook.js";
+const p = ({
+  ulRef: f,
+  inputRef: t,
+  disabled: w,
+  internalValue: u,
+  onBlur: g
+}) => {
+  const r = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = L();
+  c(() => {
+    const e = new AbortController(), o = (l) => {
+      l.key === "Escape" && n(!1);
+    }, s = (l) => {
+      r.current?.contains(l.target) || n(!1);
     };
-    return document.addEventListener("keydown", s, {
-      signal: n.signal
-    }), document.addEventListener("mousedown", r, {
-      signal: n.signal
+    return document.addEventListener("keydown", o, {
+      signal: e.signal
+    }), document.addEventListener("mousedown", s, {
+      signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
       () => {
-        document.hidden && e(!1);
+        document.hidden && n(!1);
       },
       {
-        signal: n.signal
+        signal: e.signal
       }
-    ), t.current?.addEventListener(
-      "focus",
-      () => {
-        e(!0);
+    ), a.current?.addEventListener(
+      "focusin",
+      (l) => {
+        !w && l.target?.matches(":focus-visible") && n(!0);
       },
-      { signal: n.signal }
+      { signal: e.signal }
     ), () => {
-      n.abort();
+      e.abort();
     };
-  }, [e, o]), d(() => {
-    const n = new AbortController();
-    return t.current?.addEventListener(
+  }, [n, r]), c(() => {
+    const e = new AbortController();
+    return a.current?.addEventListener(
       "keydown",
-      (s) => {
-        if (s.key === "ArrowDown") {
-          const r = a.current?.querySelector("li");
-          r && r.focus();
+      (o) => {
+        if (o.key === "ArrowDown") {
+          const s = f.current?.querySelector("li");
+          s && s.focus();
         }
       },
-      { signal: n.signal }
+      { signal: e.signal }
     ), () => {
-      n.abort();
+      e.abort();
+    };
+  }, [a, f]), c(() => {
+    const e = new AbortController();
+    return t?.current?.addEventListener(
+      "focusin",
+      () => {
+        v(u?.value ?? ""), d(!1);
+      },
+      { signal: e.signal }
+    ), t?.current?.addEventListener(
+      "focusout",
+      () => {
+        d(!0);
+      },
+      { signal: e.signal }
+    ), a.current?.addEventListener(
+      "focus",
+      () => {
+        d(!1);
+      },
+      { signal: e.signal }
+    ), r.current?.addEventListener(
+      "focusout",
+      (o) => {
+        r.current?.contains(o.relatedTarget) || n(!1);
+      },
+      { signal: e.signal }
+    ), () => {
+      e.abort();
+    };
+  }, [i]), c(() => {
+    t?.current && (t.current.value = i && u?.value || "");
+  }, [u, i]), c(() => {
+    const e = new AbortController();
+    return r.current?.addEventListener("focusout", (o) => {
+      const s = o.relatedTarget;
+      (!s || !r.current?.contains(s)) && (t?.current?.value || g?.());
+    }), () => {
+      e.abort();
     };
-  }, [t, a]);
-  const f = u(() => e(!0), [e]), p = u(() => {
-    i || e(!1);
-  }, [i, e]);
+  }, [n, r, v, g, i]);
+  const E = b(() => {
+    n(!0), requestAnimationFrame(() => t?.current?.focus());
+  }, [t, n]);
   return {
-    wrapperRef: o,
-    wrapperInputRef: t,
-    handleOpen: f,
-    handleOpenIfClosed: p
+    wrapperRef: r,
+    wrapperInputRef: a,
+    handleOpen: E
   };
 };
 export {
-  b as useDropdown
+  p as useDropdown
 };