@justeattakeaway/pie-textarea 0.3.1 → 0.5.0

package/README.md

@@ -72,10 +72,17 @@ import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
 
 ## Props
 
-| Property   | Type                       | Default  | Description                                        |
-|------------|----------------------------|----------|----------------------------------------------------|
-| `disabled` | `boolean`                  | `false`  | Indicates whether or not the textarea is disabled. |
-| `size`     | `small`, `medium`, `large` | `medium` | The size of the textarea field.                    |
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `disabled` | `boolean` | `false`| Indicates whether or not the textarea is disabled. |
+| `size` | `'small'`, `'medium'`, `'large'` | `'medium'` | The size of the textarea field. |
+| `resize` | `'auto'`, `'manual'` | `'auto'` | Controls the resizing behaviour of the textarea. |
+| `value` | `string` | `''` | The value of the textarea (used as a key/value pair in HTML forms with `name`). |
+| `name` | `string` | `''` | The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms. |
+| `autocomplete` | `string` | `''` | Allows the user to enable or disable autocomplete functionality on the textarea field. |
+| `autoFocus` | `boolean` | `false` | If true, the textarea will be focused on the first render. |
+| `readonly` | `boolean` | `false` | When true, the user cannot edit the control. Not the same as disabled. |
+| `required` | `boolean` | `false` | If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid. |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-textarea` component:
 

package/custom-elements.json

@@ -20,13 +20,21 @@
           },
           "default": "['small', 'medium', 'large']"
         },
+        {
+          "kind": "variable",
+          "name": "resizeModes",
+          "type": {
+            "text": "['auto', 'manual']"
+          },
+          "default": "['auto', 'manual']"
+        },
         {
           "kind": "variable",
           "name": "defaultProps",
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    disabled: false,\n    size: 'medium',\n}",
+          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    value: '',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],
@@ -39,6 +47,14 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "resizeModes",
+          "declaration": {
+            "name": "resizeModes",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "defaultProps",
@@ -67,12 +83,15 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
             },
+            {
+              "kind": "field",
+              "name": "value",
+              "privacy": "public",
+              "attribute": "value"
+            },
             {
               "kind": "field",
               "name": "disabled",
-              "type": {
-                "text": "TextareaProps['disabled'] | undefined"
-              },
               "privacy": "public",
               "attribute": "disabled",
               "reflects": true
@@ -80,30 +99,198 @@
             {
               "kind": "field",
               "name": "size",
+              "privacy": "public",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "resize",
+              "privacy": "public",
+              "attribute": "resize"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "privacy": "public",
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "autoFocus",
+              "privacy": "public",
+              "attribute": "autoFocus"
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "privacy": "public",
+              "attribute": "required"
+            },
+            {
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "TextareaProps['size'] | undefined"
+                "text": "TextareaProps['name'] | undefined"
               },
               "privacy": "public",
-              "attribute": "size"
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "TextareaProps['autocomplete'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "autocomplete"
+            },
+            {
+              "kind": "field",
+              "name": "_textarea",
+              "type": {
+                "text": "HTMLTextAreaElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_throttledResize",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "privacy": "public",
+              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The latest disabled state of the input."
+                }
+              ],
+              "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called when the form that owns this component is reset.\nResets the value to the default value."
+            },
+            {
+              "kind": "method",
+              "name": "handleResize",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleInput",
+              "privacy": "private",
+              "description": "Handles data processing in response to the input event. The native input event is left to bubble up.",
+              "parameters": [
+                {
+                  "description": "The input event.",
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleKeyDown",
+              "privacy": "private"
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "disabled",
               "type": {
-                "text": "TextareaProps['disabled'] | undefined"
+                "text": "InputEvent"
               },
+              "description": "when the textarea value is changed.",
+              "name": "input"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "when the textarea value is changed.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "fieldName": "value"
+            },
+            {
+              "name": "disabled",
               "fieldName": "disabled"
             },
             {
               "name": "size",
+              "fieldName": "size"
+            },
+            {
+              "name": "resize",
+              "fieldName": "resize"
+            },
+            {
+              "name": "readonly",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "autoFocus",
+              "fieldName": "autoFocus"
+            },
+            {
+              "name": "required",
+              "fieldName": "required"
+            },
+            {
+              "name": "name",
               "type": {
-                "text": "TextareaProps['size'] | undefined"
+                "text": "TextareaProps['name'] | undefined"
               },
-              "fieldName": "size"
+              "fieldName": "name"
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "TextareaProps['autocomplete'] | undefined"
+              },
+              "fieldName": "autocomplete"
             }
           ],
           "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            },
             {
               "name": "RtlMixin",
               "package": "@justeattakeaway/pie-webc-core"

package/dist/index.d.ts

@@ -1,14 +1,16 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-declare type DefaultProps = ComponentDefaultProps<TextareaProps>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -17,6 +19,8 @@ export declare const defaultProps: DefaultProps;
 
 /**
  * @tagname pie-textarea
+ * @event {InputEvent} input - when the textarea value is changed.
+ * @event {CustomEvent} change - when the textarea value is changed.
  */
 export declare class PieTextarea extends PieTextarea_base implements TextareaProps {
     static shadowRootOptions: {
@@ -24,13 +28,52 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
-    disabled?: TextareaProps['disabled'];
-    size?: TextareaProps['size'];
+    value: string;
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    resize: "auto" | "manual";
+    readonly: boolean;
+    autoFocus: boolean;
+    required: boolean;
+    name?: TextareaProps['name'];
+    autocomplete?: TextareaProps['autocomplete'];
+    private _textarea;
+    private _throttledResize;
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    get validity(): ValidityState;
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Called when the form that owns this component is reset.
+     * Resets the value to the default value.
+     */
+    formResetCallback(): void;
+    protected firstUpdated(): void;
+    private handleResize;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Handles data processing in response to the input event. The native input event is left to bubble up.
+     * @param event - The input event.
+     */
+    private handleInput;
+    private handleChange;
+    private handleKeyDown;
+    disconnectedCallback(): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
-declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieTextarea_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+
+export declare const resizeModes: readonly ["auto", "manual"];
 
 export declare const sizes: readonly ["small", "medium", "large"];
 
@@ -43,6 +86,40 @@ export declare interface TextareaProps {
      * The size of the textarea field. Can be `small`, `medium` or `large`. Defaults to `medium`.
      */
     size?: typeof sizes[number];
+    /**
+     * The resize mode of the textarea. Can be `auto` or `manual`. Defaults to `auto`.
+     * When set to `auto`, the textarea will resize vertically as needed.
+     * When set to `manual`, the textarea will not resize automatically but can be resized by the user.
+     */
+    resize?: typeof resizeModes[number];
+    /**
+     * The value of the textarea (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
+    /**
+     * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+    /**
+     * Allows the user to enable or disable autocomplete functionality on the textarea field.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for more information and values.
+     */
+    autocomplete?: string;
+    /**
+     * If true, the textarea will be focused on the first render.
+     * No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) for more information.
+     */
+    autoFocus?: boolean;
+    /**
+     * When true, the user cannot edit the control. Not the same as disabled.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
+     */
+    readonly?: boolean;
+    /**
+     * If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid.
+     */
+    required?: boolean;
 }
 
 export { }

package/dist/index.js

@@ -1,51 +1,233 @@
-import { LitElement as l, html as c, unsafeCSS as m } from "lit";
-import { property as d } from "lit/decorators.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
-import { RtlMixin as u, validPropertyValues as g, defineCustomElement as z } from "@justeattakeaway/pie-webc-core";
-const v = `*,*:after,*:before{box-sizing:inherit}.c-textarea{--textarea-height: 72px;height:var(--textarea-height)}.c-textarea[data-pie-size=large]{--textarea-height: 80px}.c-textarea[data-pie-size=small]{--textarea-height: 64px}.c-textarea textarea{width:100%;height:100%}
-`, b = ["small", "medium", "large"], n = {
+import { LitElement as F, html as q, unsafeCSS as B } from "lit";
+import { property as p, query as N } from "lit/decorators.js";
+import { ifDefined as W } from "lit/directives/if-defined.js";
+import { live as V } from "lit/directives/live.js";
+import { FormControlMixin as A, RtlMixin as K, wrapNativeEvent as G, validPropertyValues as I, defineCustomElement as H } from "@justeattakeaway/pie-webc-core";
+var m = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function U(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var R = "Expected a function", w = 0 / 0, X = "[object Symbol]", J = /^\s+|\s+$/g, Q = /^[-+]0x[0-9a-f]+$/i, Y = /^0b[01]+$/i, Z = /^0o[0-7]+$/i, ee = parseInt, te = typeof m == "object" && m && m.Object === Object && m, ae = typeof self == "object" && self && self.Object === Object && self, re = te || ae || Function("return this")(), ie = Object.prototype, ne = ie.toString, oe = Math.max, se = Math.min, j = function() {
+  return re.Date.now();
+};
+function le(e, t, a) {
+  var n, r, d, l, o, h, x = 0, T = !1, v = !1, z = !0;
+  if (typeof e != "function")
+    throw new TypeError(R);
+  t = C(t) || 0, y(a) && (T = !!a.leading, v = "maxWait" in a, d = v ? oe(C(a.maxWait) || 0, t) : d, z = "trailing" in a ? !!a.trailing : z);
+  function k(i) {
+    var f = n, g = r;
+    return n = r = void 0, x = i, l = e.apply(g, f), l;
+  }
+  function D(i) {
+    return x = i, o = setTimeout(b, t), T ? k(i) : l;
+  }
+  function P(i) {
+    var f = i - h, g = i - x, $ = t - f;
+    return v ? se($, d - g) : $;
+  }
+  function E(i) {
+    var f = i - h, g = i - x;
+    return h === void 0 || f >= t || f < 0 || v && g >= d;
+  }
+  function b() {
+    var i = j();
+    if (E(i))
+      return S(i);
+    o = setTimeout(b, P(i));
+  }
+  function S(i) {
+    return o = void 0, z && n ? k(i) : (n = r = void 0, l);
+  }
+  function L() {
+    o !== void 0 && clearTimeout(o), x = 0, n = h = r = o = void 0;
+  }
+  function M() {
+    return o === void 0 ? l : S(j());
+  }
+  function _() {
+    var i = j(), f = E(i);
+    if (n = arguments, r = this, h = i, f) {
+      if (o === void 0)
+        return D(h);
+      if (v)
+        return o = setTimeout(b, t), k(h);
+    }
+    return o === void 0 && (o = setTimeout(b, t)), l;
+  }
+  return _.cancel = L, _.flush = M, _;
+}
+function de(e, t, a) {
+  var n = !0, r = !0;
+  if (typeof e != "function")
+    throw new TypeError(R);
+  return y(a) && (n = "leading" in a ? !!a.leading : n, r = "trailing" in a ? !!a.trailing : r), le(e, t, {
+    leading: n,
+    maxWait: t,
+    trailing: r
+  });
+}
+function y(e) {
+  var t = typeof e;
+  return !!e && (t == "object" || t == "function");
+}
+function ce(e) {
+  return !!e && typeof e == "object";
+}
+function ue(e) {
+  return typeof e == "symbol" || ce(e) && ne.call(e) == X;
+}
+function C(e) {
+  if (typeof e == "number")
+    return e;
+  if (ue(e))
+    return w;
+  if (y(e)) {
+    var t = typeof e.valueOf == "function" ? e.valueOf() : e;
+    e = y(t) ? t + "" : t;
+  }
+  if (typeof e != "string")
+    return e === 0 ? e : +e;
+  e = e.replace(J, "");
+  var a = Y.test(e);
+  return a || Z.test(e) ? ee(e.slice(2), a ? 2 : 8) : Q.test(e) ? w : +e;
+}
+var he = de;
+const pe = /* @__PURE__ */ U(he), fe = `*,*:after,*:before{box-sizing:inherit}.c-textareaWrapper{--textarea-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--textarea-border-thickness: 1px;--textarea-resize: none;--textarea-padding-inline: var(--dt-spacing-d);--textarea-padding-block: var(--dt-spacing-c);--textarea-background-color: var(--dt-color-container-default);--textarea-border-color: var(--dt-color-interactive-form);--textarea-content-color: var(--dt-color-content-default);--textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));line-height:0}.c-textareaWrapper textarea{font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:var(--textarea-line-height);font-family:var(--dt-font-body-l-family);resize:var(--textarea-resize);border:var(--textarea-border-thickness) solid var(--textarea-border-color);background-color:var(--textarea-background-color);color:var(--textarea-content-color);border-radius:var(--dt-radius-rounded-c);block-size:var(--textarea-height);max-block-size:var(--textarea-max-height);min-block-size:var(--textarea-min-height);padding-block-start:var(--textarea-padding-block);padding-block-end:var(--textarea-padding-block);padding-inline-start:var(--textarea-padding-inline);padding-inline-end:var(--textarea-padding-inline)}.c-textareaWrapper textarea[disabled]{--textarea-background-color: var(--dt-color-disabled-01);--textarea-border-color: var(--dt-color-disabled-01);--textarea-content-color: var(--dt-color-content-disabled)}@media (hover: hover){.c-textareaWrapper textarea:hover:not([disabled]){--textarea-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}}.c-textareaWrapper textarea:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-textareaWrapper[data-pie-size=large]{--textarea-padding-block: var(--dt-spacing-d)}.c-textareaWrapper[data-pie-size=small]{--textarea-padding-block: var(--dt-spacing-b)}.c-textareaWrapper[data-pie-resize=manual]{--textarea-resize: vertical;--textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2))}@media (pointer: coarse){.c-textareaWrapper[data-pie-resize=manual]{--textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-resize: none}}.c-textareaWrapper[data-pie-resize=auto]{--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-min-height: var(--textarea-height)}
+`, xe = ["small", "medium", "large"], ve = ["auto", "manual"], c = {
   disabled: !1,
-  size: "medium"
+  size: "medium",
+  resize: "auto",
+  value: "",
+  autoFocus: !1,
+  readonly: !1,
+  required: !1
 };
-var y = Object.defineProperty, P = Object.getOwnPropertyDescriptor, x = (i, t, a, s) => {
-  for (var e = s > 1 ? void 0 : s ? P(t, a) : t, o = i.length - 1, p; o >= 0; o--)
-    (p = i[o]) && (e = (s ? p(t, a, e) : p(e)) || e);
-  return s && e && y(t, a, e), e;
+var ge = Object.defineProperty, be = Object.getOwnPropertyDescriptor, u = (e, t, a, n) => {
+  for (var r = n > 1 ? void 0 : n ? be(t, a) : t, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (r = (n ? l(t, a, r) : l(r)) || r);
+  return n && r && ge(t, a, r), r;
 };
-const h = "pie-textarea";
-class r extends u(l) {
+const O = "pie-textarea";
+class s extends A(K(F)) {
   constructor() {
-    super(...arguments), this.size = n.size;
+    super(...arguments), this.value = c.value, this.disabled = c.disabled, this.size = c.size, this.resize = c.resize, this.readonly = c.readonly, this.autoFocus = c.autoFocus, this.required = c.required, this._throttledResize = pe(() => {
+      this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`);
+    }, 100), this.handleInput = (t) => {
+      this.value = t.target.value, this._internals.setFormValue(this.value), this.handleResize();
+    }, this.handleChange = (t) => {
+      const a = G(t);
+      this.dispatchEvent(a);
+    }, this.handleKeyDown = (t) => {
+      t.key === "Enter" && t.stopPropagation();
+    };
+  }
+  /**
+   * (Read-only) returns a ValidityState with the validity states that this element is in.
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+   */
+  get validity() {
+    return this._textarea.validity;
+  }
+  /**
+   * Called after the disabled state of the element changes,
+   * either because the disabled attribute of this element was added or removed;
+   * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+   * @param disabled - The latest disabled state of the input.
+   */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  /**
+   * Called when the form that owns this component is reset.
+   * Resets the value to the default value.
+   */
+  formResetCallback() {
+    this.value = c.value, this._internals.setFormValue(this.value);
+  }
+  firstUpdated() {
+    this._internals.setFormValue(this.value), this._textarea.addEventListener("keydown", this.handleKeyDown);
+  }
+  handleResize() {
+    this._throttledResize();
+  }
+  updated(t) {
+    this.resize === "auto" && (t.has("resize") || t.has("size")) && this.handleResize(), t.has("value") && this._internals.setFormValue(this.value);
+  }
+  disconnectedCallback() {
+    this._textarea.removeEventListener("keydown", this.handleKeyDown);
   }
   render() {
     const {
       disabled: t,
-      size: a
+      resize: a,
+      size: n,
+      autocomplete: r,
+      autoFocus: d,
+      name: l,
+      readonly: o,
+      value: h,
+      required: x
     } = this;
-    return c`
+    return q`
             <div
-                class="c-textarea"
-                data-test-id="pie-textarea-shell"
-                data-pie-size=${f(a)}>
+                class="c-textareaWrapper"
+                data-test-id="pie-textarea-wrapper"
+                data-pie-size="${n}"
+                data-pie-resize="${a}">
                 <textarea
-                    data-test-id="pie-textarea"
+                    name=${W(l)}
+                    autocomplete=${W(r)}
+                    .value=${V(h)}
+                    ?autofocus=${d}
+                    ?readonly=${o}
+                    ?required=${x}
                     ?disabled=${t}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
+                    data-test-id="pie-textarea"
                 ></textarea>
             </div>`;
   }
 }
-r.shadowRootOptions = { ...l.shadowRootOptions, delegatesFocus: !0 };
-r.styles = m(v);
-x([
-  d({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-x([
-  d({ type: String }),
-  g(h, b, n.size)
-], r.prototype, "size", 2);
-z(h, r);
+s.shadowRootOptions = { ...F.shadowRootOptions, delegatesFocus: !0 };
+s.styles = B(fe);
+u([
+  p({ type: String })
+], s.prototype, "value", 2);
+u([
+  p({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+u([
+  p({ type: String }),
+  I(O, xe, c.size)
+], s.prototype, "size", 2);
+u([
+  p({ type: String }),
+  I(O, ve, c.resize)
+], s.prototype, "resize", 2);
+u([
+  p({ type: Boolean })
+], s.prototype, "readonly", 2);
+u([
+  p({ type: Boolean })
+], s.prototype, "autoFocus", 2);
+u([
+  p({ type: Boolean })
+], s.prototype, "required", 2);
+u([
+  p({ type: String })
+], s.prototype, "name", 2);
+u([
+  p({ type: String })
+], s.prototype, "autocomplete", 2);
+u([
+  N("textarea")
+], s.prototype, "_textarea", 2);
+H(O, s);
 export {
-  r as PieTextarea,
-  n as defaultProps,
-  b as sizes
+  s as PieTextarea,
+  c as defaultProps,
+  ve as resizeModes,
+  xe as sizes
 };

package/dist/react.d.ts

@@ -1,7 +1,9 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
@@ -9,17 +11,19 @@ import type { TemplateResult } from 'lit-html';
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-declare type DefaultProps = ComponentDefaultProps<TextareaProps>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
  */
 export declare const defaultProps: DefaultProps;
 
-export declare const PieTextarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<PieTextarea_2> & ReactBaseType>;
+export declare const PieTextarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<PieTextarea_2> & PieTextareaEvents & ReactBaseType>;
 
 /**
  * @tagname pie-textarea
+ * @event {InputEvent} input - when the textarea value is changed.
+ * @event {CustomEvent} change - when the textarea value is changed.
  */
 declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
     static shadowRootOptions: {
@@ -27,16 +31,60 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
-    disabled?: TextareaProps['disabled'];
-    size?: TextareaProps['size'];
+    value: string;
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    resize: "auto" | "manual";
+    readonly: boolean;
+    autoFocus: boolean;
+    required: boolean;
+    name?: TextareaProps['name'];
+    autocomplete?: TextareaProps['autocomplete'];
+    private _textarea;
+    private _throttledResize;
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    get validity(): ValidityState;
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Called when the form that owns this component is reset.
+     * Resets the value to the default value.
+     */
+    formResetCallback(): void;
+    protected firstUpdated(): void;
+    private handleResize;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Handles data processing in response to the input event. The native input event is left to bubble up.
+     * @param event - The input event.
+     */
+    private handleInput;
+    private handleChange;
+    private handleKeyDown;
+    disconnectedCallback(): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
-declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieTextarea_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+
+declare type PieTextareaEvents = {
+    onInput?: (event: InputEvent) => void;
+    onChange?: (event: CustomEvent) => void;
+};
 
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLTextAreaElement>;
 
+export declare const resizeModes: readonly ["auto", "manual"];
+
 export declare const sizes: readonly ["small", "medium", "large"];
 
 export declare interface TextareaProps {
@@ -48,6 +96,40 @@ export declare interface TextareaProps {
      * The size of the textarea field. Can be `small`, `medium` or `large`. Defaults to `medium`.
      */
     size?: typeof sizes[number];
+    /**
+     * The resize mode of the textarea. Can be `auto` or `manual`. Defaults to `auto`.
+     * When set to `auto`, the textarea will resize vertically as needed.
+     * When set to `manual`, the textarea will not resize automatically but can be resized by the user.
+     */
+    resize?: typeof resizeModes[number];
+    /**
+     * The value of the textarea (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
+    /**
+     * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+    /**
+     * Allows the user to enable or disable autocomplete functionality on the textarea field.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for more information and values.
+     */
+    autocomplete?: string;
+    /**
+     * If true, the textarea will be focused on the first render.
+     * No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) for more information.
+     */
+    autoFocus?: boolean;
+    /**
+     * When true, the user cannot edit the control. Not the same as disabled.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
+     */
+    readonly?: boolean;
+    /**
+     * If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid.
+     */
+    required?: boolean;
 }
 
 export { }

package/dist/react.js

@@ -1,20 +1,27 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
 import { PieTextarea as a } from "./index.js";
-import { defaultProps as f, sizes as T } from "./index.js";
+import { defaultProps as T, resizeModes as l, sizes as d } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "lit/directives/if-defined.js";
+import "lit/directives/live.js";
 import "@justeattakeaway/pie-webc-core";
 const r = t({
   displayName: "PieTextarea",
   elementClass: a,
   react: e,
   tagName: "pie-textarea",
-  events: {}
+  events: {
+    onInput: "input",
+    // when the textarea value is changed.
+    onChange: "change"
+    // when the textarea value is changed.
+  }
 }), c = r;
 export {
   c as PieTextarea,
-  f as defaultProps,
-  T as sizes
+  T as defaultProps,
+  l as resizeModes,
+  d as sizes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,10 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
+    "@types/lodash.throttle": "4.1.9",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.24.0"
+    "@justeattakeaway/pie-webc-core": "0.24.0",
+    "lodash.throttle": "4.1.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,6 +1,7 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const sizes = ['small', 'medium', 'large'] as const;
+export const resizeModes = ['auto', 'manual'] as const;
 
 export interface TextareaProps {
     /**
@@ -12,12 +13,53 @@ export interface TextareaProps {
      * The size of the textarea field. Can be `small`, `medium` or `large`. Defaults to `medium`.
      */
     size?: typeof sizes[number];
+
+    /**
+     * The resize mode of the textarea. Can be `auto` or `manual`. Defaults to `auto`.
+     * When set to `auto`, the textarea will resize vertically as needed.
+     * When set to `manual`, the textarea will not resize automatically but can be resized by the user.
+     */
+    resize?: typeof resizeModes[number];
+
+    /**
+     * The value of the textarea (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
+
+    /**
+     * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+
+    /**
+     * Allows the user to enable or disable autocomplete functionality on the textarea field.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for more information and values.
+     */
+    autocomplete?: string;
+
+    /**
+     * If true, the textarea will be focused on the first render.
+     * No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) for more information.
+     */
+    autoFocus?: boolean;
+
+    /**
+     * When true, the user cannot edit the control. Not the same as disabled.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
+     */
+    readonly?: boolean;
+
+    /**
+     * If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid.
+     */
+    required?: boolean;
 }
 
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-type DefaultProps = ComponentDefaultProps<TextareaProps>;
+type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name'| 'autocomplete'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -25,4 +67,9 @@ type DefaultProps = ComponentDefaultProps<TextareaProps>;
 export const defaultProps: DefaultProps = {
     disabled: false,
     size: 'medium',
+    resize: 'auto',
+    value: '',
+    autoFocus: false,
+    readonly: false,
+    required: false,
 };

package/src/index.ts

@@ -1,11 +1,19 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
+import {
+    LitElement, html, unsafeCSS, PropertyValues,
+} from 'lit';
+import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import throttle from 'lodash.throttle';
 
-import { validPropertyValues, RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    validPropertyValues, RtlMixin, defineCustomElement, FormControlMixin, wrapNativeEvent,
+} from '@justeattakeaway/pie-webc-core';
 
 import styles from './textarea.scss?inline';
-import { TextareaProps, defaultProps, sizes } from './defs';
+import {
+    TextareaProps, defaultProps, sizes, resizeModes,
+} from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -14,31 +22,160 @@ const componentSelector = 'pie-textarea';
 
 /**
  * @tagname pie-textarea
+ * @event {InputEvent} input - when the textarea value is changed.
+ * @event {CustomEvent} change - when the textarea value is changed.
  */
-export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
+export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implements TextareaProps {
     static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
+    @property({ type: String })
+    public value = defaultProps.value;
+
     @property({ type: Boolean, reflect: true })
-    public disabled?: TextareaProps['disabled'];
+    public disabled = defaultProps.disabled;
 
     @property({ type: String })
     @validPropertyValues(componentSelector, sizes, defaultProps.size)
-    public size?: TextareaProps['size'] = defaultProps.size;
+    public size = defaultProps.size;
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, resizeModes, defaultProps.resize)
+    public resize = defaultProps.resize;
+
+    @property({ type: Boolean })
+    public readonly = defaultProps.readonly;
+
+    @property({ type: Boolean })
+    public autoFocus = defaultProps.autoFocus;
+
+    @property({ type: Boolean })
+    public required = defaultProps.required;
+
+    @property({ type: String })
+    public name?: TextareaProps['name'];
+
+    @property({ type: String })
+    public autocomplete?: TextareaProps['autocomplete'];
+
+    @query('textarea')
+    private _textarea!: HTMLTextAreaElement;
+
+    private _throttledResize = throttle(() => {
+        if (this.resize === 'auto') {
+            this._textarea.style.height = 'auto';
+            this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`; // +2 for border thicknesses
+        }
+    }, 100);
+
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    public get validity (): ValidityState {
+        return (this._textarea as HTMLTextAreaElement).validity;
+    }
+
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    public formDisabledCallback (disabled: boolean): void {
+        this.disabled = disabled;
+    }
+
+    /**
+     * Called when the form that owns this component is reset.
+     * Resets the value to the default value.
+     */
+    public formResetCallback (): void {
+        this.value = defaultProps.value;
+
+        this._internals.setFormValue(this.value);
+    }
+
+    protected firstUpdated (): void {
+        this._internals.setFormValue(this.value);
+
+        this._textarea.addEventListener('keydown', this.handleKeyDown);
+    }
+
+    private handleResize () {
+        this._throttledResize();
+    }
+
+    protected updated (changedProperties: PropertyValues<this>) {
+        if (this.resize === 'auto' && (changedProperties.has('resize') || changedProperties.has('size'))) {
+            this.handleResize();
+        }
+
+        if (changedProperties.has('value')) {
+            this._internals.setFormValue(this.value);
+        }
+    }
+
+    /**
+     * Handles data processing in response to the input event. The native input event is left to bubble up.
+     * @param event - The input event.
+     */
+    private handleInput = (event: InputEvent) => {
+        this.value = (event.target as HTMLTextAreaElement).value;
+        this._internals.setFormValue(this.value);
+
+        this.handleResize();
+    };
+
+    private handleChange = (event: Event) => {
+        // We have to create our own change event because the native one
+        // does not penetrate the shadow boundary.
+
+        // This is because some events set `composed` to `false`.
+        // Reference: https://javascript.info/shadow-dom-events#event-composed
+        const customChangeEvent = wrapNativeEvent(event);
+        this.dispatchEvent(customChangeEvent);
+    };
+
+    private handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            event.stopPropagation();
+        }
+    };
+
+    public disconnectedCallback (): void {
+        this._textarea.removeEventListener('keydown', this.handleKeyDown);
+    }
 
     render () {
         const {
             disabled,
+            resize,
             size,
+            autocomplete,
+            autoFocus,
+            name,
+            readonly,
+            value,
+            required,
         } = this;
 
         return html`
             <div
-                class="c-textarea"
-                data-test-id="pie-textarea-shell"
-                data-pie-size=${ifDefined(size)}>
+                class="c-textareaWrapper"
+                data-test-id="pie-textarea-wrapper"
+                data-pie-size="${size}"
+                data-pie-resize="${resize}">
                 <textarea
-                    data-test-id="pie-textarea"
+                    name=${ifDefined(name)}
+                    autocomplete=${ifDefined(autocomplete)}
+                    .value=${live(value)}
+                    ?autofocus=${autoFocus}
+                    ?readonly=${readonly}
+                    ?required=${required}
                     ?disabled=${disabled}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
+                    data-test-id="pie-textarea"
                 ></textarea>
             </div>`;
     }

