@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/Menu/MenuOption.js

@@ -0,0 +1,260 @@
+/**
+ * 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 cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var usePrefix = require('../../internal/usePrefix.js');
+var _utils = require('./_utils.js');
+var Menu = require('./Menu.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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+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.usePrefix();
+  var classes = cx__default["default"]("".concat(prefix, "--menu-option__content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--menu-option__content--disabled"), disabled));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes
+  }, indented && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--menu-option__icon")
+  }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--menu-option__label"),
+    title: label
+  }, label), /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      submenuOpen = _useState2[0],
+      setSubmenuOpen = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      submenuOpenedByKeyboard = _useState4[0],
+      setSubmenuOpenedByKeyboard = _useState4[1];
+
+  var rootRef = React.useRef(null);
+  var hoverIntentTimeout = React.useRef(null);
+  var prefix = usePrefix.usePrefix();
+  var subOptions = React__default["default"].Children.map(children, function (node) {
+    if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
+      return /*#__PURE__*/React__default["default"].cloneElement(node);
+    }
+  });
+
+  function openSubmenu() {
+    var openedByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    setSubmenuOpenedByKeyboard(openedByKeyboard);
+    setSubmenuOpen(true);
+  }
+
+  function handleKeyDown(event) {
+    if (_utils.clickedElementHasSubnodes(event) && (match.match(event, keys.ArrowRight) || match.match(event, keys.Enter) || match.match(event, keys.Space))) {
+      openSubmenu(true);
+    } else if ((match.match(event, keys.Enter) || match.match(event, keys.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 = _utils.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;
+  }
+
+  React.useEffect(function () {
+    if (subOptions && submenuOpenedByKeyboard) {
+      var firstSubnode = _utils.getFirstSubNode(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
+      _utils.focusNode(firstSubnode);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [submenuOpen]);
+  var classes = cx__default["default"]("".concat(prefix, "--menu-option"), (_classnames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classnames2, "".concat(prefix, "--menu-option--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classnames2, "".concat(prefix, "--menu-option--active"), subOptions && submenuOpen), _rollupPluginBabelHelpers.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["default"].createElement("li", _rollupPluginBabelHelpers["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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(MenuOptionContent, {
+      label: label,
+      icon: renderIcon,
+      info: _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null)),
+      indented: indented
+    }), /*#__PURE__*/React__default["default"].createElement(Menu["default"], {
+      level: level + 1,
+      open: submenuOpen,
+      onClose: function onClose() {
+        setSubmenuOpen(false);
+      },
+      x: submenuPosition[0],
+      y: submenuPosition[1]
+    }, subOptions)) : /*#__PURE__*/React__default["default"].createElement(MenuOptionContent, {
+      label: label,
+      disabled: disabled,
+      icon: renderIcon,
+      info: shortcut,
+      indented: indented
+    }))
+  );
+}
+
+MenuOptionContent.propTypes = {
+  /**
+   * Whether this option is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Icon that is displayed in front of the option
+   */
+  icon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Whether the content should be indented
+   */
+  indented: PropTypes__default["default"].bool,
+
+  /**
+   * Additional information such as shortcut or caret
+   */
+  info: PropTypes__default["default"].node,
+
+  /**
+   * Rendered label for the MenuOptionContent
+   */
+  label: PropTypes__default["default"].node.isRequired
+};
+MenuOption.propTypes = {
+  /**
+   * Specify the children of the MenuOption
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether this MenuOption is disabled
+   */
+  disabled: PropTypes__default["default"].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__default["default"].bool,
+
+  /**
+   * Optional prop to specify the kind of the MenuOption
+   */
+  kind: PropTypes__default["default"].oneOf(['default', 'danger']),
+
+  /**
+   * Rendered label for the MenuOption
+   */
+  label: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Which nested level this option is located in.
+   * Is automatically set by Menu
+   */
+  level: PropTypes__default["default"].number,
+
+  /**
+   * The onClick handler
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Rendered icon for the MenuOption.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Rendered shortcut for the MenuOption
+   */
+  shortcut: PropTypes__default["default"].node
+};
+
+exports["default"] = MenuOption;

package/lib/components/Menu/MenuRadioGroup.js

@@ -0,0 +1,59 @@
+/**
+ * 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');
+var MenuGroup = require('./MenuGroup.js');
+var MenuRadioGroupOptions = require('./MenuRadioGroupOptions.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);
+
+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["default"].createElement(MenuGroup["default"], {
+    label: label
+  }, /*#__PURE__*/React__default["default"].createElement(MenuRadioGroupOptions["default"], {
+    items: items,
+    initialSelectedItem: initialSelectedItem,
+    onChange: onChange
+  }));
+}
+
+MenuRadioGroup.propTypes = {
+  /**
+   * Whether the option should be checked by default
+   */
+  initialSelectedItem: PropTypes__default["default"].string,
+
+  /**
+   * Array of the radio options
+   */
+  items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string).isRequired,
+
+  /**
+   * The radio group label
+   */
+  label: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Callback function when selection the has been changed
+   */
+  onChange: PropTypes__default["default"].func
+};
+
+exports["default"] = MenuRadioGroup;

