@carbon/react 1.89.0 → 1.90.0

package/README.md

@@ -114,14 +114,14 @@ function MyComponent() {
 ```
 
 For a full list of icons available, checkout our
-[website](https://www.carbondesignsystem.com/guidelines/icons/library/).
+[website](https://carbondesignsystem.com/elements/icons/library/).
 
 ## 📖 API Documentation
 
 If you're looking for `@carbon/react` API documentation, check out:
 
 - [Storybook](https://react.carbondesignsystem.com/)
-- [Icon Library](https://www.carbondesignsystem.com/guidelines/icons/library/)
+- [Icon Library](https://carbondesignsystem.com/elements/icons/library/)
 
 ## 🙌 Contributing
 

package/es/components/AILabel/index.js

@@ -19,17 +19,19 @@ import { deprecate } from '../../prop-types/deprecate.js';
 var _Undo;
 const AILabelContent = /*#__PURE__*/React.forwardRef(function AILabelContent({
   className,
-  children,
-  ...rest
-}, ref) {
+  children
+}, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+) {
   const prefix = usePrefix();
   const hasAILabelActions = React.Children.toArray(children).some(child => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
     const item = child;
     // TODO: Is there supposed to be a `return` here? If so, this issue would
     // have been caught by ESLint. It's concerning that this code is 7 months
     // old and no one has noticed any issues with it. It also makes me question
     // whether the code is necessary.
     // https://github.com/carbon-design-system/carbon/issues/18991
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
     item.type === AILabelActions;
   });
   const aiLabelContentClasses = cx(className, {
@@ -53,9 +55,9 @@ AILabelContent.propTypes = {
 };
 const AILabelActions = /*#__PURE__*/React.forwardRef(function AILabelActions({
   className,
-  children,
-  ...rest
-}, ref) {
+  children
+}, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
+) {
   const prefix = usePrefix();
   const aiLabelActionsClasses = cx(className, {
     [`${prefix}--ai-label-actions`]: true

package/es/components/Breadcrumb/BreadcrumbItem.js

@@ -33,6 +33,8 @@ const BreadcrumbItem = frFn((props, ref) => {
     [`${prefix}--breadcrumb-item--current`]: isCurrentPage && ariaCurrent !== 'page',
     [customClassName]: !!customClassName
   });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   const child = children;
   if (child.type && child.type.displayName !== undefined && child.type.displayName.includes('OverflowMenu')) {
     const horizontalOverflowIcon = /*#__PURE__*/React.createElement(OverflowMenuHorizontal, {

package/es/components/Button/Button.js

@@ -21,6 +21,8 @@ function isIconOnlyButton(hasIconOnly, _kind) {
   }
   return false;
 }
+
+// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
 const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     as,
@@ -43,6 +45,7 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = props;
   if (ButtonImageElement && !children && !iconDescription) {
+    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
     console.error('Button: renderIcon property specified without also providing an iconDescription property. ' + 'This may impact accessibility for screen reader users.');
   }
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React.createElement(ButtonImageElement, null);

package/es/components/ChatButton/ChatButton.js

@@ -38,6 +38,7 @@ const ChatButton = /*#__PURE__*/React.forwardRef(function ChatButton({
   } else {
     // Check if size is valid and warn if not
     if (size && !allowedSizes.includes(size)) {
+      // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
       console.error(`Invalid size "${size}" provided to ChatButton. Size must be one of: ${allowedSizes.join(', ')}. Defaulting to "lg".`);
       size = 'lg';
     }

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { cloneElement } from 'react';
+import React, { Children, isValidElement, cloneElement } from 'react';
 import cx from 'classnames';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -15,6 +15,8 @@ import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import '../Checkbox/Checkbox.Skeleton.js';
 
 const CheckboxGroup = ({
   children,
@@ -57,6 +59,23 @@ const CheckboxGroup = ({
     size: 'mini',
     kind: 'default'
   }) : null;
+  const clonedChildren = Children.map(children, child => {
+    if (/*#__PURE__*/isValidElement(child) && child.type === Checkbox) {
+      const childProps = {
+        ...(typeof invalid !== 'undefined' && typeof child.props.invalid === 'undefined' ? {
+          invalid
+        } : {}),
+        ...(typeof readOnly !== 'undefined' && typeof child.props.readOnly === 'undefined' ? {
+          readOnly
+        } : {}),
+        ...(typeof warn !== 'undefined' && typeof child.props.warn === 'undefined' ? {
+          warn
+        } : {})
+      };
+      return Object.keys(childProps).length ? /*#__PURE__*/cloneElement(child, childProps) : child;
+    }
+    return child;
+  });
   return /*#__PURE__*/React.createElement("fieldset", _extends({
     className: fieldsetClasses,
     "data-invalid": invalid ? true : undefined,
@@ -68,7 +87,7 @@ const CheckboxGroup = ({
     id: legendId || rest['aria-labelledby']
   }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--checkbox-group-inner--decorator`
-  }, normalizedDecorator) : ''), children, /*#__PURE__*/React.createElement("div", {
+  }, normalizedDecorator) : ''), clonedChildren, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--checkbox-group__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`

package/es/components/ComboBox/ComboBox.js

@@ -180,6 +180,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         refs.floating.current.style.width = parentWidth + 'px';
       }
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [enableFloatingStyles, floatingStyles, refs.floating, parentWidth]);
   const [inputValue, setInputValue] = useState(getInputValue({
     initialSelectedItem,
@@ -209,6 +210,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       }
       prevInputLengthRef.current = inputValue.length;
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
   const isManualClearingRef = useRef(false);
   const [isClearing, setIsClearing] = useState(false);
@@ -249,6 +251,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       }
       prevSelectedItemProp.current = selectedItemProp;
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [selectedItemProp]);
   const filterItems = (items, itemToString, inputValue) => items.filter(item => typeahead ? autocompleteCustomFilter({
     item: itemToString(item),
@@ -263,8 +266,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     if (prevInputValue.current !== inputValue) {
       prevInputValue.current = inputValue;
+      // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
       onInputChange && onInputChange(inputValue);
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [inputValue]);
   const handleSelectionClear = () => {
     if (textInput?.current) {
@@ -317,6 +322,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           if (state.highlightedIndex !== -1) {
             const filteredList = filterItems(items, itemToString, inputValue);
             const highlightedItem = filteredList[state.highlightedIndex];
+
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
             if (highlightedItem && !highlightedItem.disabled) {
               return {
                 ...changes,
@@ -328,6 +335,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
             const autoIndex = indexToHighlight(inputValue);
             if (autoIndex !== -1) {
               const matchingItem = items[autoIndex];
+
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
               if (matchingItem && !matchingItem.disabled) {
                 return {
                   ...changes,
@@ -480,8 +489,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     onHighlightedIndexChange: ({
       highlightedIndex
     }) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion , valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20071
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20071
         const highlightedItem = itemArray[highlightedIndex];
         if (highlightedItem) {
           highlightedItem.scrollIntoView({
@@ -494,7 +505,9 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     initialSelectedItem: initialSelectedItem,
     inputId: id,
     stateReducer,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     isItemDisabled(item, _index) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
       return item?.disabled;
     },
     ...downshiftProps,
@@ -531,6 +544,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         toggleMenu
       };
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [closeMenu, openMenu, reset, selectItem, setHighlightedIndex, downshiftSetInputValue, toggleMenu]);
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
@@ -579,7 +593,9 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
-  }), [enableFloatingStyles, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
+  }),
+  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
+  [enableFloatingStyles, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
   useEffect(() => {
     if (textInput.current) {
       if (inputRef.current && typeaheadText) {

package/es/components/ComboButton/index.js

@@ -54,6 +54,7 @@ const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
   const id = useId('combobutton');
   const prefix = usePrefix();
   const containerRef = useRef(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   let middlewares = [];
   if (!enableOnlyFloatingStyles) {
     middlewares = [flip({

package/es/components/ComposedModal/ComposedModal.js

@@ -134,6 +134,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
       setWasOpen(!!open);
       toggleClass(document.body, `${prefix}--body--with-modal-open`, !!open);
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [open, wasOpen, prefix]);
   // Remove the document.body className on unmount
   useEffect(() => {
@@ -166,9 +167,14 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     } = evt;
     const mouseDownTarget = onMouseDownTarget.current;
     evt.stopPropagation();
-    const containsModalFooter = Children.toArray(childrenWithProps).some(child => isComponentElement(child, ModalFooter));
-    const isPassive = !containsModalFooter;
-    const shouldCloseOnOutsideClick = isPassive ? preventCloseOnClickOutside !== false : preventCloseOnClickOutside === true;
+    const shouldCloseOnOutsideClick =
+    // Passive modals can close on clicks outside the modal when
+    // preventCloseOnClickOutside is undefined or explicitly set to false.
+    isPassive && !preventCloseOnClickOutside ||
+    // Non-passive modals have to explicitly opt-in for close on outside
+    // behavior by explicitly setting preventCloseOnClickOutside to false,
+    // rather than just leaving it undefined.
+    !isPassive && preventCloseOnClickOutside === false;
     if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
@@ -204,7 +210,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     }
     const lastContent = modalContent.children[modalContent.children.length - 1];
     const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
-    for (let elem of modalContent.children) {
+    for (const elem of modalContent.children) {
       if (elem.contains(currentActiveNode)) {
         const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
         if (spaceBelow < gradientSpacing) {
@@ -252,6 +258,12 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
         return child;
     }
   });
+
+  // Modals without a footer are considered passive and carry limitations as
+  // outlined in the design spec.
+  const containsModalFooter = Children.toArray(childrenWithProps).some(child => isComponentElement(child, ModalFooter));
+  const isPassive = !containsModalFooter;
+  process.env.NODE_ENV !== "production" ? warning(!(!isPassive && preventCloseOnClickOutside === false), '`<ComposedModal>` prop `preventCloseOnClickOutside` should not be ' + '`false` when `<ModalFooter>` is present. Transactional, non-passive ' + 'Modals should not be dissmissable by clicking outside. ' + 'See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal') : void 0;
   useEffect(() => {
     if (!open) return;
     const handleEscapeKey = event => {
@@ -265,6 +277,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     return () => {
       document.removeEventListener('keydown', handleEscapeKey, true);
     };
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [open]);
   useEffect(() => {
     if (!enableDialogElement && !open && launcherButtonRef) {
@@ -296,6 +309,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
         focusButton(innerModal.current);
       }
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [open, selectorPrimaryFocus, isOpen]);
 
   // AILabel is always size `sm`

package/es/components/DataTable/DataTable.d.ts

@@ -6,6 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React, { type ChangeEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import { type SortRowFn } from './state/sorting';
 import type { DataTableSortState } from './state/sortStates';
 import { TranslateWithId } from '../../types/common';
 declare const translationKeys: {
@@ -181,13 +182,7 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => ReactElement;
     rows: Omit<DataTableRow<ColTypes>, 'cells'>[];
     size?: DataTableSize;
-    sortRow?: (cellA: any, cellB: any, options: {
-        sortDirection: DataTableSortState;
-        sortStates: Record<DataTableSortState, DataTableSortState>;
-        locale: string;
-        key: string;
-        compare: (a: number | string, b: number | string, locale?: string) => number;
-    }) => number;
+    sortRow?: SortRowFn;
     stickyHeader?: boolean;
     useStaticWidth?: boolean;
     useZebraStyles?: boolean;
@@ -286,7 +281,7 @@ export declare const DataTable: {
     };
     TableHead: (props: React.HTMLAttributes<"thead">) => React.ReactElement<any>;
     TableHeader: React.ForwardRefExoticComponent<import("./TableHeader").TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
-    TableRow: React.ForwardRefExoticComponent<import("./TableRow").TableRowProps & React.RefAttributes<HTMLTableCellElement>>;
+    TableRow: React.ForwardRefExoticComponent<import("./TableRow").TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
     TableSelectAll: {
         ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabel, checked, id, indeterminate, name, onSelect, disabled, className, }: import("./TableSelectAll").TableSelectAllProps): import("react/jsx-runtime").JSX.Element;
         propTypes: {

package/es/components/DataTable/DataTable.js

@@ -68,6 +68,17 @@ const defaultTranslations = {
   [translationKeys.unselectRow]: 'Unselect row'
 };
 const translateWithId = id => defaultTranslations[id];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+
 /**
  * Data Tables are used to represent a collection of resources, displaying a
  * subset of their fields in columns, or headers. We prioritize direct updates
@@ -78,6 +89,7 @@ const translateWithId = id => defaultTranslations[id];
  * and updating the state of the single entity will cascade updates to the
  * consumer.
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
 const DataTable = props => {
   const {
     children,
@@ -126,6 +138,7 @@ const DataTable = props => {
     if (hasRowIdsChanged || hasHeadersChanged || hasRowsChanged) {
       setState(prev => getDerivedStateFromProps(props, prev));
     }
+    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
   }, [headers, rows]);
 
   /**
@@ -158,6 +171,7 @@ const DataTable = props => {
           ...prev,
           ...nextSortState
         }));
+        // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
         onClick && handleOnHeaderClick(onClick, {
           sortHeaderKey: header.key,
           sortDirection: nextSortState.sortDirection

package/es/components/DataTable/Table.js

@@ -72,9 +72,11 @@ const Table = ({
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
   const toggleTableBodyAlignmentClass = useCallback((alignTop = false) => {
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
   }, [prefix]);
   const toggleTableHeaderAlignmentClass = useCallback((alignTop = false) => {
+    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
   }, [prefix]);
   const setTableAlignment = useCallback(() => {
@@ -124,9 +126,7 @@ const Table = ({
     setTableAlignment();
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-content`
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
+    className: `${prefix}--data-table-content`,
     tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
   }, /*#__PURE__*/React.createElement("table", _extends({
     "aria-labelledby": titleId,

package/es/components/DataTable/TableExpandHeader.js

@@ -91,7 +91,11 @@ TableExpandHeader.propTypes = {
   /**
    * Hook for when a listener initiates a request to expand the given row
    */
-  onExpand: PropTypes.oneOfType([requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func), requiredIfGivenPropIsTruthy('enableToggle', PropTypes.func)])
+  onExpand: PropTypes.oneOfType([requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  ), requiredIfGivenPropIsTruthy('enableToggle', PropTypes.func
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
+  )])
 };
 
 export { TableExpandHeader as default };

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

@@ -4,13 +4,41 @@
  * 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, { type MouseEventHandler, type PropsWithChildren } from 'react';
-import { TableRowProps } from './TableRow';
-export interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+import React, { type HTMLAttributes, type MouseEventHandler, type PropsWithChildren } from 'react';
+/** Props shared between `TableRow` and `TableExpandRow`. */
+export interface TableRowExpandInteropProps {
+    /**
+     * @deprecated Use `aria-label` instead.
+     */
+    ariaLabel?: string;
+    /**
+     * Specify the string read by a voice reader when the expand trigger is
+     * focused
+     */
+    'aria-label'?: string;
+    /**
+     * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+     */
+    'aria-controls'?: string;
+    /**
+     * Specify whether this row is expanded or not. This helps coordinate data
+     * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+     */
+    isExpanded?: boolean;
+    /**
+     * Hook for when a listener initiates a request to expand the given row
+     */
+    onExpand?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify if the row is selected.
+     */
+    isSelected?: boolean;
+}
+export interface TableExpandRowProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick'>>, Omit<TableRowExpandInteropProps, 'aria-label' | 'onExpand'> {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
      */
-    ['aria-controls']?: string;
+    'aria-controls'?: string;
     /**
      * @deprecated This prop has been deprecated and will be
      * removed in the next major release of Carbon. Use the
@@ -21,7 +49,7 @@ export interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ['aria-label']: string;
+    'aria-label': string;
     /**
      * 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
      */

package/es/components/DataTable/TableExpandRow.js

@@ -17,6 +17,8 @@ import TableDecoratorRow from './TableDecoratorRow.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 
+/** Props shared between `TableRow` and `TableExpandRow`. */
+
 const TableExpandRow = /*#__PURE__*/React.forwardRef(({
   ['aria-controls']: ariaControls,
   ['aria-label']: ariaLabel,
@@ -85,13 +87,14 @@ TableExpandRow.propTypes = {
    * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
    * TODO: make this required in v12
    */
-  ['aria-controls']: PropTypes.string,
+  'aria-controls': PropTypes.string,
   /**
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
   /**@ts-ignore*/
-  ['aria-label']: PropTypes.string,
+  'aria-label': PropTypes.string,
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is

package/es/components/DataTable/TableHeader.d.ts

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
-import { sortStates } from './state/sorting';
 import { TranslateWithId } from '../../types/common';
-import { DataTableSortState } from './state/sortStates';
+import { sortStates, type DataTableSortState } from './state/sortStates';
 export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
 export interface TableHeaderTranslationArgs {
     header: ReactNode;

package/es/components/DataTable/TableHeader.js

@@ -10,12 +10,11 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useRef, cloneElement } from 'react';
 import { ArrowUp, ArrowsVertical } from '@carbon/icons-react';
-import './state/sorting.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { sortStates } from './state/sortStates.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { sortStates } from './state/sortStates.js';
 
 const defaultScope = 'col';
 const translationKeys = {
@@ -189,6 +188,8 @@ TableHeader.propTypes = {
    */
   translateWithId: PropTypes.func
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
 TableHeader.translationKeys = Object.values(translationKeys);
 TableHeader.displayName = 'TableHeader';
 

package/es/components/DataTable/TableRow.d.ts

@@ -5,15 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes } from 'react';
-export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+import type { TableRowExpandInteropProps } from './TableExpandRow';
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement>, TableRowExpandInteropProps {
     /**
      * Specify an optional className to be applied to the container node
      */
     className?: string;
-    /**
-     * Specify if the row is selected
-     */
-    isSelected?: boolean;
 }
-declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
 export default TableRow;

package/es/components/DataTable/TableRow.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { Children } from 'react';
+import React, { forwardRef, Children } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -15,37 +15,35 @@ import TableDecoratorRow from './TableDecoratorRow.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 
-const TableRow = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const prefix = usePrefix();
-  let rowHasAILabel;
-  if (props?.children) {
-    // TODO: Why is this loop a `map`? It's not returning anything. Ideally,
-    // it seems that it should be a `some`. Maybe I'm missing something?
-    Children.toArray(props.children).map(child => {
-      if (isComponentElement(child, TableSlugRow)) {
-        if (child.props.slug) {
-          rowHasAILabel = true;
-        }
-      } else if (isComponentElement(child, TableDecoratorRow) && isComponentElement(child.props.decorator, AILabel)) {
-        rowHasAILabel = true;
-      }
-    });
-  }
+const frFn = forwardRef;
+const TableRow = frFn((props, ref) => {
   // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`
-  const className = cx(props.className, {
-    [`${prefix}--data-table--selected`]: props.isSelected,
-    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
-  });
   const {
     ariaLabel,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     'aria-label': ariaLabelAlt,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     'aria-controls': ariaControls,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     onExpand,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     isExpanded,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20071
     isSelected,
     ...cleanProps
   } = props;
+  const prefix = usePrefix();
+  const rowHasAILabel = Children.toArray(props.children).some(child => {
+    if (isComponentElement(child, TableSlugRow)) {
+      return !!child.props.slug;
+    }
+    return isComponentElement(child, TableDecoratorRow) && isComponentElement(child.props.decorator, AILabel);
+  });
+  const className = cx(props.className, {
+    [`${prefix}--data-table--selected`]: isSelected,
+    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
+  });
   if (className) {
     cleanProps.className = className;
   }
@@ -61,7 +59,27 @@ TableRow.propTypes = {
   /**
    * Specify if the row is selected
    */
-  isSelected: PropTypes.bool
+  isSelected: PropTypes.bool,
+  /**
+   * Non-standard alias for `aria-label`.
+   */
+  ariaLabel: PropTypes.string,
+  /**
+   * Accessible label for the row element.
+   */
+  'aria-label': PropTypes.string,
+  /**
+   * Associates this row with the id of the corresponding expanded row content.
+   */
+  'aria-controls': PropTypes.string,
+  /**
+   * Handler called when the row’s expand toggle is clicked.
+   */
+  onExpand: PropTypes.func,
+  /**
+   * Flag indicating whether the row is currently expanded.
+   */
+  isExpanded: PropTypes.bool
 };
 
 export { TableRow as default };