asma-ui-core 3.86.0 → 3.86.2

package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js

@@ -1,198 +1,213 @@
 import { cn as E } from "../../../helpers/cn.js";
-import { ChevronDownIcon as Qe } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as Xe } from "../../icons/close-icon/CloseIcon.js";
-import { CheckIcon as Ze } from "../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as Ke } from "../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as et } from "../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as te } from "../checkbox/base-ui/StyledCheckbox.js";
-import { TOP_LAYER_PROPS as tt, TOP_LAYER_RESET_STYLE as lt, getOpenModalDialogAncestor as rt, shouldUsePopoverTopLayer as st, useTopLayerRef as ot } from "../../../hooks/useTopLayer.hook.js";
-import { LoadingIcon as nt } from "../../../table/shared-components/LoadingIcon.js";
-import O from "./StyledSelectAutocomplete.module.js";
-import { useEffect as le, useMemo as z, useRef as re, useState as D } from "react";
-import { jsx as s, jsxs as v } from "react/jsx-runtime";
-import { FloatingPortal as at, autoUpdate as it, flip as ct, offset as dt, shift as ut, size as pt, useDismiss as ft, useFloating as mt, useInteractions as ht, useMergeRefs as se, useRole as bt } from "@floating-ui/react";
-var gt = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), xt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
-function Lt({ dataTest: l, options: h, renderInput: oe, value: I, onChange: N, getOptionLabel: ne, getOptionKey: A, isOptionEqualToValue: W, renderOption: H, renderValue: T, filterOptions: _, loading: U, loadingText: ae = "Loading…", noOptionsText: ie = "No options", disabled: C, readOnly: b, error: ce, helperText: de, size: ue = "small", disableClearable: pe, disableCloseOnSelect: fe, popupIcon: me, autoHeight: he, multiple: be, allowSelectAll: ge, selectAllLabel: V = "Select all", fullWidth: xe, classes: we, inputValue: R, onInputChange: ye, open: Y, onOpen: ke, onClose: De, className: ve, wrapperClassName: Ie, getOptionDisabled: Ne, slotProps: q }) {
-  const o = be === !0, c = ne ?? gt, S = (e, t) => W ? W(e, t) : e === t, [Ae, Ce] = D(!1), n = Y ?? Ae, d = (e) => {
-    e && (b || C) || (Y === void 0 && Ce(e), e ? ke?.() : (y(null), De?.()));
-  }, [Re, B] = D(""), g = R ?? Re, P = (e, t, r) => {
-    R === void 0 && B(t), ye?.(e, t, r);
-  }, [a, y] = D(null), G = re([]), J = re(null), [Se, Pe] = D(null), [Q, Me] = D(null), u = o ? Array.isArray(I) ? I : [] : [], x = o ? null : I ?? null, X = !o && x !== null ? c(x) : "";
-  le(() => {
-    R !== void 0 || o || B(X);
+import { ChevronDownIcon as et } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as tt } from "../../icons/close-icon/CloseIcon.js";
+import { CheckIcon as lt } from "../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as rt } from "../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as ot } from "../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as ae } from "../checkbox/base-ui/StyledCheckbox.js";
+import { TOP_LAYER_PROPS as st, TOP_LAYER_RESET_STYLE as nt, getOpenModalDialogAncestor as at, shouldUsePopoverTopLayer as it, useTopLayerRef as ct } from "../../../hooks/useTopLayer.hook.js";
+import { LoadingIcon as dt } from "../../../table/shared-components/LoadingIcon.js";
+import z from "./StyledSelectAutocomplete.module.js";
+import { useEffect as ie, useMemo as W, useRef as ce, useState as D } from "react";
+import { jsx as s, jsxs as I } from "react/jsx-runtime";
+import { FloatingPortal as ut, autoUpdate as ft, flip as pt, offset as mt, shift as ht, size as bt, useDismiss as gt, useFloating as xt, useInteractions as wt, useMergeRefs as de, useRole as yt } from "@floating-ui/react";
+var kt = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), vt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
+function Ft({ dataTest: l, options: f, renderInput: ue, value: A, onChange: N, getOptionLabel: fe, getOptionKey: C, isOptionEqualToValue: H, renderOption: U, renderValue: V, filterOptions: _, loading: B, loadingText: pe = "Loading…", noOptionsText: me = "No options", disabled: M, readOnly: g, error: he, helperText: be, size: ge = "small", disableClearable: xe, disableCloseOnSelect: we, popupIcon: ye, autoHeight: ke, multiple: ve, allowSelectAll: T, selectAllLabel: De = "Select all", fullWidth: Ie, classes: Ae, inputValue: R, onInputChange: Ne, open: Y, onOpen: Ce, onClose: Me, className: Re, wrapperClassName: Se, getOptionDisabled: $e, slotProps: q }) {
+  const r = ve === !0, d = fe ?? kt, S = (e, t) => H ? H(e, t) : e === t, [Pe, Le] = D(!1), a = Y ?? Pe, u = (e) => {
+    e && (g || M) || (Y === void 0 && Le(e), e ? Ce?.() : (x(null), Me?.()));
+  }, [Ee, G] = D(""), b = R ?? Ee, $ = (e, t, n) => {
+    R === void 0 && G(t), Ne?.(e, t, n);
+  }, [o, x] = D(null), J = `${l}-listbox`, Q = ce([]), X = ce(null), [_e, Fe] = D(null), [Z, Oe] = D(null), i = r ? Array.isArray(A) ? A : [] : [], w = r ? null : A ?? null, K = !r && w !== null ? d(w) : "";
+  ie(() => {
+    R !== void 0 || r || G(K);
   }, [
     R,
-    o,
-    X
+    r,
+    K
   ]);
-  const F = (e) => o ? u.some((t) => S(e, t)) : x !== null && S(e, x), M = (e) => Ne?.(e) ?? xt(e), Z = z(() => {
-    const e = [...h];
-    if (_) return _(e, { inputValue: g });
-    const t = !o && x !== null ? c(x).toLowerCase() : null;
-    if (!g || g.toLowerCase() === t) return e;
-    const r = g.toLowerCase();
-    return e.filter((p) => c(p).toLowerCase().includes(r));
+  const F = (e) => r ? i.some((t) => S(e, t)) : w !== null && S(e, w), P = (e) => $e?.(e) ?? vt(e), ee = W(() => {
+    const e = [...f];
+    if (_) return _(e, { inputValue: b });
+    const t = !r && w !== null ? d(w).toLowerCase() : null;
+    if (!b || b.toLowerCase() === t) return e;
+    const n = b.toLowerCase();
+    return e.filter((m) => d(m).toLowerCase().includes(n));
   }, [
-    h,
-    g,
+    f,
+    b,
     _,
-    I
-  ]), m = z(() => Z.slice(0, 100), [Z]), i = m.flatMap((e, t) => M(e) ? [] : [t]), k = m.findIndex(F);
-  le(() => {
-    if (!n) return;
-    const e = a ?? k;
+    A
+  ]), p = W(() => ee.slice(0, 100), [ee]), te = p.flatMap((e, t) => P(e) ? [] : [t]), c = T && r ? [-1, ...te] : te, k = p.findIndex(F);
+  ie(() => {
+    if (!a) return;
+    const e = o ?? k;
     if (e < 0) return;
-    const t = requestAnimationFrame(() => G.current[e]?.scrollIntoView({ block: "nearest" }));
+    const t = requestAnimationFrame(() => Q.current[e]?.scrollIntoView({ block: "nearest" }));
     return () => cancelAnimationFrame(t);
   }, [
+    o,
     a,
-    n,
-    Q,
+    Z,
     k
   ]);
-  const { refs: L, floatingStyles: Le, context: K } = mt({
-    open: n,
-    onOpenChange: d,
+  const { refs: L, floatingStyles: je, context: le } = xt({
+    open: a,
+    onOpenChange: u,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: it,
+    whileElementsMounted: ft,
     middleware: [
-      dt(0),
-      ct({ padding: 8 }),
-      ut({ padding: 8 }),
-      pt({ apply({ rects: e, availableHeight: t }) {
-        Pe(e.reference.width), Me(he ? t - 8 : Math.min(t - 8, 320));
+      mt(0),
+      pt({ padding: 8 }),
+      ht({ padding: 8 }),
+      bt({ apply({ rects: e, availableHeight: t }) {
+        Fe(e.reference.width), Oe(ke ? t - 8 : Math.min(t - 8, 320));
       } })
     ]
-  }), { getReferenceProps: $e, getFloatingProps: Ee, getItemProps: _e } = ht([ft(K), bt(K, { role: "listbox" })]), Fe = se([L.setReference]), ee = z(() => n ? rt(L.reference.current) : void 0, [n, L]), j = st(ee), je = se([ot(L.setFloating, j)]), Oe = (e) => i.includes(k) ? k : i[e === 1 ? 0 : i.length - 1] ?? null, ze = (e) => {
-    i.length !== 0 && y((t) => {
-      const r = i.indexOf(t ?? k);
-      return r === -1 ? i[e === 1 ? 0 : i.length - 1] ?? null : i[Math.min(Math.max(r + e, 0), i.length - 1)] ?? null;
+  }), { getReferenceProps: ze, getFloatingProps: We, getItemProps: He } = wt([gt(le), yt(le, { role: "listbox" })]), Ue = de([L.setReference]), re = W(() => a ? at(L.reference.current) : void 0, [a, L]), O = it(re), Ve = de([ct(L.setFloating, O)]), Be = (e) => c.includes(k) ? k : c[e === 1 ? 0 : c.length - 1] ?? null, Te = (e) => {
+    c.length !== 0 && x((t) => {
+      const n = c.indexOf(t ?? k);
+      return n === -1 ? c[e === 1 ? 0 : c.length - 1] ?? null : c[Math.min(Math.max(n + e, 0), c.length - 1)] ?? null;
     });
-  }, $ = (e, t, r = !o || !fe) => {
-    if (o) {
-      const p = u.some((f) => S(t, f)), w = p ? u.filter((f) => !S(t, f)) : [...u, t];
-      N?.(e, w, p ? "removeOption" : "selectOption", { option: t }), P(e, "", "reset"), r && d(!1);
+  }, v = (e, t, n = !r || !we) => {
+    if (r) {
+      const m = i.some((h) => S(t, h)), y = m ? i.filter((h) => !S(t, h)) : [...i, t];
+      N?.(e, y, m ? "removeOption" : "selectOption", { option: t }), $(e, "", "reset"), n && u(!1);
     } else
-      N?.(e, t, "selectOption", { option: t }), P(e, c(t), "reset"), r && d(!1);
-  }, We = (e) => {
-    N?.(e, o ? [] : null, "clear", void 0), P(e, "", "clear");
-  }, He = (e) => {
-    if (e.key === "Enter" && !n)
-      e.preventDefault(), d(!0);
-    else if (e.key === "Enter" && a != null && m[a] != null) {
+      N?.(e, t, "selectOption", { option: t }), $(e, d(t), "reset"), n && u(!1);
+  }, oe = (e) => {
+    N?.(e, r ? [] : null, "clear", void 0), $(e, "", "clear");
+  }, j = (e) => {
+    const t = f.length > 0 && i.length === f.length;
+    N?.(e, t ? [] : f, t ? "clear" : "selectOption", void 0);
+  }, Ye = (e) => {
+    if (e.key === "Backspace" && b === "" && se) {
+      const t = i[i.length - 1];
+      r ? t !== void 0 && v(e, t, !1) : oe(e);
+    } else if (e.key === "Enter" && !a)
+      e.preventDefault(), u(!0);
+    else if (e.key === "Enter" && o === -1)
+      e.preventDefault(), j(e);
+    else if (e.key === "Enter" && o != null && p[o] != null) {
       e.preventDefault();
-      const t = m[a];
-      M(t) || $(e, t, !0);
+      const t = p[o];
+      P(t) || v(e, t, !0);
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-      if (e.preventDefault(), !n) {
-        y(Oe(e.key === "ArrowDown" ? 1 : -1)), d(!0);
+      if (e.preventDefault(), !a) {
+        x(Be(e.key === "ArrowDown" ? 1 : -1)), u(!0);
         return;
       }
-      ze(e.key === "ArrowDown" ? 1 : -1);
+      Te(e.key === "ArrowDown" ? 1 : -1);
     } else if (e.key === "Home" || e.key === "End")
-      e.preventDefault(), y(i[e.key === "Home" ? 0 : i.length - 1] ?? null);
-    else if (e.key === " " && a != null && m[a] != null) {
+      e.preventDefault(), x(c[e.key === "Home" ? 0 : c.length - 1] ?? null);
+    else if (e.key === " " && o === -1)
+      e.preventDefault(), j(e);
+    else if (e.key === " " && o != null && p[o] != null) {
       e.preventDefault();
-      const t = m[a];
-      M(t) || $(e, t, !1);
-    } else e.key === "Escape" ? (e.preventDefault(), d(!1)) : e.key === "Tab" && d(!1);
-  }, Te = !pe && !b && !C && (o ? u.length > 0 : x !== null), Ue = (e) => {
-    e.preventDefault(), !(C || b) && (J.current?.focus(), d(!n));
-  }, Ve = o ? T ? T(u, ({ index: e }) => ({ "data-index": e })) : u.map((e, t) => /* @__PURE__ */ s(et, {
-    dataTest: `selected-chip-${c(e)}`,
-    label: c(e),
-    readOnly: b,
-    onDelete: b ? void 0 : (r) => $(r, e)
-  }, A ? A(e) : `${c(e)}-${t}`)) : void 0, Ye = /* @__PURE__ */ v("span", {
+      const t = p[o];
+      P(t) || v(e, t, !1);
+    } else e.key === "Escape" ? (e.preventDefault(), u(!1)) : e.key === "Tab" && u(!1);
+  }, se = !xe && !g && !M && (r ? i.length > 0 : w !== null);
+  let ne;
+  a && o != null && (o === -1 || p[o] !== void 0) && (ne = o === -1 ? `${l}-select-all` : `${l}-option-${o}`);
+  const qe = (e) => {
+    e.preventDefault(), !(M || g) && (X.current?.focus(), u(!a));
+  }, Ge = r ? V ? V(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ s(ot, {
+    dataTest: `selected-chip-${d(e)}`,
+    label: d(e),
+    readOnly: g,
+    deleteButtonTabIndex: -1,
+    onDelete: g ? void 0 : (n) => v(n, e)
+  }, C ? C(e) : `${d(e)}-${t}`)) : void 0, Je = /* @__PURE__ */ I("span", {
     className: "flex items-center gap-1",
     children: [
-      U && /* @__PURE__ */ s(nt, {
+      B && /* @__PURE__ */ s(dt, {
         width: 20,
         height: 20,
         className: "animate-spin"
       }),
-      Te && /* @__PURE__ */ s("button", {
+      se && /* @__PURE__ */ s("button", {
         type: "button",
         tabIndex: -1,
         "aria-label": "Clear",
         "data-testid": `${l}-clear`,
         className: "invisible flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full border-0 bg-delta-50 group-focus-within:visible",
         onMouseDown: (e) => e.preventDefault(),
-        onClick: We,
-        children: /* @__PURE__ */ s(Xe, {
+        onClick: oe,
+        children: /* @__PURE__ */ s(tt, {
           width: 20,
           height: 20,
           className: "text-delta-700"
         })
       }),
-      b ? null : /* @__PURE__ */ s("button", {
+      g ? null : /* @__PURE__ */ s("button", {
         type: "button",
         tabIndex: -1,
         "aria-label": "Toggle options",
-        "aria-expanded": n,
+        "aria-expanded": a,
         "data-testid": `${l}-popup-indicator`,
         className: "flex cursor-pointer items-center border-0 bg-transparent",
         onMouseDown: (e) => e.preventDefault(),
-        onClick: Ue,
-        children: me ?? (o ? /* @__PURE__ */ s(Ke, {
+        onClick: qe,
+        children: ye ?? (r ? /* @__PURE__ */ s(rt, {
           width: 24,
           height: 24,
           className: "text-delta-700"
-        }) : /* @__PURE__ */ s(Qe, {
+        }) : /* @__PURE__ */ s(et, {
           width: 24,
           height: 24,
-          className: E(O["select-custom-icon"], n && O["select-custom-icon-open"], "text-delta-700")
+          className: E(z["select-custom-icon"], a && z["select-custom-icon-open"], "text-delta-700")
         }))
       })
     ]
-  }), qe = {
-    disabled: C,
-    size: ue,
+  }), Qe = {
+    disabled: M,
+    size: ge,
     fullWidth: !0,
-    error: ce,
-    helperText: de,
-    value: g,
+    error: he,
+    helperText: be,
+    value: b,
     onChange: (e) => {
-      P(e, e.target.value, "input"), n || d(!0);
+      x(null), $(e, e.target.value, "input"), a || u(!0);
     },
-    onKeyDown: He,
+    onKeyDown: Ye,
     slotProps: {
       htmlInput: {
-        ...$e(),
-        ref: J,
-        onClick: () => d(!0),
+        ...ze(),
+        ref: X,
+        onClick: () => u(!0),
         role: "combobox",
         "aria-autocomplete": "list",
-        "aria-expanded": n,
-        "aria-activedescendant": n && a != null ? `${l}-option-${a}` : void 0,
+        "aria-expanded": a,
+        "aria-controls": a ? J : void 0,
+        "aria-activedescendant": ne,
         autoComplete: "off",
-        readOnly: b
+        readOnly: g
       },
       input: {
-        ref: Fe,
-        startAdornment: Ve,
-        endAdornment: Ye
+        ref: Ue,
+        startAdornment: Ge,
+        endAdornment: Je
       }
     }
-  }, Be = E("relative box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-800", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), Ge = (e, t, r) => {
-    const { key: p, ...w } = e;
-    return /* @__PURE__ */ v("li", {
-      ...w,
+  }, Xe = E("relative box-border flex min-h-10 cursor-pointer items-center gap-x-3 px-3 py-1.5 text-base text-delta-800", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), Ze = (e, t, n) => {
+    const { key: m, ...y } = e;
+    return /* @__PURE__ */ I("li", {
+      ...y,
       children: [
         e["data-active"] !== void 0 && /* @__PURE__ */ s("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
         }),
-        o ? /* @__PURE__ */ s(te, {
-          dataTest: `${l}-${c(t)}-checkbox`,
-          checked: r.selected,
+        r ? /* @__PURE__ */ s(ae, {
+          dataTest: `${l}-${d(t)}-checkbox`,
+          checked: n.selected,
           size: "small",
           hideWrapper: !0,
           decorative: !0
         }) : /* @__PURE__ */ s("span", {
           className: "w-5",
-          children: r.selected && /* @__PURE__ */ s(Ze, {
+          children: n.selected && /* @__PURE__ */ s(lt, {
             width: 20,
             height: 20,
             className: "text-gama-500"
@@ -200,84 +215,96 @@ function Lt({ dataTest: l, options: h, renderInput: oe, value: I, onChange: N, g
         }),
         /* @__PURE__ */ s("span", {
           className: "line-clamp-2 min-w-0 flex-1 break-words",
-          children: c(t)
+          children: d(t)
         })
       ]
-    }, p);
-  }, Je = (e, t) => {
-    const r = M(e), p = {
-      ..._e({
-        onMouseDown: (f) => f.preventDefault(),
-        onClick: (f) => {
-          r || $(f, e);
+    }, m);
+  }, Ke = (e, t) => {
+    const n = P(e), m = {
+      ...He({
+        onMouseDown: (h) => h.preventDefault(),
+        onClick: (h) => {
+          n || v(h, e);
         },
-        onMouseMove: () => y(null)
+        onMouseMove: () => x(null)
       }),
-      key: A ? String(A(e)) : `${c(e)}-${t}`,
-      ref: (f) => {
-        G.current[t] = f;
+      key: C ? String(C(e)) : `${d(e)}-${t}`,
+      ref: (h) => {
+        Q.current[t] = h;
       },
       role: "option",
       id: `${l}-option-${t}`,
       "aria-selected": F(e),
-      "aria-disabled": r || void 0,
-      "data-active": a === t ? "" : void 0,
-      className: Be
-    }, w = {
+      "aria-disabled": n || void 0,
+      "data-active": o === t ? "" : void 0,
+      className: Xe
+    }, y = {
       selected: F(e),
       index: t,
-      inputValue: g
+      inputValue: b
     };
-    return H ? H(p, e, w) : Ge(p, e, w);
+    return U ? U(m, e, y) : Ze(m, e, y);
   };
-  return /* @__PURE__ */ v("div", {
-    className: E(O.styledSelectAutocompleteWrapper, !xe && "w-auto", Ie, ve),
-    children: [oe(qe), n && /* @__PURE__ */ s(at, {
-      root: ee,
-      children: /* @__PURE__ */ v("ul", {
-        ref: je,
-        ...j ? tt : {},
+  return /* @__PURE__ */ I("div", {
+    className: E(z.styledSelectAutocompleteWrapper, !Ie && "w-auto", Se, Re),
+    children: [ue(Qe), a && /* @__PURE__ */ s(ut, {
+      root: re,
+      children: /* @__PURE__ */ I("ul", {
+        ref: Ve,
+        ...O ? st : {},
         style: {
-          ...j ? lt : {},
-          ...Le,
-          width: Se ?? void 0,
-          maxHeight: Q ?? void 0,
+          ...O ? nt : {},
+          ...je,
+          width: _e ?? void 0,
+          maxHeight: Z ?? void 0,
           fontFamily: "Roboto, Helvetica, Arial, sans-serif",
           ...q?.popper?.style
         },
-        ...Ee(),
-        className: E("z-[1300] m-0 list-none overflow-auto rounded border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", "[&>li:not(:last-child)]:border-0 [&>li:not(:last-child)]:border-b", "[&>li:not(:last-child)]:border-solid [&>li:not(:last-child)]:border-delta-200", we?.listbox, q?.popper?.className),
-        children: [ge && o && /* @__PURE__ */ v("div", {
-          role: "group",
-          className: "flex min-h-12 items-center gap-x-1 border-0 border-b border-solid border-delta-200 px-4 text-sm text-delta-700",
-          children: [/* @__PURE__ */ s(te, {
-            dataTest: `${l}-select-all`,
-            "aria-label": V,
-            checked: h.length > 0 && u.length === h.length,
-            size: "small",
-            hideWrapper: !0,
-            onChange: (e) => {
-              e.stopPropagation();
-              const t = h.length > 0 && u.length === h.length;
-              N?.(e, t ? [] : h, t ? "clear" : "selectOption", void 0);
-            }
-          }), /* @__PURE__ */ s("span", {
-            className: "flex-1 truncate py-2",
-            children: V
-          })]
-        }), U ? /* @__PURE__ */ s("li", {
+        ...We(),
+        id: J,
+        role: "listbox",
+        "aria-multiselectable": r ? !0 : void 0,
+        className: E("z-[1300] m-0 list-none overflow-auto rounded border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", "[&>li:not(:last-child)]:border-0 [&>li:not(:last-child)]:border-b", "[&>li:not(:last-child)]:border-solid [&>li:not(:last-child)]:border-delta-200", Ae?.listbox, q?.popper?.className),
+        children: [T && r && /* @__PURE__ */ I("li", {
+          id: `${l}-select-all`,
+          role: "option",
+          "aria-selected": f.length > 0 && i.length === f.length,
+          "data-active": o === -1 ? "" : void 0,
+          tabIndex: -1,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: j,
+          onMouseMove: () => x(null),
+          className: "relative flex min-h-12 cursor-pointer items-center gap-x-1 border-0 border-b border-solid border-delta-200 px-4 text-sm text-delta-700 aria-selected:bg-gama-50 hover:bg-delta-50",
+          children: [
+            o === -1 && /* @__PURE__ */ s("span", {
+              "aria-hidden": "true",
+              className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
+            }),
+            /* @__PURE__ */ s(ae, {
+              dataTest: `${l}-select-all`,
+              checked: f.length > 0 && i.length === f.length,
+              size: "small",
+              hideWrapper: !0,
+              decorative: !0
+            }),
+            /* @__PURE__ */ s("span", {
+              className: "flex-1 truncate py-2",
+              children: De
+            })
+          ]
+        }), B ? /* @__PURE__ */ s("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: ae
-        }) : m.length === 0 ? /* @__PURE__ */ s("li", {
+          children: pe
+        }) : p.length === 0 ? /* @__PURE__ */ s("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
-          children: ie
-        }) : m.map(Je)]
+          children: me
+        }) : p.map(Ke)]
       })
     })]
   });
 }
 export {
-  Lt as StyledSelectAutocomplete
+  Ft as StyledSelectAutocomplete
 };