@carbon/react 0.17.0 → 1.0.1

package/es/components/Menu/MenuDivider.js

@@ -0,0 +1,19 @@
+/**
+ * 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 React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+function MenuDivider() {
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("li", {
+    role: "separator",
+    className: "".concat(prefix, "--menu-divider")
+  });
+}
+
+export { MenuDivider as default };

package/es/components/Menu/MenuGroup.js

@@ -0,0 +1,34 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from 'prop-types';
+
+function MenuGroup(_ref) {
+  var label = _ref.label,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement("li", {
+    role: "none"
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    role: "group",
+    "aria-label": label
+  }, children));
+}
+
+MenuGroup.propTypes = {
+  /**
+   * Specify the children of the MenuGroup
+   */
+  children: PropTypes.node,
+
+  /**
+   * Rendered label for the MenuGroup
+   */
+  label: PropTypes.node.isRequired
+};
+
+export { MenuGroup as default };

package/es/components/Menu/MenuItem.js

@@ -0,0 +1,58 @@
+/**
+ * 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 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import MenuOption from './MenuOption.js';
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React__default.createElement(MenuOption, _extends({}, rest, {
+    label: label,
+    disabled: disabled,
+    kind: kind,
+    shortcut: shortcut
+  }), children);
+}
+
+MenuItem.propTypes = {
+  /**
+   * Specify the children of the MenuItem
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify whether this MenuItem is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Optional prop to specify the kind of the MenuItem
+   */
+  kind: PropTypes.oneOf(['default', 'danger']),
+
+  /**
+   * Rendered label for the MenuItem
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * Rendered shortcut for the MenuItem
+   */
+  shortcut: PropTypes.node
+};
+
+export { MenuItem as default };

