ivt/dist/sortable/index.d.ts

Ivt Components Library

import * as react_jsx_runtime from 'react/jsx-runtime';
import { UniqueIdentifier, DndContextProps, DragOverlay } from '@dnd-kit/core';
import { SortableContextProps } from '@dnd-kit/sortable';
import { SlotProps } from '@radix-ui/react-slot';
import * as React from 'react';
import { ButtonProps } from '../button/index.js';
import 'class-variance-authority/types';
import 'class-variance-authority';

interface SortableProps<TData extends {
    id: UniqueIdentifier;
}> extends DndContextProps {
    /**
     * An array of data items that the sortable component will render.
     * @example
     * value={[
     *   { id: 1, name: 'Item 1' },
     *   { id: 2, name: 'Item 2' },
     * ]}
     */
    value: TData[];
    /**
     * An optional callback function that is called when the order of the data items changes.
     * It receives the new array of items as its argument.
     * @example
     * onValueChange={(items) => console.log(items)}
     */
    onValueChange?: (items: TData[]) => void;
    /**
     * An optional callback function that is called when an item is moved.
     * It receives an event object with `activeIndex` and `overIndex` properties, representing the original and new positions of the moved item.
     * This will override the default behavior of updating the order of the data items.
     * @type (event: { activeIndex: number; overIndex: number }) => void
     * @example
     * onMove={(event) => console.log(`Item moved from index ${event.activeIndex} to index ${event.overIndex}`)}
     */
    onMove?: (event: {
        activeIndex: number;
        overIndex: number;
    }) => void;
    /**
     * A collision detection strategy that will be used to determine the closest sortable item.
     * @default closestCenter
     * @type DndContextProps["collisionDetection"]
     */
    collisionDetection?: DndContextProps["collisionDetection"];
    /**
     * An array of modifiers that will be used to modify the behavior of the sortable component.
     * @default
     * [restrictToVerticalAxis, restrictToParentElement]
     * @type Modifier[]
     */
    modifiers?: DndContextProps["modifiers"];
    /**
     * A sorting strategy that will be used to determine the new order of the data items.
     * @default verticalListSortingStrategy
     * @type SortableContextProps["strategy"]
     */
    strategy?: SortableContextProps["strategy"];
    /**
     * Specifies the axis for the drag-and-drop operation. It can be "vertical", "horizontal", or "both".
     * @default "vertical"
     * @type "vertical" | "horizontal" | "mixed"
     */
    orientation?: "vertical" | "horizontal" | "mixed";
    /**
     * An optional React node that is rendered on top of the sortable component.
     * It can be used to display additional information or controls.
     * @default null
     * @type React.ReactNode | null
     * @example
     * overlay={<Skeleton className="w-full h-8" />}
     */
    overlay?: React.ReactNode | null;
    /**
     * An optional array of items to be used in the SortableContext.
     * If provided, this will be used instead of the `value` prop for the SortableContext items.
     * This is useful for restricting the sortable context to a subset of items (e.g. siblings only).
     */
    contextItems?: TData[];
}
declare function Sortable<TData extends {
    id: UniqueIdentifier;
}>({ value, onValueChange, collisionDetection, modifiers, strategy, onMove, orientation, overlay, children, onDragStart, onDragEnd, contextItems, ...props }: SortableProps<TData>): react_jsx_runtime.JSX.Element;
interface SortableOverlayProps extends React.ComponentPropsWithRef<typeof DragOverlay> {
    activeId?: UniqueIdentifier | null;
}
declare const SortableOverlay: React.ForwardRefExoticComponent<SortableOverlayProps & React.RefAttributes<HTMLDivElement>>;
interface SortableItemProps extends SlotProps {
    /**
     * The unique identifier of the item.
     * @example "item-1"
     * @type UniqueIdentifier
     */
    value: UniqueIdentifier;
    /**
     * Specifies whether the item should act as a trigger for the drag-and-drop action.
     * @default false
     * @type boolean | undefined
     */
    asTrigger?: boolean;
    /**
     * Merges the item's props into its immediate child.
     * @default false
     * @type boolean | undefined
     */
    asChild?: boolean;
}
declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLDivElement>>;
interface SortableDragHandleProps extends ButtonProps {
    withHandle?: boolean;
}
declare const SortableDragHandle: React.ForwardRefExoticComponent<SortableDragHandleProps & React.RefAttributes<HTMLButtonElement>>;

export { Sortable, SortableDragHandle, SortableItem, SortableOverlay };