refactor!: update date-picker overlay to use native popover (#9762)

Author: web-padawan

packages/date-picker/src/styles/vaadin-date-picker-base-styles.js

@@ -11,6 +11,10 @@ export const datePickerStyles = css`
     pointer-events: auto;
   }
 
+  :host([week-numbers]) {
+    --_vaadin-date-picker-week-numbers-visible: 1;
+  }
+
   :host([dir='rtl']) [part='input-field'] {
     direction: ltr;
   }

packages/date-picker/src/styles/vaadin-date-picker-overlay-base-styles.js

@@ -36,10 +36,6 @@ export const datePickerOverlayStyles = css`
     width: 100%;
   }
 
-  :host([week-numbers]) {
-    --_vaadin-date-picker-week-numbers-visible: 1;
-  }
-
   [part~='content'] {
     flex: auto;
   }

packages/date-picker/src/vaadin-date-picker-mixin.js

@@ -295,7 +295,6 @@ export const DatePickerMixin = (subclass) =>
 
       this._boundOnClick = this._onClick.bind(this);
       this._boundOnScroll = this._onScroll.bind(this);
-      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
     }
 
     /**
@@ -453,13 +452,17 @@ export const DatePickerMixin = (subclass) =>
 
       this.addController(new VirtualKeyboardController(this));
 
-      const overlay = this.$.overlay;
-      this._overlayElement = overlay;
+      this._overlayElement = this.$.overlay;
+    }
 
-      overlay.renderer = this._boundOverlayRenderer;
+    /** @protected */
+    updated(props) {
+      super.updated(props);
 
-      this.addEventListener('mousedown', () => this.__bringToFront());
-      this.addEventListener('touchstart', () => this.__bringToFront());
+      if (props.has('showWeekNumbers') || props.has('__effectiveI18n')) {
+        // Currently only supported for locales that start the week on Monday.
+        this.toggleAttribute('week-numbers', this.showWeekNumbers && this.__effectiveI18n.firstDayOfWeek === 1);
+      }
     }
 
     /** @protected */
@@ -498,14 +501,15 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _overlayRenderer(root) {
-      if (root.firstChild) {
+    __ensureContent() {
+      if (this._overlayContent) {
         return;
       }
 
       // Create and store document content element
       const content = document.createElement('vaadin-date-picker-overlay-content');
-      root.appendChild(content);
+      content.setAttribute('slot', 'overlay');
+      this.appendChild(content);
 
       this._overlayContent = content;
 
@@ -712,13 +716,6 @@ export const DatePickerMixin = (subclass) =>
       this.close();
     }
 
-    /** @private */
-    __bringToFront() {
-      requestAnimationFrame(() => {
-        this.$.overlay.bringToFront();
-      });
-    }
-
     /** @private */
     // eslint-disable-next-line @typescript-eslint/max-params
     _isNoInput(inputElement, fullscreen, ios, effectiveI18n, opened, autoOpenDisabled) {
@@ -752,6 +749,10 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _openedChanged(opened) {
+      if (opened) {
+        this.__ensureContent();
+      }
+
       if (this.inputElement) {
         this.inputElement.setAttribute('aria-expanded', opened);
       }
@@ -1031,6 +1032,11 @@ export const DatePickerMixin = (subclass) =>
      * @private
      */
     _onClick(event) {
+      // Ignore click events bubbling from the overlay
+      if (event.composedPath().includes(this._overlayContent)) {
+        return;
+      }
+
       // Clear button click is handled in separate listener
       // but bubbles to the host, so we need to ignore it.
       if (!this._isClearButton(event)) {
@@ -1119,7 +1125,12 @@ export const DatePickerMixin = (subclass) =>
      * @protected
      * @override
      */
-    _onEnter(_event) {
+    _onEnter(event) {
+      // Ignore Enter keydown event bubbling from the overlay
+      if (event.composedPath().includes(this._overlayContent)) {
+        return;
+      }
+
       if (this.opened) {
         // Closing will implicitly select parsed or focused date
         this.close();

packages/date-picker/src/vaadin-date-picker-overlay.js

@@ -45,6 +45,33 @@ class DatePickerOverlay extends DatePickerOverlayMixin(
       </div>
     `;
   }
+
+  /**
+   * Override method from `OverlayFocusMixin` to specify content root
+   * used to detect whether focus should be restored on overlay close.
+   *
+   * @protected
+   * @override
+   */
+  get _contentRoot() {
+    return this.owner._overlayContent;
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _attachOverlay() {
+    this.showPopover();
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _detachOverlay() {
+    this.hidePopover();
+  }
 }
 
 defineCustomElement(DatePickerOverlay);

packages/date-picker/src/vaadin-date-picker.d.ts

@@ -83,15 +83,19 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  *
  * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
  *
- * Part name             | Description
- * ----------------------|--------------------
- * `toggle-button`       | Toggle button
+ * Part name        | Description
+ * -----------------|--------------------
+ * `toggle-button`  | Toggle button
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
- * Attribute  | Description                                      | Part name
- * -----------|--------------------------------------------------|-----------
- * `opened`   | Set when the date selector overlay is opened     | :host
+ * Attribute      | Description
+ * ---------------|----------------------------------------------
+ * `opened`       | Set when the date selector overlay is opened
+ * `week-numbers` | Set when week numbers are shown in the calendar
  *
  * ### Internal components
  *

packages/date-picker/src/vaadin-date-picker.js

@@ -47,15 +47,19 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  *
  * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
  *
- * Part name             | Description
- * ----------------------|--------------------
- * `toggle-button`       | Toggle button
+ * Part name        | Description
+ * -----------------|--------------------
+ * `toggle-button`  | Toggle button
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
- * Attribute  | Description                                      | Part name
- * -----------|--------------------------------------------------|-----------
- * `opened`   | Set when the date selector overlay is opened     | :host
+ * Attribute      | Description
+ * ---------------|----------------------------------------------
+ * `opened`       | Set when the date selector overlay is opened
+ * `week-numbers` | Set when week numbers are shown in the calendar
  *
  * ### Internal components
  *
@@ -207,9 +211,9 @@ class DatePicker extends DatePickerMixin(
 
       <vaadin-date-picker-overlay
         id="overlay"
+        popover="manual"
         .owner="${this}"
         ?fullscreen="${this._fullscreen}"
-        ?week-numbers="${this.showWeekNumbers}"
         theme="${ifDefined(this._theme)}"
         .opened="${this.opened}"
         @opened-changed="${this._onOpenedChanged}"
@@ -219,9 +223,12 @@ class DatePicker extends DatePickerMixin(
         @vaadin-overlay-closing="${this._onOverlayClosed}"
         restore-focus-on-close
         no-vertical-overlap
+        exportparts="backdrop, overlay, content"
         .restoreFocusNode="${this.inputElement}"
         .positionTarget="${this._positionTarget}"
-      ></vaadin-date-picker-overlay>
+      >
+        <slot name="overlay"></slot>
+      </vaadin-date-picker-overlay>
 
       <slot name="tooltip"></slot>
     `;