asma-ui-core 3.115.0 → 3.116.0

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

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

package/dist/hooks/useMediaQuery.hook.js

@@ -1,12 +1,12 @@
 import { useSyncExternalStore as o } from "react";
-function r(t) {
+function e(t) {
   function i() {
     return window.matchMedia(t).matches;
   }
-  function a(e) {
+  function a(r) {
     const n = window.matchMedia(t);
-    return n.addEventListener("change", e), () => {
-      n.removeEventListener("change", e);
+    return n.addEventListener("change", r), () => {
+      n.removeEventListener("change", r);
     };
   }
   function u() {
@@ -16,9 +16,10 @@ function r(t) {
     return o(a, i, u);
   };
 }
-var h = r("(max-width: 743px)"), c = r("(max-height: 480px)"), d = r("(max-width: 743px), (max-height: 480px)");
+var h = e("(max-width: 743px)"), s = e("(max-height: 480px)"), c = e("(max-height: 480px) and (min-width: 480px)"), m = e("(max-width: 743px), (max-height: 480px)");
 export {
-  d as useFullScreenPickerMediaQuery,
+  m as useFullScreenPickerMediaQuery,
   h as useMobileMediaQuery,
-  c as useShortViewportMediaQuery
+  c as usePickerOneRowHeaderMediaQuery,
+  s as useShortViewportMediaQuery
 };

package/dist/src/components/inputs/full-screen-picker/FullScreenPicker.d.ts

@@ -28,7 +28,8 @@ export interface FullScreenPickerProps {
  * search, optional selection/clear row; 1 px `border/separator` delta-200 under it) and one scrolling
  * **List**. Title = Mobile/Page title, SemiBold 20/28, `text-icon/title-label` delta-800, wraps.
  * Close = 40 × 40 Quaternary button with a 24 px ×. Search row = `pt-8 px-16`. On a short viewport
- * (`Variant2`, ≤ 480 px high) title, search (max 240 px) and close share the first row.
+ * (`Variant2`, ≤ 480 px high and ≥ 480 px wide — a phone in landscape, not an upright phone whose
+ * keyboard is up) title, search (max 240 px) and close share the first row.
  *
  * The shared shell for every full-screen picker in ui-core: `StyledSelectAutocomplete` and
  * `CountryCodeSelect` both render through it (ASMA-8468). Presentation only — the caller owns the

package/dist/src/components/inputs/full-screen-picker/pickerCopy.d.ts

@@ -23,7 +23,6 @@ export interface PickerText {
     cleared: string;
     /** Announced after `clearAll`. */
     clearedAll: string;
-    truncated: (shown: number, total: number) => string;
 }
 /** Default picker copy for `locale`, with any consumer overrides applied on top. */
 export declare const getPickerText: (locale: UiCoreLocale, overrides?: Partial<PickerText>) => PickerText;

package/dist/src/components/inputs/phone-field/CountryCodeOptions.d.ts

@@ -20,9 +20,11 @@ export interface CountryCodeOptionsProps {
     onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
     /** Tabbing into the list: put the active-row marker on a row. */
     onFocus?: () => void;
+    /** The list is showing: each opening starts at the chosen country (LIST-10, AC 17). */
+    open?: boolean;
 }
 /**
  * The country listbox. Presentation only — filtering, the active row and the keyboard live in
  * [[useCountryPicker]], so the desktop trigger and the mobile sheet render the same list.
  */
-export declare const CountryCodeOptions: ({ dataTest, visible, selectedIso2, activeIndex, optionId, onSelect, listId, label, renderFlag, className, onKeyDown, onFocus, }: CountryCodeOptionsProps) => JSX.Element;
+export declare const CountryCodeOptions: ({ dataTest, visible, selectedIso2, activeIndex, optionId, onSelect, listId, label, renderFlag, className, onKeyDown, onFocus, open, }: CountryCodeOptionsProps) => JSX.Element;

package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts

@@ -29,6 +29,7 @@ export interface AutocompleteRenderInputParams {
             ref: React.Ref<HTMLDivElement>;
             startAdornment?: ReactNode;
             endAdornment?: ReactNode;
+            onClick?: (event: React.MouseEvent<HTMLElement>) => void;
         };
     };
 }