asma-ui-core 3.111.0 → 3.113.0

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

@@ -1,212 +1,228 @@
-import { cn as E } from "../../../helpers/cn.js";
-import { TOP_LAYER_PROPS as nt, TOP_LAYER_RESET_STYLE as at, getOpenModalDialogAncestor as it, shouldUsePopoverTopLayer as ct, useTopLayerRef as dt } from "../../../hooks/useTopLayer.hook.js";
-import { ChevronDownIcon as ut } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as pt } from "../../icons/close-icon/CloseIcon.js";
-import { CheckIcon as ft } from "../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as mt } from "../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as ht } from "../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as ue } from "../checkbox/base-ui/StyledCheckbox.js";
-import { useBackCloses as bt } from "../../../hooks/useBackCloses.hook.js";
-import { fieldWidthStyle as gt } from "../field-styles.js";
-import { LoadingIcon as xt } from "../../../table/shared-components/LoadingIcon.js";
-import B from "./StyledSelectAutocomplete.module.js";
-import { useEffect as pe, useMemo as U, useRef as fe, useState as D } from "react";
-import { jsx as o, jsxs as I } from "react/jsx-runtime";
-import { FloatingPortal as yt, autoUpdate as wt, flip as kt, offset as vt, shift as Dt, size as It, useDismiss as Nt, useFloating as Ct, useInteractions as At, useMergeRefs as me, useRole as St } from "@floating-ui/react";
-var Mt = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), Rt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
-function qt({ dataTest: l, options: b, renderInput: he, value: N, onChange: C, getOptionLabel: be, getOptionKey: A, isOptionEqualToValue: V, renderOption: T, renderValue: Y, filterOptions: O, loading: q, loadingText: ge = "Loading…", noOptionsText: xe = "No options", disabled: S, readOnly: g, error: ye, helperText: we, size: ke = "small", rowSize: ve = "compact", disableClearable: De, disableCloseOnSelect: Ie, popupIcon: Ne, autoHeight: Ce, multiple: Ae, allowSelectAll: M, selectAllLabel: Se = "Select all", width: G = "full", fullWidth: Pt, classes: Me, inputValue: R, onInputChange: Re, open: J, onOpen: Pe, onClose: _e, className: $e, wrapperClassName: Le, getOptionDisabled: Ee, slotProps: Q }) {
-  const s = Ae === !0, d = be ?? Mt, P = (e, t) => V ? V(e, t) : e === t, [Oe, We] = D(!1), n = J ?? Oe, c = (e) => {
-    e && (g || S) || (J === void 0 && We(e), e ? Pe?.() : (x(null), _e?.()));
-  }, [Fe, X] = D(""), m = R ?? Fe, _ = (e, t, a) => {
-    R === void 0 && X(t), Re?.(e, t, a);
-  }, [r, x] = D(null), Z = `${l}-listbox`, K = fe([]), ee = fe(null), [je, ze] = D(null), [te, He] = D(null), i = s ? Array.isArray(N) ? N : [] : [], y = s ? null : N ?? null, le = !s && y !== null ? d(y) : "";
-  pe(() => {
-    R !== void 0 || s || X(le);
+import { cn as D } from "../../../helpers/cn.js";
+import { TOP_LAYER_PROPS as xt, TOP_LAYER_RESET_STYLE as yt, getOpenModalDialogAncestor as kt, shouldUsePopoverTopLayer as vt, useTopLayerRef as wt } from "../../../hooks/useTopLayer.hook.js";
+import { ChevronDownIcon as Dt } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as It } from "../../icons/close-icon/CloseIcon.js";
+import { CheckIcon as Nt } from "../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as Pt } from "../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as At } from "../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as ve } from "../checkbox/base-ui/StyledCheckbox.js";
+import { useFullScreenPickerMediaQuery as Ct } from "../../../hooks/useMediaQuery.hook.js";
+import { useBackCloses as St } from "../../../hooks/useBackCloses.hook.js";
+import { fieldWidthStyle as Rt } from "../field-styles.js";
+import { LoadingIcon as Mt } from "../../../table/shared-components/LoadingIcon.js";
+import { PickerLiveRegion as $t, useAnnouncer as _t } from "../full-screen-picker/PickerLiveRegion.js";
+import { getPickerText as Ft } from "../full-screen-picker/pickerCopy.js";
+import { readFieldName as Lt } from "./readFieldName.js";
+import { getDraftChanges as Et } from "./draftChanges.js";
+import { nextActiveIndex as Wt } from "./listboxCursor.js";
+import { SelectAutocompletePicker as jt } from "./SelectAutocompletePicker.js";
+import J from "./StyledSelectAutocomplete.module.js";
+import { useEffect as we, useMemo as X, useRef as De, useState as I } from "react";
+import { Fragment as zt, jsx as o, jsxs as N } from "react/jsx-runtime";
+import { FloatingPortal as Ht, autoUpdate as Bt, flip as Ut, offset as Vt, shift as Ot, size as Yt, useDismiss as qt, useFloating as Qt, useInteractions as Tt, useMergeRefs as Ie, useRole as Gt } from "@floating-ui/react";
+var Jt = (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 vl({ dataTest: l, options: h, renderInput: Ne, value: $, onChange: P, getOptionLabel: Pe, getOptionKey: A, isOptionEqualToValue: Z, renderOption: j, renderValue: K, filterOptions: _, loading: z, loadingText: ee = "Loading…", noOptionsText: te = "No options", disabled: F, readOnly: b, error: Ae, helperText: Ce, size: Se = "small", rowSize: Re = "compact", disableClearable: le, disableCloseOnSelect: Me, popupIcon: $e, autoHeight: _e, multiple: Fe, allowSelectAll: C, selectAllLabel: re = "Select all", width: oe = "full", fullWidth: Zt, classes: Le, inputValue: L, onInputChange: Ee, open: se, onOpen: We, onClose: je, className: ze, wrapperClassName: He, getOptionDisabled: Be, slotProps: ne, pickerTitle: H, pickerText: Ue, locale: Ve = "en", disableFullScreenPicker: Oe }) {
+  const r = Fe === !0, k = Ct() && !Oe, [ae, Ye] = I({
+    label: "",
+    name: ""
+  }), [qe, Qe] = _t(), B = Ft(Ve, Ue), d = Pe ?? Jt, v = (e, t) => Z ? Z(e, t) : e === t, [Te, Ge] = I(!1), s = se ?? Te, i = (e) => {
+    e && (b || F) || (se === void 0 && Ge(e), e && Ye(Lt(V.current)), e ? We?.() : (y(null), je?.()));
+  }, [Je, ie] = I(""), g = L ?? Je, S = (e, t, a) => {
+    L === void 0 && ie(t), Ee?.(e, t, a);
+  }, [n, y] = I(null), U = `${l}-listbox`, ce = De([]), V = De(null), [Xe, Ze] = I(null), [de, Ke] = I(null), c = r ? Array.isArray($) ? $ : [] : [], x = r ? null : $ ?? null, ue = !r && x !== null ? d(x) : "";
+  we(() => {
+    L !== void 0 || r || ie(ue);
   }, [
-    R,
-    s,
-    le
+    L,
+    r,
+    ue
   ]);
-  const W = (e) => s ? i.some((t) => P(e, t)) : y !== null && P(e, y), $ = (e) => Ee?.(e) ?? Rt(e), se = U(() => {
-    const e = [...b];
-    if (O) return O(e, { inputValue: m });
-    const t = !s && y !== null ? d(y).toLowerCase() : null;
-    if (!m || m.toLowerCase() === t) return e;
-    const a = m.toLowerCase();
-    return e.filter((p) => d(p).toLowerCase().includes(a));
+  const O = (e) => r ? c.some((t) => v(e, t)) : x !== null && v(e, x), R = (e) => Be?.(e) ?? Xt(e), pe = X(() => {
+    const e = [...h];
+    if (_) return _(e, { inputValue: g });
+    const t = !r && x !== null ? d(x).toLowerCase() : null;
+    if (!g || g.toLowerCase() === t) return e;
+    const a = g.toLowerCase();
+    return e.filter((u) => d(u).toLowerCase().includes(a));
   }, [
-    b,
-    m,
-    O,
-    N
-  ]), u = U(() => se.slice(0, 100), [se]), re = u.flatMap((e, t) => $(e) ? [] : [t]), F = M && s ? [-1, ...re] : re, oe = u.map((e, t) => t), h = M && s ? [-1, ...oe] : oe, k = u.findIndex(W);
-  pe(() => {
-    if (!n) return;
-    const e = r ?? k;
+    h,
+    g,
+    _,
+    $
+  ]), p = X(() => pe.slice(0, 100), [pe]), fe = p.flatMap((e, t) => R(e) ? [] : [t]), Y = C && r ? [-1, ...fe] : fe, me = p.map((e, t) => t), E = C && r ? [-1, ...me] : me, M = p.findIndex(O);
+  we(() => {
+    if (!s) return;
+    const e = n ?? M;
     if (e < 0) return;
-    const t = requestAnimationFrame(() => K.current[e]?.scrollIntoView({ block: "nearest" }));
+    const t = requestAnimationFrame(() => ce.current[e]?.scrollIntoView({ block: "nearest" }));
     return () => cancelAnimationFrame(t);
   }, [
-    r,
     n,
-    te,
-    k
+    s,
+    de,
+    M
   ]);
-  const { refs: L, floatingStyles: Be, context: ne } = Ct({
-    open: n,
-    onOpenChange: c,
+  const { refs: W, floatingStyles: et, context: he } = Qt({
+    open: s,
+    onOpenChange: i,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: wt,
+    whileElementsMounted: Bt,
     middleware: [
-      vt(0),
-      kt({ padding: 8 }),
-      Dt({ padding: 8 }),
-      It({ apply({ rects: e, availableHeight: t }) {
-        ze(e.reference.width), He(Ce ? t - 8 : Math.min(t - 8, 320));
+      Vt(0),
+      Ut({ padding: 8 }),
+      Ot({ padding: 8 }),
+      Yt({ apply({ rects: e, availableHeight: t }) {
+        Ze(e.reference.width), Ke(_e ? t - 8 : Math.min(t - 8, 320));
       } })
     ]
-  }), { getReferenceProps: Ue, getFloatingProps: Ve, getItemProps: Te } = At([Nt(ne), St(ne, { role: "listbox" })]);
-  bt({
-    active: n,
-    requestClose: () => c(!1)
+  }), { getReferenceProps: tt, getFloatingProps: lt, getItemProps: rt } = Tt([qt(he, { enabled: !k }), Gt(he, { role: "listbox" })]);
+  St({
+    active: s && !k,
+    requestClose: () => i(!1)
   });
-  const Ye = me([L.setReference]), ae = U(() => n ? it(L.reference.current) : void 0, [n, L]), j = ct(ae), qe = me([dt(L.setFloating, j)]), Ge = (e) => F.includes(k) ? k : F[e === 1 ? 0 : F.length - 1] ?? null, Je = (e) => {
-    h.length !== 0 && x((t) => {
-      const a = h.indexOf(t ?? k);
-      return a === -1 ? h[e === 1 ? 0 : h.length - 1] ?? null : h[Math.min(Math.max(a + e, 0), h.length - 1)] ?? null;
-    });
-  }, v = (e, t, a = !s || !Ie) => {
-    if (s) {
-      const p = i.some((f) => P(t, f)), w = p ? i.filter((f) => !P(t, f)) : [...i, t];
-      C?.(e, w, p ? "removeOption" : "selectOption", { option: t }), _(e, "", "reset"), a && c(!1);
+  const ot = Ie([W.setReference]), be = X(() => s ? kt(W.reference.current) : void 0, [s, W]), q = vt(be), st = Ie([wt(W.setFloating, q)]), nt = (e) => Y.includes(M) ? M : Y[e === 1 ? 0 : Y.length - 1] ?? null, at = (e) => {
+    E.length !== 0 && y((t) => Wt(E, t, M, e));
+  }, w = (e, t, a = !r || !Me) => {
+    if (r) {
+      const u = c.some((m) => v(t, m)), f = u ? c.filter((m) => !v(t, m)) : [...c, t];
+      P?.(e, f, u ? "removeOption" : "selectOption", { option: t }), S(e, "", "reset"), a && i(!1);
     } else
-      C?.(e, t, "selectOption", { option: t }), _(e, d(t), "reset"), a && c(!1);
-  }, ie = (e) => {
-    C?.(e, s ? [] : null, "clear", void 0), _(e, "", "clear");
-  }, z = (e) => {
-    const t = b.length > 0 && i.length === b.length;
-    C?.(e, t ? [] : b, t ? "clear" : "selectOption", void 0);
-  }, Qe = (e) => {
-    if (e.key === "Backspace" && m === "" && ce) {
-      const t = i[i.length - 1];
-      s ? t !== void 0 && v(e, t, !1) : ie(e);
-    } else if (e.key === "Enter" && !n)
-      e.preventDefault(), c(!0);
-    else if (e.key === "Enter" && r === -1)
-      e.preventDefault(), z(e);
-    else if (e.key === "Enter" && r != null && u[r] != null) {
+      P?.(e, t, "selectOption", { option: t }), S(e, d(t), "reset"), a && i(!1);
+  }, Q = (e) => {
+    P?.(e, r ? [] : null, "clear", void 0), S(e, "", "clear");
+  }, it = (e) => {
+    Q(e), i(!1), Qe(B.cleared);
+  }, ct = (e, t) => {
+    for (const { value: a, reason: u, option: f } of Et(c, t, v)) P?.(e, a, u, f === void 0 ? void 0 : { option: f });
+    S(e, "", "reset"), i(!1);
+  }, T = (e) => {
+    const t = h.length > 0 && c.length === h.length;
+    P?.(e, t ? [] : h, t ? "clear" : "selectOption", void 0);
+  }, dt = (e) => {
+    if (e.key === "Backspace" && g === "" && ge) {
+      const t = c[c.length - 1];
+      r ? t !== void 0 && w(e, t, !1) : Q(e);
+    } else if (e.key === "Enter" && !s)
+      e.preventDefault(), i(!0);
+    else if (e.key === "Enter" && n === -1)
+      e.preventDefault(), T(e);
+    else if (e.key === "Enter" && n != null && p[n] != null) {
       e.preventDefault();
-      const t = u[r];
-      $(t) || v(e, t, !0);
+      const t = p[n];
+      R(t) || w(e, t, !0);
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-      if (e.preventDefault(), !n) {
-        x(Ge(e.key === "ArrowDown" ? 1 : -1)), c(!0);
+      if (e.preventDefault(), !s) {
+        y(nt(e.key === "ArrowDown" ? 1 : -1)), i(!0);
         return;
       }
-      Je(e.key === "ArrowDown" ? 1 : -1);
+      at(e.key === "ArrowDown" ? 1 : -1);
     } else if (e.key === "Home" || e.key === "End")
-      e.preventDefault(), x(h[e.key === "Home" ? 0 : h.length - 1] ?? null);
-    else if (e.key === " " && r === -1)
-      e.preventDefault(), z(e);
-    else if (e.key === " " && r != null && u[r] != null) {
+      e.preventDefault(), y(E[e.key === "Home" ? 0 : E.length - 1] ?? null);
+    else if (e.key === " " && n === -1)
+      e.preventDefault(), T(e);
+    else if (e.key === " " && n != null && p[n] != null) {
       e.preventDefault();
-      const t = u[r];
-      $(t) || v(e, t, !1);
-    } else e.key === "Escape" && n ? (e.preventDefault(), e.stopPropagation(), c(!1)) : e.key === "Tab" && c(!1);
-  }, ce = !De && !g && !S && (s ? i.length > 0 : y !== null);
-  let de;
-  n && r != null && (r === -1 || u[r] !== void 0) && (de = r === -1 ? `${l}-select-all` : `${l}-option-${r}`);
-  const Xe = (e) => {
-    e.preventDefault(), !(S || g) && (ee.current?.focus(), c(!n));
-  }, Ze = s ? Y ? Y(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ o(ht, {
+      const t = p[n];
+      R(t) || w(e, t, !1);
+    } else e.key === "Escape" && s ? (e.preventDefault(), e.stopPropagation(), i(!1)) : e.key === "Tab" && i(!1);
+  }, ge = !le && !b && !F && (r ? c.length > 0 : x !== null);
+  let xe;
+  s && n != null && (n === -1 || p[n] !== void 0) && (xe = n === -1 ? `${l}-select-all` : `${l}-option-${n}`);
+  const ut = (e) => {
+    e.preventDefault(), !(F || b) && (V.current?.focus(), i(!s));
+  }, pt = r ? K ? K(c, ({ index: e }) => ({ "data-index": e })) : c.map((e, t) => /* @__PURE__ */ o(At, {
     dataTest: `selected-chip-${d(e)}`,
     label: d(e),
-    readOnly: g,
+    readOnly: b,
     deleteButtonTabIndex: -1,
-    onDelete: g ? void 0 : (a) => v(a, e)
-  }, A ? A(e) : `${d(e)}-${t}`)) : void 0, Ke = /* @__PURE__ */ I("span", {
+    onDelete: b ? void 0 : (a) => w(a, e)
+  }, A ? A(e) : `${d(e)}-${t}`)) : void 0, ft = /* @__PURE__ */ N("span", {
     className: "flex items-center gap-1",
     children: [
-      q && /* @__PURE__ */ o(xt, {
+      z && /* @__PURE__ */ o(Mt, {
         width: 20,
         height: 20,
         className: "animate-spin"
       }),
-      ce && /* @__PURE__ */ o("button", {
+      ge && /* @__PURE__ */ o("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: ie,
-        children: /* @__PURE__ */ o(pt, {
+        onClick: Q,
+        children: /* @__PURE__ */ o(It, {
           width: 20,
           height: 20,
           className: "text-delta-700"
         })
       }),
-      g ? null : /* @__PURE__ */ o("button", {
+      b ? null : /* @__PURE__ */ o("button", {
         type: "button",
         tabIndex: -1,
         "aria-label": "Toggle options",
-        "aria-expanded": n,
+        "aria-expanded": s,
         "data-testid": `${l}-popup-indicator`,
         className: "flex cursor-pointer items-center border-0 bg-transparent",
         onMouseDown: (e) => e.preventDefault(),
-        onClick: Xe,
-        children: Ne ?? (s ? /* @__PURE__ */ o(mt, {
+        onClick: ut,
+        children: $e ?? (r ? /* @__PURE__ */ o(Pt, {
           width: 24,
           height: 24,
           className: "text-delta-700"
-        }) : /* @__PURE__ */ o(ut, {
+        }) : /* @__PURE__ */ o(Dt, {
           width: 24,
           height: 24,
-          className: E(B["select-custom-icon"], n && B["select-custom-icon-open"], "text-delta-700")
+          className: D(J["select-custom-icon"], s && J["select-custom-icon-open"], "text-delta-700")
         }))
       })
     ]
-  }), et = {
-    disabled: S,
-    size: ke,
+  }), mt = {
+    disabled: F,
+    size: Se,
     fullWidth: !0,
-    error: ye,
-    helperText: we,
-    value: m,
+    error: Ae,
+    helperText: Ce,
+    value: g,
     onChange: (e) => {
-      x(null), _(e, e.target.value, "input"), n || c(!0);
+      k || (y(null), S(e, e.target.value, "input"), s || i(!0));
     },
-    onKeyDown: Qe,
+    onKeyDown: dt,
     slotProps: {
       htmlInput: {
-        ...Ue(),
-        ref: ee,
-        onClick: () => c(!0),
+        ...tt(),
+        ref: V,
+        onClick: () => i(!0),
         role: "combobox",
         "aria-autocomplete": "list",
-        "aria-expanded": n,
-        "aria-controls": n ? Z : void 0,
-        "aria-activedescendant": de,
+        "aria-expanded": s,
+        "aria-controls": s ? U : void 0,
+        "aria-activedescendant": xe,
         autoComplete: "off",
-        readOnly: g
+        readOnly: b,
+        ...k ? {
+          inputMode: "none",
+          "aria-haspopup": "dialog"
+        } : {}
       },
       input: {
-        ref: Ye,
-        startAdornment: Ze,
-        endAdornment: Ke
+        ref: ot,
+        startAdornment: pt,
+        endAdornment: ft
       }
     }
-  }, tt = E("asma-pressable", "relative box-border flex cursor-pointer items-center gap-x-3 px-3 py-2 text-base text-delta-800", ve === "regular" ? "min-h-12" : "min-h-10", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), lt = (e, t, a) => {
-    const { key: p, ...w } = e;
-    return /* @__PURE__ */ I("li", {
-      ...w,
+  }, ye = D("asma-pressable", "relative box-border flex cursor-pointer items-center gap-x-3 px-3 py-2 text-base text-delta-800", Re === "regular" ? "min-h-12" : "min-h-10", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), ke = (e, t, a) => {
+    const { key: u, ...f } = e;
+    return /* @__PURE__ */ N("li", {
+      ...f,
       children: [
         e["data-active"] !== void 0 && /* @__PURE__ */ o("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
         }),
-        s ? /* @__PURE__ */ o(ue, {
+        r ? /* @__PURE__ */ o(ve, {
           dataTest: `${l}-${d(t)}-checkbox`,
           checked: a.selected,
           size: "medium",
@@ -214,109 +230,143 @@ function qt({ dataTest: l, options: b, renderInput: he, value: N, onChange: C, g
           hideWrapper: !0,
           decorative: !0
         }) : /* @__PURE__ */ o("span", {
-          className: "w-5",
-          children: a.selected && /* @__PURE__ */ o(ft, {
+          className: D("w-5", a.inPicker && "flex"),
+          children: a.selected && /* @__PURE__ */ o(Nt, {
             width: 20,
             height: 20,
             className: "text-gama-500"
           })
         }),
         /* @__PURE__ */ o("span", {
-          className: "line-clamp-2 min-w-0 flex-1 break-words",
+          className: D(!a.inPicker && "line-clamp-2", "min-w-0 flex-1 break-words"),
           children: d(t)
         })
       ]
-    }, p);
-  }, st = (e, t) => {
-    const a = $(e), p = {
-      ...Te({
-        onMouseDown: (f) => f.preventDefault(),
-        onClick: (f) => {
-          a || v(f, e);
+    }, u);
+  }, ht = (e, t) => {
+    const a = R(e), u = {
+      ...rt({
+        onMouseDown: (m) => m.preventDefault(),
+        onClick: (m) => {
+          a || w(m, e);
         },
-        onMouseMove: () => x(null)
+        onMouseMove: () => y(null)
       }),
       key: A ? String(A(e)) : `${d(e)}-${t}`,
-      ref: (f) => {
-        K.current[t] = f;
+      ref: (m) => {
+        ce.current[t] = m;
       },
       role: "option",
       id: `${l}-option-${t}`,
-      "aria-selected": W(e),
+      "aria-selected": O(e),
       "aria-disabled": a || void 0,
-      "data-active": r === t ? "" : void 0,
-      className: tt
-    }, w = {
-      selected: W(e),
+      "data-active": n === t ? "" : void 0,
+      className: ye
+    }, f = {
+      selected: O(e),
       index: t,
-      inputValue: m
+      inputValue: g
     };
-    return T ? T(p, e, w) : lt(p, e, w);
-  }, rt = !!(M && s), H = b.length > 0 && i.length === b.length, ot = i.length > 0 && !H;
-  return /* @__PURE__ */ I("div", {
-    className: E(B.styledSelectAutocompleteWrapper, Le, $e),
-    "data-field-width": G,
-    style: gt(G),
-    children: [he(et), n && /* @__PURE__ */ o(yt, {
-      root: ae,
-      children: /* @__PURE__ */ I("ul", {
-        ref: qe,
-        ...j ? nt : {},
-        style: {
-          ...j ? at : {},
-          ...Be,
-          width: je ?? void 0,
-          maxHeight: te ?? void 0,
-          fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-          ...Q?.popper?.style
-        },
-        ...Ve(),
-        id: Z,
-        role: "listbox",
-        "aria-multiselectable": s ? !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)]", rt && "py-0", "[&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", Me?.listbox, Q?.popper?.className),
-        children: [M && s && /* @__PURE__ */ I("li", {
-          id: `${l}-select-all`,
-          role: "option",
-          "aria-selected": H,
-          "data-active": r === -1 ? "" : void 0,
-          tabIndex: -1,
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: z,
-          onMouseMove: () => x(null),
-          className: "relative box-border flex h-8 cursor-pointer items-center gap-x-3 bg-[var(--colors-gray-10)] px-3 text-xs font-semibold uppercase tracking-[0.2px] text-delta-600 hover:bg-delta-50",
-          children: [
-            r === -1 && /* @__PURE__ */ o("span", {
-              "aria-hidden": "true",
-              className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
-            }),
-            /* @__PURE__ */ o(ue, {
-              dataTest: `${l}-select-all`,
-              checked: H,
-              indeterminate: ot,
-              size: "medium",
-              checkboxClassName: "!h-4 !w-4",
-              hideWrapper: !0,
-              decorative: !0
-            }),
-            /* @__PURE__ */ o("span", {
-              className: "flex-1 truncate",
-              children: Se
-            })
-          ]
-        }), q ? /* @__PURE__ */ o("li", {
-          role: "presentation",
-          className: "px-3 py-2 text-sm text-delta-600",
-          children: ge
-        }) : u.length === 0 ? /* @__PURE__ */ o("li", {
-          role: "presentation",
-          className: "px-3 py-2 text-sm text-delta-600",
-          children: xe
-        }) : u.map(st)]
+    return j ? j(u, e, f) : ke(u, e, f);
+  }, bt = !!(C && r), G = h.length > 0 && c.length === h.length, gt = c.length > 0 && !G;
+  return /* @__PURE__ */ N("div", {
+    className: D(J.styledSelectAutocompleteWrapper, He, ze),
+    "data-field-width": oe,
+    style: Rt(oe),
+    children: [
+      Ne(mt),
+      k && /* @__PURE__ */ N(zt, { children: [/* @__PURE__ */ o($t, {
+        announcement: qe,
+        dataTest: `${l}-live`
+      }), /* @__PURE__ */ o(jt, {
+        open: s,
+        dataTest: l,
+        listboxId: U,
+        title: H ?? (ae.label || void 0),
+        name: typeof H == "string" ? H : ae.name || B.search,
+        text: B,
+        options: h,
+        multiple: r,
+        value: r ? c : x,
+        clearable: !le && !b,
+        isEqual: v,
+        isOptionDisabled: R,
+        getLabel: d,
+        getOptionKey: A,
+        filterOptions: _,
+        renderOptionRow: j ?? ke,
+        optionRowClassName: ye,
+        loading: z,
+        loadingText: ee,
+        noOptionsText: te,
+        allowSelectAll: C,
+        selectAllLabel: re,
+        onSelect: w,
+        onClear: it,
+        onApply: ct,
+        onCancel: () => i(!1)
+      })] }),
+      s && !k && /* @__PURE__ */ o(Ht, {
+        root: be,
+        children: /* @__PURE__ */ N("ul", {
+          ref: st,
+          ...q ? xt : {},
+          style: {
+            ...q ? yt : {},
+            ...et,
+            width: Xe ?? void 0,
+            maxHeight: de ?? void 0,
+            fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+            ...ne?.popper?.style
+          },
+          ...lt(),
+          id: U,
+          role: "listbox",
+          "aria-multiselectable": r ? !0 : void 0,
+          className: D("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)]", bt && "py-0", "[&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", Le?.listbox, ne?.popper?.className),
+          children: [C && r && /* @__PURE__ */ N("li", {
+            id: `${l}-select-all`,
+            role: "option",
+            "aria-selected": G,
+            "data-active": n === -1 ? "" : void 0,
+            tabIndex: -1,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: T,
+            onMouseMove: () => y(null),
+            className: "relative box-border flex h-8 cursor-pointer items-center gap-x-3 bg-[var(--colors-gray-10)] px-3 text-xs font-semibold uppercase tracking-[0.2px] text-delta-600 hover:bg-delta-50",
+            children: [
+              n === -1 && /* @__PURE__ */ o("span", {
+                "aria-hidden": "true",
+                className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
+              }),
+              /* @__PURE__ */ o(ve, {
+                dataTest: `${l}-select-all`,
+                checked: G,
+                indeterminate: gt,
+                size: "medium",
+                checkboxClassName: "!h-4 !w-4",
+                hideWrapper: !0,
+                decorative: !0
+              }),
+              /* @__PURE__ */ o("span", {
+                className: "flex-1 truncate",
+                children: re
+              })
+            ]
+          }), z ? /* @__PURE__ */ o("li", {
+            role: "presentation",
+            className: "px-3 py-2 text-sm text-delta-600",
+            children: ee
+          }) : p.length === 0 ? /* @__PURE__ */ o("li", {
+            role: "presentation",
+            className: "px-3 py-2 text-sm text-delta-600",
+            children: te
+          }) : p.map(ht)]
+        })
       })
-    })]
+    ]
   });
 }
 export {
-  qt as StyledSelectAutocomplete
+  vl as StyledSelectAutocomplete
 };

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

@@ -0,0 +1,24 @@
+var u = (t, r, s) => {
+  if (r.length === 0) return t.length > 0 ? [{
+    value: [],
+    reason: "clear"
+  }] : [];
+  const c = [];
+  let o = [...t];
+  for (const e of t)
+    r.some((n) => s(e, n)) || (o = o.filter((n) => !s(n, e)), c.push({
+      value: o,
+      reason: "removeOption",
+      option: e
+    }));
+  for (const e of r)
+    t.some((n) => s(e, n)) || (o = [...o, e], c.push({
+      value: o,
+      reason: "selectOption",
+      option: e
+    }));
+  return c;
+};
+export {
+  u as getDraftChanges
+};