@material/mwc-menu - npm Package Compare versions

Comparing version 0.14.0-canary.cbdfe453.0 to 0.14.0-canary.dc04abe1.0

mwc-menu-base.d.ts

@@ -58,2 +58,3 @@ /**
     defaultFocus: DefaultFocusState;
+    protected _listUpdateComplete: null | Promise<unknown>;
     protected get listElement(): List | null;
@@ -65,3 +66,2 @@ get items(): ListItemBase[];
     protected createAdapter(): MDCMenuAdapter;
-    protected _getUpdateComplete(): Promise<void>;
     protected onKeydown(evt: KeyboardEvent): void;
@@ -71,2 +71,4 @@ protected onAction(evt: CustomEvent<ActionDetail>): void;
     protected onClosed(): void;
+    protected _getUpdateComplete(): Promise<void>;
+    protected firstUpdated(): Promise<void>;
     select(index: MWCListIndex): void;
@@ -73,0 +75,0 @@ close(): void;

mwc-menu-base.js

@@ -51,2 +51,3 @@ import { __decorate } from "tslib";
         this.defaultFocus = 'LIST_ROOT';
+        this._listUpdateComplete = null;
     }
@@ -239,13 +240,2 @@ get listElement() {
     }
-    async _getUpdateComplete() {
-        const listElement = this.listElement;
-        const listUpdateComplete = listElement ? listElement.updateComplete : Promise.resolve();
-        const menuSurface = this.mdcRoot;
-        const surfaceUpdateComplete = menuSurface ? menuSurface.updateComplete : Promise.resolve();
-        await Promise.all([
-            listUpdateComplete,
-            surfaceUpdateComplete,
-        ]);
-        await super._getUpdateComplete();
-    }
     onKeydown(evt) {
@@ -275,2 +265,14 @@ if (this.mdcFoundation) {
     }
+    async _getUpdateComplete() {
+        await this._listUpdateComplete;
+        await super._getUpdateComplete();
+    }
+    async firstUpdated() {
+        super.firstUpdated();
+        const listElement = this.listElement;
+        if (listElement) {
+            this._listUpdateComplete = listElement.updateComplete;
+            await this._listUpdateComplete;
+        }
+    }
     select(index) {
@@ -277,0 +279,0 @@ const listElement = this.listElement;

mwc-menu-surface-base.d.ts

@@ -36,3 +36,2 @@ /**
     fullwidth: boolean;
-    anchor: HTMLElement | null;
     fixed: boolean;
@@ -44,2 +43,3 @@ x: number | null;
     corner: Corner;
+    anchor: HTMLElement | null;
     protected previouslyFocused: HTMLElement | Element | null;
@@ -54,5 +54,4 @@ protected previousAnchor: HTMLElement | null;
     protected deregisterBodyClick(): void;
-    protected saveOrRestoreAnchor(isAbsolute: boolean): void;
     close(): void;
     show(): void;
 }

mwc-menu-surface-base.js

@@ -30,3 +30,2 @@ import { __decorate } from "tslib";
         this.fullwidth = false;
-        this.anchor = null;
         this.fixed = false;
@@ -39,5 +38,6 @@ this.x = null;
         this.corner = 'TOP_START';
+        this.anchor = null;
         this.previouslyFocused = null;
         this.previousAnchor = null;
-        this.onBodyClickBound = () => { };
+        this.onBodyClickBound = () => undefined;
     }
@@ -159,11 +159,2 @@ render() {
     }
-    saveOrRestoreAnchor(isAbsolute) {
-        if (isAbsolute) {
-            this.previousAnchor = this.anchor;
-            this.anchor = null;
-        }
-        if (!isAbsolute && !this.anchor && this.previousAnchor) {
-            this.anchor = this.previousAnchor;
-        }
-    }
     close() {
@@ -187,3 +178,2 @@ this.open = false;
             this.mdcFoundation.setIsHoisted(isAbsolute);
-            this.saveOrRestoreAnchor(isAbsolute);
         }
@@ -196,13 +186,2 @@ })
 __decorate([
-    property({ type: Object }),
-    observer(function (newAnchor, oldAnchor) {
-        if (oldAnchor) {
-            oldAnchor.style.position = '';
-        }
-        if (newAnchor) {
-            newAnchor.style.position = 'relative';
-        }
-    })
-], MenuSurfaceBase.prototype, "anchor", void 0);
-__decorate([
     property({ type: Boolean }),
@@ -212,3 +191,2 @@ observer(function (isFixed) {
             this.mdcFoundation.setIsHoisted(isFixed);
-            this.saveOrRestoreAnchor(isFixed);
         }
@@ -245,8 +223,9 @@ })
     property({ type: Boolean, reflect: true }),
-    observer(function (isOpen) {
+    observer(function (isOpen, wasOpen) {
         if (this.mdcFoundation) {
             if (isOpen) {
                 this.mdcFoundation.open();
+                // wasOpen helps with first render (when it is `undefined`) perf
             }
-            else {
+            else if (wasOpen !== undefined) {
                 this.mdcFoundation.close();
@@ -253,0 +232,0 @@ }

package.json

 {
   "name": "@material/mwc-menu",
-  "version": "0.14.0-canary.cbdfe453.0",
+  "version": "0.14.0-canary.dc04abe1.0",
   "description": "",
@@ -13,6 +13,6 @@ "main": "mwc-menu.js",
   "dependencies": {
-    "@material/menu": "=6.0.0-canary.3657f8863.0",
-    "@material/menu-surface": "=6.0.0-canary.3657f8863.0",
-    "@material/mwc-base": "0.14.0-canary.cbdfe453.0",
-    "@material/mwc-list": "0.14.0-canary.cbdfe453.0",
+    "@material/menu": "=6.0.0-canary.1db5c9fc8.0",
+    "@material/menu-surface": "=6.0.0-canary.1db5c9fc8.0",
+    "@material/mwc-base": "0.14.0-canary.dc04abe1.0",
+    "@material/mwc-list": "0.14.0-canary.dc04abe1.0",
     "lit-element": "^2.2.1",
@@ -25,3 +25,3 @@ "lit-html": "^1.1.2",
   },
-  "gitHead": "473c76376428d49a6811e677bf7e1450ef90b5cb"
+  "gitHead": "83603c5af2141bb893dc17dc4ff73baa5dbc7b64"
 }

README.md

@@ -8,3 +8,3 @@ # `<mwc-menu>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-menu.svg)](https://www.npmjs.com/package/@material/mwc-menu)
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/header.png" width="240px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/header.png" width="240px">
 
@@ -35,3 +35,3 @@ [Material Design Guidelines: menus](https://material.io/design/components/menus.html)
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/basic.png" width="160px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/basic.png" width="160px">
 
@@ -65,3 +65,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/activatable.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/activatable.png" width="152px">
 
@@ -82,3 +82,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/multi.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/multi.png" width="152px">
 
@@ -99,3 +99,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/absolute.png" width="155px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/absolute.png" width="155px">
 
@@ -121,3 +121,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/fixed.png" width="154px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/fixed.png" width="154px">
 
@@ -153,3 +153,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/selection_group.png" width="170px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/selection_group.png" width="170px">
 
@@ -198,3 +198,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/styled.png" width="234px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/styled.png" width="234px">
 
@@ -304,3 +304,3 @@ ```html
 | `--mdc-menu-max-width`   | `auto`  | Menu max-width.
-| `--mdc-theme-surface`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.
+| `--mdc-theme-surface`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.
 
@@ -307,0 +307,0 @@ `mwc-menu` internally uses

src/mwc-menu-base.ts

@@ -90,2 +90,4 @@ /**
 
+  protected _listUpdateComplete: null|Promise<unknown> = null;
+
   protected get listElement() {
@@ -315,18 +317,2 @@ if (!this.listElement_) {
 
-  protected async _getUpdateComplete() {
-    const listElement = this.listElement;
-    const listUpdateComplete =
-        listElement ? listElement.updateComplete : Promise.resolve();
-
-    const menuSurface = this.mdcRoot;
-    const surfaceUpdateComplete =
-        menuSurface ? menuSurface.updateComplete : Promise.resolve();
-
-    await Promise.all([
-      listUpdateComplete,
-      surfaceUpdateComplete,
-    ]);
-    await super._getUpdateComplete();
-  }
-
   protected onKeydown(evt: KeyboardEvent) {
@@ -363,2 +349,17 @@ if (this.mdcFoundation) {
 
+  protected async _getUpdateComplete() {
+    await this._listUpdateComplete;
+    await super._getUpdateComplete();
+  }
+
+  protected async firstUpdated() {
+    super.firstUpdated();
+    const listElement = this.listElement;
+
+    if (listElement) {
+      this._listUpdateComplete = listElement.updateComplete;
+      await this._listUpdateComplete;
+    }
+  }
+
   select(index: MWCListIndex) {
@@ -365,0 +366,0 @@ const listElement = this.listElement;

src/mwc-menu-surface-base.ts

@@ -58,4 +58,2 @@ /**
       this.mdcFoundation.setIsHoisted(isAbsolute);
-
-      this.saveOrRestoreAnchor(isAbsolute);
     }
@@ -67,15 +65,2 @@ })
 
-  @property({type: Object})
-  @observer(function(
-      this: MenuSurfaceBase, newAnchor: HTMLElement|null,
-      oldAnchor: HTMLElement|null) {
-    if (oldAnchor) {
-      oldAnchor.style.position = '';
-    }
-    if (newAnchor) {
-      newAnchor.style.position = 'relative';
-    }
-  })
-  anchor: HTMLElement|null = null;
-
   @property({type: Boolean})
@@ -85,3 +70,2 @@ @observer(function(this: MenuSurfaceBase, isFixed: boolean) {
       this.mdcFoundation.setIsHoisted(isFixed);
-      this.saveOrRestoreAnchor(isFixed);
     }
@@ -121,7 +105,8 @@ })
   @property({type: Boolean, reflect: true})
-  @observer(function(this: MenuSurfaceBase, isOpen: boolean) {
+  @observer(function(this: MenuSurfaceBase, isOpen: boolean, wasOpen: boolean) {
     if (this.mdcFoundation) {
       if (isOpen) {
         this.mdcFoundation.open();
-      } else {
+        // wasOpen helps with first render (when it is `undefined`) perf
+      } else if (wasOpen !== undefined) {
         this.mdcFoundation.close();
@@ -145,5 +130,7 @@ }
 
+  anchor: HTMLElement|null = null;
+
   protected previouslyFocused: HTMLElement|Element|null = null;
   protected previousAnchor: HTMLElement|null = null;
-  protected onBodyClickBound: (evt: MouseEvent) => void = () => { /* init */ };
+  protected onBodyClickBound: (evt: MouseEvent) => void = () => undefined;
 
