@carbon/react 1.93.0-rc.0 → 1.94.0-rc.0

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -64,8 +64,6 @@ function CodeSnippet({
   const codeContentRef = React.useRef(null);
   const codeContainerRef = React.useRef(null);
   const innerCodeRef = React.useRef(null);
-  const [hasLeftOverflow, setHasLeftOverflow] = React.useState(false);
-  const [hasRightOverflow, setHasRightOverflow] = React.useState(false);
   const getCodeRef = React.useCallback(() => {
     if (type === 'single') {
       return codeContainerRef;
@@ -77,39 +75,13 @@ function CodeSnippet({
     }
   }, [type]);
   const prefix = usePrefix.usePrefix();
-  const getCodeRefDimensions = React.useCallback(() => {
-    const {
-      clientWidth: codeClientWidth = 0,
-      scrollLeft: codeScrollLeft = 0,
-      scrollWidth: codeScrollWidth = 0
-    } = getCodeRef().current || {};
-    return {
-      horizontalOverflow: codeScrollWidth > codeClientWidth,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    };
-  }, [getCodeRef]);
-  const handleScroll = React.useCallback(() => {
-    if (type === 'inline' || type === 'single' && !codeContainerRef?.current || type === 'multi' && !codeContentRef?.current) {
-      return;
-    }
-    const {
-      horizontalOverflow,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    } = getCodeRefDimensions();
-    setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
-    setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
-  }, [type, getCodeRefDimensions]);
   useResizeObserver.useResizeObserver({
     ref: getCodeRef(),
     onResize: () => {
-      if (codeContentRef?.current && type === 'multi') {
+      if (innerCodeRef?.current && type === 'multi') {
         const {
           height
-        } = codeContentRef.current.getBoundingClientRect();
+        } = innerCodeRef.current.getBoundingClientRect();
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
         } else {
@@ -119,14 +91,8 @@ function CodeSnippet({
           setExpandedCode(false);
         }
       }
-      if (codeContentRef?.current && type === 'multi' || codeContainerRef?.current && type === 'single') {
-        handleScroll();
-      }
     }
   });
-  React.useEffect(() => {
-    handleScroll();
-  }, [handleScroll]);
   const handleCopyClick = evt => {
     if (copyText || innerCodeRef?.current) {
       copy(copyText ?? innerCodeRef?.current?.innerText ?? '');
@@ -141,8 +107,7 @@ function CodeSnippet({
     [`${prefix}--snippet--expand`]: expandedCode,
     [`${prefix}--snippet--light`]: light,
     [`${prefix}--snippet--no-copy`]: hideCopyButton,
-    [`${prefix}--snippet--wraptext`]: wrapText,
-    [`${prefix}--snippet--has-right-overflow`]: type == 'multi' && hasRightOverflow
+    [`${prefix}--snippet--wraptext`]: wrapText
   });
   const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
   if (type === 'inline') {
@@ -200,18 +165,12 @@ function CodeSnippet({
     className: `${prefix}--snippet-container`,
     "aria-label": deprecatedAriaLabel || ariaLabel || 'code-snippet',
     "aria-readonly": type === 'single' || type === 'multi' ? true : undefined,
-    "aria-multiline": type === 'multi' ? true : undefined,
-    onScroll: type === 'single' && handleScroll || undefined
-  }, containerStyle), /*#__PURE__*/React.createElement("pre", {
-    ref: codeContentRef,
-    onScroll: type === 'multi' && handleScroll || undefined
-  }, /*#__PURE__*/React.createElement("code", {
+    "aria-multiline": type === 'multi' ? true : undefined
+  }, containerStyle), /*#__PURE__*/React.createElement("pre", _rollupPluginBabelHelpers.extends({
+    ref: codeContentRef
+  }, containerStyle), /*#__PURE__*/React.createElement("code", {
     ref: innerCodeRef
-  }, children))), hasLeftOverflow && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--snippet__overflow-indicator--left`
-  }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--snippet__overflow-indicator--right`
-  }), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton.default, {
+  }, children))), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton.default, {
     align: align,
     autoAlign: autoAlign,
     size: type === 'multi' ? 'sm' : 'md',

package/lib/components/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/lib/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/lib/components/DataTable/DataTable.d.ts

@@ -92,6 +92,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         isExpanded: boolean;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        id: string;
     };
     getRowProps: (options: {
         onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -105,6 +106,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         key: string;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        expandHeader: string;
     };
     getExpandedRowProps: (options: {
         row: DataTableRow<ColTypes>;
@@ -234,7 +236,7 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
 export declare const DataTable: {
     <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
     Table: {
-        ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
+        ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
         propTypes: {
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;

package/lib/components/DataTable/DataTable.js

@@ -196,9 +196,10 @@ const DataTable = props => {
       ...rest,
       'aria-label': t(translationKey),
       // Provide a string of all expanded row IDs, separated by a space.
-      'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
+      'aria-controls': rowIds.map(id => `${getTablePrefix()}-expanded-row-${id}`).join(' '),
       isExpanded,
-      onExpand: events.composeEventHandlers(handlers)
+      onExpand: events.composeEventHandlers(handlers),
+      id: `${getTablePrefix()}-expand`
     };
   };
 
@@ -230,9 +231,10 @@ const DataTable = props => {
       onExpand: events.composeEventHandlers([handleOnExpandRow(row.id), onClick]),
       isExpanded: row.isExpanded,
       'aria-label': t(translationKey),
-      'aria-controls': `expanded-row-${row.id}`,
+      'aria-controls': `${getTablePrefix()}-expanded-row-${row.id}`,
       isSelected: row.isSelected,
-      disabled: row.disabled
+      disabled: row.disabled,
+      expandHeader: `${getTablePrefix()}-expand`
     };
   };
   const getExpandedRowProps = ({
@@ -241,7 +243,7 @@ const DataTable = props => {
   }) => {
     return {
       ...rest,
-      id: `expanded-row-${row.id}`
+      id: `${getTablePrefix()}-expanded-row-${row.id}`
     };
   };
 

package/lib/components/DataTable/Table.d.ts

@@ -39,7 +39,7 @@ export interface TableProps {
     tabIndex?: number;
 }
 export declare const Table: {
-    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the Table

package/lib/components/DataTable/Table.js

@@ -57,7 +57,6 @@ const Table = ({
   stickyHeader,
   overflowMenuOnHover = true,
   experimentalAutoAlign = false,
-  tabIndex,
   ...other
 }) => {
   const {
@@ -65,7 +64,6 @@ const Table = ({
     descriptionId
   } = React.useContext(TableContext.TableContext);
   const prefix = usePrefix.usePrefix();
-  const [isScrollable, setIsScrollable] = React.useState(false);
   const tableRef = React.useRef(null);
   const componentClass = cx(`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
@@ -104,22 +102,6 @@ const Table = ({
   const debouncedSetTableAlignment = debounce.debounce(setTableAlignment, 100);
   useEvent.useWindowEvent('resize', debouncedSetTableAlignment);
 
-  // Used to set a tabIndex when the Table is horizontally scrollable
-  const setTabIndex = React.useCallback(() => {
-    const tableContainer = tableRef?.current?.parentNode;
-    const tableHeader = tableRef?.current?.firstChild;
-    if (tableHeader?.scrollWidth > tableContainer?.clientWidth) {
-      setIsScrollable(true);
-    } else {
-      setIsScrollable(false);
-    }
-  }, []);
-  const debouncedSetTabIndex = debounce.debounce(setTabIndex, 100);
-  useEvent.useWindowEvent('resize', debouncedSetTabIndex);
-  useIsomorphicEffect.default(() => {
-    setTabIndex();
-  }, [setTabIndex]);
-
   // recalculate table alignment once fonts have loaded
   if (typeof document !== 'undefined' && document?.fonts?.status && document.fonts.status !== 'loaded') {
     document.fonts.ready.then(() => {
@@ -130,8 +112,7 @@ const Table = ({
     setTableAlignment();
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-content`,
-    tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
+    className: `${prefix}--data-table-content`
   }, /*#__PURE__*/React.createElement("table", _rollupPluginBabelHelpers.extends({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId

package/lib/components/DataTable/TableExpandRow.d.ts

@@ -33,6 +33,10 @@ export interface TableRowExpandInteropProps {
      * Specify if the row is selected.
      */
     isSelected?: boolean;
+    /**
+     * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+     */
+    expandHeader?: string;
 }
 export interface TableExpandRowProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick'>>, Omit<TableRowExpandInteropProps, 'aria-label' | 'onExpand'> {
     /**

package/lib/components/DataTable/TableRow.js

@@ -35,6 +35,8 @@ const TableRow = frFn((props, ref) => {
     isExpanded,
     // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isSelected,
+    expandHeader,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     ...cleanProps
   } = props;
   const prefix = usePrefix.usePrefix();

package/lib/components/DataTable/TableToolbar.js

@@ -29,6 +29,7 @@ const TableToolbar = ({
     [`${prefix}--table-toolbar--${size}`]: size
   });
   return /*#__PURE__*/React.createElement("section", _rollupPluginBabelHelpers.extends({
+    role: "group",
     "aria-label": deprecatedAriaLabel || ariaLabel
   }, rest, {
     className: className

package/lib/components/DataTable/state/sorting.d.ts

@@ -43,7 +43,8 @@ export declare const getNextSortDirection: (prevHeader: string, currentHeader: s
  * @param state - Current table state.
  * @param key - Header key to sort by.
  */
-export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
+export declare const getNextSortState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+props: Props, state: State<ColTypes>, { key }: {
     key: string;
 }) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
 /**
@@ -54,5 +55,6 @@ export declare const getNextSortState: <ColTypes extends any[]>(props: Props, st
  * @param key - Header key to sort by.
  * @param sortDirection - Sort direction to apply.
  */
-export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export declare const getSortedState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+{ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
 export {};

package/lib/components/DatePicker/DatePicker.d.ts

@@ -117,6 +117,14 @@ export interface DatePickerProps {
      * Provide the text that is displayed when the control is in warning state (Fluid only)
      */
     warnText?: ReactNode;
+    /**
+     * Accessible aria-label for the "next month" arrow icon.
+     */
+    nextMonthAriaLabel?: string;
+    /**
+     * Accessible aria-label for the "previous month" arrow icon.
+     */
+    prevMonthAriaLabel?: string;
 }
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/lib/components/DatePicker/DatePicker.js

@@ -109,12 +109,6 @@ const carbonFlatpickrMonthSelectPlugin = config => fp => {
 function isLabelTextEmpty(children) {
   return children.every(child => !child.props.labelText);
 }
-const rightArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
-  <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
-</svg>`;
-const leftArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
-  <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
-</svg>`;
 function updateClassNames(calendar, prefix) {
   const calendarContainer = calendar.calendarContainer;
   const daysContainer = calendar.days;
@@ -166,6 +160,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   short = false,
   value,
   parseDate: parseDateProp,
+  nextMonthAriaLabel = 'Next month',
+  prevMonthAriaLabel = 'Previous month',
   ...rest
 }, ref) {
   const prefix = usePrefix.usePrefix();
@@ -346,6 +342,16 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     } else if (parseDateProp) {
       parseDate = parseDateProp;
     }
+
+    // Accessible arrow icons (localized manually)
+    // Flatpickr does not currently support localization of next/previous month
+    // labels, so we inject translated aria-labels based on the provided locale.
+    const rightArrowHTML = `<svg aria-label="${nextMonthAriaLabel}" role="img" width="16px" height="16px" viewBox="0 0 16 16">
+      <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
+    </svg>`;
+    const leftArrowHTML = `<svg aria-label="${prevMonthAriaLabel}" role="img" width="16px" height="16px" viewBox="0 0 16 16">
+      <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
+    </svg>`;
     const {
       current: start
     } = startInputField;
@@ -523,7 +529,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType, nextMonthAriaLabel, prevMonthAriaLabel]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()
@@ -878,7 +884,15 @@ DatePicker.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state (Fluid only)
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Accessible aria-label for the "next month" arrow icon.
+   */
+  nextMonthAriaLabel: PropTypes.string,
+  /**
+   * Accessible aria-label for the "previous month" arrow icon.
+   */
+  prevMonthAriaLabel: PropTypes.string
 };
 
 exports.default = DatePicker;

package/lib/components/FluidComboBox/FluidComboBox.d.ts

@@ -72,11 +72,6 @@ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType>, P
      * consuming component what kind of internal state changes are occurring.
      */
     onChange: (data: OnChangeData<ItemType>) => void;
-    /**
-     * An optional callback to render the currently selected item as a react element instead of only
-     * as a string.
-     */
-    renderSelectedItem?: (selectedItem: ItemType) => React.ReactNode;
     /**
      * In the case you want to control the dropdown selection entirely.
      * */

package/lib/components/FluidComboBox/FluidComboBox.js

@@ -95,11 +95,6 @@ FluidComboBox.propTypes = {
    * consuming component what kind of internal state changes are occurring.
    */
   onChange: PropTypes.func.isRequired,
-  /**
-   * An optional callback to render the currently selected item as a react element instead of only
-   * as a string.
-   */
-  renderSelectedItem: PropTypes.func,
   /**
    * In the case you want to control the dropdown selection entirely.
    */

package/lib/components/Popover/index.js

@@ -151,7 +151,8 @@ forwardRef) {
       fallbackAxisSideDirection: 'start',
       boundary: autoAlignBoundary
     }), react.arrow({
-      element: caretRef
+      element: caretRef,
+      padding: 16
     }), autoAlign && react.hide()],
     whileElementsMounted: react.autoUpdate
   } : {}

package/lib/components/Slider/Slider.js

@@ -757,7 +757,7 @@ const Slider = props => {
    *          as the step.
    */
   const calcValueForDelta = (currentValue, delta, step = 1) => {
-    const base = delta > 0 ? Math.floor(currentValue / step) * step : currentValue;
+    const base = delta > 0 ? Math.round(currentValue / step) * step : currentValue;
     const newValue = base + delta;
     // TODO: Why is the logical OR needed here?
     const decimals = (step.toString().split('.')[1] || '').length;

package/lib/components/Tabs/Tabs.js

@@ -26,7 +26,6 @@ var useControllableState = require('../../internal/useControllableState.js');
 var useId = require('../../internal/useId.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
-var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
@@ -1112,10 +1111,6 @@ const TabPanel = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, forwardRef) => {
   const prefix = usePrefix.usePrefix();
-  const panel = React.useRef(null);
-  const ref = useMergedRefs.useMergedRefs([forwardRef, panel]);
-  const [tabIndex, setTabIndex] = React.useState(0);
-  const [interactiveContent, setInteractiveContent] = React.useState(false);
   const {
     selectedIndex,
     baseId
@@ -1123,50 +1118,13 @@ const TabPanel = /*#__PURE__*/React.forwardRef(({
   const index = React.useContext(TabPanelContext);
   const id = `${baseId}-tabpanel-${index}`;
   const tabId = `${baseId}-tab-${index}`;
-  const className = cx(`${prefix}--tab-content`, customClassName, {
-    [`${prefix}--tab-content--interactive`]: interactiveContent
-  });
-  React.useEffect(() => {
-    if (!panel.current) {
-      return;
-    }
-    const content = useNoInteractiveChildren.getInteractiveContent(panel.current);
-    if (content) {
-      setInteractiveContent(true);
-      setTabIndex(-1);
-    }
-  }, []);
-
-  // tabindex should only be 0 if no interactive content in children
-  React.useEffect(() => {
-    const node = panel.current;
-    if (!node) {
-      return;
-    }
-    function callback() {
-      const content = useNoInteractiveChildren.getInteractiveContent(node);
-      if (content) {
-        setInteractiveContent(true);
-        setTabIndex(-1);
-      } else {
-        setInteractiveContent(false);
-        setTabIndex(0);
-      }
-    }
-    const observer = new MutationObserver(callback);
-    observer.observe(node, {
-      childList: true,
-      subtree: true
-    });
-    return () => observer.disconnect();
-  }, []);
+  const className = cx(`${prefix}--tab-content`, customClassName);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-labelledby": tabId,
     id: id,
     className: className,
-    ref: ref,
+    ref: forwardRef,
     role: "tabpanel",
-    tabIndex: tabIndex,
     hidden: selectedIndex !== index
   }), children);
 });

package/lib/components/TreeView/TreeNode.js

@@ -146,6 +146,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   const currentNode = React.useRef(null);
   const currentNodeLabel = React.useRef(null);
   const prefix = usePrefix.usePrefix();
+  const nodeLabelId = `${id}__label`;
   const renderLabelText = () => {
     if (isEllipsisApplied && tooltipText) {
       return /*#__PURE__*/React.createElement(index$1.IconButton, {
@@ -156,11 +157,13 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
         className: `${prefix}--tree-node__label__text-button`,
         wrapperClasses: `${prefix}--popover-container`
       }, /*#__PURE__*/React.createElement("span", {
+        id: nodeLabelId,
         ref: labelTextRef,
         className: `${prefix}--tree-node__label__text`
       }, label));
     }
     return /*#__PURE__*/React.createElement("span", {
+      id: nodeLabelId,
       ref: labelTextRef,
       className: `${prefix}--tree-node__label__text`
     }, label);
@@ -399,6 +402,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
     }), nodeContent), children && /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
+      "aria-labelledby": nodeLabelId,
       className: cx(`${prefix}--tree-node__children`, {
         [`${prefix}--tree-node--hidden`]: !expanded
       })
@@ -412,6 +416,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   }), nodeContent, children && /*#__PURE__*/React.createElement("ul", {
     id: `${id}-subtree`,
     role: "group",
+    "aria-labelledby": nodeLabelId,
     className: cx(`${prefix}--tree-node__children`, {
       [`${prefix}--tree-node--hidden`]: !expanded
     })

package/lib/components/UIShell/Content.d.ts

@@ -69,7 +69,7 @@ declare const Content: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        popover?: "" | "auto" | "manual" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
         inert?: boolean | undefined;

package/lib/tools/events.d.ts

@@ -14,4 +14,4 @@ import type { SyntheticEvent } from 'react';
  * @param handlers - An array of event handler functions.
  * @returns A composite event handler.
  */
-export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
+export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.93.0-rc.0",
+  "version": "1.94.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,10 +53,10 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": "^0.31.0",
-    "@carbon/icons-react": "^11.69.0-rc.0",
-    "@carbon/layout": "^11.43.0-rc.0",
-    "@carbon/styles": "^1.92.0-rc.0",
-    "@carbon/utilities": "^0.11.0-rc.0",
+    "@carbon/icons-react": "^11.70.0-rc.0",
+    "@carbon/layout": "^11.43.0",
+    "@carbon/styles": "^1.93.0-rc.0",
+    "@carbon/utilities": "^0.11.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -80,7 +80,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.38.0",
-    "@carbon/themes": "^11.62.0-rc.0",
+    "@carbon/themes": "^11.62.0",
     "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -123,7 +123,7 @@
     "storybook": "^9.0.5",
     "stream-browserify": "^3.0.0",
     "style-loader": "^4.0.0",
-    "typescript-config-carbon": "^0.8.0-rc.0",
+    "typescript-config-carbon": "^0.8.0",
     "use-sync-external-store": "^1.5.0",
     "webpack": "^5.65.0",
     "webpack-dev-server": "^5.0.0"
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "0d9497f77c917c567c8be19157e3da42d7a02c04"
+  "gitHead": "dff507858b43de91b300a98fa1bec24d38aaeb48"
 }

package/telemetry.yml

@@ -314,7 +314,9 @@ collect:
         - enable
         - maxDate
         - minDate
+        - nextMonthAriaLabel
         - parseDate
+        - prevMonthAriaLabel
         - short
         # DatePickerSkeleton
         - range