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

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<<<<<<< HEAD
+=======
+## [1.42.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.0...@pingux/astro@1.42.1) (2023-02-16)
+
+
+### Bug Fixes
+
+* [UIP-6013] List and Panel Recipe Style Fixes ([c9d69b9](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c9d69b9014889263e0ea16305128737ee59c9a1f))
+
+
+
+
+
+>>>>>>> 144c0d159c6dc7525c2b8d6b1ecb29edecf25f6a
 # [1.42.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.41.0...@pingux/astro@1.42.0) (2023-02-13)
 
 

package/lib/cjs/components/Badge/Badge.stories.js

@@ -23,7 +23,7 @@ var _Badge = _interopRequireDefault(require("./Badge.mdx"));
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Badge',
+  title: 'Components/Badge',
   component: _["default"],
   argTypes: {
     bg: {
@@ -177,7 +177,7 @@ var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
     }
   }, (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "delete",
-    variant: "buttons.chipWithSlotDeleteButton"
+    variant: "badgeDeleteButton"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CloseIcon["default"],
     size: 14

package/lib/cjs/components/Badge/Badge.styles.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deleteButton = exports["default"] = exports.baseBadge = exports.badgeWithSlotDeleteButton = exports.badgeDeleteButton = void 0;
+exports.deleteButton = exports["default"] = exports.baseBadge = exports.badgeDeleteButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Buttons = require("../Button/Buttons.styles");
 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; }
@@ -94,23 +94,11 @@ var deleteButton = {
 };
 exports.deleteButton = deleteButton;
 var badgeDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
-  '&.is-focused': _objectSpread({
-    bg: 'accent.40'
-  }, _Buttons.focusWithCroppedOutline),
-  '&.is-hovered': {
-    bg: 'accent.40'
-  },
-  '&.is-pressed': {
-    bg: 'accent.20',
-    borderColor: 'accent.20'
-  }
-});
-exports.badgeDeleteButton = badgeDeleteButton;
-var badgeWithSlotDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {}, {
+  outline: 'none',
   path: {
     fill: 'neutral.40'
   },
-  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-focused': _objectSpread({}, _Buttons.focusWithCroppedOutline),
   '&.is-hovered': {
     backgroundColor: '#e5e9f8 !important',
     path: {
@@ -124,7 +112,7 @@ var badgeWithSlotDeleteButton = _objectSpread(_objectSpread({}, deleteButton), {
     bg: '#4462ED !important'
   }
 });
-exports.badgeWithSlotDeleteButton = badgeWithSlotDeleteButton;
+exports.badgeDeleteButton = badgeDeleteButton;
 var countDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
   width: 'fit-content',
   minWidth: '17px',
@@ -156,7 +144,6 @@ var _default = {
   deleteButton: deleteButton,
   countBadge: countBadge,
   countNeutral: countNeutral,
-  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
   badgeDeleteButton: badgeDeleteButton
 };
 exports["default"] = _default;

package/lib/cjs/components/Button/Button.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TextIconButton = exports.InlineButton = exports.FilterButton = exports.Disabled = exports.Default = exports.ColorBlockButton = void 0;
+exports["default"] = exports.TextIconButton = exports.Primary = exports.InlineButton = exports.FilterButton = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -25,7 +25,7 @@ delete variants.ICON_BUTTON;
 delete variants.INVERTED;
 
 // add designer approved variants for devs to use here
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success'];
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 var _default = {
   title: 'Components/Button',
   component: _index.Button,
@@ -136,4 +136,16 @@ var FilterButton = function FilterButton() {
     icon: _FilterIcon["default"]
   })));
 };
