@progress/kendo-react-listbox 15.0.1-develop.10 → 15.0.1-develop.12
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 +235 -151
- package/dist/cdn/js/kendo-react-listbox.js +1 -1
- 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 he=require("react"),D=require("prop-types"),c=require("@progress/kendo-react-common"),xe=require("@progress/kendo-react-intl"),Y=require("./interfaces/Enums.js"),ke=require("./ListBoxContext.js"),j=require("./messages/index.js");function Ee(i){const I=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const p in i)if(p!=="default"){const C=Object.getOwnPropertyDescriptor(i,p);Object.defineProperty(I,p,C.get?C:{enumerable:!0,get:()=>i[p]})}}return I.default=i,Object.freeze(I)}const n=Ee(he),H=n.forwardRef((i,I)=>{const{id:p,style:C,data:m,textField:B,className:Z,valueField:ee,selectedField:v,onDrop:te,onKeyDown:$,onDragStart:ne,onDragLeave:V,onDragOver:oe,onItemClick:ae,onItemSelect:O,onKeyboardNavigate:h,size:K=F.size,draggable:se=F.draggable,toolbarPosition:G=F.toolbarPosition}=i,L=n.useRef(null),M=n.useRef(null),A=n.useRef(null),y=n.useRef(0),U=n.useRef(m.length),_=n.useRef(null),x=n.useRef(null),T=n.useRef(null),[re,S]=n.useState(0),[le,P]=n.useState(!1),ce=xe.useLocalization(),u=n.useCallback(()=>({element:A.current,props:i}),[i]);n.useImperativeHandle(M,u),n.useImperativeHandle(I,()=>M.current),c.useWebMcpRegister("listbox",M,i,i.webMcp);const W=p+"-accessibility-id",q=p?`${p}-list`:void 0,J=K?c.kendoThemeMaps.sizeMap[K]||K:void 0,ie=t=>{if(v)return!!t[v]},ue=t=>B?t[B]:t.toString(),w=n.useCallback(t=>{_.current=t,x.current=t,T.current=t},[]),de=n.useCallback(()=>{_.current=null,x.current=null,T.current=null},[]),z=n.useCallback(t=>{var s;return!!(v&&((s=m[t])!=null&&s[v]))},[m,v]),N=n.useCallback((t,s)=>{const r=m[t];r&&c.dispatchEvent(O,s,u(),{dataItem:r})},[m,u,O]),Q=n.useCallback(t=>{const s=m[t];if(s){const r={nativeEvent:new KeyboardEvent("keydown",{ctrlKey:!0,shiftKey:!1,metaKey:!1}),preventDefault:()=>{},stopPropagation:()=>{},persist:()=>{}};c.dispatchEvent(O,r,u(),{dataItem:s})}},[m,u,O]),X=n.useCallback((t,s)=>{var a,e,l;let r=(l=(e=(a=x.current)!=null?a:_.current)!=null?e:y.current)!=null?l:0;const f=T.current;x.current===null&&(x.current=r);const g=r;if(f!==null&&f!==r){const d=f>r?"down":"up",b=t>r?"down":"up";d!==b&&(x.current=f,r=f)}const R=Math.min(r,t),o=Math.max(r,t);for(let d=R;d<=o;d++)z(d)||N(d,s);if(f!==null){const d=Math.min(g,f),b=Math.max(g,f);for(let E=d;E<=b;E++)(E<R||E>o)&&z(E)&&Q(E)}T.current=t},[Q,z,N]),fe=t=>{$&&c.dispatchEvent($,t,u(),void 0)},me=t=>{t.target.classList.contains("k-list-content")&&(i.data.length>0?c.dispatchEvent(i.onDrop,t,u(),{dataItem:i.data[i.data.length-1]}):c.dispatchEvent(i.onDrop,t,u(),{dataItem:null}))},ge=()=>G===Y.toolbarPosition.NONE||i.toolbar===void 0?`k-listbox-actions-${F.toolbarPosition}`:`k-listbox-actions-${G}`,be=t=>{V&&t.target.classList.contains("k-list-content")&&c.dispatchEvent(V,t,u(),void 0)},k=n.useMemo(()=>{const t=o=>{y.current=o,S(o)},s=(o,a,e,l)=>{const d=l>0?a.focusNext(o):a.focusPrevious(o);typeof(d==null?void 0:d.scrollIntoView)=="function"&&d.scrollIntoView({block:"nearest"}),t(e)},r=(o,a,e,l)=>{e.preventDefault();const b=a.elements.indexOf(o)+l;m[b]&&(N(b,e),w(b),s(o,a,b,l))},f=(o,a,e,l)=>{e.preventDefault();const b=a.elements.indexOf(o)+l;m[b]&&(X(b,e),s(o,a,b,l))},g=(o,a,e,l)=>{e.preventDefault();const b=a.elements.indexOf(o)+l;m[b]&&s(o,a,b,l)},R=(o,a,e)=>{c.dispatchEvent(h,e,u(),{actionName:"remove"})};return new c.Navigation({root:L,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{F10:(o,a,e)=>{var d;e.preventDefault();const l=(d=A.current)==null?void 0:d.querySelector(".k-listbox-actions .k-button:not([disabled])");l&&l.focus()},Space:(o,a,e)=>{e.preventDefault(),e.stopPropagation();const l=a.elements.indexOf(o);N(l,e),e.ctrlKey||e.metaKey||w(l),t(l)},ArrowDown:(o,a,e)=>{const l=e.metaKey||e.ctrlKey;l&&e.shiftKey?c.dispatchEvent(h,e,u(),{actionName:"moveDown"}):l?g(o,a,e,1):e.shiftKey?f(o,a,e,1):r(o,a,e,1)},ArrowUp:(o,a,e)=>{const l=e.metaKey||e.ctrlKey;l&&e.shiftKey?c.dispatchEvent(h,e,u(),{actionName:"moveUp"}):l?g(o,a,e,-1):e.shiftKey?f(o,a,e,-1):r(o,a,e,-1)},ArrowLeft:(o,a,e)=>{(e.metaKey||e.ctrlKey)&&e.shiftKey?(e.preventDefault(),c.dispatchEvent(h,e,u(),{actionName:"transferAllFrom"})):(e.metaKey||e.ctrlKey)&&(e.preventDefault(),c.dispatchEvent(h,e,u(),{actionName:"transferFrom"}))},ArrowRight:(o,a,e)=>{(e.metaKey||e.ctrlKey)&&e.shiftKey?(e.preventDefault(),c.dispatchEvent(h,e,u(),{actionName:"transferAllTo"})):(e.metaKey||e.ctrlKey)&&(e.preventDefault(),c.dispatchEvent(h,e,u(),{actionName:"transferTo"}))},Backspace:(o,a,e)=>{R(o,a,e)},Delete:(o,a,e)=>{R(o,a,e)}}}})},[m,u,h,N,X,w]),ye=n.useCallback(t=>k.triggerKeyboardEvent(t),[k]),pe=n.useMemo(()=>({listId:q}),[q]);return n.useEffect(()=>{const t=k.elements.length,s=U.current!==m.length;t>0&&y.current>=t&&(y.current=t-1,S(t-1)),s&&(t===0?(y.current=0,S(0),de(),P(!1)):w(y.current),U.current=m.length),L.current&&!L.current.contains(document.activeElement)&&P(!1);const r=y.current>0?y.current:void 0;return k.initializeRovingTab(r),()=>k.removeFocusListener()},[k]),n.createElement("div",{id:p,ref:A,style:C,unselectable:"on",className:c.classNames(Z,"k-listbox",{[`k-listbox-${J}`]:K},ge())},n.createElement(ke.ListBoxContext.Provider,{value:pe},i.toolbar&&n.createElement(i.toolbar,null)),n.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:L,onDragOver:t=>t.preventDefault(),onDrop:me,onDragLeave:be,onKeyDown:ye,onFocus:()=>P(!0),onBlur:t=>{t.currentTarget.contains(t.relatedTarget)||P(!1)}},n.createElement("div",{className:c.classNames("k-list",{[`k-list-${J}`]:K})},n.createElement("div",{className:"k-list-content"},n.createElement("ul",{id:q,className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:fe},m.map((t,s)=>{const r=ie(t),f={className:c.classNames("k-list-item",{"k-selected":r,"k-focus":le&&s===re}),role:"option",key:s,id:W+s,"aria-selected":r,"data-uid":W+s,draggable:se,onDragStart:g=>{c.dispatchEvent(ne,g,u(),{dataItem:t})},onDragOver:g=>{g.preventDefault(),c.dispatchEvent(oe,g,u(),{dataItem:t})},onDrop:g=>{c.dispatchEvent(te,g,u(),{dataItem:t})},onClick:g=>{y.current=s,S(s),w(s),g.currentTarget.focus(),c.dispatchEvent(ae,g,u(),{dataItem:t})},onFocus:()=>{y.current=s,S(s)}};return i.item?n.createElement(i.item,{selected:r,dataItem:t,...f,key:f.key},n.createElement("span",{className:"k-list-item-text"},t.name)):n.createElement("li",{...f,key:f.key},n.createElement("span",{className:"k-list-item-text"},ue(t)))}))))),n.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":ce.toLanguageString(j.ariaLabelListBox,j.messages[j.ariaLabelListBox])},m.map((t,s)=>{const r=t[ee||B];return n.createElement("option",{key:s,value:r},r)})))}),F={toolbarPosition:Y.toolbarPosition.RIGHT,draggable:!0,size:void 0};H.propTypes={size:D.oneOf(["small","medium","large"]),toolbarPosition:D.oneOf(["none","top","bottom","left","right"]),textField:D.string.isRequired,valueField:D.string,selectedField:D.string,data:D.array.isRequired};H.displayName="ListBoxInner";exports.ListBox=H;
|
package/ListBox.mjs
CHANGED
|
@@ -5,225 +5,309 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
9
|
-
import
|
|
10
|
-
import { useWebMcpRegister as
|
|
11
|
-
import { useLocalization as
|
|
12
|
-
import { toolbarPosition as
|
|
13
|
-
import { ListBoxContext as
|
|
14
|
-
import { ariaLabelListBox as
|
|
15
|
-
const
|
|
8
|
+
import * as n from "react";
|
|
9
|
+
import D from "prop-types";
|
|
10
|
+
import { useWebMcpRegister as pe, kendoThemeMaps as Ie, dispatchEvent as u, Navigation as De, classNames as _ } from "@progress/kendo-react-common";
|
|
11
|
+
import { useLocalization as he } from "@progress/kendo-react-intl";
|
|
12
|
+
import { toolbarPosition as Q } from "./interfaces/Enums.mjs";
|
|
13
|
+
import { ListBoxContext as Ke } from "./ListBoxContext.mjs";
|
|
14
|
+
import { ariaLabelListBox as J, messages as we } from "./messages/index.mjs";
|
|
15
|
+
const X = n.forwardRef((m, Y) => {
|
|
16
16
|
const {
|
|
17
|
-
id:
|
|
18
|
-
style:
|
|
19
|
-
data:
|
|
20
|
-
textField:
|
|
21
|
-
className:
|
|
22
|
-
valueField:
|
|
23
|
-
selectedField:
|
|
24
|
-
onDrop:
|
|
25
|
-
onKeyDown:
|
|
26
|
-
onDragStart:
|
|
27
|
-
onDragLeave:
|
|
28
|
-
onDragOver:
|
|
29
|
-
onItemClick:
|
|
30
|
-
onItemSelect:
|
|
31
|
-
onKeyboardNavigate:
|
|
32
|
-
size:
|
|
33
|
-
draggable:
|
|
34
|
-
toolbarPosition:
|
|
35
|
-
} =
|
|
17
|
+
id: R,
|
|
18
|
+
style: Z,
|
|
19
|
+
data: d,
|
|
20
|
+
textField: P,
|
|
21
|
+
className: ee,
|
|
22
|
+
valueField: te,
|
|
23
|
+
selectedField: h,
|
|
24
|
+
onDrop: ne,
|
|
25
|
+
onKeyDown: $,
|
|
26
|
+
onDragStart: oe,
|
|
27
|
+
onDragLeave: H,
|
|
28
|
+
onDragOver: re,
|
|
29
|
+
onItemClick: ae,
|
|
30
|
+
onItemSelect: C,
|
|
31
|
+
onKeyboardNavigate: x,
|
|
32
|
+
size: K = L.size,
|
|
33
|
+
draggable: se = L.draggable,
|
|
34
|
+
toolbarPosition: V = L.toolbarPosition
|
|
35
|
+
} = m, v = n.useRef(null), O = n.useRef(null), M = n.useRef(null), b = n.useRef(0), q = n.useRef(d.length), A = n.useRef(null), k = n.useRef(null), T = n.useRef(null), [le, w] = n.useState(0), [ce, F] = n.useState(!1), ie = he(), c = n.useCallback(
|
|
36
36
|
() => ({
|
|
37
|
-
element:
|
|
38
|
-
props:
|
|
37
|
+
element: M.current,
|
|
38
|
+
props: m
|
|
39
39
|
}),
|
|
40
|
-
[]
|
|
40
|
+
[m]
|
|
41
41
|
);
|
|
42
|
-
|
|
43
|
-
const
|
|
44
|
-
if (
|
|
45
|
-
return !!t[
|
|
46
|
-
},
|
|
47
|
-
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
42
|
+
n.useImperativeHandle(O, c), n.useImperativeHandle(Y, () => O.current), pe("listbox", O, m, m.webMcp);
|
|
43
|
+
const G = R + "-accessibility-id", B = R ? `${R}-list` : void 0, U = K ? Ie.sizeMap[K] || K : void 0, ue = (t) => {
|
|
44
|
+
if (h)
|
|
45
|
+
return !!t[h];
|
|
46
|
+
}, fe = (t) => P ? t[P] : t.toString(), E = n.useCallback((t) => {
|
|
47
|
+
A.current = t, k.current = t, T.current = t;
|
|
48
|
+
}, []), me = n.useCallback(() => {
|
|
49
|
+
A.current = null, k.current = null, T.current = null;
|
|
50
|
+
}, []), z = n.useCallback(
|
|
51
|
+
(t) => {
|
|
52
|
+
var a;
|
|
53
|
+
return !!(h && ((a = d[t]) != null && a[h]));
|
|
54
|
+
},
|
|
55
|
+
[d, h]
|
|
56
|
+
), S = n.useCallback(
|
|
57
|
+
(t, a) => {
|
|
58
|
+
const s = d[t];
|
|
59
|
+
s && u(C, a, c(), { dataItem: s });
|
|
60
|
+
},
|
|
61
|
+
[d, c, C]
|
|
62
|
+
), W = n.useCallback(
|
|
63
|
+
(t) => {
|
|
64
|
+
const a = d[t];
|
|
65
|
+
if (a) {
|
|
66
|
+
const s = {
|
|
67
|
+
nativeEvent: new KeyboardEvent("keydown", { ctrlKey: !0, shiftKey: !1, metaKey: !1 }),
|
|
68
|
+
preventDefault: () => {
|
|
69
|
+
},
|
|
70
|
+
stopPropagation: () => {
|
|
71
|
+
},
|
|
72
|
+
persist: () => {
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
u(C, s, c(), { dataItem: a });
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
[d, c, C]
|
|
79
|
+
), j = n.useCallback(
|
|
80
|
+
(t, a) => {
|
|
81
|
+
var r, e, l;
|
|
82
|
+
let s = (l = (e = (r = k.current) != null ? r : A.current) != null ? e : b.current) != null ? l : 0;
|
|
83
|
+
const f = T.current;
|
|
84
|
+
k.current === null && (k.current = s);
|
|
85
|
+
const g = s;
|
|
86
|
+
if (f !== null && f !== s) {
|
|
87
|
+
const i = f > s ? "down" : "up", y = t > s ? "down" : "up";
|
|
88
|
+
i !== y && (k.current = f, s = f);
|
|
89
|
+
}
|
|
90
|
+
const N = Math.min(s, t), o = Math.max(s, t);
|
|
91
|
+
for (let i = N; i <= o; i++)
|
|
92
|
+
z(i) || S(i, a);
|
|
93
|
+
if (f !== null) {
|
|
94
|
+
const i = Math.min(g, f), y = Math.max(g, f);
|
|
95
|
+
for (let I = i; I <= y; I++)
|
|
96
|
+
(I < N || I > o) && z(I) && W(I);
|
|
97
|
+
}
|
|
98
|
+
T.current = t;
|
|
99
|
+
},
|
|
100
|
+
[W, z, S]
|
|
101
|
+
), de = (t) => {
|
|
102
|
+
$ && u($, t, c(), void 0);
|
|
103
|
+
}, ge = (t) => {
|
|
104
|
+
t.target.classList.contains("k-list-content") && (m.data.length > 0 ? u(m.onDrop, t, c(), {
|
|
105
|
+
dataItem: m.data[m.data.length - 1]
|
|
106
|
+
}) : u(m.onDrop, t, c(), {
|
|
52
107
|
dataItem: null
|
|
53
108
|
}));
|
|
54
|
-
},
|
|
55
|
-
|
|
56
|
-
},
|
|
57
|
-
() =>
|
|
58
|
-
|
|
109
|
+
}, ye = () => V === Q.NONE || m.toolbar === void 0 ? `k-listbox-actions-${L.toolbarPosition}` : `k-listbox-actions-${V}`, be = (t) => {
|
|
110
|
+
H && t.target.classList.contains("k-list-content") && u(H, t, c(), void 0);
|
|
111
|
+
}, p = n.useMemo(() => {
|
|
112
|
+
const t = (o) => {
|
|
113
|
+
b.current = o, w(o);
|
|
114
|
+
}, a = (o, r, e, l) => {
|
|
115
|
+
const i = l > 0 ? r.focusNext(o) : r.focusPrevious(o);
|
|
116
|
+
typeof (i == null ? void 0 : i.scrollIntoView) == "function" && i.scrollIntoView({ block: "nearest" }), t(e);
|
|
117
|
+
}, s = (o, r, e, l) => {
|
|
118
|
+
e.preventDefault();
|
|
119
|
+
const y = r.elements.indexOf(o) + l;
|
|
120
|
+
d[y] && (S(y, e), E(y), a(o, r, y, l));
|
|
121
|
+
}, f = (o, r, e, l) => {
|
|
122
|
+
e.preventDefault();
|
|
123
|
+
const y = r.elements.indexOf(o) + l;
|
|
124
|
+
d[y] && (j(y, e), a(o, r, y, l));
|
|
125
|
+
}, g = (o, r, e, l) => {
|
|
126
|
+
e.preventDefault();
|
|
127
|
+
const y = r.elements.indexOf(o) + l;
|
|
128
|
+
d[y] && a(o, r, y, l);
|
|
129
|
+
}, N = (o, r, e) => {
|
|
130
|
+
u(x, e, c(), { actionName: "remove" });
|
|
131
|
+
};
|
|
132
|
+
return new De({
|
|
133
|
+
root: v,
|
|
59
134
|
selectors: [".k-list-item"],
|
|
60
135
|
tabIndex: 0,
|
|
61
136
|
keyboardEvents: {
|
|
62
137
|
keydown: {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
e.
|
|
66
|
-
|
|
67
|
-
|
|
138
|
+
F10: (o, r, e) => {
|
|
139
|
+
var i;
|
|
140
|
+
e.preventDefault();
|
|
141
|
+
const l = (i = M.current) == null ? void 0 : i.querySelector(
|
|
142
|
+
".k-listbox-actions .k-button:not([disabled])"
|
|
143
|
+
);
|
|
144
|
+
l && l.focus();
|
|
68
145
|
},
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
});
|
|
74
|
-
else if (e.metaKey && !e.shiftKey)
|
|
75
|
-
e.preventDefault(), o.focusNext(t);
|
|
76
|
-
else if (!(e.shiftKey && !e.metaKey)) {
|
|
77
|
-
e.preventDefault();
|
|
78
|
-
const r = o.elements.indexOf(t), n = c[r + 1];
|
|
79
|
-
n && (i(u, e, s(), { dataItem: n }), o.focusNext(t));
|
|
80
|
-
}
|
|
146
|
+
Space: (o, r, e) => {
|
|
147
|
+
e.preventDefault(), e.stopPropagation();
|
|
148
|
+
const l = r.elements.indexOf(o);
|
|
149
|
+
S(l, e), e.ctrlKey || e.metaKey || E(l), t(l);
|
|
81
150
|
},
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
151
|
+
ArrowDown: (o, r, e) => {
|
|
152
|
+
const l = e.metaKey || e.ctrlKey;
|
|
153
|
+
l && e.shiftKey ? u(x, e, c(), {
|
|
154
|
+
actionName: "moveDown"
|
|
155
|
+
}) : l ? g(o, r, e, 1) : e.shiftKey ? f(o, r, e, 1) : s(o, r, e, 1);
|
|
156
|
+
},
|
|
157
|
+
ArrowUp: (o, r, e) => {
|
|
158
|
+
const l = e.metaKey || e.ctrlKey;
|
|
159
|
+
l && e.shiftKey ? u(x, e, c(), {
|
|
160
|
+
actionName: "moveUp"
|
|
161
|
+
}) : l ? g(o, r, e, -1) : e.shiftKey ? f(o, r, e, -1) : s(o, r, e, -1);
|
|
94
162
|
},
|
|
95
|
-
ArrowLeft: (
|
|
96
|
-
e.metaKey && e.shiftKey ?
|
|
163
|
+
ArrowLeft: (o, r, e) => {
|
|
164
|
+
(e.metaKey || e.ctrlKey) && e.shiftKey ? (e.preventDefault(), u(x, e, c(), {
|
|
97
165
|
actionName: "transferAllFrom"
|
|
98
|
-
}) : e.metaKey &&
|
|
166
|
+
})) : (e.metaKey || e.ctrlKey) && (e.preventDefault(), u(x, e, c(), {
|
|
99
167
|
actionName: "transferFrom"
|
|
100
|
-
});
|
|
168
|
+
}));
|
|
101
169
|
},
|
|
102
|
-
ArrowRight: (
|
|
103
|
-
e.metaKey && e.shiftKey ?
|
|
170
|
+
ArrowRight: (o, r, e) => {
|
|
171
|
+
(e.metaKey || e.ctrlKey) && e.shiftKey ? (e.preventDefault(), u(x, e, c(), {
|
|
104
172
|
actionName: "transferAllTo"
|
|
105
|
-
}) : e.metaKey &&
|
|
173
|
+
})) : (e.metaKey || e.ctrlKey) && (e.preventDefault(), u(x, e, c(), {
|
|
106
174
|
actionName: "transferTo"
|
|
107
|
-
});
|
|
175
|
+
}));
|
|
108
176
|
},
|
|
109
|
-
Backspace: (
|
|
110
|
-
|
|
177
|
+
Backspace: (o, r, e) => {
|
|
178
|
+
N(o, r, e);
|
|
179
|
+
},
|
|
180
|
+
Delete: (o, r, e) => {
|
|
181
|
+
N(o, r, e);
|
|
111
182
|
}
|
|
112
183
|
}
|
|
113
184
|
}
|
|
114
|
-
})
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
185
|
+
});
|
|
186
|
+
}, [d, c, x, S, j, E]), xe = n.useCallback(
|
|
187
|
+
(t) => p.triggerKeyboardEvent(t),
|
|
188
|
+
[p]
|
|
189
|
+
), ke = n.useMemo(() => ({ listId: B }), [B]);
|
|
190
|
+
return n.useEffect(() => {
|
|
191
|
+
const t = p.elements.length, a = q.current !== d.length;
|
|
192
|
+
t > 0 && b.current >= t && (b.current = t - 1, w(t - 1)), a && (t === 0 ? (b.current = 0, w(0), me(), F(!1)) : E(b.current), q.current = d.length), v.current && !v.current.contains(document.activeElement) && F(!1);
|
|
193
|
+
const s = b.current > 0 ? b.current : void 0;
|
|
194
|
+
return p.initializeRovingTab(s), () => p.removeFocusListener();
|
|
195
|
+
}, [p]), /* @__PURE__ */ n.createElement(
|
|
118
196
|
"div",
|
|
119
197
|
{
|
|
120
|
-
id:
|
|
121
|
-
ref:
|
|
122
|
-
style:
|
|
198
|
+
id: R,
|
|
199
|
+
ref: M,
|
|
200
|
+
style: Z,
|
|
123
201
|
unselectable: "on",
|
|
124
|
-
className:
|
|
125
|
-
|
|
202
|
+
className: _(
|
|
203
|
+
ee,
|
|
126
204
|
"k-listbox",
|
|
127
|
-
{ [`k-listbox-${
|
|
128
|
-
|
|
205
|
+
{ [`k-listbox-${U}`]: K },
|
|
206
|
+
ye()
|
|
129
207
|
)
|
|
130
208
|
},
|
|
131
|
-
/* @__PURE__ */
|
|
132
|
-
/* @__PURE__ */
|
|
209
|
+
/* @__PURE__ */ n.createElement(Ke.Provider, { value: ke }, m.toolbar && /* @__PURE__ */ n.createElement(m.toolbar, null)),
|
|
210
|
+
/* @__PURE__ */ n.createElement(
|
|
133
211
|
"div",
|
|
134
212
|
{
|
|
135
213
|
className: "k-list-scroller k-selectable",
|
|
136
214
|
"data-role": "selectable",
|
|
137
|
-
ref:
|
|
215
|
+
ref: v,
|
|
138
216
|
onDragOver: (t) => t.preventDefault(),
|
|
139
|
-
onDrop:
|
|
140
|
-
onDragLeave:
|
|
141
|
-
onKeyDown:
|
|
217
|
+
onDrop: ge,
|
|
218
|
+
onDragLeave: be,
|
|
219
|
+
onKeyDown: xe,
|
|
220
|
+
onFocus: () => F(!0),
|
|
221
|
+
onBlur: (t) => {
|
|
222
|
+
t.currentTarget.contains(t.relatedTarget) || F(!1);
|
|
223
|
+
}
|
|
142
224
|
},
|
|
143
|
-
/* @__PURE__ */
|
|
225
|
+
/* @__PURE__ */ n.createElement("div", { className: _("k-list", { [`k-list-${U}`]: K }) }, /* @__PURE__ */ n.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ n.createElement(
|
|
144
226
|
"ul",
|
|
145
227
|
{
|
|
146
|
-
id:
|
|
228
|
+
id: B,
|
|
147
229
|
className: "k-list-ul",
|
|
148
230
|
role: "listbox",
|
|
149
231
|
"aria-label": "listbox-container",
|
|
150
|
-
onKeyDown:
|
|
232
|
+
onKeyDown: de
|
|
151
233
|
},
|
|
152
|
-
|
|
153
|
-
const
|
|
154
|
-
className:
|
|
155
|
-
"k-selected":
|
|
156
|
-
"k-focus":
|
|
234
|
+
d.map((t, a) => {
|
|
235
|
+
const s = ue(t), f = {
|
|
236
|
+
className: _("k-list-item", {
|
|
237
|
+
"k-selected": s,
|
|
238
|
+
"k-focus": ce && a === le
|
|
157
239
|
}),
|
|
158
240
|
role: "option",
|
|
159
|
-
key:
|
|
160
|
-
id:
|
|
161
|
-
"aria-selected":
|
|
162
|
-
"data-uid":
|
|
163
|
-
draggable:
|
|
164
|
-
onDragStart: (
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
241
|
+
key: a,
|
|
242
|
+
id: G + a,
|
|
243
|
+
"aria-selected": s,
|
|
244
|
+
"data-uid": G + a,
|
|
245
|
+
draggable: se,
|
|
246
|
+
onDragStart: (g) => {
|
|
247
|
+
u(
|
|
248
|
+
oe,
|
|
249
|
+
g,
|
|
250
|
+
c(),
|
|
169
251
|
{ dataItem: t }
|
|
170
252
|
);
|
|
171
253
|
},
|
|
172
|
-
onDragOver: (
|
|
173
|
-
|
|
254
|
+
onDragOver: (g) => {
|
|
255
|
+
g.preventDefault(), u(re, g, c(), { dataItem: t });
|
|
174
256
|
},
|
|
175
|
-
onDrop: (
|
|
176
|
-
|
|
257
|
+
onDrop: (g) => {
|
|
258
|
+
u(ne, g, c(), { dataItem: t });
|
|
177
259
|
},
|
|
178
|
-
onClick: (
|
|
179
|
-
|
|
260
|
+
onClick: (g) => {
|
|
261
|
+
b.current = a, w(a), E(a), g.currentTarget.focus(), u(ae, g, c(), { dataItem: t });
|
|
180
262
|
},
|
|
181
|
-
onFocus: () =>
|
|
263
|
+
onFocus: () => {
|
|
264
|
+
b.current = a, w(a);
|
|
265
|
+
}
|
|
182
266
|
};
|
|
183
|
-
return
|
|
184
|
-
|
|
267
|
+
return m.item ? /* @__PURE__ */ n.createElement(
|
|
268
|
+
m.item,
|
|
185
269
|
{
|
|
186
|
-
selected:
|
|
270
|
+
selected: s,
|
|
187
271
|
dataItem: t,
|
|
188
|
-
...
|
|
189
|
-
key:
|
|
272
|
+
...f,
|
|
273
|
+
key: f.key
|
|
190
274
|
},
|
|
191
|
-
/* @__PURE__ */
|
|
192
|
-
) : /* @__PURE__ */
|
|
275
|
+
/* @__PURE__ */ n.createElement("span", { className: "k-list-item-text" }, t.name)
|
|
276
|
+
) : /* @__PURE__ */ n.createElement("li", { ...f, key: f.key }, /* @__PURE__ */ n.createElement("span", { className: "k-list-item-text" }, fe(t)));
|
|
193
277
|
})
|
|
194
278
|
)))
|
|
195
279
|
),
|
|
196
|
-
/* @__PURE__ */
|
|
280
|
+
/* @__PURE__ */ n.createElement(
|
|
197
281
|
"select",
|
|
198
282
|
{
|
|
199
283
|
style: { display: "none" },
|
|
200
284
|
multiple: !0,
|
|
201
285
|
"data-role": "listbox",
|
|
202
|
-
"aria-label":
|
|
203
|
-
|
|
204
|
-
|
|
286
|
+
"aria-label": ie.toLanguageString(
|
|
287
|
+
J,
|
|
288
|
+
we[J]
|
|
205
289
|
)
|
|
206
290
|
},
|
|
207
|
-
|
|
208
|
-
const
|
|
209
|
-
return /* @__PURE__ */
|
|
291
|
+
d.map((t, a) => {
|
|
292
|
+
const s = t[te || P];
|
|
293
|
+
return /* @__PURE__ */ n.createElement("option", { key: a, value: s }, s);
|
|
210
294
|
})
|
|
211
295
|
)
|
|
212
296
|
);
|
|
213
|
-
}),
|
|
214
|
-
toolbarPosition:
|
|
297
|
+
}), L = {
|
|
298
|
+
toolbarPosition: Q.RIGHT,
|
|
215
299
|
draggable: !0,
|
|
216
300
|
size: void 0
|
|
217
301
|
};
|
|
218
|
-
|
|
219
|
-
size:
|
|
220
|
-
toolbarPosition:
|
|
221
|
-
textField:
|
|
222
|
-
valueField:
|
|
223
|
-
selectedField:
|
|
224
|
-
data:
|
|
302
|
+
X.propTypes = {
|
|
303
|
+
size: D.oneOf(["small", "medium", "large"]),
|
|
304
|
+
toolbarPosition: D.oneOf(["none", "top", "bottom", "left", "right"]),
|
|
305
|
+
textField: D.string.isRequired,
|
|
306
|
+
valueField: D.string,
|
|
307
|
+
selectedField: D.string,
|
|
308
|
+
data: D.array.isRequired
|
|
225
309
|
};
|
|
226
|
-
|
|
310
|
+
X.displayName = "ListBoxInner";
|
|
227
311
|
export {
|
|
228
|
-
|
|
312
|
+
X as ListBox
|
|
229
313
|
};
|
|
@@ -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,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}}});
|
|
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,n,o,a,r,s){"use strict";function l(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var c=l(t),i=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(i||{});const u=c.createContext({}),d="listbox.moveUp",m="listbox.moveDown",v="listbox.transferTo",f="listbox.transferFrom",p="listbox.transferAllTo",b="listbox.transferAllFrom",g="listbox.remove",h="listbox.actions",x="listbox.ariaLabel",k={[d]:"Move up",[m]:"Move down",[v]:"Move right",[f]:"Move left",[p]:"Move all right",[b]:"Move all left",[g]:"Remove",[h]:"ListBox actions",[x]:"ListBox"},D=c.forwardRef((e,t)=>{const{id:n,style:r,data:s,textField:l,className:d,valueField:m,selectedField:v,onDrop:f,onKeyDown:p,onDragStart:b,onDragLeave:g,onDragOver:h,onItemClick:D,onItemSelect:I,onKeyboardNavigate:w,size:E=y.size,draggable:T=y.draggable,toolbarPosition:N=y.toolbarPosition}=e,B=c.useRef(null),K=c.useRef(null),O=c.useRef(null),R=c.useRef(0),L=c.useRef(s.length),F=c.useRef(null),C=c.useRef(null),A=c.useRef(null),[M,z]=c.useState(0),[P,S]=c.useState(!1),q=a.useLocalization(),U=c.useCallback(()=>({element:O.current,props:e}),[e]);c.useImperativeHandle(K,U),c.useImperativeHandle(t,()=>K.current),o.useWebMcpRegister("listbox",K,e,e.webMcp);const H=n+"-accessibility-id",j=n?`${n}-list`:void 0,$=E?o.kendoThemeMaps.sizeMap[E]||E:void 0,G=c.useCallback(e=>{F.current=e,C.current=e,A.current=e},[]),V=c.useCallback(()=>{F.current=null,C.current=null,A.current=null},[]),W=c.useCallback(e=>{var t;return!(!v||null==(t=s[e])||!t[v])},[s,v]),J=c.useCallback((e,t)=>{const n=s[e];n&&o.dispatchEvent(I,t,U(),{dataItem:n})},[s,U,I]),Q=c.useCallback(e=>{const t=s[e];if(t){const e={nativeEvent:new KeyboardEvent("keydown",{ctrlKey:!0,shiftKey:!1,metaKey:!1}),preventDefault:()=>{},stopPropagation:()=>{},persist:()=>{}};o.dispatchEvent(I,e,U(),{dataItem:t})}},[s,U,I]),X=c.useCallback((e,t)=>{var n,o,a;let r=null!=(a=null!=(o=null!=(n=C.current)?n:F.current)?o:R.current)?a:0;const s=A.current;null===C.current&&(C.current=r);const l=r;if(null!==s&&s!==r){(s>r?"down":"up")!==(e>r?"down":"up")&&(C.current=s,r=s)}const c=Math.min(r,e),i=Math.max(r,e);for(let e=c;e<=i;e++)W(e)||J(e,t);if(null!==s){const e=Math.min(l,s),t=Math.max(l,s);for(let n=e;n<=t;n++)(n<c||n>i)&&W(n)&&Q(n)}A.current=e},[Q,W,J]),Y=c.useMemo(()=>{const e=e=>{R.current=e,z(e)},t=(t,n,o,a)=>{const r=a>0?n.focusNext(t):n.focusPrevious(t);"function"==typeof(null==r?void 0:r.scrollIntoView)&&r.scrollIntoView({block:"nearest"}),e(o)},n=(e,n,o,a)=>{o.preventDefault();const r=n.elements.indexOf(e)+a;s[r]&&(J(r,o),G(r),t(e,n,r,a))},a=(e,n,o,a)=>{o.preventDefault();const r=n.elements.indexOf(e)+a;s[r]&&(X(r,o),t(e,n,r,a))},r=(e,n,o,a)=>{o.preventDefault();const r=n.elements.indexOf(e)+a;s[r]&&t(e,n,r,a)},l=(e,t,n)=>{o.dispatchEvent(w,n,U(),{actionName:"remove"})};return new o.Navigation({root:B,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{F10:(e,t,n)=>{var o;n.preventDefault();const a=null==(o=O.current)?void 0:o.querySelector(".k-listbox-actions .k-button:not([disabled])");a&&a.focus()},Space:(t,n,o)=>{o.preventDefault(),o.stopPropagation();const a=n.elements.indexOf(t);J(a,o),o.ctrlKey||o.metaKey||G(a),e(a)},ArrowDown:(e,t,s)=>{const l=s.metaKey||s.ctrlKey;l&&s.shiftKey?o.dispatchEvent(w,s,U(),{actionName:"moveDown"}):l?r(e,t,s,1):s.shiftKey?a(e,t,s,1):n(e,t,s,1)},ArrowUp:(e,t,s)=>{const l=s.metaKey||s.ctrlKey;l&&s.shiftKey?o.dispatchEvent(w,s,U(),{actionName:"moveUp"}):l?r(e,t,s,-1):s.shiftKey?a(e,t,s,-1):n(e,t,s,-1)},ArrowLeft:(e,t,n)=>{(n.metaKey||n.ctrlKey)&&n.shiftKey?(n.preventDefault(),o.dispatchEvent(w,n,U(),{actionName:"transferAllFrom"})):(n.metaKey||n.ctrlKey)&&(n.preventDefault(),o.dispatchEvent(w,n,U(),{actionName:"transferFrom"}))},ArrowRight:(e,t,n)=>{(n.metaKey||n.ctrlKey)&&n.shiftKey?(n.preventDefault(),o.dispatchEvent(w,n,U(),{actionName:"transferAllTo"})):(n.metaKey||n.ctrlKey)&&(n.preventDefault(),o.dispatchEvent(w,n,U(),{actionName:"transferTo"}))},Backspace:(e,t,n)=>{l(0,0,n)},Delete:(e,t,n)=>{l(0,0,n)}}}})},[s,U,w,J,X,G]),Z=c.useCallback(e=>Y.triggerKeyboardEvent(e),[Y]),_=c.useMemo(()=>({listId:j}),[j]);return c.useEffect(()=>{const e=Y.elements.length,t=L.current!==s.length;e>0&&R.current>=e&&(R.current=e-1,z(e-1)),t&&(0===e?(R.current=0,z(0),V(),S(!1)):G(R.current),L.current=s.length),B.current&&!B.current.contains(document.activeElement)&&S(!1);const n=R.current>0?R.current:void 0;return Y.initializeRovingTab(n),()=>Y.removeFocusListener()},[Y]),c.createElement("div",{id:n,ref:O,style:r,unselectable:"on",className:o.classNames(d,"k-listbox",{[`k-listbox-${$}`]:E},N===i.NONE||void 0===e.toolbar?`k-listbox-actions-${y.toolbarPosition}`:`k-listbox-actions-${N}`)},c.createElement(u.Provider,{value:_},e.toolbar&&c.createElement(e.toolbar,null)),c.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?o.dispatchEvent(e.onDrop,t,U(),{dataItem:e.data[e.data.length-1]}):o.dispatchEvent(e.onDrop,t,U(),{dataItem:null}))},onDragLeave:e=>{g&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(g,e,U(),void 0)},onKeyDown:Z,onFocus:()=>S(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||S(!1)}},c.createElement("div",{className:o.classNames("k-list",{[`k-list-${$}`]:E})},c.createElement("div",{className:"k-list-content"},c.createElement("ul",{id:j,className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:e=>{p&&o.dispatchEvent(p,e,U(),void 0)}},s.map((t,n)=>{const a=(e=>{if(v)return!!e[v]})(t),r={className:o.classNames("k-list-item",{"k-selected":a,"k-focus":P&&n===M}),role:"option",key:n,id:H+n,"aria-selected":a,"data-uid":H+n,draggable:T,onDragStart:e=>{o.dispatchEvent(b,e,U(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),o.dispatchEvent(h,e,U(),{dataItem:t})},onDrop:e=>{o.dispatchEvent(f,e,U(),{dataItem:t})},onClick:e=>{R.current=n,z(n),G(n),e.currentTarget.focus(),o.dispatchEvent(D,e,U(),{dataItem:t})},onFocus:()=>{R.current=n,z(n)}};return e.item?c.createElement(e.item,{selected:a,dataItem:t,...r,key:r.key},c.createElement("span",{className:"k-list-item-text"},t.name)):c.createElement("li",{...r,key:r.key},c.createElement("span",{className:"k-list-item-text"},(e=>l?e[l]:e.toString())(t)))}))))),c.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":q.toLanguageString(x,k[x])},s.map((e,t)=>{const n=e[m||l];return c.createElement("option",{key:t,value:n},n)})))}),y={toolbarPosition:i.RIGHT,draggable:!0,size:void 0};D.propTypes={size:n.oneOf(["small","medium","large"]),toolbarPosition:n.oneOf(["none","top","bottom","left","right"]),textField:n.string.isRequired,valueField:n.string,selectedField:n.string,data:n.array.isRequired},D.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}],w=c.forwardRef((e,t)=>{const{tools:n,dir:l,onToolClick:i,size:d=E.size,data:m=E.data,dataConnected:v=E.dataConnected,selectedField:f=E.selectedField}=e,p=a.useLocalization(),{listId:b}=c.useContext(u),g=c.useRef(null),x=c.useRef(null),D=c.useCallback(()=>({onToolClick:i,props:e,context:{},state:{},refs:{}}),[]);c.useImperativeHandle(x,D),c.useImperativeHandle(t,()=>x.current);const y=(e,t,n)=>{n.preventDefault(),t.focusNext(e)},w=(e,t,n)=>{n.preventDefault(),t.focusPrevious(e)},T=c.useMemo(()=>new o.Navigation({root:g,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:y,ArrowRight:y,ArrowUp:w,ArrowLeft:w,Enter:(e,t,n)=>{e.click(),t.focusElement(t.current,e)}}}}),[]),N=c.useCallback(T.triggerKeyboardEvent.bind(T),[]);c.useEffect(()=>(T.initializeRovingTab(),()=>T.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},K=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},O="rtl"===l,R=p.toLanguageString(h,k[h]);return c.createElement("div",{className:o.classNames("k-listbox-actions"),ref:g,onKeyDown:N,role:"toolbar","aria-label":R,"aria-controls":b},n&&n.map((e,t)=>{const n=I.findIndex(t=>t.name===e),a=I[n],s=(e=>{let t=!0;const n=f||"selected",o=m.length,a=v.length,r=m.findIndex(e=>!0===e[n])>=0,s=v.findIndex(e=>!0===e[n])>=0;switch(e){case"moveUp":t=r?!(m.length>0)||m[0].selected:!s||!(v.length>0)||v[0].selected;break;case"moveDown":t=r?!m[o-1]||m[o-1].selected:!s||!(v.length>0)||v[a-1].selected;break;case"transferTo":t=!(v&&r);break;case"transferFrom":t=!v||!(v&&s);break;case"transferAllTo":t=!(v&&m.length>0);break;case"transferAllFrom":t=!(v&&v.length>0);break;case"remove":t=!(r||s)}return t})(a.name),l=`listbox.${a.name}`,u=p.toLanguageString(l,k[l]);return c.createElement(r.Button,{size:d,key:t,disabled:s,"data-command":a.name,title:u,"aria-label":u,icon:O?K(a.iconName):a.iconName,svgIcon:O?B(a.svgIcon):a.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{o.dispatchEvent(i,e,D(),{toolName:t})})(e,a.name)}})}))}),E={data:[],dataConnected:[],selectedField:"selected",size:void 0};w.propTypes={data:n.array.isRequired,dataConnected:n.array.isRequired,tools:n.array,selectedField:n.string,dir:n.string,size:n.oneOf(["small","medium","large"])},w.displayName="ListBoxToolbarInner";const T=(e,t,n)=>{const o=n.splice(e,1)[0];return n.splice(t,0,o),n},N=o.withIdHOC(D);N.displayName="KendoReactListBox",e.ListBox=N,e.ListBoxToolbar=w,e.moveItem=T,e.processListBoxData=(e=[],t=[],n,o)=>{let a=[],r=[],s=[];const l={listBoxOneData:e,listBoxTwoData:t};switch(n){case"moveUp":a=[...e],a.forEach((e,t)=>{e[o]&&(a=T(t,t-1,a))}),s=[...t],s.forEach((e,t)=>{e[o]&&(s=T(t,t-1,s))}),l.listBoxOneData=a,l.listBoxTwoData=s;break;case"moveDown":a=e.reverse(),a.forEach((e,t)=>{e[o]&&(a=T(t,t-1,a))}),s=t.reverse(),s.forEach((e,t)=>{e[o]&&(s=T(t,t-1,s))}),l.listBoxOneData=[...a].reverse(),l.listBoxTwoData=[...s].reverse();break;case"transferTo":a=e.filter(e=>!e[o]),r=e.filter(e=>e[o]),s=t.concat(r),l.listBoxOneData=a,l.listBoxTwoData=s;break;case"transferFrom":s=t.filter(e=>!e[o]),r=t.filter(e=>e[o]),a=e.concat(r),l.listBoxOneData=a,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]),a=e.filter(e=>!e[o]),l.listBoxOneData=a,l.listBoxTwoData=s}return l},e.processListBoxDragAndDrop=(e=[],t=[],n,o,a)=>{const r=e.findIndex(e=>e[a]===n[a]),s=t.findIndex(e=>e[a]===n[a]),l=null!==o?e.findIndex(e=>e[a]===o[a]):-1,c=null!==o?t.findIndex(e=>e[a]===o[a]):-1,i=r>=0,u=s>=0,d=l>=0,m=c>=0,v=[...e],f=[...t];return i&&d?{listBoxOneData:T(r,l,e),listBoxTwoData:t}:u&&m?{listBoxOneData:e,listBoxTwoData:T(s,c,t)}:i&&(m||null===o)?(null===o?f.push(e[r]):f.splice(c+1,0,e[r]),v.splice(r,1),{listBoxOneData:v,listBoxTwoData:f}):u&&(d||null===o)?(null===o?v.push(t[s]):v.splice(l+1,0,t[s]),f.splice(s,1),{listBoxOneData:v,listBoxTwoData:f}):{listBoxOneData:e,listBoxTwoData:t}}});
|
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: '15.0.1-develop.
|
|
9
|
+
publishDate: 1781105366,
|
|
10
|
+
version: '15.0.1-develop.12',
|
|
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": "15.0.1-develop.
|
|
3
|
+
"version": "15.0.1-develop.12",
|
|
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": "15.0.1-develop.
|
|
30
|
-
"@progress/kendo-react-common": "15.0.1-develop.
|
|
31
|
-
"@progress/kendo-react-intl": "15.0.1-develop.
|
|
29
|
+
"@progress/kendo-react-buttons": "15.0.1-develop.12",
|
|
30
|
+
"@progress/kendo-react-common": "15.0.1-develop.12",
|
|
31
|
+
"@progress/kendo-react-intl": "15.0.1-develop.12",
|
|
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": 1781105366,
|
|
60
60
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
61
61
|
}
|
|
62
62
|
},
|