@vaadin/date-picker 23.2.0-dev.53560527d → 23.2.0

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

@@ -30,7 +30,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           height: 100%;
           width: 100%;
           outline: none;
-          background: #fff;
         }
 
         [part='overlay-header'] {
@@ -48,22 +47,14 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           flex-grow: 1;
         }
 
-        [part='clear-button']:not([showclear]) {
-          display: none;
+        [hidden] {
+          display: none !important;
         }
 
         [part='years-toggle-button'] {
           display: flex;
         }
 
-        [part='years-toggle-button'][desktop] {
-          display: none;
-        }
-
-        :host(:not([years-visible])) [part='years-toggle-button']::before {
-          transform: rotate(180deg);
-        }
-
         #scrollers {
           display: flex;
           height: 100%;
@@ -137,27 +128,14 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           z-index: 2;
           flex-shrink: 0;
         }
-
-        [part~='overlay-header']:not([desktop]) {
-          padding-bottom: 40px;
-        }
-
-        [part~='years-toggle-button'] {
-          position: absolute;
-          top: auto;
-          right: 8px;
-          bottom: 0;
-          z-index: 1;
-          padding: 8px;
-        }
       </style>
 
       <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" showclear$="[[_showClear(selectedDate)]]"></div>
+        <div part="clear-button" hidden$="[[!selectedDate]]"></div>
         <div part="toggle-button"></div>
 
-        <div part="years-toggle-button" desktop$="[[_desktopMode]]" aria-hidden="true">
+        <div part="years-toggle-button" hidden$="[[_desktopMode]]" aria-hidden="true">
           [[_yearAfterXMonths(_visibleMonthIndex)]]
         </div>
       </div>
