@material/mwc-menu - npm Package Compare versions

Comparing version 0.14.0-canary.c759cfbc.0 to 0.14.0-canary.cbdfe453.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';
@@ -65,2 +65,3 @@ import { Corner } from './mwc-menu-surface-base';
     protected createAdapter(): MDCMenuAdapter;
+    protected _getUpdateComplete(): Promise<void>;
     protected onKeydown(evt: KeyboardEvent): void;
@@ -67,0 +68,0 @@ protected onAction(evt: CustomEvent<ActionDetail>): void;

mwc-menu-base.js

@@ -20,3 +20,3 @@ 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';
@@ -239,2 +239,13 @@ import { BaseElement, observer } from '@material/mwc-base/base-element.js';
     }
+    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) {
@@ -241,0 +252,0 @@ if (this.mdcFoundation) {

mwc-menu-surface-base.js

@@ -8,3 +8,14 @@ import { __decorate } from "tslib";
 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,
+};
 /**
@@ -206,3 +217,3 @@ * @fires opened
             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 });
         }
@@ -216,3 +227,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 });
         }
@@ -247,3 +258,3 @@ })
             if (value) {
-                this.mdcFoundation.setAnchorCorner(CornerEnum[value]);
+                this.mdcFoundation.setAnchorCorner(stringToCorner[value]);
             }
@@ -250,0 +261,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.c759cfbc.0",
+  "version": "0.14.0-canary.cbdfe453.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.c759cfbc.0",
-    "@material/mwc-list": "0.14.0-canary.c759cfbc.0",
+    "@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",
     "lit-element": "^2.2.1",
@@ -25,3 +25,3 @@ "lit-html": "^1.1.2",
   },
-  "gitHead": "e0a8ac49c085c004f390a2995879e67aea1010e7"
+  "gitHead": "473c76376428d49a6811e677bf7e1450ef90b5cb"
 }

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/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/menu/images/header.png" width="240px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/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/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/menu/images/basic.png" width="160px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/basic.png" width="160px">
 
@@ -66,3 +66,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/menu/images/activatable.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/activatable.png" width="152px">
 
@@ -83,3 +83,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/menu/images/multi.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/multi.png" width="152px">
 
@@ -100,3 +100,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/menu/images/absolute.png" width="155px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/absolute.png" width="155px">
 
@@ -122,3 +122,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/menu/images/fixed.png" width="154px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/menu/images/fixed.png" width="154px">
 
@@ -154,3 +154,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/menu/images/selection_group.png" width="170px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/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/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/menu/images/styled.png" width="234px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/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/e0a8ac49c085c004f390a2995879e67aea1010e7/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/473c76376428d49a6811e677bf7e1450ef90b5cb/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,9 @@ /**
 
-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 {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';
@@ -315,2 +315,18 @@
 
+  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) {
@@ -317,0 +333,0 @@ if (this.mdcFoundation) {

src/mwc-menu-surface-base.ts

@@ -24,3 +24,3 @@ /**
 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 +30,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,
+};
+
 /**
@@ -82,3 +94,4 @@ * @fires opened
       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});
     }
@@ -92,3 +105,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});
     }
@@ -120,6 +134,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 {
@@ -126,0 +140,0 @@ this.mdcFoundation.setAnchorCorner(CornerEnum.TOP_START);

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

Improved metrics

Total package byte prevSize

594942

increased by0.77%

Lines of code

1547

increased by3.27%

Number of lines in readme file

307

increased by0.33%

Dependency changes

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

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

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

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

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

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

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

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

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

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

• Updated@material/menu@=6.0.0-canary.3657f8863.0

• Updated@material/menu-surface@=6.0.0-canary.3657f8863.0

• Updated@material/[e-mail]453.0

• Updated@material/[e-mail]453.0