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

package/index.d.ts

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

package/index.js

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

package/index.mjs

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

package/interfaces/Enums.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var t=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(t||{});exports.toolbarPosition=t;

package/interfaces/Enums.mjs

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+var T = /* @__PURE__ */ ((e) => (e.TOP = "top", e.BOTTOM = "bottom", e.LEFT = "left", e.RIGHT = "right", e.NONE = "none", e))(T || {});
+export {
+  T as toolbarPosition
+};

package/messages/index.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o="listbox.moveUp",r="listbox.moveDown",e="listbox.transferTo",s="listbox.transferFrom",t="listbox.transferAllTo",n="listbox.transferAllFrom",l="listbox.remove",a={[o]:"Move Up",[r]:"Move Down",[e]:"Transfer To",[s]:"Transfer From",[t]:"Transfer All To",[n]:"Transfer All From",[l]:"Delete"};exports.messages=a;exports.moveDown=r;exports.moveUp=o;exports.remove=l;exports.transferAllFrom=n;exports.transferAllTo=t;exports.transferFrom=s;exports.transferTo=e;