fix(treeview): revert breaking API change in controlled mode (#19978)

Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>

Author: janhassel

packages/react/src/components/TreeView/TreeContext.ts

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { createContext, type SyntheticEvent, type MouseEvent } from 'react';
+import { createContext } from 'react';
 import type { TreeNodeProps } from './TreeNode';
 
 interface TreeContextProps {
   active?: string | number;
   multiselect?: boolean;
   onActivate?: (nodeId?: string | number) => void;
-  onTreeSelect?: (event: MouseEvent, node?: Partial<TreeNodeProps>) => void;
+  onTreeSelect?: TreeNodeProps['onTreeSelect'];
   selected?: Array<string | number>;
   size?: 'xs' | 'sm';
 }

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

@@ -28,6 +28,13 @@ import { useFeatureFlag } from '../FeatureFlags';
 import { IconButton } from '../IconButton';
 import { TreeContext, DepthContext } from './TreeContext';
 
+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.
@@ -76,20 +83,20 @@ export type TreeNodeProps = {
    * Callback function for when the node is selected
    */
   onSelect?: (
-    event: React.MouseEvent,
-    node?: Omit<TreeNodeProps, 'children'>
+    event: React.MouseEvent | React.KeyboardEvent,
+    node: Pick<TreeNodeProps, 'id' | 'label' | 'value'>
   ) => void;
   /**
    * Callback function for when a parent node is expanded or collapsed
    */
-  onToggle?: (
-    event: React.MouseEvent | React.KeyboardEvent,
-    node?: Omit<TreeNodeProps, 'children'>
-  ) => void;
+  onToggle?: UncontrolledOnToggle | ControlledOnToggle;
   /**
    * Callback function for when any node in the tree is selected
    */
-  onTreeSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+  onTreeSelect?: (
+    event: React.MouseEvent | React.KeyboardEvent,
+    node: Pick<TreeNodeProps, 'id' | 'label' | 'value'>
+  ) => void;
   /**
    * A component used to render an icon.
    */
@@ -274,14 +281,7 @@ const TreeNode = React.forwardRef<HTMLElement, TreeNodeProps>(
 
     const controllableExpandedState = useControllableState({
       value: isExpanded,
-      onChange: (newValue: boolean) => {
-        onToggle?.(undefined as unknown as MouseEvent, {
-          id,
-          isExpanded: newValue,
-          label,
-          value,
-        });
-      },
+      onChange: onToggle as ControlledOnToggle,
       defaultValue: defaultIsExpanded ?? false,
     });
     const uncontrollableExpandedState = useState(isExpanded ?? false);
@@ -360,7 +360,12 @@ const TreeNode = React.forwardRef<HTMLElement, TreeNodeProps>(
       }
 
       if (!enableTreeviewControllable) {
-        onToggle?.(event, { id, isExpanded: !expanded, label, value });
+        (onToggle as UncontrolledOnToggle)?.(event, {
+          id,
+          isExpanded: !expanded,
+          label,
+          value,
+        });
       }
       setExpanded(!expanded);
     }
@@ -406,7 +411,12 @@ const TreeNode = React.forwardRef<HTMLElement, TreeNodeProps>(
 
         if (children && expanded) {
           if (!enableTreeviewControllable) {
-            onToggle?.(event, { id, isExpanded: false, label, value });
+            (onToggle as UncontrolledOnToggle)?.(event, {
+              id,
+              isExpanded: false,
+              label,
+              value,
+            });
           }
           setExpanded(false);
         } else {
@@ -438,7 +448,12 @@ const TreeNode = React.forwardRef<HTMLElement, TreeNodeProps>(
           )?.focus();
         } else {
           if (!enableTreeviewControllable) {
-            onToggle?.(event, { id, isExpanded: true, label, value });
+            (onToggle as UncontrolledOnToggle)?.(event, {
+              id,
+              isExpanded: true,
+              label,
+              value,
+            });
           }
           setExpanded(true);
         }
@@ -449,7 +464,12 @@ const TreeNode = React.forwardRef<HTMLElement, TreeNodeProps>(
         if (match(event, keys.Enter) && children) {
           // Toggle expansion state for parent nodes
           if (!enableTreeviewControllable) {
-            onToggle?.(event, { id, isExpanded: !expanded, label, value });
+            (onToggle as UncontrolledOnToggle)?.(event, {
+              id,
+              isExpanded: !expanded,
+              label,
+              value,
+            });
           }
           setExpanded(!expanded);
         }

packages/react/src/components/TreeView/TreeView.tsx

@@ -7,22 +7,24 @@
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  useMemo,
-  type JSX,
-  type SyntheticEvent,
-} from 'react';
+import React, { useEffect, useRef, useState, useMemo, type JSX } from 'react';
 import { keys, match, matches } from '../../internal/keyboard';
 import { useControllableState } from '../../internal/useControllableState';
 import { usePrefix } from '../../internal/usePrefix';
 import { useId } from '../../internal/useId';
 import { useFeatureFlag } from '../FeatureFlags';
-import TreeNode, { TreeNodeProps } from './TreeNode';
+import TreeNode, { type TreeNodeProps } from './TreeNode';
 import { TreeContext, DepthContext } from './TreeContext';
 
+type UncontrolledOnSelect = (
+  event: React.MouseEvent | React.KeyboardEvent,
+  payload: Parameters<NonNullable<TreeNodeProps['onSelect']>>[1] & {
+    activeNodeId?: TreeViewProps['active'];
+  }
+) => void;
+
+type ControlledOnSelect = (selected: TreeViewProps['selected']) => void;
+
 export type TreeViewProps = {
   /**
    * Mark the active node in the tree, represented by its ID
@@ -53,16 +55,11 @@ export type TreeViewProps = {
    * **[Experimental]** Callback function that is called when any node is activated.
    * *This is only supported with the `enable-treeview-controllable` feature flag!*
    */
-  onActivate?: (activated?: string | number) => void;
+  onActivate?: (active: TreeViewProps['active']) => void;
   /**
    * Callback function that is called when any node is selected
    */
-  onSelect?: (
-    event: React.SyntheticEvent<HTMLUListElement>,
-    payload?: Partial<TreeNodeProps> & {
-      activeNodeId?: string | number;
-    }
-  ) => void;
+  onSelect?: UncontrolledOnSelect | ControlledOnSelect;
   /**
    * Array representing all selected node IDs in the tree
    */
@@ -108,11 +105,7 @@ const TreeView: TreeViewComponent = ({
 
   const controllableSelectionState = useControllableState({
     value: preselected,
-    onChange: (newSelected) => {
-      onSelect?.(undefined as unknown as SyntheticEvent<HTMLUListElement>, {
-        activeNodeId: newSelected[0],
-      });
-    },
+    onChange: onSelect as ControlledOnSelect,
     defaultValue: [],
   });
   const uncontrollableSelectionState = useState(preselected ?? []);
@@ -139,24 +132,32 @@ const TreeView: TreeViewComponent = ({
     );
   }
 
-  function handleTreeSelect(event, node = {}) {
-    const nodeId = (node as any).id;
-    if (multiselect && (event.metaKey || event.ctrlKey)) {
-      if (!selected.includes(nodeId)) {
-        setSelected(selected.concat(nodeId));
-      } else {
-        setSelected(selected.filter((selectedId) => selectedId !== nodeId));
-      }
-
-      if (!enableTreeviewControllable) {
-        onSelect?.(event, node);
-      }
-    } else {
-      setSelected([nodeId]);
-      setActive(nodeId);
+  function handleTreeSelect(
+    event,
+    node: Parameters<NonNullable<TreeNodeProps['onTreeSelect']>>[1]
+  ) {
+    const nodeId = node.id;
+    if (nodeId) {
+      if (multiselect && (event.metaKey || event.ctrlKey)) {
+        if (!selected.includes(nodeId)) {
+          setSelected(selected.concat(nodeId));
+        } else {
+          setSelected(selected.filter((selectedId) => selectedId !== nodeId));
+        }
 
-      if (!enableTreeviewControllable) {
-        onSelect?.(event, { activeNodeId: nodeId, ...node });
+        if (!enableTreeviewControllable) {
+          (onSelect as UncontrolledOnSelect)?.(event, node);
+        }
+      } else {
+        setSelected([nodeId]);
+        setActive(nodeId);
+
+        if (!enableTreeviewControllable) {
+          (onSelect as UncontrolledOnSelect)?.(event, {
+            activeNodeId: nodeId,
+            ...node,
+          });
+        }
       }
     }
   }