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

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

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

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