@pingux/astro 1.39.0-alpha.2 → 1.39.0-alpha.4

package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js

@@ -172,7 +172,8 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       keyboardDelegate: keyboardDelegate
     }
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps, containerProps), {
-    ref: accordionGridRef
+    ref: accordionGridRef,
+    role: "treegrid"
   }), (0, _map["default"])(_context2 = (0, _from["default"])(state.collection)).call(_context2, function (item) {
     return (0, _react2.jsx)(_AccordionGridItem["default"], (0, _extends2["default"])({
       key: item.key,

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -102,7 +102,6 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onClick;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
-    role: "row",
     tabindex: "0"
   }, (0, _utils.mergeProps)(rowProps, others), {
     "aria-selected": isSelected,

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

@@ -127,7 +127,9 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         fill: chipBg
       }
     }
-  }, (0, _utils.mergeProps)(buttonProps, others, hoverProps, focusProps)), children);
+  }, (0, _utils.mergeProps)(buttonProps, others, hoverProps, focusProps), {
+    onPointerOver: hoverProps.onPointerEnter
+  }), children);
 
   if (title) {
     return (0, _react2.jsx)(_TooltipTrigger["default"], {

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

@@ -18,6 +18,8 @@ var _react2 = require("@testing-library/react");
 
 var _collections = require("@react-stately/collections");
 
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _ = _interopRequireDefault(require("."));
 
 var _index = require("../../index");
@@ -168,4 +170,20 @@ test('renders sections and items within section', function () {
   var options = _react2.screen.getAllByRole('option');
 
   expect(options.length).toBe(itemsWithSections[0].options.length);
+});
+test('should have is-focused class when hover', function () {
+  getSectionsComponent();
+
+  var options = _react2.screen.getAllByRole('option');
+
+  expect(options[0]).not.toHaveClass('is-focused');
+
+  _userEvent["default"].hover(options[0]);
+
+  expect(options[0]).toHaveClass('is-focused');
+
+  _userEvent["default"].hover(options[1]);
+
+  expect(options[0]).not.toHaveClass('is-focused');
+  expect(options[1]).toHaveClass('is-focused');
 });

package/lib/cjs/components/ListBox/Option.js

@@ -96,9 +96,17 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isSelected = _useOption.isSelected,
       isFocused = _useOption.isFocused;
 
+  var focused = isFocused || (state === null || state === void 0 ? void 0 : (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key;
+
+  var setFocusOnHover = function setFocusOnHover() {
+    if (!focused) {
+      state.selectionManager.setFocusedKey(item.key);
+    }
+  };
+
   var _useStatusClasses = (0, _hooks.useStatusClasses)(null, {
     isDisabled: isDisabled || isSeparator,
-    isFocused: isFocused || (state === null || state === void 0 ? void 0 : (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key,
+    isFocused: focused,
     isSelected: isSelected
   }),
       classNames = _useStatusClasses.classNames;
@@ -115,7 +123,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: optionRef,
     variant: "listBox.option",
     "data-id": dataId,
-    className: classNames
+    className: classNames,
+    onPointerOver: setFocusOnHover
   }, optionProps, others), isSelected && (0, _react2.jsx)(_Icon["default"], {
     icon: _CircleSmallIcon["default"]
   }), rendered);

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -130,7 +130,8 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       keyboardDelegate: keyboardDelegate
     }
   }, ___EmotionJSX(Box, _extends({}, mergeProps(gridProps, containerProps), {
-    ref: accordionGridRef
+    ref: accordionGridRef,
+    role: "treegrid"
   }), _mapInstanceProperty(_context2 = _Array$from(state.collection)).call(_context2, function (item) {
     return ___EmotionJSX(AccordionGridItem, _extends({
       key: item.key,

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -65,7 +65,6 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onClick;
   return ___EmotionJSX(Box, _extends({
     as: "div",
-    role: "row",
     tabindex: "0"
   }, mergeProps(rowProps, others), {
     "aria-selected": isSelected,

package/lib/components/IconButton/IconButton.js

@@ -90,7 +90,9 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
         fill: chipBg
       }
     }
-  }, mergeProps(buttonProps, others, hoverProps, focusProps)), children);
+  }, mergeProps(buttonProps, others, hoverProps, focusProps), {
+    onPointerOver: hoverProps.onPointerEnter
+  }), children);
 
   if (title) {
     return ___EmotionJSX(TooltipTrigger, {

package/lib/components/ListBox/ListBox.test.js

@@ -6,6 +6,7 @@ import { axe } from 'jest-axe';
 import { useListState } from '@react-stately/list';
 import { render, screen } from '@testing-library/react';
 import { Section } from '@react-stately/collections';
+import userEvent from '@testing-library/user-event';
 import ListBox from '.';
 import { Item } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -145,4 +146,14 @@ test('renders sections and items within section', function () {
   expect(section).toBeInTheDocument();
   var options = screen.getAllByRole('option');
   expect(options.length).toBe(itemsWithSections[0].options.length);
+});
+test('should have is-focused class when hover', function () {
+  getSectionsComponent();
+  var options = screen.getAllByRole('option');
+  expect(options[0]).not.toHaveClass('is-focused');
+  userEvent.hover(options[0]);
+  expect(options[0]).toHaveClass('is-focused');
+  userEvent.hover(options[1]);
+  expect(options[0]).not.toHaveClass('is-focused');
+  expect(options[1]).toHaveClass('is-focused');
 });

package/lib/components/ListBox/Option.js

@@ -58,9 +58,17 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
       isSelected = _useOption.isSelected,
       isFocused = _useOption.isFocused;
 
+  var focused = isFocused || (state === null || state === void 0 ? void 0 : (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key;
+
+  var setFocusOnHover = function setFocusOnHover() {
+    if (!focused) {
+      state.selectionManager.setFocusedKey(item.key);
+    }
+  };
+
   var _useStatusClasses = useStatusClasses(null, {
     isDisabled: isDisabled || isSeparator,
-    isFocused: isFocused || (state === null || state === void 0 ? void 0 : (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key,
+    isFocused: focused,
     isSelected: isSelected
   }),
       classNames = _useStatusClasses.classNames;
@@ -77,7 +85,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: optionRef,
     variant: "listBox.option",
     "data-id": dataId,
-    className: classNames
+    className: classNames,
+    onPointerOver: setFocusOnHover
   }, optionProps, others), isSelected && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon
   }), rendered);

package/package.json

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