@progress/kendo-react-listbox 7.2.4-develop.3 → 7.2.4-develop.4

package/ListBox.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),r=require("prop-types"),a=require("@progress/kendo-react-common"),d=require("./interfaces/Enums.js"),m=require("./package-metadata.js");function u(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const s=u(h),p=class p extends s.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&&a.dispatchEvent(this.props.onKeyDown,t,this,void 0)},this.handleContainerDrop=t=>{t.target.classList.contains("k-list-content")&&(this.props.data.length>0?a.dispatchEvent(this.props.onDrop,t,this,{dataItem:this.props.data[this.props.data.length-1]}):a.dispatchEvent(this.props.onDrop,t,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===d.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")&&a.dispatchEvent(this.props.onDragLeave,t,this,void 0)},a.validatePackage(m.packageMetadata)}get itemGuid(){return this.props.id+"-accessibility-id"}render(){return s.createElement("div",{id:this.props.id,className:a.classNames(this.props.className,"k-listbox",this.setToolbarPosition()),style:this.props.style,unselectable:"on"},this.props.toolbar&&this.props.toolbarPosition!=="bottom"&&s.createElement(this.props.toolbar,null),s.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",onDragOver:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragLeave:this.handleOnDragLeave},s.createElement("div",{className:a.classNames("k-list",{[`k-list-${a.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},s.createElement("div",{className:"k-list-content"},s.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",tabIndex:0,onKeyDown:this.handleKeyDown},this.props.data.map((e,t)=>{const o=this.setSelected(e),l={className:a.classNames("k-list-item",{"k-selected":o}),role:"option","aria-selected":o,key:t,id:this.itemGuid+t,"data-uid":this.itemGuid+t,draggable:this.props.draggable,onDragStart:i=>a.dispatchEvent(this.props.onDragStart,i,this,{dataItem:e}),onDragOver:i=>{i.preventDefault(),a.dispatchEvent(this.props.onDragOver,i,this,{dataItem:e})},onDrop:i=>a.dispatchEvent(this.props.onDrop,i,this,{dataItem:e}),onClick:i=>a.dispatchEvent(this.props.onItemClick,i,this,{dataItem:e})};return this.props.item?s.createElement(this.props.item,{selected:o,dataItem:e,...l,key:l.key},s.createElement("span",{className:"k-list-item-text"},e.name)):s.createElement("li",{...l,key:l.key},s.createElement("span",{className:"k-list-item-text"},this.renderItem(e)))}))))),this.props.toolbar&&this.props.toolbarPosition==="bottom"&&s.createElement(this.props.toolbar,null),s.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},this.props.data.map((e,t)=>{const o=e[this.props.valueField||this.props.textField];return s.createElement("option",{key:t,value:o},o)})))}};p.propTypes={size:r.oneOf([null,"small","medium","large"]),toolbarPosition:r.oneOf(["none","top","bottom","left","right"]),textField:r.string,valueField:r.string,selectedField:r.string,data:r.array},p.defaultProps={toolbarPosition:d.toolbarPosition.RIGHT,draggable:!0,size:"medium"};let c=p;exports.ListBox=c;

package/ListBox.mjs

@@ -0,0 +1,105 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as s from "react";
+import r from "prop-types";
+import { dispatchEvent as i, validatePackage as c, classNames as p, kendoThemeMaps as m } from "@progress/kendo-react-common";
+import { toolbarPosition as h } from "./interfaces/Enums.mjs";
+import { packageMetadata as u } from "./package-metadata.mjs";
+const n = class n extends s.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 && i(this.props.onKeyDown, t, this, void 0);
+    }, this.handleContainerDrop = (t) => {
+      t.target.classList.contains("k-list-content") && (this.props.data.length > 0 ? i(this.props.onDrop, t, this, { dataItem: this.props.data[this.props.data.length - 1] }) : i(this.props.onDrop, t, this, { dataItem: null }));
+    }, this.setToolbarPosition = () => this.props.toolbarPosition === h.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") && i(this.props.onDragLeave, t, this, void 0);
+    }, c(u);
+  }
+  get itemGuid() {
+    return this.props.id + "-accessibility-id";
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    return /* @__PURE__ */ s.createElement(
+      "div",
+      {
+        id: this.props.id,
+        className: p(
+          this.props.className,
+          "k-listbox",
+          this.setToolbarPosition()
+        ),
+        style: this.props.style,
+        unselectable: "on"
+      },
+      this.props.toolbar && this.props.toolbarPosition !== "bottom" && /* @__PURE__ */ s.createElement(this.props.toolbar, null),
+      /* @__PURE__ */ s.createElement(
+        "div",
+        {
+          className: "k-list-scroller k-selectable",
+          "data-role": "selectable",
+          onDragOver: (e) => e.preventDefault(),
+          onDrop: this.handleContainerDrop,
+          onDragLeave: this.handleOnDragLeave
+        },
+        /* @__PURE__ */ s.createElement("div", { className: p("k-list", {
+          [`k-list-${m.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+        }) }, /* @__PURE__ */ s.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ s.createElement("ul", { className: "k-list-ul", role: "listbox", "aria-label": "listbox-container", tabIndex: 0, onKeyDown: this.handleKeyDown }, this.props.data.map((e, t) => {
+          const a = this.setSelected(e), l = {
+            className: p(
+              "k-list-item",
+              {
+                "k-selected": a
+              }
+            ),
+            role: "option",
+            "aria-selected": a,
+            key: t,
+            id: this.itemGuid + t,
+            "data-uid": this.itemGuid + t,
+            draggable: this.props.draggable,
+            onDragStart: (o) => i(this.props.onDragStart, o, this, { dataItem: e }),
+            onDragOver: (o) => {
+              o.preventDefault(), i(this.props.onDragOver, o, this, { dataItem: e });
+            },
+            onDrop: (o) => i(this.props.onDrop, o, this, { dataItem: e }),
+            onClick: (o) => i(this.props.onItemClick, o, this, { dataItem: e })
+          };
+          return this.props.item ? /* @__PURE__ */ s.createElement(this.props.item, { selected: a, dataItem: e, ...l, key: l.key }, /* @__PURE__ */ s.createElement("span", { className: "k-list-item-text" }, e.name)) : /* @__PURE__ */ s.createElement("li", { ...l, key: l.key }, /* @__PURE__ */ s.createElement("span", { className: "k-list-item-text" }, this.renderItem(e)));
+        }))))
+      ),
+      this.props.toolbar && this.props.toolbarPosition === "bottom" && /* @__PURE__ */ s.createElement(this.props.toolbar, null),
+      /* @__PURE__ */ s.createElement("select", { style: { display: "none" }, multiple: !0, "data-role": "listbox" }, this.props.data.map((e, t) => {
+        const a = e[this.props.valueField || this.props.textField];
+        return /* @__PURE__ */ s.createElement("option", { key: t, value: a }, a);
+      }))
+    );
+  }
+};
+n.propTypes = {
+  size: r.oneOf([null, "small", "medium", "large"]),
+  toolbarPosition: r.oneOf(["none", "top", "bottom", "left", "right"]),
+  textField: r.string,
+  valueField: r.string,
+  selectedField: r.string,
+  data: r.array
+}, n.defaultProps = {
+  toolbarPosition: h.RIGHT,
+  draggable: !0,
+  size: "medium"
+};
+let d = n;
+export {
+  d as ListBox
+};

