@progress/kendo-react-dropdowns 8.2.0-develop.4 → 8.2.0-develop.5
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/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +114 -112
- package/common/SearchBar.js +1 -1
- package/common/SearchBar.mjs +6 -5
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/index.d.mts +6 -0
- package/index.d.ts +6 -0
- package/package-metadata.mjs +1 -1
- package/package.json +9 -9
package/ComboBox/ComboBox.mjs
CHANGED
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as h from "react";
|
|
10
|
-
import
|
|
10
|
+
import m from "prop-types";
|
|
11
11
|
import V from "../common/DropDownBase.mjs";
|
|
12
|
-
import { Keys as I, validatePackage as se, svgIconPropType as ie, canUseDOM as L, classNames as E, IconWrap as
|
|
12
|
+
import { Keys as I, validatePackage as se, svgIconPropType as ie, canUseDOM as L, classNames as E, IconWrap as ae, createPropsContext as oe, withIdHOC as ne, withPropsContext as le, kendoThemeMaps as re } from "@progress/kendo-react-common";
|
|
13
13
|
import { FloatingLabel as de } from "@progress/kendo-react-labels";
|
|
14
14
|
import { getPlainDataDuplicates as pe, areSame as S, getItemValue as C, isPresent as k, getItemIndexByText as R, suggestValue as he, itemIndexStartsWith as A } from "../common/utils.mjs";
|
|
15
15
|
import ce from "../common/SearchBar.mjs";
|
|
@@ -33,11 +33,11 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
33
33
|
}, this.checkForDuplicatePlainTextRecords = () => {
|
|
34
34
|
const e = this.props.textField !== void 0, t = this.props.dataItemKey !== void 0;
|
|
35
35
|
if (this.props.data && this.props.data.length > 0 && !e && !t) {
|
|
36
|
-
const
|
|
37
|
-
this.duplicates = pe(
|
|
36
|
+
const o = this.props.data;
|
|
37
|
+
this.duplicates = pe(o), this.hasDuplicates = this.duplicates.length > 0;
|
|
38
38
|
}
|
|
39
39
|
}, this.handleItemSelect = (e, t) => {
|
|
40
|
-
const { data:
|
|
40
|
+
const { data: o = [], virtual: a, dataItemKey: n } = this.props, d = a ? a.skip : 0, l = o[e - d], r = this.hasDuplicates || !S(l, this.value, n);
|
|
41
41
|
this.triggerOnChange(l, t), this.state.text !== void 0 && (t.data.text = void 0), r && this.base.triggerPageChangeCornerItems(l, t);
|
|
42
42
|
}, this.onPopupOpened = () => {
|
|
43
43
|
setTimeout(() => {
|
|
@@ -46,8 +46,8 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
46
46
|
}, this.componentRef = (e) => {
|
|
47
47
|
this._element = e, this.base.wrapper = e;
|
|
48
48
|
}, this.toggleBtnClick = (e) => {
|
|
49
|
-
const { data: t = [], skipDisabledItems:
|
|
50
|
-
if (r.syntheticEvent = e, !
|
|
49
|
+
const { data: t = [], skipDisabledItems: o, textField: a } = this.props, n = this.getFocusedIndex(), d = this.getCurrentValueDisabledStatus(a, t, n), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = this.base.initState();
|
|
50
|
+
if (r.syntheticEvent = e, !o && a && d && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(r), !l && this.mobileMode) {
|
|
51
51
|
const i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
|
|
52
52
|
this.base.filterChanged(i, r);
|
|
53
53
|
}
|
|
@@ -55,12 +55,12 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
55
55
|
}, this.closeOpenedApplyStateNonMobileMode = (e, t) => {
|
|
56
56
|
t && !this.mobileMode && this.base.togglePopup(e);
|
|
57
57
|
}, this.renderMobileListFilter = () => {
|
|
58
|
-
const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = C(this.value, this.props.textField),
|
|
58
|
+
const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = C(this.value, this.props.textField), o = k(e) ? e : t;
|
|
59
59
|
return /* @__PURE__ */ h.createElement(
|
|
60
60
|
me,
|
|
61
61
|
{
|
|
62
|
-
value:
|
|
63
|
-
ref: (
|
|
62
|
+
value: o,
|
|
63
|
+
ref: (a) => this._adaptiveFilterInput = a && a.element,
|
|
64
64
|
onChange: this.handleMobileFilterChange,
|
|
65
65
|
onKeyDown: this.onInputKeyDown,
|
|
66
66
|
size: "large",
|
|
@@ -72,17 +72,17 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
72
72
|
const t = this.base.initState();
|
|
73
73
|
t.syntheticEvent = e.syntheticEvent, t.data.text = e.target.value, this.base.filterChanged(e.target.value, t), this.applyState(t);
|
|
74
74
|
}, this.onScroll = (e) => {
|
|
75
|
-
const { vs: t, list:
|
|
75
|
+
const { vs: t, list: o } = this.base;
|
|
76
76
|
t.scrollHandler(e);
|
|
77
|
-
const { groupField:
|
|
77
|
+
const { groupField: a } = this.props;
|
|
78
78
|
let { data: n = [] } = this.props;
|
|
79
|
-
if (!
|
|
79
|
+
if (!a || !n.length)
|
|
80
80
|
return;
|
|
81
|
-
const d = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight :
|
|
82
|
-
this.props.groupMode === "modern" && (n = this.base.getGroupedDataModernMode(n,
|
|
83
|
-
let i = n[0][
|
|
81
|
+
const d = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), r = e.target.scrollTop - t.skip * d;
|
|
82
|
+
this.props.groupMode === "modern" && (n = this.base.getGroupedDataModernMode(n, a));
|
|
83
|
+
let i = n[0][a];
|
|
84
84
|
for (let c = 1; c < n.length && !(d * c > r); c++)
|
|
85
|
-
n[c] && n[c][
|
|
85
|
+
n[c] && n[c][a] && (i = n[c][a]);
|
|
86
86
|
i !== this.state.group && (this.setState({
|
|
87
87
|
group: i
|
|
88
88
|
}), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: i }));
|
|
@@ -90,43 +90,43 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
90
90
|
this.navigationIndex = e, this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
|
|
91
91
|
}, this.handleBlur = (e) => {
|
|
92
92
|
if (this.state.focused && !this._skipBlur) {
|
|
93
|
-
const t = this.base.initState(), { textField:
|
|
94
|
-
t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e,
|
|
93
|
+
const t = this.base.initState(), { textField: o, data: a = [] } = this.props, n = this.getFocusedIndex(), l = !(n === -1) && this.getCurrentValueDisabledStatus(o, a, n);
|
|
94
|
+
t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, o && l && this.clearValueOnBlur(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
|
|
95
95
|
}
|
|
96
96
|
}, this.onInputClick = (e) => {
|
|
97
|
-
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened,
|
|
97
|
+
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
|
|
98
98
|
if (!t && this.mobileMode) {
|
|
99
|
-
const
|
|
100
|
-
|
|
99
|
+
const a = this.base.initState();
|
|
100
|
+
a.syntheticEvent = e, this.base.togglePopup(a), this.base.filterChanged(o, a), this.applyState(a);
|
|
101
101
|
}
|
|
102
102
|
}, this.onInputKeyDown = (e) => {
|
|
103
|
-
const { data: t = [], skipDisabledItems:
|
|
103
|
+
const { data: t = [], skipDisabledItems: o, textField: a, dataItemKey: n, groupField: d } = this.props, l = this.value, r = Math.max(0, t.findIndex((u) => S(u, l, n))), i = e.keyCode, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
|
|
104
104
|
if (p.syntheticEvent = e, !e.altKey && (i === I.up || i === I.down)) {
|
|
105
|
-
if (e.preventDefault(), d !== "" &&
|
|
105
|
+
if (e.preventDefault(), d !== "" && a)
|
|
106
106
|
if (!this.props.skipDisabledItems && c)
|
|
107
107
|
this.onNavigate(p, i);
|
|
108
108
|
else {
|
|
109
109
|
let u = 0;
|
|
110
110
|
if (i === I.down || i === I.right) {
|
|
111
|
-
const g = t.slice(r + 1 < t.length ? r + 1 : r).find((b) => !b.disabled && b[
|
|
112
|
-
u = g && t.findIndex((b) => b[
|
|
111
|
+
const g = t.slice(r + 1 < t.length ? r + 1 : r).find((b) => !b.disabled && b[a]);
|
|
112
|
+
u = g && t.findIndex((b) => b[a] === g[a]);
|
|
113
113
|
} else if (i === I.up || i === I.left) {
|
|
114
114
|
let g;
|
|
115
115
|
if (r === 0)
|
|
116
|
-
g = t, u = t.findIndex((b) => !b.disabled && b[
|
|
116
|
+
g = t, u = t.findIndex((b) => !b.disabled && b[a]);
|
|
117
117
|
else {
|
|
118
118
|
g = t.slice(0, r);
|
|
119
119
|
let b = g.pop();
|
|
120
120
|
for (; b && b.disabled; )
|
|
121
121
|
b = g.pop();
|
|
122
|
-
u = b && t.findIndex((w) => w[
|
|
122
|
+
u = b && t.findIndex((w) => w[a] === b[a]);
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
if (u !== void 0) {
|
|
126
126
|
const g = u - r;
|
|
127
127
|
this.onNavigate(p, i, g);
|
|
128
128
|
} else
|
|
129
|
-
u === void 0 && t.findIndex((g) => g[
|
|
129
|
+
u === void 0 && t.findIndex((g) => g[a] === l[a]) === t.length - 1 && this.onNavigate(p, i);
|
|
130
130
|
}
|
|
131
131
|
else if (!this.props.skipDisabledItems && c)
|
|
132
132
|
this.onNavigate(p, i);
|
|
@@ -147,22 +147,22 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
147
147
|
}
|
|
148
148
|
this.applyState(p);
|
|
149
149
|
}
|
|
150
|
-
const
|
|
150
|
+
const v = () => {
|
|
151
151
|
e.preventDefault(), this.base.togglePopup(p), this.applyState(p);
|
|
152
|
-
}, x = this.getFocusedIndex(),
|
|
153
|
-
c ? i === I.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : i === I.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && i === I.up ?
|
|
152
|
+
}, x = this.getFocusedIndex(), f = x === -1, y = !f && this.getCurrentValueDisabledStatus(a, t, x);
|
|
153
|
+
c ? i === I.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : i === I.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && i === I.up ? v() : i === I.enter ? (e.preventDefault(), (a && !f && e.currentTarget.value ? t[x][a] : void 0) ? !o && a && y ? this.clearValueOnEnterOrEsc(e) : y || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : i === I.esc && (!o && a && y && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !c && i === I.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && i === I.down && v();
|
|
154
154
|
}, this.inputOnChange = (e) => {
|
|
155
155
|
const t = this.base.initState();
|
|
156
156
|
t.syntheticEvent = e;
|
|
157
|
-
const
|
|
157
|
+
const o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = e.currentTarget, n = a.value;
|
|
158
158
|
if (this.props.suggest) {
|
|
159
|
-
const d =
|
|
159
|
+
const d = a.selectionEnd === n.length;
|
|
160
160
|
let l = this.props.filter !== void 0 ? this.props.filter : this.state.text;
|
|
161
161
|
k(l) || (l = C(this.value, this.props.textField) || "");
|
|
162
162
|
const r = l && l === n, i = l && l.length > n.length;
|
|
163
163
|
r || i || !d ? this._suggested = "" : this.suggestValue(n);
|
|
164
164
|
}
|
|
165
|
-
this.props.filter === void 0 && (t.data.text = n), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0),
|
|
165
|
+
this.props.filter === void 0 && (t.data.text = n), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), o || this.base.togglePopup(t), this.base.filterChanged(n, t), this.applyState(t), this.setState({ group: void 0 });
|
|
166
166
|
}, this.clearButtonClick = (e) => {
|
|
167
167
|
const t = this.base.initState();
|
|
168
168
|
t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
|
|
@@ -216,7 +216,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
216
216
|
*/
|
|
217
217
|
get index() {
|
|
218
218
|
const { data: s = [], dataItemKey: e } = this.props, t = this.value;
|
|
219
|
-
return s.findIndex((
|
|
219
|
+
return s.findIndex((o) => S(o, t, e));
|
|
220
220
|
}
|
|
221
221
|
/**
|
|
222
222
|
* Gets the `name` property of the ComboBox.
|
|
@@ -244,18 +244,18 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
244
244
|
}
|
|
245
245
|
/** @hidden */
|
|
246
246
|
componentDidUpdate(s, e) {
|
|
247
|
-
var
|
|
248
|
-
const { dataItemKey: t, virtual:
|
|
247
|
+
var v;
|
|
248
|
+
const { dataItemKey: t, virtual: o, groupField: a = "", data: n = [], textField: d } = this.props, l = s.virtual ? s.virtual.total : 0, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : e.opened;
|
|
249
249
|
s.data !== n && this.checkForDuplicatePlainTextRecords();
|
|
250
250
|
const c = !i && r, p = this.value;
|
|
251
|
-
if (this._valueOnDidUpdate = p, this.base.didUpdate(),
|
|
251
|
+
if (this._valueOnDidUpdate = p, this.base.didUpdate(), o && o.total !== l)
|
|
252
252
|
this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
|
|
253
253
|
else {
|
|
254
254
|
const x = s.value !== void 0 ? s.value : e.value;
|
|
255
|
-
let
|
|
256
|
-
this.props.groupMode === "modern" && d && p && (
|
|
255
|
+
let f = this.hasDuplicates ? this.navigationIndex || 0 : n.findIndex((u) => S(u, p, t));
|
|
256
|
+
this.props.groupMode === "modern" && d && p && (f = (v = this.base.getGroupedDataModernMode(n, a)) == null ? void 0 : v.map((u) => u[d]).indexOf(p[d]));
|
|
257
257
|
const y = !S(x, p, t);
|
|
258
|
-
c &&
|
|
258
|
+
c && o ? this.base.scrollToVirtualItem(o, f) : c && !o ? (this.onPopupOpened(), n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][a], this), this.base.scrollToItem(f)) : (this.hasDuplicates || r && i && p && y) && this.base.scrollToItem(f);
|
|
259
259
|
}
|
|
260
260
|
c && this._input && this._input.focus(), this.setValidity();
|
|
261
261
|
}
|
|
@@ -276,8 +276,8 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
276
276
|
q[$]
|
|
277
277
|
), {
|
|
278
278
|
dir: t,
|
|
279
|
-
disabled:
|
|
280
|
-
clearButton:
|
|
279
|
+
disabled: o,
|
|
280
|
+
clearButton: a = D.defaultProps.clearButton,
|
|
281
281
|
label: n,
|
|
282
282
|
textField: d,
|
|
283
283
|
adaptive: l,
|
|
@@ -285,15 +285,15 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
285
285
|
style: i,
|
|
286
286
|
loading: c,
|
|
287
287
|
iconClassName: p,
|
|
288
|
-
virtual:
|
|
288
|
+
virtual: v,
|
|
289
289
|
size: x,
|
|
290
|
-
rounded:
|
|
290
|
+
rounded: f,
|
|
291
291
|
fillMode: y,
|
|
292
292
|
opened: u = this.state.opened,
|
|
293
293
|
placeholder: g,
|
|
294
294
|
svgIcon: b
|
|
295
|
-
} = this.props, w = !this.validityStyles || this.validity.valid, T = this.props.filter !== void 0 ? this.props.filter : this.state.text, Y = C(this.value, d), O = k(T) ? T : Y, J =
|
|
296
|
-
M.enabled =
|
|
295
|
+
} = this.props, w = !this.validityStyles || this.validity.valid, T = this.props.filter !== void 0 ? this.props.filter : this.state.text, Y = C(this.value, d), O = k(T) ? T : Y, J = a && (!!O || k(this.value)), M = this.base.vs, _ = this.props.id || this._inputId, N = this.mobileMode;
|
|
296
|
+
M.enabled = v !== void 0, v !== void 0 && (M.skip = v.skip, M.total = v.total, M.pageSize = v.pageSize);
|
|
297
297
|
const [Q, X] = j(this.props.prefix || h.Fragment), [Z, ee] = j(this.props.suffix || h.Fragment), P = /* @__PURE__ */ h.createElement(h.Fragment, null, /* @__PURE__ */ h.createElement(
|
|
298
298
|
"span",
|
|
299
299
|
{
|
|
@@ -301,12 +301,12 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
301
301
|
"k-combobox k-input",
|
|
302
302
|
{
|
|
303
303
|
[`k-input-${F[x] || x}`]: x,
|
|
304
|
-
[`k-rounded-${Ce[
|
|
304
|
+
[`k-rounded-${Ce[f] || f}`]: f,
|
|
305
305
|
[`k-input-${y}`]: y,
|
|
306
306
|
"k-invalid": !w,
|
|
307
307
|
"k-loading": c,
|
|
308
308
|
"k-required": this.required,
|
|
309
|
-
"k-disabled":
|
|
309
|
+
"k-disabled": o
|
|
310
310
|
},
|
|
311
311
|
r
|
|
312
312
|
),
|
|
@@ -317,7 +317,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
317
317
|
this.props.prefix && /* @__PURE__ */ h.createElement(Q, { ...X }),
|
|
318
318
|
this.renderSearchBar(O || "", _, g),
|
|
319
319
|
J && !c && /* @__PURE__ */ h.createElement(fe, { onClick: this.clearButtonClick, key: "clearbutton" }),
|
|
320
|
-
c && /* @__PURE__ */ h.createElement(
|
|
320
|
+
c && /* @__PURE__ */ h.createElement(ae, { className: "k-input-loading-icon", name: "loading", key: "loading" }),
|
|
321
321
|
this.props.suffix && /* @__PURE__ */ h.createElement(Z, { ...ee }),
|
|
322
322
|
/* @__PURE__ */ h.createElement(
|
|
323
323
|
z,
|
|
@@ -346,7 +346,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
346
346
|
editorId: _,
|
|
347
347
|
editorValue: O,
|
|
348
348
|
editorValid: w,
|
|
349
|
-
editorDisabled:
|
|
349
|
+
editorDisabled: o,
|
|
350
350
|
style: { width: i ? i.width : void 0 },
|
|
351
351
|
children: P
|
|
352
352
|
}
|
|
@@ -354,7 +354,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
354
354
|
}
|
|
355
355
|
/** @hidden */
|
|
356
356
|
onNavigate(s, e, t) {
|
|
357
|
-
const { data:
|
|
357
|
+
const { data: o = [], virtual: a = { skip: 0 } } = this.props, n = this.props.filter ? this.props.filter : this.state.text;
|
|
358
358
|
let d = -1, l;
|
|
359
359
|
const r = this.base.vs, i = this.value;
|
|
360
360
|
this._suggested = "";
|
|
@@ -364,11 +364,11 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
364
364
|
else if (n === "")
|
|
365
365
|
this.handleItemSelect(0, s);
|
|
366
366
|
else {
|
|
367
|
-
const p =
|
|
367
|
+
const p = a.skip + d;
|
|
368
368
|
l = this.base.navigation.navigate({
|
|
369
369
|
keyCode: e,
|
|
370
370
|
current: p,
|
|
371
|
-
max: (r.enabled ? r.total :
|
|
371
|
+
max: (r.enabled ? r.total : o.length) - 1,
|
|
372
372
|
min: 0,
|
|
373
373
|
skipItems: t || void 0
|
|
374
374
|
}), l !== void 0 && this.handleItemSelect(l, s);
|
|
@@ -379,42 +379,42 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
379
379
|
return s && e && e[t] && e[t].disabled;
|
|
380
380
|
}
|
|
381
381
|
applyValueOnEnter(s, e) {
|
|
382
|
-
const { data: t = [], textField:
|
|
382
|
+
const { data: t = [], textField: o, allowCustom: a } = this.props, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = C(this.value, o) === s ? this.index : R(t, s, o), r = l !== -1;
|
|
383
383
|
let i;
|
|
384
384
|
if (this._suggested = "", r)
|
|
385
385
|
i = t[l];
|
|
386
|
-
else if (
|
|
387
|
-
i =
|
|
386
|
+
else if (a)
|
|
387
|
+
i = o !== void 0 ? { [o]: s } : s;
|
|
388
388
|
else
|
|
389
389
|
return this.selectFocusedItem(s, e);
|
|
390
390
|
this.triggerOnChange(i, e), n && this.base.togglePopup(e), this.props.filter === void 0 && this.state.text !== void 0 && (e.data.text = void 0), this.applyState(e);
|
|
391
391
|
}
|
|
392
392
|
applyValueOnRejectSuggestions(s, e) {
|
|
393
|
-
const { data: t = [], textField:
|
|
393
|
+
const { data: t = [], textField: o, allowCustom: a } = this.props, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = C(this.value, o);
|
|
394
394
|
if (this._suggested = "", s === d || s === "" && !k(d))
|
|
395
395
|
return this.closeOpenedApplyStateNonMobileMode(e, n), this.applyState(e);
|
|
396
|
-
const l = R(t, s,
|
|
396
|
+
const l = R(t, s, o, !0), r = l !== -1;
|
|
397
397
|
let i = null;
|
|
398
|
-
r ? i = t[l] :
|
|
398
|
+
r ? i = t[l] : a && (i = s ? o ? { [o]: s } : s : null), this.triggerOnChange(i, e), this.state.text !== void 0 && (e.data.text = void 0, this.base.filterChanged("", e)), this.closeOpenedApplyStateNonMobileMode(e, n), this.applyState(e);
|
|
399
399
|
}
|
|
400
400
|
selectFocusedItem(s, e) {
|
|
401
|
-
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data:
|
|
401
|
+
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: o = [], textField: a, virtual: n = { skip: 0 }, focusedItemIndex: d = A } = this.props, l = n.skip, r = s === "" && l === 0 ? 0 : d(o, s, a);
|
|
402
402
|
return r !== -1 ? this.handleItemSelect(r + l, e) : (this.triggerOnChange(null, e), this.state.text !== void 0 && (e.data.text = void 0)), t && this.base.togglePopup(e), this.applyState(e);
|
|
403
403
|
}
|
|
404
404
|
renderAdaptiveListContainer() {
|
|
405
|
-
const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size:
|
|
405
|
+
const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: o, data: a = [], groupField: n, groupMode: d, list: l, virtual: r, adaptiveTitle: i, groupStickyHeaderItemRender: c } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, v = this.base.getAdaptiveAnimation();
|
|
406
406
|
let { group: x } = this.state;
|
|
407
|
-
x === void 0 && n !== void 0 && (x = C(
|
|
408
|
-
const
|
|
407
|
+
x === void 0 && n !== void 0 && (x = C(a[0], n));
|
|
408
|
+
const f = {
|
|
409
409
|
navigatable: !1,
|
|
410
410
|
navigatableElements: [],
|
|
411
411
|
expand: p,
|
|
412
|
-
animation:
|
|
412
|
+
animation: v,
|
|
413
413
|
onClose: (y) => this.toggleBtnClick(y),
|
|
414
414
|
animationStyles: s <= W ? { top: 0, width: "100%", height: "100%" } : void 0,
|
|
415
415
|
className: s <= W ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom k-actionsheet"
|
|
416
416
|
};
|
|
417
|
-
return /* @__PURE__ */ h.createElement(Ie, { ...
|
|
417
|
+
return /* @__PURE__ */ h.createElement(Ie, { ...f }, /* @__PURE__ */ h.createElement(ye, null, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ h.createElement("div", { className: "k-text-center" }, i), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-subtitle k-text-center" })), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ h.createElement(
|
|
418
418
|
z,
|
|
419
419
|
{
|
|
420
420
|
tabIndex: 0,
|
|
@@ -434,29 +434,29 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
434
434
|
"k-list-lg": !0,
|
|
435
435
|
"k-virtual-list": r,
|
|
436
436
|
"k-data-table": l,
|
|
437
|
-
[`k-table-${F[
|
|
437
|
+
[`k-table-${F[o] || o}`]: l && o
|
|
438
438
|
}
|
|
439
|
-
) }, e && /* @__PURE__ */ h.createElement("div", { className: "k-table-header" }, e), !l && x &&
|
|
439
|
+
) }, e && /* @__PURE__ */ h.createElement("div", { className: "k-table-header" }, e), !l && x && a.length !== 0 && /* @__PURE__ */ h.createElement(K, { group: x, groupMode: d, render: c }), this.renderList(), t && /* @__PURE__ */ h.createElement("div", { className: "k-list-footer" }, t)))));
|
|
440
440
|
}
|
|
441
441
|
renderListContainer() {
|
|
442
|
-
const s = this.base, { dir: e, header: t, footer:
|
|
443
|
-
let { group:
|
|
444
|
-
return
|
|
442
|
+
const s = this.base, { dir: e, header: t, footer: o, data: a = [], groupField: n, groupMode: d, size: l, list: r, virtual: i, groupStickyHeaderItemRender: c } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, v = s.getPopupSettings(), x = v.width !== void 0 ? v.width : s.popupWidth;
|
|
443
|
+
let { group: f } = this.state;
|
|
444
|
+
return f === void 0 && n !== void 0 && (f = C(a[0], n)), /* @__PURE__ */ h.createElement(
|
|
445
445
|
ue,
|
|
446
446
|
{
|
|
447
447
|
width: x,
|
|
448
448
|
popupSettings: {
|
|
449
|
-
...
|
|
450
|
-
anchor:
|
|
449
|
+
...v,
|
|
450
|
+
anchor: v.anchor || this.element,
|
|
451
451
|
show: p,
|
|
452
452
|
popupClass: E(
|
|
453
|
-
|
|
453
|
+
v.popupClass,
|
|
454
454
|
"k-list-container",
|
|
455
455
|
"k-combobox-popup"
|
|
456
456
|
)
|
|
457
457
|
},
|
|
458
458
|
dir: e !== void 0 ? e : this.base.dirCalculated,
|
|
459
|
-
itemsCount: [
|
|
459
|
+
itemsCount: [a.length]
|
|
460
460
|
},
|
|
461
461
|
/* @__PURE__ */ h.createElement("div", { className: E(
|
|
462
462
|
{
|
|
@@ -466,24 +466,24 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
466
466
|
"k-data-table": r,
|
|
467
467
|
[`k-table-${F[l] || l}`]: r && l
|
|
468
468
|
}
|
|
469
|
-
) }, t && /* @__PURE__ */ h.createElement("div", { className: "k-table-header" }, t), !r &&
|
|
469
|
+
) }, t && /* @__PURE__ */ h.createElement("div", { className: "k-table-header" }, t), !r && f && a.length !== 0 && /* @__PURE__ */ h.createElement(K, { group: f, groupMode: d, render: c }), this.renderList(), o && /* @__PURE__ */ h.createElement("div", { className: E(
|
|
470
470
|
{
|
|
471
471
|
"k-list-footer": !this.props.footerClassName
|
|
472
472
|
},
|
|
473
473
|
this.props.footerClassName
|
|
474
|
-
) },
|
|
474
|
+
) }, o))
|
|
475
475
|
);
|
|
476
476
|
}
|
|
477
477
|
renderList() {
|
|
478
478
|
const s = this.base, {
|
|
479
479
|
textField: e,
|
|
480
480
|
dataItemKey: t,
|
|
481
|
-
listNoDataRender:
|
|
482
|
-
itemRender:
|
|
481
|
+
listNoDataRender: o,
|
|
482
|
+
itemRender: a,
|
|
483
483
|
groupHeaderItemRender: n,
|
|
484
484
|
data: d = [],
|
|
485
485
|
virtual: l = { skip: 0, total: void 0 }
|
|
486
|
-
} = this.props, r = s.getPopupSettings(), i = s.vs, c = l.skip, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened,
|
|
486
|
+
} = this.props, r = s.getPopupSettings(), i = s.vs, c = l.skip, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, v = `translateY(${i.translate}px)`, x = p ? this.getFocusedIndex(this.hasDuplicates) : void 0, f = this.props.filter !== void 0 ? this.props.filter : this.state.text, y = C(this.value, e), u = k(f) && f !== y ? null : this.value, g = this.props.list || ge;
|
|
487
487
|
return /* @__PURE__ */ h.createElement(
|
|
488
488
|
g,
|
|
489
489
|
{
|
|
@@ -510,13 +510,13 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
510
510
|
"k-list-scroller": !l
|
|
511
511
|
}
|
|
512
512
|
),
|
|
513
|
-
listStyle: i.enabled ? { transform:
|
|
513
|
+
listStyle: i.enabled ? { transform: v } : void 0,
|
|
514
514
|
key: "listkey",
|
|
515
515
|
skip: c,
|
|
516
516
|
onClick: this.handleItemClick,
|
|
517
|
-
itemRender:
|
|
517
|
+
itemRender: a,
|
|
518
518
|
groupHeaderItemRender: n,
|
|
519
|
-
noDataRender:
|
|
519
|
+
noDataRender: o,
|
|
520
520
|
onMouseDown: (b) => b.preventDefault(),
|
|
521
521
|
onScroll: this.onScroll,
|
|
522
522
|
wrapperRef: i.scrollerRef,
|
|
@@ -527,8 +527,8 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
527
527
|
}
|
|
528
528
|
renderSearchBar(s, e, t) {
|
|
529
529
|
const {
|
|
530
|
-
tabIndex:
|
|
531
|
-
disabled:
|
|
530
|
+
tabIndex: o,
|
|
531
|
+
disabled: a,
|
|
532
532
|
data: n = [],
|
|
533
533
|
dataItemKey: d,
|
|
534
534
|
virtual: l = { skip: 0 }
|
|
@@ -539,7 +539,7 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
539
539
|
id: e,
|
|
540
540
|
readOnly: r && this.mobileMode,
|
|
541
541
|
placeholder: t,
|
|
542
|
-
tabIndex:
|
|
542
|
+
tabIndex: o,
|
|
543
543
|
title: this.props.title,
|
|
544
544
|
accessKey: this.props.accessKey,
|
|
545
545
|
value: s + this._suggested,
|
|
@@ -550,12 +550,13 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
550
550
|
onChange: this.inputOnChange,
|
|
551
551
|
onFocus: this.base.handleFocus,
|
|
552
552
|
onBlur: this.handleBlur,
|
|
553
|
-
disabled:
|
|
553
|
+
disabled: a,
|
|
554
554
|
expanded: r,
|
|
555
555
|
owns: this.base.listBoxId,
|
|
556
556
|
activedescendant: `option-${this.base.guid}-${c + l.skip}`,
|
|
557
557
|
role: "combobox",
|
|
558
558
|
ariaLabelledBy: this.props.ariaLabelledBy,
|
|
559
|
+
ariaLabel: this.props.ariaLabel,
|
|
559
560
|
ariaDescribedBy: this.props.ariaDescribedBy,
|
|
560
561
|
ariaRequired: this.required,
|
|
561
562
|
render: this.props.valueRender
|
|
@@ -573,8 +574,8 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
573
574
|
!this.hasDuplicates && (!k(t) && !k(s) || S(t, s, this.props.dataItemKey)) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
|
|
574
575
|
}
|
|
575
576
|
getFocusedIndex(s) {
|
|
576
|
-
const e = this.value, { data: t = [], textField:
|
|
577
|
-
return s && this.navigationIndex !== void 0 ? this.navigationIndex : k(e) && r === void 0 ? t.findIndex((i) => S(i, e,
|
|
577
|
+
const e = this.value, { data: t = [], textField: o, dataItemKey: a, virtual: n = { skip: 0 }, focusedItemIndex: d = A, skipDisabledItems: l } = this.props, r = this.props.filter ? this.props.filter : this.state.text;
|
|
578
|
+
return s && this.navigationIndex !== void 0 ? this.navigationIndex : k(e) && r === void 0 ? t.findIndex((i) => S(i, e, a)) : r ? d(t, r, o) : l && o && !r && n.skip === 0 ? t.findIndex((i) => !i.disabled && i[o]) : n.skip === 0 ? 0 : -1;
|
|
578
579
|
}
|
|
579
580
|
suggestValue(s) {
|
|
580
581
|
const { data: e, textField: t } = this.props;
|
|
@@ -590,28 +591,29 @@ const Se = "Please enter a valid value!", { sizeMap: F, roundedMap: Ce } = re, D
|
|
|
590
591
|
};
|
|
591
592
|
D.displayName = "ComboBox", D.propTypes = {
|
|
592
593
|
...V.propTypes,
|
|
593
|
-
size:
|
|
594
|
-
rounded:
|
|
595
|
-
fillMode:
|
|
596
|
-
dataItemKey:
|
|
597
|
-
groupField:
|
|
598
|
-
groupMode:
|
|
599
|
-
isMultiColumn:
|
|
600
|
-
suggest:
|
|
601
|
-
placeholder:
|
|
602
|
-
title:
|
|
603
|
-
allowCustom:
|
|
604
|
-
clearButton:
|
|
605
|
-
iconClassName:
|
|
594
|
+
size: m.oneOf([null, "small", "medium", "large"]),
|
|
595
|
+
rounded: m.oneOf([null, "small", "medium", "large", "full"]),
|
|
596
|
+
fillMode: m.oneOf([null, "solid", "flat", "outline"]),
|
|
597
|
+
dataItemKey: m.string,
|
|
598
|
+
groupField: m.string,
|
|
599
|
+
groupMode: m.oneOf([void 0, "classic", "modern"]),
|
|
600
|
+
isMultiColumn: m.bool,
|
|
601
|
+
suggest: m.bool,
|
|
602
|
+
placeholder: m.string,
|
|
603
|
+
title: m.string,
|
|
604
|
+
allowCustom: m.bool,
|
|
605
|
+
clearButton: m.bool,
|
|
606
|
+
iconClassName: m.string,
|
|
606
607
|
svgIcon: ie,
|
|
607
|
-
validationMessage:
|
|
608
|
-
required:
|
|
609
|
-
id:
|
|
610
|
-
ariaLabelledBy:
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
608
|
+
validationMessage: m.string,
|
|
609
|
+
required: m.bool,
|
|
610
|
+
id: m.string,
|
|
611
|
+
ariaLabelledBy: m.string,
|
|
612
|
+
ariaLabel: m.string,
|
|
613
|
+
ariaDescribedBy: m.string,
|
|
614
|
+
list: m.any,
|
|
615
|
+
valueRender: m.func,
|
|
616
|
+
skipDisabledItems: m.bool
|
|
615
617
|
}, D.defaultProps = {
|
|
616
618
|
...V.defaultProps,
|
|
617
619
|
size: "medium",
|
|
@@ -627,7 +629,7 @@ D.displayName = "ComboBox", D.propTypes = {
|
|
|
627
629
|
suffix: void 0
|
|
628
630
|
};
|
|
629
631
|
let B = D;
|
|
630
|
-
const De =
|
|
632
|
+
const De = oe(), Ee = ne(le(De, B));
|
|
631
633
|
Ee.displayName = "KendoReactComboBox";
|
|
632
634
|
export {
|
|
633
635
|
Ee as ComboBox,
|
package/common/SearchBar.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";const u=require("@progress/kendo-react-common"),h=require("react");function
|
|
8
|
+
"use client";"use strict";const u=require("@progress/kendo-react-common"),h=require("react");function b(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>a[e]})}}return t.default=a,Object.freeze(t)}const c=b(h);class g extends c.Component{constructor(){super(...arguments),this._input=null}get input(){return this._input}componentDidUpdate(t){const e=t.value,s=t.suggestedText,{value:n,suggestedText:i,focused:o}=this.props,r=this.input,p=e!==n||i!==s,l=p&&e.startsWith(n)&&!(s&&i&&s.endsWith(i)),d=u.getActiveElement(document);o&&r&&d!==r&&r.focus(),i&&p&&!l&&r&&r.setSelectionRange(n.length-i.length,n.length)}render(){const{expanded:t=!1,disabled:e,role:s="listbox",render:n}=this.props,i=c.createElement("input",{autoComplete:"off",id:this.props.id,type:"text",key:"searchbar",size:this.props.size,placeholder:this.props.placeholder,className:"k-input-inner",tabIndex:this.props.tabIndex,accessKey:this.props.accessKey,role:s,name:this.props.name,value:this.props.value,onChange:this.props.onChange,ref:o=>this._input=o,onKeyDown:this.props.onKeyDown,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onClick:this.props.onClick,"aria-disabled":e||void 0,disabled:e||void 0,readOnly:this.props.readOnly||void 0,title:this.props.title,"aria-haspopup":"listbox","aria-expanded":t,"aria-owns":this.props.owns,"aria-activedescendant":t?this.props.activedescendant:void 0,"aria-describedby":this.props.ariaDescribedBy,"aria-labelledby":this.props.ariaLabelledBy,"aria-label":this.props.ariaLabel,"aria-required":this.props.ariaRequired});return n?n.call(void 0,i):i}}module.exports=g;
|
package/common/SearchBar.mjs
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import { getActiveElement as c } from "@progress/kendo-react-common";
|
|
10
10
|
import * as p from "react";
|
|
11
|
-
class
|
|
11
|
+
class b extends p.Component {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments), this._input = null;
|
|
14
14
|
}
|
|
@@ -19,8 +19,8 @@ class g extends p.Component {
|
|
|
19
19
|
return this._input;
|
|
20
20
|
}
|
|
21
21
|
componentDidUpdate(t) {
|
|
22
|
-
const i = t.value, a = t.suggestedText, { value: s, suggestedText: e, focused:
|
|
23
|
-
|
|
22
|
+
const i = t.value, a = t.suggestedText, { value: s, suggestedText: e, focused: r } = this.props, o = this.input, n = i !== s || e !== a, l = n && i.startsWith(s) && !(a && e && a.endsWith(e)), d = c(document);
|
|
23
|
+
r && o && d !== o && o.focus(), e && n && !l && o && o.setSelectionRange(s.length - e.length, s.length);
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
26
|
const { expanded: t = !1, disabled: i, role: a = "listbox", render: s } = this.props, e = /* @__PURE__ */ p.createElement(
|
|
@@ -39,7 +39,7 @@ class g extends p.Component {
|
|
|
39
39
|
name: this.props.name,
|
|
40
40
|
value: this.props.value,
|
|
41
41
|
onChange: this.props.onChange,
|
|
42
|
-
ref: (
|
|
42
|
+
ref: (r) => this._input = r,
|
|
43
43
|
onKeyDown: this.props.onKeyDown,
|
|
44
44
|
onFocus: this.props.onFocus,
|
|
45
45
|
onBlur: this.props.onBlur,
|
|
@@ -54,6 +54,7 @@ class g extends p.Component {
|
|
|
54
54
|
"aria-activedescendant": t ? this.props.activedescendant : void 0,
|
|
55
55
|
"aria-describedby": this.props.ariaDescribedBy,
|
|
56
56
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
57
|
+
"aria-label": this.props.ariaLabel,
|
|
57
58
|
"aria-required": this.props.ariaRequired
|
|
58
59
|
}
|
|
59
60
|
);
|
|
@@ -61,5 +62,5 @@ class g extends p.Component {
|
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
export {
|
|
64
|
-
|
|
65
|
+
b as default
|
|
65
66
|
};
|