@oddbird/popover-polyfill - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/popover-fn.js

@@ -61,10 +61,13 @@ // src/popover.ts
     const target = event.target;
-    if (!(target instanceof HTMLElement))
+    if (!(target instanceof Element))
       return;
     const doc = target.ownerDocument;
     let effectedPopover = target.closest("[popover]");
-    const isButton = target instanceof HTMLButtonElement;
-    if (isButton && target.hasAttribute("popovershowtarget")) {
+    const button = target.closest(
+      "[popovertoggletarget],[popoverhidetarget],[popovershowtarget]"
+    );
+    const isButton = button instanceof HTMLButtonElement;
+    if (isButton && button.hasAttribute("popovershowtarget")) {
       effectedPopover = doc.getElementById(
-        target.getAttribute("popovershowtarget") || ""
+        button.getAttribute("popovershowtarget") || ""
       );
@@ -74,5 +77,5 @@ if (effectedPopover && effectedPopover.popover && !visibleElements.has(effectedPopover)) {
       }
-    } else if (isButton && target.hasAttribute("popoverhidetarget")) {
+    } else if (isButton && button.hasAttribute("popoverhidetarget")) {
       effectedPopover = doc.getElementById(
-        target.getAttribute("popoverhidetarget") || ""
+        button.getAttribute("popoverhidetarget") || ""
       );
@@ -82,5 +85,5 @@ if (effectedPopover && effectedPopover.popover && visibleElements.has(effectedPopover)) {
       }
-    } else if (isButton && target.hasAttribute("popovertoggletarget")) {
+    } else if (isButton && button.hasAttribute("popovertoggletarget")) {
       effectedPopover = doc.getElementById(
-        target.getAttribute("popovertoggletarget") || ""
+        button.getAttribute("popovertoggletarget") || ""
       );
@@ -87,0 +90,0 @@ if (effectedPopover && effectedPopover.popover) {

dist/popover.iife.min.js

@@ -1,2 +0,2 @@
-"use strict";(()=>{function a(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}var s="Not supported on element that does not have valid popover attribute";function l(){let r=new WeakSet;Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){let o=(this.getAttribute("popover")||"").toLowerCase();return o==="manual"?"manual":o===""||o=="auto"?"auto":null},set(o){this.setAttribute("popover",o)}},showPopover:{enumerable:!0,configurable:!0,value(){if(!this.popover)throw new DOMException(s,"NotSupportedError");if(r.has(this))throw new DOMException("Invalid on already-showing Popovers","InvalidStateError");this.classList.add(":open"),r.add(this),this.popover==="auto"&&(this.hasAttribute("autofocus")?this:this.querySelector("[autofocus]"))?.focus()}},hidePopover:{enumerable:!0,configurable:!0,value(){if(!this.popover)throw new DOMException(s,"NotSupportedError");if(!r.has(this))throw new DOMException("Invalid on already-hidden Popovers","InvalidStateError");this.classList.remove(":open"),r.delete(this)}}}),document.addEventListener("click",o=>{let t=o.target;if(!(t instanceof HTMLElement))return;let p=t.ownerDocument,e=t.closest("[popover]"),n=t instanceof HTMLButtonElement;n&&t.hasAttribute("popovershowtarget")?(e=p.getElementById(t.getAttribute("popovershowtarget")||""),e&&e.popover&&!r.has(e)&&e.showPopover()):n&&t.hasAttribute("popoverhidetarget")?(e=p.getElementById(t.getAttribute("popoverhidetarget")||""),e&&e.popover&&r.has(e)&&e.hidePopover()):n&&t.hasAttribute("popovertoggletarget")&&(e=p.getElementById(t.getAttribute("popovertoggletarget")||""),e&&e.popover&&(r.has(e)?e.hidePopover():e.showPopover()));for(let i of p.querySelectorAll('[popover="" i].\\:open, [popover=auto i].\\:open'))i instanceof HTMLElement&&i!==e&&i.hidePopover()})}a()||l();})();
+"use strict";(()=>{function l(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}var a="Not supported on element that does not have valid popover attribute";function u(){let o=new WeakSet;Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){let t=(this.getAttribute("popover")||"").toLowerCase();return t==="manual"?"manual":t===""||t=="auto"?"auto":null},set(t){this.setAttribute("popover",t)}},showPopover:{enumerable:!0,configurable:!0,value(){if(!this.popover)throw new DOMException(a,"NotSupportedError");if(o.has(this))throw new DOMException("Invalid on already-showing Popovers","InvalidStateError");this.classList.add(":open"),o.add(this),this.popover==="auto"&&(this.hasAttribute("autofocus")?this:this.querySelector("[autofocus]"))?.focus()}},hidePopover:{enumerable:!0,configurable:!0,value(){if(!this.popover)throw new DOMException(a,"NotSupportedError");if(!o.has(this))throw new DOMException("Invalid on already-hidden Popovers","InvalidStateError");this.classList.remove(":open"),o.delete(this)}}}),document.addEventListener("click",t=>{let p=t.target;if(!(p instanceof Element))return;let n=p.ownerDocument,e=p.closest("[popover]"),r=p.closest("[popovertoggletarget],[popoverhidetarget],[popovershowtarget]"),i=r instanceof HTMLButtonElement;i&&r.hasAttribute("popovershowtarget")?(e=n.getElementById(r.getAttribute("popovershowtarget")||""),e&&e.popover&&!o.has(e)&&e.showPopover()):i&&r.hasAttribute("popoverhidetarget")?(e=n.getElementById(r.getAttribute("popoverhidetarget")||""),e&&e.popover&&o.has(e)&&e.hidePopover()):i&&r.hasAttribute("popovertoggletarget")&&(e=n.getElementById(r.getAttribute("popovertoggletarget")||""),e&&e.popover&&(o.has(e)?e.hidePopover():e.showPopover()));for(let s of n.querySelectorAll('[popover="" i].\\:open, [popover=auto i].\\:open'))s instanceof HTMLElement&&s!==e&&s.hidePopover()})}l()||u();})();
 //# sourceMappingURL=popover.iife.min.js.map

