@reformer/ui-kit 8.0.0 → 9.0.0-beta.2

package/dist/ui/select.js

@@ -1,9 +1,9 @@
-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 E, ChevronDownIcon as I, CheckIcon as P, ChevronUpIcon as H } from "lucide-react";
+import { jsxs as f, jsx as a, Fragment as F } from "react/jsx-runtime";
+import * as u from "react";
+import * as i from "@radix-ui/react-select";
+import { XIcon as A, ChevronDownIcon as _, CheckIcon as G, ChevronUpIcon as K } from "lucide-react";
 import { c as g } from "../utils-DtaLkIY8.js";
-function U(e) {
+function O(e) {
   switch (e) {
     case "partial":
       return { serverSearch: !0, paginated: !0, searchable: !0 };
@@ -14,7 +14,7 @@ function U(e) {
       return { serverSearch: !1, paginated: !1, searchable: !1 };
   }
 }
-function z(e) {
+function M(e) {
   return e.map((t) => ({
     id: t.id,
     label: t.label,
@@ -22,17 +22,17 @@ function z(e) {
     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));
+function X(e, t) {
+  const r = new Set(e.map((l) => l.id)), n = [...e];
+  for (const l of t)
+    r.has(l.id) || (r.add(l.id), n.push(l));
   return n;
 }
-function F(e, t) {
-  const a = t.trim().toLowerCase();
-  return a ? e.filter((n) => n.label.toLowerCase().includes(a)) : e;
+function J(e, t) {
+  const r = t.trim().toLowerCase();
+  return r ? e.filter((n) => n.label.toLowerCase().includes(r)) : e;
 }
-function w() {
+function z() {
   return {
     options: [],
     page: 0,
@@ -43,18 +43,18 @@ function w() {
     search: ""
   };
 }
-function G(e, t) {
+function Q(e, t) {
   switch (t.kind) {
     case "load-start":
       return {
-        ...w(),
+        ...z(),
         loading: !0,
         search: t.search
       };
     case "load-success":
       return {
         ...e,
-        options: z(t.result.items),
+        options: M(t.result.items),
         totalCount: t.result.totalCount,
         page: t.page,
         loading: !1,
@@ -65,7 +65,7 @@ function G(e, t) {
     case "load-more-success":
       return {
         ...e,
-        options: O(e.options, z(t.result.items)),
+        options: X(e.options, M(t.result.items)),
         totalCount: t.result.totalCount,
         page: t.page,
         loadingMore: !1,
@@ -74,257 +74,285 @@ function G(e, t) {
     case "load-error":
       return { ...e, loading: !1, loadingMore: !1, error: !0 };
     case "reset":
-      return w();
+      return z();
     default:
       return e;
   }
 }
-function k(e) {
+function R(e) {
   return e.options.length < e.totalCount;
 }
-function q(e, t = 48) {
+function W(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(() => {
+const Y = 300;
+function Z(e) {
+  const t = u.useMemo(() => O(e?.type), [e?.type]), [r, n] = u.useReducer(Q, void 0, z), [l, d] = u.useState(""), [b, x] = u.useState(0), y = u.useCallback(() => x((s) => s + 1), []);
+  u.useEffect(() => {
     if (!e || t.serverSearch) return;
-    let i = !1;
+    let s = !1;
     return n({ kind: "load-start", search: "" }), e.load({}).then(
-      (f) => {
-        i || n({ kind: "load-success", result: f, page: 1 });
+      (h) => {
+        s || n({ kind: "load-success", result: h, page: 1 });
       },
       () => {
-        i || n({ kind: "load-error" });
+        s || n({ kind: "load-error" });
       }
     ), () => {
-      i = !0;
+      s = !0;
     };
-  }, [e, t.serverSearch]), p.useEffect(() => {
+  }, [e, t.serverSearch, b]), u.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 });
+    let s = !1;
+    const h = setTimeout(() => {
+      n({ kind: "load-start", search: l }), e.load({ search: l, page: 1, pageSize: e.pageSize }).then(
+        (C) => {
+          s || n({ kind: "load-success", result: C, page: 1 });
         },
         () => {
-          i || n({ kind: "load-error" });
+          s || n({ kind: "load-error" });
         }
       );
-    }, A);
+    }, Y);
     return () => {
-      i = !0, clearTimeout(f);
+      s = !0, clearTimeout(h);
     };
-  }, [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 }),
+  }, [e, t.serverSearch, l, b]);
+  const w = u.useCallback(() => {
+    if (!e || !t.paginated || r.loading || r.loadingMore || !R(r)) return;
+    const s = r.page + 1;
+    n({ kind: "load-more-start" }), e.load({ search: r.search, page: s, pageSize: e.pageSize }).then(
+      (h) => n({ kind: "load-more-success", result: h, page: s }),
       () => n({ kind: "load-error", more: !0 })
     );
-  }, [e, t.paginated, a]);
+  }, [e, t.paginated, r]);
   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,
+    options: t.serverSearch ? r.options : J(r.options, l),
+    loading: r.loading,
+    loadingMore: r.loadingMore,
+    error: r.error,
+    hasMore: R(r),
+    loadMore: w,
+    reload: y,
+    searchInput: l,
+    setSearchInput: d,
     flags: t
   };
 }
-const X = p.forwardRef(
+const $ = u.forwardRef(
   ({
     className: e,
     value: t,
-    onChange: a,
+    onChange: r,
     onBlur: n,
-    resource: o,
-    options: c,
-    placeholder: x,
-    disabled: S,
-    clearable: i = !1,
-    "data-testid": f,
-    "aria-invalid": y,
-    ...M
-  }, _) => {
-    const d = K(o), C = p.useMemo(() => c ? c.map((l) => ({
-      id: l.value,
-      label: l.label,
-      value: String(l.value),
-      group: l.group
-    })) : 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.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(
+    resource: l,
+    options: d,
+    placeholder: b,
+    disabled: x,
+    clearable: y = !1,
+    id: w,
+    "data-testid": k,
+    "aria-invalid": s,
+    "aria-labelledby": h,
+    "aria-describedby": C,
+    "aria-errormessage": j,
+    "aria-required": L,
+    ...P
+  }, T) => {
+    const c = Z(l), N = u.useMemo(() => d ? d.map((o) => ({
+      id: o.value,
+      label: o.label,
+      value: String(o.value),
+      group: o.group
+    })) : c.options, [d, c.options]), V = !d && !!l && c.flags.searchable, v = !d && c.loading, B = !d && c.error && N.length === 0, D = (o) => {
+      r?.(o);
+    }, E = (o) => {
+      o || n?.();
+    }, H = (o) => {
+      o.stopPropagation(), r?.(null);
+    }, U = (o) => {
+      c.flags.paginated && W(o.currentTarget) && c.loadMore();
+    }, I = y && t && !x && !v, q = V ? /* @__PURE__ */ a("div", { className: "sticky top-0 z-10 border-b bg-popover p-1", children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
-        value: d.searchInput,
-        onChange: (l) => d.setSearchInput(l.target.value),
-        onKeyDown: (l) => l.stopPropagation(),
+        value: c.searchInput,
+        onChange: (o) => c.setSearchInput(o.target.value),
+        onKeyDown: (o) => o.stopPropagation(),
         placeholder: "Search...",
-        className: "w-full rounded-sm border border-gray-200 px-2 py-1 text-sm outline-none focus:border-ring",
+        className: "w-full rounded-sm border border-input 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,
+    return /* @__PURE__ */ f("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ f(
+        i.Root,
         {
           "data-slot": "select",
           value: t || "",
-          onValueChange: R,
-          onOpenChange: j,
-          disabled: S || b,
-          ...M,
+          onValueChange: D,
+          onOpenChange: E,
+          disabled: x || v,
+          ...P,
           children: [
-            /* @__PURE__ */ r(
-              W,
+            /* @__PURE__ */ a(
+              ae,
               {
-                ref: _,
-                className: g(e, N && "pr-8"),
-                disabled: b,
-                "data-testid": f,
-                "aria-invalid": y,
-                children: /* @__PURE__ */ r(
-                  Q,
+                ref: T,
+                className: g(e, I && "pr-14"),
+                disabled: v,
+                id: w,
+                "data-testid": k,
+                "aria-invalid": s,
+                "aria-labelledby": h,
+                "aria-describedby": C,
+                "aria-errormessage": j,
+                "aria-required": L,
+                children: /* @__PURE__ */ a(
+                  te,
                   {
-                    placeholder: b ? "Loading..." : x || "Select an option..."
+                    placeholder: v ? "Loading..." : b || "Select an option..."
                   }
                 )
               }
             ),
-            /* @__PURE__ */ r(
-              Y,
+            /* @__PURE__ */ a(
+              re,
               {
-                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: [
+                header: q,
+                onViewportScroll: c.flags.paginated ? U : void 0,
+                children: v ? /* @__PURE__ */ a("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "Loading..." }) : B ? /* @__PURE__ */ f("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5 text-sm text-destructive", children: [
+                  /* @__PURE__ */ a("span", { children: "Failed to load options" }),
+                  /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      onKeyDown: (o) => o.stopPropagation(),
+                      onClick: (o) => {
+                        o.stopPropagation(), c.reload();
+                      },
+                      className: "rounded-sm px-2 py-0.5 text-xs font-medium text-foreground underline underline-offset-2 hover:text-destructive focus:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+                      children: "Retry"
+                    }
+                  )
+                ] }) : N.length === 0 ? /* @__PURE__ */ a("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "No options available" }) : /* @__PURE__ */ f(F, { children: [
                   (() => {
-                    const l = C.reduce(
-                      (u, v) => {
-                        const h = v.group || "default";
-                        return u[h] || (u[h] = []), u[h].push(v), u;
+                    const o = N.reduce(
+                      (p, S) => {
+                        const m = S.group || "default";
+                        return p[m] || (p[m] = []), p[m].push(S), p;
                       },
                       {}
                     );
-                    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));
+                    return Object.entries(o).map(([p, S]) => /* @__PURE__ */ f(ee, { children: [
+                      p !== "default" && /* @__PURE__ */ a(oe, { children: p }),
+                      S.map((m) => /* @__PURE__ */ a(ne, { value: m.value, children: m.label }, m.id))
+                    ] }, p));
                   })(),
-                  d.loadingMore && /* @__PURE__ */ r("div", { className: "px-2 py-1.5 text-center text-xs text-muted-foreground", children: "Loading more..." })
+                  c.loadingMore && /* @__PURE__ */ a("div", { className: "px-2 py-1.5 text-center text-xs text-muted-foreground", children: "Loading more..." })
                 ] })
               }
             )
           ]
         }
       ),
-      N && /* @__PURE__ */ r(
+      I && /* @__PURE__ */ a(
         "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: B,
+          onClick: H,
           "aria-label": "Clear selection",
           tabIndex: -1,
-          children: /* @__PURE__ */ r(E, { className: "size-4" })
+          children: /* @__PURE__ */ a(A, { className: "size-4" })
         }
       )
     ] });
   }
 );
-X.displayName = "Select";
-function J({ ...e }) {
-  return /* @__PURE__ */ r(s.Group, { "data-slot": "select-group", ...e });
+$.displayName = "Select";
+function ee({ ...e }) {
+  return /* @__PURE__ */ a(i.Group, { "data-slot": "select-group", ...e });
 }
-function Q({ ...e }) {
-  return /* @__PURE__ */ r(s.Value, { "data-slot": "select-value", ...e });
+function te({ ...e }) {
+  return /* @__PURE__ */ a(i.Value, { "data-slot": "select-value", ...e });
 }
-function W({
+function ae({
   className: e,
   size: t = "default",
-  children: a,
+  children: r,
   "aria-label": n,
-  ...o
+  "aria-labelledby": l,
+  ...d
 }) {
-  return /* @__PURE__ */ m(
-    s.Trigger,
+  const b = n ?? (l ? void 0 : "Select an option");
+  return /* @__PURE__ */ f(
+    i.Trigger,
     {
       "data-slot": "select-trigger",
       "data-size": t,
-      "aria-label": n || "Select an option",
+      "aria-label": b,
+      "aria-labelledby": l,
       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",
+        "relative h-9 w-full rounded-md border border-input pl-3 pr-9 py-2 text-sm shadow-xs transition-colors",
+        "bg-background text-foreground",
+        "placeholder:text-muted-foreground data-[placeholder]:text-muted-foreground",
         "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "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",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-muted-foreground",
         e
       ),
-      style: { backgroundColor: "white", color: "black" },
-      ...o,
+      ...d,
       children: [
-        a,
-        /* @__PURE__ */ r(s.Icon, { asChild: !0, children: /* @__PURE__ */ r(I, { className: "size-4 opacity-50" }) })
+        r,
+        /* @__PURE__ */ a(i.Icon, { asChild: !0, children: /* @__PURE__ */ a(_, { className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 opacity-50" }) })
       ]
     }
   );
 }
-function Y({
+function re({
   className: e,
   children: t,
-  position: a = "popper",
+  position: r = "popper",
   header: n,
-  onViewportScroll: o,
-  ...c
+  onViewportScroll: l,
+  ...d
 }) {
-  return /* @__PURE__ */ r(s.Portal, { children: /* @__PURE__ */ m(
-    s.Content,
+  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ f(
+    i.Content,
     {
       "data-slot": "select-content",
       className: g(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-white text-black shadow-md",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground 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",
-        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",
+        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",
         e
       ),
-      style: a === "popper" ? { width: "var(--radix-select-trigger-width)" } : void 0,
-      position: a,
-      ...c,
+      style: r === "popper" ? { width: "var(--radix-select-trigger-width)" } : void 0,
+      position: r,
+      ...d,
       children: [
         n,
-        /* @__PURE__ */ r(ee, {}),
-        /* @__PURE__ */ r(
-          s.Viewport,
+        /* @__PURE__ */ a(le, {}),
+        /* @__PURE__ */ a(
+          i.Viewport,
           {
-            className: g("p-1", a === "popper" && "w-full"),
-            onScroll: o,
+            className: g("p-1", r === "popper" && "w-full"),
+            onScroll: l,
             children: t
           }
         ),
-        /* @__PURE__ */ r(te, {})
+        /* @__PURE__ */ a(se, {})
       ]
     }
   ) });
 }
-function Z({ className: e, ...t }) {
-  return /* @__PURE__ */ r(
-    s.Label,
+function oe({ className: e, ...t }) {
+  return /* @__PURE__ */ a(
+    i.Label,
     {
       "data-slot": "select-label",
       className: g("text-muted-foreground px-2 py-1.5 text-xs", e),
@@ -332,63 +360,63 @@ function Z({ className: e, ...t }) {
     }
   );
 }
-function $({
+function ne({
   className: e,
   children: t,
-  ...a
+  ...r
 }) {
-  return /* @__PURE__ */ m(
-    s.Item,
+  return /* @__PURE__ */ f(
+    i.Item,
     {
       "data-slot": "select-item",
       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",
         e
       ),
-      ...a,
+      ...r,
       children: [
-        /* @__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 })
+        /* @__PURE__ */ a("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ a(i.ItemIndicator, { children: /* @__PURE__ */ a(G, { className: "size-4" }) }) }),
+        /* @__PURE__ */ a(i.ItemText, { children: t })
       ]
     }
   );
 }
-function ee({
+function le({
   className: e,
   ...t
 }) {
-  return /* @__PURE__ */ r(
-    s.ScrollUpButton,
+  return /* @__PURE__ */ a(
+    i.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
       className: g("flex cursor-default items-center justify-center py-1", e),
       ...t,
-      children: /* @__PURE__ */ r(H, { className: "size-4" })
+      children: /* @__PURE__ */ a(K, { className: "size-4" })
     }
   );
 }
-function te({
+function se({
   className: e,
   ...t
 }) {
-  return /* @__PURE__ */ r(
-    s.ScrollDownButton,
+  return /* @__PURE__ */ a(
+    i.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
       className: g("flex cursor-default items-center justify-center py-1", e),
       ...t,
-      children: /* @__PURE__ */ r(I, { className: "size-4" })
+      children: /* @__PURE__ */ a(_, { className: "size-4" })
     }
   );
 }
 export {
-  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
+  $ as Select,
+  re as SelectContent,
+  ee as SelectGroup,
+  ne as SelectItem,
+  oe as SelectLabel,
+  se as SelectScrollDownButton,
+  le as SelectScrollUpButton,
+  ae as SelectTrigger,
+  te as SelectValue
 };