@pingux/astro 2.3.0-alpha.3 → 2.3.0-alpha.5

package/lib/cjs/components/CollapsiblePanel/CollapsiblePanel.js

@@ -58,7 +58,7 @@ var CollapsiblePanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     className: classNames,
     "data-testid": "collapsible-panel",
     ref: ref,
-    tabIndex: 0,
+    tabIndex: -1,
     variant: "collapsiblePanel.content"
   }, mergedProps, others), (0, _react2.jsx)(_.Box, {
     isRow: true,

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles.js

@@ -33,9 +33,6 @@ var button = {
       outlineColor: 'focus',
       outlineOffset: '1px'
     },
-    '&:focus-visible': {
-      outline: 'none'
-    },
     '&.is-pressed': {
       color: 'accent.20',
       textDecoration: 'none'

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

@@ -97,6 +97,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     hoveredItem = _useState2[0],
     setHoveredItem = _useState2[1];
   var isLoading = loadingState === _loadingStates["default"].LOADING_MORE || loadingState === _loadingStates["default"].LOADING;
+  var isFocusable = selectionMode !== 'none';
   var renderWrapper = function renderWrapper(parent, reusableView) {
     return (0, _react2.jsx)(_virtualizer.VirtualizerItem, {
       key: reusableView.key,
@@ -157,12 +158,15 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     collection: collection,
     transitionDuration: 0
   }, others, {
-    onFocus: onFocus,
-    onScroll: resetHoverState
+    onFocus: isFocusable && onFocus,
+    onScroll: resetHoverState,
+    tabIndex: isFocusable ? 0 : -1,
+    shouldUseVirtualFocus: !isFocusable
   }), function (type, item) {
     if (type === 'item') {
       return (0, _react2.jsx)(_ListViewItem["default"], {
         isHoverable: isHoverable,
+        isFocusable: isFocusable,
         item: item
       });
     }

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

@@ -347,4 +347,25 @@ test('list view reset hover on item when scroll', function () {
     }
   });
   expect(listItem[0]).not.toHaveClass('is-hovered');
+});
+test('list view item should not receive focus when selectionMode is "none"', function () {
+  var onFocus = jest.fn();
+  getComponent({
+    onFocus: onFocus,
+    selectionMode: 'none'
+  });
+  var options = _testWrapper.screen.getAllByRole('gridcell');
+  _userEvent["default"].tab();
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(options[0]).not.toHaveClass('is-focused');
+});
+test('list view item should receive focus when selectionMode is default or a value other than "none"', function () {
+  var onFocus = jest.fn();
+  getComponent({
+    onFocus: onFocus
+  });
+  var options = _testWrapper.screen.getAllByRole('gridcell');
+  _userEvent["default"].tab();
+  expect(onFocus).toHaveBeenCalled();
+  expect(options[0]).toHaveClass('is-focused');
 });

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

@@ -1,15 +1,22 @@
 "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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
@@ -21,6 +28,8 @@ var _ListViewContext = require("../ListView/ListViewContext");
 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 ListViewItem = function ListViewItem(props) {
   var item = props.item,
     _props$item$props = props.item.props,
@@ -30,6 +39,7 @@ var ListViewItem = function ListViewItem(props) {
     hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
     hasInsetSeparator = _props$item$props.hasInsetSeparator,
     isHoverable = props.isHoverable,
+    isFocusable = props.isFocusable,
     className = props.className;
   var dataId = item.props['data-id'];
   var _useContext = (0, _react.useContext)(_ListViewContext.ListViewContext),
@@ -60,7 +70,7 @@ var ListViewItem = function ListViewItem(props) {
     raRowProps = _useListItem.rowProps,
     gridCellProps = _useListItem.gridCellProps;
   var isSelected = state.selectionManager.isSelected(item.key);
-  var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, focusWithinProps, focusProps);
+  var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {});
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
@@ -100,7 +110,8 @@ ListViewItem.propTypes = {
       hasInsetSeparator: _propTypes["default"].bool
     })
   }),
-  isHoverable: _propTypes["default"].bool
+  isHoverable: _propTypes["default"].bool,
+  isFocusable: _propTypes["default"].bool
 };
 var _default = ListViewItem;
 exports["default"] = _default;

