@instructure/ui-menu 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-menu
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-menu

package/es/Menu/MenuItem/MenuItemLocator.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { MenuItem } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { MenuItem } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const MenuItemLocator = locator(MenuItem.selector);

package/es/Menu/MenuItem/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _class, _class2, _IconCheckSolid, _IconArrowOpenEndSoli;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,7 +22,6 @@ var _dec, _dec2, _dec3, _class, _class2, _IconCheckSolid, _IconArrowOpenEndSoli;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 /** @jsx jsx */
 import React, { Component } from 'react';
 import keycode from 'keycode';
@@ -37,7 +35,6 @@ import { MenuContext } from '../../MenuContext';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: Menu
@@ -50,48 +47,39 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     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.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);
@@ -99,107 +87,82 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
         }
       }
     };
-
     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 = {
         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 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 isActiveElement(this.ref);
   }
-
   focus() {
     const refNode = 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 jsx("span", null, (type === 'checkbox' || type === 'radio') && 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 = jsx(IconCheckSolid, null)))), jsx("span", {
@@ -209,22 +172,19 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
     }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(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 = omitProps(this.props, MenuItem.allowedProps);
     const ElementType = this.elementType;
     return jsx(ElementType, Object.assign({
       tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
-
     }, props, {
       href: href,
       role: this.role,
@@ -240,7 +200,6 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       onMouseOver: this.handleMouseOver
     }), this.renderContent());
   }
-
 }, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   type: 'button',
   disabled: false

package/es/Menu/MenuItem/locator.js

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

package/es/Menu/MenuItem/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 { controllable } from '@instructure/ui-prop-types';
 const propTypes = {

package/es/Menu/MenuItem/styles.js

@@ -34,7 +34,7 @@
  */
 const generateStyle = (componentTheme, props) => {
   const type = props.type,
-        disabled = props.disabled;
+    disabled = props.disabled;
   const isRadioOrCheckbox = type === 'checkbox' || type === 'radio';
   const flyoutIconStyles = type === 'flyout' ? {
     insetInlineStart: 'auto',
@@ -124,5 +124,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/Menu/MenuItem/theme.js

@@ -29,9 +29,9 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        spacing = theme.spacing,
-        themeName = theme.key;
+    typography = theme.typography,
+    spacing = theme.spacing,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       labelColor: theme['ic-brand-font-color-dark'],
@@ -54,9 +54,9 @@ const generateComponentTheme = theme => {
     activeLabelColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
     activeIconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/es/Menu/MenuItemGroup/MenuItemGroupLocator.js

@@ -23,8 +23,9 @@
  */
 import { locator } from '@instructure/ui-test-locator';
 import { MenuItemGroup } from './index';
-import { MenuItemLocator } from '../MenuItem/MenuItemLocator'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { MenuItemLocator } from '../MenuItem/MenuItemLocator';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const MenuItemGroupLocator = locator(MenuItemGroup.selector, {
   findAllItems: function () {
     return MenuItemLocator.findAll(...arguments);

package/es/Menu/MenuItemGroup/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -34,7 +33,6 @@ import { MenuItem } from '../MenuItem';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: Menu
@@ -47,17 +45,14 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     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 {
@@ -68,12 +63,10 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
         });
       }
     };
-
     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) {
@@ -82,38 +75,29 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
         // 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 = {
         selected: this.selectedFromChildren(props) || props.defaultSelected
       };
     }
-
     this._labelId = props.deterministicId('MenuItemGroup');
   }
-
   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);
   }
-
   selectedFromChildren(props) {
     const children = props.children,
-          allowMultiple = props.allowMultiple;
+      allowMultiple = props.allowMultiple;
     const selected = [];
     const items = Children.toArray(children).filter(child => {
       return matchComponentTypes(child, [MenuItem]);
@@ -125,7 +109,6 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     });
     return selected.length > 0 ? selected : null;
   }
