@instructure/ui-menu 11.6.0 → 11.6.1-snapshot-129

package/lib/Menu/v2/MenuItem/index.js

@@ -0,0 +1,271 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuItem = void 0;
+var _react = require("react");
+var _keycode = _interopRequireDefault(require("keycode"));
+var _uiIcons = require("@instructure/ui-icons");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
+var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
+var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
+var _emotion = require("@instructure/emotion");
+var _MenuContext = require("../../../utils/v1/MenuContext");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _dec2, _class, _MenuItem;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: Menu
+id: Menu.Item
+---
+**/
+let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_MenuItem = class MenuItem extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.labelId = void 0;
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.handleClick = e => {
+      const _this$props = this.props,
+        onSelect = _this$props.onSelect,
+        onClick = _this$props.onClick,
+        disabled = _this$props.disabled,
+        value = _this$props.value;
+      const selected = !this.selected;
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (typeof this.props.selected === 'undefined') {
+        this.setState({
+          selected
+        });
+      }
+      if (typeof onSelect === 'function') {
+        e.persist();
+        onSelect(e, value, selected, this);
+      }
+      if (typeof onClick === 'function') {
+        onClick(e);
+      }
+    };
+    this.handleKeyDown = e => {
+      const spaceKey = e.keyCode === _keycode.default.codes.space;
+      const enterKey = e.keyCode === _keycode.default.codes.enter;
+      if (spaceKey || enterKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (enterKey) {
+          // handle space key on keyUp for FF
+          const refNode = (0, _findDOMNode.findDOMNode)(this.ref);
+          refNode.click();
+        }
+      }
+    };
+    this.handleKeyUp = e => {
+      const spaceKey = e.keyCode === _keycode.default.codes.space;
+      const enterKey = e.keyCode === _keycode.default.codes.enter;
+      if (spaceKey || enterKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (spaceKey) {
+          const refNode = (0, _findDOMNode.findDOMNode)(this.ref);
+          refNode.click();
+        }
+      }
+    };
+    this.handleMouseOver = event => {
+      if (!this.focused) {
+        this.focus();
+      }
+      if (typeof this.props.onMouseOver === 'function') {
+        this.props.onMouseOver(event, this);
+      }
+    };
+    this.handleMouseEnter = () => {
+      this.setState({
+        isHovered: true
+      });
+    };
+    this.handleMouseLeave = () => {
+      this.setState({
+        isHovered: false
+      });
+    };
+    this.handleFocusEvent = () => {
+      this.setState({
+        isFocused: true
+      });
+    };
+    this.handleBlurEvent = () => {
+      this.setState({
+        isFocused: false
+      });
+    };
+    this.getIconColor = () => {
+      const type = this.props.type;
+      if (type === 'flyout') {
+        return 'baseColor';
+      }
+      return this.selected ? 'inverseColor' : 'baseColor';
+    };
+    const state = {
+      isHovered: false,
+      isFocused: false
+    };
+    if (typeof props.selected === 'undefined') {
+      state.selected = !!props.defaultSelected;
+    }
+    this.state = state;
+    this.labelId = props.deterministicId('MenuItem__label');
+  }
+  get _node() {
+    return this.ref;
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    const context = this.context;
+    if (context && context.registerMenuItem) {
+      context.registerMenuItem(this);
+    }
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
+  componentWillUnmount() {
+    const context = this.context;
+    if (context && context.removeMenuItem) {
+      context.removeMenuItem(this);
+    }
+  }
+  get elementType() {
+    return (0, _getElementType.getElementType)(MenuItem, this.props);
+  }
+  get role() {
+    switch (this.props.type) {
+      case 'checkbox':
+        return 'menuitemcheckbox';
+      case 'radio':
+        return 'menuitemradio';
+      default:
+        return 'menuitem';
+    }
+  }
+  get selected() {
+    return typeof this.props.selected === 'undefined' ? this.state.selected : this.props.selected;
+  }
+  get focused() {
+    return (0, _isActiveElement.isActiveElement)(this.ref);
+  }
+  focus() {
+    const refNode = (0, _findDOMNode.findDOMNode)(this.ref);
+    refNode.focus();
+  }
+  renderContent() {
+    var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
+    const _this$props4 = this.props,
+      children = _this$props4.children,
+      type = _this$props4.type,
+      renderLabelInfo = _this$props4.renderLabelInfo;
+    return (0, _jsxRuntime.jsxs)("span", {
+      children: [(0, _jsxRuntime.jsx)("span", {
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label,
+        id: this.labelId,
+        children: children
+      }), (type === 'checkbox' || type === 'radio') && (0, _jsxRuntime.jsx)("span", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
+        children: this.selected && (0, _jsxRuntime.jsx)(_uiIcons.CheckInstUIIcon, {
+          size: "md",
+          color: this.getIconColor()
+        })
+      }), type === 'flyout' && (0, _jsxRuntime.jsx)("span", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon,
+        children: (0, _jsxRuntime.jsx)(_uiIcons.ChevronRightInstUIIcon, {
+          size: "md",
+          color: this.getIconColor()
+        })
+      }), renderLabelInfo && (0, _jsxRuntime.jsx)("span", {
+        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo,
+        children: (0, _callRenderProp.callRenderProp)(renderLabelInfo)
+      })]
+    });
+  }
+  render() {
+    var _this$props$styles5;
+    const _this$props5 = this.props,
+      disabled = _this$props5.disabled,
+      controls = _this$props5.controls,
+      onKeyDown = _this$props5.onKeyDown,
+      onKeyUp = _this$props5.onKeyUp,
+      onFocus = _this$props5.onFocus,
+      onBlur = _this$props5.onBlur,
+      type = _this$props5.type,
+      href = _this$props5.href,
+      target = _this$props5.target;
+    const props = (0, _omitProps.omitProps)(this.props, MenuItem.allowedProps);
+    const ElementType = this.elementType;
+    return (0, _jsxRuntime.jsx)(ElementType, {
+      tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
+      ,
+      ...props,
+      href: href,
+      target: target,
+      role: this.role,
+      "aria-labelledby": this.labelId,
+      "aria-disabled": disabled ? 'true' : void 0,
+      "aria-controls": controls,
+      "aria-checked": type === 'checkbox' || type === 'radio' ? this.selected ? 'true' : 'false' : void 0,
+      onClick: this.handleClick,
+      onKeyUp: (0, _createChainedFunction.createChainedFunction)(onKeyUp, this.handleKeyUp),
+      onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
+      ref: this.handleRef,
+      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.menuItem,
+      onMouseOver: this.handleMouseOver,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      onFocus: (0, _createChainedFunction.createChainedFunction)(onFocus, this.handleFocusEvent),
+      onBlur: (0, _createChainedFunction.createChainedFunction)(onBlur, this.handleBlurEvent),
+      "data-cid": "MenuItem",
+      children: this.renderContent()
+    });
+  }
+}, _MenuItem.displayName = "MenuItem", _MenuItem.componentId = 'Menu.Item', _MenuItem.allowedProps = _props.allowedProps, _MenuItem.defaultProps = {
+  type: 'button',
+  disabled: false
+}, _MenuItem.contextType = _MenuContext.MenuContext, _MenuItem)) || _class) || _class);
+var _default = exports.default = MenuItem;

