@carbon/react 1.100.0 → 1.101.0

package/lib/components/ComposedModal/ModalHeader.js

@@ -96,7 +96,7 @@ ModalHeader.propTypes = {
   /**
    * Specify an optional label to be displayed
    */
-  label: PropTypes.node,
+  label: PropTypes.string,
   /**
    * Specify an optional className to be applied to the modal header label
    */

package/lib/components/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/lib/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/lib/components/DataTable/DataTable.d.ts

@@ -51,6 +51,7 @@ export interface DataTableHeader {
     header: ReactNode;
     slug?: ReactElement;
     decorator?: ReactElement;
+    isSortable?: boolean;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     /**
@@ -435,6 +436,7 @@ export declare const DataTable: {
         headers: PropTypes.Validator<(PropTypes.InferProps<{
             key: PropTypes.Validator<string>;
             header: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+            isSortable: PropTypes.Requireable<boolean>;
         }> | null | undefined)[]>;
         /**
          * Specify whether the table should be able to be sorted by its headers

package/lib/components/DataTable/DataTable.js

@@ -98,7 +98,7 @@ const DataTable = props => {
     render,
     translateWithId: t = defaultTranslateWithId,
     size,
-    isSortable: isSortableProp,
+    isSortable,
     useZebraStyles,
     useStaticWidth,
     stickyHeader,
@@ -137,7 +137,7 @@ const DataTable = props => {
   const getHeaderProps = ({
     header,
     onClick,
-    isSortable = isSortableProp,
+    isSortable: headerIsSortable,
     ...rest
   }) => {
     const {
@@ -153,7 +153,7 @@ const DataTable = props => {
       ...rest,
       key,
       sortDirection,
-      isSortable,
+      isSortable: headerIsSortable ?? header.isSortable ?? isSortable,
       isSortHeader: sortHeaderKey === key,
       slug,
       decorator,
@@ -312,7 +312,7 @@ const DataTable = props => {
     return {
       useZebraStyles,
       size: size ?? 'lg',
-      isSortable: isSortableProp,
+      isSortable,
       useStaticWidth,
       stickyHeader,
       overflowMenuOnHover: overflowMenuOnHover ?? false,
@@ -602,7 +602,8 @@ DataTable.propTypes = {
    */
   headers: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string.isRequired,
-    header: PropTypes.node.isRequired
+    header: PropTypes.node.isRequired,
+    isSortable: PropTypes.bool
   })).isRequired,
   /**
    * Specify whether the table should be able to be sorted by its headers

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

@@ -74,12 +74,18 @@ const Table = ({
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
   const toggleTableBodyAlignmentClass = React.useCallback((alignTop = false) => {
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
+    if (alignTop) {
+      tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`);
+    } else {
+      tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
+    }
   }, [prefix]);
   const toggleTableHeaderAlignmentClass = React.useCallback((alignTop = false) => {
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
+    if (alignTop) {
+      tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`);
+    } else {
+      tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
+    }
   }, [prefix]);
   const setTableAlignment = React.useCallback(() => {
     if (experimentalAutoAlign) {

package/lib/components/DataTable/state/sorting.d.ts

@@ -43,7 +43,8 @@ export declare const getNextSortDirection: (prevHeader: string, currentHeader: s
  * @param state - Current table state.
  * @param key - Header key to sort by.
  */
-export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
+export declare const getNextSortState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+props: Props, state: State<ColTypes>, { key }: {
     key: string;
 }) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
 /**
@@ -54,5 +55,6 @@ export declare const getNextSortState: <ColTypes extends any[]>(props: Props, st
  * @param key - Header key to sort by.
  * @param sortDirection - Sort direction to apply.
  */
-export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export declare const getSortedState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+{ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
 export {};

package/lib/components/Dropdown/Dropdown.js

@@ -264,7 +264,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     className: helperClasses
   }, helperText) : null;
   const handleFocus = evt => {
-    setIsFocused(evt.type === 'focus' && !selectedItem ? true : false);
+    setIsFocused(evt.type === 'focus' && !selectedItem);
   };
   const buttonRef = React.useRef(null);
   const mergedRef = mergeRefs.mergeRefs(toggleButtonProps.ref, ref, buttonRef);
@@ -353,10 +353,10 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     size: size,
     className: className,
     invalid: normalizedProps.invalid,
