@reformer/ui-kit 6.0.0 → 7.0.0-beta.2

package/dist/ui/select.js

@@ -1,127 +1,270 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as m from "react";
+import { jsxs as m, jsx as r, Fragment as D } from "react/jsx-runtime";
+import * as p from "react";
 import * as s from "@radix-ui/react-select";
-import { XIcon as V, ChevronDownIcon as S, CheckIcon as O, ChevronUpIcon as R } from "lucide-react";
-import { c as o } from "../utils-DtaLkIY8.js";
-const D = m.forwardRef(
+import { XIcon as E, ChevronDownIcon as I, CheckIcon as P, ChevronUpIcon as H } from "lucide-react";
+import { c as g } from "../utils-DtaLkIY8.js";
+function U(e) {
+  switch (e) {
+    case "partial":
+      return { serverSearch: !0, paginated: !0, searchable: !0 };
+    case "preload":
+      return { serverSearch: !1, paginated: !1, searchable: !0 };
+    case "static":
+    default:
+      return { serverSearch: !1, paginated: !1, searchable: !1 };
+  }
+}
+function z(e) {
+  return e.map((t) => ({
+    id: t.id,
+    label: t.label,
+    value: String(t.value),
+    group: t.group
+  }));
+}
+function O(e, t) {
+  const a = new Set(e.map((o) => o.id)), n = [...e];
+  for (const o of t)
+    a.has(o.id) || (a.add(o.id), n.push(o));
+  return n;
+}
+function F(e, t) {
+  const a = t.trim().toLowerCase();
+  return a ? e.filter((n) => n.label.toLowerCase().includes(a)) : e;
+}
+function w() {
+  return {
+    options: [],
+    page: 0,
+    totalCount: 0,
+    loading: !1,
+    loadingMore: !1,
+    error: !1,
+    search: ""
+  };
+}
+function G(e, t) {
+  switch (t.kind) {
+    case "load-start":
+      return {
+        ...w(),
+        loading: !0,
+        search: t.search
+      };
+    case "load-success":
+      return {
+        ...e,
+        options: z(t.result.items),
+        totalCount: t.result.totalCount,
+        page: t.page,
+        loading: !1,
+        error: !1
+      };
+    case "load-more-start":
+      return { ...e, loadingMore: !0 };
+    case "load-more-success":
+      return {
+        ...e,
+        options: O(e.options, z(t.result.items)),
+        totalCount: t.result.totalCount,
+        page: t.page,
+        loadingMore: !1,
+        error: !1
+      };
+    case "load-error":
+      return { ...e, loading: !1, loadingMore: !1, error: !0 };
+    case "reset":
+      return w();
+    default:
+      return e;
+  }
+}
+function k(e) {
+  return e.options.length < e.totalCount;
+}
+function q(e, t = 48) {
+  return e.scrollTop + e.clientHeight >= e.scrollHeight - t;
+}
+const A = 300;
+function K(e) {
+  const t = p.useMemo(() => U(e?.type), [e?.type]), [a, n] = p.useReducer(G, void 0, w), [o, c] = p.useState("");
+  p.useEffect(() => {
+    if (!e || t.serverSearch) return;
+    let i = !1;
+    return n({ kind: "load-start", search: "" }), e.load({}).then(
+      (f) => {
+        i || n({ kind: "load-success", result: f, page: 1 });
+      },
+      () => {
+        i || n({ kind: "load-error" });
+      }
+    ), () => {
+      i = !0;
+    };
+  }, [e, t.serverSearch]), p.useEffect(() => {
+    if (!e || !t.serverSearch) return;
+    let i = !1;
+    const f = setTimeout(() => {
+      n({ kind: "load-start", search: o }), e.load({ search: o, page: 1, pageSize: e.pageSize }).then(
+        (y) => {
+          i || n({ kind: "load-success", result: y, page: 1 });
+        },
+        () => {
+          i || n({ kind: "load-error" });
+        }
+      );
+    }, A);
+    return () => {
+      i = !0, clearTimeout(f);
+    };
+  }, [e, t.serverSearch, o]);
+  const x = p.useCallback(() => {
+    if (!e || !t.paginated || a.loading || a.loadingMore || !k(a)) return;
+    const i = a.page + 1;
+    n({ kind: "load-more-start" }), e.load({ search: a.search, page: i, pageSize: e.pageSize }).then(
+      (f) => n({ kind: "load-more-success", result: f, page: i }),
+      () => n({ kind: "load-error", more: !0 })
+    );
+  }, [e, t.paginated, a]);
+  return {
+    options: t.serverSearch ? a.options : F(a.options, o),
+    loading: a.loading,
+    loadingMore: a.loadingMore,
+    hasMore: k(a),
+    loadMore: x,
+    searchInput: o,
+    setSearchInput: c,
+    flags: t
+  };
+}
+const X = p.forwardRef(
   ({
-    className: t,
-    value: a,
-    onChange: r,
-    onBlur: c,
-    resource: u,
-    options: g,
-    placeholder: N,
-    disabled: h,
-    clearable: z = !1,
-    "data-testid": C,
-    "aria-invalid": I,
-    ...k
+    className: e,
+    value: t,
+    onChange: a,
+    onBlur: n,
+    resource: o,
+    options: c,
+    placeholder: x,
+    disabled: S,
+    clearable: i = !1,
+    "data-testid": f,
+    "aria-invalid": y,
+    ...M
   }, _) => {
-    const [b, v] = m.useState([]), [p, x] = m.useState(!1);
-    m.useEffect(() => {
-      u && (x(!0), u.load({}).then((l) => {
-        v(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          l.items.map((n) => ({
-            id: n.id,
-            label: n.label,
-            value: String(n.value),
-            group: n.group
-          }))
-        );
-      }).catch(() => v([])).finally(() => x(!1)));
-    }, [u]);
-    const y = m.useMemo(() => g ? g.map((l) => ({
+    const d = K(o), C = p.useMemo(() => c ? c.map((l) => ({
       id: l.value,
       label: l.label,
       value: String(l.value),
       group: l.group
-    })) : b, [g, b]), j = (l) => {
-      r?.(l);
+    })) : d.options, [c, d.options]), L = !c && !!o && d.flags.searchable, b = !c && d.loading, R = (l) => {
+      a?.(l);
+    }, j = (l) => {
+      l || n?.();
     }, B = (l) => {
-      l || c?.();
-    }, L = (l) => {
-      l.stopPropagation(), r?.(null);
-    }, w = z && a && !h && !p;
-    return /* @__PURE__ */ d("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ d(
+      l.stopPropagation(), a?.(null);
+    }, T = (l) => {
+      d.flags.paginated && q(l.currentTarget) && d.loadMore();
+    }, N = i && t && !S && !b, V = L ? /* @__PURE__ */ r("div", { className: "sticky top-0 z-10 border-b bg-white p-1", children: /* @__PURE__ */ r(
+      "input",
+      {
+        type: "text",
+        value: d.searchInput,
+        onChange: (l) => d.setSearchInput(l.target.value),
+        onKeyDown: (l) => l.stopPropagation(),
+        placeholder: "Search...",
+        className: "w-full rounded-sm border border-gray-200 px-2 py-1 text-sm outline-none focus:border-ring",
+        "aria-label": "Search options"
+      }
+    ) }) : null;
+    return /* @__PURE__ */ m("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ m(
         s.Root,
         {
           "data-slot": "select",
-          value: a || "",
-          onValueChange: j,
-          onOpenChange: B,
-          disabled: h || p,
-          ...k,
+          value: t || "",
+          onValueChange: R,
+          onOpenChange: j,
+          disabled: S || b,
+          ...M,
           children: [
-            /* @__PURE__ */ e(
-              U,
+            /* @__PURE__ */ r(
+              W,
               {
                 ref: _,
-                className: o(t, w && "pr-8"),
-                disabled: p,
-                "data-testid": C,
-                "aria-invalid": I,
-                children: /* @__PURE__ */ e(
-                  T,
+                className: g(e, N && "pr-8"),
+                disabled: b,
+                "data-testid": f,
+                "aria-invalid": y,
+                children: /* @__PURE__ */ r(
+                  Q,
                   {
-                    placeholder: p ? "Loading..." : N || "Select an option..."
+                    placeholder: b ? "Loading..." : x || "Select an option..."
                   }
                 )
               }
             ),
-            /* @__PURE__ */ e(G, { children: p ? /* @__PURE__ */ e("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "Loading..." }) : y.length === 0 ? /* @__PURE__ */ e("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "No options available" }) : (() => {
-              const l = y.reduce(
-                (n, f) => {
-                  const i = f.group || "default";
-                  return n[i] || (n[i] = []), n[i].push(f), n;
-                },
-                {}
-              );
-              return Object.entries(l).map(([n, f]) => /* @__PURE__ */ d(P, { children: [
-                n !== "default" && /* @__PURE__ */ e(E, { children: n }),
-                f.map((i) => /* @__PURE__ */ e(M, { value: i.value, children: i.label }, i.id))
-              ] }, n));
-            })() })
+            /* @__PURE__ */ r(
+              Y,
+              {
+                header: V,
+                onViewportScroll: d.flags.paginated ? T : void 0,
+                children: b ? /* @__PURE__ */ r("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "Loading..." }) : C.length === 0 ? /* @__PURE__ */ r("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "No options available" }) : /* @__PURE__ */ m(D, { children: [
+                  (() => {
+                    const l = C.reduce(
+                      (u, v) => {
+                        const h = v.group || "default";
+                        return u[h] || (u[h] = []), u[h].push(v), u;
+                      },
+                      {}
+                    );
+                    return Object.entries(l).map(([u, v]) => /* @__PURE__ */ m(J, { children: [
+                      u !== "default" && /* @__PURE__ */ r(Z, { children: u }),
+                      v.map((h) => /* @__PURE__ */ r($, { value: h.value, children: h.label }, h.id))
+                    ] }, u));
+                  })(),
+                  d.loadingMore && /* @__PURE__ */ r("div", { className: "px-2 py-1.5 text-center text-xs text-muted-foreground", children: "Loading more..." })
+                ] })
+              }
+            )
           ]
         }
       ),
-      w && /* @__PURE__ */ e(
+      N && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           className: "absolute right-8 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors bg-transparent border-none p-0 cursor-pointer focus:outline-none z-10",
-          onClick: L,
+          onClick: B,
           "aria-label": "Clear selection",
           tabIndex: -1,
-          children: /* @__PURE__ */ e(V, { className: "size-4" })
+          children: /* @__PURE__ */ r(E, { className: "size-4" })
         }
       )
     ] });
   }
 );
