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

package/es/Menu/props.js

@@ -25,143 +25,31 @@ import PropTypes from 'prop-types';
 import { PositionPropTypes } from '@instructure/ui-position';
 import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 const propTypes = {
-  /**
-   * Children of type `Menu.Item`, `Menu.Group`, `Menu.Separator`, or `Menu`
-   */
   children: ChildrenPropTypes.oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu']),
-
-  /**
-   * Description of the `<Menu />`
-   */
   label: PropTypes.string,
-
-  /**
-   * Is the `<Menu />` disabled
-   */
   disabled: PropTypes.bool,
-
-  /**
-   * The trigger element, if the `<Menu />` is to render as a popover
-   */
   trigger: PropTypes.node,
-
-  /**
-   * If a trigger is supplied, where should the `<Menu />` be placed (relative to the trigger)
-   */
   placement: PositionPropTypes.placement,
-
-  /**
-   * Should the `<Menu />` be open for the initial render
-   */
   defaultShow: PropTypes.bool,
-
-  /**
-   * Is the `<Menu />` open (should be accompanied by `onToggle`)
-   */
   show: controllable(PropTypes.bool, 'onToggle', 'defaultShow'),
-
-  /**
-   * Callback fired when the `<Menu />` is toggled open/closed. When used with `show`,
-   * the component will not control its own state.
-   */
   onToggle: PropTypes.func,
-
-  /**
-   * Callback fired when an item within the `<Menu />` is selected
-   */
   onSelect: PropTypes.func,
-
-  /**
-   * If a trigger is supplied, callback fired when the `<Menu />` is closed
-   */
   onDismiss: PropTypes.func,
-
-  /**
-   * If a trigger is supplied, callback fired when the `<Menu />` trigger is blurred
-   */
-  onBlur: PropTypes.func,
-
-  /**
-   * If a trigger is supplied, callback fired when the `<Menu />` trigger is focused
-   */
   onFocus: PropTypes.func,
-
-  /**
-   * If a trigger is supplied, callback fired onMouseOver for the `<Menu />` trigger
-   */
   onMouseOver: PropTypes.func,
-
-  /**
-   * Callback fired on the onKeyDown of the `<Menu />`
-   */
   onKeyDown: PropTypes.func,
-
-  /**
-   * Callback fired on the onKeyUp of the `<Menu />`
-   */
   onKeyUp: PropTypes.func,
-
-  /**
-   * A function that returns a reference to the `<Menu />`
-   */
   menuRef: PropTypes.func,
-
-  /**
-   * A function that returns a reference to the `<Popover />`
-   */
   popoverRef: PropTypes.func,
-
-  /**
-   * If a trigger is supplied, an element or a function returning an element to use as the mount node
-   * for the `<Menu />` (defaults to `document.body`)
-   */
   mountNode: PositionPropTypes.mountNode,
-
-  /**
-   * The parent in which to constrain the menu.
-   * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
-   * or a function returning an element
-   */
   constrain: PositionPropTypes.constrain,
-
-  /**
-   * If a trigger is supplied, an element, function returning an element, or array of elements that will not
-   * be hidden from the screen reader when the `<Menu />` is open
-   */
-  liveRegion: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
-
-  /**
-   * If a trigger is supplied, should the `<Menu />` hide when an item is selected
-   */
   shouldHideOnSelect: PropTypes.bool,
-
-  /**
-   * If a trigger is supplied, should the `<Menu />` focus the trigger on after closing
-   */
   shouldFocusTriggerOnClose: PropTypes.bool,
-
-  /**
-   * The type of `<Menu />`
-   */
   type: PropTypes.oneOf(['flyout']),
   id: PropTypes.string,
-
-  /**
-   * Whether or not an arrow pointing to the trigger should be rendered
-   */
   withArrow: PropTypes.bool,
-
-  /**
-   * The horizontal offset for the positioned content.
-   * Works only if `trigger` is provided.
-   */
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * The vertical offset for the positioned content.
-   * Works only if `trigger` is provided.
-   */
   offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onBlur', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'liveRegion', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
+const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
 export { propTypes, allowedProps };

package/es/MenuContext.js

@@ -22,16 +22,16 @@
  * SOFTWARE.
  */
 import { createContext } from 'react';
+
 /**
 ---
 private: true
 ---
 @module MenuContext
 **/
-
 const MenuContext = /*#__PURE__*/createContext({
-  registerMenuItem: () => {},
-  removeMenuItem: () => {}
+  registerMenuItem: _value => {},
+  removeMenuItem: _value => {}
 });
 export default MenuContext;
 export { MenuContext };

package/lib/Menu/MenuItem/index.js

@@ -46,10 +46,12 @@ var _dec, _dec2, _class, _class2, _temp, _IconCheckSolid, _IconArrowOpenEndSoli;
 parent: Menu
 id: Menu.Item
 ---
+@tsProps
 **/
 let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItem extends _react.Component {
   constructor(props) {
-    super();
+    super(props);
+    this.labelId = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -95,7 +97,8 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
 
         if (enterKey) {
           // handle space key on keyUp for FF
-          (0, _findDOMNode.findDOMNode)(this.ref).click(); // eslint-disable-line react/no-find-dom-node
+          const refNode = (0, _findDOMNode.findDOMNode)(this.ref);
+          refNode.click();
         }
       }
     };
@@ -109,7 +112,8 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         e.stopPropagation();
 
         if (spaceKey) {
-          (0, _findDOMNode.findDOMNode)(this.ref).click(); // eslint-disable-line react/no-find-dom-node
+          const refNode = (0, _findDOMNode.findDOMNode)(this.ref);
+          refNode.click();
         }
       }
     };
