@pingux/astro 2.0.0-alpha.4 → 2.0.0-alpha.6

package/lib/components/CodeView/CodeView.stories.js

@@ -3,7 +3,6 @@ import React from 'react';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-powershell';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Text } from '../..';
 import CodeView from './CodeView';
 import CodeViewReadme from './CodeView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -46,20 +45,12 @@ export default {
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), ___EmotionJSX(CodeView, args));
+  return ___EmotionJSX(CodeView, args);
 };
 export var WithLineNumbers = function WithLineNumbers() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), ___EmotionJSX(CodeView, {
+  return ___EmotionJSX(CodeView, {
     hasLineNumbers: true
-  }, code));
+  }, code);
 };
 WithLineNumbers.parameters = {
   docs: {

package/lib/components/ColorField/ColorField.js

@@ -115,6 +115,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     hasNoArrow: true,
     isDismissable: true,
     isNonModal: true,
+    isNotClosedOnBlur: true,
     isOpen: popoverState.isOpen,
     onClose: popoverState.close,
     ref: overlayRef

package/lib/components/ColorField/ColorField.test.js

@@ -46,4 +46,19 @@ test('will call onChange with arguments if provided', function () {
   userEvent.clear(hexInput);
   userEvent.type(hexInput, testColor2);
   expect(testOnChange).toHaveBeenCalled();
+});
+test('clicking within the popover does not close it', function () {
+  var testOnChange = jest.fn();
+  getComponent({
+    onChange: testOnChange,
+    value: testColor1
+  });
+  var button = screen.getByRole('button');
+  userEvent.click(button);
+  // should be open now
+  var hexLabelElement = screen.queryByText(hexLabel);
+  expect(hexLabelElement).toBeInTheDocument();
+  // click the popover container, which has caused closing in regressions
+  userEvent.click(screen.queryByRole('presentation'));
+  expect(screen.queryByRole('presentation')).toBeInTheDocument();
 });

package/lib/components/CopyText/CopyButton.js

@@ -13,7 +13,8 @@ var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "copyButton"
   }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
-    size: 15
+    size: "xs",
+    color: "text.secondary"
   }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
 CopyButton.propTypes = {

package/lib/components/Icon/Icon.stories.js

@@ -79,7 +79,7 @@ export var SVGIcons = function SVGIcons() {
   return ___EmotionJSX(Icon, {
     icon: SVGComponent,
     color: "active",
-    size: 40
+    size: "sm"
   });
 };
 var rowHeadings = ['SVG Size', 'Code Example', 'Icon Example'];

package/lib/components/IconButton/IconButton.styles.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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; }
-import { badgeWithSlotDeleteButton, deleteButton } from '../Badge/Badge.styles';
+import { badgeDeleteButton, deleteButton } from '../Badge/Badge.styles';
 import { defaultFocus } from '../Button/Buttons.styles';
 import { toggle } from '../CollapsiblePanel/CollapsiblePanel.styles';
 import { copyButton } from '../CopyText/CopyText.styles';
@@ -136,7 +136,7 @@ export default {
   badge: {
     deleteButton: deleteButton
   },
-  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
+  badgeDeleteButton: badgeDeleteButton,
   copyButton: copyButton,
   hintButton: _objectSpread(_objectSpread({}, base), hintButton),
   inverted: inverted,

package/lib/components/ListItem/ListItem.js

@@ -1,10 +1,22 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+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";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "isSelected"];
+var _excluded = ["children", "className", "isHovered", "isSelected", "onHoverChange", "onHoverEnd", "onHoverStart"];
+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; }
 import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
+import { onHoverPropTypes } from '../../utils/devUtils/props/hoverProps';
 import Box from '../Box/Box';
 
 /**
@@ -12,14 +24,21 @@ import Box from '../Box/Box';
  * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
 */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    isSelected = props.isSelected,
