@progress/kendo-react-listbox/index.d.mts

React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 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 * as React_2 from 'react';
import { RefAttributes } from 'react';

/** @hidden */
export declare const ListBox: ForwardRefExoticComponent<ListBoxProps & RefAttributes<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 {
    /**
     * The current element or `null` if there is no one.
     */
    element: HTMLDivElement | null;
    /**
     * The props value of the ListBox.
     */
    props: ListBoxProps;
}

export declare interface ListBoxItemClickEvent extends BaseEvent<ListBox_2> {
    dataItem?: any;
}

export declare interface ListBoxItemNavigateEvent extends BaseEvent<ListBox_2> {
    actionName?: string;
}

export declare interface ListBoxItemSelectEvent 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.
     *
     * @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
     * - null&mdash;Does not set a size `className`.
     *
     * @default `medium`
     *
     * @example
     * ```jsx
     * <ListBox size="large" />
     * ```
     */
    size?: null | '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. The items are draggable by default.
     *
     * @example
     * ```jsx
     * <ListBox draggable={false} />
     * ```
     */
    draggable?: boolean;
    /**
     * Sets the selected field of the ListBox. Based on the value of this field, an item will be 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 will be 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`
     *
     * @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. It can be used 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;
}

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.
     * 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?: null | '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;
}

/**
 * @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 { }