@vaadin/popover 25.0.0-alpha2 → 25.0.0-alpha20

package/src/vaadin-popover.js

@@ -14,10 +14,9 @@ import {
 } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
-import { isLastOverlay } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
+import { isLastOverlay as isLastOverlayBase } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { PopoverPositionMixin } from './vaadin-popover-position-mixin.js';
 import { PopoverTargetMixin } from './vaadin-popover-target-mixin.js';
@@ -148,6 +147,18 @@ class PopoverOpenedStateController {
   }
 }
 
+/**
+ * Returns true if the popover overlay is the last one in the opened overlays stack, ignoring tooltips.
+ * @param {HTMLElement} overlay
+ * @return {boolean}
+ * @protected
+ */
+const isLastOverlay = (overlay) => {
+  // Ignore tooltips, popovers should still close when a tooltip is present
+  const filter = (o) => o.localName !== 'vaadin-tooltip-overlay';
+  return isLastOverlayBase(overlay, filter);
+};
+
 /**
  * `<vaadin-popover>` is a Web Component for creating overlays
  * that are positioned next to specified DOM element (target).
@@ -157,16 +168,13 @@ class PopoverOpenedStateController {
  *
  * ### Styling
  *
- * `<vaadin-popover>` uses `<vaadin-popover-overlay>` internal
- * themable component as the actual visible overlay.
- *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
- * for `<vaadin-popover-overlay>` parts.
- *
- * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  * `arrow`          | Optional arrow pointing to the target when using `theme="arrow"`
  *
  * The following state attributes are available for styling:
@@ -175,9 +183,6 @@ class PopoverOpenedStateController {
  * -----------------|----------------------------------------
  * `position`       | Reflects the `position` property value.
  *
- * Note: the `theme` attribute value set on `<vaadin-popover>` is
- * propagated to the internal `<vaadin-popover-overlay>` component.
- *
  * ### Custom CSS Properties
  *
  * The following custom CSS properties are available on the `<vaadin-popover>` element:
@@ -197,13 +202,12 @@ class PopoverOpenedStateController {
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
- * @mixes OverlayClassMixin
  * @mixes PopoverPositionMixin
  * @mixes PopoverTargetMixin
  * @mixes ThemePropertyMixin
  */
 class Popover extends PopoverPositionMixin(
-  PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement))))),
+  PopoverTargetMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement)))),
 ) {
   static get is() {
     return 'vaadin-popover';
@@ -211,27 +215,42 @@ class Popover extends PopoverPositionMixin(
 
   static get styles() {
     return css`
-      :host {
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: block !important;
+        position: absolute;
+        outline: none;
+      }
+
+      :host,
+      :host([hidden]) {
         display: none !important;
       }
+
+      :host(:focus-visible) ::part(overlay) {
+        outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+      }
     `;
   }
 
   static get properties() {
     return {
       /**
-       * String used to label the overlay to screen reader users.
+       * String used to label the popover to screen reader users.
        *
        * @attr {string} accessible-name
+       * @deprecated Use `aria-label` attribute on the popover instead
        */
       accessibleName: {
         type: String,
       },
 
       /**
-       * Id of the element used as label of the overlay to screen reader users.
+       * Id of the element used as label of the popover to screen reader users.
        *
        * @attr {string} accessible-name-ref
+       * @deprecated Use `aria-labelledby` attribute on the popover instead
        */
       accessibleNameRef: {
         type: String,
@@ -246,20 +265,18 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Height to be set on the overlay content.
-       *
-       * @attr {string} content-height
+       * Set the height of the popover.
+       * If a unitless number is provided, pixels are assumed.
        */
-      contentHeight: {
+      height: {
         type: String,
       },
 
       /**
-       * Width to be set on the overlay content.
-       *
-       * @attr {string} content-width
+       * Set the width of the popover.
+       * If a unitless number is provided, pixels are assumed.
        */
-      contentWidth: {
+      width: {
         type: String,
       },
 
@@ -301,31 +318,43 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * True if the popover overlay is opened, false otherwise.
+       * True if the popover is visible and available for interaction.
        */
       opened: {
         type: Boolean,
         value: false,
         notify: true,
+        reflectToAttribute: true,
         observer: '__openedChanged',
       },
 
       /**
-       * The `role` attribute value to be set on the overlay.
+       * The `role` attribute value to be set on the popover.
+       * When not specified, defaults to 'dialog'.
+       */
+      role: {
+        type: String,
+        reflectToAttribute: true,
+      },
+
+      /**
+       * The `role` attribute value to be set on the popover.
        *
        * @attr {string} overlay-role
+       * @deprecated Use standard `role` attribute on the popover instead
        */
       overlayRole: {
         type: String,
-        value: 'dialog',
       },
 
       /**
-       * Custom function for rendering the content of the overlay.
+       * Custom function for rendering the content of the popover.
        * Receives two arguments:
        *
        * - `root` The root container DOM element. Append your content to it.
-       * - `popover` The reference to the `vaadin-popover` element (overlay host).
+       * - `popover` The reference to the `vaadin-popover` element.
+       *
+       * @deprecated Use the content in the `vaadin-popover` via default slot
        */
       renderer: {
         type: Object,
@@ -334,7 +363,7 @@ class Popover extends PopoverPositionMixin(
       /**
        * When true, the popover prevents interacting with background elements
        * by setting `pointer-events` style on the document body to `none`.
-       * This also enables trapping focus inside the overlay.
+       * This also enables trapping focus inside the popover.
        */
       modal: {
         type: Boolean,
@@ -342,7 +371,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Set to true to disable closing popover overlay on outside click.
+       * Set to true to disable closing popover on outside click.
        *
        * @attr {boolean} no-close-on-outside-click
        */
@@ -352,10 +381,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Set to true to disable closing popover overlay on Escape press.
-       * When the popover is modal, pressing Escape anywhere in the
-       * document closes the overlay. Otherwise, only Escape press
-       * from the popover itself or its target closes the overlay.
+       * Set to true to disable closing popover on Escape press.
        *
        * @attr {boolean} no-close-on-esc
        */
@@ -365,15 +391,15 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * Popover trigger mode, used to configure how the overlay is opened or closed.
+       * Popover trigger mode, used to configure how the popover is opened or closed.
        * Could be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.
        *
        * Supported values:
        * - `click` (default) - opens and closes on target click.
        * - `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse
-       * to the popover overlay content keeps the overlay opened.
+       * to the popover content keeps the popover opened.
        * - `focus` - opens on target focus, closes on target blur. Moving focus to the
-       * popover overlay content keeps the overlay opened.
+       * popover content keeps the popover opened.
        *
        * In addition to the behavior specified by `trigger`, the popover can be closed by:
        * - pressing Escape key (unless `noCloseOnEsc` property is true)
@@ -389,7 +415,7 @@ class Popover extends PopoverPositionMixin(
       },
 
       /**
-       * When true, the overlay has a backdrop (modality curtain) on top of the
+       * When true, the popover has a backdrop (modality curtain) on top of the
        * underlying page content, covering the whole viewport.
        *
        * @attr {boolean} with-backdrop
@@ -405,20 +431,11 @@ class Popover extends PopoverPositionMixin(
         value: false,
         sync: true,
       },
-
-      /** @private */
-      __overlayId: {
-        type: String,
-      },
     };
   }
 
   static get observers() {
-    return [
-      '__updateContentHeight(contentHeight, _overlayElement)',
-      '__updateContentWidth(contentWidth, _overlayElement)',
-      '__updateAriaAttributes(opened, overlayRole, target)',
-    ];
+    return ['__updateAriaAttributes(opened, role, target)'];
   }
 
   /**
@@ -454,9 +471,8 @@ class Popover extends PopoverPositionMixin(
   constructor() {
     super();
 
-    this.__overlayId = `vaadin-popover-${generateUniqueId()}`;
+    this.__generatedId = `vaadin-popover-${generateUniqueId()}`;
 
-    this.__onGlobalClick = this.__onGlobalClick.bind(this);
     this.__onGlobalKeyDown = this.__onGlobalKeyDown.bind(this);
     this.__onTargetClick = this.__onTargetClick.bind(this);
     this.__onTargetFocusIn = this.__onTargetFocusIn.bind(this);
@@ -473,10 +489,7 @@ class Popover extends PopoverPositionMixin(
 
     return html`
       <vaadin-popover-overlay
-        id="${this.__overlayId}"
-        role="${this.overlayRole}"
-        aria-label="${ifDefined(this.accessibleName)}"
-        aria-labelledby="${ifDefined(this.accessibleNameRef)}"
+        id="overlay"
         .renderer="${this.renderer}"
         .owner="${this}"
         theme="${ifDefined(this._theme)}"
@@ -498,11 +511,14 @@ class Popover extends PopoverPositionMixin(
         @opened-changed="${this.__onOpenedChanged}"
         .restoreFocusOnClose="${this.__shouldRestoreFocus}"
         .restoreFocusNode="${this.target}"
+        exportparts="backdrop, overlay, content, arrow"
         @vaadin-overlay-escape-press="${this.__onEscapePress}"
         @vaadin-overlay-outside-click="${this.__onOutsideClick}"
         @vaadin-overlay-open="${this.__onOverlayOpened}"
         @vaadin-overlay-closed="${this.__onOverlayClosed}"
-      ></vaadin-popover-overlay>
+      >
+        <slot></slot>
+      </vaadin-popover-overlay>
     `;
   }
 
@@ -511,6 +527,8 @@ class Popover extends PopoverPositionMixin(
    * While performing the update, it invokes the renderer passed in the `renderer` property.
    *
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   *
+   * @deprecated Add content elements as children of the popover using default slot
    */
   requestContentUpdate() {
     if (!this.renderer || !this._overlayElement) {
@@ -524,22 +542,80 @@ class Popover extends PopoverPositionMixin(
   ready() {
     super.ready();
 
-    this._overlayElement = this.$[this.__overlayId];
+    this._overlayElement = this.$.overlay;
+
+    this.setAttribute('tabindex', '0');
+
+    this.addEventListener('focusin', (e) => {
+      this.__onFocusIn(e);
+    });
+
+    this.addEventListener('focusout', (e) => {
+      this.__onFocusOut(e);
+    });
+
+    if (!this.hasAttribute('role')) {
+      this.role = 'dialog';
+    }
+  }
+
+  /** @protected */
+  willUpdate(props) {
+    super.willUpdate(props);
+
+    if (props.has('overlayRole')) {
+      this.role = this.overlayRole;
+    }
+  }
+
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('width') || props.has('height')) {
+      const { width, height } = this;
+      requestAnimationFrame(() => this.$.overlay.setBounds({ width, height }, false));
+    }
+
+    if (props.has('accessibleName')) {
+      if (this.accessibleName) {
+        this.setAttribute('aria-label', this.accessibleName);
+      } else {
+        this.removeAttribute('aria-label');
+      }
+    }
+
+    if (props.has('accessibleNameRef')) {
+      if (this.accessibleNameRef) {
+        this.setAttribute('aria-labelledby', this.accessibleNameRef);
+      } else {
+        this.removeAttribute('aria-labelledby');
+      }
+    }
+
+    if (props.has('modal')) {
+      if (this.modal) {
+        this.setAttribute('aria-modal', 'true');
+      } else {
+        this.removeAttribute('aria-modal');
+      }
+    }
   }
 
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
 
-    document.documentElement.addEventListener('click', this.__onGlobalClick, true);
+    // If no user ID is provided, set generated ID
+    if (!this.id) {
+      this.id = this.__generatedId;
+    }
   }
 
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    document.documentElement.removeEventListener('click', this.__onGlobalClick, true);
-
     // Automatically close popover when it is removed from DOM
     // Avoid closing if the popover is just moved in the DOM
     queueMicrotask(() => {
@@ -585,7 +661,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   /** @private */
-  __updateAriaAttributes(opened, overlayRole, target) {
+  __updateAriaAttributes(opened, role, target) {
     if (this.__oldTarget) {
       const oldEffectiveTarget = this.__oldTarget.ariaTarget || this.__oldTarget;
       oldEffectiveTarget.removeAttribute('aria-haspopup');
@@ -596,13 +672,13 @@ class Popover extends PopoverPositionMixin(
     if (target) {
       const effectiveTarget = target.ariaTarget || target;
 
-      const isDialog = overlayRole === 'dialog' || overlayRole === 'alertdialog';
+      const isDialog = role === 'dialog' || role === 'alertdialog';
       effectiveTarget.setAttribute('aria-haspopup', isDialog ? 'dialog' : 'true');
 
       effectiveTarget.setAttribute('aria-expanded', opened ? 'true' : 'false');
 
       if (opened) {
-        effectiveTarget.setAttribute('aria-controls', this.__overlayId);
+        effectiveTarget.setAttribute('aria-controls', this.id);
       } else {
         effectiveTarget.removeAttribute('aria-controls');
       }
@@ -611,23 +687,6 @@ class Popover extends PopoverPositionMixin(
     }
   }
 
-  /**
-   * Overlay's global outside click listener doesn't work when
-   * the overlay is modeless, so we use a separate listener.
-   * @private
-   */
-  __onGlobalClick(event) {
-    if (
-      this.opened &&
-      !this.modal &&
-      !event.composedPath().some((el) => el === this._overlayElement || el === this.target) &&
-      !this.noCloseOnOutsideClick &&
-      isLastOverlay(this._overlayElement)
-    ) {
-      this._openedStateController.close(true);
-    }
-  }
-
   /** @private */
   __onTargetClick() {
     if (this.__hasTrigger('click')) {
@@ -648,17 +707,11 @@ class Popover extends PopoverPositionMixin(
    * @private
    */
   __onGlobalKeyDown(event) {
-    // Modal popover uses overlay logic for Esc key and focus trap.
+    // Modal popover uses overlay logic focus trap.
     if (this.modal) {
       return;
     }
 
-    if (event.key === 'Escape' && !this.noCloseOnEsc && this.opened && isLastOverlay(this._overlayElement)) {
-      // Prevent closing parent overlay (e.g. dialog)
-      event.stopPropagation();
-      this._openedStateController.close(true);
-    }
-
     // Include popover content in the Tab order after the target.
     if (event.key === 'Tab') {
       if (event.shiftKey) {
@@ -671,20 +724,18 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onGlobalTab(event) {
-    const overlayPart = this._overlayElement.$.overlay;
-
-    // Move focus to the popover content on target element Tab
+    // Move focus to the popover on target element Tab
     if (this.target && isElementFocused(this.__getTargetFocusable())) {
       event.preventDefault();
-      overlayPart.focus();
+      this.focus();
       return;
     }
 
     // Move focus to the next element after target on content Tab
-    const lastFocusable = this.__getLastFocusable(overlayPart);
+    const lastFocusable = this.__getLastFocusable(this);
     if (lastFocusable && isElementFocused(lastFocusable)) {
       const focusable = this.__getNextBodyFocusable(this.__getTargetFocusable());
-      if (focusable && focusable !== overlayPart) {
+      if (focusable && focusable !== this) {
         event.preventDefault();
         focusable.focus();
         return;
@@ -694,7 +745,7 @@ class Popover extends PopoverPositionMixin(
     // Prevent focusing the popover content on previous element Tab
     const activeElement = getDeepActiveElement();
     const nextFocusable = this.__getNextBodyFocusable(activeElement);
-    if (nextFocusable === overlayPart && lastFocusable) {
+    if (nextFocusable === this && lastFocusable) {
       // Move focus to the last overlay focusable and do NOT prevent keydown
       // to move focus outside the popover content (e.g. to the URL bar).
       lastFocusable.focus();
@@ -703,16 +754,14 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onGlobalShiftTab(event) {
-    const overlayPart = this._overlayElement.$.overlay;
-
     // Prevent restoring focus after target blur on Shift + Tab
     if (this.target && isElementFocused(this.__getTargetFocusable()) && this.__shouldRestoreFocus) {
       this.__shouldRestoreFocus = false;
       return;
     }
 
-    // Move focus back to the target on overlay content Shift + Tab
-    if (this.target && isElementFocused(overlayPart)) {
+    // Move focus back to the target on popover Shift + Tab
+    if (this.target && isElementFocused(this)) {
       event.preventDefault();
       this.__getTargetFocusable().focus();
       return;
@@ -721,7 +770,7 @@ class Popover extends PopoverPositionMixin(
     // Move focus back to the popover on next element Shift + Tab
     const nextFocusable = this.__getNextBodyFocusable(this.__getTargetFocusable());
     if (nextFocusable && isElementFocused(nextFocusable)) {
-      const lastFocusable = this.__getLastFocusable(overlayPart);
+      const lastFocusable = this.__getLastFocusable(this);
       if (lastFocusable) {
         event.preventDefault();
         lastFocusable.focus();
@@ -781,7 +830,7 @@ class Popover extends PopoverPositionMixin(
       return;
     }
 
-    if ((this.__hasTrigger('focus') && this.__mouseDownInside) || this._overlayElement.contains(event.relatedTarget)) {
+    if ((this.__hasTrigger('focus') && this.__mouseDownInside) || this.contains(event.relatedTarget)) {
       return;
     }
 
@@ -809,7 +858,7 @@ class Popover extends PopoverPositionMixin(
       return;
     }
 
-    if (this._overlayElement.contains(event.relatedTarget)) {
+    if (this.contains(event.relatedTarget)) {
       return;
     }
 
@@ -817,7 +866,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   /** @private */
-  __onOverlayFocusIn() {
+  __onFocusIn() {
     this.__focusInside = true;
 
     // When using Tab to move focus, restoring focus is reset. However, if pressing Tab
@@ -828,7 +877,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   /** @private */
-  __onOverlayFocusOut(event) {
+  __onFocusOut(event) {
     // Do not close the popover on overlay focusout if it's not the last one.
     // This covers the following cases of nested overlay based components:
     // 1. Moving focus to the nested overlay (e.g. vaadin-select, vaadin-menu-bar)
@@ -840,7 +889,7 @@ class Popover extends PopoverPositionMixin(
     if (
       (this.__hasTrigger('focus') && this.__mouseDownInside) ||
       event.relatedTarget === this.target ||
-      this._overlayElement.contains(event.relatedTarget)
+      this.contains(event.relatedTarget)
     ) {
       return;
     }
@@ -898,6 +947,11 @@ class Popover extends PopoverPositionMixin(
     }
 
     if (this.__hasTrigger('focus')) {
+      // Do not restore focus if closed on focusout on Tab
+      if (isKeyboardActive()) {
+        this.__shouldRestoreFocus = false;
+      }
+
       this._openedStateController.close(true);
     }
   }
@@ -923,7 +977,7 @@ class Popover extends PopoverPositionMixin(
   /** @private */
   __onOverlayOpened() {
     if (this.autofocus && !this.modal) {
-      this._overlayElement.$.overlay.focus();
+      this.focus();
     }
   }
 
@@ -938,7 +992,7 @@ class Popover extends PopoverPositionMixin(
     }
 
     // Restore pointer-events set when opening on hover.
-    if (this.modal && this.target.style.pointerEvents) {
+    if (this.modal && this.target && this.target.style.pointerEvents) {
       this.target.style.pointerEvents = '';
     }
 
@@ -970,31 +1024,6 @@ class Popover extends PopoverPositionMixin(
     return Array.isArray(this.trigger) && this.trigger.includes(trigger);
   }
 
-  /** @private */
-  __updateDimension(overlay, dimension, value) {
-    const prop = `--_vaadin-popover-content-${dimension}`;
-
-    if (value) {
-      overlay.style.setProperty(prop, value);
-    } else {
-      overlay.style.removeProperty(prop);
-    }
-  }
-
-  /** @private */
-  __updateContentHeight(height, overlay) {
-    if (overlay) {
-      this.__updateDimension(overlay, 'height', height);
-    }
-  }
-
-  /** @private */
-  __updateContentWidth(width, overlay) {
-    if (overlay) {
-      this.__updateDimension(overlay, 'width', width);
-    }
-  }
-
   /**
    * Fired when the popover is closed.
    *

package/vaadin-popover.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-popover.js';
+import './src/vaadin-popover.js';
 export * from './src/vaadin-popover.js';