@carbon/react 1.85.1 → 1.86.0

package/lib/components/Tile/Tile.js

@@ -86,11 +86,11 @@ Tile.propTypes = {
    *
    * @deprecated
    */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
+  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
    */
-  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
+  slug: deprecate.deprecate(PropTypes__default["default"].node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
 const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function ClickableTile({
   children,
@@ -197,7 +197,7 @@ ClickableTile.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `ClickableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
+  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `ClickableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
   /**
    * Specify the function to run when the ClickableTile is clicked
    */
@@ -334,12 +334,12 @@ SelectableTile.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `SelectableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
+  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `SelectableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
   /**
    * The `name` of the `<input>`.
    * @deprecated
    */
-  name: deprecate["default"](PropTypes__default["default"].string, 'The `name` property is no longer used.  It will be removed in the next major release.'),
+  name: deprecate.deprecate(PropTypes__default["default"].string, 'The `name` property is no longer used.  It will be removed in the next major release.'),
   /**
    * The empty handler of the `<input>`.
    */
@@ -359,7 +359,7 @@ SelectableTile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
    */
-  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `SelectableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
+  slug: deprecate.deprecate(PropTypes__default["default"].node, 'The `slug` prop for `SelectableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Specify the tab index of the wrapper element
    */
@@ -372,7 +372,7 @@ SelectableTile.propTypes = {
    * The value of the `<input>`.
    * @deprecated
    */
-  value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
+  value: deprecate.deprecate(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
 const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableTile({
   tabIndex = 0,
@@ -584,7 +584,7 @@ ExpandableTile.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `ExpandableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
+  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `ExpandableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
   /**
    * Specify the function to run when the ExpandableTile is clicked
    */
@@ -596,7 +596,7 @@ ExpandableTile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
    */
-  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop for `ExpandableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
+  slug: deprecate.deprecate(PropTypes__default["default"].node, 'The `slug` prop for `ExpandableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * The `tabindex` attribute.
    */

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

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import { type HTMLAttributes, type ReactNode } from 'react';
 type ExcludedAttributes = 'onChange';
-export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
+export interface TileGroupProps<T = string | number> extends Omit<HTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
     /**
      * Provide a collection of <RadioTile> components to render in the group
      */
@@ -19,7 +19,7 @@ export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>
     /**
      * Specify the the value of <RadioTile> to be selected by default
      */
-    defaultSelected?: string | number;
+    defaultSelected?: T;
     /**
      * Specify whether the group is disabled
      */
@@ -35,18 +35,18 @@ export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>
     /**
      * Provide an optional `onChange` hook that is called whenever the value of the group changes
      */
-    onChange?: (selection: unknown, name: string, evt: unknown) => void;
+    onChange?: (selection: T, name: string, evt: unknown) => void;
     /**
      * Specify the value that is currently selected in the group
      */
-    valueSelected?: string | number;
+    valueSelected?: T;
     /**
      * `true` to specify if input selection in group is required.
      */
     required?: boolean;
 }
 export declare const TileGroup: {
-    ({ children, className, defaultSelected, disabled, legend, name, onChange, valueSelected, required, }: TileGroupProps): import("react/jsx-runtime").JSX.Element;
+    <T extends string | number = string>({ children, className, defaultSelected, disabled, legend, name, onChange, valueSelected, required, }: TileGroupProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     propTypes: {
         /**

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

@@ -15,6 +15,14 @@ export interface TimePickerProps extends Omit<HTMLAttributes<HTMLInputElement>,
      * Specify an optional className to be applied to the container node
      */
     className?: string;
+    /**
+     * Specify an optional className to be applied to the `<input>` node
+     */
+    inputClassName?: string;
+    /**
+     * Specify an optional className to be applied to the container that wraps the `<input>` and select option
+     */
+    pickerClassName?: string;
     /**
      * Specify whether the `<input>` should be disabled
      */

package/lib/components/TimePicker/TimePicker.js

@@ -28,6 +28,8 @@ const TimePicker = frFn((props, ref) => {
   const {
     children,
     className,
+    inputClassName,
+    pickerClassName,
     disabled = false,
     hideLabel,
     id,
@@ -78,7 +80,7 @@ const TimePicker = frFn((props, ref) => {
       onBlur(evt);
     }
   }
-  const timePickerInputClasses = cx__default["default"](`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [className], {
+  const timePickerInputClasses = cx__default["default"](`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
     [`${prefix}--text-input--light`]: light,
     [`${prefix}--time-picker__input-field-error`]: invalid || warning
   });
@@ -89,8 +91,8 @@ const TimePicker = frFn((props, ref) => {
     [`${prefix}--time-picker--warning`]: warning,
     [`${prefix}--time-picker--readonly`]: readOnly,
     [`${prefix}--time-picker--${size}`]: size,
-    ...(className && {
-      [className]: true
+    ...(pickerClassName && {
+      [pickerClassName]: true
     })
   });
   const labelClasses = cx__default["default"](`${prefix}--label`, {
@@ -204,7 +206,7 @@ TimePicker.propTypes = {
   /**
    * The `light` prop for `TimePicker` has been deprecated. It will be removed in v12. Use the `Layer` component instead.
    */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead.'),
+  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead.'),
   /**
    * Specify the maximum length of the time string in `<input>`
    */

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

@@ -1,5 +1,5 @@
 /**
- * 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.

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -145,7 +145,7 @@ DefinitionTooltip.propTypes = {
    *
    * Provide the text that will be displayed in the tooltip when it is rendered.
    */
-  tooltipText: deprecate["default"](PropTypes__default["default"].node, 'The tooltipText prop has been deprecated. Please use the `definition` prop instead.'),
+  tooltipText: deprecate.deprecate(PropTypes__default["default"].node, 'The tooltipText prop has been deprecated. Please use the `definition` prop instead.'),
   /**
    * The CSS class name of the trigger element
    */

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

@@ -0,0 +1,19 @@
+/**
+ * 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 { type MouseEvent } from 'react';
+import type { TreeNodeProps } from './TreeNode';
+interface TreeContextProps {
+    active?: string | number;
+    multiselect?: boolean;
+    onActivate?: (nodeId?: string | number) => void;
+    onTreeSelect?: (event: MouseEvent, node?: Partial<TreeNodeProps>) => void;
+    selected?: Array<string | number>;
+    size?: 'xs' | 'sm';
+}
+export declare const TreeContext: import("react").Context<TreeContextProps | null>;
+export declare const DepthContext: import("react").Context<number>;
+export {};

package/lib/components/TreeView/TreeContext.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const TreeContext = /*#__PURE__*/React.createContext(null);
+const DepthContext = /*#__PURE__*/React.createContext(-1);
+
+exports.DepthContext = DepthContext;
+exports.TreeContext = TreeContext;

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

@@ -52,11 +52,11 @@ export type TreeNodeProps = {
     /**
      * Callback function for when the node is selected
      */
-    onSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    onSelect?: (event: React.MouseEvent, node?: Omit<TreeNodeProps, 'children'>) => void;
     /**
      * Callback function for when a parent node is expanded or collapsed
      */
-    onToggle?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    onToggle?: (event: React.MouseEvent | React.KeyboardEvent, node?: Omit<TreeNodeProps, 'children'>) => void;
     /**
      * Callback function for when any node in the tree is selected
      */
@@ -137,11 +137,11 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * Callback function for when the node is selected
      */
-    onSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    onSelect?: (event: React.MouseEvent, node?: Omit<TreeNodeProps, "children">) => void;
     /**
      * Callback function for when a parent node is expanded or collapsed
      */
-    onToggle?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
+    onToggle?: (event: React.MouseEvent | React.KeyboardEvent, node?: Omit<TreeNodeProps, "children">) => void;
     /**
      * Callback function for when any node in the tree is selected
      */

package/lib/components/TreeView/TreeNode.js

@@ -21,6 +21,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('../IconButton/index.js');
+var TreeContext = require('./TreeContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -97,29 +98,36 @@ const useEllipsisCheck = (label, detailsWrapperRef) => {
   };
 };
 const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
-  active,
   children,
   className,
-  depth: propDepth,
   disabled,
   id: nodeId,
   isExpanded,
   defaultIsExpanded,
   label,
-  onNodeFocusEvent,
   onSelect: onNodeSelect,
   onToggle,
-  onTreeSelect,
   renderIcon: Icon,
-  selected: propSelected,
   value,
   href,
   align = 'bottom',
   autoAlign = false,
+  // These props are fallback props if the TreeContext is not available or only TreeNode is used as a standalone component
+  active: propActive,
+  depth: propDepth,
+  selected: propSelected,
+  onTreeSelect: propOnTreeSelect,
+  onNodeFocusEvent,
   ...rest
 }, forwardedRef) => {
-  const depth = propDepth;
-  const selected = propSelected;
+  const treeContext = React.useContext(TreeContext.TreeContext);
+  const contextDepth = React.useContext(TreeContext.DepthContext);
+
+  // Prioritize direct props, and fall back to context values.
+  const depth = propDepth ?? (contextDepth !== -1 ? contextDepth : 0);
+  const active = propActive ?? treeContext?.active;
+  const selected = propSelected ?? treeContext?.selected ?? [];
+  const onTreeSelect = propOnTreeSelect ?? treeContext?.onTreeSelect;
   const detailsWrapperRef = React.useRef(null);
   const {
     labelTextRef,
@@ -174,30 +182,8 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
       forwardedRef.current = element;
     }
   };
-  function enhanceTreeNodes(children) {
-    return React__default["default"].Children.map(children, node => {
-      if (! /*#__PURE__*/React__default["default"].isValidElement(node)) return node;
-      const isTreeNode = node.type === 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, {
-        children: newChildren
-      });
-    });
-  }
-  const nodesWithProps = enhanceTreeNodes(children);
   const isActive = active === id;
-  const isSelected = selected.includes(id);
+  const isSelected = selected?.includes(id) ?? false;
   const treeNodeClasses = cx__default["default"](className, `${prefix}--tree-node`, {
     [`${prefix}--tree-node--active`]: isActive,
     [`${prefix}--tree-node--disabled`]: disabled,
@@ -299,7 +285,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
          * When focus is on an expanded parent node, move focus to the first
          * child node
          */
-        getFocusableNode(href ? currentNode.current?.parentElement?.lastChild?.firstChild : currentNode.current?.lastChild?.firstChild).focus();
+        getFocusableNode(href ? currentNode.current?.parentElement?.lastChild?.firstChild : currentNode.current?.lastChild?.firstChild)?.focus();
       } else {
         if (!enableTreeviewControllable) {
           onToggle?.(event, {
@@ -334,12 +320,12 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
     rest?.onKeyDown?.(event);
   }
   function handleFocusEvent(event) {
-    if (event.type === 'blur') {
-      rest?.onBlur?.(event);
-    }
     if (event.type === 'focus') {
       rest?.onFocus?.(event);
     }
+    if (event.type === 'blur') {
+      rest?.onBlur?.(event);
+    }
     onNodeFocusEvent?.(event);
   }
   React.useEffect(() => {
@@ -379,6 +365,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
       setExpanded(isExpanded ?? false);
     }
   }, [children, depth, Icon, isExpanded, enableTreeviewControllable, setExpanded]);
+  const tabIndex = disabled ? undefined : rest.tabIndex ?? -1;
   const treeNodeProps = {
     ...rest,
     ['aria-current']: !href ? isActive || undefined : isActive ? 'page' : undefined,
@@ -387,95 +374,56 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef(({
     ['aria-owns']: children ? `${id}-subtree` : undefined,
     className: treeNodeClasses,
     id,
-    onBlur: handleFocusEvent,
     onClick: handleClick,
-    onFocus: handleFocusEvent,
     onKeyDown: handleKeyDown,
-    role: 'treeitem'
+    role: 'treeitem',
+    tabIndex,
+    onFocus: handleFocusEvent,
+    onBlur: handleFocusEvent
   };
-  if (!children) {
-    if (href) {
-      return /*#__PURE__*/React__default["default"].createElement("li", {
-        role: "none"
-      }, /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
-        ref: setRefs,
-        href: !disabled ? href : undefined
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: `${prefix}--tree-node__label`,
-        ref: currentNodeLabel
-      }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-        className: `${prefix}--tree-node__icon`
-      }), renderLabelText())));
-    } else {
-      return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
-        ref: setRefs
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: `${prefix}--tree-node__label`,
-        ref: currentNodeLabel
-      }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-        className: `${prefix}--tree-node__icon`
-      }), renderLabelText()));
-    }
-  }
+  const nodeContent = /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tree-node__label`,
+    ref: currentNodeLabel
+  }, children && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--tree-parent-node__toggle`,
+    onClick: handleToggleClick
+  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
+    className: toggleClasses
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--tree-node__label__details`
+  }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: `${prefix}--tree-node__icon`
+  }), renderLabelText()));
   if (href) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
       role: "none",
-      className: `${prefix}--tree-node-link-parent`
+      className: children ? `${prefix}--tree-node-link-parent` : ''
     }, /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
       "aria-expanded": !!expanded,
       ref: setRefs,
       href: !disabled ? href : undefined
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${prefix}--tree-node__label`,
-      ref: currentNodeLabel
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-parent-node__toggle`
-      // @ts-ignore
-      ,
-      disabled: disabled,
-      onClick: handleToggleClick
-    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
-      className: toggleClasses
-    })), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-node__label__details`,
-      ref: detailsWrapperRef
-    }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: `${prefix}--tree-node__icon`
-    }), renderLabelText()))), /*#__PURE__*/React__default["default"].createElement("ul", {
-      id: `${id}-subtree`,
-      role: "group",
-      className: cx__default["default"](`${prefix}--tree-node__children`, {
-        [`${prefix}--tree-node--hidden`]: !expanded
-      })
-    }, nodesWithProps));
-  } else {
-    return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
-      "aria-expanded": !!expanded,
-      ref: setRefs
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${prefix}--tree-node__label`,
-      ref: currentNodeLabel
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-parent-node__toggle`
-      // @ts-ignore
-      ,
-      disabled: disabled,
-      onClick: handleToggleClick
-    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
-      className: toggleClasses
-    })), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${prefix}--tree-node__label__details`,
-      ref: detailsWrapperRef
-    }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: `${prefix}--tree-node__icon`
-    }), renderLabelText())), /*#__PURE__*/React__default["default"].createElement("ul", {
+    }), nodeContent), children && /*#__PURE__*/React__default["default"].createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx__default["default"](`${prefix}--tree-node__children`, {
         [`${prefix}--tree-node--hidden`]: !expanded
       })
-    }, nodesWithProps));
+    }, /*#__PURE__*/React__default["default"].createElement(TreeContext.DepthContext.Provider, {
+      value: depth + 1
+    }, children)));
   }
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+    "aria-expanded": children ? !!expanded : undefined,
+    ref: setRefs
+  }), nodeContent, children && /*#__PURE__*/React__default["default"].createElement("ul", {
+    id: `${id}-subtree`,
+    role: "group",
+    className: cx__default["default"](`${prefix}--tree-node__children`, {
+      [`${prefix}--tree-node--hidden`]: !expanded
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(TreeContext.DepthContext.Provider, {
+    value: depth + 1
+  }, children)));
 });
 TreeNode.propTypes = {
   /**