@instructure/ui-menu 8.25.1-snapshot-10 → 8.25.1-snapshot-13

package/es/Menu/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -47,56 +47,162 @@ category: components
 ---
 @tsProps
 **/
-let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Menu extends Component {
-  static displayName = "Menu";
-  static componentId = 'Menu';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    label: null,
-    disabled: false,
-    trigger: null,
-    placement: 'bottom center',
-    defaultShow: false,
-    mountNode: null,
-    constrain: 'window',
-    shouldHideOnSelect: true,
-    shouldFocusTriggerOnClose: true,
-    withArrow: true,
-    offsetX: 0,
-    offsetY: 0
-  };
-  static Item = MenuItem;
-  static Group = MenuItemGroup;
-  static Separator = MenuItemSeparator;
-  state = {
-    hasFocus: false
-  };
-  _rootNode = null;
-  _menuItems = [];
-  _popover = null;
-  _trigger = null;
-  _menu = null;
-  _labelId = this.props.deterministicId('Menu__label');
-  _activeSubMenu;
-  _id;
-  ref = null;
-  handleRef = el => {
-    const menuRef = this.props.menuRef;
-    this._menu = el;
-
-    if (typeof menuRef === 'function') {
-      menuRef(el);
-    } // If there is no trigger `<ul>` is the ref, otherwise the trigger
-
-
-    if (!this.props.trigger) {
-      this.ref = el;
-    }
-  };
-
+let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Menu extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      hasFocus: false
+    };
+    this._rootNode = null;
+    this._menuItems = [];
+    this._popover = null;
+    this._trigger = null;
+    this._menu = null;
+    this._labelId = this.props.deterministicId('Menu__label');
+    this._activeSubMenu = void 0;
+    this._id = void 0;
+    this.ref = null;
+
+    this.handleRef = el => {
+      const menuRef = this.props.menuRef;
+      this._menu = el;
+
+      if (typeof menuRef === 'function') {
+        menuRef(el);
+      } // If there is no trigger `<ul>` is the ref, otherwise the trigger
+
+
+      if (!this.props.trigger) {
+        this.ref = el;
+      }
+    };
+
+    this.registerMenuItem = item => {
+      this._menuItems.push(item);
+    };
+
+    this.removeMenuItem = item => {
+      const index = this.getMenuItemIndex(item);
+      error(index >= 0, '[Menu] Could not find registered menu item.');
+
+      if (index >= 0) {
+        this._menuItems.splice(index, 1);
+      }
+    };
+
+    this.getMenuItemIndex = item => {
+      return this._menuItems.findIndex(i => i === item);
+    };
+
+    this.handleTriggerKeyDown = event => {
+      if (this.props.type === 'flyout' && event.keyCode === keycode.codes.right) {
+        event.persist();
+        this.show(event);
+      }
+    };
+
+    this.handleTriggerMouseOver = event => {
+      if (this.props.type === 'flyout') {
+        this.show(event);
+      }
+    };
+
+    this.handleToggle = shown => {
+      if (typeof this.props.onToggle === 'function') {
+        this.props.onToggle(shown, this);
+      }
+    };
+
+    this.handleMenuKeyDown = event => {
+      const key = event && event.keyCode;
+      const _keycode$codes = keycode.codes,
+            down = _keycode$codes.down,
+            up = _keycode$codes.up,
+            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();
+        event.stopPropagation();
+        this.moveFocus(1);
+        this.hideActiveSubMenu(event);
+      } else if (key === up || key === pgup) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.moveFocus(-1);
+        this.hideActiveSubMenu(event);
+      } else if (key === tab || key === left) {
+        event.persist();
+        this.hide(event);
+      }
+
+      if (typeof this.props.onKeyDown === 'function') {
+        this.props.onKeyDown(event);
+      }
+    };
+
+    this.handleMenuItemSelect = (event, value, selected, item) => {
+      if (this.props.shouldHideOnSelect) {
+        this.hide(event);
+      }
+
+      if (typeof this.props.onSelect === 'function') {
+        this.props.onSelect(event, value, selected, item);
+      }
+    };
+
+    this.handleMenuItemFocus = () => {
+      this.setState({
+        hasFocus: true
+      });
+    };
+
+    this.handleMenuItemBlur = () => {
+      this.setState({
+        hasFocus: this.focusedIndex >= 0
+      });
+    };
+
+    this.handleMenuItemMouseOver = (event, menuItem) => {
+      if (this._activeSubMenu && menuItem !== this._activeSubMenu._trigger) {
+        this.hideActiveSubMenu(event);
+      }
+    };
+
+    this.hideActiveSubMenu = event => {
+      if (this._activeSubMenu) {
+        this._activeSubMenu.hide(event);
+
+        this._activeSubMenu = null;
+      }
+    };
+
+    this.handleSubMenuToggle = (shown, subMenu) => {
+      if (shown) {
+        this._activeSubMenu = subMenu;
+      }
+    };
+
+    this.handleSubMenuDismiss = (event, documentClick) => {
+      if (event && event.keyCode === keycode.codes.tab || documentClick) {
+        this.hide(event);
+      }
+    };
+
+    this.hide = event => {
+      if (this._popover) {
+        this._popover.hide(event);
+      }
+    };
+
+    this.show = event => {
+      if (this._popover) {
+        this._popover.show(event);
+      }
+    };
+
     this._id = this.props.id || props.deterministicId();
   }
 
@@ -112,123 +218,10 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
-  static contextType = MenuContext;
-  registerMenuItem = item => {
-    this._menuItems.push(item);
-  };
-  removeMenuItem = item => {
-    const index = this.getMenuItemIndex(item);
-    error(index >= 0, '[Menu] Could not find registered menu item.');
-
-    if (index >= 0) {
-      this._menuItems.splice(index, 1);
-    }
-  };
-
   get menuItems() {
     return this._menuItems;
   }
 
