@progress/kendo-react-sortable/Sortable.d.ts

React Sortable provides a sortable drag-and-drop functionality to elements within a list. KendoReact Sortable package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { default as PropTypes } from 'prop-types';
import { DraggableDragEvent, DraggableDragStartEvent, DraggableReleaseEvent, Navigation } from '@progress/kendo-react-common';
import { SortableProps } from './interfaces/SortableProps';
import { SortableDefaultProps } from './interfaces/SortableDefaultProps';
import * as React from 'react';
/**
 * @hidden
 */
interface SortableState {
    clientX: number;
    clientY: number;
    isDragging: boolean;
    activeId: string;
    dragCueWidth: number;
    dragCueHeight: number;
}
export declare class Sortable extends React.Component<SortableProps, SortableState> {
    /**
     * @hidden
     */
    static defaultProps: SortableDefaultProps;
    /**
     * @hidden
     */
    static propTypes: {
        idField: PropTypes.Validator<string>;
        disabledField: PropTypes.Requireable<string>;
        data: PropTypes.Validator<any[]>;
        tabIndex: PropTypes.Requireable<number>;
        navigation: PropTypes.Requireable<boolean>;
        animation: PropTypes.Requireable<boolean>;
        itemsWrapUI: PropTypes.Requireable<any>;
        itemUI: PropTypes.Validator<(...args: any[]) => any>;
        emptyItemUI: PropTypes.Requireable<(...args: any[]) => any>;
        style: PropTypes.Requireable<object>;
        className: PropTypes.Requireable<string>;
        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
        onDragOver: PropTypes.Requireable<(...args: any[]) => any>;
        onDragEnd: PropTypes.Requireable<(...args: any[]) => any>;
        onNavigate: PropTypes.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;
    private readonly licenseMessage?;
    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.FocusEvent<HTMLDivElement>) => void;
    /**
     * @hidden
     */
    resetState: (resetActive?: boolean) => void;
    /**
     * @hidden
     */
    renderData: () => React.JSX.Element[];
    /**
     * @hidden
     */
    renderNoData: () => React.JSX.Element | undefined;
    /**
     * @hidden
     */
    renderDragCue: () => React.JSX.Element | undefined;
    /**
     * @hidden
     */
    refAssign: (element: any, id: any) => void;
    /**
     * @hidden
     */
    draggableRefAssign: (ref: any) => void;
    /**
     * @hidden
     */
    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
    /**
     * @hidden
     */
    handleNext: (t: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>) => void;
    handlePrev: (t: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>) => void;
    moveItem: (t: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>, direction: 'next' | 'prev') => void;
    render(): React.JSX.Element;
}
export {};