@spear-ai/spectral 1.6.17 → 1.8.0

package/dist/MultiSelect/MultiSelectBase.d.ts

@@ -31,7 +31,7 @@ export interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButt
     'aria-describedby'?: string;
 }
 export declare const MultiSelectBase: {
-    ({ ref, className, clearAllLabel, closeOnSelect, emptyMessage, errorMessage, id, label, loadingMessage, maxCount, name, onChange, options, placeholder, searchPlaceholder, selectAllLabel, showClearAll, showSearch, showSelectAll, sortAlphabetically, state, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: MultiSelectBaseProps & {
+    ({ className, clearAllLabel, closeOnSelect, emptyMessage, errorMessage, id, label, loadingMessage, maxCount, name, onChange, options, placeholder, ref, searchPlaceholder, selectAllLabel, showClearAll, showSearch, showSelectAll, sortAlphabetically, state, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: MultiSelectBaseProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/MultiSelect/MultiSelectBase.js

@@ -1,6 +1,6 @@
 "use client";
 import "../styles/main.css";
-import { jsxs as o, jsx as r, Fragment as de } from "react/jsx-runtime";
+import { jsxs as d, jsx as s, Fragment as ce } from "react/jsx-runtime";
 import "../Icons/AnalyzeIcon.js";
 import "../Icons/AnnotationsIcon.js";
 import "../Icons/ApprovedIcon.js";
@@ -9,12 +9,12 @@ import "../Icons/ArrowUpIcon.js";
 import "../Icons/CalendarIcon.js";
 import "../Icons/CheckCircleIcon.js";
 import "../Icons/CheckSquareIcon.js";
-import { CheckmarkIcon as ce } from "../Icons/CheckmarkIcon.js";
+import { CheckmarkIcon as pe } 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 T } from "../Icons/CloseIcon.js";
+import { CloseIcon as Q } from "../Icons/CloseIcon.js";
 import "../Icons/DashboardIcon.js";
 import "../Icons/DatabaseIcon.js";
 import "../Icons/DeleteIcon.js";
@@ -34,9 +34,8 @@ import "../Icons/KeyboardIcon.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 { LoaderIcon as me } from "../Icons/LoaderIcon.js";
 import "../Icons/LocationIcon.js";
 import "../Icons/LogoutIcon.js";
 import "../Icons/MeasureIcon.js";
@@ -48,10 +47,11 @@ 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 { SearchIcon as fe } from "../Icons/SearchIcon.js";
 import "../Icons/SettingsIcon.js";
 import "../Icons/SortAscendingIcon.js";
 import "../Icons/SortAtoZIcon.js";
@@ -67,260 +67,336 @@ 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 x } from "../utils/twUtils.js";
-import { useId as be, useState as L, useRef as $, useMemo as _, useCallback as b, useEffect as fe } from "react";
-import { c as ge } from "../createLucideIcon-D4r5Phnh.js";
-const he = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], xe = ge("search", he), ye = "h-4 w-4", ve = (s) => ({
+import { R as be, T as ge, P as he, C as xe } from "../index-Q3N6lgwg.js";
+import { ErrorMessage as ye } from "../utils/formFieldUtils.js";
+import { cn as y } from "../utils/twUtils.js";
+import { useId as ve, useState as V, useRef as we, useMemo as v, useCallback as w, useEffect as Ne } from "react";
+const Ie = "h-4 w-4", Ce = (b) => ({
   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: ""
-})[s], we = (s, n, d) => x(
-  "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",
+})[b], ke = (b, g, m) => y(
+  "flex min-h-12 max-h-[5.5rem] w-full items-center justify-between rounded-lg border border-input-border bg-input-bg px-4 py-2 text-sm",
+  "hover:border-input-border--hover focus-visible:border-input-border--focus",
+  "focus-visible:outline focus-visible:outline-accent focus-visible:outline-offset-2 focus:outline-none",
   "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-input-border--disabled disabled:bg-input-bg--disabled",
-  "transition duration-200 text-input-text",
-  n && "border-input-border--focus ring-2 ring-black ring-offset-2",
-  ve(s),
-  d
-), Ne = (s) => x(
-  "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",
-  s ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none"
-), ke = (s) => {
-  const n = $(null);
-  return fe(() => {
-    const d = (l) => {
-      n.current && !n.current.contains(l.target) && s();
-    };
-    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
-  }, [s]), n;
-}, Ce = (s, n, d) => {
-  const [l, y] = L(-1), N = b(
-    (u) => {
-      const k = {
+  "transition duration-200 text-input-text overflow-hidden",
+  g && "border-input-border--focus",
+  Ce(b),
+  m
+), Oe = () => y(
+  "z-50 max-h-80 overflow-hidden rounded-lg border border-input-border bg-input-bg shadow-lg",
+  "motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out",
+  "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0",
+  "motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95",
+  "motion-safe:data-[side=bottom]:slide-in-from-top-2",
+  "motion-safe:data-[side=top]:slide-in-from-bottom-2",
+  "origin-(--radix-popover-content-transform-origin)"
+), De = (b, g, m, I, N, D, S, F, j) => {
+  const [t, c] = V(-1), r = v(() => {
+    const o = [];
+    return S && o.push({ type: "search" }), F && o.push({ type: "select-all" }), b.forEach((p, f) => {
+      p.disabled || o.push({ type: "option", index: f, value: p.value });
+    }), o;
+  }, [b, S, F, j]), x = w(
+    (o) => {
+      if (o < 0 || o >= r.length) return;
+      r[o].type === "search" && D.current?.focus();
+    },
+    [r, D]
+  ), E = w(
+    (o) => {
+      const p = t >= 0 && t < r.length ? r[t] : null;
+      if (o.key === " " && p?.type === "search" || o.key === "Enter" && p?.type === "search")
+        return;
+      const n = {
         ArrowDown: () => {
-          u.preventDefault(), y((f) => Math.min(f + 1, s.length - 1));
+          o.preventDefault();
+          const l = Math.min(t + 1, r.length - 1);
+          c(l), x(l);
         },
         ArrowUp: () => {
-          u.preventDefault(), y((f) => Math.max(f - 1, -1));
+          o.preventDefault();
+          const l = Math.max(t - 1, 0);
+          c(l), x(l);
+        },
+        Tab: () => {
+          if (o.shiftKey)
+            if (t <= 0)
+              m();
+            else {
+              o.preventDefault();
+              const l = t - 1;
+              c(l), x(l);
+            }
+          else if (t >= r.length - 1)
+            m();
+          else {
+            o.preventDefault();
+            const l = t + 1;
+            c(l), x(l);
+          }
         },
         Enter: () => {
-          u.preventDefault(), l >= 0 && s[l] && n(s[l].value);
+          if (o.preventDefault(), t >= 0 && t < r.length) {
+            const l = r[t];
+            l.type === "select-all" ? N() : l.type === "clear-all" ? g() : l.type === "option" && I(l.value);
+          }
         },
         " ": () => {
-          u.preventDefault(), l >= 0 && s[l] && n(s[l].value);
+          if (o.preventDefault(), t >= 0 && t < r.length) {
+            const l = r[t];
+            l.type === "select-all" ? N() : l.type === "clear-all" ? g() : l.type === "option" && I(l.value);
+          }
         },
         Escape: () => {
-          u.preventDefault(), d();
+          o.preventDefault(), m();
         }
-      }[u.key];
-      k && k();
+      }[o.key];
+      n && n();
     },
-    [s, l, n, d]
-  );
-  return { focusedIndex: l, setFocusedIndex: y, handleKeyDown: N };
-}, Ie = ({
-  ref: s,
-  className: n,
-  clearAllLabel: d = "Clear all",
-  closeOnSelect: l = !1,
-  emptyMessage: y = "No options found",
+    [r, t, I, N, g, m, x]
+  ), M = w(
+    (o) => {
+      if (t < 0 || t >= r.length) return !1;
+      const p = r[t];
+      return p.type === "option" && p.index === o;
+    },
+    [t, r]
+  ), z = v(() => t < 0 || t >= r.length ? !1 : r[t].type === "search", [t, r]), P = v(() => t < 0 || t >= r.length ? !1 : r[t].type === "select-all", [t, r]), C = v(() => t < 0 || t >= r.length ? !1 : r[t].type === "clear-all", [t, r]);
+  return {
+    focusedIndex: t,
+    setFocusedIndex: c,
+    handleKeyDown: E,
+    getOptionFocusIndex: M,
+    isSearchFocused: z,
+    isSelectAllFocused: P,
+    isClearAllFocused: C
+  };
+}, Se = ({
+  className: b,
+  clearAllLabel: g = "Clear all",
+  closeOnSelect: m = !1,
+  emptyMessage: I = "No options found",
   errorMessage: N,
-  id: u,
-  label: M,
-  loadingMessage: k = "Loading options...",
-  maxCount: f = 3,
-  name: z,
-  onChange: p,
-  options: m = [],
-  placeholder: B = "Select options",
-  searchPlaceholder: H = "Search options...",
-  selectAllLabel: V = "Select all",
-  showClearAll: G = !0,
-  showSearch: U = !0,
-  showSelectAll: Z = !0,
-  sortAlphabetically: K = !1,
-  state: g = "default",
-  value: a = [],
-  "aria-label": q,
-  "aria-describedby": J,
-  ...R
+  id: D,
+  label: S,
+  loadingMessage: F = "Loading options…",
+  maxCount: j = 3,
+  name: t,
+  onChange: c,
+  options: r = [],
+  placeholder: x = "Select options",
+  ref: E,
+  searchPlaceholder: M = "Search options…",
+  selectAllLabel: z = "Select all",
+  showClearAll: P = !0,
+  showSearch: C = !0,
+  showSelectAll: o = !0,
+  sortAlphabetically: p = !1,
+  state: f = "default",
+  value: n = [],
+  "aria-label": l,
+  "aria-describedby": W,
+  ...H
 }) => {
-  const Q = be(), S = u || `${z}-${Q}`, A = `${S}-error`, [h, C] = L(!1), [D, W] = L(""), X = ke(() => C(!1)), F = $(null), O = R.disabled || g === "disabled", Y = g === "loading", ee = g === "error", v = _(() => {
-    let e = m.filter((i) => i.label.toLowerCase().includes(D.toLowerCase()));
-    return K && (e = [...e].sort((i, t) => i.label.localeCompare(t.label))), e;
-  }, [m, D, K]), w = _(() => {
-    const e = {}, i = [];
-    return v.forEach((t) => {
-      t.group ? (e[t.group] || (e[t.group] = []), e[t.group].push(t)) : i.push(t);
-    }), { groups: e, ungrouped: i, hasGroups: Object.keys(e).length > 0 };
-  }, [v]), I = b(
+  const X = ve(), K = D ?? `${t}-${X}`, _ = `${K}-listbox`, G = `${K}-error`, [h, L] = V(!1), [T, Y] = V(""), R = we(null), ee = H.disabled ?? f === "disabled", te = f === "loading", re = f === "error", k = v(() => {
+    let e = r.filter((a) => a.label.toLowerCase().includes(T.toLowerCase()));
+    return p && (e = [...e].sort((a, i) => a.label.localeCompare(i.label))), e;
+  }, [r, T, p]), O = v(() => {
+    const e = {}, a = [];
+    return k.forEach((i) => {
+      i.group ? (e[i.group] || (e[i.group] = []), e[i.group].push(i)) : a.push(i);
+    }), { groups: e, ungrouped: a, hasGroups: Object.keys(e).length > 0 };
+  }, [k]), $ = w(
     (e) => {
-      if (m.find((c) => c.value === e)?.disabled) return;
-      const t = a.includes(e) ? a.filter((c) => c !== e) : [...a, e];
-      p(t), l && C(!1);
+      if (r.find((u) => u.value === e)?.disabled) return;
+      const i = n.includes(e) ? n.filter((u) => u !== e) : [...n, e];
+      c(i), m && L(!1);
     },
-    [m, a, p, l]
-  ), { focusedIndex: te, handleKeyDown: re } = Ce(v, I, () => C(!1)), ie = b(() => {
-    O || C((e) => (e || setTimeout(() => F.current?.focus(), 0), !e));
-  }, [O]), se = b(() => {
-    const e = m.filter((t) => !t.disabled).map((t) => t.value), i = e.every((t) => a.includes(t));
-    p(i ? [] : e);
-  }, [m, a, p]), j = b(() => {
-    p([]);
-  }, [p]), oe = b((e) => {
-    W(e.target.value);
-  }, []), le = b(
-    (e, i) => {
-      i.stopPropagation(), I(e);
-    },
-    [I]
-  ), ne = () => {
-    if (a.length === 0)
-      return /* @__PURE__ */ r("span", { className: "text-input-text-placeholder", children: B });
-    const e = a.slice(0, f), i = a.length - f;
-    return /* @__PURE__ */ o("div", { className: "flex flex-wrap items-center gap-1", children: [
-      e.map((t) => {
-        const c = m.find((E) => E.value === t);
-        return c ? /* @__PURE__ */ o("span", { className: "bg-input-bg--selected text-input-text inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs", children: [
-          c.label,
-          /* @__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(T, { size: 12 }) })
-        ] }, t) : null;
+    [r, n, c, m]
+  ), U = w(() => {
+    const e = r.filter((i) => !i.disabled).map((i) => i.value), a = e.every((i) => n.includes(i));
+    c(a ? [] : e);
+  }, [r, n, c]), Z = w(() => {
+    c([]);
+  }, [c]), q = v(() => r.filter((e) => !e.disabled).map((e) => e.value), [r]), ie = q.length > 0 && q.every((e) => n.includes(e)), { getOptionFocusIndex: se, handleKeyDown: oe, isSelectAllFocused: le, setFocusedIndex: A } = De(
+    k,
+    Z,
+    () => L(!1),
+    $,
+    U,
+    R,
+    C,
+    o,
+    !1
+    // No separate clear-all button in dropdown
+  );
+  Ne(() => {
+    A(h ? 0 : -1);
+  }, [h, A]);
+  const ae = w((e) => {
+    Y(e.target.value);
+  }, []), ne = () => {
+    if (n.length === 0)
+      return /* @__PURE__ */ s("span", { className: "text-input-text-placeholder flex min-h-8 items-center", children: x });
+    const e = n.slice(0, j), a = n.length - j;
+    return /* @__PURE__ */ d("div", { className: "flex flex-wrap items-center gap-1 overflow-hidden", children: [
+      e.map((i) => {
+        const u = r.find((B) => B.value === i);
+        return u ? /* @__PURE__ */ d("span", { className: "bg-input-bg--selected text-input-text inline-flex max-w-48 items-center gap-1 rounded-md px-2 py-1 text-xs", children: [
+          /* @__PURE__ */ s("span", { className: "truncate", children: u.label }),
+          /* @__PURE__ */ s(
+            "button",
+            {
+              "aria-label": "Remove" + u.label,
+              className: "hover:text-danger focus-visible:ring-accent cursor-pointer rounded-sm focus-visible:ring-2 focus-visible:ring-offset-1",
+              "data-testid": "spectral-multiselect-remove-item-button",
+              onClick: (B) => {
+                B.stopPropagation(), $(i);
+              },
+              type: "button",
+              children: /* @__PURE__ */ s(Q, { size: 12 })
+            }
+          )
+        ] }, i) : null;
       }),
-      i > 0 && /* @__PURE__ */ o("span", { className: "text-input-text-secondary text-xs", children: [
+      a > 0 && /* @__PURE__ */ d("span", { className: "text-input-text-secondary flex items-center py-1 text-xs", children: [
         "+",
-        i,
+        a,
         " more"
       ] })
     ] });
-  }, P = (e, i) => {
-    const t = a.includes(e.value);
-    return /* @__PURE__ */ o(
+  }, J = (e, a) => {
+    const i = n.includes(e.value), u = se(a);
+    return /* @__PURE__ */ d(
       "button",
       {
-        className: x(
-          "hover:bg-input-bg--hover focus:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-left text-sm focus:outline-none",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          i === te && "bg-input-bg--hover",
-          t && "text-input-text font-medium"
+        className: y(
+          "hover:bg-input-bg--hover focus-visible:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-left text-sm focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          u && "bg-input-bg--hover",
+          i && "text-input-text font-medium"
         ),
         disabled: e.disabled,
-        onClick: () => I(e.value),
+        onClick: () => $(e.value),
         type: "button",
         children: [
-          /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-selected-indicator", className: x("border-input-border flex h-4 w-4 items-center justify-center rounded border", t && "bg-primary border-primary"), children: t && /* @__PURE__ */ r(ce, { size: 12 }) }),
-          /* @__PURE__ */ r("span", { children: e.label })
+          /* @__PURE__ */ s("div", { "data-testid": "spectral-multiselect-selected-indicator", className: y("border-input-border flex h-4 w-4 items-center justify-center rounded border", i && "bg-primary border-primary"), children: i && /* @__PURE__ */ s(pe, { size: 12 }) }),
+          /* @__PURE__ */ s("span", { children: e.label })
         ]
       },
       e.value
     );
-  }, ae = () => ({
+  }, de = () => ({
     "--multiselect-border-radius": "0.5rem",
     "--multiselect-trigger-height": "3rem",
     "--multiselect-dropdown-max-height": "20rem"
   });
-  return /* @__PURE__ */ o("div", { className: "w-full", "data-testid": "spectral-multiselect-root", children: [
-    /* @__PURE__ */ o("div", { className: "relative", "data-testid": "spectral-multiselect-wrapper", onKeyDown: h ? re : void 0, ref: X, children: [
-      /* @__PURE__ */ o(
+  return /* @__PURE__ */ d("div", { className: "w-full", "data-testid": "spectral-multiselect-root", children: [
+    /* @__PURE__ */ s(be, { open: h, onOpenChange: L, children: /* @__PURE__ */ d("div", { "data-testid": "spectral-multiselect-wrapper", onKeyDown: h ? oe : void 0, children: [
+      /* @__PURE__ */ s(ge, { asChild: !0, children: /* @__PURE__ */ d(
         "button",
         {
-          "aria-controls": h ? S : void 0,
-          "aria-describedby": [ee ? A : null, J].filter(Boolean).join(" ") || void 0,
+          "aria-controls": h ? _ : void 0,
+          "aria-describedby": [re ? G : null, W].filter(Boolean).join(" ") || void 0,
           "aria-expanded": h,
-          "aria-label": q || M,
-          className: we(g, h, n),
-          "data-state": g,
+          "aria-label": l ?? S,
+          className: ke(f, h, b),
+          "data-state": f,
           "data-testid": "spectral-multiselect-trigger",
-          disabled: O,
-          id: S,
-          name: z,
-          onClick: ie,
-          ref: s,
+          disabled: ee,
+          id: K,
+          name: t,
+          ref: E,
           role: "combobox",
-          style: ae(),
+          style: de(),
           type: "button",
-          ...R,
+          ...H,
           children: [
-            /* @__PURE__ */ r("div", { className: "min-w-0 flex-1", "data-testid": "spectral-multiselect-selected-items", children: ne() }),
-            /* @__PURE__ */ o("div", { className: "ml-2 flex items-center gap-2", children: [
-              a.length > 0 && /* @__PURE__ */ r(
-                "span",
+            /* @__PURE__ */ s("div", { className: "min-w-0 flex-1 overflow-hidden", "data-testid": "spectral-multiselect-selected-items", children: ne() }),
+            /* @__PURE__ */ d("div", { className: "ml-2 flex shrink-0 items-center gap-2", children: [
+              P && n.length > 0 && /* @__PURE__ */ s(
+                "button",
                 {
                   "aria-label": "Clear all selections",
-                  className: "text-input-icon hover:text-input-icon--hover cursor-pointer focus:outline-none",
+                  className: "text-input-icon hover:text-input-icon--hover focus-visible:ring-accent cursor-pointer rounded-sm focus-visible:ring-2 focus-visible:ring-offset-1",
                   "data-testid": "spectral-multiselect-clear-all-button",
                   onClick: (e) => {
-                    e.stopPropagation(), j();
-                  },
-                  onKeyDown: (e) => {
-                    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), j());
+                    e.stopPropagation(), Z();
                   },
-                  tabIndex: 0,
-                  children: /* @__PURE__ */ r(T, { size: 12 })
+                  type: "button",
+                  children: /* @__PURE__ */ s(Q, { size: 12 })
                 }
               ),
-              /* @__PURE__ */ r(ue, { className: x("text-input-icon transition-transform duration-200", h && "rotate-180"), size: 20 })
+              /* @__PURE__ */ s(ue, { className: y("text-input-icon transition-transform duration-200", h && "rotate-180"), size: 20 })
             ] })
           ]
         }
-      ),
-      /* @__PURE__ */ r("div", { className: Ne(h), "data-testid": "spectral-multiselect-dropdown", children: /* @__PURE__ */ o("div", { className: "p-1", children: [
-        U && /* @__PURE__ */ o("div", { className: "relative mb-2", children: [
-          /* @__PURE__ */ r(xe, { className: x(ye, "text-input-icon absolute top-1/2 left-3 -translate-y-1/2") }),
-          /* @__PURE__ */ r(
-            "input",
-            {
-              "aria-label": "Search options",
-              className: "border-input-border bg-input-bg focus:border-input-border--focus w-full rounded-md border py-2 pr-3 pl-9 text-sm focus:ring-1 focus:ring-black focus:outline-none",
-              "data-testid": "spectral-multiselect-search-input",
-              onChange: oe,
-              placeholder: H,
-              ref: F,
-              type: "text",
-              value: D
-            }
-          )
-        ] }),
-        /* @__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: "text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", children: [
-          /* @__PURE__ */ r(pe, {}),
-          k
-        ] }) : v.length === 0 ? /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-empty-message", className: "text-input-text-secondary py-6 text-center text-sm", children: y }) : /* @__PURE__ */ o(de, { children: [
-          Z && /* @__PURE__ */ o("div", { className: "mb-1", children: [
-            /* @__PURE__ */ r(
-              "button",
-              {
-                className: "text-input-text-secondary hover:bg-input-bg--hover focus:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-sm font-medium focus:outline-none",
-                "data-testid": "spectral-multiselect-select-all-button",
-                onClick: se,
-                type: "button",
-                children: V
-              }
-            ),
-            /* @__PURE__ */ r("div", { className: "bg-input-border mx-3 my-1 h-px" })
-          ] }),
-          w.ungrouped.length > 0 && /* @__PURE__ */ r("div", { className: "mb-1", children: w.ungrouped.map((e, i) => P(e, i)) }),
-          Object.entries(w.groups).map(([e, i]) => /* @__PURE__ */ o("div", { className: "mb-1", "data-testid": "spectral-multiselect-group", children: [
-            (w.ungrouped.length > 0 || Object.keys(w.groups).indexOf(e) > 0) && /* @__PURE__ */ r("div", { className: "bg-input-border mx-3 my-1 h-px" }),
-            /* @__PURE__ */ r("div", { "data-testid": "spectral-multiselect-group-name", className: "text-input-text-secondary px-3 py-1 text-xs font-semibold tracking-wide uppercase", children: e }),
-            i.map((t, c) => P(t, v.indexOf(t)))
-          ] }, e)),
-          G && a.length > 0 && /* @__PURE__ */ o("div", { className: "mt-1", children: [
-            /* @__PURE__ */ r("div", { className: "bg-input-border mx-3 my-1 h-px" }),
-            /* @__PURE__ */ r("button", { className: "text-danger hover:bg-danger-50 focus:bg-danger-50 flex w-full items-center gap-3 px-3 py-2 text-sm font-medium focus:outline-none", "data-testid": "spectral-multiselect-clear-all-button", onClick: j, type: "button", children: d })
+      ) }),
+      /* @__PURE__ */ s(he, { children: /* @__PURE__ */ s(
+        xe,
+        {
+          align: "start",
+          avoidCollisions: !0,
+          className: Oe(),
+          collisionPadding: 10,
+          "data-testid": "spectral-multiselect-dropdown",
+          onOpenAutoFocus: (e) => {
+            e.preventDefault(), C && R.current?.focus();
+          },
+          side: "bottom",
+          sideOffset: 4,
+          style: { width: "var(--radix-popover-trigger-width)" },
+          children: /* @__PURE__ */ d("div", { className: "p-1", children: [
+            C && /* @__PURE__ */ d("div", { className: "relative mb-2", children: [
+              /* @__PURE__ */ s(fe, { className: y(Ie, "text-input-icon absolute top-1/2 left-3 -translate-y-1/2") }),
+              /* @__PURE__ */ s(
+                "input",
+                {
+                  "aria-label": "Search options",
+                  className: "border-input-border bg-input-bg focus-visible:border-input-border--focus w-full rounded-md border py-2 pr-3 pl-9 text-sm focus-visible:ring-1 focus-visible:ring-black focus-visible:outline-none",
+                  "data-testid": "spectral-multiselect-search-input",
+                  onChange: ae,
+                  placeholder: M,
+                  ref: R,
+                  type: "text",
+                  value: T
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s("div", { className: "max-h-64 overflow-y-auto", id: _, role: "listbox", "aria-multiselectable": "true", children: te ? /* @__PURE__ */ d("div", { "data-testid": "spectral-multiselect-loading", className: "text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", children: [
+              /* @__PURE__ */ s(me, {}),
+              F
+            ] }) : k.length === 0 ? /* @__PURE__ */ s("div", { "data-testid": "spectral-multiselect-empty-message", className: "text-input-text-secondary py-6 text-center text-sm", children: I }) : /* @__PURE__ */ d(ce, { children: [
+              o && /* @__PURE__ */ d("div", { className: "mb-1", children: [
+                /* @__PURE__ */ s(
+                  "button",
+                  {
+                    className: y("text-input-text-secondary hover:bg-input-bg--hover flex w-full items-center gap-3 px-3 py-2 text-sm font-medium focus:outline-none", le && "bg-input-bg--hover"),
+                    "data-testid": "spectral-multiselect-select-all-button",
+                    onClick: U,
+                    type: "button",
+                    children: ie ? g : z
+                  }
+                ),
+                /* @__PURE__ */ s("div", { className: "bg-input-border mx-3 my-1 h-px" })
+              ] }),
+              O.ungrouped.length > 0 && /* @__PURE__ */ s("div", { className: "mb-1", children: O.ungrouped.map((e, a) => J(e, a)) }),
+              Object.entries(O.groups).map(([e, a]) => /* @__PURE__ */ d("div", { className: "mb-1", "data-testid": "spectral-multiselect-group", children: [
+                (O.ungrouped.length > 0 || Object.keys(O.groups).indexOf(e) > 0) && /* @__PURE__ */ s("div", { className: "bg-input-border mx-3 my-1 h-px" }),
+                /* @__PURE__ */ s("div", { "data-testid": "spectral-multiselect-group-name", className: "text-input-text-secondary px-3 py-1 text-xs font-semibold tracking-wide uppercase", children: e }),
+                a.map((i, u) => J(i, k.indexOf(i)))
+              ] }, e))
+            ] }) })
           ] })
-        ] }) })
-      ] }) })
-    ] }),
-    g === "error" && N && /* @__PURE__ */ r(me, { id: A, dataTestId: "spectral-multiselect-error-message", message: N })
+        }
+      ) })
+    ] }) }),
+    f === "error" && N && /* @__PURE__ */ s(ye, { dataTestId: "spectral-multiselect-error-message", id: G, message: N })
   ] });
 };
-Ie.displayName = "MultiSelectBase";
+Se.displayName = "MultiSelectBase";
 export {
-  Ie as MultiSelectBase
+  Se as MultiSelectBase
 };

package/dist/MultiSelect.d.ts

@@ -1,21 +1,21 @@
 import { MultiSelectBaseProps } from './MultiSelectBase';
 import { Ref } from 'react';
 export interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'onChange' | 'options' | 'value'> {
+    emptyText?: string;
+    loading?: boolean;
     onSearchChange?: (search: string) => void;
     onValueChange?: (value: string[]) => void;
-    value?: string[];
-    options: Array<{
+    options: {
         disabled?: boolean;
         group?: string;
         label: string;
         value: string;
-    }>;
-    emptyText?: string;
-    loading?: boolean;
+    }[];
     sortAlphabetically?: boolean;
+    value?: string[];
 }
 export declare const MultiSelect: {
-    ({ ref, emptyText, loading, onValueChange, options, state, value, ...props }: MultiSelectProps & {
+    ({ emptyText, loading, onValueChange, options, ref, state, value, ...props }: MultiSelectProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;