asma-ui-core 3.113.1 → 3.114.0

package/dist/components/inputs/dynamic-select/components/DynamicInteractiveChipGroup.js

@@ -1,110 +1,107 @@
 import { cn as v } from "../../../../helpers/cn.js";
-import { StyledTooltip as Q } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledTooltip as X } from "../../../data-display/tooltip/StyledTooltip.js";
 import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as U } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledChip as X } from "../../../data-display/chip/StyledChip.js";
+import { ErrorOutlineIcon as Y } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledChip as Z } from "../../../data-display/chip/StyledChip.js";
 import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
-import { StyledButton as Y } from "../../button/StyledButton.js";
-import { useHelperAlertRole as Z } from "../../../../helpers/useHelperAlertRole.js";
-import { warnMissingErrorMessage as _ } from "../../../../helpers/warnMissingErrorMessage.js";
-import { fieldWidthStyle as ee } from "../../field-styles.js";
-import { useWrap as te } from "../helpers/useWrap.js";
-import { DynamicSelectTitle as le } from "./DynamicSelectTitle.js";
+import { StyledButton as _ } from "../../button/StyledButton.js";
+import { useHelperSlot as ee } from "../../../../helpers/useHelperSlot.js";
+import { fieldWidthStyle as te } from "../../field-styles.js";
+import { useWrap as le } from "../helpers/useWrap.js";
+import { DynamicSelectTitle as re } from "./DynamicSelectTitle.js";
 import { Skeleton as N } from "../../../mui-compat/Skeleton.js";
-import { forwardRef as re, useEffect as ie, useId as ae } from "react";
+import { forwardRef as ae, useEffect as ie, useId as ne } from "react";
 import { jsx as t, jsxs as S } from "react/jsx-runtime";
