feat: align popover delay defaults and API with tooltip (#7682)

packages/popover/src/vaadin-popover.d.ts

@@ -77,6 +77,24 @@ export type PopoverEventMap = HTMLElementEventMap & PopoverCustomEventMap;
 declare class Popover extends PopoverPositionMixin(
   PopoverTargetMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement)))),
 ) {
+  /**
+   * Sets the default focus delay to be used by all popover instances,
+   * except for those that have focus delay configured using property.
+   */
+  static setDefaultFocusDelay(focusDelay: number): void;
+
+  /**
+   * Sets the default hide delay to be used by all popover instances,
+   * except for those that have hide delay configured using property.
+   */
+  static setDefaultHideDelay(hideDelay: number): void;
+
+  /**
+   * Sets the default hover delay to be used by all popover instances,
+   * except for those that have hover delay configured using property.
+   */
+  static setDefaultHoverDelay(delay: number): void;
+
   /**
    * String used to label the overlay to screen reader users.
    *
@@ -114,6 +132,9 @@ declare class Popover extends PopoverPositionMixin(
   /**
    * The delay in milliseconds before the popover is opened
    * on focus when the corresponding trigger is used.
+   *
+   * When not specified, the global default (500ms) is used.
+   *
    * @attr {number} focus-delay
    */
   focusDelay: number;
@@ -122,13 +143,19 @@ declare class Popover extends PopoverPositionMixin(
    * The delay in milliseconds before the popover is closed
    * on losing hover, when the corresponding trigger is used.
    * On blur, the popover is closed immediately.
+   *
+   * When not specified, the global default (500ms) is used.
+   *
    * @attr {number} hide-delay
    */
   hideDelay: number;
 
   /**
    * The delay in milliseconds before the popover is opened
    * on hover when the corresponding trigger is used.
+   *
+   * When not specified, the global default (500ms) is used.
+   *
    * @attr {number} hover-delay
    */
   hoverDelay: number;

packages/popover/src/vaadin-popover.js

@@ -22,6 +22,12 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
 import { PopoverPositionMixin } from './vaadin-popover-position-mixin.js';
 import { PopoverTargetMixin } from './vaadin-popover-target-mixin.js';
 
+const DEFAULT_DELAY = 500;
+
+let defaultFocusDelay = DEFAULT_DELAY;
+let defaultHoverDelay = DEFAULT_DELAY;
+let defaultHideDelay = DEFAULT_DELAY;
+
 /**
  * Controller for handling popover opened state.
  */
@@ -40,17 +46,20 @@ class PopoverOpenedStateController {
 
   /** @private */
   get __focusDelay() {
-    return this.host.focusDelay || 0;
+    const popover = this.host;
+    return popover.focusDelay != null && popover.focusDelay > 0 ? popover.focusDelay : defaultFocusDelay;
   }
 
   /** @private */
   get __hoverDelay() {
-    return this.host.hoverDelay || 0;
+    const popover = this.host;
+    return popover.hoverDelay != null && popover.hoverDelay > 0 ? popover.hoverDelay : defaultHoverDelay;
   }
 
   /** @private */
   get __hideDelay() {
-    return this.host.hideDelay || 0;
+    const popover = this.host;
+    return popover.hideDelay != null && popover.hideDelay > 0 ? popover.hideDelay : defaultHideDelay;
   }
 
   /**
@@ -247,6 +256,9 @@ class Popover extends PopoverPositionMixin(
       /**
        * The delay in milliseconds before the popover is opened
        * on focus when the corresponding trigger is used.
+       *
+       * When not specified, the global default (500ms) is used.
+       *
        * @attr {number} focus-delay
        */
       focusDelay: {
@@ -257,6 +269,9 @@ class Popover extends PopoverPositionMixin(
        * The delay in milliseconds before the popover is closed
        * on losing hover, when the corresponding trigger is used.
        * On blur, the popover is closed immediately.
+       *
+       * When not specified, the global default (500ms) is used.
+       *
        * @attr {number} hide-delay
        */
       hideDelay: {
@@ -266,6 +281,9 @@ class Popover extends PopoverPositionMixin(
       /**
        * The delay in milliseconds before the popover is opened
        * on hover when the corresponding trigger is used.
+       *
+       * When not specified, the global default (500ms) is used.
+       *
        * @attr {number} hover-delay
        */
       hoverDelay: {
@@ -393,6 +411,36 @@ class Popover extends PopoverPositionMixin(
     ];
   }
 
+  /**
+   * Sets the default focus delay to be used by all popover instances,
+   * except for those that have focus delay configured using property.
+   *
+   * @param {number} delay
+   */
+  static setDefaultFocusDelay(focusDelay) {
+    defaultFocusDelay = focusDelay != null && focusDelay >= 0 ? focusDelay : DEFAULT_DELAY;
+  }
+
+  /**
+   * Sets the default hide delay to be used by all popover instances,
+   * except for those that have hide delay configured using property.
+   *
+   * @param {number} hideDelay
+   */
+  static setDefaultHideDelay(hideDelay) {
+    defaultHideDelay = hideDelay != null && hideDelay >= 0 ? hideDelay : DEFAULT_DELAY;
+  }
+
+  /**
+   * Sets the default hover delay to be used by all popover instances,
+   * except for those that have hover delay configured using property.
+   *
+   * @param {number} delay
+   */
+  static setDefaultHoverDelay(hoverDelay) {
+    defaultHoverDelay = hoverDelay != null && hoverDelay >= 0 ? hoverDelay : DEFAULT_DELAY;
+  }
+
   constructor() {
     super();
 

packages/popover/test/a11y.test.js

@@ -12,13 +12,19 @@ import {
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import './not-animated-styles.js';
-import '../vaadin-popover.js';
 import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
+import { Popover } from '../vaadin-popover.js';
 import { mouseenter, mouseleave } from './helpers.js';
 
 describe('a11y', () => {
   let popover, target, overlay;
 
+  before(() => {
+    Popover.setDefaultFocusDelay(0);
+    Popover.setDefaultHoverDelay(0);
+    Popover.setDefaultHideDelay(0);
+  });
+
   beforeEach(async () => {
     popover = fixtureSync('<vaadin-popover></vaadin-popover>');
     target = fixtureSync('<button>Target</button>');

packages/popover/test/nested.test.js

@@ -1,12 +1,18 @@
 import { expect } from '@vaadin/chai-plugins';
 import { esc, fixtureSync, nextRender, nextUpdate, outsideClick } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
-import '../vaadin-popover.js';
+import { Popover } from '../vaadin-popover.js';
 import { mouseenter, mouseleave } from './helpers.js';
 
 describe('nested popover', () => {
   let popover, target, secondPopover, secondTarget;
 
+  before(() => {
+    Popover.setDefaultFocusDelay(0);
+    Popover.setDefaultHoverDelay(0);
+    Popover.setDefaultHideDelay(0);
+  });
+
   beforeEach(async () => {
     popover = fixtureSync('<vaadin-popover></vaadin-popover>');
     target = fixtureSync('<button>Target</button>');