@vaadin/date-picker - npm Package Compare versions

Comparing version 22.0.0-alpha9 to 22.0.0-beta1

package.json

 {
   "name": "@vaadin/date-picker",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0-beta1",
   "publishConfig": {
@@ -38,19 +38,19 @@ "access": "public"
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "22.0.0-alpha9",
-    "@vaadin/component-base": "22.0.0-alpha9",
-    "@vaadin/field-base": "22.0.0-alpha9",
-    "@vaadin/input-container": "22.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
-    "@vaadin/vaadin-overlay": "22.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
+    "@vaadin/button": "22.0.0-beta1",
+    "@vaadin/component-base": "22.0.0-beta1",
+    "@vaadin/field-base": "22.0.0-beta1",
+    "@vaadin/input-container": "22.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
+    "@vaadin/vaadin-overlay": "22.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "22.0.0-alpha9",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-alpha9",
+    "@vaadin/dialog": "22.0.0-beta1",
+    "@vaadin/polymer-legacy-adapter": "22.0.0-beta1",
     "@vaadin/testing-helpers": "^0.3.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

src/vaadin-date-picker-light.js

@@ -75,4 +75,2 @@ /**
         opened="{{opened}}"
-        position-target="[[inputElement]]"
-        no-vertical-overlap
         on-vaadin-overlay-open="_onOverlayOpened"
@@ -153,2 +151,11 @@ on-vaadin-overlay-close="_onOverlayClosed"
   }
+
+  // Workaround https://github.com/vaadin/web-components/issues/2855
+  /** @protected */
+  _openedChanged(opened) {
+    super._openedChanged(opened);
+
+    this.$.overlay.positionTarget = this.inputElement;
+    this.$.overlay.noVerticalOverlap = true;
+  }
 }
@@ -155,0 +162,0 @@

src/vaadin-date-picker-mixin.js

@@ -468,3 +468,3 @@ /**
       this._overlayContent.addEventListener('focus', () => {
-        this.toggleAttribute('focused', true);
+        this._setFocused(true);
       });
@@ -585,3 +585,3 @@
 
-    /** @private */
+    /** @protected */
     _openedChanged(opened) {
@@ -783,2 +783,7 @@ if (opened && !this._overlayInitialized) {
       }
+
+      // If the input isn't focused when overlay closes (fullscreen mode), clear focused state
+      if (this.getRootNode().activeElement !== this.inputElement) {
+        this._setFocused(false);
+      }
     }
@@ -785,0 +790,0 @@

src/vaadin-date-picker.d.ts

@@ -38,13 +38,14 @@ /**
 /**
- * `<vaadin-date-picker>` is a date selection field which includes a scrollable
- * month calendar view.
+ * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
+ *
  * ```html
  * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
  * ```
+ *
  * ```js
  * datePicker.value = '2016-03-02';
  * ```
+ *
  * When the selected `value` is changed, a `value-changed` event is triggered.
  *
- *
  * ### Styling
@@ -58,47 +59,22 @@ *
  *
- * The following shadow DOM parts are available for styling:
+ * `<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
  *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `input-field` | Input element | vaadin-date-picker
- * `clear-button` | Clear button | vaadin-date-picker
- * `toggle-button` | Toggle button | vaadin-date-picker
- * `overlay-content` | The overlay element | vaadin-date-picker
- * `overlay-header` | Fullscreen mode header | vaadin-date-picker-overlay-content
- * `label` | Fullscreen mode value/label | vaadin-date-picker-overlay-content
- * `clear-button` | Fullscreen mode clear button | vaadin-date-picker-overlay-content
- * `toggle-button` | Fullscreen mode toggle button | vaadin-date-picker-overlay-content
- * `years-toggle-button` | Fullscreen mode years scroller toggle | vaadin-date-picker-overlay-content
- * `months` | Months scroller | vaadin-date-picker-overlay-content
- * `years` | Years scroller | vaadin-date-picker-overlay-content
- * `toolbar` | Footer bar with buttons | vaadin-date-picker-overlay-content
- * `today-button` | Today button | vaadin-date-picker-overlay-content
- * `cancel-button` | Cancel button | vaadin-date-picker-overlay-content
- * `month` | Month calendar | vaadin-date-picker-overlay-content
- * `year-number` | Year number | vaadin-date-picker-overlay-content
- * `year-separator` | Year separator | vaadin-date-picker-overlay-content
- * `month-header` | Month title | vaadin-month-calendar
- * `weekdays` | Weekday container | vaadin-month-calendar
- * `weekday` | Weekday element | vaadin-month-calendar
- * `week-numbers` | Week numbers container | vaadin-month-calendar
- * `week-number` | Week number element | vaadin-month-calendar
- * `date` | Date element | vaadin-month-calendar
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `toggle-button`       | Toggle button
+ * `overlay-content`     | The overlay element
  *
- * The following state attributes are available for styling:
+ * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `invalid` | Set when the element is invalid | :host
- * `opened` | Set when the date selector overlay is opened | :host
- * `readonly` | Set when the element is readonly | :host
- * `disabled` | Set when the element is disabled | :host
- * `today` | Set on the date corresponding to the current day | date
- * `focused` | Set on the focused date | date
- * `disabled` | Set on the date out of the allowed range | date
- * `selected` | Set on the selected date | date
+ * Attribute  | Description                                      | Part name
+ * -----------|--------------------------------------------------|-----------
+ * `opened`   | Set when the date selector overlay is opened     | :host
+ * `today`    | Set on the date corresponding to the current day | date
+ * `selected` | Set on the selected date                         | date
  *
- * If you want to replace the default input field with a custom implementation, you should use the
- * [`<vaadin-date-picker-light>`](#vaadin-date-picker-light) element.
+ * If you want to replace the default `<input>` and its container with a custom implementation to get full control
+ * over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
  *
@@ -110,10 +86,41 @@ * ### Internal components
  *
-
  * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-date-picker-overlay-content>`
  * - `<vaadin-month-calendar>`
+ * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
+ * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `overlay-header`      | Fullscreen mode header
+ * `label`               | Fullscreen mode value/label
+ * `clear-button`        | Fullscreen mode clear button
+ * `toggle-button`       | Fullscreen mode toggle button
+ * `years-toggle-button` | Fullscreen mode years scroller toggle
+ * `months`              | Months scroller
+ * `years`               | Years scroller
+ * `toolbar`             | Footer bar with buttons
+ * `today-button`        | Today button
+ * `cancel-button`       | Cancel button
+ * `month`               | Month calendar
+ * `year-number`         | Year number
+ * `year-separator`      | Year separator
+ *
+ * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `month-header`        | Month title
+ * `weekdays`            | Weekday container
+ * `weekday`             | Weekday element
+ * `week-numbers`        | Week numbers container
+ * `week-number`         | Week number element
+ * `date`                | Date element
+ *
  * 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.
+ *
  * @fires {Event} change - Fired when the user commits a value change.
@@ -120,0 +127,0 @@ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.

src/vaadin-date-picker.js

@@ -25,13 +25,14 @@ /**
 /**
- * `<vaadin-date-picker>` is a date selection field which includes a scrollable
- * month calendar view.
+ * `<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.
+ *
  * ```html
  * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
  * ```
+ *
  * ```js
  * datePicker.value = '2016-03-02';
  * ```
+ *
  * When the selected `value` is changed, a `value-changed` event is triggered.
  *
- *
  * ### Styling
@@ -45,47 +46,22 @@ *
  *
- * The following shadow DOM parts are available for styling:
+ * `<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
  *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `input-field` | Input element | vaadin-date-picker
- * `clear-button` | Clear button | vaadin-date-picker
- * `toggle-button` | Toggle button | vaadin-date-picker
- * `overlay-content` | The overlay element | vaadin-date-picker
- * `overlay-header` | Fullscreen mode header | vaadin-date-picker-overlay-content
- * `label` | Fullscreen mode value/label | vaadin-date-picker-overlay-content
- * `clear-button` | Fullscreen mode clear button | vaadin-date-picker-overlay-content
- * `toggle-button` | Fullscreen mode toggle button | vaadin-date-picker-overlay-content
- * `years-toggle-button` | Fullscreen mode years scroller toggle | vaadin-date-picker-overlay-content
- * `months` | Months scroller | vaadin-date-picker-overlay-content
- * `years` | Years scroller | vaadin-date-picker-overlay-content
- * `toolbar` | Footer bar with buttons | vaadin-date-picker-overlay-content
- * `today-button` | Today button | vaadin-date-picker-overlay-content
- * `cancel-button` | Cancel button | vaadin-date-picker-overlay-content
- * `month` | Month calendar | vaadin-date-picker-overlay-content
- * `year-number` | Year number | vaadin-date-picker-overlay-content
- * `year-separator` | Year separator | vaadin-date-picker-overlay-content
- * `month-header` | Month title | vaadin-month-calendar
- * `weekdays` | Weekday container | vaadin-month-calendar
- * `weekday` | Weekday element | vaadin-month-calendar
- * `week-numbers` | Week numbers container | vaadin-month-calendar
- * `week-number` | Week number element | vaadin-month-calendar
- * `date` | Date element | vaadin-month-calendar
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `toggle-button`       | Toggle button
+ * `overlay-content`     | The overlay element
  *
- * The following state attributes are available for styling:
+ * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `invalid` | Set when the element is invalid | :host
- * `opened` | Set when the date selector overlay is opened | :host
- * `readonly` | Set when the element is readonly | :host
- * `disabled` | Set when the element is disabled | :host
- * `today` | Set on the date corresponding to the current day | date
- * `focused` | Set on the focused date | date
- * `disabled` | Set on the date out of the allowed range | date
- * `selected` | Set on the selected date | date
+ * Attribute  | Description                                      | Part name
+ * -----------|--------------------------------------------------|-----------
+ * `opened`   | Set when the date selector overlay is opened     | :host
+ * `today`    | Set on the date corresponding to the current day | date
+ * `selected` | Set on the selected date                         | date
  *
- * If you want to replace the default input field with a custom implementation, you should use the
- * [`<vaadin-date-picker-light>`](#vaadin-date-picker-light) element.
+ * If you want to replace the default `<input>` and its container with a custom implementation to get full control
+ * over the input field, consider using the [`<vaadin-date-picker-light>`](#/elements/vaadin-date-picker-light) element.
  *
@@ -100,6 +76,38 @@ * ### Internal components
  * - `<vaadin-month-calendar>`
+ * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
  *
+ * In order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `overlay-header`      | Fullscreen mode header
+ * `label`               | Fullscreen mode value/label
+ * `clear-button`        | Fullscreen mode clear button
+ * `toggle-button`       | Fullscreen mode toggle button
+ * `years-toggle-button` | Fullscreen mode years scroller toggle
+ * `months`              | Months scroller
+ * `years`               | Years scroller
+ * `toolbar`             | Footer bar with buttons
+ * `today-button`        | Today button
+ * `cancel-button`       | Cancel button
+ * `month`               | Month calendar
+ * `year-number`         | Year number
+ * `year-separator`      | Year separator
+ *
+ * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
+ *
+ * Part name             | Description
+ * ----------------------|--------------------
+ * `month-header`        | Month title
+ * `weekdays`            | Weekday container
+ * `weekday`             | Weekday element
+ * `week-numbers`        | Week numbers container
+ * `week-number`         | Week number element
+ * `date`                | Date element
+ *
  * 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.
+ *
  * @fires {Event} change - Fired when the user commits a value change.
@@ -162,3 +170,2 @@ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
-        no-vertical-overlap
         on-vaadin-overlay-open="_onOverlayOpened"
@@ -213,4 +220,3 @@ on-vaadin-overlay-close="_onOverlayClosed"
     );
-    this.addController(new AriaLabelController(this.inputElement, this._labelNode));
-    this.$.overlay.positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
   }
@@ -235,2 +241,11 @@
   }
+
+  // Workaround https://github.com/vaadin/web-components/issues/2855
+  /** @protected */
+  _openedChanged(opened) {
+    super._openedChanged(opened);
+
+    this.$.overlay.positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+    this.$.overlay.noVerticalOverlap = true;
+  }
 }
