@konstructio/ui 0.1.2-alpha.23 → 0.1.2-alpha.25

package/dist/components/Dropdown/Dropdown.js

@@ -1,42 +1,48 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { DropdownProvider as c } from "./contexts/dropdown.provider.js";
-import { Wrapper as x } from "./components/Wrapper.js";
-const N = n(
+import { jsx as s, jsxs as w } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { cn as o } from "../../utils/index.js";
+import { DropdownProvider as v } from "./contexts/dropdown.provider.js";
+import { Wrapper as N } from "./components/Wrapper.js";
+const W = h(
   ({
-    onChange: r,
-    onBlur: l,
-    value: a,
-    error: s,
-    helperText: e,
-    name: o,
-    highlightSearch: i,
-    ...d
-  }, m) => /* @__PURE__ */ t(
-    c,
+    error: t,
+    errorClassName: i,
+    helperText: r,
+    helperTextClassName: m,
+    highlightSearch: a,
+    mainWrapperClassName: p,
+    name: l,
+    value: d,
+    options: n,
+    onChange: c,
+    onBlur: e,
+    ...f
+  }, x) => /* @__PURE__ */ s(
+    v,
     {
-      highlightSearch: i,
-      name: o,
-      value: a,
-      onBlur: l,
-      onChange: r,
-      children: /* @__PURE__ */ p("div", { className: "relative w-full", children: [
-        /* @__PURE__ */ t(
-          x,
+      highlightSearch: a,
+      name: l,
+      value: d,
+      options: n,
+      onBlur: e,
+      onChange: c,
+      children: /* @__PURE__ */ w("div", { className: o("relative w-full", p), children: [
+        /* @__PURE__ */ s(
+          N,
           {
-            name: o,
-            error: s,
-            ref: m,
-            onBlur: l,
-            ...d
+            error: t,
+            name: l,
+            ref: x,
+            onBlur: e,
+            ...f
           }
         ),
-        s ? /* @__PURE__ */ t("span", { className: "text-xs text-red-700", children: s }) : null,
-        !s && e ? /* @__PURE__ */ t("span", { className: "text-xs text-slate-600", children: e }) : null
+        t ? /* @__PURE__ */ s("span", { className: o("text-xs text-red-700", i), children: t }) : null,
+        !t && r ? /* @__PURE__ */ s("span", { className: o("text-xs text-slate-600", m), children: r }) : null
       ] })
     }
   )
 );
 export {
-  N as Dropdown
+  W as Dropdown
 };

package/dist/components/Dropdown/components/List/List.js

@@ -1,83 +1,137 @@
-import { jsx as l, jsxs as w, Fragment as N } from "react/jsx-runtime";
-import { forwardRef as y, useRef as j, useImperativeHandle as C } from "react";
-import { cn as t } from "../../../../utils/index.js";
-import { useNavigationUlList as O } from "../../hooks/useNavigationList.js";
-import { ListItem as i } from "../ListItem/ListItem.js";
-import { listVariants as D } from "./List.variants.js";
-import { S as E } from "../../../../index-BtQfgaSF.js";
-import { useDropdownContext as F } from "../../contexts/dropdown.hook.js";
-const I = y(
+import { jsxs as H, jsx as o } from "react/jsx-runtime";
+import { S as V } from "../../../../index-BtQfgaSF.js";
+import { d as Z } from "../../../../debounce-BFejQm9P.js";
+import { forwardRef as B, useRef as w, useState as G, useImperativeHandle as J, useMemo as K, useEffect as M } from "react";
+import { Loading as Q } from "../../../Loading/Loading.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useNavigationUlList as R } from "../../hooks/useNavigationList.js";
+import { ListItem as v } from "../ListItem/ListItem.js";
+import { listVariants as W } from "./List.variants.js";
+import { DEFAULT_LIST_SIZE as X } from "../../constants/pagination.js";
+import { useDropdownContext as Y } from "../../contexts/dropdown.hook.js";
+const ue = B(
   ({
-    additionalOptions: p,
-    className: u,
-    inputRef: r,
-    isLoading: d,
-    itemClassName: s,
-    name: g,
-    options: c,
-    searchable: m = !1,
-    listItemSecondRowClassName: a,
-    wrapperInputRef: b,
-    wrapperRef: h
-  }, v) => {
-    const o = j(null), { isOpen: L, searchTerm: x } = F();
-    C(v, () => o.current, [o]), O({
-      ulRef: o,
-      wrapperRef: h,
-      wrapperInputRef: b,
-      inputRef: r,
-      searchable: m
+    additionalOptions: k,
+    className: C,
+    inputRef: i,
+    isLoading: F,
+    itemClassName: l,
+    name: N,
+    searchable: b = !1,
+    listItemSecondRowClassName: c,
+    wrapperInputRef: I,
+    isInfiniteScrollEnabled: u,
+    onFetchMoreOptions: f
+  }, O) => {
+    const s = w(null), m = w(null), [p, L] = G(!1), {
+      isOpen: T,
+      searchTerm: g,
+      canFilter: j,
+      canContinueFetching: n,
+      page: E,
+      options: x,
+      isTyping: y,
+      setOptions: P,
+      setPage: S,
+      setCanContinueFetching: D
+    } = Y();
+    J(O, () => s.current, [s]);
+    const d = b && j ? x.filter((e) => {
+      const t = g.toLowerCase();
+      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
+    }) : x;
+    R({
+      ulRef: s,
+      wrapperInputRef: I,
+      searchable: b,
+      filteredOptions: d
     });
-    const f = m ? c.filter((e) => {
-      const n = x.toLowerCase();
-      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(n);
-    }) : c, k = f.length === 0;
-    return /* @__PURE__ */ l(
+    const U = d.filter(
+      (e, t, r) => t === r.findIndex((h) => h.value === e.value)
+    ), _ = d.length === 0, q = K(
+      () => Z(async (e) => {
+        const [t] = e;
+        if (t.isIntersecting && !p && f && n)
+          try {
+            L(!0);
+            const r = E + 1, { data: h, hasMore: z } = await f({
+              page: r,
+              pageSize: X,
+              termOfSearch: g
+            });
+            S(r), D(z), P((A) => [...A, ...h]);
+          } catch {
+            console.error("Error fetching more options");
+          } finally {
+            L(!1);
+          }
+      }, 100),
+      [p, f, g]
+    );
+    return M(() => {
+      if (u && n && m.current && !y) {
+        const e = new IntersectionObserver(q, {
+          threshold: 0.1
+        });
+        return e.observe(m.current), () => e.disconnect();
+      }
+    }, [u, n, p, y]), /* @__PURE__ */ H(
       "ul",
       {
-        ref: o,
-        title: g,
+        ref: s,
+        title: N,
         role: "listbox",
-        className: t(D({ className: u })),
-        "data-state": L ? "open" : "closed",
-        children: d ? /* @__PURE__ */ l(
-          i,
-          {
-            className: t("select-none", s),
-            isClickable: !1,
-            inputRef: r,
-            value: "Loading...",
-            label: "Loading...",
-            listItemSecondRowClassName: a
-          }
-        ) : k ? /* @__PURE__ */ l(
-          i,
-          {
-            className: t("select-none", s),
-            isClickable: !1,
-            inputRef: r,
-            value: "No options",
-            label: "No options",
-            listItemSecondRowClassName: a
-          }
-        ) : /* @__PURE__ */ w(N, { children: [
-          f.map((e) => /* @__PURE__ */ l(
-            i,
+        className: a(W({ className: C })),
+        "data-state": T ? "open" : "closed",
+        children: [
+          F ? /* @__PURE__ */ o(
+            v,
+            {
+              className: a("select-none", l),
+              isClickable: !1,
+              inputRef: i,
+              value: "Loading...",
+              label: "Loading...",
+              listItemSecondRowClassName: c
+            }
+          ) : _ ? /* @__PURE__ */ o(
+            v,
             {
-              className: t("select-none", s),
+              className: a("select-none", l),
+              isClickable: !1,
+              inputRef: i,
+              value: "No options",
+              label: "No options",
+              listItemSecondRowClassName: c
+            }
+          ) : U.map((e) => /* @__PURE__ */ o(
+            v,
+            {
+              className: a("select-none", l),
               isClickable: !0,
-              inputRef: r,
-              listItemSecondRowClassName: a,
+              inputRef: i,
+              listItemSecondRowClassName: c,
               ...e
             },
             e.value
           )),
-          p?.map((e, n) => /* @__PURE__ */ l("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ l(E, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, n))
-        ] })
+          u && n && /* @__PURE__ */ o(
+            "li",
+            {
+              ref: m,
+              role: "option",
+              "data-action": "true",
+              className: "flex items-center justify-center py-3",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ o(Q, { className: "w-4 h-4 text-aurora-500 select-none" })
+            }
+          ),
+          k?.map((e, t) => /* @__PURE__ */ o("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ o(V, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, t))
+        ]
       }
     );
   }
 );
 export {
-  I as List
+  ue as List
 };

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,89 +1,93 @@
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
-import { useRef as w, useCallback as o } from "react";
-import { Typography as C } from "../../../Typography/Typography.js";
-import { cn as i } from "../../../../utils/index.js";
-import { listItemVariants as L } from "./ListItem.variants.js";
-import { useDropdownContext as I } from "../../contexts/dropdown.hook.js";
-const K = ({
-  isClickable: p,
-  className: h,
-  inputRef: b,
-  listItemSecondRowClassName: x,
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import { useRef as y, useCallback as m } from "react";
+import { Typography as w } from "../../../Typography/Typography.js";
+import { cn as f } from "../../../../utils/index.js";
+import { listItemVariants as C } from "./ListItem.variants.js";
+import { useDropdownContext as L } from "../../contexts/dropdown.hook.js";
+function I(r, n) {
+  const o = n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), c = new RegExp(`(${o})`, "gi");
+  return r.split(c).map((t, a) => t.toLowerCase() === n.toLowerCase() ? /* @__PURE__ */ l(
+    "mark",
+    {
+      className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
+      children: t
+    },
+    a
+  ) : /* @__PURE__ */ l("span", { children: t }, a));
+}
+const $ = ({
+  isClickable: r,
+  className: n,
+  inputRef: o,
+  listItemSecondRowClassName: c,
   ...t
 }) => {
-  const { searchTerm: a, highlightSearchEnabled: c, setValue: m, toggleOpen: f } = I(), g = w(null), n = o(
+  const { searchTerm: a, highlightSearchEnabled: d, setValue: h, toggleOpen: u } = L(), p = y(null), i = m(
     (e) => {
-      m(e.value, b), f(!1);
+      h(e.value, o), u(!1);
     },
-    [m, f]
-  ), u = o(
-    (e, r) => {
-      e.key === "Enter" && (e.stopPropagation(), n(r));
+    [h, u]
+  ), x = m(
+    (e, s) => {
+      e.key === "Enter" && (e.stopPropagation(), i(s));
     },
-    [n]
-  ), k = o(
-    (e, r) => {
+    [i]
+  ), b = m(
+    (e, s) => {
       if (typeof e != "string")
         return e;
-      const y = c && a.length > 0 ? e.split(new RegExp(`(${a})`, "gi")).map((s) => s.toLowerCase() === a.toLowerCase() ? /* @__PURE__ */ l(
-        "mark",
-        {
-          className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
-          children: s
-        },
-        s
-      ) : s) : [e];
-      return /* @__PURE__ */ d(
-        C,
+      const k = d && a.length > 0 ? I(e, a) : [e];
+      return /* @__PURE__ */ g(
+        w,
         {
           variant: "body2",
           className: "text-zinc-700 dark:text-slate-50 font-medium",
           children: [
-            y,
-            r ? /* @__PURE__ */ l(
+            k,
+            s ? /* @__PURE__ */ l(
               "span",
               {
-                className: i(
+                className: f(
                   "block font-normal text-sm text-slate-800 dark:text-slate-50",
-                  x
+                  c
                 ),
-                children: r
+                children: s
               }
             ) : null
           ]
         }
       );
     },
-    [c, a]
+    [d, a]
   );
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ g(
     "li",
     {
-      ref: g,
+      ref: p,
       role: "option",
       "data-action": "false",
-      className: i(L({ className: h })),
+      className: f(C({ className: n })),
       tabIndex: 0,
       onClick: (e) => {
-        p && (n(t), e.stopPropagation());
+        r && (i(t), e.stopPropagation());
       },
-      onKeyDown: (e) => u(e, t),
+      onKeyDown: (e) => x(e, t),
       children: [
         t.leftIcon ? /* @__PURE__ */ l(
           "span",
           {
-            className: i("w-4 h-4 flex justify-center", {
+            className: f("w-4 h-4 flex justify-center", {
               "items-center": !t.subLabel,
               "items-baseline -translate-y-2": !!t.subLabel
             }),
             children: t.leftIcon
           }
         ) : null,
-        k(t.label, t.subLabel)
+        b(t.label, t.subLabel)
       ]
     }
   );
 };
 export {
-  K as ListItem
+  $ as ListItem
 };

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

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

@@ -4,6 +4,23 @@ const t = e({
   isOpen: !1,
   searchTerm: "",
   value: void 0,
+  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");
+  },
   setSearchTerm() {
     throw new Error("setSearchTerm function must be overridden");
   },

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

@@ -1,30 +1,58 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as p, useState as d, useCallback as v } from "react";
-import { DropdownContext as S } from "./dropdown.context.js";
-import { useToggle as b } from "../../../hooks/useToggle.js";
-const D = ({ children: s, value: n, name: e, highlightSearch: c = !1, onChange: r, onBlur: t }) => {
-  const l = p(c), [h, i] = b(!1), [m, g] = d(""), u = v(
-    (o, a) => {
-      a?.current && (a.current.value = o), r?.({ target: { value: o, name: e ?? "" } }), t?.();
+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, t]
+    [a, i, u]
+  ), y = p(
+    (r) => {
+      g(r), o(!0), s(c);
+    },
+    [g]
   );
-  return /* @__PURE__ */ f(
-    S.Provider,
+  return T(() => {
+    l(n);
+  }, [n.length]), T(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ G(
+    L.Provider,
     {
       value: {
-        highlightSearchEnabled: l.current,
-        isOpen: h,
-        searchTerm: m,
-        value: n,
-        setSearchTerm: g,
-        setValue: u,
-        toggleOpen: i
+        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: s
+      children: d
     }
   );
 };
 export {
-  D as DropdownProvider
+  U as DropdownProvider
 };

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

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

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

@@ -1,62 +1,50 @@
-import { useRef as g, useEffect as i } from "react";
-import { useDropdownContext as d } from "../contexts/dropdown.hook.js";
-const w = ({
-  inputRef: s,
-  searchable: l,
-  ulRef: t,
-  wrapperInputRef: u,
-  wrapperRef: a
+import { useRef as g, useEffect as a } from "react";
+import { useDropdownContext as k } from "../contexts/dropdown.hook.js";
+const A = ({
+  searchable: o,
+  ulRef: n,
+  wrapperInputRef: e,
+  filteredOptions: f
 }) => {
-  const r = g(0), { isOpen: f } = d();
-  i(() => {
-    const c = t.current?.querySelectorAll("li") ?? [], e = Array.from(c).filter(
-      (n) => n.getAttribute("data-action") !== "true"
-    ), o = new AbortController(), m = () => {
-      r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
-    }, b = () => {
-      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, s?.current && l ? s.current.focus() : u.current?.focus());
+  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 t.current?.addEventListener(
+    return n.current?.addEventListener(
       "keydown",
-      (n) => {
-        switch (n.preventDefault(), n.key) {
+      (c) => {
+        switch (c.preventDefault(), c.key) {
           case "ArrowDown": {
-            m();
+            i();
             break;
           }
           case "Tab": {
-            n.shiftKey ? b() : m();
+            c.shiftKey ? l() : i();
             break;
           }
           case "ArrowUp": {
-            r.current === 0 ? u.current?.focus() : b();
+            r.current === 0 ? e.current?.focus() : l();
             break;
           }
           case "Enter": {
-            e[r.current]?.click();
+            t[r.current]?.click();
             break;
           }
         }
       },
-      { signal: o.signal }
+      { signal: u.signal }
     ), () => {
-      o.abort();
+      u.abort();
     };
-  }, [t, r, u, s, l]), i(() => {
-    const c = new AbortController();
-    return a.current?.addEventListener(
-      "mouseenter",
-      () => {
-        (t.current?.querySelectorAll("li") ?? []).forEach((o) => o.blur());
-      },
-      { signal: c.signal }
-    ), () => {
-      c.abort();
-    };
-  }, [t, a]), i(() => {
-    f || (r.current = 0);
-  }, [f]);
+  }, [n, r, e, o, f.length]), a(() => {
+    s || (r.current = 0);
+  }, [s]);
 };
 export {
-  w as useNavigationUlList
+  A as useNavigationUlList
 };

package/dist/index.d.ts

@@ -231,16 +231,32 @@ declare type DropdownProps = VariantProps<typeof dropdownVariants> & Omit<InputH
     listClassName?: string;
     listItemClassName?: string;
     listItemSecondRowClassName?: string;
+    mainWrapperClassName?: string;
     options: Option_3[];
     searchable?: boolean;
     showSearchIcon?: boolean;
     theme?: Theme;
     value?: string;
     wrapperClassName?: string;
+    errorClassName?: string;
+    helperTextClassName?: string;
     onBlur?: VoidFunction;
     onChange?: OnChangeFn;
     onSearchChange?: (searchTerm: string) => void;
-};
+} & ({
+    isInfiniteScrollEnabled: true;
+    onFetchMoreOptions: (params: {
+        page: number;
+        pageSize: number;
+        termOfSearch?: string;
+    }) => Promise<{
+        data: Option_3[];
+        hasMore: boolean;
+    }>;
+} | {
+    isInfiniteScrollEnabled?: false | undefined;
+    onFetchMoreOptions?: never;
+});
 
 declare const dropdownVariants: (props?: ({
     hasError?: boolean | null | undefined;
@@ -451,7 +467,7 @@ declare type Option_2 = {
 };
 
 declare type Option_3 = {
-    label: string | ReactNode;
+    label: string;
     subLabel?: string | ReactNode;
     leftIcon?: ReactNode | string;
     value: string;

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.22",
+  "version": "0.1.2-alpha.24",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -72,7 +72,7 @@
     "cmdk": "^1.1.1",
     "countries-and-timezones": "^3.8.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.553.0",
+    "lucide-react": "^0.554.0",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^9.11.1",
     "react-feather": "^2.0.10",
@@ -115,39 +115,39 @@
   "devDependencies": {
     "@faker-js/faker": "^10.1.0",
     "@rollup/plugin-alias": "^6.0.0",
-    "@storybook/addon-docs": "^10.0.6",
-    "@storybook/addon-links": "^10.0.6",
-    "@storybook/react-vite": "^10.0.6",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
     "@tailwindcss/vite": "^4.1.17",
-    "@tanstack/react-query": "^5.90.7",
+    "@tanstack/react-query": "^5.90.10",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.20",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@typescript-eslint/parser": "^8.46.4",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@vitejs/plugin-react": "^5.1.1",
     "@vitest/coverage-v8": "^3.2.4",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.22",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^6.1.1",
     "eslint-plugin-react-refresh": "^0.4.23",
     "eslint-plugin-storybook": "^9.1.13",
     "eslint-plugin-vitest": "^0.5.4",
-    "glob": "^11.0.3",
+    "glob": "^12.0.0",
     "husky": "^9.1.7",
     "jest-axe": "^10.0.0",
-    "jsdom": "^27.1.0",
+    "jsdom": "^27.2.0",
     "lodash": "^4.17.21",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.1.0",
-    "storybook": "^10.0.6",
+    "storybook": "^10.0.8",
     "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.23",
+  "version": "0.1.2-alpha.25",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -72,7 +72,7 @@
     "cmdk": "^1.1.1",
     "countries-and-timezones": "^3.8.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.553.0",
+    "lucide-react": "^0.554.0",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^9.11.1",
     "react-feather": "^2.0.10",
@@ -115,39 +115,39 @@
   "devDependencies": {
     "@faker-js/faker": "^10.1.0",
     "@rollup/plugin-alias": "^6.0.0",
-    "@storybook/addon-docs": "^10.0.6",
-    "@storybook/addon-links": "^10.0.6",
-    "@storybook/react-vite": "^10.0.6",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
     "@tailwindcss/vite": "^4.1.17",
-    "@tanstack/react-query": "^5.90.7",
+    "@tanstack/react-query": "^5.90.10",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.20",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@typescript-eslint/parser": "^8.46.4",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@vitejs/plugin-react": "^5.1.1",
     "@vitest/coverage-v8": "^3.2.4",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.22",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^6.1.1",
     "eslint-plugin-react-refresh": "^0.4.23",
     "eslint-plugin-storybook": "^9.1.13",
     "eslint-plugin-vitest": "^0.5.4",
-    "glob": "^11.0.3",
+    "glob": "^12.0.0",
     "husky": "^9.1.7",
     "jest-axe": "^10.0.0",
-    "jsdom": "^27.1.0",
+    "jsdom": "^27.2.0",
     "lodash": "^4.17.21",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.1.0",
-    "storybook": "^10.0.6",
+    "storybook": "^10.0.8",
     "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",