asma-ui-core 3.47.0 → 3.47.1

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

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

package/package.json

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