@pingux/astro 1.39.0-alpha.1 → 1.39.0-alpha.3

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/cjs/recipes/ListAndPanel.stories.js

@@ -379,6 +379,7 @@ var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
     variant: "inverted",
+    "aria-label": "pencil icon button",
     sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20

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/lib/recipes/ListAndPanel.stories.js

@@ -342,6 +342,7 @@ export var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
     variant: "inverted",
+    "aria-label": "pencil icon button",
     sx: sx.iconButton
   }, ___EmotionJSX(PencilIcon, {
     size: 20

package/package.json

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