@progress/kendo-react-listbox 7.4.0 → 7.5.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ListBox.js +1 -1
- package/ListBox.mjs +44 -42
- package/ListBoxToolbar.js +1 -1
- package/ListBoxToolbar.mjs +15 -12
- package/dist/cdn/js/kendo-react-listbox.js +1 -1
- package/index.d.mts +14 -0
- package/index.d.ts +14 -0
- 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
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),n=require("prop-types"),s=require("@progress/kendo-react-common"),h=require("./interfaces/Enums.js"),u=require("./package-metadata.js");function b(l){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>l[t]})}}return o.default=l,Object.freeze(o)}const e=b(m),c=class c extends e.PureComponent{constructor(o){super(o),this.setSelected=t=>{if(this.props.selectedField)return!!t[this.props.selectedField]},this.renderItem=t=>this.props.textField?t[this.props.textField]:t.toString(),this.handleKeyDown=t=>{this.props.onKeyDown&&s.dispatchEvent(this.props.onKeyDown,t,this,void 0)},this.handleContainerDrop=t=>{t.target.classList.contains("k-list-content")&&(this.props.data.length>0?s.dispatchEvent(this.props.onDrop,t,this,{dataItem:this.props.data[this.props.data.length-1]}):s.dispatchEvent(this.props.onDrop,t,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===h.toolbarPosition.NONE||this.props.toolbar===void 0?"":`k-listbox-actions-${this.props.toolbarPosition}`,this.handleOnDragLeave=t=>{this.props.onDragLeave&&t.target.classList.contains("k-list-content")&&s.dispatchEvent(this.props.onDragLeave,t,this,void 0)},s.validatePackage(u.packageMetadata)}get itemGuid(){return this.props.id+"-accessibility-id"}render(){const o=s.kendoThemeMaps.sizeMap[this.props.size]||this.props.size;return e.createElement("div",{id:this.props.id,className:s.classNames(this.props.className,"k-listbox",{[`k-listbox-${o}`]:this.props.size},this.setToolbarPosition()),style:this.props.style,unselectable:"on"},this.props.toolbar&&this.props.toolbarPosition!=="bottom"&&e.createElement(this.props.toolbar,null),e.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",onDragOver:t=>t.preventDefault(),onDrop:this.handleContainerDrop,onDragLeave:this.handleOnDragLeave},e.createElement("div",{className:s.classNames("k-list",{[`k-list-${o}`]:this.props.size})},e.createElement("div",{className:"k-list-content"},e.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",tabIndex:0,onKeyDown:this.handleKeyDown},this.props.data.map((t,a)=>{const r=this.setSelected(t),p={className:s.classNames("k-list-item",{"k-selected":r}),role:"option","aria-selected":r,key:a,id:this.itemGuid+a,"data-uid":this.itemGuid+a,draggable:this.props.draggable,onDragStart:i=>s.dispatchEvent(this.props.onDragStart,i,this,{dataItem:t}),onDragOver:i=>{i.preventDefault(),s.dispatchEvent(this.props.onDragOver,i,this,{dataItem:t})},onDrop:i=>s.dispatchEvent(this.props.onDrop,i,this,{dataItem:t}),onClick:i=>s.dispatchEvent(this.props.onItemClick,i,this,{dataItem:t})};return this.props.item?e.createElement(this.props.item,{selected:r,dataItem:t,...p,key:p.key},e.createElement("span",{className:"k-list-item-text"},t.name)):e.createElement("li",{...p,key:p.key},e.createElement("span",{className:"k-list-item-text"},this.renderItem(t)))}))))),this.props.toolbar&&this.props.toolbarPosition==="bottom"&&e.createElement(this.props.toolbar,null),e.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},this.props.data.map((t,a)=>{const r=t[this.props.valueField||this.props.textField];return e.createElement("option",{key:a,value:r},r)})))}};c.propTypes={size:n.oneOf([null,"small","medium","large"]),toolbarPosition:n.oneOf(["none","top","bottom","left","right"]),textField:n.string,valueField:n.string,selectedField:n.string,data:n.array},c.defaultProps={toolbarPosition:h.toolbarPosition.RIGHT,draggable:!0,size:"medium"};let d=c;exports.ListBox=d;
|
package/ListBox.mjs
CHANGED
|
@@ -6,23 +6,23 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
9
|
+
import * as e from "react";
|
|
10
10
|
import r from "prop-types";
|
|
11
|
-
import { dispatchEvent as
|
|
12
|
-
import { toolbarPosition as
|
|
13
|
-
import { packageMetadata as
|
|
14
|
-
const
|
|
15
|
-
constructor(
|
|
16
|
-
super(
|
|
11
|
+
import { dispatchEvent as o, validatePackage as m, kendoThemeMaps as u, classNames as h } from "@progress/kendo-react-common";
|
|
12
|
+
import { toolbarPosition as d } from "./interfaces/Enums.mjs";
|
|
13
|
+
import { packageMetadata as g } from "./package-metadata.mjs";
|
|
14
|
+
const p = class p extends e.PureComponent {
|
|
15
|
+
constructor(l) {
|
|
16
|
+
super(l), this.setSelected = (t) => {
|
|
17
17
|
if (this.props.selectedField)
|
|
18
18
|
return !!t[this.props.selectedField];
|
|
19
19
|
}, this.renderItem = (t) => this.props.textField ? t[this.props.textField] : t.toString(), this.handleKeyDown = (t) => {
|
|
20
|
-
this.props.onKeyDown &&
|
|
20
|
+
this.props.onKeyDown && o(this.props.onKeyDown, t, this, void 0);
|
|
21
21
|
}, this.handleContainerDrop = (t) => {
|
|
22
|
-
t.target.classList.contains("k-list-content") && (this.props.data.length > 0 ?
|
|
23
|
-
}, this.setToolbarPosition = () => this.props.toolbarPosition ===
|
|
24
|
-
this.props.onDragLeave && t.target.classList.contains("k-list-content") &&
|
|
25
|
-
},
|
|
22
|
+
t.target.classList.contains("k-list-content") && (this.props.data.length > 0 ? o(this.props.onDrop, t, this, { dataItem: this.props.data[this.props.data.length - 1] }) : o(this.props.onDrop, t, this, { dataItem: null }));
|
|
23
|
+
}, this.setToolbarPosition = () => this.props.toolbarPosition === d.NONE || this.props.toolbar === void 0 ? "" : `k-listbox-actions-${this.props.toolbarPosition}`, this.handleOnDragLeave = (t) => {
|
|
24
|
+
this.props.onDragLeave && t.target.classList.contains("k-list-content") && o(this.props.onDragLeave, t, this, void 0);
|
|
25
|
+
}, m(g);
|
|
26
26
|
}
|
|
27
27
|
get itemGuid() {
|
|
28
28
|
return this.props.id + "-accessibility-id";
|
|
@@ -31,75 +31,77 @@ const n = class n extends s.PureComponent {
|
|
|
31
31
|
* @hidden
|
|
32
32
|
*/
|
|
33
33
|
render() {
|
|
34
|
-
|
|
34
|
+
const l = u.sizeMap[this.props.size] || this.props.size;
|
|
35
|
+
return /* @__PURE__ */ e.createElement(
|
|
35
36
|
"div",
|
|
36
37
|
{
|
|
37
38
|
id: this.props.id,
|
|
38
|
-
className:
|
|
39
|
+
className: h(
|
|
39
40
|
this.props.className,
|
|
40
41
|
"k-listbox",
|
|
42
|
+
{ [`k-listbox-${l}`]: this.props.size },
|
|
41
43
|
this.setToolbarPosition()
|
|
42
44
|
),
|
|
43
45
|
style: this.props.style,
|
|
44
46
|
unselectable: "on"
|
|
45
47
|
},
|
|
46
|
-
this.props.toolbar && this.props.toolbarPosition !== "bottom" && /* @__PURE__ */
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
+
this.props.toolbar && this.props.toolbarPosition !== "bottom" && /* @__PURE__ */ e.createElement(this.props.toolbar, null),
|
|
49
|
+
/* @__PURE__ */ e.createElement(
|
|
48
50
|
"div",
|
|
49
51
|
{
|
|
50
52
|
className: "k-list-scroller k-selectable",
|
|
51
53
|
"data-role": "selectable",
|
|
52
|
-
onDragOver: (
|
|
54
|
+
onDragOver: (t) => t.preventDefault(),
|
|
53
55
|
onDrop: this.handleContainerDrop,
|
|
54
56
|
onDragLeave: this.handleOnDragLeave
|
|
55
57
|
},
|
|
56
|
-
/* @__PURE__ */
|
|
57
|
-
[`k-list-${
|
|
58
|
-
}) }, /* @__PURE__ */
|
|
59
|
-
const
|
|
60
|
-
className:
|
|
58
|
+
/* @__PURE__ */ e.createElement("div", { className: h("k-list", {
|
|
59
|
+
[`k-list-${l}`]: this.props.size
|
|
60
|
+
}) }, /* @__PURE__ */ e.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ e.createElement("ul", { className: "k-list-ul", role: "listbox", "aria-label": "listbox-container", tabIndex: 0, onKeyDown: this.handleKeyDown }, this.props.data.map((t, a) => {
|
|
61
|
+
const i = this.setSelected(t), n = {
|
|
62
|
+
className: h(
|
|
61
63
|
"k-list-item",
|
|
62
64
|
{
|
|
63
|
-
"k-selected":
|
|
65
|
+
"k-selected": i
|
|
64
66
|
}
|
|
65
67
|
),
|
|
66
68
|
role: "option",
|
|
67
|
-
"aria-selected":
|
|
68
|
-
key:
|
|
69
|
-
id: this.itemGuid +
|
|
70
|
-
"data-uid": this.itemGuid +
|
|
69
|
+
"aria-selected": i,
|
|
70
|
+
key: a,
|
|
71
|
+
id: this.itemGuid + a,
|
|
72
|
+
"data-uid": this.itemGuid + a,
|
|
71
73
|
draggable: this.props.draggable,
|
|
72
|
-
onDragStart: (
|
|
73
|
-
onDragOver: (
|
|
74
|
-
|
|
74
|
+
onDragStart: (s) => o(this.props.onDragStart, s, this, { dataItem: t }),
|
|
75
|
+
onDragOver: (s) => {
|
|
76
|
+
s.preventDefault(), o(this.props.onDragOver, s, this, { dataItem: t });
|
|
75
77
|
},
|
|
76
|
-
onDrop: (
|
|
77
|
-
onClick: (
|
|
78
|
+
onDrop: (s) => o(this.props.onDrop, s, this, { dataItem: t }),
|
|
79
|
+
onClick: (s) => o(this.props.onItemClick, s, this, { dataItem: t })
|
|
78
80
|
};
|
|
79
|
-
return this.props.item ? /* @__PURE__ */
|
|
81
|
+
return this.props.item ? /* @__PURE__ */ e.createElement(this.props.item, { selected: i, dataItem: t, ...n, key: n.key }, /* @__PURE__ */ e.createElement("span", { className: "k-list-item-text" }, t.name)) : /* @__PURE__ */ e.createElement("li", { ...n, key: n.key }, /* @__PURE__ */ e.createElement("span", { className: "k-list-item-text" }, this.renderItem(t)));
|
|
80
82
|
}))))
|
|
81
83
|
),
|
|
82
|
-
this.props.toolbar && this.props.toolbarPosition === "bottom" && /* @__PURE__ */
|
|
83
|
-
/* @__PURE__ */
|
|
84
|
-
const
|
|
85
|
-
return /* @__PURE__ */
|
|
84
|
+
this.props.toolbar && this.props.toolbarPosition === "bottom" && /* @__PURE__ */ e.createElement(this.props.toolbar, null),
|
|
85
|
+
/* @__PURE__ */ e.createElement("select", { style: { display: "none" }, multiple: !0, "data-role": "listbox" }, this.props.data.map((t, a) => {
|
|
86
|
+
const i = t[this.props.valueField || this.props.textField];
|
|
87
|
+
return /* @__PURE__ */ e.createElement("option", { key: a, value: i }, i);
|
|
86
88
|
}))
|
|
87
89
|
);
|
|
88
90
|
}
|
|
89
91
|
};
|
|
90
|
-
|
|
92
|
+
p.propTypes = {
|
|
91
93
|
size: r.oneOf([null, "small", "medium", "large"]),
|
|
92
94
|
toolbarPosition: r.oneOf(["none", "top", "bottom", "left", "right"]),
|
|
93
95
|
textField: r.string,
|
|
94
96
|
valueField: r.string,
|
|
95
97
|
selectedField: r.string,
|
|
96
98
|
data: r.array
|
|
97
|
-
},
|
|
98
|
-
toolbarPosition:
|
|
99
|
+
}, p.defaultProps = {
|
|
100
|
+
toolbarPosition: d.RIGHT,
|
|
99
101
|
draggable: !0,
|
|
100
102
|
size: "medium"
|
|
101
103
|
};
|
|
102
|
-
let
|
|
104
|
+
let c = p;
|
|
103
105
|
export {
|
|
104
|
-
|
|
106
|
+
c as ListBox
|
|
105
107
|
};
|
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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),g=require("@progress/kendo-react-common"),v=require("@progress/kendo-react-buttons"),b=require("@progress/kendo-react-intl"),k=require("./messages/index.js"),
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),g=require("@progress/kendo-react-common"),v=require("@progress/kendo-react-buttons"),b=require("@progress/kendo-react-intl"),k=require("./messages/index.js"),l=require("prop-types"),a=require("@progress/kendo-svg-icons");function C(i){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const e in i)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(i,e);Object.defineProperty(t,e,r.get?r:{enumerable:!0,get:()=>i[e]})}}return t.default=i,Object.freeze(t)}const m=C(I),f=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:a.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:a.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:a.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:a.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:a.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:a.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:a.xIcon}],u=class u extends m.PureComponent{constructor(){super(...arguments),this.checkSvgIcon=t=>{switch(t.name){case"caret-alt-right":return a.caretAltLeftIcon;case"caret-alt-left":return a.caretAltRightIcon;case"caret-double-alt-right":return a.caretDoubleAltLeftIcon;case"caret-double-alt-left":return a.caretDoubleAltRightIcon}return t},this.checkFontIcon=t=>{switch(t){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 t},this.handleToolClick=(t,e)=>{g.dispatchEvent(this.props.onToolClick,t,this,{toolName:e})},this.isItemDisabled=t=>{let e=!0;const r=this.props.selectedField||"selected",d=this.props.data.length,n=this.props.dataConnected.length,o=this.props.data.findIndex(c=>c[r]===!0)>=0,s=this.props.dataConnected.findIndex(c=>c[r]===!0)>=0;switch(t){case"moveUp":o?e=this.props.data.length>0?this.props.data[0].selected:!0:s?e=this.props.dataConnected.length>0?this.props.dataConnected[0].selected:!0:e=!0;break;case"moveDown":o?e=this.props.data[d-1]?this.props.data[d-1].selected:!0:s?e=this.props.dataConnected.length>0?this.props.dataConnected[n-1].selected:!0:e=!0;break;case"transferTo":e=!(this.props.dataConnected&&o);break;case"transferFrom":this.props.dataConnected?e=!(this.props.dataConnected&&s):e=!0;break;case"transferAllTo":e=!(this.props.dataConnected&&this.props.data.length>0);break;case"transferAllFrom":e=!(this.props.dataConnected&&this.props.dataConnected.length>0);break;case"remove":e=!(o||s);break}return e}}get isRtl(){return this.props.dir==="rtl"}render(){const t=b.provideLocalizationService(this);return m.createElement("div",{className:g.classNames("k-listbox-actions")},this.props.tools&&this.props.tools.map((e,r)=>{const d=f.findIndex(p=>p.name===e),n=f[d],o=this.isItemDisabled(n.name),s=`listbox.${n.name}`,c=t.toLanguageString(s,k.messages[s]);return m.createElement(v.Button,{size:this.props.size,key:r,disabled:o,"data-command":n.name,title:c,"aria-label":c,icon:this.isRtl?this.checkFontIcon(n.iconName):n.iconName,svgIcon:this.isRtl?this.checkSvgIcon(n.svgIcon):n.svgIcon,onClick:p=>{p.preventDefault(),this.handleToolClick(p,n.name||null)}})}))}};u.propTypes={data:l.array,dataConnected:l.array,tools:l.array,selectedField:l.string,dir:l.string,size:l.oneOf([null,"small","medium","large"])},u.defaultProps={data:[],dataConnected:[],selectedField:"selected",size:"medium"};let h=u;b.registerForLocalization(h);exports.ListBoxToolbar=h;
|
package/ListBoxToolbar.mjs
CHANGED
|
@@ -51,19 +51,19 @@ const m = [
|
|
|
51
51
|
I(this.props.onToolClick, t, this, { toolName: e });
|
|
52
52
|
}, this.isItemDisabled = (t) => {
|
|
53
53
|
let e = !0;
|
|
54
|
-
const c = this.props.selectedField || "selected",
|
|
54
|
+
const c = this.props.selectedField || "selected", i = this.props.data.length, a = this.props.dataConnected.length, r = this.props.data.findIndex((o) => o[c] === !0) >= 0, s = this.props.dataConnected.findIndex((o) => o[c] === !0) >= 0;
|
|
55
55
|
switch (t) {
|
|
56
56
|
case "moveUp":
|
|
57
|
-
|
|
57
|
+
r ? e = this.props.data.length > 0 ? this.props.data[0].selected : !0 : s ? e = this.props.dataConnected.length > 0 ? this.props.dataConnected[0].selected : !0 : e = !0;
|
|
58
58
|
break;
|
|
59
59
|
case "moveDown":
|
|
60
|
-
|
|
60
|
+
r ? e = this.props.data[i - 1] ? this.props.data[i - 1].selected : !0 : s ? e = this.props.dataConnected.length > 0 ? this.props.dataConnected[a - 1].selected : !0 : e = !0;
|
|
61
61
|
break;
|
|
62
62
|
case "transferTo":
|
|
63
|
-
e = !(this.props.dataConnected &&
|
|
63
|
+
e = !(this.props.dataConnected && r);
|
|
64
64
|
break;
|
|
65
65
|
case "transferFrom":
|
|
66
|
-
this.props.dataConnected ? e = !(this.props.dataConnected &&
|
|
66
|
+
this.props.dataConnected ? e = !(this.props.dataConnected && s) : e = !0;
|
|
67
67
|
break;
|
|
68
68
|
case "transferAllTo":
|
|
69
69
|
e = !(this.props.dataConnected && this.props.data.length > 0);
|
|
@@ -72,7 +72,7 @@ const m = [
|
|
|
72
72
|
e = !(this.props.dataConnected && this.props.dataConnected.length > 0);
|
|
73
73
|
break;
|
|
74
74
|
case "remove":
|
|
75
|
-
e = !(
|
|
75
|
+
e = !(r || s);
|
|
76
76
|
break;
|
|
77
77
|
}
|
|
78
78
|
return e;
|
|
@@ -94,19 +94,20 @@ const m = [
|
|
|
94
94
|
)
|
|
95
95
|
},
|
|
96
96
|
this.props.tools && this.props.tools.map((e, c) => {
|
|
97
|
-
const
|
|
97
|
+
const i = m.findIndex((l) => l.name === e), a = m[i], r = this.isItemDisabled(a.name), s = `listbox.${a.name}`, o = t.toLanguageString(s, F[s]);
|
|
98
98
|
return /* @__PURE__ */ p.createElement(
|
|
99
99
|
C,
|
|
100
100
|
{
|
|
101
|
+
size: this.props.size,
|
|
101
102
|
key: c,
|
|
102
|
-
disabled:
|
|
103
|
+
disabled: r,
|
|
103
104
|
"data-command": a.name,
|
|
104
105
|
title: o,
|
|
105
106
|
"aria-label": o,
|
|
106
107
|
icon: this.isRtl ? this.checkFontIcon(a.iconName) : a.iconName,
|
|
107
108
|
svgIcon: this.isRtl ? this.checkSvgIcon(a.svgIcon) : a.svgIcon,
|
|
108
|
-
onClick: (
|
|
109
|
-
|
|
109
|
+
onClick: (l) => {
|
|
110
|
+
l.preventDefault(), this.handleToolClick(l, a.name || null);
|
|
110
111
|
}
|
|
111
112
|
}
|
|
112
113
|
);
|
|
@@ -119,11 +120,13 @@ d.propTypes = {
|
|
|
119
120
|
dataConnected: n.array,
|
|
120
121
|
tools: n.array,
|
|
121
122
|
selectedField: n.string,
|
|
122
|
-
dir: n.string
|
|
123
|
+
dir: n.string,
|
|
124
|
+
size: n.oneOf([null, "small", "medium", "large"])
|
|
123
125
|
}, d.defaultProps = {
|
|
124
126
|
data: [],
|
|
125
127
|
dataConnected: [],
|
|
126
|
-
selectedField: "selected"
|
|
128
|
+
selectedField: "selected",
|
|
129
|
+
size: "medium"
|
|
127
130
|
};
|
|
128
131
|
let h = d;
|
|
129
132
|
N(h);
|
|
@@ -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,s,o,a,r,n){"use strict";function i(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var o=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,o.get?o:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var l=i(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const p={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},d=class extends l.PureComponent{constructor(e){super(e),this.setSelected=e=>{if(this.props.selectedField)return!!e[this.props.selectedField]},this.renderItem=e=>this.props.textField?e[this.props.textField]:e.toString(),this.handleKeyDown=e=>{this.props.onKeyDown&&o.dispatchEvent(this.props.onKeyDown,e,this,void 0)},this.handleContainerDrop=e=>{e.target.classList.contains("k-list-content")&&(this.props.data.length>0?o.dispatchEvent(this.props.onDrop,e,this,{dataItem:this.props.data[this.props.data.length-1]}):o.dispatchEvent(this.props.onDrop,e,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===c.NONE||void 0===this.props.toolbar?"":`k-listbox-actions-${this.props.toolbarPosition}`,this.handleOnDragLeave=e=>{this.props.onDragLeave&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(this.props.onDragLeave,e,this,void 0)},o.validatePackage(p)}get itemGuid(){return this.props.id+"-accessibility-id"}render(){return l.createElement("div",{id:this.props.id,className:o.classNames(this.props.className,"k-listbox",this.setToolbarPosition()),style:this.props.style,unselectable:"on"},this.props.toolbar&&"bottom"!==this.props.toolbarPosition&&l.createElement(this.props.toolbar,null),l.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",onDragOver:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragLeave:this.handleOnDragLeave},l.createElement("div",{className:o.classNames("k-list",{[`k-list-${
|
|
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,s,o,a,r,n){"use strict";function i(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var o=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,o.get?o:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var l=i(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const p={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},d=class extends l.PureComponent{constructor(e){super(e),this.setSelected=e=>{if(this.props.selectedField)return!!e[this.props.selectedField]},this.renderItem=e=>this.props.textField?e[this.props.textField]:e.toString(),this.handleKeyDown=e=>{this.props.onKeyDown&&o.dispatchEvent(this.props.onKeyDown,e,this,void 0)},this.handleContainerDrop=e=>{e.target.classList.contains("k-list-content")&&(this.props.data.length>0?o.dispatchEvent(this.props.onDrop,e,this,{dataItem:this.props.data[this.props.data.length-1]}):o.dispatchEvent(this.props.onDrop,e,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===c.NONE||void 0===this.props.toolbar?"":`k-listbox-actions-${this.props.toolbarPosition}`,this.handleOnDragLeave=e=>{this.props.onDragLeave&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(this.props.onDragLeave,e,this,void 0)},o.validatePackage(p)}get itemGuid(){return this.props.id+"-accessibility-id"}render(){const e=o.kendoThemeMaps.sizeMap[this.props.size]||this.props.size;return l.createElement("div",{id:this.props.id,className:o.classNames(this.props.className,"k-listbox",{[`k-listbox-${e}`]:this.props.size},this.setToolbarPosition()),style:this.props.style,unselectable:"on"},this.props.toolbar&&"bottom"!==this.props.toolbarPosition&&l.createElement(this.props.toolbar,null),l.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",onDragOver:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragLeave:this.handleOnDragLeave},l.createElement("div",{className:o.classNames("k-list",{[`k-list-${e}`]:this.props.size})},l.createElement("div",{className:"k-list-content"},l.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",tabIndex:0,onKeyDown:this.handleKeyDown},this.props.data.map(((e,t)=>{const s=this.setSelected(e),a={className:o.classNames("k-list-item",{"k-selected":s}),role:"option","aria-selected":s,key:t,id:this.itemGuid+t,"data-uid":this.itemGuid+t,draggable:this.props.draggable,onDragStart:t=>o.dispatchEvent(this.props.onDragStart,t,this,{dataItem:e}),onDragOver:t=>{t.preventDefault(),o.dispatchEvent(this.props.onDragOver,t,this,{dataItem:e})},onDrop:t=>o.dispatchEvent(this.props.onDrop,t,this,{dataItem:e}),onClick:t=>o.dispatchEvent(this.props.onItemClick,t,this,{dataItem:e})};return this.props.item?l.createElement(this.props.item,{selected:s,dataItem:e,...a,key:a.key},l.createElement("span",{className:"k-list-item-text"},e.name)):l.createElement("li",{...a,key:a.key},l.createElement("span",{className:"k-list-item-text"},this.renderItem(e)))})))))),this.props.toolbar&&"bottom"===this.props.toolbarPosition&&l.createElement(this.props.toolbar,null),l.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},this.props.data.map(((e,t)=>{const s=e[this.props.valueField||this.props.textField];return l.createElement("option",{key:t,value:s},s)}))))}};d.propTypes={size:s.oneOf([null,"small","medium","large"]),toolbarPosition:s.oneOf(["none","top","bottom","left","right"]),textField:s.string,valueField:s.string,selectedField:s.string,data:s.array},d.defaultProps={toolbarPosition:c.RIGHT,draggable:!0,size:"medium"};let h=d;const m={"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"},u=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:n.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:n.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:n.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:n.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:n.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:n.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:n.xIcon}],g=class extends l.PureComponent{constructor(){super(...arguments),this.checkSvgIcon=e=>{switch(e.name){case"caret-alt-right":return n.caretAltLeftIcon;case"caret-alt-left":return n.caretAltRightIcon;case"caret-double-alt-right":return n.caretDoubleAltLeftIcon;case"caret-double-alt-left":return n.caretDoubleAltRightIcon}return e},this.checkFontIcon=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},this.handleToolClick=(e,t)=>{o.dispatchEvent(this.props.onToolClick,e,this,{toolName:t})},this.isItemDisabled=e=>{let t=!0;const s=this.props.selectedField||"selected",o=this.props.data.length,a=this.props.dataConnected.length,r=this.props.data.findIndex((e=>!0===e[s]))>=0,n=this.props.dataConnected.findIndex((e=>!0===e[s]))>=0;switch(e){case"moveUp":t=r?!(this.props.data.length>0)||this.props.data[0].selected:!n||(!(this.props.dataConnected.length>0)||this.props.dataConnected[0].selected);break;case"moveDown":t=r?!this.props.data[o-1]||this.props.data[o-1].selected:!n||(!(this.props.dataConnected.length>0)||this.props.dataConnected[a-1].selected);break;case"transferTo":t=!(this.props.dataConnected&&r);break;case"transferFrom":t=!this.props.dataConnected||!(this.props.dataConnected&&n);break;case"transferAllTo":t=!(this.props.dataConnected&&this.props.data.length>0);break;case"transferAllFrom":t=!(this.props.dataConnected&&this.props.dataConnected.length>0);break;case"remove":t=!(r||n)}return t}}get isRtl(){return"rtl"===this.props.dir}render(){const e=r.provideLocalizationService(this);return l.createElement("div",{className:o.classNames("k-listbox-actions")},this.props.tools&&this.props.tools.map(((t,s)=>{const o=u.findIndex((e=>e.name===t)),r=u[o],n=this.isItemDisabled(r.name),i=`listbox.${r.name}`,c=e.toLanguageString(i,m[i]);return l.createElement(a.Button,{size:this.props.size,key:s,disabled:n,"data-command":r.name,title:c,"aria-label":c,icon:this.isRtl?this.checkFontIcon(r.iconName):r.iconName,svgIcon:this.isRtl?this.checkSvgIcon(r.svgIcon):r.svgIcon,onClick:e=>{e.preventDefault(),this.handleToolClick(e,r.name||null)}})})))}};g.propTypes={data:s.array,dataConnected:s.array,tools:s.array,selectedField:s.string,dir:s.string,size:s.oneOf([null,"small","medium","large"])},g.defaultProps={data:[],dataConnected:[],selectedField:"selected",size:"medium"};let b=g;r.registerForLocalization(b);const f=(e,t,s)=>{const o=s.splice(e,1)[0];return s.splice(t,0,o),s},v=o.withIdHOC(h);v.displayName="KendoReactListBox",e.ListBox=v,e.ListBoxToolbar=b,e.moveItem=f,e.processListBoxData=(e=[],t=[],s,o)=>{let a=[],r=[],n=[];const i={listBoxOneData:e,listBoxTwoData:t};switch(s){case"moveUp":a=[...e],a.forEach(((e,t)=>{e[o]&&(a=f(t,t-1,a))})),n=[...t],n.forEach(((e,t)=>{e[o]&&(n=f(t,t-1,n))})),i.listBoxOneData=a,i.listBoxTwoData=n;break;case"moveDown":a=e.reverse(),a.forEach(((e,t)=>{e[o]&&(a=f(t,t-1,a))})),n=t.reverse(),n.forEach(((e,t)=>{e[o]&&(n=f(t,t-1,n))})),i.listBoxOneData=[...a].reverse(),i.listBoxTwoData=[...n].reverse();break;case"transferTo":a=e.filter((e=>!e[o])),r=e.filter((e=>e[o])),n=t.concat(r),i.listBoxOneData=a,i.listBoxTwoData=n;break;case"transferFrom":n=t.filter((e=>!e[o])),r=t.filter((e=>e[o])),a=e.concat(r),i.listBoxOneData=a,i.listBoxTwoData=n;break;case"transferAllTo":i.listBoxOneData=[],i.listBoxTwoData=t.concat(e);break;case"transferAllFrom":i.listBoxOneData=t.concat(e),i.listBoxTwoData=[];break;case"remove":n=t.filter((e=>!e[o])),a=e.filter((e=>!e[o])),i.listBoxOneData=a,i.listBoxTwoData=n}return i},e.processListBoxDragAndDrop=(e=[],t=[],s,o,a)=>{const r=e.findIndex((e=>e[a]===s[a])),n=t.findIndex((e=>e[a]===s[a])),i=null!==o?e.findIndex((e=>e[a]===o[a])):-1,l=null!==o?t.findIndex((e=>e[a]===o[a])):-1,c=r>=0,p=n>=0,d=i>=0,h=l>=0,m=[...e],u=[...t];return c&&d?{listBoxOneData:f(r,i,e),listBoxTwoData:t}:p&&h?{listBoxOneData:e,listBoxTwoData:f(n,l,t)}:c&&(h||null===o)?(null===o?u.push(e[r]):u.splice(l+1,0,e[r]),m.splice(r,1),{listBoxOneData:m,listBoxTwoData:u}):p&&(d||null===o)?(null===o?m.push(t[n]):m.splice(i+1,0,t[n]),u.splice(n,1),{listBoxOneData:m,listBoxTwoData:u}):{listBoxOneData:e,listBoxTwoData:t}}}));
|
package/index.d.mts
CHANGED
|
@@ -166,6 +166,7 @@ export declare class ListBoxToolbar extends React_2.PureComponent<ListBoxToolbar
|
|
|
166
166
|
tools: PropTypes.Requireable<any[]>;
|
|
167
167
|
selectedField: PropTypes.Requireable<string>;
|
|
168
168
|
dir: PropTypes.Requireable<string>;
|
|
169
|
+
size: PropTypes.Requireable<string | null>;
|
|
169
170
|
};
|
|
170
171
|
/**
|
|
171
172
|
* @hidden
|
|
@@ -174,6 +175,7 @@ export declare class ListBoxToolbar extends React_2.PureComponent<ListBoxToolbar
|
|
|
174
175
|
data: never[];
|
|
175
176
|
dataConnected: never[];
|
|
176
177
|
selectedField: string;
|
|
178
|
+
size: string;
|
|
177
179
|
};
|
|
178
180
|
private get isRtl();
|
|
179
181
|
/**
|
|
@@ -203,6 +205,18 @@ export declare interface ListBoxToolbarProps {
|
|
|
203
205
|
* * `remove`
|
|
204
206
|
*/
|
|
205
207
|
tools?: Array<string>;
|
|
208
|
+
/**
|
|
209
|
+
* Configures the `size` of the buttons inside the ListBoxToolbar.
|
|
210
|
+
*
|
|
211
|
+
* The available options are:
|
|
212
|
+
* - small
|
|
213
|
+
* - medium
|
|
214
|
+
* - large
|
|
215
|
+
* - null—Does not set a size `className`.
|
|
216
|
+
*
|
|
217
|
+
* @default `medium`
|
|
218
|
+
*/
|
|
219
|
+
size?: null | 'small' | 'medium' | 'large';
|
|
206
220
|
/**
|
|
207
221
|
* The data of the main ListBox.
|
|
208
222
|
*/
|
package/index.d.ts
CHANGED
|
@@ -166,6 +166,7 @@ export declare class ListBoxToolbar extends React_2.PureComponent<ListBoxToolbar
|
|
|
166
166
|
tools: PropTypes.Requireable<any[]>;
|
|
167
167
|
selectedField: PropTypes.Requireable<string>;
|
|
168
168
|
dir: PropTypes.Requireable<string>;
|
|
169
|
+
size: PropTypes.Requireable<string | null>;
|
|
169
170
|
};
|
|
170
171
|
/**
|
|
171
172
|
* @hidden
|
|
@@ -174,6 +175,7 @@ export declare class ListBoxToolbar extends React_2.PureComponent<ListBoxToolbar
|
|
|
174
175
|
data: never[];
|
|
175
176
|
dataConnected: never[];
|
|
176
177
|
selectedField: string;
|
|
178
|
+
size: string;
|
|
177
179
|
};
|
|
178
180
|
private get isRtl();
|
|
179
181
|
/**
|
|
@@ -203,6 +205,18 @@ export declare interface ListBoxToolbarProps {
|
|
|
203
205
|
* * `remove`
|
|
204
206
|
*/
|
|
205
207
|
tools?: Array<string>;
|
|
208
|
+
/**
|
|
209
|
+
* Configures the `size` of the buttons inside the ListBoxToolbar.
|
|
210
|
+
*
|
|
211
|
+
* The available options are:
|
|
212
|
+
* - small
|
|
213
|
+
* - medium
|
|
214
|
+
* - large
|
|
215
|
+
* - null—Does not set a size `className`.
|
|
216
|
+
*
|
|
217
|
+
* @default `medium`
|
|
218
|
+
*/
|
|
219
|
+
size?: null | 'small' | 'medium' | 'large';
|
|
206
220
|
/**
|
|
207
221
|
* The data of the main ListBox.
|
|
208
222
|
*/
|
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: 1712851179,
|
|
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": "7.
|
|
3
|
+
"version": "7.5.0-develop.1",
|
|
4
4
|
"description": "React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
|
-
"@progress/kendo-react-buttons": "7.
|
|
27
|
-
"@progress/kendo-react-common": "7.
|
|
28
|
-
"@progress/kendo-react-intl": "7.
|
|
26
|
+
"@progress/kendo-react-buttons": "7.5.0-develop.1",
|
|
27
|
+
"@progress/kendo-react-common": "7.5.0-develop.1",
|
|
28
|
+
"@progress/kendo-react-intl": "7.5.0-develop.1",
|
|
29
29
|
"@progress/kendo-svg-icons": "^2.1.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"
|