@skiddph/prui 0.9.0 → 0.10.0

package/dist/core/select.js

@@ -1,248 +1,331 @@
-import { jsxs as D, jsx as y, Fragment as W } from "react/jsx-runtime";
-import * as a from "react";
-import { ChevronDown as q, Check as H } from "lucide-react";
-import { cn as A } from "./cn.js";
-import { useOverlayStack as B, useEscapeKey as G, Portal as J } from "./overlay.js";
-import { useAnchoredPosition as Q } from "./anchor.js";
-import { typeaheadIndex as X, endIndex as Y, homeIndex as Z, moveIndex as F } from "./list-nav.js";
-const L = a.createContext(null);
-function E() {
-  const i = a.useContext(L);
-  if (!i) throw new Error("Select parts must be used inside <Select>");
-  return i;
+import { jsxs as P, jsx as b, Fragment as G } from "react/jsx-runtime";
+import * as r from "react";
+import { ChevronDown as te, Search as re, Check as ae } from "lucide-react";
+import { cn as V } from "./cn.js";
+import { useOverlayStack as ne, useEscapeKey as se, Portal as le } from "./overlay.js";
+import { useAnchoredPosition as ie } from "./anchor.js";
+import { typeaheadIndex as oe, endIndex as K, homeIndex as ue, moveIndex as Q } from "./list-nav.js";
+import { usePruiI18n as ce } from "../i18n.js";
+const J = r.createContext(null);
+function $() {
+  const o = r.useContext(J);
+  if (!o) throw new Error("Select parts must be used inside <Select>");
+  return o;
 }
-const _ = ({
-  options: i,
-  value: u,
-  defaultValue: b,
-  placeholder: d = "Select...",
-  disabled: f,
+const B = (o) => o === void 0 ? [] : Array.isArray(o) ? o : [o], de = ({
+  options: o,
+  value: m,
+  defaultValue: h,
+  placeholder: v = "Select...",
+  disabled: g,
   name: l,
-  id: v,
-  onChange: n,
-  onOpenChange: p,
-  children: w,
-  ...g
+  onChange: c,
+  onOpenChange: n,
+  searchable: f = !1,
+  multiple: y = !1,
+  id: w,
+  children: N,
+  ...T
 }) => {
-  var o;
-  const [m, h] = a.useState(b ?? ""), [x, S] = a.useState(!1), [e, V] = a.useState(null), [O, P] = a.useState({}), T = u !== void 0 ? u : m, I = a.useCallback((r, c) => {
-    P((s) => {
-      if (c === null) {
-        if (!(r in s)) return s;
-        const R = { ...s };
-        return delete R[r], R;
+  const [A, p] = r.useState(B(h)), [a, j] = r.useState(!1), [R, C] = r.useState(null), [F, M] = r.useState({}), U = m !== void 0, S = U ? B(m) : A, q = (t) => {
+    let u;
+    y ? u = S.includes(t) ? S.filter((k) => k !== t) : [...S, t] : u = S.includes(t) ? [] : [t], U || p(u), c == null || c(y ? u : u[0] ?? "");
+  }, W = (t) => {
+    j(t), n == null || n(t);
+  }, H = () => R == null ? void 0 : R.focus(), D = (t) => {
+    var u;
+    return F[t] ?? ((u = o == null ? void 0 : o.find((k) => k.value === t)) == null ? void 0 : u.label);
+  }, L = S.length ? S.map((t) => D(t) ?? t).join(", ") : void 0, E = r.useCallback((t, u) => {
+    M((k) => {
+      if (u === null) {
+        if (!(t in k)) return k;
+        const z = { ...k };
+        return delete z[t], z;
       }
-      return s[r] === c ? s : { ...s, [r]: c };
+      return k[t] === u ? k : { ...k, [t]: u };
     });
-  }, []), N = (r) => {
-    u === void 0 && h(r), n == null || n(r);
-  }, k = (r) => {
-    S(r), p == null || p(r);
-  }, j = () => e == null ? void 0 : e.focus(), t = O[T] ?? ((o = i == null ? void 0 : i.find((r) => r.value === T)) == null ? void 0 : o.label);
-  return /* @__PURE__ */ D(
-    L.Provider,
+  }, []);
+  return /* @__PURE__ */ P(
+    J.Provider,
     {
-      value: { value: T, displayValue: t, open: x, triggerEl: e, triggerId: (e == null ? void 0 : e.id) || void 0, setValue: N, setOpen: k, registerTrigger: V, returnFocusToTrigger: j, registerLabel: I },
+      value: { values: S, multiple: y, searchable: f, displayValue: L, open: a, triggerEl: R, triggerId: (R == null ? void 0 : R.id) || void 0, toggleValue: q, setOpen: W, registerTrigger: C, returnFocusToTrigger: H, registerLabel: E },
       children: [
-        l ? /* @__PURE__ */ y("input", { type: "hidden", name: l, value: T }) : null,
-        w ?? /* @__PURE__ */ D(W, { children: [
-          /* @__PURE__ */ y(U, { disabled: f, id: v, ...g, children: /* @__PURE__ */ y($, { placeholder: d }) }),
-          /* @__PURE__ */ y(z, { children: (i ?? []).map((r) => /* @__PURE__ */ y(M, { value: r.value, disabled: r.disabled, children: r.label }, r.value)) })
+        l ? /* @__PURE__ */ b("input", { type: "hidden", name: l, value: S.join(",") }) : null,
+        N ?? /* @__PURE__ */ P(G, { children: [
+          /* @__PURE__ */ b(X, { disabled: g, id: w, ...T, children: /* @__PURE__ */ b(Y, { placeholder: v }) }),
+          /* @__PURE__ */ b(Z, { children: (o ?? []).map((t) => /* @__PURE__ */ b(_, { value: t.value, disabled: t.disabled, children: t.label }, t.value)) })
         ] })
       ]
     }
   );
 };
-_.displayName = "Select";
-const U = a.forwardRef(
-  ({ className: i, children: u, onClick: b, onKeyDown: d, disabled: f, id: l, ...v }, n) => {
-    const { open: p, setOpen: w, registerTrigger: g } = E(), m = a.useRef(null), h = a.useId(), x = l ?? `prui-select-${h}`;
-    a.useEffect(() => (g(m.current), () => g(null)), [g]);
-    const S = `${x}-listbox`;
-    return /* @__PURE__ */ D(
+de.displayName = "Select";
+const X = r.forwardRef(
+  ({ className: o, children: m, onClick: h, onKeyDown: v, disabled: g, id: l, ...c }, n) => {
+    const { open: f, setOpen: y, registerTrigger: w } = $(), N = r.useRef(null), T = r.useId(), A = l ?? `prui-select-${T}`;
+    r.useEffect(() => (w(N.current), () => w(null)), [w]);
+    const p = `${A}-listbox`;
+    return /* @__PURE__ */ P(
       "button",
       {
-        ref: (e) => {
-          m.current = e, typeof n == "function" ? n(e) : n && (n.current = e);
+        ref: (a) => {
+          N.current = a, typeof n == "function" ? n(a) : n && (n.current = a);
         },
-        id: x,
+        id: A,
         type: "button",
         role: "combobox",
-        "aria-expanded": p,
+        "aria-expanded": f,
         "aria-haspopup": "listbox",
-        "aria-controls": p ? S : void 0,
-        disabled: f,
-        "data-state": p ? "open" : "closed",
-        className: A(
+        "aria-controls": f ? p : void 0,
+        disabled: g,
+        "data-state": f ? "open" : "closed",
+        className: V(
           "prui-select-trigger flex h-9 w-full items-center justify-between gap-2 border border-[var(--prui-line)]",
           "bg-[var(--prui-background)] rounded-[var(--prui-radius)] px-3 text-sm text-[var(--prui-fg)]",
           "outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30",
           "disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
-          i
+          o
         ),
-        onClick: (e) => {
-          b == null || b(e), e.defaultPrevented || w(!p);
+        onClick: (a) => {
+          h == null || h(a), a.defaultPrevented || y(!f);
         },
-        onKeyDown: (e) => {
-          d == null || d(e), !e.defaultPrevented && !p && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), w(!0));
+        onKeyDown: (a) => {
+          v == null || v(a), !a.defaultPrevented && !f && (a.key === "ArrowDown" || a.key === "ArrowUp" || a.key === "Enter" || a.key === " ") && (a.preventDefault(), y(!0));
         },
-        ...v,
+        ...c,
         children: [
-          u,
-          /* @__PURE__ */ y(q, { className: A("h-4 w-4 shrink-0 text-[var(--prui-dim)] transition-transform", p && "rotate-180"), "aria-hidden": !0 })
+          m,
+          /* @__PURE__ */ b(te, { className: V("h-4 w-4 shrink-0 text-[var(--prui-dim)] transition-transform", f && "rotate-180"), "aria-hidden": !0 })
         ]
       }
     );
   }
 );
-U.displayName = "SelectTrigger";
-const $ = a.forwardRef(
-  ({ className: i, placeholder: u, children: b, ...d }, f) => {
-    const { value: l, displayValue: v } = E();
-    return /* @__PURE__ */ y("span", { ref: f, className: A("truncate", i), ...d, children: b ?? v ?? (l || /* @__PURE__ */ y("span", { className: "text-[var(--prui-dim)]", children: u })) });
+X.displayName = "SelectTrigger";
+const Y = r.forwardRef(
+  ({ className: o, placeholder: m, children: h, ...v }, g) => {
+    const { values: l, displayValue: c, multiple: n } = $(), f = l.length === 0;
+    return /* @__PURE__ */ b("span", { ref: g, className: V("truncate", o), ...v, children: h ?? (f ? /* @__PURE__ */ b("span", { className: "text-[var(--prui-dim)]", children: m }) : n && l.length > 1 ? /* @__PURE__ */ P(G, { children: [
+      /* @__PURE__ */ b("span", { className: "text-[var(--prui-fg)]", children: (c == null ? void 0 : c.split(", ")[0]) ?? l[0] }),
+      /* @__PURE__ */ P("span", { className: "ml-1 rounded-[var(--prui-radius-full)] bg-[var(--prui-raise)] px-1.5 text-xs text-[var(--prui-dim)]", children: [
+        "+",
+        l.length - 1
+      ] })
+    ] }) : c ?? l[0]) });
   }
 );
-$.displayName = "SelectValue";
-const z = a.forwardRef(
-  ({ className: i, children: u, id: b, ...d }, f) => {
-    const { open: l, setOpen: v, triggerEl: n, setValue: p, returnFocusToTrigger: w } = E(), g = a.useRef(null), [m, h] = a.useState(-1), x = a.useRef({ buffer: "", at: 0 }), S = a.useRef(null);
-    S.current = n;
-    const [e, V] = a.useState(null), { setElement: O, isTop: P } = B(l);
-    G(l, P, () => {
-      v(!1), w();
+Y.displayName = "SelectValue";
+const Z = r.forwardRef(
+  ({ className: o, children: m, id: h, ...v }, g) => {
+    const { open: l, setOpen: c, triggerEl: n, toggleValue: f, returnFocusToTrigger: y, searchable: w, multiple: N } = $(), T = r.useRef(null), A = r.useRef(null), [p, a] = r.useState(-1), [j, R] = r.useState(""), C = r.useRef({ buffer: "", at: 0 }), F = r.useRef(null);
+    F.current = n;
+    const [M, U] = r.useState(null), { t: S } = ce(), { setElement: q, isTop: W } = ne(l);
+    se(l, W, () => {
+      c(!1), y();
     });
-    const { ref: T, position: I } = Q({ active: l, anchorRef: S, side: "bottom", align: "start" }), N = a.useCallback(() => {
-      const t = g.current;
-      return t ? Array.from(t.querySelectorAll("[role='option']")) : [];
-    }, []), k = (t) => {
-      var o;
-      h(t), (o = N()[t]) == null || o.focus();
+    const { ref: H, position: D } = ie({ active: l, anchorRef: F, side: "bottom", align: "start" }), L = r.useCallback(() => {
+      const e = T.current;
+      return e ? Array.from(e.querySelectorAll("[role='option']")) : [];
+    }, []), E = r.useCallback(
+      () => L().filter((e) => e.style.display !== "none"),
+      [L]
+    ), t = (e) => {
+      const s = e.trim().toLowerCase();
+      for (const i of L())
+        i.style.display = (i.textContent ?? "").toLowerCase().includes(s) ? "" : "none";
+      a(-1);
+    };
+    r.useEffect(() => {
+      if (!l) {
+        R("");
+        return;
+      }
+      t("");
+    }, [l]);
+    const u = (e) => {
+      var d;
+      const s = E();
+      if (e < 0 || s.length === 0) return;
+      const i = Math.min(e, s.length - 1);
+      a(i), (d = s[i]) == null || d.focus();
     };
-    if (a.useEffect(() => {
-      var s;
-      if (!l || !e) return;
-      h(-1);
-      const t = N(), o = t.findIndex((R) => R.getAttribute("aria-selected") === "true"), r = t.findIndex((R) => R.getAttribute("aria-disabled") !== "true"), c = o >= 0 ? o : r;
-      c >= 0 && (h(c), (s = t[c]) == null || s.focus());
-    }, [l, e, N]), !l) return null;
-    const j = (t) => {
-      const o = N(), r = (c) => {
-        var s;
-        return ((s = o[c]) == null ? void 0 : s.getAttribute("aria-disabled")) !== "true";
+    if (r.useEffect(() => {
+      var x, I;
+      if (!l || !M) return;
+      if (a(-1), w) {
+        (x = A.current) == null || x.focus();
+        return;
+      }
+      const e = L(), s = e.findIndex((O) => O.getAttribute("aria-selected") === "true"), i = e.findIndex((O) => O.getAttribute("aria-disabled") !== "true"), d = s >= 0 ? s : i;
+      d >= 0 && (a(d), (I = e[d]) == null || I.focus());
+    }, [l, M, L, w]), !l) return null;
+    const k = (e) => {
+      var d;
+      if (((d = e.target) == null ? void 0 : d.tagName) === "INPUT") {
+        e.key === "Tab" && c(!1);
+        return;
+      }
+      const s = E(), i = (x) => {
+        var I;
+        return ((I = s[x]) == null ? void 0 : I.getAttribute("aria-disabled")) !== "true";
       };
-      switch (t.key) {
+      switch (e.key) {
         case "ArrowDown":
-          t.preventDefault(), k(F(m, 1, o.length, { enabled: r }));
+          e.preventDefault(), u(Q(p, 1, s.length, { enabled: i }));
           break;
         case "ArrowUp":
-          t.preventDefault(), k(F(m, -1, o.length, { enabled: r }));
+          e.preventDefault(), u(Q(p, -1, s.length, { enabled: i }));
           break;
         case "Home":
-          t.preventDefault(), k(Z(o.length, r));
+          e.preventDefault(), u(ue(s.length, i));
           break;
         case "End":
-          t.preventDefault(), k(Y(o.length, r));
+          e.preventDefault(), u(K(s.length, i));
           break;
         case "Enter":
         case " ": {
-          t.preventDefault();
-          const c = o[m];
-          if (c && r(m)) {
-            const s = c.dataset.value;
-            s !== void 0 ? (p(s), v(!1), w()) : c.click();
+          e.preventDefault();
+          const x = s[p];
+          if (x && i(p)) {
+            const I = x.dataset.value;
+            I !== void 0 ? (f(I), N || (c(!1), y())) : x.click();
           }
           break;
         }
         case "Tab":
-          v(!1);
+          c(!1);
           break;
         default:
-          if (t.key.length === 1) {
-            const c = () => o.map((R) => R.textContent ?? ""), { index: s } = X(c, x.current, t.key, m);
-            s >= 0 && s !== m && (t.preventDefault(), k(s));
+          if (e.key.length === 1) {
+            const x = () => s.map((O) => O.textContent ?? ""), { index: I } = oe(x, C.current, e.key, p);
+            I >= 0 && I !== p && (e.preventDefault(), u(I));
           }
       }
-    };
-    return /* @__PURE__ */ y(J, { children: /* @__PURE__ */ y(
+    }, z = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const i = E().findIndex((d) => d.getAttribute("aria-disabled") !== "true");
+        i >= 0 && u(i);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const s = E(), i = K(s.length, (d) => {
+          var x;
+          return ((x = s[d]) == null ? void 0 : x.getAttribute("aria-disabled")) !== "true";
+        });
+        i >= 0 && u(i);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const s = E(), i = s.findIndex((d) => d.getAttribute("aria-disabled") !== "true");
+        if (i >= 0) {
+          const d = s[i].dataset.value;
+          d !== void 0 && (f(d), N || (c(!1), y()));
+        }
+      }
+    }, ee = w && j !== "" && E().length === 0;
+    return /* @__PURE__ */ b(le, { children: /* @__PURE__ */ P(
       "div",
       {
-        ref: (t) => {
-          g.current = t, V(t), T(t), O(t), typeof f == "function" ? f(t) : f && (f.current = t);
+        ref: (e) => {
+          T.current = e, U(e), H(e), q(e), typeof g == "function" ? g(e) : g && (g.current = e);
         },
-        id: b ?? (n != null && n.id ? `${n.id}-listbox` : void 0),
+        id: h ?? (n != null && n.id ? `${n.id}-listbox` : void 0),
         role: "listbox",
         "aria-labelledby": (n == null ? void 0 : n.id) || void 0,
+        "aria-multiselectable": N || void 0,
         tabIndex: -1,
         "data-state": l ? "open" : "closed",
-        onKeyDown: j,
-        className: A(
+        onKeyDown: k,
+        className: V(
           "prui-select-content fixed z-[var(--prui-z-overlay)] max-h-60 overflow-auto p-1",
           "bg-[var(--prui-surface)] border border-[var(--prui-line)] rounded-[var(--prui-radius)] shadow-[var(--prui-shadow-md)] outline-none",
-          i
+          o
         ),
         style: {
-          top: (I == null ? void 0 : I.top) ?? -9999,
-          left: (I == null ? void 0 : I.left) ?? -9999,
+          top: (D == null ? void 0 : D.top) ?? -9999,
+          left: (D == null ? void 0 : D.left) ?? -9999,
           minWidth: n ? Math.max(n.offsetWidth, 160) : 160
         },
-        ...d,
-        children: u
+        ...v,
+        children: [
+          w ? /* @__PURE__ */ b("div", { className: "sticky top-0 z-[var(--prui-z-content)] mb-1 bg-[var(--prui-surface)] p-1", children: /* @__PURE__ */ P("div", { className: "relative", children: [
+            /* @__PURE__ */ b(re, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+            /* @__PURE__ */ b(
+              "input",
+              {
+                ref: A,
+                type: "text",
+                role: "searchbox",
+                "aria-label": S.search,
+                value: j,
+                onChange: (e) => {
+                  R(e.target.value), t(e.target.value);
+                },
+                onKeyDown: z,
+                placeholder: `${S.search}…`,
+                className: "h-8 w-full rounded-[calc(var(--prui-radius)-2px)] border border-[var(--prui-line)] bg-[var(--prui-background)] pl-8 pr-2 text-sm text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)] outline-none focus:border-[var(--prui-brand)]"
+              }
+            )
+          ] }) }) : null,
+          ee ? /* @__PURE__ */ b("div", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", role: "option", "aria-selected": "false", "aria-disabled": "true", children: S.noResults }) : m
+        ]
       }
     ) });
   }
 );
-z.displayName = "SelectContent";
-const M = a.forwardRef(
-  ({ className: i, value: u, disabled: b, children: d, onClick: f, tabIndex: l = -1, ...v }, n) => {
-    const { value: p, setValue: w, setOpen: g, returnFocusToTrigger: m, registerLabel: h } = E(), x = p === u, S = typeof d == "string" || typeof d == "number" ? String(d) : void 0;
-    return a.useEffect(() => {
-      S !== void 0 && h(u, S);
-    }, [u, S, h]), /* @__PURE__ */ D(
+Z.displayName = "SelectContent";
+const _ = r.forwardRef(
+  ({ className: o, value: m, disabled: h, children: v, onClick: g, tabIndex: l = -1, ...c }, n) => {
+    const { values: f, toggleValue: y, setOpen: w, returnFocusToTrigger: N, multiple: T, registerLabel: A } = $(), p = f.includes(m), a = typeof v == "string" || typeof v == "number" ? String(v) : void 0;
+    return r.useEffect(() => {
+      a !== void 0 && A(m, a);
+    }, [m, a, A]), /* @__PURE__ */ P(
       "div",
       {
         ref: n,
         role: "option",
-        "aria-selected": x,
-        "aria-disabled": b,
-        "data-selected": x || void 0,
-        "data-value": u,
+        "aria-selected": p,
+        "aria-disabled": h,
+        "data-selected": p || void 0,
+        "data-value": m,
         tabIndex: l,
-        className: A(
+        className: V(
           "prui-select-item relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--prui-radius)-1px)]",
           "py-1.5 pl-3 pr-8 text-sm text-[var(--prui-fg)] hover:bg-[var(--prui-raise)] focus-visible:bg-[var(--prui-raise)] outline-none",
-          x && "font-medium",
-          b && "opacity-50 pointer-events-none",
-          i
+          p && "font-medium",
+          h && "opacity-50 pointer-events-none",
+          o
         ),
-        onClick: (e) => {
-          f == null || f(e), !(e.defaultPrevented || b) && (w(u), g(!1), m());
+        onClick: (j) => {
+          g == null || g(j), !(j.defaultPrevented || h) && (y(m), T || (w(!1), N()));
         },
-        ...v,
+        ...c,
         children: [
-          d,
-          x ? /* @__PURE__ */ y(H, { className: "absolute right-2 h-4 w-4 text-[var(--prui-brand)]", "aria-hidden": !0 }) : null
+          v,
+          p ? /* @__PURE__ */ b(ae, { className: "absolute right-2 h-4 w-4 text-[var(--prui-brand)]", "aria-hidden": !0 }) : null
         ]
       }
     );
   }
 );
-M.displayName = "SelectItem";
-const ne = {
+_.displayName = "SelectItem";
+const xe = {
   name: "Select",
   props: [
     { name: "options", type: "SelectOption[]", default: "[]", control: "object" },
-    { name: "value", type: "string", default: "undefined", control: "text" },
-    { name: "defaultValue", type: "string", default: "undefined", control: "text" },
+    { name: "value", type: "string | string[]", default: "undefined", control: "text" },
+    { name: "defaultValue", type: "string | string[]", default: "undefined", control: "text" },
     { name: "placeholder", type: "string", default: "'Select...'", control: "text" },
     { name: "disabled", type: "boolean", default: "false", control: "boolean" },
-    { name: "onChange", type: "(value: string) => void", default: null, control: "none" }
+    { name: "onChange", type: "(value: string | string[]) => void", default: null, control: "none", description: "string in single mode, string[] with multiple." },
+    { name: "searchable", type: "boolean", default: "false", control: "boolean", description: "Adds a filter input to the listbox." },
+    { name: "multiple", type: "boolean", default: "false", control: "boolean", description: "Multi-select; items toggle, value becomes string[]." }
   ]
 };
 export {
-  _ as Select,
-  z as SelectContent,
-  M as SelectItem,
-  U as SelectTrigger,
-  $ as SelectValue,
-  ne as selectPropsMeta
+  de as Select,
+  Z as SelectContent,
+  _ as SelectItem,
+  X as SelectTrigger,
+  Y as SelectValue,
+  xe as selectPropsMeta
 };