@@ -243,6 +221,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
        */
       selectedDate: {
         type: Date,
+        value: null,
       },
 
       /**
@@ -318,10 +297,12 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     return this.getAttribute('dir') === 'rtl';
   }
 
+  get calendars() {
+    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')];
+  }
+
   get focusableDateElement() {
-    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')]
-      .map((calendar) => calendar.focusableDateElement)
-      .find(Boolean);
+    return this.calendars.map((calendar) => calendar.focusableDateElement).find(Boolean);
   }
 
   ready() {
@@ -329,7 +310,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
     this.setAttribute('role', 'dialog');
 
-    addListener(this, 'tap', this._stopPropagation);
     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));
@@ -451,7 +431,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   _onYearScrollTouchStart() {
     this._notTapping = false;
-    setTimeout(() => (this._notTapping = true), 300);
+    setTimeout(() => {
+      this._notTapping = true;
+    }, 300);
 
     this._repositionMonthScroller();
   }
@@ -462,7 +444,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   _doIgnoreTaps() {
     this._ignoreTaps = true;
-    this._debouncer = Debouncer.debounce(this._debouncer, timeOut.after(300), () => (this._ignoreTaps = false));
+    this._debouncer = Debouncer.debounce(this._debouncer, timeOut.after(300), () => {
+      this._ignoreTaps = false;
+    });
   }
 
   _formatDisplayed(date, formatDate, label) {
@@ -493,10 +477,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     this.scrollToDate(new Date(), true);
   }
 
-  _showClear(selectedDate) {
-    return !!selectedDate;
-  }
-
   _onYearTap(e) {
     if (!this._ignoreTaps && !this._notTapping) {
       const scrollDelta =
@@ -522,6 +502,11 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
     this._targetPosition = targetPosition;
 
+    let revealResolve;
+    this._revealPromise = new Promise((resolve) => {
+      revealResolve = resolve;
+    });
+
     // http://gizma.com/easing/
     const easingFunction = (t, b, c, d) => {
       t /= d / 2;
@@ -562,7 +547,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
         this.$.monthScroller.position = this._targetPosition;
         this._targetPosition = undefined;
-        this.__tryFocusDate();
+
+        revealResolve();
+        this._revealPromise = undefined;
       }
 
       setTimeout(this._repositionYearScroller.bind(this), 1);
@@ -776,23 +763,32 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     switch (section) {
       case 'calendar':
         if (event.shiftKey) {
-          // Return focus back to the input field.
           event.preventDefault();
-          this.__focusInput();
+
+          if (this.hasAttribute('fullscreen')) {
+            // Trap focus in the overlay
+            this.$.cancelButton.focus();
+          } else {
+            this.__focusInput();
+          }
         }
         break;
       case 'today':
         if (event.shiftKey) {
-          // Browser returns focus back to the calendar.
-          // We need to move the scroll to focused date.
-          setTimeout(() => this.revealDate(this.focusedDate), 1);
+          event.preventDefault();
+          this.focusDateElement();
         }
         break;
       case 'cancel':
         if (!event.shiftKey) {
-          // Return focus back to the input field.
           event.preventDefault();
-          this.__focusInput();
+
+          if (this.hasAttribute('fullscreen')) {
+            // Trap focus in the overlay
+            this.focusDateElement();
+          } else {
+            this.__focusInput();
+          }
         }
         break;
       default:
@@ -801,28 +797,12 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
   }
 
   __onTodayButtonKeyDown(event) {
-    if (this.hasAttribute('fullscreen')) {
-      // Do not prevent closing on Esc
-      if (event.key !== 'Escape') {
-        event.stopPropagation();
-      }
-      return;
-    }
-
     if (event.key === 'Tab') {
       this._onTabKeyDown(event, 'today');
     }
   }
 
   __onCancelButtonKeyDown(event) {
-    if (this.hasAttribute('fullscreen')) {
-      // Do not prevent closing on Esc
-      if (event.key !== 'Escape') {
-        event.stopPropagation();
-      }
-      return;
-    }
-
     if (event.key === 'Tab') {
       this._onTabKeyDown(event, 'cancel');
     }
@@ -851,15 +831,29 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     if (!keepMonth) {
       this._focusedMonthDate = dateToFocus.getDate();
     }
-    await this.focusDateElement();
+    await this.focusDateElement(false);
   }
 
-  async focusDateElement() {
+  async focusDateElement(reveal = true) {
     this.__pendingDateFocus = this.focusedDate;
 
-    await new Promise((resolve) => {
-      requestAnimationFrame(resolve);
-    });
+    // Wait for `vaadin-month-calendar` elements to be rendered
+    if (!this.calendars.length) {
+      await new Promise((resolve) => {
+        setTimeout(resolve);
+      });
+    }
+
+    // Reveal focused date unless it has been just set,
+    // which triggers `revealDate()` in the observer.
+    if (reveal) {
+      this.revealDate(this.focusedDate);
+    }
+
+    if (this._revealPromise) {
+      // Wait for focused date to be scrolled into view.
+      await this._revealPromise;
+    }
 
     this.__tryFocusDate();
   }
@@ -957,10 +951,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     todayMidnight.setDate(today.getDate());
     return this._dateAllowed(todayMidnight, min, max);
   }
-
-  _stopPropagation(e) {
-    e.stopPropagation();
-  }
 }
 
 customElements.define(DatePickerOverlayContent.is, DatePickerOverlayContent);

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

@@ -31,12 +31,19 @@ export type DatePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type DatePickerValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type DatePickerValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface DatePickerCustomEventMap {
   'opened-changed': DatePickerOpenedChangedEvent;
 
   'invalid-changed': DatePickerInvalidChangedEvent;
 
   'value-changed': DatePickerValueChangedEvent;
+
+  validated: DatePickerValidatedEvent;
 }
 
 export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCustomEventMap {
@@ -127,24 +134,25 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   addEventListener<K extends keyof DatePickerEventMap>(
     type: K,
     listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof DatePickerEventMap>(
     type: K,
     listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-date-picker.js

@@ -102,12 +102,13 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes ElementMixin
@@ -161,7 +162,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
         fullscreen$="[[_fullscreen]]"
         theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
         disable-upgrade
@@ -221,11 +222,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
   /** @private */
   _onVaadinOverlayClose(e) {
-    if (this._openedWithFocusRing && this.hasAttribute('focused')) {
-      this.setAttribute('focus-ring', '');
-    } else if (!this.hasAttribute('focused')) {
-      this.blur();
-    }
     if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
     }

package/src/vaadin-infinite-scroller.js

