@pingux/astro 2.137.0 → 2.138.0-alpha.1

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

@@ -383,8 +383,8 @@ test('renders loader, if a loader component is passed in, and state is loading',
   _userEvent["default"].type(listView, '{arrowdown}', {
     skipClick: true
   });
-  var loaders = _testWrapper.screen.getAllByRole('alert');
-  expect(loaders).toHaveLength(2);
+  var loaders = _testWrapper.screen.getByRole('alert');
+  expect(loaders).toBeInTheDocument();
 });
 test('renders loader, if a loader component is passed in, and state is loadingMore', function () {
   getComponent({

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

@@ -52,8 +52,7 @@ var ListViewItem = function ListViewItem(props) {
   var _useFocusRing = (0, _reactAria.useFocusRing)({
       within: true
     }),
-    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
-    focusWithinProps = _useFocusRing.focusProps;
+    isFocusVisibleWithin = _useFocusRing.isFocusVisible;
   var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
     focusProps = _useFocusRing2.focusProps,
     isFocusVisible = _useFocusRing2.isFocusVisible;
@@ -79,13 +78,13 @@ var ListViewItem = function ListViewItem(props) {
     gridCellProps = _useGridListItem.gridCellProps,
     isPressed = _useGridListItem.isPressed;
   var isSelected = state.selectionManager.isSelected(item.key);
-  var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {}, {
+  var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, isFocusable ? _objectSpread({}, focusProps) : {}, {
     onPointerLeave: onPointerLeaveFunction
   });
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isHovered: isSelectable && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
-      isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
+      isFocused: isDisabled ? false : isFocusVisible,
       hasSeparator: hasSeparator,
       hasInsetSeparator: hasInsetSeparator,
       isPressed: isPressed,
@@ -109,7 +108,9 @@ var ListViewItem = function ListViewItem(props) {
     sx: {
       outline: 'none'
     }
-  }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_reactAria.FocusRing, {
+    focusRingClass: "is-focussed"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "div",
     variant: listItemVariant
   }, gridCellProps, {
@@ -122,7 +123,7 @@ var ListViewItem = function ListViewItem(props) {
     variant: "listViewItem.loaderContainer"
   }, (0, _react2.jsx)(_index.Loader, {
     color: "neutral.50"
-  }))));
+  })))));
 };
 ListViewItem.propTypes = {
   item: _propTypes["default"].shape({

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

@@ -377,8 +377,8 @@ test('renders loader, if a loader component is passed in, and state is loading',
   userEvent.type(listView, '{arrowdown}', {
     skipClick: true
   });
-  var loaders = screen.getAllByRole('alert');
-  expect(loaders).toHaveLength(2);
+  var loaders = screen.getByRole('alert');
+  expect(loaders).toBeInTheDocument();
 });
 test('renders loader, if a loader component is passed in, and state is loadingMore', function () {
   getComponent({

package/lib/components/ListView/ListViewItem.js

@@ -12,7 +12,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useContext, useRef } from 'react';
-import { mergeProps, useFocusRing, useGridListItem } from 'react-aria';
+import { FocusRing, mergeProps, useFocusRing, useGridListItem } from 'react-aria';
 import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
@@ -40,8 +40,7 @@ var ListViewItem = function ListViewItem(props) {
   var _useFocusRing = useFocusRing({
       within: true
     }),
-    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
-    focusWithinProps = _useFocusRing.focusProps;
+    isFocusVisibleWithin = _useFocusRing.isFocusVisible;
   var _useFocusRing2 = useFocusRing(),
     focusProps = _useFocusRing2.focusProps,
     isFocusVisible = _useFocusRing2.isFocusVisible;
@@ -67,13 +66,13 @@ var ListViewItem = function ListViewItem(props) {
     gridCellProps = _useGridListItem.gridCellProps,
     isPressed = _useGridListItem.isPressed;
   var isSelected = state.selectionManager.isSelected(item.key);
-  var mergedProps = mergeProps(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {}, {
+  var mergedProps = mergeProps(raRowProps, hoverProps, isFocusable ? _objectSpread({}, focusProps) : {}, {
     onPointerLeave: onPointerLeaveFunction
   });
   var _useStatusClasses = useStatusClasses(className, {
       isHovered: isSelectable && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
-      isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
+      isFocused: isDisabled ? false : isFocusVisible,
       hasSeparator: hasSeparator,
       hasInsetSeparator: hasInsetSeparator,
       isPressed: isPressed,
@@ -97,7 +96,9 @@ var ListViewItem = function ListViewItem(props) {
     sx: {
       outline: 'none'
     }
-  }), ___EmotionJSX(Box, _extends({
+  }), ___EmotionJSX(FocusRing, {
+    focusRingClass: "is-focussed"
+  }, ___EmotionJSX(Box, _extends({
     as: "div",
     variant: listItemVariant
   }, gridCellProps, {
@@ -110,7 +111,7 @@ var ListViewItem = function ListViewItem(props) {
     variant: "listViewItem.loaderContainer"
   }, ___EmotionJSX(Loader, {
     color: "neutral.50"
-  }))));
+  })))));
 };
 ListViewItem.propTypes = {
   item: PropTypes.shape({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.137.0",
+  "version": "2.138.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",