@carbon/react 1.84.0 → 1.85.0-rc.0

package/es/components/Dropdown/Dropdown.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, { Ref, type HTMLAttributes, type ReactNode } from 'react';
+import React, { type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { UseSelectProps } from 'downshift';
 import { type ListBoxMenuIconTranslationKey, type ListBoxSize, type ListBoxType } from '../ListBox';
 import { TranslateWithId } from '../../types/common';

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useEffect, useContext, useCallback, useMemo, useState, isValidElement } from 'react';
+import React, { useEffect, useContext, useCallback, useMemo, useState, isValidElement, cloneElement } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -20,6 +20,8 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { useFloating, size, 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, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
@@ -308,15 +310,11 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   }), [autoAlign, getMenuProps, refs.setFloating, enableFloatingStyles]);
 
   // AILabel is always size `mini`
-  const normalizedDecorator = useMemo(() => {
-    let element = slug ?? decorator;
-    if (element && element['type']?.displayName === 'AILabel') {
-      return /*#__PURE__*/React.cloneElement(element, {
-        size: 'mini'
-      });
-    }
-    return /*#__PURE__*/React.isValidElement(element) ? element : null;
-  }, [slug, decorator]);
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   const allLabelProps = getLabelProps();
   const labelProps = /*#__PURE__*/isValidElement(titleText) ? {
     id: allLabelProps.id

package/es/components/FileUploader/FileUploaderButton.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
-import { uniqueId } from '../../tools/uniqueId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
@@ -39,7 +39,7 @@ function FileUploaderButton({
   const [prevOwnerLabelText, setPrevOwnerLabelText] = useState(ownerLabelText);
   const {
     current: inputId
-  } = useRef(id || uniqueId());
+  } = useRef(id || useId());
   const inputNode = useRef(null);
   const classes = cx(`${prefix}--btn`, className, {
     [`${prefix}--btn--${buttonKind}`]: buttonKind,

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
-import { uniqueId } from '../../tools/uniqueId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -36,7 +36,7 @@ function FileUploaderDropContainer({
   const inputRef = useRef(null);
   const {
     current: uid
-  } = useRef(id || uniqueId());
+  } = useRef(id || useId());
   const [isActive, setActive] = useState(false);
   const dropareaClasses = cx(`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,

package/es/components/FileUploader/FileUploaderItem.js

@@ -12,7 +12,7 @@ import React, { useRef, useState, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
-import { uniqueId } from '../../tools/uniqueId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
@@ -38,7 +38,7 @@ function FileUploaderItem({
   const prefix = usePrefix();
   const {
     current: id
-  } = useRef(uuid || uniqueId());
+  } = useRef(uuid || useId());
   const classes = cx(`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',

package/es/components/Layer/index.d.ts

@@ -35,7 +35,5 @@ export interface LayerBaseProps {
     withBackground?: boolean;
 }
 export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
-declare const Layer: React.ForwardRefExoticComponent<LayerBaseProps & {
-    as?: React.ElementType;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<any>>;
+declare const Layer: React.ForwardRefExoticComponent<Omit<LayerProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export { Layer };

package/es/components/Layer/index.js

@@ -25,14 +25,15 @@ function useLayer() {
     level
   };
 }
-const Layer = /*#__PURE__*/React.forwardRef(({
-  as,
-  className: customClassName,
-  children,
-  level: overrideLevel,
-  withBackground = false,
-  ...rest
-}, ref) => {
+const Layer = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as,
+    className: customClassName,
+    children,
+    level: overrideLevel,
+    withBackground = false,
+    ...rest
+  } = props;
   const contextLevel = React.useContext(LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix();

package/es/components/Menu/Menu.js

@@ -34,12 +34,6 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   open,
   size = 'sm',
   legacyAutoalign = 'true',
-  // 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-react-fc
-  */
   target = canUseDOM && document.body,
   x = 0,
   y = 0,

package/es/components/Modal/Modal.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, type ReactNode, type Ref } from 'react';
+import React, { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
@@ -57,7 +57,7 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide a ref to return focus to once the modal is closed.
      */
-    launcherButtonRef?: Ref<HTMLButtonElement>;
+    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
     /**
      * Specify the description for the loading text
      */

package/es/components/Modal/Modal.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, cloneElement } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { toggleClass } from '../../tools/toggleClass.js';
@@ -31,11 +31,14 @@ import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { unstable__Dialog } from '../Dialog/index.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { warning } from '../../internal/warning.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 import { Text } from '../Text/Text.js';
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
+const invalidOutsideClickMessage = '`Modal`: `preventCloseOnClickOutside` should not be `false` when `passiveModal` is `false`. Non-passive `Modal`s should not be dismissible by clicking outside.';
 const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   'aria-label': ariaLabelProp,
   children,
@@ -61,7 +64,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   size,
   hasScrollingContent = false,
   closeButtonLabel = 'Close',
-  preventCloseOnClickOutside = false,
+  preventCloseOnClickOutside = !passiveModal,
   isFullWidth,
   launcherButtonRef,
   loadingStatus = 'inactive',
@@ -92,6 +95,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   const enableDialogElement = useFeatureFlag('enable-dialog-element');
   process.env.NODE_ENV !== "production" ? warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
+  if (!passiveModal && preventCloseOnClickOutside === false) {
+    console.error(invalidOutsideClickMessage);
+  }
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -265,12 +271,11 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   }, []);
 
   // AILabel 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 modalButton = /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--modal-close-button`
   }, /*#__PURE__*/React.createElement(IconButton, {
@@ -292,6 +297,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   const isAlertDialog = alert && !passiveModal;
   const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(unstable__Dialog, {
     open: open,
+    focusAfterCloseRef: launcherButtonRef,
     modal: true,
     ref: innerModal,
     role: isAlertDialog ? 'alertdialog' : '',
@@ -538,7 +544,12 @@ Modal.propTypes = {
   /**
    * Prevent closing on click outside of modal
    */
-  preventCloseOnClickOutside: PropTypes.bool,
+  preventCloseOnClickOutside: (props, propName) => {
+    if (!props.passiveModal && props[propName] === false) {
+      return new Error(invalidOutsideClickMessage);
+    }
+    return null;
+  },
   /**
    * Specify whether the Button should be disabled, or not
    */

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
-import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
+import React, { type FunctionComponent, type ReactElement, type ReactNode } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { type ListBoxSize, type ListBoxType } from '../ListBox';
 import { TranslateWithId } from '../../types/common';

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useContext, useRef, useState, useLayoutEffect, useMemo, useEffect } from 'react';
+import React, { forwardRef, useContext, useRef, useState, useLayoutEffect, useMemo, useEffect, cloneElement } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -29,6 +29,8 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.js';
 import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
@@ -444,12 +446,11 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   }
 
   // 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 className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
     [`${prefix}--multi-select--invalid`]: invalid,
     [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { UseSelectProps } from 'downshift';
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { type ListBoxSize, type ListBoxType } from '../ListBox';
 import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React, { useMemo, useContext, useState, useLayoutEffect, isValidElement, useCallback } from 'react';
+import React, { useMemo, useContext, useState, useLayoutEffect, isValidElement, useCallback, cloneElement } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -29,6 +29,8 @@ import '../Checkbox/Checkbox.Skeleton.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { useFloating, flip, size, 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, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
@@ -409,12 +411,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   } : {};
 
   // 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 itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
   const selectedItemsLength = selectAll ? selectedItems.filter(item => !item.isSelectAll).length : selectedItems.length;
 

package/es/components/NumberInput/NumberInput.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, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { TranslateWithId } from '../../types/common';
 import { type NumberFormatOptions } from '@carbon/utilities';
 export declare const translationIds: {

package/es/components/NumberInput/NumberInput.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { Subtract, Add } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import React, { useContext, useState, useMemo, useCallback, useRef, useEffect, cloneElement } from 'react';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -23,6 +23,8 @@ import { NumberParser, NumberFormatter } from '@carbon/utilities';
 import { ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { NumberFormatOptionsPropType } from './NumberFormatPropTypes.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 var _Subtract, _Add;
@@ -262,16 +264,15 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
   };
 
   // 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;
 
   // Need to update the internal value when the revert button is clicked
   let isRevertActive;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+  if (normalizedDecorator?.type === AILabel) {
     isRevertActive = normalizedDecorator.props.revertActive;
   }
   useEffect(() => {

package/es/components/PageHeader/PageHeader.js

@@ -470,9 +470,9 @@ BreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
 const Content = PageHeaderContent;
 Content.displayName = 'PageHeaderContent';
 const ContentPageActions = PageHeaderContentPageActions;
-Content.displayName = 'PageHeaderContentPageActions';
+ContentPageActions.displayName = 'PageHeaderContentPageActions';
 const ContentText = PageHeaderContentText;
-Content.displayName = 'PageHeaderContentText';
+ContentText.displayName = 'PageHeaderContentText';
 const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;

package/es/components/Popover/index.js

@@ -17,6 +17,7 @@ import { useWindowEvent } from '../../internal/useEvent.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 import { useFloating, offset, flip, arrow, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { ToggletipButton } from '../Toggletip/index.js';
 
 const PopoverContext = /*#__PURE__*/React.createContext({
   setFloating: {
@@ -226,7 +227,7 @@ forwardRef) {
           // For a toggletip there is a specific trigger component, ToggletipButton.
           // In either of these cases we want to set this as the reference node for floating-ui autoAlign
           // positioning.
-          if (enableFloatingStyles && item?.type?.displayName !== 'PopoverContent' || enableFloatingStyles && item?.type?.displayName === 'ToggletipButton') {
+          if (enableFloatingStyles && item?.type !== PopoverContent || enableFloatingStyles && item?.type === ToggletipButton) {
             // Set the reference element for floating-ui
             refs.setReference(node);
           }

package/es/components/RadioButton/RadioButton.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 = 'onChange';
 export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**

package/es/components/RadioButton/RadioButton.js

@@ -7,13 +7,15 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useRef } from 'react';
+import React, { useRef, cloneElement } from 'react';
 import cx from 'classnames';
 import '../Text/index.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -47,13 +49,11 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     [`${prefix}--radio-button-wrapper--decorator`]: decorator
   });
   const inputRef = useRef(null);
-  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({}, rest, {

package/es/components/RadioButtonGroup/RadioButtonGroup.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';
 import type { RadioButtonProps } from '../RadioButton';
 export declare const RadioButtonGroupContext: React.Context<null>;
 type ExcludedAttributes = 'onChange';

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, cloneElement } from 'react';
 import cx from 'classnames';
 import { Legend } from '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -15,6 +15,8 @@ import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import deprecate from '../../prop-types/deprecate.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { useId } from '../../internal/useId.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 
 const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -103,13 +105,12 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const divRef = useRef(null);
 
   // AILabel is 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("div", {
     className: wrapperClasses,
     ref: mergeRefs(divRef, ref)

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

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { RadioButtonChecked, RadioButton, CheckmarkFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { cloneElement } from 'react';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { useFallbackId } from '../../internal/useId.js';
@@ -18,6 +18,8 @@ import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;
@@ -72,12 +74,11 @@ const RadioTile = /*#__PURE__*/React.forwardRef(function RadioTile({
   }
 
   // AILabel is always size `xs`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'xs'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'xs'
+  }) : null;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
     checked: checked,
     className: `${prefix}--tile-input`,

package/es/components/Select/Select.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, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
+import React, { type ChangeEventHandler, type ComponentPropsWithRef, type ReactNode } from 'react';
 type ExcludedAttributes = 'size';
 export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
     /**

package/es/components/Select/Select.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, cloneElement } from 'react';
 import cx from 'classnames';
 import { ChevronDown, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import deprecate from '../../prop-types/deprecate.js';
@@ -17,6 +17,8 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import '../Text/index.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 const Select = /*#__PURE__*/React.forwardRef(function Select({
@@ -134,12 +136,11 @@ const Select = /*#__PURE__*/React.forwardRef(function Select({
   };
 
   // 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 input = (() => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("select", _extends({}, other, ariaProps, {
       id: id,