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

package/interfaces/DataItemWrapper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @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 interface DataItemWrapper {
+    dataItem: any;
+    level: number[];
+    height: number;
+    offsetTop: number;
+    levelCount: number;
+}

package/interfaces/TreeListCellProps.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { CellProps } from '@progress/kendo-react-data-tools';
+/**
+ * Represents the props of the TreeListCell component.
+ */
+export interface TreeListCellProps extends Omit<CellProps, 'onExpandChange' | 'render' | 'onChange'> {
+    /**
+     * An array of indexes of each parent and current item in the data tree.
+     */
+    level: number[];
+    /**
+     * Indicates that the data item of the cell has subitems.
+     */
+    hasChildren?: boolean;
+    /**
+     * If set to `true`, the cell will render indentation based on its level prop and
+     * the icons that are used for expanding and collapsing child rows.
+     */
+    expandable?: boolean;
+    /**
+     * The index of the column. Useful for applying `aria-colindex` accessibility attribute.
+     */
+    colIndex: number;
+    /**
+     * The event that is fired when the expand or collapse icon of the cell is clicked.
+     */
+    onExpandChange: (event: React.MouseEvent<HTMLSpanElement>, dataItem: any, level: number[]) => void;
+    /**
+     * A function for overriding the default rendering of the cell.
+     */
+    render?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: TreeListCellProps) => React.ReactElement<HTMLTableCellElement> | null;
+    /**
+     * The event that is fired when the cell value is changed.
+     */
+    onChange?: (event: {
+        dataItem: any;
+        level: number[];
+        syntheticEvent: React.SyntheticEvent<any>;
+        field?: string;
+        value?: any;
+    }) => void;
+}

package/interfaces/TreeListColumnProps.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @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 { TreeColumnBaseProps } from '@progress/kendo-react-data-tools';
+import { TreeListCellProps } from './TreeListCellProps.js';
+import { TreeListHeaderCellProps } from './TreeListHeaderCellProps.js';
+import { TreeListFilterCellProps } from './TreeListFilterCellProps.js';
+/**
+ * The props of the columns of the TreeList component.
+ */
+export interface TreeListColumnProps extends Omit<TreeColumnBaseProps, 'children' | 'cell' | 'editCell' | 'disableReorder'> {
+    /**
+     * Defines the component that will be rendered as a cell. If not set, a `TreeListCell` will be rendered by default.
+     */
+    cell?: ComponentType<TreeListCellProps>;
+    /**
+     * Defines the component that will be rendered as an edit cell.
+     */
+    editCell?: ComponentType<TreeListCellProps>;
+    /**
+     * Defines the component that will be rendered as a header cell.
+     * If not set, a `TreeListHeaderCell` will be rendered by default.
+     */
+    headerCell?: ComponentType<TreeListHeaderCellProps>;
+    /**
+     * **Deprecated**. Use `filterCell` prop instead.
+     */
+    filter?: ComponentType<TreeListFilterCellProps>;
+    /**
+     * Defines the component that will be rendered as a filter cell.
+     */
+    filterCell?: ComponentType<TreeListFilterCellProps>;
+    /**
+     * A collection of child columns.
+     */
+    children?: TreeListColumnProps[];
+    /**
+     * Defines if the column is locked (frozen or sticky).
+     * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally.
+     * Defaults to `false`.
+     */
+    locked?: boolean;
+}

package/interfaces/TreeListFilterCellProps.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FilterCellProps } from '@progress/kendo-react-data-tools';
+/**
+ * @hidden
+ */
+export interface TreeListFilterCellProps extends FilterCellProps {
+}

package/interfaces/TreeListFilterOperator.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FilterOperator } from '@progress/kendo-react-data-tools';
+/**
+ * The filter operator for the TreeList filters.
+ */
+export interface TreeListFilterOperator extends FilterOperator {
+}

package/interfaces/TreeListHeaderCellProps.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { HeaderCellProps } from '@progress/kendo-react-data-tools';
+/**
+ * The props of the TreeListHeaderCell component.
+ */
+export interface TreeListHeaderCellProps extends HeaderCellProps {
+}

package/interfaces/TreeListNoRecordsProps.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The props of the TreeListNoRecords component.
+ */
+export interface TreeListNoRecordsProps {
+    /**
+     * The React elements which will be rendered inside the TreeList when no records are available.
+     */
+    children?: React.ReactNode;
+}

