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

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]);

package/es/components/Tag/SelectableTag.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';
@@ -19,6 +19,7 @@ import '../Text/TextDirection.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
 import { useControllableState } from '../../internal/useControllableState.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const SelectableTag = /*#__PURE__*/forwardRef(({
@@ -47,7 +48,7 @@ const SelectableTag = /*#__PURE__*/forwardRef(({
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);

package/es/components/Tag/Tag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useLayoutEffect, cloneElement } from 'react';
+import React, { useRef, useState, cloneElement } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
@@ -21,6 +21,7 @@ import { isEllipsisActive } from './isEllipsisActive.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 var _Close;
 const TYPES = {
@@ -76,7 +77,7 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
   // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const tagId = id || `tag-${useId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);

package/es/components/TextArea/TextArea.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ReactNode } from 'react';
-export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Provide a custom className that is applied directly to the underlying
      * `<textarea>` node

package/es/components/TextArea/TextArea.js

@@ -144,9 +144,7 @@ const TextArea = frFn((props, forwardRef) => {
             setTimeout(() => {
               setTextCount(0);
             }, 0);
-            return;
-          }
-          if (enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
+          } else if (enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
             const matchedWords = evt.target?.value?.match(/\p{L}+/gu);
             if (matchedWords && matchedWords.length <= maxCount) {
               textareaRef.current.removeAttribute('maxLength');
@@ -195,24 +193,25 @@ const TextArea = frFn((props, forwardRef) => {
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React.createElement(Text, {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement(Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     className: counterClasses,
     "aria-hidden": "true"
   }, `${textCount}/${maxCount}`) : null;
   const counterDescriptionId = enableCounter && maxCount ? `${id}-counter-desc` : undefined;
-  const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
+  const helper = hasHelper && /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: helperId,
     className: helperTextClasses,
     ref: helperTextRef
-  }, helperText) : null;
+  }, helperText);
   const errorId = id + '-error-msg';
   const error = invalid ? /*#__PURE__*/React.createElement(Text, {
     as: "div",

package/es/components/TextInput/ControlledPasswordInput.js

@@ -71,10 +71,10 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React.createElement("label", {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   const error = invalid ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-requirement`,
     id: errorId
@@ -89,12 +89,13 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
-  const helperId = !helperText ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
   const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, getTextInputProps({
     invalid,
     sharedTextInputProps,
     invalidId: errorId,
-    hasHelper: !error && helperText ? true : false,
+    hasHelper: !error && hasHelper,
     helperId
   }), {
     "data-toggle-password-visibility": type === 'password'
@@ -105,10 +106,10 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--assistive-text`
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: helperTextClasses
-  }, helperText) : null;
+  }, helperText);
   return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-item ${prefix}--text-input-wrapper ${prefix}--password-input-wrapper`
   }, label, /*#__PURE__*/React.createElement("div", {

package/es/components/TextInput/PasswordInput.js

@@ -61,8 +61,7 @@ const PasswordInput = /*#__PURE__*/forwardRef(({
   } = useContext(FormContext);
   const handleTogglePasswordVisibility = event => {
     setInputType(inputType === 'password' ? 'text' : 'password');
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    onTogglePasswordVisibility && onTogglePasswordVisibility(event);
+    onTogglePasswordVisibility?.(event);
   };
   const textInputClasses = cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
     [`${prefix}--text-input--light`]: light,
@@ -117,14 +116,14 @@ const PasswordInput = /*#__PURE__*/forwardRef(({
     [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
     [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
   });
-  const label = labelText ? /*#__PURE__*/React.createElement("label", {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  }, labelText);
+  const helper = typeof helperText !== 'undefined' && helperText !== null && /*#__PURE__*/React.createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
-  }, helperText) : null;
+  }, helperText);
   const passwordIsVisible = inputType === 'text';
   const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React.createElement(ViewOff, {
     className: `${prefix}--icon-visibility-off`

package/es/components/TextInput/TextInput.js

@@ -141,19 +141,19 @@ const TextInput = /*#__PURE__*/forwardRef(({
     as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
-  const label = labelText ? /*#__PURE__*/React.createElement(Text, {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement(Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   const labelWrapper = /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--text-input__label-wrapper`
   }, label, counter);
-  const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
+  const helper = typeof helperText !== 'undefined' && helperText !== null && /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: normalizedProps.helperId,
     className: helperTextClasses
-  }, helperText) : null;
+  }, helperText);
   const input = /*#__PURE__*/React.createElement("input", getTextInputProps({
     sharedTextInputProps,
     invalid: normalizedProps.invalid,

package/es/components/Tile/Tile.d.ts

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

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useState, useEffect, useCallback, useRef, cloneElement } from 'react';
+import React, { forwardRef, useState, useEffect, useCallback, useRef, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
@@ -363,7 +363,7 @@ SelectableTile.propTypes = {
    */
   value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
-const ExpandableTile = /*#__PURE__*/React.forwardRef(({
+const ExpandableTile = /*#__PURE__*/forwardRef(({
   tabIndex = 0,
   className,
   children,
@@ -382,11 +382,8 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
   hasRoundedCorners,
   ...rest
 }, forwardRef) => {
-  const [isTileMaxHeight, setIsTileMaxHeight] = useState(tileMaxHeight);
-  const [isTilePadding, setIsTilePadding] = useState(tilePadding);
-  const [prevExpanded, setPrevExpanded] = useState(expanded);
-  const [prevTileMaxHeight, setPrevTileMaxHeight] = useState(tileMaxHeight);
-  const [prevTilePadding, setPrevTilePadding] = useState(tilePadding);
+  const [measuredAboveHeight, setMeasuredAboveHeight] = useState(0);
+  const [measuredPadding, setMeasuredPadding] = useState(0);
   const [isExpanded, setIsExpanded] = useState(expanded);
   const [interactive, setInteractive] = useState(true);
   const aboveTheFold = useRef(null);
@@ -396,105 +393,74 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
   const tile = useRef(null);
   const ref = useMergedRefs([forwardRef, tile]);
   const prefix = usePrefix();
-  if (expanded !== prevExpanded) {
+  useEffect(() => {
     setIsExpanded(expanded);
-    setPrevExpanded(expanded);
-    setMaxHeight();
-  }
-  if (tileMaxHeight !== prevTileMaxHeight) {
-    setIsTileMaxHeight(tileMaxHeight);
-    setPrevTileMaxHeight(tileMaxHeight);
-  }
-  if (tilePadding !== prevTilePadding) {
-    setIsTilePadding(tilePadding);
-    setPrevTilePadding(tilePadding);
-  }
-  function setMaxHeight() {
-    if (isExpanded && tileContent.current) {
-      setIsTileMaxHeight(tileContent.current.getBoundingClientRect()?.height);
-    }
-    if (aboveTheFold.current) {
-      setIsTileMaxHeight(aboveTheFold.current.getBoundingClientRect().height);
-    }
-  }
-  function handleClick(evt) {
-    evt?.persist?.();
-    setIsExpanded(!isExpanded);
-    setMaxHeight();
-  }
-  function handleKeyUp(evt) {
+  }, [expanded]);
+  const handleClick = () => {
+    setIsExpanded(prev => !prev);
+  };
+  const handleKeyUp = evt => {
     if (evt.target !== tile.current && evt.target !== chevronInteractiveRef.current) {
       if (matches(evt, [Enter, Space])) {
         evt.preventDefault();
       }
     }
-  }
-  function getChildren() {
-    return React.Children.toArray(children);
-  }
+  };
   const classNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, {
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light
   }, className);
-  const interactiveClassNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, {
-    [`${prefix}--tile--is-expanded`]: isExpanded,
-    [`${prefix}--tile--light`]: light,
+  const interactiveClassNames = cx(classNames, `${prefix}--tile--expandable--interactive`, {
     [`${prefix}--tile--slug`]: slug,
     [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
-  }, className);
+  });
   const chevronInteractiveClassNames = cx(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
-  const childrenAsArray = getChildren();
+  const childrenAsArray = Children.toArray(children);
   useIsomorphicEffect(() => {
     if (!tile.current || !aboveTheFold.current) {
       return;
     }
-    const getStyle = window.getComputedStyle(tile.current, null);
-    const {
-      current: node
-    } = aboveTheFold;
-    const {
-      height
-    } = node.getBoundingClientRect();
-    const paddingTop = parseInt(getStyle.getPropertyValue('padding-top'), 10);
-    const paddingBottom = parseInt(getStyle.getPropertyValue('padding-bottom'), 10);
-    setIsTileMaxHeight(height);
-    setIsTilePadding(paddingTop + paddingBottom);
-  }, [isTileMaxHeight]);
+    const style = window.getComputedStyle(tile.current);
+    const paddingTop = parseInt(style.getPropertyValue('padding-top'), 10) || 0;
+    const paddingBottom = parseInt(style.getPropertyValue('padding-bottom'), 10) || 0;
+    setMeasuredPadding(paddingTop + paddingBottom);
+    setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
+  }, []);
   useIsomorphicEffect(() => {
     if (!aboveTheFold.current || !belowTheFold.current) {
       return;
     }
-
-    // Interactive elements or elements that are given a role should be treated
-    // the same because elements with a role can not be rendered inside a `button`
-    if (!getInteractiveContent(belowTheFold.current) && !getRoleContent(belowTheFold.current) && !getInteractiveContent(aboveTheFold.current) && !getRoleContent(aboveTheFold.current) && !(slug || decorator)) {
-      setInteractive(false);
-    }
-  }, [slug, decorator]);
+    const hasInteractive = Boolean(getInteractiveContent(aboveTheFold.current)) || Boolean(getRoleContent(aboveTheFold.current)) || Boolean(getInteractiveContent(belowTheFold.current)) || Boolean(getRoleContent(belowTheFold.current)) || Boolean(slug || decorator);
+    setInteractive(hasInteractive);
+  }, [slug, decorator, children]);
   useIsomorphicEffect(() => {
     if (!tile.current) {
       return;
     }
     if (isExpanded) {
       tile.current.style.maxHeight = '';
-    } else {
-      tile.current.style.maxHeight = isTileMaxHeight + isTilePadding + 'px';
+      return;
     }
-  }, [isExpanded, isTileMaxHeight, isTilePadding]);
+    const measured = measuredAboveHeight || aboveTheFold.current?.scrollHeight || 0;
+    const baseHeight = tileMaxHeight > 0 ? tileMaxHeight : measured;
+    const pad = tilePadding > 0 ? tilePadding : measuredPadding;
+    tile.current.style.maxHeight = `${baseHeight + pad}px`;
+  }, [isExpanded, tileMaxHeight, tilePadding, measuredAboveHeight, measuredPadding]);
   useEffect(() => {
     if (!aboveTheFold.current) {
       return;
     }
-    const resizeObserver = new ResizeObserver(entries => {
-      const [aboveTheFold] = entries;
-      setIsTileMaxHeight(aboveTheFold.contentRect.height);
+    const resizeObserver = new ResizeObserver(() => {
+      if (aboveTheFold.current) {
+        setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
+      }
     });
     resizeObserver.observe(aboveTheFold.current);
     return () => resizeObserver.disconnect();
-  }, [isTileMaxHeight, isTilePadding]);
-  const belowTheFoldId = useId('expandable-tile-interactive');
+  }, []);
+  const belowTheFoldId = useId(interactive ? 'expandable-tile-interactive' : 'expandable-tile');
 
   // AILabel is always size `xs`
   const candidate = slug ?? decorator;
@@ -529,6 +495,7 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
     type: "button",
     ref: ref,
     className: classNames,
+    "aria-controls": belowTheFoldId,
     "aria-expanded": isExpanded,
     title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
   }, rest, {
@@ -544,6 +511,7 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--tile__chevron`
   }, /*#__PURE__*/React.createElement("span", null, isExpanded ? tileExpandedLabel : tileCollapsedLabel), _ChevronDown2 || (_ChevronDown2 = /*#__PURE__*/React.createElement(ChevronDown, null))), /*#__PURE__*/React.createElement("div", {
     ref: belowTheFold,
+    id: belowTheFoldId,
     className: `${prefix}--tile-content`
   }, childrenAsArray[1])));
 });

package/es/components/TimePicker/TimePicker.js

@@ -98,10 +98,10 @@ const TimePicker = frFn((props, ref) => {
     [`${prefix}--visually-hidden`]: hideLabel,
     [`${prefix}--label--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React.createElement("label", {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   function getInternalPickerSelects() {
     const readOnlyEventHandlers = {
       onMouseDown: evt => {

package/es/components/Tooltip/DefinitionTooltip.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/Tooltip/DefinitionTooltip.js

@@ -48,8 +48,9 @@ const DefinitionTooltip = ({
       setOpen(false);
     },
     onMouseEnter: () => {
-      // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-      openOnHover ? setOpen(true) : null;
+      if (openOnHover) {
+        setOpen(true);
+      }
     },
     onFocus: () => {
       setOpen(true);

package/es/components/UIShell/SideNav.d.ts

@@ -19,7 +19,6 @@ export interface SideNavProps {
     onOverlayClick?: MouseEventHandler<HTMLDivElement> | undefined;
     onSideNavBlur?: () => void;
     enterDelayMs?: number;
-    inert?: boolean;
 }
 interface SideNavContextData {
     isRail?: boolean | undefined;

package/es/components/UIShell/SideNav.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, isValidElement, createContext } from 'react';
+import React, { forwardRef, useRef, isValidElement, useEffect, createContext } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
@@ -157,6 +157,16 @@ const SideNav = frFn((props, ref) => {
   });
   const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
   const isLg = useMatchMedia(lgMediaQuery);
+  const inertEnabled = !isRail ? !(expanded || isLg) : false;
+  useEffect(() => {
+    const node = sideNavRef.current;
+    if (!node) return;
+    if (inertEnabled) {
+      node.setAttribute('inert', '');
+    } else {
+      node.removeAttribute('inert');
+    }
+  }, [inertEnabled]);
   return /*#__PURE__*/React.createElement(SideNavContext.Provider, {
     value: {
       isRail
@@ -170,8 +180,7 @@ const SideNav = frFn((props, ref) => {
   }), /*#__PURE__*/React.createElement("nav", _extends({
     tabIndex: -1,
     ref: navRef,
-    className: `${prefix}--side-nav__navigation ${className}`,
-    inert: !isRail ? !(expanded || isLg) : undefined
+    className: `${prefix}--side-nav__navigation ${className}`
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
 });
 SideNav.displayName = 'SideNav';