@vaadin/text-area 22.0.0-alpha4 → 22.0.0-alpha8

package/package.json

@@ -1,45 +1,48 @@
 {
   "name": "@vaadin/text-area",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha8",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-text-area",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/text-area"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
   "main": "vaadin-text-area.js",
   "module": "vaadin-text-area.js",
-  "repository": "vaadin/web-components",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "input",
     "web-components",
     "web-component"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/web-components/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/field-base": "^22.0.0-alpha4",
-    "@vaadin/input-container": "^22.0.0-alpha4",
-    "@vaadin/text-field": "^22.0.0-alpha4",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha4"
+    "@vaadin/component-base": "22.0.0-alpha8",
+    "@vaadin/field-base": "22.0.0-alpha8",
+    "@vaadin/input-container": "22.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha8",
+    "@vaadin/vaadin-material-styles": "22.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha8"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.2.1",
+    "@vaadin/testing-helpers": "^0.3.0",
     "sinon": "^9.2.1"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "c24468526298ee26ad7f7280b59f6c8789e1f75f"
 }

package/src/vaadin-text-area.d.ts

@@ -3,10 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { CharLengthMixin } from '@vaadin/field-base/src/char-length-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
-import { TextAreaSlotMixin } from '@vaadin/field-base/src/text-area-slot-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -50,6 +48,12 @@ export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEve
  *
  * ### Styling
  *
+ * The following custom properties are available for styling:
+ *
+ * Custom property                | Description                | Default
+ * -------------------------------|----------------------------|---------
+ * `--vaadin-field-default-width` | Default width of the field | `12em`
+ *
  * The following shadow DOM parts are available for styling:
  *
  * Part name       | Description
