@versini/ui-textarea 1.1.0 → 1.2.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/dist/index.d.ts +2 -2
- package/dist/index.js +170 -158
- package/package.json +6 -4
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as _versini_ui_spacing_types from '@versini/ui-spacing-types';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
|
|
4
4
|
declare const TEXT_AREA_CLASSNAME = "av-text-area";
|
|
@@ -19,6 +19,6 @@ declare const TextArea: React.ForwardRefExoticComponent<{
|
|
|
19
19
|
raw?: boolean;
|
|
20
20
|
rightElement?: React.ReactElement;
|
|
21
21
|
textAreaClassName?: string;
|
|
22
|
-
} &
|
|
22
|
+
} & _versini_ui_spacing_types.SpacingTypes.Props & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
23
23
|
|
|
24
24
|
export { TEXT_AREA_CLASSNAME, TEXT_AREA_CONTROL_RIGHT_CLASSNAME, TEXT_AREA_HELPER_TEXT_CLASSNAME, TEXT_AREA_WRAPPER_CLASSNAME, TextArea };
|
package/dist/index.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { jsx as g, jsxs as se } from "react/jsx-runtime";
|
|
2
|
-
import le, { useRef as f, useEffect as
|
|
2
|
+
import le, { useRef as f, useEffect as I, useCallback as ie, useMemo as j, useState as k, useId as ue, useReducer as de, useLayoutEffect as N } from "react";
|
|
3
3
|
import l from "clsx";
|
|
4
4
|
/*!
|
|
5
|
-
@versini/ui-textarea v1.
|
|
5
|
+
@versini/ui-textarea v1.2.0
|
|
6
6
|
© 2024 gizmette.com
|
|
7
7
|
*/
|
|
8
8
|
try {
|
|
9
9
|
window.__VERSINI_UI_TEXTAREA__ || (window.__VERSINI_UI_TEXTAREA__ = {
|
|
10
|
-
version: "1.
|
|
11
|
-
buildTime: "12/
|
|
10
|
+
version: "1.2.0",
|
|
11
|
+
buildTime: "12/24/2024 06:47 PM EST",
|
|
12
12
|
homepage: "https://github.com/aversini/ui-components",
|
|
13
13
|
license: "MIT"
|
|
14
14
|
});
|
|
15
15
|
} catch {
|
|
16
16
|
}
|
|
17
|
-
const
|
|
17
|
+
const G = "av-text-area", fe = "av-text-area-wrapper", P = "av-text-area-helper-text", pe = "av-text-area__control--right";
|
|
18
18
|
function me() {
|
|
19
19
|
const e = f(!1);
|
|
20
|
-
return
|
|
20
|
+
return I(() => (e.current = !0, () => {
|
|
21
21
|
e.current = !1;
|
|
22
22
|
}), []), ie(() => e.current, []);
|
|
23
23
|
}
|
|
24
24
|
function ye(e) {
|
|
25
|
-
return j(() => e.every((
|
|
26
|
-
} : (
|
|
25
|
+
return j(() => e.every((n) => n == null) ? () => {
|
|
26
|
+
} : (n) => {
|
|
27
27
|
e.forEach((t) => {
|
|
28
|
-
typeof t == "function" ? t(
|
|
28
|
+
typeof t == "function" ? t(n) : t != null && (t.current = n);
|
|
29
29
|
});
|
|
30
30
|
}, e);
|
|
31
31
|
}
|
|
@@ -40,47 +40,47 @@ const he = {
|
|
|
40
40
|
right: 0
|
|
41
41
|
};
|
|
42
42
|
function xe(e) {
|
|
43
|
-
const
|
|
43
|
+
const n = me(), t = f(0), r = f(null), [o, c] = k(he), a = j(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((u) => {
|
|
44
44
|
const s = u[0];
|
|
45
45
|
s && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
|
|
46
|
-
|
|
46
|
+
r.current && n() && c(s.contentRect);
|
|
47
47
|
}));
|
|
48
|
-
}), [
|
|
49
|
-
return
|
|
48
|
+
}), [n]);
|
|
49
|
+
return I(() => (r.current && (a == null || a.observe(r.current, e)), () => {
|
|
50
50
|
a == null || a.disconnect(), t.current && cancelAnimationFrame(t.current);
|
|
51
|
-
}), [a, e]), [
|
|
51
|
+
}), [a, e]), [r, o];
|
|
52
52
|
}
|
|
53
53
|
function Ae({
|
|
54
54
|
value: e,
|
|
55
|
-
defaultValue:
|
|
55
|
+
defaultValue: n,
|
|
56
56
|
finalValue: t,
|
|
57
|
-
onChange:
|
|
57
|
+
onChange: r = () => {
|
|
58
58
|
},
|
|
59
59
|
initialControlledDelay: o = 0
|
|
60
60
|
}) {
|
|
61
|
-
const [c, a] =
|
|
62
|
-
|
|
61
|
+
const [c, a] = k(!1), [u, s] = k(
|
|
62
|
+
n !== void 0 ? n : t
|
|
63
63
|
), p = (m) => {
|
|
64
|
-
s(m),
|
|
64
|
+
s(m), r == null || r(m);
|
|
65
65
|
};
|
|
66
|
-
return
|
|
66
|
+
return I(() => {
|
|
67
67
|
(async () => e !== void 0 && !c && o > 0 && (await new Promise(
|
|
68
68
|
(m) => setTimeout(m, o)
|
|
69
69
|
), a(!0)))();
|
|
70
|
-
}, [e, o, c]), e !== void 0 ? !c && o > 0 ? ["",
|
|
70
|
+
}, [e, o, c]), e !== void 0 ? !c && o > 0 ? ["", r, !0] : [e, r, !0] : [u, p, !1];
|
|
71
71
|
}
|
|
72
72
|
function ge(e) {
|
|
73
|
-
const
|
|
73
|
+
const n = ue();
|
|
74
74
|
if (!e)
|
|
75
|
-
return
|
|
75
|
+
return n;
|
|
76
76
|
if (typeof e == "number" || typeof e == "string")
|
|
77
|
-
return `${e}${
|
|
77
|
+
return `${e}${n}`;
|
|
78
78
|
if (typeof e == "object") {
|
|
79
|
-
const { id: t, prefix:
|
|
80
|
-
return typeof t == "number" || typeof t == "string" ? `${
|
|
79
|
+
const { id: t, prefix: r = "" } = e;
|
|
80
|
+
return typeof t == "number" || typeof t == "string" ? `${r}${t}` : `${r}${n}`;
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
const
|
|
83
|
+
const z = "SET_ANNOUNCEMENT", W = "CLEAR_ANNOUNCEMENT", Te = {
|
|
84
84
|
alert: null,
|
|
85
85
|
alertdialog: null,
|
|
86
86
|
log: "polite",
|
|
@@ -88,12 +88,12 @@ const G = "SET_ANNOUNCEMENT", W = "CLEAR_ANNOUNCEMENT", Te = {
|
|
|
88
88
|
progressbar: null,
|
|
89
89
|
status: "polite",
|
|
90
90
|
timer: "assertive"
|
|
91
|
-
},
|
|
92
|
-
switch (
|
|
93
|
-
case
|
|
91
|
+
}, _e = (e, n) => {
|
|
92
|
+
switch (n == null ? void 0 : n.type) {
|
|
93
|
+
case z:
|
|
94
94
|
return {
|
|
95
95
|
...e,
|
|
96
|
-
announcement:
|
|
96
|
+
announcement: n.payload
|
|
97
97
|
};
|
|
98
98
|
case W:
|
|
99
99
|
return {
|
|
@@ -103,77 +103,77 @@ const G = "SET_ANNOUNCEMENT", W = "CLEAR_ANNOUNCEMENT", Te = {
|
|
|
103
103
|
default:
|
|
104
104
|
return e;
|
|
105
105
|
}
|
|
106
|
-
},
|
|
106
|
+
}, be = ({
|
|
107
107
|
onAnnouncementClear: e,
|
|
108
|
-
dispatch:
|
|
108
|
+
dispatch: n
|
|
109
109
|
}) => {
|
|
110
|
-
|
|
110
|
+
n({
|
|
111
111
|
type: W
|
|
112
112
|
}), typeof e == "function" && e();
|
|
113
113
|
}, X = ({
|
|
114
114
|
children: e,
|
|
115
|
-
clearAnnouncementDelay:
|
|
115
|
+
clearAnnouncementDelay: n,
|
|
116
116
|
clearAnnouncementTimeoutRef: t,
|
|
117
|
-
onAnnouncementClear:
|
|
117
|
+
onAnnouncementClear: r,
|
|
118
118
|
dispatch: o
|
|
119
119
|
}) => {
|
|
120
120
|
clearTimeout(t.current), e !== null && o({
|
|
121
|
-
type:
|
|
121
|
+
type: z,
|
|
122
122
|
payload: e
|
|
123
|
-
}),
|
|
124
|
-
() =>
|
|
125
|
-
onAnnouncementClear:
|
|
123
|
+
}), n && (t.current = setTimeout(
|
|
124
|
+
() => be({
|
|
125
|
+
onAnnouncementClear: r,
|
|
126
126
|
dispatch: o
|
|
127
127
|
}),
|
|
128
|
-
|
|
128
|
+
n
|
|
129
129
|
));
|
|
130
|
-
},
|
|
130
|
+
}, ve = ({
|
|
131
131
|
children: e,
|
|
132
|
-
announcementTimeoutRef:
|
|
132
|
+
announcementTimeoutRef: n,
|
|
133
133
|
announcementDelay: t,
|
|
134
|
-
clearAnnouncementDelay:
|
|
134
|
+
clearAnnouncementDelay: r,
|
|
135
135
|
clearAnnouncementTimeoutRef: o,
|
|
136
136
|
onAnnouncementClear: c,
|
|
137
137
|
dispatch: a
|
|
138
138
|
}) => {
|
|
139
|
-
clearTimeout(
|
|
139
|
+
clearTimeout(n.current), t ? n.current = setTimeout(X, t, {
|
|
140
140
|
children: e,
|
|
141
|
-
clearAnnouncementDelay:
|
|
141
|
+
clearAnnouncementDelay: r,
|
|
142
142
|
clearAnnouncementTimeoutRef: o,
|
|
143
143
|
onAnnouncementClear: c,
|
|
144
144
|
dispatch: a
|
|
145
145
|
}) : X({
|
|
146
146
|
children: e,
|
|
147
|
-
clearAnnouncementDelay:
|
|
147
|
+
clearAnnouncementDelay: r,
|
|
148
148
|
clearAnnouncementTimeoutRef: o,
|
|
149
149
|
onAnnouncementClear: c,
|
|
150
150
|
dispatch: a
|
|
151
151
|
});
|
|
152
152
|
};
|
|
153
|
-
function
|
|
153
|
+
function ke({
|
|
154
154
|
children: e,
|
|
155
|
-
className:
|
|
155
|
+
className: n,
|
|
156
156
|
politeness: t,
|
|
157
|
-
role:
|
|
157
|
+
role: r = null,
|
|
158
158
|
announcementDelay: o,
|
|
159
159
|
clearAnnouncementDelay: c,
|
|
160
160
|
onAnnouncementClear: a,
|
|
161
161
|
visible: u,
|
|
162
162
|
...s
|
|
163
163
|
}) {
|
|
164
|
-
const p = f(null), m = f(null), [T,
|
|
164
|
+
const p = f(null), m = f(null), [T, b] = de(_e, {
|
|
165
165
|
announcement: null
|
|
166
166
|
});
|
|
167
167
|
let x = t;
|
|
168
|
-
typeof x > "u" && (x =
|
|
169
|
-
|
|
168
|
+
typeof x > "u" && (x = r ? Te[r] : "assertive"), I(() => {
|
|
169
|
+
ve({
|
|
170
170
|
announcementTimeoutRef: p,
|
|
171
171
|
announcementDelay: o,
|
|
172
172
|
children: e,
|
|
173
173
|
clearAnnouncementDelay: c,
|
|
174
174
|
clearAnnouncementTimeoutRef: m,
|
|
175
175
|
onAnnouncementClear: a,
|
|
176
|
-
dispatch:
|
|
176
|
+
dispatch: b
|
|
177
177
|
});
|
|
178
178
|
}, [
|
|
179
179
|
e,
|
|
@@ -181,121 +181,133 @@ function _e({
|
|
|
181
181
|
c,
|
|
182
182
|
a
|
|
183
183
|
]);
|
|
184
|
-
const d = l(
|
|
184
|
+
const d = l(n, {
|
|
185
185
|
"sr-only": !u
|
|
186
186
|
});
|
|
187
187
|
return /* @__PURE__ */ g(
|
|
188
188
|
"div",
|
|
189
189
|
{
|
|
190
190
|
"aria-live": x,
|
|
191
|
-
...
|
|
191
|
+
...r && { role: r },
|
|
192
192
|
className: d,
|
|
193
193
|
...s,
|
|
194
194
|
children: T.announcement
|
|
195
195
|
}
|
|
196
196
|
);
|
|
197
197
|
}
|
|
198
|
-
const Ee = (e) => {
|
|
199
|
-
let r = "";
|
|
200
|
-
if (typeof e == "number" || typeof e == "string")
|
|
201
|
-
r = "m-" + e;
|
|
202
|
-
else {
|
|
203
|
-
const t = [];
|
|
204
|
-
(e == null ? void 0 : e.t) !== void 0 && t.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && t.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && t.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && t.push(`ml-${e.l}`), r = t.join(" ");
|
|
205
|
-
}
|
|
206
|
-
return r;
|
|
207
|
-
};
|
|
208
198
|
/*!
|
|
209
|
-
@versini/ui-private v1.
|
|
199
|
+
@versini/ui-private v1.6.0
|
|
210
200
|
© 2024 gizmette.com
|
|
211
201
|
*/
|
|
212
202
|
try {
|
|
213
203
|
window.__VERSINI_UI_PRIVATE__ || (window.__VERSINI_UI_PRIVATE__ = {
|
|
214
|
-
version: "1.
|
|
215
|
-
buildTime: "12/
|
|
204
|
+
version: "1.6.0",
|
|
205
|
+
buildTime: "12/24/2024 06:47 PM EST",
|
|
206
|
+
homepage: "https://github.com/aversini/ui-components",
|
|
207
|
+
license: "MIT"
|
|
208
|
+
});
|
|
209
|
+
} catch {
|
|
210
|
+
}
|
|
211
|
+
/*!
|
|
212
|
+
@versini/ui-spacing v1.0.0
|
|
213
|
+
© 2024 gizmette.com
|
|
214
|
+
*/
|
|
215
|
+
try {
|
|
216
|
+
window.__VERSINI_UI_SPACING__ || (window.__VERSINI_UI_SPACING__ = {
|
|
217
|
+
version: "1.0.0",
|
|
218
|
+
buildTime: "12/24/2024 06:47 PM EST",
|
|
216
219
|
homepage: "https://github.com/aversini/ui-components",
|
|
217
220
|
license: "MIT"
|
|
218
221
|
});
|
|
219
222
|
} catch {
|
|
220
223
|
}
|
|
221
|
-
const
|
|
224
|
+
const Ee = (e) => {
|
|
225
|
+
let n = "";
|
|
226
|
+
if (typeof e == "number" || typeof e == "string")
|
|
227
|
+
n = "m-" + e;
|
|
228
|
+
else {
|
|
229
|
+
const t = [];
|
|
230
|
+
(e == null ? void 0 : e.t) !== void 0 && t.push(`mt-${e.t}`), (e == null ? void 0 : e.r) !== void 0 && t.push(`mr-${e.r}`), (e == null ? void 0 : e.b) !== void 0 && t.push(`mb-${e.b}`), (e == null ? void 0 : e.l) !== void 0 && t.push(`ml-${e.l}`), n = t.join(" ");
|
|
231
|
+
}
|
|
232
|
+
return n;
|
|
233
|
+
}, Re = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hidden px-4 py-7", Ne = ({
|
|
222
234
|
mode: e
|
|
223
235
|
}) => l({
|
|
224
236
|
"bg-surface-darker text-copy-lighter caret-copy-light": e === "dark",
|
|
225
237
|
"bg-surface-lighter text-copy-dark caret-copy-dark": e === "light",
|
|
226
238
|
"bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": e === "system",
|
|
227
239
|
"bg-surface-darker text-copy-lighter caret-copy-light dark:bg-surface-lighter dark:text-copy-dark dark:caret-copy-dark": e === "alt-system"
|
|
228
|
-
}),
|
|
240
|
+
}), Ie = ({
|
|
229
241
|
focusMode: e
|
|
230
242
|
}) => l("focus:outline focus:outline-2 focus:outline-offset-2", {
|
|
231
243
|
"focus:outline-focus-dark": e === "dark",
|
|
232
244
|
"focus:outline-focus-light": e === "light",
|
|
233
245
|
"focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
|
|
234
246
|
"focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
|
|
235
|
-
}),
|
|
247
|
+
}), Ce = ({
|
|
236
248
|
noBorder: e,
|
|
237
|
-
error:
|
|
249
|
+
error: n
|
|
238
250
|
}) => l("border-2", {
|
|
239
|
-
"border-border-dark": !e && !
|
|
240
|
-
"focus:border-border-dark": !e &&
|
|
241
|
-
"border-border-error-dark": !e &&
|
|
251
|
+
"border-border-dark": !e && !n,
|
|
252
|
+
"focus:border-border-dark": !e && n,
|
|
253
|
+
"border-border-error-dark": !e && n,
|
|
242
254
|
"border-transparent": e
|
|
243
255
|
}), Se = ({
|
|
244
256
|
disabled: e,
|
|
245
|
-
raw:
|
|
257
|
+
raw: n,
|
|
246
258
|
error: t,
|
|
247
|
-
mode:
|
|
259
|
+
mode: r
|
|
248
260
|
}) => {
|
|
249
|
-
if (
|
|
261
|
+
if (n)
|
|
250
262
|
return "";
|
|
251
263
|
if (e)
|
|
252
264
|
return l("absolute px-2 cursor-not-allowed opacity-50 font-medium");
|
|
253
265
|
if (!t)
|
|
254
266
|
return l("absolute px-2 cursor-text font-medium", {
|
|
255
|
-
"text-copy-medium":
|
|
256
|
-
"text-copy-dark":
|
|
257
|
-
"text-copy-dark dark:text-copy-medium":
|
|
258
|
-
"text-copy-medium dark:text-copy-dark":
|
|
267
|
+
"text-copy-medium": r === "dark",
|
|
268
|
+
"text-copy-dark": r === "light",
|
|
269
|
+
"text-copy-dark dark:text-copy-medium": r === "system",
|
|
270
|
+
"text-copy-medium dark:text-copy-dark": r === "alt-system"
|
|
259
271
|
});
|
|
260
272
|
if (t)
|
|
261
273
|
return l("absolute px-2 cursor-text font-medium", {
|
|
262
|
-
"text-copy-medium":
|
|
263
|
-
"text-copy-error-dark":
|
|
264
|
-
"text-copy-error-dark dark:text-copy-error-light":
|
|
265
|
-
"text-copy-medium dark:text-copy-error-dark":
|
|
274
|
+
"text-copy-medium": r === "dark",
|
|
275
|
+
"text-copy-error-dark": r === "light",
|
|
276
|
+
"text-copy-error-dark dark:text-copy-error-light": r === "system",
|
|
277
|
+
"text-copy-medium dark:text-copy-error-dark": r === "alt-system"
|
|
266
278
|
});
|
|
267
|
-
},
|
|
279
|
+
}, we = ({
|
|
268
280
|
error: e,
|
|
269
|
-
raw:
|
|
281
|
+
raw: n,
|
|
270
282
|
mode: t,
|
|
271
|
-
disabled:
|
|
283
|
+
disabled: r
|
|
272
284
|
}) => {
|
|
273
|
-
if (r)
|
|
274
|
-
return "";
|
|
275
285
|
if (n)
|
|
286
|
+
return "";
|
|
287
|
+
if (r)
|
|
276
288
|
return l(
|
|
277
|
-
|
|
289
|
+
P,
|
|
278
290
|
"absolute px-2 cursor-not-allowed opacity-50 font-medium"
|
|
279
291
|
);
|
|
280
292
|
if (!e)
|
|
281
|
-
return l(
|
|
293
|
+
return l(P, "absolute px-2 font-medium", {
|
|
282
294
|
"text-copy-medium": t === "dark",
|
|
283
295
|
"text-copy-dark": t === "light",
|
|
284
296
|
"text-copy-dark dark:text-copy-medium": t === "system",
|
|
285
297
|
"text-copy-medium dark:text-copy-dark": t === "alt-system"
|
|
286
298
|
});
|
|
287
299
|
if (e)
|
|
288
|
-
return l(
|
|
300
|
+
return l(P, "absolute px-2 font-medium", {
|
|
289
301
|
"text-copy-error-light": t === "dark",
|
|
290
302
|
"text-copy-error-dark": t === "light",
|
|
291
303
|
"text-copy-error-dark dark:text-copy-error-light": t === "system",
|
|
292
304
|
"dark:text-copy-error-dark text-copy-error-light": t === "alt-system"
|
|
293
305
|
});
|
|
294
|
-
},
|
|
306
|
+
}, Oe = ({
|
|
295
307
|
className: e,
|
|
296
|
-
textAreaClassName:
|
|
308
|
+
textAreaClassName: n,
|
|
297
309
|
raw: t,
|
|
298
|
-
focusMode:
|
|
310
|
+
focusMode: r,
|
|
299
311
|
disabled: o,
|
|
300
312
|
noBorder: c,
|
|
301
313
|
error: a,
|
|
@@ -307,25 +319,25 @@ const Re = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
|
|
|
307
319
|
fe,
|
|
308
320
|
e,
|
|
309
321
|
Ee(u)
|
|
310
|
-
), m = t ? l(
|
|
311
|
-
|
|
312
|
-
|
|
322
|
+
), m = t ? l(n) : l(
|
|
323
|
+
G,
|
|
324
|
+
n,
|
|
313
325
|
Re(),
|
|
314
326
|
Ne({ mode: s }),
|
|
315
|
-
|
|
316
|
-
|
|
327
|
+
Ie({ focusMode: r }),
|
|
328
|
+
Ce({
|
|
317
329
|
noBorder: c,
|
|
318
330
|
error: a
|
|
319
331
|
}),
|
|
320
332
|
{
|
|
321
333
|
"disabled:cursor-not-allowed disabled:opacity-50": o
|
|
322
334
|
}
|
|
323
|
-
), T = t ? void 0 : "sr-only",
|
|
335
|
+
), T = t ? void 0 : "sr-only", b = Se({
|
|
324
336
|
disabled: o,
|
|
325
337
|
raw: t,
|
|
326
338
|
error: a,
|
|
327
339
|
mode: s
|
|
328
|
-
}), x =
|
|
340
|
+
}), x = we({
|
|
329
341
|
error: a,
|
|
330
342
|
raw: t,
|
|
331
343
|
mode: s,
|
|
@@ -335,32 +347,32 @@ const Re = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
|
|
|
335
347
|
wrapper: p,
|
|
336
348
|
textArea: m,
|
|
337
349
|
accessibleLabel: T,
|
|
338
|
-
visibleLabel:
|
|
350
|
+
visibleLabel: b,
|
|
339
351
|
helperText: x,
|
|
340
352
|
rightElement: d
|
|
341
353
|
};
|
|
342
|
-
},
|
|
354
|
+
}, $e = ({
|
|
343
355
|
scrollHeight: e,
|
|
344
|
-
currentHeight:
|
|
356
|
+
currentHeight: n,
|
|
345
357
|
currentLabelOffset: t = 0,
|
|
346
|
-
currentHelperTextOffset:
|
|
358
|
+
currentHelperTextOffset: r = 0
|
|
347
359
|
}) => {
|
|
348
360
|
let a, u;
|
|
349
|
-
if (e > 0 && e !==
|
|
350
|
-
const s = e -
|
|
351
|
-
a = t + -1 * Math.sign(s) * (12 * p), u =
|
|
361
|
+
if (e > 0 && e !== n) {
|
|
362
|
+
const s = e - n, p = Math.abs(s / 24);
|
|
363
|
+
a = t + -1 * Math.sign(s) * (12 * p), u = r + Math.sign(s) * (12 * p);
|
|
352
364
|
}
|
|
353
365
|
return {
|
|
354
366
|
labelOffset: a,
|
|
355
367
|
helperTextOffset: u,
|
|
356
368
|
scrollHeight: e
|
|
357
369
|
};
|
|
358
|
-
},
|
|
370
|
+
}, Le = le.forwardRef(
|
|
359
371
|
({
|
|
360
372
|
id: e,
|
|
361
|
-
name:
|
|
373
|
+
name: n,
|
|
362
374
|
label: t,
|
|
363
|
-
error:
|
|
375
|
+
error: r = !1,
|
|
364
376
|
raw: o = !1,
|
|
365
377
|
className: c,
|
|
366
378
|
textAreaClassName: a,
|
|
@@ -369,46 +381,46 @@ const Re = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
|
|
|
369
381
|
value: p,
|
|
370
382
|
defaultValue: m,
|
|
371
383
|
disabled: T = !1,
|
|
372
|
-
noBorder:
|
|
384
|
+
noBorder: b = !1,
|
|
373
385
|
labelId: x,
|
|
374
386
|
helperText: d = "",
|
|
375
|
-
helperTextOnFocus:
|
|
387
|
+
helperTextOnFocus: C = !1,
|
|
376
388
|
rightElement: S,
|
|
377
|
-
onChange:
|
|
378
|
-
onFocus:
|
|
379
|
-
onBlur:
|
|
389
|
+
onChange: M,
|
|
390
|
+
onFocus: H,
|
|
391
|
+
onBlur: D,
|
|
380
392
|
spacing: q,
|
|
381
393
|
...B
|
|
382
394
|
}, J) => {
|
|
383
|
-
const y = f(null), K = ye([J, y]), [Q, E] = xe(),
|
|
384
|
-
!!(!
|
|
385
|
-
), te = `${
|
|
395
|
+
const y = f(null), K = ye([J, y]), [Q, E] = xe(), w = f(80), F = f(-25), A = f(null), U = f(30), R = f(null), v = ge({ id: e, prefix: `${G}-` }), [Y, Z] = k(0), [ee, V] = k(
|
|
396
|
+
!!(!C && d)
|
|
397
|
+
), te = `${n} error, ${d}`, _ = Oe({
|
|
386
398
|
className: c,
|
|
387
399
|
textAreaClassName: a,
|
|
388
|
-
error:
|
|
400
|
+
error: r,
|
|
389
401
|
raw: o,
|
|
390
402
|
focusMode: s,
|
|
391
403
|
disabled: T,
|
|
392
|
-
noBorder:
|
|
404
|
+
noBorder: b,
|
|
393
405
|
spacing: q,
|
|
394
406
|
mode: u
|
|
395
|
-
}), [h,
|
|
407
|
+
}), [h, ne] = Ae({
|
|
396
408
|
value: p,
|
|
397
409
|
initialControlledDelay: 20,
|
|
398
410
|
defaultValue: m,
|
|
399
411
|
onChange: (i) => {
|
|
400
|
-
|
|
412
|
+
M && M({
|
|
401
413
|
target: {
|
|
402
414
|
value: i
|
|
403
415
|
}
|
|
404
416
|
});
|
|
405
417
|
}
|
|
406
|
-
}),
|
|
407
|
-
|
|
418
|
+
}), re = (i) => {
|
|
419
|
+
ne(i.target.value);
|
|
408
420
|
}, oe = (i) => {
|
|
409
|
-
|
|
421
|
+
C && d && V(!0), H && H(i);
|
|
410
422
|
}, ae = (i) => {
|
|
411
|
-
|
|
423
|
+
C && d && !h && V(!1), D && D(i);
|
|
412
424
|
};
|
|
413
425
|
return N(() => {
|
|
414
426
|
E && E.width && Z(E.width + 18 + 10);
|
|
@@ -423,29 +435,29 @@ const Re = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
|
|
|
423
435
|
);
|
|
424
436
|
}, 0);
|
|
425
437
|
}, [h, o]), N(() => {
|
|
426
|
-
var i,
|
|
438
|
+
var i, O;
|
|
427
439
|
if (!o && y && y.current && h !== void 0) {
|
|
428
|
-
const { labelOffset:
|
|
440
|
+
const { labelOffset: $, helperTextOffset: L, scrollHeight: ce } = $e({
|
|
429
441
|
scrollHeight: y.current.scrollHeight,
|
|
430
|
-
currentHeight:
|
|
442
|
+
currentHeight: w.current,
|
|
431
443
|
currentLabelOffset: F.current,
|
|
432
444
|
currentHelperTextOffset: U.current
|
|
433
445
|
});
|
|
434
|
-
|
|
446
|
+
$ && (F.current = $, (i = A == null ? void 0 : A.current) == null || i.style.setProperty(
|
|
435
447
|
"--av-text-area-label",
|
|
436
|
-
`${
|
|
437
|
-
)),
|
|
448
|
+
`${$}px`
|
|
449
|
+
)), L && (U.current = L, (O = R == null ? void 0 : R.current) == null || O.style.setProperty(
|
|
438
450
|
"--av-text-area-helper-text",
|
|
439
|
-
`${
|
|
440
|
-
)),
|
|
451
|
+
`${L}px`
|
|
452
|
+
)), w.current = ce || w.current;
|
|
441
453
|
}
|
|
442
|
-
}, [h, o]), /* @__PURE__ */ se("div", { className:
|
|
454
|
+
}, [h, o]), /* @__PURE__ */ se("div", { className: _.wrapper, children: [
|
|
443
455
|
/* @__PURE__ */ g(
|
|
444
456
|
"label",
|
|
445
457
|
{
|
|
446
|
-
htmlFor:
|
|
458
|
+
htmlFor: v,
|
|
447
459
|
id: x,
|
|
448
|
-
className:
|
|
460
|
+
className: _.accessibleLabel,
|
|
449
461
|
children: t
|
|
450
462
|
}
|
|
451
463
|
),
|
|
@@ -453,17 +465,17 @@ const Re = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
|
|
|
453
465
|
"textarea",
|
|
454
466
|
{
|
|
455
467
|
ref: K,
|
|
456
|
-
id:
|
|
457
|
-
name:
|
|
468
|
+
id: v,
|
|
469
|
+
name: n,
|
|
458
470
|
disabled: T,
|
|
459
471
|
placeholder: o ? void 0 : " ",
|
|
460
|
-
className:
|
|
472
|
+
className: _.textArea,
|
|
461
473
|
rows: 1,
|
|
462
|
-
...d && { "aria-describedby": `${
|
|
463
|
-
...
|
|
474
|
+
...d && { "aria-describedby": `${v}-helper` },
|
|
475
|
+
...r && { "aria-invalid": "true" },
|
|
464
476
|
...S && !o && { style: { paddingRight: Y } },
|
|
465
477
|
value: h,
|
|
466
|
-
onChange:
|
|
478
|
+
onChange: re,
|
|
467
479
|
onFocus: oe,
|
|
468
480
|
onBlur: ae,
|
|
469
481
|
...B
|
|
@@ -474,8 +486,8 @@ const Re = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
|
|
|
474
486
|
{
|
|
475
487
|
ref: A,
|
|
476
488
|
"aria-hidden": !0,
|
|
477
|
-
htmlFor:
|
|
478
|
-
className:
|
|
489
|
+
htmlFor: v,
|
|
490
|
+
className: _.visibleLabel,
|
|
479
491
|
children: t
|
|
480
492
|
}
|
|
481
493
|
),
|
|
@@ -483,8 +495,8 @@ const Re = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
|
|
|
483
495
|
"div",
|
|
484
496
|
{
|
|
485
497
|
ref: R,
|
|
486
|
-
id: `${
|
|
487
|
-
className:
|
|
498
|
+
id: `${v}-helper`,
|
|
499
|
+
className: _.helperText,
|
|
488
500
|
children: d
|
|
489
501
|
}
|
|
490
502
|
),
|
|
@@ -492,19 +504,19 @@ const Re = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hi
|
|
|
492
504
|
"div",
|
|
493
505
|
{
|
|
494
506
|
ref: Q,
|
|
495
|
-
className:
|
|
507
|
+
className: _.rightElement,
|
|
496
508
|
children: S
|
|
497
509
|
}
|
|
498
510
|
),
|
|
499
|
-
|
|
511
|
+
r && d && /* @__PURE__ */ g(ke, { politeness: "polite", clearAnnouncementDelay: 500, children: te })
|
|
500
512
|
] });
|
|
501
513
|
}
|
|
502
514
|
);
|
|
503
|
-
|
|
515
|
+
Le.displayName = "TextArea";
|
|
504
516
|
export {
|
|
505
|
-
|
|
517
|
+
G as TEXT_AREA_CLASSNAME,
|
|
506
518
|
pe as TEXT_AREA_CONTROL_RIGHT_CLASSNAME,
|
|
507
|
-
|
|
519
|
+
P as TEXT_AREA_HELPER_TEXT_CLASSNAME,
|
|
508
520
|
fe as TEXT_AREA_WRAPPER_CLASSNAME,
|
|
509
|
-
|
|
521
|
+
Le as TextArea
|
|
510
522
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-textarea",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -40,12 +40,14 @@
|
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@tailwindcss/typography": "0.5.15",
|
|
42
42
|
"@versini/ui-hooks": "4.3.0",
|
|
43
|
-
"@versini/ui-private": "1.
|
|
43
|
+
"@versini/ui-private": "1.6.0",
|
|
44
|
+
"@versini/ui-spacing": "1.0.0",
|
|
45
|
+
"@versini/ui-spacing-types": "1.0.0",
|
|
44
46
|
"clsx": "2.1.1",
|
|
45
|
-
"tailwindcss": "3.4.
|
|
47
|
+
"tailwindcss": "3.4.17"
|
|
46
48
|
},
|
|
47
49
|
"sideEffects": [
|
|
48
50
|
"**/*.css"
|
|
49
51
|
],
|
|
50
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "cb948414a675c01f3328ed6470ccf4b58f73534f"
|
|
51
53
|
}
|