-    others = _objectWithoutProperties(props, _excluded);
-  var _useHover = useHover(props),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
+var ListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    isHovered = _ref.isHovered,
+    isSelected = _ref.isSelected,
+    onHoverChange = _ref.onHoverChange,
+    onHoverEnd = _ref.onHoverEnd,
+    onHoverStart = _ref.onHoverStart,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var _useHover = useHover({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
+    hoverProps = _useHover.hoverProps;
   var _useStatusClasses = useStatusClasses(className, {
       isHovered: isHovered,
       isSelected: isSelected
@@ -27,14 +46,12 @@ var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
     className: classNames,
-    role: "listitem",
     ref: ref,
-    as: "li",
     variant: "listItem.container",
     isRow: true
   }, hoverProps, others), children);
 });
-ListItem.propTypes = {
+ListItem.propTypes = _objectSpread({
   /**
    * A list of class names to apply to the element
    */
@@ -43,7 +60,7 @@ ListItem.propTypes = {
    * Sets the selected state of the ListItem
    */
   isSelected: PropTypes.bool
-};
+}, onHoverPropTypes);
 ListItem.defaultProps = {
   isSelected: false
 };

package/lib/components/ListItem/ListItem.stories.js

@@ -1,12 +1,21 @@
-import React from 'react';
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+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; }
+import React, { useState } from 'react';
 import AccountIcon from 'mdi-react/AccountIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
-import Box from '../Box';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
-import Separator from '../Separator';
-import Text from '../Text';
-import ListItem from './ListItem';
+import { Box, Icon, IconButton, ListItem, Separator, Text } from '../..';
+import { onHoverArgTypes } from '../../utils/devUtils/props/hoverProps';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ListItem',
@@ -17,7 +26,8 @@ export default {
         type: 'code'
       }
     }
-  }
+  },
+  argTypes: _objectSpread({}, onHoverArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
@@ -74,4 +84,54 @@ export var WithSubtitle = function WithSubtitle(args) {
   })))), ___EmotionJSX(Separator, {
     margin: 0
   }));
+};
+export var WithHoverHandlers = function WithHoverHandlers(args) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var handleHoverChange = function handleHoverChange() {
+    setIsHovered(function (previousIsHovered) {
+      return !previousIsHovered;
+    });
+  };
+  var sx = function sx(shouldTranslate) {
+    return {
+      transform: "".concat(shouldTranslate ? 'translate(15px)' : 'translate(0)')
+    };
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
+    margin: 0
+  }), ___EmotionJSX(ListItem, _extends({}, args, {
+    onHoverEnd: handleHoverChange,
+    onHoverStart: handleHoverChange
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: AccountIcon,
+    alignSelf: "center",
+    mr: "sm",
+    color: "accent.40",
+    size: 32
+  }), ___EmotionJSX(Box, {
+    sx: sx(isHovered)
+  }, ___EmotionJSX(Text, {
+    variant: "itemTitle"
+  }, "Fons Vernall"), ___EmotionJSX(Text, {
+    variant: "itemSubtitle",
+    mt: 1
+  }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, ___EmotionJSX(IconButton, {
+    size: 26
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: 20,
+    color: "neutral.20"
+  })))), ___EmotionJSX(Separator, {
+    margin: 0
+  }));
 };

package/lib/components/ListItem/ListItem.test.js

@@ -1,16 +1,20 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import ListItem from './ListItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testTitle = 'Test Title';
+var TEST_ID = 'ListItem-testid';
 var defaultProps = {
   title: testTitle
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ListItem, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(ListItem, _extends({}, defaultProps, props, {
+    "data-testid": TEST_ID
+  })));
 };
 
 // Need to be added to each test file to test accessibility using axe.
@@ -22,15 +26,46 @@ axeTest(getComponent, {
     }
   }
 });
