@mantine/core/lib/components/Tree/Tree.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
import type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';
import { TreeController } from './use-tree';
export interface TreeNodeData {
    label: React.ReactNode;
    value: string;
    nodeProps?: Record<string, any>;
    children?: TreeNodeData[];
    hasChildren?: boolean;
}
export interface RenderTreeNodePayload {
    /** Node level in the tree */
    level: number;
    /** `true` if the node is expanded, applicable only for nodes with `children` */
    expanded: boolean;
    /** `true` if the node has non-empty `children` array or `hasChildren` is set to `true` in the data */
    hasChildren: boolean;
    /** `true` if the node is selected */
    selected: boolean;
    /** `true` if the node is at the top-most level of the tree (level 1) */
    isRoot: boolean;
    /** `true` if the node's children are currently being loaded */
    isLoading: boolean;
    /** Error from the last failed load attempt, or `null` */
    loadError: Error | null;
    /** Node data from the `data` prop of `Tree` */
    node: TreeNodeData;
    /** Tree controller instance, return value of `useTree` hook */
    tree: TreeController;
    /** Props to spread into the root node element */
    elementProps: {
        className: string;
        style: React.CSSProperties;
        onClick: (event: React.MouseEvent) => void;
        'data-selected': boolean | undefined;
        'data-value': string;
        draggable?: boolean;
        onDragStart?: (event: React.DragEvent) => void;
        onDragOver?: (event: React.DragEvent) => void;
        onDragLeave?: (event: React.DragEvent) => void;
        onDrop?: (event: React.DragEvent) => void;
        onDragEnd?: (event: React.DragEvent) => void;
    };
    /** Props to spread into the drag handle element when `withDragHandle` is set on `Tree`.
     * `undefined` when `withDragHandle` is not enabled or drag-and-drop is disabled. */
    dragHandleProps: TreeDragHandleProps | undefined;
}
export type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;
export type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';
export type TreeCssVariables = {
    root: '--level-offset';
};
export interface TreeDragState {
    draggedValue: string | null;
    currentDropTarget: HTMLElement | null;
}
export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {
    /** Data used to render nodes */
    data: TreeNodeData[];
    /** Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value @default 'lg' */
    levelOffset?: MantineSpacing;
    /** If set, tree node with children is expanded on click @default true */
    expandOnClick?: boolean;
    /** If set, tree node with children is expanded on space key press @default true */
    expandOnSpace?: boolean;
    /** If set, tree node is checked on space key press @default false */
    checkOnSpace?: boolean;
    /** If set, tree node is selected on click @default false */
    selectOnClick?: boolean;
    /** Use-tree hook instance that can be used to manipulate component state */
    tree?: TreeController;
    /** A function to render tree node label */
    renderNode?: RenderNode;
    /** If set, selection is cleared when user clicks outside of the tree @default false */
    clearSelectionOnOutsideClick?: boolean;
    /** If set, tree nodes range can be selected with click when `Shift` key is pressed @default true */
    allowRangeSelection?: boolean;
    /** If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false */
    keepMounted?: boolean;
    /** Called when a node is dropped on another node, enables drag-and-drop when provided */
    onDragDrop?: (payload: TreeDragDropPayload) => void;
    /** Called for each potential drop target to determine whether a drop is allowed.
     * When it returns `false`, the drop indicator is hidden and the drop is rejected. */
    allowDrop?: TreeAllowDrop;
    /** If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps`
     * from the `renderNode` payload, rather than anywhere on the node. @default false */
    withDragHandle?: boolean;
    /** If set, connecting lines are rendered showing parent-child relationships @default false */
    withLines?: boolean;
}
export type TreeFactory = Factory<{
    props: TreeProps;
    ref: HTMLUListElement;
    stylesNames: TreeStylesNames;
    vars: TreeCssVariables;
}>;
export declare const Tree: import("../..").MantineComponent<{
    props: TreeProps;
    ref: HTMLUListElement;
    stylesNames: TreeStylesNames;
    vars: TreeCssVariables;
}>;
export declare namespace Tree {
    type Props = TreeProps;
    type StylesNames = TreeStylesNames;
    type Factory = TreeFactory;
    type NodeData = TreeNodeData;
    type RenderNodePayload = RenderTreeNodePayload;
}