-exports.FilterButton = FilterButton;
+exports.FilterButton = FilterButton;
+var Critical = function Critical() {
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+exports.Critical = Critical;
+var Primary = function Primary() {
+  return (0, _react2.jsx)(_index.Button, {
+    variant: "primary"
+  }, "Button Text");
+};
+exports.Primary = Primary;

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

@@ -11,7 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 var _prismjs = _interopRequireDefault(require("prismjs"));
 require("prismjs/components/prism-powershell");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _ = require("../..");
 var _CodeView = _interopRequireDefault(require("./CodeView"));
 var _CodeView2 = _interopRequireDefault(require("./CodeView.mdx"));
 var _react2 = require("@emotion/react");
@@ -55,21 +54,13 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), (0, _react2.jsx)(_CodeView["default"], args));
+  return (0, _react2.jsx)(_CodeView["default"], args);
 };
 exports.Default = Default;
 var WithLineNumbers = function WithLineNumbers() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Text, {
-    sx: {
-      fontWeight: 2
-    }
-  }, "JSON"), (0, _react2.jsx)(_CodeView["default"], {
+  return (0, _react2.jsx)(_CodeView["default"], {
     hasLineNumbers: true
-  }, code));
+  }, code);
 };
 exports.WithLineNumbers = WithLineNumbers;
 WithLineNumbers.parameters = {

package/lib/cjs/components/ColorField/ColorField.js

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

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

@@ -49,4 +49,19 @@ test('will call onChange with arguments if provided', function () {
   _userEvent["default"].clear(hexInput);
   _userEvent["default"].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 = _testWrapper.screen.getByRole('button');
+  _userEvent["default"].click(button);
+  // should be open now
+  var hexLabelElement = _testWrapper.screen.queryByText(hexLabel);
+  expect(hexLabelElement).toBeInTheDocument();
+  // click the popover container, which has caused closing in regressions
+  _userEvent["default"].click(_testWrapper.screen.queryByRole('presentation'));
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
 });

package/lib/cjs/components/CopyText/CopyButton.js

@@ -26,7 +26,8 @@ var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "copyButton"
   }, (0, _lodash.omit)(props, 'iconProps')), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: _ContentCopyIcon["default"],
