@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.
- package/CHANGELOG.md +43 -0
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js +32 -25
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +148 -169
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +25 -30
- package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js +29 -14
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +3 -3
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +16 -18
- package/lib/cjs/components/AccordionGroup/AccordionGroup.js +2 -1
- package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +20 -1
- package/lib/cjs/components/Breadcrumbs/Breadcrumbs.stories.js +3 -3
- package/lib/cjs/components/Button/Button.js +14 -2
- package/lib/cjs/components/Button/Button.stories.js +33 -33
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +5 -3
- package/lib/cjs/components/Link/Link.js +2 -1
- package/lib/cjs/components/ListView/ListView.js +9 -13
- package/lib/cjs/components/ListViewItem/ListViewItem.js +15 -3
- package/lib/cjs/components/Modal/Modal.stories.js +1 -1
- package/lib/cjs/components/RockerButton/RockerButton.js +14 -22
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.js +5 -9
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js +4 -22
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.test.js +5 -14
- package/lib/cjs/components/SearchField/SearchField.stories.js +1 -15
- package/lib/cjs/components/TextAreaField/TextAreaField.js +54 -9
- package/lib/cjs/components/TextAreaField/TextAreaField.stories.js +31 -52
- package/lib/cjs/components/TextAreaField/TextAreaField.test.js +12 -0
- package/lib/cjs/context/AccordionGridContext/index.js +20 -0
- package/lib/cjs/hooks/useAriaLabelWarning/useAriaLabelWarning.js +2 -1
- package/lib/cjs/hooks/useField/useField.js +5 -0
- package/lib/cjs/hooks/useRockerButton/useRockerButton.js +4 -6
- package/lib/cjs/layouts/ListLayout.stories.js +6 -6
- package/lib/cjs/recipes/ArrayField.stories.js +1 -1
- package/lib/cjs/recipes/ConditionalFilter.stories.js +7 -3
- package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js +1 -1
- package/lib/cjs/styles/variants/boxes.js +9 -0
- package/lib/cjs/styles/variants/buttons.js +20 -0
- package/lib/components/AccordionGridGroup/AccordionGridGroup.js +32 -24
- package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +143 -166
- package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +24 -25
- package/lib/components/AccordionGridItem/AccordionGridItem.js +29 -15
- package/lib/components/AccordionGridItem/AccordionGridItemBody.js +4 -4
- package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +19 -20
- package/lib/components/AccordionGroup/AccordionGroup.js +2 -1
- package/lib/components/AccordionGroup/AccordionGroup.test.js +16 -2
- package/lib/components/Breadcrumbs/Breadcrumbs.stories.js +3 -3
- package/lib/components/Button/Button.js +15 -3
- package/lib/components/Button/Button.stories.js +17 -15
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +5 -3
- package/lib/components/Link/Link.js +2 -1
- package/lib/components/ListView/ListView.js +9 -12
- package/lib/components/ListViewItem/ListViewItem.js +14 -3
- package/lib/components/Modal/Modal.stories.js +1 -1
- package/lib/components/RockerButton/RockerButton.js +14 -21
- package/lib/components/RockerButtonGroup/RockerButtonGroup.js +5 -9
- package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js +2 -17
- package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js +5 -11
- package/lib/components/SearchField/SearchField.stories.js +0 -11
- package/lib/components/TextAreaField/TextAreaField.js +54 -10
- package/lib/components/TextAreaField/TextAreaField.stories.js +26 -42
- package/lib/components/TextAreaField/TextAreaField.test.js +13 -0
- package/lib/context/AccordionGridContext/index.js +5 -0
- package/lib/hooks/useAriaLabelWarning/useAriaLabelWarning.js +2 -1
- package/lib/hooks/useField/useField.js +5 -0
- package/lib/hooks/useRockerButton/useRockerButton.js +4 -6
- package/lib/layouts/ListLayout.stories.js +6 -6
- package/lib/recipes/ArrayField.stories.js +1 -1
- package/lib/recipes/ConditionalFilter.stories.js +7 -3
- package/lib/recipes/RadioButtonsWithLinks.stories.js +1 -1
- package/lib/styles/variants/boxes.js +9 -0
- package/lib/styles/variants/buttons.js +20 -0
- package/package.json +2 -2
- package/lib/cjs/components/AccordionGridGroup/AccordionGridContext.js +0 -17
- 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("
|
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:
|
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
|
-
|
146
|
-
|
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"])({},
|
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
|
101
|
-
var
|
102
|
-
|
103
|
-
|
104
|
-
|
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
|
-
|
193
|
+
key: "box".concat(org.name),
|
110
194
|
sx: {
|
111
|
-
|
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
|
-
|
144
|
-
},
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
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
|
-
|
171
|
-
|
172
|
-
|
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
|
-
|
176
|
-
|
224
|
+
fontWeight: 3,
|
225
|
+
fontSize: '13px'
|
177
226
|
}
|
178
|
-
}, (0, _react2.jsx)(_index.
|
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
|
-
|
193
|
-
width: '50%'
|
229
|
+
mb: 0
|
194
230
|
}
|
195
|
-
}, (0,
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
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
|
-
|
202
|
-
|
244
|
+
m: 0,
|
245
|
+
bg: 'neutral.90'
|
203
246
|
}
|
204
|
-
}
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
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 (//
|
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:
|
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.
|
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
|
-
|
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
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
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
|
|