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

package/index.d.mts

@@ -5,427 +5,13 @@
  * 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';
-
-/**
- * Represents the KendoReact ListBox Component.
- */
-export declare const ListBox: ForwardRefExoticComponent<ListBoxProps & RefAttributes<any>>;
-
-/**
- * The ListBox component.
- */
-declare const ListBox_2: React_2.ForwardRefExoticComponent<ListBoxProps & React_2.RefAttributes<ListBoxHandle | null>>;
-
-/** @hidden */
-declare type ListBox_2 = ListBoxHandle;
-
-/**
- * The event that is triggered during drag operations on the ListBox.
- */
-export declare interface ListBoxDragEvent extends BaseEvent<ListBox_2> {
-    /**
-     * The data item involved in the drag operation.
-     */
-    dataItem?: any;
-}
-
-/**
- * The event that is triggered when a dragged element leaves the ListBox.
- */
-declare interface ListBoxDragLeaveEvent extends BaseEvent<ListBox_2> {
-}
-
-/**
- * The base event for ListBox operations.
- */
-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;
-}
-
-/**
- * The event that is triggered when an item in the ListBox is clicked.
- */
-export declare interface ListBoxItemClickEvent extends BaseEvent<ListBox_2> {
-    /**
-     * The data item that was clicked.
-     */
-    dataItem?: any;
-}
-
-/**
- * The event that is triggered when a keyboard navigation action is performed.
- */
-export declare interface ListBoxItemNavigateEvent extends BaseEvent<ListBox_2> {
-    /**
-     * The name of the action that was performed.
-     */
-    actionName?: string;
-}
-
-/**
- * The event that is triggered when an item in the ListBox is selected.
- */
-export declare interface ListBoxItemSelectEvent extends BaseEvent<ListBox_2> {
-    /**
-     * The data item that was selected.
-     */
-    dataItem?: any;
-}
-
-/**
- * The event that is triggered when a key is pressed down over the ListBox.
- */
-export declare interface ListBoxKeyDownEvent extends BaseEvent<ListBox_2> {
-}
-
-/**
- * Represents the props of the [KendoReact ListBox component](https://www.telerik.com/kendo-react-ui/components/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.
-     *
-     * @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;
-}
-
-export declare const ListBoxToolbar: React_2.ForwardRefExoticComponent<ListBoxToolbarProps & React_2.RefAttributes<ListBoxToolbarHandle | null>>;
-
-/** @hidden */
-export declare type ListBoxToolbar = ListBoxToolbarHandle;
-
-/**
- * The event that is triggered when a tool in the ListBoxToolbar is clicked.
- */
-export declare interface ListBoxToolbarClickEvent extends BaseEvent<ListBoxToolbar> {
-    /**
-     * The name of the tool that was clicked.
-     */
-    toolName?: string;
-}
-
-/**
- * The base event for ListBoxToolbar operations.
- */
-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[];
-
-/**
- * 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[];
-};
-
-/**
- * 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[];
-};
-
-/**
- * Defines the possible positions for the ListBox toolbar.
- */
-declare enum toolbarPosition {
-    TOP = "top",
-    BOTTOM = "bottom",
-    LEFT = "left",
-    RIGHT = "right",
-    NONE = "none"
-}
-
-export { }
+import { ListBoxProps } from './interfaces/ListBoxProps.js';
+import { ListBoxToolbar } from './ListBoxToolbar.js';
+import { ListBoxToolbarProps } from './interfaces/ListBoxToolBarProps.js';
+import { processListBoxData, moveItem, processListBoxDragAndDrop } from './utils.js';
+import { ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent, ListBoxEvent, ListBoxItemSelectEvent, ListBoxItemNavigateEvent } from './interfaces/ListBoxEvents.js';
+/**
+ * Represents the KendoReact ListBox Component.
+ */
+declare const ListBox: import('react').ForwardRefExoticComponent<ListBoxProps & import('react').RefAttributes<any>>;
+export { ListBox, ListBoxProps, ListBoxToolbar, ListBoxToolbarProps, processListBoxData, moveItem, processListBoxDragAndDrop, ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent, ListBoxEvent, ListBoxItemSelectEvent, ListBoxItemNavigateEvent };