@justeattakeaway/pie-textarea 0.4.0 → 0.5.0

package/README.md

@@ -73,10 +73,16 @@ 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. |
-| `resize` | `"auto"`, `"manual"` | `"auto"` | Controls the resizing behaviour of the textarea. |
+|---|---|---|---|
+| `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

@@ -34,7 +34,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\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."
         }
       ],
@@ -83,6 +83,12 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
             },
+            {
+              "kind": "field",
+              "name": "value",
+              "privacy": "public",
+              "attribute": "value"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -102,6 +108,42 @@
               "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['name'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "TextareaProps['autocomplete'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "autocomplete"
+            },
             {
               "kind": "field",
               "name": "_textarea",
@@ -115,13 +157,96 @@
               "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"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "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"
@@ -133,9 +258,39 @@
             {
               "name": "resize",
               "fieldName": "resize"
+            },
+            {
+              "name": "readonly",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "autoFocus",
+              "fieldName": "autoFocus"
+            },
+            {
+              "name": "required",
+              "fieldName": "required"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "TextareaProps['name'] | undefined"
+              },
+              "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,5 +1,6 @@
 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';
@@ -9,7 +10,7 @@ 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.
@@ -18,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: {
@@ -25,18 +28,50 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
+    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;
-    updated(changedProperties: PropertyValues<this>): void;
+    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"];
 
@@ -57,6 +92,34 @@ export declare interface TextareaProps {
      * 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,160 +1,233 @@
-import { LitElement as $, html as B, unsafeCSS as D } from "lit";
-import { property as O, query as N } from "lit/decorators.js";
-import { RtlMixin as A, validPropertyValues as w, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
-var b = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function H(e) {
+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 P = "Expected a function", I = 0 / 0, q = "[object Symbol]", U = /^\s+|\s+$/g, V = /^[-+]0x[0-9a-f]+$/i, X = /^0b[01]+$/i, J = /^0o[0-7]+$/i, K = parseInt, Q = typeof b == "object" && b && b.Object === Object && b, Y = typeof self == "object" && self && self.Object === Object && self, Z = Q || Y || Function("return this")(), ee = Object.prototype, te = ee.toString, re = Math.max, ae = Math.min, j = function() {
-  return Z.Date.now();
+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 ie(e, t, r) {
-  var i, n, s, d, o, c, p = 0, _ = !1, u = !1, y = !0;
+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(P);
-  t = R(t) || 0, v(r) && (_ = !!r.leading, u = "maxWait" in r, s = u ? re(R(r.maxWait) || 0, t) : s, y = "trailing" in r ? !!r.trailing : y);
-  function z(a) {
-    var l = i, h = n;
-    return i = n = void 0, p = a, d = e.apply(h, l), d;
+    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 C(a) {
-    return p = a, o = setTimeout(g, t), _ ? z(a) : d;
+  function D(i) {
+    return x = i, o = setTimeout(b, t), T ? k(i) : l;
   }
-  function M(a) {
-    var l = a - c, h = a - p, E = t - l;
-    return u ? ae(E, s - h) : E;
+  function P(i) {
+    var f = i - h, g = i - x, $ = t - f;
+    return v ? se($, d - g) : $;
   }
-  function W(a) {
-    var l = a - c, h = a - p;
-    return c === void 0 || l >= t || l < 0 || u && h >= s;
+  function E(i) {
+    var f = i - h, g = i - x;
+    return h === void 0 || f >= t || f < 0 || v && g >= d;
   }
-  function g() {
-    var a = j();
-    if (W(a))
-      return S(a);
-    o = setTimeout(g, M(a));
+  function b() {
+    var i = j();
+    if (E(i))
+      return S(i);
+    o = setTimeout(b, P(i));
   }
-  function S(a) {
-    return o = void 0, y && i ? z(a) : (i = n = void 0, d);
+  function S(i) {
+    return o = void 0, z && n ? k(i) : (n = r = void 0, l);
   }
   function L() {
-    o !== void 0 && clearTimeout(o), p = 0, i = c = n = o = void 0;
+    o !== void 0 && clearTimeout(o), x = 0, n = h = r = o = void 0;
   }
-  function F() {
-    return o === void 0 ? d : S(j());
+  function M() {
+    return o === void 0 ? l : S(j());
   }
-  function k() {
-    var a = j(), l = W(a);
-    if (i = arguments, n = this, c = a, l) {
+  function _() {
+    var i = j(), f = E(i);
+    if (n = arguments, r = this, h = i, f) {
       if (o === void 0)
-        return C(c);
-      if (u)
-        return o = setTimeout(g, t), z(c);
+        return D(h);
+      if (v)
+        return o = setTimeout(b, t), k(h);
     }
-    return o === void 0 && (o = setTimeout(g, t)), d;
+    return o === void 0 && (o = setTimeout(b, t)), l;
   }
-  return k.cancel = L, k.flush = F, k;
+  return _.cancel = L, _.flush = M, _;
 }
-function ne(e, t, r) {
-  var i = !0, n = !0;
+function de(e, t, a) {
+  var n = !0, r = !0;
   if (typeof e != "function")
-    throw new TypeError(P);
-  return v(r) && (i = "leading" in r ? !!r.leading : i, n = "trailing" in r ? !!r.trailing : n), ie(e, t, {
-    leading: i,
+    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: n
+    trailing: r
   });
 }
-function v(e) {
+function y(e) {
   var t = typeof e;
   return !!e && (t == "object" || t == "function");
 }
-function oe(e) {
+function ce(e) {
   return !!e && typeof e == "object";
 }
-function de(e) {
-  return typeof e == "symbol" || oe(e) && te.call(e) == q;
+function ue(e) {
+  return typeof e == "symbol" || ce(e) && ne.call(e) == X;
 }
-function R(e) {
+function C(e) {
   if (typeof e == "number")
     return e;
-  if (de(e))
-    return I;
-  if (v(e)) {
+  if (ue(e))
+    return w;
+  if (y(e)) {
     var t = typeof e.valueOf == "function" ? e.valueOf() : e;
-    e = v(t) ? t + "" : t;
+    e = y(t) ? t + "" : t;
   }
   if (typeof e != "string")
     return e === 0 ? e : +e;
-  e = e.replace(U, "");
-  var r = X.test(e);
-  return r || J.test(e) ? K(e.slice(2), r ? 2 : 8) : V.test(e) ? I : +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 se = ne;
-const le = /* @__PURE__ */ H(se), ce = `*,*: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)}
-`, fe = ["small", "medium", "large"], pe = ["auto", "manual"], x = {
+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",
-  resize: "auto"
+  resize: "auto",
+  value: "",
+  autoFocus: !1,
+  readonly: !1,
+  required: !1
 };
-var ue = Object.defineProperty, he = Object.getOwnPropertyDescriptor, m = (e, t, r, i) => {
-  for (var n = i > 1 ? void 0 : i ? he(t, r) : t, s = e.length - 1, d; s >= 0; s--)
-    (d = e[s]) && (n = (i ? d(t, r, n) : d(n)) || n);
-  return i && n && ue(t, r, n), n;
+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 T = "pie-textarea";
-class f extends A($) {
+const O = "pie-textarea";
+class s extends A(K(F)) {
   constructor() {
-    super(...arguments), this.disabled = x.disabled, this.size = x.size, this.resize = x.resize, this._throttledResize = le(() => {
+    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);
+    }, 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();
+    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,
-      resize: r,
-      size: i
+      resize: a,
+      size: n,
+      autocomplete: r,
+      autoFocus: d,
+      name: l,
+      readonly: o,
+      value: h,
+      required: x
     } = this;
-    return B`
+    return q`
             <div
                 class="c-textareaWrapper"
                 data-test-id="pie-textarea-wrapper"
-                data-pie-size="${i}"
-                data-pie-resize="${r}">
+                data-pie-size="${n}"
+                data-pie-resize="${a}">
                 <textarea
-                    data-test-id="pie-textarea"
-                    @input=${this.handleResize}
+                    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>`;
   }
 }
