@pingux/astro 1.2.0-alpha.9 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js +32 -25
  3. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +148 -169
  4. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +25 -30
  5. package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js +29 -14
  6. package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +3 -3
  7. package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +16 -18
  8. package/lib/cjs/components/AccordionGroup/AccordionGroup.js +2 -1
  9. package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +20 -1
  10. package/lib/cjs/components/Breadcrumbs/Breadcrumbs.stories.js +3 -3
  11. package/lib/cjs/components/Button/Button.js +14 -2
  12. package/lib/cjs/components/Button/Button.stories.js +33 -33
  13. package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +5 -3
  14. package/lib/cjs/components/Link/Link.js +2 -1
  15. package/lib/cjs/components/ListView/ListView.js +9 -13
  16. package/lib/cjs/components/ListViewItem/ListViewItem.js +15 -3
  17. package/lib/cjs/components/Modal/Modal.stories.js +1 -1
  18. package/lib/cjs/components/RockerButton/RockerButton.js +14 -22
  19. package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.js +5 -9
  20. package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js +4 -22
  21. package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.test.js +5 -14
  22. package/lib/cjs/components/SearchField/SearchField.stories.js +1 -15
  23. package/lib/cjs/components/TextAreaField/TextAreaField.js +54 -9
  24. package/lib/cjs/components/TextAreaField/TextAreaField.stories.js +31 -52
  25. package/lib/cjs/components/TextAreaField/TextAreaField.test.js +12 -0
  26. package/lib/cjs/context/AccordionGridContext/index.js +20 -0
  27. package/lib/cjs/hooks/useAriaLabelWarning/useAriaLabelWarning.js +2 -1
  28. package/lib/cjs/hooks/useField/useField.js +5 -0
  29. package/lib/cjs/hooks/useRockerButton/useRockerButton.js +4 -6
  30. package/lib/cjs/layouts/ListLayout.stories.js +6 -6
  31. package/lib/cjs/recipes/ArrayField.stories.js +1 -1
  32. package/lib/cjs/recipes/ConditionalFilter.stories.js +7 -3
  33. package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js +1 -1
  34. package/lib/cjs/styles/variants/boxes.js +9 -0
  35. package/lib/cjs/styles/variants/buttons.js +20 -0
  36. package/lib/components/AccordionGridGroup/AccordionGridGroup.js +32 -24
  37. package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +143 -166
  38. package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +24 -25
  39. package/lib/components/AccordionGridItem/AccordionGridItem.js +29 -15
  40. package/lib/components/AccordionGridItem/AccordionGridItemBody.js +4 -4
  41. package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +19 -20
  42. package/lib/components/AccordionGroup/AccordionGroup.js +2 -1
  43. package/lib/components/AccordionGroup/AccordionGroup.test.js +16 -2
  44. package/lib/components/Breadcrumbs/Breadcrumbs.stories.js +3 -3
  45. package/lib/components/Button/Button.js +15 -3
  46. package/lib/components/Button/Button.stories.js +17 -15
  47. package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +5 -3
  48. package/lib/components/Link/Link.js +2 -1
  49. package/lib/components/ListView/ListView.js +9 -12
  50. package/lib/components/ListViewItem/ListViewItem.js +14 -3
  51. package/lib/components/Modal/Modal.stories.js +1 -1
  52. package/lib/components/RockerButton/RockerButton.js +14 -21
  53. package/lib/components/RockerButtonGroup/RockerButtonGroup.js +5 -9
  54. package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js +2 -17
  55. package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js +5 -11
  56. package/lib/components/SearchField/SearchField.stories.js +0 -11
  57. package/lib/components/TextAreaField/TextAreaField.js +54 -10
  58. package/lib/components/TextAreaField/TextAreaField.stories.js +26 -42
  59. package/lib/components/TextAreaField/TextAreaField.test.js +13 -0
  60. package/lib/context/AccordionGridContext/index.js +5 -0
  61. package/lib/hooks/useAriaLabelWarning/useAriaLabelWarning.js +2 -1
  62. package/lib/hooks/useField/useField.js +5 -0
  63. package/lib/hooks/useRockerButton/useRockerButton.js +4 -6
  64. package/lib/layouts/ListLayout.stories.js +6 -6
  65. package/lib/recipes/ArrayField.stories.js +1 -1
  66. package/lib/recipes/ConditionalFilter.stories.js +7 -3
  67. package/lib/recipes/RadioButtonsWithLinks.stories.js +1 -1
  68. package/lib/styles/variants/boxes.js +9 -0
  69. package/lib/styles/variants/buttons.js +20 -0
  70. package/package.json +2 -2
  71. package/lib/cjs/components/AccordionGridGroup/AccordionGridContext.js +0 -17
  72. package/lib/components/AccordionGridGroup/AccordionGridContext.js +0 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,49 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.2.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.2.0...@pingux/astro@1.2.1) (2022-02-16)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * Applying changes to updated packages for so the version fixes are applied ([16b2e91](https://gitlab.corp.pingidentity.com/ux/pingux/commit/16b2e916f5926678d613f85725f6ec7e86fd359d))
12
+
13
+
14
+
15
+
16
+
17
+ # [1.2.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0...@pingux/astro@1.2.0) (2022-02-15)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * [UIP-5062] Deprecate danger and text button variants ([c69e7a4](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c69e7a4230bb986eebe5aa35f52b978f8e08f932))
23
+ * [UIP-5112] import messages reducer from index.js ([d1d7d5b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d1d7d5bbfd38b1cea48c01185b9cbded5f563bb4))
24
+ * [UIP-5116] Add content slots to TextAreaField ([43eecd7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/43eecd703e9bc7dc8f8b7997cccc314a38a3fe09))
25
+ * [UIP-5170] Fix broken RockerButtonGroup and incorrect deps in yarn.lock ([89cb5ee](https://gitlab.corp.pingidentity.com/ux/pingux/commit/89cb5ee7638352e9f8781cd9449fd5edc85d74f4))
26
+ * [UIP-5179] Multivalues Chip Spacing Improvements ([c1fc4bc](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c1fc4bce4133b48e3994003f6a74fe67d934104c))
27
+ * [UIP-5183] Link has incorrect styling ([434b144](https://gitlab.corp.pingidentity.com/ux/pingux/commit/434b1447870cfc729b71bcdfc13abc575ead9ad7))
28
+ * [UIP-5185] NumberField doesn't seem to accept 'name' prop ([67aa25b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/67aa25bf0c055348b290709d963dad16b2b22223))
29
+ * [UIP-5217] Input Field in Accordion Clickable ([83f13d3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/83f13d395fca2d1a19bbe877dfd62e52f37402ca))
30
+ * [UIP-5224] Remove .css file dependency for CodeView component ([73a0a89](https://gitlab.corp.pingidentity.com/ux/pingux/commit/73a0a899c4c2891c066c1c52b164edc8cc882fa4))
31
+ * [UIP-5230] OverlayPanel Content Jump ([67c26b5](https://gitlab.corp.pingidentity.com/ux/pingux/commit/67c26b53a9b8f5c40b16b44cbde2ef174b1885f0))
32
+ * [UIP-5245] TextFieldArea Default Rows and Story Update ([30b65cc](https://gitlab.corp.pingidentity.com/ux/pingux/commit/30b65cc38eebdb8a7d0d1f00307e7a0d3518c2ee))
33
+ * Update dependencies for fbjs, lodash, and prism-react-renderer ([fcd37bd](https://gitlab.corp.pingidentity.com/ux/pingux/commit/fcd37bd01bdabe534aec41333ea56ab383e010a5))
34
+
35
+
36
+ ### Features
37
+
38
+ * [UIP-4870] Environment Breadcrumb ([e4b1af2](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e4b1af226a716e97981f7ad6ba34e452b6b2fdb5))
39
+ * [UIP-5135] Function to generate mock data ([8513974](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8513974d229642a0c945ba5de4fbd8445587a0f4))
40
+ * [UIP-5158] Input Field - Add Story with Copy Button & Slots ([8726f94](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8726f949c5ae657c4eaafc7983735d969d93d724))
41
+ * [UIP-5164] Color Block Button Variant ([ed3a13b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ed3a13b58d5692dd90abe8b1f878a30b2ced1e3f))
42
+ * [UIP-5187] HelpHint styling does not match spec and needs story ([6ec1cd1](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6ec1cd1d99f9a371af9dbef266a5ad31fdce53f0))
43
+ * [UIP-5210] Filter Variant for Button ([b9e2a9d](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b9e2a9d2d64852bc2af2b0fea6759ac5fc4d5623))
44
+
45
+
46
+
47
+
48
+
6
49
  # [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)
7
50
 
8
51
 
@@ -42,15 +42,13 @@ var _grid = require("@react-stately/grid");
42
42
 
43
43
  var _grid2 = require("@react-aria/grid");
44
44
 
45
- var _utils = require("@react-aria/utils");
46
-
47
45
  var _list = require("@react-stately/list");
48
46
 
49
47
  var _propTypes = _interopRequireDefault(require("prop-types"));
50
48
 
51
49
  var _i18n = require("@react-aria/i18n");
52
50
 
53
- var _AccordionGridContext = require("./AccordionGridContext");
51
+ var _AccordionGridContext = require("../../context/AccordionGridContext");
54
52
 
55
53
  var _AccordionGridItem = _interopRequireDefault(require("../AccordionGridItem"));
56
54
 
@@ -84,9 +82,7 @@ exports.collectionTypes = collectionTypes;
84
82
  var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
85
83
  var _context2;
86
84
 
87
- var disabledKeys = props.disabledKeys,
88
- selectedKeys = props.selectedKeys,
89
- onSelectionChange = props.onSelectionChange;
85
+ var disabledKeys = props.disabledKeys;
90
86
  var accordionGridRef = (0, _react.useRef)();
91
87
  /* istanbul ignore next */
92
88
 
@@ -111,9 +107,11 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
111
107
  columnCount: 1,
112
108
  items: (0, _map["default"])(_context = (0, _from["default"])(collection)).call(_context, function (item) {
113
109
  return _objectSpread(_objectSpread({}, item), {}, {
110
+ key: "row-".concat(item.key),
114
111
  hasChildNodes: true,
115
112
  childNodes: [{
116
- key: "cell-".concat(item.key),
113
+ key: item.key,
114
+ // use key for first cell, fixes selection after changes from UIP-5170
117
115
  type: 'cell',
118
116
  index: 0,
119
117
  value: null,
@@ -139,12 +137,11 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
139
137
  }, [collection]);
140
138
  var state = (0, _grid.useGridState)(_objectSpread(_objectSpread({}, props), {}, {
141
139
  disabledKeys: disabledKeys,
142
- selectedKeys: selectedKeys,
143
140
  collection: gridCollection,
144
- selectionMode: 'multiple',
145
- onSelectionChange: onSelectionChange,
146
- allowsCellSelection: true
147
- }));
141
+ selectionMode: 'multiple'
142
+ })); // Required to enable header selection
143
+
144
+ state.selectionManager.allowsCellSelection = true;
148
145
  var keyboardDelegate = (0, _react.useMemo)(function () {
149
146
  return new _grid2.GridKeyboardDelegate({
150
147
  collection: state.collection,
@@ -157,7 +154,6 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
157
154
  }, [state, accordionGridRef, direction, collator]);
158
155
 
159
156
  var _useGrid = (0, _grid2.useGrid)(_objectSpread(_objectSpread({}, props), {}, {
160
- isVirtualized: true,
161
157
  keyboardDelegate: keyboardDelegate
162
158
  }), state, accordionGridRef),
163
159
  gridProps = _useGrid.gridProps;
@@ -167,7 +163,7 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
167
163
  state: state,
168
164
  keyboardDelegate: keyboardDelegate
169
165
  }
170
- }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps), {
166
+ }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, gridProps, {
171
167
  ref: accordionGridRef
172
168
  }), (0, _map["default"])(_context2 = (0, _from["default"])(state.collection)).call(_context2, function (item) {
173
169
  return (0, _react2.jsx)(_AccordionGridItem["default"], (0, _extends2["default"])({
@@ -177,6 +173,27 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
177
173
  })));
178
174
  });
179
175
  AccordionGridGroup.propTypes = {
176
+ /**
177
+ * The currently selected keys in the collection (uncontrolled).
178
+ *
179
+ * `selectedKeys="all"` can be used to select every key.
180
+ */
181
+ defaultSelectedKeys: _isIterable.isIterableProp,
182
+
183
+ /**
184
+ * The currently selected keys in the collection (controlled).
185
+ *
186
+ * `selectedKeys="all"` can be used to select every key.
187
+ */
188
+ selectedKeys: _isIterable.isIterableProp,
189
+
190
+ /**
191
+ * Callback function that fires when the selected key changes.
192
+ *
193
+ * `(selectedKeys: Set) => void`
194
+ */
195
+ onSelectionChange: _propTypes["default"].func,
196
+
180
197
  /**
181
198
  * The item keys that are disabled. These items cannot be selected, focused, or otherwise
182
199
  * interacted with.
@@ -202,17 +219,7 @@ AccordionGridGroup.propTypes = {
202
219
  * Identifies the element (or elements) that provide a detailed, extended description for
203
220
  * the object.
204
221
  */
205
- 'aria-details': _propTypes["default"].string,
206
-
207
- /**
208
- * The currently selected keys in the collection (controlled).
209
- *
210
- * `selectedKeys="all"` can be used to select every key.
211
- */
212
- selectedKeys: _isIterable.isIterableProp,
213
-
214
- /** Callback function that fires when the selected key changes. */
215
- onSelectionChange: _propTypes["default"].func
222
+ 'aria-details': _propTypes["default"].string
216
223
  };
217
224
  AccordionGridGroup.defaultProps = {
218
225
  'aria-label': 'accordion'
@@ -10,12 +10,12 @@ _Object$defineProperty(exports, "__esModule", {
10
10
  value: true
11
11
  });
12
12
 
13
- exports.Default = exports["default"] = void 0;
14
-
15
- var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
13
+ exports.Controlled = exports.Default = exports["default"] = void 0;
16
14
 
17
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
18
16
 
17
+ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
18
+
19
19
  var _react = _interopRequireWildcard(require("react"));
20
20
 
21
21
  var _collections = require("@react-stately/collections");
@@ -97,188 +97,167 @@ var _default = {
97
97
  };
98
98
  exports["default"] = _default;
99
99
 
100
- var Default = function Default() {
101
- var _useState = (0, _react.useState)([]),
102
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
103
- selectedKeys = _useState2[0],
104
- setselectedKeys = _useState2[1];
100
+ var Header = function Header(props) {
101
+ var item = props.item;
102
+ return (0, _react2.jsx)(_index.Box, {
103
+ isRow: true,
104
+ sx: {
105
+ flexGrow: 1
106
+ }
107
+ }, (0, _react2.jsx)(_index.Box, {
108
+ isRow: true,
109
+ alignSelf: "center",
110
+ sx: {
111
+ flexGrow: 1,
112
+ width: '50%'
113
+ }
114
+ }, (0, _react2.jsx)(_index.Text, {
115
+ sx: {
116
+ fontWeight: 3,
117
+ textOverflow: 'ellipsis',
118
+ whiteSpace: 'nowrap',
119
+ overflow: 'hidden'
120
+ },
121
+ variant: "itemTitle",
122
+ alignSelf: "center"
123
+ }, item.name)), (0, _react2.jsx)(_index.Box, {
124
+ isRow: true,
125
+ alignSelf: "center",
126
+ sx: {
127
+ flexGrow: 1,
128
+ width: '50%'
129
+ }
130
+ }, (0, _react2.jsx)(_index.Text, {
131
+ sx: {
132
+ fontWeight: 0,
133
+ textOverflow: 'ellipsis',
134
+ whiteSpace: 'nowrap',
135
+ overflow: 'hidden'
136
+ },
137
+ alignSelf: "center"
138
+ }, item.organizations.length, " Organizations"), (0, _react2.jsx)(_index.Box, {
139
+ isRow: true,
140
+ alignSelf: "center",
141
+ sx: {
142
+ ml: 'auto'
143
+ }
144
+ }, (0, _react2.jsx)(_index.IconButton, {
145
+ "aria-label": "create-icon",
146
+ sx: {
147
+ mr: '4px',
148
+ height: '26px',
149
+ width: '26px'
150
+ }
151
+ }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
152
+ "aria-label": "vertical-lines-icon",
153
+ sx: {
154
+ mr: '4px',
155
+ height: '26px',
156
+ width: '26px'
157
+ }
158
+ }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
159
+ };
160
+
161
+ var Body = function Body(props) {
162
+ var _context;
163
+
164
+ var item = props.item;
165
+ return (0, _react2.jsx)(_index.Box, {
166
+ isRow: true
167
+ }, (0, _react2.jsx)(_index.Box, {
168
+ sx: {
169
+ flexGrow: 1,
170
+ width: 'calc(50% - 20px)'
171
+ }
172
+ }, (0, _react2.jsx)(_index.Link, {
173
+ "aria-label": "permissions",
174
+ variant: "link",
175
+ sx: {
176
+ marginTop: '15px',
177
+ whiteSpace: 'nowrap',
178
+ overflow: 'hidden',
179
+ textOverflow: 'ellipsis',
180
+ textDecoration: 'none'
181
+ },
182
+ href: "https://www.pingidentity.com",
183
+ target: "_blank"
184
+ }, "View permissions")), (0, _react2.jsx)(_index.Box, {
185
+ sx: {
186
+ flexGrow: 1,
187
+ width: '50%'
188
+ }
189
+ }, (0, _map["default"])(_context = item.organizations).call(_context, function (org) {
190
+ var _context2;
105
191
 
106
- var Header = function Header(props) {
107
- var item = props.item;
108
192
  return (0, _react2.jsx)(_index.Box, {
109
- isRow: true,
193
+ key: "box".concat(org.name),
110
194
  sx: {
111
- flexGrow: 1
112
- }
113
- }, (0, _react2.jsx)(_index.Box, {
114
- isRow: true,
115
- alignSelf: "center",
116
- sx: {
117
- flexGrow: 1,
118
- width: '50%'
119
- }
120
- }, (0, _react2.jsx)(_index.Text, {
121
- sx: {
122
- fontWeight: 3,
123
- textOverflow: 'ellipsis',
124
- whiteSpace: 'nowrap',
125
- overflow: 'hidden'
126
- },
127
- variant: "itemTitle",
128
- alignSelf: "center"
129
- }, item.name)), (0, _react2.jsx)(_index.Box, {
130
- isRow: true,
131
- alignSelf: "center",
132
- sx: {
133
- flexGrow: 1,
134
- width: '50%'
195
+ marginTop: '15px',
196
+ mb: '15px'
135
197
  }
136
198
  }, (0, _react2.jsx)(_index.Text, {
137
199
  sx: {
138
- fontWeight: 0,
139
200
  textOverflow: 'ellipsis',
140
201
  whiteSpace: 'nowrap',
141
202
  overflow: 'hidden'
142
203
  },
143
- alignSelf: "center"
144
- }, item.organizations.length, " Organizations"), (0, _react2.jsx)(_index.Box, {
145
- isRow: true,
146
- alignSelf: "center",
147
- sx: {
148
- ml: 'auto'
149
- }
150
- }, (0, _react2.jsx)(_index.IconButton, {
151
- "aria-label": "create-icon",
152
- sx: {
153
- mr: '4px',
154
- height: '26px',
155
- width: '26px'
156
- }
157
- }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
158
- "aria-label": "vertical-lines-icon",
159
- sx: {
160
- mr: '4px',
161
- height: '26px',
162
- width: '26px'
163
- }
164
- }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
165
- };
166
-
167
- var Body = function Body(props) {
168
- var _context;
204
+ key: "text".concat(org.name)
205
+ }, org.name), (0, _map["default"])(_context2 = org.populations).call(_context2, function (pop) {
206
+ return (0, _react2.jsx)(_index.Text, {
207
+ key: pop,
208
+ sx: {
209
+ marginLeft: 'md',
210
+ mt: '10px',
211
+ textOverflow: 'ellipsis',
212
+ whiteSpace: 'nowrap',
213
+ overflow: 'hidden'
214
+ }
215
+ }, pop, ")");
216
+ }));
217
+ })));
218
+ };
169
219
 
170
- var item = props.item;
171
- return (0, _react2.jsx)(_index.Box, {
172
- isRow: true
173
- }, (0, _react2.jsx)(_index.Box, {
220
+ var Default = function Default() {
221
+ return (// See story source for info about the data used
222
+ (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
174
223
  sx: {
175
- flexGrow: 1,
176
- width: 'calc(50% - 20px)'
224
+ fontWeight: 3,
225
+ fontSize: '13px'
177
226
  }
178
- }, (0, _react2.jsx)(_index.Link, {
179
- "aria-label": "permissions",
180
- variant: "link",
181
- sx: {
182
- marginTop: '15px',
183
- whiteSpace: 'nowrap',
184
- overflow: 'hidden',
185
- textOverflow: 'ellipsis',
186
- textDecoration: 'none'
187
- },
188
- href: "https://www.pingidentity.com",
189
- target: "_blank"
190
- }, "View permissions")), (0, _react2.jsx)(_index.Box, {
227
+ }, "Role"), (0, _react2.jsx)(_index.Separator, {
191
228
  sx: {
192
- flexGrow: 1,
193
- width: '50%'
229
+ mb: 0
194
230
  }
195
- }, (0, _map["default"])(_context = item.organizations).call(_context, function (org) {
196
- var _context2;
197
-
198
- return (0, _react2.jsx)(_index.Box, {
199
- key: "box".concat(org.name),
231
+ }), (0, _react2.jsx)(_AccordionGridGroup["default"], {
232
+ items: data,
233
+ defaultSelectedKeys: ['Environment']
234
+ }, function (item) {
235
+ return (0, _react2.jsx)(_collections.Item, {
236
+ key: item.key,
237
+ textValue: item.name
238
+ }, (0, _react2.jsx)(Header, {
239
+ item: item
240
+ }), (0, _react2.jsx)(Body, {
241
+ item: item
242
+ }), item.key !== 'Organization' ? (0, _react2.jsx)(_index.Separator, {
200
243
  sx: {
201
- marginTop: '15px',
202
- mb: '15px'
244
+ m: 0,
245
+ bg: 'neutral.90'
203
246
  }
204
- }, (0, _react2.jsx)(_index.Text, {
205
- sx: {
206
- textOverflow: 'ellipsis',
207
- whiteSpace: 'nowrap',
208
- overflow: 'hidden'
209
- },
210
- key: "text".concat(org.name)
211
- }, org.name), (0, _map["default"])(_context2 = org.populations).call(_context2, function (pop) {
212
- return (0, _react2.jsx)(_index.Text, {
213
- key: pop,
214
- sx: {
215
- marginLeft: 'md',
216
- mt: '10px',
217
- textOverflow: 'ellipsis',
218
- whiteSpace: 'nowrap',
219
- overflow: 'hidden'
220
- }
221
- }, pop, ")");
222
- }));
223
- })));
224
- };
247
+ }) : null);
248
+ }))
249
+ );
250
+ };
251
+
252
+ exports.Default = Default;
253
+
254
+ var Controlled = function Controlled() {
255
+ var _useState = (0, _react.useState)(['Client']),
256
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
257
+ selectedKeys = _useState2[0],
258
+ setSelectedKeys = _useState2[1];
225
259
 
226
- return (// const data = [
227
- // {
228
- // name: 'Client Application Developer',
229
- // key: '1',
230
- // organizations: [
231
- // {
232
- // name: 'Montana (Environment)',
233
- // populations: [
234
- // 'Administrators (Population)',
235
- // 'Other Population (Population)',
236
- // ],
237
- // },
238
- // {
239
- // name: 'Boston (Environment)',
240
- // populations: [
241
- // ],
242
- // },
243
- // ],
244
- // },
245
- // {
246
- // name: 'Environment Admin',
247
- // key: '2',
248
- // organizations: [
249
- // {
250
- // name: 'Montana (Environment)',
251
- // populations: [
252
- // 'Administrators (Population)',
253
- // 'Other Population (Population)',
254
- // ],
255
- // },
256
- // {
257
- // name: 'Boston (Environment)',
258
- // populations: [
259
- // ],
260
- // },
261
- // ],
262
- // },
263
- // {
264
- // name: 'Organization Admin',
265
- // key: '3',
266
- // organizations: [
267
- // {
268
- // name: 'Montana (Environment)',
269
- // populations: [
270
- // 'Administrators (Population)',
271
- // 'Other Population (Population)',
272
- // ],
273
- // },
274
- // {
275
- // name: 'Boston (Environment)',
276
- // populations: [
277
- // ],
278
- // },
279
- // ],
280
- // },
281
- // ];
260
+ return (// See story source for info about the data used
282
261
  (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
283
262
  sx: {
284
263
  fontWeight: 3,
@@ -291,7 +270,7 @@ var Default = function Default() {
291
270
  }), (0, _react2.jsx)(_AccordionGridGroup["default"], {
292
271
  items: data,
293
272
  selectedKeys: selectedKeys,
294
- onSelectionChange: setselectedKeys
273
+ onSelectionChange: setSelectedKeys
295
274
  }, function (item) {
296
275
  return (0, _react2.jsx)(_collections.Item, {
297
276
  key: item.key,
@@ -310,4 +289,4 @@ var Default = function Default() {
310
289
  );
311
290
  };
312
291
 
313
- exports.Default = Default;
292
+ exports.Controlled = Controlled;
@@ -2,6 +2,10 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
4
 
5
+ var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
6
+
7
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
8
+
5
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
6
10
 
7
11
  var _react = _interopRequireDefault(require("react"));
@@ -63,23 +67,6 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
63
67
  }
64
68
  }
65
69
  });
66
- test('button press', function () {
67
- var onPress = jest.fn();
68
- getComponent({
69
- onPress: onPress
70
- });
71
-
72
- var buttons = _testWrapper.screen.getAllByRole('gridcell');
73
-
74
- var selectedItem = buttons[0];
75
- expect(selectedItem).toBeInTheDocument();
76
- expect(selectedItem).not.toHaveClass('is-pressed');
77
- expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
78
-
79
- _testWrapper.fireEvent.mouseDown(selectedItem);
80
-
81
- expect(selectedItem).toHaveClass('is-pressed');
82
- });
83
70
  test('button press uses callback', function () {
84
71
  var onPress = jest.fn();
85
72
  getComponent({
@@ -92,9 +79,7 @@ test('button press uses callback', function () {
92
79
  expect(selectedItem).not.toHaveClass('is-pressed');
93
80
  expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
94
81
 
95
- _testWrapper.fireEvent.mouseDown(selectedItem);
96
-
97
- _testWrapper.fireEvent.mouseUp(selectedItem);
82
+ _userEvent["default"].click(selectedItem);
98
83
 
99
84
  expect(onPress).toHaveBeenCalled();
100
85
  });
@@ -237,16 +222,26 @@ test('disabled keys prop disables an accordion item, and disables focus', functi
237
222
  expect(selectedRow).toHaveClass('is-disabled');
238
223
  expect(selectedRow).not.toHaveClass('is-focused');
239
224
  });
240
- test('default expanded keys expands an accordion item', function () {
241
- getComponent({
242
- selectedKeys: ['first']
243
- });
244
-
245
- var row = _testWrapper.screen.getAllByRole('row');
246
-
247
- var selectedRow = row[0];
248
- expect(selectedRow).toHaveAttribute('aria-selected', 'true');
249
- });
225
+ test('default expanded keys expands an accordion item', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
226
+ return _regenerator["default"].wrap(function _callee$(_context) {
227
+ while (1) {
228
+ switch (_context.prev = _context.next) {
229
+ case 0:
230
+ getComponent({
231
+ selectedKeys: ['first']
232
+ });
233
+ _context.next = 3;
234
+ return (0, _testWrapper.waitFor)(function () {
235
+ return expect(_testWrapper.screen.getAllByRole('row')[0]).toHaveAttribute('aria-selected', 'true');
236
+ });
237
+
238
+ case 3:
239
+ case "end":
240
+ return _context.stop();
241
+ }
242
+ }
243
+ }, _callee);
244
+ })));
250
245
  test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
251
246
  getComponentInOverlayPanel();
252
247