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

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.41.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.40.1...@pingux/astro@1.41.0) (2023-02-10)
+
+
+### Bug Fixes
+
+* [UIP-5927] Astro Add Separator to ListBoxSection ([f18c1d2](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f18c1d252744180f7875e95e360fe352ffef20b7))
+* [UIP-5978] Astro Backet Adjust Spacing ([4625efb](https://gitlab.corp.pingidentity.com/ux/pingux/commit/4625efb982acf90ecabf0452d0809fb44c482875))
+* [UIP-5982] Card component updates ([34d9206](https://gitlab.corp.pingidentity.com/ux/pingux/commit/34d920646cb4261bc75dabbd2ad2d80ba9ee2bfa))
+* [UIP-5994] CheckboxField focuses on ListView item when click ([670e3aa](https://gitlab.corp.pingidentity.com/ux/pingux/commit/670e3aa79828e39d169fb12c682e62416dfca1ed))
+* [UIP-5999] Update skeleton load image src ([3a9fda7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/3a9fda795c1e39798692f33b682aa838dd8b5bb3))
+* [UIP-6001] Updated Message Toggle in Overlay Recipe ([add7ba7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/add7ba700731c22777c4bc25cd6086beeb481c8e))
+
+
+### Features
+
+* [UIP-5968] Add component overview page AccordionGrid-button ([ddf0281](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ddf0281738dbfde8905f8684b35e2e2f96cc3771))
+* [UIP-5980] Breadcrumb story and component updates ([8b35776](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8b35776f9701b8a8f3425bdb6142afe7eef82cfb))
+* [UIP-6028] Adding Patterns to Storybook ([77457d7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/77457d71aff1cd8b6ad6699543ca0c7ff8cc458e))
+* [UIP-6030] Interactive Card ([9d41446](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9d41446c5356866c05e9dd333c631937f8333de9))
+
+
+
+
+
 ## [1.40.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.40.0...@pingux/astro@1.40.1) (2023-01-26)
 
 

package/README.md

@@ -1,5 +1,4 @@
-# `@pingux/astro@2.0.0.alpha.0`
-Migration documentation coming soon
+# `@pingux/astro`
 
 Astro is a lightweight, composable, and themeable React component library. Astro was created to help developers and designers create consistent, user friendly, and accessible UIs across all Ping products. Please visit https://pingidentity.design for more information and to read individual component documentation.
 

package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js

@@ -38,18 +38,18 @@ var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactAria = require("react-aria");
-
 var _grid = require("@react-stately/grid");
 
 var _grid2 = require("@react-aria/grid");
 
-var _i18n = require("@react-aria/i18n");
+var _utils = require("@react-aria/utils");
 
 var _list = require("@react-stately/list");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _i18n = require("@react-aria/i18n");
+
 var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _AccordionGridItem = _interopRequireDefault(require("../AccordionGridItem"));
@@ -173,7 +173,7 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(gridProps, containerProps), {
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps, containerProps), {
     ref: accordionGridRef,
     role: "treegrid"
   }), (0, _map["default"])(_context2 = (0, _from["default"])(state.collection)).call(_context2, function (item) {

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

@@ -22,7 +22,7 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactStately = require("react-stately");
+var _collections = require("@react-stately/collections");
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
@@ -255,7 +255,7 @@ var Default = function Default() {
       items: data,
       defaultSelectedKeys: ['Environment']
     }, function (item) {
-      return (0, _react2.jsx)(_reactStately.Item, {
+      return (0, _react2.jsx)(_collections.Item, {
         key: item.key,
         textValue: item.name
       }, (0, _react2.jsx)(Header, {
@@ -295,7 +295,7 @@ var Controlled = function Controlled() {
       selectedKeys: selectedKeys,
       onSelectionChange: setSelectedKeys
     }, function (item) {
-      return (0, _react2.jsx)(_reactStately.Item, {
+      return (0, _react2.jsx)(_collections.Item, {
         key: item.key,
         textValue: item.name
       }, (0, _react2.jsx)(Header, {
@@ -310,7 +310,30 @@ var Controlled = function Controlled() {
       }) : null);
     }))
   );
-};
+}; // const items = [
+//   { id: 1, name: "Aardvark", key: "Aardvark" },
+//   { id: 2, name: "Kangaroo", key: "Kangaroo" },
+//   { id: 3, name: "Snake", key: "Snake" },
+//   { id: 4, name: "Frog", key: "Frog" },
+//   { id: 5, name: "Seal", key: "Seal" },
+//   { id: 6, name: "Orangutan", key: "Orangutan" },
+//   { id: 7, name: "Shark", key: "Shark" }
+// ];
+// const data = [
+//   {
+//     name: "Client Application Developer",
+//     key: "Client"
+//   },
+//   {
+//     name: "Environment Admin",
+//     key: "Environment"
+//   },
+//   {
+//     name: "Organization Admin",
+//     key: "Organization"
+//   }
+// ];
+
 
 exports.Controlled = Controlled;
 
@@ -320,7 +343,7 @@ var AccordionWithInputs = function AccordionWithInputs() {
     defaultSelectedKeys: ['Organization'],
     navigationMode: "native"
   }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.key
     }, (0, _react2.jsx)(_index.Text, {
       sx: {

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

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactStately = require("react-stately");
+var _collections = require("@react-stately/collections");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
@@ -31,13 +31,13 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate"
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
     key: "second",
     textValue: "Duplicate"
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
     key: "third",
     textValue: "Duplicate"
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button")))));
@@ -47,13 +47,13 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
     isOpen: true
-  }, (0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate"
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
     key: "second",
     textValue: "Duplicate"
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
     key: "third",
     textValue: "Duplicate"
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))))));
@@ -63,7 +63,7 @@ var getComponentWithTextFields = function getComponentWithTextFields() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props, {
     navigationMode: "native"
-  }), (0, _react2.jsx)(_reactStately.Item, {
+  }), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate"
   }, (0, _react2.jsx)(_index.Text, null, "Header"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.TextField, {

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -30,10 +30,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
-
 var _grid = require("@react-aria/grid");
 
+var _utils = require("@react-aria/utils");
+
 var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
@@ -109,11 +109,11 @@ var AccordionGridItem = function AccordionGridItem(props) {
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
     tabindex: "0"
-  }, (0, _reactAria.mergeProps)(rowProps, others), {
+  }, (0, _utils.mergeProps)(rowProps, others), {
     "aria-selected": isSelected,
     "aria-expanded": isSelected,
     className: classNames,
-    variant: "accordionGrid.item",
+    variant: "accordion.accordionGridItem",
     ref: rowRef
   }), (0, _react2.jsx)(_AccordionGridItemHeader["default"], (0, _extends2["default"])({
     item: item,

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js

@@ -24,9 +24,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@react-aria/utils");
 
-var _reactAria = require("react-aria");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _grid = require("@react-aria/grid");
 
@@ -81,7 +81,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var _useHover = (0, _interactions.useHover)({}),
       hoverProps = _useHover.hoverProps;
 
-  var mergedProps = (0, _reactAria.mergeProps)(gridCellProps, hoverProps);
+  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isSelected: isSelected
@@ -99,7 +99,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
 
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
-    variant: "accordionGrid.body",
+    variant: "accordion.accordionGridBody",
     role: "gridcell",
     ref: ref
   }, mergedProps, {

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -24,9 +24,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@react-aria/utils");
+
+var _focus = require("@react-aria/focus");
 
-var _reactAria = require("react-aria");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _grid = require("@react-aria/grid");
 
@@ -91,16 +93,16 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       pressProps = _usePress.pressProps,
       isPressed = _usePress.isPressed;
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)({
+  var _useFocusRing = (0, _focus.useFocusRing)({
     within: true
   }),
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing2 = (0, _focus.useFocusRing)(),
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var mergedProps = (0, _reactAria.mergeProps)(pressProps, gridCellProps, hoverProps, focusWithinProps, focusProps, pressProps);
+  var mergedProps = (0, _utils.mergeProps)(pressProps, gridCellProps, hoverProps, focusWithinProps, focusProps, pressProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isPressed: isPressed,
@@ -130,7 +132,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     as: "div",
     ref: cellRef
   }, mergedProps, {
-    variant: "accordionGrid.header",
+    variant: "accordion.accordionGridHeader",
     isFocused: isFocusVisible,
     isSelected: isSelected,
     className: classNames

package/lib/cjs/components/AccordionGroup/AccordionGroup.js

@@ -42,12 +42,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _accordion = require("@react-aria/accordion");
 
+var _tree = require("@react-stately/tree");
+
 var _utils = require("@react-aria/utils");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactStately = require("react-stately");
-
 var _index = require("../../index");
 
 var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
@@ -81,7 +81,7 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       expandedKeys = props.expandedKeys,
       onExpandedChange = props.onExpandedChange,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var state = (0, _reactStately.useTreeState)(props);
+  var state = (0, _tree.useTreeState)(props);
   var accordionRef = (0, _react.useRef)();
   /* `autoFocus: true` is what makes the initial focus only take one click vs two. */
 

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

@@ -20,7 +20,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactStately = require("react-stately");
+var _collections = require("@react-stately/collections");
 
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 
@@ -107,7 +107,7 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], args, (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _react2.jsx)(_["default"], args, (0, _react2.jsx)(_collections.Item, {
     key: "accordionKey",
     textValue: "accordionKey",
     label: "Accordion Label",
@@ -129,7 +129,7 @@ var Multiple = function Multiple() {
     (0, _react2.jsx)(_["default"], {
       items: itemArray
     }, function (item) {
-      return (0, _react2.jsx)(_reactStately.Item, {
+      return (0, _react2.jsx)(_collections.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label
@@ -163,7 +163,7 @@ var ControlledExpanded = function ControlledExpanded() {
       expandedKeys: expandedKeys,
       items: itemArray
     }, function (item) {
-      return (0, _react2.jsx)(_reactStately.Item, {
+      return (0, _react2.jsx)(_collections.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label
@@ -187,7 +187,7 @@ var UncontrolledExpanded = function UncontrolledExpanded() {
       defaultExpandedKeys: ['t1'],
       items: itemArray
     }, function (item) {
-      return (0, _react2.jsx)(_reactStately.Item, {
+      return (0, _react2.jsx)(_collections.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label
@@ -211,7 +211,7 @@ var DisabledItems = function DisabledItems() {
       disabledKeys: ['t1', 't3'],
       items: itemArrayDisabled
     }, function (item) {
-      return (0, _react2.jsx)(_reactStately.Item, {
+      return (0, _react2.jsx)(_collections.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label
@@ -234,7 +234,7 @@ var CustomPresentation = function CustomPresentation() {
     (0, _react2.jsx)(_["default"], {
       items: itemArrayDisabled
     }, function (item) {
-      return (0, _react2.jsx)(_reactStately.Item, {
+      return (0, _react2.jsx)(_collections.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label,

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

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactStately = require("react-stately");
+var _collections = require("@react-stately/collections");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
@@ -41,17 +41,17 @@ var selectedAccordionKeys = ['identityProvider', 'identityProvider1'];
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first",
     label: "Accordion item"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
     key: "second",
     textValue: "Duplicate",
     "data-id": "second",
     label: "Accordion item"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third",
@@ -67,15 +67,15 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
     isOpen: true
-  }, (0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
     key: "second",
     textValue: "Duplicate",
     "data-id": "second"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third"
@@ -84,12 +84,12 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
 
 var getComponentWithInput = function getComponentWithInput() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first",
     label: "Accordion item"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
     key: "second",
     textValue: "Duplicate",
     "data-id": "second",
@@ -109,11 +109,11 @@ var getComponentWithPopover = function getComponentWithPopover() {
     "data-testid": "popoverbutton"
   }, "Click me"), (0, _react2.jsx)(_index.Menu, {
     onAction: function onAction() {}
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_collections.Item, {
     key: "edit"
-  }, "Edit"), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Edit"), (0, _react2.jsx)(_collections.Item, {
     key: "duplicate"
-  }, "Duplicate"), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Duplicate"), (0, _react2.jsx)(_collections.Item, {
     key: "delete",
     textValue: "delete"
   }, (0, _react2.jsx)(_Text["default"], {
@@ -122,7 +122,7 @@ var getComponentWithPopover = function getComponentWithPopover() {
     items: items,
     defaultExpandedKeys: selectedAccordionKeys
   }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.key,
       textValue: item.label,
       label: item.label
@@ -137,7 +137,7 @@ var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordi
     width: "50%"
   }, (0, _react2.jsx)(_AccordionGroup["default"], {
     defaultExpandedKeys: ['customConfiguration']
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_collections.Item, {
     key: "customConfiguration",
     label: "connection.configuration",
     regionProps: {
@@ -151,7 +151,7 @@ var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordi
     "data-id": "connection-configuration-custom-form"
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Text["default"], null, "other text"), (0, _react2.jsx)(_Text["default"], null, "another text"))))), (0, _react2.jsx)(_AccordionGroup["default"], {
     defaultExpandedKeys: ['customConfiguration1']
-  }, (0, _react2.jsx)(_reactStately.Item, {
+  }, (0, _react2.jsx)(_collections.Item, {
     key: "customConfiguration",
     label: "connection.configuration1",
     regionProps: {

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -28,13 +28,15 @@ var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
 var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
-var _reactAria = require("react-aria");
-
 var _themeUi = require("theme-ui");
 
+var _interactions = require("@react-aria/interactions");
+
+var _utils = require("@react-aria/utils");
+
 var _accordion = require("@react-aria/accordion");
 
-var _interactions = require("@react-aria/interactions");
+var _button = require("@react-aria/button");
 
 var _focus = require("@react-aria/focus");
 
@@ -89,7 +91,7 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
-  var _useButton = (0, _reactAria.useButton)(props, buttonRef),
+  var _useButton = (0, _button.useButton)(props, buttonRef),
       isPressed = _useButton.isPressed,
       raButtonProps = _useButton.buttonProps;
 
@@ -119,18 +121,18 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       px: '0',
       height: 'unset'
     },
-    variant: "variants.accordion.header",
+    variant: "accordionHeader",
     className: buttonClasses
-  }, (0, _reactAria.mergeProps)(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), (0, _react2.jsx)(_index.Text, {
+  }, (0, _utils.mergeProps)(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), (0, _react2.jsx)(_index.Text, {
     className: buttonClasses,
-    variant: "accordion.title"
+    variant: "accordion.accordionTitle"
   }, item.props.label), (0, _react2.jsx)(_index.Box, {
     as: "span",
     ml: "5px"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isOpen ? _MenuUpIcon["default"] : _MenuDownIcon["default"]
   }))), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "accordion.body"
+    variant: "accordion.accordionBody"
   }, accordionRegionProps, regionProps, {
     className: itemClasses
   }), item.rendered));

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -46,9 +46,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _label = require("@react-aria/label");
+
+var _utils = require("@react-aria/utils");
 
-var _reactAria = require("react-aria");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _uuid = require("uuid");
 
@@ -56,6 +58,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _ArrayFieldItem = _interopRequireDefault(require("./ArrayFieldItem"));
+
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -173,24 +177,16 @@ var ArrayField = function ArrayField(props) {
     });
   }, [createEmptyField, isControlled]);
 
-  var _useLabel = (0, _reactAria.useLabel)(_objectSpread({}, props)),
+  var _useLabel = (0, _label.useLabel)(_objectSpread({}, props)),
       raLabelProps = _useLabel.labelProps;
 
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
-  var isDisabled = (value || fieldValues).length === 1;
-  var renderedItem = (0, _react.useCallback)(function (id, fieldValue, otherFieldProps, onComponentRender) {
-    if (onComponentRender) {
-      return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
-    }
-
-    return renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
-  }, [onFieldValueChange, onFieldDelete, renderField, isDisabled]);
 
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
       ariaProps = _getAriaAttributeProp.ariaProps,
       nonAriaProps = _getAriaAttributeProp.nonAriaProps;
 
-  return (0, _react2.jsx)(_.Box, nonAriaProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, raLabelProps, (0, _reactAria.mergeProps)(labelProps, raLabelProps, {
+  return (0, _react2.jsx)(_.Box, nonAriaProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, raLabelProps, (0, _utils.mergeProps)(labelProps, raLabelProps, {
     children: label
   }))), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "ul",
@@ -200,18 +196,24 @@ var ArrayField = function ArrayField(props) {
         onComponentRender = _ref2.onComponentRender,
         fieldValue = _ref2.fieldValue,
         otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-    return (0, _react2.jsx)(_.Box, {
-      as: "li",
-      mb: "xs",
-      key: id
-    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender));
+    var isDisabled = (value || fieldValues).length === 1;
+    return (0, _react2.jsx)(_ArrayFieldItem["default"], (0, _extends2["default"])({
+      key: id,
+      id: id,
+      isDisabled: isDisabled,
+      fieldValue: fieldValue,
+      onComponentRender: onComponentRender,
+      onFieldValueChange: onFieldValueChange,
+      onFieldDelete: onFieldDelete,
+      renderField: renderField
+    }, otherFieldProps));
   })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText), isLimitReached && (0, _react2.jsx)(_.FieldHelperText, {
     status: _statuses["default"].DEFAULT
   }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && (0, _react2.jsx)(_.Button, {
     "aria-label": "Add field",
-    variant: "link",
+    variant: "text",
     onPress: onFieldAdd,
     sx: {
       width: 'fit-content',