-f.shadowRootOptions = { ...$.shadowRootOptions, delegatesFocus: !0 };
-f.styles = D(ce);
-m([
-  O({ type: Boolean, reflect: !0 })
-], f.prototype, "disabled", 2);
-m([
-  O({ type: String }),
-  w(T, fe, x.size)
-], f.prototype, "size", 2);
-m([
-  O({ type: String }),
-  w(T, pe, x.resize)
-], f.prototype, "resize", 2);
-m([
+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")
-], f.prototype, "_textarea", 2);
-G(T, f);
+], s.prototype, "_textarea", 2);
+H(O, s);
 export {
-  f as PieTextarea,
-  x as defaultProps,
-  pe as resizeModes,
-  fe as sizes
+  s as PieTextarea,
+  c as defaultProps,
+  ve as resizeModes,
+  xe as sizes
 };

package/dist/react.d.ts

@@ -1,5 +1,6 @@
 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';
@@ -10,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: {
@@ -28,18 +31,55 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
+    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;
-    updated(changedProperties: PropertyValues<this>): void;
+    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>;
 
@@ -62,6 +102,34 @@ export declare interface TextareaProps {
      * 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 P, resizeModes 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: {}
-}), x = r;
+  events: {
+    onInput: "input",
+    // when the textarea value is changed.
+    onChange: "change"
+    // when the textarea value is changed.
+  }
+}), c = r;
 export {
-  x as PieTextarea,
-  P as defaultProps,
-  f as resizeModes,
-  T as sizes
+  c as PieTextarea,
+  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.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -20,12 +20,46 @@ export interface TextareaProps {
      * 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.
@@ -34,4 +68,8 @@ export const defaultProps: DefaultProps = {
     disabled: false,
     size: 'medium',
     resize: 'auto',
+    value: '',
+    autoFocus: false,
+    readonly: false,
+    required: false,
 };

package/src/index.ts

@@ -2,9 +2,13 @@ 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 {
@@ -18,10 +22,15 @@ 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 = defaultProps.disabled;
 
@@ -33,6 +42,21 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
     @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;
 
@@ -43,14 +67,83 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
         }
     }, 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();
     }
 
-    updated (changedProperties: PropertyValues<this>) {
+    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 () {
@@ -58,6 +151,12 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
             disabled,
             resize,
             size,
+            autocomplete,
+            autoFocus,
+            name,
+            readonly,
+            value,
+            required,
         } = this;
 
         return html`
@@ -67,9 +166,16 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
                 data-pie-size="${size}"
                 data-pie-resize="${resize}">
                 <textarea
-                    data-test-id="pie-textarea"
-                    @input=${this.handleResize}
+                    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>;