@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/UIShell/Header.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["className", "children"];
+
+var Header = function Header(_ref) {
+  var customClassName = _ref.className,
+      children = _ref.children,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--header"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("header", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: className
+  }), children);
+};
+
+Header.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * Optionally provide a custom class name that is applied to the underlying <header>
+   */
+  className: PropTypes__default["default"].string
+});
+var Header$1 = Header;
+
+exports["default"] = Header$1;

package/lib/components/UIShell/HeaderContainer.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var HeaderContainer = function HeaderContainer(_ref) {
+  var isSideNavExpanded = _ref.isSideNavExpanded,
+      Children = _ref.render;
+
+  //state for expandable sidenav
+  var _useState = React.useState(isSideNavExpanded),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isSideNavExpandedState = _useState2[0],
+      setIsSideNavExpandedState = _useState2[1];
+
+  var handleHeaderMenuButtonClick = React.useCallback(function () {
+    setIsSideNavExpandedState(function (prevIsSideNavExpanded) {
+      return !prevIsSideNavExpanded;
+    });
+  }, [setIsSideNavExpandedState]);
+  return /*#__PURE__*/React__default["default"].createElement(Children, {
+    isSideNavExpanded: isSideNavExpandedState,
+    onClickSideNavExpand: handleHeaderMenuButtonClick
+  });
+};
+
+HeaderContainer.propTypes = {
+  /**
+   * Optionally provide a custom class name that is applied to the underlying <header>
+   */
+  isSideNavExpanded: PropTypes__default["default"].bool
+};
+HeaderContainer.defaultProps = {
+  isSideNavExpanded: false
+};
+var HeaderContainer$1 = HeaderContainer;
+
+exports["default"] = HeaderContainer$1;

package/lib/components/UIShell/HeaderGlobalAction.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var Button = require('../Button/Button.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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", "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
+ * "active". The active state comes from when a user clicks on the global action
+ * which should trigger a panel to appear.
+ *
+ * Note: children passed to this component should be an Icon.
+ */
+
+var HeaderGlobalAction = /*#__PURE__*/React__default["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 = _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__action--active"), isActive), _cx));
+  var accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
+    className: className,
+    onClick: onClick,
+    type: "button",
+    hasIconOnly: true,
+    iconDescription: ariaLabel,
+    tooltipPosition: "bottom",
+    tooltipAlignment: tooltipAlignment,
+    ref: ref
+  }), children);
+});
+HeaderGlobalAction.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * Provide a custom icon for this global action
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Optionally provide a custom class name that is applied to the underlying
+   * button
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the action is currently active
+   */
+  isActive: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally provide an onClick handler that is called when the underlying
+   * button fires it's onclick event
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes__default["default"].oneOf(['start', 'center', 'end'])
+});
+HeaderGlobalAction.displayName = 'HeaderGlobalAction';
+var HeaderGlobalAction$1 = HeaderGlobalAction;
+
+exports["default"] = HeaderGlobalAction$1;

package/lib/components/UIShell/HeaderGlobalBar.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var wrapComponent = require('../../tools/wrapComponent.js');
+
+/**
+ * Generic container for `HeaderGlobalAction` components
+ */
+
+var HeaderGlobalBar = wrapComponent["default"]({
+  name: 'HeaderGlobalBar',
+  className: "cds--header__global",
+  type: 'div'
+});
+
+exports["default"] = HeaderGlobalBar;

package/lib/components/UIShell/HeaderMenu.js

