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

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,7 +20,14 @@ import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 import '../Tooltip/Tooltip.js';
 import AspectRatio from '../AspectRatio/AspectRatio.js';
 import { createOverflowHandler } from '@carbon/utilities';
-import { Tabs as Tabs$1 } from '../Tabs/Tabs.js';
+import Tag from '../Tag/Tag.js';
+import '../Tag/DismissibleTag.js';
+import OperationalTag from '../Tag/OperationalTag.js';
+import '../Tag/SelectableTag.js';
+import '../Tag/Tag.Skeleton.js';
+import useOverflowItems from '../../internal/useOverflowItems.js';
+import { Popover, PopoverContent } from '../Popover/index.js';
+import { useId } from '../../internal/useId.js';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -355,46 +362,101 @@ PageHeaderHeroImage.propTypes = {
 const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar({
   className,
   children,
+  tags = [],
   ...other
 }, ref) {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__tab-bar`]: true
   }, className);
+  // Early return if no tags are provided
+  if (!tags.length) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames,
+      ref: ref
+    }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+      lg: 16,
+      md: 8,
+      sm: 4
+    }, children)));
+  }
+  const [openPopover, setOpenPopover] = useState(false);
+  const tagSize = tags[0]?.size || 'md';
+  const instanceId = useId('PageHeaderTabBar');
+  const tagsWithIds = useMemo(() => {
+    return tags.map((tag, index) => ({
+      ...tag,
+      id: tag.id || `tag-${index}-${instanceId}`
+    }));
+  }, [tags]);
+  const tagsContainerRef = useRef(null);
+  const offsetRef = useRef(null);
+  // To close popover when window resizes
+  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(tagsWithIds, tagsContainerRef, offsetRef) || {
+    visibleItems: [],
+    hiddenItems: [],
+    itemRefHandler: () => {}
+  };
+  const handleOverflowClick = useCallback(event => {
+    event.stopPropagation();
+    setOpenPopover(prev => !prev);
+  }, []);
+
+  // Function to render tags
+  const renderTags = () => /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tags`,
+    ref: tagsContainerRef
+  }, visibleItems.map(tag => /*#__PURE__*/React.createElement(Tag, {
+    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.createElement(Popover, {
+    open: openPopover,
+    onRequestClose: () => setOpenPopover(false)
+  }, /*#__PURE__*/React.createElement(OperationalTag, {
+    onClick: handleOverflowClick,
+    "aria-expanded": openPopover,
+    text: `+${hiddenItems.length}`,
+    size: tagSize
+  }), /*#__PURE__*/React.createElement(PopoverContent, {
+    className: "tag-popover-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tags-popover-list`
+  }, hiddenItems.map(tag => /*#__PURE__*/React.createElement(Tag, {
+    key: tag.id,
+    type: tag.type,
+    size: tag.size
+  }, tag.text))))));
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), children);
-});
-PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTabs = /*#__PURE__*/React.forwardRef(function PageHeaderTabs({
-  className,
-  children,
-  ...other
-}, ref) {
-  const prefix = usePrefix();
-  const childrenArray = React.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.createElement(Tabs$1, other, tabListElement && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--page-header__tablist-wrapper`
-  }, /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+  }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
     lg: 16,
     md: 8,
     sm: 4
-  }, tabListElement))), otherChildren);
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tab-bar--tablist`
+  }, children, tags.length > 0 && renderTags()))));
 });
-PageHeaderTabs.displayName = 'PageHeaderTabs';
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
 
 /**
  * -------
@@ -408,14 +470,12 @@ 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';
 
-export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs };
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar };

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

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs } from './PageHeader.js';
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar } from './PageHeader.js';

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/Search/Search.js

@@ -134,7 +134,6 @@ const Search = /*#__PURE__*/React.forwardRef(function Search({
     "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React.createElement("div", {
-    "aria-label": onExpand ? 'button' : undefined,
     "aria-labelledby": onExpand ? searchId : undefined,
     role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,

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,

package/es/components/Slider/Slider.js

@@ -758,6 +758,9 @@ class Slider extends PureComponent {
           valueUpper,
           leftUpper
         });
+        if (this.filledTrackRef.current) {
+          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(${100 - this.state.leftUpper}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})` : `translate(${this.state.left}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})`;
+        }
       } else {
         const {
           value,
@@ -771,6 +774,9 @@ class Slider extends PureComponent {
           value,
           left
         });
+        if (this.filledTrackRef.current) {
+          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(100%, -50%) scaleX(-${this.state.left / 100})` : `translate(0%, -50%) scaleX(${this.state.left / 100})`;
+        }
       }
     }
   }

