@vaadin/date-picker 23.0.0 → 23.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.0.0",
+  "version": "23.0.3",
   "publishConfig": {
     "access": "public"
   },
@@ -34,21 +34,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^23.0.0",
-    "@vaadin/component-base": "^23.0.0",
-    "@vaadin/field-base": "^23.0.0",
-    "@vaadin/input-container": "^23.0.0",
-    "@vaadin/vaadin-lumo-styles": "^23.0.0",
-    "@vaadin/vaadin-material-styles": "^23.0.0",
-    "@vaadin/vaadin-overlay": "^23.0.0",
-    "@vaadin/vaadin-themable-mixin": "^23.0.0"
+    "@vaadin/button": "^23.0.3",
+    "@vaadin/component-base": "^23.0.3",
+    "@vaadin/field-base": "^23.0.3",
+    "@vaadin/input-container": "^23.0.3",
+    "@vaadin/vaadin-lumo-styles": "^23.0.3",
+    "@vaadin/vaadin-material-styles": "^23.0.3",
+    "@vaadin/vaadin-overlay": "^23.0.3",
+    "@vaadin/vaadin-themable-mixin": "^23.0.3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "^23.0.0",
-    "@vaadin/polymer-legacy-adapter": "^23.0.0",
+    "@vaadin/dialog": "^23.0.3",
+    "@vaadin/polymer-legacy-adapter": "^23.0.3",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "e5ce38429a14de1448d732614e359fb32b2c42e0"
+  "gitHead": "3f010a4167c9e04405c9dfab098da0821e02a601"
 }

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

@@ -83,7 +83,7 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
             i18n="[[i18n]]"
             fullscreen$="[[_fullscreen]]"
             label="[[label]]"
-            selected-date="{{_selectedDate}}"
+            selected-date="[[_selectedDate]]"
             slot="dropdown-content"
             focused-date="{{_focusedDate}}"
             show-week-numbers="[[showWeekNumbers]]"

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

@@ -394,7 +394,7 @@ export const DatePickerMixin = (subclass) =>
         if (this.autoOpenDisabled) {
           const parsedDate = this._getParsedDate();
           if (this._isValidDate(parsedDate)) {
-            this._selectedDate = parsedDate;
+            this._selectDate(parsedDate);
           }
         }
 
@@ -434,6 +434,25 @@ export const DatePickerMixin = (subclass) =>
       this.opened = false;
     }
 
+    /**
+     * Override Polymer lifecycle callback to dispatch `change` event if needed.
+     * This is necessary to ensure `change` is fired after `value-changed`.
+     *
+     * @param {!Object} currentProps Current accessor values
+     * @param {?Object} changedProps Properties changed since the last call
+     * @param {?Object} oldProps Previous values for each changed property
+     * @protected
+     * @override
+     */
+    _propertiesChanged(currentProps, changedProps, oldProps) {
+      super._propertiesChanged(currentProps, changedProps, oldProps);
+
+      if ('value' in changedProps && this.__dispatchChange) {
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+        this.__dispatchChange = false;
+      }
+    }
+
     /**
      * Opens the dropdown.
      */
@@ -462,6 +481,20 @@ export const DatePickerMixin = (subclass) =>
       this._overlayContent.addEventListener('close', this._close.bind(this));
       this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));
 
