/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { default as default_2 } from 'prop-types'; import { default as default_3 } from 'react'; import { DragTarget } from '@progress/kendo-draggable-common'; import { DropTarget } from '@progress/kendo-draggable-common'; import { JSX as JSX_2 } from 'react/jsx-runtime'; import { NormalizedDragEvent } from '@progress/kendo-draggable-common'; import * as React_2 from 'react'; /** * @hidden */ export declare const actions: { increase: string; decrease: string; cancel: string; accept: string; split: string; }; /** @hidden */ export declare const ADAPTIVE_MEDIUM_BREAKPOINT: number; /** @hidden */ export declare const ADAPTIVE_SMALL_BREAKPOINT: number; /** * Represents a React Context that enables further configuration of the adaptive mode breakpoints. * Used for global configuration across components that implement adaptive rendering. * For more information and demos, refer to: * * [DatePicker Adaptive Rendering article]({% slug adaptive_rendering_datepicker %}) * * [DateRangePicker Adaptive Rendering article]({% slug adaptive_rendering_datetimepicker %}) * * [DateTimePicker Adaptive Rendering article]({% slug adaptive_rendering_daterangepicker %}) * * [TimePicker Adaptive Rendering article]({% slug adaptive_rendering_timepicker %}) * * [AutoComplete Adaptive Rendering article]({% slug adaptive_rendering_autocomplete %}) * * [ComboBox Adaptive Rendering article]({% slug adaptive_rendering_combobox %}) * * [DropDownList Adaptive Rendering article]({% slug adaptive_rendering_dropdownlist %}) * * [DropDownTree Adaptive Rendering article]({% slug adaptive_rendering_dropdowntree %}) * * [MultiColumnComboBox Adaptive Rendering article]({% slug adaptive_rendering_multicolumncombobox %}) * * [MultiSelect Adaptive Rendering article]({% slug adaptive_rendering_multiselect %}) * * [MultiSelectTree Adaptive Rendering article]({% slug adaptive_rendering_multiselecttree %}) * */ export declare const AdaptiveModeContext: React_2.Context; /** * Represents the `AdaptiveModeContextType` interface. */ export declare interface AdaptiveModeContextType { /** * Sets the small breakpoint for the adaptive rendering. * * @default 500 */ small: number; /** * Sets the medium breakpoint for the adaptive rendering. * * @default 786 */ medium: number; } /** * @hidden */ export declare function addItem(item: any, operation: 'before' | 'after' | 'child', childrenField: string, targetItemId: string, items: any[]): any[]; /** * All classes */ export declare interface AllClassStructure extends AnimationsClassStructure, ButtonsClassStructure, DropDownsClassStructure, GridClassStructure, IconsClassStructure, LabelsClassStructure, FormClassStructure, PopupClassStructure, ButtonsClassStructure, PopupClassStructure, GridClassStructure, InputsClassStructure, DropDownsClassStructure, DateInputsClassStructure { } /** Configuration for the child element */ export declare interface AnimationChildClasses { /** Container for child element */ container?: string; /** Relative positioning for child container */ relative?: string; } /** Configuration for the child element */ export declare interface AnimationChildContainerClasses { /** Container for childContainer element */ container?: string; } /** Animation Classes */ export declare interface AnimationClasses { /** Configuration for the child element */ child?: AnimationChildClasses; /** Configuration for the childContainer element */ childContainer?: AnimationChildContainerClasses; /** Animation states for appear transition */ appear?: Appear; /** Active states for appear transition */ appearActive?: AppearActive; /** Animation states for enter transition */ enter?: Enter; /** Active states for enter transition */ enterActive?: EnterActive; /** Animation states for exit transition */ exit?: Exit; /** Active states for exit transition */ exitActive?: ExitActive; } /** * Animation classes */ export declare interface AnimationsClassStructure { uAnimation?: AnimationClasses; } /** Animation states */ export declare interface AnimationStatesClasses { /** Animation for 'push-right' transition */ 'push-right'?: string; /** Animation for 'push-left' transition */ 'push-left'?: string; /** Animation for 'push-down' transition */ 'push-down'?: string; /** Animation for 'push-up' transition */ 'push-up'?: string; /** Animation for 'expand-vertical' transition */ 'expand-vertical'?: string; /** Animation for 'expand-horizontal' transition */ 'expand-horizontal'?: string; /** Animation for 'fade' transition */ fade?: string; /** Animation for 'zoom-in' transition */ 'zoom-in'?: string; /** Animation for 'zoom-out' transition */ 'zoom-out'?: string; /** Animation for 'slide-in' transition */ 'slide-in'?: string; /** Animation for 'slide-down' transition */ 'slide-down'?: string; /** Animation for 'slide-up' transition */ 'slide-up'?: string; /** Animation for 'slide-right' transition */ 'slide-right'?: string; /** Animation for 'slide-left' transition */ 'slide-left'?: string; /** Animation for 'reveal-vertical' transition */ 'reveal-vertical'?: string; /** Animation for 'reveal-horizontal' transition */ 'reveal-horizontal'?: string; } /** * @hidden */ export declare const animationStyles: { [key: string]: string; }; /** Animation states for appear transition */ export declare interface Appear extends AnimationStatesClasses { } /** Active states for appear transition */ export declare interface AppearActive extends AnimationStatesClasses { } /** * @hidden */ export declare const applyDefaultProps: (props: PropsType, defaultProps: { [key: string]: any; }) => PropsType; /** * @hidden */ export declare const applyTrappedFocus: (e: React.KeyboardEvent, containerElement: HTMLElement, updateFocusedState?: ((isContainerFocused: boolean) => void) | undefined, elementsSelectors?: string[]) => 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 & { children: (args: AsyncFocusBlurArgs) => React_2.ReactNode; }) => JSX_2.Element; /** * @hidden */ export declare type AsyncFocusBlurArgs = { onFocus?: (...event: T) => void; onBlur?: (...event: T) => void; /** * @hidden */ onSyncFocus?: (event: React_2.FocusEvent) => void; /** * @hidden */ onSyncBlur?: (event: React_2.FocusEvent) => 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 | null; } /** * @hidden */ export declare const base: { prefix: string; important: string; rtl: string; rounded: string; value: string; state: string; filter: string; virtual: string; infinite: string; clear: string; reset: string; data: string; nodata: string; scroller: string; }; /** @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 { /** * A React Synthetic Event. */ syntheticEvent: React_2.SyntheticEvent; /** * 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)—Applies coloring based on the current color. * * `primary` —Applies coloring based on primary theme color. * * `secondary`—Applies coloring based on secondary theme color. * * `tertiary`— Applies coloring based on tertiary theme color. * * `info`—Applies coloring based on info theme color. * * `success`— Applies coloring based on success theme color. * * `warning`— Applies coloring based on warning theme color. * * `error`— Applies coloring based on error theme color. * * `dark`— Applies coloring based on dark theme color. * * `light`— Applies coloring based on light theme color. * * `inverse`— 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)—Font-size: 16px; Width: 16px; Height: 16px. * * `xsmall`—Font-size: 12px; Width: 12px; Height: 12px. * * `small`—Font-size: 14px; Width: 14px; Height: 14px. * * `medium`—Font-size: 16px; Width: 16px; Height: 16px. * * `large`—Font-size: 20px; Width: 20px; Height: 20px. * * `xlarge`—Font-size: 24px; Width: 24px; Height: 24px. * * `xxlarge`—Font-size: 32px; Width: 32px; Height: 32px. * * `xxxlarge`—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)—No flipping applied. * * `horizontal`—Flips the icon in horizontal direction. * * `vertical`—Flips the icon in vertical direction. * * `both`—Flips the icon in both horizontal and vertical directions. * */ flip?: IconFlip; } /** * @hidden */ export declare class BrowserSupportService { private scrollbar; get scrollbarWidth(): number; } /** Button classes */ export declare interface ButtonClasses { /** Button wrapper */ wrapper?: ButtonWrapperClasses; /** Text element */ text?: string; /** Icon element */ icon?: string; } export declare interface ButtonGroupClasses { /** Wrapper configuration for the button group */ wrapper?: ButtonGroupWrapperClasses; /** Position configuration for the button group */ position?: ButtonGroupPositionClasses; } export declare interface ButtonGroupPositionClasses { /** Position for the button group at the start */ start?: string; /** Position for the button group at the end */ end?: string; } export declare interface ButtonGroupWrapperClasses { /** Main button group classes */ main?: string; /** Stretched state classes for the button group */ stretched?: string; /** Disabled state classes for the button group */ disabled?: string; } /** * @hidden */ export declare const buttonPrefix: string; /** * Buttons classes */ export declare interface ButtonsClassStructure { uButton?: ButtonClasses; uButtonGroup?: ButtonGroupClasses; uDropDownButton?: DropDownButtonClasses; } /** Button wrapper classes */ export declare interface ButtonWrapperClasses { /** Main button */ main?: string; /** Size options for the button */ size?: { /** Small size button */ small?: string; /** Medium size button */ medium?: string; /** Large size button */ large?: string; }; /** Fill mode options for the button */ fillMode?: { /** Solid fill mode for the button */ solid?: string; /** Outline fill mode for the button */ outline?: string; /** Flat fill mode for the button */ flat?: string; /** Link fill mode for the button */ link?: string; /** Clear fill mode for the button */ clear?: string; }; /** Theme color options for the button */ themeColor?: { /** Base theme color options */ base?: ThemeColorFillModeClasses; /** Primary theme color options */ primary?: ThemeColorFillModeClasses; /** Secondary theme color options */ secondary?: ThemeColorFillModeClasses; /** Tertiary theme color options */ tertiary?: ThemeColorFillModeClasses; /** Info theme color options */ info?: ThemeColorFillModeClasses; /** Success theme color options */ success?: ThemeColorFillModeClasses; /** Warning theme color options */ warning?: ThemeColorFillModeClasses; /** Error theme color options */ error?: ThemeColorFillModeClasses; /** Dark theme color options */ dark?: ThemeColorFillModeClasses; /** Light theme color options */ light?: ThemeColorFillModeClasses; /** Inverse theme color options */ inverse?: ThemeColorFillModeClasses; }; /** Rounded options for the button */ rounded?: { /** Small rounded option */ small?: string; /** Medium rounded option */ medium?: string; /** Large rounded option */ large?: string; }; /** Icon button */ iconButton?: string; /** Disabled state */ disabled?: string; /** Selected state */ selected?: string; /** Right-to-left layout */ isRtl?: string; } export declare interface CalendarClasses { /** Wrapper configuration for the calendar */ wrapper?: CalendarWrapperClasses; /** View configuration for the calendar */ view?: CalendarViewClasses; /** Navigation class for the calendar */ navigation?: string; /** Navigation highlight class for the calendar */ navigationHighlight?: string; /** Table configuration for the calendar */ table?: CalendarTableClasses; /** Header class for the calendar */ thead?: string; /** Row class for the calendar */ tr?: string; /** Header cell class for the calendar */ th?: string; /** Caption class for the calendar */ caption?: string; /** Body class for the calendar */ tbody?: string; /** Unordered list class for the calendar */ ul?: string; /** List item class for the calendar */ li?: string; /** Table cell configuration for the calendar */ td?: CalendarTdClasses; /** Title class for the calendar */ title?: string; /** Header configuration for the calendar */ header?: CalendarHeaderClasses; /** Spacer class for the calendar */ spacer?: string; /** Navigation class for the calendar */ nav?: string; /** Today configuration for the calendar */ today?: CalendarTodayClasses; /** Scrollable configuration for the calendar */ scrollable?: CalendarScrollableClasses; /** Scrollable selector class for the calendar */ scrollableSelector?: string; /** Scrollable placeholder configuration for the calendar */ scrollablePlaceholder?: { /** Main class for the scrollable placeholder */ main?: string; /** Horizontal scrollable placeholder class */ horizontal?: string; }; /** Link class for the calendar */ link?: string; /** Navigation marker class for the calendar */ navigationMarker?: string; } export declare interface CalendarHeaderClasses { /** Main class for the calendar header */ main?: string; /** Vertical alignment class for the calendar header */ vertical?: string; } /** * @hidden */ export declare const calendarPrefix: string; export declare interface CalendarScrollableClasses { /** Main class for the scrollable calendar area */ main?: string; /** Content class for the scrollable area */ content?: string; /** Horizontal scrollable state class */ horizontal?: string; } export declare interface CalendarTableClasses { /** Main class for the calendar table */ main?: string; /** Weekdays class for the calendar */ weekdays?: string; } export declare interface CalendarTdClasses { /** Main class for the table cell */ main?: string; /** Range start class for the table cell */ rangeStart?: string; /** Range end class for the table cell */ rangeEnd?: string; /** Range middle class for the table cell */ rangeMid?: string; /** Range split end class for the table cell */ rangeSplitEnd?: string; /** Range split start class for the table cell */ rangeSplitStart?: string; /** Active state class for the table cell */ active?: string; /** Focused state class for the table cell */ focused?: string; /** Selected state class for the table cell */ selected?: string; /** Today’s date class for the table cell */ today?: string; /** Weekend class for the table cell */ weekend?: string; /** Disabled state class for the table cell */ disabled?: string; /** Other month class for the table cell */ isOtherMonth?: string; /** Empty state class for the table cell */ isEmpty?: string; /** Week state class for the table cell */ isWeek?: string; } export declare interface CalendarTodayClasses { /** Main class for today's calendar entry */ main?: string; /** Disabled state class for today’s calendar entry */ disabled?: string; } export declare interface CalendarViewClasses { /** Main class for the calendar view */ main?: string; /** Vertical alignment class for the calendar view */ vertical?: string; /** Month view class for the calendar */ month?: string; /** Year view class for the calendar */ year?: string; /** Decade view class for the calendar */ decade?: string; /** Century view class for the calendar */ century?: string; } export declare interface CalendarWrapperClasses { /** Main class for the calendar wrapper */ main?: string; /** Prefix for the infinite calendar state */ infinite?: string; /** Disabled state class for the calendar wrapper */ disabled?: string; /** Week number class for the calendar */ weekNumber?: string; /** Size configurations for the calendar */ size?: DateTimeSizeClasses; } /** * @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[]; /** @hidden */ export declare enum COLLECTION_ACTION { add = 0, remove = 1 } /** @hidden */ export declare interface CollectionAction { type: COLLECTION_ACTION; item: T; } export declare interface ComboBoxClasses { /** Wrapper configurations for the combo box component */ wrapper?: { /** Main prefix for the combo box */ main?: string; /** Class for the input element */ input?: string; /** Size configurations for the input */ size?: { /** Class for the small size of the input */ small?: string; /** Class for the medium size of the input */ medium?: string; /** Class for the large size of the input */ large?: string; }; /** Fill mode configurations for the input */ fillMode?: { /** Class for the solid fill mode of the input */ solid?: string; /** Class for the outline fill mode of the input */ outline?: string; /** Class for the flat fill mode of the input */ flat?: string; /** Class for the link fill mode of the input */ link?: string; /** Class for the clear fill mode of the input */ clear?: string; }; /** Rounded configurations for the input */ rounded?: { /** Class for the small rounded input */ small?: string; /** Class for the medium rounded input */ medium?: string; /** Class for the large rounded input */ large?: string; }; /** Class for the disabled state of the input */ disabled?: string; /** Class for the invalid state of the input */ invalid?: string; /** Class for the loading state of the input */ loading?: string; /** Class for the required state of the input */ required?: string; }; /** Class for the loading icon associated with the input */ loadingIcon?: string; /** Class for the input button within the combo box */ inputButton?: string; /** List container configurations for the combo box */ listContainer?: { /** Main prefix for the list container */ main?: string; /** Class for the popup within the combo box */ popup?: string; }; /** Class for the header of the list within the combo box */ listHeader?: string; /** List configurations for the combo box */ list?: { /** Main prefix for the list */ list?: string; /** Class for the table element within the list */ table?: string; /** Size configurations for the list */ size?: { /** Class for the list size */ prefix?: string; /** Class for the small size of the list */ small?: string; /** Class for the medium size of the list */ medium?: string; /** Class for the large size of the list */ large?: string; }; /** Table size configurations for the list */ tableSize?: { /** Class for the table size */ prefix?: string; /** Class for the small size of the table */ small?: string; /** Class for the medium size of the table */ medium?: string; /** Class for the large size of the table */ large?: string; }; /** Class for the virtual list configuration */ virtual?: string; }; /** List content configurations for the combo box */ listContent?: { /** Main prefix for the list content */ main?: string; /** Class for the scroller within the list content */ scroller?: string; }; /** Class for the footer of the list within the combo box */ listFooter?: string; } /** * @hidden */ export declare const comboBoxPrefix: string; /** * @hidden */ export declare const components: { actionsheet: string; calendar: string; buttongroup: string; dateinput: string; datetime: string; datetimepicker: string; dropdownlist: string; combobox: string; maskedtextbox: string; menu: string; searchbox: string; timepicker: string; }; /** * @hidden */ export declare const containers: { actions: string; container: string; content: string; group: string; row: string; nav: string; wrap: string; wrapper: string; list: string; placeholder: string; popup: string; item: string; part: string; picker: string; separator: string; spacer: string; tab: string; titlebar: string; optionLabel: string; view: string; }; /** * @hidden */ declare function createId(childId: string | number, parentId?: string): string; /** @hidden */ export declare const createPropsContext: () => React_2.Context<(p: T) => T>; /** * @hidden */ export declare const cssUtils: { center: string; hbox: string; vstack: string; hstack: string; overflow: string; }; /** * @hidden */ export declare const cursor: { default: string; }; /** * @hidden */ export declare type CustomComponent

