@oddbird/popover-polyfill - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/popover-fn.js

@@ -145,9 +145,9 @@ // src/observer.ts
     const target = event.target;
-    if (!(target instanceof Element))
+    if (!(target instanceof Element) || target?.shadowRoot) {
       return;
+    }
     const root = target.getRootNode();
-    if (root instanceof ShadowRoot) {
-      event.stopPropagation();
-    } else if (!(root instanceof Document))
+    if (!(root instanceof ShadowRoot || root instanceof Document)) {
       return;
+    }
     let effectedPopover = closestElement(
@@ -154,0 +154,0 @@ "[popover]",

dist/popover.iife.min.js

@@ -1,2 +0,2 @@
-"use strict";(()=>{var s=new Set,u=e=>t=>{t instanceof HTMLElement&&(t.hasAttribute("popover")&&e(t),t.querySelectorAll("[popover]").forEach(n=>{n instanceof HTMLElement&&e(n)}))},b=u(s.add.bind(s)),m=u(s.delete.bind(s)),w=e=>{e.addedNodes.length>0&&e.addedNodes.forEach(b),e.removedNodes.length>0&&e.removedNodes.forEach(m)},M=e=>{e.target instanceof HTMLElement&&(e.target.hasAttribute("popover")?s.add(e.target):s.delete(e.target))},L=e=>{e.forEach(t=>{switch(t.type){case"attributes":switch(t.attributeName){case"popover":M(t);break}break;case"childList":w(t);break}})},S=new MutationObserver(L),d=e=>{e===document&&e.querySelectorAll("[popover]").forEach(t=>{t instanceof HTMLElement&&s.add(t)}),S.observe(e,{attributeFilter:["popover"],childList:!0,subtree:!0})};function f(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}var h="Not supported on element that does not have valid popover attribute";function v(e){let t=Element.prototype.attachShadow;Element.prototype.attachShadow=function(n){let o=t.call(this,n);return e(o),o}}var E=(e,t)=>{let n=t.closest(e);if(n)return n;let o=t.getRootNode();return o===document||!(o instanceof ShadowRoot)?null:E(e,o.host)};function g(){let e=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(h,"NotSupportedError");if(e.has(this))throw new DOMException("Invalid on already-showing Popovers","InvalidStateError");this.classList.add(":open"),e.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(h,"NotSupportedError");if(!e.has(this))throw new DOMException("Invalid on already-hidden Popovers","InvalidStateError");this.classList.remove(":open"),e.delete(this)}}});let n=(o=>a=>{a.addEventListener("click",o)})(o=>{let a=o.target;if(!(a instanceof Element))return;let p=a.getRootNode();if(p instanceof ShadowRoot)o.stopPropagation();else if(!(p instanceof Document))return;let r=E("[popover]",a),i=a.closest("[popovertoggletarget],[popoverhidetarget],[popovershowtarget]"),l=i instanceof HTMLButtonElement;l&&i.hasAttribute("popovershowtarget")?(r=p.getElementById(i.getAttribute("popovershowtarget")||""),r&&r.popover&&!e.has(r)&&r.showPopover()):l&&i.hasAttribute("popoverhidetarget")?(r=p.getElementById(i.getAttribute("popoverhidetarget")||""),r&&r.popover&&e.has(r)&&r.hidePopover()):l&&i.hasAttribute("popovertoggletarget")&&(r=p.getElementById(i.getAttribute("popovertoggletarget")||""),r&&r.popover&&(e.has(r)?r.hidePopover():r.showPopover()));for(let c of[...s])c.matches('[popover="" i].\\:open, [popover=auto i].\\:open')&&c!==r&&c.hidePopover()});d(document),n(document),v(d),v(n)}f()||g();})();
+"use strict";(()=>{var s=new Set,u=e=>t=>{t instanceof HTMLElement&&(t.hasAttribute("popover")&&e(t),t.querySelectorAll("[popover]").forEach(n=>{n instanceof HTMLElement&&e(n)}))},b=u(s.add.bind(s)),m=u(s.delete.bind(s)),w=e=>{e.addedNodes.length>0&&e.addedNodes.forEach(b),e.removedNodes.length>0&&e.removedNodes.forEach(m)},M=e=>{e.target instanceof HTMLElement&&(e.target.hasAttribute("popover")?s.add(e.target):s.delete(e.target))},L=e=>{e.forEach(t=>{switch(t.type){case"attributes":switch(t.attributeName){case"popover":M(t);break}break;case"childList":w(t);break}})},S=new MutationObserver(L),d=e=>{e===document&&e.querySelectorAll("[popover]").forEach(t=>{t instanceof HTMLElement&&s.add(t)}),S.observe(e,{attributeFilter:["popover"],childList:!0,subtree:!0})};function f(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}var h="Not supported on element that does not have valid popover attribute";function v(e){let t=Element.prototype.attachShadow;Element.prototype.attachShadow=function(n){let o=t.call(this,n);return e(o),o}}var E=(e,t)=>{let n=t.closest(e);if(n)return n;let o=t.getRootNode();return o===document||!(o instanceof ShadowRoot)?null:E(e,o.host)};function g(){let e=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(h,"NotSupportedError");if(e.has(this))throw new DOMException("Invalid on already-showing Popovers","InvalidStateError");this.classList.add(":open"),e.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(h,"NotSupportedError");if(!e.has(this))throw new DOMException("Invalid on already-hidden Popovers","InvalidStateError");this.classList.remove(":open"),e.delete(this)}}});let n=(o=>a=>{a.addEventListener("click",o)})(o=>{let a=o.target;if(!(a instanceof Element)||a?.shadowRoot)return;let p=a.getRootNode();if(!(p instanceof ShadowRoot||p instanceof Document))return;let r=E("[popover]",a),i=a.closest("[popovertoggletarget],[popoverhidetarget],[popovershowtarget]"),l=i instanceof HTMLButtonElement;l&&i.hasAttribute("popovershowtarget")?(r=p.getElementById(i.getAttribute("popovershowtarget")||""),r&&r.popover&&!e.has(r)&&r.showPopover()):l&&i.hasAttribute("popoverhidetarget")?(r=p.getElementById(i.getAttribute("popoverhidetarget")||""),r&&r.popover&&e.has(r)&&r.hidePopover()):l&&i.hasAttribute("popovertoggletarget")&&(r=p.getElementById(i.getAttribute("popovertoggletarget")||""),r&&r.popover&&(e.has(r)?r.hidePopover():r.showPopover()));for(let c of[...s])c.matches('[popover="" i].\\:open, [popover=auto i].\\:open')&&c!==r&&c.hidePopover()});d(document),n(document),v(d),v(n)}f()||g();})();
 //# sourceMappingURL=popover.iife.min.js.map

