@carbon/react 1.100.0 → 1.101.0-rc.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useEffect, cloneElement } from 'react';
+import React, { forwardRef, useContext, useRef, useState, useMemo, useCallback, useEffect, cloneElement } from 'react';
 import { defaultFilterItems } from './filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -34,6 +34,7 @@ import { AILabel } from '../AILabel/index.js';
 import { defaultItemToString } from '../../internal/defaultItemToString.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { ListBoxTypePropType, ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
@@ -189,7 +190,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     }), hide()],
     whileElementsMounted: autoUpdate
   } : {});
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (autoAlign) {
       const updatedFloatingStyles = {
         ...floatingStyles,
@@ -259,7 +260,8 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     [`${prefix}--list-box__wrapper--decorator`]: decorator,
     [`${prefix}--autoalign`]: autoAlign
   });
-  const helperId = !helperText ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
   const labelId = `${id}-label`;
   const titleClasses = cx({
     [`${prefix}--label`]: true,
@@ -275,10 +277,10 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     [`${prefix}--text-input--empty`]: !inputValue,
     [`${prefix}--text-input--light`]: light
   });
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: helperClasses
-  }, helperText) : null;
+  }, helperText);
   const menuId = `${id}__menu`;
   const inputId = `${id}-input`;
   useEffect(() => {

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React, { useMemo, useContext, useState, useLayoutEffect, useRef, isValidElement, useCallback, cloneElement } from 'react';
+import React, { useMemo, useContext, useState, useRef, isValidElement, useCallback, cloneElement } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -33,6 +33,7 @@ import { AILabel } from '../AILabel/index.js';
 import { defaultItemToString } from '../../internal/defaultItemToString.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { ListBoxTypePropType, ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
@@ -143,7 +144,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     }), autoAlign && hide()],
     whileElementsMounted: autoUpdate
   } : {});
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
@@ -386,8 +387,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
   });
   const handleFocus = evt => {
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    evt.target.classList.contains(`${prefix}--tag__close-icon`) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
+    if (evt.target.classList.contains(`${prefix}--tag__close-icon`)) {
+      setIsFocused(false);
+    } else {
+      setIsFocused(evt.type === 'focus' ? true : false);
+    }
   };
   const readOnlyEventHandlers = readOnly ? {
     onClick: evt => {

package/es/components/Notification/Notification.js

@@ -572,7 +572,8 @@ function ActionableNotification({
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), /*#__PURE__*/React.createElement("div", {
-    ref: innerModal
+    ref: innerModal,
+    className: `${prefix}--actionable-notification__focus-wrapper`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React.createElement(NotificationIcon, {

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

@@ -564,10 +564,11 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     onKeyUp: onKeyUp,
     onKeyDown: e => {
       if (type === 'text') {
-        // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-        match(e, ArrowUp) && handleStep(e, 'up');
-        // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-        match(e, ArrowDown) && handleStep(e, 'down');
+        if (match(e, ArrowUp)) {
+          handleStep(e, 'up');
+        } else if (match(e, ArrowDown)) {
+          handleStep(e, 'down');
+        }
       }
       if (rest?.onKeyDown) {
         rest?.onKeyDown(e);

package/es/components/OverflowMenu/OverflowMenu.d.ts

@@ -44,6 +44,7 @@ export interface OverflowMenuProps extends Omit<IconButtonProps, 'type' | 'aria-
      */
     flipped?: boolean;
     /**
+     * @deprecated Tab key is handled with event handler so no need for focus trap.
      * Enable or disable focus trap behavior
      */
     focusTrap?: boolean;

package/es/components/OverflowMenu/OverflowMenu.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
 import { DIRECTION_TOP, DIRECTION_BOTTOM, FloatingMenu } from '../../internal/FloatingMenu.js';
-import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
+import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape, Tab } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
@@ -97,7 +97,7 @@ const OverflowMenu = /*#__PURE__*/forwardRef(({
   className,
   direction = DIRECTION_BOTTOM,
   flipped = false,
-  focusTrap = true,
+  focusTrap = false,
   iconClass,
   iconDescription = 'Options',
   id,
@@ -200,12 +200,15 @@ const OverflowMenu = /*#__PURE__*/forwardRef(({
       evt.preventDefault();
     }
 
-    // Close the overflow menu on escape
-    if (matches(evt, [Escape])) {
+    // Close the overflow menu on escape or tab.
+    if (matches(evt, [Escape, Tab])) {
       closeMenuOnEscape();
 
       // Stop the esc keypress from bubbling out and closing something it shouldn't
       evt.stopPropagation();
+
+      // Stop the tab key from making the browser focus somewhere else.
+      evt.preventDefault();
     }
   };
 
@@ -390,6 +393,7 @@ OverflowMenu.propTypes = {
    */
   flipped: PropTypes.bool,
   /**
+   * @deprecated Tab key is handled with event handler so no need for focus trap.
    * Enable or disable focus trap behavior
    */
   focusTrap: PropTypes.bool,

package/es/components/PageHeader/PageHeader.d.ts

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

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useLayoutEffect, useMemo, useEffect, useCallback } from 'react';
+import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -35,6 +35,7 @@ import '../Grid/Row.js';
 import Column from '../Grid/Column.js';
 import '../Grid/ColumnHang.js';
 import '../Grid/GridContext.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 /**
  * ----------
@@ -130,9 +131,8 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(({
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
     return element.offsetHeight < element.scrollHeight;
   };
-  useLayoutEffect(() => {
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    titleRef.current && isEllipsisActive(titleRef.current);
+  useIsomorphicEffect(() => {
+    if (titleRef.current) isEllipsisActive(titleRef.current);
   }, [title]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
@@ -220,7 +220,7 @@ const PageHeaderContentPageActions = ({
 
   // need to set the grid columns width based on the menu button's width
   // to avoid overlapping when resizing
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (menuButtonVisibility && offsetRef.current) {
       const width = offsetRef.current.offsetWidth;
       document.documentElement.style.setProperty('--pageheader-title-grid-width', `${width}px`);

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -97,11 +97,12 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const helperClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const helperId = !helperText ? undefined : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
+  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: helperClasses
-  }, helperText) : null;
+  }, helperText);
   const divRef = useRef(null);
 
   // AILabel is always size `mini`

package/es/components/Select/Select.js

@@ -94,7 +94,8 @@ const Select = /*#__PURE__*/forwardRef(({
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
   });
-  const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helper = hasHelper ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: normalizedProps.helperId,
     className: helperTextClasses

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

@@ -184,8 +184,7 @@ function StructuredListRow(props) {
     ref: itemRef,
     onClick: event => {
       setSelectedRow?.(rowId);
-      // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-      onClick && onClick(event);
+      onClick?.(event);
       if (selection) {
         // focus items only when selection is enabled
         setHasFocusWithin(true);
@@ -264,8 +263,7 @@ function StructuredListInput(props) {
     value: row?.id ?? '',
     onChange: event => {
       setSelectedRow?.(event.target.value);
-      // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-      onChange && onChange(event);
+      onChange?.(event);
     },
     id: id ?? defaultId,
     className: classes,

package/es/components/Tabs/Tabs.d.ts

@@ -1,11 +1,11 @@
 /**
- * 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.
  */
 import PropTypes from 'prop-types';
-import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ComponentType, type HTMLElementType } from 'react';
+import React, { type ComponentType, type HTMLAttributes, type HTMLElementType, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
 type DivAttributes = HTMLAttributes<HTMLDivElement>;
 /**
  * Tabs

package/es/components/Tabs/Tabs.js

@@ -10,14 +10,13 @@ import { Close, ChevronLeft, ChevronRight } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { forwardRef, createContext, useRef, useState, useMemo, isValidElement, useCallback, useEffect } from 'react';
+import React, { forwardRef, createContext, useRef, useState, useMemo, isValidElement, Children, cloneElement, useCallback, useEffect } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
 import '../Grid/Column.js';
 import '../Grid/ColumnHang.js';
 import '../Grid/GridContext.js';
-import { isElement } from 'react-is';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { useControllableState } from '../../internal/useControllableState.js';
@@ -34,6 +33,7 @@ import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import { Text } from '../Text/Text.js';
 import '../Text/TextDirection.js';
 import { BadgeIndicator } from '../BadgeIndicator/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
 
 var _ChevronLeft, _ChevronRight, _BadgeIndicator;
@@ -269,14 +269,7 @@ function TabList({
   const nextButton = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
   const [scrollLeft, setScrollLeft] = useState(0);
-  let hasSecondaryLabelTabs = false;
-  if (contained) {
-    hasSecondaryLabelTabs = React.Children.toArray(children).some(child => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-      const _child = child;
-      return /*#__PURE__*/React.isValidElement(child) && !!_child.props.secondaryLabel;
-    });
-  }
+  const hasSecondaryLabelTabs = contained && Children.toArray(children).some(child => isComponentElement(child, Tab) && typeof child.props.secondaryLabel !== 'undefined');
   const isLg = useMatchMedia(lgMediaQuery);
   const distributeWidth = fullWidth && contained && isLg && React.Children.toArray(children).length < 9;
   const className = cx(`${prefix}--tabs`, {
@@ -487,17 +480,16 @@ function TabList({
     onScroll: debouncedOnScroll,
     onKeyDown: onKeyDown,
     onBlur: handleBlur
-  }), React.Children.map(children, (child, index) => {
-    return !isElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
+  }), Children.map(children, (child, index) => {
+    return ! /*#__PURE__*/isValidElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
       value: {
         index,
         hasSecondaryLabel: hasSecondaryLabelTabs,
         contained
       }
-    }, /*#__PURE__*/React.cloneElement(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-    child, {
+    }, /*#__PURE__*/cloneElement(child, {
       ref: node => {
+        if (!node) return;
         tabs.current[index] = node;
       }
     }));
@@ -641,8 +633,7 @@ function TabListVertical({
       if (containerTop && containerHeight) {
         // scrolls so selected tab is in view
         if (selectedPositionTop - halfTabHeight < containerTop || selectedPositionTop - containerTop + verticalTabHeight + halfTabHeight > containerHeight) {
-          // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-          ref.current && ref.current.scrollTo({
+          ref.current?.scrollTo({
             top: (selectedIndex - 1) * verticalTabHeight,
             behavior: 'smooth'
           });
@@ -690,16 +681,15 @@ function TabListVertical({
     className: `${prefix}--tab--list`,
     onKeyDown: onKeyDown,
     onBlur: handleBlur
-  }), React.Children.map(children, (child, index) => {
-    return !isElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
+  }), Children.map(children, (child, index) => {
+    return ! /*#__PURE__*/isValidElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
       value: {
         index,
         hasSecondaryLabel: false
       }
-    }, /*#__PURE__*/React.cloneElement(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-    child, {
+    }, /*#__PURE__*/cloneElement(child, {
       ref: node => {
+        if (!node) return;
         tabs.current[index] = node;
       }
     }));
@@ -1045,7 +1035,11 @@ const IconTab = /*#__PURE__*/React.forwardRef(({
   const value = useMemo(() => ({
     badgeIndicator
   }), [badgeIndicator]);
-  const hasSize20 = /*#__PURE__*/isValidElement(children) && children.props.size === 20;
+  const hasSize20 = /*#__PURE__*/isValidElement(children) &&
+  // TODO: The interface allows `size` to be a string. Should this case be
+  // handled here, or should the prop type be restricted to `number`
+  // instead?
+  children.props.size === 20;
   const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName, {
     [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20
   });
@@ -1176,10 +1170,10 @@ function TabPanels({
       });
     }
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(children, (child, index) => {
-    return !isElement(child) ? null : /*#__PURE__*/React.createElement(TabPanelContext.Provider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, Children.map(children, (child, index) => {
+    return ! /*#__PURE__*/isValidElement(child) ? null : /*#__PURE__*/React.createElement(TabPanelContext.Provider, {
       value: index
-    }, /*#__PURE__*/React.cloneElement(child, {
+    }, /*#__PURE__*/cloneElement(child, {
       ref: element => {
         refs.current[index] = element;
       }

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, cloneElement } from 'react';
+import React, { forwardRef, useRef, useState, cloneElement } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -22,6 +22,7 @@ import { isEllipsisActive } from './isEllipsisActive.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 var _Close;
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
@@ -48,7 +49,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef(({
   const tagId = id || `tag-${useId()}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagLabelRef]);

package/es/components/Tag/OperationalTag.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 } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -18,6 +18,7 @@ import { Text } from '../Text/Text.js';
 import '../Text/TextDirection.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 const TYPES = {
   red: 'Red',
@@ -48,7 +49,7 @@ const OperationalTag = /*#__PURE__*/forwardRef(({
   const tagId = id || `tag-${useId()}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);

package/es/components/Tag/SelectableTag.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 } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -19,6 +19,7 @@ import '../Text/TextDirection.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
 import { useControllableState } from '../../internal/useControllableState.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const SelectableTag = /*#__PURE__*/forwardRef(({
@@ -47,7 +48,7 @@ const SelectableTag = /*#__PURE__*/forwardRef(({
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);

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, cloneElement } from 'react';
+import React, { useRef, useState, cloneElement } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
@@ -21,6 +21,7 @@ import { isEllipsisActive } from './isEllipsisActive.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 var _Close;
 const TYPES = {
@@ -76,7 +77,7 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
   // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const tagId = id || `tag-${useId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);

package/es/components/TextArea/TextArea.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ReactNode } from 'react';
-export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Provide a custom className that is applied directly to the underlying
      * `<textarea>` node

package/es/components/TextArea/TextArea.js

@@ -193,24 +193,25 @@ const TextArea = frFn((props, forwardRef) => {
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React.createElement(Text, {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement(Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     className: counterClasses,
     "aria-hidden": "true"
   }, `${textCount}/${maxCount}`) : null;
   const counterDescriptionId = enableCounter && maxCount ? `${id}-counter-desc` : undefined;
-  const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
+  const helper = hasHelper && /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: helperId,
     className: helperTextClasses,
     ref: helperTextRef
-  }, helperText) : null;
+  }, helperText);
   const errorId = id + '-error-msg';
   const error = invalid ? /*#__PURE__*/React.createElement(Text, {
     as: "div",

package/es/components/TextInput/ControlledPasswordInput.js

@@ -71,10 +71,10 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React.createElement("label", {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   const error = invalid ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-requirement`,
     id: errorId
@@ -89,12 +89,13 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
-  const helperId = !helperText ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
   const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, getTextInputProps({
     invalid,
     sharedTextInputProps,
     invalidId: errorId,
-    hasHelper: !error && helperText ? true : false,
+    hasHelper: !error && hasHelper,
     helperId
   }), {
     "data-toggle-password-visibility": type === 'password'
@@ -105,10 +106,10 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--assistive-text`
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: helperTextClasses
-  }, helperText) : null;
+  }, helperText);
   return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-item ${prefix}--text-input-wrapper ${prefix}--password-input-wrapper`
   }, label, /*#__PURE__*/React.createElement("div", {

package/es/components/TextInput/PasswordInput.js

@@ -61,8 +61,7 @@ const PasswordInput = /*#__PURE__*/forwardRef(({
   } = useContext(FormContext);
   const handleTogglePasswordVisibility = event => {
     setInputType(inputType === 'password' ? 'text' : 'password');
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    onTogglePasswordVisibility && onTogglePasswordVisibility(event);
+    onTogglePasswordVisibility?.(event);
   };
   const textInputClasses = cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
     [`${prefix}--text-input--light`]: light,
@@ -117,14 +116,14 @@ const PasswordInput = /*#__PURE__*/forwardRef(({
     [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
     [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
   });
-  const label = labelText ? /*#__PURE__*/React.createElement("label", {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  }, labelText);
+  const helper = typeof helperText !== 'undefined' && helperText !== null && /*#__PURE__*/React.createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
-  }, helperText) : null;
+  }, helperText);
   const passwordIsVisible = inputType === 'text';
   const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React.createElement(ViewOff, {
     className: `${prefix}--icon-visibility-off`