@progress/kendo-react-listbox 13.3.0 → 13.4.0-develop.2

package/interfaces/ListBoxProps.d.ts

@@ -0,0 +1,215 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 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, ListBoxItemSelectEvent, ListBoxItemNavigateEvent } from './ListBoxEvents.js';
+import { toolbarPosition } from './Enums.js';
+/**
+ * Represents the props of the [KendoReact ListBox component](https://www.telerik.com/kendo-react-ui/components/listbox).
+ */
+export interface ListBoxProps {
+    /**
+     * Sets a `class` of the ListBox container.
+     *
+     * @example
+     * ```jsx
+     * <ListBox className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets an `id` of the ListBox container.
+     *
+     * @example
+     * ```jsx
+     * <ListBox id="listbox-id" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Configures the `size` of the ListBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <ListBox size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Specifies the styles which are set to the ListBox container.
+     *
+     * @example
+     * ```jsx
+     * <ListBox style={{ width: '300px' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the data of the ListBox.
+     *
+     * @example
+     * ```jsx
+     * <ListBox data={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
+     * ```
+     */
+    data: Array<any>;
+    /**
+     * Makes the items of the ListBox draggable.
+     *
+     * @default true
+     *
+     * @example
+     * ```jsx
+     * <ListBox draggable={false} />
+     * ```
+     */
+    draggable?: boolean;
+    /**
+     * Sets the selected field of the ListBox. Based on the value of this field, an item is selected or not.
+     *
+     * @example
+     * ```jsx
+     * <ListBox selectedField="isSelected" />
+     * ```
+     */
+    selectedField?: string;
+    /**
+     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
+     *
+     * @example
+     * ```jsx
+     * <ListBox textField="name" />
+     * ```
+     */
+    textField: string;
+    /**
+     * The field that is used during form submission. Defaults to the `textField` if not set.
+     *
+     * @example
+     * ```jsx
+     * <ListBox valueField="id" />
+     * ```
+     */
+    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`
+     *
+     * @default 'right'
+     *
+     * @example
+     * ```jsx
+     * <ListBox toolbarPosition="top" />
+     * ```
+     */
+    toolbarPosition?: toolbarPosition | string;
+    /**
+     * Renders a toolbar component next to the ListBox.
+     *
+     * @example
+     * ```jsx
+     * <ListBox toolbar={CustomToolbar} />
+     * ```
+     */
+    toolbar?: null | ComponentType<any>;
+    /**
+     * Defines the component that will be rendered for each item of the data collection.
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.text}</div>;
+     *
+     * <ListBox item={CustomItem} />
+     * ```
+     */
+    item?: React.ComponentType<any>;
+    /**
+     * Fires when an item from the ListBox is clicked. Contains the clicked item.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onItemClick={(event) => console.log(event.item)} />
+     * ```
+     */
+    onItemClick?: (event: ListBoxItemClickEvent) => void;
+    /**
+     * Fires when an item from the ListBox is selected. Contains the selected item.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onItemSelect={(event) => console.log(event.item)} />
+     * ```
+     */
+    onItemSelect?: (event: ListBoxItemSelectEvent) => void;
+    /**
+     * Fires on keydown over the ListBox list items. You can use it to add extra keyboard navigation options.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onKeyDown={(event) => console.log(event.keyCode)} />
+     * ```
+     */
+    onKeyDown?: (event: ListBoxKeyDownEvent) => void;
+    /**
+     * Fires when the user starts to drag an item from the ListBox. The event contains information about the item that is being dragged.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDragStart={(event) => console.log(event.item)} />
+     * ```
+     */
+    onDragStart?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when the user drags over an item from the ListBox. The event contains information about the item that is dragged over.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDragOver={(event) => console.log(event.item)} />
+     * ```
+     */
+    onDragOver?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when the user drops an item. The event contains information about the drop target item.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDrop={(event) => console.log(event.item)} />
+     * ```
+     */
+    onDrop?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when a dragged element or text selection leaves the ListBox element.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onDragLeave={(event) => console.log(event.item)} />
+     * ```
+     */
+    onDragLeave?: (event: ListBoxDragLeaveEvent) => void;
+    /**
+     * Fires when a keyboard navigation action is triggered.
+     *
+     * @example
+     * ```jsx
+     * <ListBox onKeyboardNavigate={(event) => console.log(event.item)} />
+     * ```
+     */
+    onKeyboardNavigate?: (event: ListBoxItemNavigateEvent) => void;
+}

package/interfaces/ListBoxToolBarProps.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ListBoxToolbarClickEvent } from './ListBoxEvents.js';
+export 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>;
+    /**
+     * Configures the `size` of the buttons inside the ListBoxToolbar.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * 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;
+}

package/messages/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const moveUp = "listbox.moveUp";
+/**
+ * @hidden
+ */
+export declare const moveDown = "listbox.moveDown";
+/**
+ * @hidden
+ */
+export declare const transferTo = "listbox.transferTo";
+/**
+ * @hidden
+ */
+export declare const transferFrom = "listbox.transferFrom";
+/**
+ * @hidden
+ */
+export declare const transferAllTo = "listbox.transferAllTo";
+/**
+ * @hidden
+ */
+export declare const transferAllFrom = "listbox.transferAllFrom";
+/**
+ * @hidden
+ */
+export declare const remove = "listbox.remove";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "listbox.moveUp": string;
+    "listbox.moveDown": string;
+    "listbox.transferTo": string;
+    "listbox.transferFrom": string;
+    "listbox.transferAllTo": string;
+    "listbox.transferAllFrom": string;
+    "listbox.remove": string;
+};

package/package-metadata.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 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-metadata.mjs

@@ -0,0 +1,12 @@
+/**
+ * @hidden
+ */
+export const packageMetadata = Object.freeze({
+    name: '@progress/kendo-react-listbox',
+    productName: 'KendoReact',
+    productCode: 'KENDOUIREACT',
+    productCodes: ['KENDOUIREACT'],
+    publishDate: 1607357111,
+    version: '13.4.0-develop.2',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-listbox",
-  "version": "13.3.0",
+  "version": "13.4.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",
@@ -26,9 +26,9 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-buttons": "13.3.0",
-    "@progress/kendo-react-common": "13.3.0",
-    "@progress/kendo-react-intl": "13.3.0",
+    "@progress/kendo-react-buttons": "13.4.0-develop.2",
+    "@progress/kendo-react-common": "13.4.0-develop.2",
+    "@progress/kendo-react-intl": "13.4.0-develop.2",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -52,7 +52,13 @@
   ],
   "@progress": {
     "friendlyName": "ListBox",
-    "framework": "KendoReact"
+    "framework": "KendoReact",
+    "package": {
+      "productName": "KendoReact",
+      "productCode": "KENDOUIREACT",
+      "publishDate": 1770288274,
+      "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
+    }
   },
   "publishConfig": {
     "access": "public"

package/utils.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Processes the data collections 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[];
+};
+/**
+ * @hidden
+ */
+export declare const moveItem: (from: number, to: number, data: Array<any>) => any[];
+/**
+ * Processes the data collections based on the dragged and dropped 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[];
+};