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

package/lib/components/Dropdown/Dropdown.js

@@ -256,9 +256,6 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
-
-  // needs to be Capitalized for react to render it correctly
-  const ItemToElement = itemToElement;
   const toggleButtonProps = getToggleButtonProps({
     'aria-label': ariaLabel || deprecatedAriaLabel
   });
@@ -274,10 +271,20 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   const [currTimer, setCurrTimer] = React.useState();
   const [isTyping, setIsTyping] = React.useState(false);
   const onKeyDownHandler = React.useCallback(evt => {
-    if (evt.code !== 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+    const navigationKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+
+    // If the key is not a navigation key, the user is typing
+    if (!navigationKeys.includes(evt.key)) {
       setIsTyping(true);
-    }
-    if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+      // Reset the timer for typing timeout
+      if (currTimer) {
+        clearTimeout(currTimer);
+      }
+      setCurrTimer(setTimeout(() => {
+        setIsTyping(false);
+      }, 3000));
+    } else if (isTyping && evt.key === ' ') {
+      // If user is typing and presses space, reset the timer
       if (currTimer) {
         clearTimeout(currTimer);
       }
@@ -381,21 +388,18 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen && items.map((item, index) => {
-    const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
       index
     });
-    const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
+    const title = itemToString(item);
     return /*#__PURE__*/React.createElement(index$2.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: itemProps['aria-disabled']
-    }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
-      key: itemProps.id
-    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
+    }, itemProps), itemToElement ? itemToElement(item) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }))), !inline && !isFluid && !normalizedProps.validation && helper, !inline && !isFluid && normalizedProps.validation);
@@ -475,8 +479,7 @@ Dropdown.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/lib/components/FileUploader/FileUploaderItem.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/FileUploader/FileUploaderItem.js

@@ -19,6 +19,7 @@ var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
 require('../Tooltip/DefinitionTooltip.js');
@@ -62,7 +63,7 @@ function FileUploaderItem({
     setIsEllipsisApplied(isActive);
     return isActive;
   };
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.default(() => {
     isEllipsisActive(textRef.current);
   }, [prefix, name]);
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({

package/lib/components/FluidComboBox/FluidComboBox.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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.
  */
-import React, { ComponentType, type ComponentProps } from 'react';
+import React, { type ComponentProps } from 'react';
 import ComboBox from '../ComboBox';
 import { ComboBoxProps } from '../ComboBox/ComboBox';
 type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
@@ -46,11 +46,6 @@ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType>, P
      * Specify if the `FluidComboBox` 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?: ComponentType<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/lib/components/FluidComboBox/FluidComboBox.js

@@ -70,8 +70,7 @@ FluidComboBox.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/lib/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/lib/components/FluidDropdown/FluidDropdown.js

@@ -71,8 +71,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/lib/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/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -110,8 +110,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/lib/components/InlineLoading/InlineLoading.js

@@ -56,7 +56,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';
       }
@@ -67,15 +70,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`
@@ -87,7 +81,7 @@ const InlineLoading = ({
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: loadingClasses
   }, rest, {
-    "aria-live": rest['aria-live'] ?? 'assertive'
+    "aria-live": rest['aria-live'] ?? (status === 'inactive' ? 'off' : 'assertive')
   }), loadingAnimation, loadingText);
 };
 InlineLoading.propTypes = {

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.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/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,
@@ -296,10 +297,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') {
@@ -392,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 => {
@@ -528,9 +528,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       className: `${prefix}--checkbox-wrapper`
     }, /*#__PURE__*/React.createElement(Checkbox.default, {
       id: `${itemProps.id}__checkbox`,
-      labelText: itemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
-        key: itemProps.id
-      }, item)) : itemText,
+      labelText: itemToElement ? itemToElement(item) : itemText,
       checked: isChecked,
       title: useTitleInItem ? itemText : undefined,
       indeterminate: isIndeterminate,
@@ -621,8 +619,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/lib/components/Notification/Notification.js

@@ -574,6 +574,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',
@@ -595,8 +598,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
@@ -604,7 +606,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/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`