@instructure/ui-menu 8.33.1 → 8.33.2

package/es/Menu/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,7 +22,6 @@ var _dec, _dec2, _dec3, _class, _class2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 /** @jsx jsx */
 import React, { Children, Component } from 'react';
 import keycode from 'keycode';
@@ -40,7 +38,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -62,67 +59,55 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
     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 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;
+        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();
@@ -137,107 +122,83 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
         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();
   }
-
   componentDidMount() {
     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() {
     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() {
     return this._menuItems;
   }
-
   focus() {
     if (this.shown) {
       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 {
       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();
     }
   }
-
   focused() {
     if (this.shown) {
       return containsActiveElement(this._menu) || this.state.hasFocus;
@@ -245,52 +206,42 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
       return containsActiveElement(this._trigger);
     }
   }
-
   get focusedIndex() {
     return this.menuItems.findIndex(item => {
       return item && item.focused === true;
     });
   }
-
   moveFocus(step) {
     const count = this.menuItems ? this.menuItems.length : 0;
-
     if (count <= 0) {
       return;
     }
-
     const current = this.focusedIndex < 0 && step < 0 ? 0 : this.focusedIndex;
     const nextItem = this.menuItems[(current + count + step) % count];
     error(typeof nextItem !== 'undefined' && typeof nextItem.focus !== 'undefined', '[Menu] Could not focus next menu item.');
     nextItem.focus();
   }
-
   get shown() {
     return this._popover ? this._popover.shown : true;
   }
-
   renderChildren() {
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          disabled = _this$props3.disabled;
+      children = _this$props3.children,
+      disabled = _this$props3.disabled;
     let count = 0;
     return Children.map(children, child => {
       if (!matchComponentTypes(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
         return;
       }
-
       count += 1;
       const isTabbable = !this.state.hasFocus && count === 1;
-
       if (matchComponentTypes(child, ['MenuItemSeparator'])) {
         return jsx("li", {
           role: "none"
         }, child);
       }
-
       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", {
           role: "none"
@@ -305,7 +256,6 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
           tabIndex: isTabbable ? 0 : -1
         }));
       }
-
       if (matchComponentTypes(child, ['MenuItemGroup'])) {
         return jsx("li", {
           role: "none"
@@ -320,7 +270,6 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
           isTabbable
         }));
       }
-
       if (matchComponentTypes(child, ['Menu'])) {
         const submenuDisabled = disabled || child.props.disabled;
         return jsx("li", {
@@ -346,19 +295,16 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
           }, child.props.title || child.props.label)
         }));
       }
-
       return;
     });
   }
-
   renderMenu() {
     var _this$props$styles;
-
     const _this$props4 = this.props,
-          disabled = _this$props4.disabled,
-          label = _this$props4.label,
-          trigger = _this$props4.trigger,
-          onKeyUp = _this$props4.onKeyUp;
+      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, {
@@ -379,33 +325,30 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
       ref: this.handleRef
     }, this.renderChildren()));
   }
-
   render() {
     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,
-          positionContainerDisplay = _this$props5.positionContainerDisplay,
-          offsetX = _this$props5.offsetX,
-          offsetY = _this$props5.offsetY;
+      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,
+      positionContainerDisplay = _this$props5.positionContainerDisplay,
+      offsetX = _this$props5.offsetX,
+      offsetY = _this$props5.offsetY;
     return trigger ? jsx(Popover, {
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
       onHideContent: (event, _ref) => {
         let documentClick = _ref.documentClick;
-
         if (typeof onDismiss === 'function') {
           onDismiss(event, documentClick);
         }
-
         this.handleToggle(false);
       },
       onShowContent: () => this.handleToggle(true),
@@ -426,7 +369,6 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
       },
       ref: el => {
         this._popover = el;
-
         if (typeof popoverRef === 'function') {
           popoverRef(el);
         }
@@ -443,7 +385,6 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
       })
     }, this.renderMenu()) : this.renderMenu();
   }
