@justeattakeaway/pie-textarea 0.21.2 → 0.22.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)
@@ -66,6 +67,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

@@ -262,6 +262,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",

package/dist/index.d.ts

@@ -59,6 +59,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.

package/dist/index.js

@@ -1,7 +1,7 @@
 import { LitElement as de, html as Y, unsafeCSS as ce } from "lit";
-import { property as s, query as ee } from "lit/decorators.js";
+import { property as l, 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 b } 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";
@@ -10,7 +10,7 @@ const O = class O extends de {
     this.getAttribute("v") || this.setAttribute("v", O.v);
   }
 };
-O.v = "0.21.2";
+O.v = "0.22.0";
 let P = O;
 var j = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function be(e) {
@@ -20,67 +20,67 @@ 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]", f = /^\s+|\s+$/g, c = /^[-+]0x[0-9a-f]+$/i, m = /^0b[01]+$/i, v = /^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() {
     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, i, s) {
+    var p, x, w, z, u, y, $ = 0, K = !1, _ = !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);
+    i = G(i) || 0, S(s) && (K = !!s.leading, _ = "maxWait" in s, w = _ ? M(G(s.maxWait) || 0, i) : w, A = "trailing" in s ? !!s.trailing : A);
     function B(a) {
-      var v = p, T = h;
-      return p = h = void 0, $ = a, z = t.apply(T, v), z;
+      var g = p, T = x;
+      return p = x = void 0, $ = a, z = t.apply(T, g), z;
     }
     function oe(a) {
-      return $ = a, u = setTimeout(S, i), K ? B(a) : z;
+      return $ = a, u = setTimeout(W, i), K ? B(a) : z;
     }
     function ne(a) {
-      var v = a - y, T = a - $, Q = i - v;
-      return _ ? q(Q, W - T) : Q;
+      var g = a - y, T = a - $, Q = i - g;
+      return _ ? q(Q, w - T) : Q;
     }
     function X(a) {
-      var v = a - y, T = a - $;
-      return y === void 0 || v >= i || v < 0 || _ && T >= W;
+      var g = a - y, T = a - $;
+      return y === void 0 || g >= i || g < 0 || _ && T >= w;
     }
