@carbon/react 1.83.0-rc.0 → 1.83.0

package/es/components/Tooltip/DefinitionTooltip.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState } from 'react';
+import React, { useState } from 'react';
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -39,7 +39,7 @@ const DefinitionTooltip = _ref => {
       setOpen(false);
     }
   }
-  return /*#__PURE__*/React__default.createElement(Popover, {
+  return /*#__PURE__*/React.createElement(Popover, {
     align: align,
     className: className,
     autoAlign: autoAlign,
@@ -55,7 +55,7 @@ const DefinitionTooltip = _ref => {
       setOpen(true);
     },
     open: isOpen
-  }, /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement("button", _extends({}, rest, {
     className: cx(`${prefix}--definition-term`, triggerClassName),
     "aria-controls": tooltipId,
     "aria-expanded": isOpen,
@@ -69,7 +69,7 @@ const DefinitionTooltip = _ref => {
     },
     onKeyDown: onKeyDown,
     type: "button"
-  }), children), /*#__PURE__*/React__default.createElement(PopoverContent, {
+  }), children), /*#__PURE__*/React.createElement(PopoverContent, {
     className: `${prefix}--definition-tooltip`,
     id: tooltipId
   }, tooltipText ?? definition));

package/es/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/es/components/Tooltip/Tooltip.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -22,7 +22,7 @@ import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
  * Event types that trigger a "drag" to stop.
  */
 const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
-const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const Tooltip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     as,
     align = 'top',
@@ -45,7 +45,22 @@ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const [isPointerIntersecting, setIsPointerIntersecting] = useState(false);
   const id = useId('tooltip');
   const prefix = usePrefix();
-  const child = React__default.Children.only(children);
+  const child = React.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: () => {
@@ -58,7 +73,9 @@ const Tooltip = /*#__PURE__*/React__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'));
@@ -73,11 +90,6 @@ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     });
     return eventHandlers;
   }
-  if (label) {
-    triggerProps['aria-labelledby'] = id;
-  } else {
-    triggerProps['aria-describedby'] = id;
-  }
   const onKeyDown = useCallback(event => {
     if (open && match(event, Escape)) {
       event.stopPropagation();
@@ -151,7 +163,7 @@ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       });
     };
   }, [isDragging, onDragStop]);
