asma-ui-core 3.78.12 → 3.79.0

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

@@ -1,192 +1,204 @@
-import { cn as p } from "../../../helpers/cn.js";
-import { resolveSx as Ee } from "../../../helpers/sx.js";
-import { ChevronDownIcon as Ne } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as Pe } from "../../icons/close-icon/CloseIcon.js";
-import { TOP_LAYER_PROPS as _e, TOP_LAYER_RESET_STYLE as qe, getOpenModalDialogAncestor as Be, shouldUsePopoverTopLayer as He, useTopLayerRef as Ie } from "../../../hooks/useTopLayer.hook.js";
-import { HelperRow as Le } from "../../../helpers/HelperRow.js";
-import { useHelperRowBudget as Te } from "../../../helpers/useHelperRowBudget.js";
-import { useHelperSlot as Ue } from "../../../helpers/useHelperSlot.js";
-import { outlineClass as Ve } from "../field-styles.js";
-import { useFormControlContext as je } from "../../miscellaneous/FormControlContext.js";
-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: 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: be, context: D } = Ze({
-    open: o,
-    onOpenChange: ge,
+import { cn as h } from "../../../helpers/cn.js";
+import { resolveSx as je } from "../../../helpers/sx.js";
+import { ChevronDownIcon as Ue } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as Ve } from "../../icons/close-icon/CloseIcon.js";
+import { TOP_LAYER_PROPS as qe, TOP_LAYER_RESET_STYLE as Ye, getOpenModalDialogAncestor as re, shouldUsePopoverTopLayer as ze, useTopLayerRef as Ke } from "../../../hooks/useTopLayer.hook.js";
+import { HelperRow as We } from "../../../helpers/HelperRow.js";
+import { useHelperRowBudget as Ge } from "../../../helpers/useHelperRowBudget.js";
+import { useHelperSlot as Je } from "../../../helpers/useHelperSlot.js";
+import { outlineClass as Qe } from "../field-styles.js";
+import { useFormControlContext as Xe } from "../../miscellaneous/FormControlContext.js";
+import { Children as se, cloneElement as Ze, isValidElement as u, useEffect as B, useId as et, useRef as tt, useState as x } from "react";
+import { jsx as l, jsxs as L } from "react/jsx-runtime";
+import { FloatingPortal as ot, autoUpdate as rt, flip as st, offset as nt, shift as lt, size as it, useClick as at, useDismiss as ct, useFloating as dt, useInteractions as ut, useMergeRefs as ft, useRole as pt } from "@floating-ui/react";
+var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, errorText: ie, helperText: j, reserveHelperText: ae, expandHelperText: ce = !0, allowClear: U, disabled: de, readOnly: c, name: w, placeholder: S, displayEmpty: C, multiple: f, renderValue: V, fullWidth: ue, className: fe, style: pe, sx: me, variant: be, children: q, MenuProps: ge, onFocus: ye, onBlur: he, labelId: A }) => {
+  const d = Xe(), v = `${T}-listbox`, R = be === "standard", p = le ?? d?.error ?? !1, n = de ?? d?.disabled ?? !1, Y = p ? ie ?? j : j, { show: F, role: xe } = Je("StyledSelect", p, Y, ae, c), z = et(), { fieldRef: we, rowRef: Ae, rowStyle: ve } = Ge(ce && F), [r, K] = x(!1), [k, I] = x(!1), [m, b] = x(null), [Re, W] = x(ne), O = M !== void 0, o = O ? M : Re, i = Array.isArray(o) ? o.length > 0 : o !== void 0 && o !== "" && o !== null, g = se.toArray(q), G = (e) => f ? Array.isArray(o) && o.includes(e) : e === o, s = g.flatMap((e, t) => u(e) && !e.props.disabled ? [t] : []), E = g.findIndex((e) => u(e) && G(e.props.value)), ke = (e = 1) => s.includes(E) ? E : s[e === 1 ? 0 : s.length - 1] ?? null, D = m === null ? void 0 : `${v}-option-${m}`, P = tt(null), y = (e) => {
+    K(e), e || b(null);
+  }, { refs: { domReference: De, reference: J, setFloating: Se, setReference: Ce }, floatingStyles: Fe, context: N } = dt({
+    open: r,
+    onOpenChange: y,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: Oe,
+    whileElementsMounted: rt,
     middleware: [
-      $e(0),
-      We({ padding: 8 }),
-      Ge({ padding: 8 }),
-      Je({ apply({ rects: e, elements: t }) {
+      nt(0),
+      st({ padding: 8 }),
+      lt({ padding: 8 }),
+      it({ apply({ rects: e, elements: t }) {
         t.floating.style.minWidth = `${e.reference.width + 20}px`;
       } })
     ]
-  }), { getReferenceProps: ye, getFloatingProps: he } = et([
-    Qe(D, { enabled: !s && !i }),
-    Xe(D),
-    tt(D, { role: "listbox" })
-  ]), xe = G([f.setReference, z]), O = Ye(() => o ? Be(f.reference.current) : void 0, [o, f]), F = He(O), we = G([Ie(f.setFloating, F), a]);
-  _(() => c?.setFocused(o || h), [
-    o,
-    h,
-    c
-  ]), _(() => c?.setFilled(l || !!w || !!A), [
-    l,
-    w,
-    A,
-    c
-  ]), _(() => {
-    if (!o) return;
+  }), { getReferenceProps: Ie, getFloatingProps: Oe } = ut([
+    at(N, { enabled: !n && !c }),
+    ct(N),
+    pt(N, { role: "listbox" })
+  ]), [Q, X] = x(), _ = ze(Q), Ee = ft([Ke(Se, _), P]);
+  B(() => d?.setFocused(r || k), [
+    r,
+    k,
+    d
+  ]), B(() => d?.setFilled(i || !!S || !!C), [
+    i,
+    S,
+    C,
+    d
+  ]), B(() => {
+    if (!r) return;
     const e = requestAnimationFrame(() => {
-      const t = a.current?.querySelector('[role="option"][aria-selected="true"]');
-      t && (t.scrollIntoView({ block: "nearest" }), t.focus());
+      const t = D ? document.getElementById(D) : P.current?.querySelector('[role="option"][aria-selected="true"]');
+      t && P.current?.contains(t) && t.scrollIntoView({ block: "nearest" });
     });
     return () => cancelAnimationFrame(e);
-  }, [o]);
-  const Ae = (e, t) => {
-    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), d || (y(!1), requestAnimationFrame(() => f.domReference.current?.focus()));
-  }, W = () => {
-    const e = d ? [] : "";
-    k || Y(e), L?.({ target: {
+  }, [D, r]);
+  const Z = (e, t, a = !f) => {
+    const oe = f ? Array.isArray(o) && o.includes(e) ? o.filter(($e) => $e !== e) : [...Array.isArray(o) ? o : [], e] : e;
+    O || W(oe), $?.({ target: {
+      value: oe,
+      name: w
+    } }, t), a && (y(!1), requestAnimationFrame(() => De.current?.focus()));
+  }, ee = () => {
+    const e = f ? [] : "";
+    O || W(e), $?.({ target: {
       value: e,
-      name: m
-    } }, null), y(!1), S(!1);
-  }, ve = N.map(v, (e) => {
-    if (!P(e)) return e;
-    const t = e.props.value;
-    return Ke(e, {
-      selected: d ? Array.isArray(r) && r.includes(t) : t === r,
-      onClick: () => Ae(t, e.props.children)
+      name: w
+    } }, null), y(!1), I(!1);
+  }, Pe = se.map(q, (e, t) => {
+    if (!u(e)) return e;
+    const a = e.props.value;
+    return Ze(e, {
+      id: `${v}-option-${t}`,
+      active: t === m,
+      selected: G(a),
+      onClick: () => {
+        b(null), Z(a, e.props.children);
+      }
     });
-  }), 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) => {
+  }), Ne = g.find((e) => u(e) && e.props.value === o), _e = V ? V(o) : f && Array.isArray(o) ? g.filter((e) => u(e) && o.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) => {
-    if ((e.key === "Backspace" || e.key === "Delete") && U && l && !s && !i) {
-      e.preventDefault(), W();
+  }).join(", ") : Ne?.props.children, He = (e) => {
+    s.length !== 0 && b((t) => {
+      const a = s.indexOf(t ?? E ?? -1);
+      return a === -1 ? s[e === 1 ? 0 : s.length - 1] ?? null : s[Math.min(Math.max(a + e, 0), s.length - 1)] ?? null;
+    });
+  }, te = (e) => {
+    const t = m === null ? void 0 : g[m];
+    !u(t) || t.props.disabled || Z(t.props.value, t.props.children, e);
+  }, Be = (e = 1) => {
+    X(re(J.current)), b(ke(e)), K(!0);
+  }, Le = (e) => {
+    if ((e.key === "Backspace" || e.key === "Delete") && U && i && !n && !c) {
+      e.preventDefault(), ee();
       return;
     }
-    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();
-    }));
-  }, De = (e) => {
-    const t = a.current ? Array.from(a.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
-    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 = 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: ue,
-    className: p("group relative inline-flex flex-col", re && "w-full", oe),
+    if (!(n || c)) {
+      if (!r && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+        e.preventDefault(), Be(e.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      r && (e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), He(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), b(s[e.key === "Home" ? 0 : s.length - 1] ?? null)) : e.key === " " ? (e.preventDefault(), te(!1)) : e.key === "Enter" ? (e.preventDefault(), te(!0)) : e.key === "Escape" ? (e.preventDefault(), y(!1)) : e.key === "Tab" && y(!1));
+    }
+  }, H = R && (r || k), Te = n ? "text-delta-300" : H ? "text-gama-500" : "text-delta-800", Me = n ? "text-delta-300" : "text-delta-700";
+  return /* @__PURE__ */ L("div", {
+    ref: we,
+    className: h("group relative inline-flex flex-col", ue && "w-full", fe),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-      ...Ee(ne),
-      ...se
+      ...je(me),
+      ...pe
     },
     children: [
-      /* @__PURE__ */ B("button", {
-        ref: xe,
+      /* @__PURE__ */ L("button", {
+        ref: Ce,
         type: "button",
-        "data-testid": H,
-        ...ye({ onKeyDown: ke }),
+        "data-testid": T,
+        ...Ie({
+          onClick: () => X(re(J.current)),
+          onKeyDown: Le
+        }),
         role: "combobox",
         "aria-haspopup": "listbox",
-        "aria-expanded": o,
-        "aria-controls": j,
-        "aria-labelledby": g,
-        "aria-label": g ? void 0 : m,
-        "aria-invalid": u ? !0 : void 0,
-        "aria-describedby": R ? M : void 0,
-        "aria-disabled": s ? !0 : void 0,
-        disabled: s,
+        "aria-expanded": r,
+        "aria-controls": v,
+        "aria-activedescendant": r ? D : void 0,
+        "aria-labelledby": A,
+        "aria-label": A ? void 0 : w,
+        "aria-invalid": p ? !0 : void 0,
+        "aria-describedby": F ? z : void 0,
+        "aria-disabled": n ? !0 : void 0,
+        disabled: n,
         onFocus: (e) => {
-          S(!0), ie?.(e);
+          I(!0), ye?.(e);
         },
         onBlur: (e) => {
-          S(!1), ce?.(e);
+          I(!1), he?.(e);
         },
-        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"),
+        style: { minWidth: i && !R ? 105 : void 0 },
+        className: h("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", H ? "bg-gama-50" : "bg-transparent", Te, R && "min-w-0", n && "cursor-not-allowed", c && "pointer-events-none"),
         children: [
-          /* @__PURE__ */ n("span", {
-            className: p("min-w-0 flex-1 truncate", !l && "text-delta-500"),
-            children: l || A ? Se : w
+          /* @__PURE__ */ l("span", {
+            className: h("min-w-0 flex-1 truncate", !i && "text-delta-500"),
+            children: i || C ? _e : S
           }),
-          /* @__PURE__ */ B("span", {
+          /* @__PURE__ */ L("span", {
             className: "flex items-center gap-1",
-            children: [U && l && !s && /* @__PURE__ */ n("span", {
+            children: [U && i && !n && /* @__PURE__ */ l("span", {
               "aria-hidden": "true",
               "data-testid": "select-clear-button",
               className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
               onClick: (e) => {
-                e.stopPropagation(), W();
+                e.stopPropagation(), ee();
               },
-              children: /* @__PURE__ */ n(Pe, {
+              children: /* @__PURE__ */ l(Ve, {
                 width: 18,
                 height: 18
               })
-            }), /* @__PURE__ */ n(Ne, {
+            }), /* @__PURE__ */ l(Ue, {
               width: 24,
               height: 24,
-              className: p("shrink-0 transition-transform", C ? "text-gama-500" : Ce, o && "rotate-180")
+              className: h("shrink-0 transition-transform", H ? "text-gama-500" : Me, r && "rotate-180")
             })]
           }),
-          /* @__PURE__ */ n("div", { className: Ve({
-            focused: o || h,
-            error: u,
-            disabled: s,
-            readOnly: i,
-            borderless: b
+          /* @__PURE__ */ l("div", { className: Qe({
+            focused: r || k,
+            error: p,
+            disabled: n,
+            readOnly: c,
+            borderless: R
           }) })
         ]
       }),
-      o && /* @__PURE__ */ n(ze, {
-        root: O,
-        children: /* @__PURE__ */ n("ul", {
-          ref: we,
-          id: j,
+      r && /* @__PURE__ */ l(ot, {
+        root: Q,
+        children: /* @__PURE__ */ l("ul", {
+          ref: Ee,
+          ...Oe(),
+          id: v,
           role: "listbox",
-          "aria-labelledby": g,
-          "aria-label": g ? void 0 : m,
-          ...F ? _e : {},
+          "aria-labelledby": A,
+          "aria-label": A ? void 0 : w,
+          ..._ ? qe : {},
           style: {
-            ...F ? qe : {},
-            ...be,
+            ..._ ? Ye : {},
+            ...Fe,
             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-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
+          className: h("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", ge?.className),
+          children: Pe
         })
       }),
-      R && /* @__PURE__ */ n(Le, {
-        ref: fe,
-        id: M,
-        role: de,
-        error: u,
-        message: K,
+      F && /* @__PURE__ */ l(We, {
+        ref: Ae,
+        id: z,
+        role: xe,
+        error: p,
+        message: Y,
         className: "m-0 mr-[14px] box-border items-center",
-        style: pe
+        style: ve
       })
     ]
   });
 };
 export {
-  gt as StyledSelect
+  Ct as StyledSelect
 };

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

@@ -1,25 +1,35 @@
-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 x = ({ children: r, selected: e, disabled: t, className: o, onClick: i }) => /* @__PURE__ */ s("li", {
+import { cn as c } from "../../../helpers/cn.js";
+import { CheckIcon as d } from "../../icons/check-icon/CheckIcon.js";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+var f = ({ id: r, children: o, selected: t, active: i, disabled: a, className: n, onClick: l }) => /* @__PURE__ */ m("li", {
+  id: r,
   role: "option",
-  "aria-selected": e ? !0 : void 0,
-  "aria-disabled": t ? !0 : void 0,
+  "aria-selected": t ? !0 : void 0,
+  "aria-disabled": a ? !0 : void 0,
   tabIndex: -1,
-  onClick: t ? void 0 : i,
-  className: l("flex items-center gap-1 px-2 py-2.5 text-base outline-none", t ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-800 hover:bg-delta-50", e && "bg-gama-50", o),
-  children: [/* @__PURE__ */ a("span", {
-    className: "flex w-6 justify-center",
-    children: e && /* @__PURE__ */ a(n, {
-      width: 22,
-      height: 22,
-      className: "text-gama-500"
+  onMouseDown: (s) => s.preventDefault(),
+  onClick: a ? void 0 : l,
+  className: c("relative flex items-center gap-1 px-2 py-2.5 text-base outline-none", a ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-800 hover:bg-delta-50", t && "bg-gama-50", n),
+  children: [
+    i && /* @__PURE__ */ e("span", {
+      "aria-hidden": "true",
+      "data-select-active-indicator": !0,
+      className: "pointer-events-none absolute inset-y-0 left-0 border-l border-solid border-focus-ring"
+    }),
+    /* @__PURE__ */ e("span", {
+      className: "flex w-6 justify-center",
+      children: t && /* @__PURE__ */ e(d, {
+        width: 22,
+        height: 22,
+        className: "text-gama-500"
+      })
+    }),
+    /* @__PURE__ */ e("span", {
+      className: "line-clamp-2 min-w-0 flex-1 break-words",
+      children: o
     })
-  }), /* @__PURE__ */ a("span", {
-    className: "line-clamp-2 min-w-0 flex-1 break-words",
-    children: r
-  })]
+  ]
 });
 export {
-  x as StyledSelectItem
+  f as StyledSelectItem
 };