@material/mwc-menu - npm Package Compare versions

Comparing version 0.14.0-canary.f790f713.0 to 0.14.0-canary.ff82d9ec.0

mwc-menu-base.d.ts

@@ -19,9 +19,9 @@ /**
 import './mwc-menu-surface';
-import { MDCMenuAdapter } from '@material/menu/adapter';
-import { DefaultFocusState as DefaultFocusStateEnum } from '@material/menu/constants';
+import { MDCMenuAdapter } from '@material/menu/adapter.js';
+import { DefaultFocusState as DefaultFocusStateEnum } from '@material/menu/constants.js';
 import MDCMenuFoundation from '@material/menu/foundation.js';
 import { BaseElement } from '@material/mwc-base/base-element.js';
 import { List, MWCListIndex } from '@material/mwc-list';
-import { ActionDetail } from '@material/mwc-list/mwc-list-foundation';
-import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
+import { ActionDetail } from '@material/mwc-list/mwc-list-foundation.js';
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base.js';
 import { MenuSurface } from './mwc-menu-surface';
@@ -59,2 +59,3 @@ import { Corner } from './mwc-menu-surface-base';
     defaultFocus: DefaultFocusState;
+    protected _listUpdateComplete: null | Promise<unknown>;
     protected get listElement(): List | null;
@@ -70,2 +71,4 @@ get items(): ListItemBase[];
     protected onClosed(): void;
+    protected _getUpdateComplete(): Promise<void>;
+    protected firstUpdated(): Promise<void>;
     select(index: MWCListIndex): void;
@@ -72,0 +75,0 @@ close(): void;

mwc-menu-base.js

@@ -20,5 +20,6 @@ import { __decorate } from "tslib";
 import './mwc-menu-surface';
-import { DefaultFocusState as DefaultFocusStateEnum } from '@material/menu/constants';
+import { DefaultFocusState as DefaultFocusStateEnum } from '@material/menu/constants.js';
 import MDCMenuFoundation from '@material/menu/foundation.js';
-import { BaseElement, observer } from '@material/mwc-base/base-element.js';
+import { BaseElement } from '@material/mwc-base/base-element.js';
+import { observer } from '@material/mwc-base/observer.js';
 import { html, property, query } from 'lit-element';
@@ -52,2 +53,3 @@ export { createSetFromIndex, isEventMulti, isIndexSet } from '@material/mwc-list/mwc-list-foundation';
         this.defaultFocus = 'LIST_ROOT';
+        this._listUpdateComplete = null;
     }
@@ -264,2 +266,14 @@ get listElement() {
     }
+    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) {
@@ -266,0 +280,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

@@ -5,6 +5,18 @@ import { __decorate } from "tslib";
 import { getTransformPropertyName } from '@material/menu-surface/util';
-import { addHasRemoveClass, BaseElement, observer } from '@material/mwc-base/base-element.js';
+import { addHasRemoveClass, BaseElement } from '@material/mwc-base/base-element.js';
+import { observer } from '@material/mwc-base/observer.js';
 import { deepActiveElementPath, doesElementContainFocus } from '@material/mwc-base/utils';
 import { html, property, query } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
+// required for closure compiler
+const stringToCorner = {
+    'TOP_LEFT': CornerEnum.TOP_LEFT,
+    'TOP_RIGHT': CornerEnum.TOP_RIGHT,
+    'BOTTOM_LEFT': CornerEnum.BOTTOM_LEFT,
+    'BOTTOM_RIGHT': CornerEnum.BOTTOM_RIGHT,
+    'TOP_START': CornerEnum.TOP_START,
+    'TOP_END': CornerEnum.TOP_END,
+    'BOTTOM_START': CornerEnum.BOTTOM_START,
+    'BOTTOM_END': CornerEnum.BOTTOM_END,
+};
 /**
@@ -20,3 +32,2 @@ * @fires opened
         this.fullwidth = false;
-        this.anchor = null;
         this.fixed = false;
@@ -29,5 +40,6 @@ this.x = null;
         this.corner = 'TOP_START';
+        this.anchor = null;
         this.previouslyFocused = null;
         this.previousAnchor = null;
-        this.onBodyClickBound = () => { };
+        this.onBodyClickBound = () => undefined;
     }
@@ -149,11 +161,2 @@ render() {
     }
-    saveOrRestoreAnchor(isAbsolute) {
-        if (isAbsolute) {
-            this.previousAnchor = this.anchor;
-            this.anchor = null;
-        }
-        if (!isAbsolute && !this.anchor && this.previousAnchor) {
-            this.anchor = this.previousAnchor;
-        }
-    }
     close() {
@@ -177,3 +180,2 @@ this.open = false;
             this.mdcFoundation.setIsHoisted(isAbsolute);
-            this.saveOrRestoreAnchor(isAbsolute);
         }
@@ -186,13 +188,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 }),
@@ -202,3 +193,2 @@ observer(function (isFixed) {
             this.mdcFoundation.setIsHoisted(isFixed);
-            this.saveOrRestoreAnchor(isFixed);
         }
@@ -212,3 +202,3 @@ })
             this.mdcFoundation.setAbsolutePosition(value, this.y);
-            this.mdcFoundation.setAnchorMargin({ left: value, top: this.y });
+            this.mdcFoundation.setAnchorMargin({ left: value, top: this.y, right: -value, bottom: this.y });
         }
@@ -222,3 +212,3 @@ })
             this.mdcFoundation.setAbsolutePosition(this.x, value);
-            this.mdcFoundation.setAnchorMargin({ left: this.x, top: value });
+            this.mdcFoundation.setAnchorMargin({ left: this.x, top: value, right: -this.x, bottom: value });
         }
@@ -237,8 +227,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();
@@ -254,3 +245,3 @@ }
             if (value) {
-                this.mdcFoundation.setAnchorCorner(CornerEnum[value]);
+                this.mdcFoundation.setAnchorCorner(stringToCorner[value]);
             }
@@ -257,0 +248,0 @@ else {

mwc-menu-surface-css.js

@@ -18,3 +18,3 @@ /**
 import { css } from 'lit-element';
-export const style = css `.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform,opacity;z-index:8;transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface, #fff);color:#000;color:var(--mdc-theme-on-surface, #000);border-radius:4px;transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(0.8);opacity:0}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity .075s linear}[dir=rtl] .mdc-menu-surface,.mdc-menu-surface[dir=rtl]{transform-origin-left:top right;transform-origin-right:top left}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}:host(:not([open])){display:none}.fullwidth{width:100%}`;
+export const style = css `.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform,opacity;z-index:8;transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface, #fff);color:#000;color:var(--mdc-theme-on-surface, #000);border-radius:4px;transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(0.8);opacity:0}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity .075s linear}[dir=rtl] .mdc-menu-surface,.mdc-menu-surface[dir=rtl]{transform-origin-left:top right;transform-origin-right:top left}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}:host(:not([open])){display:none}.fullwidth{width:100%}.mdc-menu-surface{border-radius:var(--mdc-shape-medium, 4px)}`;
 //# sourceMappingURL=mwc-menu-surface-css.js.map

mwc-menu-surface.d.ts

@@ -18,4 +18,4 @@ /**
 import { MenuSurfaceBase } from './mwc-menu-surface-base.js';
-export { MDCMenuDistance } from '@material/menu-surface/types';
-export { Corner } from './mwc-menu-surface-base';
+export { MDCMenuDistance } from '@material/menu-surface/types.js';
+export { Corner } from './mwc-menu-surface-base.js';
 declare global {
@@ -22,0 +22,0 @@ interface HTMLElementTagNameMap {

mwc-menu.d.ts

@@ -18,5 +18,5 @@ /**
 import { MenuBase } from './mwc-menu-base.js';
-export { DefaultFocusState } from '@material/menu/constants';
-export { createSetFromIndex, isEventMulti, isIndexSet, MWCListIndex } from '@material/mwc-list/mwc-list-foundation';
-export { Corner } from './mwc-menu-surface-base';
+export { DefaultFocusState } from '@material/menu/constants.js';
+export { createSetFromIndex, isEventMulti, isIndexSet, MWCListIndex } from '@material/mwc-list/mwc-list-foundation.js';
+export { Corner } from './mwc-menu-surface-base.js';
 declare global {
@@ -23,0 +23,0 @@ interface HTMLElementTagNameMap {

mwc-menu.js

@@ -21,4 +21,4 @@ /**
 import { style } from './mwc-menu-css.js';
-export { DefaultFocusState } from '@material/menu/constants';
-export { createSetFromIndex, isEventMulti, isIndexSet } from '@material/mwc-list/mwc-list-foundation';
+export { DefaultFocusState } from '@material/menu/constants.js';
+export { createSetFromIndex, isEventMulti, isIndexSet } from '@material/mwc-list/mwc-list-foundation.js';
 let Menu = class Menu extends MenuBase {
@@ -25,0 +25,0 @@ };

package.json

 {
   "name": "@material/mwc-menu",
-  "version": "0.14.0-canary.f790f713.0",
+  "version": "0.14.0-canary.ff82d9ec.0",
   "description": "",
@@ -13,6 +13,6 @@ "main": "mwc-menu.js",
   "dependencies": {
-    "@material/menu": "=6.0.0-canary.781434a92.0",
-    "@material/menu-surface": "=6.0.0-canary.781434a92.0",
-    "@material/mwc-base": "0.14.0-canary.f790f713.0",
-    "@material/mwc-list": "0.14.0-canary.f790f713.0",
+    "@material/menu": "=6.0.0-canary.6b48781bf.0",
+    "@material/menu-surface": "=6.0.0-canary.6b48781bf.0",
+    "@material/mwc-base": "0.14.0-canary.ff82d9ec.0",
+    "@material/mwc-list": "0.14.0-canary.ff82d9ec.0",
     "lit-element": "^2.2.1",
@@ -25,3 +25,3 @@ "lit-html": "^1.1.2",
   },
-  "gitHead": "4ccf0f734c9b727a925e62b9999d4380351c7936"
+  "gitHead": "0af402cd2ff3748cfa5f7956ad2211ec9271c83e"
 }

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/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/menu/images/header.png" width="240px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/header.png" width="240px">
 
@@ -23,3 +23,3 @@ [Material Design Guidelines: menus](https://material.io/design/components/menus.html)
 > tooling step is required to resolve *bare module specifiers*, as well as
-> transpilation and polyfills for Edge and IE11. See
+> transpilation and polyfills for IE11. See
 > [here](https://github.com/material-components/material-components-web-components#quick-start)
@@ -36,3 +36,3 @@ > for detailed instructions.
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/menu/images/basic.png" width="160px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/basic.png" width="160px">
 
@@ -66,3 +66,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/menu/images/activatable.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/activatable.png" width="152px">
 
@@ -83,3 +83,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/menu/images/multi.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/multi.png" width="152px">
 
@@ -100,3 +100,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/menu/images/absolute.png" width="155px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/absolute.png" width="155px">
 
@@ -122,3 +122,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/menu/images/fixed.png" width="154px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/fixed.png" width="154px">
 
@@ -154,3 +154,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/menu/images/selection_group.png" width="170px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/selection_group.png" width="170px">
 
@@ -199,3 +199,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/menu/images/styled.png" width="234px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/styled.png" width="234px">
 
@@ -240,22 +240,22 @@ ```html
 
-| Name                  | Type               | Default  | Description
-| --------------------- | ------------------ | -------- |------------
-| `open`                | `boolean`          | `false`  | Whether the menu should open and display.
-| `anchor`              | `HTMLElement\|null` | `null`   | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.
-| `corner`              | `Corner`*          | `"TOP_START"` | Corner of the anchor from which the menu should position itself.
-| `quick`               | `boolean`          | `false`  | Whether to skip the opening animation.
-| `absolute`            | `boolean`          | `false`  | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.
-| `fixed`               | `boolean`          | `false`  | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.
-| `x`                   | `number\|null`      | `null`   | Modifies `left` on the menu. Requires `y` not to be null.
-| `y`                   | `number\|null`      | `null`   | Modifies `top` on the menu. Requires `x` not to be null.
-| `forceGroupSelection` | `boolean`          | `false`  | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.
-| `defaultFocus`        | `DefaultFocusState`**         | `"LIST_ROOT"` | Item to focus upon menu open.
-| `fullwidth`           | `boolean`          | `false`  | Sets surface width to 100%.
-| `wrapFocus`           | `boolean`          | `false`  | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.
-| `innerRole`           | `"menu"|"listbox"` | `"menu"` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `innerRole` property.
-| `multi`               | `boolean`          | `false`  | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.
-| `activatable`         | `boolean`          | `false`  | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.
-| `items`               | `ListItemBase[]` (readonly)       | `[]` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.
-| `index`               | `MWCListIndex` (readonly)\*\*\*   | `-1` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.
-| `selected`            | `SelectedType` (readonly)\*\*\*\* | `null` | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.
+Name                  | Type                              | Default       | Description
+--------------------- | --------------------------------- | ------------- | -----------
+`open`                | `boolean`                         | `false`       | Whether the menu should open and display.
+`anchor`              | `HTMLElement\|null`               | `null`        | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both `mwc-menu` and the anchor should share a parent with `position:relative`. Changing anchor typically requires `absolute` or `fixed`.
+`corner`              | `Corner`*                         | `"TOP_START"` | Corner of the anchor from which the menu should position itself.
+`quick`               | `boolean`                         | `false`       | Whether to skip the opening animation.
+`absolute`            | `boolean`                         | `false`       | Makes the menu's position `absolute` which will be relative to whichever ancestor has `position:relative`. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`.
+`fixed`               | `boolean`                         | `false`       | Makes the menu's position `fixed` which will be relative to the window. Setting `x` and `y` will modify the menu's `left` and `top`. Setting `anchor` will attempt to position the menu to the `anchor`'s immediate position before opening.
+`x`                   | `number\|null`                    | `null`        | Sets horizontal position when `absolute` or `fixed`. When given an `anchor`, sets horizontal position relative to `anchor` at given `corner`. Requires `y` not to be null.
+`y`                   | `number\|null`                    | `null`        | Sets vertical position when `absolute` or `fixed`. When given an `anchor`, sets vertical position relative to `anchor` at given `corner`. Requires `x` not to be null.
+`forceGroupSelection` | `boolean`                         | `false`       | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction.
+`defaultFocus`        | `DefaultFocusState`**             | `"LIST_ROOT"` | Item to focus upon menu open.
+`fullwidth`           | `boolean`                         | `false`       | Sets surface width to 100%.
+`wrapFocus`           | `boolean`                         | `false`       | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `wrapFocus` property.
+`innerRole`           | `"menu"                           | "listbox"`    | `"menu"`
+`multi`               | `boolean`                         | `false`       | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `multi` property.
+`activatable`         | `boolean`                         | `false`       | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `activatable` property.
+`items`               | `ListItemBase[]` (readonly)       | `[]`          | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `items` property.
+`index`               | `MWCListIndex` (readonly)\*\*\*   | `-1`          | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `index` property.
+`selected`            | `SelectedType` (readonly)\*\*\*\* | `null`        | Proxies to [`mwc-list`'s](https://github.com/material-components/material-components-web-components/tree/master/packages/list#mwc-list-1) `selected` property.
 
@@ -302,6 +302,7 @@ \* `Corner` is equivalent to type
 | ------------------------ | ------- |------------
+| `--mdc-shape-medium`     | `4px`   | Border radius of the dropdown.
 | `--mdc-menu-item-height` | `48px`  | Height of single-line list-items in the menu.
 | `--mdc-menu-min-width`   | `auto`  | Menu min-width.
 | `--mdc-menu-max-width`   | `auto`  | Menu max-width.
-| `--mdc-theme-surface`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/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/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.
 
@@ -308,0 +309,0 @@ `mwc-menu` internally uses

src/mwc-menu-base.ts

@@ -20,9 +20,10 @@ /**
 
-import {MDCMenuAdapter} from '@material/menu/adapter';
-import {DefaultFocusState as DefaultFocusStateEnum} from '@material/menu/constants';
+import {MDCMenuAdapter} from '@material/menu/adapter.js';
+import {DefaultFocusState as DefaultFocusStateEnum} from '@material/menu/constants.js';
 import MDCMenuFoundation from '@material/menu/foundation.js';
-import {BaseElement, observer} from '@material/mwc-base/base-element.js';
+import {BaseElement} from '@material/mwc-base/base-element.js';
+import {observer} from '@material/mwc-base/observer.js';
 import {List, MWCListIndex} from '@material/mwc-list';
-import {ActionDetail} from '@material/mwc-list/mwc-list-foundation';
-import {ListItemBase} from '@material/mwc-list/mwc-list-item-base';
+import {ActionDetail} from '@material/mwc-list/mwc-list-foundation.js';
+import {ListItemBase} from '@material/mwc-list/mwc-list-item-base.js';
 import {html, property, query} from 'lit-element';
@@ -91,2 +92,4 @@
 
+  protected _listUpdateComplete: null|Promise<unknown> = null;
+
   protected get listElement() {
@@ -347,2 +350,17 @@ if (!this.listElement_) {
 
+  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) {
@@ -349,0 +367,0 @@ const listElement = this.listElement;

src/mwc-menu-surface-base.ts

@@ -21,6 +21,7 @@ /**
 import {getTransformPropertyName} from '@material/menu-surface/util';
-import {addHasRemoveClass, BaseElement, observer} from '@material/mwc-base/base-element.js';
+import {addHasRemoveClass, BaseElement} from '@material/mwc-base/base-element.js';
+import {observer} from '@material/mwc-base/observer.js';
 import {deepActiveElementPath, doesElementContainFocus} from '@material/mwc-base/utils';
 import {html, property, query} from 'lit-element';
-import {classMap} from 'lit-html/directives/class-map';
+import {classMap} from 'lit-html/directives/class-map.js';
 
@@ -30,2 +31,14 @@ export type Corner = keyof typeof CornerEnum;
 
+// required for closure compiler
+const stringToCorner = {
+  'TOP_LEFT': CornerEnum.TOP_LEFT,
+  'TOP_RIGHT': CornerEnum.TOP_RIGHT,
+  'BOTTOM_LEFT': CornerEnum.BOTTOM_LEFT,
+  'BOTTOM_RIGHT': CornerEnum.BOTTOM_RIGHT,
+  'TOP_START': CornerEnum.TOP_START,
+  'TOP_END': CornerEnum.TOP_END,
+  'BOTTOM_START': CornerEnum.BOTTOM_START,
+  'BOTTOM_END': CornerEnum.BOTTOM_END,
+};
+
 /**
@@ -48,4 +61,2 @@ * @fires opened
       this.mdcFoundation.setIsHoisted(isAbsolute);
-
-      this.saveOrRestoreAnchor(isAbsolute);
     }
@@ -57,15 +68,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})
@@ -75,3 +73,2 @@ @observer(function(this: MenuSurfaceBase, isFixed: boolean) {
       this.mdcFoundation.setIsHoisted(isFixed);
-      this.saveOrRestoreAnchor(isFixed);
     }
@@ -85,3 +82,4 @@ })
       this.mdcFoundation.setAbsolutePosition(value, this.y);
-      this.mdcFoundation.setAnchorMargin({left: value, top: this.y});
+      this.mdcFoundation.setAnchorMargin(
+          {left: value, top: this.y, right: -value, bottom: this.y});
     }
@@ -95,3 +93,4 @@ })
       this.mdcFoundation.setAbsolutePosition(this.x, value);
-      this.mdcFoundation.setAnchorMargin({left: this.x, top: value});
+      this.mdcFoundation.setAnchorMargin(
+          {left: this.x, top: value, right: -this.x, bottom: value});
     }
@@ -111,7 +110,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();
@@ -124,6 +124,6 @@ }
   @property({type: String})
-  @observer(function(this: MenuSurfaceBase, value: Corner|null) {
+  @observer(function(this: MenuSurfaceBase, value: Corner) {
     if (this.mdcFoundation) {
       if (value) {
-        this.mdcFoundation.setAnchorCorner(CornerEnum[value]);
+        this.mdcFoundation.setAnchorCorner(stringToCorner[value]);
       } else {
@@ -136,5 +136,7 @@ this.mdcFoundation.setAnchorCorner(CornerEnum.TOP_START);
 
+  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;
 
@@ -293,13 +295,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() {
@@ -306,0 +297,0 @@ this.open = false;

src/mwc-menu-surface-css.ts

@@ -19,2 +19,2 @@ /**
 
-export const style = css`.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform,opacity;z-index:8;transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface, #fff);color:#000;color:var(--mdc-theme-on-surface, #000);border-radius:4px;transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(0.8);opacity:0}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity .075s linear}[dir=rtl] .mdc-menu-surface,.mdc-menu-surface[dir=rtl]{transform-origin-left:top right;transform-origin-right:top left}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}:host(:not([open])){display:none}.fullwidth{width:100%}`;
+export const style = css`.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform,opacity;z-index:8;transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface, #fff);color:#000;color:var(--mdc-theme-on-surface, #000);border-radius:4px;transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(0.8);opacity:0}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity .075s linear}[dir=rtl] .mdc-menu-surface,.mdc-menu-surface[dir=rtl]{transform-origin-left:top right;transform-origin-right:top left}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}:host(:not([open])){display:none}.fullwidth{width:100%}.mdc-menu-surface{border-radius:var(--mdc-shape-medium, 4px)}`;

src/mwc-menu-surface.ts

@@ -22,4 +22,4 @@ /**
 
-export {MDCMenuDistance} from '@material/menu-surface/types';
-export {Corner} from './mwc-menu-surface-base';
+export {MDCMenuDistance} from '@material/menu-surface/types.js';
+export {Corner} from './mwc-menu-surface-base.js';
 
@@ -26,0 +26,0 @@ declare global {

src/mwc-menu.ts

@@ -23,5 +23,5 @@ /**
 
-export {DefaultFocusState} from '@material/menu/constants';
-export {createSetFromIndex, isEventMulti, isIndexSet, MWCListIndex} from '@material/mwc-list/mwc-list-foundation';
-export {Corner} from './mwc-menu-surface-base';
+export {DefaultFocusState} from '@material/menu/constants.js';
+export {createSetFromIndex, isEventMulti, isIndexSet, MWCListIndex} from '@material/mwc-list/mwc-list-foundation.js';
+export {Corner} from './mwc-menu-surface-base.js';
 
@@ -28,0 +28,0 @@ declare global {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

592937

increased by0.43%

Lines of code

1512

increased by0.93%

Number of lines in readme file

307

increased by0.33%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@material/[e-mail]82d9ec.0(transitive)

• + Added@material/[e-mail]82d9ec.0(transitive)

• + Added@material/[e-mail]82d9ec.0(transitive)

• + Added@material/[e-mail]82d9ec.0(transitive)

• + Added@material/[e-mail]82d9ec.0(transitive)

• - Removed@material/mwc-base@0.14.0-canary.f790f713.0(transitive)

• - Removed@material/mwc-checkbox@0.14.0-canary.f790f713.0(transitive)

• - Removed@material/mwc-list@0.14.0-canary.f790f713.0(transitive)

• - Removed@material/mwc-radio@0.14.0-canary.f790f713.0(transitive)

• - Removed@material/mwc-ripple@0.14.0-canary.f790f713.0(transitive)

• Updated@material/menu@=6.0.0-canary.6b48781bf.0

• Updated@material/menu-surface@=6.0.0-canary.6b48781bf.0

• Updated@material/[e-mail]82d9ec.0

• Updated@material/[e-mail]82d9ec.0