@spectrum-web-components/overlay 1.0.0-rc.9 → 1.0.1-color-testing
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 +7 -7
- package/src/Overlay.d.ts +349 -19
- package/src/Overlay.dev.js +276 -16
- package/src/Overlay.dev.js.map +2 -2
- package/src/Overlay.js +4 -4
- package/src/Overlay.js.map +3 -3
- package/src/OverlayDialog.dev.js +1 -0
- package/src/OverlayDialog.dev.js.map +2 -2
- package/src/OverlayDialog.js +1 -1
- package/src/OverlayDialog.js.map +2 -2
- package/src/OverlayPopover.dev.js +3 -3
- package/src/OverlayPopover.dev.js.map +2 -2
- package/src/OverlayPopover.js +1 -1
- package/src/OverlayPopover.js.map +2 -2
- package/src/OverlayStack.d.ts +2 -2
- package/src/OverlayStack.dev.js +8 -5
- package/src/OverlayStack.dev.js.map +2 -2
- package/src/OverlayStack.js +1 -1
- package/src/OverlayStack.js.map +3 -3
- package/src/PlacementController.d.ts +118 -1
- package/src/PlacementController.dev.js +75 -0
- package/src/PlacementController.dev.js.map +2 -2
- package/src/PlacementController.js.map +2 -2
- package/stories/index.js +9 -1
- package/stories/index.js.map +2 -2
- package/test/overlay-element.test.js +2 -4
- package/test/overlay-element.test.js.map +2 -2
package/src/OverlayDialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import{firstFocusableIn as u,firstFocusableSlottedIn as d}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as f}from"./VirtualTrigger.js";import{guaranteedAllTransitionend as E,nextFrame as
|
|
1
|
+
"use strict";import{firstFocusableIn as u,firstFocusableSlottedIn as d}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as f}from"./VirtualTrigger.js";import{guaranteedAllTransitionend as E,nextFrame as a}from"./AbstractOverlay.js";import{BeforetoggleClosedEvent as v,BeforetoggleOpenEvent as g,OverlayStateEvent as l}from"./events.js";import{userFocusableSelector as y}from"@spectrum-web-components/shared";export function OverlayDialog(h){class p extends h{async manageDialogOpen(){const e=this.open;if(await a(),await this.managePosition(),this.open!==e)return;const i=await this.dialogMakeTransition(e);this.open===e&&await this.dialogApplyFocus(e,i)}async dialogMakeTransition(e){let i=null;const m=(t,s)=>async()=>{if(t.open=e,!e){const n=()=>{t.removeEventListener("close",n),c(t,s)};t.addEventListener("close",n)}if(s>0)return;const o=e?g:v;this.dispatchEvent(new o),e&&(t.matches(y)&&(i=t),i=i||u(t),i||t.querySelectorAll("slot").forEach(r=>{i||(i=d(r))}),!(!this.isConnected||this.dialogEl.open)&&this.dialogEl.showModal())},c=(t,s)=>()=>{if(this.open!==e)return;const o=e?"sp-opened":"sp-closed";if(s>0){t.dispatchEvent(new l(o,this,{interaction:this.type,publish:!1}));return}if(!this.isConnected||e!==this.open)return;const n=async()=>{const r=this.triggerElement instanceof f;this.dispatchEvent(new l(o,this,{interaction:this.type,publish:r})),t.dispatchEvent(new l(o,this,{interaction:this.type,publish:!1})),this.triggerElement&&!r&&this.triggerElement.dispatchEvent(new l(o,this,{interaction:this.type,publish:!0})),this.state=e?"opened":"closed",this.returnFocus(),await a(),await a(),e===this.open&&e===!1&&this.requestSlottable()};!e&&this.dialogEl.open?(this.dialogEl.addEventListener("close",()=>{n()},{once:!0}),this.dialogEl.close()):n()};return this.elements.forEach((t,s)=>{E(t,m(t,s),c(t,s))}),i}async dialogApplyFocus(e,i){this.applyFocus(e,i)}}return p}
|
|
2
2
|
//# sourceMappingURL=OverlayDialog.js.map
|
package/src/OverlayDialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayDialog.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 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\n\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*/\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport { guaranteedAllTransitionend, nextFrame } from './AbstractOverlay.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nexport function OverlayDialog<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithDialog extends constructor {\n protected override async manageDialogOpen(): Promise<void> {\n const targetOpenState = this.open;\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.dialogMakeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.dialogApplyFocus(targetOpenState, focusEl);\n }\n\n protected async dialogMakeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n let focusEl = null as HTMLElement | null;\n const start =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n el.open = targetOpenState;\n if (!targetOpenState) {\n const close = (): void => {\n el.removeEventListener('close', close);\n finish(el, index);\n };\n el.addEventListener('close', close);\n }\n if (index > 0) {\n // Announce workflow on the first element _only_.\n return;\n }\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n if (!targetOpenState) {\n // Show/focus workflow when opening _only_.\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (!focusEl) {\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n }\n if (!this.isConnected || this.dialogEl.open) {\n // In both of these cases the browser will error.\n // You can neither \"reopen\" a <dialog> or open one that is not on the DOM.\n return;\n }\n this.dialogEl.showModal();\n };\n const finish = (el: OpenableElement, index: number) => (): void => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n if (!this.isConnected || targetOpenState !== this.open) {\n // Don't lead into the `.close()` workflow if not connected to the DOM.\n // The browser will error in this case.\n return;\n }\n const reportChange = async (): Promise<void> => {\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (!targetOpenState && this.dialogEl.open) {\n this.dialogEl.addEventListener(\n 'close',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.close();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n protected async dialogApplyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n /**\n * Focus should be handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n **/\n this.applyFocus(targetOpenState, focusEl);\n }\n }\n return OverlayWithDialog;\n}\n"],
|
|
5
|
-
"mappings": "aAYA,OACI,oBAAAA,EACA,2BAAAC,MACG,4DACP,OAAS,kBAAAC,MAAsB,sBAE/B,OAAS,8BAAAC,EAA4B,aAAAC,MAAiB,uBACtD,OACI,2BAAAC,EACA,yBAAAC,EACA,qBAAAC,MACG,cAEP,OAAS,yBAAAC,MAA6B,kCAE/B,gBAAS,cACZC,EACgC,CAChC,MAAMC,UAA0BD,CAAY,CACxC,MAAyB,kBAAkC,CACvD,MAAME,EAAkB,KAAK,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 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\n\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*/\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport { guaranteedAllTransitionend, nextFrame } from './AbstractOverlay.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nexport function OverlayDialog<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithDialog extends constructor {\n protected override async manageDialogOpen(): Promise<void> {\n const targetOpenState = this.open;\n await nextFrame();\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.dialogMakeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.dialogApplyFocus(targetOpenState, focusEl);\n }\n\n protected async dialogMakeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n let focusEl = null as HTMLElement | null;\n const start =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n el.open = targetOpenState;\n if (!targetOpenState) {\n const close = (): void => {\n el.removeEventListener('close', close);\n finish(el, index);\n };\n el.addEventListener('close', close);\n }\n if (index > 0) {\n // Announce workflow on the first element _only_.\n return;\n }\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n if (!targetOpenState) {\n // Show/focus workflow when opening _only_.\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (!focusEl) {\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n }\n if (!this.isConnected || this.dialogEl.open) {\n // In both of these cases the browser will error.\n // You can neither \"reopen\" a <dialog> or open one that is not on the DOM.\n return;\n }\n this.dialogEl.showModal();\n };\n const finish = (el: OpenableElement, index: number) => (): void => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n if (!this.isConnected || targetOpenState !== this.open) {\n // Don't lead into the `.close()` workflow if not connected to the DOM.\n // The browser will error in this case.\n return;\n }\n const reportChange = async (): Promise<void> => {\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (!targetOpenState && this.dialogEl.open) {\n this.dialogEl.addEventListener(\n 'close',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.close();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n protected async dialogApplyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n /**\n * Focus should be handled natively in `<dialog>` elements when leveraging `.showModal()`, but it's NOT.\n * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507\n * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398\n **/\n this.applyFocus(targetOpenState, focusEl);\n }\n }\n return OverlayWithDialog;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["firstFocusableIn", "firstFocusableSlottedIn", "VirtualTrigger", "guaranteedAllTransitionend", "nextFrame", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "OverlayStateEvent", "userFocusableSelector", "constructor", "OverlayWithDialog", "targetOpenState", "focusEl", "start", "el", "index", "close", "finish", "event", "slot", "eventName", "reportChange", "hasVirtualTrigger"]
|
|
7
7
|
}
|
|
@@ -67,7 +67,7 @@ export function OverlayPopover(constructor) {
|
|
|
67
67
|
once: true
|
|
68
68
|
});
|
|
69
69
|
}
|
|
70
|
-
|
|
70
|
+
shouldShowPopover(targetOpenState) {
|
|
71
71
|
let popoverOpen = false;
|
|
72
72
|
try {
|
|
73
73
|
popoverOpen = this.dialogEl.matches(":popover-open");
|
|
@@ -80,7 +80,7 @@ export function OverlayPopover(constructor) {
|
|
|
80
80
|
}
|
|
81
81
|
if (targetOpenState && this.open === targetOpenState && !popoverOpen && !open && this.isConnected) {
|
|
82
82
|
this.dialogEl.showPopover();
|
|
83
|
-
|
|
83
|
+
this.managePosition();
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
async ensureOnDOM(targetOpenState) {
|
|
@@ -88,7 +88,7 @@ export function OverlayPopover(constructor) {
|
|
|
88
88
|
if (!supportsOverlayAuto) {
|
|
89
89
|
await this.shouldHidePopover(targetOpenState);
|
|
90
90
|
}
|
|
91
|
-
|
|
91
|
+
this.shouldShowPopover(targetOpenState);
|
|
92
92
|
await nextFrame();
|
|
93
93
|
}
|
|
94
94
|
async makeTransition(targetOpenState) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayPopover.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 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\n\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*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { Constructor, OpenableElement } from './overlay-types.dev.js'\nimport {\n guaranteedAllTransitionend,\n nextFrame,\n overlayTimer,\n} from './AbstractOverlay.dev.js'\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.dev.js'\nimport type { AbstractOverlay } from './AbstractOverlay.dev.js'\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private async shouldShowPopover(\n targetOpenState: boolean\n ): Promise<void> {\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n await this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n await this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n el.open = targetOpenState;\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,sBAAsB;AAE/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,SAAS,6BAA6B;AAEtC,MAAM,sBAAsB,IAAI,SAAS,iBAAiB;AAE1D,SAAS,OAAO,IAA0B;AACtC,MAAI,cAAc;AAClB,MAAI;AACA,kBAAc,GAAG,QAAQ,eAAe;AAAA,EAE5C,SAAS,OAAO;AAAA,EAAC;AACjB,MAAI,OAAO;AACX,MAAI;AACA,WAAO,GAAG,QAAQ,OAAO;AAAA,EAE7B,SAAS,OAAO;AAAA,EAAC;AACjB,SAAO,eAAe;AAC1B;AAEO,gBAAS,eACZ,aACgC;AAAA,EAChC,MAAM,2BAA2B,YAAY;AAAA,IACzC,MAAyB,YACrB,iBACa;AACb,UAAI,oBAAoB,SAAS,oBAAoB,KAAK,MAAM;AAC5D,qBAAa,MAAM,IAAI;AACvB;AAAA,MACJ;AACA,UAAI,KAAK,SAAS;AACd,cAAM,YAAY,MAAM,aAAa,UAAU,IAAI;AACnD,YAAI,WAAW;AACX,eAAK,OAAO,CAAC;AAAA,QACjB;AAAA,MACJ;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAc,kBACV,iBACa;AACb,UAAI,mBAAmB,KAAK,SAAS,iBAAiB;AAClD;AAAA,MACJ;AACA,YAAM,SAAS,OAAO;AAAA,QAClB;AAAA,MACJ,IAA2B,CAAC,MAAqB;AAC7C,YAAI,aAAa,QAAQ;AACrB;AAAA,QACJ;AAIA,cAAM,KAAK,oBAAoB,qBAAqB;AAAA,MACxD;AACA,UAAI,CAAC,OAAO,KAAK,QAAQ,GAAG;AAGxB,eAAO;AACP;AAAA,MACJ;AAEA,WAAK,SAAS,iBAAiB,UAAU,QAAyB;AAAA,QAC9D,MAAM;AAAA,MACV,CAAC;AAAA,IACL;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 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\n\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*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { Constructor, OpenableElement } from './overlay-types.dev.js'\nimport {\n guaranteedAllTransitionend,\n nextFrame,\n overlayTimer,\n} from './AbstractOverlay.dev.js'\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.dev.js'\nimport type { AbstractOverlay } from './AbstractOverlay.dev.js'\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private shouldShowPopover(targetOpenState: boolean): void {\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n el.open = targetOpenState;\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/OverlayPopover.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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})}
|
|
1
|
+
"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}
|
|
2
2
|
//# sourceMappingURL=OverlayPopover.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayPopover.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 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\n\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*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport {\n guaranteedAllTransitionend,\n nextFrame,\n overlayTimer,\n} from './AbstractOverlay.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private async shouldShowPopover(\n targetOpenState: boolean\n ): Promise<void> {\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n await this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n await this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n el.open = targetOpenState;\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
-
"mappings": "aAWA,OACI,oBAAAA,EACA,2BAAAC,MACG,4DAEP,OAAS,kBAAAC,MAAsB,sBAE/B,OACI,8BAAAC,EACA,aAAAC,EACA,gBAAAC,MACG,uBACP,OACI,2BAAAC,EACA,yBAAAC,EACA,qBAAAC,MACG,cAEP,OAAS,yBAAAC,MAA6B,kCAEtC,MAAMC,EAAsB,IAAI,SAAS,iBAAiB,EAE1D,SAASC,EAAOC,EAA0B,CACtC,IAAIC,EAAc,GAClB,GAAI,CACAA,EAAcD,EAAG,QAAQ,eAAe,CAE5C,OAASE,EAAO,CAAC,CACjB,IAAIC,EAAO,GACX,GAAI,CACAA,EAAOH,EAAG,QAAQ,OAAO,CAE7B,OAASE,EAAO,CAAC,CACjB,OAAOD,GAAeE,CAC1B,CAEO,gBAAS,eACZC,EACgC,CAChC,MAAMC,UAA2BD,CAAY,CACzC,MAAyB,YACrBE,EACa,CACb,GAAIA,IAAoB,IAASA,IAAoB,KAAK,KAAM,CAC5Db,EAAa,MAAM,IAAI,EACvB,MACJ,CACI,KAAK,SACa,MAAMA,EAAa,UAAU,IAAI,IAE/C,KAAK,KAAO,CAACa,EAGzB,CAMA,MAAc,kBACVA,EACa,CACb,GAAIA,GAAmB,KAAK,OAASA,EACjC,OAEJ,MAAMC,EAAS,MAAO,CAClB,SAAAC,CACJ,EAA2B,CAAC,IAAqB,CACzCA,IAAa,QAMjB,MAAM,KAAK,oBAAoB,qBAAqB,CACxD,EACA,GAAI,CAACT,EAAO,KAAK,QAAQ,EAAG,CAGxBQ,EAAO,EACP,MACJ,CAEA,KAAK,SAAS,iBAAiB,SAAUA,EAAyB,CAC9D,KAAM,EACV,CAAC,CACL,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 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\n\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*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport {\n guaranteedAllTransitionend,\n nextFrame,\n overlayTimer,\n} from './AbstractOverlay.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private shouldShowPopover(targetOpenState: boolean): void {\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n el.open = targetOpenState;\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n if (el.matches(userFocusableSelector)) {\n focusEl = el;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["firstFocusableIn", "firstFocusableSlottedIn", "VirtualTrigger", "guaranteedAllTransitionend", "nextFrame", "overlayTimer", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "OverlayStateEvent", "userFocusableSelector", "supportsOverlayAuto", "isOpen", "el", "popoverOpen", "error", "open", "constructor", "OverlayWithPopover", "targetOpenState", "update", "newState", "focusEl", "start", "index", "event", "slot", "finish", "eventName", "reportChange", "hasVirtualTrigger"]
|
|
7
7
|
}
|
package/src/OverlayStack.d.ts
CHANGED
|
@@ -31,8 +31,8 @@ declare class OverlayStack {
|
|
|
31
31
|
overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[];
|
|
32
32
|
/**
|
|
33
33
|
* When overlays are added manage the open state of exisiting overlays appropriately:
|
|
34
|
-
* - 'modal': should close other overlays
|
|
35
|
-
* - 'page': should close other overlays
|
|
34
|
+
* - 'modal': should close other non-'modal' and non-'manual' overlays
|
|
35
|
+
* - 'page': should close other non-'modal' and non-'manual' overlays
|
|
36
36
|
* - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
|
|
37
37
|
* - 'manual': shouldn't close other overlays
|
|
38
38
|
* - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
|
package/src/OverlayStack.dev.js
CHANGED
|
@@ -23,6 +23,8 @@ class OverlayStack {
|
|
|
23
23
|
this.pointerdownPath = void 0;
|
|
24
24
|
if (!this.stack.length) return;
|
|
25
25
|
if (!(composedPath == null ? void 0 : composedPath.length)) return;
|
|
26
|
+
const lastOverlay = this.lastOverlay;
|
|
27
|
+
this.lastOverlay = void 0;
|
|
26
28
|
const lastIndex = this.stack.length - 1;
|
|
27
29
|
const nonAncestorOverlays = this.stack.filter((overlay, i) => {
|
|
28
30
|
const inStack = composedPath.find(
|
|
@@ -31,10 +33,11 @@ class OverlayStack {
|
|
|
31
33
|
el === overlay || // The Overlay trigger is in the stack and the Overlay is a "hint"
|
|
32
34
|
el === (overlay == null ? void 0 : overlay.triggerElement) && "hint" === (overlay == null ? void 0 : overlay.type) || // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a
|
|
33
35
|
// `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction
|
|
34
|
-
i === lastIndex && overlay !==
|
|
36
|
+
i === lastIndex && overlay !== lastOverlay && overlay.triggerInteraction === "longpress"
|
|
35
37
|
)
|
|
36
38
|
);
|
|
37
|
-
return !inStack && !overlay.shouldPreventClose() && overlay.type !== "manual"
|
|
39
|
+
return !inStack && !overlay.shouldPreventClose() && overlay.type !== "manual" && // Don't close if this overlay is modal and not on top of the overlay stack.
|
|
40
|
+
!(overlay.type === "modal" && lastOverlay !== overlay);
|
|
38
41
|
});
|
|
39
42
|
nonAncestorOverlays.reverse();
|
|
40
43
|
nonAncestorOverlays.forEach((overlay) => {
|
|
@@ -96,8 +99,8 @@ class OverlayStack {
|
|
|
96
99
|
}
|
|
97
100
|
/**
|
|
98
101
|
* When overlays are added manage the open state of exisiting overlays appropriately:
|
|
99
|
-
* - 'modal': should close other overlays
|
|
100
|
-
* - 'page': should close other overlays
|
|
102
|
+
* - 'modal': should close other non-'modal' and non-'manual' overlays
|
|
103
|
+
* - 'page': should close other non-'modal' and non-'manual' overlays
|
|
101
104
|
* - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
|
|
102
105
|
* - 'manual': shouldn't close other overlays
|
|
103
106
|
* - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
|
|
@@ -123,7 +126,7 @@ class OverlayStack {
|
|
|
123
126
|
const path = event.composedPath();
|
|
124
127
|
this.stack.forEach((overlayEl) => {
|
|
125
128
|
const inPath = path.find((el) => el === overlayEl);
|
|
126
|
-
if (!inPath && overlayEl.type !== "manual") {
|
|
129
|
+
if (!inPath && overlayEl.type !== "manual" && overlayEl.type !== "modal") {
|
|
127
130
|
this.closeOverlay(overlayEl);
|
|
128
131
|
}
|
|
129
132
|
});
|
|
@@ -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\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 !==
|
|
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;
|
|
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 (supportsPopover) return;\n if (last?.type === 'manual') {\n // Manual Overlays should not close on \"light dismiss\".\n return;\n }\n\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.stack.length-1,
|
|
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}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;
|
|
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\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 !==
|
|
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,
|
|
6
|
-
"names": ["supportsPopover", "OverlayStack", "event", "composedPath", "lastIndex", "nonAncestorOverlays", "overlay", "el", "parentToClose", "target", "open", "last", "overlayIndex", "triggerElement", "queryPathEventName", "queryPathEvent", "path", "overlayEl"]
|
|
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 (supportsPopover) return;\n if (last?.type === 'manual') {\n // Manual Overlays should not close on \"light dismiss\".\n return;\n }\n\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
|
+
"names": ["supportsPopover", "OverlayStack", "event", "composedPath", "lastOverlay", "lastIndex", "nonAncestorOverlays", "overlay", "el", "parentToClose", "target", "open", "last", "overlayIndex", "triggerElement", "queryPathEventName", "queryPathEvent", "path", "overlayEl"]
|
|
7
7
|
}
|
|
@@ -14,27 +14,144 @@ type OverlayOptionsV1 = {
|
|
|
14
14
|
trigger: HTMLElement | VirtualTrigger;
|
|
15
15
|
type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';
|
|
16
16
|
};
|
|
17
|
+
/**
|
|
18
|
+
* Symbol used to indicate that the placement has been updated.
|
|
19
|
+
*/
|
|
17
20
|
export declare const placementUpdatedSymbol: unique symbol;
|
|
21
|
+
/**
|
|
22
|
+
* Controller for managing the placement of an overlay.
|
|
23
|
+
*
|
|
24
|
+
* This class implements the ReactiveController interface and provides methods
|
|
25
|
+
* for managing the positioning and constraints of an overlay element.
|
|
26
|
+
*/
|
|
18
27
|
export declare class PlacementController implements ReactiveController {
|
|
28
|
+
/**
|
|
29
|
+
* Function to clean up resources when the controller is no longer needed.
|
|
30
|
+
*
|
|
31
|
+
* @private
|
|
32
|
+
*/
|
|
19
33
|
private cleanup?;
|
|
34
|
+
/**
|
|
35
|
+
* Initial height of the overlay.
|
|
36
|
+
*
|
|
37
|
+
* @type {number}
|
|
38
|
+
*/
|
|
20
39
|
initialHeight?: number;
|
|
40
|
+
/**
|
|
41
|
+
* Indicates whether the overlay is constrained by available space.
|
|
42
|
+
*
|
|
43
|
+
* @type {boolean}
|
|
44
|
+
*/
|
|
21
45
|
isConstrained?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* The host element that uses this controller.
|
|
48
|
+
*
|
|
49
|
+
* @private
|
|
50
|
+
* @type {ReactiveElement & { elements: OpenableElement[] }}
|
|
51
|
+
*/
|
|
22
52
|
private host;
|
|
53
|
+
/**
|
|
54
|
+
* Options for configuring the overlay placement.
|
|
55
|
+
*
|
|
56
|
+
* @private
|
|
57
|
+
* @type {OverlayOptionsV1}
|
|
58
|
+
*/
|
|
23
59
|
private options;
|
|
60
|
+
/**
|
|
61
|
+
* A WeakMap to store the original placements of overlay elements.
|
|
62
|
+
*
|
|
63
|
+
* @private
|
|
64
|
+
* @type {WeakMap<HTMLElement, Placement>}
|
|
65
|
+
*/
|
|
24
66
|
private originalPlacements;
|
|
67
|
+
/**
|
|
68
|
+
* The target element for the overlay.
|
|
69
|
+
*
|
|
70
|
+
* @private
|
|
71
|
+
* @type {HTMLElement}
|
|
72
|
+
*/
|
|
25
73
|
private target;
|
|
74
|
+
/**
|
|
75
|
+
* Creates an instance of the PlacementController.
|
|
76
|
+
*
|
|
77
|
+
* @param {ReactiveElement & { elements: OpenableElement[] }} host - The host element that uses this controller.
|
|
78
|
+
*/
|
|
26
79
|
constructor(host: ReactiveElement & {
|
|
27
80
|
elements: OpenableElement[];
|
|
28
81
|
});
|
|
82
|
+
/**
|
|
83
|
+
* Places the overlay relative to the target element.
|
|
84
|
+
*
|
|
85
|
+
* This method sets up the necessary configurations and event listeners to manage the
|
|
86
|
+
* positioning and constraints of the overlay element.
|
|
87
|
+
*
|
|
88
|
+
* @param {HTMLElement} [target=this.target] - The target element for the overlay.
|
|
89
|
+
* @param {OverlayOptionsV1} [options=this.options] - The options for configuring the overlay placement.
|
|
90
|
+
* @returns {Promise<void>} A promise that resolves when the overlay has been placed.
|
|
91
|
+
*/
|
|
29
92
|
placeOverlay(target?: HTMLElement, options?: OverlayOptionsV1): Promise<void>;
|
|
93
|
+
/**
|
|
94
|
+
* Flag to allow or disallow placement updates.
|
|
95
|
+
*
|
|
96
|
+
* @type {boolean}
|
|
97
|
+
*/
|
|
30
98
|
allowPlacementUpdate: boolean;
|
|
99
|
+
/**
|
|
100
|
+
* Closes the overlay if an ancestor element is updated.
|
|
101
|
+
*
|
|
102
|
+
* This method checks if placement updates are allowed and if the overlay type is not 'modal'.
|
|
103
|
+
* If these conditions are met and a cleanup function is defined, it dispatches a 'close' event
|
|
104
|
+
* on the target element to close the overlay.
|
|
105
|
+
*/
|
|
31
106
|
closeForAncestorUpdate: () => void;
|
|
32
|
-
|
|
107
|
+
/**
|
|
108
|
+
* Updates the placement of the overlay.
|
|
109
|
+
*
|
|
110
|
+
* This method calls the computePlacement method to recalculate the overlay's position.
|
|
111
|
+
*
|
|
112
|
+
* @private
|
|
113
|
+
*/
|
|
114
|
+
private updatePlacement;
|
|
115
|
+
/**
|
|
116
|
+
* Computes the placement of the overlay relative to the target element.
|
|
117
|
+
*
|
|
118
|
+
* This method calculates the necessary positioning and constraints for the overlay element
|
|
119
|
+
* using various middleware functions. It updates the overlay's style and attributes based
|
|
120
|
+
* on the computed position.
|
|
121
|
+
*
|
|
122
|
+
* @returns {Promise<void>} A promise that resolves when the placement has been computed.
|
|
123
|
+
*/
|
|
33
124
|
computePlacement(): Promise<void>;
|
|
125
|
+
/**
|
|
126
|
+
* Clears the overlay's position styles.
|
|
127
|
+
*
|
|
128
|
+
* This method removes the max-height and max-width styles from the target element,
|
|
129
|
+
* and resets the initial height and constrained state of the overlay.
|
|
130
|
+
*/
|
|
34
131
|
clearOverlayPosition(): void;
|
|
132
|
+
/**
|
|
133
|
+
* Resets the overlay's position.
|
|
134
|
+
*
|
|
135
|
+
* This method clears the overlay's position, forces a reflow, and recomputes the placement.
|
|
136
|
+
*/
|
|
35
137
|
resetOverlayPosition: () => void;
|
|
138
|
+
/**
|
|
139
|
+
* Lifecycle method called when the host element is connected to the DOM.
|
|
140
|
+
*
|
|
141
|
+
* This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.
|
|
142
|
+
*/
|
|
36
143
|
hostConnected(): void;
|
|
144
|
+
/**
|
|
145
|
+
* Lifecycle method called when the host element is updated.
|
|
146
|
+
*
|
|
147
|
+
* This method cleans up resources if the overlay is not open.
|
|
148
|
+
*/
|
|
37
149
|
hostUpdated(): void;
|
|
150
|
+
/**
|
|
151
|
+
* Lifecycle method called when the host element is disconnected from the DOM.
|
|
152
|
+
*
|
|
153
|
+
* This method removes the event listener and cleans up resources.
|
|
154
|
+
*/
|
|
38
155
|
hostDisconnected(): void;
|
|
39
156
|
}
|
|
40
157
|
export {};
|