-  getMenuItemIndex = item => {
-    return this._menuItems.findIndex(i => i === item);
-  };
-  handleTriggerKeyDown = event => {
-    if (this.props.type === 'flyout' && event.keyCode === keycode.codes.right) {
-      event.persist();
-      this.show(event);
-    }
-  };
-  handleTriggerMouseOver = event => {
-    if (this.props.type === 'flyout') {
-      this.show(event);
-    }
-  };
-  handleToggle = shown => {
-    if (typeof this.props.onToggle === 'function') {
-      this.props.onToggle(shown, this);
-    }
-  };
-  handleMenuKeyDown = event => {
-    const key = event && event.keyCode;
-    const _keycode$codes = keycode.codes,
-          down = _keycode$codes.down,
-          up = _keycode$codes.up,
-          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();
-      event.stopPropagation();
-      this.moveFocus(1);
-      this.hideActiveSubMenu(event);
-    } else if (key === up || key === pgup) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.moveFocus(-1);
-      this.hideActiveSubMenu(event);
-    } else if (key === tab || key === left) {
-      event.persist();
-      this.hide(event);
-    }
-
-    if (typeof this.props.onKeyDown === 'function') {
-      this.props.onKeyDown(event);
-    }
-  };
-  handleMenuItemSelect = (event, value, selected, item) => {
-    if (this.props.shouldHideOnSelect) {
-      this.hide(event);
-    }
-
-    if (typeof this.props.onSelect === 'function') {
-      this.props.onSelect(event, value, selected, item);
-    }
-  };
-  handleMenuItemFocus = () => {
-    this.setState({
-      hasFocus: true
-    });
-  };
-  handleMenuItemBlur = () => {
-    this.setState({
-      hasFocus: this.focusedIndex >= 0
-    });
-  };
-  handleMenuItemMouseOver = (event, menuItem) => {
-    if (this._activeSubMenu && menuItem !== this._activeSubMenu._trigger) {
-      this.hideActiveSubMenu(event);
-    }
-  };
-  hideActiveSubMenu = event => {
-    if (this._activeSubMenu) {
-      this._activeSubMenu.hide(event);
-
-      this._activeSubMenu = null;
-    }
-  };
-  handleSubMenuToggle = (shown, subMenu) => {
-    if (shown) {
-      this._activeSubMenu = subMenu;
-    }
-  };
-  handleSubMenuDismiss = (event, documentClick) => {
-    if (event && event.keyCode === keycode.codes.tab || documentClick) {
-      this.hide(event);
-    }
-  };
-  hide = event => {
-    if (this._popover) {
-      this._popover.hide(event);
-    }
-  };
-  show = event => {
-    if (this._popover) {
-      this._popover.show(event);
-    }
-  };
-
   focus() {
     if (this.shown) {
       var _this$_menu;
@@ -449,6 +442,19 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
     }, this.renderMenu()) : this.renderMenu();
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Menu", _class2.componentId = 'Menu', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  label: null,
+  disabled: false,
+  trigger: null,
+  placement: 'bottom center',
+  defaultShow: false,
+  mountNode: null,
+  constrain: 'window',
+  shouldHideOnSelect: true,
+  shouldFocusTriggerOnClose: true,
+  withArrow: true,
+  offsetX: 0,
+  offsetY: 0
+}, _class2.Item = MenuItem, _class2.Group = MenuItemGroup, _class2.Separator = MenuItemSeparator, _class2.contextType = MenuContext, _class2)) || _class) || _class) || _class);
 export default Menu;
 export { Menu, MenuItem, MenuItemGroup, MenuItemSeparator };

package/lib/Menu/MenuItem/index.js

@@ -41,7 +41,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _dec3, _class, _IconCheckSolid, _IconArrowOpenEndSoli;
+var _dec, _dec2, _dec3, _class, _class2, _IconCheckSolid, _IconArrowOpenEndSoli;
 
 /**
 ---
@@ -50,19 +50,83 @@ id: Menu.Item
 ---
 @tsProps
 **/
-let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class MenuItem extends _react.Component {
-  static displayName = "MenuItem";
-  static componentId = 'Menu.Item';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    type: 'button',
-    disabled: false
-  };
-  static contextType = _MenuContext.MenuContext;
-
+let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = 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 => {
+      this.focus();
+
+      if (typeof this.props.onMouseOver === 'function') {
+        this.props.onMouseOver(event, this);
+      }
+    };
 
     if (typeof props.selected === 'undefined') {
       this.state = {
@@ -77,16 +141,10 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     return this.ref;
   }
 
-  labelId;
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props2;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_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) {
@@ -95,9 +153,9 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props3;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
   componentWillUnmount() {
@@ -108,71 +166,6 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     }
   }
 
-  handleClick = e => {
-    const _this$props3 = this.props,
-          onSelect = _this$props3.onSelect,
-          onClick = _this$props3.onClick,
-          disabled = _this$props3.disabled,
-          value = _this$props3.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);
-    }
-  };
-  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();
-      }
-    }
-  };
-  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();
-      }
-    }
-  };
-  handleMouseOver = event => {
-    this.focus();
-
-    if (typeof this.props.onMouseOver === 'function') {
-      this.props.onMouseOver(event, this);
-    }
-  };
-
   get elementType() {
     return (0, _getElementType.getElementType)(MenuItem, this.props);
   }
@@ -253,7 +246,10 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     }), this.renderContent());
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  type: 'button',
+  disabled: false
+}, _class2.contextType = _MenuContext.MenuContext, _class2)) || _class) || _class) || _class);
 exports.MenuItem = MenuItem;
 var _default = MenuItem;
 exports.default = _default;