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

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

@@ -0,0 +1,262 @@
+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.
+ */
+
+import { Component } from 'react';
+import keycode from 'keycode';
+import { CheckInstUIIcon, ChevronRightInstUIIcon } from '@instructure/ui-icons';
+import { omitProps, getElementType, withDeterministicId, callRenderProp } from '@instructure/ui-react-utils';
+import { createChainedFunction } from '@instructure/ui-utils';
+import { isActiveElement, findDOMNode } from '@instructure/ui-dom-utils';
+import { withStyle } from '@instructure/emotion';
+import { MenuContext } from "../../../utils/v1/MenuContext.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: Menu
+id: Menu.Item
+---
+**/
+let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_MenuItem = class MenuItem extends 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.codes.space;
+      const enterKey = e.keyCode === keycode.codes.enter;
+      if (spaceKey || enterKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (enterKey) {
+          // handle space key on keyUp for FF
+          const refNode = findDOMNode(this.ref);
+          refNode.click();
+        }
+      }
+    };
+    this.handleKeyUp = e => {
+      const spaceKey = e.keyCode === keycode.codes.space;
+      const enterKey = e.keyCode === keycode.codes.enter;
+      if (spaceKey || enterKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (spaceKey) {
+          const refNode = 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 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 isActiveElement(this.ref);
+  }
+  focus() {
+    const refNode = 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 _jsxs("span", {
+      children: [_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') && _jsx("span", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
+        children: this.selected && _jsx(CheckInstUIIcon, {
+          size: "md",
+          color: this.getIconColor()
+        })
+      }), type === 'flyout' && _jsx("span", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon,
+        children: _jsx(ChevronRightInstUIIcon, {
+          size: "md",
+          color: this.getIconColor()
+        })
+      }), renderLabelInfo && _jsx("span", {
+        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo,
+        children: 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 = omitProps(this.props, MenuItem.allowedProps);
+    const ElementType = this.elementType;
+    return _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: createChainedFunction(onKeyUp, this.handleKeyUp),
+      onKeyDown: 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: createChainedFunction(onFocus, this.handleFocusEvent),
+      onBlur: createChainedFunction(onBlur, this.handleBlurEvent),
+      "data-cid": "MenuItem",
+      children: this.renderContent()
+    });
+  }
+}, _MenuItem.displayName = "MenuItem", _MenuItem.componentId = 'Menu.Item', _MenuItem.allowedProps = allowedProps, _MenuItem.defaultProps = {
+  type: 'button',
+  disabled: false
+}, _MenuItem.contextType = MenuContext, _MenuItem)) || _class) || _class);
+export default MenuItem;
+export { MenuItem };

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

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['children', 'defaultSelected', 'selected', 'onSelect', 'onClick', 'onKeyDown', 'onKeyUp', 'onMouseOver', 'controls', 'disabled', 'as', 'type', 'value', 'href', 'target', 'renderLabelInfo'];
+export { allowedProps };

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

@@ -0,0 +1,146 @@
+/*
+ * 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
+    }
+  };
+};
+export default generateStyle;

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

@@ -0,0 +1,175 @@
+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.
+ */
+
+import { Children, Component } from 'react';
+import { withStyle } from '@instructure/emotion';
+import { omitProps, safeCloneElement, matchComponentTypes, withDeterministicId } from '@instructure/ui-react-utils';
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
+import { MenuItem } from "../MenuItem/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: Menu
+id: Menu.Group
+---
+**/
+let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_MenuItemGroup = class MenuItemGroup extends 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 = Children.toArray(children).filter(child => {
+      return matchComponentTypes(child, [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 hasVisibleChildren(label) ? _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 Children.map(children, child => {
+      if (matchComponentTypes(child, [MenuItem])) {
+        ++index;
+        const value = child.props.value || index;
+        return 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 = omitProps(this.props, MenuItemGroup.allowedProps);
+    return _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(), _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 = allowedProps, _MenuItemGroup.defaultProps = {
+  disabled: false,
+  children: null,
+  isTabbable: false,
+  allowMultiple: false,
+  defaultSelected: []
+}, _MenuItemGroup)) || _class) || _class);
+export default MenuItemGroup;
+export { MenuItemGroup };

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

@@ -0,0 +1,26 @@
+/*
+ * 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 = ['label', 'allowMultiple', 'children', 'selected', 'defaultSelected', 'onSelect', 'onMouseOver', 'controls', 'itemRef', 'disabled', 'isTabbable'];
+export { allowedProps };