@instructure/ui-menu 8.13.1-snapshot.9 → 8.14.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
+
+**Note:** Version bump only for package @instructure/ui-menu
+
 # [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
 
 **Note:** Version bump only for package @instructure/ui-menu

package/es/Menu/MenuItem/index.js

@@ -44,10 +44,12 @@ import { propTypes, allowedProps } from './props';
 parent: Menu
 id: Menu.Item
 ---
+@tsProps
 **/
 let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItem extends Component {
   constructor(props) {
-    super();
+    super(props);
+    this.labelId = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -93,7 +95,8 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
 
         if (enterKey) {
           // handle space key on keyUp for FF
-          findDOMNode(this.ref).click(); // eslint-disable-line react/no-find-dom-node
+          const refNode = findDOMNode(this.ref);
+          refNode.click();
         }
       }
     };
@@ -107,7 +110,8 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         e.stopPropagation();
 
         if (spaceKey) {
-          findDOMNode(this.ref).click(); // eslint-disable-line react/no-find-dom-node
+          const refNode = findDOMNode(this.ref);
+          refNode.click();
         }
       }
     };
@@ -122,7 +126,7 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
 
     if (typeof props.selected === 'undefined') {
       this.state = {
-        selected: props.defaultSelected
+        selected: !!props.defaultSelected
       };
     }
 
