@justeattakeaway/pie-textarea 0.6.0 → 0.7.0

package/README.md

@@ -8,15 +8,6 @@
   </a>
 </p>
 
-# Table of Contents
-
-1. [Introduction](#pie-textarea)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Contributing](#contributing)
-
 ## pie-textarea
 
 `pie-textarea` is a Web Component built using the Lit library.
@@ -29,70 +20,20 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-textarea` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-textarea
+npm i @justeattakeaway/pie-textarea
 
-# yarn
-$ yarn add @justeattakeaway/pie-textarea
+yarn add @justeattakeaway/pie-textarea
 ```
 
 For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
 
+## Documentation
 
-### Importing the component
-
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieTextarea } from '@justeattakeaway/pie-textarea';
-
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-textarea';
-```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
-```
-
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
-
-
-## Peer Dependencies
-
-> [!IMPORTANT]
-> When using `pie-textarea`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
-
+Visit  [Textarea | PIE Design System](https://pie.design/components/textarea) to view more information on this component.
 
-## Props
+## Questions
 
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `disabled` | `boolean` | `false`| Indicates whether or not the textarea is disabled. |
-| `size` | `'small'`, `'medium'`, `'large'` | `'medium'` | The size of the textarea field. |
-| `resize` | `'auto'`, `'manual'` | `'auto'` | Controls the resizing behaviour of the textarea. |
-| `value` | `string` | `''` | The value of the textarea (used as a key/value pair in HTML forms with `name`). |
-| `name` | `string` | `''` | The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms. |
-| `autocomplete` | `string` | `''` | Allows the user to enable or disable autocomplete functionality on the textarea field. |
-| `autoFocus` | `boolean` | `false` | If true, the textarea will be focused on the first render. |
-| `readonly` | `boolean` | `false` | When true, the user cannot edit the control. Not the same as disabled. |
-| `required` | `boolean` | `false` | If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid. |
-
-In your markup or JSX, you can then use these to set the properties for the `pie-textarea` component:
-
-```html
-<!-- Native HTML -->
-<pie-textarea></pie-textarea>
-
-<!-- JSX -->
-<PieTextarea></PieTextarea>
-```
+Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
 
 ## Contributing
 

package/custom-elements.json

@@ -89,6 +89,15 @@
               "privacy": "public",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "TextareaProps['defaultValue']"
+              },
+              "privacy": "public",
+              "attribute": "defaultValue"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -286,6 +295,13 @@
               "name": "value",
               "fieldName": "value"
             },
+            {
+              "name": "defaultValue",
+              "type": {
+                "text": "TextareaProps['defaultValue']"
+              },
+              "fieldName": "defaultValue"
+            },
             {
               "name": "disabled",
               "fieldName": "disabled"

package/dist/index.d.ts

@@ -11,7 +11,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, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength' | 'defaultValue'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -30,6 +30,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
         slotAssignment?: SlotAssignmentMode | undefined;
     };
     value: string;
