@carbon/react 1.87.1-rc.0 → 1.88.0

package/lib/components/Notification/Notification.d.ts

@@ -367,6 +367,10 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      * Provide a description for "close" icon button that can be read by screen readers
      */
     'aria-label'?: string;
+    /**
+     * Specify the caption
+     */
+    caption?: string;
     /**
      * Specify the content
      */
@@ -430,7 +434,7 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      */
     title?: string;
 }
-export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, caption, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ActionableNotification {
     var propTypes: {
         /**
@@ -446,6 +450,10 @@ export declare namespace ActionableNotification {
          * Provide a description for "close" icon button that can be read by screen readers
          */
         ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+        /**
+         * Specify the caption
+         */
+        caption: PropTypes.Requireable<string>;
         /**
          * Specify the content
          */

package/lib/components/Notification/Notification.js

@@ -474,6 +474,7 @@ function ActionableNotification({
   ['aria-label']: ariaLabel,
   // @ts-expect-error: deprecated prop
   ariaLabel: deprecatedAriaLabel,
+  caption,
   children,
   role = 'alertdialog',
   onActionButtonClick,
@@ -588,7 +589,10 @@ function ActionableNotification({
     as: "div",
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
-  }, subtitle), children))), /*#__PURE__*/React.createElement("div", {
+  }, subtitle), caption && /*#__PURE__*/React.createElement(Text.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, {
@@ -619,6 +623,10 @@ ActionableNotification.propTypes = {
    * Provide a description for "close" icon button that can be read by screen readers
    */
   ariaLabel: deprecate.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/lib/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/lib/components/NumberInput/NumberInput.js

@@ -78,6 +78,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     defaultValue = type === 'number' ? 0 : NaN,
     warn = false,
     warnText = '',
+    stepStartValue = 0,
     value: controlledValue,
     ...rest
   } = props;
@@ -238,14 +239,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;
         }
@@ -534,6 +535,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/lib/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/lib/components/OverflowMenu/next/index.js

@@ -134,7 +134,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/lib/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/lib/components/Popover/index.js

@@ -64,7 +64,14 @@ forwardRef) {
   // The `Popover` should close whenever it and its children loses focus
   useEvent.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?.();
     }
   });
@@ -293,7 +300,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/lib/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/lib/components/Switch/IconSwitch.js

@@ -15,9 +15,10 @@ var React = require('react');
 var cx = require('classnames');
 var index = require('../IconButton/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var noopFn = require('../../internal/noopFn.js');
 
-const noopFn = () => {};
-const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef) {
+const frFn = React.forwardRef;
+const IconSwitch = frFn((props, ref) => {
   const {
     align,
     children,
@@ -27,8 +28,8 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
     index: index$1,
     leaveDelayMs = 0,
     name,
-    onClick = noopFn,
-    onKeyDown = noopFn,
+    onClick = noopFn.noopFn,
+    onKeyDown = noopFn.noopFn,
     selected = false,
     size,
     text,
@@ -36,8 +37,8 @@ const IconSwitch = /*#__PURE__*/React.forwardRef(function Switch(props, tabRef)
   } = props;
   const prefix = usePrefix.usePrefix();
   const [isHovered, setIsHovered] = React.useState(false);
-  const handleClick = e => {
-    e.preventDefault();
+  const handleClick = event => {
+    event.preventDefault();
     onClick({
       index: index$1,
       name,
@@ -45,6 +46,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: index$1,
@@ -66,20 +68,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(index.IconButton, _rollupPluginBabelHelpers.extends({
     label: text,
     type: "button",
-    ref: tabRef,
+    ref: ref,
     role: "tab",
     tabIndex: selected || isHovered ? 0 : -1,
     onMouseEnter: handleMouseEnter,
@@ -89,7 +81,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 = {
@@ -98,15 +99,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,
   /**
@@ -114,8 +115,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,
   /**
@@ -123,29 +125,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/lib/components/Switch/Switch.js

@@ -39,6 +39,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/lib/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/lib/components/Toggletip/index.js

@@ -187,7 +187,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/lib/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/lib/components/Tooltip/DefinitionTooltip.js

@@ -103,7 +103,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/lib/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/lib/components/Tooltip/Tooltip.js

@@ -48,20 +48,12 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   const prefix = usePrefix.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/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.
      */
@@ -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/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);
@@ -501,7 +494,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/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
      */