@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/Menu/Menu.js

@@ -0,0 +1,339 @@
+/**
+ * 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 React = require('react');
+var ReactDOM = require('react-dom');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var usePrefix = require('../../internal/usePrefix.js');
+var _utils = require('./_utils.js');
+var MenuGroup = require('./MenuGroup.js');
+var MenuRadioGroup = require('./MenuRadioGroup.js');
+var MenuRadioGroupOptions = require('./MenuRadioGroupOptions.js');
+var MenuSelectableItem = require('./MenuSelectableItem.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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["children", "className", "id", "level", "open", "size", "target", "x", "y", "onClose"];
+var margin = 16; // distance to keep to body edges, in px
+
+var defaultSize = 'sm';
+
+var Menu = function Menu(_ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      className = _ref.className,
+      id = _ref.id,
+      _ref$level = _ref.level,
+      level = _ref$level === void 0 ? 1 : _ref$level,
+      open = _ref.open,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? defaultSize : _ref$size,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? document.body : _ref$target,
+      _ref$x = _ref.x,
+      x = _ref$x === void 0 ? 0 : _ref$x,
+      _ref$y = _ref.y,
+      y = _ref$y === void 0 ? 0 : _ref$y,
+      _ref$onClose = _ref.onClose,
+      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var rootRef = React.useRef(null);
+
+  var _useState = React.useState(1),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      direction = _useState2[0],
+      setDirection = _useState2[1]; // 1 = to right, -1 = to left
+
+
+  var _useState3 = React.useState([x, y]),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      position = _useState4[0],
+      setPosition = _useState4[1];
+
+  var isRootMenu = level === 1;
+  var focusReturn = React.useRef(null);
+  var prefix = usePrefix.usePrefix();
+
+  function returnFocus() {
+    if (focusReturn.current) {
+      focusReturn.current.focus();
+    }
+  }
+
+  function close(eventType) {
+    var isKeyboardEvent = /^key/.test(eventType);
+
+    if (isKeyboardEvent) {
+      window.addEventListener('keyup', returnFocus, {
+        once: true
+      });
+    } else {
+      window.addEventListener('mouseup', returnFocus, {
+        once: true
+      });
+    }
+
+    onClose();
+  }
+
+  function getContainerBoundaries() {
+    var _document$body = document.body,
+        bodyWidth = _document$body.clientWidth,
+        bodyHeight = _document$body.clientHeight;
+    return [margin, margin, bodyWidth - margin, bodyHeight - margin];
+  }
+
+  function getTargetBoundaries() {
+    var xIsRange = _rollupPluginBabelHelpers["typeof"](x) === 'object' && x.length === 2;
+    var yIsRange = _rollupPluginBabelHelpers["typeof"](y) === 'object' && y.length === 2;
+    var targetBoundaries = [xIsRange ? x[0] : x, yIsRange ? y[0] : y, xIsRange ? x[1] : x, yIsRange ? y[1] : y];
+
+    if (!isRootMenu) {
+      var _getParentMenu;
+
+      var _getParentMenu$getBou = (_getParentMenu = _utils.getParentMenu(rootRef.current)) === null || _getParentMenu === void 0 ? void 0 : _getParentMenu.getBoundingClientRect(),
+          parentWidth = _getParentMenu$getBou.width;
+
+      targetBoundaries[2] -= parentWidth;
+    }
+
+    var containerBoundaries = getContainerBoundaries();
+    return [_utils.capWithinRange(targetBoundaries[0], containerBoundaries[0], containerBoundaries[2]), _utils.capWithinRange(targetBoundaries[1], containerBoundaries[1], containerBoundaries[3]), _utils.capWithinRange(targetBoundaries[2], containerBoundaries[0], containerBoundaries[2]), _utils.capWithinRange(targetBoundaries[3], containerBoundaries[1], containerBoundaries[3])];
+  }
+
+  function focusNode(node) {
+    if (node) {
+      _utils.resetFocus(rootRef.current);
+      _utils.focusNode(node);
+    }
+  }
+
+  function handleKeyDown(event) {
+    if (match.match(event, keys.Tab)) {
+      event.preventDefault();
+      close(event.type);
+    }
+
+    if (event.target.tagName === 'LI' && (match.match(event, keys.Enter) || match.match(event, keys.Space))) {
+      handleClick(event);
+    } else {
+      event.stopPropagation();
+    }
+
+    if (match.match(event, keys.Escape) || !isRootMenu && match.match(event, keys.ArrowLeft)) {
+      close(event.type);
+    }
+
+    var nodeToFocus;
+
+    if (event.target.tagName === 'LI') {
+      var currentNode = event.target;
+
+      if (match.match(event, keys.ArrowUp)) {
+        nodeToFocus = _utils.getNextNode(currentNode, -1);
+      } else if (match.match(event, keys.ArrowDown)) {
+        nodeToFocus = _utils.getNextNode(currentNode, 1);
+      } else if (match.match(event, keys.ArrowLeft)) {
+        nodeToFocus = _utils.getParentNode(currentNode);
+      }
+    } else if (event.target.tagName === 'UL') {
+      var validNodes = _utils.getValidNodes(event.target);
+
+      if (validNodes.length > 0 && match.match(event, keys.ArrowUp)) {
+        nodeToFocus = validNodes[validNodes.length - 1];
+      } else if (validNodes.length > 0 && match.match(event, keys.ArrowDown)) {
+        nodeToFocus = validNodes[0];
+      }
+    }
+
+    focusNode(nodeToFocus);
+
+    if (rest.onKeyDown) {
+      rest.onKeyDown(event);
+    }
+  }
+
+  function handleClick(event) {
+    if (!_utils.clickedElementHasSubnodes(event) && event.target.tagName !== 'UL') {
+      close(event.type);
+    } else {
+      event.stopPropagation();
+    }
+  }
+
+  function getCorrectedPosition(preferredDirection) {
+    var _rootRef$current;
+
+    var elementRect = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.getBoundingClientRect();
+    var elementDimensions = [elementRect.width, elementRect.height];
+    var targetBoundaries = getTargetBoundaries();
+    var containerBoundaries = getContainerBoundaries();
+
+    var _getPosition = _utils.getPosition(elementDimensions, targetBoundaries, containerBoundaries, preferredDirection, isRootMenu, rootRef.current),
+        correctedPosition = _getPosition.position,
+        correctedDirection = _getPosition.direction;
+
+    setDirection(correctedDirection);
+    return correctedPosition;
+  }
+
+  function handleBlur(event) {
+    var _rootRef$current2;
+
+    if (isRootMenu && !((_rootRef$current2 = rootRef.current) !== null && _rootRef$current2 !== void 0 && _rootRef$current2.contains(event.relatedTarget))) {
+      close(event.type);
+    }
+  }
+
+  React.useEffect(function () {
+    if (open) {
+      focusReturn.current = document.activeElement;
+      var localDirection = 1;
+
+      if (isRootMenu) {
+        var _rootRef$current3;
+
+        (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.focus();
+      } else {
+        var parentMenu = _utils.getParentMenu(rootRef.current);
+
+        if (parentMenu) {
+          localDirection = Number(parentMenu.dataset.direction);
+        }
+      }
+
+      var correctedPosition = getCorrectedPosition(localDirection);
+      setPosition(correctedPosition);
+    } else {
+      setPosition([0, 0]);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [open, x, y]);
+  var someNodesHaveIcons = React__default["default"].Children.toArray(children).some(function (node) {
+    return node.type === MenuSelectableItem["default"] || node.type === MenuRadioGroup["default"];
+  });
+  var options = React__default["default"].Children.map(children, function (node) {
+    if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
+      return /*#__PURE__*/React__default["default"].cloneElement(node, {
+        indented: someNodesHaveIcons,
+        level: level
+      });
+    }
+  });
+  var classes = cx__default["default"]("".concat(prefix, "--menu"), (_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--menu--invisible"), open && position[0] === 0 && position[1] === 0), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--menu--root"), isRootMenu), _classnames), size !== defaultSize && "".concat(prefix, "--menu--").concat(size), className);
+
+  var ulAttributes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    id: id,
+    ref: rootRef,
+    className: classes,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    onBlur: handleBlur,
+    role: 'menu',
+    tabIndex: -1,
+    'data-direction': direction,
+    'data-level': level,
+    style: {
+      left: "".concat(position[0], "px"),
+      top: "".concat(position[1], "px")
+    }
+  });
+
+  var childrenToRender = options; // if the only child is a radiogroup, don't render it as radiogroup component, but
+  // only the items to prevent duplicate markup
+
+  if (options && options.length === 1 && options[0].type === MenuRadioGroup["default"]) {
+    var radioGroupProps = options[0].props;
+    ulAttributes['aria-label'] = radioGroupProps.label;
+    childrenToRender = /*#__PURE__*/React__default["default"].createElement(MenuRadioGroupOptions["default"], {
+      items: radioGroupProps.items,
+      initialSelectedItem: radioGroupProps.initialSelectedItem,
+      onChange: radioGroupProps.onChange
+    });
+  } // if the only child is a generic group, don't render it as group component, but
+  // only the children to prevent duplicate markup
+
+
+  if (options && options.length === 1 && options[0].type === MenuGroup["default"]) {
+    var groupProps = options[0].props;
+    ulAttributes['aria-label'] = groupProps.label;
+    childrenToRender = React__default["default"].Children.toArray(options[0].props.children);
+  }
+
+  var menu = /*#__PURE__*/React__default["default"].createElement("ul", ulAttributes, childrenToRender);
+  return isRootMenu ? open && /*#__PURE__*/ReactDOM__default["default"].createPortal(menu, target) || null : menu;
+};
+
+Menu.propTypes = {
+  /**
+   * Specify the children of the Menu
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to apply to the ul node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Define an ID for this menu
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Internal: keeps track of the nesting level of the menu
+   */
+  level: PropTypes__default["default"].number,
+
+  /**
+   * Function called when the menu is closed
+   */
+  onClose: PropTypes__default["default"].func,
+
+  /**
+   * Specify whether the Menu is currently open
+   */
+  open: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the size of the menu, from a list of available sizes.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Optionally pass an element the Menu should be appended to as a child. Defaults to document.body.
+   */
+  target: PropTypes__default["default"].element,
+
+  /**
+   * Specify the x position where this menu is rendered
+   */
+  x: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)]),
+
+  /**
+   * Specify the y position where this menu is rendered
+   */
+  y: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)])
+};
+var Menu$1 = Menu;
+
+exports["default"] = Menu$1;