package/lib/components/CollapsiblePanel/CollapsiblePanel.js

@@ -45,7 +45,7 @@ var CollapsiblePanel = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames,
     "data-testid": "collapsible-panel",
     ref: ref,
-    tabIndex: 0,
+    tabIndex: -1,
     variant: "collapsiblePanel.content"
   }, mergedProps, others), ___EmotionJSX(Box, {
     isRow: true,

package/lib/components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles.js

@@ -26,9 +26,6 @@ var button = {
       outlineColor: 'focus',
       outlineOffset: '1px'
     },
-    '&:focus-visible': {
-      outline: 'none'
-    },
     '&.is-pressed': {
       color: 'accent.20',
       textDecoration: 'none'

package/lib/components/ListView/ListView.js

@@ -84,6 +84,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     hoveredItem = _useState2[0],
     setHoveredItem = _useState2[1];
   var isLoading = loadingState === loadingStates.LOADING_MORE || loadingState === loadingStates.LOADING;
+  var isFocusable = selectionMode !== 'none';
   var renderWrapper = function renderWrapper(parent, reusableView) {
     return ___EmotionJSX(VirtualizerItem, {
       key: reusableView.key,
@@ -144,12 +145,15 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     collection: collection,
     transitionDuration: 0
   }, others, {
-    onFocus: onFocus,
-    onScroll: resetHoverState
+    onFocus: isFocusable && onFocus,
+    onScroll: resetHoverState,
+    tabIndex: isFocusable ? 0 : -1,
+    shouldUseVirtualFocus: !isFocusable
   }), function (type, item) {
     if (type === 'item') {
       return ___EmotionJSX(ListViewItem, {
         isHoverable: isHoverable,
+        isFocusable: isFocusable,
         item: item
       });
     }

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

@@ -344,4 +344,25 @@ test('list view reset hover on item when scroll', function () {
     }
   });
   expect(listItem[0]).not.toHaveClass('is-hovered');
+});
+test('list view item should not receive focus when selectionMode is "none"', function () {
+  var onFocus = jest.fn();
+  getComponent({
+    onFocus: onFocus,
+    selectionMode: 'none'
+  });
+  var options = screen.getAllByRole('gridcell');
+  userEvent.tab();
+  expect(onFocus).not.toHaveBeenCalled();
+  expect(options[0]).not.toHaveClass('is-focused');
+});
+test('list view item should receive focus when selectionMode is default or a value other than "none"', function () {
+  var onFocus = jest.fn();
+  getComponent({
+    onFocus: onFocus
+  });
+  var options = screen.getAllByRole('gridcell');
+  userEvent.tab();
+  expect(onFocus).toHaveBeenCalled();
+  expect(options[0]).toHaveClass('is-focused');
 });

package/lib/components/ListViewItem/ListViewItem.js

@@ -1,4 +1,15 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+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";
+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, { useContext, useRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover } from '@react-aria/interactions';
@@ -17,6 +28,7 @@ var ListViewItem = function ListViewItem(props) {
     hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
     hasInsetSeparator = _props$item$props.hasInsetSeparator,
     isHoverable = props.isHoverable,
+    isFocusable = props.isFocusable,
     className = props.className;
   var dataId = item.props['data-id'];
   var _useContext = useContext(ListViewContext),
@@ -47,7 +59,7 @@ var ListViewItem = function ListViewItem(props) {
     raRowProps = _useListItem.rowProps,
     gridCellProps = _useListItem.gridCellProps;
   var isSelected = state.selectionManager.isSelected(item.key);
-  var mergedProps = mergeProps(raRowProps, hoverProps, focusWithinProps, focusProps);
+  var mergedProps = mergeProps(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {});
   var _useStatusClasses = useStatusClasses(className, {
       isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
@@ -87,6 +99,7 @@ ListViewItem.propTypes = {
       hasInsetSeparator: PropTypes.bool
     })
   }),
-  isHoverable: PropTypes.bool
+  isHoverable: PropTypes.bool,
+  isFocusable: PropTypes.bool
 };
 export default ListViewItem;

package/package.json

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