@progress/kendo-react-listbox 8.1.1 → 8.2.0-develop.2

package/ListBox.js

@@ -5,4 +5,4 @@
  * 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 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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),u=require("prop-types"),a=require("@progress/kendo-react-common"),R=require("./interfaces/Enums.js"),U=require("./package-metadata.js");function V(o){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const m in o)if(m!=="default"){const g=Object.getOwnPropertyDescriptor(o,m);Object.defineProperty(f,m,g.get?g:{enumerable:!0,get:()=>o[m]})}}return f.default=o,Object.freeze(f)}const s=V(G),D=s.forwardRef((o,f)=>{a.validatePackage(U.packageMetadata);const{id:m,style:g,data:c,textField:h,className:T,valueField:S,selectedField:v,onDrop:L,onKeyDown:N,onDragStart:C,onDragLeave:K,onDragOver:F,onItemClick:z,onItemSelect:y,onKeyboardNavigate:d,size:b=k.size,draggable:q=k.draggable,toolbarPosition:p=k.toolbarPosition}=o,x=s.useRef(null),O=s.useRef(null),w=s.useRef(null),n=s.useCallback(()=>({element:w.current,props:o}),[]);s.useImperativeHandle(O,n),s.useImperativeHandle(f,()=>O.current);const P=m+"-accessibility-id",I=a.kendoThemeMaps.sizeMap[b]||b,M=t=>{if(v)return!!t[v]},_=t=>h?t[h]:t.toString(),A=t=>{N&&a.dispatchEvent(N,t,n(),void 0)},j=t=>{t.target.classList.contains("k-list-content")&&(o.data.length>0?a.dispatchEvent(o.onDrop,t,n(),{dataItem:o.data[o.data.length-1]}):a.dispatchEvent(o.onDrop,t,n(),{dataItem:null}))},B=()=>p===R.toolbarPosition.NONE||o.toolbar===void 0?"":`k-listbox-actions-${p}`,H=t=>{K&&t.target.classList.contains("k-list-content")&&a.dispatchEvent(K,t,n(),void 0)},E=s.useMemo(()=>new a.Navigation({root:x,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(t,i,e)=>{const r=i.elements.indexOf(t);e.metaKey&&a.dispatchEvent(y,e,n(),{dataItem:c[r]}),a.dispatchEvent(y,e,n(),{dataItem:c[r]})},ArrowDown:(t,i,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(d,e,n(),{actionName:"moveDown"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),i.focusNext(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=i.elements.indexOf(t),l=c[r+1];l&&(a.dispatchEvent(y,e,n(),{dataItem:l}),i.focusNext(t))}},ArrowUp:(t,i,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(d,e,n(),{actionName:"moveUp"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),i.focusPrevious(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=i.elements.indexOf(t),l=c[r-1];l&&(a.dispatchEvent(y,e,n(),{dataItem:l}),i.focusPrevious(t))}},ArrowLeft:(t,i,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(d,e,n(),{actionName:"transferAllFrom"}):e.metaKey&&a.dispatchEvent(d,e,n(),{actionName:"transferFrom"})},ArrowRight:(t,i,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(d,e,n(),{actionName:"transferAllTo"}):e.metaKey&&a.dispatchEvent(d,e,n(),{actionName:"transferTo"})},Backspace:(t,i,e)=>{a.dispatchEvent(d,e,n(),{actionName:"remove"})}}}}),[c]),$=s.useCallback(E.triggerKeyboardEvent.bind(E),[c]);return s.useEffect(()=>(E.initializeRovingTab(),()=>E.removeFocusListener()),[c]),s.createElement("div",{id:m,ref:w,style:g,unselectable:"on",className:a.classNames(T,"k-listbox",{[`k-listbox-${I}`]:b},B())},o.toolbar&&p!=="bottom"&&s.createElement(o.toolbar,null),s.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:x,onDragOver:t=>t.preventDefault(),onDrop:j,onDragLeave:H,onKeyDown:$},s.createElement("div",{className:a.classNames("k-list",{[`k-list-${I}`]:b})},s.createElement("div",{className:"k-list-content"},s.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:A},c.map((t,i)=>{const e=M(t),r={className:a.classNames("k-list-item",{"k-selected":e}),role:"option",key:i,id:P+i,"aria-selected":e,"data-uid":P+i,draggable:q,onDragStart:l=>{a.dispatchEvent(C,l,n(),{dataItem:t})},onDragOver:l=>{l.preventDefault(),a.dispatchEvent(F,l,n(),{dataItem:t})},onDrop:l=>{a.dispatchEvent(L,l,n(),{dataItem:t})},onClick:l=>{a.dispatchEvent(z,l,n(),{dataItem:t})}};return o.item?s.createElement(o.item,{selected:e,dataItem:t,...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},t.name)):s.createElement("li",{...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},_(t)))}))))),o.toolbar&&p==="bottom"&&s.createElement(o.toolbar,null),s.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},c.map((t,i)=>{const e=t[S||h];return s.createElement("option",{key:i,value:e},e)})))}),k={toolbarPosition:R.toolbarPosition.RIGHT,draggable:!0,size:"medium"};D.propTypes={size:u.oneOf([null,"small","medium","large"]),toolbarPosition:u.oneOf(["none","top","bottom","left","right"]),textField:u.string.isRequired,valueField:u.string,selectedField:u.string,data:u.array.isRequired};D.displayName="ListBoxInner";exports.ListBox=D;

package/ListBox.mjs

