@vaadin/context-menu 23.1.0-alpha3 → 23.1.0-beta2

package/lit.d.ts

@@ -0,0 +1 @@
+export * from './src/lit/renderer-directives.js';

package/lit.js

@@ -0,0 +1 @@
+export * from './src/lit/renderer-directives.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/context-menu",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -22,6 +22,8 @@
   "files": [
     "src",
     "theme",
+    "lit.js",
+    "lit.d.ts",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -35,19 +37,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/item": "23.1.0-alpha3",
-    "@vaadin/list-box": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-overlay": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/item": "23.1.0-beta2",
+    "@vaadin/list-box": "23.1.0-beta2",
+    "@vaadin/lit-renderer": "23.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-overlay": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha3",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta2",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

package/src/lit/renderer-directives.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import { ContextMenu, ContextMenuRendererContext } from '../vaadin-context-menu.js';
+
+export type ContextMenuLitRenderer = (context: ContextMenuRendererContext, menu: ContextMenu) => TemplateResult;
+
+export class ContextMenuRendererDirective extends LitRendererDirective<ContextMenu, ContextMenuLitRenderer> {
+  /**
+   * Adds the renderer callback to the context-menu.
+   */
+  addRenderer(): void;
+
+  /**
+   * Runs the renderer callback on the context-menu.
+   */
+  runRenderer(): void;
+
+  /**
+   * Removes the renderer callback from the context-menu.
+   */
+  removeRenderer(): void;
+}
+
+/**
+ * A Lit directive for populating the content of the context-menu.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the context-menu
+ * via the `renderer` property. The renderer is called once to populate the content when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-context-menu
+ *   ${contextMenuRenderer((context, menu) => html`...`)}
+ * ></vaadin-context-menu>`
+ * ```
+ *
+ * @param renderer the renderer callback that returns a Lit template.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function contextMenuRenderer(
+  renderer: ContextMenuLitRenderer,
+  dependencies?: unknown,
+): DirectiveResult<typeof ContextMenuRendererDirective>;

package/src/lit/renderer-directives.js

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { directive } from 'lit/directive.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+
+export class ContextMenuRendererDirective extends LitRendererDirective {
+  /**
+   * Adds the renderer callback to the context-menu.
+   */
+  addRenderer() {
+    this.element.renderer = (root, contextMenu, context) => {
+      this.renderRenderer(root, context, contextMenu);
+    };
+  }
+
+  /**
+   * Runs the renderer callback on the context-menu.
+   */
+  runRenderer() {
+    this.element.requestContentUpdate();
+  }
+
+  /**
+   * Removes the renderer callback from the context-menu.
+   */
+  removeRenderer() {
+    this.element.renderer = null;
+  }
+}
+
+/**
+ * A Lit directive for populating the content of the context-menu.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the context-menu
+ * via the `renderer` property. The renderer is called once to populate the content when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-context-menu
+ *   ${contextMenuRenderer((context, menu) => html`...`)}
+ * ></vaadin-context-menu>`
+ * ```
+ *
+ * @param renderer the renderer callback that returns a Lit template.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const contextMenuRenderer = directive(ContextMenuRendererDirective);

package/src/vaadin-context-menu-overlay.js

@@ -28,7 +28,7 @@ registerStyles(
       background-color: #fff;
     }
   `,
-  { moduleId: 'vaadin-context-menu-overlay-styles' }
+  { moduleId: 'vaadin-context-menu-overlay-styles' },
 );
 
 /**
@@ -49,8 +49,8 @@ class ContextMenuOverlay extends PositionMixin(OverlayElement) {
        */
       parentOverlay: {
         type: Object,
-        readOnly: true
-      }
+        readOnly: true,
+      },
     };
   }
 
@@ -102,7 +102,7 @@ class ContextMenuOverlay extends PositionMixin(OverlayElement) {
     return {
       xMax: overlayRect.right - contentRect.width,
       xMin: overlayRect.left + contentRect.width,
-      yMax
+      yMax,
     };
   }
 
@@ -118,17 +118,17 @@ class ContextMenuOverlay extends PositionMixin(OverlayElement) {
       // Horizontal adjustment
       const isLeftAligned = !!this.style.left;
       if (isLeftAligned) {
-        this.style.left = parseFloat(this.style.left) + parseFloat(style.paddingLeft) + 'px';
+        this.style.left = `${parseFloat(this.style.left) + parseFloat(style.paddingLeft)}px`;
       } else {
-        this.style.right = parseFloat(this.style.right) + parseFloat(style.paddingRight) + 'px';
+        this.style.right = `${parseFloat(this.style.right) + parseFloat(style.paddingRight)}px`;
       }
 
       // Vertical adjustment
       const isBottomAligned = !!this.style.bottom;
       if (isBottomAligned) {
-        this.style.bottom = parseFloat(this.style.bottom) - parseFloat(style.paddingBottom) + 'px';
+        this.style.bottom = `${parseFloat(this.style.bottom) - parseFloat(style.paddingBottom)}px`;
       } else {
-        this.style.top = parseFloat(this.style.top) - parseFloat(style.paddingTop) + 'px';
+        this.style.top = `${parseFloat(this.style.top) - parseFloat(style.paddingTop)}px`;
       }
     }
   }

