asma-ui-core 3.74.0 → 3.74.2

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

@@ -8,18 +8,18 @@ import { StyledTooltip as L } from "../../../data-display/tooltip/StyledTooltip.
 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 b, useState as ne } from "react";
+import { createElement as q, forwardRef as oe, useCallback as f, useState as ne } from "react";
 import { Fragment as E, jsx as l, jsxs as O } from "react/jsx-runtime";
-var ye = oe((S, F) => {
-  const [z, k] = ne(!1), { options: f, dataTest: g, value: x, readOnly: u, multiple: o, required: H, onChange: y, size: K, title: v, noOptionsText: _, placeholder: R, disabled: I, helperText: G, disableHelperText: A, error: N, valueKey: P = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: V, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = S, C = f.length < 11, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = b((e) => typeof e == "object" ? e?.[P] : e, [P]), D = b((e, t) => p(e) === p(t), [p]), w = (e) => {
+var ye = oe((k, F) => {
+  const [z, S] = ne(!1), { options: h, dataTest: g, value: x, readOnly: u, multiple: o, required: H, onChange: y, size: K, title: v, noOptionsText: _, placeholder: R, disabled: I, helperText: G, disableHelperText: A, error: N, valueKey: P = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: V, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = k, w = h.length < 11, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = f((e) => typeof e == "object" ? e?.[P] : e, [P]), D = f((e, t) => p(e) === p(t), [p]), C = (e) => {
     const t = p(e);
     return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : s(e);
-  }, $ = b((e) => {
-    k(!0), n?.onOpen?.(e);
-  }, [n]), X = b((e, t) => {
-    k(!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(re, { ...S });
+  if (o && u) return /* @__PURE__ */ l(re, { ...k });
   const T = v ? `${g}-title` : void 0;
   return /* @__PURE__ */ O("div", {
     className: "flex w-full flex-col gap-y-1",
@@ -40,7 +40,7 @@ var ye = oe((S, F) => {
       value: x,
       size: K,
       disableClearable: H,
-      options: f,
+      options: h,
       fullWidth: !0,
       classes: { listbox: "max-h-[300px]" },
       getOptionLabel: n?.getOptionLabel ?? s,
@@ -53,9 +53,9 @@ var ye = oe((S, F) => {
       multiple: o,
       renderValue: o ? (e) => {
         if (!Array.isArray(e)) return null;
-        const t = e, d = M ?? f.length, a = t.slice(0, d), c = t.length - d;
+        const t = e, d = M ?? h.length, a = t.slice(0, d), c = t.length - d;
         return [...a.map((r) => /* @__PURE__ */ l(B, {
-          dataTest: `${w(r)}-chip`,
+          dataTest: `${C(r)}-chip`,
           readOnly: u,
           variant: "outlined",
           label: i ? i(r) : s(r),
@@ -65,9 +65,9 @@ var ye = oe((S, F) => {
           },
           disabled: !!I || !!m,
           onDelete: () => {
-            Array.isArray(x) && y(x.filter((h) => !D(h, r)));
+            Array.isArray(x) && y(x.filter((b) => !D(b, r)));
           }
-        }, w(r))), c > 0 ? /* @__PURE__ */ l(B, {
+        }, C(r))), c > 0 ? /* @__PURE__ */ l(B, {
           dataTest: "remaining-count-tag-chip",
           label: `+${c}`,
           variant: "outlined",
@@ -84,11 +84,11 @@ var ye = oe((S, F) => {
       renderOption: (e, t, d) => {
         const a = typeof t == "object" ? !!t?.disabled : !1, c = V ? V(t) : null;
         if (o) {
-          const h = d.selected;
+          const b = d.selected;
           return /* @__PURE__ */ q("li", {
             ...e,
             role: "option",
-            "aria-selected": h,
+            "aria-selected": b,
             key: e.id,
             onClick: a ? void 0 : e.onClick,
             className: j("flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
@@ -98,13 +98,13 @@ var ye = oe((S, F) => {
             title: c,
             children: /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ l(te, {
               disabled: a,
-              dataTest: `${w(t)}-checkbox`,
+              dataTest: `${C(t)}-checkbox`,
               size: "small",
               decorative: !0,
               className: "min-w-[36px]",
-              checked: h
+              checked: b
             }), i ? i(t) : /* @__PURE__ */ l("span", {
-              className: "h-fit text-base text-delta-800",
+              className: "line-clamp-2 h-fit min-w-0 flex-1 break-words text-base text-delta-800",
               children: s(t)
             })] })
           }));
@@ -129,7 +129,7 @@ var ye = oe((S, F) => {
               width: 20
             })
           }), i ? i(t) : /* @__PURE__ */ l("span", {
-            className: "text-base text-delta-800",
+            className: "line-clamp-2 min-w-0 flex-1 break-words text-base text-delta-800",
             children: s(t)
           })] })
         }));
@@ -147,19 +147,19 @@ var ye = oe((S, F) => {
         readOnly: u,
         onFocus: Q,
         onBlur: U,
-        onKeyDown: C ? (t) => t.preventDefault() : void 0,
+        onKeyDown: w ? (t) => t.preventDefault() : void 0,
         autoComplete: "off",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
             startAdornment: J ?? e.slotProps?.input?.startAdornment,
-            style: C ? { caretColor: "transparent" } : {}
+            style: w ? { caretColor: "transparent" } : {}
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
             ...T ? { "aria-labelledby": T } : {},
-            style: C ? { caretColor: "transparent" } : {}
+            style: w ? { caretColor: "transparent" } : {}
           }
         }
       }),

package/dist/components/inputs/select/StyledSelect.js

@@ -11,12 +11,12 @@ import { useFormControlContext as je } from "../../miscellaneous/FormControlCont
 import { Children as N, cloneElement as Ke, isValidElement as P, useEffect as _, useId as Me, useMemo as Ye, useRef as $, useState as q } from "react";
 import { jsx as n, jsxs as B } from "react/jsx-runtime";
 import { FloatingPortal as ze, autoUpdate as Oe, flip as We, offset as $e, shift as Ge, size as Je, useClick as Qe, useDismiss as Xe, useFloating as Ze, useInteractions as et, useMergeRefs as G, useRole as tt } from "@floating-ui/react";
-var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, errorText: X, helperText: T, reserveHelperText: Z, expandHelperText: ee = !0, allowClear: U, disabled: te, readOnly: i, name: m, placeholder: w, displayEmpty: A, multiple: u, renderValue: V, fullWidth: re, className: oe, style: se, sx: ne, variant: le, children: v, MenuProps: ae, onFocus: ie, onBlur: ce, labelId: g }) => {
-  const c = je(), j = `${H}-listbox`, y = le === "standard", d = Q ?? c?.error ?? !1, s = te ?? c?.disabled ?? !1, K = d ? X ?? T : T, { show: R, role: ue } = Ue("StyledSelect", d, K, Z, i), M = Me(), { fieldRef: de, rowRef: fe, rowStyle: pe } = Te(ee && R), [o, b] = q(!1), [h, S] = q(!1), [me, Y] = q(J), k = I !== void 0, r = k ? I : me, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, a = $(null), z = $(null), ge = (e) => {
-    if (b(e), e) return;
+var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, errorText: X, helperText: T, reserveHelperText: Z, expandHelperText: ee = !0, allowClear: U, disabled: te, readOnly: i, name: m, placeholder: w, displayEmpty: A, multiple: d, renderValue: V, fullWidth: re, className: oe, style: se, sx: ne, variant: le, children: v, MenuProps: ae, onFocus: ie, onBlur: ce, labelId: g }) => {
+  const c = je(), j = `${H}-listbox`, b = le === "standard", u = Q ?? c?.error ?? !1, s = te ?? c?.disabled ?? !1, K = u ? X ?? T : T, { show: R, role: de } = Ue("StyledSelect", u, K, Z, i), M = Me(), { fieldRef: ue, rowRef: fe, rowStyle: pe } = Te(ee && R), [o, y] = q(!1), [h, S] = q(!1), [me, Y] = q(J), k = I !== void 0, r = k ? I : me, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, a = $(null), z = $(null), ge = (e) => {
+    if (y(e), e) return;
     const t = document.activeElement;
     t && t !== document.body && !a.current?.contains(t) || z.current?.focus();
-  }, { refs: f, floatingStyles: ye, context: D } = Ze({
+  }, { refs: f, floatingStyles: be, context: D } = Ze({
     open: o,
     onOpenChange: ge,
     placement: "bottom-start",
@@ -30,7 +30,7 @@ var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, error
         t.floating.style.minWidth = `${e.reference.width + 20}px`;
       } })
     ]
-  }), { getReferenceProps: be, getFloatingProps: he } = et([
+  }), { getReferenceProps: ye, getFloatingProps: he } = et([
     Qe(D, { enabled: !s && !i }),
     Xe(D),
     tt(D, { role: "listbox" })
@@ -53,25 +53,25 @@ var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, error
     return () => cancelAnimationFrame(e);
   }, [o]);
   const Ae = (e, t) => {
-    const x = u ? Array.isArray(r) && r.includes(e) ? r.filter((E) => E !== e) : [...Array.isArray(r) ? r : [], e] : e;
+    const x = d ? Array.isArray(r) && r.includes(e) ? r.filter((E) => E !== e) : [...Array.isArray(r) ? r : [], e] : e;
     k || Y(x), L?.({ target: {
       value: x,
       name: m
-    } }, t), u || (b(!1), requestAnimationFrame(() => f.domReference.current?.focus()));
+    } }, t), d || (y(!1), requestAnimationFrame(() => f.domReference.current?.focus()));
   }, W = () => {
-    const e = u ? [] : "";
+    const e = d ? [] : "";
     k || Y(e), L?.({ target: {
       value: e,
       name: m
-    } }, null), b(!1), S(!1);
+    } }, null), y(!1), S(!1);
   }, ve = N.map(v, (e) => {
     if (!P(e)) return e;
     const t = e.props.value;
     return Ke(e, {
-      selected: u ? Array.isArray(r) && r.includes(t) : t === r,
+      selected: d ? Array.isArray(r) && r.includes(t) : t === r,
       onClick: () => Ae(t, e.props.children)
     });
-  }), Re = N.toArray(v).find((e) => P(e) && e.props.value === r), Se = V ? V(r) : u && Array.isArray(r) ? N.toArray(v).filter((e) => P(e) && r.includes(e.props.value)).map((e) => {
+  }), Re = N.toArray(v).find((e) => P(e) && e.props.value === r), Se = V ? V(r) : d && Array.isArray(r) ? N.toArray(v).filter((e) => P(e) && r.includes(e.props.value)).map((e) => {
     const t = e.props.children;
     return typeof t == "string" || typeof t == "number" ? String(t) : "";
   }).join(", ") : Re?.props.children, ke = (e) => {
@@ -79,7 +79,7 @@ var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, error
       e.preventDefault(), W();
       return;
     }
-    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || i || (e.preventDefault(), b(!0), requestAnimationFrame(() => {
+    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || i || (e.preventDefault(), y(!0), requestAnimationFrame(() => {
       if (a.current?.querySelector('[role="option"][aria-selected="true"]')) return;
       const t = a.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
       t?.length && t[e.key === "ArrowUp" ? t.length - 1 : 0]?.focus();
@@ -89,9 +89,9 @@ var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, error
     if (t.length === 0) return;
     const x = t.findIndex((E) => E === document.activeElement);
     e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(x + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
-  }, C = y && (o || h), Fe = s ? "text-delta-300" : C ? "text-gama-500" : "text-delta-800", Ce = s ? "text-delta-300" : "text-delta-700";
+  }, C = b && (o || h), Fe = s ? "text-delta-300" : C ? "text-gama-500" : "text-delta-800", Ce = s ? "text-delta-300" : "text-delta-700";
   return /* @__PURE__ */ B("div", {
-    ref: de,
+    ref: ue,
     className: p("group relative inline-flex flex-col", re && "w-full", oe),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
@@ -103,14 +103,14 @@ var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, error
         ref: xe,
         type: "button",
         "data-testid": H,
-        ...be({ onKeyDown: ke }),
+        ...ye({ onKeyDown: ke }),
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-expanded": o,
         "aria-controls": j,
         "aria-labelledby": g,
         "aria-label": g ? void 0 : m,
-        "aria-invalid": d ? !0 : void 0,
+        "aria-invalid": u ? !0 : void 0,
         "aria-describedby": R ? M : void 0,
         "aria-disabled": s ? !0 : void 0,
         disabled: s,
@@ -120,8 +120,8 @@ var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, error
         onBlur: (e) => {
           S(!1), ce?.(e);
         },
-        style: { minWidth: l && !y ? 105 : void 0 },
-        className: p("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", C ? "bg-gama-50" : "bg-transparent", Fe, y && "min-w-0", s && "cursor-not-allowed", i && "pointer-events-none"),
+        style: { minWidth: l && !b ? 105 : void 0 },
+        className: p("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", C ? "bg-gama-50" : "bg-transparent", Fe, b && "min-w-0", s && "cursor-not-allowed", i && "pointer-events-none"),
         children: [
           /* @__PURE__ */ n("span", {
             className: p("min-w-0 flex-1 truncate", !l && "text-delta-500"),
@@ -148,10 +148,10 @@ var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, error
           }),
           /* @__PURE__ */ n("div", { className: Ve({
             focused: o || h,
-            error: d,
+            error: u,
             disabled: s,
             readOnly: i,
-            borderless: y
+            borderless: b
           }) })
         ]
       }),
@@ -166,20 +166,20 @@ var gt = ({ dataTest: H, value: I, defaultValue: J, onChange: L, error: Q, error
           ...F ? _e : {},
           style: {
             ...F ? qe : {},
-            ...ye,
+            ...be,
             fontFamily: "Roboto, Helvetica, Arial, sans-serif"
           },
           ...he(),
           onKeyDown: De,
-          className: p("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", ae?.className),
+          className: p("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg 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?.className),
           children: ve
         })
       }),
       R && /* @__PURE__ */ n(Le, {
         ref: fe,
         id: M,
-        role: ue,
-        error: d,
+        role: de,
+        error: u,
         message: K,
         className: "m-0 mr-[14px] box-border items-center",
         style: pe

package/dist/components/inputs/select/StyledSelectItem.js

@@ -1,7 +1,7 @@
 import { cn as l } from "../../../helpers/cn.js";
 import { CheckIcon as n } from "../../icons/check-icon/CheckIcon.js";
 import { jsx as a, jsxs as s } from "react/jsx-runtime";
-var p = ({ children: r, selected: e, disabled: t, className: o, onClick: i }) => /* @__PURE__ */ s("li", {
+var x = ({ children: r, selected: e, disabled: t, className: o, onClick: i }) => /* @__PURE__ */ s("li", {
   role: "option",
   "aria-selected": e ? !0 : void 0,
   "aria-disabled": t ? !0 : void 0,
@@ -16,10 +16,10 @@ var p = ({ children: r, selected: e, disabled: t, className: o, onClick: i }) =>
       className: "text-gama-500"
     })
   }), /* @__PURE__ */ a("span", {
-    className: "min-w-0 flex-1 truncate",
+    className: "line-clamp-2 min-w-0 flex-1 break-words",
     children: r
   })]
 });
 export {
-  p as StyledSelectItem
+  x as StyledSelectItem
 };

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

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

package/package.json

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