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

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

/**
 * @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;
    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_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 { }