Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@spectrum-web-components/overlay
Advanced tools
@spectrum-web-components/overlay - npm Package Compare versions
Comparing version 1.1.0-beta.25 to 1.1.0-beta.26
| { | ||
| "name": "@spectrum-web-components/overlay", | ||
| "version": "1.1.0-beta.25", | ||
| "version": "1.1.0-beta.26", | ||
| "publishConfig": { | ||
@@ -163,7 +163,7 @@ "access": "public" | ||
| "@floating-ui/utils": "^0.2.1", | ||
| "@spectrum-web-components/action-button": "^1.1.0-beta.25", | ||
| "@spectrum-web-components/base": "^1.1.0-beta.25", | ||
| "@spectrum-web-components/reactive-controllers": "^1.1.0-beta.25", | ||
| "@spectrum-web-components/shared": "^1.1.0-beta.25", | ||
| "@spectrum-web-components/theme": "^1.1.0-beta.25" | ||
| "@spectrum-web-components/action-button": "^1.1.0-beta.26", | ||
| "@spectrum-web-components/base": "^1.1.0-beta.26", | ||
| "@spectrum-web-components/reactive-controllers": "^1.1.0-beta.26", | ||
| "@spectrum-web-components/shared": "^1.1.0-beta.26", | ||
| "@spectrum-web-components/theme": "^1.1.0-beta.26" | ||
| }, | ||
@@ -180,3 +180,3 @@ "types": "./src/index.d.ts", | ||
| ], | ||
| "gitHead": "d754016cd9be31b183e1177dace90d28b2593433" | ||
| "gitHead": "595d3a9db3d1a47d7a779fb92d3fbee9250c1cc8" | ||
| } |
| "use strict"; | ||
| import { css } from "@spectrum-web-components/base"; | ||
| const styles = css` | ||
| :host{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;--sp-overlay-open:true;background:0 0;border:0;margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open,.dialog:modal{display:flex}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base,1000) + var(--swc-overlay-open-count))}} | ||
| :host{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;--sp-overlay-open:true;background:0 0;border:0;margin:0;padding:0;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open,.dialog:modal{display:flex}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base,1000) + var(--swc-overlay-open-count))}} | ||
| `; | ||
| export default styles; | ||
| //# sourceMappingURL=overlay.css.dev.js.map |
| "use strict";import{css as a}from"@spectrum-web-components/base";const o=a` | ||
| :host{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;--sp-overlay-open:true;background:0 0;border:0;margin:0;padding:0;display:flex;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open,.dialog:modal{display:flex}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base,1000) + var(--swc-overlay-open-count))}} | ||
| :host{pointer-events:none;--swc-overlay-animation-distance:var(--spectrum-spacing-100);display:contents}:host(:has(>sp-tooltip)){--swc-overlay-animation-distance:var(--spectrum-tooltip-animation-distance)}.dialog{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;--sp-overlay-open:true;background:0 0;border:0;margin:0;padding:0;position:fixed;inset:0 auto auto 0;overflow:visible;opacity:1!important}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--mod-popover-filter:var(--spectrum-popover-filter)}:host(:not([open])) .dialog{--sp-overlay-open:false}.dialog::backdrop{display:none}.dialog:before{content:"";position:absolute;inset:-999em;pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(sp-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--swc-overlay-animation-distance);margin-top:var(--swc-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--swc-overlay-animation-distance);margin-left:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--swc-overlay-animation-distance);margin-top:calc(-1*var(--swc-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--swc-overlay-animation-distance);margin-left:var(--swc-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--mod-popover-filter:var(--spectrum-popover-filter)}}@supports (overlay:auto){.dialog{transition:all var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s)),translate 0s,display var(--mod-overlay-animation-duration,var(--spectrum-animation-duration-100,.13s));transition-behavior:allow-discrete;display:none}.dialog:popover-open,.dialog:modal{display:flex}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--swc-overlay-z-index-base,1000) + var(--swc-overlay-open-count))}} | ||
| `;export default o; | ||
| //# sourceMappingURL=overlay.css.js.map |
@@ -70,3 +70,3 @@ "use strict"; | ||
| } | ||
| async shouldShowPopover(targetOpenState) { | ||
| shouldShowPopover(targetOpenState) { | ||
| let popoverOpen = false; | ||
@@ -84,3 +84,3 @@ try { | ||
| this.dialogEl.showPopover(); | ||
| await this.managePosition(); | ||
| this.managePosition(); | ||
| } | ||
@@ -93,3 +93,3 @@ } | ||
| } | ||
| await this.shouldShowPopover(targetOpenState); | ||
| this.shouldShowPopover(targetOpenState); | ||
| await nextFrame(); | ||
@@ -96,0 +96,0 @@ } |
@@ -1,2 +0,2 @@ | ||
| "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})}async 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(),await this.managePosition())}async ensureOnDOM(e){await l(),C||await this.shouldHidePopover(e),await 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} | ||
| "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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 3 instances in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 3 instances in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.02%
1320633