-    size: 15
+    size: "xs",
+    color: "text.secondary"
   }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
 CopyButton.propTypes = {

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

@@ -89,7 +89,7 @@ var SVGIcons = function SVGIcons() {
   return (0, _react2.jsx)(_index.Icon, {
     icon: SVGComponent,
     color: "active",
-    size: 40
+    size: "sm"
   });
 };
 exports.SVGIcons = SVGIcons;

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

@@ -145,7 +145,7 @@ var _default = {
   badge: {
     deleteButton: _Badge.deleteButton
   },
-  badgeWithSlotDeleteButton: _Badge.badgeWithSlotDeleteButton,
+  badgeDeleteButton: _Badge.badgeDeleteButton,
   copyButton: _CopyText.copyButton,
   hintButton: _objectSpread(_objectSpread({}, base), _HelpHint.hintButton),
   inverted: inverted,

package/lib/cjs/components/ListItem/ListItem.js

@@ -1,37 +1,54 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _interactions = require("@react-aria/interactions");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
+var _hoverProps = require("../../utils/devUtils/props/hoverProps");
 var _Box = _interopRequireDefault(require("../Box/Box"));
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "isSelected"];
+var _excluded = ["children", "className", "isHovered", "isSelected", "onHoverChange", "onHoverEnd", "onHoverStart"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
 /**
  * List Item component.
  * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
 */
-var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    isSelected = props.isSelected,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useHover = (0, _interactions.useHover)(props),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
+var ListItem = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useHover = (0, _interactions.useHover)({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
+    hoverProps = _useHover.hoverProps;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isHovered: isHovered,
       isSelected: isSelected
@@ -39,14 +56,12 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     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
    */
@@ -55,7 +70,7 @@ ListItem.propTypes = {
    * Sets the selected state of the ListItem
    */
   isSelected: _propTypes["default"].bool
-};
+}, _hoverProps.onHoverPropTypes);
 ListItem.defaultProps = {
   isSelected: false
 };

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

@@ -1,88 +1,152 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithSubtitle = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.WithSubtitle = exports.WithHoverHandlers = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
 var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
-var _Box = _interopRequireDefault(require("../Box"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _Separator = _interopRequireDefault(require("../Separator"));
-var _Text = _interopRequireDefault(require("../Text"));
-var _ListItem = _interopRequireDefault(require("./ListItem"));
+var _ = require("../..");
+var _hoverProps = require("../../utils/devUtils/props/hoverProps");
 var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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 _default = {
   title: 'Components/ListItem',
-  component: _ListItem["default"],
+  component: _.ListItem,
   parameters: {
     docs: {
       source: {
         type: 'code'
       }
     }
-  }
+  },
+  argTypes: _objectSpread({}, _hoverProps.onHoverArgTypes)
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Separator["default"], {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Separator, {
     margin: 0
-  }), (0, _react2.jsx)(_ListItem["default"], args, (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_.ListItem, args, (0, _react2.jsx)(_.Box, {
     isRow: true,
     mr: "auto",
     alignSelf: "center"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_.Icon, {
     icon: _AccountIcon["default"],
     alignSelf: "center",
     mr: "sm",
     color: "accent.40",
     size: 32
-  }), (0, _react2.jsx)(_Text["default"], {
+  }), (0, _react2.jsx)(_.Text, {
     variant: "itemTitle",
     alignSelf: "center"
-  }, "Fons Vernall")), (0, _react2.jsx)(_Box["default"], {
+  }, "Fons Vernall")), (0, _react2.jsx)(_.Box, {
     isRow: true,
     alignSelf: "center"
-  }, (0, _react2.jsx)(_IconButton["default"], null, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_.IconButton, null, (0, _react2.jsx)(_.Icon, {
     icon: _MoreVertIcon["default"],
     size: "sm",
     color: "neutral.20"
-  })))), (0, _react2.jsx)(_Separator["default"], {
+  })))), (0, _react2.jsx)(_.Separator, {
     margin: 0
   }));
 };
 exports.Default = Default;
 var WithSubtitle = function WithSubtitle(args) {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Separator["default"], {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Separator, {
     margin: 0
-  }), (0, _react2.jsx)(_ListItem["default"], args, (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_.ListItem, args, (0, _react2.jsx)(_.Box, {
     isRow: true,
     mr: "auto",
     alignSelf: "center"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_.Icon, {
     icon: _AccountIcon["default"],
     alignSelf: "center",
     mr: "sm",
     color: "accent.40",
     size: 32
-  }), (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_Text["default"], {
+  }), (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Text, {
     variant: "itemTitle"
-  }, "Fons Vernall"), (0, _react2.jsx)(_Text["default"], {
+  }, "Fons Vernall"), (0, _react2.jsx)(_.Text, {
     variant: "itemSubtitle",
     mt: 1
-  }, "fvernall0@google.it"))), (0, _react2.jsx)(_Box["default"], {
+  }, "fvernall0@google.it"))), (0, _react2.jsx)(_.Box, {
     isRow: true,
     alignSelf: "center"
-  }, (0, _react2.jsx)(_IconButton["default"], null, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_.IconButton, null, (0, _react2.jsx)(_.Icon, {
     icon: _MoreVertIcon["default"],
     size: "sm",
     color: "neutral.20"
-  })))), (0, _react2.jsx)(_Separator["default"], {
+  })))), (0, _react2.jsx)(_.Separator, {
     margin: 0
   }));
 };
-exports.WithSubtitle = WithSubtitle;
+exports.WithSubtitle = WithSubtitle;
+var WithHoverHandlers = function WithHoverHandlers(args) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_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 (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Separator, {
+    margin: 0
+  }), (0, _react2.jsx)(_.ListItem, (0, _extends2["default"])({}, args, {
+    onHoverEnd: handleHoverChange,
+    onHoverStart: handleHoverChange
+  }), (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_.Icon, {
+    icon: _AccountIcon["default"],
+    alignSelf: "center",
+    mr: "sm",
+    color: "accent.40",
+    size: 32
+  }), (0, _react2.jsx)(_.Box, {
+    sx: sx(isHovered)
+  }, (0, _react2.jsx)(_.Text, {
+    variant: "itemTitle"
+  }, "Fons Vernall"), (0, _react2.jsx)(_.Text, {
+    variant: "itemSubtitle",
+    mt: 1
+  }, "fvernall0@google.it"))), (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_.IconButton, {
+    size: 26
+  }, (0, _react2.jsx)(_.Icon, {
+    icon: _MoreVertIcon["default"],
+    size: 20,
+    color: "neutral.20"
+  })))), (0, _react2.jsx)(_.Separator, {
+    margin: 0
+  }));
+};
+exports.WithHoverHandlers = WithHoverHandlers;

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

