diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 2b9fdb161faa..7395effdf351 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -9126,6 +9126,9 @@ Map { "disabled": Object { "type": "bool", }, + "id": Object { + "type": "string", + }, "isExpanded": Object { "type": "bool", }, @@ -9210,6 +9213,9 @@ Map { "disabled": Object { "type": "bool", }, + "id": Object { + "type": "string", + }, "isExpanded": Object { "type": "bool", }, diff --git a/packages/react/src/components/TreeView/TreeNode.js b/packages/react/src/components/TreeView/TreeNode.js index 2c3da6c02834..6b4e1e76f70e 100644 --- a/packages/react/src/components/TreeView/TreeNode.js +++ b/packages/react/src/components/TreeView/TreeNode.js @@ -21,6 +21,7 @@ const TreeNode = React.forwardRef( className, depth, disabled, + id: nodeId, isExpanded, label, onNodeFocusEvent, @@ -34,7 +35,7 @@ const TreeNode = React.forwardRef( }, ref ) => { - const { current: id } = useRef(rest.id || uniqueId()); + const { current: id } = useRef(nodeId || uniqueId()); const [expanded, setExpanded] = useState(isExpanded); const currentNode = useRef(null); const currentNodeLabel = useRef(null); @@ -234,7 +235,8 @@ const TreeNode = React.forwardRef( TreeNode.propTypes = { /** - * The value of the active node in the tree + * **Note:** this is controlled by the parent TreeView component, do not set manually. + * The ID of the active node in the tree */ active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -249,7 +251,8 @@ TreeNode.propTypes = { className: PropTypes.string, /** - * TreeNode depth to determine spacing, automatically calculated by default + * * **Note:** this is controlled by the parent TreeView component, do not set manually. + * TreeNode depth to determine spacing */ depth: PropTypes.number, @@ -258,6 +261,11 @@ TreeNode.propTypes = { */ disabled: PropTypes.bool, + /** + * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active and props.selected + */ + id: PropTypes.string, + /** * Specify if the TreeNode is expanded (only applicable to parent nodes) */ @@ -295,6 +303,7 @@ TreeNode.propTypes = { renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), /** + * **Note:** this is controlled by the parent TreeView component, do not set manually. * Array containing all selected node IDs in the tree */ selected: PropTypes.arrayOf( diff --git a/packages/react/src/components/TreeView/TreeView.js b/packages/react/src/components/TreeView/TreeView.js index 6ddfdc9aaa5c..d49f167fd8da 100644 --- a/packages/react/src/components/TreeView/TreeView.js +++ b/packages/react/src/components/TreeView/TreeView.js @@ -223,7 +223,7 @@ export default function TreeView({ TreeView.propTypes = { /** - * Mark the active node in the tree, represented by its value + * Mark the active node in the tree, represented by its ID */ active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),