package/src/vaadin-context-menu.d.ts

@@ -17,7 +17,7 @@ export interface ContextMenuRendererContext {
 export type ContextMenuRenderer = (
   root: HTMLElement,
   contextMenu?: ContextMenu,
-  context?: ContextMenuRendererContext
+  context?: ContextMenuRendererContext,
 ) => void;
 
 /**
@@ -289,13 +289,13 @@ declare class ContextMenu extends ElementMixin(ThemePropertyMixin(ItemsMixin(HTM
   addEventListener<K extends keyof ContextMenuEventMap>(
     type: K,
     listener: (this: ContextMenu, ev: ContextMenuEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof ContextMenuEventMap>(
     type: K,
     listener: (this: ContextMenu, ev: ContextMenuEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-context-menu.js

@@ -241,7 +241,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
        * of the context menu to listen for `openOn` events.
        */
       selector: {
-        type: String
+        type: String,
       },
 
       /**
@@ -252,7 +252,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
         type: Boolean,
         value: false,
         notify: true,
-        readOnly: true
+        readOnly: true,
       },
 
       /**
@@ -262,7 +262,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
        */
       openOn: {
         type: String,
-        value: 'vaadin-contextmenu'
+        value: 'vaadin-contextmenu',
       },
 
       /**
@@ -274,9 +274,9 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
        */
       listenOn: {
         type: Object,
-        value: function () {
+        value() {
           return this;
-        }
+        },
       },
 
       /**
@@ -287,7 +287,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
       closeOn: {
         type: String,
         value: 'click',
-        observer: '_closeOnChanged'
+        observer: '_closeOnChanged',
       },
 
       /**
@@ -302,7 +302,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
        * @type {ContextMenuRenderer | undefined}
        */
       renderer: {
-        type: Function
+        type: Function,
       },
 
       /** @private */
@@ -316,25 +316,25 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
 
       /** @private */
       _phone: {
-        type: Boolean
+        type: Boolean,
       },
 
       /** @private */
       _touch: {
         type: Boolean,
-        value: isTouch
+        value: isTouch,
       },
 
       /** @private */
       _wide: {
-        type: Boolean
+        type: Boolean,
       },
 
       /** @private */
       _wideMediaQuery: {
         type: String,
-        value: '(min-device-width: 750px)'
-      }
+        value: '(min-device-width: 750px)',
+      },
     };
   }
 
@@ -343,7 +343,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
       '_openedChanged(opened)',
       '_targetOrOpenOnChanged(listenOn, openOn)',
       '_rendererChanged(renderer, items)',
-      '_touchOrWideChanged(_touch, _wide)'
+      '_touchOrWideChanged(_touch, _wide)',
     ];
   }
 
@@ -377,7 +377,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
     this.addController(
       new MediaQueryController(this._wideMediaQuery, (matches) => {
         this._wide = matches;
-      })
+      }),
     );
 
     processTemplates(this);