@@ -6,102 +6,164 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as e from "react";
-import r from "prop-types";
-import { dispatchEvent as o, validatePackage as m, kendoThemeMaps as u, classNames as h } from "@progress/kendo-react-common";
-import { toolbarPosition as d } from "./interfaces/Enums.mjs";
-import { packageMetadata as g } from "./package-metadata.mjs";
-const p = class p extends e.PureComponent {
-  constructor(l) {
-    super(l), 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 && o(this.props.onKeyDown, t, this, void 0);
-    }, this.handleContainerDrop = (t) => {
-      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 }));
-    }, this.setToolbarPosition = () => this.props.toolbarPosition === d.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") && o(this.props.onDragLeave, t, this, void 0);
-    }, m(g);
-  }
-  get itemGuid() {
-    return this.props.id + "-accessibility-id";
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const l = u.sizeMap[this.props.size] || this.props.size;
-    return /* @__PURE__ */ e.createElement(
+import * as a from "react";
+import f from "prop-types";
+import { validatePackage as V, kendoThemeMaps as j, Navigation as J, dispatchEvent as l, classNames as k } from "@progress/kendo-react-common";
+import { toolbarPosition as O } from "./interfaces/Enums.mjs";
+import { packageMetadata as Q } from "./package-metadata.mjs";
+const R = a.forwardRef((s, T) => {
+  V(Q);
+  const {
+    id: K,
+    style: F,
+    data: c,
+    textField: b,
+    className: L,
+    valueField: C,
+    selectedField: x,
+    onDrop: v,
+    onKeyDown: N,
+    onDragStart: z,
+    onDragLeave: p,
+    onDragOver: S,
+    onItemClick: A,
+    onItemSelect: d,
+    onKeyboardNavigate: m,
+    size: u = D.size,
+    draggable: B = D.draggable,
+    toolbarPosition: y = D.toolbarPosition
+  } = s, E = a.useRef(null), h = a.useRef(null), w = a.useRef(null), o = a.useCallback(() => ({
+    element: w.current,
+    props: s
+  }), []);
+  a.useImperativeHandle(h, o), a.useImperativeHandle(T, () => h.current);
+  const I = K + "-accessibility-id", P = j.sizeMap[u] || u, H = (t) => {
+    if (x)
+      return !!t[x];
+  }, M = (t) => b ? t[b] : t.toString(), _ = (t) => {
+    N && l(N, t, o(), void 0);
+  }, $ = (t) => {
+    t.target.classList.contains("k-list-content") && (s.data.length > 0 ? l(s.onDrop, t, o(), { dataItem: s.data[s.data.length - 1] }) : l(s.onDrop, t, o(), { dataItem: null }));
+  }, q = () => y === O.NONE || s.toolbar === void 0 ? "" : `k-listbox-actions-${y}`, G = (t) => {
+    p && t.target.classList.contains("k-list-content") && l(p, t, o(), void 0);
+  }, g = a.useMemo(
+    () => new J({
+      root: E,
+      selectors: [".k-list-item"],
+      tabIndex: 0,
+      keyboardEvents: {
+        keydown: {
+          Space: (t, i, e) => {
+            const r = i.elements.indexOf(t);
+            e.metaKey && l(d, e, o(), { dataItem: c[r] }), l(d, e, o(), { dataItem: c[r] });
+          },
+          ArrowDown: (t, i, e) => {
+            if (e.metaKey && e.shiftKey)
+              l(m, e, o(), { actionName: "moveDown" });
+            else if (e.metaKey && !e.shiftKey)
+              e.preventDefault(), i.focusNext(t);
+            else if (!(e.shiftKey && !e.metaKey)) {
+              e.preventDefault();
+              const r = i.elements.indexOf(t), n = c[r + 1];
+              n && (l(d, e, o(), { dataItem: n }), i.focusNext(t));
+            }
+          },
+          ArrowUp: (t, i, e) => {
+            if (e.metaKey && e.shiftKey)
+              l(m, e, o(), { actionName: "moveUp" });
+            else if (e.metaKey && !e.shiftKey)
+              e.preventDefault(), i.focusPrevious(t);
+            else if (!(e.shiftKey && !e.metaKey)) {
+              e.preventDefault();
+              const r = i.elements.indexOf(t), n = c[r - 1];
+              n && (l(d, e, o(), { dataItem: n }), i.focusPrevious(t));
+            }
+          },
+          ArrowLeft: (t, i, e) => {
+            e.metaKey && e.shiftKey ? l(m, e, o(), { actionName: "transferAllFrom" }) : e.metaKey && l(m, e, o(), { actionName: "transferFrom" });
+          },
+          ArrowRight: (t, i, e) => {
+            e.metaKey && e.shiftKey ? l(m, e, o(), { actionName: "transferAllTo" }) : e.metaKey && l(m, e, o(), { actionName: "transferTo" });
+          },
+          Backspace: (t, i, e) => {
+            l(m, e, o(), { actionName: "remove" });
+          }
+        }
+      }
+    }),
+    [c]
+  ), U = a.useCallback(g.triggerKeyboardEvent.bind(g), [c]);
+  return a.useEffect(() => (g.initializeRovingTab(), () => g.removeFocusListener()), [c]), /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      id: K,
+      ref: w,
+      style: F,
+      unselectable: "on",
+      className: k(
+        L,
+        "k-listbox",
+        { [`k-listbox-${P}`]: u },
+        q()
+      )
+    },
+    s.toolbar && y !== "bottom" && /* @__PURE__ */ a.createElement(s.toolbar, null),
+    /* @__PURE__ */ a.createElement(
       "div",
       {
-        id: this.props.id,
-        className: h(
-          this.props.className,
-          "k-listbox",
-          { [`k-listbox-${l}`]: this.props.size },
-          this.setToolbarPosition()
-        ),
-        style: this.props.style,
-        unselectable: "on"
+        className: "k-list-scroller k-selectable",
+        "data-role": "selectable",
+        ref: E,
+        onDragOver: (t) => t.preventDefault(),
+        onDrop: $,
+        onDragLeave: G,
+        onKeyDown: U
       },
-      this.props.toolbar && this.props.toolbarPosition !== "bottom" && /* @__PURE__ */ e.createElement(this.props.toolbar, null),
-      /* @__PURE__ */ e.createElement(
-        "div",
-        {
-          className: "k-list-scroller k-selectable",
-          "data-role": "selectable",
-          onDragOver: (t) => t.preventDefault(),
-          onDrop: this.handleContainerDrop,
-          onDragLeave: this.handleOnDragLeave
-        },
-        /* @__PURE__ */ e.createElement("div", { className: h("k-list", {
-          [`k-list-${l}`]: this.props.size
-        }) }, /* @__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) => {
-          const i = this.setSelected(t), n = {
-            className: h(
-              "k-list-item",
-              {
-                "k-selected": i
-              }
-            ),
-            role: "option",
-            "aria-selected": i,
-            key: a,
-            id: this.itemGuid + a,
-            "data-uid": this.itemGuid + a,
-            draggable: this.props.draggable,
-            onDragStart: (s) => o(this.props.onDragStart, s, this, { dataItem: t }),
-            onDragOver: (s) => {
-              s.preventDefault(), o(this.props.onDragOver, s, this, { dataItem: t });
-            },
-            onDrop: (s) => o(this.props.onDrop, s, this, { dataItem: t }),
-            onClick: (s) => o(this.props.onItemClick, s, this, { dataItem: t })
-          };
-          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)));
-        }))))
-      ),
-      this.props.toolbar && this.props.toolbarPosition === "bottom" && /* @__PURE__ */ e.createElement(this.props.toolbar, null),
-      /* @__PURE__ */ e.createElement("select", { style: { display: "none" }, multiple: !0, "data-role": "listbox" }, this.props.data.map((t, a) => {
-        const i = t[this.props.valueField || this.props.textField];
-        return /* @__PURE__ */ e.createElement("option", { key: a, value: i }, i);
-      }))
-    );
-  }
-};
-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.RIGHT,
+      /* @__PURE__ */ a.createElement("div", { className: k("k-list", { [`k-list-${P}`]: u }) }, /* @__PURE__ */ a.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ a.createElement("ul", { className: "k-list-ul", role: "listbox", "aria-label": "listbox-container", onKeyDown: _ }, c.map((t, i) => {
+        const e = H(t), r = {
+          className: k("k-list-item", { "k-selected": e }),
+          role: "option",
+          key: i,
+          id: I + i,
+          "aria-selected": e,
+          "data-uid": I + i,
+          draggable: B,
+          onDragStart: (n) => {
+            l(z, n, o(), { dataItem: t });
+          },
+          onDragOver: (n) => {
+            n.preventDefault(), l(S, n, o(), { dataItem: t });
+          },
+          onDrop: (n) => {
+            l(v, n, o(), { dataItem: t });
+          },
+          onClick: (n) => {
+            l(A, n, o(), { dataItem: t });
+          }
+        };
+        return s.item ? /* @__PURE__ */ a.createElement(s.item, { selected: e, dataItem: t, ...r, key: r.key }, /* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" }, t.name)) : /* @__PURE__ */ a.createElement("li", { ...r, key: r.key }, /* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" }, M(t)));
+      }))))
+    ),
+    s.toolbar && y === "bottom" && /* @__PURE__ */ a.createElement(s.toolbar, null),
+    /* @__PURE__ */ a.createElement("select", { style: { display: "none" }, multiple: !0, "data-role": "listbox" }, c.map((t, i) => {
+      const e = t[C || b];
+      return /* @__PURE__ */ a.createElement("option", { key: i, value: e }, e);
+    }))
+  );
+}), D = {
+  toolbarPosition: O.RIGHT,
   draggable: !0,
   size: "medium"
 };
-let c = p;
+R.propTypes = {
+  size: f.oneOf([null, "small", "medium", "large"]),
+  toolbarPosition: f.oneOf(["none", "top", "bottom", "left", "right"]),
+  textField: f.string.isRequired,
+  valueField: f.string,
+  selectedField: f.string,
+  data: f.array.isRequired
+};
+R.displayName = "ListBoxInner";
 export {
-  c as ListBox
+  R as ListBox
 };

package/ListBoxToolbar.js

@@ -5,4 +5,4 @@
  * 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"),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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),f=require("prop-types"),k=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-buttons"),j=require("@progress/kendo-react-intl"),o=require("@progress/kendo-svg-icons"),U=require("./messages/index.js");function _(l){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const i in l)if(i!=="default"){const b=Object.getOwnPropertyDescriptor(l,i);Object.defineProperty(g,i,b.get?b:{enumerable:!0,get:()=>l[i]})}}return g.default=l,Object.freeze(g)}const r=_(P),D=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:o.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:o.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:o.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:o.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:o.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:o.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:o.xIcon}],p=r.forwardRef((l,g)=>{const{tools:i,dir:b,onToolClick:w,size:L=h.size,data:d=h.data,dataConnected:n=h.dataConnected,selectedField:C=h.selectedField}=l,F=j.useLocalization(),A=r.useRef(null),T=r.useRef(null),x=r.useCallback(()=>({onToolClick:w,props:l,context:{},state:{},refs:{}}),[]);r.useImperativeHandle(T,x),r.useImperativeHandle(g,()=>T.current);const y=(t,e,c)=>{c.preventDefault(),e.focusNext(t)},N=(t,e,c)=>{c.preventDefault(),e.focusPrevious(t)},v=r.useMemo(()=>new k.Navigation({root:A,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:y,ArrowRight:y,ArrowUp:N,ArrowLeft:N,Enter:(t,e,c)=>{t.click(),e.focusElement(e.current,t)}}}}),[]),S=r.useCallback(v.triggerKeyboardEvent.bind(v),[]);r.useEffect(()=>(v.initializeRovingTab(),()=>v.removeFocusListener()),[]);const q=t=>{switch(t.name){case"caret-alt-right":return o.caretAltLeftIcon;case"caret-alt-left":return o.caretAltRightIcon;case"caret-double-alt-right":return o.caretDoubleAltLeftIcon;case"caret-double-alt-left":return o.caretDoubleAltRightIcon}return t},E=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},O=(t,e)=>{k.dispatchEvent(w,t,x(),{toolName:e})},z=t=>{let e=!0;const c=C||"selected",a=d.length,I=n.length,u=d.findIndex(s=>s[c]===!0)>=0,m=n.findIndex(s=>s[c]===!0)>=0;switch(t){case"moveUp":u?e=d.length>0?d[0].selected:!0:m?e=n.length>0?n[0].selected:!0:e=!0;break;case"moveDown":u?e=d[a-1]?d[a-1].selected:!0:m?e=n.length>0?n[I-1].selected:!0:e=!0;break;case"transferTo":e=!(n&&u);break;case"transferFrom":n?e=!(n&&m):e=!0;break;case"transferAllTo":e=!(n&&d.length>0);break;case"transferAllFrom":e=!(n&&n.length>0);break;case"remove":e=!(u||m);break}return e},R=b==="rtl";return r.createElement("div",{className:k.classNames("k-listbox-actions"),ref:A,onKeyDown:S},i&&i.map((t,e)=>{const c=D.findIndex(s=>s.name===t),a=D[c],I=z(a.name),u=`listbox.${a.name}`,m=F.toLanguageString(u,U.messages[u]);return r.createElement(B.Button,{size:L,key:e,disabled:I,"data-command":a.name,title:m,"aria-label":m,icon:R?E(a.iconName):a.iconName,svgIcon:R?q(a.svgIcon):a.svgIcon,onClick:s=>{s.preventDefault(),O(s,a.name)}})}))}),h={data:[],dataConnected:[],selectedField:"selected",size:"medium"};p.propTypes={data:f.array.isRequired,dataConnected:f.array.isRequired,tools:f.array,selectedField:f.string,dir:f.string,size:f.oneOf([null,"small","medium","large"])};p.displayName="ListBoxToolbarInner";exports.ListBoxToolbar=p;

