@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/UIShell/HeaderContainer.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+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;
+
+  //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;
+    });
+  }, [setIsSideNavExpandedState]);
+  return /*#__PURE__*/React__default.createElement(Children, {
+    isSideNavExpanded: isSideNavExpandedState,
+    onClickSideNavExpand: handleHeaderMenuButtonClick
+  });
+};
+
+HeaderContainer.propTypes = {
+  /**
+   * Optionally provide a custom class name that is applied to the underlying <header>
+   */
+  isSideNavExpanded: PropTypes.bool
+};
+HeaderContainer.defaultProps = {
+  isSideNavExpanded: false
+};
+var HeaderContainer$1 = HeaderContainer;
+
+export { HeaderContainer$1 as default };

package/es/components/UIShell/HeaderGlobalAction.js

@@ -0,0 +1,87 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+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
+ * "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.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 = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, accessibilityLabel, {
+    className: className,
+    onClick: onClick,
+    type: "button",
+    hasIconOnly: true,
+    iconDescription: ariaLabel,
+    tooltipPosition: "bottom",
+    tooltipAlignment: tooltipAlignment,
+    ref: ref
+  }), children);
+});
+HeaderGlobalAction.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+  /**
+   * Provide a custom icon for this global action
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Optionally provide a custom class name that is applied to the underlying
+   * button
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the action is currently active
+   */
+  isActive: PropTypes.bool,
+
+  /**
+   * Optionally provide an onClick handler that is called when the underlying
+   * button fires it's onclick event
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end'])
+});
+HeaderGlobalAction.displayName = 'HeaderGlobalAction';
+var HeaderGlobalAction$1 = HeaderGlobalAction;
+
+export { HeaderGlobalAction$1 as default };

package/es/components/UIShell/HeaderGlobalBar.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+import wrapComponent from '../../tools/wrapComponent.js';
+
+/**
+ * Generic container for `HeaderGlobalAction` components
+ */
+
+var HeaderGlobalBar = wrapComponent({
+  name: 'HeaderGlobalBar',
+  className: "cds--header__global",
+  type: 'div'
+});
+
+export { HeaderGlobalBar as default };

package/es/components/UIShell/HeaderMenu.js

@@ -0,0 +1,240 @@
+/**
+ * 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.
+ */
+
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectSpread2 as _objectSpread2, extends as _extends, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { ChevronDown } from '@carbon/icons-react';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
+
+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) {
+  _inherits(HeaderMenu, _React$Component);
+
+  var _super = _createSuper(HeaderMenu);
+
+  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;
+
+      if (!subMenusNode || !subMenusNode.contains(e.target)) {
+        e.preventDefault();
+      }
+
+      _this.setState(function (prevState) {
+        return {
+          expanded: !prevState.expanded
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnKeyDown", function (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
+          };
+        });
+
+        return;
+      }
+    });
+
+    _defineProperty(_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
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMenuButtonRef", function (node) {
+      if (_this.props.focusRef) {
+        _this.props.focusRef(node);
+      }
+
+      _this.menuButtonRef = node;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleItemRef", function (index) {
+      return function (node) {
+        _this.items[index] = node;
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMenuClose", function (event) {
+      // Handle ESC keydown for closing the expanded menu.
+      if (matches(event, [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;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_renderMenuItem", function (item, index) {
+      if ( /*#__PURE__*/React__default.isValidElement(item)) {
+        return /*#__PURE__*/React__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.
+   */
+
+
+  _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 = _objectWithoutProperties(_this$props, _excluded);
+
+      var accessibilityLabel = {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy
+      };
+      var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _defineProperty(_cx, customClassName, true), _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.createElement("li", _extends({}, rest, {
+        className: className,
+        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: "".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.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), {}, {
+  /**
+   * Provide a custom ref handler for the menu button
+   */
+  focusRef: PropTypes.func,
+
+  /**
+   * Provide a label for the link text
+   */
+  menuLinkName: PropTypes.string.isRequired,
+
+  /**
+   * Optional component to render instead of string
+   */
+  renderMenuContent: PropTypes.func,
+
+  /**
+   * 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) {
+  return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({}, props, {
+    focusRef: ref
+  }));
+});
+HeaderMenuForwardRef.displayName = 'HeaderMenu';
+var HeaderMenuForwardRef$1 = HeaderMenuForwardRef;
+
+export { HeaderMenuForwardRef$1 as default };

package/es/components/UIShell/HeaderMenuButton.js

@@ -0,0 +1,69 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { Menu, Close } from '@carbon/icons-react';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+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 = _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 = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  };
+  var menuIcon = renderMenuIcon ? renderMenuIcon : _Menu || (_Menu = /*#__PURE__*/React__default.createElement(Menu, {
+    size: 20
+  }));
+  var closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
+    size: 20
+  }));
+  return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, accessibilityLabel, {
+    className: className,
+    title: ariaLabel,
+    type: "button",
+    onClick: onClick
+  }), isActive ? closeIcon : menuIcon);
+};
+
+HeaderMenuButton.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+  /**
+   * Optionally provide a custom class name that is applied to the underlying
+   * button
+   */
+  className: PropTypes.string,
+  isActive: PropTypes.bool,
+
+  /**
+   * Optionally provide an onClick handler that is called when the underlying
+   * button fires it's onclick event
+   */
+  onClick: PropTypes.func
+});
+var HeaderMenuButton$1 = HeaderMenuButton;
+
+export { HeaderMenuButton$1 as default };

