@vaadin/date-picker 23.2.0-alpha3 → 23.2.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.2.0-alpha3",
+  "version": "23.2.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -34,19 +36,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "23.2.0-alpha3",
-    "@vaadin/component-base": "23.2.0-alpha3",
-    "@vaadin/field-base": "23.2.0-alpha3",
-    "@vaadin/input-container": "23.2.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
-    "@vaadin/vaadin-overlay": "23.2.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
+    "@vaadin/button": "23.2.0-alpha6",
+    "@vaadin/component-base": "23.2.0-alpha6",
+    "@vaadin/field-base": "23.2.0-alpha6",
+    "@vaadin/input-container": "23.2.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha6",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha6",
+    "@vaadin/vaadin-overlay": "23.2.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "61f1fb56953434e97d34a8819640064301dd3d8a"
 }

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

@@ -99,13 +99,13 @@ declare class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixi
   addEventListener<K extends keyof DatePickerLightEventMap>(
     type: K,
     listener: (this: DatePickerLight, ev: DatePickerLightEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof DatePickerLightEventMap>(
     type: K,
     listener: (this: DatePickerLight, ev: DatePickerLightEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

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

@@ -33,13 +33,13 @@ export interface DatePickerI18n {
 
 export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DatePickerMixinClass> &
+): Constructor<DatePickerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<KeyboardMixinClass>;
+  Constructor<KeyboardMixinClass> &
+  T;
 
 export declare class DatePickerMixinClass {
   /**

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

@@ -46,7 +46,6 @@ export const DatePickerMixin = (subclass) =>
          */
         value: {
           type: String,
-          observer: '_valueChanged',
           notify: true,
           value: '',
         },
@@ -102,13 +101,6 @@ export const DatePickerMixin = (subclass) =>
           value: '(max-width: 420px), (max-height: 420px)',
         },
 
-        /**
-         * An array of ancestor elements whose -webkit-overflow-scrolling is forced from value
-         * 'touch' to value 'auto' in order to prevent them from clipping the dropdown. iOS only.
-         * @private
-         */
-        _touchPrevented: Array,
-
         /**
          * The object used to localize this component.
          * To change the default localization, replace the entire
@@ -264,7 +256,6 @@ export const DatePickerMixin = (subclass) =>
          */
         min: {
           type: String,
-          observer: '_minChanged',
         },
 
         /**
@@ -278,28 +269,28 @@ export const DatePickerMixin = (subclass) =>
          */
         max: {
           type: String,
-          observer: '_maxChanged',
         },
 
         /**
          * The earliest date that can be selected. All earlier dates will be disabled.
-         * @type {Date | string}
+         * @type {Date | undefined}
          * @protected
          */
         _minDate: {
           type: Date,
-          // Null does not work here because minimizer passes undefined to overlay (#351)
-          value: '',
+          observer: '__minDateChanged',
+          computed: '__computeMinOrMaxDate(min)',
         },
 
         /**
          * The latest date that can be selected. All later dates will be disabled.
-         * @type {Date | string}
+         * @type {Date | undefined}
          * @protected
          */
         _maxDate: {
           type: Date,
-          value: '',
+          observer: '__maxDateChanged',
+          computed: '__computeMinOrMaxDate(max)',
         },
 
         /** @private */
@@ -314,12 +305,6 @@ export const DatePickerMixin = (subclass) =>
           value: isIOS,
         },
 
-        /** @private */
-        _webkitOverflowScroll: {
-          type: Boolean,
-          value: document.createElement('div').style.webkitOverflowScrolling === '',
-        },
-
         /** @private */
         _focusOverlayOnOpen: Boolean,
 
@@ -689,41 +674,56 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    _handleDateChange(property, value, oldValue) {
-      if (!value) {
-        this[property] = '';
-        return;
-      }
+    /**
+     * Override the value observer from `InputMixin` to implement custom
+     * handling of the `value` property. The date-picker doesn't forward
+     * the value directly to the input like the default implementation of `InputMixin`.
+     * Instead, it parses the value into a date, puts it in `_selectedDate` which
+     * is then displayed in the input with respect to the specified date format.
+     *
+     * @param {string | undefined} value
+     * @param {string | undefined} oldValue
+     * @protected
+     * @override
+     */
+    _valueChanged(value, oldValue) {
+      const newDate = this._parseDate(value);
 
-      const date = this._parseDate(value);
-      if (!date) {
+      if (value && !newDate) {
+        // The new value cannot be parsed, revert the old value.
         this.value = oldValue;
         return;
       }
-      if (!dateEquals(this[property], date)) {
-        this[property] = date;
-        if (this.value) {
-          this.validate();
+
+      if (value) {
+        if (!dateEquals(this._selectedDate, newDate)) {
+          // Update the date instance only if the date has actually changed.
+          this._selectedDate = newDate;
+
+          if (oldValue !== undefined) {
+            // Validate only if `value` changes after initialization.
+            this.validate();
+          }
         }
+      } else {
+        this._selectedDate = null;
       }
-    }
-
-    /** @private */
-    _valueChanged(value, oldValue) {
-      this._handleDateChange('_selectedDate', value, oldValue);
 
       this._toggleHasValue(!!value);
     }
 
     /** @private */
-    _minChanged(value, oldValue) {
-      this._handleDateChange('_minDate', value, oldValue);
+    __minDateChanged() {
+      if (this.value) {
+        this.validate();
+      }
     }
 
     /** @private */
-    _maxChanged(value, oldValue) {
-      this._handleDateChange('_maxDate', value, oldValue);
+    __maxDateChanged() {
+      if (this.value) {
+        this.validate();
+      }
     }
 
     /** @protected */
@@ -749,10 +749,6 @@ export const DatePickerMixin = (subclass) =>
 
       window.addEventListener('scroll', this._boundOnScroll, true);
 
-      if (this._webkitOverflowScroll) {
-        this._touchPrevented = this._preventWebkitOverflowScrollingTouch(this.parentElement);
-      }
-
       if (this._focusOverlayOnOpen) {
         this._overlayContent.focusDateElement();
         this._focusOverlayOnOpen = false;
@@ -766,25 +762,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    // A hack needed for iOS to prevent dropdown from being clipped in an
-    // ancestor container with -webkit-overflow-scrolling: touch;
-    /** @private */
-    _preventWebkitOverflowScrollingTouch(element) {
-      const result = [];
-      while (element) {
-        if (window.getComputedStyle(element).webkitOverflowScrolling === 'touch') {
-          const oldInlineValue = element.style.webkitOverflowScrolling;
-          element.style.webkitOverflowScrolling = 'auto';
-          result.push({
-            element,
-            oldInlineValue,
-          });
-        }
-        element = element.parentElement;
-      }
-      return result;
-    }
-
     /** @private */
     _selectParsedOrFocusedDate() {
       // Select the parsed input or focused date
@@ -811,13 +788,6 @@ export const DatePickerMixin = (subclass) =>
     _onOverlayClosed() {
       window.removeEventListener('scroll', this._boundOnScroll, true);
 
-      if (this._touchPrevented) {
-        this._touchPrevented.forEach((prevented) => {
-          prevented.element.style.webkitOverflowScrolling = prevented.oldInlineValue;
-        });
-        this._touchPrevented = [];
-      }
-
       // No need to select date on close if it was confirmed by the user.
       if (this.__userConfirmedDate) {
         this.__userConfirmedDate = false;
@@ -980,7 +950,7 @@ export const DatePickerMixin = (subclass) =>
             if (e.shiftKey) {
               this._overlayContent.focusCancel();
             } else {
-              this._overlayContent.focusDate(this._focusedDate);
+              this._overlayContent.focusDateElement();
             }
           }
           break;
@@ -1093,6 +1063,11 @@ export const DatePickerMixin = (subclass) =>
       return this.$.overlay.content.querySelector('#overlay-content');
     }
 
+    /** @private */
+    __computeMinOrMaxDate(dateString) {
+      return this._parseDate(dateString);
+    }
+
     /**
      * Fired when the user commits a value change.
      *

package/src/vaadin-date-picker-overlay-content.js

@@ -318,10 +318,12 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     return this.getAttribute('dir') === 'rtl';
   }
 
+  get calendars() {
+    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')];
+  }
+
   get focusableDateElement() {
-    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')]
-      .map((calendar) => calendar.focusableDateElement)
-      .find(Boolean);
+    return this.calendars.map((calendar) => calendar.focusableDateElement).find(Boolean);
   }
 
   ready() {
@@ -526,6 +528,11 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
     this._targetPosition = targetPosition;
 
+    let revealResolve;
+    this._revealPromise = new Promise((resolve) => {
+      revealResolve = resolve;
+    });
+
     // http://gizma.com/easing/
     const easingFunction = (t, b, c, d) => {
       t /= d / 2;
@@ -566,7 +573,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
         this.$.monthScroller.position = this._targetPosition;
         this._targetPosition = undefined;
-        this.__tryFocusDate();
+
+        revealResolve();
+        this._revealPromise = undefined;
       }
 
       setTimeout(this._repositionYearScroller.bind(this), 1);
@@ -780,23 +789,32 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     switch (section) {
       case 'calendar':
         if (event.shiftKey) {
-          // Return focus back to the input field.
           event.preventDefault();
-          this.__focusInput();
+
+          if (this.hasAttribute('fullscreen')) {
+            // Trap focus in the overlay
+            this.$.cancelButton.focus();
+          } else {
+            this.__focusInput();
+          }
         }
         break;
       case 'today':
         if (event.shiftKey) {
-          // Browser returns focus back to the calendar.
-          // We need to move the scroll to focused date.
-          setTimeout(() => this.revealDate(this.focusedDate), 1);
+          event.preventDefault();
+          this.focusDateElement();
         }
         break;
       case 'cancel':
         if (!event.shiftKey) {
-          // Return focus back to the input field.
           event.preventDefault();
-          this.__focusInput();
+
+          if (this.hasAttribute('fullscreen')) {
+            // Trap focus in the overlay
+            this.focusDateElement();
+          } else {
+            this.__focusInput();
+          }
         }
         break;
       default:
@@ -805,28 +823,12 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
   }
 
   __onTodayButtonKeyDown(event) {
-    if (this.hasAttribute('fullscreen')) {
-      // Do not prevent closing on Esc
-      if (event.key !== 'Escape') {
-        event.stopPropagation();
-      }
-      return;
-    }
-
     if (event.key === 'Tab') {
       this._onTabKeyDown(event, 'today');
     }
   }
 
   __onCancelButtonKeyDown(event) {
-    if (this.hasAttribute('fullscreen')) {
-      // Do not prevent closing on Esc
-      if (event.key !== 'Escape') {
-        event.stopPropagation();
-      }
-      return;
-    }
-
     if (event.key === 'Tab') {
       this._onTabKeyDown(event, 'cancel');
     }
@@ -855,15 +857,29 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     if (!keepMonth) {
       this._focusedMonthDate = dateToFocus.getDate();
     }
-    await this.focusDateElement();
+    await this.focusDateElement(false);
   }
 
-  async focusDateElement() {
+  async focusDateElement(reveal = true) {
     this.__pendingDateFocus = this.focusedDate;
 
-    await new Promise((resolve) => {
-      requestAnimationFrame(resolve);
-    });
+    // Wait for `vaadin-month-calendar` elements to be rendered
+    if (!this.calendars.length) {
+      await new Promise((resolve) => {
+        setTimeout(resolve);
+      });
+    }
+
+    // Reveal focused date unless it has been just set,
+    // which triggers `revealDate()` in the observer.
+    if (reveal) {
+      this.revealDate(this.focusedDate);
+    }
+
+    if (this._revealPromise) {
+      // Wait for focused date to be scrolled into view.
+      await this._revealPromise;
+    }
 
     this.__tryFocusDate();
   }

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

@@ -146,13 +146,13 @@ declare class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin
   addEventListener<K extends keyof DatePickerEventMap>(
     type: K,
     listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof DatePickerEventMap>(
     type: K,
     listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/theme/lumo/vaadin-month-calendar-styles.js

@@ -151,9 +151,9 @@ registerStyles(
   { moduleId: 'lumo-month-calendar' },
 );
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @keyframes vaadin-date-picker-month-calendar-focus-date {
       50% {
@@ -163,4 +163,4 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);