@vaadin/date-picker 22.0.1 → 23.0.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "22.0.1",
+  "version": "23.0.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -32,24 +32,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/iron-a11y-announcer": "^3.0.0",
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^22.0.1",
-    "@vaadin/component-base": "^22.0.1",
-    "@vaadin/field-base": "^22.0.1",
-    "@vaadin/input-container": "^22.0.1",
-    "@vaadin/vaadin-lumo-styles": "^22.0.1",
-    "@vaadin/vaadin-material-styles": "^22.0.1",
-    "@vaadin/vaadin-overlay": "^22.0.1",
-    "@vaadin/vaadin-themable-mixin": "^22.0.1"
+    "@vaadin/button": "23.0.0-alpha3",
+    "@vaadin/component-base": "23.0.0-alpha3",
+    "@vaadin/field-base": "23.0.0-alpha3",
+    "@vaadin/input-container": "23.0.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha3",
+    "@vaadin/vaadin-overlay": "23.0.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "^22.0.1",
-    "@vaadin/polymer-legacy-adapter": "^22.0.1",
+    "@vaadin/dialog": "23.0.0-alpha3",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
+  "gitHead": "490037919a9e054cc002c1b3be0c94a1603e1a44"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,12 +1,19 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 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';
 
+/**
+ * Fired when the user commits a value change.
+ */
+export type DatePickerLightChangeEvent = Event & {
+  target: DatePickerLight;
+};
+
 /**
  * Fired when the `opened` property changes.
  */
@@ -30,7 +37,9 @@ export interface DatePickerLightCustomEventMap {
   'value-changed': DatePickerLightValueChangedEvent;
 }
 
-export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePickerLightCustomEventMap {}
+export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePickerLightCustomEventMap {
+  change: DatePickerLightChangeEvent;
+}
 
 /**
  * `<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@polymer/iron-media-query/iron-media-query.js';
@@ -74,7 +74,8 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
         opened="{{opened}}"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
-        on-vaadin-overlay-outside-click="focus"
+        restore-focus-on-close
+        restore-focus-node="[[inputElement]]"
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
       >
         <template>
@@ -138,17 +139,17 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
     this._setFocusElement(this.inputElement);
   }
 
+  /** @return {string | undefined} */
+  get _inputValue() {
+    return this.inputElement && this.inputElement[dashToCamelCase(this.attrForValue)];
+  }
+
   set _inputValue(value) {
     if (this.inputElement) {
       this.inputElement[dashToCamelCase(this.attrForValue)] = value;
     }
   }
 
