@progress/kendo-react-listbox 9.0.0-develop.2 → 9.0.0-develop.21
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 +106 -63
- package/ListBoxToolbar.mjs +14 -8
- package/README.md +24 -23
- package/dist/cdn/js/kendo-react-listbox.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +4 -4
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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),u=require("prop-types"),a=require("@progress/kendo-react-common"),R=require("./interfaces/Enums.js"),U=require("./package-metadata.js");function V(
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),u=require("prop-types"),a=require("@progress/kendo-react-common"),R=require("./interfaces/Enums.js"),U=require("./package-metadata.js");function V(n){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const d in n)if(d!=="default"){const g=Object.getOwnPropertyDescriptor(n,d);Object.defineProperty(f,d,g.get?g:{enumerable:!0,get:()=>n[d]})}}return f.default=n,Object.freeze(f)}const s=V(G),h=s.forwardRef((n,f)=>{a.validatePackage(U.packageMetadata);const{id:d,style:g,data:c,textField:k,className:T,valueField:S,selectedField:D,onDrop:L,onKeyDown:v,onDragStart:C,onDragLeave:N,onDragOver:F,onItemClick:z,onItemSelect:y,onKeyboardNavigate:m,size:p=E.size,draggable:q=E.draggable,toolbarPosition:K=E.toolbarPosition}=n,x=s.useRef(null),O=s.useRef(null),P=s.useRef(null),i=s.useCallback(()=>({element:P.current,props:n}),[]);s.useImperativeHandle(O,i),s.useImperativeHandle(f,()=>O.current);const w=d+"-accessibility-id",I=a.kendoThemeMaps.sizeMap[p]||p,M=t=>{if(D)return!!t[D]},_=t=>k?t[k]:t.toString(),A=t=>{v&&a.dispatchEvent(v,t,i(),void 0)},j=t=>{t.target.classList.contains("k-list-content")&&(n.data.length>0?a.dispatchEvent(n.onDrop,t,i(),{dataItem:n.data[n.data.length-1]}):a.dispatchEvent(n.onDrop,t,i(),{dataItem:null}))},B=()=>K===R.toolbarPosition.NONE||n.toolbar===void 0?`k-listbox-actions-${E.toolbarPosition}`:`k-listbox-actions-${K}`,H=t=>{N&&t.target.classList.contains("k-list-content")&&a.dispatchEvent(N,t,i(),void 0)},b=s.useMemo(()=>new a.Navigation({root:x,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(t,o,e)=>{const r=o.elements.indexOf(t);e.metaKey&&a.dispatchEvent(y,e,i(),{dataItem:c[r]}),a.dispatchEvent(y,e,i(),{dataItem:c[r]})},ArrowDown:(t,o,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(m,e,i(),{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=c[r+1];l&&(a.dispatchEvent(y,e,i(),{dataItem:l}),o.focusNext(t))}},ArrowUp:(t,o,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(m,e,i(),{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=c[r-1];l&&(a.dispatchEvent(y,e,i(),{dataItem:l}),o.focusPrevious(t))}},ArrowLeft:(t,o,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(m,e,i(),{actionName:"transferAllFrom"}):e.metaKey&&a.dispatchEvent(m,e,i(),{actionName:"transferFrom"})},ArrowRight:(t,o,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(m,e,i(),{actionName:"transferAllTo"}):e.metaKey&&a.dispatchEvent(m,e,i(),{actionName:"transferTo"})},Backspace:(t,o,e)=>{a.dispatchEvent(m,e,i(),{actionName:"remove"})}}}}),[c]),$=s.useCallback(b.triggerKeyboardEvent.bind(b),[c]);return s.useEffect(()=>(b.initializeRovingTab(),()=>b.removeFocusListener()),[c]),s.createElement("div",{id:d,ref:P,style:g,unselectable:"on",className:a.classNames(T,"k-listbox",{[`k-listbox-${I}`]:p},B())},n.toolbar&&s.createElement(n.toolbar,null),s.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:x,onDragOver:t=>t.preventDefault(),onDrop:j,onDragLeave:H,onKeyDown:$},s.createElement("div",{className:a.classNames("k-list",{[`k-list-${I}`]:p})},s.createElement("div",{className:"k-list-content"},s.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:A},c.map((t,o)=>{const e=M(t),r={className:a.classNames("k-list-item",{"k-selected":e}),role:"option",key:o,id:w+o,"aria-selected":e,"data-uid":w+o,draggable:q,onDragStart:l=>{a.dispatchEvent(C,l,i(),{dataItem:t})},onDragOver:l=>{l.preventDefault(),a.dispatchEvent(F,l,i(),{dataItem:t})},onDrop:l=>{a.dispatchEvent(L,l,i(),{dataItem:t})},onClick:l=>{a.dispatchEvent(z,l,i(),{dataItem:t})}};return n.item?s.createElement(n.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"},_(t)))}))))),s.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},c.map((t,o)=>{const e=t[S||k];return s.createElement("option",{key:o,value:e},e)})))}),E={toolbarPosition:R.toolbarPosition.RIGHT,draggable:!0,size:"medium"};h.propTypes={size:u.oneOf([null,"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};h.displayName="ListBoxInner";exports.ListBox=h;
|
package/ListBox.mjs
CHANGED
|
@@ -8,45 +8,52 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as a from "react";
|
|
10
10
|
import f from "prop-types";
|
|
11
|
-
import { validatePackage as V, kendoThemeMaps as j, Navigation as J, dispatchEvent as
|
|
11
|
+
import { validatePackage as V, kendoThemeMaps as j, Navigation as J, dispatchEvent as s, classNames as k } from "@progress/kendo-react-common";
|
|
12
12
|
import { toolbarPosition as O } from "./interfaces/Enums.mjs";
|
|
13
13
|
import { packageMetadata as Q } from "./package-metadata.mjs";
|
|
14
|
-
const R = a.forwardRef((
|
|
14
|
+
const R = a.forwardRef((n, T) => {
|
|
15
15
|
V(Q);
|
|
16
16
|
const {
|
|
17
|
-
id:
|
|
17
|
+
id: D,
|
|
18
18
|
style: F,
|
|
19
19
|
data: c,
|
|
20
20
|
textField: b,
|
|
21
21
|
className: L,
|
|
22
22
|
valueField: C,
|
|
23
|
-
selectedField:
|
|
23
|
+
selectedField: K,
|
|
24
24
|
onDrop: v,
|
|
25
|
-
onKeyDown:
|
|
25
|
+
onKeyDown: x,
|
|
26
26
|
onDragStart: z,
|
|
27
27
|
onDragLeave: p,
|
|
28
28
|
onDragOver: S,
|
|
29
29
|
onItemClick: A,
|
|
30
30
|
onItemSelect: d,
|
|
31
31
|
onKeyboardNavigate: m,
|
|
32
|
-
size: u =
|
|
33
|
-
draggable:
|
|
34
|
-
toolbarPosition:
|
|
35
|
-
} =
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
32
|
+
size: u = g.size,
|
|
33
|
+
draggable: $ = g.draggable,
|
|
34
|
+
toolbarPosition: N = g.toolbarPosition
|
|
35
|
+
} = n, E = a.useRef(null), h = a.useRef(null), w = a.useRef(null), o = a.useCallback(
|
|
36
|
+
() => ({
|
|
37
|
+
element: w.current,
|
|
38
|
+
props: n
|
|
39
|
+
}),
|
|
40
|
+
[]
|
|
41
|
+
);
|
|
39
42
|
a.useImperativeHandle(h, o), a.useImperativeHandle(T, () => h.current);
|
|
40
|
-
const I =
|
|
41
|
-
if (
|
|
42
|
-
return !!t[
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
},
|
|
46
|
-
t.target.classList.contains("k-list-content") && (
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
43
|
+
const I = D + "-accessibility-id", P = j.sizeMap[u] || u, B = (t) => {
|
|
44
|
+
if (K)
|
|
45
|
+
return !!t[K];
|
|
46
|
+
}, H = (t) => b ? t[b] : t.toString(), M = (t) => {
|
|
47
|
+
x && s(x, t, o(), void 0);
|
|
48
|
+
}, _ = (t) => {
|
|
49
|
+
t.target.classList.contains("k-list-content") && (n.data.length > 0 ? s(n.onDrop, t, o(), {
|
|
50
|
+
dataItem: n.data[n.data.length - 1]
|
|
51
|
+
}) : s(n.onDrop, t, o(), {
|
|
52
|
+
dataItem: null
|
|
53
|
+
}));
|
|
54
|
+
}, q = () => N === O.NONE || n.toolbar === void 0 ? `k-listbox-actions-${g.toolbarPosition}` : `k-listbox-actions-${N}`, G = (t) => {
|
|
55
|
+
p && t.target.classList.contains("k-list-content") && s(p, t, o(), void 0);
|
|
56
|
+
}, y = a.useMemo(
|
|
50
57
|
() => new J({
|
|
51
58
|
root: E,
|
|
52
59
|
selectors: [".k-list-item"],
|
|
@@ -55,48 +62,62 @@ const R = a.forwardRef((s, T) => {
|
|
|
55
62
|
keydown: {
|
|
56
63
|
Space: (t, i, e) => {
|
|
57
64
|
const r = i.elements.indexOf(t);
|
|
58
|
-
e.metaKey &&
|
|
65
|
+
e.metaKey && s(d, e, o(), {
|
|
66
|
+
dataItem: c[r]
|
|
67
|
+
}), s(d, e, o(), { dataItem: c[r] });
|
|
59
68
|
},
|
|
60
69
|
ArrowDown: (t, i, e) => {
|
|
61
70
|
if (e.metaKey && e.shiftKey)
|
|
62
|
-
|
|
71
|
+
s(m, e, o(), {
|
|
72
|
+
actionName: "moveDown"
|
|
73
|
+
});
|
|
63
74
|
else if (e.metaKey && !e.shiftKey)
|
|
64
75
|
e.preventDefault(), i.focusNext(t);
|
|
65
76
|
else if (!(e.shiftKey && !e.metaKey)) {
|
|
66
77
|
e.preventDefault();
|
|
67
|
-
const r = i.elements.indexOf(t),
|
|
68
|
-
|
|
78
|
+
const r = i.elements.indexOf(t), l = c[r + 1];
|
|
79
|
+
l && (s(d, e, o(), { dataItem: l }), i.focusNext(t));
|
|
69
80
|
}
|
|
70
81
|
},
|
|
71
82
|
ArrowUp: (t, i, e) => {
|
|
72
83
|
if (e.metaKey && e.shiftKey)
|
|
73
|
-
|
|
84
|
+
s(m, e, o(), {
|
|
85
|
+
actionName: "moveUp"
|
|
86
|
+
});
|
|
74
87
|
else if (e.metaKey && !e.shiftKey)
|
|
75
88
|
e.preventDefault(), i.focusPrevious(t);
|
|
76
89
|
else if (!(e.shiftKey && !e.metaKey)) {
|
|
77
90
|
e.preventDefault();
|
|
78
|
-
const r = i.elements.indexOf(t),
|
|
79
|
-
|
|
91
|
+
const r = i.elements.indexOf(t), l = c[r - 1];
|
|
92
|
+
l && (s(d, e, o(), { dataItem: l }), i.focusPrevious(t));
|
|
80
93
|
}
|
|
81
94
|
},
|
|
82
95
|
ArrowLeft: (t, i, e) => {
|
|
83
|
-
e.metaKey && e.shiftKey ?
|
|
96
|
+
e.metaKey && e.shiftKey ? s(m, e, o(), {
|
|
97
|
+
actionName: "transferAllFrom"
|
|
98
|
+
}) : e.metaKey && s(m, e, o(), {
|
|
99
|
+
actionName: "transferFrom"
|
|
100
|
+
});
|
|
84
101
|
},
|
|
85
102
|
ArrowRight: (t, i, e) => {
|
|
86
|
-
e.metaKey && e.shiftKey ?
|
|
103
|
+
e.metaKey && e.shiftKey ? s(m, e, o(), {
|
|
104
|
+
actionName: "transferAllTo"
|
|
105
|
+
}) : e.metaKey && s(m, e, o(), {
|
|
106
|
+
actionName: "transferTo"
|
|
107
|
+
});
|
|
87
108
|
},
|
|
88
109
|
Backspace: (t, i, e) => {
|
|
89
|
-
|
|
110
|
+
s(m, e, o(), { actionName: "remove" });
|
|
90
111
|
}
|
|
91
112
|
}
|
|
92
113
|
}
|
|
93
114
|
}),
|
|
94
115
|
[c]
|
|
95
|
-
), U = a.useCallback(
|
|
96
|
-
return a.useEffect(() => (
|
|
116
|
+
), U = a.useCallback(y.triggerKeyboardEvent.bind(y), [c]);
|
|
117
|
+
return a.useEffect(() => (y.initializeRovingTab(), () => y.removeFocusListener()), [c]), /* @__PURE__ */ a.createElement(
|
|
97
118
|
"div",
|
|
98
119
|
{
|
|
99
|
-
id:
|
|
120
|
+
id: D,
|
|
100
121
|
ref: w,
|
|
101
122
|
style: F,
|
|
102
123
|
unselectable: "on",
|
|
@@ -107,7 +128,7 @@ const R = a.forwardRef((s, T) => {
|
|
|
107
128
|
q()
|
|
108
129
|
)
|
|
109
130
|
},
|
|
110
|
-
|
|
131
|
+
n.toolbar && /* @__PURE__ */ a.createElement(n.toolbar, null),
|
|
111
132
|
/* @__PURE__ */ a.createElement(
|
|
112
133
|
"div",
|
|
113
134
|
{
|
|
@@ -115,42 +136,64 @@ const R = a.forwardRef((s, T) => {
|
|
|
115
136
|
"data-role": "selectable",
|
|
116
137
|
ref: E,
|
|
117
138
|
onDragOver: (t) => t.preventDefault(),
|
|
118
|
-
onDrop:
|
|
139
|
+
onDrop: _,
|
|
119
140
|
onDragLeave: G,
|
|
120
141
|
onKeyDown: U
|
|
121
142
|
},
|
|
122
|
-
/* @__PURE__ */ a.createElement("div", { className: k("k-list", { [`k-list-${P}`]: u }) }, /* @__PURE__ */ a.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ a.createElement(
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
143
|
+
/* @__PURE__ */ a.createElement("div", { className: k("k-list", { [`k-list-${P}`]: u }) }, /* @__PURE__ */ a.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ a.createElement(
|
|
144
|
+
"ul",
|
|
145
|
+
{
|
|
146
|
+
className: "k-list-ul",
|
|
147
|
+
role: "listbox",
|
|
148
|
+
"aria-label": "listbox-container",
|
|
149
|
+
onKeyDown: M
|
|
150
|
+
},
|
|
151
|
+
c.map((t, i) => {
|
|
152
|
+
const e = B(t), r = {
|
|
153
|
+
className: k("k-list-item", { "k-selected": e }),
|
|
154
|
+
role: "option",
|
|
155
|
+
key: i,
|
|
156
|
+
id: I + i,
|
|
157
|
+
"aria-selected": e,
|
|
158
|
+
"data-uid": I + i,
|
|
159
|
+
draggable: $,
|
|
160
|
+
onDragStart: (l) => {
|
|
161
|
+
s(
|
|
162
|
+
z,
|
|
163
|
+
l,
|
|
164
|
+
o(),
|
|
165
|
+
{ dataItem: t }
|
|
166
|
+
);
|
|
167
|
+
},
|
|
168
|
+
onDragOver: (l) => {
|
|
169
|
+
l.preventDefault(), s(S, l, o(), { dataItem: t });
|
|
170
|
+
},
|
|
171
|
+
onDrop: (l) => {
|
|
172
|
+
s(v, l, o(), { dataItem: t });
|
|
173
|
+
},
|
|
174
|
+
onClick: (l) => {
|
|
175
|
+
s(A, l, o(), { dataItem: t });
|
|
176
|
+
}
|
|
177
|
+
};
|
|
178
|
+
return n.item ? /* @__PURE__ */ a.createElement(
|
|
179
|
+
n.item,
|
|
180
|
+
{
|
|
181
|
+
selected: e,
|
|
182
|
+
dataItem: t,
|
|
183
|
+
...r,
|
|
184
|
+
key: r.key
|
|
185
|
+
},
|
|
186
|
+
/* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" }, t.name)
|
|
187
|
+
) : /* @__PURE__ */ a.createElement("li", { ...r, key: r.key }, /* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" }, H(t)));
|
|
188
|
+
})
|
|
189
|
+
)))
|
|
146
190
|
),
|
|
147
|
-
s.toolbar && y === "bottom" && /* @__PURE__ */ a.createElement(s.toolbar, null),
|
|
148
191
|
/* @__PURE__ */ a.createElement("select", { style: { display: "none" }, multiple: !0, "data-role": "listbox" }, c.map((t, i) => {
|
|
149
192
|
const e = t[C || b];
|
|
150
193
|
return /* @__PURE__ */ a.createElement("option", { key: i, value: e }, e);
|
|
151
194
|
}))
|
|
152
195
|
);
|
|
153
|
-
}),
|
|
196
|
+
}), g = {
|
|
154
197
|
toolbarPosition: O.RIGHT,
|
|
155
198
|
draggable: !0,
|
|
156
199
|
size: "medium"
|
package/ListBoxToolbar.mjs
CHANGED
|
@@ -30,14 +30,20 @@ const N = [
|
|
|
30
30
|
data: l = m.data,
|
|
31
31
|
dataConnected: a = m.dataConnected,
|
|
32
32
|
selectedField: E = m.selectedField
|
|
33
|
-
} = g, z = _(), h = n.useRef(null), p = n.useRef(null), I = n.useCallback(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
} = g, z = _(), h = n.useRef(null), p = n.useRef(null), I = n.useCallback(
|
|
34
|
+
() => ({
|
|
35
|
+
onToolClick: v,
|
|
36
|
+
props: g,
|
|
37
|
+
context: {},
|
|
38
|
+
state: {},
|
|
39
|
+
refs: {}
|
|
40
|
+
}),
|
|
41
|
+
[]
|
|
42
|
+
);
|
|
43
|
+
n.useImperativeHandle(p, I), n.useImperativeHandle(
|
|
44
|
+
L,
|
|
45
|
+
() => p.current
|
|
46
|
+
);
|
|
41
47
|
const k = (t, e, o) => {
|
|
42
48
|
o.preventDefault(), e.focusNext(t);
|
|
43
49
|
}, w = (t, e, o) => {
|
package/README.md
CHANGED
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
# KendoReact ListBox Component for React
|
|
6
6
|
|
|
7
7
|
> **Important**
|
|
8
|
-
>
|
|
9
|
-
>
|
|
10
|
-
>
|
|
11
|
-
>
|
|
8
|
+
>
|
|
9
|
+
> - 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)—a commercial UI library.
|
|
10
|
+
> - You will need to install a license key when adding the package to your project. For more information, please refer to the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox).
|
|
11
|
+
> - To receive a license key, you need to either [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox). Doing so 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).
|
|
12
|
+
> - The 30-day free trial gives you access to all the KendoReact components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the KendoReact dev team!
|
|
12
13
|
>
|
|
13
14
|
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox) and speed up your development process!
|
|
14
15
|
|
|
@@ -18,35 +19,35 @@ The [React ListBox](https://www.telerik.com/kendo-react-ui/listbox), part of Ken
|
|
|
18
19
|
|
|
19
20
|
Among the features which the KendoReact ListBox component delivers are:
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
- [Drag and Drop](https://www.telerik.com/kendo-react-ui/components/listbox/drag-and-drop/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)—Supports drag and drop items within the same list to reorder them or to move them between lists.
|
|
23
|
+
- [Custom Items](https://www.telerik.com/kendo-react-ui/components/listbox/customization/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)—You can customize how the items of the ListBox are rendered and its toolbar button and position.
|
|
24
|
+
- [Multiple List](https://www.telerik.com/kendo-react-ui/components/listbox/multiple-lists/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)— Multiple ListBox components can be connected to allow moving an item into different states.
|
|
25
|
+
- [Selection](https://www.telerik.com/kendo-react-ui/components/listbox/selection/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)—You can select single on multiple item from the ListBox.
|
|
26
|
+
- [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)—The KendoReact ListBox, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
|
|
26
27
|
|
|
27
28
|
## Support Options
|
|
28
29
|
|
|
29
30
|
For any issues you might encounter while working with the KendoReact ListBox, use any of the available support channels:
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
- Industry-leading technical support—KendoReact paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use [the dedicated KendoReact support system](https://www.telerik.com/account/support-tickets?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listview).
|
|
33
|
+
- Product forums—The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listview) are part of the free support you can get from the community and from the KendoReact team.
|
|
34
|
+
- Feedback portal—The [KendoReact feedback portal](https://feedback.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox) is where you can request and vote for new features to be added.
|
|
34
35
|
|
|
35
36
|
## Resources
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
38
|
+
- [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)
|
|
39
|
+
- [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)
|
|
40
|
+
- [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)
|
|
41
|
+
- [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)
|
|
42
|
+
- [Blogs](https://www.telerik.com/blogs/tag/kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)
|
|
43
|
+
- [Demos, documentation, and component reference](https://www.telerik.com/kendo-react-ui/components/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)
|
|
44
|
+
- [KendoReact pricing and licensing](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)
|
|
45
|
+
- [Changelog](https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox)
|
|
45
46
|
|
|
46
47
|
High-level component overview pages
|
|
47
48
|
|
|
48
|
-
|
|
49
|
+
- [React ListBox Component](https://www.telerik.com/kendo-react-ui/listbox)
|
|
49
50
|
|
|
50
|
-
|
|
51
|
+
_Copyright © 2024 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved._
|
|
51
52
|
|
|
52
|
-
|
|
53
|
+
_Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries._
|
|
@@ -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
|
-
!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-buttons"),require("@progress/kendo-react-intl"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-buttons","@progress/kendo-react-intl","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListbox={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactButtons,e.KendoReactIntl,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={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},m=i.forwardRef(((e,t)=>{o.validatePackage(d);const{id:a,style:n,data:r,textField:s,className:l,valueField:m,selectedField:f,onDrop:p,onKeyDown:v,onDragStart:b,onDragLeave:g,onDragOver:x,onItemClick:D,onItemSelect:h,onKeyboardNavigate:k,size:y=u.size,draggable:I=u.draggable,toolbarPosition:E=u.toolbarPosition}=e,w=i.useRef(null),T=i.useRef(null),N=i.useRef(null),B=i.useCallback((()=>({element:N.current,props:e})),[]);i.useImperativeHandle(T,B),i.useImperativeHandle(t,(()=>T.current));const O=a+"-accessibility-id",K=o.kendoThemeMaps.sizeMap[y]||y,A=i.useMemo((()=>new o.Navigation({root:w,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,a)=>{const n=t.elements.indexOf(e);a.metaKey&&o.dispatchEvent(h,a,B(),{dataItem:r[n]}),o.dispatchEvent(h,a,B(),{dataItem:r[n]})},ArrowDown:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(k,a,B(),{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),s=r[n+1];s&&(o.dispatchEvent(h,a,B(),{dataItem:s}),t.focusNext(e))}},ArrowUp:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(k,a,B(),{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),s=r[n-1];s&&(o.dispatchEvent(h,a,B(),{dataItem:s}),t.focusPrevious(e))}},ArrowLeft:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(k,a,B(),{actionName:"transferAllFrom"}):a.metaKey&&o.dispatchEvent(k,a,B(),{actionName:"transferFrom"})},ArrowRight:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(k,a,B(),{actionName:"transferAllTo"}):a.metaKey&&o.dispatchEvent(k,a,B(),{actionName:"transferTo"})},Backspace:(e,t,a)=>{o.dispatchEvent(k,a,B(),{actionName:"remove"})}}}})),[r]),R=i.useCallback(A.triggerKeyboardEvent.bind(A),[r]);return i.useEffect((()=>(A.initializeRovingTab(),()=>A.removeFocusListener())),[r]),i.createElement("div",{id:a,ref:N,style:n,unselectable:"on",className:o.classNames(l,"k-listbox",{[`k-listbox-${K}`]:y},E===c.NONE||void 0===e.toolbar?"":`k-listbox-actions-${E}`)},e.toolbar&&"bottom"!==E&&i.createElement(e.toolbar,null),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:w,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?o.dispatchEvent(e.onDrop,t,B(),{dataItem:e.data[e.data.length-1]}):o.dispatchEvent(e.onDrop,t,B(),{dataItem:null}))},onDragLeave:e=>{g&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(g,e,B(),void 0)},onKeyDown:R},i.createElement("div",{className:o.classNames("k-list",{[`k-list-${K}`]:y})},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,B(),void 0)}},r.map(((t,a)=>{const n=(e=>{if(f)return!!e[f]})(t),r={className:o.classNames("k-list-item",{"k-selected":n}),role:"option",key:a,id:O+a,"aria-selected":n,"data-uid":O+a,draggable:I,onDragStart:e=>{o.dispatchEvent(b,e,B(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),o.dispatchEvent(x,e,B(),{dataItem:t})},onDrop:e=>{o.dispatchEvent(p,e,B(),{dataItem:t})},onClick:e=>{o.dispatchEvent(D,e,B(),{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=>s?e[s]:e.toString())(t)))})))))),e.toolbar&&"bottom"===E&&i.createElement(e.toolbar,null),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},r.map(((e,t)=>{const a=e[m||s];return i.createElement("option",{key:t,value:a},a)}))))})),u={toolbarPosition:c.RIGHT,draggable:!0,size:"medium"};m.propTypes={size:a.oneOf([null,"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},m.displayName="ListBoxInner";const f={"listbox.moveUp":"Move Up","listbox.moveDown":"Move Down","listbox.transferTo":"Transfer To","listbox.transferFrom":"Transfer From","listbox.transferAllTo":"Transfer All To","listbox.transferAllFrom":"Transfer All From","listbox.remove":"Delete"},p=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:s.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:s.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:s.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:s.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:s.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:s.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:s.xIcon}],v=i.forwardRef(((e,t)=>{const{tools:a,dir:l,onToolClick:c,size:d=b.size,data:m=b.data,dataConnected:u=b.dataConnected,selectedField:v=b.selectedField}=e,g=r.useLocalization(),x=i.useRef(null),D=i.useRef(null),h=i.useCallback((()=>({onToolClick:c,props:e,context:{},state:{},refs:{}})),[]);i.useImperativeHandle(D,h),i.useImperativeHandle(t,(()=>D.current));const k=(e,t,a)=>{a.preventDefault(),t.focusNext(e)},y=(e,t,a)=>{a.preventDefault(),t.focusPrevious(e)},I=i.useMemo((()=>new o.Navigation({root:x,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:k,ArrowRight:k,ArrowUp:y,ArrowLeft:y,Enter:(e,t,a)=>{e.click(),t.focusElement(t.current,e)}}}})),[]),E=i.useCallback(I.triggerKeyboardEvent.bind(I),[]);i.useEffect((()=>(I.initializeRovingTab(),()=>I.removeFocusListener())),[]);const w=e=>{switch(e.name){case"caret-alt-right":return s.caretAltLeftIcon;case"caret-alt-left":return s.caretAltRightIcon;case"caret-double-alt-right":return s.caretDoubleAltLeftIcon;case"caret-double-alt-left":return s.caretDoubleAltRightIcon}return e},T=e=>{switch(e){case"caret-alt-right":return"caret-alt-left";case"caret-alt-left":return"caret-alt-right";case"caret-double-alt-right":return"caret-double-alt-left";case"caret-double-alt-left":return"caret-double-alt-right"}return e},N="rtl"===l;return i.createElement("div",{className:o.classNames("k-listbox-actions"),ref:x,onKeyDown:E},a&&a.map(((e,t)=>{const a=p.findIndex((t=>t.name===e)),r=p[a],s=(e=>{let t=!0;const a=v||"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})(r.name),l=`listbox.${r.name}`,b=g.toLanguageString(l,f[l]);return i.createElement(n.Button,{size:d,key:t,disabled:s,"data-command":r.name,title:b,"aria-label":b,icon:N?T(r.iconName):r.iconName,svgIcon:N?w(r.svgIcon):r.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{o.dispatchEvent(c,e,h(),{toolName:t})})(e,r.name)}})})))})),b={data:[],dataConnected:[],selectedField:"selected",size:"medium"};v.propTypes={data:a.array.isRequired,dataConnected:a.array.isRequired,tools:a.array,selectedField:a.string,dir:a.string,size:a.oneOf([null,"small","medium","large"])},v.displayName="ListBoxToolbarInner";const g=(e,t,a)=>{const o=a.splice(e,1)[0];return a.splice(t,0,o),a},x=o.withIdHOC(m);x.displayName="KendoReactListBox",e.ListBox=x,e.ListBoxToolbar=v,e.moveItem=g,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=g(t,t-1,n))})),s=[...t],s.forEach(((e,t)=>{e[o]&&(s=g(t,t-1,s))})),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach(((e,t)=>{e[o]&&(n=g(t,t-1,n))})),s=t.reverse(),s.forEach(((e,t)=>{e[o]&&(s=g(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],p=[...t];return c&&m?{listBoxOneData:g(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:g(s,i,t)}:c&&(u||null===o)?(null===o?p.push(e[r]):p.splice(i+1,0,e[r]),f.splice(r,1),{listBoxOneData:f,listBoxTwoData:p}):d&&(m||null===o)?(null===o?f.push(t[s]):f.splice(l+1,0,t[s]),p.splice(s,1),{listBoxOneData:f,listBoxTwoData:p}):{listBoxOneData:e,listBoxTwoData:t}}}));
|
|
8
|
+
!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-buttons"),require("@progress/kendo-react-intl"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-buttons","@progress/kendo-react-intl","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListbox={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactButtons,e.KendoReactIntl,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={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},m=i.forwardRef(((e,t)=>{o.validatePackage(d);const{id:a,style:n,data:r,textField:s,className:l,valueField:m,selectedField:f,onDrop:p,onKeyDown:v,onDragStart:b,onDragLeave:g,onDragOver:x,onItemClick:D,onItemSelect:h,onKeyboardNavigate:k,size:y=u.size,draggable:I=u.draggable,toolbarPosition:E=u.toolbarPosition}=e,w=i.useRef(null),T=i.useRef(null),N=i.useRef(null),B=i.useCallback((()=>({element:N.current,props:e})),[]);i.useImperativeHandle(T,B),i.useImperativeHandle(t,(()=>T.current));const O=a+"-accessibility-id",K=o.kendoThemeMaps.sizeMap[y]||y,A=i.useMemo((()=>new o.Navigation({root:w,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,a)=>{const n=t.elements.indexOf(e);a.metaKey&&o.dispatchEvent(h,a,B(),{dataItem:r[n]}),o.dispatchEvent(h,a,B(),{dataItem:r[n]})},ArrowDown:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(k,a,B(),{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),s=r[n+1];s&&(o.dispatchEvent(h,a,B(),{dataItem:s}),t.focusNext(e))}},ArrowUp:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(k,a,B(),{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),s=r[n-1];s&&(o.dispatchEvent(h,a,B(),{dataItem:s}),t.focusPrevious(e))}},ArrowLeft:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(k,a,B(),{actionName:"transferAllFrom"}):a.metaKey&&o.dispatchEvent(k,a,B(),{actionName:"transferFrom"})},ArrowRight:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(k,a,B(),{actionName:"transferAllTo"}):a.metaKey&&o.dispatchEvent(k,a,B(),{actionName:"transferTo"})},Backspace:(e,t,a)=>{o.dispatchEvent(k,a,B(),{actionName:"remove"})}}}})),[r]),R=i.useCallback(A.triggerKeyboardEvent.bind(A),[r]);return i.useEffect((()=>(A.initializeRovingTab(),()=>A.removeFocusListener())),[r]),i.createElement("div",{id:a,ref:N,style:n,unselectable:"on",className:o.classNames(l,"k-listbox",{[`k-listbox-${K}`]:y},E===c.NONE||void 0===e.toolbar?`k-listbox-actions-${u.toolbarPosition}`:`k-listbox-actions-${E}`)},e.toolbar&&i.createElement(e.toolbar,null),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:w,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?o.dispatchEvent(e.onDrop,t,B(),{dataItem:e.data[e.data.length-1]}):o.dispatchEvent(e.onDrop,t,B(),{dataItem:null}))},onDragLeave:e=>{g&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(g,e,B(),void 0)},onKeyDown:R},i.createElement("div",{className:o.classNames("k-list",{[`k-list-${K}`]:y})},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,B(),void 0)}},r.map(((t,a)=>{const n=(e=>{if(f)return!!e[f]})(t),r={className:o.classNames("k-list-item",{"k-selected":n}),role:"option",key:a,id:O+a,"aria-selected":n,"data-uid":O+a,draggable:I,onDragStart:e=>{o.dispatchEvent(b,e,B(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),o.dispatchEvent(x,e,B(),{dataItem:t})},onDrop:e=>{o.dispatchEvent(p,e,B(),{dataItem:t})},onClick:e=>{o.dispatchEvent(D,e,B(),{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=>s?e[s]:e.toString())(t)))})))))),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},r.map(((e,t)=>{const a=e[m||s];return i.createElement("option",{key:t,value:a},a)}))))})),u={toolbarPosition:c.RIGHT,draggable:!0,size:"medium"};m.propTypes={size:a.oneOf([null,"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},m.displayName="ListBoxInner";const f={"listbox.moveUp":"Move Up","listbox.moveDown":"Move Down","listbox.transferTo":"Transfer To","listbox.transferFrom":"Transfer From","listbox.transferAllTo":"Transfer All To","listbox.transferAllFrom":"Transfer All From","listbox.remove":"Delete"},p=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:s.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:s.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:s.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:s.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:s.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:s.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:s.xIcon}],v=i.forwardRef(((e,t)=>{const{tools:a,dir:l,onToolClick:c,size:d=b.size,data:m=b.data,dataConnected:u=b.dataConnected,selectedField:v=b.selectedField}=e,g=r.useLocalization(),x=i.useRef(null),D=i.useRef(null),h=i.useCallback((()=>({onToolClick:c,props:e,context:{},state:{},refs:{}})),[]);i.useImperativeHandle(D,h),i.useImperativeHandle(t,(()=>D.current));const k=(e,t,a)=>{a.preventDefault(),t.focusNext(e)},y=(e,t,a)=>{a.preventDefault(),t.focusPrevious(e)},I=i.useMemo((()=>new o.Navigation({root:x,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:k,ArrowRight:k,ArrowUp:y,ArrowLeft:y,Enter:(e,t,a)=>{e.click(),t.focusElement(t.current,e)}}}})),[]),E=i.useCallback(I.triggerKeyboardEvent.bind(I),[]);i.useEffect((()=>(I.initializeRovingTab(),()=>I.removeFocusListener())),[]);const w=e=>{switch(e.name){case"caret-alt-right":return s.caretAltLeftIcon;case"caret-alt-left":return s.caretAltRightIcon;case"caret-double-alt-right":return s.caretDoubleAltLeftIcon;case"caret-double-alt-left":return s.caretDoubleAltRightIcon}return e},T=e=>{switch(e){case"caret-alt-right":return"caret-alt-left";case"caret-alt-left":return"caret-alt-right";case"caret-double-alt-right":return"caret-double-alt-left";case"caret-double-alt-left":return"caret-double-alt-right"}return e},N="rtl"===l;return i.createElement("div",{className:o.classNames("k-listbox-actions"),ref:x,onKeyDown:E},a&&a.map(((e,t)=>{const a=p.findIndex((t=>t.name===e)),r=p[a],s=(e=>{let t=!0;const a=v||"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})(r.name),l=`listbox.${r.name}`,b=g.toLanguageString(l,f[l]);return i.createElement(n.Button,{size:d,key:t,disabled:s,"data-command":r.name,title:b,"aria-label":b,icon:N?T(r.iconName):r.iconName,svgIcon:N?w(r.svgIcon):r.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{o.dispatchEvent(c,e,h(),{toolName:t})})(e,r.name)}})})))})),b={data:[],dataConnected:[],selectedField:"selected",size:"medium"};v.propTypes={data:a.array.isRequired,dataConnected:a.array.isRequired,tools:a.array,selectedField:a.string,dir:a.string,size:a.oneOf([null,"small","medium","large"])},v.displayName="ListBoxToolbarInner";const g=(e,t,a)=>{const o=a.splice(e,1)[0];return a.splice(t,0,o),a},x=o.withIdHOC(m);x.displayName="KendoReactListBox",e.ListBox=x,e.ListBoxToolbar=v,e.moveItem=g,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=g(t,t-1,n))})),s=[...t],s.forEach(((e,t)=>{e[o]&&(s=g(t,t-1,s))})),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach(((e,t)=>{e[o]&&(n=g(t,t-1,n))})),s=t.reverse(),s.forEach(((e,t)=>{e[o]&&(s=g(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],p=[...t];return c&&m?{listBoxOneData:g(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:g(s,i,t)}:c&&(u||null===o)?(null===o?p.push(e[r]):p.splice(i+1,0,e[r]),f.splice(r,1),{listBoxOneData:f,listBoxTwoData:p}):d&&(m||null===o)?(null===o?f.push(t[s]):f.splice(l+1,0,t[s]),p.splice(s,1),{listBoxOneData:f,listBoxTwoData:p}):{listBoxOneData:e,listBoxTwoData:t}}}));
|
package/package-metadata.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
name: "@progress/kendo-react-listbox",
|
|
11
11
|
productName: "KendoReact",
|
|
12
12
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
-
publishDate:
|
|
13
|
+
publishDate: 1731069181,
|
|
14
14
|
version: "",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-listbox",
|
|
3
|
-
"version": "9.0.0-develop.
|
|
3
|
+
"version": "9.0.0-develop.21",
|
|
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",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
|
-
"@progress/kendo-react-buttons": "9.0.0-develop.
|
|
27
|
-
"@progress/kendo-react-common": "9.0.0-develop.
|
|
28
|
-
"@progress/kendo-react-intl": "9.0.0-develop.
|
|
26
|
+
"@progress/kendo-react-buttons": "9.0.0-develop.21",
|
|
27
|
+
"@progress/kendo-react-common": "9.0.0-develop.21",
|
|
28
|
+
"@progress/kendo-react-intl": "9.0.0-develop.21",
|
|
29
29
|
"@progress/kendo-svg-icons": "^3.0.0",
|
|
30
30
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
31
31
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|