@@ -134,7 +138,9 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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) {
@@ -143,7 +149,9 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   componentDidUpdate() {
-    this.props.makeStyles();
+    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() {
@@ -183,15 +191,16 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   focus() {
-    findDOMNode(this.ref).focus(); // eslint-disable-line react/no-find-dom-node
+    const refNode = findDOMNode(this.ref);
+    refNode.focus();
   }
 
   renderContent() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
 
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          type = _this$props2.type;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          type = _this$props4.type;
     return jsx("span", null, (type === 'checkbox' || type === 'radio') && jsx("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
     }, this.selected && (_IconCheckSolid || (_IconCheckSolid = jsx(IconCheckSolid, null)))), jsx("span", {
@@ -205,17 +214,16 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   render() {
     var _this$props$styles4;
 
-    const _this$props3 = this.props,
-          disabled = _this$props3.disabled,
-          controls = _this$props3.controls,
-          onKeyDown = _this$props3.onKeyDown,
-          onKeyUp = _this$props3.onKeyUp,
-          type = _this$props3.type,
-          href = _this$props3.href;
+    const _this$props5 = this.props,
+          disabled = _this$props5.disabled,
+          controls = _this$props5.controls,
+          onKeyDown = _this$props5.onKeyDown,
+          onKeyUp = _this$props5.onKeyUp,
+          type = _this$props5.type,
+          href = _this$props5.href;
     const props = omitProps(this.props, MenuItem.allowedProps);
     const ElementType = this.elementType;
-    return jsx(ElementType // eslint-disable-line jsx-a11y/mouse-events-have-key-events
-    , Object.assign({
+    return jsx(ElementType, Object.assign({
       tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
 
     }, props, {
@@ -236,8 +244,7 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
 
 }, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   type: 'button',
-  disabled: false,
-  onSelect: function (e, value, selected, item) {}
+  disabled: false
 }, _class2.contextType = MenuContext, _temp)) || _class) || _class);
 export default MenuItem;
 export { MenuItem };

package/es/Menu/MenuItem/props.js

@@ -24,39 +24,16 @@
 import PropTypes from 'prop-types';
 import { controllable } from '@instructure/ui-prop-types';
 const propTypes = {
-  /**
-   * the menu item label
-   */
   children: PropTypes.node.isRequired,
-
-  /**
-   * whether to set the menu item state to selected or not on initial render
-   */
   defaultSelected: PropTypes.bool,
-
-  /**
-   * whether the menu item is selected or not (must be accompanied by an `onSelect` prop)
-   */
   selected: controllable(PropTypes.bool, 'onSelect', 'defaultSelected'),
-
-  /**
-   * when used with the `selected` prop, the component will not control its own state
-   */
   onSelect: PropTypes.func,
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
   onKeyUp: PropTypes.func,
   onMouseOver: PropTypes.func,
-
-  /**
-   * the id of the element that the menu item will act upon
-   */
   controls: PropTypes.string,
   disabled: PropTypes.bool,
-
-  /**
-   * the element type to render as (will default to `<a>` if href is provided)
-   */
   as: PropTypes.elementType,
   // eslint-disable-line react/require-default-props
   type: PropTypes.oneOf(['button', 'checkbox', 'radio', 'flyout']),

package/es/Menu/MenuItemGroup/index.js

@@ -41,10 +41,12 @@ import { propTypes, allowedProps } from './props';
 parent: Menu
 id: Menu.Group
 ---
+@tsProps
 **/
 let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItemGroup extends Component {
   constructor(props) {
-    super();
+    super(props);
+    this._labelId = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -99,11 +101,15 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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() {
-    this.props.makeStyles();
+    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) {
@@ -139,13 +145,13 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          disabled = _this$props.disabled,
-          controls = _this$props.controls,
-          allowMultiple = _this$props.allowMultiple,
-          isTabbable = _this$props.isTabbable,
-          onMouseOver = _this$props.onMouseOver;
+    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])) {
@@ -193,9 +199,7 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   children: null,
   isTabbable: false,
   allowMultiple: false,
-  defaultSelected: [],
-  itemRef: function (item) {},
-  onSelect: function (e, value, selected, item) {}
+  defaultSelected: []
 }, _temp)) || _class) || _class);
 export default MenuItemGroup;
 export { MenuItemGroup };

package/es/Menu/MenuItemGroup/props.js

@@ -28,44 +28,15 @@ import { MenuItemSeparator } from '../MenuItemSeparator';
 const propTypes = {
   label: PropTypes.node.isRequired,
   allowMultiple: PropTypes.bool,
-
-  /**
-   * children of type `Menu.Item`, `Menu.Separator`
-   */
   children: ChildrenPropTypes.oneOf([MenuItem, MenuItemSeparator]),
-
-  /**
-   * an array of the values (or indices by default) for the selected items
-   */
   selected: controllable(PropTypes.array, 'onSelect', 'defaultSelected'),
-
-  /**
-   * an array of the values (or indices by default) for the selected items on initial render
-   */
   defaultSelected: PropTypes.array,
-
-  /**
-   * call this function when a menu item is selected
-   */
   onSelect: PropTypes.func,
   onMouseOver: PropTypes.func,
-  onKeyDown: PropTypes.func,
-
-  /**
-   * the id of the element that the menu items will act upon
-   */
   controls: PropTypes.string,
-
-  /**
-   * returns a reference to the `MenuItem`
-   */
   itemRef: PropTypes.func,
   disabled: PropTypes.bool,
-
-  /**
-   * should the group appear in the tab order (the first item will have a tabIndex of 0)
-   */
   isTabbable: PropTypes.bool
 };
-const allowedProps = ['label', 'allowMultiple', 'children', 'selected', 'defaultSelected', 'onSelect', 'onMouseOver', 'onKeyDown', 'controls', 'itemRef', 'disabled', 'isTabbable'];
+const allowedProps = ['label', 'allowMultiple', 'children', 'selected', 'defaultSelected', 'onSelect', 'onMouseOver', 'controls', 'itemRef', 'disabled', 'isTabbable'];
 export { propTypes, allowedProps };

package/es/Menu/MenuItemSeparator/index.js

@@ -51,11 +51,15 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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() {
-    this.props.makeStyles();
+    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);
   }
 
   render() {

package/es/Menu/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Children, Component } from 'react';
+import React, { Children, Component } from 'react';
 import keycode from 'keycode';
 import { Popover } from '@instructure/ui-popover';
 import { uid } from '@instructure/uid';
@@ -46,6 +46,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Menu extends Component {
   constructor(props) {
@@ -59,7 +60,8 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
     this._trigger = null;
     this._menu = null;
     this._labelId = uid('Menu__label');
-    this._activeSubMenu = null;
+    this._activeSubMenu = void 0;
+    this._id = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -91,13 +93,13 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
     this.handleTriggerKeyDown = event => {
       if (this.props.type === 'flyout' && event.keyCode === keycode.codes.right) {
         event.persist();
-        this.show();
+        this.show(event);
       }
     };
 
-    this.handleTriggerMouseOver = () => {
+    this.handleTriggerMouseOver = event => {
       if (this.props.type === 'flyout') {
-        this.show();
+        this.show(event);
       }
     };
 
@@ -112,10 +114,10 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       const _keycode$codes = keycode.codes,
             down = _keycode$codes.down,
             up = _keycode$codes.up,
-            pgup = _keycode$codes.pgup,
-            pgdn = _keycode$codes.pgdn,
             tab = _keycode$codes.tab,
             left = _keycode$codes.left;
+      const pgdn = keycode.codes['page down'];
+      const pgup = keycode.codes['page up'];
 
       if (key === down || key === pgdn) {
         event.preventDefault();
@@ -201,11 +203,15 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps) {
-    this.props.makeStyles();
+  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);
   }
 
   get menuItems() {
@@ -214,11 +220,15 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
 
   focus() {
     if (this.shown) {
-      error(this._menu && this._menu.focus, '[Menu] Could not focus the menu.');
+      var _this$_menu;
+
+      error(!!((_this$_menu = this._menu) !== null && _this$_menu !== void 0 && _this$_menu.focus), '[Menu] Could not focus the menu.');
 
       this._menu.focus();
     } else {
-      error(this._trigger && this._trigger.focus, '[Menu] Could not focus the trigger.');
+      var _this$_trigger;
+
+      error(!!((_this$_trigger = this._trigger) !== null && _this$_trigger !== void 0 && _this$_trigger.focus), '[Menu] Could not focus the trigger.');
 
       this._trigger.focus();
     }
@@ -247,7 +257,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
 
     const current = this.focusedIndex < 0 && step < 0 ? 0 : this.focusedIndex;
     const nextItem = this.menuItems[(current + count + step) % count];
-    error(nextItem && nextItem.focus, '[Menu] Could not focus next menu item.');
+    error(typeof nextItem !== 'undefined' && typeof nextItem.focus !== 'undefined', '[Menu] Could not focus next menu item.');
     nextItem.focus();
   }
 
@@ -256,9 +266,9 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          disabled = _this$props.disabled;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          disabled = _this$props3.disabled;
     let count = 0;
     return Children.map(children, child => {
       if (!matchComponentTypes(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
@@ -274,8 +284,8 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
         }, child);
       }
 
-      const controls = child.props['aria-controls'] || child.props.controls || this.props['aria-controls'] || // eslint-disable-line react/prop-types
-      this.props.controls; // eslint-disable-line react/prop-types
+      const menuItemChild = child;
+      const controls = menuItemChild.props['aria-controls'] || menuItemChild.props.controls || this.props['aria-controls'] || this.props.controls;
 
       if (matchComponentTypes(child, ['MenuItem'])) {
         return jsx("li", {
@@ -330,21 +340,21 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
           }, child.props.title || child.props.label)
         }));
       }
+
+      return;
     });
   }
 
   renderMenu() {
     var _this$props$styles;
 
-    const _this$props2 = this.props,
-          disabled = _this$props2.disabled,
-          label = _this$props2.label,
-          trigger = _this$props2.trigger,
-          onKeyUp = _this$props2.onKeyUp;
-    const labelledBy = this.props['aria-labelledby']; // eslint-disable-line react/prop-types
-
-    const controls = this.props['aria-controls']; // eslint-disable-line react/prop-types
-
+    const _this$props4 = this.props,
+          disabled = _this$props4.disabled,
+          label = _this$props4.label,
+          trigger = _this$props4.trigger,
+          onKeyUp = _this$props4.onKeyUp;
+    const labelledBy = this.props['aria-labelledby'];
+    const controls = this.props['aria-controls'];
     return jsx(MenuContext.Provider, {
       value: {
         removeMenuItem: this.removeMenuItem,
@@ -355,7 +365,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       "aria-label": label,
       tabIndex: 0,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menu,
-      "aria-labelledby": labelledBy || trigger && this._labelId,
+      "aria-labelledby": labelledBy || (trigger ? this._labelId : void 0),
       "aria-controls": controls,
       "aria-disabled": disabled ? 'true' : void 0,
       onKeyDown: this.handleMenuKeyDown,
@@ -365,26 +375,30 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   render() {
-    const _this$props3 = this.props,
-          show = _this$props3.show,
-          defaultShow = _this$props3.defaultShow,
-          placement = _this$props3.placement,
-          withArrow = _this$props3.withArrow,
-          trigger = _this$props3.trigger,
-          mountNode = _this$props3.mountNode,
-          popoverRef = _this$props3.popoverRef,
-          disabled = _this$props3.disabled,
-          onDismiss = _this$props3.onDismiss,
-          onFocus = _this$props3.onFocus,
-          onMouseOver = _this$props3.onMouseOver,
-          offsetX = _this$props3.offsetX,
-          offsetY = _this$props3.offsetY;
+    const _this$props5 = this.props,
+          show = _this$props5.show,
+          defaultShow = _this$props5.defaultShow,
+          placement = _this$props5.placement,
+          withArrow = _this$props5.withArrow,
+          trigger = _this$props5.trigger,
+          mountNode = _this$props5.mountNode,
+          popoverRef = _this$props5.popoverRef,
+          disabled = _this$props5.disabled,
+          onDismiss = _this$props5.onDismiss,
+          onFocus = _this$props5.onFocus,
+          onMouseOver = _this$props5.onMouseOver,
+          offsetX = _this$props5.offsetX,
+          offsetY = _this$props5.offsetY;
     return trigger ? jsx(Popover, {
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
       onHideContent: (event, _ref) => {
         let documentClick = _ref.documentClick;
-        onDismiss(event, documentClick);
+
+        if (typeof onDismiss === 'function') {
+          onDismiss(event, documentClick);
+        }
+
         this.handleToggle(false);
       },
       onShowContent: () => this.handleToggle(true),
@@ -408,7 +422,8 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       },
       renderTrigger: safeCloneElement(trigger, {
         ref: el => {
-          this.ref = el;
+          this._trigger = el;
+          this.ref = (el === null || el === void 0 ? void 0 : el.ref) || el;
         },
         'aria-haspopup': true,
         id: this._labelId,
@@ -420,25 +435,13 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
 }, _class2.displayName = "Menu", _class2.componentId = 'Menu', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  children: null,
   label: null,
   disabled: false,
   trigger: null,
   placement: 'bottom center',
   defaultShow: false,
-  onToggle: (shown, menu) => {},
-  onSelect: (event, value, selected, item) => {},
-  onDismiss: (event, documentClick) => {},
-  onBlur: event => {},
-  onFocus: event => {},
-  onMouseOver: event => {},
-  onKeyDown: event => {},
-  onKeyUp: event => {},
-  menuRef: el => {},
-  popoverRef: el => {},
   mountNode: null,
   constrain: 'window',
-  liveRegion: null,
   shouldHideOnSelect: true,
   shouldFocusTriggerOnClose: true,
   withArrow: true,