@carbon/react 1.83.0-rc.0 → 1.83.0

package/lib/components/FileUploader/FileUploader.Skeleton.d.ts

@@ -1,12 +1,12 @@
 /**
- * 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 PropTypes from 'prop-types';
-import { ReactAttr } from '../../types/common';
-export interface FileUploaderSkeletonProps extends ReactAttr<HTMLDivElement> {
+import { type HTMLAttributes } from 'react';
+export interface FileUploaderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify an optional className to add.
      */

package/lib/components/FileUploader/FileUploader.d.ts

@@ -4,9 +4,8 @@
  * 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 { ReactAttr } from '../../types/common';
-export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
+import React, { type HTMLAttributes } from 'react';
+export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * Specify the types of files that this input should be able to receive
      */

package/lib/components/FileUploader/FileUploaderButton.d.ts

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React from 'react';
-import { ReactAttr } from '../../types/common';
-export interface FileUploaderButtonProps extends Omit<ReactAttr<HTMLButtonElement>, 'onChange' | 'tabIndex'> {
+import React, { type HTMLAttributes } from 'react';
+export interface FileUploaderButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'tabIndex'> {
     /**
      * Specify the types of files that this input should be able to receive
      */

package/lib/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -4,10 +4,9 @@
  * 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 HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { ReactAttr } from '../../types/common';
-export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButtonElement>, 'tabIndex'> {
+export interface FileUploaderDropContainerProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'tabIndex'> {
     /**
      * Specify the types of files that this input should be able to receive
      */

package/lib/components/FileUploader/FileUploaderItem.d.ts

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React from 'react';
-import { ReactAttr } from '../../types/common';
-export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
+import React, { type HTMLAttributes } from 'react';
+export interface FileUploaderItemProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * Error message body for an invalid file upload
      */

package/lib/components/FileUploader/Filename.d.ts

@@ -1,15 +1,14 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes } from 'react';
 export type FilenameStatus = 'edit' | 'complete' | 'uploading';
 type SVGAttr = React.SVGAttributes<React.ReactSVGElement>;
-export interface FilenameProps extends Omit<ReactAttr & SVGAttr, 'tabIndex' | 'type'> {
+export interface FilenameProps extends Omit<HTMLAttributes<HTMLElement> & SVGAttr, 'tabIndex' | 'type'> {
     /**
      * Specify an id that describes the error to be read by screen readers when the filename is invalid
      */

package/lib/components/FluidForm/FluidForm.d.ts

@@ -1,11 +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 from 'react';
-import { ReactAttr } from '../../types/common';
-export type FluidFormProps = ReactAttr<HTMLFormElement>;
+import React, { type HTMLAttributes } from 'react';
+export type FluidFormProps = HTMLAttributes<HTMLFormElement>;
 declare const FluidForm: React.FC<FluidFormProps>;
 export default FluidForm;

package/lib/components/FormGroup/FormGroup.d.ts

@@ -1,13 +1,12 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import { ReactAttr } from '../../types/common';
-export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
+import React, { type HTMLAttributes } from 'react';
+export interface FormGroupProps extends HTMLAttributes<HTMLFieldSetElement> {
     /**
      * Provide the children form elements to be rendered inside of the <fieldset>
      */

package/lib/components/Grid/GridContext.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 * as React from 'react';
+import React from 'react';
 export type GridMode = 'flexbox' | 'css-grid';
 export interface GridSettingContext {
     /**

package/lib/components/Grid/GridContext.js

@@ -14,32 +14,14 @@ var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
  * Provides a grid context for communication the grid "mode" (flexbox or
  * css-grid) along with subgrid information.
  */
-const GridSettingsContext = /*#__PURE__*/React__namespace.createContext({
+const GridSettingsContext = /*#__PURE__*/React__default["default"].createContext({
   mode: 'flexbox',
   subgrid: false
 });
@@ -49,13 +31,13 @@ const GridSettings = _ref => {
     mode,
     subgrid = false
   } = _ref;
-  const value = React__namespace.useMemo(() => {
+  const value = React__default["default"].useMemo(() => {
     return {
       mode,
       subgrid
     };
   }, [mode, subgrid]);
-  return /*#__PURE__*/React__namespace.createElement(GridSettingsContext.Provider, {
+  return /*#__PURE__*/React__default["default"].createElement(GridSettingsContext.Provider, {
     value: value
   }, children);
 };
@@ -80,7 +62,7 @@ GridSettings.propTypes = {
  * Helper function for accessing the GridContext value
  */
 const useGridSettings = () => {
-  return React__namespace.useContext(GridSettingsContext);
+  return React__default["default"].useContext(GridSettingsContext);
 };
 
 exports.GridSettings = GridSettings;

package/lib/components/IconButton/index.js

@@ -77,7 +77,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     isSelected: isSelected,
     hasIconOnly: true,
     className: className,
-    "aria-describedby": badgeCount && badgeId
+    "aria-describedby": rest['aria-describedby'] || badgeCount && badgeId
   }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default["default"].createElement(index.BadgeIndicator, {
     id: badgeId,
     count: badgeCount > 0 ? badgeCount : undefined
@@ -165,8 +165,13 @@ IconButton.propTypes = {
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
+   * If the child node already has an `aria-label`, the tooltip will not apply
+   * `aria-labelledby`. If the child node has `aria-labelledby`, that value will
+   * be used instead. Otherwise, the tooltip will use its own ID as the label.
    * This means that if you have text in the child node it will not be
    * announced to the screen reader.
+   * If using `badgeCount={0}`, make sure the label explains that there is a
+   * new notification.
    */
   label: PropTypes__default["default"].node.isRequired,
   /**

package/lib/components/Layer/index.d.ts

@@ -29,6 +29,10 @@ export interface LayerBaseProps {
      * Specify the layer level and override any existing levels based on hierarchy
      */
     level?: LayerLevel;
+    /**
+     * Applies a css background-color set to $layer-background
+     */
+    withBackground?: boolean;
 }
 export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
 declare const Layer: React.ForwardRefExoticComponent<LayerBaseProps & {

package/lib/components/Layer/index.js

@@ -41,12 +41,15 @@ const Layer = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
     className: customClassName,
     children,
     level: overrideLevel,
+    withBackground = false,
     ...rest
   } = _ref;
   const contextLevel = React__default["default"].useContext(LayerContext.LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix.usePrefix();
-  const className = cx__default["default"](`${prefix}--layer-${LayerLevel.levels[level]}`, customClassName);
+  const className = cx__default["default"](`${prefix}--layer-${LayerLevel.levels[level]}`, {
+    [`${prefix}--layer__with-background`]: withBackground
+  }, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
   const value = clamp.clamp(level + 1, LayerLevel.MIN_LEVEL, LayerLevel.MAX_LEVEL);
   const BaseComponent = as || 'div';
@@ -77,7 +80,11 @@ Layer.propTypes = {
   /**
    * Specify the layer level and override any existing levels based on hierarchy
    */
-  level: PropTypes__default["default"].oneOf([0, 1, 2])
+  level: PropTypes__default["default"].oneOf([0, 1, 2]),
+  /**
+   * Applies a css background-color set to $layer-background
+   */
+  withBackground: PropTypes__default["default"].bool
 };
 
 exports.Layer = Layer;

package/lib/components/Link/Link.js

@@ -45,7 +45,7 @@ const LinkBase = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   });
   const rel = target === '_blank' ? 'noopener' : undefined;
   const linkProps = {
-    className: BaseComponent ? undefined : className,
+    className,
     rel,
     target
   };

package/lib/components/ListBox/ListBox.d.ts

@@ -4,11 +4,10 @@
  * 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 HTMLAttributes } from 'react';
 import { type ListBoxSize, type ListBoxType } from '.';
-import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'onKeyDown' | 'onKeyPress' | 'ref';
-export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+export interface ListBoxProps extends Omit<HTMLAttributes<HTMLDivElement>, ExcludedAttributes> {
     /**
      * Specify whether the ListBox is currently disabled
      */

package/lib/components/ListBox/ListBoxField.d.ts

@@ -1,13 +1,12 @@
 /**
- * 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 from 'react';
-import { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes } from 'react';
 export declare const translationIds: {};
-export interface ListBoxFieldProps extends ReactAttr<HTMLDivElement> {
+export interface ListBoxFieldProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify if the parent <ListBox> is disabled
      */

package/lib/components/ListBox/ListBoxMenu.d.ts

@@ -4,10 +4,9 @@
  * 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 { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes } from 'react';
 type ExcludedAttributes = 'id';
-export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, ExcludedAttributes> {
+export interface ListBoxMenuProps extends Omit<HTMLAttributes<HTMLUListElement>, ExcludedAttributes> {
     children?: any;
     /**
      * Specify a custom `id`

package/lib/components/ListBox/ListBoxMenuItem.d.ts

@@ -4,9 +4,8 @@
  * 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 { ReactAttr } from '../../types/common';
-export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
+import React, { type HTMLAttributes, type ReactNode } from 'react';
+export interface ListBoxMenuItemProps extends HTMLAttributes<HTMLLIElement> {
     /**
      * Specify any children nodes that should be rendered inside of the ListBox
      * Menu Item

package/lib/components/Loading/Loading.d.ts

@@ -1,12 +1,12 @@
 /**
- * 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 PropTypes from 'prop-types';
-import { ReactAttr } from '../../types/common';
-export interface LoadingProps extends ReactAttr<HTMLDivElement> {
+import { type HTMLAttributes } from 'react';
+export interface LoadingProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify whether you want the loading indicator to be spinning or not
      */

package/lib/components/Modal/Modal.d.ts

@@ -4,8 +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 ReactNode, type Ref } from 'react';
-import { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
@@ -13,7 +12,7 @@ export interface ModalSecondaryButton {
     buttonText?: string | ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
-export interface ModalProps extends ReactAttr<HTMLDivElement> {
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify whether the Modal is displaying an alert, error or warning
      * Should go hand in hand with the danger prop.

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -555,11 +555,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       }
     }
   } : {};
-  const clearSelectionContent = controlledSelectedItems.length > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, ": 0");
+  const clearSelectionContent = controlledSelectedItems.length > 0 ? `${clearSelectionDescription} ${controlledSelectedItems.length}. ${clearSelectionText}.` : `${clearSelectionDescription} 0.`;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({

package/lib/components/SkeletonIcon/SkeletonIcon.d.ts

@@ -4,10 +4,6 @@ export interface SkeletonIconProps {
      * Specify an optional className to add.
      */
     className?: string;
-    /**
-     * The CSS styles.
-     */
-    style?: React.CSSProperties;
 }
 declare const SkeletonIcon: React.FC<SkeletonIconProps>;
 export default SkeletonIcon;

package/lib/components/SkeletonIcon/SkeletonIcon.js

@@ -38,11 +38,7 @@ SkeletonIcon.propTypes = {
   /**
    * Specify an optional className to add.
    */
-  className: PropTypes__default["default"].string,
-  /**
-   * The CSS styles.
-   */
-  style: PropTypes__default["default"].object
+  className: PropTypes__default["default"].string
 };
 
 exports["default"] = SkeletonIcon;

package/lib/components/TextInput/ControlledPasswordInput.d.ts

@@ -4,9 +4,8 @@
  * 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 { ReactAttr } from '../../types/common';
-export interface ControlledPasswordInputProps extends ReactAttr<HTMLInputElement> {
+import React, { type HTMLAttributes } from 'react';
+export interface ControlledPasswordInputProps extends HTMLAttributes<HTMLInputElement> {
     /**
      * Provide a custom className that is applied directly to the underlying
      * `<input>` node

package/lib/components/TileGroup/TileGroup.d.ts

@@ -1,14 +1,13 @@
 /**
- * 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 PropTypes from 'prop-types';
-import { ReactNode } from 'react';
-import { ReactAttr } from '../../types/common';
+import { type HTMLAttributes, type ReactNode } from 'react';
 type ExcludedAttributes = 'onChange';
-export interface TileGroupProps extends Omit<ReactAttr<HTMLFieldSetElement>, ExcludedAttributes> {
+export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
     /**
      * Provide a collection of <RadioTile> components to render in the group
      */

package/lib/components/TimePicker/TimePicker.d.ts

@@ -4,10 +4,9 @@
  * 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 { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes } from 'react';
 type ExcludedAttributes = 'id' | 'value';
-export interface TimePickerProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
+export interface TimePickerProps extends Omit<HTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
      * Pass in the children that will be rendered next to the form control
      */

package/lib/components/Tooltip/Tooltip.d.ts

@@ -54,6 +54,9 @@ interface TooltipBaseProps {
     /**
      * Provide the label to be rendered inside of the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
+     * If the child already has an `aria-label`, the tooltip will not apply
+     * `aria-labelledby`. If the child has its own `aria-labelledby`, that value
+     * will be kept. Otherwise, the tooltip will use its own ID to label the child.
      * This means that if you have text in the child node, that it will not be
      * announced to the screen reader.
      *

package/lib/components/Tooltip/Tooltip.js

@@ -56,6 +56,21 @@ const Tooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
   const id = useId.useId('tooltip');
   const prefix = usePrefix.usePrefix();
   const child = React__default["default"].Children.only(children);
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy
+  } = child?.props ?? {};
+  const hasLabel = !!label;
+  const hasAriaLabel = typeof ariaLabel === 'string' ? ariaLabel.trim() !== '' : false;
+
+  // 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;
+
+  // If `aria-label` is present, use any provided `aria-describedby`.
+  // If not, fallback to child's `aria-describedby` or the tooltip `id` if needed.
+  const describedBy = hasAriaLabel ? ariaDescribedBy : ariaDescribedBy ?? (!hasLabel && !ariaLabelledBy ? id : undefined);
   const triggerProps = {
     onFocus: () => !focusByMouse && setOpen(true),
     onBlur: () => {
@@ -68,7 +83,9 @@ const Tooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
     onMouseLeave,
     onMouseDown,
     onMouseMove: onMouseMove,
-    onTouchStart: onDragStart
+    onTouchStart: onDragStart,
+    'aria-labelledby': labelledBy,
+    'aria-describedby': describedBy
   };
   function getChildEventHandlers(childProps) {
     const eventHandlerFunctions = Object.keys(triggerProps).filter(prop => prop.startsWith('on'));
@@ -83,11 +100,6 @@ const Tooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
     });
     return eventHandlers;
   }
-  if (label) {
-    triggerProps['aria-labelledby'] = id;
-  } else {
-    triggerProps['aria-describedby'] = id;
-  }
   const onKeyDown = React.useCallback(event => {
     if (open && match.match(event, keys.Escape)) {
       event.stopPropagation();

package/lib/components/TreeView/TreeNode.js

@@ -80,19 +80,28 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
       forwardedRef.current = element;
     }
   };
-  const nodesWithProps = React__default["default"].Children.map(children, node => {
-    if (/*#__PURE__*/React__default["default"].isValidElement(node)) {
+  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';
+      if (isTreeNode) {
+        return /*#__PURE__*/React__default["default"].cloneElement(node, {
+          active,
+          depth: depth + 1,
+          disabled: disabled || node.props.disabled,
+          onTreeSelect,
+          onNodeFocusEvent,
+          selected,
+          tabIndex: node.props.disabled ? null : -1
+        });
+      }
+      const newChildren = enhanceTreeNodes(node.props.children);
       return /*#__PURE__*/React__default["default"].cloneElement(node, {
-        active,
-        depth: depth + 1,
-        disabled: disabled || node.props.disabled,
-        onTreeSelect,
-        onNodeFocusEvent,
-        selected,
-        tabIndex: !node.props.disabled && -1 || null
+        children: newChildren
       });
-    }
-  });
+    });
+  }
+  const nodesWithProps = enhanceTreeNodes(children);
   const isActive = active === id;
   const isSelected = selected.includes(id);
   const treeNodeClasses = cx__default["default"](className, `${prefix}--tree-node`, {

package/lib/components/TreeView/TreeView.js

@@ -121,24 +121,33 @@ const TreeView = _ref => {
     }
   }
   let focusTarget = false;
-  const nodesWithProps = React__default["default"].Children.map(children, _node => {
-    const node = _node;
-    const sharedNodeProps = {
-      active,
-      depth: 0,
-      onNodeFocusEvent: handleFocusEvent,
-      onTreeSelect: handleTreeSelect,
-      selected,
-      tabIndex: !node.props.disabled && -1 || undefined
-    };
-    if (!focusTarget && !node.props.disabled) {
-      sharedNodeProps.tabIndex = 0;
-      focusTarget = true;
-    }
-    if (/*#__PURE__*/React__default["default"].isValidElement(node)) {
-      return /*#__PURE__*/React__default["default"].cloneElement(node, sharedNodeProps);
-    }
-  });
+  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';
+      if (isTreeNode) {
+        const node = child;
+        const sharedNodeProps = {
+          active,
+          depth: 0,
+          onNodeFocusEvent: handleFocusEvent,
+          onTreeSelect: handleTreeSelect,
+          selected,
+          tabIndex: node.props.disabled ? undefined : -1
+        };
+        if (!focusTarget && !node.props.disabled) {
+          sharedNodeProps.tabIndex = 0;
+          focusTarget = true;
+        }
+        return /*#__PURE__*/React__default["default"].cloneElement(child, sharedNodeProps);
+      }
+      const newChildren = enhanceTreeNodes(child.props.children);
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        children: newChildren
+      });
+    });
+  }
+  const nodesWithProps = enhanceTreeNodes(children);
   function handleKeyDown(event) {
     event.stopPropagation();
     if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End])) {

package/lib/components/UIShell/HeaderGlobalBar.d.ts

@@ -7,5 +7,5 @@
 /**
  * Generic container for `HeaderGlobalAction` components
  */
-declare const HeaderGlobalBar: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
+declare const HeaderGlobalBar: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
 export default HeaderGlobalBar;