@vaadin/date-picker 22.0.1 → 22.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "22.0.1",
+  "version": "22.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,21 +35,21 @@
     "@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": "^22.0.5",
+    "@vaadin/component-base": "^22.0.5",
+    "@vaadin/field-base": "^22.0.5",
+    "@vaadin/input-container": "^22.0.5",
+    "@vaadin/vaadin-lumo-styles": "^22.0.5",
+    "@vaadin/vaadin-material-styles": "^22.0.5",
+    "@vaadin/vaadin-overlay": "^22.0.5",
+    "@vaadin/vaadin-themable-mixin": "^22.0.5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "^22.0.1",
-    "@vaadin/polymer-legacy-adapter": "^22.0.1",
+    "@vaadin/dialog": "^22.0.5",
+    "@vaadin/polymer-legacy-adapter": "^22.0.5",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
+  "gitHead": "3e1990867670f3de2dec6fa1200d945623b2710c"
 }

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,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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

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

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,9 +1,8 @@
 /**
  * @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 { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
@@ -302,7 +301,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 */
@@ -415,17 +414,11 @@ 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();
-        }
-      });
     }
 
     /** @protected */
@@ -541,8 +534,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 */
@@ -575,6 +577,7 @@ export const DatePickerMixin = (subclass) =>
     _inputElementChanged(input) {
       super._inputElementChanged(input);
       if (input) {
+        input.autocomplete = 'off';
         input.setAttribute('role', 'combobox');
         input.setAttribute('aria-expanded', !!this.opened);
         this._applyInputValue(this._selectedDate);

package/src/vaadin-date-picker-overlay-content.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';
@@ -206,6 +206,7 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(GestureEventListen
           buffer-size="12"
           active="[[initialPosition]]"
           part="years"
+          aria-hidden="true"
         >
           <template>
             <div
@@ -406,18 +407,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);
       }
     }
   }

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

package/src/vaadin-date-picker.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';
@@ -146,8 +146,8 @@ 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 id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+          <div part="toggle-button" slot="suffix" on-tap="_toggle" role="button" aria-hidden="true"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -213,7 +213,10 @@ class DatePicker extends DatePickerMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
+
+    const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
+    toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
   }
 
   /** @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,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/polymer/lib/elements/dom-repeat.js';

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