@spectrum-web-components/overlay 0.18.3 → 0.18.4
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 +5 -5
- package/src/OverlayTrigger.dev.js +0 -2
- package/src/OverlayTrigger.dev.js.map +2 -2
- package/src/OverlayTrigger.js +1 -1
- package/src/OverlayTrigger.js.map +2 -2
- package/src/overlay-stack.dev.js +11 -5
- package/src/overlay-stack.dev.js.map +3 -3
- package/src/overlay-stack.js +2 -2
- package/src/overlay-stack.js.map +3 -3
- package/stories/overlay.stories.js +33 -0
- package/stories/overlay.stories.js.map +2 -2
- package/test/index.js +704 -0
- package/test/index.js.map +7 -0
- package/test/overlay-trigger-hover-click.test.js +78 -1
- package/test/overlay-trigger-hover-click.test.js.map +2 -2
- package/test/overlay-trigger-sync.test.js +2 -659
- package/test/overlay-trigger-sync.test.js.map +2 -2
- package/test/overlay-trigger.test.js +2 -659
- package/test/overlay-trigger.test.js.map +2 -2
- package/test/overlay.test.js +17 -29
- package/test/overlay.test.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/overlay",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -102,11 +102,11 @@
|
|
|
102
102
|
"lit-html"
|
|
103
103
|
],
|
|
104
104
|
"dependencies": {
|
|
105
|
-
"@floating-ui/dom": "^0.
|
|
106
|
-
"@spectrum-web-components/action-button": "^0.10.
|
|
105
|
+
"@floating-ui/dom": "^1.0.2",
|
|
106
|
+
"@spectrum-web-components/action-button": "^0.10.3",
|
|
107
107
|
"@spectrum-web-components/base": "^0.7.0",
|
|
108
108
|
"@spectrum-web-components/shared": "^0.15.0",
|
|
109
|
-
"@spectrum-web-components/theme": "^0.14.
|
|
109
|
+
"@spectrum-web-components/theme": "^0.14.3",
|
|
110
110
|
"tslib": "^2.0.0"
|
|
111
111
|
},
|
|
112
112
|
"types": "./src/index.d.ts",
|
|
@@ -118,5 +118,5 @@
|
|
|
118
118
|
"./stories/overlay-story-components.js",
|
|
119
119
|
"./**/*.dev.js"
|
|
120
120
|
],
|
|
121
|
-
"gitHead": "
|
|
121
|
+
"gitHead": "15588c72c774b17cfac605b20ac52a27d123bd03"
|
|
122
122
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayTrigger.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*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { LongpressEvent } from '@spectrum-web-components/action-button';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport {\n OverlayOpenCloseDetail,\n OverlayOptions,\n OverlayTriggerInteractions,\n Placement,\n TriggerInteractions,\n} from './overlay-types';\nimport { openOverlay } from './loader.dev.js'\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\ntype closeOverlay =\n | 'closeClickOverlay'\n | 'closeHoverOverlay'\n | 'closeLongpressOverlay';\n\nexport const LONGPRESS_INSTRUCTIONS = {\n touch: 'Double tap and long press for additional options',\n keyboard: 'Press Space or Alt+Down Arrow for additional options',\n mouse: 'Click and hold for additional options',\n};\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n private closeClickOverlay?: Promise<() => void>;\n private closeLongpressOverlay?: Promise<() => void>;\n private closeHoverOverlay?: Promise<() => void>;\n\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'bottom';\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number, reflect: true })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @state()\n public hasLongpressContent = false;\n\n private longpressDescriptor?: HTMLElement;\n private clickContent?: HTMLElement;\n private longpressContent?: HTMLElement;\n private hoverContent?: HTMLElement;\n private targetContent?: HTMLElement;\n private overlaidContent?: HTMLElement;\n\n private _longpressId = `longpress-describedby-descriptor`;\n\n private handleClose(event?: CustomEvent<OverlayOpenCloseDetail>): void {\n if (\n event &&\n event.detail.interaction !== this.open &&\n event.detail.interaction !== this.type\n ) {\n return;\n }\n this.removeAttribute('open');\n }\n\n protected override render(): TemplateResult {\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n @click=${this.onTrigger}\n @longpress=${this.onTrigger}\n @mouseenter=${this.onTrigger}\n @mouseleave=${this.onTrigger}\n @focusin=${this.onTrigger}\n @focusout=${this.onTrigger}\n @sp-closed=${this.handleClose}\n @slotchange=${this.onTargetSlotChange}\n name=\"trigger\"\n ></slot>\n <div id=\"overlay-content\">\n <slot\n @slotchange=${this.onClickSlotChange}\n name=\"click-content\"\n ></slot>\n <slot\n @slotchange=${this.onLongpressSlotChange}\n name=\"longpress-content\"\n ></slot>\n <slot\n @slotchange=${this.onHoverSlotChange}\n name=\"hover-content\"\n ></slot>\n <slot name=${this._longpressId}></slot>\n </div>\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.closeAllOverlays();\n return;\n }\n if (changes.has('open')) {\n this.manageOpen();\n }\n if (changes.has('hasLongpressContent')) {\n this.manageLongpressDescriptor();\n }\n }\n\n protected manageLongpressDescriptor(): void {\n const trigger = this.querySelector(\n '[slot=\"trigger\"]'\n ) as SpectrumElement;\n const ariaDescribedby = trigger.getAttribute('aria-describedby');\n let descriptors = ariaDescribedby ? ariaDescribedby.split(/\\s+/) : [];\n\n if (this.hasLongpressContent) {\n if (!this.longpressDescriptor) {\n this.longpressDescriptor = document.createElement(\n 'div'\n ) as HTMLElement;\n\n this.longpressDescriptor.id = this._longpressId;\n this.longpressDescriptor.slot = this._longpressId;\n }\n const messageType = isIOS() || isAndroid() ? 'touch' : 'keyboard';\n this.longpressDescriptor.textContent =\n LONGPRESS_INSTRUCTIONS[messageType];\n this.appendChild(this.longpressDescriptor);\n descriptors.push(this._longpressId);\n } else {\n if (this.longpressDescriptor) this.longpressDescriptor.remove();\n descriptors = descriptors.filter(\n (descriptor) => descriptor !== this._longpressId\n );\n }\n if (descriptors.length) {\n trigger.setAttribute('aria-describedby', descriptors.join(' '));\n } else {\n trigger.removeAttribute('aria-describedby');\n }\n }\n\n private closeAllOverlays(): void {\n if (this.abortOverlay) this.abortOverlay(true);\n (\n [\n 'closeClickOverlay',\n 'closeHoverOverlay',\n 'closeLongpressOverlay',\n ] as closeOverlay[]\n ).forEach(async (name) => {\n const canClose = this[name] as Promise<() => void>;\n if (canClose == null) return;\n delete this[name];\n (await canClose)();\n });\n this.overlaidContent = undefined;\n }\n\n private manageOpen(): void {\n const openHandlers: Record<OverlayContentTypes | 'none', () => void> = {\n click: () => this.onTriggerClick(),\n hover: () => this.onTriggerMouseEnter(),\n longpress: () => this.onTriggerLongpress(),\n none: () => this.closeAllOverlays(),\n };\n openHandlers[this.open ?? 'none']();\n }\n\n private async openOverlay(\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> {\n this.openStatePromise = new Promise(\n (res) => (this.openStateResolver = res)\n );\n this.addEventListener(\n 'sp-opened',\n () => {\n this.openStateResolver();\n },\n { once: true }\n );\n this.overlaidContent = content;\n return OverlayTrigger.openOverlay(\n target,\n interaction,\n content,\n options\n );\n }\n\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return openOverlay(target, interaction, content, options);\n };\n\n private get overlayOptions(): OverlayOptions {\n return {\n offset: this.offset,\n placement: this.placement,\n receivesFocus:\n !this.type || this.type === 'inline' || this.open === 'hover'\n ? undefined\n : 'auto',\n };\n }\n\n private onTrigger(event: CustomEvent<LongpressEvent>): void {\n const mouseIsEnteringHoverContent =\n event.type === 'mouseleave' &&\n this.open === 'hover' &&\n (event as unknown as MouseEvent).relatedTarget ===\n this.overlaidContent;\n if (mouseIsEnteringHoverContent && this.overlaidContent) {\n this.overlaidContent.addEventListener(\n 'mouseleave',\n (event: MouseEvent) => {\n const mouseIsEnteringTrigger =\n event.relatedTarget === this.targetContent;\n if (mouseIsEnteringTrigger) {\n return;\n }\n this.onTrigger(\n event as unknown as CustomEvent<LongpressEvent>\n );\n },\n { once: true }\n );\n return;\n }\n if (this.disabled) return;\n\n switch (event.type) {\n case 'mouseenter':\n case 'focusin':\n if (!this.open && this.hoverContent) {\n this.open = 'hover';\n }\n return;\n case 'mouseleave':\n case 'focusout':\n if (this.open === 'hover') {\n this.handleClose();\n }\n return;\n case 'click':\n if (this.clickContent) {\n this.open = event.type;\n } else if (this.closeHoverOverlay) {\n event.preventDefault();\n }\n return;\n case 'longpress':\n if (this.longpressContent) {\n this._longpressEvent = event;\n this.open = event.type;\n }\n return;\n }\n }\n\n private prepareToFocusOverlayContent(overlayContent: HTMLElement): void {\n if (this.type !== 'modal') {\n return;\n }\n const firstFocusable = firstFocusableIn(overlayContent);\n if (!firstFocusable) {\n overlayContent.tabIndex = 0;\n }\n }\n\n public async onTriggerClick(): Promise<void> {\n if (\n !this.targetContent ||\n !this.clickContent ||\n this.closeClickOverlay\n ) {\n return;\n }\n const { targetContent, clickContent } = this;\n this.closeAllOverlays();\n this.prepareToFocusOverlayContent(clickContent);\n this.closeClickOverlay = this.openOverlay(\n targetContent,\n this.type ? this.type : 'click',\n clickContent,\n this.overlayOptions\n );\n }\n\n private _longpressEvent?: CustomEvent<LongpressEvent>;\n\n private async onTriggerLongpress(): Promise<void> {\n if (\n !this.targetContent ||\n !this.longpressContent ||\n this.closeLongpressOverlay\n ) {\n return;\n }\n const { targetContent, longpressContent } = this;\n this.closeAllOverlays();\n this.prepareToFocusOverlayContent(longpressContent);\n const notImmediatelyClosable =\n this._longpressEvent?.detail?.source !== 'keyboard';\n this.closeLongpressOverlay = this.openOverlay(\n targetContent,\n this.type ? this.type : 'longpress',\n longpressContent,\n {\n ...this.overlayOptions,\n receivesFocus: 'auto',\n notImmediatelyClosable,\n }\n );\n this._longpressEvent = undefined;\n }\n\n private abortOverlay: (cancelled: boolean) => void = () => {\n return;\n };\n\n public async onTriggerMouseEnter(): Promise<void> {\n if (\n !this.targetContent ||\n !this.hoverContent ||\n this.closeHoverOverlay\n ) {\n return;\n }\n const abortPromise: Promise<boolean> = new Promise((res) => {\n this.abortOverlay = res;\n });\n const { targetContent, hoverContent } = this;\n this.closeHoverOverlay = this.openOverlay(\n targetContent,\n 'hover',\n hoverContent,\n {\n abortPromise,\n ...this.overlayOptions,\n }\n );\n }\n\n private onClickSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.clickContent = this.extractSlotContentFromEvent(event);\n this.manageOpen();\n }\n\n private onLongpressSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.longpressContent = this.extractSlotContentFromEvent(event);\n this.hasLongpressContent =\n !!this.longpressContent || !!this.closeLongpressOverlay;\n this.manageOpen();\n }\n\n private onHoverSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.hoverContent = this.extractSlotContentFromEvent(event);\n this.manageOpen();\n }\n\n private onTargetSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.targetContent = this.extractSlotContentFromEvent(event);\n }\n\n private extractSlotContentFromEvent(event: Event): HTMLElement | undefined {\n const slot = event.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n return nodes.find((node) => node instanceof HTMLElement) as HTMLElement;\n }\n\n private openStatePromise = Promise.resolve();\n private openStateResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.openStatePromise;\n return complete;\n }\n\n public override disconnectedCallback(): void {\n this.closeAllOverlays();\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,wBAAwB;AACjC;AAAA,EACI;AAAA,EACA;AAAA,OACG;AASP,SAAS,mBAAmB;AAC5B,OAAO,0BAA0B;AAS1B,aAAM,yBAAyB;AAAA,EAClC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AACX;AAaO,MAAM,kBAAN,cAA6B,gBAAgB;AAAA,EAA7C;AAAA;AAcH,SAAO,YAAuB;AAM9B,SAAO,SAAS;AAMhB,SAAO,WAAW;AAGlB,SAAO,sBAAsB;AAS7B,SAAQ,eAAe;
|
|
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*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { LongpressEvent } from '@spectrum-web-components/action-button';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport {\n OverlayOpenCloseDetail,\n OverlayOptions,\n OverlayTriggerInteractions,\n Placement,\n TriggerInteractions,\n} from './overlay-types';\nimport { openOverlay } from './loader.dev.js'\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\ntype closeOverlay =\n | 'closeClickOverlay'\n | 'closeHoverOverlay'\n | 'closeLongpressOverlay';\n\nexport const LONGPRESS_INSTRUCTIONS = {\n touch: 'Double tap and long press for additional options',\n keyboard: 'Press Space or Alt+Down Arrow for additional options',\n mouse: 'Click and hold for additional options',\n};\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n private closeClickOverlay?: Promise<() => void>;\n private closeLongpressOverlay?: Promise<() => void>;\n private closeHoverOverlay?: Promise<() => void>;\n\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'bottom';\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number, reflect: true })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @state()\n public hasLongpressContent = false;\n\n private longpressDescriptor?: HTMLElement;\n private clickContent?: HTMLElement;\n private longpressContent?: HTMLElement;\n private hoverContent?: HTMLElement;\n private targetContent?: HTMLElement;\n private overlaidContent?: HTMLElement;\n\n private _longpressId = `longpress-describedby-descriptor`;\n\n private handleClose(event?: CustomEvent<OverlayOpenCloseDetail>): void {\n if (\n event &&\n event.detail.interaction !== this.open &&\n event.detail.interaction !== this.type\n ) {\n return;\n }\n this.removeAttribute('open');\n }\n\n protected override render(): TemplateResult {\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n @click=${this.onTrigger}\n @longpress=${this.onTrigger}\n @mouseenter=${this.onTrigger}\n @mouseleave=${this.onTrigger}\n @focusin=${this.onTrigger}\n @focusout=${this.onTrigger}\n @sp-closed=${this.handleClose}\n @slotchange=${this.onTargetSlotChange}\n name=\"trigger\"\n ></slot>\n <div id=\"overlay-content\">\n <slot\n @slotchange=${this.onClickSlotChange}\n name=\"click-content\"\n ></slot>\n <slot\n @slotchange=${this.onLongpressSlotChange}\n name=\"longpress-content\"\n ></slot>\n <slot\n @slotchange=${this.onHoverSlotChange}\n name=\"hover-content\"\n ></slot>\n <slot name=${this._longpressId}></slot>\n </div>\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.closeAllOverlays();\n return;\n }\n if (changes.has('open')) {\n this.manageOpen();\n }\n if (changes.has('hasLongpressContent')) {\n this.manageLongpressDescriptor();\n }\n }\n\n protected manageLongpressDescriptor(): void {\n const trigger = this.querySelector(\n '[slot=\"trigger\"]'\n ) as SpectrumElement;\n const ariaDescribedby = trigger.getAttribute('aria-describedby');\n let descriptors = ariaDescribedby ? ariaDescribedby.split(/\\s+/) : [];\n\n if (this.hasLongpressContent) {\n if (!this.longpressDescriptor) {\n this.longpressDescriptor = document.createElement(\n 'div'\n ) as HTMLElement;\n\n this.longpressDescriptor.id = this._longpressId;\n this.longpressDescriptor.slot = this._longpressId;\n }\n const messageType = isIOS() || isAndroid() ? 'touch' : 'keyboard';\n this.longpressDescriptor.textContent =\n LONGPRESS_INSTRUCTIONS[messageType];\n this.appendChild(this.longpressDescriptor);\n descriptors.push(this._longpressId);\n } else {\n if (this.longpressDescriptor) this.longpressDescriptor.remove();\n descriptors = descriptors.filter(\n (descriptor) => descriptor !== this._longpressId\n );\n }\n if (descriptors.length) {\n trigger.setAttribute('aria-describedby', descriptors.join(' '));\n } else {\n trigger.removeAttribute('aria-describedby');\n }\n }\n\n private closeAllOverlays(): void {\n if (this.abortOverlay) this.abortOverlay(true);\n (\n [\n 'closeClickOverlay',\n 'closeHoverOverlay',\n 'closeLongpressOverlay',\n ] as closeOverlay[]\n ).forEach(async (name) => {\n const canClose = this[name] as Promise<() => void>;\n if (canClose == null) return;\n delete this[name];\n (await canClose)();\n });\n this.overlaidContent = undefined;\n }\n\n private manageOpen(): void {\n const openHandlers: Record<OverlayContentTypes | 'none', () => void> = {\n click: () => this.onTriggerClick(),\n hover: () => this.onTriggerMouseEnter(),\n longpress: () => this.onTriggerLongpress(),\n none: () => this.closeAllOverlays(),\n };\n openHandlers[this.open ?? 'none']();\n }\n\n private async openOverlay(\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> {\n this.openStatePromise = new Promise(\n (res) => (this.openStateResolver = res)\n );\n this.addEventListener(\n 'sp-opened',\n () => {\n this.openStateResolver();\n },\n { once: true }\n );\n this.overlaidContent = content;\n return OverlayTrigger.openOverlay(\n target,\n interaction,\n content,\n options\n );\n }\n\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return openOverlay(target, interaction, content, options);\n };\n\n private get overlayOptions(): OverlayOptions {\n return {\n offset: this.offset,\n placement: this.placement,\n receivesFocus:\n !this.type || this.type === 'inline' || this.open === 'hover'\n ? undefined\n : 'auto',\n };\n }\n\n private onTrigger(event: CustomEvent<LongpressEvent>): void {\n const mouseIsEnteringHoverContent =\n event.type === 'mouseleave' &&\n this.open === 'hover' &&\n (event as unknown as MouseEvent).relatedTarget ===\n this.overlaidContent;\n if (mouseIsEnteringHoverContent && this.overlaidContent) {\n this.overlaidContent.addEventListener(\n 'mouseleave',\n (event: MouseEvent) => {\n const mouseIsEnteringTrigger =\n event.relatedTarget === this.targetContent;\n if (mouseIsEnteringTrigger) {\n return;\n }\n this.onTrigger(\n event as unknown as CustomEvent<LongpressEvent>\n );\n },\n { once: true }\n );\n return;\n }\n if (this.disabled) return;\n\n switch (event.type) {\n case 'mouseenter':\n case 'focusin':\n if (!this.open && this.hoverContent) {\n this.open = 'hover';\n }\n return;\n case 'mouseleave':\n case 'focusout':\n if (this.open === 'hover') {\n this.handleClose();\n }\n return;\n case 'click':\n if (this.clickContent) {\n this.open = event.type;\n }\n return;\n case 'longpress':\n if (this.longpressContent) {\n this._longpressEvent = event;\n this.open = event.type;\n }\n return;\n }\n }\n\n private prepareToFocusOverlayContent(overlayContent: HTMLElement): void {\n if (this.type !== 'modal') {\n return;\n }\n const firstFocusable = firstFocusableIn(overlayContent);\n if (!firstFocusable) {\n overlayContent.tabIndex = 0;\n }\n }\n\n public async onTriggerClick(): Promise<void> {\n if (\n !this.targetContent ||\n !this.clickContent ||\n this.closeClickOverlay\n ) {\n return;\n }\n const { targetContent, clickContent } = this;\n this.closeAllOverlays();\n this.prepareToFocusOverlayContent(clickContent);\n this.closeClickOverlay = this.openOverlay(\n targetContent,\n this.type ? this.type : 'click',\n clickContent,\n this.overlayOptions\n );\n }\n\n private _longpressEvent?: CustomEvent<LongpressEvent>;\n\n private async onTriggerLongpress(): Promise<void> {\n if (\n !this.targetContent ||\n !this.longpressContent ||\n this.closeLongpressOverlay\n ) {\n return;\n }\n const { targetContent, longpressContent } = this;\n this.closeAllOverlays();\n this.prepareToFocusOverlayContent(longpressContent);\n const notImmediatelyClosable =\n this._longpressEvent?.detail?.source !== 'keyboard';\n this.closeLongpressOverlay = this.openOverlay(\n targetContent,\n this.type ? this.type : 'longpress',\n longpressContent,\n {\n ...this.overlayOptions,\n receivesFocus: 'auto',\n notImmediatelyClosable,\n }\n );\n this._longpressEvent = undefined;\n }\n\n private abortOverlay: (cancelled: boolean) => void = () => {\n return;\n };\n\n public async onTriggerMouseEnter(): Promise<void> {\n if (\n !this.targetContent ||\n !this.hoverContent ||\n this.closeHoverOverlay\n ) {\n return;\n }\n const abortPromise: Promise<boolean> = new Promise((res) => {\n this.abortOverlay = res;\n });\n const { targetContent, hoverContent } = this;\n this.closeHoverOverlay = this.openOverlay(\n targetContent,\n 'hover',\n hoverContent,\n {\n abortPromise,\n ...this.overlayOptions,\n }\n );\n }\n\n private onClickSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.clickContent = this.extractSlotContentFromEvent(event);\n this.manageOpen();\n }\n\n private onLongpressSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.longpressContent = this.extractSlotContentFromEvent(event);\n this.hasLongpressContent =\n !!this.longpressContent || !!this.closeLongpressOverlay;\n this.manageOpen();\n }\n\n private onHoverSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.hoverContent = this.extractSlotContentFromEvent(event);\n this.manageOpen();\n }\n\n private onTargetSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.targetContent = this.extractSlotContentFromEvent(event);\n }\n\n private extractSlotContentFromEvent(event: Event): HTMLElement | undefined {\n const slot = event.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n return nodes.find((node) => node instanceof HTMLElement) as HTMLElement;\n }\n\n private openStatePromise = Promise.resolve();\n private openStateResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.openStatePromise;\n return complete;\n }\n\n public override disconnectedCallback(): void {\n this.closeAllOverlays();\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["event"]
|
|
7
7
|
}
|
package/src/OverlayTrigger.js
CHANGED
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
></slot>
|
|
27
27
|
<slot name=${this._longpressId}></slot>
|
|
28
28
|
</div>
|
|
29
|
-
`}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.closeAllOverlays();return}e.has("open")&&this.manageOpen(),e.has("hasLongpressContent")&&this.manageLongpressDescriptor()}manageLongpressDescriptor(){const e=this.querySelector('[slot="trigger"]'),t=e.getAttribute("aria-describedby");let o=t?t.split(/\s+/):[];if(this.hasLongpressContent){this.longpressDescriptor||(this.longpressDescriptor=document.createElement("div"),this.longpressDescriptor.id=this._longpressId,this.longpressDescriptor.slot=this._longpressId);const s=y()||u()?"touch":"keyboard";this.longpressDescriptor.textContent=LONGPRESS_INSTRUCTIONS[s],this.appendChild(this.longpressDescriptor),o.push(this._longpressId)}else this.longpressDescriptor&&this.longpressDescriptor.remove(),o=o.filter(s=>s!==this._longpressId);o.length?e.setAttribute("aria-describedby",o.join(" ")):e.removeAttribute("aria-describedby")}closeAllOverlays(){this.abortOverlay&&this.abortOverlay(!0),["closeClickOverlay","closeHoverOverlay","closeLongpressOverlay"].forEach(async e=>{const t=this[e];t!=null&&(delete this[e],(await t)())}),this.overlaidContent=void 0}manageOpen(){var t;({click:()=>this.onTriggerClick(),hover:()=>this.onTriggerMouseEnter(),longpress:()=>this.onTriggerLongpress(),none:()=>this.closeAllOverlays()})[(t=this.open)!=null?t:"none"]()}async openOverlay(e,t,o,s){return this.openStatePromise=new Promise(r=>this.openStateResolver=r),this.addEventListener("sp-opened",()=>{this.openStateResolver()},{once:!0}),this.overlaidContent=o,a.openOverlay(e,t,o,s)}get overlayOptions(){return{offset:this.offset,placement:this.placement,receivesFocus:!this.type||this.type==="inline"||this.open==="hover"?void 0:"auto"}}onTrigger(e){if(e.type==="mouseleave"&&this.open==="hover"&&e.relatedTarget===this.overlaidContent&&this.overlaidContent){this.overlaidContent.addEventListener("mouseleave",o=>{o.relatedTarget!==this.targetContent&&this.onTrigger(o)},{once:!0});return}if(!this.disabled)switch(e.type){case"mouseenter":case"focusin":!this.open&&this.hoverContent&&(this.open="hover");return;case"mouseleave":case"focusout":this.open==="hover"&&this.handleClose();return;case"click":this.clickContent
|
|
29
|
+
`}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.closeAllOverlays();return}e.has("open")&&this.manageOpen(),e.has("hasLongpressContent")&&this.manageLongpressDescriptor()}manageLongpressDescriptor(){const e=this.querySelector('[slot="trigger"]'),t=e.getAttribute("aria-describedby");let o=t?t.split(/\s+/):[];if(this.hasLongpressContent){this.longpressDescriptor||(this.longpressDescriptor=document.createElement("div"),this.longpressDescriptor.id=this._longpressId,this.longpressDescriptor.slot=this._longpressId);const s=y()||u()?"touch":"keyboard";this.longpressDescriptor.textContent=LONGPRESS_INSTRUCTIONS[s],this.appendChild(this.longpressDescriptor),o.push(this._longpressId)}else this.longpressDescriptor&&this.longpressDescriptor.remove(),o=o.filter(s=>s!==this._longpressId);o.length?e.setAttribute("aria-describedby",o.join(" ")):e.removeAttribute("aria-describedby")}closeAllOverlays(){this.abortOverlay&&this.abortOverlay(!0),["closeClickOverlay","closeHoverOverlay","closeLongpressOverlay"].forEach(async e=>{const t=this[e];t!=null&&(delete this[e],(await t)())}),this.overlaidContent=void 0}manageOpen(){var t;({click:()=>this.onTriggerClick(),hover:()=>this.onTriggerMouseEnter(),longpress:()=>this.onTriggerLongpress(),none:()=>this.closeAllOverlays()})[(t=this.open)!=null?t:"none"]()}async openOverlay(e,t,o,s){return this.openStatePromise=new Promise(r=>this.openStateResolver=r),this.addEventListener("sp-opened",()=>{this.openStateResolver()},{once:!0}),this.overlaidContent=o,a.openOverlay(e,t,o,s)}get overlayOptions(){return{offset:this.offset,placement:this.placement,receivesFocus:!this.type||this.type==="inline"||this.open==="hover"?void 0:"auto"}}onTrigger(e){if(e.type==="mouseleave"&&this.open==="hover"&&e.relatedTarget===this.overlaidContent&&this.overlaidContent){this.overlaidContent.addEventListener("mouseleave",o=>{o.relatedTarget!==this.targetContent&&this.onTrigger(o)},{once:!0});return}if(!this.disabled)switch(e.type){case"mouseenter":case"focusin":!this.open&&this.hoverContent&&(this.open="hover");return;case"mouseleave":case"focusout":this.open==="hover"&&this.handleClose();return;case"click":this.clickContent&&(this.open=e.type);return;case"longpress":this.longpressContent&&(this._longpressEvent=e,this.open=e.type);return}}prepareToFocusOverlayContent(e){if(this.type!=="modal")return;m(e)||(e.tabIndex=0)}async onTriggerClick(){if(!this.targetContent||!this.clickContent||this.closeClickOverlay)return;const{targetContent:e,clickContent:t}=this;this.closeAllOverlays(),this.prepareToFocusOverlayContent(t),this.closeClickOverlay=this.openOverlay(e,this.type?this.type:"click",t,this.overlayOptions)}async onTriggerLongpress(){var s,r;if(!this.targetContent||!this.longpressContent||this.closeLongpressOverlay)return;const{targetContent:e,longpressContent:t}=this;this.closeAllOverlays(),this.prepareToFocusOverlayContent(t);const o=((r=(s=this._longpressEvent)==null?void 0:s.detail)==null?void 0:r.source)!=="keyboard";this.closeLongpressOverlay=this.openOverlay(e,this.type?this.type:"longpress",t,{...this.overlayOptions,receivesFocus:"auto",notImmediatelyClosable:o}),this._longpressEvent=void 0}async onTriggerMouseEnter(){if(!this.targetContent||!this.hoverContent||this.closeHoverOverlay)return;const e=new Promise(s=>{this.abortOverlay=s}),{targetContent:t,hoverContent:o}=this;this.closeHoverOverlay=this.openOverlay(t,"hover",o,{abortPromise:e,...this.overlayOptions})}onClickSlotChange(e){this.clickContent=this.extractSlotContentFromEvent(e),this.manageOpen()}onLongpressSlotChange(e){this.longpressContent=this.extractSlotContentFromEvent(e),this.hasLongpressContent=!!this.longpressContent||!!this.closeLongpressOverlay,this.manageOpen()}onHoverSlotChange(e){this.hoverContent=this.extractSlotContentFromEvent(e),this.manageOpen()}onTargetSlotChange(e){this.targetContent=this.extractSlotContentFromEvent(e)}extractSlotContentFromEvent(e){return e.target.assignedNodes({flatten:!0}).find(s=>s instanceof HTMLElement)}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.openStatePromise,e}disconnectedCallback(){this.closeAllOverlays(),super.disconnectedCallback()}};export let OverlayTrigger=a;OverlayTrigger.openOverlay=async(e,t,o,s)=>C(e,t,o,s),n([l({reflect:!0})],OverlayTrigger.prototype,"placement",2),n([l()],OverlayTrigger.prototype,"type",2),n([l({type:Number,reflect:!0})],OverlayTrigger.prototype,"offset",2),n([l({reflect:!0})],OverlayTrigger.prototype,"open",2),n([l({type:Boolean,reflect:!0})],OverlayTrigger.prototype,"disabled",2),n([d()],OverlayTrigger.prototype,"hasLongpressContent",2);
|
|
30
30
|
//# sourceMappingURL=OverlayTrigger.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["OverlayTrigger.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*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { LongpressEvent } from '@spectrum-web-components/action-button';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport {\n OverlayOpenCloseDetail,\n OverlayOptions,\n OverlayTriggerInteractions,\n Placement,\n TriggerInteractions,\n} from './overlay-types';\nimport { openOverlay } from './loader.js';\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\ntype closeOverlay =\n | 'closeClickOverlay'\n | 'closeHoverOverlay'\n | 'closeLongpressOverlay';\n\nexport const LONGPRESS_INSTRUCTIONS = {\n touch: 'Double tap and long press for additional options',\n keyboard: 'Press Space or Alt+Down Arrow for additional options',\n mouse: 'Click and hold for additional options',\n};\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n private closeClickOverlay?: Promise<() => void>;\n private closeLongpressOverlay?: Promise<() => void>;\n private closeHoverOverlay?: Promise<() => void>;\n\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'bottom';\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number, reflect: true })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @state()\n public hasLongpressContent = false;\n\n private longpressDescriptor?: HTMLElement;\n private clickContent?: HTMLElement;\n private longpressContent?: HTMLElement;\n private hoverContent?: HTMLElement;\n private targetContent?: HTMLElement;\n private overlaidContent?: HTMLElement;\n\n private _longpressId = `longpress-describedby-descriptor`;\n\n private handleClose(event?: CustomEvent<OverlayOpenCloseDetail>): void {\n if (\n event &&\n event.detail.interaction !== this.open &&\n event.detail.interaction !== this.type\n ) {\n return;\n }\n this.removeAttribute('open');\n }\n\n protected override render(): TemplateResult {\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n @click=${this.onTrigger}\n @longpress=${this.onTrigger}\n @mouseenter=${this.onTrigger}\n @mouseleave=${this.onTrigger}\n @focusin=${this.onTrigger}\n @focusout=${this.onTrigger}\n @sp-closed=${this.handleClose}\n @slotchange=${this.onTargetSlotChange}\n name=\"trigger\"\n ></slot>\n <div id=\"overlay-content\">\n <slot\n @slotchange=${this.onClickSlotChange}\n name=\"click-content\"\n ></slot>\n <slot\n @slotchange=${this.onLongpressSlotChange}\n name=\"longpress-content\"\n ></slot>\n <slot\n @slotchange=${this.onHoverSlotChange}\n name=\"hover-content\"\n ></slot>\n <slot name=${this._longpressId}></slot>\n </div>\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.closeAllOverlays();\n return;\n }\n if (changes.has('open')) {\n this.manageOpen();\n }\n if (changes.has('hasLongpressContent')) {\n this.manageLongpressDescriptor();\n }\n }\n\n protected manageLongpressDescriptor(): void {\n const trigger = this.querySelector(\n '[slot=\"trigger\"]'\n ) as SpectrumElement;\n const ariaDescribedby = trigger.getAttribute('aria-describedby');\n let descriptors = ariaDescribedby ? ariaDescribedby.split(/\\s+/) : [];\n\n if (this.hasLongpressContent) {\n if (!this.longpressDescriptor) {\n this.longpressDescriptor = document.createElement(\n 'div'\n ) as HTMLElement;\n\n this.longpressDescriptor.id = this._longpressId;\n this.longpressDescriptor.slot = this._longpressId;\n }\n const messageType = isIOS() || isAndroid() ? 'touch' : 'keyboard';\n this.longpressDescriptor.textContent =\n LONGPRESS_INSTRUCTIONS[messageType];\n this.appendChild(this.longpressDescriptor);\n descriptors.push(this._longpressId);\n } else {\n if (this.longpressDescriptor) this.longpressDescriptor.remove();\n descriptors = descriptors.filter(\n (descriptor) => descriptor !== this._longpressId\n );\n }\n if (descriptors.length) {\n trigger.setAttribute('aria-describedby', descriptors.join(' '));\n } else {\n trigger.removeAttribute('aria-describedby');\n }\n }\n\n private closeAllOverlays(): void {\n if (this.abortOverlay) this.abortOverlay(true);\n (\n [\n 'closeClickOverlay',\n 'closeHoverOverlay',\n 'closeLongpressOverlay',\n ] as closeOverlay[]\n ).forEach(async (name) => {\n const canClose = this[name] as Promise<() => void>;\n if (canClose == null) return;\n delete this[name];\n (await canClose)();\n });\n this.overlaidContent = undefined;\n }\n\n private manageOpen(): void {\n const openHandlers: Record<OverlayContentTypes | 'none', () => void> = {\n click: () => this.onTriggerClick(),\n hover: () => this.onTriggerMouseEnter(),\n longpress: () => this.onTriggerLongpress(),\n none: () => this.closeAllOverlays(),\n };\n openHandlers[this.open ?? 'none']();\n }\n\n private async openOverlay(\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> {\n this.openStatePromise = new Promise(\n (res) => (this.openStateResolver = res)\n );\n this.addEventListener(\n 'sp-opened',\n () => {\n this.openStateResolver();\n },\n { once: true }\n );\n this.overlaidContent = content;\n return OverlayTrigger.openOverlay(\n target,\n interaction,\n content,\n options\n );\n }\n\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return openOverlay(target, interaction, content, options);\n };\n\n private get overlayOptions(): OverlayOptions {\n return {\n offset: this.offset,\n placement: this.placement,\n receivesFocus:\n !this.type || this.type === 'inline' || this.open === 'hover'\n ? undefined\n : 'auto',\n };\n }\n\n private onTrigger(event: CustomEvent<LongpressEvent>): void {\n const mouseIsEnteringHoverContent =\n event.type === 'mouseleave' &&\n this.open === 'hover' &&\n (event as unknown as MouseEvent).relatedTarget ===\n this.overlaidContent;\n if (mouseIsEnteringHoverContent && this.overlaidContent) {\n this.overlaidContent.addEventListener(\n 'mouseleave',\n (event: MouseEvent) => {\n const mouseIsEnteringTrigger =\n event.relatedTarget === this.targetContent;\n if (mouseIsEnteringTrigger) {\n return;\n }\n this.onTrigger(\n event as unknown as CustomEvent<LongpressEvent>\n );\n },\n { once: true }\n );\n return;\n }\n if (this.disabled) return;\n\n switch (event.type) {\n case 'mouseenter':\n case 'focusin':\n if (!this.open && this.hoverContent) {\n this.open = 'hover';\n }\n return;\n case 'mouseleave':\n case 'focusout':\n if (this.open === 'hover') {\n this.handleClose();\n }\n return;\n case 'click':\n if (this.clickContent) {\n this.open = event.type;\n } else if (this.closeHoverOverlay) {\n event.preventDefault();\n }\n return;\n case 'longpress':\n if (this.longpressContent) {\n this._longpressEvent = event;\n this.open = event.type;\n }\n return;\n }\n }\n\n private prepareToFocusOverlayContent(overlayContent: HTMLElement): void {\n if (this.type !== 'modal') {\n return;\n }\n const firstFocusable = firstFocusableIn(overlayContent);\n if (!firstFocusable) {\n overlayContent.tabIndex = 0;\n }\n }\n\n public async onTriggerClick(): Promise<void> {\n if (\n !this.targetContent ||\n !this.clickContent ||\n this.closeClickOverlay\n ) {\n return;\n }\n const { targetContent, clickContent } = this;\n this.closeAllOverlays();\n this.prepareToFocusOverlayContent(clickContent);\n this.closeClickOverlay = this.openOverlay(\n targetContent,\n this.type ? this.type : 'click',\n clickContent,\n this.overlayOptions\n );\n }\n\n private _longpressEvent?: CustomEvent<LongpressEvent>;\n\n private async onTriggerLongpress(): Promise<void> {\n if (\n !this.targetContent ||\n !this.longpressContent ||\n this.closeLongpressOverlay\n ) {\n return;\n }\n const { targetContent, longpressContent } = this;\n this.closeAllOverlays();\n this.prepareToFocusOverlayContent(longpressContent);\n const notImmediatelyClosable =\n this._longpressEvent?.detail?.source !== 'keyboard';\n this.closeLongpressOverlay = this.openOverlay(\n targetContent,\n this.type ? this.type : 'longpress',\n longpressContent,\n {\n ...this.overlayOptions,\n receivesFocus: 'auto',\n notImmediatelyClosable,\n }\n );\n this._longpressEvent = undefined;\n }\n\n private abortOverlay: (cancelled: boolean) => void = () => {\n return;\n };\n\n public async onTriggerMouseEnter(): Promise<void> {\n if (\n !this.targetContent ||\n !this.hoverContent ||\n this.closeHoverOverlay\n ) {\n return;\n }\n const abortPromise: Promise<boolean> = new Promise((res) => {\n this.abortOverlay = res;\n });\n const { targetContent, hoverContent } = this;\n this.closeHoverOverlay = this.openOverlay(\n targetContent,\n 'hover',\n hoverContent,\n {\n abortPromise,\n ...this.overlayOptions,\n }\n );\n }\n\n private onClickSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.clickContent = this.extractSlotContentFromEvent(event);\n this.manageOpen();\n }\n\n private onLongpressSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.longpressContent = this.extractSlotContentFromEvent(event);\n this.hasLongpressContent =\n !!this.longpressContent || !!this.closeLongpressOverlay;\n this.manageOpen();\n }\n\n private onHoverSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.hoverContent = this.extractSlotContentFromEvent(event);\n this.manageOpen();\n }\n\n private onTargetSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.targetContent = this.extractSlotContentFromEvent(event);\n }\n\n private extractSlotContentFromEvent(event: Event): HTMLElement | undefined {\n const slot = event.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n return nodes.find((node) => node instanceof HTMLElement) as HTMLElement;\n }\n\n private openStatePromise = Promise.resolve();\n private openStateResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.openStatePromise;\n return complete;\n }\n\n public override disconnectedCallback(): void {\n this.closeAllOverlays();\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,oBAAAC,MAAwB,4DACjC,OACI,aAAAC,EACA,SAAAC,MACG,kDASP,OAAS,eAAAC,MAAmB,cAC5B,OAAOC,MAA0B,2BAS1B,aAAM,uBAAyB,CAClC,MAAO,mDACP,SAAU,uDACV,MAAO,uCACX,EAaO,MAAMC,EAAN,cAA6BR,CAAgB,CAA7C,kCAcH,KAAO,UAAuB,SAM9B,KAAO,OAAS,EAMhB,KAAO,SAAW,GAGlB,KAAO,oBAAsB,GAS7B,KAAQ,aAAe,
|
|
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*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type { LongpressEvent } from '@spectrum-web-components/action-button';\nimport { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport {\n OverlayOpenCloseDetail,\n OverlayOptions,\n OverlayTriggerInteractions,\n Placement,\n TriggerInteractions,\n} from './overlay-types';\nimport { openOverlay } from './loader.js';\nimport overlayTriggerStyles from './overlay-trigger.css.js';\n\nexport type OverlayContentTypes = 'click' | 'hover' | 'longpress';\n\ntype closeOverlay =\n | 'closeClickOverlay'\n | 'closeHoverOverlay'\n | 'closeLongpressOverlay';\n\nexport const LONGPRESS_INSTRUCTIONS = {\n touch: 'Double tap and long press for additional options',\n keyboard: 'Press Space or Alt+Down Arrow for additional options',\n mouse: 'Click and hold for additional options',\n};\n\n/**\n * @element overlay-trigger\n *\n * @slot trigger - The content that will trigger the various overlays\n * @slot hover-content - The content that will be displayed on hover\n * @slot click-content - The content that will be displayed on click\n * @slot longpress-content - The content that will be displayed on click\n *\n * @fires sp-opened - Announces that the overlay has been opened\n * @fires sp-closed - Announces that the overlay has been closed\n */\nexport class OverlayTrigger extends SpectrumElement {\n private closeClickOverlay?: Promise<() => void>;\n private closeLongpressOverlay?: Promise<() => void>;\n private closeHoverOverlay?: Promise<() => void>;\n\n public static override get styles(): CSSResultArray {\n return [overlayTriggerStyles];\n }\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'bottom';\n\n @property()\n public type?: OverlayTriggerInteractions;\n\n @property({ type: Number, reflect: true })\n public offset = 6;\n\n @property({ reflect: true })\n public open?: OverlayContentTypes;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @state()\n public hasLongpressContent = false;\n\n private longpressDescriptor?: HTMLElement;\n private clickContent?: HTMLElement;\n private longpressContent?: HTMLElement;\n private hoverContent?: HTMLElement;\n private targetContent?: HTMLElement;\n private overlaidContent?: HTMLElement;\n\n private _longpressId = `longpress-describedby-descriptor`;\n\n private handleClose(event?: CustomEvent<OverlayOpenCloseDetail>): void {\n if (\n event &&\n event.detail.interaction !== this.open &&\n event.detail.interaction !== this.type\n ) {\n return;\n }\n this.removeAttribute('open');\n }\n\n protected override render(): TemplateResult {\n // Keyboard event availability documented in README.md\n /* eslint-disable lit-a11y/click-events-have-key-events */\n return html`\n <slot\n id=\"trigger\"\n @click=${this.onTrigger}\n @longpress=${this.onTrigger}\n @mouseenter=${this.onTrigger}\n @mouseleave=${this.onTrigger}\n @focusin=${this.onTrigger}\n @focusout=${this.onTrigger}\n @sp-closed=${this.handleClose}\n @slotchange=${this.onTargetSlotChange}\n name=\"trigger\"\n ></slot>\n <div id=\"overlay-content\">\n <slot\n @slotchange=${this.onClickSlotChange}\n name=\"click-content\"\n ></slot>\n <slot\n @slotchange=${this.onLongpressSlotChange}\n name=\"longpress-content\"\n ></slot>\n <slot\n @slotchange=${this.onHoverSlotChange}\n name=\"hover-content\"\n ></slot>\n <slot name=${this._longpressId}></slot>\n </div>\n `;\n /* eslint-enable lit-a11y/click-events-have-key-events */\n }\n\n protected override updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (this.disabled && changes.has('disabled')) {\n this.closeAllOverlays();\n return;\n }\n if (changes.has('open')) {\n this.manageOpen();\n }\n if (changes.has('hasLongpressContent')) {\n this.manageLongpressDescriptor();\n }\n }\n\n protected manageLongpressDescriptor(): void {\n const trigger = this.querySelector(\n '[slot=\"trigger\"]'\n ) as SpectrumElement;\n const ariaDescribedby = trigger.getAttribute('aria-describedby');\n let descriptors = ariaDescribedby ? ariaDescribedby.split(/\\s+/) : [];\n\n if (this.hasLongpressContent) {\n if (!this.longpressDescriptor) {\n this.longpressDescriptor = document.createElement(\n 'div'\n ) as HTMLElement;\n\n this.longpressDescriptor.id = this._longpressId;\n this.longpressDescriptor.slot = this._longpressId;\n }\n const messageType = isIOS() || isAndroid() ? 'touch' : 'keyboard';\n this.longpressDescriptor.textContent =\n LONGPRESS_INSTRUCTIONS[messageType];\n this.appendChild(this.longpressDescriptor);\n descriptors.push(this._longpressId);\n } else {\n if (this.longpressDescriptor) this.longpressDescriptor.remove();\n descriptors = descriptors.filter(\n (descriptor) => descriptor !== this._longpressId\n );\n }\n if (descriptors.length) {\n trigger.setAttribute('aria-describedby', descriptors.join(' '));\n } else {\n trigger.removeAttribute('aria-describedby');\n }\n }\n\n private closeAllOverlays(): void {\n if (this.abortOverlay) this.abortOverlay(true);\n (\n [\n 'closeClickOverlay',\n 'closeHoverOverlay',\n 'closeLongpressOverlay',\n ] as closeOverlay[]\n ).forEach(async (name) => {\n const canClose = this[name] as Promise<() => void>;\n if (canClose == null) return;\n delete this[name];\n (await canClose)();\n });\n this.overlaidContent = undefined;\n }\n\n private manageOpen(): void {\n const openHandlers: Record<OverlayContentTypes | 'none', () => void> = {\n click: () => this.onTriggerClick(),\n hover: () => this.onTriggerMouseEnter(),\n longpress: () => this.onTriggerLongpress(),\n none: () => this.closeAllOverlays(),\n };\n openHandlers[this.open ?? 'none']();\n }\n\n private async openOverlay(\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> {\n this.openStatePromise = new Promise(\n (res) => (this.openStateResolver = res)\n );\n this.addEventListener(\n 'sp-opened',\n () => {\n this.openStateResolver();\n },\n { once: true }\n );\n this.overlaidContent = content;\n return OverlayTrigger.openOverlay(\n target,\n interaction,\n content,\n options\n );\n }\n\n public static openOverlay = async (\n target: HTMLElement,\n interaction: TriggerInteractions,\n content: HTMLElement,\n options: OverlayOptions\n ): Promise<() => void> => {\n return openOverlay(target, interaction, content, options);\n };\n\n private get overlayOptions(): OverlayOptions {\n return {\n offset: this.offset,\n placement: this.placement,\n receivesFocus:\n !this.type || this.type === 'inline' || this.open === 'hover'\n ? undefined\n : 'auto',\n };\n }\n\n private onTrigger(event: CustomEvent<LongpressEvent>): void {\n const mouseIsEnteringHoverContent =\n event.type === 'mouseleave' &&\n this.open === 'hover' &&\n (event as unknown as MouseEvent).relatedTarget ===\n this.overlaidContent;\n if (mouseIsEnteringHoverContent && this.overlaidContent) {\n this.overlaidContent.addEventListener(\n 'mouseleave',\n (event: MouseEvent) => {\n const mouseIsEnteringTrigger =\n event.relatedTarget === this.targetContent;\n if (mouseIsEnteringTrigger) {\n return;\n }\n this.onTrigger(\n event as unknown as CustomEvent<LongpressEvent>\n );\n },\n { once: true }\n );\n return;\n }\n if (this.disabled) return;\n\n switch (event.type) {\n case 'mouseenter':\n case 'focusin':\n if (!this.open && this.hoverContent) {\n this.open = 'hover';\n }\n return;\n case 'mouseleave':\n case 'focusout':\n if (this.open === 'hover') {\n this.handleClose();\n }\n return;\n case 'click':\n if (this.clickContent) {\n this.open = event.type;\n }\n return;\n case 'longpress':\n if (this.longpressContent) {\n this._longpressEvent = event;\n this.open = event.type;\n }\n return;\n }\n }\n\n private prepareToFocusOverlayContent(overlayContent: HTMLElement): void {\n if (this.type !== 'modal') {\n return;\n }\n const firstFocusable = firstFocusableIn(overlayContent);\n if (!firstFocusable) {\n overlayContent.tabIndex = 0;\n }\n }\n\n public async onTriggerClick(): Promise<void> {\n if (\n !this.targetContent ||\n !this.clickContent ||\n this.closeClickOverlay\n ) {\n return;\n }\n const { targetContent, clickContent } = this;\n this.closeAllOverlays();\n this.prepareToFocusOverlayContent(clickContent);\n this.closeClickOverlay = this.openOverlay(\n targetContent,\n this.type ? this.type : 'click',\n clickContent,\n this.overlayOptions\n );\n }\n\n private _longpressEvent?: CustomEvent<LongpressEvent>;\n\n private async onTriggerLongpress(): Promise<void> {\n if (\n !this.targetContent ||\n !this.longpressContent ||\n this.closeLongpressOverlay\n ) {\n return;\n }\n const { targetContent, longpressContent } = this;\n this.closeAllOverlays();\n this.prepareToFocusOverlayContent(longpressContent);\n const notImmediatelyClosable =\n this._longpressEvent?.detail?.source !== 'keyboard';\n this.closeLongpressOverlay = this.openOverlay(\n targetContent,\n this.type ? this.type : 'longpress',\n longpressContent,\n {\n ...this.overlayOptions,\n receivesFocus: 'auto',\n notImmediatelyClosable,\n }\n );\n this._longpressEvent = undefined;\n }\n\n private abortOverlay: (cancelled: boolean) => void = () => {\n return;\n };\n\n public async onTriggerMouseEnter(): Promise<void> {\n if (\n !this.targetContent ||\n !this.hoverContent ||\n this.closeHoverOverlay\n ) {\n return;\n }\n const abortPromise: Promise<boolean> = new Promise((res) => {\n this.abortOverlay = res;\n });\n const { targetContent, hoverContent } = this;\n this.closeHoverOverlay = this.openOverlay(\n targetContent,\n 'hover',\n hoverContent,\n {\n abortPromise,\n ...this.overlayOptions,\n }\n );\n }\n\n private onClickSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.clickContent = this.extractSlotContentFromEvent(event);\n this.manageOpen();\n }\n\n private onLongpressSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.longpressContent = this.extractSlotContentFromEvent(event);\n this.hasLongpressContent =\n !!this.longpressContent || !!this.closeLongpressOverlay;\n this.manageOpen();\n }\n\n private onHoverSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.hoverContent = this.extractSlotContentFromEvent(event);\n this.manageOpen();\n }\n\n private onTargetSlotChange(\n event: Event & { target: HTMLSlotElement }\n ): void {\n this.targetContent = this.extractSlotContentFromEvent(event);\n }\n\n private extractSlotContentFromEvent(event: Event): HTMLElement | undefined {\n const slot = event.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n return nodes.find((node) => node instanceof HTMLElement) as HTMLElement;\n }\n\n private openStatePromise = Promise.resolve();\n private openStateResolver!: () => void;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n await this.openStatePromise;\n return complete;\n }\n\n public override disconnectedCallback(): void {\n this.closeAllOverlays();\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["html", "SpectrumElement", "property", "state", "firstFocusableIn", "isAndroid", "isIOS", "openOverlay", "overlayTriggerStyles", "_OverlayTrigger", "event", "changes", "trigger", "ariaDescribedby", "descriptors", "messageType", "descriptor", "name", "canClose", "_a", "target", "interaction", "content", "options", "res", "overlayContent", "targetContent", "clickContent", "_b", "longpressContent", "notImmediatelyClosable", "abortPromise", "hoverContent", "node", "complete", "__decorateClass"]
|
|
7
7
|
}
|
package/src/overlay-stack.dev.js
CHANGED
|
@@ -68,8 +68,15 @@ export class OverlayStack {
|
|
|
68
68
|
if (this.preventMouseRootClose || event.defaultPrevented) {
|
|
69
69
|
return;
|
|
70
70
|
}
|
|
71
|
-
this.closeTopOverlay();
|
|
72
71
|
const overlaysToClose = [];
|
|
72
|
+
let index = this.overlays.length;
|
|
73
|
+
while (index && overlaysToClose.length === 0) {
|
|
74
|
+
index -= 1;
|
|
75
|
+
const overlay2 = this.overlays[index];
|
|
76
|
+
if (!event.composedPath().includes(overlay2.trigger) || overlay2.interaction !== "hover") {
|
|
77
|
+
overlaysToClose.push(overlay2);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
73
80
|
let root = (_a = this.topOverlay) == null ? void 0 : _a.root;
|
|
74
81
|
let overlay = parentOverlayOf(root);
|
|
75
82
|
while (root && overlay) {
|
|
@@ -239,8 +246,8 @@ export class OverlayStack {
|
|
|
239
246
|
this.startTabTrapping();
|
|
240
247
|
}
|
|
241
248
|
const contentWithLifecycle = details.content;
|
|
249
|
+
const { trigger } = details;
|
|
242
250
|
if (contentWithLifecycle.overlayWillOpenCallback) {
|
|
243
|
-
const { trigger } = details;
|
|
244
251
|
contentWithLifecycle.overlayWillOpenCallback({ trigger });
|
|
245
252
|
}
|
|
246
253
|
if (details.delayed) {
|
|
@@ -254,7 +261,6 @@ export class OverlayStack {
|
|
|
254
261
|
const cancelled = await Promise.race(promises);
|
|
255
262
|
if (cancelled) {
|
|
256
263
|
if (contentWithLifecycle.overlayOpenCancelledCallback) {
|
|
257
|
-
const { trigger } = details;
|
|
258
264
|
contentWithLifecycle.overlayOpenCancelledCallback({
|
|
259
265
|
trigger
|
|
260
266
|
});
|
|
@@ -288,9 +294,9 @@ export class OverlayStack {
|
|
|
288
294
|
return;
|
|
289
295
|
};
|
|
290
296
|
if (contentWithLifecycle.overlayOpenCallback) {
|
|
291
|
-
const { trigger } = activeOverlay;
|
|
297
|
+
const { trigger: trigger2 } = activeOverlay;
|
|
292
298
|
const { overlayOpenCallback } = contentWithLifecycle;
|
|
293
|
-
cb = async () => await overlayOpenCallback({ trigger });
|
|
299
|
+
cb = async () => await overlayOpenCallback({ trigger: trigger2 });
|
|
294
300
|
}
|
|
295
301
|
await activeOverlay.openCallback(cb);
|
|
296
302
|
return false;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-stack.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*/\n\nimport { ActiveOverlay } from './ActiveOverlay.dev.js'\nimport type {\n OverlayOpenCloseDetail,\n OverlayOpenDetail,\n} from './overlay-types';\nimport { OverlayTimer } from './overlay-timer.dev.js'\nimport '../active-overlay.dev.js'\nimport {\n findOverlaysRootedInOverlay,\n parentOverlayOf,\n} from './overlay-utils.dev.js'\nimport { OverlayCloseEvent } from './overlay-events.dev.js'\nimport { getDeepElementFromPoint } from '@spectrum-web-components/shared/src/get-deep-element-from-point.js';\n\nfunction isLeftClick(event: MouseEvent): boolean {\n return event.button === 0;\n}\n\nfunction hasModifier(event: MouseEvent): boolean {\n return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);\n}\n\ninterface ManagedOverlayContent {\n open: boolean;\n // Allow the overlaid content to do something before it is thrown.\n overlayWillOpenCallback?: (args: { trigger: HTMLElement }) => void;\n // Allow the overlaid content to do something when it has been thrown.\n overlayOpenCallback?: (args: { trigger: HTMLElement }) => void;\n // Allow the overlaid content to do something when its throw has been cancelled.\n overlayOpenCancelledCallback?: (args: { trigger: HTMLElement }) => void;\n // Allow the overlaid content to do something before it is recalled, and return `true` if it will self managing the recall.\n overlayWillCloseCallback?: (args: { trigger: HTMLElement }) => boolean;\n // Allow the overlaid content to do something when it has been recalled.\n overlayCloseCallback?: (args: { trigger: HTMLElement }) => void;\n // Surface possible LitElement lifecycle methods on the synthetically types element.\n updateComplete?: Promise<boolean>;\n}\n\nexport class OverlayStack {\n public overlays: ActiveOverlay[] = [];\n\n private preventMouseRootClose = false;\n private root: HTMLElement = document.body;\n private handlingResize = false;\n private overlayTimer = new OverlayTimer();\n\n private canTabTrap = true;\n private trappingInited = false;\n private tabTrapper!: HTMLElement;\n private overlayHolder!: HTMLElement;\n private _eventsAreBound = false;\n\n private initTabTrapping(): void {\n if (this.trappingInited) return;\n this.trappingInited = true;\n /* c8 ignore next 4 */\n if (this.document.body.shadowRoot) {\n this.canTabTrap = false;\n return;\n }\n this.document.body.attachShadow({ mode: 'open' });\n /* c8 ignore next 3 */\n if (!this.document.body.shadowRoot) {\n return;\n }\n const root = this.document.body.shadowRoot as ShadowRoot;\n root.innerHTML = `\n <style>\n :host {\n position: relative;\n }\n #actual {\n position: relative;\n height: calc(100% - var(--swc-body-margins-block, 0px));\n z-index: 0;\n min-height: calc(100vh - var(--swc-body-margins-block, 0px));\n }\n #holder {\n display: none;\n align-items: center;\n justify-content: center;\n flex-flow: column;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n [name=\"open\"]::slotted(*) {\n pointer-events: all;\n }\n #actual[aria-hidden] + #holder {\n display: flex;\n }\n </style>\n <div id=\"actual\"><slot></slot></div>\n <div id=\"holder\"><slot name=\"open\"></slot></div>\n `;\n this.tabTrapper = root.querySelector('#actual') as HTMLElement;\n this.overlayHolder = root.querySelector('#holder') as HTMLElement;\n this.tabTrapper.attachShadow({ mode: 'open' });\n if (this.tabTrapper.shadowRoot) {\n this.tabTrapper.shadowRoot.innerHTML = '<slot></slot>';\n }\n this.overlayHolder.addEventListener(\n 'contextmenu',\n this.forwardContextmenuEvent,\n true\n );\n requestAnimationFrame(() => {\n this.applyBodyMargins();\n const observer = new ResizeObserver(() => {\n this.applyBodyMargins();\n });\n observer.observe(document.body);\n });\n }\n\n private _bodyMarginsApplied = false;\n\n private applyBodyMargins(): void {\n const { marginLeft, marginRight, marginTop, marginBottom } =\n getComputedStyle(document.body);\n const allZero =\n parseFloat(marginLeft) === 0 &&\n parseFloat(marginRight) === 0 &&\n parseFloat(marginTop) === 0 &&\n parseFloat(marginBottom) === 0;\n if (allZero && !this._bodyMarginsApplied) {\n return;\n }\n this.tabTrapper.style.setProperty(\n '--swc-body-margins-inline',\n `calc(${marginLeft} + ${marginRight})`\n );\n this.tabTrapper.style.setProperty(\n '--swc-body-margins-block',\n `calc(${marginTop} + ${marginBottom})`\n );\n this._bodyMarginsApplied = !allZero;\n }\n\n private startTabTrapping(): void {\n this.initTabTrapping();\n /* c8 ignore next 3 */\n if (!this.canTabTrap) {\n return;\n }\n this.tabTrapper.tabIndex = -1;\n this.tabTrapper.setAttribute('aria-hidden', 'true');\n }\n\n private stopTabTrapping(): void {\n /* c8 ignore next 3 */\n if (!this.canTabTrap || !this.trappingInited) {\n return;\n }\n this.tabTrapper.removeAttribute('tabindex');\n this.tabTrapper.removeAttribute('aria-hidden');\n }\n\n private forwardContextmenuEvent = async (\n event: MouseEvent\n ): Promise<void> => {\n const topOverlay = this.overlays[this.overlays.length - 1];\n if (\n !this.trappingInited ||\n topOverlay.interaction !== 'modal' ||\n event.target !== this.overlayHolder\n ) {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n await this.closeTopOverlay();\n getDeepElementFromPoint(event.clientX, event.clientY)?.dispatchEvent(\n new MouseEvent('contextmenu', event)\n );\n };\n\n private get document(): Document {\n return this.root.ownerDocument /* c8 ignore next */ || document;\n }\n\n private get topOverlay(): ActiveOverlay | undefined {\n return this.overlays.slice(-1)[0];\n }\n\n private findOverlayForContent(\n overlayContent: HTMLElement\n ): ActiveOverlay | undefined {\n for (const item of this.overlays) {\n if (overlayContent === item.overlayContent) {\n return item;\n }\n }\n return undefined;\n }\n\n private addEventListeners(): void {\n if (this._eventsAreBound) return;\n this._eventsAreBound = true;\n this.document.addEventListener('click', this.handleMouseCapture, true);\n this.document.addEventListener('click', this.handleMouse);\n this.document.addEventListener('keydown', this.handleKeydown);\n this.document.addEventListener(\n 'sp-overlay-close',\n this.handleOverlayClose as EventListener\n );\n window.addEventListener('resize', this.handleResize);\n }\n\n handleOverlayClose = (event: OverlayCloseEvent): void => {\n const { root } = event;\n if (!root) return;\n this.closeOverlaysForRoot(root);\n };\n\n private isClickOverlayActiveForTrigger(trigger: HTMLElement): boolean {\n return this.overlays.some(\n (item) => trigger === item.trigger && item.interaction === 'click'\n );\n }\n\n public async openOverlay(details: OverlayOpenDetail): Promise<boolean> {\n this.addEventListeners();\n if (this.findOverlayForContent(details.content)) {\n return false;\n }\n if (details.notImmediatelyClosable) {\n this._doesNotCloseOnFirstClick = true;\n }\n if (details.interaction === 'modal') {\n this.startTabTrapping();\n }\n\n const contentWithLifecycle =\n details.content as unknown as ManagedOverlayContent;\n if (contentWithLifecycle.overlayWillOpenCallback) {\n const { trigger } = details;\n contentWithLifecycle.overlayWillOpenCallback({ trigger });\n }\n\n if (details.delayed) {\n const cancelledPromise = this.overlayTimer.openTimer(\n details.content\n );\n const promises = [cancelledPromise];\n if (details.abortPromise) {\n promises.push(details.abortPromise);\n }\n const cancelled = await Promise.race(promises);\n if (cancelled) {\n if (contentWithLifecycle.overlayOpenCancelledCallback) {\n const { trigger } = details;\n contentWithLifecycle.overlayOpenCancelledCallback({\n trigger,\n });\n }\n return cancelled;\n }\n }\n\n if (details.root) {\n this.closeOverlaysForRoot(details.root);\n }\n if (details.interaction === 'click') {\n this.closeAllHoverOverlays();\n } else if (\n details.interaction === 'hover' &&\n this.isClickOverlayActiveForTrigger(details.trigger)\n ) {\n // Don't show a hover popover if the click popover is already active\n return true;\n }\n\n const activeOverlay = ActiveOverlay.create(details);\n\n if (this.overlays.length) {\n const topOverlay = this.overlays[this.overlays.length - 1];\n topOverlay.obscure(activeOverlay.interaction);\n }\n\n document.body.appendChild(activeOverlay);\n\n /**\n * The following work to make the new overlay the \"top\" of the stack\n * has to happen AFTER the current call stack completes in case there\n * is work there in to remove the previous \"top\" overlay.\n */\n return new Promise((res) => requestAnimationFrame(res)).then(\n async () => {\n this.overlays.push(activeOverlay);\n await activeOverlay.updateComplete;\n this.addOverlayEventListeners(activeOverlay);\n if (typeof contentWithLifecycle.open !== 'undefined') {\n contentWithLifecycle.open = true;\n }\n let cb: () => Promise<void> | void = () => {\n return;\n };\n if (contentWithLifecycle.overlayOpenCallback) {\n const { trigger } = activeOverlay;\n const { overlayOpenCallback } = contentWithLifecycle;\n cb = async () => await overlayOpenCallback({ trigger });\n }\n await activeOverlay.openCallback(cb);\n return false;\n }\n );\n }\n\n public addOverlayEventListeners(activeOverlay: ActiveOverlay): void {\n activeOverlay.addEventListener('close', (() => {\n this.hideAndCloseOverlay(\n activeOverlay,\n true // animated?\n );\n }) as EventListener);\n switch (activeOverlay.interaction) {\n case 'replace':\n this.addReplaceOverlayEventListeners(activeOverlay);\n break;\n case 'inline':\n this.addInlineOverlayEventListeners(activeOverlay);\n break;\n }\n }\n\n public addReplaceOverlayEventListeners(activeOverlay: ActiveOverlay): void {\n activeOverlay.addEventListener('keydown', (event: KeyboardEvent) => {\n const { code } = event;\n /* c8 ignore next */\n if (code !== 'Tab') return;\n\n event.stopPropagation();\n this.closeOverlay(activeOverlay.overlayContent);\n activeOverlay.tabbingAway = true;\n activeOverlay.trigger.focus();\n activeOverlay.trigger.dispatchEvent(\n new KeyboardEvent('keydown', event)\n );\n });\n }\n\n public addInlineOverlayEventListeners(activeOverlay: ActiveOverlay): void {\n activeOverlay.trigger.addEventListener(\n 'keydown',\n activeOverlay.handleInlineTriggerKeydown\n );\n activeOverlay.addEventListener('keydown', (event: KeyboardEvent) => {\n const { code, shiftKey } = event;\n /* c8 ignore next */\n if (code !== 'Tab') return;\n\n activeOverlay.tabbingAway = true;\n if (shiftKey) {\n const returnFocusElement = document.createElement('span');\n returnFocusElement.tabIndex = -1;\n if (activeOverlay.trigger.hasAttribute('slot')) {\n returnFocusElement.slot = activeOverlay.trigger.slot;\n }\n activeOverlay.trigger.insertAdjacentElement(\n 'afterend',\n returnFocusElement\n );\n returnFocusElement.focus();\n returnFocusElement.remove();\n return;\n }\n\n event.stopPropagation();\n const triggerWithLifecycle =\n activeOverlay.trigger as unknown as ManagedOverlayContent;\n if (typeof triggerWithLifecycle.open !== 'undefined') {\n triggerWithLifecycle.open = false;\n }\n this.closeOverlay(activeOverlay.overlayContent);\n activeOverlay.trigger.focus();\n });\n }\n\n public closeOverlay(content: HTMLElement): void {\n this.overlayTimer.close(content);\n requestAnimationFrame(() => {\n const overlayFromContent = this.findOverlayForContent(content);\n const overlaysToClose = [overlayFromContent];\n overlaysToClose.push(\n ...findOverlaysRootedInOverlay(\n overlayFromContent,\n this.overlays\n )\n );\n overlaysToClose.forEach((overlay) =>\n this.hideAndCloseOverlay(overlay)\n );\n });\n }\n\n private handleMouseCapture = (event: MouseEvent): void => {\n const topOverlay = this.topOverlay;\n if (\n !event.target ||\n !topOverlay ||\n !topOverlay.overlayContent ||\n hasModifier(event) ||\n !isLeftClick(event)\n ) {\n this.preventMouseRootClose = true;\n return;\n }\n\n if (event.target instanceof Node) {\n const path = event.composedPath();\n if (path.indexOf(topOverlay.overlayContent) >= 0) {\n this.preventMouseRootClose = true;\n return;\n }\n this.preventMouseRootClose = false;\n }\n };\n\n private closeAllHoverOverlays(): void {\n for (const overlay of this.overlays) {\n if (overlay.interaction === 'hover') {\n this.hideAndCloseOverlay(overlay, false);\n }\n }\n }\n\n private closeOverlaysForRoot(root: HTMLElement): void {\n const overlaysToClose: ActiveOverlay[] = [];\n for (const overlay of this.overlays) {\n if (overlay.root && overlay.root === root) {\n overlaysToClose.push(overlay);\n overlaysToClose.push(\n ...findOverlaysRootedInOverlay(overlay, this.overlays)\n );\n }\n }\n overlaysToClose.forEach((overlay) =>\n this.hideAndCloseOverlay(overlay, true, true)\n );\n }\n\n private async manageFocusAfterCloseWhenOverlaysRemain(\n returnBeforeFocus?: boolean,\n previousTrigger?: HTMLElement\n ): Promise<void> {\n const topOverlay = this.overlays[this.overlays.length - 1];\n topOverlay.feature();\n // Push focus in the the next remaining overlay as needed when a `type=\"modal\"` overlay exists.\n if (topOverlay.interaction === 'modal' || topOverlay.hasModalRoot) {\n if (returnBeforeFocus) return;\n await (previousTrigger || topOverlay).focus();\n } else {\n this.stopTabTrapping();\n }\n }\n\n private manageFocusAfterCloseWhenLastOverlay(overlay: ActiveOverlay): void {\n this.stopTabTrapping();\n const isModal = overlay.interaction === 'modal';\n const isReceivesFocus = overlay.receivesFocus === 'auto';\n const isReplace = overlay.interaction === 'replace';\n const isInline = overlay.interaction === 'inline';\n const isTabbingAwayFromInlineOrReplace =\n (isReplace || isInline) && !overlay.tabbingAway;\n overlay.tabbingAway = false;\n if (!isModal && !isReceivesFocus && !isTabbingAwayFromInlineOrReplace) {\n return;\n }\n // Manage post closure focus when needed.\n const overlayRoot = overlay.overlayContent.getRootNode() as ShadowRoot;\n const overlayContentActiveElement = overlayRoot.activeElement;\n let triggerRoot: ShadowRoot;\n let triggerActiveElement: Element | null;\n const contentContainsActiveElement = (): boolean =>\n overlay.overlayContent.contains(overlayContentActiveElement);\n const triggerRootContainsActiveElement = (): boolean => {\n triggerRoot = overlay.trigger.getRootNode() as ShadowRoot;\n triggerActiveElement = triggerRoot.activeElement;\n return triggerRoot.contains(triggerActiveElement);\n };\n const triggerHostIsActiveElement = (): boolean =>\n triggerRoot.host && triggerRoot.host === triggerActiveElement;\n // Return focus to the trigger as long as the user hasn't actively focused\n // something outside of the current overlay interface; trigger, root, host.\n if (\n isModal ||\n contentContainsActiveElement() ||\n triggerRootContainsActiveElement() ||\n triggerHostIsActiveElement()\n ) {\n overlay.trigger.focus();\n }\n }\n\n private async hideAndCloseOverlay(\n overlay?: ActiveOverlay,\n animated?: boolean,\n returnBeforeFocus?: boolean\n ): Promise<void> {\n if (!overlay) {\n return;\n }\n const contentWithLifecycle =\n overlay.overlayContent as unknown as ManagedOverlayContent;\n if (\n typeof contentWithLifecycle.overlayWillCloseCallback !== 'undefined'\n ) {\n const { trigger } = overlay;\n if (contentWithLifecycle.overlayWillCloseCallback({ trigger })) {\n return;\n }\n }\n await overlay.hide(animated);\n if (typeof contentWithLifecycle.open !== 'undefined') {\n contentWithLifecycle.open = false;\n }\n if (contentWithLifecycle.overlayCloseCallback) {\n const { trigger } = overlay;\n await contentWithLifecycle.overlayCloseCallback({ trigger });\n }\n\n if (overlay.state != 'dispose') return;\n\n const index = this.overlays.indexOf(overlay);\n if (index >= 0) {\n this.overlays.splice(index, 1);\n }\n\n if (this.overlays.length) {\n await this.manageFocusAfterCloseWhenOverlaysRemain(\n returnBeforeFocus || overlay.interaction === 'hover',\n overlay.trigger\n );\n } else {\n this.manageFocusAfterCloseWhenLastOverlay(overlay);\n }\n\n overlay.remove();\n overlay.dispose();\n\n overlay.trigger.dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>('sp-closed', {\n bubbles: true,\n composed: true,\n cancelable: true,\n detail: {\n interaction: overlay.interaction,\n },\n })\n );\n }\n\n private closeTopOverlay(): Promise<void> {\n return this.hideAndCloseOverlay(this.topOverlay, true);\n }\n\n /**\n * A \"longpress\" occurs before the \"click\" that creates it has occured.\n * In that way the first click will still be part of the \"longpress\" and\n * not part of closing the overlay.\n */\n private _doesNotCloseOnFirstClick = false;\n\n private handleMouse = (event: Event): void => {\n if (this._doesNotCloseOnFirstClick) {\n this._doesNotCloseOnFirstClick = false;\n return;\n }\n if (this.preventMouseRootClose || event.defaultPrevented) {\n return;\n }\n this.closeTopOverlay();\n const overlaysToClose = [];\n let root: HTMLElement | undefined = this.topOverlay?.root;\n let overlay = parentOverlayOf(root);\n while (root && overlay) {\n overlaysToClose.push(overlay);\n overlay = parentOverlayOf(root);\n root = overlay?.root;\n }\n if (overlay) {\n overlaysToClose.push(overlay);\n }\n overlaysToClose.forEach((overlay) => this.hideAndCloseOverlay(overlay));\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.code === 'Escape') {\n this.closeTopOverlay();\n }\n };\n\n private handleResize = (): void => {\n if (this.handlingResize) return;\n\n this.handlingResize = true;\n requestAnimationFrame(async () => {\n const promises = this.overlays.map((overlay) =>\n overlay.updateOverlayPosition()\n );\n await Promise.all(promises);\n this.handlingResize = false;\n });\n };\n}\n"],
|
|
5
|
-
"mappings": ";AAYA,SAAS,qBAAqB;AAK9B,SAAS,oBAAoB;AAC7B,OAAO;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,+BAA+B;AAExC,SAAS,YAAY,OAA4B;AAC7C,SAAO,MAAM,WAAW;AAC5B;AAEA,SAAS,YAAY,OAA4B;AAC7C,SAAO,CAAC,EAAE,MAAM,WAAW,MAAM,UAAU,MAAM,WAAW,MAAM;AACtE;AAkBO,aAAM,aAAa;AAAA,EAAnB;AACH,SAAO,WAA4B,CAAC;AAEpC,SAAQ,wBAAwB;AAChC,SAAQ,OAAoB,SAAS;AACrC,SAAQ,iBAAiB;AACzB,SAAQ,eAAe,IAAI,aAAa;AAExC,SAAQ,aAAa;AACrB,SAAQ,iBAAiB;AAGzB,SAAQ,kBAAkB;AAoE1B,SAAQ,sBAAsB;AA2C9B,SAAQ,0BAA0B,OAC9B,UACgB;AA/KxB;AAgLQ,YAAM,aAAa,KAAK,SAAS,KAAK,SAAS,SAAS;AACxD,UACI,CAAC,KAAK,kBACN,WAAW,gBAAgB,WAC3B,MAAM,WAAW,KAAK,eACxB;AACE;AAAA,MACJ;AACA,YAAM,gBAAgB;AACtB,YAAM,eAAe;AACrB,YAAM,KAAK,gBAAgB;AAC3B,oCAAwB,MAAM,SAAS,MAAM,OAAO,MAApD,mBAAuD;AAAA,QACnD,IAAI,WAAW,eAAe,KAAK;AAAA;AAAA,IAE3C;AAkCA,8BAAqB,CAAC,UAAmC;AACrD,YAAM,EAAE,KAAK,IAAI;AACjB,UAAI,CAAC;AAAM;AACX,WAAK,qBAAqB,IAAI;AAAA,IAClC;
|
|
6
|
-
"names": ["overlay"]
|
|
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*/\n\nimport { ActiveOverlay } from './ActiveOverlay.dev.js'\nimport type {\n OverlayOpenCloseDetail,\n OverlayOpenDetail,\n} from './overlay-types';\nimport { OverlayTimer } from './overlay-timer.dev.js'\nimport '../active-overlay.dev.js'\nimport {\n findOverlaysRootedInOverlay,\n parentOverlayOf,\n} from './overlay-utils.dev.js'\nimport { OverlayCloseEvent } from './overlay-events.dev.js'\nimport { getDeepElementFromPoint } from '@spectrum-web-components/shared/src/get-deep-element-from-point.js';\n\nfunction isLeftClick(event: MouseEvent): boolean {\n return event.button === 0;\n}\n\nfunction hasModifier(event: MouseEvent): boolean {\n return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);\n}\n\ninterface ManagedOverlayContent {\n open: boolean;\n // Allow the overlaid content to do something before it is thrown.\n overlayWillOpenCallback?: (args: { trigger: HTMLElement }) => void;\n // Allow the overlaid content to do something when it has been thrown.\n overlayOpenCallback?: (args: { trigger: HTMLElement }) => void;\n // Allow the overlaid content to do something when its throw has been cancelled.\n overlayOpenCancelledCallback?: (args: { trigger: HTMLElement }) => void;\n // Allow the overlaid content to do something before it is recalled, and return `true` if it will self managing the recall.\n overlayWillCloseCallback?: (args: { trigger: HTMLElement }) => boolean;\n // Allow the overlaid content to do something when it has been recalled.\n overlayCloseCallback?: (args: { trigger: HTMLElement }) => void;\n // Surface possible LitElement lifecycle methods on the synthetically types element.\n updateComplete?: Promise<boolean>;\n}\n\nexport class OverlayStack {\n public overlays: ActiveOverlay[] = [];\n\n private preventMouseRootClose = false;\n private root: HTMLElement = document.body;\n private handlingResize = false;\n private overlayTimer = new OverlayTimer();\n\n private canTabTrap = true;\n private trappingInited = false;\n private tabTrapper!: HTMLElement;\n private overlayHolder!: HTMLElement;\n private _eventsAreBound = false;\n\n private initTabTrapping(): void {\n if (this.trappingInited) return;\n this.trappingInited = true;\n /* c8 ignore next 4 */\n if (this.document.body.shadowRoot) {\n this.canTabTrap = false;\n return;\n }\n this.document.body.attachShadow({ mode: 'open' });\n /* c8 ignore next 3 */\n if (!this.document.body.shadowRoot) {\n return;\n }\n const root = this.document.body.shadowRoot as ShadowRoot;\n root.innerHTML = `\n <style>\n :host {\n position: relative;\n }\n #actual {\n position: relative;\n height: calc(100% - var(--swc-body-margins-block, 0px));\n z-index: 0;\n min-height: calc(100vh - var(--swc-body-margins-block, 0px));\n }\n #holder {\n display: none;\n align-items: center;\n justify-content: center;\n flex-flow: column;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n [name=\"open\"]::slotted(*) {\n pointer-events: all;\n }\n #actual[aria-hidden] + #holder {\n display: flex;\n }\n </style>\n <div id=\"actual\"><slot></slot></div>\n <div id=\"holder\"><slot name=\"open\"></slot></div>\n `;\n this.tabTrapper = root.querySelector('#actual') as HTMLElement;\n this.overlayHolder = root.querySelector('#holder') as HTMLElement;\n this.tabTrapper.attachShadow({ mode: 'open' });\n if (this.tabTrapper.shadowRoot) {\n this.tabTrapper.shadowRoot.innerHTML = '<slot></slot>';\n }\n this.overlayHolder.addEventListener(\n 'contextmenu',\n this.forwardContextmenuEvent,\n true\n );\n requestAnimationFrame(() => {\n this.applyBodyMargins();\n const observer = new ResizeObserver(() => {\n this.applyBodyMargins();\n });\n observer.observe(document.body);\n });\n }\n\n private _bodyMarginsApplied = false;\n\n private applyBodyMargins(): void {\n const { marginLeft, marginRight, marginTop, marginBottom } =\n getComputedStyle(document.body);\n const allZero =\n parseFloat(marginLeft) === 0 &&\n parseFloat(marginRight) === 0 &&\n parseFloat(marginTop) === 0 &&\n parseFloat(marginBottom) === 0;\n if (allZero && !this._bodyMarginsApplied) {\n return;\n }\n this.tabTrapper.style.setProperty(\n '--swc-body-margins-inline',\n `calc(${marginLeft} + ${marginRight})`\n );\n this.tabTrapper.style.setProperty(\n '--swc-body-margins-block',\n `calc(${marginTop} + ${marginBottom})`\n );\n this._bodyMarginsApplied = !allZero;\n }\n\n private startTabTrapping(): void {\n this.initTabTrapping();\n /* c8 ignore next 3 */\n if (!this.canTabTrap) {\n return;\n }\n this.tabTrapper.tabIndex = -1;\n this.tabTrapper.setAttribute('aria-hidden', 'true');\n }\n\n private stopTabTrapping(): void {\n /* c8 ignore next 3 */\n if (!this.canTabTrap || !this.trappingInited) {\n return;\n }\n this.tabTrapper.removeAttribute('tabindex');\n this.tabTrapper.removeAttribute('aria-hidden');\n }\n\n private forwardContextmenuEvent = async (\n event: MouseEvent\n ): Promise<void> => {\n const topOverlay = this.overlays[this.overlays.length - 1];\n if (\n !this.trappingInited ||\n topOverlay.interaction !== 'modal' ||\n event.target !== this.overlayHolder\n ) {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n await this.closeTopOverlay();\n getDeepElementFromPoint(event.clientX, event.clientY)?.dispatchEvent(\n new MouseEvent('contextmenu', event)\n );\n };\n\n private get document(): Document {\n return this.root.ownerDocument /* c8 ignore next */ || document;\n }\n\n private get topOverlay(): ActiveOverlay | undefined {\n return this.overlays.slice(-1)[0];\n }\n\n private findOverlayForContent(\n overlayContent: HTMLElement\n ): ActiveOverlay | undefined {\n for (const item of this.overlays) {\n if (overlayContent === item.overlayContent) {\n return item;\n }\n }\n return undefined;\n }\n\n private addEventListeners(): void {\n if (this._eventsAreBound) return;\n this._eventsAreBound = true;\n this.document.addEventListener('click', this.handleMouseCapture, true);\n this.document.addEventListener('click', this.handleMouse);\n this.document.addEventListener('keydown', this.handleKeydown);\n this.document.addEventListener(\n 'sp-overlay-close',\n this.handleOverlayClose as EventListener\n );\n window.addEventListener('resize', this.handleResize);\n }\n\n handleOverlayClose = (event: OverlayCloseEvent): void => {\n const { root } = event;\n if (!root) return;\n this.closeOverlaysForRoot(root);\n };\n\n private isClickOverlayActiveForTrigger(trigger: HTMLElement): boolean {\n return this.overlays.some(\n (item) => trigger === item.trigger && item.interaction === 'click'\n );\n }\n\n public async openOverlay(details: OverlayOpenDetail): Promise<boolean> {\n this.addEventListeners();\n if (this.findOverlayForContent(details.content)) {\n return false;\n }\n if (details.notImmediatelyClosable) {\n this._doesNotCloseOnFirstClick = true;\n }\n if (details.interaction === 'modal') {\n this.startTabTrapping();\n }\n\n const contentWithLifecycle =\n details.content as unknown as ManagedOverlayContent;\n const { trigger } = details;\n if (contentWithLifecycle.overlayWillOpenCallback) {\n contentWithLifecycle.overlayWillOpenCallback({ trigger });\n }\n\n if (details.delayed) {\n const cancelledPromise = this.overlayTimer.openTimer(\n details.content\n );\n const promises = [cancelledPromise];\n if (details.abortPromise) {\n promises.push(details.abortPromise);\n }\n const cancelled = await Promise.race(promises);\n if (cancelled) {\n if (contentWithLifecycle.overlayOpenCancelledCallback) {\n contentWithLifecycle.overlayOpenCancelledCallback({\n trigger,\n });\n }\n return cancelled;\n }\n }\n\n if (details.root) {\n this.closeOverlaysForRoot(details.root);\n }\n if (details.interaction === 'click') {\n this.closeAllHoverOverlays();\n } else if (\n details.interaction === 'hover' &&\n this.isClickOverlayActiveForTrigger(details.trigger)\n ) {\n // Don't show a hover popover if the click popover is already active\n return true;\n }\n\n const activeOverlay = ActiveOverlay.create(details);\n\n if (this.overlays.length) {\n const topOverlay = this.overlays[this.overlays.length - 1];\n topOverlay.obscure(activeOverlay.interaction);\n }\n\n document.body.appendChild(activeOverlay);\n\n /**\n * The following work to make the new overlay the \"top\" of the stack\n * has to happen AFTER the current call stack completes in case there\n * is work there in to remove the previous \"top\" overlay.\n */\n return new Promise((res) => requestAnimationFrame(res)).then(\n async () => {\n this.overlays.push(activeOverlay);\n await activeOverlay.updateComplete;\n this.addOverlayEventListeners(activeOverlay);\n if (typeof contentWithLifecycle.open !== 'undefined') {\n contentWithLifecycle.open = true;\n }\n let cb: () => Promise<void> | void = () => {\n return;\n };\n if (contentWithLifecycle.overlayOpenCallback) {\n const { trigger } = activeOverlay;\n const { overlayOpenCallback } = contentWithLifecycle;\n cb = async () => await overlayOpenCallback({ trigger });\n }\n await activeOverlay.openCallback(cb);\n return false;\n }\n );\n }\n\n public addOverlayEventListeners(activeOverlay: ActiveOverlay): void {\n activeOverlay.addEventListener('close', (() => {\n this.hideAndCloseOverlay(\n activeOverlay,\n true // animated?\n );\n }) as EventListener);\n switch (activeOverlay.interaction) {\n case 'replace':\n this.addReplaceOverlayEventListeners(activeOverlay);\n break;\n case 'inline':\n this.addInlineOverlayEventListeners(activeOverlay);\n break;\n }\n }\n\n public addReplaceOverlayEventListeners(activeOverlay: ActiveOverlay): void {\n activeOverlay.addEventListener('keydown', (event: KeyboardEvent) => {\n const { code } = event;\n /* c8 ignore next */\n if (code !== 'Tab') return;\n\n event.stopPropagation();\n this.closeOverlay(activeOverlay.overlayContent);\n activeOverlay.tabbingAway = true;\n activeOverlay.trigger.focus();\n activeOverlay.trigger.dispatchEvent(\n new KeyboardEvent('keydown', event)\n );\n });\n }\n\n public addInlineOverlayEventListeners(activeOverlay: ActiveOverlay): void {\n activeOverlay.trigger.addEventListener(\n 'keydown',\n activeOverlay.handleInlineTriggerKeydown\n );\n activeOverlay.addEventListener('keydown', (event: KeyboardEvent) => {\n const { code, shiftKey } = event;\n /* c8 ignore next */\n if (code !== 'Tab') return;\n\n activeOverlay.tabbingAway = true;\n if (shiftKey) {\n const returnFocusElement = document.createElement('span');\n returnFocusElement.tabIndex = -1;\n if (activeOverlay.trigger.hasAttribute('slot')) {\n returnFocusElement.slot = activeOverlay.trigger.slot;\n }\n activeOverlay.trigger.insertAdjacentElement(\n 'afterend',\n returnFocusElement\n );\n returnFocusElement.focus();\n returnFocusElement.remove();\n return;\n }\n\n event.stopPropagation();\n const triggerWithLifecycle =\n activeOverlay.trigger as unknown as ManagedOverlayContent;\n if (typeof triggerWithLifecycle.open !== 'undefined') {\n triggerWithLifecycle.open = false;\n }\n this.closeOverlay(activeOverlay.overlayContent);\n activeOverlay.trigger.focus();\n });\n }\n\n public closeOverlay(content: HTMLElement): void {\n this.overlayTimer.close(content);\n requestAnimationFrame(() => {\n const overlayFromContent = this.findOverlayForContent(content);\n const overlaysToClose = [overlayFromContent];\n overlaysToClose.push(\n ...findOverlaysRootedInOverlay(\n overlayFromContent,\n this.overlays\n )\n );\n overlaysToClose.forEach((overlay) =>\n this.hideAndCloseOverlay(overlay)\n );\n });\n }\n\n private handleMouseCapture = (event: MouseEvent): void => {\n const topOverlay = this.topOverlay;\n if (\n !event.target ||\n !topOverlay ||\n !topOverlay.overlayContent ||\n hasModifier(event) ||\n !isLeftClick(event)\n ) {\n this.preventMouseRootClose = true;\n return;\n }\n\n if (event.target instanceof Node) {\n const path = event.composedPath();\n if (path.indexOf(topOverlay.overlayContent) >= 0) {\n this.preventMouseRootClose = true;\n return;\n }\n this.preventMouseRootClose = false;\n }\n };\n\n private closeAllHoverOverlays(): void {\n for (const overlay of this.overlays) {\n if (overlay.interaction === 'hover') {\n this.hideAndCloseOverlay(overlay, false);\n }\n }\n }\n\n private closeOverlaysForRoot(root: HTMLElement): void {\n const overlaysToClose: ActiveOverlay[] = [];\n for (const overlay of this.overlays) {\n if (overlay.root && overlay.root === root) {\n overlaysToClose.push(overlay);\n overlaysToClose.push(\n ...findOverlaysRootedInOverlay(overlay, this.overlays)\n );\n }\n }\n overlaysToClose.forEach((overlay) =>\n this.hideAndCloseOverlay(overlay, true, true)\n );\n }\n\n private async manageFocusAfterCloseWhenOverlaysRemain(\n returnBeforeFocus?: boolean,\n previousTrigger?: HTMLElement\n ): Promise<void> {\n const topOverlay = this.overlays[this.overlays.length - 1];\n topOverlay.feature();\n // Push focus in the the next remaining overlay as needed when a `type=\"modal\"` overlay exists.\n if (topOverlay.interaction === 'modal' || topOverlay.hasModalRoot) {\n if (returnBeforeFocus) return;\n await (previousTrigger || topOverlay).focus();\n } else {\n this.stopTabTrapping();\n }\n }\n\n private manageFocusAfterCloseWhenLastOverlay(overlay: ActiveOverlay): void {\n this.stopTabTrapping();\n const isModal = overlay.interaction === 'modal';\n const isReceivesFocus = overlay.receivesFocus === 'auto';\n const isReplace = overlay.interaction === 'replace';\n const isInline = overlay.interaction === 'inline';\n const isTabbingAwayFromInlineOrReplace =\n (isReplace || isInline) && !overlay.tabbingAway;\n overlay.tabbingAway = false;\n if (!isModal && !isReceivesFocus && !isTabbingAwayFromInlineOrReplace) {\n return;\n }\n // Manage post closure focus when needed.\n const overlayRoot = overlay.overlayContent.getRootNode() as ShadowRoot;\n const overlayContentActiveElement = overlayRoot.activeElement;\n let triggerRoot: ShadowRoot;\n let triggerActiveElement: Element | null;\n const contentContainsActiveElement = (): boolean =>\n overlay.overlayContent.contains(overlayContentActiveElement);\n const triggerRootContainsActiveElement = (): boolean => {\n triggerRoot = overlay.trigger.getRootNode() as ShadowRoot;\n triggerActiveElement = triggerRoot.activeElement;\n return triggerRoot.contains(triggerActiveElement);\n };\n const triggerHostIsActiveElement = (): boolean =>\n triggerRoot.host && triggerRoot.host === triggerActiveElement;\n // Return focus to the trigger as long as the user hasn't actively focused\n // something outside of the current overlay interface; trigger, root, host.\n if (\n isModal ||\n contentContainsActiveElement() ||\n triggerRootContainsActiveElement() ||\n triggerHostIsActiveElement()\n ) {\n overlay.trigger.focus();\n }\n }\n\n private async hideAndCloseOverlay(\n overlay?: ActiveOverlay,\n animated?: boolean,\n returnBeforeFocus?: boolean\n ): Promise<void> {\n if (!overlay) {\n return;\n }\n const contentWithLifecycle =\n overlay.overlayContent as unknown as ManagedOverlayContent;\n if (\n typeof contentWithLifecycle.overlayWillCloseCallback !== 'undefined'\n ) {\n const { trigger } = overlay;\n if (contentWithLifecycle.overlayWillCloseCallback({ trigger })) {\n return;\n }\n }\n await overlay.hide(animated);\n if (typeof contentWithLifecycle.open !== 'undefined') {\n contentWithLifecycle.open = false;\n }\n if (contentWithLifecycle.overlayCloseCallback) {\n const { trigger } = overlay;\n await contentWithLifecycle.overlayCloseCallback({ trigger });\n }\n\n if (overlay.state != 'dispose') return;\n\n const index = this.overlays.indexOf(overlay);\n if (index >= 0) {\n this.overlays.splice(index, 1);\n }\n\n if (this.overlays.length) {\n await this.manageFocusAfterCloseWhenOverlaysRemain(\n returnBeforeFocus || overlay.interaction === 'hover',\n overlay.trigger\n );\n } else {\n this.manageFocusAfterCloseWhenLastOverlay(overlay);\n }\n\n overlay.remove();\n overlay.dispose();\n\n overlay.trigger.dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>('sp-closed', {\n bubbles: true,\n composed: true,\n cancelable: true,\n detail: {\n interaction: overlay.interaction,\n },\n })\n );\n }\n\n private closeTopOverlay(): Promise<void> {\n return this.hideAndCloseOverlay(this.topOverlay, true);\n }\n\n /**\n * A \"longpress\" occurs before the \"click\" that creates it has occured.\n * In that way the first click will still be part of the \"longpress\" and\n * not part of closing the overlay.\n */\n private _doesNotCloseOnFirstClick = false;\n\n private handleMouse = (event: Event): void => {\n if (this._doesNotCloseOnFirstClick) {\n this._doesNotCloseOnFirstClick = false;\n return;\n }\n if (this.preventMouseRootClose || event.defaultPrevented) {\n return;\n }\n const overlaysToClose = [];\n // Find the top most overlay that is not triggered by an\n // element on the path of the current click event.\n let index = this.overlays.length;\n while (index && overlaysToClose.length === 0) {\n index -= 1;\n const overlay = this.overlays[index];\n if (\n !event.composedPath().includes(overlay.trigger) ||\n overlay.interaction !== 'hover'\n ) {\n overlaysToClose.push(overlay);\n }\n }\n let root: HTMLElement | undefined = this.topOverlay?.root;\n let overlay = parentOverlayOf(root);\n while (root && overlay) {\n overlaysToClose.push(overlay);\n overlay = parentOverlayOf(root);\n root = overlay?.root;\n }\n if (overlay) {\n overlaysToClose.push(overlay);\n }\n overlaysToClose.forEach((overlay) => this.hideAndCloseOverlay(overlay));\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.code === 'Escape') {\n this.closeTopOverlay();\n }\n };\n\n private handleResize = (): void => {\n if (this.handlingResize) return;\n\n this.handlingResize = true;\n requestAnimationFrame(async () => {\n const promises = this.overlays.map((overlay) =>\n overlay.updateOverlayPosition()\n );\n await Promise.all(promises);\n this.handlingResize = false;\n });\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["overlay", "trigger"]
|
|
7
7
|
}
|
package/src/overlay-stack.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";import{ActiveOverlay as
|
|
1
|
+
"use strict";import{ActiveOverlay as g}from"./ActiveOverlay.js";import{OverlayTimer as m}from"./overlay-timer.js";import"../active-overlay.js";import{findOverlaysRootedInOverlay as c,parentOverlayOf as p}from"./overlay-utils.js";import{getDeepElementFromPoint as f}from"@spectrum-web-components/shared/src/get-deep-element-from-point.js";function b(s){return s.button===0}function C(s){return!!(s.metaKey||s.altKey||s.ctrlKey||s.shiftKey)}export class OverlayStack{constructor(){this.overlays=[];this.preventMouseRootClose=!1;this.root=document.body;this.handlingResize=!1;this.overlayTimer=new m;this.canTabTrap=!0;this.trappingInited=!1;this._eventsAreBound=!1;this._bodyMarginsApplied=!1;this.forwardContextmenuEvent=async e=>{var o;const t=this.overlays[this.overlays.length-1];!this.trappingInited||t.interaction!=="modal"||e.target!==this.overlayHolder||(e.stopPropagation(),e.preventDefault(),await this.closeTopOverlay(),(o=f(e.clientX,e.clientY))==null||o.dispatchEvent(new MouseEvent("contextmenu",e)))};this.handleOverlayClose=e=>{const{root:t}=e;!t||this.closeOverlaysForRoot(t)};this.handleMouseCapture=e=>{const t=this.topOverlay;if(!e.target||!t||!t.overlayContent||C(e)||!b(e)){this.preventMouseRootClose=!0;return}if(e.target instanceof Node){if(e.composedPath().indexOf(t.overlayContent)>=0){this.preventMouseRootClose=!0;return}this.preventMouseRootClose=!1}};this._doesNotCloseOnFirstClick=!1;this.handleMouse=e=>{var n;if(this._doesNotCloseOnFirstClick){this._doesNotCloseOnFirstClick=!1;return}if(this.preventMouseRootClose||e.defaultPrevented)return;const t=[];let o=this.overlays.length;for(;o&&t.length===0;){o-=1;const a=this.overlays[o];(!e.composedPath().includes(a.trigger)||a.interaction!=="hover")&&t.push(a)}let r=(n=this.topOverlay)==null?void 0:n.root,i=p(r);for(;r&&i;)t.push(i),i=p(r),r=i==null?void 0:i.root;i&&t.push(i),t.forEach(a=>this.hideAndCloseOverlay(a))};this.handleKeydown=e=>{e.code==="Escape"&&this.closeTopOverlay()};this.handleResize=()=>{this.handlingResize||(this.handlingResize=!0,requestAnimationFrame(async()=>{const e=this.overlays.map(t=>t.updateOverlayPosition());await Promise.all(e),this.handlingResize=!1}))}}initTabTrapping(){if(this.trappingInited)return;if(this.trappingInited=!0,this.document.body.shadowRoot){this.canTabTrap=!1;return}if(this.document.body.attachShadow({mode:"open"}),!this.document.body.shadowRoot)return;const e=this.document.body.shadowRoot;e.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host {
|
|
4
4
|
position: relative;
|
|
@@ -29,5 +29,5 @@
|
|
|
29
29
|
</style>
|
|
30
30
|
<div id="actual"><slot></slot></div>
|
|
31
31
|
<div id="holder"><slot name="open"></slot></div>
|
|
32
|
-
`,this.tabTrapper=e.querySelector("#actual"),this.overlayHolder=e.querySelector("#holder"),this.tabTrapper.attachShadow({mode:"open"}),this.tabTrapper.shadowRoot&&(this.tabTrapper.shadowRoot.innerHTML="<slot></slot>"),this.overlayHolder.addEventListener("contextmenu",this.forwardContextmenuEvent,!0),requestAnimationFrame(()=>{this.applyBodyMargins(),new ResizeObserver(()=>{this.applyBodyMargins()}).observe(document.body)})}applyBodyMargins(){const{marginLeft:e,marginRight:t,marginTop:o,marginBottom:r}=getComputedStyle(document.body),
|
|
32
|
+
`,this.tabTrapper=e.querySelector("#actual"),this.overlayHolder=e.querySelector("#holder"),this.tabTrapper.attachShadow({mode:"open"}),this.tabTrapper.shadowRoot&&(this.tabTrapper.shadowRoot.innerHTML="<slot></slot>"),this.overlayHolder.addEventListener("contextmenu",this.forwardContextmenuEvent,!0),requestAnimationFrame(()=>{this.applyBodyMargins(),new ResizeObserver(()=>{this.applyBodyMargins()}).observe(document.body)})}applyBodyMargins(){const{marginLeft:e,marginRight:t,marginTop:o,marginBottom:r}=getComputedStyle(document.body),i=parseFloat(e)===0&&parseFloat(t)===0&&parseFloat(o)===0&&parseFloat(r)===0;i&&!this._bodyMarginsApplied||(this.tabTrapper.style.setProperty("--swc-body-margins-inline",`calc(${e} + ${t})`),this.tabTrapper.style.setProperty("--swc-body-margins-block",`calc(${o} + ${r})`),this._bodyMarginsApplied=!i)}startTabTrapping(){this.initTabTrapping(),this.canTabTrap&&(this.tabTrapper.tabIndex=-1,this.tabTrapper.setAttribute("aria-hidden","true"))}stopTabTrapping(){!this.canTabTrap||!this.trappingInited||(this.tabTrapper.removeAttribute("tabindex"),this.tabTrapper.removeAttribute("aria-hidden"))}get document(){return this.root.ownerDocument||document}get topOverlay(){return this.overlays.slice(-1)[0]}findOverlayForContent(e){for(const t of this.overlays)if(e===t.overlayContent)return t}addEventListeners(){this._eventsAreBound||(this._eventsAreBound=!0,this.document.addEventListener("click",this.handleMouseCapture,!0),this.document.addEventListener("click",this.handleMouse),this.document.addEventListener("keydown",this.handleKeydown),this.document.addEventListener("sp-overlay-close",this.handleOverlayClose),window.addEventListener("resize",this.handleResize))}isClickOverlayActiveForTrigger(e){return this.overlays.some(t=>e===t.trigger&&t.interaction==="click")}async openOverlay(e){if(this.addEventListeners(),this.findOverlayForContent(e.content))return!1;e.notImmediatelyClosable&&(this._doesNotCloseOnFirstClick=!0),e.interaction==="modal"&&this.startTabTrapping();const t=e.content,{trigger:o}=e;if(t.overlayWillOpenCallback&&t.overlayWillOpenCallback({trigger:o}),e.delayed){const n=[this.overlayTimer.openTimer(e.content)];e.abortPromise&&n.push(e.abortPromise);const a=await Promise.race(n);if(a)return t.overlayOpenCancelledCallback&&t.overlayOpenCancelledCallback({trigger:o}),a}if(e.root&&this.closeOverlaysForRoot(e.root),e.interaction==="click")this.closeAllHoverOverlays();else if(e.interaction==="hover"&&this.isClickOverlayActiveForTrigger(e.trigger))return!0;const r=g.create(e);return this.overlays.length&&this.overlays[this.overlays.length-1].obscure(r.interaction),document.body.appendChild(r),new Promise(i=>requestAnimationFrame(i)).then(async()=>{this.overlays.push(r),await r.updateComplete,this.addOverlayEventListeners(r),typeof t.open!="undefined"&&(t.open=!0);let i=()=>{};if(t.overlayOpenCallback){const{trigger:n}=r,{overlayOpenCallback:a}=t;i=async()=>await a({trigger:n})}return await r.openCallback(i),!1})}addOverlayEventListeners(e){switch(e.addEventListener("close",()=>{this.hideAndCloseOverlay(e,!0)}),e.interaction){case"replace":this.addReplaceOverlayEventListeners(e);break;case"inline":this.addInlineOverlayEventListeners(e);break}}addReplaceOverlayEventListeners(e){e.addEventListener("keydown",t=>{const{code:o}=t;o==="Tab"&&(t.stopPropagation(),this.closeOverlay(e.overlayContent),e.tabbingAway=!0,e.trigger.focus(),e.trigger.dispatchEvent(new KeyboardEvent("keydown",t)))})}addInlineOverlayEventListeners(e){e.trigger.addEventListener("keydown",e.handleInlineTriggerKeydown),e.addEventListener("keydown",t=>{const{code:o,shiftKey:r}=t;if(o!=="Tab")return;if(e.tabbingAway=!0,r){const n=document.createElement("span");n.tabIndex=-1,e.trigger.hasAttribute("slot")&&(n.slot=e.trigger.slot),e.trigger.insertAdjacentElement("afterend",n),n.focus(),n.remove();return}t.stopPropagation();const i=e.trigger;typeof i.open!="undefined"&&(i.open=!1),this.closeOverlay(e.overlayContent),e.trigger.focus()})}closeOverlay(e){this.overlayTimer.close(e),requestAnimationFrame(()=>{const t=this.findOverlayForContent(e),o=[t];o.push(...c(t,this.overlays)),o.forEach(r=>this.hideAndCloseOverlay(r))})}closeAllHoverOverlays(){for(const e of this.overlays)e.interaction==="hover"&&this.hideAndCloseOverlay(e,!1)}closeOverlaysForRoot(e){const t=[];for(const o of this.overlays)o.root&&o.root===e&&(t.push(o),t.push(...c(o,this.overlays)));t.forEach(o=>this.hideAndCloseOverlay(o,!0,!0))}async manageFocusAfterCloseWhenOverlaysRemain(e,t){const o=this.overlays[this.overlays.length-1];if(o.feature(),o.interaction==="modal"||o.hasModalRoot){if(e)return;await(t||o).focus()}else this.stopTabTrapping()}manageFocusAfterCloseWhenLastOverlay(e){this.stopTabTrapping();const t=e.interaction==="modal",o=e.receivesFocus==="auto",r=e.interaction==="replace",i=e.interaction==="inline",n=(r||i)&&!e.tabbingAway;if(e.tabbingAway=!1,!t&&!o&&!n)return;const v=e.overlayContent.getRootNode().activeElement;let l,d;const h=()=>e.overlayContent.contains(v),u=()=>(l=e.trigger.getRootNode(),d=l.activeElement,l.contains(d)),y=()=>l.host&&l.host===d;(t||h()||u()||y())&&e.trigger.focus()}async hideAndCloseOverlay(e,t,o){if(!e)return;const r=e.overlayContent;if(typeof r.overlayWillCloseCallback!="undefined"){const{trigger:n}=e;if(r.overlayWillCloseCallback({trigger:n}))return}if(await e.hide(t),typeof r.open!="undefined"&&(r.open=!1),r.overlayCloseCallback){const{trigger:n}=e;await r.overlayCloseCallback({trigger:n})}if(e.state!="dispose")return;const i=this.overlays.indexOf(e);i>=0&&this.overlays.splice(i,1),this.overlays.length?await this.manageFocusAfterCloseWhenOverlaysRemain(o||e.interaction==="hover",e.trigger):this.manageFocusAfterCloseWhenLastOverlay(e),e.remove(),e.dispose(),e.trigger.dispatchEvent(new CustomEvent("sp-closed",{bubbles:!0,composed:!0,cancelable:!0,detail:{interaction:e.interaction}}))}closeTopOverlay(){return this.hideAndCloseOverlay(this.topOverlay,!0)}}
|
|
33
33
|
//# sourceMappingURL=overlay-stack.js.map
|