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

package/lib/components/Tile/Tile.js

@@ -35,16 +35,15 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
-const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
-  let {
-    children,
-    className,
-    decorator,
-    light = false,
-    slug,
-    hasRoundedCorners = false,
-    ...rest
-  } = _ref;
+const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile({
+  children,
+  className,
+  decorator,
+  light = false,
+  slug,
+  hasRoundedCorners = false,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const tileClasses = cx__default["default"](`${prefix}--tile`, {
     [`${prefix}--tile--light`]: light,
@@ -91,22 +90,21 @@ Tile.propTypes = {
    */
   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.')
 };
-const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function ClickableTile(_ref2, ref) {
-  let {
-    children,
-    className,
-    clicked = false,
-    decorator,
-    disabled,
-    href,
-    light,
-    onClick = () => {},
-    onKeyDown = () => {},
-    renderIcon: Icon,
-    hasRoundedCorners,
-    slug,
-    ...rest
-  } = _ref2;
+const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function ClickableTile({
+  children,
+  className,
+  clicked = false,
+  decorator,
+  disabled,
+  href,
+  light,
+  onClick = () => {},
+  onKeyDown = () => {},
+  renderIcon: Icon,
+  hasRoundedCorners,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--clickable`, {
     [`${prefix}--tile--is-clicked`]: clicked,
@@ -215,24 +213,23 @@ ClickableTile.propTypes = {
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
-const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function SelectableTile(_ref3, ref) {
-  let {
-    children,
-    className,
-    decorator,
-    disabled,
-    id,
-    light,
-    onClick = () => {},
-    onChange = () => {},
-    onKeyDown = () => {},
-    selected = false,
-    tabIndex = 0,
-    title = 'title',
-    slug,
-    hasRoundedCorners,
-    ...rest
-  } = _ref3;
+const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function SelectableTile({
+  children,
+  className,
+  decorator,
+  disabled,
+  id,
+  light,
+  onClick = () => {},
+  onChange = () => {},
+  onKeyDown = () => {},
+  selected = false,
+  tabIndex = 0,
+  title = 'title',
+  slug,
+  hasRoundedCorners,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const clickHandler = onClick;
   const keyDownHandler = onKeyDown;
@@ -382,28 +379,27 @@ SelectableTile.propTypes = {
    */
   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.`')
 };
-const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableTile(_ref4, forwardRef) {
-  let {
-    tabIndex = 0,
-    className,
-    children,
-    decorator,
-    expanded = false,
-    tileMaxHeight = 0,
-    // eslint-disable-line
-    tilePadding = 0,
-    // eslint-disable-line
-    onClick,
-    onKeyUp,
-    tileCollapsedIconText = 'Interact to expand Tile',
-    tileExpandedIconText = 'Interact to collapse Tile',
-    tileCollapsedLabel,
-    tileExpandedLabel,
-    light,
-    slug,
-    hasRoundedCorners,
-    ...rest
-  } = _ref4;
+const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableTile({
+  tabIndex = 0,
+  className,
+  children,
+  decorator,
+  expanded = false,
+  tileMaxHeight = 0,
+  // eslint-disable-line
+  tilePadding = 0,
+  // eslint-disable-line
+  onClick,
+  onKeyUp,
+  tileCollapsedIconText = 'Interact to expand Tile',
+  tileExpandedIconText = 'Interact to collapse Tile',
+  tileCollapsedLabel,
+  tileExpandedLabel,
+  light,
+  slug,
+  hasRoundedCorners,
+  ...rest
+}, forwardRef) {
   const [isTileMaxHeight, setIsTileMaxHeight] = React.useState(tileMaxHeight);
   const [isTilePadding, setIsTilePadding] = React.useState(tilePadding);
   const [prevExpanded, setPrevExpanded] = React.useState(expanded);
@@ -629,10 +625,9 @@ ExpandableTile.propTypes = {
   tileExpandedLabel: PropTypes__default["default"].string
 };
 ExpandableTile.displayName = 'ExpandableTile';
-const TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
-  let {
-    children
-  } = _ref5;
+const TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TilAboveTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,
@@ -646,10 +641,9 @@ TileAboveTheFoldContent.propTypes = {
   children: PropTypes__default["default"].node
 };
 TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
-const TileBelowTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TileBelowTheFoldContent(_ref6, ref) {
-  let {
-    children
-  } = _ref6;
+const TileBelowTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TileBelowTheFoldContent({
+  children
+}, ref) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,

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/Toggle/Toggle.Skeleton.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ToggleSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const ToggleSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const skeletonClassNames = cx__default["default"](`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/Toggle/Toggle.js

@@ -25,24 +25,23 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _path;
-function Toggle(_ref) {
-  let {
-    'aria-labelledby': ariaLabelledby,
-    className,
-    defaultToggled = false,
-    disabled = false,
-    hideLabel = false,
-    id,
-    labelA = 'Off',
-    labelB = 'On',
-    labelText,
-    onClick,
-    onToggle,
-    readOnly,
-    size = 'md',
-    toggled,
-    ...other
-  } = _ref;
+function Toggle({
+  'aria-labelledby': ariaLabelledby,
+  className,
+  defaultToggled = false,
+  disabled = false,
+  hideLabel = false,
+  id,
+  labelA = 'Off',
+  labelB = 'On',
+  labelText,
+  onClick,
+  onToggle,
+  readOnly,
+  size = 'md',
+  toggled,
+  ...other
+}) {
   const prefix = usePrefix.usePrefix();
   const buttonElement = React.useRef(null);
   const [checked, setChecked] = useControllableState.useControllableState({

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -22,13 +22,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _path;
-const ToggleSmallSkeleton = _ref => {
-  let {
-    id,
-    labelText,
-    className,
-    ...rest
-  } = _ref;
+const ToggleSmallSkeleton = ({
+  id,
+  labelText,
+  className,
+  ...rest
+}) => {
   const prefix = React.useContext(usePrefix.PrefixContext);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, className)

package/lib/components/Toggletip/index.js

@@ -29,13 +29,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 /**
  * Used to render the label for a Toggletip
  */
-function ToggletipLabel(_ref) {
-  let {
-    as: BaseComponent = 'span',
-    children,
-    className: customClassName,
-    ...rest
-  } = _ref;
+function ToggletipLabel({
+  as: BaseComponent = 'span',
+  children,
+  className: customClassName,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-label`, customClassName);
   const BaseComponentAsAny = BaseComponent;
@@ -70,16 +69,15 @@ function useToggletip() {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-function Toggletip(_ref2) {
-  let {
-    align,
-    as,
-    autoAlign,
-    className: customClassName,
-    children,
-    defaultOpen = false,
-    ...rest
-  } = _ref2;
+function Toggletip({
+  align,
+  as,
+  autoAlign,
+  className: customClassName,
+  children,
+  defaultOpen = false,
+  ...rest
+}) {
   const ref = React.useRef(null);
   const [open, setOpen] = React.useState(defaultOpen);
   const prefix = usePrefix.usePrefix();
@@ -137,10 +135,9 @@ function Toggletip(_ref2) {
       actions.close();
     }
   });
-  useEvent.useWindowEvent('click', _ref3 => {
-    let {
-      target
-    } = _ref3;
+  useEvent.useWindowEvent('click', ({
+    target
+  }) => {
     if (open && target instanceof Node && !ref.current?.contains(target)) {
       actions.close();
     }
@@ -219,14 +216,13 @@ Toggletip.propTypes = {
  * clicks and keyboard interactions.
  */
 
-const ToggletipButton = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipButton(_ref4, ref) {
-  let {
-    children,
-    className: customClassName,
-    label = 'Show information',
-    as: BaseComponent,
-    ...rest
-  } = _ref4;
+const ToggletipButton = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipButton({
+  children,
+  className: customClassName,
+  label = 'Show information',
+  as: BaseComponent,
+  ...rest
+}, ref) {
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-button`, customClassName);
@@ -264,11 +260,10 @@ ToggletipButton.displayName = 'ToggletipButton';
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-const ToggletipContent = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipContent(_ref5, ref) {
-  let {
-    children,
-    className: customClassName
-  } = _ref5;
+const ToggletipContent = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipContent({
+  children,
+  className: customClassName
+}, ref) {
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
@@ -296,11 +291,10 @@ ToggletipContent.displayName = 'ToggletipContent';
  * `ToggletipActions` is a container for one or two actions present at the base
  * of a toggletip. It is used for layout of these items.
  */
-function ToggletipActions(_ref6) {
-  let {
-    children,
-    className: customClassName
-  } = _ref6;
+function ToggletipActions({
+  children,
+  className: customClassName
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-actions`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -26,20 +26,19 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const DefinitionTooltip = _ref => {
-  let {
-    align = 'bottom',
-    autoAlign,
-    className,
-    children,
-    definition,
-    defaultOpen = false,
-    id,
-    openOnHover,
-    tooltipText,
-    triggerClassName,
-    ...rest
-  } = _ref;
+const DefinitionTooltip = ({
+  align = 'bottom',
+  autoAlign,
+  className,
+  children,
+  definition,
+  defaultOpen = false,
+  id,
+  openOnHover,
+  tooltipText,
+  triggerClassName,
+  ...rest
+}) => {
   const [isOpen, setOpen] = React.useState(defaultOpen);
   const prefix = usePrefix.usePrefix();
   const tooltipId = useId.useFallbackId(id);

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

@@ -32,22 +32,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Event types that trigger a "drag" to stop.
  */
 const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
-const Tooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    as,
-    align = 'top',
-    className: customClassName,
-    children,
-    label,
-    description,
-    enterDelayMs = 100,
-    leaveDelayMs = 300,
-    defaultOpen = false,
-    closeOnActivation = false,
-    dropShadow = false,
-    highContrast = true,
-    ...rest
-  } = _ref;
+const Tooltip = /*#__PURE__*/React__default["default"].forwardRef(({
+  as,
+  align = 'top',
+  className: customClassName,
+  children,
+  label,
+  description,
+  enterDelayMs = 100,
+  leaveDelayMs = 300,
+  defaultOpen = false,
+  closeOnActivation = false,
+  dropShadow = false,
+  highContrast = true,
+  ...rest
+}, ref) => {
   const tooltipRef = React.useRef(null);
   const [open, setOpen] = useDelayedState.useDelayedState(defaultOpen);
   const [isDragging, setIsDragging] = React.useState(false);
@@ -56,6 +55,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 +82,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 +99,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

@@ -27,27 +27,26 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwardedRef) => {
-  let {
-    active,
-    children,
-    className,
-    depth: propDepth,
-    disabled,
-    id: nodeId,
-    isExpanded,
-    defaultIsExpanded,
-    label,
-    onNodeFocusEvent,
-    onSelect: onNodeSelect,
-    onToggle,
-    onTreeSelect,
-    renderIcon: Icon,
-    selected: propSelected,
-    value,
-    href,
-    ...rest
-  } = _ref;
+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,
+  ...rest
+}, forwardedRef) => {
   // These are provided by the parent TreeView component
   const depth = propDepth;
   const selected = propSelected;
@@ -80,19 +79,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`, {