package/ListBoxToolbar.mjs

@@ -6,130 +6,150 @@
  *-------------------------------------------------------------------------------------------
  */
 "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", 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;
-      switch (t) {
-        case "moveUp":
-          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;
-          break;
-        case "moveDown":
-          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;
-          break;
-        case "transferTo":
-          e = !(this.props.dataConnected && r);
-          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 = !(r || s);
-          break;
+import * as n from "react";
+import d from "prop-types";
+import { Navigation as K, classNames as q, dispatchEvent as O } from "@progress/kendo-react-common";
+import { Button as M } from "@progress/kendo-react-buttons";
+import { useLocalization as _ } from "@progress/kendo-react-intl";
+import { caretAltUpIcon as $, caretAltDownIcon as j, caretAltRightIcon as T, caretAltLeftIcon as A, caretDoubleAltRightIcon as y, caretDoubleAltLeftIcon as D, xIcon as G } from "@progress/kendo-svg-icons";
+import { messages as J } from "./messages/index.mjs";
+const N = [
+  { name: "moveUp", iconName: "caret-alt-up", svgIcon: $ },
+  { name: "moveDown", iconName: "caret-alt-down", svgIcon: j },
+  { name: "transferTo", iconName: "caret-alt-right", svgIcon: T },
+  { name: "transferFrom", iconName: "caret-alt-left", svgIcon: A },
+  { name: "transferAllTo", iconName: "caret-double-alt-right", svgIcon: y },
+  { name: "transferAllFrom", iconName: "caret-double-alt-left", svgIcon: D },
+  { name: "remove", iconName: "x", svgIcon: G }
+], F = n.forwardRef((g, L) => {
+  const {
+    tools: b,
+    dir: R,
+    onToolClick: v,
+    size: C = m.size,
+    data: l = m.data,
+    dataConnected: a = m.dataConnected,
+    selectedField: E = m.selectedField
+  } = g, z = _(), h = n.useRef(null), p = n.useRef(null), I = n.useCallback(() => ({
+    onToolClick: v,
+    props: g,
+    context: {},
+    state: {},
+    refs: {}
+  }), []);
+  n.useImperativeHandle(p, I), n.useImperativeHandle(L, () => p.current);
+  const k = (t, e, o) => {
+    o.preventDefault(), e.focusNext(t);
+  }, w = (t, e, o) => {
+    o.preventDefault(), e.focusPrevious(t);
+  }, u = n.useMemo(
+    () => new K({
+      root: h,
+      selectors: [".k-button:not([disabled])"],
+      tabIndex: 0,
+      keyboardEvents: {
+        keydown: {
+          ArrowDown: k,
+          ArrowRight: k,
+          ArrowUp: w,
+          ArrowLeft: w,
+          Enter: (t, e, o) => {
+            t.click(), e.focusElement(e.current, t);
+          }
+        }
       }
-      return e;
-    };
-  }
-  get isRtl() {
-    return this.props.dir === "rtl";
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const t = k(this);
-    return /* @__PURE__ */ p.createElement(
-      "div",
+    }),
+    []
+  ), S = n.useCallback(u.triggerKeyboardEvent.bind(u), []);
+  n.useEffect(() => (u.initializeRovingTab(), () => u.removeFocusListener()), []);
+  const B = (t) => {
+    switch (t.name) {
+      case "caret-alt-right":
+        return A;
+      case "caret-alt-left":
+        return T;
+      case "caret-double-alt-right":
+        return D;
+      case "caret-double-alt-left":
+        return y;
+    }
+    return t;
+  }, P = (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;
+  }, U = (t, e) => {
+    O(v, t, I(), { toolName: e });
+  }, H = (t) => {
+    let e = !0;
+    const o = E || "selected", r = l.length, f = a.length, s = l.findIndex((c) => c[o] === !0) >= 0, i = a.findIndex((c) => c[o] === !0) >= 0;
+    switch (t) {
+      case "moveUp":
+        s ? e = l.length > 0 ? l[0].selected : !0 : i ? e = a.length > 0 ? a[0].selected : !0 : e = !0;
+        break;
+      case "moveDown":
+        s ? e = l[r - 1] ? l[r - 1].selected : !0 : i ? e = a.length > 0 ? a[f - 1].selected : !0 : e = !0;
+        break;
+      case "transferTo":
+        e = !(a && s);
+        break;
+      case "transferFrom":
+        a ? e = !(a && i) : e = !0;
+        break;
+      case "transferAllTo":
+        e = !(a && l.length > 0);
+        break;
+      case "transferAllFrom":
+        e = !(a && a.length > 0);
+        break;
+      case "remove":
+        e = !(s || i);
+        break;
+    }
+    return e;
+  }, x = R === "rtl";
+  return /* @__PURE__ */ n.createElement("div", { className: q("k-listbox-actions"), ref: h, onKeyDown: S }, b && b.map((t, e) => {
+    const o = N.findIndex((c) => c.name === t), r = N[o], f = H(r.name), s = `listbox.${r.name}`, i = z.toLanguageString(s, J[s]);
+    return /* @__PURE__ */ n.createElement(
+      M,
       {
-        className: b(
-          "k-listbox-actions"
-        )
-      },
-      this.props.tools && this.props.tools.map((e, c) => {
-        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]);
-        return /* @__PURE__ */ p.createElement(
-          C,
-          {
-            size: this.props.size,
-            key: c,
-            disabled: r,
-            "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: (l) => {
-              l.preventDefault(), this.handleToolClick(l, a.name || null);
-            }
-          }
-        );
-      })
+        size: C,
+        key: e,
+        disabled: f,
+        "data-command": r.name,
+        title: i,
+        "aria-label": i,
+        icon: x ? P(r.iconName) : r.iconName,
+        svgIcon: x ? B(r.svgIcon) : r.svgIcon,
+        onClick: (c) => {
+          c.preventDefault(), U(c, r.name);
+        }
+      }
     );
-  }
-};
-d.propTypes = {
-  data: n.array,
-  dataConnected: n.array,
-  tools: n.array,
-  selectedField: n.string,
-  dir: n.string,
-  size: n.oneOf([null, "small", "medium", "large"])
-}, d.defaultProps = {
+  }));
+}), m = {
   data: [],
   dataConnected: [],
   selectedField: "selected",
   size: "medium"
 };
