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

package/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -0,0 +1,554 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentProps } from '@progress/kendo-react-common';
+import { ItemRenderProps } from '@progress/kendo-react-treeview';
+import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent, CancelEvent } from '../common/events.js';
+import { DropDownsPopupSettings } from '../common/settings.js';
+import { TagData } from '../MultiSelect/TagList.js';
+import * as React from 'react';
+/**
+ * Represents the Object which is passed to the
+ * [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the MultiSelectTree component.
+ */
+export interface MultiSelectTreeHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLElement | null;
+    /**
+     * The props of the MultiSelectTree component.
+     */
+    props: MultiSelectTreeProps;
+    /**
+     * The focus function.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the object of the `onFilterChange` MultiSelectTree event.
+ */
+export interface MultiSelectTreeFilterChangeEvent extends FilterChangeEvent<MultiSelectTreeHandle> {
+}
+export type MultiSelectTreeChangeEventOperation = 'clear' | 'delete' | 'toggle';
+/**
+ * Represents the object of the `onChange` MultiSelectTree event.
+ */
+export interface MultiSelectTreeChangeEvent extends DropdownEvent<MultiSelectTreeHandle> {
+    /**
+     * The items related to current operation.
+     */
+    items: any[];
+    /**
+     * Describes the current operation:
+     * * `clear` - clear button is clicked and value is cleared. Null value is retured.
+     * * `delete` - tag is deleted using keyboard or mouse. The items contained in current tag are returned.
+     * * `toggle` - item in TreeView is toggled. Single item is returned.
+     */
+    operation: MultiSelectTreeChangeEventOperation;
+}
+/**
+ * Represents the object of the `onOpen` MultiSelectTree event.
+ */
+export interface MultiSelectTreeOpenEvent extends OpenEvent<MultiSelectTreeHandle> {
+}
+/**
+ * Represents the object of the `onClose` MultiSelectTree event.
+ */
+export interface MultiSelectTreeCloseEvent extends CloseEvent<MultiSelectTreeHandle> {
+}
+/**
+ * Represents the object of the `onFocus` MultiSelectTree event.
+ */
+export interface MultiSelectTreeFocusEvent extends FocusEvent<MultiSelectTreeHandle> {
+}
+/**
+ * Represents the object of the `onBlur` MultiSelectTree event.
+ */
+export interface MultiSelectTreeBlurEvent extends BlurEvent<MultiSelectTreeHandle> {
+}
+/**
+ * Represents the object of the `onCancel` MultiSelectTree event.
+ */
+export interface MultiSelectTreeCancelEvent extends CancelEvent<MultiSelectTreeHandle> {
+}
+/**
+ * Represents the object of the `onExpandChange` MultiSelectTree event.
+ */
+export interface MultiSelectTreeExpandEvent extends DropdownEvent<MultiSelectTreeHandle> {
+    /**
+     * The data item that was expanded or collapsed.
+     */
+    item: any;
+    /**
+     * The hierarchical index path to the item.
+     */
+    level: number[];
+}
+/**
+ * The props of component that will be used for rendering each of the MultiSelectTree items
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/custom-rendering#toc-items-and-value-element)).
+ */
+export interface MultiSelectTreeItemProps extends ItemRenderProps {
+}
+/**
+ * The props of component that will be used for rendering each of the MultiSelectTree tags
+ */
+export interface MultiSelectTreeTagProps {
+    /**
+     * The data for the tag being rendered.
+     */
+    tagData: TagData;
+    /**
+     * The unique identifier for the tag.
+     */
+    guid: string;
+    /**
+     * The currently focused tag data, if any.
+     */
+    focusedTag?: TagData;
+    /**
+     * The callback function that is triggered when a tag is deleted.
+     */
+    onTagDelete: (items: Array<any>, event: React.MouseEvent<HTMLSpanElement>) => void;
+}
+/**
+ * The props of the `ListNoData` component ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/custom-rendering#toc-no-data)).
+ */
+export interface MultiSelectTreeListNoDataProps {
+    /**
+     * The child components to render when no data is available.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Represents the props of the [KendoReact MultiSelectTree component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree).
+ */
+export interface MultiSelectTreeProps extends FormComponentProps {
+    /**
+     * Sets the data of the MultiSelectTree ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree data={[{ text: 'Node1' }, { text: 'Node2' }]} />
+     * ```
+     */
+    data?: any[];
+    /**
+     * Sets the opened state of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree opened={true} />
+     * ```
+     */
+    opened?: boolean;
+    /**
+     * The styles that are applied to the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree style={{ width: '400px' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the value of the MultiSelectTree. It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree value={['Node1']} />
+     * ```
+     */
+    value?: Array<any>;
+    /**
+     * The hint that is displayed when the MultiSelectTree is empty.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree placeholder="Select items" />
+     * ```
+     */
+    placeholder?: string;
+    /**
+     * Sets the key for comparing the data items of the MultiSelectTree ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree)).
+     * If `dataItemKey` is not set, the MultiSelectTree compares the items by reference.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree dataItemKey="id" />
+     * ```
+     */
+    dataItemKey: string;
+    /**
+     * Sets additional classes to the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets the disabled state of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Renders a floating label for the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree label="Select items" />
+     * ```
+     */
+    label?: string;
+    /**
+     * Specifies the id of the component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree id="multi-select-tree" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Sets the tags of the MultiSelect ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/custom-tags)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree tags={[{ text: 'Tag1' }, { text: 'Tag2' }]} />
+     * ```
+     */
+    tags?: Array<TagData>;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree ariaDescribedBy="description" />
+     * ```
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree ariaLabelledBy="label" />
+     * ```
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Enables the filtering functionality of the MultiSelectTree ([more information and examples](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/filtering)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree filterable={true} />
+     * ```
+     */
+    filterable?: boolean;
+    /**
+     * Sets the value of filtering input.
+     * Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree filter="search text" />
+     * ```
+     */
+    filter?: string;
+    /**
+     * Sets the loading state of the MultiSelectTree ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/filtering#toc-visualize-filtering)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree loading={true} />
+     * ```
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree accessKey="m" />
+     * ```
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree textField="name" />
+     * ```
+     */
+    textField: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree checkField="checked" />
+     * ```
+     */
+    checkField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the checked indeterminate state of the item.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree checkIndeterminateField="indeterminate" />
+     * ```
+     */
+    checkIndeterminateField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree expandField="expanded" />
+     * ```
+     */
+    expandField?: string;
+    /**
+     * Specifies the name of the field which will provide an array representation of the item subitems.
+     * Defaults to 'items'.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree subItemsField="children" />
+     * ```
+     */
+    subItemsField?: string;
+    /**
+     * Configures the popup of the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree popupSettings={{ animate: true }} />
+     * ```
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://react.dev/reference/react-dom/components/select) element.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree valueMap={value => value && value.id} />
+     * ```
+     */
+    valueMap?: (value: Array<any>) => any;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to open.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onOpen={(event) => console.log(event)} />
+     * ```
+     */
+    onOpen?: (event: MultiSelectTreeOpenEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to close.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onClose={(event) => console.log(event)} />
+     * ```
+     */
+    onClose?: (event: MultiSelectTreeCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the MultiSelectTree.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onFocus={(event) => console.log(event)} />
+     * ```
+     */
+    onFocus?: (event: MultiSelectTreeFocusEvent) => void;
+    /**
+     * Fires each time the MultiSelectTree gets blurred.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onBlur={(event) => console.log(event)} />
+     * ```
+     */
+    onBlur?: (event: MultiSelectTreeBlurEvent) => void;
+    /**
+     * Fires each time the value of the MultiSelectTree is about to change ([see examples](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onChange={(event) => console.log(event)} />
+     * ```
+     */
+    onChange?: (event: MultiSelectTreeChangeEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to cancel in ([adaptive mode](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/adaptive-rendering)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onCancel={(event) => console.log(event)} />
+     * ```
+     */
+    onCancel?: (event: MultiSelectTreeCancelEvent) => void;
+    /**
+     * Fires each time the user types in the filter input
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/filtering#toc-basic-configuration)).
+     * You can filter the source based on the passed filtration value.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onFilterChange={(event) => console.log(event)} />
+     * ```
+     */
+    onFilterChange?: (event: MultiSelectTreeFilterChangeEvent) => void;
+    /**
+     * Fires when the expanding or collapsing of an item is requested ([see examples](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree onExpandChange={(event) => console.log(event)} />
+     * ```
+     */
+    onExpandChange?: (event: any) => void;
+    /**
+     * Defines the component that will be used for rendering each of the MultiSelectTree items
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/custom-rendering#toc-items-and-value-element)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree item={(props) => <div>{props.item.text}</div>} />
+     * ```
+     */
+    item?: React.ComponentType<MultiSelectTreeItemProps>;
+    /**
+     * Defines the component that will be rendered in the MultiSelectTree popup when no data is available
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/custom-rendering#toc-no-data)).
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree listNoData={() => <div>No data available</div>} />
+     * ```
+     */
+    listNoData?: React.ComponentType<MultiSelectTreeListNoDataProps>;
+    /**
+     * Defines the component that will be used for rendering each of the MultiSelectTree tags.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree tag={(props) => <span>{props.tagData.text}</span>} />
+     * ```
+     */
+    tag?: React.ComponentType<MultiSelectTreeTagProps>;
+    /**
+     * Configures the `size` of the MultiSelectTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MultiSelectTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree rounded="full" />
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MultiSelectTree.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree fillMode="outline" />
+     * ```
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree adaptive={true} />
+     * ```
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree adaptiveTitle="Adaptive Popup Title" />
+     * ```
+     */
+    adaptiveTitle?: string | React.ReactNode;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <MultiSelectTree adaptiveSubtitle="Adaptive Popup Subtitle" />
+     * ```
+     */
+    adaptiveSubtitle?: string;
+}

package/MultiSelectTree/utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MultiSelectTreeChangeEventOperation } from './MultiSelectTreeProps.js';
+/** @hidden */
+export declare const getValueMap: (value: any[], idGetter: any) => any;
+/**
+ * Get MultiSelectTree new value from the component `onChange` event.
+ *
+ * @param {any[]} data
+ * @param {object} options
+ * @returns {any[]}
+ */
+export declare const getMultiSelectTreeValue: (data: any[], options: {
+    subItemsField?: string;
+    dataItemKey: string;
+    items: any;
+    value: Array<any>;
+    operation: MultiSelectTreeChangeEventOperation;
+}) => any[];

package/common/AdaptiveMode.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ActionSheetProps } from '@progress/kendo-react-layout';
+import * as React from 'react';
+/** @hidden */
+export interface AdaptiveModeProps extends ActionSheetProps {
+    windowWidth?: number;
+    mobileFilter?: React.ReactNode;
+    footer?: {
+        cancelText: string;
+        onCancel: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        applyText: string;
+        onApply: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+}
+/** @hidden */
+export declare const AdaptiveMode: (props: AdaptiveModeProps) => React.JSX.Element;

package/common/ClearButton.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface ClearButtonProps {
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+}
+/**
+ * @hidden
+ */
+declare const ClearButton: (props: ClearButtonProps) => React.JSX.Element;
+export default ClearButton;