@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/UIShell/Content.js

@@ -5,25 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className", "children", "tagName"];
-
-var Content = function Content(_ref) {
-  var customClassName = _ref.className,
-      children = _ref.children,
-      tagName = _ref.tagName,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--content"), customClassName);
-  return /*#__PURE__*/React__default.createElement(tagName, _objectSpread2(_objectSpread2({}, rest), {}, {
-    className: className
-  }), children);
+const Content = _ref => {
+  let {
+    className: customClassName,
+    children,
+    tagName,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--content`, customClassName);
+  return /*#__PURE__*/React__default.createElement(tagName, { ...rest,
+    className
+  }, children);
 };
 
 Content.propTypes = {

package/es/components/UIShell/Header.js

@@ -5,33 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className", "children"];
-
-var Header = function Header(_ref) {
-  var customClassName = _ref.className,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--header"), customClassName);
+const Header = _ref => {
+  let {
+    className: customClassName,
+    children,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--header`, customClassName);
   return /*#__PURE__*/React__default.createElement("header", _extends({}, rest, {
     className: className
   }), children);
 };
 
-Header.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+Header.propTypes = {
+  /**
+   * Required props for the accessibility label of the header
+   */
+  ...AriaLabelPropType,
+
   /**
    * Optionally provide a custom class name that is applied to the underlying <header>
    */
   className: PropTypes.string
-});
+};
 var Header$1 = Header;
 
 export { Header$1 as default };

package/es/components/UIShell/HeaderContainer.js

@@ -5,24 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState, useCallback } from 'react';
 