= React_2.ComponentType

| React_2.ReactElement> | string; /** * @hidden */ export declare interface DataItemWrapper { dataItem: any; rowType: any; level: number; expanded: boolean; dataIndex: number; } export declare interface DateInputClasses { /** Wrapper configuration for the date input */ wrapper?: { /** Main class for the date input wrapper */ main?: string; /** Prefix for the inner input element */ input?: string; /** Size configurations for the date input */ size?: DateTimeSizeClasses; /** Fill mode configurations for the date input */ fillMode?: DateTimeFillModeClasses; /** Rounded configurations for the date input */ rounded?: DateTimeRoundedClasses; /** Disabled state class for the date input */ disabled?: string; /** Required state class for the date input */ required?: string; /** Invalid state class for the date input */ invalid?: string; }; /** Inner input class for the date input */ inputInner?: string; /** Configuration for the input spinner */ inputSpinner?: DateTimeSpinnerClasses; /** Spinner increase action class */ spinnerIncrease?: string; /** Spinner decrease action class */ spinnerDecrease?: string; /** Clear button class for the date input */ clearButton?: string; } /** * @hidden */ export declare const dateInputs: { week: string; weekdays: string; weekend: string; month: string; year: string; decade: string; century: string; number: string; navigation: string; marker: string; now: string; range: string; today: string; other: string; date: string; time: string; selector: string; timeselector: string; }; /** * DateInputs classes */ export declare interface DateInputsClassStructure { uCalendar?: CalendarClasses; uDateInput?: DateInputClasses; uDateTimePicker?: DateTimePickerClasses; uTime?: TimeClasses; uTimePicker?: TimePickerClasses; } export declare interface DateTimeFillModeClasses { /** Solid fill mode class for the date-time picker */ solid?: string; /** Outline fill mode class for the date-time picker */ outline?: string; /** Flat fill mode class for the date-time picker */ flat?: string; } export declare interface DateTimePickerClasses { /** Wrapper configuration for the date-time picker */ wrapper?: { /** Main class for the date-time picker wrapper */ main?: string; /** Prefix for the inner input element */ input?: string; /** Size configurations for the date-time picker */ size?: DateTimeSizeClasses; /** Fill mode configurations for the date-time picker */ fillMode?: DateTimeFillModeClasses; /** Rounded configurations for the date-time picker */ rounded?: DateTimeRoundedClasses; /** Disabled state class for the date-time picker */ disabled?: string; /** Required state class for the date-time picker */ required?: string; /** Invalid state class for the date-time picker */ invalid?: string; }; /** Input button class for the date-time picker */ inputButton?: string; /** Configuration for the popup */ popup?: DateTimePopupClasses; /** Wrap configurations for the date-time picker */ wrap?: { /** Main class for the wrap element */ main?: string; /** Date tab class for the wrap */ date?: string; /** Time tab class for the wrap */ time?: string; /** Disabled state class for the wrap */ disabled?: string; }; /** Footer configurations for the time section */ timeFooter?: { /** Main class for the time footer */ main?: string; /** Actions class for the footer */ actions?: string; /** Stretched state class for the footer */ stretched?: string; }; /** Button group class for the date-time picker */ buttonGroup?: string; /** Selector class for the date-time picker */ selector?: string; /** Wrap class for the calendar */ calendarWrap?: string; /** Wrap class for the time section */ timeWrap?: string; /** Configuration for the time selector */ timeSelector?: TimeSelectorClasses; } export declare interface DateTimePopupClasses { /** Main class for the popup container */ main?: string; /** Reset class for the popup */ reset?: string; } export declare interface DateTimeRoundedClasses { /** Small rounded class for the date-time picker */ small?: string; /** Medium rounded class for the date-time picker */ medium?: string; /** Large rounded class for the date-time picker */ large?: string; } export declare interface DateTimeSizeClasses { /** Small size class for the date-time picker */ small?: string; /** Medium size class for the date-time picker */ medium?: string; /** Large size class for the date-time picker */ large?: string; } export declare interface DateTimeSpinnerClasses { /** Main class for the input spinner */ main?: string; /** Button class for the input spinner */ button?: string; } /** * @hidden */ export declare const ddbPrefix: string; /** @hidden */ export declare const defaultValue: { small: number; medium: number; }; /** * @hidden */ export declare const dimensions: { height: string; width: string; }; /** * @hidden */ export declare const directionMap: { up: string; down: string; left: string; right: string; start: string; mid: string; end: string; }; /** * @hidden */ export declare const disableNavigatableContainer: (containerElement: HTMLElement, elementsSelectors?: string[]) => void; /** * @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, FCHandle = object>(eventHandler: ((event: E) => void) | undefined, dispatchedEvent: React.SyntheticEvent, target: E['target'], eventData: Exclude> extends never ? undefined : Pick>>): 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; }; /** * @hidden */ declare const DragAndDropContext: React_2.Context<{ drag?: React_2.RefObject | null | undefined; setDrag?: ((value: React_2.RefObject | null) => void) | undefined; drop?: React_2.RefObject | null | undefined; setDrop?: ((value: React_2.RefObject | null) => void) | undefined; drags?: React_2.RefObject[] | undefined; registerDrag?: ((item: React_2.RefObject) => void) | undefined; deregisterDrag?: ((item: React_2.RefObject) => void) | undefined; drops?: React_2.RefObject[] | undefined; registerDrop?: ((item: React_2.RefObject) => void) | undefined; deregisterDrop?: ((item: React_2.RefObject) => void) | undefined; }>; /** * 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; /** * Allows passing a custom context to the `DragAndDrop` component. Useful when there are multiple drag-and-drop functionalities in a single component. */ context?: typeof DragAndDropContext; } /** * 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>; 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 | 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; /** * Allows passing custom context. Use it to isolate drag and drop events in scenarios with multiple drag and drop functionalities on a single component. */ context?: typeof DragAndDropContext; } /** * 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; /** @hidden */ children?: React_2.ReactNode; } /** * Represents the object of the `onRelease` callback. */ export declare interface DraggableReleaseEvent extends BaseDraggableEvent { } export declare interface DropDownBaseClasses { /** Class for the clear button */ clearButton?: string; /** Class for the sticky header of the grouped list */ groupStickyHeader?: string; /** Class for the header text in the list */ listHeaderText?: string; /** Class for the unordered list element */ ul?: string; /** List item configurations */ li?: DropDownBaseListItemClasses; /** Grouped list item configurations */ groupLi?: DropDownBaseGroupLiClasses; /** Class for the text of regular list items */ itemText?: string; /** Grouped item text configurations */ groupItemText?: DropDownBaseGroupItemClasses; /** Class for the label of grouped items */ itemGroupLabel?: string; /** Class for displaying no data message */ noData?: string; /** Class for the height container */ heightContainer?: string; /** Option label configurations */ optionLabel?: DropDownBaseOptionLabelClasses; /** Class for the inner input */ inputInner?: string; /** Class for the input icon */ inputIcon?: string; /** Class for the search box component */ searchbox?: string; /** Class for the list filter */ listFilter?: string; } export declare interface DropDownBaseGroupItemClasses { /** Class for the text of list items in a group */ list?: string; /** Class for the header cell text in a group table */ table?: string; } export declare interface DropDownBaseGroupLiClasses { /** Class for the list of grouped items */ list?: string; /** Class for the table representation of grouped items */ table?: string; } export declare interface DropDownBaseListItemClasses { /** Main class for the list item */ main?: string; /** Class for the selected state of the list item */ selected?: string; /** Class for the focused state of the list item */ focused?: string; /** Class for the first item in the list */ first?: string; /** Class for the disabled state of the list item */ disabled?: string; } export declare interface DropDownBaseOptionLabelClasses { /** Main class for the option label */ main?: string; /** Class for the selected state of the option label */ selected?: string; } export declare interface DropDownButtonClasses { /** Wrapper configuration for the button */ wrapper?: DropDownButtonWrapperClasses; /** Unordered list configuration for the button group */ ul?: DropDownButtonGroupClasses; /** List item configuration */ li?: DropDownButtonListItemClasses; /** Item class for the button */ item?: string; /** Link configuration for the button */ link?: DropDownButtonLinkClasses; /** Popup class for the button group */ popup?: string; } export declare interface DropDownButtonGroupClasses { /** Group class for the button container */ group?: string; /** Size configuration for the button group */ size?: DropDownButtonSizeClasses; } export declare interface DropDownButtonLinkClasses { /** Main link class */ main?: string; /** Link class for the button */ link?: string; /** Selected state class for the link */ selected?: string; /** Disabled state class for the link */ disabled?: string; } export declare interface DropDownButtonListItemClasses { /** Item class for the list container */ item?: string; /** Focus state class for the list item */ focus?: string; } export declare interface DropDownButtonSizeClasses { /** Small size class for the button group */ small?: string; /** Medium size class for the button group */ medium?: string; /** Large size class for the button group */ large?: string; } export declare interface DropDownButtonWrapperClasses { /** Main button class */ main?: string; /** Focus state class for the button */ focus?: string; /** Disabled state class for the button */ disabled?: string; } export declare interface DropDownListClasses { /** Wrapper configurations for the dropdown list component */ wrapper?: { /** Main class for the dropdown list */ main?: string; /** Class for the picker element */ picker?: string; /** Size configurations for the picker */ size?: { /** Class for the small size of the picker */ small?: string; /** Class for the medium size of the picker */ medium?: string; /** Class for the large size of the picker */ large?: string; }; /** Fill mode configurations for the picker */ fillMode?: { /** Class for the solid fill mode of the picker */ solid?: string; /** Class for the outline fill mode of the picker */ outline?: string; /** Class for the flat fill mode of the picker */ flat?: string; /** Class for the link fill mode of the picker */ link?: string; /** Class for the clear fill mode of the picker */ clear?: string; }; /** Rounded configurations for the picker */ rounded?: { /** Class for the small rounded picker */ small?: string; /** Class for the medium rounded picker */ medium?: string; /** Class for the large rounded picker */ large?: string; }; /** Class for the disabled state of the picker */ disabled?: string; /** Class for the focused state of the picker */ focused?: string; /** Class for the invalid state of the picker */ invalid?: string; /** Class for the loading state of the picker */ loading?: string; /** Class for the required state of the picker */ required?: string; }; /** Class for the loading icon associated with the input */ loadingIcon?: string; /** Class for the input button within the dropdown list */ inputButton?: string; /** List container configurations for the dropdown list */ listContainer?: { /** Main class for the list container */ main?: string; /** Class for the popup within the dropdown list */ popup?: string; }; /** Class for the inner input of the dropdown list */ inputInner?: string; /** Class for the input text of the dropdown list */ inputText?: string; /** Class for the header of the list within the dropdown */ listHeader?: string; /** List configurations for the dropdown list */ list?: { /** Main class for the list */ main?: string; /** Size configurations for the list */ size?: { /** Class for the small size of the list */ small?: string; /** Class for the medium size of the list */ medium?: string; /** Class for the large size of the list */ large?: string; }; /** Class for the virtual list configuration */ virtual?: string; }; /** Class for the content of the list within the dropdown */ listContent?: string; /** Class for the footer of the list within the dropdown */ listFooter?: string; } /** * @hidden */ export declare const dropDownListPrefix: string; export declare interface DropDownsActionSheetClasses { /** Wrapper configurations for the action sheet component */ wrapper?: { /** Main class for the action sheet */ main?: string; /** Class for the fullscreen state of the action sheet */ fullscreen?: string; /** Class for the bottom state of the action sheet */ bottom?: string; }; /** Class for the header text, centered */ header?: string; /** Title bar configurations for the action sheet */ titleBar?: { /** Main class for the title bar within the action sheet */ main?: string; /** Class for positioning the title bar horizontally */ position?: string; }; /** Class for the title of the action sheet */ title?: string; /** Subtitle configurations for the action sheet */ subtitle?: { /** Main class for the subtitle in the action sheet */ main?: string; /** Class for centered text in the subtitle */ textCenter?: string; }; /** Class for the actions container within the action sheet */ actions?: string; /** Title bar group configurations for the action sheet */ titleBarGroup?: { /** Main class for the title bar group */ main?: string; /** Class for the filter within the action sheet */ filter?: string; }; } /** * DropDowns classes */ export declare interface DropDownsClassStructure { uDropDownsActionSheet?: DropDownsActionSheetClasses; uDropDownsBase?: DropDownBaseClasses; uDropDownList?: DropDownListClasses; uComboBox?: ComboBoxClasses; } /** * 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>; 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 configuration object type of the `Droppable` component and `useDroppable` hook. */ export declare interface DroppableOptions { /** * The context to use for the droppable. */ context?: typeof DragAndDropContext; } /** * Represents the props of the KendoReact Droppable component. */ export declare interface DroppableProps extends DroppableOptions { /** * 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; /** @hidden */ children?: React_2.ReactNode; } declare type ElementMouse = { [P in keyof Required>]: (event: React_2.MouseEvent) => void; }; /** * @hidden */ export declare const elements: { table: string; text: string; button: string; tbody: string; thead: string; tr: string; th: string; td: string; header: string; footer: string; icon: string; title: string; subtitle: string; link: string; label: string; ul: string; caption: string; }; /** * @hidden */ declare const EMPTY_ID = ""; /** * @hidden */ export declare const enableNavigatableContainer: (containerElement: HTMLElement, elementsSelectors?: string[]) => void; /** Animation states for enter transition */ export declare interface Enter extends AnimationStatesClasses { } /** Active states for enter transition */ export declare interface EnterActive extends AnimationStatesClasses { } declare type EqualityFn any> = (newArgs: Parameters, lastArgs: Parameters) => boolean; export declare interface ErrorClasses { /** Wrapper element configurations */ wrapper?: { /** Main class for the wrapper */ main?: string; /** Direction-related configurations */ direction?: { /** Class for start-aligned text */ start?: string; /** Class for end-aligned text */ end?: string; }; }; } /** Animation states for exit transition */ export declare interface Exit extends AnimationStatesClasses { } /** Active states for exit transition */ export declare interface ExitActive extends AnimationStatesClasses { } /** * 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 const FIELD_REGEX: RegExp; /** * @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 fillModeMap: PresetOption; /** * @hidden */ export declare const firstFocusableChild: (element: HTMLElement, elementsSelectors?: string[]) => HTMLElement | undefined; export declare interface FloatingLabelClasses { /** Wrapper element configurations */ wrapper?: { /** Main class for the wrapper */ main?: string; /** Class applied when the element is focused */ focused?: string; /** Class applied when the element is empty */ empty?: string; /** Class for non-empty state (empty in this case) */ notEmpty?: string; /** Class for disabled state */ disabled?: string; /** Class applied when in RTL mode */ isRtl?: string; }; /** Label element configurations */ label?: { /** Main class for the label */ main?: string; /** Class applied when the label is focused */ focused?: string; /** Class applied when the label is empty */ empty?: string; /** Class for non-empty label state */ notEmpty?: string; /** Class applied when the label is in an invalid state */ invalid?: string; /** Class applied when the label is disabled */ disabled?: string; }; } /** * @hidden */ export declare const FOCUSABLE_ELEMENTS: string[]; /** * @hidden */ export declare const FOCUSABLE_ELEMENTS_BASE: string[]; /** * @hidden */ export declare const focusableChildren: (element: HTMLElement, elementsSelectors?: string[]) => HTMLElement[] | [ ]; /** * @hidden */ export declare const focusFirstFocusableChild: (element: HTMLElement, elementsSelectors?: string[]) => void; /** * @hidden */ export declare const focusLastFocusableChild: (element: HTMLElement, elementsSelectors?: string[]) => void; export declare interface FormClasses { /** Form configurations */ form?: { /** Main class for the form */ main?: string; /** Size configurations for the form */ size?: { /** Prefix for size classes */ prefix?: string; /** Class for small size */ small?: string; /** Class for medium size */ medium?: string; /** Class for large size */ large?: string; }; /** Orientation configurations for the form */ orientation?: { /** Class for horizontal orientation */ horizontal?: string; /** Class for vertical orientation */ vertical?: string; }; }; /** Field configurations within the form */ field?: { /** Main class for form fields */ main?: string; /** Class indicating right-to-left (RTL) layout */ isRtl?: string; }; } /** * Form classes */ export declare interface FormClassStructure { uForm?: FormClasses; } /** * @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 forms: { form: string; field: string; }; /** * @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 grid: { prefix: string; ariaRoot: string; tableWrap: string; master: string; column: string; cell: string; cellInner: string; row: string; group: string; hierarchy: string; detail: string; noRecords: string; pager: string; }; /** * @hidden */ export declare interface GridClassStructure { uGrid?: WidgetClassStructure; } /** * @hidden */ export declare const gridPrefix: string; /** * @hidden */ export declare const gridRowReorder: { drop: string; drag: string; hint: string; vertical: string; horizontal: string; clue: string; reorder: string; }; /** * @hidden */ export declare const guid: Function; /** * @hidden */ export declare function hasChildren(item: any, childrenField: string): boolean; /** @hidden */ export declare const hasRelativeStackingContext: (elementSource?: HTMLElement) => boolean; export declare interface HintClasses { /** Wrapper element configurations */ wrapper?: { /** Main class for the wrapper */ main?: string; /** Direction-related configurations */ direction?: { /** Class for start-aligned text */ start?: string; /** Class for end-aligned text */ end?: string; /** Class for disabled state */ disabled?: string; }; }; } /** * Represents the [KendoReact Icon component]({% slug overview_icon %}). * * @example * ```jsx * const App = () => { * return ( * * ); * }; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const Icon: React_2.ForwardRefExoticComponent>; /** * @hidden */ export declare const icon: { prefix: string; svg: string; i: string; color: string; flipH: string; flipV: string; }; /** * Specifies the icon flip direction. * * The possible values are: * * `default` (Default)—No flipping applied. * * `horizontal`—Flips the icon in horizontal direction. * * `vertical`—Flips the icon in vertical direction. * * `both`—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 { /** * Represents the name of the icon. */ name?: string; } /** * Icons classes */ export declare interface IconsClassStructure { uSvgIcon?: SVGIconClasses; } /** * Represents a React Context which provides you with the option to configure the KendoReact components icons. */ export declare const IconsContext: React_2.Context; /** * 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)—Font-size: 16px; Width: 16px; Height: 16px. * * `xsmall`—Font-size: 12px; Width: 12px; Height: 12px. * * `small`—Font-size: 14px; Width: 14px; Height: 14px. * * `medium`—Font-size: 16px; Width: 16px; Height: 16px. * * `large`—Font-size: 20px; Width: 20px; Height: 20px. * * `xlarge`—Font-size: 24px; Width: 24px; Height: 24px. * * `xxlarge`—Font-size: 32px; Width: 32px; Height: 32px. * * `xxxlarge`—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)—Applies coloring based on the current color. * * `primary` —Applies coloring based on primary theme color. * * `secondary`—Applies coloring based on secondary theme color. * * `tertiary`— Applies coloring based on tertiary theme color. * * `info`—Applies coloring based on info theme color. * * `success`— Applies coloring based on success theme color. * * `warning`— Applies coloring based on warning theme color. * * `error`— Applies coloring based on error theme color. * * `dark`— Applies coloring based on dark theme color. * * `light`— Applies coloring based on light theme color. * * `inverse`— 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>; export declare interface InputClasses { /** Input element configurations */ input?: { /** Main class for the input, combining size, rounded, and fill mode */ main?: string; /** Disabled state class */ disabled?: string; /** Required state class */ required?: string; /** Invalid state class */ invalid?: string; /** RTL (right-to-left) layout class */ isRtl?: string; }; /** Clear button class */ clearButton?: string; } /** * @hidden */ export declare const inputPrefix: string; /** * @hidden */ export declare const inputs: { input: string; inner: string; spin: string; spinner: string; maskedtextbox: string; radio: string; textbox: string; prefix: string; suffix: string; }; /** * Inputs classes */ export declare interface InputsClassStructure { uMaskedTextBox?: MaskedTextBoxClasses; uRadioGroup?: RadioGroupClasses; uRadioButton?: RadioButtonClasses; uTextBox?: TextBoxClasses; uInput?: InputClasses; } /** * @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 jsonTheme: KendoTheme; /** * @hidden */ export declare const keepFocusInContainer: (e: React.KeyboardEvent, containerElement?: HTMLElement | null, elementsSelectors?: string[]) => void; export declare interface KendoMouse { onMouseDown?: (args: KendoMouseEvent) => void; onMouseUp?: (args: KendoMouseEvent) => void; onClick?: (args: KendoMouseEvent) => void; onDoubleClick?: (args: KendoMouseEvent) => void; onMouseEnter?: (args: KendoMouseEvent) => void; onMouseLeave?: (args: KendoMouseEvent) => void; onMouseMove?: (args: KendoMouseEvent) => void; onMouseOut?: (args: KendoMouseEvent) => void; onMouseOver?: (args: KendoMouseEvent) => void; } export declare interface KendoMouseEvent { syntheticEvent: React_2.MouseEvent; target: T; } /** * @hidden */ export declare interface KendoPointer { onPointerDown?: (args: KendoPointerEvent) => void; onPointerMove?: (args: KendoPointerEvent) => void; onPointerUp?: (args: KendoPointerEvent) => void; onPointerCancel?: (args: KendoPointerEvent) => void; onGotPointerCapture?: (args: KendoPointerEvent) => void; onLostPointerCapture?: (args: KendoPointerEvent) => void; onPointerEnter?: (args: KendoPointerEvent) => void; onPointerOver?: (args: KendoPointerEvent) => void; onPointerLeave?: (args: KendoPointerEvent) => void; onPointerOut?: (args: KendoPointerEvent) => void; } /** * @hidden */ export declare interface KendoPointerEvent { syntheticEvent: React_2.PointerEvent; 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 KendoTheme { base: PresetOption; animation: PresetOption; containers: PresetOption; components: PresetOption; cssUtils: PresetOption; elements: PresetOption; sizeMap: PresetOption; directionMap: PresetOption; fillModeMap: PresetOption; themeColorMap: PresetOption; roundedMap: PresetOption; cursor: PresetOption; dimensions: PresetOption; states: PresetOption; actions: PresetOption; inputs: PresetOption; dateInputs: PresetOption; forms: PresetOption; labels: PresetOption; popup: PresetOption; icon: PresetOption; grid: PresetOption; orientationMap: PresetOption; } /** @hidden */ export declare interface KendoThemeMaps { sizeMap: Record, string>; roundedMap: Record, string>; orientationMap: Record, string>; } /** @hidden */ export declare const kendoThemeMaps: KendoThemeMaps; /** * @hidden */ export declare interface KendoTouch { onTouchStart?: (args: KendoTouchEvent) => void; onTouchMove?: (args: KendoTouchEvent) => void; onTouchEnd?: (args: KendoTouchEvent) => void; onTouchCancel?: (args: KendoTouchEvent) => void; } /** * @hidden */ export declare interface KendoTouchEvent { syntheticEvent: React_2.TouchEvent; target: T; } /** * @hidden */ export declare const KEYS: { backspace: string; tab: string; enter: string; shift: string; esc: string; space: string; pageUp: string; pageDown: string; end: string; home: string; left: string; up: string; right: string; down: string; delete: string; }; /** * @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; }; export declare interface LabelClasses { /** Label */ label?: { /** Main class for the label */ main?: string; /** Class applied when the label is in an empty state */ empty?: string; /** Class applied when the label is in an invalid state */ invalid?: string; /** Class applied when the label is disabled */ disabled?: string; }; } /** * @hidden */ export declare const labels: { label: string; text: string; floatingLabel: string; container: string; hint: string; error: string; }; /** * Labels classes */ export declare interface LabelsClassStructure { uError?: ErrorClasses; uHint?: HintClasses; uLabel?: LabelClasses; uFloatingLabel?: FloatingLabelClasses; } /** * @hidden */ export declare const lastFocusableChild: (element: HTMLElement, elementsSelectors?: string[]) => 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` —Applies 4px margin. * * `small` —Applies 8px margin. * * `medium` —Applies 12px margin. * * `large` —Applies 16px margin. * * `xlarge` —Applies 24px margin. * * `thin` —Applies 2px margin. * * `hair` —Applies 1px margin. * * `number` —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` —Applies 0.25rem margin. * * `small` —Applies 0.5rem margin. * * `medium` —Applies 0.75rem margin. * * `large` —Applies 1rem margin. * * `xlarge` —Applies 1.25rem margin. * * `thin` —Applies 0.125rem margin. * * `hair` —Applies 0.0625rem margin. * * `number` —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; /** * @hidden */ export declare const maskedPrefix: string; export declare interface MaskedTextBoxClasses { /** Wrapper configurations for the masked input */ wrapper?: { /** Main class for the wrapper */ main?: string; /** Class for the input element */ input?: string; /** Size configurations for the input */ size?: { /** Small size class */ small?: string; /** Medium size class */ medium?: string; /** Large size class */ large?: string; }; /** Fill mode configurations for the input */ fillMode?: { /** Solid fill mode class */ solid?: string; /** Outline fill mode class */ outline?: string; /** Flat fill mode class */ flat?: string; }; /** Rounded border configurations */ rounded?: { /** Small rounded border class */ small?: string; /** Medium rounded border class */ medium?: string; /** Large rounded border class */ large?: string; }; /** Disabled state class */ disabled?: string; /** Invalid state class */ invalid?: string; /** RTL (right-to-left) layout class */ isRtl?: string; }; /** Class for the inner part of the input */ inputInner?: string; } declare type MemoizedFn any> = { clear: () => void; (this: ThisParameterType, ...args: Parameters): ReturnType; }; /** * @hidden */ export declare function memoizeOne any>(resultFn: TFunc, isEqualFn?: EqualityFn): MemoizedFn; /** * 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[] | string[][]; /** * @hidden */ mouseEvents: { [type: string]: (target: HTMLElement, nav: Navigation, ev: React.MouseEvent) => void; }; /** * @hidden */ keyboardEvents: { [type: string]: { [key: string]: (target: HTMLElement, nav: Navigation, ev: React.KeyboardEvent, options?: any) => void; }; }; /** * @hidden */ tabIndex: number; /** * @hidden */ focusOptions: FocusOptions; /** * @hidden */ root: React.RefObject; /** * @hidden */ rovingTabIndex?: boolean; /** * @hidden */ focusClass?: string; /** * @hidden */ lastFocused: HTMLElement | null; 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; /** * Returns the next DOM element from the navigation collection of DOM elements. */ next(target: HTMLElement, selectors?: string[] | string[][]): HTMLElement; /** * Returns the previous DOM element from the navigation collection of DOM elements. */ previous(target: HTMLElement, selectors?: string[] | string[][]): HTMLElement; /** * Focuses the next element from the navigation collection of DOM elements. */ focusNext(target: HTMLElement, selectors?: string[] | string[][]): HTMLElement; /** * Focuses the previous element from the navigation collection of DOM elements. */ focusPrevious(target: HTMLElement, selectors?: string[] | string[][]): HTMLElement; /** * The keyboard events handler. */ triggerKeyboardEvent(ev: React.KeyboardEvent, options?: any): void; /** * The mouse events handler. */ triggerMouseEvent(ev: React.MouseEvent): void; /** * Focuses the passed element from the navigation collection of DOM elements. */ focusElement(element: HTMLElement | null, previous?: HTMLElement | null): void; /** * Set the first element tabIndex to `1` and `-1` for the rest. */ initializeRovingTab(itemIndex?: number): void; /** * Remove a focus listener. */ removeFocusListener(): void; /** * Remove a focus class. */ removeFocusClass(target: HTMLElement): void; /** * @hidden */ update: () => void; private setFocusClass; private disableTabindexForRest; private focusNextIndex; private customElements; private target; } /** * 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; /** * 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[] | string[][]; /** * Configures if the roving tabIndex technique will be used in the [Navigation]({% slug api_common_navigation %}). Defaults to `true`. */ 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) => void; }; /** * Sets the keyboard events handlers. */ keyboardEvents?: { [type: string]: { [key: string]: (target: HTMLElement, nav: Navigation, ev: React.KeyboardEvent) => void; }; }; /** * Sets a class to the current focused element. */ focusClass?: string; } /** * @hidden */ export declare const noop: () => void; export { NormalizedDragEvent } /** * @hidden */ export declare const orientationMap: PresetOption; /** * @hidden */ export declare const pickerPrefix: string; /** * @hidden */ export declare const popup: { prefix: string; }; export declare interface PopupClasses { /** Prefix for the animation container */ animationContainer?: string; /** Prefix for the shown animation container */ animationContainerShown?: string; /** Prefix for child animations within the animation */ animationChild?: string; /** Prefix for the popup animation */ popup?: string; /** Slide animation configurations for different directions */ slide?: SlideClasses; /** Active slide animation configurations for different directions */ slideActive?: SlideClasses; } /** * Popup classes */ export declare interface PopupClassStructure { uPopup?: PopupClasses; } declare type PresetOption = Record, string>; export declare interface RadioButtonClasses { /** Input configurations */ input?: { /** Class for the radio input */ radio?: string; /** Size configurations for the radio input */ size?: { /** Prefix for size classes */ prefix?: string; /** Class for small size radio input */ small?: string; /** Class for medium size radio input */ medium?: string; /** Class for large size radio input */ large?: string; }; /** Class for invalid state */ invalid?: string; /** Class for checked state */ checked?: string; }; /** Class for wrapping container */ wrap?: string; /** Class for the label */ label?: string; } /** * @hidden */ export declare const radioButtonClasses: RadioButtonClasses; export declare interface RadioGroupClasses { /** Unordered list (ul) configurations */ ul?: { /** Main class for the ul element */ main?: string; /** Class for horizontal list layout */ horizontal?: string; /** Class for vertical list layout */ vertical?: string; }; /** Item configurations inside the ul */ item?: { /** Main class for the list item (li) element */ main?: string; /** Class for disabled state of list item */ disabled?: string; }; } /** * @hidden */ export declare const radioGroupClasses: RadioGroupClasses; /** * @hidden */ export declare const radioPrefix: string; /** * @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 */ export declare const roundedMap: PresetOption; /** * @hidden */ export declare class RowHeightService { private total; private offsets; private heights; constructor(total: number, rowHeight: number, detailRowHeight: number, data?: DataItemWrapper[]); height(rowIndex: number): number; index(position: number): number; offset(rowIndex: number): number; totalHeight(): number; } /** * @hidden */ declare const SEPARATOR = "_"; /** * @hidden */ export declare const setScrollbarWidth: (width?: number) => 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; /** Size options */ export declare interface SizeClasses { /** Default size (16px by 16px) */ default?: string; /** Extra small size (0.75 times the default size) */ xsmall?: string; /** Small size (0.875 times the default size) */ small?: string; /** Medium size, same as default (16px by 16px) */ medium?: string; /** Large size (1.25 times the default size) */ large?: string; /** Extra large size (1.5 times the default size) */ xlarge?: string; /** Double extra large size (2 times the default size) */ xxlarge?: string; /** Triple extra large size (3 times the default size) */ xxxlarge?: string; } /** * @hidden */ export declare const sizeMap: PresetOption; export declare interface SlideAnimationClasses { /** Enter animation prefix for sliding up */ enter?: string; /** Exit animation prefix for sliding up */ exit?: string; } export declare interface SlideClasses { /** Animation settings for sliding up */ up?: SlideAnimationClasses; /** Animation settings for sliding down */ down?: SlideAnimationClasses; /** Animation settings for sliding left */ left?: SlideAnimationClasses; /** Animation settings for sliding right */ right?: SlideAnimationClasses; } /** * @hidden */ export declare class SortedPublicItemIds { private objects; init(publicItemIds: any[]): void; hasId(publicItemId: any): boolean; } /** * @hidden */ export declare const states: { active: string; adaptive: string; first: string; focus: string; pending: string; last: string; draggable: string; filterable: string; grouping: string; selected: string; disabled: string; hidden: string; highlight: string; invalid: string; loading: string; required: string; checked: string; empty: string; scrollable: string; sorted: string; sort: string; sticky: string; stretched: string; order: string; alt: string; edit: string; template: string; shown: string; horizontal: string; vertical: string; fullscreen: string; bottom: string; }; /** * @hidden */ export declare const strippedClassNames: (...args: any[]) => string; /** SVG classes configuration */ export declare interface SvgClasses { /** Main SVG class, sets fill and flex behavior */ main?: string; /** Horizontal flip transformation for the SVG */ flipH?: string; /** Vertical flip transformation for the SVG */ flipV?: string; } /** * @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 ( * * ); * }; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const SvgIcon: React_2.ForwardRefExoticComponent>; /** * SVGIcon Classes */ export declare interface SVGIconClasses { /** Wrapper configuration*/ wrapper?: WrapperClasses; /** SVG configuration */ svg?: SvgClasses; } /** * @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 { /** * Specifies the SVG icon. * * * The possible keys are: * * `name`—The unique name of the icon. * * `content`—The entire SVG content of the icon. * * `viewBox`—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: default_2.Requireable; content: default_2.Validator; viewBox: default_2.Validator; }>>; /** * @hidden */ export declare const TABBABLE_ELEMENTS: string[]; export declare interface TextBoxClasses { /** Wrapper configurations for the text box */ wrapper?: { /** Main class for the wrapper */ main?: string; /** Class for the input element */ input?: string; /** Size configurations for the input */ size?: { /** Small size class */ small?: string; /** Medium size class */ medium?: string; /** Large size class */ large?: string; }; /** Fill mode configurations for the input */ fillMode?: { /** Solid fill mode class */ solid?: string; /** Outline fill mode class */ outline?: string; /** Flat fill mode class */ flat?: string; }; /** Rounded border configurations */ rounded?: { /** Small rounded border class */ small?: string; /** Medium rounded border class */ medium?: string; /** Large rounded border class */ large?: string; }; /** Disabled state class */ disabled?: string; /** Focused state class */ focused?: string; /** Required state class */ required?: string; /** Invalid state class */ invalid?: string; /** RTL (right-to-left) layout class */ isRtl?: string; }; /** Class for the inner part of the input */ inputInner?: string; /** Prefix configurations for the input */ prefix?: { /** Main class for the prefix */ main?: string; /** Orientation configurations for the prefix */ orientation?: { /** Horizontal orientation class */ horizontal?: string; /** Vertical orientation class */ vertical?: string; }; }; /** Suffix configurations for the input */ suffix?: { /** Main class for the suffix */ main?: string; /** Orientation configurations for the suffix */ orientation?: { /** Horizontal orientation class */ horizontal?: string; /** Vertical orientation class */ vertical?: string; }; }; } /** Theme color options for the wrapper */ export declare interface ThemeColorClasses { /** The text color should inherit from its parent */ inherit?: string; /** Text color for the primary theme */ primary?: string; /** Text color for the secondary theme */ secondary?: string; /** Text color for the tertiary theme */ tertiary?: string; /** Text color for informational messages */ info?: string; /** Text color indicating success */ success?: string; /** Text color for warnings */ warning?: string; /** Text color indicating errors */ error?: string; /** Text color for dark theme */ dark?: string; /** Text color for light theme */ light?: string; } /** Theme colors fill mode options for */ export declare interface ThemeColorFillModeClasses { /** Fill mode options for theme colors */ fillMode?: { /** Solid fill mode for theme colors */ solid?: string; /** Outline fill mode for theme colors */ outline?: string; /** Flat fill mode for theme colors */ flat?: string; /** Link fill mode for theme colors */ link?: string; /** Clear fill mode for theme colors */ clear?: string; }; } /** * @hidden */ export declare const themeColorMap: PresetOption; export declare interface TimeClasses { /** Footer configuration for the date input */ footer?: TimeFooterClasses; /** Cancel action class for the date input */ cancel?: string; /** Accept action class for the date input */ accept?: string; /** Part configuration for the date input */ part?: TimePartClasses; /** Header class for the date input */ header?: string; /** Now action class for the date input */ now?: string; /** List container class for the date input */ listContainer?: string; /** Highlighted state class for the date input */ highlight?: string; /** List wrapper configuration for the date input */ listWrapper?: TimeListWrapperClasses; /** List class for the date input */ list?: string; /** Main container configuration for the date input */ container?: TimeContainerClasses; /** Container selector class for the date input */ containerSelector?: string; /** Separator class for the date input */ separator?: string; /** Unordered list class */ ul?: string; /** List item class */ li?: string; /** Title class for the date input */ title?: string; /** Scrollable placeholder class for the date input */ scrollablePlaceholder?: string; } export declare interface TimeContainerClasses { /** Main container class for the date input */ main?: string; /** Scrollable state class for the container */ scrollable?: string; /** Content class within the container */ content?: string; } export declare interface TimeFooterClasses { /** Main footer class for time date input */ main?: string; /** Actions container class within the footer */ actions?: string; /** Stretched state class for the footer actions */ stretched?: string; /** Horizontal alignment class for the footer actions */ horizontal?: string; } export declare interface TimeListWrapperClasses { /** Main wrapper class for the list */ main?: string; /** Focused state class for the list wrapper */ focused?: string; } export declare interface TimePartClasses { /** Main class for the part of the date input */ main?: string; /** Disabled state class for the part */ disabled?: string; } export declare interface TimePickerClasses { /** Wrapper configuration for the timepicker */ wrapper?: TimePickerWrapperClasses; /** Button class for the input component of the timepicker */ inputButton?: string; /** Popup configuration for the timepicker */ popup?: TimePopupClasses; /** Time selector configuration for the timepicker */ timeSelector?: TimeSelectorClasses; } export declare interface TimePickerWrapperClasses { /** Main class for the timepicker wrapper */ main?: string; /** Input class for the timepicker */ input?: string; /** Size configurations for the timepicker */ size?: DateTimeSizeClasses; /** Fill mode configurations for the timepicker */ fillMode?: DateTimeFillModeClasses; /** Rounded configurations for the timepicker */ rounded?: DateTimeRoundedClasses; /** Disabled state class for the timepicker */ disabled?: string; /** Required state class for the timepicker */ required?: string; /** Invalid state class for the timepicker */ invalid?: string; } export declare interface TimePopupClasses { /** Main class for the timepicker popup */ main?: string; /** Container class for the popup list */ container?: string; } export declare interface TimeSelectorClasses { /** Main class for the time selector */ main?: string; /** Size configurations for the time selector */ size?: DateTimeSizeClasses; /** Disabled state class for the time selector */ disabled?: string; /** Reset class for the time selector */ reset?: 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 ( * Heading 2 * ); * }; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const Typography: { h1: React_2.ForwardRefExoticComponent; h2: React_2.ForwardRefExoticComponent; h3: React_2.ForwardRefExoticComponent; h4: React_2.ForwardRefExoticComponent; h5: React_2.ForwardRefExoticComponent; h6: React_2.ForwardRefExoticComponent; p: React_2.ForwardRefExoticComponent; code: React_2.ForwardRefExoticComponent; pre: React_2.ForwardRefExoticComponent; }; /** * @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`—font-weight: 300 * * `normal`—font-weight: 400 * * `bold`—For Default and Bootstrap themes—font-weight: 700. For Material theme—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` —Applies 4px margin. * * `small` —Applies 8px margin. * * `medium` —Applies 12px margin. * * `large` —Applies 16px margin. * * `xlarge` —Applies 24px margin. * * `thin` —Applies 2px margin. * * `hair` —Applies 1px margin. * * `number` —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` —Applies 0.25rem margin. * * `small` —Applies 0.5rem margin. * * `medium` —Applies 0.75rem margin. * * `large` —Applies 1rem margin. * * `xlarge` —Applies 1.25rem margin. * * `thin` —Applies 0.125rem margin. * * `hair` —Applies 0.0625rem margin. * * `number` —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-alignment). * * The possible values are: * * `left`—Applies text-align: left * * `right`—Applies text-align: right * * `center`—Applies text-align: center * * `justify`—Applies text-align: justify * */ textAlign?: 'left' | 'right' | 'center' | 'justify'; /** * Specifies the text transform * [see example]({% slug appearance_typography %}#toc-text-transformation). * * The possible values are: * * `lowercase`—Applies text-transform: lowercase * * `uppercase`—Applies text-transform: uppercase * * `capitalize`—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`—Applies coloring based on the current color. * * `primary` —Applies coloring based on primary theme color. * * `secondary`—Applies coloring based on secondary theme color. * * `tertiary`— Applies coloring based on tertiary theme color. * * `info`—Applies coloring based on info theme color. * * `success`— Applies coloring based on success theme color. * * `warning`— Applies coloring based on warning theme color. * * `error`— Applies coloring based on error theme color. * * `dark`— Applies coloring based on dark theme color. * * `light`— Applies coloring based on light theme color. * * `inverse`— 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 const uAnimation: WidgetClassStructure; /** * @hidden */ export declare const uButton: WidgetClassStructure; /** * @hidden */ export declare const uButtonGroup: WidgetClassStructure; /** * @hidden */ export declare const uCalendar: WidgetClassStructure; /** * @hidden */ export declare const uComboBox: WidgetClassStructure; /** * @hidden */ export declare const uDateInput: WidgetClassStructure; /** * @hidden */ export declare const uDateTimePicker: WidgetClassStructure; /** * @hidden */ export declare const uDropDownButton: WidgetClassStructure; /** * @hidden */ export declare const uDropDownList: WidgetClassStructure; /** * @hidden */ export declare const uDropDownsActionSheet: WidgetClassStructure; /** * @hidden */ export declare const uDropDownsBase: WidgetClassStructure; /** * @hidden */ export declare const uError: WidgetClassStructure; /** * @hidden */ export declare const uFloatingLabel: WidgetClassStructure; /** * @hidden */ export declare const uForm: WidgetClassStructure; /** * @hidden */ export declare const uGrid: WidgetClassStructure; /** * @hidden */ export declare const uHint: WidgetClassStructure; /** * @hidden */ export declare const uInput: WidgetClassStructure; /** * @hidden */ export declare const uLabel: WidgetClassStructure; /** * @hidden */ export declare const uMaskedTextBox: WidgetClassStructure; /** * UnstyledContext */ export declare const UnstyledContext: default_3.Context; /** * @hidden */ export declare function updateItem(items: any[], itemId: string, update: (item: any) => void, cloneField: string, childrenField: string): any[]; /** * @hidden */ export declare const uPopup: WidgetClassStructure; /** * @hidden */ export declare const uRadioButton: WidgetClassStructure; /** * @hidden */ export declare const uRadioGroup: WidgetClassStructure; /** @hidden */ export declare const useAdaptiveModeContext: () => AdaptiveModeContextType; /** * 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({ onFocus, onBlur, onSyncFocus, onSyncBlur }: AsyncFocusBlurArgs): AsyncFocusBlurArgs; /** @hidden */ export declare const useCollection: (initial?: T[]) => [T[], (event: CollectionAction) => void]; /** * @hidden */ export declare const useCustomComponent:

