asma-ui-core 3.95.0 → 3.96.0

package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js

@@ -1,44 +1,45 @@
-import { cn as $ } from "../../../../helpers/cn.js";
-import { LoadingIcon as X } from "../../../icons/loading-icon/LoadingIcon.js";
-import { CheckIcon as Y } from "../../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as Z } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as j } from "../../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as ee } from "../../checkbox/base-ui/StyledCheckbox.js";
-import { StyledTooltip as D } from "../../../data-display/tooltip/StyledTooltip.js";
-import { StyledInputField as te } from "../../input-field/StyledInputField.js";
-import { StyledSelectAutocomplete as le } from "../../select-autocomplete/StyledSelectAutocomplete.js";
-import { DynamicInteractiveChipGroup as ae } from "./DynamicInteractiveChipGroup.js";
-import { createElement as L, forwardRef as re, useCallback as f, useState as oe } from "react";
-import { Fragment as q, jsx as l, jsxs as C } from "react/jsx-runtime";
-var xe = re((T, E) => {
-  const [F, O] = oe(!1), { options: k, dataTest: h, value: g, readOnly: u, multiple: o, required: K, onChange: x, size: z, title: v, noOptionsText: H, placeholder: _, disabled: S, helperText: R, disableHelperText: I, error: N, valueKey: A = "value", labelKey: G = "label", renderLabel: i, getOptionTooltip: P, startAdornment: W, autocompleteProps: n, loading: m, maxTags: J, onFocus: M, onBlur: Q } = T, s = (e) => typeof e == "object" ? e?.[G]?.toString() ?? "" : e?.toString() ?? "", p = f((e) => typeof e == "object" ? e?.[A] : e, [A]), V = f((e, t) => p(e) === p(t), [p]), y = (e) => {
+import { cn as j } from "../../../../helpers/cn.js";
+import { LoadingIcon as Y } from "../../../icons/loading-icon/LoadingIcon.js";
+import { CheckIcon as Z } from "../../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as ee } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as D } from "../../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as te } from "../../checkbox/base-ui/StyledCheckbox.js";
+import { StyledTooltip as L } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledInputField as le } from "../../input-field/StyledInputField.js";
+import { StyledSelectAutocomplete as ae } from "../../select-autocomplete/StyledSelectAutocomplete.js";
+import { DynamicInteractiveChipGroup as re } from "./DynamicInteractiveChipGroup.js";
+import { createElement as q, forwardRef as oe, useCallback as f, useState as ne } from "react";
+import { Fragment as z, jsx as l, jsxs as T } from "react/jsx-runtime";
+var ve = oe((O, E) => {
+  const [F, S] = ne(!1), { options: k, dataTest: h, value: g, readOnly: u, multiple: o, required: K, onChange: x, size: H, rowSize: v = "compact", title: y, noOptionsText: _, placeholder: R, disabled: I, helperText: G, disableHelperText: N, error: A, valueKey: P = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: V, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = O, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = f((e) => typeof e == "object" ? e?.[P] : e, [P]), B = f((e, t) => p(e) === p(t), [p]), w = (e) => {
     const t = p(e);
     return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : s(e);
-  }, B = f((e) => {
-    O(!0), n?.onOpen?.(e);
-  }, [n]), U = f((e, t) => {
-    O(!1), n?.onClose?.(e, t);
+  }, $ = f((e) => {
+    S(!0), n?.onOpen?.(e);
+  }, [n]), X = f((e, t) => {
+    S(!1), n?.onClose?.(e, t);
   }, [n]);
-  if (o && u) return /* @__PURE__ */ l(ae, { ...T });
-  const w = v ? `${h}-title` : void 0;
-  return /* @__PURE__ */ C("div", {
+  if (o && u) return /* @__PURE__ */ l(re, { ...O });
+  const C = y ? `${h}-title` : void 0;
+  return /* @__PURE__ */ T("div", {
     className: "flex w-full flex-col gap-y-1",
-    children: [v && /* @__PURE__ */ l("span", {
-      id: w,
+    children: [y && /* @__PURE__ */ l("span", {
+      id: C,
       className: "text-base font-semibold text-delta-800",
-      children: v
-    }), /* @__PURE__ */ l(le, {
+      children: y
+    }), /* @__PURE__ */ l(ae, {
       open: F,
-      onOpen: B,
-      onClose: U,
+      onOpen: $,
+      onClose: X,
       disableCloseOnSelect: o,
       dataTest: h,
-      disabled: !!S || !!m,
-      noOptionsText: H,
+      disabled: !!I || !!m,
+      noOptionsText: _,
       loading: m,
       readOnly: u,
       value: g,
-      size: z,
+      size: H,
+      rowSize: v,
       disableClearable: K,
       options: k,
       fullWidth: !0,
@@ -48,14 +49,14 @@ var xe = re((T, E) => {
         x(t);
       },
       filterSelectedOptions: !1,
-      isOptionEqualToValue: n?.isOptionEqualToValue ?? V,
+      isOptionEqualToValue: n?.isOptionEqualToValue ?? B,
       autoHeight: !0,
       multiple: o,
       renderValue: o ? (e) => {
         if (!Array.isArray(e)) return null;
-        const t = e, d = J ?? k.length, a = t.slice(0, d), c = t.length - d;
-        return [...a.map((r) => /* @__PURE__ */ l(j, {
-          dataTest: `${y(r)}-chip`,
+        const t = e, d = M ?? k.length, a = t.slice(0, d), c = t.length - d;
+        return [...a.map((r) => /* @__PURE__ */ l(D, {
+          dataTest: `${w(r)}-chip`,
           readOnly: u,
           variant: "outlined",
           label: i ? i(r) : s(r),
@@ -63,47 +64,47 @@ var xe = re((T, E) => {
             root: "h-fit w-fit min-h-[32px]",
             label: "block whitespace-normal"
           },
-          disabled: !!S || !!m,
+          disabled: !!I || !!m,
           deleteButtonTabIndex: -1,
           onDelete: () => {
-            Array.isArray(g) && x(g.filter((b) => !V(b, r)));
+            Array.isArray(g) && x(g.filter((b) => !B(b, r)));
           }
-        }, y(r))), c > 0 ? /* @__PURE__ */ l(j, {
+        }, w(r))), c > 0 ? /* @__PURE__ */ l(D, {
           dataTest: "remaining-count-tag-chip",
           label: `+${c}`,
           variant: "outlined",
           tabIndex: -1,
-          onClick: B
+          onClick: $
         }, "remaining-count") : null];
       } : void 0,
-      popupIcon: m ? /* @__PURE__ */ l(X, {
+      popupIcon: m ? /* @__PURE__ */ l(Y, {
         height: 24,
         width: 24
-      }) : o ? /* @__PURE__ */ l(Z, {
+      }) : o ? /* @__PURE__ */ l(ee, {
         height: 24,
         width: 24
       }) : void 0,
       renderOption: (e, t, d) => {
-        const a = typeof t == "object" ? !!t?.disabled : !1, c = P ? P(t) : null;
+        const a = typeof t == "object" ? !!t?.disabled : !1, c = V ? V(t) : null;
         if (o) {
           const b = d.selected;
-          return /* @__PURE__ */ L("li", {
+          return /* @__PURE__ */ q("li", {
             ...e,
             role: "option",
             "aria-selected": b,
             key: e.id,
             onClick: a ? void 0 : e.onClick,
-            className: $("relative flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+            className: j("relative flex cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", v === "regular" ? "min-h-12" : "min-h-10", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
             "aria-disabled": a
           }, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
             "aria-hidden": "true",
             className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
-          }), /* @__PURE__ */ l(D, {
+          }), /* @__PURE__ */ l(L, {
             arrow: !0,
             title: c,
-            children: /* @__PURE__ */ C(q, { children: [/* @__PURE__ */ l(ee, {
+            children: /* @__PURE__ */ T(z, { children: [/* @__PURE__ */ l(te, {
               disabled: a,
-              dataTest: `${y(t)}-checkbox`,
+              dataTest: `${w(t)}-checkbox`,
               size: "small",
               decorative: !0,
               className: "min-w-[36px]",
@@ -115,23 +116,23 @@ var xe = re((T, E) => {
           }));
         }
         const r = d.selected;
-        return /* @__PURE__ */ L("li", {
+        return /* @__PURE__ */ q("li", {
           ...e,
           role: "option",
           "aria-selected": r,
           key: e.id,
-          className: $("relative flex min-h-10 cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+          className: j("relative flex cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", v === "regular" ? "min-h-12" : "min-h-10", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
           onClick: a ? void 0 : e.onClick,
           "aria-disabled": a
         }, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
-        }), /* @__PURE__ */ l(D, {
+        }), /* @__PURE__ */ l(L, {
           arrow: !0,
           title: c,
-          children: /* @__PURE__ */ C(q, { children: [/* @__PURE__ */ l("span", {
+          children: /* @__PURE__ */ T(z, { children: [/* @__PURE__ */ l("span", {
             className: "w-5 min-w-5",
-            children: r && /* @__PURE__ */ l(Y, {
+            children: r && /* @__PURE__ */ l(Z, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
@@ -142,30 +143,30 @@ var xe = re((T, E) => {
           })] })
         }));
       },
-      renderInput: (e) => /* @__PURE__ */ l(te, {
+      renderInput: (e) => /* @__PURE__ */ l(le, {
         dataTest: `${h}-input-field`,
         ...e,
         inputRef: E,
-        error: N,
-        helperText: I ? void 0 : R,
-        reserveHelperText: I ? !1 : N !== void 0,
+        error: A,
+        helperText: N ? void 0 : G,
+        reserveHelperText: N ? !1 : A !== void 0,
         variant: "outlined",
         label: "",
-        placeholder: _,
+        placeholder: R,
         readOnly: u,
-        onFocus: M,
-        onBlur: Q,
+        onFocus: Q,
+        onBlur: U,
         onKeyDown: e.onKeyDown,
         autoComplete: "off",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
-            startAdornment: W ?? e.slotProps?.input?.startAdornment
+            startAdornment: J ?? e.slotProps?.input?.startAdornment
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
-            ...w ? { "aria-labelledby": w } : {}
+            ...C ? { "aria-labelledby": C } : {}
           }
         }
       }),
@@ -174,5 +175,5 @@ var xe = re((T, E) => {
   });
 });
 export {
-  xe as DynamicSelectAutocomplete
+  ve as DynamicSelectAutocomplete
 };

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

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

package/dist/src/components/inputs/dynamic-select/types.d.ts

@@ -34,6 +34,12 @@ interface DynamicSelectCommonProps<TOption extends DynamicSelectOption> {
     title?: string;
     /** @figmaProp none — app size (chips/buttons). Defaults to `'medium'`. */
     size?: 'small' | 'medium';
+    /**
+     * Option-row density in the autocomplete dropdown. `'compact'` (default) matches the Figma Menus
+     * item at 40px; `'regular'` gives a roomier 48px row. Rows still grow taller when a label wraps.
+     * No effect on the chip-group variant (≤5 options).
+     */
+    rowSize?: 'compact' | 'regular';
     /** Placeholder text shown in the autocomplete input when no value is selected. */
     placeholder?: string;
     /** @figmaProp State = true→"Disabled" */

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

@@ -82,6 +82,13 @@ export interface StyledSelectAutocompleteProps<T, Multiple extends boolean | und
     helperText?: ReactNode;
     /** @figmaProp none — FieldSize (both render the 40px field) */
     size?: 'small' | 'medium';
+    /**
+     * Option-row density in the popover. `'compact'` (default) matches the Figma Menus item at 40px
+     * (`min-h-10`); `'regular'` gives a roomier 48px row (`min-h-12`). Rows still grow taller when a
+     * label wraps to a second line — this only sets the minimum. Does not affect the 32px select-all
+     * header, the input field, or single-select rows' left check column.
+     */
+    rowSize?: 'compact' | 'regular';
     /** @figmaProp Clear (trigger clear button) */
     disableClearable?: boolean;
     freeSolo?: boolean;
@@ -125,5 +132,5 @@ export interface StyledSelectAutocompleteProps<T, Multiple extends boolean | und
  * ponytail: `freeSolo` is accepted (arbitrary input is emitted via onInputChange) but not turned
  * into option values; exact keyboard-parity edge cases are Chromatic/axe-gated.
  */
-export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>({ dataTest, options, renderInput, value, onChange, getOptionLabel, getOptionKey, isOptionEqualToValue, renderOption, renderValue, filterOptions, loading, loadingText, noOptionsText, disabled, readOnly, error, helperText, size, disableClearable, disableCloseOnSelect, popupIcon, autoHeight, multiple, allowSelectAll, selectAllLabel, fullWidth, classes, inputValue: controlledInput, onInputChange, open: controlledOpen, onOpen, onClose, className, wrapperClassName, getOptionDisabled, slotProps, }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;
+export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>({ dataTest, options, renderInput, value, onChange, getOptionLabel, getOptionKey, isOptionEqualToValue, renderOption, renderValue, filterOptions, loading, loadingText, noOptionsText, disabled, readOnly, error, helperText, size, rowSize, disableClearable, disableCloseOnSelect, popupIcon, autoHeight, multiple, allowSelectAll, selectAllLabel, fullWidth, classes, inputValue: controlledInput, onInputChange, open: controlledOpen, onOpen, onClose, className, wrapperClassName, getOptionDisabled, slotProps, }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.95.0",
+    "version": "3.96.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",