@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -7,11 +7,8 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var container = {
   display: 'flex',
   padding: '0px 15px 0px 25px',
@@ -35,7 +32,6 @@ var container = {
     borderBottomColor: 'line.hairline'
   }
 };
-
 var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
   minHeight: '75px',
   height: '76px',
@@ -62,7 +58,6 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
     }
   }
 });
-
 export default {
   container: container,
   linkedViewContainer: linkedViewContainer

package/lib/components/Loader/Loader.js

@@ -4,16 +4,15 @@ var _excluded = ["size"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Box from '../Box';
+
 /**
  * Indeterminite progress component. Used to show general loading.
  * Uses [useProgressBar](https://react-spectrum.adobe.com/react-aria/useProgressBar.html) from React Aria
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
   var size = props.size,
-      others = _objectWithoutProperties(props, _excluded);
-
+    others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     isRow: true,
@@ -36,7 +35,6 @@ Loader.propTypes = {
    * Default color inherits the font color.
   */
   color: PropTypes.string,
-
   /**
    * Size as number or pixel / em / rem value.
    * Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px.

package/lib/components/Loader/Loader.stories.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import Loader from './';
 import { flatColorList } from '../../styles/colors';
+import Loader from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Loader',
@@ -13,8 +13,7 @@ export default {
         type: 'select',
         options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref) {
           var _ref2 = _slicedToArray(_ref, 1),
-              colorName = _ref2[0];
-
+            colorName = _ref2[0];
           return colorName;
         })
       },

package/lib/components/Loader/Loader.styles.js

@@ -8,15 +8,10 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _context, _context2, _context3, _context4, _context5;
-
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { keyframes } from '@emotion/react';
 var container = {
   color: 'currentColor',
@@ -52,19 +47,15 @@ var dot = {
   margin: '0.3em',
   display: 'block'
 };
-
 var dotLeft = _objectSpread(_objectSpread({}, dot), {}, {
   animation: _concatInstanceProperty(_context = "".concat(pulse, " ")).call(_context, animationSettings)
 });
-
 var dotCenter = _objectSpread(_objectSpread({}, dot), {}, {
   animation: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "".concat(wait, " 0.2s, ")).call(_context3, pulse, " ")).call(_context2, animationSettings, " 0.2s")
 });
-
 var dotRight = _objectSpread(_objectSpread({}, dot), {}, {
   animation: _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = "".concat(wait, " 0.4s, ")).call(_context5, pulse, " ")).call(_context4, animationSettings, " 0.4s")
 });
-
 export default {
   dotLeft: dotLeft,
   dotCenter: dotCenter,

package/lib/components/Loader/Loader.test.js

@@ -8,13 +8,12 @@ var testId = 'test-loader';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Loader, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default loader', function () {
   getComponent();

package/lib/components/Menu/Menu.js

@@ -12,61 +12,51 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["isDisabled", "onAction", "onSelectionChange", "isNotFocusedOnHover"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
-import PropTypes from 'prop-types';
 import { mergeProps, useFocusRing, useMenu } from 'react-aria';
 import { useTreeState } from 'react-stately';
 import { useSyncRef } from '@react-aria/utils';
+import PropTypes from 'prop-types';
 import { MenuContext } from '../../context/MenuContext';
 import { usePropWarning } from '../../hooks';
-import MenuItem from '../MenuItem';
-import Box from '../Box';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import Box from '../Box';
+import MenuItem from '../MenuItem';
+
 /**
  * Menu component intended to be used as a wrapper for MenuItem.
  * This component is typically used alongside others such as PopoverMenu.
  *
  * Utilizes [React Aria](https://react-spectrum.adobe.com/react-aria/useMenu.html).
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-
   var isDisabled = props.isDisabled,
-      onAction = props.onAction,
-      onSelectionChange = props.onSelectionChange,
-      isNotFocusedOnHover = props.isNotFocusedOnHover,
-      others = _objectWithoutProperties(props, _excluded);
-
+    onAction = props.onAction,
+    onSelectionChange = props.onSelectionChange,
+    isNotFocusedOnHover = props.isNotFocusedOnHover,
+    others = _objectWithoutProperties(props, _excluded);
   var contextProps = useContext(MenuContext);
-
   var completeProps = _objectSpread({}, mergeProps(contextProps, props));
-
   var state = useTreeState(completeProps);
   var menuRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return menuRef.current;
   });
-
   var _useMenu = useMenu(completeProps, state, menuRef),
-      menuProps = _useMenu.menuProps;
-
+    menuProps = _useMenu.menuProps;
   var _useFocusRing = useFocusRing({
-    within: true
-  }),
-      isFocusVisible = _useFocusRing.isFocusVisible,
-      focusProps = _useFocusRing.focusProps; // Sync the refs between context and local instance for overlay positioning
-
+      within: true
+    }),
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
 
+  // Sync the refs between context and local instance for overlay positioning
   useSyncRef(contextProps, menuRef);
   return ___EmotionJSX(Box, _extends({
     as: "ul",
@@ -88,61 +78,49 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
 Menu.propTypes = {
   /** The type of selection that is allowed. */
   selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
-
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.
    */
   disabledKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
-
   /**
    * The initial selected keys in the collection (uncontrolled).
    *
    * `defaultSelectedKeys="all"` can be used to select every key.
    */
   defaultSelectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
   /**
    * The currently selected keys in the collection (controlled).
    *
    * `selectedKeys="all"` can be used to select every key.
    */
   selectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
   /** Whether the item is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the menu item is selected. */
   isSelected: PropTypes.bool,
-
   /**
    * Whether menu item should receive focus state on hover.
    */
   isNotFocusedOnHover: PropTypes.bool,
-
   /**
    * Handler that is called when an item is selected.
    *
    * `(key: Key) => void`
    */
   onAction: PropTypes.func,
-
   /**
    * Handler that is called when the selection changes. Does not fire when `selectionMode="none"`.
    *
    * `(keys: Selection) => any`
    */
   onSelectionChange: PropTypes.func,
-
   /** A screen reader only label for the menu item. */
   'aria-label': PropTypes.string,
-
   /** Identifies the element (or elements) that labels the current element. */
   'aria-labelledby': PropTypes.string,
-
   /** Identifies the element (or elements) that describes the object. */
   'aria-describedby': PropTypes.string,
-
   /**
    * Identifies the element (or elements) that provide a detailed,
    * extended description for the object.

package/lib/components/Menu/Menu.stories.js

@@ -1,8 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Item } from 'react-stately';
-import Menu from '../Menu';
 import Text from '../Text';
+import Menu from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Menu',
@@ -64,8 +65,7 @@ export default {
   }
 };
 export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(Menu, _extends({
     "aria-label": "Example Menu"
   }, args), ___EmotionJSX(Item, {

package/lib/components/Menu/Menu.test.js

@@ -4,10 +4,10 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
-import { Menu, Item } from '../../index';
+import { Item, Menu } from '../../index';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import axeTest from '../../utils/testUtils/testAxe';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testTitle = 'Test Title';
 var defaultProps = {
@@ -24,7 +24,6 @@ var defaultItems = [{
   key: 'c',
   children: 'C'
 }];
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Menu, _extends({}, defaultProps, props), _mapInstanceProperty(defaultItems).call(defaultItems, function (item) {
@@ -32,9 +31,9 @@ var getComponent = function getComponent() {
       key: item.key
     }, item));
   })));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('should render basic menu with children', function () {
   getComponent();
@@ -67,7 +66,6 @@ test('applies disabled class with disabled prop', function () {
     isDisabled: true
   });
   var menuItems = screen.getAllByRole('menuitem');
-
   _forEachInstanceProperty(menuItems).call(menuItems, function (item) {
     return expect(item).toHaveClass('is-disabled');
   });
@@ -75,11 +73,13 @@ test('applies disabled class with disabled prop', function () {
 test('should be able to navigate through the items with the keyboard', function () {
   getComponent();
   var menuItems = screen.getAllByRole('menuitem');
-  expect(menuItems[0]).not.toHaveFocus(); // Need to tab to them first
+  expect(menuItems[0]).not.toHaveFocus();
 
+  // Need to tab to them first
   userEvent.tab();
-  expect(menuItems[0]).toHaveFocus(); // Then we can use the arrow keys
+  expect(menuItems[0]).toHaveFocus();
 
+  // Then we can use the arrow keys
   fireEvent.keyDown(menuItems[0], {
     key: 'ArrowDown'
   });
@@ -103,8 +103,9 @@ test('should fire onAction', function () {
     onAction: onAction
   });
   var menuItems = screen.getAllByRole('menuitem');
-  expect(onAction).not.toHaveBeenCalled(); // Keyboard events
+  expect(onAction).not.toHaveBeenCalled();
 
+  // Keyboard events
   userEvent.tab();
   fireEvent.keyDown(menuItems[0], {
     key: 'Enter'
@@ -112,8 +113,9 @@ test('should fire onAction', function () {
   fireEvent.keyUp(menuItems[0], {
     key: 'Enter'
   });
-  expect(onAction).toHaveBeenNthCalledWith(1, defaultItems[0].key); // Click events
+  expect(onAction).toHaveBeenNthCalledWith(1, defaultItems[0].key);
 
+  // Click events
   userEvent.click(menuItems[1]);
   expect(onAction).toHaveBeenNthCalledWith(2, defaultItems[1].key);
 });
@@ -123,8 +125,9 @@ test('should not fire onSelectionChange when selectionMode is none', function ()
     onSelectionChange: onSelectionChange
   });
   var menuItems = screen.getAllByRole('menuitem');
-  expect(onSelectionChange).not.toHaveBeenCalled(); // Keyboard events
+  expect(onSelectionChange).not.toHaveBeenCalled();
 
+  // Keyboard events
   userEvent.tab();
   fireEvent.keyDown(menuItems[0], {
     key: 'Enter'
@@ -132,8 +135,9 @@ test('should not fire onSelectionChange when selectionMode is none', function ()
   fireEvent.keyUp(menuItems[0], {
     key: 'Enter'
   });
-  expect(onSelectionChange).not.toHaveBeenCalled(); // Click events
+  expect(onSelectionChange).not.toHaveBeenCalled();
 
+  // Click events
   userEvent.click(menuItems[1]);
   expect(onSelectionChange).not.toHaveBeenCalled();
 });
@@ -144,8 +148,9 @@ test('should fire onSelectionChange when selectionMode is not none', function ()
     selectionMode: 'single'
   });
   var menuItems = screen.getAllByRole('menuitemradio');
-  expect(onSelectionChange).not.toHaveBeenCalled(); // Keyboard events
+  expect(onSelectionChange).not.toHaveBeenCalled();
 
+  // Keyboard events
   userEvent.tab();
   fireEvent.keyDown(menuItems[0], {
     key: 'Enter'
@@ -153,8 +158,9 @@ test('should fire onSelectionChange when selectionMode is not none', function ()
   fireEvent.keyUp(menuItems[0], {
     key: 'Enter'
   });
-  expect(onSelectionChange).toHaveBeenNthCalledWith(1, expect.any(_Set)); // Click events
+  expect(onSelectionChange).toHaveBeenNthCalledWith(1, expect.any(_Set));
 
+  // Click events
   userEvent.click(menuItems[1]);
   expect(onSelectionChange).toHaveBeenNthCalledWith(2, expect.any(_Set));
 });

package/lib/components/MenuItem/MenuItem.js

@@ -3,100 +3,87 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["isSeparator", "isPressed", "data-id"];
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import { mergeProps, useMenuItem } from 'react-aria';
 import { useFocus, useHover, usePress } from '@react-aria/interactions';
+import PropTypes from 'prop-types';
 import { useMenuContext } from '../../context/MenuContext';
 import { usePropWarning, useStatusClasses } from '../../hooks';
-import Box from '../Box';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import Box from '../Box';
+
 /**
  * Menu Item component intended to be used within Menu or PopupMenu.
  * This component is not intented to be used outside of Menu or independently.
  * Utilizes [React Aria](https://react-spectrum.adobe.com/react-aria/useMenu.html)
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var item = props.item,
-      propIsDisabled = props.isDisabled,
-      isFocusVisible = props.isFocusVisible,
-      isNotFocusedOnHover = props.isNotFocusedOnHover,
-      className = props.className,
-      onAction = props.onAction,
-      state = props.state;
-
+    propIsDisabled = props.isDisabled,
+    isFocusVisible = props.isFocusVisible,
+    isNotFocusedOnHover = props.isNotFocusedOnHover,
+    className = props.className,
+    onAction = props.onAction,
+    state = props.state;
   var _useMenuContext = useMenuContext(),
-      onClose = _useMenuContext.onClose,
-      closeOnSelect = _useMenuContext.closeOnSelect;
-
+    onClose = _useMenuContext.onClose,
+    closeOnSelect = _useMenuContext.closeOnSelect;
   var key = item.key,
-      rendered = item.rendered,
-      itemProps = item.props;
-
+    rendered = item.rendered,
+    itemProps = item.props;
   var isSeparator = itemProps.isSeparator,
-      propIsPressed = itemProps.isPressed,
-      dataId = itemProps['data-id'],
-      others = _objectWithoutProperties(itemProps, _excluded);
-
+    propIsPressed = itemProps.isPressed,
+    dataId = itemProps['data-id'],
+    others = _objectWithoutProperties(itemProps, _excluded);
   var isDisabled = propIsDisabled || state.disabledKeys.has(key);
   var isSelected = state.selectionManager.isSelected(key);
   var menuItemRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return menuItemRef.current;
   });
-
   var _useMenuItem = useMenuItem({
-    key: item.key,
-    'aria-label': item['aria-label'],
-    isDisabled: isDisabled,
-    onAction: onAction,
-    isSelected: isSelected,
-    onClose: onClose,
-    closeOnSelect: closeOnSelect
-  }, state, menuItemRef),
-      menuItemProps = _useMenuItem.menuItemProps;
-
+      key: item.key,
+      'aria-label': item['aria-label'],
+      isDisabled: isDisabled,
+      onAction: onAction,
+      isSelected: isSelected,
+      onClose: onClose,
+      closeOnSelect: closeOnSelect
+    }, state, menuItemRef),
+    menuItemProps = _useMenuItem.menuItemProps;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setFocused = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setFocused = _useState2[1];
   var _usePress = usePress({
-    ref: menuItemRef,
-    isDisabled: isDisabled,
-    isPressed: propIsPressed
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
+      ref: menuItemRef,
+      isDisabled: isDisabled,
+      isPressed: propIsPressed
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var _useFocus = useFocus({
-    onFocusChange: setFocused
-  }),
-      focusProps = _useFocus.focusProps;
-
+      onFocusChange: setFocused
+    }),
+    focusProps = _useFocus.focusProps;
   var _useHover = useHover({
-    isDisabled: isDisabled
-  }),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+      isDisabled: isDisabled
+    }),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useStatusClasses = useStatusClasses(className, {
-    isFocused: isFocused || isHovered && !isFocusVisible,
-    isDisabled: isDisabled,
-    isSelected: isSelected,
-    isPressed: isPressed
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isFocused: isFocused || isHovered && !isFocusVisible,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      isPressed: isPressed
+    }),
+    classNames = _useStatusClasses.classNames;
   if (isNotFocusedOnHover) {
     delete menuItemProps.onPointerEnter;
     delete menuItemProps.onPointerLeave;
   }
-
   return ___EmotionJSX(Box, _extends({
     as: "li",
     className: classNames,
@@ -110,30 +97,23 @@ MenuItem.displayName = 'MenuItem';
 MenuItem.propTypes = {
   /** Whether the item is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the menu item is selected. */
   isSelected: PropTypes.bool,
-
   /** Whether the menu item is currently pressed. */
   isPressed: PropTypes.bool,
-
   /**
    * Whether the containing menu has keyboard focus.
    * Used to determine when to present hover vs focus styling.
    */
   isFocusVisible: PropTypes.bool,
-
   /**
    * Whether menu item should receive focus state on hover.
    */
   isNotFocusedOnHover: PropTypes.bool,
-
   /** A screen reader only label for the menu item. */
   'aria-label': PropTypes.string,
-
   /** Handler that is called when the menu should close after selecting an item. */
   onClose: PropTypes.func,
-
   /** Handler that is called when the user activates the item. */
   onAction: PropTypes.func,
   item: PropTypes.shape({

package/lib/components/MenuItem/MenuItem.test.js

@@ -4,9 +4,9 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import { Item, Menu } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
-import { Menu, Item } from '../../index';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'testId';
 var defaultMenuItems = [{
@@ -27,16 +27,13 @@ var defaultProps = {
   defaultSelectedKey: defaultMenuItems[0].key,
   'aria-label': 'testLabel'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$items = _ref.items,
-      items = _ref$items === void 0 ? defaultMenuItems : _ref$items,
-      _ref$renderFn = _ref.renderFn,
-      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
-
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? defaultMenuItems : _ref$items,
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
   return renderFn(___EmotionJSX(Menu, _extends({}, defaultProps, props), _mapInstanceProperty(items).call(items, function (li) {
     return ___EmotionJSX(Item, _extends({
       key: li.key
@@ -46,9 +43,9 @@ var getComponent = function getComponent() {
       }
     }));
   })));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('renders menu with menu items', function () {
   getComponent();
@@ -56,7 +53,6 @@ test('renders menu with menu items', function () {
   var menuItems = screen.getAllByRole('menuitem');
   expect(menu).toBeInTheDocument();
   expect(menuItems).toHaveLength(menuItems.length);
-
   _forEachInstanceProperty(menuItems).call(menuItems, function (item) {
     return expect(item).toBeInTheDocument();
   });
@@ -129,7 +125,6 @@ test('disables item with isDisabled applied, does not disable without prop', fun
 });
 test('should change styles according to isPressed prop', function () {
   var customItems = _Array$from(defaultMenuItems);
-
   customItems[0].isPressed = true;
   getComponent({}, {
     items: customItems