@vaadin/date-picker 23.3.3 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,14 +36,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "~23.3.3",
-    "@vaadin/component-base": "~23.3.3",
-    "@vaadin/field-base": "~23.3.3",
-    "@vaadin/input-container": "~23.3.3",
-    "@vaadin/overlay": "~23.3.3",
-    "@vaadin/vaadin-lumo-styles": "~23.3.3",
-    "@vaadin/vaadin-material-styles": "~23.3.3",
-    "@vaadin/vaadin-themable-mixin": "~23.3.3"
+    "@vaadin/button": "24.0.0-alpha10",
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/field-base": "24.0.0-alpha10",
+    "@vaadin/input-container": "24.0.0-alpha10",
+    "@vaadin/overlay": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1529ed623e053d28a3c1c66af55ebe402743ddd0"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

package/src/vaadin-date-picker-helper.d.ts

@@ -42,6 +42,13 @@ export { extractDateParts };
  */
 declare function extractDateParts(date: Date): { day: number; month: number; year: number };
 
+/**
+ * Get difference in months between today and given months value.
+ */
+declare function dateAfterXMonths(months: number): number;
+
+export { dateAfterXMonths };
+
 /**
  * Calculate the year of the date based on the provided reference date
  * Gets a two-digit year and returns a full year.

package/src/vaadin-date-picker-helper.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -104,6 +104,20 @@ export function extractDateParts(date) {
   };
 }
 
+/**
+ * Get difference in months between today and given months value.
+ *
+ * @param {number} months
+ * @return {number}
+ */
+export function dateAfterXMonths(months) {
+  const today = new Date();
+  const result = new Date(today);
+  result.setDate(1);
+  result.setMonth(parseInt(months) + today.getMonth());
+  return result;
+}
+
 /**
  * Calculate the year of the date based on the provided reference date.
  * Gets a two-digit year and returns a full year.
@@ -139,7 +153,7 @@ export function getAdjustedYear(referenceDate, year, month = 0, day = 1) {
  */
 export function parseDate(str) {
   // Parsing with RegExp to ensure correct format
-  const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/.exec(str);
+  const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/u.exec(str);
   if (!parts) {
     return undefined;
   }

package/src/vaadin-date-picker-light.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
@@ -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

package/src/vaadin-date-picker-light.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-date-picker-overlay.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,33 +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();
-    const cssSelector = 'vaadin-text-field,iron-input,paper-input,.paper-input-input,.input';
-    this._setInputElement(this.querySelector(cssSelector));
-    this._setFocusElement(this.inputElement);
-  }
-
   /** @return {string | undefined} */
   get _inputValue() {
     return this.inputElement && this.inputElement[dashToCamelCase(this.attrForValue)];
@@ -153,6 +107,14 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
     }
   }
 
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    const cssSelector = 'vaadin-text-field,.input';
+    this._setInputElement(this.querySelector(cssSelector));
+    this._setFocusElement(this.inputElement);
+  }
+
   // Workaround https://github.com/vaadin/web-components/issues/2855
   /** @protected */
   _openedChanged(opened) {

package/src/vaadin-date-picker-mixin.d.ts

@@ -1,13 +1,14 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 
@@ -38,15 +39,6 @@ export interface DatePickerI18n {
    * (0 = Sunday, 1 = Monday, etc.).
    */
   firstDayOfWeek: number;
-  /**
-   * Used in screen reader announcements along with week
-   * numbers, if they are displayed.
-   */
-  week: string;
-  /**
-   * Translation of the Calendar icon button title.
-   */
-  calendar: string;
   /**
    * Translation of the Today shortcut button text.
    */
@@ -102,6 +94,7 @@ export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
+  Constructor<OverlayClassMixinClass> &
   T;
 
 export declare class DatePickerMixinClass {
@@ -183,13 +176,6 @@ export declare class DatePickerMixinClass {
    *   // (0 = Sunday, 1 = Monday, etc.).
    *   firstDayOfWeek: 0,
    *
-   *   // Used in screen reader announcements along with week
-   *   // numbers, if they are displayed.
-   *   week: 'Week',
-   *
-   *   // Translation of the Calendar icon button title.
-   *   calendar: 'Calendar',
-   *
    *   // Translation of the Today shortcut button text.
    *   today: 'Today',
    *

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

@@ -1,13 +1,14 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
-import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
 import {
@@ -21,11 +22,16 @@ import {
 
 /**
  * @polymerMixin
+ * @mixes ControllerMixin
+ * @mixes DelegateFocusMixin
+ * @mixes InputConstraintsMixin
+ * @mixes KeyboardMixin
+ * @mixes OverlayClassMixin
  * @param {function(new:HTMLElement)} subclass
  */
 export const DatePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends ControllerMixin(
-    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
+  class DatePickerMixinClass extends OverlayClassMixin(
+    ControllerMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass)))),
   ) {
     static get properties() {
       return {
@@ -91,6 +97,7 @@ export const DatePickerMixin = (subclass) =>
          */
         showWeekNumbers: {
           type: Boolean,
+          value: false,
         },
 
         /**
@@ -152,13 +159,6 @@ export const DatePickerMixin = (subclass) =>
          *   // (0 = Sunday, 1 = Monday, etc.).
          *   firstDayOfWeek: 0,
          *
-         *   // Used in screen reader announcements along with week
-         *   // numbers, if they are displayed.
-         *   week: 'Week',
-         *
-         *   // Translation of the Calendar icon button title.
-         *   calendar: 'Calendar',
-         *
          *   // Translation of the Today shortcut button text.
          *   today: 'Today',
          *
@@ -224,13 +224,11 @@ export const DatePickerMixin = (subclass) =>
               weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
               weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
               firstDayOfWeek: 0,
-              week: 'Week',
-              calendar: 'Calendar',
               today: 'Today',
               cancel: 'Cancel',
               referenceDate: '',
               formatDate(d) {
-                const yearStr = String(d.year).replace(/\d+/, (y) => '0000'.substr(y.length) + y);
+                const yearStr = String(d.year).replace(/\d+/u, (y) => '0000'.substr(y.length) + y);
                 return [d.month + 1, d.day, yearStr].join('/');
               },
               parseDate(text) {
@@ -327,8 +325,8 @@ export const DatePickerMixin = (subclass) =>
         /** @private */
         _focusOverlayOnOpen: Boolean,
 
-        /** @protected */
-        _overlayInitialized: Boolean,
+        /** @private */
+        _overlayContent: Object,
       };
     }
 
@@ -336,6 +334,9 @@ export const DatePickerMixin = (subclass) =>
       return [
         '_selectedDateChanged(_selectedDate, i18n.formatDate)',
         '_focusedDateChanged(_focusedDate, i18n.formatDate)',
+        '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers)',
+        '__updateOverlayContentTheme(_overlayContent, _theme)',
+        '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
       ];
     }
 
@@ -343,6 +344,14 @@ export const DatePickerMixin = (subclass) =>
       return [...super.constraints, 'min', 'max'];
     }
 
+    constructor() {
+      super();
+
+      this._boundOnClick = this._onClick.bind(this);
+      this._boundOnScroll = this._onScroll.bind(this);
+      this._boundOverlayRenderer = this._overlayRenderer.bind(this);
+    }
+
     /**
      * Override a getter from `InputControlMixin` to make it optional
      * and to prevent warning when a clear button is missing,
@@ -354,18 +363,6 @@ export const DatePickerMixin = (subclass) =>
       return null;
     }
 
-    /** @protected */
-    get _inputValue() {
-      return this.inputElement ? this.inputElement.value : undefined;
-    }
-
-    /** @protected */
-    set _inputValue(value) {
-      if (this.inputElement) {
-        this.inputElement.value = value;
-      }
-    }
-
     /** @private */
     get _nativeInput() {
       if (this.inputElement) {
@@ -375,11 +372,16 @@ export const DatePickerMixin = (subclass) =>
       return null;
     }
 
-    constructor() {
-      super();
+    /** @protected */
+    get _inputValue() {
+      return this.inputElement ? this.inputElement.value : undefined;
+    }
 
-      this._boundOnClick = this._onClick.bind(this);
-      this._boundOnScroll = this._onScroll.bind(this);
+    /** @protected */
+    set _inputValue(value) {
+      if (this.inputElement) {
+        this.inputElement.value = value;
+      }
     }
 
     /**
@@ -427,6 +429,14 @@ export const DatePickerMixin = (subclass) =>
       );
 
       this.addController(new VirtualKeyboardController(this));
+
+      const overlay = this.$.overlay;
+      this._overlayElement = overlay;
+
+      overlay.renderer = this._boundOverlayRenderer;
+
+      this.addEventListener('mousedown', () => this.__bringToFront());
+      this.addEventListener('touchstart', () => this.__bringToFront());
     }
 
     /** @protected */
@@ -468,33 +478,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);
@@ -503,7 +509,7 @@ 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);
@@ -511,14 +517,16 @@ export const DatePickerMixin = (subclass) =>
 
       // 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;
+      });
     }
 
     /**
@@ -677,12 +685,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);
       }
@@ -718,13 +720,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
@@ -763,23 +758,59 @@ export const DatePickerMixin = (subclass) =>
       this._toggleHasValue(this._hasValue);
     }
 
-    /** @protected */
-    _onOverlayOpened() {
-      const parsedInitialPosition = parseDate(this.initialPosition);
+    /** @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,
+        });
+      }
+    }
 
-      const initialPosition =
-        this._selectedDate || this._overlayContent.initialPosition || parsedInitialPosition || new Date();
+    /** @private */
+    __updateOverlayContentTheme(overlayContent, theme) {
+      if (overlayContent) {
+        if (theme) {
+          overlayContent.setAttribute('theme', theme);
+        } else {
+          overlayContent.removeAttribute('theme');
+        }
+      }
+    }
 
-      if (parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate)) {
-        this._overlayContent.initialPosition = initialPosition;
-      } else {
-        this._overlayContent.initialPosition = getClosestDate(initialPosition, [this._minDate, this._maxDate]);
+    /** @private */
+    __updateOverlayContentFullScreen(overlayContent, fullscreen) {
+      if (overlayContent) {
+        overlayContent.toggleAttribute('fullscreen', fullscreen);
       }
+    }
+
+    /** @protected */
+    _onOverlayEscapePress() {
+      this._focusedDate = this._selectedDate;
+      this._close();
+    }
+
+    /** @protected */
+    _onOverlayOpened() {
+      // Detect which date to show
+      const initialPosition = this._getInitialPosition();
+      this._overlayContent.initialPosition = initialPosition;
+
+      // Scroll the date into view
+      const scrollFocusDate = this._overlayContent.focusedDate || initialPosition;
+      this._overlayContent.scrollToDate(scrollFocusDate);
 
-      this._overlayContent.scrollToDate(this._overlayContent.focusedDate || this._overlayContent.initialPosition);
-      // Have a default focused date
+      // Ensure the date is focused
       this._ignoreFocusedDateChange = true;
-      this._overlayContent.focusedDate = this._overlayContent.focusedDate || this._overlayContent.initialPosition;
+      this._overlayContent.focusedDate = scrollFocusDate;
       this._ignoreFocusedDateChange = false;
 
       window.addEventListener('scroll', this._boundOnScroll, true);
@@ -797,6 +828,18 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
+    /** @private */
+    _getInitialPosition() {
+      const parsedInitialPosition = parseDate(this.initialPosition);
+
+      const initialPosition =
+        this._selectedDate || this._overlayContent.initialPosition || parsedInitialPosition || new Date();
+
+      return parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate)
+        ? initialPosition
+        : getClosestDate(initialPosition, [this._minDate, this._maxDate]);
+    }
+
     /** @private */
     _selectParsedOrFocusedDate() {
       // Select the parsed input or focused date
@@ -1079,11 +1122,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    get _overlayContent() {
-      return this.$.overlay.content.querySelector('#overlay-content');
-    }
-
     /** @private */
     __computeMinOrMaxDate(dateString) {
       return parseDate(dateString);