@carbon/react 1.84.0-rc.0 → 1.85.0-rc.0

package/es/internal/useOverflowItems.js

@@ -0,0 +1,122 @@
+/**
+ * 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 { useRef, useState, useMemo, useEffect } from 'react';
+import { useResizeObserver } from './useResizeObserver.js';
+import { usePreviousValue } from './usePreviousValue.js';
+
+/**
+ * Manages overflow items in a container by automatically hiding items that don't fit.
+ * @param items - Array of items to manage for overflow, each must have an `id` property.
+ * @param containerRef - React ref to the container element that holds the items.
+ * @param offsetRef - Optional ref to an offset element (like a "more" button) whose width is reserved when calculating available space.
+ * @param maxItems - Optional maximum number of visible items. If undefined, only container space constrains visibility.
+ * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
+ * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
+ */
+
+const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) => {
+  const itemsRef = useRef(null);
+  const [maxWidth, setMaxWidth] = useState(0);
+  if (!items || !Array.isArray(items)) {
+    return {
+      visibleItems: [],
+      hiddenItems: [],
+      itemRefHandler: () => {}
+    };
+  }
+  const handleResize = () => {
+    if (containerRef.current) {
+      const offset = offsetRef?.current?.offsetWidth || 0;
+      const newMax = containerRef.current.offsetWidth - offset;
+      setMaxWidth(newMax);
+    }
+  };
+  useResizeObserver({
+    ref: containerRef,
+    onResize: handleResize
+  });
+  const getMap = () => {
+    if (!itemsRef.current) {
+      itemsRef.current = new Map();
+    }
+    return itemsRef.current;
+  };
+  const itemRefHandler = (id, node) => {
+    const map = getMap();
+    if (node) {
+      const style = getComputedStyle?.(node);
+      const totalWidth = node.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
+      map.set(id, totalWidth);
+    }
+    return () => {
+      map.delete(id);
+    };
+  };
+  const getVisibleItems = () => {
+    if (!items || Array.isArray(items) === false) {
+      return [];
+    }
+    if (!containerRef) {
+      return items;
+    }
+    const map = getMap();
+    let maxReached = false;
+    let accumulatedWidth = 0;
+    const visibleItems = items.slice(0, maxItems).reduce((prev, cur) => {
+      if (maxReached) {
+        return prev;
+      }
+      const itemWidth = map.get(cur.id) || 0;
+      const willFit = accumulatedWidth + itemWidth <= maxWidth;
+      if (willFit) {
+        accumulatedWidth += itemWidth;
+        prev.push(cur);
+      } else {
+        maxReached = true;
+      }
+      return prev;
+    }, []);
+    return visibleItems;
+  };
+
+  // Memoize visible items calculation to avoid recalculating on every render
+  const visibleItems = useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return getVisibleItems();
+  }, [items, maxWidth, maxItems]);
+
+  // Memoize hidden items calculation
+  const hiddenItems = useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return items.slice(visibleItems.length);
+  }, [items, visibleItems]);
+
+  // Use previous value to compare and only call onChange when needed
+  const previousHiddenItems = usePreviousValue(hiddenItems);
+
+  // Only call onChange if hidden items actually changed
+  useEffect(() => {
+    if (previousHiddenItems && onChange) {
+      const hasChanged = hiddenItems.length !== previousHiddenItems.length || hiddenItems.some((item, index) => item !== previousHiddenItems[index]);
+      if (hasChanged) {
+        onChange(hiddenItems);
+      }
+    }
+  }, [hiddenItems, previousHiddenItems, onChange]);
+  return {
+    visibleItems,
+    itemRefHandler,
+    hiddenItems
+  };
+};
+
+export { useOverflowItems as default };

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);
     }
   }
@@ -186,7 +191,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     target: oldActiveNode,
     relatedTarget: currentActiveNode
   }) {
-    if (open && currentActiveNode && oldActiveNode && innerModal.current) {
+    if (!enableDialogElement && !focusTrapWithoutSentinels && open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode
       } = innerModal;
@@ -205,6 +210,23 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
         selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
       });
     }
+
+    // Adjust scroll if needed so that element with focus is not obscured by gradient
+    const modalContent = document.querySelector(`.${prefix}--modal-content`);
+    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
+      return;
+    }
+    const lastContent = modalContent.children[modalContent.children.length - 1];
+    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
+    for (let elem of modalContent.children) {
+      if (elem.contains(currentActiveNode)) {
+        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
+        if (spaceBelow < gradientSpacing) {
+          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
+        }
+        break;
+      }
+    }
   }
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
@@ -247,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 => {
@@ -277,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,
@@ -319,7 +341,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onBlur: handleBlur,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,

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.