@@ -0,0 +1,250 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["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
+ * with managing focus. It also passes along refs to each child so that it can
+ * help manage focus state of its children.
+ */
+
+var HeaderMenu = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(HeaderMenu, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(HeaderMenu);
+
+  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;
+
+      if (!subMenusNode || !subMenusNode.contains(e.target)) {
+        e.preventDefault();
+      }
+
+      _this.setState(function (prevState) {
+        return {
+          expanded: !prevState.expanded
+        };
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnKeyDown", function (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
+          };
+        });
+
+        return;
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnBlur", function (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;
+      });
+
+      if (event.relatedTarget && (event.relatedTarget.getAttribute('href') && event.relatedTarget.getAttribute('href') !== '#' || itemTriggeredBlur)) {
+        return;
+      }
+
+      _this.setState({
+        expanded: false,
+        selectedIndex: null
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleMenuButtonRef", function (node) {
+      if (_this.props.focusRef) {
+        _this.props.focusRef(node);
+      }
+
+      _this.menuButtonRef = node;
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleItemRef", function (index) {
+      return function (node) {
+        _this.items[index] = node;
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleMenuClose", function (event) {
+      // Handle ESC keydown for closing the expanded menu.
+      if (match.matches(event, [keys.Escape]) && _this.state.expanded) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        _this.setState(function () {
+          return {
+            expanded: false,
+            selectedIndex: null
+          };
+        }); // Return focus to menu button when the user hits ESC.
+
+
+        _this.menuButtonRef.focus();
+
+        return;
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_renderMenuItem", function (item, index) {
+      if ( /*#__PURE__*/React__default["default"].isValidElement(item)) {
+        return /*#__PURE__*/React__default["default"].cloneElement(item, {
+          ref: _this.handleItemRef(index)
+        });
+      }
+    });
+
+    _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;
+  }
+  /**
+   * Toggle the expanded state of the menu on click.
+   */
+
+
+  _rollupPluginBabelHelpers.createClass(HeaderMenu, [{
+    key: "render",
+    value: function render() {
+      var _cx;
+
+      var prefix = this.context;
+
+      var _this$props = this.props,
+          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 className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _cx)); // 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: className,
+        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: "".concat(prefix, "--header__menu-item ").concat(prefix, "--header__menu-title"),
+        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), {}, {
+  /**
+   * Provide a custom ref handler for the menu button
+   */
+  focusRef: PropTypes__default["default"].func,
+
+  /**
+   * Provide a label for the link text
+   */
+  menuLinkName: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Optional component to render instead of string
+   */
+  renderMenuContent: PropTypes__default["default"].func,
+
+  /**
+   * 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) {
+  return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
+    focusRef: ref
+  }));
+});
+HeaderMenuForwardRef.displayName = 'HeaderMenu';
+var HeaderMenuForwardRef$1 = HeaderMenuForwardRef;
+
+exports["default"] = HeaderMenuForwardRef$1;

package/lib/components/UIShell/HeaderMenuButton.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _Menu, _Close;
+
+var _excluded = ["aria-label", "aria-labelledby", "className", "renderMenuIcon", "renderCloseIcon", "onClick", "isActive", "isCollapsible"];
+
+var HeaderMenuButton = 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 = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  var 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, {
+    size: 20
+  }));
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
+    className: className,
+    title: ariaLabel,
+    type: "button",
+    onClick: onClick
+  }), isActive ? closeIcon : menuIcon);
+};
+
+HeaderMenuButton.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+  /**
+   * Optionally provide a custom class name that is applied to the underlying
+   * button
+   */
+  className: PropTypes__default["default"].string,
+  isActive: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally provide an onClick handler that is called when the underlying
+   * button fires it's onclick event
+   */
+  onClick: PropTypes__default["default"].func
+});
+var HeaderMenuButton$1 = HeaderMenuButton;
+
+exports["default"] = HeaderMenuButton$1;

package/lib/components/UIShell/HeaderMenuItem.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var Link = require('./Link.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
+var HeaderMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function HeaderMenuItem(_ref, ref) {
+  var _cx;
+
+  var className = _ref.className,
+      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();
+  var linkClassName = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isCurrentPage && ariaCurrent !== 'page'), _cx));
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: className,
+    role: role
+  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-current": ariaCurrent,
+    className: linkClassName,
+    ref: ref,
+    tabIndex: tabIndex
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--text-truncate--end")
+  }, children)));
+});
+HeaderMenuItem.displayName = 'HeaderMenuItem';
+HeaderMenuItem.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, Link.LinkPropTypes), {}, {
+  /**
+   * Pass in children that are either a string or can be read as a string by
+   * screen readers
+   */
+  children: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   */
+  isCurrentPage: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally supply a role for the underlying `<li>` node. Useful for resetting
+   * `<ul>` semantics for menus.
+   */
+  role: PropTypes__default["default"].string,
+
+  /**
+   * Specify the tab index of the Link
+   */
+  tabIndex: PropTypes__default["default"].number
+});
+var HeaderMenuItem$1 = HeaderMenuItem;
+
+exports["default"] = HeaderMenuItem$1;