fix(tree): allow prop to decide about the state

carbon-design-system · Sep 8, 2020 · b6602b6 · b6602b6
1 parent 9b67c85
commit b6602b6
Showing 1 changed file with 12 additions and 7 deletions.
diff --git a/packages/react/src/components/TreeView/TreeNode.js b/packages/react/src/components/TreeView/TreeNode.js
@@ -59,7 +59,8 @@ export default function TreeNode({
     [`${prefix}--tree-parent-node`]: children,
   });
   const toggleClasses = classNames(`${prefix}--tree-parent-node__toggle-icon`, {
-    [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded,
+    [`${prefix}--tree-parent-node__toggle-icon--expanded`]:
+      isExpanded === undefined ? expanded : isExpanded,
   });
   function handleToggleClick(event) {
     if (onToggle) {
@@ -194,7 +195,9 @@ export default function TreeNode({
     );
   }
   return (
-    <li {...treeNodeProps} aria-expanded={!!expanded}>
+    <li
+      {...treeNodeProps}
+      aria-expanded={isExpanded === undefined ? !!expanded : isExpanded}>
       <div className={`${prefix}--tree-node__label`} ref={currentNodeLabel}>
         {/* https://github.com/carbon-design-system/carbon/pull/6008#issuecomment-675738670 */}
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
@@ -209,11 +212,13 @@ export default function TreeNode({
           {label}
         </span>
       </div>
-      {expanded && (
-        <ul role="group" className={`${prefix}--tree-node__children`}>
-          {nodesWithProps}
-        </ul>
-      )}
+      {isExpanded === undefined
+        ? expanded
+        : isExpanded && (
+            <ul role="group" className={`${prefix}--tree-node__children`}>
+              {nodesWithProps}
+            </ul>
+          )}
     </li>
   );
 }