+      // User confirmed selected date by clicking the calendar.
+      this._overlayContent.addEventListener('date-tap', (e) => {
+        this.__userConfirmedDate = true;
+
+        this._selectDate(e.detail.date);
+      });
+
+      // User confirmed selected date by pressing Enter or Today.
+      this._overlayContent.addEventListener('date-selected', (e) => {
+        this.__userConfirmedDate = true;
+
+        this._selectDate(e.detail.date);
+      });
+
       // Keep focus attribute in focusElement for styling
       this._overlayContent.addEventListener('focus', () => {
         this._setFocused(true);
@@ -508,6 +541,24 @@ export const DatePickerMixin = (subclass) =>
       return inputValid && minMaxValid && inputValidity;
     }
 
+    /**
+     * Select date on user interaction and set the flag
+     * to fire change event if necessary.
+     *
+     * @param {Date} dateToSelect
+     * @protected
+     */
+    _selectDate(dateToSelect) {
+      const value = this._formatISO(dateToSelect);
+
+      // Only set flag if the value will change.
+      if (this.value !== value) {
+        this.__dispatchChange = true;
+      }
+
+      this._selectedDate = dateToSelect;
+    }
+
     /** @private */
     _close(e) {
       if (e) {
@@ -609,9 +660,6 @@ export const DatePickerMixin = (subclass) =>
       if (selectedDate === undefined || formatDate === undefined) {
         return;
       }
-      if (this.__userInputOccurred) {
-        this.__dispatchChange = true;
-      }
       const value = this._formatISO(selectedDate);
 
       this.__keepInputValue || this._applyInputValue(selectedDate);
@@ -620,8 +668,6 @@ export const DatePickerMixin = (subclass) =>
         this.validate();
         this.value = value;
       }
-      this.__userInputOccurred = false;
-      this.__dispatchChange = false;
       this._ignoreFocusedDateChange = true;
       this._focusedDate = selectedDate;
       this._ignoreFocusedDateChange = false;
@@ -632,7 +678,6 @@ export const DatePickerMixin = (subclass) =>
       if (focusedDate === undefined || formatDate === undefined) {
         return;
       }
-      this.__userInputOccurred = true;
       if (!this._ignoreFocusedDateChange && !this._noInput) {
         this._applyInputValue(focusedDate);
       }
@@ -665,10 +710,6 @@ export const DatePickerMixin = (subclass) =>
 
     /** @private */
     _valueChanged(value, oldValue) {
-      if (this.__dispatchChange) {
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
-        this.__dispatchChange = false;
-      }
       this._handleDateChange('_selectedDate', value, oldValue);
 
       this._toggleHasValue(!!value);
@@ -751,14 +792,15 @@ export const DatePickerMixin = (subclass) =>
         const parsedDate = this._getParsedDate(inputValue);
 
         if (this._isValidDate(parsedDate)) {
-          this._selectedDate = parsedDate;
+          this._selectDate(parsedDate);
         } else {
           this.__keepInputValue = true;
+          this._selectDate(null);
           this._selectedDate = null;
           this.__keepInputValue = false;
         }
       } else if (this._focusedDate) {
-        this._selectedDate = this._focusedDate;
+        this._selectDate(this._focusedDate);
       }
       this._ignoreFocusedDateChange = false;
     }
@@ -774,7 +816,12 @@ export const DatePickerMixin = (subclass) =>
         this._touchPrevented = [];
       }
 
