@carbon/react 1.83.0 → 1.84.0-rc.0

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

@@ -1,17 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { type JSX } from 'react';
-import PropTypes from 'prop-types';
-/**
- * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
- * will be a `HeaderMenuItem`. It handles certain keyboard events to help
- * with managing focus. It also passes along refs to each child so that it can
- * help manage focus state of its children.
- */
+import React, { type FocusEvent, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
 export interface HeaderMenuProps {
     /**
      * Required props for the accessibility label of the menu
@@ -25,7 +18,7 @@ export interface HeaderMenuProps {
     /**
      * Provide a custom ref handler for the menu button
      */
-    focusRef?: React.Ref<any>;
+    focusRef?: Ref<any>;
     /**
      * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
      */
@@ -43,21 +36,21 @@ export interface HeaderMenuProps {
      * Optionally provide an onBlur handler that is called when the underlying
      * button fires it's onblur event
      */
-    onBlur?: (event: React.FocusEvent<HTMLLIElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLLIElement>) => void;
     /**
      * Optionally provide an onClick handler that is called when the underlying
      * button fires it's onclick event
      */
-    onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    onClick?: (event: MouseEvent<HTMLLIElement>) => void;
     /**
      * Optionally provide an onKeyDown handler that is called when the underlying
      * button fires it's onkeydown event
      */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLLIElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLLIElement>) => void;
     /**
      * Optional component to render instead of string
      */
-    renderMenuContent?: () => JSX.Element;
+    renderMenuContent?: () => ReactNode;
     /**
      * Optionally provide a tabIndex for the underlying menu button
      */
@@ -65,102 +58,7 @@ export interface HeaderMenuProps {
     /**
      * The children should be a series of `HeaderMenuItem` components.
      */
-    children?: React.ReactNode;
-}
-interface HeaderMenuState {
-    expanded: boolean;
-    selectedIndex: number | null;
-}
-declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuState> {
-    static propTypes: {
-        /**
-         * Optionally provide a custom class to apply to the underlying `<li>` node
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Provide a custom ref handler for the menu button
-         */
-        focusRef: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
-         */
-        isActive: PropTypes.Requireable<boolean>;
-        /**
-         * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
-         * @deprecated Please use `isActive` instead. This will be removed in the next major release.
-         */
-        isCurrentPage: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Provide a label for the link text
-         */
-        menuLinkName: PropTypes.Validator<string>;
-        /**
-         * Optionally provide an onBlur handler that is called when the underlying
-         * button fires it's onblur event
-         */
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Optionally provide an onClick handler that is called when the underlying
-         * button fires it's onclick event
-         */
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Optionally provide an onKeyDown handler that is called when the underlying
-         * button fires it's onkeydown event
-         */
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Optional component to render instead of string
-         */
-        renderMenuContent: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Optionally provide a tabIndex for the underlying menu button
-         */
-        tabIndex: PropTypes.Requireable<number>;
-    };
-    static contextType: React.Context<string>;
-    _subMenus: React.RefObject<HTMLUListElement | null>;
-    private items;
-    private menuButtonRef;
-    constructor(props: any);
-    /**
-     * Toggle the expanded state of the menu on click.
-     */
-    handleOnClick: (e: any) => void;
-    /**
-     * Keyboard event handler for the entire menu.
-     */
-    handleOnKeyDown: (event: any) => void;
-    /**
-     * Handle our blur event from our underlying menuitems. Will mostly be used
-     * for closing our menu in response to a user clicking off or tabbing out of
-     * the menu or menubar.
-     */
-    handleOnBlur: (event: any) => void;
-    /**
-     * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
-     * forward along the node.
-     *
-     * This is useful when this component is a child in a
-     * menu or menubar as it will allow the parent to explicitly focus the menu
-     * button node when that child should receive focus.
-     */
-    handleMenuButtonRef: (node: any) => void;
-    /**
-     * Handles individual menuitem refs. We assign them to a class instance
-     * property so that we can properly manage focus of our children.
-     */
-    handleItemRef: (index: any) => (node: any) => void;
-    handleMenuClose: (event: any) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    /**
-     * 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.
-     */
-    _renderMenuItem: (item: React.ReactNode, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    children?: ReactNode;
 }
-declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<HeaderMenuProps & React.RefAttributes<unknown>>;
-export { HeaderMenu };
-export default HeaderMenuForwardRef;
+export declare const HeaderMenu: React.ForwardRefExoticComponent<HeaderMenuProps & React.RefAttributes<HTMLLIElement>>;
+export default HeaderMenu;

package/lib/components/UIShell/HeaderMenu.js

@@ -20,6 +20,7 @@ var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var events = require('../../tools/events.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,204 +28,163 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-/**
- * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
- * will be a `HeaderMenuItem`. It handles certain keyboard events to help
- * with managing focus. It also passes along refs to each child so that it can
- * help manage focus state of its children.
- */
+const frFn = React.forwardRef;
+const HeaderMenu = frFn((props, ref) => {
+  const {
+    isActive,
+    isCurrentPage,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    className: customClassName,
+    children,
+    renderMenuContent: MenuContent,
+    menuLinkName,
+    focusRef,
+    onBlur,
+    onClick,
+    onKeyDown,
+    ...rest
+  } = props;
+  const prefix = React.useContext(usePrefix.PrefixContext);
+  const [expanded, setExpanded] = React.useState(false);
+  const menuButtonRef = React.useRef(null);
+  const subMenusRef = React.useRef(null);
+  const itemRefs = React.useRef([]);
+  const mergedButtonRef = useMergedRefs.useMergedRefs([ref, focusRef, menuButtonRef]);
 
-class HeaderMenu extends React__default["default"].Component {
-  constructor(props) {
-    super(props);
-    _rollupPluginBabelHelpers.defineProperty(this, "_subMenus", /*#__PURE__*/React__default["default"].createRef());
-    _rollupPluginBabelHelpers.defineProperty(this, "items", []);
-    _rollupPluginBabelHelpers.defineProperty(this, "menuButtonRef", null);
-    /**
-     * Toggle the expanded state of the menu on click.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleOnClick", e => {
-      const {
-        current: subMenusNode
-      } = this._subMenus;
-      if (!subMenusNode || !subMenusNode.contains(e.target)) {
-        e.preventDefault();
-      }
-      this.setState(prevState => ({
-        expanded: !prevState.expanded
-      }));
-    });
-    /**
-     * Keyboard event handler for the entire menu.
-     */
-    _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(prevState => ({
-          expanded: !prevState.expanded
-        }));
-        return;
-      }
-    });
-    /**
-     * Handle our blur event from our underlying menuitems. Will mostly be used
-     * for closing our menu in response to a user clicking off or tabbing out of
-     * the menu or menubar.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleOnBlur", event => {
-      // Close the menu on blur when the related target is not a sibling menu item
-      // or a child in a submenu
-      const siblingItemBlurredTo = this.items.find(element => element === event.relatedTarget);
-      const childItemBlurredTo = this._subMenus.current?.contains(event.relatedTarget);
-      if (!siblingItemBlurredTo && !childItemBlurredTo) {
-        this.setState({
-          expanded: false,
-          selectedIndex: null
-        });
-      }
-    });
-    /**
-     * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
-     * forward along the node.
-     *
-     * This is useful when this component is a child in a
-     * menu or menubar as it will allow the parent to explicitly focus the menu
-     * button node when that child should receive focus.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleMenuButtonRef", node => {
-      const {
-        focusRef
-      } = this.props;
-      // Check if focusRef is a function before calling it
-      if (typeof focusRef === 'function') {
-        focusRef(node);
-      }
-      this.menuButtonRef = node;
-    });
-    /**
-     * Handles individual menuitem refs. We assign them to a class instance
-     * property so that we can properly manage focus of our children.
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => node => {
-      this.items[index] = node;
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleMenuClose", event => {
-      // Handle ESC keydown for closing the expanded menu.
-      if (match.matches(event, [keys.Escape]) && this.state.expanded) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.setState(() => ({
-          expanded: false,
-          selectedIndex: null
-        }));
+  /**
+   * Toggle the expanded state of the menu on click.
+   */
+  const handleOnClick = e => {
+    if (!subMenusRef.current || e.target instanceof Node && !subMenusRef.current.contains(e.target)) {
+      e.preventDefault();
+    }
+    setExpanded(prev => !prev);
+  };
 
-        // Return focus to menu button when the user hits ESC.
-        if (this.menuButtonRef !== null) {
-          this.menuButtonRef.focus();
-        }
-        return;
-      }
-    });
-    /**
-     * 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(this, "_renderMenuItem", (item, index) => {
-      if (/*#__PURE__*/React__default["default"].isValidElement(item)) {
-        return /*#__PURE__*/React__default["default"].cloneElement(item, {
-          ref: this.handleItemRef(index)
-        });
+  /**
+   * Keyboard event handler for the entire menu.
+   */
+  const 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();
+      setExpanded(prev => !prev);
+      return;
+    }
+  };
+
+  /**
+   * Handle our blur event from our underlying menuitems. Will mostly be used
+   * for closing our menu in response to a user clicking off or tabbing out of
+   * the menu or menubar.
+   */
+  const handleOnBlur = event => {
+    // Close the menu on blur when the related target is not a sibling menu item
+    // or a child in a submenu
+    const siblingItemBlurredTo = itemRefs.current.find(element => element === event.relatedTarget);
+    const childItemBlurredTo = subMenusRef.current?.contains(event.relatedTarget);
+    if (!siblingItemBlurredTo && !childItemBlurredTo) {
+      setExpanded(false);
+    }
+  };
+
+  /**
+   * Handles individual menuitem refs. We assign them to a class instance
+   * property so that we can properly manage focus of our children.
+   */
+  const handleItemRef = index => node => {
+    itemRefs.current[index] = node;
+  };
+  const handleMenuClose = event => {
+    // Handle ESC keydown for closing the expanded menu.
+    if (match.matches(event, [keys.Escape]) && expanded) {
+      event.stopPropagation();
+      event.preventDefault();
+      setExpanded(false);
+
+      // Return focus to menu button when the user hits ESC.
+      if (menuButtonRef.current) {
+        menuButtonRef.current.focus();
       }
-    });
-    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 = [];
-  }
-  render() {
-    const prefix = this.context;
+    }
+  };
+  const hasActiveDescendant = childrenArg => React.Children.toArray(childrenArg).some(child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return false;
+    }
     const {
       isActive,
       isCurrentPage,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      className: customClassName,
-      children,
-      renderMenuContent: MenuContent,
-      menuLinkName,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      focusRef,
-      onBlur,
-      onClick,
-      onKeyDown,
-      ...rest
-    } = this.props;
-    const hasActiveDescendant = childrenArg => React__default["default"].Children.toArray(childrenArg).some(child => {
-      if (! /*#__PURE__*/React__default["default"].isValidElement(child)) {
-        return false;
-      }
+      children
+    } = child.props;
+    return isActive || isCurrentPage || Array.isArray(children) && hasActiveDescendant(children);
+  });
 