@@ -155,7 +155,7 @@ class InfiniteScroller extends PolymerElement {
       // Once the first set of items start fading in, stamp the rest
       this._buffers.forEach((buffer) => {
         [].forEach.call(buffer.children, (insertionPoint) => this._ensureStampedInstance(insertionPoint._itemWrapper));
-      }, this);
+      });
 
       if (!this._buffers[0].translateY) {
         this._reset();
@@ -318,7 +318,7 @@ class InfiniteScroller extends PolymerElement {
           }
         }, 1); // Wait for first reset
       }
-    }, this);
+    });
 
     setTimeout(() => {
       afterNextRender(this, this._finishInit.bind(this));
@@ -356,7 +356,7 @@ class InfiniteScroller extends PolymerElement {
         });
         buffer.updated = true;
       }
-    }, this);
+    });
   }
 
   _isVisible(element, container) {

package/src/vaadin-month-calendar.js

@@ -250,7 +250,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
   _onMonthGridTouchStart() {
     this._notTapping = false;
-    setTimeout(() => (this._notTapping = true), 300);
+    setTimeout(() => {
+      this._notTapping = true;
+    }, 300);
   }
 
   _dateAdd(date, delta) {

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

@@ -11,7 +11,6 @@ registerStyles(
   css`
     :host {
       position: relative;
-      background-color: transparent;
       /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
       background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
       background-size: 57px 100%;
@@ -119,17 +118,10 @@ registerStyles(
 
     [part='toolbar'] {
       padding: var(--lumo-space-s);
-      box-shadow: 0 -1px 0 0 var(--lumo-contrast-10pct);
       border-bottom-left-radius: var(--lumo-border-radius-l);
       margin-right: 57px;
     }
 
-    @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
-      [part='toolbar'] {
-        box-shadow: none;
-      }
-    }
-
     /* Today and Cancel buttons */
 
     [part='toolbar'] [part\$='button'] {
@@ -162,8 +154,6 @@ registerStyles(
     /* Very narrow screen (year scroller initially hidden) */
 
     [part='years-toggle-button'] {
-      position: relative;
-      right: auto;
       display: flex;
       align-items: center;
       height: var(--lumo-size-s);
@@ -181,10 +171,6 @@ registerStyles(
       color: var(--lumo-primary-contrast-color);
     }
 
-    [part='years-toggle-button']::before {
-      content: none;
-    }
-
     /* TODO magic number (same as used for iron-media-query in vaadin-date-picker-overlay-content) */
     @media screen and (max-width: 374px) {
       :host {

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

@@ -151,9 +151,9 @@ registerStyles(
   { moduleId: 'lumo-month-calendar' },
 );
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @keyframes vaadin-date-picker-month-calendar-focus-date {
       50% {
@@ -163,4 +163,4 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

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

@@ -13,9 +13,6 @@ registerStyles(
       font-size: var(--material-body-font-size);
       -webkit-text-size-adjust: 100%;
       line-height: 1.4;
-
-      /* FIXME(platosha): fix the core styles and remove this override. */
-      background: transparent;
     }
 
     :host([fullscreen]) {
@@ -36,11 +33,6 @@ registerStyles(
       box-shadow: var(--material-shadow-elevation-4dp);
     }
 
-    /* FIXME(platosha): fix the core styles and remove this override. */
-    [part='overlay-header']:not([desktop]) {
-      padding-bottom: 8px;
-    }
-
     [part='label'] {
       padding: 0 8px;
       flex: auto;
@@ -54,11 +46,6 @@ registerStyles(
       width: 24px;
       height: 24px;
       text-align: center;
-    }
-
-    [part='clear-button'],
-    [part='toggle-button'],
-    [part='years-toggle-button'] {
       padding: 8px;
       color: var(--material-secondary-text-color);
     }
@@ -78,7 +65,6 @@ registerStyles(
     }
 
     [part='years-toggle-button'] {
-      position: static;
       padding: 4px 8px;
       font-size: var(--material-body-font-size);
       font-weight: 500;
@@ -87,11 +73,6 @@ registerStyles(
       color: var(--material-secondary-text-color);
     }
 
-    [part='years-toggle-button']::before {
-      content: '';
-      display: none;
-    }
-
     [part='years-toggle-button']::after {
       content: var(--material-icons-play);
       display: inline-block;