@@ -237,0 +252,0 @@

No alert changes

Improved metrics

Total package byte prevSize

151157

increased by0.48%

Lines of code

4018

increased by0.75%

Dependency changes

• + Added@vaadin/button@22.0.0-beta1(transitive)

• + Added@vaadin/component-base@22.0.0-beta1(transitive)

• + Added@vaadin/field-base@22.0.0-beta1(transitive)

• + Added@vaadin/icon@22.0.0-beta1(transitive)

• + Added@vaadin/input-container@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-lumo-styles@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-material-styles@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-overlay@22.0.0-beta1(transitive)

• + Added@vaadin/vaadin-themable-mixin@22.0.0-beta1(transitive)

• - Removed@vaadin/button@22.0.0-alpha9(transitive)

• - Removed@vaadin/component-base@22.0.0-alpha9(transitive)

• - Removed@vaadin/field-base@22.0.0-alpha9(transitive)

• - Removed@vaadin/icon@22.0.0-alpha9(transitive)

• - Removed@vaadin/input-container@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-material-styles@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-overlay@22.0.0-alpha9(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.0.0-alpha9(transitive)

• Updated@vaadin/button@22.0.0-beta1

• Updated@vaadin/component-base@22.0.0-beta1

• Updated@vaadin/field-base@22.0.0-beta1

• Updated@vaadin/input-container@22.0.0-beta1

• Updated@vaadin/vaadin-lumo-styles@22.0.0-beta1

• Updated@vaadin/vaadin-material-styles@22.0.0-beta1

• Updated@vaadin/vaadin-overlay@22.0.0-beta1

• Updated@vaadin/vaadin-themable-mixin@22.0.0-beta1