@carbon/react 1.100.0-rc.0 → 1.101.0-rc.0

package/es/components/FluidDropdown/FluidDropdown.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 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.
@@ -43,11 +43,6 @@ export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType>, P
      * Specify if the `FluidDropdown` should render its menu items in condensed mode
      */
     isCondensed?: boolean;
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
-     */
-    itemToElement?: React.JSXElementConstructor<ItemType> | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/FluidDropdown/FluidDropdown.js

@@ -67,8 +67,7 @@ FluidDropdown.propTypes = {
    */
   isCondensed: PropTypes.bool,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 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.
@@ -66,11 +66,6 @@ export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemTy
      * @deprecated This prop is deprecated in favor of new component called FluidFilterableMultiSelect and will be removed in the next major release
      */
     isFilterable?: boolean;
-    /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
-     */
-    itemToElement?: React.JSXElementConstructor<ItemType>;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -106,8 +106,7 @@ FluidMultiSelect.propTypes = {
    */
   isFilterable: PropTypes.bool,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/InlineLoading/InlineLoading.js

@@ -52,7 +52,10 @@ const InlineLoading = ({
         className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React.createElement("title", null, iconLabel));
     }
-    if (status === 'active') {
+    if (status === 'inactive' || status === 'active') {
+      if (status === 'inactive') {
+        return undefined;
+      }
       if (!iconDescription) {
         iconLabel = 'loading';
       }
@@ -63,15 +66,6 @@ const InlineLoading = ({
         active: status === 'active'
       });
     }
-    if (status === 'inactive') {
-      if (!iconDescription) {
-        iconLabel = 'not loading';
-      }
-      return /*#__PURE__*/React.createElement("title", {
-        className: `${prefix}--inline-loading__inactive-status`
-      }, iconLabel);
-    }
-    return undefined;
   };
   const loadingText = description && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--inline-loading__text`
@@ -83,7 +77,7 @@ const InlineLoading = ({
   return /*#__PURE__*/React.createElement("div", _extends({
     className: loadingClasses
   }, rest, {
-    "aria-live": rest['aria-live'] ?? 'assertive'
+    "aria-live": rest['aria-live'] ?? (status === 'inactive' ? 'off' : 'assertive')
   }), loadingAnimation, loadingText);
 };
 InlineLoading.propTypes = {

package/es/components/Menu/Menu.js

@@ -10,7 +10,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useRef, useContext, useReducer, useMemo, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
+import { Escape, Tab, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -48,6 +48,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   const [childState, childDispatch] = useReducer(menuReducer, {
     ...context.state,
     isRoot: false,
+    hasIcons: false,
+    hasSelectableItems: false,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
   });
@@ -110,9 +112,9 @@ const Menu = /*#__PURE__*/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(e, Escape) || !isRoot && match(e, ArrowLeft)) && onClose) {
+    // If the user presses escape or tab, or this is a submenu and the user presses ArrowLeft, close it.
+    if ((match(e, Escape) || match(e, Tab) || !isRoot && match(e, ArrowLeft)) && onClose) {
+      e.preventDefault();
       handleClose();
     } else {
       focusItem(e);
@@ -246,6 +248,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
     }
     return [fitValue(ranges.x, 'x') ?? -1, fitValue(ranges.y, 'y') ?? -1];
   }
+
+  // When a menu is opened, focus the first item.
   useEffect(() => {
     if (open) {
       const raf = requestAnimationFrame(() => {

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

@@ -16,6 +16,7 @@ import { match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useId } from '../../internal/useId.js';
 import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
 import '../LayoutDirection/LayoutDirection.js';
@@ -28,6 +29,7 @@ var _Checkmark, _CaretLeft, _CaretRight;
 const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
   children,
   className,
+  dangerDescription = 'danger',
   disabled,
   kind = 'default',
   label,
@@ -164,6 +166,7 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
       }
     });
   }, [floatingStyles, refs.floating]);
+  const assistiveId = useId('danger-description');
   return /*#__PURE__*/React.createElement(FloatingFocusManager, {
     context: floatingContext,
     order: ['reference', 'floating'],
@@ -188,7 +191,10 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
   }, IconElement && /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(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`
@@ -211,6 +217,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/es/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/es/components/MenuButton/index.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, useLayoutEffect } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ChevronDown } from '@carbon/icons-react';
@@ -17,6 +17,7 @@ import '../Menu/MenuItem.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
@@ -95,7 +96,7 @@ const MenuButton = /*#__PURE__*/forwardRef(({
     handleMousedown,
     handleClose
   } = useAttachedMenu(triggerRef);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     Object.keys(floatingStyles).forEach(style => {
       if (refs.floating.current) {
         let value = floatingStyles[style];

package/es/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/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.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.
@@ -82,10 +82,9 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     invalidText?: ReactNode;
     /**
-     * Function to render items as custom components instead of strings.
-     * Defaults to null and is overridden by a getter
+     * Renders an item as a custom React node instead of a string.
      */
-    itemToElement?: React.JSXElementConstructor<ItemType>;
+    itemToElement?: ((item: ItemType) => NonNullable<ReactNode>) | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field

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,
@@ -294,10 +295,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--multi-select--selectall`]: selectAll
   });
-
-  // needs to be capitalized for react to render it correctly
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const ItemToElement = itemToElement;
   if (selectionFeedback === 'fixed') {
     sortOptions.selectedItems = [];
   } else if (selectionFeedback === 'top-after-reopen') {
@@ -390,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 => {
@@ -526,9 +526,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       className: `${prefix}--checkbox-wrapper`
     }, /*#__PURE__*/React.createElement(Checkbox, {
       id: `${itemProps.id}__checkbox`,
-      labelText: itemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
-        key: itemProps.id
-      }, item)) : itemText,
+      labelText: itemToElement ? itemToElement(item) : itemText,
       checked: isChecked,
       title: useTitleInItem ? itemText : undefined,
       indeterminate: isIndeterminate,
@@ -619,8 +617,7 @@ MultiSelect.propTypes = {
    */
   invalidText: PropTypes.node,
   /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
+   * Renders an item as a custom React node instead of a string.
    */
   itemToElement: PropTypes.func,
   /**

package/es/components/Notification/Notification.js

@@ -572,6 +572,9 @@ function ActionableNotification({
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), /*#__PURE__*/React.createElement("div", {
+    ref: innerModal,
+    className: `${prefix}--actionable-notification__focus-wrapper`
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React.createElement(NotificationIcon, {
     notificationType: inline ? 'inline' : 'toast',
@@ -593,8 +596,7 @@ function ActionableNotification({
     as: "div",
     className: `${prefix}--actionable-notification__caption`
   }, caption), children))), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--actionable-notification__button-wrapper`,
-    ref: innerModal
+    className: `${prefix}--actionable-notification__button-wrapper`
   }, actionButtonLabel && /*#__PURE__*/React.createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline
@@ -602,7 +604,7 @@ function ActionableNotification({
     "aria-label": deprecatedAriaLabel || ariaLabel,
     notificationType: "actionable",
     onClick: handleCloseButtonClick
-  })), !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
+  }))), !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

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