dist/popover.js

@@ -145,9 +145,9 @@ // src/observer.ts
     const target = event.target;
-    if (!(target instanceof Element))
+    if (!(target instanceof Element) || target?.shadowRoot) {
       return;
+    }
     const root = target.getRootNode();
-    if (root instanceof ShadowRoot) {
-      event.stopPropagation();
-    } else if (!(root instanceof Document))
+    if (!(root instanceof ShadowRoot || root instanceof Document)) {
       return;
+    }
     let effectedPopover = closestElement(
@@ -154,0 +154,0 @@ "[popover]",

dist/popover.min.js

@@ -1,2 +0,2 @@
-var s=new Set,u=e=>t=>{t instanceof HTMLElement&&(t.hasAttribute("popover")&&e(t),t.querySelectorAll("[popover]").forEach(n=>{n instanceof HTMLElement&&e(n)}))},b=u(s.add.bind(s)),m=u(s.delete.bind(s)),w=e=>{e.addedNodes.length>0&&e.addedNodes.forEach(b),e.removedNodes.length>0&&e.removedNodes.forEach(m)},M=e=>{e.target instanceof HTMLElement&&(e.target.hasAttribute("popover")?s.add(e.target):s.delete(e.target))},L=e=>{e.forEach(t=>{switch(t.type){case"attributes":switch(t.attributeName){case"popover":M(t);break}break;case"childList":w(t);break}})},S=new MutationObserver(L),d=e=>{e===document&&e.querySelectorAll("[popover]").forEach(t=>{t instanceof HTMLElement&&s.add(t)}),S.observe(e,{attributeFilter:["popover"],childList:!0,subtree:!0})};function f(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}var h="Not supported on element that does not have valid popover attribute";function v(e){let t=Element.prototype.attachShadow;Element.prototype.attachShadow=function(n){let o=t.call(this,n);return e(o),o}}var E=(e,t)=>{let n=t.closest(e);if(n)return n;let o=t.getRootNode();return o===document||!(o instanceof ShadowRoot)?null:E(e,o.host)};function g(){let e=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(h,"NotSupportedError");if(e.has(this))throw new DOMException("Invalid on already-showing Popovers","InvalidStateError");this.classList.add(":open"),e.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(h,"NotSupportedError");if(!e.has(this))throw new DOMException("Invalid on already-hidden Popovers","InvalidStateError");this.classList.remove(":open"),e.delete(this)}}});let n=(o=>a=>{a.addEventListener("click",o)})(o=>{let a=o.target;if(!(a instanceof Element))return;let p=a.getRootNode();if(p instanceof ShadowRoot)o.stopPropagation();else if(!(p instanceof Document))return;let r=E("[popover]",a),i=a.closest("[popovertoggletarget],[popoverhidetarget],[popovershowtarget]"),l=i instanceof HTMLButtonElement;l&&i.hasAttribute("popovershowtarget")?(r=p.getElementById(i.getAttribute("popovershowtarget")||""),r&&r.popover&&!e.has(r)&&r.showPopover()):l&&i.hasAttribute("popoverhidetarget")?(r=p.getElementById(i.getAttribute("popoverhidetarget")||""),r&&r.popover&&e.has(r)&&r.hidePopover()):l&&i.hasAttribute("popovertoggletarget")&&(r=p.getElementById(i.getAttribute("popovertoggletarget")||""),r&&r.popover&&(e.has(r)?r.hidePopover():r.showPopover()));for(let c of[...s])c.matches('[popover="" i].\\:open, [popover=auto i].\\:open')&&c!==r&&c.hidePopover()});d(document),n(document),v(d),v(n)}f()||g();
+var s=new Set,u=e=>t=>{t instanceof HTMLElement&&(t.hasAttribute("popover")&&e(t),t.querySelectorAll("[popover]").forEach(n=>{n instanceof HTMLElement&&e(n)}))},b=u(s.add.bind(s)),m=u(s.delete.bind(s)),w=e=>{e.addedNodes.length>0&&e.addedNodes.forEach(b),e.removedNodes.length>0&&e.removedNodes.forEach(m)},M=e=>{e.target instanceof HTMLElement&&(e.target.hasAttribute("popover")?s.add(e.target):s.delete(e.target))},L=e=>{e.forEach(t=>{switch(t.type){case"attributes":switch(t.attributeName){case"popover":M(t);break}break;case"childList":w(t);break}})},S=new MutationObserver(L),d=e=>{e===document&&e.querySelectorAll("[popover]").forEach(t=>{t instanceof HTMLElement&&s.add(t)}),S.observe(e,{attributeFilter:["popover"],childList:!0,subtree:!0})};function f(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}var h="Not supported on element that does not have valid popover attribute";function v(e){let t=Element.prototype.attachShadow;Element.prototype.attachShadow=function(n){let o=t.call(this,n);return e(o),o}}var E=(e,t)=>{let n=t.closest(e);if(n)return n;let o=t.getRootNode();return o===document||!(o instanceof ShadowRoot)?null:E(e,o.host)};function g(){let e=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(h,"NotSupportedError");if(e.has(this))throw new DOMException("Invalid on already-showing Popovers","InvalidStateError");this.classList.add(":open"),e.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(h,"NotSupportedError");if(!e.has(this))throw new DOMException("Invalid on already-hidden Popovers","InvalidStateError");this.classList.remove(":open"),e.delete(this)}}});let n=(o=>a=>{a.addEventListener("click",o)})(o=>{let a=o.target;if(!(a instanceof Element)||a?.shadowRoot)return;let p=a.getRootNode();if(!(p instanceof ShadowRoot||p instanceof Document))return;let r=E("[popover]",a),i=a.closest("[popovertoggletarget],[popoverhidetarget],[popovershowtarget]"),l=i instanceof HTMLButtonElement;l&&i.hasAttribute("popovershowtarget")?(r=p.getElementById(i.getAttribute("popovershowtarget")||""),r&&r.popover&&!e.has(r)&&r.showPopover()):l&&i.hasAttribute("popoverhidetarget")?(r=p.getElementById(i.getAttribute("popoverhidetarget")||""),r&&r.popover&&e.has(r)&&r.hidePopover()):l&&i.hasAttribute("popovertoggletarget")&&(r=p.getElementById(i.getAttribute("popovertoggletarget")||""),r&&r.popover&&(e.has(r)?r.hidePopover():r.showPopover()));for(let c of[...s])c.matches('[popover="" i].\\:open, [popover=auto i].\\:open')&&c!==r&&c.hidePopover()});d(document),n(document),v(d),v(n)}f()||g();
 //# sourceMappingURL=popover.min.js.map

