asma-ui-core 3.113.1 → 3.113.2

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