package/es/components/Menu/MenuOption.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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { CaretRight } from '@carbon/icons-react';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { getFirstSubNode, focusNode, clickedElementHasSubnodes, getParentMenu } from './_utils.js';
+import Menu from './Menu.js';
+import { match } from '../../internal/keyboard/match.js';
+import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
+
+var _CaretRight;
+
+var _excluded = ["children", "disabled", "indented", "kind", "label", "level", "onClick", "renderIcon", "shortcut"];
+var hoverIntentDelay = 150; // in ms
+
+function MenuOptionContent(_ref) {
+  var label = _ref.label,
+      info = _ref.info,
+      disabled = _ref.disabled,
+      Icon = _ref.icon,
+      indented = _ref.indented;
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--menu-option__content"), _defineProperty({}, "".concat(prefix, "--menu-option__content--disabled"), disabled));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classes
+  }, indented && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-option__icon")
+  }, Icon && /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--menu-option__label"),
+    title: label
+  }, label), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-option__info")
+  }, info));
+}
+
+function MenuOption(_ref2) {
+  var _classnames2;
+
+  var children = _ref2.children,
+      disabled = _ref2.disabled,
+      indented = _ref2.indented,
+      _ref2$kind = _ref2.kind,
+      kind = _ref2$kind === void 0 ? 'default' : _ref2$kind,
+      label = _ref2.label,
+      level = _ref2.level,
+      _ref2$onClick = _ref2.onClick,
+      onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
+      renderIcon = _ref2.renderIcon,
+      shortcut = _ref2.shortcut,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      submenuOpen = _useState2[0],
+      setSubmenuOpen = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      submenuOpenedByKeyboard = _useState4[0],
+      setSubmenuOpenedByKeyboard = _useState4[1];
+
+  var rootRef = useRef(null);
+  var hoverIntentTimeout = useRef(null);
+  var prefix = usePrefix();
+  var subOptions = React__default.Children.map(children, function (node) {
+    if ( /*#__PURE__*/React__default.isValidElement(node)) {
+      return /*#__PURE__*/React__default.cloneElement(node);
+    }
+  });
+
+  function openSubmenu() {
+    var openedByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    setSubmenuOpenedByKeyboard(openedByKeyboard);
+    setSubmenuOpen(true);
+  }
+
+  function handleKeyDown(event) {
+    if (clickedElementHasSubnodes(event) && (match(event, ArrowRight) || match(event, Enter) || match(event, Space))) {
+      openSubmenu(true);
+    } else if ((match(event, Enter) || match(event, Space)) && onClick) {
+      onClick(event);
+    }
+  }
+
+  function handleMouseEnter() {
+    hoverIntentTimeout.current = setTimeout(openSubmenu, hoverIntentDelay);
+  }
+
+  function handleMouseLeave() {
+    clearTimeout(hoverIntentTimeout === null || hoverIntentTimeout === void 0 ? void 0 : hoverIntentTimeout.current);
+    setSubmenuOpen(false);
+  }
+
+  function getSubmenuPosition() {
+    var pos = [0, 0];
+
+    if (subOptions) {
+      var parentMenu = getParentMenu(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
+
+      if (parentMenu) {
+        var _parentMenu$getBoundi = parentMenu.getBoundingClientRect(),
+            x = _parentMenu$getBoundi.x,
+            width = _parentMenu$getBoundi.width;
+
+        var _rootRef$current$getB = rootRef.current.getBoundingClientRect(),
+            y = _rootRef$current$getB.y;
+
+        pos[0] = x + width;
+        pos[1] = y;
+      }
+    }
+
+    return pos;
+  }
+
+  useEffect(function () {
+    if (subOptions && submenuOpenedByKeyboard) {
+      var firstSubnode = getFirstSubNode(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
+      focusNode(firstSubnode);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [submenuOpen]);
+  var classes = cx("".concat(prefix, "--menu-option"), (_classnames2 = {}, _defineProperty(_classnames2, "".concat(prefix, "--menu-option--disabled"), disabled), _defineProperty(_classnames2, "".concat(prefix, "--menu-option--active"), subOptions && submenuOpen), _defineProperty(_classnames2, "".concat(prefix, "--menu-option--danger"), !subOptions && kind === 'danger'), _classnames2));
+  var allowedRoles = ['menuitemradio', 'menuitemcheckbox'];
+  var role = rest.role && allowedRoles.includes(rest.role) ? rest.role : 'menuitem';
+  var submenuPosition = getSubmenuPosition();
+  return (
+    /*#__PURE__*/
+    // role is either menuitemradio, menuitemcheckbox, or menuitem which are all interactive
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    React__default.createElement("li", _extends({}, rest, {
+      ref: rootRef,
+      className: classes,
+      role: role,
+      tabIndex: -1,
+      "aria-disabled": !subOptions && disabled,
+      "aria-haspopup": subOptions ? true : null,
+      "aria-expanded": subOptions ? submenuOpen : null,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: subOptions ? handleMouseEnter : null,
+      onMouseLeave: subOptions ? handleMouseLeave : null,
+      onClick: onClick
+    }), subOptions ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuOptionContent, {
+      label: label,
+      icon: renderIcon,
+      info: _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null)),
+      indented: indented
+    }), /*#__PURE__*/React__default.createElement(Menu, {
+      level: level + 1,
+      open: submenuOpen,
+      onClose: function onClose() {
+        setSubmenuOpen(false);
+      },
+      x: submenuPosition[0],
+      y: submenuPosition[1]
+    }, subOptions)) : /*#__PURE__*/React__default.createElement(MenuOptionContent, {
+      label: label,
+      disabled: disabled,
+      icon: renderIcon,
+      info: shortcut,
+      indented: indented
+    }))
+  );
+}
+
+MenuOptionContent.propTypes = {
+  /**
+   * Whether this option is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Icon that is displayed in front of the option
+   */
+  icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Whether the content should be indented
+   */
+  indented: PropTypes.bool,
+
+  /**
+   * Additional information such as shortcut or caret
+   */
+  info: PropTypes.node,
+
+  /**
+   * Rendered label for the MenuOptionContent
+   */
+  label: PropTypes.node.isRequired
+};
+MenuOption.propTypes = {
+  /**
+   * Specify the children of the MenuOption
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify whether this MenuOption is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Whether the content should be indented (for example because it's in a group with options that have icons).
+   * Is automatically set by Menu
+   */
+  indented: PropTypes.bool,
+
+  /**
+   * Optional prop to specify the kind of the MenuOption
+   */
+  kind: PropTypes.oneOf(['default', 'danger']),
+
+  /**
+   * Rendered label for the MenuOption
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * Which nested level this option is located in.
+   * Is automatically set by Menu
+   */
+  level: PropTypes.number,
+
+  /**
+   * The onClick handler
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Rendered icon for the MenuOption.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Rendered shortcut for the MenuOption
+   */
+  shortcut: PropTypes.node
+};
+
+export { MenuOption as default };