-      // Explicitly type the element to access props safely
-      const element = child;
-      return element.props.isActive || element.props.isCurrentPage || Array.isArray(element.props.children) && hasActiveDescendant(element.props.children);
-    });
-    const accessibilityLabel = {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy
-    };
-    const itemClassName = cx__default["default"]({
-      [`${prefix}--header__submenu`]: true,
-      [`${customClassName}`]: !!customClassName
-    });
-    const 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 || hasActiveDescendant(children) && !this.state.expanded
-    });
+  /**
+   * 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.
+   */
+  const renderMenuItem = (item, index) => {
+    if (/*#__PURE__*/React.isValidElement(item)) {
+      return /*#__PURE__*/React.cloneElement(item, {
+        ref: handleItemRef(index)
+      });
+    }
+    return item;
+  };
+  const accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  const itemClassName = cx__default["default"]({
+    [`${prefix}--header__submenu`]: true,
+    [`${customClassName}`]: !!customClassName
+  });
+  const 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 || hasActiveDescendant(children) && !expanded
+  });
 
-    // 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: events.composeEventHandlers([onKeyDown, this.handleMenuClose]),
-      onClick: events.composeEventHandlers([onClick, this.handleOnClick]),
-      onBlur: events.composeEventHandlers([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,
-      onClick: this.handleOnClick,
-      className: `${prefix}--header__menu`
-    }), React__default["default"].Children.map(children, this._renderMenuItem)));
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
+  // 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: events.composeEventHandlers([onKeyDown, handleMenuClose]),
+    onClick: events.composeEventHandlers([onClick, handleOnClick]),
+    onBlur: events.composeEventHandlers([onBlur, handleOnBlur]),
+    ref: ref
+  }), /*#__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": expanded,
+    className: linkClassName,
+    href: "#",
+    onKeyDown: handleOnKeyDown,
+    ref: mergedButtonRef,
+    tabIndex: 0
+  }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React__default["default"].createElement(MenuContent, null) : /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
+    className: `${prefix}--header__menu-arrow`
+  })), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, accessibilityLabel, {
+    ref: subMenusRef,
+    className: `${prefix}--header__menu`
+  }), React.Children.map(children, renderMenuItem)));
+});
+HeaderMenu.displayName = 'HeaderMenu';
+HeaderMenu.propTypes = {
   /**
    * Required props for the accessibility label of the menu
    */
