@carbon/react 1.87.1 → 1.89.0-rc.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,
   /**
@@ -353,29 +363,12 @@ function PopoverContentRenderFunction(
     caretRef,
     autoAlign
   } = React.useContext(PopoverContext);
-  const textRef = React.useRef(null);
-  const [isMultiLine, setIsMultiLine] = React.useState(false);
-  const ref = useMergedRefs.useMergedRefs([setFloating, textRef, forwardRef]);
+  const ref = useMergedRefs.useMergedRefs([setFloating, forwardRef]);
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
-  React.useEffect(() => {
-    checkIfMultiLine();
-  }, [children]);
-  const checkIfMultiLine = () => {
-    const el = textRef.current;
-    if (el) {
-      const style = getComputedStyle(el);
-      const lineHeight = parseFloat(style.lineHeight);
-      const height = el.offsetHeight;
-      const lines = Math.floor(height / lineHeight);
-      setIsMultiLine(lines > 1);
-    }
-  };
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
     className: `${prefix}--popover`
   }), /*#__PURE__*/React.createElement("span", {
-    className: cx(`${prefix}--popover-content`, className, {
-      [`${prefix}--tooltip-content--multiline`]: isMultiLine
-    }),
+    className: cx(`${prefix}--popover-content`, className),
     ref: ref
   }, children, enableFloatingStyles && /*#__PURE__*/React.createElement("span", {
     className: cx({

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/TextArea/TextArea.js

@@ -63,7 +63,11 @@ const TextArea = frFn((props, forwardRef) => {
     value
   } = other;
   const textAreaInstanceId = useId.useId();
+  const wrapperRef = React.useRef(null);
   const textareaRef = React.useRef(null);
+  const helperTextRef = React.useRef(null);
+  const errorTextRef = React.useRef(null);
+  const warnTextRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
   function getInitialTextCount() {
     const targetValue = defaultValue || value || textareaRef.current?.value || '';
@@ -80,13 +84,20 @@ const TextArea = frFn((props, forwardRef) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, defaultValue, counterMode]);
   useIsomorphicEffect.default(() => {
+    const measuredWidth = wrapperRef.current?.scrollWidth;
     if (other.cols && textareaRef.current) {
       textareaRef.current.style.width = '';
       textareaRef.current.style.resize = 'none';
     } else if (textareaRef.current) {
       textareaRef.current.style.width = `100%`;
     }
-  }, [other.cols]);
+    [helperTextRef, errorTextRef, warnTextRef].forEach(r => {
+      if (r.current) {
+        r.current.style.maxWidth = `${measuredWidth}px`;
+        r.current.style.overflowWrap = 'break-word';
+      }
+    });
+  }, [other.cols, invalid, warn]);
   const textareaProps = {
     id,
     onKeyDown: evt => {
@@ -194,21 +205,26 @@ const TextArea = frFn((props, forwardRef) => {
   const helper = helperText ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     id: helperId,
-    className: helperTextClasses
+    className: helperTextClasses,
+    ref: helperTextRef
   }, helperText) : null;
   const errorId = id + '-error-msg';
   const error = invalid ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     role: "alert",
     className: `${prefix}--form-requirement`,
-    id: errorId
+    id: errorId,
+    ref: errorTextRef
   }, invalidText, isFluid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
     className: `${prefix}--text-area__invalid-icon`
   })) : null;
+  const warnId = id + '-warn-msg';
   const warning = warn ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     role: "alert",
-    className: `${prefix}--form-requirement`
+    className: `${prefix}--form-requirement`,
+    id: warnId,
+    ref: warnTextRef
   }, warnText, isFluid && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
@@ -274,6 +290,7 @@ const TextArea = frFn((props, forwardRef) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
     className: textAreaWrapperClasses,
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {

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/TreeNode.d.ts

@@ -88,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'>;
@@ -173,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

@@ -494,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/UIShell/Header.d.ts

@@ -8,15 +8,15 @@ import React, { ReactNode } from 'react';
 export interface HeaderProps {
     children?: ReactNode;
     /**
-     * Required props for the accessibility label of the header
+     * Optionally provide aria-label
      */
     'aria-label'?: string;
     /**
-     * Required props for the accessibility label of the header
+     * Optionally provide aria-labelledby
      */
     'aria-labelledby'?: string;
     /**
-     * Optionally provide a custom class name that is applied to the underlying <header>
+     * Optionally provide a custom class name that is applied to the underlying header
      */
     className?: string;
 }