-var HeaderContainer = function HeaderContainer(_ref) {
-  var isSideNavExpanded = _ref.isSideNavExpanded,
-      Children = _ref.render;
-
+const HeaderContainer = _ref => {
+  let {
+    isSideNavExpanded,
+    render: Children
+  } = _ref;
   //state for expandable sidenav
-  var _useState = useState(isSideNavExpanded),
-      _useState2 = _slicedToArray(_useState, 2),
-      isSideNavExpandedState = _useState2[0],
-      setIsSideNavExpandedState = _useState2[1];
-
-  var handleHeaderMenuButtonClick = useCallback(function () {
-    setIsSideNavExpandedState(function (prevIsSideNavExpanded) {
-      return !prevIsSideNavExpanded;
-    });
+  const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
+  const handleHeaderMenuButtonClick = useCallback(() => {
+    setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
   }, [setIsSideNavExpandedState]);
   return /*#__PURE__*/React__default.createElement(Children, {
     isSideNavExpanded: isSideNavExpandedState,

package/es/components/UIShell/HeaderGlobalAction.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
@@ -13,7 +13,6 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import Button from '../Button/Button.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["aria-label", "aria-labelledby", "children", "className", "onClick", "isActive", "tooltipAlignment"];
 /**
  * HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
  * essentially an Icon Button with an additional state to indicate whether it is
@@ -23,21 +22,24 @@ var _excluded = ["aria-label", "aria-labelledby", "children", "className", "onCl
  * Note: children passed to this component should be an Icon.
  */
 
-var HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function HeaderGlobalAction(_ref, ref) {
-  var _cx;
-
-  var ariaLabel = _ref['aria-label'],
-      ariaLabelledBy = _ref['aria-labelledby'],
-      children = _ref.children,
-      customClassName = _ref.className,
-      onClick = _ref.onClick,
-      isActive = _ref.isActive,
-      tooltipAlignment = _ref.tooltipAlignment,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx((_cx = {}, _defineProperty(_cx, customClassName, !!customClassName), _defineProperty(_cx, "".concat(prefix, "--header__action"), true), _defineProperty(_cx, "".concat(prefix, "--header__action--active"), isActive), _cx));
-  var accessibilityLabel = {
+const HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function HeaderGlobalAction(_ref, ref) {
+  let {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className: customClassName,
+    onClick,
+    isActive,
+    tooltipAlignment,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx({
+    [customClassName]: !!customClassName,
+    [`${prefix}--header__action`]: true,
+    [`${prefix}--header__action--active`]: isActive
+  });
+  const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
@@ -52,7 +54,12 @@ var HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function HeaderG
     ref: ref
   }), children);
 });
-HeaderGlobalAction.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+HeaderGlobalAction.propTypes = {
+  /**
+   * Required props for the accessibility label of the button
+   */
+  ...AriaLabelPropType,
+
   /**
    * Provide a custom icon for this global action
    */
@@ -80,7 +87,7 @@ HeaderGlobalAction.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropTy
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end'])
-});
+};
 HeaderGlobalAction.displayName = 'HeaderGlobalAction';
 var HeaderGlobalAction$1 = HeaderGlobalAction;
 

package/es/components/UIShell/HeaderGlobalBar.js

@@ -13,9 +13,7 @@ import wrapComponent from '../../tools/wrapComponent.js';
 
 var HeaderGlobalBar = wrapComponent({
   name: 'HeaderGlobalBar',
-  className: function className(prefix) {
-    return "".concat(prefix, "--header__global");
-  },
+  className: prefix => `${prefix}--header__global`,
   type: 'div'
 });
 

package/es/components/UIShell/HeaderMenu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+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';
@@ -16,7 +16,6 @@ import deprecate from '../../prop-types/deprecate.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
 
-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
@@ -24,192 +23,178 @@ var _excluded = ["isActive", "isCurrentPage", "aria-label", "aria-labelledby", "
  * help manage focus state of its children.
  */
 
-var HeaderMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(HeaderMenu, _React$Component);
+class HeaderMenu extends React__default.Component {
+  constructor(props) {
+    super(props);
 
-  var _super = _createSuper(HeaderMenu);
+    _defineProperty(this, "_subMenus", /*#__PURE__*/React__default.createRef());
 
-  function HeaderMenu(props) {
-    var _this;
-
-    _classCallCheck(this, HeaderMenu);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "_subMenus", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "handleOnClick", function (e) {
-      var subMenusNode = _this._subMenus.current;
+    _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
+      }));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnKeyDown", function (event) {
+    _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(function (prevState) {
-          return {
-            expanded: !prevState.expanded
-          };
-        });
-
+        this.setState(prevState => ({
+          expanded: !prevState.expanded
+        }));
         return;
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnBlur", function (event) {
+    _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
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleMenuButtonRef", function (node) {
-      if (_this.props.focusRef) {
-        _this.props.focusRef(node);
+    _defineProperty(this, "handleMenuButtonRef", node => {
+      if (this.props.focusRef) {
+        this.props.focusRef(node);
       }
 
-      _this.menuButtonRef = node;
+      this.menuButtonRef = node;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleItemRef", function (index) {
-      return function (node) {
-        _this.items[index] = node;
-      };
+    _defineProperty(this, "handleItemRef", index => node => {
+      this.items[index] = node;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleMenuClose", function (event) {
+    _defineProperty(this, "handleMenuClose", event => {
       // Handle ESC keydown for closing the expanded menu.
-      if (matches(event, [Escape]) && _this.state.expanded) {
+      if (matches(event, [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;
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "_renderMenuItem", function (item, index) {
+    _defineProperty(this, "_renderMenuItem", (item, index) => {
       if ( /*#__PURE__*/React__default.isValidElement(item)) {
         return /*#__PURE__*/React__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.
    */
 
 
-  _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 = _objectWithoutProperties(_this$props, _excluded);
-
-      var accessibilityLabel = {
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledBy
-      };
-      var itemClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _defineProperty(_cx, customClassName, !!customClassName), _cx));
-      var isActivePage = isActive ? isActive : isCurrentPage;
-      var linkClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _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.createElement("li", _extends({}, rest, {
-        className: itemClassName,
-        onKeyDown: this.handleMenuClose,
-        onClick: this.handleOnClick,
-        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: "".concat(this.context, "--header__menu-arrow")
-      })), /*#__PURE__*/React__default.createElement("ul", _extends({}, accessibilityLabel, {
-        ref: this._subMenus,
-        className: "".concat(prefix, "--header__menu")
-      }), React__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.Component);
-
-_defineProperty(HeaderMenu, "propTypes", _objectSpread2(_objectSpread2({}, 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({
+      [`${prefix}--header__submenu`]: true,
+      [customClassName]: !!customClassName
+    });
+    let 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
+    }); // 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: this.handleMenuClose,
+      onClick: this.handleOnClick,
+      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,
+      className: `${prefix}--header__menu`
+    }), React__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.
+   */
+
+
+}
+
+_defineProperty(HeaderMenu, "propTypes", {
+  /**
+   * Required props for the accessibility label of the menu
+   */
+  ...AriaLabelPropType,
+
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
@@ -245,11 +230,11 @@ _defineProperty(HeaderMenu, "propTypes", _objectSpread2(_objectSpread2({}, AriaL
    * Optionally provide a tabIndex for the underlying menu button
    */
   tabIndex: PropTypes.number
-}));
+});
 
 _defineProperty(HeaderMenu, "contextType", PrefixContext);
 
-var HeaderMenuForwardRef = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+const HeaderMenuForwardRef = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({}, props, {
     focusRef: ref
   }));

package/es/components/UIShell/HeaderMenuButton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Menu, Close } from '@carbon/icons-react';
 import cx from 'classnames';
 import React__default from 'react';
@@ -15,31 +15,35 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 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 = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx((_cx = {}, _defineProperty(_cx, customClassName, !!customClassName), _defineProperty(_cx, "".concat(prefix, "--header__action"), true), _defineProperty(_cx, "".concat(prefix, "--header__menu-trigger"), true), _defineProperty(_cx, "".concat(prefix, "--header__action--active"), isActive), _defineProperty(_cx, "".concat(prefix, "--header__menu-toggle"), true), _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();
+  const className = cx({
+    [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.createElement(Menu, {
+  const menuIcon = renderMenuIcon ? renderMenuIcon : _Menu || (_Menu = /*#__PURE__*/React__default.createElement(Menu, {
     size: 20
   }));
-  var closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
+  const closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
     size: 20
   }));
   return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, accessibilityLabel, {
@@ -50,7 +54,12 @@ function HeaderMenuButton(_ref) {
   }), isActive ? closeIcon : menuIcon);
 }
 
-HeaderMenuButton.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+HeaderMenuButton.propTypes = {
+  /**
+   * Required props for accessibility label on the underlying menu button
+   */
+  ...AriaLabelPropType,
+
   /**
    * Optionally provide a custom class name that is applied to the underlying
    * button
@@ -67,6 +76,6 @@ HeaderMenuButton.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType
    * button fires it's onclick event
    */
   onClick: PropTypes.func
-});
+};
 
 export { HeaderMenuButton as default };