@progress/kendo-react-dropdowns 8.1.0-develop.9 → 8.1.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/AutoComplete/AutoComplete.js +1 -1
- package/AutoComplete/AutoComplete.mjs +39 -39
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +1 -1
- package/DropDownList/DropDownList.js +1 -1
- package/DropDownList/DropDownList.mjs +3 -3
- package/DropDownTree/DropDownTree.js +1 -1
- package/DropDownTree/DropDownTree.mjs +1 -1
- package/MultiColumnComboBox/MultiColumnComboBox.js +1 -1
- package/MultiColumnComboBox/MultiColumnComboBox.mjs +82 -81
- package/MultiSelect/MultiSelect.js +1 -1
- package/MultiSelect/MultiSelect.mjs +3 -3
- package/MultiSelectTree/MultiSelectTree.js +1 -1
- package/MultiSelectTree/MultiSelectTree.mjs +226 -224
- package/dist/cdn/js/kendo-react-dropdowns.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +9 -9
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ue=require("react"),ie=require("prop-types"),de=require("@progress/kendo-react-popup"),ce=require("../common/MultiColumnList.js"),i=require("@progress/kendo-react-common"),j=require("../ComboBox/ComboBox.js"),pe=require("../common/utils.js"),K=require("../common/withCustomComponent.js");function me(a){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(d,e,c.get?c:{enumerable:!0,get:()=>a[e]})}}return d.default=a,Object.freeze(d)}const t=me(ue),ge=(a,d)=>a?typeof a=="number"?a+"px":a:d,G=i.createPropsContext(),y=t.forwardRef((a,d)=>{const e=i.usePropsContext(G,a),c=t.useRef(null),n=t.useRef(null),w=i.getScrollbarWidth(),{columns:l=u.columns,popupSettings:f=u.popupSettings,size:W=u.size,rounded:z=u.rounded,fillMode:L=u.fillMode,className:_,prefix:$=void 0,suffix:D=void 0,onOpen:M,onClose:S,onFocus:E,onBlur:F,onChange:N,onFilterChange:R,onPageChange:H,...V}=e;t.useImperativeHandle(c,()=>({element:n.current&&n.current.element,focus(){n.current&&n.current.focus()},get value(){return n.current&&n.current.value},get name(){return n.current&&n.current.name},props:e})),t.useImperativeHandle(d,()=>c.current);const g=t.useMemo(()=>{if(e.groupField!==void 0&&e.data)return pe.getItemValue(e.data[0],e.groupField)},[e.data,e.groupField]),[k,C]=t.useState(g),[q,B]=t.useState(!0),[A]=$?K(e.prefix||t.Fragment):[],[J]=D?K(e.suffix||t.Fragment):[],Q=t.useMemo(()=>{const o=t.createElement("th",{className:"k-table-th",colSpan:l.length},k);return t.createElement(t.Fragment,null,e.header,t.createElement("div",{className:"k-table-header-wrap"},t.createElement("table",{className:"k-table",role:"presentation"},t.createElement("colgroup",null,l.map((r,p)=>t.createElement("col",{key:r.uniqueKey?r.uniqueKey:p,style:{width:r.width?r.width:u.width}}))),t.createElement("thead",{className:"k-table-thead"},t.createElement("tr",{className:"k-table-row"},l.map((r,p)=>t.createElement("th",{className:"k-table-th",key:r.uniqueKey?r.uniqueKey:p},r.header||" "))),k&&q&&t.createElement("tr",{className:"k-table-group-row"},e.groupStickyHeaderItemRender?e.groupStickyHeaderItemRender.call(void 0,o,{}):o)))))},[e.header,l,k,q]),U=t.useMemo(()=>`calc(${l.map(o=>ge(o.width,u.width)).filter(Boolean).join(" + ")} + ${w}px + 4px)`,[l,w]),P=e.virtual?e.virtual.skip:0,X=t.useCallback((o,r)=>{const p=l.map((m,se)=>t.createElement("span",{className:e.itemRender?void 0:"k-table-td",style:e.itemRender?void 0:{width:m.width?m.width:u.width},key:m.uniqueKey?m.uniqueKey:se},m.field?String(i.getter(m.field)(r.dataItem)):""));let b,h,v,x,I=e.data||[];const O=r.index-P;e.groupField!==void 0&&(x=i.getter(e.groupField),h=x(I[O]),v=x(I[O-1]),h&&v&&h!==v&&(b=h)),b&&e.groupMode==="classic"&&p.push(t.createElement("div",{key:"group",className:"k-table-td k-table-group-td"},t.createElement("span",null,b)));const T=t.cloneElement(o,{...o.props,className:i.classNames("k-table-row",{"k-table-alt-row":r.index%2!==0,"k-focus":r.focused,"k-selected":r.selected,"k-first":!!b,"k-disabled":r.dataItem.disabled})},p);return e.itemRender?e.itemRender.call(void 0,T,r):T},[l,e.groupField,e.itemRender,e.data,P]),s=t.useCallback((o,r)=>{o&&o.call(void 0,{...r,target:c.current})},[]),Y=t.useCallback(o=>(e.virtual||C(g),s(M,o)),[s,M,e.virtual,g]),Z=t.useCallback(o=>s(S,o),[S]),ee=t.useCallback(o=>s(E,o),[E]),te=t.useCallback(o=>s(F,o),[F]),oe=t.useCallback(o=>s(N,o),[N]),re=t.useCallback(o=>s(H,o),[H]),ae=t.useCallback(o=>(C(g),s(R,{...o,mobileMode:o.target.mobileMode})),[R]),ne=t.useCallback(o=>{C(o.group)},[]);t.useEffect(()=>{i.setScrollbarWidth()}),t.useEffect(()=>{const o=e.data;C(g),o&&o.length!==0?B(!0):B(!1)},[e.data]);const le=t.useCallback(o=>t.createElement(ce.MultiColumnList,{...o}),[]);return t.createElement(de.PopupPropsContext.Provider,{value:o=>({...o,popupClass:`k-dropdowngrid-popup ${f.popupClass}`})},t.createElement(j.ComboBox,{...V,list:le,popupSettings:{...f,width:f.width||U,className:f.className},ref:n,header:Q,itemRender:X,groupHeaderItemRender:e.groupHeaderItemRender,size:W,rounded:z,fillMode:L,groupMode:e.groupMode,groupField:e.groupField,isMultiColumn:!0,onOpen:Y,onClose:Z,onFocus:ee,onBlur:te,onChange:oe,onFilterChange:ae,onPageChange:re,onGroupScroll:ne,className:i.classNames("k-dropdowngrid",_),required:e.required,adaptive:e.adaptive,adaptiveFilter:e.adaptiveFilter,adaptiveTitle:e.adaptiveTitle,footer:e.footer,footerClassName:"k-table-footer",prefix:A,suffix:J}))}),fe={...j.ComboBoxWithoutContext.propTypes,columns:ie.any.isRequired},u={columns:[],popupSettings:{},width:"200px",size:"medium",rounded:"medium",fillMode:"solid"};y.displayName="KendoMultiColumnComboBox";y.propTypes=fe;exports.MultiColumnComboBox=y;exports.MultiColumnComboBoxPropsContext=G;
|
|
@@ -7,29 +7,31 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as e from "react";
|
|
10
|
-
import
|
|
11
|
-
import { PopupPropsContext as
|
|
12
|
-
import { MultiColumnList as
|
|
13
|
-
import { createPropsContext as
|
|
14
|
-
import { ComboBox as
|
|
15
|
-
import { getItemValue as
|
|
16
|
-
import
|
|
17
|
-
const
|
|
18
|
-
const t =
|
|
19
|
-
columns: n =
|
|
20
|
-
popupSettings: p =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
10
|
+
import se from "prop-types";
|
|
11
|
+
import { PopupPropsContext as ue } from "@progress/kendo-react-popup";
|
|
12
|
+
import { MultiColumnList as ie } from "../common/MultiColumnList.mjs";
|
|
13
|
+
import { createPropsContext as de, usePropsContext as ce, getScrollbarWidth as pe, getter as P, classNames as G, setScrollbarWidth as me } from "@progress/kendo-react-common";
|
|
14
|
+
import { ComboBox as fe, ComboBoxWithoutContext as ge } from "../ComboBox/ComboBox.mjs";
|
|
15
|
+
import { getItemValue as he } from "../common/utils.mjs";
|
|
16
|
+
import T from "../common/withCustomComponent.mjs";
|
|
17
|
+
const Ce = (u, h) => u ? typeof u == "number" ? u + "px" : u : h, ke = de(), W = e.forwardRef((u, h) => {
|
|
18
|
+
const t = ce(ke, u), C = e.useRef(null), a = e.useRef(null), x = pe(), {
|
|
19
|
+
columns: n = s.columns,
|
|
20
|
+
popupSettings: p = s.popupSettings,
|
|
21
|
+
size: z = s.size,
|
|
22
|
+
rounded: O = s.rounded,
|
|
23
|
+
fillMode: $ = s.fillMode,
|
|
24
|
+
className: L,
|
|
25
|
+
prefix: j = void 0,
|
|
26
|
+
suffix: V = void 0,
|
|
27
|
+
onOpen: y,
|
|
28
|
+
onClose: w,
|
|
29
|
+
onFocus: E,
|
|
30
|
+
onBlur: F,
|
|
31
|
+
onChange: H,
|
|
32
|
+
onFilterChange: N,
|
|
33
|
+
onPageChange: S,
|
|
34
|
+
...A
|
|
33
35
|
} = t;
|
|
34
36
|
e.useImperativeHandle(C, () => ({
|
|
35
37
|
element: a.current && a.current.element,
|
|
@@ -47,56 +49,56 @@ const fe = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, ge = se(), x =
|
|
|
47
49
|
const c = e.useMemo(
|
|
48
50
|
() => {
|
|
49
51
|
if (t.groupField !== void 0 && t.data)
|
|
50
|
-
return
|
|
52
|
+
return he(t.data[0], t.groupField);
|
|
51
53
|
},
|
|
52
54
|
[t.data, t.groupField]
|
|
53
|
-
), [k, m] = e.useState(c), [
|
|
55
|
+
), [k, m] = e.useState(c), [M, R] = e.useState(!0), [D] = j ? T(t.prefix || e.Fragment) : [], [J] = V ? T(t.suffix || e.Fragment) : [], Q = e.useMemo(
|
|
54
56
|
() => {
|
|
55
57
|
const r = /* @__PURE__ */ e.createElement("th", { className: "k-table-th", colSpan: n.length }, k);
|
|
56
58
|
return /* @__PURE__ */ e.createElement(e.Fragment, null, t.header, /* @__PURE__ */ e.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ e.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ e.createElement("colgroup", null, n.map(
|
|
57
|
-
(o,
|
|
59
|
+
(o, i) => /* @__PURE__ */ e.createElement(
|
|
58
60
|
"col",
|
|
59
61
|
{
|
|
60
|
-
key: o.uniqueKey ? o.uniqueKey :
|
|
61
|
-
style: { width: o.width ? o.width :
|
|
62
|
+
key: o.uniqueKey ? o.uniqueKey : i,
|
|
63
|
+
style: { width: o.width ? o.width : s.width }
|
|
62
64
|
}
|
|
63
65
|
)
|
|
64
|
-
)), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, n.map((o,
|
|
66
|
+
)), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, n.map((o, i) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: o.uniqueKey ? o.uniqueKey : i }, o.header || " "))), k && M && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, r, {}) : r)))));
|
|
65
67
|
},
|
|
66
|
-
[t.header, n, k,
|
|
67
|
-
),
|
|
68
|
+
[t.header, n, k, M]
|
|
69
|
+
), U = e.useMemo(
|
|
68
70
|
() => (
|
|
69
71
|
// These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
|
|
70
|
-
`calc(${n.map((r) =>
|
|
72
|
+
`calc(${n.map((r) => Ce(r.width, s.width)).filter(Boolean).join(" + ")} + ${x}px + 4px)`
|
|
71
73
|
),
|
|
72
|
-
[n,
|
|
73
|
-
),
|
|
74
|
+
[n, x]
|
|
75
|
+
), B = t.virtual ? t.virtual.skip : 0, X = e.useCallback(
|
|
74
76
|
(r, o) => {
|
|
75
|
-
const
|
|
77
|
+
const i = n.map((d, le) => /* @__PURE__ */ e.createElement(
|
|
76
78
|
"span",
|
|
77
79
|
{
|
|
78
80
|
className: t.itemRender ? void 0 : "k-table-td",
|
|
79
|
-
style: t.itemRender ? void 0 : { width:
|
|
80
|
-
key:
|
|
81
|
+
style: t.itemRender ? void 0 : { width: d.width ? d.width : s.width },
|
|
82
|
+
key: d.uniqueKey ? d.uniqueKey : le
|
|
81
83
|
},
|
|
82
|
-
|
|
84
|
+
d.field ? String(P(d.field)(o.dataItem)) : ""
|
|
83
85
|
));
|
|
84
|
-
let f, g, b, v,
|
|
85
|
-
const
|
|
86
|
-
t.groupField !== void 0 && (v =
|
|
87
|
-
const
|
|
86
|
+
let f, g, b, v, q = t.data || [];
|
|
87
|
+
const I = o.index - B;
|
|
88
|
+
t.groupField !== void 0 && (v = P(t.groupField), g = v(q[I]), b = v(q[I - 1]), g && b && g !== b && (f = g)), f && t.groupMode === "classic" && i.push(/* @__PURE__ */ e.createElement("div", { key: "group", className: "k-table-td k-table-group-td" }, /* @__PURE__ */ e.createElement("span", null, f)));
|
|
89
|
+
const K = e.cloneElement(r, {
|
|
88
90
|
...r.props,
|
|
89
|
-
className:
|
|
91
|
+
className: G("k-table-row", {
|
|
90
92
|
"k-table-alt-row": o.index % 2 !== 0,
|
|
91
93
|
"k-focus": o.focused,
|
|
92
94
|
"k-selected": o.selected,
|
|
93
95
|
"k-first": !!f,
|
|
94
96
|
"k-disabled": o.dataItem.disabled
|
|
95
97
|
})
|
|
96
|
-
},
|
|
97
|
-
return t.itemRender ? t.itemRender.call(void 0,
|
|
98
|
+
}, i);
|
|
99
|
+
return t.itemRender ? t.itemRender.call(void 0, K, o) : K;
|
|
98
100
|
},
|
|
99
|
-
[n, t.groupField, t.itemRender, t.data,
|
|
101
|
+
[n, t.groupField, t.itemRender, t.data, B]
|
|
100
102
|
), l = e.useCallback(
|
|
101
103
|
(r, o) => {
|
|
102
104
|
r && r.call(void 0, {
|
|
@@ -105,71 +107,71 @@ const fe = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, ge = se(), x =
|
|
|
105
107
|
});
|
|
106
108
|
},
|
|
107
109
|
[]
|
|
108
|
-
),
|
|
110
|
+
), Y = e.useCallback((r) => (t.virtual || m(c), l(y, r)), [l, y, t.virtual, c]), Z = e.useCallback((r) => l(w, r), [w]), _ = e.useCallback((r) => l(E, r), [E]), ee = e.useCallback((r) => l(F, r), [F]), te = e.useCallback((r) => l(H, r), [H]), re = e.useCallback((r) => l(S, r), [S]), oe = e.useCallback((r) => (m(c), l(N, {
|
|
109
111
|
...r,
|
|
110
112
|
mobileMode: r.target.mobileMode
|
|
111
|
-
})), [
|
|
113
|
+
})), [N]), ae = e.useCallback(
|
|
112
114
|
(r) => {
|
|
113
115
|
m(r.group);
|
|
114
116
|
},
|
|
115
117
|
[]
|
|
116
118
|
);
|
|
117
119
|
e.useEffect(() => {
|
|
118
|
-
|
|
120
|
+
me();
|
|
119
121
|
}), e.useEffect(() => {
|
|
120
122
|
const r = t.data;
|
|
121
|
-
m(c), r && r.length !== 0 ?
|
|
123
|
+
m(c), r && r.length !== 0 ? R(!0) : R(!1);
|
|
122
124
|
}, [t.data]);
|
|
123
|
-
const
|
|
125
|
+
const ne = e.useCallback((r) => /* @__PURE__ */ e.createElement(ie, { ...r }), []);
|
|
124
126
|
return /* @__PURE__ */ e.createElement(
|
|
125
|
-
|
|
127
|
+
ue.Provider,
|
|
126
128
|
{
|
|
127
129
|
value: (r) => ({ ...r, popupClass: `k-dropdowngrid-popup ${p.popupClass}` })
|
|
128
130
|
},
|
|
129
131
|
/* @__PURE__ */ e.createElement(
|
|
130
|
-
|
|
132
|
+
fe,
|
|
131
133
|
{
|
|
132
|
-
...
|
|
133
|
-
list:
|
|
134
|
+
...A,
|
|
135
|
+
list: ne,
|
|
134
136
|
popupSettings: {
|
|
135
137
|
...p,
|
|
136
|
-
width: p.width ||
|
|
138
|
+
width: p.width || U,
|
|
137
139
|
className: p.className
|
|
138
140
|
},
|
|
139
141
|
ref: a,
|
|
140
|
-
header:
|
|
141
|
-
itemRender:
|
|
142
|
+
header: Q,
|
|
143
|
+
itemRender: X,
|
|
142
144
|
groupHeaderItemRender: t.groupHeaderItemRender,
|
|
143
|
-
size:
|
|
144
|
-
rounded:
|
|
145
|
-
fillMode:
|
|
145
|
+
size: z,
|
|
146
|
+
rounded: O,
|
|
147
|
+
fillMode: $,
|
|
146
148
|
groupMode: t.groupMode,
|
|
147
149
|
groupField: t.groupField,
|
|
148
150
|
isMultiColumn: !0,
|
|
149
|
-
onOpen:
|
|
150
|
-
onClose:
|
|
151
|
-
onFocus:
|
|
152
|
-
onBlur:
|
|
153
|
-
onChange:
|
|
154
|
-
onFilterChange:
|
|
155
|
-
onPageChange:
|
|
156
|
-
onGroupScroll:
|
|
157
|
-
className:
|
|
151
|
+
onOpen: Y,
|
|
152
|
+
onClose: Z,
|
|
153
|
+
onFocus: _,
|
|
154
|
+
onBlur: ee,
|
|
155
|
+
onChange: te,
|
|
156
|
+
onFilterChange: oe,
|
|
157
|
+
onPageChange: re,
|
|
158
|
+
onGroupScroll: ae,
|
|
159
|
+
className: G("k-dropdowngrid", L),
|
|
158
160
|
required: t.required,
|
|
159
161
|
adaptive: t.adaptive,
|
|
160
162
|
adaptiveFilter: t.adaptiveFilter,
|
|
161
163
|
adaptiveTitle: t.adaptiveTitle,
|
|
162
164
|
footer: t.footer,
|
|
163
165
|
footerClassName: "k-table-footer",
|
|
164
|
-
prefix:
|
|
165
|
-
suffix:
|
|
166
|
+
prefix: D,
|
|
167
|
+
suffix: J
|
|
166
168
|
}
|
|
167
169
|
)
|
|
168
170
|
);
|
|
169
|
-
}),
|
|
170
|
-
...
|
|
171
|
-
columns:
|
|
172
|
-
},
|
|
171
|
+
}), be = {
|
|
172
|
+
...ge.propTypes,
|
|
173
|
+
columns: se.any.isRequired
|
|
174
|
+
}, s = {
|
|
173
175
|
columns: [],
|
|
174
176
|
popupSettings: {},
|
|
175
177
|
width: "200px",
|
|
@@ -177,10 +179,9 @@ const fe = (s, h) => s ? typeof s == "number" ? s + "px" : s : h, ge = se(), x =
|
|
|
177
179
|
rounded: "medium",
|
|
178
180
|
fillMode: "solid"
|
|
179
181
|
};
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
x.defaultProps = d;
|
|
182
|
+
W.displayName = "KendoMultiColumnComboBox";
|
|
183
|
+
W.propTypes = be;
|
|
183
184
|
export {
|
|
184
|
-
|
|
185
|
-
|
|
185
|
+
W as MultiColumnComboBox,
|
|
186
|
+
ke as MultiColumnComboBoxPropsContext
|
|
186
187
|
};
|
|
@@ -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 $=require("react"),m=require("prop-types"),r=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),U=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),j=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),T=require("../common/DropDownBase.js"),w=require("../common/settings.js"),v=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("../common/constants.js"),ie=require("@progress/kendo-react-intl"),S=require("../messages/index.js"),oe=require("../common/ListFilter.js"),E=require("../common/withCustomComponent.js");function ae(I){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>I[t]})}}return n.default=I,Object.freeze(n)}const f=ae($),{sizeMap:K,roundedMap:ne}=r.kendoThemeMaps,le="Please enter a valid value!",P=I=>I.preventDefault(),_=I=>I===2,b=class b extends f.Component{constructor(n){super(n),this.state={activedescendant:w.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new T(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{data:s=[],dataItemKey:o,virtual:a}=this.props,p=a?a.skip:0,h=s[t-p],c=this.value.findIndex(g=>v.areSame(g,h,o));this._lastSelectedOrDeslectedItemIndex=s.findIndex(g=>v.areSame(g,h,o));let i=[];c!==-1?(i=this.value,i.splice(c,1)):i=[...this.value,h],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(e.data.text=""),this.base.filterChanged("",e)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.triggerOnChange(i,e),this.base.triggerPageChangeCornerItems(h,e)},this.onTagDelete=(t,e)=>{const s=this.base.initState();s.syntheticEvent=e,this.opened&&this.base.togglePopup(s),!this.state.focused&&!this.mobileMode&&(s.data.focused=!0,this.focus());const o=this.value;v.removeDataItems(o,t,this.props.dataItemKey),this.triggerOnChange(o,s),this.applyState(s)},this.itemFocus=(t,e)=>{const{data:s=[],allowCustom:o,virtual:a}=this.props,p=a?a.skip:0,h=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:c}=this.getFocusedState(),i=o&&h,l=s[t-p];l&&c!==t?this.state.focusedIndex!==t&&(e.data.focusedIndex=t,e.data.activedescendant=w.ActiveDescendant.PopupList):i&&t===-1&&this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,e)},this.componentRef=t=>{this._element=t,this.base.wrapper=t},this.searchbarRef=t=>{const e=this._input=t&&t.input;e&&this.state.focused&&window.setTimeout(()=>e.focus(),0)},this.onChangeHandler=t=>{const e=this.base.initState(),s=t.target.value;e.syntheticEvent=t,this.props.filter===void 0&&(e.data.text=s),e.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(e),this.setState({currentValue:this.value})),this.base.filterChanged(s,e),this.applyState(e),this.setState({group:void 0})},this.clearButtonClick=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.value.length>0&&this.triggerOnChange([],e),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e);const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(e)},this.onInputKeyDown=t=>{const{data:e=[],textField:s,groupField:o}=this.props,a=t.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,h=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:c,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=t,!p&&this.value.length>0&&(a===r.Keys.left||a===r.Keys.right||a===r.Keys.home||a===r.Keys.end||a===r.Keys.delete||a===r.Keys.backspace)&&!t.shiftKey)return this.onTagsNavigate(t,l);const g=()=>{t.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===r.Keys.pageUp)this.base.scrollPopupByPageSize(-1);else if(a===r.Keys.pageDown)this.base.scrollPopupByPageSize(1);else if((t.ctrlKey||t.metaKey)&&t.code==="KeyA"){const u=(this.state.value&&this.state.value.length)===e.length?[]:e;this.updateStateOnKeyboardNavigation(u,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===r.Keys.end){const d=e.slice(this.getFocusedState().focusedIndex);this.itemFocus(e.length-1,l),this.updateStateOnKeyboardNavigation(d,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===r.Keys.home){const d=e.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(d,l)}else if(t.shiftKey&&t.keyCode===r.Keys.up){let d;const u=this.getLastSelectedOrDeselectedIndex(1,i);u===null?d=i!==0?e.slice(i-1,i):[e[i]]:u===i?d=[e[u-1]]:i>=0&&(d=u>i?e.slice(i-1,u):e.slice(u-1,i)),d&&d.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.shiftKey&&t.keyCode===r.Keys.down){let d;const u=this.getLastSelectedOrDeselectedIndex(0,i);u===null?d=i!==e.length-1?e.slice(i,i+1):[e[i]]:u===i?d=e.slice(i,i+2):i>=0&&(d=u>i?e.slice(i+1,u+1):e.slice(u,i+2)),d&&d.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.altKey&&a===r.Keys.up)g();else if(a===r.Keys.up||a===r.Keys.down){if(o!==""&&s)if(!this.props.skipDisabledItems&&h)this.onNavigate(l,a);else{let d=0;if(a===r.Keys.down||a===r.Keys.right){const u=e.slice(i+1).find(y=>!y.disabled&&y[s]);d=u&&e.findIndex(y=>y[s]===u[s])}else if(a===r.Keys.up||a===r.Keys.left){let u;if(i===-1)u=e,d=e.findIndex(y=>!y.disabled&&y[s]);else{u=e.slice(0,i);let y=u.pop();for(;y&&y.disabled;)y=u.pop();d=y&&e.findIndex(C=>C[s]===y[s])}}if(d){const u=d-i;this.onNavigate(l,a,u)}else d!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(l,a);else{let d=null;if(a===r.Keys.down||a===r.Keys.right)d=e.slice(i+1).find(u=>!u.disabled);else if(a===r.Keys.up||a===r.Keys.left){const u=e.slice(0,i);for(d=u.pop();d&&d.disabled;)d=u.pop()}if(d){const u=d.id-i-1;this.onNavigate(l,a,u)}else this.onNavigate(l,a)}this.applyState(l),t.preventDefault()}else a===r.Keys.enter?(t.preventDefault(),this.props.allowCustom&&p&&c===null?this.customItemSelect(t):c&&c.disabled?g():this.selectFocusedItem(t)):a===r.Keys.esc&&g();else t.altKey&&a===r.Keys.down&&g()},this.listContainerContent=()=>{const{header:t,footer:e,allowCustom:s,size:o,data:a=[],groupStickyHeaderItemRender:p,groupField:h,list:c}=this.props,i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),g=s&&i&&f.createElement("div",{className:r.classNames("k-list",{[`k-list-${K[o]||o}`]:o}),key:"customitem",onClick:this.customItemSelect,onMouseDown:P},f.createElement("div",{className:r.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(r.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:d}=this.state;return d===void 0&&h!==void 0&&(d=v.getItemValue(a[0],h)),f.createElement(f.Fragment,null,t&&f.createElement("div",{className:"k-list-header"},t),g,f.createElement("div",{className:r.classNames("k-list",{[`k-list-${this.mobileMode?"lg":K[o]||o}`]:o,"k-virtual-list":this.base.vs.enabled})},!c&&d&&a.length!==0&&f.createElement(Y,{group:d,groupMode:"modern",render:p}),this.renderList()),e&&f.createElement("div",{className:"k-list-footer"},e))},this.renderListContainer=()=>{const t=this.base,{dir:e,data:s=[]}=this.props,o=this.base.getPopupSettings(),a=o.width!==void 0?o.width:t.popupWidth,p={dir:e!==void 0?e:t.dirCalculated,width:a,popupSettings:{...o,popupClass:r.classNames(o.popupClass,"k-list-container","k-multiselect-popup"),anchor:o.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[s.length,this.value.length]};return f.createElement(G,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:t,filterable:e,filter:s}=this.props,{windowWidth:o=0}=this.state,a=s!==void 0?s:this.state.text;this.localization=ie.provideLocalizationService(this);const p=e?f.createElement(oe,{value:a,ref:c=>this._adaptiveInput=c&&c.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,h={adaptiveTitle:t,expand:this.opened,onClose:c=>this.onCancel(c),windowWidth:o,mobileFilter:p,footer:{cancelText:this.localization.toLanguageString(S.adaptiveModeFooterCancel,S.messages[S.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(S.adaptiveModeFooterApply,S.messages[S.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...h},f.createElement(te.ActionSheetContent,{className:"!k-overflow-hidden"},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onClose"});const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.onCancel=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onCancel"});const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.renderList=()=>{const{data:t=[],textField:e,listNoDataRender:s,itemRender:o,groupHeaderItemRender:a,dataItemKey:p,virtual:h={skip:0,total:void 0}}=this.props,c=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),g=`translateY(${c.translate}px)`;return f.createElement(j,{id:this.base.listBoxId,show:this.opened,data:t.slice(),focusedIndex:i-h.skip,value:this.value,textField:e,valueField:p,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>{c.list=this.base.list=d},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:c.enabled?{transform:g}:void 0,key:"listKey",skip:h.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:a,noDataRender:s,onMouseDown:P,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:c.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:h.total})},this.onScroll=t=>{const{vs:e,list:s}=this.base;e.scrollHandler(t);const{groupField:o}=this.props;let{data:a=[]}=this.props;if(!(!o||!a.length)&&o){const p=this.itemHeight=this.itemHeight||(e.enabled?e.itemHeight:s?s.children[0].offsetHeight:0),c=t.target.scrollTop-e.skip*p;a=this.base.getGroupedDataModernMode(a,o);let i=a[0][o];for(let l=1;l<a.length&&!(p*l>c);l++)a[l]&&a[l][o]&&(i=a[l][o]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=t=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:s}=this.props;if(!e)return;const o=this.base.initState();o.syntheticEvent=t;const a=s?{[s]:e}:e;this.state.text!==void 0&&(o.data.text=""),o.data.focusedIndex=void 0,this.base.filterChanged("",o);const p=[...this.value,a];this.triggerOnChange(p,o),this.base.togglePopup(o),this.applyState(o)},this.handleWrapperClick=t=>{const e=this._input;!this.opened&&e&&this.focusElement(e);const s=this.base.initState();s.syntheticEvent=t,!this.state.focused&&!this.mobileMode&&(s.events.push({type:"onFocus"}),s.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(s),this.applyState(s)},this.handleItemClick=(t,e)=>{const s=this.base.initState();s.syntheticEvent=e,this.handleItemSelect(t,s),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(s),e.stopPropagation(),this.applyState(s)},this.handleBlur=t=>{if(!this.state.focused||this._skipFocusEvent)return;const e=this.base.initState(),{allowCustom:s,filterable:o}=this.props;e.syntheticEvent=t,e.data.focused=!1,e.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(e.data.opened=!1),e.events.push({type:"onClose"})),!s&&!o&&this.state.text&&(e.data.text=""),this.applyState(e)},this.handleFocus=t=>{this._skipFocusEvent||this.base.handleFocus(t)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},r.validatePackage(X.packageMetadata)}get _inputId(){return this.props.id}get document(){if(r.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:t}=this.props,e=[];return n===void 0?this.value.forEach(s=>{e.push({text:v.getItemValue(s,t),data:[s]})}):e.push(...n),e}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=se.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,t=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,e=this.props.valid!==void 0?this.props.valid:t;return{customError:n,valid:e,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}componentDidUpdate(n,t){var g;const{virtual:e,groupField:s="",data:o=[]}=this.props,a=e?e.skip:0,p=n.virtual?n.virtual.total:0,h=n.opened!==void 0?n.opened:t.opened,c=!h&&this.opened,i=h&&!this.opened,l=this.base.getPopupSettings();if(this.base.didUpdate(),!l.animate&&i&&this.onPopupClosed(),e&&e.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:d,focusedIndex:u}=this.getFocusedState();s!==""&&(u=(g=this.base.getGroupedDataModernMode(o,s))==null?void 0:g.indexOf(d)),c&&e?this.base.scrollToVirtualItem(e,u-a):c&&!e?(o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][s],this),this.base.scrollToItem(u)):this.opened&&h&&d&&this.scrollToFocused&&this.base.scrollToItem(u-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,t,e){const{allowCustom:s,data:o=[]}=this.props,a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:h}=this.getFocusedState(),c=s&&a,i=_(p),l=this.base,g=l.vs;if(this.opened&&t===r.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const d=l.navigation.navigate({keyCode:t,current:h,max:(g.enabled?g.total:o.length)-1,min:c?-1:0,skipItems:e||void 0});d!==void 0&&(this.itemFocus(d,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:t,label:e,dir:s,disabled:o,textField:a,dataItemKey:p,virtual:h,size:c,rounded:i,fillMode:l,loading:g,filter:d}=this.props,{text:u,focused:y,focusedTag:C,currentValue:q}=this.state,k=this.base.vs,F=this.props.id||this._inputId;k.enabled=h!==void 0,h!==void 0&&(k.skip=h.skip,k.total=h.total,k.pageSize=h.pageSize);const x=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(d!==void 0?d:u)||x&&x.length>0,[B,V]=E(this.props.prefix||f.Fragment),[z,A]=E(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:r.classNames("k-multiselect k-input",t,{[`k-input-${K[c]||c}`]:c,[`k-rounded-${ne[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!o,"k-invalid":!M,"k-disabled":o,"k-loading":g,"k-required":this.required}),style:e?{...n,width:void 0}:n,dir:s,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:v.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:r.classNames("k-input-values")},f.createElement("div",{className:r.classNames("k-chip-list",{[`k-chip-list-${K[c]||c}`]:c}),role:"listbox",id:"tagslist-"+this.base.guid},x&&x.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:x,guid:this.base.guid,focused:C?x.find(H=>v.matchTags(H,C,p)):void 0,size:c})),this.renderSearchBar(F)),g&&f.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(z,{...A}),L&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return e?f.createElement(U.FloatingLabel,{label:e,editorId:F,editorValue:u||v.getItemValue(this.value[0],a),editorValid:M,editorDisabled:o,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:t,focusedTag:e,currentValue:s}=this.state,{disabled:o,placeholder:a,ariaDescribedBy:p}=this.props,h=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:c}=this.getFocusedState(),i=this.value.length===0&&!h?a:void 0,l=s&&s.length>0?void 0:a,g=t===w.ActiveDescendant.TagsList&&e!==void 0?`tag-${this.base.guid}-${e.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${c}`;return f.createElement(Q,{id:n,size:Math.max((i||"").length,h.length,1),tabIndex:this.props.tabIndex,accessKey:this.props.accessKey,placeholder:this.mobileMode&&this.opened?l:i,value:h,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:o,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:g,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:this.props.ariaLabelledBy,ariaRequired:this.required})}onTagsNavigate(n,t){const e=n.keyCode,{focusedTag:s}=this.state,o=this._tags,a=this.props.dataItemKey;let p=s?o.findIndex(i=>v.matchTags(i,s,a)):-1,h;const c=p!==-1;if(e===r.Keys.left)c?p=Math.max(0,p-1):p=o.length-1,h=o[p];else if(e===r.Keys.right)p===o.length-1?h=void 0:c&&(p=Math.min(o.length-1,p+1),h=o[p]);else if(e===r.Keys.home&&!n.shiftKey)h=o[0];else if(e===r.Keys.end&&!n.shiftKey)h=o[o.length-1];else if(e===r.Keys.delete){if(c){const i=this.value;v.removeDataItems(i,o[p].data,a),this.triggerOnChange(i,t)}}else if(e===r.Keys.backspace){const i=this.value;if(c)v.removeDataItems(i,o[p].data,a),this.triggerOnChange(i,t);else if(!c&&o.length){const l=o.pop();v.removeDataItems(i,l.data,a),this.triggerOnChange(i,t)}}h!==s&&(t.data.focusedTag=h,t.data.activedescendant=w.ActiveDescendant.TagsList),this.applyState(t)}triggerOnChange(n,t){this.props.value===void 0&&(t.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),t.events.push({type:"onChange"})}selectFocusedItem(n,t){const{data:e=[],virtual:s}=this.props,{focusedIndex:o}=t||this.getFocusedState(),a=s?s.skip:0;e[o-a]!==void 0&&this.handleItemClick(o,n)}setItems(n,t){t.length=0,t.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,t=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:e,data:s=[],dataItemKey:o,virtual:a,textField:p,focusedItemIndex:h=v.itemIndexStartsWith,skipDisabledItems:c}=this.props,i=a&&a.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:s[n-i],focusedType:1};const g=this.value;if(e&&t)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(t)return l=h(s,t,p),{focusedItem:s[l],focusedIndex:l+i,focusedType:1};if(g.length){const d=g[g.length-1];return l=s.findIndex(u=>v.areSame(u,d,o)),s[l]!==void 0?{focusedIndex:l+i,focusedItem:s[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(c&&p&&!t&&i===0){const d=s.findIndex(u=>!u.disabled&&u[p]);return{focusedIndex:d,focusedItem:s[d-i],focusedType:1}}return i===0?{focusedItem:s[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const t of n)this.setState({windowWidth:t.target.clientWidth})}updateStateOnKeyboardNavigation(n,t){this.setState({value:n}),this.triggerOnChange(n,t),this.applyState(t)}getLastSelectedOrDeselectedIndex(n,t){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=t),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};b.displayName="MultiSelect",b.propTypes={...T.propTypes,autoClose:m.bool,value:m.arrayOf(m.any),defaultValue:m.arrayOf(m.any),dataItemKey:m.string,placeholder:m.string,tags:m.arrayOf(m.shape({text:m.string,data:m.arrayOf(m.any)})),tagRender:m.func,id:m.string,ariaLabelledBy:m.string,ariaDescribedBy:m.string,groupField:m.string,list:m.any,adaptive:m.bool,adaptiveTitle:m.string,onCancel:m.func,skipDisabledItems:m.bool},b.defaultProps={...T.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let D=b;const N=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(N,D));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=D;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),m=require("prop-types"),r=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),U=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),j=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),T=require("../common/DropDownBase.js"),w=require("../common/settings.js"),v=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("../common/constants.js"),ie=require("@progress/kendo-react-intl"),S=require("../messages/index.js"),oe=require("../common/ListFilter.js"),E=require("../common/withCustomComponent.js");function ae(I){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>I[t]})}}return n.default=I,Object.freeze(n)}const f=ae($),{sizeMap:K,roundedMap:ne}=r.kendoThemeMaps,le="Please enter a valid value!",P=I=>I.preventDefault(),_=I=>I===2,b=class b extends f.Component{constructor(n){super(n),this.state={activedescendant:w.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new T(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{data:s=[],dataItemKey:o,virtual:a}=this.props,p=a?a.skip:0,h=s[t-p],c=this.value.findIndex(g=>v.areSame(g,h,o));this._lastSelectedOrDeslectedItemIndex=s.findIndex(g=>v.areSame(g,h,o));let i=[];c!==-1?(i=this.value,i.splice(c,1)):i=[...this.value,h],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(e.data.text=""),this.base.filterChanged("",e)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.triggerOnChange(i,e),this.base.triggerPageChangeCornerItems(h,e)},this.onTagDelete=(t,e)=>{const s=this.base.initState();s.syntheticEvent=e,this.opened&&this.base.togglePopup(s),!this.state.focused&&!this.mobileMode&&(s.data.focused=!0,this.focus());const o=this.value;v.removeDataItems(o,t,this.props.dataItemKey),this.triggerOnChange(o,s),this.applyState(s)},this.itemFocus=(t,e)=>{const{data:s=[],allowCustom:o,virtual:a}=this.props,p=a?a.skip:0,h=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:c}=this.getFocusedState(),i=o&&h,l=s[t-p];l&&c!==t?this.state.focusedIndex!==t&&(e.data.focusedIndex=t,e.data.activedescendant=w.ActiveDescendant.PopupList):i&&t===-1&&this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,e)},this.componentRef=t=>{this._element=t,this.base.wrapper=t},this.searchbarRef=t=>{const e=this._input=t&&t.input;e&&this.state.focused&&window.setTimeout(()=>e.focus(),0)},this.onChangeHandler=t=>{const e=this.base.initState(),s=t.target.value;e.syntheticEvent=t,this.props.filter===void 0&&(e.data.text=s),e.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(e),this.setState({currentValue:this.value})),this.base.filterChanged(s,e),this.applyState(e),this.setState({group:void 0})},this.clearButtonClick=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.value.length>0&&this.triggerOnChange([],e),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e);const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(e)},this.onInputKeyDown=t=>{const{data:e=[],textField:s,groupField:o}=this.props,a=t.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,h=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:c,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=t,!p&&this.value.length>0&&(a===r.Keys.left||a===r.Keys.right||a===r.Keys.home||a===r.Keys.end||a===r.Keys.delete||a===r.Keys.backspace)&&!t.shiftKey)return this.onTagsNavigate(t,l);const g=()=>{t.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===r.Keys.pageUp)t.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(a===r.Keys.pageDown)t.preventDefault(),this.base.scrollPopupByPageSize(1);else if((t.ctrlKey||t.metaKey)&&t.code==="KeyA"){const u=(this.state.value&&this.state.value.length)===e.length?[]:e;this.updateStateOnKeyboardNavigation(u,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===r.Keys.end){const d=e.slice(this.getFocusedState().focusedIndex);this.itemFocus(e.length-1,l),this.updateStateOnKeyboardNavigation(d,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===r.Keys.home){const d=e.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(d,l)}else if(t.shiftKey&&t.keyCode===r.Keys.up){let d;const u=this.getLastSelectedOrDeselectedIndex(1,i);u===null?d=i!==0?e.slice(i-1,i):[e[i]]:u===i?d=[e[u-1]]:i>=0&&(d=u>i?e.slice(i-1,u):e.slice(u-1,i)),d&&d.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.shiftKey&&t.keyCode===r.Keys.down){let d;const u=this.getLastSelectedOrDeselectedIndex(0,i);u===null?d=i!==e.length-1?e.slice(i,i+1):[e[i]]:u===i?d=e.slice(i,i+2):i>=0&&(d=u>i?e.slice(i+1,u+1):e.slice(u,i+2)),d&&d.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.altKey&&a===r.Keys.up)g();else if(a===r.Keys.up||a===r.Keys.down){if(o!==""&&s)if(!this.props.skipDisabledItems&&h)this.onNavigate(l,a);else{let d=0;if(a===r.Keys.down||a===r.Keys.right){const u=e.slice(i+1).find(y=>!y.disabled&&y[s]);d=u&&e.findIndex(y=>y[s]===u[s])}else if(a===r.Keys.up||a===r.Keys.left){let u;if(i===-1)u=e,d=e.findIndex(y=>!y.disabled&&y[s]);else{u=e.slice(0,i);let y=u.pop();for(;y&&y.disabled;)y=u.pop();d=y&&e.findIndex(C=>C[s]===y[s])}}if(d){const u=d-i;this.onNavigate(l,a,u)}else d!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&h)this.onNavigate(l,a);else{let d=null;if(a===r.Keys.down||a===r.Keys.right)d=e.slice(i+1).find(u=>!u.disabled);else if(a===r.Keys.up||a===r.Keys.left){const u=e.slice(0,i);for(d=u.pop();d&&d.disabled;)d=u.pop()}if(d){const u=d.id-i-1;this.onNavigate(l,a,u)}else this.onNavigate(l,a)}this.applyState(l),t.preventDefault()}else a===r.Keys.enter?(t.preventDefault(),this.props.allowCustom&&p&&c===null?this.customItemSelect(t):c&&c.disabled?g():this.selectFocusedItem(t)):a===r.Keys.esc&&g();else t.altKey&&a===r.Keys.down?g():a===r.Keys.esc&&this.clearButtonClick(t)},this.listContainerContent=()=>{const{header:t,footer:e,allowCustom:s,size:o,data:a=[],groupStickyHeaderItemRender:p,groupField:h,list:c}=this.props,i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),g=s&&i&&f.createElement("div",{className:r.classNames("k-list",{[`k-list-${K[o]||o}`]:o}),key:"customitem",onClick:this.customItemSelect,onMouseDown:P},f.createElement("div",{className:r.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(r.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:d}=this.state;return d===void 0&&h!==void 0&&(d=v.getItemValue(a[0],h)),f.createElement(f.Fragment,null,t&&f.createElement("div",{className:"k-list-header"},t),g,f.createElement("div",{className:r.classNames("k-list",{[`k-list-${this.mobileMode?"lg":K[o]||o}`]:o,"k-virtual-list":this.base.vs.enabled})},!c&&d&&a.length!==0&&f.createElement(Y,{group:d,groupMode:"modern",render:p}),this.renderList()),e&&f.createElement("div",{className:"k-list-footer"},e))},this.renderListContainer=()=>{const t=this.base,{dir:e,data:s=[]}=this.props,o=this.base.getPopupSettings(),a=o.width!==void 0?o.width:t.popupWidth,p={dir:e!==void 0?e:t.dirCalculated,width:a,popupSettings:{...o,popupClass:r.classNames(o.popupClass,"k-list-container","k-multiselect-popup"),anchor:o.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[s.length,this.value.length]};return f.createElement(G,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:t,filterable:e,filter:s}=this.props,{windowWidth:o=0}=this.state,a=s!==void 0?s:this.state.text;this.localization=ie.provideLocalizationService(this);const p=e?f.createElement(oe,{value:a,ref:c=>this._adaptiveInput=c&&c.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,h={adaptiveTitle:t,expand:this.opened,onClose:c=>this.onCancel(c),windowWidth:o,mobileFilter:p,footer:{cancelText:this.localization.toLanguageString(S.adaptiveModeFooterCancel,S.messages[S.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(S.adaptiveModeFooterApply,S.messages[S.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...h},f.createElement(te.ActionSheetContent,{className:"!k-overflow-hidden"},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onClose"});const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.onCancel=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onCancel"});const s=this.props.filter!==void 0?this.props.filter:this.state.text;v.isPresent(s)&&s!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.renderList=()=>{const{data:t=[],textField:e,listNoDataRender:s,itemRender:o,groupHeaderItemRender:a,dataItemKey:p,virtual:h={skip:0,total:void 0}}=this.props,c=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),g=`translateY(${c.translate}px)`;return f.createElement(j,{id:this.base.listBoxId,show:this.opened,data:t.slice(),focusedIndex:i-h.skip,value:this.value,textField:e,valueField:p,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>{c.list=this.base.list=d},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:c.enabled?{transform:g}:void 0,key:"listKey",skip:h.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:a,noDataRender:s,onMouseDown:P,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:c.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:h.total})},this.onScroll=t=>{const{vs:e,list:s}=this.base;e.scrollHandler(t);const{groupField:o}=this.props;let{data:a=[]}=this.props;if(!(!o||!a.length)&&o){const p=this.itemHeight=this.itemHeight||(e.enabled?e.itemHeight:s?s.children[0].offsetHeight:0),c=t.target.scrollTop-e.skip*p;a=this.base.getGroupedDataModernMode(a,o);let i=a[0][o];for(let l=1;l<a.length&&!(p*l>c);l++)a[l]&&a[l][o]&&(i=a[l][o]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=t=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:s}=this.props;if(!e)return;const o=this.base.initState();o.syntheticEvent=t;const a=s?{[s]:e}:e;this.state.text!==void 0&&(o.data.text=""),o.data.focusedIndex=void 0,this.base.filterChanged("",o);const p=[...this.value,a];this.triggerOnChange(p,o),this.base.togglePopup(o),this.applyState(o)},this.handleWrapperClick=t=>{const e=this._input;!this.opened&&e&&this.focusElement(e);const s=this.base.initState();s.syntheticEvent=t,!this.state.focused&&!this.mobileMode&&(s.events.push({type:"onFocus"}),s.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(s),this.applyState(s)},this.handleItemClick=(t,e)=>{const s=this.base.initState();s.syntheticEvent=e,this.handleItemSelect(t,s),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(s),e.stopPropagation(),this.applyState(s)},this.handleBlur=t=>{if(!this.state.focused||this._skipFocusEvent)return;const e=this.base.initState(),{allowCustom:s,filterable:o}=this.props;e.syntheticEvent=t,e.data.focused=!1,e.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(e.data.opened=!1),e.events.push({type:"onClose"})),!s&&!o&&this.state.text&&(e.data.text=""),this.applyState(e)},this.handleFocus=t=>{this._skipFocusEvent||this.base.handleFocus(t)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},r.validatePackage(X.packageMetadata)}get _inputId(){return this.props.id}get document(){if(r.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:t}=this.props,e=[];return n===void 0?this.value.forEach(s=>{e.push({text:v.getItemValue(s,t),data:[s]})}):e.push(...n),e}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=se.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,t=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,e=this.props.valid!==void 0?this.props.valid:t;return{customError:n,valid:e,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}componentDidUpdate(n,t){var g;const{virtual:e,groupField:s="",data:o=[]}=this.props,a=e?e.skip:0,p=n.virtual?n.virtual.total:0,h=n.opened!==void 0?n.opened:t.opened,c=!h&&this.opened,i=h&&!this.opened,l=this.base.getPopupSettings();if(this.base.didUpdate(),!l.animate&&i&&this.onPopupClosed(),e&&e.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:d,focusedIndex:u}=this.getFocusedState();s!==""&&(u=(g=this.base.getGroupedDataModernMode(o,s))==null?void 0:g.indexOf(d)),c&&e?this.base.scrollToVirtualItem(e,u-a):c&&!e?(o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][s],this),this.base.scrollToItem(u)):this.opened&&h&&d&&this.scrollToFocused&&this.base.scrollToItem(u-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,t,e){const{allowCustom:s,data:o=[]}=this.props,a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:h}=this.getFocusedState(),c=s&&a,i=_(p),l=this.base,g=l.vs;if(this.opened&&t===r.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const d=l.navigation.navigate({keyCode:t,current:h,max:(g.enabled?g.total:o.length)-1,min:c?-1:0,skipItems:e||void 0});d!==void 0&&(this.itemFocus(d,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:t,label:e,dir:s,disabled:o,textField:a,dataItemKey:p,virtual:h,size:c,rounded:i,fillMode:l,loading:g,filter:d}=this.props,{text:u,focused:y,focusedTag:C,currentValue:q}=this.state,k=this.base.vs,F=this.props.id||this._inputId;k.enabled=h!==void 0,h!==void 0&&(k.skip=h.skip,k.total=h.total,k.pageSize=h.pageSize);const x=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(d!==void 0?d:u)||x&&x.length>0,[B,V]=E(this.props.prefix||f.Fragment),[z,A]=E(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:r.classNames("k-multiselect k-input",t,{[`k-input-${K[c]||c}`]:c,[`k-rounded-${ne[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!o,"k-invalid":!M,"k-disabled":o,"k-loading":g,"k-required":this.required}),style:e?{...n,width:void 0}:n,dir:s,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:v.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:r.classNames("k-input-values")},f.createElement("div",{className:r.classNames("k-chip-list",{[`k-chip-list-${K[c]||c}`]:c}),role:"listbox",id:"tagslist-"+this.base.guid},x&&x.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:x,guid:this.base.guid,focused:C?x.find(H=>v.matchTags(H,C,p)):void 0,size:c})),this.renderSearchBar(F)),g&&f.createElement(r.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(z,{...A}),L&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return e?f.createElement(U.FloatingLabel,{label:e,editorId:F,editorValue:u||v.getItemValue(this.value[0],a),editorValid:M,editorDisabled:o,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:t,focusedTag:e,currentValue:s}=this.state,{disabled:o,placeholder:a,ariaDescribedBy:p}=this.props,h=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:c}=this.getFocusedState(),i=this.value.length===0&&!h?a:void 0,l=s&&s.length>0?void 0:a,g=t===w.ActiveDescendant.TagsList&&e!==void 0?`tag-${this.base.guid}-${e.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${c}`;return f.createElement(Q,{id:n,size:Math.max((i||"").length,h.length,1),tabIndex:this.props.tabIndex,accessKey:this.props.accessKey,placeholder:this.mobileMode&&this.opened?l:i,value:h,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:o,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:g,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:this.props.ariaLabelledBy,ariaRequired:this.required})}onTagsNavigate(n,t){const e=n.keyCode,{focusedTag:s}=this.state,o=this._tags,a=this.props.dataItemKey;let p=s?o.findIndex(i=>v.matchTags(i,s,a)):-1,h;const c=p!==-1;if(e===r.Keys.left)c?p=Math.max(0,p-1):p=o.length-1,h=o[p];else if(e===r.Keys.right)p===o.length-1?h=void 0:c&&(p=Math.min(o.length-1,p+1),h=o[p]);else if(e===r.Keys.home&&!n.shiftKey)h=o[0];else if(e===r.Keys.end&&!n.shiftKey)h=o[o.length-1];else if(e===r.Keys.delete){if(c){const i=this.value;v.removeDataItems(i,o[p].data,a),this.triggerOnChange(i,t)}}else if(e===r.Keys.backspace){const i=this.value;if(c)v.removeDataItems(i,o[p].data,a),this.triggerOnChange(i,t);else if(!c&&o.length){const l=o.pop();v.removeDataItems(i,l.data,a),this.triggerOnChange(i,t)}}h!==s&&(t.data.focusedTag=h,t.data.activedescendant=w.ActiveDescendant.TagsList),this.applyState(t)}triggerOnChange(n,t){this.props.value===void 0&&(t.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),t.events.push({type:"onChange"})}selectFocusedItem(n,t){const{data:e=[],virtual:s}=this.props,{focusedIndex:o}=t||this.getFocusedState(),a=s?s.skip:0;e[o-a]!==void 0&&this.handleItemClick(o,n)}setItems(n,t){t.length=0,t.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,t=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:e,data:s=[],dataItemKey:o,virtual:a,textField:p,focusedItemIndex:h=v.itemIndexStartsWith,skipDisabledItems:c}=this.props,i=a&&a.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:s[n-i],focusedType:1};const g=this.value;if(e&&t)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(t)return l=h(s,t,p),{focusedItem:s[l],focusedIndex:l+i,focusedType:1};if(g.length){const d=g[g.length-1];return l=s.findIndex(u=>v.areSame(u,d,o)),s[l]!==void 0?{focusedIndex:l+i,focusedItem:s[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(c&&p&&!t&&i===0){const d=s.findIndex(u=>!u.disabled&&u[p]);return{focusedIndex:d,focusedItem:s[d-i],focusedType:1}}return i===0?{focusedItem:s[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const t of n)this.setState({windowWidth:t.target.clientWidth})}updateStateOnKeyboardNavigation(n,t){this.setState({value:n}),this.triggerOnChange(n,t),this.applyState(t)}getLastSelectedOrDeselectedIndex(n,t){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=t),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};b.displayName="MultiSelect",b.propTypes={...T.propTypes,autoClose:m.bool,value:m.arrayOf(m.any),defaultValue:m.arrayOf(m.any),dataItemKey:m.string,placeholder:m.string,tags:m.arrayOf(m.shape({text:m.string,data:m.arrayOf(m.any)})),tagRender:m.func,id:m.string,ariaLabelledBy:m.string,ariaDescribedBy:m.string,groupField:m.string,list:m.any,adaptive:m.bool,adaptiveTitle:m.string,onCancel:m.func,skipDisabledItems:m.bool},b.defaultProps={...T.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let D=b;const N=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(N,D));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=D;
|
|
@@ -70,9 +70,9 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
|
|
|
70
70
|
};
|
|
71
71
|
if (this.opened)
|
|
72
72
|
if (a === u.pageUp)
|
|
73
|
-
this.base.scrollPopupByPageSize(-1);
|
|
73
|
+
t.preventDefault(), this.base.scrollPopupByPageSize(-1);
|
|
74
74
|
else if (a === u.pageDown)
|
|
75
|
-
this.base.scrollPopupByPageSize(1);
|
|
75
|
+
t.preventDefault(), this.base.scrollPopupByPageSize(1);
|
|
76
76
|
else if ((t.ctrlKey || t.metaKey) && t.code === "KeyA") {
|
|
77
77
|
const c = (this.state.value && this.state.value.length) === e.length ? [] : e;
|
|
78
78
|
this.updateStateOnKeyboardNavigation(c, l);
|
|
@@ -140,7 +140,7 @@ const { sizeMap: w, roundedMap: Ie } = te, ye = "Please enter a valid value!", A
|
|
|
140
140
|
} else
|
|
141
141
|
a === u.enter ? (t.preventDefault(), this.props.allowCustom && p && h === null ? this.customItemSelect(t) : h && h.disabled ? g() : this.selectFocusedItem(t)) : a === u.esc && g();
|
|
142
142
|
else
|
|
143
|
-
t.altKey && a === u.down
|
|
143
|
+
t.altKey && a === u.down ? g() : a === u.esc && this.clearButtonClick(t);
|
|
144
144
|
}, this.listContainerContent = () => {
|
|
145
145
|
const { header: t, footer: e, allowCustom: s, size: o, data: a = [], groupStickyHeaderItemRender: p, groupField: r, list: h } = this.props, i = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: l } = this.getFocusedState(), g = s && i && /* @__PURE__ */ f.createElement(
|
|
146
146
|
"div",
|
|
@@ -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"),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 I=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(b,t,I.get?I:{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:I,required:T}=h;return{customError:t!==void 0,valid:!!(I!==void 0?I:!T||b),valueMissing:!b}},w={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 I=s.useId(),T=t.id||I,{data:B=[],dataItemKey:K,popupSettings:N={},style:L={},opened:M,disabled:F,onOpen:ne=s.noop,onClose:W=s.noop,placeholder:ue,label:V,name:Me,checkField:de=w.checkField,checkIndeterminateField:pe=w.checkIndeterminateField,subItemsField:fe=w.subItemsField,validationMessage:z,valid:Re,tags:ge,value:g,required:ve=w.required,validityStyles:De=w.validityStyles}=t,_=s.getTabIndex(t.tabIndex,F),o=n.useRef(null),E=n.useRef(null),R=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=M!==void 0?M:Ne,ie=!!(Array.isArray(g)&&g.length),oe=vt({validationMessage:z,valid:Re,required:ve},ie),D=s.useRtl(E,t.dir),Ae={width:at.useDropdownWidth(E,w,{...w.popupSettings,...N},L),...D!==void 0?{direction:D}:{}},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,K)||!o.current)return;const{item:r,nativeEvent:i,syntheticEvent:k}=e,q={syntheticEvent:k,nativeEvent:i,target:o.current};S(q,[r],"toggle")},[g,K,S]),J=n.useCallback(e=>{if(!l){if(ne){const r={...e};ne.call(void 0,r)}M===void 0&&(me(!0),Le(g||[]),O&&setTimeout(()=>{var r;u((r=ae.current)==null?void 0:r.element)},300))}},[l,M,ne,O,ae]),v=n.useCallback(e=>{if(l){if(W){const r={...e};W.call(void 0,r)}M===void 0&&me(!1)}},[l,M,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=R.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,M,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=R.current)==null?void 0:Z.element)===e.target)return;const q={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,K)):-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(q,c[p].data,"delete"),f!==P&&qe(f)}if(l)if(r===s.Keys.esc||i&&r===s.Keys.up)e.preventDefault(),v(q);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=R.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=R.current)==null?void 0:f.element)})}C(s.noop)}else r===s.Keys.down&&C(()=>{var c;u(((c=R.current)==null?void 0:c.element)||k)});else i&&r===s.Keys.down&&(e.preventDefault(),J(q))},[l,v,u,C,J,P,K,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=R.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:q}=e,Z={level:gt(i),item:r,nativeEvent:k,syntheticEvent:q,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:K,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:D}):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:T,style:V?{...L,width:void 0}:L,dir:D,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-"+T,"aria-required":t.required,onClick:F?void 0:Ge},n.createElement("div",{id:"tagslist-"+T,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:T,focused:P?H.current.find(e=>ee.matchTags(e,P,K)):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":D==="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:R,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:K,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:D}):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:T,style:{width:L?L.width:void 0},children:xe,dir:D}):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=w;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"),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"),rt=require("../DropDownTree/ListNoData.js"),m=require("../messages/index.js"),it=require("@progress/kendo-react-labels"),st=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 n in h)if(n!=="default"){const I=Object.getOwnPropertyDescriptor(h,n);Object.defineProperty(b,n,I.get?I:{enumerable:!0,get:()=>h[n]})}}return b.default=h,Object.freeze(b)}const t=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:n,valid:I,required:T}=h;return{customError:n!==void 0,valid:!!(I!==void 0?I:!T||b),valueMissing:!b}},E={checkField:"checkField",checkIndeterminateField:"checkIndeterminateField",subItemsField:"items",popupSettings:{animate:!0,width:"200px",height:"200px"},size:"medium",rounded:"medium",fillMode:"solid",required:!1,validityStyles:!0},Me=i.createPropsContext(),ce=t.forwardRef((h,b)=>{const n=i.usePropsContext(Me,h);i.validatePackage(nt.packageMetadata);const I=i.useId(),T=n.id||I,{data:B=[],dataItemKey:M,style:L={},placeholder:ue,label:V,name:Ke,validationMessage:W,valid:Re,tags:de,value:g,opened:K,disabled:x,popupSettings:N=E.popupSettings,checkField:pe=E.checkField,checkIndeterminateField:fe=E.checkIndeterminateField,subItemsField:ge=E.subItemsField,size:y=E.size,rounded:A=E.rounded,fillMode:z=E.fillMode,required:ve=E.required,validityStyles:De=E.validityStyles,onOpen:te=i.noop,onClose:_=i.noop}=n,j=i.getTabIndex(n.tabIndex,x),o=t.useRef(null),F=t.useRef(null),R=t.useRef(null),ne=t.useRef(null),$=t.useRef(null),S=t.useRef(null),H=t.useRef(!1),G=t.useRef([]),U=t.useRef(null),[O,qe]=t.useState(),[Ne,me]=t.useState(!1),[d,ae]=t.useState(!1),[re,Oe]=t.useState(),[Pe,Le]=t.useState([]),[he,Ve]=t.useState(""),P=!!(re&&re<=ut.MOBILE_MEDIUM_DEVISE&&n.adaptive),l=K!==void 0?K:Ne,ie=!!(Array.isArray(g)&&g.length),se=vt({validationMessage:W,valid:Re,required:ve},ie),D=i.useRtl(F,n.dir),Ae={width:at.useDropdownWidth(F,E,N,L),...D!==void 0?{direction:D}:{}},Be=t.useCallback(()=>F.current&&F.current.focus(),[]);G.current=de===void 0?(g||[]).map(e=>({text:ee.getItemValue(e,n.textField),data:[e]})):[...de],t.useImperativeHandle(o,()=>({props:n,element:F.current,focus:Be})),t.useImperativeHandle(b,()=>o.current);const We=t.useCallback(()=>{$.current&&$.current.setCustomValidity&&$.current.setCustomValidity(se.valid?"":W===void 0?pt:W)},[W,se]);t.useEffect(We),t.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()}},[]),t.useEffect(()=>{U.current&&l&&U.current.setPosition(U.current._popup)},[g,l]);const w=t.useCallback((e,r,s)=>{if(n.onChange){const k={items:r,operation:s,...e};n.onChange.call(void 0,k)}},[n.onChange]),J=t.useCallback(e=>{if(ee.areSame(e.item,g,M)||!o.current)return;const{item:r,nativeEvent:s,syntheticEvent:k}=e,q={syntheticEvent:k,nativeEvent:s,target:o.current};w(q,[r],"toggle")},[g,M,w]),Q=t.useCallback(e=>{if(!l){if(te){const r={...e};te.call(void 0,r)}K===void 0&&(me(!0),Le(g||[]),P&&setTimeout(()=>{var r;u((r=ne.current)==null?void 0:r.element)},300))}},[l,K,te,P,ne]),v=t.useCallback(e=>{if(l){if(_){const r={...e};_.call(void 0,r)}K===void 0&&me(!1)}},[l,K,_]),C=t.useCallback(e=>{H.current=!0,e(),window.setTimeout(()=>H.current=!1,0)},[]),u=t.useCallback(e=>{e&&C(()=>e.focus())},[C]),ze=t.useCallback(()=>{var e;!d&&l?v({target:o.current}):n.filterable?u((e=R.current)==null?void 0:e.element):u(S.current&&S.current.element)},[d,l,u,v,n.filterable]),_e=t.useCallback(()=>{d&&u(F.current)},[d,u]),je=t.useCallback(e=>{if(!d&&!H.current&&(ae(!0),n.onFocus&&o.current)){const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};n.onFocus.call(void 0,r)}},[d,n.onFocus]),$e=t.useCallback(e=>{if(d&&!H.current&&o.current){ae(!1);const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};if(n.onBlur){const s={...r};n.onBlur.call(void 0,s)}P||v(r)}},[d,n.onBlur,l,K,_]),He=t.useCallback(()=>{d&&C(i.noop)},[d,C]),Ge=t.useCallback(e=>{if(!e.isDefaultPrevented()&&o.current){ae(!0);const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};l||Q(r)}},[l,Q]),Ue=t.useCallback(e=>{var Z,Se;const{keyCode:r,altKey:s}=e,k=S.current&&S.current.element;if(!o.current||e.isDefaultPrevented()&&((Z=R.current)==null?void 0:Z.element)===e.target)return;const q={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};if(g&&g.length>0&&(r===i.Keys.left||r===i.Keys.right||r===i.Keys.home||r===i.Keys.end||r===i.Keys.delete)){const c=G.current;let p=O?c.findIndex(Ye=>ee.matchTags(Ye,O,M)):-1,f;const le=p!==-1;r===i.Keys.left?(le?p=Math.max(0,p-1):p=c.length-1,f=c[p]):r===i.Keys.right?p===c.length-1?f=void 0:le&&(p=Math.min(c.length-1,p+1),f=c[p]):r===i.Keys.home?f=c[0]:r===i.Keys.end?f=c[c.length-1]:r===i.Keys.delete&&le&&w(q,c[p].data,"delete"),f!==O&&qe(f)}if(l)if(r===i.Keys.esc||s&&r===i.Keys.up)e.preventDefault(),v(q);else if(k&&k.querySelector(".k-focus")&&(r===i.Keys.up||r===i.Keys.down||r===i.Keys.left||r===i.Keys.right||r===i.Keys.home||r===i.Keys.end)){if(r===i.Keys.up&&((Se=R.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=R.current)==null?void 0:f.element)})}C(i.noop)}else r===i.Keys.down&&C(()=>{var c;u(((c=R.current)==null?void 0:c.element)||k)});else s&&r===i.Keys.down&&(e.preventDefault(),Q(q))},[l,v,u,C,Q,O,M,g,w]),ye=t.useCallback(e=>{const{keyCode:r,altKey:s}=e;s||r!==i.Keys.up&&r!==i.Keys.down||(e.preventDefault(),C(r===i.Keys.up?()=>{u(F.current)}:()=>{u(S.current&&S.current.element)}))},[u,C]),oe=t.useCallback(e=>{if(!o.current)return;const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};w(r,[],"clear"),v(r),e.preventDefault()},[w,v]),Je=t.useCallback((e,r)=>{var s;v({target:o.current}),d||u((s=R.current)==null?void 0:s.element),w({syntheticEvent:r,nativeEvent:r.nativeEvent,target:o.current},e,"delete")},[w,v,u,d]),be=t.useCallback(e=>{if(n.onExpandChange&&o.current){const{item:r,itemHierarchicalIndex:s,nativeEvent:k,syntheticEvent:q}=e,Z={level:gt(s),item:r,nativeEvent:k,syntheticEvent:q,target:o.current};n.onExpandChange.call(void 0,Z)}},[n.onExpandChange]),Ce=t.useCallback(e=>{if(n.onFilterChange&&o.current){const s={filter:{field:n.textField,operator:"contains",value:e.target.value},syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:o.current};n.onFilterChange.call(void 0,s),n.filter===void 0&&Ve(e.target.value)}},[n.onFilterChange,n.filter,n.textField]),ke=t.useCallback(e=>{if(!o.current)return;const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o.current};n.onCancel&&n.onCancel.call(void 0,r),v(r),e.preventDefault()},[n.onCancel,v]),Qe=()=>{const e=n.filterable?t.createElement(Ie,{value:n.filter===void 0?he:n.filter,ref:ne,onChange:Ce,onKeyDown:ye,size:y,rounded:A,fillMode:z}):null,r={adaptiveTitle:n.adaptiveTitle,expand:l,onClose:s=>n.onCancel?ke(s):oe(s),windowWidth:re,mobileFilter:e,footer:{cancelText:X.toLanguageString(m.adaptiveModeFooterCancel,m.messages[m.adaptiveModeFooterCancel]),onCancel:s=>n.onCancel?ke(s):oe(s),applyText:X.toLanguageString(m.adaptiveModeFooterApply,m.messages[m.adaptiveModeFooterApply]),onApply:s=>v(s)}};return t.createElement(lt.AdaptiveMode,{...r},t.createElement(ct.ActionSheetContent,{className:"!k-overflow-hidden"},t.createElement("div",{className:"k-list-container"},t.createElement("div",{className:"k-list k-list-lg"},B.length>0?t.createElement(we.TreeView,{ref:S,tabIndex:j,data:B,focusIdField:M,textField:n.textField,checkField:pe,checkIndeterminateField:fe,expandField:n.expandField,childrenField:ge,expandIcons:!0,onItemClick:J,onCheckChange:J,onExpandChange:be,checkboxes:!0,size:y,item:n.item,dir:D}):t.createElement(Ee,null,X.toLanguageString(m.nodata,m.messages[m.nodata]))))))},Xe=t.useCallback(e=>{for(let r of e)Oe(r.target.clientWidth)},[]),Ee=n.listNoData||rt.ListNoData,X=tt.useLocalization(),Fe=!De||se.valid,Y=P&&l?Pe:G.current,xe=t.createElement(t.Fragment,null,t.createElement("span",{className:i.classNames("k-multiselecttree k-input",n.className,{[`k-input-${Te[y]||y}`]:y,[`k-rounded-${ft[A]||A}`]:A,[`k-input-${z}`]:z,"k-focus":d&&!x,"k-invalid":!Fe,"k-disabled":x,"k-loading":n.loading,"k-required":ve}),tabIndex:j,accessKey:n.accessKey,id:T,style:V?{...L,width:void 0}:L,dir:D,ref:F,onKeyDown:x?void 0:Ue,onMouseDown:He,onFocus:je,onBlur:$e,role:"combobox","aria-haspopup":"tree","aria-expanded":l,"aria-disabled":x,"aria-label":V,"aria-labelledby":n.ariaLabelledBy,"aria-describedby":n.ariaDescribedBy?n.ariaDescribedBy:"tagslist-"+T,"aria-required":n.required,onClick:x?void 0:Ge},t.createElement("div",{id:"tagslist-"+T,className:i.classNames("k-input-values k-chip-list",{[`k-chip-list-${Te[y]||y}`]:y})},Y.length>0&&t.createElement(st,{tag:n.tag,onTagDelete:Je,data:Y,guid:T,focused:O?G.current.find(e=>ee.matchTags(e,O,M)):void 0,size:y})),t.createElement("span",{className:"k-input-inner"},Y.length===0&&t.createElement("span",{className:"k-input-value-text"},ue)),n.loading&&t.createElement(i.IconWrap,{className:"k-input-loading-icon",name:"loading"}),ie&&!x&&Y.length>0&&t.createElement(ot,{onClick:oe}),t.createElement("select",{name:Ke,ref:$,tabIndex:-1,"aria-hidden":!0,title:V,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},t.createElement("option",{value:n.valueMap?n.valueMap.call(void 0,g):g})),!P&&t.createElement(et.Popup,{...N,popupClass:i.classNames(N.popupClass,"k-multiselecttree-popup"),className:i.classNames(N.className,{"k-rtl":D==="rtl"}),style:Ae,anchor:N.anchor||F.current,show:l,onOpen:ze,onClose:_e,ref:U},n.filterable&&t.createElement(Ie,{value:n.filter===void 0?he:n.filter,ref:R,onChange:Ce,onKeyDown:ye,tabIndex:j,size:y,rounded:A,fillMode:z,renderListFilterWrapper:!0,renderPrefixSeparator:!0}),B.length>0?t.createElement(we.TreeView,{style:{height:N.height},ref:S,tabIndex:j,data:B,focusIdField:M,textField:n.textField,checkField:pe,checkIndeterminateField:fe,expandField:n.expandField,childrenField:ge,expandIcons:!0,onItemClick:J,onCheckChange:J,onExpandChange:be,checkboxes:!0,size:y,item:n.item,dir:D}):t.createElement(Ee,null,X.toLanguageString(m.nodata,m.messages[m.nodata])))),P&&Qe());return V?t.createElement(it.FloatingLabel,{label:V,editorValue:ie,editorPlaceholder:ue,editorValid:Fe,editorDisabled:x,editorId:T,style:{width:L?L.width:void 0},children:xe,dir:D}):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};ce.displayName="KendoReactMultiSelectTree";ce.propTypes=mt;exports.MultiSelectTree=ce;exports.MultiSelectTreePropsContext=Me;
|