@justeattakeaway/pie-textarea 0.21.2 → 0.23.0

package/README.md

@@ -17,6 +17,7 @@
   - [Slots](#slots)
   - [CSS Variables](#css-variables)
   - [Events](#events)
+  - [Methods](#methods)
 - [Forms Usage](#forms-usage)
   - [Validation](#validation)
     - [Example](#example)
@@ -38,6 +39,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 ### Properties
 | Prop           | Options                                                      | Description                                                                                                                                                                                                                                        | Default     |
 |----------------|--------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
+| `aria`         | `{ label?: string }`                                         | ARIA attributes for the textarea. Offers `label` — use it when no visible label is associated with the textarea. | `undefined` |
 | `assistiveText`| `string`                                                     | Allows assistive text to be displayed below the textarea. Must be provided if using a non-default status.                                                                                                                                        | `undefined` |
 | `autocomplete` | `string`                                                     | Allows enabling or disabling autocomplete. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for values.                                                                                                      | `undefined` |
 | `autoFocus`    | `true`, `false`                                              | If true, focuses the textarea on first render. Only one element should have `autofocus`. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus).                                                              | `false`     |
@@ -66,6 +68,11 @@ This component does not expose any CSS variables for style overrides.
 | `change` | Fires when the textarea loses focus after the value has been changed.     |
 | `input`  | Fires when the textarea value is changed.                                 |
 
+### Methods
+| Method | Parameters | Description | Returns |
+|--------|------------|-------------|---------|
+| `setSelectionRange` | `selectionStart: number`, `selectionEnd: number`, `selectionDirection?: "forward" | "backward" | "none"` | Sets the selected text range on the underlying native textarea element. | `void` |
+
 ## Forms Usage
 It is essential that when using the textarea inside the form, you provide a `name` attribute. HTML forms create key/value pairs for textarea data based on the `name` attribute, which is crucial for native form submission.
 

package/custom-elements.json

@@ -203,6 +203,15 @@
               "privacy": "public",
               "attribute": "rows"
             },
+            {
+              "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "TextareaProps['aria']"
+              },
+              "privacy": "public",
+              "attribute": "aria"
+            },
             {
               "kind": "field",
               "name": "_textarea",
@@ -262,6 +271,38 @@
               ],
               "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": "setSelectionRange",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selectionStart",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "selectionEnd",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "selectionDirection",
+                  "default": "'none'",
+                  "type": {
+                    "text": "'forward' | 'backward' | 'none'"
+                  }
+                }
+              ],
+              "description": "Sets the selected text range on the underlying native textarea."
+            },
             {
               "kind": "method",
               "name": "formResetCallback",
@@ -419,6 +460,13 @@
                 "text": "TextareaProps['rows']"
               },
               "fieldName": "rows"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "TextareaProps['aria']"
+              },
+              "fieldName": "aria"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -8,10 +8,17 @@ import { PropertyValues } from 'lit';
 import { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import { TemplateResult } from 'lit-html';
 
+declare type AriaProps = {
+    /**
+     * Provides an accessible label for the textarea. Should be used when no visible label is associated with the textarea.
+     */
+    label?: string;
+};
+
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength' | 'rows'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength' | 'rows' | 'aria'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -39,6 +46,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     placeholder: TextareaProps['placeholder'];
     maxlength: TextareaProps['maxlength'];
     rows: TextareaProps['rows'];
+    aria: TextareaProps['aria'];
     private _textarea;
     focusTarget: HTMLElement;
     private _abortController;
@@ -59,6 +67,10 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
      * @param disabled - The latest disabled state of the input.
      */
     formDisabledCallback(disabled: boolean): void;
+    /**
+     * Sets the selected text range on the underlying native textarea.
+     */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
     /**
      * Called when the form that owns this component is reset.
      * Resets the value to the default value.
@@ -91,6 +103,10 @@ export declare const sizes: readonly ["small", "medium", "large"];
 export declare const statusTypes: readonly ["default", "success", "error"];
 
 export declare interface TextareaProps {
+    /**
+     * ARIA attributes for the textarea.
+     */
+    aria?: AriaProps;
     /**
      * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
      */

package/dist/index.js

@@ -1,18 +1,18 @@
 import { LitElement as de, html as Y, unsafeCSS as ce } from "lit";
 import { property as s, query as ee } from "lit/decorators.js";
 import { classMap as ue } from "lit/directives/class-map.js";
-import { ifDefined as g } from "lit/directives/if-defined.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
 import { live as pe } from "lit/directives/live.js";
 import "@justeattakeaway/pie-assistive-text";
 import { FormControlMixin as he, RtlMixin as xe, DelegatesFocusMixin as fe, wrapNativeEvent as ve, validPropertyValues as U, safeCustomElement as ge } from "@justeattakeaway/pie-webc-core";
-const O = class O extends de {
+const I = class I extends de {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", O.v);
+    this.getAttribute("v") || this.setAttribute("v", I.v);
   }
 };
-O.v = "0.21.2";
-let P = O;
-var j = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+I.v = "0.23.0";
+let P = I;
+var E = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function be(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
@@ -20,92 +20,92 @@ var V, Z;
 function me() {
   if (Z) return V;
   Z = 1;
-  var e = "Expected a function", l = NaN, b = "[object Symbol]", x = /^\s+|\s+$/g, c = /^[-+]0x[0-9a-f]+$/i, m = /^0b[01]+$/i, f = /^0o[0-7]+$/i, E = parseInt, I = typeof j == "object" && j && j.Object === Object && j, F = typeof self == "object" && self && self.Object === Object && self, k = I || F || Function("return this")(), R = Object.prototype, L = R.toString, M = Math.max, q = Math.min, D = function() {
+  var e = "Expected a function", n = NaN, h = "[object Symbol]", v = /^\s+|\s+$/g, c = /^[-+]0x[0-9a-f]+$/i, m = /^0b[01]+$/i, g = /^0o[0-7]+$/i, F = parseInt, R = typeof E == "object" && E && E.Object === Object && E, L = typeof self == "object" && self && self.Object === Object && self, k = R || L || Function("return this")(), M = Object.prototype, q = M.toString, D = Math.max, $ = Math.min, _ = function() {
     return k.Date.now();
   };
-  function te(t, i, n) {
-    var p, h, W, z, u, y, $ = 0, K = !1, _ = !1, A = !0;
+  function te(t, o, l) {
+    var p, x, j, z, u, y, T = 0, K = !1, C = !1, A = !0;
     if (typeof t != "function")
       throw new TypeError(e);
-    i = G(i) || 0, w(n) && (K = !!n.leading, _ = "maxWait" in n, W = _ ? M(G(n.maxWait) || 0, i) : W, A = "trailing" in n ? !!n.trailing : A);
-    function B(a) {
-      var v = p, T = h;
-      return p = h = void 0, $ = a, z = t.apply(T, v), z;
+    o = G(o) || 0, W(l) && (K = !!l.leading, C = "maxWait" in l, j = C ? D(G(l.maxWait) || 0, o) : j, A = "trailing" in l ? !!l.trailing : A);
+    function B(r) {
+      var b = p, S = x;
+      return p = x = void 0, T = r, z = t.apply(S, b), z;
     }
-    function oe(a) {
-      return $ = a, u = setTimeout(S, i), K ? B(a) : z;
+    function oe(r) {
+      return T = r, u = setTimeout(O, o), K ? B(r) : z;
     }
-    function ne(a) {
-      var v = a - y, T = a - $, Q = i - v;
-      return _ ? q(Q, W - T) : Q;
+    function ne(r) {
+      var b = r - y, S = r - T, Q = o - b;
+      return C ? $(Q, j - S) : Q;
     }
-    function X(a) {
-      var v = a - y, T = a - $;
-      return y === void 0 || v >= i || v < 0 || _ && T >= W;
+    function X(r) {
+      var b = r - y, S = r - T;
+      return y === void 0 || b >= o || b < 0 || C && S >= j;
     }
-    function S() {
-      var a = D();
-      if (X(a))
-        return J(a);
-      u = setTimeout(S, ne(a));
+    function O() {
+      var r = _();
+      if (X(r))
+        return J(r);
+      u = setTimeout(O, ne(r));
     }
-    function J(a) {
-      return u = void 0, A && p ? B(a) : (p = h = void 0, z);
+    function J(r) {
+      return u = void 0, A && p ? B(r) : (p = x = void 0, z);
     }
     function se() {
-      u !== void 0 && clearTimeout(u), $ = 0, p = y = h = u = void 0;
+      u !== void 0 && clearTimeout(u), T = 0, p = y = x = u = void 0;
     }
     function le() {
-      return u === void 0 ? z : J(D());
+      return u === void 0 ? z : J(_());
     }
     function N() {
-      var a = D(), v = X(a);
-      if (p = arguments, h = this, y = a, v) {
+      var r = _(), b = X(r);
+      if (p = arguments, x = this, y = r, b) {
         if (u === void 0)
           return oe(y);
-        if (_)
-          return u = setTimeout(S, i), B(y);
+        if (C)
+          return u = setTimeout(O, o), B(y);
       }
-      return u === void 0 && (u = setTimeout(S, i)), z;
+      return u === void 0 && (u = setTimeout(O, o)), z;
     }
     return N.cancel = se, N.flush = le, N;
   }
-  function re(t, i, n) {
-    var p = !0, h = !0;
+  function ae(t, o, l) {
+    var p = !0, x = !0;
     if (typeof t != "function")
       throw new TypeError(e);
-    return w(n) && (p = "leading" in n ? !!n.leading : p, h = "trailing" in n ? !!n.trailing : h), te(t, i, {
+    return W(l) && (p = "leading" in l ? !!l.leading : p, x = "trailing" in l ? !!l.trailing : x), te(t, o, {
       leading: p,
-      maxWait: i,
-      trailing: h
+      maxWait: o,
+      trailing: x
     });
   }
-  function w(t) {
-    var i = typeof t;
-    return !!t && (i == "object" || i == "function");
+  function W(t) {
+    var o = typeof t;
+    return !!t && (o == "object" || o == "function");
   }
-  function ae(t) {
+  function re(t) {
     return !!t && typeof t == "object";
   }
   function ie(t) {
-    return typeof t == "symbol" || ae(t) && L.call(t) == b;
+    return typeof t == "symbol" || re(t) && q.call(t) == h;
   }
   function G(t) {
     if (typeof t == "number")
       return t;
     if (ie(t))
-      return l;
-    if (w(t)) {
-      var i = typeof t.valueOf == "function" ? t.valueOf() : t;
-      t = w(i) ? i + "" : i;
+      return n;
+    if (W(t)) {
+      var o = typeof t.valueOf == "function" ? t.valueOf() : t;
+      t = W(o) ? o + "" : o;
     }
     if (typeof t != "string")
       return t === 0 ? t : +t;
-    t = t.replace(x, "");
-    var n = m.test(t);
-    return n || f.test(t) ? E(t.slice(2), n ? 2 : 8) : c.test(t) ? l : +t;
+    t = t.replace(v, "");
+    var l = m.test(t);
+    return l || g.test(t) ? F(t.slice(2), l ? 2 : 8) : c.test(t) ? n : +t;
   }
-  return V = re, V;
+  return V = ae, V;
 }
 var ye = me();
 const ze = /* @__PURE__ */ be(ye), ke = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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-c);--textarea-padding-block: var(--dt-spacing-b);--textarea-background-color: var(--dt-color-container-default);--textarea-border-color: var(--dt-color-border-form);--textarea-content-color: var(--dt-color-content-default);--textarea-placeholder-color: var(--dt-color-content-placeholder);--textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2));line-height:0;padding:var(--dt-spacing-a);border:var(--textarea-border-thickness) solid var(--textarea-border-color);background-color:var(--textarea-background-color);border-radius:var(--dt-radius-rounded-c);inline-size:100%}.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:none;background-color:var(--textarea-background-color);color:var(--textarea-content-color);block-size:var(--textarea-height);max-block-size:var(--textarea-max-height);min-block-size:var(--textarea-min-height);inline-size:100%;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:focus{box-shadow:none;outline:none}.c-textareaWrapper textarea::placeholder{color:var(--textarea-placeholder-color);opacity:1}.c-textareaWrapper.is-readonly{--textarea-background-color: var(--dt-color-container-subtle);--textarea-border-color: var(--dt-color-border-form)}.c-textareaWrapper.is-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);--textarea-placeholder-color: var(--dt-color-content-disabled)}@media(hover:hover){.c-textareaWrapper:hover:not(.is-disabled,.is-readonly){--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))))}@supports (background-color: color-mix(in srgb,black,white)){.c-textareaWrapper:hover:not(.is-disabled,.is-readonly){--textarea-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-textareaWrapper:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-textareaWrapper.c-textarea--large{--textarea-padding-block: var(--dt-spacing-c)}.c-textareaWrapper.c-textarea--small{--textarea-padding-block: var(--dt-spacing-a)}.c-textareaWrapper.c-textarea--resize-manual{--textarea-resize: vertical;--textarea-height: auto;--textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2))}@media(pointer:coarse){.c-textareaWrapper.c-textarea--resize-manual{--textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-resize: none}}.c-textareaWrapper.c-textarea--resize-auto{--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: var(--textarea-height)}.c-textareaWrapper.c-textarea--resize-none{--textarea-height: auto}.c-textareaWrapper.has-error{--textarea-border-color: var(--dt-color-support-error)}", $e = ["small", "medium", "large"], _e = ["auto", "manual", "none"], Te = ["default", "success", "error"], d = {
@@ -119,21 +119,21 @@ const ze = /* @__PURE__ */ be(ye), ke = "*,*:after,*:before{box-sizing:inherit}:
   readonly: !1,
   required: !1
 };
-var Ce = Object.defineProperty, we = Object.getOwnPropertyDescriptor, o = (e, l, b, x) => {
-  for (var c = x > 1 ? void 0 : x ? we(l, b) : l, m = e.length - 1, f; m >= 0; m--)
-    (f = e[m]) && (c = (x ? f(l, b, c) : f(c)) || c);
-  return x && c && Ce(l, b, c), c;
+var Ce = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, i = (e, n, h, v) => {
+  for (var c = v > 1 ? void 0 : v ? Se(n, h) : n, m = e.length - 1, g; m >= 0; m--)
+    (g = e[m]) && (c = (v ? g(n, h, c) : g(c)) || c);
+  return v && c && Ce(n, h, c), c;
 };
-const C = "pie-textarea", H = "assistive-text";
-let r = class extends he(xe(fe(P))) {
+const w = "pie-textarea", H = "assistive-text";
+let a = class extends he(xe(fe(P))) {
   constructor() {
     super(...arguments), this.value = d.value, this.disabled = d.disabled, this.size = d.size, this.resize = d.resize, this.readonly = d.readonly, this.autoFocus = d.autoFocus, this.required = d.required, this.status = d.status, this._throttledResize = ze(() => {
       this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
-    }, 100), this.handleInput = (e, l) => {
-      e ? this.value = e.target.value : l && (this.value = l), this._internals.setFormValue(this.value), this.handleResize();
+    }, 100), this.handleInput = (e, n) => {
+      e ? this.value = e.target.value : n && (this.value = n), this._internals.setFormValue(this.value), this.handleResize();
     }, this.handleChange = (e) => {
-      const l = ve(e);
-      this.dispatchEvent(l);
+      const n = ve(e);
+      this.dispatchEvent(n);
     }, this.handleKeyDown = (e) => {
       e.key === "Enter" && e.stopPropagation();
     };
@@ -169,6 +169,12 @@ let r = class extends he(xe(fe(P))) {
   formDisabledCallback(e) {
     this.disabled = e;
   }
+  /**
+   * Sets the selected text range on the underlying native textarea.
+   */
+  setSelectionRange(e, n, h = "none") {
+    this._textarea.setSelectionRange(e, n, h);
+  }
   /**
    * Called when the form that owns this component is reset.
    * Resets the value to the default value.
@@ -183,7 +189,7 @@ let r = class extends he(xe(fe(P))) {
     return Y`
             <pie-assistive-text
                 id="${H}"
-                variant=${g(this.status)}
+                variant=${f(this.status)}
                 message=${this.assistiveText || ""}
                 ?isVisuallyHidden=${!this.assistiveText}
                 data-test-id="pie-textarea-assistive-text">
@@ -193,115 +199,120 @@ let r = class extends he(xe(fe(P))) {
   render() {
     const {
       disabled: e,
-      resize: l,
-      size: b,
-      autocomplete: x,
+      resize: n,
+      size: h,
+      autocomplete: v,
       autoFocus: c,
       name: m,
-      readonly: f,
-      placeholder: E,
-      value: I,
-      required: F,
+      readonly: g,
+      placeholder: F,
+      value: R,
+      required: L,
       status: k,
-      assistiveText: R,
-      maxlength: L,
-      rows: M
-    } = this, q = {
+      assistiveText: M,
+      maxlength: q,
+      rows: D,
+      aria: $
+    } = this, _ = {
       "c-textareaWrapper": !0,
       "is-disabled": e,
-      "is-readonly": f,
+      "is-readonly": g,
       "has-error": k === "error",
-      [`c-textarea--resize-${l}`]: !0,
-      [`c-textarea--${b}`]: !0
+      [`c-textarea--resize-${n}`]: !0,
+      [`c-textarea--${h}`]: !0
     };
     return Y`<div>
             <div
-                class="${ue(q)}"
+                class="${ue(_)}"
                 data-test-id="pie-textarea-wrapper">
                 <textarea
-                    id="${C}"
-                    data-test-id="${C}"
-                    name=${g(m)}
-                    autocomplete=${g(x)}
-                    placeholder=${g(E)}
-                    .value=${pe(I)}
+                    id="${w}"
+                    data-test-id="${w}"
+                    name=${f(m)}
+                    autocomplete=${f(v)}
+                    placeholder=${f(F)}
+                    .value=${pe(R)}
                     ?autofocus=${c}
-                    ?readonly=${f}
-                    ?required=${F}
+                    ?readonly=${g}
+                    ?required=${L}
                     ?disabled=${e}
-                    aria-describedby=${g(R ? H : void 0)}
+                    aria-label=${f($ == null ? void 0 : $.label)}
+                    aria-describedby=${f(M ? H : void 0)}
                     aria-invalid=${k === "error" ? "true" : "false"}
-                    aria-errormessage="${g(k === "error" ? H : void 0)}"
+                    aria-errormessage="${f(k === "error" ? H : void 0)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
-                    maxlength=${g(L)}
-                    rows=${g(M)}
+                    maxlength=${f(q)}
+                    rows=${f(D)}
                 ></textarea>
             </div>
             ${this.renderAssistiveText()}
         </div>`;
   }
 };
-r.styles = ce(ke);
-o([
+a.styles = ce(ke);
+i([
   s({ type: String })
-], r.prototype, "value", 2);
-o([
+], a.prototype, "value", 2);
+i([
   s({ type: String })
-], r.prototype, "defaultValue", 2);
-o([
+], a.prototype, "defaultValue", 2);
+i([
   s({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-o([
+], a.prototype, "disabled", 2);
+i([
   s({ type: String }),
-  U(C, $e, d.size)
-], r.prototype, "size", 2);
-o([
+  U(w, $e, d.size)
+], a.prototype, "size", 2);
+i([
   s({ type: String }),
-  U(C, _e, d.resize)
-], r.prototype, "resize", 2);
-o([
+  U(w, _e, d.resize)
+], a.prototype, "resize", 2);
+i([
   s({ type: Boolean })
-], r.prototype, "readonly", 2);
-o([
+], a.prototype, "readonly", 2);
+i([
   s({ type: Boolean })
-], r.prototype, "autoFocus", 2);
-o([
+], a.prototype, "autoFocus", 2);
+i([
   s({ type: Boolean })
-], r.prototype, "required", 2);
-o([
+], a.prototype, "required", 2);
+i([
   s({ type: String }),
-  U(C, Te, d.status)
-], r.prototype, "status", 2);
-o([
+  U(w, Te, d.status)
+], a.prototype, "status", 2);
+i([
   s({ type: String })
-], r.prototype, "assistiveText", 2);
-o([
+], a.prototype, "assistiveText", 2);
+i([
   s({ type: String, reflect: !0 })
-], r.prototype, "name", 2);
-o([
+], a.prototype, "name", 2);
+i([
   s({ type: String })
-], r.prototype, "autocomplete", 2);
-o([
+], a.prototype, "autocomplete", 2);
+i([
   s({ type: String })
-], r.prototype, "placeholder", 2);
-o([
+], a.prototype, "placeholder", 2);
+i([
   s({ type: Number })
-], r.prototype, "maxlength", 2);
-o([
+], a.prototype, "maxlength", 2);
+i([
   s({ type: Number })
-], r.prototype, "rows", 2);
-o([
+], a.prototype, "rows", 2);
+i([
+  s({ type: Object })
+], a.prototype, "aria", 2);
+i([
   ee("textarea")
-], r.prototype, "_textarea", 2);
-o([
+], a.prototype, "_textarea", 2);
+i([
   ee("textarea")
-], r.prototype, "focusTarget", 2);
-r = o([
+], a.prototype, "focusTarget", 2);
+a = i([
   ge("pie-textarea")
-], r);
+], a);
 export {
-  r as PieTextarea,
+  a as PieTextarea,
   d as defaultProps,
   _e as resizeModes,
   $e as sizes,

package/dist/react.d.ts

@@ -9,10 +9,17 @@ import * as React_2 from 'react';
 import { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import { TemplateResult } from 'lit-html';
 
+declare type AriaProps = {
+    /**
+     * Provides an accessible label for the textarea. Should be used when no visible label is associated with the textarea.
+     */
+    label?: string;
+};
+
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength' | 'rows'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength' | 'rows' | 'aria'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -42,6 +49,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
     placeholder: TextareaProps['placeholder'];
     maxlength: TextareaProps['maxlength'];
     rows: TextareaProps['rows'];
+    aria: TextareaProps['aria'];
     private _textarea;
     focusTarget: HTMLElement;
     private _abortController;
@@ -62,6 +70,10 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
      * @param disabled - The latest disabled state of the input.
      */
     formDisabledCallback(disabled: boolean): void;
+    /**
+     * Sets the selected text range on the underlying native textarea.
+     */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
     /**
      * Called when the form that owns this component is reset.
      * Resets the value to the default value.
@@ -101,6 +113,10 @@ export declare const sizes: readonly ["small", "medium", "large"];
 export declare const statusTypes: readonly ["default", "success", "error"];
 
 export declare interface TextareaProps {
+    /**
+     * ARIA attributes for the textarea.
+     */
+    aria?: AriaProps;
     /**
      * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.21.2",
+  "version": "0.23.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -44,12 +44,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.3.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.6",
+    "@justeattakeaway/pie-css": "1.3.1",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.7",
     "@types/lodash.throttle": "4.1.9"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "1.0.4",
+    "@justeattakeaway/pie-assistive-text": "1.0.5",
     "@justeattakeaway/pie-webc-core": "16.0.0",
     "lodash.throttle": "4.1.1"
   },

package/src/defs.ts

@@ -4,7 +4,19 @@ export const sizes = ['small', 'medium', 'large'] as const;
 export const resizeModes = ['auto', 'manual', 'none'] as const;
 export const statusTypes = ['default', 'success', 'error'] as const;
 
+type AriaProps = {
+    /**
+     * Provides an accessible label for the textarea. Should be used when no visible label is associated with the textarea.
+     */
+    label?: string;
+}
+
 export interface TextareaProps {
+    /**
+     * ARIA attributes for the textarea.
+     */
+    aria?: AriaProps;
+
     /**
      * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
      */
@@ -93,7 +105,7 @@ export interface TextareaProps {
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength' | 'rows'>>;
+type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength' | 'rows' | 'aria'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.

package/src/index.ts

@@ -81,6 +81,9 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
     @property({ type: Number })
     public rows: TextareaProps['rows'];
 
+    @property({ type: Object })
+    public aria: TextareaProps['aria'];
+
     @query('textarea')
     private _textarea!: HTMLTextAreaElement;
 
@@ -146,6 +149,17 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
         this.disabled = disabled;
     }
 
+    /**
+     * Sets the selected text range on the underlying native textarea.
+     */
+    public setSelectionRange (
+        selectionStart: number,
+        selectionEnd: number,
+        selectionDirection: 'forward' | 'backward' | 'none' = 'none',
+    ): void {
+        this._textarea.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    }
+
     /**
      * Called when the form that owns this component is reset.
      * Resets the value to the default value.
@@ -225,6 +239,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
             assistiveText,
             maxlength,
             rows,
+            aria,
         } = this;
 
         const classes = {
@@ -251,6 +266,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
                     ?readonly=${readonly}
                     ?required=${required}
                     ?disabled=${disabled}
+                    aria-label=${ifDefined(aria?.label)}
                     aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
                     aria-invalid=${status === 'error' ? 'true' : 'false'}
                     aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}"