-  return /*#__PURE__*/React__default.createElement(Popover, _extends({
+  return /*#__PURE__*/React.createElement(Popover, _extends({
     as: as,
     ref: ref
   }, rest, {
@@ -162,12 +174,12 @@ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onKeyDown: onKeyDown,
     onMouseLeave: onMouseLeave,
     open: open
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tooltip-trigger__wrapper`
-  }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
+  }, child !== undefined ? /*#__PURE__*/React.cloneElement(child, {
     ...triggerProps,
     ...getChildEventHandlers(child.props)
-  }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
+  }) : null), /*#__PURE__*/React.createElement(PopoverContent, {
     "aria-hidden": open ? 'false' : 'true',
     className: `${prefix}--tooltip-content`,
     id: id,

package/es/components/TreeView/TreeNode.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { CaretDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
@@ -17,7 +17,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { uniqueId } from '../../tools/uniqueId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 
-const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) => {
+const TreeNode = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
   let {
     active,
     children,
@@ -70,19 +70,28 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
       forwardedRef.current = element;
     }
   };
-  const nodesWithProps = React__default.Children.map(children, node => {
-    if (/*#__PURE__*/React__default.isValidElement(node)) {
-      return /*#__PURE__*/React__default.cloneElement(node, {
-        active,
-        depth: depth + 1,
-        disabled: disabled || node.props.disabled,
-        onTreeSelect,
-        onNodeFocusEvent,
-        selected,
-        tabIndex: !node.props.disabled && -1 || null
+  function enhanceTreeNodes(children) {
+    return React.Children.map(children, node => {
+      if (! /*#__PURE__*/React.isValidElement(node)) return node;
+      const isTreeNode = node.type.displayName === 'TreeNode';
+      if (isTreeNode) {
+        return /*#__PURE__*/React.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.cloneElement(node, {
+        children: newChildren
       });
-    }
-  });
+    });
+  }
+  const nodesWithProps = enhanceTreeNodes(children);
   const isActive = active === id;
   const isSelected = selected.includes(id);
   const treeNodeClasses = cx(className, `${prefix}--tree-node`, {
@@ -282,52 +291,52 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
   };
   if (!children) {
     if (href) {
-      return /*#__PURE__*/React__default.createElement("li", {
+      return /*#__PURE__*/React.createElement("li", {
         role: "none"
-      }, /*#__PURE__*/React__default.createElement("a", _extends({}, treeNodeProps, {
+      }, /*#__PURE__*/React.createElement("a", _extends({}, treeNodeProps, {
         ref: setRefs,
         href: !disabled ? href : undefined
-      }), /*#__PURE__*/React__default.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: `${prefix}--tree-node__label`,
         ref: currentNodeLabel
-      }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+      }, Icon && /*#__PURE__*/React.createElement(Icon, {
         className: `${prefix}--tree-node__icon`
       }), label)));
     } else {
-      return /*#__PURE__*/React__default.createElement("li", _extends({}, treeNodeProps, {
+      return /*#__PURE__*/React.createElement("li", _extends({}, treeNodeProps, {
         ref: setRefs
-      }), /*#__PURE__*/React__default.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: `${prefix}--tree-node__label`,
         ref: currentNodeLabel
-      }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+      }, Icon && /*#__PURE__*/React.createElement(Icon, {
         className: `${prefix}--tree-node__icon`
       }), label));
     }
   }
   if (href) {
-    return /*#__PURE__*/React__default.createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       role: "none",
       className: `${prefix}--tree-node-link-parent`
-    }, /*#__PURE__*/React__default.createElement("a", _extends({}, treeNodeProps, {
+    }, /*#__PURE__*/React.createElement("a", _extends({}, treeNodeProps, {
       "aria-expanded": !!expanded,
       ref: setRefs,
       href: !disabled ? href : undefined
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
-    }, /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--tree-parent-node__toggle`
       // @ts-ignore
       ,
       disabled: disabled,
       onClick: handleToggleClick
-    }, /*#__PURE__*/React__default.createElement(CaretDown, {
+    }, /*#__PURE__*/React.createElement(CaretDown, {
       className: toggleClasses
-    })), /*#__PURE__*/React__default.createElement("span", {
+    })), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--tree-node__label__details`
-    }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label))), /*#__PURE__*/React__default.createElement("ul", {
+    }), label))), /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx(`${prefix}--tree-node__children`, {
@@ -335,25 +344,25 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
       })
     }, nodesWithProps));
   } else {
-    return /*#__PURE__*/React__default.createElement("li", _extends({}, treeNodeProps, {
+    return /*#__PURE__*/React.createElement("li", _extends({}, treeNodeProps, {
       "aria-expanded": !!expanded,
       ref: setRefs
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
-    }, /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--tree-parent-node__toggle`
       // @ts-ignore
       ,
       disabled: disabled,
       onClick: handleToggleClick
-    }, /*#__PURE__*/React__default.createElement(CaretDown, {
+    }, /*#__PURE__*/React.createElement(CaretDown, {
       className: toggleClasses
-    })), /*#__PURE__*/React__default.createElement("span", {
+    })), /*#__PURE__*/React.createElement("span", {
       className: `${prefix}--tree-node__label__details`
-    }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label)), /*#__PURE__*/React__default.createElement("ul", {
+    }), label)), /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
       className: cx(`${prefix}--tree-node__children`, {

package/es/components/TreeView/TreeView.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { ArrowUp, ArrowDown, Home, End } from '../../internal/keyboard/keys.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
@@ -111,24 +111,33 @@ const TreeView = _ref => {
     }
   }
   let focusTarget = false;
-  const nodesWithProps = React__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.isValidElement(node)) {
-      return /*#__PURE__*/React__default.cloneElement(node, sharedNodeProps);
-    }
-  });
+  function enhanceTreeNodes(children) {
+    return React.Children.map(children, child => {
+      if (! /*#__PURE__*/React.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.cloneElement(child, sharedNodeProps);
+      }
+      const newChildren = enhanceTreeNodes(child.props.children);
+      return /*#__PURE__*/React.cloneElement(child, {
+        children: newChildren
+      });
+    });
+  }
+  const nodesWithProps = enhanceTreeNodes(children);
   function handleKeyDown(event) {
     event.stopPropagation();
     if (matches(event, [ArrowUp, ArrowDown, Home, End])) {
@@ -211,11 +220,11 @@ const TreeView = _ref => {
   }, []);
   useActiveAndSelectedOnMount();
   const labelId = `${treeId}__label`;
-  const TreeLabel = () => !hideLabel ? /*#__PURE__*/React__default.createElement("label", {
+  const TreeLabel = () => !hideLabel ? /*#__PURE__*/React.createElement("label", {
     id: labelId,
     className: `${prefix}--label`
   }, label) : null;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TreeLabel, null), /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeLabel, null), /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
     "aria-label": hideLabel ? label : undefined,
     "aria-labelledby": !hideLabel ? labelId : undefined,
     "aria-multiselectable": multiselect || undefined,

package/es/components/UIShell/Content.js

@@ -7,7 +7,7 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 const Content = _ref => {
@@ -19,7 +19,7 @@ const Content = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const className = cx(`${prefix}--content`, customClassName);
-  return /*#__PURE__*/React__default.createElement(tagName, {
+  return /*#__PURE__*/React.createElement(tagName, {
     ...rest,
     className
   }, children);

package/es/components/UIShell/Header.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -20,7 +20,7 @@ const Header = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const className = cx(`${prefix}--header`, customClassName);
-  return /*#__PURE__*/React__default.createElement("header", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("header", _extends({}, rest, {
     className: className
   }), children);
 };

package/es/components/UIShell/HeaderContainer.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
@@ -28,7 +28,7 @@ function HeaderContainer(_ref) {
   const handleHeaderMenuButtonClick = useCallback(() => {
     setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
   }, [setIsSideNavExpandedState]);
-  return /*#__PURE__*/React__default.createElement(Children, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Children, _extends({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     onClickSideNavExpand: handleHeaderMenuButtonClick
   }));

package/es/components/UIShell/HeaderGlobalAction.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import Button from '../Button/Button.js';
@@ -22,7 +22,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
  *
  * Note: children passed to this component should be an Icon.
  */
-const HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function HeaderGlobalAction(_ref, ref) {
+const HeaderGlobalAction = /*#__PURE__*/React.forwardRef(function HeaderGlobalAction(_ref, ref) {
   let {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -45,7 +45,7 @@ const HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function Heade
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
-  return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, accessibilityLabel, {
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, accessibilityLabel, {
     className: className,
     onClick: onClick,
     type: "button",

package/es/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;

package/es/components/UIShell/HeaderMenu.js

@@ -8,7 +8,7 @@
 import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -24,10 +24,10 @@ import { composeEventHandlers } from '../../tools/events.js';
  * help manage focus state of its children.
  */
 
-class HeaderMenu extends React__default.Component {
+class HeaderMenu extends React.Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "_subMenus", /*#__PURE__*/React__default.createRef());
+    _defineProperty(this, "_subMenus", /*#__PURE__*/React.createRef());
     _defineProperty(this, "items", []);
     _defineProperty(this, "menuButtonRef", null);
     /**
@@ -124,8 +124,8 @@ class HeaderMenu extends React__default.Component {
      * sequence when they might not want to go through all the items.
      */
     _defineProperty(this, "_renderMenuItem", (item, index) => {
-      if (/*#__PURE__*/React__default.isValidElement(item)) {
-        return /*#__PURE__*/React__default.cloneElement(item, {
+      if (/*#__PURE__*/React.isValidElement(item)) {
+        return /*#__PURE__*/React.cloneElement(item, {
           ref: this.handleItemRef(index)
         });
       }
@@ -157,8 +157,8 @@ class HeaderMenu extends React__default.Component {
       onKeyDown,
       ...rest
     } = this.props;
-    const hasActiveDescendant = childrenArg => React__default.Children.toArray(childrenArg).some(child => {
-      if (! /*#__PURE__*/React__default.isValidElement(child)) {
+    const hasActiveDescendant = childrenArg => React.Children.toArray(childrenArg).some(child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
         return false;
       }
 
@@ -190,12 +190,12 @@ class HeaderMenu extends React__default.Component {
     // - aria-haspopup can definitely have the value "menu"
     // - aria-expanded is on their example node with role="menuitem"
     // - href can be set to javascript:void(0), ideally this will be a button
-    return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
+    return /*#__PURE__*/React.createElement("li", _extends({}, rest, {
       className: itemClassName,
       onKeyDown: composeEventHandlers([onKeyDown, this.handleMenuClose]),
       onClick: composeEventHandlers([onClick, this.handleOnClick]),
       onBlur: composeEventHandlers([onBlur, this.handleOnBlur])
-    }), /*#__PURE__*/React__default.createElement("a", _extends({
+    }), /*#__PURE__*/React.createElement("a", _extends({
       // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
       "aria-haspopup": "menu" // eslint-disable-line jsx-a11y/aria-proptypes
       ,
@@ -205,13 +205,13 @@ class HeaderMenu extends React__default.Component {
       onKeyDown: this.handleOnKeyDown,
       ref: this.handleMenuButtonRef,
       tabIndex: 0
-    }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React__default.createElement(MenuContent, null) : /*#__PURE__*/React__default.createElement(ChevronDown, {
+    }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React.createElement(MenuContent, null) : /*#__PURE__*/React.createElement(ChevronDown, {
       className: `${this.context}--header__menu-arrow`
-    })), /*#__PURE__*/React__default.createElement("ul", _extends({}, accessibilityLabel, {
+    })), /*#__PURE__*/React.createElement("ul", _extends({}, accessibilityLabel, {
       ref: this._subMenus,
       onClick: this.handleOnClick,
       className: `${prefix}--header__menu`
-    }), React__default.Children.map(children, this._renderMenuItem)));
+    }), React.Children.map(children, this._renderMenuItem)));
   }
 }
 _defineProperty(HeaderMenu, "propTypes", {
@@ -265,8 +265,8 @@ _defineProperty(HeaderMenu, "propTypes", {
   tabIndex: PropTypes.number
 });
 _defineProperty(HeaderMenu, "contextType", PrefixContext);
-const HeaderMenuForwardRef = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({}, props, {
+const HeaderMenuForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(HeaderMenu, _extends({}, props, {
     focusRef: ref
   }));
 });

package/es/components/UIShell/HeaderMenuButton.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Menu, Close } from '@carbon/icons-react';
 import cx from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -36,13 +36,13 @@ function HeaderMenuButton(_ref) {
     [`${prefix}--header__menu-toggle`]: true,
     [`${prefix}--header__menu-toggle__hidden`]: !isCollapsible
   });
-  const menuIcon = renderMenuIcon ? renderMenuIcon : _Menu || (_Menu = /*#__PURE__*/React__default.createElement(Menu, {
+  const menuIcon = renderMenuIcon ? renderMenuIcon : _Menu || (_Menu = /*#__PURE__*/React.createElement(Menu, {
     size: 20
   }));
-  const closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
+  const closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React.createElement(Close, {
     size: 20
   }));
-  return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("button", _extends({}, rest, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     className: className,

package/es/components/UIShell/HeaderMenuItem.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import cx from 'classnames';
 import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -28,21 +28,23 @@ const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem(_ref, ref
   if (isCurrentPage) {
     isActive = isCurrentPage;
   }
+  // We set the current class only if `isActive` is passed in and we do
+  // not have an `aria-current="page"` set for the breadcrumb item. When this
+  // class is added we also set `aria-current` as `true`
+  const hasCurrentClass = isActive && ariaCurrent !== 'page';
   const linkClassName = cx({
     [`${prefix}--header__menu-item`]: true,
-    // We set the current class only if `isActive` is passed in and we do
-    // not have an `aria-current="page"` set for the breadcrumb item
-    [`${prefix}--header__menu-item--current`]: isActive && ariaCurrent !== 'page'
+    [`${prefix}--header__menu-item--current`]: hasCurrentClass
   });
-  return /*#__PURE__*/React__default.createElement("li", {
+  return /*#__PURE__*/React.createElement("li", {
     className: className,
     role: role
-  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
-    "aria-current": ariaCurrent,
+  }, /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
+    "aria-current": hasCurrentClass ? true : ariaCurrent,
     className: linkClassName,
     ref: ref,
     tabIndex: tabIndex
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));
 });
@@ -63,7 +65,7 @@ HeaderMenuItem.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   * If `true` and `aria-current !== 'page'`, applies selected styles to the item and sets `aria-current="true"`.
    */
   isActive: PropTypes.bool,
   /**

package/es/components/UIShell/HeaderName.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -21,9 +21,9 @@ function HeaderName(_ref) {
   } = _ref;
   const selectorPrefix = usePrefix();
   const className = cx(`${selectorPrefix}--header__name`, customClassName);
-  return /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
     className: className
-  }), prefix && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+  }), prefix && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: `${selectorPrefix}--header__name--prefix`
   }, prefix), "\xA0"), children);
 }