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

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 }; }
@@ -260,6 +262,27 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       onMenuChange?.(isOpen);
     }
   }, [isOpen, onMenuChange, open]);
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      const target = event.target;
+      const wrapper = document.getElementById(id)?.closest(`.${prefix}--multi-select__wrapper`);
+
+      // If click is outside our component and menu is open or input is focused
+      if (wrapper && !wrapper.contains(target)) {
+        if (isOpen || inputFocused) {
+          setIsOpen(false);
+          setInputFocused(false);
+          setInputValue('');
+        }
+      }
+    };
+    if (inputFocused || isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, inputFocused]);
   const {
     getToggleButtonProps,
     getLabelProps,
@@ -435,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,
@@ -560,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,
@@ -616,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,
@@ -634,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/OverflowMenu/OverflowMenu.js

@@ -154,14 +154,14 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
       setHasMountedTrigger(true);
     }
   }, []);
-
-  // Call `onClose` when menu closes.
   React.useEffect(() => {
-    if (!open && prevOpenState.current) {
+    if (open && !prevOpenState.current) {
+      onOpen();
+    } else if (!open && prevOpenState.current) {
       onClose();
     }
     prevOpenState.current = open;
-  }, [open, onClose]);
+  }, [open, onClose, onOpen]);
   useOutsideClick.useOutsideClick(wrapperRef, ({
     target
   }) => {
@@ -270,7 +270,6 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
         }
       }
     }, !hasFocusin);
-    onOpen();
   };
   const getTarget = () => {
     const triggerEl = triggerRef.current;

package/lib/components/PageHeader/PageHeader.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Tabs as BaseTabs } from '../Tabs/Tabs';
+import { TYPES } from '../Tag/Tag';
 /**
  * ----------
  * PageHeader
@@ -199,16 +199,18 @@ declare const PageHeaderHeroImage: {
  * PageHeaderTabBar
  * ----------------
  */
+interface TagItem {
+    type: keyof typeof TYPES;
+    text: string;
+    size?: 'sm' | 'md' | 'lg';
+    id: string;
+}
 interface PageHeaderTabBarProps {
     children?: React.ReactNode;
     className?: string;
+    tags?: TagItem[];
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-interface PageHeaderTabsProps extends React.ComponentProps<typeof BaseTabs> {
-    children?: React.ReactNode;
-    className?: string;
-}
-declare const PageHeaderTabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * -------
  * Exports
@@ -272,6 +274,5 @@ declare const HeroImage: {
     };
 };
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-declare const Tabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, Tabs, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderTabsProps, };
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };

package/lib/components/PageHeader/PageHeader.js

@@ -24,7 +24,14 @@ var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 require('../Tooltip/Tooltip.js');
 var AspectRatio = require('../AspectRatio/AspectRatio.js');
 var utilities = require('@carbon/utilities');
-var Tabs$1 = require('../Tabs/Tabs.js');
+var Tag = require('../Tag/Tag.js');
+require('../Tag/DismissibleTag.js');
+var OperationalTag = require('../Tag/OperationalTag.js');
+require('../Tag/SelectableTag.js');
+require('../Tag/Tag.Skeleton.js');
+var useOverflowItems = require('../../internal/useOverflowItems.js');
+var index$1 = require('../Popover/index.js');
+var useId = require('../../internal/useId.js');
 require('../Grid/FlexGrid.js');
 var Grid = require('../Grid/Grid.js');
 require('../Grid/Row.js');
