asma-ui-core 3.50.1 → 3.51.0

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

@@ -1,24 +1,24 @@
 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 Ye } from "../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as Oe } from "../../data-display/chip/StyledChip.js";
+import { ChevronDownIcon as He } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as Te } from "../../icons/close-icon/CloseIcon.js";
+import { CheckIcon as Ye } from "../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as Oe } from "../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as Be } 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 { TOP_LAYER_PROPS as qe, TOP_LAYER_RESET_STYLE as Ge, getOpenModalDialogAncestor as Je, useTopLayerRef as Qe } from "../../../hooks/useTopLayer.hook.js";
+import { LoadingIcon as Xe } 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 { useEffect as Ze, 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 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?.());
+import { FloatingPortal as Ke, autoUpdate as et, flip as tt, offset as rt, shift as lt, size as st, useDismiss as ot, useFloating as at, useInteractions as nt, useMergeRefs as Q, useRole as ct } from "@floating-ui/react";
+var it = (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 Rt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, getOptionLabel: K, getOptionKey: R, isOptionEqualToValue: _, renderOption: E, renderValue: j, filterOptions: k, loading: z, loadingText: ee = "Loading…", noOptionsText: te = "No options", disabled: D, 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 ?? it, C = (e, t) => _ ? _(e, t) : e === t, [be, xe] = w(!1), a = W ?? be, f = (e) => {
+    e && (m || D) || (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(() => {
+  }, [b, I] = w(null), ye = J([]), H = J(null), [ve, Ne] = w(null), [Re, De] = w(null), c = o ? Array.isArray(v) ? v : [] : [], g = o ? null : v ?? null, T = !o && g !== null ? n(g) : "";
+  Ze(() => {
     S !== void 0 || o || V(T);
   }, [
     S,
@@ -37,21 +37,21 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
     h,
     k,
     v
-  ]), i = L(() => O.slice(0, 100), [O]), { refs: P, floatingStyles: Se, context: B } = ot({
+  ]), i = L(() => O.slice(0, 100), [O]), { refs: P, floatingStyles: Se, context: B } = at({
     open: a,
     onOpenChange: f,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: Ke,
+    whileElementsMounted: et,
     middleware: [
-      tt(4),
-      et({ padding: 8 }),
-      rt({ padding: 8 }),
-      lt({ apply({ rects: e, availableHeight: t }) {
-        Ne(e.reference.width), Re(ae ? t - 8 : Math.min(t - 8, 320));
+      rt(4),
+      tt({ padding: 8 }),
+      lt({ padding: 8 }),
+      st({ apply({ rects: e, availableHeight: t }) {
+        Ne(e.reference.width), De(ae ? t - 8 : Math.min(t - 8, 320));
       } })
     ]
-  }), { 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) => {
+  }), { getReferenceProps: Ce, getFloatingProps: Ae, getItemProps: Pe } = nt([ot(B), ct(B, { role: "listbox" })]), $e = Q([P.setReference]), ke = Q([Qe(P.setFloating)]), Ie = L(() => a ? Je(P.reference.current) : void 0, [a, P]), 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 }), A(e, "", "reset"), se || f(!1);
@@ -73,17 +73,17 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
       const t = e.key === "ArrowDown" ? 1 : -1;
       I((r) => r == null ? t > 0 ? 0 : i.length - 1 : (r + t + i.length) % i.length);
     }
-  }, _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(Oe, {
+  }, _e = !le && !m && !D && (o ? c.length > 0 : g !== null), Ee = (e) => {
+    e.preventDefault(), !(D || m) && (H.current?.focus(), f(!a));
+  }, je = o ? j ? j(c, ({ index: e }) => ({ "data-index": e })) : c.map((e, t) => /* @__PURE__ */ s(Be, {
     dataTest: `selected-chip-${n(e)}`,
     label: n(e),
     readOnly: m,
     onDelete: m ? void 0 : (r) => M(r, e)
-  }, D ? D(e) : `${n(e)}-${t}`)) : void 0, ze = /* @__PURE__ */ y("span", {
+  }, R ? R(e) : `${n(e)}-${t}`)) : void 0, ze = /* @__PURE__ */ y("span", {
     className: "flex items-center gap-1",
     children: [
-      z && /* @__PURE__ */ s(Qe, {
+      z && /* @__PURE__ */ s(Xe, {
         width: 20,
         height: 20,
         className: "animate-spin"
@@ -96,7 +96,7 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         onMouseDown: (e) => {
           e.preventDefault(), Me(e);
         },
-        children: /* @__PURE__ */ s(He, {
+        children: /* @__PURE__ */ s(Te, {
           width: 20,
           height: 20,
           className: "text-delta-700"
@@ -109,11 +109,11 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         "data-testid": `${l}-popup-indicator`,
         className: "flex cursor-pointer items-center border-0 bg-transparent",
         onMouseDown: Ee,
-        children: oe ?? (o ? /* @__PURE__ */ s(Ye, {
+        children: oe ?? (o ? /* @__PURE__ */ s(Oe, {
           width: 24,
           height: 24,
           className: "text-delta-700"
-        }) : /* @__PURE__ */ s(Ve, {
+        }) : /* @__PURE__ */ s(He, {
           width: 24,
           height: 24,
           className: $(G["select-custom-icon"], "text-delta-700 transition-transform", a && "rotate-180")
@@ -121,7 +121,7 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
       })
     ]
   }), Fe = {
-    disabled: R,
+    disabled: D,
     size: re,
     fullWidth: !0,
     value: h,
@@ -147,11 +147,10 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         endAdornment: ze
       }
     }
-  }, We = (e, t, r) => {
+  }, We = $("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"), Ue = (e, t, r) => {
     const { key: d, ...u } = e;
     return /* @__PURE__ */ y("li", {
       ...u,
-      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,
@@ -160,7 +159,7 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         decorative: !0
       }) : /* @__PURE__ */ s("span", {
         className: "w-5",
-        children: r.selected && /* @__PURE__ */ s(Te, {
+        children: r.selected && /* @__PURE__ */ s(Ye, {
           width: 20,
           height: 20,
           className: "text-gama-500"
@@ -170,7 +169,7 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         children: n(t)
       })]
     }, d);
-  }, Ue = (e, t) => {
+  }, Ve = (e, t) => {
     const r = ge?.(e) ?? X(e), d = {
       ...Pe({
         onMouseDown: (x) => x.preventDefault(),
@@ -179,7 +178,7 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
         },
         onMouseMove: () => I(r ? null : t)
       }),
-      key: D ? String(D(e)) : `${n(e)}-${t}`,
+      key: R ? String(R(e)) : `${n(e)}-${t}`,
       ref: (x) => {
         ye.current[t] = x;
       },
@@ -187,26 +186,27 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
       id: `${l}-option-${t}`,
       "aria-selected": Y(e),
       "aria-disabled": r || void 0,
-      "data-active": b === t ? "" : void 0
+      "data-active": b === t ? "" : void 0,
+      className: We
     }, u = {
       selected: Y(e),
       index: t,
       inputValue: h
     };
-    return E ? E(d, e, u) : We(d, e, u);
+    return E ? E(d, e, u) : Ue(d, e, u);
   };
   return /* @__PURE__ */ y("div", {
     className: $(G.styledSelectAutocompleteWrapper, !ie && "w-auto", he, fe),
-    children: [Z(Fe), a && /* @__PURE__ */ s(Ze, {
+    children: [Z(Fe), a && /* @__PURE__ */ s(Ke, {
       root: Ie,
       children: /* @__PURE__ */ y("ul", {
         ref: ke,
-        ...Be,
+        ...qe,
         style: {
-          ...qe,
+          ...Ge,
           ...Se,
           width: ve ?? void 0,
-          maxHeight: De ?? void 0,
+          maxHeight: Re ?? void 0,
           fontFamily: "Roboto, Helvetica, Arial, sans-serif",
           ...U?.popper?.style
         },
@@ -238,11 +238,11 @@ function Nt({ dataTest: l, options: p, renderInput: Z, value: v, onChange: N, ge
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
           children: te
-        }) : i.map(Ue)]
+        }) : i.map(Ve)]
       })
     })]
   });
 }
 export {
-  Nt as StyledSelectAutocomplete
+  Rt as StyledSelectAutocomplete
 };

package/dist/hooks/useFocusTrap.hook.js

@@ -1,34 +1,34 @@
-import { useEffect as m } from "react";
-var l = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])', E = (o, s, c) => {
-  m(() => {
-    if (!o) return;
-    const t = s.current;
+import { useEffect as d } from "react";
+var m = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])', b = (c, u, a) => {
+  d(() => {
+    if (!c) return;
+    const t = u.current;
     if (!t) return;
-    const r = document.activeElement, d = requestAnimationFrame(() => {
-      (t.querySelector(l) ?? t).focus();
-    }), u = (e) => {
+    const r = document.activeElement, l = requestAnimationFrame(() => {
+      t.focus({ preventScroll: !0 });
+    }), i = (e) => {
       if (e.key === "Escape") {
-        c?.();
+        a?.();
         return;
       }
       if (e.key !== "Tab") return;
-      const n = Array.from(t.querySelectorAll(l));
+      const n = Array.from(t.querySelectorAll(m));
       if (n.length === 0) {
         e.preventDefault();
         return;
       }
-      const i = n[0], a = n[n.length - 1], f = document.activeElement;
-      e.shiftKey && f === i ? (e.preventDefault(), a?.focus()) : !e.shiftKey && f === a && (e.preventDefault(), i?.focus());
+      const s = n[0], f = n[n.length - 1], o = document.activeElement;
+      e.shiftKey && (o === s || o === t) ? (e.preventDefault(), f?.focus()) : (!e.shiftKey && o === f || !e.shiftKey && o === t) && (e.preventDefault(), s?.focus());
     };
-    return document.addEventListener("keydown", u), () => {
-      cancelAnimationFrame(d), document.removeEventListener("keydown", u), r && document.contains(r) && r.focus();
+    return document.addEventListener("keydown", i), () => {
+      cancelAnimationFrame(l), document.removeEventListener("keydown", i), r && document.contains(r) && r.focus();
     };
   }, [
-    o,
-    s,
-    c
+    c,
+    u,
+    a
   ]);
 };
 export {
-  E as useFocusTrap
+  b as useFocusTrap
 };

package/package.json

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