package/interfaces/TreeListProps.d.ts

@@ -0,0 +1,285 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SortDescriptor, FilterDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { TreeListSortChangeEvent, TreeListFilterChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListItemChangeEvent, TreeListDataStateChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListColumnMenuFilterChangeEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListKeyDownEvent } from './events.js';
+import { ScrollMode } from '../ScrollMode.js';
+import { TreeListCellProps } from './TreeListCellProps.js';
+import { SortSettings as TreeListSortSettings, FilterRowProps } from '@progress/kendo-react-data-tools';
+import { TreeListRowProps } from './TreeListRowProps.js';
+import { TreeListHeaderCellProps } from './TreeListHeaderCellProps.js';
+import { TreeListColumnProps } from './TreeListColumnProps.js';
+import { TreeListToolbarProps } from './TreeListToolbarProps.js';
+import { TreeListNoRecordsProps } from './TreeListNoRecordsProps.js';
+import { TreeListSelectableSettings } from './TreeListSelectableSettings.js';
+/**
+ * Represents the props of the [KendoReact TreeList component](https://www.telerik.com/kendo-react-ui/components/treelist/get-started).
+ */
+export interface TreeListProps {
+    /**
+     * Sets the unique key for each row in the TreeList. If not set, the row index is used.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList dataItemKey="id" />
+     * ```
+     */
+    dataItemKey?: string;
+    /**
+     * Adds custom CSS classes to the TreeList container element.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList className="custom-treelist-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Specifies the `id` attribute of the TreeList container element.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList id="treelist-component" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Defines the columns of the TreeList using an array of `TreeListColumnProps`.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList columns={[{ field: 'name', title: 'Name' }]} />
+     * ```
+     */
+    columns?: TreeListColumnProps[];
+    /**
+     * Enables column virtualization to improve performance by rendering only visible columns.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList columnVirtualization={true} />
+     * ```
+     */
+    columnVirtualization?: boolean;
+    /**
+     * Provides the data to be displayed in the TreeList.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList data={[{ id: 1, name: 'Item 1' }]} />
+     * ```
+     */
+    data?: any[];
+    /**
+     * Enables sorting functionality for the TreeList.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList sortable={{ mode: 'single', allowUnsort: true }} />
+     * ```
+     */
+    sortable?: TreeListSortSettings;
+    /**
+     * Triggered when the sorting state changes. The event must be handled to apply sorting.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList onSortChange={(event) => console.log(event.sort)} />
+     * ```
+     */
+    onSortChange?: (event: TreeListSortChangeEvent) => void;
+    /**
+     * Specifies the current sorting descriptors for the TreeList.
+     *
+     * Example:
+     * ```jsx
+     * <TreeList sort={[{ field: 'name', dir: 'asc' }]} />
+     * ```
+     */
+    sort?: SortDescriptor[];
+    /**
+     * If set, it will be rendered instead of the default `FilterRow` TreeList component.
+     */
+    filterRow?: React.ComponentType<FilterRowProps>;
+    /**
+     * If set and when the data item is in edit mode, the `editRow` value will be rendered.
+     */
+    editRow?: React.ComponentType<TreeListRowProps>;
+    /**
+     * Represents the TreeList toolbar component.
+     */
+    toolbar?: React.ReactElement<TreeListToolbarProps>;
+    /**
+     * Represents the component that will be rendered when the `data` property of the TreeList is empty or undefined.
+     */
+    noRecords?: React.ReactElement<TreeListNoRecordsProps>;
+    /**
+     * Specifies the current filter descriptors for the TreeList.
+     */
+    filter?: FilterDescriptor[];
+    /**
+     * Triggered when the filter state changes. The event must be handled to apply filtering.
+     */
+    onFilterChange?: (event: TreeListFilterChangeEvent) => void;
+    /**
+     * Triggered when the user clicks on the expand or collapse icon of a row.
+     */
+    onExpandChange?: (event: TreeListExpandChangeEvent) => void;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
+     */
+    expandField?: string;
+    /**
+     * Specifies the name of the field which will provide an array representation of the item subitems.
+     */
+    subItemsField?: string;
+    /**
+     * Configures the selection settings for the TreeList.
+     */
+    selectable?: TreeListSelectableSettings;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
+     */
+    selectedField?: string;
+    /**
+     * Triggered when the user selects or deselects a row or cell.
+     */
+    onSelectionChange?: (event: TreeListSelectionChangeEvent) => void;
+    /**
+     * Triggered when the user presses a keyboard key.
+     */
+    onKeyDown?: (event: TreeListKeyDownEvent) => void;
+    /**
+     * Triggered when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
+     */
+    onHeaderSelectionChange?: (event: TreeListHeaderSelectionChangeEvent) => void;
+    /**
+     * Triggered when the user changes the values of the item.
+     * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
+     */
+    onItemChange?: (event: TreeListItemChangeEvent) => void;
+    /**
+     * Triggered when the user clicks a row.
+     */
+    onRowClick?: (event: TreeListRowClickEvent) => void;
+    /**
+     * Triggered when the user double clicks a row.
+     */
+    onRowDoubleClick?: (event: TreeListRowDoubleClickEvent) => void;
+    /**
+     * Triggered when the user opens the context menu of a row.
+     */
+    onRowContextMenu?: (event: TreeListRowContextMenuEvent) => void;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item.
+     */
+    editField?: string;
+    /**
+     * Defines the scroll mode of the TreeList.
+     *
+     * The available options are:
+     * - `none`&mdash;Renders no scrollbar.
+     * - `scrollable`&mdash;Represents the default scroll mode of the TreeList.
+     * Requires you to set the `overflow` and `height` (for vertical scrolling),
+     * or `width` (for horizontal scrolling) styles.
+     * - `virtual`&mdash;Enables the vertical virtual scrolling of the TreeList.
+     * Requires you to set the `overflow` and `height` styles and `rowHeight` prop of the TreeList.
+     */
+    scrollable?: ScrollMode;
+    /**
+     * Enables column resizing by dragging the edges of their header cells.
+     */
+    resizable?: boolean;
+    /**
+     * Enables column reordering by dragging their header cells.
+     */
+    reorderable?: boolean;
+    /**
+     * Enables row dragging and dropping.
+     */
+    rowDraggable?: boolean;
+    /**
+     * Specifies the height of each row in the TreeList.
+     */
+    rowHeight?: number;
+    /**
+     * Represents the `style` HTML attribute.
+     */
+    style?: React.CSSProperties;
+    /**
+     * A props object that will be passed to the underlying HTML table.
+     */
+    tableProps?: React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
+    /**
+     * Specifies the column menu component to be used by the TreeList.
+     */
+    columnMenu?: React.ComponentType<any>;
+    /**
+     * Specifies the composite filter descriptor for the column menu filter.
+     */
+    columnMenuFilter?: CompositeFilterDescriptor[];
+    /**
+     * Triggered when the column menu filter state changes.
+     */
+    onColumnMenuFilterChange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
+    /**
+     * Specifies the pager component to be used by the TreeList.
+     */
+    pager?: React.ComponentType<any>;
+    /**
+     * Specifies the number of records to be skipped.
+     */
+    skip?: number;
+    /**
+     * Specifies the number of records to be taken.
+     */
+    take?: number;
+    /**
+     * Specifies the row component to be used by the TreeList.
+     */
+    row?: React.ComponentType<TreeListRowProps>;
+    /**
+     * Enables keyboard navigation for the TreeList.
+     */
+    navigatable?: boolean;
+    /**
+     * Triggered when the page state changes. The event must be handled to apply paging.
+     */
+    onPageChange?: (event: TreeListPageChangeEvent) => void;
+    /**
+     * Triggered when the data state changes. The event must be handled to apply the new state.
+     */
+    onDataStateChange?: (event: TreeListDataStateChangeEvent) => void;
+    /**
+     * Triggered when a column is resized.
+     */
+    onColumnResize?: (event: TreeListColumnResizeEvent) => void;
+    /**
+     * Triggered when columns are reordered.
+     */
+    onColumnReorder?: (event: TreeListColumnReorderEvent) => void;
+    /**
+     * Triggered when a row is dragged.
+     */
+    onRowDrag?: (event: TreeListRowDragEvent) => void;
+    /**
+     * Triggered when a row is dragged and dropped.
+     */
+    onRowDrop?: (event: TreeListRowDragEvent) => void;
+    /**
+     * Triggered before a row is rendered. Useful for customizing the row rendering.
+     */
+    rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => React.ReactNode;
+    /**
+     * Triggered before a cell is rendered. Useful for customizing the cell rendering.
+     */
+    cellRender?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: TreeListCellProps) => React.ReactElement<HTMLTableCellElement> | null;
+    /**
+     * Triggered before a header cell is rendered. Useful for customizing the header cell rendering.
+     */
+    headerCellRender?: (defaultRendering: React.ReactNode | null, props: TreeListHeaderCellProps) => React.ReactNode;
+}

