@progress/kendo-react-inputs 9.1.1-develop.3 → 9.2.0-develop.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/cdn/js/kendo-react-inputs.js +1 -1
- package/index.d.mts +21 -0
- package/index.d.ts +21 -0
- package/maskedtextbox/MaskedTextBox.js +1 -1
- package/maskedtextbox/MaskedTextBox.mjs +53 -51
- package/numerictextbox/NumericTextBox.js +1 -1
- package/numerictextbox/NumericTextBox.mjs +83 -80
- package/package-metadata.mjs +1 -1
- package/package.json +8 -8
- package/textarea/TextArea.js +1 -1
- package/textarea/TextArea.mjs +49 -48
- package/textbox/Textbox.js +1 -1
- package/textbox/Textbox.mjs +37 -35
|
@@ -8,19 +8,19 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as n from "react";
|
|
10
10
|
import t from "prop-types";
|
|
11
|
-
import { useInternationalization as
|
|
12
|
-
import { createPropsContext as
|
|
13
|
-
import { caretAltUpIcon as
|
|
14
|
-
import { FloatingLabel as
|
|
15
|
-
import { packageMetadata as
|
|
11
|
+
import { useInternationalization as Xe, useLocalization as Ze } from "@progress/kendo-react-intl";
|
|
12
|
+
import { createPropsContext as et, validatePackage as tt, usePropsContext as nt, useId as rt, useCustomComponent as pe, dispatchEvent as Q, getActiveElement as be, useIsomorphicLayoutEffect as at, classNames as lt, kendoThemeMaps as ge, getTabIndex as st } from "@progress/kendo-react-common";
|
|
13
|
+
import { caretAltUpIcon as ut, caretAltDownIcon as ot } from "@progress/kendo-svg-icons";
|
|
14
|
+
import { FloatingLabel as it } from "@progress/kendo-react-labels";
|
|
15
|
+
import { packageMetadata as ct } from "../package-metadata.mjs";
|
|
16
16
|
import { numericIncreaseValue as M, messages as T, numericDecreaseValue as z } from "../messages/index.mjs";
|
|
17
|
-
import { getInitialState as ve, formatValue as q, getStateOrPropsValue as X, rangeValue as
|
|
17
|
+
import { getInitialState as ve, formatValue as q, getStateOrPropsValue as X, rangeValue as A, sanitizeNumber as ye, decreaseValue as Ve, increaseValue as ke } from "./utils/index.mjs";
|
|
18
18
|
import { Button as Ce } from "@progress/kendo-react-buttons";
|
|
19
|
-
const
|
|
19
|
+
const dt = "Please enter a valid value!", mt = et(), Ee = n.forwardRef(
|
|
20
20
|
(C, Se) => {
|
|
21
|
-
|
|
22
|
-
const
|
|
23
|
-
|
|
21
|
+
tt(ct);
|
|
22
|
+
const G = nt(
|
|
23
|
+
mt,
|
|
24
24
|
C
|
|
25
25
|
), {
|
|
26
26
|
className: xe,
|
|
@@ -35,7 +35,7 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
35
35
|
min: c,
|
|
36
36
|
max: d,
|
|
37
37
|
dir: te,
|
|
38
|
-
name:
|
|
38
|
+
name: j,
|
|
39
39
|
label: I,
|
|
40
40
|
id: Pe,
|
|
41
41
|
ariaDescribedBy: Ne,
|
|
@@ -48,44 +48,45 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
48
48
|
style: ne,
|
|
49
49
|
inputStyle: Me,
|
|
50
50
|
valid: H,
|
|
51
|
-
step: v =
|
|
52
|
-
spinners: Te =
|
|
53
|
-
disabled:
|
|
54
|
-
required: O =
|
|
55
|
-
validityStyles: re =
|
|
56
|
-
prefix: ze =
|
|
57
|
-
suffix: qe =
|
|
58
|
-
onChange: E =
|
|
59
|
-
onFocus: ae =
|
|
60
|
-
onBlur: le =
|
|
61
|
-
rangeOnEnter: se =
|
|
62
|
-
size: K =
|
|
63
|
-
rounded: w =
|
|
64
|
-
fillMode: L =
|
|
65
|
-
autoFocus:
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
51
|
+
step: v = o.step,
|
|
52
|
+
spinners: Te = o.spinners,
|
|
53
|
+
disabled: u = o.disabled,
|
|
54
|
+
required: O = o.required,
|
|
55
|
+
validityStyles: re = o.validityStyles,
|
|
56
|
+
prefix: ze = o.prefix,
|
|
57
|
+
suffix: qe = o.suffix,
|
|
58
|
+
onChange: E = o.onChange,
|
|
59
|
+
onFocus: ae = o.onFocus,
|
|
60
|
+
onBlur: le = o.onBlur,
|
|
61
|
+
rangeOnEnter: se = o.rangeOnEnter,
|
|
62
|
+
size: K = o.size,
|
|
63
|
+
rounded: w = o.rounded,
|
|
64
|
+
fillMode: L = o.fillMode,
|
|
65
|
+
autoFocus: Ae = o.autoFocus,
|
|
66
|
+
inputAttributes: Ge,
|
|
67
|
+
...ue
|
|
68
|
+
} = G, je = rt(), oe = Pe || je, s = Xe(), P = Ze(), a = n.useRef(null), N = n.useRef(), [_e, S] = n.useState(!1), i = n.useRef(ve()), D = n.useRef(!1), U = n.useRef(), x = n.useRef(he), h = q(
|
|
69
|
+
i.current.focused && !u ? i.current.currentLooseValue : X(b, x.current),
|
|
69
70
|
l,
|
|
70
71
|
s
|
|
71
72
|
);
|
|
72
73
|
U.current = h;
|
|
73
|
-
const [
|
|
74
|
+
const [He] = pe(ze), [Ke] = pe(qe);
|
|
74
75
|
n.useEffect(() => {
|
|
75
76
|
a.current && a.current.setCustomValidity && a.current.setCustomValidity(
|
|
76
|
-
B().valid ? "" : _ ||
|
|
77
|
+
B().valid ? "" : _ || dt
|
|
77
78
|
);
|
|
78
79
|
});
|
|
79
80
|
const ie = n.useCallback(() => {
|
|
80
81
|
a.current && a.current.focus();
|
|
81
|
-
}, []), R = n.useCallback(() => N.current !== void 0 ? N.current : X(b, x.current), [b]), ce = n.useCallback(() =>
|
|
82
|
+
}, []), R = n.useCallback(() => N.current !== void 0 ? N.current : X(b, x.current), [b]), ce = n.useCallback(() => j, [j]), F = n.useCallback(() => O, [O]), B = n.useCallback(() => {
|
|
82
83
|
const r = _ !== void 0, e = R(), V = H !== void 0 ? H : !i.current.valueIsOutOfRange && (!F() || e != null);
|
|
83
84
|
return {
|
|
84
85
|
customError: r,
|
|
85
86
|
valid: V,
|
|
86
87
|
valueMissing: e == null
|
|
87
88
|
};
|
|
88
|
-
}, [_, H, R, F]), $ = n.useCallback(() => re, [re]), de = n.useCallback(() =>
|
|
89
|
+
}, [_, H, R, F]), $ = n.useCallback(() => re, [re]), de = n.useCallback(() => G, [G]), y = n.useCallback(() => {
|
|
89
90
|
const r = {
|
|
90
91
|
element: a.current,
|
|
91
92
|
focus: ie
|
|
@@ -106,22 +107,22 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
106
107
|
focused: i.current.focused
|
|
107
108
|
}), [b]), p = n.useCallback(
|
|
108
109
|
(r, e) => {
|
|
109
|
-
if (
|
|
110
|
+
if (u)
|
|
110
111
|
return;
|
|
111
112
|
N.current = e.eventValue, x.current = e.eventValue;
|
|
112
|
-
const V = q(
|
|
113
|
+
const V = q(A(e.eventValue, c, d), l, s), m = A(s.parseNumber(V, l), c, d);
|
|
113
114
|
m !== e.eventValue && (e.valueIsOutOfRange = !0, e.eventValue = m, x.current = m), b !== e.eventValue && Q(E, r, y(), {
|
|
114
115
|
value: e.eventValue
|
|
115
116
|
}), N.current = void 0, i.current = e, S((J) => !J);
|
|
116
117
|
},
|
|
117
|
-
[b, E,
|
|
118
|
-
),
|
|
118
|
+
[b, E, u, S, y]
|
|
119
|
+
), we = n.useCallback(
|
|
119
120
|
(r) => {
|
|
120
121
|
const e = f();
|
|
121
122
|
D.current = !1, p(r, ye(e, l, s));
|
|
122
123
|
},
|
|
123
124
|
[l, E, s, p, f]
|
|
124
|
-
),
|
|
125
|
+
), Ue = n.useCallback(
|
|
125
126
|
(r) => {
|
|
126
127
|
let e = f();
|
|
127
128
|
const V = s.parseNumber(String(e.currentLooseValue), l);
|
|
@@ -140,7 +141,7 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
140
141
|
case 13: {
|
|
141
142
|
if (se === !1)
|
|
142
143
|
return;
|
|
143
|
-
const m = q(
|
|
144
|
+
const m = q(A(V, c, d), l, s), k = A(s.parseNumber(m, l), c, d);
|
|
144
145
|
e.eventValue = k, e.currentLooseValue = q(k, l, s), e.selectionStart = e.selectionEnd = e.currentLooseValue.length;
|
|
145
146
|
break;
|
|
146
147
|
}
|
|
@@ -155,11 +156,11 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
155
156
|
r.preventDefault(), p(r, e);
|
|
156
157
|
},
|
|
157
158
|
[l, c, d, v, E, se, p, f]
|
|
158
|
-
),
|
|
159
|
+
), $e = n.useCallback(() => {
|
|
159
160
|
D.current = !0;
|
|
160
161
|
}, []), W = n.useCallback(
|
|
161
162
|
(r) => {
|
|
162
|
-
if (g ||
|
|
163
|
+
if (g || u)
|
|
163
164
|
return;
|
|
164
165
|
const e = f();
|
|
165
166
|
ke(
|
|
@@ -172,10 +173,10 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
172
173
|
s
|
|
173
174
|
), p(r, e);
|
|
174
175
|
},
|
|
175
|
-
[l, c, d, v, E, g,
|
|
176
|
+
[l, c, d, v, E, g, u, p, f]
|
|
176
177
|
), Y = n.useCallback(
|
|
177
178
|
(r) => {
|
|
178
|
-
if (g ||
|
|
179
|
+
if (g || u)
|
|
179
180
|
return;
|
|
180
181
|
const e = f();
|
|
181
182
|
Ve(
|
|
@@ -188,38 +189,38 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
188
189
|
s
|
|
189
190
|
), p(r, e);
|
|
190
191
|
},
|
|
191
|
-
[l, c, d, v, E, g,
|
|
192
|
-
),
|
|
192
|
+
[l, c, d, v, E, g, u, p, f]
|
|
193
|
+
), We = n.useCallback(
|
|
193
194
|
(r) => {
|
|
194
195
|
const e = be(document);
|
|
195
|
-
!document || e !== a.current || !a.current || g ||
|
|
196
|
+
!document || e !== a.current || !a.current || g || u || (r.nativeEvent.deltaY < 0 && W(r), r.nativeEvent.deltaY > 0 && Y(r));
|
|
196
197
|
},
|
|
197
|
-
[W, Y,
|
|
198
|
-
),
|
|
198
|
+
[W, Y, u, g]
|
|
199
|
+
), Ye = n.useCallback(
|
|
199
200
|
(r) => {
|
|
200
201
|
i.current.currentLooseValue = U.current, i.current.focused = !0, Q(ae, r, y(), {}), S((e) => !e);
|
|
201
202
|
},
|
|
202
203
|
[ae, S, y]
|
|
203
|
-
),
|
|
204
|
+
), Je = n.useCallback(
|
|
204
205
|
(r) => {
|
|
205
206
|
i.current = ve(), Q(le, r, y(), {}), S((e) => !e);
|
|
206
207
|
},
|
|
207
208
|
[le, S, y]
|
|
208
|
-
),
|
|
209
|
+
), Qe = n.useCallback((r) => {
|
|
209
210
|
if (document && a.current) {
|
|
210
211
|
const e = be(document);
|
|
211
212
|
r.preventDefault(), e !== a.current && a.current.focus();
|
|
212
213
|
}
|
|
213
214
|
}, []);
|
|
214
|
-
|
|
215
|
+
at(() => {
|
|
215
216
|
a.current && a.current.type !== "number" && i.current.selectionStart !== void 0 && i.current.selectionEnd !== void 0 && (a.current.selectionStart = i.current.selectionStart, a.current.selectionEnd = i.current.selectionEnd, i.current.selectionStart = void 0, i.current.selectionEnd = void 0);
|
|
216
|
-
}, [
|
|
217
|
+
}, [_e]);
|
|
217
218
|
const me = !$() || B().valid, fe = /* @__PURE__ */ n.createElement(
|
|
218
219
|
"span",
|
|
219
220
|
{
|
|
220
221
|
dir: te,
|
|
221
222
|
style: I ? ne : { width: Z, ...ne },
|
|
222
|
-
className:
|
|
223
|
+
className: lt(
|
|
223
224
|
"k-input",
|
|
224
225
|
"k-numerictextbox",
|
|
225
226
|
{
|
|
@@ -228,24 +229,24 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
228
229
|
[`k-rounded-${ge.roundedMap[w] || w}`]: w,
|
|
229
230
|
"k-invalid": !me,
|
|
230
231
|
"k-required": O,
|
|
231
|
-
"k-disabled":
|
|
232
|
+
"k-disabled": u
|
|
232
233
|
},
|
|
233
234
|
xe
|
|
234
235
|
),
|
|
235
|
-
"aria-disabled":
|
|
236
|
-
...I ? {} :
|
|
236
|
+
"aria-disabled": u ? "true" : void 0,
|
|
237
|
+
...I ? {} : ue
|
|
237
238
|
},
|
|
238
|
-
/* @__PURE__ */ n.createElement(
|
|
239
|
+
/* @__PURE__ */ n.createElement(He, null),
|
|
239
240
|
/* @__PURE__ */ n.createElement(
|
|
240
241
|
"input",
|
|
241
242
|
{
|
|
242
243
|
role: "spinbutton",
|
|
243
244
|
value: h === null ? "" : h,
|
|
244
|
-
tabIndex:
|
|
245
|
+
tabIndex: st(Ie, u),
|
|
245
246
|
accessKey: Oe,
|
|
246
|
-
disabled:
|
|
247
|
+
disabled: u,
|
|
247
248
|
title: Le,
|
|
248
|
-
"aria-disabled":
|
|
249
|
+
"aria-disabled": u ? "true" : void 0,
|
|
249
250
|
"aria-valuemin": c,
|
|
250
251
|
"aria-valuemax": d,
|
|
251
252
|
"aria-label": Re,
|
|
@@ -256,31 +257,32 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
256
257
|
spellCheck: !1,
|
|
257
258
|
autoComplete: "off",
|
|
258
259
|
autoCorrect: "off",
|
|
259
|
-
autoFocus:
|
|
260
|
+
autoFocus: Ae,
|
|
260
261
|
type: Fe || "tel",
|
|
261
262
|
className: "k-input-inner",
|
|
262
|
-
id:
|
|
263
|
-
name:
|
|
263
|
+
id: oe,
|
|
264
|
+
name: j,
|
|
264
265
|
readOnly: g,
|
|
265
266
|
style: Me,
|
|
266
|
-
onChange:
|
|
267
|
-
onFocus:
|
|
268
|
-
onBlur:
|
|
269
|
-
onKeyDown:
|
|
270
|
-
onPaste:
|
|
271
|
-
onWheel:
|
|
272
|
-
ref: a
|
|
267
|
+
onChange: we,
|
|
268
|
+
onFocus: Ye,
|
|
269
|
+
onBlur: Je,
|
|
270
|
+
onKeyDown: Ue,
|
|
271
|
+
onPaste: $e,
|
|
272
|
+
onWheel: We,
|
|
273
|
+
ref: a,
|
|
274
|
+
...Ge
|
|
273
275
|
}
|
|
274
276
|
),
|
|
275
|
-
/* @__PURE__ */ n.createElement(
|
|
277
|
+
/* @__PURE__ */ n.createElement(Ke, null),
|
|
276
278
|
Be,
|
|
277
|
-
Te && /* @__PURE__ */ n.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown:
|
|
279
|
+
Te && /* @__PURE__ */ n.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: Qe }, /* @__PURE__ */ n.createElement(
|
|
278
280
|
Ce,
|
|
279
281
|
{
|
|
280
282
|
tabIndex: -1,
|
|
281
283
|
type: "button",
|
|
282
284
|
icon: "caret-alt-up",
|
|
283
|
-
svgIcon:
|
|
285
|
+
svgIcon: ut,
|
|
284
286
|
rounded: null,
|
|
285
287
|
fillMode: L,
|
|
286
288
|
className: "k-spinner-increase",
|
|
@@ -317,18 +319,18 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
|
|
|
317
319
|
))
|
|
318
320
|
);
|
|
319
321
|
return I ? /* @__PURE__ */ n.createElement(
|
|
320
|
-
|
|
322
|
+
it,
|
|
321
323
|
{
|
|
322
324
|
label: I,
|
|
323
|
-
editorId:
|
|
325
|
+
editorId: oe,
|
|
324
326
|
editorValue: h === null ? "" : h,
|
|
325
327
|
editorValid: me,
|
|
326
|
-
editorDisabled:
|
|
328
|
+
editorDisabled: u,
|
|
327
329
|
editorPlaceholder: ee,
|
|
328
330
|
children: fe,
|
|
329
331
|
style: { width: Z },
|
|
330
332
|
dir: te,
|
|
331
|
-
...
|
|
333
|
+
...ue
|
|
332
334
|
}
|
|
333
335
|
) : fe;
|
|
334
336
|
}
|
|
@@ -374,9 +376,10 @@ Ee.propTypes = {
|
|
|
374
376
|
onBlur: t.func,
|
|
375
377
|
size: t.oneOf([null, "small", "medium", "large"]),
|
|
376
378
|
rounded: t.oneOf([null, "small", "medium", "large", "full"]),
|
|
377
|
-
fillMode: t.oneOf([null, "solid", "flat", "outline"])
|
|
379
|
+
fillMode: t.oneOf([null, "solid", "flat", "outline"]),
|
|
380
|
+
inputAttributes: t.object
|
|
378
381
|
};
|
|
379
|
-
const
|
|
382
|
+
const o = {
|
|
380
383
|
prefix: (C) => null,
|
|
381
384
|
suffix: (C) => null,
|
|
382
385
|
step: 1,
|
|
@@ -399,5 +402,5 @@ const u = {
|
|
|
399
402
|
Ee.displayName = "KendoNumericTextBox";
|
|
400
403
|
export {
|
|
401
404
|
Ee as NumericTextBox,
|
|
402
|
-
|
|
405
|
+
mt as NumericTextBoxPropsContext
|
|
403
406
|
};
|
package/package-metadata.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
name: "@progress/kendo-react-inputs",
|
|
11
11
|
productName: "KendoReact",
|
|
12
12
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
-
publishDate:
|
|
13
|
+
publishDate: 1734591700,
|
|
14
14
|
version: "",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-inputs",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0-develop.1",
|
|
4
4
|
"description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"@progress/kendo-drawing": "^1.21.2",
|
|
26
26
|
"@progress/kendo-inputs-common": "^3.1.0",
|
|
27
27
|
"@progress/kendo-licensing": "^1.3.4",
|
|
28
|
-
"@progress/kendo-react-animation": "9.
|
|
29
|
-
"@progress/kendo-react-buttons": "9.
|
|
30
|
-
"@progress/kendo-react-common": "9.
|
|
31
|
-
"@progress/kendo-react-dialogs": "9.
|
|
32
|
-
"@progress/kendo-react-intl": "9.
|
|
33
|
-
"@progress/kendo-react-labels": "9.
|
|
34
|
-
"@progress/kendo-react-popup": "9.
|
|
28
|
+
"@progress/kendo-react-animation": "9.2.0-develop.1",
|
|
29
|
+
"@progress/kendo-react-buttons": "9.2.0-develop.1",
|
|
30
|
+
"@progress/kendo-react-common": "9.2.0-develop.1",
|
|
31
|
+
"@progress/kendo-react-dialogs": "9.2.0-develop.1",
|
|
32
|
+
"@progress/kendo-react-intl": "9.2.0-develop.1",
|
|
33
|
+
"@progress/kendo-react-labels": "9.2.0-develop.1",
|
|
34
|
+
"@progress/kendo-react-popup": "9.2.0-develop.1",
|
|
35
35
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
36
36
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
37
37
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
package/textarea/TextArea.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const le=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common");function ie(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(u,o,l.get?l:{enumerable:!0,get:()=>s[o]})}}return u.default=s,Object.freeze(u)}const t=ie(le),B=a.createPropsContext(),O=t.forwardRef((s,u)=>{const o=a.usePropsContext(B,s),{size:l=p.size,rounded:b=p.rounded,fillMode:z=p.fillMode,autoFocus:F=p.autoFocus,prefix:N=null,suffix:j=null,ariaDescribedBy:w,ariaLabelledBy:q,autoSize:T,className:R,defaultValue:D,disabled:r,readOnly:H,required:c,rows:$,id:L,name:_,placeholder:K,style:G,tabIndex:J,value:g,valid:P,validationMessage:M,validityStyles:S,onChange:x,onFocus:v,onBlur:y,visited:ue,touched:ce,modified:de,resizable:h,inputAttributes:Q,...U}=o,n=t.useRef(null),E=t.useCallback(()=>{n.current&&n.current.focus()},[]),[A,I]=t.useState(D),[W,X]=a.useCustomComponent(N),[Y,Z]=a.useCustomComponent(j),d=g!==void 0,f=d?g:A,m=t.useCallback(()=>({element:n,focus:E,get value(){return f},get name(){return n.current&&n.current.name}}),[E,f]);t.useImperativeHandle(u,m);const[ee,V]=t.useState("auto"),te=a.useId(),ae=a.useDir(n,o.dir),C=P!==void 0?P:c?!!f:!0;t.useEffect(()=>{n.current&&n.current.setCustomValidity&&n.current.setCustomValidity(C?"":M||"")},[C,M]),a.useIsomorphicLayoutEffect(()=>{n.current&&V(`${n.current.scrollHeight}px`)},[f]);const ne=t.useCallback(i=>{const k=i.target.value;V("auto"),!d&&!r&&I(k),x&&!r&&a.dispatchEvent(x,i,{...m(),value:k},{value:k})},[I,x,r,d]),re=t.useCallback(i=>{v&&!r&&a.dispatchEvent(v,i,m(),void 0)},[v,r]),oe=t.useCallback(i=>{y&&!r&&a.dispatchEvent(y,i,m(),void 0)},[y,r]),se={id:L||te,role:"textbox",name:_,className:a.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!T&&h!=="none"}),ref:n,disabled:r,rows:$,placeholder:K,readOnly:H,required:c,tabIndex:a.getTabIndex(J,r),autoFocus:F,style:T?{resize:"none",overflow:"hidden",height:ee}:h?{resize:h}:{},"aria-labelledby":q,"aria-describedby":w,"aria-multiline":!0,"aria-disabled":r||void 0,"aria-required":c,value:d?g:A,...Object.assign({},U,Q),onChange:ne,onFocus:re,onBlur:oe};return t.createElement("span",{className:a.classNames("k-input","k-textarea",{[`k-input-${a.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-input-${z}`]:z,[`k-rounded-${a.kendoThemeMaps.roundedMap[b]||b}`]:b,"k-invalid":!(C||S!==void 0||S===!0),"k-required":c,"k-disabled":r},R),style:G,dir:ae},o.prefix&&t.createElement(W,{...X}),t.createElement("textarea",{...se}),o.suffix&&t.createElement(Y,{...Z}))});O.propTypes={ariaDescribedBy:e.string,ariaLabelledBy:e.string,autoSize:e.bool,className:e.string,defaultValue:e.string,dir:e.string,disabled:e.bool,readOnly:e.bool,rows:e.number,id:e.string,name:e.string,placeholder:e.string,style:e.object,tabIndex:e.number,value:e.oneOfType([e.string,e.arrayOf(e.string),e.number]),onChange:e.func,onFocus:e.func,onBlur:e.func,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"]),autoFocus:e.bool};const p={size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};O.displayName="KendoTextArea";exports.TextArea=O;exports.TextAreaPropsContext=B;
|
package/textarea/TextArea.mjs
CHANGED
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as t from "react";
|
|
10
10
|
import e from "prop-types";
|
|
11
|
-
import { createPropsContext as
|
|
12
|
-
const
|
|
13
|
-
const
|
|
11
|
+
import { createPropsContext as ue, usePropsContext as de, useCustomComponent as E, useId as ce, useDir as fe, useIsomorphicLayoutEffect as me, dispatchEvent as y, classNames as F, getTabIndex as pe, kendoThemeMaps as M } from "@progress/kendo-react-common";
|
|
12
|
+
const be = ue(), A = t.forwardRef((S, w) => {
|
|
13
|
+
const s = de(be, S), {
|
|
14
14
|
size: c = d.size,
|
|
15
15
|
rounded: f = d.rounded,
|
|
16
16
|
fillMode: k = d.fillMode,
|
|
@@ -24,7 +24,7 @@ const pe = ie(), S = t.forwardRef((w, A) => {
|
|
|
24
24
|
defaultValue: L,
|
|
25
25
|
disabled: r,
|
|
26
26
|
readOnly: j,
|
|
27
|
-
required:
|
|
27
|
+
required: n,
|
|
28
28
|
rows: K,
|
|
29
29
|
id: G,
|
|
30
30
|
name: J,
|
|
@@ -34,39 +34,40 @@ const pe = ie(), S = t.forwardRef((w, A) => {
|
|
|
34
34
|
value: m,
|
|
35
35
|
valid: z,
|
|
36
36
|
validationMessage: I,
|
|
37
|
-
validityStyles:
|
|
37
|
+
validityStyles: O,
|
|
38
38
|
onChange: p,
|
|
39
39
|
onFocus: b,
|
|
40
|
-
onBlur:
|
|
40
|
+
onBlur: g,
|
|
41
41
|
// Removed to support direct use in Form Field component
|
|
42
|
-
visited:
|
|
42
|
+
visited: ge,
|
|
43
43
|
touched: xe,
|
|
44
|
-
modified:
|
|
45
|
-
resizable:
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
modified: ve,
|
|
45
|
+
resizable: x,
|
|
46
|
+
inputAttributes: X,
|
|
47
|
+
...Y
|
|
48
|
+
} = s, a = t.useRef(null), P = t.useCallback(() => {
|
|
48
49
|
a.current && a.current.focus();
|
|
49
|
-
}, []), [
|
|
50
|
+
}, []), [T, V] = t.useState(L), [Z, _] = E(H), [ee, te] = E(R), l = m !== void 0, i = l ? m : T, u = t.useCallback(() => ({
|
|
50
51
|
element: a,
|
|
51
|
-
focus:
|
|
52
|
+
focus: P,
|
|
52
53
|
get value() {
|
|
53
54
|
return i;
|
|
54
55
|
},
|
|
55
56
|
get name() {
|
|
56
57
|
return a.current && a.current.name;
|
|
57
58
|
}
|
|
58
|
-
}), [
|
|
59
|
-
t.useImperativeHandle(
|
|
60
|
-
const [
|
|
59
|
+
}), [P, i]);
|
|
60
|
+
t.useImperativeHandle(w, u);
|
|
61
|
+
const [ae, B] = t.useState("auto"), re = ce(), oe = fe(a, s.dir), v = z !== void 0 ? z : n ? !!i : !0;
|
|
61
62
|
t.useEffect(() => {
|
|
62
63
|
a.current && a.current.setCustomValidity && a.current.setCustomValidity(v ? "" : I || "");
|
|
63
|
-
}, [v, I]),
|
|
64
|
-
a.current &&
|
|
64
|
+
}, [v, I]), me(() => {
|
|
65
|
+
a.current && B(`${a.current.scrollHeight}px`);
|
|
65
66
|
}, [i]);
|
|
66
|
-
const
|
|
67
|
+
const se = t.useCallback(
|
|
67
68
|
(o) => {
|
|
68
69
|
const h = o.target.value;
|
|
69
|
-
|
|
70
|
+
B("auto"), !l && !r && V(h), p && !r && y(
|
|
70
71
|
p,
|
|
71
72
|
o,
|
|
72
73
|
{
|
|
@@ -76,67 +77,67 @@ const pe = ie(), S = t.forwardRef((w, A) => {
|
|
|
76
77
|
{ value: h }
|
|
77
78
|
);
|
|
78
79
|
},
|
|
79
|
-
[
|
|
80
|
+
[V, p, r, l]
|
|
80
81
|
), ne = t.useCallback(
|
|
81
82
|
(o) => {
|
|
82
83
|
b && !r && y(b, o, u(), void 0);
|
|
83
84
|
},
|
|
84
85
|
[b, r]
|
|
85
|
-
),
|
|
86
|
+
), le = t.useCallback(
|
|
86
87
|
(o) => {
|
|
87
|
-
|
|
88
|
+
g && !r && y(g, o, u(), void 0);
|
|
88
89
|
},
|
|
89
|
-
[
|
|
90
|
-
),
|
|
91
|
-
id: G ||
|
|
90
|
+
[g, r]
|
|
91
|
+
), ie = {
|
|
92
|
+
id: G || re,
|
|
92
93
|
role: "textbox",
|
|
93
94
|
name: J,
|
|
94
|
-
className:
|
|
95
|
+
className: F("k-input-inner", "!k-overflow-auto", { "k-resize": !C && x !== "none" }),
|
|
95
96
|
ref: a,
|
|
96
97
|
disabled: r,
|
|
97
98
|
rows: K,
|
|
98
99
|
placeholder: Q,
|
|
99
100
|
readOnly: j,
|
|
100
|
-
required:
|
|
101
|
-
tabIndex:
|
|
101
|
+
required: n,
|
|
102
|
+
tabIndex: pe(W, r),
|
|
102
103
|
autoFocus: N,
|
|
103
|
-
style: C ? { resize: "none", overflow: "hidden", height:
|
|
104
|
+
style: C ? { resize: "none", overflow: "hidden", height: ae } : x ? { resize: x } : {},
|
|
104
105
|
"aria-labelledby": q,
|
|
105
106
|
"aria-describedby": $,
|
|
106
107
|
"aria-multiline": !0,
|
|
107
108
|
"aria-disabled": r || void 0,
|
|
108
|
-
"aria-required":
|
|
109
|
-
value: l ? m :
|
|
110
|
-
...X,
|
|
111
|
-
onChange:
|
|
109
|
+
"aria-required": n,
|
|
110
|
+
value: l ? m : T,
|
|
111
|
+
...Object.assign({}, Y, X),
|
|
112
|
+
onChange: se,
|
|
112
113
|
onFocus: ne,
|
|
113
|
-
onBlur:
|
|
114
|
+
onBlur: le
|
|
114
115
|
};
|
|
115
116
|
return /* @__PURE__ */ t.createElement(
|
|
116
117
|
"span",
|
|
117
118
|
{
|
|
118
|
-
className:
|
|
119
|
+
className: F(
|
|
119
120
|
"k-input",
|
|
120
121
|
"k-textarea",
|
|
121
122
|
{
|
|
122
|
-
[`k-input-${
|
|
123
|
+
[`k-input-${M.sizeMap[c] || c}`]: c,
|
|
123
124
|
[`k-input-${k}`]: k,
|
|
124
|
-
[`k-rounded-${
|
|
125
|
-
"k-invalid": !(v ||
|
|
126
|
-
"k-required":
|
|
125
|
+
[`k-rounded-${M.roundedMap[f] || f}`]: f,
|
|
126
|
+
"k-invalid": !(v || O !== void 0 || O === !0),
|
|
127
|
+
"k-required": n,
|
|
127
128
|
"k-disabled": r
|
|
128
129
|
},
|
|
129
130
|
D
|
|
130
131
|
),
|
|
131
132
|
style: U,
|
|
132
|
-
dir:
|
|
133
|
+
dir: oe
|
|
133
134
|
},
|
|
134
|
-
|
|
135
|
-
/* @__PURE__ */ t.createElement("textarea", { ...
|
|
136
|
-
|
|
135
|
+
s.prefix && /* @__PURE__ */ t.createElement(Z, { ..._ }),
|
|
136
|
+
/* @__PURE__ */ t.createElement("textarea", { ...ie }),
|
|
137
|
+
s.suffix && /* @__PURE__ */ t.createElement(ee, { ...te })
|
|
137
138
|
);
|
|
138
139
|
});
|
|
139
|
-
|
|
140
|
+
A.propTypes = {
|
|
140
141
|
ariaDescribedBy: e.string,
|
|
141
142
|
ariaLabelledBy: e.string,
|
|
142
143
|
autoSize: e.bool,
|
|
@@ -167,8 +168,8 @@ const d = {
|
|
|
167
168
|
fillMode: "solid",
|
|
168
169
|
autoFocus: !1
|
|
169
170
|
};
|
|
170
|
-
|
|
171
|
+
A.displayName = "KendoTextArea";
|
|
171
172
|
export {
|
|
172
|
-
|
|
173
|
-
|
|
173
|
+
A as TextArea,
|
|
174
|
+
be as TextAreaPropsContext
|
|
174
175
|
};
|
package/textbox/Textbox.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),s=require("prop-types"),a=require("@progress/kendo-react-common"),z=require("../package-metadata.js");function w(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const t=w(P),d=t.forwardRef((e,r)=>{a.validatePackage(z.packageMetadata);const n=t.useRef(null),l=t.useRef(null),c=t.useRef(),f=a.useUnstyled(),i=f&&f.uTextBox,y=t.useCallback(()=>{var u;return c.current!==void 0?c.current:(u=n.current)==null?void 0:u.value},[]);t.useImperativeHandle(l,()=>({get element(){return n.current},get name(){return n.current&&n.current.name},get value(){return y()}})),t.useImperativeHandle(r,()=>l.current);const{size:m=o.size,fillMode:g=o.fillMode,rounded:v=o.rounded,autoFocus:h=o.autoFocus,inputAttributes:B,className:x,dir:F,style:O,prefix:T=o.prefix,suffix:_=o.suffix,valid:A,modified:D,touched:I,visited:H,...q}=e,[M]=a.useCustomComponent(T),[R]=a.useCustomComponent(_),[b,C]=t.useState(!1),N=u=>{C(!0)},S=u=>{C(!1)},j=t.useCallback(u=>{c.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:l.current}),c.current=void 0},[e.onChange]),{onFocus:k,onBlur:p}=a.useAsyncFocusBlur({onFocus:N,onBlur:S,onSyncFocus:e.onFocus,onSyncBlur:e.onBlur}),E=t.useMemo(()=>a.classNames(a.uTextBox.wrapper({c:i,rounded:v,fillMode:g,size:m,focused:b,required:e.required,disabled:e.disabled,invalid:e.valid===!1}),x),[x,g,b,e.disabled,e.required,e.valid,v,m,i]);return t.createElement("span",{style:O,dir:F,className:E,onFocus:k,onBlur:p},t.createElement(M,null),t.createElement("input",{ref:n,className:a.classNames(a.uTextBox.inputInner({c:i})),autoFocus:h,...Object.assign({},q,B),"aria-required":e.required,onChange:j}),t.createElement(R,null))}),o={prefix:e=>null,suffix:e=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};d.propTypes={size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large","full"]),fillMode:s.oneOf([null,"solid","flat","outline"]),autoFocus:s.bool,inputAttributes:s.object};d.displayName="KendoReactTextBoxComponent";exports.TextBox=d;
|