asma-ui-core 3.86.1 → 3.86.2

package/dist/components/inputs/phone-field/CountryCodeSelect.js

@@ -1,143 +1,156 @@
-import { cn as m } from "../../../helpers/cn.js";
-import { ChevronDownIcon as E } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { useMobileMediaQuery as Q } from "../../../hooks/useMediaQuery.hook.js";
-import { StyledDialog as q } from "../../feedback/dialog/StyledDialog.js";
-import { StyledPopover as A } from "../../utils/popover/StyledPopover.js";
-import { notchedOutlineClass as F } from "../field-styles.js";
+import { cn as f } from "../../../helpers/cn.js";
+import { ChevronDownIcon as $ } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { useMobileMediaQuery as j } from "../../../hooks/useMediaQuery.hook.js";
+import { StyledDialog as z } from "../../feedback/dialog/StyledDialog.js";
+import { StyledPopover as Q } from "../../utils/popover/StyledPopover.js";
+import { notchedOutlineClass as U } from "../field-styles.js";
 import { StyledSearchField as W } from "../search-field/StyledSearchField.js";
-import { CountryCodeOptions as B } from "./CountryCodeOptions.js";
+import { CountryCodeOptions as q } from "./CountryCodeOptions.js";
 import { useCountryPicker as G } from "./useCountryPicker.js";
-import { useEffect as K, useId as H, useRef as h, useState as x } from "react";
-import { Fragment as J, jsx as e, jsxs as s } from "react/jsx-runtime";
-var re = ({ dataTest: r, countries: b, value: n, onChange: O, disabled: i, selectCountryLabel: g, searchPlaceholder: P, renderFlag: u, labelledBy: v, className: M }) => {
-  const [t, w] = x(!1), [f, c] = x(""), [R, j] = x(null), y = h(null), C = h(null), I = h(!1), d = Q(), p = `${H()}-country-listbox`, N = b.find((a) => a.iso2 === n), k = N === void 0 ? "" : `+${N.dialCode}`, l = () => {
-    w(!1), c("");
-  }, D = (a) => {
-    O(a), l();
-  }, o = G({
-    countries: b,
-    selectedIso2: n,
-    query: f,
-    listId: p,
-    onSelect: D,
-    onDismiss: l
+import { useEffect as K, useId as H, useRef as b, useState as m } from "react";
+import { Fragment as J, jsx as n, jsxs as i } from "react/jsx-runtime";
+var re = ({ dataTest: r, countries: g, value: s, onChange: A, disabled: c, selectCountryLabel: w, searchPlaceholder: E, renderFlag: h, labelledBy: F, className: O }) => {
+  const [t, d] = m(!1), [P, u] = m(!1), [x, a] = m(""), [B, M] = m(null), y = b(null), v = b(null), C = b(!1), p = j(), l = `${H()}-country-listbox`, I = g.find((o) => o.iso2 === s), k = I === void 0 ? "" : `+${I.dialCode}`, e = G({
+    countries: g,
+    selectedIso2: s,
+    query: x,
+    listId: l,
+    onSelect: (o, R = !0) => {
+      A(o), R && (d(!1), a(""));
+    },
+    onDismiss: () => {
+      d(!1), a("");
+    }
   });
   K(() => {
-    t && !d && y.current?.focus();
-  }, [t, d]), K(() => {
-    I.current && !t && C.current?.focus(), I.current = t;
+    t && !p && y.current?.focus();
+  }, [t, p]), K(() => {
+    C.current && !t && v.current?.focus(), C.current = t;
   }, [t]);
-  const S = /* @__PURE__ */ e(B, {
+  const N = /* @__PURE__ */ n(q, {
     dataTest: r,
-    visible: o.visible,
-    selectedIso2: n,
-    activeIndex: o.activeIndex,
-    optionId: o.optionId,
-    onSelect: D,
-    listId: p,
-    label: g,
-    renderFlag: u
-  }), $ = {
+    visible: e.visible,
+    selectedIso2: s,
+    activeIndex: e.activeIndex,
+    optionId: e.optionId,
+    onSelect: e.select,
+    listId: l,
+    label: w,
+    renderFlag: h
+  }), D = {
     role: "combobox",
-    "aria-activedescendant": o.visible.length > 0 ? o.optionId(o.activeIndex) : void 0,
+    "aria-activedescendant": e.activeIndex === null ? void 0 : e.optionId(e.activeIndex),
     "aria-autocomplete": "list",
-    "aria-controls": p,
+    "aria-controls": l,
     "aria-expanded": !0
-  }, z = t && !d;
-  return /* @__PURE__ */ s(J, { children: [/* @__PURE__ */ s("div", {
-    ref: j,
+  }, S = t && !p;
+  return /* @__PURE__ */ i(J, { children: [/* @__PURE__ */ i("div", {
+    ref: M,
     "data-testid": `${r}-shell`,
     style: { height: 40 },
-    className: m("group relative flex w-32 shrink-0 items-center gap-1.5 rounded px-3 text-base", i ? "cursor-not-allowed text-delta-300" : "text-delta-800"),
-    children: [/* @__PURE__ */ e("span", {
+    className: f("group relative flex w-32 shrink-0 items-center gap-1.5 rounded px-3 text-base", c ? "cursor-not-allowed text-delta-300" : "text-delta-800"),
+    children: [/* @__PURE__ */ n("span", {
       "aria-hidden": "true",
-      className: m(F({
-        disabled: i,
+      className: f(U({
+        focused: P || S,
+        disabled: c,
         notched: !1
-      }), M)
-    }), z ? /* @__PURE__ */ s("span", {
+      }), O)
+    }), S ? /* @__PURE__ */ i("span", {
       className: "relative z-[1] flex w-full items-center gap-1.5",
       children: [
-        u?.(n, "eager"),
-        /* @__PURE__ */ e("input", {
+        h?.(s, "eager"),
+        /* @__PURE__ */ n("input", {
           ref: y,
           role: "combobox",
           "data-testid": `${r}-search`,
           className: "w-12 min-w-0 border-0 bg-transparent p-0 text-base outline-none",
-          value: f,
+          value: x,
           placeholder: k,
-          onChange: (a) => c(a.target.value),
-          onKeyDown: o.handleKeyDown,
-          "aria-controls": p,
+          onChange: (o) => a(o.target.value),
+          onKeyDown: e.handleKeyDown,
+          "aria-controls": l,
           "aria-expanded": !0,
-          "aria-activedescendant": $["aria-activedescendant"],
-          "aria-autocomplete": "list"
+          "aria-activedescendant": D["aria-activedescendant"],
+          "aria-autocomplete": "list",
+          "aria-haspopup": "listbox",
+          onFocus: () => u(!0),
+          onBlur: () => u(!1)
         }),
-        /* @__PURE__ */ e("button", {
+        /* @__PURE__ */ n("button", {
           type: "button",
           "data-testid": `${r}-collapse`,
-          "aria-labelledby": v,
+          tabIndex: -1,
+          "aria-hidden": "true",
           "aria-expanded": !0,
-          onClick: l,
-          className: "ml-auto flex shrink-0 cursor-pointer border-0 bg-transparent p-0",
-          children: /* @__PURE__ */ e(E, {
+          onClick: e.dismiss,
+          className: "ml-auto flex shrink-0 cursor-pointer border-0 bg-transparent p-0 outline-none focus:shadow-none focus:outline-none focus:ring-0",
+          children: /* @__PURE__ */ n($, {
             width: 20,
             height: 20,
             className: "flip-180"
           })
         })
       ]
-    }) : /* @__PURE__ */ s("button", {
-      ref: C,
+    }) : /* @__PURE__ */ i("button", {
+      ref: v,
       type: "button",
       "data-testid": r,
-      disabled: i,
+      disabled: c,
       "aria-haspopup": "listbox",
       "aria-expanded": t,
-      "aria-labelledby": v,
-      onClick: () => w(!0),
-      className: m("relative z-[1] flex w-full items-center gap-1.5 border-0 bg-transparent p-0 text-base", i ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-800"),
+      "aria-controls": t ? l : void 0,
+      "aria-labelledby": F,
+      role: "combobox",
+      onClick: () => d(!0),
+      onKeyDown: (o) => {
+        o.key !== "ArrowDown" && o.key !== "ArrowUp" || (o.preventDefault(), e.openWithKeyboard(o.key === "ArrowUp" ? -1 : 1), d(!0));
+      },
+      onFocus: () => u(!0),
+      onBlur: () => u(!1),
+      className: f("relative z-[1] flex w-full items-center gap-1.5 border-0 bg-transparent p-0 text-base outline-none focus:shadow-none focus:outline-none focus:ring-0", c ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-800"),
       children: [
-        u?.(n, "eager"),
-        /* @__PURE__ */ e("span", {
+        h?.(s, "eager"),
+        /* @__PURE__ */ n("span", {
           className: "w-12 text-left",
           children: k
         }),
-        /* @__PURE__ */ e(E, {
+        /* @__PURE__ */ n($, {
           width: 20,
           height: 20,
-          className: m("ml-auto shrink-0 transition-transform", t && "flip-180")
+          className: f("ml-auto shrink-0 transition-transform", t && "flip-180")
         })
       ]
     })]
-  }), d ? /* @__PURE__ */ e(q, {
+  }), p ? /* @__PURE__ */ n(z, {
     open: t,
-    onClose: l,
+    onClose: e.dismiss,
     dataTest: `${r}-dialog`,
-    dialogTitle: g,
+    dialogTitle: w,
     showCloseIcon: !0,
     fullWidth: !0,
-    children: /* @__PURE__ */ s("div", {
+    children: /* @__PURE__ */ i("div", {
       className: "flex min-h-0 flex-1 flex-col",
-      children: [/* @__PURE__ */ e("div", {
+      children: [/* @__PURE__ */ n("div", {
         className: "shrink-0 p-4",
-        children: /* @__PURE__ */ e(W, {
+        children: /* @__PURE__ */ n(W, {
           dataTest: `${r}-search`,
-          label: P,
-          value: f,
-          onChange: (a) => c(a.target.value),
-          onClear: () => c(""),
-          onKeyDown: o.handleKeyDown,
-          slotProps: { htmlInput: $ }
+          label: E,
+          value: x,
+          onChange: (o) => a(o.target.value),
+          onClear: () => a(""),
+          onKeyDown: e.handleKeyDown,
+          slotProps: { htmlInput: D }
         })
-      }), S]
+      }), N]
     })
-  }) : /* @__PURE__ */ e(A, {
+  }) : /* @__PURE__ */ n(Q, {
     open: t,
-    anchorEl: R,
-    onClose: l,
+    anchorEl: B,
+    onClose: e.dismiss,
+    tabIntoContent: !1,
     slotProps: { paper: { className: "flex max-h-80 w-80 flex-col overflow-hidden" } },
-    children: S
+    children: N
   })] });
 };
 export {

package/dist/components/inputs/phone-field/useCountryPicker.js

@@ -1,48 +1,68 @@
-import { useMemo as m, useState as v } from "react";
-function D(r, i) {
-  const n = i.trim();
-  if (n.length === 0) return !0;
-  const s = n.replace(/^\+/, "").replace(/\D/g, "");
-  return s.length === 0 && !new RegExp("\\p{L}", "u").test(n) || r.name.toLocaleLowerCase().includes(n.toLocaleLowerCase()) ? !0 : s.length > 0 && r.dialCode.startsWith(s);
+import { useMemo as m, useState as D } from "react";
+function w(a, c) {
+  const o = c.trim();
+  if (o.length === 0) return !0;
+  const r = o.replace(/^\+/, "").replace(/\D/g, "");
+  return r.length === 0 && !new RegExp("\\p{L}", "u").test(o) || a.name.toLocaleLowerCase().includes(o.toLocaleLowerCase()) ? !0 : r.length > 0 && a.dialCode.startsWith(r);
 }
-function b({ countries: r, selectedIso2: i, query: n, listId: s, onSelect: f, onDismiss: d }) {
-  const [p, a] = v(i), o = m(() => r.filter((e) => D(e, n)), [r, n]), l = o.findIndex((e) => e.iso2 === p), c = l >= 0 ? l : 0, h = (e) => `${s}-option-${e}`, u = (e) => {
-    if (o.length === 0) return;
-    const t = o[(c + e + o.length) % o.length];
-    t !== void 0 && a(t.iso2);
+function C({ countries: a, selectedIso2: c, query: o, listId: r, onSelect: v, onDismiss: b }) {
+  const [p, s] = D(null), n = m(() => a.filter((e) => w(e, o)), [a, o]), i = p === null || n.length === 0 ? null : Math.max(n.findIndex((e) => e.iso2 === p), 0), k = (e) => `${r}-option-${e}`, g = (e) => {
+    const t = e === 1 ? n[0] : n[n.length - 1], l = n.find((d) => d.iso2 === c) ?? t;
+    l !== void 0 && s(l.iso2);
+  }, h = (e) => {
+    if (n.length === 0) return;
+    const t = n.findIndex((d) => d.iso2 === c), l = n[((i ?? (t >= 0 ? t : e === 1 ? -1 : 0)) + e + n.length) % n.length];
+    l !== void 0 && s(l.iso2);
+  }, u = (e, t = !0) => {
+    t && s(null), v(e, t);
+  }, f = () => {
+    s(null), b();
   };
   return {
-    visible: o,
-    activeIndex: c,
-    optionId: h,
+    visible: n,
+    activeIndex: i,
+    optionId: k,
+    openWithKeyboard: g,
+    select: u,
+    dismiss: f,
     handleKeyDown: (e) => {
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), u(1);
+          e.preventDefault(), h(1);
           break;
         case "ArrowUp":
-          e.preventDefault(), u(-1);
+          e.preventDefault(), h(-1);
           break;
         case "Home": {
           e.preventDefault();
-          const t = o[0];
-          t !== void 0 && a(t.iso2);
+          const t = n[0];
+          t !== void 0 && s(t.iso2);
           break;
         }
         case "End": {
           e.preventDefault();
-          const t = o[o.length - 1];
-          t !== void 0 && a(t.iso2);
+          const t = n[n.length - 1];
+          t !== void 0 && s(t.iso2);
+          break;
+        }
+        case " ": {
+          if (o !== "") break;
+          e.preventDefault();
+          const t = i === null ? void 0 : n[i];
+          t !== void 0 && u(t.iso2, !1);
           break;
         }
         case "Enter": {
           e.preventDefault();
-          const t = o[c];
-          t !== void 0 && f(t.iso2);
+          const t = i === null ? void 0 : n[i];
+          t !== void 0 && u(t.iso2);
           break;
         }
         case "Escape":
-          e.preventDefault(), d();
+          e.preventDefault(), f();
+          break;
+        case "Tab":
+          f();
           break;
         default:
           break;
@@ -51,5 +71,5 @@ function b({ countries: r, selectedIso2: i, query: n, listId: s, onSelect: f, on
   };
 }
 export {
-  b as useCountryPicker
+  C as useCountryPicker
 };

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

@@ -8,11 +8,11 @@ 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 { Children as se, cloneElement as Ze, isValidElement as f, 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: he, onBlur: ye, labelId: v }) => {
-  const d = Xe(), A = `${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: ve, rowStyle: Ae } = 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 : `${A}-option-${m}`, P = tt(null), h = (e) => {
+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: d, renderValue: V, fullWidth: ue, className: fe, style: pe, sx: me, variant: be, children: q, MenuProps: ge, onFocus: he, onBlur: ye, labelId: v }) => {
+  const u = Xe(), A = `${T}-listbox`, R = be === "standard", p = le ?? u?.error ?? !1, n = de ?? u?.disabled ?? !1, Y = p ? ie ?? j : j, { show: F, role: xe } = Je("StyledSelect", p, Y, ae, c), z = et(), { fieldRef: we, rowRef: ve, rowStyle: Ae } = 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) => d ? Array.isArray(o) && o.includes(e) : e === o, s = g.flatMap((e, t) => f(e) && !e.props.disabled ? [t] : []), E = g.findIndex((e) => f(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 : `${A}-option-${m}`, P = tt(null), h = (e) => {
     K(e), e || b(null);
   }, { refs: { domReference: De, reference: J, setFloating: Se, setReference: Ce }, floatingStyles: Fe, context: N } = dt({
     open: r,
@@ -33,15 +33,15 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
     ct(N),
     pt(N, { role: "listbox" })
   ]), [Q, X] = x(), _ = ze(Q), Ee = ft([Ke(Se, _), P]);
-  B(() => d?.setFocused(r || k), [
+  B(() => u?.setFocused(r || k), [
     r,
     k,
-    d
-  ]), B(() => d?.setFilled(i || !!S || !!C), [
+    u
+  ]), B(() => u?.setFilled(i || !!S || !!C), [
     i,
     S,
     C,
-    d
+    u
   ]), B(() => {
     if (!r) return;
     const e = requestAnimationFrame(() => {
@@ -50,20 +50,20 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
     });
     return () => cancelAnimationFrame(e);
   }, [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;
+  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,
       name: w
     } }, t), a && (h(!1), requestAnimationFrame(() => De.current?.focus()));
   }, ee = () => {
-    const e = f ? [] : "";
+    const e = d ? [] : "";
     O || W(e), $?.({ target: {
       value: e,
       name: w
     } }, null), h(!1), I(!1);
   }, Pe = se.map(q, (e, t) => {
-    if (!u(e)) return e;
+    if (!f(e)) return e;
     const a = e.props.value;
     return Ze(e, {
       id: `${A}-option-${t}`,
@@ -73,7 +73,7 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
         b(null), Z(a, e.props.children);
       }
     });
-  }), 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) => {
+  }), Ne = g.find((e) => f(e) && e.props.value === o), _e = V ? V(o) : d && Array.isArray(o) ? g.filter((e) => f(e) && o.includes(e.props.value)).map((e) => {
     const t = e.props.children;
     return typeof t == "string" || typeof t == "number" ? String(t) : "";
   }).join(", ") : Ne?.props.children, He = (e) => {
@@ -83,7 +83,7 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
     });
   }, te = (e) => {
     const t = m === null ? void 0 : g[m];
-    !u(t) || t.props.disabled || Z(t.props.value, t.props.children, e);
+    !f(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) => {
@@ -119,7 +119,7 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-expanded": r,
-        "aria-controls": A,
+        "aria-controls": r ? A : void 0,
         "aria-activedescendant": r ? D : void 0,
         "aria-labelledby": v,
         "aria-label": v ? void 0 : w,
@@ -175,6 +175,7 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
           ...Oe(),
           id: A,
           role: "listbox",
+          "aria-multiselectable": d ? !0 : void 0,
           "aria-labelledby": v,
           "aria-label": v ? void 0 : w,
           ..._ ? qe : {},

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

@@ -1,17 +1,17 @@
 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", {
+var f = ({ id: r, children: o, selected: t, active: l, disabled: a, className: n, onClick: i }) => /* @__PURE__ */ m("li", {
   id: r,
   role: "option",
-  "aria-selected": t ? !0 : void 0,
+  "aria-selected": !!t,
   "aria-disabled": a ? !0 : void 0,
   tabIndex: -1,
   onMouseDown: (s) => s.preventDefault(),
-  onClick: a ? void 0 : l,
+  onClick: a ? void 0 : i,
   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", {
+    l && /* @__PURE__ */ e("span", {
       "aria-hidden": "true",
       "data-select-active-indicator": !0,
       className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"