@versini/ui-textarea 5.1.8 → 6.0.1
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/index.js +28 -16
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-textarea
|
|
2
|
+
@versini/ui-textarea v6.0.1
|
|
3
3
|
© 2025 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
try {
|
|
6
6
|
if (!window.__VERSINI_UI_TEXTAREA__) {
|
|
7
7
|
window.__VERSINI_UI_TEXTAREA__ = {
|
|
8
|
-
version: "
|
|
9
|
-
buildTime: "12/
|
|
8
|
+
version: "6.0.1",
|
|
9
|
+
buildTime: "12/24/2025 09:21 AM EST",
|
|
10
10
|
homepage: "https://www.npmjs.com/package/@versini/ui-textarea",
|
|
11
11
|
license: "MIT",
|
|
12
12
|
};
|
|
@@ -16,7 +16,10 @@ try {
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
19
|
-
import { useMergeRefs
|
|
19
|
+
import { useMergeRefs } from "@versini/ui-hooks/use-merge-refs";
|
|
20
|
+
import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
|
|
21
|
+
import { useUncontrolled } from "@versini/ui-hooks/use-uncontrolled";
|
|
22
|
+
import { useUniqueId } from "@versini/ui-hooks/use-unique-id";
|
|
20
23
|
import { LiveRegion } from "@versini/ui-liveregion";
|
|
21
24
|
import react, { useLayoutEffect, useRef, useState } from "react";
|
|
22
25
|
import clsx from "clsx";
|
|
@@ -30,7 +33,13 @@ const TEXT_AREA_CONTROL_LEFT_CLASSNAME = "av-text-area__control--left";
|
|
|
30
33
|
|
|
31
34
|
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
32
35
|
|
|
33
|
-
;// CONCATENATED MODULE: external "@versini/ui-hooks"
|
|
36
|
+
;// CONCATENATED MODULE: external "@versini/ui-hooks/use-merge-refs"
|
|
37
|
+
|
|
38
|
+
;// CONCATENATED MODULE: external "@versini/ui-hooks/use-resize-observer"
|
|
39
|
+
|
|
40
|
+
;// CONCATENATED MODULE: external "@versini/ui-hooks/use-uncontrolled"
|
|
41
|
+
|
|
42
|
+
;// CONCATENATED MODULE: external "@versini/ui-hooks/use-unique-id"
|
|
34
43
|
|
|
35
44
|
;// CONCATENATED MODULE: external "@versini/ui-liveregion"
|
|
36
45
|
|
|
@@ -58,7 +67,7 @@ const getTextAreaColorClasses = ({ mode })=>{
|
|
|
58
67
|
});
|
|
59
68
|
};
|
|
60
69
|
const getTextAreaFocusClasses = ({ focusMode })=>{
|
|
61
|
-
return clsx("focus:outline
|
|
70
|
+
return clsx("focus:outline-2 focus:outline-offset-2", {
|
|
62
71
|
"focus:outline-focus-dark": focusMode === "dark",
|
|
63
72
|
"focus:outline-focus-light": focusMode === "light",
|
|
64
73
|
"focus:outline-focus-light dark:focus:outline-focus-dark": focusMode === "alt-system",
|
|
@@ -79,28 +88,28 @@ const getTextAreaLabelClasses = ({ disabled, raw, error, mode, leftElement, righ
|
|
|
79
88
|
}
|
|
80
89
|
if (disabled) {
|
|
81
90
|
return clsx("transform translate-y-0 scale-100 absolute px-2 cursor-not-allowed opacity-50 font-medium", {
|
|
82
|
-
"translate-x-
|
|
91
|
+
"translate-x-2.5": rightElement === true && !leftElement || !rightElement && !leftElement
|
|
83
92
|
});
|
|
84
93
|
}
|
|
85
94
|
if (!error) {
|
|
86
95
|
return clsx("absolute px-2 cursor-text font-medium transform translate-y-0 scale-100", {
|
|
87
|
-
"translate-x-
|
|
96
|
+
"translate-x-2.5": rightElement === true && !leftElement || !rightElement && !leftElement,
|
|
88
97
|
"text-copy-medium": mode === "dark",
|
|
89
98
|
"text-copy-dark": mode === "light",
|
|
90
99
|
"text-copy-dark dark:text-copy-medium": mode === "system",
|
|
91
100
|
"text-copy-medium dark:text-copy-dark": mode === "alt-system"
|
|
92
101
|
});
|
|
93
102
|
}
|
|
94
|
-
if (error) {
|
|
103
|
+
/* v8 ignore start - error state edge case */ if (error) {
|
|
95
104
|
return clsx("absolute px-2 cursor-text font-medium transform translate-y-0 scale-100", {
|
|
96
|
-
"translate-x-
|
|
105
|
+
"translate-x-2.5": rightElement === true && !leftElement || !rightElement && !leftElement,
|
|
97
106
|
"text-copy-medium": mode === "dark",
|
|
98
107
|
"text-copy-error-dark": mode === "light",
|
|
99
108
|
"text-copy-error-dark dark:text-copy-error-light": mode === "system",
|
|
100
109
|
"text-copy-medium dark:text-copy-error-dark": mode === "alt-system"
|
|
101
110
|
});
|
|
102
111
|
}
|
|
103
|
-
};
|
|
112
|
+
/* v8 ignore stop */ };
|
|
104
113
|
const getTextAreaHelperTextClasses = ({ error, raw, mode, disabled })=>{
|
|
105
114
|
if (raw) {
|
|
106
115
|
return "";
|
|
@@ -116,7 +125,7 @@ const getTextAreaHelperTextClasses = ({ error, raw, mode, disabled })=>{
|
|
|
116
125
|
"text-copy-medium dark:text-copy-dark": mode === "alt-system"
|
|
117
126
|
});
|
|
118
127
|
}
|
|
119
|
-
if (error) {
|
|
128
|
+
/* v8 ignore start - error state edge case */ if (error) {
|
|
120
129
|
return clsx(TEXT_AREA_HELPER_TEXT_CLASSNAME, "absolute px-2 font-medium", {
|
|
121
130
|
"text-copy-error-light": mode === "dark",
|
|
122
131
|
"text-copy-error-dark": mode === "light",
|
|
@@ -124,7 +133,7 @@ const getTextAreaHelperTextClasses = ({ error, raw, mode, disabled })=>{
|
|
|
124
133
|
"dark:text-copy-error-dark text-copy-error-light": mode === "alt-system"
|
|
125
134
|
});
|
|
126
135
|
}
|
|
127
|
-
};
|
|
136
|
+
/* v8 ignore stop */ };
|
|
128
137
|
const getTextAreaClasses = ({ className, textAreaClassName, raw, focusMode, disabled, noBorder, error, mode, leftElement, rightElement })=>{
|
|
129
138
|
const wrapper = raw ? className : clsx("relative flex w-full flex-col justify-center", TEXT_AREA_WRAPPER_CLASSNAME, className);
|
|
130
139
|
const textArea = raw ? clsx(textAreaClassName) : clsx(TEXT_AREA_CLASSNAME, textAreaClassName, getTextAreaBaseClasses(), getTextAreaColorClasses({
|
|
@@ -188,6 +197,9 @@ const adjustLabelAndHelperText = ({ scrollHeight, currentHeight, currentLabelOff
|
|
|
188
197
|
|
|
189
198
|
|
|
190
199
|
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
191
203
|
const TextArea = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = false, raw = false, className, textAreaClassName, mode = "system", focusMode = "system", value, defaultValue, disabled = false, noBorder = false, labelId, helperText = "", helperTextOnFocus = false, rightElement, leftElement, onChange, onFocus, onBlur, ...extraProps }, ref)=>{
|
|
192
204
|
const textAreaRef = useRef(null);
|
|
193
205
|
const mergedTextAreaRef = useMergeRefs([
|
|
@@ -340,15 +352,15 @@ const TextArea = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = fals
|
|
|
340
352
|
currentLabelOffset: labelOffsetRef.current,
|
|
341
353
|
currentHelperTextOffset: helperTextOffsetRef.current
|
|
342
354
|
});
|
|
343
|
-
/* v8 ignore
|
|
355
|
+
/* v8 ignore start */ if (labelOffset) {
|
|
344
356
|
labelOffsetRef.current = labelOffset;
|
|
345
357
|
labelRef?.current?.style.setProperty("--av-text-area-label", `${labelOffset}px`);
|
|
346
358
|
}
|
|
347
|
-
/* v8 ignore
|
|
359
|
+
/* v8 ignore stop */ /* v8 ignore start */ if (helperTextOffset) {
|
|
348
360
|
helperTextOffsetRef.current = helperTextOffset;
|
|
349
361
|
helperTextRef?.current?.style.setProperty("--av-text-area-helper-text", `${helperTextOffset}px`);
|
|
350
362
|
}
|
|
351
|
-
textAreaHeightRef.current = scrollHeight || textAreaHeightRef.current;
|
|
363
|
+
/* v8 ignore stop */ textAreaHeightRef.current = scrollHeight || textAreaHeightRef.current;
|
|
352
364
|
}
|
|
353
365
|
}, [
|
|
354
366
|
userInput,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-textarea",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -42,13 +42,13 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@tailwindcss/typography": "0.5.19",
|
|
45
|
-
"@versini/ui-hooks": "
|
|
46
|
-
"@versini/ui-liveregion": "3.1.
|
|
45
|
+
"@versini/ui-hooks": "6.0.1",
|
|
46
|
+
"@versini/ui-liveregion": "3.1.4",
|
|
47
47
|
"clsx": "2.1.1",
|
|
48
48
|
"tailwindcss": "4.1.18"
|
|
49
49
|
},
|
|
50
50
|
"sideEffects": [
|
|
51
51
|
"**/*.css"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "7b2640a0650a4c3aa6ca078888f765cb400f9f13"
|
|
54
54
|
}
|