@pingux/astro 2.0.4-alpha.2 → 2.0.4-alpha.3

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

@@ -19,6 +19,7 @@ exports.useListLayout = useListLayout;
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _i18n = require("@react-aria/i18n");
@@ -91,6 +92,10 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hoveredItem = _useState2[0],
+    setHoveredItem = _useState2[1];
   var isLoading = loadingState === _loadingStates["default"].LOADING_MORE || loadingState === _loadingStates["default"].LOADING;
   var renderWrapper = function renderWrapper(parent, reusableView) {
     return (0, _react2.jsx)(_virtualizer.VirtualizerItem, {
@@ -108,6 +113,10 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _list2.useListState)(_objectSpread(_objectSpread({}, props), {}, {
     selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
+  state.hover = {
+    hoveredItem: hoveredItem,
+    setHoveredItem: setHoveredItem
+  };
   var collection = state.collection,
     selectionManager = state.selectionManager;
   var layout = useListLayout(state);
@@ -127,6 +136,11 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       others.onFocus(e);
     }
   };
+
+  // This code removes hover when scrolling ListView in the Firefox browser.
+  var resetHoverState = function resetHoverState() {
+    state.hover.setHoveredItem(null);
+  };
   return (0, _react2.jsx)(_ListViewContext.ListViewContext.Provider, {
     value: {
       state: state
@@ -143,7 +157,8 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     collection: collection,
     transitionDuration: 0
   }, others, {
-    onFocus: onFocus
+    onFocus: onFocus,
+    onScroll: resetHoverState
   }), function (type, item) {
     if (type === 'item') {
       return (0, _react2.jsx)(_ListViewItem["default"], {

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

@@ -333,4 +333,18 @@ test('list view not receive focus when click on checkbox', function () {
   expect(listItem[0]).not.toHaveClass('is-focused');
   checkbox[0].click();
   expect(listItem[0]).not.toHaveClass('is-focused');
+});
+test('list view reset hover on item when scroll', function () {
+  getComponent();
+  var listView = _testWrapper.screen.getAllByRole('grid');
+  var listItem = _testWrapper.screen.getAllByRole('gridcell');
+  expect(listItem[0]).not.toHaveClass('is-hovered');
+  _userEvent["default"].hover(listItem[0]);
+  expect(listItem[0]).toHaveClass('is-hovered');
+  _testWrapper.fireEvent.scroll(listView[0], {
+    target: {
+      scrollY: 100
+    }
+  });
+  expect(listItem[0]).not.toHaveClass('is-hovered');
 });

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

@@ -45,7 +45,11 @@ var ListViewItem = function ListViewItem(props) {
   var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
     focusProps = _useFocusRing2.focusProps,
     isFocusVisible = _useFocusRing2.isFocusVisible;
-  var _useHover = (0, _interactions.useHover)({}),
+  var _useHover = (0, _interactions.useHover)({
+      onHoverStart: function onHoverStart() {
+        state.hover.setHoveredItem(item.key);
+      }
+    }),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useListItem = (0, _list.useListItem)({
@@ -58,7 +62,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 && isHoverable,
+      isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,

package/lib/components/ListView/ListView.js

@@ -8,12 +8,13 @@ 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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 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; }
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useCollator } from '@react-aria/i18n';
 import { useList } from '@react-aria/list';
 import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
@@ -78,6 +79,10 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
     others = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveredItem = _useState2[0],
+    setHoveredItem = _useState2[1];
   var isLoading = loadingState === loadingStates.LOADING_MORE || loadingState === loadingStates.LOADING;
   var renderWrapper = function renderWrapper(parent, reusableView) {
     return ___EmotionJSX(VirtualizerItem, {
@@ -95,6 +100,10 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useListState(_objectSpread(_objectSpread({}, props), {}, {
     selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
+  state.hover = {
+    hoveredItem: hoveredItem,
+    setHoveredItem: setHoveredItem
+  };
   var collection = state.collection,
     selectionManager = state.selectionManager;
   var layout = useListLayout(state);
@@ -114,6 +123,11 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
       others.onFocus(e);
     }
   };
+
+  // This code removes hover when scrolling ListView in the Firefox browser.
+  var resetHoverState = function resetHoverState() {
+    state.hover.setHoveredItem(null);
+  };
   return ___EmotionJSX(ListViewContext.Provider, {
     value: {
       state: state
@@ -130,7 +144,8 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     collection: collection,
     transitionDuration: 0
   }, others, {
-    onFocus: onFocus
+    onFocus: onFocus,
+    onScroll: resetHoverState
   }), function (type, item) {
     if (type === 'item') {
       return ___EmotionJSX(ListViewItem, {

package/lib/components/ListView/ListView.test.js

@@ -18,7 +18,7 @@ import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import _ from 'lodash';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import CheckboxField from '../CheckboxField';
 import ListView from './ListView';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -330,4 +330,18 @@ test('list view not receive focus when click on checkbox', function () {
   expect(listItem[0]).not.toHaveClass('is-focused');
   checkbox[0].click();
   expect(listItem[0]).not.toHaveClass('is-focused');
+});
+test('list view reset hover on item when scroll', function () {
+  getComponent();
+  var listView = screen.getAllByRole('grid');
+  var listItem = screen.getAllByRole('gridcell');
+  expect(listItem[0]).not.toHaveClass('is-hovered');
+  userEvent.hover(listItem[0]);
+  expect(listItem[0]).toHaveClass('is-hovered');
+  fireEvent.scroll(listView[0], {
+    target: {
+      scrollY: 100
+    }
+  });
+  expect(listItem[0]).not.toHaveClass('is-hovered');
 });

package/lib/components/ListViewItem/ListViewItem.js

@@ -32,7 +32,11 @@ var ListViewItem = function ListViewItem(props) {
   var _useFocusRing2 = useFocusRing(),
     focusProps = _useFocusRing2.focusProps,
     isFocusVisible = _useFocusRing2.isFocusVisible;
-  var _useHover = useHover({}),
+  var _useHover = useHover({
+      onHoverStart: function onHoverStart() {
+        state.hover.setHoveredItem(item.key);
+      }
+    }),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useListItem = useListItem({
@@ -45,7 +49,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 && isHoverable,
+      isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,

package/package.json

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