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

Comparing version 0.4.0 to 0.4.1

package.json

 {
     "name": "@spectrum-web-components/tray",
-    "version": "0.4.0",
+    "version": "0.4.1",
     "publishConfig": {
@@ -61,3 +61,3 @@ "access": "public"
         "@spectrum-web-components/base": "^0.7.0",
-        "@spectrum-web-components/modal": "^0.7.0",
+        "@spectrum-web-components/modal": "^0.7.1",
         "@spectrum-web-components/reactive-controllers": "^0.3.0",
@@ -77,3 +77,3 @@ "@spectrum-web-components/shared": "^0.15.0",
     ],
-    "gitHead": "05c81318844160db3f8156144106e643507fef97"
+    "gitHead": "60b2d3b7d9020d72f9ae930568670321a1918e6f"
 }

sp-tray.dev.js

@@ -0,3 +1,4 @@
+"use strict";
 import { Tray } from "./src/Tray.dev.js";
 customElements.define("sp-tray", Tray);
 //# sourceMappingURL=sp-tray.dev.js.map

sp-tray.js

@@ -1,2 +0,2 @@
-import{Tray as e}from"./src/Tray.js";customElements.define("sp-tray",e);
+"use strict";import{Tray as e}from"./src/Tray.js";customElements.define("sp-tray",e);
 //# sourceMappingURL=sp-tray.js.map

src/index.dev.js

@@ -0,2 +1,3 @@
+"use strict";
 export * from "./Tray.dev.js";
 //# sourceMappingURL=index.dev.js.map

src/index.js

@@ -1,2 +0,2 @@
-export*from"./Tray.js";
+"use strict";export*from"./Tray.js";
 //# sourceMappingURL=index.js.map

src/spectrum-tray-wrapper.css.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 import { css } from "@spectrum-web-components/base";
@@ -2,0 +3,0 @@ const styles = css`

src/spectrum-tray-wrapper.css.js

@@ -1,4 +0,4 @@
-import{css as t}from"@spectrum-web-components/base";const r=t`
+"use strict";import{css as t}from"@spectrum-web-components/base";const r=t`
 :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 r;
 //# sourceMappingURL=spectrum-tray-wrapper.css.js.map

src/spectrum-tray.css.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 import { css } from "@spectrum-web-components/base";
@@ -2,0 +3,0 @@ const styles = css`

src/spectrum-tray.css.js

@@ -1,2 +0,2 @@
-import{css as a}from"@spectrum-web-components/base";const r=a`
+"use strict";import{css as a}from"@spectrum-web-components/base";const r=a`
 .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(
@@ -3,0 +3,0 @@ --spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular)

src/tray.css.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 import { css } from "@spectrum-web-components/base";
@@ -2,0 +3,0 @@ const styles = css`

src/tray.css.js

@@ -1,2 +0,2 @@
-import{css as r}from"@spectrum-web-components/base";const a=r`
+"use strict";import{css as r}from"@spectrum-web-components/base";const a=r`
 :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(
@@ -3,0 +3,0 @@ --spectrum-tray-full-width-border-radius,var(--spectrum-alias-border-radius-regular)

src/Tray.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -29,3 +30,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
     this.open = false;
-    this.prefersMotion = new MatchMediaController(this, "(prefers-reduced-motion: no-preference)");
+    this.prefersMotion = new MatchMediaController(
+      this,
+      "(prefers-reduced-motion: no-preference)"
+    );
     this.transitionPromise = Promise.resolve();
@@ -59,5 +63,7 @@ }
   dispatchClosed() {
-    this.dispatchEvent(new Event("close", {
-      bubbles: true
-    }));
+    this.dispatchEvent(
+      new Event("close", {
+        bubbles: true
+      })
+    );
   }
@@ -77,3 +83,5 @@ handleUnderlayTransitionend() {
     if (changes.has("open") && changes.get("open") !== void 0 && this.prefersMotion.matches) {
-      this.transitionPromise = new Promise((res) => this.resolveTransitionPromise = res);
+      this.transitionPromise = new Promise(
+        (res) => this.resolveTransitionPromise = res
+      );
     }
@@ -80,0 +88,0 @@ super.update(changes);

src/Tray.js

@@ -1,2 +0,2 @@
-var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=(o,e,r,i)=>{for(var t=i>1?void 0:i?p(e,r):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(t=(i?n(e,r,t):n(t))||t);return i&&t&&a(e,r,t),t};import{html as d,SpectrumElement as c}from"@spectrum-web-components/base";import{property as h,query as m}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/underlay/sp-underlay.js";import{firstFocusableIn as u}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{MatchMediaController as f}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";import v from"@spectrum-web-components/modal/src/modal.css.js";import y from"./tray.css.js";export class Tray extends c{constructor(){super(...arguments);this.open=!1;this.prefersMotion=new f(this,"(prefers-reduced-motion: no-preference)");this.transitionPromise=Promise.resolve()}static get styles(){return[v,y]}focus(){const e=u(this);e?e.focus():this.children.length===1?this.tray.focus():super.focus()}overlayWillCloseCallback(){return this.open?(this.close(),!0):!1}close(){this.open=!1,this.prefersMotion.matches||this.dispatchClosed()}dispatchClosed(){this.dispatchEvent(new Event("close",{bubbles:!0}))}handleUnderlayTransitionend(){this.open||(this.dispatchClosed(),this.resolveTransitionPromise())}handleTrayTransitionend(){this.open&&this.resolveTransitionPromise()}update(e){e.has("open")&&e.get("open")!==void 0&&this.prefersMotion.matches&&(this.transitionPromise=new Promise(r=>this.resolveTransitionPromise=r)),super.update(e)}render(){return d`
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=(o,i,e,r)=>{for(var t=r>1?void 0:r?p(i,e):i,s=o.length-1,n;s>=0;s--)(n=o[s])&&(t=(r?n(i,e,t):n(t))||t);return r&&t&&a(i,e,t),t};import{html as d,SpectrumElement as c}from"@spectrum-web-components/base";import{property as h,query as m}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/underlay/sp-underlay.js";import{firstFocusableIn as u}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{MatchMediaController as f}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";import v from"@spectrum-web-components/modal/src/modal.css.js";import y from"./tray.css.js";export class Tray extends c{constructor(){super(...arguments);this.open=!1;this.prefersMotion=new f(this,"(prefers-reduced-motion: no-preference)");this.transitionPromise=Promise.resolve()}static get styles(){return[v,y]}focus(){const e=u(this);e?e.focus():this.children.length===1?this.tray.focus():super.focus()}overlayWillCloseCallback(){return this.open?(this.close(),!0):!1}close(){this.open=!1,this.prefersMotion.matches||this.dispatchClosed()}dispatchClosed(){this.dispatchEvent(new Event("close",{bubbles:!0}))}handleUnderlayTransitionend(){this.open||(this.dispatchClosed(),this.resolveTransitionPromise())}handleTrayTransitionend(){this.open&&this.resolveTransitionPromise()}update(e){e.has("open")&&e.get("open")!==void 0&&this.prefersMotion.matches&&(this.transitionPromise=new Promise(r=>this.resolveTransitionPromise=r)),super.update(e)}render(){return d`
             <sp-underlay
@@ -3,0 +3,0 @@ ?open=${this.open}

stories/tray.stories.js

@@ -1,3 +0,32 @@
-import{html as t}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:!0},argTypes:{open:{name:"open",type:{name:"boolean",required:!1},description:"Whether the tray is open.",table:{type:{summary:"boolean"},defaultValue:{summary:!1}},control:{type:"boolean"}}}};export const Default=e=>t`
-        <sp-tray ?open=${e.open}>
+"use strict";
+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"
+      }
+    }
+  }
+};
+export const Default = (args) => {
+  return html`
+        <sp-tray ?open=${args.open}>
             <sp-dialog size="s">
@@ -8,4 +37,7 @@ <h2 slot="heading">New Messages</h2>
         </sp-tray>
-    `,menu=e=>t`
-        <sp-tray ?open=${e.open}>
+    `;
+};
+export const menu = (args) => {
+  return html`
+        <sp-tray ?open=${args.open}>
             <sp-menu style="width: 100%">
@@ -22,2 +54,3 @@ <sp-menu-item>Deselect</sp-menu-item>
     `;
+};
 //# sourceMappingURL=tray.stories.js.map