-    invalidText: isFluid ? invalidText : undefined,
+    invalidText: invalidText,
     invalidTextId: normalizedProps.invalidId,
     warn: normalizedProps.warn,
-    warnText: isFluid ? warnText : undefined,
+    warnText: warnText,
     warnTextId: normalizedProps.warnId,
     light: light,
     isOpen: isOpen,
@@ -402,7 +402,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     }, 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);
+  }))), !inline && !isFluid && !normalizedProps.validation && helper);
 });
 
 // Workaround problems with forwardRef() and generics.  In the long term, should stop using forwardRef().

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -32,7 +32,7 @@ const ExpandableSearch = frFn((props, forwardedRef) => {
     ...rest
   } = props;
   const [expanded, setExpanded] = React.useState(isExpanded || false);
-  const [hasContent, setHasContent] = React.useState(defaultValue ? true : false);
+  const [hasContent, setHasContent] = React.useState(Boolean(defaultValue));
   const searchRef = React.useRef(null);
   const prefix = usePrefix.usePrefix();
   function handleBlur(evt) {

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/ListBox/test-helpers.d.ts

@@ -0,0 +1,71 @@
+/**
+ * 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 '@testing-library/jest-dom/jest-globals';
+export declare const findListBoxNode: () => Element | null;
+export declare const findMenuNode: () => Element | null;
+export declare const findMenuItemNode: (index: number) => Element;
+export declare const findMenuIconNode: () => Element | null;
+export declare const findFieldNode: () => Element | null;
+export declare const findComboboxNode: () => Element | null;
+export declare const findPopupNode: () => Element | null;
+export declare const openMenu: () => Promise<void>;
+export declare const assertMenuOpen: (mockProps: {
+    items: unknown[];
+}) => void;
+export declare const assertMenuClosed: () => void;
+/**
+ * 'GenericItem' corresponds to an item in a collection that is passed to
+ * `MultiSelect` that is in a predictable shape and works with the default
+ * `itemToString` function.
+ */
+export declare const generateGenericItem: (index: number) => {
+    id: string;
+    label: string;
+    value: number;
+};
+/**
+ * 'CustomItem' corresponds to a potentially different item structure that might
+ * be passed into `MultiSelect` that we would need to supply a custom
+ * `itemToString` method for.
+ */
+export declare const generateCustomItem: (index: number) => {
+    field: string;
+    value: string;
+};
+/**
+ * Generates an array of values generated by the `generator` function.
+ */
+export declare const generateItems: <T>(amount: number, generator: (index: number) => T) => T[];
+export declare const customItemToString: ({ field, }: {
+    field: string;
+    value: string;
+}) => string;
+/**
+ * This object contains two sets of three items that share the same root
+ * word in different portions of the string (beginning, middle, end):
+ *
+ *  - 'struct'
+ *  - 'port'
+ *
+ * Separated by a disabled item, these derivative words are helpful when
+ * testing fuzzy search functions and components that do substring filtering.
+ */
+export declare const cognateItems: ({
+    id: string;
+    text: string;
+    disabled?: undefined;
+} | {
+    id: string;
+    text: string;
+    disabled: boolean;
+})[];
+/**
+ * Flushes microtasks to ensure element position state is settled
+ * From https://floating-ui.com/docs/react#testing
+ * More context here: https://github.com/floating-ui/react-popper/issues/368#issuecomment-1340413010
+ */
+export declare const waitForPosition: () => Promise<void>;

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(() => {
@@ -622,7 +624,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
       setIsFocused(false);
     } else {
-      setIsFocused(evt?.type === 'focus' ? true : false);
+      setIsFocused(evt?.type === 'focus');
     }
   };
   const mergedRef = mergeRefs.mergeRefs(textInput, inputProp.ref);

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');
+    }
   };
   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

@@ -447,7 +447,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
     if ('type' in evt.target && evt.target.type === 'button') {
       setIsFocused(false);
     } else {
-      setIsFocused(evt.type === 'focus' ? true : false);
+      setIsFocused(evt.type === 'focus');
     }
   };
   const outerElementClasses = cx(`${prefix}--form-item`, {
@@ -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/Popover/index.js

@@ -42,7 +42,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function PopoverRenderFunction({
   autoAlign = false,
   autoAlignBoundary,
   backgroundToken = 'layer',
-  caret = isTabTip ? false : true,
+  caret = !isTabTip,
   className: customClassName,
   children,
   border = false,

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