@pingux/astro 1.20.1-alpha.0 → 1.21.0-alpha.2

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

@@ -35,21 +35,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _grid = require("@react-stately/grid");
-
-var _grid2 = require("@react-aria/grid");
+var _list = require("@react-aria/list");
 
 var _layout = require("@react-stately/layout");
 
-var _list = require("@react-stately/list");
+var _list2 = require("@react-stately/list");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -77,7 +71,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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) { (0, _defineProperty2["default"])(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; }
+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 collectionTypes = {
   ITEM: 'item',
@@ -138,82 +132,38 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return listViewRef.current;
   });
-
-  var _useListState = (0, _list.useListState)(props),
-      collection = _useListState.collection;
-
-  var _useLocale = (0, _i18n.useLocale)(),
-      direction = _useLocale.direction;
-
-  var collator = (0, _i18n.useCollator)({
-    usage: 'search',
-    sensitivity: 'base'
-  });
-  var gridCollection = (0, _react.useMemo)(function () {
-    var _context;
-
-    return new _grid.GridCollection({
-      columnCount: 1,
-      items: (0, _map["default"])(_context = (0, _from["default"])(collection)).call(_context, function (item) {
-        return _objectSpread(_objectSpread({}, item), {}, {
-          hasChildNodes: true,
-          childNodes: [{
-            key: "cell-".concat(item.key),
-            type: 'cell',
-            index: 0,
-            value: null,
-            level: 0,
-            rendered: null,
-            textValue: item.textValue,
-            hasChildNodes: false,
-            childNodes: []
-          }]
-        });
-      })
-    });
-  }, [collection]);
-  var state = (0, _grid.useGridState)(_objectSpread(_objectSpread({}, props), {}, {
-    collection: gridCollection,
-    focusMode: 'cell',
+  var state = (0, _list2.useListState)(_objectSpread(_objectSpread({}, props), {}, {
     selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
+  var collection = state.collection,
+      selectionManager = state.selectionManager;
   var layout = useListLayout(state);
-  var keyboardDelegate = (0, _react.useMemo)(function () {
-    return new _grid2.GridKeyboardDelegate({
-      collection: state.collection,
-      disabledKeys: state.disabledKeys,
-      ref: listViewRef,
-      direction: direction,
-      collator: collator
-    });
-  }, [state, listViewRef, direction, collator]);
 
-  var _useGrid = (0, _grid2.useGrid)(_objectSpread(_objectSpread({}, props), {}, {
+  var _useList = (0, _list.useList)(_objectSpread(_objectSpread({}, props), {}, {
     isVirtualized: true,
-    keyboardDelegate: keyboardDelegate,
+    keyboardDelegate: layout,
     loadingState: loadingState
   }), state, listViewRef),
-      gridProps = _useGrid.gridProps; // Sync loading state into the layout.
+      gridProps = _useList.gridProps; // Sync loading state into the layout.
 
 
   layout.isLoading = isLoading;
-  var focusedItem = gridCollection.getFirstKey();
+  var focusedKey = selectionManager.focusedKey;
   delete gridProps.onMouseDown;
   return (0, _react2.jsx)(_ListViewContext.ListViewContext.Provider, {
     value: {
-      state: state,
-      keyboardDelegate: keyboardDelegate
+      state: state
     }
   }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, gridProps, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
-    focusedKey: focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey,
+    focusedKey: focusedKey,
     renderWrapper: renderWrapper,
     sizeToFit: "height",
     scrollDirection: "vertical",
     layout: layout,
     isLoading: isLoading,
-    collection: gridCollection,
+    collection: collection,
     transitionDuration: 0
   }, others), function (type, item) {
     if (type === 'item') {

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

@@ -576,7 +576,7 @@ var ListElement = function ListElement(_ref) {
     "aria-label": "create-icon",
     size: 20
   }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_IconButton["default"], {
-    "aria-label": "create-icon",
+    "aria-label": "actions-icon",
     size: 20
   }, (0, _react2.jsx)(_MoreVertIcon["default"], null))));
 };
@@ -611,7 +611,7 @@ var Default = function Default(_ref2) {
       "aria-label": "create-icon",
       size: 20
     }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_IconButton["default"], {
-      "aria-label": "create-icon",
+      "aria-label": "actions-icon",
       size: 20
     }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
   });

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

@@ -18,8 +18,6 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("@react-aria/utils");
@@ -28,12 +26,10 @@ var _focus = require("@react-aria/focus");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _grid = require("@react-aria/grid");
+var _list = require("@react-aria/list");
 
 var _interactions = require("@react-aria/interactions");
 
-var _selection = require("@react-aria/selection");
-
 var _ListViewContext = require("../ListView/ListViewContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
@@ -47,31 +43,26 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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; }
 
 var ListViewItem = function ListViewItem(props) {
-  var _context;
-
   var item = props.item,
-      _props$item = props.item,
-      key = _props$item.key,
-      _props$item$props = _props$item.props,
+      _props$item$props = props.item.props,
       listItemProps = _props$item$props.listItemProps,
       rowProps = _props$item$props.rowProps,
       _props$item$props$has = _props$item$props.hasSeparator,
       hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
       className = props.className;
   var dataId = item.props['data-id'];
-  var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[0];
 
   var _useContext = (0, _react.useContext)(_ListViewContext.ListViewContext),
       state = _useContext.state;
 
   var isDisabled = state.disabledKeys.has(item.key);
   var rowRef = (0, _react.useRef)();
-  var cellRef = (0, _react.useRef)();
   var isSelectable = state.selectionManager.selectionMode !== 'none';
 
   var _useFocusRing = (0, _focus.useFocusRing)({
     within: true
   }),
+      isFocusVisibleWithin = _useFocusRing.isFocusVisible,
       focusWithinProps = _useFocusRing.focusProps;
 
   var _useFocusRing2 = (0, _focus.useFocusRing)(),
@@ -82,47 +73,36 @@ var ListViewItem = function ListViewItem(props) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
-  var _useGridRow = (0, _grid.useGridRow)({
+  var _useListItem = (0, _list.useListItem)({
     node: item,
-    isVirtualized: true
+    isVirtualized: true,
+    isDisabled: isDisabled
   }, state, rowRef),
-      raRowProps = _useGridRow.rowProps;
+      raRowProps = _useListItem.rowProps,
+      gridCellProps = _useListItem.gridCellProps;
 
   var isSelected = state.selectionManager.isSelected(item.key);
-
-  var _useGridCell = (0, _grid.useGridCell)({
-    node: cellNode,
-    focusMode: 'cell'
-  }, state, cellRef),
-      gridCellProps = _useGridCell.gridCellProps;
-
-  var _useSelectableItem = (0, _selection.useSelectableItem)({
-    isDisabled: isDisabled,
-    selectionManager: state.selectionManager,
-    key: key,
-    ref: cellRef
-  }),
-      selectableItemProps = _useSelectableItem.itemProps;
-
-  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps, selectableItemProps);
+  var mergedProps = (0, _utils.mergeProps)(raRowProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isHovered: isSelectable && isHovered,
     isSelected: isSelected,
-    isFocused: isDisabled ? false : isFocusVisible,
+    isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
     hasSeparator: hasSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isDisabled: isDisabled,
-    isRow: true
-  }, raRowProps, {
+    isRow: true,
     ref: rowRef
-  }, rowProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    as: "div",
-    ref: cellRef
-  }, mergedProps, {
+  }, mergedProps, rowProps, {
+    sx: {
+      outline: 'none'
+    }
+  }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: "div"
+  }, gridCellProps, {
     variant: "boxes.listViewItem",
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,
@@ -136,7 +116,6 @@ ListViewItem.propTypes = {
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string,
     rendered: _propTypes["default"].node,
-    childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
     props: _propTypes["default"].shape({
       'data-id': _propTypes["default"].string,
       listItemProps: _propTypes["default"].shape({}),

package/lib/cjs/styles/forms/input.js

@@ -179,8 +179,10 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   borderWidth: 1,
   flexDirection: 'row!important',
   flexWrap: 'wrap',
-  left: 3,
-  p: 10,
+  left: 2,
+  pt: 6,
+  pr: 10,
+  pb: 5,
   pl: 12,
   '&.has-no-status-indicator': {
     left: 0
@@ -193,14 +195,14 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
     position: 'absolute',
     bg: 'active',
     width: 3,
-    top: 0,
+    top: -1,
     left: -3,
-    bottom: 0
+    bottom: -1
   },
   '> input': {
     border: 'none',
     flex: 1,
-    height: 30,
+    height: 27,
     lineHeight: '100%',
     p: 5,
     '&.is-focused': {

package/lib/cjs/styles/forms/switch.js

@@ -1,12 +1,37 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports.thumbContainer = exports.thumb = exports.label = exports.container = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _buttons = require("../variants/buttons");
+
+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 label = {
   alignItems: 'center',
   fontSize: 'md',
@@ -33,12 +58,7 @@ var thumbContainer = {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &': {
-    boxShadow: 'focus'
-  },
-  '&:focus': {
-    outline: 'none'
-  }
+  '.is-focused &, &:focus': _objectSpread({}, _buttons.defaultFocus)
 };
 exports.thumbContainer = thumbContainer;
 var thumb = {

package/lib/cjs/styles/variants/boxes.js

@@ -168,7 +168,8 @@ var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
 
 var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
   py: 3,
-  pr: 0
+  pr: 0,
+  my: 3
 });
 
 var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {

package/lib/cjs/styles/variants/buttons.js

@@ -22,7 +22,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = void 0;
+exports.defaultFocus = exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
@@ -73,6 +73,7 @@ var defaultFocus = {
   outlineColor: 'active',
   outlineOffset: '4px'
 };
+exports.defaultFocus = defaultFocus;
 var navItemButton = {
   textDecoration: 'none',
   outline: 'none',

package/lib/components/ListView/ListView.js

@@ -9,22 +9,19 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["disabledKeys", "loadingState", "onLoadMore", "onSelectionChange", "selectionMode", "selectionStyle"];
 
 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; }
+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, { useMemo, forwardRef, useRef, useImperativeHandle } from 'react';
-import { GridCollection, useGridState } from '@react-stately/grid';
-import { GridKeyboardDelegate, useGrid } from '@react-aria/grid';
+import { useList } from '@react-aria/list';
 import { ListLayout } from '@react-stately/layout';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
-import { useCollator, useLocale } from '@react-aria/i18n';
+import { useCollator } from '@react-aria/i18n';
 import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
 import { ListViewContext } from './ListViewContext';
 import ListViewItem from '../ListViewItem';
@@ -89,82 +86,38 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return listViewRef.current;
   });
-
-  var _useListState = useListState(props),
-      collection = _useListState.collection;
-
-  var _useLocale = useLocale(),
-      direction = _useLocale.direction;
-
-  var collator = useCollator({
-    usage: 'search',
-    sensitivity: 'base'
-  });
-  var gridCollection = useMemo(function () {
-    var _context;
-
-    return new GridCollection({
-      columnCount: 1,
-      items: _mapInstanceProperty(_context = _Array$from(collection)).call(_context, function (item) {
-        return _objectSpread(_objectSpread({}, item), {}, {
-          hasChildNodes: true,
-          childNodes: [{
-            key: "cell-".concat(item.key),
-            type: 'cell',
-            index: 0,
-            value: null,
-            level: 0,
-            rendered: null,
-            textValue: item.textValue,
-            hasChildNodes: false,
-            childNodes: []
-          }]
-        });
-      })
-    });
-  }, [collection]);
-  var state = useGridState(_objectSpread(_objectSpread({}, props), {}, {
-    collection: gridCollection,
-    focusMode: 'cell',
+  var state = useListState(_objectSpread(_objectSpread({}, props), {}, {
     selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
+  var collection = state.collection,
+      selectionManager = state.selectionManager;
   var layout = useListLayout(state);
-  var keyboardDelegate = useMemo(function () {
-    return new GridKeyboardDelegate({
-      collection: state.collection,
-      disabledKeys: state.disabledKeys,
-      ref: listViewRef,
-      direction: direction,
-      collator: collator
-    });
-  }, [state, listViewRef, direction, collator]);
 
-  var _useGrid = useGrid(_objectSpread(_objectSpread({}, props), {}, {
+  var _useList = useList(_objectSpread(_objectSpread({}, props), {}, {
     isVirtualized: true,
-    keyboardDelegate: keyboardDelegate,
+    keyboardDelegate: layout,
     loadingState: loadingState
   }), state, listViewRef),
-      gridProps = _useGrid.gridProps; // Sync loading state into the layout.
+      gridProps = _useList.gridProps; // Sync loading state into the layout.
 
 
   layout.isLoading = isLoading;
-  var focusedItem = gridCollection.getFirstKey();
+  var focusedKey = selectionManager.focusedKey;
   delete gridProps.onMouseDown;
   return ___EmotionJSX(ListViewContext.Provider, {
     value: {
-      state: state,
-      keyboardDelegate: keyboardDelegate
+      state: state
     }
   }, ___EmotionJSX(Virtualizer, _extends({}, gridProps, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
-    focusedKey: focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey,
+    focusedKey: focusedKey,
     renderWrapper: renderWrapper,
     sizeToFit: "height",
     scrollDirection: "vertical",
     layout: layout,
     isLoading: isLoading,
-    collection: gridCollection,
+    collection: collection,
     transitionDuration: 0
   }, others), function (type, item) {
     if (type === 'item') {

package/lib/components/ListView/ListView.stories.js

@@ -540,7 +540,7 @@ var ListElement = function ListElement(_ref) {
     "aria-label": "create-icon",
     size: 20
   }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
-    "aria-label": "create-icon",
+    "aria-label": "actions-icon",
     size: 20
   }, ___EmotionJSX(MoreVertIcon, null))));
 };
@@ -576,7 +576,7 @@ export var Default = function Default(_ref2) {
       "aria-label": "create-icon",
       size: 20
     }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
-      "aria-label": "create-icon",
+      "aria-label": "actions-icon",
       size: 20
     }, ___EmotionJSX(MoreVertIcon, null)))));
   });

package/lib/components/ListViewItem/ListViewItem.js

@@ -1,24 +1,18 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useContext, useRef } from 'react';
 import { mergeProps } from '@react-aria/utils';
 import { useFocusRing } from '@react-aria/focus';
 import PropTypes from 'prop-types';
-import { useGridCell, useGridRow } from '@react-aria/grid';
+import { useListItem } from '@react-aria/list';
 import { useHover } from '@react-aria/interactions';
-import { useSelectableItem } from '@react-aria/selection';
 import { ListViewContext } from '../ListView/ListViewContext';
 import Box from '../Box';
 import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var ListViewItem = function ListViewItem(props) {
-  var _context;
-
   var item = props.item,
-      _props$item = props.item,
-      key = _props$item.key,
-      _props$item$props = _props$item.props,
+      _props$item$props = props.item.props,
       listItemProps = _props$item$props.listItemProps,
       rowProps = _props$item$props.rowProps,
       _props$item$props$has = _props$item$props.hasSeparator,
@@ -26,19 +20,17 @@ var ListViewItem = function ListViewItem(props) {
       className = props.className;
   var dataId = item.props['data-id'];
 
-  var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[0];
-
   var _useContext = useContext(ListViewContext),
       state = _useContext.state;
 
   var isDisabled = state.disabledKeys.has(item.key);
   var rowRef = useRef();
-  var cellRef = useRef();
   var isSelectable = state.selectionManager.selectionMode !== 'none';
 
   var _useFocusRing = useFocusRing({
     within: true
   }),
+      isFocusVisibleWithin = _useFocusRing.isFocusVisible,
       focusWithinProps = _useFocusRing.focusProps;
 
   var _useFocusRing2 = useFocusRing(),
@@ -49,47 +41,36 @@ var ListViewItem = function ListViewItem(props) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
-  var _useGridRow = useGridRow({
+  var _useListItem = useListItem({
     node: item,
-    isVirtualized: true
+    isVirtualized: true,
+    isDisabled: isDisabled
   }, state, rowRef),
-      raRowProps = _useGridRow.rowProps;
+      raRowProps = _useListItem.rowProps,
+      gridCellProps = _useListItem.gridCellProps;
 
   var isSelected = state.selectionManager.isSelected(item.key);
-
-  var _useGridCell = useGridCell({
-    node: cellNode,
-    focusMode: 'cell'
-  }, state, cellRef),
-      gridCellProps = _useGridCell.gridCellProps;
-
-  var _useSelectableItem = useSelectableItem({
-    isDisabled: isDisabled,
-    selectionManager: state.selectionManager,
-    key: key,
-    ref: cellRef
-  }),
-      selectableItemProps = _useSelectableItem.itemProps;
-
-  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps, selectableItemProps);
+  var mergedProps = mergeProps(raRowProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = useStatusClasses(className, {
     isHovered: isSelectable && isHovered,
     isSelected: isSelected,
-    isFocused: isDisabled ? false : isFocusVisible,
+    isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
     hasSeparator: hasSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
     isDisabled: isDisabled,
-    isRow: true
-  }, raRowProps, {
+    isRow: true,
     ref: rowRef
-  }, rowProps), ___EmotionJSX(Box, _extends({
-    as: "div",
-    ref: cellRef
-  }, mergedProps, {
+  }, mergedProps, rowProps, {
+    sx: {
+      outline: 'none'
+    }
+  }), ___EmotionJSX(Box, _extends({
+    as: "div"
+  }, gridCellProps, {
     variant: "boxes.listViewItem",
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,
@@ -103,7 +84,6 @@ ListViewItem.propTypes = {
   item: PropTypes.shape({
     key: PropTypes.string,
     rendered: PropTypes.node,
-    childNodes: PropTypes.arrayOf(PropTypes.shape({})),
     props: PropTypes.shape({
       'data-id': PropTypes.string,
       listItemProps: PropTypes.shape({}),

package/lib/styles/forms/input.js

@@ -157,8 +157,10 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   borderWidth: 1,
   flexDirection: 'row!important',
   flexWrap: 'wrap',
-  left: 3,
-  p: 10,
+  left: 2,
+  pt: 6,
+  pr: 10,
+  pb: 5,
   pl: 12,
   '&.has-no-status-indicator': {
     left: 0
@@ -171,14 +173,14 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
     position: 'absolute',
     bg: 'active',
     width: 3,
-    top: 0,
+    top: -1,
     left: -3,
-    bottom: 0
+    bottom: -1
   },
   '> input': {
     border: 'none',
     flex: 1,
-    height: 30,
+    height: 27,
     lineHeight: '100%',
     p: 5,
     '&.is-focused': {

package/lib/styles/forms/switch.js

@@ -1,3 +1,18 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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 { defaultFocus } from '../variants/buttons';
 export var label = {
   alignItems: 'center',
   fontSize: 'md',
@@ -22,12 +37,7 @@ export var thumbContainer = {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &': {
-    boxShadow: 'focus'
-  },
-  '&:focus': {
-    outline: 'none'
-  }
+  '.is-focused &, &:focus': _objectSpread({}, defaultFocus)
 };
 export var thumb = {
   width: 20,

package/lib/styles/variants/boxes.js

@@ -148,7 +148,8 @@ var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
 
 var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
   py: 3,
-  pr: 0
+  pr: 0,
+  my: 3
 });
 
 var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {

package/lib/styles/variants/buttons.js

@@ -48,7 +48,7 @@ var defaultHover = {
   color: 'accent.40',
   boxShadow: 'standard'
 };
-var defaultFocus = {
+export var defaultFocus = {
   outline: '1px solid',
   outlineColor: 'active',
   outlineOffset: '4px'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.20.1-alpha.0",
+  "version": "1.21.0-alpha.2",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -82,11 +82,12 @@
     "@react-aria/combobox": "^3.0.0",
     "@react-aria/dialog": "^3.1.2",
     "@react-aria/focus": "^3.5.0",
-    "@react-aria/grid": "^3.0.0-beta.1",
+    "@react-aria/grid": "^3.2.6",
     "@react-aria/i18n": "^3.3.0",
     "@react-aria/interactions": "^3.5.0",
     "@react-aria/label": "^3.1.0",
     "@react-aria/link": "^3.1.1",
+    "@react-aria/list": "3.0.0-nightly.3248",
     "@react-aria/listbox": "^3.3.0",
     "@react-aria/live-announcer": "^3.0.0",
     "@react-aria/menu": "^3.1.4",
@@ -102,7 +103,7 @@
     "@react-aria/switch": "3.1.1",
     "@react-aria/tabs": "^3.0.1",
     "@react-aria/tooltip": "^3.1.2",
-    "@react-aria/utils": "^3.8.0",
+    "@react-aria/utils": "^3.12.0",
     "@react-aria/virtualizer": "^3.3.2",
     "@react-aria/visually-hidden": "3.2.1",
     "@react-spectrum/provider": "^3.2.1",
@@ -111,7 +112,7 @@
     "@react-stately/color": "^3.0.0-beta.2",
     "@react-stately/combobox": "^3.0.0",
     "@react-stately/data": "^3.4.0",
-    "@react-stately/grid": "^3.0.0-beta.0",
+    "@react-stately/grid": "^3.1.4",
     "@react-stately/layout": "^3.2.1",
     "@react-stately/list": "^3.2.1",
     "@react-stately/menu": "^3.2.1",