package/src/react.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent, EventName } from '@lit/react';
 import { PieTextarea as PieTextareaLit } from './index';
 import { TextareaProps } from './defs';
 
@@ -10,10 +10,18 @@ const PieTextareaReact = createComponent({
     elementClass: PieTextareaLit,
     react: React,
     tagName: 'pie-textarea',
-    events: {},
+    events: {
+        onInput: 'input' as EventName<InputEvent>, // when the textarea value is changed.
+        onChange: 'change' as EventName<CustomEvent>, // when the textarea value is changed.
+    },
 });
 
 type ReactBaseType = React.HTMLAttributes<HTMLTextAreaElement>
 
+type PieTextareaEvents = {
+    onInput?: (event: InputEvent) => void;
+    onChange?: (event: CustomEvent) => void;
+};
+
 export const PieTextarea = PieTextareaReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<TextareaProps>
-    & React.RefAttributes<PieTextareaLit> & ReactBaseType>;
+    & React.RefAttributes<PieTextareaLit> & PieTextareaEvents & ReactBaseType>;

package/src/textarea.scss

@@ -1,22 +1,89 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
-.c-textarea {
-  --textarea-height: 72px;
+// Heights are being defined based on the line height of the text and the padding.
+// Changing the `size` property affects the padding and therefore the height of the textarea.
+// Default height is two lines of text.
+// Minimum height in manual resize mode is one line of text.
+// Maximum height in auto resize mode is six lines of text.
+.c-textareaWrapper {
+  --textarea-line-height: #{p.line-height(--dt-font-body-l-line-height)};
+  --textarea-border-thickness: 1px;
+  --textarea-resize: none;
+  --textarea-padding-inline: var(--dt-spacing-d);
+  --textarea-padding-block: var(--dt-spacing-c);
+  --textarea-background-color: var(--dt-color-container-default);
+  --textarea-border-color: var(--dt-color-interactive-form);
+  --textarea-content-color: var(--dt-color-content-default);
 
-  height: var(--textarea-height);
+  // Default height is two lines of text
+  --textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+
+  line-height: 0; // Remove once there is text outside the textarea
+
+  textarea {
+    @include p.font-size(--dt-font-body-l-size);
+    line-height: var(--textarea-line-height);
+    font-family: var(--dt-font-body-l-family);
+    resize: var(--textarea-resize);
+    border: var(--textarea-border-thickness) solid var(--textarea-border-color);
+    background-color: var(--textarea-background-color);
+    color: var(--textarea-content-color);
+
+    border-radius: var(--dt-radius-rounded-c);
+    block-size: var(--textarea-height);
+    max-block-size: var(--textarea-max-height);
+    min-block-size: var(--textarea-min-height);
+
+    padding-block-start: var(--textarea-padding-block);
+    padding-block-end: var(--textarea-padding-block);
+    padding-inline-start: var(--textarea-padding-inline);
+    padding-inline-end: var(--textarea-padding-inline);
+
+    &[disabled] {
+      --textarea-background-color: var(--dt-color-disabled-01);
+      --textarea-border-color: var(--dt-color-disabled-01);
+      --textarea-content-color: var(--dt-color-content-disabled);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([disabled]) {
+        --textarea-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));
+      }
+    }
+
+    &:focus-visible {
+      @include p.focus;
+    }
+  }
 
   &[data-pie-size="large"] {
-    --textarea-height: 80px;
+    --textarea-padding-block: var(--dt-spacing-d);
   }
 
   &[data-pie-size="small"] {
-    --textarea-height: 64px;
+    --textarea-padding-block: var(--dt-spacing-b);
   }
 
-  textarea {
-    width: 100%;
-    height: 100%;
+  &[data-pie-resize="manual"] {
+    --textarea-resize: vertical;
+
+    // Minimum is one line of text
+    --textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2)); // One line of text
+
+    @media (pointer: coarse) {
+      // Fixed size for touch devices
+      --textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+      --textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+      --textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+      --textarea-resize: none;
+    }
   }
-}
 
+  &[data-pie-resize="auto"] {
+    // Maximum is six lines of text
+    --textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
 
+    // Minimum is two lines of text
+    --textarea-min-height: var(--textarea-height);
+  }
+}