@@ -4,16 +4,20 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _ListItem = _interopRequireDefault(require("./ListItem"));
 var _react3 = require("@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 (0, _react2.render)((0, _react3.jsx)(_ListItem["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _react2.render)((0, _react3.jsx)(_ListItem["default"], (0, _extends2["default"])({}, defaultProps, props, {
+    "data-testid": TEST_ID
+  })));
 };
 
 // Need to be added to each test file to test accessibility using axe.
@@ -25,15 +29,46 @@ var getComponent = function getComponent() {
     }
   }
 });
-test('renders ListItem component title', function () {
-  getComponent();
-  var title = _react2.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 = _react2.screen.getByTestId(TEST_ID);
+    expect(title).toBeInTheDocument();
+  });
+  test('renders ListItem component with selected state', function () {
+    getComponent({
+      isSelected: true
+    });
+    var title = _react2.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["default"].hover(_react2.screen.getByTestId(TEST_ID));
+      expect(onHoverTest).toHaveBeenCalled();
+    });
+    test('it calls the onHoverStart callback', function () {
+      getComponent({
+        onHoverStart: onHoverTest
+      });
+      _userEvent["default"].hover(_react2.screen.getByTestId(TEST_ID));
+      expect(onHoverTest).toHaveBeenCalled();
+    });
+    test('it calls the onHoverEnd callback when unhovered', function () {
+      getComponent({
+        onHoverEnd: onHoverTest
+      });
+      var listItem = _react2.screen.getByTestId(TEST_ID);
+      _userEvent["default"].hover(listItem);
+      _userEvent["default"].unhover(listItem);
+      expect(onHoverTest).toHaveBeenCalled();
+    });
   });
-  var title = _react2.screen.getByRole('listitem');
-  expect(title).toHaveClass('is-selected');
 });

package/lib/cjs/components/ListView/ListView.js

@@ -33,7 +33,7 @@ var _ListViewItem = _interopRequireDefault(require("../ListViewItem"));
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _ListViewContext = require("./ListViewContext");
 var _react2 = require("@emotion/react");
-var _excluded = ["disabledKeys", "loadingState", "onLoadMore", "onSelectionChange", "selectionMode", "selectionStyle"];
+var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -82,9 +82,12 @@ function useListLayout(state) {
 
 var ListView = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -144,6 +147,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }), function (type, item) {
     if (type === 'item') {
       return (0, _react2.jsx)(_ListViewItem["default"], {
+        isHoverable: isHoverable,
         item: item
       });
     }
@@ -168,6 +172,8 @@ ListView.propTypes = {
   items: _isIterable.isIterableProp,
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: _propTypes["default"].string,
+  /** Whether ListView should handle hover state (defaults to true) */
+  isHoverable: _propTypes["default"].bool,
   /** Defines a string value that labels the current element. */
   'aria-label': _propTypes["default"].string,
   /** Identifies the element (or elements) that labels the current element. */

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -29,6 +29,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 = (0, _react.useContext)(_ListViewContext.ListViewContext),
@@ -57,7 +58,7 @@ var ListViewItem = function ListViewItem(props) {
   var isSelected = state.selectionManager.isSelected(item.key);
   var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, focusWithinProps, focusProps);
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isHovered: isSelectable && isHovered,
+      isHovered: isSelectable && isHovered && isHoverable,
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
@@ -94,7 +95,8 @@ ListViewItem.propTypes = {
       hasSeparator: _propTypes["default"].bool,
       hasInsetSeparator: _propTypes["default"].bool
     })
-  })
+  }),
+  isHoverable: _propTypes["default"].bool
 };
 var _default = ListViewItem;
 exports["default"] = _default;