(comp: React_2.ExoticComponent<{ children?: React_2.ReactNode; }> | CustomComponent

| null) => [string | React_2.ComponentType

>, Partial

]; /** * @hidden */ export declare function useDir(elementRef: React_2.RefObject, initialDir?: string, args?: any): string | undefined; /** * Returns a function, which gets the `ownerDocument` of the element. */ export declare const useDocument: (ref: React_2.RefObject) => () => 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, 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. * @param options - The options for the `useDroppable` hook. */ export declare function useDroppable(ref: React_2.RefObject, callbacks?: { onDragEnter?: (event: NormalizedDragEvent) => void; onDragOver?: (event: NormalizedDragEvent) => void; onDragLeave?: (event: NormalizedDragEvent) => void; onDrop?: (event: NormalizedDragEvent) => void; }, options?: DroppableOptions): void; /** @hidden */ export declare function useId(id?: string): any; /** @hidden */ export declare const useIsomorphicLayoutEffect: typeof React_2.useEffect; /** * @hidden */ export declare const useMouse: , R extends {}>(props: P, target: React_2.RefObject, extend?: { onMouseDown?: ((event: React_2.MouseEvent) => void) | undefined; onMouseUp?: ((event: React_2.MouseEvent) => void) | undefined; onClick?: ((event: React_2.MouseEvent) => void) | undefined; onDoubleClick?: ((event: React_2.MouseEvent) => void) | undefined; onMouseEnter?: ((event: React_2.MouseEvent) => void) | undefined; onMouseLeave?: ((event: React_2.MouseEvent) => void) | undefined; onMouseMove?: ((event: React_2.MouseEvent) => void) | undefined; onMouseOut?: ((event: React_2.MouseEvent) => void) | undefined; onMouseOver?: ((event: React_2.MouseEvent) => void) | undefined; }) => ElementMouse; /** @hidden */ export declare const usePropsContext: (context: React_2.Context<(p: T) => T>, props: T) => T; /** * @hidden */ export declare function useRtl(elementRef: React_2.RefObject, initialDir?: string, args?: any): string | undefined; /** * useUnstyled */ export declare const useUnstyled: () => AllClassStructure | undefined; /** * Returns a function, which gets the `defaultView` based on the `ownerDocument` of the element. */ export declare const useWindow: (ref: React_2.RefObject) => () => Window; /** @hidden */ export declare const useZIndexContext: () => ZIndexContextType; /** * @hidden */ export declare const uSvgIcon: WidgetClassStructure; /** * @hidden */ export declare const uTextBox: WidgetClassStructure; /** * @hidden */ export declare const uTime: WidgetClassStructure; /** * @hidden */ export declare const uTimePicker: WidgetClassStructure; /** * @hidden */ export declare const validatePackage: (e: any, additionalInfo: { component: string; features?: string[]; }) => boolean; /** * * @hidden */ export declare const WatermarkOverlay: () => JSX_2.Element; /** * @hidden */ export declare interface WidgetClassStructure { [key: string]: (props: { [key: string]: any; }) => { [key: string]: boolean; } | string; } /** @hidden */ export declare const withAdaptiveModeContext:

(Component: React_2.ComponentType

) => React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** @hidden */ export declare const withIdHOC:

(Component: React_2.ComponentType

) => React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** @hidden */ export declare const withPropsContext: (context: React_2.Context<(p: T) => T>, Component: React_2.ComponentType) => React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** @hidden */ export declare const withUnstyledHOC:

(Component: React_2.ComponentType

) => React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** @hidden */ export declare const withZIndexContext:

(Component: React_2.ComponentType

) => React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** Wrapper classes configuration */ export declare interface WrapperClasses { /** Main wrapper class */ main?: string; /** SVG prefix class */ svgPrefix?: string; /** SVG name prefix class */ namePrefix?: string; /** Horizontal flip transformation */ flipH?: string; /** Vertical flip transformation */ flipV?: string; /** Theme color options for the wrapper */ themeColor?: ThemeColorClasses; /** Size options for the wrapper */ size?: SizeClasses; } /** * @hidden */ declare const ZERO_LEVEL_ZERO_NODE_ID = "0"; /** @hidden */ export declare const ZIndexContext: React_2.Context; /** @hidden */ export declare type ZIndexContextType = number | undefined; export { }