-let h = d;
-N(h);
+F.propTypes = {
+  data: d.array.isRequired,
+  dataConnected: d.array.isRequired,
+  tools: d.array,
+  selectedField: d.string,
+  dir: d.string,
+  size: d.oneOf([null, "small", "medium", "large"])
+};
+F.displayName = "ListBoxToolbarInner";
 export {
-  h as ListBoxToolbar
+  F as ListBoxToolbar
 };

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

@@ -5,4 +5,4 @@
  * 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(){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}}}));
+!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,a,o,n,r,s){"use strict";function l(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var i=l(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const d={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},m=i.forwardRef(((e,t)=>{o.validatePackage(d);const{id:a,style:n,data:r,textField:s,className:l,valueField:m,selectedField:f,onDrop:p,onKeyDown:v,onDragStart:b,onDragLeave:g,onDragOver:x,onItemClick:D,onItemSelect:h,onKeyboardNavigate:k,size:y=u.size,draggable:I=u.draggable,toolbarPosition:E=u.toolbarPosition}=e,w=i.useRef(null),T=i.useRef(null),N=i.useRef(null),B=i.useCallback((()=>({element:N.current,props:e})),[]);i.useImperativeHandle(T,B),i.useImperativeHandle(t,(()=>T.current));const O=a+"-accessibility-id",K=o.kendoThemeMaps.sizeMap[y]||y,A=i.useMemo((()=>new o.Navigation({root:w,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,a)=>{const n=t.elements.indexOf(e);a.metaKey&&o.dispatchEvent(h,a,B(),{dataItem:r[n]}),o.dispatchEvent(h,a,B(),{dataItem:r[n]})},ArrowDown:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(k,a,B(),{actionName:"moveDown"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusNext(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),s=r[n+1];s&&(o.dispatchEvent(h,a,B(),{dataItem:s}),t.focusNext(e))}},ArrowUp:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(k,a,B(),{actionName:"moveUp"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusPrevious(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),s=r[n-1];s&&(o.dispatchEvent(h,a,B(),{dataItem:s}),t.focusPrevious(e))}},ArrowLeft:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(k,a,B(),{actionName:"transferAllFrom"}):a.metaKey&&o.dispatchEvent(k,a,B(),{actionName:"transferFrom"})},ArrowRight:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(k,a,B(),{actionName:"transferAllTo"}):a.metaKey&&o.dispatchEvent(k,a,B(),{actionName:"transferTo"})},Backspace:(e,t,a)=>{o.dispatchEvent(k,a,B(),{actionName:"remove"})}}}})),[r]),R=i.useCallback(A.triggerKeyboardEvent.bind(A),[r]);return i.useEffect((()=>(A.initializeRovingTab(),()=>A.removeFocusListener())),[r]),i.createElement("div",{id:a,ref:N,style:n,unselectable:"on",className:o.classNames(l,"k-listbox",{[`k-listbox-${K}`]:y},E===c.NONE||void 0===e.toolbar?"":`k-listbox-actions-${E}`)},e.toolbar&&"bottom"!==E&&i.createElement(e.toolbar,null),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:w,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?o.dispatchEvent(e.onDrop,t,B(),{dataItem:e.data[e.data.length-1]}):o.dispatchEvent(e.onDrop,t,B(),{dataItem:null}))},onDragLeave:e=>{g&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(g,e,B(),void 0)},onKeyDown:R},i.createElement("div",{className:o.classNames("k-list",{[`k-list-${K}`]:y})},i.createElement("div",{className:"k-list-content"},i.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:e=>{v&&o.dispatchEvent(v,e,B(),void 0)}},r.map(((t,a)=>{const n=(e=>{if(f)return!!e[f]})(t),r={className:o.classNames("k-list-item",{"k-selected":n}),role:"option",key:a,id:O+a,"aria-selected":n,"data-uid":O+a,draggable:I,onDragStart:e=>{o.dispatchEvent(b,e,B(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),o.dispatchEvent(x,e,B(),{dataItem:t})},onDrop:e=>{o.dispatchEvent(p,e,B(),{dataItem:t})},onClick:e=>{o.dispatchEvent(D,e,B(),{dataItem:t})}};return e.item?i.createElement(e.item,{selected:n,dataItem:t,...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},t.name)):i.createElement("li",{...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},(e=>s?e[s]:e.toString())(t)))})))))),e.toolbar&&"bottom"===E&&i.createElement(e.toolbar,null),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},r.map(((e,t)=>{const a=e[m||s];return i.createElement("option",{key:t,value:a},a)}))))})),u={toolbarPosition:c.RIGHT,draggable:!0,size:"medium"};m.propTypes={size:a.oneOf([null,"small","medium","large"]),toolbarPosition:a.oneOf(["none","top","bottom","left","right"]),textField:a.string.isRequired,valueField:a.string,selectedField:a.string,data:a.array.isRequired},m.displayName="ListBoxInner";const f={"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"},p=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:s.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:s.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:s.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:s.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:s.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:s.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:s.xIcon}],v=i.forwardRef(((e,t)=>{const{tools:a,dir:l,onToolClick:c,size:d=b.size,data:m=b.data,dataConnected:u=b.dataConnected,selectedField:v=b.selectedField}=e,g=r.useLocalization(),x=i.useRef(null),D=i.useRef(null),h=i.useCallback((()=>({onToolClick:c,props:e,context:{},state:{},refs:{}})),[]);i.useImperativeHandle(D,h),i.useImperativeHandle(t,(()=>D.current));const k=(e,t,a)=>{a.preventDefault(),t.focusNext(e)},y=(e,t,a)=>{a.preventDefault(),t.focusPrevious(e)},I=i.useMemo((()=>new o.Navigation({root:x,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:k,ArrowRight:k,ArrowUp:y,ArrowLeft:y,Enter:(e,t,a)=>{e.click(),t.focusElement(t.current,e)}}}})),[]),E=i.useCallback(I.triggerKeyboardEvent.bind(I),[]);i.useEffect((()=>(I.initializeRovingTab(),()=>I.removeFocusListener())),[]);const w=e=>{switch(e.name){case"caret-alt-right":return s.caretAltLeftIcon;case"caret-alt-left":return s.caretAltRightIcon;case"caret-double-alt-right":return s.caretDoubleAltLeftIcon;case"caret-double-alt-left":return s.caretDoubleAltRightIcon}return e},T=e=>{switch(e){case"caret-alt-right":return"caret-alt-left";case"caret-alt-left":return"caret-alt-right";case"caret-double-alt-right":return"caret-double-alt-left";case"caret-double-alt-left":return"caret-double-alt-right"}return e},N="rtl"===l;return i.createElement("div",{className:o.classNames("k-listbox-actions"),ref:x,onKeyDown:E},a&&a.map(((e,t)=>{const a=p.findIndex((t=>t.name===e)),r=p[a],s=(e=>{let t=!0;const a=v||"selected",o=m.length,n=u.length,r=m.findIndex((e=>!0===e[a]))>=0,s=u.findIndex((e=>!0===e[a]))>=0;switch(e){case"moveUp":t=r?!(m.length>0)||m[0].selected:!s||!(u.length>0)||u[0].selected;break;case"moveDown":t=r?!m[o-1]||m[o-1].selected:!s||!(u.length>0)||u[n-1].selected;break;case"transferTo":t=!(u&&r);break;case"transferFrom":t=!u||!(u&&s);break;case"transferAllTo":t=!(u&&m.length>0);break;case"transferAllFrom":t=!(u&&u.length>0);break;case"remove":t=!(r||s)}return t})(r.name),l=`listbox.${r.name}`,b=g.toLanguageString(l,f[l]);return i.createElement(n.Button,{size:d,key:t,disabled:s,"data-command":r.name,title:b,"aria-label":b,icon:N?T(r.iconName):r.iconName,svgIcon:N?w(r.svgIcon):r.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{o.dispatchEvent(c,e,h(),{toolName:t})})(e,r.name)}})})))})),b={data:[],dataConnected:[],selectedField:"selected",size:"medium"};v.propTypes={data:a.array.isRequired,dataConnected:a.array.isRequired,tools:a.array,selectedField:a.string,dir:a.string,size:a.oneOf([null,"small","medium","large"])},v.displayName="ListBoxToolbarInner";const g=(e,t,a)=>{const o=a.splice(e,1)[0];return a.splice(t,0,o),a},x=o.withIdHOC(m);x.displayName="KendoReactListBox",e.ListBox=x,e.ListBoxToolbar=v,e.moveItem=g,e.processListBoxData=(e=[],t=[],a,o)=>{let n=[],r=[],s=[];const l={listBoxOneData:e,listBoxTwoData:t};switch(a){case"moveUp":n=[...e],n.forEach(((e,t)=>{e[o]&&(n=g(t,t-1,n))})),s=[...t],s.forEach(((e,t)=>{e[o]&&(s=g(t,t-1,s))})),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach(((e,t)=>{e[o]&&(n=g(t,t-1,n))})),s=t.reverse(),s.forEach(((e,t)=>{e[o]&&(s=g(t,t-1,s))})),l.listBoxOneData=[...n].reverse(),l.listBoxTwoData=[...s].reverse();break;case"transferTo":n=e.filter((e=>!e[o])),r=e.filter((e=>e[o])),s=t.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferFrom":s=t.filter((e=>!e[o])),r=t.filter((e=>e[o])),n=e.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":s=t.filter((e=>!e[o])),n=e.filter((e=>!e[o])),l.listBoxOneData=n,l.listBoxTwoData=s}return l},e.processListBoxDragAndDrop=(e=[],t=[],a,o,n)=>{const r=e.findIndex((e=>e[n]===a[n])),s=t.findIndex((e=>e[n]===a[n])),l=null!==o?e.findIndex((e=>e[n]===o[n])):-1,i=null!==o?t.findIndex((e=>e[n]===o[n])):-1,c=r>=0,d=s>=0,m=l>=0,u=i>=0,f=[...e],p=[...t];return c&&m?{listBoxOneData:g(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:g(s,i,t)}:c&&(u||null===o)?(null===o?p.push(e[r]):p.splice(i+1,0,e[r]),f.splice(r,1),{listBoxOneData:f,listBoxTwoData:p}):d&&(m||null===o)?(null===o?f.push(t[s]):f.splice(l+1,0,t[s]),p.splice(s,1),{listBoxOneData:f,listBoxTwoData:p}):{listBoxOneData:e,listBoxTwoData:t}}}));