package/interfaces/TreeListRowProps.d.ts

@@ -0,0 +1,99 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The props that the TreeList passes to the TreeListRow component when creating it.
+ * Accessible during the `rowRender` callback of the TreeList.
+ */
+export interface TreeListRowProps {
+    /**
+     * The `data` object that represents the current row.
+     */
+    dataItem: any;
+    /**
+     * The event that is fired when the row is clicked.
+     */
+    onClick?: any;
+    /**
+     * The event that is fired when the row is double clicked.
+     */
+    onDoubleClick?: any;
+    /**
+     * The event that is fired when the row context menu is triggered.
+     */
+    onContextMenu?: any;
+    /**
+     * The name of the field which will provide a Boolean representation of the selected state of the item.
+     */
+    selectedField?: string;
+    /**
+     * Sets the height of the row.
+     */
+    rowHeight?: number;
+    /**
+     * A function for overriding the default rendering of the row.
+     */
+    render?: (row: React.ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => React.ReactNode;
+    /**
+     * An array of indexes of each parent and current item in the data tree.
+     */
+    level: number[];
+    /**
+     * Fires when a row is dragged.
+     */
+    onDrag?: (event: {
+        nativeEvent: any;
+        dragged: number[];
+        draggedOver: number[] | null;
+        draggedItem: any;
+    }) => void;
+    /**
+     * Fires when a row is dragged and dropped.
+     */
+    onDrop?: (event: {
+        nativeEvent: any;
+        dragged: number[];
+        draggedOver: number[] | null;
+        draggedItem: any;
+    }) => void;
+    /**
+     * The expanded state of the row. Useful for applying `aria-expanded` accessibility attribute.
+     */
+    expanded: boolean;
+    /**
+     * The index of the row. Useful for applying `aria-rowindex` accessibility attribute.
+     */
+    rowIndex: number;
+    /**
+     * @hidden
+     */
+    children: React.ReactNode;
+    /**
+     * @hidden
+     */
+    levels: number[][];
+    /**
+     * @hidden
+     */
+    isAltRow?: boolean;
+    /**
+     * The index to be applied to the `aria-rowindex` attribute.
+     */
+    ariaRowIndex?: number;
+    /**
+     * The count of items on current level, applied to the `aria-setsize` attribute.
+     */
+    ariaSetSize?: number;
+    /**
+     * The index of the item on current level, applied to the `aria-posinset` attribute.
+     */
+    ariaPosInSet?: number;
+    /**
+     * Indicates if the row is selected.
+     */
+    isSelected: boolean;
+}

package/interfaces/TreeListSelectableSettings.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TableSelectableMode, TableSelectableSettings } from '@progress/kendo-react-data-tools';
+/**
+ * Represents the available selection modes.
+ */
+export type TreeListSelectableMode = TableSelectableMode;
+/**
+ * Represents the TreeList selectable settings.
+ */
+export interface TreeListSelectableSettings extends TableSelectableSettings {
+    /**
+     * The available values are:
+     * * `single`
+     * * `multiple`
+     *
+     * @default "multiple"
+     */
+    mode?: TreeListSelectableMode;
+}

package/interfaces/TreeListSortSettings.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColumnSortSettings, SortSettings } from '@progress/kendo-react-data-tools';
+/**
+ * The settings for sorting the TreeList columns.
+ */
+export type TreeListColumnSortSettings = ColumnSortSettings;
+/**
+ * The settings for sorting the TreeList data.
+ */
+export type TreeListSortSettings = SortSettings;

package/interfaces/TreeListToolbarProps.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ToolbarProps } from '@progress/kendo-react-buttons';
+/**
+ * The props of the TreeListToolbar component.
+ */
+export interface TreeListToolbarProps extends ToolbarProps {
+    /**
+     * The React elements that will be rendered inside the toolbar of the TreeList.
+     */
+    children?: React.ReactNode;
+}