@carbon/react 1.87.0 → 1.87.1

package/es/components/TreeView/TreeContext.d.ts

@@ -4,13 +4,12 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { type MouseEvent } 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';
 }

package/es/components/TreeView/TreeNode.d.ts

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
+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.
@@ -52,15 +54,15 @@ export type TreeNodeProps = {
     /**
      * Callback function for when the node is selected
      */
-    onSelect?: (event: React.MouseEvent, node?: Omit<TreeNodeProps, 'children'>) => void;
+    onSelect?: (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.
      */
@@ -137,15 +139,15 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * Callback function for when the node is selected
      */
-    onSelect?: (event: React.MouseEvent, node?: Omit<TreeNodeProps, "children">) => void;
+    onSelect?: (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.
      */

package/es/components/TreeView/TreeNode.js

@@ -130,14 +130,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   } = useRef(nodeId || useId());
   const controllableExpandedState = useControllableState({
     value: isExpanded,
-    onChange: newValue => {
-      onToggle?.(undefined, {
-        id,
-        isExpanded: newValue,
-        label,
-        value
-      });
-    },
+    onChange: onToggle,
     defaultValue: defaultIsExpanded ?? false
   });
   const uncontrollableExpandedState = useState(isExpanded ?? false);

package/es/components/TreeView/TreeView.d.ts

@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type JSX } from 'react';
-import TreeNode, { TreeNodeProps } from './TreeNode';
+import TreeNode, { type TreeNodeProps } from './TreeNode';
+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
@@ -36,13 +40,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
      */

package/es/components/TreeView/TreeView.js

@@ -45,11 +45,7 @@ const TreeView = ({
   const treeWalker = useRef(null);
   const controllableSelectionState = useControllableState({
     value: preselected,
-    onChange: newSelected => {
-      onSelect?.(undefined, {
-        activeNodeId: newSelected[0]
-      });
-    },
+    onChange: onSelect,
     defaultValue: []
   });
   const uncontrollableSelectionState = useState(preselected ?? []);
@@ -66,25 +62,27 @@ const TreeView = ({
       item.tabIndex = -1;
     });
   }
-  function handleTreeSelect(event, node = {}) {
+  function handleTreeSelect(event, node) {
     const nodeId = node.id;
-    if (multiselect && (event.metaKey || event.ctrlKey)) {
-      if (!selected.includes(nodeId)) {
-        setSelected(selected.concat(nodeId));
+    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, node);
+        }
       } else {
-        setSelected(selected.filter(selectedId => selectedId !== nodeId));
-      }
-      if (!enableTreeviewControllable) {
-        onSelect?.(event, node);
-      }
-    } else {
-      setSelected([nodeId]);
-      setActive(nodeId);
-      if (!enableTreeviewControllable) {
-        onSelect?.(event, {
-          activeNodeId: nodeId,
-          ...node
-        });
+        setSelected([nodeId]);
+        setActive(nodeId);
+        if (!enableTreeviewControllable) {
+          onSelect?.(event, {
+            activeNodeId: nodeId,
+            ...node
+          });
+        }
       }
     }
   }

package/lib/components/TreeView/TreeContext.d.ts

@@ -4,13 +4,12 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { type MouseEvent } 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';
 }

package/lib/components/TreeView/TreeNode.d.ts

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
+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.
@@ -52,15 +54,15 @@ export type TreeNodeProps = {
     /**
      * Callback function for when the node is selected
      */
-    onSelect?: (event: React.MouseEvent, node?: Omit<TreeNodeProps, 'children'>) => void;
+    onSelect?: (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.
      */
@@ -137,15 +139,15 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * Callback function for when the node is selected
      */
-    onSelect?: (event: React.MouseEvent, node?: Omit<TreeNodeProps, "children">) => void;
+    onSelect?: (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.
      */

package/lib/components/TreeView/TreeNode.js

@@ -134,14 +134,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   } = React.useRef(nodeId || useId.useId());
   const controllableExpandedState = useControllableState.useControllableState({
     value: isExpanded,
-    onChange: newValue => {
-      onToggle?.(undefined, {
-        id,
-        isExpanded: newValue,
-        label,
-        value
-      });
-    },
+    onChange: onToggle,
     defaultValue: defaultIsExpanded ?? false
   });
   const uncontrollableExpandedState = React.useState(isExpanded ?? false);

package/lib/components/TreeView/TreeView.d.ts

@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type JSX } from 'react';
-import TreeNode, { TreeNodeProps } from './TreeNode';
+import TreeNode, { type TreeNodeProps } from './TreeNode';
+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
@@ -36,13 +40,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
      */

package/lib/components/TreeView/TreeView.js

@@ -49,11 +49,7 @@ const TreeView = ({
   const treeWalker = React.useRef(null);
   const controllableSelectionState = useControllableState.useControllableState({
     value: preselected,
-    onChange: newSelected => {
-      onSelect?.(undefined, {
-        activeNodeId: newSelected[0]
-      });
-    },
+    onChange: onSelect,
     defaultValue: []
   });
   const uncontrollableSelectionState = React.useState(preselected ?? []);
@@ -70,25 +66,27 @@ const TreeView = ({
       item.tabIndex = -1;
     });
   }
-  function handleTreeSelect(event, node = {}) {
+  function handleTreeSelect(event, node) {
     const nodeId = node.id;
-    if (multiselect && (event.metaKey || event.ctrlKey)) {
-      if (!selected.includes(nodeId)) {
-        setSelected(selected.concat(nodeId));
+    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, node);
+        }
       } else {
-        setSelected(selected.filter(selectedId => selectedId !== nodeId));
-      }
-      if (!enableTreeviewControllable) {
-        onSelect?.(event, node);
-      }
-    } else {
-      setSelected([nodeId]);
-      setActive(nodeId);
-      if (!enableTreeviewControllable) {
-        onSelect?.(event, {
-          activeNodeId: nodeId,
-          ...node
-        });
+        setSelected([nodeId]);
+        setActive(nodeId);
+        if (!enableTreeviewControllable) {
+          onSelect?.(event, {
+            activeNodeId: nodeId,
+            ...node
+          });
+        }
       }
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.87.0",
+  "version": "1.87.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "^0.28.0",
+    "@carbon/feature-flags": "^0.28.1",
     "@carbon/icons-react": "^11.63.0",
     "@carbon/layout": "^11.37.0",
-    "@carbon/styles": "^1.86.0",
+    "@carbon/styles": "^1.86.1",
     "@carbon/utilities": "^0.7.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "cb7123ed19a2c216e5b9774e58c12af68407abd3"
+  "gitHead": "f420c48d3859804a62811e6420d940f2e2602219"
 }