@spectrum-web-components/overlay 1.3.0-testing.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/overlay",
|
|
3
|
-
"version": "1.3.0
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -160,11 +160,11 @@
|
|
|
160
160
|
"dependencies": {
|
|
161
161
|
"@floating-ui/dom": "^1.6.1",
|
|
162
162
|
"@floating-ui/utils": "^0.2.1",
|
|
163
|
-
"@spectrum-web-components/action-button": "
|
|
164
|
-
"@spectrum-web-components/base": "
|
|
165
|
-
"@spectrum-web-components/reactive-controllers": "
|
|
166
|
-
"@spectrum-web-components/shared": "
|
|
167
|
-
"@spectrum-web-components/theme": "
|
|
163
|
+
"@spectrum-web-components/action-button": "1.3.0",
|
|
164
|
+
"@spectrum-web-components/base": "1.3.0",
|
|
165
|
+
"@spectrum-web-components/reactive-controllers": "1.3.0",
|
|
166
|
+
"@spectrum-web-components/shared": "1.3.0",
|
|
167
|
+
"@spectrum-web-components/theme": "1.3.0"
|
|
168
168
|
},
|
|
169
169
|
"types": "./src/index.d.ts",
|
|
170
170
|
"customElements": "custom-elements.json",
|
package/src/OverlayStack.dev.js
CHANGED
|
@@ -62,10 +62,11 @@ class OverlayStack {
|
|
|
62
62
|
event.preventDefault();
|
|
63
63
|
return;
|
|
64
64
|
}
|
|
65
|
-
if (supportsPopover) return;
|
|
66
65
|
if ((last == null ? void 0 : last.type) === "manual") {
|
|
66
|
+
this.closeOverlay(last);
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
|
+
if (supportsPopover) return;
|
|
69
70
|
if (!last) return;
|
|
70
71
|
this.closeOverlay(last);
|
|
71
72
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayStack.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Overlay } from './Overlay.dev.js'\n\nconst supportsPopover = 'showPopover' in document.createElement('div');\n\nclass OverlayStack {\n private get document(): Document {\n return this.root.ownerDocument /* c8 ignore next */ || document;\n }\n\n private pointerdownPath?: EventTarget[];\n\n private lastOverlay?: Overlay;\n\n private root: HTMLElement = document.body;\n\n stack: Overlay[] = [];\n\n constructor() {\n this.bindEvents();\n }\n\n bindEvents(): void {\n this.document.addEventListener('pointerdown', this.handlePointerdown);\n this.document.addEventListener('pointerup', this.handlePointerup);\n this.document.addEventListener('keydown', this.handleKeydown);\n }\n\n private closeOverlay(overlay: Overlay): void {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n }\n overlay.open = false;\n }\n\n /**\n * Cach the `pointerdownTarget` for later testing\n *\n * @param event {ClickEvent}\n */\n handlePointerdown = (event: Event): void => {\n this.pointerdownPath = event.composedPath();\n this.lastOverlay = this.stack[this.stack.length - 1];\n };\n\n /**\n * Close all overlays that are not ancestors of this click event\n *\n * @param event {ClickEvent}\n */\n handlePointerup = (): void => {\n // Test against the composed path in `pointerdown` in case the visitor moved their\n // pointer during the course of the interaction.\n // Ensure that this value is cleared even if the work in this method goes undone.\n const composedPath = this.pointerdownPath;\n this.pointerdownPath = undefined;\n if (!this.stack.length) return;\n if (!composedPath?.length) return;\n const lastOverlay = this.lastOverlay;\n this.lastOverlay = undefined;\n\n const lastIndex = this.stack.length - 1;\n const nonAncestorOverlays = this.stack.filter((overlay, i) => {\n const inStack = composedPath.find(\n (el) =>\n // The Overlay is in the stack\n el === overlay ||\n // The Overlay trigger is in the stack and the Overlay is a \"hint\"\n (el === overlay?.triggerElement &&\n 'hint' === overlay?.type) ||\n // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a\n // `triggerInteraction` of \"longpress\", meaning it was opened by this poitner interaction\n (i === lastIndex &&\n overlay !== lastOverlay &&\n overlay.triggerInteraction === 'longpress')\n );\n return (\n !inStack &&\n !overlay.shouldPreventClose() &&\n overlay.type !== 'manual' &&\n // Don't close if this overlay is modal and not on top of the overlay stack.\n !(overlay.type === 'modal' && lastOverlay !== overlay)\n );\n }) as Overlay[];\n nonAncestorOverlays.reverse();\n nonAncestorOverlays.forEach((overlay) => {\n this.closeOverlay(overlay);\n let parentToClose = overlay.parentOverlayToForceClose;\n while (parentToClose) {\n this.closeOverlay(parentToClose);\n parentToClose = parentToClose.parentOverlayToForceClose;\n }\n });\n };\n\n handleBeforetoggle = (event: Event): void => {\n const { target, newState: open } = event as Event & {\n newState: string;\n };\n if (open === 'open') return;\n this.closeOverlay(target as Overlay);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Escape') return;\n if (!this.stack.length) return;\n const last = this.stack[this.stack.length - 1];\n if (last?.type === 'page') {\n event.preventDefault();\n return;\n }\n if (
|
|
5
|
-
"mappings": ";AAaA,MAAM,kBAAkB,iBAAiB,SAAS,cAAc,KAAK;AAErE,MAAM,aAAa;AAAA,EAaf,cAAc;AAJd,SAAQ,OAAoB,SAAS;AAErC,iBAAmB,CAAC;AAyBpB;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAoB,CAAC,UAAuB;AACxC,WAAK,kBAAkB,MAAM,aAAa;AAC1C,WAAK,cAAc,KAAK,MAAM,KAAK,MAAM,SAAS,CAAC;AAAA,IACvD;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAkB,MAAY;AAI1B,YAAM,eAAe,KAAK;AAC1B,WAAK,kBAAkB;AACvB,UAAI,CAAC,KAAK,MAAM,OAAQ;AACxB,UAAI,EAAC,6CAAc,QAAQ;AAC3B,YAAM,cAAc,KAAK;AACzB,WAAK,cAAc;AAEnB,YAAM,YAAY,KAAK,MAAM,SAAS;AACtC,YAAM,sBAAsB,KAAK,MAAM,OAAO,CAAC,SAAS,MAAM;AAC1D,cAAM,UAAU,aAAa;AAAA,UACzB,CAAC;AAAA;AAAA,YAEG,OAAO;AAAA,YAEN,QAAO,mCAAS,mBACb,YAAW,mCAAS;AAAA;AAAA,YAGvB,MAAM,aACH,YAAY,eACZ,QAAQ,uBAAuB;AAAA;AAAA,QAC3C;AACA,eACI,CAAC,WACD,CAAC,QAAQ,mBAAmB,KAC5B,QAAQ,SAAS;AAAA,QAEjB,EAAE,QAAQ,SAAS,WAAW,gBAAgB;AAAA,MAEtD,CAAC;AACD,0BAAoB,QAAQ;AAC5B,0BAAoB,QAAQ,CAAC,YAAY;AACrC,aAAK,aAAa,OAAO;AACzB,YAAI,gBAAgB,QAAQ;AAC5B,eAAO,eAAe;AAClB,eAAK,aAAa,aAAa;AAC/B,0BAAgB,cAAc;AAAA,QAClC;AAAA,MACJ,CAAC;AAAA,IACL;AAEA,8BAAqB,CAAC,UAAuB;AACzC,YAAM,EAAE,QAAQ,UAAU,KAAK,IAAI;AAGnC,UAAI,SAAS,OAAQ;AACrB,WAAK,aAAa,MAAiB;AAAA,IACvC;AAEA,SAAQ,gBAAgB,CAAC,UAA+B;AACpD,UAAI,MAAM,SAAS,SAAU;AAC7B,UAAI,CAAC,KAAK,MAAM,OAAQ;AACxB,YAAM,OAAO,KAAK,MAAM,KAAK,MAAM,SAAS,CAAC;AAC7C,WAAI,6BAAM,UAAS,QAAQ;AACvB,cAAM,eAAe;AACrB;AAAA,MACJ;AACA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Overlay } from './Overlay.dev.js'\n\nconst supportsPopover = 'showPopover' in document.createElement('div');\n\nclass OverlayStack {\n private get document(): Document {\n return this.root.ownerDocument /* c8 ignore next */ || document;\n }\n\n private pointerdownPath?: EventTarget[];\n\n private lastOverlay?: Overlay;\n\n private root: HTMLElement = document.body;\n\n stack: Overlay[] = [];\n\n constructor() {\n this.bindEvents();\n }\n\n bindEvents(): void {\n this.document.addEventListener('pointerdown', this.handlePointerdown);\n this.document.addEventListener('pointerup', this.handlePointerup);\n this.document.addEventListener('keydown', this.handleKeydown);\n }\n\n private closeOverlay(overlay: Overlay): void {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n }\n overlay.open = false;\n }\n\n /**\n * Cach the `pointerdownTarget` for later testing\n *\n * @param event {ClickEvent}\n */\n handlePointerdown = (event: Event): void => {\n this.pointerdownPath = event.composedPath();\n this.lastOverlay = this.stack[this.stack.length - 1];\n };\n\n /**\n * Close all overlays that are not ancestors of this click event\n *\n * @param event {ClickEvent}\n */\n handlePointerup = (): void => {\n // Test against the composed path in `pointerdown` in case the visitor moved their\n // pointer during the course of the interaction.\n // Ensure that this value is cleared even if the work in this method goes undone.\n const composedPath = this.pointerdownPath;\n this.pointerdownPath = undefined;\n if (!this.stack.length) return;\n if (!composedPath?.length) return;\n const lastOverlay = this.lastOverlay;\n this.lastOverlay = undefined;\n\n const lastIndex = this.stack.length - 1;\n const nonAncestorOverlays = this.stack.filter((overlay, i) => {\n const inStack = composedPath.find(\n (el) =>\n // The Overlay is in the stack\n el === overlay ||\n // The Overlay trigger is in the stack and the Overlay is a \"hint\"\n (el === overlay?.triggerElement &&\n 'hint' === overlay?.type) ||\n // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a\n // `triggerInteraction` of \"longpress\", meaning it was opened by this poitner interaction\n (i === lastIndex &&\n overlay !== lastOverlay &&\n overlay.triggerInteraction === 'longpress')\n );\n return (\n !inStack &&\n !overlay.shouldPreventClose() &&\n overlay.type !== 'manual' &&\n // Don't close if this overlay is modal and not on top of the overlay stack.\n !(overlay.type === 'modal' && lastOverlay !== overlay)\n );\n }) as Overlay[];\n nonAncestorOverlays.reverse();\n nonAncestorOverlays.forEach((overlay) => {\n this.closeOverlay(overlay);\n let parentToClose = overlay.parentOverlayToForceClose;\n while (parentToClose) {\n this.closeOverlay(parentToClose);\n parentToClose = parentToClose.parentOverlayToForceClose;\n }\n });\n };\n\n handleBeforetoggle = (event: Event): void => {\n const { target, newState: open } = event as Event & {\n newState: string;\n };\n if (open === 'open') return;\n this.closeOverlay(target as Overlay);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Escape') return;\n if (!this.stack.length) return;\n const last = this.stack[this.stack.length - 1];\n if (last?.type === 'page') {\n event.preventDefault();\n return;\n }\n if (last?.type === 'manual') {\n // Manual overlays should close on \"Escape\" key, but not when losing focus or interacting with other parts of the page.\n this.closeOverlay(last);\n return;\n }\n if (supportsPopover) return;\n if (!last) return;\n this.closeOverlay(last);\n };\n\n /**\n * Get an array of Overlays that all share the same trigger element.\n *\n * @param triggerElement {HTMLELement}\n * @returns {Overlay[]}\n */\n overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {\n return this.stack.filter(\n (overlay) => overlay.triggerElement === triggerElement\n );\n }\n\n /**\n * When overlays are added manage the open state of exisiting overlays appropriately:\n * - 'modal': should close other non-'modal' and non-'manual' overlays\n * - 'page': should close other non-'modal' and non-'manual' overlays\n * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays\n * - 'manual': shouldn't close other overlays\n * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger\n */\n add(overlay: Overlay): void {\n if (this.stack.includes(overlay)) {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n this.stack.push(overlay);\n }\n return;\n }\n if (\n overlay.type === 'auto' ||\n overlay.type === 'modal' ||\n overlay.type === 'page'\n ) {\n // manage closing open overlays\n const queryPathEventName = 'sp-overlay-query-path';\n const queryPathEvent = new Event(queryPathEventName, {\n composed: true,\n bubbles: true,\n });\n overlay.addEventListener(\n queryPathEventName,\n (event: Event) => {\n const path = event.composedPath();\n this.stack.forEach((overlayEl) => {\n const inPath = path.find((el) => el === overlayEl);\n if (\n !inPath &&\n overlayEl.type !== 'manual' &&\n overlayEl.type !== 'modal'\n ) {\n this.closeOverlay(overlayEl);\n }\n });\n },\n { once: true }\n );\n overlay.dispatchEvent(queryPathEvent);\n } else if (overlay.type === 'hint') {\n const hasPrevious = this.stack.some((overlayEl) => {\n return (\n overlayEl.type !== 'manual' &&\n overlayEl.triggerElement &&\n overlayEl.triggerElement === overlay.triggerElement\n );\n });\n if (hasPrevious) {\n overlay.open = false;\n return;\n }\n this.stack.forEach((overlayEl) => {\n if (overlayEl.type === 'hint') {\n this.closeOverlay(overlayEl);\n }\n });\n }\n requestAnimationFrame(() => {\n this.stack.push(overlay);\n overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {\n once: true,\n });\n });\n }\n\n remove(overlay: Overlay): void {\n this.closeOverlay(overlay);\n }\n}\n\nexport const overlayStack = new OverlayStack();\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/OverlayStack.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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}
|
|
1
|
+
"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}if((e==null?void 0:e.type)==="manual"){this.closeOverlay(e);return}h||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;
|
|
2
2
|
//# sourceMappingURL=OverlayStack.js.map
|
package/src/OverlayStack.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayStack.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Overlay } from './Overlay.js';\n\nconst supportsPopover = 'showPopover' in document.createElement('div');\n\nclass OverlayStack {\n private get document(): Document {\n return this.root.ownerDocument /* c8 ignore next */ || document;\n }\n\n private pointerdownPath?: EventTarget[];\n\n private lastOverlay?: Overlay;\n\n private root: HTMLElement = document.body;\n\n stack: Overlay[] = [];\n\n constructor() {\n this.bindEvents();\n }\n\n bindEvents(): void {\n this.document.addEventListener('pointerdown', this.handlePointerdown);\n this.document.addEventListener('pointerup', this.handlePointerup);\n this.document.addEventListener('keydown', this.handleKeydown);\n }\n\n private closeOverlay(overlay: Overlay): void {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n }\n overlay.open = false;\n }\n\n /**\n * Cach the `pointerdownTarget` for later testing\n *\n * @param event {ClickEvent}\n */\n handlePointerdown = (event: Event): void => {\n this.pointerdownPath = event.composedPath();\n this.lastOverlay = this.stack[this.stack.length - 1];\n };\n\n /**\n * Close all overlays that are not ancestors of this click event\n *\n * @param event {ClickEvent}\n */\n handlePointerup = (): void => {\n // Test against the composed path in `pointerdown` in case the visitor moved their\n // pointer during the course of the interaction.\n // Ensure that this value is cleared even if the work in this method goes undone.\n const composedPath = this.pointerdownPath;\n this.pointerdownPath = undefined;\n if (!this.stack.length) return;\n if (!composedPath?.length) return;\n const lastOverlay = this.lastOverlay;\n this.lastOverlay = undefined;\n\n const lastIndex = this.stack.length - 1;\n const nonAncestorOverlays = this.stack.filter((overlay, i) => {\n const inStack = composedPath.find(\n (el) =>\n // The Overlay is in the stack\n el === overlay ||\n // The Overlay trigger is in the stack and the Overlay is a \"hint\"\n (el === overlay?.triggerElement &&\n 'hint' === overlay?.type) ||\n // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a\n // `triggerInteraction` of \"longpress\", meaning it was opened by this poitner interaction\n (i === lastIndex &&\n overlay !== lastOverlay &&\n overlay.triggerInteraction === 'longpress')\n );\n return (\n !inStack &&\n !overlay.shouldPreventClose() &&\n overlay.type !== 'manual' &&\n // Don't close if this overlay is modal and not on top of the overlay stack.\n !(overlay.type === 'modal' && lastOverlay !== overlay)\n );\n }) as Overlay[];\n nonAncestorOverlays.reverse();\n nonAncestorOverlays.forEach((overlay) => {\n this.closeOverlay(overlay);\n let parentToClose = overlay.parentOverlayToForceClose;\n while (parentToClose) {\n this.closeOverlay(parentToClose);\n parentToClose = parentToClose.parentOverlayToForceClose;\n }\n });\n };\n\n handleBeforetoggle = (event: Event): void => {\n const { target, newState: open } = event as Event & {\n newState: string;\n };\n if (open === 'open') return;\n this.closeOverlay(target as Overlay);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Escape') return;\n if (!this.stack.length) return;\n const last = this.stack[this.stack.length - 1];\n if (last?.type === 'page') {\n event.preventDefault();\n return;\n }\n if (
|
|
5
|
-
"mappings": "aAaA,MAAMA,EAAkB,gBAAiB,SAAS,cAAc,KAAK,EAErE,MAAMC,CAAa,CAaf,aAAc,CAJd,KAAQ,KAAoB,SAAS,KAErC,WAAmB,CAAC,EAyBpB,uBAAqBC,GAAuB,CACxC,KAAK,gBAAkBA,EAAM,aAAa,EAC1C,KAAK,YAAc,KAAK,MAAM,KAAK,MAAM,OAAS,CAAC,CACvD,EAOA,qBAAkB,IAAY,CAI1B,MAAMC,EAAe,KAAK,gBAG1B,GAFA,KAAK,gBAAkB,OACnB,CAAC,KAAK,MAAM,QACZ,EAACA,GAAA,MAAAA,EAAc,QAAQ,OAC3B,MAAMC,EAAc,KAAK,YACzB,KAAK,YAAc,OAEnB,MAAMC,EAAY,KAAK,MAAM,OAAS,EAChCC,EAAsB,KAAK,MAAM,OAAO,CAACC,EAAS,IAehD,CAdYJ,EAAa,KACxBK,GAEGA,IAAOD,GAENC,KAAOD,GAAA,YAAAA,EAAS,kBACFA,GAAA,YAAAA,EAAS,QAApB,QAGH,IAAMF,GACHE,IAAYH,GACZG,EAAQ,qBAAuB,WAC3C,GAGI,CAACA,EAAQ,mBAAmB,GAC5BA,EAAQ,OAAS,UAEjB,EAAEA,EAAQ,OAAS,SAAWH,IAAgBG,EAErD,EACDD,EAAoB,QAAQ,EAC5BA,EAAoB,QAASC,GAAY,CACrC,KAAK,aAAaA,CAAO,EACzB,IAAIE,EAAgBF,EAAQ,0BAC5B,KAAOE,GACH,KAAK,aAAaA,CAAa,EAC/BA,EAAgBA,EAAc,yBAEtC,CAAC,CACL,EAEA,wBAAsBP,GAAuB,CACzC,KAAM,CAAE,OAAAQ,EAAQ,SAAUC,CAAK,EAAIT,EAG/BS,IAAS,QACb,KAAK,aAAaD,CAAiB,CACvC,EAEA,KAAQ,cAAiBR,GAA+B,CAEpD,GADIA,EAAM,OAAS,UACf,CAAC,KAAK,MAAM,OAAQ,OACxB,MAAMU,EAAO,KAAK,MAAM,KAAK,MAAM,OAAS,CAAC,EAC7C,IAAIA,GAAA,YAAAA,EAAM,QAAS,OAAQ,CACvBV,EAAM,eAAe,EACrB,MACJ,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Overlay } from './Overlay.js';\n\nconst supportsPopover = 'showPopover' in document.createElement('div');\n\nclass OverlayStack {\n private get document(): Document {\n return this.root.ownerDocument /* c8 ignore next */ || document;\n }\n\n private pointerdownPath?: EventTarget[];\n\n private lastOverlay?: Overlay;\n\n private root: HTMLElement = document.body;\n\n stack: Overlay[] = [];\n\n constructor() {\n this.bindEvents();\n }\n\n bindEvents(): void {\n this.document.addEventListener('pointerdown', this.handlePointerdown);\n this.document.addEventListener('pointerup', this.handlePointerup);\n this.document.addEventListener('keydown', this.handleKeydown);\n }\n\n private closeOverlay(overlay: Overlay): void {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n }\n overlay.open = false;\n }\n\n /**\n * Cach the `pointerdownTarget` for later testing\n *\n * @param event {ClickEvent}\n */\n handlePointerdown = (event: Event): void => {\n this.pointerdownPath = event.composedPath();\n this.lastOverlay = this.stack[this.stack.length - 1];\n };\n\n /**\n * Close all overlays that are not ancestors of this click event\n *\n * @param event {ClickEvent}\n */\n handlePointerup = (): void => {\n // Test against the composed path in `pointerdown` in case the visitor moved their\n // pointer during the course of the interaction.\n // Ensure that this value is cleared even if the work in this method goes undone.\n const composedPath = this.pointerdownPath;\n this.pointerdownPath = undefined;\n if (!this.stack.length) return;\n if (!composedPath?.length) return;\n const lastOverlay = this.lastOverlay;\n this.lastOverlay = undefined;\n\n const lastIndex = this.stack.length - 1;\n const nonAncestorOverlays = this.stack.filter((overlay, i) => {\n const inStack = composedPath.find(\n (el) =>\n // The Overlay is in the stack\n el === overlay ||\n // The Overlay trigger is in the stack and the Overlay is a \"hint\"\n (el === overlay?.triggerElement &&\n 'hint' === overlay?.type) ||\n // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a\n // `triggerInteraction` of \"longpress\", meaning it was opened by this poitner interaction\n (i === lastIndex &&\n overlay !== lastOverlay &&\n overlay.triggerInteraction === 'longpress')\n );\n return (\n !inStack &&\n !overlay.shouldPreventClose() &&\n overlay.type !== 'manual' &&\n // Don't close if this overlay is modal and not on top of the overlay stack.\n !(overlay.type === 'modal' && lastOverlay !== overlay)\n );\n }) as Overlay[];\n nonAncestorOverlays.reverse();\n nonAncestorOverlays.forEach((overlay) => {\n this.closeOverlay(overlay);\n let parentToClose = overlay.parentOverlayToForceClose;\n while (parentToClose) {\n this.closeOverlay(parentToClose);\n parentToClose = parentToClose.parentOverlayToForceClose;\n }\n });\n };\n\n handleBeforetoggle = (event: Event): void => {\n const { target, newState: open } = event as Event & {\n newState: string;\n };\n if (open === 'open') return;\n this.closeOverlay(target as Overlay);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Escape') return;\n if (!this.stack.length) return;\n const last = this.stack[this.stack.length - 1];\n if (last?.type === 'page') {\n event.preventDefault();\n return;\n }\n if (last?.type === 'manual') {\n // Manual overlays should close on \"Escape\" key, but not when losing focus or interacting with other parts of the page.\n this.closeOverlay(last);\n return;\n }\n if (supportsPopover) return;\n if (!last) return;\n this.closeOverlay(last);\n };\n\n /**\n * Get an array of Overlays that all share the same trigger element.\n *\n * @param triggerElement {HTMLELement}\n * @returns {Overlay[]}\n */\n overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {\n return this.stack.filter(\n (overlay) => overlay.triggerElement === triggerElement\n );\n }\n\n /**\n * When overlays are added manage the open state of exisiting overlays appropriately:\n * - 'modal': should close other non-'modal' and non-'manual' overlays\n * - 'page': should close other non-'modal' and non-'manual' overlays\n * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays\n * - 'manual': shouldn't close other overlays\n * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger\n */\n add(overlay: Overlay): void {\n if (this.stack.includes(overlay)) {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n this.stack.push(overlay);\n }\n return;\n }\n if (\n overlay.type === 'auto' ||\n overlay.type === 'modal' ||\n overlay.type === 'page'\n ) {\n // manage closing open overlays\n const queryPathEventName = 'sp-overlay-query-path';\n const queryPathEvent = new Event(queryPathEventName, {\n composed: true,\n bubbles: true,\n });\n overlay.addEventListener(\n queryPathEventName,\n (event: Event) => {\n const path = event.composedPath();\n this.stack.forEach((overlayEl) => {\n const inPath = path.find((el) => el === overlayEl);\n if (\n !inPath &&\n overlayEl.type !== 'manual' &&\n overlayEl.type !== 'modal'\n ) {\n this.closeOverlay(overlayEl);\n }\n });\n },\n { once: true }\n );\n overlay.dispatchEvent(queryPathEvent);\n } else if (overlay.type === 'hint') {\n const hasPrevious = this.stack.some((overlayEl) => {\n return (\n overlayEl.type !== 'manual' &&\n overlayEl.triggerElement &&\n overlayEl.triggerElement === overlay.triggerElement\n );\n });\n if (hasPrevious) {\n overlay.open = false;\n return;\n }\n this.stack.forEach((overlayEl) => {\n if (overlayEl.type === 'hint') {\n this.closeOverlay(overlayEl);\n }\n });\n }\n requestAnimationFrame(() => {\n this.stack.push(overlay);\n overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {\n once: true,\n });\n });\n }\n\n remove(overlay: Overlay): void {\n this.closeOverlay(overlay);\n }\n}\n\nexport const overlayStack = new OverlayStack();\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["supportsPopover", "OverlayStack", "event", "composedPath", "lastOverlay", "lastIndex", "nonAncestorOverlays", "overlay", "el", "parentToClose", "target", "open", "last", "overlayIndex", "triggerElement", "queryPathEventName", "queryPathEvent", "path", "overlayEl"]
|
|
7
7
|
}
|