@spectrum-web-components/overlay - npm Package Compare versions

Comparing version 1.1.0-beta.26 to 1.1.0-beta.27

package.json

 {
     "name": "@spectrum-web-components/overlay",
-    "version": "1.1.0-beta.26",
+    "version": "1.1.0-beta.27",
     "publishConfig": {
@@ -163,7 +163,7 @@ "access": "public"
         "@floating-ui/utils": "^0.2.1",
-        "@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"
+        "@spectrum-web-components/action-button": "^1.1.0-beta.27",
+        "@spectrum-web-components/base": "^1.1.0-beta.27",
+        "@spectrum-web-components/reactive-controllers": "^1.1.0-beta.27",
+        "@spectrum-web-components/shared": "^1.1.0-beta.27",
+        "@spectrum-web-components/theme": "^1.1.0-beta.27"
     },
@@ -180,3 +180,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "595d3a9db3d1a47d7a779fb92d3fbee9250c1cc8"
+    "gitHead": "7cf7dfde8e21dfbb218316962588d3bb24331416"
 }

src/Overlay.d.ts

@@ -120,3 +120,3 @@ import { PropertyValues, TemplateResult } from '@spectrum-web-components/base';
     }): void;
-    protected handleBrowserClose(): void;
+    protected handleBrowserClose(event: Event): void;
     manuallyKeepOpen(): void;
@@ -123,0 +123,0 @@ protected handleSlotchange(): void;

src/Overlay.dev.js

@@ -323,7 +323,8 @@ "use strict";
     if (event.newState !== "open") {
-      this.handleBrowserClose();
+      this.handleBrowserClose(event);
     }
   }
