@pingux/astro 1.42.1 → 1.42.2-alpha.0

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

@@ -1,17 +1,21 @@
 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 ListItem from './ListItem';
 import axeTest from '../../utils/testUtils/testAxe';
 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.
 
 
@@ -23,15 +27,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; }
@@ -71,9 +71,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);
@@ -141,6 +144,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   }), function (type, item) {
     if (type === 'item') {
       return ___EmotionJSX(ListViewItem, {
+        isHoverable: isHoverable,
         item: item
       });
     } else if (type === collectionTypes.LOADER) {
@@ -169,6 +173,9 @@ ListView.propTypes = {
   /** 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,
 

package/lib/components/ListViewItem/ListViewItem.js

@@ -18,6 +18,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'];
 
@@ -54,7 +55,7 @@ var ListViewItem = function ListViewItem(props) {
   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,
@@ -93,6 +94,7 @@ ListViewItem.propTypes = {
       hasSeparator: PropTypes.bool,
       hasInsetSeparator: PropTypes.bool
     })
-  })
+  }),
+  isHoverable: PropTypes.bool
 };
 export default ListViewItem;

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";
 
@@ -23,11 +23,13 @@ import { useMenu } from '@react-aria/menu';
 import { useTreeState } from '@react-stately/tree';
 import { useFocusRing } from '@react-aria/focus';
 import { useSyncRef, mergeProps } from '@react-aria/utils';
+import { useHover } from '@react-aria/interactions';
 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 { onHoverPropTypes } from '../../utils/devUtils/props/hoverProps';
 /**
  * Menu component intended to be used as a wrapper for MenuItem.
  * This component is typically used alongside others such as PopoverMenu.
@@ -40,15 +42,25 @@ 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');
@@ -74,7 +86,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,
@@ -86,7 +98,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']),
 
@@ -149,7 +161,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,8 +1,23 @@
+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 _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/collections';
 import Menu from '../Menu';
 import Text from '../Text';
+import { onHoverArgTypes } from '../../utils/devUtils/props/hoverProps';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Menu',
@@ -17,7 +32,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     selectionMode: {},
     isDisabled: {},
     isNotFocusedOnHover: {},
@@ -61,7 +76,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, onHoverArgTypes)
 };
 export var Default = function Default(_ref) {
   var args = _extends({}, _ref);

package/lib/components/SwitchField/SwitchField.js

@@ -74,9 +74,11 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   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 = {

package/lib/recipes/ListAndPanel.stories.js

@@ -8,7 +8,7 @@ import CloseIcon from 'mdi-react/CloseIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
 import PlusIcon from 'mdi-react/PlusIcon';
-import { Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import { Box, Icon, IconButton, Link, ListItem, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../';
 import { useOverlayPanelState } from '../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -137,7 +137,8 @@ var sx = {
   },
   listElement: {
     wrapper: {
-      minHeight: '60px'
+      minHeight: '60px',
+      pl: '14px'
     },
     iconWrapper: {
       mr: 'auto',
@@ -151,7 +152,7 @@ var sx = {
     avatar: {
       width: '25px',
       height: '25px',
-      mr: 'md'
+      mr: '14px'
     },
     title: {
       alignSelf: 'start',
@@ -164,16 +165,70 @@ var sx = {
       alignSelf: 'start'
     },
     menuWrapper: {
-      alignSelf: 'center'
+      alignSelf: 'center',
+      pr: '4px'
     }
   }
 };
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
+      isHoverable = _ref.isHoverable,
       onClosePanel = _ref.onClosePanel;
-  return ___EmotionJSX(Box, {
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var _useState3 = useState({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      mousePosition = _useState4[0],
+      setMousePosition = _useState4[1];
+
+  var listItemRef = useRef();
+
+  var handleMenuHoverEnd = function handleMenuHoverEnd() {
+    var currentPositionX = mousePosition.currentPositionX,
+        currentPositionY = mousePosition.currentPositionY;
+
+    var _listItemRef$current$ = listItemRef.current.getBoundingClientRect(),
+        height = _listItemRef$current$.height,
+        right = _listItemRef$current$.right,
+        top = _listItemRef$current$.top;
+
+    var hasMovedBackToRow = currentPositionY < top + height && currentPositionX < right;
+
+    if (hasMovedBackToRow) {
+      setIsHovered(true);
+      return;
+    }
+
+    setIsHovered(false);
+  };
+
+  var handleMouseMove = function handleMouseMove(e) {
+    setMousePosition({
+      currentPositionX: e.clientX,
+      currentPositionY: e.clientY
+    });
+  };
+
+  var handleHoveEnd = function handleHoveEnd() {
+    setIsHovered(false);
+  };
+
+  var handleHoveStart = function handleHoveStart() {
+    setIsHovered(true);
+  };
+
+  return ___EmotionJSX(ListItem, {
+    isHovered: isHoverable && isHovered,
     isRow: true,
+    onHoverEnd: handleHoveEnd,
+    onHoverStart: handleHoveStart,
+    onMouseMove: handleMouseMove,
+    ref: listItemRef,
     sx: sx.listElement.wrapper
   }, ___EmotionJSX(Box, {
     isRow: true,
@@ -202,7 +257,11 @@ var ListElement = function ListElement(_ref) {
   }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
     size: "md"
-  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+  })), ___EmotionJSX(Menu, {
+    onAction: handleHoveEnd,
+    onHoverEnd: handleMenuHoverEnd,
+    onHoverStart: handleHoveStart
+  }, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
     key: "disable"
@@ -218,15 +277,15 @@ var ListElement = function ListElement(_ref) {
 };
 
 export var Default = function Default() {
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedItemId = _useState2[0],
-      setSelectedItemId = _useState2[1];
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selectedItemId = _useState6[0],
+      setSelectedItemId = _useState6[1];
 
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedKeys = _useState4[0],
-      setSelectedKeys = _useState4[1];
+  var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedKeys = _useState8[0],
+      setSelectedKeys = _useState8[1];
 
   var _useOverlayPanelState = useOverlayPanelState(),
       panelState = _useOverlayPanelState.state,
@@ -254,9 +313,7 @@ export var Default = function Default() {
     }
   };
 
-  return ___EmotionJSX(Box, {
-    sx: sx.wrapper
-  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+  var title = ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     align: "center",
     isRow: true,
     mb: "xs",
@@ -283,7 +340,11 @@ export var Default = function Default() {
     sx: {
       fontSize: '13px'
     }
-  }, " Learn more"))), ___EmotionJSX(SearchField, {
+  }, " Learn more")));
+
+  return ___EmotionJSX(Box, {
+    sx: sx.wrapper
+  }, title, ___EmotionJSX(SearchField, {
     position: "fixed",
     mb: "lg",
     mt: "lg",
@@ -296,17 +357,19 @@ export var Default = function Default() {
     items: items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    isHoverable: false
   }, function (item) {
     return ___EmotionJSX(Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: true,
+      hasSeparator: item.hasSeparator,
       listItemProps: {
-        pl: 15,
-        minHeight: 75
+        minHeight: 75,
+        padding: 1
       }
     }, ___EmotionJSX(ListElement, {
+      isHoverable: true,
       item: item
     }));
   }), ___EmotionJSX(OverlayPanel, {

package/lib/styles/variants/boxes.js

@@ -69,7 +69,10 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'accent.99',
   outline: 'none',
   '&.is-selected': {
-    bg: 'white'
+    bg: 'white',
+    '& li': {
+      bg: 'white'
+    }
   },
   '&.is-hovered': {
     bg: 'white',

package/lib/utils/devUtils/props/hoverProps.js

@@ -0,0 +1,47 @@
+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";
+
+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 PropTypes from 'prop-types';
+var descriptions = {
+  onHoverStart: 'Handler that is called when a hover interaction starts.',
+  onHoverEnd: 'Handler that is called when a hover interaction ends.',
+  onHoverChange: 'Handler that is called when the hover state changes.'
+};
+export var baseDocSettings = {
+  type: {
+    summary: 'func'
+  },
+  control: {
+    type: null
+  },
+  table: {
+    category: 'Hover Handlers'
+  }
+};
+export var onHoverArgTypes = {
+  'onHoverStart': _objectSpread({
+    description: descriptions.onHoverStart
+  }, baseDocSettings),
+  'onHoverEnd': _objectSpread({
+    description: descriptions.onHoverEnd
+  }, baseDocSettings),
+  'onHoverChange': _objectSpread({
+    description: descriptions.onHoverChange
+  }, baseDocSettings)
+};
+export var onHoverPropTypes = {
+  onHoverStart: PropTypes.func,
+  onHoverEnd: PropTypes.func,
+  onHoverChange: PropTypes.func
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.42.1",
+  "version": "1.42.2-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",