package/index.d.mts

@@ -8,56 +8,50 @@
 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[]>;
-    };
+declare const ListBox_2: React_2.ForwardRefExoticComponent<ListBoxProps & React_2.RefAttributes<ListBoxHandle | null>>;
+
+/** @hidden */
+declare type ListBox_2 = ListBoxHandle;
+
+export declare interface ListBoxDragEvent extends BaseEvent<ListBox_2> {
+    dataItem?: any;
+}
+
+declare interface ListBoxDragLeaveEvent extends BaseEvent<ListBox_2> {
+}
+
+export declare interface ListBoxEvent extends BaseEvent<ListBox_2> {
+}
+
+/**
+ * The ListBox ref.
+ */
+declare interface ListBoxHandle {
     /**
-     * @hidden
+     * The current element or `null` if there is no one.
      */
-    static defaultProps: {
-        toolbarPosition: toolbarPosition;
-        draggable: boolean;
-        size: string;
-    };
-    private get itemGuid();
-    constructor(props: ListBoxProps);
+    element: HTMLDivElement | null;
     /**
-     * @hidden
+     * The props value of the ListBox.
      */
-    render(): JSX_2.Element;
-    private setSelected;
-    private renderItem;
-    private handleKeyDown;
-    private handleContainerDrop;
-    private setToolbarPosition;
-    private handleOnDragLeave;
+    props: ListBoxProps;
 }
 