package/es/components/UIShell/HeaderMenuItem.js

@@ -0,0 +1,73 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import Link, { LinkPropTypes } from './Link.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
+var HeaderMenuItem = /*#__PURE__*/React__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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var linkClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isCurrentPage && ariaCurrent !== 'page'), _cx));
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: className,
+    role: role
+  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
+    "aria-current": ariaCurrent,
+    className: linkClassName,
+    ref: ref,
+    tabIndex: tabIndex
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--text-truncate--end")
+  }, children)));
+});
+HeaderMenuItem.displayName = 'HeaderMenuItem';
+HeaderMenuItem.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {}, {
+  /**
+   * Pass in children that are either a string or can be read as a string by
+   * screen readers
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   */
+  isCurrentPage: PropTypes.bool,
+
+  /**
+   * Optionally supply a role for the underlying `<li>` node. Useful for resetting
+   * `<ul>` semantics for menus.
+   */
+  role: PropTypes.string,
+
+  /**
+   * Specify the tab index of the Link
+   */
+  tabIndex: PropTypes.number
+});
+var HeaderMenuItem$1 = HeaderMenuItem;
+
+export { HeaderMenuItem$1 as default };

package/es/components/UIShell/HeaderName.js

@@ -0,0 +1,62 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import Link, { LinkPropTypes } from './Link.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "className", "prefix", "href"];
+
+var HeaderName = function HeaderName(_ref) {
+  var children = _ref.children,
+      customClassName = _ref.className,
+      prefix = _ref.prefix,
+      href = _ref.href,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var selectorPrefix = usePrefix();
+  var className = cx("".concat(selectorPrefix, "--header__name"), customClassName);
+  return /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
+    className: className,
+    href: href
+  }), prefix && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(selectorPrefix, "--header__name--prefix")
+  }, prefix), "\xA0"), children);
+};
+
+HeaderName.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {}, {
+  /**
+   * Pass in children that are either a string or can be read as a string by
+   * screen readers
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Optionally provide a custom class to apply to the underlying `<li>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide an href for the name to link to
+   */
+  href: PropTypes.string,
+
+  /**
+   * Optionally specify a prefix to your header name. Useful for companies, for
+   * example: IBM [Product Name] versus solely [Product Name]
+   */
+  prefix: PropTypes.string
+});
+HeaderName.defaultProps = {
+  prefix: 'IBM'
+};
+var HeaderName$1 = HeaderName;
+
+export { HeaderName$1 as default };