@progress/kendo-react-dropdowns 13.3.0-develop.8 → 13.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +297 -295
- package/common/utils.js +1 -1
- package/common/utils.mjs +30 -30
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/index.d.mts +13 -0
- package/index.d.ts +13 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -10
package/ComboBox/ComboBox.mjs
CHANGED
|
@@ -8,58 +8,58 @@
|
|
|
8
8
|
import * as g from "react";
|
|
9
9
|
import m from "prop-types";
|
|
10
10
|
import _ from "../common/DropDownBase.mjs";
|
|
11
|
-
import { classNames as S, uComboBox as F, Keys as I, validatePackage as
|
|
12
|
-
import { FloatingLabel as
|
|
13
|
-
import { getPlainDataDuplicates as
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
11
|
+
import { classNames as S, uComboBox as F, Keys as I, validatePackage as te, getLicenseMessage as se, svgIconPropType as ie, canUseDOM as A, IconWrap as oe, WatermarkOverlay as ae, createPropsContext as ne, withIdHOC as le, withPropsContext as re, withUnstyledHOC as pe, withAdaptiveModeContext as de } from "@progress/kendo-react-common";
|
|
12
|
+
import { FloatingLabel as he } from "@progress/kendo-react-labels";
|
|
13
|
+
import { getPlainDataDuplicates as ce, getFilteredData as y, areSame as D, getItemValue as w, isPresent as k, getItemIndexByText as z, suggestValue as ue, itemIndexStartsWith as P } from "../common/utils.mjs";
|
|
14
|
+
import ge from "../common/SearchBar.mjs";
|
|
15
|
+
import me from "../common/ListContainer.mjs";
|
|
16
|
+
import fe from "../common/List.mjs";
|
|
17
|
+
import ve from "../common/ListFilter.mjs";
|
|
18
18
|
import K from "../common/GroupStickyHeader.mjs";
|
|
19
19
|
import { packageMetadata as H } from "../package-metadata.mjs";
|
|
20
|
-
import
|
|
21
|
-
import { Button as
|
|
22
|
-
import { caretAltDownIcon as
|
|
20
|
+
import be from "../common/ClearButton.mjs";
|
|
21
|
+
import { Button as xe } from "@progress/kendo-react-buttons";
|
|
22
|
+
import { caretAltDownIcon as Ie } from "@progress/kendo-svg-icons";
|
|
23
23
|
import { comboArrowBtnAriaLabelExpand as q, messages as W, comboArrowBtnAriaLabelCollapse as G } from "../messages/index.mjs";
|
|
24
24
|
import { provideLocalizationService as U } from "@progress/kendo-react-intl";
|
|
25
|
-
import { ActionSheetContent as
|
|
25
|
+
import { ActionSheetContent as ye } from "@progress/kendo-react-layout";
|
|
26
26
|
import j from "../common/withCustomComponent.mjs";
|
|
27
|
-
import { AdaptiveMode as
|
|
28
|
-
const
|
|
27
|
+
import { AdaptiveMode as Ce } from "../common/AdaptiveMode.mjs";
|
|
28
|
+
const Se = "Please enter a valid value!", E = class E extends g.Component {
|
|
29
29
|
constructor(s) {
|
|
30
30
|
super(s), this.state = {}, this.base = new _(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this._skipFocus = !1, this.itemHeight = 0, this.duplicates = [], this.hasDuplicates = !1, this.scrollToFocused = !1, this.showLicenseWatermark = !1, this.focus = () => {
|
|
31
31
|
this._input && this._input.focus();
|
|
32
32
|
}, this.checkForDuplicatePlainTextRecords = () => {
|
|
33
|
-
const
|
|
34
|
-
if (this.props.data && this.props.data.length > 0 && !
|
|
33
|
+
const e = this.props.textField !== void 0, t = this.props.dataItemKey !== void 0;
|
|
34
|
+
if (this.props.data && this.props.data.length > 0 && !e && !t) {
|
|
35
35
|
const i = this.props.data;
|
|
36
|
-
this.duplicates =
|
|
36
|
+
this.duplicates = ce(i), this.hasDuplicates = this.duplicates.length > 0;
|
|
37
37
|
}
|
|
38
|
-
}, this.handleItemSelect = (
|
|
39
|
-
const { virtual: i, dataItemKey: r } = this.props,
|
|
40
|
-
this.triggerOnChange(p,
|
|
38
|
+
}, this.handleItemSelect = (e, t) => {
|
|
39
|
+
const { virtual: i, dataItemKey: r } = this.props, l = y(this.props), o = i ? i.skip : 0, p = l[e - o], n = this.hasDuplicates || !D(p, this.value, r);
|
|
40
|
+
this.triggerOnChange(p, t), this.state.text !== void 0 && (t.data.text = void 0), n && this.base.triggerPageChangeCornerItems(p, t);
|
|
41
41
|
}, this.onPopupOpened = () => {
|
|
42
42
|
setTimeout(() => {
|
|
43
43
|
this.mobileMode && this._adaptiveFilterInput && (this._skipBlur = !0, this._adaptiveFilterInput.focus(), this._skipBlur = !1);
|
|
44
44
|
}, 300);
|
|
45
|
-
}, this.componentRef = (
|
|
46
|
-
this._element =
|
|
47
|
-
}, this.toggleBtnClick = (
|
|
45
|
+
}, this.componentRef = (e) => {
|
|
46
|
+
this._element = e, this.base.wrapper = e;
|
|
47
|
+
}, this.toggleBtnClick = (e) => {
|
|
48
48
|
this._skipFocus = !0;
|
|
49
|
-
const { skipDisabledItems:
|
|
50
|
-
if (
|
|
51
|
-
const
|
|
52
|
-
this.base.filterChanged(
|
|
49
|
+
const { skipDisabledItems: t, textField: i } = this.props, r = y(this.props), l = this.getFocusedIndex(), o = this.getCurrentValueDisabledStatus(i, r, l), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = this.base.initState();
|
|
50
|
+
if (n.syntheticEvent = e, !t && i && o && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(n), !p && this.mobileMode) {
|
|
51
|
+
const a = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
|
|
52
|
+
this.base.filterChanged(a, n);
|
|
53
53
|
}
|
|
54
|
-
this.applyState(
|
|
54
|
+
this.applyState(n), setTimeout(() => {
|
|
55
55
|
this._skipFocus = !1;
|
|
56
56
|
}, 300);
|
|
57
|
-
}, this.closeOpenedApplyStateNonMobileMode = (
|
|
58
|
-
|
|
57
|
+
}, this.closeOpenedApplyStateNonMobileMode = (e, t) => {
|
|
58
|
+
t && !this.mobileMode && this.base.togglePopup(e);
|
|
59
59
|
}, this.renderMobileListFilter = () => {
|
|
60
|
-
const
|
|
60
|
+
const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = w(this.value, this.props.textField), i = k(e) ? e : t;
|
|
61
61
|
return /* @__PURE__ */ g.createElement(
|
|
62
|
-
|
|
62
|
+
ve,
|
|
63
63
|
{
|
|
64
64
|
value: i,
|
|
65
65
|
ref: (r) => {
|
|
@@ -74,153 +74,153 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
74
74
|
}
|
|
75
75
|
);
|
|
76
76
|
}, this.listContainerContent = () => {
|
|
77
|
-
const { header:
|
|
77
|
+
const { header: e, footer: t, size: i, groupStickyHeaderItemRender: r, groupField: l, list: o, groupMode: p, unstyled: n, virtual: a } = this.props, d = y(this.props), h = n && n.uComboBox;
|
|
78
78
|
let { group: b } = this.state;
|
|
79
|
-
return b === void 0 &&
|
|
79
|
+
return b === void 0 && l !== void 0 && (b = w(d[0], l)), /* @__PURE__ */ g.createElement(
|
|
80
80
|
"div",
|
|
81
81
|
{
|
|
82
82
|
className: S(
|
|
83
83
|
F.list({
|
|
84
|
-
c:
|
|
85
|
-
list:
|
|
84
|
+
c: h,
|
|
85
|
+
list: o,
|
|
86
86
|
size: "large",
|
|
87
87
|
tableSize: i,
|
|
88
|
-
virtual:
|
|
88
|
+
virtual: a
|
|
89
89
|
})
|
|
90
90
|
)
|
|
91
91
|
},
|
|
92
|
-
|
|
93
|
-
!
|
|
92
|
+
e && /* @__PURE__ */ g.createElement("div", { className: S(F.listHeader({ c: h })) }, e),
|
|
93
|
+
!o && b && d.length !== 0 && /* @__PURE__ */ g.createElement(K, { group: b, groupMode: p, render: r }),
|
|
94
94
|
this.renderList(),
|
|
95
|
-
|
|
95
|
+
t && /* @__PURE__ */ g.createElement(
|
|
96
96
|
"div",
|
|
97
97
|
{
|
|
98
|
-
className: S(F.listFooter({ c:
|
|
98
|
+
className: S(F.listFooter({ c: h }), this.props.footerClassName)
|
|
99
99
|
},
|
|
100
|
-
|
|
100
|
+
t
|
|
101
101
|
)
|
|
102
102
|
);
|
|
103
|
-
}, this.handleMobileFilterChange = (
|
|
104
|
-
const
|
|
105
|
-
|
|
106
|
-
}, this.onScroll = (
|
|
107
|
-
const { vs:
|
|
108
|
-
|
|
103
|
+
}, this.handleMobileFilterChange = (e) => {
|
|
104
|
+
const t = this.base.initState();
|
|
105
|
+
t.syntheticEvent = e.syntheticEvent, t.data.text = e.target.value, this.base.filterChanged(e.target.value, t), this.applyState(t);
|
|
106
|
+
}, this.onScroll = (e) => {
|
|
107
|
+
const { vs: t, list: i } = this.base;
|
|
108
|
+
t.scrollHandler(e);
|
|
109
109
|
const { groupField: r } = this.props;
|
|
110
|
-
let
|
|
111
|
-
if (!r || !
|
|
110
|
+
let l = y(this.props);
|
|
111
|
+
if (!r || !l.length)
|
|
112
112
|
return;
|
|
113
|
-
const
|
|
114
|
-
this.props.groupMode === "modern" && (
|
|
115
|
-
let
|
|
116
|
-
for (let
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
group:
|
|
120
|
-
}), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group:
|
|
121
|
-
}, this.handleItemClick = (
|
|
122
|
-
this.navigationIndex =
|
|
123
|
-
}, this.handleBlur = (
|
|
113
|
+
const o = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : i ? i.children[0].offsetHeight : 0), n = e.target.scrollTop - t.skip * o;
|
|
114
|
+
this.props.groupMode === "modern" && (l = this.base.getGroupedDataModernMode(l, r));
|
|
115
|
+
let a = l[0][r];
|
|
116
|
+
for (let d = 1; d < l.length && !(o * d > n); d++)
|
|
117
|
+
l[d] && l[d][r] && (a = l[d][r]);
|
|
118
|
+
a !== this.state.group && (this.setState({
|
|
119
|
+
group: a
|
|
120
|
+
}), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: a }));
|
|
121
|
+
}, this.handleItemClick = (e, t) => {
|
|
122
|
+
this.navigationIndex = e, this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
|
|
123
|
+
}, this.handleBlur = (e) => {
|
|
124
124
|
if (this.state.focused && !this._skipBlur) {
|
|
125
|
-
const
|
|
126
|
-
|
|
125
|
+
const t = this.base.initState(), { textField: i } = this.props, r = y(this.props), l = this.getFocusedIndex(), p = !(l === -1) && this.getCurrentValueDisabledStatus(i, r, l);
|
|
126
|
+
t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, i && p && this.clearValueOnBlur(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
|
|
127
127
|
}
|
|
128
|
-
}, this.onInputClick = (
|
|
129
|
-
const
|
|
130
|
-
if (!
|
|
128
|
+
}, this.onInputClick = (e) => {
|
|
129
|
+
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
|
|
130
|
+
if (!t && this.mobileMode) {
|
|
131
131
|
const r = this.base.initState();
|
|
132
|
-
r.syntheticEvent =
|
|
132
|
+
r.syntheticEvent = e, this.base.togglePopup(r), this.base.filterChanged(i, r), this.applyState(r);
|
|
133
133
|
}
|
|
134
|
-
}, this.onInputKeyDown = (
|
|
135
|
-
const { skipDisabledItems:
|
|
134
|
+
}, this.onInputKeyDown = (e) => {
|
|
135
|
+
const { skipDisabledItems: t, textField: i, dataItemKey: r, groupField: l } = this.props, o = y(this.props), p = this.value, n = Math.max(
|
|
136
136
|
0,
|
|
137
|
-
|
|
138
|
-
),
|
|
139
|
-
if (
|
|
140
|
-
if (
|
|
141
|
-
if (!this.props.skipDisabledItems &&
|
|
142
|
-
this.onNavigate(
|
|
137
|
+
o.findIndex((u) => D(u, p, r))
|
|
138
|
+
), a = e.keyCode, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
|
|
139
|
+
if (h.syntheticEvent = e, !e.altKey && (a === I.up || a === I.down)) {
|
|
140
|
+
if (e.preventDefault(), l !== "" && i)
|
|
141
|
+
if (!this.props.skipDisabledItems && d)
|
|
142
|
+
this.onNavigate(h, a);
|
|
143
143
|
else {
|
|
144
144
|
let u = 0;
|
|
145
|
-
if (
|
|
146
|
-
const
|
|
147
|
-
u =
|
|
148
|
-
} else if (
|
|
149
|
-
let
|
|
150
|
-
if (
|
|
151
|
-
|
|
145
|
+
if (a === I.down || a === I.right) {
|
|
146
|
+
const c = o.slice(n + 1 < o.length ? n + 1 : n).find((v) => !v.disabled && v[i]);
|
|
147
|
+
u = c && o.findIndex((v) => v[i] === c[i]);
|
|
148
|
+
} else if (a === I.up || a === I.left) {
|
|
149
|
+
let c;
|
|
150
|
+
if (n === 0)
|
|
151
|
+
c = o, u = o.findIndex((v) => !v.disabled && v[i]);
|
|
152
152
|
else {
|
|
153
|
-
|
|
154
|
-
let v =
|
|
153
|
+
c = o.slice(0, n);
|
|
154
|
+
let v = c.pop();
|
|
155
155
|
for (; v && v.disabled; )
|
|
156
|
-
v =
|
|
157
|
-
u = v &&
|
|
156
|
+
v = c.pop();
|
|
157
|
+
u = v && o.findIndex((M) => M[i] === v[i]);
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
160
|
if (u !== void 0) {
|
|
161
|
-
const
|
|
162
|
-
this.onNavigate(
|
|
163
|
-
} else u === void 0 &&
|
|
161
|
+
const c = u - n;
|
|
162
|
+
this.onNavigate(h, a, c);
|
|
163
|
+
} else u === void 0 && o.findIndex((c) => c[i] === p[i]) === o.length - 1 && this.onNavigate(h, a);
|
|
164
164
|
}
|
|
165
|
-
else if (!this.props.skipDisabledItems &&
|
|
166
|
-
this.onNavigate(
|
|
165
|
+
else if (!this.props.skipDisabledItems && d)
|
|
166
|
+
this.onNavigate(h, a);
|
|
167
167
|
else {
|
|
168
168
|
let u = null;
|
|
169
|
-
if (
|
|
170
|
-
u =
|
|
171
|
-
else if (
|
|
172
|
-
const
|
|
173
|
-
for (u =
|
|
174
|
-
u =
|
|
169
|
+
if (a === I.down || a === I.right)
|
|
170
|
+
u = o.slice(n + 1).find((c) => !c.disabled);
|
|
171
|
+
else if (a === I.up || a === I.left) {
|
|
172
|
+
const c = o.slice(0, n);
|
|
173
|
+
for (u = c.pop(); u && u.disabled; )
|
|
174
|
+
u = c.pop();
|
|
175
175
|
}
|
|
176
176
|
if (u) {
|
|
177
|
-
const
|
|
178
|
-
this.onNavigate(
|
|
177
|
+
const c = u.id - n - 1;
|
|
178
|
+
this.onNavigate(h, a, c);
|
|
179
179
|
} else
|
|
180
|
-
this.onNavigate(
|
|
180
|
+
this.onNavigate(h, a);
|
|
181
181
|
}
|
|
182
|
-
this.applyState(
|
|
182
|
+
this.applyState(h);
|
|
183
183
|
}
|
|
184
184
|
const b = () => {
|
|
185
|
-
|
|
186
|
-
}, x = this.getFocusedIndex(), C = x === -1, f = !C && this.getCurrentValueDisabledStatus(i,
|
|
187
|
-
|
|
188
|
-
}, this.inputOnChange = (
|
|
189
|
-
const
|
|
190
|
-
|
|
191
|
-
const i = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r =
|
|
185
|
+
e.preventDefault(), this.base.togglePopup(h), this.applyState(h);
|
|
186
|
+
}, x = this.getFocusedIndex(), C = x === -1, f = !C && this.getCurrentValueDisabledStatus(i, o, x);
|
|
187
|
+
d ? a === I.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : a === I.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && a === I.up ? b() : a === I.enter ? (e.preventDefault(), (i && !C && e.currentTarget.value ? o[x][i] : void 0) ? !t && i && f ? this.clearValueOnEnterOrEsc(e) : f || this.applyValueOnEnter(e.currentTarget.value, h) : this.applyValueOnEnter(e.currentTarget.value, h)) : a === I.esc && (!t && i && f && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, h)) : !d && a === I.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && a === I.down && b();
|
|
188
|
+
}, this.inputOnChange = (e) => {
|
|
189
|
+
const t = this.base.initState();
|
|
190
|
+
t.syntheticEvent = e;
|
|
191
|
+
const i = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = e.currentTarget, l = r.value;
|
|
192
192
|
if (this.props.suggest) {
|
|
193
|
-
const
|
|
193
|
+
const o = r.selectionEnd === l.length;
|
|
194
194
|
let p = this.props.filter !== void 0 ? this.props.filter : this.state.text;
|
|
195
195
|
k(p) || (p = w(this.value, this.props.textField) || "");
|
|
196
|
-
const
|
|
197
|
-
|
|
196
|
+
const n = p && p === l, a = p && p.length > l.length;
|
|
197
|
+
n || a || !o ? this._suggested = "" : this.suggestValue(l);
|
|
198
198
|
}
|
|
199
|
-
this.props.filter === void 0 && (
|
|
200
|
-
}, this.clearButtonClick = (
|
|
201
|
-
const
|
|
202
|
-
|
|
203
|
-
}, this.clearValueOnEnterOrEsc = (
|
|
204
|
-
const
|
|
205
|
-
|
|
206
|
-
}, this.clearValueOnBlur = (
|
|
207
|
-
const
|
|
208
|
-
|
|
209
|
-
}, this.clearValueOnToggleBtnClick = (
|
|
210
|
-
const
|
|
211
|
-
|
|
199
|
+
this.props.filter === void 0 && (t.data.text = l), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), i ? this.scrollToFocused = !0 : this.base.togglePopup(t), this.base.filterChanged(l, t), this.applyState(t), this.setState({ group: void 0 });
|
|
200
|
+
}, this.clearButtonClick = (e) => {
|
|
201
|
+
const t = this.base.initState();
|
|
202
|
+
t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
|
|
203
|
+
}, this.clearValueOnEnterOrEsc = (e) => {
|
|
204
|
+
const t = this.base.initState();
|
|
205
|
+
t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
|
|
206
|
+
}, this.clearValueOnBlur = (e) => {
|
|
207
|
+
const t = this.base.initState();
|
|
208
|
+
t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
|
|
209
|
+
}, this.clearValueOnToggleBtnClick = (e) => {
|
|
210
|
+
const t = this.base.initState();
|
|
211
|
+
t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
|
|
212
212
|
}, this.setValidity = () => {
|
|
213
213
|
this._input && this._input.setCustomValidity && this._input.setCustomValidity(
|
|
214
|
-
this.validity.valid ? "" : this.props.validationMessage ||
|
|
214
|
+
this.validity.valid ? "" : this.props.validationMessage || Se
|
|
215
215
|
);
|
|
216
|
-
}, this.handleFocus = (
|
|
216
|
+
}, this.handleFocus = (e) => {
|
|
217
217
|
if (this._skipFocus)
|
|
218
218
|
return;
|
|
219
|
-
const
|
|
220
|
-
|
|
219
|
+
const t = this.base.initState();
|
|
220
|
+
t.syntheticEvent = e, this.mobileMode && !this._skipFocus && (this._skipFocus = !0, this.base.togglePopup(t), this.applyState(t), setTimeout(() => {
|
|
221
221
|
this._skipFocus = !1;
|
|
222
|
-
}, 300)), this.base.handleFocus(
|
|
223
|
-
}, this.showLicenseWatermark = !
|
|
222
|
+
}, 300)), this.base.handleFocus(e);
|
|
223
|
+
}, this.showLicenseWatermark = !te(H, { component: "ComboBox" }), this.licenseMessage = se(H);
|
|
224
224
|
}
|
|
225
225
|
get _inputId() {
|
|
226
226
|
return this.props.id;
|
|
@@ -237,8 +237,8 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
237
237
|
* The mobile mode of the ComboBox.
|
|
238
238
|
*/
|
|
239
239
|
get mobileMode() {
|
|
240
|
-
var
|
|
241
|
-
return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((
|
|
240
|
+
var e;
|
|
241
|
+
return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((e = this.props._adaptiveMode) == null ? void 0 : e.medium) && this.props.adaptive);
|
|
242
242
|
}
|
|
243
243
|
/**
|
|
244
244
|
* The value of the ComboBox.
|
|
@@ -257,8 +257,8 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
257
257
|
* The index of the selected item.
|
|
258
258
|
*/
|
|
259
259
|
get index() {
|
|
260
|
-
const { dataItemKey: s } = this.props,
|
|
261
|
-
return
|
|
260
|
+
const { dataItemKey: s } = this.props, e = y(this.props), t = this.value;
|
|
261
|
+
return e.findIndex((i) => D(i, t, s));
|
|
262
262
|
}
|
|
263
263
|
/**
|
|
264
264
|
* Gets the `name` property of the ComboBox.
|
|
@@ -270,10 +270,10 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
270
270
|
* Represents the validity state into which the component is set.
|
|
271
271
|
*/
|
|
272
272
|
get validity() {
|
|
273
|
-
const s = this.props.validationMessage !== void 0,
|
|
273
|
+
const s = this.props.validationMessage !== void 0, e = !this.required || this.value !== null && this.value !== "" && this.value !== void 0, t = this.props.valid !== void 0 ? this.props.valid : e;
|
|
274
274
|
return {
|
|
275
275
|
customError: s,
|
|
276
|
-
valid:
|
|
276
|
+
valid: t,
|
|
277
277
|
valueMissing: this.value === null
|
|
278
278
|
};
|
|
279
279
|
}
|
|
@@ -285,28 +285,28 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
285
285
|
return this.props.required !== void 0 ? this.props.required : E.defaultProps.required;
|
|
286
286
|
}
|
|
287
287
|
/** @hidden */
|
|
288
|
-
componentDidUpdate(s,
|
|
288
|
+
componentDidUpdate(s, e) {
|
|
289
289
|
var b, x;
|
|
290
|
-
const { dataItemKey:
|
|
291
|
-
s.data !==
|
|
292
|
-
const
|
|
293
|
-
if (this._valueOnDidUpdate =
|
|
290
|
+
const { dataItemKey: t, virtual: i, groupField: r = "", textField: l } = this.props, o = y(this.props), p = s.virtual ? s.virtual.total : 0, n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = s.opened !== void 0 ? s.opened : e.opened;
|
|
291
|
+
s.data !== o && this.checkForDuplicatePlainTextRecords();
|
|
292
|
+
const d = !a && n, h = this.value;
|
|
293
|
+
if (this._valueOnDidUpdate = h, this.base.didUpdate(), i && i.total !== p)
|
|
294
294
|
this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
|
|
295
295
|
else {
|
|
296
|
-
const C = s.value !== void 0 ? s.value :
|
|
297
|
-
let f = this.hasDuplicates ? this.navigationIndex || 0 :
|
|
298
|
-
this.props.groupMode === "modern" &&
|
|
299
|
-
const u = !D(C,
|
|
300
|
-
if (
|
|
301
|
-
const
|
|
302
|
-
if (
|
|
303
|
-
const { focusedItemIndex: v = P } = this.props, M = v(
|
|
296
|
+
const C = s.value !== void 0 ? s.value : e.value;
|
|
297
|
+
let f = this.hasDuplicates ? this.navigationIndex || 0 : o.findIndex((c) => D(c, h, t));
|
|
298
|
+
this.props.groupMode === "modern" && l && h && (f = (b = this.base.getGroupedDataModernMode(o, r)) == null ? void 0 : b.map((c) => c[l]).indexOf(h[l]));
|
|
299
|
+
const u = !D(C, h, t);
|
|
300
|
+
if (d && i ? this.base.scrollToVirtualItem(i, f) : d && !i ? (this.onPopupOpened(), o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][r], this), this.base.scrollToItem(f)) : (this.hasDuplicates || n && a && h && u) && this.base.scrollToItem(f), n && a && this.scrollToFocused) {
|
|
301
|
+
const c = (x = this.props.filter ? this.props.filter : this.state.text) != null ? x : "";
|
|
302
|
+
if (c) {
|
|
303
|
+
const { focusedItemIndex: v = P } = this.props, M = v(o, c, l);
|
|
304
304
|
this.base.scrollToItem(M);
|
|
305
305
|
} else
|
|
306
306
|
this.base.scrollToItem(0);
|
|
307
307
|
}
|
|
308
308
|
}
|
|
309
|
-
this.scrollToFocused = !1,
|
|
309
|
+
this.scrollToFocused = !1, d && this._input && this._input.focus(), this.setValidity();
|
|
310
310
|
}
|
|
311
311
|
/** @hidden */
|
|
312
312
|
componentDidMount() {
|
|
@@ -323,29 +323,29 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
323
323
|
const s = U(this).toLanguageString(
|
|
324
324
|
q,
|
|
325
325
|
W[q]
|
|
326
|
-
),
|
|
326
|
+
), e = U(this).toLanguageString(
|
|
327
327
|
G,
|
|
328
328
|
W[G]
|
|
329
329
|
), {
|
|
330
|
-
dir:
|
|
330
|
+
dir: t,
|
|
331
331
|
disabled: i,
|
|
332
332
|
clearButton: r = E.defaultProps.clearButton,
|
|
333
|
-
label:
|
|
334
|
-
textField:
|
|
333
|
+
label: l,
|
|
334
|
+
textField: o,
|
|
335
335
|
className: p,
|
|
336
|
-
style:
|
|
337
|
-
loading:
|
|
338
|
-
iconClassName:
|
|
339
|
-
virtual:
|
|
336
|
+
style: n,
|
|
337
|
+
loading: a,
|
|
338
|
+
iconClassName: d,
|
|
339
|
+
virtual: h,
|
|
340
340
|
size: b,
|
|
341
341
|
rounded: x,
|
|
342
342
|
fillMode: C,
|
|
343
343
|
opened: f = this.state.opened,
|
|
344
344
|
placeholder: u,
|
|
345
|
-
svgIcon:
|
|
345
|
+
svgIcon: c,
|
|
346
346
|
unstyled: v
|
|
347
|
-
} = this.props, M = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, $ = w(this.value,
|
|
348
|
-
B.enabled =
|
|
347
|
+
} = this.props, M = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, $ = w(this.value, o), T = k(O) ? O : $, Y = r && (!!T || k(this.value)), B = this.base.vs, N = this.props.id || this._inputId, V = v && v.uComboBox;
|
|
348
|
+
B.enabled = h !== void 0, h !== void 0 && (B.skip = h.skip, B.total = h.total, B.pageSize = h.pageSize);
|
|
349
349
|
const [J, Q] = j(this.props.prefix || g.Fragment), [X, Z] = j(this.props.suffix || g.Fragment), R = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
|
|
350
350
|
"span",
|
|
351
351
|
{
|
|
@@ -357,21 +357,21 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
357
357
|
fillMode: C,
|
|
358
358
|
disabled: i,
|
|
359
359
|
invalid: !M,
|
|
360
|
-
loading:
|
|
360
|
+
loading: a,
|
|
361
361
|
required: this.required
|
|
362
362
|
}),
|
|
363
363
|
p
|
|
364
364
|
),
|
|
365
365
|
ref: this.componentRef,
|
|
366
|
-
style:
|
|
367
|
-
dir:
|
|
366
|
+
style: l ? { ...n, width: void 0 } : n,
|
|
367
|
+
dir: t,
|
|
368
368
|
onFocus: this.handleFocus
|
|
369
369
|
},
|
|
370
370
|
this.props.prefix && /* @__PURE__ */ g.createElement(J, { ...Q }),
|
|
371
371
|
this.renderSearchBar(T || "", N, u),
|
|
372
|
-
Y && !
|
|
373
|
-
|
|
374
|
-
|
|
372
|
+
Y && !a && /* @__PURE__ */ g.createElement(be, { onClick: this.clearButtonClick, key: "clearbutton" }),
|
|
373
|
+
a && /* @__PURE__ */ g.createElement(
|
|
374
|
+
oe,
|
|
375
375
|
{
|
|
376
376
|
className: S(F.loadingIcon({ c: V })),
|
|
377
377
|
name: "loading",
|
|
@@ -380,118 +380,118 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
380
380
|
),
|
|
381
381
|
this.props.suffix && /* @__PURE__ */ g.createElement(X, { ...Z }),
|
|
382
382
|
/* @__PURE__ */ g.createElement(
|
|
383
|
-
|
|
383
|
+
xe,
|
|
384
384
|
{
|
|
385
385
|
tabIndex: -1,
|
|
386
386
|
type: "button",
|
|
387
|
-
"aria-label": f ?
|
|
388
|
-
icon:
|
|
389
|
-
svgIcon:
|
|
390
|
-
iconClass:
|
|
387
|
+
"aria-label": f ? e : s,
|
|
388
|
+
icon: d ? void 0 : "caret-alt-down",
|
|
389
|
+
svgIcon: c || Ie,
|
|
390
|
+
iconClass: d,
|
|
391
391
|
size: b,
|
|
392
392
|
fillMode: C,
|
|
393
393
|
rounded: null,
|
|
394
394
|
themeColor: "base",
|
|
395
395
|
className: S(F.inputButton({ c: V })),
|
|
396
396
|
onClick: this.toggleBtnClick,
|
|
397
|
-
onMouseDown: (
|
|
397
|
+
onMouseDown: (ee) => ee.preventDefault()
|
|
398
398
|
}
|
|
399
399
|
),
|
|
400
400
|
!this.mobileMode && this.renderListContainer()
|
|
401
401
|
), this.mobileMode && this.renderAdaptiveListContainer());
|
|
402
|
-
return
|
|
403
|
-
|
|
402
|
+
return l ? /* @__PURE__ */ g.createElement(
|
|
403
|
+
he,
|
|
404
404
|
{
|
|
405
|
-
label:
|
|
405
|
+
label: l,
|
|
406
406
|
editorId: N,
|
|
407
407
|
editorValue: T,
|
|
408
408
|
editorValid: M,
|
|
409
409
|
editorDisabled: i,
|
|
410
|
-
style: { width:
|
|
410
|
+
style: { width: n ? n.width : void 0 },
|
|
411
411
|
children: R,
|
|
412
412
|
unstyled: v
|
|
413
413
|
}
|
|
414
414
|
) : R;
|
|
415
415
|
}
|
|
416
416
|
/** @hidden */
|
|
417
|
-
onNavigate(s,
|
|
418
|
-
const { virtual: i = { skip: 0 } } = this.props, r = y(this.props),
|
|
419
|
-
let
|
|
420
|
-
const
|
|
417
|
+
onNavigate(s, e, t) {
|
|
418
|
+
const { virtual: i = { skip: 0 } } = this.props, r = y(this.props), l = this.props.filter ? this.props.filter : this.state.text;
|
|
419
|
+
let o = -1, p;
|
|
420
|
+
const n = this.base.vs, a = this.value;
|
|
421
421
|
this._suggested = "";
|
|
422
|
-
const
|
|
423
|
-
if (
|
|
424
|
-
this.handleItemSelect(
|
|
425
|
-
else if (
|
|
422
|
+
const d = this.hasDuplicates && this.duplicates.indexOf(a) !== -1;
|
|
423
|
+
if (o = this.getFocusedIndex(d), o !== -1 && !k(a))
|
|
424
|
+
this.handleItemSelect(o, s);
|
|
425
|
+
else if (l === "")
|
|
426
426
|
this.handleItemSelect(0, s);
|
|
427
427
|
else {
|
|
428
|
-
const
|
|
428
|
+
const h = i.skip + o;
|
|
429
429
|
p = this.base.navigation.navigate({
|
|
430
|
-
keyCode:
|
|
431
|
-
current:
|
|
432
|
-
max: (
|
|
430
|
+
keyCode: e,
|
|
431
|
+
current: h,
|
|
432
|
+
max: (n.enabled ? n.total : r.length) - 1,
|
|
433
433
|
min: 0,
|
|
434
|
-
skipItems:
|
|
434
|
+
skipItems: t || void 0
|
|
435
435
|
}), p !== void 0 && this.handleItemSelect(p, s);
|
|
436
436
|
}
|
|
437
437
|
this.navigationIndex = p;
|
|
438
438
|
}
|
|
439
|
-
getCurrentValueDisabledStatus(s,
|
|
440
|
-
return s &&
|
|
439
|
+
getCurrentValueDisabledStatus(s, e, t) {
|
|
440
|
+
return s && e && e[t] && e[t].disabled;
|
|
441
441
|
}
|
|
442
|
-
applyValueOnEnter(s,
|
|
443
|
-
const { textField:
|
|
444
|
-
let
|
|
445
|
-
if (this._suggested = "",
|
|
446
|
-
|
|
442
|
+
applyValueOnEnter(s, e) {
|
|
443
|
+
const { textField: t, allowCustom: i, ignoreCase: r } = this.props, l = y(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = w(this.value, t) === s ? this.index : z(l, s, t, !1, r), a = n !== -1;
|
|
444
|
+
let d;
|
|
445
|
+
if (this._suggested = "", a)
|
|
446
|
+
d = l[n];
|
|
447
447
|
else if (i)
|
|
448
|
-
|
|
448
|
+
d = t !== void 0 ? { [t]: s } : s;
|
|
449
449
|
else
|
|
450
|
-
return this.selectFocusedItem(s,
|
|
451
|
-
this.triggerOnChange(
|
|
450
|
+
return this.selectFocusedItem(s, e);
|
|
451
|
+
this.triggerOnChange(d, e), o && this.base.togglePopup(e), this.props.filter === void 0 && this.state.text !== void 0 && (e.data.text = void 0), this.applyState(e);
|
|
452
452
|
}
|
|
453
|
-
applyValueOnRejectSuggestions(s,
|
|
454
|
-
const { textField:
|
|
455
|
-
if (this._suggested = "", s ===
|
|
456
|
-
return this.closeOpenedApplyStateNonMobileMode(
|
|
457
|
-
const
|
|
458
|
-
let
|
|
459
|
-
|
|
453
|
+
applyValueOnRejectSuggestions(s, e) {
|
|
454
|
+
const { textField: t, allowCustom: i, ignoreCase: r } = this.props, l = y(this.props), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = w(this.value, t);
|
|
455
|
+
if (this._suggested = "", s === p || s === "" && !k(p))
|
|
456
|
+
return this.closeOpenedApplyStateNonMobileMode(e, o), this.applyState(e);
|
|
457
|
+
const n = z(l, s, t, !0, r), a = n !== -1;
|
|
458
|
+
let d = null;
|
|
459
|
+
a ? d = l[n] : i && (d = s ? t ? { [t]: s } : s : null), this.triggerOnChange(d, e), this.state.text !== void 0 && (e.data.text = void 0, this.base.filterChanged("", e)), this.closeOpenedApplyStateNonMobileMode(e, o), this.applyState(e);
|
|
460
460
|
}
|
|
461
|
-
selectFocusedItem(s,
|
|
462
|
-
const
|
|
463
|
-
return
|
|
461
|
+
selectFocusedItem(s, e) {
|
|
462
|
+
const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { textField: i, virtual: r = { skip: 0 }, focusedItemIndex: l = P } = this.props, o = y(this.props), p = r.skip, n = s === "" && p === 0 ? 0 : l(o, s, i);
|
|
463
|
+
return n !== -1 ? this.handleItemSelect(n + p, e) : (this.triggerOnChange(null, e), this.state.text !== void 0 && (e.data.text = void 0)), t && this.base.togglePopup(e), this.applyState(e);
|
|
464
464
|
}
|
|
465
465
|
renderAdaptiveListContainer() {
|
|
466
|
-
const { windowWidth: s = 0 } = this.state, { groupField:
|
|
467
|
-
let { group:
|
|
468
|
-
|
|
466
|
+
const { windowWidth: s = 0 } = this.state, { groupField: e, adaptiveTitle: t = this.props.label, adaptiveSubtitle: i } = this.props, r = y(this.props), l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
|
|
467
|
+
let { group: o } = this.state;
|
|
468
|
+
o === void 0 && e !== void 0 && (o = w(r[0], e));
|
|
469
469
|
const p = {
|
|
470
|
-
title:
|
|
470
|
+
title: t || this.props.label,
|
|
471
471
|
subTitle: i,
|
|
472
|
-
expand:
|
|
473
|
-
onClose: (
|
|
472
|
+
expand: l,
|
|
473
|
+
onClose: (n) => this.toggleBtnClick(n),
|
|
474
474
|
windowWidth: s,
|
|
475
475
|
mobileFilter: this.renderMobileListFilter()
|
|
476
476
|
};
|
|
477
|
-
return /* @__PURE__ */ g.createElement(
|
|
477
|
+
return /* @__PURE__ */ g.createElement(Ce, { ...p }, /* @__PURE__ */ g.createElement(ye, null, /* @__PURE__ */ g.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
|
|
478
478
|
}
|
|
479
479
|
renderListContainer() {
|
|
480
480
|
const s = this.base, {
|
|
481
|
-
dir:
|
|
482
|
-
header:
|
|
481
|
+
dir: e,
|
|
482
|
+
header: t,
|
|
483
483
|
footer: i,
|
|
484
484
|
groupField: r,
|
|
485
|
-
groupMode:
|
|
486
|
-
size:
|
|
485
|
+
groupMode: l,
|
|
486
|
+
size: o,
|
|
487
487
|
list: p,
|
|
488
|
-
virtual:
|
|
489
|
-
groupStickyHeaderItemRender:
|
|
490
|
-
unstyled:
|
|
491
|
-
} = this.props,
|
|
488
|
+
virtual: n,
|
|
489
|
+
groupStickyHeaderItemRender: a,
|
|
490
|
+
unstyled: d
|
|
491
|
+
} = this.props, h = y(this.props), b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = s.getPopupSettings(), C = x.width !== void 0 ? x.width : s.popupWidth, f = d && d.uComboBox;
|
|
492
492
|
let { group: u } = this.state;
|
|
493
|
-
return u === void 0 && r !== void 0 && (u = w(
|
|
494
|
-
|
|
493
|
+
return u === void 0 && r !== void 0 && (u = w(h[0], r)), /* @__PURE__ */ g.createElement(
|
|
494
|
+
me,
|
|
495
495
|
{
|
|
496
496
|
width: C,
|
|
497
497
|
popupSettings: {
|
|
@@ -506,8 +506,8 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
506
506
|
})
|
|
507
507
|
)
|
|
508
508
|
},
|
|
509
|
-
dir:
|
|
510
|
-
itemsCount: [
|
|
509
|
+
dir: e !== void 0 ? e : this.base.dirCalculated,
|
|
510
|
+
itemsCount: [h.length]
|
|
511
511
|
},
|
|
512
512
|
/* @__PURE__ */ g.createElement(
|
|
513
513
|
"div",
|
|
@@ -516,14 +516,14 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
516
516
|
F.list({
|
|
517
517
|
c: f,
|
|
518
518
|
list: p,
|
|
519
|
-
size:
|
|
520
|
-
tableSize:
|
|
521
|
-
virtual:
|
|
519
|
+
size: o,
|
|
520
|
+
tableSize: o,
|
|
521
|
+
virtual: n
|
|
522
522
|
})
|
|
523
523
|
)
|
|
524
524
|
},
|
|
525
|
-
|
|
526
|
-
!p && u &&
|
|
525
|
+
t && /* @__PURE__ */ g.createElement("div", { className: S(F.listHeader({ c: f })) }, t),
|
|
526
|
+
!p && u && h.length !== 0 && /* @__PURE__ */ g.createElement(K, { group: u, groupMode: l, render: a }),
|
|
527
527
|
this.renderList(),
|
|
528
528
|
i && /* @__PURE__ */ g.createElement(
|
|
529
529
|
"div",
|
|
@@ -536,107 +536,107 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
536
536
|
i
|
|
537
537
|
)
|
|
538
538
|
),
|
|
539
|
-
this.showLicenseWatermark && /* @__PURE__ */ g.createElement(
|
|
539
|
+
this.showLicenseWatermark && /* @__PURE__ */ g.createElement(ae, { message: this.licenseMessage })
|
|
540
540
|
);
|
|
541
541
|
}
|
|
542
542
|
renderList() {
|
|
543
543
|
const s = this.base, {
|
|
544
|
-
textField:
|
|
545
|
-
dataItemKey:
|
|
544
|
+
textField: e,
|
|
545
|
+
dataItemKey: t,
|
|
546
546
|
listNoDataRender: i,
|
|
547
547
|
itemRender: r,
|
|
548
|
-
groupHeaderItemRender:
|
|
549
|
-
virtual:
|
|
548
|
+
groupHeaderItemRender: l,
|
|
549
|
+
virtual: o = { skip: 0, total: void 0 },
|
|
550
550
|
unstyled: p
|
|
551
|
-
} = this.props,
|
|
551
|
+
} = this.props, n = y(this.props), a = s.getPopupSettings(), d = s.vs, h = o.skip, b = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = `translateY(${d.translate}px)`, C = b ? this.getFocusedIndex(this.hasDuplicates) : void 0, f = this.props.filter !== void 0 ? this.props.filter : this.state.text, u = w(this.value, e), c = k(f) && f !== u ? null : this.value, v = this.props.list || fe, M = p && p.uComboBox;
|
|
552
552
|
return /* @__PURE__ */ g.createElement(
|
|
553
553
|
v,
|
|
554
554
|
{
|
|
555
555
|
id: s.listBoxId,
|
|
556
|
-
virtual: !!
|
|
556
|
+
virtual: !!o,
|
|
557
557
|
show: b,
|
|
558
|
-
data:
|
|
558
|
+
data: n,
|
|
559
559
|
focusedIndex: C,
|
|
560
|
-
value:
|
|
561
|
-
textField:
|
|
562
|
-
valueField:
|
|
560
|
+
value: c,
|
|
561
|
+
textField: e,
|
|
562
|
+
valueField: t,
|
|
563
563
|
groupField: this.props.groupField,
|
|
564
564
|
groupMode: this.props.groupMode,
|
|
565
565
|
isMultiColumn: this.props.isMultiColumn,
|
|
566
566
|
optionsGuid: s.guid,
|
|
567
567
|
hasDuplicates: this.hasDuplicates,
|
|
568
568
|
listRef: (O) => {
|
|
569
|
-
|
|
569
|
+
d.list = this.base.list = O, this.itemHeight = 0;
|
|
570
570
|
},
|
|
571
|
-
wrapperStyle: this.mobileMode ? {} : { maxHeight:
|
|
571
|
+
wrapperStyle: this.mobileMode ? {} : { maxHeight: a.height },
|
|
572
572
|
wrapperCssClass: S(
|
|
573
573
|
F.listContent({
|
|
574
574
|
c: M,
|
|
575
|
-
virtual:
|
|
575
|
+
virtual: o
|
|
576
576
|
})
|
|
577
577
|
),
|
|
578
|
-
listStyle:
|
|
578
|
+
listStyle: d.enabled ? { transform: x } : void 0,
|
|
579
579
|
key: "listkey",
|
|
580
|
-
skip:
|
|
580
|
+
skip: h,
|
|
581
581
|
onClick: this.handleItemClick,
|
|
582
582
|
itemRender: r,
|
|
583
|
-
groupHeaderItemRender:
|
|
583
|
+
groupHeaderItemRender: l,
|
|
584
584
|
noDataRender: i,
|
|
585
585
|
onMouseDown: (O) => O.preventDefault(),
|
|
586
586
|
onScroll: this.onScroll,
|
|
587
|
-
wrapperRef:
|
|
587
|
+
wrapperRef: d.scrollerRef,
|
|
588
588
|
scroller: this.base.renderScrollElement(),
|
|
589
|
-
ariaSetSize:
|
|
589
|
+
ariaSetSize: o.total
|
|
590
590
|
}
|
|
591
591
|
);
|
|
592
592
|
}
|
|
593
|
-
renderSearchBar(s,
|
|
593
|
+
renderSearchBar(s, e, t) {
|
|
594
594
|
const {
|
|
595
595
|
tabIndex: i,
|
|
596
596
|
accessKey: r,
|
|
597
|
-
disabled:
|
|
598
|
-
title:
|
|
597
|
+
disabled: l,
|
|
598
|
+
title: o,
|
|
599
599
|
ariaLabelledBy: p,
|
|
600
|
-
ariaDescribedBy:
|
|
601
|
-
dataItemKey:
|
|
602
|
-
virtual:
|
|
603
|
-
unstyled:
|
|
600
|
+
ariaDescribedBy: n,
|
|
601
|
+
dataItemKey: a,
|
|
602
|
+
virtual: d = { skip: 0 },
|
|
603
|
+
unstyled: h,
|
|
604
604
|
inputAttributes: b
|
|
605
605
|
} = this.props, x = y(this.props), C = this.props.opened !== void 0 ? this.props.opened : this.state.opened, f = this.value, u = Math.max(
|
|
606
606
|
0,
|
|
607
|
-
x.findIndex((
|
|
607
|
+
x.findIndex((c) => D(c, f, a))
|
|
608
608
|
);
|
|
609
|
-
return this._suggested && !D(this._valueOnDidUpdate, f,
|
|
610
|
-
|
|
609
|
+
return this._suggested && !D(this._valueOnDidUpdate, f, a) && (this._suggested = ""), /* @__PURE__ */ g.createElement(
|
|
610
|
+
ge,
|
|
611
611
|
{
|
|
612
|
-
id:
|
|
612
|
+
id: e,
|
|
613
613
|
readOnly: C && this.mobileMode,
|
|
614
|
-
placeholder:
|
|
614
|
+
placeholder: t,
|
|
615
615
|
tabIndex: i,
|
|
616
616
|
accessKey: r,
|
|
617
|
-
title:
|
|
617
|
+
title: o,
|
|
618
618
|
value: s + this._suggested,
|
|
619
619
|
suggestedText: this._suggested,
|
|
620
|
-
ref: (
|
|
621
|
-
this._input =
|
|
620
|
+
ref: (c) => {
|
|
621
|
+
this._input = c && c.input;
|
|
622
622
|
},
|
|
623
623
|
onClick: this.onInputClick,
|
|
624
624
|
onKeyDown: this.onInputKeyDown,
|
|
625
625
|
onChange: this.inputOnChange,
|
|
626
626
|
onFocus: this.base.handleFocus,
|
|
627
627
|
onBlur: this.handleBlur,
|
|
628
|
-
disabled:
|
|
628
|
+
disabled: l,
|
|
629
629
|
expanded: C,
|
|
630
630
|
owns: this.base.listBoxId,
|
|
631
|
-
activedescendant: `option-${this.base.guid}-${u +
|
|
631
|
+
activedescendant: `option-${this.base.guid}-${u + d.skip}`,
|
|
632
632
|
role: "combobox",
|
|
633
633
|
ariaLabelledBy: p,
|
|
634
634
|
ariaLabel: this.props.ariaLabel,
|
|
635
|
-
ariaDescribedBy:
|
|
635
|
+
ariaDescribedBy: n,
|
|
636
636
|
ariaRequired: this.required,
|
|
637
637
|
render: this.props.valueRender,
|
|
638
638
|
ariaControls: this.base.listBoxId,
|
|
639
|
-
unstyled:
|
|
639
|
+
unstyled: h,
|
|
640
640
|
inputAttributes: b
|
|
641
641
|
}
|
|
642
642
|
);
|
|
@@ -644,33 +644,33 @@ const St = "Please enter a valid value!", E = class E extends g.Component {
|
|
|
644
644
|
clearValue() {
|
|
645
645
|
const s = this.base.initState();
|
|
646
646
|
this._suggested = "", this.navigationIndex = void 0, this.base.filterChanged("", s), this.props.filter === void 0 && this.state.text !== void 0 && (s.data.text = void 0), this.triggerOnChange(null, s);
|
|
647
|
-
const
|
|
648
|
-
|
|
647
|
+
const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, t = this.mobileMode;
|
|
648
|
+
e && !t && this.base.togglePopup(s), this.applyState(s);
|
|
649
649
|
}
|
|
650
|
-
triggerOnChange(s,
|
|
651
|
-
const
|
|
652
|
-
!this.hasDuplicates && (!k(
|
|
650
|
+
triggerOnChange(s, e) {
|
|
651
|
+
const t = this.value;
|
|
652
|
+
!this.hasDuplicates && (!k(t) && !k(s) || D(t, s, this.props.dataItemKey)) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
|
|
653
653
|
}
|
|
654
654
|
getFocusedIndex(s) {
|
|
655
|
-
const
|
|
656
|
-
textField:
|
|
655
|
+
const e = this.value, {
|
|
656
|
+
textField: t,
|
|
657
657
|
dataItemKey: i,
|
|
658
658
|
virtual: r = { skip: 0 },
|
|
659
|
-
focusedItemIndex:
|
|
660
|
-
skipDisabledItems:
|
|
661
|
-
} = this.props, p = y(this.props),
|
|
662
|
-
return s && this.navigationIndex !== void 0 ? this.navigationIndex : k(
|
|
659
|
+
focusedItemIndex: l = P,
|
|
660
|
+
skipDisabledItems: o
|
|
661
|
+
} = this.props, p = y(this.props), n = this.props.filter ? this.props.filter : this.state.text;
|
|
662
|
+
return s && this.navigationIndex !== void 0 ? this.navigationIndex : k(e) && n === void 0 ? p.findIndex((a) => D(a, e, i)) : n ? l(p, n, t) : o && t && !n && r.skip === 0 ? p.findIndex((a) => !a.disabled && a[t]) : r.skip === 0 ? 0 : -1;
|
|
663
663
|
}
|
|
664
664
|
suggestValue(s) {
|
|
665
|
-
const { data:
|
|
666
|
-
this._suggested =
|
|
665
|
+
const { data: e, textField: t } = this.props;
|
|
666
|
+
this._suggested = ue(s, e, t);
|
|
667
667
|
}
|
|
668
668
|
applyState(s) {
|
|
669
669
|
this.base.applyState(s), this._valueDuringOnChange = void 0;
|
|
670
670
|
}
|
|
671
671
|
calculateMedia(s) {
|
|
672
|
-
for (const
|
|
673
|
-
this.setState({ windowWidth:
|
|
672
|
+
for (const e of s)
|
|
673
|
+
this.setState({ windowWidth: e.target.clientWidth });
|
|
674
674
|
}
|
|
675
675
|
};
|
|
676
676
|
E.displayName = "ComboBox", E.propTypes = {
|
|
@@ -686,9 +686,10 @@ E.displayName = "ComboBox", E.propTypes = {
|
|
|
686
686
|
placeholder: m.string,
|
|
687
687
|
title: m.string,
|
|
688
688
|
allowCustom: m.bool,
|
|
689
|
+
ignoreCase: m.bool,
|
|
689
690
|
clearButton: m.bool,
|
|
690
691
|
iconClassName: m.string,
|
|
691
|
-
svgIcon:
|
|
692
|
+
svgIcon: ie,
|
|
692
693
|
validationMessage: m.string,
|
|
693
694
|
required: m.bool,
|
|
694
695
|
id: m.string,
|
|
@@ -705,6 +706,7 @@ E.displayName = "ComboBox", E.propTypes = {
|
|
|
705
706
|
rounded: "medium",
|
|
706
707
|
fillMode: "solid",
|
|
707
708
|
allowCustom: !1,
|
|
709
|
+
ignoreCase: !1,
|
|
708
710
|
clearButton: !0,
|
|
709
711
|
required: !1,
|
|
710
712
|
groupMode: "modern",
|
|
@@ -714,17 +716,17 @@ E.displayName = "ComboBox", E.propTypes = {
|
|
|
714
716
|
suffix: void 0
|
|
715
717
|
};
|
|
716
718
|
let L = E;
|
|
717
|
-
const
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
719
|
+
const Fe = ne(), ke = le(
|
|
720
|
+
re(
|
|
721
|
+
Fe,
|
|
722
|
+
pe(
|
|
723
|
+
de(L)
|
|
722
724
|
)
|
|
723
725
|
)
|
|
724
726
|
);
|
|
725
|
-
|
|
727
|
+
ke.displayName = "KendoReactComboBox";
|
|
726
728
|
export {
|
|
727
|
-
|
|
728
|
-
|
|
729
|
+
ke as ComboBox,
|
|
730
|
+
Fe as ComboBoxPropsContext,
|
|
729
731
|
L as ComboBoxWithoutContext
|
|
730
732
|
};
|