-test('renders ListItem component title', function () {
-  getComponent();
-  var title = screen.getByRole('listitem');
-  expect(title).toBeInTheDocument();
-});
-test('renders ListItem component with selected state', function () {
-  getComponent({
-    isSelected: true
+describe('ListItem', function () {
+  test('renders ListItem component title', function () {
+    getComponent();
+    var title = screen.getByTestId(TEST_ID);
+    expect(title).toBeInTheDocument();
+  });
+  test('renders ListItem component with selected state', function () {
+    getComponent({
+      isSelected: true
+    });
+    var title = screen.getByTestId(TEST_ID);
+    expect(title).toHaveClass('is-selected');
+  });
+  describe('when hovered', function () {
+    var onHoverTest;
+    beforeEach(function () {
+      onHoverTest = jest.fn();
+    });
+    test('it calls the onHoverChange callback', function () {
+      getComponent({
+        onHoverChange: onHoverTest
+      });
+      userEvent.hover(screen.getByTestId(TEST_ID));
+      expect(onHoverTest).toHaveBeenCalled();
+    });
+    test('it calls the onHoverStart callback', function () {
+      getComponent({
+        onHoverStart: onHoverTest
+      });
+      userEvent.hover(screen.getByTestId(TEST_ID));
+      expect(onHoverTest).toHaveBeenCalled();
+    });
+    test('it calls the onHoverEnd callback when unhovered', function () {
+      getComponent({
+        onHoverEnd: onHoverTest
+      });
+      var listItem = screen.getByTestId(TEST_ID);
+      userEvent.hover(listItem);
+      userEvent.unhover(listItem);
+      expect(onHoverTest).toHaveBeenCalled();
+    });
   });
-  var title = screen.getByRole('listitem');
-  expect(title).toHaveClass('is-selected');
 });

package/lib/components/ListView/ListView.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["disabledKeys", "loadingState", "onLoadMore", "onSelectionChange", "selectionMode", "selectionStyle"];
+var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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; }
@@ -69,9 +69,12 @@ export function useListLayout(state) {
 
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   var disabledKeys = props.disabledKeys,
+    _props$isHoverable = props.isHoverable,
+    isHoverable = _props$isHoverable === void 0 ? true : _props$isHoverable,
     loadingState = props.loadingState,
     onLoadMore = props.onLoadMore,
     onSelectionChange = props.onSelectionChange,
+    selectedKeys = props.selectedKeys,
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
     others = _objectWithoutProperties(props, _excluded);
@@ -131,6 +134,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   }), function (type, item) {
     if (type === 'item') {
       return ___EmotionJSX(ListViewItem, {
+        isHoverable: isHoverable,
         item: item
       });
     }
@@ -155,6 +159,8 @@ ListView.propTypes = {
   items: isIterableProp,
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
+  /** Whether ListView should handle hover state (defaults to true) */
+  isHoverable: PropTypes.bool,
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
   /** Identifies the element (or elements) that labels the current element. */

package/lib/components/ListViewItem/ListViewItem.js

@@ -16,6 +16,7 @@ var ListViewItem = function ListViewItem(props) {
     _props$item$props$has = _props$item$props.hasSeparator,
     hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
     hasInsetSeparator = _props$item$props.hasInsetSeparator,
+    isHoverable = props.isHoverable,
     className = props.className;
   var dataId = item.props['data-id'];
   var _useContext = useContext(ListViewContext),
@@ -44,7 +45,7 @@ var ListViewItem = function ListViewItem(props) {
   var isSelected = state.selectionManager.isSelected(item.key);
   var mergedProps = mergeProps(raRowProps, hoverProps, focusWithinProps, focusProps);
   var _useStatusClasses = useStatusClasses(className, {
-      isHovered: isSelectable && isHovered,
+      isHovered: isSelectable && isHovered && isHoverable,
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
@@ -81,6 +82,7 @@ ListViewItem.propTypes = {
       hasSeparator: PropTypes.bool,
       hasInsetSeparator: PropTypes.bool
     })
-  })
+  }),
+  isHoverable: PropTypes.bool
 };
 export default ListViewItem;

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

@@ -29,7 +29,7 @@ var container = {
   },
   '&.has-separator': {
     borderBottom: '1px solid',
-    borderBottomColor: 'line.hairline'
+    borderBottomColor: 'line.light'
   }
 };
 var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
@@ -43,7 +43,7 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
       right: 0,
       bottom: 0,
       borderBottom: '1px solid',
-      borderBottomColor: 'line.hairline'
+      borderBottomColor: 'line.light'
     },
     '&.is-focused': {
       '&:after': {

package/lib/components/Menu/Menu.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["isDisabled", "onAction", "onSelectionChange", "isNotFocusedOnHover"];
+var _excluded = ["isDisabled", "isNotFocusedOnHover", "onAction", "onHoverChange", "onHoverEnd", "onHoverStart", "onSelectionChange"];
 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; }
@@ -17,11 +17,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useFocusRing, useMenu } from 'react-aria';
 import { useTreeState } from 'react-stately';
