@oddbird/popover-polyfill - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/popover-fn.js

@@ -81,5 +81,3 @@ // src/events.ts
   const clickedPopover = nearestInclusiveOpenPopover(target);
-  const invokerPopover = nearestInclusiveOpenPopover(
-    target.popoverTargetElement
-  );
+  const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);
   if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) {
@@ -93,10 +91,26 @@ return clickedPopover;
 }
-function nearestInclusiveOpenPopover(target) {
-  if (!target)
-    return;
-  return closestShadowPenetrating(
-    '[popover="" i].\\:open, [popover=auto i].\\:open',
-    target
-  );
+function nearestInclusiveOpenPopover(node) {
+  while (node) {
+    if (node instanceof HTMLElement && node.popover === "auto" && visibilityState.get(node) === "showing") {
+      return node;
+    }
+    node = node.parentElement || node.getRootNode();
+    if (node instanceof ShadowRoot)
+      node = node.host;
+    if (node instanceof Document)
+      return;
+  }
 }
+function nearestInclusiveTargetPopoverForInvoker(node) {
+  while (node) {
+    const nodePopover = node.popoverTargetElement;
+    if (nodePopover)
+      return nodePopover;
+    node = node.parentElement || node.getRootNode();
+    if (node instanceof ShadowRoot)
+      node = node.host;
+    if (node instanceof Document)
+      return;
+  }
+}
 function topMostPopoverAncestor(newPopover) {
@@ -308,13 +322,2 @@ const popoverPositions = /* @__PURE__ */ new Map();
 }
-function closestShadowPenetrating(selector, target) {
-  const found = target.closest(selector);
-  if (found) {
-    return found;
-  }
-  const root = target.getRootNode();
-  if (root === document || !(root instanceof ShadowRoot)) {
-    return;
-  }
-  return closestShadowPenetrating(selector, root.host);
-}
 var initialAriaExpandedValue = /* @__PURE__ */ new WeakMap();
@@ -321,0 +324,0 @@ function setInvokerAriaExpanded(el, force = false) {

dist/popover.iife.min.js

@@ -1,2 +0,2 @@
-"use strict";(()=>{var l=class extends Event{constructor(o,{oldState:r="",newState:s="",...n}={}){super(o,n);this.oldState=String(r||""),this.newState=String(s||"")}},P=new WeakMap;function L(e,t,o){P.set(e,setTimeout(()=>{P.has(e)&&e.dispatchEvent(new l("toggle",{cancelable:!1,oldState:t,newState:o}))},0))}var v=new WeakMap,u=new WeakMap,d=new WeakMap;function E(e){return d.get(e)||"hidden"}var m=new WeakMap;function S(e){let t=e.popoverTargetElement;if(!t)return;let o=E(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?f(t,!0,!0):c(t,!1)&&(m.set(t,e),M(t)))}function c(e,t){return!(e.popover!=="auto"&&e.popover!=="manual"||!e.isConnected||t&&E(e)!=="showing"||!t&&E(e)!=="hidden"||e instanceof HTMLDialogElement&&e.hasAttribute("open")||document.fullscreenElement===e)}function y(e){return e?Array.from(u.get(e.ownerDocument)||[]).indexOf(e)+1:0}function W(e){let t=b(e),o=b(e.popoverTargetElement);return y(t)>y(o)?t:o}function h(e){return Array.from(u.get(e)||[]).pop()||null}function b(e){if(e)return x('[popover="" i].\\:open, [popover=auto i].\\:open',e)}function B(e){let t=new Map,o=0,r=e.ownerDocument;for(let i of u.get(r)||[])t.set(i,o),o+=1;t.set(e,o),o+=1;let s=null;function n(i){let a=b(i);if(a===null)return null;let p=t.get(a);(s===null||t.get(s)<p)&&(s=a)}return n(e?.parentElement),s}function F(e){return e.hidden||(e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||e instanceof HTMLOptGroupElement||e instanceof HTMLOptionElement||e instanceof HTMLFieldSetElement)&&e.disabled||e instanceof HTMLInputElement&&e.type==="hidden"||e instanceof HTMLAnchorElement&&e.href===""?!1:e.tabIndex!==-1}function N(e){if(e.shadowRoot&&e.shadowRoot.delegatesFocus!==!0)return null;let t=e;t.shadowRoot&&(t=t.shadowRoot);let o=t.querySelector("[autofocus]");if(o)return o;let r=e.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),s=r.currentNode;for(;s;){if(F(s))return s;s=r.nextNode()}}function O(e){N(e)?.focus()}var T=new WeakMap;function M(e){if(!c(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new l("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!c(e,!1))return;let o=!1;if(e.popover==="auto"){let s=e.getAttribute("popover"),n=B(e)||t;if(g(n,!1,!0),s!==e.getAttribute("popover")||!c(e,!1))return}h(t)||(o=!0),T.delete(e);let r=t.activeElement;e.classList.add(":open"),d.set(e,"showing"),v.has(t)||v.set(t,new Set),v.get(t).add(e),O(e),e.popover==="auto"&&(u.has(t)||u.set(t,new Set),u.get(t).add(e),D(m.get(e),!0)),o&&r&&e.popover==="auto"&&T.set(e,r),L(e,"closed","open")}function f(e,t=!1,o=!1){if(!c(e,!0))return;let r=e.ownerDocument;if(e.popover==="auto"&&(g(e,t,o),!c(e,!0))||(D(m.get(e),!1),m.delete(e),o&&(e.dispatchEvent(new l("beforetoggle",{oldState:"open",newState:"closed"})),!c(e,!0))))return;v.get(r)?.delete(e),u.get(r)?.delete(e),e.classList.remove(":open"),d.set(e,"hidden"),o&&L(e,"open","closed");let s=T.get(e);s&&(T.delete(e),t&&s.focus())}function k(e,t=!1,o=!1){let r=h(e);for(;r;)f(r,t,o),r=h(e)}function g(e,t,o){let r=e.ownerDocument||e;if(e instanceof Document)return k(r,t,o);let s=null,n=!1;for(let i of u.get(r)||[])if(i===e)n=!0;else if(n){s=i;break}if(!n)return k(r,t,o);for(;s&&E(s)==="showing"&&u.get(r)?.size;)f(s,t,o)}var w=new WeakMap;function A(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!h(o))return;let s=W(t);if(s&&e.type==="pointerdown")w.set(o,s);else if(e.type==="pointerup"){let n=w.get(o)===s;w.delete(o),n&&g(s||o,!1,!0)}}function x(e,t){let o=t.closest(e);if(o)return o;let r=t.getRootNode();if(!(r===document||!(r instanceof ShadowRoot)))return x(e,r.host)}var H=new WeakMap;function D(e,t=!1){if(!e)return;H.has(e)||H.set(e,e.getAttribute("aria-expanded"));let o=e.popoverTargetElement;if(o&&o.popover==="auto")e.setAttribute("aria-expanded",String(t));else{let r=H.get(e);r?e.setAttribute("aria-expanded",r):e.removeAttribute("aria-expanded")}}function I(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function R(){window.ToggleEvent=window.ToggleEvent||l,Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n)}},showPopover:{enumerable:!0,configurable:!0,value(){M(this)}},hidePopover:{enumerable:!0,configurable:!0,value(){f(this,!0,!0)}},togglePopover:{enumerable:!0,configurable:!0,value(n){d.get(this)==="showing"&&n===void 0||n===!1?f(this,!0,!0):(n===void 0||n===!0)&&M(this)}}});let e=new WeakMap;function t(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(i){if(i===null)this.removeAttribute("popovertarget"),e.delete(this);else if(i instanceof Element)this.setAttribute("popovertarget",""),e.set(this,i);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let i=e.get(this);if(i?.isConnected||e.delete(this),i)return i;let a=this.getRootNode(),p=this.getAttribute("popovertarget");return(a instanceof Document||a instanceof ShadowRoot)&&p&&a.getElementById(p)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let i=(this.getAttribute("popovertargetaction")||"").toLowerCase();return i==="show"||i==="hide"?i:"toggle"},set(i){this.setAttribute("popovertargetaction",i)}}})}t(HTMLButtonElement),t(HTMLInputElement);let o=n=>{if(!n.isTrusted)return;let i=n.composedPath()[0];if(!(i instanceof Element)||i?.shadowRoot)return;let a=i.getRootNode();if(!(a instanceof ShadowRoot||a instanceof Document))return;let p=i.closest("[popovertargetaction],[popovertarget]");if(p){S(p);return}},r=n=>{let i=n.key,a=n.target;a&&(i==="Escape"||i==="Esc")&&g(a.ownerDocument,!0,!0)};(n=>{n.addEventListener("click",o),n.addEventListener("keydown",r),n.addEventListener("pointerdown",A),n.addEventListener("pointerup",A)})(document)}I()||R();})();
+"use strict";(()=>{var u=class extends Event{constructor(o,{oldState:i="",newState:s="",...n}={}){super(o,n);this.oldState=String(i||""),this.newState=String(s||"")}},A=new WeakMap;function L(e,t,o){A.set(e,setTimeout(()=>{A.has(e)&&e.dispatchEvent(new u("toggle",{cancelable:!1,oldState:t,newState:o}))},0))}var v=new WeakMap,l=new WeakMap,f=new WeakMap;function E(e){return f.get(e)||"hidden"}var m=new WeakMap;function y(e){let t=e.popoverTargetElement;if(!t)return;let o=E(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?d(t,!0,!0):c(t,!1)&&(m.set(t,e),M(t)))}function c(e,t){return!(e.popover!=="auto"&&e.popover!=="manual"||!e.isConnected||t&&E(e)!=="showing"||!t&&E(e)!=="hidden"||e instanceof HTMLDialogElement&&e.hasAttribute("open")||document.fullscreenElement===e)}function P(e){return e?Array.from(l.get(e.ownerDocument)||[]).indexOf(e)+1:0}function R(e){let t=S(e),o=N(e);return P(t)>P(o)?t:o}function h(e){return Array.from(l.get(e)||[]).pop()||null}function S(e){for(;e;){if(e instanceof HTMLElement&&e.popover==="auto"&&f.get(e)==="showing")return e;if(e=e.parentElement||e.getRootNode(),e instanceof ShadowRoot&&(e=e.host),e instanceof Document)return}}function N(e){for(;e;){let t=e.popoverTargetElement;if(t)return t;if(e=e.parentElement||e.getRootNode(),e instanceof ShadowRoot&&(e=e.host),e instanceof Document)return}}function F(e){let t=new Map,o=0,i=e.ownerDocument;for(let r of l.get(i)||[])t.set(r,o),o+=1;t.set(e,o),o+=1;let s=null;function n(r){let a=S(r);if(a===null)return null;let p=t.get(a);(s===null||t.get(s)<p)&&(s=a)}return n(e?.parentElement),s}function W(e){return e.hidden||(e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||e instanceof HTMLOptGroupElement||e instanceof HTMLOptionElement||e instanceof HTMLFieldSetElement)&&e.disabled||e instanceof HTMLInputElement&&e.type==="hidden"||e instanceof HTMLAnchorElement&&e.href===""?!1:e.tabIndex!==-1}function B(e){if(e.shadowRoot&&e.shadowRoot.delegatesFocus!==!0)return null;let t=e;t.shadowRoot&&(t=t.shadowRoot);let o=t.querySelector("[autofocus]");if(o)return o;let i=e.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),s=i.currentNode;for(;s;){if(W(s))return s;s=i.nextNode()}}function O(e){B(e)?.focus()}var T=new WeakMap;function M(e){if(!c(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new u("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!c(e,!1))return;let o=!1;if(e.popover==="auto"){let s=e.getAttribute("popover"),n=F(e)||t;if(g(n,!1,!0),s!==e.getAttribute("popover")||!c(e,!1))return}h(t)||(o=!0),T.delete(e);let i=t.activeElement;e.classList.add(":open"),f.set(e,"showing"),v.has(t)||v.set(t,new Set),v.get(t).add(e),O(e),e.popover==="auto"&&(l.has(t)||l.set(t,new Set),l.get(t).add(e),D(m.get(e),!0)),o&&i&&e.popover==="auto"&&T.set(e,i),L(e,"closed","open")}function d(e,t=!1,o=!1){if(!c(e,!0))return;let i=e.ownerDocument;if(e.popover==="auto"&&(g(e,t,o),!c(e,!0))||(D(m.get(e),!1),m.delete(e),o&&(e.dispatchEvent(new u("beforetoggle",{oldState:"open",newState:"closed"})),!c(e,!0))))return;v.get(i)?.delete(e),l.get(i)?.delete(e),e.classList.remove(":open"),f.set(e,"hidden"),o&&L(e,"open","closed");let s=T.get(e);s&&(T.delete(e),t&&s.focus())}function k(e,t=!1,o=!1){let i=h(e);for(;i;)d(i,t,o),i=h(e)}function g(e,t,o){let i=e.ownerDocument||e;if(e instanceof Document)return k(i,t,o);let s=null,n=!1;for(let r of l.get(i)||[])if(r===e)n=!0;else if(n){s=r;break}if(!n)return k(i,t,o);for(;s&&E(s)==="showing"&&l.get(i)?.size;)d(s,t,o)}var w=new WeakMap;function b(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!h(o))return;let s=R(t);if(s&&e.type==="pointerdown")w.set(o,s);else if(e.type==="pointerup"){let n=w.get(o)===s;w.delete(o),n&&g(s||o,!1,!0)}}var H=new WeakMap;function D(e,t=!1){if(!e)return;H.has(e)||H.set(e,e.getAttribute("aria-expanded"));let o=e.popoverTargetElement;if(o&&o.popover==="auto")e.setAttribute("aria-expanded",String(t));else{let i=H.get(e);i?e.setAttribute("aria-expanded",i):e.removeAttribute("aria-expanded")}}function x(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function I(){window.ToggleEvent=window.ToggleEvent||u,Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n)}},showPopover:{enumerable:!0,configurable:!0,value(){M(this)}},hidePopover:{enumerable:!0,configurable:!0,value(){d(this,!0,!0)}},togglePopover:{enumerable:!0,configurable:!0,value(n){f.get(this)==="showing"&&n===void 0||n===!1?d(this,!0,!0):(n===void 0||n===!0)&&M(this)}}});let e=new WeakMap;function t(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(r){if(r===null)this.removeAttribute("popovertarget"),e.delete(this);else if(r instanceof Element)this.setAttribute("popovertarget",""),e.set(this,r);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let r=e.get(this);if(r?.isConnected||e.delete(this),r)return r;let a=this.getRootNode(),p=this.getAttribute("popovertarget");return(a instanceof Document||a instanceof ShadowRoot)&&p&&a.getElementById(p)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let r=(this.getAttribute("popovertargetaction")||"").toLowerCase();return r==="show"||r==="hide"?r:"toggle"},set(r){this.setAttribute("popovertargetaction",r)}}})}t(HTMLButtonElement),t(HTMLInputElement);let o=n=>{if(!n.isTrusted)return;let r=n.composedPath()[0];if(!(r instanceof Element)||r?.shadowRoot)return;let a=r.getRootNode();if(!(a instanceof ShadowRoot||a instanceof Document))return;let p=r.closest("[popovertargetaction],[popovertarget]");if(p){y(p);return}},i=n=>{let r=n.key,a=n.target;a&&(r==="Escape"||r==="Esc")&&g(a.ownerDocument,!0,!0)};(n=>{n.addEventListener("click",o),n.addEventListener("keydown",i),n.addEventListener("pointerdown",b),n.addEventListener("pointerup",b)})(document)}x()||I();})();
 //# sourceMappingURL=popover.iife.min.js.map

dist/popover.js

@@ -81,5 +81,3 @@ // src/events.ts
   const clickedPopover = nearestInclusiveOpenPopover(target);
-  const invokerPopover = nearestInclusiveOpenPopover(
-    target.popoverTargetElement
-  );
+  const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);
   if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) {
@@ -93,10 +91,26 @@ return clickedPopover;
 }
-function nearestInclusiveOpenPopover(target) {
-  if (!target)
-    return;
-  return closestShadowPenetrating(
-    '[popover="" i].\\:open, [popover=auto i].\\:open',
-    target
-  );
+function nearestInclusiveOpenPopover(node) {
+  while (node) {
+    if (node instanceof HTMLElement && node.popover === "auto" && visibilityState.get(node) === "showing") {
+      return node;
+    }
+    node = node.parentElement || node.getRootNode();
+    if (node instanceof ShadowRoot)
+      node = node.host;
+    if (node instanceof Document)
+      return;
+  }
 }
+function nearestInclusiveTargetPopoverForInvoker(node) {
+  while (node) {
+    const nodePopover = node.popoverTargetElement;
+    if (nodePopover)
+      return nodePopover;
+    node = node.parentElement || node.getRootNode();
+    if (node instanceof ShadowRoot)
+      node = node.host;
+    if (node instanceof Document)
+      return;
+  }
+}
 function topMostPopoverAncestor(newPopover) {
@@ -308,13 +322,2 @@ const popoverPositions = /* @__PURE__ */ new Map();
 }
-function closestShadowPenetrating(selector, target) {
-  const found = target.closest(selector);
-  if (found) {
-    return found;
-  }
-  const root = target.getRootNode();
-  if (root === document || !(root instanceof ShadowRoot)) {
-    return;
-  }
-  return closestShadowPenetrating(selector, root.host);
-}
 var initialAriaExpandedValue = /* @__PURE__ */ new WeakMap();
@@ -321,0 +324,0 @@ function setInvokerAriaExpanded(el, force = false) {

dist/popover.min.js

@@ -1,2 +0,2 @@
-var l=class extends Event{constructor(o,{oldState:r="",newState:s="",...n}={}){super(o,n);this.oldState=String(r||""),this.newState=String(s||"")}},P=new WeakMap;function L(e,t,o){P.set(e,setTimeout(()=>{P.has(e)&&e.dispatchEvent(new l("toggle",{cancelable:!1,oldState:t,newState:o}))},0))}var v=new WeakMap,u=new WeakMap,d=new WeakMap;function E(e){return d.get(e)||"hidden"}var m=new WeakMap;function S(e){let t=e.popoverTargetElement;if(!t)return;let o=E(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?f(t,!0,!0):c(t,!1)&&(m.set(t,e),M(t)))}function c(e,t){return!(e.popover!=="auto"&&e.popover!=="manual"||!e.isConnected||t&&E(e)!=="showing"||!t&&E(e)!=="hidden"||e instanceof HTMLDialogElement&&e.hasAttribute("open")||document.fullscreenElement===e)}function y(e){return e?Array.from(u.get(e.ownerDocument)||[]).indexOf(e)+1:0}function W(e){let t=b(e),o=b(e.popoverTargetElement);return y(t)>y(o)?t:o}function h(e){return Array.from(u.get(e)||[]).pop()||null}function b(e){if(e)return x('[popover="" i].\\:open, [popover=auto i].\\:open',e)}function B(e){let t=new Map,o=0,r=e.ownerDocument;for(let i of u.get(r)||[])t.set(i,o),o+=1;t.set(e,o),o+=1;let s=null;function n(i){let a=b(i);if(a===null)return null;let p=t.get(a);(s===null||t.get(s)<p)&&(s=a)}return n(e?.parentElement),s}function F(e){return e.hidden||(e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||e instanceof HTMLOptGroupElement||e instanceof HTMLOptionElement||e instanceof HTMLFieldSetElement)&&e.disabled||e instanceof HTMLInputElement&&e.type==="hidden"||e instanceof HTMLAnchorElement&&e.href===""?!1:e.tabIndex!==-1}function N(e){if(e.shadowRoot&&e.shadowRoot.delegatesFocus!==!0)return null;let t=e;t.shadowRoot&&(t=t.shadowRoot);let o=t.querySelector("[autofocus]");if(o)return o;let r=e.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),s=r.currentNode;for(;s;){if(F(s))return s;s=r.nextNode()}}function O(e){N(e)?.focus()}var T=new WeakMap;function M(e){if(!c(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new l("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!c(e,!1))return;let o=!1;if(e.popover==="auto"){let s=e.getAttribute("popover"),n=B(e)||t;if(g(n,!1,!0),s!==e.getAttribute("popover")||!c(e,!1))return}h(t)||(o=!0),T.delete(e);let r=t.activeElement;e.classList.add(":open"),d.set(e,"showing"),v.has(t)||v.set(t,new Set),v.get(t).add(e),O(e),e.popover==="auto"&&(u.has(t)||u.set(t,new Set),u.get(t).add(e),D(m.get(e),!0)),o&&r&&e.popover==="auto"&&T.set(e,r),L(e,"closed","open")}function f(e,t=!1,o=!1){if(!c(e,!0))return;let r=e.ownerDocument;if(e.popover==="auto"&&(g(e,t,o),!c(e,!0))||(D(m.get(e),!1),m.delete(e),o&&(e.dispatchEvent(new l("beforetoggle",{oldState:"open",newState:"closed"})),!c(e,!0))))return;v.get(r)?.delete(e),u.get(r)?.delete(e),e.classList.remove(":open"),d.set(e,"hidden"),o&&L(e,"open","closed");let s=T.get(e);s&&(T.delete(e),t&&s.focus())}function k(e,t=!1,o=!1){let r=h(e);for(;r;)f(r,t,o),r=h(e)}function g(e,t,o){let r=e.ownerDocument||e;if(e instanceof Document)return k(r,t,o);let s=null,n=!1;for(let i of u.get(r)||[])if(i===e)n=!0;else if(n){s=i;break}if(!n)return k(r,t,o);for(;s&&E(s)==="showing"&&u.get(r)?.size;)f(s,t,o)}var w=new WeakMap;function A(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!h(o))return;let s=W(t);if(s&&e.type==="pointerdown")w.set(o,s);else if(e.type==="pointerup"){let n=w.get(o)===s;w.delete(o),n&&g(s||o,!1,!0)}}function x(e,t){let o=t.closest(e);if(o)return o;let r=t.getRootNode();if(!(r===document||!(r instanceof ShadowRoot)))return x(e,r.host)}var H=new WeakMap;function D(e,t=!1){if(!e)return;H.has(e)||H.set(e,e.getAttribute("aria-expanded"));let o=e.popoverTargetElement;if(o&&o.popover==="auto")e.setAttribute("aria-expanded",String(t));else{let r=H.get(e);r?e.setAttribute("aria-expanded",r):e.removeAttribute("aria-expanded")}}function I(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function R(){window.ToggleEvent=window.ToggleEvent||l,Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n)}},showPopover:{enumerable:!0,configurable:!0,value(){M(this)}},hidePopover:{enumerable:!0,configurable:!0,value(){f(this,!0,!0)}},togglePopover:{enumerable:!0,configurable:!0,value(n){d.get(this)==="showing"&&n===void 0||n===!1?f(this,!0,!0):(n===void 0||n===!0)&&M(this)}}});let e=new WeakMap;function t(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(i){if(i===null)this.removeAttribute("popovertarget"),e.delete(this);else if(i instanceof Element)this.setAttribute("popovertarget",""),e.set(this,i);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let i=e.get(this);if(i?.isConnected||e.delete(this),i)return i;let a=this.getRootNode(),p=this.getAttribute("popovertarget");return(a instanceof Document||a instanceof ShadowRoot)&&p&&a.getElementById(p)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let i=(this.getAttribute("popovertargetaction")||"").toLowerCase();return i==="show"||i==="hide"?i:"toggle"},set(i){this.setAttribute("popovertargetaction",i)}}})}t(HTMLButtonElement),t(HTMLInputElement);let o=n=>{if(!n.isTrusted)return;let i=n.composedPath()[0];if(!(i instanceof Element)||i?.shadowRoot)return;let a=i.getRootNode();if(!(a instanceof ShadowRoot||a instanceof Document))return;let p=i.closest("[popovertargetaction],[popovertarget]");if(p){S(p);return}},r=n=>{let i=n.key,a=n.target;a&&(i==="Escape"||i==="Esc")&&g(a.ownerDocument,!0,!0)};(n=>{n.addEventListener("click",o),n.addEventListener("keydown",r),n.addEventListener("pointerdown",A),n.addEventListener("pointerup",A)})(document)}I()||R();
+var u=class extends Event{constructor(o,{oldState:i="",newState:s="",...n}={}){super(o,n);this.oldState=String(i||""),this.newState=String(s||"")}},A=new WeakMap;function L(e,t,o){A.set(e,setTimeout(()=>{A.has(e)&&e.dispatchEvent(new u("toggle",{cancelable:!1,oldState:t,newState:o}))},0))}var v=new WeakMap,l=new WeakMap,f=new WeakMap;function E(e){return f.get(e)||"hidden"}var m=new WeakMap;function y(e){let t=e.popoverTargetElement;if(!t)return;let o=E(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?d(t,!0,!0):c(t,!1)&&(m.set(t,e),M(t)))}function c(e,t){return!(e.popover!=="auto"&&e.popover!=="manual"||!e.isConnected||t&&E(e)!=="showing"||!t&&E(e)!=="hidden"||e instanceof HTMLDialogElement&&e.hasAttribute("open")||document.fullscreenElement===e)}function P(e){return e?Array.from(l.get(e.ownerDocument)||[]).indexOf(e)+1:0}function R(e){let t=S(e),o=N(e);return P(t)>P(o)?t:o}function h(e){return Array.from(l.get(e)||[]).pop()||null}function S(e){for(;e;){if(e instanceof HTMLElement&&e.popover==="auto"&&f.get(e)==="showing")return e;if(e=e.parentElement||e.getRootNode(),e instanceof ShadowRoot&&(e=e.host),e instanceof Document)return}}function N(e){for(;e;){let t=e.popoverTargetElement;if(t)return t;if(e=e.parentElement||e.getRootNode(),e instanceof ShadowRoot&&(e=e.host),e instanceof Document)return}}function F(e){let t=new Map,o=0,i=e.ownerDocument;for(let r of l.get(i)||[])t.set(r,o),o+=1;t.set(e,o),o+=1;let s=null;function n(r){let a=S(r);if(a===null)return null;let p=t.get(a);(s===null||t.get(s)<p)&&(s=a)}return n(e?.parentElement),s}function W(e){return e.hidden||(e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||e instanceof HTMLOptGroupElement||e instanceof HTMLOptionElement||e instanceof HTMLFieldSetElement)&&e.disabled||e instanceof HTMLInputElement&&e.type==="hidden"||e instanceof HTMLAnchorElement&&e.href===""?!1:e.tabIndex!==-1}function B(e){if(e.shadowRoot&&e.shadowRoot.delegatesFocus!==!0)return null;let t=e;t.shadowRoot&&(t=t.shadowRoot);let o=t.querySelector("[autofocus]");if(o)return o;let i=e.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),s=i.currentNode;for(;s;){if(W(s))return s;s=i.nextNode()}}function O(e){B(e)?.focus()}var T=new WeakMap;function M(e){if(!c(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new u("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!c(e,!1))return;let o=!1;if(e.popover==="auto"){let s=e.getAttribute("popover"),n=F(e)||t;if(g(n,!1,!0),s!==e.getAttribute("popover")||!c(e,!1))return}h(t)||(o=!0),T.delete(e);let i=t.activeElement;e.classList.add(":open"),f.set(e,"showing"),v.has(t)||v.set(t,new Set),v.get(t).add(e),O(e),e.popover==="auto"&&(l.has(t)||l.set(t,new Set),l.get(t).add(e),D(m.get(e),!0)),o&&i&&e.popover==="auto"&&T.set(e,i),L(e,"closed","open")}function d(e,t=!1,o=!1){if(!c(e,!0))return;let i=e.ownerDocument;if(e.popover==="auto"&&(g(e,t,o),!c(e,!0))||(D(m.get(e),!1),m.delete(e),o&&(e.dispatchEvent(new u("beforetoggle",{oldState:"open",newState:"closed"})),!c(e,!0))))return;v.get(i)?.delete(e),l.get(i)?.delete(e),e.classList.remove(":open"),f.set(e,"hidden"),o&&L(e,"open","closed");let s=T.get(e);s&&(T.delete(e),t&&s.focus())}function k(e,t=!1,o=!1){let i=h(e);for(;i;)d(i,t,o),i=h(e)}function g(e,t,o){let i=e.ownerDocument||e;if(e instanceof Document)return k(i,t,o);let s=null,n=!1;for(let r of l.get(i)||[])if(r===e)n=!0;else if(n){s=r;break}if(!n)return k(i,t,o);for(;s&&E(s)==="showing"&&l.get(i)?.size;)d(s,t,o)}var w=new WeakMap;function b(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!h(o))return;let s=R(t);if(s&&e.type==="pointerdown")w.set(o,s);else if(e.type==="pointerup"){let n=w.get(o)===s;w.delete(o),n&&g(s||o,!1,!0)}}var H=new WeakMap;function D(e,t=!1){if(!e)return;H.has(e)||H.set(e,e.getAttribute("aria-expanded"));let o=e.popoverTargetElement;if(o&&o.popover==="auto")e.setAttribute("aria-expanded",String(t));else{let i=H.get(e);i?e.setAttribute("aria-expanded",i):e.removeAttribute("aria-expanded")}}function x(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function I(){window.ToggleEvent=window.ToggleEvent||u,Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n)}},showPopover:{enumerable:!0,configurable:!0,value(){M(this)}},hidePopover:{enumerable:!0,configurable:!0,value(){d(this,!0,!0)}},togglePopover:{enumerable:!0,configurable:!0,value(n){f.get(this)==="showing"&&n===void 0||n===!1?d(this,!0,!0):(n===void 0||n===!0)&&M(this)}}});let e=new WeakMap;function t(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(r){if(r===null)this.removeAttribute("popovertarget"),e.delete(this);else if(r instanceof Element)this.setAttribute("popovertarget",""),e.set(this,r);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let r=e.get(this);if(r?.isConnected||e.delete(this),r)return r;let a=this.getRootNode(),p=this.getAttribute("popovertarget");return(a instanceof Document||a instanceof ShadowRoot)&&p&&a.getElementById(p)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let r=(this.getAttribute("popovertargetaction")||"").toLowerCase();return r==="show"||r==="hide"?r:"toggle"},set(r){this.setAttribute("popovertargetaction",r)}}})}t(HTMLButtonElement),t(HTMLInputElement);let o=n=>{if(!n.isTrusted)return;let r=n.composedPath()[0];if(!(r instanceof Element)||r?.shadowRoot)return;let a=r.getRootNode();if(!(a instanceof ShadowRoot||a instanceof Document))return;let p=r.closest("[popovertargetaction],[popovertarget]");if(p){y(p);return}},i=n=>{let r=n.key,a=n.target;a&&(r==="Escape"||r==="Esc")&&g(a.ownerDocument,!0,!0)};(n=>{n.addEventListener("click",o),n.addEventListener("keydown",i),n.addEventListener("pointerdown",b),n.addEventListener("pointerup",b)})(document)}x()||I();
 //# sourceMappingURL=popover.min.js.map

package.json

 {
   "name": "@oddbird/popover-polyfill",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Popover Attribute Polyfill",
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

README.md

 # Popover Attribute Polyfill
 
-[Explainer](https://open-ui.org/components/popover.research.explainer)
+[![Build Status](https://github.com/oddbird/popover-polyfill/actions/workflows/test.yml/badge.svg)](https://github.com/oddbird/popover-polyfill/actions/workflows/test.yml) [![npm version](https://badge.fury.io/js/@oddbird%2Fpopover-polyfill.svg)](https://badge.fury.io/js/@oddbird%2Fpopover-polyfill) [![Netlify Status](https://api.netlify.com/api/v1/badges/35bc7ba7-97a2-4e41-93ed-5141988adb1e/deploy-status)](https://app.netlify.com/sites/popover-polyfill/deploys)
 
-This polyfills the HTML `popover` attribute and `showPopover`/`hidePopover`/`togglePopover` methods onto HTMLElement, as well as the `popovertarget` and `popovertargetaction` attributes on Button elements.
+- [Demo](https://popover-polyfill.netlify.app/)
+- [Explainer](https://open-ui.org/components/popover.research.explainer/)
 
+This polyfills the HTML `popover` attribute and
+`showPopover`/`hidePopover`/`togglePopover` methods onto HTMLElement, as well as
+the `popovertarget` and `popovertargetaction` attributes on Button elements.
+
 ## Polyfill Installation
@@ -8,0 +13,0 @@

src/popover-helpers.ts

@@ -69,5 +69,3 @@ import { queuePopoverToggleEventTask, ToggleEvent } from './events.js';
   const clickedPopover = nearestInclusiveOpenPopover(target);
-  const invokerPopover = nearestInclusiveOpenPopover(
-    (target as HTMLButtonElement).popoverTargetElement,
-  );
+  const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);
   if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) {
@@ -85,10 +83,32 @@ return clickedPopover;
 // https://html.spec.whatwg.org/#nearest-inclusive-open-popover
-function nearestInclusiveOpenPopover(target: HTMLElement | null) {
-  if (!target) return;
-  return closestShadowPenetrating(
-    '[popover="" i].\\:open, [popover=auto i].\\:open',
-    target,
-  );
+function nearestInclusiveOpenPopover(
+  node: Node | null,
+): HTMLElement | undefined {
+  while (node) {
+    if (
+      node instanceof HTMLElement &&
+      node.popover === 'auto' &&
+      visibilityState.get(node) === 'showing'
+    ) {
+      return node;
+    }
+    node = node.parentElement || node.getRootNode();
+    if (node instanceof ShadowRoot) node = node.host;
+    if (node instanceof Document) return;
+  }
 }
 
+// https://html.spec.whatwg.org/#popover-light-dismiss:nearest-inclusive-target-popover-for-invoker
+function nearestInclusiveTargetPopoverForInvoker(
+  node: Node | null,
+): HTMLElement | undefined {
+  while (node) {
+    const nodePopover = (node as HTMLButtonElement).popoverTargetElement;
+    if (nodePopover) return nodePopover;
+    node = node.parentElement || node.getRootNode();
+    if (node instanceof ShadowRoot) node = node.host;
+    if (node instanceof Document) return;
+  }
+}
+
 // https://html.spec.whatwg.org/#topmost-popover-ancestor
@@ -358,19 +378,2 @@ function topMostPopoverAncestor(newPopover: HTMLElement): HTMLElement | null {
 
-function closestShadowPenetrating(
-  selector: string,
-  target: Element,
-): Element | undefined {
-  const found = target.closest(selector);
-  if (found) {
-    return found;
-  }
-
-  const root = target.getRootNode();
-  if (root === document || !(root instanceof ShadowRoot)) {
-    return;
-  }
-
-  return closestShadowPenetrating(selector, root.host);
-}
-
 const initialAriaExpandedValue = new WeakMap<
@@ -377,0 +380,0 @@ HTMLButtonElement | HTMLInputElement,

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

198035

increased by1.64%

Lines of code

1743

increased by0.69%

Number of lines in readme file

126

increased by4.13%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes