@vaadin/vaadin-context-menu - npm Package Compare versions

Comparing version 4.3.0-alpha2 to 4.3.0-alpha3

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-context-menu",
-  "version": "4.3.0-alpha2",
+  "version": "4.3.0-alpha3",
   "main": "vaadin-context-menu.js",
@@ -27,2 +27,3 @@ "author": "Vaadin Ltd",
   "resolutions": {
+"@webcomponents/webcomponentsjs": "2.2.0",
     "inherits": "2.0.3",
@@ -47,3 +48,2 @@ "samsam": "1.1.3",
     "@polymer/iron-test-helpers": "^3.0.0",
-    "@polymer/test-fixture": "^4.0.0",
     "@vaadin/vaadin-button": "^2.1.0",
@@ -50,0 +50,0 @@ "@vaadin/vaadin-grid": "^5.2.0",

src/vaadin-context-menu.js

@@ -257,3 +257,3 @@ /**
   static get version() {
-    return '4.3.0-alpha2';
+    return '4.3.0-alpha3';
   }
@@ -260,0 +260,0 @@

src/vaadin-contextmenu-items-mixin.js

@@ -52,2 +52,12 @@ import '@vaadin/vaadin-item/src/vaadin-item.js';
        * @type {MenuItem[]}
+       *
+       *
+       * ### Styling
+       *
+       * The `<vaadin-item>` sub-menu elements have the following additional state attributes on top of
+       * the built-in `<vaadin-item>` state attributes (see `<vaadin-item>` documentation for full listing).
+       *
+       * Part name | Attribute | Description
+       * ----------------|----------------|----------------
+       * `:host` | expanded | Expanded parent item
        */
@@ -151,2 +161,3 @@ items: Array
         component.setAttribute('aria-expanded', 'false');
+        component.removeAttribute('expanded');
       }
@@ -185,5 +196,6 @@
         if (!e.detail.value) {
-          const expandedItem = listBox.querySelector('[aria-expanded="true"]');
+          const expandedItem = listBox.querySelector('[expanded]');
           if (expandedItem) {
             expandedItem.setAttribute('aria-expanded', 'false');
+            expandedItem.removeAttribute('expanded');
           }
@@ -208,2 +220,6 @@ }
 
+      subMenu.addEventListener('close-all-menus', () => {
+        menu.dispatchEvent(new CustomEvent('close-all-menus'));
+      });
+      menu.addEventListener('close-all-menus', menu.close);
       menu.addEventListener('item-selected', menu.close);
@@ -213,5 +229,7 @@ menu.$.overlay.$.backdrop.addEventListener('click', () => menu.close());
       menu.$.overlay.addEventListener('keydown', e => {
-        if (e.keyCode === 37 || e.keyCode === 27) {
+        if (e.keyCode === 37) {
           menu.close();
           menu.listenOn.focus();
+        } else if (e.keyCode === 27) {
+          menu.dispatchEvent(new CustomEvent('close-all-menus'));
         }
@@ -240,2 +258,3 @@ });
             itemElement.setAttribute('aria-expanded', 'true');
+            itemElement.setAttribute('expanded', '');
             this.__openSubMenu(subMenu, itemElement);
@@ -242,0 +261,0 @@ }

theme/lumo/vaadin-context-menu-styles.js

@@ -62,2 +62,6 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
       }
+
+      :host([expanded]) {
+        background-color: var(--lumo-primary-color-10pct);
+      }
     </style>
@@ -64,0 +68,0 @@ </template>

theme/material/vaadin-context-menu-styles.js

@@ -29,2 +29,6 @@ import '@vaadin/vaadin-material-styles/font-icons.js';
       }
+
+      :host([expanded]) {
+        background-color: var(--material-secondary-background-color);
+      }
     </style>
@@ -31,0 +35,0 @@ </template>

No alert changes

Improved metrics

Total package byte prevSize

56577

increased by1.89%

Dev dependency count

7

decreased by-12.5%

Lines of code

1101

increased by2.32%

No dependency changes