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

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * 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">;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/es/components/CodeSnippet/CodeSnippet.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import cx from 'classnames';
 import { useResizeObserver } from '../../internal/useResizeObserver.js';
 import { ChevronDown } from '@carbon/icons-react';
@@ -60,8 +60,6 @@ function CodeSnippet({
   const codeContentRef = useRef(null);
   const codeContainerRef = useRef(null);
   const innerCodeRef = useRef(null);
-  const [hasLeftOverflow, setHasLeftOverflow] = useState(false);
-  const [hasRightOverflow, setHasRightOverflow] = useState(false);
   const getCodeRef = useCallback(() => {
     if (type === 'single') {
       return codeContainerRef;
@@ -73,39 +71,13 @@ function CodeSnippet({
     }
   }, [type]);
   const prefix = usePrefix();
-  const getCodeRefDimensions = useCallback(() => {
-    const {
-      clientWidth: codeClientWidth = 0,
-      scrollLeft: codeScrollLeft = 0,
-      scrollWidth: codeScrollWidth = 0
-    } = getCodeRef().current || {};
-    return {
-      horizontalOverflow: codeScrollWidth > codeClientWidth,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    };
-  }, [getCodeRef]);
-  const handleScroll = 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({
     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 {
@@ -115,14 +87,8 @@ function CodeSnippet({
           setExpandedCode(false);
         }
       }
-      if (codeContentRef?.current && type === 'multi' || codeContainerRef?.current && type === 'single') {
-        handleScroll();
-      }
     }
   });
-  useEffect(() => {
-    handleScroll();
-  }, [handleScroll]);
   const handleCopyClick = evt => {
     if (copyText || innerCodeRef?.current) {
       copy(copyText ?? innerCodeRef?.current?.innerText ?? '');
@@ -137,8 +103,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') {
@@ -196,18 +161,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", _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, {
+  }, children))), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton, {
     align: align,
     autoAlign: autoAlign,
     size: type === 'multi' ? 'sm' : 'md',

package/es/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/es/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/es/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/es/components/DataTable/DataTable.js

@@ -194,9 +194,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: composeEventHandlers(handlers)
+      onExpand: composeEventHandlers(handlers),
+      id: `${getTablePrefix()}-expand`
     };
   };
 
@@ -228,9 +229,10 @@ const DataTable = props => {
       onExpand: 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 = ({
@@ -239,7 +241,7 @@ const DataTable = props => {
   }) => {
     return {
       ...rest,
-      id: `expanded-row-${row.id}`
+      id: `${getTablePrefix()}-expanded-row-${row.id}`
     };
   };
 

package/es/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/es/components/DataTable/Table.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useContext, useState, useRef, useCallback } from 'react';
+import React, { useContext, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -53,7 +53,6 @@ const Table = ({
   stickyHeader,
   overflowMenuOnHover = true,
   experimentalAutoAlign = false,
-  tabIndex,
   ...other
 }) => {
   const {
@@ -61,7 +60,6 @@ const Table = ({
     descriptionId
   } = useContext(TableContext);
   const prefix = usePrefix();
-  const [isScrollable, setIsScrollable] = useState(false);
   const tableRef = useRef(null);
   const componentClass = cx(`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
@@ -100,22 +98,6 @@ const Table = ({
   const debouncedSetTableAlignment = debounce(setTableAlignment, 100);
   useWindowEvent('resize', debouncedSetTableAlignment);
 
-  // Used to set a tabIndex when the Table is horizontally scrollable
-  const setTabIndex = useCallback(() => {
-    const tableContainer = tableRef?.current?.parentNode;
-    const tableHeader = tableRef?.current?.firstChild;
-    if (tableHeader?.scrollWidth > tableContainer?.clientWidth) {
-      setIsScrollable(true);
-    } else {
-      setIsScrollable(false);
-    }
-  }, []);
-  const debouncedSetTabIndex = debounce(setTabIndex, 100);
-  useWindowEvent('resize', debouncedSetTabIndex);
-  useIsomorphicEffect(() => {
-    setTabIndex();
-  }, [setTabIndex]);
-
   // recalculate table alignment once fonts have loaded
   if (typeof document !== 'undefined' && document?.fonts?.status && document.fonts.status !== 'loaded') {
     document.fonts.ready.then(() => {
@@ -126,8 +108,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", _extends({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId

package/es/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/es/components/DataTable/TableRow.js

@@ -31,6 +31,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();

package/es/components/DataTable/TableToolbar.js

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

package/es/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/es/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/es/components/DatePicker/DatePicker.js

@@ -105,12 +105,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;
@@ -162,6 +156,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   short = false,
   value,
   parseDate: parseDateProp,
+  nextMonthAriaLabel = 'Next month',
+  prevMonthAriaLabel = 'Previous month',
   ...rest
 }, ref) {
   const prefix = usePrefix();
@@ -342,6 +338,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;
@@ -519,7 +525,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()
@@ -874,7 +880,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
 };
 
 export { DatePicker as default };

package/es/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/es/components/FluidComboBox/FluidComboBox.js

@@ -91,11 +91,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/es/components/Popover/index.js

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

package/es/components/Slider/Slider.js

@@ -755,7 +755,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/es/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ import { Close, ChevronLeft, ChevronRight } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { forwardRef, createContext, useRef, useState, useMemo, isValidElement, useEffect, useCallback } from 'react';
+import React, { forwardRef, createContext, useRef, useState, useMemo, isValidElement, useCallback, useEffect } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -24,7 +24,6 @@ import { useControllableState } from '../../internal/useControllableState.js';
 import { useId } from '../../internal/useId.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Delete, ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 import { match, matches } from '../../internal/keyboard/match.js';
@@ -1110,10 +1109,6 @@ const TabPanel = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, forwardRef) => {
   const prefix = usePrefix();
-  const panel = useRef(null);
-  const ref = useMergedRefs([forwardRef, panel]);
-  const [tabIndex, setTabIndex] = useState(0);
-  const [interactiveContent, setInteractiveContent] = useState(false);
   const {
     selectedIndex,
     baseId
@@ -1121,50 +1116,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
-  });
-  useEffect(() => {
-    if (!panel.current) {
-      return;
-    }
-    const content = getInteractiveContent(panel.current);
-    if (content) {
-      setInteractiveContent(true);
-      setTabIndex(-1);
-    }
-  }, []);
-
-  // tabindex should only be 0 if no interactive content in children
-  useEffect(() => {
-    const node = panel.current;
-    if (!node) {
-      return;
-    }
-    function callback() {
-      const content = 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", _extends({}, rest, {
     "aria-labelledby": tabId,
     id: id,
     className: className,
-    ref: ref,
+    ref: forwardRef,
     role: "tabpanel",
-    tabIndex: tabIndex,
     hidden: selectedIndex !== index
   }), children);
 });

package/es/components/TreeView/TreeNode.js

@@ -142,6 +142,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   const currentNode = useRef(null);
   const currentNodeLabel = useRef(null);
   const prefix = usePrefix();
+  const nodeLabelId = `${id}__label`;
   const renderLabelText = () => {
     if (isEllipsisApplied && tooltipText) {
       return /*#__PURE__*/React.createElement(IconButton, {
@@ -152,11 +153,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);
@@ -395,6 +398,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
       })
@@ -408,6 +412,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/es/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/es/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/lib/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * 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">;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node