@progress/kendo-react-sortable 13.3.0-develop.9 → 13.4.0-develop.1

package/index.d.ts

@@ -5,544 +5,12 @@
  * 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](https://www.telerik.com/kendo-react-ui/components/sortable/keyboard-navigation).
-     * Defaults to `true`.
-     *
-     * @default true
-     */
-    navigation?: boolean;
-    /**
-     * Enables or disables the reorder animation of the Sortable items.
-     * defaults to `true`.
-     *
-     * @default 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](https://www.telerik.com/kendo-react-ui/components/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 { }
+import { Sortable } from './Sortable.js';
+import { SortableOnDragStartEvent } from './events/SortableOnDragStartEvent.js';
+import { SortableOnDragOverEvent } from './events/SortableOnDragOverEvent.js';
+import { SortableOnDragEndEvent } from './events/SortableOnDragEndEvent.js';
+import { SortableProps } from './interfaces/SortableProps.js';
+import { SortableItemUIProps } from './interfaces/SortableItemUIProps.js';
+import { SortableEmptyItemUIProps } from './interfaces/SortableEmptyItemUIProps.js';
+import { SortableOnNavigateEvent } from './events/SortableOnNavigateEvent.js';
+export { Sortable, SortableProps, SortableItemUIProps, SortableEmptyItemUIProps, SortableOnDragStartEvent, SortableOnDragOverEvent, SortableOnDragEndEvent, SortableOnNavigateEvent };

package/interfaces/SortableDefaultProps.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SortableEmptyItemUIProps } from './SortableEmptyItemUIProps.js';
+/**
+ * @hidden
+ */
+export interface SortableDefaultProps {
+    /**
+     * Specifies the tab index of the Sortable items.
+     */
+    tabIndex?: number;
+    /**
+     * Enables or disables the [keyboard navigation](https://www.telerik.com/kendo-react-ui/components/sortable/keyboard-navigation).
+     * Defaults to `true`.
+     *
+     * @default true
+     */
+    navigation?: boolean;
+    /**
+     * Enables or disables the reorder animation of the Sortable items.
+     * defaults to `true`.
+     *
+     * @default true
+     */
+    animation?: boolean;
+    /**
+     * The component that is rendered when no data is available.
+     */
+    emptyItemUI?: React.ComponentType<SortableEmptyItemUIProps>;
+}

package/interfaces/SortableEmptyItemUIProps.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the props of the UI component that is rendered when no data is available.
+ */
+export interface SortableEmptyItemUIProps {
+    /**
+     * The `noData` localization message.
+     */
+    message: string;
+}

package/interfaces/SortableItemUIProps.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the props of the Sortable item UI component.
+ */
+export 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;
+}