/** * @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 { DraggableDragEvent } from '@progress/kendo-react-common'; import { DraggableDragStartEvent } from '@progress/kendo-react-common'; import { DraggableReleaseEvent } from '@progress/kendo-react-common'; import { JSX } from 'react/jsx-runtime'; import { Navigation } from '@progress/kendo-react-common'; import * as React_2 from 'react'; /** * @hidden */ declare interface BaseEvent<T extends React.Component> { /** * An event target. */ target: T; } /** * @hidden */ declare abstract class PreventableEvent { private prevented; /** * Prevents the default action for a specified event. * In this way, the source component suppresses the built-in behavior that follows the event. */ preventDefault(): void; /** * Returns `true` if the event was prevented by any of its subscribers. * * @returns - Returns `true` if the default action was prevented. * Otherwise, returns `false`. */ isDefaultPrevented(): boolean; } export declare class Sortable extends React_2.Component<SortableProps, SortableState> { /** * @hidden */ static defaultProps: SortableDefaultProps; /** * @hidden */ static propTypes: { idField: default_2.Validator<string>; disabledField: default_2.Requireable<string>; data: default_2.Validator<any[]>; tabIndex: default_2.Requireable<number>; navigation: default_2.Requireable<boolean>; animation: default_2.Requireable<boolean>; itemsWrapUI: default_2.Requireable<any>; itemUI: default_2.Validator<(...args: any[]) => any>; emptyItemUI: default_2.Requireable<(...args: any[]) => any>; style: default_2.Requireable<object>; className: default_2.Requireable<string>; onDragStart: default_2.Requireable<(...args: any[]) => any>; onDragOver: default_2.Requireable<(...args: any[]) => any>; onDragEnd: default_2.Requireable<(...args: any[]) => any>; onNavigate: default_2.Requireable<(...args: any[]) => any>; }; /** * @hidden */ state: { clientX: number; clientY: number; isDragging: boolean; activeId: string; dragCueWidth: number; dragCueHeight: number; }; private isRtl; private get container(); private itemRefsMap; private oldSizesMap; private animatingItemMap; private draggableRef; private offsetParent; private isUnmounted; private focusActiveId; private isKeyboardNavigated; private isDragPrevented; private navigation?; private readonly showLicenseWatermark; constructor(props: SortableProps); /** * @hidden */ getSnapshotBeforeUpdate(): null; /** * @hidden */ componentDidUpdate(previousProps: SortableProps): void; /** * @hidden */ componentDidMount(): void; /** * @hidden */ componentWillUnmount(): void; /** * @hidden */ windowTimeout: (id: any) => void; /** * @hidden */ swapItems: (newState: object[], source: number, destination: number) => number; /** * @hidden */ generateNewState: (prevIndex: number, nextIndex: number) => object[]; /** * @hidden */ closestSortableItem: (target: HTMLElement | null) => { element: HTMLElement | null; id: string; }; /** * @hidden */ isSortable: (target: HTMLElement) => boolean; /** * @hidden */ closestSortable: (target: HTMLElement | null) => HTMLElement | null; /** * @hidden */ isSameSortable: (element: HTMLElement) => boolean; /** * @hidden */ idComparer: (id1: any, id2: any) => boolean; /** * @hidden */ findItem: (id: string) => object | undefined; /** * @hidden */ findIndex: (id: string) => number; /** * @hidden */ isItemDisabled: (item: any) => boolean; /** * @hidden */ shouldResetActive: () => boolean; /** * @hidden */ parentOffset(): any; /** * @hidden */ widgetTarget: (target: any) => boolean; /** * @hidden */ allowDrag: (target: HTMLElement) => boolean; /** * @hidden */ onDragStart: (eventData: DraggableDragStartEvent) => void; /** * @hidden */ onDragOver: (eventData: DraggableDragEvent) => void; /** * @hidden */ onDragEnd: (eventData: DraggableReleaseEvent) => void; /** * @hidden */ shouldReorder: (draggerOverElement: HTMLElement | null, clientX: number, clientY: number) => boolean | null; /** * @hidden */ thresholdRect: (draggerOverElement: HTMLElement | null) => { top: number; left: number; bottom: number; right: number; } | null; /** * @hidden */ onItemBlur: () => void; /** * @hidden */ onItemFocus: (event: React_2.FocusEvent<HTMLDivElement>) => void; /** * @hidden */ resetState: (resetActive?: boolean) => void; /** * @hidden */ renderData: () => JSX.Element[]; /** * @hidden */ renderNoData: () => JSX.Element | undefined; /** * @hidden */ renderDragCue: () => JSX.Element | undefined; /** * @hidden */ refAssign: (element: any, id: any) => void; /** * @hidden */ draggableRefAssign: (ref: any) => void; /** * @hidden */ onKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void; /** * @hidden */ handleNext: (t: HTMLElement, nav: Navigation, ev: React_2.KeyboardEvent<HTMLElement>) => void; handlePrev: (t: HTMLElement, nav: Navigation, ev: React_2.KeyboardEvent<HTMLElement>) => void; moveItem: (t: HTMLElement, nav: Navigation, ev: React_2.KeyboardEvent<HTMLElement>, direction: 'next' | 'prev') => void; render(): JSX.Element; } /** * @hidden */ declare interface SortableDefaultProps { /** * Specifies the tab index of the Sortable items. */ tabIndex?: number; /** * Enables or disables the [keyboard navigation]({% slug keyboard_navigation_sortable %}). * Defaults to `true`. */ navigation?: boolean; /** * Enables or disables the reorder animation of the Sortable items. * defaults to `true`. */ animation?: boolean; /** * The component that is rendered when no data is available. */ emptyItemUI?: React.ComponentType<SortableEmptyItemUIProps>; } /** * Represents the props of the UI component that is rendered when no data is available. */ export declare interface SortableEmptyItemUIProps { /** * The `noData` localization message. */ message: string; } /** * Represents the props of the Sortable item UI component. */ export declare interface SortableItemUIProps { /** * The data object that represents the current Sortable item. */ dataItem: any; /** * The flag which describes that an item is disabled. */ isDisabled: boolean; /** * The flag which describes that an item is active. */ isActive: boolean; /** * The flag which describes that an item is dragged. */ isDragged: boolean; /** * The flag which describes that an item is rendered inside the drag cue. */ isDragCue: boolean; /** * The callback function that has to be passed to the `ref` property of the first child element. */ forwardRef?: (element: HTMLElement) => void; /** * The atributes that have to be passed to the first child element. */ attributes?: any; /** * The CSS styles that have to be passed to the first child element. */ style: React.CSSProperties; } /** * The `SortableOnDragEndEvent` event. */ export declare class SortableOnDragEndEvent implements BaseEvent<Sortable> { /** * The Sortable component. */ target: Sortable; /** * The previous index of the dragged item. */ prevIndex: number; /** * The new index of the dragged item. */ nextIndex: number; /** * The new state of the Sortable data. */ newState: Array<object>; /** * @hidden */ constructor(target: Sortable, prevIndex: number, nextIndex: number, newState: Array<object>); } /** * The `SortableOnDragOverEvent` event. */ export declare class SortableOnDragOverEvent implements BaseEvent<Sortable> { /** * The Sortable component. */ target: Sortable; /** * The previous index of the dragged item. */ prevIndex: number; /** * The new index of the dragged item. */ nextIndex: number; /** * The new state of the Sortable data. */ newState: Array<object>; /** * @hidden */ constructor(target: Sortable, prevIndex: number, nextIndex: number, newState: Array<object>); } /** * The `SortableOnDragStartEvent` event. */ export declare class SortableOnDragStartEvent extends PreventableEvent implements BaseEvent<Sortable> { /** * The Sortable component. */ target: Sortable; /** * The target element. */ element: HTMLElement; /** * The previous index of the dragged item. */ prevIndex: number; /** * @hidden */ constructor(target: Sortable, prevIndex: number, element: HTMLElement); } /** * The `SortableOnNavigateEvent` event. */ export declare class SortableOnNavigateEvent implements BaseEvent<Sortable> { /** * The Sortable component. */ target: Sortable; /** * The previous index of the dragged item. */ prevIndex: number; /** * The new index of the dragged item. */ nextIndex: number; /** * The new state of the Sortable data. */ newState: Array<object>; /** * @hidden */ constructor(target: Sortable, prevIndex: number, nextIndex: number, newState: Array<object>); } /** * Represents the props of the [KendoReact Sortable component]({% slug overview_sortable %}). */ export declare interface SortableProps extends SortableDefaultProps { /** * (Required) The Sortable items UI. * * @example * ```jsx * const ItemUI = (props) => <div>{props.dataItem.text}</div>; * <Sortable itemUI={ItemUI} /> * ``` */ itemUI: React.ComponentType<SortableItemUIProps>; /** * @hidden * * Use it to override the sortable items container component. * * @default 'div' */ itemsWrapUI?: React.ForwardRefExoticComponent<any>; /** * (Required) The field which uniquely identifies the Sortable items. * * @example * ```jsx * <Sortable idField="id" /> * ``` */ idField: string; /** * The field which enables or disables an item. * * @example * ```jsx * <Sortable disabledField="isDisabled" /> * ``` */ disabledField?: string; /** * (Required) The data items of the Sortable. * * @example * ```jsx * <Sortable data={[{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]} /> * ``` */ data: Array<object>; /** * Defines the CSS styles which are applied to the Sortable element. * * @example * ```jsx * <Sortable style={{ border: '1px solid black' }} /> * ``` */ style?: React.CSSProperties; /** * Defines the CSS class which is applied to the Sortable element. * * @example * ```jsx * <Sortable className="custom-sortable" /> * ``` */ className?: string; /** * Fires when the user starts dragging an item. This event is preventable. * * @example * ```jsx * <Sortable onDragStart={(event) => console.log(event)} /> * ``` */ onDragStart?: (event: SortableOnDragStartEvent) => void; /** * Fires when the user is dragging an item over another Sortable item. * * @example * ```jsx * <Sortable onDragOver={(event) => console.log(event)} /> * ``` */ onDragOver?: (event: SortableOnDragOverEvent) => void; /** * Fires when the user stops dragging an item. * * @example * ```jsx * <Sortable onDragEnd={(event) => console.log(event)} /> * ``` */ onDragEnd?: (event: SortableOnDragEndEvent) => void; /** * Fires when the user navigates within the Sortable by using the keyboard. * * @example * ```jsx * <Sortable onNavigate={(event) => console.log(event)} /> * ``` */ onNavigate?: (event: SortableOnNavigateEvent) => void; /** * If set to `true`, the user can use dedicated shortcuts to interact with the Sortable. * By default, navigation is disabled. * * @example * ```jsx * <Sortable navigatable={true} /> * ``` */ navigatable?: boolean; } /** * @hidden */ declare interface SortableState { clientX: number; clientY: number; isDragging: boolean; activeId: string; dragCueWidth: number; dragCueHeight: number; } export { }