@vaadin/vaadin-context-menu 22.0.0-alpha6 → 22.0.0-beta1

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

@@ -1,4 +1,6 @@
-import './vaadin-context-menu-styles.js';
-import '@vaadin/vaadin-item/theme/lumo/vaadin-item.js';
-import '@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js';
-import '../../src/vaadin-context-menu.js';
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/context-menu/theme/lumo/vaadin-context-menu.js';

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

@@ -1,4 +1,6 @@
-import './vaadin-context-menu-styles.js';
-import '@vaadin/vaadin-item/theme/material/vaadin-item.js';
-import '@vaadin/vaadin-list-box/theme/material/vaadin-list-box.js';
-import '../../src/vaadin-context-menu.js';
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/context-menu/theme/material/vaadin-context-menu.js';

package/vaadin-context-menu.d.ts

@@ -1,2 +1 @@
 export * from './src/vaadin-context-menu.js';
-export * from './src/interfaces';

package/src/interfaces.d.ts

@@ -1,43 +0,0 @@
-import { ContextMenuElement } from '../src/vaadin-context-menu.js';
-
-export interface ContextMenuItem {
-  text?: string;
-  component?: string | HTMLElement;
-  disabled?: boolean;
-  checked?: boolean;
-  theme?: string | string[];
-  children?: ContextMenuItem[];
-}
-
-export interface ContextMenuRendererContext {
-  target: HTMLElement;
-  detail?: { sourceEvent: Event };
-}
-
-export type ContextMenuRenderer = (
-  root: HTMLElement,
-  contextMenu?: ContextMenuElement,
-  context?: ContextMenuRendererContext
-) => void;
-
-/**
- * Fired when the `opened` property changes.
- */
-export type ContextMenuOpenedChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired when an item is selected when the context menu is populated using the `items` API.
- */
-export type ContextMenuItemSelectedEvent = CustomEvent<{ value: ContextMenuItem }>;
-
-export interface ContextMenuElementEventMap {
-  'opened-changed': ContextMenuOpenedChangedEvent;
-
-  'item-selected': ContextMenuItemSelectedEvent;
-
-  'close-all-menus': Event;
-
-  'items-outside-click': Event;
-}
-
-export interface ContextMenuEventMap extends HTMLElementEventMap, ContextMenuElementEventMap {}

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

@@ -1,113 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
-
-registerStyles(
-  'vaadin-context-menu-overlay',
-  css`
-    :host {
-      align-items: flex-start;
-      justify-content: flex-start;
-    }
-
-    :host([right-aligned]),
-    :host([end-aligned]) {
-      align-items: flex-end;
-    }
-
-    :host([bottom-aligned]) {
-      justify-content: flex-end;
-    }
-
-    [part='overlay'] {
-      background-color: #fff;
-    }
-  `,
-  { moduleId: 'vaadin-context-menu-overlay-styles' }
-);
-
-/**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
- *
- * @extends OverlayElement
- * @protected
- */
-class ContextMenuOverlayElement extends OverlayElement {
-  static get is() {
-    return 'vaadin-context-menu-overlay';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * @protected
-       */
-      parentOverlay: {
-        type: Object,
-        readOnly: true
-      }
-    };
-  }
-
-  static get observers() {
-    return ['_themeChanged(theme)'];
-  }
-
-  ready() {
-    super.ready();
-
-    this.addEventListener('keydown', (e) => {
-      if (!e.defaultPrevented && e.composedPath()[0] === this.$.overlay && [38, 40].indexOf(e.keyCode) > -1) {
-        const child = this.getFirstChild();
-        if (child && Array.isArray(child.items) && child.items.length) {
-          e.preventDefault();
-          if (e.keyCode === 38) {
-            child.items[child.items.length - 1].focus();
-          } else {
-            child.focus();
-          }
-        }
-      }
-    });
-  }
-
-  getFirstChild() {
-    return this.content.querySelector(':not(style):not(slot)');
-  }
-
-  _themeChanged() {
-    this.close();
-  }
-
-  getBoundaries() {
-    // Measure actual overlay and content sizes
-    const overlayRect = this.getBoundingClientRect();
-    const contentRect = this.$.overlay.getBoundingClientRect();
-
-    // Maximum x and y values are imposed by content size and overlay limits.
-    let yMax = overlayRect.bottom - contentRect.height;
-
-    // Adjust constraints to ensure bottom-aligned applies to sub-menu.
-    const parent = this.parentOverlay;
-    if (parent && parent.hasAttribute('bottom-aligned')) {
-      const parentStyle = getComputedStyle(parent);
-      yMax = yMax - parseFloat(parentStyle.bottom) - parseFloat(parentStyle.height);
-    }
-
-    return {
-      xMax: overlayRect.right - contentRect.width,
-      xMin: overlayRect.left + contentRect.width,
-      yMax,
-      left: overlayRect.left,
-      right: overlayRect.right,
-      top: overlayRect.top,
-      width: contentRect.width
-    };
-  }
-}
-
-customElements.define(ContextMenuOverlayElement.is, ContextMenuOverlayElement);

