@progress/kendo-react-listbox 14.5.0-develop.9 → 15.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ListBox.js +1 -1
- package/ListBox.mjs +113 -107
- package/ListBoxContext.d.ts +18 -0
- package/ListBoxContext.js +8 -0
- package/ListBoxContext.mjs +12 -0
- package/ListBoxToolbar.js +1 -1
- package/ListBoxToolbar.mjs +85 -73
- package/README.md +4 -4
- package/dist/cdn/js/kendo-react-listbox.js +1 -1
- package/interfaces/ListBoxProps.d.ts +6 -0
- package/messages/index.d.ts +5 -0
- package/messages/index.js +1 -1
- package/messages/index.mjs +15 -13
- package/package-metadata.mjs +2 -2
- package/package.json +5 -5
package/ListBox.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),u=require("prop-types"),a=require("@progress/kendo-react-common"),Y=require("@progress/kendo-react-intl"),S=require("./interfaces/Enums.js"),Z=require("./ListBoxContext.js"),v=require("./messages/index.js");function ee(i){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const c in i)if(c!=="default"){const g=Object.getOwnPropertyDescriptor(i,c);Object.defineProperty(f,c,g.get?g:{enumerable:!0,get:()=>i[c]})}}return f.default=i,Object.freeze(f)}const s=ee(X),D=s.forwardRef((i,f)=>{const{id:c,style:g,data:d,textField:h,className:T,valueField:C,selectedField:N,onDrop:F,onKeyDown:K,onDragStart:z,onDragLeave:L,onDragOver:q,onItemClick:B,onItemSelect:b,onKeyboardNavigate:m,size:y=E.size,draggable:M=E.draggable,toolbarPosition:I=E.toolbarPosition}=i,O=s.useRef(null),k=s.useRef(null),w=s.useRef(null),[_,A]=s.useState(0),j=Y.useLocalization(),n=s.useCallback(()=>({element:w.current,props:i}),[]);s.useImperativeHandle(k,n),s.useImperativeHandle(f,()=>k.current),a.useWebMcpRegister("listbox",k,i,i.webMcp);const P=c+"-accessibility-id",x=c?`${c}-list`:void 0,R=a.kendoThemeMaps.sizeMap[y]||y,$=t=>{if(N)return!!t[N]},H=t=>h?t[h]:t.toString(),G=t=>{K&&a.dispatchEvent(K,t,n(),void 0)},U=t=>{t.target.classList.contains("k-list-content")&&(i.data.length>0?a.dispatchEvent(i.onDrop,t,n(),{dataItem:i.data[i.data.length-1]}):a.dispatchEvent(i.onDrop,t,n(),{dataItem:null}))},V=()=>I===S.toolbarPosition.NONE||i.toolbar===void 0?`k-listbox-actions-${E.toolbarPosition}`:`k-listbox-actions-${I}`,W=t=>{L&&t.target.classList.contains("k-list-content")&&a.dispatchEvent(L,t,n(),void 0)},p=s.useMemo(()=>new a.Navigation({root:O,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(t,o,e)=>{const r=o.elements.indexOf(t);e.metaKey&&a.dispatchEvent(b,e,n(),{dataItem:d[r]}),a.dispatchEvent(b,e,n(),{dataItem:d[r]})},ArrowDown:(t,o,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(m,e,n(),{actionName:"moveDown"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),o.focusNext(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=o.elements.indexOf(t),l=d[r+1];l&&(a.dispatchEvent(b,e,n(),{dataItem:l}),o.focusNext(t))}},ArrowUp:(t,o,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(m,e,n(),{actionName:"moveUp"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),o.focusPrevious(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=o.elements.indexOf(t),l=d[r-1];l&&(a.dispatchEvent(b,e,n(),{dataItem:l}),o.focusPrevious(t))}},ArrowLeft:(t,o,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(m,e,n(),{actionName:"transferAllFrom"}):e.metaKey&&a.dispatchEvent(m,e,n(),{actionName:"transferFrom"})},ArrowRight:(t,o,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(m,e,n(),{actionName:"transferAllTo"}):e.metaKey&&a.dispatchEvent(m,e,n(),{actionName:"transferTo"})},Backspace:(t,o,e)=>{a.dispatchEvent(m,e,n(),{actionName:"remove"})}}}}),[d]),J=s.useCallback(p.triggerKeyboardEvent.bind(p),[d]),Q=s.useMemo(()=>({listId:x}),[x]);return s.useEffect(()=>(p.initializeRovingTab(),()=>p.removeFocusListener()),[d]),s.createElement("div",{id:c,ref:w,style:g,unselectable:"on",className:a.classNames(T,"k-listbox",{[`k-listbox-${R}`]:y},V())},s.createElement(Z.ListBoxContext.Provider,{value:Q},i.toolbar&&s.createElement(i.toolbar,null)),s.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:O,onDragOver:t=>t.preventDefault(),onDrop:U,onDragLeave:W,onKeyDown:J},s.createElement("div",{className:a.classNames("k-list",{[`k-list-${R}`]:y})},s.createElement("div",{className:"k-list-content"},s.createElement("ul",{id:x,className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:G},d.map((t,o)=>{const e=$(t),r={className:a.classNames("k-list-item",{"k-selected":e,"k-focus":o===_}),role:"option",key:o,id:P+o,"aria-selected":e,"data-uid":P+o,draggable:M,onDragStart:l=>{a.dispatchEvent(z,l,n(),{dataItem:t})},onDragOver:l=>{l.preventDefault(),a.dispatchEvent(q,l,n(),{dataItem:t})},onDrop:l=>{a.dispatchEvent(F,l,n(),{dataItem:t})},onClick:l=>{a.dispatchEvent(B,l,n(),{dataItem:t})},onFocus:()=>A(o)};return i.item?s.createElement(i.item,{selected:e,dataItem:t,...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},t.name)):s.createElement("li",{...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},H(t)))}))))),s.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":j.toLanguageString(v.ariaLabelListBox,v.messages[v.ariaLabelListBox])},d.map((t,o)=>{const e=t[C||h];return s.createElement("option",{key:o,value:e},e)})))}),E={toolbarPosition:S.toolbarPosition.RIGHT,draggable:!0,size:void 0};D.propTypes={size:u.oneOf(["small","medium","large"]),toolbarPosition:u.oneOf(["none","top","bottom","left","right"]),textField:u.string.isRequired,valueField:u.string,selectedField:u.string,data:u.array.isRequired};D.displayName="ListBoxInner";exports.ListBox=D;
|
package/ListBox.mjs
CHANGED
|
@@ -7,175 +7,181 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as a from "react";
|
|
9
9
|
import f from "prop-types";
|
|
10
|
-
import { kendoThemeMaps as
|
|
11
|
-
import { useLocalization as
|
|
12
|
-
import { toolbarPosition as
|
|
13
|
-
import {
|
|
14
|
-
|
|
10
|
+
import { useWebMcpRegister as Y, kendoThemeMaps as Z, Navigation as ee, dispatchEvent as i, classNames as K } from "@progress/kendo-react-common";
|
|
11
|
+
import { useLocalization as te } from "@progress/kendo-react-intl";
|
|
12
|
+
import { toolbarPosition as F } from "./interfaces/Enums.mjs";
|
|
13
|
+
import { ListBoxContext as ae } from "./ListBoxContext.mjs";
|
|
14
|
+
import { ariaLabelListBox as v, messages as oe } from "./messages/index.mjs";
|
|
15
|
+
const O = a.forwardRef((l, R) => {
|
|
15
16
|
const {
|
|
16
|
-
id:
|
|
17
|
-
style:
|
|
17
|
+
id: d,
|
|
18
|
+
style: S,
|
|
18
19
|
data: c,
|
|
19
|
-
textField:
|
|
20
|
-
className:
|
|
21
|
-
valueField:
|
|
22
|
-
selectedField:
|
|
23
|
-
onDrop:
|
|
24
|
-
onKeyDown:
|
|
25
|
-
onDragStart:
|
|
26
|
-
onDragLeave:
|
|
27
|
-
onDragOver:
|
|
28
|
-
onItemClick:
|
|
29
|
-
onItemSelect:
|
|
20
|
+
textField: k,
|
|
21
|
+
className: T,
|
|
22
|
+
valueField: z,
|
|
23
|
+
selectedField: N,
|
|
24
|
+
onDrop: C,
|
|
25
|
+
onKeyDown: p,
|
|
26
|
+
onDragStart: A,
|
|
27
|
+
onDragLeave: E,
|
|
28
|
+
onDragOver: B,
|
|
29
|
+
onItemClick: M,
|
|
30
|
+
onItemSelect: u,
|
|
30
31
|
onKeyboardNavigate: m,
|
|
31
|
-
size:
|
|
32
|
-
draggable: $ =
|
|
33
|
-
toolbarPosition:
|
|
34
|
-
} =
|
|
32
|
+
size: g = b.size,
|
|
33
|
+
draggable: $ = b.draggable,
|
|
34
|
+
toolbarPosition: h = b.toolbarPosition
|
|
35
|
+
} = l, I = a.useRef(null), x = a.useRef(null), w = a.useRef(null), [H, _] = a.useState(0), q = te(), s = a.useCallback(
|
|
35
36
|
() => ({
|
|
36
37
|
element: w.current,
|
|
37
|
-
props:
|
|
38
|
+
props: l
|
|
38
39
|
}),
|
|
39
40
|
[]
|
|
40
41
|
);
|
|
41
|
-
a.useImperativeHandle(
|
|
42
|
-
const
|
|
43
|
-
if (
|
|
44
|
-
return !!t[
|
|
45
|
-
},
|
|
46
|
-
|
|
47
|
-
},
|
|
48
|
-
t.target.classList.contains("k-list-content") && (
|
|
49
|
-
dataItem:
|
|
50
|
-
}) :
|
|
42
|
+
a.useImperativeHandle(x, s), a.useImperativeHandle(R, () => x.current), Y("listbox", x, l, l.webMcp);
|
|
43
|
+
const L = d + "-accessibility-id", D = d ? `${d}-list` : void 0, P = Z.sizeMap[g] || g, G = (t) => {
|
|
44
|
+
if (N)
|
|
45
|
+
return !!t[N];
|
|
46
|
+
}, U = (t) => k ? t[k] : t.toString(), V = (t) => {
|
|
47
|
+
p && i(p, t, s(), void 0);
|
|
48
|
+
}, W = (t) => {
|
|
49
|
+
t.target.classList.contains("k-list-content") && (l.data.length > 0 ? i(l.onDrop, t, s(), {
|
|
50
|
+
dataItem: l.data[l.data.length - 1]
|
|
51
|
+
}) : i(l.onDrop, t, s(), {
|
|
51
52
|
dataItem: null
|
|
52
53
|
}));
|
|
53
|
-
},
|
|
54
|
-
|
|
55
|
-
},
|
|
56
|
-
() => new
|
|
57
|
-
root:
|
|
54
|
+
}, j = () => h === F.NONE || l.toolbar === void 0 ? `k-listbox-actions-${b.toolbarPosition}` : `k-listbox-actions-${h}`, J = (t) => {
|
|
55
|
+
E && t.target.classList.contains("k-list-content") && i(E, t, s(), void 0);
|
|
56
|
+
}, y = a.useMemo(
|
|
57
|
+
() => new ee({
|
|
58
|
+
root: I,
|
|
58
59
|
selectors: [".k-list-item"],
|
|
59
60
|
tabIndex: 0,
|
|
60
61
|
keyboardEvents: {
|
|
61
62
|
keydown: {
|
|
62
|
-
Space: (t,
|
|
63
|
-
const r =
|
|
64
|
-
e.metaKey &&
|
|
63
|
+
Space: (t, o, e) => {
|
|
64
|
+
const r = o.elements.indexOf(t);
|
|
65
|
+
e.metaKey && i(u, e, s(), {
|
|
65
66
|
dataItem: c[r]
|
|
66
|
-
}),
|
|
67
|
+
}), i(u, e, s(), { dataItem: c[r] });
|
|
67
68
|
},
|
|
68
|
-
ArrowDown: (t,
|
|
69
|
+
ArrowDown: (t, o, e) => {
|
|
69
70
|
if (e.metaKey && e.shiftKey)
|
|
70
|
-
|
|
71
|
+
i(m, e, s(), {
|
|
71
72
|
actionName: "moveDown"
|
|
72
73
|
});
|
|
73
74
|
else if (e.metaKey && !e.shiftKey)
|
|
74
|
-
e.preventDefault(),
|
|
75
|
+
e.preventDefault(), o.focusNext(t);
|
|
75
76
|
else if (!(e.shiftKey && !e.metaKey)) {
|
|
76
77
|
e.preventDefault();
|
|
77
|
-
const r =
|
|
78
|
-
|
|
78
|
+
const r = o.elements.indexOf(t), n = c[r + 1];
|
|
79
|
+
n && (i(u, e, s(), { dataItem: n }), o.focusNext(t));
|
|
79
80
|
}
|
|
80
81
|
},
|
|
81
|
-
ArrowUp: (t,
|
|
82
|
+
ArrowUp: (t, o, e) => {
|
|
82
83
|
if (e.metaKey && e.shiftKey)
|
|
83
|
-
|
|
84
|
+
i(m, e, s(), {
|
|
84
85
|
actionName: "moveUp"
|
|
85
86
|
});
|
|
86
87
|
else if (e.metaKey && !e.shiftKey)
|
|
87
|
-
e.preventDefault(),
|
|
88
|
+
e.preventDefault(), o.focusPrevious(t);
|
|
88
89
|
else if (!(e.shiftKey && !e.metaKey)) {
|
|
89
90
|
e.preventDefault();
|
|
90
|
-
const r =
|
|
91
|
-
|
|
91
|
+
const r = o.elements.indexOf(t), n = c[r - 1];
|
|
92
|
+
n && (i(u, e, s(), { dataItem: n }), o.focusPrevious(t));
|
|
92
93
|
}
|
|
93
94
|
},
|
|
94
|
-
ArrowLeft: (t,
|
|
95
|
-
e.metaKey && e.shiftKey ?
|
|
95
|
+
ArrowLeft: (t, o, e) => {
|
|
96
|
+
e.metaKey && e.shiftKey ? i(m, e, s(), {
|
|
96
97
|
actionName: "transferAllFrom"
|
|
97
|
-
}) : e.metaKey &&
|
|
98
|
+
}) : e.metaKey && i(m, e, s(), {
|
|
98
99
|
actionName: "transferFrom"
|
|
99
100
|
});
|
|
100
101
|
},
|
|
101
|
-
ArrowRight: (t,
|
|
102
|
-
e.metaKey && e.shiftKey ?
|
|
102
|
+
ArrowRight: (t, o, e) => {
|
|
103
|
+
e.metaKey && e.shiftKey ? i(m, e, s(), {
|
|
103
104
|
actionName: "transferAllTo"
|
|
104
|
-
}) : e.metaKey &&
|
|
105
|
+
}) : e.metaKey && i(m, e, s(), {
|
|
105
106
|
actionName: "transferTo"
|
|
106
107
|
});
|
|
107
108
|
},
|
|
108
|
-
Backspace: (t,
|
|
109
|
-
|
|
109
|
+
Backspace: (t, o, e) => {
|
|
110
|
+
i(m, e, s(), { actionName: "remove" });
|
|
110
111
|
}
|
|
111
112
|
}
|
|
112
113
|
}
|
|
113
114
|
}),
|
|
114
115
|
[c]
|
|
115
|
-
),
|
|
116
|
-
return a.useEffect(() => (
|
|
116
|
+
), Q = a.useCallback(y.triggerKeyboardEvent.bind(y), [c]), X = a.useMemo(() => ({ listId: D }), [D]);
|
|
117
|
+
return a.useEffect(() => (y.initializeRovingTab(), () => y.removeFocusListener()), [c]), /* @__PURE__ */ a.createElement(
|
|
117
118
|
"div",
|
|
118
119
|
{
|
|
119
|
-
id:
|
|
120
|
+
id: d,
|
|
120
121
|
ref: w,
|
|
121
|
-
style:
|
|
122
|
+
style: S,
|
|
122
123
|
unselectable: "on",
|
|
123
|
-
className:
|
|
124
|
-
|
|
124
|
+
className: K(
|
|
125
|
+
T,
|
|
125
126
|
"k-listbox",
|
|
126
|
-
{ [`k-listbox-${
|
|
127
|
-
|
|
127
|
+
{ [`k-listbox-${P}`]: g },
|
|
128
|
+
j()
|
|
128
129
|
)
|
|
129
130
|
},
|
|
130
|
-
|
|
131
|
+
/* @__PURE__ */ a.createElement(ae.Provider, { value: X }, l.toolbar && /* @__PURE__ */ a.createElement(l.toolbar, null)),
|
|
131
132
|
/* @__PURE__ */ a.createElement(
|
|
132
133
|
"div",
|
|
133
134
|
{
|
|
134
135
|
className: "k-list-scroller k-selectable",
|
|
135
136
|
"data-role": "selectable",
|
|
136
|
-
ref:
|
|
137
|
+
ref: I,
|
|
137
138
|
onDragOver: (t) => t.preventDefault(),
|
|
138
|
-
onDrop:
|
|
139
|
-
onDragLeave:
|
|
140
|
-
onKeyDown:
|
|
139
|
+
onDrop: W,
|
|
140
|
+
onDragLeave: J,
|
|
141
|
+
onKeyDown: Q
|
|
141
142
|
},
|
|
142
|
-
/* @__PURE__ */ a.createElement("div", { className:
|
|
143
|
+
/* @__PURE__ */ a.createElement("div", { className: K("k-list", { [`k-list-${P}`]: g }) }, /* @__PURE__ */ a.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ a.createElement(
|
|
143
144
|
"ul",
|
|
144
145
|
{
|
|
146
|
+
id: D,
|
|
145
147
|
className: "k-list-ul",
|
|
146
148
|
role: "listbox",
|
|
147
149
|
"aria-label": "listbox-container",
|
|
148
|
-
onKeyDown:
|
|
150
|
+
onKeyDown: V
|
|
149
151
|
},
|
|
150
|
-
c.map((t,
|
|
151
|
-
const e =
|
|
152
|
-
className:
|
|
152
|
+
c.map((t, o) => {
|
|
153
|
+
const e = G(t), r = {
|
|
154
|
+
className: K("k-list-item", {
|
|
155
|
+
"k-selected": e,
|
|
156
|
+
"k-focus": o === H
|
|
157
|
+
}),
|
|
153
158
|
role: "option",
|
|
154
|
-
key:
|
|
155
|
-
id:
|
|
159
|
+
key: o,
|
|
160
|
+
id: L + o,
|
|
156
161
|
"aria-selected": e,
|
|
157
|
-
"data-uid":
|
|
162
|
+
"data-uid": L + o,
|
|
158
163
|
draggable: $,
|
|
159
|
-
onDragStart: (
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
+
onDragStart: (n) => {
|
|
165
|
+
i(
|
|
166
|
+
A,
|
|
167
|
+
n,
|
|
168
|
+
s(),
|
|
164
169
|
{ dataItem: t }
|
|
165
170
|
);
|
|
166
171
|
},
|
|
167
|
-
onDragOver: (
|
|
168
|
-
|
|
172
|
+
onDragOver: (n) => {
|
|
173
|
+
n.preventDefault(), i(B, n, s(), { dataItem: t });
|
|
169
174
|
},
|
|
170
|
-
onDrop: (
|
|
171
|
-
|
|
175
|
+
onDrop: (n) => {
|
|
176
|
+
i(C, n, s(), { dataItem: t });
|
|
172
177
|
},
|
|
173
|
-
onClick: (
|
|
174
|
-
|
|
175
|
-
}
|
|
178
|
+
onClick: (n) => {
|
|
179
|
+
i(M, n, s(), { dataItem: t });
|
|
180
|
+
},
|
|
181
|
+
onFocus: () => _(o)
|
|
176
182
|
};
|
|
177
|
-
return
|
|
178
|
-
|
|
183
|
+
return l.item ? /* @__PURE__ */ a.createElement(
|
|
184
|
+
l.item,
|
|
179
185
|
{
|
|
180
186
|
selected: e,
|
|
181
187
|
dataItem: t,
|
|
@@ -183,7 +189,7 @@ const R = a.forwardRef((n, T) => {
|
|
|
183
189
|
key: r.key
|
|
184
190
|
},
|
|
185
191
|
/* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" }, t.name)
|
|
186
|
-
) : /* @__PURE__ */ a.createElement("li", { ...r, key: r.key }, /* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" },
|
|
192
|
+
) : /* @__PURE__ */ a.createElement("li", { ...r, key: r.key }, /* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" }, U(t)));
|
|
187
193
|
})
|
|
188
194
|
)))
|
|
189
195
|
),
|
|
@@ -193,23 +199,23 @@ const R = a.forwardRef((n, T) => {
|
|
|
193
199
|
style: { display: "none" },
|
|
194
200
|
multiple: !0,
|
|
195
201
|
"data-role": "listbox",
|
|
196
|
-
"aria-label":
|
|
197
|
-
|
|
198
|
-
|
|
202
|
+
"aria-label": q.toLanguageString(
|
|
203
|
+
v,
|
|
204
|
+
oe[v]
|
|
199
205
|
)
|
|
200
206
|
},
|
|
201
|
-
c.map((t,
|
|
202
|
-
const e = t[
|
|
203
|
-
return /* @__PURE__ */ a.createElement("option", { key:
|
|
207
|
+
c.map((t, o) => {
|
|
208
|
+
const e = t[z || k];
|
|
209
|
+
return /* @__PURE__ */ a.createElement("option", { key: o, value: e }, e);
|
|
204
210
|
})
|
|
205
211
|
)
|
|
206
212
|
);
|
|
207
|
-
}),
|
|
208
|
-
toolbarPosition:
|
|
213
|
+
}), b = {
|
|
214
|
+
toolbarPosition: F.RIGHT,
|
|
209
215
|
draggable: !0,
|
|
210
216
|
size: void 0
|
|
211
217
|
};
|
|
212
|
-
|
|
218
|
+
O.propTypes = {
|
|
213
219
|
size: f.oneOf(["small", "medium", "large"]),
|
|
214
220
|
toolbarPosition: f.oneOf(["none", "top", "bottom", "left", "right"]),
|
|
215
221
|
textField: f.string.isRequired,
|
|
@@ -217,7 +223,7 @@ R.propTypes = {
|
|
|
217
223
|
selectedField: f.string,
|
|
218
224
|
data: f.array.isRequired
|
|
219
225
|
};
|
|
220
|
-
|
|
226
|
+
O.displayName = "ListBoxInner";
|
|
221
227
|
export {
|
|
222
|
-
|
|
228
|
+
O as ListBox
|
|
223
229
|
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import * as React from 'react';
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
export interface ListBoxContextValue {
|
|
13
|
+
listId?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* @hidden
|
|
17
|
+
*/
|
|
18
|
+
export declare const ListBoxContext: React.Context<ListBoxContextValue>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");function c(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const a=c(r),i=a.createContext({});exports.ListBoxContext=i;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import * as t from "react";
|
|
9
|
+
const o = t.createContext({});
|
|
10
|
+
export {
|
|
11
|
+
o as ListBoxContext
|
|
12
|
+
};
|
package/ListBoxToolbar.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("react"),h=require("prop-types"),p=require("@progress/kendo-react-common"),_=require("@progress/kendo-react-buttons"),H=require("@progress/kendo-react-intl"),c=require("@progress/kendo-svg-icons"),b=require("./messages/index.js"),K=require("./ListBoxContext.js");function M(a){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const i in a)if(i!=="default"){const g=Object.getOwnPropertyDescriptor(a,i);Object.defineProperty(m,i,g.get?g:{enumerable:!0,get:()=>a[i]})}}return m.default=a,Object.freeze(m)}const o=M(U),A=[{name:"moveUp",iconName:"chevron-up",svgIcon:c.chevronUpIcon},{name:"moveDown",iconName:"chevron-down",svgIcon:c.chevronDownIcon},{name:"transferTo",iconName:"chevron-right",svgIcon:c.chevronRightIcon},{name:"transferFrom",iconName:"chevron-left",svgIcon:c.chevronLeftIcon},{name:"transferAllTo",iconName:"chevron-double-right",svgIcon:c.chevronDoubleRightIcon},{name:"transferAllFrom",iconName:"chevron-double-left",svgIcon:c.chevronDoubleLeftIcon},{name:"remove",iconName:"x",svgIcon:c.xIcon}],x=o.forwardRef((a,m)=>{const{tools:i,dir:g,onToolClick:w,size:F=I.size,data:d=I.data,dataConnected:n=I.dataConnected,selectedField:S=I.selectedField}=a,L=H.useLocalization(),{listId:q}=o.useContext(K.ListBoxContext),T=o.useRef(null),y=o.useRef(null),N=o.useCallback(()=>({onToolClick:w,props:a,context:{},state:{},refs:{}}),[]);o.useImperativeHandle(y,N),o.useImperativeHandle(m,()=>y.current);const R=(t,e,s)=>{s.preventDefault(),e.focusNext(t)},D=(t,e,s)=>{s.preventDefault(),e.focusPrevious(t)},f=o.useMemo(()=>new p.Navigation({root:T,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:R,ArrowRight:R,ArrowUp:D,ArrowLeft:D,Enter:(t,e,s)=>{t.click(),e.focusElement(e.current,t)}}}}),[]),B=o.useCallback(f.triggerKeyboardEvent.bind(f),[]);o.useEffect(()=>(f.initializeRovingTab(),()=>f.removeFocusListener()),[]);const E=t=>{switch(t.name){case"chevron-right":return c.chevronLeftIcon;case"chevron-left":return c.chevronRightIcon;case"chevron-double-right":return c.chevronDoubleLeftIcon;case"chevron-double-left":return c.chevronDoubleRightIcon}return t},O=t=>{switch(t){case"chevron-right":return"chevron-left";case"chevron-left":return"chevron-right";case"chevron-double-right":return"chevron-double-left";case"chevron-double-left":return"chevron-double-right"}return t},z=(t,e)=>{p.dispatchEvent(w,t,N(),{toolName:e})},P=t=>{let e=!0;const s=S||"selected",r=d.length,k=n.length,u=d.findIndex(l=>l[s]===!0)>=0,v=n.findIndex(l=>l[s]===!0)>=0;switch(t){case"moveUp":u?e=d.length>0?d[0].selected:!0:v?e=n.length>0?n[0].selected:!0:e=!0;break;case"moveDown":u?e=d[r-1]?d[r-1].selected:!0:v?e=n.length>0?n[k-1].selected:!0:e=!0;break;case"transferTo":e=!(n&&u);break;case"transferFrom":n?e=!(n&&v):e=!0;break;case"transferAllTo":e=!(n&&d.length>0);break;case"transferAllFrom":e=!(n&&n.length>0);break;case"remove":e=!(u||v);break}return e},C=g==="rtl",j=L.toLanguageString(b.listBoxActions,b.messages[b.listBoxActions]);return o.createElement("div",{className:p.classNames("k-listbox-actions"),ref:T,onKeyDown:B,role:"toolbar","aria-label":j,"aria-controls":q},i&&i.map((t,e)=>{const s=A.findIndex(l=>l.name===t),r=A[s],k=P(r.name),u=`listbox.${r.name}`,v=L.toLanguageString(u,b.messages[u]);return o.createElement(_.Button,{size:F,key:e,disabled:k,"data-command":r.name,title:v,"aria-label":v,icon:C?O(r.iconName):r.iconName,svgIcon:C?E(r.svgIcon):r.svgIcon,onClick:l=>{l.preventDefault(),z(l,r.name)}})}))}),I={data:[],dataConnected:[],selectedField:"selected",size:void 0};x.propTypes={data:h.array.isRequired,dataConnected:h.array.isRequired,tools:h.array,selectedField:h.string,dir:h.string,size:h.oneOf(["small","medium","large"])};x.displayName="ListBoxToolbarInner";exports.ListBoxToolbar=x;
|
package/ListBoxToolbar.mjs
CHANGED
|
@@ -5,31 +5,32 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
8
|
+
import * as n from "react";
|
|
9
9
|
import d from "prop-types";
|
|
10
|
-
import { Navigation as
|
|
11
|
-
import { Button as
|
|
12
|
-
import { useLocalization as
|
|
13
|
-
import { chevronUpIcon as
|
|
14
|
-
import { messages as
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
{ name: "
|
|
18
|
-
{ name: "
|
|
19
|
-
{ name: "
|
|
20
|
-
{ name: "
|
|
21
|
-
{ name: "
|
|
22
|
-
{ name: "
|
|
23
|
-
|
|
10
|
+
import { Navigation as _, classNames as $, dispatchEvent as j } from "@progress/kendo-react-common";
|
|
11
|
+
import { Button as G } from "@progress/kendo-react-buttons";
|
|
12
|
+
import { useLocalization as J } from "@progress/kendo-react-intl";
|
|
13
|
+
import { chevronUpIcon as Q, chevronDownIcon as V, chevronRightIcon as C, chevronLeftIcon as D, chevronDoubleRightIcon as F, chevronDoubleLeftIcon as R, xIcon as W } from "@progress/kendo-svg-icons";
|
|
14
|
+
import { listBoxActions as T, messages as L } from "./messages/index.mjs";
|
|
15
|
+
import { ListBoxContext as X } from "./ListBoxContext.mjs";
|
|
16
|
+
const y = [
|
|
17
|
+
{ name: "moveUp", iconName: "chevron-up", svgIcon: Q },
|
|
18
|
+
{ name: "moveDown", iconName: "chevron-down", svgIcon: V },
|
|
19
|
+
{ name: "transferTo", iconName: "chevron-right", svgIcon: C },
|
|
20
|
+
{ name: "transferFrom", iconName: "chevron-left", svgIcon: D },
|
|
21
|
+
{ name: "transferAllTo", iconName: "chevron-double-right", svgIcon: F },
|
|
22
|
+
{ name: "transferAllFrom", iconName: "chevron-double-left", svgIcon: R },
|
|
23
|
+
{ name: "remove", iconName: "x", svgIcon: W }
|
|
24
|
+
], A = n.forwardRef((h, E) => {
|
|
24
25
|
const {
|
|
25
26
|
tools: f,
|
|
26
|
-
dir:
|
|
27
|
+
dir: z,
|
|
27
28
|
onToolClick: g,
|
|
28
|
-
size:
|
|
29
|
+
size: B = u.size,
|
|
29
30
|
data: s = u.data,
|
|
30
|
-
dataConnected:
|
|
31
|
-
selectedField:
|
|
32
|
-
} = h,
|
|
31
|
+
dataConnected: o = u.dataConnected,
|
|
32
|
+
selectedField: S = u.selectedField
|
|
33
|
+
} = h, b = J(), { listId: P } = n.useContext(X), p = n.useRef(null), I = n.useRef(null), k = n.useCallback(
|
|
33
34
|
() => ({
|
|
34
35
|
onToolClick: g,
|
|
35
36
|
props: h,
|
|
@@ -39,47 +40,47 @@ const N = [
|
|
|
39
40
|
}),
|
|
40
41
|
[]
|
|
41
42
|
);
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
() =>
|
|
43
|
+
n.useImperativeHandle(I, k), n.useImperativeHandle(
|
|
44
|
+
E,
|
|
45
|
+
() => I.current
|
|
45
46
|
);
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
}, w = (t, e,
|
|
49
|
-
|
|
50
|
-
}, m =
|
|
51
|
-
() => new
|
|
52
|
-
root:
|
|
47
|
+
const x = (t, e, a) => {
|
|
48
|
+
a.preventDefault(), e.focusNext(t);
|
|
49
|
+
}, w = (t, e, a) => {
|
|
50
|
+
a.preventDefault(), e.focusPrevious(t);
|
|
51
|
+
}, m = n.useMemo(
|
|
52
|
+
() => new _({
|
|
53
|
+
root: p,
|
|
53
54
|
selectors: [".k-button:not([disabled])"],
|
|
54
55
|
tabIndex: 0,
|
|
55
56
|
keyboardEvents: {
|
|
56
57
|
keydown: {
|
|
57
|
-
ArrowDown:
|
|
58
|
-
ArrowRight:
|
|
58
|
+
ArrowDown: x,
|
|
59
|
+
ArrowRight: x,
|
|
59
60
|
ArrowUp: w,
|
|
60
61
|
ArrowLeft: w,
|
|
61
|
-
Enter: (t, e,
|
|
62
|
+
Enter: (t, e, a) => {
|
|
62
63
|
t.click(), e.focusElement(e.current, t);
|
|
63
64
|
}
|
|
64
65
|
}
|
|
65
66
|
}
|
|
66
67
|
}),
|
|
67
68
|
[]
|
|
68
|
-
),
|
|
69
|
-
|
|
70
|
-
const
|
|
69
|
+
), U = n.useCallback(m.triggerKeyboardEvent.bind(m), []);
|
|
70
|
+
n.useEffect(() => (m.initializeRovingTab(), () => m.removeFocusListener()), []);
|
|
71
|
+
const H = (t) => {
|
|
71
72
|
switch (t.name) {
|
|
72
73
|
case "chevron-right":
|
|
73
|
-
return
|
|
74
|
+
return D;
|
|
74
75
|
case "chevron-left":
|
|
75
|
-
return
|
|
76
|
+
return C;
|
|
76
77
|
case "chevron-double-right":
|
|
77
|
-
return
|
|
78
|
+
return R;
|
|
78
79
|
case "chevron-double-left":
|
|
79
|
-
return
|
|
80
|
+
return F;
|
|
80
81
|
}
|
|
81
82
|
return t;
|
|
82
|
-
},
|
|
83
|
+
}, K = (t) => {
|
|
83
84
|
switch (t) {
|
|
84
85
|
case "chevron-right":
|
|
85
86
|
return "chevron-left";
|
|
@@ -91,62 +92,73 @@ const N = [
|
|
|
91
92
|
return "chevron-double-right";
|
|
92
93
|
}
|
|
93
94
|
return t;
|
|
94
|
-
},
|
|
95
|
-
|
|
96
|
-
},
|
|
95
|
+
}, q = (t, e) => {
|
|
96
|
+
j(g, t, k(), { toolName: e });
|
|
97
|
+
}, O = (t) => {
|
|
97
98
|
let e = !0;
|
|
98
|
-
const
|
|
99
|
+
const a = S || "selected", r = s.length, v = o.length, l = s.findIndex((c) => c[a] === !0) >= 0, i = o.findIndex((c) => c[a] === !0) >= 0;
|
|
99
100
|
switch (t) {
|
|
100
101
|
case "moveUp":
|
|
101
|
-
l ? e = s.length > 0 ? s[0].selected : !0 : i ? e =
|
|
102
|
+
l ? e = s.length > 0 ? s[0].selected : !0 : i ? e = o.length > 0 ? o[0].selected : !0 : e = !0;
|
|
102
103
|
break;
|
|
103
104
|
case "moveDown":
|
|
104
|
-
l ? e = s[
|
|
105
|
+
l ? e = s[r - 1] ? s[r - 1].selected : !0 : i ? e = o.length > 0 ? o[v - 1].selected : !0 : e = !0;
|
|
105
106
|
break;
|
|
106
107
|
case "transferTo":
|
|
107
|
-
e = !(
|
|
108
|
+
e = !(o && l);
|
|
108
109
|
break;
|
|
109
110
|
case "transferFrom":
|
|
110
|
-
|
|
111
|
+
o ? e = !(o && i) : e = !0;
|
|
111
112
|
break;
|
|
112
113
|
case "transferAllTo":
|
|
113
|
-
e = !(
|
|
114
|
+
e = !(o && s.length > 0);
|
|
114
115
|
break;
|
|
115
116
|
case "transferAllFrom":
|
|
116
|
-
e = !(
|
|
117
|
+
e = !(o && o.length > 0);
|
|
117
118
|
break;
|
|
118
119
|
case "remove":
|
|
119
120
|
e = !(l || i);
|
|
120
121
|
break;
|
|
121
122
|
}
|
|
122
123
|
return e;
|
|
123
|
-
},
|
|
124
|
-
return /* @__PURE__ */
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
124
|
+
}, N = z === "rtl", M = b.toLanguageString(T, L[T]);
|
|
125
|
+
return /* @__PURE__ */ n.createElement(
|
|
126
|
+
"div",
|
|
127
|
+
{
|
|
128
|
+
className: $("k-listbox-actions"),
|
|
129
|
+
ref: p,
|
|
130
|
+
onKeyDown: U,
|
|
131
|
+
role: "toolbar",
|
|
132
|
+
"aria-label": M,
|
|
133
|
+
"aria-controls": P
|
|
134
|
+
},
|
|
135
|
+
f && f.map((t, e) => {
|
|
136
|
+
const a = y.findIndex((c) => c.name === t), r = y[a], v = O(r.name), l = `listbox.${r.name}`, i = b.toLanguageString(l, L[l]);
|
|
137
|
+
return /* @__PURE__ */ n.createElement(
|
|
138
|
+
G,
|
|
139
|
+
{
|
|
140
|
+
size: B,
|
|
141
|
+
key: e,
|
|
142
|
+
disabled: v,
|
|
143
|
+
"data-command": r.name,
|
|
144
|
+
title: i,
|
|
145
|
+
"aria-label": i,
|
|
146
|
+
icon: N ? K(r.iconName) : r.iconName,
|
|
147
|
+
svgIcon: N ? H(r.svgIcon) : r.svgIcon,
|
|
148
|
+
onClick: (c) => {
|
|
149
|
+
c.preventDefault(), q(c, r.name);
|
|
150
|
+
}
|
|
139
151
|
}
|
|
140
|
-
|
|
141
|
-
)
|
|
142
|
-
|
|
152
|
+
);
|
|
153
|
+
})
|
|
154
|
+
);
|
|
143
155
|
}), u = {
|
|
144
156
|
data: [],
|
|
145
157
|
dataConnected: [],
|
|
146
158
|
selectedField: "selected",
|
|
147
159
|
size: void 0
|
|
148
160
|
};
|
|
149
|
-
|
|
161
|
+
A.propTypes = {
|
|
150
162
|
data: d.array.isRequired,
|
|
151
163
|
dataConnected: d.array.isRequired,
|
|
152
164
|
tools: d.array,
|
|
@@ -154,7 +166,7 @@ L.propTypes = {
|
|
|
154
166
|
dir: d.string,
|
|
155
167
|
size: d.oneOf(["small", "medium", "large"])
|
|
156
168
|
};
|
|
157
|
-
|
|
169
|
+
A.displayName = "ListBoxToolbarInner";
|
|
158
170
|
export {
|
|
159
|
-
|
|
171
|
+
A as ListBoxToolbar
|
|
160
172
|
};
|
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
[](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox&utm_content=banner)
|
|
1
|
+
[](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox&utm_content=banner)
|
|
2
2
|
|
|
3
3
|
# KendoReact ListBox Component for React
|
|
4
4
|
|
|
5
5
|
> **Important**
|
|
6
6
|
>
|
|
7
7
|
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)—an enterprise-grade UI library with 120+ free and premium components.
|
|
8
|
-
> - This is a free React ListBox component. You can use it even in production, no sign-up or license required. If you're looking for more free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
8
|
+
> - This is a free React ListBox component. You can use it even in production, no sign-up or license required. If you're looking for more free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
|
|
9
9
|
> - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox).
|
|
10
10
|
> - The [30-day free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox) gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
|
|
11
11
|
|
|
@@ -49,7 +49,7 @@ import { ListBox } from '@progress/kendo-react-listbox';
|
|
|
49
49
|
|
|
50
50
|
The following table outlines the key resources available with KendoReact and KendoReact Free.
|
|
51
51
|
|
|
52
|
-
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
|
|
52
|
+
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
|
|
53
53
|
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
54
54
|
| React components | 50+ | 120+ |
|
|
55
55
|
| Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
|
|
@@ -72,7 +72,7 @@ For any issues you might encounter while working with the KendoReact ListBox, us
|
|
|
72
72
|
## Resources
|
|
73
73
|
|
|
74
74
|
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)
|
|
75
|
-
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
75
|
+
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
|
|
76
76
|
- [Get Started with the KendoReact ListBox](https://www.telerik.com/kendo-react-ui/components/listbox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)
|
|
77
77
|
- [API Reference of the KendoReact ListBox](https://www.telerik.com/kendo-react-ui/components/listbox/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)
|
|
78
78
|
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListbox={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoSvgIcons)}(this,function(e,t,a,o,n,r,s){"use strict";function l(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var i=l(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const d="listbox.moveUp",m="listbox.moveDown",u="listbox.transferTo",f="listbox.transferFrom",v="listbox.transferAllTo",p="listbox.transferAllFrom",h="listbox.remove",b="listbox.ariaLabel",g={[d]:"Move Up",[m]:"Move Down",[u]:"Transfer To",[f]:"Transfer From",[v]:"Transfer All To",[p]:"Transfer All From",[h]:"Delete",[b]:"ListBox"},x=i.forwardRef((e,t)=>{const{id:a,style:r,data:s,textField:l,className:d,valueField:m,selectedField:u,onDrop:f,onKeyDown:v,onDragStart:p,onDragLeave:h,onDragOver:x,onItemClick:k,onItemSelect:y,onKeyboardNavigate:I,size:E=D.size,draggable:w=D.draggable,toolbarPosition:T=D.toolbarPosition}=e,N=i.useRef(null),B=i.useRef(null),O=i.useRef(null),K=n.useLocalization(),L=i.useCallback(()=>({element:O.current,props:e}),[]);i.useImperativeHandle(B,L),i.useImperativeHandle(t,()=>B.current);const R=a+"-accessibility-id",F=o.kendoThemeMaps.sizeMap[E]||E,A=i.useMemo(()=>new o.Navigation({root:N,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,a)=>{const n=t.elements.indexOf(e);a.metaKey&&o.dispatchEvent(y,a,L(),{dataItem:s[n]}),o.dispatchEvent(y,a,L(),{dataItem:s[n]})},ArrowDown:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(I,a,L(),{actionName:"moveDown"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusNext(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),r=s[n+1];r&&(o.dispatchEvent(y,a,L(),{dataItem:r}),t.focusNext(e))}},ArrowUp:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(I,a,L(),{actionName:"moveUp"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusPrevious(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),r=s[n-1];r&&(o.dispatchEvent(y,a,L(),{dataItem:r}),t.focusPrevious(e))}},ArrowLeft:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(I,a,L(),{actionName:"transferAllFrom"}):a.metaKey&&o.dispatchEvent(I,a,L(),{actionName:"transferFrom"})},ArrowRight:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(I,a,L(),{actionName:"transferAllTo"}):a.metaKey&&o.dispatchEvent(I,a,L(),{actionName:"transferTo"})},Backspace:(e,t,a)=>{o.dispatchEvent(I,a,L(),{actionName:"remove"})}}}}),[s]),z=i.useCallback(A.triggerKeyboardEvent.bind(A),[s]);return i.useEffect(()=>(A.initializeRovingTab(),()=>A.removeFocusListener()),[s]),i.createElement("div",{id:a,ref:O,style:r,unselectable:"on",className:o.classNames(d,"k-listbox",{[`k-listbox-${F}`]:E},T===c.NONE||void 0===e.toolbar?`k-listbox-actions-${D.toolbarPosition}`:`k-listbox-actions-${T}`)},e.toolbar&&i.createElement(e.toolbar,null),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:N,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?o.dispatchEvent(e.onDrop,t,L(),{dataItem:e.data[e.data.length-1]}):o.dispatchEvent(e.onDrop,t,L(),{dataItem:null}))},onDragLeave:e=>{h&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(h,e,L(),void 0)},onKeyDown:z},i.createElement("div",{className:o.classNames("k-list",{[`k-list-${F}`]:E})},i.createElement("div",{className:"k-list-content"},i.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:e=>{v&&o.dispatchEvent(v,e,L(),void 0)}},s.map((t,a)=>{const n=(e=>{if(u)return!!e[u]})(t),r={className:o.classNames("k-list-item",{"k-selected":n}),role:"option",key:a,id:R+a,"aria-selected":n,"data-uid":R+a,draggable:w,onDragStart:e=>{o.dispatchEvent(p,e,L(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),o.dispatchEvent(x,e,L(),{dataItem:t})},onDrop:e=>{o.dispatchEvent(f,e,L(),{dataItem:t})},onClick:e=>{o.dispatchEvent(k,e,L(),{dataItem:t})}};return e.item?i.createElement(e.item,{selected:n,dataItem:t,...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},t.name)):i.createElement("li",{...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},(e=>l?e[l]:e.toString())(t)))}))))),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":K.toLanguageString(b,g[b])},s.map((e,t)=>{const a=e[m||l];return i.createElement("option",{key:t,value:a},a)})))}),D={toolbarPosition:c.RIGHT,draggable:!0,size:void 0};x.propTypes={size:a.oneOf(["small","medium","large"]),toolbarPosition:a.oneOf(["none","top","bottom","left","right"]),textField:a.string.isRequired,valueField:a.string,selectedField:a.string,data:a.array.isRequired},x.displayName="ListBoxInner";const k=[{name:"moveUp",iconName:"chevron-up",svgIcon:s.chevronUpIcon},{name:"moveDown",iconName:"chevron-down",svgIcon:s.chevronDownIcon},{name:"transferTo",iconName:"chevron-right",svgIcon:s.chevronRightIcon},{name:"transferFrom",iconName:"chevron-left",svgIcon:s.chevronLeftIcon},{name:"transferAllTo",iconName:"chevron-double-right",svgIcon:s.chevronDoubleRightIcon},{name:"transferAllFrom",iconName:"chevron-double-left",svgIcon:s.chevronDoubleLeftIcon},{name:"remove",iconName:"x",svgIcon:s.xIcon}],y=i.forwardRef((e,t)=>{const{tools:a,dir:l,onToolClick:c,size:d=I.size,data:m=I.data,dataConnected:u=I.dataConnected,selectedField:f=I.selectedField}=e,v=n.useLocalization(),p=i.useRef(null),h=i.useRef(null),b=i.useCallback(()=>({onToolClick:c,props:e,context:{},state:{},refs:{}}),[]);i.useImperativeHandle(h,b),i.useImperativeHandle(t,()=>h.current);const x=(e,t,a)=>{a.preventDefault(),t.focusNext(e)},D=(e,t,a)=>{a.preventDefault(),t.focusPrevious(e)},y=i.useMemo(()=>new o.Navigation({root:p,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:x,ArrowRight:x,ArrowUp:D,ArrowLeft:D,Enter:(e,t,a)=>{e.click(),t.focusElement(t.current,e)}}}}),[]),E=i.useCallback(y.triggerKeyboardEvent.bind(y),[]);i.useEffect(()=>(y.initializeRovingTab(),()=>y.removeFocusListener()),[]);const w=e=>{switch(e.name){case"chevron-right":return s.chevronLeftIcon;case"chevron-left":return s.chevronRightIcon;case"chevron-double-right":return s.chevronDoubleLeftIcon;case"chevron-double-left":return s.chevronDoubleRightIcon}return e},T=e=>{switch(e){case"chevron-right":return"chevron-left";case"chevron-left":return"chevron-right";case"chevron-double-right":return"chevron-double-left";case"chevron-double-left":return"chevron-double-right"}return e},N="rtl"===l;return i.createElement("div",{className:o.classNames("k-listbox-actions"),ref:p,onKeyDown:E},a&&a.map((e,t)=>{const a=k.findIndex(t=>t.name===e),n=k[a],s=(e=>{let t=!0;const a=f||"selected",o=m.length,n=u.length,r=m.findIndex(e=>!0===e[a])>=0,s=u.findIndex(e=>!0===e[a])>=0;switch(e){case"moveUp":t=r?!(m.length>0)||m[0].selected:!s||!(u.length>0)||u[0].selected;break;case"moveDown":t=r?!m[o-1]||m[o-1].selected:!s||!(u.length>0)||u[n-1].selected;break;case"transferTo":t=!(u&&r);break;case"transferFrom":t=!u||!(u&&s);break;case"transferAllTo":t=!(u&&m.length>0);break;case"transferAllFrom":t=!(u&&u.length>0);break;case"remove":t=!(r||s)}return t})(n.name),l=`listbox.${n.name}`,p=v.toLanguageString(l,g[l]);return i.createElement(r.Button,{size:d,key:t,disabled:s,"data-command":n.name,title:p,"aria-label":p,icon:N?T(n.iconName):n.iconName,svgIcon:N?w(n.svgIcon):n.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{o.dispatchEvent(c,e,b(),{toolName:t})})(e,n.name)}})}))}),I={data:[],dataConnected:[],selectedField:"selected",size:void 0};y.propTypes={data:a.array.isRequired,dataConnected:a.array.isRequired,tools:a.array,selectedField:a.string,dir:a.string,size:a.oneOf(["small","medium","large"])},y.displayName="ListBoxToolbarInner";const E=(e,t,a)=>{const o=a.splice(e,1)[0];return a.splice(t,0,o),a},w=o.withIdHOC(x);w.displayName="KendoReactListBox",e.ListBox=w,e.ListBoxToolbar=y,e.moveItem=E,e.processListBoxData=(e=[],t=[],a,o)=>{let n=[],r=[],s=[];const l={listBoxOneData:e,listBoxTwoData:t};switch(a){case"moveUp":n=[...e],n.forEach((e,t)=>{e[o]&&(n=E(t,t-1,n))}),s=[...t],s.forEach((e,t)=>{e[o]&&(s=E(t,t-1,s))}),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach((e,t)=>{e[o]&&(n=E(t,t-1,n))}),s=t.reverse(),s.forEach((e,t)=>{e[o]&&(s=E(t,t-1,s))}),l.listBoxOneData=[...n].reverse(),l.listBoxTwoData=[...s].reverse();break;case"transferTo":n=e.filter(e=>!e[o]),r=e.filter(e=>e[o]),s=t.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferFrom":s=t.filter(e=>!e[o]),r=t.filter(e=>e[o]),n=e.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":s=t.filter(e=>!e[o]),n=e.filter(e=>!e[o]),l.listBoxOneData=n,l.listBoxTwoData=s}return l},e.processListBoxDragAndDrop=(e=[],t=[],a,o,n)=>{const r=e.findIndex(e=>e[n]===a[n]),s=t.findIndex(e=>e[n]===a[n]),l=null!==o?e.findIndex(e=>e[n]===o[n]):-1,i=null!==o?t.findIndex(e=>e[n]===o[n]):-1,c=r>=0,d=s>=0,m=l>=0,u=i>=0,f=[...e],v=[...t];return c&&m?{listBoxOneData:E(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:E(s,i,t)}:c&&(u||null===o)?(null===o?v.push(e[r]):v.splice(i+1,0,e[r]),f.splice(r,1),{listBoxOneData:f,listBoxTwoData:v}):d&&(m||null===o)?(null===o?f.push(t[s]):f.splice(l+1,0,t[s]),v.splice(s,1),{listBoxOneData:f,listBoxTwoData:v}):{listBoxOneData:e,listBoxTwoData:t}}});
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListbox={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoSvgIcons)}(this,function(e,t,o,a,n,r,s){"use strict";function l(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:function(){return e[o]}})}}),t.default=e,Object.freeze(t)}var i=l(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const d=i.createContext({}),m="listbox.moveUp",u="listbox.moveDown",v="listbox.transferTo",f="listbox.transferFrom",p="listbox.transferAllTo",b="listbox.transferAllFrom",h="listbox.remove",g="listbox.actions",x="listbox.ariaLabel",D={[m]:"Move up",[u]:"Move down",[v]:"Move right",[f]:"Move left",[p]:"Move all right",[b]:"Move all left",[h]:"Remove",[g]:"ListBox actions",[x]:"ListBox"},k=i.forwardRef((e,t)=>{const{id:o,style:r,data:s,textField:l,className:m,valueField:u,selectedField:v,onDrop:f,onKeyDown:p,onDragStart:b,onDragLeave:h,onDragOver:g,onItemClick:k,onItemSelect:I,onKeyboardNavigate:E,size:w=y.size,draggable:N=y.draggable,toolbarPosition:T=y.toolbarPosition}=e,B=i.useRef(null),O=i.useRef(null),K=i.useRef(null),[L,R]=i.useState(0),F=n.useLocalization(),A=i.useCallback(()=>({element:K.current,props:e}),[]);i.useImperativeHandle(O,A),i.useImperativeHandle(t,()=>O.current),a.useWebMcpRegister("listbox",O,e,e.webMcp);const C=o+"-accessibility-id",z=o?`${o}-list`:void 0,M=a.kendoThemeMaps.sizeMap[w]||w,P=i.useMemo(()=>new a.Navigation({root:B,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,o)=>{const n=t.elements.indexOf(e);o.metaKey&&a.dispatchEvent(I,o,A(),{dataItem:s[n]}),a.dispatchEvent(I,o,A(),{dataItem:s[n]})},ArrowDown:(e,t,o)=>{if(o.metaKey&&o.shiftKey)a.dispatchEvent(E,o,A(),{actionName:"moveDown"});else if(o.metaKey&&!o.shiftKey)o.preventDefault(),t.focusNext(e);else if(!o.shiftKey||o.metaKey){o.preventDefault();const n=t.elements.indexOf(e),r=s[n+1];r&&(a.dispatchEvent(I,o,A(),{dataItem:r}),t.focusNext(e))}},ArrowUp:(e,t,o)=>{if(o.metaKey&&o.shiftKey)a.dispatchEvent(E,o,A(),{actionName:"moveUp"});else if(o.metaKey&&!o.shiftKey)o.preventDefault(),t.focusPrevious(e);else if(!o.shiftKey||o.metaKey){o.preventDefault();const n=t.elements.indexOf(e),r=s[n-1];r&&(a.dispatchEvent(I,o,A(),{dataItem:r}),t.focusPrevious(e))}},ArrowLeft:(e,t,o)=>{o.metaKey&&o.shiftKey?a.dispatchEvent(E,o,A(),{actionName:"transferAllFrom"}):o.metaKey&&a.dispatchEvent(E,o,A(),{actionName:"transferFrom"})},ArrowRight:(e,t,o)=>{o.metaKey&&o.shiftKey?a.dispatchEvent(E,o,A(),{actionName:"transferAllTo"}):o.metaKey&&a.dispatchEvent(E,o,A(),{actionName:"transferTo"})},Backspace:(e,t,o)=>{a.dispatchEvent(E,o,A(),{actionName:"remove"})}}}}),[s]),q=i.useCallback(P.triggerKeyboardEvent.bind(P),[s]),S=i.useMemo(()=>({listId:z}),[z]);return i.useEffect(()=>(P.initializeRovingTab(),()=>P.removeFocusListener()),[s]),i.createElement("div",{id:o,ref:K,style:r,unselectable:"on",className:a.classNames(m,"k-listbox",{[`k-listbox-${M}`]:w},T===c.NONE||void 0===e.toolbar?`k-listbox-actions-${y.toolbarPosition}`:`k-listbox-actions-${T}`)},i.createElement(d.Provider,{value:S},e.toolbar&&i.createElement(e.toolbar,null)),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:B,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?a.dispatchEvent(e.onDrop,t,A(),{dataItem:e.data[e.data.length-1]}):a.dispatchEvent(e.onDrop,t,A(),{dataItem:null}))},onDragLeave:e=>{h&&e.target.classList.contains("k-list-content")&&a.dispatchEvent(h,e,A(),void 0)},onKeyDown:q},i.createElement("div",{className:a.classNames("k-list",{[`k-list-${M}`]:w})},i.createElement("div",{className:"k-list-content"},i.createElement("ul",{id:z,className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:e=>{p&&a.dispatchEvent(p,e,A(),void 0)}},s.map((t,o)=>{const n=(e=>{if(v)return!!e[v]})(t),r={className:a.classNames("k-list-item",{"k-selected":n,"k-focus":o===L}),role:"option",key:o,id:C+o,"aria-selected":n,"data-uid":C+o,draggable:N,onDragStart:e=>{a.dispatchEvent(b,e,A(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),a.dispatchEvent(g,e,A(),{dataItem:t})},onDrop:e=>{a.dispatchEvent(f,e,A(),{dataItem:t})},onClick:e=>{a.dispatchEvent(k,e,A(),{dataItem:t})},onFocus:()=>R(o)};return e.item?i.createElement(e.item,{selected:n,dataItem:t,...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},t.name)):i.createElement("li",{...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},(e=>l?e[l]:e.toString())(t)))}))))),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":F.toLanguageString(x,D[x])},s.map((e,t)=>{const o=e[u||l];return i.createElement("option",{key:t,value:o},o)})))}),y={toolbarPosition:c.RIGHT,draggable:!0,size:void 0};k.propTypes={size:o.oneOf(["small","medium","large"]),toolbarPosition:o.oneOf(["none","top","bottom","left","right"]),textField:o.string.isRequired,valueField:o.string,selectedField:o.string,data:o.array.isRequired},k.displayName="ListBoxInner";const I=[{name:"moveUp",iconName:"chevron-up",svgIcon:s.chevronUpIcon},{name:"moveDown",iconName:"chevron-down",svgIcon:s.chevronDownIcon},{name:"transferTo",iconName:"chevron-right",svgIcon:s.chevronRightIcon},{name:"transferFrom",iconName:"chevron-left",svgIcon:s.chevronLeftIcon},{name:"transferAllTo",iconName:"chevron-double-right",svgIcon:s.chevronDoubleRightIcon},{name:"transferAllFrom",iconName:"chevron-double-left",svgIcon:s.chevronDoubleLeftIcon},{name:"remove",iconName:"x",svgIcon:s.xIcon}],E=i.forwardRef((e,t)=>{const{tools:o,dir:l,onToolClick:c,size:m=w.size,data:u=w.data,dataConnected:v=w.dataConnected,selectedField:f=w.selectedField}=e,p=n.useLocalization(),{listId:b}=i.useContext(d),h=i.useRef(null),x=i.useRef(null),k=i.useCallback(()=>({onToolClick:c,props:e,context:{},state:{},refs:{}}),[]);i.useImperativeHandle(x,k),i.useImperativeHandle(t,()=>x.current);const y=(e,t,o)=>{o.preventDefault(),t.focusNext(e)},E=(e,t,o)=>{o.preventDefault(),t.focusPrevious(e)},N=i.useMemo(()=>new a.Navigation({root:h,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:y,ArrowRight:y,ArrowUp:E,ArrowLeft:E,Enter:(e,t,o)=>{e.click(),t.focusElement(t.current,e)}}}}),[]),T=i.useCallback(N.triggerKeyboardEvent.bind(N),[]);i.useEffect(()=>(N.initializeRovingTab(),()=>N.removeFocusListener()),[]);const B=e=>{switch(e.name){case"chevron-right":return s.chevronLeftIcon;case"chevron-left":return s.chevronRightIcon;case"chevron-double-right":return s.chevronDoubleLeftIcon;case"chevron-double-left":return s.chevronDoubleRightIcon}return e},O=e=>{switch(e){case"chevron-right":return"chevron-left";case"chevron-left":return"chevron-right";case"chevron-double-right":return"chevron-double-left";case"chevron-double-left":return"chevron-double-right"}return e},K="rtl"===l,L=p.toLanguageString(g,D[g]);return i.createElement("div",{className:a.classNames("k-listbox-actions"),ref:h,onKeyDown:T,role:"toolbar","aria-label":L,"aria-controls":b},o&&o.map((e,t)=>{const o=I.findIndex(t=>t.name===e),n=I[o],s=(e=>{let t=!0;const o=f||"selected",a=u.length,n=v.length,r=u.findIndex(e=>!0===e[o])>=0,s=v.findIndex(e=>!0===e[o])>=0;switch(e){case"moveUp":t=r?!(u.length>0)||u[0].selected:!s||!(v.length>0)||v[0].selected;break;case"moveDown":t=r?!u[a-1]||u[a-1].selected:!s||!(v.length>0)||v[n-1].selected;break;case"transferTo":t=!(v&&r);break;case"transferFrom":t=!v||!(v&&s);break;case"transferAllTo":t=!(v&&u.length>0);break;case"transferAllFrom":t=!(v&&v.length>0);break;case"remove":t=!(r||s)}return t})(n.name),l=`listbox.${n.name}`,d=p.toLanguageString(l,D[l]);return i.createElement(r.Button,{size:m,key:t,disabled:s,"data-command":n.name,title:d,"aria-label":d,icon:K?O(n.iconName):n.iconName,svgIcon:K?B(n.svgIcon):n.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{a.dispatchEvent(c,e,k(),{toolName:t})})(e,n.name)}})}))}),w={data:[],dataConnected:[],selectedField:"selected",size:void 0};E.propTypes={data:o.array.isRequired,dataConnected:o.array.isRequired,tools:o.array,selectedField:o.string,dir:o.string,size:o.oneOf(["small","medium","large"])},E.displayName="ListBoxToolbarInner";const N=(e,t,o)=>{const a=o.splice(e,1)[0];return o.splice(t,0,a),o},T=a.withIdHOC(k);T.displayName="KendoReactListBox",e.ListBox=T,e.ListBoxToolbar=E,e.moveItem=N,e.processListBoxData=(e=[],t=[],o,a)=>{let n=[],r=[],s=[];const l={listBoxOneData:e,listBoxTwoData:t};switch(o){case"moveUp":n=[...e],n.forEach((e,t)=>{e[a]&&(n=N(t,t-1,n))}),s=[...t],s.forEach((e,t)=>{e[a]&&(s=N(t,t-1,s))}),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach((e,t)=>{e[a]&&(n=N(t,t-1,n))}),s=t.reverse(),s.forEach((e,t)=>{e[a]&&(s=N(t,t-1,s))}),l.listBoxOneData=[...n].reverse(),l.listBoxTwoData=[...s].reverse();break;case"transferTo":n=e.filter(e=>!e[a]),r=e.filter(e=>e[a]),s=t.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferFrom":s=t.filter(e=>!e[a]),r=t.filter(e=>e[a]),n=e.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":s=t.filter(e=>!e[a]),n=e.filter(e=>!e[a]),l.listBoxOneData=n,l.listBoxTwoData=s}return l},e.processListBoxDragAndDrop=(e=[],t=[],o,a,n)=>{const r=e.findIndex(e=>e[n]===o[n]),s=t.findIndex(e=>e[n]===o[n]),l=null!==a?e.findIndex(e=>e[n]===a[n]):-1,i=null!==a?t.findIndex(e=>e[n]===a[n]):-1,c=r>=0,d=s>=0,m=l>=0,u=i>=0,v=[...e],f=[...t];return c&&m?{listBoxOneData:N(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:N(s,i,t)}:c&&(u||null===a)?(null===a?f.push(e[r]):f.splice(i+1,0,e[r]),v.splice(r,1),{listBoxOneData:v,listBoxTwoData:f}):d&&(m||null===a)?(null===a?v.push(t[s]):v.splice(l+1,0,t[s]),f.splice(s,1),{listBoxOneData:v,listBoxTwoData:f}):{listBoxOneData:e,listBoxTwoData:t}}});
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import { ComponentType } from 'react';
|
|
9
|
+
import { WebMcpProps } from '@progress/kendo-react-common';
|
|
9
10
|
import { ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxDragEvent, ListBoxDragLeaveEvent, ListBoxItemSelectEvent, ListBoxItemNavigateEvent } from './ListBoxEvents';
|
|
10
11
|
import { toolbarPosition } from './Enums.js';
|
|
11
12
|
/**
|
|
@@ -212,4 +213,9 @@ export interface ListBoxProps {
|
|
|
212
213
|
* ```
|
|
213
214
|
*/
|
|
214
215
|
onKeyboardNavigate?: (event: ListBoxItemNavigateEvent) => void;
|
|
216
|
+
/**
|
|
217
|
+
* Enables Web MCP tool registration for this component.
|
|
218
|
+
* Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
|
|
219
|
+
*/
|
|
220
|
+
webMcp?: boolean | WebMcpProps;
|
|
215
221
|
}
|
package/messages/index.d.ts
CHANGED
|
@@ -33,6 +33,10 @@ export declare const transferAllFrom = "listbox.transferAllFrom";
|
|
|
33
33
|
* @hidden
|
|
34
34
|
*/
|
|
35
35
|
export declare const remove = "listbox.remove";
|
|
36
|
+
/**
|
|
37
|
+
* @hidden
|
|
38
|
+
*/
|
|
39
|
+
export declare const listBoxActions = "listbox.actions";
|
|
36
40
|
/**
|
|
37
41
|
* @hidden
|
|
38
42
|
*/
|
|
@@ -48,5 +52,6 @@ export declare const messages: {
|
|
|
48
52
|
"listbox.transferAllTo": string;
|
|
49
53
|
"listbox.transferAllFrom": string;
|
|
50
54
|
"listbox.remove": string;
|
|
55
|
+
"listbox.actions": string;
|
|
51
56
|
"listbox.ariaLabel": string;
|
|
52
57
|
};
|
package/messages/index.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o="listbox.moveUp",
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o="listbox.moveUp",t="listbox.moveDown",s="listbox.transferTo",e="listbox.transferFrom",r="listbox.transferAllTo",l="listbox.transferAllFrom",n="listbox.remove",a="listbox.actions",i="listbox.ariaLabel",m={[o]:"Move up",[t]:"Move down",[s]:"Move right",[e]:"Move left",[r]:"Move all right",[l]:"Move all left",[n]:"Remove",[a]:"ListBox actions",[i]:"ListBox"};exports.ariaLabelListBox=i;exports.listBoxActions=a;exports.messages=m;exports.moveDown=t;exports.moveUp=o;exports.remove=n;exports.transferAllFrom=l;exports.transferAllTo=r;exports.transferFrom=e;exports.transferTo=s;
|
package/messages/index.mjs
CHANGED
|
@@ -5,24 +5,26 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
const o = "listbox.moveUp",
|
|
9
|
-
[o]: "Move
|
|
10
|
-
[
|
|
11
|
-
[s]: "
|
|
12
|
-
[e]: "
|
|
13
|
-
[
|
|
14
|
-
[
|
|
15
|
-
[
|
|
8
|
+
const o = "listbox.moveUp", t = "listbox.moveDown", s = "listbox.transferTo", e = "listbox.transferFrom", r = "listbox.transferAllTo", l = "listbox.transferAllFrom", n = "listbox.remove", i = "listbox.actions", a = "listbox.ariaLabel", x = {
|
|
9
|
+
[o]: "Move up",
|
|
10
|
+
[t]: "Move down",
|
|
11
|
+
[s]: "Move right",
|
|
12
|
+
[e]: "Move left",
|
|
13
|
+
[r]: "Move all right",
|
|
14
|
+
[l]: "Move all left",
|
|
15
|
+
[n]: "Remove",
|
|
16
|
+
[i]: "ListBox actions",
|
|
16
17
|
[a]: "ListBox"
|
|
17
18
|
};
|
|
18
19
|
export {
|
|
19
20
|
a as ariaLabelListBox,
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
i as listBoxActions,
|
|
22
|
+
x as messages,
|
|
23
|
+
t as moveDown,
|
|
22
24
|
o as moveUp,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
n as remove,
|
|
26
|
+
l as transferAllFrom,
|
|
27
|
+
r as transferAllTo,
|
|
26
28
|
e as transferFrom,
|
|
27
29
|
s as transferTo
|
|
28
30
|
};
|
package/package-metadata.mjs
CHANGED
|
@@ -6,7 +6,7 @@ export const packageMetadata = Object.freeze({
|
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCode: 'KENDOUIREACT',
|
|
8
8
|
productCodes: ['KENDOUIREACT'],
|
|
9
|
-
publishDate:
|
|
10
|
-
version: '
|
|
9
|
+
publishDate: 1779199977,
|
|
10
|
+
version: '15.0.0-develop.1',
|
|
11
11
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
12
12
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-listbox",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0-develop.1",
|
|
4
4
|
"description": "React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-react-buttons": "
|
|
30
|
-
"@progress/kendo-react-common": "
|
|
31
|
-
"@progress/kendo-react-intl": "
|
|
29
|
+
"@progress/kendo-react-buttons": "15.0.0-develop.1",
|
|
30
|
+
"@progress/kendo-react-common": "15.0.0-develop.1",
|
|
31
|
+
"@progress/kendo-react-intl": "15.0.0-develop.1",
|
|
32
32
|
"@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
|
|
33
33
|
"react": "^18.0.0 || ^19.0.0",
|
|
34
34
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"package": {
|
|
57
57
|
"productName": "KendoReact",
|
|
58
58
|
"productCode": "KENDOUIREACT",
|
|
59
|
-
"publishDate":
|
|
59
|
+
"publishDate": 1779199977,
|
|
60
60
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
61
61
|
}
|
|
62
62
|
},
|