@carbon/react 1.101.0 → 1.102.0-rc.0

package/es/components/Menu/MenuItem.js

@@ -69,7 +69,7 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
   const context = useContext(MenuContext);
   const menuItem = useRef(null);
   const ref = useMergedRefs([forwardRef, menuItem, refs.setReference]);
-  const hasChildren = Boolean(children);
+  const hasChildren = React.Children.toArray(children).length > 0;
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
   function registerItem() {
@@ -77,7 +77,7 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
       type: 'registerItem',
       payload: {
         ref: menuItem,
-        disabled: Boolean(disabled)
+        disabled: disabled ?? false
       }
     });
   }

package/es/components/Modal/Modal.js

@@ -158,7 +158,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/es/components/MultiSelect/FilterableMultiSelect.js

@@ -220,7 +220,6 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     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,
@@ -313,6 +312,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   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
@@ -614,10 +614,11 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = 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/es/components/MultiSelect/MultiSelect.js

@@ -424,8 +424,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = 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__*/isValidElement(titleText) ? {
     id: allLabelProps.id
@@ -472,9 +473,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   }, selectedItems.length > 0 && /*#__PURE__*/React.createElement(ListBox.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn,
-    selectionCount: selectedItemsLength
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
+    selectionCount: selectedItemsLength,
     translateWithId: translateWithId,
     disabled: disabled
   }), /*#__PURE__*/React.createElement("button", _extends({
@@ -493,9 +492,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(ListBox.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(ListBox.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const {
       hasIndividualSelections,
       nonSelectAllSelectedCount,

package/es/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/es/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/es/components/MultiSelect/tools/sorting.js

@@ -5,16 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+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
@@ -23,18 +18,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/es/components/OverflowMenu/OverflowMenu.js

@@ -255,6 +255,7 @@ const OverflowMenu = /*#__PURE__*/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/es/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/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -15,12 +15,14 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { warning } from '../../internal/warning.js';
 import { Text } from '../Text/Text.js';
 import '../Text/TextDirection.js';
+import { useId } from '../../internal/useId.js';
 
 const frFn = forwardRef;
 const OverflowMenuItem = frFn((props, ref) => {
   const {
     className,
     closeMenu,
+    dangerDescription = 'danger',
     disabled = false,
     handleOverflowMenuItemFocus,
     hasDivider = false,
@@ -64,13 +66,17 @@ const OverflowMenuItem = frFn((props, ref) => {
     [`${prefix}--overflow-menu-options__option--disabled`]: disabled
   }, wrapperClassName);
   const TagToUse = href ? 'a' : 'button';
+  const assistiveId = 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, {
     as: "li",
@@ -110,6 +116,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/es/components/Popover/index.js

@@ -160,7 +160,8 @@ forwardRef) {
     // Middleware order matters, arrow should be last
     middleware: [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 && 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',
@@ -297,10 +298,9 @@ forwardRef) {
       return item;
     }
   });
-  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
     value: value
-  }, /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
     className: className,
     ref: ref
   }), enableFloatingStyles || isTabTip ? mappedChildren : children));

package/es/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/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, cloneElement } from 'react';
+import React, { useState, useRef, useEffect, cloneElement } from 'react';
 import cx from 'classnames';
 import { Legend } from '../Text/createTextComponent.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -43,17 +43,14 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const prefix = usePrefix();
   const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
-  const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
+  const prevValueSelected = useRef(valueSelected);
   const radioButtonGroupInstanceId = useId();
-
-  /**
-   * prop + state alignment - getDerivedStateFromProps
-   * only update if selected prop changes
-   */
-  if (valueSelected !== prevValueSelected) {
-    setSelected(valueSelected);
-    setPrevValueSelected(valueSelected);
-  }
+  useEffect(() => {
+    if (valueSelected !== prevValueSelected.current) {
+      setSelected(valueSelected);
+      prevValueSelected.current = valueSelected;
+    }
+  }, [valueSelected]);
   function getRadioButtons() {
     const mappedChildren = React.Children.map(children, radioButton => {
       if (!radioButton) {

package/es/components/Search/Search.js

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

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

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+const isSearchValuePresent = value => value !== '' && typeof value !== 'undefined';
+
+export { isSearchValuePresent };

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

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

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

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

package/es/components/Tabs/Tabs.js

@@ -848,8 +848,8 @@ const Tab = /*#__PURE__*/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
@@ -859,7 +859,10 @@ const Tab = /*#__PURE__*/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();
+        }
       }
     }
   };
@@ -1160,7 +1163,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/es/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/es/components/Tag/DismissibleTag.js

@@ -45,8 +45,8 @@ const DismissibleTag = /*#__PURE__*/forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix();
   const tagLabelRef = 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()}`;
+  const generatedTagId = useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useIsomorphicEffect(() => {

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

@@ -45,8 +45,8 @@ const OperationalTag = /*#__PURE__*/forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix();
   const tagRef = 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()}`;
+  const generatedTagId = useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useIsomorphicEffect(() => {

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

@@ -37,8 +37,8 @@ const SelectableTag = /*#__PURE__*/forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix();
   const tagRef = 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()}`;
+  const generatedTagId = useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const [selectedTag, setSelectedTag] = useControllableState({
     value: selected,
     onChange: onChange,

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

@@ -74,8 +74,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([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()}`;
+  const generatedTagId = useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];

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

@@ -38,7 +38,7 @@ const TextArea = frFn((props, forwardRef) => {
     onKeyDown = noopFn,
     invalid = false,
     invalidText = '',
-    helperText = '',
+    helperText,
     light,
     placeholder = '',
     enableCounter = false,
@@ -239,7 +239,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;
   }
@@ -278,7 +278,7 @@ const TextArea = frFn((props, forwardRef) => {
   }, [ariaAnnouncement, prevAnnouncement, counterMode]);
   const input = /*#__PURE__*/React.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
-    "aria-readonly": Boolean(other.readOnly),
+    "aria-readonly": other.readOnly,
     className: textareaClasses,
     "aria-invalid": invalid,
     "aria-describedby": ariaDescribedBy,
@@ -324,8 +324,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,
   /**

package/es/components/TextInput/ControlledPasswordInput.js

@@ -27,7 +27,7 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
   hideLabel,
   invalid = false,
   invalidText = '',
-  helperText = '',
+  helperText,
   light,
   type = 'password',
   togglePasswordVisibility,