@material/mwc-menu - npm Package Compare versions

Comparing version 0.26.1 to 0.27.0

mwc-menu-base.d.ts

@@ -12,7 +12,7 @@ /**
 import { BaseElement } from '@material/mwc-base/base-element.js';
-import { List, MWCListIndex } from '@material/mwc-list/mwc-list.js';
 import { ActionDetail } from '@material/mwc-list/mwc-list-foundation.js';
 import { ListItemBase } from '@material/mwc-list/mwc-list-item-base.js';
+import { List, MWCListIndex } from '@material/mwc-list/mwc-list.js';
+import { Corner, MenuCorner } from './mwc-menu-surface-base.js';
 import { MenuSurface } from './mwc-menu-surface.js';
-import { Corner, MenuCorner } from './mwc-menu-surface-base.js';
 export { ActionDetail, createSetFromIndex, isEventMulti, isIndexSet, MWCListIndex, SelectedDetail } from '@material/mwc-list/mwc-list-foundation.js';
@@ -58,2 +58,11 @@ export { Corner, MenuCorner } from './mwc-menu-surface-base.js';
     render(): import("lit-html").TemplateResult<1>;
+    protected renderSurface(): import("lit-html").TemplateResult<1>;
+    protected getSurfaceClasses(): {
+        'mdc-menu': boolean;
+        'mdc-menu-surface': boolean;
+    };
+    protected renderList(): import("lit-html").TemplateResult<1>;
+    protected renderListClasses(): {
+        'mdc-deprecated-list': boolean;
+    };
     protected createAdapter(): MDCMenuAdapter;
@@ -60,0 +69,0 @@ protected onKeydown(evt: KeyboardEvent): void;

mwc-menu-base.js

@@ -17,2 +17,3 @@ /**
 import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 export { createSetFromIndex, isEventMulti, isIndexSet } from '@material/mwc-list/mwc-list-foundation.js';
@@ -80,22 +81,38 @@ /**
     render() {
+        return this.renderSurface();
+    }
+    renderSurface() {
+        const classes = this.getSurfaceClasses();
+        return html `
+      <mwc-menu-surface
+        ?hidden=${!this.open}
+        .anchor=${this.anchor}
+        .open=${this.open}
+        .quick=${this.quick}
+        .corner=${this.corner}
+        .x=${this.x}
+        .y=${this.y}
+        .absolute=${this.absolute}
+        .fixed=${this.fixed}
+        .fullwidth=${this.fullwidth}
+        .menuCorner=${this.menuCorner}
+        ?stayOpenOnBodyClick=${this.stayOpenOnBodyClick}
+        class=${classMap(classes)}
+        @closed=${this.onClosed}
+        @opened=${this.onOpened}
+        @keydown=${this.onKeydown}>
+      ${this.renderList()}
+    </mwc-menu-surface>`;
+    }
+    getSurfaceClasses() {
+        return {
+            'mdc-menu': true,
+            'mdc-menu-surface': true,
+        };
+    }
+    renderList() {
         const itemRoles = this.innerRole === 'menu' ? 'menuitem' : 'option';
+        const classes = this.renderListClasses();
         return html `
-      <mwc-menu-surface
-          ?hidden=${!this.open}
-          .anchor=${this.anchor}
-          .open=${this.open}
-          .quick=${this.quick}
-          .corner=${this.corner}
-          .x=${this.x}
-          .y=${this.y}
-          .absolute=${this.absolute}
-          .fixed=${this.fixed}
-          .fullwidth=${this.fullwidth}
-          .menuCorner=${this.menuCorner}
-          ?stayOpenOnBodyClick=${this.stayOpenOnBodyClick}
-          class="mdc-menu mdc-menu-surface"
-          @closed=${this.onClosed}
-          @opened=${this.onOpened}
-          @keydown=${this.onKeydown}>
-        <mwc-list
+      <mwc-list
           rootTabbable
@@ -105,3 +122,3 @@ .innerAriaLabel=${this.innerAriaLabel}
           .multi=${this.multi}
-          class="mdc-deprecated-list"
+          class=${classMap(classes)}
           .itemRoles=${itemRoles}
@@ -112,5 +129,9 @@ .wrapFocus=${this.wrapFocus}
         <slot></slot>
-      </mwc-list>
-    </mwc-menu-surface>`;
+      </mwc-list>`;
     }
+    renderListClasses() {
+        return {
+            'mdc-deprecated-list': true,
+        };
+    }
     createAdapter() {
@@ -117,0 +138,0 @@ return {

mwc-menu-surface-base.d.ts

@@ -47,2 +47,17 @@ /**
     render(): import("lit-html").TemplateResult<1>;
+    protected renderSurface(): import("lit-html").TemplateResult<1>;
+    protected getRootClasses(): {
+        'mdc-menu-surface': boolean;
+        'mdc-menu-surface--fixed': boolean;
+        'mdc-menu-surface--fullwidth': boolean;
+    };
+    protected getRootStyles(): {
+        top: string;
+        left: string;
+        right: string;
+        bottom: string;
+        'max-height': string;
+        'transform-origin': string;
+    };
+    protected renderContent(): import("lit-html").TemplateResult<1>;
     createAdapter(): MDCMenuSurfaceAdapter;
@@ -53,4 +68,5 @@ protected onKeydown(evt: KeyboardEvent): void;
     protected deregisterBodyClick(): void;
+    protected onOpenChanged(isOpen: boolean, wasOpen: boolean): void;
     close(): void;
     show(): void;
 }

mwc-menu-surface-base.js

@@ -62,7 +62,26 @@ /**
     render() {
-        const classes = {
+        return this.renderSurface();
+    }
+    renderSurface() {
+        const classes = this.getRootClasses();
+        const styles = this.getRootStyles();
+        return html `
+      <div
+          class=${classMap(classes)}
+          style="${styleMap(styles)}"
+          @keydown=${this.onKeydown}
+          @opened=${this.registerBodyClick}
+          @closed=${this.deregisterBodyClick}>
+        ${this.renderContent()}
+      </div>`;
+    }
+    getRootClasses() {
+        return {
+            'mdc-menu-surface': true,
             'mdc-menu-surface--fixed': this.fixed,
             'mdc-menu-surface--fullwidth': this.fullwidth,
         };
-        const styles = {
+    }
+    getRootStyles() {
+        return {
             'top': this.styleTop,
@@ -75,12 +94,6 @@ 'left': this.styleLeft,
         };
-        return html `
-      <div
-          class="mdc-menu-surface ${classMap(classes)}"
-          style="${styleMap(styles)}"
-          @keydown=${this.onKeydown}
-          @opened=${this.registerBodyClick}
-          @closed=${this.deregisterBodyClick}>
-        <slot></slot>
-      </div>`;
     }
+    renderContent() {
+        return html `<slot></slot>`;
+    }
     createAdapter() {
@@ -200,2 +213,13 @@ return Object.assign(Object.assign({}, addHasRemoveClass(this.mdcRoot)), { hasAnchor: () => {
     }
+    onOpenChanged(isOpen, wasOpen) {
+        if (this.mdcFoundation) {
+            if (isOpen) {
+                this.mdcFoundation.open();
+                // wasOpen helps with first render (when it is `undefined`) perf
+            }
+            else if (wasOpen !== undefined) {
+                this.mdcFoundation.close();
+            }
+        }
+    }
     close() {
@@ -262,11 +286,3 @@ this.open = false;
     observer(function (isOpen, wasOpen) {
-        if (this.mdcFoundation) {
-            if (isOpen) {
-                this.mdcFoundation.open();
-                // wasOpen helps with first render (when it is `undefined`) perf
-            }
-            else if (wasOpen !== undefined) {
-                this.mdcFoundation.close();
-            }
-        }
+        this.onOpenChanged(isOpen, wasOpen);
     })
@@ -273,0 +289,0 @@ ], MenuSurfaceBase.prototype, "open", void 0);

package.json

 {
   "name": "@material/mwc-menu",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "description": "Material Design menu web component",
@@ -16,4 +16,4 @@ "keywords": [
     "@material/menu-surface": "=14.0.0-canary.53b3cad2f.0",
-    "@material/mwc-base": "^0.26.1",
-    "@material/mwc-list": "^0.26.1",
+    "@material/mwc-base": "^0.27.0",
+    "@material/mwc-list": "^0.27.0",
     "@material/shape": "=14.0.0-canary.53b3cad2f.0",
@@ -38,3 +38,3 @@ "@material/theme": "=14.0.0-canary.53b3cad2f.0",
   },
-  "gitHead": "06b516b7f91867acd0cbe5676767aea8f490cbee"
+  "gitHead": "c1e876a15bc028034781984538ea803ba67dbed3"
 }

README.md

@@ -7,3 +7,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/06b516b7f91867acd0cbe5676767aea8f490cbee/packages/menu/images/header.png" width="240px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/menu/images/header.png" width="240px">
 
@@ -36,3 +36,3 @@ [Material Design Guidelines: menus](https://material.io/design/components/menus.html)
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/06b516b7f91867acd0cbe5676767aea8f490cbee/packages/menu/images/basic.png" width="160px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/menu/images/basic.png" width="160px">
 
@@ -66,3 +66,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/06b516b7f91867acd0cbe5676767aea8f490cbee/packages/menu/images/activatable.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/menu/images/activatable.png" width="152px">
 
@@ -83,3 +83,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/06b516b7f91867acd0cbe5676767aea8f490cbee/packages/menu/images/multi.png" width="152px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/menu/images/multi.png" width="152px">
 
@@ -100,3 +100,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/06b516b7f91867acd0cbe5676767aea8f490cbee/packages/menu/images/absolute.png" width="155px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/menu/images/absolute.png" width="155px">
 
@@ -122,3 +122,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/06b516b7f91867acd0cbe5676767aea8f490cbee/packages/menu/images/fixed.png" width="154px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/menu/images/fixed.png" width="154px">
 
@@ -154,3 +154,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/06b516b7f91867acd0cbe5676767aea8f490cbee/packages/menu/images/selection_group.png" width="170px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/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/06b516b7f91867acd0cbe5676767aea8f490cbee/packages/menu/images/styled.png" width="234px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/menu/images/styled.png" width="234px">
 
@@ -202,0 +202,0 @@ ```html

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

113446

increased by3.19%

Lines of code

996

increased by6.64%

Dependency changes

• + Added@material/mwc-base@0.27.0(transitive)

• + Added@material/mwc-checkbox@0.27.0(transitive)

• + Added@material/mwc-list@0.27.0(transitive)

• + Added@material/mwc-radio@0.27.0(transitive)

• + Added@material/mwc-ripple@0.27.0(transitive)

• - Removed@material/mwc-base@0.26.1(transitive)

• - Removed@material/mwc-checkbox@0.26.1(transitive)

• - Removed@material/mwc-list@0.26.1(transitive)

• - Removed@material/mwc-radio@0.26.1(transitive)

• - Removed@material/mwc-ripple@0.26.1(transitive)

• Updated@material/mwc-base@^0.27.0

• Updated@material/mwc-list@^0.27.0