@konstructio/ui 0.1.2-alpha.73 → 0.1.2-alpha.75

package/dist/components/Select/Select.types.d.ts

@@ -111,6 +111,7 @@ export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAt
     listItemSecondRowClassName?: string;
     mainWrapperClassName?: string;
     noOptionsText?: string;
+    visibleItems?: number;
     options: Option[] | OptionGroup[];
     searchable?: boolean;
     showSearchIcon?: boolean;

package/dist/components/Select/Select.variants.js

@@ -15,7 +15,7 @@ const a = e(
     "transition-all",
     "w-full",
     "outline-none",
-    "h-9",
+    "h-10",
     "border-gray-200",
     "focus-visible:bg-zinc-50",
     "aria-expanded:border-aurora-500",

package/dist/components/Select/components/List/List.js

@@ -1,48 +1,50 @@
-import { jsxs as N, jsx as o } from "react/jsx-runtime";
-import { d as K } from "../../../../debounce-DJveWHr_.js";
-import { forwardRef as Q, useRef as O, useState as W, useImperativeHandle as X, useMemo as j, useEffect as Y, Fragment as $ } from "react";
-import { Loading as R } from "../../../Loading/Loading.js";
+import { jsxs as H, jsx as o } from "react/jsx-runtime";
+import { d as Q } from "../../../../debounce-DJveWHr_.js";
+import { forwardRef as W, useRef as I, useState as Y, useImperativeHandle as $, useMemo as N, useEffect as R, Fragment as ee } from "react";
+import { Loading as te } from "../../../Loading/Loading.js";
 import { cn as s } from "../../../../utils/index.js";
-import { useNavigationUlList as ee } from "../../hooks/useNavigationList.js";
-import { A as te, i as re } from "../../../../AdditionalOptions-C2FDVZhu.js";
+import { useNavigationUlList as re } from "../../hooks/useNavigationList.js";
+import { A as oe, i as ne } from "../../../../AdditionalOptions-C2FDVZhu.js";
 import { ListItem as g } from "../ListItem/ListItem.js";
-import { listGroupLabelVariants as oe, listVariants as ne } from "./List.variants.js";
-import { DEFAULT_LIST_SIZE as se } from "../../constants/pagination.js";
-import { useSelectContext as ae } from "../../contexts/select.hook.js";
-const Le = Q(
+import { listGroupLabelVariants as se, listVariants as ie } from "./List.variants.js";
+import { DEFAULT_LIST_SIZE as ae } from "../../constants/pagination.js";
+import { ITEM_HEIGHT_PX as le } from "../../constants/list.js";
+import { useSelectContext as ce } from "../../contexts/select.hook.js";
+const xe = W(
   ({
-    additionalOptions: A,
-    className: I,
+    additionalOptions: O,
+    className: P,
     groupedOptions: l,
     inputRef: c,
-    isLoading: P,
+    isLoading: _,
     itemClassName: u,
-    name: T,
+    name: j,
     searchable: f = !1,
     listItemSecondRowClassName: p,
-    wrapperInputRef: U,
+    wrapperInputRef: A,
     isInfiniteScrollEnabled: h,
     noOptionsText: F,
-    onFetchMoreOptions: b
-  }, V) => {
-    const m = O(null), L = O(null), [v, k] = W(!1), {
+    onFetchMoreOptions: L,
+    visibleItems: E
+  }, M) => {
+    const m = I(null), b = I(null), [v, k] = Y(!1), {
       canContinueFetching: d,
       canFilter: y,
-      isOpen: _,
-      isTyping: E,
-      options: G,
+      isOpen: S,
+      isTyping: G,
+      options: T,
       page: w,
       searchTerm: n,
-      setCanContinueFetching: q,
-      setOptions: z,
-      setPage: D
-    } = ae();
-    X(V, () => m.current, [m]);
-    const a = l.length > 0 && re(l[0]), x = f && y ? G.filter((e) => {
+      setCanContinueFetching: U,
+      setOptions: V,
+      setPage: q
+    } = ce(), z = E !== void 0 ? { maxHeight: E * le } : void 0;
+    $(M, () => m.current, [m]);
+    const i = l.length > 0 && ne(l[0]), x = f && y ? T.filter((e) => {
       const t = n.toLowerCase();
       return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
-    }) : G, C = j(() => {
-      if (!a)
+    }) : T, C = N(() => {
+      if (!i)
         return [];
       const e = l;
       if (!f || !y || !n)
@@ -51,61 +53,62 @@ const Le = Q(
       return e.map((r) => ({
         ...r,
         options: r.options.filter(
-          (i) => i.label.toLowerCase().includes(t)
+          (a) => a.label.toLowerCase().includes(t)
         )
       })).filter((r) => r.options.length > 0);
-    }, [a, l, f, y, n]), H = a ? C.flatMap((e) => e.options) : x;
-    ee({
+    }, [i, l, f, y, n]), D = i ? C.flatMap((e) => e.options) : x;
+    re({
       ulRef: m,
-      wrapperInputRef: U,
+      wrapperInputRef: A,
       searchable: f,
-      filteredOptions: H
+      filteredOptions: D
     });
-    const M = x.filter(
-      (e, t, r) => t === r.findIndex((i) => i.value === e.value)
-    ), S = a ? C.length === 0 : x.length === 0, Z = j(
-      () => K(async (e) => {
+    const X = x.filter(
+      (e, t, r) => t === r.findIndex((a) => a.value === e.value)
+    ), Z = i ? C.length === 0 : x.length === 0, B = N(
+      () => Q(async (e) => {
         const [t] = e;
-        if (t.isIntersecting && !v && b && d)
+        if (t.isIntersecting && !v && L && d)
           try {
             k(!0);
-            const r = w + 1, { data: i, hasMore: B } = await b({
+            const r = w + 1, { data: a, hasMore: J } = await L({
               page: r,
-              pageSize: se,
+              pageSize: ae,
               termOfSearch: n
             });
-            D(r), q(B), z((J) => [...J, ...i]);
+            q(r), U(J), V((K) => [...K, ...a]);
           } catch {
             console.error("Error fetching more options");
           } finally {
             k(!1);
           }
       }, 100),
-      [v, b, n, w]
+      [v, L, n, w]
     );
-    return Y(() => {
-      if (h && d && L.current && !E) {
-        const e = new IntersectionObserver(Z, {
+    return R(() => {
+      if (h && d && b.current && !G) {
+        const e = new IntersectionObserver(B, {
           threshold: 0.1
         });
-        return e.observe(L.current), () => e.disconnect();
+        return e.observe(b.current), () => e.disconnect();
       }
     }, [
       h,
       d,
       v,
-      E,
+      G,
       w
-    ]), /* @__PURE__ */ N(
+    ]), /* @__PURE__ */ H(
       "ul",
       {
         ref: m,
-        title: T,
+        title: j,
         role: "listbox",
-        className: s(ne({ className: I })),
-        "data-state": _ ? "open" : "closed",
+        className: s(ie({ className: P })),
+        style: z,
+        "data-state": S ? "open" : "closed",
         children: [
-          P ? /* @__PURE__ */ o(
+          _ ? /* @__PURE__ */ o(
             g,
             {
               className: s("select-none", u),
@@ -115,7 +118,7 @@ const Le = Q(
               label: "Loading...",
               listItemSecondRowClassName: p
             }
-          ) : S ? /* @__PURE__ */ o(
+          ) : Z ? /* @__PURE__ */ o(
             g,
             {
               isEmpty: !0,
@@ -126,14 +129,14 @@ const Le = Q(
               label: F ?? "No options",
               listItemSecondRowClassName: p
             }
-          ) : a ? C.map((e) => /* @__PURE__ */ N($, { children: [
+          ) : i ? C.map((e) => /* @__PURE__ */ H(ee, { children: [
             /* @__PURE__ */ o(
               "li",
               {
                 role: "presentation",
                 "aria-hidden": "true",
                 "data-action": "true",
-                className: s(oe()),
+                className: s(se()),
                 children: e.groupLabel
               }
             ),
@@ -148,7 +151,7 @@ const Le = Q(
               },
               t.value
             ))
-          ] }, e.groupLabel)) : M.map((e) => /* @__PURE__ */ o(
+          ] }, e.groupLabel)) : X.map((e) => /* @__PURE__ */ o(
             g,
             {
               className: s("select-none", u),
@@ -162,20 +165,20 @@ const Le = Q(
           h && d && /* @__PURE__ */ o(
             "li",
             {
-              ref: L,
+              ref: b,
               role: "option",
               "data-action": "true",
               className: "flex items-center justify-center py-3",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ o(R, { className: "w-4 h-4 text-aurora-500 select-none" })
+              children: /* @__PURE__ */ o(te, { className: "w-4 h-4 text-aurora-500 select-none" })
             }
           ),
-          /* @__PURE__ */ o(te, { additionalOptions: A })
+          /* @__PURE__ */ o(oe, { additionalOptions: O })
         ]
       }
     );
   }
 );
 export {
-  Le as List
+  xe as List
 };

package/dist/components/Select/components/List/List.types.d.ts

@@ -12,4 +12,5 @@ export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additi
     isInfiniteScrollEnabled: SelectProps['isInfiniteScrollEnabled'];
     onFetchMoreOptions?: SelectProps['onFetchMoreOptions'];
     noOptionsText?: SelectProps['noOptionsText'];
+    visibleItems?: number;
 };

package/dist/components/Select/components/Wrapper.js

@@ -1,18 +1,18 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { forwardRef as ae, useId as re, useRef as w, useMemo as ne, useImperativeHandle as le, useEffect as se } from "react";
-import { Typography as oe } from "../../Typography/Typography.js";
+import { forwardRef as re, useId as ne, useRef as w, useMemo as le, useImperativeHandle as se, useEffect as oe } from "react";
+import { Typography as ce } from "../../Typography/Typography.js";
 import { cn as n } from "../../../utils/index.js";
-import { labelVariants as ce, inputVariants as ie, selectVariants as me } from "../Select.variants.js";
-import { useSelect as pe } from "../hooks/useSelect.js";
-import { List as ue } from "./List/List.js";
-import { c as fe } from "../../../createLucideIcon-CP-mMPfa.js";
-import { LoaderIcon as de } from "../../../assets/icons/components/Loader.js";
-import { C as xe } from "../../../chevron-up-IlDPxR7j.js";
-import { useSelectContext as he } from "../contexts/select.hook.js";
-const ve = [
+import { labelVariants as ie, inputVariants as me, selectVariants as pe } from "../Select.variants.js";
+import { useSelect as ue } from "../hooks/useSelect.js";
+import { List as fe } from "./List/List.js";
+import { c as de } from "../../../createLucideIcon-CP-mMPfa.js";
+import { LoaderIcon as xe } from "../../../assets/icons/components/Loader.js";
+import { C as he } from "../../../chevron-up-IlDPxR7j.js";
+import { useSelectContext as ve } from "../contexts/select.hook.js";
+const Ne = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], Ne = fe("search", ve), Oe = ae(
+], Ce = de("search", Ne), Re = re(
   ({
     additionalOptions: z,
     className: O,
@@ -38,47 +38,48 @@ const ve = [
     searchable: k = !1,
     showSearchIcon: C,
     theme: U,
-    wrapperClassName: q,
-    onFetchMoreOptions: A,
-    onBlur: B,
-    onSearchChange: D,
+    visibleItems: q,
+    wrapperClassName: A,
+    onFetchMoreOptions: B,
+    onBlur: D,
+    onSearchChange: G,
     ...y
-  }, G) => {
-    const I = re(), c = w(null), j = w(null), J = w(0), {
+  }, J) => {
+    const I = ne(), c = w(null), j = w(null), K = w(0), {
       isOpen: i,
       options: l,
-      searchTerm: K,
+      searchTerm: Q,
       value: s,
-      setCanFilter: Q,
-      setSearchTerm: X,
+      setCanFilter: X,
+      setSearchTerm: Y,
       setValue: m,
-      toggleOpen: Y
-    } = he(), e = ne(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: Z, wrapperInputRef: L, handleOpen: V } = pe({
+      toggleOpen: Z
+    } = ve(), e = le(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: ee, wrapperInputRef: L, handleOpen: V } = ue({
       ulRef: j,
       inputRef: c,
       disabled: t,
       internalValue: e,
-      onBlur: B
+      onBlur: D
     }), p = d ? `${I}-${d}` : I;
-    le(G, () => c.current, [c]), se(() => {
+    se(J, () => c.current, [c]), oe(() => {
       if (x && !s) {
         const a = l && l.find((u) => u.value === x);
         a && m(a.value);
       }
     }, [x, l, m, s]);
-    const ee = (a) => {
+    const te = (a) => {
       const u = a.target.value;
-      Q(!0), m(""), X(u ?? ""), D?.(u);
+      X(!0), m(""), Y(u ?? ""), G?.(u);
       const b = l.find(
-        (te) => te.value.toLocaleLowerCase() === u.toLocaleLowerCase()
+        (ae) => ae.value.toLocaleLowerCase() === u.toLocaleLowerCase()
       );
       m(b ? b.value : e?.value ?? "");
     };
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: Z,
-        className: n("flex flex-col gap-2 w-full relative", q),
+        ref: ee,
+        className: n("flex flex-col gap-2 w-full relative", A),
         "data-theme": U,
         children: [
           v ? /* @__PURE__ */ o(
@@ -93,7 +94,7 @@ const ve = [
                   "label",
                   {
                     id: p,
-                    className: n(ce({ className: M })),
+                    className: n(ie({ className: M })),
                     htmlFor: p,
                     onClick: () => !t && V(),
                     children: [
@@ -112,18 +113,18 @@ const ve = [
               ref: L,
               id: p,
               className: n(
-                me({ className: O, hasError: !!f, disabled: t })
+                pe({ className: O, hasError: !!f, disabled: t })
               ),
               role: "combobox",
-              onClick: () => !t && Y(!i),
+              onClick: () => !t && Z(!i),
               "aria-expanded": i,
-              tabIndex: J.current,
+              tabIndex: K.current,
               "aria-labelledby": p,
               children: [
                 /* @__PURE__ */ o("div", { className: "flex gap-2.5 items-center flex-1", children: [
                   e?.leftIcon && !C && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
                   C && /* @__PURE__ */ r(
-                    Ne,
+                    Ce,
                     {
                       className: n(
                         "w-4",
@@ -141,10 +142,10 @@ const ve = [
                     "input",
                     {
                       type: "text",
-                      value: i ? K : e?.label ?? s ?? "",
-                      onChange: ee,
+                      value: i ? Q : e?.label ?? s ?? "",
+                      onChange: te,
                       placeholder: N,
-                      className: n(ie({ className: S }), {
+                      className: n(me({ className: S }), {
                         "text-red-700 placeholder:text-red-700": !!f
                       }),
                       onClick: (a) => {
@@ -160,7 +161,7 @@ const ve = [
                       ...y
                     }
                   ) : /* @__PURE__ */ o(
-                    oe,
+                    ce,
                     {
                       variant: "body2",
                       className: n(
@@ -182,13 +183,13 @@ const ve = [
                   )
                 ] }),
                 g ? /* @__PURE__ */ r(
-                  de,
+                  xe,
                   {
                     size: 16,
                     className: "text-metal-400 animate-spin select-none"
                   }
                 ) : !C && /* @__PURE__ */ r(
-                  xe,
+                  he,
                   {
                     "data-state": i ? "open" : "closed",
                     className: n(
@@ -219,7 +220,7 @@ const ve = [
             }
           ),
           i && /* @__PURE__ */ r(
-            ue,
+            fe,
             {
               ref: j,
               additionalOptions: z,
@@ -234,8 +235,9 @@ const ve = [
               searchable: k,
               listItemSecondRowClassName: H,
               isInfiniteScrollEnabled: T,
-              onFetchMoreOptions: A,
-              noOptionsText: P
+              onFetchMoreOptions: B,
+              noOptionsText: P,
+              visibleItems: q
             }
           )
         ]
@@ -244,5 +246,5 @@ const ve = [
   }
 );
 export {
-  Oe as Wrapper
+  Re as Wrapper
 };

package/dist/components/Select/constants/index.d.ts

@@ -1 +1,2 @@
 export * from './pagination';
+export * from './list';

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

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

package/dist/components/Select/constants/list.d.ts

@@ -0,0 +1 @@
+export declare const ITEM_HEIGHT_PX = 40;

package/dist/components/Select/constants/list.js

@@ -0,0 +1,4 @@
+const o = 40;
+export {
+  o as ITEM_HEIGHT_PX
+};