-export declare interface ListBoxDragEvent extends BaseEvent<ListBox_2> {
+export declare interface ListBoxItemClickEvent extends BaseEvent<ListBox_2> {
     dataItem?: any;
 }
 
-declare interface ListBoxDragLeaveEvent extends BaseEvent<ListBox_2> {
+export declare interface ListBoxItemNavigateEvent extends BaseEvent<ListBox_2> {
+    actionName?: string;
 }
 
-export declare interface ListBoxItemClickEvent extends BaseEvent<ListBox_2> {
+export declare interface ListBoxItemSelectEvent extends BaseEvent<ListBox_2> {
     dataItem?: any;
 }
 
@@ -134,6 +128,10 @@ export declare interface ListBoxProps {
      * Fires when an item from the ListBox is clicked. Contains the clicked item.
      */
     onItemClick?: (event: ListBoxItemClickEvent) => void;
+    /**
+     * Fires when an item from the ListBox is selected. Contains the selected item.
+     */
+    onItemSelect?: (event: ListBoxItemSelectEvent) => void;
     /**
      * Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
      */
@@ -154,44 +152,35 @@ export declare interface ListBoxProps {
      * 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>;
-        size: PropTypes.Requireable<string | null>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        data: never[];
-        dataConnected: never[];
-        selectedField: string;
-        size: string;
-    };
-    private get isRtl();
     /**
-     * @hidden
+     * Fires when keyboard navigation action is triggered.
      */
-    render(): JSX_2.Element;
-    private checkSvgIcon;
-    private checkFontIcon;
-    private handleToolClick;
-    private isItemDisabled;
+    onKeyboardNavigate?: (event: ListBoxItemNavigateEvent) => void;
 }
 
+export declare const ListBoxToolbar: React_2.ForwardRefExoticComponent<ListBoxToolbarProps & React_2.RefAttributes<ListBoxToolbarHandle | null>>;
+
+/** @hidden */
+export declare type ListBoxToolbar = ListBoxToolbarHandle;
+
 export declare interface ListBoxToolbarClickEvent extends BaseEvent<ListBoxToolbar> {
     toolName?: string;
 }
 
+declare interface ListBoxToolbarEvent extends BaseEvent<ListBoxToolbar> {
+}
+
+/**
+ * @hidden
+ */
+declare interface ListBoxToolbarHandle {
+    onToolClick?: (event: ListBoxToolbarEvent) => void;
+    props: ListBoxToolbarProps;
+    context: {};
+    state: {};
+    refs: {};
+}
+
 export declare interface ListBoxToolbarProps {
     /**
      * Sets the tools of the ListBoxToolbar. By default, the ListBoxToolbar renders no tools.

package/index.d.ts

@@ -8,56 +8,50 @@
 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[]>;
-    };
+declare const ListBox_2: React_2.ForwardRefExoticComponent<ListBoxProps & React_2.RefAttributes<ListBoxHandle | null>>;
+
+/** @hidden */
+declare type ListBox_2 = ListBoxHandle;
+
+export declare interface ListBoxDragEvent extends BaseEvent<ListBox_2> {
+    dataItem?: any;
+}
+
+declare interface ListBoxDragLeaveEvent extends BaseEvent<ListBox_2> {
+}
+
+export declare interface ListBoxEvent extends BaseEvent<ListBox_2> {
+}
+
+/**
+ * The ListBox ref.
+ */
+declare interface ListBoxHandle {
     /**
-     * @hidden
+     * The current element or `null` if there is no one.
      */
-    static defaultProps: {
-        toolbarPosition: toolbarPosition;
-        draggable: boolean;
-        size: string;
-    };
-    private get itemGuid();
-    constructor(props: ListBoxProps);
+    element: HTMLDivElement | null;
     /**
-     * @hidden
+     * The props value of the ListBox.
      */
-    render(): JSX_2.Element;
-    private setSelected;
-    private renderItem;
-    private handleKeyDown;
-    private handleContainerDrop;
-    private setToolbarPosition;
-    private handleOnDragLeave;
+    props: ListBoxProps;
 }
 
-export declare interface ListBoxDragEvent extends BaseEvent<ListBox_2> {
+export declare interface ListBoxItemClickEvent extends BaseEvent<ListBox_2> {
     dataItem?: any;
 }
 
-declare interface ListBoxDragLeaveEvent extends BaseEvent<ListBox_2> {
+export declare interface ListBoxItemNavigateEvent extends BaseEvent<ListBox_2> {
+    actionName?: string;
 }
 
-export declare interface ListBoxItemClickEvent extends BaseEvent<ListBox_2> {
+export declare interface ListBoxItemSelectEvent extends BaseEvent<ListBox_2> {
     dataItem?: any;
 }
 
@@ -134,6 +128,10 @@ export declare interface ListBoxProps {
      * Fires when an item from the ListBox is clicked. Contains the clicked item.
      */
     onItemClick?: (event: ListBoxItemClickEvent) => void;
+    /**
+     * Fires when an item from the ListBox is selected. Contains the selected item.
+     */
+    onItemSelect?: (event: ListBoxItemSelectEvent) => void;
     /**
      * Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
      */
@@ -154,44 +152,35 @@ export declare interface ListBoxProps {
      * 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>;
-        size: PropTypes.Requireable<string | null>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        data: never[];
-        dataConnected: never[];
-        selectedField: string;
-        size: string;
-    };
-    private get isRtl();
     /**
-     * @hidden
+     * Fires when keyboard navigation action is triggered.
      */
-    render(): JSX_2.Element;
-    private checkSvgIcon;
-    private checkFontIcon;
-    private handleToolClick;
-    private isItemDisabled;
+    onKeyboardNavigate?: (event: ListBoxItemNavigateEvent) => void;
 }
 
+export declare const ListBoxToolbar: React_2.ForwardRefExoticComponent<ListBoxToolbarProps & React_2.RefAttributes<ListBoxToolbarHandle | null>>;
+
+/** @hidden */
+export declare type ListBoxToolbar = ListBoxToolbarHandle;
+
 export declare interface ListBoxToolbarClickEvent extends BaseEvent<ListBoxToolbar> {
     toolName?: string;
 }
 
+declare interface ListBoxToolbarEvent extends BaseEvent<ListBoxToolbar> {
+}
+
+/**
+ * @hidden
+ */
+declare interface ListBoxToolbarHandle {
+    onToolClick?: (event: ListBoxToolbarEvent) => void;
+    props: ListBoxToolbarProps;
+    context: {};
+    state: {};
+    refs: {};
+}
+
 export declare interface ListBoxToolbarProps {
     /**
      * Sets the tools of the ListBoxToolbar. By default, the ListBoxToolbar renders no tools.

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-listbox",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1719500818,
+  publishDate: 1719912182,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-listbox",
-  "version": "8.1.1",
+  "version": "8.2.0-develop.2",
   "description": "React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,9 +23,9 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-buttons": "8.1.1",
-    "@progress/kendo-react-common": "8.1.1",
-    "@progress/kendo-react-intl": "8.1.1",
+    "@progress/kendo-react-buttons": "8.2.0-develop.2",
+    "@progress/kendo-react-common": "8.2.0-develop.2",
+    "@progress/kendo-react-intl": "8.2.0-develop.2",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/utils.mjs

@@ -8,10 +8,7 @@
 "use client";
 const k = (t = [], e = [], I, c) => {
   let r = [], i = [], s = [];
-  const f = {
-    listBoxOneData: t,
-    listBoxTwoData: e
-  };
+  const f = { listBoxOneData: t, listBoxTwoData: e };
   switch (I) {
     case "moveUp":
       r = [...t], r.forEach((n, o) => {