asma-ui-core 3.113.0 → 3.113.2

package/dist/components/feedback/dialog/dialog-footer/StyledDialogFooter.js

@@ -1,7 +1,7 @@
 import { cn as j } from "../../../../helpers/cn.js";
-import { StyledTooltip as K } from "../../../data-display/tooltip/StyledTooltip.js";
-import { DotsVerticalIcon as U } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
-import { DialogBusyContext as H, WAIT_UNTIL_SAVED as V, useReportDialogBusy as G } from "../DialogBusyContext.js";
+import { StyledTooltip as H } from "../../../data-display/tooltip/StyledTooltip.js";
+import { DotsVerticalIcon as K } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { DialogBusyContext as U, WAIT_UNTIL_SAVED as V, useReportDialogBusy as G } from "../DialogBusyContext.js";
 import { StyledButton as P } from "../../../inputs/button/StyledButton.js";
 import { StyledMenu as X } from "../../../navigation/menu/StyledMenu.js";
 import { StyledMenuItem as Y } from "../../../navigation/menu/StyledMenuItem.js";
@@ -10,38 +10,49 @@ import { useWidthRegistry as J } from "../../../../hooks/useWidthRegistry.js";
 import { planToolbarActions as Q } from "../../../custom/module/header-layout/planToolbarActions.js";
 import { ToolbarActionButton as Z, overflowItemState as ee } from "../../../custom/module/header-layout/ToolbarActionGroup.js";
 import { useToolbarTranslations as oe } from "../../../custom/module/header-layout/useTranslations.js";
-import { useContext as re, useMemo as R, useState as le } from "react";
-import { Fragment as _, jsx as o, jsxs as d } from "react/jsx-runtime";
-var ne = 2, ie = 470, te = 8, M = "dialog-footer-right", O = "dialog-footer-more", k = (l, n) => `dialog-footer-action:${l}:${n ? "label" : "icon"}`;
-function Te({ leftActions: l = [], leadingSlot: n, secondaryAction: c, primaryAction: m, fixed: E = !1, rounded: W = !0, locale: i = "en", className: S, dataTest: f = "styled-dialog-footer" }) {
-  const b = re(H), p = oe(i), { ref: L, widthPx: h } = q(), { register: u, widths: t } = J(), [g, x] = le(null), y = h > 0 && h < ie, D = y ? 8 : 16, a = R(() => l.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
+import { useContext as re, useMemo as R, useState as ne } from "react";
+import { Fragment as _, jsx as o, jsxs as m } from "react/jsx-runtime";
+var le = 2, ie = 470, te = 8, M = "dialog-footer-right", O = "dialog-footer-more", k = (n, l) => `dialog-footer-action:${n}:${l ? "label" : "icon"}`;
+function Te({ leftActions: n = [], leadingSlot: l, secondaryAction: f, primaryAction: p, fixed: E = !1, rounded: L = !0, locale: i = "en", className: W, dataTest: h = "styled-dialog-footer" }) {
+  const T = re(U), u = oe(i), { ref: S, widthPx: g } = q(), { register: x, widths: t } = J(), [v, b] = ne(null), a = g > 0 && g < ie, D = a ? 8 : 16, s = R(() => n.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
     ...e,
     canHideLabel: !1
-  } : e), [l]), $ = t[M] ?? 0, T = c != null || m != null, B = Math.max(0, h - D * 2 - $ - (T ? te : 0)), s = R(() => a.length >= ne ? {
-    inlineActions: [],
-    overflowActions: a,
-    showMoreMenu: !0
-  } : Q({
-    actions: a,
-    availableWidth: B,
-    collapseLabels: !0,
-    resolveActionWidth: (e, r) => t[k(e.id, r)],
-    moreButtonWidthPx: t[O]
-  }), [
-    a,
+  } : e), [n]), $ = t[M] ?? 0, w = f != null || p != null, B = Math.max(0, g - D * 2 - $ - (w ? te : 0)), d = R(() => {
+    if (s.length >= le) return {
+      inlineActions: [],
+      overflowActions: s,
+      showMoreMenu: !0
+    };
+    const e = Q({
+      actions: s,
+      availableWidth: B,
+      collapseLabels: !0,
+      resolveActionWidth: (r, c) => t[k(r.id, c)],
+      moreButtonWidthPx: t[O]
+    });
+    return a ? {
+      ...e,
+      inlineActions: e.inlineActions.map((r) => r.action.canHideLabel === !1 ? r : {
+        ...r,
+        showLabel: !1
+      })
+    } : e;
+  }, [
+    s,
     B,
-    t
+    t,
+    a
   ]);
