@pingux/astro 1.41.0-alpha.5 → 1.42.0-alpha.0

package/lib/cjs/components/ImageUploadField/ImageUploadFieldBase.js

@@ -36,11 +36,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _omit = _interopRequireDefault(require("lodash/omit"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _visuallyHidden = require("@react-aria/visually-hidden");
 
 var _index = require("../../index");
 
@@ -80,13 +80,12 @@ var ImageUploadFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props,
 
   var _useField = (0, _useField2["default"])(_objectSpread({}, (0, _omit["default"])(props, ['onRemove']))),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var labelRef = (0, _react.useRef)();
 
-  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
+  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
   var acceptableInputTypes = (0, _react.useMemo)(function () {
@@ -101,14 +100,14 @@ var ImageUploadFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   })), (0, _react2.jsx)(_index.PopoverMenu, {
     isOpen: isMenuOpen,
     onOpenChange: handleOpenMenuChange
-  }, children), (0, _react2.jsx)(_Box["default"], fieldControlWrapperProps, (0, _react2.jsx)(_Input["default"], (0, _extends2["default"])({}, fieldControlInputProps, visuallyHiddenProps, {
+  }, children), (0, _react2.jsx)(_Input["default"], (0, _extends2["default"])({}, fieldControlProps, visuallyHiddenProps, {
     accept: acceptableInputTypes,
     "data-testid": "image-upload-input",
     onChange: handleInputChange,
     ref: inputRef,
     type: "file",
     value: ""
-  }))), !isImageType && (0, _react2.jsx)(_FieldHelperText["default"], {
+  })), !isImageType && (0, _react2.jsx)(_FieldHelperText["default"], {
     status: _statuses["default"].DEFAULT
   }, fileName), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
     status: status

package/lib/cjs/components/Link/Link.js

@@ -24,12 +24,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
-
 var _themeUi = require("theme-ui");
 
+var _link = require("@react-aria/link");
+
+var _focus = require("@react-aria/focus");
+
 var _interactions = require("@react-aria/interactions");
 
+var _utils = require("@react-aria/utils");
+
 var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
@@ -58,11 +62,11 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return linkRef.current;
   });
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing = (0, _focus.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  var _useLink = (0, _reactAria.useLink)(props, linkRef),
+  var _useLink = (0, _link.useLink)(props, linkRef),
       linkProps = _useLink.linkProps;
 
   var _useHover = (0, _interactions.useHover)(props),
@@ -87,7 +91,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames,
     ref: linkRef,
     role: "link"
-  }, others, (0, _reactAria.mergeProps)(hoverProps, pressProps, linkProps, focusProps)));
+  }, others, (0, _utils.mergeProps)(hoverProps, pressProps, linkProps, focusProps)));
 });
 Link.propTypes = {
   /** Whether the link is disabled. */

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

@@ -20,7 +20,7 @@ var _ = _interopRequireDefault(require("."));
 
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 
-var _Link = _interopRequireDefault(require("./Link.styles"));
+var _links = _interopRequireDefault(require("../../styles/variants/links"));
 
 var _react2 = require("@emotion/react");
 
@@ -51,7 +51,7 @@ var _default = {
     variant: {
       control: {
         type: 'select',
-        options: (0, _keys["default"])(_Link["default"])
+        options: (0, _keys["default"])(_links["default"])
       }
     }
   }

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -48,8 +48,6 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _hooks = require("../../hooks");
 
 var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
@@ -95,19 +93,18 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }), ref),
       selectFieldProps = (0, _extends2["default"])({}, _useSelectField);
 
-  var fieldControlInputProps = selectFieldProps.fieldControlInputProps,
+  var fieldControlProps = selectFieldProps.fieldControlProps,
       isLoadingInitial = selectFieldProps.isLoadingInitial,
       state = selectFieldProps.state,
       triggerProps = selectFieldProps.triggerProps,
       triggerRef = selectFieldProps.triggerRef;
   var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
