@spear-ai/spectral 1.4.1 → 1.4.3

package/dist/MultiSelect/MultiSelectBase.js

@@ -1,265 +1,324 @@
 "use client";
 import "../styles/main.css";
-import { jsxs as a, jsx as s, Fragment as ue } from "react/jsx-runtime";
-import { cn as p } from "../utils/twUtils.js";
-import { forwardRef as pe, useId as me, useState as I, useRef as P, useMemo as F, useCallback as b, useEffect as be } from "react";
-import { X as K } from "../x-Dl66o_vF.js";
-import { c as O } from "../createLucideIcon-B_8CJpcQ.js";
-import { L as fe } from "../loader-circle-CdRVlFhN.js";
+import { jsxs as o, jsx as r, Fragment as de } from "react/jsx-runtime";
+import "../Icons/AnalyzeIcon.js";
+import "../Icons/AnnotationsIcon.js";
+import "../Icons/ApprovedIcon.js";
+import "../Icons/CalendarIcon.js";
+import "../Icons/CheckCircleIcon.js";
+import "../Icons/CheckSquareIcon.js";
+import { CheckmarkIcon as ce } from "../Icons/CheckmarkIcon.js";
+import { ChevronDownIcon as ue } from "../Icons/ChevronDownIcon.js";
+import "../Icons/ChevronUpIcon.js";
+import "../Icons/ClockIcon.js";
+import "../Icons/CloseCircleIcon.js";
+import { CloseIcon as P } from "../Icons/CloseIcon.js";
+import "../Icons/DashboardIcon.js";
+import "../Icons/DatabaseIcon.js";
+import "../Icons/DeleteIcon.js";
+import "../Icons/DurationIcon.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/GoToFirstIcon.js";
+import "../Icons/GoToLastIcon.js";
+import "../Icons/HarmonicCursorsIcon.js";
+import "../Icons/InfoIcon.js";
+import "../Icons/LabelIcon.js";
+import "../Icons/LassoIcon.js";
+import "../Icons/LineToolIcon.js";
+import "../Icons/LineToolIcon2.js";
+import "../Icons/LiveViewIcon.js";
+import { LoaderIcon as pe } from "../Icons/LoaderIcon.js";
+import "../Icons/LocationIcon.js";
+import "../Icons/LogoutIcon.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/ResetIcon.js";
+import "../Icons/ReviewedIcon.js";
+import "../Icons/ScissorsIcon.js";
+import "../Icons/SettingsIcon.js";
+import "../Icons/SortAscendingIcon.js";
+import "../Icons/SortDescendingIcon.js";
+import "../Icons/StackIcon.js";
+import "../Icons/StarIcon.js";
+import "../Icons/TrashIcon.js";
+import "../Icons/UndoIcon.js";
+import "../Icons/UserIcon.js";
+import "../Icons/WarningIcon.js";
+import "../Icons/ZoomAllIcon.js";
+import "../Icons/ZoomXIcon.js";
+import "../Icons/ZoomYIcon.js";
+import { ErrorMessage as me } from "../utils/formFieldUtils.js";
+import { cn as f } from "../utils/twUtils.js";
+import { forwardRef as be, useId as fe, useState as L, useRef as _, useMemo as T, useCallback as b, useEffect as ge } from "react";
+import { c as he } from "../createLucideIcon-B_8CJpcQ.js";
 /**
  * @license lucide-react v0.546.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ge = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], he = O("check", ge);
-/**
- * @license lucide-react v0.546.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const xe = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], ye = O("chevron-down", xe);
-/**
- * @license lucide-react v0.546.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const ve = [
+const xe = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], Ne = O("search", ve), S = "h-4 w-4", we = "h-5 w-5", ke = (t) => ({
+], ye = he("search", xe), ve = "h-4 w-4", we = (i) => ({
   error: "border-danger hover:border-danger focus-visible:border-danger focus-visible:ring-danger",
   loading: "cursor-wait border-input-border--disabled",
   disabled: "cursor-not-allowed opacity-50 border-input-border--disabled bg-input-bg--disabled",
   default: ""
-})[t], Ce = (t, l, i) => p(
+})[i], Ne = (i, l, d) => f(
   "flex h-12 w-full items-center justify-between rounded-lg border border-input-border bg-input-bg px-4 py-3 text-sm",
   "hover:border-input-border--hover focus:border-input-border--focus focus:outline-none",
   "focus:ring-2 focus:ring-black focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2",
   "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-input-border--disabled disabled:bg-input-bg--disabled",
   "transition duration-200 text-input-text",
   l && "border-input-border--focus ring-2 ring-black ring-offset-2",
-  ke(t),
-  i
-), Se = (t) => p(
+  we(i),
+  d
+), ke = (i) => f(
   "absolute top-full left-0 right-0 z-50 mt-1 max-h-80 overflow-hidden rounded-lg border border-input-border bg-input-bg shadow-lg",
   "transition-all duration-200 origin-top",
-  t ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none"
-), Ie = (t) => {
-  const l = P(null);
-  return be(() => {
-    const i = (o) => {
-      l.current && !l.current.contains(o.target) && t();
+  i ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none"
+), Ce = (i) => {
+  const l = _(null);
+  return ge(() => {
+    const d = (n) => {
+      l.current && !l.current.contains(n.target) && i();
     };
-    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
-  }, [t]), l;
-}, Oe = (t, l, i) => {
-  const [o, m] = I(-1), u = b(
-    (d) => {
-      const y = {
+    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
+  }, [i]), l;
+}, Ie = (i, l, d) => {
+  const [n, g] = L(-1), I = b(
+    (u) => {
+      const v = {
         ArrowDown: () => {
-          d.preventDefault(), m((f) => Math.min(f + 1, t.length - 1));
+          u.preventDefault(), g((h) => Math.min(h + 1, i.length - 1));
         },
         ArrowUp: () => {
-          d.preventDefault(), m((f) => Math.max(f - 1, -1));
+          u.preventDefault(), g((h) => Math.max(h - 1, -1));
         },
         Enter: () => {
-          d.preventDefault(), o >= 0 && t[o] && l(t[o].value);
+          u.preventDefault(), n >= 0 && i[n] && l(i[n].value);
         },
         " ": () => {
-          d.preventDefault(), o >= 0 && t[o] && l(t[o].value);
+          u.preventDefault(), n >= 0 && i[n] && l(i[n].value);
         },
         Escape: () => {
-          d.preventDefault(), i();
+          u.preventDefault(), d();
         }
-      }[d.key];
-      y && y();
+      }[u.key];
+      v && v();
     },
-    [t, o, l, i]
+    [i, n, l, d]
   );
-  return { focusedIndex: o, setFocusedIndex: m, handleKeyDown: u };
-}, De = pe(
+  return { focusedIndex: n, setFocusedIndex: g, handleKeyDown: I };
+}, Se = be(
   ({
-    value: t = [],
-    onChange: l,
-    options: i = [],
-    placeholder: o = "Select options",
-    maxCount: m = 3,
-    state: u = "default",
-    errorMessage: d,
-    emptyMessage: D = "No options found",
-    loadingMessage: y = "Loading options...",
-    searchPlaceholder: f = "Search options...",
-    selectAllLabel: T = "Select all",
-    clearAllLabel: B = "Clear all",
-    sortAlphabetically: j = !1,
-    showSelectAll: G = !0,
-    showClearAll: H = !0,
-    showSearch: V = !0,
-    closeOnSelect: Z = !1,
-    name: L,
-    id: q,
-    label: z,
-    className: U,
-    "aria-label": X,
-    "aria-describedby": J,
-    ..._
-  }, Q) => {
-    const W = me(), E = q || `${L}-${W}`, M = `${E}-error`, [g, v] = I(!1), [w, Y] = I(""), ee = Ie(() => v(!1)), R = P(null), k = _.disabled || u === "disabled", te = u === "loading", re = u === "error", h = F(() => {
-      let e = i.filter((n) => n.label.toLowerCase().includes(w.toLowerCase()));
-      return j && (e = [...e].sort((n, r) => n.label.localeCompare(r.label))), e;
-    }, [i, w, j]), x = F(() => {
-      const e = {}, n = [];
-      return h.forEach((r) => {
-        r.group ? (e[r.group] || (e[r.group] = []), e[r.group].push(r)) : n.push(r);
-      }), { groups: e, ungrouped: n, hasGroups: Object.keys(e).length > 0 };
-    }, [h]), { focusedIndex: se, handleKeyDown: ne } = Oe(h, N, () => v(!1)), le = b(() => {
-      k || v((e) => (e || setTimeout(() => R.current?.focus(), 0), !e));
-    }, [k]);
-    function N(e) {
-      if (i.find((c) => c.value === e)?.disabled) return;
-      const r = t.includes(e) ? t.filter((c) => c !== e) : [...t, e];
-      l(r), Z && v(!1);
-    }
-    const ae = b(() => {
-      const e = i.filter((r) => !r.disabled).map((r) => r.value), n = e.every((r) => t.includes(r));
-      l(n ? [] : e);
-    }, [i, t, l]), $ = b(() => {
-      l([]);
-    }, [l]), ie = b((e) => {
-      Y(e.target.value);
-    }, []), oe = b(
-      (e, n) => {
-        n.stopPropagation(), N(e);
+    className: i,
+    clearAllLabel: l = "Clear all",
+    closeOnSelect: d = !1,
+    emptyMessage: n = "No options found",
+    errorMessage: g,
+    id: I,
+    label: u,
+    loadingMessage: M = "Loading options...",
+    maxCount: v = 3,
+    name: h,
+    onChange: p,
+    options: m = [],
+    placeholder: $ = "Select options",
+    searchPlaceholder: B = "Search options...",
+    selectAllLabel: H = "Select all",
+    showClearAll: V = !0,
+    showSearch: G = !0,
+    showSelectAll: U = !0,
+    sortAlphabetically: R = !1,
+    state: x = "default",
+    value: a = [],
+    "aria-label": Z,
+    "aria-describedby": q,
+    ...z
+  }, J) => {
+    const Q = fe(), S = I || `${h}-${Q}`, K = `${S}-error`, [y, k] = L(!1), [D, W] = L(""), X = Ce(() => k(!1)), A = _(null), O = z.disabled || x === "disabled", Y = x === "loading", ee = x === "error", w = T(() => {
+      let e = m.filter((s) => s.label.toLowerCase().includes(D.toLowerCase()));
+      return R && (e = [...e].sort((s, t) => s.label.localeCompare(t.label))), e;
+    }, [m, D, R]), N = T(() => {
+      const e = {}, s = [];
+      return w.forEach((t) => {
+        t.group ? (e[t.group] || (e[t.group] = []), e[t.group].push(t)) : s.push(t);
+      }), { groups: e, ungrouped: s, hasGroups: Object.keys(e).length > 0 };
+    }, [w]), C = b(
+      (e) => {
+        if (m.find((c) => c.value === e)?.disabled) return;
+        const t = a.includes(e) ? a.filter((c) => c !== e) : [...a, e];
+        p(t), d && k(!1);
+      },
+      [m, a, p, d]
+    ), { focusedIndex: te, handleKeyDown: re } = Ie(w, C, () => k(!1)), se = b(() => {
+      O || k((e) => (e || setTimeout(() => A.current?.focus(), 0), !e));
+    }, [O]), ie = b(() => {
+      const e = m.filter((t) => !t.disabled).map((t) => t.value), s = e.every((t) => a.includes(t));
+      p(s ? [] : e);
+    }, [m, a, p]), j = b(() => {
+      p([]);
+    }, [p]), oe = b((e) => {
+      W(e.target.value);
+    }, []), le = b(
+      (e, s) => {
+        s.stopPropagation(), C(e);
       },
-      [N]
-    ), de = () => {
-      if (t.length === 0)
-        return /* @__PURE__ */ s("span", { className: "text-input-text-placeholder", children: o });
-      const e = t.slice(0, m), n = t.length - m;
-      return /* @__PURE__ */ a("div", { className: "flex items-center gap-1 flex-wrap", children: [
-        e.map((r) => {
-          const c = i.find((C) => C.value === r);
-          return c ? /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-input-bg--selected text-input-text rounded-md text-xs", children: [
+      [C]
+    ), ne = () => {
+      if (a.length === 0)
+        return /* @__PURE__ */ r("span", { className: "text-input-text-placeholder", children: $ });
+      const e = a.slice(0, v), s = a.length - v;
+      return /* @__PURE__ */ o("div", { className: "flex items-center gap-1 flex-wrap", children: [
+        e.map((t) => {
+          const c = m.find((E) => E.value === t);
+          return c ? /* @__PURE__ */ o("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-input-bg--selected text-input-text rounded-md text-xs", children: [
             c.label,
-            /* @__PURE__ */ s("button", { type: "button", onClick: (C) => oe(r, C), className: "hover:text-danger focus:outline-none", "aria-label": `Remove ${c.label}`, children: /* @__PURE__ */ s(K, { className: "h-3 w-3" }) })
-          ] }, r) : null;
+            /* @__PURE__ */ r("button", { "aria-label": `Remove ${c.label}`, className: "hover:text-danger focus:outline-none", "data-testid": "spectral-multiselect-remove-item-button", onClick: (E) => le(t, E), type: "button", children: /* @__PURE__ */ r(P, { size: 12 }) })
+          ] }, t) : null;
         }),
-        n > 0 && /* @__PURE__ */ a("span", { className: "text-input-text-secondary text-xs", children: [
+        s > 0 && /* @__PURE__ */ o("span", { className: "text-input-text-secondary text-xs", children: [
           "+",
-          n,
+          s,
           " more"
         ] })
       ] });
-    }, A = (e, n) => {
-      const r = t.includes(e.value);
-      return /* @__PURE__ */ a(
+    }, F = (e, s) => {
+      const t = a.includes(e.value);
+      return /* @__PURE__ */ o(
         "button",
         {
-          type: "button",
-          className: p(
+          className: f(
             "w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-input-bg--hover focus:bg-input-bg--hover focus:outline-none",
             "disabled:opacity-50 disabled:cursor-not-allowed",
-            n === se && "bg-input-bg--hover",
-            r && "text-input-text font-medium"
+            s === te && "bg-input-bg--hover",
+            t && "text-input-text font-medium"
           ),
-          onClick: () => N(e.value),
           disabled: e.disabled,
+          onClick: () => C(e.value),
+          type: "button",
           children: [
-            /* @__PURE__ */ s("div", { className: p("flex items-center justify-center w-4 h-4 border border-input-border rounded", r && "bg-primary border-primary"), children: r && /* @__PURE__ */ s(he, { className: "h-3 w-3 text-white" }) }),
-            /* @__PURE__ */ s("span", { children: e.label })
+            /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-selected-indicator", className: f("flex items-center justify-center w-4 h-4 border border-input-border rounded", t && "bg-primary border-primary"), children: t && /* @__PURE__ */ r(ce, { size: 12 }) }),
+            /* @__PURE__ */ r("span", { children: e.label })
           ]
         },
         e.value
       );
-    }, ce = () => ({
+    }, ae = () => ({
       "--multiselect-border-radius": "0.5rem",
       "--multiselect-trigger-height": "3rem",
       "--multiselect-dropdown-max-height": "20rem"
     });
-    return /* @__PURE__ */ a("div", { className: "w-full", "data-testid": "multiselect-root", children: [
-      /* @__PURE__ */ a("div", { ref: ee, className: "relative", "data-testid": "multiselect-wrapper", onKeyDown: g ? ne : void 0, children: [
-        /* @__PURE__ */ a(
+    return /* @__PURE__ */ o("div", { className: "w-full", "data-testid": "spectral-multiselect-root", children: [
+      /* @__PURE__ */ o("div", { className: "relative", "data-testid": "spectral-multiselect-wrapper", onKeyDown: y ? re : void 0, ref: X, children: [
+        /* @__PURE__ */ o(
           "button",
           {
-            ref: Q,
+            "aria-controls": y ? S : void 0,
+            "aria-describedby": f(ee && K, q),
+            "aria-expanded": y,
+            "aria-label": Z || u,
+            className: Ne(x, y, i),
+            "data-state": x,
+            "data-testid": "spectral-multiselect-trigger",
+            disabled: O,
+            id: S,
+            name: h,
+            onClick: se,
+            ref: J,
+            role: "combobox",
+            style: ae(),
             type: "button",
-            id: E,
-            name: L,
-            className: Ce(u, g, U),
-            onClick: le,
-            disabled: k,
-            "aria-label": X || z,
-            "aria-describedby": p(re && M, J),
-            "aria-expanded": g,
-            "aria-haspopup": "listbox",
-            "data-state": u,
-            style: ce(),
-            ..._,
+            ...z,
             children: [
-              /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: de() }),
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2 ml-2", children: [
-                t.length > 0 && /* @__PURE__ */ s(
-                  "button",
+              /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", "data-testid": "spectral-multiselect-selected-items", children: ne() }),
+              /* @__PURE__ */ o("div", { className: "flex items-center gap-2 ml-2", children: [
+                a.length > 0 && /* @__PURE__ */ r(
+                  "span",
                   {
-                    type: "button",
+                    "aria-label": "Clear all selections",
+                    className: "text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer",
+                    "data-testid": "spectral-multiselect-clear-all-button",
                     onClick: (e) => {
-                      e.stopPropagation(), $();
+                      e.stopPropagation(), j();
                     },
-                    className: "text-input-icon hover:text-input-icon--hover focus:outline-none",
-                    "aria-label": "Clear all selections",
-                    children: /* @__PURE__ */ s(K, { className: S })
+                    onKeyDown: (e) => {
+                      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), j());
+                    },
+                    tabIndex: 0,
+                    children: /* @__PURE__ */ r(P, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ s(ye, { className: p(we, "text-input-icon transition-transform duration-200", g && "rotate-180") })
+                /* @__PURE__ */ r(ue, { className: f("text-input-icon transition-transform duration-200", y && "rotate-180"), size: 20 })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ s("div", { className: Se(g), "data-testid": "multiselect-dropdown", children: /* @__PURE__ */ a("div", { className: "p-1", children: [
-          V && /* @__PURE__ */ a("div", { className: "relative mb-2", children: [
-            /* @__PURE__ */ s(Ne, { className: p(S, "absolute left-3 top-1/2 -translate-y-1/2 text-input-icon") }),
-            /* @__PURE__ */ s(
+        /* @__PURE__ */ r("div", { className: ke(y), "data-testid": "spectral-multiselect-dropdown", children: /* @__PURE__ */ o("div", { className: "p-1", children: [
+          G && /* @__PURE__ */ o("div", { className: "relative mb-2", children: [
+            /* @__PURE__ */ r(ye, { className: f(ve, "absolute left-3 top-1/2 -translate-y-1/2 text-input-icon") }),
+            /* @__PURE__ */ r(
               "input",
               {
-                ref: R,
-                type: "text",
+                "aria-label": "Search options",
                 className: "w-full pl-9 pr-3 py-2 text-sm border border-input-border rounded-md bg-input-bg focus:border-input-border--focus focus:outline-none focus:ring-1 focus:ring-black",
-                placeholder: f,
-                value: w,
-                onChange: ie,
-                "aria-label": "Search options"
+                "data-testid": "spectral-multiselect-search-input",
+                onChange: oe,
+                placeholder: B,
+                ref: A,
+                type: "text",
+                value: D
               }
             )
           ] }),
-          /* @__PURE__ */ s("div", { className: "max-h-64 overflow-y-auto", role: "listbox", "aria-multiselectable": "true", children: te ? /* @__PURE__ */ a("div", { className: "flex items-center justify-center gap-2 py-6 text-sm text-input-text-secondary", children: [
-            /* @__PURE__ */ s(fe, { className: p(S, "animate-spin") }),
-            y
-          ] }) : h.length === 0 ? /* @__PURE__ */ s("div", { className: "py-6 text-center text-sm text-input-text-secondary", children: D }) : /* @__PURE__ */ a(ue, { children: [
-            G && /* @__PURE__ */ a("div", { className: "mb-1", children: [
-              /* @__PURE__ */ s("button", { type: "button", className: "w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-input-text-secondary hover:bg-input-bg--hover focus:bg-input-bg--hover focus:outline-none", onClick: ae, children: T }),
-              /* @__PURE__ */ s("div", { className: "mx-3 my-1 h-px bg-input-border" })
+          /* @__PURE__ */ r("div", { className: "max-h-64 overflow-y-auto", role: "listbox", "aria-multiselectable": "true", children: Y ? /* @__PURE__ */ o("div", { "data-testid": "spectral-multiselect-loading", className: "flex items-center justify-center gap-2 py-6 text-sm text-input-text-secondary", children: [
+            /* @__PURE__ */ r(pe, {}),
+            M
+          ] }) : w.length === 0 ? /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-empty-message", className: "py-6 text-center text-sm text-input-text-secondary", children: n }) : /* @__PURE__ */ o(de, { children: [
+            U && /* @__PURE__ */ o("div", { className: "mb-1", children: [
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  className: "w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-input-text-secondary hover:bg-input-bg--hover focus:bg-input-bg--hover focus:outline-none",
+                  "data-testid": "spectral-multiselect-select-all-button",
+                  onClick: ie,
+                  type: "button",
+                  children: H
+                }
+              ),
+              /* @__PURE__ */ r("div", { className: "mx-3 my-1 h-px bg-input-border" })
             ] }),
-            x.ungrouped.length > 0 && /* @__PURE__ */ s("div", { className: "mb-1", children: x.ungrouped.map((e, n) => A(e, n)) }),
-            Object.entries(x.groups).map(([e, n]) => /* @__PURE__ */ a("div", { className: "mb-1", children: [
-              (x.ungrouped.length > 0 || Object.keys(x.groups).indexOf(e) > 0) && /* @__PURE__ */ s("div", { className: "mx-3 my-1 h-px bg-input-border" }),
-              /* @__PURE__ */ s("div", { className: "px-3 py-1 text-xs font-semibold text-input-text-secondary uppercase tracking-wide", children: e }),
-              n.map((r, c) => A(r, h.indexOf(r)))
+            N.ungrouped.length > 0 && /* @__PURE__ */ r("div", { className: "mb-1", children: N.ungrouped.map((e, s) => F(e, s)) }),
+            Object.entries(N.groups).map(([e, s]) => /* @__PURE__ */ o("div", { className: "mb-1", "data-testid": "spectral-multiselect-group", children: [
+              (N.ungrouped.length > 0 || Object.keys(N.groups).indexOf(e) > 0) && /* @__PURE__ */ r("div", { className: "mx-3 my-1 h-px bg-input-border" }),
+              /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-group-name", className: "px-3 py-1 text-xs font-semibold text-input-text-secondary uppercase tracking-wide", children: e }),
+              s.map((t, c) => F(t, w.indexOf(t)))
             ] }, e)),
-            H && t.length > 0 && /* @__PURE__ */ a("div", { className: "mt-1", children: [
-              /* @__PURE__ */ s("div", { className: "mx-3 my-1 h-px bg-input-border" }),
-              /* @__PURE__ */ s("button", { type: "button", className: "w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-danger hover:bg-danger-50 focus:bg-danger-50 focus:outline-none", onClick: $, children: B })
+            V && a.length > 0 && /* @__PURE__ */ o("div", { className: "mt-1", children: [
+              /* @__PURE__ */ r("div", { className: "mx-3 my-1 h-px bg-input-border" }),
+              /* @__PURE__ */ r("button", { className: "w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-danger hover:bg-danger-50 focus:bg-danger-50 focus:outline-none", "data-testid": "spectral-multiselect-clear-all-button", onClick: j, type: "button", children: l })
             ] })
           ] }) })
         ] }) })
       ] }),
-      u === "error" && d && /* @__PURE__ */ s("p", { id: M, className: "mt-1.5 text-sm text-danger-500", "data-testid": "multiselect-error-message", "aria-live": "polite", "aria-atomic": "true", children: d })
+      x === "error" && g && /* @__PURE__ */ r(me, { id: K, dataTestId: "spectral-multiselect-error-message", message: g })
     ] });
   }
 );
-De.displayName = "MultiSelectBase";
+Se.displayName = "MultiSelectBase";
 export {
-  De as MultiSelectBase
+  Se as MultiSelectBase
 };

package/dist/MultiSelect/MutiSelect.d.ts

@@ -1,14 +1,16 @@
 import { MultiSelectBaseProps } from './MultiSelectBase';
-export interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'onChange' | 'options'> {
+export interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'onChange' | 'options' | 'value'> {
     onSearchChange?: (search: string) => void;
-    onValueChange: (value: string[]) => void;
+    onValueChange?: (value: string[]) => void;
+    value?: string[];
     options: Array<{
+        disabled?: boolean;
+        group?: string;
         label: string;
         value: string;
-        group?: string;
     }>;
-    loading?: boolean;
     emptyText?: string;
+    loading?: boolean;
     sortAlphabetically?: boolean;
 }
 export declare const MultiSelect: import('react').ForwardRefExoticComponent<MultiSelectProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/MultiSelect/MutiSelect.js

@@ -1,18 +1,19 @@
 "use client";
 import "../styles/main.css";
-import { jsx as m } from "react/jsx-runtime";
-import { MultiSelectBase as p } from "./MultiSelectBase.js";
-import { forwardRef as u } from "react";
-const f = u(({ onValueChange: t, options: a, loading: l = !1, emptyText: o = "No matches found.", state: s, ...r }, i) => {
-  const d = a.map((e) => ({
-    label: e.label,
-    value: e.value,
+import { jsx as u } from "react/jsx-runtime";
+import { MultiSelectBase as f } from "./MultiSelectBase.js";
+import { forwardRef as c } from "react";
+const n = c(({ emptyText: l = "No matches found.", loading: t = !1, onValueChange: d, options: s, state: i, value: o = [], ...a }, r) => {
+  const m = s.map((e) => ({
+    disabled: e.disabled ?? !1,
     group: e.group,
-    disabled: !1
-  }));
-  return /* @__PURE__ */ m(p, { ref: i, onChange: t, options: d, state: l ? "loading" : s, emptyMessage: o, ...r });
+    label: e.label,
+    value: e.value
+  })), b = t ? "loading" : i;
+  return /* @__PURE__ */ u(f, { disabled: a.disabled, "data-disabled": a.disabled, emptyMessage: l, onChange: d ?? (() => {
+  }), options: m, ref: r, state: b, value: o, ...a });
 });
-f.displayName = "MultiSelect";
+n.displayName = "MultiSelect";
 export {
-  f as MultiSelect
+  n as MultiSelect
 };

package/dist/Popover.js

@@ -218,11 +218,12 @@ function $(e) {
   return e ? "open" : "closed";
 }
 var ce = F, pe = y, ie = D, le = M, ue = T;
-const Re = ({ ...e }) => /* @__PURE__ */ s(ce, { "data-slot": "popover", ...e }), Ae = ({ ...e }) => /* @__PURE__ */ s(ie, { "data-slot": "popover-trigger", ...e }), xe = ({ align: e = "center", className: n, side: r = "bottom", sideOffset: a = 4, width: o = "w-fit", ...t }) => /* @__PURE__ */ s(le, { children: /* @__PURE__ */ s(
+const Re = ({ ...e }) => /* @__PURE__ */ s(ce, { "data-slot": "popover", "data-testid": "spectral-popover", ...e }), Ae = ({ ...e }) => /* @__PURE__ */ s(ie, { "data-slot": "popover-trigger", "data-testid": "spectral-popover-trigger", ...e }), xe = ({ align: e = "center", className: n, side: r = "bottom", sideOffset: a = 4, width: o = "w-fit", ...t }) => /* @__PURE__ */ s(le, { children: /* @__PURE__ */ s(
   ue,
   {
     align: e,
     "data-slot": "popover-content",
+    "data-testid": "spectral-popover-content",
     side: r,
     sideOffset: a,
     className: Q(