package/es/components/Tag/DismissibleTag.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 { PolymorphicProps } from '../../types/common';
 import { SIZES, TYPES } from './Tag';
 export interface DismissibleTagBaseProps {

package/es/components/Tag/DismissibleTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import React, { forwardRef, useRef, useState, useLayoutEffect, cloneElement } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -19,6 +19,8 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.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';
 
 var _Close;
@@ -54,13 +56,12 @@ const DismissibleTag = /*#__PURE__*/forwardRef(({
       onClose(event);
     }
   };
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'sm',
-      kind: 'inline'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'sm',
+    kind: 'inline'
+  }) : null;
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
 
   // Removing onClick from the spread operator

package/es/components/Tag/Tag.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 { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 import { SelectableTagBaseProps } from './SelectableTag';
 import { OperationalTagBaseProps } from './OperationalTag';

package/es/components/Tag/Tag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useLayoutEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect, cloneElement } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
@@ -18,6 +18,8 @@ import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 import '../Tooltip/Tooltip.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 var _Close;
@@ -94,13 +96,12 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
   };
 
   // AILabel is always size `sm` and `inline`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel' && !isInteractiveTag) {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'sm',
-      kind: 'inline'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel && !isInteractiveTag ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'sm',
+    kind: 'inline'
+  }) : null;
   if (filter) {
     const ComponentTag = BaseComponent ?? 'div';
     return /*#__PURE__*/React.createElement(ComponentTag, _extends({

package/es/components/TextArea/TextArea.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useContext, useRef, useState, useEffect, forwardRef } from 'react';
+import React, { useContext, useRef, useState, useEffect, forwardRef, cloneElement } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
@@ -20,6 +20,8 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 const frFn = forwardRef;
@@ -65,7 +67,7 @@ const TextArea = frFn((props, forwardRef) => {
     if (counterMode === 'character') {
       return strValue.length;
     } else {
-      return strValue.match(/\w+/g)?.length || 0;
+      return strValue.match(/\p{L}+/gu)?.length || 0;
     }
   }
   const [textCount, setTextCount] = useState(getInitialTextCount());
@@ -97,8 +99,8 @@ const TextArea = frFn((props, forwardRef) => {
     onPaste: evt => {
       if (!disabled) {
         if (counterMode === 'word' && enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
-          const existingWords = textareaRef.current.value.match(/\w+/g) || [];
-          const pastedWords = evt.clipboardData.getData('Text').match(/\w+/g) || [];
+          const existingWords = textareaRef.current.value.match(/\p{L}+/gu) || [];
+          const pastedWords = evt.clipboardData.getData('Text').match(/\p{L}+/gu) || [];
           const totalWords = existingWords.length + pastedWords.length;
           if (totalWords > maxCount) {
             evt.preventDefault();
@@ -127,7 +129,7 @@ const TextArea = frFn((props, forwardRef) => {
             return;
           }
           if (enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
-            const matchedWords = evt.target?.value?.match(/\w+/g);
+            const matchedWords = evt.target?.value?.match(/\p{L}+/gu);
             if (matchedWords && matchedWords.length <= maxCount) {
               textareaRef.current.removeAttribute('maxLength');
               setTimeout(() => {
@@ -258,12 +260,11 @@ const TextArea = frFn((props, forwardRef) => {
   }));
 
   // 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'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: formItemClasses
   }, /*#__PURE__*/React.createElement("div", {

package/es/components/TextInput/TextInput.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';
 type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
 export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**