asma-ui-core 3.109.0 → 3.111.0

package/dist/components/inputs/search-field/StyledSearchField.js

@@ -2,44 +2,45 @@ import { cn as p } from "../../../helpers/cn.js";
 import { SearchIcon as u } from "../../icons/search-icon/SearchIcon.js";
 import { CloseIcon as f } from "../../icons/close-icon/CloseIcon.js";
 import { StyledInputField as v } from "../input-field/StyledInputField.js";
-import { useState as y } from "react";
+import { useState as x } from "react";
 import { jsx as t } from "react/jsx-runtime";
-var F = ({ value: r, onClear: d, label: i, onFocus: c, onBlur: h, slotProps: o, ...a }) => {
-  const [m, l] = y(!1), n = m || r, s = typeof i == "string" ? i : void 0;
+var F = ({ value: a, onClear: d, label: l, onFocus: c, onBlur: h, slotProps: n, ...r }) => {
+  const [m, i] = x(!1), o = m || a, s = typeof l == "string" ? l : void 0;
   return /* @__PURE__ */ t("div", {
     className: "relative w-full",
     children: /* @__PURE__ */ t(v, {
       size: "small",
       variant: "outlined",
-      value: r,
+      labelPlacement: "floating",
+      value: a,
       reserveHelperText: !1,
-      label: n ? i : void 0,
-      placeholder: n ? void 0 : s,
+      label: o ? l : void 0,
+      placeholder: o ? void 0 : s,
       onFocus: (e) => {
-        l(!0), c?.(e);
+        i(!0), c?.(e);
       },
       onBlur: (e) => {
-        l(!1), h?.(e);
+        i(!1), h?.(e);
       },
       slotProps: {
-        ...o,
+        ...n,
         htmlInput: {
-          "aria-label": n ? void 0 : s,
-          ...o?.htmlInput,
+          "aria-label": o ? void 0 : s,
+          ...n?.htmlInput,
           style: {
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
-            ...r ? { paddingRight: 40 } : {},
-            ...o?.htmlInput?.style
+            ...a ? { paddingRight: 40 } : {},
+            ...n?.htmlInput?.style
           }
         },
         input: {
-          endAdornment: r ? /* @__PURE__ */ t("button", {
+          endAdornment: a ? /* @__PURE__ */ t("button", {
             type: "button",
             "aria-label": "Clear",
             "data-testid": "styled-search-clear-icon",
-            className: p("asma-pressable", "cursor-pointer rounded-full border-0 bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", r ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0", a.readOnly && "-translate-x-[6.5px]"),
+            className: p("asma-pressable", "cursor-pointer rounded-full border-0 bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", a ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0", r.readOnly && "-translate-x-[6.5px]"),
             style: {
               width: 24,
               height: 24,
@@ -55,7 +56,7 @@ var F = ({ value: r, onClear: d, label: i, onFocus: c, onBlur: h, slotProps: o,
               className: "pointer-events-none"
             })
           }) : null,
-          startAdornment: n ? void 0 : /* @__PURE__ */ t("span", {
+          startAdornment: o ? void 0 : /* @__PURE__ */ t("span", {
             "data-testid": "styled-search-icon",
             className: "flex items-center",
             children: /* @__PURE__ */ t(u, {
@@ -65,13 +66,14 @@ var F = ({ value: r, onClear: d, label: i, onFocus: c, onBlur: h, slotProps: o,
               className: "pointer-events-none"
             })
           }),
-          ...o?.input
+          ...n?.input
         }
       },
-      ...a,
+      ...r,
       sx: {
-        width: a.fullWidth ? "100%" : "var(--dynamic-toolbar-search-width, 160px)",
-        ...a.sx
+        width: r.fullWidth ? "100%" : "var(--dynamic-toolbar-search-width, 160px)",
+        maxWidth: "none",
+        ...r.sx
       }
     })
   });

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

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