@spectrum-web-components/overlay 0.17.1-devmode2.0 → 0.18.1
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/README.md +3 -0
- package/active-overlay.dev.js +1 -0
- package/active-overlay.dev.js.map +1 -1
- package/active-overlay.js +1 -2
- package/active-overlay.js.map +2 -2
- package/overlay-trigger.dev.js +1 -0
- package/overlay-trigger.dev.js.map +1 -1
- package/overlay-trigger.js +1 -2
- package/overlay-trigger.js.map +2 -2
- package/package.json +6 -6
- package/src/ActiveOverlay.dev.js +57 -23
- package/src/ActiveOverlay.dev.js.map +2 -2
- package/src/ActiveOverlay.js +8 -437
- package/src/ActiveOverlay.js.map +2 -2
- package/src/OverlayTrigger.dev.js +51 -18
- package/src/OverlayTrigger.dev.js.map +1 -1
- package/src/OverlayTrigger.js +2 -265
- package/src/OverlayTrigger.js.map +2 -2
- package/src/VirtualTrigger.dev.js +1 -0
- package/src/VirtualTrigger.dev.js.map +1 -1
- package/src/VirtualTrigger.js +1 -29
- package/src/VirtualTrigger.js.map +2 -2
- package/src/active-overlay.css.dev.js +1 -0
- package/src/active-overlay.css.dev.js.map +1 -1
- package/src/active-overlay.css.js +2 -4
- package/src/active-overlay.css.js.map +2 -2
- package/src/index.dev.js +1 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js +1 -6
- package/src/index.js.map +1 -1
- package/src/loader.dev.js +1 -0
- package/src/loader.dev.js.map +1 -1
- package/src/loader.js +1 -4
- package/src/loader.js.map +2 -2
- package/src/overlay-events.dev.js +1 -0
- package/src/overlay-events.dev.js.map +1 -1
- package/src/overlay-events.js +1 -6
- package/src/overlay-events.js.map +2 -2
- package/src/overlay-stack.dev.js +95 -44
- package/src/overlay-stack.dev.js.map +3 -3
- package/src/overlay-stack.js +2 -405
- package/src/overlay-stack.js.map +3 -3
- package/src/overlay-timer.dev.js +1 -0
- package/src/overlay-timer.dev.js.map +1 -1
- package/src/overlay-timer.js +1 -70
- package/src/overlay-timer.js.map +2 -2
- package/src/overlay-trigger.css.dev.js +1 -0
- package/src/overlay-trigger.css.dev.js.map +1 -1
- package/src/overlay-trigger.css.js +2 -4
- package/src/overlay-trigger.css.js.map +2 -2
- package/src/overlay-types.dev.js +1 -0
- package/src/overlay-types.js +1 -0
- package/src/overlay-utils.dev.js +4 -1
- package/src/overlay-utils.dev.js.map +1 -1
- package/src/overlay-utils.js +1 -27
- package/src/overlay-utils.js.map +2 -2
- package/src/overlay.dev.js +1 -0
- package/src/overlay.dev.js.map +1 -1
- package/src/overlay.js +1 -84
- package/src/overlay.js.map +2 -2
- package/stories/overlay-story-components.js +17 -5
- package/stories/overlay-story-components.js.map +2 -2
- package/stories/overlay.stories.js +24 -8
- package/stories/overlay.stories.js.map +1 -1
- package/sync/overlay-trigger.dev.js +1 -0
- package/sync/overlay-trigger.dev.js.map +1 -1
- package/sync/overlay-trigger.js +1 -6
- package/sync/overlay-trigger.js.map +2 -2
- package/test/benchmark/basic-test.js +5 -2
- package/test/benchmark/basic-test.js.map +1 -1
- package/test/overlay-lifecycle.test.js +51 -14
- package/test/overlay-lifecycle.test.js.map +1 -1
- package/test/overlay-timer.test.js +1 -0
- package/test/overlay-timer.test.js.map +2 -2
- package/test/overlay-trigger-click.test.js +20 -5
- package/test/overlay-trigger-click.test.js.map +1 -1
- package/test/overlay-trigger-extended.test.js +19 -6
- package/test/overlay-trigger-extended.test.js.map +1 -1
- package/test/overlay-trigger-hover-click.test.js +7 -2
- package/test/overlay-trigger-hover-click.test.js.map +1 -1
- package/test/overlay-trigger-hover.test.js +110 -19
- package/test/overlay-trigger-hover.test.js.map +2 -2
- package/test/overlay-trigger-longpress.test.js +85 -29
- package/test/overlay-trigger-longpress.test.js.map +2 -2
- package/test/overlay-trigger-sync.test.js +183 -56
- package/test/overlay-trigger-sync.test.js.map +2 -2
- package/test/overlay-trigger.test.js +183 -56
- package/test/overlay-trigger.test.js.map +2 -2
- package/test/overlay.test-vrt.js +1 -0
- package/test/overlay.test-vrt.js.map +1 -1
- package/test/overlay.test.js +162 -74
- package/test/overlay.test.js.map +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay-trigger.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { isVisible } from '../../../test/testing-helpers.js';\nimport {\n aTimeout,\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\n\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n ActiveOverlay,\n OverlayTrigger,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Popover } from '@spectrum-web-components/popover';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport { Theme } from '@spectrum-web-components/theme';\n\nfunction pressKey(code: string): void {\n const up = new KeyboardEvent('keyup', {\n bubbles: true,\n cancelable: true,\n key: code,\n code,\n });\n document.dispatchEvent(up);\n}\n\nconst pressEscape = (): void => pressKey('Escape');\nconst pressSpace = (): void => pressKey('Space');\n\ndescribe('Overlay Trigger', () => {\n describe('open/close', () => {\n let testDiv!: HTMLDivElement;\n let innerTrigger!: OverlayTrigger;\n let outerTrigger!: OverlayTrigger;\n let innerButton!: Button;\n let outerButton!: Button;\n let innerClickContent!: Popover;\n let outerClickContent!: Popover;\n let hoverContent!: HTMLDivElement;\n\n beforeEach(async () => {\n testDiv = await fixture<HTMLDivElement>(\n html`\n <div>\n <style>\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n </style>\n <overlay-trigger id=\"trigger\" placement=\"top\">\n <sp-button\n id=\"outer-button\"\n variant=\"primary\"\n slot=\"trigger\"\n >\n Show Popover\n </sp-button>\n <sp-popover\n id=\"outer-popover\"\n dialog\n slot=\"click-content\"\n direction=\"bottom\"\n tip\n open\n tabindex=\"0\"\n >\n <div class=\"options-popover-content\">\n <overlay-trigger\n id=\"inner-trigger\"\n placement=\"bottom\"\n >\n <sp-button\n id=\"inner-button\"\n slot=\"trigger\"\n >\n Press Me\n </sp-button>\n <sp-popover\n id=\"inner-popover\"\n dialog\n slot=\"click-content\"\n direction=\"bottom\"\n tip\n open\n tabindex=\"0\"\n >\n <div\n class=\"options-popover-content\"\n >\n Another Popover\n </div>\n </sp-popover>\n </overlay-trigger>\n </div>\n </sp-popover>\n <div\n id=\"hover-content\"\n slot=\"hover-content\"\n class=\"tooltip\"\n delay=\"100\"\n >\n Tooltip\n </div>\n </overlay-trigger>\n </div>\n `\n );\n\n innerTrigger = testDiv.querySelector(\n '#inner-trigger'\n ) as OverlayTrigger;\n outerTrigger = testDiv.querySelector('#trigger') as OverlayTrigger;\n innerButton = testDiv.querySelector('#inner-button') as Button;\n outerButton = testDiv.querySelector('#outer-button') as Button;\n innerClickContent = testDiv.querySelector(\n '#inner-popover'\n ) as Popover;\n outerClickContent = testDiv.querySelector(\n '#outer-popover'\n ) as Popover;\n hoverContent = testDiv.querySelector(\n '#hover-content'\n ) as HTMLDivElement;\n });\n\n afterEach(async () => {\n if (outerTrigger.open) {\n const closed = oneEvent(outerTrigger, 'sp-closed');\n outerTrigger.open = undefined;\n await closed;\n }\n outerTrigger.removeAttribute('type');\n if (innerTrigger.open) {\n const closed = oneEvent(innerTrigger, 'sp-closed');\n innerTrigger.open = undefined;\n await closed;\n }\n innerTrigger.removeAttribute('type');\n });\n\n it('loads', async () => {\n if (!(outerClickContent instanceof Popover))\n throw new Error('popover is not an instance of Popover');\n\n expect(outerClickContent).to.exist;\n expect(outerClickContent.shadowRoot).to.exist;\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n });\n\n it('opens a popover', async () => {\n expect(isVisible(outerClickContent)).to.be.false;\n\n expect(outerButton).to.exist;\n const open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n });\n\n it('[disabled] closes a popover', async () => {\n expect(isVisible(outerClickContent)).to.be.false;\n expect(outerTrigger.disabled).to.be.false;\n\n expect(outerButton).to.exist;\n\n const opened = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n await opened;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n\n const closed = oneEvent(outerButton, 'sp-closed');\n outerTrigger.disabled = true;\n await closed;\n\n expect(isVisible(outerClickContent)).to.be.false;\n expect(outerTrigger.disabled).to.be.true;\n });\n\n it('resizes a popover', async () => {\n expect(isVisible(outerClickContent)).to.be.false;\n\n expect(outerButton).to.exist;\n const open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n\n window.dispatchEvent(new Event('resize'));\n window.dispatchEvent(new Event('resize'));\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n });\n\n ['modal', 'replace', 'inline'].map((type: string) => {\n it(`opens a popover - [type=\"${type}\"]`, async () => {\n outerTrigger.type = type as Extract<\n TriggerInteractions,\n 'inline' | 'modal' | 'replace'\n >;\n await elementUpdated(outerTrigger);\n\n expect(isVisible(outerClickContent)).to.be.false;\n\n expect(outerButton).to.exist;\n const opened = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await opened;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n });\n });\n\n it('does not open a hover popover when a click popover is open', async () => {\n expect(isVisible(outerClickContent), 'outer popover not visible').to\n .be.false;\n expect(isVisible(hoverContent), 'hover popover not visible').to.be\n .false;\n\n expect(outerButton).to.exist;\n const open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent), 'outer popover visible').to.be\n .true;\n expect(isVisible(hoverContent), 'hover popover still not visible')\n .to.be.false;\n\n outerButton.dispatchEvent(\n new Event('mouseenter', {\n bubbles: true,\n composed: true,\n })\n );\n\n await nextFrame();\n expect(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);\n\n expect(isVisible(outerClickContent), 'outer popover visible again')\n .to.be.true;\n expect(isVisible(hoverContent), 'hover popover not visible again')\n .to.be.false;\n });\n\n it('does not open a popover when [disabled]', async () => {\n const root = outerTrigger.shadowRoot\n ? outerTrigger.shadowRoot\n : outerTrigger;\n const triggerZone = root.querySelector(\n '#trigger'\n ) as HTMLDivElement;\n\n expect(outerTrigger.disabled).to.be.false;\n let open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n let closed = oneEvent(outerTrigger, 'sp-closed');\n document.body.click();\n await closed;\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n\n outerTrigger.disabled = true;\n await elementUpdated(outerTrigger);\n\n expect(outerTrigger.disabled).to.be.true;\n expect(outerTrigger.hasAttribute('disabled')).to.be.true;\n // The overlay shouldn't open here.\n outerButton.click();\n await aTimeout(200);\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n // The overlay shouldn't open here, either.\n triggerZone.dispatchEvent(new Event('mouseenter'));\n await aTimeout(200);\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n\n outerTrigger.disabled = false;\n await elementUpdated(outerTrigger);\n\n expect(outerTrigger.disabled).to.be.false;\n expect(outerTrigger.hasAttribute('disabled')).to.be.false;\n open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n closed = oneEvent(outerTrigger, 'sp-closed');\n outerButton.click();\n await closed;\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n });\n\n it('opens a nested popover', async () => {\n expect(isVisible(outerClickContent)).to.be.false;\n expect(isVisible(innerClickContent)).to.be.false;\n\n expect(outerButton).to.exist;\n let open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.false;\n\n open = oneEvent(innerTrigger, 'sp-opened');\n innerButton.click();\n await open;\n expect(innerClickContent.parentElement).to.not.be.instanceOf(\n OverlayTrigger\n );\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n });\n\n it('focus previous \"modal\" when closing nested \"modal\"', async () => {\n outerTrigger.type = 'modal';\n innerTrigger.type = 'modal';\n\n expect(isVisible(outerClickContent), 'outer popover starts closed')\n .to.be.false;\n expect(isVisible(innerClickContent), 'inner popover starts closed')\n .to.be.false;\n\n expect(outerButton).to.exist;\n const outerOpen = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n await outerOpen;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent), 'outer popover opens').to.be\n .true;\n expect(isVisible(innerClickContent), 'inner popover stays closed')\n .to.be.false;\n\n const innerOpen = oneEvent(innerButton, 'sp-opened');\n innerButton.click();\n await innerOpen;\n expect(innerClickContent.parentElement).to.not.be.instanceOf(\n OverlayTrigger\n );\n\n expect(isVisible(outerClickContent), 'outer popover stays open').to\n .be.true;\n expect(isVisible(innerClickContent), 'inner popover opens').to.be\n .true;\n\n const innerClose = oneEvent(innerButton, 'sp-closed');\n pressEscape();\n await innerClose;\n expect(innerClickContent.parentElement).to.be.instanceOf(\n OverlayTrigger\n );\n\n expect(\n document.activeElement === outerClickContent,\n 'outer popover recieved focus'\n ).to.be.true;\n });\n\n it('escape closes an open popover', async () => {\n outerTrigger.type = 'modal';\n innerTrigger.type = 'modal';\n const outerOpen = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n await outerOpen;\n\n expect(\n outerClickContent.parentElement instanceof OverlayTrigger,\n 'outer content stolen and reparented'\n ).to.be.false;\n\n const innerOpen = oneEvent(innerButton, 'sp-opened');\n innerButton.click();\n await innerOpen;\n\n expect(\n innerClickContent.parentElement instanceof OverlayTrigger,\n 'inner content stolen and reparented'\n ).to.be.false;\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n\n pressSpace();\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n\n const innerClose = oneEvent(innerButton, 'sp-closed');\n pressEscape();\n await innerClose;\n\n expect(\n innerClickContent.parentElement instanceof OverlayTrigger,\n 'inner content returned'\n ).to.be.true;\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.false;\n\n const outerClose = oneEvent(outerButton, 'sp-closed');\n pressEscape();\n await outerClose;\n\n expect(\n outerClickContent.parentElement instanceof OverlayTrigger,\n 'outer content returned'\n ).to.be.true;\n expect(isVisible(outerClickContent)).to.be.false;\n expect(isVisible(innerClickContent)).to.be.false;\n });\n\n it('click closes an open popover', async () => {\n outerTrigger.type = 'modal';\n innerTrigger.type = 'modal';\n const outerOpen = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n await outerOpen;\n\n expect(\n outerClickContent.parentElement instanceof OverlayTrigger,\n 'outer content stolen and reparented'\n ).to.be.false;\n\n const innerOpen = oneEvent(innerButton, 'sp-opened');\n innerButton.click();\n await innerOpen;\n\n expect(\n innerClickContent.parentElement instanceof OverlayTrigger,\n 'inner content stolen and reparented'\n ).to.be.false;\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n\n // Test that clicking in the overlay content does not close the overlay\n // 200ms is slightly more than the overlay animation fade out time (130ms)\n innerClickContent.click();\n await aTimeout(200);\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n\n const innerClose = oneEvent(innerButton, 'sp-closed');\n document.body.click();\n await innerClose;\n\n expect(\n innerClickContent.parentElement instanceof OverlayTrigger,\n 'inner content returned'\n ).to.be.true;\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.false;\n\n const outerClose = oneEvent(outerButton, 'sp-closed');\n document.body.click();\n await outerClose;\n\n expect(\n outerClickContent.parentElement instanceof OverlayTrigger,\n 'outer content returned'\n ).to.be.true;\n expect(isVisible(outerClickContent)).to.be.false;\n expect(isVisible(innerClickContent)).to.be.false;\n });\n\n it('opens a hover popover', async () => {\n const root = outerTrigger.shadowRoot\n ? outerTrigger.shadowRoot\n : outerTrigger;\n const triggerZone = root.querySelector(\n '#trigger'\n ) as HTMLDivElement;\n\n expect(triggerZone).to.exist;\n if (!triggerZone) return;\n\n expect(outerButton).to.exist;\n expect(hoverContent).to.exist;\n\n expect(isVisible(hoverContent)).to.be.false;\n\n const open = oneEvent(outerTrigger, 'sp-opened');\n const mouseEnter = new MouseEvent('mouseenter');\n triggerZone.dispatchEvent(mouseEnter);\n await open;\n expect(hoverContent.parentElement).to.not.be.instanceOf(\n OverlayTrigger\n );\n\n expect(isVisible(hoverContent)).to.be.true;\n\n const close = oneEvent(outerTrigger, 'sp-closed');\n const mouseLeave = new MouseEvent('mouseleave');\n triggerZone.dispatchEvent(mouseLeave);\n await close;\n expect(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);\n\n expect(isVisible(hoverContent)).to.be.false;\n });\n\n it('closes a hover popover', async () => {\n const root = outerTrigger.shadowRoot\n ? outerTrigger.shadowRoot\n : outerTrigger;\n const triggerZone = root.querySelector(\n '#trigger'\n ) as HTMLDivElement;\n\n expect(triggerZone).to.exist;\n if (!triggerZone) return;\n\n expect(outerButton).to.exist;\n expect(hoverContent).to.exist;\n\n expect(\n isVisible(hoverContent),\n 'hoverContent should not be visible'\n ).to.be.false;\n\n const mouseEnter = new MouseEvent('mouseenter');\n const mouseLeave = new MouseEvent('mouseleave');\n triggerZone.dispatchEvent(mouseEnter);\n await nextFrame();\n triggerZone.dispatchEvent(mouseLeave);\n\n await waitUntil(\n () => isVisible(hoverContent) === false,\n 'hoverContent should still not be visible'\n );\n });\n\n it('dispatches events on open/close', async () => {\n const opened = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n const openedEvent = await opened;\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(outerTrigger.open).to.equal('click');\n\n expect(openedEvent.detail.interaction).to.equal('click');\n\n const closed = oneEvent(outerButton, 'sp-closed');\n document.body.click();\n const closedEvent = await closed;\n expect(outerClickContent.parentElement).to.be.instanceOf(\n OverlayTrigger\n );\n expect(closedEvent.detail.interaction).to.equal('click');\n\n expect(isVisible(outerClickContent)).to.be.false;\n });\n });\n describe('System interactions', () => {\n afterEach(async () => {\n const triggers = document.querySelectorAll('overlay-trigger');\n const closes: Promise<CustomEvent<unknown>>[] = [];\n triggers.forEach((trigger) => {\n if (trigger.open) {\n const close = oneEvent(trigger, 'sp-closed');\n trigger.open = undefined;\n closes.push(close);\n }\n });\n await Promise.all(closes);\n });\n it('acquires a `color` and `size` from `sp-theme`', async () => {\n const el = await fixture<Theme>(html`\n <sp-theme color=\"dark\">\n <sp-theme color=\"light\">\n <overlay-trigger id=\"trigger\" placement=\"top\">\n <sp-button\n id=\"outer-button\"\n variant=\"primary\"\n slot=\"trigger\"\n >\n Show Popover\n </sp-button>\n <sp-popover\n id=\"outer-popover\"\n dialog\n slot=\"click-content\"\n direction=\"bottom\"\n tip\n open\n >\n Popover content!\n </sp-popover>\n </overlay-trigger>\n </sp-theme>\n </sp-theme>\n `);\n\n await elementUpdated(el);\n\n expect(document.querySelector('active-overlay')).to.be.null;\n\n const button = el.querySelector('sp-button') as Button;\n const opened = oneEvent(button, 'sp-opened');\n button.click();\n await opened;\n\n await elementUpdated(el);\n\n const overlay = document.querySelector(\n 'active-overlay'\n ) as ActiveOverlay;\n\n expect(overlay).to.exist;\n expect(overlay.theme.color).to.not.equal('dark');\n expect(overlay.theme.color).to.equal('light');\n });\n it('manages multiple layers of `type=\"modal\"', async () => {\n const el = await fixture(html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\" variant=\"accent\">\n Toggle Dialog\n </sp-button>\n <sp-popover dialog slot=\"click-content\">\n <overlay-trigger>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n <sp-popover dialog slot=\"click-content\">\n <overlay-trigger type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"secondary\"\n >\n Toggle Dialog\n </sp-button>\n <sp-popover dialog slot=\"click-content\">\n <p>\n When you get this deep, this\n ActiveOverlay should be the only one\n in [slot=\"open\"].\n </p>\n <p>\n All of the rest of the ActiveOverlay\n elements should have had their\n [slot] attribute removed.\n </p>\n <p>\n Closing this ActiveOverlay should\n replace them...\n </p>\n </sp-popover>\n </overlay-trigger>\n </sp-popover>\n </overlay-trigger>\n </sp-popover>\n </overlay-trigger>\n `);\n const overlayTriggers = [...el.querySelectorAll('overlay-trigger')];\n let activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n const triggers = [\n ...el.querySelectorAll('sp-button[slot=\"trigger\"]'),\n ] as Button[];\n\n expect(activeOverlays.length, 'no previous overlays').to.equal(0);\n\n let open = oneEvent(triggers[0], 'sp-opened');\n triggers[0]?.click();\n await open;\n await elementUpdated(overlayTriggers[0]);\n activeOverlays = [...document.querySelectorAll('active-overlay')];\n expect(\n activeOverlays.length,\n 'The first `active-overlay` element has been added.'\n ).to.equal(1);\n expect(\n activeOverlays[0].slot,\n 'first overlay, first time'\n ).to.equal('open');\n\n open = oneEvent(triggers[1], 'sp-opened');\n triggers[1]?.click();\n await open;\n await elementUpdated(overlayTriggers[1]);\n activeOverlays = [...document.querySelectorAll('active-overlay')];\n expect(\n activeOverlays.length,\n 'The second `active-overlay` element has been added.'\n ).to.equal(2);\n\n expect(\n activeOverlays[0].slot,\n 'first overlay, second time'\n ).to.equal('open');\n expect(\n activeOverlays[1].slot,\n 'second overlay, second time'\n ).to.equal('open');\n\n open = oneEvent(triggers[2], 'sp-opened');\n triggers[2]?.click();\n await open;\n await elementUpdated(overlayTriggers[2]);\n activeOverlays = [...document.querySelectorAll('active-overlay')];\n expect(\n activeOverlays.length,\n 'The third `active-overlay` element has been added.'\n ).to.equal(3);\n\n expect(\n activeOverlays[0].hasAttribute('slot'),\n 'first overlay, third time'\n ).to.be.false;\n expect(\n activeOverlays[1].hasAttribute('slot'),\n 'second overlay, third time'\n ).to.be.false;\n expect(\n activeOverlays[2].slot,\n 'third overlay, third time'\n ).to.equal('open');\n\n await nextFrame();\n const closed = oneEvent(triggers[2], 'sp-closed');\n document.body.click();\n await closed;\n await elementUpdated(overlayTriggers[2]);\n activeOverlays = [...document.querySelectorAll('active-overlay')];\n expect(\n activeOverlays.length,\n 'The third `active-overlay` element has been removed.'\n ).to.equal(2);\n\n await waitUntil(() => {\n return activeOverlays[0].slot === 'open';\n }, 'first overlay, last time');\n expect(\n activeOverlays[1].slot,\n 'second overlay, last time'\n ).to.equal('open');\n });\n });\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { isVisible } from '../../../test/testing-helpers.js';\nimport {\n aTimeout,\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\n\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport {\n ActiveOverlay,\n OverlayTrigger,\n TriggerInteractions,\n} from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/button/sp-button.js';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Popover } from '@spectrum-web-components/popover';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport { Theme } from '@spectrum-web-components/theme';\n\nfunction pressKey(code: string): void {\n const up = new KeyboardEvent('keyup', {\n bubbles: true,\n cancelable: true,\n key: code,\n code,\n });\n document.dispatchEvent(up);\n}\n\nconst pressEscape = (): void => pressKey('Escape');\nconst pressSpace = (): void => pressKey('Space');\n\ndescribe('Overlay Trigger', () => {\n describe('open/close', () => {\n let testDiv!: HTMLDivElement;\n let innerTrigger!: OverlayTrigger;\n let outerTrigger!: OverlayTrigger;\n let innerButton!: Button;\n let outerButton!: Button;\n let innerClickContent!: Popover;\n let outerClickContent!: Popover;\n let hoverContent!: HTMLDivElement;\n\n beforeEach(async () => {\n testDiv = await fixture<HTMLDivElement>(\n html`\n <div>\n <style>\n body {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n </style>\n <overlay-trigger id=\"trigger\" placement=\"top\">\n <sp-button\n id=\"outer-button\"\n variant=\"primary\"\n slot=\"trigger\"\n >\n Show Popover\n </sp-button>\n <sp-popover\n id=\"outer-popover\"\n dialog\n slot=\"click-content\"\n direction=\"bottom\"\n tip\n open\n tabindex=\"0\"\n >\n <div class=\"options-popover-content\">\n <overlay-trigger\n id=\"inner-trigger\"\n placement=\"bottom\"\n >\n <sp-button\n id=\"inner-button\"\n slot=\"trigger\"\n >\n Press Me\n </sp-button>\n <sp-popover\n id=\"inner-popover\"\n dialog\n slot=\"click-content\"\n direction=\"bottom\"\n tip\n open\n tabindex=\"0\"\n >\n <div\n class=\"options-popover-content\"\n >\n Another Popover\n </div>\n </sp-popover>\n </overlay-trigger>\n </div>\n </sp-popover>\n <div\n id=\"hover-content\"\n slot=\"hover-content\"\n class=\"tooltip\"\n delay=\"100\"\n >\n Tooltip\n </div>\n </overlay-trigger>\n </div>\n `\n );\n\n innerTrigger = testDiv.querySelector(\n '#inner-trigger'\n ) as OverlayTrigger;\n outerTrigger = testDiv.querySelector('#trigger') as OverlayTrigger;\n innerButton = testDiv.querySelector('#inner-button') as Button;\n outerButton = testDiv.querySelector('#outer-button') as Button;\n innerClickContent = testDiv.querySelector(\n '#inner-popover'\n ) as Popover;\n outerClickContent = testDiv.querySelector(\n '#outer-popover'\n ) as Popover;\n hoverContent = testDiv.querySelector(\n '#hover-content'\n ) as HTMLDivElement;\n });\n\n afterEach(async () => {\n if (outerTrigger.open) {\n const closed = oneEvent(outerTrigger, 'sp-closed');\n outerTrigger.open = undefined;\n await closed;\n }\n outerTrigger.removeAttribute('type');\n if (innerTrigger.open) {\n const closed = oneEvent(innerTrigger, 'sp-closed');\n innerTrigger.open = undefined;\n await closed;\n }\n innerTrigger.removeAttribute('type');\n });\n\n it('loads', async () => {\n if (!(outerClickContent instanceof Popover))\n throw new Error('popover is not an instance of Popover');\n\n expect(outerClickContent).to.exist;\n expect(outerClickContent.shadowRoot).to.exist;\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n });\n\n it('opens a popover', async () => {\n expect(isVisible(outerClickContent)).to.be.false;\n\n expect(outerButton).to.exist;\n const open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n });\n\n it('[disabled] closes a popover', async () => {\n expect(isVisible(outerClickContent)).to.be.false;\n expect(outerTrigger.disabled).to.be.false;\n\n expect(outerButton).to.exist;\n\n const opened = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n await opened;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n\n const closed = oneEvent(outerButton, 'sp-closed');\n outerTrigger.disabled = true;\n await closed;\n\n expect(isVisible(outerClickContent)).to.be.false;\n expect(outerTrigger.disabled).to.be.true;\n });\n\n it('resizes a popover', async () => {\n expect(isVisible(outerClickContent)).to.be.false;\n\n expect(outerButton).to.exist;\n const open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n\n window.dispatchEvent(new Event('resize'));\n window.dispatchEvent(new Event('resize'));\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n });\n\n ['modal', 'replace', 'inline'].map((type: string) => {\n it(`opens a popover - [type=\"${type}\"]`, async () => {\n outerTrigger.type = type as Extract<\n TriggerInteractions,\n 'inline' | 'modal' | 'replace'\n >;\n await elementUpdated(outerTrigger);\n\n expect(isVisible(outerClickContent)).to.be.false;\n\n expect(outerButton).to.exist;\n const opened = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await opened;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n });\n });\n\n it('does not open a hover popover when a click popover is open', async () => {\n expect(isVisible(outerClickContent), 'outer popover not visible').to\n .be.false;\n expect(isVisible(hoverContent), 'hover popover not visible').to.be\n .false;\n\n expect(outerButton).to.exist;\n const open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent), 'outer popover visible').to.be\n .true;\n expect(isVisible(hoverContent), 'hover popover still not visible')\n .to.be.false;\n\n outerButton.dispatchEvent(\n new Event('mouseenter', {\n bubbles: true,\n composed: true,\n })\n );\n\n await nextFrame();\n expect(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);\n\n expect(isVisible(outerClickContent), 'outer popover visible again')\n .to.be.true;\n expect(isVisible(hoverContent), 'hover popover not visible again')\n .to.be.false;\n });\n\n it('does not open a popover when [disabled]', async () => {\n const root = outerTrigger.shadowRoot\n ? outerTrigger.shadowRoot\n : outerTrigger;\n const triggerZone = root.querySelector(\n '#trigger'\n ) as HTMLDivElement;\n\n expect(outerTrigger.disabled).to.be.false;\n let open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n let closed = oneEvent(outerTrigger, 'sp-closed');\n document.body.click();\n await closed;\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n\n outerTrigger.disabled = true;\n await elementUpdated(outerTrigger);\n\n expect(outerTrigger.disabled).to.be.true;\n expect(outerTrigger.hasAttribute('disabled')).to.be.true;\n // The overlay shouldn't open here.\n outerButton.click();\n await aTimeout(200);\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n // The overlay shouldn't open here, either.\n triggerZone.dispatchEvent(new Event('mouseenter'));\n await aTimeout(200);\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n\n outerTrigger.disabled = false;\n await elementUpdated(outerTrigger);\n\n expect(outerTrigger.disabled).to.be.false;\n expect(outerTrigger.hasAttribute('disabled')).to.be.false;\n open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n closed = oneEvent(outerTrigger, 'sp-closed');\n outerButton.click();\n await closed;\n expect(outerClickContent.parentElement).to.be.an.instanceOf(\n OverlayTrigger\n );\n });\n\n it('opens a nested popover', async () => {\n expect(isVisible(outerClickContent)).to.be.false;\n expect(isVisible(innerClickContent)).to.be.false;\n\n expect(outerButton).to.exist;\n let open = oneEvent(outerTrigger, 'sp-opened');\n outerButton.click();\n await open;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.false;\n\n open = oneEvent(innerTrigger, 'sp-opened');\n innerButton.click();\n await open;\n expect(innerClickContent.parentElement).to.not.be.instanceOf(\n OverlayTrigger\n );\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n });\n\n it('focus previous \"modal\" when closing nested \"modal\"', async () => {\n outerTrigger.type = 'modal';\n innerTrigger.type = 'modal';\n\n expect(isVisible(outerClickContent), 'outer popover starts closed')\n .to.be.false;\n expect(isVisible(innerClickContent), 'inner popover starts closed')\n .to.be.false;\n\n expect(outerButton).to.exist;\n const outerOpen = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n await outerOpen;\n\n expect(outerClickContent.parentElement).to.not.be.an.instanceOf(\n OverlayTrigger\n );\n expect(isVisible(outerClickContent), 'outer popover opens').to.be\n .true;\n expect(isVisible(innerClickContent), 'inner popover stays closed')\n .to.be.false;\n\n const innerOpen = oneEvent(innerButton, 'sp-opened');\n innerButton.click();\n await innerOpen;\n expect(innerClickContent.parentElement).to.not.be.instanceOf(\n OverlayTrigger\n );\n\n expect(isVisible(outerClickContent), 'outer popover stays open').to\n .be.true;\n expect(isVisible(innerClickContent), 'inner popover opens').to.be\n .true;\n\n const innerClose = oneEvent(innerButton, 'sp-closed');\n pressEscape();\n await innerClose;\n expect(innerClickContent.parentElement).to.be.instanceOf(\n OverlayTrigger\n );\n\n expect(\n document.activeElement === innerButton,\n 'outer popover recieved focus'\n ).to.be.true;\n });\n\n it('escape closes an open popover', async () => {\n outerTrigger.type = 'modal';\n innerTrigger.type = 'modal';\n const outerOpen = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n await outerOpen;\n\n expect(\n outerClickContent.parentElement instanceof OverlayTrigger,\n 'outer content stolen and reparented'\n ).to.be.false;\n\n const innerOpen = oneEvent(innerButton, 'sp-opened');\n innerButton.click();\n await innerOpen;\n\n expect(\n innerClickContent.parentElement instanceof OverlayTrigger,\n 'inner content stolen and reparented'\n ).to.be.false;\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n\n pressSpace();\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n\n const innerClose = oneEvent(innerButton, 'sp-closed');\n pressEscape();\n await innerClose;\n\n expect(\n innerClickContent.parentElement instanceof OverlayTrigger,\n 'inner content returned'\n ).to.be.true;\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.false;\n\n const outerClose = oneEvent(outerButton, 'sp-closed');\n pressEscape();\n await outerClose;\n\n expect(\n outerClickContent.parentElement instanceof OverlayTrigger,\n 'outer content returned'\n ).to.be.true;\n expect(isVisible(outerClickContent)).to.be.false;\n expect(isVisible(innerClickContent)).to.be.false;\n });\n\n it('click closes an open popover', async () => {\n outerTrigger.type = 'modal';\n innerTrigger.type = 'modal';\n const outerOpen = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n await outerOpen;\n\n expect(\n outerClickContent.parentElement instanceof OverlayTrigger,\n 'outer content stolen and reparented'\n ).to.be.false;\n\n const innerOpen = oneEvent(innerButton, 'sp-opened');\n innerButton.click();\n await innerOpen;\n\n expect(\n innerClickContent.parentElement instanceof OverlayTrigger,\n 'inner content stolen and reparented'\n ).to.be.false;\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n\n // Test that clicking in the overlay content does not close the overlay\n // 200ms is slightly more than the overlay animation fade out time (130ms)\n innerClickContent.click();\n await aTimeout(200);\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.true;\n\n const innerClose = oneEvent(innerButton, 'sp-closed');\n document.body.click();\n await innerClose;\n\n expect(\n innerClickContent.parentElement instanceof OverlayTrigger,\n 'inner content returned'\n ).to.be.true;\n expect(isVisible(outerClickContent)).to.be.true;\n expect(isVisible(innerClickContent)).to.be.false;\n\n const outerClose = oneEvent(outerButton, 'sp-closed');\n document.body.click();\n await outerClose;\n\n expect(\n outerClickContent.parentElement instanceof OverlayTrigger,\n 'outer content returned'\n ).to.be.true;\n expect(isVisible(outerClickContent)).to.be.false;\n expect(isVisible(innerClickContent)).to.be.false;\n });\n\n it('opens a hover popover', async () => {\n const root = outerTrigger.shadowRoot\n ? outerTrigger.shadowRoot\n : outerTrigger;\n const triggerZone = root.querySelector(\n '#trigger'\n ) as HTMLDivElement;\n\n expect(triggerZone).to.exist;\n if (!triggerZone) return;\n\n expect(outerButton).to.exist;\n expect(hoverContent).to.exist;\n\n expect(isVisible(hoverContent)).to.be.false;\n\n const open = oneEvent(outerTrigger, 'sp-opened');\n const mouseEnter = new MouseEvent('mouseenter');\n triggerZone.dispatchEvent(mouseEnter);\n await open;\n expect(hoverContent.parentElement).to.not.be.instanceOf(\n OverlayTrigger\n );\n\n expect(isVisible(hoverContent)).to.be.true;\n\n const close = oneEvent(outerTrigger, 'sp-closed');\n const mouseLeave = new MouseEvent('mouseleave');\n triggerZone.dispatchEvent(mouseLeave);\n await close;\n expect(hoverContent.parentElement).to.be.instanceOf(OverlayTrigger);\n\n expect(isVisible(hoverContent)).to.be.false;\n });\n\n it('closes a hover popover', async () => {\n const root = outerTrigger.shadowRoot\n ? outerTrigger.shadowRoot\n : outerTrigger;\n const triggerZone = root.querySelector(\n '#trigger'\n ) as HTMLDivElement;\n\n expect(triggerZone).to.exist;\n if (!triggerZone) return;\n\n expect(outerButton).to.exist;\n expect(hoverContent).to.exist;\n\n expect(\n isVisible(hoverContent),\n 'hoverContent should not be visible'\n ).to.be.false;\n\n const mouseEnter = new MouseEvent('mouseenter');\n const mouseLeave = new MouseEvent('mouseleave');\n triggerZone.dispatchEvent(mouseEnter);\n await nextFrame();\n triggerZone.dispatchEvent(mouseLeave);\n\n await waitUntil(\n () => isVisible(hoverContent) === false,\n 'hoverContent should still not be visible'\n );\n });\n\n it('dispatches events on open/close', async () => {\n const opened = oneEvent(outerButton, 'sp-opened');\n outerButton.click();\n const openedEvent = await opened;\n\n expect(isVisible(outerClickContent)).to.be.true;\n expect(outerTrigger.open).to.equal('click');\n\n expect(openedEvent.detail.interaction).to.equal('click');\n\n const closed = oneEvent(outerButton, 'sp-closed');\n document.body.click();\n const closedEvent = await closed;\n expect(outerClickContent.parentElement).to.be.instanceOf(\n OverlayTrigger\n );\n expect(closedEvent.detail.interaction).to.equal('click');\n\n expect(isVisible(outerClickContent)).to.be.false;\n });\n });\n describe('System interactions', () => {\n afterEach(async () => {\n const triggers = document.querySelectorAll('overlay-trigger');\n const closes: Promise<CustomEvent<unknown>>[] = [];\n triggers.forEach((trigger) => {\n if (trigger.open) {\n const close = oneEvent(trigger, 'sp-closed');\n trigger.open = undefined;\n closes.push(close);\n }\n });\n await Promise.all(closes);\n });\n it('acquires a `color` and `size` from `sp-theme`', async () => {\n const el = await fixture<Theme>(html`\n <sp-theme color=\"dark\">\n <sp-theme color=\"light\">\n <overlay-trigger id=\"trigger\" placement=\"top\">\n <sp-button\n id=\"outer-button\"\n variant=\"primary\"\n slot=\"trigger\"\n >\n Show Popover\n </sp-button>\n <sp-popover\n id=\"outer-popover\"\n dialog\n slot=\"click-content\"\n direction=\"bottom\"\n tip\n open\n >\n Popover content!\n </sp-popover>\n </overlay-trigger>\n </sp-theme>\n </sp-theme>\n `);\n\n await elementUpdated(el);\n\n expect(document.querySelector('active-overlay')).to.be.null;\n\n const button = el.querySelector('sp-button') as Button;\n const opened = oneEvent(button, 'sp-opened');\n button.click();\n await opened;\n\n await elementUpdated(el);\n\n const overlay = document.querySelector(\n 'active-overlay'\n ) as ActiveOverlay;\n\n expect(overlay).to.exist;\n expect(overlay.theme.color).to.not.equal('dark');\n expect(overlay.theme.color).to.equal('light');\n });\n it('manages multiple layers of `type=\"modal\"', async () => {\n const el = await fixture(html`\n <overlay-trigger type=\"modal\" placement=\"none\">\n <sp-button slot=\"trigger\" variant=\"accent\">\n Toggle Dialog\n </sp-button>\n <sp-popover dialog slot=\"click-content\">\n <overlay-trigger>\n <sp-button slot=\"trigger\" variant=\"primary\">\n Toggle Dialog\n </sp-button>\n <sp-popover dialog slot=\"click-content\">\n <overlay-trigger type=\"modal\">\n <sp-button\n slot=\"trigger\"\n variant=\"secondary\"\n >\n Toggle Dialog\n </sp-button>\n <sp-popover dialog slot=\"click-content\">\n <p>\n When you get this deep, this\n ActiveOverlay should be the only one\n in [slot=\"open\"].\n </p>\n <p>\n All of the rest of the ActiveOverlay\n elements should have had their\n [slot] attribute removed.\n </p>\n <p>\n Closing this ActiveOverlay should\n replace them...\n </p>\n </sp-popover>\n </overlay-trigger>\n </sp-popover>\n </overlay-trigger>\n </sp-popover>\n </overlay-trigger>\n `);\n const overlayTriggers = [...el.querySelectorAll('overlay-trigger')];\n let activeOverlays = [\n ...document.querySelectorAll('active-overlay'),\n ];\n const triggers = [\n ...el.querySelectorAll('sp-button[slot=\"trigger\"]'),\n ] as Button[];\n\n expect(activeOverlays.length, 'no previous overlays').to.equal(0);\n\n let open = oneEvent(triggers[0], 'sp-opened');\n triggers[0]?.click();\n await open;\n await elementUpdated(overlayTriggers[0]);\n activeOverlays = [...document.querySelectorAll('active-overlay')];\n expect(\n activeOverlays.length,\n 'The first `active-overlay` element has been added.'\n ).to.equal(1);\n expect(\n activeOverlays[0].slot,\n 'first overlay, first time'\n ).to.equal('open');\n\n open = oneEvent(triggers[1], 'sp-opened');\n triggers[1]?.click();\n await open;\n await elementUpdated(overlayTriggers[1]);\n activeOverlays = [...document.querySelectorAll('active-overlay')];\n expect(\n activeOverlays.length,\n 'The second `active-overlay` element has been added.'\n ).to.equal(2);\n\n expect(\n activeOverlays[0].slot,\n 'first overlay, second time'\n ).to.equal('open');\n expect(\n activeOverlays[1].slot,\n 'second overlay, second time'\n ).to.equal('open');\n\n open = oneEvent(triggers[2], 'sp-opened');\n triggers[2]?.click();\n await open;\n await elementUpdated(overlayTriggers[2]);\n activeOverlays = [...document.querySelectorAll('active-overlay')];\n expect(\n activeOverlays.length,\n 'The third `active-overlay` element has been added.'\n ).to.equal(3);\n\n expect(\n activeOverlays[0].hasAttribute('slot'),\n 'first overlay, third time'\n ).to.be.false;\n expect(\n activeOverlays[1].hasAttribute('slot'),\n 'second overlay, third time'\n ).to.be.false;\n expect(\n activeOverlays[2].slot,\n 'third overlay, third time'\n ).to.equal('open');\n\n await nextFrame();\n const closed = oneEvent(triggers[2], 'sp-closed');\n document.body.click();\n await closed;\n await elementUpdated(overlayTriggers[2]);\n activeOverlays = [...document.querySelectorAll('active-overlay')];\n expect(\n activeOverlays.length,\n 'The third `active-overlay` element has been removed.'\n ).to.equal(2);\n\n await waitUntil(() => {\n return activeOverlays[0].slot === 'open';\n }, 'first overlay, last time');\n expect(\n activeOverlays[1].slot,\n 'second overlay, last time'\n ).to.equal('open');\n });\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/overlay.test-vrt.js
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["overlay.test-vrt.ts"],
|
|
4
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 * as stories from '../stories/overlay.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('OverlayStories', stories);\n"],
|
|
5
|
-
"mappings": "AAYA;
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAE/B,eAAe,kBAAkB,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/overlay.test.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import "@spectrum-web-components/button/sp-button.js";
|
|
2
3
|
import "@spectrum-web-components/dialog/sp-dialog.js";
|
|
3
4
|
import "@spectrum-web-components/popover/sp-popover.js";
|
|
@@ -25,7 +26,8 @@ describe("Overlays", () => {
|
|
|
25
26
|
let testDiv;
|
|
26
27
|
let openOverlays = [];
|
|
27
28
|
beforeEach(async () => {
|
|
28
|
-
testDiv = await fixture(
|
|
29
|
+
testDiv = await fixture(
|
|
30
|
+
html`
|
|
29
31
|
<div id="top">
|
|
30
32
|
<style>
|
|
31
33
|
body {
|
|
@@ -74,7 +76,8 @@ describe("Overlays", () => {
|
|
|
74
76
|
</div>
|
|
75
77
|
</div>
|
|
76
78
|
</div>
|
|
77
|
-
`
|
|
79
|
+
`
|
|
80
|
+
);
|
|
78
81
|
await elementUpdated(testDiv);
|
|
79
82
|
});
|
|
80
83
|
afterEach(() => {
|
|
@@ -98,23 +101,35 @@ describe("Overlays", () => {
|
|
|
98
101
|
].map((direction) => {
|
|
99
102
|
const placement = direction;
|
|
100
103
|
it(`opens a popover - ${placement}`, async () => {
|
|
101
|
-
const button = testDiv.querySelector(
|
|
102
|
-
|
|
104
|
+
const button = testDiv.querySelector(
|
|
105
|
+
"#first-button"
|
|
106
|
+
);
|
|
107
|
+
const outerPopover = testDiv.querySelector(
|
|
108
|
+
"#outer-popover"
|
|
109
|
+
);
|
|
103
110
|
expect(outerPopover.parentElement).to.exist;
|
|
104
111
|
if (outerPopover.parentElement) {
|
|
105
|
-
expect(outerPopover.parentElement.id).to.equal(
|
|
112
|
+
expect(outerPopover.parentElement.id).to.equal(
|
|
113
|
+
"overlay-content"
|
|
114
|
+
);
|
|
106
115
|
}
|
|
107
116
|
expect(isVisible(outerPopover)).to.be.false;
|
|
108
117
|
expect(button).to.exist;
|
|
109
|
-
openOverlays.push(
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
118
|
+
openOverlays.push(
|
|
119
|
+
await Overlay.open(button, "click", outerPopover, {
|
|
120
|
+
delayed: false,
|
|
121
|
+
placement,
|
|
122
|
+
offset: 10
|
|
123
|
+
})
|
|
124
|
+
);
|
|
125
|
+
await waitForPredicate(
|
|
126
|
+
() => !!(outerPopover.parentElement && outerPopover.parentElement.id !== "overlay-content")
|
|
127
|
+
);
|
|
115
128
|
expect(outerPopover.parentElement).to.exist;
|
|
116
129
|
if (outerPopover.parentElement) {
|
|
117
|
-
expect(outerPopover.parentElement.id).not.to.equal(
|
|
130
|
+
expect(outerPopover.parentElement.id).not.to.equal(
|
|
131
|
+
"overlay-content"
|
|
132
|
+
);
|
|
118
133
|
}
|
|
119
134
|
expect(isVisible(outerPopover)).to.be.true;
|
|
120
135
|
});
|
|
@@ -128,11 +143,15 @@ describe("Overlays", () => {
|
|
|
128
143
|
}
|
|
129
144
|
expect(isVisible(outerPopover)).to.be.false;
|
|
130
145
|
expect(button).to.exist;
|
|
131
|
-
openOverlays.push(
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
146
|
+
openOverlays.push(
|
|
147
|
+
await Overlay.open(button, "click", outerPopover, {
|
|
148
|
+
delayed: false,
|
|
149
|
+
offset: 10
|
|
150
|
+
})
|
|
151
|
+
);
|
|
152
|
+
await waitForPredicate(
|
|
153
|
+
() => !!(outerPopover.parentElement && outerPopover.parentElement.id !== "overlay-content")
|
|
154
|
+
);
|
|
136
155
|
expect(isVisible(outerPopover)).to.be.true;
|
|
137
156
|
Overlay.update();
|
|
138
157
|
expect(isVisible(outerPopover)).to.be.true;
|
|
@@ -146,42 +165,61 @@ describe("Overlays", () => {
|
|
|
146
165
|
}
|
|
147
166
|
expect(isVisible(outerPopover)).to.be.false;
|
|
148
167
|
expect(button).to.exist;
|
|
149
|
-
openOverlays.push(
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
168
|
+
openOverlays.push(
|
|
169
|
+
await Overlay.open(button, "click", outerPopover, {
|
|
170
|
+
delayed: true,
|
|
171
|
+
offset: 10
|
|
172
|
+
})
|
|
173
|
+
);
|
|
174
|
+
await waitUntil(
|
|
175
|
+
() => !!(outerPopover.parentElement && outerPopover.parentElement.id !== "overlay-content"),
|
|
176
|
+
"overlay opened"
|
|
177
|
+
);
|
|
154
178
|
expect(outerPopover.parentElement).to.exist;
|
|
155
179
|
if (outerPopover.parentElement) {
|
|
156
|
-
expect(outerPopover.parentElement.id).not.to.equal(
|
|
180
|
+
expect(outerPopover.parentElement.id).not.to.equal(
|
|
181
|
+
"overlay-content"
|
|
182
|
+
);
|
|
157
183
|
}
|
|
158
184
|
expect(isVisible(outerPopover)).to.be.true;
|
|
159
185
|
});
|
|
160
186
|
it("opens hover overlay", async () => {
|
|
161
187
|
const button = testDiv.querySelector("#first-button");
|
|
162
188
|
const hoverOverlay = testDiv.querySelector("#hover-1");
|
|
163
|
-
const clickOverlay = testDiv.querySelector(
|
|
189
|
+
const clickOverlay = testDiv.querySelector(
|
|
190
|
+
"#outer-popover"
|
|
191
|
+
);
|
|
164
192
|
expect(button).to.exist;
|
|
165
193
|
expect(hoverOverlay).to.exist;
|
|
166
194
|
expect(isVisible(hoverOverlay)).to.be.false;
|
|
167
195
|
expect(isVisible(clickOverlay)).to.be.false;
|
|
168
|
-
openOverlays.push(
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
196
|
+
openOverlays.push(
|
|
197
|
+
await Overlay.open(button, "hover", hoverOverlay, {
|
|
198
|
+
delayed: false,
|
|
199
|
+
placement: "top",
|
|
200
|
+
offset: 10
|
|
201
|
+
})
|
|
202
|
+
);
|
|
203
|
+
await waitForPredicate(
|
|
204
|
+
() => !!(hoverOverlay.parentElement && hoverOverlay.parentElement.id !== "overlay-content")
|
|
205
|
+
);
|
|
174
206
|
expect(hoverOverlay.parentElement).to.exist;
|
|
175
207
|
if (hoverOverlay.parentElement) {
|
|
176
|
-
expect(hoverOverlay.parentElement.id).not.to.equal(
|
|
208
|
+
expect(hoverOverlay.parentElement.id).not.to.equal(
|
|
209
|
+
"overlay-content"
|
|
210
|
+
);
|
|
177
211
|
}
|
|
178
212
|
expect(isVisible(hoverOverlay)).to.be.true;
|
|
179
|
-
openOverlays.push(
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
213
|
+
openOverlays.push(
|
|
214
|
+
await Overlay.open(button, "click", clickOverlay, {
|
|
215
|
+
delayed: false,
|
|
216
|
+
placement: "bottom",
|
|
217
|
+
offset: 10
|
|
218
|
+
})
|
|
219
|
+
);
|
|
220
|
+
await waitForPredicate(
|
|
221
|
+
() => !!(clickOverlay.parentElement && clickOverlay.parentElement.id !== "overlay-content" && hoverOverlay.parentElement && hoverOverlay.parentElement.id === "overlay-content")
|
|
222
|
+
);
|
|
185
223
|
if (hoverOverlay.parentElement) {
|
|
186
224
|
expect(hoverOverlay.parentElement.id).to.equal("overlay-content");
|
|
187
225
|
}
|
|
@@ -191,28 +229,40 @@ describe("Overlays", () => {
|
|
|
191
229
|
it("opens custom overlay", async () => {
|
|
192
230
|
const button = testDiv.querySelector("#first-button");
|
|
193
231
|
const customOverlay = testDiv.querySelector("#hover-1");
|
|
194
|
-
const clickOverlay = testDiv.querySelector(
|
|
232
|
+
const clickOverlay = testDiv.querySelector(
|
|
233
|
+
"#outer-popover"
|
|
234
|
+
);
|
|
195
235
|
expect(button).to.exist;
|
|
196
236
|
expect(customOverlay).to.exist;
|
|
197
237
|
expect(isVisible(customOverlay)).to.be.false;
|
|
198
238
|
expect(isVisible(clickOverlay)).to.be.false;
|
|
199
|
-
openOverlays.push(
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
239
|
+
openOverlays.push(
|
|
240
|
+
await Overlay.open(button, "custom", customOverlay, {
|
|
241
|
+
delayed: false,
|
|
242
|
+
placement: "top",
|
|
243
|
+
offset: 10
|
|
244
|
+
})
|
|
245
|
+
);
|
|
246
|
+
await waitForPredicate(
|
|
247
|
+
() => !!(customOverlay.parentElement && customOverlay.parentElement.id !== "overlay-content")
|
|
248
|
+
);
|
|
205
249
|
expect(customOverlay.parentElement).to.exist;
|
|
206
250
|
if (customOverlay.parentElement) {
|
|
207
|
-
expect(customOverlay.parentElement.id).not.to.equal(
|
|
251
|
+
expect(customOverlay.parentElement.id).not.to.equal(
|
|
252
|
+
"overlay-content"
|
|
253
|
+
);
|
|
208
254
|
}
|
|
209
255
|
expect(isVisible(customOverlay)).to.be.true;
|
|
210
|
-
openOverlays.push(
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
256
|
+
openOverlays.push(
|
|
257
|
+
await Overlay.open(button, "click", clickOverlay, {
|
|
258
|
+
delayed: false,
|
|
259
|
+
placement: "bottom",
|
|
260
|
+
offset: 10
|
|
261
|
+
})
|
|
262
|
+
);
|
|
263
|
+
await waitForPredicate(
|
|
264
|
+
() => !!(clickOverlay.parentElement && clickOverlay.parentElement.id !== "overlay-content")
|
|
265
|
+
);
|
|
216
266
|
expect(isVisible(customOverlay)).to.be.true;
|
|
217
267
|
expect(isVisible(clickOverlay)).to.be.true;
|
|
218
268
|
});
|
|
@@ -223,14 +273,22 @@ describe("Overlays", () => {
|
|
|
223
273
|
</div>
|
|
224
274
|
`);
|
|
225
275
|
const dialog = el.querySelector("sp-dialog");
|
|
226
|
-
openOverlays.push(
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
276
|
+
openOverlays.push(
|
|
277
|
+
await Overlay.open(el, "click", dialog, {
|
|
278
|
+
delayed: false,
|
|
279
|
+
placement: "bottom",
|
|
280
|
+
offset: 10
|
|
281
|
+
})
|
|
282
|
+
);
|
|
283
|
+
await waitUntil(
|
|
284
|
+
() => !!dialog.parentElement && dialog.parentElement.tagName === "ACTIVE-OVERLAY",
|
|
285
|
+
"content is stolen"
|
|
286
|
+
);
|
|
232
287
|
dialog.close();
|
|
233
|
-
await waitUntil(
|
|
288
|
+
await waitUntil(
|
|
289
|
+
() => !!dialog.parentElement && dialog.parentElement.tagName !== "ACTIVE-OVERLAY",
|
|
290
|
+
"content is returned"
|
|
291
|
+
);
|
|
234
292
|
});
|
|
235
293
|
it("closes an inline overlay when tabbing past the content", async () => {
|
|
236
294
|
const el = await fixture(html`
|
|
@@ -265,7 +323,9 @@ describe("Overlays", () => {
|
|
|
265
323
|
press: "Tab"
|
|
266
324
|
});
|
|
267
325
|
expect(document.activeElement).to.equal(after);
|
|
268
|
-
await waitUntil(
|
|
326
|
+
await waitUntil(
|
|
327
|
+
() => document.querySelector("active-overlay") === null
|
|
328
|
+
);
|
|
269
329
|
});
|
|
270
330
|
it("closes an inline overlay when tabbing before the trigger", async () => {
|
|
271
331
|
const el = await fixture(html`
|
|
@@ -299,13 +359,17 @@ describe("Overlays", () => {
|
|
|
299
359
|
press: "Shift+Tab"
|
|
300
360
|
});
|
|
301
361
|
expect(document.activeElement).to.equal(before);
|
|
302
|
-
await waitUntil(
|
|
362
|
+
await waitUntil(
|
|
363
|
+
() => document.querySelector("active-overlay") === null
|
|
364
|
+
);
|
|
303
365
|
});
|
|
304
366
|
it("opens detached content", async () => {
|
|
305
367
|
const textContent = "This is a detached element that has been overlaid";
|
|
306
|
-
const el = await fixture(
|
|
368
|
+
const el = await fixture(
|
|
369
|
+
html`
|
|
307
370
|
<button>Trigger</button>
|
|
308
|
-
`
|
|
371
|
+
`
|
|
372
|
+
);
|
|
309
373
|
const content = document.createElement("div");
|
|
310
374
|
content.textContent = textContent;
|
|
311
375
|
const opened = oneEvent(el, "sp-opened");
|
|
@@ -354,8 +418,12 @@ describe('Overlay - type="modal"', () => {
|
|
|
354
418
|
]
|
|
355
419
|
});
|
|
356
420
|
await opened;
|
|
357
|
-
const firstOverlay = document.querySelector(
|
|
358
|
-
|
|
421
|
+
const firstOverlay = document.querySelector(
|
|
422
|
+
"active-overlay"
|
|
423
|
+
);
|
|
424
|
+
const firstHeadline = firstOverlay.querySelector(
|
|
425
|
+
'[slot="header"]'
|
|
426
|
+
);
|
|
359
427
|
expect(firstOverlay, "first overlay").to.not.be.null;
|
|
360
428
|
expect(firstOverlay.isConnected).to.be.true;
|
|
361
429
|
expect(firstHeadline.textContent).to.equal("Menu source: end");
|
|
@@ -378,8 +446,12 @@ describe('Overlay - type="modal"', () => {
|
|
|
378
446
|
});
|
|
379
447
|
await closed;
|
|
380
448
|
await opened;
|
|
381
|
-
const secondOverlay = document.querySelector(
|
|
382
|
-
|
|
449
|
+
const secondOverlay = document.querySelector(
|
|
450
|
+
"active-overlay"
|
|
451
|
+
);
|
|
452
|
+
const secondHeadline = secondOverlay.querySelector(
|
|
453
|
+
'[slot="header"]'
|
|
454
|
+
);
|
|
383
455
|
expect(secondOverlay, "second overlay").to.not.be.null;
|
|
384
456
|
expect(secondOverlay).to.not.equal(firstOverlay);
|
|
385
457
|
expect(firstOverlay.isConnected).to.be.false;
|
|
@@ -427,9 +499,13 @@ describe('Overlay - type="modal"', () => {
|
|
|
427
499
|
]
|
|
428
500
|
});
|
|
429
501
|
await opened;
|
|
430
|
-
const activeOverlay = document.querySelector(
|
|
502
|
+
const activeOverlay = document.querySelector(
|
|
503
|
+
"active-overlay"
|
|
504
|
+
);
|
|
431
505
|
expect(activeOverlay.placement).to.equal("right-start");
|
|
432
|
-
expect(activeOverlay.getAttribute("actual-placement")).to.equal(
|
|
506
|
+
expect(activeOverlay.getAttribute("actual-placement")).to.equal(
|
|
507
|
+
"bottom"
|
|
508
|
+
);
|
|
433
509
|
const closed = oneEvent(document, "sp-closed");
|
|
434
510
|
sendKeys({
|
|
435
511
|
press: "Escape"
|
|
@@ -439,11 +515,15 @@ describe('Overlay - type="modal"', () => {
|
|
|
439
515
|
});
|
|
440
516
|
it("opens children in the modal stack through shadow roots", async () => {
|
|
441
517
|
const el = await fixture(definedOverlayElement());
|
|
442
|
-
const trigger = el.querySelector(
|
|
518
|
+
const trigger = el.querySelector(
|
|
519
|
+
'[slot="trigger"]'
|
|
520
|
+
);
|
|
443
521
|
let open = oneEvent(el, "sp-opened");
|
|
444
522
|
trigger.click();
|
|
445
523
|
await open;
|
|
446
|
-
const content = document.querySelector(
|
|
524
|
+
const content = document.querySelector(
|
|
525
|
+
"popover-content"
|
|
526
|
+
);
|
|
447
527
|
open = oneEvent(content, "sp-opened");
|
|
448
528
|
content.button.click();
|
|
449
529
|
await open;
|
|
@@ -480,10 +560,18 @@ describe("Overlay - timing", () => {
|
|
|
480
560
|
</overlay-trigger>
|
|
481
561
|
</div>
|
|
482
562
|
`);
|
|
483
|
-
const overlayTrigger1 = test.querySelector(
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
const
|
|
563
|
+
const overlayTrigger1 = test.querySelector(
|
|
564
|
+
"overlay-trigger:first-child"
|
|
565
|
+
);
|
|
566
|
+
const overlayTrigger2 = test.querySelector(
|
|
567
|
+
"overlay-trigger:last-child"
|
|
568
|
+
);
|
|
569
|
+
const trigger1 = overlayTrigger1.querySelector(
|
|
570
|
+
'[slot="trigger"]'
|
|
571
|
+
);
|
|
572
|
+
const trigger2 = overlayTrigger2.querySelector(
|
|
573
|
+
'[slot="trigger"]'
|
|
574
|
+
);
|
|
487
575
|
const boundingRectTrigger1 = trigger1.getBoundingClientRect();
|
|
488
576
|
const boundingRectTrigger2 = trigger2.getBoundingClientRect();
|
|
489
577
|
const trigger1Position = [
|