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

package/lib/Menu/MenuItemGroup/index.js

@@ -33,7 +33,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /**
 ---
@@ -42,21 +42,53 @@ id: Menu.Group
 ---
 @tsProps
 **/
-let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class MenuItemGroup extends _react.Component {
-  static displayName = "MenuItemGroup";
-  static componentId = 'Menu.Group';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    disabled: false,
-    children: null,
-    isTabbable: false,
-    allowMultiple: false,
-    defaultSelected: []
-  };
-
+let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class MenuItemGroup extends _react.Component {
   constructor(props) {
     super(props);
+    this._labelId = void 0;
+    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 = {
@@ -67,12 +99,6 @@ let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
     this._labelId = props.deterministicId('MenuItemGroup');
   }
 
-  _labelId;
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -85,43 +111,6 @@ let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
-  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)
-        };
-      });
-    }
-  };
-  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;
-  };
-
   selectedFromChildren(props) {
     const children = props.children,
           allowMultiple = props.allowMultiple;
@@ -207,7 +196,13 @@ let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
     }, this.renderChildren()));
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "MenuItemGroup", _class2.componentId = 'Menu.Group', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  disabled: false,
+  children: null,
+  isTabbable: false,
+  allowMultiple: false,
+  defaultSelected: []
+}, _class2)) || _class) || _class) || _class);
 exports.MenuItemGroup = MenuItemGroup;
 var _default = MenuItemGroup;
 exports.default = _default;

package/lib/Menu/MenuItemSeparator/index.js

@@ -21,7 +21,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -30,15 +30,15 @@ id: Menu.Separator
 ---
 @module MenuItemSeparator
 **/
-let MenuItemSeparator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class MenuItemSeparator extends _react.Component {
-  static displayName = "MenuItemSeparator";
-  static componentId = 'Menu.Separator';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
+let MenuItemSeparator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class MenuItemSeparator extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -63,7 +63,7 @@ let MenuItemSeparator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
     }));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "MenuItemSeparator", _class2.componentId = 'Menu.Separator', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2)) || _class) || _class);
 exports.MenuItemSeparator = MenuItemSeparator;
 var _default = MenuItemSeparator;
 exports.default = _default;

package/lib/Menu/index.js

@@ -62,7 +62,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /**
 ---
@@ -70,56 +70,162 @@ category: components
 ---
 @tsProps
 **/
-let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class Menu extends _react.Component {
-  static displayName = "Menu";
-  static componentId = 'Menu';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.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.MenuItem;
-  static Group = _MenuItemGroup.MenuItemGroup;
-  static Separator = _MenuItemSeparator.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 = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Menu extends _react.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);
+      (0, _console.logError)(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.default.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.default.codes,
+            down = _keycode$codes.down,
+            up = _keycode$codes.up,
+            tab = _keycode$codes.tab,
+            left = _keycode$codes.left;
+      const pgdn = _keycode.default.codes['page down'];
+      const pgup = _keycode.default.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.default.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();
   }
 
@@ -135,123 +241,10 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
     (_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.MenuContext;
-  registerMenuItem = item => {
-    this._menuItems.push(item);
-  };
-  removeMenuItem = item => {
-    const index = this.getMenuItemIndex(item);
-    (0, _console.logError)(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.default.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.default.codes,
-          down = _keycode$codes.down,
-          up = _keycode$codes.up,
-          tab = _keycode$codes.tab,
-          left = _keycode$codes.left;
-    const pgdn = _keycode.default.codes['page down'];
-    const pgup = _keycode.default.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.default.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;
@@ -472,7 +465,20 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
     }, this.renderMenu()) : this.renderMenu();
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Menu", _class2.componentId = 'Menu', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.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.MenuItem, _class2.Group = _MenuItemGroup.MenuItemGroup, _class2.Separator = _MenuItemSeparator.MenuItemSeparator, _class2.contextType = _MenuContext.MenuContext, _class2)) || _class) || _class) || _class);
 exports.Menu = Menu;
 var _default = Menu;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,27 +23,27 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-queries": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-themes": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-13",
+    "@instructure/ui-test-queries": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-themes": "8.25.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-a11y-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-icons": "8.25.1-snapshot-10",
-    "@instructure/ui-popover": "8.25.1-snapshot-10",
-    "@instructure/ui-position": "8.25.1-snapshot-10",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
+    "@instructure/console": "8.25.1-snapshot-13",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/shared-types": "8.25.1-snapshot-13",
+    "@instructure/ui-a11y-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-icons": "8.25.1-snapshot-13",
+    "@instructure/ui-popover": "8.25.1-snapshot-13",
+    "@instructure/ui-position": "8.25.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-testable": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
     "keycode": "^2",
     "prop-types": "^15"
   },