package/lib/components/Menu/MenuRadioGroupOptions.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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var iconsReact = require('@carbon/icons-react');
+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);
+
+function MenuRadioGroupOptions(_ref) {
+  var items = _ref.items,
+      initialSelectedItem = _ref.initialSelectedItem,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
+  var _useState = React.useState(initialSelectedItem),
+      _useState2 = _rollupPluginBabelHelpers.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["default"].createElement(MenuOption["default"], {
+      key: i,
+      role: "menuitemradio",
+      "aria-checked": isSelected,
+      renderIcon: isSelected ? iconsReact.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__default["default"].string,
+
+  /**
+   * Array of the radio options
+   */
+  items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string).isRequired,
+
+  /**
+   * Callback function when selection the has been changed
+   */
+  onChange: PropTypes__default["default"].func
+};
+
+exports["default"] = MenuRadioGroupOptions;

package/lib/components/Menu/MenuSelectableItem.js

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

package/lib/components/Menu/_utils.js

@@ -0,0 +1,191 @@
+/**
+ * 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 prefix = 'cds';
+function resetFocus(el) {
+  if (el) {
+    var _el$querySelectorAll;
+
+    Array.from((_el$querySelectorAll = el.querySelectorAll('[tabindex="0"]')) !== null && _el$querySelectorAll !== void 0 ? _el$querySelectorAll : []).forEach(function (node) {
+      node.tabIndex = -1;
+    });
+  }
+}
+function focusNode(node) {
+  if (node) {
+    node.tabIndex = 0;
+    node.focus();
+  }
+}
+function getValidNodes(list) {
+  var level = list.dataset.level;
+  var nodes = [];
+
+  if (level) {
+    var submenus = Array.from(list.querySelectorAll('[data-level]'));
+    nodes = Array.from(list.querySelectorAll("li.".concat(prefix, "--menu-option"))).filter(function (child) {
+      return !submenus.some(function (submenu) {
+        return submenu.contains(child);
+      });
+    });
+  }
+
+  return nodes.filter(function (node) {
+    return node.matches(":not(.".concat(prefix, "--menu-option--disabled)"));
+  });
+}
+function getNextNode(current, direction) {
+  var menu = getParentMenu(current);
+  var nodes = getValidNodes(menu);
+  var currentIndex = nodes.indexOf(current);
+  var nextNode = nodes[currentIndex + direction];
+  return nextNode || null;
+}
+function getFirstSubNode(node) {
+  var submenu = node.querySelector("ul.".concat(prefix, "--menu"));
+
+  if (submenu) {
+    var subnodes = getValidNodes(submenu);
+    return subnodes[0] || null;
+  }
+
+  return null;
+}
+function getParentNode(node) {
+  if (node) {
+    var parentNode = node.parentNode.closest("li.".concat(prefix, "--menu-option"));
+    return parentNode || null;
+  }
+
+  return null;
+}
+function getSubMenuOffset(node) {
+  if (node) {
+    var nodeStyles = getComputedStyle(node);
+    var spacings = parseInt(nodeStyles.paddingTop) + parseInt(nodeStyles.paddingBottom); // styles always in px, convert to number
+
+    var elementHeight = node.firstElementChild.offsetHeight;
+    return elementHeight + spacings || 0;
+  }
+
+  return 0;
+}
+function getParentMenu(el) {
+  if (el) {
+    var parentMenu = el.parentNode.closest("ul.".concat(prefix, "--menu"));
+    return parentMenu || null;
+  }
+
+  return null;
+}
+function clickedElementHasSubnodes(e) {
+  if (e) {
+    var closestFocusableElement = e.target.closest('[tabindex]');
+
+    if ((closestFocusableElement === null || closestFocusableElement === void 0 ? void 0 : closestFocusableElement.tagName) === 'LI') {
+      return getFirstSubNode(closestFocusableElement) !== null;
+    }
+  }
+
+  return false;
+}
+/**
+ * @param {number} [value] The value to cap
+ * @param {number} [min] The minimum of the range
+ * @param {number} [max] The maximum of the range
+ * @returns {number} Whether or not the element fits inside the boundaries on the given axis
+ */
+
+function capWithinRange(value, min, max) {
+  if (value > max) {
+    return max;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+}
+/**
+ * @param {number[]} [elementDimensions] The dimensions of the element: [width, height]
+ * @param {number[]} [position] The desired position of the element: [x, y]
+ * @param {number[]} [boundaries] The boundaries of the container the element should be contained in: [minX, minY, maxX, maxY]
+ * @param {string} [axis="x"] Which axis to check. Either "x" or "y"
+ * @returns {boolean} Whether or not the element fits inside the boundaries on the given axis
+ */
+
+function elementFits(elementDimensions, position, boundaries) {
+  var axis = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'x';
+  var index = axis === 'y' ? 1 : 0;
+  var min = boundaries[index];
+  var max = boundaries[index + 2];
+  var start = position[index];
+  var end = position[index] + elementDimensions[index];
+  return start >= min && end <= max;
+}
+/**
+ * @param {number[]} [elementDimensions] The dimensions of the element: [width, height]
+ * @param {number[]} [targetBoundaries] The boundaries of the target the element should attach to: [minX, minY, maxX, maxY]
+ * @param {number[]} [containerBoundaries] The boundaries of the container the element should be contained in: [minX, minY, maxX, maxY]
+ * @param {number} [preferredDirection=1] Which direction is preferred. Either 1 (right right) or -1 (to left)
+ * @param {boolean} [isRootLevel] Flag that indicates if the element is on level 1 (the root level)
+ * @param {object} [element] The list element - used to calculate the offset of submenus
+ * @returns {object} The determined position and direction of the element: { position: [x, y], direction: 1 | -1 }
+ */
+
+
+function getPosition(elementDimensions, targetBoundaries, containerBoundaries) {
+  var preferredDirection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var isRootLevel = arguments.length > 4 ? arguments[4] : undefined;
+  var element = arguments.length > 5 ? arguments[5] : undefined;
+  var position = [0, 0];
+  var direction = preferredDirection; // x
+
+  position[0] = direction === 1 ? targetBoundaries[0] : targetBoundaries[2] - elementDimensions[0];
+  var xFits = elementFits(elementDimensions, position, containerBoundaries, 'x');
+
+  if (!xFits) {
+    direction = direction * -1;
+    position[0] = direction === 1 ? targetBoundaries[0] : targetBoundaries[2] - elementDimensions[0];
+  } // y
+
+
+  position[1] = targetBoundaries[3];
+  var yFits = elementFits(elementDimensions, position, containerBoundaries, 'y');
+
+  if (!yFits) {
+    position[1] = targetBoundaries[1] - elementDimensions[1];
+
+    if (!isRootLevel && element) {
+      // if sub-menu and not root level, consider offset
+      var diff = getSubMenuOffset(element);
+      position[1] += diff;
+    }
+  }
+
+  return {
+    position: position,
+    direction: direction
+  };
+}
+
+exports.capWithinRange = capWithinRange;
+exports.clickedElementHasSubnodes = clickedElementHasSubnodes;
+exports.focusNode = focusNode;
+exports.getFirstSubNode = getFirstSubNode;
+exports.getNextNode = getNextNode;
+exports.getParentMenu = getParentMenu;
+exports.getParentNode = getParentNode;
+exports.getPosition = getPosition;
+exports.getSubMenuOffset = getSubMenuOffset;
+exports.getValidNodes = getValidNodes;
+exports.resetFocus = resetFocus;

package/lib/components/Menu/index.js

@@ -0,0 +1,30 @@
+/**
+ * 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 Menu = require('./Menu.js');
+var MenuDivider = require('./MenuDivider.js');
+var MenuGroup = require('./MenuGroup.js');
+var MenuItem = require('./MenuItem.js');
+var MenuRadioGroup = require('./MenuRadioGroup.js');
+var MenuSelectableItem = require('./MenuSelectableItem.js');
+
+Menu["default"].MenuDivider = MenuDivider["default"];
+Menu["default"].MenuGroup = MenuGroup["default"];
+Menu["default"].MenuItem = MenuItem["default"];
+Menu["default"].MenuRadioGroup = MenuRadioGroup["default"];
+Menu["default"].MenuSelectableItem = MenuSelectableItem["default"];
+
+exports["default"] = Menu["default"];
+exports.MenuDivider = MenuDivider["default"];
+exports.MenuGroup = MenuGroup["default"];
+exports.MenuItem = MenuItem["default"];
+exports.MenuRadioGroup = MenuRadioGroup["default"];
+exports.MenuSelectableItem = MenuSelectableItem["default"];