+    defaultValue: TextareaProps['defaultValue'];
     disabled: boolean;
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
@@ -101,6 +102,10 @@ export declare interface TextareaProps {
      * The value of the textarea (used as a key/value pair in HTML forms with `name`).
      */
     value: string;
+    /**
+     * An optional default value to use when the textarea is reset.
+     */
+    defaultValue?: string;
     /**
      * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
      */

package/dist/index.js

@@ -1,5 +1,5 @@
-import { LitElement as w, html as I, nothing as B, unsafeCSS as N } from "lit";
-import { property as h, query as V } from "lit/decorators.js";
+import { LitElement as w, html as I, nothing as q, unsafeCSS as B } from "lit";
+import { property as c, query as N } from "lit/decorators.js";
 import { live as A } from "lit/directives/live.js";
 import { FormControlMixin as K, RtlMixin as G, wrapNativeEvent as H, validPropertyValues as F, defineCustomElement as U } from "@justeattakeaway/pie-webc-core";
 import { ifDefined as O } from "lit/directives/if-defined.js";
@@ -8,55 +8,55 @@ var z = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : ty
 function X(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var R = "Expected a function", C = 0 / 0, J = "[object Symbol]", Q = /^\s+|\s+$/g, Y = /^[-+]0x[0-9a-f]+$/i, Z = /^0b[01]+$/i, ee = /^0o[0-7]+$/i, te = parseInt, ae = typeof z == "object" && z && z.Object === Object && z, re = typeof self == "object" && self && self.Object === Object && self, ie = ae || re || Function("return this")(), ne = Object.prototype, oe = ne.toString, se = Math.max, le = Math.min, L = function() {
+var R = "Expected a function", C = 0 / 0, J = "[object Symbol]", Q = /^\s+|\s+$/g, Y = /^[-+]0x[0-9a-f]+$/i, Z = /^0b[01]+$/i, ee = /^0o[0-7]+$/i, te = parseInt, ae = typeof z == "object" && z && z.Object === Object && z, re = typeof self == "object" && self && self.Object === Object && self, ie = ae || re || Function("return this")(), ne = Object.prototype, oe = ne.toString, se = Math.max, le = Math.min, S = function() {
   return ie.Date.now();
 };
 function de(t, e, a) {
-  var r, i, u, l, s, p, g = 0, m = !1, v = !1, _ = !0;
+  var r, i, u, d, s, p, g = 0, m = !1, v = !1, _ = !0;
   if (typeof t != "function")
     throw new TypeError(R);
   e = W(e) || 0, k(a) && (m = !!a.leading, v = "maxWait" in a, u = v ? se(W(a.maxWait) || 0, e) : u, _ = "trailing" in a ? !!a.trailing : _);
   function $(n) {
     var f = r, b = i;
-    return r = i = void 0, g = n, l = t.apply(b, f), l;
+    return r = i = void 0, g = n, d = t.apply(b, f), d;
   }
   function D(n) {
-    return g = n, s = setTimeout(y, e), m ? $(n) : l;
+    return g = n, s = setTimeout(y, e), m ? $(n) : d;
   }
   function P(n) {
     var f = n - p, b = n - g, E = e - f;
     return v ? le(E, u - b) : E;
   }
-  function S(n) {
+  function L(n) {
     var f = n - p, b = n - g;
     return p === void 0 || f >= e || f < 0 || v && b >= u;
   }
   function y() {
-    var n = L();
-    if (S(n))
+    var n = S();
+    if (L(n))
       return T(n);
     s = setTimeout(y, P(n));
   }
   function T(n) {
-    return s = void 0, _ && r ? $(n) : (r = i = void 0, l);
+    return s = void 0, _ && r ? $(n) : (r = i = void 0, d);
   }
   function M() {
     s !== void 0 && clearTimeout(s), g = 0, r = p = i = s = void 0;
   }
-  function q() {
-    return s === void 0 ? l : T(L());
+  function V() {
+    return s === void 0 ? d : T(S());
   }
   function j() {
-    var n = L(), f = S(n);
+    var n = S(), f = L(n);
     if (r = arguments, i = this, p = n, f) {
       if (s === void 0)
         return D(p);
       if (v)
         return s = setTimeout(y, e), $(p);
     }
-    return s === void 0 && (s = setTimeout(y, e)), l;
+    return s === void 0 && (s = setTimeout(y, e)), d;
   }
-  return j.cancel = M, j.flush = q, j;
+  return j.cancel = M, j.flush = V, j;
 }
 function ce(t, e, a) {
   var r = !0, i = !0;
@@ -95,7 +95,7 @@ function W(t) {
 }
 var pe = ce;
 const fe = /* @__PURE__ */ X(pe), ge = `*,*: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)}
-`, ve = ["small", "medium", "large"], xe = ["auto", "manual"], c = {
+`, ve = ["small", "medium", "large"], xe = ["auto", "manual"], h = {
   disabled: !1,
   size: "medium",
   resize: "auto",
@@ -105,15 +105,15 @@ const fe = /* @__PURE__ */ X(pe), ge = `*,*:after,*:before{box-sizing:inherit}.c
   readonly: !1,
   required: !1
 };
-var be = Object.defineProperty, me = Object.getOwnPropertyDescriptor, d = (t, e, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? me(e, a) : e, u = t.length - 1, l; u >= 0; u--)
-    (l = t[u]) && (i = (r ? l(e, a, i) : l(i)) || i);
+var be = Object.defineProperty, me = Object.getOwnPropertyDescriptor, l = (t, e, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? me(e, a) : e, u = t.length - 1, d; u >= 0; u--)
+    (d = t[u]) && (i = (r ? d(e, a, i) : d(i)) || i);
   return r && i && be(e, a, i), i;
 };
 const x = "pie-textarea";
 class o extends K(G(w)) {
   constructor() {
-    super(...arguments), this.value = c.value, this.disabled = c.disabled, this.size = c.size, this.resize = c.resize, this.label = c.label, this.readonly = c.readonly, this.autoFocus = c.autoFocus, this.required = c.required, this._throttledResize = fe(() => {
+    super(...arguments), this.value = h.value, this.disabled = h.disabled, this.size = h.size, this.resize = h.resize, this.label = h.label, this.readonly = h.readonly, this.autoFocus = h.autoFocus, this.required = h.required, this._throttledResize = fe(() => {
       this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`);
     }, 100), this.handleInput = (e) => {
       this.value = e.target.value, this.restrictInputLength(), this._internals.setFormValue(this.value), this.handleResize();
@@ -145,7 +145,7 @@ class o extends K(G(w)) {
    * Resets the value to the default value.
    */
   formResetCallback() {
-    this.value = c.value, this._internals.setFormValue(this.value);
+    this.value = this.defaultValue ?? h.value, this._internals.setFormValue(this.value);
   }
   firstUpdated() {
     this.restrictInputLength(), this._internals.setFormValue(this.value), this._textarea.addEventListener("keydown", this.handleKeyDown);
@@ -167,7 +167,7 @@ class o extends K(G(w)) {
   }
   renderLabel(e, a) {
     const r = a ? `${this.value.length}/${a}` : void 0;
-    return e != null && e.length ? I`<pie-form-label for="${x}" trailing=${O(r)}>${e}</pie-form-label>` : B;
+    return e != null && e.length ? I`<pie-form-label for="${x}" trailing=${O(r)}>${e}</pie-form-label>` : q;
   }
   render() {
     const {
@@ -176,7 +176,7 @@ class o extends K(G(w)) {
       size: r,
       autocomplete: i,
       autoFocus: u,
-      name: l,
+      name: d,
       readonly: s,
       value: p,
       required: g,
@@ -193,7 +193,7 @@ class o extends K(G(w)) {
                 <textarea
                     id="${x}"
                     data-test-id="${x}"
-                    name=${O(l)}
+                    name=${O(d)}
                     autocomplete=${O(i)}
                     .value=${A(p)}
                     ?autofocus=${u}
@@ -207,49 +207,52 @@ class o extends K(G(w)) {
   }
 }
 o.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 };
-o.styles = N(ge);
-d([
-  h({ type: String })
+o.styles = B(ge);
+l([
+  c({ type: String })
 ], o.prototype, "value", 2);
-d([
-  h({ type: Boolean, reflect: !0 })
+l([
+  c({ type: String })
+], o.prototype, "defaultValue", 2);
+l([
+  c({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-d([
-  h({ type: String }),
-  F(x, ve, c.size)
+l([
+  c({ type: String }),
+  F(x, ve, h.size)
 ], o.prototype, "size", 2);
-d([
-  h({ type: String }),
-  F(x, xe, c.resize)
+l([
+  c({ type: String }),
+  F(x, xe, h.resize)
 ], o.prototype, "resize", 2);
-d([
-  h({ type: String })
+l([
+  c({ type: String })
 ], o.prototype, "label", 2);
-d([
-  h({ type: Number })
+l([
+  c({ type: Number })
 ], o.prototype, "maxLength", 2);
-d([
-  h({ type: Boolean })
+l([
+  c({ type: Boolean })
 ], o.prototype, "readonly", 2);
-d([
-  h({ type: Boolean })
+l([
+  c({ type: Boolean })
 ], o.prototype, "autoFocus", 2);
-d([
-  h({ type: Boolean })
+l([
+  c({ type: Boolean })
 ], o.prototype, "required", 2);
-d([
-  h({ type: String })
+l([
+  c({ type: String })
 ], o.prototype, "name", 2);
-d([
-  h({ type: String })
+l([
+  c({ type: String })
 ], o.prototype, "autocomplete", 2);
-d([
-  V("textarea")
+l([
+  N("textarea")
 ], o.prototype, "_textarea", 2);
 U(x, o);
 export {
   o as PieTextarea,
-  c as defaultProps,
+  h as defaultProps,
   xe as resizeModes,
   ve as sizes
 };

package/dist/react.d.ts

@@ -12,7 +12,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, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength' | 'defaultValue'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -33,6 +33,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
         slotAssignment?: SlotAssignmentMode | undefined;
     };
     value: string;
+    defaultValue: TextareaProps['defaultValue'];
     disabled: boolean;
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
@@ -111,6 +112,10 @@ export declare interface TextareaProps {
      * The value of the textarea (used as a key/value pair in HTML forms with `name`).
      */
     value: string;
+    /**
+     * An optional default value to use when the textarea is reset.
+     */
+    defaultValue?: string;
     /**
      * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,12 +36,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.16.0",
+    "@justeattakeaway/pie-components-config": "0.17.0",
+    "@justeattakeaway/pie-css": "0.12.1",
     "@types/lodash.throttle": "4.1.9",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-form-label": "0.14.0",
+    "@justeattakeaway/pie-form-label": "0.14.1",
     "@justeattakeaway/pie-webc-core": "0.24.0",
     "lodash.throttle": "4.1.1"
   },

package/src/defs.ts

@@ -26,6 +26,11 @@ export interface TextareaProps {
      */
     value: string;
 
+    /**
+     * An optional default value to use when the textarea is reset.
+     */
+    defaultValue?: string;
+
     /**
      * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
      */
@@ -70,7 +75,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' | 'maxLength'>>;
+type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength' | 'defaultValue'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.

package/src/index.ts

@@ -34,6 +34,9 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
     @property({ type: String })
     public value = defaultProps.value;
 
+    @property({ type: String })
+    public defaultValue: TextareaProps['defaultValue'];
+
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
@@ -99,7 +102,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
      * Resets the value to the default value.
      */
     public formResetCallback (): void {
-        this.value = defaultProps.value;
+        this.value = this.defaultValue ?? defaultProps.value;
 
         this._internals.setFormValue(this.value);
     }