-  /** @return {string | undefined} */
-  get _inputValue() {
-    return this.inputElement && this.inputElement[dashToCamelCase(this.attrForValue)];
-  }
-
   // Workaround https://github.com/vaadin/web-components/issues/2855
   /** @protected */
   _openedChanged(opened) {

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * 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';

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

@@ -1,20 +1,22 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
+import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
 import { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vaadin-date-picker-helper.js';
 
 /**
  * @polymerMixin
+ * @param {function(new:HTMLElement)} subclass
  */
 export const DatePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends DelegateFocusMixin(InputMixin(KeyboardMixin(subclass))) {
+  class VaadinDatePickerMixin extends ControllerMixin(DelegateFocusMixin(InputMixin(KeyboardMixin(subclass)))) {
     static get properties() {
       return {
         /**
@@ -302,7 +304,7 @@ export const DatePickerMixin = (subclass) =>
         /** @private */
         _noInput: {
           type: Boolean,
-          computed: '_isNoInput(inputElement, _fullscreen, _ios, i18n, i18n.*)'
+          computed: '_isNoInput(inputElement, _fullscreen, _ios, i18n, opened, autoOpenDisabled)'
         },
 
         /** @private */
@@ -349,6 +351,11 @@ export const DatePickerMixin = (subclass) =>
       return null;
     }
 
+    /** @protected */
+    get _inputValue() {
+      return this.inputElement ? this.inputElement.value : undefined;
+    }
+
     /** @protected */
     set _inputValue(value) {
       if (this.inputElement) {
@@ -356,11 +363,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @protected */
-    get _inputValue() {
-      return this.inputElement ? this.inputElement.value : undefined;
-    }
-
     /** @private */
     get _nativeInput() {
       if (this.inputElement) {
@@ -415,17 +417,13 @@ export const DatePickerMixin = (subclass) =>
     ready() {
       super.ready();
 
-      addListener(this, 'tap', (e) => {
+      this.addEventListener('click', (e) => {
         if (!this._isClearButton(e) && (!this.autoOpenDisabled || this._noInput)) {
           this.open();
         }
       });
 
-      this.addEventListener('touchend', (e) => {
-        if (!this._isClearButton(e)) {
-          e.preventDefault();
-        }
-      });
+      this.addController(new VirtualKeyboardController(this));
     }
 
     /** @protected */
@@ -541,8 +539,17 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _isNoInput(inputElement, fullscreen, ios, i18n) {
-      return !inputElement || fullscreen || ios || !i18n.parseDate;
+    // eslint-disable-next-line max-params
+    _isNoInput(inputElement, fullscreen, ios, i18n, opened, autoOpenDisabled) {
+      // On fullscreen mode, text input is disabled if auto-open isn't disabled or
+      // whenever the dropdown is opened
+      const noInputOnFullscreenMode = fullscreen && (!autoOpenDisabled || opened);
+      // On iOS, text input is disabled whenever the dropdown is opened, because
+      // the virtual keyboard doesn't affect the viewport metrics and thus the
+      // dropdown could get covered by the keyboard.
+      const noInputOnIos = ios && opened;
+
+      return !inputElement || noInputOnFullscreenMode || noInputOnIos || !i18n.parseDate;
     }
 
     /** @private */
@@ -901,15 +908,13 @@ export const DatePickerMixin = (subclass) =>
               this._selectedDate = this._overlayContent.focusedDate;
             }
             this.close();
+          } else if (!isValidDate && this.inputElement.value !== '') {
+            this.validate();
           } else {
-            if (!isValidDate && this.inputElement.value !== '') {
+            const oldValue = this.value;
+            this._selectParsedOrFocusedDate();
+            if (oldValue === this.value) {
               this.validate();
-            } else {
-              const oldValue = this.value;
-              this._selectParsedOrFocusedDate();
-              if (oldValue === this.value) {
-                this.validate();
-              }
             }
           }
           break;
@@ -921,7 +926,7 @@ export const DatePickerMixin = (subclass) =>
           } else if (this.clearButtonVisible) {
             this._onClearButtonClick();
           } else if (this.autoOpenDisabled) {
-            //Do not restore selected date if Esc was pressed after clearing input field
+            // Do not restore selected date if Esc was pressed after clearing input field
             if (this.inputElement.value === '') {
               this._selectedDate = null;
             }
@@ -934,7 +939,7 @@ export const DatePickerMixin = (subclass) =>
         case 'Tab':
           if (this.opened) {
             e.preventDefault();
-            //Clear the selection range (remains visible on IE)
+            // Clear the selection range (remains visible on IE)
             this._setSelectionRange(0, 0);
             if (e.shiftKey) {
               this._overlayContent.focusCancel();
@@ -944,6 +949,8 @@ export const DatePickerMixin = (subclass) =>
             }
           }
           break;
+        default:
+          break;
       }
     }
 

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

@@ -1,19 +1,18 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/button/src/vaadin-button.js';
 import './vaadin-month-calendar.js';
 import './vaadin-infinite-scroller.js';
-import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import { addListener, setTouchAction } from '@polymer/polymer/lib/utils/gestures.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { dateEquals, extractDateParts, getClosestDate, getISOWeekNumber } from './vaadin-date-picker-helper.js';
 
@@ -21,7 +20,7 @@ import { dateEquals, extractDateParts, getClosestDate, getISOWeekNumber } from '
  * @extends HTMLElement
  * @private
  */
-class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListeners(PolymerElement))) {
+class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
@@ -164,15 +163,15 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
 
       <div part="overlay-header" on-touchend="_preventDefault" desktop$="[[_desktopMode]]" aria-hidden="true">
         <div part="label">[[_formatDisplayed(selectedDate, i18n.formatDate, label)]]</div>
-        <div part="clear-button" on-tap="_clear" showclear$="[[_showClear(selectedDate)]]"></div>
-        <div part="toggle-button" on-tap="_cancel"></div>
+        <div part="clear-button" showclear$="[[_showClear(selectedDate)]]"></div>
+        <div part="toggle-button"></div>
 
-        <div part="years-toggle-button" desktop$="[[_desktopMode]]" on-tap="_toggleYearScroller" aria-hidden="true">
+        <div part="years-toggle-button" desktop$="[[_desktopMode]]" aria-hidden="true">
           [[_yearAfterXMonths(_visibleMonthIndex)]]
         </div>
       </div>
 
-      <div id="scrollers" desktop$="[[_desktopMode]]" on-track="_track">
+      <div id="scrollers" desktop$="[[_desktopMode]]">
         <vaadin-infinite-scroller
           id="monthScroller"
           on-custom-scroll="_onMonthScroll"
@@ -200,7 +199,6 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
         </vaadin-infinite-scroller>
         <vaadin-infinite-scroller
           id="yearScroller"
-          on-tap="_onYearTap"
           on-custom-scroll="_onYearScroll"
           on-touchstart="_onYearScrollTouchStart"
           buffer-size="12"
@@ -227,13 +225,10 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
           part="today-button"
           theme="tertiary"
           disabled="[[!_isTodayAllowed(minDate, maxDate)]]"
-          on-tap="_onTodayTap"
         >
           [[i18n.today]]
         </vaadin-button>
-        <vaadin-button id="cancelButton" part="cancel-button" theme="tertiary" on-tap="_cancel">
-          [[i18n.cancel]]
-        </vaadin-button>
+        <vaadin-button id="cancelButton" part="cancel-button" theme="tertiary"> [[i18n.cancel]] </vaadin-button>
       </div>
       <iron-media-query query="(min-width: 375px)" query-matches="{{_desktopMode}}"></iron-media-query>
     `;
@@ -330,6 +325,17 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
     addListener(this, 'tap', this._stopPropagation);
     this.addEventListener('focus', this._onOverlayFocus.bind(this));
     this.addEventListener('blur', this._onOverlayBlur.bind(this));
+    addListener(this.$.scrollers, 'track', this._track.bind(this));
+    addListener(this.shadowRoot.querySelector('[part="clear-button"]'), 'tap', this._clear.bind(this));
+    addListener(this.shadowRoot.querySelector('[part="today-button"]'), 'tap', this._onTodayTap.bind(this));
+    addListener(this.shadowRoot.querySelector('[part="cancel-button"]'), 'tap', this._cancel.bind(this));
+    addListener(this.shadowRoot.querySelector('[part="toggle-button"]'), 'tap', this._cancel.bind(this));
+    addListener(this.shadowRoot.querySelector('[part="years"]'), 'tap', this._onYearTap.bind(this));
+    addListener(
+      this.shadowRoot.querySelector('[part="years-toggle-button"]'),
+      'tap',
+      this._toggleYearScroller.bind(this)
+    );
   }
 
   /**
@@ -344,35 +350,25 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
     this._closeYearScroller();
     this._toggleAnimateClass(true);
     setTouchAction(this.$.scrollers, 'pan-y');
-    IronA11yAnnouncer.requestAvailability();
   }
 
   announceFocusedDate() {
-    var focusedDate = this._currentlyFocusedDate();
-    var announce = [];
+    const focusedDate = this._currentlyFocusedDate();
+    let messages = [];
     if (dateEquals(focusedDate, new Date())) {
-      announce.push(this.i18n.today);
+      messages.push(this.i18n.today);
     }
-    announce = announce.concat([
+    messages = messages.concat([
       this.i18n.weekdays[focusedDate.getDay()],
       focusedDate.getDate(),
       this.i18n.monthNames[focusedDate.getMonth()],
       focusedDate.getFullYear()
     ]);
     if (this.showWeekNumbers && this.i18n.firstDayOfWeek === 1) {
-      announce.push(this.i18n.week);
-      announce.push(getISOWeekNumber(focusedDate));
+      messages.push(this.i18n.week);
+      messages.push(getISOWeekNumber(focusedDate));
     }
-    this.dispatchEvent(
-      new CustomEvent('iron-announce', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          text: announce.join(' ')
-        }
-      })
-    );
-    return;
+    announce(messages.join(' '));
   }
 
   /**
@@ -406,18 +402,22 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
   /**
    * Scrolls the month and year scrollers enough to reveal the given date.
    */
-  revealDate(date) {
+  revealDate(date, animate = true) {
     if (date) {
-      var diff = this._differenceInMonths(date, this._originDate);
-      var scrolledAboveViewport = this.$.monthScroller.position > diff;
+      const diff = this._differenceInMonths(date, this._originDate);
+      const scrolledAboveViewport = this.$.monthScroller.position > diff;
 
-      var visibleItems = this.$.monthScroller.clientHeight / this.$.monthScroller.itemHeight;
-      var scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
+      const visibleArea = Math.max(
+        this.$.monthScroller.itemHeight,
+        this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2
+      );
+      const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
+      const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
 
       if (scrolledAboveViewport) {
-        this._scrollToPosition(diff, true);
+        this._scrollToPosition(diff, animate);
       } else if (scrolledBelowViewport) {
-        this._scrollToPosition(diff - visibleItems + 1, true);
+        this._scrollToPosition(diff - visibleItems + 1, animate);
       }
     }
   }
@@ -473,9 +473,8 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
   _formatDisplayed(date, formatDate, label) {
     if (date) {
       return formatDate(extractDateParts(date));
-    } else {
-      return label;
     }
+    return label;
   }
 
   _onTodayTap() {
@@ -533,7 +532,7 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
       if (t < 1) {
         return (c / 2) * t * t + b;
       }
-      t--;
+      t -= 1;
       return (-c / 2) * (t * (t - 2) - 1) + b;
     };
 
@@ -605,11 +604,9 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
       case 'start':
         this._toggleAnimateClass(false);
         break;
-
       case 'track':
         this._handleTrack(e);
         break;
-
       case 'end':
         this._toggleAnimateClass(true);
         if (this._translateX >= this._yearScrollerWidth / 2) {
@@ -618,6 +615,8 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
           this._openYearScroller();
         }
         break;
+      default:
+        break;
     }
   }
 
@@ -811,6 +810,8 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
         case 'Escape':
           this._cancel();
           break;
+        default:
+          break;
       }
     }
   }
@@ -837,20 +838,18 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
 
     if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
       this._focusDate(dateToFocus);
-    } else {
-      if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
-        // Move to min or max date
-        if (days > 0) {
-          // down or right
-          this._focusDate(this.maxDate);
-        } else {
-          // up or left
-          this._focusDate(this.minDate);
-        }
+    } else if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
+      // Move to min or max date
+      if (days > 0) {
+        // down or right
+        this._focusDate(this.maxDate);
       } else {
-        // Move to closest allowed date
-        this._focusClosestDate(focus);
+        // up or left
+        this._focusDate(this.minDate);
       }
+    } else {
+      // Move to closest allowed date
+      this._focusClosestDate(focus);
     }
   }
 
@@ -869,20 +868,18 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
 
     if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
       this.focusedDate = dateToFocus;
-    } 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 if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
+      // Move to min or max date
+      if (months > 0) {
+        // pagedown
+        this._focusDate(this.maxDate);
       } else {
-        // Move to closest allowed date
-        this._focusClosestDate(focus);
+        // pageup
+        this._focusDate(this.minDate);
       }
+    } else {
+      // Move to closest allowed date
+      this._focusClosestDate(focus);
     }
   }
 
@@ -900,14 +897,12 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
 
     if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
       this._focusDate(dateToFocus);
+    } else if (this._dateAllowed(focusedDate, this.minDate, this.maxDate)) {
+      // Move to minDate or maxDate
+      this._focusDate(this[property]);
     } else {
-      if (this._dateAllowed(focusedDate, this.minDate, this.maxDate)) {
-        // Move to minDate or maxDate
-        this._focusDate(this[property]);
-      } else {
-        // Move to closest allowed date
-        this._focusClosestDate(focusedDate);
-      }
+      // Move to closest allowed date
+      this._focusClosestDate(focusedDate);
     }
   }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 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';
@@ -9,6 +9,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
 export { DatePickerDate, DatePickerI18n } from './vaadin-date-picker-mixin.js';
 
+/**
+ * Fired when the user commits a value change.
+ */
+export type DatePickerChangeEvent = Event & {
+  target: DatePicker;
+};
+
 /**
  * Fired when the `opened` property changes.
  */
@@ -32,7 +39,9 @@ export interface DatePickerCustomEventMap {
   'value-changed': DatePickerValueChangedEvent;
 }
 
-export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCustomEventMap {}
+export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCustomEventMap {
+  change: DatePickerChangeEvent;
+}
 
 /**
  * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.

package/src/vaadin-date-picker.js

@@ -1,15 +1,15 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
@@ -116,9 +116,7 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * @mixes ThemableMixin
  * @mixes InputControlMixin
  */
-class DatePicker extends DatePickerMixin(
-  InputControlMixin(GestureEventListeners(ThemableMixin(ElementMixin(PolymerElement))))
-) {
+class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-date-picker';
   }
@@ -147,7 +145,7 @@ class DatePicker extends DatePickerMixin(
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
           <div id="clearButton" part="clear-button" slot="suffix"></div>
-          <div part="toggle-button" slot="suffix" on-tap="_toggle" role="button"></div>
+          <div part="toggle-button" slot="suffix" role="button"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -165,7 +163,8 @@ class DatePicker extends DatePickerMixin(
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
-        on-vaadin-overlay-outside-click="focus"
+        restore-focus-on-close
+        restore-focus-node="[[inputElement]]"
         disable-upgrade
       >
         <template>
@@ -213,7 +212,8 @@ class DatePicker extends DatePickerMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
+    addListener(this.shadowRoot.querySelector('[part="toggle-button"]'), 'tap', this._toggle.bind(this));
   }
 
   /** @private */

package/src/vaadin-infinite-scroller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 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';
@@ -186,9 +186,9 @@ class InfiniteScroller extends PolymerElement {
     }
 
     // Check if we scrolled enough to translate the buffer positions.
-    const bufferOffset = this.root.querySelector('.buffer').offsetTop;
-    const upperThresholdReached = scrollTop > this._buffers[1].translateY + this.itemHeight + bufferOffset;
-    const lowerThresholdReached = scrollTop < this._buffers[0].translateY + this.itemHeight + bufferOffset;
+    const offset = this.itemHeight + this.bufferOffset;
+    const upperThresholdReached = scrollTop > this._buffers[1].translateY + offset;
+    const lowerThresholdReached = scrollTop < this._buffers[0].translateY + offset;
 
     if (upperThresholdReached || lowerThresholdReached) {
       this._translateBuffer(lowerThresholdReached);
@@ -209,10 +209,24 @@ class InfiniteScroller extends PolymerElement {
     });
   }
 
+  /**
+   * @return {number}
+   */
+  get bufferOffset() {
+    return this._buffers[0].offsetTop;
+  }
+
+  /**
+   * @return {number}
+   */
+  get position() {
+    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
+  }
+
   /**
    * Current scroller position as index. Can be a fractional number.
    *
-   * @type {Number}
+   * @type {number}
    */
   set position(index) {
     this._preventScrollEvent = true;
@@ -239,12 +253,8 @@ class InfiniteScroller extends PolymerElement {
   }
 
   /**
-   * @private
+   * @return {number}
    */
-  get position() {
-    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
-  }
-
   get itemHeight() {
     if (!this._itemHeightVal) {
       const itemHeight = getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');

package/src/vaadin-month-calendar.js

@@ -1,11 +1,11 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 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';
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-helper.js';
 
@@ -13,7 +13,7 @@ import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-
  * @extends HTMLElement
  * @private
  */
-class MonthCalendar extends ThemableMixin(GestureEventListeners(PolymerElement)) {
+class MonthCalendar extends ThemableMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
@@ -59,7 +59,7 @@ class MonthCalendar extends ThemableMixin(GestureEventListeners(PolymerElement))
       </style>
 
       <div part="month-header" role="heading">[[_getTitle(month, i18n.monthNames)]]</div>
-      <div id="monthGrid" on-tap="_handleTap" on-touchend="_preventDefault" on-touchstart="_onMonthGridTouchStart">
+      <div id="monthGrid" on-touchend="_preventDefault" on-touchstart="_onMonthGridTouchStart">
         <div id="weekdays-container">
           <div hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n.firstDayOfWeek)]]" part="weekday"></div>
           <div part="weekdays">
@@ -174,6 +174,12 @@ class MonthCalendar extends ThemableMixin(GestureEventListeners(PolymerElement))
     return ['_showWeekNumbersChanged(showWeekNumbers, i18n.firstDayOfWeek)'];
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+    addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
+  }
+
   _dateEquals(date1, date2) {
     return dateEquals(date1, date2);
   }

package/theme/material/vaadin-date-picker-overlay-content-styles.js

@@ -110,7 +110,7 @@ registerStyles(
     /* Month scroller */
 
     [part='months'] {
-      --vaadin-infinite-scroller-item-height: 320px;
+      --vaadin-infinite-scroller-item-height: 328px;
       text-align: center;
     }