-
 }, _class2.displayName = "Menu", _class2.componentId = 'Menu', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   label: null,
   disabled: false,

package/es/Menu/locator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { MenuLocator } from './MenuLocator';
 export { MenuItemLocator, MenuItemGroupLocator } from './MenuLocator';
 export { MenuLocator };

package/es/Menu/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { PositionPropTypes } from '@instructure/ui-position';
 import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';

package/es/Menu/styles.js

@@ -67,5 +67,4 @@ const generateStyle = componentTheme => {
     }
   };
 };
-
 export default generateStyle;

package/es/Menu/theme.js

@@ -29,8 +29,8 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        breakpoints = theme.breakpoints,
-        borders = theme.borders;
+    breakpoints = theme.breakpoints,
+    borders = theme.borders;
   const componentVariables = {
     minWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xxSmall,
     maxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
@@ -40,8 +40,8 @@ const generateComponentTheme = theme => {
     focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
     focusBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/MenuContext.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { createContext } from 'react';
 
+import { createContext } from 'react';
 /**
 ---
 private: true

package/lib/Menu/MenuItem/MenuItemLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuItemLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const MenuItemLocator = (0, _locator.locator)(_index.MenuItem.selector);
 exports.MenuItemLocator = MenuItemLocator;

package/lib/Menu/MenuItem/index.js

@@ -1,48 +1,28 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.MenuItem = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _keycode = _interopRequireDefault(require("keycode"));
-
 var _IconCheckSolid2 = require("@instructure/ui-icons/lib/IconCheckSolid.js");
-
 var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
-
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
-
 var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _MenuContext = require("../../MenuContext");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _dec3, _class, _class2, _IconCheckSolid, _IconArrowOpenEndSoli;
-
 /**
 ---
 parent: Menu
@@ -55,48 +35,39 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     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;
+        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);
@@ -104,107 +75,82 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         }
       }
     };
-
     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 = {
         selected: !!props.defaultSelected
       };
     }
-
     this.labelId = props.deterministicId('MenuItem__label');
   }
-
   get _node() {
     return this.ref;
   }
-
   componentDidMount() {
     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) {
       context.registerMenuItem(this);
     }
   }
-
   componentDidUpdate() {
     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() {
     const context = this.context;
-
     if (context && context.removeMenuItem) {
       context.removeMenuItem(this);
     }
   }
-
   get elementType() {
     return (0, _getElementType.getElementType)(MenuItem, this.props);
   }
-
   get role() {
     switch (this.props.type) {
       case 'checkbox':
         return 'menuitemcheckbox';
-
       case 'radio':
         return 'menuitemradio';
-
       case 'flyout':
         return 'button';
-
       default:
         return 'menuitem';
     }
   }
-
   get selected() {
     return typeof this.props.selected === 'undefined' ? this.state.selected : this.props.selected;
   }
-
   get focused() {
     return (0, _isActiveElement.isActiveElement)(this.ref);
   }
-
   focus() {
     const refNode = (0, _findDOMNode.findDOMNode)(this.ref);
     refNode.focus();
   }
-
   renderContent() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
-
     const _this$props4 = this.props,
-          children = _this$props4.children,
-          type = _this$props4.type;
+      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", {
@@ -214,22 +160,19 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
     }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, null))));
   }
-
   render() {
     var _this$props$styles4;
-
     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;
+      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, Object.assign({
       tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
-
     }, props, {
       href: href,
       role: this.role,
@@ -245,7 +188,6 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       onMouseOver: this.handleMouseOver
     }), this.renderContent());
   }
-
 }, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   type: 'button',
   disabled: false

package/lib/Menu/MenuItem/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "MenuItemLocator", {
   }
 });
 exports.default = void 0;
-
 var _MenuItemLocator = require("./MenuItemLocator");
-
 /*
  * The MIT License (MIT)
  *