@progress/kendo-react-listbox 6.1.1 → 7.0.0-develop.2

package/index.d.ts

@@ -0,0 +1,11 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ListBox } from './ListBox';
+import { type ListBoxProps } from './interfaces/ListBoxProps';
+import { ListBoxToolbar } from './ListBoxToolbar';
+import { type ListBoxToolbarProps } from './interfaces/ListBoxToolBarProps';
+import { processListBoxData, moveItem, processListBoxDragAndDrop } from './utils';
+import { type ListBoxDragEvent, type ListBoxItemClickEvent, type ListBoxKeyDownEvent, type ListBoxToolbarClickEvent } from './interfaces/ListBoxEvents';
+export { ListBox, ListBoxProps, ListBoxToolbar, ListBoxToolbarProps, processListBoxData, moveItem, processListBoxDragAndDrop, ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent };

package/index.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react"),y=require("prop-types"),d=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-buttons"),N=require("@progress/kendo-react-intl"),h=require("@progress/kendo-svg-icons");function C(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const p=C(x),m=C(y);var I=(o=>(o.TOP="top",o.BOTTOM="bottom",o.LEFT="left",o.RIGHT="right",o.NONE="none",o))(I||{});const S={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};class k extends p.PureComponent{constructor(e){super(e),this.setSelected=t=>{if(this.props.selectedField)return!!t[this.props.selectedField]},this.renderItem=t=>this.props.textField?t[this.props.textField]:t.toString(),this.handleKeyDown=t=>{this.props.onKeyDown&&d.dispatchEvent(this.props.onKeyDown,t,this,void 0)},this.handleContainerDrop=t=>{t.target.classList.contains("k-list-scroller")&&(this.props.data.length>0?d.dispatchEvent(this.props.onDrop,t,this,{dataItem:this.props.data[this.props.data.length-1]}):d.dispatchEvent(this.props.onDrop,t,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===I.NONE||this.props.toolbar===void 0?"":`k-listbox-actions-${this.props.toolbarPosition}`,this.handleOnDragLeave=t=>{this.props.onDragLeave&&t.target.classList.contains("k-list-scroller")&&d.dispatchEvent(this.props.onDragLeave,t,this,void 0)},d.validatePackage(S)}render(){return p.createElement("div",{className:d.classNames(this.props.className,"k-listbox",this.setToolbarPosition()),style:this.props.style,unselectable:"on"},this.props.toolbar&&this.props.toolbarPosition!=="bottom"&&p.createElement(this.props.toolbar,null),p.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",onDragOver:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragLeave:this.handleOnDragLeave},p.createElement("div",{className:d.classNames("k-list",{[`k-list-${d.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},p.createElement("div",{className:"k-list-content"},p.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",tabIndex:0,onKeyDown:this.handleKeyDown},this.props.data.map((e,t)=>{const r=this.setSelected(e),a=d.guid(),c={className:d.classNames("k-list-item",{"k-selected":r}),role:"option","aria-selected":r,key:t,id:a+t,"data-uid":a+t,draggable:this.props.draggable,onDragStart:s=>d.dispatchEvent(this.props.onDragStart,s,this,{dataItem:e}),onDragOver:s=>{s.preventDefault(),d.dispatchEvent(this.props.onDragOver,s,this,{dataItem:e})},onDrop:s=>d.dispatchEvent(this.props.onDrop,s,this,{dataItem:e}),onClick:s=>d.dispatchEvent(this.props.onItemClick,s,this,{dataItem:e})};return this.props.item?p.createElement(this.props.item,{selected:r,dataItem:e,...c},p.createElement("span",{className:"k-list-item-text"},e.name)):p.createElement("li",{...c},p.createElement("span",{className:"k-list-item-text"},this.renderItem(e)))}))))),this.props.toolbar&&this.props.toolbarPosition==="bottom"&&p.createElement(this.props.toolbar,null),p.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},this.props.data.map((e,t)=>{const r=e[this.props.valueField||this.props.textField];return p.createElement("option",{key:t,value:r},r)})))}}k.propTypes={size:m.oneOf([null,"small","medium","large"]),toolbarPosition:m.oneOf(["none","top","bottom","left","right"]),textField:m.string,valueField:m.string,selectedField:m.string,data:m.array};k.defaultProps={toolbarPosition:I.RIGHT,draggable:!0,size:"medium"};const w="listbox.moveUp",F="listbox.moveDown",O="listbox.transferTo",P="listbox.transferFrom",R="listbox.transferAllTo",z="listbox.transferAllFrom",U="listbox.remove",K={[w]:"Move Up",[F]:"Move Down",[O]:"Transfer To",[P]:"Transfer From",[R]:"Transfer All To",[z]:"Transfer All From",[U]:"Delete"},L=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:h.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:h.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:h.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:h.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:h.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:h.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:h.xIcon}];class v extends p.PureComponent{constructor(){super(...arguments),this.checkSvgIcon=e=>{switch(e.name){case"caret-alt-right":return h.caretAltLeftIcon;case"caret-alt-left":return h.caretAltRightIcon;case"caret-double-alt-right":return h.caretDoubleAltLeftIcon;case"caret-double-alt-left":return h.caretDoubleAltRightIcon}return e},this.checkFontIcon=e=>{switch(e){case"caret-alt-right":return"caret-alt-left";case"caret-alt-left":return"caret-alt-right";case"caret-double-alt-right":return"caret-double-alt-left";case"caret-double-alt-left":return"caret-double-alt-right"}return e},this.handleToolClick=(e,t)=>{d.dispatchEvent(this.props.onToolClick,e,this,{toolName:t})},this.isItemDisabled=e=>{let t=!0;const r=this.props.selectedField||"selected",a=this.props.data.length,c=this.props.dataConnected.length,s=this.props.data.findIndex(n=>n[r]===!0)>=0,i=this.props.dataConnected.findIndex(n=>n[r]===!0)>=0;switch(e){case"moveUp":s?t=this.props.data.length>0?this.props.data[0].selected:!0:i?t=this.props.dataConnected.length>0?this.props.dataConnected[0].selected:!0:t=!0;break;case"moveDown":s?t=this.props.data[a-1]?this.props.data[a-1].selected:!0:i?t=this.props.dataConnected.length>0?this.props.dataConnected[c-1].selected:!0:t=!0;break;case"transferTo":t=!(this.props.dataConnected&&s);break;case"transferFrom":this.props.dataConnected?t=!(this.props.dataConnected&&i):t=!0;break;case"transferAllTo":t=!(this.props.dataConnected&&this.props.data.length>0);break;case"transferAllFrom":t=!(this.props.dataConnected&&this.props.dataConnected.length>0);break;case"remove":t=!(s||i);break}return t}}get isRtl(){return this.props.dir==="rtl"}render(){const e=N.provideLocalizationService(this);return p.createElement("div",{className:d.classNames("k-listbox-actions")},this.props.tools&&this.props.tools.map((t,r)=>{const a=L.findIndex(l=>l.name===t),c=L[a],s=this.isItemDisabled(c.name),i=`listbox.${c.name}`,n=e.toLanguageString(i,K[i]);return p.createElement(A.Button,{key:r,disabled:s,"data-command":c.name,title:n,"aria-label":n,icon:this.isRtl?this.checkFontIcon(c.iconName):c.iconName,svgIcon:this.isRtl?this.checkSvgIcon(c.svgIcon):c.svgIcon,onClick:l=>{l.preventDefault(),this.handleToolClick(l,c.name||null)}})}))}}v.propTypes={data:m.array,dataConnected:m.array,tools:m.array,selectedField:m.string,dir:m.string};v.defaultProps={data:[],dataConnected:[],selectedField:"selected"};N.registerForLocalization(v);const M=(o=[],e=[],t,r)=>{let a=[],c=[],s=[];const i={listBoxOneData:o,listBoxTwoData:e};switch(t){case"moveUp":a=[...o],a.forEach((n,l)=>{n[r]&&(a=f(l,l-1,a))}),s=[...e],s.forEach((n,l)=>{n[r]&&(s=f(l,l-1,s))}),i.listBoxOneData=a,i.listBoxTwoData=s;break;case"moveDown":a=o.reverse(),a.forEach((n,l)=>{n[r]&&(a=f(l,l-1,a))}),s=e.reverse(),s.forEach((n,l)=>{n[r]&&(s=f(l,l-1,s))}),i.listBoxOneData=[...a].reverse(),i.listBoxTwoData=[...s].reverse();break;case"transferTo":a=o.filter(n=>!n[r]),c=o.filter(n=>n[r]),s=e.concat(c),i.listBoxOneData=a,i.listBoxTwoData=s;break;case"transferFrom":s=e.filter(n=>!n[r]),c=e.filter(n=>n[r]),a=o.concat(c),i.listBoxOneData=a,i.listBoxTwoData=s;break;case"transferAllTo":i.listBoxOneData=[],i.listBoxTwoData=e.concat(o);break;case"transferAllFrom":i.listBoxOneData=e.concat(o),i.listBoxTwoData=[];break;case"remove":s=e.filter(n=>!n[r]),a=o.filter(n=>!n[r]),i.listBoxOneData=a,i.listBoxTwoData=s;break}return i},f=(o,e,t)=>{const r=t.splice(o,1)[0];return t.splice(e,0,r),t},q=(o=[],e=[],t,r,a)=>{const c=o.findIndex(u=>u[a]===t[a]),s=e.findIndex(u=>u[a]===t[a]),i=r!==null?o.findIndex(u=>u[a]===r[a]):-1,n=r!==null?e.findIndex(u=>u[a]===r[a]):-1,l=c>=0,D=s>=0,T=i>=0,E=n>=0,g=[...o],b=[...e];return l&&T?{listBoxOneData:f(c,i,o),listBoxTwoData:e}:D&&E?{listBoxOneData:o,listBoxTwoData:f(s,n,e)}:l&&(E||r===null)?(r===null?b.push(o[c]):b.splice(n+1,0,o[c]),g.splice(c,1),{listBoxOneData:g,listBoxTwoData:b}):D&&(T||r===null)?(r===null?g.push(e[s]):g.splice(i+1,0,e[s]),b.splice(s,1),{listBoxOneData:g,listBoxTwoData:b}):{listBoxOneData:o,listBoxTwoData:e}};exports.ListBox=k;exports.ListBoxToolbar=v;exports.moveItem=f;exports.processListBoxData=M;exports.processListBoxDragAndDrop=q;