-    function S() {
+    function W() {
       var a = D();
       if (X(a))
         return J(a);
-      u = setTimeout(S, ne(a));
+      u = setTimeout(W, ne(a));
     }
     function J(a) {
-      return u = void 0, A && p ? B(a) : (p = h = void 0, z);
+      return u = void 0, A && p ? B(a) : (p = x = void 0, z);
     }
     function se() {
-      u !== void 0 && clearTimeout(u), $ = 0, p = y = h = u = void 0;
+      u !== void 0 && clearTimeout(u), $ = 0, p = y = x = u = void 0;
     }
     function le() {
       return u === void 0 ? z : J(D());
     }
     function N() {
-      var a = D(), v = X(a);
-      if (p = arguments, h = this, y = a, v) {
+      var a = D(), g = X(a);
+      if (p = arguments, x = this, y = a, g) {
         if (u === void 0)
           return oe(y);
         if (_)
-          return u = setTimeout(S, i), B(y);
+          return u = setTimeout(W, i), B(y);
       }
-      return u === void 0 && (u = setTimeout(S, i)), z;
+      return u === void 0 && (u = setTimeout(W, i)), z;
     }
     return N.cancel = se, N.flush = le, N;
   }
-  function re(t, i, n) {
-    var p = !0, h = !0;
+  function re(t, i, s) {
+    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 S(s) && (p = "leading" in s ? !!s.leading : p, x = "trailing" in s ? !!s.trailing : x), te(t, i, {
       leading: p,
       maxWait: i,
-      trailing: h
+      trailing: x
     });
   }
-  function w(t) {
+  function S(t) {
     var i = typeof t;
     return !!t && (i == "object" || i == "function");
   }
@@ -88,22 +88,22 @@ function me() {
     return !!t && typeof t == "object";
   }
   function ie(t) {
-    return typeof t == "symbol" || ae(t) && L.call(t) == b;
+    return typeof t == "symbol" || ae(t) && L.call(t) == h;
   }
   function G(t) {
     if (typeof t == "number")
       return t;
     if (ie(t))
-      return l;
-    if (w(t)) {
+      return n;
+    if (S(t)) {
       var i = typeof t.valueOf == "function" ? t.valueOf() : t;
-      t = w(i) ? i + "" : i;
+      t = S(i) ? i + "" : i;
     }
     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(f, "");
+    var s = m.test(t);
+    return s || v.test(t) ? E(t.slice(2), s ? 2 : 8) : c.test(t) ? n : +t;
   }
   return V = re, V;
 }
@@ -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, o = (e, n, h, f) => {
+  for (var c = f > 1 ? void 0 : f ? Se(n, h) : n, m = e.length - 1, v; m >= 0; m--)
+    (v = e[m]) && (c = (f ? v(n, h, c) : v(c)) || c);
+  return f && c && Ce(n, h, c), c;
 };
 const C = "pie-textarea", H = "assistive-text";
 let r = 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=${b(this.status)}
                 message=${this.assistiveText || ""}
                 ?isVisuallyHidden=${!this.assistiveText}
                 data-test-id="pie-textarea-assistive-text">
@@ -193,12 +199,12 @@ let r = class extends he(xe(fe(P))) {
   render() {
     const {
       disabled: e,
-      resize: l,
-      size: b,
-      autocomplete: x,
+      resize: n,
+      size: h,
+      autocomplete: f,
       autoFocus: c,
       name: m,
-      readonly: f,
+      readonly: v,
       placeholder: E,
       value: I,
       required: F,
@@ -209,10 +215,10 @@ let r = class extends he(xe(fe(P))) {
     } = this, q = {
       "c-textareaWrapper": !0,
       "is-disabled": e,
-      "is-readonly": f,
+      "is-readonly": v,
       "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
@@ -221,21 +227,21 @@ let r = class extends he(xe(fe(P))) {
                 <textarea
                     id="${C}"
                     data-test-id="${C}"
-                    name=${g(m)}
-                    autocomplete=${g(x)}
-                    placeholder=${g(E)}
+                    name=${b(m)}
+                    autocomplete=${b(f)}
+                    placeholder=${b(E)}
                     .value=${pe(I)}
                     ?autofocus=${c}
-                    ?readonly=${f}
+                    ?readonly=${v}
                     ?required=${F}
                     ?disabled=${e}
-                    aria-describedby=${g(R ? H : void 0)}
+                    aria-describedby=${b(R ? H : void 0)}
                     aria-invalid=${k === "error" ? "true" : "false"}
-                    aria-errormessage="${g(k === "error" ? H : void 0)}"
+                    aria-errormessage="${b(k === "error" ? H : void 0)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
-                    maxlength=${g(L)}
-                    rows=${g(M)}
+                    maxlength=${b(L)}
+                    rows=${b(M)}
                 ></textarea>
             </div>
             ${this.renderAssistiveText()}
@@ -244,52 +250,52 @@ let r = class extends he(xe(fe(P))) {
 };
 r.styles = ce(ke);
 o([
-  s({ type: String })
+  l({ type: String })
 ], r.prototype, "value", 2);
 o([
-  s({ type: String })
+  l({ type: String })
 ], r.prototype, "defaultValue", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], r.prototype, "disabled", 2);
 o([
-  s({ type: String }),
+  l({ type: String }),
   U(C, $e, d.size)
 ], r.prototype, "size", 2);
 o([
-  s({ type: String }),
+  l({ type: String }),
   U(C, _e, d.resize)
 ], r.prototype, "resize", 2);
 o([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], r.prototype, "readonly", 2);
 o([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], r.prototype, "autoFocus", 2);
 o([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], r.prototype, "required", 2);
 o([
-  s({ type: String }),
+  l({ type: String }),
   U(C, Te, d.status)
 ], r.prototype, "status", 2);
 o([
-  s({ type: String })
+  l({ type: String })
 ], r.prototype, "assistiveText", 2);
 o([
-  s({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], r.prototype, "name", 2);
 o([
-  s({ type: String })
+  l({ type: String })
 ], r.prototype, "autocomplete", 2);
 o([
-  s({ type: String })
+  l({ type: String })
 ], r.prototype, "placeholder", 2);
 o([
-  s({ type: Number })
+  l({ type: Number })
 ], r.prototype, "maxlength", 2);
 o([
-  s({ type: Number })
+  l({ type: Number })
 ], r.prototype, "rows", 2);
 o([
   ee("textarea")

package/dist/react.d.ts

@@ -62,6 +62,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.

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.22.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
     "@justeattakeaway/pie-css": "1.3.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.6",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.7",
     "@types/lodash.throttle": "4.1.9"
   },
   "dependencies": {

package/src/index.ts

@@ -146,6 +146,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.