@vaadin/date-picker 23.2.0-dev.8a7678b70 → 23.2.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.2.0-rc1",
   "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-dev.8a7678b70",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/field-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/input-container": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-overlay": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
+    "@vaadin/button": "23.2.0-rc1",
+    "@vaadin/component-base": "23.2.0-rc1",
+    "@vaadin/field-base": "23.2.0-rc1",
+    "@vaadin/input-container": "23.2.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-rc1",
+    "@vaadin/vaadin-material-styles": "23.2.0-rc1",
+    "@vaadin/vaadin-overlay": "23.2.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-rc1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
 }

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2022 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';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
 export { DatePickerDate, DatePickerI18n } from './vaadin-date-picker-mixin.js';
@@ -29,12 +30,19 @@ export type DatePickerLightInvalidChangedEvent = CustomEvent<{ value: boolean }>
  */
 export type DatePickerLightValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type DatePickerLightValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface DatePickerLightCustomEventMap {
   'opened-changed': DatePickerLightOpenedChangedEvent;
 
   'invalid-changed': DatePickerLightInvalidChangedEvent;
 
   'value-changed': DatePickerLightValueChangedEvent;
+
+  validated: DatePickerLightValidatedEvent;
 }
 
 export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePickerLightCustomEventMap {
@@ -79,8 +87,9 @@ export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePicker
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-declare class DatePickerLight extends ThemableMixin(DatePickerMixin(HTMLElement)) {
+declare class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(HTMLElement))) {
   /**
    * Name of the two-way data-bindable property representing the
    * value of the custom input field.
@@ -90,13 +99,13 @@ declare class DatePickerLight extends ThemableMixin(DatePickerMixin(HTMLElement)
   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-light.js

@@ -7,6 +7,7 @@ import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
 
@@ -48,12 +49,13 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DatePickerMixin
  */
-class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
+class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -72,7 +74,7 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
         fullscreen$="[[_fullscreen]]"
         opened="{{opened}}"
         on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
         theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"

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

@@ -3,12 +3,13 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+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 { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 
 export interface DatePickerDate {
   day: number;
@@ -33,13 +34,14 @@ 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<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<KeyboardMixinClass>;
+  Constructor<KeyboardMixinClass> &
+  T;
 
 export declare class DatePickerMixinClass {
   /**
@@ -188,13 +190,6 @@ export declare class DatePickerMixinClass {
    */
   close(): void;
 
-  /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
-   *
-   * @returns True if the value is valid and sets the `invalid` flag appropriately
-   */
-  validate(): boolean;
-
   /**
    * Returns true if the current input value satisfies all constraints (if any)
    *

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

@@ -8,7 +8,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-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 { InputMixin } from '@vaadin/field-base/src/input-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 { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vaadin-date-picker-helper.js';
 
@@ -17,7 +17,9 @@ import { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vaa
  * @param {function(new:HTMLElement)} subclass
  */
 export const DatePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends ControllerMixin(DelegateFocusMixin(InputMixin(KeyboardMixin(subclass)))) {
+  class VaadinDatePickerMixin extends ControllerMixin(
+    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
+  ) {
     static get properties() {
       return {
         /**
@@ -46,7 +48,6 @@ export const DatePickerMixin = (subclass) =>
          */
         value: {
           type: String,
-          observer: '_valueChanged',
           notify: true,
           value: '',
         },
@@ -102,13 +103,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 +258,6 @@ export const DatePickerMixin = (subclass) =>
          */
         min: {
           type: String,
-          observer: '_minChanged',
         },
 
         /**
@@ -278,28 +271,26 @@ 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: '',
+          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: '',
+          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,
 
@@ -335,6 +320,10 @@ export const DatePickerMixin = (subclass) =>
       ];
     }
 
+    static get constraints() {
+      return [...super.constraints, 'min', 'max'];
+    }
+
     /**
      * Override a getter from `InputControlMixin` to make it optional
      * and to prevent warning when a clear button is missing,
@@ -401,12 +390,10 @@ export const DatePickerMixin = (subclass) =>
           }
         }
 
-        if (this.inputElement.value === '' && this.__dispatchChange) {
-          this.validate();
+        this.validate();
+
+        if (this._inputValue === '' && this.value !== '') {
           this.value = '';
-          this.__dispatchChange = false;
-        } else {
-          this.validate();
         }
       }
     }
@@ -475,14 +462,19 @@ export const DatePickerMixin = (subclass) =>
       this.$.overlay.removeAttribute('disable-upgrade');
       this._overlayInitialized = true;
 
-      this.$.overlay.addEventListener('opened-changed', (e) => (this.opened = e.detail.value));
+      this.$.overlay.addEventListener('opened-changed', (e) => {
+        this.opened = e.detail.value;
+      });
 
       this.$.overlay.addEventListener('vaadin-overlay-escape-press', () => {
         this._focusedDate = this._selectedDate;
         this._close();
       });
 
-      this._overlayContent.addEventListener('close', this._close.bind(this));
+      this._overlayContent.addEventListener('close', () => {
+        this._close();
+      });
+
       this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));
 
       // User confirmed selected date by clicking the calendar.
@@ -491,7 +483,7 @@ export const DatePickerMixin = (subclass) =>
 
         this._selectDate(e.detail.date);
 
-        this._close(e);
+        this._close();
       });
 
       // User confirmed selected date by pressing Enter or Today.
@@ -501,24 +493,18 @@ export const DatePickerMixin = (subclass) =>
         this._selectDate(e.detail.date);
       });
 
-      // Keep focus attribute in focusElement for styling
+      // 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', () => {
-        this._setFocused(true);
+        if (this._keyboardActive) {
+          this._setFocused(true);
+        }
       });
 
       this.addEventListener('mousedown', () => this.__bringToFront());
       this.addEventListener('touchstart', () => this.__bringToFront());
     }
 
-    /**
-     * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
-     *
-     * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
-     */
-    validate() {
-      return !(this.invalid = !this.checkValidity());
-    }
-
     /**
      * Returns true if the current input value satisfies all constraints (if any)
      *
@@ -529,7 +515,7 @@ export const DatePickerMixin = (subclass) =>
     checkValidity() {
       const inputValid =
         !this._inputValue ||
-        (this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
+        (!!this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
       const minMaxValid = !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate);
 
       let inputValidity = true;
@@ -545,6 +531,51 @@ export const DatePickerMixin = (subclass) =>
       return inputValid && minMaxValid && inputValidity;
     }
 
+    /**
+     * Override method inherited from `FocusMixin`
+     * to not call `_setFocused(true)` when focus
+     * is restored after closing overlay on click,
+     * and to avoid removing `focus-ring` attribute.
+     *
+     * @param {!FocusEvent} _event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldSetFocus(_event) {
+      return !this._shouldKeepFocusRing;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     * to prevent removing the `focused` attribute:
+     * - when moving focus to the overlay content,
+     * - when closing on date click / outside click.
+     *
+     * @param {!FocusEvent} _event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldRemoveFocus(_event) {
+      return !this.opened;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     * to store the `focus-ring` state to restore
+     * it later when closing on outside click.
+     *
+     * @param {boolean} focused
+     * @protected
+     * @override
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      this._shouldKeepFocusRing = focused && this._keyboardActive;
+    }
+
     /**
      * Select date on user interaction and set the flag
      * to fire change event if necessary.
@@ -564,10 +595,7 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _close(e) {
-      if (e) {
-        e.stopPropagation();
-      }
+    _close() {
       this._focus();
       this.close();
     }
@@ -696,47 +724,46 @@ 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();
-        }
-      }
-    }
 
-    /** @private */
-    _valueChanged(value, oldValue) {
-      this._handleDateChange('_selectedDate', value, oldValue);
-
-      this._toggleHasValue(!!value);
-    }
+      if (value) {
+        if (!dateEquals(this._selectedDate, newDate)) {
+          // Update the date instance only if the date has actually changed.
+          this._selectedDate = newDate;
 
-    /** @private */
-    _minChanged(value, oldValue) {
-      this._handleDateChange('_minDate', value, oldValue);
-    }
+          if (oldValue !== undefined) {
+            // Validate only if `value` changes after initialization.
+            this.validate();
+          }
+        }
+      } else {
+        this._selectedDate = null;
+      }
 
-    /** @private */
-    _maxChanged(value, oldValue) {
-      this._handleDateChange('_maxDate', value, oldValue);
+      this._toggleHasValue(this._hasValue);
     }
 
     /** @protected */
     _onOverlayOpened() {
-      this._openedWithFocusRing = this.hasAttribute('focus-ring');
-
       const parsedInitialPosition = this._parseDate(this.initialPosition);
 
       const initialPosition =
@@ -756,10 +783,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;
@@ -773,25 +796,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
@@ -818,13 +822,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;
@@ -840,11 +837,6 @@ export const DatePickerMixin = (subclass) =>
       if (!this.value) {
         this.validate();
       }
-
-      // If the input isn't focused when overlay closes (fullscreen mode), clear focused state
-      if (this.getRootNode().activeElement !== this.inputElement) {
-        this._setFocused(false);
-      }
     }
 
     /** @private */
@@ -897,10 +889,7 @@ export const DatePickerMixin = (subclass) =>
     _onChange(event) {
       // For change event on the native <input> blur, after the input is cleared,
       // we schedule change event to be dispatched on date-picker blur.
-      if (
-        this.inputElement.value === '' &&
-        !(event.detail && event.detail.sourceEvent && event.detail.sourceEvent.__fromClearButton)
-      ) {
+      if (this._inputValue === '') {
         this.__dispatchChange = true;
       }
 
@@ -987,7 +976,7 @@ export const DatePickerMixin = (subclass) =>
             if (e.shiftKey) {
               this._overlayContent.focusCancel();
             } else {
-              this._overlayContent.focusDate(this._focusedDate);
+              this._overlayContent.focusDateElement();
             }
           }
           break;
@@ -1100,6 +1089,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.
      *