@jsenv/dom 0.14.3 → 0.14.4

package/dist/jsenv_dom.js

@@ -208,7 +208,7 @@ const dispatchInternalCustomEvent = (
   customEventDetail,
 ) => {
   const customEvent = new CustomEvent(customEventName, {
-    detail: customEventDetail,
+    detail: customEventDetail || {},
     cancelable: true,
   });
   chainEvent(customEvent, customEventDetail?.event);
@@ -225,7 +225,7 @@ const dispatchPublicCustomEvent = (
   customEventDetail,
 ) => {
   const customEvent = new CustomEvent(customEventName, {
-    detail: customEventDetail,
+    detail: customEventDetail || {},
     bubbles: true,
     cancelable: true,
   });
@@ -241,7 +241,7 @@ const dispatchPublicCustomEvent = (
  */
 const dispatchCustomEvent = (el, customEventName, customEventDetail) => {
   const customEvent = new CustomEvent(customEventName, {
-    detail: customEventDetail,
+    detail: customEventDetail || {},
     cancelable: true,
   });
   chainEvent(customEvent, customEventDetail?.event);
@@ -253,6 +253,12 @@ const chainEvent = (customEvent, parentEvent) => {
   if (!parentEvent) {
     return customEvent;
   }
+  if (!customEvent.detail) {
+    console.warn(
+      `Event "${customEvent.type}" has no detail object. Cannot chain to parent event "${parentEvent.type}".`,
+    );
+    return customEvent;
+  }
   // Always build eventChain from the first wrapping so callers can rely on it
   // being present whenever `parentEvent` is set.
   // eventChain = [oldest, ..., parentEvent] — the full ancestor list including the direct parent.
@@ -316,15 +322,15 @@ const formatEventSideEffect = (e, sideEffect) => {
     const chain = e.detail.eventChain;
     const initiator = chain[0];
     parts.push(
-      `"${initiator.type}" on ${getElementSignature(initiator.target)}`,
+      `"${getEventLabel(initiator)}" on ${getElementSignature(initiator.target)}`,
     );
     // chain[0] is shown as initiator above; chain includes event as last element
     for (const chainedEvent of chain.slice(1)) {
-      parts.push(chainedEvent.type);
+      parts.push(getEventLabel(chainedEvent));
     }
-    parts.push(e.type);
+    parts.push(getEventLabel(e));
   } else {
-    parts.push(`"${e.type}" on ${getElementSignature(e.target)}`);
+    parts.push(`"${getEventLabel(e)}" on ${getElementSignature(e.target)}`);
   }
   return `${parts.join(" -> ")} -> ${sideEffect}`;
 };
@@ -374,8 +380,8 @@ const createEventGroupLogger = () => {
         console.groupEnd();
       }
       const label = initiator.target
-        ? `"${initiator.type}" on ${getElementSignature(initiator.target)}`
-        : `"${initiator.type}"`;
+        ? `"${getEventLabel(initiator)}" on ${getElementSignature(initiator.target)}`
+        : `"${getEventLabel(initiator)}"`;
       console.group(label);
       currentInitiator = initiator;
     }
@@ -400,12 +406,40 @@ const formatSideEffectLine = (e, prefix) => {
     // chain[0] is the root event, already shown as the group label — skip it.
     // chain includes the direct parent (e.detail.event) as its last element.
     for (const chainedEvent of chain.slice(1)) {
-      parts.push(chainedEvent.type);
+      parts.push(getEventLabel(chainedEvent));
     }
   }
   return parts.join(" -> ");
 };
 
+const getEventLabel = (e) => {
+  if (e.type === "mousedown" || e.type === "click") {
+    if (e.button !== 0) {
+      return `${e.type}:right_button`;
+    }
+    return e.type;
+  }
+  if (e.type === "keydown") {
+    const key = e.key === " " ? "space" : e.key.toLowerCase();
+    const modifiers = [];
+    if (e.ctrlKey) {
+      modifiers.push("ctrl");
+    }
+    if (e.metaKey) {
+      modifiers.push("meta");
+    }
+    if (e.altKey) {
+      modifiers.push("alt");
+    }
+    if (e.shiftKey) {
+      modifiers.push("shift");
+    }
+    modifiers.push(key);
+    return `keydown:${modifiers.join("+")}`;
+  }
+  return e.type;
+};
+
 const createIterableWeakSet = () => {
   const objectWeakRefSet = new Set();
 
@@ -4328,10 +4362,7 @@ const elementIsFocusable = (node, { excludeAriaHidden } = {}) => {
     }
     return canFocus(node);
   }
-  if (
-    ["button", "select", "datalist", "iframe", "textarea"].indexOf(nodeName) >
-    -1
-  ) {
+  if (FOCUSABLE_NODE_NAME_SET.has(nodeName)) {
     return canFocus(node);
   }
   if (["a", "area"].indexOf(nodeName) > -1) {
@@ -4357,6 +4388,14 @@ const elementIsFocusable = (node, { excludeAriaHidden } = {}) => {
   }
   return false;
 };
+const FOCUSABLE_NODE_NAME_SET = new Set([
+  "button",
+  "select",
+  "datalist",
+  "dialog",
+  "iframe",
+  "textarea",
+]);
 
 const canInteract = (element) => {
   if (element.disabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {