@pingux/astro 1.2.0-alpha.9 → 1.3.1

package/CHANGELOG.md

@@ -3,6 +3,87 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.3.0...@pingux/astro@1.3.1) (2022-03-01)
+
+
+### Bug Fixes
+
+* [UIP-5110] Remove ListLayout and SchemaLayout stories ([e0ac22b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e0ac22b4b0d9134edd4dd7c76e92926b33d62962))
+* [UIP-5152] Deprecate page header component ([a7cf8d6](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a7cf8d6a507805e54a5c3c6bcf047102d2b3813d))
+* [UIP-5178] NumberField - Spec Update ([0e6a2b7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/0e6a2b79799edf4e9b52bf580ca45043c1b810dc))
+* [UIP-5212] RadioField and CheckboxField Spacing Update ([b6e8cb4](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b6e8cb47e783c52caff04eb61518e5db15b4479f))
+* [UIP-5226] MultivaluesField allow props to be spread into TextField ([8806276](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8806276c62bf4ea9cf5d4454fb57a61ec313e375))
+* [UIP-5241] Switch Label Text and Spacing Updates ([d79f7a4](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d79f7a415b109b9d407677e15614464a34e6fdf8))
+* [UIP-5244] SelectField Storybook Updates ([a0391ea](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a0391ea2b17ed9c8d0fd7f21ab535d5305f6e233))
+
+
+
+
+
+# [1.3.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.2.1...@pingux/astro@1.3.0) (2022-02-23)
+
+
+### Bug Fixes
+
+* [UIP-4969] Update astro tab font size ([7af5410](https://gitlab.corp.pingidentity.com/ux/pingux/commit/7af54107825154d795ecb97143fc24364c9b225c))
+* [UIP-5146] Loader Story Update - Change "Loader With Most Common Color" to "Custom Color" ([78fbdd9](https://gitlab.corp.pingidentity.com/ux/pingux/commit/78fbdd938ce5b0a3f87f7821599caf3967c3389b))
+* [UIP-5150] Modal Storybook Improvements ([4a9bd28](https://gitlab.corp.pingidentity.com/ux/pingux/commit/4a9bd28aa9f804cd51cc3a89fd0467ddfd3a2327))
+* [UIP-5225] Add accessible theme for CodeView using JS styles ([6659da6](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6659da6743dd68886750d3c58465b36ad6b551c0))
+* [UIP-5281] NavBar improvements and design review changes ([f8bd0ac](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f8bd0acd6bcedfc92ac7a6615e4b79b19d1fbe9e))
+
+
+### Features
+
+* [UIP-4607] Array field component ([8cca040](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8cca04033e330af5838b38f45e441464900db810))
+* [UIP-5228] Add Storysource and Console addons to Astro ([a96de8c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a96de8cf5c557e74b400ada232caf58974e927cb))
+
+
+
+
+
+## [1.2.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.2.0...@pingux/astro@1.2.1) (2022-02-16)
+
+
+### Bug Fixes
+
+* Applying changes to updated packages for so the version fixes are applied ([16b2e91](https://gitlab.corp.pingidentity.com/ux/pingux/commit/16b2e916f5926678d613f85725f6ec7e86fd359d))
+
+
+
+
+
+# [1.2.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0...@pingux/astro@1.2.0) (2022-02-15)
+
+
+### Bug Fixes
+
+* [UIP-5062] Deprecate danger and text button variants ([c69e7a4](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c69e7a4230bb986eebe5aa35f52b978f8e08f932))
+* [UIP-5112] import messages reducer from index.js ([d1d7d5b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d1d7d5bbfd38b1cea48c01185b9cbded5f563bb4))
+* [UIP-5116] Add content slots to TextAreaField ([43eecd7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/43eecd703e9bc7dc8f8b7997cccc314a38a3fe09))
+* [UIP-5170] Fix broken RockerButtonGroup and incorrect deps in yarn.lock ([89cb5ee](https://gitlab.corp.pingidentity.com/ux/pingux/commit/89cb5ee7638352e9f8781cd9449fd5edc85d74f4))
+* [UIP-5179] Multivalues Chip Spacing Improvements ([c1fc4bc](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c1fc4bce4133b48e3994003f6a74fe67d934104c))
+* [UIP-5183] Link has incorrect styling ([434b144](https://gitlab.corp.pingidentity.com/ux/pingux/commit/434b1447870cfc729b71bcdfc13abc575ead9ad7))
+* [UIP-5185] NumberField doesn't seem to accept 'name' prop ([67aa25b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/67aa25bf0c055348b290709d963dad16b2b22223))
+* [UIP-5217] Input Field in Accordion Clickable ([83f13d3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/83f13d395fca2d1a19bbe877dfd62e52f37402ca))
+* [UIP-5224] Remove .css file dependency for CodeView component ([73a0a89](https://gitlab.corp.pingidentity.com/ux/pingux/commit/73a0a899c4c2891c066c1c52b164edc8cc882fa4))
+* [UIP-5230] OverlayPanel Content Jump ([67c26b5](https://gitlab.corp.pingidentity.com/ux/pingux/commit/67c26b53a9b8f5c40b16b44cbde2ef174b1885f0))
+* [UIP-5245] TextFieldArea Default Rows and Story Update ([30b65cc](https://gitlab.corp.pingidentity.com/ux/pingux/commit/30b65cc38eebdb8a7d0d1f00307e7a0d3518c2ee))
+* Update dependencies for fbjs, lodash, and prism-react-renderer ([fcd37bd](https://gitlab.corp.pingidentity.com/ux/pingux/commit/fcd37bd01bdabe534aec41333ea56ab383e010a5))
+
+
+### Features
+
+* [UIP-4870] Environment Breadcrumb ([e4b1af2](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e4b1af226a716e97981f7ad6ba34e452b6b2fdb5))
+* [UIP-5135] Function to generate mock data ([8513974](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8513974d229642a0c945ba5de4fbd8445587a0f4))
+* [UIP-5158] Input Field - Add Story with Copy Button & Slots ([8726f94](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8726f949c5ae657c4eaafc7983735d969d93d724))
+* [UIP-5164] Color Block Button Variant ([ed3a13b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ed3a13b58d5692dd90abe8b1f878a30b2ced1e3f))
+* [UIP-5187] HelpHint styling does not match spec and needs story ([6ec1cd1](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6ec1cd1d99f9a371af9dbef266a5ad31fdce53f0))
+* [UIP-5210] Filter Variant for Button ([b9e2a9d](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b9e2a9d2d64852bc2af2b0fea6759ac5fc4d5623))
+
+
+
+
+
 # [1.1.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.12...@pingux/astro@1.1.0) (2022-02-02)
 
 

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

@@ -50,7 +50,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _i18n = require("@react-aria/i18n");
 
-var _AccordionGridContext = require("./AccordionGridContext");
+var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _AccordionGridItem = _interopRequireDefault(require("../AccordionGridItem"));
 
@@ -85,8 +85,7 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   var _context2;
 
   var disabledKeys = props.disabledKeys,
-      selectedKeys = props.selectedKeys,
-      onSelectionChange = props.onSelectionChange;
+      containerProps = props.containerProps;
   var accordionGridRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
@@ -111,9 +110,11 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       columnCount: 1,
       items: (0, _map["default"])(_context = (0, _from["default"])(collection)).call(_context, function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
+          key: "row-".concat(item.key),
           hasChildNodes: true,
           childNodes: [{
-            key: "cell-".concat(item.key),
+            key: item.key,
+            // use key for first cell, fixes selection after changes from UIP-5170
             type: 'cell',
             index: 0,
             value: null,
@@ -139,12 +140,11 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   }, [collection]);
   var state = (0, _grid.useGridState)(_objectSpread(_objectSpread({}, props), {}, {
     disabledKeys: disabledKeys,
-    selectedKeys: selectedKeys,
     collection: gridCollection,
-    selectionMode: 'multiple',
-    onSelectionChange: onSelectionChange,
-    allowsCellSelection: true
-  }));
+    selectionMode: 'multiple'
+  })); // Required to enable header selection
+
+  state.selectionManager.allowsCellSelection = true;
   var keyboardDelegate = (0, _react.useMemo)(function () {
     return new _grid2.GridKeyboardDelegate({
       collection: state.collection,
@@ -157,7 +157,6 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   }, [state, accordionGridRef, direction, collator]);
 
   var _useGrid = (0, _grid2.useGrid)(_objectSpread(_objectSpread({}, props), {}, {
-    isVirtualized: true,
     keyboardDelegate: keyboardDelegate
   }), state, accordionGridRef),
       gridProps = _useGrid.gridProps;
@@ -167,7 +166,7 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps), {
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps, containerProps), {
     ref: accordionGridRef
   }), (0, _map["default"])(_context2 = (0, _from["default"])(state.collection)).call(_context2, function (item) {
     return (0, _react2.jsx)(_AccordionGridItem["default"], (0, _extends2["default"])({
@@ -177,6 +176,27 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   })));
 });
 AccordionGridGroup.propTypes = {
+  /**
+   * The currently selected keys in the collection (uncontrolled).
+   *
+   * `selectedKeys="all"` can be used to select every key.
+   */
+  defaultSelectedKeys: _isIterable.isIterableProp,
+
+  /**
+   * The currently selected keys in the collection (controlled).
+   *
+   * `selectedKeys="all"` can be used to select every key.
+   */
+  selectedKeys: _isIterable.isIterableProp,
+
+  /**
+    * Callback function that fires when the selected key changes.
+    *
+    * `(selectedKeys: Set) => void`
+   */
+  onSelectionChange: _propTypes["default"].func,
+
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.
@@ -189,6 +209,9 @@ AccordionGridGroup.propTypes = {
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: _propTypes["default"].string,
 
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: _propTypes["default"].shape({}),
+
   /** Defines a string value that labels the current element. */
   'aria-label': _propTypes["default"].string,
 
@@ -202,17 +225,7 @@ AccordionGridGroup.propTypes = {
    * Identifies the element (or elements) that provide a detailed, extended description for
    * the object.
   */
-  'aria-details': _propTypes["default"].string,
-
-  /**
-   * The currently selected keys in the collection (controlled).
-   *
-   * `selectedKeys="all"` can be used to select every key.
-   */
-  selectedKeys: _isIterable.isIterableProp,
-
-  /** Callback function that fires when the selected key changes. */
-  onSelectionChange: _propTypes["default"].func
+  'aria-details': _propTypes["default"].string
 };
 AccordionGridGroup.defaultProps = {
   'aria-label': 'accordion'

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

@@ -10,12 +10,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.Default = exports["default"] = void 0;
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+exports.Controlled = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _collections = require("@react-stately/collections");
@@ -97,188 +97,167 @@ var _default = {
 };
 exports["default"] = _default;
 
-var Default = function Default() {
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedKeys = _useState2[0],
-      setselectedKeys = _useState2[1];
+var Header = function Header(props) {
+  var item = props.item;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: {
+      flexGrow: 1
+    }
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignSelf: "center",
+    sx: {
+      flexGrow: 1,
+      width: '50%'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 3,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    variant: "itemTitle",
+    alignSelf: "center"
+  }, item.name)), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignSelf: "center",
+    sx: {
+      flexGrow: 1,
+      width: '50%'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 0,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    alignSelf: "center"
+  }, item.organizations.length, " Organizations"), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignSelf: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "create-icon",
+    sx: {
+      mr: '4px',
+      height: '26px',
+      width: '26px'
+    }
+  }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "vertical-lines-icon",
+    sx: {
+      mr: '4px',
+      height: '26px',
+      width: '26px'
+    }
+  }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
+};
+
+var Body = function Body(props) {
+  var _context;
+
+  var item = props.item;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      flexGrow: 1,
+      width: 'calc(50% - 20px)'
+    }
+  }, (0, _react2.jsx)(_index.Link, {
+    "aria-label": "permissions",
+    variant: "link",
+    sx: {
+      marginTop: '15px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textDecoration: 'none'
+    },
+    href: "https://www.pingidentity.com",
+    target: "_blank"
+  }, "View permissions")), (0, _react2.jsx)(_index.Box, {
+    sx: {
+      flexGrow: 1,
+      width: '50%'
+    }
+  }, (0, _map["default"])(_context = item.organizations).call(_context, function (org) {
+    var _context2;
 
-  var Header = function Header(props) {
-    var item = props.item;
     return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
+      key: "box".concat(org.name),
       sx: {
-        flexGrow: 1
-      }
-    }, (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignSelf: "center",
-      sx: {
-        flexGrow: 1,
-        width: '50%'
-      }
-    }, (0, _react2.jsx)(_index.Text, {
-      sx: {
-        fontWeight: 3,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden'
-      },
-      variant: "itemTitle",
-      alignSelf: "center"
-    }, item.name)), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignSelf: "center",
-      sx: {
-        flexGrow: 1,
-        width: '50%'
+        marginTop: '15px',
+        mb: '15px'
       }
     }, (0, _react2.jsx)(_index.Text, {
       sx: {
-        fontWeight: 0,
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden'
       },
-      alignSelf: "center"
-    }, item.organizations.length, " Organizations"), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignSelf: "center",
-      sx: {
-        ml: 'auto'
-      }
-    }, (0, _react2.jsx)(_index.IconButton, {
-      "aria-label": "create-icon",
-      sx: {
-        mr: '4px',
-        height: '26px',
-        width: '26px'
-      }
-    }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
-      "aria-label": "vertical-lines-icon",
-      sx: {
-        mr: '4px',
-        height: '26px',
-        width: '26px'
-      }
-    }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
-  };
-
-  var Body = function Body(props) {
-    var _context;
+      key: "text".concat(org.name)
+    }, org.name), (0, _map["default"])(_context2 = org.populations).call(_context2, function (pop) {
+      return (0, _react2.jsx)(_index.Text, {
+        key: pop,
+        sx: {
+          marginLeft: 'md',
+          mt: '10px',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden'
+        }
+      }, pop, ")");
+    }));
+  })));
+};
 
-    var item = props.item;
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true
-    }, (0, _react2.jsx)(_index.Box, {
+var Default = function Default() {
+  return (// See story source for info about the data used
+    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
       sx: {
-        flexGrow: 1,
-        width: 'calc(50% - 20px)'
+        fontWeight: 3,
+        fontSize: '13px'
       }
-    }, (0, _react2.jsx)(_index.Link, {
-      "aria-label": "permissions",
-      variant: "link",
-      sx: {
-        marginTop: '15px',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        textDecoration: 'none'
-      },
-      href: "https://www.pingidentity.com",
-      target: "_blank"
-    }, "View permissions")), (0, _react2.jsx)(_index.Box, {
+    }, "Role"), (0, _react2.jsx)(_index.Separator, {
       sx: {
-        flexGrow: 1,
-        width: '50%'
+        mb: 0
       }
-    }, (0, _map["default"])(_context = item.organizations).call(_context, function (org) {
-      var _context2;
-
-      return (0, _react2.jsx)(_index.Box, {
-        key: "box".concat(org.name),
+    }), (0, _react2.jsx)(_AccordionGridGroup["default"], {
+      items: data,
+      defaultSelectedKeys: ['Environment']
+    }, function (item) {
+      return (0, _react2.jsx)(_collections.Item, {
+        key: item.key,
+        textValue: item.name
+      }, (0, _react2.jsx)(Header, {
+        item: item
+      }), (0, _react2.jsx)(Body, {
+        item: item
+      }), item.key !== 'Organization' ? (0, _react2.jsx)(_index.Separator, {
         sx: {
-          marginTop: '15px',
-          mb: '15px'
+          m: 0,
+          bg: 'neutral.90'
         }
-      }, (0, _react2.jsx)(_index.Text, {
-        sx: {
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden'
-        },
-        key: "text".concat(org.name)
-      }, org.name), (0, _map["default"])(_context2 = org.populations).call(_context2, function (pop) {
-        return (0, _react2.jsx)(_index.Text, {
-          key: pop,
-          sx: {
-            marginLeft: 'md',
-            mt: '10px',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden'
-          }
-        }, pop, ")");
-      }));
-    })));
-  };
+      }) : null);
+    }))
+  );
+};
+
+exports.Default = Default;
+
+var Controlled = function Controlled() {
+  var _useState = (0, _react.useState)(['Client']),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
 
-  return (// const data = [
-    //   {
-    //     name: 'Client Application Developer',
-    //     key: '1',
-    //     organizations: [
-    //       {
-    //         name: 'Montana (Environment)',
-    //         populations: [
-    //           'Administrators (Population)',
-    //           'Other Population (Population)',
-    //         ],
-    //       },
-    //       {
-    //         name: 'Boston (Environment)',
-    //         populations: [
-    //         ],
-    //       },
-    //     ],
-    //   },
-    //   {
-    //     name: 'Environment Admin',
-    //     key: '2',
-    //     organizations: [
-    //       {
-    //         name: 'Montana (Environment)',
-    //         populations: [
-    //           'Administrators (Population)',
-    //           'Other Population (Population)',
-    //         ],
-    //       },
-    //       {
-    //         name: 'Boston (Environment)',
-    //         populations: [
-    //         ],
-    //       },
-    //     ],
-    //   },
-    //   {
-    //     name: 'Organization Admin',
-    //     key: '3',
-    //     organizations: [
-    //       {
-    //         name: 'Montana (Environment)',
-    //         populations: [
-    //           'Administrators (Population)',
-    //           'Other Population (Population)',
-    //         ],
-    //       },
-    //       {
-    //         name: 'Boston (Environment)',
-    //         populations: [
-    //         ],
-    //       },
-    //     ],
-    //   },
-    // ];
+  return (// See story source for info about the data used
     (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
       sx: {
         fontWeight: 3,
@@ -291,7 +270,7 @@ var Default = function Default() {
     }), (0, _react2.jsx)(_AccordionGridGroup["default"], {
       items: data,
       selectedKeys: selectedKeys,
-      onSelectionChange: setselectedKeys
+      onSelectionChange: setSelectedKeys
     }, function (item) {
       return (0, _react2.jsx)(_collections.Item, {
         key: item.key,
@@ -310,4 +289,4 @@ var Default = function Default() {
   );
 };
 
-exports.Default = Default;
+exports.Controlled = Controlled;

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

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -63,23 +67,6 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
     }
   }
 });
-test('button press', function () {
-  var onPress = jest.fn();
-  getComponent({
-    onPress: onPress
-  });
-
-  var buttons = _testWrapper.screen.getAllByRole('gridcell');
-
-  var selectedItem = buttons[0];
-  expect(selectedItem).toBeInTheDocument();
-  expect(selectedItem).not.toHaveClass('is-pressed');
-  expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
-
-  _testWrapper.fireEvent.mouseDown(selectedItem);
-
-  expect(selectedItem).toHaveClass('is-pressed');
-});
 test('button press uses callback', function () {
   var onPress = jest.fn();
   getComponent({
@@ -92,9 +79,7 @@ test('button press uses callback', function () {
   expect(selectedItem).not.toHaveClass('is-pressed');
   expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
 
-  _testWrapper.fireEvent.mouseDown(selectedItem);
-
-  _testWrapper.fireEvent.mouseUp(selectedItem);
+  _userEvent["default"].click(selectedItem);
 
   expect(onPress).toHaveBeenCalled();
 });
@@ -237,16 +222,26 @@ test('disabled keys prop disables an accordion item, and disables focus', functi
   expect(selectedRow).toHaveClass('is-disabled');
   expect(selectedRow).not.toHaveClass('is-focused');
 });
-test('default expanded keys expands an accordion item', function () {
-  getComponent({
-    selectedKeys: ['first']
-  });
-
-  var row = _testWrapper.screen.getAllByRole('row');
-
-  var selectedRow = row[0];
-  expect(selectedRow).toHaveAttribute('aria-selected', 'true');
-});
+test('default expanded keys expands an accordion item', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent({
+            selectedKeys: ['first']
+          });
+          _context.next = 3;
+          return (0, _testWrapper.waitFor)(function () {
+            return expect(_testWrapper.screen.getAllByRole('row')[0]).toHaveAttribute('aria-selected', 'true');
+          });
+
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
 test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
   getComponentInOverlayPanel();