-D.displayName = "Select";
-function P({ ...t }) {
-  return /* @__PURE__ */ e(s.Group, { "data-slot": "select-group", ...t });
-}
-function T({ ...t }) {
-  return /* @__PURE__ */ e(s.Value, { "data-slot": "select-value", ...t });
-}
-function U({
-  className: t,
-  size: a = "default",
-  children: r,
-  "aria-label": c,
-  ...u
+X.displayName = "Select";
+function J({ ...e }) {
+  return /* @__PURE__ */ r(s.Group, { "data-slot": "select-group", ...e });
+}
+function Q({ ...e }) {
+  return /* @__PURE__ */ r(s.Value, { "data-slot": "select-value", ...e });
+}
+function W({
+  className: e,
+  size: t = "default",
+  children: a,
+  "aria-label": n,
+  ...o
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ m(
     s.Trigger,
     {
       "data-slot": "select-trigger",
-      "data-size": a,
-      "aria-label": c || "Select an option",
-      className: o(
+      "data-size": t,
+      "aria-label": n || "Select an option",
+      className: g(
         "h-9 w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-xs transition-colors",
         "!bg-white !text-black",
         "placeholder:text-muted-foreground data-[placeholder]:text-gray-500",
@@ -130,112 +273,122 @@ function U({
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
         "flex items-center justify-between gap-2",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-gray-500",
-        t
+        e
       ),
       style: { backgroundColor: "white", color: "black" },
-      ...u,
+      ...o,
       children: [
-        r,
-        /* @__PURE__ */ e(s.Icon, { asChild: !0, children: /* @__PURE__ */ e(S, { className: "size-4 opacity-50" }) })
+        a,
+        /* @__PURE__ */ r(s.Icon, { asChild: !0, children: /* @__PURE__ */ r(I, { className: "size-4 opacity-50" }) })
       ]
     }
   );
 }
-function G({
-  className: t,
-  children: a,
-  position: r = "popper",
+function Y({
+  className: e,
+  children: t,
+  position: a = "popper",
+  header: n,
+  onViewportScroll: o,
   ...c
 }) {
-  return /* @__PURE__ */ e(s.Portal, { children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ r(s.Portal, { children: /* @__PURE__ */ m(
     s.Content,
     {
       "data-slot": "select-content",
-      className: o(
+      className: g(
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-white text-black shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        t
+        a === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        e
       ),
-      style: r === "popper" ? { width: "var(--radix-select-trigger-width)" } : void 0,
-      position: r,
+      style: a === "popper" ? { width: "var(--radix-select-trigger-width)" } : void 0,
+      position: a,
       ...c,
       children: [
-        /* @__PURE__ */ e(X, {}),
-        /* @__PURE__ */ e(s.Viewport, { className: o("p-1", r === "popper" && "w-full"), children: a }),
-        /* @__PURE__ */ e(q, {})
+        n,
+        /* @__PURE__ */ r(ee, {}),
+        /* @__PURE__ */ r(
+          s.Viewport,
+          {
+            className: g("p-1", a === "popper" && "w-full"),
+            onScroll: o,
+            children: t
+          }
+        ),
+        /* @__PURE__ */ r(te, {})
       ]
     }
   ) });
 }
-function E({ className: t, ...a }) {
-  return /* @__PURE__ */ e(
+function Z({ className: e, ...t }) {
+  return /* @__PURE__ */ r(
     s.Label,
     {
       "data-slot": "select-label",
-      className: o("text-muted-foreground px-2 py-1.5 text-xs", t),
-      ...a
+      className: g("text-muted-foreground px-2 py-1.5 text-xs", e),
+      ...t
     }
   );
 }
-function M({
-  className: t,
-  children: a,
-  ...r
+function $({
+  className: e,
+  children: t,
+  ...a
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ m(
     s.Item,
     {
       "data-slot": "select-item",
-      className: o(
+      className: g(
         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-3 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        t
+        e
       ),
-      ...r,
+      ...a,
       children: [
-        /* @__PURE__ */ e("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(s.ItemIndicator, { children: /* @__PURE__ */ e(O, { className: "size-4" }) }) }),
-        /* @__PURE__ */ e(s.ItemText, { children: a })
+        /* @__PURE__ */ r("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ r(s.ItemIndicator, { children: /* @__PURE__ */ r(P, { className: "size-4" }) }) }),
+        /* @__PURE__ */ r(s.ItemText, { children: t })
       ]
     }
   );
 }
-function X({
-  className: t,
-  ...a
+function ee({
+  className: e,
+  ...t
 }) {
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ r(
     s.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: o("flex cursor-default items-center justify-center py-1", t),
-      ...a,
-      children: /* @__PURE__ */ e(R, { className: "size-4" })
+      className: g("flex cursor-default items-center justify-center py-1", e),
+      ...t,
+      children: /* @__PURE__ */ r(H, { className: "size-4" })
     }
   );
 }
-function q({
-  className: t,
-  ...a
+function te({
+  className: e,
+  ...t
 }) {
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ r(
     s.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: o("flex cursor-default items-center justify-center py-1", t),
-      ...a,
-      children: /* @__PURE__ */ e(S, { className: "size-4" })
+      className: g("flex cursor-default items-center justify-center py-1", e),
+      ...t,
+      children: /* @__PURE__ */ r(I, { className: "size-4" })
     }
   );
 }
 export {
-  D as Select,
-  G as SelectContent,
-  P as SelectGroup,
-  M as SelectItem,
-  E as SelectLabel,
-  q as SelectScrollDownButton,
-  X as SelectScrollUpButton,
-  U as SelectTrigger,
-  T as SelectValue
+  X as Select,
+  Y as SelectContent,
+  J as SelectGroup,
+  $ as SelectItem,
+  Z as SelectLabel,
+  te as SelectScrollDownButton,
+  ee as SelectScrollUpButton,
+  W as SelectTrigger,
+  Q as SelectValue
 };