+import { useHover } from '@react-aria/interactions';
 import { useSyncRef } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { MenuContext } from '../../context/MenuContext';
 import { usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { onHoverPropTypes } from '../../utils/devUtils/props/hoverProps';
 import Box from '../Box';
 import MenuItem from '../MenuItem';
 
@@ -35,12 +37,21 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var isDisabled = props.isDisabled,
+    isNotFocusedOnHover = props.isNotFocusedOnHover,
     onAction = props.onAction,
+    onHoverChange = props.onHoverChange,
+    onHoverEnd = props.onHoverEnd,
+    onHoverStart = props.onHoverStart,
     onSelectionChange = props.onSelectionChange,
-    isNotFocusedOnHover = props.isNotFocusedOnHover,
     others = _objectWithoutProperties(props, _excluded);
   var contextProps = useContext(MenuContext);
   var completeProps = _objectSpread({}, mergeProps(contextProps, props));
+  var _useHover = useHover({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
+    hoverProps = _useHover.hoverProps;
   var state = useTreeState(completeProps);
   var menuRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -63,7 +74,7 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: menuRef,
     variant: "menu",
     "aria-orientation": ORIENTATION.VERTICAL
-  }, others, mergeProps(focusProps, menuProps)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+  }, others, mergeProps(focusProps, menuProps, hoverProps)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(MenuItem, {
       key: item.key,
       item: item,
@@ -75,7 +86,7 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }));
 });
-Menu.propTypes = {
+Menu.propTypes = _objectSpread({
   /** The type of selection that is allowed. */
   selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
   /**
@@ -126,7 +137,7 @@ Menu.propTypes = {
    * extended description for the object.
    */
   'aria-details': PropTypes.string
-};
+}, onHoverPropTypes);
 Menu.defaultProps = {
   selectionMode: 'none',
   isDisabled: false

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

@@ -1,7 +1,19 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+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 _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+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; }
 import React from 'react';
 import { Item } from 'react-stately';
+import { onHoverArgTypes } from '../../utils/devUtils/props/hoverProps';
 import Text from '../Text';
 import Menu from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -18,7 +30,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     selectionMode: {},
     isDisabled: {},
     isNotFocusedOnHover: {},
@@ -62,7 +74,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, onHoverArgTypes)
 };
 export var Default = function Default(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));

package/lib/components/SwitchField/SwitchField.js

@@ -67,9 +67,11 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     pressProps = _usePress.pressProps;
   var whitelistedProps = omit(props, _Object$keys(others));
-  var _useSwitch = useSwitch(_objectSpread({
+  var _useSwitch = useSwitch(_objectSpread(_objectSpread({
       children: label
-    }, whitelistedProps), state, switchRef),
+    }, whitelistedProps), {}, {
+      'aria-label': 'switch-field'
+    }), state, switchRef),
     inputProps = _useSwitch.inputProps;
   var statusClasses = {
     isSelected: inputProps.checked

package/lib/recipes/LinkedListView.stories.js

@@ -378,7 +378,7 @@ export var Default = function Default(_ref) {
               right: 0,
               bottom: 0,
               borderBottom: '1px solid',
-              borderBottomColor: 'line.hairline'
+              borderBottomColor: 'line.light'
             }
           }
         }