package/lib/components/Menu/MenuDivider.js

@@ -0,0 +1,27 @@
+/**
+ * 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 React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MenuDivider() {
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    role: "separator",
+    className: "".concat(prefix, "--menu-divider")
+  });
+}
+
+exports["default"] = MenuDivider;

package/lib/components/Menu/MenuGroup.js

@@ -0,0 +1,43 @@
+/**
+ * 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 React = require('react');
+var PropTypes = require('prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+function MenuGroup(_ref) {
+  var label = _ref.label,
+      children = _ref.children;
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    role: "none"
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
+    role: "group",
+    "aria-label": label
+  }, children));
+}
+
+MenuGroup.propTypes = {
+  /**
+   * Specify the children of the MenuGroup
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Rendered label for the MenuGroup
+   */
+  label: PropTypes__default["default"].node.isRequired
+};
+
+exports["default"] = MenuGroup;

package/lib/components/Menu/MenuItem.js

@@ -0,0 +1,67 @@
+/**
+ * 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 React = require('react');
+var PropTypes = require('prop-types');
+var MenuOption = require('./MenuOption.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["label", "children", "disabled", "kind", "shortcut"];
+
+function MenuItem(_ref) {
+  var label = _ref.label,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      kind = _ref.kind,
+      shortcut = _ref.shortcut,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement(MenuOption["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    label: label,
+    disabled: disabled,
+    kind: kind,
+    shortcut: shortcut
+  }), children);
+}
+
+MenuItem.propTypes = {
+  /**
+   * Specify the children of the MenuItem
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether this MenuItem is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Optional prop to specify the kind of the MenuItem
+   */
+  kind: PropTypes__default["default"].oneOf(['default', 'danger']),
+
+  /**
+   * Rendered label for the MenuItem
+   */
+  label: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Rendered shortcut for the MenuItem
+   */
+  shortcut: PropTypes__default["default"].node
+};
+
+exports["default"] = MenuItem;