@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/UIShell/HeaderMenu.js

@@ -26,7 +26,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["isActive", "isCurrentPage", "aria-label", "aria-labelledby", "className", "children", "renderMenuContent", "menuLinkName", "focusRef"];
 /**
  * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
  * will be a `HeaderMenuItem`. It handles certain keyboard events to help
@@ -34,192 +33,178 @@ var _excluded = ["isActive", "isCurrentPage", "aria-label", "aria-labelledby", "
  * help manage focus state of its children.
  */
 
-var HeaderMenu = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(HeaderMenu, _React$Component);
+class HeaderMenu extends React__default["default"].Component {
+  constructor(props) {
+    super(props);
 
-  var _super = _rollupPluginBabelHelpers.createSuper(HeaderMenu);
+    _rollupPluginBabelHelpers.defineProperty(this, "_subMenus", /*#__PURE__*/React__default["default"].createRef());
 
-  function HeaderMenu(props) {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, HeaderMenu);
-
-    _this = _super.call(this, props);
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_subMenus", /*#__PURE__*/React__default["default"].createRef());
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnClick", function (e) {
-      var subMenusNode = _this._subMenus.current;
+    _rollupPluginBabelHelpers.defineProperty(this, "handleOnClick", e => {
+      const {
+        current: subMenusNode
+      } = this._subMenus;
 
       if (!subMenusNode || !subMenusNode.contains(e.target)) {
         e.preventDefault();
       }
 
-      _this.setState(function (prevState) {
-        return {
-          expanded: !prevState.expanded
-        };
-      });
+      this.setState(prevState => ({
+        expanded: !prevState.expanded
+      }));
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnKeyDown", function (event) {
+    _rollupPluginBabelHelpers.defineProperty(this, "handleOnKeyDown", event => {
       // Handle enter or space key for toggling the expanded state of the menu.
       if (match.matches(event, [keys.Enter, keys.Space])) {
         event.stopPropagation();
         event.preventDefault();
-
-        _this.setState(function (prevState) {
-          return {
-            expanded: !prevState.expanded
-          };
-        });
-
+        this.setState(prevState => ({
+          expanded: !prevState.expanded
+        }));
         return;
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnBlur", function (event) {
+    _rollupPluginBabelHelpers.defineProperty(this, "handleOnBlur", event => {
       // Rough guess for a blur event that is triggered outside of our menu or
       // menubar context
-      var itemTriggeredBlur = _this.items.find(function (element) {
-        return element === event.relatedTarget;
-      });
+      const itemTriggeredBlur = this.items.find(element => element === event.relatedTarget);
 
       if (event.relatedTarget && (event.relatedTarget.getAttribute('href') && event.relatedTarget.getAttribute('href') !== '#' || itemTriggeredBlur)) {
         return;
       }
 
-      _this.setState({
+      this.setState({
         expanded: false,
         selectedIndex: null
       });
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleMenuButtonRef", function (node) {
-      if (_this.props.focusRef) {
-        _this.props.focusRef(node);
+    _rollupPluginBabelHelpers.defineProperty(this, "handleMenuButtonRef", node => {
+      if (this.props.focusRef) {
+        this.props.focusRef(node);
       }
 
-      _this.menuButtonRef = node;
+      this.menuButtonRef = node;
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleItemRef", function (index) {
-      return function (node) {
-        _this.items[index] = node;
-      };
+    _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => node => {
+      this.items[index] = node;
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleMenuClose", function (event) {
+    _rollupPluginBabelHelpers.defineProperty(this, "handleMenuClose", event => {
       // Handle ESC keydown for closing the expanded menu.
-      if (match.matches(event, [keys.Escape]) && _this.state.expanded) {
+      if (match.matches(event, [keys.Escape]) && this.state.expanded) {
         event.stopPropagation();
         event.preventDefault();
+        this.setState(() => ({
+          expanded: false,
+          selectedIndex: null
+        })); // Return focus to menu button when the user hits ESC.
 
-        _this.setState(function () {
-          return {
-            expanded: false,
-            selectedIndex: null
-          };
-        }); // Return focus to menu button when the user hits ESC.
-
-
-        _this.menuButtonRef.focus();
-
+        this.menuButtonRef.focus();
         return;
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_renderMenuItem", function (item, index) {
+    _rollupPluginBabelHelpers.defineProperty(this, "_renderMenuItem", (item, index) => {
       if ( /*#__PURE__*/React__default["default"].isValidElement(item)) {
         return /*#__PURE__*/React__default["default"].cloneElement(item, {
-          ref: _this.handleItemRef(index)
+          ref: this.handleItemRef(index)
         });
       }
     });
 
-    _this.state = {
+    this.state = {
       // Used to manage the expansion state of the menu
       expanded: false,
       // Refers to the menuitem that is currently focused
       // Note: children should have `role="menuitem"` on node consuming ref
       selectedIndex: null
     };
-    _this.items = [];
-    return _this;
+    this.items = [];
   }
   /**
    * Toggle the expanded state of the menu on click.
    */
 
 
-  _rollupPluginBabelHelpers.createClass(HeaderMenu, [{
-    key: "render",
-    value: function render() {
-      var _cx, _cx2;
-
-      var prefix = this.context;
-
-      var _this$props = this.props,
-          isActive = _this$props.isActive,
-          isCurrentPage = _this$props.isCurrentPage,
-          ariaLabel = _this$props['aria-label'],
-          ariaLabelledBy = _this$props['aria-labelledby'],
-          customClassName = _this$props.className,
-          children = _this$props.children,
-          MenuContent = _this$props.renderMenuContent,
-          menuLinkName = _this$props.menuLinkName;
-          _this$props.focusRef;
-          var rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
-
-      var accessibilityLabel = {
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledBy
-      };
-      var itemClassName = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
-      var isActivePage = isActive ? isActive : isCurrentPage;
-      var linkClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--header__menu-item--current"), isActivePage), _cx2)); // Notes on eslint comments and based on the examples in:
-      // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
-      // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
-      // users
-      // - 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["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
-        className: itemClassName,
-        onKeyDown: this.handleMenuClose,
-        onClick: this.handleOnClick,
-        onBlur: this.handleOnBlur
-      }), /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["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
-        ,
-        "aria-expanded": this.state.expanded,
-        className: linkClassName,
-        href: "#",
-        onKeyDown: this.handleOnKeyDown,
-        ref: this.handleMenuButtonRef,
-        tabIndex: 0
-      }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React__default["default"].createElement(MenuContent, null) : /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
-        className: "".concat(this.context, "--header__menu-arrow")
-      })), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
-        ref: this._subMenus,
-        className: "".concat(prefix, "--header__menu")
-      }), React__default["default"].Children.map(children, this._renderMenuItem)));
-    }
-    /**
-     * We capture the `ref` for each child inside of `this.items` to properly
-     * manage focus. In addition to this focus management, all items receive a
-     * `tabIndex: -1` so the user won't hit a large number of items in their tab
-     * sequence when they might not want to go through all the items.
-     */
-
-  }]);
-
-  return HeaderMenu;
-}(React__default["default"].Component);
-
-_rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  render() {
+    const prefix = this.context;
+    const {
+      isActive,
+      isCurrentPage,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      className: customClassName,
+      children,
+      renderMenuContent: MenuContent,
+      menuLinkName,
+      focusRef,
+      // eslint-disable-line no-unused-vars
+      ...rest
+    } = this.props;
+    const accessibilityLabel = {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy
+    };
+    const itemClassName = cx__default["default"]({
+      [`${prefix}--header__submenu`]: true,
+      [customClassName]: !!customClassName
+    });
+    let isActivePage = isActive ? isActive : isCurrentPage;
+    const linkClassName = cx__default["default"]({
+      [`${prefix}--header__menu-item`]: true,
+      [`${prefix}--header__menu-title`]: 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`]: isActivePage
+    }); // Notes on eslint comments and based on the examples in:
+    // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
+    // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
+    // users
+    // - 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["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
+      className: itemClassName,
+      onKeyDown: this.handleMenuClose,
+      onClick: this.handleOnClick,
+      onBlur: this.handleOnBlur
+    }), /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["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
+      ,
+      "aria-expanded": this.state.expanded,
+      className: linkClassName,
+      href: "#",
+      onKeyDown: this.handleOnKeyDown,
+      ref: this.handleMenuButtonRef,
+      tabIndex: 0
+    }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React__default["default"].createElement(MenuContent, null) : /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
+      className: `${this.context}--header__menu-arrow`
+    })), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
+      ref: this._subMenus,
+      className: `${prefix}--header__menu`
+    }), React__default["default"].Children.map(children, this._renderMenuItem)));
+  }
+  /**
+   * We capture the `ref` for each child inside of `this.items` to properly
+   * manage focus. In addition to this focus management, all items receive a
+   * `tabIndex: -1` so the user won't hit a large number of items in their tab
+   * sequence when they might not want to go through all the items.
+   */
+
+
+}
+
+_rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
+  /**
+   * Required props for the accessibility label of the menu
+   */
+  ...AriaPropTypes.AriaLabelPropType,
+
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
@@ -255,11 +240,11 @@ _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", _rollupPluginB
    * Optionally provide a tabIndex for the underlying menu button
    */
   tabIndex: PropTypes__default["default"].number
-}));
+});
 
 _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "contextType", usePrefix.PrefixContext);
 
-var HeaderMenuForwardRef = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+const HeaderMenuForwardRef = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
   return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
     focusRef: ref
   }));

package/lib/components/UIShell/HeaderMenuButton.js

@@ -25,31 +25,35 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _Menu, _Close;
 
-var _excluded = ["aria-label", "aria-labelledby", "className", "renderMenuIcon", "renderCloseIcon", "onClick", "isActive", "isCollapsible"];
-
 function HeaderMenuButton(_ref) {
-  var _cx;
-
-  var ariaLabel = _ref['aria-label'],
-      ariaLabelledBy = _ref['aria-labelledby'],
-      customClassName = _ref.className,
-      renderMenuIcon = _ref.renderMenuIcon,
-      renderCloseIcon = _ref.renderCloseIcon,
-      onClick = _ref.onClick,
-      isActive = _ref.isActive,
-      isCollapsible = _ref.isCollapsible,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__action"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-trigger"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__action--active"), isActive), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-toggle"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-toggle__hidden"), !isCollapsible), _cx));
-  var accessibilityLabel = {
+  let {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    className: customClassName,
+    renderMenuIcon,
+    renderCloseIcon,
+    onClick,
+    isActive,
+    isCollapsible,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]({
+    [customClassName]: !!customClassName,
+    [`${prefix}--header__action`]: true,
+    [`${prefix}--header__menu-trigger`]: true,
+    [`${prefix}--header__action--active`]: isActive,
+    [`${prefix}--header__menu-toggle`]: true,
+    [`${prefix}--header__menu-toggle__hidden`]: !isCollapsible
+  });
+  const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
-  var menuIcon = renderMenuIcon ? renderMenuIcon : _Menu || (_Menu = /*#__PURE__*/React__default["default"].createElement(iconsReact.Menu, {
+  const menuIcon = renderMenuIcon ? renderMenuIcon : _Menu || (_Menu = /*#__PURE__*/React__default["default"].createElement(iconsReact.Menu, {
     size: 20
   }));
-  var closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
+  const closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
     size: 20
   }));
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
@@ -60,7 +64,12 @@ function HeaderMenuButton(_ref) {
   }), isActive ? closeIcon : menuIcon);
 }
 
-HeaderMenuButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+HeaderMenuButton.propTypes = {
+  /**
+   * Required props for accessibility label on the underlying menu button
+   */
+  ...AriaPropTypes.AriaLabelPropType,
+
   /**
    * Optionally provide a custom class name that is applied to the underlying
    * button
@@ -77,6 +86,6 @@ HeaderMenuButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPlug
    * button fires it's onclick event
    */
   onClick: PropTypes__default["default"].func
-});
+};
 
 exports["default"] = HeaderMenuButton;

package/lib/components/UIShell/HeaderMenuItem.js

@@ -23,27 +23,29 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "isActive", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
-var HeaderMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function HeaderMenuItem(_ref, ref) {
-  var _cx;
-
-  var className = _ref.className,
-      isActive = _ref.isActive,
-      isCurrentPage = _ref.isCurrentPage,
-      ariaCurrent = _ref['aria-current'],
-      children = _ref.children,
-      role = _ref.role,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+const HeaderMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function HeaderMenuItem(_ref, ref) {
+  let {
+    className,
+    isActive,
+    isCurrentPage,
+    'aria-current': ariaCurrent,
+    children,
+    role,
+    tabIndex = 0,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
 
   if (isCurrentPage) {
     isActive = isCurrentPage;
   }
 
-  var linkClassName = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isActive && ariaCurrent !== 'page'), _cx));
+  const linkClassName = cx__default["default"]({
+    [`${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'
+  });
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: className,
     role: role
@@ -53,11 +55,17 @@ var HeaderMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function
     ref: ref,
     tabIndex: tabIndex
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--text-truncate--end")
+    className: `${prefix}--text-truncate--end`
   }, children)));
 });
 HeaderMenuItem.displayName = 'HeaderMenuItem';
-HeaderMenuItem.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, Link.LinkPropTypes), {}, {
+HeaderMenuItem.propTypes = {
+  /**
+   * Pass in a valid `element` to replace the underlying `<a>` tag with a
+   * custom `Link` element
+   */
+  ...Link.LinkPropTypes,
+
   /**
    * Pass in children that are either a string or can be read as a string by
    * screen readers
@@ -90,7 +98,7 @@ HeaderMenuItem.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPlugin
    * Specify the tab index of the Link
    */
   tabIndex: PropTypes__default["default"].number
-});
+};
 var HeaderMenuItem$1 = HeaderMenuItem;
 
 exports["default"] = HeaderMenuItem$1;

package/lib/components/UIShell/HeaderName.js

@@ -22,26 +22,31 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["children", "className", "prefix", "href"];
-
 function HeaderName(_ref) {
-  var children = _ref.children,
-      customClassName = _ref.className,
-      prefix = _ref.prefix,
-      href = _ref.href,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var selectorPrefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(selectorPrefix, "--header__name"), customClassName);
+  let {
+    children,
+    className: customClassName,
+    prefix,
+    href,
+    ...rest
+  } = _ref;
+  const selectorPrefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${selectorPrefix}--header__name`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     href: href
   }), prefix && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(selectorPrefix, "--header__name--prefix")
+    className: `${selectorPrefix}--header__name--prefix`
   }, prefix), "\xA0"), children);
 }
 
-HeaderName.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, Link.LinkPropTypes), {}, {
+HeaderName.propTypes = {
+  /**
+   * Pass in a valid `element` to replace the underlying `<a>` tag with a
+   * custom `Link` element
+   */
+  ...Link.LinkPropTypes,
+
   /**
    * Pass in children that are either a string or can be read as a string by
    * screen readers
@@ -63,7 +68,7 @@ HeaderName.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabe
    * example: IBM [Product Name] versus solely [Product Name]
    */
   prefix: PropTypes__default["default"].string
-});
+};
 HeaderName.defaultProps = {
   prefix: 'IBM'
 };

package/lib/components/UIShell/HeaderNavigation.js

@@ -22,31 +22,35 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
-
 function HeaderNavigation(props) {
-  var ariaLabel = props['aria-label'],
-      ariaLabelledBy = props['aria-labelledby'],
-      children = props.children,
-      customClassName = props.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className: customClassName,
+    ...rest
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--header__nav`, customClassName); // Assign both label strategies in this option, only one should be defined
   // so when we spread that should be the one that is applied to the node
 
-  var accessibilityLabel = {
+  const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
   return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
     className: className
   }), /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: "".concat(prefix, "--header__menu-bar")
+    className: `${prefix}--header__menu-bar`
   }, children));
 }
 
-HeaderNavigation.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+HeaderNavigation.propTypes = {
+  /**
+   * Required props for accessibility label on the underlying menu
+   */
+  ...AriaPropTypes.AriaLabelPropType,
+
   /**
    * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
    * or `HeaderMenu`
@@ -57,7 +61,7 @@ HeaderNavigation.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPlug
    * Optionally provide a custom class to apply to the underlying <nav> node
    */
   className: PropTypes__default["default"].string
-});
+};
 
 exports.HeaderNavigation = HeaderNavigation;
 exports["default"] = HeaderNavigation;