@spectrum-web-components/overlay
Version:
An `<sp-overlay>` element is used to decorate content that you would like to present to your visitors as "overlaid" on the rest of the application. This includes dialogs (modal and not), pickers, tooltips, context menus, et al.
3 lines (2 loc) • 2.53 kB
JavaScript
"use strict";import{firstFocusableIn as E,firstFocusableSlottedIn as y}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as b}from"./VirtualTrigger.js";import{guaranteedAllTransitionend as w,nextFrame as l,overlayTimer as m}from"./AbstractOverlay.js";import{BeforetoggleClosedEvent as P,BeforetoggleOpenEvent as g,OverlayStateEvent as h}from"./events.js";import{userFocusableSelector as T}from"@spectrum-web-components/shared";const C=CSS.supports("(overlay: auto)");function f(a){let c=!1;try{c=a.matches(":popover-open")}catch(e){}let p=!1;try{p=a.matches(":open")}catch(e){}return c||p}export function OverlayPopover(a){class c extends a{async manageDelay(e){if(e===!1||e!==this.open){m.close(this);return}this.delayed&&await m.openTimer(this)&&(this.open=!e)}async shouldHidePopover(e){if(e&&this.open!==e)return;const o=async({newState:i}={})=>{i!=="open"&&await this.placementController.resetOverlayPosition()};if(!f(this.dialogEl)){o();return}this.dialogEl.addEventListener("toggle",o,{once:!0})}shouldShowPopover(e){let o=!1;try{o=this.dialogEl.matches(":popover-open")}catch(u){}let i=!1;try{i=this.dialogEl.matches(":open")}catch(u){}e&&this.open===e&&!o&&!i&&this.isConnected&&(this.dialogEl.showPopover(),this.managePosition())}async ensureOnDOM(e){await l(),C||await this.shouldHidePopover(e),this.shouldShowPopover(e),await l()}async makeTransition(e){if(this.open!==e)return null;let o=null;const i=(t,s)=>()=>{if(t.open=e,s===0){const r=e?g:P;this.dispatchEvent(new r)}if(!e||(t.matches(T)&&(o=t),o=o||E(t),o))return;t.querySelectorAll("slot").forEach(r=>{o||(o=y(r))})},u=(t,s)=>async()=>{if(this.open!==e)return;const n=e?"sp-opened":"sp-closed";if(s>0){t.dispatchEvent(new h(n,this,{interaction:this.type,publish:!1}));return}const r=async()=>{if(this.open!==e)return;await l();const d=this.triggerElement instanceof b;this.dispatchEvent(new h(n,this,{interaction:this.type,publish:d})),t.dispatchEvent(new h(n,this,{interaction:this.type,publish:!1})),this.triggerElement&&!d&&this.triggerElement.dispatchEvent(new h(n,this,{interaction:this.type,publish:!0})),this.state=e?"opened":"closed",this.returnFocus(),await l(),await l(),e===this.open&&e===!1&&this.requestSlottable()};if(this.open!==e)return;const v=f(this.dialogEl);e!==!0&&v&&this.isConnected?(this.dialogEl.addEventListener("beforetoggle",()=>{r()},{once:!0}),this.dialogEl.hidePopover()):r()};return this.elements.forEach((t,s)=>{w(t,i(t,s),u(t,s))}),o}}return c}
//# sourceMappingURL=OverlayPopover.js.map