@@ -365,46 +372,101 @@ PageHeaderHeroImage.propTypes = {
 const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabBar({
   className,
   children,
+  tags = [],
   ...other
 }, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__tab-bar`]: true
   }, className);
+  // Early return if no tags are provided
+  if (!tags.length) {
+    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+      className: classNames,
+      ref: ref
+    }, other), /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
+      lg: 16,
+      md: 8,
+      sm: 4
+    }, children)));
+  }
+  const [openPopover, setOpenPopover] = React.useState(false);
+  const tagSize = tags[0]?.size || 'md';
+  const instanceId = useId.useId('PageHeaderTabBar');
+  const tagsWithIds = React.useMemo(() => {
+    return tags.map((tag, index) => ({
+      ...tag,
+      id: tag.id || `tag-${index}-${instanceId}`
+    }));
+  }, [tags]);
+  const tagsContainerRef = React.useRef(null);
+  const offsetRef = React.useRef(null);
+  // To close popover when window resizes
+  React.useEffect(() => {
+    const handleResize = () => {
+      // Close the popover when window resizes to prevent unwanted opens
+      setOpenPopover(false);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // overflow items hook
+  const {
+    visibleItems = [],
+    hiddenItems = [],
+    itemRefHandler = () => {}
+  } = useOverflowItems["default"](tagsWithIds, tagsContainerRef, offsetRef) || {
+    visibleItems: [],
+    hiddenItems: [],
+    itemRefHandler: () => {}
+  };
+  const handleOverflowClick = React.useCallback(event => {
+    event.stopPropagation();
+    setOpenPopover(prev => !prev);
+  }, []);
+
+  // Function to render tags
+  const renderTags = () => /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tags`,
+    ref: tagsContainerRef
+  }, visibleItems.map(tag => /*#__PURE__*/React__default["default"].createElement(Tag["default"], {
+    key: tag.id,
+    ref: node => itemRefHandler(tag.id, node),
+    type: tag.type,
+    size: tag.size,
+    className: `${prefix}--page-header__tag-item`
+  }, tag.text)), hiddenItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$1.Popover, {
+    open: openPopover,
+    onRequestClose: () => setOpenPopover(false)
+  }, /*#__PURE__*/React__default["default"].createElement(OperationalTag["default"], {
+    onClick: handleOverflowClick,
+    "aria-expanded": openPopover,
+    text: `+${hiddenItems.length}`,
+    size: tagSize
+  }), /*#__PURE__*/React__default["default"].createElement(index$1.PopoverContent, {
+    className: "tag-popover-content"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tags-popover-list`
+  }, hiddenItems.map(tag => /*#__PURE__*/React__default["default"].createElement(Tag["default"], {
+    key: tag.id,
+    type: tag.type,
+    size: tag.size
+  }, tag.text))))));
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, other), children);
-});
-PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTabs = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabs({
-  className,
-  children,
-  ...other
-}, ref) {
-  const prefix = usePrefix.usePrefix();
-  const childrenArray = React__default["default"].Children.toArray(children);
-  let tabListElement = null;
-  const otherChildren = [];
-
-  // extract the TabList component so we can wrap a needed div around for
-  // layout purposes
-  childrenArray.forEach(child => {
-    if (child?.type?.displayName === 'TabList' || child?.type?.name === 'TabList') {
-      tabListElement = child;
-    } else {
-      otherChildren.push(child);
-    }
-  });
-  return /*#__PURE__*/React__default["default"].createElement(Tabs$1.Tabs, other, tabListElement && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--page-header__tablist-wrapper`
-  }, /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
+  }, other), /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
     lg: 16,
     md: 8,
     sm: 4
-  }, tabListElement))), otherChildren);
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tab-bar--tablist`
+  }, children, tags.length > 0 && renderTags()))));
 });
-PageHeaderTabs.displayName = 'PageHeaderTabs';
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
 
 /**
  * -------
@@ -418,15 +480,13 @@ 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;
 TabBar.displayName = 'PageHeaderTabBar';
-const Tabs = PageHeaderTabs;
-Tabs.displayName = 'PageHeader.Tabs';
 
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.Content = Content;
@@ -440,7 +500,5 @@ exports.PageHeaderContentPageActions = PageHeaderContentPageActions;
 exports.PageHeaderContentText = PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeaderTabBar;
-exports.PageHeaderTabs = PageHeaderTabs;
 exports.Root = Root;
 exports.TabBar = TabBar;
-exports.Tabs = Tabs;

package/lib/components/PageHeader/index.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, Tabs, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderTabsProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';

package/lib/components/PageHeader/index.js

@@ -25,7 +25,5 @@ exports.PageHeaderContentPageActions = PageHeader.PageHeaderContentPageActions;
 exports.PageHeaderContentText = PageHeader.PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeader.PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeader.PageHeaderTabBar;
-exports.PageHeaderTabs = PageHeader.PageHeaderTabs;
 exports.Root = PageHeader.Root;
 exports.TabBar = PageHeader.TabBar;
-exports.Tabs = PageHeader.Tabs;

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, {

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

@@ -13,12 +13,14 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var index = require('../Text/index.js');
+var index$1 = require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var deprecate = require('../../prop-types/deprecate.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var useId = require('../../internal/useId.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -113,13 +115,12 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
   const divRef = React.useRef(null);
 
   // AILabel is always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'mini',
-      kind: 'default'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini',
+    kind: 'default'
+  }) : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses,
     ref: mergeRefs["default"](divRef, ref)
@@ -128,7 +129,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
     disabled: disabled,
     "data-invalid": invalid ? true : undefined,
     "aria-describedby": showHelper && helperText ? helperId : undefined
-  }, rest), legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
+  }, rest), legendText && /*#__PURE__*/React__default["default"].createElement(index$1.Legend, {
     className: `${prefix}--label`
   }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--radio-button-group-inner--decorator`

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

@@ -22,6 +22,8 @@ var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
+var index$1 = 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 }; }
@@ -82,12 +84,11 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
   }
 
   // AILabel is always size `xs`
-  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: 'xs'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'xs'
+  }) : null;
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
     checked: checked,
     className: `${prefix}--tile-input`,