@versini/ui-textarea 5.0.1 → 5.0.3
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/dist/components/TextArea/TextArea.js +46 -46
- package/dist/index.js +3 -3
- package/package.json +8 -12
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs as oe, jsx as h } from "react/jsx-runtime";
|
|
2
|
-
import { useMergeRefs as ce, useResizeObserver as
|
|
2
|
+
import { useMergeRefs as ce, useResizeObserver as B, useUniqueId as le, useUncontrolled as ne } from "@versini/ui-hooks";
|
|
3
3
|
import { LiveRegion as ie } from "@versini/ui-liveregion";
|
|
4
|
-
import ue, { useRef as T, useState as H, useLayoutEffect as
|
|
4
|
+
import ue, { useRef as T, useState as H, useLayoutEffect as m } from "react";
|
|
5
5
|
import o from "clsx";
|
|
6
|
-
const
|
|
6
|
+
const U = "av-text-area", de = "av-text-area-wrapper", I = "av-text-area-helper-text", fe = "av-text-area__control--right", xe = "av-text-area__control--left", pe = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hidden px-4 py-7", ye = ({ mode: e }) => o({
|
|
7
7
|
"bg-surface-darker text-copy-lighter caret-copy-light": e === "dark",
|
|
8
8
|
"bg-surface-lighter text-copy-dark caret-copy-dark": e === "light",
|
|
9
9
|
"bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": e === "system",
|
|
@@ -37,14 +37,14 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
37
37
|
return o(
|
|
38
38
|
"transform translate-y-0 scale-100 absolute px-2 cursor-not-allowed opacity-50 font-medium",
|
|
39
39
|
{
|
|
40
|
-
"translate-x-[
|
|
40
|
+
"translate-x-[10px]": c === !0 && !r || !c && !r
|
|
41
41
|
}
|
|
42
42
|
);
|
|
43
43
|
if (!t)
|
|
44
44
|
return o(
|
|
45
45
|
"absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
|
|
46
46
|
{
|
|
47
|
-
"translate-x-[
|
|
47
|
+
"translate-x-[10px]": c === !0 && !r || !c && !r,
|
|
48
48
|
"text-copy-medium": s === "dark",
|
|
49
49
|
"text-copy-dark": s === "light",
|
|
50
50
|
"text-copy-dark dark:text-copy-medium": s === "system",
|
|
@@ -55,7 +55,7 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
55
55
|
return o(
|
|
56
56
|
"absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
|
|
57
57
|
{
|
|
58
|
-
"translate-x-[
|
|
58
|
+
"translate-x-[10px]": c === !0 && !r || !c && !r,
|
|
59
59
|
"text-copy-medium": s === "dark",
|
|
60
60
|
"text-copy-error-dark": s === "light",
|
|
61
61
|
"text-copy-error-dark dark:text-copy-error-light": s === "system",
|
|
@@ -72,18 +72,18 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
72
72
|
return "";
|
|
73
73
|
if (s)
|
|
74
74
|
return o(
|
|
75
|
-
|
|
75
|
+
I,
|
|
76
76
|
"absolute px-2 cursor-not-allowed opacity-50 font-medium"
|
|
77
77
|
);
|
|
78
78
|
if (!e)
|
|
79
|
-
return o(
|
|
79
|
+
return o(I, "absolute px-2 font-medium", {
|
|
80
80
|
"text-copy-medium": t === "dark",
|
|
81
81
|
"text-copy-dark": t === "light",
|
|
82
82
|
"text-copy-dark dark:text-copy-medium": t === "system",
|
|
83
83
|
"text-copy-medium dark:text-copy-dark": t === "alt-system"
|
|
84
84
|
});
|
|
85
85
|
if (e)
|
|
86
|
-
return o(
|
|
86
|
+
return o(I, "absolute px-2 font-medium", {
|
|
87
87
|
"text-copy-error-light": t === "dark",
|
|
88
88
|
"text-copy-error-dark": t === "light",
|
|
89
89
|
"text-copy-error-dark dark:text-copy-error-light": t === "system",
|
|
@@ -105,8 +105,8 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
105
105
|
"relative flex w-full flex-col justify-center",
|
|
106
106
|
de,
|
|
107
107
|
e
|
|
108
|
-
),
|
|
109
|
-
|
|
108
|
+
), _ = t ? o(a) : o(
|
|
109
|
+
U,
|
|
110
110
|
a,
|
|
111
111
|
pe(),
|
|
112
112
|
ye({ mode: d }),
|
|
@@ -133,7 +133,7 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
133
133
|
}), b = t ? void 0 : o(fe, "absolute"), f = t ? void 0 : o(xe, "absolute");
|
|
134
134
|
return {
|
|
135
135
|
wrapper: N,
|
|
136
|
-
textArea:
|
|
136
|
+
textArea: _,
|
|
137
137
|
accessibleLabel: O,
|
|
138
138
|
visibleLabel: S,
|
|
139
139
|
helperText: n,
|
|
@@ -156,7 +156,7 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
156
156
|
helperTextOffset: d,
|
|
157
157
|
scrollHeight: e
|
|
158
158
|
};
|
|
159
|
-
},
|
|
159
|
+
}, Re = ue.forwardRef(
|
|
160
160
|
({
|
|
161
161
|
id: e,
|
|
162
162
|
name: a,
|
|
@@ -169,19 +169,19 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
169
169
|
focusMode: p = "system",
|
|
170
170
|
value: g,
|
|
171
171
|
defaultValue: N,
|
|
172
|
-
disabled:
|
|
172
|
+
disabled: _ = !1,
|
|
173
173
|
noBorder: O = !1,
|
|
174
174
|
labelId: S,
|
|
175
175
|
helperText: n = "",
|
|
176
176
|
helperTextOnFocus: b = !1,
|
|
177
177
|
rightElement: f,
|
|
178
178
|
leftElement: k,
|
|
179
|
-
onChange:
|
|
179
|
+
onChange: P,
|
|
180
180
|
onFocus: F,
|
|
181
181
|
onBlur: $,
|
|
182
|
-
...
|
|
183
|
-
},
|
|
184
|
-
const i = T(null),
|
|
182
|
+
...Y
|
|
183
|
+
}, z) => {
|
|
184
|
+
const i = T(null), D = ce([z, i]), [q, v] = B(), [J, A] = B(), E = T(80), M = T(-25), L = T(null), X = T(30), j = T(null), R = le({ id: e, prefix: `${U}-` }), [w, K] = H(0), [G, Q] = H(0), [V, W] = H(
|
|
185
185
|
!!(!b && n)
|
|
186
186
|
), Z = `${a} error, ${n}`, y = Te({
|
|
187
187
|
className: c,
|
|
@@ -189,7 +189,7 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
189
189
|
error: s,
|
|
190
190
|
raw: r,
|
|
191
191
|
focusMode: p,
|
|
192
|
-
disabled:
|
|
192
|
+
disabled: _,
|
|
193
193
|
noBorder: O,
|
|
194
194
|
mode: d,
|
|
195
195
|
rightElement: !!f,
|
|
@@ -199,7 +199,7 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
199
199
|
initialControlledDelay: 20,
|
|
200
200
|
defaultValue: N,
|
|
201
201
|
onChange: (l) => {
|
|
202
|
-
|
|
202
|
+
P && P({
|
|
203
203
|
target: {
|
|
204
204
|
value: l
|
|
205
205
|
}
|
|
@@ -208,24 +208,24 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
208
208
|
}), te = (l) => {
|
|
209
209
|
ee(l.target.value);
|
|
210
210
|
}, re = (l) => {
|
|
211
|
-
b && n &&
|
|
211
|
+
b && n && W(!0), F && F(l);
|
|
212
212
|
}, se = (l) => {
|
|
213
|
-
b && n && !x &&
|
|
213
|
+
b && n && !x && W(!1), $ && $(l);
|
|
214
214
|
};
|
|
215
|
-
return
|
|
216
|
-
|
|
217
|
-
}, [
|
|
218
|
-
A && A.width &&
|
|
219
|
-
}, [A]),
|
|
215
|
+
return m(() => {
|
|
216
|
+
v && v.width && K(v.width + 18 + 10);
|
|
217
|
+
}, [v]), m(() => {
|
|
218
|
+
A && A.width && Q(A.width + 18 + 10);
|
|
219
|
+
}, [A]), m(() => {
|
|
220
220
|
r || i && i.current && x !== void 0 && (i.current.style.height = "inherit", i.current.style.height = i.current.scrollHeight + "px");
|
|
221
|
-
}, [x, r]),
|
|
221
|
+
}, [x, r]), m(() => {
|
|
222
222
|
r || setTimeout(() => {
|
|
223
223
|
L?.current?.style.setProperty(
|
|
224
224
|
"--av-text-area-wrapper-transition",
|
|
225
225
|
x ? "none" : "all 0.2s ease-out"
|
|
226
226
|
);
|
|
227
227
|
}, 0);
|
|
228
|
-
}, [x, r]),
|
|
228
|
+
}, [x, r]), m(() => {
|
|
229
229
|
if (!r && i && i.current && x !== void 0) {
|
|
230
230
|
const { labelOffset: l, helperTextOffset: C, scrollHeight: ae } = be({
|
|
231
231
|
scrollHeight: i.current.scrollHeight,
|
|
@@ -248,7 +248,7 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
248
248
|
/* @__PURE__ */ h(
|
|
249
249
|
"label",
|
|
250
250
|
{
|
|
251
|
-
htmlFor:
|
|
251
|
+
htmlFor: R,
|
|
252
252
|
id: S,
|
|
253
253
|
className: y.accessibleLabel,
|
|
254
254
|
children: t
|
|
@@ -257,7 +257,7 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
257
257
|
k && /* @__PURE__ */ h(
|
|
258
258
|
"div",
|
|
259
259
|
{
|
|
260
|
-
ref:
|
|
260
|
+
ref: J,
|
|
261
261
|
className: y.leftElement,
|
|
262
262
|
children: k
|
|
263
263
|
}
|
|
@@ -265,28 +265,28 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
265
265
|
/* @__PURE__ */ h(
|
|
266
266
|
"textarea",
|
|
267
267
|
{
|
|
268
|
-
ref:
|
|
269
|
-
id:
|
|
268
|
+
ref: D,
|
|
269
|
+
id: R,
|
|
270
270
|
name: a,
|
|
271
|
-
disabled:
|
|
271
|
+
disabled: _,
|
|
272
272
|
placeholder: r ? void 0 : " ",
|
|
273
273
|
className: y.textArea,
|
|
274
274
|
rows: 1,
|
|
275
|
-
...n && { "aria-describedby": `${
|
|
275
|
+
...n && { "aria-describedby": `${R}-helper` },
|
|
276
276
|
...s && { "aria-invalid": "true" },
|
|
277
277
|
...f && !k && !r && { style: { paddingRight: w } },
|
|
278
|
-
...k && !f && !r && { style: { paddingLeft:
|
|
278
|
+
...k && !f && !r && { style: { paddingLeft: G } },
|
|
279
279
|
...f && k && !r && {
|
|
280
280
|
style: {
|
|
281
281
|
paddingRight: w,
|
|
282
|
-
paddingLeft:
|
|
282
|
+
paddingLeft: G
|
|
283
283
|
}
|
|
284
284
|
},
|
|
285
285
|
value: x,
|
|
286
286
|
onChange: te,
|
|
287
287
|
onFocus: re,
|
|
288
288
|
onBlur: se,
|
|
289
|
-
...
|
|
289
|
+
...Y
|
|
290
290
|
}
|
|
291
291
|
),
|
|
292
292
|
!r && /* @__PURE__ */ h(
|
|
@@ -294,16 +294,16 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
294
294
|
{
|
|
295
295
|
ref: L,
|
|
296
296
|
"aria-hidden": !0,
|
|
297
|
-
htmlFor:
|
|
297
|
+
htmlFor: R,
|
|
298
298
|
className: `${y.visibleLabel}`,
|
|
299
299
|
children: t
|
|
300
300
|
}
|
|
301
301
|
),
|
|
302
|
-
|
|
302
|
+
V && /* @__PURE__ */ h(
|
|
303
303
|
"div",
|
|
304
304
|
{
|
|
305
305
|
ref: j,
|
|
306
|
-
id: `${
|
|
306
|
+
id: `${R}-helper`,
|
|
307
307
|
className: y.helperText,
|
|
308
308
|
children: n
|
|
309
309
|
}
|
|
@@ -311,7 +311,7 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
311
311
|
f && /* @__PURE__ */ h(
|
|
312
312
|
"div",
|
|
313
313
|
{
|
|
314
|
-
ref:
|
|
314
|
+
ref: q,
|
|
315
315
|
className: y.rightElement,
|
|
316
316
|
children: f
|
|
317
317
|
}
|
|
@@ -320,12 +320,12 @@ const W = "av-text-area", de = "av-text-area-wrapper", P = "av-text-area-helper-
|
|
|
320
320
|
] });
|
|
321
321
|
}
|
|
322
322
|
);
|
|
323
|
-
|
|
323
|
+
Re.displayName = "TextArea";
|
|
324
324
|
export {
|
|
325
|
-
|
|
325
|
+
U as TEXT_AREA_CLASSNAME,
|
|
326
326
|
xe as TEXT_AREA_CONTROL_LEFT_CLASSNAME,
|
|
327
327
|
fe as TEXT_AREA_CONTROL_RIGHT_CLASSNAME,
|
|
328
|
-
|
|
328
|
+
I as TEXT_AREA_HELPER_TEXT_CLASSNAME,
|
|
329
329
|
de as TEXT_AREA_WRAPPER_CLASSNAME,
|
|
330
|
-
|
|
330
|
+
Re as TextArea
|
|
331
331
|
};
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { TEXT_AREA_CLASSNAME as T, TEXT_AREA_CONTROL_LEFT_CLASSNAME as R, TEXT_AREA_CONTROL_RIGHT_CLASSNAME as e, TEXT_AREA_HELPER_TEXT_CLASSNAME as S, TEXT_AREA_WRAPPER_CLASSNAME as i, TextArea as o } from "./components/TextArea/TextArea.js";
|
|
2
2
|
/*!
|
|
3
|
-
@versini/ui-textarea v5.0.
|
|
3
|
+
@versini/ui-textarea v5.0.3
|
|
4
4
|
© 2025 gizmette.com
|
|
5
5
|
*/
|
|
6
6
|
try {
|
|
7
7
|
window.__VERSINI_UI_TEXTAREA__ || (window.__VERSINI_UI_TEXTAREA__ = {
|
|
8
|
-
version: "5.0.
|
|
9
|
-
buildTime: "
|
|
8
|
+
version: "5.0.3",
|
|
9
|
+
buildTime: "10/17/2025 12:52 PM EDT",
|
|
10
10
|
homepage: "https://github.com/aversini/ui-components",
|
|
11
11
|
license: "MIT"
|
|
12
12
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-textarea",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -36,23 +36,19 @@
|
|
|
36
36
|
"test:watch": "vitest",
|
|
37
37
|
"test": "vitest run"
|
|
38
38
|
},
|
|
39
|
-
"peerDependencies": {
|
|
40
|
-
"react": "^19.1.0",
|
|
41
|
-
"react-dom": "^19.1.0"
|
|
42
|
-
},
|
|
43
39
|
"devDependencies": {
|
|
44
|
-
"@testing-library/jest-dom": "6.
|
|
45
|
-
"@versini/ui-types": "6.0.
|
|
40
|
+
"@testing-library/jest-dom": "6.9.1",
|
|
41
|
+
"@versini/ui-types": "6.0.2"
|
|
46
42
|
},
|
|
47
43
|
"dependencies": {
|
|
48
|
-
"@tailwindcss/typography": "0.5.
|
|
49
|
-
"@versini/ui-hooks": "5.0.
|
|
50
|
-
"@versini/ui-liveregion": "3.0.
|
|
44
|
+
"@tailwindcss/typography": "0.5.19",
|
|
45
|
+
"@versini/ui-hooks": "5.0.2",
|
|
46
|
+
"@versini/ui-liveregion": "3.0.2",
|
|
51
47
|
"clsx": "2.1.1",
|
|
52
|
-
"tailwindcss": "4.1.
|
|
48
|
+
"tailwindcss": "4.1.14"
|
|
53
49
|
},
|
|
54
50
|
"sideEffects": [
|
|
55
51
|
"**/*.css"
|
|
56
52
|
],
|
|
57
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "67e049c9b2e46e8f52509bf6198ca0cdaf5d970a"
|
|
58
54
|
}
|