@carbon/react 1.84.0 → 1.85.0

package/lib/components/TextInput/TextInput.js

@@ -17,9 +17,12 @@ var deprecate = require('../../prop-types/deprecate.js');
 var util = require('./util.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var getAnnouncement = require('../../internal/getAnnouncement.js');
 require('../Text/index.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -58,7 +61,16 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     defaultValue,
     value
   } = rest;
-  const [textCount, setTextCount] = React.useState(defaultValue?.toString().length || value?.toString().length || 0);
+  const inputRef = React.useRef(null);
+  const mergedRef = useMergedRefs.useMergedRefs([ref, inputRef]);
+  function getInitialTextCount() {
+    const targetValue = defaultValue || value || inputRef.current?.value || '';
+    return targetValue.toString().length;
+  }
+  const [textCount, setTextCount] = React.useState(getInitialTextCount());
+  React.useEffect(() => {
+    setTextCount(getInitialTextCount());
+  }, [value, defaultValue, enableCounter]);
   const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
     id,
     readOnly,
@@ -91,7 +103,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     },
     placeholder,
     type,
-    ref,
+    ref: mergedRef,
     className: textInputClasses,
     title: placeholder,
     disabled: normalizedProps.disabled,
@@ -189,12 +201,11 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
   const Icon = normalizedProps.icon;
 
   // AILabel is always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'mini'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default["default"].createElement("div", {

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

@@ -26,6 +26,8 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
 var index = require('../FeatureFlags/index.js');
 var useId = require('../../internal/useId.js');
 require('../Text/index.js');
+var index$1 = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -234,7 +236,11 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   const clickHandler = onClick;
   const keyDownHandler = onKeyDown;
   const [isSelected, setIsSelected] = React.useState(selected);
-  const [prevSelected, setPrevSelected] = React.useState(selected);
+
+  // Use useEffect to sync with prop changes instead of render-time logic
+  React.useEffect(() => {
+    setIsSelected(selected);
+  }, [selected]);
   const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--selectable`, {
     [`${prefix}--tile--is-selected`]: isSelected,
     [`${prefix}--tile--light`]: light,
@@ -244,50 +250,40 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   }, className);
+
+  // Single function to handle selection changes
+  const handleSelectionChange = React.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 (match.matches(evt, [keys.Enter, keys.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 = React.useRef(null);
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'xs',
-      ref: decoratorRef
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'xs',
+    ref: decoratorRef
+  }) : null;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -302,7 +298,6 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
       tabIndex: !disabled ? tabIndex : undefined,
       ref: ref,
       id: id,
-      onChange: !disabled ? handleChange : undefined,
       title: title
     }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
@@ -515,12 +510,11 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   const belowTheFoldId = useId.useId('expandable-tile-interactive');
 
   // AILabel is always size `xs`
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'xs'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'xs'
+  }) : null;
   return interactive ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     className: interactiveClassNames

package/lib/components/Toggletip/index.js

@@ -98,6 +98,7 @@ function Toggletip({
     buttonProps: {
       'aria-expanded': open,
       'aria-controls': id,
+      'aria-describedby': open ? id : undefined,
       onClick: actions.toggle
     },
     contentProps: {
@@ -269,8 +270,7 @@ const ToggletipContent = /*#__PURE__*/React__default["default"].forwardRef(funct
   return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
     className: customClassName
   }, toggletip?.contentProps, {
-    ref: ref,
-    "aria-live": "polite"
+    ref: ref
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--toggletip-content`
   }, children));

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -67,6 +67,7 @@ const DefinitionTooltip = ({
   }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](`${prefix}--definition-term`, triggerClassName),
     "aria-controls": tooltipId,