dist/popover.js

@@ -61,10 +61,13 @@ // src/popover.ts
     const target = event.target;
-    if (!(target instanceof HTMLElement))
+    if (!(target instanceof Element))
       return;
     const doc = target.ownerDocument;
     let effectedPopover = target.closest("[popover]");
-    const isButton = target instanceof HTMLButtonElement;
-    if (isButton && target.hasAttribute("popovershowtarget")) {
+    const button = target.closest(
+      "[popovertoggletarget],[popoverhidetarget],[popovershowtarget]"
+    );
+    const isButton = button instanceof HTMLButtonElement;
+    if (isButton && button.hasAttribute("popovershowtarget")) {
       effectedPopover = doc.getElementById(
-        target.getAttribute("popovershowtarget") || ""
+        button.getAttribute("popovershowtarget") || ""
       );
@@ -74,5 +77,5 @@ if (effectedPopover && effectedPopover.popover && !visibleElements.has(effectedPopover)) {
       }
-    } else if (isButton && target.hasAttribute("popoverhidetarget")) {
+    } else if (isButton && button.hasAttribute("popoverhidetarget")) {
       effectedPopover = doc.getElementById(
-        target.getAttribute("popoverhidetarget") || ""
+        button.getAttribute("popoverhidetarget") || ""
       );
@@ -82,5 +85,5 @@ if (effectedPopover && effectedPopover.popover && visibleElements.has(effectedPopover)) {
       }
-    } else if (isButton && target.hasAttribute("popovertoggletarget")) {
+    } else if (isButton && button.hasAttribute("popovertoggletarget")) {
       effectedPopover = doc.getElementById(
-        target.getAttribute("popovertoggletarget") || ""
+        button.getAttribute("popovertoggletarget") || ""
       );
@@ -87,0 +90,0 @@ if (effectedPopover && effectedPopover.popover) {

dist/popover.min.js

@@ -1,2 +0,2 @@
-function a(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}var s="Not supported on element that does not have valid popover attribute";function l(){let r=new WeakSet;Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){let o=(this.getAttribute("popover")||"").toLowerCase();return o==="manual"?"manual":o===""||o=="auto"?"auto":null},set(o){this.setAttribute("popover",o)}},showPopover:{enumerable:!0,configurable:!0,value(){if(!this.popover)throw new DOMException(s,"NotSupportedError");if(r.has(this))throw new DOMException("Invalid on already-showing Popovers","InvalidStateError");this.classList.add(":open"),r.add(this),this.popover==="auto"&&(this.hasAttribute("autofocus")?this:this.querySelector("[autofocus]"))?.focus()}},hidePopover:{enumerable:!0,configurable:!0,value(){if(!this.popover)throw new DOMException(s,"NotSupportedError");if(!r.has(this))throw new DOMException("Invalid on already-hidden Popovers","InvalidStateError");this.classList.remove(":open"),r.delete(this)}}}),document.addEventListener("click",o=>{let t=o.target;if(!(t instanceof HTMLElement))return;let p=t.ownerDocument,e=t.closest("[popover]"),n=t instanceof HTMLButtonElement;n&&t.hasAttribute("popovershowtarget")?(e=p.getElementById(t.getAttribute("popovershowtarget")||""),e&&e.popover&&!r.has(e)&&e.showPopover()):n&&t.hasAttribute("popoverhidetarget")?(e=p.getElementById(t.getAttribute("popoverhidetarget")||""),e&&e.popover&&r.has(e)&&e.hidePopover()):n&&t.hasAttribute("popovertoggletarget")&&(e=p.getElementById(t.getAttribute("popovertoggletarget")||""),e&&e.popover&&(r.has(e)?e.hidePopover():e.showPopover()));for(let i of p.querySelectorAll('[popover="" i].\\:open, [popover=auto i].\\:open'))i instanceof HTMLElement&&i!==e&&i.hidePopover()})}a()||l();
+function l(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}var a="Not supported on element that does not have valid popover attribute";function u(){let o=new WeakSet;Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){let t=(this.getAttribute("popover")||"").toLowerCase();return t==="manual"?"manual":t===""||t=="auto"?"auto":null},set(t){this.setAttribute("popover",t)}},showPopover:{enumerable:!0,configurable:!0,value(){if(!this.popover)throw new DOMException(a,"NotSupportedError");if(o.has(this))throw new DOMException("Invalid on already-showing Popovers","InvalidStateError");this.classList.add(":open"),o.add(this),this.popover==="auto"&&(this.hasAttribute("autofocus")?this:this.querySelector("[autofocus]"))?.focus()}},hidePopover:{enumerable:!0,configurable:!0,value(){if(!this.popover)throw new DOMException(a,"NotSupportedError");if(!o.has(this))throw new DOMException("Invalid on already-hidden Popovers","InvalidStateError");this.classList.remove(":open"),o.delete(this)}}}),document.addEventListener("click",t=>{let p=t.target;if(!(p instanceof Element))return;let n=p.ownerDocument,e=p.closest("[popover]"),r=p.closest("[popovertoggletarget],[popoverhidetarget],[popovershowtarget]"),i=r instanceof HTMLButtonElement;i&&r.hasAttribute("popovershowtarget")?(e=n.getElementById(r.getAttribute("popovershowtarget")||""),e&&e.popover&&!o.has(e)&&e.showPopover()):i&&r.hasAttribute("popoverhidetarget")?(e=n.getElementById(r.getAttribute("popoverhidetarget")||""),e&&e.popover&&o.has(e)&&e.hidePopover()):i&&r.hasAttribute("popovertoggletarget")&&(e=n.getElementById(r.getAttribute("popovertoggletarget")||""),e&&e.popover&&(o.has(e)?e.hidePopover():e.showPopover()));for(let s of n.querySelectorAll('[popover="" i].\\:open, [popover=auto i].\\:open'))s instanceof HTMLElement&&s!==e&&s.hidePopover()})}l()||u();
 //# sourceMappingURL=popover.min.js.map

