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

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-menu
 

package/es/Menu/MenuItem/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _class2, _IconCheckSolid, _IconArrowOpenEndSoli;
+var _dec, _dec2, _dec3, _class, _IconCheckSolid, _IconArrowOpenEndSoli;
 
 /*
  * The MIT License (MIT)
@@ -25,7 +25,7 @@ var _dec, _dec2, _dec3, _class, _class2, _IconCheckSolid, _IconArrowOpenEndSoli;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import keycode from 'keycode';
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons';
 import { omitProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
@@ -45,83 +45,19 @@ id: Menu.Item
 ---
 @tsProps
 **/
-let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class MenuItem extends Component {
+let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class MenuItem extends Component {
+  static displayName = "MenuItem";
+  static componentId = 'Menu.Item';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    type: 'button',
+    disabled: false
+  };
+  static contextType = MenuContext;
+
   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 => {
-      this.focus();
-
-      if (typeof this.props.onMouseOver === 'function') {
-        this.props.onMouseOver(event, this);
-      }
-    };
 
     if (typeof props.selected === 'undefined') {
       this.state = {
@@ -136,10 +72,16 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     return this.ref;
   }
 
+  labelId;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
+
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
     const context = this.context;
 
     if (context && context.registerMenuItem) {
@@ -148,9 +90,9 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   componentWillUnmount() {
@@ -161,6 +103,71 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }
   }
 
+  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.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();
+      }
+    }
+  };
+  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();
+      }
+    }
+  };
+  handleMouseOver = event => {
+    this.focus();
+
+    if (typeof this.props.onMouseOver === 'function') {
+      this.props.onMouseOver(event, this);
+    }
+  };
+
   get elementType() {
     return getElementType(MenuItem, this.props);
   }
@@ -241,9 +248,6 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }), this.renderContent());
   }
 
-}, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  type: 'button',
-  disabled: false
-}, _class2.contextType = MenuContext, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default MenuItem;
 export { MenuItem };

package/es/Menu/MenuItemGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /*
  * The MIT License (MIT)
@@ -42,53 +42,21 @@ id: Menu.Group
 ---
 @tsProps
 **/
-let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class MenuItemGroup extends Component {
+let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class MenuItemGroup extends Component {
+  static displayName = "MenuItemGroup";
+  static componentId = 'Menu.Group';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    disabled: false,
+    children: null,
+    isTabbable: false,
+    allowMultiple: false,
+    defaultSelected: []
+  };
+
   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 = {
@@ -99,6 +67,12 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     this._labelId = props.deterministicId('MenuItemGroup');
   }
 
+  _labelId;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
+
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -111,6 +85,43 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     (_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;
@@ -194,12 +205,6 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     }, this.renderChildren()));
   }
 
-}, _class2.displayName = "MenuItemGroup", _class2.componentId = 'Menu.Group', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  disabled: false,
-  children: null,
-  isTabbable: false,
-  allowMultiple: false,
-  defaultSelected: []
-}, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default MenuItemGroup;
 export { MenuItemGroup };

package/es/Menu/MenuItemSeparator/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -40,15 +40,15 @@ id: Menu.Separator
 ---
 @module MenuItemSeparator
 **/
-let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class MenuItemSeparator extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class MenuItemSeparator extends Component {
+  static displayName = "MenuItemSeparator";
+  static componentId = 'Menu.Separator';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -73,6 +73,6 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
     }));
   }
 
-}, _class2.displayName = "MenuItemSeparator", _class2.componentId = 'Menu.Separator', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default MenuItemSeparator;
 export { MenuItemSeparator };