refactor!: move date-picker overlay content to light DOM (#3904)

vaadin · Oct 14, 2022 · 436af90 · 436af90
1 parent 559e72d
commit 436af90
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 155 deletions.
diff --git a/packages/date-picker/src/vaadin-date-picker-light.d.ts b/packages/date-picker/src/vaadin-date-picker-light.d.ts
@@ -66,12 +66,6 @@ export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePicker
  *
  * ### Styling
  *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `overlay-content` | The overlay element | vaadin-date-picker-light
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * In addition to `<vaadin-date-picker-light>` itself, the following

diff --git a/packages/date-picker/src/vaadin-date-picker-light.js b/packages/date-picker/src/vaadin-date-picker-light.js
@@ -28,12 +28,6 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  *
  * ### Styling
  *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `overlay-content` | The overlay element | vaadin-date-picker-light
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * In addition to `<vaadin-date-picker-light>` itself, the following
@@ -73,29 +67,13 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
         id="overlay"
         fullscreen$="[[_fullscreen]]"
         opened="{{opened}}"
+        on-vaadin-overlay-escape-press="_onOverlayEscapePress"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
-        theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
-      >
-        <template>
-          <vaadin-date-picker-overlay-content
-            id="overlay-content"
-            i18n="[[i18n]]"
-            fullscreen$="[[_fullscreen]]"
-            label="[[label]]"
-            selected-date="[[_selectedDate]]"
-            focused-date="{{_focusedDate}}"
-            show-week-numbers="[[showWeekNumbers]]"
-            min-date="[[_minDate]]"
-            max-date="[[_maxDate]]"
-            part="overlay-content"
-            theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
-          >
-          </vaadin-date-picker-overlay-content>
-        </template>
-      </vaadin-date-picker-overlay>
+        theme$="[[_theme]]"
+      ></vaadin-date-picker-overlay>
     `;
   }
 
@@ -115,25 +93,9 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
         type: String,
         value: 'value',
       },
-
-      /**
-       * @type {boolean}
-       * @protected
-       */
-      _overlayInitialized: {
-        type: Boolean,
-        value: true,
-      },
     };
   }
 
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._initOverlay();
-  }
-
   /** @protected */
   connectedCallback() {
     super.connectedCallback();

diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js
@@ -308,15 +308,18 @@ export const DatePickerMixin = (subclass) =>
         /** @private */
         _focusOverlayOnOpen: Boolean,
 
-        /** @protected */
-        _overlayInitialized: Boolean,
+        /** @private */
+        _overlayContent: Object,
       };
     }
 
     static get observers() {
       return [
         '_selectedDateChanged(_selectedDate, i18n.formatDate)',
         '_focusedDateChanged(_focusedDate, i18n.formatDate)',
+        '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers)',
+        '__updateOverlayContentTheme(_overlayContent, _theme)',
+        '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
       ];
     }
 
@@ -361,6 +364,7 @@ export const DatePickerMixin = (subclass) =>
 
       this._boundOnClick = this._onClick.bind(this);
       this._boundOnScroll = this._onScroll.bind(this);
+      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
     }
 
     /**
@@ -411,6 +415,11 @@ export const DatePickerMixin = (subclass) =>
       );
 
       this.addController(new VirtualKeyboardController(this));
+
+      this.$.overlay.renderer = this._boundOverlayRenderer;
+
+      this.addEventListener('mousedown', () => this.__bringToFront());
+      this.addEventListener('touchstart', () => this.__bringToFront());
     }
 
     /** @protected */
@@ -452,33 +461,29 @@ export const DatePickerMixin = (subclass) =>
      * Closes the dropdown.
      */
     close() {
-      if (this._overlayInitialized || this.autoOpenDisabled) {
-        this.$.overlay.close();
-      }
+      this.$.overlay.close();
     }
 
-    /** @protected */
-    _initOverlay() {
-      this.$.overlay.removeAttribute('disable-upgrade');
-      this._overlayInitialized = true;
+    /** @private */
+    _overlayRenderer(root) {
+      if (root.firstChild) {
+        return;
+      }
 
-      this.$.overlay.addEventListener('opened-changed', (e) => {
-        this.opened = e.detail.value;
-      });
+      // Create and store document content element
+      const content = document.createElement('vaadin-date-picker-overlay-content');
+      root.appendChild(content);
 
-      this.$.overlay.addEventListener('vaadin-overlay-escape-press', () => {
-        this._focusedDate = this._selectedDate;
-        this._close();
-      });
+      this._overlayContent = content;
 
-      this._overlayContent.addEventListener('close', () => {
+      content.addEventListener('close', () => {
         this._close();
       });
 
-      this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));
+      content.addEventListener('focus-input', this._focusAndSelect.bind(this));
 
       // User confirmed selected date by clicking the calendar.
-      this._overlayContent.addEventListener('date-tap', (e) => {
+      content.addEventListener('date-tap', (e) => {
         this.__userConfirmedDate = true;
 
         this._selectDate(e.detail.date);
@@ -487,22 +492,24 @@ export const DatePickerMixin = (subclass) =>
       });
 
       // User confirmed selected date by pressing Enter or Today.
-      this._overlayContent.addEventListener('date-selected', (e) => {
+      content.addEventListener('date-selected', (e) => {
         this.__userConfirmedDate = true;
 
         this._selectDate(e.detail.date);
       });
 
       // Set focus-ring attribute when moving focus to the overlay
       // by pressing Tab or arrow key, after opening it on click.
-      this._overlayContent.addEventListener('focusin', () => {
+      content.addEventListener('focusin', () => {
         if (this._keyboardActive) {
           this._setFocused(true);
         }
       });
 
-      this.addEventListener('mousedown', () => this.__bringToFront());
-      this.addEventListener('touchstart', () => this.__bringToFront());
+      // Two-way data binding for `focusedDate` property
+      content.addEventListener('focused-date-changed', (e) => {
+        this._focusedDate = e.detail.value;
+      });
     }
 
     /**
@@ -676,12 +683,6 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _openedChanged(opened) {
-      if (opened && !this._overlayInitialized) {
-        this._initOverlay();
-      }
-      if (this._overlayInitialized) {
-        this.$.overlay.opened = opened;
-      }
       if (this.inputElement) {
         this.inputElement.setAttribute('aria-expanded', opened);
       }
@@ -717,13 +718,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    __getOverlayTheme(theme, overlayInitialized) {
-      if (overlayInitialized) {
-        return theme;
-      }
-    }
-
     /**
      * Override the value observer from `InputMixin` to implement custom
      * handling of the `value` property. The date-picker doesn't forward
@@ -762,6 +756,46 @@ export const DatePickerMixin = (subclass) =>
       this._toggleHasValue(this._hasValue);
     }
 
+    /** @private */
+    // eslint-disable-next-line max-params
+    __updateOverlayContent(overlayContent, i18n, label, minDate, maxDate, focusedDate, selectedDate, showWeekNumbers) {
+      if (overlayContent) {
+        overlayContent.setProperties({
+          i18n,
+          label,
+          minDate,
+          maxDate,
+          focusedDate,
+          selectedDate,
+          showWeekNumbers,
+        });
+      }
+    }
+
+    /** @private */
+    __updateOverlayContentTheme(overlayContent, theme) {
+      if (overlayContent) {
+        if (theme) {
+          overlayContent.setAttribute('theme', theme);
+        } else {
+          overlayContent.removeAttribute('theme');
+        }
+      }
+    }
+
+    /** @private */
+    __updateOverlayContentFullScreen(overlayContent, fullscreen) {
+      if (overlayContent) {
+        overlayContent.toggleAttribute('fullscreen', fullscreen);
+      }
+    }
+
+    /** @protected */
+    _onOverlayEscapePress() {
+      this._focusedDate = this._selectedDate;
+      this._close();
+    }
+
     /** @protected */
     _onOverlayOpened() {
       const parsedInitialPosition = this._parseDate(this.initialPosition);
@@ -996,7 +1030,7 @@ export const DatePickerMixin = (subclass) =>
       const parsedDate = this._getParsedDate();
       const isValidDate = this._isValidDate(parsedDate);
       if (this.opened) {
-        if (this._overlayInitialized && this._overlayContent.focusedDate && isValidDate) {
+        if (this._overlayContent && this._overlayContent.focusedDate && isValidDate) {
           this._selectDate(this._overlayContent.focusedDate);
         }
         this.close();
@@ -1084,11 +1118,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    get _overlayContent() {
-      return this.$.overlay.content.querySelector('#overlay-content');
-    }
-
     /** @private */
     __computeMinOrMaxDate(dateString) {
       return this._parseDate(dateString);

diff --git a/packages/date-picker/src/vaadin-date-picker-overlay.js b/packages/date-picker/src/vaadin-date-picker-overlay.js
@@ -3,7 +3,6 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisableUpgradeMixin } from '@polymer/polymer/lib/mixins/disable-upgrade-mixin.js';
 import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
 import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
 import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -21,7 +20,7 @@ let memoizedTemplate;
  * @extends OverlayElement
  * @private
  */
-class DatePickerOverlay extends DisableUpgradeMixin(PositionMixin(OverlayElement)) {
+class DatePickerOverlay extends PositionMixin(OverlayElement) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }

diff --git a/packages/date-picker/src/vaadin-date-picker.d.ts b/packages/date-picker/src/vaadin-date-picker.d.ts
@@ -79,7 +79,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * Part name             | Description
  * ----------------------|--------------------
  * `toggle-button`       | Toggle button
- * `overlay-content`     | The overlay element
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *

diff --git a/packages/date-picker/src/vaadin-date-picker.js b/packages/date-picker/src/vaadin-date-picker.js
@@ -48,7 +48,6 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * Part name             | Description
  * ----------------------|--------------------
  * `toggle-button`       | Toggle button
- * `overlay-content`     | The overlay element
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
@@ -161,29 +160,14 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
       <vaadin-date-picker-overlay
         id="overlay"
         fullscreen$="[[_fullscreen]]"
-        theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
+        theme$="[[_theme]]"
+        opened="{{opened}}"
+        on-vaadin-overlay-escape-press="_onOverlayEscapePress"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
-        disable-upgrade
-      >
-        <template>
-          <vaadin-date-picker-overlay-content
-            id="overlay-content"
-            i18n="[[i18n]]"
-            fullscreen$="[[_fullscreen]]"
-            label="[[label]]"
-            selected-date="[[_selectedDate]]"
-            focused-date="{{_focusedDate}}"
-            show-week-numbers="[[showWeekNumbers]]"
-            min-date="[[_minDate]]"
-            max-date="[[_maxDate]]"
-            part="overlay-content"
-            theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
-          ></vaadin-date-picker-overlay-content>
-        </template>
-      </vaadin-date-picker-overlay>
+      ></vaadin-date-picker-overlay>
 
       <slot name="tooltip"></slot>
     `;
@@ -219,11 +203,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
     const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
     toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
-  }
-
-  /** @protected */
-  _initOverlay() {
-    super._initOverlay();
 
     this.$.overlay.addEventListener('vaadin-overlay-close', this._onVaadinOverlayClose.bind(this));
   }
@@ -238,7 +217,11 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
   /** @private */
   _toggle(e) {
     e.stopPropagation();
-    this[this._overlayInitialized && this.$.overlay.opened ? 'close' : 'open']();
+    if (this.$.overlay.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
   }
 
   // Workaround https://github.com/vaadin/web-components/issues/2855