-    className: fieldControlInputProps.className,
+    className: fieldControlProps.className,
     ref: triggerRef,
     variant: "link",
-    tabIndex: isDisabled ? -1 : 0
-  }, triggerProps, ariaProps, {
+    tabIndex: isDisabled ? -1 : 0,
     "aria-describedby": helperText && helperTextId
-  }), (0, _react2.jsx)(_.Text, {
+  }, triggerProps, ariaProps), (0, _react2.jsx)(_.Text, {
     variant: "label",
     color: "active"
   }, placeholder), (0, _react2.jsx)(_.Box, {
@@ -131,7 +128,7 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     trigger: trigger
   }));
 });
-LinkSelectField.propTypes = _objectSpread(_objectSpread({
+LinkSelectField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
 
@@ -217,8 +214,20 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread({
    *
    * (key: Key) => any
    */
-  onSelectionChange: _propTypes["default"].func
-}, _fieldAttributes.inputFieldAttributesBasePropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
+  onSelectionChange: _propTypes["default"].func,
+
+  /**
+   * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
+   * and/or the visible button representation for the select input.
+   */
+  controlProps: _propTypes["default"].shape({}),
+
+  /** Props object passed along to the root container as-is. */
+  containerProps: _propTypes["default"].shape({}),
+
+  /** Props object passed along to the label as-is. */
+  labelProps: _propTypes["default"].shape({})
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = {
   placeholder: 'Select',
   status: _statuses["default"].DEFAULT,

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

@@ -48,16 +48,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactAria = require("react-aria");
+var _overlays = require("@react-aria/overlays");
 
-var _reactStately = require("react-stately");
+var _data = require("@react-stately/data");
 
 var _2 = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -82,7 +80,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -118,17 +116,18 @@ var _default = {
     isDisabled: {},
     isOpen: {},
     isRequired: {},
+    controlProps: {},
     selectedKey: {
       control: {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, (0, _extends2["default"])({}, args, {
     width: "100%"
   }), (0, _react2.jsx)(_2.Item, {
     key: "red"
@@ -302,7 +301,7 @@ var DynamicItems = function DynamicItems() {
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
       items = _useState4[0];
 
-  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Select an option...",
     items: items
   }, function (item) {
@@ -321,7 +320,7 @@ DynamicItems.parameters = {
 
 var AsyncLoading = function AsyncLoading() {
   // This example uses `useAsyncList` from "@react-stately/data"
-  var list = (0, _reactStately.useAsyncList)({
+  var list = (0, _data.useAsyncList)({
     load: function load(_ref) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
         var signal, cursor, res, json;
@@ -362,7 +361,7 @@ var AsyncLoading = function AsyncLoading() {
       }))();
     }
   });
-  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Pick a Pokemon",
     items: list.items,
     isLoading: list.isLoading,

package/lib/cjs/{styles/themeOverrides/withUiLibraryCss.js → components/List/List.js}

@@ -16,41 +16,39 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _themeUi = require("theme-ui");
+var _Box = _interopRequireDefault(require("../Box/Box"));
 
-var _uiLibraryOverride = _interopRequireDefault(require("./uiLibraryOverride"));
+var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
+var _excluded = ["children"];
+
 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; }
 
-var UI_LIBRARY_CSS_LINK = 'https://assets.pingone.com/ux/ui-library/5.0.2/css/ui-library.css';
-
-var WithUiLibraryCss = function WithUiLibraryCss(Story) {
-  (0, _react.useEffect)(function () {
-    var uiLibraryCss = document.createElement('link');
-    uiLibraryCss.rel = 'stylesheet';
-    uiLibraryCss.className = 'uiLibraryCssLink';
-    uiLibraryCss.href = UI_LIBRARY_CSS_LINK;
-    document.getElementsByTagName('head')[0].appendChild(uiLibraryCss);
-    return function () {
-      var _context;
-
-      return (0, _forEach["default"])(_context = document.querySelectorAll('.uiLibraryCssLink')).call(_context, function (link) {
-        link.remove();
-      });
-    };
-  }, []);
-  return (0, _react2.jsx)(_themeUi.ThemeProvider, {
-    theme: _uiLibraryOverride["default"]
-  }, (0, _react2.jsx)(Story, null));
-};
-
-var _default = WithUiLibraryCss;
+/**
+ * The intended use of List is to hold a collection of <ListItem/> components.
+ * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
+*/
+var List = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  (0, _hooks.useDeprecationWarning)('The  List component will be deprecated in Astro-UI 2.0.0, use ListView instead.');
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    ref: ref,
+    role: "list",
+    as: "ul",
+    pl: "0"
+  }, others), children);
+});
+List.displayName = 'List';
+var _default = List;
 exports["default"] = _default;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _ListItem = _interopRequireDefault(require("../ListItem"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _Separator = _interopRequireDefault(require("../Separator"));
+
+var _withDeprecationWarning = _interopRequireDefault(require("../../utils/devUtils/decorators/withDeprecationWarning"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Deprecated/List',
+  component: [_["default"], _ListItem["default"]],
+  decorators: [function (Story, context) {
+    return (0, _withDeprecationWarning["default"])(Story, context, 'The `List` component will be deprecated in Astro-UI 2.0.0, use `ListView` instead.');
+  }]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "itemTitle",
+    mb: "md",
+    color: "text.secondary"
+  }, "Registration Forms"), (0, _react2.jsx)(_["default"], null, (0, _react2.jsx)(_ListItem["default"], null, (0, _react2.jsx)(_Text["default"], {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 1")), (0, _react2.jsx)(_Separator["default"], {
+    margin: "0"
+  }), (0, _react2.jsx)(_ListItem["default"], {
+    title: "Form 2"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 2")), (0, _react2.jsx)(_Separator["default"], {
+    margin: "0"
+  }), (0, _react2.jsx)(_ListItem["default"], {
+    title: "Form 3"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 3")), (0, _react2.jsx)(_Separator["default"], {
+    margin: "0"
+  })));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _List = _interopRequireDefault(require("./List"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testLabel = 'Test Label';
+var defaultProps = {
+  title: testLabel
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_List["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders List component', function () {
+  getComponent();
+
+  var list = _react2.screen.getByRole('list');
+
+  expect(list).toBeInstanceOf(HTMLUListElement);
+  expect(list).toBeInTheDocument();
+});

package/lib/cjs/components/List/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _List["default"];
+  }
+});
+
+var _List = _interopRequireDefault(require("./List"));

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

@@ -43,16 +43,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
-
-var _i18n = require("@react-aria/i18n");
-
 var _listbox = require("@react-aria/listbox");
 
-var _layout = require("@react-stately/layout");
+var _utils = require("@react-aria/utils");
 
 var _virtualizer = require("@react-aria/virtualizer");
 
+var _i18n = require("@react-aria/i18n");
+
+var _layout = require("@react-stately/layout");
+
 var _ListBoxContext = require("./ListBoxContext");
 
 var _index = require("./index.js");
@@ -196,7 +196,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
     value: state
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
+  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _utils.mergeProps)(listBoxProps, others), {
     style: {
       outline: 'none'
     },

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

@@ -12,12 +12,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _jestAxe = require("jest-axe");
 
-var _reactStately = require("react-stately");
-
 var _list = require("@react-stately/list");
 
 var _react2 = require("@testing-library/react");
 
+var _collections = require("@react-stately/collections");
+
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _ = _interopRequireDefault(require("."));
@@ -85,7 +85,7 @@ var getSectionsComponent = function getSectionsComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _react2.render)((0, _react3.jsx)(ListBoxWithSections, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
     return (// eslint-disable-next-line testing-library/no-node-access
-      (0, _react3.jsx)(_reactStately.Section, {
+      (0, _react3.jsx)(_collections.Section, {
         key: section.name,
         title: section.name,
         items: section.options

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

@@ -22,10 +22,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _i18n = require("@react-aria/i18n");
-
 var _listbox = require("@react-aria/listbox");
 
+var _i18n = require("@react-aria/i18n");
+
 var _virtualizer = require("@react-aria/virtualizer");
 
 var _ListBoxContext = require("./ListBoxContext");
@@ -74,7 +74,7 @@ var ListBoxSection = function ListBoxSection(props) {
   }, groupProps), item.key !== state.collection.getFirstKey() && (0, _react2.jsx)(_Separator["default"], {
     mt: "0px"
   }), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
-    variant: "listBox.sectionTitle"
+    variant: "boxes.listBoxSectionTitle"
   }), item.rendered)), (0, _react2.jsx)(_Box["default"], {
     style: (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction)
   }, children));

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

@@ -36,12 +36,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _CircleSmallIcon = _interopRequireDefault(require("mdi-react/CircleSmallIcon"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _listbox = require("@react-aria/listbox");
 
+var _CircleSmallIcon = _interopRequireDefault(require("mdi-react/CircleSmallIcon"));
+
 var _hooks = require("../../hooks");
 
 var _Box = _interopRequireDefault(require("../Box"));

package/lib/cjs/components/ListItem/ListItem.js

@@ -63,7 +63,7 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     role: "listitem",
     ref: ref,
     as: "li",
-    variant: "listItem.container",
+    variant: "boxes.listItem",
     isRow: true
   }, hoverProps, others), children);
 });

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

@@ -28,18 +28,20 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
+var _collections = require("@react-stately/collections");
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
-var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
-
 var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 
-var _reactStately = require("react-stately");
+var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
+
+var _data = require("@react-stately/data");
 
 var _addonActions = require("@storybook/addon-actions");
 
+var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
+
 var _ = _interopRequireDefault(require("."));
 
 var _Box = _interopRequireDefault(require("../Box/Box"));
@@ -597,7 +599,7 @@ var Default = function Default(_ref2) {
   return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, args, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.name,
       textValue: item.name,
       "data-id": item.key
@@ -746,7 +748,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
     };
   }();
 
-  var list = (0, _reactStately.useAsyncList)({
+  var list = (0, _data.useAsyncList)({
     load: function load(_ref5) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
         var signal, cursor, filterText;
@@ -790,7 +792,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
     loadingState: list.loadingState,
     onLoadMore: list.loadMore
   }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(ListElement, {
@@ -817,7 +819,7 @@ var MultipleSelection = function MultipleSelection(_ref6) {
     items: items,
     selectionMode: "multiple"
   }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(ListElement, {

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

@@ -14,11 +14,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-var _reactAria = require("react-aria");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _reactStately = require("react-stately");
+var _focus = require("@react-aria/focus");
 
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _collections = require("@react-stately/collections");
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
@@ -78,12 +78,12 @@ var getComponent = function getComponent() {
       _ref$renderFn = _ref.renderFn,
       renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
 
-  return renderFn((0, _react2.jsx)(_reactAria.FocusScope, {
+  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.key,
       textValue: item.name,
       "data-id": item.key
@@ -101,7 +101,7 @@ var getComponentEmpty = function getComponentEmpty() {
       _ref2$renderFn = _ref2.renderFn,
       renderFn = _ref2$renderFn === void 0 ? _testWrapper.render : _ref2$renderFn;
 
-  return renderFn((0, _react2.jsx)(_reactAria.FocusScope, {
+  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props))));
 };
@@ -113,12 +113,12 @@ var getComponentWithCheckbox = function getComponentWithCheckbox() {
       _ref3$renderFn = _ref3.renderFn,
       renderFn = _ref3$renderFn === void 0 ? _testWrapper.render : _ref3$renderFn;
 
-  return renderFn((0, _react2.jsx)(_reactAria.FocusScope, {
+  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.key,
       textValue: item.name,
       "data-id": item.key