@carbon/react 1.84.0-rc.0 → 1.85.0-rc.0

package/es/components/TextInput/TextInput.js

@@ -6,16 +6,19 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useState, useContext, useRef, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useContext, cloneElement } from 'react';
 import cx from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { getAnnouncement } from '../../internal/getAnnouncement.js';
 import '../Text/index.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
@@ -48,7 +51,16 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
     defaultValue,
     value
   } = rest;
-  const [textCount, setTextCount] = useState(defaultValue?.toString().length || value?.toString().length || 0);
+  const inputRef = useRef(null);
+  const mergedRef = useMergedRefs([ref, inputRef]);
+  function getInitialTextCount() {
+    const targetValue = defaultValue || value || inputRef.current?.value || '';
+    return targetValue.toString().length;
+  }
+  const [textCount, setTextCount] = useState(getInitialTextCount());
+  useEffect(() => {
+    setTextCount(getInitialTextCount());
+  }, [value, defaultValue, enableCounter]);
   const normalizedProps = useNormalizedInputProps({
     id,
     readOnly,
@@ -81,7 +93,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
     },
     placeholder,
     type,
-    ref,
+    ref: mergedRef,
     className: textInputClasses,
     title: placeholder,
     disabled: normalizedProps.disabled,
@@ -179,12 +191,11 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
   const Icon = normalizedProps.icon;
 
   // AILabel is always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'mini'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React.createElement("div", {

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

@@ -4,7 +4,7 @@
  * 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, { type ChangeEvent, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
+import React, { type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
 export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
@@ -105,7 +105,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The empty handler of the `<input>`.
      */
-    onChange?(event: ChangeEvent<HTMLDivElement>, selected?: boolean, id?: string): void;
+    onChange?(event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>, selected?: boolean, id?: string): void;
     /**
      * Specify the function to run when the SelectableTile is clicked
      */

package/es/components/Tile/Tile.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useRef, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
@@ -22,6 +22,8 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { useId } from '../../internal/useId.js';
 import '../Text/index.js';
+import { AILabel } from '../AILabel/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { Text } from '../Text/Text.js';
 
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
@@ -224,7 +226,11 @@ const SelectableTile = /*#__PURE__*/React.forwardRef(function SelectableTile({
   const clickHandler = onClick;
   const keyDownHandler = onKeyDown;
   const [isSelected, setIsSelected] = useState(selected);
-  const [prevSelected, setPrevSelected] = useState(selected);
+
+  // Use useEffect to sync with prop changes instead of render-time logic
+  useEffect(() => {
+    setIsSelected(selected);
+  }, [selected]);
   const classes = cx(`${prefix}--tile`, `${prefix}--tile--selectable`, {
     [`${prefix}--tile--is-selected`]: isSelected,
     [`${prefix}--tile--light`]: light,
@@ -234,50 +240,40 @@ const SelectableTile = /*#__PURE__*/React.forwardRef(function SelectableTile({
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
+
+  // Single function to handle selection changes
+  const handleSelectionChange = useCallback((evt, newSelected) => {
+    setIsSelected(newSelected);
+    onChange(evt, newSelected, id);
+  }, [onChange, id]);
   function handleClick(evt) {
     evt.preventDefault();
     evt?.persist?.();
-    if (normalizedDecorator && decoratorRef.current && decoratorRef.current.contains(evt.target)) {
+    if (normalizedDecorator && decoratorRef.current && evt.target instanceof Node && decoratorRef.current.contains(evt.target)) {
       return;
     }
-    setIsSelected(prevSelected => {
-      const newSelected = !prevSelected;
-      onChange(evt, newSelected, id);
-      return newSelected;
-    });
+    const newSelected = !isSelected;
+    handleSelectionChange(evt, newSelected);
     clickHandler(evt);
   }
   function handleKeyDown(evt) {
     evt?.persist?.();
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
-      setIsSelected(prevSelected => {
-        const newSelected = !prevSelected;
-        onChange(evt, newSelected, id);
-        return newSelected;
-      });
+      const newSelected = !isSelected;
+      handleSelectionChange(evt, newSelected);
     }
     keyDownHandler(evt);
   }
-  function handleChange(event) {
-    const newSelected = event.target.checked;
-    setIsSelected(newSelected);
-    onChange(event, newSelected, id);
-  }
-  if (selected !== prevSelected) {
-    setIsSelected(selected);
-    setPrevSelected(selected);
-  }
 
   // AILabel is always size `xs`
   const decoratorRef = useRef(null);
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'xs',
-      ref: decoratorRef
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'xs',
+    ref: decoratorRef
+  }) : null;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -292,7 +288,6 @@ const SelectableTile = /*#__PURE__*/React.forwardRef(function SelectableTile({
       tabIndex: !disabled ? tabIndex : undefined,
       ref: ref,
       id: id,
-      onChange: !disabled ? handleChange : undefined,
       title: title
     }, rest), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
@@ -505,12 +500,11 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(function ExpandableTile({
   const belowTheFoldId = useId('expandable-tile-interactive');
 
   // AILabel is always size `xs`
-  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
-      size: 'xs'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = isComponentElement(candidate, AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
+    size: 'xs'
+  }) : null;
   return interactive ? /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: interactiveClassNames

package/es/components/TileGroup/TileGroup.d.ts

@@ -45,8 +45,9 @@ export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>
      */
     required?: boolean;
 }
-declare const TileGroup: {
-    (props: any): import("react/jsx-runtime").JSX.Element;
+export declare const TileGroup: {
+    ({ children, className, defaultSelected, disabled, legend, name, onChange, valueSelected, required, }: TileGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
     propTypes: {
         /**
          * Provide a collection of <RadioTile> components to render in the group
@@ -86,6 +87,5 @@ declare const TileGroup: {
          */
         valueSelected: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
     };
-    displayName: string;
 };
-export default TileGroup;
+export {};

package/es/components/TileGroup/TileGroup.js

@@ -7,40 +7,42 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import RadioTile from '../RadioTile/RadioTile.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-const TileGroup = props => {
-  const {
-    children,
-    className,
-    defaultSelected,
-    disabled,
-    legend,
-    name,
-    onChange = noopFn,
-    valueSelected,
-    required
-  } = props;
+const TileGroup = ({
+  children,
+  className,
+  defaultSelected,
+  disabled,
+  legend,
+  name,
+  onChange = noopFn,
+  valueSelected,
+  required
+}) => {
   const prefix = usePrefix();
   const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
-  const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
+  useEffect(() => {
+    if (typeof valueSelected !== 'undefined' && valueSelected !== selected) {
+      setSelected(valueSelected);
+    }
+  }, [valueSelected, selected]);
+  const handleChange = (value, name, evt) => {
+    if (value !== selected) {
+      setSelected(value);
+      onChange(value, name ?? '', evt);
+    }
+  };
+  const getRadioTilesWithWrappers = elements => {
+    const traverseAndModifyChildren = elements => {
+      return Children.map(elements, child => {
+        if (! /*#__PURE__*/isValidElement(child)) return child;
 
-  /**
-   * prop + state alignment - getDerivedStateFromProps
-   * only update if selected prop changes
-   */
-  if (valueSelected !== prevValueSelected) {
-    setSelected(valueSelected);
-    setPrevValueSelected(valueSelected);
-  }
-  const getRadioTilesWithWrappers = children => {
-    const traverseAndModifyChildren = children => {
-      return React.Children.map(children, child => {
-        // If RadioTile found, return it with necessary props
-        if (child?.type === RadioTile) {
+        // If a `RadioTile` is found, return it with necessary props,
+        if (/*#__PURE__*/isValidElement(child) && child.type === RadioTile) {
           const {
             value,
             ...otherProps
@@ -53,38 +55,29 @@ const TileGroup = props => {
             onChange: handleChange,
             checked: value === selected
           }));
-        } else if (child?.props?.children) {
-          // If the child is not RadioTile and has children, recheck the children
-          return /*#__PURE__*/React.cloneElement(child, {
-            ...child.props,
-            children: traverseAndModifyChildren(child.props.children)
-          });
-        } else {
-          // If the child is neither a RadioTile nor has children, return it as is
-          return child;
         }
+
+        // If the child is not RadioTile and has children, recheck the children
+        const children = child.props.children;
+        const hasChildren = Children.count(children) > 0;
+        if (hasChildren) {
+          return /*#__PURE__*/cloneElement(child, undefined, traverseAndModifyChildren(children));
+        }
+
+        // If the child is neither a RadioTile nor has children, return it as is
+        return child;
       });
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, traverseAndModifyChildren(children));
-  };
-  const handleChange = (newSelection, value, evt) => {
-    if (newSelection !== selected) {
-      setSelected(newSelection);
-      onChange(newSelection, name, evt);
-    }
-  };
-  const renderLegend = legend => {
-    if (legend) {
-      return /*#__PURE__*/React.createElement("legend", {
-        className: `${prefix}--label`
-      }, legend);
-    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, traverseAndModifyChildren(elements));
   };
   return /*#__PURE__*/React.createElement("fieldset", {
     className: className ?? `${prefix}--tile-group`,
     disabled: disabled
-  }, renderLegend(legend), /*#__PURE__*/React.createElement("div", null, getRadioTilesWithWrappers(children)));
+  }, legend && /*#__PURE__*/React.createElement("legend", {
+    className: `${prefix}--label`
+  }, legend), /*#__PURE__*/React.createElement("div", null, getRadioTilesWithWrappers(children)));
 };
+TileGroup.displayName = 'TileGroup';
 TileGroup.propTypes = {
   /**
    * Provide a collection of <RadioTile> components to render in the group
@@ -124,6 +117,5 @@ TileGroup.propTypes = {
    */
   valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-TileGroup.displayName = 'TileGroup';
 
-export { TileGroup as default };
+export { TileGroup };

package/es/components/TileGroup/index.d.ts

@@ -1,9 +1,9 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 TileGroup, { type TileGroupProps } from './TileGroup';
+import { TileGroup } from './TileGroup';
 export default TileGroup;
-export { TileGroup, type TileGroupProps };
+export * from './TileGroup';

package/es/components/Toggletip/index.js

@@ -88,6 +88,7 @@ function Toggletip({
     buttonProps: {
       'aria-expanded': open,
       'aria-controls': id,
+      'aria-describedby': open ? id : undefined,
       onClick: actions.toggle
     },
     contentProps: {
@@ -259,8 +260,7 @@ const ToggletipContent = /*#__PURE__*/React.forwardRef(function ToggletipContent
   return /*#__PURE__*/React.createElement(PopoverContent, _extends({
     className: customClassName
   }, toggletip?.contentProps, {
-    ref: ref,
-    "aria-live": "polite"
+    ref: ref
   }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--toggletip-content`
   }, children));

package/es/components/Tooltip/DefinitionTooltip.js

@@ -57,6 +57,7 @@ const DefinitionTooltip = ({
   }, /*#__PURE__*/React.createElement("button", _extends({}, rest, {
     className: cx(`${prefix}--definition-term`, triggerClassName),
     "aria-controls": tooltipId,
+    "aria-describedby": tooltipId,
     "aria-expanded": isOpen,
     onBlur: () => {
       setOpen(false);

package/es/components/TreeView/TreeNode.js

@@ -14,7 +14,7 @@ import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/key
 import { matches, match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { uniqueId } from '../../tools/uniqueId.js';
+import { useId } from '../../internal/useId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 
 const TreeNode = /*#__PURE__*/React.forwardRef(({
@@ -43,7 +43,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   const enableTreeviewControllable = useFeatureFlag('enable-treeview-controllable');
   const {
     current: id
-  } = useRef(nodeId || uniqueId());
+  } = useRef(nodeId || useId());
   const controllableExpandedState = useControllableState({
     value: isExpanded,
     onChange: newValue => {
@@ -72,7 +72,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   function enhanceTreeNodes(children) {
     return React.Children.map(children, node => {
       if (! /*#__PURE__*/React.isValidElement(node)) return node;
-      const isTreeNode = node.type.displayName === 'TreeNode';
+      const isTreeNode = node.type === TreeNode;
       if (isTreeNode) {
         return /*#__PURE__*/React.cloneElement(node, {
           active,

package/es/components/TreeView/TreeView.js

@@ -13,7 +13,7 @@ import { ArrowUp, ArrowDown, Home, End } from '../../internal/keyboard/keys.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { uniqueId } from '../../tools/uniqueId.js';
+import { useId } from '../../internal/useId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import TreeNode from './TreeNode.js';
 
@@ -33,7 +33,7 @@ const TreeView = ({
   const enableTreeviewControllable = useFeatureFlag('enable-treeview-controllable');
   const {
     current: treeId
-  } = useRef(rest.id || uniqueId());
+  } = useRef(rest.id || useId());
   const prefix = usePrefix();
   const treeClasses = cx(className, `${prefix}--tree`, {
     // @ts-ignore - will always be false according to prop types
@@ -112,7 +112,7 @@ const TreeView = ({
   function enhanceTreeNodes(children) {
     return React.Children.map(children, child => {
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
-      const isTreeNode = child.type.displayName === 'TreeNode';
+      const isTreeNode = child.type === TreeNode;
       if (isTreeNode) {
         const node = child;
         const sharedNodeProps = {

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

@@ -75,6 +75,8 @@ declare const Content: {
         inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -149,7 +151,7 @@ declare const Content: {
         onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
         onChange?: React.FormEventHandler<HTMLElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
         onInput?: React.FormEventHandler<HTMLElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
@@ -199,8 +201,6 @@ declare const Content: {
         onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
@@ -281,6 +281,8 @@ declare const Content: {
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;

package/es/components/UIShell/HeaderMenuItem.js

@@ -24,6 +24,7 @@ const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem({
   ...rest
 }, ref) {
   const prefix = usePrefix();
+  const resolvedTabIndex = tabIndex ?? 0;
   if (isCurrentPage) {
     isActive = isCurrentPage;
   }
@@ -42,7 +43,7 @@ const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem({
     "aria-current": hasCurrentClass ? true : ariaCurrent,
     className: linkClassName,
     ref: ref,
-    tabIndex: tabIndex
+    tabIndex: resolvedTabIndex
   }), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));

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

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface HeaderPanelProps {
     /**
      * Specify whether focus and blur listeners are added. They are by default.

package/es/components/UIShell/HeaderPanel.js

@@ -8,12 +8,13 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, isValidElement } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import Switcher from './Switcher.js';
 
 const noopFn = () => {};
 const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel({
@@ -58,10 +59,13 @@ const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel({
     };
   }
   useWindowEvent('click', () => {
-    const focusedElement = document.activeElement;
-    setLastClickedElement(focusedElement);
-    const childJsxElement = children;
-    if (childJsxElement?.type?.displayName === 'Switcher' && !focusedElement?.closest(`.${prefix}--header-panel--expanded`) && !focusedElement?.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+    const {
+      activeElement
+    } = document;
+    if (!(activeElement instanceof HTMLElement)) return;
+    setLastClickedElement(activeElement);
+    const isChildASwitcher = /*#__PURE__*/isValidElement(children) && typeof children.type !== 'string' && children.type === Switcher;
+    if (isChildASwitcher && !activeElement.closest(`.${prefix}--header-panel--expanded`) && !activeElement.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();
     }

package/es/index.js

@@ -148,7 +148,7 @@ export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skel
 export { default as TextInput } from './components/TextInput/TextInput.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
-export { default as TileGroup } from './components/TileGroup/TileGroup.js';
+export { TileGroup } from './components/TileGroup/TileGroup.js';
 export { default as TimePicker } from './components/TimePicker/TimePicker.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/TimePickerSelect.js';
 export { Toggle } from './components/Toggle/Toggle.js';

package/es/internal/Selection.js

@@ -17,9 +17,14 @@ const callOnChangeHandler = ({
 }) => {
   if (isControlled) {
     if (isMounted && onChangeHandlerControlled) {
-      onChangeHandlerControlled({
-        selectedItems
-      });
+      // Use setTimeout to defer the controlled onChange call,
+      // avoiding React’s warning: "Cannot update a component while rendering a different component".
+      // This ensures the parent state updates after rendering completes.
+      setTimeout(() => {
+        onChangeHandlerControlled({
+          selectedItems
+        });
+      }, 0);
     }
   } else {
     onChangeHandlerUncontrolled(selectedItems);

package/es/internal/environment.js

@@ -10,17 +10,6 @@
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-const canUseDOM = !!(typeof window !== 'undefined' &&
-// TODO: `ssr-friendly` doesn't support ESLint v9.
-// https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
-// https://github.com/carbon-design-system/carbon/issues/18991
-/*
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-*/
-window.document &&
-/*
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-*/
-window.document.createElement);
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
 export { canUseDOM };

package/es/internal/{__mocks__/mockHTMLElement.d.ts → index.d.ts}

@@ -1,9 +1,7 @@
 /**
- * Copyright IBM Corp. 2025, 2025
+ * Copyright IBM Corp. 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export declare const mockHTMLElement: (options: HTMLElement) => {
-    mockRestore: () => void;
-};
+export * from './utils';

package/es/internal/useOverflowItems.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 { ReactNode, RefObject } from 'react';
+type Item = {
+    id: string;
+};
+/**
+ * Manages overflow items in a container by automatically hiding items that don't fit.
+ * @param items - Array of items to manage for overflow, each must have an `id` property.
+ * @param containerRef - React ref to the container element that holds the items.
+ * @param offsetRef - Optional ref to an offset element (like a "more" button) whose width is reserved when calculating available space.
+ * @param maxItems - Optional maximum number of visible items. If undefined, only container space constrains visibility.
+ * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
+ * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
+ */
+declare const useOverflowItems: <T extends Item>(items: T[] | ReactNode, containerRef: RefObject<HTMLDivElement>, offsetRef?: RefObject<HTMLDivElement>, maxItems?: number, onChange?: (hiddenItems: T[]) => void) => {
+    visibleItems: T[];
+    hiddenItems: T[];
+    itemRefHandler: () => void;
+} | {
+    visibleItems: T[];
+    itemRefHandler: (id: string, node: HTMLDivElement | null) => () => void;
+    hiddenItems: T[];
+};
+export default useOverflowItems;