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

package/es/components/AILabel/index.js

@@ -27,7 +27,12 @@ const AILabelContent = /*#__PURE__*/React.forwardRef(function AILabelContent({
   const prefix = usePrefix();
   const hasAILabelActions = React.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(className, {
     [`${prefix}--ai-label-content`]: true,

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

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { cloneElement } from 'react';
 import cx from 'classnames';
 import '../Text/index.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -15,6 +15,8 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 const Checkbox = /*#__PURE__*/React.forwardRef(({
@@ -55,13 +57,11 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   const innerLabelClasses = cx(`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel
   });
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    const size = normalizedDecorator.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: candidate.props.kind === 'inline' ? 'md' : 'mini'
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React.createElement("input", _extends({}, other, {

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

@@ -7,12 +7,14 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { cloneElement } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 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';
 
 const CheckboxGroup = ({
   children,
@@ -49,13 +51,12 @@ const CheckboxGroup = ({
   });
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'mini',
-      kind: 'default'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'mini',
+    kind: 'default'
+  }) : null;
   return /*#__PURE__*/React.createElement("fieldset", _extends({
     className: fieldsetClasses,
     "data-invalid": invalid ? true : undefined,

package/es/components/CodeSnippet/CodeSnippet.js

@@ -15,7 +15,7 @@ import Copy from '../Copy/Copy.js';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import CopyButton from '../CopyButton/CopyButton.js';
-import { uniqueId } from '../../tools/uniqueId.js';
+import { useId } from '../../internal/useId.js';
 import copy from 'copy-to-clipboard';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -56,7 +56,7 @@ function CodeSnippet({
   const [shouldShowMoreLessBtn, setShouldShowMoreLessBtn] = useState(false);
   const {
     current: uid
-  } = useRef(uniqueId());
+  } = useRef(useId());
   const codeContentRef = useRef(null);
   const codeContainerRef = useRef(null);
   const innerCodeRef = useRef(null);
@@ -100,8 +100,6 @@ function CodeSnippet({
     setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
   }, [type, getCodeRefDimensions]);
   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/es/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/es/components/ComboBox/ComboBox.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import { useCombobox } from 'downshift';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef, useEffect, useState, useContext, useCallback, useMemo } from 'react';
+import React, { forwardRef, useRef, useEffect, useState, useContext, useCallback, useMemo, cloneElement } from 'react';
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import isEqual from 'react-fast-compare';
@@ -26,6 +26,8 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useFloating, flip, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 import { Text } from '../Text/Text.js';
 
@@ -437,12 +439,11 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const ItemToElement = itemToElement;
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'mini'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   const {
     // Prop getters
     getInputProps,

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

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, Children, cloneElement } from 'react';
 import { isElement } from 'react-is';
 import PropTypes from 'prop-types';
 import { Layer } from '../Layer/index.js';
@@ -26,6 +26,8 @@ import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { unstable__Dialog } from '../Dialog/index.js';
 import { warning } from '../../internal/warning.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 
 const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
@@ -168,7 +170,10 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     } = evt;
     const mouseDownTarget = onMouseDownTarget.current;
     evt.stopPropagation();
-    if (!preventCloseOnClickOutside && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
+    const containsModalFooter = Children.toArray(childrenWithProps).some(child => isComponentElement(child, ModalFooter));
+    const isPassive = !containsModalFooter;
+    const shouldCloseOnOutsideClick = isPassive ? preventCloseOnClickOutside !== false : preventCloseOnClickOutside === true;
+    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
       closeModal(evt);
     }
   }
@@ -176,7 +181,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     target: oldActiveNode,
     relatedTarget: currentActiveNode
   }) {
-    if (open && currentActiveNode && oldActiveNode && innerModal.current) {
+    if (!enableDialogElement && !focusTrapWithoutSentinels && open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode
       } = innerModal;
@@ -195,6 +200,23 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
         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) {
@@ -237,10 +259,10 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   useEffect(() => {
     if (!enableDialogElement && !open && launcherButtonRef) {
       setTimeout(() => {
-        launcherButtonRef?.current?.focus();
+        launcherButtonRef.current?.focus();
       });
     }
-  }, [open, launcherButtonRef]);
+  }, [enableDialogElement, open, launcherButtonRef]);
   useEffect(() => {
     if (!enableDialogElement) {
       const initialFocus = focusContainerElement => {
@@ -267,14 +289,14 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   }, [open, selectorPrimaryFocus, isOpen]);
 
   // AILabel is always size `sm`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'sm'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'sm'
+  }) : null;
   const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(unstable__Dialog, {
     open: open,
+    focusAfterCloseRef: launcherButtonRef,
     modal: true,
     className: containerClass,
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
@@ -309,7 +331,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onBlur: handleBlur,
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,

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

@@ -13,6 +13,8 @@ import { LayoutConstraint } from '../Layout/index.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import ContainedListItem from './ContainedListItem/ContainedListItem.js';
+import Search from '../Search/Search.js';
+import '../Search/Search.Skeleton.js';
 
 const variants = ['on-page', 'disclosed'];
 function filterChildren(children) {
@@ -27,13 +29,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) {
         return child;
       }
       return child;
     });
   }
-  if (children && children.type?.displayName === 'Search') {
+  if (children && children.type === Search) {
     return children;
   }
   return children;

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useContext, useState, useRef, Children, useEffect, cloneElement, isValidElement } from 'react';
+import React, { useContext, useState, useRef, Children, useEffect, isValidElement, cloneElement } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { LayoutConstraint } from '../Layout/index.js';
@@ -17,6 +17,8 @@ import { matches } from '../../internal/keyboard/match.js';
 import { getNextIndex } from '../../internal/keyboard/navigation.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
+import '../Switch/Switch.js';
+import IconSwitch from '../Switch/IconSwitch.js';
 
 const ContentSwitcher = ({
   children,
@@ -79,10 +81,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 = Children.map(children, child => {
+    return /*#__PURE__*/isValidElement(child) ? child.type === IconSwitch : null;
+  })?.every(val => val === true);
   const classes = cx(`${prefix}--content-switcher`, className, {
     [`${prefix}--content-switcher--light`]: light,
     [`${prefix}--content-switcher--${size}`]: size,

package/es/components/DataTable/DataTable.js

@@ -176,6 +176,7 @@ class DataTable extends Component {
       return {
         ...rest,
         key: row.id,
+        onClick,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
         onExpand: composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
@@ -298,6 +299,8 @@ class DataTable extends 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/es/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/es/components/DataTable/TableDecoratorRow.js

@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes from 'prop-types';
-import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { cloneElement } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 
 const TableDecoratorRow = ({
   className,
@@ -22,12 +24,10 @@ const TableDecoratorRow = ({
     [`${prefix}--table-column-decorator`]: true,
     [`${prefix}--table-column-decorator--active`]: decorator
   });
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(decorator) ? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'mini'
-    });
-  }
+  const decoratorIsAILabel = isComponentElement(decorator, AILabel);
+  const normalizedDecorator = decoratorIsAILabel ? /*#__PURE__*/cloneElement(decorator, {
+    size: 'mini'
+  }) : null;
   return /*#__PURE__*/React.createElement("td", {
     className: TableDecoratorRowClasses
   }, normalizedDecorator);

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

@@ -8,10 +8,14 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Children, isValidElement } from 'react';
 import { ChevronRight } from '@carbon/icons-react';
 import TableCell from './TableCell.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import TableSlugRow from './TableSlugRow.js';
+import TableDecoratorRow from './TableDecoratorRow.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 
 const TableExpandRow = /*#__PURE__*/React.forwardRef(({
   ['aria-controls']: ariaControls,
@@ -30,16 +34,21 @@ const TableExpandRow = /*#__PURE__*/React.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.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 = Children.toArray(children).map(child => {
+    if (isComponentElement(child, TableSlugRow)) {
+      if (child.props.slug) {
+        rowHasAILabel = true;
+      }
+      return child;
+    } else if (isComponentElement(child, TableDecoratorRow)) {
+      if (isComponentElement(child.props.decorator, AILabel)) {
         rowHasAILabel = true;
       }
       return child;
     }
   });
-  const normalizedChildren = React.Children.toArray(children).map(child => {
-    if (child.type?.displayName !== 'TableSlugRow' && child.type?.displayName !== 'TableDecoratorRow') {
+  const normalizedChildren = Children.toArray(children).map(child => {
+    if (/*#__PURE__*/isValidElement(child) && child.type !== TableSlugRow && child.type !== TableDecoratorRow) {
       return child;
     }
   });

package/es/components/DataTable/TableHeader.js

@@ -8,11 +8,13 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef } from 'react';
+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 { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { sortStates } from './state/sortStates.js';
 
 const defaultScope = 'col';
@@ -61,15 +63,13 @@ const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
 
   // AILabel is always size `mini`
   const AILableRef = useRef(null);
-  let colHasAILabel;
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    colHasAILabel = true;
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'mini',
-      ref: AILableRef
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const colHasAILabel = candidateIsAILabel;
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'mini',
+    ref: AILableRef
+  }) : null;
   const headerLabelClassNames = cx({
     [`${prefix}--table-header-label`]: true,
     [`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,

package/es/components/DataTable/TableRow.js

@@ -6,20 +6,28 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React from 'react';
+import React, { Children } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import TableSlugRow from './TableSlugRow.js';
+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) {
-    React.Children.toArray(props.children).map(child => {
-      if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
-        if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+    // 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;
       }
     });
   }

package/es/components/DataTable/tools/normalize.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { AILabel } from '../../AILabel/index.js';
 import { getCellId } from './cells.js';
 
 /**
@@ -59,7 +60,7 @@ const normalize = (rows, headers, prevState = {}) => {
         isEditing: false,
         isValid: true,
         errors: null,
-        hasAILabelHeader: !!(slug || decorator?.type?.displayName === 'AILabel'),
+        hasAILabelHeader: !!(slug || decorator?.type === AILabel),
         info: {
           header: key
         }

package/es/components/DatePickerInput/DatePickerInput.js

@@ -8,13 +8,15 @@
 import { WarningFilled, WarningAltFilled, Calendar } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, { useContext, cloneElement } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import '../Text/index.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(props, ref) {
@@ -99,12 +101,11 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
   const input = /*#__PURE__*/React.createElement("input", inputProps);
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'mini'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: containerClasses
   }, labelText && /*#__PURE__*/React.createElement(Text, {

package/es/components/Dialog/index.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 HTMLAttributes } from 'react';
+import React, { type HTMLAttributes, type RefObject } from 'react';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 /**
  * ----------
@@ -20,6 +20,10 @@ interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
      * Specify an optional className to be applied to the modal root node
      */
     className?: string;
+    /**
+     * Provide a ref to return focus to once the dialog is closed.
+     */
+    focusAfterCloseRef?: RefObject<HTMLElement | null>;
     /**
      * Specifies whether the dialog is modal or non-modal. This cannot be changed
      * while open=true