@carbon/react 1.84.0 → 1.85.0

package/es/components/UIShell/HeaderPanel.js

@@ -8,12 +8,13 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, isValidElement } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import Switcher from './Switcher.js';
 
 const noopFn = () => {};
 const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel({
@@ -58,10 +59,13 @@ const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel({
     };
   }
   useWindowEvent('click', () => {
-    const focusedElement = document.activeElement;
-    setLastClickedElement(focusedElement);
-    const childJsxElement = children;
-    if (childJsxElement?.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+    const {
+      activeElement
+    } = document;
+    if (!(activeElement instanceof HTMLElement)) return;
+    setLastClickedElement(activeElement);
+    const isChildASwitcher = /*#__PURE__*/isValidElement(children) && typeof children.type !== 'string' && children.type === Switcher;
+    if (isChildASwitcher && !activeElement.closest(`.${prefix}--header-panel--expanded`) && !activeElement.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();
     }

package/es/internal/Selection.js

@@ -17,9 +17,14 @@ const callOnChangeHandler = ({
 }) => {
   if (isControlled) {
     if (isMounted && onChangeHandlerControlled) {
-      onChangeHandlerControlled({
-        selectedItems
-      });
+      // Use setTimeout to defer the controlled onChange call,
+      // avoiding React’s warning: "Cannot update a component while rendering a different component".
+      // This ensures the parent state updates after rendering completes.
+      setTimeout(() => {
+        onChangeHandlerControlled({
+          selectedItems
+        });
+      }, 0);
     }
   } else {
     onChangeHandlerUncontrolled(selectedItems);

package/es/internal/environment.js

@@ -10,17 +10,6 @@
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-const canUseDOM = !!(typeof window !== 'undefined' &&
-// TODO: `ssr-friendly` doesn't support ESLint v9.
-// https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
-// https://github.com/carbon-design-system/carbon/issues/18991
-/*
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-*/
-window.document &&
-/*
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-*/
-window.document.createElement);
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
 export { canUseDOM };

package/{lib/internal/__mocks__/mockHTMLElement.d.ts → es/internal/index.d.ts}

@@ -1,9 +1,7 @@
 /**
- * Copyright IBM Corp. 2025, 2025
+ * Copyright IBM Corp. 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export declare const mockHTMLElement: (options: HTMLElement) => {
-    mockRestore: () => void;
-};
+export * from './utils';

package/es/internal/useResizeObserver.d.ts

@@ -6,7 +6,7 @@
  */
 import { RefObject } from 'react';
 export declare const useResizeObserver: ({ ref, onResize, }: {
-    ref: RefObject<HTMLElement>;
+    ref: RefObject<HTMLElement | null>;
     onResize?: (rect: DOMRectReadOnly) => void;
 }) => {
     width: number;

package/es/internal/utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ComponentType, type ReactElement, type ReactNode } from 'react';
+/**
+ * Checks if an element is a valid React element of a given component type.
+ *
+ * @param element - The element to test.
+ * @param component - The component to match.
+ */
+export declare const isComponentElement: <P>(element: ReactNode, component: ComponentType<P>) => element is ReactElement<P>;

package/es/internal/utils.js

@@ -0,0 +1,18 @@
+/**
+ * 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 { isValidElement } from 'react';
+
+/**
+ * Checks if an element is a valid React element of a given component type.
+ *
+ * @param element - The element to test.
+ * @param component - The component to match.
+ */
+const isComponentElement = (element, component) => /*#__PURE__*/isValidElement(element) && element.type === component;
+
+export { isComponentElement };

package/es/tools/uniqueId.d.ts

@@ -1,7 +1,2 @@
-/**
- * Copyright IBM Corp. 2016, 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
+export declare const uniqueIdDeprecationMessage = "The `uniqueId()` helper function from @carbon/react was called. This function should no longer be used.\n\n@carbon/react components should use the internal/useId.js hook instead. Other projects can use React's `useId()` hook: https://react.dev/reference/react/useId";
 export declare const uniqueId: (prefix?: string) => string;

package/lib/components/AILabel/index.js

@@ -37,7 +37,12 @@ const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(functio
   const prefix = usePrefix.usePrefix();
   const hasAILabelActions = React__default["default"].Children.toArray(children).some(child => {
     const item = child;
-    item.type?.displayName === 'AILabelActions';
+    // 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
+    item.type === AILabelActions;
   });
   const aiLabelContentClasses = cx__default["default"](className, {
     [`${prefix}--ai-label-content`]: true,

package/lib/components/Checkbox/Checkbox.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**

package/lib/components/Checkbox/Checkbox.js

@@ -19,6 +19,8 @@ var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -65,13 +67,11 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef(({
   const innerLabelClasses = cx__default["default"](`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel
   });
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    const size = normalizedDecorator.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: candidate.props.kind === 'inline' ? 'md' : 'mini'
+  }) : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {

package/lib/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface CheckboxGroupProps {
     children?: ReactNode;
     className?: string;

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -17,6 +17,8 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -59,13 +61,12 @@ const CheckboxGroup = ({
   });
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'mini',
-      kind: 'default'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini',
+    kind: 'default'
+  }) : null;
   return /*#__PURE__*/React__default["default"].createElement("fieldset", _rollupPluginBabelHelpers["extends"]({
     className: fieldsetClasses,
     "data-invalid": invalid ? true : undefined,

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -19,7 +19,7 @@ var Copy = require('../Copy/Copy.js');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var CopyButton = require('../CopyButton/CopyButton.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var copy = require('copy-to-clipboard');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -67,7 +67,7 @@ function CodeSnippet({
   const [shouldShowMoreLessBtn, setShouldShowMoreLessBtn] = React.useState(false);
   const {
     current: uid
-  } = React.useRef(uniqueId.uniqueId());
+  } = React.useRef(useId.useId());
   const codeContentRef = React.useRef(null);
   const codeContainerRef = React.useRef(null);
   const innerCodeRef = React.useRef(null);
@@ -111,8 +111,6 @@ function CodeSnippet({
     setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
   }, [type, getCodeRefDimensions]);
   useResizeObserver.useResizeObserver({
-    // Cast the ref until the hook supports React 19
-    // https://github.com/ZeeCoder/use-resize-observer/issues/108
     ref: getCodeRef(),
     onResize: () => {
       if (codeContentRef?.current && type === 'multi') {

package/lib/components/ComboBox/ComboBox.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { UseComboboxProps, UseComboboxActions } from 'downshift';
-import React, { type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
+import React, { type ComponentType, type InputHTMLAttributes, type MouseEvent, type PropsWithChildren, type PropsWithRef, type ReactElement, type ReactNode, type RefAttributes } from 'react';
 import { type ListBoxSize } from '../ListBox';
 import { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';

package/lib/components/ComboBox/ComboBox.js

@@ -17,7 +17,7 @@ var React = require('react');
 require('../Text/index.js');
 var iconsReact = require('@carbon/icons-react');
 var isEqual = require('react-fast-compare');
-var index$1 = require('../ListBox/index.js');
+var index$2 = require('../ListBox/index.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -30,6 +30,8 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
+var index$1 = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var Text = require('../Text/Text.js');
 
@@ -448,12 +450,11 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const ItemToElement = itemToElement;
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'mini'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   const {
     // Prop getters
     getInputProps,
@@ -604,7 +605,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
     as: "label",
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$2["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     className: className,
@@ -728,7 +729,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     translateWithId: translateWithId
   }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$2["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({
@@ -746,7 +747,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       // eslint-disable-line @typescript-eslint/no-unused-vars
       ...modifiedItemProps
     } = itemProps;
-    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index$2["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index,

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -4,7 +4,7 @@
  * 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 MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import React, { type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode, type RefObject } from 'react';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the content to be placed in the ModalBody. */
     children?: ReactNode;

package/lib/components/ComposedModal/ComposedModal.js

@@ -28,8 +28,10 @@ var match = require('../../internal/keyboard/match.js');
 var index$1 = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index$2 = require('../Dialog/index.js');
+var index$3 = require('../Dialog/index.js');
 var warning = require('../../internal/warning.js');
+var index$2 = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -178,7 +180,10 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     } = evt;
     const mouseDownTarget = onMouseDownTarget.current;
     evt.stopPropagation();
-    if (!preventCloseOnClickOutside && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
+    const containsModalFooter = React.Children.toArray(childrenWithProps).some(child => utils.isComponentElement(child, ModalFooter.ModalFooter));
+    const isPassive = !containsModalFooter;
+    const shouldCloseOnOutsideClick = isPassive ? preventCloseOnClickOutside !== false : preventCloseOnClickOutside === true;
+    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
   }
@@ -264,10 +269,10 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(() => {
     if (!enableDialogElement && !open && launcherButtonRef) {
       setTimeout(() => {
-        launcherButtonRef?.current?.focus();
+        launcherButtonRef.current?.focus();
       });
     }
-  }, [open, launcherButtonRef]);
+  }, [enableDialogElement, open, launcherButtonRef]);
   React.useEffect(() => {
     if (!enableDialogElement) {
       const initialFocus = focusContainerElement => {
@@ -294,14 +299,14 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   }, [open, selectorPrimaryFocus, isOpen]);
 
   // AILabel is always size `sm`
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'sm'
-    });
-  }
-  const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$2.unstable__Dialog, {
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index$2.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'sm'
+  }) : null;
+  const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$3.unstable__Dialog, {
     open: open,
+    focusAfterCloseRef: launcherButtonRef,
     modal: true,
     className: containerClass,
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,

package/lib/components/ContainedList/ContainedList.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/ContainedList/ContainedList.js

@@ -17,6 +17,8 @@ var index = require('../Layout/index.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
+var Search = require('../Search/Search.js');
+require('../Search/Search.Skeleton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,13 +39,13 @@ function filterChildren(children) {
 function renderChildren(children) {
   if (Array.isArray(children)) {
     children.map((child, index) => {
-      if (index === 0 && child.type?.displayName === 'Search') {
+      if (index === 0 && child.type === Search["default"]) {
         return child;
       }
       return child;
     });
   }
-  if (children && children.type?.displayName === 'Search') {
+  if (children && children.type === Search["default"]) {
     return children;
   }
   return children;

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -21,6 +21,8 @@ var match = require('../../internal/keyboard/match.js');
 var navigation = require('../../internal/keyboard/navigation.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
+require('../Switch/Switch.js');
+var IconSwitch = require('../Switch/IconSwitch.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -89,10 +91,9 @@ const ContentSwitcher = ({
       onChange(event);
     }
   };
-  const isIconOnly = childrenArray.every(
-  // TODO: Update this code when
-  // https://github.com/carbon-design-system/carbon/pull/18971 is merged.
-  child => child.type.displayName === 'IconSwitch');
+  const isIconOnly = React.Children.map(children, child => {
+    return /*#__PURE__*/React.isValidElement(child) ? child.type === IconSwitch["default"] : null;
+  })?.every(val => val === true);
   const classes = cx__default["default"](`${prefix}--content-switcher`, className, {
     [`${prefix}--content-switcher--light`]: light,
     [`${prefix}--content-switcher--${size}`]: size,

package/lib/components/DataTable/DataTable.js

@@ -185,6 +185,7 @@ class DataTable extends React.Component {
       return {
         ...rest,
         key: row.id,
+        onClick,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
         onExpand: events.composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
@@ -307,6 +308,8 @@ class DataTable extends React.Component {
         useStaticWidth
       };
     });
+    // TODO: `getHeaderProps` and `getRowProps` return `key` props. Would it be
+    // beneficial for this function to also return a `key` prop?
     /**
      * Get the props associated with the given table cell.
      */

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

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 PropTypes from 'prop-types';
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface TableDecoratorRowProps {
     /**
      * The CSS class names of the cell that wraps the underlying input control

package/lib/components/DataTable/TableDecoratorRow.js

@@ -9,16 +9,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const TableDecoratorRow = ({
   className,
@@ -32,12 +34,10 @@ const TableDecoratorRow = ({
     [`${prefix}--table-column-decorator`]: true,
     [`${prefix}--table-column-decorator--active`]: decorator
   });
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(decorator) ? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'mini'
-    });
-  }
+  const decoratorIsAILabel = utils.isComponentElement(decorator, index.AILabel);
+  const normalizedDecorator = decoratorIsAILabel ? /*#__PURE__*/React.cloneElement(decorator, {
+    size: 'mini'
+  }) : null;
   return /*#__PURE__*/React__default["default"].createElement("td", {
     className: TableDecoratorRowClasses
   }, normalizedDecorator);

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/DataTable/TableExpandRow.js

@@ -16,6 +16,10 @@ var React = require('react');
 var iconsReact = require('@carbon/icons-react');
 var TableCell = require('./TableCell.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var TableSlugRow = require('./TableSlugRow.js');
+var TableDecoratorRow = require('./TableDecoratorRow.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -40,16 +44,21 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef(({
 
   // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.
   let rowHasAILabel;
-  const decorator = React__default["default"].Children.toArray(children).map(child => {
-    if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
-      if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+  const decorator = React.Children.toArray(children).map(child => {
+    if (utils.isComponentElement(child, TableSlugRow["default"])) {
+      if (child.props.slug) {
+        rowHasAILabel = true;
+      }
+      return child;
+    } else if (utils.isComponentElement(child, TableDecoratorRow["default"])) {
+      if (utils.isComponentElement(child.props.decorator, index.AILabel)) {
         rowHasAILabel = true;
       }
       return child;
     }
   });
-  const normalizedChildren = React__default["default"].Children.toArray(children).map(child => {
-    if (child.type?.displayName !== 'TableSlugRow' && child.type?.displayName !== 'TableDecoratorRow') {
+  const normalizedChildren = React.Children.toArray(children).map(child => {
+    if (/*#__PURE__*/React.isValidElement(child) && child.type !== TableSlugRow["default"] && child.type !== TableDecoratorRow["default"]) {
       return child;
     }
   });

package/lib/components/DataTable/TableHeader.js

@@ -17,6 +17,8 @@ var iconsReact = require('@carbon/icons-react');
 require('./state/sorting.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var sortStates = require('./state/sortStates.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -71,15 +73,13 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
 
   // AILabel is always size `mini`
   const AILableRef = React.useRef(null);
-  let colHasAILabel;
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    colHasAILabel = true;
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'mini',
-      ref: AILableRef
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
+  const colHasAILabel = candidateIsAILabel;
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini',
+    ref: AILableRef
+  }) : null;
   const headerLabelClassNames = cx__default["default"]({
     [`${prefix}--table-header-label`]: true,
     [`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,