@skippr/live-agent-sdk 0.103.0 → 0.105.0

package/README.md

@@ -56,7 +56,6 @@ The widget opens with a picker of your active modules — the user chooses which
 
 ```tsx
 import { LiveAgent } from '@skippr/live-agent-sdk';
-import '@skippr/live-agent-sdk/styles';
 
 function App() {
   return <LiveAgent appKey="pk_live_your_key" />;

package/dist/esm/lib-exports.js

@@ -5089,6 +5089,21 @@ var ROLE_BY_TAG = {
   embed: "embed",
   object: "object"
 };
+var REACT_PROPS_KEY_PREFIX = "__reactProps$";
+var POINTER_HANDLER_PROPS = ["onClick", "onMouseDown", "onMouseUp", "onPointerDown"];
+function hasFrameworkPointerHandler(element) {
+  try {
+    const propsKey = Object.keys(element).find((key) => key.startsWith(REACT_PROPS_KEY_PREFIX));
+    if (!propsKey)
+      return false;
+    const props = element[propsKey];
+    if (!props || typeof props !== "object")
+      return false;
+    return POINTER_HANDLER_PROPS.some((handler) => typeof props[handler] === "function");
+  } catch {
+    return false;
+  }
+}
 function inferRole(element) {
   const explicitRole = element.getAttribute("role");
   if (explicitRole)
@@ -5246,6 +5261,56 @@ function isCursorClickable(element, rect) {
     return false;
   return true;
 }
+var KEYSTROKE_TRAP_MAX_EDGE_PX = 8;
+function isKeystrokeTrap(rect) {
+  return rect.width < KEYSTROKE_TRAP_MAX_EDGE_PX || rect.height < KEYSTROKE_TRAP_MAX_EDGE_PX;
+}
+var CONTAINED_CONTROL_SELECTOR = "input, select, textarea, button, a[href]";
+function isLayoutContainer(element) {
+  if (element.querySelectorAll(CONTAINED_CONTROL_SELECTOR).length > 1)
+    return true;
+  return element.querySelector("h1, h2, h3, h4, h5, h6") !== null;
+}
+var MENU_MIN_OPTION_ROWS = 2;
+function optionRowsOf(element) {
+  const children = Array.from(element.children);
+  if (children.length < MENU_MIN_OPTION_ROWS)
+    return [];
+  const rects = children.map((child) => child.getBoundingClientRect());
+  const everyChildIsALabelledLeaf = children.every((child, index2) => child.children.length === 0 && normalizeText(child.textContent).length > 0 && !isVisuallyEmpty(rects[index2]));
+  return everyChildIsALabelledLeaf && areStackedVertically(rects) ? children : [];
+}
+function isVisuallyEmpty(rect) {
+  return rect.width <= 0 || rect.height <= 0;
+}
+function areStackedVertically(rects) {
+  for (let index2 = 1;index2 < rects.length; index2++) {
+    const previous = rects[index2 - 1];
+    const current = rects[index2];
+    if (current.top < previous.bottom)
+      return false;
+  }
+  return true;
+}
+var WIDGET_NESTING_SEARCH_DEPTH = 4;
+function isInsideHandlerOwningWidget(element) {
+  let ancestor = element.parentElement;
+  for (let depth = 0;depth < WIDGET_NESTING_SEARCH_DEPTH && ancestor; depth++) {
+    if (hasFrameworkPointerHandler(ancestor) && !isLayoutContainer(ancestor))
+      return true;
+    ancestor = ancestor.parentElement;
+  }
+  return false;
+}
+function isFrameworkClickable(element, rect) {
+  if (!intersectsViewport(rect, window.innerWidth, window.innerHeight))
+    return false;
+  if (!hasFrameworkPointerHandler(element))
+    return false;
+  if (isLayoutContainer(element))
+    return false;
+  return !isInsideHandlerOwningWidget(element);
+}
 function isBlindRegion(role) {
   return role === "video" || role === "iframe" || role === "canvas" || role === "audio" || role === "embed" || role === "object";
 }
@@ -5570,6 +5635,19 @@ function collectTableRowAsSingleEntry(row, depth, rect, entries) {
   }
   return true;
 }
+function collectOptionRows(rows, depth, entries) {
+  for (const row of rows) {
+    const rect = row.getBoundingClientRect();
+    entries.push({
+      depth,
+      role: "option",
+      name: normalizeText(row.textContent).slice(0, NAME_MAX_CHARS),
+      ref: ensureStableRef(row),
+      attrs: [],
+      area: rect.width * rect.height
+    });
+  }
+}
 function walkAndCollect(element, depth, entries, suppressTextLeaves = false) {
   if (shouldSkipSubtree(element))
     return;
@@ -5580,7 +5658,18 @@ function walkAndCollect(element, depth, entries, suppressTextLeaves = false) {
     if (collectTableRowAsSingleEntry(element, depth, rect, entries))
       return;
   }
-  const role = inferRole(element) ?? (isCursorClickable(element, rect) ? "button" : null);
+  if (element.tagName === "INPUT" && isKeystrokeTrap(rect))
+    return;
+  const markupRole = inferRole(element);
+  const isFrameworkControl = markupRole === null && isFrameworkClickable(element, rect);
+  if (isFrameworkControl && isVisible(element, rect)) {
+    const optionRows = optionRowsOf(element);
+    if (optionRows.length > 0) {
+      collectOptionRows(optionRows, depth, entries);
+      return;
+    }
+  }
+  const role = markupRole ?? (isCursorClickable(element, rect) || isFrameworkControl ? "button" : null);
   const isVisibleAndEmittable = role !== null && isVisible(element, rect) && shouldEmitElement(element, role);
   let childDepth = depth;
   let childSuppressTextLeaves = suppressTextLeaves;
@@ -7219,6 +7308,7 @@ function performSelect(element, value) {
       element.click();
   }
 }
+var NATIVELY_ACTIVATABLE_SELECTOR = "a[href], button, input, select, textarea, label, summary";
 var INTERACTIVE_SELECTOR = 'button, a[href], [role="button"], [role="link"], input, select, [onclick]';
 function resolveClickTarget(element) {
   if (element.matches(INTERACTIVE_SELECTOR))
@@ -7230,23 +7320,36 @@ function resolveClickTarget(element) {
   const onlyDescendant = descendants.length === 1 ? descendants[0] : null;
   return onlyDescendant ?? element;
 }
+function deepestElementAt(fallback, clientX, clientY) {
+  const topmost = document.elementFromPoint(clientX, clientY);
+  if (!(topmost instanceof HTMLElement))
+    return fallback;
+  if (!fallback.contains(topmost))
+    return fallback;
+  return isActionBlocked(topmost) ? fallback : topmost;
+}
 function performClick(element) {
   const rect = element.getBoundingClientRect();
   const clientX = rect.left + rect.width / 2;
   const clientY = rect.top + rect.height / 2;
   const base = { bubbles: true, cancelable: true, composed: true, clientX, clientY, button: 0 };
-  if (typeof element.focus === "function") {
+  const hitTarget = deepestElementAt(element, clientX, clientY);
+  if (typeof hitTarget.focus === "function") {
     try {
-      element.focus({ preventScroll: true });
+      hitTarget.focus({ preventScroll: true });
     } catch {}
   }
   try {
-    element.dispatchEvent(new PointerEvent("pointerdown", { ...base, pointerId: 1, isPrimary: true }));
-    element.dispatchEvent(new MouseEvent("mousedown", base));
-    element.dispatchEvent(new PointerEvent("pointerup", { ...base, pointerId: 1, isPrimary: true }));
-    element.dispatchEvent(new MouseEvent("mouseup", base));
+    hitTarget.dispatchEvent(new PointerEvent("pointerdown", { ...base, pointerId: 1, isPrimary: true }));
+    hitTarget.dispatchEvent(new MouseEvent("mousedown", base));
+    hitTarget.dispatchEvent(new PointerEvent("pointerup", { ...base, pointerId: 1, isPrimary: true }));
+    hitTarget.dispatchEvent(new MouseEvent("mouseup", base));
+    if (hitTarget.matches(NATIVELY_ACTIVATABLE_SELECTOR)) {
+      hitTarget.click();
+    } else {
+      hitTarget.dispatchEvent(new MouseEvent("click", base));
+    }
   } catch {}
-  element.click();
 }
 function performHover(element) {
   const rect = element.getBoundingClientRect();