@konstructio/ui 0.1.2-alpha.78 → 0.1.2-alpha.79

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

@@ -1,26 +1,5 @@
-import { cn as e } from "../../../../utils/index.js";
-const o = e(
-  "flex",
-  "min-h-10",
-  "py-2",
-  "px-6",
-  "w-full",
-  "h-full",
-  "gap-1",
-  "items-center",
-  "text-sm",
-  "[&>svg]:-ml-1",
-  "[&>svg]:w-3.5",
-  "[&>svg]:h-3.5",
-  "[&>svg]:shrink-0",
-  "cursor-pointer",
-  "select-none",
-  "hover:bg-gray-50",
-  "hover:dark:bg-metal-700",
-  "focus:outline-0",
-  "text-blue-600",
-  "dark:text-aurora-500"
-);
+import { t as e } from "../../../../utils-DHuiYnx1.js";
+var r = e("flex", "min-h-10", "py-2", "px-6", "w-full", "h-full", "gap-1", "items-center", "text-sm", "[&>svg]:-ml-1", "[&>svg]:w-3.5", "[&>svg]:h-3.5", "[&>svg]:shrink-0", "cursor-pointer", "select-none", "hover:bg-gray-50", "hover:dark:bg-metal-700", "focus:outline-0", "text-blue-600", "dark:text-aurora-500");
 export {
-  o as additionalOptionSlotClassName
+  r as additionalOptionSlotClassName
 };

package/dist/components/Select/components/EmptyList.js

@@ -1,5 +1,5 @@
-import { jsx as t } from "react/jsx-runtime";
-const i = () => /* @__PURE__ */ t("div", { children: "EmptyList" });
+import { jsx as r } from "react/jsx-runtime";
+var i = () => /* @__PURE__ */ r("div", { children: "EmptyList" });
 export {
   i as EmptyList
 };

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

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

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

@@ -1,5 +1,5 @@
-import { c as t } from "../../../../index-D29mdTf5.js";
-const r = t([
+import { t as e } from "../../../../dist-DtEbXv47.js";
+var r = e([
   "flex",
   "items-center",
   "h-8",
@@ -13,7 +13,7 @@ const r = t([
   "pointer-events-none",
   "select-none",
   "cursor-default"
-]), a = t([
+]), a = e([
   "scrollbar",
   "absolute",
   "bg-white",

package/dist/components/Select/components/ListItem/ListItem.js

@@ -1,116 +1,63 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { useRef as I, useCallback as u } from "react";
-import { cn as s } from "../../../../utils/index.js";
+import { t as s } from "../../../../utils-DHuiYnx1.js";
 import { Typography as y } from "../../../Typography/Typography.js";
+import { useSelectContext as I } from "../../contexts/select.hook.js";
 import { listItemVariants as L } from "./ListItem.variants.js";
-import { useSelectContext as V } from "../../contexts/select.hook.js";
+import { useCallback as d, useRef as V } from "react";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
 function j(c, r) {
   const i = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
-  return c.split(o).map((a, t) => a.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ n(
-    "mark",
-    {
-      className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50",
-      children: a
-    },
-    t
-  ) : /* @__PURE__ */ n("span", { children: a }, t));
+  return c.split(o).map((a, t) => a.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ n("mark", {
+    className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50",
+    children: a
+  }, t) : /* @__PURE__ */ n("span", { children: a }, t));
 }
-const K = ({
-  isEmpty: c,
-  isClickable: r,
-  className: i,
-  inputRef: o,
-  listItemSecondRowClassName: a,
-  ...t
-}) => {
-  const { searchTerm: m, highlightSearchEnabled: h, setValue: x, toggleOpen: g } = V(), b = I(null), f = u(
-    (e) => {
-      x(e.value, o), g(!1);
-    },
-    [x, g]
-  ), N = u(
-    (e, l) => {
-      e.key === "Enter" && (e.stopPropagation(), f(l));
-    },
-    [f]
-  ), w = u(
-    ({ label: e, rightComponent: l, subLabel: p, rightComponentClassName: C }) => {
-      if (c)
-        return /* @__PURE__ */ n(
-          y,
-          {
-            variant: "body2",
-            className: "text-zinc-800 dark:text-metal-50 italic",
-            children: e
-          }
-        );
-      if (typeof e != "string")
-        return e;
-      const k = h && m.length > 0 ? j(e, m) : [e];
-      return /* @__PURE__ */ d(
-        y,
-        {
-          variant: "body2",
-          className: "text-zinc-700 dark:text-metal-50 font-medium",
-          children: [
-            l ? /* @__PURE__ */ d(
-              "span",
-              {
-                className: s("flex gap-2 items-center", C),
-                children: [
-                  k,
-                  " ",
-                  l
-                ]
-              }
-            ) : k,
-            p ? /* @__PURE__ */ n(
-              "span",
-              {
-                className: s(
-                  "block font-normal text-sm text-metal-800 dark:text-metal-50",
-                  a
-                ),
-                children: p
-              }
-            ) : null
-          ]
-        }
-      );
+var K = ({ isEmpty: c, isClickable: r, className: i, inputRef: o, listItemSecondRowClassName: a, ...t }) => {
+  const { searchTerm: m, highlightSearchEnabled: h, setValue: x, toggleOpen: g } = I(), b = V(null), f = d((e) => {
+    x(e.value, o), g(!1);
+  }, [x, g]), N = d((e, l) => {
+    e.key === "Enter" && (e.stopPropagation(), f(l));
+  }, [f]), w = d(({ label: e, rightComponent: l, subLabel: p, rightComponentClassName: C }) => {
+    if (c) return /* @__PURE__ */ n(y, {
+      variant: "body2",
+      className: "text-zinc-800 dark:text-metal-50 italic",
+      children: e
+    });
+    if (typeof e != "string") return e;
+    const k = h && m.length > 0 ? j(e, m) : [e];
+    return /* @__PURE__ */ u(y, {
+      variant: "body2",
+      className: "text-zinc-700 dark:text-metal-50 font-medium",
+      children: [l ? /* @__PURE__ */ u("span", {
+        className: s("flex gap-2 items-center", C),
+        children: [
+          k,
+          " ",
+          l
+        ]
+      }) : k, p ? /* @__PURE__ */ n("span", {
+        className: s("block font-normal text-sm text-metal-800 dark:text-metal-50", a),
+        children: p
+      }) : null]
+    });
+  }, [h, m]);
+  return /* @__PURE__ */ u("li", {
+    ref: b,
+    role: "option",
+    "data-action": "false",
+    className: s(L({ className: i })),
+    tabIndex: 0,
+    onClick: (e) => {
+      r && (f(t), e.stopPropagation());
     },
-    [h, m]
-  );
-  return /* @__PURE__ */ d(
-    "li",
-    {
-      ref: b,
-      role: "option",
-      "data-action": "false",
-      className: s(L({ className: i })),
-      tabIndex: 0,
-      onClick: (e) => {
-        r && (f(t), e.stopPropagation());
-      },
-      onKeyDown: (e) => N(e, t),
-      children: [
-        t.leftIcon ? /* @__PURE__ */ n(
-          "span",
-          {
-            className: s(
-              "w-4 h-4 flex justify-center",
-              {
-                "items-center": !t.subLabel,
-                "items-baseline -tranmetal-y-2": !!t.subLabel
-              },
-              t.leftIconClassName
-            ),
-            children: t.leftIcon
-          }
-        ) : null,
-        w(t)
-      ]
-    }
-  );
+    onKeyDown: (e) => N(e, t),
+    children: [t.leftIcon ? /* @__PURE__ */ n("span", {
+      className: s("w-4 h-4 flex justify-center", {
+        "items-center": !t.subLabel,
+        "items-baseline -tranmetal-y-2": !!t.subLabel
+      }, t.leftIconClassName),
+      children: t.leftIcon
+    }) : null, w(t)]
+  });
 };
 export {
   K as ListItem

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

@@ -1,5 +1,5 @@
-import { c as r } from "../../../../index-D29mdTf5.js";
-const t = r([
+import { t as r } from "../../../../dist-DtEbXv47.js";
+var a = r([
   "cursor-pointer",
   "py-1.5",
   "px-6",
@@ -19,5 +19,5 @@ const t = r([
   "dark:focus:bg-metal-700"
 ]);
 export {
-  t as listItemVariants
+  a as listItemVariants
 };