test/benchmark/basic-test.js

@@ -1,2 +0,7 @@
-import"@spectrum-web-components/dialog/sp-dialog.js";import"@spectrum-web-components/tray/sp-tray.js";import{html as e}from"lit";import{measureFixtureCreation as s}from"../../../../test/benchmark/helpers.js";s(e`
+"use strict";
+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>
@@ -3,0 +8,0 @@ <sp-dialog size="s">

test/tray.test-vrt.js

@@ -1,2 +0,5 @@
-import*as r from"../stories/tray.stories.js";import{regressVisuals as s}from"../../../test/visual/test.js";s("TrayStories",r);
+"use strict";
+import * as stories from "../stories/tray.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("TrayStories", stories);
 //# sourceMappingURL=tray.test-vrt.js.map

test/tray.test.js

@@ -1,6 +0,34 @@
-import{elementUpdated as s,expect as a,fixture as o,html as r,nextFrame as i,oneEvent as n}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";import{testForLitDevWarnings as l}from"../../../test/testing-helpers.js";describe("Tray",()=>{l(async()=>await o(r`
+"use strict";
+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";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+describe("Tray", () => {
+  testForLitDevWarnings(
+    async () => await fixture(
+      html`
                     <sp-tray></sp-tray>
-                `)),it("loads default tray accessibly",async()=>{const t=await o(r`
+                `
+    )
+  );
+  it("loads default tray accessibly", async () => {
+    const el = await fixture(
+      html`
                 <sp-tray></sp-tray>
-            `);await s(t),await a(t).to.be.accessible()}),it("focuses focusable light DOM element",async()=>{const t=await o(r`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("focuses focusable light DOM element", async () => {
+    const el = await fixture(
+      html`
                 <sp-tray open>
@@ -11,11 +39,50 @@ <div>
                 </sp-tray>
-            `),e=t.querySelector("a");await s(t),t.focus(),await s(t),a(document.activeElement).to.equal(e)}),it('focuses "tray"',async()=>{const t=await o(r`
+            `
+    );
+    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>
                     <div></div>
                 </sp-tray>
-            `);await s(t),t.focus(),await s(t),a(document.activeElement).to.equal(t),a(t.shadowRoot.activeElement).to.equal(t.tray)}),it("closes",async()=>{const e=(await o(r`
+            `
+    );
+    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">
                     <sp-tray></sp-tray>
                 </sp-theme>
-            `)).querySelector("sp-tray");await i(),await i(),a(e.open).to.be.false,e.open=!0,await s(e),a(e.open).to.be.true;const c=n(e,"close");e.shadowRoot.querySelector("sp-underlay").click(),await c,a(e.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

No alert changes

Improved metrics

Total package byte prevSize

91485

increased by2.48%

Lines of code

722

increased by19.54%

Dependency changes

• Updated@spectrum-web-components/modal@^0.7.1