@progress/kendo-react-dropdowns 7.5.0-develop.2 → 7.5.0-develop.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/AutoComplete/AutoComplete.js +1 -1
- package/AutoComplete/AutoComplete.mjs +30 -29
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +57 -55
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +57 -55
- package/DropDownTree/DropDownTree.js +1 -1
- package/DropDownTree/DropDownTree.mjs +150 -146
- package/MultiSelectTree/MultiSelectTree.js +1 -1
- package/MultiSelectTree/MultiSelectTree.mjs +95 -93
- package/common/AdaptiveMode.js +1 -1
- package/common/AdaptiveMode.mjs +10 -5
- package/common/DropDownBase.js +1 -1
- package/common/DropDownBase.mjs +81 -77
- package/common/ListFilter.js +1 -1
- package/common/ListFilter.mjs +31 -26
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/index.d.mts +4 -0
- package/index.d.ts +4 -0
- package/package-metadata.mjs +1 -1
- package/package.json +9 -9
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as t from "react";
|
|
10
10
|
import n from "prop-types";
|
|
11
|
-
import { createPropsContext as Xe, validatePackage as Ye, usePropsContext as Ze, useId as et, getTabIndex as tt, useRtl as nt, canUseDOM as
|
|
11
|
+
import { createPropsContext as Xe, validatePackage as Ye, usePropsContext as Ze, useId as et, getTabIndex as tt, useRtl as nt, canUseDOM as at, Keys as c, noop as U, mapTree as ot, extendDataItem as rt, classNames as oe, IconWrap as xe, kendoThemeMaps as it } from "@progress/kendo-react-common";
|
|
12
12
|
import { Popup as lt } from "@progress/kendo-react-popup";
|
|
13
13
|
import { useLocalization as st } from "@progress/kendo-react-intl";
|
|
14
14
|
import { TreeView as we } from "@progress/kendo-react-treeview";
|
|
@@ -16,7 +16,7 @@ import { packageMetadata as ct } from "../package-metadata.mjs";
|
|
|
16
16
|
import { getItemValue as ut, areSame as Fe, isPresent as dt } from "../common/utils.mjs";
|
|
17
17
|
import { useDropdownWidth as pt } from "./useDropdownWidth.mjs";
|
|
18
18
|
import { ListNoData as ft } from "./ListNoData.mjs";
|
|
19
|
-
import { clear as De, messages as
|
|
19
|
+
import { clear as De, messages as re, nodata as j } from "../messages/index.mjs";
|
|
20
20
|
import { FloatingLabel as mt } from "@progress/kendo-react-labels";
|
|
21
21
|
import Ie from "../common/ListFilter.mjs";
|
|
22
22
|
import { Button as vt } from "@progress/kendo-react-buttons";
|
|
@@ -24,12 +24,12 @@ import { xIcon as gt, caretAltDownIcon as bt } from "@progress/kendo-svg-icons";
|
|
|
24
24
|
import { AdaptiveMode as ht } from "../common/AdaptiveMode.mjs";
|
|
25
25
|
import { ActionSheetContent as yt } from "@progress/kendo-react-layout";
|
|
26
26
|
import { MOBILE_MEDIUM_DEVISE as Et } from "../common/constants.mjs";
|
|
27
|
-
const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the list!", wt = (
|
|
28
|
-
const { validationMessage: r, valid:
|
|
27
|
+
const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the list!", wt = (E) => /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, E.children), Se = (E) => E.split("_").map((D) => parseInt(D, 10)), Ft = (E, D) => {
|
|
28
|
+
const { validationMessage: r, valid: o, required: G } = E;
|
|
29
29
|
return {
|
|
30
30
|
customError: r !== void 0,
|
|
31
|
-
valid: !!(
|
|
32
|
-
valueMissing: !
|
|
31
|
+
valid: !!(o !== void 0 ? o : !G || D),
|
|
32
|
+
valueMissing: !D
|
|
33
33
|
};
|
|
34
34
|
}, Me = {
|
|
35
35
|
selectField: "selected",
|
|
@@ -46,51 +46,51 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
46
46
|
size: "medium",
|
|
47
47
|
rounded: "medium",
|
|
48
48
|
fillMode: "solid"
|
|
49
|
-
}, Dt = Xe(), Re = t.forwardRef((
|
|
49
|
+
}, Dt = Xe(), Re = t.forwardRef((E, D) => {
|
|
50
50
|
Ye(ct);
|
|
51
|
-
const r = Ze(Dt,
|
|
51
|
+
const r = Ze(Dt, E), o = {
|
|
52
52
|
...Me,
|
|
53
53
|
...r
|
|
54
|
-
}, G = et(),
|
|
54
|
+
}, G = et(), ie = o.id || G, {
|
|
55
55
|
data: T,
|
|
56
56
|
dataItemKey: N,
|
|
57
|
-
popupSettings:
|
|
57
|
+
popupSettings: b = {},
|
|
58
58
|
style: P,
|
|
59
59
|
opened: u,
|
|
60
60
|
disabled: I,
|
|
61
61
|
onOpen: V = U,
|
|
62
62
|
onClose: f = U,
|
|
63
|
-
placeholder:
|
|
63
|
+
placeholder: J,
|
|
64
64
|
label: O,
|
|
65
65
|
name: Te,
|
|
66
66
|
selectField: z,
|
|
67
67
|
subItemsField: K,
|
|
68
68
|
validationMessage: H,
|
|
69
69
|
valid: Ne,
|
|
70
|
-
required:
|
|
70
|
+
required: Q,
|
|
71
71
|
validityStyles: Pe
|
|
72
|
-
} =
|
|
72
|
+
} = o, X = tt(o.tabIndex, I), i = t.useRef(null), m = t.useRef(null), S = t.useRef(null), Y = t.useRef(null), _ = t.useRef(null), h = t.useRef(null), $ = t.useRef(!1), [le, Ve] = t.useState(void 0), C = o.value !== void 0, v = C ? o.value : le !== void 0 ? le : o.defaultValue, L = dt(v), Z = L ? ut(v, o.textField) : "", ee = Ft({ validationMessage: H, valid: Ne, required: Q }, L), Oe = t.useCallback(() => m.current && m.current.focus(), []);
|
|
73
73
|
t.useImperativeHandle(
|
|
74
74
|
i,
|
|
75
75
|
() => ({
|
|
76
|
-
props:
|
|
76
|
+
props: o,
|
|
77
77
|
element: m.current,
|
|
78
78
|
focus: Oe
|
|
79
79
|
})
|
|
80
|
-
), t.useImperativeHandle(
|
|
81
|
-
const
|
|
82
|
-
width: pt(m, Me,
|
|
83
|
-
...
|
|
84
|
-
}, [
|
|
80
|
+
), t.useImperativeHandle(D, () => i.current);
|
|
81
|
+
const k = nt(m, o.dir), Ke = {
|
|
82
|
+
width: pt(m, Me, b, P),
|
|
83
|
+
...k !== void 0 ? { direction: k } : {}
|
|
84
|
+
}, [Le, se] = t.useState(!1), l = u !== void 0 ? u : Le, [d, te] = t.useState(!1), [ne, Be] = t.useState(), x = !!(ne && ne <= Et && o.adaptive), [ce, We] = t.useState(""), qe = t.useCallback(
|
|
85
85
|
() => {
|
|
86
86
|
_.current && _.current.setCustomValidity && _.current.setCustomValidity(
|
|
87
|
-
|
|
87
|
+
ee.valid ? "" : H === void 0 ? xt : H
|
|
88
88
|
);
|
|
89
89
|
},
|
|
90
|
-
[H,
|
|
90
|
+
[H, ee]
|
|
91
91
|
);
|
|
92
|
-
t.useEffect(
|
|
93
|
-
const e =
|
|
92
|
+
t.useEffect(qe), t.useEffect(() => {
|
|
93
|
+
const e = at && window.ResizeObserver && new window.ResizeObserver(Je.bind(void 0));
|
|
94
94
|
return document != null && document.body && e && e.observe(document.body), () => {
|
|
95
95
|
document != null && document.body && e && e.disconnect();
|
|
96
96
|
};
|
|
@@ -99,37 +99,37 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
99
99
|
(e) => {
|
|
100
100
|
if (!l) {
|
|
101
101
|
if (V) {
|
|
102
|
-
const
|
|
103
|
-
V.call(void 0,
|
|
102
|
+
const a = { ...e };
|
|
103
|
+
V.call(void 0, a);
|
|
104
104
|
}
|
|
105
105
|
u === void 0 && se(!0);
|
|
106
106
|
}
|
|
107
107
|
},
|
|
108
108
|
[l, u, V]
|
|
109
|
-
),
|
|
109
|
+
), w = t.useCallback(
|
|
110
110
|
(e) => {
|
|
111
111
|
if (l) {
|
|
112
112
|
if (f) {
|
|
113
|
-
const
|
|
114
|
-
f.call(void 0,
|
|
113
|
+
const a = { ...e };
|
|
114
|
+
f.call(void 0, a);
|
|
115
115
|
}
|
|
116
|
-
u === void 0 && (se(!1),
|
|
117
|
-
var
|
|
118
|
-
g((
|
|
116
|
+
u === void 0 && (se(!1), x && setTimeout(() => {
|
|
117
|
+
var a;
|
|
118
|
+
g((a = Y.current) == null ? void 0 : a.element);
|
|
119
119
|
}, 300));
|
|
120
120
|
}
|
|
121
121
|
},
|
|
122
|
-
[l, u, f,
|
|
122
|
+
[l, u, f, x]
|
|
123
123
|
), Ae = t.useCallback(
|
|
124
124
|
(e) => {
|
|
125
125
|
if (!e.isDefaultPrevented() && i.current) {
|
|
126
|
-
|
|
127
|
-
const
|
|
126
|
+
te(!0);
|
|
127
|
+
const a = {
|
|
128
128
|
syntheticEvent: e,
|
|
129
129
|
nativeEvent: e.nativeEvent,
|
|
130
130
|
target: i.current
|
|
131
131
|
};
|
|
132
|
-
(l ?
|
|
132
|
+
(l ? w : ue)(a);
|
|
133
133
|
}
|
|
134
134
|
},
|
|
135
135
|
[l, u, V, f]
|
|
@@ -140,9 +140,9 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
140
140
|
[]
|
|
141
141
|
), ze = t.useCallback(
|
|
142
142
|
(e) => {
|
|
143
|
-
var
|
|
144
|
-
const { keyCode:
|
|
145
|
-
if (!i.current || e.isDefaultPrevented() && ((
|
|
143
|
+
var F, Ce;
|
|
144
|
+
const { keyCode: a, altKey: s } = e, p = h.current && h.current.element;
|
|
145
|
+
if (!i.current || e.isDefaultPrevented() && ((F = S.current) == null ? void 0 : F.element) === e.target)
|
|
146
146
|
return;
|
|
147
147
|
const R = {
|
|
148
148
|
syntheticEvent: e,
|
|
@@ -150,12 +150,12 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
150
150
|
target: i.current
|
|
151
151
|
};
|
|
152
152
|
if (l)
|
|
153
|
-
if (
|
|
154
|
-
e.preventDefault(),
|
|
155
|
-
else if (p && p.querySelector(".k-focus") && (
|
|
156
|
-
if (
|
|
157
|
-
const
|
|
158
|
-
if (ke &&
|
|
153
|
+
if (a === c.esc || s && a === c.up)
|
|
154
|
+
e.preventDefault(), w(R);
|
|
155
|
+
else if (p && p.querySelector(".k-focus") && (a === c.up || a === c.down || a === c.left || a === c.right || a === c.home || a === c.end)) {
|
|
156
|
+
if (a === c.up && ((Ce = S.current) != null && Ce.element)) {
|
|
157
|
+
const q = Array.from(p.querySelectorAll(".k-treeview-item")), ke = [...q].reverse().find((A) => !!(A && A.querySelector(".k-focus")));
|
|
158
|
+
if (ke && q.indexOf(ke) === 0)
|
|
159
159
|
return M(() => {
|
|
160
160
|
var A;
|
|
161
161
|
g((A = S.current) == null ? void 0 : A.element);
|
|
@@ -163,22 +163,22 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
163
163
|
}
|
|
164
164
|
M(U);
|
|
165
165
|
} else
|
|
166
|
-
|
|
167
|
-
var
|
|
168
|
-
g(((
|
|
166
|
+
a === c.down && M(() => {
|
|
167
|
+
var q;
|
|
168
|
+
g(((q = S.current) == null ? void 0 : q.element) || p);
|
|
169
169
|
});
|
|
170
170
|
else
|
|
171
|
-
s &&
|
|
171
|
+
s && a === c.down ? (e.preventDefault(), ue(R)) : l || a === c.esc && me(e);
|
|
172
172
|
},
|
|
173
173
|
[l, u, V, f]
|
|
174
174
|
), de = t.useCallback(
|
|
175
175
|
(e) => {
|
|
176
|
-
const { keyCode:
|
|
177
|
-
s ||
|
|
178
|
-
|
|
176
|
+
const { keyCode: a, altKey: s } = e;
|
|
177
|
+
s || a !== c.up && a !== c.down || (e.preventDefault(), M(
|
|
178
|
+
a === c.up ? () => {
|
|
179
179
|
g(m.current);
|
|
180
180
|
} : () => {
|
|
181
|
-
g(
|
|
181
|
+
g(h.current && h.current.element);
|
|
182
182
|
}
|
|
183
183
|
));
|
|
184
184
|
},
|
|
@@ -191,7 +191,7 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
191
191
|
), He = t.useCallback(
|
|
192
192
|
() => {
|
|
193
193
|
var e;
|
|
194
|
-
!d && l && !u ?
|
|
194
|
+
!d && l && !u ? w({ target: i.current }) : r.filterable ? g((e = S.current) == null ? void 0 : e.element) : g(h.current && h.current.element);
|
|
195
195
|
},
|
|
196
196
|
[f, r.filterable, d, u, l]
|
|
197
197
|
), _e = t.useCallback(
|
|
@@ -201,89 +201,89 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
201
201
|
[d]
|
|
202
202
|
), $e = t.useCallback(
|
|
203
203
|
(e) => {
|
|
204
|
-
if (!d && !$.current && (
|
|
205
|
-
const
|
|
204
|
+
if (!d && !$.current && (te(!0), r.onFocus && i.current)) {
|
|
205
|
+
const a = {
|
|
206
206
|
syntheticEvent: e,
|
|
207
207
|
nativeEvent: e.nativeEvent,
|
|
208
208
|
target: i.current
|
|
209
209
|
};
|
|
210
|
-
r.onFocus.call(void 0,
|
|
210
|
+
r.onFocus.call(void 0, a);
|
|
211
211
|
}
|
|
212
212
|
},
|
|
213
213
|
[d, r.onFocus]
|
|
214
214
|
), Ue = t.useCallback(
|
|
215
215
|
(e) => {
|
|
216
216
|
if (d && !$.current && i.current) {
|
|
217
|
-
|
|
218
|
-
const
|
|
217
|
+
te(!1);
|
|
218
|
+
const a = {
|
|
219
219
|
syntheticEvent: e,
|
|
220
220
|
nativeEvent: e.nativeEvent,
|
|
221
221
|
target: i.current
|
|
222
222
|
};
|
|
223
223
|
if (r.onBlur) {
|
|
224
|
-
const s = { ...
|
|
224
|
+
const s = { ...a };
|
|
225
225
|
r.onBlur.call(void 0, s);
|
|
226
226
|
}
|
|
227
|
-
|
|
227
|
+
x || w(a);
|
|
228
228
|
}
|
|
229
229
|
},
|
|
230
230
|
[d, r.onBlur, l, u, f]
|
|
231
231
|
), je = t.useCallback(
|
|
232
232
|
() => {
|
|
233
|
-
d && M(U),
|
|
233
|
+
d && M(U), x && setTimeout(() => {
|
|
234
234
|
var e;
|
|
235
|
-
g((e =
|
|
235
|
+
g((e = Y.current) == null ? void 0 : e.element);
|
|
236
236
|
}, 300);
|
|
237
237
|
},
|
|
238
|
-
[d,
|
|
238
|
+
[d, x]
|
|
239
239
|
), pe = t.useCallback(
|
|
240
|
-
(e,
|
|
240
|
+
(e, a, s) => {
|
|
241
241
|
if (r.onChange) {
|
|
242
242
|
const p = {
|
|
243
|
-
value:
|
|
243
|
+
value: a,
|
|
244
244
|
level: s ? Se(s) : [],
|
|
245
245
|
...e
|
|
246
246
|
};
|
|
247
247
|
r.onChange.call(void 0, p);
|
|
248
248
|
}
|
|
249
|
-
|
|
249
|
+
C || Ve(a);
|
|
250
250
|
},
|
|
251
|
-
[r.onChange,
|
|
251
|
+
[r.onChange, C]
|
|
252
252
|
), fe = t.useCallback(
|
|
253
253
|
(e) => {
|
|
254
254
|
if (Fe(e.item, v, N) || !i.current)
|
|
255
255
|
return;
|
|
256
|
-
const { item:
|
|
256
|
+
const { item: a, itemHierarchicalIndex: s, nativeEvent: p, syntheticEvent: R } = e, F = {
|
|
257
257
|
syntheticEvent: R,
|
|
258
258
|
nativeEvent: p,
|
|
259
259
|
target: i.current
|
|
260
260
|
};
|
|
261
|
-
pe(
|
|
261
|
+
pe(F, a, s), w(F);
|
|
262
262
|
},
|
|
263
|
-
[
|
|
263
|
+
[C, v, r.onChange, N, l, u, f]
|
|
264
264
|
), me = t.useCallback(
|
|
265
265
|
(e) => {
|
|
266
266
|
if (!i.current)
|
|
267
267
|
return;
|
|
268
|
-
const
|
|
268
|
+
const a = {
|
|
269
269
|
syntheticEvent: e,
|
|
270
270
|
nativeEvent: e.nativeEvent,
|
|
271
271
|
target: i.current
|
|
272
272
|
};
|
|
273
|
-
pe(
|
|
273
|
+
pe(a, null), w(a), e.preventDefault();
|
|
274
274
|
},
|
|
275
|
-
[
|
|
275
|
+
[C, r.onChange, l, u, f]
|
|
276
276
|
), ve = t.useCallback(
|
|
277
277
|
(e) => {
|
|
278
278
|
if (e.syntheticEvent.stopPropagation(), r.onExpandChange && i.current) {
|
|
279
|
-
const { item:
|
|
279
|
+
const { item: a, itemHierarchicalIndex: s, nativeEvent: p, syntheticEvent: R } = e, F = {
|
|
280
280
|
level: Se(s),
|
|
281
|
-
item:
|
|
281
|
+
item: a,
|
|
282
282
|
nativeEvent: p,
|
|
283
283
|
syntheticEvent: R,
|
|
284
284
|
target: i.current
|
|
285
285
|
};
|
|
286
|
-
r.onExpandChange.call(void 0,
|
|
286
|
+
r.onExpandChange.call(void 0, F);
|
|
287
287
|
}
|
|
288
288
|
},
|
|
289
289
|
[r.onExpandChange]
|
|
@@ -296,56 +296,57 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
296
296
|
nativeEvent: e.nativeEvent,
|
|
297
297
|
target: i.current
|
|
298
298
|
};
|
|
299
|
-
r.onFilterChange.call(void 0, s), r.filter === void 0 &&
|
|
299
|
+
r.onFilterChange.call(void 0, s), r.filter === void 0 && We(e.target.value);
|
|
300
300
|
}
|
|
301
301
|
},
|
|
302
302
|
[r.onFilterChange, r.filter, r.textField]
|
|
303
303
|
), Ge = () => {
|
|
304
|
-
const e =
|
|
304
|
+
const e = o.filterable ? /* @__PURE__ */ t.createElement(
|
|
305
305
|
Ie,
|
|
306
306
|
{
|
|
307
|
-
value:
|
|
308
|
-
ref:
|
|
307
|
+
value: o.filter === void 0 ? ce : o.filter,
|
|
308
|
+
ref: Y,
|
|
309
309
|
onChange: ge,
|
|
310
310
|
onKeyDown: de,
|
|
311
|
-
size:
|
|
312
|
-
rounded:
|
|
313
|
-
fillMode:
|
|
311
|
+
size: y,
|
|
312
|
+
rounded: B,
|
|
313
|
+
fillMode: W
|
|
314
314
|
}
|
|
315
|
-
) : null,
|
|
316
|
-
adaptiveTitle:
|
|
315
|
+
) : null, a = {
|
|
316
|
+
adaptiveTitle: o.adaptiveTitle,
|
|
317
317
|
expand: l,
|
|
318
|
-
onClose: (s) =>
|
|
319
|
-
windowWidth:
|
|
318
|
+
onClose: (s) => w(s),
|
|
319
|
+
windowWidth: ne,
|
|
320
320
|
mobileFilter: e
|
|
321
321
|
};
|
|
322
|
-
return /* @__PURE__ */ t.createElement(ht, { ...
|
|
322
|
+
return /* @__PURE__ */ t.createElement(ht, { ...a }, /* @__PURE__ */ t.createElement(yt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, T.length > 0 ? /* @__PURE__ */ t.createElement(
|
|
323
323
|
we,
|
|
324
324
|
{
|
|
325
|
-
ref:
|
|
326
|
-
tabIndex:
|
|
325
|
+
ref: h,
|
|
326
|
+
tabIndex: X,
|
|
327
327
|
data: be,
|
|
328
328
|
focusIdField: N,
|
|
329
|
-
textField:
|
|
329
|
+
textField: o.textField,
|
|
330
330
|
selectField: z,
|
|
331
|
-
expandField:
|
|
331
|
+
expandField: o.expandField,
|
|
332
332
|
childrenField: K,
|
|
333
333
|
expandIcons: !0,
|
|
334
334
|
onItemClick: fe,
|
|
335
335
|
onExpandChange: ve,
|
|
336
|
-
size:
|
|
337
|
-
item:
|
|
338
|
-
dir:
|
|
336
|
+
size: y,
|
|
337
|
+
item: o.item,
|
|
338
|
+
dir: k,
|
|
339
|
+
animate: b.animate
|
|
339
340
|
}
|
|
340
|
-
) : /* @__PURE__ */ t.createElement(he, null,
|
|
341
|
+
) : /* @__PURE__ */ t.createElement(he, null, ae.toLanguageString(j, re[j]))))));
|
|
341
342
|
}, Je = t.useCallback(
|
|
342
343
|
(e) => {
|
|
343
|
-
for (let
|
|
344
|
-
|
|
344
|
+
for (let a of e)
|
|
345
|
+
Be(a.target.clientWidth);
|
|
345
346
|
},
|
|
346
347
|
[]
|
|
347
348
|
), be = t.useMemo(
|
|
348
|
-
() =>
|
|
349
|
+
() => C || !L ? T : ot(
|
|
349
350
|
T,
|
|
350
351
|
K,
|
|
351
352
|
(e) => rt(
|
|
@@ -354,25 +355,25 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
354
355
|
{ [z]: Fe(e, v, N) }
|
|
355
356
|
)
|
|
356
357
|
),
|
|
357
|
-
[T, v,
|
|
358
|
-
), he =
|
|
358
|
+
[T, v, C, L, z, K]
|
|
359
|
+
), he = o.listNoData || ft, Qe = o.valueHolder || wt, ae = st(), ye = !Pe || ee.valid, { size: y, rounded: B, fillMode: W } = o, Ee = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
|
|
359
360
|
"span",
|
|
360
361
|
{
|
|
361
|
-
className:
|
|
362
|
-
[`k-picker-${Ct[
|
|
363
|
-
[`k-rounded-${kt[
|
|
364
|
-
[`k-picker-${
|
|
362
|
+
className: oe("k-dropdowntree k-picker", o.className, {
|
|
363
|
+
[`k-picker-${Ct[y] || y}`]: y,
|
|
364
|
+
[`k-rounded-${kt[B] || B}`]: B,
|
|
365
|
+
[`k-picker-${W}`]: W,
|
|
365
366
|
"k-focus": d,
|
|
366
367
|
"k-invalid": !ye,
|
|
367
|
-
"k-loading":
|
|
368
|
-
"k-required":
|
|
369
|
-
"k-disabled":
|
|
368
|
+
"k-loading": o.loading,
|
|
369
|
+
"k-required": Q,
|
|
370
|
+
"k-disabled": o.disabled
|
|
370
371
|
}),
|
|
371
|
-
tabIndex:
|
|
372
|
-
accessKey:
|
|
373
|
-
id:
|
|
372
|
+
tabIndex: X,
|
|
373
|
+
accessKey: o.accessKey,
|
|
374
|
+
id: ie,
|
|
374
375
|
style: O ? { ...P, width: void 0 } : P,
|
|
375
|
-
dir:
|
|
376
|
+
dir: k,
|
|
376
377
|
ref: m,
|
|
377
378
|
onKeyDown: I ? void 0 : ze,
|
|
378
379
|
onMouseDown: je,
|
|
@@ -384,18 +385,18 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
384
385
|
"aria-expanded": l,
|
|
385
386
|
"aria-disabled": I,
|
|
386
387
|
"aria-label": O,
|
|
387
|
-
"aria-labelledby":
|
|
388
|
-
"aria-describedby":
|
|
389
|
-
"aria-required":
|
|
388
|
+
"aria-labelledby": o.ariaLabelledBy,
|
|
389
|
+
"aria-describedby": o.ariaDescribedBy,
|
|
390
|
+
"aria-required": Q
|
|
390
391
|
},
|
|
391
|
-
/* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, /* @__PURE__ */ t.createElement(Qe, { item: v },
|
|
392
|
-
|
|
393
|
-
|
|
392
|
+
/* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, (Z || J) && /* @__PURE__ */ t.createElement(Qe, { item: v }, Z || J)),
|
|
393
|
+
o.loading && /* @__PURE__ */ t.createElement(xe, { className: "k-input-loading-icon", name: "loading" }),
|
|
394
|
+
L && !I && /* @__PURE__ */ t.createElement(
|
|
394
395
|
"span",
|
|
395
396
|
{
|
|
396
397
|
onClick: me,
|
|
397
398
|
className: "k-clear-value",
|
|
398
|
-
title:
|
|
399
|
+
title: ae.toLanguageString(De, re[De]),
|
|
399
400
|
role: "button",
|
|
400
401
|
tabIndex: -1,
|
|
401
402
|
onMouseDown: (e) => e.preventDefault()
|
|
@@ -409,8 +410,8 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
409
410
|
type: "button",
|
|
410
411
|
"aria-label": "select",
|
|
411
412
|
className: "k-input-button",
|
|
412
|
-
size:
|
|
413
|
-
fillMode:
|
|
413
|
+
size: y,
|
|
414
|
+
fillMode: W,
|
|
414
415
|
themeColor: "base",
|
|
415
416
|
rounded: null,
|
|
416
417
|
icon: "caret-alt-down",
|
|
@@ -427,66 +428,69 @@ const { sizeMap: Ct, roundedMap: kt } = it, xt = "Please select a value from the
|
|
|
427
428
|
title: O,
|
|
428
429
|
style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
|
|
429
430
|
},
|
|
430
|
-
/* @__PURE__ */ t.createElement("option", { value:
|
|
431
|
+
/* @__PURE__ */ t.createElement("option", { value: o.valueMap ? o.valueMap.call(void 0, v) : v })
|
|
431
432
|
),
|
|
432
|
-
!
|
|
433
|
+
!x && /* @__PURE__ */ t.createElement(
|
|
433
434
|
lt,
|
|
434
435
|
{
|
|
435
|
-
...
|
|
436
|
-
className:
|
|
437
|
-
popupClass:
|
|
436
|
+
...b,
|
|
437
|
+
className: oe(b.className, { "k-rtl": k === "rtl" }),
|
|
438
|
+
popupClass: oe(b.popupClass, "k-dropdowntree-popup k-list-container"),
|
|
438
439
|
style: Ke,
|
|
439
|
-
anchor:
|
|
440
|
+
anchor: b.anchor || m.current,
|
|
440
441
|
show: l,
|
|
441
442
|
onOpen: He,
|
|
442
443
|
onClose: _e
|
|
443
444
|
},
|
|
444
|
-
|
|
445
|
+
o.filterable && /* @__PURE__ */ t.createElement(
|
|
445
446
|
Ie,
|
|
446
447
|
{
|
|
447
|
-
value:
|
|
448
|
+
value: o.filter === void 0 ? ce : o.filter,
|
|
448
449
|
ref: S,
|
|
449
450
|
onChange: ge,
|
|
450
451
|
onKeyDown: de,
|
|
451
|
-
size:
|
|
452
|
-
rounded:
|
|
453
|
-
fillMode:
|
|
452
|
+
size: y,
|
|
453
|
+
rounded: B,
|
|
454
|
+
fillMode: W,
|
|
455
|
+
renderListFilterWrapper: !0,
|
|
456
|
+
renderPrefixSeparator: !0
|
|
454
457
|
}
|
|
455
458
|
),
|
|
456
459
|
T.length > 0 ? /* @__PURE__ */ t.createElement(
|
|
457
460
|
we,
|
|
458
461
|
{
|
|
459
|
-
style: { height:
|
|
460
|
-
ref:
|
|
461
|
-
tabIndex:
|
|
462
|
+
style: { height: b.height },
|
|
463
|
+
ref: h,
|
|
464
|
+
tabIndex: X,
|
|
462
465
|
data: be,
|
|
463
466
|
focusIdField: N,
|
|
464
|
-
textField:
|
|
467
|
+
textField: o.textField,
|
|
465
468
|
selectField: z,
|
|
466
|
-
expandField:
|
|
469
|
+
expandField: o.expandField,
|
|
467
470
|
childrenField: K,
|
|
468
471
|
expandIcons: !0,
|
|
469
472
|
onItemClick: fe,
|
|
470
473
|
onExpandChange: ve,
|
|
471
|
-
size:
|
|
472
|
-
item:
|
|
473
|
-
dir:
|
|
474
|
+
size: y,
|
|
475
|
+
item: o.item,
|
|
476
|
+
dir: k,
|
|
477
|
+
animate: b.animate
|
|
474
478
|
}
|
|
475
|
-
) : /* @__PURE__ */ t.createElement(he, null,
|
|
479
|
+
) : /* @__PURE__ */ t.createElement(he, null, ae.toLanguageString(j, re[j]))
|
|
476
480
|
)
|
|
477
|
-
),
|
|
481
|
+
), x && Ge());
|
|
478
482
|
return O ? /* @__PURE__ */ t.createElement(
|
|
479
483
|
mt,
|
|
480
484
|
{
|
|
481
485
|
label: O,
|
|
482
|
-
editorValue:
|
|
483
|
-
editorPlaceholder:
|
|
486
|
+
editorValue: Z,
|
|
487
|
+
editorPlaceholder: J,
|
|
484
488
|
editorValid: ye,
|
|
485
489
|
editorDisabled: I,
|
|
486
|
-
editorId:
|
|
490
|
+
editorId: ie,
|
|
487
491
|
style: { width: P ? P.width : void 0 },
|
|
488
492
|
children: Ee,
|
|
489
|
-
dir:
|
|
493
|
+
dir: k
|
|
490
494
|
}
|
|
491
495
|
) : Ee;
|
|
492
496
|
}), It = {
|
|
@@ -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 Ze=require("react"),a=require("prop-types"),i=require("@progress/kendo-react-common"),et=require("@progress/kendo-react-popup"),tt=require("@progress/kendo-react-intl"),we=require("@progress/kendo-react-treeview"),nt=require("../package-metadata.js"),ee=require("../common/utils.js"),at=require("../DropDownTree/useDropdownWidth.js"),st=require("../DropDownTree/ListNoData.js"),m=require("../messages/index.js"),it=require("@progress/kendo-react-labels"),ot=require("../MultiSelect/TagList.js"),rt=require("../common/ClearButton.js"),Ie=require("../common/ListFilter.js"),lt=require("../common/AdaptiveMode.js"),ct=require("@progress/kendo-react-layout"),ut=require("../common/constants.js");function dt(h){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const w=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(b,t,w.get?w:{enumerable:!0,get:()=>h[t]})}}return b.default=h,Object.freeze(b)}const n=dt(Ze),pt="Please select a value from the list!",{sizeMap:Te,roundedMap:ft}=i.kendoThemeMaps,gt=h=>h.split("_").map(b=>parseInt(b,10)),vt=(h,b)=>{const{validationMessage:t,valid:w,required:I}=h;return{customError:t!==void 0,valid:!!(w!==void 0?w:!I||b),valueMissing:!b}},q={checkField:"checkField",checkIndeterminateField:"checkIndeterminateField",subItemsField:"items",popupSettings:{animate:!0,width:"200px",height:"200px"},size:"medium",rounded:"medium",fillMode:"solid",required:!1,validityStyles:!0},Ke=i.createPropsContext(),te=n.forwardRef((h,b)=>{const t=i.usePropsContext(Ke,h);i.validatePackage(nt.packageMetadata);const w=i.useId(),I=t.id||w,{data:B=[],dataItemKey:T,popupSettings:N={},style:L={},opened:K,disabled:F,onOpen:ne=i.noop,onClose:W=i.noop,placeholder:ue,label:V,name:Me,checkField:de=q.checkField,checkIndeterminateField:pe=q.checkIndeterminateField,subItemsField:fe=q.subItemsField,validationMessage:z,valid:Re,tags:ge,value:g,required:ve=q.required,validityStyles:De=q.validityStyles}=t,_=i.getTabIndex(t.tabIndex,F),r=n.useRef(null),E=n.useRef(null),M=n.useRef(null),ae=n.useRef(null),j=n.useRef(null),x=n.useRef(null),$=n.useRef(!1),H=n.useRef([]),G=n.useRef(null),[O,qe]=n.useState(),[Ne,me]=n.useState(!1),[d,se]=n.useState(!1),[ie,Oe]=n.useState(),[Pe,Le]=n.useState([]),[he,Ve]=n.useState(""),P=!!(ie&&ie<=ut.MOBILE_MEDIUM_DEVISE&&t.adaptive),l=K!==void 0?K:Ne,oe=!!(Array.isArray(g)&&g.length),re=vt({validationMessage:z,valid:Re,required:ve},oe),R=i.useRtl(E,t.dir),Ae={width:at.useDropdownWidth(E,q,N,L),...R!==void 0?{direction:R}:{}},Be=n.useCallback(()=>E.current&&E.current.focus(),[]);H.current=ge===void 0?(g||[]).map(e=>({text:ee.getItemValue(e,t.textField),data:[e]})):[...ge],n.useImperativeHandle(r,()=>({props:t,element:E.current,focus:Be})),n.useImperativeHandle(b,()=>r.current);const We=n.useCallback(()=>{j.current&&j.current.setCustomValidity&&j.current.setCustomValidity(re.valid?"":z===void 0?pt:z)},[z,re]);n.useEffect(We),n.useEffect(()=>{const e=i.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Xe.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{e&&e.disconnect()}},[]),n.useEffect(()=>{G.current&&l&&G.current.setPosition(G.current._popup)},[g,l]);const S=n.useCallback((e,s,o)=>{if(t.onChange){const C={items:s,operation:o,...e};t.onChange.call(void 0,C)}},[t.onChange]),U=n.useCallback(e=>{if(ee.areSame(e.item,g,T)||!r.current)return;const{item:s,nativeEvent:o,syntheticEvent:C}=e,D={syntheticEvent:C,nativeEvent:o,target:r.current};S(D,[s],"toggle")},[g,T,S]),J=n.useCallback(e=>{if(!l){if(ne){const s={...e};ne.call(void 0,s)}K===void 0&&(me(!0),Le(g||[]),P&&setTimeout(()=>{var s;u((s=ae.current)==null?void 0:s.element)},300))}},[l,K,ne,P,ae]),v=n.useCallback(e=>{if(l){if(W){const s={...e};W.call(void 0,s)}K===void 0&&me(!1)}},[l,K,W]),k=n.useCallback(e=>{$.current=!0,e(),window.setTimeout(()=>$.current=!1,0)},[]),u=n.useCallback(e=>{e&&k(()=>e.focus())},[k]),ze=n.useCallback(()=>{var e;!d&&l?v({target:r.current}):t.filterable?u((e=M.current)==null?void 0:e.element):u(x.current&&x.current.element)},[d,l,u,v,t.filterable]),_e=n.useCallback(()=>{d&&u(E.current)},[d,u]),je=n.useCallback(e=>{if(!d&&!$.current&&(se(!0),t.onFocus&&r.current)){const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};t.onFocus.call(void 0,s)}},[d,t.onFocus]),$e=n.useCallback(e=>{if(d&&!$.current&&r.current){se(!1);const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};if(t.onBlur){const o={...s};t.onBlur.call(void 0,o)}P||v(s)}},[d,t.onBlur,l,K,W]),He=n.useCallback(()=>{d&&k(i.noop)},[d,k]),Ge=n.useCallback(e=>{if(!e.isDefaultPrevented()&&r.current){se(!0);const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};l||J(s)}},[l,J]),Ue=n.useCallback(e=>{var Z,Se;const{keyCode:s,altKey:o}=e,C=x.current&&x.current.element;if(!r.current||e.isDefaultPrevented()&&((Z=M.current)==null?void 0:Z.element)===e.target)return;const D={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};if(g&&g.length>0&&(s===i.Keys.left||s===i.Keys.right||s===i.Keys.home||s===i.Keys.end||s===i.Keys.delete)){const c=H.current;let p=O?c.findIndex(Ye=>ee.matchTags(Ye,O,T)):-1,f;const ce=p!==-1;s===i.Keys.left?(ce?p=Math.max(0,p-1):p=c.length-1,f=c[p]):s===i.Keys.right?p===c.length-1?f=void 0:ce&&(p=Math.min(c.length-1,p+1),f=c[p]):s===i.Keys.home?f=c[0]:s===i.Keys.end?f=c[c.length-1]:s===i.Keys.delete&&ce&&S(D,c[p].data,"delete"),f!==O&&qe(f)}if(l)if(s===i.Keys.esc||o&&s===i.Keys.up)e.preventDefault(),v(D);else if(C&&C.querySelector(".k-focus")&&(s===i.Keys.up||s===i.Keys.down||s===i.Keys.left||s===i.Keys.right||s===i.Keys.home||s===i.Keys.end)){if(s===i.Keys.up&&((Se=M.current)!=null&&Se.element)){const c=Array.from(C.querySelectorAll(".k-treeview-item")),p=[...c].reverse().find(f=>!!(f&&f.querySelector(".k-focus")));if(p&&c.indexOf(p)===0)return k(()=>{var f;u((f=M.current)==null?void 0:f.element)})}k(i.noop)}else s===i.Keys.down&&k(()=>{var c;u(((c=M.current)==null?void 0:c.element)||C)});else o&&s===i.Keys.down&&(e.preventDefault(),J(D))},[l,v,u,k,J,O,T,g,S]),ye=n.useCallback(e=>{const{keyCode:s,altKey:o}=e;o||s!==i.Keys.up&&s!==i.Keys.down||(e.preventDefault(),k(s===i.Keys.up?()=>{u(E.current)}:()=>{u(x.current&&x.current.element)}))},[u,k]),le=n.useCallback(e=>{if(!r.current)return;const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};S(s,[],"clear"),v(s),e.preventDefault()},[S,v]),Je=n.useCallback((e,s)=>{var o;v({target:r.current}),d||u((o=M.current)==null?void 0:o.element),S({syntheticEvent:s,nativeEvent:s.nativeEvent,target:r.current},e,"delete")},[S,v,u,d]),be=n.useCallback(e=>{if(t.onExpandChange&&r.current){const{item:s,itemHierarchicalIndex:o,nativeEvent:C,syntheticEvent:D}=e,Z={level:gt(o),item:s,nativeEvent:C,syntheticEvent:D,target:r.current};t.onExpandChange.call(void 0,Z)}},[t.onExpandChange]),ke=n.useCallback(e=>{if(t.onFilterChange&&r.current){const o={filter:{field:t.textField,operator:"contains",value:e.target.value},syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:r.current};t.onFilterChange.call(void 0,o),t.filter===void 0&&Ve(e.target.value)}},[t.onFilterChange,t.filter,t.textField]),Ce=n.useCallback(e=>{if(!r.current)return;const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};t.onCancel&&t.onCancel.call(void 0,s),v(s),e.preventDefault()},[t.onCancel,v]),Qe=()=>{const e=t.filterable?n.createElement(Ie,{value:t.filter===void 0?he:t.filter,ref:ae,onChange:ke,onKeyDown:ye,size:y,rounded:A,fillMode:X}):null,s={adaptiveTitle:t.adaptiveTitle,expand:l,onClose:o=>t.onCancel?Ce(o):le(o),windowWidth:ie,mobileFilter:e,footer:{cancelText:Q.toLanguageString(m.adaptiveModeFooterCancel,m.messages[m.adaptiveModeFooterCancel]),onCancel:o=>t.onCancel?Ce(o):le(o),applyText:Q.toLanguageString(m.adaptiveModeFooterApply,m.messages[m.adaptiveModeFooterApply]),onApply:o=>v(o)}};return n.createElement(lt.AdaptiveMode,{...s},n.createElement(ct.ActionSheetContent,{className:"!k-overflow-hidden"},n.createElement("div",{className:"k-list-container"},n.createElement("div",{className:"k-list k-list-lg"},B.length>0?n.createElement(we.TreeView,{ref:x,tabIndex:_,data:B,focusIdField:T,textField:t.textField,checkField:de,checkIndeterminateField:pe,expandField:t.expandField,childrenField:fe,expandIcons:!0,onItemClick:U,onCheckChange:U,onExpandChange:be,checkboxes:!0,size:y,item:t.item,dir:R}):n.createElement(Ee,null,Q.toLanguageString(m.nodata,m.messages[m.nodata]))))))},Xe=n.useCallback(e=>{for(let s of e)Oe(s.target.clientWidth)},[]),Ee=t.listNoData||st.ListNoData,Q=tt.useLocalization(),Fe=!De||re.valid,{size:y,rounded:A,fillMode:X}=t,Y=P&&l?Pe:H.current,xe=n.createElement(n.Fragment,null,n.createElement("span",{className:i.classNames("k-multiselecttree k-input",t.className,{[`k-input-${Te[y]||y}`]:y,[`k-rounded-${ft[A]||A}`]:A,[`k-input-${X}`]:X,"k-focus":d&&!F,"k-invalid":!Fe,"k-disabled":F,"k-loading":t.loading,"k-required":ve}),tabIndex:_,accessKey:t.accessKey,id:I,style:V?{...L,width:void 0}:L,dir:R,ref:E,onKeyDown:F?void 0:Ue,onMouseDown:He,onFocus:je,onBlur:$e,role:"combobox","aria-haspopup":"tree","aria-expanded":l,"aria-disabled":F,"aria-label":V,"aria-labelledby":t.ariaLabelledBy,"aria-describedby":t.ariaDescribedBy?t.ariaDescribedBy:"tagslist-"+I,"aria-required":t.required,onClick:F?void 0:Ge},n.createElement("div",{id:"tagslist-"+I,className:i.classNames("k-input-values k-chip-list k-selection-multiple",{[`k-chip-list-${Te[y]||y}`]:y})},Y.length>0&&n.createElement(ot,{tag:t.tag,onTagDelete:Je,data:Y,guid:I,focused:O?H.current.find(e=>ee.matchTags(e,O,T)):void 0,size:y})),n.createElement("span",{className:"k-input-inner"},Y.length===0&&n.createElement("span",{className:"k-input-value-text"},ue)),t.loading&&n.createElement(i.IconWrap,{className:"k-input-loading-icon",name:"loading"}),oe&&!F&&Y.length>0&&n.createElement(rt,{onClick:le}),n.createElement("select",{name:Me,ref:j,tabIndex:-1,"aria-hidden":!0,title:V,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},n.createElement("option",{value:t.valueMap?t.valueMap.call(void 0,g):g})),!P&&n.createElement(et.Popup,{...N,popupClass:i.classNames(N.popupClass,"k-multiselecttree-popup"),className:i.classNames(N.className,{"k-rtl":R==="rtl"}),style:Ae,anchor:N.anchor||E.current,show:l,onOpen:ze,onClose:_e,ref:G},t.filterable&&n.createElement(Ie,{value:t.filter===void 0?he:t.filter,ref:M,onChange:ke,onKeyDown:ye,tabIndex:_,size:y,rounded:A,fillMode:X}),B.length>0?n.createElement(we.TreeView,{style:{height:N.height},ref:x,tabIndex:_,data:B,focusIdField:T,textField:t.textField,checkField:de,checkIndeterminateField:pe,expandField:t.expandField,childrenField:fe,expandIcons:!0,onItemClick:U,onCheckChange:U,onExpandChange:be,checkboxes:!0,size:y,item:t.item,dir:R}):n.createElement(Ee,null,Q.toLanguageString(m.nodata,m.messages[m.nodata])))),P&&Qe());return V?n.createElement(it.FloatingLabel,{label:V,editorValue:oe,editorPlaceholder:ue,editorValid:Fe,editorDisabled:F,editorId:I,style:{width:L?L.width:void 0},children:xe,dir:R}):xe}),mt={opened:a.bool,disabled:a.bool,dir:a.string,tabIndex:a.number,accessKey:a.string,data:a.array,value:a.any,valueMap:a.func,placeholder:a.string,dataItemKey:a.string.isRequired,textField:a.string.isRequired,checkField:a.string,checkIndeterminateField:a.string,expandField:a.string,subItemsField:a.string,className:a.string,style:a.object,label:a.string,validationMessage:a.string,validityStyles:a.bool,valid:a.bool,required:a.bool,name:a.string,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,filterable:a.bool,filter:a.string,loading:a.bool,tags:a.arrayOf(a.shape({text:a.string,data:a.arrayOf(a.any)})),popupSettings:a.shape({animate:a.oneOfType([a.bool,a.shape({openDuration:a.number,closeDuration:a.number})]),popupClass:a.string,className:a.string,appendTo:a.any,width:a.oneOfType([a.string,a.number]),height:a.oneOfType([a.string,a.number])}),onOpen:a.func,onClose:a.func,onFocus:a.func,onBlur:a.func,onChange:a.func,onFilterChange:a.func,onExpandChange:a.func,onCancel:a.func,item:a.func,listNoData:a.func,adaptiveTitle:a.string,adaptive:a.bool};te.displayName="KendoReactMultiSelectTree";te.defaultProps=q;te.propTypes=mt;exports.MultiSelectTree=te;exports.MultiSelectTreePropsContext=Ke;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ze=require("react"),a=require("prop-types"),s=require("@progress/kendo-react-common"),et=require("@progress/kendo-react-popup"),tt=require("@progress/kendo-react-intl"),we=require("@progress/kendo-react-treeview"),nt=require("../package-metadata.js"),ee=require("../common/utils.js"),at=require("../DropDownTree/useDropdownWidth.js"),rt=require("../DropDownTree/ListNoData.js"),m=require("../messages/index.js"),st=require("@progress/kendo-react-labels"),it=require("../MultiSelect/TagList.js"),ot=require("../common/ClearButton.js"),Ie=require("../common/ListFilter.js"),lt=require("../common/AdaptiveMode.js"),ct=require("@progress/kendo-react-layout"),ut=require("../common/constants.js");function dt(h){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const w=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(b,t,w.get?w:{enumerable:!0,get:()=>h[t]})}}return b.default=h,Object.freeze(b)}const n=dt(Ze),pt="Please select a value from the list!",{sizeMap:Te,roundedMap:ft}=s.kendoThemeMaps,gt=h=>h.split("_").map(b=>parseInt(b,10)),vt=(h,b)=>{const{validationMessage:t,valid:w,required:I}=h;return{customError:t!==void 0,valid:!!(w!==void 0?w:!I||b),valueMissing:!b}},q={checkField:"checkField",checkIndeterminateField:"checkIndeterminateField",subItemsField:"items",popupSettings:{animate:!0,width:"200px",height:"200px"},size:"medium",rounded:"medium",fillMode:"solid",required:!1,validityStyles:!0},Ke=s.createPropsContext(),te=n.forwardRef((h,b)=>{const t=s.usePropsContext(Ke,h);s.validatePackage(nt.packageMetadata);const w=s.useId(),I=t.id||w,{data:B=[],dataItemKey:T,popupSettings:N={},style:L={},opened:K,disabled:F,onOpen:ne=s.noop,onClose:W=s.noop,placeholder:ue,label:V,name:Me,checkField:de=q.checkField,checkIndeterminateField:pe=q.checkIndeterminateField,subItemsField:fe=q.subItemsField,validationMessage:z,valid:Re,tags:ge,value:g,required:ve=q.required,validityStyles:De=q.validityStyles}=t,_=s.getTabIndex(t.tabIndex,F),o=n.useRef(null),E=n.useRef(null),M=n.useRef(null),ae=n.useRef(null),j=n.useRef(null),x=n.useRef(null),$=n.useRef(!1),H=n.useRef([]),G=n.useRef(null),[P,qe]=n.useState(),[Ne,me]=n.useState(!1),[d,re]=n.useState(!1),[se,Pe]=n.useState(),[Oe,Le]=n.useState([]),[he,Ve]=n.useState(""),O=!!(se&&se<=ut.MOBILE_MEDIUM_DEVISE&&t.adaptive),l=K!==void 0?K:Ne,ie=!!(Array.isArray(g)&&g.length),oe=vt({validationMessage:z,valid:Re,required:ve},ie),R=s.useRtl(E,t.dir),Ae={width:at.useDropdownWidth(E,q,N,L),...R!==void 0?{direction:R}:{}},Be=n.useCallback(()=>E.current&&E.current.focus(),[]);H.current=ge===void 0?(g||[]).map(e=>({text:ee.getItemValue(e,t.textField),data:[e]})):[...ge],n.useImperativeHandle(o,()=>({props:t,element:E.current,focus:Be})),n.useImperativeHandle(b,()=>o.current);const We=n.useCallback(()=>{j.current&&j.current.setCustomValidity&&j.current.setCustomValidity(oe.valid?"":z===void 0?pt:z)},[z,oe]);n.useEffect(We),n.useEffect(()=>{const e=s.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Xe.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{e&&e.disconnect()}},[]),n.useEffect(()=>{G.current&&l&&G.current.setPosition(G.current._popup)},[g,l]);const S=n.useCallback((e,r,i)=>{if(t.onChange){const k={items:r,operation:i,...e};t.onChange.call(void 0,k)}},[t.onChange]),U=n.useCallback(e=>{if(ee.areSame(e.item,g,T)||!o.current)return;const{item:r,nativeEvent:i,syntheticEvent:k}=e,D={syntheticEvent:k,nativeEvent:i,target:o.current};S(D,[r],"toggle")},[g,T,S]),J=n.useCallback(e=>{if(!l){if(ne){const r={...e};ne.call(void 0,r)}K===void 0&&(me(!0),Le(g||[]),O&&setTimeout(()=>{var r;u((r=ae.current)==null?void 0:r.element)},300))}},[l,K,ne,O,ae]),v=n.useCallback(e=>{if(l){if(W){const r={...e};W.call(void 0,r)}K===void 0&&me(!1)}},[l,K,W]),C=n.useCallback(e=>{$.current=!0,e(),window.setTimeout(()=>$.current=!1,0)},[]),u=n.useCallback(e=>{e&&C(()=>e.focus())},[C]),ze=n.useCallback(()=>{var e;!d&&l?v({target:o.current}):t.filterable?u((e=M.current)==null?void 0:e.element):u(x.current&&x.current.element)},[d,l,u,v,t.filterable]),_e=n.useCallback(()=>{d&&u(E.current)},[d,u]),je=n.useCallback(e=>{if(!d&&!$.current&&(re(!0),t.onFocus&&o.current)){const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};t.onFocus.call(void 0,r)}},[d,t.onFocus]),$e=n.useCallback(e=>{if(d&&!$.current&&o.current){re(!1);const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};if(t.onBlur){const i={...r};t.onBlur.call(void 0,i)}O||v(r)}},[d,t.onBlur,l,K,W]),He=n.useCallback(()=>{d&&C(s.noop)},[d,C]),Ge=n.useCallback(e=>{if(!e.isDefaultPrevented()&&o.current){re(!0);const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};l||J(r)}},[l,J]),Ue=n.useCallback(e=>{var Z,Se;const{keyCode:r,altKey:i}=e,k=x.current&&x.current.element;if(!o.current||e.isDefaultPrevented()&&((Z=M.current)==null?void 0:Z.element)===e.target)return;const D={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};if(g&&g.length>0&&(r===s.Keys.left||r===s.Keys.right||r===s.Keys.home||r===s.Keys.end||r===s.Keys.delete)){const c=H.current;let p=P?c.findIndex(Ye=>ee.matchTags(Ye,P,T)):-1,f;const ce=p!==-1;r===s.Keys.left?(ce?p=Math.max(0,p-1):p=c.length-1,f=c[p]):r===s.Keys.right?p===c.length-1?f=void 0:ce&&(p=Math.min(c.length-1,p+1),f=c[p]):r===s.Keys.home?f=c[0]:r===s.Keys.end?f=c[c.length-1]:r===s.Keys.delete&&ce&&S(D,c[p].data,"delete"),f!==P&&qe(f)}if(l)if(r===s.Keys.esc||i&&r===s.Keys.up)e.preventDefault(),v(D);else if(k&&k.querySelector(".k-focus")&&(r===s.Keys.up||r===s.Keys.down||r===s.Keys.left||r===s.Keys.right||r===s.Keys.home||r===s.Keys.end)){if(r===s.Keys.up&&((Se=M.current)!=null&&Se.element)){const c=Array.from(k.querySelectorAll(".k-treeview-item")),p=[...c].reverse().find(f=>!!(f&&f.querySelector(".k-focus")));if(p&&c.indexOf(p)===0)return C(()=>{var f;u((f=M.current)==null?void 0:f.element)})}C(s.noop)}else r===s.Keys.down&&C(()=>{var c;u(((c=M.current)==null?void 0:c.element)||k)});else i&&r===s.Keys.down&&(e.preventDefault(),J(D))},[l,v,u,C,J,P,T,g,S]),ye=n.useCallback(e=>{const{keyCode:r,altKey:i}=e;i||r!==s.Keys.up&&r!==s.Keys.down||(e.preventDefault(),C(r===s.Keys.up?()=>{u(E.current)}:()=>{u(x.current&&x.current.element)}))},[u,C]),le=n.useCallback(e=>{if(!o.current)return;const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};S(r,[],"clear"),v(r),e.preventDefault()},[S,v]),Je=n.useCallback((e,r)=>{var i;v({target:o.current}),d||u((i=M.current)==null?void 0:i.element),S({syntheticEvent:r,nativeEvent:r.nativeEvent,target:o.current},e,"delete")},[S,v,u,d]),be=n.useCallback(e=>{if(t.onExpandChange&&o.current){const{item:r,itemHierarchicalIndex:i,nativeEvent:k,syntheticEvent:D}=e,Z={level:gt(i),item:r,nativeEvent:k,syntheticEvent:D,target:o.current};t.onExpandChange.call(void 0,Z)}},[t.onExpandChange]),Ce=n.useCallback(e=>{if(t.onFilterChange&&o.current){const i={filter:{field:t.textField,operator:"contains",value:e.target.value},syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:o.current};t.onFilterChange.call(void 0,i),t.filter===void 0&&Ve(e.target.value)}},[t.onFilterChange,t.filter,t.textField]),ke=n.useCallback(e=>{if(!o.current)return;const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};t.onCancel&&t.onCancel.call(void 0,r),v(r),e.preventDefault()},[t.onCancel,v]),Qe=()=>{const e=t.filterable?n.createElement(Ie,{value:t.filter===void 0?he:t.filter,ref:ae,onChange:Ce,onKeyDown:ye,size:y,rounded:A,fillMode:X}):null,r={adaptiveTitle:t.adaptiveTitle,expand:l,onClose:i=>t.onCancel?ke(i):le(i),windowWidth:se,mobileFilter:e,footer:{cancelText:Q.toLanguageString(m.adaptiveModeFooterCancel,m.messages[m.adaptiveModeFooterCancel]),onCancel:i=>t.onCancel?ke(i):le(i),applyText:Q.toLanguageString(m.adaptiveModeFooterApply,m.messages[m.adaptiveModeFooterApply]),onApply:i=>v(i)}};return n.createElement(lt.AdaptiveMode,{...r},n.createElement(ct.ActionSheetContent,{className:"!k-overflow-hidden"},n.createElement("div",{className:"k-list-container"},n.createElement("div",{className:"k-list k-list-lg"},B.length>0?n.createElement(we.TreeView,{ref:x,tabIndex:_,data:B,focusIdField:T,textField:t.textField,checkField:de,checkIndeterminateField:pe,expandField:t.expandField,childrenField:fe,expandIcons:!0,onItemClick:U,onCheckChange:U,onExpandChange:be,checkboxes:!0,size:y,item:t.item,dir:R}):n.createElement(Ee,null,Q.toLanguageString(m.nodata,m.messages[m.nodata]))))))},Xe=n.useCallback(e=>{for(let r of e)Pe(r.target.clientWidth)},[]),Ee=t.listNoData||rt.ListNoData,Q=tt.useLocalization(),Fe=!De||oe.valid,{size:y,rounded:A,fillMode:X}=t,Y=O&&l?Oe:H.current,xe=n.createElement(n.Fragment,null,n.createElement("span",{className:s.classNames("k-multiselecttree k-input",t.className,{[`k-input-${Te[y]||y}`]:y,[`k-rounded-${ft[A]||A}`]:A,[`k-input-${X}`]:X,"k-focus":d&&!F,"k-invalid":!Fe,"k-disabled":F,"k-loading":t.loading,"k-required":ve}),tabIndex:_,accessKey:t.accessKey,id:I,style:V?{...L,width:void 0}:L,dir:R,ref:E,onKeyDown:F?void 0:Ue,onMouseDown:He,onFocus:je,onBlur:$e,role:"combobox","aria-haspopup":"tree","aria-expanded":l,"aria-disabled":F,"aria-label":V,"aria-labelledby":t.ariaLabelledBy,"aria-describedby":t.ariaDescribedBy?t.ariaDescribedBy:"tagslist-"+I,"aria-required":t.required,onClick:F?void 0:Ge},n.createElement("div",{id:"tagslist-"+I,className:s.classNames("k-input-values k-chip-list",{[`k-chip-list-${Te[y]||y}`]:y})},Y.length>0&&n.createElement(it,{tag:t.tag,onTagDelete:Je,data:Y,guid:I,focused:P?H.current.find(e=>ee.matchTags(e,P,T)):void 0,size:y})),n.createElement("span",{className:"k-input-inner"},Y.length===0&&n.createElement("span",{className:"k-input-value-text"},ue)),t.loading&&n.createElement(s.IconWrap,{className:"k-input-loading-icon",name:"loading"}),ie&&!F&&Y.length>0&&n.createElement(ot,{onClick:le}),n.createElement("select",{name:Me,ref:j,tabIndex:-1,"aria-hidden":!0,title:V,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},n.createElement("option",{value:t.valueMap?t.valueMap.call(void 0,g):g})),!O&&n.createElement(et.Popup,{...N,popupClass:s.classNames(N.popupClass,"k-multiselecttree-popup"),className:s.classNames(N.className,{"k-rtl":R==="rtl"}),style:Ae,anchor:N.anchor||E.current,show:l,onOpen:ze,onClose:_e,ref:G},t.filterable&&n.createElement(Ie,{value:t.filter===void 0?he:t.filter,ref:M,onChange:Ce,onKeyDown:ye,tabIndex:_,size:y,rounded:A,fillMode:X,renderListFilterWrapper:!0,renderPrefixSeparator:!0}),B.length>0?n.createElement(we.TreeView,{style:{height:N.height},ref:x,tabIndex:_,data:B,focusIdField:T,textField:t.textField,checkField:de,checkIndeterminateField:pe,expandField:t.expandField,childrenField:fe,expandIcons:!0,onItemClick:U,onCheckChange:U,onExpandChange:be,checkboxes:!0,size:y,item:t.item,dir:R}):n.createElement(Ee,null,Q.toLanguageString(m.nodata,m.messages[m.nodata])))),O&&Qe());return V?n.createElement(st.FloatingLabel,{label:V,editorValue:ie,editorPlaceholder:ue,editorValid:Fe,editorDisabled:F,editorId:I,style:{width:L?L.width:void 0},children:xe,dir:R}):xe}),mt={opened:a.bool,disabled:a.bool,dir:a.string,tabIndex:a.number,accessKey:a.string,data:a.array,value:a.any,valueMap:a.func,placeholder:a.string,dataItemKey:a.string.isRequired,textField:a.string.isRequired,checkField:a.string,checkIndeterminateField:a.string,expandField:a.string,subItemsField:a.string,className:a.string,style:a.object,label:a.string,validationMessage:a.string,validityStyles:a.bool,valid:a.bool,required:a.bool,name:a.string,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,filterable:a.bool,filter:a.string,loading:a.bool,tags:a.arrayOf(a.shape({text:a.string,data:a.arrayOf(a.any)})),popupSettings:a.shape({animate:a.oneOfType([a.bool,a.shape({openDuration:a.number,closeDuration:a.number})]),popupClass:a.string,className:a.string,appendTo:a.any,width:a.oneOfType([a.string,a.number]),height:a.oneOfType([a.string,a.number])}),onOpen:a.func,onClose:a.func,onFocus:a.func,onBlur:a.func,onChange:a.func,onFilterChange:a.func,onExpandChange:a.func,onCancel:a.func,item:a.func,listNoData:a.func,adaptiveTitle:a.string,adaptive:a.bool};te.displayName="KendoReactMultiSelectTree";te.defaultProps=q;te.propTypes=mt;exports.MultiSelectTree=te;exports.MultiSelectTreePropsContext=Ke;
|