@huyngth/react-selection/dist/index.d.ts

A selection feature same as ones in OS (File Explorer/Finder)

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { PropsWithChildren, HTMLAttributes, CSSProperties, RefObject, MouseEvent } from 'react';

interface Props$2 extends HTMLAttributes<HTMLDivElement> {
    className?: string;
    id: string;
}
declare function SelectableItem({ children, id, className, ...props }: PropsWithChildren<Props$2>): react_jsx_runtime.JSX.Element;

type TSelection = {
    x1: number;
    y1: number;
    x2: number;
    y2: number;
} | null;
type TSelectableItem = {
    ID: string;
};
type CollisionType = "absolutely-inside" | "intersect";
interface Classes {
    root: string;
    selectionBox: string;
}
type SelectionZoneBaseProps = {
    className?: string;
    classes?: Partial<Classes>;
    selectionBoxStyle?: CSSProperties;
};

interface Props$1 extends HTMLAttributes<HTMLDivElement>, SelectionZoneBaseProps {
    selectionContainerRef: RefObject<HTMLDivElement>;
    isSelecting: boolean;
    selection: TSelection;
    handleMouseDown: (e: MouseEvent) => void;
    handleMouseMove: (e: MouseEvent) => void;
    handleMouseUp: (e: MouseEvent) => void;
}
declare function SelectionZonePrimitive({ children, selectionContainerRef, isSelecting, selection, handleMouseDown, handleMouseMove, handleMouseUp, classes, className, style, selectionBoxStyle, ...props }: PropsWithChildren<Props$1>): react_jsx_runtime.JSX.Element;

type HandleMouseMoveCBProps<T> = {
    e: MouseEvent;
    selection: TSelection;
    isSelecting: boolean;
    items: T[];
    selectionContainerRefCurrent: HTMLDivElement | null;
    callback: (items: T[]) => void;
};
interface UseSelectionZoneProps<_> {
    collisionType?: CollisionType;
}
declare const useSelectionZone: <T extends TSelectableItem>({ collisionType, }?: UseSelectionZoneProps<T>) => {
    selectionContainerRef: react.RefObject<HTMLDivElement>;
    isSelecting: boolean;
    selection: TSelection;
    handleMouseDown: (e: MouseEvent) => void;
    handleMouseMove: ({ e, selection, isSelecting, items, selectionContainerRefCurrent, callback, }: HandleMouseMoveCBProps<T>) => void;
    handleMouseUp: (extendedCallback?: () => void) => void;
};

type Props<T> = HTMLAttributes<HTMLDivElement> & SelectionZoneBaseProps & {
    items: T[];
    collisionType?: CollisionType;
    onSelectReturn: (items: T[]) => void;
    mouseDownExtendedCallBack?: () => void;
};
declare function SelectionZone<T extends TSelectableItem>({ children, classes, className, style, selectionBoxStyle, collisionType, items, onSelectReturn, mouseDownExtendedCallBack, ...props }: PropsWithChildren<Props<T>>): react_jsx_runtime.JSX.Element;

export { type CollisionType, SelectableItem, SelectionZonePrimitive, SelectionZone as default, useSelectionZone };