@progress/kendo-react-listbox 7.0.0-develop.10 → 7.0.0-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.d.ts +1 -0
- package/dist/cdn/js/kendo-react-listbox.js +1 -1
- package/index.d.ts +2 -1
- package/index.js +1 -1
- package/index.mjs +77 -71
- package/interfaces/ListBoxProps.d.ts +6 -2
- package/package.json +5 -4
package/ListBox.d.ts
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
(function(
|
|
5
|
+
(function(d,b){typeof exports=="object"&&typeof module<"u"?b(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")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-buttons","@progress/kendo-react-intl","@progress/kendo-svg-icons"],b):(d=typeof globalThis<"u"?globalThis:d||self,b(d.KendoReactListbox={},d.React,d.PropTypes,d.KendoReactCommon,d.KendoReactButtons,d.KendoReactIntl,d.KendoSvgIcons))})(this,function(d,b,F,h,O,L,u){"use strict";"use client";function y(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const p=y(b),f=y(F);var T=(a=>(a.TOP="top",a.BOTTOM="bottom",a.LEFT="left",a.RIGHT="right",a.NONE="none",a))(T||{});const C={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};let E=class extends p.PureComponent{constructor(e){super(e),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&&h.dispatchEvent(this.props.onKeyDown,t,this,void 0)},this.handleContainerDrop=t=>{t.target.classList.contains("k-list-content")&&(this.props.data.length>0?h.dispatchEvent(this.props.onDrop,t,this,{dataItem:this.props.data[this.props.data.length-1]}):h.dispatchEvent(this.props.onDrop,t,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===T.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")&&h.dispatchEvent(this.props.onDragLeave,t,this,void 0)},h.validatePackage(C)}get itemGuid(){return this.props.id+"-accessibility-id"}render(){return p.createElement("div",{id:this.props.id,className:h.classNames(this.props.className,"k-listbox",this.setToolbarPosition()),style:this.props.style,unselectable:"on"},this.props.toolbar&&this.props.toolbarPosition!=="bottom"&&p.createElement(this.props.toolbar,null),p.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",onDragOver:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragLeave:this.handleOnDragLeave},p.createElement("div",{className:h.classNames("k-list",{[`k-list-${h.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},p.createElement("div",{className:"k-list-content"},p.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),r={className:h.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:o=>h.dispatchEvent(this.props.onDragStart,o,this,{dataItem:e}),onDragOver:o=>{o.preventDefault(),h.dispatchEvent(this.props.onDragOver,o,this,{dataItem:e})},onDrop:o=>h.dispatchEvent(this.props.onDrop,o,this,{dataItem:e}),onClick:o=>h.dispatchEvent(this.props.onItemClick,o,this,{dataItem:e})};return this.props.item?p.createElement(this.props.item,{selected:s,dataItem:e,...r,key:r.key},p.createElement("span",{className:"k-list-item-text"},e.name)):p.createElement("li",{...r,key:r.key},p.createElement("span",{className:"k-list-item-text"},this.renderItem(e)))}))))),this.props.toolbar&&this.props.toolbarPosition==="bottom"&&p.createElement(this.props.toolbar,null),p.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 p.createElement("option",{key:t,value:s},s)})))}};E.propTypes={size:f.oneOf([null,"small","medium","large"]),toolbarPosition:f.oneOf(["none","top","bottom","left","right"]),textField:f.string,valueField:f.string,selectedField:f.string,data:f.array},E.defaultProps={toolbarPosition:T.RIGHT,draggable:!0,size:"medium"};const P="listbox.moveUp",K="listbox.moveDown",S="listbox.transferTo",z="listbox.transferFrom",U="listbox.transferAllTo",M="listbox.transferAllFrom",j="listbox.remove",q={[P]:"Move Up",[K]:"Move Down",[S]:"Transfer To",[z]:"Transfer From",[U]:"Transfer All To",[M]:"Transfer All From",[j]:"Delete"},k=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:u.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:u.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:u.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:u.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:u.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:u.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:u.xIcon}];class D extends p.PureComponent{constructor(){super(...arguments),this.checkSvgIcon=e=>{switch(e.name){case"caret-alt-right":return u.caretAltLeftIcon;case"caret-alt-left":return u.caretAltRightIcon;case"caret-double-alt-right":return u.caretDoubleAltLeftIcon;case"caret-double-alt-left":return u.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)=>{h.dispatchEvent(this.props.onToolClick,e,this,{toolName:t})},this.isItemDisabled=e=>{let t=!0;const s=this.props.selectedField||"selected",r=this.props.data.length,o=this.props.dataConnected.length,i=this.props.data.findIndex(n=>n[s]===!0)>=0,c=this.props.dataConnected.findIndex(n=>n[s]===!0)>=0;switch(e){case"moveUp":i?t=this.props.data.length>0?this.props.data[0].selected:!0:c?t=this.props.dataConnected.length>0?this.props.dataConnected[0].selected:!0:t=!0;break;case"moveDown":i?t=this.props.data[r-1]?this.props.data[r-1].selected:!0:c?t=this.props.dataConnected.length>0?this.props.dataConnected[o-1].selected:!0:t=!0;break;case"transferTo":t=!(this.props.dataConnected&&i);break;case"transferFrom":this.props.dataConnected?t=!(this.props.dataConnected&&c):t=!0;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=!(i||c);break}return t}}get isRtl(){return this.props.dir==="rtl"}render(){const e=L.provideLocalizationService(this);return p.createElement("div",{className:h.classNames("k-listbox-actions")},this.props.tools&&this.props.tools.map((t,s)=>{const r=k.findIndex(l=>l.name===t),o=k[r],i=this.isItemDisabled(o.name),c=`listbox.${o.name}`,n=e.toLanguageString(c,q[c]);return p.createElement(O.Button,{key:s,disabled:i,"data-command":o.name,title:n,"aria-label":n,icon:this.isRtl?this.checkFontIcon(o.iconName):o.iconName,svgIcon:this.isRtl?this.checkSvgIcon(o.svgIcon):o.svgIcon,onClick:l=>{l.preventDefault(),this.handleToolClick(l,o.name||null)}})}))}}D.propTypes={data:f.array,dataConnected:f.array,tools:f.array,selectedField:f.string,dir:f.string},D.defaultProps={data:[],dataConnected:[],selectedField:"selected"},L.registerForLocalization(D);const G=(a=[],e=[],t,s)=>{let r=[],o=[],i=[];const c={listBoxOneData:a,listBoxTwoData:e};switch(t){case"moveUp":r=[...a],r.forEach((n,l)=>{n[s]&&(r=m(l,l-1,r))}),i=[...e],i.forEach((n,l)=>{n[s]&&(i=m(l,l-1,i))}),c.listBoxOneData=r,c.listBoxTwoData=i;break;case"moveDown":r=a.reverse(),r.forEach((n,l)=>{n[s]&&(r=m(l,l-1,r))}),i=e.reverse(),i.forEach((n,l)=>{n[s]&&(i=m(l,l-1,i))}),c.listBoxOneData=[...r].reverse(),c.listBoxTwoData=[...i].reverse();break;case"transferTo":r=a.filter(n=>!n[s]),o=a.filter(n=>n[s]),i=e.concat(o),c.listBoxOneData=r,c.listBoxTwoData=i;break;case"transferFrom":i=e.filter(n=>!n[s]),o=e.filter(n=>n[s]),r=a.concat(o),c.listBoxOneData=r,c.listBoxTwoData=i;break;case"transferAllTo":c.listBoxOneData=[],c.listBoxTwoData=e.concat(a);break;case"transferAllFrom":c.listBoxOneData=e.concat(a),c.listBoxTwoData=[];break;case"remove":i=e.filter(n=>!n[s]),r=a.filter(n=>!n[s]),c.listBoxOneData=r,c.listBoxTwoData=i;break}return c},m=(a,e,t)=>{const s=t.splice(a,1)[0];return t.splice(e,0,s),t},_=(a=[],e=[],t,s,r)=>{const o=a.findIndex(g=>g[r]===t[r]),i=e.findIndex(g=>g[r]===t[r]),c=s!==null?a.findIndex(g=>g[r]===s[r]):-1,n=s!==null?e.findIndex(g=>g[r]===s[r]):-1,l=o>=0,x=i>=0,A=c>=0,w=n>=0,v=[...a],I=[...e];return l&&A?{listBoxOneData:m(o,c,a),listBoxTwoData:e}:x&&w?{listBoxOneData:a,listBoxTwoData:m(i,n,e)}:l&&(w||s===null)?(s===null?I.push(a[o]):I.splice(n+1,0,a[o]),v.splice(o,1),{listBoxOneData:v,listBoxTwoData:I}):x&&(A||s===null)?(s===null?v.push(e[i]):v.splice(c+1,0,e[i]),I.splice(i,1),{listBoxOneData:v,listBoxTwoData:I}):{listBoxOneData:a,listBoxTwoData:e}},N=h.withIdHOC(E);N.displayName="KendoReactListBox",d.ListBox=N,d.ListBoxToolbar=D,d.moveItem=m,d.processListBoxData=G,d.processListBoxDragAndDrop=_,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/index.d.ts
CHANGED
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { ListBox } from './ListBox';
|
|
6
5
|
import { type ListBoxProps } from './interfaces/ListBoxProps';
|
|
7
6
|
import { ListBoxToolbar } from './ListBoxToolbar';
|
|
8
7
|
import { type ListBoxToolbarProps } from './interfaces/ListBoxToolBarProps';
|
|
9
8
|
import { processListBoxData, moveItem, processListBoxDragAndDrop } from './utils';
|
|
10
9
|
import { type ListBoxDragEvent, type ListBoxItemClickEvent, type ListBoxKeyDownEvent, type ListBoxToolbarClickEvent } from './interfaces/ListBoxEvents';
|
|
10
|
+
/** @hidden */
|
|
11
|
+
declare const ListBox: import("react").ForwardRefExoticComponent<ListBoxProps & import("react").RefAttributes<any>>;
|
|
11
12
|
export { ListBox, ListBoxProps, ListBoxToolbar, ListBoxToolbarProps, processListBoxData, moveItem, processListBoxDragAndDrop, ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent };
|
package/index.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
5
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react"),A=require("prop-types"),d=require("@progress/kendo-react-common"),S=require("@progress/kendo-react-buttons"),x=require("@progress/kendo-react-intl"),h=require("@progress/kendo-svg-icons");function y(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const p=y(C),m=y(A);var I=(o=>(o.TOP="top",o.BOTTOM="bottom",o.LEFT="left",o.RIGHT="right",o.NONE="none",o))(I||{});const w={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};let k=class extends p.PureComponent{constructor(e){super(e),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&&d.dispatchEvent(this.props.onKeyDown,t,this,void 0)},this.handleContainerDrop=t=>{t.target.classList.contains("k-list-content")&&(this.props.data.length>0?d.dispatchEvent(this.props.onDrop,t,this,{dataItem:this.props.data[this.props.data.length-1]}):d.dispatchEvent(this.props.onDrop,t,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===I.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")&&d.dispatchEvent(this.props.onDragLeave,t,this,void 0)},d.validatePackage(w)}get itemGuid(){return this.props.id+"-accessibility-id"}render(){return p.createElement("div",{id:this.props.id,className:d.classNames(this.props.className,"k-listbox",this.setToolbarPosition()),style:this.props.style,unselectable:"on"},this.props.toolbar&&this.props.toolbarPosition!=="bottom"&&p.createElement(this.props.toolbar,null),p.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",onDragOver:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragLeave:this.handleOnDragLeave},p.createElement("div",{className:d.classNames("k-list",{[`k-list-${d.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},p.createElement("div",{className:"k-list-content"},p.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),r={className:d.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:a=>d.dispatchEvent(this.props.onDragStart,a,this,{dataItem:e}),onDragOver:a=>{a.preventDefault(),d.dispatchEvent(this.props.onDragOver,a,this,{dataItem:e})},onDrop:a=>d.dispatchEvent(this.props.onDrop,a,this,{dataItem:e}),onClick:a=>d.dispatchEvent(this.props.onItemClick,a,this,{dataItem:e})};return this.props.item?p.createElement(this.props.item,{selected:s,dataItem:e,...r,key:r.key},p.createElement("span",{className:"k-list-item-text"},e.name)):p.createElement("li",{...r,key:r.key},p.createElement("span",{className:"k-list-item-text"},this.renderItem(e)))}))))),this.props.toolbar&&this.props.toolbarPosition==="bottom"&&p.createElement(this.props.toolbar,null),p.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 p.createElement("option",{key:t,value:s},s)})))}};k.propTypes={size:m.oneOf([null,"small","medium","large"]),toolbarPosition:m.oneOf(["none","top","bottom","left","right"]),textField:m.string,valueField:m.string,selectedField:m.string,data:m.array};k.defaultProps={toolbarPosition:I.RIGHT,draggable:!0,size:"medium"};const F="listbox.moveUp",O="listbox.moveDown",R="listbox.transferTo",P="listbox.transferFrom",z="listbox.transferAllTo",K="listbox.transferAllFrom",U="listbox.remove",M={[F]:"Move Up",[O]:"Move Down",[R]:"Transfer To",[P]:"Transfer From",[z]:"Transfer All To",[K]:"Transfer All From",[U]:"Delete"},L=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:h.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:h.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:h.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:h.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:h.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:h.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:h.xIcon}];class v extends p.PureComponent{constructor(){super(...arguments),this.checkSvgIcon=e=>{switch(e.name){case"caret-alt-right":return h.caretAltLeftIcon;case"caret-alt-left":return h.caretAltRightIcon;case"caret-double-alt-right":return h.caretDoubleAltLeftIcon;case"caret-double-alt-left":return h.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)=>{d.dispatchEvent(this.props.onToolClick,e,this,{toolName:t})},this.isItemDisabled=e=>{let t=!0;const s=this.props.selectedField||"selected",r=this.props.data.length,a=this.props.dataConnected.length,i=this.props.data.findIndex(n=>n[s]===!0)>=0,c=this.props.dataConnected.findIndex(n=>n[s]===!0)>=0;switch(e){case"moveUp":i?t=this.props.data.length>0?this.props.data[0].selected:!0:c?t=this.props.dataConnected.length>0?this.props.dataConnected[0].selected:!0:t=!0;break;case"moveDown":i?t=this.props.data[r-1]?this.props.data[r-1].selected:!0:c?t=this.props.dataConnected.length>0?this.props.dataConnected[a-1].selected:!0:t=!0;break;case"transferTo":t=!(this.props.dataConnected&&i);break;case"transferFrom":this.props.dataConnected?t=!(this.props.dataConnected&&c):t=!0;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=!(i||c);break}return t}}get isRtl(){return this.props.dir==="rtl"}render(){const e=x.provideLocalizationService(this);return p.createElement("div",{className:d.classNames("k-listbox-actions")},this.props.tools&&this.props.tools.map((t,s)=>{const r=L.findIndex(l=>l.name===t),a=L[r],i=this.isItemDisabled(a.name),c=`listbox.${a.name}`,n=e.toLanguageString(c,M[c]);return p.createElement(S.Button,{key:s,disabled:i,"data-command":a.name,title:n,"aria-label":n,icon:this.isRtl?this.checkFontIcon(a.iconName):a.iconName,svgIcon:this.isRtl?this.checkSvgIcon(a.svgIcon):a.svgIcon,onClick:l=>{l.preventDefault(),this.handleToolClick(l,a.name||null)}})}))}}v.propTypes={data:m.array,dataConnected:m.array,tools:m.array,selectedField:m.string,dir:m.string};v.defaultProps={data:[],dataConnected:[],selectedField:"selected"};x.registerForLocalization(v);const q=(o=[],e=[],t,s)=>{let r=[],a=[],i=[];const c={listBoxOneData:o,listBoxTwoData:e};switch(t){case"moveUp":r=[...o],r.forEach((n,l)=>{n[s]&&(r=f(l,l-1,r))}),i=[...e],i.forEach((n,l)=>{n[s]&&(i=f(l,l-1,i))}),c.listBoxOneData=r,c.listBoxTwoData=i;break;case"moveDown":r=o.reverse(),r.forEach((n,l)=>{n[s]&&(r=f(l,l-1,r))}),i=e.reverse(),i.forEach((n,l)=>{n[s]&&(i=f(l,l-1,i))}),c.listBoxOneData=[...r].reverse(),c.listBoxTwoData=[...i].reverse();break;case"transferTo":r=o.filter(n=>!n[s]),a=o.filter(n=>n[s]),i=e.concat(a),c.listBoxOneData=r,c.listBoxTwoData=i;break;case"transferFrom":i=e.filter(n=>!n[s]),a=e.filter(n=>n[s]),r=o.concat(a),c.listBoxOneData=r,c.listBoxTwoData=i;break;case"transferAllTo":c.listBoxOneData=[],c.listBoxTwoData=e.concat(o);break;case"transferAllFrom":c.listBoxOneData=e.concat(o),c.listBoxTwoData=[];break;case"remove":i=e.filter(n=>!n[s]),r=o.filter(n=>!n[s]),c.listBoxOneData=r,c.listBoxTwoData=i;break}return c},f=(o,e,t)=>{const s=t.splice(o,1)[0];return t.splice(e,0,s),t},j=(o=[],e=[],t,s,r)=>{const a=o.findIndex(u=>u[r]===t[r]),i=e.findIndex(u=>u[r]===t[r]),c=s!==null?o.findIndex(u=>u[r]===s[r]):-1,n=s!==null?e.findIndex(u=>u[r]===s[r]):-1,l=a>=0,D=i>=0,T=c>=0,E=n>=0,g=[...o],b=[...e];return l&&T?{listBoxOneData:f(a,c,o),listBoxTwoData:e}:D&&E?{listBoxOneData:o,listBoxTwoData:f(i,n,e)}:l&&(E||s===null)?(s===null?b.push(o[a]):b.splice(n+1,0,o[a]),g.splice(a,1),{listBoxOneData:g,listBoxTwoData:b}):D&&(T||s===null)?(s===null?g.push(e[i]):g.splice(c+1,0,e[i]),b.splice(i,1),{listBoxOneData:g,listBoxTwoData:b}):{listBoxOneData:o,listBoxTwoData:e}},N=d.withIdHOC(k);N.displayName="KendoReactListBox";exports.ListBox=N;exports.ListBoxToolbar=v;exports.moveItem=f;exports.processListBoxData=q;exports.processListBoxDragAndDrop=j;
|
package/index.mjs
CHANGED
|
@@ -2,22 +2,23 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
"use client";
|
|
5
6
|
import * as p from "react";
|
|
6
7
|
import * as d from "prop-types";
|
|
7
|
-
import { dispatchEvent as h, validatePackage as A, classNames as b, kendoThemeMaps as
|
|
8
|
-
import { Button as
|
|
8
|
+
import { dispatchEvent as h, validatePackage as A, classNames as b, kendoThemeMaps as w, withIdHOC as F } from "@progress/kendo-react-common";
|
|
9
|
+
import { Button as S } from "@progress/kendo-react-buttons";
|
|
9
10
|
import { provideLocalizationService as O, registerForLocalization as P } from "@progress/kendo-react-intl";
|
|
10
|
-
import { caretDoubleAltRightIcon as
|
|
11
|
+
import { caretDoubleAltRightIcon as x, caretDoubleAltLeftIcon as E, caretAltRightIcon as N, caretAltLeftIcon as y, caretAltUpIcon as R, caretAltDownIcon as K, xIcon as U } from "@progress/kendo-svg-icons";
|
|
11
12
|
var I = /* @__PURE__ */ ((n) => (n.TOP = "top", n.BOTTOM = "bottom", n.LEFT = "left", n.RIGHT = "right", n.NONE = "none", n))(I || {});
|
|
12
|
-
const
|
|
13
|
+
const z = {
|
|
13
14
|
name: "@progress/kendo-react-listbox",
|
|
14
15
|
productName: "KendoReact",
|
|
15
16
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
16
|
-
publishDate:
|
|
17
|
+
publishDate: 1701866540,
|
|
17
18
|
version: "",
|
|
18
19
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
19
20
|
};
|
|
20
|
-
class
|
|
21
|
+
let k = class extends p.PureComponent {
|
|
21
22
|
constructor(t) {
|
|
22
23
|
super(t), this.setSelected = (e) => {
|
|
23
24
|
if (this.props.selectedField)
|
|
@@ -28,7 +29,10 @@ class y extends p.PureComponent {
|
|
|
28
29
|
e.target.classList.contains("k-list-content") && (this.props.data.length > 0 ? h(this.props.onDrop, e, this, { dataItem: this.props.data[this.props.data.length - 1] }) : h(this.props.onDrop, e, this, { dataItem: null }));
|
|
29
30
|
}, this.setToolbarPosition = () => this.props.toolbarPosition === I.NONE || this.props.toolbar === void 0 ? "" : `k-listbox-actions-${this.props.toolbarPosition}`, this.handleOnDragLeave = (e) => {
|
|
30
31
|
this.props.onDragLeave && e.target.classList.contains("k-list-content") && h(this.props.onDragLeave, e, this, void 0);
|
|
31
|
-
}, A(
|
|
32
|
+
}, A(z);
|
|
33
|
+
}
|
|
34
|
+
get itemGuid() {
|
|
35
|
+
return this.props.id + "-accessibility-id";
|
|
32
36
|
}
|
|
33
37
|
/**
|
|
34
38
|
* @hidden
|
|
@@ -37,6 +41,7 @@ class y extends p.PureComponent {
|
|
|
37
41
|
return /* @__PURE__ */ p.createElement(
|
|
38
42
|
"div",
|
|
39
43
|
{
|
|
44
|
+
id: this.props.id,
|
|
40
45
|
className: b(
|
|
41
46
|
this.props.className,
|
|
42
47
|
"k-listbox",
|
|
@@ -56,9 +61,9 @@ class y extends p.PureComponent {
|
|
|
56
61
|
onDragLeave: this.handleOnDragLeave
|
|
57
62
|
},
|
|
58
63
|
/* @__PURE__ */ p.createElement("div", { className: b("k-list", {
|
|
59
|
-
[`k-list-${
|
|
64
|
+
[`k-list-${w.sizeMap[this.props.size] || this.props.size}`]: this.props.size
|
|
60
65
|
}) }, /* @__PURE__ */ p.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ p.createElement("ul", { className: "k-list-ul", role: "listbox", "aria-label": "listbox-container", tabIndex: 0, onKeyDown: this.handleKeyDown }, this.props.data.map((t, e) => {
|
|
61
|
-
const r = this.setSelected(t),
|
|
66
|
+
const r = this.setSelected(t), s = {
|
|
62
67
|
className: b(
|
|
63
68
|
"k-list-item",
|
|
64
69
|
{
|
|
@@ -68,17 +73,17 @@ class y extends p.PureComponent {
|
|
|
68
73
|
role: "option",
|
|
69
74
|
"aria-selected": r,
|
|
70
75
|
key: e,
|
|
71
|
-
id:
|
|
72
|
-
"data-uid":
|
|
76
|
+
id: this.itemGuid + e,
|
|
77
|
+
"data-uid": this.itemGuid + e,
|
|
73
78
|
draggable: this.props.draggable,
|
|
74
|
-
onDragStart: (
|
|
75
|
-
onDragOver: (
|
|
76
|
-
|
|
79
|
+
onDragStart: (o) => h(this.props.onDragStart, o, this, { dataItem: t }),
|
|
80
|
+
onDragOver: (o) => {
|
|
81
|
+
o.preventDefault(), h(this.props.onDragOver, o, this, { dataItem: t });
|
|
77
82
|
},
|
|
78
|
-
onDrop: (
|
|
79
|
-
onClick: (
|
|
83
|
+
onDrop: (o) => h(this.props.onDrop, o, this, { dataItem: t }),
|
|
84
|
+
onClick: (o) => h(this.props.onItemClick, o, this, { dataItem: t })
|
|
80
85
|
};
|
|
81
|
-
return this.props.item ? /* @__PURE__ */ p.createElement(this.props.item, { selected: r, dataItem: t, ...
|
|
86
|
+
return this.props.item ? /* @__PURE__ */ p.createElement(this.props.item, { selected: r, dataItem: t, ...s, key: s.key }, /* @__PURE__ */ p.createElement("span", { className: "k-list-item-text" }, t.name)) : /* @__PURE__ */ p.createElement("li", { ...s, key: s.key }, /* @__PURE__ */ p.createElement("span", { className: "k-list-item-text" }, this.renderItem(t)));
|
|
82
87
|
}))))
|
|
83
88
|
),
|
|
84
89
|
this.props.toolbar && this.props.toolbarPosition === "bottom" && /* @__PURE__ */ p.createElement(this.props.toolbar, null),
|
|
@@ -88,8 +93,8 @@ class y extends p.PureComponent {
|
|
|
88
93
|
}))
|
|
89
94
|
);
|
|
90
95
|
}
|
|
91
|
-
}
|
|
92
|
-
|
|
96
|
+
};
|
|
97
|
+
k.propTypes = {
|
|
93
98
|
size: d.oneOf([null, "small", "medium", "large"]),
|
|
94
99
|
toolbarPosition: d.oneOf(["none", "top", "bottom", "left", "right"]),
|
|
95
100
|
textField: d.string,
|
|
@@ -97,7 +102,7 @@ y.propTypes = {
|
|
|
97
102
|
selectedField: d.string,
|
|
98
103
|
data: d.array
|
|
99
104
|
};
|
|
100
|
-
|
|
105
|
+
k.defaultProps = {
|
|
101
106
|
toolbarPosition: I.RIGHT,
|
|
102
107
|
draggable: !0,
|
|
103
108
|
size: "medium"
|
|
@@ -110,27 +115,27 @@ const M = "listbox.moveUp", G = "listbox.moveDown", $ = "listbox.transferTo", H
|
|
|
110
115
|
[V]: "Transfer All To",
|
|
111
116
|
[j]: "Transfer All From",
|
|
112
117
|
[q]: "Delete"
|
|
113
|
-
},
|
|
118
|
+
}, L = [
|
|
114
119
|
{ name: "moveUp", iconName: "caret-alt-up", svgIcon: R },
|
|
115
|
-
{ name: "moveDown", iconName: "caret-alt-down", svgIcon:
|
|
120
|
+
{ name: "moveDown", iconName: "caret-alt-down", svgIcon: K },
|
|
116
121
|
{ name: "transferTo", iconName: "caret-alt-right", svgIcon: N },
|
|
117
|
-
{ name: "transferFrom", iconName: "caret-alt-left", svgIcon:
|
|
118
|
-
{ name: "transferAllTo", iconName: "caret-double-alt-right", svgIcon:
|
|
119
|
-
{ name: "transferAllFrom", iconName: "caret-double-alt-left", svgIcon:
|
|
120
|
-
{ name: "remove", iconName: "x", svgIcon:
|
|
122
|
+
{ name: "transferFrom", iconName: "caret-alt-left", svgIcon: y },
|
|
123
|
+
{ name: "transferAllTo", iconName: "caret-double-alt-right", svgIcon: x },
|
|
124
|
+
{ name: "transferAllFrom", iconName: "caret-double-alt-left", svgIcon: E },
|
|
125
|
+
{ name: "remove", iconName: "x", svgIcon: U }
|
|
121
126
|
];
|
|
122
127
|
class v extends p.PureComponent {
|
|
123
128
|
constructor() {
|
|
124
129
|
super(...arguments), this.checkSvgIcon = (t) => {
|
|
125
130
|
switch (t.name) {
|
|
126
131
|
case "caret-alt-right":
|
|
127
|
-
return
|
|
132
|
+
return y;
|
|
128
133
|
case "caret-alt-left":
|
|
129
134
|
return N;
|
|
130
135
|
case "caret-double-alt-right":
|
|
131
|
-
return L;
|
|
132
|
-
case "caret-double-alt-left":
|
|
133
136
|
return E;
|
|
137
|
+
case "caret-double-alt-left":
|
|
138
|
+
return x;
|
|
134
139
|
}
|
|
135
140
|
return t;
|
|
136
141
|
}, this.checkFontIcon = (t) => {
|
|
@@ -149,19 +154,19 @@ class v extends p.PureComponent {
|
|
|
149
154
|
h(this.props.onToolClick, t, this, { toolName: e });
|
|
150
155
|
}, this.isItemDisabled = (t) => {
|
|
151
156
|
let e = !0;
|
|
152
|
-
const r = this.props.selectedField || "selected",
|
|
157
|
+
const r = this.props.selectedField || "selected", s = this.props.data.length, o = this.props.dataConnected.length, i = this.props.data.findIndex((a) => a[r] === !0) >= 0, l = this.props.dataConnected.findIndex((a) => a[r] === !0) >= 0;
|
|
153
158
|
switch (t) {
|
|
154
159
|
case "moveUp":
|
|
155
|
-
|
|
160
|
+
i ? e = this.props.data.length > 0 ? this.props.data[0].selected : !0 : l ? e = this.props.dataConnected.length > 0 ? this.props.dataConnected[0].selected : !0 : e = !0;
|
|
156
161
|
break;
|
|
157
162
|
case "moveDown":
|
|
158
|
-
|
|
163
|
+
i ? e = this.props.data[s - 1] ? this.props.data[s - 1].selected : !0 : l ? e = this.props.dataConnected.length > 0 ? this.props.dataConnected[o - 1].selected : !0 : e = !0;
|
|
159
164
|
break;
|
|
160
165
|
case "transferTo":
|
|
161
|
-
e = !(this.props.dataConnected &&
|
|
166
|
+
e = !(this.props.dataConnected && i);
|
|
162
167
|
break;
|
|
163
168
|
case "transferFrom":
|
|
164
|
-
this.props.dataConnected ? e = !(this.props.dataConnected &&
|
|
169
|
+
this.props.dataConnected ? e = !(this.props.dataConnected && l) : e = !0;
|
|
165
170
|
break;
|
|
166
171
|
case "transferAllTo":
|
|
167
172
|
e = !(this.props.dataConnected && this.props.data.length > 0);
|
|
@@ -170,7 +175,7 @@ class v extends p.PureComponent {
|
|
|
170
175
|
e = !(this.props.dataConnected && this.props.dataConnected.length > 0);
|
|
171
176
|
break;
|
|
172
177
|
case "remove":
|
|
173
|
-
e = !(
|
|
178
|
+
e = !(i || l);
|
|
174
179
|
break;
|
|
175
180
|
}
|
|
176
181
|
return e;
|
|
@@ -192,19 +197,19 @@ class v extends p.PureComponent {
|
|
|
192
197
|
)
|
|
193
198
|
},
|
|
194
199
|
this.props.tools && this.props.tools.map((e, r) => {
|
|
195
|
-
const
|
|
200
|
+
const s = L.findIndex((c) => c.name === e), o = L[s], i = this.isItemDisabled(o.name), l = `listbox.${o.name}`, a = t.toLanguageString(l, J[l]);
|
|
196
201
|
return /* @__PURE__ */ p.createElement(
|
|
197
|
-
|
|
202
|
+
S,
|
|
198
203
|
{
|
|
199
204
|
key: r,
|
|
200
|
-
disabled:
|
|
201
|
-
"data-command":
|
|
205
|
+
disabled: i,
|
|
206
|
+
"data-command": o.name,
|
|
202
207
|
title: a,
|
|
203
208
|
"aria-label": a,
|
|
204
|
-
icon: this.isRtl ? this.checkFontIcon(
|
|
205
|
-
svgIcon: this.isRtl ? this.checkSvgIcon(
|
|
209
|
+
icon: this.isRtl ? this.checkFontIcon(o.iconName) : o.iconName,
|
|
210
|
+
svgIcon: this.isRtl ? this.checkSvgIcon(o.svgIcon) : o.svgIcon,
|
|
206
211
|
onClick: (c) => {
|
|
207
|
-
c.preventDefault(), this.handleToolClick(c,
|
|
212
|
+
c.preventDefault(), this.handleToolClick(c, o.name || null);
|
|
208
213
|
}
|
|
209
214
|
}
|
|
210
215
|
);
|
|
@@ -225,70 +230,71 @@ v.defaultProps = {
|
|
|
225
230
|
selectedField: "selected"
|
|
226
231
|
};
|
|
227
232
|
P(v);
|
|
228
|
-
const
|
|
229
|
-
let
|
|
230
|
-
const
|
|
233
|
+
const B = (n = [], t = [], e, r) => {
|
|
234
|
+
let s = [], o = [], i = [];
|
|
235
|
+
const l = {
|
|
231
236
|
listBoxOneData: n,
|
|
232
237
|
listBoxTwoData: t
|
|
233
238
|
};
|
|
234
239
|
switch (e) {
|
|
235
240
|
case "moveUp":
|
|
236
|
-
|
|
237
|
-
a[r] && (o = u(c, c - 1, o));
|
|
238
|
-
}), s = [...t], s.forEach((a, c) => {
|
|
241
|
+
s = [...n], s.forEach((a, c) => {
|
|
239
242
|
a[r] && (s = u(c, c - 1, s));
|
|
240
|
-
}), i
|
|
243
|
+
}), i = [...t], i.forEach((a, c) => {
|
|
244
|
+
a[r] && (i = u(c, c - 1, i));
|
|
245
|
+
}), l.listBoxOneData = s, l.listBoxTwoData = i;
|
|
241
246
|
break;
|
|
242
247
|
case "moveDown":
|
|
243
|
-
|
|
244
|
-
a[r] && (o = u(c, c - 1, o));
|
|
245
|
-
}), s = t.reverse(), s.forEach((a, c) => {
|
|
248
|
+
s = n.reverse(), s.forEach((a, c) => {
|
|
246
249
|
a[r] && (s = u(c, c - 1, s));
|
|
247
|
-
}), i
|
|
250
|
+
}), i = t.reverse(), i.forEach((a, c) => {
|
|
251
|
+
a[r] && (i = u(c, c - 1, i));
|
|
252
|
+
}), l.listBoxOneData = [...s].reverse(), l.listBoxTwoData = [...i].reverse();
|
|
248
253
|
break;
|
|
249
254
|
case "transferTo":
|
|
250
|
-
|
|
255
|
+
s = n.filter((a) => !a[r]), o = n.filter((a) => a[r]), i = t.concat(o), l.listBoxOneData = s, l.listBoxTwoData = i;
|
|
251
256
|
break;
|
|
252
257
|
case "transferFrom":
|
|
253
|
-
|
|
258
|
+
i = t.filter((a) => !a[r]), o = t.filter((a) => a[r]), s = n.concat(o), l.listBoxOneData = s, l.listBoxTwoData = i;
|
|
254
259
|
break;
|
|
255
260
|
case "transferAllTo":
|
|
256
|
-
|
|
261
|
+
l.listBoxOneData = [], l.listBoxTwoData = t.concat(n);
|
|
257
262
|
break;
|
|
258
263
|
case "transferAllFrom":
|
|
259
|
-
|
|
264
|
+
l.listBoxOneData = t.concat(n), l.listBoxTwoData = [];
|
|
260
265
|
break;
|
|
261
266
|
case "remove":
|
|
262
|
-
|
|
267
|
+
i = t.filter((a) => !a[r]), s = n.filter((a) => !a[r]), l.listBoxOneData = s, l.listBoxTwoData = i;
|
|
263
268
|
break;
|
|
264
269
|
}
|
|
265
|
-
return
|
|
270
|
+
return l;
|
|
266
271
|
}, u = (n, t, e) => {
|
|
267
272
|
const r = e.splice(n, 1)[0];
|
|
268
273
|
return e.splice(t, 0, r), e;
|
|
269
|
-
},
|
|
270
|
-
const
|
|
271
|
-
return c &&
|
|
272
|
-
listBoxOneData: u(
|
|
274
|
+
}, tt = (n = [], t = [], e, r, s) => {
|
|
275
|
+
const o = n.findIndex((m) => m[s] === e[s]), i = t.findIndex((m) => m[s] === e[s]), l = r !== null ? n.findIndex((m) => m[s] === r[s]) : -1, a = r !== null ? t.findIndex((m) => m[s] === r[s]) : -1, c = o >= 0, D = i >= 0, T = l >= 0, C = a >= 0, f = [...n], g = [...t];
|
|
276
|
+
return c && T ? {
|
|
277
|
+
listBoxOneData: u(o, l, n),
|
|
273
278
|
listBoxTwoData: t
|
|
274
|
-
} :
|
|
279
|
+
} : D && C ? {
|
|
275
280
|
listBoxOneData: n,
|
|
276
|
-
listBoxTwoData: u(
|
|
277
|
-
} : c && (
|
|
281
|
+
listBoxTwoData: u(i, a, t)
|
|
282
|
+
} : c && (C || r === null) ? (r === null ? g.push(n[o]) : g.splice(a + 1, 0, n[o]), f.splice(o, 1), {
|
|
278
283
|
listBoxOneData: f,
|
|
279
284
|
listBoxTwoData: g
|
|
280
|
-
}) :
|
|
285
|
+
}) : D && (T || r === null) ? (r === null ? f.push(t[i]) : f.splice(l + 1, 0, t[i]), g.splice(i, 1), {
|
|
281
286
|
listBoxOneData: f,
|
|
282
287
|
listBoxTwoData: g
|
|
283
288
|
}) : {
|
|
284
289
|
listBoxOneData: n,
|
|
285
290
|
listBoxTwoData: t
|
|
286
291
|
};
|
|
287
|
-
};
|
|
292
|
+
}, Q = F(k);
|
|
293
|
+
Q.displayName = "KendoReactListBox";
|
|
288
294
|
export {
|
|
289
|
-
|
|
295
|
+
Q as ListBox,
|
|
290
296
|
v as ListBoxToolbar,
|
|
291
297
|
u as moveItem,
|
|
292
|
-
|
|
293
|
-
|
|
298
|
+
B as processListBoxData,
|
|
299
|
+
tt as processListBoxDragAndDrop
|
|
294
300
|
};
|
|
@@ -10,9 +10,13 @@ import { toolbarPosition } from './Enums';
|
|
|
10
10
|
*/
|
|
11
11
|
export interface ListBoxProps {
|
|
12
12
|
/**
|
|
13
|
-
* Sets a class of the
|
|
13
|
+
* Sets a `class` of the ListBox container.
|
|
14
14
|
*/
|
|
15
15
|
className?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Sets a `id` of the ListBox container.
|
|
18
|
+
*/
|
|
19
|
+
id?: string;
|
|
16
20
|
/**
|
|
17
21
|
* Configures the `size` of the ListBox.
|
|
18
22
|
*
|
|
@@ -26,7 +30,7 @@ export interface ListBoxProps {
|
|
|
26
30
|
*/
|
|
27
31
|
size?: null | 'small' | 'medium' | 'large';
|
|
28
32
|
/**
|
|
29
|
-
* Specifies the styles which are set to the
|
|
33
|
+
* Specifies the styles which are set to the ListBox container.
|
|
30
34
|
*/
|
|
31
35
|
style?: React.CSSProperties;
|
|
32
36
|
/**
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-listbox",
|
|
3
|
-
"version": "7.0.0-develop.
|
|
3
|
+
"version": "7.0.0-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",
|
|
7
7
|
"homepage": "https://www.telerik.com/kendo-react-ui",
|
|
8
8
|
"main": "./index.js",
|
|
9
|
+
"module": "./index.mjs",
|
|
9
10
|
"types": "./index.d.ts",
|
|
10
11
|
"exports": {
|
|
11
12
|
".": {
|
|
@@ -16,9 +17,9 @@
|
|
|
16
17
|
"sideEffects": false,
|
|
17
18
|
"peerDependencies": {
|
|
18
19
|
"@progress/kendo-licensing": "^1.3.0",
|
|
19
|
-
"@progress/kendo-react-buttons": "7.0.0-develop.
|
|
20
|
-
"@progress/kendo-react-common": "7.0.0-develop.
|
|
21
|
-
"@progress/kendo-react-intl": "7.0.0-develop.
|
|
20
|
+
"@progress/kendo-react-buttons": "7.0.0-develop.12",
|
|
21
|
+
"@progress/kendo-react-common": "7.0.0-develop.12",
|
|
22
|
+
"@progress/kendo-react-intl": "7.0.0-develop.12",
|
|
22
23
|
"@progress/kendo-svg-icons": "^2.0.0",
|
|
23
24
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
24
25
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|