-  G(n == null && s.overflowActions.some((e) => !!e.loading && e.holdsDialog !== !1));
-  const C = (e, r, w) => {
-    const N = w === "secondary" && b?.busy, v = !!e.disabled || !!N, A = N ? b.busyReason ?? V[i] : e.tooltip, I = v || !!e.loading, z = /* @__PURE__ */ o(P, {
+  G(l == null && d.overflowActions.some((e) => !!e.loading && e.holdsDialog !== !1));
+  const C = (e, r, c) => {
+    const N = c === "secondary" && T?.busy, y = !!e.disabled || !!N, A = N ? T.busyReason ?? V[i] : e.tooltip, I = y || !!e.loading, z = /* @__PURE__ */ o(P, {
       locale: i,
-      dataTest: e.dataTest ?? `${f}-${w}`,
+      dataTest: e.dataTest ?? `${h}-${c}`,
       variant: e.variant ?? r,
       error: e.tone === "danger",
       size: "medium",
       type: e.type ?? "button",
-      disabled: v && !!A,
+      disabled: y && !!A,
       "aria-disabled": I || void 0,
       disabledReason: A,
       loading: !!e.loading,
@@ -51,52 +62,52 @@ function Te({ leftActions: l = [], leadingSlot: n, secondaryAction: c, primaryAc
       "aria-label": e.ariaLabel,
       children: e.label
     });
-    return /* @__PURE__ */ o(K, {
+    return /* @__PURE__ */ o(H, {
       arrow: !0,
       title: e.tooltip,
-      open: v || !e.tooltip ? !1 : void 0,
+      open: y || !e.tooltip ? !1 : void 0,
       children: /* @__PURE__ */ o("span", {
         className: "inline-flex",
         children: z
       })
     });
   };
-  return /* @__PURE__ */ d("div", {
-    ref: L,
-    "data-testid": f,
-    className: j("flex items-center justify-end self-stretch border-0 border-t border-solid border-delta-200 bg-white", y ? "gap-2 p-2" : "gap-4 p-4", W && "rounded-b-lg", E && "sticky bottom-0 z-[1]", S),
+  return /* @__PURE__ */ m("div", {
+    ref: S,
+    "data-testid": h,
+    className: j("flex items-center justify-end self-stretch border-0 border-t border-solid border-delta-200 bg-white", a ? "gap-2 p-2" : "gap-4 p-4", L && "rounded-b-lg", E && "sticky bottom-0 z-[1]", W),
     children: [/* @__PURE__ */ o("div", {
       className: "flex shrink-0 flex-nowrap items-center gap-2",
-      children: n ?? /* @__PURE__ */ d(_, { children: [s.inlineActions.map(({ action: e, showLabel: r }) => /* @__PURE__ */ o("span", {
-        ref: u(k(e.id, r)),
+      children: l ?? /* @__PURE__ */ m(_, { children: [d.inlineActions.map(({ action: e, showLabel: r }) => /* @__PURE__ */ o("span", {
+        ref: x(k(e.id, r)),
         className: "inline-flex shrink-0",
         children: /* @__PURE__ */ o(Z, {
           action: e,
           showLabel: r,
-          inProgressLabel: p.inProgress
+          inProgressLabel: u.inProgress
         })
-      }, e.id)), s.showMoreMenu && /* @__PURE__ */ d(_, { children: [/* @__PURE__ */ o("span", {
-        ref: u(O),
+      }, e.id)), d.showMoreMenu && /* @__PURE__ */ m(_, { children: [/* @__PURE__ */ o("span", {
+        ref: x(O),
         className: "inline-flex shrink-0",
         children: /* @__PURE__ */ o(P, {
           locale: i,
-          dataTest: `${f}-more`,
+          dataTest: `${h}-more`,
           variant: "outlined",
           size: "medium",
           type: "button",
-          onClick: (e) => x(e.currentTarget),
-          "aria-label": p.more,
+          onClick: (e) => b(e.currentTarget),
+          "aria-label": u.more,
           "aria-haspopup": "menu",
-          "aria-expanded": g != null,
-          startIcon: /* @__PURE__ */ o(U, {
+          "aria-expanded": v != null,
+          startIcon: /* @__PURE__ */ o(K, {
             width: 24,
             height: 24
           })
         })
       }), /* @__PURE__ */ o(X, {
-        anchorEl: g,
-        open: g != null,
-        onClose: () => x(null),
+        anchorEl: v,
+        open: v != null,
+        onClose: () => b(null),
         anchorOrigin: {
           vertical: "top",
           horizontal: "left"
@@ -105,10 +116,10 @@ function Te({ leftActions: l = [], leadingSlot: n, secondaryAction: c, primaryAc
           vertical: "bottom",
           horizontal: "left"
         },
-        children: s.overflowActions.map((e) => /* @__PURE__ */ o(Y, {
-          ...ee(e, p.inProgress),
+        children: d.overflowActions.map((e) => /* @__PURE__ */ o(Y, {
+          ...ee(e, u.inProgress),
           onClick: () => {
-            x(null), e.onClick();
+            b(null), e.onClick();
           },
           children: /* @__PURE__ */ o("span", {
             className: e.tone === "danger" ? "text-beta-500" : "text-delta-700",
@@ -116,12 +127,12 @@ function Te({ leftActions: l = [], leadingSlot: n, secondaryAction: c, primaryAc
           })
         }, e.id))
       })] })] })
-    }), T && /* @__PURE__ */ o("span", {
+    }), w && /* @__PURE__ */ o("span", {
       className: "flex min-w-px flex-1 flex-nowrap items-center justify-end",
-      children: /* @__PURE__ */ d("span", {
-        ref: u(M),
+      children: /* @__PURE__ */ m("span", {
+        ref: x(M),
         className: "flex shrink-0 flex-nowrap items-center gap-2",
-        children: [c && C(c, "outlined", "secondary"), m && C(m, "contained", "primary")]
+        children: [f && C(f, "outlined", "secondary"), p && C(p, "contained", "primary")]
       })
     })]
   });

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/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.0",
+    "version": "3.113.2",
     "type": "module",
     "sideEffects": [
         "**/*.css",