@vaadin/date-picker 23.1.9 → 23.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.1.9",
+  "version": "23.1.11",
   "publishConfig": {
     "access": "public"
   },
@@ -34,19 +34,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "~23.1.9",
-    "@vaadin/component-base": "~23.1.9",
-    "@vaadin/field-base": "~23.1.9",
-    "@vaadin/input-container": "~23.1.9",
-    "@vaadin/vaadin-lumo-styles": "~23.1.9",
-    "@vaadin/vaadin-material-styles": "~23.1.9",
-    "@vaadin/vaadin-overlay": "~23.1.9",
-    "@vaadin/vaadin-themable-mixin": "~23.1.9"
+    "@vaadin/button": "~23.1.11",
+    "@vaadin/component-base": "~23.1.11",
+    "@vaadin/field-base": "~23.1.11",
+    "@vaadin/input-container": "~23.1.11",
+    "@vaadin/vaadin-lumo-styles": "~23.1.11",
+    "@vaadin/vaadin-material-styles": "~23.1.11",
+    "@vaadin/vaadin-overlay": "~23.1.11",
+    "@vaadin/vaadin-themable-mixin": "~23.1.11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "ad8461e09f049c3f04f50278d38d0f5a98604904"
+  "gitHead": "8431798f6d50c35193817be868ddee0de021166c"
 }

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

@@ -318,6 +318,18 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     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;
+  }
+
   get focusableDateElement() {
     return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')]
       .map((calendar) => calendar.focusableDateElement)
@@ -374,7 +386,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
    * 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();
   }
 
   /**
@@ -406,23 +420,63 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
    * Scrolls the month and year scrollers enough to reveal the given date.
    */
   revealDate(date, animate = true) {
-    if (date) {
-      const diff = this._differenceInMonths(date, this._originDate);
-      const scrolledAboveViewport = this.$.monthScroller.position > 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, animate);
-      } else if (scrolledBelowViewport) {
-        this._scrollToPosition(diff - visibleItems + 1, animate);
+    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;
+
+    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, 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;
   }
 
   _initialPositionChanged(initialPosition) {
@@ -680,10 +734,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     return months - date2.getMonth() + date1.getMonth();
   }
 
-  _differenceInYears(date1, date2) {
-    return this._differenceInMonths(date1, date2) / 12;
-  }
-
   _clear() {
     this._selectDate('');
   }

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

@@ -10,11 +10,6 @@ export const datePickerStyles = css`
     direction: ltr;
   }
 
-  :host([dir='rtl']) [part='value']::placeholder {
-    direction: rtl;
-    text-align: left;
-  }
-
   :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
     direction: rtl;
     text-align: left;

package/src/vaadin-infinite-scroller.js

@@ -143,6 +143,18 @@ class InfiniteScroller 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();

package/src/vaadin-month-calendar.js

@@ -426,12 +426,6 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
     return '-1';
   }
-
-  __getWeekNumbers(dates) {
-    return dates
-      .map((date) => this.__getWeekNumber(date, dates))
-      .filter((week, index, arr) => arr.indexOf(week) === index);
-  }
 }
 
 customElements.define(MonthCalendar.is, MonthCalendar);

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

@@ -37,7 +37,7 @@ registerStyles(
             + 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;

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

@@ -132,11 +132,6 @@ registerStyles(
       background: var(--material-background-color);
     }
 
-    :host([years-visible]) [part='years']::after {
-      top: calc(20px + 16px);
-      height: calc(100% - 20px - 16px);
-    }
-
     [part='year-number'] {
       font-size: var(--material-small-font-size);
       line-height: 10px; /* NOTE(platosha): chosen to align years to months */