package/lib/Menu/v2/MenuItem/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['children', 'defaultSelected', 'selected', 'onSelect', 'onClick', 'onKeyDown', 'onKeyUp', 'onMouseOver', 'controls', 'disabled', 'as', 'type', 'value', 'href', 'target', 'renderLabelInfo'];

package/lib/Menu/v2/MenuItem/styles.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const type = props.type,
+    disabled = props.disabled,
+    selected = props.selected;
+  const isRadioOrCheckbox = type === 'checkbox' || type === 'radio';
+  const flyoutIconStyles = type === 'flyout' ? {
+    insetInlineStart: 'auto',
+    insetInlineEnd: componentTheme.iconPadding
+  } : {};
+  const roleStyles = isRadioOrCheckbox ? {
+    paddingInlineEnd: componentTheme.labelPadding
+  } : {};
+  const roleIconStyles = isRadioOrCheckbox ? {
+    insetInlineStart: 'auto',
+    insetInlineEnd: componentTheme.iconPadding
+  } : {};
+  const disabledStyles = disabled ? {
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+    opacity: 0.5
+  } : {};
+  const selectedStyles = selected ? {
+    background: componentTheme.activeBackground,
+    '[class*="menuItem__label"]': {
+      color: componentTheme.activeLabelColor
+    }
+  } : {};
+  const selectedHighlightedStyles = selected ? {
+    background: componentTheme.selectedHighlightedBackground
+  } : {
+    background: componentTheme.highlightedBackground,
+    '[class*="menuItem__label"]': {
+      color: componentTheme.highlightedLabelColor
+    },
+    '[class*="menuItem__labelInfo"]': {
+      color: componentTheme.highlightedLabelInfoColor
+    }
+  };
+  const linkStyles = {
+    textDecoration: 'none'
+  };
+  return {
+    menuItem: {
+      label: 'menuItem',
+      position: 'relative',
+      border: 'none',
+      outline: 'none',
+      padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`,
+      margin: '0',
+      width: '100%',
+      borderRadius: 'initial',
+      boxSizing: 'border-box',
+      textAlign: 'start',
+      cursor: 'pointer',
+      userSelect: 'none',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      fontSize: componentTheme.fontSize,
+      background: componentTheme.background,
+      // Changing the following to display: flex; causes a VO
+      // bug where items with role menuitem, menuitemcheckbox
+      // and menuitemradio are selected twice with control+
+      // option+space. So we set the display to block.
+      display: 'block',
+      textDecoration: 'none',
+      ...roleStyles,
+      '&:focus,  &:active,  &:hover': {
+        ...selectedHighlightedStyles
+      },
+      //removes extra ff button spacing
+      '&::-moz-focus-inner': {
+        padding: '0',
+        margin: '0',
+        border: '0'
+      },
+      ...disabledStyles,
+      ...selectedStyles,
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(a)': {
+        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+      },
+      '&:-webkit-any(a)': {
+        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+      }
+    },
+    icon: {
+      label: 'menuItem__icon',
+      position: 'absolute',
+      display: 'flex',
+      alignItems: 'center',
+      top: '0',
+      width: '1em',
+      height: '100%',
+      ...roleIconStyles,
+      ...flyoutIconStyles
+    },
+    labelInfo: {
+      label: 'menuItem__labelInfo',
+      height: '100%',
+      float: 'right',
+      clear: 'right',
+      paddingRight: '1.75rem',
+      color: componentTheme.labelInfoColor
+    },
+    label: {
+      label: 'menuItem__label',
+      color: componentTheme.labelColor
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Menu/v2/MenuItemGroup/index.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuItemGroup = void 0;
+var _react = require("react");
+var _emotion = require("@instructure/emotion");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
+var _MenuItem = require("../MenuItem");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _dec2, _class, _MenuItemGroup;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: Menu
+id: Menu.Group
+---
+**/
+let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_MenuItemGroup = class MenuItemGroup extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.handleSelect = (e, value, selected, item) => {
+      if (this.props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (this.props.selected) {
+        this.updateSelected(e, value, this.props.selected, selected, item);
+      } else {
+        this.setState(state => {
+          return {
+            selected: this.updateSelected(e, value, state.selected, selected, item)
+          };
+        });
+      }
+    };
+    this.updateSelected = (e, value, items, selected, item) => {
+      const allowMultiple = this.props.allowMultiple;
+      let updated = allowMultiple ? [...items] : [];
+      const location = updated.indexOf(value);
+      if (selected === true && location < 0) {
+        updated.push(value);
+      } else if (selected === false && location !== -1) {
+        updated.splice(location, 1);
+      } else if (!allowMultiple && updated.length < 1) {
+        // don't allow nothing selected if it's not allowMultiple/checkbox
+        updated = [...items];
+      }
+      if (typeof this.props.onSelect === 'function') {
+        this.props.onSelect(e, updated, selected, item);
+      }
+      return updated;
+    };
+    if (typeof props.selected === 'undefined') {
+      this.state = {
+        selected: this.selectedFromChildren(props) || props.defaultSelected
+      };
+    }
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  selectedFromChildren(props) {
+    const children = props.children,
+      allowMultiple = props.allowMultiple;
+    const selected = [];
+    const items = _react.Children.toArray(children).filter(child => {
+      return (0, _matchComponentTypes.matchComponentTypes)(child, [_MenuItem.MenuItem]);
+    });
+    items.forEach((item, index) => {
+      if ((selected.length === 0 || allowMultiple) && (item.props.selected || item.props.defaultSelected)) {
+        selected.push(item.props.value || index);
+      }
+    });
+    return selected.length > 0 ? selected : null;
+  }
+  get selected() {
+    if (typeof this.props.selected === 'undefined' && typeof this.state.selected === 'undefined') {
+      return [];
+    } else {
+      return typeof this.props.selected === 'undefined' ? [...this.state.selected] : [...this.props.selected];
+    }
+  }
+  renderLabel() {
+    var _this$props$styles;
+    const label = this.props.label;
+    return (0, _hasVisibleChildren.hasVisibleChildren)(label) ? (0, _jsxRuntime.jsx)("span", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label,
+      children: label
+    }) : label;
+  }
+  renderChildren() {
+    const _this$props3 = this.props,
+      disabled = _this$props3.disabled,
+      controls = _this$props3.controls,
+      allowMultiple = _this$props3.allowMultiple,
+      isTabbable = _this$props3.isTabbable,
+      onMouseOver = _this$props3.onMouseOver;
+    const children = this.props.children;
+    let index = -1;
+    return _react.Children.map(children, child => {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_MenuItem.MenuItem])) {
+        ++index;
+        const value = child.props.value || index;
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          tabIndex: isTabbable && index === 0 ? 0 : -1,
+          controls,
+          value,
+          children: child.props.children,
+          type: allowMultiple ? 'checkbox' : 'radio',
+          ref: this.props.itemRef,
+          disabled: disabled || child.props.disabled,
+          selected: this.selected.indexOf(value) > -1,
+          onSelect: this.handleSelect,
+          onMouseOver
+        });
+      } else {
+        return child;
+      }
+    });
+  }
+  render() {
+    var _this$props$styles2, _this$props$styles3;
+    const props = (0, _omitProps.omitProps)(this.props, MenuItemGroup.allowedProps);
+    return (0, _jsxRuntime.jsxs)("span", {
+      ...props,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
+      ref: this.handleRef,
+      "data-cid": "MenuItemGroup",
+      children: [this.renderLabel(), (0, _jsxRuntime.jsx)("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
+        "aria-disabled": this.props.disabled ? 'true' : void 0,
+        children: this.renderChildren()
+      })]
+    });
+  }
+}, _MenuItemGroup.displayName = "MenuItemGroup", _MenuItemGroup.componentId = 'Menu.Group', _MenuItemGroup.allowedProps = _props.allowedProps, _MenuItemGroup.defaultProps = {
+  disabled: false,
+  children: null,
+  isTabbable: false,
+  allowMultiple: false,
+  defaultSelected: []
+}, _MenuItemGroup)) || _class) || _class);
+var _default = exports.default = MenuItemGroup;

package/lib/Menu/v2/MenuItemGroup/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['label', 'allowMultiple', 'children', 'selected', 'defaultSelected', 'onSelect', 'onMouseOver', 'controls', 'itemRef', 'disabled', 'isTabbable'];