@spear-ai/spectral 1.9.0 → 1.10.0

package/dist/Combobox.js

@@ -1,175 +1,109 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { _ as I, C as $, a as H, b as J } from "./ComboboxBase-CxNxYtdT.js";
-import "./Icons/AnalyzeIcon.js";
-import "./Icons/AnnotationsIcon.js";
-import "./Icons/ApprovedIcon.js";
-import "./Icons/ArrowDownIcon.js";
-import "./Icons/ArrowUpIcon.js";
-import "./Icons/BoxToolIcon.js";
-import "./Icons/CalendarIcon.js";
-import "./Icons/CheckCircleIcon.js";
-import "./Icons/CheckSquareIcon.js";
-import "./Icons/CheckmarkIcon.js";
-import { ChevronDownIcon as Q } from "./Icons/ChevronDownIcon.js";
-import "./Icons/ChevronUpIcon.js";
-import "./Icons/ClockIcon.js";
-import "./Icons/CloseCircleIcon.js";
-import "./Icons/CloseIcon.js";
-import "./Icons/DashboardIcon.js";
-import "./Icons/DatabaseIcon.js";
-import "./Icons/DeleteIcon.js";
-import "./Icons/DurationIcon.js";
-import "./Icons/EditIcon.js";
-import "./Icons/EmailIcon.js";
-import "./Icons/EraserIcon.js";
-import "./Icons/ErrorIcon.js";
-import "./Icons/EyeClosedIcon.js";
-import "./Icons/EyeClosedIcon2.js";
-import "./Icons/EyeOpenIcon.js";
-import "./Icons/FileDownloadIcon.js";
-import "./Icons/GoToFirstIcon.js";
-import "./Icons/GoToLastIcon.js";
-import "./Icons/HarmonicCursorsIcon.js";
-import "./Icons/InfoIcon.js";
-import "./Icons/KeyboardIcon.js";
-import "./Icons/LabelIcon.js";
-import "./Icons/LassoIcon.js";
-import "./Icons/LineToolIcon.js";
-import "./Icons/LiveViewIcon.js";
-import { LoaderIcon as U } from "./Icons/LoaderIcon.js";
-import "./Icons/LocationIcon.js";
-import "./Icons/LogoutIcon.js";
-import "./Icons/MeasureIcon.js";
-import "./Icons/MessagesIcon.js";
-import "./Icons/MetadataIcon.js";
-import "./Icons/MinusIcon.js";
-import "./Icons/OntologyIcon.js";
-import "./Icons/PanelIconClose.js";
-import "./Icons/PanelIconOpen.js";
-import "./Icons/PlayIcon.js";
-import "./Icons/PlusIcon.js";
-import "./Icons/PolygonIcon.js";
-import "./Icons/ResetIcon.js";
-import "./Icons/ReviewedIcon.js";
-import "./Icons/ScissorsIcon.js";
-import "./Icons/SearchIcon.js";
-import "./Icons/SettingsIcon.js";
-import "./Icons/SortAscendingIcon.js";
-import "./Icons/SortAtoZIcon.js";
-import "./Icons/SortDescendingIcon.js";
-import "./Icons/SortZtoAIcon.js";
-import "./Icons/StackIcon.js";
-import "./Icons/StarIcon.js";
-import "./Icons/TrashIcon.js";
-import "./Icons/UndoIcon.js";
-import "./Icons/User2Icon.js";
-import "./Icons/UserIcon.js";
-import "./Icons/WarningIcon.js";
-import "./Icons/ZoomAllIcon.js";
-import "./Icons/ZoomXIcon.js";
-import "./Icons/ZoomYIcon.js";
-import { Label as W } from "./Label.js";
-import { InputGroup as X, InputGroupAddon as Y } from "./primitives/input-group.js";
-import { useFormFieldId as Z, useFormFieldState as oo, getAriaProps as to, getFormFieldCSSProperties as ro, getStateClasses as eo, ErrorMessage as io, LoadingState as no, EmptyState as mo, getErrorMessageId as ao } from "./utils/formFieldUtils.js";
-import { cn as n } from "./utils/twUtils.js";
-import { useRef as N, useState as y, useCallback as so } from "react";
-const po = ({
-  className: S,
-  disabled: F,
-  emptyMessage: g = "No options found.",
-  errorMessage: x,
-  id: D,
-  label: e,
-  labelClassName: E,
-  loadingMessage: k = "Loading…",
-  name: u,
-  onValueChange: z,
-  options: b = [],
-  placeholder: L = "Search…",
-  ref: A,
-  required: O,
-  state: m = "default",
-  value: a = "",
-  "aria-describedby": P,
-  "aria-label": f
-}) => {
-  process.env.NODE_ENV !== "production" && !e && !f && console.warn("Combobox: provide either `label` or `aria-label` for an accessible name.");
-  const v = N(null), C = N(null), s = Z(D, u), p = `${s}-listbox`, w = ao(s), { isDisabled: r, isLoading: l, isInvalid: R } = oo(F, m), V = to(m, P, O, w), [d, i] = y(!1), [_, h] = y(""), j = b.find((t) => t.value === a), B = (t) => {
-    z?.(t === a ? "" : t), h(""), i(!1);
-  }, G = (t) => {
-    t.key === "Escape" && i(!1);
-  }, K = so(() => {
-    requestAnimationFrame(() => {
-      C.current?.contains(document.activeElement) || (i(!1), h(""));
-    });
-  }, []), M = () => {
-    r || l || (v.current?.focus(), i(!0));
-  }, T = () => l ? /* @__PURE__ */ o("div", { id: p, role: "listbox", children: /* @__PURE__ */ o(no, { message: k }) }) : b.length === 0 ? /* @__PURE__ */ o("div", { id: p, role: "listbox", children: /* @__PURE__ */ o(mo, { message: g }) }) : /* @__PURE__ */ c($, { id: p, children: [
-    /* @__PURE__ */ o(H, { children: g }),
-    b.map((t) => /* @__PURE__ */ o(J, { "data-checked": a === t.value || void 0, disabled: t.disabled, onMouseDown: (q) => q.preventDefault(), onSelect: () => B(t.value), value: t.label, children: t.label }, t.value))
-  ] });
-  return /* @__PURE__ */ c("div", { className: "w-full", ref: A, children: [
-    u && /* @__PURE__ */ o("input", { type: "hidden", name: u, value: a, disabled: r }),
-    e && /* @__PURE__ */ o(W, { className: n("text-text-primary mb-2 block", E, r && "text-text-secondary"), "data-testid": "spectral-combobox-label", htmlFor: s, children: e }),
-    /* @__PURE__ */ c(I, { ref: C, label: f ?? e, onKeyDown: G, className: n("relative w-full", S), children: [
-      /* @__PURE__ */ c(
-        X,
-        {
-          "data-slot": "combobox-content",
-          "data-state": m,
-          "data-testid": "spectral-combobox-trigger",
-          className: n(
-            "border-input-border bg-input-bg h-12 cursor-pointer border-2",
-            "hover:border-input-border--hover transition duration-200",
-            "focus-within:border-input-border--focus focus-within:outline-none",
-            "ring-0!",
-            eo(m),
-            d && "border-input-border--focus",
-            r && "pointer-events-none"
-          ),
-          onClick: M,
-          style: ro(),
-          children: [
-            /* @__PURE__ */ o(
-              I.Input,
-              {
-                ref: v,
-                autoComplete: "off",
-                "data-slot": "input-group-control",
-                "aria-controls": p,
-                "aria-expanded": d,
-                "aria-label": f ?? e,
-                className: "placeholder:text-input-text-placeholder min-w-0 flex-1 border-0 bg-transparent px-3 py-1 text-base outline-hidden focus-visible:ring-0 focus-visible:outline-none",
-                disabled: r,
-                id: s,
-                onBlur: K,
-                onFocus: () => !r && !l && i(!0),
-                onValueChange: h,
-                placeholder: j?.label ?? L,
-                role: "combobox",
-                value: _,
-                ...V
-              }
-            ),
-            /* @__PURE__ */ o(Y, { align: "inline-end", children: l ? /* @__PURE__ */ o(U, { className: "text-muted-foreground size-5 motion-safe:animate-spin" }) : /* @__PURE__ */ o(Q, { className: n("text-muted-foreground size-5 shrink-0 transition-transform duration-200", d && "rotate-180") }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ o(
-        "div",
-        {
-          className: n("border-input-border bg-input-bg absolute top-full left-0 z-50 mt-1 w-full rounded-lg border p-1 shadow-md", "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:slide-in-from-top-2", !d && "hidden"),
-          "data-testid": "spectral-combobox-content",
-          children: T()
-        }
-      )
-    ] }),
-    R && x && /* @__PURE__ */ o(io, { dataTestId: "spectral-combobox-error-message", id: w, message: x })
-  ] });
-};
-po.displayName = "Combobox";
-export {
-  po as Combobox
+import { ChevronDownIcon as e } from "./Icons/ChevronDownIcon.js";
+import { LoaderIcon as t } from "./Icons/LoaderIcon.js";
+import { t as n } from "./twUtils-VNWgstKL.js";
+import { EmptyState as ee, ErrorMessage as r, LoadingState as i, getAriaProps as a, getErrorMessageId as o, getFormFieldCSSProperties as s, getStateClasses as c, useFormFieldId as l, useFormFieldState as u } from "./utils/formFieldUtils.js";
+import { Label as d } from "./Label.js";
+import { InputGroup as f, InputGroupAddon as p } from "./primitives/input-group.js";
+import { a as m, i as h, n as g, o as _ } from "./ComboboxBase-D8Nf4xC-.js";
+import { useCallback as v, useRef as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/Combobox/Combobox.tsx
+var C = ({ className: C, disabled: w, emptyMessage: T = "No options found.", errorMessage: E, id: D, label: O, labelClassName: k, loadingMessage: A = "Loading…", name: j, onValueChange: M, options: N = [], placeholder: P = "Search…", ref: F, required: I, state: L = "default", value: R = "", "aria-describedby": z, "aria-label": B }) => {
+	process.env.NODE_ENV !== "production" && !O && !B && console.warn("Combobox: provide either `label` or `aria-label` for an accessible name.");
+	let V = y(null), H = y(null), U = l(D, j), W = `${U}-listbox`, G = o(U), { isDisabled: K, isLoading: q, isInvalid: J } = u(w, L), Y = a(L, z, I, G), [X, Z] = b(!1), [Q, $] = b(""), te = N.find((e) => e.value === R), ne = (e) => {
+		M?.(e === R ? "" : e), $(""), Z(!1);
+	}, re = (e) => {
+		e.key === "Escape" && Z(!1);
+	}, ie = v(() => {
+		requestAnimationFrame(() => {
+			H.current?.contains(document.activeElement) || (Z(!1), $(""));
+		});
+	}, []), ae = () => {
+		K || q || (V.current?.focus(), Z(!0));
+	}, oe = () => q ? /* @__PURE__ */ x("div", {
+		id: W,
+		role: "listbox",
+		children: /* @__PURE__ */ x(i, { message: A })
+	}) : N.length === 0 ? /* @__PURE__ */ x("div", {
+		id: W,
+		role: "listbox",
+		children: /* @__PURE__ */ x(ee, { message: T })
+	}) : /* @__PURE__ */ S(m, {
+		id: W,
+		children: [/* @__PURE__ */ x(g, { children: T }), N.map((e) => /* @__PURE__ */ x(h, {
+			"data-checked": R === e.value || void 0,
+			disabled: e.disabled,
+			onMouseDown: (e) => e.preventDefault(),
+			onSelect: () => ne(e.value),
+			value: e.label,
+			children: e.label
+		}, e.value))]
+	});
+	return /* @__PURE__ */ S("div", {
+		className: "w-full",
+		ref: F,
+		children: [
+			j && /* @__PURE__ */ x("input", {
+				type: "hidden",
+				name: j,
+				value: R,
+				disabled: K
+			}),
+			O && /* @__PURE__ */ x(d, {
+				className: n("mb-2 block text-text-primary", k, K && "text-text-secondary"),
+				"data-testid": "spectral-combobox-label",
+				htmlFor: U,
+				children: O
+			}),
+			/* @__PURE__ */ S(_, {
+				ref: H,
+				label: B ?? O,
+				onKeyDown: re,
+				className: n("relative w-full", C),
+				children: [/* @__PURE__ */ S(f, {
+					"data-slot": "combobox-content",
+					"data-state": L,
+					"data-testid": "spectral-combobox-trigger",
+					className: n("h-12 cursor-pointer border-2 border-input-border bg-input-bg", "transition duration-200 hover:border-input-border--hover", "focus-within:border-input-border--focus focus-within:outline-none", "ring-0!", c(L), X && "border-input-border--focus", K && "pointer-events-none"),
+					onClick: ae,
+					style: s(),
+					children: [/* @__PURE__ */ x(_.Input, {
+						ref: V,
+						autoComplete: "off",
+						"data-slot": "input-group-control",
+						"aria-controls": W,
+						"aria-expanded": X,
+						"aria-label": B ?? O,
+						className: "min-w-0 px-3 py-1 text-base flex-1 border-0 bg-transparent outline-hidden placeholder:text-input-text-placeholder focus-visible:ring-0 focus-visible:outline-none",
+						disabled: K,
+						id: U,
+						onBlur: ie,
+						onFocus: () => !K && !q && Z(!0),
+						onValueChange: $,
+						placeholder: te?.label ?? P,
+						role: "combobox",
+						value: Q,
+						...Y
+					}), /* @__PURE__ */ x(p, {
+						align: "inline-end",
+						children: q ? /* @__PURE__ */ x(t, { className: "size-5 text-muted-foreground motion-safe:animate-spin" }) : /* @__PURE__ */ x(e, { className: n("size-5 text-muted-foreground shrink-0 transition-transform duration-200", X && "rotate-180") })
+					})]
+				}), /* @__PURE__ */ x("div", {
+					className: n("left-0 mt-1 rounded-lg p-1 shadow-md absolute top-full z-50 w-full border border-input-border bg-input-bg", "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-2 motion-safe:zoom-in-95", !X && "hidden"),
+					"data-testid": "spectral-combobox-content",
+					children: oe()
+				})]
+			}),
+			J && E && /* @__PURE__ */ x(r, {
+				dataTestId: "spectral-combobox-error-message",
+				id: G,
+				message: E
+			})
+		]
+	});
 };
+C.displayName = "Combobox";
+//#endregion
+export { C as Combobox };