docs(treeview): clarify state props documentation (#15437)

* docs(treenode): clarify props.active and props.selected * docs(treenode): document props.id * test(treenode): update api snapshot
carbon-design-system · Jan 15, 2024 · f9adf14 · f9adf14
1 parent 16459b7
commit f9adf14
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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]),