@oddbird/popover-polyfill - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/popover-fn.js

@@ -211,3 +211,3 @@ // src/events.ts
   const originallyFocusedElement = document2.activeElement;
-  element.classList.add(":open");
+  element.classList.add(":popover-open");
   visibilityState.set(element, "showing");
@@ -257,3 +257,3 @@ if (!topLayerElements.has(document2)) {
   autoPopoverList.get(document2)?.delete(element);
-  element.classList.remove(":open");
+  element.classList.remove(":popover-open");
   visibilityState.set(element, "hidden");
@@ -346,4 +346,38 @@ if (fireEvents) {
 }
+function patchSelectorFn(object, name, mapper) {
+  const original = object[name];
+  Object.defineProperty(object, name, {
+    value(selector) {
+      return original.call(this, mapper(selector));
+    }
+  });
+}
+var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
 function apply() {
   window.ToggleEvent = window.ToggleEvent || ToggleEvent;
+  function rewriteSelector(selector) {
+    if (selector.includes(":popover-open")) {
+      selector = selector.replace(
+        nonEscapedPopoverSelector,
+        "$1.\\:popover-open"
+      );
+    }
+    return selector;
+  }
+  patchSelectorFn(Document.prototype, "querySelector", rewriteSelector);
+  patchSelectorFn(Document.prototype, "querySelectorAll", rewriteSelector);
+  patchSelectorFn(Element.prototype, "querySelector", rewriteSelector);
+  patchSelectorFn(Element.prototype, "querySelectorAll", rewriteSelector);
+  patchSelectorFn(Element.prototype, "matches", rewriteSelector);
+  patchSelectorFn(Element.prototype, "closest", rewriteSelector);
+  patchSelectorFn(
+    DocumentFragment.prototype,
+    "querySelectorAll",
+    rewriteSelector
+  );
+  patchSelectorFn(
+    DocumentFragment.prototype,
+    "querySelectorAll",
+    rewriteSelector
+  );
   Object.defineProperties(HTMLElement.prototype, {
@@ -424,8 +458,8 @@ popover: {
           const targetElement = popoverTargetAssociatedElements.get(this);
-          if (!targetElement?.isConnected) {
+          if (targetElement && targetElement.isConnected) {
+            return targetElement;
+          } else if (targetElement && !targetElement.isConnected) {
             popoverTargetAssociatedElements.delete(this);
+            return null;
           }
-          if (targetElement) {
-            return targetElement;
-          }
           const root = this.getRootNode();
@@ -432,0 +466,0 @@ const idref = this.getAttribute("popovertarget");

dist/popover.iife.min.js

@@ -1,2 +0,2 @@
-"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();})();
+"use strict";(()=>{var p=class extends Event{constructor(o,{oldState:i="",newState:r="",...l}={}){super(o,l);this.oldState=String(i||""),this.newState=String(r||"")}},S=new WeakMap;function H(e,t,o){S.set(e,setTimeout(()=>{S.has(e)&&e.dispatchEvent(new p("toggle",{cancelable:!1,oldState:t,newState:o}))},0))}var m=new WeakMap,a=new WeakMap,d=new WeakMap;function h(e){return d.get(e)||"hidden"}var T=new WeakMap;function D(e){let t=e.popoverTargetElement;if(!t)return;let o=h(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?g(t,!0,!0):f(t,!1)&&(T.set(t,e),w(t)))}function f(e,t){return!(e.popover!=="auto"&&e.popover!=="manual"||!e.isConnected||t&&h(e)!=="showing"||!t&&h(e)!=="hidden"||e instanceof HTMLDialogElement&&e.hasAttribute("open")||document.fullscreenElement===e)}function P(e){return e?Array.from(a.get(e.ownerDocument)||[]).indexOf(e)+1:0}function N(e){let t=x(e),o=W(e);return P(t)>P(o)?t:o}function M(e){return Array.from(a.get(e)||[]).pop()||null}function x(e){for(;e;){if(e instanceof HTMLElement&&e.popover==="auto"&&d.get(e)==="showing")return e;if(e=e.parentElement||e.getRootNode(),e instanceof ShadowRoot&&(e=e.host),e instanceof Document)return}}function W(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 B(e){let t=new Map,o=0,i=e.ownerDocument;for(let n of a.get(i)||[])t.set(n,o),o+=1;t.set(e,o),o+=1;let r=null;function l(n){let s=x(n);if(s===null)return null;let u=t.get(s);(r===null||t.get(r)<u)&&(r=s)}return l(e?.parentElement),r}function O(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 q(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),r=i.currentNode;for(;r;){if(O(r))return r;r=i.nextNode()}}function C(e){q(e)?.focus()}var L=new WeakMap;function w(e){if(!f(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new p("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!f(e,!1))return;let o=!1;if(e.popover==="auto"){let r=e.getAttribute("popover"),l=B(e)||t;if(E(l,!1,!0),r!==e.getAttribute("popover")||!f(e,!1))return}M(t)||(o=!0),L.delete(e);let i=t.activeElement;e.classList.add(":popover-open"),d.set(e,"showing"),m.has(t)||m.set(t,new Set),m.get(t).add(e),C(e),e.popover==="auto"&&(a.has(t)||a.set(t,new Set),a.get(t).add(e),I(T.get(e),!0)),o&&i&&e.popover==="auto"&&L.set(e,i),H(e,"closed","open")}function g(e,t=!1,o=!1){if(!f(e,!0))return;let i=e.ownerDocument;if(e.popover==="auto"&&(E(e,t,o),!f(e,!0))||(I(T.get(e),!1),T.delete(e),o&&(e.dispatchEvent(new p("beforetoggle",{oldState:"open",newState:"closed"})),!f(e,!0))))return;m.get(i)?.delete(e),a.get(i)?.delete(e),e.classList.remove(":popover-open"),d.set(e,"hidden"),o&&H(e,"open","closed");let r=L.get(e);r&&(L.delete(e),t&&r.focus())}function k(e,t=!1,o=!1){let i=M(e);for(;i;)g(i,t,o),i=M(e)}function E(e,t,o){let i=e.ownerDocument||e;if(e instanceof Document)return k(i,t,o);let r=null,l=!1;for(let n of a.get(i)||[])if(n===e)l=!0;else if(l){r=n;break}if(!l)return k(i,t,o);for(;r&&h(r)==="showing"&&a.get(i)?.size;)g(r,t,o)}var b=new WeakMap;function A(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!M(o))return;let r=N(t);if(r&&e.type==="pointerdown")b.set(o,r);else if(e.type==="pointerup"){let l=b.get(o)===r;b.delete(o),l&&E(r||o,!1,!0)}}var y=new WeakMap;function I(e,t=!1){if(!e)return;y.has(e)||y.set(e,e.getAttribute("aria-expanded"));let o=e.popoverTargetElement;if(o&&o.popover==="auto")e.setAttribute("aria-expanded",String(t));else{let i=y.get(e);i?e.setAttribute("aria-expanded",i):e.removeAttribute("aria-expanded")}}function R(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function c(e,t,o){let i=e[t];Object.defineProperty(e,t,{value(r){return i.call(this,o(r))}})}var K=/(^|[^\\]):popover-open\b/g;function F(){window.ToggleEvent=window.ToggleEvent||p;function e(n){return n.includes(":popover-open")&&(n=n.replace(K,"$1.\\:popover-open")),n}c(Document.prototype,"querySelector",e),c(Document.prototype,"querySelectorAll",e),c(Element.prototype,"querySelector",e),c(Element.prototype,"querySelectorAll",e),c(Element.prototype,"matches",e),c(Element.prototype,"closest",e),c(DocumentFragment.prototype,"querySelectorAll",e),c(DocumentFragment.prototype,"querySelectorAll",e),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(){w(this)}},hidePopover:{enumerable:!0,configurable:!0,value(){g(this,!0,!0)}},togglePopover:{enumerable:!0,configurable:!0,value(n){d.get(this)==="showing"&&n===void 0||n===!1?g(this,!0,!0):(n===void 0||n===!0)&&w(this)}}});let t=new WeakMap;function o(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),t.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),t.set(this,s);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 s=t.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return t.delete(this),null;let u=this.getRootNode(),v=this.getAttribute("popovertarget");return(u instanceof Document||u instanceof ShadowRoot)&&v&&u.getElementById(v)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let s=(this.getAttribute("popovertargetaction")||"").toLowerCase();return s==="show"||s==="hide"?s:"toggle"},set(s){this.setAttribute("popovertargetaction",s)}}})}o(HTMLButtonElement),o(HTMLInputElement);let i=n=>{if(!n.isTrusted)return;let s=n.composedPath()[0];if(!(s instanceof Element)||s?.shadowRoot)return;let u=s.getRootNode();if(!(u instanceof ShadowRoot||u instanceof Document))return;let v=s.closest("[popovertargetaction],[popovertarget]");if(v){D(v);return}},r=n=>{let s=n.key,u=n.target;u&&(s==="Escape"||s==="Esc")&&E(u.ownerDocument,!0,!0)};(n=>{n.addEventListener("click",i),n.addEventListener("keydown",r),n.addEventListener("pointerdown",A),n.addEventListener("pointerup",A)})(document)}R()||F();})();
 //# sourceMappingURL=popover.iife.min.js.map

dist/popover.js

@@ -211,3 +211,3 @@ // src/events.ts
   const originallyFocusedElement = document2.activeElement;
-  element.classList.add(":open");
+  element.classList.add(":popover-open");
   visibilityState.set(element, "showing");
@@ -257,3 +257,3 @@ if (!topLayerElements.has(document2)) {
   autoPopoverList.get(document2)?.delete(element);
-  element.classList.remove(":open");
+  element.classList.remove(":popover-open");
   visibilityState.set(element, "hidden");
@@ -346,4 +346,38 @@ if (fireEvents) {
 }
+function patchSelectorFn(object, name, mapper) {
+  const original = object[name];
+  Object.defineProperty(object, name, {
+    value(selector) {
+      return original.call(this, mapper(selector));
+    }
+  });
+}
+var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
 function apply() {
   window.ToggleEvent = window.ToggleEvent || ToggleEvent;
+  function rewriteSelector(selector) {
+    if (selector.includes(":popover-open")) {
+      selector = selector.replace(
+        nonEscapedPopoverSelector,
+        "$1.\\:popover-open"
+      );
+    }
+    return selector;
+  }
+  patchSelectorFn(Document.prototype, "querySelector", rewriteSelector);
+  patchSelectorFn(Document.prototype, "querySelectorAll", rewriteSelector);
+  patchSelectorFn(Element.prototype, "querySelector", rewriteSelector);
+  patchSelectorFn(Element.prototype, "querySelectorAll", rewriteSelector);
+  patchSelectorFn(Element.prototype, "matches", rewriteSelector);
+  patchSelectorFn(Element.prototype, "closest", rewriteSelector);
+  patchSelectorFn(
+    DocumentFragment.prototype,
+    "querySelectorAll",
+    rewriteSelector
+  );
+  patchSelectorFn(
+    DocumentFragment.prototype,
+    "querySelectorAll",
+    rewriteSelector
+  );
   Object.defineProperties(HTMLElement.prototype, {
@@ -424,8 +458,8 @@ popover: {
           const targetElement = popoverTargetAssociatedElements.get(this);
-          if (!targetElement?.isConnected) {
+          if (targetElement && targetElement.isConnected) {
+            return targetElement;
+          } else if (targetElement && !targetElement.isConnected) {
             popoverTargetAssociatedElements.delete(this);
+            return null;
           }
-          if (targetElement) {
-            return targetElement;
-          }
           const root = this.getRootNode();
@@ -432,0 +466,0 @@ const idref = this.getAttribute("popovertarget");

dist/popover.min.js

@@ -1,2 +0,2 @@
-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();
+var p=class extends Event{constructor(o,{oldState:i="",newState:r="",...l}={}){super(o,l);this.oldState=String(i||""),this.newState=String(r||"")}},S=new WeakMap;function H(e,t,o){S.set(e,setTimeout(()=>{S.has(e)&&e.dispatchEvent(new p("toggle",{cancelable:!1,oldState:t,newState:o}))},0))}var m=new WeakMap,a=new WeakMap,d=new WeakMap;function h(e){return d.get(e)||"hidden"}var T=new WeakMap;function D(e){let t=e.popoverTargetElement;if(!t)return;let o=h(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?g(t,!0,!0):f(t,!1)&&(T.set(t,e),w(t)))}function f(e,t){return!(e.popover!=="auto"&&e.popover!=="manual"||!e.isConnected||t&&h(e)!=="showing"||!t&&h(e)!=="hidden"||e instanceof HTMLDialogElement&&e.hasAttribute("open")||document.fullscreenElement===e)}function P(e){return e?Array.from(a.get(e.ownerDocument)||[]).indexOf(e)+1:0}function N(e){let t=x(e),o=W(e);return P(t)>P(o)?t:o}function M(e){return Array.from(a.get(e)||[]).pop()||null}function x(e){for(;e;){if(e instanceof HTMLElement&&e.popover==="auto"&&d.get(e)==="showing")return e;if(e=e.parentElement||e.getRootNode(),e instanceof ShadowRoot&&(e=e.host),e instanceof Document)return}}function W(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 B(e){let t=new Map,o=0,i=e.ownerDocument;for(let n of a.get(i)||[])t.set(n,o),o+=1;t.set(e,o),o+=1;let r=null;function l(n){let s=x(n);if(s===null)return null;let u=t.get(s);(r===null||t.get(r)<u)&&(r=s)}return l(e?.parentElement),r}function O(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 q(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),r=i.currentNode;for(;r;){if(O(r))return r;r=i.nextNode()}}function C(e){q(e)?.focus()}var L=new WeakMap;function w(e){if(!f(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new p("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!f(e,!1))return;let o=!1;if(e.popover==="auto"){let r=e.getAttribute("popover"),l=B(e)||t;if(E(l,!1,!0),r!==e.getAttribute("popover")||!f(e,!1))return}M(t)||(o=!0),L.delete(e);let i=t.activeElement;e.classList.add(":popover-open"),d.set(e,"showing"),m.has(t)||m.set(t,new Set),m.get(t).add(e),C(e),e.popover==="auto"&&(a.has(t)||a.set(t,new Set),a.get(t).add(e),I(T.get(e),!0)),o&&i&&e.popover==="auto"&&L.set(e,i),H(e,"closed","open")}function g(e,t=!1,o=!1){if(!f(e,!0))return;let i=e.ownerDocument;if(e.popover==="auto"&&(E(e,t,o),!f(e,!0))||(I(T.get(e),!1),T.delete(e),o&&(e.dispatchEvent(new p("beforetoggle",{oldState:"open",newState:"closed"})),!f(e,!0))))return;m.get(i)?.delete(e),a.get(i)?.delete(e),e.classList.remove(":popover-open"),d.set(e,"hidden"),o&&H(e,"open","closed");let r=L.get(e);r&&(L.delete(e),t&&r.focus())}function k(e,t=!1,o=!1){let i=M(e);for(;i;)g(i,t,o),i=M(e)}function E(e,t,o){let i=e.ownerDocument||e;if(e instanceof Document)return k(i,t,o);let r=null,l=!1;for(let n of a.get(i)||[])if(n===e)l=!0;else if(l){r=n;break}if(!l)return k(i,t,o);for(;r&&h(r)==="showing"&&a.get(i)?.size;)g(r,t,o)}var b=new WeakMap;function A(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!M(o))return;let r=N(t);if(r&&e.type==="pointerdown")b.set(o,r);else if(e.type==="pointerup"){let l=b.get(o)===r;b.delete(o),l&&E(r||o,!1,!0)}}var y=new WeakMap;function I(e,t=!1){if(!e)return;y.has(e)||y.set(e,e.getAttribute("aria-expanded"));let o=e.popoverTargetElement;if(o&&o.popover==="auto")e.setAttribute("aria-expanded",String(t));else{let i=y.get(e);i?e.setAttribute("aria-expanded",i):e.removeAttribute("aria-expanded")}}function R(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function c(e,t,o){let i=e[t];Object.defineProperty(e,t,{value(r){return i.call(this,o(r))}})}var K=/(^|[^\\]):popover-open\b/g;function F(){window.ToggleEvent=window.ToggleEvent||p;function e(n){return n.includes(":popover-open")&&(n=n.replace(K,"$1.\\:popover-open")),n}c(Document.prototype,"querySelector",e),c(Document.prototype,"querySelectorAll",e),c(Element.prototype,"querySelector",e),c(Element.prototype,"querySelectorAll",e),c(Element.prototype,"matches",e),c(Element.prototype,"closest",e),c(DocumentFragment.prototype,"querySelectorAll",e),c(DocumentFragment.prototype,"querySelectorAll",e),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(){w(this)}},hidePopover:{enumerable:!0,configurable:!0,value(){g(this,!0,!0)}},togglePopover:{enumerable:!0,configurable:!0,value(n){d.get(this)==="showing"&&n===void 0||n===!1?g(this,!0,!0):(n===void 0||n===!0)&&w(this)}}});let t=new WeakMap;function o(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),t.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),t.set(this,s);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 s=t.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return t.delete(this),null;let u=this.getRootNode(),v=this.getAttribute("popovertarget");return(u instanceof Document||u instanceof ShadowRoot)&&v&&u.getElementById(v)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let s=(this.getAttribute("popovertargetaction")||"").toLowerCase();return s==="show"||s==="hide"?s:"toggle"},set(s){this.setAttribute("popovertargetaction",s)}}})}o(HTMLButtonElement),o(HTMLInputElement);let i=n=>{if(!n.isTrusted)return;let s=n.composedPath()[0];if(!(s instanceof Element)||s?.shadowRoot)return;let u=s.getRootNode();if(!(u instanceof ShadowRoot||u instanceof Document))return;let v=s.closest("[popovertargetaction],[popovertarget]");if(v){D(v);return}},r=n=>{let s=n.key,u=n.target;u&&(s==="Escape"||s==="Esc")&&E(u.ownerDocument,!0,!0)};(n=>{n.addEventListener("click",i),n.addEventListener("keydown",r),n.addEventListener("pointerdown",A),n.addEventListener("pointerup",A)})(document)}R()||F();
 //# sourceMappingURL=popover.min.js.map

package.json

 {
   "name": "@oddbird/popover-polyfill",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Popover Attribute Polyfill",
@@ -89,10 +89,10 @@ "license": "BSD-3-Clause",
   "devDependencies": {
-    "@playwright/test": "^1.32.0",
+    "@playwright/test": "^1.32.2",
     "@types/node": "*",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
-    "esbuild": "^0.17.12",
-    "eslint": "^8.36.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "esbuild": "^0.17.15",
+    "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-import-resolver-typescript": "^3.5.3",
+    "eslint-import-resolver-typescript": "^3.5.4",
     "eslint-plugin-import": "^2.27.5",
@@ -105,7 +105,7 @@ "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.8.7",
-    "stylelint": "^15.3.0",
-    "stylelint-config-standard": "^31.0.0",
+    "stylelint": "^15.4.0",
+    "stylelint-config-standard": "^32.0.0",
     "stylis": "^4.1.3",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.3"
   },
@@ -112,0 +112,0 @@ "lint-staged": {

README.md

@@ -96,14 +96,20 @@ # Popover Attribute Polyfill
 
-- Native `popover` has an `:open` and `:closed` pseudo selector state. This is
-  not possible to polyfill, so instead this adds the `.\:open` CSS class to any
-  open popover.
+- A native `popover` has a `:popover-open` pseudo selector when in the open
+  state. Pseudo selectors cannot be polyfilled within CSS, and so instead the
+  polyfill will add the `.\:popover-open` CSS class to any open popover. In
+  other words a popover in the open state will have `class=":popover-open"`. In
+  CSS the `:` character must be escaped with a backslash.
 
-  - `:closed` is not implemented due to difficulty in finding popover elements
-    during page load. As such, you'll need to style them using `:not(.\:open)`.
+  - The `:popover-open` selector within JavaScript methods has been polyfilled,
+    so both `.querySelector(':popover-open')` _and_
+    `.querySelector('.\:popover-open')` will work to select the same element.
+    `matches` and `closest` have also been patched, so
+    `.matches(':popover-open')` will work the same as
+    `.matches('.\:popover-open')`.
 
-  - Using native `:open` in CSS that does not support native `popover` results
-    in an invalid selector, and so the entire declaration is thrown away. This
-    is important because if you intend to style a popover using `.\:open` it
-    will need to be a separate declaration. For example,
-    `[popover]:open, [popover].\:open` will not work.
+  - Using native `:popover-open` in CSS that does not support native `popover`
+    results in an invalid selector, and so the entire declaration is thrown
+    away. This is important because if you intend to style a popover using
+    `.\:popover-open` it will need to be a separate declaration. For example,
+    `[popover]:popover-open, [popover].\:popover-open` will not work.
 
@@ -110,0 +116,0 @@ - Native `popover` elements use the `:top-layer` pseudo element which gets

src/popover-helpers.ts

@@ -238,3 +238,3 @@ import { queuePopoverToggleEventTask, ToggleEvent } from './events.js';
   const originallyFocusedElement = document.activeElement as HTMLElement;
-  element.classList.add(':open');
+  element.classList.add(':popover-open');
   visibilityState.set(element, 'showing');
@@ -297,3 +297,3 @@ if (!topLayerElements.has(document)) {
   autoPopoverList.get(document)?.delete(element);
-  element.classList.remove(':open');
+  element.classList.remove(':popover-open');
   visibilityState.set(element, 'hidden');
@@ -300,0 +300,0 @@ if (fireEvents) {

src/popover.ts

@@ -19,5 +19,47 @@ import { ToggleEvent } from './events.js';
 
+function patchSelectorFn<K extends string>(
+  object: Record<PropertyKey & K, unknown>,
+  name: K,
+  mapper: (selector: string) => string,
+) {
+  const original = object[name] as (selectors: string) => NodeList;
+  Object.defineProperty(object, name, {
+    value(selector: string) {
+      return original.call(this, mapper(selector));
+    },
+  });
+}
+
+const nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
+
 export function apply() {
   window.ToggleEvent = window.ToggleEvent || ToggleEvent;
 
+  function rewriteSelector(selector: string) {
+    if (selector.includes(':popover-open')) {
+      selector = selector.replace(
+        nonEscapedPopoverSelector,
+        '$1.\\:popover-open',
+      );
+    }
+    return selector;
+  }
+
+  patchSelectorFn(Document.prototype, 'querySelector', rewriteSelector);
+  patchSelectorFn(Document.prototype, 'querySelectorAll', rewriteSelector);
+  patchSelectorFn(Element.prototype, 'querySelector', rewriteSelector);
+  patchSelectorFn(Element.prototype, 'querySelectorAll', rewriteSelector);
+  patchSelectorFn(Element.prototype, 'matches', rewriteSelector);
+  patchSelectorFn(Element.prototype, 'closest', rewriteSelector);
+  patchSelectorFn(
+    DocumentFragment.prototype,
+    'querySelectorAll',
+    rewriteSelector,
+  );
+  patchSelectorFn(
+    DocumentFragment.prototype,
+    'querySelectorAll',
+    rewriteSelector,
+  );
+
   Object.defineProperties(HTMLElement.prototype, {
@@ -108,8 +150,8 @@ popover: {
           const targetElement = popoverTargetAssociatedElements.get(this);
-          if (!targetElement?.isConnected) {
+          if (targetElement && targetElement.isConnected) {
+            return targetElement;
+          } else if (targetElement && !targetElement.isConnected) {
             popoverTargetAssociatedElements.delete(this);
+            return null;
           }
-          if (targetElement) {
-            return targetElement;
-          }
           const root = this.getRootNode();
@@ -116,0 +158,0 @@ const idref = this.getAttribute('popovertarget');

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

212038

increased by7.07%

Lines of code

1861

increased by6.77%

Number of lines in readme file

132

increased by4.76%

No dependency changes