@vaadin/date-picker 24.0.0-alpha7 → 24.0.0-alpha9

package/package.json

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

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/
  */
 
@@ -153,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';

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';

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';
 
@@ -93,6 +94,7 @@ export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
+  Constructor<OverlayClassMixinClass> &
   T;
 
 export declare class DatePickerMixinClass {

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 {
@@ -222,7 +228,7 @@ export const DatePickerMixin = (subclass) =>
               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) {
@@ -424,7 +430,10 @@ export const DatePickerMixin = (subclass) =>
 
       this.addController(new VirtualKeyboardController(this));
 
-      this.$.overlay.renderer = this._boundOverlayRenderer;
+      const overlay = this.$.overlay;
+      this._overlayElement = overlay;
+
+      overlay.renderer = this._boundOverlayRenderer;
 
       this.addEventListener('mousedown', () => this.__bringToFront());
       this.addEventListener('touchstart', () => this.__bringToFront());
@@ -791,21 +800,17 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _onOverlayOpened() {
-      const parsedInitialPosition = parseDate(this.initialPosition);
-
-      const initialPosition =
-        this._selectedDate || this._overlayContent.initialPosition || parsedInitialPosition || new Date();
+      // Detect which date to show
+      const initialPosition = this._getInitialPosition();
+      this._overlayContent.initialPosition = initialPosition;
 
-      if (parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate)) {
-        this._overlayContent.initialPosition = initialPosition;
-      } else {
-        this._overlayContent.initialPosition = getClosestDate(initialPosition, [this._minDate, this._maxDate]);
-      }
+      // 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.initialPosition;
+      this._overlayContent.focusedDate = scrollFocusDate;
       this._ignoreFocusedDateChange = false;
 
       window.addEventListener('scroll', this._boundOnScroll, true);
@@ -823,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

package/src/vaadin-date-picker-month-scroller.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 { html } from '@polymer/polymer/lib/utils/html-tag.js';

package/src/vaadin-date-picker-overlay-content.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/button/src/vaadin-button.js';
@@ -644,7 +644,10 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     const initialPosition = this._monthScroller.position;
 
     const smoothScroll = (timestamp) => {
-      start ||= timestamp;
+      if (!start) {
+        start = timestamp;
+      }
+
       const currentTime = timestamp - start;
 
       if (currentTime < this.scrollDuration) {
@@ -972,58 +975,55 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     this.focusDate(getClosestDate(focus, [this.minDate, this.maxDate]));
   }
 
-  _moveFocusByDays(days) {
-    const focus = this.focusedDate;
-    const dateToFocus = new Date(0, 0);
-    dateToFocus.setFullYear(focus.getFullYear());
-    dateToFocus.setMonth(focus.getMonth());
-    dateToFocus.setDate(focus.getDate() + days);
-
-    if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
-      this.focusDate(dateToFocus);
-    } else if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
+  _focusAllowedDate(dateToFocus, diff, keepMonth) {
+    if (this._dateAllowed(dateToFocus)) {
+      this.focusDate(dateToFocus, keepMonth);
+    } else if (this._dateAllowed(this.focusedDate)) {
       // Move to min or max date
-      if (days > 0) {
-        // Down or right
+      if (diff > 0) {
+        // Down, Right or Page Down key
         this.focusDate(this.maxDate);
       } else {
-        // Up or left
+        // Up, Left or Page Up key
         this.focusDate(this.minDate);
       }
     } else {
       // Move to closest allowed date
-      this._focusClosestDate(focus);
+      this._focusClosestDate(this.focusedDate);
     }
   }
 
-  _moveFocusByMonths(months) {
-    const focus = this.focusedDate;
-    const dateToFocus = new Date(0, 0);
-    dateToFocus.setFullYear(focus.getFullYear());
-    dateToFocus.setMonth(focus.getMonth() + months);
+  _getDateDiff(months, days) {
+    const date = new Date(0, 0);
+    date.setFullYear(this.focusedDate.getFullYear());
+    date.setMonth(this.focusedDate.getMonth() + months);
+    if (days) {
+      date.setDate(this.focusedDate.getDate() + days);
+    }
+    return date;
+  }
+
+  _moveFocusByDays(days) {
+    const dateToFocus = this._getDateDiff(0, days);
+
+    this._focusAllowedDate(dateToFocus, days, false);
+  }
 
+  _moveFocusByMonths(months) {
+    const dateToFocus = this._getDateDiff(months);
     const targetMonth = dateToFocus.getMonth();
 
-    dateToFocus.setDate((this._focusedMonthDate ||= focus.getDate()));
+    if (!this._focusedMonthDate) {
+      this._focusedMonthDate = this.focusedDate.getDate();
+    }
+
+    dateToFocus.setDate(this._focusedMonthDate);
+
     if (dateToFocus.getMonth() !== targetMonth) {
       dateToFocus.setDate(0);
     }
 
-    if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
-      this.focusDate(dateToFocus, true);
-    } else if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
-      // Move to min or max date
-      if (months > 0) {
-        // Pagedown
-        this.focusDate(this.maxDate);
-      } else {
-        // Pageup
-        this.focusDate(this.minDate);
-      }
-    } else {
-      // Move to closest allowed date
-      this._focusClosestDate(focus);
-    }
+    this._focusAllowedDate(dateToFocus, months, true);
   }
 
   _moveFocusInsideMonth(focusedDate, property) {
@@ -1038,9 +1038,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
       dateToFocus.setDate(0);
     }
 
-    if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
+    if (this._dateAllowed(dateToFocus)) {
       this.focusDate(dateToFocus);
-    } else if (this._dateAllowed(focusedDate, this.minDate, this.maxDate)) {
+    } else if (this._dateAllowed(focusedDate)) {
       // Move to minDate or maxDate
       this.focusDate(this[property]);
     } else {
@@ -1049,7 +1049,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     }
   }
 
-  _dateAllowed(date, min, max) {
+  _dateAllowed(date, min = this.minDate, max = this.maxDate) {
     return (!min || date >= min) && (!max || date <= max);
   }
 

package/src/vaadin-date-picker-overlay.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 { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';

package/src/vaadin-date-picker-year-scroller.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 { html } from '@polymer/polymer/lib/utils/html-tag.js';

package/src/vaadin-date-picker-year.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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-date-picker.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 { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

package/src/vaadin-date-picker.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/input-container/src/vaadin-input-container.js';

package/src/vaadin-infinite-scroller.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 { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
@@ -8,6 +8,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 
 /**
  * @extends HTMLElement
@@ -329,8 +330,7 @@ export class InfiniteScroller extends PolymerElement {
         itemWrapper.style.height = `${this.itemHeight}px`;
         itemWrapper.instance = {};
 
-        const contentId = (InfiniteScroller._contentIndex = InfiniteScroller._contentIndex + 1 || 0);
-        const slotName = `vaadin-infinite-scroller-item-content-${contentId}`;
+        const slotName = `vaadin-infinite-scroller-item-content-${generateUniqueId()}`;
 
         const slot = document.createElement('slot');
         slot.setAttribute('name', slotName);

package/src/vaadin-month-calendar.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 '@polymer/polymer/lib/elements/dom-repeat.js';