fix(TreeView): make onToggle call optional in keydown handler (#11274)

* fix(TreeView): use `.cds` prefix in story styles

* fix(TreeNode): make `onToggle` call optional

* refactor(TreeView): use optional chaining

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/TreeView/TreeNode.js

@@ -61,23 +61,15 @@ export default function TreeNode({
     [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded,
   });
   function handleToggleClick(event) {
-    if (onToggle) {
-      onToggle(event, { id, isExpanded: !expanded, label, value });
-    }
+    onToggle?.(event, { id, isExpanded: !expanded, label, value });
     setExpanded(!expanded);
   }
   function handleClick(event) {
     event.stopPropagation();
     if (!disabled) {
-      if (onTreeSelect) {
-        onTreeSelect(event, { id, label, value });
-      }
-      if (onNodeSelect) {
-        onNodeSelect(event, { id, label, value });
-      }
-      if (rest.onClick) {
-        rest.onClick(event);
-      }
+      onTreeSelect?.(event, { id, label, value });
+      onNodeSelect?.(event, { id, label, value });
+      rest?.onClick?.(event);
     }
   }
   function handleKeyDown(event) {
@@ -95,7 +87,7 @@ export default function TreeNode({
         return findParentTreeNode(node.parentNode);
       };
       if (children && expanded) {
-        onToggle(event, { id, isExpanded: false, label, value });
+        onToggle?.(event, { id, isExpanded: false, label, value });
         setExpanded(false);
       } else {
         /**
@@ -113,26 +105,24 @@ export default function TreeNode({
          */
         currentNode.current.lastChild.firstChild.focus();
       } else {
-        onToggle(event, { id, isExpanded: true, label, value });
+        onToggle?.(event, { id, isExpanded: true, label, value });
         setExpanded(true);
       }
     }
     if (matches(event, [keys.Enter, keys.Space])) {
       event.preventDefault();
       handleClick(event);
     }
-    if (rest.onKeyDown) {
-      rest.onKeyDown(event);
-    }
+    rest?.onKeyDown?.(event);
   }
   function handleFocusEvent(event) {
-    if (event.type === 'blur' && rest.onBlur) {
-      rest.onBlur(event);
+    if (event.type === 'blur') {
+      rest?.onBlur?.(event);
     }
-    if (event.type === 'focus' && rest.onFocus) {
-      rest.onFocus(event);
+    if (event.type === 'focus') {
+      rest?.onFocus?.(event);
     }
-    onNodeFocusEvent && onNodeFocusEvent(event);
+    onNodeFocusEvent?.(event);
   }
 
   useEffect(() => {

packages/react/src/components/TreeView/TreeView.js

@@ -54,9 +54,7 @@ export default function TreeView({
       setSelected([nodeId]);
       setActive(nodeId);
     }
-    if (onSelect) {
-      onSelect(event, node);
-    }
+    onSelect?.(event, node);
   }
   function handleFocusEvent(event) {
     if (event.type === 'blur') {
@@ -117,9 +115,7 @@ export default function TreeView({
       nextFocusNode.tabIndex = 0;
       nextFocusNode.focus();
     }
-    if (rest.onKeyDown) {
-      rest.onKeyDown(event);
-    }
+    rest?.onKeyDown?.(event);
   }
 
   useEffect(() => {

packages/react/src/components/TreeView/next/story.scss

@@ -5,6 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-.bx--tree {
+.cds--tree {
   width: 16rem;
 }