-  handleBrowserClose() {
+  handleBrowserClose(event) {
     var _a;
+    event.stopPropagation();
     if (!((_a = this.strategy) == null ? void 0 : _a.activelyOpening)) {
@@ -330,0 +331,0 @@ this.open = false;

src/Overlay.js

@@ -1,2 +0,2 @@
-"use strict";var b=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var r=(u,a,e,t)=>{for(var o=t>1?void 0:t?E(a,e):a,s=u.length-1,l;s>=0;s--)(l=u[s])&&(o=(t?l(a,e,o):l(o))||o);return t&&o&&b(a,e,o),o};import{html as d}from"@spectrum-web-components/base";import{property as n,query as g,queryAssignedElements as C,state as P}from"@spectrum-web-components/base/src/decorators.js";import{ElementResolutionController as w,elementResolverUpdatedSymbol as T}from"@spectrum-web-components/reactive-controllers/src/ElementResolution.js";import{ifDefined as c,styleMap as f}from"@spectrum-web-components/base/src/directives.js";import{randomID as S}from"@spectrum-web-components/shared/src/random-id.js";import{AbstractOverlay as R,nextFrame as v}from"./AbstractOverlay.js";import{OverlayDialog as L}from"./OverlayDialog.js";import{OverlayPopover as O}from"./OverlayPopover.js";import{OverlayNoPopover as M}from"./OverlayNoPopover.js";import{overlayStack as y}from"./OverlayStack.js";import{VirtualTrigger as H}from"./VirtualTrigger.js";import{PlacementController as $}from"./PlacementController.js";export{LONGPRESS_INSTRUCTIONS}from"./LongpressController.js";import{strategies as D}from"./strategies.js";import{removeSlottableRequest as q,SlottableRequestEvent as N}from"./slottable-request-event.js";import F from"./overlay.css.js";const B="showPopover"in document.createElement("div");let p=L(R);B?p=O(p):p=M(p);const i=class i extends p{constructor(){super(...arguments);this._delayed=!1;this._disabled=!1;this.offset=0;this._open=!1;this.lastRequestSlottableState=!1;this.receivesFocus="auto";this._state="closed";this.triggerElement=null;this.type="auto";this.wasOpen=!1;this.closeOnFocusOut=e=>{if(!e.relatedTarget)return;const t=new Event("overlay-relation-query",{bubbles:!0,composed:!0});e.relatedTarget.addEventListener(t.type,o=>{o.composedPath().includes(this)||(this.open=!1)}),e.relatedTarget.dispatchEvent(t)}}get delayed(){var e;return((e=this.elements.at(-1))==null?void 0:e.hasAttribute("delayed"))||this._delayed}set delayed(e){this._delayed=e}get disabled(){return this._disabled}set disabled(e){var t;this._disabled=e,e?((t=this.strategy)==null||t.abort(),this.wasOpen=this.open,this.open=!1):(this.bindEvents(),this.open=this.open||this.wasOpen,this.wasOpen=!1)}get hasNonVirtualTrigger(){return!!this.triggerElement&&!(this.triggerElement instanceof H)}get placementController(){return this._placementController||(this._placementController=new $(this)),this._placementController}get open(){return this._open}set open(e){var t;e&&this.disabled||e!==this.open&&((t=this.strategy)!=null&&t.activelyOpening&&!e||(this._open=e,this.open&&(i.openCount+=1),this.requestUpdate("open",!this.open),this.open&&this.requestSlottable()))}get state(){return this._state}set state(e){var o;if(e===this.state)return;const t=this.state;this._state=e,(this.state==="opened"||this.state==="closed")&&((o=this.strategy)==null||o.shouldCompleteOpen()),this.requestUpdate("state",t)}get elementResolver(){return this._elementResolver||(this._elementResolver=new w(this)),this._elementResolver}get usesDialog(){return this.type==="modal"||this.type==="page"}get popoverValue(){if("popover"in this)switch(this.type){case"modal":case"page":return;case"hint":return"manual";default:return this.type}}get requiresPosition(){return!(this.type==="page"||!this.open||!this.triggerElement||!this.placement&&this.type!=="hint")}managePosition(){if(!this.requiresPosition||!this.open)return;const e=this.offset||0,t=this.triggerElement,o=this.placement||"right",s=this.tipPadding;this.placementController.placeOverlay(this.dialogEl,{offset:e,placement:o,tipPadding:s,trigger:t,type:this.type})}async managePopoverOpen(){super.managePopoverOpen();const e=this.open;if(this.open!==e||(await this.manageDelay(e),this.open!==e)||(await this.ensureOnDOM(e),this.open!==e))return;const t=await this.makeTransition(e);this.open===e&&await this.applyFocus(e,t)}async applyFocus(e,t){if(!(this.receivesFocus==="false"||this.type==="hint")){if(await v(),await v(),e===this.open&&!this.open){this.hasNonVirtualTrigger&&this.contains(this.getRootNode().activeElement)&&this.triggerElement.focus();return}t==null||t.focus()}}returnFocus(){var t;if(this.open||this.type==="hint")return;const e=()=>{var l,m;const o=[];let s=document.activeElement;for(;(l=s==null?void 0:s.shadowRoot)!=null&&l.activeElement;)s=s.shadowRoot.activeElement;for(;s;){const h=s.assignedSlot||s.parentElement||((m=s.getRootNode())==null?void 0:m.host);h&&o.push(h),s=h}return o};this.receivesFocus!=="false"&&((t=this.triggerElement)!=null&&t.focus)&&(this.contains(this.getRootNode().activeElement)||e().includes(this)||document.activeElement===document.body)&&this.triggerElement.focus()}async manageOpen(e){if(!(!this.isConnected&&this.open)&&(this.hasUpdated||await this.updateComplete,this.open?(y.add(this),this.willPreventClose&&(document.addEventListener("pointerup",()=>{this.dialogEl.classList.toggle("not-immediately-closable",!1),this.willPreventClose=!1},{once:!0}),this.dialogEl.classList.toggle("not-immediately-closable",!0))):(e&&this.dispose(),y.remove(this)),this.open&&this.state!=="opened"?this.state="opening":!this.open&&this.state!=="closed"&&(this.state="closing"),this.usesDialog?this.manageDialogOpen():this.managePopoverOpen(),this.type==="auto")){const t=this.getRootNode();this.open?t.addEventListener("focusout",this.closeOnFocusOut,{capture:!0}):t.removeEventListener("focusout",this.closeOnFocusOut,{capture:!0})}}bindEvents(){var e;(e=this.strategy)==null||e.abort(),this.strategy=void 0,this.hasNonVirtualTrigger&&this.triggerInteraction&&(this.strategy=new D[this.triggerInteraction](this.triggerElement,{overlay:this}))}handleBeforetoggle(e){e.newState!=="open"&&this.handleBrowserClose()}handleBrowserClose(){var e;if(!((e=this.strategy)!=null&&e.activelyOpening)){this.open=!1;return}this.manuallyKeepOpen()}manuallyKeepOpen(){this.open=!0,this.placementController.allowPlacementUpdate=!0,this.manageOpen(!1)}handleSlotchange(){var e,t;this.elements.length?this.hasNonVirtualTrigger&&((t=this.strategy)==null||t.prepareDescription(this.triggerElement)):(e=this.strategy)==null||e.releaseDescription()}shouldPreventClose(){const e=this.willPreventClose;return this.willPreventClose=!1,e}requestSlottable(){this.lastRequestSlottableState!==this.open&&(this.open||document.body.offsetHeight,this.dispatchEvent(new N("overlay-content",this.open?{}:q)),this.lastRequestSlottableState=this.open)}willUpdate(e){var o;if(this.hasAttribute("id")||this.setAttribute("id",`${this.tagName.toLowerCase()}-${S()}`),e.has("open")&&(this.hasUpdated||this.open)&&this.manageOpen(e.get("open")),e.has("trigger")){const[s,l]=((o=this.trigger)==null?void 0:o.split("@"))||[];this.elementResolver.selector=s?`#${s}`:"",this.triggerInteraction=l}let t=!1;e.has(T)&&(t=this.triggerElement,this.triggerElement=this.elementResolver.element),e.has("triggerElement")&&(t=e.get("triggerElement")),t!==!1&&this.bindEvents()}updated(e){super.updated(e),e.has("placement")&&(this.placement?this.dialogEl.setAttribute("actual-placement",this.placement):this.dialogEl.removeAttribute("actual-placement"),this.open&&typeof e.get("placement")!="undefined"&&this.placementController.resetOverlayPosition()),e.has("state")&&this.state==="closed"&&typeof e.get("state")!="undefined"&&this.placementController.clearOverlayPosition()}renderContent(){return d`
+"use strict";var b=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var r=(u,a,e,t)=>{for(var o=t>1?void 0:t?E(a,e):a,s=u.length-1,l;s>=0;s--)(l=u[s])&&(o=(t?l(a,e,o):l(o))||o);return t&&o&&b(a,e,o),o};import{html as d}from"@spectrum-web-components/base";import{property as n,query as g,queryAssignedElements as C,state as P}from"@spectrum-web-components/base/src/decorators.js";import{ElementResolutionController as w,elementResolverUpdatedSymbol as T}from"@spectrum-web-components/reactive-controllers/src/ElementResolution.js";import{ifDefined as c,styleMap as f}from"@spectrum-web-components/base/src/directives.js";import{randomID as S}from"@spectrum-web-components/shared/src/random-id.js";import{AbstractOverlay as R,nextFrame as v}from"./AbstractOverlay.js";import{OverlayDialog as L}from"./OverlayDialog.js";import{OverlayPopover as O}from"./OverlayPopover.js";import{OverlayNoPopover as M}from"./OverlayNoPopover.js";import{overlayStack as y}from"./OverlayStack.js";import{VirtualTrigger as H}from"./VirtualTrigger.js";import{PlacementController as $}from"./PlacementController.js";export{LONGPRESS_INSTRUCTIONS}from"./LongpressController.js";import{strategies as D}from"./strategies.js";import{removeSlottableRequest as q,SlottableRequestEvent as N}from"./slottable-request-event.js";import F from"./overlay.css.js";const B="showPopover"in document.createElement("div");let p=L(R);B?p=O(p):p=M(p);const i=class i extends p{constructor(){super(...arguments);this._delayed=!1;this._disabled=!1;this.offset=0;this._open=!1;this.lastRequestSlottableState=!1;this.receivesFocus="auto";this._state="closed";this.triggerElement=null;this.type="auto";this.wasOpen=!1;this.closeOnFocusOut=e=>{if(!e.relatedTarget)return;const t=new Event("overlay-relation-query",{bubbles:!0,composed:!0});e.relatedTarget.addEventListener(t.type,o=>{o.composedPath().includes(this)||(this.open=!1)}),e.relatedTarget.dispatchEvent(t)}}get delayed(){var e;return((e=this.elements.at(-1))==null?void 0:e.hasAttribute("delayed"))||this._delayed}set delayed(e){this._delayed=e}get disabled(){return this._disabled}set disabled(e){var t;this._disabled=e,e?((t=this.strategy)==null||t.abort(),this.wasOpen=this.open,this.open=!1):(this.bindEvents(),this.open=this.open||this.wasOpen,this.wasOpen=!1)}get hasNonVirtualTrigger(){return!!this.triggerElement&&!(this.triggerElement instanceof H)}get placementController(){return this._placementController||(this._placementController=new $(this)),this._placementController}get open(){return this._open}set open(e){var t;e&&this.disabled||e!==this.open&&((t=this.strategy)!=null&&t.activelyOpening&&!e||(this._open=e,this.open&&(i.openCount+=1),this.requestUpdate("open",!this.open),this.open&&this.requestSlottable()))}get state(){return this._state}set state(e){var o;if(e===this.state)return;const t=this.state;this._state=e,(this.state==="opened"||this.state==="closed")&&((o=this.strategy)==null||o.shouldCompleteOpen()),this.requestUpdate("state",t)}get elementResolver(){return this._elementResolver||(this._elementResolver=new w(this)),this._elementResolver}get usesDialog(){return this.type==="modal"||this.type==="page"}get popoverValue(){if("popover"in this)switch(this.type){case"modal":case"page":return;case"hint":return"manual";default:return this.type}}get requiresPosition(){return!(this.type==="page"||!this.open||!this.triggerElement||!this.placement&&this.type!=="hint")}managePosition(){if(!this.requiresPosition||!this.open)return;const e=this.offset||0,t=this.triggerElement,o=this.placement||"right",s=this.tipPadding;this.placementController.placeOverlay(this.dialogEl,{offset:e,placement:o,tipPadding:s,trigger:t,type:this.type})}async managePopoverOpen(){super.managePopoverOpen();const e=this.open;if(this.open!==e||(await this.manageDelay(e),this.open!==e)||(await this.ensureOnDOM(e),this.open!==e))return;const t=await this.makeTransition(e);this.open===e&&await this.applyFocus(e,t)}async applyFocus(e,t){if(!(this.receivesFocus==="false"||this.type==="hint")){if(await v(),await v(),e===this.open&&!this.open){this.hasNonVirtualTrigger&&this.contains(this.getRootNode().activeElement)&&this.triggerElement.focus();return}t==null||t.focus()}}returnFocus(){var t;if(this.open||this.type==="hint")return;const e=()=>{var l,m;const o=[];let s=document.activeElement;for(;(l=s==null?void 0:s.shadowRoot)!=null&&l.activeElement;)s=s.shadowRoot.activeElement;for(;s;){const h=s.assignedSlot||s.parentElement||((m=s.getRootNode())==null?void 0:m.host);h&&o.push(h),s=h}return o};this.receivesFocus!=="false"&&((t=this.triggerElement)!=null&&t.focus)&&(this.contains(this.getRootNode().activeElement)||e().includes(this)||document.activeElement===document.body)&&this.triggerElement.focus()}async manageOpen(e){if(!(!this.isConnected&&this.open)&&(this.hasUpdated||await this.updateComplete,this.open?(y.add(this),this.willPreventClose&&(document.addEventListener("pointerup",()=>{this.dialogEl.classList.toggle("not-immediately-closable",!1),this.willPreventClose=!1},{once:!0}),this.dialogEl.classList.toggle("not-immediately-closable",!0))):(e&&this.dispose(),y.remove(this)),this.open&&this.state!=="opened"?this.state="opening":!this.open&&this.state!=="closed"&&(this.state="closing"),this.usesDialog?this.manageDialogOpen():this.managePopoverOpen(),this.type==="auto")){const t=this.getRootNode();this.open?t.addEventListener("focusout",this.closeOnFocusOut,{capture:!0}):t.removeEventListener("focusout",this.closeOnFocusOut,{capture:!0})}}bindEvents(){var e;(e=this.strategy)==null||e.abort(),this.strategy=void 0,this.hasNonVirtualTrigger&&this.triggerInteraction&&(this.strategy=new D[this.triggerInteraction](this.triggerElement,{overlay:this}))}handleBeforetoggle(e){e.newState!=="open"&&this.handleBrowserClose(e)}handleBrowserClose(e){var t;if(e.stopPropagation(),!((t=this.strategy)!=null&&t.activelyOpening)){this.open=!1;return}this.manuallyKeepOpen()}manuallyKeepOpen(){this.open=!0,this.placementController.allowPlacementUpdate=!0,this.manageOpen(!1)}handleSlotchange(){var e,t;this.elements.length?this.hasNonVirtualTrigger&&((t=this.strategy)==null||t.prepareDescription(this.triggerElement)):(e=this.strategy)==null||e.releaseDescription()}shouldPreventClose(){const e=this.willPreventClose;return this.willPreventClose=!1,e}requestSlottable(){this.lastRequestSlottableState!==this.open&&(this.open||document.body.offsetHeight,this.dispatchEvent(new N("overlay-content",this.open?{}:q)),this.lastRequestSlottableState=this.open)}willUpdate(e){var o;if(this.hasAttribute("id")||this.setAttribute("id",`${this.tagName.toLowerCase()}-${S()}`),e.has("open")&&(this.hasUpdated||this.open)&&this.manageOpen(e.get("open")),e.has("trigger")){const[s,l]=((o=this.trigger)==null?void 0:o.split("@"))||[];this.elementResolver.selector=s?`#${s}`:"",this.triggerInteraction=l}let t=!1;e.has(T)&&(t=this.triggerElement,this.triggerElement=this.elementResolver.element),e.has("triggerElement")&&(t=e.get("triggerElement")),t!==!1&&this.bindEvents()}updated(e){super.updated(e),e.has("placement")&&(this.placement?this.dialogEl.setAttribute("actual-placement",this.placement):this.dialogEl.removeAttribute("actual-placement"),this.open&&typeof e.get("placement")!="undefined"&&this.placementController.resetOverlayPosition()),e.has("state")&&this.state==="closed"&&typeof e.get("state")!="undefined"&&this.placementController.clearOverlayPosition()}renderContent(){return d`
             <slot @slotchange=${this.handleSlotchange}></slot>
@@ -3,0 +3,0 @@ `}get dialogStyleMap(){return{"--swc-overlay-open-count":i.openCount.toString()}}renderDialog(){return d`

src/OverlayStack.d.ts

@@ -34,4 +34,4 @@ import { Overlay } from './Overlay.js';
      * When overlays are added manage the open state of exisiting overlays appropriately:
-     * - 'modal': should close other overlays
-     * - 'page': should close other overlays
+     * - 'modal': should close other non-'modal' and non-'manual' overlays
+     * - 'page': should close other non-'modal' and non-'manual' overlays
      * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
@@ -38,0 +38,0 @@ * - 'manual': shouldn't close other overlays

src/OverlayStack.dev.js

@@ -26,2 +26,4 @@ "use strict";
       if (!(composedPath == null ? void 0 : composedPath.length)) return;
+      const lastOverlay = this.lastOverlay;
+      this.lastOverlay = void 0;
       const lastIndex = this.stack.length - 1;
@@ -35,6 +37,7 @@ const nonAncestorOverlays = this.stack.filter((overlay, i) => {
             // `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction
-            i === lastIndex && overlay !== this.lastOverlay && overlay.triggerInteraction === "longpress"
+            i === lastIndex && overlay !== lastOverlay && overlay.triggerInteraction === "longpress"
           )
         );
-        return !inStack && !overlay.shouldPreventClose() && overlay.type !== "manual";
+        return !inStack && !overlay.shouldPreventClose() && overlay.type !== "manual" && // Don't close if this overlay is modal and not on top of the overlay stack.
+        !(overlay.type === "modal" && lastOverlay !== overlay);
       });
@@ -101,4 +104,4 @@ nonAncestorOverlays.reverse();
    * When overlays are added manage the open state of exisiting overlays appropriately:
-   * - 'modal': should close other overlays
-   * - 'page': should close other overlays
+   * - 'modal': should close other non-'modal' and non-'manual' overlays
+   * - 'page': should close other non-'modal' and non-'manual' overlays
    * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
@@ -129,3 +132,3 @@ * - 'manual': shouldn't close other overlays
             const inPath = path.find((el) => el === overlayEl);
-            if (!inPath && overlayEl.type !== "manual") {
+            if (!inPath && overlayEl.type !== "manual" && overlayEl.type !== "modal") {
               this.closeOverlay(overlayEl);
@@ -132,0 +135,0 @@ }

src/OverlayStack.js

@@ -1,2 +0,2 @@
-"use strict";const h="showPopover"in document.createElement("div");class c{constructor(){this.root=document.body;this.stack=[];this.handlePointerdown=t=>{this.pointerdownPath=t.composedPath(),this.lastOverlay=this.stack[this.stack.length-1]};this.handlePointerup=()=>{const t=this.pointerdownPath;if(this.pointerdownPath=void 0,!this.stack.length||!(t!=null&&t.length))return;const e=this.stack.length-1,s=this.stack.filter((n,i)=>!t.find(a=>a===n||a===(n==null?void 0:n.triggerElement)&&(n==null?void 0:n.type)==="hint"||i===e&&n!==this.lastOverlay&&n.triggerInteraction==="longpress")&&!n.shouldPreventClose()&&n.type!=="manual");s.reverse(),s.forEach(n=>{this.closeOverlay(n);let i=n.parentOverlayToForceClose;for(;i;)this.closeOverlay(i),i=i.parentOverlayToForceClose})};this.handleBeforetoggle=t=>{const{target:e,newState:s}=t;s!=="open"&&this.closeOverlay(e)};this.handleKeydown=t=>{if(t.code!=="Escape"||!this.stack.length)return;const e=this.stack[this.stack.length-1];if((e==null?void 0:e.type)==="page"){t.preventDefault();return}h||(e==null?void 0:e.type)!=="manual"&&e&&this.closeOverlay(e)};this.bindEvents()}get document(){return this.root.ownerDocument||document}bindEvents(){this.document.addEventListener("pointerdown",this.handlePointerdown),this.document.addEventListener("pointerup",this.handlePointerup),this.document.addEventListener("keydown",this.handleKeydown)}closeOverlay(t){const e=this.stack.indexOf(t);e>-1&&this.stack.splice(e,1),t.open=!1}overlaysByTriggerElement(t){return this.stack.filter(e=>e.triggerElement===t)}add(t){if(this.stack.includes(t)){const e=this.stack.indexOf(t);e>-1&&(this.stack.splice(e,1),this.stack.push(t));return}if(t.type==="auto"||t.type==="modal"||t.type==="page"){const e="sp-overlay-query-path",s=new Event(e,{composed:!0,bubbles:!0});t.addEventListener(e,n=>{const i=n.composedPath();this.stack.forEach(r=>{!i.find(o=>o===r)&&r.type!=="manual"&&this.closeOverlay(r)})},{once:!0}),t.dispatchEvent(s)}else if(t.type==="hint"){if(this.stack.some(s=>s.type!=="manual"&&s.triggerElement&&s.triggerElement===t.triggerElement)){t.open=!1;return}this.stack.forEach(s=>{s.type==="hint"&&this.closeOverlay(s)})}requestAnimationFrame(()=>{this.stack.push(t),t.addEventListener("beforetoggle",this.handleBeforetoggle,{once:!0})})}remove(t){this.closeOverlay(t)}}export const overlayStack=new c;
+"use strict";const h="showPopover"in document.createElement("div");class c{constructor(){this.root=document.body;this.stack=[];this.handlePointerdown=t=>{this.pointerdownPath=t.composedPath(),this.lastOverlay=this.stack[this.stack.length-1]};this.handlePointerup=()=>{const t=this.pointerdownPath;if(this.pointerdownPath=void 0,!this.stack.length||!(t!=null&&t.length))return;const e=this.lastOverlay;this.lastOverlay=void 0;const s=this.stack.length-1,r=this.stack.filter((n,i)=>!t.find(a=>a===n||a===(n==null?void 0:n.triggerElement)&&(n==null?void 0:n.type)==="hint"||i===s&&n!==e&&n.triggerInteraction==="longpress")&&!n.shouldPreventClose()&&n.type!=="manual"&&!(n.type==="modal"&&e!==n));r.reverse(),r.forEach(n=>{this.closeOverlay(n);let i=n.parentOverlayToForceClose;for(;i;)this.closeOverlay(i),i=i.parentOverlayToForceClose})};this.handleBeforetoggle=t=>{const{target:e,newState:s}=t;s!=="open"&&this.closeOverlay(e)};this.handleKeydown=t=>{if(t.code!=="Escape"||!this.stack.length)return;const e=this.stack[this.stack.length-1];if((e==null?void 0:e.type)==="page"){t.preventDefault();return}h||(e==null?void 0:e.type)!=="manual"&&e&&this.closeOverlay(e)};this.bindEvents()}get document(){return this.root.ownerDocument||document}bindEvents(){this.document.addEventListener("pointerdown",this.handlePointerdown),this.document.addEventListener("pointerup",this.handlePointerup),this.document.addEventListener("keydown",this.handleKeydown)}closeOverlay(t){const e=this.stack.indexOf(t);e>-1&&this.stack.splice(e,1),t.open=!1}overlaysByTriggerElement(t){return this.stack.filter(e=>e.triggerElement===t)}add(t){if(this.stack.includes(t)){const e=this.stack.indexOf(t);e>-1&&(this.stack.splice(e,1),this.stack.push(t));return}if(t.type==="auto"||t.type==="modal"||t.type==="page"){const e="sp-overlay-query-path",s=new Event(e,{composed:!0,bubbles:!0});t.addEventListener(e,r=>{const n=r.composedPath();this.stack.forEach(i=>{!n.find(a=>a===i)&&i.type!=="manual"&&i.type!=="modal"&&this.closeOverlay(i)})},{once:!0}),t.dispatchEvent(s)}else if(t.type==="hint"){if(this.stack.some(s=>s.type!=="manual"&&s.triggerElement&&s.triggerElement===t.triggerElement)){t.open=!1;return}this.stack.forEach(s=>{s.type==="hint"&&this.closeOverlay(s)})}requestAnimationFrame(()=>{this.stack.push(t),t.addEventListener("beforetoggle",this.handleBeforetoggle,{once:!0})})}remove(t){this.closeOverlay(t)}}export const overlayStack=new c;
 //# sourceMappingURL=OverlayStack.js.map

test/overlay-element.test.js

@@ -335,3 +335,3 @@ "use strict";
       });
-      it('closes "page" overlays when opening', async function() {
+      it('should not close "modal" overlays when opening', async function() {
         let opened = oneEvent(this.modal, "sp-opened");
@@ -346,7 +346,5 @@ this.modal.open = true;
         opened = oneEvent(this.page, "sp-opened");
-        const closed = oneEvent(this.modal, "sp-closed");
         this.page.open = true;
         await opened;
-        await closed;
-        expect(this.modal.open).to.be.false;
+        expect(this.modal.open).to.be.true;
         expect(this.page.open).to.be.true;
@@ -353,0 +351,0 @@ expect(this.hint.open).to.be.false;

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

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

License

This 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

Improved metrics

Total package byte prevSize

1322196

increased by0.12%

Lines of code

11589

increased by0.02%

Dependency changes

• Updated@spectrum-web-components/action-button@^1.1.0-beta.27

• Updated@spectrum-web-components/base@^1.1.0-beta.27

• Updated@spectrum-web-components/reactive-controllers@^1.1.0-beta.27

• Updated@spectrum-web-components/shared@^1.1.0-beta.27

• Updated@spectrum-web-components/theme@^1.1.0-beta.27