package/es/components/Menu/MenuRadioGroup.js

@@ -0,0 +1,50 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import MenuGroup from './MenuGroup.js';
+import MenuRadioGroupOptions from './MenuRadioGroupOptions.js';
+
+function MenuRadioGroup(_ref) {
+  var items = _ref.items,
+      initialSelectedItem = _ref.initialSelectedItem,
+      label = _ref.label,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  return /*#__PURE__*/React__default.createElement(MenuGroup, {
+    label: label
+  }, /*#__PURE__*/React__default.createElement(MenuRadioGroupOptions, {
+    items: items,
+    initialSelectedItem: initialSelectedItem,
+    onChange: onChange
+  }));
+}
+
+MenuRadioGroup.propTypes = {
+  /**
+   * Whether the option should be checked by default
+   */
+  initialSelectedItem: PropTypes.string,
+
+  /**
+   * Array of the radio options
+   */
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * The radio group label
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Callback function when selection the has been changed
+   */
+  onChange: PropTypes.func
+};
+
+export { MenuRadioGroup as default };

package/es/components/Menu/MenuRadioGroupOptions.js

@@ -0,0 +1,64 @@
+/**
+ * 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 React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Checkmark } from '@carbon/icons-react';
+import MenuOption from './MenuOption.js';
+
+function MenuRadioGroupOptions(_ref) {
+  var items = _ref.items,
+      initialSelectedItem = _ref.initialSelectedItem,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
+  var _useState = useState(initialSelectedItem),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  function handleClick(option) {
+    setSelected(option);
+    onChange(option);
+  }
+
+  var options = items.map(function (option, i) {
+    var isSelected = selected === option;
+    return /*#__PURE__*/React__default.createElement(MenuOption, {
+      key: i,
+      role: "menuitemradio",
+      "aria-checked": isSelected,
+      renderIcon: isSelected ? Checkmark : null,
+      label: option,
+      indented: true,
+      onClick: function onClick() {
+        handleClick(option);
+      }
+    });
+  });
+  return options;
+}
+
+MenuRadioGroupOptions.propTypes = {
+  /**
+   * Whether the option should be checked by default
+   */
+  initialSelectedItem: PropTypes.string,
+
+  /**
+   * Array of the radio options
+   */
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * Callback function when selection the has been changed
+   */
+  onChange: PropTypes.func
+};
+
+export { MenuRadioGroupOptions as default };

package/es/components/Menu/MenuSelectableItem.js

@@ -0,0 +1,57 @@
+/**
+ * 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 React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Checkmark } from '@carbon/icons-react';
+import MenuOption from './MenuOption.js';
+
+function MenuSelectableItem(_ref) {
+  var label = _ref.label,
+      initialChecked = _ref.initialChecked,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
+  var _useState = useState(initialChecked),
+      _useState2 = _slicedToArray(_useState, 2),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
+
+  function handleClick() {
+    setChecked(!checked);
+    onChange(!checked);
+  }
+
+  return /*#__PURE__*/React__default.createElement(MenuOption, {
+    role: "menuitemcheckbox",
+    "aria-checked": checked,
+    renderIcon: checked ? Checkmark : null,
+    label: label,
+    indented: true,
+    onClick: handleClick
+  });
+}
+
+MenuSelectableItem.propTypes = {
+  /**
+   * Whether the option should be checked by default
+   */
+  initialChecked: PropTypes.bool,
+
+  /**
+   * Rendered label for the MenuOptionContent
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * Callback function when selection the has been changed
+   */
+  onChange: PropTypes.func
+};
+
+export { MenuSelectableItem as default };