package/ListBoxToolbar.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"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"),i=require("prop-types"),a=require("@progress/kendo-svg-icons");function C(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,r.get?r:{enumerable:!0,get:()=>l[e]})}}return t.default=l,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(h=>h.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,{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:h=>{h.preventDefault(),this.handleToolClick(h,n.name||null)}})}))}};u.propTypes={data:i.array,dataConnected:i.array,tools:i.array,selectedField:i.string,dir:i.string},u.defaultProps={data:[],dataConnected:[],selectedField:"selected"};let p=u;b.registerForLocalization(p);exports.ListBoxToolbar=p;

package/ListBoxToolbar.mjs

@@ -0,0 +1,132 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as p from "react";
+import { dispatchEvent as I, classNames as b } from "@progress/kendo-react-common";
+import { Button as C } from "@progress/kendo-react-buttons";
+import { provideLocalizationService as k, registerForLocalization as N } from "@progress/kendo-react-intl";
+import { messages as F } from "./messages/index.mjs";
+import n from "prop-types";
+import { caretDoubleAltRightIcon as u, caretDoubleAltLeftIcon as g, caretAltRightIcon as f, caretAltLeftIcon as v, caretAltUpIcon as A, caretAltDownIcon as D, xIcon as T } from "@progress/kendo-svg-icons";
+const m = [
+  { name: "moveUp", iconName: "caret-alt-up", svgIcon: A },
+  { name: "moveDown", iconName: "caret-alt-down", svgIcon: D },
+  { name: "transferTo", iconName: "caret-alt-right", svgIcon: f },
+  { name: "transferFrom", iconName: "caret-alt-left", svgIcon: v },
+  { name: "transferAllTo", iconName: "caret-double-alt-right", svgIcon: u },
+  { name: "transferAllFrom", iconName: "caret-double-alt-left", svgIcon: g },
+  { name: "remove", iconName: "x", svgIcon: T }
+], d = class d extends p.PureComponent {
+  constructor() {
+    super(...arguments), this.checkSvgIcon = (t) => {
+      switch (t.name) {
+        case "caret-alt-right":
+          return v;
+        case "caret-alt-left":
+          return f;
+        case "caret-double-alt-right":
+          return g;
+        case "caret-double-alt-left":
+          return u;
+      }
+      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) => {
+      I(this.props.onToolClick, t, this, { toolName: e });
+    }, this.isItemDisabled = (t) => {
+      let e = !0;
+      const c = this.props.selectedField || "selected", l = this.props.data.length, a = this.props.dataConnected.length, s = this.props.data.findIndex((o) => o[c] === !0) >= 0, r = this.props.dataConnected.findIndex((o) => o[c] === !0) >= 0;
+      switch (t) {
+        case "moveUp":
+          s ? e = this.props.data.length > 0 ? this.props.data[0].selected : !0 : r ? e = this.props.dataConnected.length > 0 ? this.props.dataConnected[0].selected : !0 : e = !0;
+          break;
+        case "moveDown":
+          s ? e = this.props.data[l - 1] ? this.props.data[l - 1].selected : !0 : r ? e = this.props.dataConnected.length > 0 ? this.props.dataConnected[a - 1].selected : !0 : e = !0;
+          break;
+        case "transferTo":
+          e = !(this.props.dataConnected && s);
+          break;
+        case "transferFrom":
+          this.props.dataConnected ? e = !(this.props.dataConnected && r) : 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 = !(s || r);
+          break;
+      }
+      return e;
+    };
+  }
+  get isRtl() {
+    return this.props.dir === "rtl";
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const t = k(this);
+    return /* @__PURE__ */ p.createElement(
+      "div",
+      {
+        className: b(
+          "k-listbox-actions"
+        )
+      },
+      this.props.tools && this.props.tools.map((e, c) => {
+        const l = m.findIndex((i) => i.name === e), a = m[l], s = this.isItemDisabled(a.name), r = `listbox.${a.name}`, o = t.toLanguageString(r, F[r]);
+        return /* @__PURE__ */ p.createElement(
+          C,
+          {
+            key: c,
+            disabled: s,
+            "data-command": a.name,
+            title: o,
+            "aria-label": o,
+            icon: this.isRtl ? this.checkFontIcon(a.iconName) : a.iconName,
+            svgIcon: this.isRtl ? this.checkSvgIcon(a.svgIcon) : a.svgIcon,
+            onClick: (i) => {
+              i.preventDefault(), this.handleToolClick(i, a.name || null);
+            }
+          }
+        );
+      })
+    );
+  }
+};
+d.propTypes = {
+  data: n.array,
+  dataConnected: n.array,
+  tools: n.array,
+  selectedField: n.string,
+  dir: n.string
+}, d.defaultProps = {
+  data: [],
+  dataConnected: [],
+  selectedField: "selected"
+};
+let h = d;
+N(h);
+export {
+  h as ListBoxToolbar
+};

