inclusive-elements 0.4.1 → 0.4.2

package/README.md

@@ -9,7 +9,7 @@ Basic interactive UI patterns like popup menus, tooltips, and modals are surpris
 `inclusive-elements` provides those basic behaviors in the form of Custom Elements, without any of the cruft. They are:
 
 -   **🦮 Accessible.** Designed following the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) so everyone can use them.
--   **🌳 Lightweight.** 3kB gzipped with minimal dependencies. Less if you tree-shake only the elements you need.
+-   **🌳 Lightweight.** Tree-shake only the elements you need.
 -   **🎨 Unstyled.** Easily integrate with your design bottom-up without having to fight defaults.
 -   **🚀 Easy to use.** Simple API, works with any framework that supports Custom Elements.
 

package/dist/inclusive-elements10.js

@@ -1,16 +1,18 @@
 var d = Object.defineProperty;
 var l = (o, i, t) => i in o ? d(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
 var e = (o, i, t) => (l(o, typeof i != "symbol" ? i + "" : i, t), t);
-import { computePosition as p, shift as u, flip as c } from "@floating-ui/dom";
-import { hello as m, goodbye as v } from "hello-goodbye";
+import { autoUpdate as p, computePosition as u, shift as c, flip as m } from "@floating-ui/dom";
+import { hello as v, goodbye as b } from "hello-goodbye";
 const r = class extends HTMLElement {
   constructor() {
     super(...arguments);
     e(this, "parent");
     e(this, "tooltip");
     e(this, "timeout");
-    e(this, "observer");
+    e(this, "disabledObserver");
     e(this, "showing", !1);
+    e(this, "cleanup");
+    e(this, "prevInnerHTML");
     e(this, "onMouseEnter", this.afterDelay.bind(this, this.show));
     e(this, "onFocus", this.show.bind(this));
     e(this, "onMouseLeave", this.afterDelay.bind(this, this.hide));
@@ -23,15 +25,15 @@ const r = class extends HTMLElement {
     });
   }
   connectedCallback() {
-    this.parent = this.parentNode, this.parent && (this.parent.addEventListener("mouseenter", this.onMouseEnter), this.parent.addEventListener("focus", this.onFocus), this.parent.addEventListener("mouseleave", this.onMouseLeave), this.parent.addEventListener("blur", this.onBlur), this.parent.addEventListener("pointerup", this.onPointerUp), this.observer = new MutationObserver((t) => {
+    this.parent = this.parentNode, this.parent && (this.parent.addEventListener("mouseenter", this.onMouseEnter), this.parent.addEventListener("focus", this.onFocus), this.parent.addEventListener("mouseleave", this.onMouseLeave), this.parent.addEventListener("blur", this.onBlur), this.parent.addEventListener("pointerup", this.onPointerUp), this.disabledObserver = new MutationObserver((t) => {
       t.forEach((s) => {
         s.attributeName === "disabled" && this.hide();
       });
-    }), this.observer.observe(this.parent, { attributes: !0 })), document.addEventListener("keydown", this.onKeyDown), document.addEventListener("scroll", this.onBlur);
+    }), this.disabledObserver.observe(this.parent, { attributes: !0 })), document.addEventListener("keydown", this.onKeyDown), document.addEventListener("scroll", this.onBlur);
   }
   disconnectedCallback() {
     var t;
-    this.tooltip && (this.tooltip.remove(), this.tooltip = void 0), this.parent && (this.parent.removeEventListener("mouseenter", this.onMouseEnter), this.parent.removeEventListener("focus", this.onFocus), this.parent.removeEventListener("mouseleave", this.onMouseLeave), this.parent.removeEventListener("blur", this.onBlur), this.parent.removeEventListener("pointerup", this.onPointerUp), this.parent = void 0), document.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("scroll", this.onBlur), (t = this.observer) == null || t.disconnect(), clearTimeout(this.timeout);
+    this.tooltip && (this.tooltip.remove(), this.tooltip = void 0), this.parent && (this.parent.removeEventListener("mouseenter", this.onMouseEnter), this.parent.removeEventListener("focus", this.onFocus), this.parent.removeEventListener("mouseleave", this.onMouseLeave), this.parent.removeEventListener("blur", this.onBlur), this.parent.removeEventListener("pointerup", this.onPointerUp), this.parent = void 0), document.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("scroll", this.onBlur), (t = this.disabledObserver) == null || t.disconnect(), clearTimeout(this.timeout);
   }
   get disabled() {
     return this.hasAttribute("disabled");
@@ -43,18 +45,23 @@ const r = class extends HTMLElement {
     if (this.disabled)
       return;
     const t = this.createTooltip();
-    clearTimeout(this.timeout), this.showing || (t.hidden = !1, m(t), this.showing = !0), t.innerHTML !== this.innerHTML && (t.innerHTML = this.innerHTML), t.style.position = "absolute", p(this.parent, t, {
-      placement: this.getAttribute("placement") || r.placement,
-      middleware: [u(), c()]
-    }).then(({ x: s, y: h, placement: a }) => {
-      Object.assign(t.style, {
-        left: `${s}px`,
-        top: `${h}px`
-      }), t.dataset.placement = a;
-    });
+    clearTimeout(this.timeout), this.showing || (t.hidden = !1, v(t), this.showing = !0), this.innerHTML !== this.prevInnerHTML && (this.prevInnerHTML = t.innerHTML = this.innerHTML), t.style.position = "absolute", this.cleanup = p(
+      this.parent,
+      t,
+      () => u(this.parent, t, {
+        placement: this.getAttribute("placement") || r.placement,
+        middleware: [c(), m()]
+      }).then(({ x: s, y: h, placement: a }) => {
+        Object.assign(t.style, {
+          left: `${s}px`,
+          top: `${h}px`
+        }), t.dataset.placement = a;
+      })
+    );
   }
   hide() {
-    clearTimeout(this.timeout), this.showing && (this.showing = !1, v(this.tooltip).then(() => {
+    var t;
+    clearTimeout(this.timeout), (t = this.cleanup) == null || t.call(this), this.showing && (this.showing = !1, b(this.tooltip).then(() => {
       this.tooltip && (this.tooltip.hidden = !0);
     }));
   }

package/dist/types/tooltip/tooltip.d.ts

@@ -5,8 +5,10 @@ export default class TooltipElement extends HTMLElement {
     private parent?;
     private tooltip?;
     private timeout?;
-    private observer?;
+    private disabledObserver?;
     private showing;
+    private cleanup?;
+    private prevInnerHTML?;
     private onMouseEnter;
     private onFocus;
     private onMouseLeave;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inclusive-elements",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
     "module": "dist/inclusive-elements.js",
     "type": "module",