-
   get selected() {
     if (typeof this.props.selected === 'undefined' && typeof this.state.selected === 'undefined') {
       return [];
@@ -133,23 +116,20 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       return typeof this.props.selected === 'undefined' ? [...this.state.selected] : [...this.props.selected];
     }
   }
-
   renderLabel() {
     var _this$props$styles;
-
     const label = this.props.label;
     return hasVisibleChildren(label) ? jsx("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label
     }, label) : label;
   }
-
   renderChildren() {
     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;
+      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 Children.map(children, child => {
@@ -175,10 +155,8 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       }
     });
   }
-
   render() {
     var _this$props$styles2, _this$props$styles3;
-
     const props = omitProps(this.props, MenuItemGroup.allowedProps);
     return jsx("span", Object.assign({}, props, {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
@@ -193,7 +171,6 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       "aria-labelledby": this._labelId
     }, this.renderChildren()));
   }
-
 }, _class2.displayName = "MenuItemGroup", _class2.componentId = 'Menu.Group', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   disabled: false,
   children: null,

package/es/Menu/MenuItemGroup/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 { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { MenuItem } from '../MenuItem';

package/es/Menu/MenuItemGroup/styles.js

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

package/es/Menu/MenuItemGroup/theme.js

@@ -29,9 +29,9 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing,
-        typography = theme.typography,
-        themeName = theme.key;
+    spacing = theme.spacing,
+    typography = theme.typography,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark']
@@ -45,9 +45,9 @@ const generateComponentTheme = theme => {
     color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/es/Menu/MenuItemSeparator/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -32,7 +31,6 @@ import { omitProps } from '@instructure/ui-react-utils';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: Menu
@@ -44,27 +42,20 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
   }
-
   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);
   }
-
   render() {
     var _this$props$styles;
-
     const props = omitProps(this.props, MenuItemSeparator.allowedProps);
     return jsx("div", Object.assign({}, props, {
       role: "presentation",
@@ -72,7 +63,6 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
       ref: this.handleRef
     }));
   }
-
 }, _class2.displayName = "MenuItemSeparator", _class2.componentId = 'Menu.Separator', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2)) || _class) || _class);
 export default MenuItemSeparator;
 export { MenuItemSeparator };

package/es/Menu/MenuItemSeparator/props.js

@@ -21,8 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // keeping here to keep the structure of props.ts
 // eslint-disable-next-line
+
 const propTypes = {};
 const allowedProps = [];
 export { propTypes, allowedProps };

package/es/Menu/MenuItemSeparator/styles.js

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

package/es/Menu/MenuItemSeparator/theme.js

@@ -29,15 +29,15 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing,
-        borders = theme.borders;
+    spacing = theme.spacing,
+    borders = theme.borders;
   const componentVariables = {
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
     height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
     margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/Menu/MenuLocator.js

@@ -22,9 +22,10 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { parseQueryArguments } from '@instructure/ui-test-queries'; // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
-// eslint-disable-next-line no-restricted-imports
+import { parseQueryArguments } from '@instructure/ui-test-queries';
 
+// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
+// eslint-disable-next-line no-restricted-imports
 import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocator';
 import { Menu } from './index';
 import { MenuItemLocator } from './MenuItem/MenuItemLocator';
@@ -47,17 +48,19 @@ const customMethods = {
   },
   findPopoverContent: function () {
     const _parseQueryArguments = parseQueryArguments(...arguments),
-          element = _parseQueryArguments.element,
-          selector = _parseQueryArguments.selector,
-          options = _parseQueryArguments.options;
-
-    return PopoverLocator.findContent(element, selector, { ...options,
-      customMethods: { ...options.customMethods,
+      element = _parseQueryArguments.element,
+      selector = _parseQueryArguments.selector,
+      options = _parseQueryArguments.options;
+    return PopoverLocator.findContent(element, selector, {
+      ...options,
+      customMethods: {
+        ...options.customMethods,
         ...customMethods
       }
     });
   }
-}; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+};
 
+// @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 MenuLocator = locator(Menu.selector, customMethods);
 export { MenuLocator, MenuItemLocator, MenuItemGroupLocator };