@carbon/react 1.100.0 → 1.101.0-rc.0

package/lib/components/Menu/Menu.js

@@ -50,6 +50,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
   const [childState, childDispatch] = React.useReducer(MenuContext.menuReducer, {
     ...context.state,
     isRoot: false,
+    hasIcons: false,
+    hasSelectableItems: false,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
   });
@@ -112,9 +114,9 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
   function handleKeyDown(e) {
     e.stopPropagation();
 
-    // if the user presses escape or this is a submenu
-    // and the user presses ArrowLeft, close it
-    if ((match.match(e, keys.Escape) || !isRoot && match.match(e, keys.ArrowLeft)) && onClose) {
+    // If the user presses escape or tab, or this is a submenu and the user presses ArrowLeft, close it.
+    if ((match.match(e, keys.Escape) || match.match(e, keys.Tab) || !isRoot && match.match(e, keys.ArrowLeft)) && onClose) {
+      e.preventDefault();
       handleClose();
     } else {
       focusItem(e);
@@ -248,6 +250,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
     }
     return [fitValue(ranges.x, 'x') ?? -1, fitValue(ranges.y, 'y') ?? -1];
   }
+
+  // When a menu is opened, focus the first item.
   React.useEffect(() => {
     if (open) {
       const raf = requestAnimationFrame(() => {

package/lib/components/Menu/MenuItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2025
+ * Copyright IBM Corp. 2023, 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 MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
      * Additional CSS class names.
      */
     className?: string;
+    /**
+     * Specify the message read by screen readers for the danger menu item variant
+     */
+    dangerDescription?: string;
     /**
      * Specify whether the MenuItem is disabled or not.
      */

package/lib/components/Menu/MenuItem.js

@@ -18,6 +18,7 @@ var match = require('../../internal/keyboard/match.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useId = require('../../internal/useId.js');
 var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
 require('../LayoutDirection/LayoutDirection.js');
@@ -30,6 +31,7 @@ var _Checkmark, _CaretLeft, _CaretRight;
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
   children,
   className,
+  dangerDescription = 'danger',
   disabled,
   kind = 'default',
   label,
@@ -166,6 +168,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
       }
     });
   }, [floatingStyles, refs.floating]);
+  const assistiveId = useId.useId('danger-description');
   return /*#__PURE__*/React.createElement(react.FloatingFocusManager, {
     context: floatingContext,
     order: ['reference', 'floating'],
@@ -190,7 +193,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
   }, IconElement && /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     className: `${prefix}--menu-item__label`
-  }, label), shortcut && !hasChildren && /*#__PURE__*/React.createElement("div", {
+  }, label), isDanger && /*#__PURE__*/React.createElement("span", {
+    id: assistiveId,
+    className: `${prefix}--visually-hidden`
+  }, dangerDescription), shortcut && !hasChildren && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
@@ -213,6 +219,10 @@ MenuItem.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes.string,
+  /**
+   * Specify the message read by screen readers for the danger menu item variant
+   */
+  dangerDescription: PropTypes.string,
   /**
    * Specify whether the MenuItem is disabled or not.
    */

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

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

@@ -19,6 +19,7 @@ require('../Menu/MenuItem.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
@@ -97,7 +98,7 @@ const MenuButton = /*#__PURE__*/React.forwardRef(({
     handleMousedown,
     handleClose
   } = useAttachedMenu.useAttachedMenu(triggerRef);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.default(() => {
     Object.keys(floatingStyles).forEach(style => {
       if (refs.floating.current) {
         let value = floatingStyles[style];

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

@@ -36,6 +36,7 @@ var index = require('../AILabel/index.js');
 var defaultItemToString = require('../../internal/defaultItemToString.js');
 var utils = require('../../internal/utils.js');
 var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 const {
@@ -191,7 +192,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     }), react.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.default(() => {
     if (autoAlign) {
       const updatedFloatingStyles = {
         ...floatingStyles,
@@ -261,7 +262,8 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     [`${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,
@@ -277,10 +279,10 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     [`${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`;
   React.useEffect(() => {

package/lib/components/MultiSelect/MultiSelect.js

@@ -35,6 +35,7 @@ var index$1 = require('../AILabel/index.js');
 var defaultItemToString = require('../../internal/defaultItemToString.js');
 var utils = require('../../internal/utils.js');
 var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 const {
@@ -145,7 +146,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     }), autoAlign && react.hide()],
     whileElementsMounted: react.autoUpdate
   } : {});
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.default(() => {
     if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
@@ -388,8 +389,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/lib/components/Notification/Notification.js

@@ -574,7 +574,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/lib/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/lib/components/NumberInput/NumberInput.js

@@ -566,10 +566,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.match(e, keys.ArrowUp) && handleStep(e, 'up');
-        // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-        match.match(e, keys.ArrowDown) && handleStep(e, 'down');
+        if (match.match(e, keys.ArrowUp)) {
+          handleStep(e, 'up');
+        } else if (match.match(e, keys.ArrowDown)) {
+          handleStep(e, 'down');
+        }
       }
       if (rest?.onKeyDown) {
         rest?.onKeyDown(e);

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

@@ -101,7 +101,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
   className,
   direction = FloatingMenu.DIRECTION_BOTTOM,
   flipped = false,
-  focusTrap = true,
+  focusTrap = false,
   iconClass,
   iconDescription = 'Options',
   id,
@@ -204,12 +204,15 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
       evt.preventDefault();
     }
 
-    // Close the overflow menu on escape
-    if (match.matches(evt, [keys.Escape])) {
+    // Close the overflow menu on escape or tab.
+    if (match.matches(evt, [keys.Escape, keys.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();
     }
   };
 
@@ -394,6 +397,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/lib/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/lib/components/PageHeader/PageHeader.js

@@ -37,6 +37,7 @@ require('../Grid/Row.js');
 var Column = require('../Grid/Column.js');
 require('../Grid/ColumnHang.js');
 require('../Grid/GridContext.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 
 /**
  * ----------
@@ -132,9 +133,8 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(({
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
     return element.offsetHeight < element.scrollHeight;
   };
-  React.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.default(() => {
+    if (titleRef.current) isEllipsisActive(titleRef.current);
   }, [title]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classNames,
@@ -222,7 +222,7 @@ const PageHeaderContentPageActions = ({
 
   // need to set the grid columns width based on the menu button's width
   // to avoid overlapping when resizing
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.default(() => {
     if (menuButtonVisibility && offsetRef.current) {
       const width = offsetRef.current.offsetWidth;
       document.documentElement.style.setProperty('--pageheader-title-grid-width', `${width}px`);

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -101,11 +101,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 = React.useRef(null);
 
   // AILabel is always size `mini`

package/lib/components/Select/Select.js

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

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

@@ -186,8 +186,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);
@@ -266,8 +265,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/lib/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/lib/components/Tabs/Tabs.js

@@ -19,7 +19,6 @@ require('../Grid/Row.js');
 require('../Grid/Column.js');
 require('../Grid/ColumnHang.js');
 require('../Grid/GridContext.js');
-var reactIs = require('react-is');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var useControllableState = require('../../internal/useControllableState.js');
@@ -36,6 +35,7 @@ var useMatchMedia = require('../../internal/useMatchMedia.js');
 var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
 var index = require('../BadgeIndicator/index.js');
+var utils = require('../../internal/utils.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
 
 var _ChevronLeft, _ChevronRight, _BadgeIndicator;
@@ -271,14 +271,7 @@ function TabList({
   const nextButton = React.useRef(null);
   const [isScrollable, setIsScrollable] = React.useState(false);
   const [scrollLeft, setScrollLeft] = React.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 && React.Children.toArray(children).some(child => utils.isComponentElement(child, Tab) && typeof child.props.secondaryLabel !== 'undefined');
   const isLg = useMatchMedia.useMatchMedia(lgMediaQuery);
   const distributeWidth = fullWidth && contained && isLg && React.Children.toArray(children).length < 9;
   const className = cx(`${prefix}--tabs`, {
@@ -490,16 +483,15 @@ function TabList({
     onKeyDown: onKeyDown,
     onBlur: handleBlur
   }), React.Children.map(children, (child, index) => {
-    return !reactIs.isElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
+    return ! /*#__PURE__*/React.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__*/React.cloneElement(child, {
       ref: node => {
+        if (!node) return;
         tabs.current[index] = node;
       }
     }));
@@ -643,8 +635,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'
           });
@@ -693,15 +684,14 @@ function TabListVertical({
     onKeyDown: onKeyDown,
     onBlur: handleBlur
   }), React.Children.map(children, (child, index) => {
-    return !reactIs.isElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
+    return ! /*#__PURE__*/React.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__*/React.cloneElement(child, {
       ref: node => {
+        if (!node) return;
         tabs.current[index] = node;
       }
     }));
@@ -1047,7 +1037,11 @@ const IconTab = /*#__PURE__*/React.forwardRef(({
   const value = React.useMemo(() => ({
     badgeIndicator
   }), [badgeIndicator]);
-  const hasSize20 = /*#__PURE__*/React.isValidElement(children) && children.props.size === 20;
+  const hasSize20 = /*#__PURE__*/React.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
   });
@@ -1179,7 +1173,7 @@ function TabPanels({
     }
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(children, (child, index) => {
-    return !reactIs.isElement(child) ? null : /*#__PURE__*/React.createElement(TabPanelContext.Provider, {
+    return ! /*#__PURE__*/React.isValidElement(child) ? null : /*#__PURE__*/React.createElement(TabPanelContext.Provider, {
       value: index
     }, /*#__PURE__*/React.cloneElement(child, {
       ref: element => {

package/lib/components/Tag/DismissibleTag.js

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

package/lib/components/Tag/OperationalTag.js

@@ -22,6 +22,7 @@ var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
 var isEllipsisActive = require('./isEllipsisActive.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 
 const TYPES = {
   red: 'Red',
@@ -52,7 +53,7 @@ const OperationalTag = /*#__PURE__*/React.forwardRef(({
   const tagId = id || `tag-${useId.useId()}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.default(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);

package/lib/components/Tag/SelectableTag.js

@@ -23,6 +23,7 @@ require('../Text/TextDirection.js');
 var isEllipsisActive = require('./isEllipsisActive.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var useControllableState = require('../../internal/useControllableState.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const SelectableTag = /*#__PURE__*/React.forwardRef(({
@@ -51,7 +52,7 @@ const SelectableTag = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.default(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);

package/lib/components/Tag/Tag.js

@@ -25,6 +25,7 @@ var isEllipsisActive = require('./isEllipsisActive.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 
 var _Close;
 const TYPES = {
@@ -80,7 +81,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.useId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.default(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);

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

@@ -197,24 +197,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.Text, {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement(Text.Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React.createElement(Text.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.Text, {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
+  const helper = hasHelper && /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     id: helperId,
     className: helperTextClasses,
     ref: helperTextRef
-  }, helperText) : null;
+  }, helperText);
   const errorId = id + '-error-msg';
   const error = invalid ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",