@@ -273,14 +233,7 @@ _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
    * Optionally provide a tabIndex for the underlying menu button
    */
   tabIndex: PropTypes__default["default"].number
-});
-_rollupPluginBabelHelpers.defineProperty(HeaderMenu, "contextType", usePrefix.PrefixContext);
-const HeaderMenuForwardRef = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
-    focusRef: ref
-  }));
-});
-HeaderMenuForwardRef.displayName = 'HeaderMenu';
+};
 
 exports.HeaderMenu = HeaderMenu;
-exports["default"] = HeaderMenuForwardRef;
+exports["default"] = HeaderMenu;

package/lib/components/UIShell/HeaderMenuButton.js

@@ -24,17 +24,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var _Menu, _Close;
-function HeaderMenuButton(_ref) {
-  let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    className: customClassName,
-    renderMenuIcon,
-    renderCloseIcon,
-    isActive,
-    isCollapsible,
-    ...rest
-  } = _ref;
+function HeaderMenuButton({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  className: customClassName,
+  renderMenuIcon,
+  renderCloseIcon,
+  isActive,
+  isCollapsible,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     ...(typeof customClassName === 'string' && {

package/lib/components/UIShell/HeaderMenuItem.js

@@ -23,17 +23,16 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem(_ref, ref) {
-  let {
-    className,
-    isActive,
-    isCurrentPage,
-    'aria-current': ariaCurrent,
-    children,
-    role,
-    tabIndex,
-    ...rest
-  } = _ref;
+const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem({
+  className,
+  isActive,
+  isCurrentPage,
+  'aria-current': ariaCurrent,
+  children,
+  role,
+  tabIndex,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   if (isCurrentPage) {
     isActive = isCurrentPage;

package/lib/components/UIShell/HeaderName.js

@@ -22,13 +22,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-function HeaderName(_ref) {
-  let {
-    children,
-    className: customClassName,
-    prefix = 'IBM',
-    ...rest
-  } = _ref;
+function HeaderName({
+  children,
+  className: customClassName,
+  prefix = 'IBM',
+  ...rest
+}) {
   const selectorPrefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${selectorPrefix}--header__name`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {

package/lib/components/UIShell/HeaderNavigation.js

@@ -22,14 +22,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-function HeaderNavigation(_ref) {
-  let {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    className: customClassName,
-    ...rest
-  } = _ref;
+function HeaderNavigation({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  className: customClassName,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--header__nav`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, {