@carbon/react
Version:
React components for the Carbon Design System
211 lines (210 loc) • 8.28 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { type ElementType } from 'react';
type UncontrolledOnToggle = (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, 'id' | 'label' | 'value' | 'isExpanded'>) => void;
type ControlledOnToggle = (isExpanded: TreeNodeProps['isExpanded']) => void;
export type TreeNodeProps = {
/**
* **Note:** this is controlled by the parent TreeView component, do not set manually.
* The ID of the active node in the tree
*
* @deprecated The `active` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
active?: string | number;
/**
* Specify the children of the TreeNode
*/
children?: React.ReactNode;
/**
* Specify an optional className to be applied to the TreeNode
*/
className?: string;
/**
* **[Experimental]** The default expansion state of the node.
* *This is only supported with the `enable-treeview-controllable` feature flag!*
*/
defaultIsExpanded?: boolean;
/**
* **Note:** this is controlled by the parent TreeView component, do not set manually.
* TreeNode depth to determine spacing
*
* @deprecated The `depth` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
depth?: number;
/**
* Specify if the TreeNode is disabled
*/
disabled?: boolean;
/**
* Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns
*/
id?: string;
/**
* Specify if the TreeNode is expanded (only applicable to parent nodes)
*/
isExpanded?: boolean;
/**
* Rendered label for the TreeNode
*/
label: React.ReactNode;
/**
* Callback function for when the node receives or loses focus
*
* @deprecated The `onNodeFocusEvent` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
onNodeFocusEvent?: (event: React.FocusEvent<HTMLElement>) => void;
/**
* Callback function for when the node is selected
*/
onSelect?: (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, 'id' | 'label' | 'value'>) => void;
/**
* Callback function for when a parent node is expanded or collapsed
*/
onToggle?: UncontrolledOnToggle | ControlledOnToggle;
/**
* Callback function for when any node in the tree is selected
*
* @deprecated The `onTreeSelect` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
onTreeSelect?: (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, 'id' | 'label' | 'value'>) => void;
/**
* A component used to render an icon.
*/
renderIcon?: ElementType;
/**
* **Note:** this is controlled by the parent TreeView component, do not set manually.
* Array containing all selected node IDs in the tree
* @deprecated The `selected` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
selected?: Array<string | number>;
/**
* Specify the value of the TreeNode
*/
value?: string;
/**
* Optional: The URL the TreeNode is linking to
*/
href?: string;
/**
*
* Specify how the trigger should align with the tooltip when text is truncated
*/
align?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
/**
* **Experimental**: Will attempt to automatically align the floating
* element to avoid collisions with the viewport and being clipped by
* ancestor elements. Requires React v17+
* @see https://github.com/carbon-design-system/carbon/issues/18714
*/
autoAlign?: boolean;
} & Omit<React.LiHTMLAttributes<HTMLElement>, 'onSelect'>;
declare const TreeNode: React.ForwardRefExoticComponent<{
/**
* **Note:** this is controlled by the parent TreeView component, do not set manually.
* The ID of the active node in the tree
*
* @deprecated The `active` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
active?: string | number;
/**
* Specify the children of the TreeNode
*/
children?: React.ReactNode;
/**
* Specify an optional className to be applied to the TreeNode
*/
className?: string;
/**
* **[Experimental]** The default expansion state of the node.
* *This is only supported with the `enable-treeview-controllable` feature flag!*
*/
defaultIsExpanded?: boolean;
/**
* **Note:** this is controlled by the parent TreeView component, do not set manually.
* TreeNode depth to determine spacing
*
* @deprecated The `depth` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
depth?: number;
/**
* Specify if the TreeNode is disabled
*/
disabled?: boolean;
/**
* Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns
*/
id?: string;
/**
* Specify if the TreeNode is expanded (only applicable to parent nodes)
*/
isExpanded?: boolean;
/**
* Rendered label for the TreeNode
*/
label: React.ReactNode;
/**
* Callback function for when the node receives or loses focus
*
* @deprecated The `onNodeFocusEvent` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
onNodeFocusEvent?: (event: React.FocusEvent<HTMLElement>) => void;
/**
* Callback function for when the node is selected
*/
onSelect?: (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, "id" | "label" | "value">) => void;
/**
* Callback function for when a parent node is expanded or collapsed
*/
onToggle?: UncontrolledOnToggle | ControlledOnToggle;
/**
* Callback function for when any node in the tree is selected
*
* @deprecated The `onTreeSelect` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
onTreeSelect?: (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, "id" | "label" | "value">) => void;
/**
* A component used to render an icon.
*/
renderIcon?: ElementType;
/**
* **Note:** this is controlled by the parent TreeView component, do not set manually.
* Array containing all selected node IDs in the tree
* @deprecated The `selected` prop for `TreeNode` has
* been deprecated after the introduction of context. It will be removed in the next major release.
*/
selected?: Array<string | number>;
/**
* Specify the value of the TreeNode
*/
value?: string;
/**
* Optional: The URL the TreeNode is linking to
*/
href?: string;
/**
*
* Specify how the trigger should align with the tooltip when text is truncated
*/
align?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-end" | "left-start" | "right-end" | "right-start";
/**
* **Experimental**: Will attempt to automatically align the floating
* element to avoid collisions with the viewport and being clipped by
* ancestor elements. Requires React v17+
* @see https://github.com/carbon-design-system/carbon/issues/18714
*/
autoAlign?: boolean;
} & Omit<React.LiHTMLAttributes<HTMLElement>, "onSelect"> & React.RefAttributes<HTMLElement>>;
export default TreeNode;