diff --git a/.circleci/config.yml b/.circleci/config.yml index 8295503d33..fd07c57c09 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 68bb9c038f91e9577b14802dcf923cd1dace34e7 + default: bd0e3b059017f75117482c310263df3a3ae5404c wireit_cache_name: type: string default: wireit diff --git a/cem-react-wrapper.config.js b/cem-react-wrapper.config.js index 9dbb7ac11d..d5d46f396f 100644 --- a/cem-react-wrapper.config.js +++ b/cem-react-wrapper.config.js @@ -32,7 +32,7 @@ export default { plugins: [ defineElementPlugin(), reactWrapperPlugin({ - exclude: ['StoryDecorator'], + exclude: ['StoryDecorator', 'TooltipOpenable'], outDir: '../../react', prettierConfig: yaml.load( readFileSync(resolve('../../.prettierrc.yaml')) diff --git a/package.json b/package.json index 100967f2f8..be1ae113e4 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "docs:review": "alex packages/**/*.md", "docs:start": "yarn workspace documentation serve --watch", "find": "test -f custom-elements.json", - "gen-react-wrapper": "rm -fr react && lerna exec --ignore \"{@spectrum-web-components/{base,bundle,custom-vars-viewer,modal,iconset,shared,opacity-checkerboard,styles,reactive-controllers},@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../cem-react-wrapper.config.js && node ./scripts/generate-icon-react-wrapper.js", + "gen-react-wrapper": "rm -fr react && lerna exec --ignore \"{@spectrum-web-components/{base,bundle,custom-vars-viewer,modal,iconset,shared,opacity-checkerboard,styles,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../cem-react-wrapper.config.js && node ./scripts/generate-icon-react-wrapper.js", "get-ready": "yarn build:clear-cache && yarn build", "icons": "wireit", "icons:ui": "wireit", @@ -55,7 +55,7 @@ "prepare": "husky install", "prestorybook": "wireit", "prestorybook:build": "cem analyze --outdir .storybook/", - "pretest:bench": "test -f test/benchmark/cli.js ||:", + "pretest:bench": "yarn build:tests && test -f test/benchmark/cli.js ||:", "pretest:visual": "yarn build && yarn build", "process-icons": "wireit", "process-spectrum": "wireit", @@ -68,12 +68,12 @@ "storybook:quick": "run-p build:watch storybook:run", "storybook:run": "web-dev-server --config wds-storybook.config.js", "test": "yarn test:focus unit", - "test:bench": "node test/benchmark/cli.js", + "test:bench": "yarn build:tests && node test/benchmark/cli.js", "test:changed": "node ./tasks/test-changes.js", "test:ci": "yarn test:start", "test:create": "wireit", "test:errors": "yarn test | grep -A 32 ❌", - "test:focus": "yarn build && yarn test:ci --coverage --group", + "test:focus": "yarn build && yarn test:ci --group", "test:start": "web-test-runner", "test:visual": "yarn test:visual:ci", "test:visual:ci": "yarn test:start --group", @@ -81,6 +81,7 @@ "test:visual:clean:baseline": "rimraf test/visual/screenshots-baseline", "test:visual:clean:current": "rimraf test/visual/screenshots-current", "test:watch": "yarn test:watch:focus unit", + "test:watch:flags:focus": "yarn build && run-p build:watch \"test:start --watch --group {1} --config web-test-runner.config.ci-chromium-flags.js\" --", "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --", "update:spectrum-css": "node ./scripts/update-spectrum-css.js --latest || yarn update:spectrum-css:cleanup", "update:spectrum-css:cleanup": "yarn lint:packagejson && yarn --ignore-scripts && yarn process-spectrum", @@ -152,7 +153,7 @@ "gh-pages": "^4.0.0", "glob": "^10.3.0", "gunzip-maybe": "^1.4.2", - "husky": "^8.0.1", + "husky": "^8.0.3", "latest-version": "^7.0.0", "lerna": "^6.0.1", "lightningcss": "^1.19.0", diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts index 95c693dcd7..bf9f750f12 100644 --- a/packages/action-button/src/ActionButton.ts +++ b/packages/action-button/src/ActionButton.ts @@ -116,7 +116,6 @@ export class ActionButton extends SizedMixin(ButtonBase, { constructor() { super(); this.addEventListener('click', this.onClick); - this.addEventListener('pointerdown', this.onPointerdown); } private onClick = (): void => { @@ -134,10 +133,13 @@ export class ActionButton extends SizedMixin(ButtonBase, { } }; - private onPointerdown(event: PointerEvent): void { + private handlePointerdownHoldAffordance(event: PointerEvent): void { if (event.button !== 0) return; - this.addEventListener('pointerup', this.onPointerup); - this.addEventListener('pointercancel', this.onPointerup); + this.addEventListener('pointerup', this.handlePointerupHoldAffordance); + this.addEventListener( + 'pointercancel', + this.handlePointerupHoldAffordance + ); LONGPRESS_TIMEOUT = setTimeout(() => { this.dispatchEvent( new CustomEvent('longpress', { @@ -151,10 +153,16 @@ export class ActionButton extends SizedMixin(ButtonBase, { }, LONGPRESS_DURATION); } - private onPointerup(): void { + private handlePointerupHoldAffordance(): void { clearTimeout(LONGPRESS_TIMEOUT); - this.removeEventListener('pointerup', this.onPointerup); - this.removeEventListener('pointercancel', this.onPointerup); + this.removeEventListener( + 'pointerup', + this.handlePointerupHoldAffordance + ); + this.removeEventListener( + 'pointercancel', + this.handlePointerupHoldAffordance + ); } /** @@ -258,6 +266,20 @@ export class ActionButton extends SizedMixin(ButtonBase, { ); } } + if (changes.has('holdAffordance')) { + if (this.holdAffordance) { + this.addEventListener( + 'pointerdown', + this.handlePointerdownHoldAffordance + ); + } else { + this.removeEventListener( + 'pointerdown', + this.handlePointerdownHoldAffordance + ); + this.handlePointerupHoldAffordance(); + } + } } } diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts index 4ff2d4f52c..e2cd1a767d 100644 --- a/packages/action-group/src/ActionGroup.ts +++ b/packages/action-group/src/ActionGroup.ts @@ -194,7 +194,6 @@ export class ActionGroup extends SizedMixin(SpectrumElement, { target.tabIndex = 0; target.setAttribute('aria-checked', 'true'); this.setSelected([target.value], true); - target.focus(); break; } case 'multiple': { diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts index 6ab27814e6..ad5f6cc54f 100644 --- a/packages/action-group/test/action-group.test.ts +++ b/packages/action-group/test/action-group.test.ts @@ -1099,6 +1099,7 @@ describe('ActionGroup', () => { expect(el.selected.length).to.equal(1); expect(el.selected[0]).to.equal('Second'); + thirdElement.focus(); thirdElement.click(); await elementUpdated(el); @@ -1204,6 +1205,7 @@ describe('ActionGroup', () => { await elementUpdated(el); expect(el.selected.length).to.equal(0); + thirdElement.focus(); thirdElement.click(); await elementUpdated(el); diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts index c1e6643921..ccb21df44a 100644 --- a/packages/action-menu/src/ActionMenu.ts +++ b/packages/action-menu/src/ActionMenu.ts @@ -73,13 +73,17 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') { id="button" class="button" size=${this.size} - @blur=${this.onButtonBlur} - @click=${this.onButtonClick} - @focus=${this.onButtonFocus} + @blur=${this.handleButtonBlur} + @click=${this.handleButtonClick} + @keydown=${{ + handleEvent: this.handleEnterKeydown, + capture: true, + }} ?disabled=${this.disabled} > ${this.buttonContent} + ${this.renderMenu} `; } diff --git a/packages/action-menu/src/action-menu.css b/packages/action-menu/src/action-menu.css index d2eb608f21..648d716f41 100644 --- a/packages/action-menu/src/action-menu.css +++ b/packages/action-menu/src/action-menu.css @@ -18,6 +18,10 @@ governing permissions and limitations under the License. min-width: 0; } +:host > sp-menu { + display: none; +} + ::slotted([slot='icon']) { flex-shrink: 0; } @@ -33,7 +37,6 @@ governing permissions and limitations under the License. #popover { width: auto; max-width: none; - display: none; } :host([dir='ltr']) ::slotted([slot='icon']), diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts index 9e5f24e21e..ee30926aae 100644 --- a/packages/action-menu/stories/action-menu.stories.ts +++ b/packages/action-menu/stories/action-menu.stories.ts @@ -11,10 +11,12 @@ governing permissions and limitations under the License. */ import { html, TemplateResult } from '@spectrum-web-components/base'; +import '@spectrum-web-components/action-menu/sp-action-menu.js'; import '@spectrum-web-components/menu/sp-menu.js'; import '@spectrum-web-components/menu/sp-menu-item.js'; import '@spectrum-web-components/menu/sp-menu-group.js'; import '@spectrum-web-components/menu/sp-menu-divider.js'; +import '@spectrum-web-components/tooltip/sp-tooltip.js'; import { ActionMenuMarkup } from './'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js'; @@ -233,7 +235,11 @@ export const controlled = (): TemplateResult => { Show - + event.preventDefault()} + > { ); await elementUpdated(el); + await nextFrame(); + await nextFrame(); await expect(el).to.be.accessible(); }); @@ -129,6 +142,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { ); await elementUpdated(el); + await nextFrame(); + await nextFrame(); await expect(el).to.be.accessible(); }); @@ -139,7 +154,11 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { html` changeSpy()} + @change=${({ + target: { value }, + }: Event & { target: ActionMenu }) => { + changeSpy(value); + }} > Deselect @@ -159,21 +178,20 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { const menuItem2 = el.querySelector( 'sp-menu-item:nth-child(2)' ) as MenuItem; - const opened = oneEvent(el, 'sp-opened'); el.click(); - await opened; await elementUpdated(el); + await opened; expect(el.open).to.be.true; const closed = oneEvent(el, 'sp-closed'); menuItem2.click(); await closed; - await elementUpdated(el); expect(el.open).to.be.false; expect(changeSpy.callCount).to.equal(1); + expect(changeSpy.calledWith('Deselect')).to.be.true; }); it('closes when Menu Item has [href]', async () => { const changeSpy = spy(); @@ -182,7 +200,9 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { html` changeSpy()} + @change=${() => { + changeSpy(); + }} > Deselect @@ -208,21 +228,18 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { const opened = oneEvent(el, 'sp-opened'); el.click(); await opened; - await elementUpdated(el); expect(el.open).to.be.true; const closed = oneEvent(el, 'sp-closed'); menuItem2.click(); await closed; - await elementUpdated(el); expect(el.open).to.be.false; expect(changeSpy.callCount).to.equal(0); }); it('can be `quiet`', async () => { const el = await actionMenuFixture(); - await elementUpdated(el); expect(el.quiet).to.be.false; @@ -234,8 +251,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { it('stay `valid`', async () => { const el = await actionMenuFixture(); - await elementUpdated(el); - expect(el.invalid).to.be.false; el.invalid = true; @@ -246,8 +261,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { it('focus()', async () => { const el = await actionMenuFixture(); - await elementUpdated(el); - el.focus(); expect(document.activeElement).to.equal(el); @@ -257,8 +270,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { el.open = true; await opened; - expect(document.activeElement).to.not.equal(el); - const closed = oneEvent(el, 'sp-closed'); el.open = false; await closed; @@ -269,7 +280,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { it('opens unmeasured', async () => { const el = await actionMenuFixture(); - await elementUpdated(el); const button = el.button as HTMLButtonElement; button.click(); @@ -282,7 +292,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { it('opens unmeasured with deprecated syntax', async () => { const el = await deprecatedActionMenuFixture(); - await elementUpdated(el); const button = el.button as HTMLButtonElement; button.click(); @@ -299,10 +308,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { expect(button).to.have.attribute('aria-expanded', 'false'); expect(button).not.to.have.attribute('aria-controls'); - let items = el.querySelectorAll('sp-menu-item'); - const count = items.length; - expect(items.length).to.equal(count); - let opened = oneEvent(el, 'sp-opened'); el.open = true; await opened; @@ -310,8 +315,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { expect(el.open).to.be.true; expect(button).to.have.attribute('aria-expanded', 'true'); expect(button).to.have.attribute('aria-controls', 'menu'); - items = el.querySelectorAll('sp-menu-item'); - expect(items.length).to.equal(0); let closed = oneEvent(el, 'sp-closed'); el.open = false; @@ -320,8 +323,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { expect(el.open).to.be.false; expect(button).to.have.attribute('aria-expanded', 'false'); expect(button).not.to.have.attribute('aria-controls'); - items = el.querySelectorAll('sp-menu-item'); - expect(items.length).to.equal(count); opened = oneEvent(el, 'sp-opened'); el.open = true; @@ -330,8 +331,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { expect(el.open).to.be.true; expect(button).to.have.attribute('aria-expanded', 'true'); expect(button).to.have.attribute('aria-controls', 'menu'); - items = el.querySelectorAll('sp-menu-item'); - expect(items.length).to.equal(0); closed = oneEvent(el, 'sp-closed'); el.open = false; @@ -340,8 +339,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { expect(el.open).to.be.false; expect(button).to.have.attribute('aria-expanded', 'false'); expect(button).not.to.have.attribute('aria-controls'); - items = el.querySelectorAll('sp-menu-item'); - expect(items.length).to.equal(count); }); it('allows submenu items to be selected', async () => { const root = await actionSubmenuFixture(); @@ -366,8 +363,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { new PointerEvent('pointerenter', { bubbles: true }) ); await opened; - const overlays = document.querySelectorAll('active-overlay'); - expect(overlays.length).to.equal(2); await elementUpdated(submenu); expect( @@ -376,7 +371,25 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { ).to.be.true; }); it('allows top-level selection state to change', async () => { - const root = await actionSubmenuFixture(); + const root = await styledFixture(html` + + One + + Two + + + B should be selected + + A + + B + + C + + + + `); + const unselectedItem = root.querySelector( 'sp-menu-item' ) as MenuItem; @@ -405,6 +418,7 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { selectedItem.click(); await closed; + expect(root.open).to.be.false; opened = oneEvent(root, 'sp-opened'); root.click(); await opened; @@ -439,5 +453,103 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { expect(selectedItem.textContent).to.include('Two'); expect(selectedItem.selected).to.be.true; }); + it('shows tooltip', async () => { + const openSpy = spy(); + const el = await styledFixture( + tooltipDescriptionAndPlacement( + tooltipDescriptionAndPlacement.args + ) + ); + const tooltip = el.querySelector('sp-tooltip') as Tooltip; + const rect = el.getBoundingClientRect(); + tooltip.addEventListener('sp-opened', () => openSpy()); + await elementUpdated(tooltip); + + await nextFrame(); + await nextFrame(); + + const overlay = tooltip.shadowRoot.querySelector( + 'sp-overlay' + ) as Overlay; + await elementUpdated(overlay); + + expect(overlay.triggerElement === el.button).to.be.true; + let open = oneEvent(tooltip, 'sp-opened'); + sendMouse({ + steps: [ + { + position: [ + rect.left + rect.width / 2, + rect.top + rect.height / 2, + ], + type: 'move', + }, + ], + }); + await open; + + expect(tooltip.open).to.be.true; + + let close = oneEvent(tooltip, 'sp-closed'); + el.click(); + await close; + + expect(tooltip.open).to.be.false; + expect(el.open).to.be.true; + + open = oneEvent(tooltip, 'sp-opened'); + sendMouse({ + steps: [ + { + position: [ + rect.left + rect.width * 2, + rect.top + rect.height / 2, + ], + type: 'move', + }, + { + position: [ + rect.left + rect.width / 2, + rect.top + rect.height / 2, + ], + type: 'move', + }, + ], + }); + await open; + + close = oneEvent(tooltip, 'sp-closed'); + sendMouse({ + steps: [ + { + position: [ + rect.left + rect.width * 2, + rect.top + rect.height / 2, + ], + type: 'move', + }, + ], + }); + await close; + + const menu = (el as unknown as TestablePicker).optionsMenu; + const menuRect = menu.getBoundingClientRect(); + + await sendMouse({ + steps: [ + { + position: [ + menuRect.left + menuRect.width / 2, + menuRect.top + menuRect.height / 2, + ], + type: 'move', + }, + ], + }); + + await aTimeout(150); + + expect(openSpy.callCount).to.equal(2); + }); }); }; diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts index 4c11842909..eca960a163 100644 --- a/packages/button/src/ButtonBase.ts +++ b/packages/button/src/ButtonBase.ts @@ -30,7 +30,7 @@ import buttonStyles from './button-base.css.js'; * @slot icon - icon element(s) to display at the start of the button */ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [ - 'sp-tooltip', + 'sp-overlay,sp-tooltip', ]) { public static override get styles(): CSSResultArray { return [buttonStyles]; diff --git a/packages/button/src/button-base.css b/packages/button/src/button-base.css index 66dcab4f2d..79d5953573 100644 --- a/packages/button/src/button-base.css +++ b/packages/button/src/button-base.css @@ -35,6 +35,7 @@ governing permissions and limitations under the License. inset: 0; } +::slotted(sp-overlay), ::slotted(sp-tooltip) { position: absolute; } diff --git a/packages/dialog/dialog-base.md b/packages/dialog/dialog-base.md index e1b5c6c5a1..90a32a34d6 100644 --- a/packages/dialog/dialog-base.md +++ b/packages/dialog/dialog-base.md @@ -27,7 +27,7 @@ import { DialogBase } from '@spectrum-web-components/dialog'; ## Example ```html - +

A thing is about to happen

diff --git a/packages/dialog/dialog-wrapper.md b/packages/dialog/dialog-wrapper.md index 7c844de819..8142243193 100644 --- a/packages/dialog/dialog-wrapper.md +++ b/packages/dialog/dialog-wrapper.md @@ -29,7 +29,7 @@ import { DialogWrapper } from '@spectrum-web-components/dialog'; ### Small ```html - + + + ): void { @@ -156,6 +163,9 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) { res(); }; }); + if (!this.open) { + this.dispatchClosed(); + } } super.update(changes); } @@ -173,13 +183,17 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) { ` : html``}
${this.renderDialog()} @@ -198,8 +212,6 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) { this.dialog.shouldManageTabOrderForScrolling(); }); } - } else { - this.tabIndex = 0; } } } diff --git a/packages/dialog/stories/dialog-base.stories.ts b/packages/dialog/stories/dialog-base.stories.ts index 2be6ce235b..0adf25962f 100644 --- a/packages/dialog/stories/dialog-base.stories.ts +++ b/packages/dialog/stories/dialog-base.stories.ts @@ -3,7 +3,6 @@ Copyright 2020 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language @@ -14,32 +13,31 @@ import { html, TemplateResult } from '@spectrum-web-components/base'; import '@spectrum-web-components/dialog/sp-dialog-base.js'; import '@spectrum-web-components/dialog/sp-dialog.js'; import '@spectrum-web-components/button/sp-button.js'; -import '@spectrum-web-components/overlay/overlay-trigger.js'; +import '@spectrum-web-components/overlay/sp-overlay.js'; import '@spectrum-web-components/checkbox/sp-checkbox.js'; import { alertDestructive } from './dialog.stories.js'; import { portrait } from './images.js'; -import { overlayTriggerDecorator } from './index.js'; export default { title: 'Dialog Base', component: 'sp-dialog-base', decorators: [ - (story: () => TemplateResult): TemplateResult => html` - - + (story: () => TemplateResult): TemplateResult => { + return html` + Toggle Dialog - ${story()} - - `, - overlayTriggerDecorator, + + ${story()} + + `; + }, ], }; export const Slotted = (): TemplateResult => html` { if ((event.target as HTMLElement).localName === 'sp-button') { (event.target as HTMLElement).dispatchEvent( @@ -56,7 +54,6 @@ export const disabledButton = (): TemplateResult => { return html` { if ((event.target as HTMLElement).localName === 'sp-button') { (event.target as HTMLElement).dispatchEvent( @@ -64,21 +61,30 @@ export const disabledButton = (): TemplateResult => { ); } }} - .overlayOpenCallback=${() => { - setTimeout(() => { - ( - document.querySelector( - '#changing-header' - ) as HTMLElement - ).textContent = 'The button in this dialog is now enabled'; + @sp-opened=${() => { + let count = 5; + const timer = setInterval(() => { + count -= 1; + if (!count) { + ( + document.querySelector( + '#changing-header' + ) as HTMLElement + ).textContent = + 'The button in this dialog is now enabled'; + ( + document.querySelector( + '#changing-button' + ) as HTMLButtonElement + ).disabled = false; + clearInterval(timer); + } ( - document.querySelector( - '#changing-button' - ) as HTMLButtonElement - ).disabled = false; - }, 5000); + document.querySelector('.time') as HTMLElement + ).textContent = count.toString(); + }, 1000); }} - .overlayCloseCallback=${() => { + @close=${() => { ( document.querySelector('#changing-header') as HTMLElement ).textContent = 'The button in this dialog is disabled'; @@ -87,13 +93,19 @@ export const disabledButton = (): TemplateResult => { '#changing-button' ) as HTMLButtonElement ).disabled = true; + (document.querySelector('.time') as HTMLElement).textContent = + '5'; }} >

The button in this dialog is disabled

-

After about 5 seconds the button with be enabled.

+

+ After about + 5 + seconds the button with be enabled. +

Ok @@ -105,7 +117,6 @@ export const disabledButton = (): TemplateResult => { export const notAgain = (): TemplateResult => html` { if ((event.target as HTMLElement).localName === 'sp-button') { (event.target as HTMLElement).dispatchEvent( @@ -132,7 +143,6 @@ export const notAgain = (): TemplateResult => html` export const moreCustom = (): TemplateResult => html` { if ((event.target as HTMLElement).localName === 'sp-button') { (event.target as HTMLElement).dispatchEvent( @@ -179,7 +189,6 @@ export const moreCustom = (): TemplateResult => html` export const fullyCustom = (): TemplateResult => html` { if ((event.target as HTMLElement).localName === 'button') { (event.target as HTMLElement).dispatchEvent( diff --git a/packages/dialog/stories/dialog-wrapper.stories.ts b/packages/dialog/stories/dialog-wrapper.stories.ts index 290897321d..c7e3869b93 100644 --- a/packages/dialog/stories/dialog-wrapper.stories.ts +++ b/packages/dialog/stories/dialog-wrapper.stories.ts @@ -112,11 +112,12 @@ export const wrapperDismissable = ( return html` Content of the dialog @@ -173,7 +174,6 @@ export const form = ( return html` @@ -260,7 +260,6 @@ export const longContent = ( return html` @@ -538,7 +537,6 @@ export const tooltips = ( return html` diff --git a/packages/dialog/test/dialog-base.test.ts b/packages/dialog/test/dialog-base.test.ts index 1d7024b781..b12429cb65 100644 --- a/packages/dialog/test/dialog-base.test.ts +++ b/packages/dialog/test/dialog-base.test.ts @@ -11,11 +11,11 @@ governing permissions and limitations under the License. */ import { + aTimeout, elementUpdated, expect, fixture, html, - nextFrame, oneEvent, } from '@open-wc/testing'; import { TemplateResult } from '@spectrum-web-components/base'; @@ -42,14 +42,14 @@ async function styledFixture( } const overlayTrigger = (story: () => TemplateResult): TemplateResult => html` - + Toggle Dialog ${story()} `; describe('dialog base', () => { - it('does not close by default with interacting with buttons', async () => { + it('does not close by default when interacting with buttons', async () => { const el = await styledFixture( overlayTrigger( () => html` @@ -72,36 +72,32 @@ describe('dialog base', () => { expect(el.open).to.be.undefined; expect(dialog.open).to.be.false; - expect(dialog.parentElement?.localName).to.equal('overlay-trigger'); - await nextFrame(); const opened = oneEvent(el, 'sp-opened'); el.open = 'click'; await opened; - await nextFrame(); expect(dialog.open).to.be.true; expect(el.open).to.be.equal('click'); - expect(dialog.parentElement?.localName).to.equal('active-overlay'); secondaryButton.click(); + // Give time to ensure reactions DO NOT close the dialog. + await aTimeout(100); expect(el.open).to.be.equal('click'); - expect(dialog.parentElement?.localName).to.equal('active-overlay'); negativeButton.click(); + // Give time to ensure reactions DO NOT close the dialog. + await aTimeout(100); expect(el.open).to.be.equal('click'); - expect(dialog.parentElement?.localName).to.equal('active-overlay'); + const closed = oneEvent(el, 'sp-closed'); - el.open = undefined; + dialog.open = false; await closed; - await elementUpdated(el); expect(dialog.open).to.be.false; - expect(el.open).to.be.undefined; - expect(dialog.parentElement?.localName).to.equal('overlay-trigger'); }); - it('does not close by default with interacting with buttons when recycled', async () => { + it('does not close by default when interacting with buttons when recycled', async () => { const el = await styledFixture( overlayTrigger( () => html` @@ -124,26 +120,25 @@ describe('dialog base', () => { expect(el.open).to.be.undefined; expect(dialog.open).to.be.false; - expect(dialog.parentElement?.localName).to.equal('overlay-trigger'); - await nextFrame(); const opened = oneEvent(el, 'sp-opened'); el.open = 'click'; await opened; - await nextFrame(); expect(dialog.open).to.be.true; expect(el.open).to.be.equal('click'); - expect(dialog.parentElement?.localName).to.equal('active-overlay'); secondaryButton.click(); + // Give time to ensure reactions DO NOT close the dialog. + await aTimeout(100); expect(el.open).to.be.equal('click'); - expect(dialog.parentElement?.localName).to.equal('active-overlay'); negativeButton.click(); + // Give time to ensure reactions DO NOT close the dialog. + await aTimeout(100); expect(el.open).to.be.equal('click'); - expect(dialog.parentElement?.localName).to.equal('active-overlay'); + const closed = oneEvent(el, 'sp-closed'); dialog.open = false; await closed; diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts index 96cc66eb8f..b0829a7deb 100644 --- a/packages/dialog/test/dialog-wrapper.test.ts +++ b/packages/dialog/test/dialog-wrapper.test.ts @@ -14,8 +14,8 @@ import { elementUpdated, expect, fixture, - nextFrame, oneEvent, + waitUntil, } from '@open-wc/testing'; import { spy, stub } from 'sinon'; @@ -23,7 +23,6 @@ import '@spectrum-web-components/theme/sp-theme.js'; import '@spectrum-web-components/theme/src/themes.js'; import '@spectrum-web-components/dialog/sp-dialog-wrapper.js'; import { Dialog, DialogWrapper } from '@spectrum-web-components/dialog'; -import { ActionButton } from '@spectrum-web-components/action-button'; import { Button } from '@spectrum-web-components/button'; import { Underlay } from '@spectrum-web-components/underlay'; import { @@ -89,44 +88,51 @@ describe('Dialog Wrapper', () => { }); it('opens and closes', async () => { const closeSpy = spy(); - const test = await styledFixture(longContent()); + const openedSpy = spy(); + const test = await styledFixture(html` +
openedSpy()}>${longContent()}
+ `); + const overlayTrigger = test.querySelector( + 'overlay-trigger' + ) as OverlayTrigger; const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper; el.addEventListener('close', () => closeSpy()); - - await elementUpdated(el); - - const opened = oneEvent(test, 'sp-opened'); - test.open = 'click'; - await opened; + await waitUntil( + () => openedSpy.calledOnce, + 'click content projected to overlay', + { timeout: 2000 } + ); expect(el.open).to.be.true; - - const closed = oneEvent(test, 'sp-closed'); - test.open = undefined; + const closed = oneEvent(overlayTrigger, 'sp-closed'); + overlayTrigger.open = undefined; await closed; - await nextFrame(); expect(el.open).to.be.false; expect(closeSpy.callCount).to.equal(1); }); it('opens and closes when element is recycled', async () => { const closeSpy = spy(); - const test = await styledFixture(longContent()); + const openedSpy = spy(); + const test = await styledFixture(html` +
openedSpy()}>${longContent()}
+ `); + const overlayTrigger = test.querySelector( + 'overlay-trigger' + ) as OverlayTrigger; const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper; el.addEventListener('close', () => closeSpy()); - await elementUpdated(el); - - const opened = oneEvent(test, 'sp-opened'); - test.open = 'click'; - await opened; + await waitUntil( + () => openedSpy.calledOnce, + 'click content projected to overlay', + { timeout: 2000 } + ); expect(el.open).to.be.true; - - const closed = oneEvent(test, 'sp-closed'); - test.open = undefined; + const closed = oneEvent(overlayTrigger, 'sp-closed'); + overlayTrigger.open = undefined; await closed; - await nextFrame(); expect(el.open).to.be.false; expect(closeSpy.callCount).to.equal(1); @@ -213,37 +219,6 @@ describe('Dialog Wrapper', () => { await elementUpdated(el); expect(el.open).to.be.false; }); - it('manages entry focus - dismissable', async () => { - const el = await styledFixture(wrapperDismissable()); - - await elementUpdated(el); - expect(el.open).to.be.true; - expect(document.activeElement !== el, 'no focused').to.be.true; - - const dialog = el.shadowRoot.querySelector('sp-dialog') as Dialog; - const dialogRoot = dialog.shadowRoot ? dialog.shadowRoot : dialog; - const dismissButton = dialogRoot.querySelector( - '.close-button' - ) as ActionButton; - - el.focus(); - await elementUpdated(el); - expect( - document.activeElement === el, - `focused generally, ${document.activeElement}` - ).to.be.true; - expect( - (dismissButton.getRootNode() as Document).activeElement !== - dismissButton, - `does not focus specifically, ${ - (dismissButton.getRootNode() as Document).activeElement - }` - ).to.be.true; - - dismissButton.click(); - await elementUpdated(el); - expect(el.open).to.be.false; - }); it('manages entry focus - buttons', async () => { const el = await styledFixture(wrapperButtons()); diff --git a/packages/dialog/test/dialog.test.ts b/packages/dialog/test/dialog.test.ts index 964832c8b2..d09d07243f 100644 --- a/packages/dialog/test/dialog.test.ts +++ b/packages/dialog/test/dialog.test.ts @@ -71,7 +71,6 @@ describe('Dialog', () => { const el = await fixture(html`

Disclaimer

-

Initial paragraph.

 `); @@ -82,8 +81,40 @@ describe('Dialog', () => { const paragraph = document.createElement('p'); paragraph.textContent = 'Added paragraph.'; - const target = el.querySelector('p') as HTMLParagraphElement; - target.insertAdjacentElement('beforebegin', paragraph); + el.querySelector('p')?.remove(); + el.insertAdjacentElement('beforeend', paragraph); + + // Slotchange time exists outside of the standard update lifecycle + await nextFrame(); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + + paragraph.querySelector('p')?.remove(); + + // Slotchange time exists outside of the standard update lifecycle + await nextFrame(); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + + el.insertAdjacentElement('beforeend', paragraph); + + // Slotchange time exists outside of the standard update lifecycle + await nextFrame(); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + + const heading = document.createElement('h2'); + heading.slot = 'heading'; + heading.textContent = 'New heading'; + + el.querySelector('h2')?.remove(); + el.insertAdjacentElement('afterbegin', heading); // Slotchange time exists outside of the standard update lifecycle await nextFrame(); diff --git a/packages/field-label/src/field-label.css b/packages/field-label/src/field-label.css index 71bb94a3cf..a29252e2dc 100644 --- a/packages/field-label/src/field-label.css +++ b/packages/field-label/src/field-label.css @@ -11,3 +11,7 @@ governing permissions and limitations under the License. */ @import url('./spectrum-field-label.css'); + +label { + display: inline-block; +} diff --git a/packages/menu/src/Menu.ts b/packages/menu/src/Menu.ts index 70eaa74cca..aea850902b 100644 --- a/packages/menu/src/Menu.ts +++ b/packages/menu/src/Menu.ts @@ -24,10 +24,8 @@ import { } from '@spectrum-web-components/base/src/decorators.js'; import { MenuItem } from './MenuItem.js'; -import type { - MenuItemAddedOrUpdatedEvent, - MenuItemRemovedEvent, -} from './MenuItem.js'; +import type { MenuItemAddedOrUpdatedEvent } from './MenuItem.js'; +import type { Overlay } from '@spectrum-web-components/overlay'; import menuStyles from './menu.css.js'; export interface MenuChildItem { @@ -66,7 +64,9 @@ export class Menu extends SizedMixin(SpectrumElement) { return [menuStyles]; } - public isSubmenu = false; + private get isSubmenu(): boolean { + return this.slot === 'submenu'; + } @property({ type: String, reflect: true }) public label = ''; @@ -114,9 +114,7 @@ export class Menu extends SizedMixin(SpectrumElement) { private updateCachedMenuItems(): MenuItem[] { this.cachedChildItems = []; - const slotElements = this.menuSlot - ? this.menuSlot.assignedElements({ flatten: true }) - : []; + const slotElements = this.menuSlot.assignedElements({ flatten: true }); for (const slotElement of slotElements) { const childMenuItems: MenuItem[] = slotElement instanceof MenuItem @@ -163,7 +161,7 @@ export class Menu extends SizedMixin(SpectrumElement) { /** * When a descendant `` element is added or updated it will dispatch - * this event to announce its presence in the DOM. During the capture phase the first + * this event to announce its presence in the DOM. During the CAPTURE phase the first * Menu based element that the event encounters will manage the focus state of the * dispatching `` element. * @param event @@ -171,11 +169,35 @@ export class Menu extends SizedMixin(SpectrumElement) { private onFocusableItemAddedOrUpdated( event: MenuItemAddedOrUpdatedEvent ): void { - if (event.item.menuData.focusRoot && !this.ignore) { + event.menuCascade.set(this, { + hadFocusRoot: !!event.item.menuData.focusRoot, + ancestorWithSelects: event.currentAncestorWithSelects, + }); + if (this.selects) { + event.currentAncestorWithSelects = this; + } + event.item.menuData.focusRoot = event.item.menuData.focusRoot || this; + } + + /** + * When a descendant `` element is added or updated it will dispatch + * this event to announce its presence in the DOM. During the BUBBLE phase the first + * Menu based element that the event encounters that does not inherit selection will + * manage the selection state of the dispatching `` element. + * @param event + */ + private onSelectableItemAddedOrUpdated( + event: MenuItemAddedOrUpdatedEvent + ): void { + const cascadeData = event.menuCascade.get(this); + /* c8 ignore next 1 */ + if (!cascadeData) return; + + event.item.menuData.parentMenu = event.item.menuData.parentMenu || this; + if (cascadeData.hadFocusRoot && !this.ignore) { // Only have one tab stop per Menu tree this.tabIndex = -1; } - event.focusRoot = this; this.addChildItem(event.item); if (this.selects === 'inherit') { @@ -191,7 +213,6 @@ export class Menu extends SizedMixin(SpectrumElement) { ? 'none' : ((this.getAttribute('role') || undefined) as RoleType); this.resolvedSelects = this.selects; - event.currentAncestorWithSelects = this; } else { this.resolvedRole = this.ignore ? 'none' @@ -199,27 +220,26 @@ export class Menu extends SizedMixin(SpectrumElement) { this.resolvedSelects = this.resolvedRole === 'none' ? 'ignore' : 'none'; } - } - /** - * When a descendant `` element is added or updated it will dispatch - * this event to announce its presence in the DOM. During the bubble phase the first - * Menu based element that the event encounters that does not inherit selection will - * manage the selection state of the dispatching `` element. - * @param event - */ - private onSelectableItemAddedOrUpdated( - event: MenuItemAddedOrUpdatedEvent - ): void { const selects = this.resolvedSelects === 'single' || this.resolvedSelects === 'multiple'; + event.item.menuData.cleanupSteps.push((item: MenuItem) => + this.removeChildItem(item) + ); if ( (selects || (!this.selects && this.resolvedSelects !== 'ignore')) && !event.item.menuData.selectionRoot ) { event.item.setRole(this.childRole); - event.selectionRoot = this; + event.item.menuData.selectionRoot = + event.item.menuData.selectionRoot || this; + if (event.item.selected) { + this.selectedItemsMap.set(event.item, true); + this.selectedItems = [...this.selectedItems, event.item]; + this.selected = [...this.selected, event.item.value]; + this.value = this.selected.join(this.valueSeparator); + } } } @@ -228,10 +248,10 @@ export class Menu extends SizedMixin(SpectrumElement) { this.handleItemsChanged(); } - private async removeChildItem(event: MenuItemRemovedEvent): Promise { - this.childItemSet.delete(event.item); + private async removeChildItem(item: MenuItem): Promise { + this.childItemSet.delete(item); this.cachedChildItems = undefined; - if (event.item.focused) { + if (item.focused) { this.handleItemsChanged(); await this.updateComplete; this.focus(); @@ -253,9 +273,11 @@ export class Menu extends SizedMixin(SpectrumElement) { } ); - this.addEventListener('sp-menu-item-removed', this.removeChildItem); - this.addEventListener('click', this.onClick); + this.addEventListener('click', this.handleClick); this.addEventListener('focusin', this.handleFocusin); + this.addEventListener('focusout', this.handleFocusout); + this.addEventListener('sp-opened', this.handleSubmenuOpened); + this.addEventListener('sp-closed', this.handleSubmenuClosed); } public override focus({ preventScroll }: FocusOptions = {}): void { @@ -275,13 +297,13 @@ export class Menu extends SizedMixin(SpectrumElement) { } this.focusMenuItemByOffset(0); super.focus({ preventScroll }); - const selectedItem = this.querySelector('[selected]'); + const selectedItem = this.selectedItems[0]; if (selectedItem && !preventScroll) { selectedItem.scrollIntoView({ block: 'nearest' }); } } - private onClick(event: Event): void { + private handleClick(event: Event): void { if (event.defaultPrevented) { return; } @@ -319,12 +341,11 @@ export class Menu extends SizedMixin(SpectrumElement) { } public handleFocusin(event: FocusEvent): void { - const isOrContainsRelatedTarget = elementIsOrContains( + const wasOrContainedRelatedTarget = elementIsOrContains( this, event.relatedTarget as Node ); if ( - isOrContainsRelatedTarget || this.childItems.some( (childItem) => childItem.menuData.focusRoot !== this ) @@ -337,7 +358,10 @@ export class Menu extends SizedMixin(SpectrumElement) { const selectionRoot = this.childItems[this.focusedItemIndex]?.menuData.selectionRoot || this; - if (activeElement !== selectionRoot || !isOrContainsRelatedTarget) { + if ( + activeElement !== selectionRoot || + (!wasOrContainedRelatedTarget && event.target !== this) + ) { selectionRoot.focus({ preventScroll: true }); if (activeElement && this.focusedItemIndex === 0) { const offset = this.childItems.findIndex( @@ -353,41 +377,85 @@ export class Menu extends SizedMixin(SpectrumElement) { public startListeningToKeyboard(): void { this.addEventListener('keydown', this.handleKeydown); - this.addEventListener('focusout', this.handleFocusout); } public handleFocusout(event: FocusEvent): void { if (elementIsOrContains(this, event.relatedTarget as Node)) { - (event.composedPath()[0] as MenuItem).focused = false; return; } this.stopListeningToKeyboard(); - if ( - event.target === this && - this.childItems.some( - (childItem) => childItem.menuData.focusRoot === this - ) - ) { - const focusedItem = this.childItems[this.focusedItemIndex]; - if (focusedItem) { - focusedItem.focused = false; - } - } + this.childItems.forEach((child) => (child.focused = false)); this.removeAttribute('aria-activedescendant'); } public stopListeningToKeyboard(): void { this.removeEventListener('keydown', this.handleKeydown); - this.removeEventListener('focusout', this.handleFocusout); } + private descendentOverlays = new Map(); + + protected handleDescendentOverlayOpened(event: Event): void { + const target = event.composedPath()[0] as MenuItem; + /* c8 ignore next 1 */ + if (!target.overlayElement) return; + this.descendentOverlays.set( + target.overlayElement, + target.overlayElement + ); + } + + protected handleDescendentOverlayClosed(event: Event): void { + const target = event.composedPath()[0] as MenuItem; + /* c8 ignore next 1 */ + if (!target.overlayElement) return; + this.descendentOverlays.delete(target.overlayElement); + } + + public handleSubmenuClosed = (event: Event): void => { + event.stopPropagation(); + const target = event.composedPath()[0] as Overlay; + target.dispatchEvent( + new Event('sp-menu-submenu-closed', { + bubbles: true, + composed: true, + }) + ); + }; + + public handleSubmenuOpened = (event: Event): void => { + event.stopPropagation(); + const target = event.composedPath()[0] as Overlay; + target.dispatchEvent( + new Event('sp-menu-submenu-opened', { + bubbles: true, + composed: true, + }) + ); + const focusedItem = this.childItems[this.focusedItemIndex]; + if (focusedItem) { + focusedItem.focused = false; + } + const openedItem = event + .composedPath() + .find((el) => this.childItemSet.has(el as MenuItem)); + /* c8 ignore next 1 */ + if (!openedItem) return; + const openedItemIndex = this.childItems.indexOf(openedItem as MenuItem); + this.focusedItemIndex = openedItemIndex; + this.focusInItemIndex = openedItemIndex; + }; + public async selectOrToggleItem(targetItem: MenuItem): Promise { const resolvedSelects = this.resolvedSelects; const oldSelectedItemsMap = new Map(this.selectedItemsMap); const oldSelected = this.selected.slice(); const oldSelectedItems = this.selectedItems.slice(); const oldValue = this.value; - this.childItems[this.focusedItemIndex].focused = false; + const focusedChild = this.childItems[this.focusedItemIndex]; + if (focusedChild) { + focusedChild.focused = false; + focusedChild.active = false; + } this.focusedItemIndex = this.childItems.indexOf(targetItem); this.forwardFocusVisibleToItem(targetItem); @@ -461,10 +529,12 @@ export class Menu extends SizedMixin(SpectrumElement) { return; } event.preventDefault(); + event.stopPropagation(); itemToFocus.scrollIntoView({ block: 'nearest' }); } - protected navigateBetweenRelatedMenus(code: string): void { + protected navigateBetweenRelatedMenus(event: KeyboardEvent): void { + const { code } = event; const shouldOpenSubmenu = (this.isLTR && code === 'ArrowRight') || (!this.isLTR && code === 'ArrowLeft'); @@ -472,30 +542,41 @@ export class Menu extends SizedMixin(SpectrumElement) { (this.isLTR && code === 'ArrowLeft') || (!this.isLTR && code === 'ArrowRight'); if (shouldOpenSubmenu) { + event.stopPropagation(); const lastFocusedItem = this.childItems[this.focusedItemIndex]; if (lastFocusedItem?.hasSubmenu) { // Remove focus while opening overlay from keyboard or the visible focus // will slip back to the first item in the menu. - this.blur(); lastFocusedItem.openOverlay(); } } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) { + event.stopPropagation(); this.dispatchEvent(new Event('close', { bubbles: true })); + this.updateSelectedItemIndex(); } } public handleKeydown(event: KeyboardEvent): void { + const isNotThisOrDirectChild = + event.target !== this && + this !== (event.target as HTMLElement).parentElement; + if (isNotThisOrDirectChild || event.defaultPrevented) { + return; + } + const lastFocusedItem = this.childItems[this.focusedItemIndex]; + if (lastFocusedItem) { + lastFocusedItem.focused = true; + } const { code } = event; if (code === 'Tab') { this.prepareToCleanUp(); return; } if (code === 'Space') { - const lastFocusedItem = this.childItems[this.focusedItemIndex]; if (lastFocusedItem?.hasSubmenu) { // Remove focus while opening overlay from keyboard or the visible focus // will slip back to the first item in the menu. - this.blur(); + // this.blur(); lastFocusedItem.openOverlay(); return; } @@ -508,13 +589,17 @@ export class Menu extends SizedMixin(SpectrumElement) { this.navigateWithinMenu(event); return; } - this.navigateBetweenRelatedMenus(code); + this.navigateBetweenRelatedMenus(event); } public focusMenuItemByOffset(offset: number): MenuItem { const step = offset || 1; const focusedItem = this.childItems[this.focusedItemIndex]; - focusedItem.focused = false; + if (focusedItem) { + focusedItem.focused = false; + // Remain active while a submenu is opened. + focusedItem.active = focusedItem.open; + } this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + offset) % this.childItems.length; @@ -551,6 +636,8 @@ export class Menu extends SizedMixin(SpectrumElement) { ); } + private _hasUpdatedSelectedItemIndex = false; + public updateSelectedItemIndex(): void { let firstOrFirstSelectedIndex = 0; const selectedItemsMap = new Map(); @@ -561,7 +648,11 @@ export class Menu extends SizedMixin(SpectrumElement) { itemIndex -= 1; const childItem = this.childItems[itemIndex]; if (childItem.menuData.selectionRoot === this) { - if (childItem.selected) { + if ( + childItem.selected || + (!this._hasUpdatedSelectedItemIndex && + this.selected.includes(childItem.value)) + ) { firstOrFirstSelectedIndex = itemIndex; selectedItemsMap.set(childItem, true); selected.unshift(childItem.value); @@ -594,25 +685,27 @@ export class Menu extends SizedMixin(SpectrumElement) { private handleItemsChanged(): void { this.cachedChildItems = undefined; if (!this._willUpdateItems) { - /* c8 ignore next 3 */ - let resolve = (): void => { - return; - }; - this.cacheUpdated = new Promise((res) => (resolve = res)); this._willUpdateItems = true; - // Debounce the update so we only update once - // if multiple items have changed - window.requestAnimationFrame(() => { - if (this.cachedChildItems === undefined) { - this.updateSelectedItemIndex(); - this.updateItemFocus(); - } - this._willUpdateItems = false; - resolve(); - }); + this.cacheUpdated = this.updateCache(); } } + private async updateCache(): Promise { + if (!this.hasUpdated) { + await Promise.all([ + new Promise((res) => requestAnimationFrame(() => res(true))), + this.updateComplete, + ]); + } else { + await new Promise((res) => requestAnimationFrame(() => res(true))); + } + if (this.cachedChildItems === undefined) { + this.updateSelectedItemIndex(); + this.updateItemFocus(); + } + this._willUpdateItems = false; + } + private updateItemFocus(): void { if (this.childItems.length == 0) { return; @@ -626,11 +719,24 @@ export class Menu extends SizedMixin(SpectrumElement) { } } + public closeDescendentOverlays(): void { + this.descendentOverlays.forEach((overlay) => { + overlay.open = false; + }); + this.descendentOverlays = new Map(); + } + private forwardFocusVisibleToItem(item: MenuItem): void { if (item.menuData.focusRoot !== this) { return; } - item.focused = this.hasVisibleFocusInTree(); + this.closeDescendentOverlays(); + const focused = + this.hasVisibleFocusInTree() || + !!this.childItems.find((child) => { + return child.hasVisibleFocusInTree(); + }); + item.focused = focused; this.setAttribute('aria-activedescendant', item.id); if ( item.menuData.selectionRoot && @@ -640,13 +746,34 @@ export class Menu extends SizedMixin(SpectrumElement) { } } - public override render(): TemplateResult { + private handleSlotchange({ + target, + }: Event & { target: HTMLSlotElement }): void { + const assignedElement = target.assignedElements({ + flatten: true, + }) as MenuItem[]; + if (this.childItems.length !== assignedElement.length) { + assignedElement.forEach((item) => { + if (typeof item.triggerUpdate !== 'undefined') { + item.triggerUpdate(); + } + }); + } + } + + protected renderMenuItemSlot(): TemplateResult { return html` - + `; } - private _notFirstUpdated = false; + public override render(): TemplateResult { + return this.renderMenuItemSlot(); + } protected override firstUpdated(changed: PropertyValues): void { super.firstUpdated(changed); @@ -671,17 +798,20 @@ export class Menu extends SizedMixin(SpectrumElement) { protected override updated(changes: PropertyValues): void { super.updated(changes); - if (changes.has('selects') && this._notFirstUpdated) { + if (changes.has('selects') && this.hasUpdated) { this.selectsChanged(); } - if (changes.has('label')) { + if ( + changes.has('label') && + (this.label || typeof changes.get('label') !== 'undefined') + ) { if (this.label) { this.setAttribute('aria-label', this.label); + /* c8 ignore next 3 */ } else { this.removeAttribute('aria-label'); } } - this._notFirstUpdated = true; } protected selectsChanged(): void { @@ -708,6 +838,10 @@ export class Menu extends SizedMixin(SpectrumElement) { protected childItemsUpdated!: Promise; protected cacheUpdated = Promise.resolve(); + /* c8 ignore next 3 */ + protected resolveCacheUpdated = (): void => { + return; + }; protected override async getUpdateComplete(): Promise { const complete = (await super.getUpdateComplete()) as boolean; diff --git a/packages/menu/src/MenuGroup.ts b/packages/menu/src/MenuGroup.ts index 63a265dc88..54fc12de7f 100644 --- a/packages/menu/src/MenuGroup.ts +++ b/packages/menu/src/MenuGroup.ts @@ -36,15 +36,7 @@ export class MenuGroup extends Menu { return [...super.styles, menuGroupStyles]; } - private static instances = 0; - - private headerId!: string; - - public constructor() { - super(); - MenuGroup.instances += 1; - this.headerId = `sp-menu-group-label-${MenuGroup.instances}`; - } + private headerId = ''; @queryAssignedNodes({ slot: 'header', @@ -75,6 +67,9 @@ export class MenuGroup extends Menu { this.headerElement.removeAttribute('id'); } if (headerElement) { + this.headerId = + this.headerId || + `sp-menu-group-label-${crypto.randomUUID().slice(0, 8)}`; const headerId = headerElement.id || this.headerId; if (!headerElement.id) { headerElement.id = headerId; @@ -92,9 +87,7 @@ export class MenuGroup extends Menu { - - - + ${this.renderMenuItemSlot()} `; } } diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts index 764dde38e6..f32ca208ff 100644 --- a/packages/menu/src/MenuItem.ts +++ b/packages/menu/src/MenuItem.ts @@ -30,15 +30,12 @@ import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; -import { openOverlay } from '@spectrum-web-components/overlay/src/loader.js'; -import { OverlayCloseEvent } from '@spectrum-web-components/overlay/src/overlay-events.js'; import menuItemStyles from './menu-item.css.js'; import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js'; import type { Menu } from './Menu.js'; -import type { OverlayOpenCloseDetail } from '@spectrum-web-components/overlay'; -import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js'; import { MutationController } from '@lit-labs/observers/mutation-controller.js'; +import type { Overlay } from 'overlay/src/Overlay.js'; /** * Duration during which a pointing device can leave an `` element @@ -46,84 +43,40 @@ import { MutationController } from '@lit-labs/observers/mutation-controller.js'; **/ const POINTERLEAVE_TIMEOUT = 100; -export class MenuItemRemovedEvent extends Event { - constructor() { - super('sp-menu-item-removed', { - bubbles: true, - composed: true, - }); - } - get item(): MenuItem { - return this._item; - } - _item!: MenuItem; - focused = false; - reset(item: MenuItem): void { - this._item = item; - } -} +type MenuCascadeItem = { + hadFocusRoot: boolean; + ancestorWithSelects?: HTMLElement; +}; export class MenuItemAddedOrUpdatedEvent extends Event { - constructor() { + constructor(item: MenuItem) { super('sp-menu-item-added-or-updated', { bubbles: true, composed: true, }); + this.clear(item); } - set focusRoot(root: Menu | undefined) { - this.item.menuData.focusRoot = this.item.menuData.focusRoot || root; - } - set selectionRoot(root: Menu) { - this.item.menuData.selectionRoot = - this.item.menuData.selectionRoot || root; - } - get item(): MenuItem { - return this._item; - } - _item!: MenuItem; - set currentAncestorWithSelects(ancestor: Menu | undefined) { - this._currentAncestorWithSelects = ancestor; - } - get currentAncestorWithSelects(): Menu | undefined { - return this._currentAncestorWithSelects; - } - _currentAncestorWithSelects?: Menu; - reset(item: MenuItem): void { + clear(item: MenuItem): void { this._item = item; - this._currentAncestorWithSelects = undefined; + this.currentAncestorWithSelects = undefined; item.menuData = { + cleanupSteps: [], focusRoot: undefined, selectionRoot: undefined, + parentMenu: undefined, }; + this.menuCascade = new WeakMap(); } + menuCascade = new WeakMap(); + get item(): MenuItem { + return this._item; + } + private _item!: MenuItem; + currentAncestorWithSelects?: Menu; } export type MenuItemChildren = { icon: Element[]; content: Node[] }; -let addOrUpdateEvent = new MenuItemAddedOrUpdatedEvent(); -let removeEvent = new MenuItemRemovedEvent(); -/** - * Code to cleanup these global events async in batches - */ -let addOrUpdateEventRafId = 0; -function resetAddOrUpdateEvent(): void { - if (addOrUpdateEventRafId === 0) { - addOrUpdateEventRafId = requestAnimationFrame(() => { - addOrUpdateEvent = new MenuItemAddedOrUpdatedEvent(); - addOrUpdateEventRafId = 0; - }); - } -} -let removeEventEventtRafId = 0; -function resetRemoveEvent(): void { - if (removeEventEventtRafId === 0) { - removeEventEventtRafId = requestAnimationFrame(() => { - removeEvent = new MenuItemRemovedEvent(); - removeEventEventtRafId = 0; - }); - } -} - /** * @element sp-menu-item * @@ -132,7 +85,6 @@ function resetRemoveEvent(): void { * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc. * @slot submenu - content placed in a submenu * @fires sp-menu-item-added - announces the item has been added so a parent menu can take ownerships - * @fires sp-menu-item-removed - announces when removed from the DOM so the parent menu can remove ownership and update selected state */ export class MenuItem extends LikeAnchor( ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]')) @@ -141,9 +93,9 @@ export class MenuItem extends LikeAnchor( return [menuItemStyles, checkmarkStyles, chevronStyles]; } - static instanceCount = 0; + abortControllerPointer!: AbortController; - private isInSubmenu = false; + abortControllerSubmenu!: AbortController; @property({ type: Boolean, reflect: true }) public active = false; @@ -186,6 +138,12 @@ export class MenuItem extends LikeAnchor( @property({ type: Boolean, reflect: true, attribute: 'has-submenu' }) public hasSubmenu = false; + @query('slot:not([name])') + contentSlot!: HTMLSlotElement; + + @query('slot[name="icon"]') + iconSlot!: HTMLSlotElement; + @property({ type: Boolean, reflect: true, @@ -199,6 +157,9 @@ export class MenuItem extends LikeAnchor( @query('.anchor') private anchorElement!: HTMLAnchorElement; + @query('sp-overlay') + public overlayElement!: Overlay; + public override get focusElement(): HTMLElement { return this; } @@ -211,24 +172,15 @@ export class MenuItem extends LikeAnchor( if (this._itemChildren) { return this._itemChildren; } - - const iconSlot = this.shadowRoot?.querySelector( - 'slot[name="icon"]' - ) as HTMLSlotElement; - const icon = !iconSlot - ? [] - : iconSlot.assignedElements().map((element) => { - const newElement = element.cloneNode(true) as HTMLElement; - newElement.removeAttribute('slot'); - newElement.classList.toggle('icon'); - return newElement; - }); - const contentSlot = this.shadowRoot?.querySelector( - 'slot:not([name])' - ) as HTMLSlotElement; - const content = !contentSlot - ? [] - : contentSlot.assignedNodes().map((node) => node.cloneNode(true)); + const icon = this.iconSlot.assignedElements().map((element) => { + const newElement = element.cloneNode(true) as HTMLElement; + newElement.removeAttribute('slot'); + newElement.classList.toggle('icon'); + return newElement; + }); + const content = this.contentSlot + .assignedNodes() + .map((node) => node.cloneNode(true)); this._itemChildren = { icon, content }; return this._itemChildren; @@ -238,8 +190,6 @@ export class MenuItem extends LikeAnchor( constructor() { super(); - this.proxyFocus = this.proxyFocus.bind(this); - this.addEventListener('click', this.handleClickCapture, { capture: true, }); @@ -256,7 +206,7 @@ export class MenuItem extends LikeAnchor( }); } - @property({ type: Boolean }) + @property({ type: Boolean, reflect: true }) public open = false; public override click(): void { @@ -280,9 +230,9 @@ export class MenuItem extends LikeAnchor( } } - private proxyFocus(): void { + private proxyFocus = (): void => { this.focus(); - } + }; private shouldProxyClick(): boolean { let handled = false; @@ -298,6 +248,54 @@ export class MenuItem extends LikeAnchor( this.triggerUpdate(); } + protected renderSubmenu(): TemplateResult { + const slot = html` + { + event.clear(event.item); + }, + capture: true, + }} + @focusin=${(event: Event) => event.stopPropagation()} + > + `; + if (!this.hasSubmenu) { + return slot; + } + import('@spectrum-web-components/overlay/sp-overlay.js'); + import('@spectrum-web-components/popover/sp-popover.js'); + return html` + event.stopPropagation()} + > + { + this.handleSubmenuChange(event); + this.open = false; + }} + @pointerenter=${this.handleSubmenuPointerenter} + @pointerleave=${this.handleSubmenuPointerleave} + @sp-menu-item-added-or-updated=${(event: Event) => + event.stopPropagation()} + > + ${slot} + + + + `; + } + protected override render(): TemplateResult { return html` ${this.selected @@ -325,21 +323,7 @@ export class MenuItem extends LikeAnchor( className: 'button anchor hidden', }) : html``} - - - ${this.hasSubmenu - ? html` - - ` - : html``} + ${this.renderSubmenu()} `; } @@ -347,51 +331,73 @@ export class MenuItem extends LikeAnchor( const assignedElements = event.target.assignedElements({ flatten: true, }); - this.hasSubmenu = this.open || !!assignedElements; + this.hasSubmenu = !!assignedElements.length; if (this.hasSubmenu) { this.setAttribute('aria-haspopup', 'true'); } } - private handleRemoveActive(event: Event): void { - if ( - (event.type === 'pointerleave' && this.hasSubmenu) || - this.hasSubmenu || - this.open - ) { + private handleRemoveActive(): void { + if (this.open) { return; } this.active = false; } - private handlePointerdown(): void { + private handlePointerdown(event: PointerEvent): void { this.active = true; + if (event.target === this && this.hasSubmenu && this.open) { + this.addEventListener('focus', this.handleSubmenuFocus, { + once: true, + }); + this.overlayElement.addEventListener( + 'beforetoggle', + this.handleBeforetoggle + ); + } } protected override firstUpdated(changes: PropertyValues): void { super.firstUpdated(changes); this.setAttribute('tabindex', '-1'); this.addEventListener('pointerdown', this.handlePointerdown); + this.addEventListener('pointerenter', this.closeOverlaysForRoot); if (!this.hasAttribute('id')) { - this.id = `sp-menu-item-${MenuItem.instanceCount++}`; + this.id = `sp-menu-item-${crypto.randomUUID().slice(0, 8)}`; } - this.addEventListener('pointerenter', this.closeOverlaysForRoot); } protected closeOverlaysForRoot(): void { if (this.open) return; - const overalyCloseEvent = new OverlayCloseEvent({ - root: this.menuData.focusRoot, - }); - this.dispatchEvent(overalyCloseEvent); + this.menuData.parentMenu?.closeDescendentOverlays(); } - public closeOverlay?: () => Promise; - - protected handleSubmenuClick(): void { + protected handleSubmenuClick(event: Event): void { + if (event.composedPath().includes(this.overlayElement)) { + return; + } this.openOverlay(); } + protected handleSubmenuFocus(): void { + requestAnimationFrame(() => { + // Wait till after `closeDescendentOverlays` has happened in Menu + // to reopen (keey open) the direct descendent of this Menu Item + this.overlayElement.open = this.open; + }); + } + + protected handleBeforetoggle = (event: Event): void => { + if ((event as Event & { newState: string }).newState === 'closed') { + this.open = true; + this.overlayElement.manuallyKeepOpen(); + this.overlayElement.removeEventListener( + 'beforetoggle', + this.handleBeforetoggle + ); + } + }; + protected handlePointerenter(): void { if (this.leaveTimeout) { clearTimeout(this.leaveTimeout); @@ -402,12 +408,13 @@ export class MenuItem extends LikeAnchor( } protected leaveTimeout?: ReturnType; + protected recentlyLeftChild = false; protected handlePointerleave(): void { - if (this.hasSubmenu && this.open) { + if (this.open && !this.recentlyLeftChild) { this.leaveTimeout = setTimeout(() => { delete this.leaveTimeout; - if (this.closeOverlay) this.closeOverlay(); + this.open = false; }, POINTERLEAVE_TIMEOUT); } } @@ -419,16 +426,36 @@ export class MenuItem extends LikeAnchor( * and the root of the tree to have their selection changes and * be closed. */ - protected handleSubmenuChange = (): void => { + protected handleSubmenuChange(event: Event): void { + event.stopPropagation(); this.menuData.selectionRoot?.selectOrToggleItem(this); - }; + } - protected handleSubmenuPointerenter = (): void => { - if (this.leaveTimeout) { - clearTimeout(this.leaveTimeout); - delete this.leaveTimeout; - } - }; + protected handleSubmenuPointerenter(): void { + this.recentlyLeftChild = true; + } + + protected async handleSubmenuPointerleave(): Promise { + requestAnimationFrame(() => { + this.recentlyLeftChild = false; + }); + } + + protected handleSubmenuOpen(event: Event): void { + this.focused = false; + const parentOverlay = event.composedPath().find((el) => { + return ( + el !== this.overlayElement && + (el as HTMLElement).localName === 'sp-overlay' + ); + }) as Overlay; + this.overlayElement.parentOverlayToForceClose = parentOverlay; + } + + protected cleanup(): void { + this.open = false; + this.active = false; + } public async openOverlay(): Promise { if (!this.hasSubmenu || this.open || this.disabled) { @@ -437,57 +464,9 @@ export class MenuItem extends LikeAnchor( this.open = true; this.active = true; this.setAttribute('aria-expanded', 'true'); - const submenu = ( - this.shadowRoot.querySelector( - 'slot[name="submenu"]' - ) as HTMLSlotElement - ).assignedElements()[0] as Menu; - submenu.addEventListener( - 'pointerenter', - this.handleSubmenuPointerenter - ); - submenu.addEventListener('change', this.handleSubmenuChange); - if (!submenu.id) { - submenu.setAttribute('id', `${this.id}-submenu`); - } - this.setAttribute('aria-controls', submenu.id); - const popover = document.createElement('sp-popover'); - const returnSubmenu = reparentChildren([submenu], popover, { - position: 'beforeend', - prepareCallback: (el) => { - const slotName = el.slot; - el.tabIndex = 0; - el.removeAttribute('slot'); - el.isSubmenu = true; - return (el) => { - el.tabIndex = -1; - el.slot = slotName; - el.isSubmenu = false; - }; - }, - }); - const closeOverlay = openOverlay(this, 'click', popover, { - placement: this.isLTR ? 'right-start' : 'left-start', - receivesFocus: 'auto', - root: this.menuData.focusRoot, - }); - const closeSubmenu = async (): Promise => { - this.setAttribute('aria-expanded', 'false'); - delete this.closeOverlay; - (await closeOverlay)(); - }; - this.closeOverlay = closeSubmenu; - const cleanup = (event: CustomEvent): void => { - event.stopPropagation(); - delete this.closeOverlay; - returnSubmenu(); - this.open = false; - this.active = false; - }; - this.addEventListener('sp-closed', cleanup as EventListener, { + this.addEventListener('sp-closed', this.cleanup, { once: true, }); - popover.addEventListener('change', closeSubmenu); } updateAriaSelected(): void { @@ -509,24 +488,37 @@ export class MenuItem extends LikeAnchor( protected override updated(changes: PropertyValues): void { super.updated(changes); - if (changes.has('label')) { + if ( + changes.has('label') && + (this.label || typeof changes.get('label') !== 'undefined') + ) { this.setAttribute('aria-label', this.label || ''); } - if (changes.has('active')) { + if ( + changes.has('active') && + (this.active || typeof changes.get('active') !== 'undefined') + ) { if (this.active) { - this.addEventListener('pointerup', this.handleRemoveActive); - this.addEventListener('pointerleave', this.handleRemoveActive); - this.addEventListener('pointercancel', this.handleRemoveActive); - } else { - this.removeEventListener('pointerup', this.handleRemoveActive); - this.removeEventListener( + this.menuData.selectionRoot?.closeDescendentOverlays(); + this.abortControllerPointer = new AbortController(); + const options = { signal: this.abortControllerPointer.signal }; + this.addEventListener( + 'pointerup', + this.handleRemoveActive, + options + ); + this.addEventListener( 'pointerleave', - this.handleRemoveActive + this.handleRemoveActive, + options ); - this.removeEventListener( + this.addEventListener( 'pointercancel', - this.handleRemoveActive + this.handleRemoveActive, + options ); + } else { + this.abortControllerPointer?.abort(); } } if (this.anchorElement) { @@ -536,72 +528,83 @@ export class MenuItem extends LikeAnchor( if (changes.has('selected')) { this.updateAriaSelected(); } - if (changes.has('hasSubmenu')) { + if ( + changes.has('hasSubmenu') && + (this.hasSubmenu || + typeof changes.get('hasSubmenu') !== 'undefined') + ) { if (this.hasSubmenu) { - this.addEventListener('click', this.handleSubmenuClick); - this.addEventListener('pointerenter', this.handlePointerenter); - this.addEventListener('pointerleave', this.handlePointerleave); - } else if (!this.closeOverlay) { - this.removeEventListener('click', this.handleSubmenuClick); - this.removeEventListener( + this.abortControllerSubmenu = new AbortController(); + const options = { signal: this.abortControllerSubmenu.signal }; + this.addEventListener( + 'click', + this.handleSubmenuClick, + options + ); + this.addEventListener( 'pointerenter', - this.handlePointerenter + this.handlePointerenter, + options ); - this.removeEventListener( + this.addEventListener( 'pointerleave', - this.handlePointerleave + this.handlePointerleave, + options + ); + this.addEventListener( + 'sp-opened', + this.handleSubmenuOpen, + options ); + } else { + this.abortControllerSubmenu?.abort(); } } } public override connectedCallback(): void { super.connectedCallback(); - this.isInSubmenu = !!this.closest('[slot="submenu"]'); - if (this.isInSubmenu) { - return; - } - addOrUpdateEvent.reset(this); - this.dispatchEvent(addOrUpdateEvent); - resetAddOrUpdateEvent(); - this._parentElement = this.parentElement as HTMLElement; + this.triggerUpdate(); } _parentElement!: HTMLElement; public override disconnectedCallback(): void { - if (!this.isInSubmenu && this._parentElement) { - removeEvent.reset(this); - this._parentElement.dispatchEvent(removeEvent); - resetRemoveEvent(); - } - this.isInSubmenu = false; - this._itemChildren = undefined; + this.menuData.cleanupSteps.forEach((removal) => removal(this)); super.disconnectedCallback(); } + private willDispatchUpdate = false; + public async triggerUpdate(): Promise { - if (this.isInSubmenu) { + if (this.willDispatchUpdate) { return; } + this.willDispatchUpdate = true; await new Promise((ready) => requestAnimationFrame(ready)); - addOrUpdateEvent.reset(this); - this.dispatchEvent(addOrUpdateEvent); - resetAddOrUpdateEvent(); + this.dispatchUpdate(); + } + + public dispatchUpdate(): void { + this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this)); + this.willDispatchUpdate = false; } public menuData: { focusRoot?: Menu; + parentMenu?: Menu; selectionRoot?: Menu; + cleanupSteps: ((item: MenuItem) => void)[]; } = { focusRoot: undefined, + parentMenu: undefined, selectionRoot: undefined, + cleanupSteps: [], }; } declare global { interface GlobalEventHandlersEventMap { 'sp-menu-item-added-or-updated': MenuItemAddedOrUpdatedEvent; - 'sp-menu-item-removed': MenuItemRemovedEvent; } } diff --git a/packages/menu/src/menu-item.css b/packages/menu/src/menu-item.css index 36778838cb..84d1e55015 100644 --- a/packages/menu/src/menu-item.css +++ b/packages/menu/src/menu-item.css @@ -45,3 +45,8 @@ governing permissions and limitations under the License. forced-color-adjust: none; } } + +::slotted([slot='submenu']) { + width: max-content; + max-width: 100%; +} diff --git a/packages/menu/src/menu.css b/packages/menu/src/menu.css index 884e9b220c..a2b1a41a48 100644 --- a/packages/menu/src/menu.css +++ b/packages/menu/src/menu.css @@ -28,3 +28,10 @@ governing permissions and limitations under the License. :host(:focus) { outline: none; } + +::slotted(*) { + /** + * Remove when Spectrum CSS supports this correctly + */ + flex-shrink: 0; +} diff --git a/packages/menu/src/spectrum-itemLabel.css b/packages/menu/src/spectrum-itemLabel.css index 98f59920a4..c583bfec6a 100644 --- a/packages/menu/src/spectrum-itemLabel.css +++ b/packages/menu/src/spectrum-itemLabel.css @@ -13,7 +13,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #label { flex: 1 1 auto; /* .spectrum-Menu-itemLabel */ - -webkit-hyphens: auto; hyphens: auto; line-height: var(--spectrum-listitem-texticon-label-line-height); overflow-wrap: break-word; @@ -22,6 +21,7 @@ governing permissions and limitations under the License. var(--spectrum-listitem-texticon-icon-gap) ); } + .spectrum-Menu-itemLabel--wrapping { overflow: hidden; text-overflow: ellipsis; /* .spectrum-Menu-itemLabel--wrapping */ diff --git a/packages/menu/stories/index.ts b/packages/menu/stories/index.ts index cc93046e38..bd4f8daa2a 100644 --- a/packages/menu/stories/index.ts +++ b/packages/menu/stories/index.ts @@ -11,6 +11,10 @@ governing permissions and limitations under the License. */ import { html, TemplateResult } from '@spectrum-web-components/base'; +import '@spectrum-web-components/menu/sp-menu.js'; +import '@spectrum-web-components/menu/sp-menu-divider.js'; +import '@spectrum-web-components/menu/sp-menu-item.js'; +import '@spectrum-web-components/popover/sp-popover.js'; export const MenuMarkup = ({ size = 'm' as 's' | 'm' | 'l' | 'xl', diff --git a/packages/menu/stories/submenu.stories.ts b/packages/menu/stories/submenu.stories.ts index 8be920bfad..3875660835 100644 --- a/packages/menu/stories/submenu.stories.ts +++ b/packages/menu/stories/submenu.stories.ts @@ -10,14 +10,14 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { html, render, TemplateResult } from '@spectrum-web-components/base'; +import { html, TemplateResult } from '@spectrum-web-components/base'; import '@spectrum-web-components/action-menu/sp-action-menu.js'; +import '@spectrum-web-components/menu/sp-menu.js'; import '@spectrum-web-components/menu/sp-menu-item.js'; import '@spectrum-web-components/menu/sp-menu-divider.js'; import '@spectrum-web-components/menu/sp-menu-group.js'; -import { openOverlay, VirtualTrigger } from '@spectrum-web-components/overlay'; -import type { Popover } from '@spectrum-web-components/popover'; +import { Overlay, VirtualTrigger } from '@spectrum-web-components/overlay'; import '@spectrum-web-components/popover/sp-popover.js'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js'; import type { ActionMenu } from '@spectrum-web-components/action-menu'; @@ -43,49 +43,65 @@ class SubmenuReady extends HTMLElement { }); } + menu!: ActionMenu; + submenu!: MenuItem; + submenuChild!: MenuItem; + async setup(): Promise { await nextFrame(); - const menu = document.querySelector(`sp-action-menu`) as ActionMenu; - menu.addEventListener('sp-opened', this.handleMenuOpened, { - once: true, - }); - menu.open = true; + this.menu = document.querySelector(`sp-action-menu`) as ActionMenu; + this.menu.addEventListener('sp-opened', this.handleMenuOpened); + this.menu.addEventListener( + 'sp-closed', + () => { + this.menu.removeEventListener( + 'sp-opened', + this.handleMenuOpened + ); + }, + { once: true } + ); + this.menu.open = true; } handleMenuOpened = async (event: Event): Promise => { + this.menu.removeEventListener('sp-opened', this.handleMenuOpened); await nextFrame(); await (event.target as ActionMenu).updateComplete; - const submenu = document.querySelector('#submenu-item-1') as MenuItem; - if (!submenu) { + this.submenu = document.querySelector('#submenu-item-1') as MenuItem; + if (!this.submenu) { return; } - submenu.addEventListener('sp-opened', this.handleSubmenuOpened, { - once: true, - }); - submenu.dispatchEvent( - new PointerEvent('pointerenter', { bubbles: true, composed: true }) - ); + + this.submenu.addEventListener('sp-opened', this.handleSubmenuOpened); + this.submenu.click(); }; handleSubmenuOpened = async (event: Event): Promise => { + this.submenu.removeEventListener('sp-opened', this.handleSubmenuOpened); await nextFrame(); await (event.target as MenuItem).updateComplete; - const submenu = document.querySelector('#submenu-item-2') as MenuItem; - if (!submenu) { + this.submenuChild = document.querySelector( + '#submenu-item-2' + ) as MenuItem; + if (!this.submenuChild) { return; } - submenu.addEventListener('sp-opened', this.handleSubmenuChildOpened, { - once: true, - }); - submenu.dispatchEvent( - new PointerEvent('pointerenter', { bubbles: true, composed: true }) + this.submenuChild.addEventListener( + 'sp-opened', + this.handleSubmenuChildOpened ); + this.submenuChild.click(); }; handleSubmenuChildOpened = async (event: Event): Promise => { + this.submenuChild.removeEventListener( + 'sp-opened', + this.handleSubmenuChildOpened + ); await nextFrame(); await (event.target as MenuItem).updateComplete; @@ -212,88 +228,16 @@ export const submenu = (): TemplateResult => { submenu.decorators = [submenuDecorator]; export const contextMenu = (): TemplateResult => { - const contextMenuTemplate = (): TemplateResult => html` - - event.target?.dispatchEvent( - new Event('close', { bubbles: true }) - )} - > - - - Options - - Copy - ⌘​S - - - Paste - ⌘​P - - - Cut - ⌘​X - - - - Select layer - - Ellipse 1 - Rectangle - - - - Group - ⌘​G - - - Unlock - ⌘​L - - - - Bring to front - ⇧​⌘​​] - - - Bring forward - ⌘​​] - - - Send backward - ⌘​​[ - - - Send to back - ⇧​⌘​​[ - - - - Delete - DEL - - - - - `; - const pointerenter = async (event: PointerEvent): Promise => { + const contextmenu = async (event: PointerEvent): Promise => { event.preventDefault(); - const trigger = event.target as HTMLElement; const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY); - const fragment = document.createDocumentFragment(); - render(contextMenuTemplate(), fragment); - const popover = fragment.querySelector('sp-popover') as Popover; + const overlay = document.querySelector('sp-overlay') as Overlay; clearValues(); - openOverlay(trigger, 'modal', popover, { - placement: 'right-start', - receivesFocus: 'auto', - virtualTrigger, - }); + overlay.triggerElement = virtualTrigger; + overlay.willPreventClose = true; + overlay.type = 'auto'; + overlay.placement = 'right-start'; + overlay.open = true; }; const getValueEls = (): { root: HTMLElement; first: HTMLElement } => { return { @@ -309,6 +253,9 @@ export const contextMenu = (): TemplateResult => { const handleRootChange = (event: Event & { target: ActionMenu }): void => { const valueEls = getValueEls(); valueEls.root.textContent = event.target.value; + event.target.parentElement?.dispatchEvent( + new Event('close', { bubbles: true }) + ); }; const handleFirstDescendantChange = ( event: Event & { target: Menu } @@ -326,7 +273,7 @@ export const contextMenu = (): TemplateResult => { --swc-menu-width: 200px; } -
+
Root value: @@ -336,5 +283,74 @@ export const contextMenu = (): TemplateResult => {
+ + + event.target?.dispatchEvent( + new Event('close', { bubbles: true }) + )} + > + + + Options + + Copy + ⌘​S + + + Paste + ⌘​P + + + Cut + ⌘​X + + + + Select layer + + Ellipse 1 + Rectangle + + + + Group + ⌘​G + + + Unlock + ⌘​L + + + + Bring to front + ⇧​⌘​​] + + + Bring forward + ⌘​​] + + + Send backward + ⌘​​[ + + + Send to back + ⇧​⌘​​[ + + + + Delete + DEL + + + + + `; }; diff --git a/packages/menu/test/menu-group.test.ts b/packages/menu/test/menu-group.test.ts index 74e03a9767..63e61f5e50 100644 --- a/packages/menu/test/menu-group.test.ts +++ b/packages/menu/test/menu-group.test.ts @@ -110,31 +110,46 @@ describe('Menu group', () => { html` First + Second + Multi1 + Multi2 + SubInherit1 + SubInherit2 + Single1 + Single2 + Inherit1 + Inherit2 + Inherit1 + Inherit2 + ` ); + // 1 & 3 should be menuitemradio + // 2 shouwl menuitemcheckbox + await waitUntil( () => managedItems(el).length === 4, `expected outer menu to manage 4 items (2 are inherited), got ${ @@ -257,6 +272,7 @@ describe('Menu group', () => { expect(el.selectedItems.length).to.equal(1); noneItem2.click(); + await elementUpdated(el); await elementUpdated(noneGroup); await elementUpdated(noneItem2); expect(inheritItem1.selected).to.be.true; @@ -268,8 +284,8 @@ describe('Menu group', () => { await elementUpdated(singleGroup); await elementUpdated(singleItem1); await elementUpdated(singleItem2); - expect(singleItem1.selected, 'first item not selected').to.be.false; expect(singleItem2.selected).to.be.true; + expect(singleItem1.selected, 'first item not selected').to.be.false; expect(inheritItem1.selected).to.be.true; expect(singleItem1.getAttribute('aria-checked')).to.equal('false'); expect(singleItem2.getAttribute('aria-checked')).to.equal('true'); diff --git a/packages/menu/test/menu-item.test.ts b/packages/menu/test/menu-item.test.ts index 95e66c875f..9b2f72d6e0 100644 --- a/packages/menu/test/menu-item.test.ts +++ b/packages/menu/test/menu-item.test.ts @@ -169,4 +169,33 @@ describe('Menu item', () => { expect(el.value).to.equal('Selected Text'); expect(el.hasAttribute('value')).to.be.false; }); + it('acualizes a submenu', async () => { + const test = await fixture( + html` + + Selected + + ` + ); + + const el = test.querySelector('sp-menu-item') as MenuItem; + + expect(el.hasSubmenu).to.be.false; + + const submenuItem = document.createElement('sp-menu-item'); + const submenu = document.createElement('sp-menu'); + submenuItem.textContent = 'Test Submenu Item'; + submenu.slot = 'submenu'; + submenu.append(submenuItem); + + el.append(submenu); + await elementUpdated(el); + + expect(el.hasSubmenu).to.be.true; + + submenu.remove(); + await elementUpdated(el); + + expect(el.hasSubmenu).to.be.false; + }); }); diff --git a/packages/menu/test/menu-selects.test.ts b/packages/menu/test/menu-selects.test.ts index c5d6ed8f7a..29b51c8a17 100644 --- a/packages/menu/test/menu-selects.test.ts +++ b/packages/menu/test/menu-selects.test.ts @@ -660,14 +660,17 @@ describe('Menu w/ groups [selects]', () => { await sendKeys({ press: 'ArrowUp' }); await elementUpdated(el); + let optionCount = 0; for (const option of options) { const parentElement = option.parentElement as Menu; expect(document.activeElement === parentElement, 'parent focused') .to.be.true; - expect(option.focused, 'option visually focused').to.be.true; + expect(option.focused, `option ${optionCount} visually focused`).to + .be.true; await sendKeys({ press: 'Space' }); expect(parentElement.value).to.equal(option.value); await sendKeys({ press: 'ArrowDown' }); + optionCount += 1; } }); }); diff --git a/packages/menu/test/menu.test.ts b/packages/menu/test/menu.test.ts index 7aa4b6bf39..8686f6ff12 100644 --- a/packages/menu/test/menu.test.ts +++ b/packages/menu/test/menu.test.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; +import '@spectrum-web-components/menu/sp-menu-divider.js'; import '@spectrum-web-components/menu/sp-menu-group.js'; +import '@spectrum-web-components/menu/sp-menu-item.js'; import { Menu, MenuItem } from '@spectrum-web-components/menu'; import { elementUpdated, @@ -377,10 +378,17 @@ describe('Menu', () => { const selectedItem = el.querySelector('.selected') as MenuItem; await elementUpdated(el); - + await nextFrame(); el.focus(); expect(document.activeElement).to.equal(el); + // Enforce visible focus + await sendKeys({ + press: 'ArrowUp', + }); + await sendKeys({ + press: 'ArrowDown', + }); expect(selectedItem.focused).to.be.true; selectedItem.remove(); diff --git a/packages/menu/test/submenu.test.ts b/packages/menu/test/submenu.test.ts index 79f726b002..0af4ce2bcb 100644 --- a/packages/menu/test/submenu.test.ts +++ b/packages/menu/test/submenu.test.ts @@ -14,6 +14,7 @@ import '@spectrum-web-components/menu/sp-menu.js'; import '@spectrum-web-components/menu/sp-menu-item.js'; import { Menu, MenuItem } from '@spectrum-web-components/menu'; import { + aTimeout, elementUpdated, expect, fixture, @@ -32,14 +33,46 @@ import { ActionMenu } from '@spectrum-web-components/action-menu'; import '@spectrum-web-components/action-menu/sp-action-menu.js'; import '@spectrum-web-components/menu/sp-menu-group.js'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js'; -import { ActiveOverlay } from '@spectrum-web-components/overlay'; async function styledFixture( story: TemplateResult, dir: 'ltr' | 'rtl' | 'auto' = 'ltr' ): Promise { const test = await fixture(html` - ${story} + + ${story} + + `); document.documentElement.dir = dir; return test.children[0] as T; @@ -80,6 +113,8 @@ describe('Submenu', () => { ); await elementUpdated(el); + await nextFrame(); + await nextFrame(); const rootItem = el.querySelector('.root') as MenuItem; const rootItemBoundingRect = rootItem.getBoundingClientRect(); expect(rootItem.open).to.be.false; @@ -118,11 +153,11 @@ describe('Submenu', () => { ], }); await closed; - await nextFrame(); - expect(rootChanged.calledWith('Has submenu'), 'root changed').to.be - .true; - expect(submenuChanged.calledWith('Two'), 'submenu changed').to.be.true; + expect(submenuChanged.withArgs('Two').calledOnce, 'submenu changed').to + .be.true; + expect(rootChanged.withArgs('Has submenu').calledOnce, 'root changed') + .to.be.true; }); it('closes deep tree on selection', async () => { const rootChanged = spy(); @@ -175,13 +210,14 @@ describe('Submenu', () => { ` ); - - await elementUpdated(el); const rootItem = el.querySelector('.root') as MenuItem; const rootItemBoundingRect = rootItem.getBoundingClientRect(); + const item2 = document.querySelector('.submenu-item-2') as MenuItem; + const itemC = document.querySelector('.sub-submenu-item-3') as MenuItem; expect(rootItem.open).to.be.false; - const opened = oneEvent(rootItem, 'sp-opened'); + let opened = oneEvent(rootItem, 'sp-opened'); + // Hover the root menu item to open a submenu sendMouse({ steps: [ { @@ -199,10 +235,10 @@ describe('Submenu', () => { expect(rootItem.open).to.be.true; - const item2 = document.querySelector('.submenu-item-2') as MenuItem; const item2BoundingRect = item2.getBoundingClientRect(); - let closed = oneEvent(item2, 'sp-opened'); + opened = oneEvent(item2, 'sp-opened'); + // Click the submenu item to open a submenu sendMouse({ steps: [ { @@ -214,28 +250,14 @@ describe('Submenu', () => { }, ], }); - await closed; - await nextFrame(); + await opened; expect(item2.open).to.be.true; - const itemC = document.querySelector('.sub-submenu-item-3') as MenuItem; - const itemCBoundingRect = itemC.getBoundingClientRect(); - - closed = oneEvent(rootItem, 'sp-closed'); - sendMouse({ - steps: [ - { - type: 'click', - position: [ - itemCBoundingRect.left + itemCBoundingRect.width / 2, - itemCBoundingRect.top + itemCBoundingRect.height / 2, - ], - }, - ], - }); + const closed = oneEvent(rootItem, 'sp-closed'); + // click to select and close + itemC.click(); await closed; - await nextFrame(); expect(rootChanged.calledWith('Has submenu'), 'root changed').to.be .true; @@ -261,12 +283,13 @@ describe('Submenu', () => { closeKey: 'ArrowRight' | 'ArrowLeft'; }[] ).map((testData) => { - it(`selects - keyboard: ${testData.dir}`, async () => { + it(`selects - keyboard: ${testData.dir}`, async function () { const rootChanged = spy(); const submenuChanged = spy(); const el = await styledFixture( html` { rootChanged(event.target.value); }} @@ -274,6 +297,7 @@ describe('Submenu', () => { Has submenu { submenuChanged(event.target.value); @@ -297,6 +321,8 @@ describe('Submenu', () => { await elementUpdated(el); const rootItem = el.querySelector('.root') as MenuItem; + const submenu = el.querySelector('[slot="submenu"]') as Menu; + const submenuItem = el.querySelector('.submenu-item-2') as MenuItem; expect(rootItem.open).to.be.false; el.focus(); await elementUpdated(el); @@ -308,6 +334,10 @@ describe('Submenu', () => { await opened; expect(rootItem.open).to.be.true; + expect( + submenu === document.activeElement, + `${document.activeElement?.id}` + ).to.be.true; let closed = oneEvent(rootItem, 'sp-closed'); sendKeys({ @@ -316,6 +346,10 @@ describe('Submenu', () => { await closed; expect(rootItem.open).to.be.false; + expect( + el === document.activeElement, + `${document.activeElement?.id}` + ).to.be.true; opened = oneEvent(rootItem, 'sp-opened'); sendKeys({ @@ -328,6 +362,13 @@ describe('Submenu', () => { await sendKeys({ press: 'ArrowDown', }); + await elementUpdated(submenuItem); + await nextFrame(); + await nextFrame(); + + expect(submenu.getAttribute('aria-activedescendant')).to.equal( + submenuItem.id + ); closed = oneEvent(rootItem, 'sp-closed'); sendKeys({ @@ -335,10 +376,13 @@ describe('Submenu', () => { }); await closed; - expect(rootChanged.calledWith('Has submenu'), 'root changed').to.be - .true; expect(submenuChanged.calledWith('Two'), 'submenu changed').to.be .true; + expect(rootChanged.called, 'root has changed').to.be.true; + expect( + rootChanged.calledWith('Has submenu'), + 'root specifically changed' + ).to.be.true; }); }); it('closes on `pointerleave`', async () => { @@ -491,7 +535,8 @@ describe('Submenu', () => { }); await closed; }); - it('stays open when mousing between menu item and submenu', async () => { + it('continues to open when mousing between menu item and submenu', async () => { + const clickSpy = spy(); const el = await styledFixture( html` @@ -501,7 +546,10 @@ describe('Submenu', () => { One - + clickSpy()} + > Two @@ -515,6 +563,7 @@ describe('Submenu', () => { await elementUpdated(el); const rootItem = el.querySelector('.root') as MenuItem; + const subItem = el.querySelector('.submenu-item-2') as MenuItem; const rootItemBoundingRect = rootItem.getBoundingClientRect(); expect(rootItem.open).to.be.false; @@ -532,26 +581,87 @@ describe('Submenu', () => { }, ], }); + await nextFrame(); + await nextFrame(); + const subItemBoundingRect = subItem.getBoundingClientRect(); await sendMouse({ steps: [ { type: 'move', position: [ - rootItemBoundingRect.left + - rootItemBoundingRect.width / 2, - rootItemBoundingRect.top + - rootItemBoundingRect.height * 2, + subItemBoundingRect.left + + subItemBoundingRect.width / 2, + subItemBoundingRect.top + + subItemBoundingRect.height / 2, ], }, ], }); + await opened; + expect(rootItem.open).to.be.true; + // Ensure it _doesn't_ get closed. + await aTimeout(150); + + expect(rootItem.open).to.be.true; + + const closed = oneEvent(rootItem, 'sp-closed'); + sendMouse({ + steps: [ + { + type: 'click', + position: [ + subItemBoundingRect.left + + subItemBoundingRect.width / 2, + subItemBoundingRect.top + + subItemBoundingRect.height / 2, + ], + }, + ], + }); + await closed; + + expect(clickSpy.callCount).to.equal(1); + }); + it('stays open when mousing between menu item and submenu', async () => { + const clickSpy = spy(); + const el = await styledFixture( + html` + + + Has submenu + + + One + + clickSpy()} + > + Two + + + Three + + + + + ` + ); + + await elementUpdated(el); + const rootItem = el.querySelector('.root') as MenuItem; + const subItem = el.querySelector('.submenu-item-2') as MenuItem; + const rootItemBoundingRect = rootItem.getBoundingClientRect(); + expect(rootItem.open).to.be.false; + + const opened = oneEvent(rootItem, 'sp-opened'); await sendMouse({ steps: [ { type: 'move', position: [ rootItemBoundingRect.left + - rootItemBoundingRect.width * 1.5, + rootItemBoundingRect.width / 2, rootItemBoundingRect.top + rootItemBoundingRect.height / 2, ], @@ -559,8 +669,47 @@ describe('Submenu', () => { ], }); await opened; + await nextFrame(); + await nextFrame(); + const subItemBoundingRect = subItem.getBoundingClientRect(); + expect(rootItem.open).to.be.true; + + await sendMouse({ + steps: [ + { + type: 'move', + position: [ + subItemBoundingRect.left + + subItemBoundingRect.width / 2, + subItemBoundingRect.top + + subItemBoundingRect.height / 2, + ], + }, + ], + }); + expect(rootItem.open).to.be.true; + // Ensure it _doesn't_ get closed. + await aTimeout(150); expect(rootItem.open).to.be.true; + + const closed = oneEvent(rootItem, 'sp-closed'); + sendMouse({ + steps: [ + { + type: 'click', + position: [ + subItemBoundingRect.left + + subItemBoundingRect.width / 2, + subItemBoundingRect.top + + subItemBoundingRect.height / 2, + ], + }, + ], + }); + await closed; + + expect(clickSpy.callCount).to.equal(1); }); it('not opens if disabled', async () => { const el = await styledFixture( @@ -611,15 +760,15 @@ describe('Submenu', () => { const el = await styledFixture(html` - + New York Bronx Brooklyn - + Ft. Greene - + S. Oxford St S. Portland Ave S. Elliot Pl @@ -631,7 +780,7 @@ describe('Submenu', () => { Manhattan - + SoHo Union Square @@ -648,9 +797,9 @@ describe('Submenu', () => { `); - const rootMenu1 = el.querySelector('#submenu-item-1') as Menu; - const rootMenu2 = el.querySelector('#submenu-item-3') as Menu; - const childMenu2 = el.querySelector('#submenu-item-2') as Menu; + const rootMenu1 = el.querySelector('#submenu-item-1') as MenuItem; + const rootMenu2 = el.querySelector('#submenu-item-3') as MenuItem; + const childMenu2 = el.querySelector('#submenu-item-2') as MenuItem; expect(el.open).to.be.false; let opened = oneEvent(el, 'sp-opened'); @@ -658,35 +807,29 @@ describe('Submenu', () => { await opened; expect(el.open).to.be.true; - let activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(1); opened = oneEvent(rootMenu1, 'sp-opened'); rootMenu1.dispatchEvent( new PointerEvent('pointerenter', { bubbles: true }) ); await opened; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(2); + expect(rootMenu1.open).to.be.true; opened = oneEvent(childMenu2, 'sp-opened'); childMenu2.dispatchEvent( new PointerEvent('pointerenter', { bubbles: true }) ); await opened; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(3); + expect(childMenu2.open).to.be.true; - const overlaysManaged = Promise.all([ - oneEvent(childMenu2, 'sp-closed'), - oneEvent(rootMenu1, 'sp-closed'), - oneEvent(rootMenu2, 'sp-opened'), - ]); + const childMenu2Closed = oneEvent(childMenu2, 'sp-closed'); + const rootMenu1Closed = oneEvent(rootMenu1, 'sp-closed'); + const rootMenu2Opened = oneEvent(rootMenu2, 'sp-opened'); rootMenu2.dispatchEvent( new PointerEvent('pointerenter', { bubbles: true }) ); - await overlaysManaged; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(2); + await childMenu2Closed; + await rootMenu1Closed; + await rootMenu2Opened; }); it('closes back to the first overlay without a `root` when clicking away', async () => { @@ -739,33 +882,31 @@ describe('Submenu', () => { await opened; expect(el.open).to.be.true; - let activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(1); opened = oneEvent(rootMenu1, 'sp-opened'); rootMenu1.dispatchEvent( new PointerEvent('pointerenter', { bubbles: true }) ); await opened; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(2); opened = oneEvent(childMenu2, 'sp-opened'); childMenu2.dispatchEvent( new PointerEvent('pointerenter', { bubbles: true }) ); await opened; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(3); - const closed = Promise.all([ oneEvent(childMenu2, 'sp-closed'), oneEvent(rootMenu1, 'sp-closed'), oneEvent(el, 'sp-closed'), ]); - document.body.click(); + sendMouse({ + steps: [ + { + type: 'click', + position: [600, 5], + }, + ], + }); await closed; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(0); }); it('closes decendent menus when Menu Item in ancestor without a submenu is pointerentered', async () => { @@ -808,23 +949,17 @@ describe('Submenu', () => { await opened; expect(el.open).to.be.true; - let activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(1); opened = oneEvent(rootMenu, 'sp-opened'); rootMenu.dispatchEvent( new PointerEvent('pointerenter', { bubbles: true }) ); await opened; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(2); const closed = oneEvent(rootMenu, 'sp-closed'); noSubmenu.dispatchEvent( new PointerEvent('pointerenter', { bubbles: true }) ); await closed; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(1); }); it('closes decendent menus when Menu Item in ancestor is clicked', async () => { @@ -869,6 +1004,7 @@ describe('Submenu', () => { `); + await nextFrame(); const rootMenu1 = el.querySelector('#submenu-item-1') as MenuItem; const childMenu2 = el.querySelector('#submenu-item-2') as MenuItem; @@ -880,35 +1016,41 @@ describe('Submenu', () => { await opened; expect(el.open).to.be.true; - let activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(1); opened = oneEvent(rootMenu1, 'sp-opened'); rootMenu1.dispatchEvent( new PointerEvent('pointerenter', { bubbles: true }) ); await opened; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(2); opened = oneEvent(childMenu2, 'sp-opened'); childMenu2.dispatchEvent( new PointerEvent('pointerenter', { bubbles: true }) ); await opened; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(3); const closed = Promise.all([ oneEvent(childMenu2, 'sp-closed'), oneEvent(rootMenu1, 'sp-closed'), oneEvent(el, 'sp-closed'), ]); - ancestorItem.click(); + const rect = ancestorItem.getBoundingClientRect(); + await sendMouse({ + steps: [ + { + type: 'click', + position: [ + rect.left + rect.width / 2, + rect.top + rect.height / 2, + ], + }, + ], + }); await closed; - activeOverlays = document.querySelectorAll('active-overlay'); - expect(activeOverlays.length).to.equal(0); }); it('cleans up submenus that close before they are "open"', async () => { + if ('showPopover' in document.createElement('div')) { + return; + } await sendMouse({ steps: [ { @@ -960,7 +1102,6 @@ describe('Submenu', () => { const rootItemBoundingRect1 = rootItem1.getBoundingClientRect(); const rootItemBoundingRect2 = rootItem2.getBoundingClientRect(); - let activeOverlay!: ActiveOverlay | null; // Open the first submenu await sendMouse({ @@ -1018,6 +1159,12 @@ describe('Submenu', () => { }, ], }); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); const closed = oneEvent(rootItem2, 'sp-closed'); // Close the second submenu await sendMouse({ @@ -1028,22 +1175,13 @@ describe('Submenu', () => { rootItemBoundingRect2.left + rootItemBoundingRect2.width / 2, rootItemBoundingRect2.top + - rootItemBoundingRect2.top + - rootItemBoundingRect2.height / 2, + rootItemBoundingRect2.height * 2, ], }, ], }); - activeOverlay = document.querySelector( - 'active-overlay' - ) as ActiveOverlay; - expect(activeOverlay).to.not.be.null; await closed; - activeOverlay = document.querySelector( - 'active-overlay' - ) as ActiveOverlay; - expect(activeOverlay).to.be.null; expect(rootItem1.open, 'finally closed 1').to.be.false; expect(rootItem2.open, 'finally closed 2').to.be.false; }); diff --git a/packages/modal/src/modal.css b/packages/modal/src/modal.css index f0373dce3f..80d53491b1 100644 --- a/packages/modal/src/modal.css +++ b/packages/modal/src/modal.css @@ -20,3 +20,7 @@ governing permissions and limitations under the License. height: 100dvh; } + +.modal { + overflow: visible; +} diff --git a/packages/overlay/README.md b/packages/overlay/README.md index 71e9828035..89a593b442 100644 --- a/packages/overlay/README.md +++ b/packages/overlay/README.md @@ -1,6 +1,6 @@ ## Description -Overlays in Spectrum Web Components are created via the `Overlay` class system, which prepares an "overlay stack" that can manage the deployment of one or more overlays onto a page. Whether it's needed for transient content like a tooltip, for extended interactions like selecting a value from a picker, or for blocking content like a modal, the imperative APIs outlined below or the declarative APIs delivered by `` should cover your overlay delivery needs. +An `` element is used to decorate content that you would like to present to your visitors as "overlaid" on the rest of the application. This includes dialogs (modal and not), pickers, tooltips, context menus, et al. ### Usage @@ -11,190 +11,307 @@ Overlays in Spectrum Web Components are created via the `Overlay` class system, yarn add @spectrum-web-components/overlay ``` -Import the `Overlay` class to leverage its capabilities within your application or custom element: +Import the side effectful registration of `` as follows: -```js -import { Overlay } from '@spectrum-web-components/overlay'; +``` +import '@spectrum-web-components/overlay/sp-overlay.js'; ``` -Primarily, this class gives you access to the `open` method that will allow you to open an overlay: +When looking to leverage the `Overlay` base class as a type and/or for extension purposes, do so via: -```js -Overlay.open( - (owner: HTMLElement), // the element to open the overlay in reference to, "trigger" - (interaction: TriggerInteractions), // the type of interaction type that opened the overlay - (overlayElement: HTMLElement), // the element that will be projected into the overlay, "content" - (options: OverlayOptions) // options to customize the overlay -); ``` - -`Overlay.open()` is an asynchronous method that returns a function for closing the overlay, so it is common to leverage this functionality like the following: - -```js -(async () => { - const trigger = document.querySelector('#trigger'); - const interaction = 'click'; - const content = document.querySelector('#content'); - const options = { - offset: 0, - placement: 'bottom', - }; - const closeOverlay = await Overlay.open( - trigger, - interaction, - content, - options - ); -})(); +import { + Overlay +} from '@spectrum-web-components/overlay'; ``` -## Types +## Example + +By leveraging the `trigger` attribute to pass an ID reference to another element with in the same DOM tree, your overlay will be positioned in relation to this element. When the ID reference is followed by an `@` symbol and interaction type, like `click`, `hover`, or `longpress`, the overlay will bind itself to the referenced element via the DOM events associated with that interaction. For example, the `` below has an id of `trigger`, and the `` is provided the `trigger` attribute with the value `trigger@click`. This creates an association between the overlay and the `` that opens the overlay when the button is clicked. -### TriggerInteractions +```html +Overlay Trigger + + + +

Clicking opens this popover...

+

But, it really could be anything. Really.

+ + + +``` -This outlines the user experience that is to be delivered through the process of opening and closing an overlay. +### Action bar +```html + + + + + + + + + + + + + + + Hover + + + + + + + + + + + + + + + + + + Hover + + + + + + + + + + + + + + + + + + Hover + + + + + + + + + + + + + + + + + ``` -type TriggerInteractions = - | 'click' - | 'custom', - | 'hover' - | 'inline' - | 'modal' - | 'replace'; + +## API + +```ts + ``` -`click` will open an overlay that will close immediately on the next click that is not on an element within the overlay. +### API value interactions -`custom` is less opinionated and allows for some customization of the process from the outside. +When a `triggerElement` is present, either through an ID reference established via the `trigger` attribute or by directly setting the `triggerElement` property, a chain on configuration begins: -`hover` will close the overlay as soon as the pointer leaves the trigger to which the overlay is connected. +- **if a `triggerInteraction` is available**, either through the `id@interaction` IDL on the `trigger` attribute or directly setting the `triggerInteraction` property, the `` will be bound to the resolved `triggerElement` via the `triggerInteraction` provided +- **if a `placement` is available** when the `` is `open` and displaying its contents, those contents will be positioned relative to the `triggerElement` as per that `placement` + - **if an `offset` is also available** the `` will distance itself from the `triggerElement` in accordance with the value of the `offset` + - **if you have a `placement` but not a `triggerElement`** the `` will not be positioned due to their being nothing for the `plaement` to reference when so doing +- **if no `placement` is available** the content will not be placed with the expectation that the content itself or the consuming application will handle placement of the overlaid content. This is commonly what will happen for `type="modal"` and `type="page"` overlays as they are likely meant to cover the entire screen, whether visibly (via an ``, an element that includes one, or similar) or figuratively (as when modal content is not delivered with a backdrop or scrim). -`inline` places the overlay after the trigger but before the next element in the logical tab order. This means the `shift + tab` keyboard stroke will return to the trigger. +### Events -`modal` manages the overlay like a modal and will trap the tab order within its contents only. +When fully open the `` element will dispatch the `sp-opened` event, and when fully closed the `sp-closed` event will be dispatched. "Fully" in this context means that all CSS transitions that have dispatched `transitionrun` events on the direct children of the `` element have successfully dispatched their `transitionend` or `transitioncancel` event. Keep in mind the following: -`replace` will position the overlay directly in the position of the trigger in the logical tab order. This means the `shift + tab` keyboard stroke will return the focusable element immediately prior to the trigger. +- `transition*` events bubble; this means that while transition events on light DOM content of those direct children will be heard, those events will not be taken into account +- `transition*` events are not composed; this means that transition events on shadow DOM content of the direct children will not propagate to a level in the DOM where they can be heard -### OverlayOptions +This means that in both cases, if the transition is meant to be a part of the opening or closing of the overlay in question you will need to redispatch the `transitionrun`, `transitionend`, and `transitioncancel` events from that transition from the closest direct child of the ``. -``` -type OverlayOptions = { - delayed?: boolean; - placement?: Placement; - offset?: number; - receivesFocus?: 'auto'; - notImmediatelyClosable?: boolean; -} -``` +## Styling -`delayed` allows for the overlay to open the overlay with warmup/cooldown behaviors as described at https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance +`` element will use the `` element or `popover` attribute to project your content onto the top-layer of the browser, without being moved in the DOM tree. That means that you can style your overlay content with whatever techniques you are already leveraging to style the content that doesn't get overlaid. This means standard CSS selectors, CSS Custom Properties, and CSS Parts applied in your parent context will always apply to your overlaid content. -`placement` outlines where the overlay system should attempt to position the overlay in relation to the trigger. When the layout of the page and/or current scroll positioning prevents the successful placement of the content in this way, the `placement` will be automatically applied as the value best suited for those conditions. Placements available include: `"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"`. +## Top Layer over Complex CSS -`offset` defines the distance of the overlay content from the trigger, measured in pixels. +There are some complex CSS values that have not yet been covered by the positioning API that the `` element leverages to associate overlaid content with their trigger elements. In specific, properties like `filter`, when applied to a trigger element within which lives the related content to be overlaid, are not currently supported by the relationship created herein. If support for this is something that you and the work you are addressing would require, we'd love to hear from you in [an issue](https://github.com/adobe/spectrum-web-components/issues). We'd be particularly interested in speaking with you if you were interested in contributing support/testing to ensure this capability for all consumers of the library. -`receivesFocus` tells the overlay stack to throw focus into the overlay after it has opened. +## Fallback support -`notImmediatelyClosable` prevents immediate clicks from closing the overlay. If you find that a trigger event is immediately overridden with a subsequent click (for instance, a `focus` trigger that should be closed on `click`), set `notImmediatelyClosable: true` to disregard clicks that coincide with the opening trigger. +While the [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) is widely supported by browsers, the [`popover` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover) is still quite new. When leveraged in browsers that do not yet support the `popover` attribute, there may be additional intervention required to ensure your content is delivered to your visitors as expected. -### Events +### Complex layered -The work to both open and close an overlay is asynchronous. This asynchrony is surfaced into the application via DOM events dispatched from the `trigger` element of your overlay. An `sp-opened` event will be dispatched once the overlay has finished opening, and an `sp-closed` event will be dispatched once the overlay has finished closing. In both cases, the dispatched event will include a `detail` property with an `interaction: TriggerInteractions` key to support associating the event/overlay with its originating `interaction`. +When an overlay is placed within a page with complex layering, the content therein can fall behind other content in the `z-index` stack. The following example is somewhat contrived but, imagine a toolbar next to a properties panel. If the toolbar has a lower `z-index` than the properties panel, any overlaid content (tooltips, etc.) within that toolbar will display underneath any content in the properties panel with which it may share pixels. -## Example +```html +
+
+ Trigger + + + I can be partially blocked when [popover] is not available + + +
+
+
+ +``` + +Properly managed `z-index` values will support working around this issue while browsers work to adopt the `popover` attribute. In this demo, you can achieve the same output by sharing one `z-index` between the various pieces of content, removing `z-index` values altogether, or raising the `.complex-layered-holder` element to a higher `z-index` than the `.complex-layered-blocker` element. + +### Contained + +[CSS Containment](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) gives a developer direct control over how the internals of one element affect the paint and layout of the internals of other elements on the same page. While leveraging some of its values can offer performance gains, they can interrupt the delivery of your overlaid content. ```html - - Click me for a 5 second overlay! - - - -

Demo

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris - augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas - diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper - viverra nam libero justo laoreet. Enim ut tellus elementum sagittis - vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur - libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. - Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a - diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. - Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis. - - +
+ Trigger + + + I can be blocked when [popover] is not available + + +
+ ``` -## Styling +You could just _remove_ the `contain` rule. But, if you are not OK with simply removing the `contain` value, you still have options. If you would like to continue to leverage `contain`, you can place your "contained" content separately from your overlaid content, like so: -When an overlay is opened from within a styled DOM scope as created by an `` element, this scope will be resolved and recreated with in the `` element that is created to host the overlaid content directly in the ``. By default, the generated `` element will be supplied with settings of the scope from which the overlay is triggered, including any "app" centric CSS Custom Properties that might be applied via `Theme.registerThemeFragment('app', 'app', themeFragment)` therein. In the case that you have set CSS Custom Properties for the scope created by an `` element via other methods, you can specify that those values should also be applied to overlay content using the `theme` part on the `` element via the `active-overlay::part(theme) { /* styles */ }` selector. +```html +
+ Trigger +
+ + I can be blocked when [popover] is not available + + +``` -## Advanced Usage +`` accepts an ID reference via the `trigger` attribute to relate it to interactions and positioning in the DOM. To fulfill this reference the two elements need to be in the same DOM tree. However, `` alternatively accepts a `triggerElement` _property_ that opens even more flexibility in addressing this situation. -When working with the DOM-based APIs of custom elements, it is sometimes preferred to project content into an overlay from a different shadow root (eg projecting a single-slotted element into the overlay). To ensure that the content can be marshalled through any number of `` elements which are addressed into subsequent `` elements, be sure to use the `flatten: true` option when querying `slot.asignedNodes()`: +### Clip pathed -```js -const trigger = shadowRoot.querySelector('#trigger'); -const slot = shadowRoot.querySelector('slot'); -const interaction = 'click'; -const content = slot - .assignedNodes({ flatten: true }) - .find((node) => node instanceof HTMLElement); -const options = { - offset: 0, - placement: 'bottom', -}; -const closeOverlay = await Overlay.open(trigger, interaction, content, options); +`clip-path` can also restrict how content in an element is surfaced at paint time. When overlaid content should display outside of the `clip-path`, without the `popover` attribute, that content could be _clipped_. + +```html +
+ Trigger + + + I can be blocked when [popover] is not available + + +
+ ``` -Other times, you may want to compose content from multiple shadow roots into a single overlay. This is a pattern seen in the `` element: its `` light DOM child is wrapped by its `` shadow DOM child before being projected into an overlay. What follows is a more trivial example, where content in the light DOM of an element is injected into an element in the shadow DOM of the same element and then projected into an overlay. Notice the added work here of setting a comment node into the light DOM as a placeholder for the "stolen" content, and then swapping that content back into the light DOM when the overlay is closed. - -```js -const trigger = this.shadowRoot.querySelector('#trigger'); -const outterContent = this.shadowRoot.querySelector('#outter-content'); -const innerContent = this.querySelector('#inner-content'); -const innerContentParent = - innerContent.parentElement || innerContent.getRootNode(); -const placeholder = document.createComment('placeholder for inner content'); -innerContentParent.replaceChild(placeholder, innerContent); -outterContent.append(innerContent); -const interaction = 'click'; -const options = { - offset: 0, - placement: 'bottom', -}; -const closeOverlayPromise = Overlay.open( - trigger, - interaction, - outterContent, - options -); -const closeOverlay = function () { - closeOverlayPromise.then((close) => close()); - innerContentParent.replaceChild(innerContent, placeholder); -}; +Here, again, working with your content needs (whether or not you want to leverage `clip-path`) or DOM structure (not colocating clipped and non-clipped content) will allow you to avoid this issue: + +```html +
+ Trigger +
+ + I can be blocked when [popover] is not available + + ``` diff --git a/packages/overlay/exports.json b/packages/overlay/exports.json index 97d68b88da..3fcf3c9b2b 100644 --- a/packages/overlay/exports.json +++ b/packages/overlay/exports.json @@ -2,5 +2,6 @@ "./src/*": "./src/*", "./active-overlay.js": "./active-overlay.js", "./overlay-trigger.js": "./overlay-trigger.js", - "./sync/overlay-trigger.js": "./sync/overlay-trigger.js" + "./sync/overlay-trigger.js": "./sync/overlay-trigger.js", + "./sp-overlay.js": "./sp-overlay.js" } diff --git a/packages/overlay/imperative-api.md b/packages/overlay/imperative-api.md new file mode 100644 index 0000000000..932921b0c8 --- /dev/null +++ b/packages/overlay/imperative-api.md @@ -0,0 +1,95 @@ +## Description + +While an `` element is the recommended entry point to the Spectrum Web Components Overlay API, you can also interact with this set of features via an imperative API, `Overlay.open`. + +### Usage + +[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/overlay?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/overlay) +[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/overlay?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/overlay) + +``` +yarn add @spectrum-web-components/overlay +``` + +Import the `Overlay` class to leverage its capabilities within your application or custom element: + +```js +import { Overlay } from '@spectrum-web-components/overlay'; +``` + +Primarily, this class gives you access to the `open` method that will allow you to open an overlay: + +```js +Overlay.open( + (overlayElement: HTMLElement), // the element that will be projected into the overlay, "content", + (options?: OverlayOptions) +); +``` + +`Overlay.open()` is an asynchronous method that returns an `` element that wraps the `HTMLElement` provided as the `overlayElement`. While this process will set the `` element to `open`, consumers of this API will need to choose where to append this element to the DOM in order for the content to be made available in the browser. + +```js +(async () => { + const content = document.querySelector('#content'); + const options = { + offset: 0, + placement: 'bottom', + trigger: document.querySelector('#trigger'), + type: 'auto', + }; + const overlay = await Overlay.open(content, options); + document.body.append(overlay); +})(); +``` + +Keep in mind that a changing DOM tree is likely to alter the relationship between existing content. Without proper care this can negatively effect the CSS that you have applied to existing content. DOM events and DOM selection methods can also perform differently than expected as the tree shape changes. + +## OverlayOptions + +When leveraging `Overlay.open()`, you can provide an optional second argument of `OverlayOptions`, with the following type: + +```ts +type OverlayOptions = { + delayed?: boolean; + notImmediatelyCloseable?: boolean; + offset?: number | [number, number]; + placement?: Placement; + receivesFocus?: 'auto' | 'true' | 'false'; + trigger?: HTMLElement | VirtualTrigger; + type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual'; +}; +``` + +### delayed + +An Overlay that is `delayed` will wait until a warm-up period of 1000ms has completed before opening. Once the warmup period has completed, all subsequent Overlays will open immediately. When no Overlays are opened, a cooldown period of 1000ms will begin. Once the cooldown has completed, the next Overlay to be opened will be subject to the warm-up period if provided that option. + +### notImmediatelyCloseable + +When an Overlay is `notImmediatelyCloseable` that means that the first interaction that would lead to the closure of the Overlay in question will be ignored. This is useful when working with non-"click" mouse interactions, like `contextmenu`, where the trigger event (e.g. `contextmenu`) occurs _before_ an event that would close said overlay (e.g. `pointerup`). + +### offset + +The `offset` property accepts either a single number, to define the offset of the Overlay along the main axis from the trigger, or 2-tuple, to define the offset along the main axis and the cross axis. This option has no effect when there is no trigger element. + +### placement + +A `placement` of `"auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"` will instruct the Overlay where to place itself in relationship to the trigger element. + +### receivesFocus + +Some Overlays will always be passed focus (e.g. modal or page Overlays). When this is not true, the `receivesFocus` option will inform the API whether to attempt to pass focus into the Overlay once it is open. `'true'` will pass focus, `'false'` will not (when possible), and `"auto"` (the default), will make a decision based on the `type` of the Overlay. + +### trigger + +The `trigger` option accepts an `HTMLElement` or a `VirtualTrigger` from which to position the Overlay. + +### type + +The `type` of an Overlay outlines a number of things about the interaction model within which is works. + +- `'modal'` Overlays are opened with the `showModal()` method on a `` element, which causes the Overlay to accept focus and trap the tab stop within the content of said Overlay. +- `'page'` Overlays will act in a similar manner to a `'modal'` Overlay, however they will not be allowed to close via the "light dismiss" algorithm (e.g. the Escape key). +- `'hint'` Overlays are much like tooltips so they are not just ephemeral, but they are delivered primarily as a visual helper and exist outside of the tab order. In this way, be sure _not_ to place interactive content within this type of Overlay. +- `'auto'` Overlays provide a place for content that is ephemeral _and_ interactive. These Overlays can accept focus but will close when losing that focus, or when interacting with other parts of the page. +- `'manual'` Overlays act much like `"auto"` Overlays, but do not close when losing focus or interacting with other parts of the page. When a `"manual"` Overlay is at the top of the "overlay stack", it will still respond to the Escape key and close. diff --git a/packages/overlay/overlay-trigger.md b/packages/overlay/overlay-trigger.md index 883286c4bf..4583c04024 100644 --- a/packages/overlay/overlay-trigger.md +++ b/packages/overlay/overlay-trigger.md @@ -117,79 +117,6 @@ The delivery of hover content can be customized via the `placement` attribute. H ``` -## Styling - -Content that is thrown into an overlay (e.g. `[slot="*-content"]`) will be moved out of the CSS scope created by its parent `` and other related elements within the same DOM/shadow tree. In this way styling rules that rely on that scope will not travel with the content into its overlay context. In order to ensure that your overlay content is styled as you would like you will need to bind those styles by applying them inline, including a ` - This content is delivered with a style element defining its styles. -
- -``` - -**Custom Element** - -```html - - Trigger Element - - This content is delivered as its own custom element. - - - -``` - ## Accessibility When using an `` element, it is important to be sure the that content you project into `slot="trigger"` is "interactive". This means that an element within that branch of DOM will be able to receive focus, and said element will appropriately convert keyboard interactions to `click` events, similar to what you'd find with `Anchors`, ``, etc. You can find further reading on the subject of accessible keyboard interactions at [https://www.w3.org/WAI/WCAG21/Understanding/keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard). diff --git a/packages/overlay/package.json b/packages/overlay/package.json index 09a9f59046..70244a6a01 100644 --- a/packages/overlay/package.json +++ b/packages/overlay/package.json @@ -25,19 +25,46 @@ "default": "./src/index.js" }, "./package.json": "./package.json", - "./src/ActiveOverlay.js": { - "development": "./src/ActiveOverlay.dev.js", - "default": "./src/ActiveOverlay.js" + "./src/AbstractOverlay.js": { + "development": "./src/AbstractOverlay.dev.js", + "default": "./src/AbstractOverlay.js" + }, + "./src/Overlay.js": { + "development": "./src/Overlay.dev.js", + "default": "./src/Overlay.js" + }, + "./src/OverlayDialog.js": { + "development": "./src/OverlayDialog.dev.js", + "default": "./src/OverlayDialog.js" + }, + "./src/OverlayNoPopover.js": { + "development": "./src/OverlayNoPopover.dev.js", + "default": "./src/OverlayNoPopover.js" + }, + "./src/OverlayPopover.js": { + "development": "./src/OverlayPopover.dev.js", + "default": "./src/OverlayPopover.js" + }, + "./src/OverlayStack.js": { + "development": "./src/OverlayStack.dev.js", + "default": "./src/OverlayStack.js" }, "./src/OverlayTrigger.js": { "development": "./src/OverlayTrigger.dev.js", "default": "./src/OverlayTrigger.js" }, + "./src/PlacementController.js": { + "development": "./src/PlacementController.dev.js", + "default": "./src/PlacementController.js" + }, "./src/VirtualTrigger.js": { "development": "./src/VirtualTrigger.dev.js", "default": "./src/VirtualTrigger.js" }, - "./src/active-overlay.css.js": "./src/active-overlay.css.js", + "./src/fullSizePlugin.js": { + "development": "./src/fullSizePlugin.dev.js", + "default": "./src/fullSizePlugin.js" + }, "./src/index.js": { "development": "./src/index.dev.js", "default": "./src/index.js" @@ -50,10 +77,6 @@ "development": "./src/overlay-events.dev.js", "default": "./src/overlay-events.js" }, - "./src/overlay-stack.js": { - "development": "./src/overlay-stack.dev.js", - "default": "./src/overlay-stack.js" - }, "./src/overlay-timer.js": { "development": "./src/overlay-timer.dev.js", "default": "./src/overlay-timer.js" @@ -63,13 +86,10 @@ "development": "./src/overlay-types.dev.js", "default": "./src/overlay-types.js" }, - "./src/overlay-utils.js": { - "development": "./src/overlay-utils.dev.js", - "default": "./src/overlay-utils.js" - }, - "./src/overlay.js": { - "development": "./src/overlay.dev.js", - "default": "./src/overlay.js" + "./src/overlay.css.js": "./src/overlay.css.js", + "./src/topLayerOverTransforms.js": { + "development": "./src/topLayerOverTransforms.dev.js", + "default": "./src/topLayerOverTransforms.js" }, "./active-overlay.js": { "development": "./active-overlay.dev.js", @@ -82,6 +102,10 @@ "./sync/overlay-trigger.js": { "development": "./sync/overlay-trigger.dev.js", "default": "./sync/overlay-trigger.js" + }, + "./sp-overlay.js": { + "development": "./sp-overlay.dev.js", + "default": "./sp-overlay.js" } }, "scripts": { @@ -102,9 +126,11 @@ "lit-html" ], "dependencies": { - "@floating-ui/dom": "^1.2.0", + "@floating-ui/dom": "^1.5.1", + "@floating-ui/utils": "^0.1.1", "@spectrum-web-components/action-button": "^0.36.0", "@spectrum-web-components/base": "^0.36.0", + "@spectrum-web-components/reactive-controllers": "^0.36.0", "@spectrum-web-components/shared": "^0.36.0", "@spectrum-web-components/theme": "^0.36.0" }, @@ -113,6 +139,7 @@ "sideEffects": [ "./active-overlay.js", "./overlay-trigger.js", + "./sp-overlay.js", "./sync/overlay-trigger.js", "./stories/overlay-story-components.js", "./**/*.dev.js" diff --git a/packages/overlay/active-overlay.ts b/packages/overlay/sp-overlay.ts similarity index 78% rename from packages/overlay/active-overlay.ts rename to packages/overlay/sp-overlay.ts index 6b8f3a93ee..bc0f0ae390 100644 --- a/packages/overlay/active-overlay.ts +++ b/packages/overlay/sp-overlay.ts @@ -1,5 +1,5 @@ /* -Copyright 2020 Adobe. All rights reserved. +Copyright 2023 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 @@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; -import { ActiveOverlay } from './src/ActiveOverlay.js'; +import { Overlay } from './src/Overlay.js'; -defineElement('active-overlay', ActiveOverlay); +defineElement('sp-overlay', Overlay); declare global { interface HTMLElementTagNameMap { - 'active-overlay': ActiveOverlay; + 'sp-overlay': Overlay; } } diff --git a/packages/overlay/src/AbstractOverlay.ts b/packages/overlay/src/AbstractOverlay.ts new file mode 100644 index 0000000000..bd09f80280 --- /dev/null +++ b/packages/overlay/src/AbstractOverlay.ts @@ -0,0 +1,305 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { SpectrumElement } from '@spectrum-web-components/base'; +import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js'; + +import type { + OpenableElement, + OverlayOptions, + OverlayOptionsV1, + OverlayState, + OverlayTypes, + TriggerInteractionsV1, +} from './overlay-types.js'; +import { Overlay } from './Overlay.js'; +import type { VirtualTrigger } from './VirtualTrigger.js'; +import { OverlayTimer } from './overlay-timer.js'; +import { PlacementController } from './PlacementController.js'; + +export const overlayTimer = new OverlayTimer(); + +export const noop = (): void => { + return; +}; + +export class BeforetoggleClosedEvent extends Event { + currentState = 'open'; + newState = 'closed'; + constructor() { + super('beforetoggle', { + bubbles: false, + composed: false, + }); + } +} + +export class BeforetoggleOpenEvent extends Event { + currentState = 'closed'; + newState = 'open'; + constructor() { + super('beforetoggle', { + bubbles: false, + composed: false, + }); + } +} + +/** + * Apply a "transitionend" listener to an element that may not transition but + * guarantee the callback will be fired either way. + * + * @param el {HTMLElement} - Target of the "transition" listeners. + * @param action {Function} - Method to trigger the "transition". + * @param cb {Function} - Callback to trigger when the "transition" has ended. + */ +export const guaranteedAllTransitionend = ( + el: HTMLElement, + action: () => void, + cb: () => void +): void => { + const abortController = new AbortController(); + const runningTransitions = new Map(); + const cleanup = (): void => { + abortController.abort(); + cb(); + }; + let guarantee2: number; + let guarantee3: number; + // WebKit fires `transitionrun` a little earlier, the multiple guarantees here + // allow WebKit to be caught, but doesn't remove the animation listener until + // after it would have fired in Chromium. + const guarantee1 = requestAnimationFrame(() => { + guarantee2 = requestAnimationFrame(() => { + guarantee3 = requestAnimationFrame(() => { + cleanup(); + }); + }); + }); + const handleTransitionend = (event: TransitionEvent): void => { + if (event.target !== el) { + return; + } + runningTransitions.set( + event.propertyName, + (runningTransitions.get(event.propertyName) as number) - 1 + ); + if (!runningTransitions.get(event.propertyName)) { + runningTransitions.delete(event.propertyName); + } + if (runningTransitions.size === 0) { + cleanup(); + } + }; + const handleTransitionrun = (event: TransitionEvent): void => { + if (event.target !== el) { + return; + } + if (!runningTransitions.has(event.propertyName)) { + runningTransitions.set(event.propertyName, 0); + } + runningTransitions.set( + event.propertyName, + (runningTransitions.get(event.propertyName) as number) + 1 + ); + cancelAnimationFrame(guarantee1); + cancelAnimationFrame(guarantee2); + cancelAnimationFrame(guarantee3); + }; + el.addEventListener('transitionrun', handleTransitionrun, { + signal: abortController.signal, + }); + el.addEventListener('transitionend', handleTransitionend, { + signal: abortController.signal, + }); + el.addEventListener('transitioncancel', handleTransitionend, { + signal: abortController.signal, + }); + action(); +}; + +export function nextFrame(): Promise { + return new Promise((res) => requestAnimationFrame(() => res())); +} + +export function forcePaint(): void { + // force the browser to paint + document.body.offsetHeight; +} + +export class AbstractOverlay extends SpectrumElement { + protected async applyFocus( + _targetOpenState: boolean, + _focusEl: HTMLElement | null + ): Promise { + return; + } + delayed!: boolean; + dialogEl!: HTMLDialogElement & { + showPopover(): void; + hidePopover(): void; + }; + dispose = noop; + protected async ensureOnDOM(_targetOpenState: boolean): Promise { + return; + } + elements!: OpenableElement[]; + protected async makeTransition( + _targetOpenState: boolean + ): Promise { + return null; + } + protected async manageDelay(_targetOpenState: boolean): Promise { + return; + } + protected async manageDialogOpen(): Promise { + return; + } + protected async managePopoverOpen(): Promise { + return; + } + protected managePosition(): void { + return; + } + get open(): boolean { + return false; + } + set open(_open: boolean) { + return; + } + protected placementController!: PlacementController; + receivesFocus!: 'true' | 'false' | 'auto'; + get state(): OverlayState { + return 'closed'; + } + set state(_state: OverlayState) { + return; + } + protected _state!: OverlayState; + triggerElement!: HTMLElement | VirtualTrigger | null; + type!: OverlayTypes; + + public manuallyKeepOpen(): void { + return; + } + + public static update(): void { + const overlayUpdateEvent = new CustomEvent('sp-update-overlays', { + bubbles: true, + composed: true, + cancelable: true, + }); + document.dispatchEvent(overlayUpdateEvent); + } + + public static async open( + trigger: HTMLElement, + interaction: TriggerInteractionsV1, + content: HTMLElement, + optionsV1: OverlayOptionsV1 + ): Promise<() => void>; + public static async open( + content: HTMLElement, + options?: OverlayOptions + ): Promise; + public static async open( + triggerOrContent: HTMLElement, + interactionOrOptions: + | TriggerInteractionsV1 + | OverlayOptions + | undefined, + content?: HTMLElement, + optionsV1?: OverlayOptionsV1 + ): Promise void)> { + const v2 = arguments.length === 2; + const overlayContent = content || triggerOrContent; + const overlay = new Overlay(); + let restored = false; + overlay.dispose = () => { + overlay.addEventListener('sp-closed', () => { + if (!restored) { + restoreContent(); + restored = true; + } + requestAnimationFrame(() => { + overlay.remove(); + }); + }); + overlay.open = false; + overlay.dispose = noop; + }; + /** + * Since content must exist in an , we need a way to get it there. + * The best & most-direct way is to declaratively use an element, + * but for imperative users, we'll reparent content into an overlay that we've created for them. + **/ + const restoreContent = reparentChildren([overlayContent], overlay, { + position: 'beforeend', + prepareCallback: (el) => { + // Ensure that content to be overlaid is no longer targetted to a specific `slot`. + // This allow for it to be visible in the overlaid context. + const slot = el.slot; + el.removeAttribute('slot'); + return () => { + el.slot = slot; + }; + }, + }); + + const v1 = !v2 && overlayContent && optionsV1; + if (v1) { + if (window.__swc.DEBUG) { + window.__swc.warn( + overlay, + `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`, + 'https://opensource.adobe.com/spectrum-web-components/components/overlay/', + { level: 'deprecation' } + ); + } + const trigger = triggerOrContent; + const interaction = interactionOrOptions; + const options = optionsV1; + overlay.delayed = + options.delayed || overlayContent.hasAttribute('delayed'); + overlay.receivesFocus = options.receivesFocus ?? 'auto'; + overlay.triggerElement = options.virtualTrigger || trigger; + overlay.type = + interaction === 'modal' + ? 'modal' + : interaction === 'hover' + ? 'hint' + : 'auto'; + overlay.offset = options.offset ?? 6; + overlay.placement = options.placement; + overlay.willPreventClose = !!options.notImmediatelyClosable; + trigger.insertAdjacentElement('afterend', overlay); + await overlay.updateComplete; + overlay.open = true; + return overlay.dispose; + } + + const options = interactionOrOptions as OverlayOptions; + overlay.append(overlayContent); + overlay.delayed = + options.delayed || overlayContent.hasAttribute('delayed'); + overlay.receivesFocus = options.receivesFocus ?? 'auto'; + overlay.triggerElement = options.trigger || null; + overlay.type = options.type || 'modal'; + overlay.offset = options.offset ?? 6; + overlay.placement = options.placement; + overlay.willPreventClose = !!options.notImmediatelyClosable; + overlay.updateComplete.then(() => { + // Do we want to "open" this path, or leave that to the consumer? + overlay.open = true; + }); + return overlay; + } +} diff --git a/packages/overlay/src/ActiveOverlay.ts b/packages/overlay/src/ActiveOverlay.ts deleted file mode 100644 index 22335e1591..0000000000 --- a/packages/overlay/src/ActiveOverlay.ts +++ /dev/null @@ -1,668 +0,0 @@ -/* -Copyright 2020 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - CSSResultArray, - html, - SpectrumElement, - TemplateResult, -} from '@spectrum-web-components/base'; -import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; -import { property } from '@spectrum-web-components/base/src/decorators.js'; -import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js'; -import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js'; -import type { - Color, - Scale, - ThemeVariant, -} from '@spectrum-web-components/theme/src/Theme.js'; -import styles from './active-overlay.css.js'; -import { parentOverlayOf } from './overlay-utils.js'; -import { - OverlayOpenCloseDetail, - OverlayOpenDetail, - Placement, - TriggerInteractions, -} from './overlay-types.js'; -import type { VirtualTrigger } from './VirtualTrigger.js'; -import { - arrow, - autoUpdate, - computePosition, - flip, - Placement as FloatingUIPlacement, - offset, - shift, - size, -} from '@floating-ui/dom'; - -export interface PositionResult { - arrowOffsetLeft: number; - arrowOffsetTop: number; - maxHeight: number; - placement: string; - positionLeft: number; - positionTop: number; -} - -type OverlayStateType = 'idle' | 'active' | 'hiding' | 'dispose' | 'disposed'; -type ContentAnimation = 'sp-overlay-fade-in' | 'sp-overlay-fade-out'; - -const stateMachine: { - initial: OverlayStateType; - states: { - [stateName: string]: { - on: { - [transitionName: string]: OverlayStateType; - }; - }; - }; -} = { - initial: 'idle', - states: { - idle: { - on: { - active: 'active', - }, - }, - active: { - on: { - hiding: 'hiding', - idle: 'idle', - }, - }, - hiding: { - on: { - dispose: 'dispose', - }, - }, - dispose: { - on: { - disposed: 'disposed', - }, - }, - disposed: { - on: {}, - }, - }, -}; - -const stateTransition = ( - state?: OverlayStateType, - event?: string -): OverlayStateType => { - if (!state) return stateMachine.initial; - /* c8 ignore next */ - if (!event) return state; - return stateMachine.states[state].on[event] || state; -}; - -const getFallbackPlacements = ( - placement: FloatingUIPlacement -): FloatingUIPlacement[] => { - const fallbacks: Record = { - left: ['right', 'bottom', 'top'], - 'left-start': ['right-start', 'bottom', 'top'], - 'left-end': ['right-end', 'bottom', 'top'], - right: ['left', 'bottom', 'top'], - 'right-start': ['left-start', 'bottom', 'top'], - 'right-end': ['left-end', 'bottom', 'top'], - top: ['bottom', 'left', 'right'], - 'top-start': ['bottom-start', 'left', 'right'], - 'top-end': ['bottom-end', 'left', 'right'], - bottom: ['top', 'left', 'right'], - 'bottom-start': ['top-start', 'left', 'right'], - 'bottom-end': ['top-end', 'left', 'right'], - }; - return fallbacks[placement] ?? [placement]; -}; - -/** - * @element active-overlay - * - * @slot - content to display in the overlay - */ -export class ActiveOverlay extends SpectrumElement { - public overlayContent!: HTMLElement; - public overlayContentTip?: HTMLElement; - public trigger!: HTMLElement; - public root?: HTMLElement; - public virtualTrigger?: VirtualTrigger; - private cleanup?: () => void; - - protected contentAnimationPromise: Promise = Promise.resolve(true); - protected resolveContentAnimationPromise = (): void => { - return; - }; - - @property() - public _state = stateTransition(); - public get state(): OverlayStateType { - return this._state; - } - public set state(state: OverlayStateType) { - const nextState = stateTransition(this.state, state); - if (nextState === this.state) { - return; - } - this._state = nextState; - if (this.state === 'active' || this.state === 'hiding') { - this.setAttribute('state', this.state); - } else { - this.removeAttribute('state'); - } - } - - @property({ reflect: true, type: Boolean }) - public animating = false; - - @property({ reflect: true }) - public placement?: Placement; - @property({ attribute: false }) - public theme: { - color?: Color; - scale?: Scale; - lang?: string; - theme?: ThemeVariant; - } = {}; - @property({ attribute: false }) - public receivesFocus?: 'auto'; - - public tabbingAway = false; - private originalPlacement?: Placement; - private restoreContent?: () => Element[]; - - public override async focus(): Promise { - const firstFocusable = firstFocusableIn(this); - if (firstFocusable) { - if ((firstFocusable as SpectrumElement).updateComplete) { - await firstFocusable.updateComplete; - } - const activeElement = (this.getRootNode() as Document) - .activeElement; - if (activeElement === this || !this.contains(activeElement)) { - firstFocusable.focus(); - } - /* c8 ignore next 3 */ - } else { - super.focus(); - } - this.removeAttribute('tabindex'); - } - - private get hasTheme(): boolean { - return !!this.theme.color || !!this.theme.scale || !!this.theme.lang; - } - - public offset = 6; - public skidding = 0; - public interaction: TriggerInteractions = 'hover'; - private positionAnimationFrame = 0; - - private timeout?: number; - - public static override get styles(): CSSResultArray { - return [styles]; - } - - public constructor() { - super(); - this.stealOverlayContentPromise = new Promise( - (res) => (this.stealOverlayContentResolver = res) - ); - } - - private _modalRoot?: ActiveOverlay; - - public get hasModalRoot(): boolean { - return !!this._modalRoot; - } - - public feature(): void { - // eslint-disable-next-line @spectrum-web-components/document-active-element - if (!this.contains(document.activeElement)) { - this.tabIndex = -1; - } - const parentOverlay = parentOverlayOf(this.trigger); - const parentIsModal = parentOverlay && parentOverlay.slot === 'open'; - if (parentIsModal) { - this._modalRoot = parentOverlay._modalRoot || parentOverlay; - } - // If an overlay it triggered from within a "modal" overlay, it needs to continue - // to act like one to get treated correctly in regards to tab trapping. - if (this.interaction === 'modal' || this._modalRoot) { - this.slot = 'open'; - if (this.interaction === 'modal') { - this.setAttribute('aria-modal', 'true'); - } - // If this isn't a modal root, walk up the overlays to the next modal root - // and "feature" each on of the intervening overlays. - if (this._modalRoot) { - parentOverlay?.feature(); - } - } - } - - public obscure( - nextOverlayInteraction: TriggerInteractions - ): ActiveOverlay | undefined { - if (this.slot && nextOverlayInteraction === 'modal') { - this.removeAttribute('slot'); - this.removeAttribute('aria-modal'); - // Obscure upto and including the next modal root. - if (this.interaction !== 'modal') { - const parentOverlay = parentOverlayOf(this.trigger); - this._modalRoot = parentOverlay?.obscure( - nextOverlayInteraction - ); - return this._modalRoot; - } - return this; - } - return undefined; - } - - public override async willUpdate(): Promise { - if (this.hasUpdated) return; - - /* c8 ignore next */ - if (!this.overlayContent || !this.trigger) return; - - this.stealOverlayContent( - this.overlayContent as HTMLElement & { placement: Placement } - ); - - this.state = 'active'; - - this.feature(); - if (this.placement && this.placement !== 'none') { - await this.updateOverlayPosition(); - document.addEventListener( - 'sp-update-overlays', - this.resetOverlayPosition - ); - } - if (this.placement && this.placement !== 'none') { - this.contentAnimationPromise = - this.applyContentAnimation('sp-overlay-fade-in'); - } - } - - public async openCallback( - lifecycleCallback: () => Promise | void - ): Promise { - await this.updateComplete; - if (this.receivesFocus) { - await this.focus(); - } - - await lifecycleCallback(); - - this.trigger.dispatchEvent( - new CustomEvent('sp-opened', { - bubbles: true, - composed: true, - cancelable: true, - detail: { - interaction: this.interaction, - }, - }) - ); - } - - private open(openDetail: OverlayOpenDetail): void { - this.extractDetail(openDetail); - } - - private extractDetail(detail: OverlayOpenDetail): void { - this.overlayContent = detail.content; - this.overlayContentTip = detail.contentTip; - this.trigger = detail.trigger; - this.virtualTrigger = detail.virtualTrigger; - this.placement = detail.placement; - this.offset = detail.offset; - this.skidding = detail.skidding || 0; - this.interaction = detail.interaction; - this.theme = detail.theme; - this.receivesFocus = detail.receivesFocus; - this.root = detail.root; - } - - public dispose(): void { - /* c8 ignore next */ - if (this.state !== 'dispose') return; - - /* c8 ignore next 4 */ - if (this.timeout) { - clearTimeout(this.timeout); - delete this.timeout; - } - - this.trigger.removeEventListener( - 'keydown', - this.handleInlineTriggerKeydown - ); - - this.returnOverlayContent(); - this.state = 'disposed'; - - if (this.willNotifyClosed) { - this.overlayContent.dispatchEvent(new Event('sp-overlay-closed')); - this.willNotifyClosed = false; - } - - if (this.cleanup) { - this.cleanup(); - } - } - - private stealOverlayContent( - element: HTMLElement & { placement: Placement } - ): void { - this.originalPlacement = element.getAttribute('placement') as Placement; - this.restoreContent = reparentChildren([element], this, { - position: 'beforeend', - prepareCallback: (el) => { - const slotName = el.slot; - const placement = el.placement; - el.removeAttribute('slot'); - return (el) => { - el.slot = slotName; - el.placement = placement; - }; - }, - }); - this.stealOverlayContentResolver(); - } - - private willNotifyClosed = false; - - private returnOverlayContent(): void { - /* c8 ignore next */ - if (!this.restoreContent) return; - - const [element] = this.restoreContent(); - this.restoreContent = undefined; - this.willNotifyClosed = true; - - if (this.originalPlacement) { - element.setAttribute('placement', this.originalPlacement); - delete this.originalPlacement; - } - } - - private initialHeight: number | undefined; - private isConstrained = false; - - public async placeOverlay(): Promise { - if (!this.placement || this.placement === 'none') { - return; - } - - this.cleanup = autoUpdate( - this.virtualTrigger || this.trigger, - this, - this.updateOverlayPosition, - { - elementResize: false, - } - ); - } - - public updateOverlayPosition = (): void => { - if (this.interaction !== 'modal' && this.cleanup) { - this.dispatchEvent(new Event('close')); - return; - } - this.setOverlayPosition(); - }; - - public resetOverlayPosition = (): void => { - this.style.removeProperty('max-height'); - this.style.removeProperty('height'); - this.initialHeight = undefined; - this.isConstrained = false; - // force paint - this.offsetHeight; - this.setOverlayPosition(); - }; - - public setOverlayPosition = async (): Promise => { - if (!this.placement || this.placement === 'none') { - return; - } - await (document.fonts ? document.fonts.ready : Promise.resolve()); - - function roundByDPR(num: number): number { - const dpr = window.devicePixelRatio || 1; - return Math.round(num * dpr) / dpr || -10000; - } - - // See: https://spectrum.adobe.com/page/popover/#Container-padding - const REQUIRED_DISTANCE_TO_EDGE = 8; - // See: https://github.com/adobe/spectrum-web-components/issues/910 - const MIN_OVERLAY_HEIGHT = 100; - - const flipMiddleware = this.virtualTrigger - ? flip({ - padding: REQUIRED_DISTANCE_TO_EDGE, - fallbackPlacements: getFallbackPlacements(this.placement), - }) - : flip({ - padding: REQUIRED_DISTANCE_TO_EDGE, - }); - - const middleware = [ - offset({ - mainAxis: this.offset, - crossAxis: this.skidding, - }), - shift({ padding: REQUIRED_DISTANCE_TO_EDGE }), - flipMiddleware, - size({ - padding: REQUIRED_DISTANCE_TO_EDGE, - apply: ({ - availableWidth, - availableHeight, - rects: { floating }, - }) => { - const maxHeight = Math.max( - MIN_OVERLAY_HEIGHT, - Math.floor(availableHeight) - ); - const actualHeight = floating.height; - this.initialHeight = - !this.isConstrained && !this.virtualTrigger - ? actualHeight - : this.initialHeight || actualHeight; - this.isConstrained = - actualHeight < this.initialHeight || - maxHeight <= actualHeight; - const appliedHeight = this.isConstrained - ? `${maxHeight}px` - : ''; - Object.assign(this.style, { - maxWidth: `${Math.floor(availableWidth)}px`, - maxHeight: appliedHeight, - height: appliedHeight, - }); - }, - }), - ]; - if (this.overlayContentTip) { - middleware.push(arrow({ element: this.overlayContentTip })); - } - const { x, y, placement, middlewareData } = await computePosition( - this.virtualTrigger || this.trigger, - this, - { - placement: this.placement, - middleware, - strategy: 'fixed', - } - ); - - Object.assign(this.style, { - top: '0px', - left: '0px', - transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`, - }); - - if (placement !== this.getAttribute('actual-placement')) { - this.setAttribute('actual-placement', placement); - this.overlayContent.setAttribute('placement', placement); - } - - if (this.overlayContentTip && middlewareData.arrow) { - const { x: arrowX, y: arrowY } = middlewareData.arrow; - - Object.assign(this.overlayContentTip.style, { - left: arrowX != null ? `${roundByDPR(arrowX)}px` : '', - top: arrowY != null ? `${roundByDPR(arrowY)}px` : '', - right: '', - bottom: '', - }); - } - }; - - public async hide(animated = true): Promise { - if (this.state !== 'active') return; - this.state = 'hiding'; - if (animated) { - await this.applyContentAnimation('sp-overlay-fade-out'); - } - this.state = 'dispose'; - } - - private schedulePositionUpdate(): void { - // Edge needs a little time to update the DOM before computing the layout - cancelAnimationFrame(this.positionAnimationFrame); - this.positionAnimationFrame = requestAnimationFrame(() => { - if (this.cleanup) { - this.updateOverlayPosition(); - } else { - this.placeOverlay(); - } - }); - } - - private onSlotChange(): void { - this.schedulePositionUpdate(); - } - - public handleInlineTriggerKeydown = (event: KeyboardEvent): void => { - const { code, shiftKey } = event; - /* c8 ignore next */ - if (code !== 'Tab') return; - if (shiftKey) { - this.tabbingAway = true; - this.dispatchEvent(new Event('close')); - return; - } - - event.stopPropagation(); - event.preventDefault(); - this.focus(); - }; - - public applyContentAnimation( - animation: ContentAnimation - ): Promise { - if (this.placement === 'none') { - return Promise.resolve(true); - } - this.resolveContentAnimationPromise(); - return new Promise((resolve): void => { - this.resolveContentAnimationPromise = () => { - resolve(false); - }; - const contents = this.shadowRoot.querySelector( - '#contents' - ) as HTMLElement; - const doneHandler = (event: AnimationEvent): void => { - if (animation !== event.animationName) return; - contents.removeEventListener('animationend', doneHandler); - contents.removeEventListener('animationcancel', doneHandler); - this.animating = false; - resolve(event.type === 'animationcancel'); - }; - contents.addEventListener('animationend', doneHandler); - contents.addEventListener('animationcancel', doneHandler); - - contents.style.animationName = animation; - this.animating = true; - }); - } - - public renderTheme(content: TemplateResult): TemplateResult { - const { color, scale, lang, theme } = this.theme; - return html` - - ${content} - - `; - } - - public override render(): TemplateResult { - const content = html` -
- -
- `; - return this.hasTheme ? this.renderTheme(content) : content; - } - - public static create(details: OverlayOpenDetail): ActiveOverlay { - const overlay = new ActiveOverlay(); - - if (details.content) { - overlay.open(details); - } - - return overlay; - } - - private stealOverlayContentPromise = Promise.resolve(); - private stealOverlayContentResolver!: () => void; - - protected override async getUpdateComplete(): Promise { - const actions: Promise[] = [ - super.getUpdateComplete(), - this.stealOverlayContentPromise, - ]; - actions.push(this.contentAnimationPromise); - if ( - typeof (this.overlayContent as SpectrumElement).updateComplete !== - 'undefined' - ) { - actions.push( - (this.overlayContent as SpectrumElement).updateComplete - ); - } - const [complete] = await Promise.all(actions); - return complete as boolean; - } - - override disconnectedCallback(): void { - document.removeEventListener( - 'sp-update-overlays', - this.resetOverlayPosition - ); - super.disconnectedCallback(); - } -} diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts new file mode 100644 index 0000000000..9099e352ae --- /dev/null +++ b/packages/overlay/src/Overlay.ts @@ -0,0 +1,1038 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { + html, + PropertyValues, + TemplateResult, +} from '@spectrum-web-components/base'; +import { + property, + query, + queryAssignedElements, + state, +} from '@spectrum-web-components/base/src/decorators.js'; +import { + isAndroid, + isIOS, +} from '@spectrum-web-components/shared/src/platform.js'; +import { + ElementResolutionController, + elementResolverUpdatedSymbol, +} from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js'; +import { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js'; +import { + ifDefined, + StyleInfo, + styleMap, +} from '@spectrum-web-components/base/src/directives.js'; + +import type { + OpenableElement, + OverlayState, + OverlayTypes, + Placement, +} from './overlay-types.js'; +import { AbstractOverlay, nextFrame } from './AbstractOverlay.js'; +import { OverlayDialog } from './OverlayDialog.js'; +import { OverlayPopover } from './OverlayPopover.js'; +import { OverlayNoPopover } from './OverlayNoPopover.js'; +import { overlayStack } from './OverlayStack.js'; +import { noop } from './AbstractOverlay.js'; +import { VirtualTrigger } from './VirtualTrigger.js'; +import { PlacementController } from './PlacementController.js'; + +import styles from './overlay.css.js'; + +const LONGPRESS_DURATION = 300; + +type LongpressEvent = { + source: 'pointer' | 'keyboard'; +}; + +export const LONGPRESS_INSTRUCTIONS = { + touch: 'Double tap and long press for additional options', + keyboard: 'Press Space or Alt+Down Arrow for additional options', + mouse: 'Click and hold for additional options', +}; + +const supportsPopover = 'showPopover' in document.createElement('div'); + +let OverlayFeatures = OverlayDialog(AbstractOverlay); +/* c8 ignore next 2 */ +if (supportsPopover) { + OverlayFeatures = OverlayPopover(OverlayFeatures); +} else { + OverlayFeatures = OverlayNoPopover(OverlayFeatures); +} + +/** + * @element sp-overlay + * + * @fires sp-opened - announces that an overlay has completed any entry animations + * @fires sp-closed - announce that an overlay has compelted any exit animations + */ +export class Overlay extends OverlayFeatures { + static override styles = [styles]; + + abortController!: AbortController; + + /** + * An Overlay that is `delayed` will wait until a warm-up period of 1000ms + * has completed before opening. Once the warmup period has completed, all + * subsequent Overlays will open immediately. When no Overlays are opened, + * a cooldown period of 1000ms will begin. Once the cooldown has completed, + * the next Overlay to be opened will be subject to the warm-up period if + * provided that option. + */ + @property({ type: Boolean }) + override delayed = false; + + @query('.dialog') + override dialogEl!: HTMLDialogElement & { + showPopover(): void; + hidePopover(): void; + }; + + /** + * Whether the overlay is currently functional or not + */ + @property({ type: Boolean }) + get disabled(): boolean { + return this._disabled; + } + + set disabled(disabled: boolean) { + this._disabled = disabled; + if (disabled) { + if (this.hasNonVirtualTrigger) { + this.unbindEvents(); + } + this.wasOpen = this.open; + this.open = false; + } else { + this.bindEvents(); + this.open = this.open || this.wasOpen; + this.wasOpen = false; + } + } + + private _disabled = false; + + @queryAssignedElements({ + flatten: true, + selector: ':not([slot="longpress-describedby-descriptor"], slot)', // gather only elements slotted into the default slot + }) + override elements!: OpenableElement[]; + + public parentOverlayToForceClose?: Overlay; + + private get hasNonVirtualTrigger(): boolean { + return ( + !!this.triggerElement && + !(this.triggerElement instanceof VirtualTrigger) + ); + } + + protected longpressState: 'null' | 'potential' | 'opening' | 'pressed' = + 'null'; + + private longressTimeout!: ReturnType; + + /** + * The `offset` property accepts either a single number, to + * define the offset of the Overlay along the main axis from + * the trigger, or 2-tuple, to define the offset along the + * main axis and the cross axis. This option has no effect + * when there is no trigger element. + */ + @property({ type: Number }) + offset: number | [number, number] = 6; + + protected override placementController = new PlacementController(this); + + /** + * Whether the Overlay is projected onto the "top layer" or not. + */ + @property({ type: Boolean, reflect: true }) + override get open(): boolean { + return this._open; + } + + override set open(open: boolean) { + // Don't respond when disabled. + if (open && this.disabled) return; + // Don't respond when state not dirty + if (open === this.open) return; + // Don't respond when you're in the shadow on a longpress + // Shadow occurs when the first "click" would normally close the popover + if ( + (this.longpressState === 'opening' || + this.longpressState === 'pressed') && + !open + ) + return; + this._open = open; + if (this.open) { + Overlay.openCount += 1; + } + this.requestUpdate('open', !this.open); + } + + private _open = false; + + static openCount = 1; + + /** + * Instruct the Overlay where to place itself in + * relationship to the trigger element. + * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"} + */ + @property() + placement?: Placement; + + /** + * Whether to pass focus to the overlay once opened, or + * to the appropriate value based on the "type" of the overlay + * when set to `"auto"`. + * + */ + @property({ attribute: 'receives-focus' }) + override receivesFocus: 'true' | 'false' | 'auto' = 'auto'; + + private releaseAriaDescribedby = noop; + private releaseLongpressDescribedby = noop; + + @query('slot') + slotEl!: HTMLSlotElement; + + @state() + override get state(): OverlayState { + return this._state; + } + + override set state(state) { + if (state === this.state) return; + const oldState = this.state; + this._state = state; + if (this.state === 'opened' || this.state === 'closed') { + // When triggered by the pointer, the last of `opened` + // or `pointerup` should move the `longpressState` to + // `null` so that the earlier event can void the "light + // dismiss" and keep the Overlay open. + this.longpressState = + this.longpressState === 'pressed' + ? 'null' + : this.longpressState; + } + this.requestUpdate('state', oldState); + } + + override _state: OverlayState = 'closed'; + + @property({ type: Number, attribute: 'tip-padding' }) + tipPadding?: number; + + /** + * An optional ID reference for the trigger element combined with the optional + * interaction (click | hover | longpress) by which the overlay shold open + * the overlay with an `@`: e.g. `trigger@click` opens the overlay when an + * element with the ID "trigger" is clicked. + */ + @property() + trigger?: string; + + /** + * An element reference for the trigger element that the overlay should relate to. + */ + @property({ attribute: false }) + override triggerElement: HTMLElement | VirtualTrigger | null = null; + + /** + * The specific interaction to listen for on the `triggerElement` to open the overlay. + */ + @property({ attribute: false }) + triggerInteraction?: 'click' | 'longpress' | 'hover'; + + /** + * Configures the open/close heuristics of the Overlay. + * @type {"auto" | "hint" | "manual" | "modal" | "page"} + */ + @property() + override type: OverlayTypes = 'auto'; + + protected wasOpen = false; + + private elementResolver = new ElementResolutionController(this); + + private get usesDialog(): boolean { + return this.type === 'modal' || this.type === 'page'; + } + + private get popoverValue(): 'auto' | 'manual' | undefined { + const hasPopoverAttribute = 'popover' in this; + if (!hasPopoverAttribute) { + return undefined; + } + /* c8 ignore next 9 */ + switch (this.type) { + case 'modal': + case 'page': + return undefined; + case 'hint': + return 'manual'; + default: + return this.type; + } + } + + protected get requiresPosition(): boolean { + // Do not position "page" overlays as they should block the entire UI. + if (this.type === 'page' || !this.open) return false; + // Do not position content without a trigger element, what would you position it in relation to? + // Do not automatically position content, unless it is a "hint". + if (!this.triggerElement || (!this.placement && this.type !== 'hint')) + return false; + return true; + } + + protected override managePosition(): void { + if (!this.requiresPosition || !this.open) return; + + const offset = this.offset || 0; + const trigger = this.triggerElement as HTMLElement; + const placement = (this.placement as Placement) || 'right'; + const tipPadding = this.tipPadding; + + this.placementController.placeOverlay(this.dialogEl, { + offset, + placement, + tipPadding, + trigger, + type: this.type, + }); + } + + protected override async managePopoverOpen(): Promise { + super.managePopoverOpen(); + const targetOpenState = this.open; + /* c8 ignore next 3 */ + if (this.open !== targetOpenState) { + return; + } + await this.manageDelay(targetOpenState); + if (this.open !== targetOpenState) { + return; + } + await this.ensureOnDOM(targetOpenState); + /* c8 ignore next 3 */ + if (this.open !== targetOpenState) { + return; + } + const focusEl = await this.makeTransition(targetOpenState); + if (this.open !== targetOpenState) { + return; + } + await this.applyFocus(targetOpenState, focusEl); + } + + protected override async applyFocus( + targetOpenState: boolean, + focusEl: HTMLElement | null + ): Promise { + // Do not move focus when explicitly told not to + // and when the Overlay is a "hint" + if (this.receivesFocus === 'false' || this.type === 'hint') { + return; + } + + await nextFrame(); + await nextFrame(); + if (targetOpenState === this.open && !this.open) { + if ( + this.hasNonVirtualTrigger && + this.contains((this.getRootNode() as Document).activeElement) + ) { + (this.triggerElement as HTMLElement).focus(); + } + return; + } + focusEl?.focus(); + } + + private closeOnFocusOut = (event: FocusEvent): void => { + // If you don't know where the focus went, we can't do anyting here. + if (!event.relatedTarget) { + // this.open = false; + return; + } + const relationEvent = new Event('overlay-relation-query', { + bubbles: true, + composed: true, + }); + event.relatedTarget.addEventListener( + relationEvent.type, + (event: Event) => { + if (!event.composedPath().includes(this)) { + this.open = false; + } + } + ); + event.relatedTarget.dispatchEvent(relationEvent); + }; + + protected async manageOpen(oldOpen: boolean): Promise { + // The `.showPopover()` and `.showModal()` events will error on content that is not connected to the DOM. + // Prevent from entering the manage workflow in order to avoid this. + if (!this.isConnected && this.open) return; + + if (!this.hasUpdated) { + await this.updateComplete; + } + + if (this.open) { + overlayStack.add(this); + if (this.willPreventClose) { + document.addEventListener( + 'pointerup', + () => { + this.dialogEl.classList.toggle( + 'not-immediately-closable', + false + ); + this.willPreventClose = false; + }, + { once: true } + ); + this.dialogEl.classList.toggle( + 'not-immediately-closable', + true + ); + } + } else { + if (oldOpen) { + this.dispose(); + } + overlayStack.remove(this); + } + if (this.open && this.state !== 'opened') { + this.state = 'opening'; + } else if (!this.open && this.state !== 'closed') { + this.state = 'closing'; + } + + if (this.usesDialog) { + this.manageDialogOpen(); + } else { + this.managePopoverOpen(); + } + if (this.type === 'auto') { + const listenerRoot = this.getRootNode() as Document; + if (this.open) { + listenerRoot.addEventListener( + 'focusout', + this.closeOnFocusOut, + { capture: true } + ); + } else { + listenerRoot.removeEventListener( + 'focusout', + this.closeOnFocusOut, + { capture: true } + ); + } + } + if (!this.open) { + // If the focus remains inside of the overlay or + // a slotted descendent of the overlay you need to return + // focus back to the trigger. + const getAncestors = (): HTMLElement[] => { + const ancestors: HTMLElement[] = []; + // eslint-disable-next-line @spectrum-web-components/document-active-element + let currentNode = document.activeElement; + while ( + currentNode?.shadowRoot && + currentNode.shadowRoot.activeElement + ) { + currentNode = currentNode.shadowRoot.activeElement; + } + while (currentNode) { + const ancestor = + currentNode.assignedSlot || + currentNode.parentElement || + (currentNode.getRootNode() as ShadowRoot)?.host; + if (ancestor) { + ancestors.push(ancestor as HTMLElement); + } + currentNode = ancestor; + } + return ancestors; + }; + if ( + (this.triggerElement as HTMLElement)?.focus && + (this.contains( + (this.getRootNode() as Document).activeElement + ) || + getAncestors().includes(this)) + ) { + (this.triggerElement as HTMLElement).focus(); + } + } + } + + protected unbindEvents(): void { + this.abortController?.abort(); + } + + protected bindEvents(): void { + if (!this.hasNonVirtualTrigger) return; + this.abortController = new AbortController(); + const nextTriggerElement = this.triggerElement as HTMLElement; + switch (this.triggerInteraction) { + case 'click': + this.bindClickEvents(nextTriggerElement); + return; + case 'longpress': + this.bindLongpressEvents(nextTriggerElement); + return; + case 'hover': + this.bindHoverEvents(nextTriggerElement); + return; + } + } + + protected bindClickEvents(triggerElement: HTMLElement): void { + const options = { signal: this.abortController.signal }; + triggerElement.addEventListener('click', this.handleClick, options); + triggerElement.addEventListener( + 'pointerdown', + this.handlePointerdownForClick, + options + ); + } + + protected bindLongpressEvents(triggerElement: HTMLElement): void { + const options = { signal: this.abortController.signal }; + triggerElement.addEventListener( + 'longpress', + this.handleLongpress, + options + ); + triggerElement.addEventListener( + 'pointerdown', + this.handlePointerdown, + options + ); + this.prepareLongpressDescription(triggerElement); + if ( + (triggerElement as HTMLElement & { holdAffordance: boolean }) + .holdAffordance + ) { + // Only bind keyboard events when the trigger element isn't doing it for us. + return; + } + triggerElement.addEventListener('keydown', this.handleKeydown, options); + triggerElement.addEventListener('keyup', this.handleKeyup, options); + } + + protected bindHoverEvents(triggerElement: HTMLElement): void { + const options = { signal: this.abortController.signal }; + triggerElement.addEventListener('focusin', this.handleFocusin, options); + triggerElement.addEventListener( + 'focusout', + this.handleFocusout, + options + ); + triggerElement.addEventListener( + 'pointerenter', + this.handlePointerenter, + options + ); + triggerElement.addEventListener( + 'pointerleave', + this.handlePointerleave, + options + ); + this.addEventListener( + 'pointerleave', + this.handleOverlayPointerleave, + options + ); + } + + protected manageTriggerElement(triggerElement: HTMLElement | null): void { + if (triggerElement) { + this.unbindEvents(); + this.releaseAriaDescribedby(); + } + const missingOrVirtual = + !this.triggerElement || + this.triggerElement instanceof VirtualTrigger; + if (missingOrVirtual) { + return; + } + this.bindEvents(); + if (this.receivesFocus === 'true') return; + + this.prepareAriaDescribedby(); + } + + private elementIds: string[] = []; + + private prepareLongpressDescription(trigger: HTMLElement): void { + if ( + // only "longpress" relationships are described this way + this.triggerInteraction !== 'longpress' || + // do not reapply until target it recycled + this.releaseLongpressDescribedby !== noop || + // require "longpress content" to apply relationship + !this.elements.length + ) { + return; + } + + const longpressDescription = document.createElement('div'); + longpressDescription.id = `longpress-describedby-descriptor-${crypto + .randomUUID() + .slice(0, 8)}`; + const messageType = isIOS() || isAndroid() ? 'touch' : 'keyboard'; + longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType]; + longpressDescription.slot = 'longpress-describedby-descriptor'; + trigger.insertAdjacentElement('afterend', longpressDescription); + + const releaseLongpressDescribedby = conditionAttributeWithId( + trigger, + 'aria-describedby', + [longpressDescription.id] + ); + this.releaseLongpressDescribedby = () => { + releaseLongpressDescribedby(); + longpressDescription.remove(); + this.releaseLongpressDescribedby = noop; + }; + } + + private prepareAriaDescribedby(): void { + if ( + // only "hover" relationships establed described by content + this.triggerInteraction !== 'hover' || + // do not reapply until target is recycled + this.releaseAriaDescribedby !== noop || + // require "hover content" to apply relationship + !this.elements.length || + // Virtual triggers can have no aria content + !this.hasNonVirtualTrigger + ) { + return; + } + + const trigger = this.triggerElement as HTMLElement; + const triggerRoot = trigger.getRootNode(); + const contentRoot = this.elements[0].getRootNode(); + const overlayRoot = this.getRootNode(); + if (triggerRoot == overlayRoot) { + const releaseAriaDescribedby = conditionAttributeWithId( + trigger, + 'aria-describedby', + [this.id] + ); + this.releaseAriaDescribedby = () => { + releaseAriaDescribedby(); + this.releaseAriaDescribedby = noop; + }; + } else if (triggerRoot === contentRoot) { + this.elementIds = this.elements.map((el) => el.id); + const appliedIds = this.elements.map((el) => { + if (!el.id) { + el.id = `${this.tagName.toLowerCase()}-helper-${crypto + .randomUUID() + .slice(0, 8)}`; + } + return el.id; + }); + const releaseAriaDescribedby = conditionAttributeWithId( + trigger, + 'aria-describedby', + appliedIds + ); + this.releaseAriaDescribedby = () => { + releaseAriaDescribedby(); + this.elements.map((el, index) => { + el.id = this.elementIds[index]; + }); + this.releaseAriaDescribedby = noop; + }; + } + } + + private handlePointerdown = (event: PointerEvent): void => { + if (!this.triggerElement) return; + if (event.button !== 0) return; + const triggerElement = this.triggerElement as HTMLElement; + this.longpressState = 'potential'; + document.addEventListener('pointerup', this.handlePointerup); + document.addEventListener('pointercancel', this.handlePointerup); + if ( + (triggerElement as HTMLElement & { holdAffordance: boolean }) + .holdAffordance + ) { + // Only dispatch longpress event if the trigger element isn't doing it for us. + return; + } + this.longressTimeout = setTimeout(() => { + if (!triggerElement) return; + triggerElement.dispatchEvent( + new CustomEvent('longpress', { + bubbles: true, + composed: true, + detail: { + source: 'pointer', + }, + }) + ); + }, LONGPRESS_DURATION); + }; + + private handlePointerup = (): void => { + clearTimeout(this.longressTimeout); + if (!this.triggerElement) return; + // When triggered by the pointer, the last of `opened` + // or `pointerup` should move the `longpressState` to + // `null` so that the earlier event can void the "light + // dismiss" and keep the Overlay open. + this.longpressState = this.state === 'opening' ? 'pressed' : 'null'; + document.removeEventListener('pointerup', this.handlePointerup); + document.removeEventListener('pointercancel', this.handlePointerup); + }; + + /** + * @private + */ + protected handleKeydown = (event: KeyboardEvent): void => { + const { code, altKey } = event; + if (code === 'Space' || (altKey && code === 'ArrowDown')) { + if (code === 'ArrowDown') { + event.stopPropagation(); + event.stopImmediatePropagation(); + } + } + }; + + protected handleKeyup = (event: KeyboardEvent): void => { + const { code, altKey } = event; + if (code === 'Space' || (altKey && code === 'ArrowDown')) { + if (!this.triggerElement || !this.hasNonVirtualTrigger) { + return; + } + event.stopPropagation(); + (this.triggerElement as HTMLElement).dispatchEvent( + new CustomEvent('longpress', { + bubbles: true, + composed: true, + detail: { + source: 'keyboard', + }, + }) + ); + setTimeout(() => { + this.longpressState = 'null'; + }); + } + }; + + /** + * An overlay with a `click` interaction should not close on click `triggerElement`. + * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the + * overlay is `open` to prevent from toggling the overlay when the click event + * propagates later in the interaction. + */ + private preventNextToggle = false; + + protected handlePointerdownForClick = (): void => { + this.preventNextToggle = this.open; + }; + + protected handleClick = (): void => { + if ( + this.longpressState === 'opening' || + this.longpressState === 'pressed' + ) { + return; + } + if (!this.preventNextToggle) { + this.open = !this.open; + } + this.preventNextToggle = false; + }; + + private focusedin = false; + + protected handleFocusin = (): void => { + this.open = true; + this.focusedin = true; + }; + + protected handleFocusout = (): void => { + this.focusedin = false; + if (this.pointerentered) return; + this.open = false; + }; + + private pointerentered = false; + + protected handlePointerenter = (): void => { + if (this.disabled) return; + this.open = true; + this.pointerentered = true; + }; + + protected handlePointerleave = (event: PointerEvent): void => { + if ( + this === event.relatedTarget || + this.contains(event.relatedTarget as Node) || + [...this.children].find((child) => { + if (child.localName !== 'slot') { + return false; + } + return (child as HTMLSlotElement) + .assignedElements({ flatten: true }) + .find((el) => { + return ( + el === event.relatedTarget || + el.contains(event.relatedTarget as Node) + ); + }); + }) + ) { + return; + } + this.doPointerleave(); + }; + + protected handleOverlayPointerleave = (event: PointerEvent): void => { + if ( + this.triggerElement === event.relatedTarget || + (this.hasNonVirtualTrigger && + (this.triggerElement as HTMLElement).contains( + event.relatedTarget as Node + )) + ) { + return; + } + this.doPointerleave(); + }; + + protected doPointerleave(): void { + this.pointerentered = false; + const triggerElement = this.triggerElement as HTMLElement; + if (this.focusedin && triggerElement.matches(':focus-visible')) return; + this.open = false; + } + + protected handleLongpress = (): void => { + this.open = true; + this.longpressState = + this.longpressState === 'potential' ? 'opening' : 'pressed'; + }; + + protected handleBeforetoggle(event: Event & { newState: string }): void { + if (event.newState !== 'open') { + this.handleBrowserClose(); + } + } + + protected handleBrowserClose(): void { + if ( + this.longpressState !== 'opening' && + this.longpressState !== 'pressed' + ) { + this.open = false; + return; + } + this.manuallyKeepOpen(); + } + + public override manuallyKeepOpen(): void { + super.manuallyKeepOpen(); + this.open = true; + this.placementController.allowPlacementUpdate = true; + this.manageOpen(false); + } + + protected handleSlotchange(): void { + if (this.triggerElement) { + this.prepareAriaDescribedby(); + } + if (!this.elements.length) { + this.releaseLongpressDescribedby(); + } else if (this.hasNonVirtualTrigger) { + this.prepareLongpressDescription( + this.triggerElement as HTMLElement + ); + } + } + + public willPreventClose = false; + + public shouldPreventClose(): boolean { + const shouldPreventClose = this.willPreventClose; + this.willPreventClose = false; + return shouldPreventClose; + } + + override willUpdate(changes: PropertyValues): void { + if (!this.hasAttribute('id')) { + this.setAttribute( + 'id', + `${this.tagName.toLowerCase()}-${crypto + .randomUUID() + .slice(0, 8)}` + ); + } + if ( + changes.has('open') && + (typeof changes.get('open') !== 'undefined' || this.open) + ) { + this.manageOpen(changes.get('open')); + } + if (changes.has('trigger')) { + const [id, interaction] = this.trigger?.split('@') || []; + this.elementResolver.selector = id ? `#${id}` : ''; + this.triggerInteraction = interaction as + | 'click' + | 'longpress' + | 'hover' + | undefined; + } + const oldTrigger = this.triggerElement as HTMLElement; + if (changes.has(elementResolverUpdatedSymbol)) { + this.triggerElement = this.elementResolver.element; + this.manageTriggerElement(oldTrigger); + } + if (changes.has('triggerElement')) { + this.manageTriggerElement(changes.get('triggerElement')); + } + } + + protected override updated(changes: PropertyValues): void { + super.updated(changes); + if (changes.has('placement')) { + if (this.placement) { + this.dialogEl.setAttribute('actual-placement', this.placement); + } else { + this.dialogEl.removeAttribute('actual-placement'); + } + if (this.open && typeof changes.get('placement') !== 'undefined') { + this.placementController.resetOverlayPosition(); + } + } + } + + protected renderContent(): TemplateResult { + return html` + + `; + } + + private get dialogStyleMap(): StyleInfo { + return { + '--swc-overlay-open-count': Overlay.openCount.toString(), + }; + } + + protected renderDialog(): TemplateResult { + /** + * `--swc-overlay-open-count` is applied to mimic the single stack + * nature of the top layer in browsers that do not yet support it. + * + * The value should always be the full number of overlays ever opened + * which will be added to `--swc-overlay-z-index-base` which can be + * provided by a consuming developer but defaults to 1000 to beat as + * much stacking as possible durring fallback delivery. + **/ + return html` + + ${this.renderContent()} + + `; + } + + protected renderPopover(): TemplateResult { + /** + * `--swc-overlay-open-count` is applied to mimic the single stack + * nature of the top layer in browsers that do not yet support it. + * + * The value should always be the full number of overlays ever opened + * which will be added to `--swc-overlay-z-index-base` which can be + * provided by a consuming developer but defaults to 1000 to beat as + * much stacking as possible durring fallback delivery. + **/ + return html` +
+ ${this.renderContent()} +
+ `; + } + + public override render(): TemplateResult { + const isDialog = this.type === 'modal' || this.type === 'page'; + return html` + ${isDialog ? this.renderDialog() : this.renderPopover()} + + `; + } + + override connectedCallback(): void { + super.connectedCallback(); + this.addEventListener('close', () => { + this.open = false; + }); + if (this.hasNonVirtualTrigger) { + this.bindEvents(); + } + } + + override disconnectedCallback(): void { + if (this.hasNonVirtualTrigger) { + this.unbindEvents(); + } + this.releaseAriaDescribedby(); + this.releaseLongpressDescribedby(); + this.open = false; + super.disconnectedCallback(); + } +} diff --git a/packages/overlay/src/OverlayDialog.ts b/packages/overlay/src/OverlayDialog.ts new file mode 100644 index 0000000000..de488ab476 --- /dev/null +++ b/packages/overlay/src/OverlayDialog.ts @@ -0,0 +1,177 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { ReactiveElement } from 'lit'; +import { + firstFocusableIn, + firstFocusableSlottedIn, +} from '@spectrum-web-components/shared/src/first-focusable-in.js'; +import { VirtualTrigger } from './VirtualTrigger.js'; +import { + Constructor, + OpenableElement, + OverlayOpenCloseDetail, +} from './overlay-types.js'; +import { + BeforetoggleClosedEvent, + BeforetoggleOpenEvent, + guaranteedAllTransitionend, +} from './AbstractOverlay.js'; +import type { AbstractOverlay } from './AbstractOverlay.js'; + +export function OverlayDialog>( + constructor: T +): T & Constructor { + class OverlayWithDialog extends constructor { + protected override async manageDialogOpen(): Promise { + const targetOpenState = this.open; + await this.managePosition(); + if (this.open !== targetOpenState) { + return; + } + if (this.open !== targetOpenState) { + return; + } + const focusEl = await this.dialogMakeTransition(targetOpenState); + if (this.open !== targetOpenState) { + return; + } + await this.dialogApplyFocus(targetOpenState, focusEl); + } + + protected async dialogMakeTransition( + targetOpenState: boolean + ): Promise { + let focusEl = null as HTMLElement | null; + const start = + (el: OpenableElement, index: number) => + async (): Promise => { + if (typeof el.open !== 'undefined') { + el.open = targetOpenState; + } + if (!targetOpenState) { + const close = (): void => { + el.removeEventListener('close', close); + finish(el, index); + }; + el.addEventListener('close', close); + } + if (index > 0) { + // Announce workflow on the first element _only_. + return; + } + const event = targetOpenState + ? BeforetoggleOpenEvent + : BeforetoggleClosedEvent; + this.dispatchEvent(new event()); + if (!targetOpenState) { + // Show/focus workflow when opening _only_. + return; + } + focusEl = focusEl || firstFocusableIn(el); + if (!focusEl) { + const childSlots = el.querySelectorAll('slot'); + childSlots.forEach((slot) => { + if (!focusEl) { + focusEl = firstFocusableSlottedIn(slot); + } + }); + } + if (!this.isConnected || this.dialogEl.open) { + // In both of these cases the browser will error. + // You can neither "reopen" a or open one that is not on the DOM. + return; + } + this.dialogEl.showModal(); + }; + const finish = (el: OpenableElement, index: number) => (): void => { + if (this.open !== targetOpenState) { + return; + } + const eventName = targetOpenState ? 'sp-opened' : 'sp-closed'; + if (index > 0) { + el.dispatchEvent( + new CustomEvent(eventName, { + bubbles: false, + composed: false, + detail: { interaction: this.type }, + }) + ); + return; + } + if (!this.isConnected || targetOpenState !== this.open) { + // Don't lead into the `.close()` workflow if not connected to the DOM. + // The browser will error in this case. + return; + } + const reportChange = (): void => { + const hasVirtualTrigger = + this.triggerElement instanceof VirtualTrigger; + this.dispatchEvent( + new Event(eventName, { + bubbles: hasVirtualTrigger, + composed: hasVirtualTrigger, + }) + ); + el.dispatchEvent( + new Event(eventName, { + bubbles: false, + composed: false, + }) + ); + if (this.triggerElement && !hasVirtualTrigger) { + (this.triggerElement as HTMLElement).dispatchEvent( + new CustomEvent(eventName, { + bubbles: true, + composed: true, + detail: { interaction: this.type }, + }) + ); + } + this.state = targetOpenState ? 'opened' : 'closed'; + }; + if (!targetOpenState && this.dialogEl.open) { + this.dialogEl.addEventListener( + 'close', + () => { + reportChange(); + }, + { once: true } + ); + this.dialogEl.close(); + } else { + reportChange(); + } + }; + this.elements.forEach((el, index) => { + guaranteedAllTransitionend( + el, + start(el, index), + finish(el, index) + ); + }); + return focusEl; + } + + protected async dialogApplyFocus( + targetOpenState: boolean, + focusEl: HTMLElement | null + ): Promise { + /** + * Focus should be handled natively in `` elements when leveraging `.showModal()`, but it's NOT. + * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507 + * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398 + **/ + this.applyFocus(targetOpenState, focusEl); + } + } + return OverlayWithDialog; +} diff --git a/packages/overlay/src/OverlayNoPopover.ts b/packages/overlay/src/OverlayNoPopover.ts new file mode 100644 index 0000000000..1c086dd758 --- /dev/null +++ b/packages/overlay/src/OverlayNoPopover.ts @@ -0,0 +1,140 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { + firstFocusableIn, + firstFocusableSlottedIn, +} from '@spectrum-web-components/shared/src/first-focusable-in.js'; +import { ReactiveElement } from 'lit'; +import { VirtualTrigger } from './VirtualTrigger.js'; +import { + Constructor, + OpenableElement, + OverlayOpenCloseDetail, +} from './overlay-types.js'; +import { + BeforetoggleClosedEvent, + BeforetoggleOpenEvent, + forcePaint, + guaranteedAllTransitionend, + overlayTimer, +} from './AbstractOverlay.js'; +import type { AbstractOverlay } from './AbstractOverlay.js'; + +export function OverlayNoPopover>( + constructor: T +): T & Constructor { + class OverlayWithNoPopover extends constructor { + protected override async managePopoverOpen(): Promise { + await this.managePosition(); + } + + protected override async manageDelay( + targetOpenState: boolean + ): Promise { + if (targetOpenState === false || targetOpenState !== this.open) { + overlayTimer.close(this); + return; + } + if (this.delayed) { + const cancelled = await overlayTimer.openTimer(this); + if (cancelled) { + this.open = !targetOpenState; + } + } + } + + protected override async ensureOnDOM( + _targetOpenState: boolean + ): Promise { + forcePaint(); + } + + protected override async makeTransition( + targetOpenState: boolean + ): Promise { + if (this.open !== targetOpenState) { + return null; + } + let focusEl = null as HTMLElement | null; + const start = (el: OpenableElement, index: number) => (): void => { + if (targetOpenState !== this.open) { + return; + } + if (typeof el.open !== 'undefined') { + el.open = targetOpenState; + } + if (index === 0) { + const event = targetOpenState + ? BeforetoggleOpenEvent + : BeforetoggleClosedEvent; + this.dispatchEvent(new event()); + } + if (targetOpenState !== true) { + return; + } + focusEl = focusEl || firstFocusableIn(el); + if (focusEl) { + return; + } + const childSlots = el.querySelectorAll('slot'); + childSlots.forEach((slot) => { + if (!focusEl) { + focusEl = firstFocusableSlottedIn(slot); + } + }); + }; + const finish = (el: OpenableElement, index: number) => (): void => { + if (this.open !== targetOpenState) { + return; + } + const eventName = targetOpenState ? 'sp-opened' : 'sp-closed'; + el.dispatchEvent( + new CustomEvent(eventName, { + bubbles: false, + composed: false, + detail: { interaction: this.type }, + }) + ); + if (index > 0) { + return; + } + const hasVirtualTrigger = + this.triggerElement instanceof VirtualTrigger; + this.dispatchEvent( + new Event(eventName, { + bubbles: hasVirtualTrigger, + composed: hasVirtualTrigger, + }) + ); + if (this.triggerElement && !hasVirtualTrigger) { + (this.triggerElement as HTMLElement).dispatchEvent( + new CustomEvent(eventName, { + bubbles: true, + composed: true, + detail: { interaction: this.type }, + }) + ); + } + this.state = targetOpenState ? 'opened' : 'closed'; + }; + this.elements.forEach((el, index) => { + guaranteedAllTransitionend( + el, + start(el, index), + finish(el, index) + ); + }); + return focusEl; + } + } + return OverlayWithNoPopover; +} diff --git a/packages/overlay/src/OverlayPopover.ts b/packages/overlay/src/OverlayPopover.ts new file mode 100644 index 0000000000..bef4719816 --- /dev/null +++ b/packages/overlay/src/OverlayPopover.ts @@ -0,0 +1,222 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { + firstFocusableIn, + firstFocusableSlottedIn, +} from '@spectrum-web-components/shared/src/first-focusable-in.js'; +import { ReactiveElement } from 'lit'; +import { VirtualTrigger } from './VirtualTrigger.js'; +import { + Constructor, + OpenableElement, + OverlayOpenCloseDetail, +} from './overlay-types.js'; +import { + BeforetoggleClosedEvent, + BeforetoggleOpenEvent, + guaranteedAllTransitionend, + nextFrame, + overlayTimer, +} from './AbstractOverlay.js'; +import type { AbstractOverlay } from './AbstractOverlay.js'; + +export function OverlayPopover>( + constructor: T +): T & Constructor { + class OverlayWithPopover extends constructor { + protected override async manageDelay( + targetOpenState: boolean + ): Promise { + if (targetOpenState === false || targetOpenState !== this.open) { + overlayTimer.close(this); + return; + } + if (this.delayed) { + const cancelled = await overlayTimer.openTimer(this); + if (cancelled) { + this.open = !targetOpenState; + } + } + } + + private async shouldHidePopover( + targetOpenState: boolean + ): Promise { + if (targetOpenState && this.open !== targetOpenState) { + return; + } + // When in a parent Overlay, this Overlay may need to position itself + // while closing in due to the parent _also_ closing which means the + // location can no longer rely on "top layer over transform" math. + await this.placementController.resetOverlayPosition(); + } + + private async shouldShowPopover( + targetOpenState: boolean + ): Promise { + let popoverOpen = false; + try { + popoverOpen = this.dialogEl.matches(':popover-open'); + // eslint-disable-next-line no-empty + } catch (error) {} + let open = false; + try { + open = this.dialogEl.matches(':open'); + // eslint-disable-next-line no-empty + } catch (error) {} + if ( + targetOpenState && + this.open === targetOpenState && + !popoverOpen && + !open && + this.isConnected + ) { + this.dialogEl.showPopover(); + await this.managePosition(); + } + } + + protected override async ensureOnDOM( + targetOpenState: boolean + ): Promise { + await nextFrame(); + await this.shouldHidePopover(targetOpenState); + await this.shouldShowPopover(targetOpenState); + await nextFrame(); + } + + protected override async makeTransition( + targetOpenState: boolean + ): Promise { + if (this.open !== targetOpenState) { + return null; + } + let focusEl = null as HTMLElement | null; + const start = (el: OpenableElement, index: number) => (): void => { + if (typeof el.open !== 'undefined') { + el.open = targetOpenState; + } + if (index === 0) { + const event = targetOpenState + ? BeforetoggleOpenEvent + : BeforetoggleClosedEvent; + this.dispatchEvent(new event()); + } + if (!targetOpenState) { + return; + } + focusEl = focusEl || firstFocusableIn(el); + if (focusEl) { + return; + } + const childSlots = el.querySelectorAll('slot'); + childSlots.forEach((slot) => { + if (!focusEl) { + focusEl = firstFocusableSlottedIn(slot); + } + }); + }; + const finish = + (el: OpenableElement, index: number) => + async (): Promise => { + if (this.open !== targetOpenState) { + return; + } + const eventName = targetOpenState + ? 'sp-opened' + : 'sp-closed'; + if (index > 0) { + el.dispatchEvent( + new CustomEvent(eventName, { + bubbles: false, + composed: false, + detail: { interaction: this.type }, + }) + ); + return; + } + const reportChange = async (): Promise => { + if (this.open !== targetOpenState) { + return; + } + await nextFrame(); + const hasVirtualTrigger = + this.triggerElement instanceof VirtualTrigger; + this.dispatchEvent( + new Event(eventName, { + bubbles: hasVirtualTrigger, + composed: hasVirtualTrigger, + }) + ); + el.dispatchEvent( + new CustomEvent(eventName, { + bubbles: false, + composed: false, + detail: { interaction: this.type }, + }) + ); + if (this.triggerElement && !hasVirtualTrigger) { + (this.triggerElement as HTMLElement).dispatchEvent( + new CustomEvent( + eventName, + { + bubbles: true, + composed: true, + detail: { interaction: this.type }, + } + ) + ); + } + this.state = targetOpenState ? 'opened' : 'closed'; + }; + if (this.open !== targetOpenState) { + return; + } + let popoverOpen = false; + try { + popoverOpen = this.dialogEl.matches(':popover-open'); + // eslint-disable-next-line no-empty + } catch (error) {} + let open = false; + try { + open = this.dialogEl.matches(':open'); + // eslint-disable-next-line no-empty + } catch (error) {} + if ( + targetOpenState !== true && + (popoverOpen || open) && + this.isConnected + ) { + this.dialogEl.addEventListener( + 'beforetoggle', + () => { + reportChange(); + }, + { once: true } + ); + this.dialogEl.hidePopover(); + } else { + reportChange(); + } + }; + this.elements.forEach((el, index) => { + guaranteedAllTransitionend( + el, + start(el, index), + finish(el, index) + ); + }); + return focusEl; + } + } + return OverlayWithPopover; +} diff --git a/packages/overlay/src/OverlayStack.ts b/packages/overlay/src/OverlayStack.ts new file mode 100644 index 0000000000..99216201f6 --- /dev/null +++ b/packages/overlay/src/OverlayStack.ts @@ -0,0 +1,180 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { Overlay } from './Overlay.js'; + +const supportsPopover = 'showPopover' in document.createElement('div'); + +class OverlayStack { + private get document(): Document { + return this.root.ownerDocument /* c8 ignore next */ || document; + } + + private pointerdownPath?: EventTarget[]; + + private root: HTMLElement = document.body; + + stack: Overlay[] = []; + + constructor() { + this.bindEvents(); + } + + bindEvents(): void { + this.document.addEventListener('pointerdown', this.handlePointerdown); + this.document.addEventListener('pointerup', this.handlePointerup); + this.document.addEventListener('keydown', this.handleKeydown); + } + + private closeOverlay(overlay: Overlay): void { + const overlayIndex = this.stack.indexOf(overlay); + if (overlayIndex > -1) { + this.stack.splice(overlayIndex, 1); + } + overlay.open = false; + } + + /** + * Cach the `pointerdownTarget` for later testing + * + * @param event {ClickEvent} + */ + handlePointerdown = (event: Event): void => { + this.pointerdownPath = event.composedPath(); + }; + + /** + * Close all overlays that are not ancestors of this click event + * + * @param event {ClickEvent} + */ + handlePointerup = (): void => { + if (!this.stack.length) return; + if (!this.pointerdownPath?.length) return; + + // Test against the composed path in `pointerdown` in case the visitor moved their + // pointer during the course of the interaction. + const composedPath = this.pointerdownPath; + this.pointerdownPath = undefined; + const nonAncestorOverlays = this.stack.filter((overlay) => { + const inStack = composedPath.find( + (el) => el === overlay || el === overlay?.triggerElement + ); + return !inStack && !overlay.shouldPreventClose(); + }) as Overlay[]; + nonAncestorOverlays.reverse(); + nonAncestorOverlays.forEach((overlay) => { + this.closeOverlay(overlay); + let parentToClose = overlay.parentOverlayToForceClose; + while (parentToClose) { + this.closeOverlay(parentToClose); + parentToClose = parentToClose.parentOverlayToForceClose; + } + }); + }; + + handleBeforetoggle = (event: Event): void => { + const { target, newState: open } = event as Event & { + newState: string; + }; + if (open === 'open') return; + this.closeOverlay(target as Overlay); + }; + + private handleKeydown = (event: KeyboardEvent): void => { + if (event.code !== 'Escape') return; + const last = this.stack.at(-1); + if (last?.type === 'page') { + event.preventDefault(); + return; + } + if (supportsPopover) return; + if (!this.stack.length) return; + + if (!last) return; + this.closeOverlay(last); + }; + + /** + * Get an array of Overlays that all share the same trigger element. + * + * @param triggerElement {HTMLELement} + * @returns {Overlay[]} + */ + overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] { + return this.stack.filter( + (overlay) => overlay.triggerElement === triggerElement + ); + } + + /** + * When overlays are added manage the open state of exisiting overlays appropriately: + * - 'modal': should close other overlays + * - 'page': should close other overlays + * - 'hint': shouldn't close other overlays + * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays + * - 'manual': shouldn't close other overlays + */ + add(overlay: Overlay): void { + if (this.stack.includes(overlay)) { + const overlayIndex = this.stack.indexOf(overlay); + if (overlayIndex > -1) { + this.stack.splice(overlayIndex, 1); + this.stack.push(overlay); + } + return; + } + if ( + overlay.type === 'auto' || + overlay.type === 'modal' || + overlay.type === 'page' + ) { + // manage closing open overlays + const queryPathEventName = 'sp-overlay-query-path'; + const queryPathEvent = new Event(queryPathEventName, { + composed: true, + bubbles: true, + }); + overlay.addEventListener( + queryPathEventName, + (event: Event) => { + const path = event.composedPath(); + this.stack.forEach((overlayEl) => { + const inPath = path.find((el) => el === overlayEl); + if (!inPath && overlayEl.type !== 'manual') { + this.closeOverlay(overlayEl); + } + }); + }, + { once: true } + ); + overlay.dispatchEvent(queryPathEvent); + } else if (overlay.type === 'hint') { + this.stack.forEach((overlayEl) => { + if (overlayEl.type === 'hint') { + this.closeOverlay(overlayEl); + } + }); + } + requestAnimationFrame(() => { + this.stack.push(overlay); + overlay.addEventListener('beforetoggle', this.handleBeforetoggle, { + once: true, + }); + }); + } + + remove(overlay: Overlay): void { + this.closeOverlay(overlay); + } +} + +export const overlayStack = new OverlayStack(); diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts index 43e49f3027..21125ec7eb 100644 --- a/packages/overlay/src/OverlayTrigger.ts +++ b/packages/overlay/src/OverlayTrigger.ts @@ -19,38 +19,19 @@ import { } from '@spectrum-web-components/base'; import { property, + query, state, } from '@spectrum-web-components/base/src/decorators.js'; -import type { LongpressEvent } from '@spectrum-web-components/action-button'; -import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js'; -import { - isAndroid, - isIOS, -} from '@spectrum-web-components/shared/src/platform.js'; +import type { Placement } from '@floating-ui/dom'; + +import type { BeforetoggleOpenEvent } from './AbstractOverlay.js'; +import type { Overlay } from './Overlay.js'; +import type { OverlayTriggerInteractions } from './overlay-types'; -import { - OverlayOpenCloseDetail, - OverlayOptions, - OverlayTriggerInteractions, - Placement, - TriggerInteractions, -} from './overlay-types'; -import { openOverlay } from './loader.js'; import overlayTriggerStyles from './overlay-trigger.css.js'; export type OverlayContentTypes = 'click' | 'hover' | 'longpress'; -type closeOverlay = - | 'closeClickOverlay' - | 'closeHoverOverlay' - | 'closeLongpressOverlay'; - -export const LONGPRESS_INSTRUCTIONS = { - touch: 'Double tap and long press for additional options', - keyboard: 'Press Space or Alt+Down Arrow for additional options', - mouse: 'Click and hold for additional options', -}; - /** * @element overlay-trigger * @@ -63,25 +44,24 @@ export const LONGPRESS_INSTRUCTIONS = { * @fires sp-closed - Announces that the overlay has been closed */ export class OverlayTrigger extends SpectrumElement { - private closeClickOverlay?: Promise<() => void>; - private closeLongpressOverlay?: Promise<() => void>; - private closeHoverOverlay?: Promise<() => void>; - public static override get styles(): CSSResultArray { return [overlayTriggerStyles]; } + @property() + content = 'click hover longpress'; + /** - * @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"} + * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"} * @attr */ @property({ reflect: true }) - public placement: Placement = 'bottom'; + public placement?: Placement; @property() public type?: OverlayTriggerInteractions; - @property({ type: Number, reflect: true }) + @property({ type: Number }) public offset = 6; @property({ reflect: true }) @@ -91,383 +71,219 @@ export class OverlayTrigger extends SpectrumElement { public disabled = false; @state() - public hasLongpressContent = false; - - private longpressDescriptor?: HTMLElement; - private clickContent?: HTMLElement; - private longpressContent?: HTMLElement; - private hoverContent?: HTMLElement; - private targetContent?: HTMLElement; - private overlaidContent?: HTMLElement; - - private _longpressId = `longpress-describedby-descriptor`; - - private handleClose(event?: CustomEvent): void { - if ( - event && - event.detail.interaction !== this.open && - event.detail.interaction !== this.type - ) { - return; - } - this.removeAttribute('open'); - } + private clickContent: HTMLElement[] = []; - protected override render(): TemplateResult { - // Keyboard event availability documented in README.md - /* eslint-disable lit-a11y/click-events-have-key-events */ - return html` - -
- - - - -
- `; - /* eslint-enable lit-a11y/click-events-have-key-events */ - } + private clickPlacement?: Placement; - protected override updated(changes: PropertyValues): void { - super.updated(changes); - if (this.disabled && changes.has('disabled')) { - this.closeAllOverlays(); - return; - } - if (changes.has('open')) { - this.manageOpen(); - } - if (changes.has('hasLongpressContent')) { - this.manageLongpressDescriptor(); - } - } + @state() + private longpressContent: HTMLElement[] = []; - protected manageLongpressDescriptor(): void { - const trigger = this.querySelector( - '[slot="trigger"]' - ) as SpectrumElement; - const ariaDescribedby = trigger.getAttribute('aria-describedby'); - let descriptors = ariaDescribedby ? ariaDescribedby.split(/\s+/) : []; - - if (this.hasLongpressContent) { - if (!this.longpressDescriptor) { - this.longpressDescriptor = document.createElement( - 'div' - ) as HTMLElement; - - this.longpressDescriptor.id = this._longpressId; - this.longpressDescriptor.slot = this._longpressId; - } - const messageType = isIOS() || isAndroid() ? 'touch' : 'keyboard'; - this.longpressDescriptor.textContent = - LONGPRESS_INSTRUCTIONS[messageType]; - this.appendChild(this.longpressDescriptor); - descriptors.push(this._longpressId); - } else { - if (this.longpressDescriptor) this.longpressDescriptor.remove(); - descriptors = descriptors.filter( - (descriptor) => descriptor !== this._longpressId - ); - } - if (descriptors.length) { - trigger.setAttribute('aria-describedby', descriptors.join(' ')); - } else { - trigger.removeAttribute('aria-describedby'); - } - } + private longpressPlacement?: Placement; - private closeAllOverlays(): void { - if (this.abortOverlay) this.abortOverlay(true); - ( - [ - 'closeClickOverlay', - 'closeHoverOverlay', - 'closeLongpressOverlay', - ] as closeOverlay[] - ).forEach(async (name) => { - const canClose = this[name] as Promise<() => void>; - if (canClose == null) return; - delete this[name]; - (await canClose)(); - }); - this.overlaidContent = undefined; - } + @state() + private hoverContent: HTMLElement[] = []; - private manageOpen(): void { - const openHandlers: Record void> = { - click: () => this.onTriggerClick(), - hover: () => this.onTriggerMouseEnter(), - longpress: () => this.onTriggerLongpress(), - none: () => this.closeAllOverlays(), - }; - openHandlers[this.open ?? 'none'](); - } + private hoverPlacement?: Placement; - private async openOverlay( - target: HTMLElement, - interaction: TriggerInteractions, - content: HTMLElement, - options: OverlayOptions - ): Promise<() => void> { - this.openStatePromise = new Promise( - (res) => (this.openStateResolver = res) - ); - this.addEventListener( - 'sp-opened', - () => { - this.openStateResolver(); - }, - { once: true } - ); - this.overlaidContent = content; - return OverlayTrigger.openOverlay( - target, - interaction, - content, - options - ); - } + @state() + private targetContent: HTMLElement[] = []; - public static openOverlay = async ( - target: HTMLElement, - interaction: TriggerInteractions, - content: HTMLElement, - options: OverlayOptions - ): Promise<() => void> => { - return openOverlay(target, interaction, content, options); - }; - - private get overlayOptions(): OverlayOptions { - return { - offset: this.offset, - placement: this.placement, - receivesFocus: - !this.type || this.type === 'inline' || this.open === 'hover' - ? undefined - : 'auto', - }; - } + @query('#click-overlay', true) + clickOverlayElement!: Overlay; - private onTrigger(event: CustomEvent): void { - const mouseIsEnteringHoverContent = - event.type === 'mouseleave' && - this.open === 'hover' && - (event as unknown as MouseEvent).relatedTarget === - this.overlaidContent; - if (mouseIsEnteringHoverContent && this.overlaidContent) { - this.overlaidContent.addEventListener( - 'mouseleave', - (event: MouseEvent) => { - const mouseIsEnteringTrigger = - event.relatedTarget === this.targetContent; - if (mouseIsEnteringTrigger) { - return; - } - this.onTrigger( - event as unknown as CustomEvent - ); - }, - { once: true } - ); - return; - } - if (this.disabled) return; - - switch (event.type) { - case 'mouseenter': - case 'focusin': - if (!this.open && this.hoverContent) { - this.open = 'hover'; - } - return; - case 'mouseleave': - case 'focusout': - if (this.open === 'hover') { - this.handleClose(); - } - return; - case 'click': - if (this.clickContent) { - this.open = event.type; - } - return; - case 'longpress': - if (this.longpressContent) { - this._longpressEvent = event; - this.open = event.type; - } - return; - } + @query('#longpress-overlay', true) + longpressOverlayElement!: Overlay; + + @query('#hover-overlay', true) + hoverOverlayElement!: Overlay; + + private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] { + return slot.assignedElements({ flatten: true }) as HTMLElement[]; } - private prepareToFocusOverlayContent(overlayContent: HTMLElement): void { - if (this.type !== 'modal') { - return; - } - const firstFocusable = firstFocusableIn(overlayContent); - if (!firstFocusable) { - overlayContent.tabIndex = 0; - } + private handleTriggerContent( + event: Event & { target: HTMLSlotElement } + ): void { + this.targetContent = this.getAssignedElementsFromSlot(event.target); } - public async onTriggerClick(): Promise { - if ( - !this.targetContent || - !this.clickContent || - this.closeClickOverlay - ) { - return; - } - const { targetContent, clickContent } = this; - this.closeAllOverlays(); - this.prepareToFocusOverlayContent(clickContent); - if (window.__swc.DEBUG) { - window.__swc.ignoreWarningLevels.deprecation = true; - } - this.closeClickOverlay = this.openOverlay( - targetContent, - this.type ? this.type : 'click', - clickContent, - this.overlayOptions - ); - if (window.__swc.DEBUG) { - window.__swc.ignoreWarningLevels.deprecation = false; + private handleSlotContent( + event: Event & { target: HTMLSlotElement } + ): void { + switch (event.target.name) { + case 'click-content': + this.clickContent = this.getAssignedElementsFromSlot( + event.target + ); + break; + case 'longpress-content': + this.longpressContent = this.getAssignedElementsFromSlot( + event.target + ); + break; + case 'hover-content': + this.hoverContent = this.getAssignedElementsFromSlot( + event.target + ); + break; } } - private _longpressEvent?: CustomEvent; - - private async onTriggerLongpress(): Promise { - if ( - !this.targetContent || - !this.longpressContent || - this.closeLongpressOverlay - ) { + private handleBeforetoggle(event: BeforetoggleOpenEvent): void { + const { target } = event; + let type: OverlayContentTypes; + if (target === this.clickOverlayElement) { + type = 'click'; + } else if (target === this.longpressOverlayElement) { + type = 'longpress'; + } else if (target === this.hoverOverlayElement) { + type = 'hover'; + /* c8 ignore next 3 */ + } else { return; } - const { targetContent, longpressContent } = this; - this.closeAllOverlays(); - this.prepareToFocusOverlayContent(longpressContent); - const notImmediatelyClosable = - this._longpressEvent?.detail?.source !== 'keyboard'; - if (window.__swc.DEBUG) { - window.__swc.ignoreWarningLevels.deprecation = true; + if (event.newState === 'open') { + this.open = type; + } else if (this.open === type) { + this.open = undefined; } - this.closeLongpressOverlay = this.openOverlay( - targetContent, - this.type ? this.type : 'longpress', - longpressContent, - { - ...this.overlayOptions, - receivesFocus: 'auto', - notImmediatelyClosable, - } - ); - if (window.__swc.DEBUG) { - window.__swc.ignoreWarningLevels.deprecation = false; - } - this._longpressEvent = undefined; } - private abortOverlay: (cancelled: boolean) => void = () => { - return; - }; - - public async onTriggerMouseEnter(): Promise { - if ( - !this.targetContent || - !this.hoverContent || - this.closeHoverOverlay - ) { - return; + protected override update(changes: PropertyValues): void { + if (changes.has('clickContent')) { + this.clickPlacement = + ((this.clickContent[0]?.getAttribute('placement') || + this.clickContent[0]?.getAttribute( + 'direction' + )) as Placement) || undefined; } - const abortPromise: Promise = new Promise((res) => { - this.abortOverlay = res; - }); - const { targetContent, hoverContent } = this; - if (window.__swc.DEBUG) { - window.__swc.ignoreWarningLevels.deprecation = true; + if (changes.has('hoverContent')) { + this.hoverPlacement = + ((this.hoverContent[0]?.getAttribute('placement') || + this.hoverContent[0]?.getAttribute( + 'direction' + )) as Placement) || undefined; } - this.closeHoverOverlay = this.openOverlay( - targetContent, - 'hover', - hoverContent, - { - abortPromise, - ...this.overlayOptions, - } - ); - if (window.__swc.DEBUG) { - window.__swc.ignoreWarningLevels.deprecation = false; + if (changes.has('longpressContent')) { + this.longpressPlacement = + ((this.longpressContent[0]?.getAttribute('placement') || + this.longpressContent[0]?.getAttribute( + 'direction' + )) as Placement) || undefined; } + super.update(changes); } - private onClickSlotChange( - event: Event & { target: HTMLSlotElement } - ): void { - this.clickContent = this.extractSlotContentFromEvent(event); - this.manageOpen(); + protected renderSlot(name: string): TemplateResult { + return html` + + `; } - private onLongpressSlotChange( - event: Event & { target: HTMLSlotElement } - ): void { - this.longpressContent = this.extractSlotContentFromEvent(event); - this.hasLongpressContent = - !!this.longpressContent || !!this.closeLongpressOverlay; - this.manageOpen(); + protected renderClickOverlay(): TemplateResult { + import('@spectrum-web-components/overlay/sp-overlay.js'); + const slot = this.renderSlot('click-content'); + if (!this.clickContent.length) { + return slot; + } + return html` + + ${slot} + + `; } - private onHoverSlotChange( - event: Event & { target: HTMLSlotElement } - ): void { - this.hoverContent = this.extractSlotContentFromEvent(event); - this.manageOpen(); + protected renderHoverOverlay(): TemplateResult { + import('@spectrum-web-components/overlay/sp-overlay.js'); + const slot = this.renderSlot('hover-content'); + if (!this.hoverContent.length) { + return slot; + } + return html` + + ${slot} + + `; } - private onTargetSlotChange( - event: Event & { target: HTMLSlotElement } - ): void { - this.targetContent = this.extractSlotContentFromEvent(event); + protected renderLongpressOverlay(): TemplateResult { + import('@spectrum-web-components/overlay/sp-overlay.js'); + const slot = this.renderSlot('longpress-content'); + if (!this.longpressContent.length) { + return slot; + } + return html` + + ${slot} + + + `; } - private extractSlotContentFromEvent(event: Event): HTMLElement | undefined { - const slot = event.target as HTMLSlotElement; - const nodes = slot.assignedNodes({ flatten: true }); - return nodes.find((node) => node instanceof HTMLElement) as HTMLElement; + protected override render(): TemplateResult { + const content = this.content.split(' '); + // Keyboard event availability documented in README.md + /* eslint-disable lit-a11y/click-events-have-key-events */ + return html` + + ${[ + content.includes('click') ? this.renderClickOverlay() : html``, + content.includes('hover') ? this.renderHoverOverlay() : html``, + content.includes('longpress') + ? this.renderLongpressOverlay() + : html``, + ]} + `; + /* eslint-enable lit-a11y/click-events-have-key-events */ } - private openStatePromise = Promise.resolve(); - private openStateResolver!: () => void; + protected override updated(changes: PropertyValues): void { + super.updated(changes); + if (this.disabled && changes.has('disabled')) { + this.open = undefined; + return; + } + } protected override async getUpdateComplete(): Promise { const complete = (await super.getUpdateComplete()) as boolean; - await this.openStatePromise; return complete; } - - public override disconnectedCallback(): void { - this.closeAllOverlays(); - super.disconnectedCallback(); - } } diff --git a/packages/overlay/src/PlacementController.ts b/packages/overlay/src/PlacementController.ts new file mode 100644 index 0000000000..c2af9d65c8 --- /dev/null +++ b/packages/overlay/src/PlacementController.ts @@ -0,0 +1,291 @@ +/* +Copyright 2022 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import type { + ReactiveController, + ReactiveElement, +} from '@spectrum-web-components/base'; +import { + arrow, + autoUpdate, + computePosition, + flip, + offset, + Placement, + shift, + size, +} from '@floating-ui/dom'; +import type { VirtualTrigger } from './VirtualTrigger.js'; +import { topLayerOverTransforms } from './topLayerOverTransforms.js'; +import type { OpenableElement } from './overlay-types.js'; +import type { Overlay } from './Overlay.js'; + +type OverlayOptionsV1 = { + abortPromise?: Promise; + delayed?: boolean; + offset?: number | [number, number]; // supporting multi-axis + placement: Placement; + notImmediatelyClosable?: boolean; // rename or place behind other API options + receivesFocus?: 'auto'; + root?: HTMLElement; + tipPadding?: number; + trigger: HTMLElement | VirtualTrigger; + type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual'; +}; + +function roundByDPR(num?: number): number { + if (typeof num === 'undefined') return 0; + const dpr = window.devicePixelRatio || 1; + return Math.round(num * dpr) / dpr ?? -10000; +} + +// See: https://spectrum.adobe.com/page/popover/#Container-padding +const REQUIRED_DISTANCE_TO_EDGE = 8; +// See: https://github.com/adobe/spectrum-web-components/issues/910 +const MIN_OVERLAY_HEIGHT = 100; + +const getFallbackPlacements = (placement: Placement): Placement[] => { + const fallbacks: Record = { + left: ['right', 'bottom', 'top'], + 'left-start': ['right-start', 'bottom', 'top'], + 'left-end': ['right-end', 'bottom', 'top'], + right: ['left', 'bottom', 'top'], + 'right-start': ['left-start', 'bottom', 'top'], + 'right-end': ['left-end', 'bottom', 'top'], + top: ['bottom', 'left', 'right'], + 'top-start': ['bottom-start', 'left', 'right'], + 'top-end': ['bottom-end', 'left', 'right'], + bottom: ['top', 'left', 'right'], + 'bottom-start': ['top-start', 'left', 'right'], + 'bottom-end': ['top-end', 'left', 'right'], + }; + return fallbacks[placement] ?? [placement]; +}; + +export const placementUpdatedSymbol = Symbol('placement updated'); + +export class PlacementController implements ReactiveController { + private cleanup?: () => void; + + initialHeight?: number; + + isConstrained?: boolean; + + private host!: ReactiveElement & { elements: OpenableElement[] }; + + private options!: OverlayOptionsV1; + + private originalPlacements = new WeakMap(); + + private target!: HTMLElement; + + constructor(host: ReactiveElement & { elements: OpenableElement[] }) { + this.host = host; + // Add the controller after the MutationObserver has been created in preparation + // for the `hostConnected`/`hostDisconnected` callbacks to be run. + this.host.addController(this); + } + + public async placeOverlay( + target: HTMLElement = this.target, + options: OverlayOptionsV1 = this.options + ): Promise { + this.target = target; + this.options = options; + if (!target || !options) return; + + const cleanup = autoUpdate( + options.trigger, + target, + this.updatePlacement, + { + elementResize: false, + layoutShift: false, + } + ); + this.cleanup = () => { + this.host.elements?.forEach((element) => { + element.addEventListener( + 'sp-closed', + () => { + const placement = this.originalPlacements.get(element); + if (placement) { + element.setAttribute('placement', placement); + } + this.originalPlacements.delete(element); + }, + { once: true } + ); + }); + cleanup(); + }; + } + + allowPlacementUpdate = false; + + updatePlacement = (): void => { + if ( + !this.allowPlacementUpdate && + this.options.type !== 'modal' && + this.cleanup + ) { + this.target.dispatchEvent(new Event('close', { bubbles: true })); + return; + } + this.computePlacement(); + this.allowPlacementUpdate = false; + }; + + async computePlacement(): Promise { + const { options, target } = this; + + await (document.fonts ? document.fonts.ready : Promise.resolve()); + + const flipMiddleware = !(options.trigger instanceof HTMLElement) + ? flip({ + padding: REQUIRED_DISTANCE_TO_EDGE, + fallbackPlacements: getFallbackPlacements(options.placement), + }) + : flip(); + + const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset) + ? options.offset + : [options.offset, 0]; + + const tipElement = this.host.elements.find( + (el) => el.tipElement + )?.tipElement; + + const middleware = [ + offset({ + mainAxis, + crossAxis, + }), + shift({ padding: REQUIRED_DISTANCE_TO_EDGE }), + flipMiddleware, + size({ + padding: REQUIRED_DISTANCE_TO_EDGE, + apply: ({ + availableWidth, + availableHeight, + rects: { floating }, + }) => { + const maxHeight = Math.max( + MIN_OVERLAY_HEIGHT, + Math.floor(availableHeight) + ); + const actualHeight = floating.height; + this.initialHeight = !this.isConstrained // && !this.virtualTrigger + ? actualHeight + : this.initialHeight || actualHeight; + this.isConstrained = + actualHeight < this.initialHeight || + maxHeight <= actualHeight; + const appliedHeight = this.isConstrained + ? `${maxHeight}px` + : ''; + Object.assign(target.style, { + maxWidth: `${Math.floor(availableWidth)}px`, + maxHeight: appliedHeight, + height: appliedHeight, + }); + }, + }), + ...(tipElement + ? [ + arrow({ + element: tipElement, + padding: + options.tipPadding || REQUIRED_DISTANCE_TO_EDGE, + }), + ] + : []), + topLayerOverTransforms(), + ]; + const { x, y, placement, middlewareData } = await computePosition( + options.trigger, + target, + { + placement: options.placement, + middleware, + strategy: 'fixed', + } + ); + Object.assign(target.style, { + top: '0px', + left: '0px', + translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`, + }); + + target.setAttribute('actual-placement', placement); + this.host.elements?.forEach((element) => { + this.originalPlacements.set( + element, + element.getAttribute('placement') as Placement + ); + element.setAttribute('placement', placement); + }); + + if (tipElement && middlewareData.arrow) { + const { x: arrowX, y: arrowY } = middlewareData.arrow; + + Object.assign(tipElement.style, { + top: + placement.startsWith('right') || + placement.startsWith('left') + ? '0px' + : '', + left: + placement.startsWith('bottom') || + placement.startsWith('top') + ? '0px' + : '', + translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`, + }); + } + } + + public resetOverlayPosition = (): void => { + if (!this.target || !this.options) return; + + this.target.style.removeProperty('max-height'); + this.target.style.removeProperty('height'); + this.initialHeight = undefined; + this.isConstrained = false; + // force paint + this.host.offsetHeight; + this.computePlacement(); + }; + + hostConnected(): void { + document.addEventListener( + 'sp-update-overlays', + this.resetOverlayPosition + ); + } + + hostUpdated(): void { + if (!(this.host as Overlay).open) { + this.cleanup?.(); + this.cleanup = undefined; + } + } + + hostDisconnected(): void { + this.cleanup?.(); + this.cleanup = undefined; + document.removeEventListener( + 'sp-update-overlays', + this.resetOverlayPosition + ); + } +} diff --git a/packages/overlay/src/VirtualTrigger.ts b/packages/overlay/src/VirtualTrigger.ts index a5fbd7b015..50b00af5f0 100644 --- a/packages/overlay/src/VirtualTrigger.ts +++ b/packages/overlay/src/VirtualTrigger.ts @@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { Overlay } from './overlay.js'; +import { Overlay } from './Overlay.js'; export class VirtualTrigger { private x = 0; @@ -36,6 +36,7 @@ export class VirtualTrigger { x: this.x, bottom: this.y, left: this.x, + /* c8 ignore next 3 */ toJSON() { return; }, diff --git a/packages/overlay/src/active-overlay.css b/packages/overlay/src/active-overlay.css deleted file mode 100644 index fac7c0b2ed..0000000000 --- a/packages/overlay/src/active-overlay.css +++ /dev/null @@ -1,131 +0,0 @@ -/* -Copyright 2020 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@keyframes sp-overlay-fade-in { - from { - opacity: 0; - transform: var(--sp-overlay-from); - } - - to { - opacity: 1; - transform: translate(0, 0); - } -} - -@keyframes sp-overlay-fade-out { - from { - opacity: 1; - transform: translate(0, 0); - } - - to { - opacity: 0; - transform: var(--sp-overlay-from); - } -} - -:host { - z-index: 1000; - position: fixed; - display: inline-block; - pointer-events: none; - top: -9999em; - left: -9999em; - max-height: 100%; -} - -:host(:focus) { - outline: none; -} - -:host([placement='none']) { - position: fixed; - height: 100vh; - height: 100dvh; - height: fill-available; - top: 0; - left: 0; -} - -sp-theme, -#contents { - height: 100%; -} - -#contents { - display: inline-block; - pointer-events: none; - animation-duration: var( - --swc-test-duration, - var(--spectrum-global-animation-duration-200, 160ms) - ); - animation-timing-function: var( - --spectrum-global-animation-ease-out, - ease-out - ); - opacity: 1; - visibility: visible; - box-sizing: border-box; - - /** - * duplicate --spectrum-overlay-animation-distance, which is out of scope - * rather than over write so we continue to get new values from Spectrum CSS - * if they are provided in the future. - **/ - --swc-overlay-animation-distance: var( - --spectrum-picker-m-texticon-popover-offset-y, - var(--spectrum-global-dimension-size-75) - ); -} - -:host([actual-placement*='top']) #contents { - --sp-overlay-from: translateY(var(--spectrum-global-dimension-size-75)); - - display: inline-flex; - align-items: flex-end; - padding-top: var(--swc-overlay-animation-distance); -} - -:host([actual-placement*='right']) #contents { - --sp-overlay-from: translateX( - calc(-1 * var(--spectrum-global-dimension-size-75)) - ); - - padding-right: var(--swc-overlay-animation-distance); -} - -:host([actual-placement*='bottom']) #contents { - --sp-overlay-from: translateY( - calc(-1 * var(--spectrum-global-dimension-size-75)) - ); - - padding-bottom: var(--swc-overlay-animation-distance); -} - -:host([actual-placement*='left']) #contents { - --sp-overlay-from: translateX(var(--spectrum-global-dimension-size-75)); - - padding-left: var(--swc-overlay-animation-distance); -} - -:host([animating]) ::slotted(*) { - pointer-events: none; -} - -:host(:not([animating])) ::slotted(*) { - pointer-events: initial; -} - -#contents ::slotted(*) { - position: relative; -} diff --git a/packages/overlay/src/fullSizePlugin.ts b/packages/overlay/src/fullSizePlugin.ts new file mode 100644 index 0000000000..1b2a3d38e6 --- /dev/null +++ b/packages/overlay/src/fullSizePlugin.ts @@ -0,0 +1,62 @@ +/* +Copyright 2022 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { + detectOverflow, + MiddlewareArguments, + MiddlewareReturn, +} from '@floating-ui/dom'; + +export const fullSize = (options: { padding: number } = { padding: 0 }) => ({ + name: 'fullSize', + async fn(middlewareArguments: MiddlewareArguments): Promise< + MiddlewareReturn & { + data: { availableWidth: number; availableHeight: number }; + } + > { + const overflow = await detectOverflow(middlewareArguments, options); + let availableHeight = + -overflow.top - + overflow.bottom + + middlewareArguments.rects.floating.height; + let availableWidth = + -overflow.left - + overflow.right + + middlewareArguments.rects.floating.width; + if (middlewareArguments.placement.startsWith('bottom')) { + availableHeight -= middlewareArguments.rects.reference.height; + availableHeight -= middlewareArguments.rects.reference.y; + availableHeight -= + middlewareArguments.middlewareData.offset?.y || 0; + availableHeight += options.padding; + } else if (middlewareArguments.placement.startsWith('top')) { + availableHeight = middlewareArguments.rects.reference.y; + availableHeight -= + middlewareArguments.middlewareData.offset?.y || 0; + availableHeight += options.padding; + } else if (middlewareArguments.placement.startsWith('right')) { + availableWidth -= middlewareArguments.rects.reference.width; + availableWidth -= middlewareArguments.rects.reference.x; + availableWidth -= middlewareArguments.middlewareData.offset?.x || 0; + availableWidth += options.padding; + } else if (middlewareArguments.placement.startsWith('left')) { + availableWidth = middlewareArguments.rects.reference.x; + availableWidth -= middlewareArguments.middlewareData.offset?.x || 0; + availableWidth += options.padding; + } + return { + data: { + availableWidth, + availableHeight, + }, + }; + }, +}); diff --git a/packages/overlay/src/index.ts b/packages/overlay/src/index.ts index ce36445eb8..b06edf67a3 100644 --- a/packages/overlay/src/index.ts +++ b/packages/overlay/src/index.ts @@ -9,9 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -export * from './overlay.js'; +export * from './Overlay.js'; export * from './OverlayTrigger.js'; export * from './overlay-types.js'; -export * from './ActiveOverlay.js'; -export * from './loader.js'; export * from './VirtualTrigger.js'; +export * from './loader.js'; diff --git a/packages/overlay/src/loader.ts b/packages/overlay/src/loader.ts index ad828a2bea..d91535007b 100644 --- a/packages/overlay/src/loader.ts +++ b/packages/overlay/src/loader.ts @@ -1,5 +1,5 @@ /* -Copyright 2020 Adobe. All rights reserved. +Copyright 2023 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 @@ -10,35 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import type { OverlayOptions, TriggerInteractions } from './overlay-types'; +import { Overlay } from './Overlay.js'; -export const openOverlay = async ( - target: HTMLElement, - interaction: TriggerInteractions, - content: HTMLElement, - options: OverlayOptions -): Promise<() => void> => { - if (window.__swc.DEBUG) { - // eslint-disable-next-line no-var - var ignoreDeprecations = window.__swc.ignoreWarningLevels.deprecation; - } - const { Overlay } = await import( - '@spectrum-web-components/overlay/src/overlay.js' - ); - if (window.__swc.DEBUG) { - if ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - ignoreDeprecations && - !window.__swc.ignoreWarningLevels.deprecation - ) { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - window.__swc.ignoreWarningLevels.deprecation = ignoreDeprecations; - requestAnimationFrame(() => { - window.__swc.ignoreWarningLevels.deprecation = false; - }); - } - } - return Overlay.open(target, interaction, content, options); -}; +export const openOverlay = Overlay.open; diff --git a/packages/overlay/src/overlay-stack.ts b/packages/overlay/src/overlay-stack.ts deleted file mode 100644 index 0b46c28cc2..0000000000 --- a/packages/overlay/src/overlay-stack.ts +++ /dev/null @@ -1,665 +0,0 @@ -/* -Copyright 2020 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { ActiveOverlay } from './ActiveOverlay.js'; -import type { - OverlayOpenCloseDetail, - OverlayOpenDetail, -} from './overlay-types'; -import { OverlayTimer } from './overlay-timer.js'; -import '../active-overlay.js'; -import { - findOverlaysRootedInOverlay, - parentOverlayOf, -} from './overlay-utils.js'; -import { OverlayCloseEvent } from './overlay-events.js'; -import { getDeepElementFromPoint } from '@spectrum-web-components/shared/src/get-deep-element-from-point.js'; - -function isLeftClick(event: MouseEvent): boolean { - return event.button === 0; -} - -function hasModifier(event: MouseEvent): boolean { - return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); -} - -interface ManagedOverlayContent { - open: boolean; - // Allow the overlaid content to do something before it is thrown. - overlayWillOpenCallback?: (args: { trigger: HTMLElement }) => void; - // Allow the overlaid content to do something when it has been thrown. - overlayOpenCallback?: (args: { trigger: HTMLElement }) => void; - // Allow the overlaid content to do something when its throw has been cancelled. - overlayOpenCancelledCallback?: (args: { trigger: HTMLElement }) => void; - // Allow the overlaid content to do something before it is recalled, and return `true` if it will self managing the recall. - overlayWillCloseCallback?: (args: { trigger: HTMLElement }) => boolean; - // Allow the overlaid content to do something when it has been recalled. - overlayCloseCallback?: (args: { trigger: HTMLElement }) => void; - // Surface possible LitElement lifecycle methods on the synthetically types element. - updateComplete?: Promise; -} - -function nextFrame(): Promise { - return new Promise((res) => requestAnimationFrame(() => res())); -} - -export class OverlayStack { - public overlays: ActiveOverlay[] = []; - - private preventMouseRootClose = false; - private root: HTMLElement = document.body; - private handlingResize = false; - private overlayTimer = new OverlayTimer(); - - private canTabTrap = true; - private trappingInited = false; - private tabTrapper!: HTMLElement; - private overlayHolder!: HTMLElement; - private _eventsAreBound = false; - - constructor() { - this.initTabTrapping(); - } - - private initTabTrapping(): void { - /* c8 ignore next 10 */ - if (document.readyState === 'loading') { - document.addEventListener( - 'readystatechange', - () => { - this.initTabTrapping(); - }, - { once: true } - ); - return; - } - if (this.trappingInited) return; - /* c8 ignore next 4 */ - if (this.document.body.shadowRoot) { - this.canTabTrap = false; - return; - } - this.document.body.attachShadow({ mode: 'open' }); - /* c8 ignore next 3 */ - if (!this.document.body.shadowRoot) { - return; - } - this.trappingInited = true; - const root = this.document.body.shadowRoot as ShadowRoot; - root.innerHTML = ` - -
-
- `; - this.tabTrapper = root.querySelector('#actual') as HTMLElement; - this.overlayHolder = root.querySelector('#holder') as HTMLElement; - this.tabTrapper.attachShadow({ mode: 'open' }); - if (this.tabTrapper.shadowRoot) { - this.tabTrapper.shadowRoot.innerHTML = ''; - } - this.overlayHolder.addEventListener( - 'contextmenu', - this.forwardContextmenuEvent, - true - ); - requestAnimationFrame(() => { - this.applyBodyMargins(); - const observer = new ResizeObserver(() => { - this.applyBodyMargins(); - }); - observer.observe(document.body); - }); - } - - private _bodyMarginsApplied = false; - - private applyBodyMargins(): void { - const { marginLeft, marginRight, marginTop, marginBottom } = - getComputedStyle(document.body); - const allZero = - parseFloat(marginLeft) === 0 && - parseFloat(marginRight) === 0 && - parseFloat(marginTop) === 0 && - parseFloat(marginBottom) === 0; - if (allZero && !this._bodyMarginsApplied) { - return; - } - this.tabTrapper.style.setProperty( - '--swc-body-margins-inline', - `calc(${marginLeft} + ${marginRight})` - ); - this.tabTrapper.style.setProperty( - '--swc-body-margins-block', - `calc(${marginTop} + ${marginBottom})` - ); - this._bodyMarginsApplied = !allZero; - } - - private startTabTrapping(): void { - this.initTabTrapping(); - /* c8 ignore next 3 */ - if (!this.canTabTrap) { - return; - } - this.tabTrapper.tabIndex = -1; - this.tabTrapper.setAttribute('aria-hidden', 'true'); - } - - private stopTabTrapping(): void { - /* c8 ignore next 3 */ - if (!this.canTabTrap || !this.trappingInited) { - return; - } - this.tabTrapper.removeAttribute('tabindex'); - this.tabTrapper.removeAttribute('aria-hidden'); - } - - private forwardContextmenuEvent = async ( - event: MouseEvent - ): Promise => { - const topOverlay = this.overlays[this.overlays.length - 1]; - if ( - !this.trappingInited || - topOverlay.interaction !== 'modal' || - event.target !== this.overlayHolder - ) { - return; - } - event.stopPropagation(); - event.preventDefault(); - await this.closeTopOverlay(); - getDeepElementFromPoint(event.clientX, event.clientY)?.dispatchEvent( - new MouseEvent('contextmenu', event) - ); - }; - - private get document(): Document { - return this.root.ownerDocument /* c8 ignore next */ || document; - } - - private get topOverlay(): ActiveOverlay | undefined { - return this.overlays.slice(-1)[0]; - } - - private findOverlayForContent( - overlayContent: HTMLElement - ): ActiveOverlay | undefined { - for (const item of this.overlays) { - if (overlayContent === item.overlayContent) { - return item; - } - } - return undefined; - } - - private addEventListeners(): void { - if (this._eventsAreBound) return; - this._eventsAreBound = true; - this.document.addEventListener('click', this.handleMouseCapture, true); - this.document.addEventListener('click', this.handleMouse); - this.document.addEventListener('keydown', this.handleKeydown); - this.document.addEventListener( - 'sp-overlay-close', - this.handleOverlayClose as EventListener - ); - window.addEventListener('resize', this.handleResize); - } - - handleOverlayClose = (event: OverlayCloseEvent): void => { - const { root } = event; - if (!root) return; - this.closeOverlaysForRoot(root); - }; - - private isClickOverlayActiveForTrigger(trigger: HTMLElement): boolean { - return this.overlays.some( - (item) => trigger === item.trigger && item.interaction === 'click' - ); - } - - public async openOverlay(details: OverlayOpenDetail): Promise { - this.addEventListeners(); - if (this.findOverlayForContent(details.content)) { - return false; - } - if (details.notImmediatelyClosable) { - this._doesNotCloseOnFirstClick = true; - } - if (details.interaction === 'modal') { - this.startTabTrapping(); - } - - const contentWithLifecycle = - details.content as unknown as ManagedOverlayContent; - const { trigger } = details; - if (contentWithLifecycle.overlayWillOpenCallback) { - contentWithLifecycle.overlayWillOpenCallback({ trigger }); - } - - if (details.delayed) { - const cancelledPromise = this.overlayTimer.openTimer( - details.content - ); - const promises = [cancelledPromise]; - if (details.abortPromise) { - promises.push(details.abortPromise); - } - const cancelled = await Promise.race(promises); - if (cancelled) { - if (contentWithLifecycle.overlayOpenCancelledCallback) { - contentWithLifecycle.overlayOpenCancelledCallback({ - trigger, - }); - } - return cancelled; - } - } - - if (details.root) { - this.closeOverlaysForRoot(details.root); - } - if (details.interaction === 'click') { - this.closeAllHoverOverlays(); - } else if ( - details.interaction === 'hover' && - this.isClickOverlayActiveForTrigger(details.trigger) - ) { - // Don't show a hover popover if the click popover is already active - return true; - } - - const activeOverlay = ActiveOverlay.create(details); - - if (this.overlays.length) { - const topOverlay = this.overlays[this.overlays.length - 1]; - topOverlay.obscure(activeOverlay.interaction); - } - - document.body.appendChild(activeOverlay); - - /** - * The following work to make the new overlay the "top" of the stack - * has to happen AFTER the current call stack completes in case there - * is work there in to remove the previous "top" overlay. - */ - await nextFrame(); - this.overlays.push(activeOverlay); - await activeOverlay.updateComplete; - this.addOverlayEventListeners(activeOverlay); - if (typeof contentWithLifecycle.open !== 'undefined') { - await nextFrame(); - // Without the rAF Firefox gets here to early - // and is not able trigger the animation. - contentWithLifecycle.open = true; - } - let cb: () => Promise | void = () => { - return; - }; - if (contentWithLifecycle.overlayOpenCallback) { - const { trigger } = activeOverlay; - const { overlayOpenCallback } = contentWithLifecycle; - cb = async () => await overlayOpenCallback({ trigger }); - } - await activeOverlay.openCallback(cb); - return false; - } - - public addOverlayEventListeners(activeOverlay: ActiveOverlay): void { - activeOverlay.addEventListener('close', (() => { - this.hideAndCloseOverlay( - activeOverlay, - true // animated? - ); - }) as EventListener); - switch (activeOverlay.interaction) { - case 'replace': - this.addReplaceOverlayEventListeners(activeOverlay); - break; - case 'inline': - this.addInlineOverlayEventListeners(activeOverlay); - break; - } - } - - public addReplaceOverlayEventListeners(activeOverlay: ActiveOverlay): void { - activeOverlay.addEventListener('keydown', (event: KeyboardEvent) => { - const { code } = event; - /* c8 ignore next */ - if (code !== 'Tab') return; - - event.stopPropagation(); - this.closeOverlay(activeOverlay.overlayContent); - activeOverlay.tabbingAway = true; - activeOverlay.trigger.focus(); - activeOverlay.trigger.dispatchEvent( - new KeyboardEvent('keydown', event) - ); - }); - } - - public addInlineOverlayEventListeners(activeOverlay: ActiveOverlay): void { - activeOverlay.trigger.addEventListener( - 'keydown', - activeOverlay.handleInlineTriggerKeydown - ); - activeOverlay.addEventListener('keydown', (event: KeyboardEvent) => { - const { code, shiftKey } = event; - /* c8 ignore next */ - if (code !== 'Tab') return; - - activeOverlay.tabbingAway = true; - if (shiftKey) { - const returnFocusElement = document.createElement('span'); - returnFocusElement.tabIndex = -1; - if (activeOverlay.trigger.hasAttribute('slot')) { - returnFocusElement.slot = activeOverlay.trigger.slot; - } - activeOverlay.trigger.insertAdjacentElement( - 'afterend', - returnFocusElement - ); - returnFocusElement.focus(); - returnFocusElement.remove(); - return; - } - - event.stopPropagation(); - const triggerWithLifecycle = - activeOverlay.trigger as unknown as ManagedOverlayContent; - if (typeof triggerWithLifecycle.open !== 'undefined') { - triggerWithLifecycle.open = false; - } - this.closeOverlay(activeOverlay.overlayContent); - activeOverlay.trigger.focus(); - }); - } - - public closeOverlay(content: HTMLElement): void { - this.overlayTimer.close(content); - requestAnimationFrame(() => { - const overlayFromContent = this.findOverlayForContent(content); - const overlaysToClose = [overlayFromContent]; - overlaysToClose.push( - ...findOverlaysRootedInOverlay( - overlayFromContent, - this.overlays - ) - ); - overlaysToClose.forEach((overlay) => - this.hideAndCloseOverlay(overlay) - ); - }); - } - - private handleMouseCapture = (event: MouseEvent): void => { - const topOverlay = this.topOverlay; - if ( - !event.target || - !topOverlay || - !topOverlay.overlayContent || - hasModifier(event) || - !isLeftClick(event) - ) { - this.preventMouseRootClose = true; - return; - } - - if (event.target instanceof Node) { - const path = event.composedPath(); - if (path.indexOf(topOverlay.overlayContent) >= 0) { - this.preventMouseRootClose = true; - return; - } - this.preventMouseRootClose = false; - } - }; - - private closeAllHoverOverlays(): void { - for (const overlay of this.overlays) { - if (overlay.interaction === 'hover') { - this.hideAndCloseOverlay(overlay, false); - } - } - } - - private closeOverlaysForRoot(root: HTMLElement): void { - const overlaysToClose: ActiveOverlay[] = []; - for (const overlay of this.overlays) { - if (overlay.root && overlay.root === root) { - overlaysToClose.push(overlay); - overlaysToClose.push( - ...findOverlaysRootedInOverlay(overlay, this.overlays) - ); - } - } - overlaysToClose.forEach((overlay) => - this.hideAndCloseOverlay(overlay, true, true) - ); - } - - private async manageFocusAfterCloseWhenOverlaysRemain( - returnBeforeFocus?: boolean, - previousTrigger?: HTMLElement - ): Promise { - const topOverlay = this.overlays[this.overlays.length - 1]; - topOverlay.feature(); - // Push focus in the the next remaining overlay as needed when a `type="modal"` overlay exists. - if (topOverlay.interaction === 'modal' || topOverlay.hasModalRoot) { - if (returnBeforeFocus) return; - await (previousTrigger || topOverlay).focus(); - } else { - this.stopTabTrapping(); - } - } - - private manageFocusAfterCloseWhenLastOverlay(overlay: ActiveOverlay): void { - this.stopTabTrapping(); - const isModal = overlay.interaction === 'modal'; - const isReceivesFocus = overlay.receivesFocus === 'auto'; - const isReplace = overlay.interaction === 'replace'; - const isInline = overlay.interaction === 'inline'; - const isTabbingAwayFromInlineOrReplace = - (isReplace || isInline) && !overlay.tabbingAway; - overlay.tabbingAway = false; - if (!isModal && !isReceivesFocus && !isTabbingAwayFromInlineOrReplace) { - return; - } - // Manage post closure focus when needed. - const overlayRoot = overlay.overlayContent.getRootNode() as ShadowRoot; - const overlayContentActiveElement = overlayRoot.activeElement; - let triggerRoot: ShadowRoot; - let triggerActiveElement: Element | null; - const contentContainsActiveElement = (): boolean => - overlay.overlayContent.contains(overlayContentActiveElement); - const triggerRootContainsActiveElement = (): boolean => { - triggerRoot = overlay.trigger.getRootNode() as ShadowRoot; - triggerActiveElement = triggerRoot.activeElement; - return triggerRoot.contains(triggerActiveElement); - }; - const triggerHostIsActiveElement = (): boolean => - triggerRoot.host && triggerRoot.host === triggerActiveElement; - // Return focus to the trigger as long as the user hasn't actively focused - // something outside of the current overlay interface; trigger, root, host. - if ( - isModal || - contentContainsActiveElement() || - triggerRootContainsActiveElement() || - triggerHostIsActiveElement() - ) { - overlay.trigger.focus(); - } - } - - private async hideAndCloseOverlay( - overlay?: ActiveOverlay, - animated?: boolean, - returnBeforeFocus?: boolean - ): Promise { - if (!overlay) { - return; - } - const contentWithLifecycle = - overlay.overlayContent as unknown as ManagedOverlayContent; - if ( - typeof contentWithLifecycle.overlayWillCloseCallback !== 'undefined' - ) { - const { trigger } = overlay; - if (contentWithLifecycle.overlayWillCloseCallback({ trigger })) { - return; - } - } - await overlay.hide(animated); - if (typeof contentWithLifecycle.open !== 'undefined') { - contentWithLifecycle.open = false; - } - if (contentWithLifecycle.overlayCloseCallback) { - const { trigger } = overlay; - await contentWithLifecycle.overlayCloseCallback({ trigger }); - } - - if (overlay.state != 'dispose') return; - - const index = this.overlays.indexOf(overlay); - if (index >= 0) { - this.overlays.splice(index, 1); - } - - if (this.overlays.length) { - await this.manageFocusAfterCloseWhenOverlaysRemain( - returnBeforeFocus || overlay.interaction === 'hover', - overlay.trigger - ); - } else { - this.manageFocusAfterCloseWhenLastOverlay(overlay); - } - - await overlay.updateComplete; - overlay.remove(); - overlay.dispose(); - - overlay.trigger.dispatchEvent( - new CustomEvent('sp-closed', { - bubbles: true, - composed: true, - cancelable: true, - detail: { - interaction: overlay.interaction, - }, - }) - ); - } - - private closeTopOverlay(): Promise { - return this.hideAndCloseOverlay(this.topOverlay, true); - } - - /** - * A "longpress" occurs before the "click" that creates it has occured. - * In that way the first click will still be part of the "longpress" and - * not part of closing the overlay. - */ - private _doesNotCloseOnFirstClick = false; - - private handleMouse = (event: Event): void => { - if (this._doesNotCloseOnFirstClick) { - this._doesNotCloseOnFirstClick = false; - return; - } - if (this.preventMouseRootClose || event.defaultPrevented) { - return; - } - const overlaysToClose = []; - /** - * Find the first overlay that should be closed by this and include it in the - * array of overlays for closure. - * - * Event path dictates closure while the click event: - * - did not occur within the overlay content of the overlay - * AND was - * - not triggered by something in the click event's composed path - * OR - * - not a "hover" overlay - * Select the overlay for closure - */ - let index = this.overlays.length; - while (index && overlaysToClose.length === 0) { - index -= 1; - const overlay = this.overlays[index]; - const path = event.composedPath(); - const eventPathDictatesClosure = - (!path.includes(overlay.trigger) || - overlay.interaction !== 'hover') && - !path.includes(overlay.overlayContent); - if (eventPathDictatesClosure) { - overlaysToClose.push(overlay); - } - } - let root: HTMLElement | undefined = this.topOverlay?.root; - let overlay = parentOverlayOf(root); - while (root && overlay) { - overlaysToClose.push(overlay); - overlay = parentOverlayOf(root); - root = overlay?.root; - } - if (overlay) { - overlaysToClose.push(overlay); - } - overlaysToClose.forEach((overlay) => this.hideAndCloseOverlay(overlay)); - }; - - private handleKeydown = (event: KeyboardEvent): void => { - if (event.code === 'Escape') { - this.closeTopOverlay(); - } - }; - - private handleResize = (): void => { - if (this.handlingResize) return; - - this.handlingResize = true; - requestAnimationFrame(async () => { - const promises = this.overlays.map((overlay) => - overlay.updateOverlayPosition() - ); - await Promise.all(promises); - this.handlingResize = false; - }); - }; -} diff --git a/packages/overlay/src/overlay-timer.ts b/packages/overlay/src/overlay-timer.ts index fa2f806cff..ef66cba720 100644 --- a/packages/overlay/src/overlay-timer.ts +++ b/packages/overlay/src/overlay-timer.ts @@ -61,6 +61,7 @@ export class OverlayTimer { return this.promise; } else if (this.promise) { return this.promise; + /* c8 ignore next 4 */ } else { // This should never happen throw new Error('Inconsistent state'); diff --git a/packages/overlay/src/overlay-trigger.css b/packages/overlay/src/overlay-trigger.css index 7cd86e0fa6..55d6a448ea 100644 --- a/packages/overlay/src/overlay-trigger.css +++ b/packages/overlay/src/overlay-trigger.css @@ -14,6 +14,6 @@ governing permissions and limitations under the License. pointer-events: none; } -#overlay-content slot { +slot[name='longpress-describedby-descriptor'] { display: none; } diff --git a/packages/overlay/src/overlay-types.ts b/packages/overlay/src/overlay-types.ts index 2397f5bb94..cbcc33aa5a 100644 --- a/packages/overlay/src/overlay-types.ts +++ b/packages/overlay/src/overlay-types.ts @@ -10,11 +10,22 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import type { ThemeData } from '@spectrum-web-components/theme/src/Theme.js'; -import type { Placement as FloatingUIPlacement } from '@floating-ui/dom'; +import type { Placement } from '@floating-ui/dom'; import type { VirtualTrigger } from './VirtualTrigger.js'; -export type TriggerInteractions = +export type Constructor> = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + new (...args: any[]): T; + prototype: T; +}; + +export { Placement }; + +export type OverlayTypes = 'auto' | 'hint' | 'manual' | 'modal' | 'page'; + +export type TriggerInteractions = OverlayTypes; + +export type TriggerInteractionsV1 = | 'click' | 'longpress' | 'hover' @@ -28,23 +39,6 @@ export type OverlayTriggerInteractions = Extract< 'inline' | 'modal' | 'replace' >; -export interface OverlayOpenDetail { - content: HTMLElement; - contentTip?: HTMLElement; - delayed: boolean; - offset: number; - skidding?: number; - placement?: Placement; - receivesFocus?: 'auto'; - virtualTrigger?: VirtualTrigger; - trigger: HTMLElement; - root?: HTMLElement; - interaction: TriggerInteractions; - theme: ThemeData; - notImmediatelyClosable?: boolean; - abortPromise?: Promise; -} - export interface OverlayOpenCloseDetail { interaction: TriggerInteractions; reason?: 'external-click'; @@ -54,24 +48,22 @@ export interface OverlayCloseReasonDetail { reason?: 'external-click'; } -/** - * Used, via an event, to query details about how an element should be shown in - * an overlay - */ -export interface OverlayDisplayQueryDetail { - overlayRootName?: string; - overlayRootElement?: HTMLElement; - overlayContentTipElement?: HTMLElement; -} - -export type Placement = FloatingUIPlacement | 'none'; - export type OverlayOptions = { + delayed?: boolean; + notImmediatelyClosable?: boolean; + offset?: number | [number, number]; // supporting multi-axis + placement?: Placement; + receivesFocus?: 'auto' | 'true' | 'false'; + trigger?: HTMLElement | VirtualTrigger; + type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual'; +}; + +export type OverlayOptionsV1 = { root?: HTMLElement; delayed?: boolean; placement?: Placement; offset?: number; - receivesFocus?: 'auto'; + receivesFocus?: 'true' | 'false' | 'auto'; notImmediatelyClosable?: boolean; abortPromise?: Promise; virtualTrigger?: VirtualTrigger; @@ -79,8 +71,15 @@ export type OverlayOptions = { declare global { interface GlobalEventHandlersEventMap { - 'sp-overlay-query': CustomEvent; 'sp-open': CustomEvent; 'sp-close': CustomEvent; } } + +export type OpenableElement = HTMLElement & { + open: boolean; + tipElement?: HTMLElement; + updateComplete?: Promise; +}; + +export type OverlayState = 'closed' | 'opening' | 'opened' | 'closing'; diff --git a/packages/overlay/src/overlay-utils.ts b/packages/overlay/src/overlay-utils.ts deleted file mode 100644 index 6a7b706d1f..0000000000 --- a/packages/overlay/src/overlay-utils.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* -Copyright 2022 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import type { ActiveOverlay } from './ActiveOverlay'; - -export const parentOverlayOf = (el?: Element): ActiveOverlay | null => { - if (!el) return null; - const closestOverlay = el.closest('active-overlay'); - if (closestOverlay) { - return closestOverlay; - } - const rootNode = el.getRootNode() as ShadowRoot; - if (rootNode.host) { - return parentOverlayOf(rootNode.host); - } - return null; -}; - -export const findOverlaysRootedInOverlay = ( - rootOverlay: ActiveOverlay | undefined, - activeOverlays: ActiveOverlay[] -): ActiveOverlay[] => { - const overlays: ActiveOverlay[] = []; - if (!rootOverlay) return []; - for (const overlay of activeOverlays) { - if (!overlay.root) continue; - if (parentOverlayOf(overlay.root) === rootOverlay) { - overlays.push(overlay); - overlays.push( - ...findOverlaysRootedInOverlay(overlay, activeOverlays) - ); - } - } - return overlays; -}; diff --git a/packages/overlay/src/overlay.css b/packages/overlay/src/overlay.css new file mode 100644 index 0000000000..ba77895a0b --- /dev/null +++ b/packages/overlay/src/overlay.css @@ -0,0 +1,186 @@ +/* +Copyright 2022 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +:host { + display: contents; + pointer-events: none; + + /** + * duplicate --spectrum-overlay-animation-distance, which is out of scope + * rather than over write so we continue to get new values from Spectrum CSS + * if they are provided in the future. + **/ + --swc-overlay-animation-distance: var( + --spectrum-picker-m-texticon-popover-offset-y, + var(--spectrum-global-dimension-size-75) + ); +} + +.dialog { + margin: 0; + border: 0; + background: none; + padding: 0; + display: flex; + position: fixed; + overflow: visible; + opacity: 1 !important; + box-sizing: border-box; + max-height: calc(100vh - 16px); + max-height: calc(100dvh - 16px); + max-width: calc(100vw - 16px); + height: auto; + inset: auto; + top: 0; + left: 0; + + --sp-overlay-open: true; +} + +.dialog:not([is-visible]) { + translate: -999em -999em !important; +} + +.dialog:focus { + outline: none; +} + +dialog:modal { + --mod-popover-filter: var(--spectrum-popover-filter); +} + +:host(:not([open])) .dialog { + --sp-overlay-open: false; +} + +.dialog::backdrop { + display: none; +} + +.dialog:before { + position: absolute; + inset: -999em; + content: ''; + pointer-events: auto !important; +} + +.dialog:not(.not-immediately-closable):before { + display: none; +} + +.dialog > div { + width: 100%; +} + +::slotted(*) { + pointer-events: auto; +} + +::slotted(sp-popover) { + position: static; +} + +::slotted(sp-tooltip) { + --swc-tooltip-margin: 0; +} + +/** + * Offset the transition displacement from the trigger edge by + * padding the equivelent distance off of the opposite edge. + * + * + * Prepare for Context Menus with [popover] by adding margin/border + * that _should_ still be under the pointer when `pointerup` is dispatched. + * + **/ +.dialog:not([actual-placement])[placement*='top'] { + padding-block: var(--swc-overlay-animation-distance); + margin-top: var(--swc-overlay-animation-distance); +} + +.dialog:not([actual-placement])[placement*='right'] { + padding-inline: var(--swc-overlay-animation-distance); + margin-left: calc(-1 * var(--swc-overlay-animation-distance)); +} + +.dialog:not([actual-placement])[placement*='bottom'] { + padding-block: var(--swc-overlay-animation-distance); + margin-top: calc(-1 * var(--swc-overlay-animation-distance)); +} + +.dialog:not([actual-placement])[placement*='left'] { + padding-inline: var(--swc-overlay-animation-distance); + margin-left: var(--swc-overlay-animation-distance); +} + +.dialog[actual-placement*='top'] { + padding-block: var(--swc-overlay-animation-distance); + margin-top: var(--swc-overlay-animation-distance); +} + +.dialog[actual-placement*='right'] { + padding-inline: var(--swc-overlay-animation-distance); + margin-left: calc(-1 * var(--swc-overlay-animation-distance)); +} + +.dialog[actual-placement*='bottom'] { + padding-block: var(--swc-overlay-animation-distance); + margin-top: calc(-1 * var(--swc-overlay-animation-distance)); +} + +.dialog[actual-placement*='left'] { + padding-inline: var(--swc-overlay-animation-distance); + margin-left: var(--swc-overlay-animation-distance); +} + +slot[name='longpress-describedby-descriptor'] { + display: none; +} + +/* stylelint-disable */ +@supports selector(:open) { + .dialog { + opacity: 0; + } + + .dialog:open { + opacity: 1; + + --mod-popover-filter: var(--spectrum-popover-filter); + } +} + +@supports selector(:popover-open) { + .dialog { + opacity: 0; + } + + .dialog:popover-open { + opacity: 1; + + --mod-popover-filter: var(--spectrum-popover-filter); + } +} + +@supports (not selector(:open)) and (not selector(:popover-open)) { + :host:not([open]) .dialog { + pointer-events: none; + } + + .dialog[actual-placement] { + z-index: calc( + var(--swc-overlay-z-index-base, 1000) + + var(--swc-overlay-open-count) + ); + } +} +/* stylelint-enable */ diff --git a/packages/overlay/src/overlay.ts b/packages/overlay/src/overlay.ts deleted file mode 100644 index 0d777ab1de..0000000000 --- a/packages/overlay/src/overlay.ts +++ /dev/null @@ -1,184 +0,0 @@ -/* -Copyright 2020 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import type { ThemeData } from '@spectrum-web-components/theme/src/Theme.js'; -import type { - OverlayDisplayQueryDetail, - OverlayOptions, - TriggerInteractions, -} from './overlay-types'; -import { OverlayStack } from './overlay-stack.js'; - -/** - * This class allows access to the overlay system which allows a client to - * position an element in the overlay positioned relative to another node. - */ -export class Overlay { - private static overlayStack = new OverlayStack(); - - private isOpen = false; - private overlayElement: HTMLElement; - private owner: HTMLElement; - private interaction: TriggerInteractions; - - /** - * - * @param owner the parent element we will use to position the overlay element - * @param interaction the type of interaction that caused this overlay to be shown - * @param overlayElement the item to display as an overlay - */ - constructor( - owner: HTMLElement, - interaction: TriggerInteractions, - overlayElement: HTMLElement - ) { - this.owner = owner; - this.overlayElement = overlayElement; - this.interaction = interaction; - } - - /** - * Open an overlay - * - * @param owner the parent element we will use to position the overlay element - * @param interaction the type of interaction that caused this overlay to be shown - * @param overlayElement the item to display as an overlay - * @param options display parameters - * @param options.delayed if true delay opening of the overlay based on the global warmup/cooldown timer - * @param options.offset distance to offset the overlay - * @param options.placement side on which to position the overlay - * @returns an Overlay object which can be used to close the overlay - */ - public static async open( - owner: HTMLElement, - interaction: TriggerInteractions, - overlayElement: HTMLElement, - options: OverlayOptions - ): Promise<() => void> { - const overlay = new Overlay(owner, interaction, overlayElement); - if (window.__swc.DEBUG) { - window.__swc.warn( - undefined, - 'The Overlay API is currently being refactored and there are likely to be breaking changes, deprecations and/or removals in a future release. The SWC team wants feedback from direct Overlay API consumers like you - please share your thoughts on the future of overlays here:', - 'https://github.com/adobe/spectrum-web-components/discussions/2764', - { - type: 'default', - level: 'deprecation', - } - ); - } - await overlay.open(options); - return (): void => { - overlay.close(); - }; - } - - public static update(): void { - const overlayUpdateEvent = new CustomEvent('sp-update-overlays', { - bubbles: true, - composed: true, - cancelable: true, - }); - document.dispatchEvent(overlayUpdateEvent); - } - - /** - * Open an overlay - * - * @param options display parameters - * @param options.delayed delay before opening the overlay - * @param options.offset distance to offset the overlay - * @param options.placement side on which to position the overlay - * @returns a Promise that resolves to true if this operation was cancelled - */ - public async open({ - abortPromise, - delayed, - offset = 0, - placement = 'top', - receivesFocus, - notImmediatelyClosable, - virtualTrigger, - root, - }: OverlayOptions): Promise { - /* c8 ignore next */ - if (this.isOpen) return true; - - if (delayed === undefined) { - delayed = this.overlayElement.hasAttribute('delayed'); - } - - const queryThemeDetail: ThemeData = { - color: undefined, - scale: undefined, - lang: undefined, - theme: undefined, - }; - const queryThemeEvent = new CustomEvent('sp-query-theme', { - bubbles: true, - composed: true, - detail: queryThemeDetail, - cancelable: true, - }); - this.owner.dispatchEvent(queryThemeEvent); - - const overlayDetailQuery: OverlayDisplayQueryDetail = {}; - const queryOverlayDetailEvent = - new CustomEvent('sp-overlay-query', { - bubbles: true, - composed: true, - detail: overlayDetailQuery, - cancelable: true, - }); - this.overlayElement.dispatchEvent(queryOverlayDetailEvent); - - await Overlay.overlayStack.openOverlay({ - abortPromise, - content: this.overlayElement, - contentTip: overlayDetailQuery.overlayContentTipElement, - delayed, - offset: offset, - placement: placement, - trigger: this.owner, - interaction: this.interaction, - theme: queryThemeDetail, - receivesFocus, - root, - notImmediatelyClosable, - virtualTrigger, - ...overlayDetailQuery, - }); - this.isOpen = true; - return true; - } - - /** - * Close the overlay if it is open - */ - public close(): void { - Overlay.overlayStack.closeOverlay(this.overlayElement); - } -} - -/** - * Announces that an overlay-based UI element has opened - * @event sp-open - * @type {object} - * @property {TriggerInteractions} interaction type of interaction that triggered the opening - */ - -/** - * Announces that an overlay-based UI element has opened - * @event sp-close - * @type {object} - * @property {TriggerInteractions} interaction type of interaction that triggered the closing - */ diff --git a/packages/overlay/src/topLayerOverTransforms.ts b/packages/overlay/src/topLayerOverTransforms.ts new file mode 100644 index 0000000000..c73cc53d58 --- /dev/null +++ b/packages/overlay/src/topLayerOverTransforms.ts @@ -0,0 +1,116 @@ +/* +Copyright 2022 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import type { Middleware, MiddlewareState } from '@floating-ui/dom'; +import { + getContainingBlock, + getWindow, + isContainingBlock, +} from '@floating-ui/utils/dom'; +import { VirtualTrigger } from './VirtualTrigger.js'; + +export const topLayerOverTransforms = (): Middleware => ({ + name: 'topLayer', + async fn(middlewareArguments: MiddlewareState) { + const { + x, + y, + elements: { reference, floating }, + } = middlewareArguments; + let onTopLayer = false; + let topLayerIsFloating = false; + let withinReference = false; + const diffCoords = { + x: 0, + y: 0, + }; + try { + onTopLayer = onTopLayer || floating.matches(':popover-open'); + // eslint-disable-next-line no-empty + } catch (error) {} + try { + onTopLayer = onTopLayer || floating.matches(':open'); + // eslint-disable-next-line no-empty + } catch (error) {} + try { + onTopLayer = onTopLayer || floating.matches(':modal'); + // eslint-disable-next-line no-empty + /* c8 ignore next 3 */ + } catch (error) {} + topLayerIsFloating = onTopLayer; + const dialogAncestorQueryEvent = new Event('floating-ui-dialog-test', { + composed: true, + bubbles: true, + }); + floating.addEventListener( + 'floating-ui-dialog-test', + (event: Event) => { + (event.composedPath() as unknown as Element[]).forEach((el) => { + withinReference = withinReference || el === reference; + if (el === floating || el.localName !== 'dialog') return; + try { + onTopLayer = onTopLayer || el.matches(':modal'); + // eslint-disable-next-line no-empty + /* c8 ignore next */ + } catch (error) {} + }); + }, + { once: true } + ); + floating.dispatchEvent(dialogAncestorQueryEvent); + let overTransforms = false; + if (!(reference instanceof VirtualTrigger)) { + const root = (withinReference ? reference : floating) as Element; + const containingBlock = isContainingBlock(root) + ? root + : getContainingBlock(root); + if ( + containingBlock !== null && + getWindow(containingBlock) !== + (containingBlock as unknown as Window) + ) { + const css = getComputedStyle(containingBlock); + overTransforms = + css.transform !== 'none' || css.filter + ? css.filter !== 'none' + : false; + } + + if (onTopLayer && overTransforms && containingBlock) { + const rect = containingBlock.getBoundingClientRect(); + diffCoords.x = rect.x; + diffCoords.y = rect.y; + } + } + + if (onTopLayer && topLayerIsFloating) { + return { + x: x + diffCoords.x, + y: y + diffCoords.y, + data: diffCoords, + }; + } + + if (onTopLayer) { + return { + x, + y, + data: diffCoords, + }; + } + + return { + x: x - diffCoords.x, + y: y - diffCoords.y, + data: diffCoords, + }; + }, +}); diff --git a/packages/overlay/stories/overlay-element.stories.ts b/packages/overlay/stories/overlay-element.stories.ts new file mode 100644 index 0000000000..02b9dd6a9e --- /dev/null +++ b/packages/overlay/stories/overlay-element.stories.ts @@ -0,0 +1,507 @@ +/* +Copyright 2022 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { html, TemplateResult } from '@spectrum-web-components/base'; +import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; +import '@spectrum-web-components/overlay/sp-overlay.js'; +import '@spectrum-web-components/action-button/sp-action-button.js'; +import '@spectrum-web-components/action-menu/sp-action-menu.js'; +import '@spectrum-web-components/action-group/sp-action-group.js'; +import '@spectrum-web-components/popover/sp-popover.js'; +import '@spectrum-web-components/menu/sp-menu-group.js'; +import '@spectrum-web-components/menu/sp-menu-item.js'; +import '@spectrum-web-components/menu/sp-menu-divider.js'; +import '@spectrum-web-components/tooltip/sp-tooltip.js'; +import '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js'; +import '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js'; +import '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js'; +import { Placement } from '@floating-ui/dom'; +import { OverlayTypes } from '../src/overlay-types.js'; +import { notAgain } from '../../dialog/stories/dialog-base.stories.js'; + +export default { + title: 'Overlay Element', + component: 'sp-overlay', + args: { + open: true, + delayed: false, + }, + argTypes: { + open: { + name: 'open', + type: { name: 'boolean', required: false }, + description: 'Whether the second accordion item is open.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: { + type: 'boolean', + }, + }, + delayed: { + name: 'delayed', + type: { name: 'boolean', required: false }, + description: 'Whether the tooltips are delayed.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + control: { + type: 'boolean', + }, + }, + }, +}; + +type Properties = { + delayed: boolean; + interaction: 'click' | 'hover' | 'longpress'; + open?: boolean; + placement?: Placement; + type?: OverlayTypes; +}; + +const Template = ({ + interaction, + open, + placement, + type, +}: Properties): TemplateResult => html` + Open the overlay + + +

+ Content goes here. + ${type === 'modal' || type === 'page' + ? html` + Or, a link, + + Spectrum Web Components + + . + ` + : ''} +

+ + +`; + +export const modal = (args: Properties): TemplateResult => Template(args); +modal.args = { + interaction: 'click', + placement: 'right', + type: 'modal', +}; + +export const page = ({ + interaction, + open, + placement, + type, +}: Properties): TemplateResult => html` + Open the overlay + + ${notAgain()} + +`; +page.args = { + interaction: 'click', + placement: 'right', + type: 'page', +}; + +export const click = (args: Properties): TemplateResult => Template(args); +click.args = { + interaction: 'click', + placement: 'right', + type: 'auto', +}; + +export const hover = (args: Properties): TemplateResult => Template(args); +hover.args = { + interaction: 'hover', + placement: 'right', +}; + +export const longpress = (args: Properties): TemplateResult => Template(args); +longpress.args = { + interaction: 'longpress', + placement: 'right', + type: 'auto', +}; + +export const all = ({ delayed }: Properties): TemplateResult => html` + + Open the overlay + + + Click content + + + Hover content + + + Longpress content + +`; + +export const actionGroup = ({ delayed }: Properties): TemplateResult => { + const popoverOffset = [6, -13] as [number, number]; + return html` + + + + + + + + + + + + + + + cms + + Update All Content + + + Refresh All XDs + + + + ssg + + Clear Cache + + + + vrt + + Contributions + + + Internal + + Public + + Patterns + + All + + + + Logout + + + + + + Hover + + + + + + + + + + + + + + + + + + Hover + + + + + + + + + + + + + + + + + + Hover + + + + + + + + + + + + + + + + + `; +}; + +export const actionGroupWithFilters = ({ + delayed, +}: Properties): TemplateResult => { + const popoverOffset = [6, -13] as [number, number]; + return html` + +

+ This story outlines some CSS usage that is not yet covered by the + placement calculations within the Overlay API. +

+ + + + + + Hover + + + + + + + + + + + + + + + + + + + + + + + + Hover + + + + + cms + + Update All Content + + + Refresh All XDs + + + + ssg + + Clear Cache + + + + vrt + + Contributions + + + Internal + + Public + + Patterns + + All + + + + Logout + + + + + + Hover + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; +}; diff --git a/packages/overlay/stories/overlay-story-components.ts b/packages/overlay/stories/overlay-story-components.ts index 5392561f82..e08149c73a 100644 --- a/packages/overlay/stories/overlay-story-components.ts +++ b/packages/overlay/stories/overlay-story-components.ts @@ -113,17 +113,19 @@ class OverlayDrag extends LitElement { ) as HTMLElement; if (!this.targetElement) return; - this.targetElement.addEventListener('mousedown', (event) => - this.onMouseDown(event) + this.targetElement.addEventListener( + 'pointerdown', + (event: PointerEvent) => this.onMouseDown(event) ); this.resetTargetPosition(); } - private onMouseDown(event: MouseEvent): void { + private onMouseDown(event: PointerEvent): void { const target = event.target as HTMLElement; const parent = target.parentElement; if (!parent) return; + target.setPointerCapture(event.pointerId); const max = { x: parent.offsetWidth - target.offsetWidth, @@ -152,13 +154,14 @@ class OverlayDrag extends LitElement { Overlay.update(); }; - const onMouseUp = (): void => { - document.removeEventListener('mousemove', onMouseMove); - document.removeEventListener('mouseup', onMouseUp); + const onMouseUp = (event: PointerEvent): void => { + target.setPointerCapture(event.pointerId); + document.removeEventListener('pointermove', onMouseMove); + document.removeEventListener('pointerup', onMouseUp); }; - document.addEventListener('mousemove', onMouseMove); - document.addEventListener('mouseup', onMouseUp); + document.addEventListener('pointermove', onMouseMove); + document.addEventListener('pointerup', onMouseUp); } public resetTargetPosition(): void { @@ -289,7 +292,6 @@ class RecursivePopover extends LitElement { slot="click-content" direction="${this.placement}" tip - open > ${this.depth < MAX_DEPTH @@ -320,7 +322,7 @@ export class PopoverContent extends LitElement { override render(): TemplateResult { return html` - + Open me diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts index 882345383b..ff98e97f6b 100644 --- a/packages/overlay/stories/overlay.stories.ts +++ b/packages/overlay/stories/overlay.stories.ts @@ -22,6 +22,7 @@ import { import '@spectrum-web-components/action-button/sp-action-button.js'; import '@spectrum-web-components/action-group/sp-action-group.js'; import '@spectrum-web-components/button/sp-button.js'; +import '@spectrum-web-components/dialog/sp-dialog.js'; import '@spectrum-web-components/dialog/sp-dialog-wrapper.js'; import { DialogWrapper } from '@spectrum-web-components/dialog'; import '@spectrum-web-components/field-label/sp-field-label.js'; @@ -30,8 +31,10 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js'; import '@spectrum-web-components/overlay/overlay-trigger.js'; import { Picker } from '@spectrum-web-components/picker'; import '@spectrum-web-components/picker/sp-picker.js'; +import '@spectrum-web-components/overlay/sp-overlay.js'; import '@spectrum-web-components/menu/sp-menu.js'; import '@spectrum-web-components/menu/sp-menu-item.js'; +import '@spectrum-web-components/menu/sp-menu-group.js'; import '@spectrum-web-components/menu/sp-menu-divider.js'; import '@spectrum-web-components/popover/sp-popover.js'; import '@spectrum-web-components/slider/sp-slider.js'; @@ -48,6 +51,7 @@ import './overlay-story-components.js'; import { render } from 'lit-html'; import { Popover } from '@spectrum-web-components/popover'; import { Button } from '@spectrum-web-components/button'; +import { PopoverContent } from './overlay-story-components.js'; const storyStyles = html` + +
+ Click me +
+ + Ok, now hover the other trigger + + + +
+ Then hover me +
+ + Now click my trigger -- I should stay open, but the other + overlay should close + + +
+ `; +}; +clickAndHoverTargets.swc_vrt = { + skip: true, +}; class ScrollForcer extends HTMLElement { ready!: (value: boolean | PromiseLike) => void; @@ -237,14 +356,19 @@ class ScrollForcer extends HTMLElement { this.previousElementSibling?.addEventListener( 'sp-opened', - () => { - this.doScroll(); - }, - { once: true } + this.doScroll ); + await nextFrame(); + await nextFrame(); + (this.previousElementSibling?.lastElementChild as OverlayTrigger).open = + 'click'; } - async doScroll(): Promise { + doScroll = async (): Promise => { + this.previousElementSibling?.addEventListener( + 'sp-opened', + this.doScroll + ); await nextFrame(); await nextFrame(); await nextFrame(); @@ -257,7 +381,7 @@ class ScrollForcer extends HTMLElement { await nextFrame(); await nextFrame(); this.ready(true); - } + }; private readyPromise: Promise = Promise.resolve(false); @@ -274,7 +398,6 @@ export const clickContentClosedOnScroll = (
${template({ ...args, - open: 'click', })}
`; @@ -294,92 +417,155 @@ clickContentClosedOnScroll.decorators = [ `, ]; -export const noCloseOnResize = (args: Properties): TemplateResult => html` - - ${template({ - ...args, - open: 'click', - })} -`; -noCloseOnResize.swc_vrt = { - skip: true, +class ComplexModalReady extends HTMLElement { + ready!: (value: boolean | PromiseLike) => void; + + constructor() { + super(); + this.readyPromise = new Promise((res) => { + this.ready = res; + this.setup(); + }); + } + + async setup(): Promise { + await nextFrame(); + + const overlay = document.querySelector( + `overlay-trigger` + ) as OverlayTrigger; + overlay.addEventListener('sp-opened', this.handleTriggerOpened); + } + + handleTriggerOpened = async (): Promise => { + await nextFrame(); + + const picker = document.querySelector('#test-picker') as Picker; + picker.addEventListener('sp-opened', this.handlePickerOpen); + picker.open = true; + }; + + handlePickerOpen = async (): Promise => { + const picker = document.querySelector('#test-picker') as Picker; + const actions = [nextFrame, picker.updateComplete]; + + await Promise.all(actions); + + this.ready(true); + }; + + private readyPromise: Promise = Promise.resolve(false); + + get updateComplete(): Promise { + return this.readyPromise; + } +} + +customElements.define('complex-modal-ready', ComplexModalReady); + +const complexModalDecorator = (story: () => TemplateResult): TemplateResult => { + return html` + ${story()} + + `; +}; + +export const complexModal = (): TemplateResult => { + return html` + + + + + Selection type: + + + Deselect + Select inverse + Feather... + Select and mask... + + Save selection + Make work path + + + + Toggle Dialog + + + `; }; +complexModal.decorators = [complexModalDecorator]; + export const customizedClickContent = ( args: Properties ): TemplateResult => html` - ${template({ ...args, open: 'click', })} `; -const extraText = html` -

This is some text.

-

This is some text.

-

- This is a - link - . -

-`; - -export const inline = (): TemplateResult => { - const closeEvent = new Event('close', { bubbles: true, composed: true }); - return html` - - Open - - { - event.target.dispatchEvent(closeEvent); - }} - > - Close - - - - ${extraText} - `; -}; - -export const replace = (): TemplateResult => { - const closeEvent = new Event('close', { bubbles: true, composed: true }); - return html` - - Open - - { - event.target.dispatchEvent(closeEvent); - }} - > - Close - - - - ${extraText} - `; -}; - export const deep = (): TemplateResult => html` Open popover 1 with buttons + selfmanaged Tooltips - + @@ -401,7 +587,7 @@ export const deep = (): TemplateResult => html` Open popover 2 with buttons without ToolTips - + X Y @@ -413,76 +599,36 @@ deep.swc_vrt = { skip: true, }; -export const modalLoose = (): TemplateResult => { - const closeEvent = new Event('close', { bubbles: true, composed: true }); - return html` - - Open - - event.target.dispatchEvent(closeEvent)} - > -

Loose Dialog

-

- The - sp-dialog - element is not "meant" to be a modal alone. In that way it - does not manage its own - open - attribute or outline when it should have - pointer-events: auto - . It's a part of this test suite to prove that content in - this way can be used in an - overlay-trigger - element. -

+export const deepChildTooltip = (): TemplateResult => html` + + Open popover + + +

Let us open another overlay here

+ + + Open sub popover + + + +

+ Render an action button with tooltips. Clicking + the action button shouldn't close everything +

+ + Button with self-managed tooltip + + Deep Child ToolTip + + + Just a button + + + - - ${extraText} - `; -}; - -export const modalManaged = (): TemplateResult => { - const closeEvent = new Event('close', { bubbles: true, composed: true }); - return html` - - Open - { - event.target.dispatchEvent(closeEvent); - }} - @secondary=${( - event: Event & { target: DialogWrapper } - ): void => { - event.target.dispatchEvent(closeEvent); - }} - @cancel=${(event: Event & { target: DialogWrapper }): void => { - event.target.dispatchEvent(closeEvent); - }} - > -

- The - sp-dialog-wrapper - element has been prepared for use in an - overlay-trigger - element by it's combination of modal, underlay, etc. styles - and features. -

- - - ${extraText} - `; -}; + + +`; export const deepNesting = (): TemplateResult => { const color = window.__swc_hack_knobs__.defaultColor; @@ -514,6 +660,176 @@ export const deepNesting = (): TemplateResult => { `; }; +class DefinedOverlayReady extends HTMLElement { + ready!: (value: boolean | PromiseLike) => void; + + connectedCallback(): void { + if (!!this.ready) return; + + this.readyPromise = new Promise((res) => { + this.ready = res; + this.setup(); + }); + } + + overlayElement!: OverlayTrigger; + popoverElement!: PopoverContent; + + async setup(): Promise { + await nextFrame(); + await nextFrame(); + + this.overlayElement = document.querySelector( + `overlay-trigger` + ) as OverlayTrigger; + const button = document.querySelector( + `[slot="trigger"]` + ) as HTMLButtonElement; + this.overlayElement.addEventListener( + 'sp-opened', + this.handleTriggerOpened + ); + await nextFrame(); + await nextFrame(); + button.click(); + } + + handleTriggerOpened = async (): Promise => { + this.overlayElement.removeEventListener( + 'sp-opened', + this.handleTriggerOpened + ); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); + + this.popoverElement = document.querySelector( + 'popover-content' + ) as PopoverContent; + if (!this.popoverElement) { + return; + } + this.popoverElement.addEventListener( + 'sp-opened', + this.handlePopoverOpen + ); + await nextFrame(); + await nextFrame(); + this.popoverElement.button.click(); + }; + + handlePopoverOpen = async (): Promise => { + await nextFrame(); + + this.ready(true); + }; + + disconnectedCallback(): void { + this.overlayElement.removeEventListener( + 'sp-opened', + this.handleTriggerOpened + ); + this.popoverElement.removeEventListener( + 'sp-opened', + this.handlePopoverOpen + ); + } + + private readyPromise: Promise = Promise.resolve(false); + + get updateComplete(): Promise { + return this.readyPromise; + } +} + +customElements.define('defined-overlay-ready', DefinedOverlayReady); + +const definedOverlayDecorator = ( + story: () => TemplateResult +): TemplateResult => { + return html` + ${story()} + + `; +}; + +export const definedOverlayElement = (): TemplateResult => { + return html` + + Open popover + + + + + + + `; +}; + +definedOverlayElement.decorators = [definedOverlayDecorator]; + +export const detachedElement = (): TemplateResult => { + let overlay: Overlay | undefined; + const openDetachedOverlayContent = async ({ + target, + }: { + target: HTMLElement; + }): Promise => { + if (overlay) { + overlay.open = false; + overlay = undefined; + return; + } + const div = document.createElement('div'); + (div as HTMLDivElement & { open: boolean }).open = false; + div.textContent = 'This div is overlaid'; + div.setAttribute( + 'style', + ` + background-color: var(--spectrum-global-color-gray-50); + color: var(--spectrum-global-color-gray-800); + border: 1px solid; + padding: 2em; + ` + ); + overlay = await Overlay.open(div, { + type: 'auto', + trigger: target, + receivesFocus: 'auto', + placement: 'bottom', + offset: 0, + }); + overlay.addEventListener('sp-closed', () => { + overlay = undefined; + }); + target.insertAdjacentElement('afterend', overlay); + }; + requestAnimationFrame(() => { + openDetachedOverlayContent({ + target: document.querySelector( + '#detached-content-trigger' + ) as HTMLElement, + }); + }); + return html` + + + + + `; +}; + export const edges = (): TemplateResult => { return html` - - - - - Click to open popover - - - -
- -
- The background of this div should be blue -
- - Press Me - - -
- Another Popover -
- - - - - Click to open another popover. - - -
- - - - - `; -}; - -export const sideHoverDraggable = (): TemplateResult => { - return html` - ${storyStyles} - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Vivamus egestas sed enim sed condimentum. Nunc facilisis - scelerisque massa sed luctus. Orci varius natoque penatibus - et magnis dis parturient montes, nascetur ridiculus mus. - Suspendisse sagittis sodales purus vitae ultricies. Integer - at dui sem. Sed quam tortor, ornare in nisi et, rhoncus - lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh. - Sed feugiat semper libero, sit amet vehicula orci fermentum - id. Vivamus imperdiet egestas luctus. Mauris tincidunt - malesuada ante, faucibus viverra nunc blandit a. Fusce et - nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a - ultricies dui. In hac habitasse platea dictumst. Curabitur - gravida lobortis vestibulum. - - - + + Open + + { + event.target.dispatchEvent(closeEvent); + }} + > + Close + + + + ${extraText} `; }; @@ -707,176 +947,182 @@ export const longpress = (): TemplateResult => { `; }; -export const clickAndHoverTargets = (): TemplateResult => { +export const modalLoose = (): TemplateResult => { + const closeEvent = new Event('close', { bubbles: true, composed: true }); return html` -
- ${storyStyles} - - -
- Click me -
- - Ok, now hover the other trigger - - - -
- Then hover me -
- - Now click my trigger -- I should stay open, but the other - overlay should close - - -
+ + Open + + event.target.dispatchEvent(closeEvent)} + > +

Loose Dialog

+

+ The + sp-dialog + element is not "meant" to be a modal alone. In that way it + does not manage its own + open + attribute or outline when it should have + pointer-events: auto + . It's a part of this test suite to prove that content in + this way can be used in an + overlay-trigger + element. +

+ + + ${extraText} `; }; -clickAndHoverTargets.swc_vrt = { - skip: true, -}; - -function nextFrame(): Promise { - return new Promise((res) => requestAnimationFrame(() => res())); -} - -class ComplexModalReady extends HTMLElement { - ready!: (value: boolean | PromiseLike) => void; - - constructor() { - super(); - this.readyPromise = new Promise((res) => { - this.ready = res; - this.setup(); - }); - } - - async setup(): Promise { - await nextFrame(); - - const overlay = document.querySelector( - `overlay-trigger` - ) as OverlayTrigger; - overlay.addEventListener('sp-opened', this.handleTriggerOpened); - } - - handleTriggerOpened = async (): Promise => { - await nextFrame(); - const picker = document.querySelector('#test-picker') as Picker; - picker.addEventListener('sp-opened', this.handlePickerOpen); - picker.open = true; - }; - - handlePickerOpen = async (): Promise => { - const picker = document.querySelector('#test-picker') as Picker; - const actions = [nextFrame, picker.updateComplete]; - - await Promise.all(actions); +export const modalManaged = (): TemplateResult => { + const closeEvent = new Event('close', { bubbles: true, composed: true }); + return html` + + Open + { + event.target.dispatchEvent(closeEvent); + }} + @secondary=${( + event: Event & { target: DialogWrapper } + ): void => { + event.target.dispatchEvent(closeEvent); + }} + @cancel=${(event: Event & { target: DialogWrapper }): void => { + event.target.dispatchEvent(closeEvent); + }} + > +

+ The + sp-dialog-wrapper + element has been prepared for use in an + overlay-trigger + element by it's combination of modal, underlay, etc. styles + and features. +

+ + + ${extraText} + `; +}; - this.ready(true); - }; +export const modalWithinNonModal = (): TemplateResult => { + return html` + + + Open inline overlay + + + + + + Open modal overlay + + + + Modal overlay + + + + + + + `; +}; - private readyPromise: Promise = Promise.resolve(false); +export const noCloseOnResize = (args: Properties): TemplateResult => html` + + ${template({ + ...args, + open: 'click', + })} +`; +noCloseOnResize.swc_vrt = { + skip: true, +}; - get updateComplete(): Promise { - return this.readyPromise; - } -} +export const openClickContent = (args: Properties): TemplateResult => + template({ + ...args, + open: 'click', + }); -customElements.define('complex-modal-ready', ComplexModalReady); +export const openHoverContent = (args: Properties): TemplateResult => + template({ + ...args, + open: 'hover', + }); -const complexModalDecorator = (story: () => TemplateResult): TemplateResult => { +export const replace = (): TemplateResult => { + const closeEvent = new Event('close', { bubbles: true, composed: true }); return html` - ${story()} - + + Open + + { + event.target.dispatchEvent(closeEvent); + }} + > + Close + + + + ${extraText} `; }; -export const complexModal = (): TemplateResult => { +export const sideHoverDraggable = (): TemplateResult => { return html` + ${storyStyles} - - - - Selection type: - - - Deselect - Select inverse - Feather... - Select and mask... - - Save selection - Make work path - - - - Toggle Dialog - - + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Vivamus egestas sed enim sed condimentum. Nunc facilisis + scelerisque massa sed luctus. Orci varius natoque penatibus + et magnis dis parturient montes, nascetur ridiculus mus. + Suspendisse sagittis sodales purus vitae ultricies. Integer + at dui sem. Sed quam tortor, ornare in nisi et, rhoncus + lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh. + Sed feugiat semper libero, sit amet vehicula orci fermentum + id. Vivamus imperdiet egestas luctus. Mauris tincidunt + malesuada ante, faucibus viverra nunc blandit a. Fusce et + nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a + ultricies dui. In hac habitasse platea dictumst. Curabitur + gravida lobortis vestibulum. + + + `; }; -complexModal.decorators = [complexModalDecorator]; - export const superComplexModal = (): TemplateResult => { return html` - + Toggle Dialog @@ -922,6 +1168,89 @@ export const superComplexModal = (): TemplateResult => { `; }; +export const updated = (): TemplateResult => { + return html` + ${storyStyles} + + + + + + Click to open popover + + + + +
+ The background of this div should be blue +
+ + Press Me + + + Another Popover + + + + + Click to open another popover. + + + + + + + `; +}; + +export const updating = (): TemplateResult => { + const update = (): void => { + const button = document.querySelector('[slot="trigger"]') as Button; + button.style.left = `${Math.floor(Math.random() * 200)}px`; + button.style.top = `${Math.floor(Math.random() * 200)}px`; + button.style.position = 'fixed'; + }; + return html` + + + Open inline overlay + + + + + Update trigger location. + + + + + `; +}; + +updating.swc_vrt = { + skip: true, +}; + class StartEndContextmenu extends HTMLElement { override shadowRoot!: ShadowRoot; constructor() { @@ -946,14 +1275,19 @@ class StartEndContextmenu extends HTMLElement { customElements.define('start-end-contextmenu', StartEndContextmenu); -export const virtualElement = (args: Properties): TemplateResult => { +export const virtualElementV1 = (args: Properties): TemplateResult => { const contextMenuTemplate = (kind = ''): TemplateResult => html` - event.target?.dispatchEvent( - new Event('close', { bubbles: true }) - )} + @click=${(event: PointerEvent) => { + if ( + (event.target as HTMLElement).localName === 'sp-menu-item' + ) { + event.target?.dispatchEvent( + new Event('close', { bubbles: true }) + ); + } + }} > @@ -969,8 +1303,10 @@ export const virtualElement = (args: Properties): TemplateResult => { `; - const pointerenter = async (event: PointerEvent): Promise => { + const handleContextmenu = async (event: PointerEvent): Promise => { event.preventDefault(); + event.stopPropagation(); + const source = event.composedPath()[0] as HTMLDivElement; const { id } = source; const trigger = event.target as HTMLElement; @@ -978,10 +1314,13 @@ export const virtualElement = (args: Properties): TemplateResult => { const fragment = document.createDocumentFragment(); render(contextMenuTemplate(id), fragment); const popover = fragment.querySelector('sp-popover') as Popover; - openOverlay(trigger, 'modal', popover, { + + openOverlay(trigger, 'click', popover, { placement: args.placement, receivesFocus: 'auto', virtualTrigger, + offset: 0, + notImmediatelyClosable: true, }); }; return html` @@ -993,266 +1332,84 @@ export const virtualElement = (args: Properties): TemplateResult => { `; }; -virtualElement.args = { +virtualElementV1.args = { placement: 'right-start' as Placement, }; -export const detachedElement = (): TemplateResult => { - let closeOverlay: (() => void) | undefined; - const openDetachedOverlayContent = async ({ - target, - }: { - target: HTMLElement; - }): Promise => { - if (closeOverlay) { - closeOverlay(); - closeOverlay = undefined; - return; - } - const div = document.createElement('div'); - div.textContent = 'This div is overlaid'; - div.setAttribute( - 'style', - ` - background-color: var(--spectrum-global-color-gray-50); - color: var(--spectrum-global-color-gray-800); - border: 1px solid; - padding: 2em; - ` - ); - closeOverlay = await Overlay.open(target, 'click', div, { - offset: 0, - placement: 'bottom', - }); - }; - requestAnimationFrame(() => { - openDetachedOverlayContent({ - target: document.querySelector( - '#detached-content-trigger' - ) as HTMLElement, - }); - }); - return html` - (closeOverlay = undefined)} +export const virtualElement = (args: Properties): TemplateResult => { + const contextMenuTemplate = (kind = ''): TemplateResult => html` + { + if ( + (event.target as HTMLElement).localName === 'sp-menu-item' + ) { + event.target?.dispatchEvent( + new Event('close', { bubbles: true }) + ); + } + }} > - - + + + Menu source: ${kind} + Deselect + Select inverse + Feather... + Select and mask... + + Save selection + Make work path + + + `; -}; + const handleContextmenu = async (event: PointerEvent): Promise => { + event.preventDefault(); + event.stopPropagation(); -class DefinedOverlayReady extends HTMLElement { - ready!: (value: boolean | PromiseLike) => void; + const source = event.composedPath()[0] as HTMLDivElement; + const { id } = source; + const trigger = event.target as HTMLElement; + const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY); + const fragment = document.createDocumentFragment(); + render(contextMenuTemplate(id), fragment); + const popover = fragment.querySelector('sp-popover') as Popover; - constructor() { - super(); - this.readyPromise = new Promise((res) => { - this.ready = res; - this.setup(); + const overlay = await openOverlay(popover, { + trigger: virtualTrigger, + placement: args.placement, + offset: 0, + notImmediatelyClosable: true, + type: 'auto', }); - } - - async setup(): Promise { - await nextFrame(); - - const overlay = document.querySelector( - `overlay-trigger` - ) as OverlayTrigger; - const button = document.querySelector( - `[slot="trigger"]` - ) as HTMLButtonElement; - overlay.addEventListener('sp-opened', this.handleTriggerOpened); - button.click(); - } - - handleTriggerOpened = async (): Promise => { - await nextFrame(); - - const popover = document.querySelector('popover-content'); - if (!popover) { - return; - } - popover.addEventListener('sp-opened', this.handlePopoverOpen); - popover.button.click(); - }; - - handlePopoverOpen = async (): Promise => { - await nextFrame(); - - this.ready(true); - }; - - private readyPromise: Promise = Promise.resolve(false); - - get updateComplete(): Promise { - return this.readyPromise; - } -} - -customElements.define('defined-overlay-ready', DefinedOverlayReady); - -const definedOverlayDecorator = ( - story: () => TemplateResult -): TemplateResult => { - return html` - ${story()} - - `; -}; - -export const definedOverlayElement = (): TemplateResult => { - return html` - - Open popover - - - - - - - `; -}; - -definedOverlayElement.decorators = [definedOverlayDecorator]; - -export const modalWithinNonModal = (): TemplateResult => { - return html` - - - Open inline overlay - - - - - - Open modal overlay - - - - Modal overlay - - - - - - - `; -}; - -export const updating = (): TemplateResult => { - const update = (): void => { - const button = document.querySelector('[slot="trigger"]') as Button; - button.style.left = `${Math.floor(Math.random() * 200)}px`; - button.style.top = `${Math.floor(Math.random() * 200)}px`; - button.style.position = 'fixed'; - Overlay.update(); - }; - return html` - - - Open inline overlay - - - - - Update trigger location. - - - - - `; -}; - -updating.swc_vrt = { - skip: true, -}; - -export const accordion = (): TemplateResult => { - const handleToggle = (): void => { - Overlay.update(); + trigger.insertAdjacentElement('afterend', overlay); }; return html` - - - Open overlay w/ accordion - -
- - - - -

- Thing -
-
-
-
-
-
-
- more things -

- - -

- Thing -
-
-
-
-
-
-
- more things -

- - -

- Thing -
-
-
-
-
-
-
- more things -

- - -

- Thing -
-
-
-
-
-
-
- more things -

- - - - -
- + + `; }; -accordion.swc_vrt = { - skip: true, +virtualElement.args = { + placement: 'right-start' as Placement, }; diff --git a/packages/overlay/sync/overlay-trigger.ts b/packages/overlay/sync/overlay-trigger.ts index 3dc7ff62a4..96a787998e 100644 --- a/packages/overlay/sync/overlay-trigger.ts +++ b/packages/overlay/sync/overlay-trigger.ts @@ -11,14 +11,9 @@ governing permissions and limitations under the License. */ import { OverlayTrigger } from '../src/OverlayTrigger.js'; -import { Overlay, OverlayOptions, TriggerInteractions } from '../src/index.js'; +import { OverlayOptionsV1, TriggerInteractions } from '../src/index.js'; import '../overlay-trigger.js'; +import '../sp-overlay.js'; -OverlayTrigger.openOverlay = async ( - target: HTMLElement, - interaction: TriggerInteractions, - content: HTMLElement, - options: OverlayOptions -): Promise<() => void> => { - return Overlay.open(target, interaction, content, options); -}; +export { OverlayTrigger }; +export type { OverlayOptionsV1, TriggerInteractions }; diff --git a/packages/overlay/test/benchmark/basic-test.ts b/packages/overlay/test/benchmark/basic-test.ts index 3b563d6e8d..81e600bde0 100644 --- a/packages/overlay/test/benchmark/basic-test.ts +++ b/packages/overlay/test/benchmark/basic-test.ts @@ -18,9 +18,9 @@ import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js'; measureFixtureCreation( html` - + Trigger - +

This is the content.

 diff --git a/packages/overlay/test/index.ts b/packages/overlay/test/index.ts index 92c17cb1bc..75ef2fc278 100644 --- a/packages/overlay/test/index.ts +++ b/packages/overlay/test/index.ts @@ -10,12 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { escapeEvent, isVisible } from '../../../test/testing-helpers.js'; +import { fixture, isOnTopLayer } from '../../../test/testing-helpers.js'; import { aTimeout, elementUpdated, expect, - fixture, html, nextFrame, oneEvent, @@ -23,7 +22,6 @@ import { } from '@open-wc/testing'; import { - ActiveOverlay, OverlayTrigger, TriggerInteractions, } from '@spectrum-web-components/overlay'; @@ -32,7 +30,8 @@ import { Button } from '@spectrum-web-components/button'; import '@spectrum-web-components/popover/sp-popover.js'; import { Popover } from '@spectrum-web-components/popover'; import '@spectrum-web-components/theme/sp-theme.js'; -import { Theme } from '@spectrum-web-components/theme'; +import { sendMouse } from '../../../test/plugins/browser.js'; +import { sendKeys } from '@web/test-runner-commands'; function pressKey(code: string): void { const up = new KeyboardEvent('keyup', { @@ -44,26 +43,13 @@ function pressKey(code: string): void { document.dispatchEvent(up); } -const pressEscape = (): void => { - document.dispatchEvent(escapeEvent()); -}; - const pressSpace = (): void => pressKey('Space'); -export const runOverlayTriggerTests = (): void => { - describe('Overlay Trigger - sync', () => { +export const runOverlayTriggerTests = (type: string): void => { + describe(`Overlay Trigger - ${type}`, () => { describe('open/close', () => { - let testDiv!: HTMLDivElement; - let innerTrigger!: OverlayTrigger; - let outerTrigger!: OverlayTrigger; - let innerButton!: Button; - let outerButton!: Button; - let innerClickContent!: Popover; - let outerClickContent!: Popover; - let hoverContent!: HTMLDivElement; - - beforeEach(async () => { - testDiv = await fixture( + beforeEach(async function () { + this.testDiv = await fixture( html`
${styles} @@ -62,7 +55,6 @@ const initTest = async ( slot="click-content" direction="bottom" tip - open tabindex="0" placement="top" > @@ -74,6 +66,12 @@ const initTest = async (
` ); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); return { overlayTrigger: test.querySelector('overlay-trigger') as OverlayTrigger, button: test.querySelector('sp-button') as Button, @@ -130,43 +128,53 @@ describe('Overlay Trigger - extended', () => { expect(popover.placement).to.equal('top'); - const { scrollHeight } = document.documentElement; - document.documentElement.scrollTop = scrollHeight / 2; + button.scrollIntoView({ + behavior: 'instant' as ScrollBehavior, + block: 'start', + }); - // one frame for scroll to trigger await nextFrame(); - // one frame for the UI to update await nextFrame(); - // _then_ we test... + await nextFrame(); + await nextFrame(); + expect(popover.placement).to.equal('bottom'); }); - it('occludes content behind the overlay', async () => { + xit('occludes content behind the overlay', async () => { + // currently fails for no reason in Firefox locally, and most browsers in CI. ({ overlayTrigger, button, popover } = await initTest()); const textfield = document.createElement('sp-textfield'); - document.body.append(textfield); + overlayTrigger.insertAdjacentElement('afterend', textfield); - const boundingRect = textfield.getBoundingClientRect(); - expect(document.activeElement).to.not.equal(textfield); + const textfieldRect = textfield.getBoundingClientRect(); + expect(document.activeElement === textfield).to.be.false; await sendMouse({ steps: [ { type: 'click', - position: [ - boundingRect.left + boundingRect.width / 2, - boundingRect.top + boundingRect.height / 2, - ], + position: [textfieldRect.left + 5, textfieldRect.top + 5], }, ], }); - expect(document.activeElement).to.equal(textfield); + expect( + document.activeElement === textfield, + 'clicking focuses the Textfield' + ).to.be.true; expect(popover.placement).to.equal('top'); const open = oneEvent(overlayTrigger, 'sp-opened'); - button.click(); + await sendKeys({ + press: 'Shift+Tab', + }); + expect(document.activeElement === button, 'button focused').to.be.true; + await sendKeys({ + press: 'Enter', + }); await open; + expect(overlayTrigger.type).to.equal('modal'); expect(overlayTrigger.open).to.equal('click'); expect(popover.placement).to.equal('bottom'); @@ -175,38 +183,37 @@ describe('Overlay Trigger - extended', () => { steps: [ { type: 'click', - position: [ - boundingRect.left + boundingRect.width / 2, - boundingRect.top + boundingRect.height / 2, - ], + position: [textfieldRect.left + 5, textfieldRect.top + 5], }, ], }); await close; - expect(overlayTrigger.open).to.be.null; - expect(document.activeElement).to.not.equal(textfield); + + expect(overlayTrigger.open).to.be.undefined; + expect( + document.activeElement === textfield, + 'closing does not focus the Textfield' + ).to.be.false; + await sendMouse({ steps: [ { type: 'click', position: [ - boundingRect.left + boundingRect.width / 2, - boundingRect.top + boundingRect.height / 2, + textfieldRect.left + textfieldRect.width / 2, + textfieldRect.top + textfieldRect.height / 2, ], }, ], }); - expect(document.activeElement).to.equal(textfield); - textfield.remove(); + expect( + document.activeElement === textfield, + 'the Textfield is focused again' + ).to.be.true; }); xit('occludes wheel interactions behind the overlay', async () => { - /** - * This test "passes" when tested manually in browser, but - * not when leveraged in the automated test process. - * - * xit for now... - **/ + // currently fails for no reason in Firefox locally, and most browsers in CI. ({ overlayTrigger, button, popover } = await initTest()); const scrollingArea = document.createElement('div'); Object.assign(scrollingArea.style, { @@ -255,10 +262,6 @@ describe('Overlay Trigger - extended', () => { const open = oneEvent(overlayTrigger, 'sp-opened'); button.click(); await open; - const activeOverlay = document.querySelector( - 'active-overlay' - ) as ActiveOverlay; - await elementUpdated(activeOverlay); expect(overlayTrigger.open).to.equal('click'); expect(popover.placement).to.equal('bottom'); @@ -276,6 +279,7 @@ describe('Overlay Trigger - extended', () => { await nextFrame(); await nextFrame(); await nextFrame(); + expect( scrollingArea.scrollTop, `scrollTop should be ${distance}.` diff --git a/packages/overlay/test/overlay-trigger-hover-click.test.ts b/packages/overlay/test/overlay-trigger-hover-click.test.ts index 40cecc6e7d..47b799d42c 100644 --- a/packages/overlay/test/overlay-trigger-hover-click.test.ts +++ b/packages/overlay/test/overlay-trigger-hover-click.test.ts @@ -58,13 +58,13 @@ describe('Overlay Trigger - Hover and Click', () => { trigger.click(); interaction = (await openedEvent).detail.interaction; - expect(interaction).equals('click'); + expect(interaction).equals('auto'); const closedEvent = oneEvent(el, 'sp-closed'); trigger.click(); interaction = (await closedEvent).detail.interaction; - expect(interaction).equals('click'); + expect(interaction).equals('auto'); } }); it('toggles on click after hover', async () => { @@ -82,6 +82,9 @@ describe('Overlay Trigger - Hover and Click', () => { const trigger = el.querySelector( '[slot=trigger]' ) as unknown as ActionButton; + const clickContent = el.querySelector( + '[slot="click-content"]' + ) as HTMLElement; const bounds = el.getBoundingClientRect(); let interaction: TriggerInteractions; @@ -105,21 +108,21 @@ describe('Overlay Trigger - Hover and Click', () => { }); interaction = (await hoveredEvent).detail.interaction; - expect(interaction).equals('hover'); + expect(interaction).equals('hint'); // repeatedly click to toggle the popover for (let i = 0; i < 3; i++) { - const openedEvent = oneEvent(el, 'sp-opened'); + const openedEvent = oneEvent(clickContent, 'sp-opened'); trigger.click(); interaction = (await openedEvent).detail.interaction; - expect(interaction).equals('click'); + expect(interaction).equals('auto'); - const closedEvent = oneEvent(el, 'sp-closed'); + const closedEvent = oneEvent(clickContent, 'sp-closed'); trigger.click(); interaction = (await closedEvent).detail.interaction; - expect(interaction).equals('click'); + expect(interaction).equals('auto'); } }); it('persists a hover overlay when clicking its trigger and closes the next highest overlay on the stack', async () => { @@ -153,13 +156,6 @@ describe('Overlay Trigger - Hover and Click', () => { let opened = oneEvent(trigger1, 'sp-opened'); sendMouse({ steps: [ - { - type: 'move', - position: [ - rect1.left + rect1.width / 2, - rect1.top + rect1.height / 2, - ], - }, { type: 'click', position: [ @@ -170,15 +166,23 @@ describe('Overlay Trigger - Hover and Click', () => { ], }); await opened; - await elementUpdated(overlayTrigger1); expect(overlayTrigger1.open).to.equal('click'); expect(overlayTrigger2.open).to.undefined; opened = oneEvent(trigger2, 'sp-opened'); - trigger2.focus(); + sendMouse({ + steps: [ + { + type: 'move', + position: [ + rect2.left + rect2.width / 2, + rect2.top + rect2.height / 2, + ], + }, + ], + }); await opened; - await elementUpdated(overlayTrigger2); expect(overlayTrigger1.open).to.equal('click'); expect(overlayTrigger2.open).to.equal('hover'); @@ -197,7 +201,7 @@ describe('Overlay Trigger - Hover and Click', () => { }); await closed; - expect(overlayTrigger1.open).to.be.null; + expect(overlayTrigger1.open).to.be.undefined; expect(overlayTrigger2.open).to.equal('hover'); }); it('does not close ancestor "click" overlays on `click`', async () => { @@ -206,21 +210,21 @@ describe('Overlay Trigger - Hover and Click', () => { `); const el = test.querySelector('overlay-trigger') as OverlayTrigger; const button = el.querySelector('sp-action-button') as ActionButton; + const button2 = el.querySelector( + 'sp-action-button:nth-of-type(2)' + ) as ActionButton; const tooltip = button.querySelector('sp-tooltip') as Tooltip; expect(el.open).to.be.undefined; expect(tooltip.open).to.be.false; - let opened = oneEvent(el, 'sp-opened'); + const opened = oneEvent(el, 'sp-opened'); + const tooltipOpen = oneEvent(button, 'sp-opened'); el.open = 'click'; await opened; + await tooltipOpen; expect(el.open).to.equal('click'); - - opened = oneEvent(button, 'sp-opened'); - button.focus(); - await opened; - expect(tooltip.open).to.be.true; button.click(); @@ -231,17 +235,24 @@ describe('Overlay Trigger - Hover and Click', () => { expect(tooltip.open).to.be.true; let closed = oneEvent(button, 'sp-closed'); - button.blur(); + button2.focus(); await closed; expect(el.open).to.equal('click'); expect(tooltip.open).to.be.false; closed = oneEvent(el, 'sp-closed'); - document.body.click(); + sendMouse({ + steps: [ + { + type: 'click', + position: [1, 1], + }, + ], + }); await closed; - expect(el.open).to.be.null; + expect(el.open, '"click" overlay no longer open').to.be.undefined; expect(tooltip.open).to.be.false; }); }); diff --git a/packages/overlay/test/overlay-trigger-hover.test.ts b/packages/overlay/test/overlay-trigger-hover.test.ts index bb0d13a431..6855d73fa0 100644 --- a/packages/overlay/test/overlay-trigger-hover.test.ts +++ b/packages/overlay/test/overlay-trigger-hover.test.ts @@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { - aTimeout, elementUpdated, expect, - fixture, html, nextFrame, oneEvent, @@ -36,8 +34,10 @@ import '@spectrum-web-components/theme/src/themes.js'; import { TemplateResult } from '@spectrum-web-components/base'; import { Theme } from '@spectrum-web-components/theme'; import { Tooltip } from '@spectrum-web-components/tooltip'; -import { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js'; -import { isFirefox } from '@spectrum-web-components/shared/src/platform.js'; +import { + fixture, + ignoreResizeObserverLoopError, +} from '../../../test/testing-helpers.js'; ignoreResizeObserverLoopError(before, after); @@ -110,14 +110,18 @@ describe('Overlay Trigger - Hover', () => { it('allows pointer to enter the "tooltip" without closing the "tooltip"', async () => { const opened = oneEvent(button, 'sp-opened'); button.dispatchEvent( - new MouseEvent('mouseenter', { + new MouseEvent('pointerenter', { bubbles: true, composed: true, }) ); await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); + expect(tooltip.open).to.be.true; button.dispatchEvent( - new MouseEvent('mouseleave', { + new MouseEvent('pointerleave', { relatedTarget: tooltip, bubbles: true, composed: true, @@ -125,7 +129,7 @@ describe('Overlay Trigger - Hover', () => { ); await nextFrame(); tooltip.dispatchEvent( - new MouseEvent('mouseleave', { + new MouseEvent('pointerleave', { relatedTarget: button, bubbles: true, composed: true, @@ -137,26 +141,27 @@ describe('Overlay Trigger - Hover', () => { const closed = oneEvent(button, 'sp-closed'); button.dispatchEvent( - new MouseEvent('mouseleave', { + new MouseEvent('pointerleave', { + relatedTarget: null, bubbles: true, composed: true, }) ); await closed; - expect(el.open).to.be.null; + expect(el.open).to.be.undefined; }); it('closes the "tooltip" when leaving the "tooltip"', async () => { const opened = oneEvent(button, 'sp-opened'); button.dispatchEvent( - new MouseEvent('mouseenter', { + new MouseEvent('pointerenter', { bubbles: true, composed: true, }) ); await nextFrame(); button.dispatchEvent( - new MouseEvent('mouseleave', { + new MouseEvent('pointerleave', { relatedTarget: tooltip, bubbles: true, composed: true, @@ -168,14 +173,15 @@ describe('Overlay Trigger - Hover', () => { const closed = oneEvent(button, 'sp-closed'); tooltip.dispatchEvent( - new MouseEvent('mouseleave', { + new MouseEvent('pointerleave', { + relatedTarget: null, bubbles: true, composed: true, }) ); await closed; - expect(el.open).to.be.null; + expect(el.open).to.be.undefined; }); }); it('persists hover content', async () => { @@ -194,13 +200,14 @@ describe('Overlay Trigger - Hover', () => { expect(el.open).to.be.undefined; const trigger = el.querySelector('[slot="trigger"]') as ActionButton; + const opened = oneEvent(trigger, 'sp-opened'); trigger.dispatchEvent( - new Event('mouseenter', { + new Event('pointerenter', { bubbles: true, + composed: true, }) ); - - await elementUpdated(el); + await opened; expect(el.open).to.equal('hover'); @@ -227,23 +234,23 @@ describe('Overlay Trigger - Hover', () => { expect(el.open).to.be.undefined; const trigger = el.querySelector('[slot="trigger"]') as ActionButton; + let opened = oneEvent(trigger, 'sp-opened'); trigger.dispatchEvent( - new Event('mouseenter', { + new Event('pointerenter', { bubbles: true, }) ); - - await elementUpdated(el); + await opened; expect(el.open).to.equal('hover'); + opened = oneEvent(trigger, 'sp-opened'); trigger.dispatchEvent( new Event('longpress', { bubbles: true, }) ); - - await elementUpdated(el); + await opened; expect(el.open).to.equal('longpress'); }); @@ -267,26 +274,17 @@ describe('Overlay Trigger - Hover', () => { trigger.focus(); await opened; - await elementUpdated(el); - await aTimeout(500); - expect(el.open).to.equal('hover'); const closed = oneEvent(el, 'sp-closed'); trigger.blur(); await closed; - await elementUpdated(el); - - expect(el.open).to.be.null; + expect(el.open).to.be.undefined; }); it('will not return focus to a "modal" parent', async () => { - // There is an `sp-dialog-base` recyling issue in Firefox - if (isFirefox()) { - return; - } const el = await styledFixture(html` - + Toggle Dialog { const button = el.querySelector('sp-button') as Button; const dialog = el.querySelector('sp-dialog-wrapper') as HTMLElement; + const button1 = dialog.querySelector('#button-1') as Button; + const button2 = dialog.querySelector('#button-2') as Button; + const button3 = dialog.querySelector('#button-3') as Button; await elementUpdated(button); await elementUpdated(dialog); let opened = oneEvent(button, 'sp-opened'); + const openedHint = oneEvent(button1, 'sp-opened'); button.dispatchEvent(new Event('click', { bubbles: true })); await opened; - const button1 = dialog.querySelector('#button-1') as Button; - const button2 = dialog.querySelector('#button-2') as Button; + await openedHint; + + expect(button1 === document.activeElement).to.be.true; - opened = oneEvent(button1, 'sp-opened'); + opened = oneEvent(button2, 'sp-opened'); sendKeys({ press: 'Tab', }); await opened; - await nextFrame(); - - expect(button1 === document.activeElement).to.be.true; + expect(button2 === document.activeElement).to.be.true; - opened = oneEvent(button2, 'sp-opened'); + opened = oneEvent(button3, 'sp-opened'); sendKeys({ press: 'Tab', }); await opened; - await nextFrame(); - - expect(button2 === document.activeElement).to.be.true; + expect(button3 === document.activeElement).to.be.true; }); }); diff --git a/packages/overlay/test/overlay-trigger-longpress.test.ts b/packages/overlay/test/overlay-trigger-longpress.test.ts index eecdf5c92f..cb4705a7c5 100644 --- a/packages/overlay/test/overlay-trigger-longpress.test.ts +++ b/packages/overlay/test/overlay-trigger-longpress.test.ts @@ -9,10 +9,10 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ + import { elementUpdated, expect, - fixture, html, nextFrame, oneEvent, @@ -20,6 +20,7 @@ import { } from '@open-wc/testing'; import { ActionButton } from '@spectrum-web-components/action-button'; import '@spectrum-web-components/action-button/sp-action-button.js'; +import '@spectrum-web-components/button/sp-button.js'; import '@spectrum-web-components/action-group/sp-action-group.js'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js'; import { Popover } from '@spectrum-web-components/popover'; @@ -33,86 +34,215 @@ import { sendKeys } from '@web/test-runner-commands'; import { spy } from 'sinon'; import { sendMouse } from '../../../test/plugins/browser.js'; import { findDescribedNode } from '../../../test/testing-helpers-a11y.js'; +import { fixture, isOnTopLayer } from '../../../test/testing-helpers.js'; +import { longpress } from '../stories/overlay.stories.js'; describe('Overlay Trigger - Longpress', () => { - it('displays `longpress` content', async () => { - const el = await fixture( - (() => html` - - - - - - - - - - - - - - - - - - - `)() - ); - - await elementUpdated(el); - - const trigger = el.querySelector('sp-action-button') as ActionButton; - const content = el.querySelector( - '[slot="longpress-content"]' - ) as Popover; - - expect(trigger).to.not.be.null; - expect(content).to.not.be.null; - expect(content.open).to.be.false; - - trigger.focus(); - let open = oneEvent(el, 'sp-opened'); - await sendKeys({ - press: 'Space', + describe('responds to use interactions', () => { + beforeEach(async function () { + this.el = await fixture(longpress()); + this.trigger = this.el.querySelector( + 'sp-action-button' + ) as ActionButton; + this.content = this.el.querySelector( + '[slot="longpress-content"]' + ) as Popover; + + expect(this.trigger).to.not.be.null; + expect(this.content).to.not.be.null; + expect(this.content.open).to.be.false; + + this.trigger.focus(); }); - await open; - expect(content.open, 'opens for `Space`').to.be.true; - - let closed = oneEvent(el, 'sp-closed'); - document.body.click(); - await closed; - - expect(!content.open, 'closes for `Space`').to.be.true; - - trigger.focus(); - open = oneEvent(el, 'sp-opened'); - sendKeys({ - press: 'Alt+ArrowDown', + it('opens/closes for `Space`', async function () { + const open = oneEvent(this.el, 'sp-opened'); + await sendKeys({ + press: 'Space', + }); + await open; + expect(this.content.open, 'opens for `Space`').to.be.true; + expect(await isOnTopLayer(this.content)).to.be.true; + + const closed = oneEvent(this.el, 'sp-closed'); + sendMouse({ + steps: [ + { + type: 'click', + position: [500, 20], + }, + ], + }); + await closed; + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); + + expect(await isOnTopLayer(this.content)).to.be.false; + expect(this.content.open, 'closes for `Space`').to.be.false; }); - await open; - expect(content.open, 'opens for `Alt+ArrowDown`').to.be.true; - closed = oneEvent(el, 'sp-closed'); - await sendKeys({ - press: 'Escape', + it('opens/closes for `Alt+ArrowDown`', async function () { + const open = oneEvent(this.el, 'sp-opened'); + sendKeys({ + press: 'Alt+ArrowDown', + }); + await open; + await nextFrame(); + await nextFrame(); + expect(this.content.open, 'opens for `Alt+ArrowDown`').to.be.true; + expect(await isOnTopLayer(this.content)).to.be.true; + const closed = oneEvent(this.el, 'sp-closed'); + await sendKeys({ + press: 'Escape', + }); + await closed; + await nextFrame(); + await nextFrame(); + expect(this.content.open, 'closes for `Alt+ArrowDown`').to.be.false; + expect(await isOnTopLayer(this.content)).to.be.false; }); - await closed; - expect(!content.open, 'closes for `Alt+ArrowDown`').to.be.true; - await elementUpdated(el); - - open = oneEvent(el, 'sp-opened'); - trigger.dispatchEvent(new PointerEvent('pointerdown', { button: 0 })); - await open; - expect(content.open, 'opens for `pointerdown`').to.be.true; - closed = oneEvent(el, 'sp-closed'); - await sendKeys({ - press: 'Escape', + it('opens/closes for `Alt+ArrowDown` with Button', async function () { + const button = document.createElement('sp-button'); + button.slot = 'trigger'; + this.trigger.replaceWith(button); + await elementUpdated(button); + button.focus(); + await elementUpdated(button); + + const open = oneEvent(this.el, 'sp-opened'); + sendKeys({ + press: 'Alt+ArrowDown', + }); + await open; + await nextFrame(); + await nextFrame(); + expect(await isOnTopLayer(this.content)).to.be.true; + expect(this.content.open, 'opens for `Alt+ArrowDown`').to.be.true; + const closed = oneEvent(this.el, 'sp-closed'); + await sendKeys({ + press: 'Escape', + }); + await closed; + await nextFrame(); + await nextFrame(); + expect(await isOnTopLayer(this.content)).to.be.false; + expect(this.content.open, 'closes for `Alt+ArrowDown`').to.be.false; + }); + it('opens/closes for `longpress`', async function () { + expect(this.trigger.holdAffordance).to.be.true; + let open = oneEvent(this.el, 'sp-opened'); + const rect = this.trigger.getBoundingClientRect(); + await sendMouse({ + steps: [ + { + type: 'move', + position: [ + rect.left + rect.width / 2, + rect.top + rect.height / 2, + ], + }, + { + type: 'down', + }, + ], + }); + // Hover content opens, first. + await open; + await nextFrame(); + await nextFrame(); + open = oneEvent(this.el, 'sp-opened'); + // Then, the longpress content opens. + await open; + await nextFrame(); + await nextFrame(); + expect(this.content.open, 'opens for `pointerdown`').to.be.true; + await sendMouse({ + steps: [ + { + type: 'up', + }, + { + type: 'move', + position: [ + rect.left + rect.width * 2, + rect.top + rect.height / 2, + ], + }, + ], + }); + await nextFrame(); + await nextFrame(); + expect(this.content.open, 'stays open for `pointerup`').to.be.true; + expect(await isOnTopLayer(this.content)).to.be.true; + const closed = oneEvent(this.trigger, 'sp-closed'); + await sendKeys({ + press: 'Escape', + }); + await closed; + expect(await isOnTopLayer(this.content)).to.be.false; + expect(this.content.open, 'closes for `pointerdown`').to.be.false; + }); + it('opens/closes for `longpress` with Button', async function () { + const button = document.createElement('sp-button'); + button.slot = 'trigger'; + this.trigger.remove(); + this.el.append(button); + await elementUpdated(this.el); + await nextFrame(); + await nextFrame(); + + let open = oneEvent(this.el, 'sp-opened'); + const rect = button.getBoundingClientRect(); + await sendMouse({ + steps: [ + { + type: 'move', + position: [ + rect.left + rect.width / 2, + rect.top + rect.height / 2, + ], + }, + { + type: 'down', + }, + ], + }); + // Hover content opens, first. + await open; + await nextFrame(); + await nextFrame(); + open = oneEvent(this.el, 'sp-opened'); + // Then, the longpress content opens. + await open; + await nextFrame(); + await nextFrame(); + expect(this.content.open, 'opens for `pointerdown`').to.be.true; + await sendMouse({ + steps: [ + { + type: 'up', + }, + { + type: 'move', + position: [ + rect.left + rect.width * 2, + rect.top + rect.height / 2, + ], + }, + ], + }); + await nextFrame(); + await nextFrame(); + expect(this.content.open, 'stays open for `pointerup`').to.be.true; + expect(await isOnTopLayer(this.content)).to.be.true; + const closed = oneEvent(button, 'sp-closed'); + await sendKeys({ + press: 'Escape', + }); + await closed; + expect(await isOnTopLayer(this.content)).to.be.false; + expect(this.content.open, 'closes for `pointerdown`').to.be.false; }); - await closed; - expect(!content.open, 'closes for `pointerdown`').to.be.true; }); it('displays `longpress` declaratively', async () => { const openedSpy = spy(); @@ -173,6 +303,8 @@ describe('Overlay Trigger - Longpress', () => { ` ); + await nextFrame(); + await nextFrame(); const trigger = el.querySelector('[slot="trigger"]') as HTMLElement; await elementUpdated(el); @@ -180,7 +312,7 @@ describe('Overlay Trigger - Longpress', () => { expect(trigger.hasAttribute('aria-describedby')).to.be.true; expect(el.open).to.be.undefined; /* - * This test passes because OverlayTrigger adds a new node to describe + * This test passes because `` adds a new node to describe * the longpress interaction now available on the trigger element */ expect(el.childNodes.length, 'always').to.equal(6); @@ -205,13 +337,12 @@ describe('Overlay Trigger - Longpress', () => { ); const closed = oneEvent(el, 'sp-closed'); - - await sendKeys({ + sendKeys({ press: 'Escape', }); await closed; - expect(el.open).to.be.null; + expect(el.open).to.be.undefined; expect(trigger.hasAttribute('aria-describedby')).to.be.true; expect(el.childNodes.length, 'always').to.equal(6); @@ -253,28 +384,37 @@ describe('Overlay Trigger - Longpress', () => { ) as Popover; await elementUpdated(el); - expect(el.hasLongpressContent).to.be.true; + expect( + trigger.hasAttribute('aria-describedby'), + 'applies described by content' + ).to.be.true; expect(el.childNodes.length, 'always').to.equal(6); el.removeAttribute('hold-affordance'); - el.removeChild(content); + content.remove(); await elementUpdated(el); + await nextFrame(); + await nextFrame(); - expect(trigger.hasAttribute('aria-describedby')).to.be.false; - expect(el.hasLongpressContent).to.be.false; + expect( + trigger.hasAttribute('aria-describedby'), + 'removed described by content' + ).to.be.false; expect(el.childNodes.length, 'always').to.equal(4); el.setAttribute('hold-affordance', 'true'); el.append(content); await elementUpdated(el); + await nextFrame(); + await nextFrame(); + await findDescribedNode( 'Trigger with hold affordance', LONGPRESS_INSTRUCTIONS.keyboard ); - expect(el.hasLongpressContent).to.be.true; expect(el.childNodes.length, 'always').to.equal(6); }); it('recognises multiple overlay triggers in a11y tree', async () => { @@ -323,15 +463,7 @@ describe('Overlay Trigger - Longpress', () => { await elementUpdated(el); const div = document.getElementById('container') as HTMLElement; - const firstTrigger = document.getElementById( - 'first-trigger' - ) as OverlayTrigger; - const secondTrigger = document.getElementById( - 'second-trigger' - ) as OverlayTrigger; - - expect(firstTrigger.hasLongpressContent).to.be.true; - expect(secondTrigger.hasLongpressContent).to.be.true; + expect(div.childNodes.length, 'always').to.equal(5); await findDescribedNode( diff --git a/packages/overlay/test/overlay-trigger-sync.test.ts b/packages/overlay/test/overlay-trigger-sync.test.ts index dc3d8e66b6..3bb87e09ee 100644 --- a/packages/overlay/test/overlay-trigger-sync.test.ts +++ b/packages/overlay/test/overlay-trigger-sync.test.ts @@ -13,4 +13,4 @@ governing permissions and limitations under the License. import '@spectrum-web-components/overlay/sync/overlay-trigger.js'; import { runOverlayTriggerTests } from './index.js'; -runOverlayTriggerTests(); +runOverlayTriggerTests('sync'); diff --git a/packages/overlay/test/overlay-trigger.test.ts b/packages/overlay/test/overlay-trigger.test.ts index acf9a9a94d..981cae8bac 100644 --- a/packages/overlay/test/overlay-trigger.test.ts +++ b/packages/overlay/test/overlay-trigger.test.ts @@ -13,4 +13,4 @@ governing permissions and limitations under the License. import '@spectrum-web-components/overlay/overlay-trigger.js'; import { runOverlayTriggerTests } from './index.js'; -runOverlayTriggerTests(); +runOverlayTriggerTests('async'); diff --git a/packages/overlay/test/overlay-update.test.ts b/packages/overlay/test/overlay-update.test.ts index a8e4c1066b..0015c82757 100644 --- a/packages/overlay/test/overlay-update.test.ts +++ b/packages/overlay/test/overlay-update.test.ts @@ -9,34 +9,34 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing'; +import { elementUpdated, expect, oneEvent } from '@open-wc/testing'; import { AccordionItem } from '@spectrum-web-components/accordion/src/AccordionItem.js'; import { OverlayTrigger } from '../src/OverlayTrigger.js'; import { accordion } from '../stories/overlay.stories.js'; +import { fixture } from '../../../test/testing-helpers.js'; describe('sp-update-overlays event', () => { it('updates overlay height', async () => { const el = await fixture(accordion()); - const container = el.querySelector('div') as HTMLElement; + const container = el.querySelector('sp-popover') as HTMLElement; const item = el.querySelector( '[label="Other things"]' ) as AccordionItem; const height0 = container.getBoundingClientRect().height; - expect(height0).to.equal(0); const opened = oneEvent(el, 'sp-opened'); el.open = 'click'; await opened; const height1 = container.getBoundingClientRect().height; - expect(height1).to.not.equal(0); + expect(height1).to.equal(height0); item.click(); await elementUpdated(item); const height2 = container.getBoundingClientRect().height; - expect(height2).to.not.equal(0); + expect(height2).to.not.equal(height0); expect(height1).to.be.lessThan(height2); }); diff --git a/packages/overlay/test/overlay-v1.test.ts b/packages/overlay/test/overlay-v1.test.ts new file mode 100644 index 0000000000..69cfd815c3 --- /dev/null +++ b/packages/overlay/test/overlay-v1.test.ts @@ -0,0 +1,659 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import '@spectrum-web-components/button/sp-button.js'; +import '@spectrum-web-components/dialog/sp-dialog.js'; +import '@spectrum-web-components/overlay/sp-overlay.js'; +import '@spectrum-web-components/overlay/overlay-trigger.js'; +import '@spectrum-web-components/tooltip/sp-tooltip.js'; +import { Dialog } from '@spectrum-web-components/dialog'; +import '@spectrum-web-components/popover/sp-popover.js'; +import { Popover } from '@spectrum-web-components/popover'; +import { setViewport } from '@web/test-runner-commands'; +import { + Overlay, + OverlayTrigger, + Placement, +} from '@spectrum-web-components/overlay'; + +import { + elementUpdated, + expect, + html, + nextFrame, + oneEvent, +} from '@open-wc/testing'; +import { sendKeys } from '@web/test-runner-commands'; +import { + definedOverlayElement, + virtualElementV1, +} from '../stories/overlay.stories'; +import { PopoverContent } from '../stories/overlay-story-components.js'; +import { sendMouse } from '../../../test/plugins/browser.js'; +import '@spectrum-web-components/theme/sp-theme.js'; +import '@spectrum-web-components/theme/src/themes.js'; +import { Theme } from '@spectrum-web-components/theme'; +import { render, TemplateResult } from '@spectrum-web-components/base'; +import { + fixture, + isInteractive, + isOnTopLayer, +} from '../../../test/testing-helpers.js'; +import { Menu } from '@spectrum-web-components/menu'; + +async function styledFixture( + story: TemplateResult +): Promise { + const test = await fixture(html` + + ${story} + + `); + return test.children[0] as T; +} + +describe('Overlays, v1', () => { + let testDiv!: HTMLDivElement; + let openOverlays: (() => void)[] = []; + + beforeEach(async () => { + testDiv = await styledFixture( + html` +
+ + + Show Popover + +
+ + +
+ A popover message +
+ + Test 1 + + Test 2 + Test 3 + + + + Hover message + + + Other hover message + +
+
+ ` + ); + await elementUpdated(testDiv); + }); + + afterEach(() => { + openOverlays.map((close) => close()); + openOverlays = []; + }); + + [ + 'bottom', + 'bottom-start', + 'bottom-end', + 'top', + 'top-start', + 'top-end', + 'left', + 'left-start', + 'left-end', + 'right', + 'right-start', + 'right-end', + 'none', + ].map((direction) => { + const placement = direction as Placement; + it(`opens a popover - ${placement}`, async () => { + const button = testDiv.querySelector( + '#first-button' + ) as HTMLElement; + const outerPopover = testDiv.querySelector( + '#outer-popover' + ) as Popover; + + expect(await isInteractive(outerPopover)).to.be.false; + expect(button).to.exist; + + const opened = oneEvent(outerPopover, 'sp-opened'); + openOverlays.push( + await Overlay.open(button, 'click', outerPopover, { + delayed: false, + placement, + offset: 10, + }) + ); + await opened; + expect(await isInteractive(outerPopover)).to.be.true; + }); + }); + + it(`opens a modal dialog`, async () => { + const button = testDiv.querySelector('#first-button') as HTMLElement; + const outerPopover = testDiv.querySelector('#outer-popover') as Popover; + + expect(await isInteractive(outerPopover)).to.be.false; + + expect(button).to.exist; + + const opened = oneEvent(outerPopover, 'sp-opened'); + openOverlays.push( + await Overlay.open(button, 'modal', outerPopover, { + delayed: false, + }) + ); + await opened; + + const firstFocused = outerPopover.querySelector( + '#outer-focus-target' + ) as HTMLElement; + expect(document.activeElement === firstFocused).to.be.true; + + /** + * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page + * and the backward tab past the known beginning of the page. Test that you never focused the button + * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better. + */ + + await sendKeys({ + press: 'Tab', + }); + + expect(document.activeElement === button).to.be.false; + await sendKeys({ + press: 'Tab', + }); + + expect(document.activeElement === button).to.be.false; + + await sendKeys({ + press: 'Shift+Tab', + }); + + expect(document.activeElement === button).to.be.false; + + await sendKeys({ + press: 'Shift+Tab', + }); + + expect(document.activeElement === button).to.be.false; + + await sendKeys({ + press: 'Shift+Tab', + }); + + expect(document.activeElement === button).to.be.false; + }); + + it(`updates a popover`, async () => { + const button = testDiv.querySelector('#first-button') as HTMLElement; + const outerPopover = testDiv.querySelector('#outer-popover') as Popover; + + expect(await isInteractive(outerPopover)).to.be.false; + + expect(button).to.exist; + + const opened = oneEvent(outerPopover, 'sp-opened'); + openOverlays.push( + await Overlay.open(button, 'click', outerPopover, { + delayed: false, + offset: 10, + }) + ); + await opened; + + expect(await isInteractive(outerPopover)).to.be.true; + + Overlay.update(); + + expect(await isInteractive(outerPopover)).to.be.true; + }); + + it(`opens a popover w/ delay`, async () => { + const button = testDiv.querySelector('#first-button') as HTMLElement; + const outerPopover = testDiv.querySelector('#outer-popover') as Popover; + + expect(await isInteractive(outerPopover)).to.be.false; + expect(button).to.exist; + + const opened = oneEvent(outerPopover, 'sp-opened'); + const start = performance.now(); + openOverlays.push( + await Overlay.open(button, 'click', outerPopover, { + delayed: true, + offset: 10, + }) + ); + await opened; + const end = performance.now(); + expect(await isInteractive(outerPopover)).to.be.true; + expect(end - start).to.be.greaterThan(1000); + }); + + it('opens hover overlay', async () => { + const button = testDiv.querySelector('#first-button') as HTMLElement; + const hoverOverlay = testDiv.querySelector('#hover-1') as HTMLElement; + const clickOverlay = testDiv.querySelector( + '#outer-popover' + ) as HTMLElement; + + expect(await isOnTopLayer(hoverOverlay)).to.be.false; + expect(await isOnTopLayer(clickOverlay)).to.be.false; + + let opened = oneEvent(hoverOverlay, 'sp-opened'); + openOverlays.push( + await Overlay.open(button, 'hover', hoverOverlay, { + delayed: false, + placement: 'top', + offset: 10, + }) + ); + await opened; + expect(await isOnTopLayer(hoverOverlay)).to.be.true; + + opened = oneEvent(clickOverlay, 'sp-opened'); + const closed = oneEvent(hoverOverlay, 'sp-closed'); + // Opening click overlay should close the hover overlay + openOverlays.push( + await Overlay.open(button, 'click', clickOverlay, { + delayed: false, + placement: 'bottom', + offset: 10, + }) + ); + await opened; + await closed; + expect( + await isInteractive(clickOverlay), + 'click overlay not interactive' + ).to.be.true; + expect(await isOnTopLayer(hoverOverlay), 'hover overlay interactive').to + .be.false; + }); + + it('opens custom overlay', async () => { + const button = testDiv.querySelector('#first-button') as HTMLElement; + const customOverlay = testDiv.querySelector('#hover-1') as HTMLElement; + const clickOverlay = testDiv.querySelector( + '#outer-popover' + ) as HTMLElement; + + expect(button).to.exist; + expect(customOverlay).to.exist; + + expect(await isOnTopLayer(customOverlay)).to.be.false; + expect(await isOnTopLayer(clickOverlay)).to.be.false; + + let opened = oneEvent(customOverlay, 'sp-opened'); + openOverlays.push( + await Overlay.open(button, 'custom', customOverlay, { + delayed: false, + placement: 'top', + offset: 10, + }) + ); + await opened; + expect(await isOnTopLayer(customOverlay)).to.be.true; + + opened = oneEvent(clickOverlay, 'sp-opened'); + openOverlays.push( + await Overlay.open(button, 'click', clickOverlay, { + delayed: false, + placement: 'bottom', + offset: 10, + }) + ); + await opened; + expect(await isOnTopLayer(clickOverlay), 'click content open').to.be + .true; + }); + + it('closes via events', async () => { + const test = await fixture(html` +
+ + + Some Content for the Dialog. + + +
+ `); + + const el = test.querySelector('sp-popover') as Popover; + const dialog = el.querySelector('sp-dialog') as Dialog; + + const opened = oneEvent(el, 'sp-opened'); + openOverlays.push( + await Overlay.open(test, 'click', el, { + delayed: false, + placement: 'bottom', + offset: 10, + }) + ); + await opened; + expect(await isInteractive(el)).to.be.true; + + const closed = oneEvent(el, 'sp-closed'); + dialog.close(); + await closed; + expect(await isInteractive(el)).to.be.false; + }); + + it('closes an inline overlay when tabbing past the content', async () => { + const el = await fixture(html` +
+ Trigger + + + + +
+ `); + + const trigger = el.querySelector('.trigger') as HTMLElement; + const content = el.querySelector('.content') as HTMLElement; + const input = el.querySelector('input') as HTMLInputElement; + const after = el.querySelector('#after') as HTMLAnchorElement; + + const opened = oneEvent(content, 'sp-opened'); + openOverlays.push( + await Overlay.open(trigger, 'inline', content, { + receivesFocus: 'auto', + }) + ); + await opened; + + expect(await isInteractive(content)).to.be.true; + expect(document.activeElement).to.equal(input); + + const closed = oneEvent(content, 'sp-closed'); + await sendKeys({ + press: 'Shift+Tab', + }); + await closed; + + expect(document.activeElement).to.equal(trigger); + + await sendKeys({ + press: 'Tab', + }); + expect(document.activeElement).to.equal(after); + expect(await isInteractive(content)).to.be.false; + }); + + it('closes an inline overlay when tabbing before the trigger', async () => { + const el = await fixture(html` +
+ + Trigger +
+ +
+
+ `); + + const trigger = el.querySelector('.trigger') as HTMLElement; + const content = el.querySelector('.content') as HTMLElement; + const input = el.querySelector('.content input') as HTMLInputElement; + const before = el.querySelector('#before') as HTMLAnchorElement; + + const open = oneEvent(trigger, 'sp-opened'); + openOverlays.push(await Overlay.open(trigger, 'inline', content, {})); + await open; + + expect(document.activeElement).to.equal(input); + + await sendKeys({ + press: 'Shift+Tab', + }); + + expect(document.activeElement).to.equal(trigger); + + await sendKeys({ + press: 'Shift+Tab', + }); + + expect(document.activeElement).to.equal(before); + }); + + it('opens detached content', async () => { + const textContent = 'This is a detached element that has been overlaid'; + const el = await fixture( + html` + + ` + ); + + const content = document.createElement('sp-popover'); + content.textContent = textContent; + + const opened = oneEvent(content, 'sp-opened'); + const closeOverlay = await Overlay.open(el, 'click', content, { + placement: 'bottom', + }); + await opened; + + expect(await isInteractive(content)).to.be.true; + + const closed = oneEvent(content, 'sp-closed'); + closeOverlay(); + await closed; + + expect(await isInteractive(content)).to.be.false; + + content.remove(); + }); +}); +describe('Overlay - type="modal", v1', () => { + describe('handle multiple separate `contextmenu` events', async () => { + let width = 0; + let height = 0; + let firstMenu: Popover; + let firstRect: DOMRect; + let secondMenu: Popover; + let secondRect: DOMRect; + before(async () => { + render( + html` + + ${virtualElementV1({ + ...virtualElementV1.args, + offset: 6, + })} + + `, + document.body + ); + + width = window.innerWidth; + height = window.innerHeight; + }); + after(() => { + document.querySelector('sp-theme')?.remove(); + }); + it('opens the first "contextmenu" overlay', async () => { + const opened = oneEvent(document, 'sp-opened'); + // Right click to open "context menu" overlay. + await sendMouse({ + steps: [ + { + type: 'move', + position: [width / 2 + 50, height / 2], + }, + { + type: 'click', + options: { + button: 'right', + }, + position: [width / 2 + 50, height / 2], + }, + ], + }); + await opened; + firstMenu = document.querySelector('sp-popover') as Popover; + expect(firstMenu.textContent).to.include('Menu source: end'); + firstRect = firstMenu.getBoundingClientRect(); + expect(firstMenu).to.not.be.null; + }); + it('closes the first "contextmenu" when opening a second', async () => { + const closed = oneEvent(document, 'sp-closed'); + const opened = oneEvent(document, 'sp-opened'); + /** + * Right click out of the "context menu" overlay to both close + * the first overlay and have the event passed to the surfacing page + * in order to open a subsequent "context menu" overlay. + * + * Using `sendMouse` here triggers the light dismiss for some reason while + * manual interacting in this way does not... + */ + const trigger = document.querySelector( + 'start-end-contextmenu' + ) as HTMLElement; + trigger.shadowRoot?.querySelector('#start')?.dispatchEvent( + new Event('contextmenu', { + composed: true, + }) + ); + await nextFrame(); + trigger.shadowRoot?.querySelector('#start')?.dispatchEvent( + new Event('pointerup', { + composed: true, + bubbles: true, + }) + ); + await closed; + await opened; + secondMenu = document.querySelector('sp-popover') as Popover; + expect(secondMenu.textContent).to.include('Menu source: start'); + secondRect = secondMenu.getBoundingClientRect(); + expect(secondMenu).to.not.be.null; + }); + it('closes the second "contextmenu" when clicking away', async () => { + const closed = oneEvent(document, 'sp-closed'); + sendMouse({ + steps: [ + { + type: 'click', + position: [width - width / 8, height - height / 8], + }, + ], + }); + await closed; + expect(firstRect.top).to.not.equal(secondRect.top); + expect(firstRect.left).to.not.equal(secondRect.left); + }); + }); + + it('does not open content off of the viewport', async () => { + before(async () => { + await setViewport({ width: 360, height: 640 }); + // Allow viewport update to propagate. + await nextFrame(); + }); + after(async () => { + await setViewport({ width: 800, height: 600 }); + // Allow viewport update to propagate. + await nextFrame(); + }); + + await fixture(html` + ${virtualElementV1({ + ...virtualElementV1.args, + offset: 6, + })} + `); + + const opened = oneEvent(document, 'sp-opened'); + // Right click to open "context menu" overlay. + sendMouse({ + steps: [ + { + type: 'move', + position: [270, 10], + }, + { + type: 'click', + options: { + button: 'right', + }, + position: [270, 10], + }, + ], + }); + await opened; + + const firstMenu = document.querySelector('sp-menu') as Menu; + expect(firstMenu).to.not.be.null; + expect(await isInteractive(firstMenu)).to.be.true; + + const closed = oneEvent(document, 'sp-closed'); + sendKeys({ + press: 'Escape', + }); + await closed; + + expect(await isInteractive(firstMenu)).to.be.false; + }); + + it('opens children in the modal stack through shadow roots', async () => { + const el = await fixture(definedOverlayElement()); + const trigger = el.querySelector( + '[slot="trigger"]' + ) as HTMLButtonElement; + let open = oneEvent(el, 'sp-opened'); + trigger.click(); + await open; + expect(el.open).to.equal('click'); + const content = document.querySelector( + 'popover-content' + ) as PopoverContent; + open = oneEvent(content, 'sp-opened'); + content.button.click(); + await open; + expect(content.trigger.open).to.equal('click'); + let close = oneEvent(content, 'sp-closed'); + content.trigger.removeAttribute('open'); + await close; + expect(content.trigger.open).to.be.null; + close = oneEvent(el, 'sp-closed'); + el.removeAttribute('open'); + await close; + expect(el.open).to.be.null; + }); +}); diff --git a/packages/overlay/test/overlay.test.ts b/packages/overlay/test/overlay.test.ts index a985a1ad37..fb87517f41 100644 --- a/packages/overlay/test/overlay.test.ts +++ b/packages/overlay/test/overlay.test.ts @@ -11,26 +11,26 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/button/sp-button.js'; import '@spectrum-web-components/dialog/sp-dialog.js'; +import '@spectrum-web-components/overlay/sp-overlay.js'; +import '@spectrum-web-components/overlay/overlay-trigger.js'; +import '@spectrum-web-components/tooltip/sp-tooltip.js'; import { Dialog } from '@spectrum-web-components/dialog'; import '@spectrum-web-components/popover/sp-popover.js'; import { Popover } from '@spectrum-web-components/popover'; import { setViewport } from '@web/test-runner-commands'; import { - ActiveOverlay, Overlay, OverlayTrigger, Placement, + VirtualTrigger, } from '@spectrum-web-components/overlay'; -import { isVisible } from '../../../test/testing-helpers.js'; import { elementUpdated, expect, - fixture, html, nextFrame, oneEvent, - waitUntil, } from '@open-wc/testing'; import { sendKeys } from '@web/test-runner-commands'; import { @@ -39,13 +39,35 @@ import { } from '../stories/overlay.stories'; import { PopoverContent } from '../stories/overlay-story-components.js'; import { sendMouse } from '../../../test/plugins/browser.js'; +import { spy } from 'sinon'; +import '@spectrum-web-components/theme/sp-theme.js'; +import '@spectrum-web-components/theme/src/themes.js'; +import { Theme } from '@spectrum-web-components/theme'; +import { render, TemplateResult } from '@spectrum-web-components/base'; +import { + fixture, + isInteractive, + isOnTopLayer, +} from '../../../test/testing-helpers.js'; +import { Menu } from '@spectrum-web-components/menu'; + +async function styledFixture( + story: TemplateResult +): Promise { + const test = await fixture(html` + + ${story} + + `); + return test.children[0] as T; +} describe('Overlays', () => { let testDiv!: HTMLDivElement; - let openOverlays: (() => void)[] = []; + let openOverlays: Overlay[] = []; beforeEach(async () => { - testDiv = await fixture( + testDiv = await styledFixture( html`
- + Show Popover
- - - A popover message + + +
+ A popover message +
+ + Test 1 + + Test 2 + Test 3 -
+ Hover message -
-
+ + Other hover message -
+
` @@ -100,7 +119,7 @@ describe('Overlays', () => { }); afterEach(() => { - openOverlays.map((close) => close()); + openOverlays.map((overlay) => (overlay.open = false)); openOverlays = []; }); @@ -117,106 +136,157 @@ describe('Overlays', () => { 'right', 'right-start', 'right-end', - 'none', ].map((direction) => { const placement = direction as Placement; it(`opens a popover - ${placement}`, async () => { + const clickSpy = spy(); const button = testDiv.querySelector( '#first-button' ) as HTMLElement; const outerPopover = testDiv.querySelector( '#outer-popover' ) as Popover; + outerPopover.addEventListener('click', () => { + clickSpy(); + }); - expect(outerPopover.parentElement).to.exist; - if (outerPopover.parentElement) { - expect(outerPopover.parentElement.id).to.equal( - 'overlay-content' - ); - } - - expect(isVisible(outerPopover)).to.be.false; - + expect(await isInteractive(outerPopover)).to.be.false; expect(button).to.exist; - const opened = oneEvent(button, 'sp-opened'); + const opened = oneEvent(outerPopover, 'sp-opened'); openOverlays.push( - await Overlay.open(button, 'click', outerPopover, { + await Overlay.open(outerPopover, { + trigger: button, + type: 'auto', delayed: false, placement, offset: 10, }) ); + button.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); await opened; + expect(await isInteractive(outerPopover)).to.be.true; + }); + }); + + it(`opens a modal dialog`, async () => { + const button = testDiv.querySelector('#first-button') as HTMLElement; + const outerPopover = testDiv.querySelector('#outer-popover') as Popover; + + expect(await isInteractive(outerPopover)).to.be.false; + + expect(button).to.exist; + + const opened = oneEvent(outerPopover, 'sp-opened'); + openOverlays.push( + await Overlay.open(outerPopover, { + trigger: button, + }) + ); + button.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); + await opened; - expect(outerPopover.parentElement).to.exist; - if (outerPopover.parentElement) { - expect(outerPopover.parentElement.id).not.to.equal( - 'overlay-content' - ); - } - expect(isVisible(outerPopover)).to.be.true; + const firstFocused = outerPopover.querySelector( + '#outer-focus-target' + ) as HTMLElement; + expect(document.activeElement === firstFocused).to.be.true; + + /** + * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page + * and the backward tab past the known beginning of the page. Test that you never focused the button + * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better. + */ + + await sendKeys({ + press: 'Tab', }); + + expect(document.activeElement === button).to.be.false; + await sendKeys({ + press: 'Tab', + }); + + expect(document.activeElement === button).to.be.false; + + await sendKeys({ + press: 'Shift+Tab', + }); + + expect(document.activeElement === button).to.be.false; + + await sendKeys({ + press: 'Shift+Tab', + }); + + expect(document.activeElement === button).to.be.false; + + await sendKeys({ + press: 'Shift+Tab', + }); + + expect(document.activeElement === button).to.be.false; }); it(`updates a popover`, async () => { const button = testDiv.querySelector('#first-button') as HTMLElement; const outerPopover = testDiv.querySelector('#outer-popover') as Popover; - expect(outerPopover.parentElement).to.exist; - if (outerPopover.parentElement) { - expect(outerPopover.parentElement.id).to.equal('overlay-content'); - } - - expect(isVisible(outerPopover)).to.be.false; + expect(await isInteractive(outerPopover)).to.be.false; expect(button).to.exist; - const opened = oneEvent(button, 'sp-opened'); + const opened = oneEvent(outerPopover, 'sp-opened'); openOverlays.push( - await Overlay.open(button, 'click', outerPopover, { - delayed: false, + await Overlay.open(outerPopover, { + trigger: button, + type: 'auto', offset: 10, }) ); + button.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); await opened; - expect(isVisible(outerPopover)).to.be.true; + expect(await isInteractive(outerPopover)).to.be.true; Overlay.update(); - expect(isVisible(outerPopover)).to.be.true; + expect(await isInteractive(outerPopover)).to.be.true; }); it(`opens a popover w/ delay`, async () => { const button = testDiv.querySelector('#first-button') as HTMLElement; const outerPopover = testDiv.querySelector('#outer-popover') as Popover; - expect(outerPopover.parentElement).to.exist; - if (outerPopover.parentElement) { - expect(outerPopover.parentElement.id).to.equal('overlay-content'); - } - - expect(isVisible(outerPopover)).to.be.false; - + expect(await isInteractive(outerPopover)).to.be.false; expect(button).to.exist; - const opened = oneEvent(button, 'sp-opened'); + const opened = oneEvent(outerPopover, 'sp-opened'); + const start = performance.now(); openOverlays.push( - await Overlay.open(button, 'click', outerPopover, { + await Overlay.open(outerPopover, { + trigger: button, + type: 'auto', delayed: true, offset: 10, }) ); + button.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); await opened; - - expect(outerPopover.parentElement).to.exist; - if (outerPopover.parentElement) { - expect(outerPopover.parentElement.id).not.to.equal( - 'overlay-content' - ); - } - expect(isVisible(outerPopover)).to.be.true; + const end = performance.now(); + expect(await isInteractive(outerPopover)).to.be.true; + expect(end - start).to.be.greaterThan(1000); }); it('opens hover overlay', async () => { @@ -226,43 +296,48 @@ describe('Overlays', () => { '#outer-popover' ) as HTMLElement; - expect(isVisible(hoverOverlay)).to.be.false; - expect(isVisible(clickOverlay)).to.be.false; + expect(await isOnTopLayer(hoverOverlay)).to.be.false; + expect(await isOnTopLayer(clickOverlay)).to.be.false; - let opened = oneEvent(button, 'sp-opened'); + let opened = oneEvent(hoverOverlay, 'sp-opened'); openOverlays.push( - await Overlay.open(button, 'hover', hoverOverlay, { - delayed: false, + await Overlay.open(hoverOverlay, { + trigger: button, + type: 'hint', placement: 'top', offset: 10, }) ); + button.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); await opened; + expect(await isOnTopLayer(hoverOverlay)).to.be.true; - expect(hoverOverlay.parentElement).to.exist; - if (hoverOverlay.parentElement) { - expect(hoverOverlay.parentElement.id).not.to.equal( - 'overlay-content' - ); - } - expect(isVisible(hoverOverlay)).to.be.true; - - opened = oneEvent(button, 'sp-opened'); + opened = oneEvent(clickOverlay, 'sp-opened'); + const closed = oneEvent(hoverOverlay, 'sp-closed'); // Opening click overlay should close the hover overlay openOverlays.push( - await Overlay.open(button, 'click', clickOverlay, { - delayed: false, + await Overlay.open(clickOverlay, { + trigger: button, + type: 'auto', placement: 'bottom', offset: 10, }) ); + button.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); await opened; - if (hoverOverlay.parentElement) { - expect(hoverOverlay.parentElement.id).to.equal('overlay-content'); - } - - expect(isVisible(hoverOverlay)).to.be.false; - expect(isVisible(clickOverlay)).to.be.true; + await closed; + expect( + await isInteractive(clickOverlay), + 'click overlay not interactive' + ).to.be.true; + expect(await isOnTopLayer(hoverOverlay), 'hover overlay interactive').to + .be.false; }); it('opens custom overlay', async () => { @@ -275,78 +350,127 @@ describe('Overlays', () => { expect(button).to.exist; expect(customOverlay).to.exist; - expect(isVisible(customOverlay)).to.be.false; - expect(isVisible(clickOverlay)).to.be.false; + expect(await isOnTopLayer(customOverlay)).to.be.false; + expect(await isOnTopLayer(clickOverlay)).to.be.false; - let opened = oneEvent(button, 'sp-opened'); + let opened = oneEvent(customOverlay, 'sp-opened'); openOverlays.push( - await Overlay.open(button, 'custom', customOverlay, { - delayed: false, + await Overlay.open(customOverlay, { + trigger: button, + type: 'auto', placement: 'top', offset: 10, }) ); + button.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); await opened; + expect(await isOnTopLayer(customOverlay)).to.be.true; - expect(customOverlay.parentElement).to.exist; - if (customOverlay.parentElement) { - expect(customOverlay.parentElement.id).not.to.equal( - 'overlay-content' - ); - } - expect(isVisible(customOverlay)).to.be.true; - - opened = oneEvent(button, 'sp-opened'); - // Opening click overlay should close the hover overlay + opened = oneEvent(clickOverlay, 'sp-opened'); openOverlays.push( - await Overlay.open(button, 'click', clickOverlay, { - delayed: false, + await Overlay.open(clickOverlay, { + trigger: button, + type: 'auto', placement: 'bottom', offset: 10, }) ); + button.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); await opened; - - expect(isVisible(customOverlay)).to.be.true; - expect(isVisible(clickOverlay)).to.be.true; + expect(await isOnTopLayer(clickOverlay), 'click content open').to.be + .true; }); it('closes via events', async () => { - const el = await fixture(html` -
- + const test = await fixture(html` +
+ + + Some Content for the Dialog. + +
`); + const el = test.querySelector('sp-popover') as Popover; const dialog = el.querySelector('sp-dialog') as Dialog; const opened = oneEvent(el, 'sp-opened'); openOverlays.push( - await Overlay.open(el, 'click', dialog, { - delayed: false, + await Overlay.open(el, { + trigger: test, + type: 'auto', placement: 'bottom', offset: 10, }) ); + test.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); await opened; + expect(await isInteractive(el)).to.be.true; + const closed = oneEvent(el, 'sp-closed'); dialog.close(); + await closed; + expect(await isInteractive(el)).to.be.false; + }); + + it('positions with a VirtualTrigger', async () => { + const test = await fixture(html` +
+ + + Some Content for the Dialog. + + +
+ `); - await waitUntil( - () => - !!dialog.parentElement && - dialog.parentElement.tagName !== 'ACTIVE-OVERLAY', - 'content is returned' + const el = test.querySelector('sp-popover') as Popover; + const trigger = new VirtualTrigger(100, 100); + + const opened = oneEvent(el, 'sp-opened'); + openOverlays.push( + await Overlay.open(el, { + trigger, + type: 'auto', + placement: 'right', + offset: 10, + }) + ); + test.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement ); + await opened; + expect(await isInteractive(el)).to.be.true; + + const initial = el.getBoundingClientRect(); + trigger.updateBoundingClientRect(500, 500); + await nextFrame(); + await nextFrame(); + const final = el.getBoundingClientRect(); + expect(initial.x).to.not.equal(8); + expect(initial.y).to.not.equal(8); + expect(initial.x).to.not.equal(final.x); + expect(initial.y).to.not.equal(final.y); }); it('closes an inline overlay when tabbing past the content', async () => { const el = await fixture(html`
Trigger -
+ -
+
`); @@ -356,36 +480,36 @@ describe('Overlays', () => { const input = el.querySelector('input') as HTMLInputElement; const after = el.querySelector('#after') as HTMLAnchorElement; - openOverlays.push(await Overlay.open(trigger, 'inline', content, {})); - - trigger.focus(); - await sendKeys({ - press: 'Tab', - }); + const opened = oneEvent(content, 'sp-opened'); + openOverlays.push( + await Overlay.open(content, { + trigger, + type: 'auto', + receivesFocus: 'auto', + }) + ); + trigger.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); + await opened; + expect(await isInteractive(content)).to.be.true; expect(document.activeElement).to.equal(input); - expect(input.closest('active-overlay') !== null); + const closed = oneEvent(content, 'sp-closed'); await sendKeys({ press: 'Shift+Tab', }); + await closed; expect(document.activeElement).to.equal(trigger); await sendKeys({ press: 'Tab', }); - - expect(document.activeElement).to.equal(input); - - await sendKeys({ - press: 'Tab', - }); - expect(document.activeElement).to.equal(after); - await waitUntil( - () => document.querySelector('active-overlay') === null - ); + expect(await isInteractive(content)).to.be.false; }); it('closes an inline overlay when tabbing before the trigger', async () => { @@ -407,15 +531,20 @@ describe('Overlays', () => { const input = el.querySelector('.content input') as HTMLInputElement; const before = el.querySelector('#before') as HTMLAnchorElement; - openOverlays.push(await Overlay.open(trigger, 'inline', content, {})); - - trigger.focus(); - await sendKeys({ - press: 'Tab', - }); + const open = oneEvent(trigger, 'sp-opened'); + openOverlays.push( + await Overlay.open(content, { + trigger, + type: 'auto', + }) + ); + trigger.insertAdjacentElement( + 'afterend', + openOverlays.at(-1) as HTMLElement + ); + await open; expect(document.activeElement).to.equal(input); - expect(input.closest('active-overlay') !== null); await sendKeys({ press: 'Shift+Tab', @@ -428,9 +557,6 @@ describe('Overlays', () => { }); expect(document.activeElement).to.equal(before); - await waitUntil( - () => document.querySelector('active-overlay') === null - ); }); it('opens detached content', async () => { @@ -441,122 +567,141 @@ describe('Overlays', () => { ` ); - const content = document.createElement('div'); + const content = document.createElement('sp-popover'); content.textContent = textContent; - const opened = oneEvent(el, 'sp-opened'); - const closeOverlay = await Overlay.open(el, 'click', content, { + const opened = oneEvent(content, 'sp-opened'); + const overlay = await Overlay.open(content, { + trigger: el, + type: 'auto', placement: 'bottom', }); + el.insertAdjacentElement('afterend', overlay); await opened; - let activeOverlay = document.querySelector('active-overlay'); - - if (activeOverlay) { - expect(activeOverlay.textContent).to.equal(textContent); - } else { - expect(activeOverlay).to.not.be.null; - } + expect(await isInteractive(content)).to.be.true; - const closed = oneEvent(el, 'sp-closed'); - closeOverlay(); + const closed = oneEvent(content, 'sp-closed'); + overlay.open = false; await closed; - activeOverlay = document.querySelector('active-overlay'); - - expect(activeOverlay).to.be.null; + expect(await isInteractive(content)).to.be.false; content.remove(); }); }); describe('Overlay - type="modal"', () => { - it('closes on `contextmenu` and passes that to the underlying page', async () => { - await fixture(html` - ${virtualElement({ - ...virtualElement.args, - offset: 6, - })} - `); - const width = window.innerWidth; - const height = window.innerHeight; - let opened = oneEvent(document, 'sp-opened'); - // Right click to open "context menu" overlay. - sendMouse({ - steps: [ - { - type: 'move', - position: [width / 2 + 50, height / 2], - }, - { - type: 'click', - options: { - button: 'right', - }, - position: [width / 2 + 50, height / 2], - }, - ], + describe('handle multiple separate `contextmenu` events', async () => { + let width = 0; + let height = 0; + let firstMenu: Popover; + let firstRect: DOMRect; + let secondMenu: Popover; + let secondRect: DOMRect; + before(async () => { + render( + html` + + ${virtualElement({ + ...virtualElement.args, + offset: 6, + })} + + `, + document.body + ); + + width = window.innerWidth; + height = window.innerHeight; }); - await opened; - const firstOverlay = document.querySelector( - 'active-overlay' - ) as ActiveOverlay; - const firstHeadline = firstOverlay.querySelector( - '[slot="header"]' - ) as HTMLSpanElement; - expect(firstOverlay, 'first overlay').to.not.be.null; - expect(firstOverlay.isConnected).to.be.true; - expect(firstHeadline.textContent).to.equal('Menu source: end'); - let closed = oneEvent(document, 'sp-closed'); - opened = oneEvent(document, 'sp-opened'); - // Right click to out of the "context menu" overlay to both close - // the first overlay and have the event passed to the surfacing page - // in order to open a subsequent "context menu" overlay. - sendMouse({ - steps: [ - { - type: 'move', - position: [width / 4, height / 4], - }, - { - type: 'click', - options: { - button: 'right', + after(() => { + document.querySelector('sp-theme')?.remove(); + }); + it('opens the first "contextmenu" overlay', async () => { + const opened = oneEvent(document, 'sp-opened'); + // Right click to open "context menu" overlay. + await sendMouse({ + steps: [ + { + type: 'move', + position: [width / 2 + 50, height / 2], }, - position: [width / 4, height / 4], - }, - ], + { + type: 'click', + options: { + button: 'right', + }, + position: [width / 2 + 50, height / 2], + }, + ], + }); + await opened; + firstMenu = document.querySelector('sp-popover') as Popover; + expect(firstMenu.textContent).to.include('Menu source: end'); + firstRect = firstMenu.getBoundingClientRect(); + expect(firstMenu).to.not.be.null; }); - await closed; - await opened; - const secondOverlay = document.querySelector( - 'active-overlay' - ) as ActiveOverlay; - const secondHeadline = secondOverlay.querySelector( - '[slot="header"]' - ) as HTMLSpanElement; - expect(secondOverlay, 'second overlay').to.not.be.null; - expect(secondOverlay).to.not.equal(firstOverlay); - expect(firstOverlay.isConnected).to.be.false; - expect(secondOverlay.isConnected).to.be.true; - expect(secondHeadline.textContent).to.equal('Menu source: start'); - closed = oneEvent(document, 'sp-closed'); - sendMouse({ - steps: [ - { - type: 'move', - position: [width / 8, height / 8], - }, - { - type: 'click', - position: [width / 8, height / 8], - }, - ], + it('closes the first "contextmenu" when opening a second', async () => { + const closed = oneEvent(document, 'sp-closed'); + const opened = oneEvent(document, 'sp-opened'); + /** + * Right click out of the "context menu" overlay to both close + * the first overlay and have the event passed to the surfacing page + * in order to open a subsequent "context menu" overlay. + * + * Using `sendMouse` here triggers the light dismiss for some reason while + * manual interacting in this way does not... + */ + const trigger = document.querySelector( + 'start-end-contextmenu' + ) as HTMLElement; + trigger.shadowRoot?.querySelector('#start')?.dispatchEvent( + new Event('contextmenu', { + composed: true, + }) + ); + await nextFrame(); + trigger.shadowRoot?.querySelector('#start')?.dispatchEvent( + new Event('pointerup', { + composed: true, + bubbles: true, + }) + ); + await closed; + await opened; + secondMenu = document.querySelector('sp-popover') as Popover; + expect(secondMenu.textContent).to.include('Menu source: start'); + secondRect = secondMenu.getBoundingClientRect(); + expect(secondMenu).to.not.be.null; + }); + it('closes the second "contextmenu" when clicking away', async () => { + const closed = oneEvent(document, 'sp-closed'); + sendMouse({ + steps: [ + { + type: 'click', + position: [width - width / 8, height - height / 8], + }, + ], + }); + await closed; + expect(firstRect.top).to.not.equal(secondRect.top); + expect(firstRect.left).to.not.equal(secondRect.left); }); - await closed; - await nextFrame(); }); it('does not open content off of the viewport', async () => { + before(async () => { + await setViewport({ width: 360, height: 640 }); + // Allow viewport update to propagate. + await nextFrame(); + }); + after(async () => { + await setViewport({ width: 800, height: 600 }); + // Allow viewport update to propagate. + await nextFrame(); + }); + await fixture(html` ${virtualElement({ ...virtualElement.args, @@ -564,10 +709,6 @@ describe('Overlay - type="modal"', () => { })} `); - await setViewport({ width: 360, height: 640 }); - // Allow viewport update to propagate. - await nextFrame(); - const opened = oneEvent(document, 'sp-opened'); // Right click to open "context menu" overlay. sendMouse({ @@ -587,21 +728,17 @@ describe('Overlay - type="modal"', () => { }); await opened; - const activeOverlay = document.querySelector( - 'active-overlay' - ) as ActiveOverlay; - - expect(activeOverlay.placement).to.equal('right-start'); - expect(activeOverlay.getAttribute('actual-placement')).to.equal( - 'bottom' - ); + const firstMenu = document.querySelector('sp-menu') as Menu; + expect(firstMenu).to.not.be.null; + expect(await isInteractive(firstMenu)).to.be.true; const closed = oneEvent(document, 'sp-closed'); sendKeys({ press: 'Escape', }); await closed; - await nextFrame(); + + expect(await isInteractive(firstMenu)).to.be.false; }); it('opens children in the modal stack through shadow roots', async () => { @@ -612,52 +749,48 @@ describe('Overlay - type="modal"', () => { let open = oneEvent(el, 'sp-opened'); trigger.click(); await open; + expect(el.open).to.equal('click'); const content = document.querySelector( 'popover-content' ) as PopoverContent; open = oneEvent(content, 'sp-opened'); content.button.click(); await open; - const activeOverlays = document.querySelectorAll('active-overlay'); - activeOverlays.forEach((overlay) => { - expect(overlay.slot).to.equal('open'); - }); + expect(content.trigger.open).to.equal('click'); let close = oneEvent(content, 'sp-closed'); content.trigger.removeAttribute('open'); await close; + expect(content.trigger.open).to.be.null; close = oneEvent(el, 'sp-closed'); el.removeAttribute('open'); await close; + expect(el.open).to.be.null; }); }); describe('Overlay - timing', () => { it('manages multiple modals in a row without preventing them from closing', async () => { const test = await fixture(html`
- + Trigger 1

Hover contentent for "Trigger 1".

 - + Trigger 2 - -

Hover contentent for "Trigger 2".

-

Click contentent for "Trigger 2".

 + +

Hover contentent for "Trigger 2".

+
`); - const overlayTrigger1 = test.querySelector( - 'overlay-trigger:first-child' - ) as OverlayTrigger; - const overlayTrigger2 = test.querySelector( - 'overlay-trigger:last-child' - ) as OverlayTrigger; + const overlayTrigger1 = test.querySelector('#test-1') as OverlayTrigger; + const overlayTrigger2 = test.querySelector('#test-2') as OverlayTrigger; const trigger1 = overlayTrigger1.querySelector( '[slot="trigger"]' ) as HTMLButtonElement; @@ -671,19 +804,16 @@ describe('Overlay - timing', () => { boundingRectTrigger1.left + boundingRectTrigger1.width / 2, boundingRectTrigger1.top + boundingRectTrigger1.height / 2, ]; - const outsideTrigger1: [number, number] = [ - boundingRectTrigger1.left + boundingRectTrigger1.width * 2, - boundingRectTrigger1.top + boundingRectTrigger1.height * 2, + const outsideTriggers: [number, number] = [ + boundingRectTrigger1.left + boundingRectTrigger1.width / 2, + 300, ]; const trigger2Position: [number, number] = [ boundingRectTrigger2.left + boundingRectTrigger2.width / 2, - boundingRectTrigger2.top + boundingRectTrigger2.height / 2, - ]; - const outsideTrigger2: [number, number] = [ - boundingRectTrigger2.left + boundingRectTrigger2.width * 2, - boundingRectTrigger2.top + boundingRectTrigger2.height / 2, + boundingRectTrigger2.top + boundingRectTrigger2.height / 4, ]; + // Move poitner over "Trigger 1", should _start_ to open "hover" content. await sendMouse({ steps: [ { @@ -694,16 +824,18 @@ describe('Overlay - timing', () => { }); await nextFrame(); await nextFrame(); + // Move pointer out of "Trigger 1", should _start_ to close "hover" content. await sendMouse({ steps: [ { type: 'move', - position: outsideTrigger1, + position: outsideTriggers, }, ], }); await nextFrame(); await nextFrame(); + // Move pointer over "Trigger 2", should _start_ to open "hover" content. await sendMouse({ steps: [ { @@ -715,7 +847,8 @@ describe('Overlay - timing', () => { await nextFrame(); await nextFrame(); const opened = oneEvent(trigger2, 'sp-opened'); - sendMouse({ + // Click "Trigger 2", should _start_ to open "click" content and _start_ to close "hover" content. + await sendMouse({ steps: [ { type: 'click', @@ -724,27 +857,28 @@ describe('Overlay - timing', () => { ], }); await opened; + await nextFrame(); + await nextFrame(); + // "click" content for "Trigger 2", _only_, open. expect(overlayTrigger1.hasAttribute('open')).to.be.false; expect(overlayTrigger2.hasAttribute('open')).to.be.true; expect(overlayTrigger2.getAttribute('open')).to.equal('click'); const closed = oneEvent(overlayTrigger2, 'sp-closed'); - sendMouse({ + await sendMouse({ steps: [ { type: 'click', - position: outsideTrigger2, + position: outsideTriggers, }, ], }); await closed; - // sometimes safari needs to wait a few frames for the open attribute to update - for (let i = 0; i < 3; i++) await nextFrame(); - + // Both overlays are closed. + // Neither trigger received "focus" because the pointer "clicked" away, redirecting focus to expect(overlayTrigger1.hasAttribute('open')).to.be.false; - expect(overlayTrigger2.hasAttribute('open'), overlayTrigger2.open).to.be - .false; + expect(overlayTrigger2.hasAttribute('open')).to.be.false; }); }); diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index ffbeb4feb4..a505557062 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -16,13 +16,14 @@ import { html, nothing, PropertyValues, - render, SizedMixin, TemplateResult, } from '@spectrum-web-components/base'; import { classMap, ifDefined, + StyleInfo, + styleMap, } from '@spectrum-web-components/base/src/directives.js'; import { property, @@ -34,30 +35,20 @@ import pickerStyles from './picker.css.js'; import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; -import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js'; import '@spectrum-web-components/menu/sp-menu.js'; import type { Menu, MenuItem, - MenuItemAddedOrUpdatedEvent, MenuItemChildren, - MenuItemRemovedEvent, } from '@spectrum-web-components/menu'; -import '@spectrum-web-components/tray/sp-tray.js'; -import '@spectrum-web-components/popover/sp-popover.js'; -import type { Popover } from '@spectrum-web-components/popover'; -import { - openOverlay, - OverlayOptions, - Placement, - TriggerInteractions, -} from '@spectrum-web-components/overlay'; +import { Placement } from '@spectrum-web-components/overlay'; import { IS_MOBILE, MatchMediaController, } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js'; +import type { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js'; const chevronClass = { s: 'spectrum-UIIcon-ChevronDown75', @@ -67,18 +58,6 @@ const chevronClass = { }; export class PickerBase extends SizedMixin(Focusable) { - /** - * @private - */ - public static openOverlay = async ( - target: HTMLElement, - interaction: TriggerInteractions, - content: HTMLElement, - options: OverlayOptions - ): Promise<() => void> => { - return await openOverlay(target, interaction, content, options); - }; - protected isMobile = new MatchMediaController(this, IS_MOBILE); @state() @@ -87,9 +66,7 @@ export class PickerBase extends SizedMixin(Focusable) { @query('#button') public button!: HTMLButtonElement; - public get target(): HTMLButtonElement | this { - return this.button; - } + private deprecatedMenu: Menu | null = null; @property({ type: Boolean, reflect: true }) public override disabled = false; @@ -114,13 +91,18 @@ export class PickerBase extends SizedMixin(Focusable) { public selects: undefined | 'single' = 'single'; - public menuItems: MenuItem[] = []; - private restoreChildren?: () => void; + protected get menuItems(): MenuItem[] { + return this.optionsMenu.childItems; + } + + @query('sp-menu') + protected optionsMenu!: Menu; - public optionsMenu!: Menu; + @query('sp-overlay') + protected overlayElement!: Overlay; /** - * @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"} + * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"} * @attr */ @@ -134,20 +116,26 @@ export class PickerBase extends SizedMixin(Focusable) { public value = ''; @property({ attribute: false }) - public selectedItem?: MenuItem; + public get selectedItem(): MenuItem | undefined { + return this._selectedItem; + } - private closeOverlay?: Promise<() => void>; + public set selectedItem(selectedItem: MenuItem | undefined) { + this.selectedItemContent = selectedItem + ? selectedItem.itemChildren + : undefined; - private popoverEl!: Popover; + if (selectedItem === this.selectedItem) return; + const oldSelectedItem = this.selectedItem; + this._selectedItem = selectedItem; + this.requestUpdate('selectedItem', oldSelectedItem); + } + + _selectedItem?: MenuItem; protected listRole: 'listbox' | 'menu' = 'listbox'; protected itemRole = 'option'; - public constructor() { - super(); - this.onKeydown = this.onKeydown.bind(this); - } - public override get focusElement(): HTMLElement { if (this.open) { return this.optionsMenu; @@ -159,15 +147,45 @@ export class PickerBase extends SizedMixin(Focusable) { this.focused = true; } - public onButtonBlur(): void { + public handleButtonBlur(): void { this.focused = false; - (this.target as HTMLButtonElement).removeEventListener( - 'keydown', - this.onKeydown - ); } - protected onButtonClick(): void { + protected preventNextToggle: 'no' | 'maybe' | 'yes' = 'no'; + + protected handlebuttonPointerdown(): void { + this.preventNextToggle = 'maybe'; + const cleanup = (): void => { + document.removeEventListener('pointerup', cleanup); + document.removeEventListener('pointercancel', cleanup); + requestAnimationFrame(() => { + // Complete cleanup on the animation frame so that `click` can go first. + this.preventNextToggle = 'no'; + }); + }; + // Ensure that however the pointer goes up we do `cleanup()`. + document.addEventListener('pointerup', cleanup); + document.addEventListener('pointercancel', cleanup); + } + + protected handleButtonFocus(event: FocusEvent): void { + // When focus comes from a pointer event, and the related target is the Menu, + // we don't want to reopen the Menu. + if ( + this.preventNextToggle === 'maybe' && + event.relatedTarget === this.optionsMenu + ) { + this.preventNextToggle = 'yes'; + } + } + + protected handleButtonClick(): void { + if (this.enterKeydownOn && this.enterKeydownOn !== this.button) { + return; + } + if (this.preventNextToggle === 'yes') { + return; + } this.toggle(); } @@ -179,24 +197,17 @@ export class PickerBase extends SizedMixin(Focusable) { } } - public onHelperFocus(): void { - // set focused to true here instead of onButtonFocus so clicks don't flash a focus outline + public handleHelperFocus(): void { + // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline this.focused = true; this.button.focus(); } - public onButtonFocus(): void { - (this.target as HTMLButtonElement).addEventListener( - 'keydown', - this.onKeydown - ); - } - public handleChange(event: Event): void { const target = event.target as Menu; const [selected] = target.selectedItems; + event.stopPropagation(); if (event.cancelable) { - event.stopPropagation(); this.setValueFromItem(selected, event); } else { // Non-cancelable "change" events announce a selection with no value @@ -205,7 +216,7 @@ export class PickerBase extends SizedMixin(Focusable) { } } - protected onKeydown = (event: KeyboardEvent): void => { + protected handleKeydown = (event: KeyboardEvent): void => { this.focused = true; if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') { return; @@ -214,28 +225,32 @@ export class PickerBase extends SizedMixin(Focusable) { this.toggle(true); }; - public async setValueFromItem( + protected async setValueFromItem( item: MenuItem, menuChangeEvent?: Event ): Promise { + // should always close when "setting" a value. + this.open = false; const oldSelectedItem = this.selectedItem; const oldValue = this.value; + + // Set a value. this.selectedItem = item; this.value = item.value; - this.open = false; await this.updateComplete; const applyDefault = this.dispatchEvent( new Event('change', { bubbles: true, + // Allow it to be prevented. cancelable: true, composed: true, }) ); - if (!applyDefault) { + if (!applyDefault && this.selects) { if (menuChangeEvent) { menuChangeEvent.preventDefault(); } - this.setMenuItemSelected(this.selectedItem, false); + this.setMenuItemSelected(this.selectedItem as MenuItem, false); if (oldSelectedItem) { this.setMenuItemSelected(oldSelectedItem, true); } @@ -243,6 +258,11 @@ export class PickerBase extends SizedMixin(Focusable) { this.value = oldValue; this.open = true; return; + } else if (!this.selects) { + // Unset the value if not carrying a selection + this.selectedItem = oldSelectedItem; + this.value = oldValue; + return; } if (oldSelectedItem) { this.setMenuItemSelected(oldSelectedItem, false); @@ -270,110 +290,33 @@ export class PickerBase extends SizedMixin(Focusable) { this.open = false; } - public overlayOpenCallback = async (): Promise => { - this.updateMenuItems(); - await this.itemsUpdated; - await this.optionsMenu.updateComplete; - requestAnimationFrame(() => this.menuStateResolver()); - }; - - public overlayCloseCallback = async (): Promise => { - if (this.restoreChildren) { - this.restoreChildren(); - this.restoreChildren = undefined; - } - this.close(); - requestAnimationFrame(() => this.menuStateResolver()); - }; - - private popoverFragment!: DocumentFragment; - - private async generatePopover(): Promise { - if (!this.popoverFragment) { - this.popoverFragment = document.createDocumentFragment(); + protected get containerStyles(): StyleInfo { + // @todo: test in mobile + /* c8 ignore next 5 */ + if (this.isMobile.matches) { + return { + '--swc-menu-width': '100%', + }; } - render(this.renderPopover, this.popoverFragment, { host: this }); - this.popoverEl = this.popoverFragment.children[0] as Popover; - this.optionsMenu = this.popoverEl.children[1] as Menu; + return {}; } - private async openMenu(): Promise { - /* c8 ignore next 9 */ - let reparentableChildren: Element[] = []; - const deprecatedMenu = this.querySelector(':scope > sp-menu') as Menu; - - await this.generatePopover(); - if (deprecatedMenu) { - reparentableChildren = Array.from(deprecatedMenu.children); - } else { - reparentableChildren = Array.from(this.children).filter( - (element) => { - return !element.hasAttribute('slot'); - } - ); - } - - if (reparentableChildren.length === 0) { - this.menuStateResolver(); - return; - } - - this.restoreChildren = reparentChildren< - Element & { focused?: boolean } - >(reparentableChildren, this.optionsMenu, { - position: 'beforeend', - prepareCallback: ( - el: Element & { - focused?: boolean | undefined; - value?: string; - selected?: boolean; - } - ) => { - if (this.value === el.value) { - this.setMenuItemSelected(el as MenuItem, true); - } - return (el) => { - if (typeof el.focused !== 'undefined') { - el.focused = false; - } - }; - }, - }); - - this.sizePopover(this.popoverEl); - if (window.__swc.DEBUG) { - window.__swc.ignoreWarningLevels.deprecation = true; - } - this.closeOverlay = Picker.openOverlay(this, 'modal', this.popoverEl, { - placement: this.isMobile.matches ? 'none' : this.placement, - receivesFocus: 'auto', - }); - if (window.__swc.DEBUG) { - window.__swc.ignoreWarningLevels.deprecation = false; - } + @property({ attribute: false }) + protected get selectedItemContent(): MenuItemChildren { + return this._selectedItemContent || { icon: [], content: [] }; } - protected sizePopover(popover: HTMLElement): void { - if (this.isMobile.matches) { - popover.style.setProperty('--swc-menu-width', `100%`); - return; - } - } + protected set selectedItemContent( + selectedItemContent: MenuItemChildren | undefined + ) { + if (selectedItemContent === this.selectedItemContent) return; - private async closeMenu(): Promise { - if (this.closeOverlay) { - const closeOverlay = this.closeOverlay; - delete this.closeOverlay; - (await closeOverlay)(); - } + const oldContent = this.selectedItemContent; + this._selectedItemContent = selectedItemContent; + this.requestUpdate('selectedItemContent', oldContent); } - protected get selectedItemContent(): MenuItemChildren { - if (this.selectedItem) { - return this.selectedItem.itemChildren; - } - return { icon: [], content: [] }; - } + _selectedItemContent?: MenuItemChildren; protected renderLabelContent(content: Node[]): TemplateResult | Node[] { if (this.value && this.selectedItem) { @@ -400,44 +343,37 @@ export class PickerBase extends SizedMixin(Focusable) { const appliedLabel = this.appliedLabel || this.label; return [ html` - ${this.selectedItemContent.icon} ${this.renderLabelContent(this.selectedItemContent.content)} - ${ - this.value && this.selectedItem - ? html` - - ` - : html` - - ` - } - ${ - this.invalid - ? html` - - ` - : nothing - } + ${this.value && this.selectedItem + ? html` + + ` + : html` + + `} + ${this.invalid + ? html` + + ` + : nothing} `, ]; @@ -447,14 +383,47 @@ export class PickerBase extends SizedMixin(Focusable) { this.appliedLabel = value; }; + protected renderOverlay(menu: TemplateResult): TemplateResult { + import('@spectrum-web-components/overlay/sp-overlay.js'); + return html` + { + if (event.composedPath()[0] !== event.target) { + return; + } + if (event.newState === 'closed') { + this.open = false; + } + if (!this.open) { + this.optionsMenu.updateSelectedItemIndex(); + this.optionsMenu.closeDescendentOverlays(); + } + }} + > + ${this.renderContainer(menu)} + + `; + } + // a helper to throw focus to the button is needed because Safari // won't include buttons in the tab order even with tabindex="0" protected override render(): TemplateResult { return html` + ${this.renderMenu} `; } @@ -483,24 +458,19 @@ export class PickerBase extends SizedMixin(Focusable) { if (changes.has('disabled') && this.disabled) { this.open = false; } - if ( - changes.has('open') && - (this.open || typeof changes.get('open') !== 'undefined') - ) { - this.menuStatePromise = new Promise( - (res) => (this.menuStateResolver = res) - ); - if (this.open) { - this.openMenu(); - } else { - this.closeMenu(); - } + if (changes.has('value')) { + // MenuItems update a frame late for management, + // await the same here. + this.shouldScheduleManageSelection(); } - if (changes.has('value') && !changes.has('selectedItem')) { - this.updateMenuItems(); + // Maybe it's finally time to remove this support? + if (!this.hasUpdated) { + this.deprecatedMenu = this.querySelector(':scope > sp-menu'); + this.deprecatedMenu?.toggleAttribute('ignore', true); + this.deprecatedMenu?.setAttribute('selects', 'inherit'); } if (window.__swc.DEBUG) { - if (!this.hasUpdated && this.querySelector('sp-menu')) { + if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) { const { localName } = this; window.__swc.warn( this, @@ -513,6 +483,15 @@ export class PickerBase extends SizedMixin(Focusable) { super.update(changes); } + protected bindButtonKeydownListener(): void { + this.button.addEventListener('keydown', this.handleKeydown); + } + + protected override firstUpdated(changes: PropertyValues): void { + super.firstUpdated(changes); + this.bindButtonKeydownListener(); + } + protected get dismissHelper(): TemplateResult { return html`