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; 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'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, 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; }