package.json

 {
   "name": "@oddbird/popover-polyfill",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Popover Attribute Polyfill",
@@ -89,7 +89,8 @@ "license": "BSD-3-Clause",
   "devDependencies": {
-    "@playwright/test": "^1.27.1",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "esbuild": "^0.15.13",
-    "eslint": "^8.27.0",
+    "@playwright/test": "^1.28.1",
+    "@types/node": "^18.11.13",
+    "@typescript-eslint/eslint-plugin": "^5.46.0",
+    "@typescript-eslint/parser": "^5.46.0",
+    "esbuild": "^0.16.4",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
@@ -100,10 +101,10 @@ "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "husky": "^8.0.0",
-    "lint-staged": "^13.0.3",
+    "husky": "^8.0.2",
+    "lint-staged": "^13.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.1",
     "stylelint-config-standard": "^29.0.0",
     "stylis": "^4.1.3",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.4"
   },
@@ -110,0 +111,0 @@ "lint-staged": {

src/popover.ts

@@ -71,11 +71,14 @@ export function isSupported() {
     const target = event.target;
-    if (!(target instanceof HTMLElement)) return;
+    if (!(target instanceof Element)) return;
     const doc = target.ownerDocument;
     let effectedPopover: HTMLElement | null = target.closest('[popover]');
-    const isButton = target instanceof HTMLButtonElement;
+    const button = target.closest(
+      '[popovertoggletarget],[popoverhidetarget],[popovershowtarget]',
+    );
+    const isButton = button instanceof HTMLButtonElement;
 
     // Handle Popover triggers
-    if (isButton && target.hasAttribute('popovershowtarget')) {
+    if (isButton && button.hasAttribute('popovershowtarget')) {
       effectedPopover = doc.getElementById(
-        target.getAttribute('popovershowtarget') || '',
+        button.getAttribute('popovershowtarget') || '',
       );
@@ -90,5 +93,5 @@
       }
-    } else if (isButton && target.hasAttribute('popoverhidetarget')) {
+    } else if (isButton && button.hasAttribute('popoverhidetarget')) {
       effectedPopover = doc.getElementById(
-        target.getAttribute('popoverhidetarget') || '',
+        button.getAttribute('popoverhidetarget') || '',
       );
@@ -103,5 +106,5 @@
       }
-    } else if (isButton && target.hasAttribute('popovertoggletarget')) {
+    } else if (isButton && button.hasAttribute('popovertoggletarget')) {
       effectedPopover = doc.getElementById(
-        target.getAttribute('popovertoggletarget') || '',
+        button.getAttribute('popovertoggletarget') || '',
       );
@@ -108,0 +111,0 @@

No alert changes

Improved metrics

Total package byte prevSize

48619

increased by2.34%

Lines of code

419

increased by2.2%

Worsened metrics

Dev dependency count

19

increased by5.56%

No dependency changes