package/index.mjs

@@ -0,0 +1,294 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as p from "react";
+import * as d from "prop-types";
+import { dispatchEvent as h, validatePackage as A, classNames as b, kendoThemeMaps as F, guid as S } from "@progress/kendo-react-common";
+import { Button as w } from "@progress/kendo-react-buttons";
+import { provideLocalizationService as O, registerForLocalization as P } from "@progress/kendo-react-intl";
+import { caretDoubleAltRightIcon as E, caretDoubleAltLeftIcon as L, caretAltRightIcon as N, caretAltLeftIcon as x, caretAltUpIcon as R, caretAltDownIcon as U, xIcon as z } from "@progress/kendo-svg-icons";
+var I = /* @__PURE__ */ ((n) => (n.TOP = "top", n.BOTTOM = "bottom", n.LEFT = "left", n.RIGHT = "right", n.NONE = "none", n))(I || {});
+const K = {
+  name: "@progress/kendo-react-listbox",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1700573622,
+  version: "",
+  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
+};
+class y extends p.PureComponent {
+  constructor(e) {
+    super(e), this.setSelected = (t) => {
+      if (this.props.selectedField)
+        return !!t[this.props.selectedField];
+    }, this.renderItem = (t) => this.props.textField ? t[this.props.textField] : t.toString(), this.handleKeyDown = (t) => {
+      this.props.onKeyDown && h(this.props.onKeyDown, t, this, void 0);
+    }, this.handleContainerDrop = (t) => {
+      t.target.classList.contains("k-list-scroller") && (this.props.data.length > 0 ? h(this.props.onDrop, t, this, { dataItem: this.props.data[this.props.data.length - 1] }) : h(this.props.onDrop, t, this, { dataItem: null }));
+    }, this.setToolbarPosition = () => this.props.toolbarPosition === I.NONE || this.props.toolbar === void 0 ? "" : `k-listbox-actions-${this.props.toolbarPosition}`, this.handleOnDragLeave = (t) => {
+      this.props.onDragLeave && t.target.classList.contains("k-list-scroller") && h(this.props.onDragLeave, t, this, void 0);
+    }, A(K);
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    return /* @__PURE__ */ p.createElement(
+      "div",
+      {
+        className: b(
+          this.props.className,
+          "k-listbox",
+          this.setToolbarPosition()
+        ),
+        style: this.props.style,
+        unselectable: "on"
+      },
+      this.props.toolbar && this.props.toolbarPosition !== "bottom" && /* @__PURE__ */ p.createElement(this.props.toolbar, null),
+      /* @__PURE__ */ p.createElement(
+        "div",
+        {
+          className: "k-list-scroller k-selectable",
+          "data-role": "selectable",
+          onDragOver: (e) => e.preventDefault(),
+          onDrop: this.handleContainerDrop,
+          onDragLeave: this.handleOnDragLeave
+        },
+        /* @__PURE__ */ p.createElement("div", { className: b("k-list", {
+          [`k-list-${F.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+        }) }, /* @__PURE__ */ p.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ p.createElement("ul", { className: "k-list-ul", role: "listbox", "aria-label": "listbox-container", tabIndex: 0, onKeyDown: this.handleKeyDown }, this.props.data.map((e, t) => {
+          const r = this.setSelected(e), o = S(), l = {
+            className: b(
+              "k-list-item",
+              {
+                "k-selected": r
+              }
+            ),
+            role: "option",
+            "aria-selected": r,
+            key: t,
+            id: o + t,
+            "data-uid": o + t,
+            draggable: this.props.draggable,
+            onDragStart: (s) => h(this.props.onDragStart, s, this, { dataItem: e }),
+            onDragOver: (s) => {
+              s.preventDefault(), h(this.props.onDragOver, s, this, { dataItem: e });
+            },
+            onDrop: (s) => h(this.props.onDrop, s, this, { dataItem: e }),
+            onClick: (s) => h(this.props.onItemClick, s, this, { dataItem: e })
+          };
+          return this.props.item ? /* @__PURE__ */ p.createElement(this.props.item, { selected: r, dataItem: e, ...l }, /* @__PURE__ */ p.createElement("span", { className: "k-list-item-text" }, e.name)) : /* @__PURE__ */ p.createElement("li", { ...l }, /* @__PURE__ */ p.createElement("span", { className: "k-list-item-text" }, this.renderItem(e)));
+        }))))
+      ),
+      this.props.toolbar && this.props.toolbarPosition === "bottom" && /* @__PURE__ */ p.createElement(this.props.toolbar, null),
+      /* @__PURE__ */ p.createElement("select", { style: { display: "none" }, multiple: !0, "data-role": "listbox" }, this.props.data.map((e, t) => {
+        const r = e[this.props.valueField || this.props.textField];
+        return /* @__PURE__ */ p.createElement("option", { key: t, value: r }, r);
+      }))
+    );
+  }
+}
+y.propTypes = {
+  size: d.oneOf([null, "small", "medium", "large"]),
+  toolbarPosition: d.oneOf(["none", "top", "bottom", "left", "right"]),
+  textField: d.string,
+  valueField: d.string,
+  selectedField: d.string,
+  data: d.array
+};
+y.defaultProps = {
+  toolbarPosition: I.RIGHT,
+  draggable: !0,
+  size: "medium"
+};
+const M = "listbox.moveUp", G = "listbox.moveDown", $ = "listbox.transferTo", H = "listbox.transferFrom", V = "listbox.transferAllTo", j = "listbox.transferAllFrom", q = "listbox.remove", J = {
+  [M]: "Move Up",
+  [G]: "Move Down",
+  [$]: "Transfer To",
+  [H]: "Transfer From",
+  [V]: "Transfer All To",
+  [j]: "Transfer All From",
+  [q]: "Delete"
+}, C = [
+  { name: "moveUp", iconName: "caret-alt-up", svgIcon: R },
+  { name: "moveDown", iconName: "caret-alt-down", svgIcon: U },
+  { name: "transferTo", iconName: "caret-alt-right", svgIcon: N },
+  { name: "transferFrom", iconName: "caret-alt-left", svgIcon: x },
+  { name: "transferAllTo", iconName: "caret-double-alt-right", svgIcon: E },
+  { name: "transferAllFrom", iconName: "caret-double-alt-left", svgIcon: L },
+  { name: "remove", iconName: "x", svgIcon: z }
+];
+class v extends p.PureComponent {
+  constructor() {
+    super(...arguments), this.checkSvgIcon = (e) => {
+      switch (e.name) {
+        case "caret-alt-right":
+          return x;
+        case "caret-alt-left":
+          return N;
+        case "caret-double-alt-right":
+          return L;
+        case "caret-double-alt-left":
+          return E;
+      }
+      return e;
+    }, this.checkFontIcon = (e) => {
+      switch (e) {
+        case "caret-alt-right":
+          return "caret-alt-left";
+        case "caret-alt-left":
+          return "caret-alt-right";
+        case "caret-double-alt-right":
+          return "caret-double-alt-left";
+        case "caret-double-alt-left":
+          return "caret-double-alt-right";
+      }
+      return e;
+    }, this.handleToolClick = (e, t) => {
+      h(this.props.onToolClick, e, this, { toolName: t });
+    }, this.isItemDisabled = (e) => {
+      let t = !0;
+      const r = this.props.selectedField || "selected", o = this.props.data.length, l = this.props.dataConnected.length, s = this.props.data.findIndex((a) => a[r] === !0) >= 0, i = this.props.dataConnected.findIndex((a) => a[r] === !0) >= 0;
+      switch (e) {
+        case "moveUp":
+          s ? t = this.props.data.length > 0 ? this.props.data[0].selected : !0 : i ? t = this.props.dataConnected.length > 0 ? this.props.dataConnected[0].selected : !0 : t = !0;
+          break;
+        case "moveDown":
+          s ? t = this.props.data[o - 1] ? this.props.data[o - 1].selected : !0 : i ? t = this.props.dataConnected.length > 0 ? this.props.dataConnected[l - 1].selected : !0 : t = !0;
+          break;
+        case "transferTo":
+          t = !(this.props.dataConnected && s);
+          break;
+        case "transferFrom":
+          this.props.dataConnected ? t = !(this.props.dataConnected && i) : t = !0;
+          break;
+        case "transferAllTo":
+          t = !(this.props.dataConnected && this.props.data.length > 0);
+          break;
+        case "transferAllFrom":
+          t = !(this.props.dataConnected && this.props.dataConnected.length > 0);
+          break;
+        case "remove":
+          t = !(s || i);
+          break;
+      }
+      return t;
+    };
+  }
+  get isRtl() {
+    return this.props.dir === "rtl";
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const e = O(this);
+    return /* @__PURE__ */ p.createElement(
+      "div",
+      {
+        className: b(
+          "k-listbox-actions"
+        )
+      },
+      this.props.tools && this.props.tools.map((t, r) => {
+        const o = C.findIndex((c) => c.name === t), l = C[o], s = this.isItemDisabled(l.name), i = `listbox.${l.name}`, a = e.toLanguageString(i, J[i]);
+        return /* @__PURE__ */ p.createElement(
+          w,
+          {
+            key: r,
+            disabled: s,
+            "data-command": l.name,
+            title: a,
+            "aria-label": a,
+            icon: this.isRtl ? this.checkFontIcon(l.iconName) : l.iconName,
+            svgIcon: this.isRtl ? this.checkSvgIcon(l.svgIcon) : l.svgIcon,
+            onClick: (c) => {
+              c.preventDefault(), this.handleToolClick(c, l.name || null);
+            }
+          }
+        );
+      })
+    );
+  }
+}
+v.propTypes = {
+  data: d.array,
+  dataConnected: d.array,
+  tools: d.array,
+  selectedField: d.string,
+  dir: d.string
+};
+v.defaultProps = {
+  data: [],
+  dataConnected: [],
+  selectedField: "selected"
+};
+P(v);
+const Z = (n = [], e = [], t, r) => {
+  let o = [], l = [], s = [];
+  const i = {
+    listBoxOneData: n,
+    listBoxTwoData: e
+  };
+  switch (t) {
+    case "moveUp":
+      o = [...n], o.forEach((a, c) => {
+        a[r] && (o = u(c, c - 1, o));
+      }), s = [...e], s.forEach((a, c) => {
+        a[r] && (s = u(c, c - 1, s));
+      }), i.listBoxOneData = o, i.listBoxTwoData = s;
+      break;
+    case "moveDown":
+      o = n.reverse(), o.forEach((a, c) => {
+        a[r] && (o = u(c, c - 1, o));
+      }), s = e.reverse(), s.forEach((a, c) => {
+        a[r] && (s = u(c, c - 1, s));
+      }), i.listBoxOneData = [...o].reverse(), i.listBoxTwoData = [...s].reverse();
+      break;
+    case "transferTo":
+      o = n.filter((a) => !a[r]), l = n.filter((a) => a[r]), s = e.concat(l), i.listBoxOneData = o, i.listBoxTwoData = s;
+      break;
+    case "transferFrom":
+      s = e.filter((a) => !a[r]), l = e.filter((a) => a[r]), o = n.concat(l), i.listBoxOneData = o, i.listBoxTwoData = s;
+      break;
+    case "transferAllTo":
+      i.listBoxOneData = [], i.listBoxTwoData = e.concat(n);
+      break;
+    case "transferAllFrom":
+      i.listBoxOneData = e.concat(n), i.listBoxTwoData = [];
+      break;
+    case "remove":
+      s = e.filter((a) => !a[r]), o = n.filter((a) => !a[r]), i.listBoxOneData = o, i.listBoxTwoData = s;
+      break;
+  }
+  return i;
+}, u = (n, e, t) => {
+  const r = t.splice(n, 1)[0];
+  return t.splice(e, 0, r), t;
+}, _ = (n = [], e = [], t, r, o) => {
+  const l = n.findIndex((m) => m[o] === t[o]), s = e.findIndex((m) => m[o] === t[o]), i = r !== null ? n.findIndex((m) => m[o] === r[o]) : -1, a = r !== null ? e.findIndex((m) => m[o] === r[o]) : -1, c = l >= 0, k = s >= 0, D = i >= 0, T = a >= 0, f = [...n], g = [...e];
+  return c && D ? {
+    listBoxOneData: u(l, i, n),
+    listBoxTwoData: e
+  } : k && T ? {
+    listBoxOneData: n,
+    listBoxTwoData: u(s, a, e)
+  } : c && (T || r === null) ? (r === null ? g.push(n[l]) : g.splice(a + 1, 0, n[l]), f.splice(l, 1), {
+    listBoxOneData: f,
+    listBoxTwoData: g
+  }) : k && (D || r === null) ? (r === null ? f.push(e[s]) : f.splice(i + 1, 0, e[s]), g.splice(s, 1), {
+    listBoxOneData: f,
+    listBoxTwoData: g
+  }) : {
+    listBoxOneData: n,
+    listBoxTwoData: e
+  };
+};
+export {
+  y as ListBox,
+  v as ListBoxToolbar,
+  u as moveItem,
+  Z as processListBoxData,
+  _ as processListBoxDragAndDrop
+};

package/interfaces/Enums.d.ts

@@ -0,0 +1,11 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+export declare enum toolbarPosition {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right",
+    NONE = "none"
+}

package/{dist/es/interfaces → interfaces}/ListBoxEvents.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 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 { ListBox } from '../ListBox';
 import { ListBoxToolbar } from '../ListBoxToolbar';

package/{dist/es/interfaces → interfaces}/ListBoxProps.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import { ComponentType } from 'react';
 import { ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxDragEvent, ListBoxDragLeaveEvent } from './ListBoxEvents';
 import { toolbarPosition } from './Enums';

package/{dist/es/interfaces → interfaces}/ListBoxToolBarProps.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import { ListBoxToolbarClickEvent } from './ListBoxEvents';
 export interface ListBoxToolbarProps {
     /**

package/{dist/es/messages → messages}/index.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 /**
  * @hidden
  */

package/package-metadata.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/package.json

@@ -1,20 +1,31 @@
 {
   "name": "@progress/kendo-react-listbox",
-  "version": "6.1.1",
+  "version": "7.0.0-develop.2",
   "description": "React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox package",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/telerik/kendo-react.git"
+  "author": "Progress",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://www.telerik.com/kendo-react-ui",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
   },
-  "main": "dist/npm/main.js",
-  "types": "dist/npm/main.d.ts",
-  "module": "dist/es/main.js",
-  "jsnext:main": "dist/es/main.js",
-  "scripts": {
-    "test": "cd ../../ && npm run test -- --testPathPattern=/packages/listbox/.*",
-    "build-package": "gulp build-package"
+  "sideEffects": false,
+  "peerDependencies": {
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-react-buttons": "7.0.0-develop.2",
+    "@progress/kendo-react-common": "7.0.0-develop.2",
+    "@progress/kendo-react-intl": "7.0.0-develop.2",
+    "@progress/kendo-svg-icons": "^2.0.0",
+    "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.0"
   },
-  "homepage": "https://www.telerik.com/kendo-react-ui",
   "keywords": [
     "Kendo UI",
     "React",
@@ -27,32 +38,15 @@
     "React component",
     "Telerik"
   ],
-  "peerDependencies": {
-    "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-react-buttons": "^6.0.0",
-    "@progress/kendo-react-intl": "^6.0.0",
-    "@progress/kendo-svg-icons": "^2.0.0",
-    "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
-  },
-  "dependencies": {
-    "@progress/kendo-react-common": "6.1.1",
-    "prop-types": "^15.6.0"
-  },
-  "devDependencies": {
-    "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-react-buttons": "6.1.1",
-    "@progress/kendo-react-intl": "6.1.1",
-    "@progress/kendo-svg-icons": "^2.0.0"
-  },
   "@progress": {
     "friendlyName": "ListBox",
     "framework": "KendoReact"
   },
-  "author": "Progress",
-  "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
-}
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telerik/kendo-react.git"
+  }
+}

package/{dist/npm/utils.d.ts → utils.d.ts}

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 /**
  * Process the data collection/s based on the clicked ListBoxToolbar tool.
  *

package/about.md

@@ -1,3 +0,0 @@
-<a href="https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listbox&utm_content=banner" target="_blank">
-<img src="https://www.telerik.com/kendo-react-ui/components/npm-banner.svg" alt="KendoReact NPM Banner">
-</a>

package/dist/es/ListBox.js

@@ -1,141 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames, guid, dispatchEvent, kendoThemeMaps } from '@progress/kendo-react-common';
-import { toolbarPosition } from './interfaces/Enums';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from './package-metadata';
-var ListBox = /** @class */ (function (_super) {
-    __extends(ListBox, _super);
-    function ListBox(props) {
-        var _this = _super.call(this, props) || this;
-        _this.setSelected = function (item) {
-            if (_this.props.selectedField) {
-                return item[_this.props.selectedField] ? true : false;
-            }
-        };
-        _this.renderItem = function (item) {
-            return _this.props.textField ? item[_this.props.textField] : item.toString();
-        };
-        _this.handleKeyDown = function (event) {
-            if (_this.props.onKeyDown) {
-                dispatchEvent(_this.props.onKeyDown, event, _this, undefined);
-            }
-            ;
-        };
-        _this.handleContainerDrop = function (event) {
-            var targetElement = event.target;
-            var isTargetContainer = targetElement.classList.contains('k-list-scroller');
-            if (isTargetContainer) {
-                _this.props.data.length > 0 ?
-                    dispatchEvent(_this.props.onDrop, event, _this, { dataItem: _this.props.data[_this.props.data.length - 1] }) :
-                    dispatchEvent(_this.props.onDrop, event, _this, { dataItem: null });
-            }
-        };
-        _this.setToolbarPosition = function () {
-            if (_this.props.toolbarPosition === toolbarPosition.NONE || _this.props.toolbar === undefined) {
-                return '';
-            }
-            return "k-listbox-actions-".concat(_this.props.toolbarPosition);
-        };
-        _this.handleOnDragLeave = function (event) {
-            if (_this.props.onDragLeave && event.target.classList.contains('k-list-scroller')) {
-                dispatchEvent(_this.props.onDragLeave, event, _this, undefined);
-            }
-        };
-        validatePackage(packageMetadata);
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    ListBox.prototype.render = function () {
-        var _a;
-        var _this = this;
-        return (React.createElement("div", { className: classNames(this.props.className, 'k-listbox', this.setToolbarPosition()), style: this.props.style, unselectable: "on" },
-            this.props.toolbar && this.props.toolbarPosition !== 'bottom' && React.createElement(this.props.toolbar, null),
-            React.createElement("div", { className: 'k-list-scroller k-selectable', "data-role": 'selectable', onDragOver: function (e) { return e.preventDefault(); }, onDrop: this.handleContainerDrop, onDragLeave: this.handleOnDragLeave },
-                React.createElement("div", { className: classNames('k-list', (_a = {},
-                        _a["k-list-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                        _a)) },
-                    React.createElement("div", { className: 'k-list-content' },
-                        React.createElement("ul", { className: 'k-list-ul', role: 'listbox', "aria-label": 'listbox-container', tabIndex: 0, onKeyDown: this.handleKeyDown }, this.props.data.map(function (item, index) {
-                            var selectedValue = _this.setSelected(item);
-                            var itemGuid = guid();
-                            var itemOptions = {
-                                className: classNames('k-list-item', {
-                                    'k-selected': selectedValue
-                                }),
-                                role: 'option',
-                                'aria-selected': selectedValue,
-                                key: index,
-                                id: itemGuid + index,
-                                'data-uid': itemGuid + index,
-                                draggable: _this.props.draggable,
-                                onDragStart: function (event) { return dispatchEvent(_this.props.onDragStart, event, _this, { dataItem: item }); },
-                                onDragOver: function (event) {
-                                    event.preventDefault();
-                                    dispatchEvent(_this.props.onDragOver, event, _this, { dataItem: item });
-                                },
-                                onDrop: function (event) { return dispatchEvent(_this.props.onDrop, event, _this, { dataItem: item }); },
-                                onClick: function (event) { return dispatchEvent(_this.props.onItemClick, event, _this, { dataItem: item }); }
-                            };
-                            return (_this.props.item
-                                ? React.createElement(_this.props.item, __assign({ selected: selectedValue, dataItem: item }, itemOptions),
-                                    React.createElement("span", { className: 'k-list-item-text' }, item.name))
-                                : React.createElement("li", __assign({}, itemOptions),
-                                    React.createElement("span", { className: 'k-list-item-text' }, _this.renderItem(item))));
-                        }))))),
-            this.props.toolbar && this.props.toolbarPosition === 'bottom' && React.createElement(this.props.toolbar, null),
-            React.createElement("select", { style: { display: 'none' }, multiple: true, "data-role": "listbox" }, this.props.data.map(function (item, index) {
-                var value = item[_this.props.valueField || _this.props.textField];
-                return React.createElement("option", { key: index, value: value }, value);
-            }))));
-    };
-    /**
-     * @hidden
-     */
-    ListBox.propTypes = {
-        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-        toolbarPosition: PropTypes.oneOf(['none', 'top', 'bottom', 'left', 'right']),
-        textField: PropTypes.string,
-        valueField: PropTypes.string,
-        selectedField: PropTypes.string,
-        data: PropTypes.array
-    };
-    /**
-     * @hidden
-     */
-    ListBox.defaultProps = {
-        toolbarPosition: toolbarPosition.RIGHT,
-        draggable: true,
-        size: 'medium'
-    };
-    return ListBox;
-}(React.PureComponent));
-export { ListBox };