@carbon/react 1.101.0 → 1.102.0

package/lib/components/Modal/Modal.js

@@ -162,7 +162,6 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     const {
       target
     } = evt;
-    evt.stopPropagation();
     const shouldCloseOnOutsideClick =
     // Passive modals can close on clicks outside the modal when
     // preventCloseOnClickOutside is undefined or explicitly set to false.

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -222,7 +222,6 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     item => !item.disabled);
 
     // Sort only non-select-all items, select-all item must stay at the top
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
     const sortedReal = sortItems(nonSelectAllItems, {
       selectedItems: {
         top: controlledSelectedItems,
@@ -315,6 +314,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   React.useEffect(() => {
     const handleClickOutside = event => {
       const target = event.target;
+      if (!(target instanceof Node)) return;
       const wrapper = document.getElementById(id)?.closest(`.${prefix}--multi-select__wrapper`);
 
       // If click is outside our component and menu is open or input is focused
@@ -616,10 +616,11 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
-    ref: autoAlign ? refs.setFloating : null
+    ref: autoAlign ? refs.setFloating : null,
+    hidden: !isOpen
   }, {
     suppressRefError: true
-  }), [autoAlign, getMenuProps, refs.setFloating]);
+  }), [autoAlign, getMenuProps, isOpen, refs.setFloating]);
   const handleFocus = evt => {
     if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
       setIsFocused(false);

package/lib/components/MultiSelect/MultiSelect.js

@@ -426,8 +426,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
-    ref: enableFloatingStyles ? refs.setFloating : null
-  }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
+    ref: enableFloatingStyles ? refs.setFloating : null,
+    hidden: !isOpen
+  }), [enableFloatingStyles, getMenuProps, isOpen, refs.setFloating]);
   const allLabelProps = getLabelProps();
   const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
     id: allLabelProps.id
@@ -474,9 +475,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   }, selectedItems.length > 0 && /*#__PURE__*/React.createElement(index$2.default.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
-    selectionCount: selectedItemsLength
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
+    selectionCount: selectedItemsLength,
     translateWithId: translateWithId,
     disabled: disabled
   }), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
