Version 5.0.13
This commit is contained in:
Neo committed
1 parent
b89858b2ff
commit
5efe744c5f
1407 files changed
+69690
-30177
No files matched your search
@@ -0,0 +1,26 @@
|
||||
Copyright (c) 2022-2023 OddBird
|
||||
|
||||
Redistribution and use in source and binary forms, with or without modification,
|
||||
are permitted provided that the following conditions are met:
|
||||
|
||||
1. Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
2. Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
3. Neither the name of the copyright holder nor the names of its contributors
|
||||
may be used to endorse or promote products derived from this software without
|
||||
specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
|
||||
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
||||
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
@@ -0,0 +1,193 @@
|
||||
# Popover Attribute Polyfill
|
||||
|
||||
[](https://github.com/oddbird/popover-polyfill/actions/workflows/test.yml) [](https://badge.fury.io/js/@oddbird%2Fpopover-polyfill) [](https://app.netlify.com/sites/popover-polyfill/deploys)
|
||||
|
||||
- [Demo](https://popover.oddbird.net/)
|
||||
- [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
|
||||
|
||||
### Download a copy
|
||||
|
||||
The simplest, recommended way to install the polyfill is to copy it into your
|
||||
project.
|
||||
|
||||
Download `popover.js` (or `popover.min.js`) [from
|
||||
unpkg.com](https://unpkg.com/browse/@oddbird/popover-polyfill/dist/) and add it
|
||||
to the appropriate directory in your project. Then, include it where necessary
|
||||
with a `<script>` tag:
|
||||
|
||||
```html
|
||||
<script src="/path/to/popover.min.js" type="module"></script>
|
||||
```
|
||||
|
||||
Or without [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules):
|
||||
|
||||
```html
|
||||
<script src="/path/to/popover.iife.min.js"></script>
|
||||
```
|
||||
|
||||
Note that the JS will inject CSS styles into your document (or ShadowRoot).
|
||||
|
||||
### With npm
|
||||
|
||||
For more advanced configuration, you can install with
|
||||
[npm](https://www.npmjs.com/):
|
||||
|
||||
```sh
|
||||
npm install @oddbird/popover-polyfill
|
||||
```
|
||||
|
||||
After installing, you’ll need to use appropriate tooling to use
|
||||
`node_modules/@oddbird/popover-polyfill/dist/popover.js`.
|
||||
|
||||
For most tooling such as Vite, Webpack, and Parcel, that will look like this:
|
||||
|
||||
```js
|
||||
import '@oddbird/popover-polyfill';
|
||||
```
|
||||
|
||||
If you want to manually apply the polyfill, you can instead import the
|
||||
`isSupported` and `apply` functions directly from
|
||||
`node_modules/@oddbird/popover-polyfill/dist/popover-fn.js` file.
|
||||
|
||||
With most tooling:
|
||||
|
||||
```js
|
||||
import { apply, isSupported } from '@oddbird/popover-polyfill/fn';
|
||||
```
|
||||
|
||||
Or in CommonJS environments:
|
||||
|
||||
```js
|
||||
const { apply, isSupported } = require('@oddbird/popover-polyfill/fn');
|
||||
```
|
||||
|
||||
An `isPolyfilled` function is also available, to detect if the Popover methods
|
||||
have been polyfilled:
|
||||
|
||||
```js
|
||||
import { isPolyfilled } from '@oddbird/popover-polyfill/fn';
|
||||
```
|
||||
|
||||
### Via CDN
|
||||
|
||||
For prototyping or testing, you can use the npm package via a Content Delivery
|
||||
Network. Avoid using JavaScript CDNs in production, for [many good
|
||||
reasons](https://blog.wesleyac.com/posts/why-not-javascript-cdn) such as
|
||||
performance and robustness.
|
||||
|
||||
```html
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest"
|
||||
crossorigin="anonymous"
|
||||
defer
|
||||
></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
After installation the polyfill will automatically add the correct methods and
|
||||
attributes to the HTMLElement class.
|
||||
|
||||
## Caveats
|
||||
|
||||
This polyfill is not a perfect replacement for the native behavior; there are
|
||||
some caveats which will need accommodations:
|
||||
|
||||
- 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.
|
||||
|
||||
- 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 `: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.
|
||||
|
||||
- Native `popover` elements use the `:top-layer` pseudo element which gets
|
||||
placed above all other elements on the page, regardless of overflow or
|
||||
z-index. This is not possible to polyfill, and so this library simply sets a
|
||||
really high `z-index`. This means if a popover is within an element that has
|
||||
`overflow:` or `position:` CSS, then there will be visual differences between
|
||||
the polyfill and the native behavior.
|
||||
|
||||
- Native _invokers_ (that is, buttons or inputs using the `popovertarget`
|
||||
attribute) on `popover=auto` will render in the accessibility tree as elements
|
||||
with `expanded`. The only way to do this in the polyfill is setting the
|
||||
`aria-expanded` attribute on those elements. This _may_ impact mutation
|
||||
observers or frameworks which do DOM diffing, or it may interfere with other
|
||||
code which sets `aria-expanded` on elements.
|
||||
|
||||
- The polyfill uses `adoptedStyleSheets` to inject CSS onto the page (and each
|
||||
Shadow DOM). If it can't use that it'll generate a `<style>` tag instead. This
|
||||
means you may see a `<style>` tag you didn't put there, and this _may_ impact
|
||||
mutation observers or frameworks.
|
||||
|
||||
- For browsers which don't support `adoptedStyleSheets` on Shadow Roots, if
|
||||
you are building a ShadowRoot by setting `.innerHTML`, you'll remove the
|
||||
StyleSheet. Either polyfill `adoptedStyleSheets` or call
|
||||
`injectStyles(myShadow)` to add the styles back in.
|
||||
|
||||
- Similarly, if you're using Declarative ShadowDOM or otherwise creating a
|
||||
shadow root without calling `attachShadow`/`attachInternals`, then the
|
||||
polyfill won't inject the styles (because it can't reference the
|
||||
`shadowRoot`). You'll need to manually inject the styles yourself with
|
||||
`injectStyles(myShadow)`.
|
||||
|
||||
- As a stylesheet is injected into the main document, if your host element is
|
||||
a popover, styling with `:host` gets tricky beause `:host` styles always
|
||||
take lower precedence than the main document styles. This is a limitation
|
||||
of CSS and there's not a reasonable workaround. The best workaround for
|
||||
now is to add `!important` to conflicting properties in your `:host` rule.
|
||||
See [#147](https://github.com/oddbird/popover-polyfill/issues/147) for more.
|
||||
|
||||
- Given that the CSS is injected using JavaScript, you may find that you
|
||||
temporarily see popovers as open while the JS is loading. To work around
|
||||
this, you can add the following CSS to your project:
|
||||
|
||||
```css
|
||||
@supports not selector(:popover-open) {
|
||||
[popover]:not(.\:popover-open) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- When supported, the polyfill creates a cascade layer named `popover-polyfill`.
|
||||
If your styles are not in layers then this should have no impact. If your
|
||||
styles do use layers, you'll need to ensure the polyfill layer is declared
|
||||
first. (e.g. `@layer popover-polyfill, other, layers;`)
|
||||
|
||||
- The polyfill will not work in browsers with partial popover support enabled,
|
||||
and will also not attempt to make experimental support match the final spec.
|
||||
|
||||
## Contributing
|
||||
|
||||
Visit our [contribution guidelines](https://github.com/oddbird/popover-polyfill/blob/main/CONTRIBUTING.md).
|
||||
|
||||
## Sponsor OddBird's OSS Work
|
||||
|
||||
At OddBird, we love contributing to the languages & tools developers rely on.
|
||||
We're currently working on polyfills
|
||||
for new Popover & Anchor Positioning functionality,
|
||||
as well as CSS specifications for functions, mixins, and responsive typography.
|
||||
Help us keep this work sustainable
|
||||
and centered on your needs as a developer!
|
||||
We display sponsor logos and avatars
|
||||
on our [website](https://www.oddbird.net/polyfill/#open-source-sponsors).
|
||||
|
||||
[Sponsor OddBird's OSS Work](https://opencollective.com/oddbird-open-source)
|
||||
@@ -0,0 +1,69 @@
|
||||
(function(){
|
||||
|
||||
var c=class extends Event{oldState;newState;constructor(t,{oldState:o="",newState:r="",...i}={}){super(t,i),this.oldState=String(o||""),this.newState=String(r||"")}},N=new WeakMap;function P(e,t,o){N.set(e,setTimeout(()=>{N.has(e)&&e.dispatchEvent(new c("toggle",{cancelable:!1,oldState:t,newState:o}))},0))}var x=globalThis.ShadowRoot||function(){},V=globalThis.HTMLDialogElement||function(){},b=new WeakMap,p=new WeakMap,h=new WeakMap;function y(e){return h.get(e)||"hidden"}var L=new WeakMap;function O(e){let t=e.popoverTargetElement;if(!(t instanceof HTMLElement))return;let o=y(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?v(t,!0,!0):f(t,!1)&&(L.set(t,e),H(t)))}function f(e,t){return!(e.popover!=="auto"&&e.popover!=="manual"||!e.isConnected||t&&y(e)!=="showing"||!t&&y(e)!=="hidden"||e instanceof V&&e.hasAttribute("open")||document.fullscreenElement===e)}function F(e){return e?Array.from(p.get(e.ownerDocument)||[]).indexOf(e)+1:0}function $(e){let t=W(e),o=U(e);return F(t)>F(o)?t:o}function M(e){let t=p.get(e);for(let o of t||[])if(!o.isConnected)t.delete(o);else return o;return null}function d(e){return typeof e.getRootNode=="function"?e.getRootNode():e.parentNode?d(e.parentNode):e}function W(e){for(;e;){if(e instanceof HTMLElement&&e.popover==="auto"&&h.get(e)==="showing")return e;if(e=e instanceof Element&&e.assignedSlot||e.parentElement||d(e),e instanceof x&&(e=e.host),e instanceof Document)return}}function U(e){for(;e;){let t=e.popoverTargetElement;if(t instanceof HTMLElement)return t;if(e=e.parentElement||d(e),e instanceof x&&(e=e.host),e instanceof Document)return}}function G(e){let t=new Map,o=0;for(let l of p.get(e.ownerDocument)||[])t.set(l,o),o+=1;t.set(e,o),o+=1;let r=null;function i(l){let a=W(l);if(a===null)return null;let T=t.get(a);(r===null||t.get(r)<T)&&(r=a)}return i(e.parentElement||d(e)),r}function Q(e){return e.hidden||e instanceof x||(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 _(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 T=a.assignedElements({flatten:!0});for(let n of T){if(n.hasAttribute("autofocus"))return n;if(o=n.querySelector("[autofocus]"),o)return o}}}let r=e.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),i=r.currentNode;for(;i;){if(Q(i))return i;i=r.nextNode()}}function J(e){_(e)?.focus()}var S=new WeakMap;function H(e){if(!f(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new c("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!f(e,!1))return;let o=!1;if(e.popover==="auto"){let i=e.getAttribute("popover"),l=G(e)||t;if(w(l,!1,!0),i!==e.getAttribute("popover")||!f(e,!1))return}M(t)||(o=!0),S.delete(e);let r=t.activeElement;e.classList.add(":popover-open"),h.set(e,"showing"),b.has(t)||b.set(t,new Set),b.get(t).add(e),J(e),e.popover==="auto"&&(p.has(t)||p.set(t,new Set),p.get(t).add(e),C(L.get(e),!0)),o&&r&&e.popover==="auto"&&S.set(e,r),P(e,"closed","open")}function v(e,t=!1,o=!1){if(!f(e,!0))return;let r=e.ownerDocument;if(e.popover==="auto"&&(w(e,t,o),!f(e,!0))||(C(L.get(e),!1),L.delete(e),o&&(e.dispatchEvent(new c("beforetoggle",{oldState:"open",newState:"closed"})),!f(e,!0))))return;b.get(r)?.delete(e),p.get(r)?.delete(e),e.classList.remove(":popover-open"),h.set(e,"hidden"),o&&P(e,"open","closed");let i=S.get(e);i&&(S.delete(e),t&&i.focus())}function B(e,t=!1,o=!1){let r=M(e);for(;r;)v(r,t,o),r=M(e)}function w(e,t,o){let r=e.ownerDocument||e;if(e instanceof Document)return B(r,t,o);let i=null,l=!1;for(let a of p.get(r)||[])if(a===e)l=!0;else if(l){i=a;break}if(!l)return B(r,t,o);for(;i&&y(i)==="showing"&&p.get(r)?.size;)v(i,t,o)}var A=new WeakMap;function D(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!M(o))return;let i=$(t);if(i&&e.type==="pointerdown")A.set(o,i);else if(e.type==="pointerup"){let l=A.get(o)===i;A.delete(o),l&&w(i||o,!1,!0)}}var k=new WeakMap;function C(e,t=!1){if(!e)return;k.has(e)||k.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 r=k.get(e);r?e.setAttribute("aria-expanded",r):e.removeAttribute("aria-expanded")}}var q=globalThis.ShadowRoot||function(){};function j(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function g(e,t,o){let r=e[t];Object.defineProperty(e,t,{value(i){return r.call(this,o(i))}})}var X=/(^|[^\\]):popover-open\Line truncated
|
||||
${e?"@layer popover-polyfill {":""}
|
||||
: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;
|
||||
}
|
||||
|
||||
@supports not (background-color: canvas) {
|
||||
:where([popover]) {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (width: -moz-fit-content) {
|
||||
:where([popover]) {
|
||||
width: -moz-fit-content;
|
||||
height: -moz-fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (inset: 0) {
|
||||
:where([popover]) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
${e?"}":""}
|
||||
`}var m=null;function I(e){let t=Z();if(m===null)try{m=new CSSStyleSheet,m.replaceSync(t)}catch{m=!1}if(m===!1){let o=document.createElement("style");o.textContent=t,e instanceof Document?e.head.prepend(o):e.prepend(o)}else e.adoptedStyleSheets=[m,...e.adoptedStyleSheets]}function K(){if(typeof window>"u")return;window.ToggleEvent=window.ToggleEvent||c;function e(n){return n?.includes(":popover-open")&&(n=n.replace(X,"$1.\\:popover-open")),n}g(Document.prototype,"querySelector",e),g(Document.prototype,"querySelectorAll",e),g(Element.prototype,"querySelector",e),g(Element.prototype,"querySelectorAll",e),g(Element.prototype,"matches",e),g(Element.prototype,"closest",e),g(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){n===null?this.removeAttribute("popover"):this.setAttribute("popover",n)}},showPopover:{enumerable:!0,configurable:!0,value(){H(this)}},hidePopover:{enumerable:!0,configurable:!0,value(){v(this,!0,!0)}},togglePopover:{enumerable:!0,configurable:!0,value(n){h.get(this)==="showing"&&n===void 0||n===!1?v(this,!0,!0):(n===void 0||n===!0)&&H(this)}}});let t=Element.prototype.attachShadow;t&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(n){let s=t.call(this,n);return I(s),s}}});let o=HTMLElement.prototype.attachInternals;o&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){let n=o.call(this);return n.shadowRoot&&I(n.shadowRoot),n}}});let r=new WeakMap;function i(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),r.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),r.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=r.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return r.delete(this),null;let u=d(this),E=this.getAttribute("popovertarget");return(u instanceof Document||u instanceof q)&&E&&u.getElementById(E)||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)}}})}i(HTMLButtonElement),i(HTMLInputElement);let l=n=>{let s=n.composedPath(),u=s[0];if(!(u instanceof Element)||u?.shadowRoot)return;let E=d(u);if(!(E instanceof q||E instanceof Document))return;let R=s.find(z=>z.matches?.("[popovertargetaction],[popovertarget]"));if(R){O(R),n.preventDefault();return}},a=n=>{let s=n.key,u=n.target;!n.defaultPrevented&&u&&(s==="Escape"||s==="Esc")&&w(u.ownerDocument,!0,!0)};(n=>{n.addEventListener("click",l),n.addEventListener("keydown",a),n.addEventListener("pointerdown",D),n.addEventListener("pointerup",D)})(document),I(document)}j()||K();
|
||||
//# sourceMappingURL=popover.min.js.map
|
||||
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"sources": ["../src/events.ts", "../src/popover-helpers.ts", "../src/popover.ts", "../src/index.ts"],
|
||||
"sourcesContent": ["export interface ToggleInit extends EventInit {\n oldState: string;\n newState: string;\n}\n\nexport class ToggleEvent extends Event {\n public oldState: string;\n public newState: string;\n constructor(\n type: string,\n { oldState = '', newState = '', ...init }: Partial<ToggleInit> = {},\n ) {\n super(type, init);\n this.oldState = String(oldState || '');\n this.newState = String(newState || '');\n }\n}\n\nconst popoverToggleTaskQueue = new WeakMap<HTMLElement, unknown>();\nexport function queuePopoverToggleEventTask(\n element: HTMLElement,\n oldState: string,\n newState: string,\n) {\n popoverToggleTaskQueue.set(\n element,\n setTimeout(() => {\n if (!popoverToggleTaskQueue.has(element)) return;\n element.dispatchEvent(\n new ToggleEvent('toggle', {\n cancelable: false,\n oldState,\n newState,\n }),\n );\n }, 0),\n );\n}\n", "import { queuePopoverToggleEventTask, ToggleEvent } from './events.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst ShadowRoot = globalThis.ShadowRoot || function () {};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst HTMLDialogElement = globalThis.HTMLDialogElement || function () {};\n\nconst topLayerElements = new WeakMap<Document, Set<HTMLElement>>();\nconst autoPopoverList = new WeakMap<Document, Set<HTMLElement>>();\nexport const visibilityState = new WeakMap<HTMLElement, 'hidden' | 'showing'>();\nfunction getPopoverVisibilityState(popover: HTMLElement): 'hidden' | 'showing' {\n return visibilityState.get(popover) || 'hidden';\n}\n\nconst popoverInvoker = new WeakMap<\n HTMLElement,\n HTMLButtonElement | HTMLInputElement\n>();\n\n// https://html.spec.whatwg.org/#popover-target-attribute-activation-behavior\nexport function popoverTargetAttributeActivationBehavior(\n element: HTMLButtonElement | HTMLInputElement,\n) {\n const popover = element.popoverTargetElement;\n if (!(popover instanceof HTMLElement)) {\n return;\n }\n const visibility = getPopoverVisibilityState(popover);\n if (element.popoverTargetAction === 'show' && visibility === 'showing') {\n return;\n }\n if (element.popoverTargetAction === 'hide' && visibility === 'hidden') return;\n if (visibility === 'showing') {\n hidePopover(popover, true, true);\n } else if (checkPopoverValidity(popover, false)) {\n popoverInvoker.set(popover, element);\n showPopover(popover);\n }\n}\n\n// https://whatpr.org/html/8221/popover.html#check-popover-validity\nfunction checkPopoverValidity(\n element: HTMLElement,\n expectedToBeShowing: boolean,\n) {\n if (element.popover !== 'auto' && element.popover !== 'manual') {\n return false;\n }\n if (!element.isConnected) return false;\n if (expectedToBeShowing && getPopoverVisibilityState(element) !== 'showing') {\n return false;\n }\n if (!expectedToBeShowing && getPopoverVisibilityState(element) !== 'hidden') {\n return false;\n }\n if (element instanceof HTMLDialogElement && element.hasAttribute('open')) {\n return false;\n }\n if (document.fullscreenElement === element) return false;\n return true;\n}\n\nfunction getStackPosition(popover?: Element) {\n if (!popover) return 0;\n return (\n Array.from(autoPopoverList.get(popover.ownerDocument) || []).indexOf(\n popover as HTMLElement,\n ) + 1\n );\n}\n\nfunction topMostClickedPopover(target: HTMLElement) {\n const clickedPopover = nearestInclusiveOpenPopover(target);\n const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);\n if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) {\n return clickedPopover;\n }\n return invokerPopover;\n}\n\n// https://html.spec.whatwg.org/#topmost-auto-popover\nfunction topMostAutoPopover(document: Document): HTMLElement | null {\n const documentPopovers = autoPopoverList.get(document);\n for (const popover of documentPopovers || []) {\n if (!popover.isConnected) {\n documentPopovers!.delete(popover);\n } else {\n return popover;\n }\n }\n return null;\n}\n\nexport function getRootNode(node: Node): Node {\n if (typeof node.getRootNode === 'function') {\n return node.getRootNode();\n }\n if (node.parentNode) return getRootNode(node.parentNode);\n return node;\n}\n\n// https://html.spec.whatwg.org/#nearest-inclusive-open-popover\nfunction nearestInclusiveOpenPopover(\n node: Node | null,\n): HTMLElement | undefined {\n while (node) {\n if (\n node instanceof HTMLElement &&\n node.popover === 'auto' &&\n visibilityState.get(node) === 'showing'\n ) {\n return node;\n }\n node =\n (node instanceof Element && node.assignedSlot) ||\n node.parentElement ||\n getRootNode(node);\n if (node instanceof ShadowRoot) node = node.host;\n if (node instanceof Document) return;\n }\n}\n\n// https://html.spec.whatwg.org/#popover-light-dismiss:nearest-inclusive-tLine truncated
|
||||
"mappings": "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 truncated
|
||||
"names": ["ToggleEvent", "type", "oldState", "newState", "init", "popoverToggleTaskQueue", "queuePopoverToggleEventTask", "element", "ShadowRoot", "HTMLDialogElement", "topLayerElements", "autoPopoverList", "visibilityState", "getPopoverVisibilityState", "popover", "popoverInvoker", "popoverTargetAttributeActivationBehavior", "element", "visibility", "hidePopover", "checkPopoverValidity", "showPopover", "expectedToBeShowing", "getStackPosition", "topMostClickedPopover", "target", "clickedPopover", "nearestInclusiveOpenPopover", "invokerPopover", "nearestInclusiveTargetPopoverForInvoker", "topMostAutoPopover", "document", "documentPopovers", "getRootNode", "node", "nodePopover", "topMostPopoverAncestor", "newPopover", "popoverPositions", "i", "checkAncestor", "candidate", "candidateAncestor", "candidatePosition", "isFocusable", "focusTarget", "focusDelegate", "whereToLook", "autoFocusDelegate", "slots", "slot", "assignedElements", "el", "walker", "descendant", "popoverFocusingSteps", "subject", "previouslyFocusedElements", "ToggleEvent", "shouldRestoreFocus", "originalType", "ancestor", "hideAllPopoversUntil", "originallyFocusedElement", "setInvokerAriaExpanded", "queuePopoverToggleEventTask", "focusPreviousElement", "fireEvents", "previouslyFocusedElement", "closeAllOpenPopovers", "endpoint", "lastToHide", "foundEndpoint", "popoverPointerDownTargets", "lightDismissOpenPopovers", "event", "sameTarget", "initialAriaExpandedValue", "force", "initialValue", "ShadowRoot", "isSupported", "patchSelectorFn", "object", "name", "mapper", "original", "selector", "nonEscapedPopoverSelector", "hasLayerSupport", "getStyles", "useLayer", "popoverStyleSheet", "injectStyles", "root", "styles", "sheet", "apply", "ToggleEvent", "rewriteSelector", "value", "showPopover", "hidePopover", "force", "visibilityState", "originalAttachShadow", "options", "shadowRoot", "originalAttachInternals", "internals", "popoverTargetAssociatedElements", "applyPopoverInvokerElementMixin", "ElementClass", "targetElement", "getRootNode", "idref", "ShadowRoot", "handleInvokerActivation", "event", "composedPath", "target", "invoker", "el", "popoverTargetAttributeActivationBehavior", "onKeydown", "key", "hideAllPopoversUntil", "lightDismissOpenPopovers", "isSupported", "apply"]
|
||||
}
|
||||
Reference in new issue
Block a user