@@ -430,12 +430,12 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
 
   /** @private */
   _setListenOnUserSelect(value) {
-    // note: these styles don't seem to work in Firefox on iOS.
+    // Note: these styles don't seem to work in Firefox on iOS.
     this.listenOn.style.webkitTouchCallout = value;
     this.listenOn.style.webkitUserSelect = value; // Chrome, Safari, Firefox
     this.listenOn.style.userSelect = value;
 
-    // note: because user-selection is disabled on the overlay
+    // Note: because user-selection is disabled on the overlay
     // before opening the menu the text could be already selected
     // so we need to clear that selection
     document.getSelection().removeAllRanges();
@@ -535,7 +535,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
     if (e && !this.opened) {
       this._context = {
         detail: e.detail,
-        target: this._contextTarget(e)
+        target: this._contextTarget(e),
       };
 
       if (this._context.target) {
@@ -579,7 +579,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
     const overlay = this.$.overlay;
     const style = overlay.style;
 
-    style[coord] = (parseInt(style[coord]) || 0) + diff + 'px';
+    style[coord] = `${(parseInt(style[coord]) || 0) + diff}px`;
   }
 
   /** @private */
@@ -618,25 +618,25 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
     if (!this.__isRTL) {
       if (x < wdthVport / 2 || x < xMax) {
         // Menu is displayed in the right side of the anchor
-        style.left = x + 'px';
+        style.left = `${x}px`;
       } else {
         // Menu is displayed in the left side of the anchor
-        style.right = Math.max(0, wdthVport - x) + 'px';
+        style.right = `${Math.max(0, wdthVport - x)}px`;
         this._setEndAligned(overlay);
       }
     } else if (x > wdthVport / 2 || x > xMin) {
       // Menu is displayed in the right side of the anchor
-      style.right = Math.max(0, wdthVport - x) + 'px';
+      style.right = `${Math.max(0, wdthVport - x)}px`;
     } else {
       // Menu is displayed in the left side of the anchor
-      style.left = x + 'px';
+      style.left = `${x}px`;
       this._setEndAligned(overlay);
     }
 
     if (y < hghtVport / 2 || y < yMax) {
-      style.top = y + 'px';
+      style.top = `${y}px`;
     } else {
-      style.bottom = Math.max(0, hghtVport - y) + 'px';
+      style.bottom = `${Math.max(0, hghtVport - y)}px`;
       overlay.setAttribute('bottom-aligned', '');
     }
   }
@@ -660,7 +660,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
         return this._getEventCoordinate(event.detail.sourceEvent, coord);
       }
     } else {
-      const prop = 'client' + coord.toUpperCase();
+      const prop = `client${coord.toUpperCase()}`;
       const position = event.changedTouches ? event.changedTouches[0][prop] : event[prop];
 
       if (position === 0) {

package/src/vaadin-contextmenu-event.js

@@ -11,34 +11,34 @@ register({
   deps: ['touchstart', 'touchmove', 'touchend', 'contextmenu'],
   flow: {
     start: ['touchstart', 'contextmenu'],
-    end: ['contextmenu']
+    end: ['contextmenu'],
   },
 
   emits: ['vaadin-contextmenu'],
 
   info: {
-    sourceEvent: null
+    sourceEvent: null,
   },
 
-  reset: function () {
+  reset() {
     this.info.sourceEvent = null;
     this._cancelTimer();
     this.info.touchJob = null;
     this.info.touchStartCoords = null;
   },
 
-  _cancelTimer: function () {
+  _cancelTimer() {
     if (this._timerId) {
       clearTimeout(this._timerId);
       delete this._fired;
     }
   },
 
-  touchstart: function (e) {
+  touchstart(e) {
     this.info.sourceEvent = e;
     this.info.touchStartCoords = {
       x: e.changedTouches[0].clientX,
-      y: e.changedTouches[0].clientY
+      y: e.changedTouches[0].clientY,
     };
 
     // After timeout event is already retargeted to the parent element in case there is one.
@@ -53,14 +53,14 @@ register({
           this.fire(t, ct.clientX, ct.clientY);
         }
 
-        // needed to prevent any 'tap' gesture events from firing
+        // Needed to prevent any 'tap' gesture events from firing
         // which could potentially cancel/close the overlay.
         prevent('tap');
       }
-    }, 500); // default setting for Android and iOS.
+    }, 500); // Default setting for Android and iOS.
   },
 
-  touchmove: function (e) {
+  touchmove(e) {
     const moveThreshold = 15;
     const touchStartCoords = this.info.touchStartCoords;
     if (
@@ -71,14 +71,14 @@ register({
     }
   },
 
-  touchend: function (e) {
+  touchend(e) {
     if (this._fired) {
       e.preventDefault();
     }
     this._cancelTimer();
   },
 
-  contextmenu: function (e) {
+  contextmenu(e) {
     if (!e.shiftKey) {
       this.info.sourceEvent = e;
       this.fire(e.target, e.clientX, e.clientY);
@@ -86,16 +86,16 @@ register({
     }
   },
 
-  fire: function (target, x, y) {
+  fire(target, x, y) {
     // NOTE(web-padawan): the code below is copied from `Polymer.Gestures._fire`,
     // which is not exported from `gestures.js` module for Polymer 3.
     const sourceEvent = this.info.sourceEvent;
     const ev = new Event('vaadin-contextmenu', { bubbles: true, cancelable: true, composed: true });
     ev.detail = { x, y, sourceEvent };
     target.dispatchEvent(ev);
-    // forward `preventDefault` in a clean way
+    // Forward `preventDefault` in a clean way
     if (ev.defaultPrevented && sourceEvent && sourceEvent.preventDefault) {
       sourceEvent.preventDefault();
     }
-  }
+  },
 });

package/src/vaadin-contextmenu-items-mixin.js

@@ -95,7 +95,7 @@ export const ItemsMixin = (superClass) =>
          * ----------------|----------------|----------------
          * `:host` | expanded | Expanded parent item
          */
-        items: Array
+        items: Array,
       };
     }
 
@@ -139,7 +139,7 @@ export const ItemsMixin = (superClass) =>
     __forwardFocus() {
       const overlay = this.$.overlay;
       const child = overlay.getFirstChild();
-      // if parent item is not focused, do not focus submenu
+      // If parent item is not focused, do not focus submenu
       if (overlay.parentOverlay) {
         const parent = overlay.parentOverlay.querySelector('[expanded]');
         if (parent && parent.hasAttribute('focused') && child) {
@@ -178,9 +178,9 @@ export const ItemsMixin = (superClass) =>
       itemElement.dispatchEvent(
         new CustomEvent('opensubmenu', {
           detail: {
-            children: itemElement._item.children
-          }
-        })
+            children: itemElement._item.children,
+          },
+        }),
       );
     }
 
@@ -263,10 +263,10 @@ export const ItemsMixin = (superClass) =>
     __toggleMenuComponentAttribute(component, attribute, on) {
       if (on) {
         component.setAttribute(attribute, '');
-        component['__has-' + attribute] = true;
-      } else if (component['__has-' + attribute]) {
+        component[`__has-${attribute}`] = true;
+      } else if (component[`__has-${attribute}`]) {
         component.removeAttribute(attribute);
-        component['__has-' + attribute] = false;
+        component[`__has-${attribute}`] = false;
       }
     }
 
@@ -280,7 +280,9 @@ export const ItemsMixin = (superClass) =>
       `;
         flush();
         const listBox = root.querySelector('vaadin-context-menu-list-box');
-        this._theme && listBox.setAttribute('theme', this._theme);
+        if (this._theme) {
+          listBox.setAttribute('theme', this._theme);
+        }
         listBox.classList.add('vaadin-menu-list-box');
         requestAnimationFrame(() => listBox.setAttribute('role', 'menu'));
 
@@ -334,7 +336,7 @@ export const ItemsMixin = (superClass) =>
         requestAnimationFrame(() => (this.__openListenerActive = true));
         const openSubMenu = (
           e,
-          itemElement = e.composedPath().filter((e) => e.localName === 'vaadin-context-menu-item')[0]
+          itemElement = e.composedPath().filter((e) => e.localName === 'vaadin-context-menu-item')[0],
         ) => {
           // Delay enabling the mouseover listener to avoid it from triggering on parent menu open
           if (!this.__openListenerActive) {
@@ -373,7 +375,9 @@ export const ItemsMixin = (superClass) =>
           const shouldOpenSubMenu =
             (!isRTL && e.keyCode === 39) || (isRTL && e.keyCode === 37) || e.keyCode === 13 || e.keyCode === 32;
 
-          shouldOpenSubMenu && openSubMenu(e);
+          if (shouldOpenSubMenu) {
+            openSubMenu(e);
+          }
         });
       } else {
         const listBox = root.querySelector('vaadin-context-menu-list-box');

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

@@ -31,7 +31,7 @@ const contextMenuOverlay = css`
 `;
 
 registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
-  moduleId: 'lumo-context-menu-overlay'
+  moduleId: 'lumo-context-menu-overlay',
 });
 
 registerStyles(
@@ -84,7 +84,7 @@ registerStyles(
       }
     }
   `,
-  { moduleId: 'lumo-context-menu-list-box' }
+  { moduleId: 'lumo-context-menu-list-box' },
 );
 
 registerStyles(
@@ -124,5 +124,5 @@ registerStyles(
       padding-right: var(--lumo-space-m);
     }
   `,
-  { moduleId: 'lumo-context-menu-item' }
+  { moduleId: 'lumo-context-menu-item' },
 );

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

@@ -12,7 +12,7 @@ const contextMenuOverlay = css`
 `;
 
 registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
-  moduleId: 'material-context-menu-overlay'
+  moduleId: 'material-context-menu-overlay',
 });
 
 registerStyles(
@@ -44,7 +44,7 @@ registerStyles(
       }
     }
   `,
-  { moduleId: 'material-context-menu-list-box' }
+  { moduleId: 'material-context-menu-list-box' },
 );
 
 registerStyles(
@@ -79,5 +79,5 @@ registerStyles(
       background-color: var(--material-secondary-background-color);
     }
   `,
-  { moduleId: 'material-context-menu-item' }
+  { moduleId: 'material-context-menu-item' },
 );