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

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

@@ -1,145 +1,137 @@
-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(
+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: k,
     className: C,
-    inputRef: c,
-    isLoading: N,
-    itemClassName: f,
-    name: F,
-    searchable: x = !1,
-    listItemSecondRowClassName: u,
+    inputRef: i,
+    isLoading: F,
+    itemClassName: l,
+    name: N,
+    searchable: b = !1,
+    listItemSecondRowClassName: c,
     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,
+    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: T
-    } = X();
-    B(j, () => a.current, [a]);
-    const b = x && O ? h.filter((e) => {
-      const t = l.toLowerCase();
+      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);
-    }) : h;
-    Q({
-      ulRef: a,
+    }) : x;
+    R({
+      ulRef: s,
       wrapperInputRef: I,
-      searchable: x,
-      filteredOptions: b
+      searchable: b,
+      filteredOptions: d
     });
-    const D = b.filter(
-      (e, t, s) => t === s.findIndex((v) => v.value === e.value)
-    ), U = b.length === 0, _ = G(
-      H(async (e) => {
+    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)
+        if (t.isIntersecting && !p && f && n)
           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]);
-            }
+            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 {
-            w(!1);
+            L(!1);
           }
       }, 100),
-      [d, n, l, o, g]
+      [p, f, g]
     );
-    return J(() => {
-      if (m && o && p.current) {
-        const e = new IntersectionObserver(_, {
+    return M(() => {
+      if (u && n && m.current && !y) {
+        const e = new IntersectionObserver(q, {
           threshold: 0.1
         });
-        return e.observe(p.current), () => e.disconnect();
+        return e.observe(m.current), () => e.disconnect();
       }
-    }, [
-      d,
-      l,
-      m,
-      n,
-      o,
-      g
-    ]), /* @__PURE__ */ z(
+    }, [u, n, p, y]), /* @__PURE__ */ H(
       "ul",
       {
-        ref: a,
-        title: F,
+        ref: s,
+        title: N,
         role: "listbox",
-        className: i(R({ className: C })),
-        "data-state": E ? "open" : "closed",
+        className: a(W({ className: C })),
+        "data-state": T ? "open" : "closed",
         children: [
-          N ? /* @__PURE__ */ r(
-            L,
+          F ? /* @__PURE__ */ o(
+            v,
             {
-              className: i("select-none", f),
+              className: a("select-none", l),
               isClickable: !1,
-              inputRef: c,
+              inputRef: i,
               value: "Loading...",
               label: "Loading...",
-              listItemSecondRowClassName: u
+              listItemSecondRowClassName: c
             }
-          ) : U ? /* @__PURE__ */ r(
-            L,
+          ) : _ ? /* @__PURE__ */ o(
+            v,
             {
-              className: i("select-none", f),
+              className: a("select-none", l),
               isClickable: !1,
-              inputRef: c,
+              inputRef: i,
               value: "No options",
               label: "No options",
-              listItemSecondRowClassName: u
+              listItemSecondRowClassName: c
             }
-          ) : D.map((e) => /* @__PURE__ */ r(
-            L,
+          ) : U.map((e) => /* @__PURE__ */ o(
+            v,
             {
-              className: i("select-none", f),
+              className: a("select-none", l),
               isClickable: !0,
-              inputRef: c,
-              listItemSecondRowClassName: u,
+              inputRef: i,
+              listItemSecondRowClassName: c,
               ...e
             },
             e.value
           )),
-          m && o && /* @__PURE__ */ r(
+          u && n && /* @__PURE__ */ o(
             "li",
             {
-              ref: p,
+              ref: m,
               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" })
+              children: /* @__PURE__ */ o(Q, { 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))
+          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 {
-  ie 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

@@ -44,7 +44,6 @@ const fe = [
       isOpen: f,
       searchTerm: G,
       value: o,
-      // canFilter,
       options: n,
       setValue: c,
       setSearchTerm: J,
@@ -64,7 +63,7 @@ const fe = [
     }, [x, n, c, o]);
     const S = (r) => {
       const p = r.target.value;
-      K(!0), q?.(p), c(""), J(p || "");
+      K(!0), c(""), J(p ?? ""), q?.(p);
       const b = n.find(
         (X) => X.value.toLocaleLowerCase() === p.toLocaleLowerCase()
       );

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

@@ -8,6 +8,7 @@ const t = e({
   canContinueFetching: !0,
   page: 1,
   options: [],
+  isTyping: !1,
   setOptions() {
     throw new Error("setOptions function must be overridden");
   },

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

@@ -1,53 +1,58 @@
-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,
+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: g
+  onBlur: u
 }) => {
-  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?.();
+  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);
     },
-    [a, c, g]
-  ), D = u(
-    (t) => {
-      l(t), n(!0), o(s);
+    [a, i, u]
+  ), y = p(
+    (r) => {
+      g(r), o(!0), s(c);
     },
-    [l]
+    [g]
   );
-  return I(() => {
-    i(r);
-  }, [r.length]), /* @__PURE__ */ w(
-    O.Provider,
+  return T(() => {
+    l(n);
+  }, [n.length]), T(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ G(
+    L.Provider,
     {
       value: {
-        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
+        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: p
+      children: d
     }
   );
 };
 export {
-  N as DropdownProvider
+  U as DropdownProvider
 };

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.23",
+  "version": "0.1.2-alpha.24",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

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.24",
+  "version": "0.1.2-alpha.25",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",