+    "aria-describedby": tooltipId,
     "aria-expanded": isOpen,
     onBlur: () => {
       setOpen(false);

package/lib/components/Tooltip/Tooltip.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 from 'react';
+import React, { type JSX } from 'react';
 import { Popover, PopoverAlignment } from '../Popover';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 interface TooltipBaseProps {
@@ -15,7 +15,7 @@ interface TooltipBaseProps {
     /**
      * Pass in the child to which the tooltip will be applied
      */
-    children?: React.ReactElement<any>;
+    children?: React.ReactElement<JSX.IntrinsicElements[keyof JSX.IntrinsicElements]>;
     /**
      * Specify an optional className to be applied to the container node
      */

package/lib/components/Tooltip/Tooltip.js

@@ -65,7 +65,7 @@ const Tooltip = /*#__PURE__*/React__default["default"].forwardRef(({
 
   // An `aria-label` takes precedence over `aria-describedby`, but when it's
   // needed and the user doesn't specify one, the fallback `id` is used.
-  const labelledBy = hasAriaLabel ? null : hasLabel ? ariaLabelledBy ?? id : undefined;
+  const labelledBy = hasAriaLabel ? undefined : hasLabel ? ariaLabelledBy ?? id : undefined;
 
   // If `aria-label` is present, use any provided `aria-describedby`.
   // If not, fallback to child's `aria-describedby` or the tooltip `id` if needed.
@@ -185,7 +185,7 @@ const Tooltip = /*#__PURE__*/React__default["default"].forwardRef(({
     open: open
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tooltip-trigger__wrapper`
-  }, child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+  }, typeof child !== 'undefined' ? /*#__PURE__*/React__default["default"].cloneElement(child, {
     ...triggerProps,
     ...getChildEventHandlers(child.props)
   }) : null), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {

package/lib/components/TreeView/TreeNode.d.ts

@@ -78,6 +78,17 @@ export type TreeNodeProps = {
      * Optional: The URL the TreeNode is linking to
      */
     href?: string;
+    /**
+     *
+     * Specify how the trigger should align with the tooltip when text is truncated
+     */
+    align?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, 'onSelect'>;
 declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
@@ -152,5 +163,16 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
      * Optional: The URL the TreeNode is linking to
      */
     href?: string;
+    /**
+     *
+     * Specify how the trigger should align with the tooltip when text is truncated
+     */
+    align?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-end" | "left-start" | "right-end" | "right-start";
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, "onSelect"> & React.RefAttributes<HTMLElement>>;
 export default TreeNode;

package/lib/components/TreeView/TreeNode.js

@@ -18,8 +18,9 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var index = require('../FeatureFlags/index.js');
+var index$1 = require('../IconButton/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,6 +28,74 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const extractTextContent = node => {
+  if (node === null || node === undefined) return '';
+  if (typeof node === 'string') return node;
+  if (typeof node === 'number') return String(node);
+  if (typeof node === 'boolean') return String(node);
+  if (Array.isArray(node)) {
+    return node.map(extractTextContent).join('');
+  }
+  if (/*#__PURE__*/React__default["default"].isValidElement(node)) {
+    const element = node;
+    const children = element.props.children;
+    return extractTextContent(children);
+  }
+  return '';
+};
+const useEllipsisCheck = (label, detailsWrapperRef) => {
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  const labelTextRef = React.useRef(null);
+  const checkEllipsis = React.useCallback(() => {
+    const element = labelTextRef.current;
+    if (!element) {
+      setIsEllipsisApplied(false);
+      return;
+    }
+    if (element.offsetWidth === 0) {
+      setIsEllipsisApplied(false);
+      return;
+    }
+    const checkElement = detailsWrapperRef.current || element;
+    if (checkElement && checkElement.offsetWidth > 0) {
+      const isTextTruncated = element.scrollWidth > checkElement.offsetWidth;
+      setIsEllipsisApplied(isTextTruncated);
+    } else {
+      setIsEllipsisApplied(false);
+    }
+  }, [detailsWrapperRef]);
+  React.useEffect(() => {
+    let animationFrameId;
+    animationFrameId = requestAnimationFrame(checkEllipsis);
+    let resizeObserver;
+    if (typeof window !== 'undefined' && typeof window.ResizeObserver !== 'undefined' && labelTextRef.current) {
+      resizeObserver = new window.ResizeObserver(() => {
+        requestAnimationFrame(checkEllipsis);
+      });
+      resizeObserver.observe(labelTextRef.current);
+      if (detailsWrapperRef.current) {
+        resizeObserver.observe(detailsWrapperRef.current);
+      }
+    }
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      if (resizeObserver) {
+        if (labelTextRef.current) {
+          resizeObserver.unobserve(labelTextRef.current);
+        }
+        if (detailsWrapperRef.current) {
+          resizeObserver.unobserve(detailsWrapperRef.current);
+        }
+        resizeObserver.disconnect();
+      }
+    };
+  }, [checkEllipsis, detailsWrapperRef]);
+  return {
+    labelTextRef,
+    isEllipsisApplied,
+    tooltipText: extractTextContent(label)
+  };
+};
 const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
   active,
   children,
@@ -45,15 +114,22 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
   selected: propSelected,
   value,
   href,
+  align = 'bottom',
+  autoAlign = false,
   ...rest
 }, forwardedRef) => {
-  // These are provided by the parent TreeView component
   const depth = propDepth;
   const selected = propSelected;
+  const detailsWrapperRef = React.useRef(null);
+  const {
+    labelTextRef,
+    isEllipsisApplied,
+    tooltipText
+  } = useEllipsisCheck(label, detailsWrapperRef);
   const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: id
-  } = React.useRef(nodeId || uniqueId.uniqueId());
+  } = React.useRef(nodeId || useId.useId());
   const controllableExpandedState = useControllableState.useControllableState({
     value: isExpanded,
     onChange: newValue => {
@@ -71,6 +147,25 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
   const currentNode = React.useRef(null);
   const currentNodeLabel = React.useRef(null);
   const prefix = usePrefix.usePrefix();
+  const renderLabelText = () => {
+    if (isEllipsisApplied && tooltipText) {
+      return /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, {
+        label: tooltipText,
+        kind: "ghost",
+        align: align,
+        autoAlign: autoAlign,
+        className: `${prefix}--tree-node__label__text-button`,
+        wrapperClasses: `${prefix}--popover-container`
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        ref: labelTextRef,
+        className: `${prefix}--tree-node__label__text`
+      }, label));
+    }
+    return /*#__PURE__*/React__default["default"].createElement("span", {
+      ref: labelTextRef,
+      className: `${prefix}--tree-node__label__text`
+    }, label);
+  };
   const setRefs = element => {
     currentNode.current = element;
     if (typeof forwardedRef === 'function') {
@@ -82,7 +177,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
   function enhanceTreeNodes(children) {
     return React__default["default"].Children.map(children, node => {
       if (! /*#__PURE__*/React__default["default"].isValidElement(node)) return node;
-      const isTreeNode = node.type.displayName === 'TreeNode';
+      const isTreeNode = node.type === TreeNode;
       if (isTreeNode) {
         return /*#__PURE__*/React__default["default"].cloneElement(node, {
           active,
@@ -310,7 +405,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
         ref: currentNodeLabel
       }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
         className: `${prefix}--tree-node__icon`
-      }), label)));
+      }), renderLabelText())));
     } else {
       return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
         ref: setRefs
@@ -319,7 +414,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
         ref: currentNodeLabel
       }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
         className: `${prefix}--tree-node__icon`
-      }), label));
+      }), renderLabelText()));
     }
   }
   if (href) {
@@ -342,10 +437,11 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
     }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
       className: toggleClasses
     })), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-node__label__details`
+      className: `${prefix}--tree-node__label__details`,
+      ref: detailsWrapperRef
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label))), /*#__PURE__*/React__default["default"].createElement("ul", {
+    }), renderLabelText()))), /*#__PURE__*/React__default["default"].createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx__default["default"](`${prefix}--tree-node__children`, {
@@ -368,10 +464,11 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
     }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
       className: toggleClasses
     })), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-node__label__details`
+      className: `${prefix}--tree-node__label__details`,
+      ref: detailsWrapperRef
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label)), /*#__PURE__*/React__default["default"].createElement("ul", {
+    }), renderLabelText())), /*#__PURE__*/React__default["default"].createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx__default["default"](`${prefix}--tree-node__children`, {
@@ -454,7 +551,17 @@ TreeNode.propTypes = {
   /**
    * Optional: The URL the TreeNode is linking to
    */
-  href: PropTypes__default["default"].string
+  href: PropTypes__default["default"].string,
+  /**
+   * Specify how the tooltip should align when text is truncated
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  /**
+   * **Experimental**: Will attempt to automatically align the floating
+   * element to avoid collisions with the viewport and being clipped by
+   * ancestor elements.
+   */
+  autoAlign: PropTypes__default["default"].bool
 };
 TreeNode.displayName = 'TreeNode';
 

package/lib/components/TreeView/TreeView.js

@@ -17,7 +17,7 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var index = require('../FeatureFlags/index.js');
 var TreeNode = require('./TreeNode.js');
 
@@ -43,7 +43,7 @@ const TreeView = ({
   const enableTreeviewControllable = index.useFeatureFlag('enable-treeview-controllable');
   const {
     current: treeId
-  } = React.useRef(rest.id || uniqueId.uniqueId());
+  } = React.useRef(rest.id || useId.useId());
   const prefix = usePrefix.usePrefix();
   const treeClasses = cx__default["default"](className, `${prefix}--tree`, {
     // @ts-ignore - will always be false according to prop types
@@ -122,7 +122,7 @@ const TreeView = ({
   function enhanceTreeNodes(children) {
     return React__default["default"].Children.map(children, child => {
       if (! /*#__PURE__*/React__default["default"].isValidElement(child)) return child;
-      const isTreeNode = child.type.displayName === 'TreeNode';
+      const isTreeNode = child.type === TreeNode["default"];
       if (isTreeNode) {
         const node = child;
         const sharedNodeProps = {

package/lib/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/lib/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/lib/components/UIShell/HeaderPanel.js

@@ -18,6 +18,7 @@ var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var useEvent = require('../../internal/useEvent.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
+var Switcher = require('./Switcher.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -68,10 +69,13 @@ const HeaderPanel = /*#__PURE__*/React__default["default"].forwardRef(function H
     };
   }
   useEvent.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__*/React.isValidElement(children) && typeof children.type !== 'string' && children.type === Switcher["default"];
+    if (isChildASwitcher && !activeElement.closest(`.${prefix}--header-panel--expanded`) && !activeElement.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();
     }

package/lib/internal/Selection.js

@@ -25,9 +25,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/lib/internal/environment.js

@@ -14,17 +14,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *
  * @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);
 
 exports.canUseDOM = canUseDOM;