@@ -80,9 +84,17 @@ export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEve
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class TextArea extends CharLengthMixin(
-  InputFieldMixin(TextAreaSlotMixin(ThemableMixin(ElementMixin(HTMLElement))))
-) {
+declare class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+  /**
+   * Maximum number of characters (in Unicode code points) that the user can enter.
+   */
+  maxlength: number | null | undefined;
+
+  /**
+   * Minimum number of characters (in Unicode code points) that the user can enter.
+   */
+  minlength: number | null | undefined;
+
   addEventListener<K extends keyof TextAreaEventMap>(
     type: K,
     listener: (this: TextArea, ev: TextAreaEventMap[K]) => void,

package/src/vaadin-text-area.js

@@ -4,13 +4,16 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { PolymerElement, html } from '@polymer/polymer';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { CharLengthMixin } from '@vaadin/field-base/src/char-length-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
-import { TextAreaSlotMixin } from '@vaadin/field-base/src/text-area-slot-mixin.js';
+import { TextAreaController } from '@vaadin/field-base/src/text-area-controller.js';
+import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/input-container/src/vaadin-input-container.js';
-import '@vaadin/text-field/src/vaadin-input-field-shared-styles.js';
+
+registerStyles('vaadin-text-area', inputFieldShared, { moduleId: 'vaadin-text-area-styles' });
 
 /**
  * `<vaadin-text-area>` is a web component for multi-line text input.
@@ -35,6 +38,12 @@ import '@vaadin/text-field/src/vaadin-input-field-shared-styles.js';
  *
  * ### Styling
  *
+ * The following custom properties are available for styling:
+ *
+ * Custom property                | Description                | Default
+ * -------------------------------|----------------------------|---------
+ * `--vaadin-field-default-width` | Default width of the field | `12em`
+ *
  * The following shadow DOM parts are available for styling:
  *
  * Part name       | Description
@@ -66,27 +75,23 @@ import '@vaadin/text-field/src/vaadin-input-field-shared-styles.js';
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
  * @extends HTMLElement
- * @mixes CharLengthMixin
  * @mixes InputFieldMixin
- * @mixes TextAreaSlotMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-export class TextArea extends CharLengthMixin(
-  InputFieldMixin(TextAreaSlotMixin(ThemableMixin(ElementMixin(PolymerElement))))
-) {
+export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-text-area';
   }
 
   static get template() {
     return html`
-      <style include="vaadin-input-field-shared-styles">
+      <style>
         :host {
           animation: 1ms vaadin-text-area-appear;
         }
 
-        [part='container'] {
+        .vaadin-text-area-container {
           flex: auto;
         }
 
@@ -98,35 +103,22 @@ export class TextArea extends CharLengthMixin(
         }
 
         [part='input-field'] {
+          flex: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;
         }
 
-        .textarea-wrapper {
-          display: grid;
-          flex: 1 1 auto;
-          align-self: stretch;
-          padding: 0;
-        }
-
-        .textarea-wrapper::after {
-          content: attr(data-replicated-value) ' ';
-          white-space: pre-wrap;
-          visibility: hidden;
-        }
-
         ::slotted(textarea) {
           -webkit-appearance: none;
           -moz-appearance: none;
           flex: auto;
-          white-space: nowrap;
           overflow: hidden;
           width: 100%;
           height: 100%;
           outline: none;
           resize: none;
           margin: 0;
-          padding: 0;
+          padding: 0 0.25em;
           border: 0;
           border-radius: 0;
           min-width: 0;
@@ -139,16 +131,6 @@ export class TextArea extends CharLengthMixin(
           box-shadow: none;
         }
 
-        ::slotted(textarea),
-        .textarea-wrapper::after {
-          grid-area: 1 / 1 / 2 / 2;
-          box-sizing: border-box;
-          padding: 0 0.25em;
-          overflow-wrap: break-word;
-          word-wrap: break-word;
-          word-break: break-word;
-        }
-
         [part='input-field'] ::slotted(*) {
           align-self: flex-start;
         }
@@ -160,10 +142,10 @@ export class TextArea extends CharLengthMixin(
         }
       </style>
 
-      <div part="container">
+      <div class="vaadin-text-area-container">
         <div part="label">
           <slot name="label"></slot>
-          <span part="indicator" aria-hidden="true"></span>
+          <span part="required-indicator" aria-hidden="true"></span>
         </div>
 
         <vaadin-input-container
@@ -174,9 +156,7 @@ export class TextArea extends CharLengthMixin(
           theme$="[[theme]]"
         >
           <slot name="prefix" slot="prefix"></slot>
-          <div class="textarea-wrapper">
-            <slot name="textarea"></slot>
-          </div>
+          <slot name="textarea"></slot>
           <slot name="suffix" slot="suffix"></slot>
           <div id="clearButton" part="clear-button" slot="suffix"></div>
         </vaadin-input-container>
@@ -192,6 +172,32 @@ export class TextArea extends CharLengthMixin(
     `;
   }
 
+  static get properties() {
+    return {
+      /**
+       * Maximum number of characters (in Unicode code points) that the user can enter.
+       */
+      maxlength: {
+        type: Number
+      },
+
+      /**
+       * Minimum number of characters (in Unicode code points) that the user can enter.
+       */
+      minlength: {
+        type: Number
+      }
+    };
+  }
+
+  static get delegateAttrs() {
+    return [...super.delegateAttrs, 'maxlength', 'minlength'];
+  }
+
+  static get constraints() {
+    return [...super.constraints, 'maxlength', 'minlength'];
+  }
+
   /**
    * Used by `ClearButtonMixin` as a reference to the clear button element.
    * @protected
@@ -204,12 +210,23 @@ export class TextArea extends CharLengthMixin(
   connectedCallback() {
     super.connectedCallback();
 
+    this._inputField = this.shadowRoot.querySelector('[part=input-field]');
     this._updateHeight();
   }
 
   /** @protected */
   ready() {
     super.ready();
+
+    this.addController(
+      new TextAreaController(this, (input) => {
+        this._setInputElement(input);
+        this._setFocusElement(input);
+        this.stateTarget = input;
+        this.ariaTarget = input;
+      })
+    );
+    this.addController(new AriaLabelController(this.inputElement, this._labelNode));
     this.addEventListener('animationend', this._onAnimationEnd);
   }
 