package/dist/cdn/js/kendo-react-listbox.js

@@ -1,5 +1,8 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-(function(d,b){typeof exports=="object"&&typeof module!="undefined"?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!="undefined"?globalThis:d||self,b(d.KendoReactListbox={},d.React,d.PropTypes,d.KendoReactCommon,d.KendoReactButtons,d.KendoReactIntl,d.KendoSvgIcons))})(this,function(d,b,u,h,w,k,f){"use strict";"use client";function F(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>a[e]})}}return t.default=a,Object.freeze(t)}const p=F(b);var E=(a=>(a.TOP="top",a.BOTTOM="bottom",a.LEFT="left",a.RIGHT="right",a.NONE="none",a))(E||{});const O={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 L=class extends p.PureComponent{constructor(t){super(t),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&&h.dispatchEvent(this.props.onKeyDown,e,this,void 0)},this.handleContainerDrop=e=>{e.target.classList.contains("k-list-content")&&(this.props.data.length>0?h.dispatchEvent(this.props.onDrop,e,this,{dataItem:this.props.data[this.props.data.length-1]}):h.dispatchEvent(this.props.onDrop,e,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===E.NONE||this.props.toolbar===void 0?"":`k-listbox-actions-${this.props.toolbarPosition}`,this.handleOnDragLeave=e=>{this.props.onDragLeave&&e.target.classList.contains("k-list-content")&&h.dispatchEvent(this.props.onDragLeave,e,this,void 0)},h.validatePackage(O)}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:t=>t.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((t,e)=>{const s=this.setSelected(t),r={className:h.classNames("k-list-item",{"k-selected":s}),role:"option","aria-selected":s,key:e,id:this.itemGuid+e,"data-uid":this.itemGuid+e,draggable:this.props.draggable,onDragStart:o=>h.dispatchEvent(this.props.onDragStart,o,this,{dataItem:t}),onDragOver:o=>{o.preventDefault(),h.dispatchEvent(this.props.onDragOver,o,this,{dataItem:t})},onDrop:o=>h.dispatchEvent(this.props.onDrop,o,this,{dataItem:t}),onClick:o=>h.dispatchEvent(this.props.onItemClick,o,this,{dataItem:t})};return this.props.item?p.createElement(this.props.item,{selected:s,dataItem:t,...r,key:r.key},p.createElement("span",{className:"k-list-item-text"},t.name)):p.createElement("li",{...r,key:r.key},p.createElement("span",{className:"k-list-item-text"},this.renderItem(t)))}))))),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((t,e)=>{const s=t[this.props.valueField||this.props.textField];return p.createElement("option",{key:e,value:s},s)})))}};L.propTypes={size:u.oneOf([null,"small","medium","large"]),toolbarPosition:u.oneOf(["none","top","bottom","left","right"]),textField:u.string,valueField:u.string,selectedField:u.string,data:u.array},L.defaultProps={toolbarPosition:E.RIGHT,draggable:!0,size:"medium"};const C="listbox.moveUp",K="listbox.moveDown",S="listbox.transferTo",z="listbox.transferFrom",U="listbox.transferAllTo",M="listbox.transferAllFrom",j="listbox.remove",q={[C]:"Move Up",[K]:"Move Down",[S]:"Transfer To",[z]:"Transfer From",[U]:"Transfer All To",[M]:"Transfer All From",[j]:"Delete"},N=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:f.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:f.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:f.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:f.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:f.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:f.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:f.xIcon}];class D extends p.PureComponent{constructor(){super(...arguments),this.checkSvgIcon=t=>{switch(t.name){case"caret-alt-right":return f.caretAltLeftIcon;case"caret-alt-left":return f.caretAltRightIcon;case"caret-double-alt-right":return f.caretDoubleAltLeftIcon;case"caret-double-alt-left":return f.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)=>{h.dispatchEvent(this.props.onToolClick,t,this,{toolName:e})},this.isItemDisabled=t=>{let e=!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(t){case"moveUp":i?e=this.props.data.length>0?this.props.data[0].selected:!0:c?e=this.props.dataConnected.length>0?this.props.dataConnected[0].selected:!0:e=!0;break;case"moveDown":i?e=this.props.data[r-1]?this.props.data[r-1].selected:!0:c?e=this.props.dataConnected.length>0?this.props.dataConnected[o-1].selected:!0:e=!0;break;case"transferTo":e=!(this.props.dataConnected&&i);break;case"transferFrom":this.props.dataConnected?e=!(this.props.dataConnected&&c):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=!(i||c);break}return e}}get isRtl(){return this.props.dir==="rtl"}render(){const t=k.provideLocalizationService(this);return p.createElement("div",{className:h.classNames("k-listbox-actions")},this.props.tools&&this.props.tools.map((e,s)=>{const r=N.findIndex(l=>l.name===e),o=N[r],i=this.isItemDisabled(o.name),c=`listbox.${o.name}`,n=t.toLanguageString(c,q[c]);return p.createElement(w.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:u.array,dataConnected:u.array,tools:u.array,selectedField:u.string,dir:u.string},D.defaultProps={data:[],dataConnected:[],selectedField:"selected"},k.registerForLocalization(D);const G=(a=[],t=[],e,s)=>{let r=[],o=[],i=[];const c={listBoxOneData:a,listBoxTwoData:t};switch(e){case"moveUp":r=[...a],r.forEach((n,l)=>{n[s]&&(r=m(l,l-1,r))}),i=[...t],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=t.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=t.concat(o),c.listBoxOneData=r,c.listBoxTwoData=i;break;case"transferFrom":i=t.filter(n=>!n[s]),o=t.filter(n=>n[s]),r=a.concat(o),c.listBoxOneData=r,c.listBoxTwoData=i;break;case"transferAllTo":c.listBoxOneData=[],c.listBoxTwoData=t.concat(a);break;case"transferAllFrom":c.listBoxOneData=t.concat(a),c.listBoxTwoData=[];break;case"remove":i=t.filter(n=>!n[s]),r=a.filter(n=>!n[s]),c.listBoxOneData=r,c.listBoxTwoData=i;break}return c},m=(a,t,e)=>{const s=e.splice(a,1)[0];return e.splice(t,0,s),e},P=(a=[],t=[],e,s,r)=>{const o=a.findIndex(g=>g[r]===e[r]),i=t.findIndex(g=>g[r]===e[r]),c=s!==null?a.findIndex(g=>g[r]===s[r]):-1,n=s!==null?t.findIndex(g=>g[r]===s[r]):-1,l=o>=0,T=i>=0,y=c>=0,A=n>=0,v=[...a],I=[...t];return l&&y?{listBoxOneData:m(o,c,a),listBoxTwoData:t}:T&&A?{listBoxOneData:a,listBoxTwoData:m(i,n,t)}:l&&(A||s===null)?(s===null?I.push(a[o]):I.splice(n+1,0,a[o]),v.splice(o,1),{listBoxOneData:v,listBoxTwoData:I}):T&&(y||s===null)?(s===null?v.push(t[i]):v.splice(c+1,0,t[i]),I.splice(i,1),{listBoxOneData:v,listBoxTwoData:I}):{listBoxOneData:a,listBoxTwoData:t}},x=h.withIdHOC(L);x.displayName="KendoReactListBox",d.ListBox=x,d.ListBoxToolbar=D,d.moveItem=m,d.processListBoxData=G,d.processListBoxDragAndDrop=P,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+!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-${o.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]: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,{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},g.defaultProps={data:[],dataConnected:[],selectedField:"selected"};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

@@ -1,5 +1,271 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-export * from './index';
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { ComponentType } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import PropTypes from 'prop-types';
+import * as React_2 from 'react';
+import { RefAttributes } from 'react';
+
+/** @hidden */
+export declare const ListBox: ForwardRefExoticComponent<ListBoxProps & RefAttributes<any>>;
+
+declare class ListBox_2 extends React_2.PureComponent<ListBoxProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        size: PropTypes.Requireable<string | null>;
+        toolbarPosition: PropTypes.Requireable<string>;
+        textField: PropTypes.Requireable<string>;
+        valueField: PropTypes.Requireable<string>;
+        selectedField: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<any[]>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        toolbarPosition: toolbarPosition;
+        draggable: boolean;
+        size: string;
+    };
+    private get itemGuid();
+    constructor(props: ListBoxProps);
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private setSelected;
+    private renderItem;
+    private handleKeyDown;
+    private handleContainerDrop;
+    private setToolbarPosition;
+    private handleOnDragLeave;
+}
+
+export declare interface ListBoxDragEvent extends BaseEvent<ListBox_2> {
+    dataItem?: any;
+}
+
+declare interface ListBoxDragLeaveEvent extends BaseEvent<ListBox_2> {
+}
+
+export declare interface ListBoxItemClickEvent extends BaseEvent<ListBox_2> {
+    dataItem?: any;
+}
+
+export declare interface ListBoxKeyDownEvent extends BaseEvent<ListBox_2> {
+}
+
+/**
+ * Represents the props of the [KendoReact ListBox component]({% slug overview_listbox %}).
+ */
+export declare interface ListBoxProps {
+    /**
+     * Sets a `class` of the ListBox container.
+     */
+    className?: string;
+    /**
+     * Sets a `id` of the ListBox container.
+     */
+    id?: string;
+    /**
+     * Configures the `size` of the ListBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Specifies the styles which are set to the ListBox container.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Set the data of the ListBox.
+     */
+    data: Array<any>;
+    /**
+     * Makes the items of the ListBox draggable. The items are draggable by default.
+     */
+    draggable?: boolean;
+    /**
+     * Set the selected field of the ListBox. Based on that value of that field, an item will be selected or not.
+     */
+    selectedField?: string;
+    /**
+     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
+     */
+    textField: string;
+    /**
+     * The field that be used during form submit. Defaults to the textField if not set.
+     */
+    valueField?: string;
+    /**
+     * Sets the position of the toolbar of the ListBox if one is set. The ListBox may have no toolbar.
+     * * The possible values are:
+     * * `top`
+     * * `bottom`
+     * * `left`
+     * * `right` (Default)
+     * * `none`
+     */
+    toolbarPosition?: toolbarPosition | string;
+    /**
+     * Renders a toolbar component next to the ListBox.
+     */
+    toolbar?: null | ComponentType<any>;
+    /**
+     * Defines the component that will be rendered for each item of the data collection.
+     */
+    item?: React.ComponentType<any>;
+    /**
+     * Fires when an item from the ListBox is clicked. Contains the clicked item.
+     */
+    onItemClick?: (event: ListBoxItemClickEvent) => void;
+    /**
+     * Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
+     */
+    onKeyDown?: (event: ListBoxKeyDownEvent) => void;
+    /**
+     * Fires when an the user start to drag an item from the ListBox. The event contains information for the item that is being dragged.
+     */
+    onDragStart?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when an the user drags over an item from the ListBox. The event contains information for the item that is dragged over.
+     */
+    onDragOver?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when an the user drops an item. The event contains information for the drop target item.
+     */
+    onDrop?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when a dragged element or text selection leaves the ListBox element.
+     */
+    onDragLeave?: (event: ListBoxDragLeaveEvent) => void;
+}
+
+export declare class ListBoxToolbar extends React_2.PureComponent<ListBoxToolbarProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        data: PropTypes.Requireable<any[]>;
+        dataConnected: PropTypes.Requireable<any[]>;
+        tools: PropTypes.Requireable<any[]>;
+        selectedField: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        data: never[];
+        dataConnected: never[];
+        selectedField: string;
+    };
+    private get isRtl();
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private checkSvgIcon;
+    private checkFontIcon;
+    private handleToolClick;
+    private isItemDisabled;
+}
+
+export declare interface ListBoxToolbarClickEvent extends BaseEvent<ListBoxToolbar> {
+    toolName?: string;
+}
+
+export declare interface ListBoxToolbarProps {
+    /**
+     * Sets the tools of the ListBoxToolbar. By default, the ListBoxToolbar renders no tools.
+     * The built-in tools are:
+     * * `moveUp`
+     * * `moveDown`
+     * * `transferTo`
+     * * `transferFrom`
+     * * `transferAllTo`
+     * * `transferAllFrom`
+     * * `remove`
+     */
+    tools?: Array<string>;
+    /**
+     * The data of the main ListBox.
+     */
+    data: Array<any>;
+    /**
+     * The data of the connected ListBox.
+     */
+    dataConnected: Array<any>;
+    /**
+     * Set the selected field of the ListBoxToolbar.
+     * Based on that value of that field the ListBoxToolbar will determine which actions are allowed and which disabled.
+     */
+    selectedField?: string;
+    /**
+     * Fires when one of the ListBoxToolbar tools is clicked.
+     */
+    onToolClick?: (event: ListBoxToolbarClickEvent) => void;
+    /**
+     * @hidden
+     */
+    dir?: string;
+}
+
+/**
+ * @hidden
+ */
+export declare const moveItem: (from: number, to: number, data: Array<any>) => any[];
+
+/**
+ * Process the data collection/s based on the clicked ListBoxToolbar tool.
+ *
+ * @param {T[]} listBoxOneData - The first data collection.
+ * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
+ * @param {string} toolName - The tool that was clicked.
+ * @param {string} selectedField - The field that contains the selected information in the data object.
+ * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
+ */
+export declare const processListBoxData: (listBoxOneData: any[] | undefined, listBoxTwoData: any[] | undefined, toolName: string, selectedField: string) => {
+    listBoxOneData: any[];
+    listBoxTwoData: any[];
+};
+
+/**
+ * Process the data collection/s based on the dragged and drop item.
+ *
+ * @param {T[]} listBoxOneData - The first data collection.
+ * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
+ * @param {any} dragItem - The item that was dragged.
+ * @param {any} dropItem - The drop target item.
+ * @param {string} valueField - The field which points to the unique value of each data item.
+ * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
+ */
+export declare const processListBoxDragAndDrop: (listBoxOneData: any[] | undefined, listBoxTwoData: any[] | undefined, dragItem: any, dropItem: any, valueField: string) => {
+    listBoxOneData: any[];
+    listBoxTwoData: any[];
+};
+
+declare enum toolbarPosition {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right",
+    NONE = "none"
+}
+
+export { }