@konstructio/ui 0.1.2-alpha.22 → 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
+};