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

package/es/components/UIShell/HeaderMenu.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
-import React__default from 'react';
+import React, { useContext, useState, useRef, Children, forwardRef, isValidElement, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -16,205 +16,165 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-/**
- * `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 = 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 = useContext(PrefixContext);
+  const [expanded, setExpanded] = useState(false);
+  const menuButtonRef = useRef(null);
+  const subMenusRef = useRef(null);
+  const itemRefs = useRef([]);
+  const mergedButtonRef = useMergedRefs([ref, focusRef, menuButtonRef]);
 
-class HeaderMenu extends React__default.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "_subMenus", /*#__PURE__*/React__default.createRef());
-    _defineProperty(this, "items", []);
-    _defineProperty(this, "menuButtonRef", null);
-    /**
-     * Toggle the expanded state of the menu on click.
-     */
-    _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.
-     */
-    _defineProperty(this, "handleOnKeyDown", event => {
-      // Handle enter or space key for toggling the expanded state of the menu.
-      if (matches(event, [Enter, 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.
-     */
-    _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.
-     */
-    _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.
-     */
-    _defineProperty(this, "handleItemRef", index => node => {
-      this.items[index] = node;
-    });
-    _defineProperty(this, "handleMenuClose", event => {
-      // Handle ESC keydown for closing the expanded menu.
-      if (matches(event, [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.
-     */
-    _defineProperty(this, "_renderMenuItem", (item, index) => {
-      if (/*#__PURE__*/React__default.isValidElement(item)) {
-        return /*#__PURE__*/React__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 (matches(event, [Enter, 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 (matches(event, [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 => Children.toArray(childrenArg).some(child => {
+    if (! /*#__PURE__*/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.Children.toArray(childrenArg).some(child => {
-      if (! /*#__PURE__*/React__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({
-      [`${prefix}--header__submenu`]: true,
-      [`${customClassName}`]: !!customClassName
-    });
-    const isActivePage = isActive ? isActive : isCurrentPage;
-    const linkClassName = cx({
-      [`${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__*/isValidElement(item)) {
+      return /*#__PURE__*/cloneElement(item, {
+        ref: handleItemRef(index)
+      });
+    }
+    return item;
+  };
+  const accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  const itemClassName = cx({
+    [`${prefix}--header__submenu`]: true,
+    [`${customClassName}`]: !!customClassName
+  });
+  const isActivePage = isActive ? isActive : isCurrentPage;
+  const linkClassName = cx({
+    [`${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.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({
-      // 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.createElement(MenuContent, null) : /*#__PURE__*/React__default.createElement(ChevronDown, {
-      className: `${this.context}--header__menu-arrow`
-    })), /*#__PURE__*/React__default.createElement("ul", _extends({}, accessibilityLabel, {
-      ref: this._subMenus,
-      onClick: this.handleOnClick,
-      className: `${prefix}--header__menu`
-    }), React__default.Children.map(children, this._renderMenuItem)));
-  }
-}
-_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.createElement("li", _extends({}, rest, {
+    className: itemClassName,
+    onKeyDown: composeEventHandlers([onKeyDown, handleMenuClose]),
+    onClick: composeEventHandlers([onClick, handleOnClick]),
+    onBlur: composeEventHandlers([onBlur, handleOnBlur]),
+    ref: ref
+  }), /*#__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
+    ,
+    "aria-expanded": expanded,
+    className: linkClassName,
+    href: "#",
+    onKeyDown: handleOnKeyDown,
+    ref: mergedButtonRef,
+    tabIndex: 0
+  }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React.createElement(MenuContent, null) : /*#__PURE__*/React.createElement(ChevronDown, {
+    className: `${prefix}--header__menu-arrow`
+  })), /*#__PURE__*/React.createElement("ul", _extends({}, accessibilityLabel, {
+    ref: subMenusRef,
+    className: `${prefix}--header__menu`
+  }), Children.map(children, renderMenuItem)));
+});
+HeaderMenu.displayName = 'HeaderMenu';
+HeaderMenu.propTypes = {
   /**
    * Required props for the accessibility label of the menu
    */
@@ -263,13 +223,6 @@ _defineProperty(HeaderMenu, "propTypes", {
    * Optionally provide a tabIndex for the underlying menu button
    */
   tabIndex: PropTypes.number
-});
-_defineProperty(HeaderMenu, "contextType", PrefixContext);
-const HeaderMenuForwardRef = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({}, props, {
-    focusRef: ref
-  }));
-});
-HeaderMenuForwardRef.displayName = 'HeaderMenu';
+};
 
-export { HeaderMenu, HeaderMenuForwardRef as default };
+export { HeaderMenu, HeaderMenu as default };

package/es/components/UIShell/HeaderMenuButton.js

@@ -8,23 +8,22 @@
 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';
 
 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();
   const className = cx({
     ...(typeof customClassName === 'string' && {
@@ -36,13 +35,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,42 +7,43 @@
 
 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';
 import deprecate from '../../prop-types/deprecate.js';
 
-const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem(_ref, ref) {
-  let {
-    className,
-    isActive,
-    isCurrentPage,
-    'aria-current': ariaCurrent,
-    children,
-    role,
-    tabIndex,
-    ...rest
-  } = _ref;
+const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem({
+  className,
+  isActive,
+  isCurrentPage,
+  'aria-current': ariaCurrent,
+  children,
+  role,
+  tabIndex,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   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 +64,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,23 +7,22 @@
 
 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';
 
-function HeaderName(_ref) {
-  let {
-    children,
-    className: customClassName,
-    prefix = 'IBM',
-    ...rest
-  } = _ref;
+function HeaderName({
+  children,
+  className: customClassName,
+  prefix = 'IBM',
+  ...rest
+}) {
   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);
 }

package/es/components/UIShell/HeaderNavigation.js

@@ -7,26 +7,25 @@
 
 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 { usePrefix } from '../../internal/usePrefix.js';
 
-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();
   const className = cx(`${prefix}--header__nav`, customClassName);
-  return /*#__PURE__*/React__default.createElement("nav", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("nav", _extends({}, rest, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     className: className
-  }), /*#__PURE__*/React__default.createElement("ul", {
+  }), /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--header__menu-bar`
   }, children));
 }

package/es/components/UIShell/HeaderPanel.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 } from 'react';
+import React, { useRef, useState } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -16,16 +16,15 @@ import { useWindowEvent } from '../../internal/useEvent.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
 const noopFn = () => {};
-const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(_ref, ref) {
-  let {
-    children,
-    className: customClassName,
-    expanded,
-    addFocusListeners = true,
-    onHeaderPanelFocus = noopFn,
-    href,
-    ...rest
-  } = _ref;
+const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel({
+  children,
+  className: customClassName,
+  expanded,
+  addFocusListeners = true,
+  onHeaderPanelFocus = noopFn,
+  href,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const headerPanelReference = useRef(null);
   const headerPanelRef = useMergedRefs([headerPanelReference, ref]);
@@ -67,7 +66,7 @@ const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(
       onHeaderPanelFocus();
     }
   });
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: className,
     ref: headerPanelRef
   }, eventHandlers), children);

package/es/components/UIShell/HeaderSideNavItems.js

@@ -6,22 +6,21 @@
  */
 
 import cx from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function HeaderSideNavItems(_ref) {
-  let {
-    className: customClassName,
-    children,
-    hasDivider = false
-  } = _ref;
+function HeaderSideNavItems({
+  className: customClassName,
+  children,
+  hasDivider = false
+}) {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__header-navigation`]: true,
     [`${prefix}--side-nav__header-divider`]: hasDivider
   }, customClassName);
-  return /*#__PURE__*/React__default.createElement("ul", {
+  return /*#__PURE__*/React.createElement("ul", {
     className: className
   }, children);
 }