@@ -234,13 +251,49 @@ export class TextArea extends CharLengthMixin(
 
   /** @private */
   _updateHeight() {
-    if (this.inputElement) {
-      /* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
-      this.__textAreaWrapper = this.__textAreaWrapper || this.shadowRoot.querySelector('.textarea-wrapper');
-      this.__textAreaWrapper.dataset.replicatedValue = this.inputElement.value;
-      // getComputedStyle is expensive, maybe we can use ResizeObserver in the future
-      this._dispatchIronResizeEventIfNeeded('InputHeight', getComputedStyle(this.__textAreaWrapper).height);
+    const input = this.inputElement;
+    const inputField = this._inputField;
+
+    if (!input || !inputField) {
+      return;
+    }
+
+    const scrollTop = inputField.scrollTop;
+
+    // Only clear the height when the content shortens to minimize scrollbar flickering.
+    const valueLength = this.value ? this.value.length : 0;
+
+    if (this._oldValueLength >= valueLength) {
+      const inputFieldHeight = getComputedStyle(inputField).height;
+      const inputWidth = getComputedStyle(input).width;
+
+      // Temporarily fix the height of the wrapping input field container to prevent changing the browsers scroll
+      // position while resetting the textareas height. If the textarea had a large height, then removing its height
+      // will reset its height to the default of two rows. That might reduce the height of the page, and the
+      // browser might adjust the scroll position before we can restore the measured height of the textarea.
+      inputField.style.display = 'block';
+      inputField.style.height = inputFieldHeight;
+
+      // Fix the input element width so its scroll height isn't affected by host's disappearing scrollbars
+      input.style.maxWidth = inputWidth;
+
+      // Clear the height of the textarea to allow measuring a reduced scroll height
+      input.style.height = 'auto';
     }
+    this._oldValueLength = valueLength;
+
+    const inputHeight = input.scrollHeight;
+    if (inputHeight > input.clientHeight) {
+      input.style.height = inputHeight + 'px';
+    }
+
+    // Restore
+    input.style.removeProperty('max-width');
+    inputField.style.removeProperty('display');
+    inputField.style.removeProperty('height');
+    inputField.scrollTop = scrollTop;
+
+    this._dispatchIronResizeEventIfNeeded('InputHeight', inputHeight);
   }
 }
 

package/theme/lumo/vaadin-text-area-styles.js

@@ -7,63 +7,63 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styl
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
+import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
 
-registerStyles(
-  'vaadin-text-area',
-  css`
-    [part='input-field'],
-    [part='input-field'] ::slotted(textarea) {
-      height: auto;
-      box-sizing: border-box;
-    }
+const textArea = css`
+  [part='input-field'],
+  [part='input-field'] ::slotted(textarea) {
+    height: auto;
+    box-sizing: border-box;
+  }
 
-    [part='input-field'] {
-      /* Equal to the implicit padding in vaadin-text-field */
-      padding-top: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
-      padding-bottom: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
-      transition: background-color 0.1s;
-      line-height: var(--lumo-line-height-s);
-    }
+  [part='input-field'] {
+    /* Equal to the implicit padding in vaadin-text-field */
+    padding-top: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
+    padding-bottom: calc((var(--lumo-text-field-size) - 1em * var(--lumo-line-height-s)) / 2);
+    transition: background-color 0.1s;
+    line-height: var(--lumo-line-height-s);
+  }
 
-    :host(:not([readonly])) [part='input-field']::after {
-      display: none;
-    }
+  :host(:not([readonly])) [part='input-field']::after {
+    display: none;
+  }
 
-    :host([readonly]) [part='input-field'] {
-      border: 1px dashed var(--lumo-contrast-30pct);
-    }
+  :host([readonly]) [part='input-field'] {
+    border: 1px dashed var(--lumo-contrast-30pct);
+  }
 
-    :host([readonly]) [part='input-field']::after {
-      border: none;
-    }
+  :host([readonly]) [part='input-field']::after {
+    border: none;
+  }
+
+  :host(:hover:not([readonly]):not([focused]):not([invalid])) [part='input-field'] {
+    background-color: var(--lumo-contrast-20pct);
+  }
 
+  @media (pointer: coarse) {
     :host(:hover:not([readonly]):not([focused]):not([invalid])) [part='input-field'] {
-      background-color: var(--lumo-contrast-20pct);
+      background-color: var(--lumo-contrast-10pct);
     }
 
-    @media (pointer: coarse) {
-      :host(:hover:not([readonly]):not([focused]):not([invalid])) [part='input-field'] {
-        background-color: var(--lumo-contrast-10pct);
-      }
-
-      :host(:active:not([readonly]):not([focused])) [part='input-field'] {
-        background-color: var(--lumo-contrast-20pct);
-      }
+    :host(:active:not([readonly]):not([focused])) [part='input-field'] {
+      background-color: var(--lumo-contrast-20pct);
     }
+  }
 
-    [part='input-field'] ::slotted(textarea) {
-      white-space: pre-wrap; /* override "nowrap" from <vaadin-text-field> */
-      align-self: stretch; /* override "baseline" from <vaadin-text-field> */
-      line-height: inherit;
-      --_lumo-text-field-overflow-mask-image: none;
-    }
+  [part='input-field'] ::slotted(textarea) {
+    white-space: pre-wrap; /* override "nowrap" from <vaadin-text-field> */
+    align-self: stretch; /* override "baseline" from <vaadin-text-field> */
+    line-height: inherit;
+    --_lumo-text-field-overflow-mask-image: none;
+  }
 
-    /* Vertically align icon prefix/suffix with the first line of text */
-    [part='input-field'] ::slotted(icon-icon),
-    [part='input-field'] ::slotted(vaadin-icon) {
-      margin-top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
-    }
-  `,
-  { moduleId: 'lumo-text-area', include: ['lumo-input-field-shared-styles'] }
-);
+  /* Vertically align icon prefix/suffix with the first line of text */
+  [part='input-field'] ::slotted(iron-icon),
+  [part='input-field'] ::slotted(vaadin-icon) {
+    margin-top: calc((var(--lumo-icon-size-m) - 1em * var(--lumo-line-height-s)) / -2);
+  }
+`;
+
+registerStyles('vaadin-text-area', [inputFieldShared, textArea], {
+  moduleId: 'lumo-text-area'
+});

package/theme/material/vaadin-text-area-styles.js

@@ -4,30 +4,23 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
+import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
 
-registerStyles(
-  'vaadin-text-area',
-  css`
-    [part='input-field'] {
-      height: auto;
-      box-sizing: border-box;
-    }
+const textArea = css`
+  [part='input-field'] {
+    height: auto;
+    box-sizing: border-box;
+  }
 
-    .textarea-wrapper {
-      margin-top: 4px;
-      padding: 0;
-    }
+  [part='input-field'] ::slotted(textarea) {
+    padding-top: 0;
+    margin-top: 4px;
+  }
 
-    [part='input-field'] ::slotted(textarea),
-    .textarea-wrapper::after {
-      padding: 0 0 8px;
-    }
+  [part='input-field'] ::slotted(textarea) {
+    white-space: pre-wrap; /* override "nowrap" from <vaadin-text-field> */
+    align-self: stretch; /* override "baseline" from <vaadin-text-field> */
+  }
+`;
 
-    [part='input-field'] ::slotted(textarea) {
-      white-space: pre-wrap; /* override "nowrap" from <vaadin-text-field> */
-      align-self: stretch; /* override "baseline" from <vaadin-text-field> */
-    }
-  `,
-  { moduleId: 'material-text-area', include: ['material-input-field-shared-styles'] }
-);
+registerStyles('vaadin-text-area', [inputFieldShared, textArea], { moduleId: 'material-text-area' });