@konstructio/ui 0.1.2-alpha.4 → 0.1.2-alpha.41

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

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

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

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

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

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

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

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

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

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