@itwin/itwinui-react/esm/core/Tree/TreeNode.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
import { TreeNodeExpander } from './TreeNodeExpander.js';
type TreeNodeProps = {
    /**
     * Unique id of the node.
     * It has to be compatible with HTML id attribute.
     */
    nodeId: string;
    /**
     * Props for main node inside the treeitem (excluding the sub-tree).
     *
     * If you need to customize the root node instead, pass top-level props
     * directly to the `TreeNode` component.
     */
    nodeProps?: React.ComponentProps<'div'>;
    /**
     * The main text displayed on the node.
     */
    label: React.ReactNode;
    /**
     * Props for TreeNode label(affects both the main and sub label).
     */
    labelProps?: React.ComponentProps<'div'>;
    /**
     * Props for the TreeNode's main label.
     */
    titleProps?: React.ComponentProps<'div'>;
    /**
     * Small note displayed below main label.
     */
    sublabel?: React.ReactNode;
    /**
     * Props for TreeNode sublabel
     */
    sublabelProps?: React.ComponentProps<'div'>;
    /**
     * Icon shown before label and sublabel content.
     */
    icon?: React.JSX.Element;
    /**
     * Props for TreeNode Icon
     */
    iconProps?: React.ComponentProps<'span'>;
    /**
     * Flag whether the node has child sub-nodes. It is used to show expander icon.
     * @default false
     */
    hasSubNodes?: boolean;
    /**
     * Props for subTree list(affects all subnodes of this node).
     */
    subTreeProps?: React.ComponentProps<'div'>;
    /**
     * Flag whether the node is disabled.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Flag whether the node is expanded.
     * @default false
     */
    isExpanded?: boolean;
    /**
     * Flag whether the node is selected.
     * @default false
     */
    isSelected?: boolean;
    /**
     * Callback fired when expanding or closing a TreeNode.
     * Gives nodeId and new isExpanded value of specified node.
     */
    onExpanded: (nodeId: string, isExpanded: boolean) => void;
    /**
     * Callback fired when selecting a TreeNode.
     * Gives nodeId and new isSelected value of specified node.
     */
    onSelected?: (nodeId: string, isSelected: boolean) => void;
    /**
     * Checkbox to be shown at the very beginning of the node.
     * If undefined, checkbox will not be shown.
     * Recommended to use `Checkbox` component.
     */
    checkbox?: React.ReactNode;
    /**
     * Props for TreeNode checkbox.
     */
    checkboxProps?: React.ComponentProps<'div'>;
    /**
     * Custom expander element. If `hasSubNodes` is false, it won't be shown.
     */
    expander?: React.ReactNode;
    /**
     * Props for the default TreeNodeExpander that is shown when there are sub nodes and no expander is given.
     */
    expanderProps?: React.ComponentProps<typeof TreeNodeExpander>;
    /**
     * Props for content of the TreeNode.
     * This affects all passed in children of the node, as well as the label, sublabel, icon, and expander.
     * Note that this does not affect the checkbox.
     */
    contentProps?: React.ComponentProps<'div'>;
    /**
     * Content shown after `TreeNode`.
     */
    children?: React.ReactNode;
    /**
     * @deprecated Use `nodeId` instead.
     */
    id?: never;
};
/**
 * `TreeNode` component to display node content within a `Tree`.
 * Must be used inside `Tree` component to correctly set node `depth` and `subNodes`.
 * @example
  <TreeNode
    nodeId={props.nodeId}
    label={props.node.label}
    sublabel={props.node.sublabel}
    onExpanded={onExpanded}
    onSelected={onSelectedNodeChange}
    isDisabled={props.isDisabled}
    isExpanded={props.isExpanded}
    isSelected={props.isSelected}
    checkbox={
      <Checkbox variant='eyeball' disabled={props.isDisabled} />
    }
    icon={<SvgPlaceholder />}
  />
 */
export declare const TreeNode: PolymorphicForwardRefComponent<"div", TreeNodeProps>;
export {};