@spectrum-web-components/tray
Advanced tools
Comparing version 0.3.11 to 0.3.12-devmode.0
{ | ||
"name": "@spectrum-web-components/tray", | ||
"version": "0.3.11", | ||
"version": "0.3.12-devmode.0+07474d44f", | ||
"publishConfig": { | ||
@@ -23,7 +23,20 @@ "access": "public" | ||
"exports": { | ||
".": "./src/index.js", | ||
"./src/*": "./src/*.js", | ||
".": { | ||
"development": "./src/index.dev.js", | ||
"default": "./src/index.js" | ||
}, | ||
"./package.json": "./package.json", | ||
"./sp-tray": "./sp-tray.js", | ||
"./sp-tray.js": "./sp-tray.js" | ||
"./src/Tray.js": { | ||
"development": "./src/Tray.dev.js", | ||
"default": "./src/Tray.js" | ||
}, | ||
"./src/index.js": { | ||
"development": "./src/index.dev.js", | ||
"default": "./src/index.js" | ||
}, | ||
"./src/tray.css.js": "./src/tray.css.js", | ||
"./sp-tray.js": { | ||
"development": "./sp-tray.dev.js", | ||
"default": "./sp-tray.js" | ||
} | ||
}, | ||
@@ -48,7 +61,7 @@ "scripts": { | ||
"dependencies": { | ||
"@spectrum-web-components/base": "^0.5.8", | ||
"@spectrum-web-components/modal": "^0.6.9", | ||
"@spectrum-web-components/reactive-controllers": "^0.2.4", | ||
"@spectrum-web-components/shared": "^0.14.4", | ||
"@spectrum-web-components/underlay": "^0.8.10", | ||
"@spectrum-web-components/base": "^0.5.9-devmode.24+07474d44f", | ||
"@spectrum-web-components/modal": "^0.6.10-devmode.0+07474d44f", | ||
"@spectrum-web-components/reactive-controllers": "^0.2.5-devmode.79+07474d44f", | ||
"@spectrum-web-components/shared": "^0.14.5-devmode.0+07474d44f", | ||
"@spectrum-web-components/underlay": "^0.8.11-devmode.0+07474d44f", | ||
"tslib": "^2.0.0" | ||
@@ -64,3 +77,3 @@ }, | ||
], | ||
"gitHead": "3be62133721efba844cd7032566a2c49ed6d9875" | ||
"gitHead": "07474d44f6cee1db241b9ccf3dc812514ffbe7fa" | ||
} |
@@ -1,14 +0,3 @@ | ||
/* | ||
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 { Tray } from './src/Tray.js'; | ||
customElements.define('sp-tray', Tray); | ||
//# sourceMappingURL=sp-tray.js.map | ||
import { Tray } from "./src/Tray.js"; | ||
customElements.define("sp-tray", Tray); | ||
//# sourceMappingURL=sp-tray.js.map |
@@ -1,13 +0,2 @@ | ||
/* | ||
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. | ||
*/ | ||
export * from './Tray.js'; | ||
//# sourceMappingURL=index.js.map | ||
export * from "./Tray.js"; | ||
//# sourceMappingURL=index.js.map |
@@ -1,17 +0,6 @@ | ||
/* | ||
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 { css } from '@spectrum-web-components/base'; | ||
const styles = css ` | ||
import { css } from "@spectrum-web-components/base"; | ||
const styles = css` | ||
:host([dir=ltr]){left:0}:host([dir=rtl]){right:0}:host{bottom:0;display:flex;justify-content:center;position:fixed;width:100%;z-index:2}@media (max-width:375px){.spectrum-Tray{border-radius:var(--spectrum-tray-border-radius,0)}} | ||
`; | ||
export default styles; | ||
//# sourceMappingURL=spectrum-tray-wrapper.css.js.map | ||
//# sourceMappingURL=spectrum-tray-wrapper.css.js.map |
@@ -1,14 +0,3 @@ | ||
/* | ||
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 { css } from '@spectrum-web-components/base'; | ||
const styles = css ` | ||
import { css } from "@spectrum-web-components/base"; | ||
const styles = css` | ||
.tray{opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]) .tray{opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host{--spectrum-dialog-confirm-exit-animation-delay:0ms;--spectrum-tray-margin-top:64px}:host([dir=ltr]) .spectrum-Tray-wrapper{left:0}:host([dir=rtl]) .spectrum-Tray-wrapper{right:0}.spectrum-Tray-wrapper{bottom:0;display:flex;justify-content:center;position:fixed;width:100%;z-index:2}.tray{border-radius:var( | ||
@@ -40,2 +29,2 @@ --spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular) | ||
export default styles; | ||
//# sourceMappingURL=spectrum-tray.css.js.map | ||
//# sourceMappingURL=spectrum-tray.css.js.map |
@@ -1,14 +0,3 @@ | ||
/* | ||
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 { css } from '@spectrum-web-components/base'; | ||
const styles = css ` | ||
import { css } from "@spectrum-web-components/base"; | ||
const styles = css` | ||
:host([dir=ltr]){left:0}:host([dir=rtl]){right:0}:host{bottom:0;display:flex;justify-content:center;position:fixed;width:100%;z-index:2}@media (max-width:375px){.spectrum-Tray{border-radius:var(--spectrum-tray-border-radius,0)}}.tray{opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]) .tray{opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host{--spectrum-dialog-confirm-exit-animation-delay:0ms;--spectrum-tray-margin-top:64px}:host([dir=ltr]) .spectrum-Tray-wrapper{left:0}:host([dir=rtl]) .spectrum-Tray-wrapper{right:0}.spectrum-Tray-wrapper{bottom:0;display:flex;justify-content:center;position:fixed;width:100%;z-index:2}.tray{border-radius:var( | ||
@@ -40,2 +29,2 @@ --spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular) | ||
export default styles; | ||
//# sourceMappingURL=tray.css.js.map | ||
//# sourceMappingURL=tray.css.js.map |
188
src/Tray.js
@@ -1,87 +0,81 @@ | ||
/* | ||
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 { __decorate } from "tslib"; | ||
import { html, SpectrumElement, } from '@spectrum-web-components/base'; | ||
import { property, query, } 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'; | ||
/** | ||
* @element sp-tray | ||
* | ||
* @slot - content to display within the Tray | ||
* | ||
* @fires close - Announces that the Tray has been closed. | ||
*/ | ||
var __defProp = Object.defineProperty; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __decorateClass = (decorators, target, key, kind) => { | ||
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target; | ||
for (var i = decorators.length - 1, decorator; i >= 0; i--) | ||
if (decorator = decorators[i]) | ||
result = (kind ? decorator(target, key, result) : decorator(result)) || result; | ||
if (kind && result) | ||
__defProp(target, key, result); | ||
return result; | ||
}; | ||
import { | ||
html, | ||
SpectrumElement | ||
} from "@spectrum-web-components/base"; | ||
import { | ||
property, | ||
query | ||
} 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"; | ||
export class Tray extends SpectrumElement { | ||
constructor() { | ||
super(...arguments); | ||
this.open = false; | ||
this.prefersMotion = new MatchMediaController(this, '(prefers-reduced-motion: no-preference)'); | ||
this.transitionPromise = Promise.resolve(); | ||
constructor() { | ||
super(...arguments); | ||
this.open = false; | ||
this.prefersMotion = new MatchMediaController(this, "(prefers-reduced-motion: no-preference)"); | ||
this.transitionPromise = Promise.resolve(); | ||
} | ||
static get styles() { | ||
return [modalStyles, styles]; | ||
} | ||
focus() { | ||
const firstFocusable = firstFocusableIn(this); | ||
if (firstFocusable) { | ||
firstFocusable.focus(); | ||
} else if (this.children.length === 1) { | ||
this.tray.focus(); | ||
} else { | ||
super.focus(); | ||
} | ||
static get styles() { | ||
return [modalStyles, styles]; | ||
} | ||
overlayWillCloseCallback() { | ||
if (!this.open) | ||
return false; | ||
this.close(); | ||
return true; | ||
} | ||
close() { | ||
this.open = false; | ||
if (!this.prefersMotion.matches) { | ||
this.dispatchClosed(); | ||
} | ||
focus() { | ||
const firstFocusable = firstFocusableIn(this); | ||
if (firstFocusable) { | ||
firstFocusable.focus(); | ||
} | ||
else if (this.children.length === 1) { | ||
this.tray.focus(); | ||
} | ||
else { | ||
super.focus(); | ||
} | ||
} | ||
dispatchClosed() { | ||
this.dispatchEvent(new Event("close", { | ||
bubbles: true | ||
})); | ||
} | ||
handleUnderlayTransitionend() { | ||
if (!this.open) { | ||
this.dispatchClosed(); | ||
this.resolveTransitionPromise(); | ||
} | ||
overlayWillCloseCallback() { | ||
if (!this.open) | ||
return false; | ||
this.close(); | ||
return true; | ||
} | ||
handleTrayTransitionend() { | ||
if (this.open) { | ||
this.resolveTransitionPromise(); | ||
} | ||
close() { | ||
this.open = false; | ||
if (!this.prefersMotion.matches) { | ||
this.dispatchClosed(); | ||
} | ||
} | ||
update(changes) { | ||
if (changes.has("open") && changes.get("open") !== void 0 && this.prefersMotion.matches) { | ||
this.transitionPromise = new Promise((res) => this.resolveTransitionPromise = res); | ||
} | ||
dispatchClosed() { | ||
this.dispatchEvent(new Event('close', { | ||
bubbles: true, | ||
})); | ||
} | ||
handleUnderlayTransitionend() { | ||
if (!this.open) { | ||
this.dispatchClosed(); | ||
this.resolveTransitionPromise(); | ||
} | ||
} | ||
handleTrayTransitionend() { | ||
if (this.open) { | ||
this.resolveTransitionPromise(); | ||
} | ||
} | ||
update(changes) { | ||
if (changes.has('open') && | ||
changes.get('open') !== undefined && | ||
this.prefersMotion.matches) { | ||
this.transitionPromise = new Promise((res) => (this.resolveTransitionPromise = res)); | ||
} | ||
super.update(changes); | ||
} | ||
render() { | ||
return html ` | ||
super.update(changes); | ||
} | ||
render() { | ||
return html` | ||
<sp-underlay | ||
@@ -100,23 +94,15 @@ ?open=${this.open} | ||
`; | ||
} | ||
/** | ||
* 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. | ||
*/ | ||
async getUpdateComplete() { | ||
const complete = (await super.getUpdateComplete()); | ||
await this.transitionPromise; | ||
return complete; | ||
} | ||
} | ||
async getUpdateComplete() { | ||
const complete = await super.getUpdateComplete(); | ||
await this.transitionPromise; | ||
return complete; | ||
} | ||
} | ||
__decorate([ | ||
property({ type: Boolean, reflect: true }) | ||
], Tray.prototype, "open", void 0); | ||
__decorate([ | ||
query('.tray') | ||
], Tray.prototype, "tray", void 0); | ||
//# sourceMappingURL=Tray.js.map | ||
__decorateClass([ | ||
property({ type: Boolean, reflect: true }) | ||
], Tray.prototype, "open", 2); | ||
__decorateClass([ | ||
query(".tray") | ||
], Tray.prototype, "tray", 2); | ||
//# sourceMappingURL=Tray.js.map |
@@ -1,41 +0,30 @@ | ||
/* | ||
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 } from '@spectrum-web-components/base'; | ||
import '@spectrum-web-components/dialog/sp-dialog.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 '../sp-tray.js'; | ||
import { html } from "@spectrum-web-components/base"; | ||
import "@spectrum-web-components/dialog/sp-dialog.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/tray/sp-tray.js"; | ||
export default { | ||
title: 'Tray', | ||
component: 'sp-tray', | ||
args: { | ||
open: true, | ||
}, | ||
argTypes: { | ||
open: { | ||
name: 'open', | ||
type: { name: 'boolean', required: false }, | ||
description: 'Whether the tray is open.', | ||
table: { | ||
type: { summary: 'boolean' }, | ||
defaultValue: { summary: false }, | ||
}, | ||
control: { | ||
type: 'boolean', | ||
}, | ||
}, | ||
}, | ||
title: "Tray", | ||
component: "sp-tray", | ||
args: { | ||
open: true | ||
}, | ||
argTypes: { | ||
open: { | ||
name: "open", | ||
type: { name: "boolean", required: false }, | ||
description: "Whether the tray is open.", | ||
table: { | ||
type: { summary: "boolean" }, | ||
defaultValue: { summary: false } | ||
}, | ||
control: { | ||
type: "boolean" | ||
} | ||
} | ||
} | ||
}; | ||
export const Default = (args) => { | ||
return html ` | ||
return html` | ||
<sp-tray ?open=${args.open}> | ||
@@ -50,3 +39,3 @@ <sp-dialog size="s"> | ||
export const menu = (args) => { | ||
return html ` | ||
return html` | ||
<sp-tray ?open=${args.open}> | ||
@@ -65,2 +54,2 @@ <sp-menu style="width: 100%"> | ||
}; | ||
//# sourceMappingURL=tray.stories.js.map | ||
//# sourceMappingURL=tray.stories.js.map |
@@ -1,17 +0,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 | ||
governing permissions and limitations under the License. | ||
*/ | ||
import '@spectrum-web-components/dialog/sp-dialog.js'; | ||
import '@spectrum-web-components/tray/sp-tray.js'; | ||
import { html } from 'lit'; | ||
import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js'; | ||
measureFixtureCreation(html ` | ||
import "@spectrum-web-components/dialog/sp-dialog.js"; | ||
import "@spectrum-web-components/tray/sp-tray.js"; | ||
import { html } from "lit"; | ||
import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js"; | ||
measureFixtureCreation(html` | ||
<sp-tray open> | ||
@@ -24,2 +13,2 @@ <sp-dialog size="s"> | ||
`); | ||
//# sourceMappingURL=basic-test.js.map | ||
//# sourceMappingURL=basic-test.js.map |
@@ -1,15 +0,4 @@ | ||
/* | ||
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 * as stories from '../stories/tray.stories.js'; | ||
import { regressVisuals } from '../../../test/visual/test.js'; | ||
regressVisuals('TrayStories', stories); | ||
//# sourceMappingURL=tray.test-vrt.js.map | ||
import * as stories from "../stories/tray.stories.js"; | ||
import { regressVisuals } from "../../../test/visual/test.js"; | ||
regressVisuals("TrayStories", stories); | ||
//# sourceMappingURL=tray.test-vrt.js.map |
@@ -1,26 +0,22 @@ | ||
/* | ||
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 { elementUpdated, expect, fixture, html, nextFrame, oneEvent, } from '@open-wc/testing'; | ||
import '../sp-tray.js'; | ||
import '@spectrum-web-components/theme/sp-theme.js'; | ||
import '@spectrum-web-components/theme/src/themes.js'; | ||
describe('Tray', () => { | ||
it('loads default tray accessibly', async () => { | ||
const el = await fixture(html ` | ||
import { | ||
elementUpdated, | ||
expect, | ||
fixture, | ||
html, | ||
nextFrame, | ||
oneEvent | ||
} from "@open-wc/testing"; | ||
import "@spectrum-web-components/tray/sp-tray.js"; | ||
import "@spectrum-web-components/theme/sp-theme.js"; | ||
import "@spectrum-web-components/theme/src/themes.js"; | ||
describe("Tray", () => { | ||
it("loads default tray accessibly", async () => { | ||
const el = await fixture(html` | ||
<sp-tray></sp-tray> | ||
`); | ||
await elementUpdated(el); | ||
await expect(el).to.be.accessible(); | ||
}); | ||
it('focuses focusable light DOM element', async () => { | ||
const el = await fixture(html ` | ||
await elementUpdated(el); | ||
await expect(el).to.be.accessible(); | ||
}); | ||
it("focuses focusable light DOM element", async () => { | ||
const el = await fixture(html` | ||
<sp-tray open> | ||
@@ -32,10 +28,10 @@ <div> | ||
`); | ||
const anchor = el.querySelector('a'); | ||
await elementUpdated(el); | ||
el.focus(); | ||
await elementUpdated(el); | ||
expect(document.activeElement).to.equal(anchor); | ||
}); | ||
it('focuses "tray"', async () => { | ||
const el = await fixture(html ` | ||
const anchor = el.querySelector("a"); | ||
await elementUpdated(el); | ||
el.focus(); | ||
await elementUpdated(el); | ||
expect(document.activeElement).to.equal(anchor); | ||
}); | ||
it('focuses "tray"', async () => { | ||
const el = await fixture(html` | ||
<sp-tray open> | ||
@@ -45,10 +41,10 @@ <div></div> | ||
`); | ||
await elementUpdated(el); | ||
el.focus(); | ||
await elementUpdated(el); | ||
expect(document.activeElement).to.equal(el); | ||
expect(el.shadowRoot.activeElement).to.equal(el.tray); | ||
}); | ||
it('closes', async () => { | ||
const test = await fixture(html ` | ||
await elementUpdated(el); | ||
el.focus(); | ||
await elementUpdated(el); | ||
expect(document.activeElement).to.equal(el); | ||
expect(el.shadowRoot.activeElement).to.equal(el.tray); | ||
}); | ||
it("closes", async () => { | ||
const test = await fixture(html` | ||
<sp-theme theme="classic" scale="medium" color="dark"> | ||
@@ -58,18 +54,16 @@ <sp-tray></sp-tray> | ||
`); | ||
const el = test.querySelector('sp-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('sp-underlay'); | ||
overlay.click(); | ||
await closed; | ||
expect(el.open).to.be.false; | ||
}); | ||
const el = test.querySelector("sp-tray"); | ||
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("sp-underlay"); | ||
overlay.click(); | ||
await closed; | ||
expect(el.open).to.be.false; | ||
}); | ||
}); | ||
//# sourceMappingURL=tray.test.js.map | ||
//# sourceMappingURL=tray.test.js.map |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 7 instances in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 3 instances in 1 package
91176
43
778
12
1
+ Added@spectrum-web-components/base@0.5.9-devmode.31(transitive)
- Removed@spectrum-web-components/base@0.5.8(transitive)
Updated@spectrum-web-components/base@^0.5.9-devmode.24+07474d44f
Updated@spectrum-web-components/modal@^0.6.10-devmode.0+07474d44f
Updated@spectrum-web-components/reactive-controllers@^0.2.5-devmode.79+07474d44f
Updated@spectrum-web-components/shared@^0.14.5-devmode.0+07474d44f
Updated@spectrum-web-components/underlay@^0.8.11-devmode.0+07474d44f