@@ -302,13 +289,2 @@ render() {
 
-  protected saveOrRestoreAnchor(isAbsolute: boolean) {
-    if (isAbsolute) {
-      this.previousAnchor = this.anchor;
-      this.anchor = null;
-    }
-
-    if (!isAbsolute && !this.anchor && this.previousAnchor) {
-      this.anchor = this.previousAnchor;
-    }
-  }
-
   close() {
@@ -315,0 +291,0 @@ this.open = false;

No alert changes

Worsened metrics

Total package byte prevSize

592583

-0.4%

Lines of code

1508

-2.52%

Dependency changes

• + Added

  @material/[e-mail]04abe1.0
  (transitive)

• + Added

  @material/[e-mail]04abe1.0
  (transitive)

• + Added

  @material/[e-mail]04abe1.0
  (transitive)

• + Added

  @material/[e-mail]04abe1.0
  (transitive)

• + Added

  @material/[e-mail]04abe1.0
  (transitive)

• - Removed

  @material/[e-mail]453.0
  (transitive)

• - Removed

  @material/[e-mail]453.0
  (transitive)

• - Removed

  @material/[e-mail]453.0
  (transitive)

• - Removed

  @material/[e-mail]453.0
  (transitive)

• - Removed

  @material/[e-mail]453.0
  (transitive)

• Updated

  @material/menu@=6.0.0-canary.1db5c9fc8.0

• Updated

  @material/menu-surface@=6.0.0-canary.1db5c9fc8.0

• Updated

  @material/[e-mail]04abe1.0

• Updated

  @material/[e-mail]04abe1.0