@progress/kendo-react-common 7.2.4-develop.2 → 7.2.4-develop.4

package/index.d.mts

@@ -1,5 +1,1771 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-export * from './index';
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { NormalizedDragEvent } from '@progress/kendo-draggable-common';
+import PropTypes from 'prop-types';
+import * as React_2 from 'react';
+import { validatePackage as validatePackage_2 } from '@progress/kendo-licensing';
+
+/**
+ * @hidden
+ */
+export declare function addItem(item: any, operation: 'before' | 'after' | 'child', childrenField: string, targetItemId: string, items: any[]): any[];
+
+/**
+ * @hidden
+ */
+export declare const applyTrappedFocus: (e: React.KeyboardEvent, containerElement: HTMLElement, updateFocusedState?: ((isContainerFocused: boolean) => void) | undefined) => void;
+
+/**
+ * @hidden
+ */
+export declare function areAllDirectChildrenChecked(item: any, itemId: any, idField: string | undefined, childrenField: string, check: string[]): boolean;
+
+/**
+ * An utility High-order Component for asynchronous focus/blur handling.
+ *
+ * By default, the `onFocus` and `onBlur` callbacks are called every time a child components receives/loses focus.
+ * Use this utility HOC for scenarios where you need to know if the parent has received focus for the first time, or completely lost focus.
+ *
+ * @returns
+ */
+export declare const AsyncFocusBlur: ({ children, onFocus, onBlur, onSyncFocus, onSyncBlur }: AsyncFocusBlurArgs<any> & {
+    children: (args: AsyncFocusBlurArgs<any>) => React_2.ReactNode;
+}) => JSX_2.Element;
+
+/**
+ * @hidden
+ */
+export declare type AsyncFocusBlurArgs<T extends any[]> = {
+    onFocus?: (...event: T) => void;
+    onBlur?: (...event: T) => void;
+    /**
+     * @hidden
+     */
+    onSyncFocus?: (event: React_2.FocusEvent<any>) => void;
+    /**
+     * @hidden
+     */
+    onSyncBlur?: (event: React_2.FocusEvent<any>) => void;
+};
+
+/**
+ * Represents additional configuration options for the `autoScroll` options of the `useDraggable` hook and `Draggable` component.
+ */
+export declare interface AutoScrollOptions {
+    /**
+     * Set to `false` to disable the `autoScroll` feature.
+     */
+    enabled?: boolean;
+    /**
+     * Allows the user to toggle `autoScroll` in a specific direction.
+     */
+    direction?: {
+        horizontal: boolean;
+        vertical: boolean;
+    };
+    /**
+     * Overrides the calculated element used for boundary detection, used to calculate the `autoScroll` velocity.
+     */
+    boundaryElementRef?: React.RefObject<HTMLElement | null | {
+        element: HTMLElement | null;
+    }> | null;
+}
+
+/** @hidden */
+declare interface BaseDraggableEvent {
+    /**
+     * The DOM element.
+     */
+    element: HTMLElement;
+    /**
+     * The target Draggable reference.
+     */
+    target: DraggableHandle;
+    /**
+     * The normalized drag event.
+     */
+    event: NormalizedDragEvent;
+}
+
+/** @hidden */
+declare interface BaseDroppableEvent {
+    /**
+     * The DOM element.
+     */
+    element: HTMLElement;
+    /**
+     * The target Draggable reference.
+     */
+    target: DroppableHandle;
+    /**
+     * The normalized drag event.
+     */
+    event: NormalizedDragEvent;
+}
+
+/**
+ * @hidden
+ */
+export declare interface BaseEvent<T> {
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React_2.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+    /**
+     * An event target.
+     */
+    target: T;
+}
+
+/**
+ * @hidden
+ */
+declare interface BaseIconProps {
+    /**
+     * Sets the `tabIndex` of the icon element.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `id` of the icon element.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the icon.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies a list of CSS classes that will be added to the root DOM element.
+     */
+    className?: string;
+    /**
+     * Specifies the theme color of the Icon.
+     *
+     * The possible values are:
+     * * `inherit` (Default)&mdash;Applies coloring based on the current color.
+     * * `primary` &mdash;Applies coloring based on primary theme color.
+     * * `secondary`&mdash;Applies coloring based on secondary theme color.
+     * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
+     * * `info`&mdash;Applies coloring based on info theme color.
+     * * `success`&mdash; Applies coloring based on success theme color.
+     * * `warning`&mdash; Applies coloring based on warning theme color.
+     * * `error`&mdash; Applies coloring based on error theme color.
+     * * `dark`&mdash; Applies coloring based on dark theme color.
+     * * `light`&mdash; Applies coloring based on light theme color.
+     * * `inverse`&mdash; Applies coloring based on inverse theme color.
+     *
+     * If the property is not set, the icon inherits the color from its parent.
+     *
+     * You can use the `style` prop to apply custom color related properties to the icon.
+     */
+    themeColor?: IconThemeColor;
+    /**
+     * Specifies the size of the icon.
+     *
+     * The possible values are:
+     * * `default` (Default)&mdash;Font-size: 16px; Width: 16px; Height: 16px.
+     * * `xsmall`&mdash;Font-size: 12px; Width: 12px; Height: 12px.
+     * * `small`&mdash;Font-size: 14px; Width: 14px; Height: 14px.
+     * * `medium`&mdash;Font-size: 16px; Width: 16px; Height: 16px.
+     * * `large`&mdash;Font-size: 20px; Width: 20px; Height: 20px.
+     * * `xlarge`&mdash;Font-size: 24px; Width: 24px; Height: 24px.
+     * * `xxlarge`&mdash;Font-size: 32px; Width: 32px; Height: 32px.
+     * * `xxxlarge`&mdash;Font-size: 48px; Width: 48px; Height: 48px.
+     *
+     * You can use the `style` prop to apply custom font size to the icon.
+     */
+    size?: IconSize;
+    /**
+     * Specifies the icon flip direction.
+     *
+     * The possible values are:
+     * * `default` (Default)&mdash;No flipping applied.
+     * * `horizontal`&mdash;Flips the icon in horizontal direction.
+     * * `vertical`&mdash;Flips the icon in vertical direction.
+     * * `both`&mdash;Flips the icon in both horizontal and vertical directions.
+     *
+     */
+    flip?: IconFlip;
+}
+
+/**
+ * @hidden
+ */
+export declare class BrowserSupportService {
+    private scrollbar;
+    get scrollbarWidth(): number;
+}
+
+/**
+ * @hidden
+ */
+export declare const canUseDOM: boolean;
+
+/**
+ * @hidden
+ */
+export declare const canUseRef: (Component: React_2.ComponentType | string) => boolean;
+
+/**
+ * @hidden
+ */
+export declare const classNames: (...args: any[]) => string;
+
+/**
+ * @hidden
+ */
+export declare function clone(obj: any): any;
+
+/**
+ * @hidden
+ */
+export declare function cloneArray(array: any[]): any;
+
+/**
+ * @hidden
+ */
+export declare const cloneDate: (date?: Date) => Date | null;
+
+/**
+ * @hidden
+ */
+export declare function cloneObject(obj: any, result: any): void;
+
+/**
+ * @hidden
+ */
+export declare function cloneValue(value: any, nextValue: any): any;
+
+/** @hidden */
+export declare type Collection<T> = T[];
+
+/** @hidden */
+export declare enum COLLECTION_ACTION {
+    add = 0,
+    remove = 1
+}
+
+/** @hidden */
+export declare interface CollectionAction<T> {
+    type: COLLECTION_ACTION;
+    item: T;
+}
+
+/**
+ * @hidden
+ */
+declare function createId(childId: string | number, parentId?: string): string;
+
+/** @hidden */
+export declare const createPropsContext: <T extends unknown>() => React_2.Context<(p: T) => T>;
+
+/**
+ * @hidden
+ */
+export declare type CustomComponent<P = unknown> = React_2.ComponentType<P> | React_2.ReactElement<Partial<P>> | string;
+
+/**
+ * @hidden
+ * Dispatches a new event based on an event that was already internally dispatched to KendoReact users.
+ *
+ * @param eventHandler - The public event handler that is assigned by the user.
+ * When undefined, the method is not an option.
+ * @param dispatchedEvent - The event that was already dispatched internally.
+ * @param target - The target component of the new event.
+ * @param eventData - The additional data that will be passed through the new event.
+ * When the new event has no additional data
+ *  other than the `BaseEvent` arguments, pass `undefined`.
+ */
+declare function dispatchEvent_2<E extends BaseEvent<React.Component | FCHandle>, FCHandle = object>(eventHandler: ((event: E) => void) | undefined, dispatchedEvent: React.SyntheticEvent<any>, target: E['target'], eventData: Exclude<keyof E, keyof BaseEvent<React.Component | FCHandle>> extends never ? undefined : Pick<E, Exclude<keyof E, keyof BaseEvent<React.Component | FCHandle>>>): void;
+export { dispatchEvent_2 as dispatchEvent }
+
+/**
+ * The `DragAndDrop` component is required for the `droppable` functionality to work properly.
+ *
+ * It is used internally to synchronize the `drag` and `drop` functionalities.
+ * Accepts properties of type [DragAndDropProps]({% slug api_common_draganddropprops %}).
+ */
+export declare const DragAndDrop: {
+    (props: DragAndDropProps): JSX_2.Element;
+    displayName: string;
+};
+
+/**
+ * Represents the properties of the `DragAndDrop` component.
+ */
+export declare interface DragAndDropProps {
+    /**
+     * Represents the `children` of the `DragAndDrop` component. The `children` prop can be any valid React Element.
+     */
+    children?: React_2.ReactNode;
+}
+
+/**
+ * Represents the KendoReact Draggable component.
+ *
+ * Accepts properties of type [DraggableProps]({% slug api_common_draggableprops %}),
+ * and returns an object of type [DraggableHandle]({% slug api_common_draggablehandle %}) when the `ref` is obtained.
+ */
+export declare const Draggable: React_2.ForwardRefExoticComponent<DraggableProps & React_2.RefAttributes<DraggableHandle | null>>;
+
+export declare type Draggable = DraggableHandle;
+
+/**
+ * Represents the object of the `onDragEnd` callback.
+ */
+export declare interface DraggableDragEndEvent extends BaseDraggableEvent {
+}
+
+/**
+ * Represents the object of the `onDrag` callback.
+ */
+export declare interface DraggableDragEvent extends BaseDraggableEvent {
+}
+
+/**
+ * Represents the object of the `onDragStart` callback.
+ */
+export declare interface DraggableDragStartEvent extends BaseDraggableEvent {
+}
+
+/**
+ * Represents the `ref` object of the `Draggable` component.
+ */
+export declare interface DraggableHandle {
+    /**
+     * The element which is being dragged.
+     */
+    element: HTMLElement | null;
+}
+
+/**
+ * Represents the configuration object type of the `Draggable` component and `useDraggable` hook.
+ */
+export declare interface DraggableOptions {
+    /**
+     * Set the `hint` to override the element used for collision detection.
+     *
+     * For more information, refer to the [Drag Hint]({% slug drag-hint_drag-and-drop %}) article.
+     */
+    hint?: React_2.RefObject<HTMLElement | null | {
+        element: HTMLElement | null;
+    }> | null;
+    /**
+     * Set the `mouseOnly` property to `true` to stop the draggable from attaching `touch` event handlers.
+     *
+     * Defaults to `false`.
+     */
+    mouseOnly?: boolean;
+    /**
+     * Set the `autoScroll` property to `false` to disable automatic container scroll when close to the edge.
+     * For more information, refer to the [Auto Scroll]({% slug auto-scroll_drag-and-drop %}) article.
+     *
+     * Defaults to `true`.
+     */
+    autoScroll?: boolean | AutoScrollOptions;
+    /**
+     * @hidden
+     */
+    scrollContainer?: React_2.RefObject<HTMLElement | null | {
+        element: HTMLElement | null;
+    }>;
+}
+
+/**
+ * Represents the object of the `onPress` callback.
+ */
+export declare interface DraggablePressEvent extends BaseDraggableEvent {
+}
+
+/**
+ * Represents the props of the KendoReact Draggable component.
+ */
+export declare interface DraggableProps extends DraggableOptions {
+    /**
+     * Fires when the user press element inside the Draggable component.
+     */
+    onPress?: (event: DraggablePressEvent) => void;
+    /**
+     * Fires when the user starts dragging the element inside the Draggable component.
+     */
+    onDragStart?: (event: DraggableDragStartEvent) => void;
+    /**
+     * Fires when the user drag the element inside the Draggable component.
+     */
+    onDrag?: (event: DraggableDragEvent) => void;
+    /**
+     * Fires when the user finishes dragging the element inside the Draggable component.
+     */
+    onDragEnd?: (event: DraggableDragEndEvent) => void;
+    /**
+     * Fires when the user release the current drag action.
+     */
+    onRelease?: (event: DraggableReleaseEvent) => void;
+    /**
+     * Callback to get the child element ref. Useful as the Draggable overrides ref of the child element.
+     */
+    childRef?: React_2.Ref<HTMLElement | null | {
+        element: HTMLElement | null;
+        [key: string]: any;
+    }>;
+    /** @hidden */
+    children?: React_2.ReactNode;
+}
+
+/**
+ * Represents the object of the `onRelease` callback.
+ */
+export declare interface DraggableReleaseEvent extends BaseDraggableEvent {
+}
+
+/**
+ * Represents the KendoReact Droppable component.
+ *
+ * Accepts properties of type [DroppableProps]({% slug api_common_droppableprops %}),
+ * and returns an object of type [DroppableHandle]({% slug api_common_droppablehandle %}) when the `ref` is obtained.
+ */
+export declare const Droppable: React_2.ForwardRefExoticComponent<DroppableProps & React_2.RefAttributes<DroppableHandle | null>>;
+
+export declare type Droppable = DroppableHandle;
+
+/**
+ * Represents the object of the `onDragEnter` callback.
+ */
+export declare interface DroppableDragEnterEvent extends BaseDroppableEvent {
+}
+
+/**
+ * Represents the object of the `onDragLeave` callback.
+ */
+export declare interface DroppableDragLeaveEvent extends BaseDroppableEvent {
+}
+
+/**
+ * Represents the object of the `onDragOver` callback.
+ */
+export declare interface DroppableDragOverEvent extends BaseDroppableEvent {
+}
+
+/**
+ * Represents the object of the `onDrop` callback.
+ */
+export declare interface DroppableDropEvent extends BaseDroppableEvent {
+}
+
+/**
+ * Represents the `ref` object of the `Droppable` component.
+ */
+export declare interface DroppableHandle {
+    /**
+     * The element which is registered as droppable.
+     */
+    element?: HTMLElement;
+}
+
+/**
+ * Represents the props of the KendoReact Droppable component.
+ */
+export declare interface DroppableProps {
+    /**
+     * Fires when the user enters the element during drag.
+     */
+    onDragEnter?: (event: DroppableDragEnterEvent) => void;
+    /**
+     * Fires when the user is dragging an element over the Droppable component.
+     */
+    onDragOver?: (event: DroppableDragOverEvent) => void;
+    /**
+     * Fires when the user leaves the element during drag.
+     */
+    onDragLeave?: (event: DroppableDragLeaveEvent) => void;
+    /**
+     * Fires when the user drops a draggable element inside the Droppable component.
+     */
+    onDrop?: (event: DroppableDropEvent) => void;
+    /**
+     * Callback to get the child element ref. Useful as the Droppable overrides ref of the child element.
+     */
+    childRef?: React_2.Ref<HTMLElement | null | {
+        element: HTMLElement | null;
+        [key: string]: any;
+    }>;
+    /** @hidden */
+    children?: React_2.ReactNode;
+}
+
+declare type ElementMouse = {
+    [P in keyof Required<KendoMouse<any, any>>]: (event: React_2.MouseEvent<any>) => void;
+};
+
+/**
+ * @hidden
+ */
+declare const EMPTY_ID = "";
+
+declare type EqualityFn<TFunc extends (...args: any[]) => any> = (newArgs: Parameters<TFunc>, lastArgs: Parameters<TFunc>) => boolean;
+
+/**
+ * Similar to the `Object.assign` function. Additionally, creates a new array for the subitems.
+ *
+ * @param {object} item - The source data item.
+ * @param {string} subItemsField - The field which points to the subitems collection of each data item.
+ * @param {object} propsToExtend - The props with which the source data item will be extended.
+ * @returns {object} - The target data item.
+ */
+export declare const extendDataItem: (item: any, subItemsField: string, propsToExtend?: any) => any;
+
+/**
+ * @hidden
+ */
+export declare interface FieldRenderPropsBase {
+    /**
+     * A callback you have to call when the value of the rendered component is changed
+     * ([see example]({% slug common_scenarios_form %}#toc-changing-the-field-value)).
+     * The `value` property of the event takes precedence over `target.value`.
+     */
+    onChange: (event: {
+        target?: any;
+        value?: any;
+    }) => void;
+    /**
+     * A callback you have to call when the rendered component is focused.
+     * Responsible for setting the visited state of the Field.
+     */
+    onFocus: () => void;
+    /**
+     * A callback you have to call when the rendered component is blurred.
+     * Responsible for setting the touched state of the Field.
+     */
+    onBlur: () => void;
+    /**
+     * Represents the current value of the Field
+     * ([see example]({% slug custom_components_form %}#toc-using-basic-properties)).
+     */
+    value: any;
+    /**
+     * Represents the error message that is returned by the validator.
+     * The Field is considered valid if the `validationMessage` field is empty.
+     */
+    validationMessage: string | null;
+    /**
+     * Indicates if the field is touched.
+     * The touched state is set to `true` when the `onBlur` callback is called.
+     */
+    touched: boolean;
+    /**
+     * Indicates if the field is modified.
+     * The modified state is set to `true` when the `onChange` callback for the current field is called for first time.
+     */
+    modified: boolean;
+    /**
+     * Indicates if the field is visited.
+     * The visited state is set to `true` when the `onFocus` callback is called.
+     */
+    visited: boolean;
+    /**
+     * A calculated property based on whether `validationMessage` is present and the `touched` state is set to `true`.
+     */
+    valid: boolean;
+    /**
+     * Represents the children that are passed to the Field.
+     */
+    children: any;
+    /**
+     * The name of the field in the Form state.
+     */
+    name: string;
+    /**
+     * @hidden
+     */
+    [customProp: string]: any;
+}
+
+/**
+ * @hidden
+ */
+export declare const firstFocusableChild: (element: HTMLElement) => HTMLElement | undefined;
+
+/**
+ * @hidden
+ */
+export declare const FOCUSABLE_ELEMENTS: string[];
+
+/**
+ * @hidden
+ */
+export declare const focusFirstFocusableChild: (element: HTMLElement) => void;
+
+/**
+ * @hidden
+ */
+export declare const focusLastFocusableChild: (element: HTMLElement) => void;
+
+/**
+ * @hidden
+ */
+export declare abstract class FormComponent {
+    abstract get value(): any;
+    abstract get validity(): FormComponentValidity;
+    abstract get name(): string | undefined;
+}
+
+/**
+ * Represents the basic props of the KendoReact form components.
+ *
+ * For runnable examples on forms support, refer to the documentation of the respective form component:
+ * * [DateInput]({% slug forms_dateinput %})
+ * * [DatePicker]({% slug forms_datepicker %})
+ * * [TimePicker]({% slug forms_timepicker %})
+ * * [DateTimePicker]({% slug forms_datetimepicker %})
+ * * [AutoComplete]({% slug forms_autocomplete %})
+ * * [ComboBox]({% slug forms_combobox %})
+ * * [DropDownList]({% slug forms_dropdownlist %})
+ * * [MultiSelect]({% slug forms_multiselect %})
+ * * [Input]({% slug forms_input %})
+ * * [MaskedTextBox]({% slug forms_maskedtextbox %})
+ * * [NumericTextBox]({% slug forms_numerictextbox %})
+ * * [Checkbox]({% slug forms_support_checkbox %})
+ * * [Switch]({% slug forms_support_switch %})
+ */
+export declare interface FormComponentProps {
+    /**
+     * Controls the form error message of the component. If set to an empty string, no error will be thrown.
+     *
+     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     */
+    validationMessage?: string;
+    /**
+     * Specifies if `null` is a valid value for the component.
+     *
+     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     */
+    required?: boolean;
+    /**
+     * Specifies the `name` property of the `input` DOM element.
+     *
+     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     */
+    name?: string;
+    /**
+     * Overrides the validity state of the component.
+     * If `valid` is set, the `required` property will be ignored.
+     *
+     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     */
+    valid?: boolean;
+    /**
+     * If set to `false`, no visual representation of the invalid state of the component will be applied.
+     *
+     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     */
+    validityStyles?: boolean;
+    /**
+     * @hidden
+     */
+    value?: any;
+    /**
+     * @hidden
+     */
+    defaultValue?: any;
+}
+
+/**
+ * Represents the `validity` state of the KendoReact form components.
+ *
+ * For runnable examples on forms support, refer to the documentation of the respective form component:
+ * * [DateInput]({% slug forms_dateinput %})
+ * * [DatePicker]({% slug forms_datepicker %})
+ * * [TimePicker]({% slug forms_timepicker %})
+ * * [DateTimePicker]({% slug forms_timepicker %})
+ * * [AutoComplete]({% slug forms_autocomplete %})
+ * * [ComboBox]({% slug forms_combobox %})
+ * * [DropDownList]({% slug forms_dropdownlist %})
+ * * [MultiSelect]({% slug forms_multiselect %})
+ * * [Input]({% slug forms_input %})
+ * * [MaskedTextBox]({% slug forms_maskedtextbox %})
+ * * [NumericTextBox]({% slug forms_numerictextbox %})
+ * * [Checkbox]({% slug forms_support_checkbox %})
+ * * [Switch]({% slug forms_support_switch %})
+ */
+export declare interface FormComponentValidity {
+    readonly badInput?: boolean;
+    readonly customError: boolean;
+    readonly patternMismatch?: boolean;
+    readonly rangeOverflow?: boolean;
+    readonly rangeUnderflow?: boolean;
+    readonly stepMismatch?: boolean;
+    readonly tooLong?: boolean;
+    readonly tooShort?: boolean;
+    readonly typeMismatch?: boolean;
+    readonly valid: boolean;
+    readonly valueMissing: boolean;
+}
+
+/**
+ * @hidden
+ */
+export declare const getActiveElement: (document: any) => HTMLElement | undefined;
+
+/**
+ * @hidden
+ */
+export declare function getAllDirectIndirectChildrenIds(item: any, itemId: string, childrenField: string, idField: string | undefined): any[];
+
+/**
+ * @hidden
+ */
+export declare function getAllParents(itemId: string, childrenField: string, items: any[]): any[];
+
+/**
+ * @hidden
+ */
+declare function getAllShortIds(itemId: string): string[];
+
+/**
+ * @hidden
+ */
+declare function getDecrementedItemIdAfterRemoval(removedItemId: string, itemId: string): string;
+
+/**
+ * @hidden
+ */
+declare function getDirectParentId(itemId: string): string;
+
+/**
+ * @hidden
+ */
+declare function getFirstChildId(itemId: string): string;
+
+/**
+ * @hidden
+ */
+declare function getIdWithoutRootParentId(itemId: string): string;
+
+/**
+ * @hidden
+ */
+export declare const getInnerActiveElement: any;
+
+/**
+ * @hidden
+ */
+declare function getItemById(itemId: string, items: any, childrenField: string): any;
+
+/**
+ * Returns the data item path in the tree based on the level parameter.
+ *
+ * @param {any[]} tree - The data tree.
+ * @param {number[]} level - The level of the target tree item.
+ * @param {string} subItemsField - The field which points to the subitems collection of each data item.
+ * @returns {any[]} - The path of the data item.
+ */
+export declare const getItemPath: (tree: any[], level: number[], subItemsField?: string) => any[];
+
+/**
+ * @hidden
+ */
+export declare function getNestedValue(fieldName: string | undefined, dataItem: any): any;
+
+/**
+ * @hidden
+ */
+declare function getRootParentId(itemId: string): string;
+
+/**
+ * @hidden
+ */
+export declare const getScrollbarWidth: () => number | false;
+
+/**
+ * @hidden
+ */
+declare function getShortId(itemId: string): string;
+
+/**
+ * @hidden
+ */
+export declare const getTabIndex: (tabIndex?: number | string, disabled?: boolean, useDefaultTabIndexWhenDisabled?: boolean) => number | undefined;
+
+/**
+ * Can be used for getting value from object using field path. For example `users[index].name`.
+ *
+ * @example
+ * ```jsx-no-run
+ * const values = {users:[{lastName: 'Doe'}]};
+ * const firstUserLastName = getter('user[0].lastName');
+ *
+ * console.log(firstUserLastName(values))
+ *
+ * // result: 'Doe'
+ * ```
+ */
+export declare function getter(field: string): (values: any) => any;
+
+/**
+ * @hidden
+ */
+export declare const guid: Function;
+
+/**
+ * @hidden
+ */
+export declare function hasChildren(item: any, childrenField: string): boolean;
+
+/** @hidden */
+export declare const hasRelativeStackingContext: (elementSource?: HTMLElement) => boolean;
+
+/**
+ * Represents the [KendoReact Icon component]({% slug overview_icon %}).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *   return (
+ *       <Icon name="home"/>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const Icon: React_2.ForwardRefExoticComponent<IconProps & React_2.RefAttributes<IconHandle | null>>;
+
+/**
+ * Specifies the icon flip direction.
+ *
+ * The possible values are:
+ * * `default` (Default)&mdash;No flipping applied.
+ * * `horizontal`&mdash;Flips the icon in horizontal direction.
+ * * `vertical`&mdash;Flips the icon in vertical direction.
+ * * `both`&mdash;Flips the icon in both horizontal and vertical directions.
+ *
+ */
+export declare type IconFlip = 'default' | 'horizontal' | 'vertical' | 'both';
+
+/**
+ * @hidden
+ */
+export declare interface IconHandle {
+    /**
+     * The IconHandle element.
+     */
+    element: HTMLSpanElement | null;
+}
+
+/**
+ * Represents the props of the [KendoReact Icon component]({% slug overview_icon %}).
+ */
+export declare interface IconProps extends BaseIconProps, KendoMouse<IconHandle, HTMLSpanElement> {
+    /**
+     * Represents the name of the icon.
+     */
+    name?: string;
+}
+
+/**
+ * Represents a React Context which provides you with the option to configure the KendoReact components icons.
+ */
+export declare const IconsContext: React_2.Context<IconsContextType>;
+
+/**
+ * IconsContext type.
+ */
+export declare interface IconsContextType {
+    /**
+     * Sets the type of the icons used in the KendoReact components inside IconsContext.
+     */
+    type?: 'font' | 'svg';
+    /**
+     * Overrides the built-in icons.
+     */
+    icons?: {
+        [name: string]: SVGIcon | string;
+    };
+}
+
+/**
+ * Specifies the size of the icon.
+ *
+ * The possible values are:
+ * * `default` (Default)&mdash;Font-size: 16px; Width: 16px; Height: 16px.
+ * * `xsmall`&mdash;Font-size: 12px; Width: 12px; Height: 12px.
+ * * `small`&mdash;Font-size: 14px; Width: 14px; Height: 14px.
+ * * `medium`&mdash;Font-size: 16px; Width: 16px; Height: 16px.
+ * * `large`&mdash;Font-size: 20px; Width: 20px; Height: 20px.
+ * * `xlarge`&mdash;Font-size: 24px; Width: 24px; Height: 24px.
+ * * `xxlarge`&mdash;Font-size: 32px; Width: 32px; Height: 32px.
+ * * `xxxlarge`&mdash;Font-size: 48px; Width: 48px; Height: 48px.
+ *
+ */
+export declare type IconSize = 'default' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+
+/**
+ * Specifies the theme color of the Icon.
+ *
+ * The possible values are:
+ * * `inherit` (Default)&mdash;Applies coloring based on the current color.
+ * * `primary` &mdash;Applies coloring based on primary theme color.
+ * * `secondary`&mdash;Applies coloring based on secondary theme color.
+ * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
+ * * `info`&mdash;Applies coloring based on info theme color.
+ * * `success`&mdash; Applies coloring based on success theme color.
+ * * `warning`&mdash; Applies coloring based on warning theme color.
+ * * `error`&mdash; Applies coloring based on error theme color.
+ * * `dark`&mdash; Applies coloring based on dark theme color.
+ * * `light`&mdash; Applies coloring based on light theme color.
+ * * `inverse`&mdash; Applies coloring based on inverse theme color.
+ *
+ * If the property is not set, the icon inherits the color from its parent.
+ *
+ * You can use the `style` prop to apply custom color related properties to the icon.
+ */
+export declare type IconThemeColor = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+
+/**
+ * @hidden
+ */
+export declare const IconWrap: React_2.ForwardRefExoticComponent<IconProps & SvgIconProps & React_2.RefAttributes<(IconHandle & SvgIconHandle) | null>>;
+
+/**
+ * @hidden
+ */
+export declare function isArray(operation: string[] | any): operation is any[];
+
+/**
+ * @hidden
+ */
+export declare function isEnabledAndAllParentsEnabled(itemId: string, items: any, fieldsSvc: TreeFieldsService): any;
+
+/**
+ * @hidden
+ */
+declare function isIdEmptyOrZeroLevel(itemId: string): boolean;
+
+/**
+ * @hidden
+ */
+declare function isIdZeroLevel(itemId: string): boolean;
+
+/**
+ * @hidden
+ */
+export declare function isItemExpandedAndWithChildren(item: any, fieldsSvc: TreeFieldsService): boolean | undefined;
+
+/**
+ * @hidden
+ */
+declare function isItemFirstFromSiblings(itemId: string): boolean;
+
+/**
+ * @hidden
+ */
+export declare const keepFocusInContainer: (e: React.KeyboardEvent, containerElement?: HTMLElement | null) => void;
+
+export declare interface KendoMouse<T, E extends HTMLElement> {
+    onMouseDown?: (args: KendoMouseEvent<T, E>) => void;
+    onMouseUp?: (args: KendoMouseEvent<T, E>) => void;
+    onClick?: (args: KendoMouseEvent<T, E>) => void;
+    onDoubleClick?: (args: KendoMouseEvent<T, E>) => void;
+    onMouseEnter?: (args: KendoMouseEvent<T, E>) => void;
+    onMouseLeave?: (args: KendoMouseEvent<T, E>) => void;
+    onMouseMove?: (args: KendoMouseEvent<T, E>) => void;
+    onMouseOut?: (args: KendoMouseEvent<T, E>) => void;
+    onMouseOver?: (args: KendoMouseEvent<T, E>) => void;
+}
+
+export declare interface KendoMouseEvent<T, E extends HTMLElement = HTMLElement> {
+    syntheticEvent: React_2.MouseEvent<E>;
+    target: T;
+}
+
+/**
+ * @hidden
+ */
+export declare interface KendoPointer<T, E extends HTMLElement> {
+    onPointerDown?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerMove?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerUp?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerCancel?: (args: KendoPointerEvent<T, E>) => void;
+    onGotPointerCapture?: (args: KendoPointerEvent<T, E>) => void;
+    onLostPointerCapture?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerEnter?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerOver?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerLeave?: (args: KendoPointerEvent<T, E>) => void;
+    onPointerOut?: (args: KendoPointerEvent<T, E>) => void;
+}
+
+/**
+ * @hidden
+ */
+export declare interface KendoPointerEvent<T, E extends HTMLElement = HTMLElement> {
+    syntheticEvent: React_2.PointerEvent<E>;
+    target: T;
+}
+
+/**
+ * @hidden
+ *
+ * Represents the base properties of a KendoReact component.
+ */
+export declare interface KendoReactComponentBaseProps {
+    /**
+     * Sets the `id` property of the top div element of the component.
+     */
+    id?: string;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional classes to the component.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the component.
+     */
+    style?: React.CSSProperties;
+}
+
+/** @hidden */
+export declare interface KendoThemeMaps {
+    sizeMap: Record<Exclude<any, null>, String>;
+    roundedMap: Record<Exclude<any, null>, String>;
+    orientationMap: Record<Exclude<any, null>, String>;
+}
+
+/** @hidden */
+export declare const kendoThemeMaps: KendoThemeMaps;
+
+/**
+ * @hidden
+ */
+export declare interface KendoTouch<T, E extends HTMLElement> {
+    onTouchStart?: (args: KendoTouchEvent<T, E>) => void;
+    onTouchMove?: (args: KendoTouchEvent<T, E>) => void;
+    onTouchEnd?: (args: KendoTouchEvent<T, E>) => void;
+    onTouchCancel?: (args: KendoTouchEvent<T, E>) => void;
+}
+
+/**
+ * @hidden
+ */
+export declare interface KendoTouchEvent<T, E extends HTMLElement = HTMLElement> {
+    syntheticEvent: React_2.TouchEvent<E>;
+    target: T;
+}
+
+/**
+ * @hidden
+ */
+export declare const Keys: {
+    backspace: number;
+    tab: number;
+    enter: number;
+    shift: number;
+    esc: number;
+    space: number;
+    pageUp: number;
+    pageDown: number;
+    end: number;
+    home: number;
+    left: number;
+    up: number;
+    right: number;
+    down: number;
+    delete: number;
+};
+
+/**
+ * @hidden
+ */
+export declare const lastFocusableChild: (element: HTMLElement) => HTMLElement | undefined;
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on every element in the provided data tree.
+ *
+ * @param {any[]} tree - The data tree.
+ * @param {string} subItemsField - The field which points to the subitems collection of each data item.
+ * @param {(value: any) => any} callback - The callback function.
+ * @returns {any[]} - The new data tree.
+ */
+export declare const mapTree: (tree: any[], subItemsField: string, callback: (value: any) => any) => any[];
+
+/**
+ * Creates a new array with the results of calling the provided callback function
+ * on the element which match the `level` in the provided data tree.
+ *
+ * @param {any[]} tree - The data tree.
+ * @param {number[]} level - An array of indexes of each parent and current item in the data tree.
+ * @param {string} subItemsField - The field which points to the subitems collection of each data item.
+ * @param {(value: any) => any} callback - The callback function.
+ * @returns {any[]} - The new data tree.
+ */
+export declare const mapTreeItem: (tree: any[], level: number[], subItemsField: string, callback: (value: any) => any) => void;
+
+/**
+ * The possible values for the Default and Material themes are:
+ * * `xsmall` &mdash;Applies 4px margin.
+ * * `small` &mdash;Applies 8px margin.
+ * * `medium` &mdash;Applies 12px margin.
+ * * `large` &mdash;Applies 16px margin.
+ * * `xlarge` &mdash;Applies 24px margin.
+ * * `thin` &mdash;Applies 2px margin.
+ * * `hair` &mdash;Applies 1px margin.
+ * * `number` &mdash;Passing a number will apply a margin of 4 times the passed number in pixels. The minimum number value is 0 and the maximum is 24.
+ *
+ * The possible values for the Bootstrap theme are:
+ * * `xsmall` &mdash;Applies 0.25rem margin.
+ * * `small` &mdash;Applies 0.5rem margin.
+ * * `medium` &mdash;Applies 0.75rem margin.
+ * * `large` &mdash;Applies 1rem margin.
+ * * `xlarge` &mdash;Applies 1.25rem margin.
+ * * `thin` &mdash;Applies 0.125rem margin.
+ * * `hair` &mdash;Applies 0.0625rem margin.
+ * * `number` &mdash;Passing a number will apply a margin equal to the passed number divided by 4 in rem units.
+ * The minimum number value is 0 and the maximum is 24.
+ */
+export declare type MarginEnum = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'thin' | 'hair' | number;
+
+declare type MemoizedFn<TFunc extends (this: any, ...args: any[]) => any> = {
+    clear: () => void;
+    (this: ThisParameterType<TFunc>, ...args: Parameters<TFunc>): ReturnType<TFunc>;
+};
+
+/**
+ * @hidden
+ */
+export declare function memoizeOne<TFunc extends (this: any, ...newArgs: any[]) => any>(resultFn: TFunc, isEqualFn?: EqualityFn<TFunc>): MemoizedFn<TFunc>;
+
+/**
+ * Represents the [KendoReact Navigation functionality]({% slug overview_navigation %}).
+ * It handles the navigation through a collection of DOM elements.
+ */
+export declare class Navigation {
+    /**
+     * @hidden
+     */
+    selectors: string[];
+    /**
+     * @hidden
+     */
+    mouseEvents: {
+        [type: string]: (target: HTMLElement, nav: Navigation, ev: React.MouseEvent<HTMLElement>) => void;
+    };
+    /**
+     * @hidden
+     */
+    keyboardEvents: {
+        [type: string]: {
+            [key: string]: (target: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>, options?: any) => void;
+        };
+    };
+    /**
+     * @hidden
+     */
+    tabIndex: number;
+    /**
+     * @hidden
+     */
+    focusOptions: FocusOptions;
+    /**
+     * @hidden
+     */
+    root: React.RefObject<HTMLElement>;
+    /**
+     * @hidden
+     */
+    rovingTabIndex?: boolean;
+    constructor(options: NavigationOptions);
+    /**
+     * Returns the collection of DOM elements which the module will navigate in.
+     */
+    get elements(): HTMLElement[];
+    /**
+     * Returns the first navigation DOM element.
+     */
+    get first(): HTMLElement | null;
+    /**
+     * Returns the last navigation DOM element.
+     */
+    get last(): HTMLElement | null;
+    /**
+     * Returns the focused DOM element from the navigation collection of DOM elements.
+     */
+    get current(): HTMLElement | null;
+    /**
+     * Focuses the next element from the navigation collection of DOM elements.
+     */
+    focusNext(target: HTMLElement): HTMLElement;
+    /**
+     * Focuses the previous element from the navigation collection of DOM elements.
+     */
+    focusPrevious(target: HTMLElement): HTMLElement;
+    /**
+     * The keyboard events handler.
+     */
+    triggerKeyboardEvent(ev: React.KeyboardEvent<HTMLElement>, options?: any): void;
+    /**
+     * The mouse events handler.
+     */
+    triggerMouseEvent(ev: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Focuses the passed element from the navigation collection of DOM elements.
+     */
+    focusElement(element: HTMLElement | null, previous: HTMLElement | null): void;
+    /**
+     * @hidden
+     */
+    update: () => void;
+    private focusNextIndex;
+}
+
+/**
+ * Represents the [Navigation]({% slug api_common_navigation %}) options object.
+ *
+ */
+export declare interface NavigationOptions {
+    /**
+     * Sets the tabIndex used by the [Navigation]({% slug api_common_navigation %}).
+     */
+    tabIndex: number;
+    /**
+     * Sets the root DOM element used by the [Navigation]({% slug api_common_navigation %}).
+     */
+    root: React.RefObject<HTMLElement>;
+    /**
+     * Sets the CSS selectors used by the [Navigation]({% slug api_common_navigation %}). The navigation DOM elements will be queried using the selectors.
+     * Make sure their order matches the navigating order.
+     */
+    selectors: string[];
+    /**
+     * Configures if the roving tabIndex technique will be used in the [Navigation]({% slug api_common_navigation %}).
+     */
+    rovingTabIndex?: boolean;
+    /**
+     * Sets the options of the focus methods that is used. Defaults to `{ preventScroll: true }`.
+     */
+    focusOptions?: FocusOptions;
+    /**
+     * Sets the mouse events handlers.
+     */
+    mouseEvents?: {
+        [type: string]: (target: HTMLElement, nav: Navigation, ev: React.MouseEvent<HTMLElement>) => void;
+    };
+    /**
+     * Sets the keyboard events handlers.
+     */
+    keyboardEvents?: {
+        [type: string]: {
+            [key: string]: (target: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>) => void;
+        };
+    };
+}
+
+/**
+ * @hidden
+ */
+export declare const noop: () => void;
+
+export { NormalizedDragEvent }
+
+/**
+ * @hidden
+ */
+export declare function removeItem(itemId: string, childrenField: string, items: any[]): any[];
+
+/**
+ * @hidden
+ */
+export declare function resolveItemId(publicId: any, idField: string, items: any[], childrenField: string): string | undefined;
+
+/**
+ * @hidden
+ */
+export declare function resolveItemsIds(publicIds: any[], idField: string, items: any[], childrenField: string): string[];
+
+/**
+ * @hidden
+ */
+declare const SEPARATOR = "_";
+
+/**
+ * @hidden
+ */
+export declare const setScrollbarWidth: () => false | undefined;
+
+/**
+ * Can be used for setting value to object using field path. For example `users[index].name`.
+ *
+ * @example
+ * ```jsx-no-run
+ * const values = {users:[{lastName: 'Doe'}]};
+ * const firstUserFirstName = setter('user[0].firstName');
+ *
+ * firstUserFirstName(values, 'John');
+ *
+ * console.log(values)
+ *
+ * // result: {users:[{firstName: 'John', lastName: 'Doe'}]}
+ * ```
+ */
+export declare function setter(field: string): any;
+
+/**
+ * @hidden
+ */
+export declare function shouldShowValidationUI(packageMetadata: any): boolean;
+
+/**
+ * @hidden
+ */
+export declare class SortedPublicItemIds {
+    private objects;
+    init(publicItemIds: any[]): void;
+    hasId(publicItemId: any): boolean;
+}
+
+/**
+ * @hidden
+ */
+export declare interface SVGIcon {
+    /**
+     * The unique name of the icon.
+     */
+    name: string;
+    /**
+     * The entire SVG content of the icon.
+     */
+    content: string;
+    /**
+     * The [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)
+     * definition that should be used for the icon.
+     */
+    viewBox: string;
+}
+
+/**
+ * Represents the [KendoReact SvgIcon component]({% slug overview_svgicon %}).
+ *
+ * @example
+ * ```jsx
+ * import { accessibility } from '@progress/kendo-svg-icons';
+ *
+ * const App = () => {
+ *   return (
+ *       <SvgIcon icon={accessibility} />
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const SvgIcon: React_2.ForwardRefExoticComponent<SvgIconProps & React_2.RefAttributes<SvgIconHandle | null>>;
+
+/**
+ * @hidden
+ */
+export declare interface SvgIconHandle {
+    /**
+     * The SvgIconHandle element.
+     */
+    element: HTMLSpanElement | null;
+}
+
+/**
+ * Represents the props of the [KendoReact SvgIcon component]({% slug overview_svgicon %}).
+ */
+export declare interface SvgIconProps extends BaseIconProps, React_2.SVGAttributes<HTMLOrSVGElement> {
+    /**
+     * Specifies the SVG icon.
+     *
+     * * The possible keys are:
+     * * `name`&mdash;The unique name of the icon.
+     * * `content`&mdash;The entire SVG content of the icon.
+     * * `viewBox`&mdash;The viewBox definition that should be used for the icon.
+     */
+    icon?: SVGIcon;
+    /**
+     * Specifies the viewBox of the custom SVG icon.
+     */
+    viewBox?: string;
+    /**
+     * Specifies a list of CSS classes that will be added to the svg element.
+     */
+    svgClassName?: string;
+    /**
+     * Sets additional CSS styles to the svg element.
+     */
+    svgStyle?: React_2.CSSProperties;
+}
+
+/**
+ * @hidden
+ */
+export declare const svgIconPropType: PropTypes.Requireable<PropTypes.InferProps<{
+    name: PropTypes.Validator<string>;
+    content: PropTypes.Validator<string>;
+    viewBox: PropTypes.Validator<string>;
+}>>;
+
+/**
+ * @hidden
+ */
+export declare const toIconClass: (name: string) => string;
+
+/**
+ * @hidden
+ */
+export declare const toIconName: (iconClass: string) => string;
+
+/**
+ * @hidden
+ */
+export declare class TreeFieldsService {
+    focusIdField: string | undefined;
+    private expandField;
+    private selectField;
+    private childrenField;
+    private hasChildrenField;
+    private textField;
+    private disableField;
+    private checkField;
+    private checkIndeterminateField;
+    constructor(treeViewProps: any);
+    expanded(item: any): boolean | undefined;
+    selected(item: any): boolean | undefined;
+    text(item: any): string | undefined;
+    disabled(item: any): boolean | undefined;
+    hasChildren(item: any): boolean | undefined;
+    children(item: any): any[];
+    checked(item: any): boolean | undefined;
+    checkIndeterminate(item: any): boolean | undefined;
+    focusId(item: any): any;
+    getChildrenField(): string;
+}
+
+declare namespace treeIdUtils {
+    export {
+        getItemById,
+        getRootParentId,
+        getIdWithoutRootParentId,
+        getFirstChildId,
+        createId,
+        getDirectParentId,
+        isIdEmptyOrZeroLevel,
+        isIdZeroLevel,
+        getAllShortIds,
+        getShortId,
+        isItemFirstFromSiblings,
+        getDecrementedItemIdAfterRemoval,
+        EMPTY_ID,
+        ZERO_LEVEL_ZERO_NODE_ID,
+        SEPARATOR
+    }
+}
+export { treeIdUtils }
+
+/**
+ * Represents the [KendoReact Typography component]({% slug overview_typography %}).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *   return (
+ *       <Typography.h2>Heading 2</Typography.h2>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const Typography: {
+    h1: React_2.ForwardRefExoticComponent<TypographyProps>;
+    h2: React_2.ForwardRefExoticComponent<TypographyProps>;
+    h3: React_2.ForwardRefExoticComponent<TypographyProps>;
+    h4: React_2.ForwardRefExoticComponent<TypographyProps>;
+    h5: React_2.ForwardRefExoticComponent<TypographyProps>;
+    h6: React_2.ForwardRefExoticComponent<TypographyProps>;
+    p: React_2.ForwardRefExoticComponent<TypographyProps>;
+    code: React_2.ForwardRefExoticComponent<TypographyProps>;
+    pre: React_2.ForwardRefExoticComponent<TypographyProps>;
+};
+
+/**
+ * @hidden
+ */
+export declare interface TypographyHandle {
+    /**
+     * The TypographyHandle element.
+     */
+    element: HTMLElement | null;
+}
+
+/**
+ * Represents the props of the [KendoReact Typography component]({% slug overview_typography %}).
+ */
+export declare interface TypographyProps extends KendoReactComponentBaseProps {
+    /**
+     * Sets additional CSS styles to the element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies a list of CSS classes that will be added to the element.
+     */
+    className?: string;
+    /**
+     * Overrides the font size applied by the theme typography styles
+     * [see example]({% slug appearance_typography %}#toc-font-size).
+     *
+     * The possible values are:
+     * * `xsmall`
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `xlarge`
+     *
+     */
+    fontSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Overrides the font weight applied by the theme typography styles
+     * [see example]({% slug appearance_typography %}#toc-font-weight).
+     *
+     * The possible values are:
+     * * `light`&mdash;font-weight: 300
+     * * `normal`&mdash;font-weight: 400
+     * * `bold`&mdash;For Default and Bootstrap themes&mdash;font-weight: 700. For Material theme&mdash;font-weight: 500.
+     *
+     */
+    fontWeight?: 'light' | 'normal' | 'bold';
+    /**
+     * Specifies the applied margin to the element
+     * [see example]({% slug appearance_typography %}#toc-margin).
+     *
+     * The possible values for the Default and Material themes are:
+     * * `xsmall` &mdash;Applies 4px margin.
+     * * `small` &mdash;Applies 8px margin.
+     * * `medium` &mdash;Applies 12px margin.
+     * * `large` &mdash;Applies 16px margin.
+     * * `xlarge` &mdash;Applies 24px margin.
+     * * `thin` &mdash;Applies 2px margin.
+     * * `hair` &mdash;Applies 1px margin.
+     * * `number` &mdash;Passing a number will apply a margin of 4 times the passed number in pixels. The minimum number value is 0 and the maximum is 24.
+     * * `object` &smdash;Passing an object allows setting the margins for each side.
+     *
+     * The possible values for the Bootstrap theme are:
+     * * `xsmall` &mdash;Applies 0.25rem margin.
+     * * `small` &mdash;Applies 0.5rem margin.
+     * * `medium` &mdash;Applies 0.75rem margin.
+     * * `large` &mdash;Applies 1rem margin.
+     * * `xlarge` &mdash;Applies 1.25rem margin.
+     * * `thin` &mdash;Applies 0.125rem margin.
+     * * `hair` &mdash;Applies 0.0625rem margin.
+     * * `number` &mdash;Passing a number will apply a margin equal to the passed number divided by 4 in rem units.
+     * The minimum number value is 0 and the maximum is 24.
+     * * `object` &smdash;Passing an object allows setting the margins for each side.
+     */
+    margin?: MarginEnum | {
+        top?: MarginEnum;
+        bottom?: MarginEnum;
+        left?: MarginEnum;
+        right?: MarginEnum;
+    };
+    /**
+     * Specifies the text align
+     * [see example]({% slug appearance_typography %}#toc-text-align).
+     *
+     * The possible values are:
+     * * `left`&mdash;Applies text-align: left
+     * * `right`&mdash;Applies text-align: right
+     * * `center`&mdash;Applies text-align: center
+     * * `justify`&mdash;Applies text-align: justify
+     *
+     */
+    textAlign?: 'left' | 'right' | 'center' | 'justify';
+    /**
+     * Specifies the text transform
+     * [see example]({% slug appearance_typography %}#toc-text-transform).
+     *
+     * The possible values are:
+     * * `lowercase`&mdash;Applies text-transform: lowercase
+     * * `uppercase`&mdash;Applies text-transform: uppercase
+     * * `capitalize`&mdash;Applies text-transform: capitalize
+     *
+     */
+    textTransform?: 'lowercase' | 'uppercase' | 'capitalize';
+    /**
+     * Specifies the theme color of the Typography
+     * [see example]({% slug appearance_typography %}#toc-theme-color).
+     *
+     * The possible values are:
+     * * `inherit`&mdash;Applies coloring based on the current color.
+     * * `primary` &mdash;Applies coloring based on primary theme color.
+     * * `secondary`&mdash;Applies coloring based on secondary theme color.
+     * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
+     * * `info`&mdash;Applies coloring based on info theme color.
+     * * `success`&mdash; Applies coloring based on success theme color.
+     * * `warning`&mdash; Applies coloring based on warning theme color.
+     * * `error`&mdash; Applies coloring based on error theme color.
+     * * `dark`&mdash; Applies coloring based on dark theme color.
+     * * `light`&mdash; Applies coloring based on light theme color.
+     * * `inverse`&mdash; Applies coloring based on inverse theme color.
+     *
+     * You can use the `style` property to apply custom color related properties to the element.
+     *
+     */
+    themeColor?: 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+    /**
+     * Sets a custom property to the element.
+     */
+    [customProp: string]: any;
+}
+
+/**
+ * @hidden
+ */
+export declare function updateItem(items: any[], itemId: string, update: (item: any) => void, cloneField: string, childrenField: string): any[];
+
+/**
+ * An utility function for asynchronous focus/blur handling.
+ *
+ * By default, the `onFocus` and `onBlur` callbacks are called every time a child components receives/loses focus.
+ * Use this utility hook for scenarios where you need to know if the parent has received focus for the first time, or completely lost focus.
+ *
+ * @returns
+ */
+export declare function useAsyncFocusBlur<T extends any[]>({ onFocus, onBlur, onSyncFocus, onSyncBlur }: AsyncFocusBlurArgs<T>): AsyncFocusBlurArgs<T>;
+
+/** @hidden */
+export declare const useCollection: <T extends unknown>(initial?: T[]) => [T[], (event: CollectionAction<T>) => void];
+
+/**
+ * @hidden
+ */
+export declare const useCustomComponent: <P = unknown>(comp: React_2.ExoticComponent<{
+    children?: React_2.ReactNode;
+}> | CustomComponent<P> | null) => [string | React_2.ComponentType<P & React_2.RefAttributes<unknown>>, Partial<P>];
+
+/**
+ * @hidden
+ */
+export declare function useDir(elementRef: React_2.RefObject<HTMLElement | null>, initialDir?: string, args?: any): string | undefined;
+
+/**
+ * Returns a function, which gets the `ownerDocument` of the element.
+ */
+export declare const useDocument: (ref: React_2.RefObject<HTMLElement | null | {
+    element: HTMLElement | null;
+}>) => () => Document;
+
+/**
+ * Represents the KendoReact `useDraggable` hook.
+ * Use it to attach `drag` events to a native HTML DOM elements, or custom React Components.
+ *
+ * For more information, refer to the [KendoReact Draggable]({% slug draggable_drag-and-drop %}) article.
+ *
+ * @param ref - The `ref` of the HTML Element or React Component which will enable the `draggable` functionality.
+ * @param callbacks - A collection of callbacks, called by the `useDraggable` hook when a specific action occurs.
+ * @param options - Additional configuration of the `useDraggable` hook.
+ */
+export declare function useDraggable(ref: React_2.RefObject<HTMLElement | null | {
+    element: HTMLElement | null;
+}>, callbacks: {
+    onPress?: (event: NormalizedDragEvent) => void;
+    onRelease?: (event: NormalizedDragEvent) => void;
+    onDragStart?: (event: NormalizedDragEvent) => void;
+    onDrag?: (event: NormalizedDragEvent) => void;
+    onDragEnd?: (event: NormalizedDragEvent) => void;
+}, options?: DraggableOptions): void;
+
+/**
+ * Represents the KendoReact `useDroppable` hook.
+ * Use it to attach `drop` events to a native HTML DOM elements, or custom React Components.
+ *
+ * For more information, refer to the [KendoReact Droppable]({% slug droppable_drag-and-drop %}) article.
+ *
+ * @param ref - The `ref` of the HTML Element or React Component which will enable the `droppable` functionality.
+ * @param callbacks - A collection of callbacks, called by the `useDroppable` hook when a specific action occurs.
+ */
+export declare function useDroppable(ref: React_2.RefObject<HTMLElement | null | {
+    element: HTMLElement | null;
+}>, callbacks?: {
+    onDragEnter?: (event: NormalizedDragEvent) => void;
+    onDragOver?: (event: NormalizedDragEvent) => void;
+    onDragLeave?: (event: NormalizedDragEvent) => void;
+    onDrop?: (event: NormalizedDragEvent) => void;
+}): void;
+
+/** @hidden */
+export declare function useId(id?: string): any;
+
+/** @hidden */
+export declare const useIsomorphicLayoutEffect: typeof React_2.useEffect;
+
+/**
+ * @hidden
+ */
+export declare const useMouse: <E extends HTMLElement | null, P extends KendoMouse<any, any>, R extends {}>(props: P, target: React_2.RefObject<R>, extend?: {
+    onMouseDown?: ((event: React_2.MouseEvent<E, MouseEvent>) => void) | undefined;
+    onMouseUp?: ((event: React_2.MouseEvent<E, MouseEvent>) => void) | undefined;
+    onClick?: ((event: React_2.MouseEvent<E, MouseEvent>) => void) | undefined;
+    onDoubleClick?: ((event: React_2.MouseEvent<E, MouseEvent>) => void) | undefined;
+    onMouseEnter?: ((event: React_2.MouseEvent<E, MouseEvent>) => void) | undefined;
+    onMouseLeave?: ((event: React_2.MouseEvent<E, MouseEvent>) => void) | undefined;
+    onMouseMove?: ((event: React_2.MouseEvent<E, MouseEvent>) => void) | undefined;
+    onMouseOut?: ((event: React_2.MouseEvent<E, MouseEvent>) => void) | undefined;
+    onMouseOver?: ((event: React_2.MouseEvent<E, MouseEvent>) => void) | undefined;
+}) => ElementMouse;
+
+/** @hidden */
+export declare const usePropsContext: <T extends unknown>(context: React_2.Context<(p: T) => T>, props: T) => T;
+
+/**
+ * @hidden
+ */
+export declare function useRtl(elementRef: React_2.RefObject<HTMLElement | null>, initialDir?: string, args?: any): string | undefined;
+
+/**
+ * Returns a function, which gets the `defaultView` based on the `ownerDocument` of the element.
+ */
+export declare const useWindow: (ref: React_2.RefObject<HTMLElement | null | {
+    element: HTMLElement | null;
+}>) => () => Window;
+
+/** @hidden */
+export declare const useZIndexContext: () => ZIndexContextType;
+
+/**
+ * @hidden
+ */
+export declare const validatePackage: typeof validatePackage_2;
+
+/**
+ *
+ * @hidden
+ */
+export declare const WatermarkOverlay: () => JSX_2.Element;
+
+/** @hidden */
+export declare const withIdHOC: <P extends object>(Component: React_2.ComponentType<P>) => React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<P> & React_2.RefAttributes<any>>;
+
+/** @hidden */
+export declare const withPropsContext: <T extends unknown>(context: React_2.Context<(p: T) => T>, Component: React_2.ComponentType<T>) => React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<T> & React_2.RefAttributes<any>>;
+
+/**
+ * @hidden
+ */
+declare const ZERO_LEVEL_ZERO_NODE_ID = "0";
+
+/** @hidden */
+export declare const ZIndexContext: React_2.Context<ZIndexContextType>;
+
+/** @hidden */
+export declare type ZIndexContextType = number | undefined;
+
+export { }