-      this._selectParsedOrFocusedDate();
+      // No need to select date on close if it was confirmed by the user.
+      if (this.__userConfirmedDate) {
+        this.__userConfirmedDate = false;
+      } else {
+        this._selectParsedOrFocusedDate();
+      }
 
       if (this._nativeInput && this._nativeInput.selectionStart) {
         this._nativeInput.selectionStart = this._nativeInput.selectionEnd;
@@ -903,7 +950,7 @@ export const DatePickerMixin = (subclass) =>
           const isValidDate = this._isValidDate(parsedDate);
           if (this.opened) {
             if (this._overlayInitialized && this._overlayContent.focusedDate && isValidDate) {
-              this._selectedDate = this._overlayContent.focusedDate;
+              this._selectDate(this._overlayContent.focusedDate);
             }
             this.close();
           } else if (!isValidDate && this.inputElement.value !== '') {
@@ -926,7 +973,7 @@ export const DatePickerMixin = (subclass) =>
           } else if (this.autoOpenDisabled) {
             // Do not restore selected date if Esc was pressed after clearing input field
             if (this.inputElement.value === '') {
-              this._selectedDate = null;
+              this._selectDate(null);
             }
             this._applyInputValue(this._selectedDate);
           } else {

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

@@ -237,8 +237,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
        * The value for this element.
        */
       selectedDate: {
-        type: Date,
-        notify: true
+        type: Date
       },
 
       /**
@@ -370,6 +369,17 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     this._scrollToPosition(this._differenceInMonths(date, this._originDate), animate);
   }
 
+  /**
+   * Select a date and fire event indicating user interaction.
+   * @protected
+   */
+  _selectDate(dateToSelect) {
+    this.selectedDate = dateToSelect;
+    this.dispatchEvent(
+      new CustomEvent('date-selected', { detail: { date: dateToSelect }, bubbles: true, composed: true })
+    );
+  }
+
   _focusedDateChanged(focusedDate) {
     this.revealDate(focusedDate);
   }
@@ -460,7 +470,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     if (Math.abs(this.$.monthScroller.position - this._differenceInMonths(today, this._originDate)) < 0.001) {
       // Select today only if the month scroller is positioned approximately
       // at the beginning of the current month
-      this.selectedDate = today;
+      this._selectDate(today);
       this._close();
     } else {
       this._scrollToCurrentMonth();
@@ -659,7 +669,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
   }
 
   _clear() {
-    this.selectedDate = '';
+    this._selectDate('');
   }
 
   _close() {
@@ -683,10 +693,10 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   __toggleDate(date) {
     if (dateEquals(date, this.selectedDate)) {
-      this.selectedDate = '';
+      this._clear();
       this.focusedDate = date;
     } else {
-      this.selectedDate = date;
+      this._selectDate(date);
     }
   }
 
@@ -711,7 +721,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
         handled = true;
         break;
       case 'Enter':
-        this.selectedDate = this.focusedDate;
+        this._selectDate(this.focusedDate);
         this._close();
         handled = true;
         break;

package/src/vaadin-date-picker.js

@@ -171,7 +171,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
             i18n="[[i18n]]"
             fullscreen$="[[_fullscreen]]"
             label="[[label]]"
-            selected-date="{{_selectedDate}}"
+            selected-date="[[_selectedDate]]"
             slot="dropdown-content"
             focused-date="{{_focusedDate}}"
             show-week-numbers="[[showWeekNumbers]]"

package/src/vaadin-month-calendar.js

@@ -42,19 +42,11 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
           display: flex;
         }
 
-        [part='week-numbers'] {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          flex-shrink: 0;
-        }
-
         [part='date'] {
           outline: none;
         }
 
         [part='week-number'][hidden],
-        [part='week-numbers'][hidden],
         [part='weekday'][hidden] {
           display: none;
         }
@@ -69,7 +61,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
         }
 
         [part='weekday']:empty,
-        [part='week-numbers'] {
+        [part='week-number'] {
           width: 12.5%;
           flex-shrink: 0;
         }
@@ -369,7 +361,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
   _handleTap(e) {
     if (!this.ignoreTaps && !this._notTapping && e.target.date && !e.target.hasAttribute('disabled')) {
       this.selectedDate = e.target.date;
-      this.dispatchEvent(new CustomEvent('date-tap', { bubbles: true, composed: true }));
+      this.dispatchEvent(
+        new CustomEvent('date-tap', { detail: { date: e.target.date }, bubbles: true, composed: true })
+      );
     }
   }
 

package/theme/lumo/vaadin-month-calendar-styles.js

@@ -33,7 +33,7 @@ registerStyles(
 
     [part='weekdays'],
     [part='weekday'],
-    [part='week-numbers'] {
+    [part='week-number'] {
       font-size: var(--lumo-font-size-xxs);
       line-height: 1;
       color: var(--lumo-secondary-text-color);
@@ -43,9 +43,8 @@ registerStyles(
       margin-bottom: var(--lumo-space-s);
     }
 
-    /* TODO should have part="week-number" for the cell in weekdays-container */
     [part='weekday']:empty,
-    [part='week-numbers'] {
+    [part='week-number'] {
       width: var(--lumo-size-xs);
     }
 
@@ -107,8 +106,7 @@ registerStyles(
       }
     }
 
-    /* TODO should not rely on the role attribute */
-    [part='date'][role='button']:not([disabled]):not([selected]):hover::before {
+    [part='date']:not(:empty):not([disabled]):not([selected]):hover::before {
       background-color: var(--lumo-primary-color-10pct);
     }
 
@@ -130,7 +128,7 @@ registerStyles(
         display: none;
       }
 
-      [part='date'][role='button']:not([disabled]):active::before {
+      [part='date']:not(:empty):not([disabled]):active::before {
         display: block;
       }