@@ -495,9 +494,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     translateWithId: translateWithId
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen &&
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
-  sortItems(filteredItems, sortOptions).map((item, index) => {
+  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const {
       hasIndividualSelections,
       nonSelectAllSelectedCount,

package/lib/components/MultiSelect/MultiSelectPropTypes.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -34,17 +34,15 @@ export declare const sortingPropTypes: {
      */
     sortItems: PropTypes.Requireable<(...args: any[]) => any>;
 };
-interface DownshiftTypedProps<ItemType> {
-    itemToString?(item: ItemType): string;
-}
 interface SharedOptions {
     locale: string;
 }
-interface CompareItems {
-    (itemA: string, itemB: string, options: SharedOptions): number;
-}
-export interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
+export type CompareItems = (itemA: string, itemB: string, options: {
+    locale: string;
+}) => number;
+export interface SortItemsOptions<ItemType> extends SharedOptions {
     compareItems: CompareItems;
+    itemToString: (item: ItemType) => string;
     selectedItems: ItemType[];
 }
 export interface MultiSelectSortingProps<ItemType> {

package/lib/components/MultiSelect/tools/sorting.d.ts

@@ -1,9 +1,16 @@
-export function defaultCompareItems(itemA: string, itemB: string, { locale }: {
-    locale: string;
-}): number;
-export function defaultSortItems(items: any, { selectedItems, itemToString, compareItems, locale }: {
-    selectedItems?: never[] | undefined;
-    itemToString: any;
-    compareItems: any;
-    locale?: string | undefined;
-}): any;
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * 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 type { CompareItems, SortItemsOptions } from '../MultiSelectPropTypes';
+/**
+ * Use `localeCompare` with the `numeric` option enabled to sort two
+ * alphanumeric strings.
+ */
+export declare const defaultCompareItems: CompareItems;
+/**
+ * Default sorting function for options in a selection control.
+ */
+export declare const defaultSortItems: <T>(items: T[], { selectedItems, itemToString, compareItems, locale }: SortItemsOptions<T>) => T[];

package/lib/components/MultiSelect/tools/sorting.js

@@ -7,16 +7,11 @@
 
 'use strict';
 
+const isSelectAllItem = item => typeof item === 'object' && item !== null && 'isSelectAll' in item;
+
 /**
- * Use the locale `localeCompare` with the `numeric` option to sort two
- * alpha-numeric strings.
- *
- * @param {string} itemA - The first string to compare.
- * @param {string} itemB - The second string to compare.
- * @param {object} options - Options for comparing.
- * @param {string} options.locale - The locale to use for comparison.
- * @returns {number} A negative number if itemA comes before itemB, a positive
- *   number if itemA comes after itemB, or 0 if they are equal.
+ * Use `localeCompare` with the `numeric` option enabled to sort two
+ * alphanumeric strings.
  */
 const defaultCompareItems = (itemA, itemB, {
   locale
@@ -25,18 +20,19 @@ const defaultCompareItems = (itemA, itemB, {
 });
 
 /**
- * Default sorting algorithm for options in a selection control
+ * Default sorting function for options in a selection control.
  */
 const defaultSortItems = (items, {
-  selectedItems = [],
+  selectedItems,
   itemToString,
   compareItems,
-  locale = 'en'
+  locale
 }) => {
+  // TODO: Should this util mutate items or should that be avoided?
   return items.sort((itemA, itemB) => {
     // Always place "select all" option at the beginning
-    if (itemA.isSelectAll) return -1;
-    if (itemB.isSelectAll) return 1;
+    if (isSelectAllItem(itemA) && itemA.isSelectAll) return -1;
+    if (isSelectAllItem(itemB) && itemB.isSelectAll) return 1;
     const hasItemA = selectedItems.includes(itemA);
     const hasItemB = selectedItems.includes(itemB);
     if (hasItemA && !hasItemB) return -1;

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -259,6 +259,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
     const focusinEventName = hasFocusin ? 'focusin' : 'focus';
     hFocusIn.current = on(menuBody.ownerDocument, focusinEventName, event => {
       const target = event.target;
+      if (!(target instanceof Element)) return;
       const triggerEl = triggerRef.current;
       if (typeof target.matches === 'function') {
         if (!menuBody.contains(target) && triggerEl && !target.matches(`.${prefix}--overflow-menu:first-child, .${prefix}--overflow-menu-options:first-child`)) {

package/lib/components/OverflowMenuItem/OverflowMenuItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -14,6 +14,10 @@ export interface OverflowMenuItemProps extends React.HTMLAttributes<HTMLElement>
      * A callback to tell the parent menu component that the menu should be closed.
      */
     closeMenu?: () => void;
+    /**
+     * Specify the message read by screen readers for the danger overflow menu item variant
+     */
+    dangerDescription?: string;
     /**
      * `true` to make this menu item disabled.
      */

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -19,12 +19,14 @@ var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
 var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
+var useId = require('../../internal/useId.js');
 
 const frFn = React.forwardRef;
 const OverflowMenuItem = frFn((props, ref) => {
   const {
     className,
     closeMenu,
+    dangerDescription = 'danger',
     disabled = false,
     handleOverflowMenuItemFocus,
     hasDivider = false,
@@ -68,13 +70,17 @@ const OverflowMenuItem = frFn((props, ref) => {
     [`${prefix}--overflow-menu-options__option--disabled`]: disabled
   }, wrapperClassName);
   const TagToUse = href ? 'a' : 'button';
+  const assistiveId = useId.useId('danger-description');
   const OverflowMenuItemContent = (() => {
     if (typeof itemText !== 'string') {
       return itemText;
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--overflow-menu-options__option-content`
-    }, itemText);
+    }, itemText), isDelete && /*#__PURE__*/React.createElement("span", {
+      id: assistiveId,
+      className: `${prefix}--visually-hidden`
+    }, dangerDescription));
   })();
   return /*#__PURE__*/React.createElement(Text.Text, {
     as: "li",
@@ -114,6 +120,10 @@ OverflowMenuItem.propTypes = {
    * A callback to tell the parent menu component that the menu should be closed.
    */
   closeMenu: PropTypes.func,
+  /**
+   * Specify the message read by screen readers for the danger overflow menu item variant
+   */
+  dangerDescription: PropTypes.string,
   /**
    * `true` to make this menu item disabled.
    */

package/lib/components/Popover/index.js

@@ -162,7 +162,8 @@ forwardRef) {
     // Middleware order matters, arrow should be last
     middleware: [react.offset(!isTabTip ? {
       alignmentAxis: alignmentAxisOffset,
-      mainAxis: popoverDimensions?.current?.offset
+      // Use 4px spacing when no caret, otherwise use the caret offset
+      mainAxis: caret ? popoverDimensions?.current?.offset : 4
     } : 0), autoAlign && react.flip({
       fallbackPlacements: isTabTip ? align.includes('bottom') ? ['bottom-start', 'bottom-end', 'top-start', 'top-end'] : ['top-start', 'top-end', 'bottom-start', 'bottom-end'] : align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
       fallbackStrategy: 'initialPlacement',
@@ -299,10 +300,9 @@ forwardRef) {
       return item;
     }
   });
-  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
     value: value
-  }, /*#__PURE__*/React.createElement(BaseComponentAsAny, _rollupPluginBabelHelpers.extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(BaseComponent, _rollupPluginBabelHelpers.extends({}, rest, {
     className: className,
     ref: ref
   }), enableFloatingStyles || isTabTip ? mappedChildren : children));

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -182,7 +182,7 @@ function ProgressStep({
     }),
     disabled: disabled,
     "aria-disabled": disabled,
-    tabIndex: !current && onClick && !disabled ? 0 : -1,
+    tabIndex: disabled ? -1 : 0,
     onClick: !current ? onClick : undefined,
     onKeyDown: handleKeyDown,
     title: label
@@ -195,10 +195,10 @@ function ProgressStep({
   }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--progress-text`
   }, /*#__PURE__*/React.createElement(Text.Text, {
-    as: "p",
+    as: "span",
     className: `${prefix}--progress-label`
   }, label), secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React.createElement(Text.Text, {
-    as: "p",
+    as: "span",
     className: `${prefix}--progress-optional`
   }, secondaryLabel) : null), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--assistive-text`

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/RadioButtonGroup/RadioButtonGroup.js

@@ -47,17 +47,14 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const prefix = usePrefix.usePrefix();
   const [selected, setSelected] = React.useState(valueSelected ?? defaultSelected);
-  const [prevValueSelected, setPrevValueSelected] = React.useState(valueSelected);
+  const prevValueSelected = React.useRef(valueSelected);
   const radioButtonGroupInstanceId = useId.useId();
-
-  /**
-   * prop + state alignment - getDerivedStateFromProps
-   * only update if selected prop changes
-   */
-  if (valueSelected !== prevValueSelected) {
-    setSelected(valueSelected);
-    setPrevValueSelected(valueSelected);
-  }
+  React.useEffect(() => {
+    if (valueSelected !== prevValueSelected.current) {
+      setSelected(valueSelected);
+      prevValueSelected.current = valueSelected;
+    }
+  }, [valueSelected]);
   function getRadioButtons() {
     const mappedChildren = React.Children.map(children, radioButton => {
       if (!radioButton) {

package/lib/components/Search/Search.js

@@ -26,6 +26,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
+var utils = require('./utils.js');
 
 var _Close;
 const Search = /*#__PURE__*/React.forwardRef(({
@@ -51,7 +52,7 @@ const Search = /*#__PURE__*/React.forwardRef(({
   value,
   ...rest
 }, forwardRef) => {
-  const hasPropValue = Boolean(value || defaultValue);
+  const hasPropValue = utils.isSearchValuePresent(value) || utils.isSearchValuePresent(defaultValue);
   const prefix = usePrefix.usePrefix();
   const {
     isFluid
@@ -78,7 +79,7 @@ const Search = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--search-close--hidden`]: !hasContent || !isExpanded
   });
   if (value !== prevValue) {
-    setHasContent(!!value);
+    setHasContent(utils.isSearchValuePresent(value));
     setPrevValue(value);
   }
   function clearInput() {

package/lib/components/Search/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 declare const isSearchValuePresent: (value: string | number | undefined) => boolean;

package/lib/components/Search/utils.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const isSearchValuePresent = value => value !== '' && typeof value !== 'undefined';
+
+exports.isSearchValuePresent = isSearchValuePresent;

package/lib/components/Select/Select.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 ChangeEventHandler, type ComponentPropsWithRef, type ReactNode } from 'react';
+import React, { type ChangeEventHandler, type ComponentPropsWithRef, type ReactNode, type SelectHTMLAttributes } from 'react';
 type ExcludedAttributes = 'size';
 export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
     /**
@@ -22,7 +22,7 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, Exclu
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */

package/lib/components/Select/Select.js

@@ -38,7 +38,7 @@ const Select = /*#__PURE__*/React.forwardRef(({
   hideLabel = false,
   invalid = false,
   invalidText = '',
-  helperText = '',
+  helperText,
   light = false,
   readOnly,
   size,

package/lib/components/SelectItem/SelectItem.d.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes, type OptionHTMLAttributes } from 'react';
 export interface SelectItemProps extends HTMLAttributes<HTMLOptionElement> {
     /**
      * Specify an optional className to be applied to the node
@@ -26,7 +26,7 @@ export interface SelectItemProps extends HTMLAttributes<HTMLOptionElement> {
     /**
      * Specify the value of the <SelectItem>
      */
-    value: any;
+    value: OptionHTMLAttributes<HTMLOptionElement>['value'];
 }
 declare const SelectItem: {
     ({ className, value, disabled, hidden, text, ...other }: SelectItemProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/Slider/Slider.js

@@ -998,14 +998,8 @@ const Slider = props => {
     delete other.onRelease;
     delete other.invalid;
     delete other.unstable_valueUpper;
-    const showWarning = normalizedProps.warn ||
-    // TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
-    // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
-    typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
-    const showWarningUpper = normalizedUpperProps.warn ||
-    // TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
-    // eslint-disable-next-line valid-typeof, no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
-    typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
+    const showWarning = normalizedProps.warn || correctedPosition === HandlePosition.LOWER && isValid;
+    const showWarningUpper = normalizedUpperProps.warn || correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
     return /*#__PURE__*/React.createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx(`${prefix}--label`, {

package/lib/components/StructuredList/StructuredList.js

@@ -152,8 +152,8 @@ function StructuredListRow(props) {
     ...other
   } = props;
   const [hasFocusWithin, setHasFocusWithin] = React.useState(false);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const rowId = id ?? useId.useId('grid-input');
+  const generatedRowId = useId.useId('grid-input');
+  const rowId = id ?? generatedRowId;
   const selectedRow = React.useContext(GridSelectedRowStateContext);
   const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
   const prefix = usePrefix.usePrefix();

package/lib/components/Tabs/Tabs.js

@@ -850,8 +850,8 @@ const Tab = /*#__PURE__*/React.forwardRef(({
     if (tabRef.current && tabRef.current.parentElement) {
       // determine number of tabs, excluding disabled
       const tabCount = Array.from(tabRef.current.parentElement.childNodes).filter(node => {
-        const element = node;
-        return element.classList.contains(`${prefix}--tabs__nav-link`) && !element.classList.contains(`${prefix}--tabs__nav-item--disabled`);
+        if (!(node instanceof HTMLElement)) return false;
+        return node.classList.contains(`${prefix}--tabs__nav-link`) && !node.classList.contains(`${prefix}--tabs__nav-item--disabled`);
       }).length;
 
       // if not removing last tab focus on next tab
@@ -861,7 +861,10 @@ const Tab = /*#__PURE__*/React.forwardRef(({
       // if removing last tab focus on previous tab
       else {
         const prevTabIndex = (tabCount - 2) * 2;
-        tabRef.current.parentElement.childNodes[prevTabIndex]?.focus();
+        const previousTab = tabRef.current.parentElement.childNodes[prevTabIndex];
+        if (previousTab instanceof HTMLElement) {
+          previousTab.focus();
+        }
       }
     }
   };
@@ -1162,7 +1165,9 @@ function TabPanels({
       // set max height to TabList
       const heights = refs.current.map(ref => ref?.offsetHeight || 0);
       const max = Math.max(...heights);
-      tabContainer.style.height = max + 'px';
+      if (tabContainer instanceof HTMLElement) {
+        tabContainer.style.height = max + 'px';
+      }
 
       // re-hide hidden Tab Panels
       refs.current.forEach((ref, index) => {

package/lib/components/Tag/DismissibleTag.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/Tag/DismissibleTag.js

@@ -49,8 +49,8 @@ const DismissibleTag = /*#__PURE__*/React.forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix.usePrefix();
   const tagLabelRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId.useId()}`;
+  const generatedTagId = useId.useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   useIsomorphicEffect.default(() => {

package/lib/components/Tag/OperationalTag.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/Tag/OperationalTag.js

@@ -49,8 +49,8 @@ const OperationalTag = /*#__PURE__*/React.forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix.usePrefix();
   const tagRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId.useId()}`;
+  const generatedTagId = useId.useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   useIsomorphicEffect.default(() => {

package/lib/components/Tag/SelectableTag.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/Tag/SelectableTag.js

@@ -41,8 +41,8 @@ const SelectableTag = /*#__PURE__*/React.forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix.usePrefix();
   const tagRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId.useId()}`;
+  const generatedTagId = useId.useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const [selectedTag, setSelectedTag] = useControllableState.useControllableState({
     value: selected,
     onChange: onChange,

package/lib/components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/Tag/Tag.js

@@ -78,8 +78,8 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
     console.warn('The `onClose` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
   }
   const ref = useMergedRefs.useMergedRefs([forwardRef, tagRef]);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId.useId()}`;
+  const generatedTagId = useId.useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   useIsomorphicEffect.default(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];

package/lib/components/TextArea/TextArea.d.ts

@@ -7,8 +7,7 @@
 import React, { type ReactNode } from 'react';
 export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
-     * Provide a custom className that is applied directly to the underlying
-     * `<textarea>` node
+     * Provide a custom className that is applied to the wrapper node
      */
     className?: string;
     /**

package/lib/components/TextArea/TextArea.js

@@ -42,7 +42,7 @@ const TextArea = frFn((props, forwardRef) => {
     onKeyDown = noopFn.noopFn,
     invalid = false,
     invalidText = '',
-    helperText = '',
+    helperText,
     light,
     placeholder = '',
     enableCounter = false,
@@ -243,7 +243,7 @@ const TextArea = frFn((props, forwardRef) => {
     ariaDescribedBy = warnId;
   } else {
     const ids = [];
-    if (!isFluid && helperText && helperId) ids.push(helperId);
+    if (!isFluid && hasHelper && helperId) ids.push(helperId);
     if (counterDescriptionId) ids.push(counterDescriptionId);
     ariaDescribedBy = ids.length > 0 ? ids.join(' ') : undefined;
   }
@@ -282,7 +282,7 @@ const TextArea = frFn((props, forwardRef) => {
   }, [ariaAnnouncement, prevAnnouncement, counterMode]);
   const input = /*#__PURE__*/React.createElement("textarea", _rollupPluginBabelHelpers.extends({}, other, textareaProps, {
     placeholder: placeholder,
-    "aria-readonly": Boolean(other.readOnly),
+    "aria-readonly": other.readOnly,
     className: textareaClasses,
     "aria-invalid": invalid,
     "aria-describedby": ariaDescribedBy,
@@ -328,8 +328,7 @@ const TextArea = frFn((props, forwardRef) => {
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {
   /**
-   * Provide a custom className that is applied directly to the underlying
-   * `<textarea>` node
+   * Provide a custom className that is applied to the wrapper node
    */
   className: PropTypes.string,
   /**