@oddbird/popover-polyfill
Version:
Popover Attribute Polyfill
65 lines (56 loc) • 11 kB
JavaScript
var h=class extends Event{oldState;newState;constructor(t,o={}){let n=Object.assign({},o);delete n.oldState,delete n.newState,super(t,n),this.oldState=String(o.oldState||""),this.newState=String(o.newState||"")}},j=new WeakMap;function x(e,t,o){j.set(e,setTimeout(()=>{j.has(e)&&e.dispatchEvent(new h("toggle",{cancelable:!1,oldState:t,newState:o}))},0))}var R=globalThis.ShadowRoot||function(){},X=globalThis.HTMLDialogElement||function(){},b=new WeakMap,d=new WeakMap,f=new WeakMap,m=new WeakMap;function P(e){return m.get(e)||"hidden"}var H=new WeakMap;function M(e){return[...e].pop()}function U(e){let t=e.popoverTargetElement;if(!(t instanceof HTMLElement))return;let o=P(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?w(t,!0,!0):v(t,!1)&&(H.set(t,e),k(t)))}function v(e,t){return!(e.popover!=="auto"&&e.popover!=="manual"&&e.popover!=="hint"||!e.isConnected||t&&P(e)!=="showing"||!t&&P(e)!=="hidden"||e instanceof X&&e.hasAttribute("open")||document.fullscreenElement===e)}function z(e){if(!e)return 0;let t=d.get(document)||new Set,o=f.get(document)||new Set;return o.has(e)?[...o].indexOf(e)+t.size+1:t.has(e)?[...t].indexOf(e)+1:0}function Z(e){let t=$(e),o=ee(e);return z(t)>z(o)?t:o}function y(e){let t,o=f.get(e)||new Set,n=d.get(e)||new Set,i=o.size>0?o:n.size>0?n:null;return i?(t=M(i),t.isConnected?t:(i.delete(t),y(e))):null}function _(e){for(let t of e||[])if(!t.isConnected)e.delete(t);else return t;return null}function E(e){return typeof e.getRootNode=="function"?e.getRootNode():e.parentNode?E(e.parentNode):e}function $(e){for(;e;){if(e instanceof HTMLElement&&e.popover==="auto"&&m.get(e)==="showing")return e;if(e=e instanceof Element&&e.assignedSlot||e.parentElement||E(e),e instanceof R&&(e=e.host),e instanceof Document)return}}function ee(e){for(;e;){let t=e.popoverTargetElement;if(t instanceof HTMLElement)return t;if(e=e.parentElement||E(e),e instanceof R&&(e=e.host),e instanceof Document)return}}function K(e,t){let o=new Map,n=0;for(let a of t||[])o.set(a,n),n+=1;o.set(e,n),n+=1;let i=null;function l(a){if(!a)return;let u=!1,p=null;for(;!u;){if(p=$(a)||null,p===null||!o.has(p))return;(e.popover==="hint"||p.popover==="auto")&&(u=!0),u||(a=p.parentElement)}let B=o.get(p)??null;(i===null||o.get(i)<B)&&(i=p)}return l(e.parentElement||E(e)),i}function te(e){return e.hidden||e instanceof R||(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:typeof e.tabIndex=="number"&&e.tabIndex!==-1}function oe(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 l=t.querySelectorAll("slot");for(let a of l){let u=a.assignedElements({flatten:!0});for(let p of u){if(p.hasAttribute("autofocus"))return p;if(o=p.querySelector("[autofocus]"),o)return o}}}let n=e.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),i=n.currentNode;for(;i;){if(te(i))return i;i=n.nextNode()}}function ne(e){var t;(t=oe(e))==null||t.focus()}var A=new WeakMap;function k(e){if(!v(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new h("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!v(e,!1))return;let o=!1,n=e.popover,i=null,l=K(e,d.get(t)||new Set),a=K(e,f.get(t)||new Set);if(n==="auto"&&(N(f.get(t)||new Set,o,!0),g(l||t,o,!0),i="auto"),n==="hint"&&(a?(g(a,o,!0),i="hint"):(N(f.get(t)||new Set,o,!0),l?(g(l,o,!0),i="auto"):i="hint")),n==="auto"||n==="hint"){if(n!==e.popover||!v(e,!1))return;y(t)||(o=!0),i==="auto"?(d.has(t)||d.set(t,new Set),d.get(t).add(e)):i==="hint"&&(f.has(t)||f.set(t,new Set),f.get(t).add(e))}A.delete(e);let u=t.activeElement;e.classList.add(":popover-open"),m.set(e,"showing"),b.has(t)||b.set(t,new Set),b.get(t).add(e),Y(H.get(e),!0),ne(e),o&&u&&e.popover==="auto"&&A.set(e,u),x(e,"closed","open")}function w(e,t=!1,o=!1){var u,p;if(!v(e,!0))return;let n=e.ownerDocument;if(["auto","hint"].includes(e.popover)&&(g(e,t,o),!v(e,!0)))return;let i=d.get(n)||new Set,l=i.has(e)&&M(i)===e;if(Y(H.get(e),!1),H.delete(e),o&&(e.dispatchEvent(new h("beforetoggle",{oldState:"open",newState:"closed"})),l&&M(i)!==e&&g(e,t,o),!v(e,!0)))return;(u=b.get(n))==null||u.delete(e),i.delete(e),(p=f.get(n))==null||p.delete(e),e.classList.remove(":popover-open"),m.set(e,"hidden"),o&&x(e,"open","closed");let a=A.get(e);a&&(A.delete(e),t&&a.focus())}function re(e,t=!1,o=!1){let n=y(e);for(;n;)w(n,t,o),n=y(e)}function N(e,t=!1,o=!1){let n=_(e);for(;n;)w(n,t,o),n=_(e)}function V(e,t,o,n){let i=!1,l=!1;for(;i||!l;){l=!0;let a=null,u=!1;for(let p of t)if(p===e)u=!0;else if(u){a=p;break}if(!a)return;for(;P(a)==="showing"&&t.size;)w(M(t),o,n);t.has(e)&&M(t)!==e&&(i=!0),i&&(n=!1)}}function g(e,t,o){var i,l;let n=e.ownerDocument||e;if(e instanceof Document)return re(n,t,o);if((i=f.get(n))!=null&&i.has(e)){V(e,f.get(n),t,o);return}N(f.get(n)||new Set,t,o),(l=d.get(n))!=null&&l.has(e)&&V(e,d.get(n),t,o)}var I=new WeakMap;function F(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!y(o))return;let i=Z(t);if(i&&e.type==="pointerdown")I.set(o,i);else if(e.type==="pointerup"){let l=I.get(o)===i;I.delete(o),l&&g(i||o,!1,!0)}}var D=new WeakMap;function Y(e,t=!1){if(!e)return;D.has(e)||D.set(e,e.getAttribute("aria-expanded"));let o=e.popoverTargetElement;if(o instanceof HTMLElement&&o.popover==="auto")e.setAttribute("aria-expanded",String(t));else{let n=D.get(e);n?e.setAttribute("aria-expanded",n):e.removeAttribute("aria-expanded")}}var G=globalThis.ShadowRoot||function(){},ie="popover-polyfill";function Q(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function T(e,t,o){let n=e[t];Object.defineProperty(e,t,{value(i){return n.call(this,o(i))}})}var se=/(^|[^\\]):popover-open\b/g;function le(){return typeof globalThis.CSSLayerBlockRule=="function"}function ae(e){var n;let t=le(),o=CSS.escape(e??((n=window.POPOVER_POLYFILL_OPTIONS)==null?void 0:n.layerName)??ie);return`
${t?` ${o} {`:""}
:where([popover]) {
position: fixed;
z-index: 2147483647;
inset: 0;
padding: 0.25em;
width: fit-content;
height: fit-content;
border-width: initial;
border-color: initial;
border-image: initial;
border-style: solid;
background-color: canvas;
color: canvastext;
overflow: auto;
margin: auto;
}
:where([popover]:not(.\\:popover-open)) {
display: none;
}
:where(dialog[popover].\\:popover-open) {
display: block;
}
:where(dialog[popover][open]) {
display: revert;
}
:where([anchor].\\:popover-open) {
inset: auto;
}
:where([anchor]:popover-open) {
inset: auto;
}
not (background-color: canvas) {
:where([popover]) {
background-color: white;
color: black;
}
}
(width: -moz-fit-content) {
:where([popover]) {
width: -moz-fit-content;
height: -moz-fit-content;
}
}
not (inset: 0) {
:where([popover]) {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
${t?"}":""}
`}var L=null;function C(e,t){let o=ae(t);if(L===null)try{L=new CSSStyleSheet,L.replaceSync(o)}catch{L=!1}if(L===!1){let n=document.createElement("style");n.textContent=o,e instanceof Document?e.head.prepend(n):e.prepend(n)}else e.adoptedStyleSheets=[L,...e.adoptedStyleSheets]}function J(e){if(typeof window>"u")return;let t=e==null?void 0:e.layerName;window.ToggleEvent=window.ToggleEvent||h;function o(r){return r!=null&&r.includes(":popover-open")&&(r=r.replace(se,"$1.\\:popover-open")),r}T(Document.prototype,"querySelector",o),T(Document.prototype,"querySelectorAll",o),T(Element.prototype,"querySelector",o),T(Element.prototype,"querySelectorAll",o),T(Element.prototype,"matches",o),T(Element.prototype,"closest",o),T(DocumentFragment.prototype,"querySelectorAll",o),Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let r=(this.getAttribute("popover")||"").toLowerCase();return r===""||r=="auto"?"auto":r=="hint"?"hint":"manual"},set(r){r===null?this.removeAttribute("popover"):this.setAttribute("popover",r)}},showPopover:{enumerable:!0,configurable:!0,value(r={}){k(this)}},hidePopover:{enumerable:!0,configurable:!0,value(){w(this,!0,!0)}},togglePopover:{enumerable:!0,configurable:!0,value(r={}){return typeof r=="boolean"&&(r={force:r}),m.get(this)==="showing"&&r.force===void 0||r.force===!1?w(this,!0,!0):(r.force===void 0||r.force===!0)&&k(this),m.get(this)==="showing"}}});let n=Element.prototype.attachShadow;n&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(r){let s=n.call(this,r);return C(s,t),s}}});let i=HTMLElement.prototype.attachInternals;i&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){let r=i.call(this);return r.shadowRoot&&C(r.shadowRoot,t),r}}});let l=new WeakMap;function a(r){Object.defineProperties(r.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),l.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),l.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=l.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return l.delete(this),null;let c=E(this),S=this.getAttribute("popovertarget");return(c instanceof Document||c instanceof G)&&S&&c.getElementById(S)||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)}}})}a(HTMLButtonElement),a(HTMLInputElement);let u=r=>{if(r.defaultPrevented)return;let s=r.composedPath(),c=s[0];if(!(c instanceof Element)||c!=null&&c.shadowRoot)return;let S=E(c);if(!(S instanceof G||S instanceof Document))return;let W=s.find(O=>{var q;return(q=O.matches)==null?void 0:q.call(O,"[popovertargetaction],[popovertarget]")});if(W){U(W),r.preventDefault();return}},p=r=>{let s=r.key,c=r.target;!r.defaultPrevented&&c&&(s==="Escape"||s==="Esc")&&g(c.ownerDocument,!0,!0)};(r=>{r.addEventListener("click",u),r.addEventListener("keydown",p),r.addEventListener("pointerdown",F),r.addEventListener("pointerup",F)})(document),C(document,t)}Q()||J();
//# sourceMappingURL=popover.min.js.map