-var ve = re((V, A) => {
-  const { options: d, dataTest: D, value: r, readOnly: a, multiple: n, title: R, titleSize: z, width: T = "full", disabled: b, onChange: p, required: E, error: f, helperText: C, valueKey: L = "value", labelKey: $ = "label", renderLabel: o, getOptionTooltip: I, loading: B, size: y, locale: q = "en", clearSelectionLabel: G } = V, K = ae();
-  _("DynamicInteractiveChipGroup", f, C);
-  const M = Z(f), { containerRef: m, wrapDisabled: w } = te({ dependencyList: [d, d.length] });
+var ve = ae((V, D) => {
+  const { options: d, dataTest: z, value: r, readOnly: i, multiple: n, title: A, titleSize: L, width: T = "full", disabled: x, onChange: p, required: R, error: b, helperText: C, disableHelperText: $, valueKey: B = "value", labelKey: E = "label", renderLabel: o, getOptionTooltip: I, loading: H, size: w, locale: q = "en", clearSelectionLabel: G } = V, K = ne(), { show: W, role: F } = ee("DynamicInteractiveChipGroup", b, C, !$), { containerRef: f, wrapDisabled: y } = le({ dependencyList: [d, d.length] });
   ie(() => {
-    m.current && (m.current.inert = !0);
-  }, [m]);
-  const u = (e) => typeof e == "object" ? e?.[$]?.toString() ?? "" : e?.toString() ?? "", g = (e) => typeof e == "object" ? e?.[L] : e, c = (e) => {
+    f.current && (f.current.inert = !0);
+  }, [f]);
+  const m = (e) => typeof e == "object" ? e?.[E]?.toString() ?? "" : e?.toString() ?? "", g = (e) => typeof e == "object" ? e?.[B] : e, c = (e) => {
     const l = g(e);
-    return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : u(e);
-  }, s = (e, l) => g(e) === g(l), W = n ? Array.isArray(r) && r.length > 0 : r != null, F = (e) => {
+    return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : m(e);
+  }, s = (e, l) => g(e) === g(l), J = n ? Array.isArray(r) && r.length > 0 : r != null, M = (e) => {
     if (!n) {
-      const i = s(e, r) ? null : e;
-      if (i === null) return;
-      p(i);
+      const a = s(e, r) ? null : e;
+      if (a === null) return;
+      p(a);
       return;
     }
     const l = r ?? [];
-    p(l.find((i) => s(i, e)) ? l.filter((i) => !s(i, e)) : [...l, e]);
-  }, h = a ? d.filter((e) => !!(n ? r?.find((l) => s(l, e)) : s(r, e))) : d, H = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !a);
+    p(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
+  }, u = i ? d.filter((e) => !!(n ? r?.find((l) => s(l, e)) : s(r, e))) : d, P = u.findIndex((e) => !(typeof e == "object" && e?.disabled) && !i);
   return /* @__PURE__ */ S("div", {
-    "data-testid": `${D}-dynamic-radio-group`,
+    "data-testid": `${z}-dynamic-radio-group`,
     className: "relative flex flex-col gap-y-1",
     "data-field-width": T,
-    style: ee(T),
+    style: te(T),
     children: [
-      /* @__PURE__ */ t(le, {
-        title: R,
-        titleSize: z
+      /* @__PURE__ */ t(re, {
+        title: A,
+        titleSize: L
       }),
       /* @__PURE__ */ t("div", {
         "aria-hidden": !0,
-        ref: m,
+        ref: f,
         className: "pointer-events-none absolute left-0 top-0 flex flex-wrap gap-2 opacity-0",
         style: { width: "100%" },
-        children: h.map((e) => /* @__PURE__ */ t(O, {
+        children: u.map((e) => /* @__PURE__ */ t(O, {
           className: "w-fit",
-          readOnly: a,
+          readOnly: i,
           type: n ? "checkbox" : "radio",
           dataTest: `ic-${c(e)}-hidden`,
-          label: o ? o(e) : u(e)
+          label: o ? o(e) : m(e)
         }, c(e)))
       }),
       /* @__PURE__ */ t("div", {
-        className: v("flex flex-wrap gap-2", w && "flex-col gap-1"),
-        children: B ? /* @__PURE__ */ S("div", {
+        className: v("flex flex-wrap gap-2", y && "flex-col gap-1"),
+        children: H ? /* @__PURE__ */ S("div", {
           className: "flex flex-wrap gap-2",
           children: [
             /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" }),
             /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" }),
             /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" })
           ]
-        }) : h?.length ? h.map((e, l) => {
-          const i = !!(n ? r?.find((P) => s(P, e)) : s(r, e)), J = I ? I(e) : null;
-          if (a && !i) return null;
-          const x = typeof e == "object" ? !!e?.disabled : !1, k = !x && !a && l === H ? A : void 0;
-          return /* @__PURE__ */ t(Q, {
-            title: J,
+        }) : u?.length ? u.map((e, l) => {
+          const a = !!(n ? r?.find((U) => s(U, e)) : s(r, e)), Q = I ? I(e) : null;
+          if (i && !a) return null;
+          const h = typeof e == "object" ? !!e?.disabled : !1, k = !h && !i && l === P ? D : void 0;
+          return /* @__PURE__ */ t(X, {
+            title: Q,
             arrow: !0,
             children: /* @__PURE__ */ t("span", {
-              className: v(x && "cursor-not-allowed"),
-              children: a && !w ? /* @__PURE__ */ t(X, {
+              className: v(h && "cursor-not-allowed"),
+              children: i && !y ? /* @__PURE__ */ t(Z, {
                 ref: k,
-                disabled: !!b || x,
+                disabled: !!x || h,
                 classes: { root: "min-h-[32px] h-full" },
                 className: "w-fit",
                 dataTest: `ic-${c(e)}`,
-                label: o ? o(e) : u(e)
+                label: o ? o(e) : m(e)
               }) : /* @__PURE__ */ t(O, {
                 ref: k,
-                disabled: !!b || x,
-                classes: w ? {
+                disabled: !!x || h,
+                classes: y ? {
                   root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
                   label: "block whitespace-normal break-words overflow-visible"
                 } : { root: "min-h-[32px] h-full" },
                 className: "w-fit",
-                readOnly: a,
+                readOnly: i,
                 type: n ? "checkbox" : "radio",
                 dataTest: `ic-${c(e)}`,
-                checked: i,
-                size: y,
-                onClick: () => F(e),
-                label: o ? o(e) : u(e)
+                checked: a,
+                size: w,
+                onClick: () => M(e),
+                label: o ? o(e) : m(e)
               })
             })
           }, c(e));
         }) : /* @__PURE__ */ t("span", { children: "-" })
       }),
-      !E && W && !a && !b && /* @__PURE__ */ t(Y, {
+      !R && J && !i && !x && /* @__PURE__ */ t(_, {
         dataTest: "clear-selection-btn",
         variant: "text",
-        startIcon: y === "medium" ? /* @__PURE__ */ t(j, {
+        startIcon: w === "medium" ? /* @__PURE__ */ t(j, {
           height: 24,
           width: 24,
           className: "size-6"
@@ -114,15 +111,15 @@ var ve = re((V, A) => {
           className: "size-5"
         }),
         className: "w-fit",
-        size: y,
+        size: w,
         onClick: () => p(n ? [] : null),
         children: G ?? (q === "en" ? "Clear selection" : "Fjern valget")
       }),
-      /* @__PURE__ */ S("div", {
+      W && /* @__PURE__ */ S("div", {
         id: K,
-        role: M,
-        className: v("flex min-h-[24px] items-center gap-1 pt-1 text-sm/5 text-delta-600", f && "text-error-500"),
-        children: [f && /* @__PURE__ */ t(U, {
+        role: F,
+        className: v("flex min-h-[24px] items-center gap-1 pt-1 text-sm/5 text-delta-600", b && "text-error-500"),
+        children: [b && /* @__PURE__ */ t(Y, {
           width: 20,
           height: 20,
           className: "min-w-5"

package/dist/components/inputs/full-screen-picker/FullScreenPicker.js

@@ -1,67 +1,68 @@
-import { CloseIcon as b } from "../../icons/close-icon/CloseIcon.js";
-import { StyledButton as w } from "../button/StyledButton.js";
+import { CloseIcon as w } from "../../icons/close-icon/CloseIcon.js";
+import { StyledButton as y } from "../button/StyledButton.js";
 import { useShortViewportMediaQuery as g } from "../../../hooks/useMediaQuery.hook.js";
-import { StyledDialog as y } from "../../feedback/dialog/StyledDialog.js";
+import { StyledDialog as k } from "../../feedback/dialog/StyledDialog.js";
 import { PickerLiveRegion as N } from "./PickerLiveRegion.js";
-import { useVisualViewportHeight as S } from "./useVisualViewportHeight.js";
-import { useEffect as k, useRef as x } from "react";
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-var q = ({ open: i, onClose: l, dataTest: o, title: r, fallbackName: a, ...n }) => {
-  const t = r != null && r !== !1 && r !== "";
-  return /* @__PURE__ */ e(y, {
-    open: i,
-    onClose: (h, s) => l(s),
-    dataTest: o,
+import { isKeyboardModality as S, trackInputModality as I } from "./inputModality.js";
+import { useVisualViewportHeight as R } from "./useVisualViewportHeight.js";
+import { useEffect as x, useRef as p } from "react";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+var B = ({ open: o, onClose: t, dataTest: i, title: r, fallbackName: a, ...n }) => {
+  const l = r != null && r !== !1 && r !== "";
+  return x(I, []), /* @__PURE__ */ e(k, {
+    open: o,
+    onClose: (f, s) => t(s),
+    dataTest: i,
     fullScreen: !0,
     showCloseIcon: !1,
-    ariaLabel: t ? void 0 : a,
-    children: /* @__PURE__ */ e(I, {
+    ariaLabel: l ? void 0 : a,
+    children: /* @__PURE__ */ e($, {
       ...n,
-      dataTest: o,
-      title: t ? r : void 0,
-      onClose: l
+      dataTest: i,
+      title: l ? r : void 0,
+      onClose: t
     })
   });
-}, I = ({ dataTest: i, title: l, closeLabel: o, search: r, headerRow: a, children: n, announcement: t, onClose: h }) => {
-  const s = g(), p = S(), c = x(null), u = x(null);
-  return k(() => {
-    const v = requestAnimationFrame(() => {
-      const d = c.current?.closest("dialog");
-      if (!d || document.activeElement !== d || !d.matches(":focus-visible")) return;
-      const m = u.current?.querySelector('[role="listbox"]');
-      (m && m.tabIndex >= 0 ? m : c.current)?.focus({ preventScroll: !0 });
+}, $ = ({ dataTest: o, title: t, closeLabel: i, search: r, headerRow: a, children: n, announcement: l, onClose: f }) => {
+  const s = g(), v = R(), c = p(null), u = p(null);
+  return x(() => {
+    const b = requestAnimationFrame(() => {
+      const h = c.current?.closest("dialog");
+      if (!h || document.activeElement !== h || !S()) return;
+      const d = u.current?.querySelector('[role="listbox"]');
+      (d && d.tabIndex >= 0 ? d : c.current)?.focus({ preventScroll: !0 });
     });
-    return () => cancelAnimationFrame(v);
-  }, []), /* @__PURE__ */ f("div", {
+    return () => cancelAnimationFrame(b);
+  }, []), /* @__PURE__ */ m("div", {
     className: "flex min-h-0 flex-col",
-    style: { height: p },
+    style: { height: v },
     children: [
-      /* @__PURE__ */ f("div", {
-        "data-testid": `${i}-header`,
+      /* @__PURE__ */ m("div", {
+        "data-testid": `${o}-header`,
         className: "flex shrink-0 flex-col border-0 border-b border-solid border-delta-200 bg-white",
         children: [
-          /* @__PURE__ */ f("div", {
+          /* @__PURE__ */ m("div", {
             className: "flex items-start gap-2",
             children: [
-              l !== void 0 && /* @__PURE__ */ e("h2", {
+              t !== void 0 && /* @__PURE__ */ e("h2", {
                 className: "m-0 min-w-0 flex-1 break-words pl-4 pt-2 text-[20px] font-semibold leading-7 text-delta-800",
-                children: l
+                children: t
               }),
               s && /* @__PURE__ */ e("div", {
                 className: "min-w-0 max-w-[240px] flex-1 pt-2",
                 children: r
               }),
-              /* @__PURE__ */ e(w, {
-                dataTest: `${i}-close`,
+              /* @__PURE__ */ e(y, {
+                dataTest: `${o}-close`,
                 refLink: c,
-                "aria-label": o,
+                "aria-label": i,
                 variant: "textGray",
-                startIcon: /* @__PURE__ */ e(b, {
+                startIcon: /* @__PURE__ */ e(w, {
                   width: 24,
                   height: 24
                 }),
                 className: "ml-auto h-10 w-10 min-w-10 shrink-0 px-0",
-                onClick: () => h("closeButton")
+                onClick: () => f("closeButton")
               })
             ]
           }),
@@ -77,17 +78,17 @@ var q = ({ open: i, onClose: l, dataTest: o, title: r, fallbackName: a, ...n })
       }),
       /* @__PURE__ */ e("div", {
         ref: u,
-        "data-testid": `${i}-body`,
+        "data-testid": `${o}-body`,
         className: "flex min-h-0 flex-1 flex-col overflow-y-auto px-4",
         children: n
       }),
       /* @__PURE__ */ e(N, {
-        announcement: t,
-        dataTest: `${i}-live`
+        announcement: l,
+        dataTest: `${o}-live`
       })
     ]
   });
 };
 export {
-  q as FullScreenPicker
+  B as FullScreenPicker
 };

package/dist/components/inputs/full-screen-picker/inputModality.js

@@ -0,0 +1,11 @@
+var t = !1, r = !1, a = () => {
+  r || typeof document > "u" || (r = !0, document.addEventListener("keydown", (e) => {
+    e.isTrusted && !e.metaKey && !e.ctrlKey && !e.altKey && (t = !0);
+  }, !0), document.addEventListener("pointerdown", (e) => {
+    e.isTrusted && (t = !1);
+  }, !0));
+}, d = () => t;
+export {
+  d as isKeyboardModality,
+  a as trackInputModality
+};

package/dist/src/components/inputs/dynamic-select/types.d.ts

@@ -67,7 +67,14 @@ interface DynamicSelectCommonProps<TOption extends DynamicSelectOption> {
      */
     required?: boolean;
     helperText?: React.ReactNode;
-    /** Completely removes the helper text block below the autocomplete */
+    /**
+     * Stops the helper row being *reserved* below the control. A real `helperText` or an `error` still
+     * renders it, growing the layout at that moment — so nothing is silently swallowed.
+     *
+     * On the autocomplete variant it removes the block outright, which is what it has always done
+     * there. On the chip-group variant (1–5 options) it opts out of a 28px row that would otherwise
+     * sit empty under the chips.
+     */
     disableHelperText?: boolean;
     /**
      * Key of `TOption` used as the option's identity for comparison and as the chip/tag key.

package/dist/src/components/inputs/full-screen-picker/inputModality.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Starts tracking, once per page, whether the user's last action was a key press or a pointer press
+ * (mouse, pen, touch). Capture phase, so it sees the press that opens a picker before anything
+ * handles it. Only trusted events count: a script's synthetic events say nothing about the user.
+ *
+ * Why not `:focus-visible`: when a picker opens, `StyledDialog` moves focus from the field to its own
+ * shell, and a browser lets a scripted focus move inherit the field's focus-visible state. A text
+ * field is always focus-visible, so a tap on a field that already had focus (after an earlier choice)
+ * read as keyboard and put the active-row marker in the list (ASMA-8468).
+ */
+export declare const trackInputModality: () => void;
+/** The user's last action was a key press (see {@link trackInputModality}). */
+export declare const isKeyboardModality: () => boolean;

package/package.json

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