@progress/kendo-react-common

/** * @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<AdaptiveModeContextType>; /** * 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: <PropsType>(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<any> & { children: (args: AsyncFocusBlurArgs<any>) => React_2.ReactNode; }) => JSX_2.Element; /** * @hidden */ export declare type AsyncFocusBlurArgs<T extends any[]> = { onFocus?: (...event: T) => void; onBlur?: (...event: T) => void; /** * @hidden */ onSyncFocus?: (event: React_2.FocusEvent<any>) => void; /** * @hidden */ onSyncBlur?: (event: React_2.FocusEvent<any>) => void; }; /** * Represents additional configuration options for the `autoScroll` options of the `useDraggable` hook and `Draggable` component. */ export declare interface AutoScrollOptions { /** * Set to `false` to disable the `autoScroll` feature. */ enabled?: boolean; /** * Allows the user to toggle `autoScroll` in a specific direction. */ direction?: { horizontal: boolean; vertical: boolean; }; /** * Overrides the calculated element used for boundary detection, used to calculate the `autoScroll` velocity. */ boundaryElementRef?: React.RefObject<HTMLElement | null | { element: HTMLElement | null; }> | null; } /** * @hidden */ 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<T> { /** * A React Synthetic Event. */ syntheticEvent: React_2.SyntheticEvent<any>; /** * A native DOM event. */ nativeEvent: any; /** * An event target. */ target: T; } /** * @hidden */ declare interface BaseIconProps { /** * Sets the `tabIndex` of the icon element. */ tabIndex?: number; /** * Sets the `id` of the icon element. */ id?: string; /** * Sets additional CSS styles to the icon. */ style?: React.CSSProperties; /** * Specifies a list of CSS classes that will be added to the root DOM element. */ className?: string; /** * Specifies the theme color of the Icon. * * The possible values are: * * `inherit` (Default)—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> = T[]; /** @hidden */ export declare enum COLLECTION_ACTION { add = 0, remove = 1 } /** @hidden */ export declare interface CollectionAction<T> { 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: <T extends unknown>() => 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<P = unknown> = React_2.ComponentType<P> | React_2.ReactElement<Partial<P>> | 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<E extends BaseEvent<React.Component | FCHandle>, FCHandle = object>(eventHandler: ((event: E) => void) | undefined, dispatchedEvent: React.SyntheticEvent<any>, target: E['target'], eventData: Exclude<keyof E, keyof BaseEvent<React.Component | FCHandle>> extends never ? undefined : Pick<E, Exclude<keyof E, keyof BaseEvent<React.Component | FCHandle>>>): void; export { dispatchEvent_2 as dispatchEvent } /** * The `DragAndDrop` component is required for the `droppable` functionality to work properly. * * It is used internally to synchronize the `drag` and `drop` functionalities. * Accepts properties of type [DragAndDropProps]({% slug api_common_draganddropprops %}). */ export declare const DragAndDrop: { (props: DragAndDropProps): JSX_2.Element; displayName: string; }; /** * @hidden */ declare const DragAndDropContext: React_2.Context<{ drag?: React_2.RefObject<DragTarget> | null | undefined; setDrag?: ((value: React_2.RefObject<DragTarget> | null) => void) | undefined; drop?: React_2.RefObject<DropTarget> | null | undefined; setDrop?: ((value: React_2.RefObject<DropTarget> | null) => void) | undefined; drags?: React_2.RefObject<DragTarget>[] | undefined; registerDrag?: ((item: React_2.RefObject<DragTarget>) => void) | undefined; deregisterDrag?: ((item: React_2.RefObject<DragTarget>) => void) | undefined; drops?: React_2.RefObject<DropTarget>[] | undefined; registerDrop?: ((item: React_2.RefObject<DropTarget>) => void) | undefined; deregisterDrop?: ((item: React_2.RefObject<DropTarget>) => 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<DraggableProps & React_2.RefAttributes<DraggableHandle | null>>; export declare type Draggable = DraggableHandle; /** * Represents the object of the `onDragEnd` callback. */ export declare interface DraggableDragEndEvent extends BaseDraggableEvent { } /** * Represents the object of the `onDrag` callback. */ export declare interface DraggableDragEvent extends BaseDraggableEvent { } /** * Represents the object of the `onDragStart` callback. */ export declare interface DraggableDragStartEvent extends BaseDraggableEvent { } /** * Represents the `ref` object of the `Draggable` component. */ export declare interface DraggableHandle { /** * The element which is being dragged. */ element: HTMLElement | null; } /** * Represents the configuration object type of the `Draggable` component and `useDraggable` hook. */ export declare interface DraggableOptions { /** * Set the `hint` to override the element used for collision detection. * * For more information, refer to the [Drag Hint]({% slug drag-hint_drag-and-drop %}) article. */ hint?: React_2.RefObject<HTMLElement | null | { element: HTMLElement | null; }> | null; /** * Set the `mouseOnly` property to `true` to stop the draggable from attaching `touch` event handlers. * * Defaults to `false`. */ mouseOnly?: boolean; /** * Set the `autoScroll` property to `false` to disable automatic container scroll when close to the edge. * For more information, refer to the [Auto Scroll]({% slug auto-scroll_drag-and-drop %}) article. * * Defaults to `true`. */ autoScroll?: boolean | AutoScrollOptions; /** * @hidden */ scrollContainer?: React_2.RefObject<HTMLElement | null | { element: HTMLElement | null; }>; /** * 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<HTMLElement | null | { element: HTMLElement | null; [key: string]: any; }>; /** @hidden */ children?: React_2.ReactNode; } /** * Represents the object of the `onRelease` callback. */ export declare interface DraggableReleaseEvent extends BaseDraggableEvent { } 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<Dr