@carbon/react 1.100.0 → 1.101.0

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(() => {
@@ -620,7 +622,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     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(textInput, inputProp.ref);

package/es/components/MultiSelect/MultiSelect.js

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

package/es/components/Notification/Notification.js

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

package/es/components/NumberInput/NumberInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/NumberInput/NumberInput.js

@@ -445,7 +445,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`, {
@@ -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/Popover/index.js

@@ -40,7 +40,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/es/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.

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -65,7 +65,7 @@ function ProgressIndicator({
     if (index === currentIndex) {
       return /*#__PURE__*/React.cloneElement(child, {
         complete: child.props.complete,
-        current: child.props.complete ? false : true,
+        current: !child.props.complete,
         index,
         onClick
       });

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/Search/Search.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/Search/Search.js

@@ -47,7 +47,7 @@ const Search = /*#__PURE__*/React.forwardRef(({
   value,
   ...rest
 }, forwardRef) => {
-  const hasPropValue = value || defaultValue ? true : false;
+  const hasPropValue = Boolean(value || defaultValue);
   const prefix = usePrefix();
   const {
     isFluid

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
@@ -106,7 +107,7 @@ const Select = /*#__PURE__*/forwardRef(({
     ariaProps['aria-describedby'] = helper ? normalizedProps.helperId : undefined;
   }
   const handleFocus = evt => {
-    setIsFocused(evt.type === 'focus' ? true : false);
+    setIsFocused(evt.type === 'focus');
   };
   const handleChange = evt => {
     const selectedOption = evt?.target?.options[evt.target.selectedIndex];

package/es/components/StructuredList/StructuredList.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/StructuredList/StructuredList.js

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

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

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ComponentType, type HTMLElementType } from 'react';
+import React, { type ComponentType, type HTMLAttributes, type HTMLElementType, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
 type DivAttributes = HTMLAttributes<HTMLDivElement>;
 /**
  * Tabs

package/es/components/Tabs/Tabs.js

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

package/es/components/Tag/DismissibleTag.js

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

package/es/components/Tag/OperationalTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -18,6 +18,7 @@ import { Text } from '../Text/Text.js';
 import '../Text/TextDirection.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 const TYPES = {
   red: 'Red',
@@ -48,7 +49,7 @@ const OperationalTag = /*#__PURE__*/forwardRef(({
   const tagId = id || `tag-${useId()}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);