@material/mwc-menu - npm Package Compare versions

Comparing version 0.14.0-canary.024f371a.0 to 0.14.0-canary.02aa8a98.0

mwc-menu-base.d.ts

@@ -58,2 +58,3 @@ /**
     defaultFocus: DefaultFocusState;
+    protected _listUpdateComplete: null | Promise<unknown>;
     protected get listElement(): List | null;
@@ -69,2 +70,4 @@ get items(): ListItemBase[];
     protected onClosed(): void;
+    protected _getUpdateComplete(): Promise<void>;
+    protected firstUpdated(): Promise<void>;
     select(index: MWCListIndex): void;
@@ -71,0 +74,0 @@ close(): void;

mwc-menu-base.js

@@ -51,2 +51,3 @@ import { __decorate } from "tslib";
         this.defaultFocus = 'LIST_ROOT';
+        this._listUpdateComplete = null;
     }
@@ -263,2 +264,13 @@ get listElement() {
     }
+    async _getUpdateComplete() {
+        await this._listUpdateComplete;
+        await super._getUpdateComplete();
+    }
+    async firstUpdated() {
+        const listElement = this.listElement;
+        if (listElement) {
+            this._listUpdateComplete = listElement.updateComplete;
+            await this._listUpdateComplete;
+        }
+    }
     select(index) {
@@ -265,0 +277,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

@@ -9,2 +9,13 @@ import { __decorate } from "tslib";
 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 +31,2 @@ * @fires opened
         this.fullwidth = false;
-        this.anchor = null;
         this.fixed = false;
@@ -29,5 +39,6 @@ this.x = null;
         this.corner = 'TOP_START';
+        this.anchor = null;
         this.previouslyFocused = null;
         this.previousAnchor = null;
-        this.onBodyClickBound = () => { };
+        this.onBodyClickBound = () => undefined;
     }
@@ -149,11 +160,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 +179,2 @@ this.open = false;
             this.mdcFoundation.setIsHoisted(isAbsolute);
-            this.saveOrRestoreAnchor(isAbsolute);
         }
@@ -186,13 +187,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 +192,2 @@ observer(function (isFixed) {
             this.mdcFoundation.setIsHoisted(isFixed);
-            this.saveOrRestoreAnchor(isFixed);
         }
@@ -212,3 +201,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 +211,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 +226,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 +244,3 @@ }
             if (value) {
-                this.mdcFoundation.setAnchorCorner(CornerEnum[value]);
+                this.mdcFoundation.setAnchorCorner(stringToCorner[value]);
             }
@@ -257,0 +247,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

package.json

 {
   "name": "@material/mwc-menu",
-  "version": "0.14.0-canary.024f371a.0",
+  "version": "0.14.0-canary.02aa8a98.0",
   "description": "",
@@ -13,6 +13,6 @@ "main": "mwc-menu.js",
   "dependencies": {
-    "@material/menu": "=6.0.0-canary.69edc6e28.0",
-    "@material/menu-surface": "=6.0.0-canary.69edc6e28.0",
-    "@material/mwc-base": "0.14.0-canary.024f371a.0",
-    "@material/mwc-list": "0.14.0-canary.024f371a.0",
+    "@material/menu": "=6.0.0-canary.17b9699c4.0",
+    "@material/menu-surface": "=6.0.0-canary.17b9699c4.0",
+    "@material/mwc-base": "0.14.0-canary.02aa8a98.0",
+    "@material/mwc-list": "0.14.0-canary.02aa8a98.0",
     "lit-element": "^2.2.1",
@@ -25,3 +25,3 @@ "lit-html": "^1.1.2",
   },
-  "gitHead": "efde2be2f22a9a7e20f2b0d57c4cddee405ada0b"
+  "gitHead": "97bedf50cad33662f192490eaffe0e04894aa3c1"
 }

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/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/menu/images/header.png" width="240px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/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/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/menu/images/basic.png" width="160px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/menu/images/basic.png" width="160px">
 
@@ -65,3 +65,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/menu/images/activatable.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/menu/images/activatable.png" width="152px">
 
@@ -82,3 +82,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/menu/images/multi.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/menu/images/multi.png" width="152px">
 
@@ -99,3 +99,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/menu/images/absolute.png" width="155px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/menu/images/absolute.png" width="155px">
 
@@ -121,3 +121,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/menu/images/fixed.png" width="154px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/menu/images/fixed.png" width="154px">
 
@@ -153,3 +153,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/menu/images/selection_group.png" width="170px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/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/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/menu/images/styled.png" width="234px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/menu/images/styled.png" width="234px">
 
@@ -239,22 +239,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.
 
@@ -301,6 +301,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/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/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/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/menu/images/color_fff.png) `#fff` | Color of the menu surface.
 
@@ -307,0 +308,0 @@ `mwc-menu` internally uses

src/mwc-menu-base.ts

@@ -90,2 +90,4 @@ /**
 
+  protected _listUpdateComplete: null|Promise<unknown> = null;
+
   protected get listElement() {
@@ -346,2 +348,16 @@ if (!this.listElement_) {
 
+  protected async _getUpdateComplete() {
+    await this._listUpdateComplete;
+    await super._getUpdateComplete();
+  }
+
+  protected async firstUpdated() {
+    const listElement = this.listElement;
+
+    if (listElement) {
+      this._listUpdateComplete = listElement.updateComplete;
+      await this._listUpdateComplete;
+    }
+  }
+
   select(index: MWCListIndex) {
@@ -348,0 +364,0 @@ const listElement = this.listElement;

src/mwc-menu-surface-base.ts

@@ -29,2 +29,14 @@ /**
 
+// 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,
+};
+
 /**
@@ -47,4 +59,2 @@ * @fires opened
       this.mdcFoundation.setIsHoisted(isAbsolute);
-
-      this.saveOrRestoreAnchor(isAbsolute);
     }
@@ -56,15 +66,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})
@@ -74,3 +71,2 @@ @observer(function(this: MenuSurfaceBase, isFixed: boolean) {
       this.mdcFoundation.setIsHoisted(isFixed);
-      this.saveOrRestoreAnchor(isFixed);
     }
@@ -84,3 +80,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});
     }
@@ -94,3 +91,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});
     }
@@ -110,7 +108,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();
@@ -123,6 +122,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 {
@@ -135,5 +134,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;
 
@@ -292,13 +293,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() {
@@ -305,0 +295,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)}`;

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

Improved metrics

Total package byte prevSize

592469

increased by0.34%

Lines of code

1506

increased by0.53%

Number of lines in readme file

307

increased by0.33%

Dependency changes

• + Added@material/mwc-base@0.14.0-canary.02aa8a98.0(transitive)

• + Added@material/mwc-checkbox@0.14.0-canary.02aa8a98.0(transitive)

• + Added@material/mwc-list@0.14.0-canary.02aa8a98.0(transitive)

• + Added@material/mwc-radio@0.14.0-canary.02aa8a98.0(transitive)

• + Added@material/mwc-ripple@0.14.0-canary.02aa8a98.0(transitive)

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

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

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

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

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

• Updated@material/menu@=6.0.0-canary.17b9699c4.0

• Updated@material/menu-surface@=6.0.0-canary.17b9699c4.0

• Updated@material/mwc-base@0.14.0-canary.02aa8a98.0

• Updated@material/mwc-list@0.14.0-canary.02aa8a98.0