@justeattakeaway/pie-textarea 0.20.2 → 0.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/custom-elements.json +2 -2
- package/dist/index.d.ts +5 -3
- package/dist/index.js +26 -26
- package/dist/react.d.ts +5 -3
- package/package.json +1 -1
- package/src/defs.ts +4 -2
- package/src/index.ts +1 -1
- package/src/textarea.scss +4 -0
package/README.md
CHANGED
|
@@ -48,8 +48,8 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
48
48
|
| `placeholder` | `string` | Placeholder text shown when textarea is empty. | `""` |
|
|
49
49
|
| `readonly` | `true`, `false` | When true, the user cannot edit the textarea. Not the same as disabled. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly). | `false` |
|
|
50
50
|
| `required` | `true`, `false` | If true, textarea must have a value for valid form submission. Does not block form submission by itself. | `false` |
|
|
51
|
-
| `resize` | `"auto"`, `"manual"`
|
|
52
|
-
| `rows` | `number` | The number of visible text rows. Defaults to 2 when `resize` is `auto`, with a maximum of 6 rows. Can be set to 1 when `resize` is `manual` (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized. | `undefined` |
|
|
51
|
+
| `resize` | `"auto"`, `"manual"`, `"none"` | Controls resizing behavior. `auto` resizes vertically as needed; `manual` allows user resizing but no auto resizing; `none` cannot be resized by the user or grow automatically. | `"auto"` |
|
|
52
|
+
| `rows` | `number` | The number of visible text rows. Defaults to 2 when `resize` is `auto`, with a maximum of 6 rows. Can be set to 1 when `resize` is `manual` (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized. When `resize` is `none`, follows the `rows` value set by the user, defaulting to 2 rows. | `undefined` |
|
|
53
53
|
| `size` | `"small"`, `"medium"`, `"large"` | Sets the visual size of the textarea. | `"medium"` |
|
|
54
54
|
| `status` | `"default"`, `"error"`, `"success"` | Status of the component. If not `default`, `assistiveText` must be provided for accessibility. | `"default"` |
|
|
55
55
|
| `value` | `string` | Value of the textarea (used in form key/value pairs). | `""` |
|
package/custom-elements.json
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -28,7 +28,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
|
|
|
28
28
|
defaultValue: TextareaProps['defaultValue'];
|
|
29
29
|
disabled: boolean;
|
|
30
30
|
size: "small" | "medium" | "large";
|
|
31
|
-
resize: "auto" | "manual";
|
|
31
|
+
resize: "auto" | "manual" | "none";
|
|
32
32
|
readonly: boolean;
|
|
33
33
|
autoFocus: boolean;
|
|
34
34
|
required: boolean;
|
|
@@ -84,7 +84,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
|
|
|
84
84
|
|
|
85
85
|
declare const PieTextarea_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
|
|
86
86
|
|
|
87
|
-
export declare const resizeModes: readonly ["auto", "manual"];
|
|
87
|
+
export declare const resizeModes: readonly ["auto", "manual", "none"];
|
|
88
88
|
|
|
89
89
|
export declare const sizes: readonly ["small", "medium", "large"];
|
|
90
90
|
|
|
@@ -100,9 +100,10 @@ export declare interface TextareaProps {
|
|
|
100
100
|
*/
|
|
101
101
|
size?: typeof sizes[number];
|
|
102
102
|
/**
|
|
103
|
-
* The resize mode of the textarea. Can be `auto` or `
|
|
103
|
+
* The resize mode of the textarea. Can be `auto`, `manual` or `none`. Defaults to `auto`.
|
|
104
104
|
* When set to `auto`, the textarea will resize vertically as needed.
|
|
105
105
|
* When set to `manual`, the textarea will not resize automatically but can be resized by the user.
|
|
106
|
+
* When set to `none`, the textarea will not resize automatically and cannot be resized by the user.
|
|
106
107
|
*/
|
|
107
108
|
resize?: typeof resizeModes[number];
|
|
108
109
|
/**
|
|
@@ -156,6 +157,7 @@ export declare interface TextareaProps {
|
|
|
156
157
|
/**
|
|
157
158
|
* The number of visible text rows. Defaults to 2 when resize is auto, with a maximum of 6 rows.
|
|
158
159
|
* Can be set to 1 when resize is manual (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized.
|
|
160
|
+
* When resize is none, follows the rows value set by the user, defaulting to 2 rows.
|
|
159
161
|
*/
|
|
160
162
|
rows?: number;
|
|
161
163
|
}
|
package/dist/index.js
CHANGED
|
@@ -4,13 +4,13 @@ import { classMap as ue } from "lit/directives/class-map.js";
|
|
|
4
4
|
import { ifDefined as g } from "lit/directives/if-defined.js";
|
|
5
5
|
import { live as pe } from "lit/directives/live.js";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
import { FormControlMixin as he, RtlMixin as
|
|
7
|
+
import { FormControlMixin as he, RtlMixin as xe, DelegatesFocusMixin as fe, wrapNativeEvent as ve, validPropertyValues as U, safeCustomElement as ge } from "@justeattakeaway/pie-webc-core";
|
|
8
8
|
const O = class O extends de {
|
|
9
9
|
willUpdate() {
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", O.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
O.v = "0.
|
|
13
|
+
O.v = "0.21.0";
|
|
14
14
|
let P = O;
|
|
15
15
|
var j = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
|
|
16
16
|
function be(e) {
|
|
@@ -20,34 +20,34 @@ var V, Z;
|
|
|
20
20
|
function me() {
|
|
21
21
|
if (Z) return V;
|
|
22
22
|
Z = 1;
|
|
23
|
-
var e = "Expected a function", l = NaN, b = "[object Symbol]",
|
|
23
|
+
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() {
|
|
24
24
|
return k.Date.now();
|
|
25
25
|
};
|
|
26
26
|
function te(t, i, n) {
|
|
27
|
-
var p, h,
|
|
27
|
+
var p, h, W, z, u, y, $ = 0, K = !1, _ = !1, A = !0;
|
|
28
28
|
if (typeof t != "function")
|
|
29
29
|
throw new TypeError(e);
|
|
30
|
-
i = G(i) || 0, w(n) && (K = !!n.leading, _ = "maxWait" in n,
|
|
30
|
+
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);
|
|
31
31
|
function B(a) {
|
|
32
32
|
var v = p, T = h;
|
|
33
33
|
return p = h = void 0, $ = a, z = t.apply(T, v), z;
|
|
34
34
|
}
|
|
35
35
|
function oe(a) {
|
|
36
|
-
return $ = a, u = setTimeout(
|
|
36
|
+
return $ = a, u = setTimeout(S, i), K ? B(a) : z;
|
|
37
37
|
}
|
|
38
38
|
function ne(a) {
|
|
39
39
|
var v = a - y, T = a - $, Q = i - v;
|
|
40
|
-
return _ ? q(Q,
|
|
40
|
+
return _ ? q(Q, W - T) : Q;
|
|
41
41
|
}
|
|
42
42
|
function X(a) {
|
|
43
43
|
var v = a - y, T = a - $;
|
|
44
|
-
return y === void 0 || v >= i || v < 0 || _ && T >=
|
|
44
|
+
return y === void 0 || v >= i || v < 0 || _ && T >= W;
|
|
45
45
|
}
|
|
46
|
-
function
|
|
46
|
+
function S() {
|
|
47
47
|
var a = D();
|
|
48
48
|
if (X(a))
|
|
49
49
|
return J(a);
|
|
50
|
-
u = setTimeout(
|
|
50
|
+
u = setTimeout(S, ne(a));
|
|
51
51
|
}
|
|
52
52
|
function J(a) {
|
|
53
53
|
return u = void 0, A && p ? B(a) : (p = h = void 0, z);
|
|
@@ -64,9 +64,9 @@ function me() {
|
|
|
64
64
|
if (u === void 0)
|
|
65
65
|
return oe(y);
|
|
66
66
|
if (_)
|
|
67
|
-
return u = setTimeout(
|
|
67
|
+
return u = setTimeout(S, i), B(y);
|
|
68
68
|
}
|
|
69
|
-
return u === void 0 && (u = setTimeout(
|
|
69
|
+
return u === void 0 && (u = setTimeout(S, i)), z;
|
|
70
70
|
}
|
|
71
71
|
return N.cancel = se, N.flush = le, N;
|
|
72
72
|
}
|
|
@@ -101,14 +101,14 @@ function me() {
|
|
|
101
101
|
}
|
|
102
102
|
if (typeof t != "string")
|
|
103
103
|
return t === 0 ? t : +t;
|
|
104
|
-
t = t.replace(
|
|
104
|
+
t = t.replace(x, "");
|
|
105
105
|
var n = m.test(t);
|
|
106
|
-
return n ||
|
|
106
|
+
return n || f.test(t) ? E(t.slice(2), n ? 2 : 8) : c.test(t) ? l : +t;
|
|
107
107
|
}
|
|
108
108
|
return V = re, V;
|
|
109
109
|
}
|
|
110
110
|
var ye = me();
|
|
111
|
-
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.has-error{--textarea-border-color: var(--dt-color-support-error)}", $e = ["small", "medium", "large"], _e = ["auto", "manual"], Te = ["default", "success", "error"], d = {
|
|
111
|
+
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 = {
|
|
112
112
|
disabled: !1,
|
|
113
113
|
size: "medium",
|
|
114
114
|
resize: "auto",
|
|
@@ -119,13 +119,13 @@ const ze = /* @__PURE__ */ be(ye), ke = "*,*:after,*:before{box-sizing:inherit}:
|
|
|
119
119
|
readonly: !1,
|
|
120
120
|
required: !1
|
|
121
121
|
};
|
|
122
|
-
var Ce = Object.defineProperty, we = Object.getOwnPropertyDescriptor, o = (e, l, b,
|
|
123
|
-
for (var c =
|
|
124
|
-
(
|
|
125
|
-
return
|
|
122
|
+
var Ce = Object.defineProperty, we = Object.getOwnPropertyDescriptor, o = (e, l, b, x) => {
|
|
123
|
+
for (var c = x > 1 ? void 0 : x ? we(l, b) : l, m = e.length - 1, f; m >= 0; m--)
|
|
124
|
+
(f = e[m]) && (c = (x ? f(l, b, c) : f(c)) || c);
|
|
125
|
+
return x && c && Ce(l, b, c), c;
|
|
126
126
|
};
|
|
127
127
|
const C = "pie-textarea", H = "assistive-text";
|
|
128
|
-
let r = class extends he(fe(
|
|
128
|
+
let r = class extends he(xe(fe(P))) {
|
|
129
129
|
constructor() {
|
|
130
130
|
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(() => {
|
|
131
131
|
this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
|
|
@@ -151,7 +151,7 @@ let r = class extends he(fe(xe(P))) {
|
|
|
151
151
|
this._textarea.addEventListener("keydown", this.handleKeyDown, { signal: e }), this._internals.setFormValue(this.value);
|
|
152
152
|
}
|
|
153
153
|
updated(e) {
|
|
154
|
-
e.has("value") && this.handleInput(null, this.value), this.resize === "auto" && (e.has("resize") || e.has("size") || e.has("rows")) && this.handleResize(), this.resize === "manual" && (e.has("rows") || e.has("size") || e.has("resize")) && (this._textarea.style.height = "");
|
|
154
|
+
e.has("value") && this.handleInput(null, this.value), this.resize === "auto" && (e.has("resize") || e.has("size") || e.has("rows")) && this.handleResize(), (this.resize === "manual" || this.resize === "none") && (e.has("rows") || e.has("size") || e.has("resize")) && (this._textarea.style.height = "");
|
|
155
155
|
}
|
|
156
156
|
/**
|
|
157
157
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -195,10 +195,10 @@ let r = class extends he(fe(xe(P))) {
|
|
|
195
195
|
disabled: e,
|
|
196
196
|
resize: l,
|
|
197
197
|
size: b,
|
|
198
|
-
autocomplete:
|
|
198
|
+
autocomplete: x,
|
|
199
199
|
autoFocus: c,
|
|
200
200
|
name: m,
|
|
201
|
-
readonly:
|
|
201
|
+
readonly: f,
|
|
202
202
|
placeholder: E,
|
|
203
203
|
value: I,
|
|
204
204
|
required: F,
|
|
@@ -209,7 +209,7 @@ let r = class extends he(fe(xe(P))) {
|
|
|
209
209
|
} = this, q = {
|
|
210
210
|
"c-textareaWrapper": !0,
|
|
211
211
|
"is-disabled": e,
|
|
212
|
-
"is-readonly":
|
|
212
|
+
"is-readonly": f,
|
|
213
213
|
"has-error": k === "error",
|
|
214
214
|
[`c-textarea--resize-${l}`]: !0,
|
|
215
215
|
[`c-textarea--${b}`]: !0
|
|
@@ -222,11 +222,11 @@ let r = class extends he(fe(xe(P))) {
|
|
|
222
222
|
id="${C}"
|
|
223
223
|
data-test-id="${C}"
|
|
224
224
|
name=${g(m)}
|
|
225
|
-
autocomplete=${g(
|
|
225
|
+
autocomplete=${g(x)}
|
|
226
226
|
placeholder=${g(E)}
|
|
227
227
|
.value=${pe(I)}
|
|
228
228
|
?autofocus=${c}
|
|
229
|
-
?readonly=${
|
|
229
|
+
?readonly=${f}
|
|
230
230
|
?required=${F}
|
|
231
231
|
?disabled=${e}
|
|
232
232
|
aria-describedby=${g(R ? H : void 0)}
|
package/dist/react.d.ts
CHANGED
|
@@ -31,7 +31,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
|
|
|
31
31
|
defaultValue: TextareaProps['defaultValue'];
|
|
32
32
|
disabled: boolean;
|
|
33
33
|
size: "small" | "medium" | "large";
|
|
34
|
-
resize: "auto" | "manual";
|
|
34
|
+
resize: "auto" | "manual" | "none";
|
|
35
35
|
readonly: boolean;
|
|
36
36
|
autoFocus: boolean;
|
|
37
37
|
required: boolean;
|
|
@@ -94,7 +94,7 @@ declare type PieTextareaEvents = {
|
|
|
94
94
|
|
|
95
95
|
declare type ReactBaseType = Omit<React_2.HTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'onInput'>;
|
|
96
96
|
|
|
97
|
-
export declare const resizeModes: readonly ["auto", "manual"];
|
|
97
|
+
export declare const resizeModes: readonly ["auto", "manual", "none"];
|
|
98
98
|
|
|
99
99
|
export declare const sizes: readonly ["small", "medium", "large"];
|
|
100
100
|
|
|
@@ -110,9 +110,10 @@ export declare interface TextareaProps {
|
|
|
110
110
|
*/
|
|
111
111
|
size?: typeof sizes[number];
|
|
112
112
|
/**
|
|
113
|
-
* The resize mode of the textarea. Can be `auto` or `
|
|
113
|
+
* The resize mode of the textarea. Can be `auto`, `manual` or `none`. Defaults to `auto`.
|
|
114
114
|
* When set to `auto`, the textarea will resize vertically as needed.
|
|
115
115
|
* When set to `manual`, the textarea will not resize automatically but can be resized by the user.
|
|
116
|
+
* When set to `none`, the textarea will not resize automatically and cannot be resized by the user.
|
|
116
117
|
*/
|
|
117
118
|
resize?: typeof resizeModes[number];
|
|
118
119
|
/**
|
|
@@ -166,6 +167,7 @@ export declare interface TextareaProps {
|
|
|
166
167
|
/**
|
|
167
168
|
* The number of visible text rows. Defaults to 2 when resize is auto, with a maximum of 6 rows.
|
|
168
169
|
* Can be set to 1 when resize is manual (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized.
|
|
170
|
+
* When resize is none, follows the rows value set by the user, defaulting to 2 rows.
|
|
169
171
|
*/
|
|
170
172
|
rows?: number;
|
|
171
173
|
}
|
package/package.json
CHANGED
package/src/defs.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
|
|
3
3
|
export const sizes = ['small', 'medium', 'large'] as const;
|
|
4
|
-
export const resizeModes = ['auto', 'manual'] as const;
|
|
4
|
+
export const resizeModes = ['auto', 'manual', 'none'] as const;
|
|
5
5
|
export const statusTypes = ['default', 'success', 'error'] as const;
|
|
6
6
|
|
|
7
7
|
export interface TextareaProps {
|
|
@@ -16,9 +16,10 @@ export interface TextareaProps {
|
|
|
16
16
|
size?: typeof sizes[number];
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
|
-
* The resize mode of the textarea. Can be `auto` or `
|
|
19
|
+
* The resize mode of the textarea. Can be `auto`, `manual` or `none`. Defaults to `auto`.
|
|
20
20
|
* When set to `auto`, the textarea will resize vertically as needed.
|
|
21
21
|
* When set to `manual`, the textarea will not resize automatically but can be resized by the user.
|
|
22
|
+
* When set to `none`, the textarea will not resize automatically and cannot be resized by the user.
|
|
22
23
|
*/
|
|
23
24
|
resize?: typeof resizeModes[number];
|
|
24
25
|
|
|
@@ -84,6 +85,7 @@ export interface TextareaProps {
|
|
|
84
85
|
/**
|
|
85
86
|
* The number of visible text rows. Defaults to 2 when resize is auto, with a maximum of 6 rows.
|
|
86
87
|
* Can be set to 1 when resize is manual (no maximum height on desktop). On mobile, manual mode is fixed at 6 rows and cannot be resized.
|
|
88
|
+
* When resize is none, follows the rows value set by the user, defaulting to 2 rows.
|
|
87
89
|
*/
|
|
88
90
|
rows?: number;
|
|
89
91
|
}
|
package/src/index.ts
CHANGED
|
@@ -116,7 +116,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
|
|
|
116
116
|
this.handleResize();
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
if (this.resize === 'manual' && ((changedProperties.has('rows') || changedProperties.has('size') || changedProperties.has('resize')))) {
|
|
119
|
+
if ((this.resize === 'manual' || this.resize === 'none') && ((changedProperties.has('rows') || changedProperties.has('size') || changedProperties.has('resize')))) {
|
|
120
120
|
this._textarea.style.height = '';
|
|
121
121
|
}
|
|
122
122
|
}
|
package/src/textarea.scss
CHANGED