@progress/kendo-react-listbox 14.4.1 → 14.5.0-develop.10
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/ListBoxToolbar.js +1 -1
- package/ListBoxToolbar.mjs +64 -64
- package/dist/cdn/js/kendo-react-listbox.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +11 -6
package/ListBoxToolbar.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),h=require("prop-types"),k=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-buttons"),j=require("@progress/kendo-react-intl"),c=require("@progress/kendo-svg-icons"),U=require("./messages/index.js");function _(a){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const i in a)if(i!=="default"){const f=Object.getOwnPropertyDescriptor(a,i);Object.defineProperty(m,i,f.get?f:{enumerable:!0,get:()=>a[i]})}}return m.default=a,Object.freeze(m)}const r=_(P),L=[{name:"moveUp",iconName:"chevron-up",svgIcon:c.chevronUpIcon},{name:"moveDown",iconName:"chevron-down",svgIcon:c.chevronDownIcon},{name:"transferTo",iconName:"chevron-right",svgIcon:c.chevronRightIcon},{name:"transferFrom",iconName:"chevron-left",svgIcon:c.chevronLeftIcon},{name:"transferAllTo",iconName:"chevron-double-right",svgIcon:c.chevronDoubleRightIcon},{name:"transferAllFrom",iconName:"chevron-double-left",svgIcon:c.chevronDoubleLeftIcon},{name:"remove",iconName:"x",svgIcon:c.xIcon}],p=r.forwardRef((a,m)=>{const{tools:i,dir:f,onToolClick:w,size:C=b.size,data:d=b.data,dataConnected:n=b.dataConnected,selectedField:F=b.selectedField}=a,S=j.useLocalization(),T=r.useRef(null),x=r.useRef(null),y=r.useCallback(()=>({onToolClick:w,props:a,context:{},state:{},refs:{}}),[]);r.useImperativeHandle(x,y),r.useImperativeHandle(m,()=>x.current);const N=(t,e,s)=>{s.preventDefault(),e.focusNext(t)},R=(t,e,s)=>{s.preventDefault(),e.focusPrevious(t)},g=r.useMemo(()=>new k.Navigation({root:T,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:N,ArrowRight:N,ArrowUp:R,ArrowLeft:R,Enter:(t,e,s)=>{t.click(),e.focusElement(e.current,t)}}}}),[]),q=r.useCallback(g.triggerKeyboardEvent.bind(g),[]);r.useEffect(()=>(g.initializeRovingTab(),()=>g.removeFocusListener()),[]);const A=t=>{switch(t.name){case"chevron-right":return c.chevronLeftIcon;case"chevron-left":return c.chevronRightIcon;case"chevron-double-right":return c.chevronDoubleLeftIcon;case"chevron-double-left":return c.chevronDoubleRightIcon}return t},E=t=>{switch(t){case"chevron-right":return"chevron-left";case"chevron-left":return"chevron-right";case"chevron-double-right":return"chevron-double-left";case"chevron-double-left":return"chevron-double-right"}return t},O=(t,e)=>{k.dispatchEvent(w,t,y(),{toolName:e})},z=t=>{let e=!0;const s=F||"selected",o=d.length,I=n.length,u=d.findIndex(l=>l[s]===!0)>=0,v=n.findIndex(l=>l[s]===!0)>=0;switch(t){case"moveUp":u?e=d.length>0?d[0].selected:!0:v?e=n.length>0?n[0].selected:!0:e=!0;break;case"moveDown":u?e=d[o-1]?d[o-1].selected:!0:v?e=n.length>0?n[I-1].selected:!0:e=!0;break;case"transferTo":e=!(n&&u);break;case"transferFrom":n?e=!(n&&v):e=!0;break;case"transferAllTo":e=!(n&&d.length>0);break;case"transferAllFrom":e=!(n&&n.length>0);break;case"remove":e=!(u||v);break}return e},D=f==="rtl";return r.createElement("div",{className:k.classNames("k-listbox-actions"),ref:T,onKeyDown:q},i&&i.map((t,e)=>{const s=L.findIndex(l=>l.name===t),o=L[s],I=z(o.name),u=`listbox.${o.name}`,v=S.toLanguageString(u,U.messages[u]);return r.createElement(B.Button,{size:C,key:e,disabled:I,"data-command":o.name,title:v,"aria-label":v,icon:D?E(o.iconName):o.iconName,svgIcon:D?A(o.svgIcon):o.svgIcon,onClick:l=>{l.preventDefault(),O(l,o.name)}})}))}),b={data:[],dataConnected:[],selectedField:"selected",size:void 0};p.propTypes={data:h.array.isRequired,dataConnected:h.array.isRequired,tools:h.array,selectedField:h.string,dir:h.string,size:h.oneOf(["small","medium","large"])};p.displayName="ListBoxToolbarInner";exports.ListBoxToolbar=p;
|
package/ListBoxToolbar.mjs
CHANGED
|
@@ -5,51 +5,51 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
8
|
+
import * as r from "react";
|
|
9
9
|
import d from "prop-types";
|
|
10
10
|
import { Navigation as K, classNames as q, dispatchEvent as O } from "@progress/kendo-react-common";
|
|
11
11
|
import { Button as M } from "@progress/kendo-react-buttons";
|
|
12
12
|
import { useLocalization as _ } from "@progress/kendo-react-intl";
|
|
13
|
-
import {
|
|
13
|
+
import { chevronUpIcon as $, chevronDownIcon as j, chevronRightIcon as T, chevronLeftIcon as y, chevronDoubleRightIcon as D, chevronDoubleLeftIcon as F, xIcon as G } from "@progress/kendo-svg-icons";
|
|
14
14
|
import { messages as J } from "./messages/index.mjs";
|
|
15
15
|
const N = [
|
|
16
|
-
{ name: "moveUp", iconName: "
|
|
17
|
-
{ name: "moveDown", iconName: "
|
|
18
|
-
{ name: "transferTo", iconName: "
|
|
19
|
-
{ name: "transferFrom", iconName: "
|
|
20
|
-
{ name: "transferAllTo", iconName: "
|
|
21
|
-
{ name: "transferAllFrom", iconName: "
|
|
16
|
+
{ name: "moveUp", iconName: "chevron-up", svgIcon: $ },
|
|
17
|
+
{ name: "moveDown", iconName: "chevron-down", svgIcon: j },
|
|
18
|
+
{ name: "transferTo", iconName: "chevron-right", svgIcon: T },
|
|
19
|
+
{ name: "transferFrom", iconName: "chevron-left", svgIcon: y },
|
|
20
|
+
{ name: "transferAllTo", iconName: "chevron-double-right", svgIcon: D },
|
|
21
|
+
{ name: "transferAllFrom", iconName: "chevron-double-left", svgIcon: F },
|
|
22
22
|
{ name: "remove", iconName: "x", svgIcon: G }
|
|
23
|
-
],
|
|
23
|
+
], L = r.forwardRef((h, R) => {
|
|
24
24
|
const {
|
|
25
|
-
tools:
|
|
26
|
-
dir:
|
|
27
|
-
onToolClick:
|
|
28
|
-
size:
|
|
25
|
+
tools: f,
|
|
26
|
+
dir: C,
|
|
27
|
+
onToolClick: g,
|
|
28
|
+
size: A = u.size,
|
|
29
29
|
data: s = u.data,
|
|
30
|
-
dataConnected:
|
|
30
|
+
dataConnected: n = u.dataConnected,
|
|
31
31
|
selectedField: E = u.selectedField
|
|
32
|
-
} =
|
|
32
|
+
} = h, z = _(), b = r.useRef(null), p = r.useRef(null), I = r.useCallback(
|
|
33
33
|
() => ({
|
|
34
|
-
onToolClick:
|
|
35
|
-
props:
|
|
34
|
+
onToolClick: g,
|
|
35
|
+
props: h,
|
|
36
36
|
context: {},
|
|
37
37
|
state: {},
|
|
38
38
|
refs: {}
|
|
39
39
|
}),
|
|
40
40
|
[]
|
|
41
41
|
);
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
r.useImperativeHandle(p, I), r.useImperativeHandle(
|
|
43
|
+
R,
|
|
44
44
|
() => p.current
|
|
45
45
|
);
|
|
46
|
-
const k = (t, e,
|
|
47
|
-
|
|
48
|
-
}, w = (t, e,
|
|
49
|
-
|
|
50
|
-
}, m =
|
|
46
|
+
const k = (t, e, c) => {
|
|
47
|
+
c.preventDefault(), e.focusNext(t);
|
|
48
|
+
}, w = (t, e, c) => {
|
|
49
|
+
c.preventDefault(), e.focusPrevious(t);
|
|
50
|
+
}, m = r.useMemo(
|
|
51
51
|
() => new K({
|
|
52
|
-
root:
|
|
52
|
+
root: b,
|
|
53
53
|
selectors: [".k-button:not([disabled])"],
|
|
54
54
|
tabIndex: 0,
|
|
55
55
|
keyboardEvents: {
|
|
@@ -58,84 +58,84 @@ const N = [
|
|
|
58
58
|
ArrowRight: k,
|
|
59
59
|
ArrowUp: w,
|
|
60
60
|
ArrowLeft: w,
|
|
61
|
-
Enter: (t, e,
|
|
61
|
+
Enter: (t, e, c) => {
|
|
62
62
|
t.click(), e.focusElement(e.current, t);
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
}),
|
|
67
67
|
[]
|
|
68
|
-
), S =
|
|
69
|
-
|
|
68
|
+
), S = r.useCallback(m.triggerKeyboardEvent.bind(m), []);
|
|
69
|
+
r.useEffect(() => (m.initializeRovingTab(), () => m.removeFocusListener()), []);
|
|
70
70
|
const B = (t) => {
|
|
71
71
|
switch (t.name) {
|
|
72
|
-
case "
|
|
73
|
-
return
|
|
74
|
-
case "
|
|
72
|
+
case "chevron-right":
|
|
73
|
+
return y;
|
|
74
|
+
case "chevron-left":
|
|
75
75
|
return T;
|
|
76
|
-
case "
|
|
76
|
+
case "chevron-double-right":
|
|
77
|
+
return F;
|
|
78
|
+
case "chevron-double-left":
|
|
77
79
|
return D;
|
|
78
|
-
case "caret-double-alt-left":
|
|
79
|
-
return y;
|
|
80
80
|
}
|
|
81
81
|
return t;
|
|
82
82
|
}, P = (t) => {
|
|
83
83
|
switch (t) {
|
|
84
|
-
case "
|
|
85
|
-
return "
|
|
86
|
-
case "
|
|
87
|
-
return "
|
|
88
|
-
case "
|
|
89
|
-
return "
|
|
90
|
-
case "
|
|
91
|
-
return "
|
|
84
|
+
case "chevron-right":
|
|
85
|
+
return "chevron-left";
|
|
86
|
+
case "chevron-left":
|
|
87
|
+
return "chevron-right";
|
|
88
|
+
case "chevron-double-right":
|
|
89
|
+
return "chevron-double-left";
|
|
90
|
+
case "chevron-double-left":
|
|
91
|
+
return "chevron-double-right";
|
|
92
92
|
}
|
|
93
93
|
return t;
|
|
94
94
|
}, U = (t, e) => {
|
|
95
|
-
O(
|
|
95
|
+
O(g, t, I(), { toolName: e });
|
|
96
96
|
}, H = (t) => {
|
|
97
97
|
let e = !0;
|
|
98
|
-
const
|
|
98
|
+
const c = E || "selected", o = s.length, v = n.length, l = s.findIndex((a) => a[c] === !0) >= 0, i = n.findIndex((a) => a[c] === !0) >= 0;
|
|
99
99
|
switch (t) {
|
|
100
100
|
case "moveUp":
|
|
101
|
-
l ? e = s.length > 0 ? s[0].selected : !0 : i ? e =
|
|
101
|
+
l ? e = s.length > 0 ? s[0].selected : !0 : i ? e = n.length > 0 ? n[0].selected : !0 : e = !0;
|
|
102
102
|
break;
|
|
103
103
|
case "moveDown":
|
|
104
|
-
l ? e = s[
|
|
104
|
+
l ? e = s[o - 1] ? s[o - 1].selected : !0 : i ? e = n.length > 0 ? n[v - 1].selected : !0 : e = !0;
|
|
105
105
|
break;
|
|
106
106
|
case "transferTo":
|
|
107
|
-
e = !(
|
|
107
|
+
e = !(n && l);
|
|
108
108
|
break;
|
|
109
109
|
case "transferFrom":
|
|
110
|
-
|
|
110
|
+
n ? e = !(n && i) : e = !0;
|
|
111
111
|
break;
|
|
112
112
|
case "transferAllTo":
|
|
113
|
-
e = !(
|
|
113
|
+
e = !(n && s.length > 0);
|
|
114
114
|
break;
|
|
115
115
|
case "transferAllFrom":
|
|
116
|
-
e = !(
|
|
116
|
+
e = !(n && n.length > 0);
|
|
117
117
|
break;
|
|
118
118
|
case "remove":
|
|
119
119
|
e = !(l || i);
|
|
120
120
|
break;
|
|
121
121
|
}
|
|
122
122
|
return e;
|
|
123
|
-
}, x =
|
|
124
|
-
return /* @__PURE__ */
|
|
125
|
-
const
|
|
126
|
-
return /* @__PURE__ */
|
|
123
|
+
}, x = C === "rtl";
|
|
124
|
+
return /* @__PURE__ */ r.createElement("div", { className: q("k-listbox-actions"), ref: b, onKeyDown: S }, f && f.map((t, e) => {
|
|
125
|
+
const c = N.findIndex((a) => a.name === t), o = N[c], v = H(o.name), l = `listbox.${o.name}`, i = z.toLanguageString(l, J[l]);
|
|
126
|
+
return /* @__PURE__ */ r.createElement(
|
|
127
127
|
M,
|
|
128
128
|
{
|
|
129
|
-
size:
|
|
129
|
+
size: A,
|
|
130
130
|
key: e,
|
|
131
|
-
disabled:
|
|
132
|
-
"data-command":
|
|
131
|
+
disabled: v,
|
|
132
|
+
"data-command": o.name,
|
|
133
133
|
title: i,
|
|
134
134
|
"aria-label": i,
|
|
135
|
-
icon: x ? P(
|
|
136
|
-
svgIcon: x ? B(
|
|
137
|
-
onClick: (
|
|
138
|
-
|
|
135
|
+
icon: x ? P(o.iconName) : o.iconName,
|
|
136
|
+
svgIcon: x ? B(o.svgIcon) : o.svgIcon,
|
|
137
|
+
onClick: (a) => {
|
|
138
|
+
a.preventDefault(), U(a, o.name);
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
);
|
|
@@ -146,7 +146,7 @@ const N = [
|
|
|
146
146
|
selectedField: "selected",
|
|
147
147
|
size: void 0
|
|
148
148
|
};
|
|
149
|
-
|
|
149
|
+
L.propTypes = {
|
|
150
150
|
data: d.array.isRequired,
|
|
151
151
|
dataConnected: d.array.isRequired,
|
|
152
152
|
tools: d.array,
|
|
@@ -154,7 +154,7 @@ F.propTypes = {
|
|
|
154
154
|
dir: d.string,
|
|
155
155
|
size: d.oneOf(["small", "medium", "large"])
|
|
156
156
|
};
|
|
157
|
-
|
|
157
|
+
L.displayName = "ListBoxToolbarInner";
|
|
158
158
|
export {
|
|
159
|
-
|
|
159
|
+
L as ListBoxToolbar
|
|
160
160
|
};
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListbox={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoSvgIcons)}(this,function(e,t,a,o,n,r,s){"use strict";function l(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var i=l(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const d="listbox.moveUp",m="listbox.moveDown",u="listbox.transferTo",f="listbox.transferFrom",p="listbox.transferAllTo",v="listbox.transferAllFrom",b="listbox.remove",g="listbox.ariaLabel",x={[d]:"Move Up",[m]:"Move Down",[u]:"Transfer To",[f]:"Transfer From",[p]:"Transfer All To",[v]:"Transfer All From",[b]:"Delete",[g]:"ListBox"},h=i.forwardRef((e,t)=>{const{id:a,style:r,data:s,textField:l,className:d,valueField:m,selectedField:u,onDrop:f,onKeyDown:p,onDragStart:v,onDragLeave:b,onDragOver:h,onItemClick:k,onItemSelect:y,onKeyboardNavigate:I,size:E=D.size,draggable:w=D.draggable,toolbarPosition:T=D.toolbarPosition}=e,N=i.useRef(null),B=i.useRef(null),O=i.useRef(null),K=n.useLocalization(),A=i.useCallback(()=>({element:O.current,props:e}),[]);i.useImperativeHandle(B,A),i.useImperativeHandle(t,()=>B.current);const L=a+"-accessibility-id",R=o.kendoThemeMaps.sizeMap[E]||E,F=i.useMemo(()=>new o.Navigation({root:N,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,a)=>{const n=t.elements.indexOf(e);a.metaKey&&o.dispatchEvent(y,a,A(),{dataItem:s[n]}),o.dispatchEvent(y,a,A(),{dataItem:s[n]})},ArrowDown:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(I,a,A(),{actionName:"moveDown"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusNext(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),r=s[n+1];r&&(o.dispatchEvent(y,a,A(),{dataItem:r}),t.focusNext(e))}},ArrowUp:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(I,a,A(),{actionName:"moveUp"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusPrevious(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),r=s[n-1];r&&(o.dispatchEvent(y,a,A(),{dataItem:r}),t.focusPrevious(e))}},ArrowLeft:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(I,a,A(),{actionName:"transferAllFrom"}):a.metaKey&&o.dispatchEvent(I,a,A(),{actionName:"transferFrom"})},ArrowRight:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(I,a,A(),{actionName:"transferAllTo"}):a.metaKey&&o.dispatchEvent(I,a,A(),{actionName:"transferTo"})},Backspace:(e,t,a)=>{o.dispatchEvent(I,a,A(),{actionName:"remove"})}}}}),[s]),z=i.useCallback(F.triggerKeyboardEvent.bind(F),[s]);return i.useEffect(()=>(F.initializeRovingTab(),()=>F.removeFocusListener()),[s]),i.createElement("div",{id:a,ref:O,style:r,unselectable:"on",className:o.classNames(d,"k-listbox",{[`k-listbox-${R}`]:E},T===c.NONE||void 0===e.toolbar?`k-listbox-actions-${D.toolbarPosition}`:`k-listbox-actions-${T}`)},e.toolbar&&i.createElement(e.toolbar,null),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:N,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?o.dispatchEvent(e.onDrop,t,A(),{dataItem:e.data[e.data.length-1]}):o.dispatchEvent(e.onDrop,t,A(),{dataItem:null}))},onDragLeave:e=>{b&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(b,e,A(),void 0)},onKeyDown:z},i.createElement("div",{className:o.classNames("k-list",{[`k-list-${R}`]:E})},i.createElement("div",{className:"k-list-content"},i.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:e=>{p&&o.dispatchEvent(p,e,A(),void 0)}},s.map((t,a)=>{const n=(e=>{if(u)return!!e[u]})(t),r={className:o.classNames("k-list-item",{"k-selected":n}),role:"option",key:a,id:L+a,"aria-selected":n,"data-uid":L+a,draggable:w,onDragStart:e=>{o.dispatchEvent(v,e,A(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),o.dispatchEvent(h,e,A(),{dataItem:t})},onDrop:e=>{o.dispatchEvent(f,e,A(),{dataItem:t})},onClick:e=>{o.dispatchEvent(k,e,A(),{dataItem:t})}};return e.item?i.createElement(e.item,{selected:n,dataItem:t,...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},t.name)):i.createElement("li",{...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},(e=>l?e[l]:e.toString())(t)))}))))),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":K.toLanguageString(g,x[g])},s.map((e,t)=>{const a=e[m||l];return i.createElement("option",{key:t,value:a},a)})))}),D={toolbarPosition:c.RIGHT,draggable:!0,size:void 0};h.propTypes={size:a.oneOf(["small","medium","large"]),toolbarPosition:a.oneOf(["none","top","bottom","left","right"]),textField:a.string.isRequired,valueField:a.string,selectedField:a.string,data:a.array.isRequired},h.displayName="ListBoxInner";const k=[{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}],y=i.forwardRef((e,t)=>{const{tools:a,dir:l,onToolClick:c,size:d=I.size,data:m=I.data,dataConnected:u=I.dataConnected,selectedField:f=I.selectedField}=e,p=n.useLocalization(),v=i.useRef(null),b=i.useRef(null),g=i.useCallback(()=>({onToolClick:c,props:e,context:{},state:{},refs:{}}),[]);i.useImperativeHandle(b,g),i.useImperativeHandle(t,()=>b.current);const h=(e,t,a)=>{a.preventDefault(),t.focusNext(e)},D=(e,t,a)=>{a.preventDefault(),t.focusPrevious(e)},y=i.useMemo(()=>new o.Navigation({root:v,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:h,ArrowRight:h,ArrowUp:D,ArrowLeft:D,Enter:(e,t,a)=>{e.click(),t.focusElement(t.current,e)}}}}),[]),E=i.useCallback(y.triggerKeyboardEvent.bind(y),[]);i.useEffect(()=>(y.initializeRovingTab(),()=>y.removeFocusListener()),[]);const w=e=>{switch(e.name){case"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:v,onKeyDown:E},a&&a.map((e,t)=>{const a=k.findIndex(t=>t.name===e),n=k[a],s=(e=>{let t=!0;const a=f||"selected",o=m.length,n=u.length,r=m.findIndex(e=>!0===e[a])>=0,s=u.findIndex(e=>!0===e[a])>=0;switch(e){case"moveUp":t=r?!(m.length>0)||m[0].selected:!s||!(u.length>0)||u[0].selected;break;case"moveDown":t=r?!m[o-1]||m[o-1].selected:!s||!(u.length>0)||u[n-1].selected;break;case"transferTo":t=!(u&&r);break;case"transferFrom":t=!u||!(u&&s);break;case"transferAllTo":t=!(u&&m.length>0);break;case"transferAllFrom":t=!(u&&u.length>0);break;case"remove":t=!(r||s)}return t})(n.name),l=`listbox.${n.name}`,v=p.toLanguageString(l,x[l]);return i.createElement(r.Button,{size:d,key:t,disabled:s,"data-command":n.name,title:v,"aria-label":v,icon:N?T(n.iconName):n.iconName,svgIcon:N?w(n.svgIcon):n.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{o.dispatchEvent(c,e,g(),{toolName:t})})(e,n.name)}})}))}),I={data:[],dataConnected:[],selectedField:"selected",size:void 0};y.propTypes={data:a.array.isRequired,dataConnected:a.array.isRequired,tools:a.array,selectedField:a.string,dir:a.string,size:a.oneOf(["small","medium","large"])},y.displayName="ListBoxToolbarInner";const E=(e,t,a)=>{const o=a.splice(e,1)[0];return a.splice(t,0,o),a},w=o.withIdHOC(h);w.displayName="KendoReactListBox",e.ListBox=w,e.ListBoxToolbar=y,e.moveItem=E,e.processListBoxData=(e=[],t=[],a,o)=>{let n=[],r=[],s=[];const l={listBoxOneData:e,listBoxTwoData:t};switch(a){case"moveUp":n=[...e],n.forEach((e,t)=>{e[o]&&(n=E(t,t-1,n))}),s=[...t],s.forEach((e,t)=>{e[o]&&(s=E(t,t-1,s))}),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach((e,t)=>{e[o]&&(n=E(t,t-1,n))}),s=t.reverse(),s.forEach((e,t)=>{e[o]&&(s=E(t,t-1,s))}),l.listBoxOneData=[...n].reverse(),l.listBoxTwoData=[...s].reverse();break;case"transferTo":n=e.filter(e=>!e[o]),r=e.filter(e=>e[o]),s=t.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferFrom":s=t.filter(e=>!e[o]),r=t.filter(e=>e[o]),n=e.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":s=t.filter(e=>!e[o]),n=e.filter(e=>!e[o]),l.listBoxOneData=n,l.listBoxTwoData=s}return l},e.processListBoxDragAndDrop=(e=[],t=[],a,o,n)=>{const r=e.findIndex(e=>e[n]===a[n]),s=t.findIndex(e=>e[n]===a[n]),l=null!==o?e.findIndex(e=>e[n]===o[n]):-1,i=null!==o?t.findIndex(e=>e[n]===o[n]):-1,c=r>=0,d=s>=0,m=l>=0,u=i>=0,f=[...e],p=[...t];return c&&m?{listBoxOneData:E(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:E(s,i,t)}:c&&(u||null===o)?(null===o?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}}});
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListbox={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoSvgIcons)}(this,function(e,t,a,o,n,r,s){"use strict";function l(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var i=l(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const d="listbox.moveUp",m="listbox.moveDown",u="listbox.transferTo",f="listbox.transferFrom",v="listbox.transferAllTo",p="listbox.transferAllFrom",h="listbox.remove",b="listbox.ariaLabel",g={[d]:"Move Up",[m]:"Move Down",[u]:"Transfer To",[f]:"Transfer From",[v]:"Transfer All To",[p]:"Transfer All From",[h]:"Delete",[b]:"ListBox"},x=i.forwardRef((e,t)=>{const{id:a,style:r,data:s,textField:l,className:d,valueField:m,selectedField:u,onDrop:f,onKeyDown:v,onDragStart:p,onDragLeave:h,onDragOver:x,onItemClick:k,onItemSelect:y,onKeyboardNavigate:I,size:E=D.size,draggable:w=D.draggable,toolbarPosition:T=D.toolbarPosition}=e,N=i.useRef(null),B=i.useRef(null),O=i.useRef(null),K=n.useLocalization(),L=i.useCallback(()=>({element:O.current,props:e}),[]);i.useImperativeHandle(B,L),i.useImperativeHandle(t,()=>B.current);const R=a+"-accessibility-id",F=o.kendoThemeMaps.sizeMap[E]||E,A=i.useMemo(()=>new o.Navigation({root:N,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,a)=>{const n=t.elements.indexOf(e);a.metaKey&&o.dispatchEvent(y,a,L(),{dataItem:s[n]}),o.dispatchEvent(y,a,L(),{dataItem:s[n]})},ArrowDown:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(I,a,L(),{actionName:"moveDown"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusNext(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),r=s[n+1];r&&(o.dispatchEvent(y,a,L(),{dataItem:r}),t.focusNext(e))}},ArrowUp:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(I,a,L(),{actionName:"moveUp"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusPrevious(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),r=s[n-1];r&&(o.dispatchEvent(y,a,L(),{dataItem:r}),t.focusPrevious(e))}},ArrowLeft:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(I,a,L(),{actionName:"transferAllFrom"}):a.metaKey&&o.dispatchEvent(I,a,L(),{actionName:"transferFrom"})},ArrowRight:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(I,a,L(),{actionName:"transferAllTo"}):a.metaKey&&o.dispatchEvent(I,a,L(),{actionName:"transferTo"})},Backspace:(e,t,a)=>{o.dispatchEvent(I,a,L(),{actionName:"remove"})}}}}),[s]),z=i.useCallback(A.triggerKeyboardEvent.bind(A),[s]);return i.useEffect(()=>(A.initializeRovingTab(),()=>A.removeFocusListener()),[s]),i.createElement("div",{id:a,ref:O,style:r,unselectable:"on",className:o.classNames(d,"k-listbox",{[`k-listbox-${F}`]:E},T===c.NONE||void 0===e.toolbar?`k-listbox-actions-${D.toolbarPosition}`:`k-listbox-actions-${T}`)},e.toolbar&&i.createElement(e.toolbar,null),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:N,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?o.dispatchEvent(e.onDrop,t,L(),{dataItem:e.data[e.data.length-1]}):o.dispatchEvent(e.onDrop,t,L(),{dataItem:null}))},onDragLeave:e=>{h&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(h,e,L(),void 0)},onKeyDown:z},i.createElement("div",{className:o.classNames("k-list",{[`k-list-${F}`]:E})},i.createElement("div",{className:"k-list-content"},i.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:e=>{v&&o.dispatchEvent(v,e,L(),void 0)}},s.map((t,a)=>{const n=(e=>{if(u)return!!e[u]})(t),r={className:o.classNames("k-list-item",{"k-selected":n}),role:"option",key:a,id:R+a,"aria-selected":n,"data-uid":R+a,draggable:w,onDragStart:e=>{o.dispatchEvent(p,e,L(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),o.dispatchEvent(x,e,L(),{dataItem:t})},onDrop:e=>{o.dispatchEvent(f,e,L(),{dataItem:t})},onClick:e=>{o.dispatchEvent(k,e,L(),{dataItem:t})}};return e.item?i.createElement(e.item,{selected:n,dataItem:t,...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},t.name)):i.createElement("li",{...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},(e=>l?e[l]:e.toString())(t)))}))))),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":K.toLanguageString(b,g[b])},s.map((e,t)=>{const a=e[m||l];return i.createElement("option",{key:t,value:a},a)})))}),D={toolbarPosition:c.RIGHT,draggable:!0,size:void 0};x.propTypes={size:a.oneOf(["small","medium","large"]),toolbarPosition:a.oneOf(["none","top","bottom","left","right"]),textField:a.string.isRequired,valueField:a.string,selectedField:a.string,data:a.array.isRequired},x.displayName="ListBoxInner";const k=[{name:"moveUp",iconName:"chevron-up",svgIcon:s.chevronUpIcon},{name:"moveDown",iconName:"chevron-down",svgIcon:s.chevronDownIcon},{name:"transferTo",iconName:"chevron-right",svgIcon:s.chevronRightIcon},{name:"transferFrom",iconName:"chevron-left",svgIcon:s.chevronLeftIcon},{name:"transferAllTo",iconName:"chevron-double-right",svgIcon:s.chevronDoubleRightIcon},{name:"transferAllFrom",iconName:"chevron-double-left",svgIcon:s.chevronDoubleLeftIcon},{name:"remove",iconName:"x",svgIcon:s.xIcon}],y=i.forwardRef((e,t)=>{const{tools:a,dir:l,onToolClick:c,size:d=I.size,data:m=I.data,dataConnected:u=I.dataConnected,selectedField:f=I.selectedField}=e,v=n.useLocalization(),p=i.useRef(null),h=i.useRef(null),b=i.useCallback(()=>({onToolClick:c,props:e,context:{},state:{},refs:{}}),[]);i.useImperativeHandle(h,b),i.useImperativeHandle(t,()=>h.current);const x=(e,t,a)=>{a.preventDefault(),t.focusNext(e)},D=(e,t,a)=>{a.preventDefault(),t.focusPrevious(e)},y=i.useMemo(()=>new o.Navigation({root:p,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:x,ArrowRight:x,ArrowUp:D,ArrowLeft:D,Enter:(e,t,a)=>{e.click(),t.focusElement(t.current,e)}}}}),[]),E=i.useCallback(y.triggerKeyboardEvent.bind(y),[]);i.useEffect(()=>(y.initializeRovingTab(),()=>y.removeFocusListener()),[]);const w=e=>{switch(e.name){case"chevron-right":return s.chevronLeftIcon;case"chevron-left":return s.chevronRightIcon;case"chevron-double-right":return s.chevronDoubleLeftIcon;case"chevron-double-left":return s.chevronDoubleRightIcon}return e},T=e=>{switch(e){case"chevron-right":return"chevron-left";case"chevron-left":return"chevron-right";case"chevron-double-right":return"chevron-double-left";case"chevron-double-left":return"chevron-double-right"}return e},N="rtl"===l;return i.createElement("div",{className:o.classNames("k-listbox-actions"),ref:p,onKeyDown:E},a&&a.map((e,t)=>{const a=k.findIndex(t=>t.name===e),n=k[a],s=(e=>{let t=!0;const a=f||"selected",o=m.length,n=u.length,r=m.findIndex(e=>!0===e[a])>=0,s=u.findIndex(e=>!0===e[a])>=0;switch(e){case"moveUp":t=r?!(m.length>0)||m[0].selected:!s||!(u.length>0)||u[0].selected;break;case"moveDown":t=r?!m[o-1]||m[o-1].selected:!s||!(u.length>0)||u[n-1].selected;break;case"transferTo":t=!(u&&r);break;case"transferFrom":t=!u||!(u&&s);break;case"transferAllTo":t=!(u&&m.length>0);break;case"transferAllFrom":t=!(u&&u.length>0);break;case"remove":t=!(r||s)}return t})(n.name),l=`listbox.${n.name}`,p=v.toLanguageString(l,g[l]);return i.createElement(r.Button,{size:d,key:t,disabled:s,"data-command":n.name,title:p,"aria-label":p,icon:N?T(n.iconName):n.iconName,svgIcon:N?w(n.svgIcon):n.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{o.dispatchEvent(c,e,b(),{toolName:t})})(e,n.name)}})}))}),I={data:[],dataConnected:[],selectedField:"selected",size:void 0};y.propTypes={data:a.array.isRequired,dataConnected:a.array.isRequired,tools:a.array,selectedField:a.string,dir:a.string,size:a.oneOf(["small","medium","large"])},y.displayName="ListBoxToolbarInner";const E=(e,t,a)=>{const o=a.splice(e,1)[0];return a.splice(t,0,o),a},w=o.withIdHOC(x);w.displayName="KendoReactListBox",e.ListBox=w,e.ListBoxToolbar=y,e.moveItem=E,e.processListBoxData=(e=[],t=[],a,o)=>{let n=[],r=[],s=[];const l={listBoxOneData:e,listBoxTwoData:t};switch(a){case"moveUp":n=[...e],n.forEach((e,t)=>{e[o]&&(n=E(t,t-1,n))}),s=[...t],s.forEach((e,t)=>{e[o]&&(s=E(t,t-1,s))}),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach((e,t)=>{e[o]&&(n=E(t,t-1,n))}),s=t.reverse(),s.forEach((e,t)=>{e[o]&&(s=E(t,t-1,s))}),l.listBoxOneData=[...n].reverse(),l.listBoxTwoData=[...s].reverse();break;case"transferTo":n=e.filter(e=>!e[o]),r=e.filter(e=>e[o]),s=t.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferFrom":s=t.filter(e=>!e[o]),r=t.filter(e=>e[o]),n=e.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":s=t.filter(e=>!e[o]),n=e.filter(e=>!e[o]),l.listBoxOneData=n,l.listBoxTwoData=s}return l},e.processListBoxDragAndDrop=(e=[],t=[],a,o,n)=>{const r=e.findIndex(e=>e[n]===a[n]),s=t.findIndex(e=>e[n]===a[n]),l=null!==o?e.findIndex(e=>e[n]===o[n]):-1,i=null!==o?t.findIndex(e=>e[n]===o[n]):-1,c=r>=0,d=s>=0,m=l>=0,u=i>=0,f=[...e],v=[...t];return c&&m?{listBoxOneData:E(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:E(s,i,t)}:c&&(u||null===o)?(null===o?v.push(e[r]):v.splice(i+1,0,e[r]),f.splice(r,1),{listBoxOneData:f,listBoxTwoData:v}):d&&(m||null===o)?(null===o?f.push(t[s]):f.splice(l+1,0,t[s]),v.splice(s,1),{listBoxOneData:f,listBoxTwoData:v}):{listBoxOneData:e,listBoxTwoData:t}}});
|
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: '14.
|
|
9
|
+
publishDate: 1778664508,
|
|
10
|
+
version: '14.5.0-develop.10',
|
|
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": "14.
|
|
3
|
+
"version": "14.5.0-develop.10",
|
|
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,10 +26,10 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-react-buttons": "14.
|
|
30
|
-
"@progress/kendo-react-common": "14.
|
|
31
|
-
"@progress/kendo-react-intl": "14.
|
|
32
|
-
"@progress/kendo-svg-icons": "^4.0.0",
|
|
29
|
+
"@progress/kendo-react-buttons": "14.5.0-develop.10",
|
|
30
|
+
"@progress/kendo-react-common": "14.5.0-develop.10",
|
|
31
|
+
"@progress/kendo-react-intl": "14.5.0-develop.10",
|
|
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"
|
|
35
35
|
},
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"package": {
|
|
57
57
|
"productName": "KendoReact",
|
|
58
58
|
"productCode": "KENDOUIREACT",
|
|
59
|
-
"publishDate":
|
|
59
|
+
"publishDate": 1778664508,
|
|
60
60
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
61
61
|
}
|
|
62
62
|
},
|
|
@@ -66,5 +66,10 @@
|
|
|
66
66
|
"repository": {
|
|
67
67
|
"type": "git",
|
|
68
68
|
"url": "git+https://github.com/telerik/kendo-react.git"
|
|
69
|
+
},
|
|
70
|
+
"peerDependenciesMeta": {
|
|
71
|
+
"@progress/kendo-svg-icons": {
|
|
72
|
+
"optional": true
|
|
73
|
+
}
|
|
69
74
|
}
|
|
70
75
|
}
|