@vaadin/vaadin-date-picker 4.4.2 → 4.4.4

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-date-picker",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-date-picker",
-  "version": "4.4.2",
+  "version": "4.4.4",
   "main": "vaadin-date-picker.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -25,8 +25,6 @@
     "theme"
   ],
   "resolutions": {
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
@@ -47,10 +45,9 @@
     "@vaadin/vaadin-material-styles": "^1.3.2",
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
-  "scripts": {
-  "generate-typings": "gen-typescript-declarations --outDir . --verify"
-},
-"devDependencies": {
+  "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-form": "^3.0.0",
     "@polymer/iron-icon": "^3.0.0",
@@ -62,5 +59,9 @@
     "@vaadin/vaadin-demo-helpers": "^3.1.0",
     "@vaadin/vaadin-custom-field": "^1.0.0",
     "@vaadin/vaadin-dialog": "^2.2.1"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

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

@@ -295,6 +295,18 @@ class DatePickerOverlayContentElement extends
     return this.getAttribute('dir') === 'rtl';
   }
 
+  /**
+   * Whether to scroll to a sub-month position when scrolling to a date.
+   * This is active if the month scroller is not large enough to fit a
+   * full month. In that case we want to scroll to a position between
+   * two months in order to have the focused date in the visible area.
+   * @returns {boolean} whether to use sub-month scrolling
+   * @private
+   */
+  get __useSubMonthScrolling() {
+    return this.$.monthScroller.clientHeight < this.$.monthScroller.itemHeight + this.$.monthScroller.bufferOffset;
+  }
+
   ready() {
     super.ready();
     this.setAttribute('tabindex', 0);
@@ -356,7 +368,9 @@ class DatePickerOverlayContentElement extends
    * Scrolls the list to the given Date.
    */
   scrollToDate(date, animate) {
-    this._scrollToPosition(this._differenceInMonths(date, this._originDate), animate);
+    const offset = this.__useSubMonthScrolling ? this._calculateWeekScrollOffset(date) : 0;
+    this._scrollToPosition(this._differenceInMonths(date, this._originDate) + offset, animate);
+    this.$.monthScroller.forceUpdate();
   }
 
   _focusedDateChanged(focusedDate) {
@@ -376,20 +390,64 @@ class DatePickerOverlayContentElement extends
   /**
    * Scrolls the month and year scrollers enough to reveal the given date.
    */
-  revealDate(date) {
-    if (date) {
-      var diff = this._differenceInMonths(date, this._originDate);
-      var scrolledAboveViewport = this.$.monthScroller.position > diff;
+  revealDate(date, animate = true) {
+    if (!date) {
+      return;
+    }
+    const diff = this._differenceInMonths(date, this._originDate);
+    // If scroll area does not fit the full month, then always scroll with an offset to
+    // approximately display the week of the date
+    if (this.__useSubMonthScrolling) {
+      const offset = this._calculateWeekScrollOffset(date);
+      this._scrollToPosition(diff + offset, animate);
+      return;
+    }
+
+    // Otherwise determine if we need to scroll to make the month of the date visible
+    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);
-      } else if (scrolledBelowViewport) {
-        this._scrollToPosition(diff - visibleItems + 1, true);
+    if (scrolledAboveViewport) {
+      this._scrollToPosition(diff, animate);
+    } else if (scrolledBelowViewport) {
+      this._scrollToPosition(diff - visibleItems + 1, animate);
+    }
+  }
+
+  /**
+   * Calculates an offset to be added to the month scroll position
+   * when using sub-month scrolling, in order ensure that the week
+   * that the date is in is visible even for small scroll areas.
+   * As the month scroller uses a month as minimal scroll unit
+   * (a value of `1` equals one month), we can not exactly identify
+   * the position of a specific week. This is a best effort
+   * implementation based on manual testing.
+   * @param date the date for which to calculate the offset
+   * @returns {number} the offset
+   * @private
+   */
+  _calculateWeekScrollOffset(date) {
+    // Get first day of month
+    const temp = new Date(0, 0);
+    temp.setFullYear(date.getFullYear());
+    temp.setMonth(date.getMonth());
+    temp.setDate(1);
+    // Determine week (=row index) of date within the month
+    let week = 0;
+    while (temp.getDate() < date.getDate()) {
+      temp.setDate(temp.getDate() + 1);
+      if (temp.getDay() === this.i18n.firstDayOfWeek) {
+        week += 1;
       }
     }
+    // Calculate magic number that approximately keeps the week visible
+    return week / 6;
   }
 
   _onOverlayFocus() {

package/src/vaadin-date-picker.js

@@ -147,7 +147,7 @@ class DatePickerElement extends
   }
 
   static get version() {
-    return '4.4.2';
+    return '4.4.4';
   }
 
   static get properties() {

package/src/vaadin-infinite-scroller.js

@@ -143,6 +143,18 @@ class InfiniteScrollerElement extends PolymerElement {
     }
   }
 
+  /**
+   * Force the scroller to update clones after a reset, without
+   * waiting for the debouncer to resolve.
+   */
+  forceUpdate() {
+    if (this._debouncerUpdateClones) {
+      this._buffers[0].updated = this._buffers[1].updated = false;
+      this._updateClones();
+      this._debouncerUpdateClones.cancel();
+    }
+  }
+
   _activated(active) {
     if (active && !this._initialized) {
       this._createPool();
@@ -187,9 +199,9 @@ class InfiniteScrollerElement extends PolymerElement {
     }
 
     // Check if we scrolled enough to translate the buffer positions.
-    var bufferOffset = this.root.querySelector('.buffer').offsetTop;
-    var upperThresholdReached = scrollTop > this._buffers[1].translateY + this.itemHeight + bufferOffset;
-    var 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);
@@ -241,6 +253,13 @@ class InfiniteScrollerElement extends PolymerElement {
 
   }
 
+  /**
+   * @return {number}
+   */
+  get bufferOffset() {
+    return this._buffers[0].offsetTop;
+  }
+
   /**
    * @private
    */

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

@@ -36,7 +36,7 @@ const $_documentContainer = html`<dom-module id="lumo-date-picker-overlay-conten
             + var(--lumo-size-m) * 6
             + var(--lumo-space-s)
           );
-        --vaadin-infinite-scroller-buffer-offset: 20%;
+        --vaadin-infinite-scroller-buffer-offset: 10%;
         -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
         mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
         position: relative;