Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@spectrum-web-components/tray

Package Overview
Dependencies
Maintainers
7
Versions
247
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/tray - npm Package Compare versions

Comparing version 0.3.11 to 0.3.12-devmode.0

sp-tray.dev.js

35

package.json
{
"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

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc