abledom 0.1.1 → 0.2.0

package/dist/esm/index.js

@@ -73,6 +73,7 @@ var DOMBuilder = class {
     const parent = this._stack[0];
     const element = namespace ? (_a = this._doc) == null ? void 0 : _a.createElementNS(namespace, tagName) : (_b = this._doc) == null ? void 0 : _b.createElement(tagName);
     if (parent && element) {
+      element.__abledomui = true;
       if (attributes) {
         for (const [key, value] of Object.entries(attributes)) {
           if (key === "class") {
@@ -100,8 +101,12 @@ var DOMBuilder = class {
     return this;
   }
   text(text) {
-    var _a;
-    (_a = this._stack[0]) == null ? void 0 : _a.appendChild(document.createTextNode(text));
+    var _a, _b;
+    const textNode = (_a = this._doc) == null ? void 0 : _a.createTextNode(text);
+    if (textNode) {
+      textNode.__abledomui = true;
+      (_b = this._stack[0]) == null ? void 0 : _b.appendChild(textNode);
+    }
     return this;
   }
   element(callback) {
@@ -252,25 +257,23 @@ var alignbottomleft_default = function buildSVG11(parent) {
 
 // src/ui/ui.ts
 var pressedClass = "pressed";
-var _NotificationUI = class _NotificationUI {
-  constructor(win, rule) {
+var NotificationUI = class {
+  constructor(win, core, rule, notificationsUI) {
     __publicField(this, "_win");
+    __publicField(this, "_core");
+    __publicField(this, "_notificationsUI");
     __publicField(this, "_wrapper");
     __publicField(this, "_rule");
     __publicField(this, "_onToggle");
     __publicField(this, "isHidden", false);
     this._win = win;
+    this._core = core;
     this._rule = rule;
-    if (!_NotificationUI._notificationsUI) {
-      _NotificationUI._notificationsUI = new NotificationsUI(this._win);
-    }
+    this._notificationsUI = notificationsUI;
     this._wrapper = win.document.createElement(
       "div"
     );
-    if (!_NotificationUI._highlight) {
-      _NotificationUI._highlight = new ElementHighlighter(win);
-    }
-    _NotificationUI._notificationsUI.addNotification(this);
+    notificationsUI.addNotification(this);
   }
   static setOnToggle(instance, onToggle) {
     instance._onToggle = onToggle;
@@ -291,11 +294,11 @@ var _NotificationUI = class _NotificationUI {
       (container) => {
         container.onmouseover = () => {
           var _a;
-          element && ((_a = _NotificationUI._highlight) == null ? void 0 : _a.highlight(element));
+          element && ((_a = this._notificationsUI) == null ? void 0 : _a.highlight(element));
         };
         container.onmouseout = () => {
           var _a;
-          (_a = _NotificationUI._highlight) == null ? void 0 : _a.hide();
+          (_a = this._notificationsUI) == null ? void 0 : _a.highlight(null);
         };
       }
     ).openTag("div", {
@@ -308,15 +311,18 @@ var _NotificationUI = class _NotificationUI {
       },
       (logButton) => {
         logButton.onclick = () => {
-          console.error(
+          const { id, message, element: element2, rel, help, ...extra } = notification;
+          this._core.log(
             "AbleDOM: ",
+            "\nid:",
+            id,
             "\nmessage:",
-            notification.message,
+            message,
             "\nelement:",
-            element,
-            ...notification.rel ? ["\nrelative:", notification.rel] : [],
-            "\nnotification:",
-            notification
+            element2,
+            ...rel ? ["\nrelative:", rel] : [],
+            ...help ? ["\nhelp:", help] : [],
+            ...Object.keys(extra).length > 0 ? ["\nextra:", extra] : []
           );
         };
       }
@@ -328,12 +334,13 @@ var _NotificationUI = class _NotificationUI {
       },
       (revealButton) => {
         var _a;
+        const body = win.document.body;
         const hasDevTools = !!((_a = win.__ableDOMDevtools) == null ? void 0 : _a.revealElement) && false;
-        if (hasDevTools && element && win.document.body.contains(element)) {
+        if (hasDevTools && element && body.contains(element)) {
           revealButton.onclick = () => {
             var _a2;
             const revealElement = (_a2 = win.__ableDOMDevtools) == null ? void 0 : _a2.revealElement;
-            if (revealElement && win.document.body.contains(element)) {
+            if (revealElement && body.contains(element)) {
               revealElement(element).then((revealed) => {
                 if (!revealed) {
                 }
@@ -367,7 +374,7 @@ var _NotificationUI = class _NotificationUI {
         closeButton.onclick = () => {
           var _a;
           this.toggle(false);
-          (_a = _NotificationUI._highlight) == null ? void 0 : _a.hide();
+          (_a = this._notificationsUI) == null ? void 0 : _a.highlight(null);
         };
       }
     ).element(close_default).closeTag().closeTag().closeTag();
@@ -386,12 +393,10 @@ var _NotificationUI = class _NotificationUI {
   dispose() {
     var _a;
     this._wrapper.remove();
-    (_a = _NotificationUI._notificationsUI) == null ? void 0 : _a.removeNotification(this);
+    (_a = this._notificationsUI) == null ? void 0 : _a.removeNotification(this);
+    delete this._notificationsUI;
   }
 };
-__publicField(_NotificationUI, "_notificationsUI");
-__publicField(_NotificationUI, "_highlight");
-var NotificationUI = _NotificationUI;
 var NotificationsUI = class {
   constructor(win) {
     __publicField(this, "_container");
@@ -406,17 +411,21 @@ var NotificationsUI = class {
     __publicField(this, "_alignBottomRightButton");
     __publicField(this, "_isMuted", false);
     __publicField(this, "_notifications", /* @__PURE__ */ new Set());
-    const container = this._container = win.document.createElement("div");
+    __publicField(this, "_highlighter");
+    const doc = win.document;
+    const container = this._container = doc.createElement("div");
     container.__abledomui = true;
     container.id = "abledom-report";
-    const style = document.createElement("style");
+    const style = doc.createElement("style");
     style.type = "text/css";
-    style.appendChild(document.createTextNode(ui_default));
+    style.appendChild(doc.createTextNode(ui_default));
     container.appendChild(style);
-    const notificationsContainer = this._notificationsContainer = win.document.createElement("div");
+    const notificationsContainer = this._notificationsContainer = doc.createElement("div");
+    notificationsContainer.__abledomui = true;
     notificationsContainer.className = "abledom-notifications-container";
     container.appendChild(notificationsContainer);
-    const menuElement = this._menuElement = win.document.createElement("div");
+    const menuElement = this._menuElement = doc.createElement("div");
+    menuElement.__abledomui = true;
     menuElement.className = "abledom-menu-container";
     container.appendChild(menuElement);
     new DOMBuilder(menuElement).openTag("div", { class: "abledom-menu" }).openTag(
@@ -523,10 +532,14 @@ var NotificationsUI = class {
         };
       }
     ).element(alignbottomright_default).closeTag().closeTag();
-    win.document.body.appendChild(container);
+    doc.body.appendChild(container);
+    this._highlighter = new ElementHighlighter(win);
   }
   setUIAlignment(alignment) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!this._container || !this._notificationsContainer || !this._menuElement) {
+      return;
+    }
     (_a = this._alignBottomLeftButton) == null ? void 0 : _a.classList.remove(pressedClass);
     (_b = this._alignBottomRightButton) == null ? void 0 : _b.classList.remove(pressedClass);
     (_c = this._alignTopLeftButton) == null ? void 0 : _c.classList.remove(pressedClass);
@@ -566,6 +579,9 @@ var NotificationsUI = class {
     );
   }
   _setNotificationsCount(count) {
+    if (!this._menuElement) {
+      return;
+    }
     const countElement = this._notificationCountElement;
     if (countElement && count > 0) {
       countElement.textContent = "";
@@ -597,6 +613,9 @@ var NotificationsUI = class {
     showAllButton.style.display = allVisible ? "none" : "block";
   }
   addNotification(notification) {
+    if (!this._notificationsContainer) {
+      throw new Error("NotificationsUI is not initialized");
+    }
     if (this._notifications.has(notification)) {
       return;
     }
@@ -620,6 +639,7 @@ var NotificationsUI = class {
     this._notifications.delete(notification);
     this._setNotificationsCount(this._notifications.size);
     this._setShowHideButtonsVisibility();
+    this.highlight(null);
   }
   hideAll() {
     this._notifications.forEach((notification) => {
@@ -633,6 +653,26 @@ var NotificationsUI = class {
     });
     this._setShowHideButtonsVisibility();
   }
+  highlight(element) {
+    var _a;
+    (_a = this._highlighter) == null ? void 0 : _a.highlight(element);
+  }
+  dispose() {
+    var _a, _b;
+    (_a = this._highlighter) == null ? void 0 : _a.dispose();
+    (_b = this._container) == null ? void 0 : _b.remove();
+    delete this._highlighter;
+    delete this._container;
+    delete this._notificationsContainer;
+    delete this._menuElement;
+    delete this._notificationCountElement;
+    delete this._showAllButton;
+    delete this._hideAllButton;
+    delete this._alignBottomLeftButton;
+    delete this._alignTopLeftButton;
+    delete this._alignTopRightButton;
+    delete this._alignBottomRightButton;
+  }
 };
 var ElementHighlighter = class {
   constructor(win) {
@@ -644,15 +684,20 @@ var ElementHighlighter = class {
     container.className = "abledom-highlight";
   }
   highlight(element) {
-    const rect = element.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) {
+    if (!element) {
+      this._container && (this._container.style.display = "none");
       return;
     }
     const win = this._window;
     const container = this._container;
+    const rect = element.getBoundingClientRect();
+    if (!win || !container || rect.width === 0 || rect.height === 0) {
+      return;
+    }
+    const body = win.document.body;
     const style = container.style;
-    if (container.parentElement !== win.document.body) {
-      win.document.body.appendChild(container);
+    if (container.parentElement !== body) {
+      body.appendChild(container);
     }
     style.width = `${rect.width}px`;
     style.height = `${rect.height}px`;
@@ -660,8 +705,11 @@ var ElementHighlighter = class {
     style.left = `${rect.left}px`;
     container.style.display = "block";
   }
-  hide() {
-    this._container.style.display = "none";
+  dispose() {
+    var _a;
+    (_a = this._container) == null ? void 0 : _a.remove();
+    delete this._container;
+    delete this._window;
   }
 };
 function isAbleDOMUIElement(element) {
@@ -856,8 +904,9 @@ function getStackTrace() {
 
 // src/core.ts
 var AbleDOM = class {
-  constructor(win) {
+  constructor(win, props = {}) {
     __publicField(this, "_win");
+    __publicField(this, "_props");
     __publicField(this, "_observer");
     __publicField(this, "_clearValidationTimeout");
     __publicField(this, "_elementsWithNotifications", /* @__PURE__ */ new Set());
@@ -868,6 +917,7 @@ var AbleDOM = class {
     __publicField(this, "_rules", []);
     __publicField(this, "_startFunc");
     __publicField(this, "_isStarted", false);
+    __publicField(this, "_notificationsUI");
     __publicField(this, "_onFocusIn", (event) => {
       var _a;
       const target = event.target;
@@ -897,11 +947,18 @@ var AbleDOM = class {
     __publicField(this, "_notifyAsync", (rule, notification) => {
       this._addNotification(rule, notification);
     });
+    __publicField(this, "log", (...args) => {
+      var _a, _b, _c, _d;
+      return (_d = ((_a = this._props) == null ? void 0 : _a.log) || // In a multi-window application, just `console.error` could belong to a different window.
+      ((_c = (_b = this._win) == null ? void 0 : _b.console) == null ? void 0 : _c.error)) == null ? void 0 : _d.apply(null, args);
+    });
     this._win = win;
+    this._props = props;
     const _elementsToValidate = /* @__PURE__ */ new Set();
     const _elementsToRemove = /* @__PURE__ */ new Set();
-    win.document.addEventListener("focusin", this._onFocusIn, true);
-    win.document.addEventListener("focusout", this._onFocusOut, true);
+    const doc = win.document;
+    doc.addEventListener("focusin", this._onFocusIn, true);
+    doc.addEventListener("focusout", this._onFocusOut, true);
     this._observer = new MutationObserver((mutations) => {
       var _a;
       for (let mutation of mutations) {
@@ -939,12 +996,13 @@ var AbleDOM = class {
     });
     this._startFunc = () => {
       delete this._startFunc;
-      this._observer.observe(win.document, {
+      this._observer.observe(doc, {
         childList: true,
         subtree: true,
-        attributes: true
+        attributes: true,
+        characterData: true
       });
-      findTargets(win.document.body, false);
+      findTargets(doc.body, false);
       this._validate(_elementsToValidate);
       _elementsToValidate.clear();
     };
@@ -974,7 +1032,7 @@ var AbleDOM = class {
         return;
       }
       addTarget(node, removed);
-      const walker = win.document.createTreeWalker(
+      const walker = doc.createTreeWalker(
         node,
         NodeFilter.SHOW_ELEMENT,
         (node2) => {
@@ -1025,6 +1083,9 @@ var AbleDOM = class {
     }
   }
   _addNotification(rule, notification) {
+    if (!this._notificationsUI) {
+      this._notificationsUI = new NotificationsUI(this._win);
+    }
     const element = notification == null ? void 0 : notification.element;
     if (!notification) {
       this._removeNotification(element || this._win.document.body, rule);
@@ -1042,12 +1103,22 @@ var AbleDOM = class {
       }
       notificationUI = notifications.get(rule);
       if (!notificationUI) {
-        notificationUI = new NotificationUI(this._win, rule);
+        notificationUI = new NotificationUI(
+          this._win,
+          this,
+          rule,
+          this._notificationsUI
+        );
         notifications.set(rule, notificationUI);
       }
       this._elementsWithNotifications.add(element);
     } else {
-      notificationUI = new NotificationUI(this._win, rule);
+      notificationUI = new NotificationUI(
+        this._win,
+        this,
+        rule,
+        this._notificationsUI
+      );
     }
     notificationUI.update(notification);
   }
@@ -1181,17 +1252,20 @@ var AbleDOM = class {
     (_b = this._startFunc) == null ? void 0 : _b.call(this);
   }
   dispose() {
-    var _a, _b;
-    this._win.document.addEventListener("focusin", this._onFocusIn, true);
-    this._win.document.addEventListener("focusout", this._onFocusOut, true);
+    var _a, _b, _c;
+    const doc = this._win.document;
+    doc.addEventListener("focusin", this._onFocusIn, true);
+    doc.addEventListener("focusout", this._onFocusOut, true);
     this._remove(this._elementsWithNotifications);
     this._elementsWithNotifications.clear();
     this._dependantIdsByElement.clear();
     this._elementsDependingOnId.clear();
     this._idByElement.clear();
-    (_a = this._clearValidationTimeout) == null ? void 0 : _a.call(this);
+    (_a = this._notificationsUI) == null ? void 0 : _a.dispose();
+    delete this._notificationsUI;
+    (_b = this._clearValidationTimeout) == null ? void 0 : _b.call(this);
     for (const rule of this._rules) {
-      (_b = rule.stop) == null ? void 0 : _b.call(rule);
+      (_c = rule.stop) == null ? void 0 : _c.call(rule);
       ValidationRule.dispose(rule);
     }
     this._rules = [];
@@ -1215,7 +1289,7 @@ var AtomicRule = class extends ValidationRule {
     return matchesSelector(element, focusableElementSelector);
   }
   validate(element) {
-    const parentAtomic = document.evaluate(
+    const parentAtomic = element.ownerDocument.evaluate(
       `ancestor::*[
           @role = 'button' or 
           @role = 'checkbox' or 
@@ -1276,7 +1350,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
     __publicField(this, "anchored", true);
   }
   _isAriaHidden(element) {
-    return document.evaluate(
+    return element.ownerDocument.evaluate(
       `ancestor-or-self::*[@aria-hidden = 'true' or @hidden]`,
       element,
       null,
@@ -1303,7 +1377,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
     if ((_a = element.textContent) == null ? void 0 : _a.trim()) {
       return true;
     }
-    const labelNodes = document.evaluate(
+    const labelNodes = element.ownerDocument.evaluate(
       `(
       .//@aria-label | 
       .//text() | 
@@ -1330,6 +1404,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
   }
   validate(element) {
     var _a, _b;
+    const doc = element.ownerDocument;
     if (element.tagName === "INPUT") {
       const type = element.type;
       if (type === "hidden") {
@@ -1355,7 +1430,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
     if (this._hasLabel(element)) {
       return null;
     }
-    const labelledByNodes = document.evaluate(
+    const labelledByNodes = doc.evaluate(
       `.//@aria-labelledby[not(ancestor-or-self::*[@aria-hidden = 'true' or @hidden])]`,
       element,
       null,
@@ -1370,7 +1445,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
       }
     }
     for (const id of labelledByValues) {
-      const labelElement = document.getElementById(id);
+      const labelElement = doc.getElementById(id);
       if (labelElement && this._hasLabel(labelElement)) {
         return {
           dependsOnIds: new Set(labelledByValues)
@@ -1411,7 +1486,7 @@ var ExistingIdRule = class extends ValidationRule {
       return null;
     }
     for (const id of ids) {
-      if (document.getElementById(id)) {
+      if (element.ownerDocument.getElementById(id)) {
         return {
           dependsOnIds: new Set(ids)
         };
@@ -1476,13 +1551,14 @@ var FocusLostRule = class extends ValidationRule {
     if (!target || !win || event.relatedTarget || this._mouseEventTimer) {
       return null;
     }
+    const doc = win.document;
     const targetPosition = this._focusedElement === target ? this._focusedElementPosition : void 0;
     this._lastBlurStack = getStackTrace();
     this._focusedElement = void 0;
     this._focusedElementPosition = void 0;
     const focusLostTimer = win.setTimeout(() => {
       delete this._clearScheduledFocusLost;
-      if (win.document.body && (!win.document.activeElement || win.document.activeElement === win.document.body) && (!win.document.body.contains(target) || !isElementVisible(target))) {
+      if (doc.body && (!doc.activeElement || doc.activeElement === doc.body) && (!doc.body.contains(target) || !isElementVisible(target))) {
         this.notify({
           element: target,
           id: "focus-lost",
@@ -1557,15 +1633,16 @@ var BadFocusRule = class extends ValidationRule {
     if (!win) {
       return null;
     }
+    const doc = win.document;
     this._lastBlurStack = getStackTrace();
     (_a = this._clearCheckTimer) == null ? void 0 : _a.call(this);
     const checkTimer = win.setTimeout(() => {
       delete this._clearCheckTimer;
-      if (document.activeElement && !isElementVisible(document.activeElement)) {
+      if (doc.activeElement && !isElementVisible(doc.activeElement)) {
         this.notify({
           id: "bad-focus",
           message: "Focused stolen by invisible element.",
-          element: document.activeElement,
+          element: doc.activeElement,
           stack: this._lastBlurStack,
           relStack: this._lastFocusStack
         });