diff --git a/.storybook/main.js b/.storybook/main.js index 5e1d7b1b92..63ab1ecb38 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -2,6 +2,9 @@ const rollupJson = require('@rollup/plugin-json'); module.exports = { stories: ['../packages/*/stories/*.stories.js'], + nodeResolve: { + exportConditions: ['browser', 'development'], + }, rollupConfig(config) { // add a new plugin to the build diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 77a7fe3791..e4e6cb0c2b 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -7,7 +7,6 @@ - + diff --git a/package.json b/package.json index 19954056a2..55ecf550c7 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "node-fetch": "^3.1.0", "npm-run-all": "^4.1.5", "patch-package": "^6.4.7", - "playwright": "^1.16.3", + "playwright": "^1.18.1", "postcss": "^8.4.5", "postcss-custom-properties": "^12.1.2", "postcss-focus-visible": "^6.0.3", diff --git a/packages/dialog/src/DialogWrapper.ts b/packages/dialog/src/DialogWrapper.ts index 418c38154e..c3c71a1edc 100644 --- a/packages/dialog/src/DialogWrapper.ts +++ b/packages/dialog/src/DialogWrapper.ts @@ -27,7 +27,8 @@ import '@spectrum-web-components/underlay/sp-underlay.js'; import '@spectrum-web-components/button/sp-button.js'; import '../sp-dialog.js'; -import styles from '@spectrum-web-components/modal/src/modal.css.js'; +import modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js'; +import modalStyles from '@spectrum-web-components/modal/src/modal.css.js'; import { Dialog } from './Dialog.js'; import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared'; import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js'; @@ -43,7 +44,7 @@ import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focu */ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) { public static get styles(): CSSResultArray { - return [styles]; + return [modalWrapperStyles, modalStyles]; } @property({ type: Boolean, reflect: true }) @@ -88,6 +89,10 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) { @property({ type: Boolean }) public responsive = false; + private transitionPromise = Promise.resolve(); + + private resolveTransitionPromise!: () => void; + @property({ type: Boolean }) public underlay = false; @@ -156,6 +161,27 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) { ); } + protected handleUnderlayTransitionend(): void { + if (!this.open) { + this.resolveTransitionPromise(); + } + } + + protected handleModalTransitionend(): void { + if (this.open || !this.underlay) { + this.resolveTransitionPromise(); + } + } + + protected update(changes: PropertyValues): void { + if (changes.has('open') && changes.get('open') !== undefined) { + this.transitionPromise = new Promise( + (res) => (this.resolveTransitionPromise = res) + ); + } + super.update(changes); + } + protected render(): TemplateResult { return html` ${this.underlay @@ -163,10 +189,14 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) { ` : html``} -
+
{ + const complete = (await super.getUpdateComplete()) as boolean; + await this.transitionPromise; + return complete; + } } diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts index 1f33e6c994..bd8053d075 100644 --- a/packages/dialog/test/dialog-wrapper.test.ts +++ b/packages/dialog/test/dialog-wrapper.test.ts @@ -10,15 +10,18 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { elementUpdated, expect, fixture } from '@open-wc/testing'; +import { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing'; import { spy } from 'sinon'; +import '@spectrum-web-components/theme/sp-theme.js'; +import '@spectrum-web-components/theme/src/themes.js'; import '../sp-dialog-wrapper.js'; import { Dialog, DialogWrapper } from '../'; import { ActionButton } from '@spectrum-web-components/action-button'; import { Button } from '@spectrum-web-components/button'; import { Underlay } from '@spectrum-web-components/underlay'; import { + longContent, wrapperButtons, wrapperButtonsUnderlay, wrapperDismissable, @@ -26,38 +29,68 @@ import { wrapperFullscreen, wrapperLabeledHero, } from '../stories/dialog-wrapper.stories.js'; +import { OverlayTrigger } from '@spectrum-web-components/overlay'; +import { html, TemplateResult } from '@spectrum-web-components/base'; +import { Theme } from '@spectrum-web-components/theme'; + +async function styledFixture( + story: TemplateResult +): Promise { + const test = await fixture(html` + ${story} + `); + return test.children[0] as T; +} describe('Dialog Wrapper', () => { it('loads wrapped dialog accessibly', async () => { - const el = await fixture(wrapperDismissable()); + const el = await styledFixture(wrapperDismissable()); await elementUpdated(el); await expect(el).to.be.accessible(); }); it('loads labeled hero dialog accessibly', async () => { - const el = await fixture(wrapperLabeledHero()); + const el = await styledFixture(wrapperLabeledHero()); await elementUpdated(el); await expect(el).to.be.accessible(); }); it('loads fullscreen wrapped dialog accessibly', async () => { - const el = await fixture(wrapperFullscreen()); + const el = await styledFixture(wrapperFullscreen()); await elementUpdated(el); await expect(el).to.be.accessible(); }); it('loads with underlay and no headline accessibly', async () => { - const el = await fixture(wrapperButtonsUnderlay()); + const el = await styledFixture(wrapperButtonsUnderlay()); await elementUpdated(el); el.headline = ''; await elementUpdated(el); expect(el).to.be.accessible(); }); + it('opens and closes', async () => { + const test = await styledFixture(longContent()); + const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper; + + await elementUpdated(el); + + const opened = oneEvent(test, 'sp-opened'); + test.open = 'click'; + await opened; + + expect(el.open).to.be.true; + + const closed = oneEvent(test, 'sp-closed'); + test.open = undefined; + await closed; + + expect(el.open).to.be.false; + }); it('dismisses via clicking the underlay when [dismissable]', async () => { - const test = await fixture( + const test = await styledFixture( wrapperDismissableUnderlayError() ); const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper; @@ -70,7 +103,7 @@ describe('Dialog Wrapper', () => { expect(el.open).to.be.false; }); it('does not dismiss via clicking the underlay :not([dismissable])', async () => { - const el = await fixture(wrapperButtonsUnderlay()); + const el = await styledFixture(wrapperButtonsUnderlay()); await elementUpdated(el); expect(el.open).to.be.true; const underlay = el.shadowRoot.querySelector('sp-underlay') as Underlay; @@ -79,7 +112,7 @@ describe('Dialog Wrapper', () => { expect(el.open).to.be.true; }); it('dismisses', async () => { - const el = await fixture(wrapperDismissable()); + const el = await styledFixture(wrapperDismissable()); await elementUpdated(el); expect(el.open).to.be.true; @@ -96,7 +129,7 @@ describe('Dialog Wrapper', () => { expect(el.open).to.be.false; }); it('manages entry focus - dismissable', async () => { - const el = await fixture(wrapperDismissable()); + const el = await styledFixture(wrapperDismissable()); await elementUpdated(el); expect(el.open).to.be.true; @@ -122,7 +155,7 @@ describe('Dialog Wrapper', () => { expect(el.open).to.be.false; }); it('manages entry focus - buttons', async () => { - const el = await fixture(wrapperButtons()); + const el = await styledFixture(wrapperButtons()); await elementUpdated(el); expect(el.open).to.be.true; @@ -146,7 +179,7 @@ describe('Dialog Wrapper', () => { const handleConfirm = (): void => confirmSpy(); const handleCancel = (): void => cancelSpy(); const handleSecondary = (): void => secondarySpy(); - const el = await fixture(wrapperButtons()); + const el = await styledFixture(wrapperButtons()); el.addEventListener('confirm', handleConfirm); el.addEventListener('cancel', handleCancel); el.addEventListener('secondary', handleSecondary); diff --git a/packages/menu/src/menu.css b/packages/menu/src/menu.css index ce45792a60..70fc06ed81 100644 --- a/packages/menu/src/menu.css +++ b/packages/menu/src/menu.css @@ -22,6 +22,11 @@ governing permissions and limitations under the License. var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap) ); + + /** + * Allow menu elements to be foreced to width 100% when placed inside of a Tray + **/ + width: var(--swc-menu-width); } :host(:focus) { diff --git a/packages/modal/src/modal-wrapper.css b/packages/modal/src/modal-wrapper.css new file mode 100644 index 0000000000..de706fc84d --- /dev/null +++ b/packages/modal/src/modal-wrapper.css @@ -0,0 +1,13 @@ +/* +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-modal-wrapper.css'; diff --git a/packages/modal/src/modal.css b/packages/modal/src/modal.css index b26e1147b5..1916f76add 100644 --- a/packages/modal/src/modal.css +++ b/packages/modal/src/modal.css @@ -10,7 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-modal-wrapper.css'; @import './spectrum-modal.css'; :host { diff --git a/packages/overlay/src/ActiveOverlay.ts b/packages/overlay/src/ActiveOverlay.ts index 3cef21ec7a..ed021f9b5e 100644 --- a/packages/overlay/src/ActiveOverlay.ts +++ b/packages/overlay/src/ActiveOverlay.ts @@ -123,6 +123,8 @@ export class ActiveOverlay extends SpectrumElement { public trigger!: HTMLElement; public virtualTrigger?: VirtualTrigger; + protected childrenReady!: Promise; + @property() public _state = stateTransition(); public get state(): OverlayStateType { @@ -245,7 +247,12 @@ export class ActiveOverlay extends SpectrumElement { this.state = 'active'; this.feature(); - if (this.placement && this.placement !== 'none') { + if (this.placement === 'none') { + this.style.setProperty( + '--swc-visual-viewport-height', + `${window.innerHeight}px` + ); + } else if (this.placement) { await this.updateOverlayPosition(); document.addEventListener( 'sp-update-overlays', @@ -253,10 +260,27 @@ export class ActiveOverlay extends SpectrumElement { ); window.addEventListener('scroll', this.updateOverlayPosition); } - await this.applyContentAnimation('sp-overlay-fade-in'); + const actions: Promise[] = []; + if (this.placement && this.placement !== 'none') { + actions.push(this.applyContentAnimation('sp-overlay-fade-in')); + } + if ( + typeof (this.overlayContent as SpectrumElement).updateComplete !== + 'undefined' + ) { + actions.push( + (this.overlayContent as SpectrumElement).updateComplete + ); + } + this.childrenReady = Promise.all(actions); + } + + public async openCallback(): Promise { + await this.updateComplete; if (this.receivesFocus) { this.focus(); } + this.trigger.dispatchEvent( new CustomEvent('sp-opened', { bubbles: true, @@ -519,9 +543,15 @@ export class ActiveOverlay extends SpectrumElement { private stealOverlayContentResolver!: () => void; protected async getUpdateComplete(): Promise { - const complete = (await super.getUpdateComplete()) as boolean; - await this.stealOverlayContentPromise; - return complete; + const actions: Promise[] = [ + super.getUpdateComplete(), + this.stealOverlayContentPromise, + ]; + if (this.childrenReady) { + actions.push(this.childrenReady); + } + const [complete] = await Promise.all(actions); + return complete as boolean; } disconnectedCallback(): void { diff --git a/packages/overlay/src/active-overlay.css b/packages/overlay/src/active-overlay.css index 91056c1c27..f8aad26841 100644 --- a/packages/overlay/src/active-overlay.css +++ b/packages/overlay/src/active-overlay.css @@ -47,6 +47,10 @@ governing permissions and limitations under the License. outline: none; } +:host([placement='none']) { + max-height: var(--swc-visual-viewport-height); +} + sp-theme, #contents { height: 100%; @@ -55,7 +59,10 @@ sp-theme, #contents { display: inline-block; pointer-events: none; - animation-duration: var(--spectrum-global-animation-duration-200, 160ms); + animation-duration: var( + --swc-test-duration, + var(--spectrum-global-animation-duration-200, 160ms) + ); animation-timing-function: var( --spectrum-global-animation-ease-out, ease-out diff --git a/packages/overlay/src/overlay-stack.ts b/packages/overlay/src/overlay-stack.ts index 731249e9a8..9631b101a3 100644 --- a/packages/overlay/src/overlay-stack.ts +++ b/packages/overlay/src/overlay-stack.ts @@ -25,10 +25,18 @@ function hasModifier(event: MouseEvent): boolean { 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; } export class OverlayStack { @@ -132,6 +140,14 @@ export class OverlayStack { '--swc-body-margins-block', `calc(${marginTop} + ${marginBottom})` ); + this.overlayHolder.style.setProperty( + '--swc-body-margins-inline', + `calc(${marginLeft} + ${marginRight})` + ); + this.overlayHolder.style.setProperty( + '--swc-body-margins-block', + `calc(${marginTop} + ${marginBottom})` + ); this._bodyMarginsApplied = !allZero; } @@ -292,9 +308,7 @@ export class OverlayStack { const { trigger } = activeOverlay; contentWithLifecycle.overlayOpenCallback({ trigger }); } - if (details.receivesFocus === 'auto') { - activeOverlay.focus(); - } + activeOverlay.openCallback(); return false; } ); @@ -461,9 +475,17 @@ export class OverlayStack { if (!overlay) { return; } - await overlay.hide(animated); 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; } diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts index 002dcc79a2..8bec880329 100644 --- a/packages/overlay/stories/overlay.stories.ts +++ b/packages/overlay/stories/overlay.stories.ts @@ -590,7 +590,10 @@ class ComplexModalReady extends HTMLElement { }; handlePickerOpen = async (): Promise => { - await nextFrame(); + const picker = document.querySelector('#test-picker') as Picker; + const actions = [nextFrame, picker.updateComplete]; + + await Promise.all(actions); this.ready(true); }; diff --git a/packages/overlay/test/overlay.test.ts b/packages/overlay/test/overlay.test.ts index 1b3b3b3071..34edf8a4f9 100644 --- a/packages/overlay/test/overlay.test.ts +++ b/packages/overlay/test/overlay.test.ts @@ -672,33 +672,64 @@ describe('Overlay - timing', () => { '[slot="trigger"]' ) as HTMLButtonElement; - trigger1.dispatchEvent( - new MouseEvent('mouseenter', { - bubbles: true, - composed: true, - }) - ); + const boundingRectTrigger1 = trigger1.getBoundingClientRect(); + const boundingRectTrigger2 = trigger2.getBoundingClientRect(); + const trigger1Position: [number, number] = [ + 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 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, + ]; + + await sendMouse({ + steps: [ + { + type: 'move', + position: trigger1Position, + }, + ], + }); + await nextFrame(); + await nextFrame(); + await sendMouse({ + steps: [ + { + type: 'move', + position: outsideTrigger1, + }, + ], + }); + await nextFrame(); + await nextFrame(); + await sendMouse({ + steps: [ + { + type: 'move', + position: trigger2Position, + }, + ], + }); await nextFrame(); - trigger1.dispatchEvent( - new MouseEvent('mouseleave', { - bubbles: true, - composed: true, - }) - ); - trigger2.dispatchEvent( - new MouseEvent('mouseenter', { - bubbles: true, - composed: true, - }) - ); await nextFrame(); const opened = oneEvent(trigger2, 'sp-opened'); - trigger2.dispatchEvent( - new MouseEvent('click', { - bubbles: true, - composed: true, - }) - ); + sendMouse({ + steps: [ + { + type: 'click', + position: trigger2Position, + }, + ], + }); await opened; expect(overlayTrigger1.hasAttribute('open')).to.be.false; @@ -706,18 +737,21 @@ describe('Overlay - timing', () => { expect(overlayTrigger2.getAttribute('open')).to.equal('click'); const closed = oneEvent(overlayTrigger2, 'sp-closed'); - document.body.dispatchEvent( - new MouseEvent('click', { - bubbles: true, - composed: true, - }) - ); + sendMouse({ + steps: [ + { + type: 'click', + position: outsideTrigger2, + }, + ], + }); 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(); expect(overlayTrigger1.hasAttribute('open')).to.be.false; - expect(overlayTrigger2.hasAttribute('open')).to.be.false; + expect(overlayTrigger2.hasAttribute('open'), overlayTrigger2.open).to.be + .false; }); }); diff --git a/packages/picker/package.json b/packages/picker/package.json index fcb162cc20..d39700dc7c 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -56,7 +56,9 @@ "@spectrum-web-components/menu": "^0.11.3", "@spectrum-web-components/overlay": "^0.13.4", "@spectrum-web-components/popover": "^0.11.4", + "@spectrum-web-components/reactive-controllers": "^0.1.0", "@spectrum-web-components/shared": "^0.13.3", + "@spectrum-web-components/tray": "^0.2.3", "tslib": "^2.0.0" }, "devDependencies": { diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index 27dc64770b..2b1c4d9e82 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -41,14 +41,19 @@ import type { MenuItemChildren, MenuItemRemovedEvent, } from '@spectrum-web-components/menu'; +import '@spectrum-web-components/tray/sp-tray.js'; import '@spectrum-web-components/popover/sp-popover.js'; -import { Popover } from '@spectrum-web-components/popover'; +import type { Popover } from '@spectrum-web-components/popover'; import { openOverlay, OverlayOptions, Placement, TriggerInteractions, } from '@spectrum-web-components/overlay'; +import { + IS_MOBILE, + MatchMediaController, +} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js'; const chevronClass = { s: 'spectrum-UIIcon-ChevronDown75', @@ -79,6 +84,8 @@ export class PickerBase extends SizedMixin(Focusable) { return await openOverlay(target, interaction, content, options); }; + protected isMobile = new MatchMediaController(this, IS_MOBILE); + @query('#button') public button!: HTMLButtonElement; @@ -131,7 +138,7 @@ export class PickerBase extends SizedMixin(Focusable) { @property({ attribute: false }) public selectedItem?: MenuItem; - private closeOverlay?: () => void; + private closeOverlay?: Promise<() => void>; private popover!: Popover; @@ -269,10 +276,10 @@ export class PickerBase extends SizedMixin(Focusable) { private popoverFragment!: DocumentFragment; - private generatePopover(deprecatedMenu: Menu | null): void { - if (this.popoverFragment) return; - - this.popoverFragment = document.createDocumentFragment(); + private async generatePopover(deprecatedMenu: Menu | null): Promise { + if (!this.popoverFragment) { + this.popoverFragment = document.createDocumentFragment(); + } render(this.renderPopover, this.popoverFragment, { host: this }); this.popover = this.popoverFragment.children[0] as Popover; this.optionsMenu = this.popover.children[1] as Menu; @@ -289,7 +296,7 @@ export class PickerBase extends SizedMixin(Focusable) { let reparentableChildren: Element[] = []; const deprecatedMenu = this.querySelector('sp-menu'); - this.generatePopover(deprecatedMenu); + await this.generatePopover(deprecatedMenu); if (deprecatedMenu) { reparentableChildren = Array.from(deprecatedMenu.children); } else { @@ -328,27 +335,27 @@ export class PickerBase extends SizedMixin(Focusable) { }, { once: true } ); - this.closeOverlay = await Picker.openOverlay( - this, - 'modal', - this.popover, - { - placement: this.placement, - receivesFocus: 'auto', - } - ); + this.closeOverlay = Picker.openOverlay(this, 'modal', this.popover, { + placement: this.isMobile.matches ? 'none' : this.placement, + receivesFocus: 'auto', + }); } protected sizePopover(popover: HTMLElement): void { + if (this.isMobile.matches) { + popover.style.setProperty('--swc-menu-width', `100%`); + return; + } if (this.quiet) return; // only use `this.offsetWidth` when Standard variant popover.style.setProperty('min-width', `${this.offsetWidth}px`); } - private closeMenu(): void { + private async closeMenu(): Promise { if (this.closeOverlay) { - this.closeOverlay(); + const closeOverlay = this.closeOverlay; delete this.closeOverlay; + (await closeOverlay)(); } } @@ -445,6 +452,29 @@ export class PickerBase extends SizedMixin(Focusable) { } protected get renderPopover(): TemplateResult { + const content = html` + ${this.dismissHelper} + + ${this.dismissHelper} + `; + if (this.isMobile.matches) { + return html` + + ${content} + + `; + } return html` - ${this.dismissHelper} - - ${this.dismissHelper} + ${content} `; } diff --git a/packages/picker/test/picker-responsive.test.ts b/packages/picker/test/picker-responsive.test.ts new file mode 100644 index 0000000000..5104eb017b --- /dev/null +++ b/packages/picker/test/picker-responsive.test.ts @@ -0,0 +1,102 @@ +/* +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 '../sync/sp-picker.js'; +import '@spectrum-web-components/field-label/sp-field-label.js'; +import { Picker } from '..'; +import { + elementUpdated, + expect, + fixture, + html, + nextFrame, + oneEvent, + waitUntil, +} from '@open-wc/testing'; +import { setViewport } from '@web/test-runner-commands'; + +describe('Picker, responsive', () => { + let el: Picker; + const pickerFixture = async (): Promise => { + const test = await fixture( + html` +
+ + Where do you live? + + + Deselect + + Select Inverse + + Feather... + Select and Mask... + + Save Selection + Make Work Path + +
+ ` + ); + + await waitUntil( + () => !!window.applyFocusVisiblePolyfill, + 'polyfill loaded' + ); + + return test.querySelector('sp-picker') as Picker; + }; + + describe('container', () => { + beforeEach(async () => { + el = await pickerFixture(); + await elementUpdated(el); + }); + + xit('is a Tray in mobile', async () => { + /** + * While we can set the view port, but not `(hover: none) and (pointer: coarse)` + * which prevents us from testing this at unit time. Hopefully there will be + * a future version of Playwright and/or @web/test-runner that does allow this. + * See: https://github.com/microsoft/playwright/issues/11781 + **/ + await setViewport({ width: 360, height: 640 }); + // Allow viewport update to propagate. + await nextFrame(); + + const opened = oneEvent(el, 'sp-opened'); + el.open = true; + await opened; + + const tray = document.querySelector('sp-tray'); + + expect(tray).to.not.be.null; + }); + + it('is a Popover in desktop', async () => { + await setViewport({ width: 701, height: 640 }); + // Allow viewport update to propagate. + await nextFrame(); + + const opened = oneEvent(el, 'sp-opened'); + el.open = true; + await opened; + + const popover = document.querySelector('sp-popover'); + + expect(popover).to.not.be.null; + }); + }); +}); diff --git a/packages/picker/test/picker-sync.test.ts b/packages/picker/test/picker-sync.test.ts index 85fc031526..6c76a3ced0 100644 --- a/packages/picker/test/picker-sync.test.ts +++ b/packages/picker/test/picker-sync.test.ts @@ -767,9 +767,8 @@ describe('Picker, sync', () => { // start at input1 input1.focus(); await nextFrame(); - expect(document.activeElement, 'focuses input 1').to.equal( - input1 - ); + expect(document.activeElement === input1, 'focuses input 1').to + .true; // tab to the picker let focused = oneEvent(el, 'focus'); await sendKeys({ press: 'Tab' }); @@ -777,14 +776,13 @@ describe('Picker, sync', () => { expect(el.focused, 'focused').to.be.true; expect(el.open, 'closed').to.be.false; - expect(document.activeElement, 'focuses el').to.equal(el); + expect(document.activeElement === el, 'focuses el').to.be.true; // tab through the picker to input2 focused = oneEvent(input2, 'focus'); await sendKeys({ press: 'Tab' }); await focused; - expect(document.activeElement, 'focuses input 2').to.equal( - input2 - ); + expect(document.activeElement === input2, 'focuses input 2').to + .true; }); it('shift+tabs backwards through the element', async () => { // start at input1 @@ -929,7 +927,9 @@ describe('Picker, sync', () => { expect(el.open).to.be.false; }); it('scrolls selected into view on open', async () => { - (el as unknown as { generatePopover(): void }).generatePopover(); + await ( + el as unknown as { generatePopover(): void } + ).generatePopover(); (el as unknown as { popover: Popover }).popover.style.height = '40px'; @@ -1146,10 +1146,6 @@ describe('Picker, sync', () => { await waitUntil(() => el1.open && !el2.open, '1 open, 2 closed: again'); }); it('displays selected item text by default', async () => { - const focusSelectedSpy = spy(); - const focusFirstSpy = spy(); - const handleFirstFocus = (): void => focusFirstSpy(); - const handleSelectedFocus = (): void => focusSelectedSpy(); const el = await fixture( html` { 'sp-menu-item:nth-of-type(2)' ) as MenuItem; - firstItem.addEventListener('focus', handleFirstFocus); - secondItem.addEventListener('focus', handleSelectedFocus); - expect(el.value).to.equal('inverse'); expect(el.selectedItem?.itemText).to.equal('Select Inverse'); @@ -1191,10 +1184,14 @@ describe('Picker, sync', () => { sendKeys({ press: 'Enter' }); await opened; - await waitUntil(() => isMenuActiveElement(), 'menu focused'); + const menu = document.querySelector('sp-menu') as Menu; + await elementUpdated(menu); - expect(focusFirstSpy.called, 'do not focus first element').to.be.false; + expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false; expect(secondItem.focused, 'secondItem "focused"').to.be.true; + expect(menu.getAttribute('aria-activedescendant')).to.equal( + secondItem.id + ); }); it('resets value when item not available', async () => { const el = await fixture( diff --git a/packages/picker/test/picker.test.ts b/packages/picker/test/picker.test.ts index ed7162fb2f..63ec15b41c 100644 --- a/packages/picker/test/picker.test.ts +++ b/packages/picker/test/picker.test.ts @@ -51,7 +51,7 @@ const isMenuActiveElement = function (): boolean { return document.activeElement instanceof Menu; }; -describe('Picker, sync', () => { +describe('Picker, standard', () => { let el: Picker; const pickerFixture = async (): Promise => { const test = await fixture( @@ -767,9 +767,8 @@ describe('Picker, sync', () => { // start at input1 input1.focus(); await nextFrame(); - expect(document.activeElement, 'focuses input 1').to.equal( - input1 - ); + expect(document.activeElement === input1, 'focuses input 1').to + .true; // tab to the picker let focused = oneEvent(el, 'focus'); await sendKeys({ press: 'Tab' }); @@ -777,14 +776,13 @@ describe('Picker, sync', () => { expect(el.focused, 'focused').to.be.true; expect(el.open, 'closed').to.be.false; - expect(document.activeElement, 'focuses el').to.equal(el); + expect(document.activeElement === el, 'focuses el').to.be.true; // tab through the picker to input2 focused = oneEvent(input2, 'focus'); await sendKeys({ press: 'Tab' }); await focused; - expect(document.activeElement, 'focuses input 2').to.equal( - input2 - ); + expect(document.activeElement === input2, 'focuses input 2').to + .true; }); it('shift+tabs backwards through the element', async () => { // start at input1 @@ -929,7 +927,9 @@ describe('Picker, sync', () => { expect(el.open).to.be.false; }); it('scrolls selected into view on open', async () => { - (el as unknown as { generatePopover(): void }).generatePopover(); + await ( + el as unknown as { generatePopover(): void } + ).generatePopover(); (el as unknown as { popover: Popover }).popover.style.height = '40px'; @@ -1146,10 +1146,6 @@ describe('Picker, sync', () => { await waitUntil(() => el1.open && !el2.open, '1 open, 2 closed: again'); }); it('displays selected item text by default', async () => { - const focusSelectedSpy = spy(); - const focusFirstSpy = spy(); - const handleFirstFocus = (): void => focusFirstSpy(); - const handleSelectedFocus = (): void => focusSelectedSpy(); const el = await fixture( html` { 'sp-menu-item:nth-of-type(2)' ) as MenuItem; - firstItem.addEventListener('focus', handleFirstFocus); - secondItem.addEventListener('focus', handleSelectedFocus); - expect(el.value).to.equal('inverse'); expect(el.selectedItem?.itemText).to.equal('Select Inverse'); @@ -1191,10 +1184,14 @@ describe('Picker, sync', () => { sendKeys({ press: 'Enter' }); await opened; - await waitUntil(() => isMenuActiveElement(), 'menu focused'); + const menu = document.querySelector('sp-menu') as Menu; + await elementUpdated(menu); - expect(focusFirstSpy.called, 'do not focus first element').to.be.false; + expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false; expect(secondItem.focused, 'secondItem "focused"').to.be.true; + expect(menu.getAttribute('aria-activedescendant')).to.equal( + secondItem.id + ); }); it('resets value when item not available', async () => { const el = await fixture( diff --git a/packages/tray/src/Tray.ts b/packages/tray/src/Tray.ts index 6f0a1f3ea3..79051ad2ed 100644 --- a/packages/tray/src/Tray.ts +++ b/packages/tray/src/Tray.ts @@ -13,6 +13,7 @@ governing permissions and limitations under the License. import { CSSResultArray, html, + PropertyValues, SpectrumElement, TemplateResult, } from '@spectrum-web-components/base'; @@ -22,6 +23,7 @@ import { } from '@spectrum-web-components/base/src/decorators.js'; import '@spectrum-web-components/underlay/sp-underlay.js'; import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js'; +import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js'; import modalStyles from '@spectrum-web-components/modal/src/modal.css.js'; import styles from './tray.css.js'; @@ -41,6 +43,15 @@ export class Tray extends SpectrumElement { @property({ type: Boolean, reflect: true }) public open = false; + protected prefersMotion = new MatchMediaController( + this, + '(prefers-reduced-motion: no-preference)' + ); + + private transitionPromise = Promise.resolve(); + + private resolveTransitionPromise!: () => void; + @query('.tray') private tray!: HTMLDivElement; @@ -55,8 +66,20 @@ export class Tray extends SpectrumElement { } } + public overlayWillCloseCallback(): boolean { + if (!this.open) return false; + this.close(); + return true; + } + public close(): void { this.open = false; + if (!this.prefersMotion.matches) { + this.dispatchClosed(); + } + } + + private dispatchClosed(): void { this.dispatchEvent( new Event('close', { bubbles: true, @@ -64,12 +87,60 @@ export class Tray extends SpectrumElement { ); } + protected handleUnderlayTransitionend(): void { + if (!this.open) { + this.dispatchClosed(); + this.resolveTransitionPromise(); + } + } + + protected handleTrayTransitionend(): void { + if (this.open) { + this.resolveTransitionPromise(); + } + } + + protected update(changes: PropertyValues): void { + if ( + changes.has('open') && + changes.get('open') !== undefined && + this.prefersMotion.matches + ) { + this.transitionPromise = new Promise( + (res) => (this.resolveTransitionPromise = res) + ); + } + super.update(changes); + } + protected render(): TemplateResult { return html` - -
+ +
`; } + + /** + * Bind the open/close transition into the update complete lifecycle so + * that the overlay system can wait for it to be "visibly ready" before + * attempting to throw focus into the content contained herein. Not + * waiting for this can cause small amounts of page scroll to happen + * while opening the Tray when focusable content is included: e.g. Menu + * elements whose selected Menu Item is not the first Menu Item. + */ + protected async getUpdateComplete(): Promise { + const complete = (await super.getUpdateComplete()) as boolean; + await this.transitionPromise; + return complete; + } } diff --git a/packages/tray/src/spectrum-config.js b/packages/tray/src/spectrum-config.js index e50ba93786..c37f2a7760 100644 --- a/packages/tray/src/spectrum-config.js +++ b/packages/tray/src/spectrum-config.js @@ -13,6 +13,19 @@ governing permissions and limitations under the License. const config = { spectrum: 'tray', components: [ + { + name: 'tray-wrapper', + host: { + selector: '.spectrum-Tray-wrapper', + }, + attributes: [ + { + type: 'boolean', + selector: '.is-open', + name: 'open', + }, + ], + }, { name: 'tray', host: { diff --git a/packages/tray/src/spectrum-tray-wrapper.css b/packages/tray/src/spectrum-tray-wrapper.css new file mode 100644 index 0000000000..594f477ad3 --- /dev/null +++ b/packages/tray/src/spectrum-tray-wrapper.css @@ -0,0 +1,31 @@ +/* stylelint-disable */ /* +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. + +THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host([dir='ltr']) { + left: 0; /* [dir=ltr] .spectrum-Tray-wrapper */ +} +:host([dir='rtl']) { + right: 0; /* [dir=rtl] .spectrum-Tray-wrapper */ +} +:host { + bottom: 0; + display: flex; + justify-content: center; + position: fixed; /* .spectrum-Tray-wrapper */ + width: 100%; + z-index: 2; +} +@media (max-width: 375px) { + .spectrum-Tray { + border-radius: var(--spectrum-tray-border-radius, 0); + } +} diff --git a/packages/tray/src/tray.css b/packages/tray/src/tray.css index 0b984fc0f3..63a355505b 100644 --- a/packages/tray/src/tray.css +++ b/packages/tray/src/tray.css @@ -10,10 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +@import './spectrum-tray-wrapper.css'; @import './spectrum-tray.css'; :host { align-items: flex-end; + position: fixed !important; + max-height: var(--swc-visual-viewport-height); +} + +sp-underlay { + touch-action: none; } /** @@ -24,4 +31,19 @@ governing permissions and limitations under the License. **/ .tray { padding: var(--spectrum-tray-padding-y, 0) var(--spectrum-tray-padding-x, 0); + display: inline-flex; + overscroll-behavior: contain; +} + +::slotted(.visually-hidden) { + border: 0; + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + height: 1px; + margin: 0 -1px -1px 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; } diff --git a/packages/tray/test/tray.test.ts b/packages/tray/test/tray.test.ts index 72f0897ad1..44b6f0b3a7 100644 --- a/packages/tray/test/tray.test.ts +++ b/packages/tray/test/tray.test.ts @@ -15,11 +15,14 @@ import { expect, fixture, html, + nextFrame, oneEvent, } from '@open-wc/testing'; import '../sp-tray.js'; import { Tray } from '..'; +import '@spectrum-web-components/theme/sp-theme.js'; +import '@spectrum-web-components/theme/src/themes.js'; describe('Tray', () => { it('loads default tray accessibly', async () => { @@ -52,13 +55,24 @@ describe('Tray', () => { expect(document.activeElement).to.equal(anchor); }); it('closes', async () => { - const el = await fixture( + const test = await fixture( html` - + + + ` ); + const el = test.querySelector('sp-tray') as Tray; + // Ensure closed styles are set before opening so that + // the `transitionend` event will be met below. + await nextFrame(); + await nextFrame(); + expect(el.open).to.be.false; + + el.open = true; await elementUpdated(el); + expect(el.open).to.be.true; const closed = oneEvent(el, 'close'); const overlay = el.shadowRoot.querySelector( diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts index 171132714d..ab33371458 100644 --- a/projects/story-decorator/src/StoryDecorator.ts +++ b/projects/story-decorator/src/StoryDecorator.ts @@ -65,6 +65,7 @@ const reduceMotionProperties = css` --spectrum-global-animation-duration-2000: 0ms; --spectrum-global-animation-duration-4000: 0ms; --spectrum-coachmark-animation-indicator-ring-duration: 0ms; + --swc-test-duration: 1ms; `; ActiveOverlay.prototype.renderTheme = function ( diff --git a/tools/reactive-controllers/README.md b/tools/reactive-controllers/README.md index c104a94694..1029ac7707 100644 --- a/tools/reactive-controllers/README.md +++ b/tools/reactive-controllers/README.md @@ -4,4 +4,5 @@ ### Reactive controllers +- [MatchMediaController](../match-media) - [RovingTabindexController](../roving-tab-index) diff --git a/tools/reactive-controllers/match-media.md b/tools/reactive-controllers/match-media.md new file mode 100644 index 0000000000..83abdcb44f --- /dev/null +++ b/tools/reactive-controllers/match-media.md @@ -0,0 +1,47 @@ +## Description + +The [match media](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API allows for a developer to query the state of a supplied CSS media query from the JS scope while surfacing an event based API to listen for changes to whether that query is currently matched or not. `MatchMediaController` binds the supplied CSS media query to the supplied Reactive Element and calls for an update in the host element when the query goes between matching and not. This allow for the `matches` property on the reactive controller to be leveraged in your render lifecycle. + +A `MatchMediaController` can be bound to any of the growing number of [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) and any number of `MatchMediaControllers` can be bound to a host element. With this in mind the `MatchMediaController` can support a wide array of complex layouts. + +### Usage + +[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/reactive-controllers?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/reactive-controllers) +[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/reactive-controllers?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/reactive-controllers) + +``` +yarn add @spectrum-web-components/reactive-controllers +``` + +Import the `MatchMediaController` via: + +``` +import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/MatchMediaController.js'; +``` + +## Example + +A `Host` element that renders a different message depending on the "orientation" of the window in which is it delivered: + +```js +import { html, LitElement } from 'lit'; +import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/MatchMediaController.js'; + +class Host extends LitElement { + orientationLandscape = new MatchMediaController( + this, + '(orientation: landscape)' + ); + + render() { + if (this.orientationLandscape.matches) { + return html` + The orientation is landscape. + `; + } + return html` + The orientation is portrait. + `; + } +} +``` diff --git a/tools/reactive-controllers/src/MatchMedia.ts b/tools/reactive-controllers/src/MatchMedia.ts new file mode 100644 index 0000000000..8f0dcdbd5b --- /dev/null +++ b/tools/reactive-controllers/src/MatchMedia.ts @@ -0,0 +1,48 @@ +/* +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 { ReactiveController, ReactiveElement } from 'lit'; + +export const DARK_MODE = '(prefers-color-scheme: dark)'; +export const IS_MOBILE = + '(max-width: 700px) and (hover: none) and (pointer: coarse), (max-height: 700px) and (hover: none) and (pointer: coarse)'; + +export class MatchMediaController implements ReactiveController { + key = Symbol('match-media-key'); + + matches = false; + + protected host: ReactiveElement; + + protected media: MediaQueryList; + + constructor(host: ReactiveElement, query: string) { + this.host = host; + this.media = window.matchMedia(query); + this.matches = this.media.matches; + this.onChange = this.onChange.bind(this); + host.addController(this); + } + + public hostConnected(): void { + this.media.addEventListener('change', this.onChange); + } + + public hostDisconnected(): void { + this.media.removeEventListener('change', this.onChange); + } + + protected onChange(event: MediaQueryListEvent): void { + if (this.matches === event.matches) return; + this.matches = event.matches; + this.host.requestUpdate(this.key, !this.matches); + } +} diff --git a/tools/reactive-controllers/src/index.ts b/tools/reactive-controllers/src/index.ts index bb7e3b774b..b5f2cbf571 100644 --- a/tools/reactive-controllers/src/index.ts +++ b/tools/reactive-controllers/src/index.ts @@ -10,4 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +export * from './MatchMedia.js'; export * from './RovingTabindex.js'; diff --git a/tools/reactive-controllers/test/match-media.test.ts b/tools/reactive-controllers/test/match-media.test.ts new file mode 100644 index 0000000000..3fc9ecb0b4 --- /dev/null +++ b/tools/reactive-controllers/test/match-media.test.ts @@ -0,0 +1,37 @@ +/* +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 { html, LitElement } from 'lit'; +import { expect, fixture, nextFrame } from '@open-wc/testing'; +import { setViewport } from '@web/test-runner-commands'; +import { MatchMediaController } from '../'; + +describe('Match Media', () => { + it('responds to media changes', async () => { + class TestEl extends LitElement {} + customElements.define('test-match-media-el', TestEl); + const el = await fixture( + html` + + ` + ); + const controller = new MatchMediaController( + el as LitElement & { shadowRoot: ShadowRoot }, + '(min-width: 500px)' + ); + expect(controller.matches).to.be.true; + await setViewport({ width: 360, height: 640 }); + // Allow viewport update to propagate. + await nextFrame(); + expect(controller.matches).to.be.false; + }); +}); diff --git a/tools/reactive-controllers/test/reactive-controllers-integration.test.ts b/tools/reactive-controllers/test/roving-tabindex-integration.test.ts similarity index 100% rename from tools/reactive-controllers/test/reactive-controllers-integration.test.ts rename to tools/reactive-controllers/test/roving-tabindex-integration.test.ts diff --git a/tools/reactive-controllers/test/reactive-controllers.test.ts b/tools/reactive-controllers/test/roving-tabindex.test.ts similarity index 95% rename from tools/reactive-controllers/test/reactive-controllers.test.ts rename to tools/reactive-controllers/test/roving-tabindex.test.ts index cb8d291ec9..05a32d2e8e 100644 --- a/tools/reactive-controllers/test/reactive-controllers.test.ts +++ b/tools/reactive-controllers/test/roving-tabindex.test.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import { LitElement } from 'lit'; import { expect } from '@open-wc/testing'; -import { RovingTabindexController } from '../'; +import { RovingTabindexController } from '../src'; describe('RovingTabindex', () => { it('constructs with defaults', async () => { diff --git a/yarn.lock b/yarn.lock index cbe62d533a..467a4c2673 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17773,13 +17773,42 @@ playwright-core@=1.16.3: yauzl "^2.10.0" yazl "^2.5.1" -playwright@^1.14.0, playwright@^1.16.3: +playwright-core@=1.18.1: + version "1.18.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.18.1.tgz#a5cf3f212d10692382e2acd1f7bc8c9ff9bbb849" + integrity sha512-NALGl8R1GHzGLlhUApmpmfh6M1rrrPcDTygWvhTbprxwGB9qd/j9DRwyn4HTQcUB6o0/VOpo46fH9ez3+D/Rog== + dependencies: + commander "^8.2.0" + debug "^4.1.1" + extract-zip "^2.0.1" + https-proxy-agent "^5.0.0" + jpeg-js "^0.4.2" + mime "^2.4.6" + pngjs "^5.0.0" + progress "^2.0.3" + proper-lockfile "^4.1.1" + proxy-from-env "^1.1.0" + rimraf "^3.0.2" + socks-proxy-agent "^6.1.0" + stack-utils "^2.0.3" + ws "^7.4.6" + yauzl "^2.10.0" + yazl "^2.5.1" + +playwright@^1.14.0: version "1.16.3" resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.16.3.tgz#27a292d9fa54fbac923998d3af58cd2b691f5ebe" integrity sha512-nfJx/OpIb/8OexL3rYGxNN687hGyaM3XNpfuMzoPlrekURItyuiHHsNhC9oQCx3JDmCn5O3EyyyFCnrZjH6MpA== dependencies: playwright-core "=1.16.3" +playwright@^1.18.1: + version "1.18.1" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.18.1.tgz#45c2ca6ee25c44e336985de9b51955727b5f17cf" + integrity sha512-8EaX9EtbtAoMq5tnzIsoA3b/V86V/6Mq2skuOU4qEw+5OVxs1lwesDwmjy/RVU1Qfx5UuwSQzhp45wyH22oa+A== + dependencies: + playwright-core "=1.18.1" + please-upgrade-node@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"