@carbon/react 1.87.1-rc.0 → 1.88.0

package/es/components/Notification/Notification.js

@@ -472,6 +472,7 @@ function ActionableNotification({
   ['aria-label']: ariaLabel,
   // @ts-expect-error: deprecated prop
   ariaLabel: deprecatedAriaLabel,
+  caption,
   children,
   role = 'alertdialog',
   onActionButtonClick,
@@ -586,7 +587,10 @@ function ActionableNotification({
     as: "div",
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
-  }, subtitle), children))), /*#__PURE__*/React.createElement("div", {
+  }, subtitle), caption && /*#__PURE__*/React.createElement(Text, {
+    as: "div",
+    className: `${prefix}--actionable-notification__caption`
+  }, caption), children))), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--actionable-notification__button-wrapper`,
     ref: innerModal
   }, actionButtonLabel && /*#__PURE__*/React.createElement(NotificationActionButton, {
@@ -617,6 +621,10 @@ ActionableNotification.propTypes = {
    * Provide a description for "close" icon button that can be read by screen readers
    */
   ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  /**
+   * Specify the caption
+   */
+  caption: PropTypes.string,
   /**
    * Specify the content
    */

package/es/components/NumberInput/NumberInput.d.ts

@@ -51,6 +51,10 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
      */
     formatOptions?: NumberFormatOptions;
+    /**
+     * Provide the value stepping should begin at when the input is empty
+     */
+    stepStartValue?: number;
     /**
      * Provide text that is used alongside the control label for additional help
      */

package/es/components/NumberInput/NumberInput.js

@@ -76,6 +76,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     defaultValue = type === 'number' ? 0 : NaN,
     warn = false,
     warnText = '',
+    stepStartValue = 0,
     value: controlledValue,
     ...rest
   } = props;
@@ -236,14 +237,14 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     if (inputRef.current) {
       const currentValue = type === 'number' ? Number(inputRef.current.value) : numberValue;
       let rawValue;
-      if (Number.isNaN(currentValue)) {
-        // When the field is empty (NaN), incrementing begins at min,
-        // decrementing begins at max.
-        // When there's no min or max to use, it begins at 0.
-        if (direction === `up` && min) {
+      if (Number.isNaN(currentValue) || !currentValue) {
+        if (typeof stepStartValue === 'number' && stepStartValue) {
+          rawValue = stepStartValue;
+        } else if (min && min < 0 && max && max > 0 || !max && !min || max) {
+          if (direction === `up`) rawValue = 1;
+          if (direction === `down`) rawValue = -1;
+        } else if (min && min > 0 && max && max > 0 || min) {
           rawValue = min;
-        } else if (direction === `down` && max) {
-          rawValue = max;
         } else {
           rawValue = 0;
         }
@@ -532,6 +533,10 @@ NumberInput.propTypes = {
    * The minimum value.
    */
   min: PropTypes.number,
+  /**
+   * Provide the value stepping should begin at when the input is empty
+   */
+  stepStartValue: PropTypes.number,
   /**
    * Provide an optional handler that is called when the input or stepper
    * buttons are blurred.

package/es/components/OverflowMenu/next/index.d.ts

@@ -5,9 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ElementType } from 'react';
+import type { PopoverAlignment } from '../../Popover';
 interface OverflowMenuProps {
     /**
-     * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+     * **Experimental**: Will attempt to automatically align the floating element
+     * to avoid collisions with the viewport and being clipped by ancestor
+     * elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**
@@ -37,7 +41,7 @@ interface OverflowMenuProps {
     /**
      * Specify how the trigger tooltip should be aligned.
      */
-    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    tooltipAlignment?: PopoverAlignment;
     /**
      * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
      */

package/es/components/OverflowMenu/next/index.js

@@ -132,7 +132,10 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(function OverflowMenu({
 });
 OverflowMenu.propTypes = {
   /**
-   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   * **Experimental**: Will attempt to automatically align the floating element
+   * to avoid collisions with the viewport and being clipped by ancestor
+   * elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/es/components/Popover/index.d.ts

@@ -26,7 +26,10 @@ export interface PopoverBaseProps {
      */
     align?: PopoverAlignment;
     /**
-     * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+     * Will auto-align the popover on first render if it is not visible. This prop
+     * is currently experimental and is subject to future changes. Requires
+     * React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**

package/es/components/Popover/index.js

@@ -62,7 +62,14 @@ forwardRef) {
   // The `Popover` should close whenever it and its children loses focus
   useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-    if (!popover.current?.contains(relatedTarget)) {
+    if (!relatedTarget) {
+      return;
+    }
+    const isOutsideMainContainer = !popover.current?.contains(relatedTarget);
+    const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
+
+    // Only close if focus moved outside both containers
+    if (isOutsideMainContainer && isOutsideFloating) {
       onRequestClose?.();
     }
   });
@@ -291,7 +298,10 @@ Popover.propTypes = {
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover on first render if it is not visible. This prop
+   * is currently experimental and is subject to future changes. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/es/components/Switch/IconSwitch.d.ts

@@ -1,3 +1,45 @@
-export default IconSwitch;
-declare const IconSwitch: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 React from 'react';
+import { type IconButtonProps } from '../IconButton';
+import type { SwitchEventHandlersParams } from './Switch';
+interface IconSwitchProps extends Omit<IconButtonProps, 'onClick' | 'onKeyDown' | 'label' | 'name'> {
+    /**
+     * The index of the `IconSwitch`.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    index?: number;
+    /**
+     * The name of the `IconSwitch`.
+     */
+    name?: string | number;
+    /**
+     * A handler that is invoked when a user clicks on the control.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    onClick?: (params: SwitchEventHandlersParams) => void;
+    /**
+     * A handler that is invoked on the key down event for the control.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    onKeyDown?: (params: SwitchEventHandlersParams) => void;
+    /**
+     * Whether the `IconSwitch` is selected.
+     *
+     * Reserved for usage in `ContentSwitcher`.
+     */
+    selected?: boolean;
+    /**
+     * `Tooltip` text.
+     */
+    text?: string;
+}
+declare const IconSwitch: React.ForwardRefExoticComponent<IconSwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconSwitch;

package/es/components/Switch/IconSwitch.js

@@ -7,13 +7,14 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import cx from 'classnames';
 import { IconButton } from '../IconButton/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { noopFn } from '../../internal/noopFn.js';
 
-const noopFn = () => {};
-const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef) {
+const frFn = forwardRef;
+const IconSwitch = frFn((props, ref) => {
   const {
     align,
     children,
@@ -32,8 +33,8 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
   } = props;
   const prefix = usePrefix();
   const [isHovered, setIsHovered] = useState(false);
-  const handleClick = e => {
-    e.preventDefault();
+  const handleClick = event => {
+    event.preventDefault();
     onClick({
       index,
       name,
@@ -41,6 +42,7 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     });
   };
   const handleKeyDown = event => {
+    // TODO: `which` was deprecated years ago. When can its usage be deleted?
     const key = event.key || event.which;
     onKeyDown({
       index,
@@ -62,20 +64,10 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     [`${prefix}--content-switcher-popover--selected`]: selected,
     [`${prefix}--content-switcher-popover--disabled`]: disabled
   });
-  const commonProps = {
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    className: classes,
-    disabled,
-    align,
-    enterDelayMs,
-    leaveDelayMs,
-    size
-  };
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     label: text,
     type: "button",
-    ref: tabRef,
+    ref: ref,
     role: "tab",
     tabIndex: selected || isHovered ? 0 : -1,
     onMouseEnter: handleMouseEnter,
@@ -85,7 +77,16 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     "aria-selected": selected,
     "aria-label": text,
     wrapperClasses: iconButtonClasses
-  }, other, commonProps), children);
+  }, other, {
+    align: align,
+    className: classes,
+    disabled: disabled,
+    enterDelayMs: enterDelayMs,
+    leaveDelayMs: leaveDelayMs,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    size: size
+  }), children);
 });
 IconSwitch.displayName = 'IconSwitch';
 IconSwitch.propTypes = {
@@ -94,15 +95,15 @@ IconSwitch.propTypes = {
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
-   * Provide child elements to be rendered inside of the Switch
+   * Children to be rendered inside of the `IconSwitch`.
    */
   children: PropTypes.node,
   /**
-   * Specify an optional className to be added to your Switch
+   * Specify an optional className to be added to your `IconSwitch`.
    */
   className: PropTypes.string,
   /**
-   * Specify whether or not the Switch should be disabled
+   * Whether the `IconSwitch` should be disabled.
    */
   disabled: PropTypes.bool,
   /**
@@ -110,8 +111,9 @@ IconSwitch.propTypes = {
    */
   enterDelayMs: PropTypes.number,
   /**
-   * The index of your Switch in your ContentSwitcher that is used for event handlers.
-   * Reserved for usage in ContentSwitcher
+   * The index of the `IconSwitch`.
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   index: PropTypes.number,
   /**
@@ -119,29 +121,34 @@ IconSwitch.propTypes = {
    */
   leaveDelayMs: PropTypes.number,
   /**
-   * Provide the name of your Switch that is used for event handlers
+   * The name of the `IconSwitch`.
    */
   name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * A handler that is invoked when a user clicks on the control.
-   * Reserved for usage in ContentSwitcher
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   onClick: PropTypes.func,
   /**
    * A handler that is invoked on the key down event for the control.
-   * Reserved for usage in ContentSwitcher
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   onKeyDown: PropTypes.func,
   /**
-   * Whether your Switch is selected. Reserved for usage in ContentSwitcher
+   * Whether the `IconSwitch` is selected.
+   *
+   * Reserved for usage in `ContentSwitcher`.
    */
   selected: PropTypes.bool,
+  // TODO: Icon only variant of what? Isn't the `IconSwitch` always icon only?
   /**
    * Passed in from `ContentSwitcher` to render icon-only variant
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide the visible text displayed by the Tooltip
+   * `Tooltip` text.
    */
   text: PropTypes.string
 };

package/es/components/Switch/Switch.js

@@ -35,6 +35,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef) {
     });
   };
   const handleKeyDown = event => {
+    // TODO: `which` was deprecated years ago. When can its usage be deleted?
     const key = event.key || event.which;
     onKeyDown?.({
       index,

package/es/components/Toggletip/index.d.ts

@@ -67,7 +67,10 @@ export declare namespace Toggletip {
          */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         /**
-         * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+         * Will auto-align the popover on first render if it is not visible. This prop
+         * is currently experimental and is subject to future changes. Requires
+         * React v17+
+         * @see https://github.com/carbon-design-system/carbon/issues/18714
          */
         autoAlign: PropTypes.Requireable<boolean>;
         /**

package/es/components/Toggletip/index.js

@@ -185,7 +185,10 @@ Toggletip.propTypes = {
    */
   as: PropTypes.elementType,
   /**
-   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover on first render if it is not visible. This prop
+   * is currently experimental and is subject to future changes. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/es/components/Tooltip/DefinitionTooltip.d.ts

@@ -12,13 +12,15 @@ export interface DefinitionTooltipProps extends Omit<React.ButtonHTMLAttributes<
      */
     align?: PopoverAlignment;
     /**
-     * Will auto-align Definition Tooltip. This prop is currently experimental and is subject to future changes.
+     * Will auto-align Definition Tooltip. This prop is currently experimental
+     * and is subject to future changes. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**
      * The `children` prop will be used as the value that is being defined
      */
-    children?: React.ReactNode;
+    children: React.ReactNode;
     /**
      * Specify an optional className to be applied to the container node
      */

package/es/components/Tooltip/DefinitionTooltip.js

@@ -101,7 +101,9 @@ DefinitionTooltip.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
-   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover. This prop is currently experimental and is
+   * subject to future changes. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/es/components/Tooltip/Tooltip.d.ts

@@ -54,9 +54,6 @@ interface TooltipBaseProps {
     /**
      * Provide the label to be rendered inside of the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
-     * If the child already has an `aria-label`, the tooltip will not apply
-     * `aria-labelledby`. If the child has its own `aria-labelledby`, that value
-     * will be kept. Otherwise, the tooltip will use its own ID to label the child.
      * This means that if you have text in the child node, that it will not be
      * announced to the screen reader.
      *

package/es/components/Tooltip/Tooltip.js

@@ -46,20 +46,12 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix();
   const child = React.Children.only(children);
   const {
-    'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy
   } = child?.props ?? {};
   const hasLabel = !!label;
-  const hasAriaLabel = typeof ariaLabel === 'string' ? ariaLabel.trim() !== '' : false;
-
-  // An `aria-label` takes precedence over `aria-describedby`, but when it's
-  // needed and the user doesn't specify one, the fallback `id` is used.
-  const labelledBy = hasAriaLabel ? undefined : hasLabel ? ariaLabelledBy ?? id : undefined;
-
-  // If `aria-label` is present, use any provided `aria-describedby`.
-  // If not, fallback to child's `aria-describedby` or the tooltip `id` if needed.
-  const describedBy = hasAriaLabel ? ariaDescribedBy : ariaDescribedBy ?? (!hasLabel && !ariaLabelledBy ? id : undefined);
+  const labelledBy = ariaLabelledBy ?? (hasLabel ? id : undefined);
+  const describedBy = ariaDescribedBy ?? (!hasLabel ? id : undefined);
   const triggerProps = {
     onFocus: () => !focusByMouse && setOpen(true),
     onBlur: () => {

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.
      */
@@ -86,7 +88,8 @@ export type TreeNodeProps = {
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by
-     * ancestor elements.
+     * ancestor elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, 'onSelect'>;
@@ -137,15 +140,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.
      */
@@ -171,7 +174,8 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by
-     * ancestor elements.
+     * ancestor elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, "onSelect"> & React.RefAttributes<HTMLElement>>;

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);
@@ -497,7 +490,8 @@ TreeNode.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool
 };

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
+          });
+        }
       }
     }
   }