package/src/vaadin-contextmenu-event.js

@@ -1,103 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { register, prevent } from '@polymer/polymer/lib/utils/gestures.js';
-
-register({
-  name: 'vaadin-contextmenu',
-  deps: ['touchstart', 'touchmove', 'touchend', 'contextmenu'],
-  flow: {
-    start: ['touchstart', 'contextmenu'],
-    end: ['contextmenu']
-  },
-
-  emits: ['vaadin-contextmenu'],
-
-  info: {
-    sourceEvent: null,
-    _ios:
-      (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) ||
-      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
-  },
-
-  reset: function () {
-    this.info.sourceEvent = null;
-    this._cancelTimer();
-    this.info.touchJob = null;
-    this.info.touchStartCoords = null;
-  },
-
-  _cancelTimer: function () {
-    if (this._timerId) {
-      clearTimeout(this._timerId);
-      delete this._fired;
-    }
-  },
-
-  touchstart: function (e) {
-    this.info.sourceEvent = e;
-    this.info.touchStartCoords = {
-      x: e.changedTouches[0].clientX,
-      y: e.changedTouches[0].clientY
-    };
-
-    // After timeout event is already retargeted to the parent element in case there is one.
-    // So we are assigning the target synchronously on event dispatched.
-    const t = e.composedPath()[0] || e.target;
-
-    this._timerId = setTimeout(() => {
-      const ct = e.changedTouches[0];
-      if (!e.shiftKey) {
-        if (this.info._ios) {
-          this._fired = true;
-          this.fire(t, ct.clientX, ct.clientY);
-        }
-
-        // 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.
-  },
-
-  touchmove: function (e) {
-    const moveThreshold = 15;
-    const touchStartCoords = this.info.touchStartCoords;
-    if (
-      Math.abs(touchStartCoords.x - e.changedTouches[0].clientX) > moveThreshold ||
-      Math.abs(touchStartCoords.y - e.changedTouches[0].clientY) > moveThreshold
-    ) {
-      this._cancelTimer();
-    }
-  },
-
-  touchend: function (e) {
-    if (this._fired) {
-      e.preventDefault();
-    }
-    this._cancelTimer();
-  },
-
-  contextmenu: function (e) {
-    if (!e.shiftKey) {
-      this.info.sourceEvent = e;
-      this.fire(e.target, e.clientX, e.clientY);
-      prevent('tap');
-    }
-  },
-
-  fire: function (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
-    if (ev.defaultPrevented && sourceEvent && sourceEvent.preventDefault) {
-      sourceEvent.preventDefault();
-    }
-  }
-});

package/src/vaadin-contextmenu-items-mixin.d.ts

@@ -1,74 +0,0 @@
-import { ItemElement } from '@vaadin/vaadin-item/src/vaadin-item.js';
-
-import { ListBoxElement } from '@vaadin/vaadin-list-box/src/vaadin-list-box.js';
-
-import { ContextMenuElement } from './vaadin-context-menu.js';
-
-import { ContextMenuItem, ContextMenuRendererContext } from './interfaces';
-
-/**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
- *
- * @protected
- */
-declare class ContextMenuItemElement extends ItemElement {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-context-menu-item': ContextMenuItemElement;
-    'vaadin-context-menu-list-box': ContextMenuListBoxElement;
-  }
-}
-
-/**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
- *
- * @protected
- */
-declare class ContextMenuListBoxElement extends ListBoxElement {}
-
-declare function ItemsMixin<T extends new (...args: any[]) => {}>(base: T): T & ItemsMixinConstructor;
-
-interface ItemsMixinConstructor {
-  new (...args: any[]): ItemsMixin;
-}
-
-interface ItemsMixin {
-  readonly __isRTL: boolean;
-
-  /**
-   * Defines a (hierarchical) menu structure for the component.
-   * If a menu item has a non-empty `children` set, a sub-menu with the child items is opened
-   * next to the parent menu on mouseover, tap or a right arrow keypress.
-   *
-   * The items API can't be used together with a renderer!
-   *
-   * #### Example
-   *
-   * ```javascript
-   * contextMenu.items = [
-   *   {text: 'Menu Item 1', theme: 'primary', children:
-   *     [
-   *       {text: 'Menu Item 1-1', checked: true},
-   *       {text: 'Menu Item 1-2'}
-   *     ]
-   *   },
-   *   {component: 'hr'},
-   *   {text: 'Menu Item 2', children:
-   *     [
-   *       {text: 'Menu Item 2-1'},
-   *       {text: 'Menu Item 2-2', disabled: true}
-   *     ]
-   *   },
-   *   {text: 'Menu Item 3', disabled: true}
-   * ];
-   * ```
-   */
-  items: ContextMenuItem[] | undefined;
-
-  __forwardFocus(): void;
-
-  __itemsRenderer(root: HTMLElement, menu: ContextMenuElement, context: ContextMenuRendererContext): void;
-}
-
-export { ItemsMixin, ItemsMixinConstructor };