@carbon/react 1.84.0 → 1.85.0-rc.0

package/lib/components/Dropdown/Dropdown.js

@@ -15,7 +15,7 @@ var Downshift = require('downshift');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
-var index$1 = require('../ListBox/index.js');
+var index$2 = require('../ListBox/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -24,6 +24,8 @@ var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -318,15 +320,11 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
   }), [autoAlign, getMenuProps, refs.setFloating, enableFloatingStyles]);
 
   // AILabel is always size `mini`
-  const normalizedDecorator = React.useMemo(() => {
-    let element = slug ?? decorator;
-    if (element && element['type']?.displayName === 'AILabel') {
-      return /*#__PURE__*/React__default["default"].cloneElement(element, {
-        size: 'mini'
-      });
-    }
-    return /*#__PURE__*/React__default["default"].isValidElement(element) ? element : null;
-  }, [slug, decorator]);
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   const allLabelProps = getLabelProps();
   const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
     id: allLabelProps.id
@@ -335,7 +333,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+  }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index$2["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     size: size,
@@ -366,19 +364,19 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
     ref: mergedRef
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--list-box__label`
-  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
+  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$2["default"].MenuIcon, {
     isOpen: isOpen,
     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 && items.map((item, index) => {
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$2["default"].Menu, menuProps, isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
       index
     });
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
-    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/FileUploader/FileUploaderButton.js

@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
@@ -49,7 +49,7 @@ function FileUploaderButton({
   const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);
   const {
     current: inputId
-  } = React.useRef(id || uniqueId.uniqueId());
+  } = React.useRef(id || useId.useId());
   const inputNode = React.useRef(null);
   const classes = cx__default["default"](`${prefix}--btn`, className, {
     [`${prefix}--btn--${buttonKind}`]: buttonKind,

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -46,7 +46,7 @@ function FileUploaderDropContainer({
   const inputRef = React.useRef(null);
   const {
     current: uid
-  } = React.useRef(id || uniqueId.uniqueId());
+  } = React.useRef(id || useId.useId());
   const [isActive, setActive] = React.useState(false);
   const dropareaClasses = cx__default["default"](`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,

package/lib/components/FileUploader/FileUploaderItem.js

@@ -16,7 +16,7 @@ var React = require('react');
 var Filename = require('./Filename.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
@@ -48,7 +48,7 @@ function FileUploaderItem({
   const prefix = usePrefix.usePrefix();
   const {
     current: id
-  } = React.useRef(uuid || uniqueId.uniqueId());
+  } = React.useRef(uuid || useId.useId());
   const classes = cx__default["default"](`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',

package/lib/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/lib/components/Layer/index.js

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

package/lib/components/Menu/Menu.js

@@ -44,12 +44,6 @@ const Menu = /*#__PURE__*/React.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 = environment.canUseDOM && document.body,
   x = 0,
   y = 0,

package/lib/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/lib/components/Modal/Modal.js

@@ -19,7 +19,7 @@ var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var InlineLoading = require('../InlineLoading/InlineLoading.js');
-var index$3 = require('../Layer/index.js');
+var index$4 = require('../Layer/index.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
@@ -28,13 +28,15 @@ var usePrefix = require('../../internal/usePrefix.js');
 var usePreviousValue = require('../../internal/usePreviousValue.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var index$2 = require('../IconButton/index.js');
+var index$3 = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index$1 = require('../Dialog/index.js');
+var index$2 = require('../Dialog/index.js');
+var index$1 = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var warning = require('../../internal/warning.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 var Text = require('../Text/Text.js');
@@ -46,6 +48,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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__default["default"].forwardRef(function Modal({
   'aria-label': ariaLabelProp,
   children,
@@ -71,7 +74,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
   size,
   hasScrollingContent = false,
   closeButtonLabel = 'Close',
-  preventCloseOnClickOutside = false,
+  preventCloseOnClickOutside = !passiveModal,
   isFullWidth,
   launcherButtonRef,
   loadingStatus = 'inactive',
@@ -102,6 +105,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
   const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   const enableDialogElement = index.useFeatureFlag('enable-dialog-element');
   process.env.NODE_ENV !== "production" ? warning.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);
   }
@@ -275,15 +281,14 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
   }, []);
 
   // AILabel 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 candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'sm'
+  }) : null;
   const modalButton = /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default["default"].createElement(index$2.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index$3.IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
@@ -300,8 +305,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
   // alertdialog is the only permitted aria role for a native dialog element
   // https://www.w3.org/TR/html-aria/#docconformance:~:text=Role%3A-,alertdialog,-.%20(dialog%20is
   const isAlertDialog = alert && !passiveModal;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$1.unstable__Dialog, {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$2.unstable__Dialog, {
     open: open,
+    focusAfterCloseRef: launcherButtonRef,
     modal: true,
     ref: innerModal,
     role: isAlertDialog ? 'alertdialog' : '',
@@ -322,7 +328,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     className: `${prefix}--modal--inner__decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default["default"].createElement(index$2.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index$3.IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
@@ -334,7 +340,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     "aria-hidden": "true",
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
-  })))), /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({
+  })))), /*#__PURE__*/React__default["default"].createElement(index$4.Layer, _rollupPluginBabelHelpers["extends"]({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -390,7 +396,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     className: `${prefix}--modal-header__heading`
   }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({
+  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$4.Layer, _rollupPluginBabelHelpers["extends"]({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -427,7 +433,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"));
-  return /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(index$4.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
     level: 0,
     onKeyDown: handleKeyDown,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
@@ -548,7 +554,12 @@ Modal.propTypes = {
   /**
    * Prevent closing on click outside of modal
    */
-  preventCloseOnClickOutside: PropTypes__default["default"].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/lib/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/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -18,7 +18,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var filter = require('../ComboBox/tools/filter.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
-var index = require('../ListBox/index.js');
+var index$1 = 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');
@@ -33,6 +33,8 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var Selection = require('../../internal/Selection.js');
 var react = require('@floating-ui/react');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -456,12 +458,11 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   }
 
   // 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.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   const className = cx__default["default"](`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
     [`${prefix}--multi-select--invalid`]: invalid,
     [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
@@ -581,7 +582,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     className: titleClasses
   }, labelProps), titleText, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--visually-hidden`
-  }, clearSelectionContent)) : null, /*#__PURE__*/React__default["default"].createElement(index["default"], {
+  }, clearSelectionContent)) : null, /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     className: className,
@@ -637,7 +638,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     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["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index$1) => {
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const itemProps = getItemProps({
       item,
@@ -655,11 +656,11 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       // eslint-disable-line @typescript-eslint/no-unused-vars
       ...modifiedItemProps
     } = itemProps;
-    return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       "aria-label": itemText,
       isActive: isChecked,
-      isHighlighted: highlightedIndex === index$1,
+      isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: disabled
     }, modifiedItemProps), /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/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/lib/components/MultiSelect/MultiSelect.js

@@ -16,7 +16,7 @@ var Downshift = require('downshift');
 var isEqual = require('react-fast-compare');
 var PropTypes = require('prop-types');
 var React = require('react');
-var index$1 = require('../ListBox/index.js');
+var index$2 = require('../ListBox/index.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var sorting = require('./tools/sorting.js');
 var Selection = require('../../internal/Selection.js');
@@ -33,6 +33,8 @@ require('../Checkbox/Checkbox.Skeleton.js');
 var noopFn = require('../../internal/noopFn.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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -420,12 +422,11 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
   } : {};
 
   // 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 itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
   const selectedItemsLength = selectAll ? selectedItems.filter(item => !item.isSelectAll).length : selectedItems.length;
 
@@ -453,7 +454,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
     className: titleClasses
   }, labelProps), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+  }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(index$2["default"], {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     type: type,
@@ -474,7 +475,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: multiSelectFieldWrapperClasses,
     ref: enableFloatingStyles ? refs.setReference : null
-  }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$1["default"].Selection, {
+  }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$2["default"].Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
     selectionCount: selectedItemsLength
@@ -493,12 +494,12 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
   }, readOnlyEventHandlers), /*#__PURE__*/React__default["default"].createElement("span", {
     id: fieldLabelId,
     className: `${prefix}--list-box__label`
-  }, label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
+  }, label), /*#__PURE__*/React__default["default"].createElement(index$2["default"].MenuIcon, {
     isOpen: isOpen,
     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 && sortItems(filteredItems, sortOptions).map((item, index) => {
+  }, normalizedDecorator) : ''), /*#__PURE__*/React__default["default"].createElement(index$2["default"].Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const {
       hasIndividualSelections,
@@ -513,7 +514,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
       ['aria-selected']: isChecked
     });
     const itemText = itemToString(item);
-    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: isChecked && !item['isSelectAll'],
       "aria-label": itemText,

package/lib/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/lib/components/NumberInput/NumberInput.js

@@ -27,6 +27,8 @@ var utilities = require('@carbon/utilities');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var NumberFormatPropTypes = require('./NumberFormatPropTypes.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 }; }
@@ -272,16 +274,15 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
   };
 
   // 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.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.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 === index.AILabel) {
     isRevertActive = normalizedDecorator.props.revertActive;
   }
   React.useEffect(() => {

package/lib/components/PageHeader/PageHeader.js

@@ -480,9 +480,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/lib/components/Popover/index.js

@@ -21,6 +21,7 @@ var useEvent = require('../../internal/useEvent.js');
 var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
+var index$1 = require('../Toggletip/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -236,7 +237,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 === index$1.ToggletipButton) {
             // Set the reference element for floating-ui
             refs.setReference(node);
           }

package/lib/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/lib/components/RadioButton/RadioButton.js

@@ -18,6 +18,8 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.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 }; }
@@ -57,13 +59,11 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
     [`${prefix}--radio-button-wrapper--decorator`]: decorator
   });
   const inputRef = React.useRef(null);
-  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"]({}, rest, {