package.json

 {
   "name": "@oddbird/popover-polyfill",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Popover Attribute Polyfill",
@@ -93,3 +93,3 @@ "license": "BSD-3-Clause",
     "@typescript-eslint/parser": "^5.48.2",
-    "esbuild": "^0.17.2",
+    "esbuild": "^0.17.3",
     "eslint": "^8.32.0",
@@ -96,0 +96,0 @@ "eslint-config-prettier": "^8.6.0",

README.md

 # Popover Attribute Polyfill
 
-[Explainer](https://open-ui.org/components/popup.research.explainer)
+[Explainer](https://open-ui.org/components/popover.research.explainer)
 
@@ -5,0 +5,0 @@ This polyfills the HTML `popover` attribute and `showPopover`/`hidePopover` methods onto HTMLElement.

src/popover.ts

@@ -101,7 +101,9 @@ import { observePopoversMutations, popovers } from './observer.js';
     const target = event.target;
-    if (!(target instanceof Element)) return;
+    if (!(target instanceof Element) || target?.shadowRoot) {
+      return;
+    }
     const root = target.getRootNode();
-    if (root instanceof ShadowRoot) {
-      event.stopPropagation();
-    } else if (!(root instanceof Document)) return;
+    if (!(root instanceof ShadowRoot || root instanceof Document)) {
+      return;
+    }
     let effectedPopover = closestElement(
@@ -108,0 +110,0 @@ '[popover]',

No alert changes

Improved metrics

Lines of code

709

increased by0.14%

Worsened metrics

Total package byte prevSize

81437

decreased by-0.03%

No dependency changes