@@ -124,7 +128,7 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
 
     if (typeof props.selected === 'undefined') {
       this.state = {
-        selected: props.defaultSelected
+        selected: !!props.defaultSelected
       };
     }
 
@@ -136,7 +140,9 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   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) {
@@ -145,7 +151,9 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   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() {
@@ -185,15 +193,16 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   focus() {
-    (0, _findDOMNode.findDOMNode)(this.ref).focus(); // eslint-disable-line react/no-find-dom-node
+    const refNode = (0, _findDOMNode.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 (0, _emotion.jsx)("span", null, (type === 'checkbox' || type === 'radio') && (0, _emotion.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 = (0, _emotion.jsx)(_IconCheckSolid2.IconCheckSolid, null)))), (0, _emotion.jsx)("span", {
@@ -207,17 +216,16 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   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 = (0, _omitProps.omitProps)(this.props, MenuItem.allowedProps);
     const ElementType = this.elementType;
-    return (0, _emotion.jsx)(ElementType // eslint-disable-line jsx-a11y/mouse-events-have-key-events
-    , Object.assign({
+    return (0, _emotion.jsx)(ElementType, Object.assign({
       tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
 
     }, props, {
@@ -238,8 +246,7 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
 
 }, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   type: 'button',
-  disabled: false,
-  onSelect: function (e, value, selected, item) {}
+  disabled: false
 }, _class2.contextType = _MenuContext.MenuContext, _temp)) || _class) || _class);
 exports.MenuItem = MenuItem;
 var _default = MenuItem;

package/lib/Menu/MenuItem/props.js

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

package/lib/Menu/MenuItemGroup/index.js

@@ -38,10 +38,12 @@ var _dec, _dec2, _class, _class2, _temp;
 parent: Menu
 id: Menu.Group
 ---
+@tsProps
 **/
 let MenuItemGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItemGroup extends _react.Component {
   constructor(props) {
-    super();
+    super(props);
+    this._labelId = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -96,11 +98,15 @@ let MenuItemGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   }
 
   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) {
@@ -138,13 +144,13 @@ let MenuItemGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   }
 
   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 _react.Children.map(children, child => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_MenuItem.MenuItem])) {
@@ -192,9 +198,7 @@ let MenuItemGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   children: null,
   isTabbable: false,
   allowMultiple: false,
-  defaultSelected: [],
-  itemRef: function (item) {},
-  onSelect: function (e, value, selected, item) {}
+  defaultSelected: []
 }, _temp)) || _class) || _class);
 exports.MenuItemGroup = MenuItemGroup;
 var _default = MenuItemGroup;

package/lib/Menu/MenuItemGroup/props.js

@@ -43,45 +43,16 @@ var _MenuItemSeparator = require("../MenuItemSeparator");
 const propTypes = {
   label: _propTypes.default.node.isRequired,
   allowMultiple: _propTypes.default.bool,
-
-  /**
-   * children of type `Menu.Item`, `Menu.Separator`
-   */
   children: _Children.Children.oneOf([_MenuItem.MenuItem, _MenuItemSeparator.MenuItemSeparator]),
-
-  /**
-   * an array of the values (or indices by default) for the selected items
-   */
   selected: (0, _controllable.controllable)(_propTypes.default.array, 'onSelect', 'defaultSelected'),
-
-  /**
-   * an array of the values (or indices by default) for the selected items on initial render
-   */
   defaultSelected: _propTypes.default.array,
-
-  /**
-   * call this function when a menu item is selected
-   */
   onSelect: _propTypes.default.func,
   onMouseOver: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-
-  /**
-   * the id of the element that the menu items will act upon
-   */
   controls: _propTypes.default.string,
-
-  /**
-   * returns a reference to the `MenuItem`
-   */
   itemRef: _propTypes.default.func,
   disabled: _propTypes.default.bool,
-
-  /**
-   * should the group appear in the tab order (the first item will have a tabIndex of 0)
-   */
   isTabbable: _propTypes.default.bool
 };
 exports.propTypes = propTypes;
-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'];
 exports.allowedProps = allowedProps;

package/lib/Menu/MenuItemSeparator/index.js

@@ -41,11 +41,15 @@ let MenuItemSeparator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
   }
 
   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() {