@pingux/astro 2.95.0-alpha.2 → 2.95.0-alpha.3
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/package.json
CHANGED
|
@@ -1,467 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
-
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
5
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
7
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
8
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
9
|
-
value: true
|
|
10
|
-
});
|
|
11
|
-
exports["default"] = exports.Default = void 0;
|
|
12
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
|
13
|
-
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
|
|
14
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
15
|
-
var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
|
|
16
|
-
var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
|
|
17
|
-
var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
|
|
18
|
-
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
19
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
20
|
-
var _DotsVerticalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsVerticalIcon"));
|
|
21
|
-
var _uuid = require("uuid");
|
|
22
|
-
var _useOverlappingMenuHoverState = _interopRequireDefault(require("../hooks/useOverlappingMenuHoverState"));
|
|
23
|
-
var _index = require("../index");
|
|
24
|
-
var _react2 = require("@emotion/react");
|
|
25
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
26
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
-
var _default = {
|
|
28
|
-
title: 'Recipes/Linked List View',
|
|
29
|
-
argTypes: {
|
|
30
|
-
loadingState: {
|
|
31
|
-
control: {
|
|
32
|
-
type: 'select'
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
disabledKeys: {},
|
|
36
|
-
items: {
|
|
37
|
-
control: {
|
|
38
|
-
type: 'none'
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
onSelectionChange: {
|
|
42
|
-
control: 'none'
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
args: {
|
|
46
|
-
disabledKeys: [],
|
|
47
|
-
// eslint-disable-next-line no-console
|
|
48
|
-
onSelectionChange: console.log
|
|
49
|
-
},
|
|
50
|
-
parameters: {
|
|
51
|
-
docs: {
|
|
52
|
-
source: {
|
|
53
|
-
type: 'code'
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
exports["default"] = _default;
|
|
59
|
-
var testData = [{
|
|
60
|
-
key: 'Default Risk Policy',
|
|
61
|
-
name: 'Default Risk Policy',
|
|
62
|
-
policyId: 'sdfasdfasdf-124123asdf',
|
|
63
|
-
id: '1',
|
|
64
|
-
hasSeparator: false,
|
|
65
|
-
hasInsetSeparator: true,
|
|
66
|
-
badgeText: 'default',
|
|
67
|
-
childrenObjects: [{
|
|
68
|
-
key: 'Staging Policy',
|
|
69
|
-
name: 'Staging Policy',
|
|
70
|
-
policyId: '23423sdfsdf-124123asdf',
|
|
71
|
-
id: '4',
|
|
72
|
-
expirationText: 'Expiring On: 2022-12-08',
|
|
73
|
-
hasSeparator: true
|
|
74
|
-
}]
|
|
75
|
-
}, {
|
|
76
|
-
key: 'Policy4',
|
|
77
|
-
name: 'Policy4',
|
|
78
|
-
policyId: '9234890324k-124123asdf',
|
|
79
|
-
badgeText: 'default',
|
|
80
|
-
id: '2',
|
|
81
|
-
hasSeparator: true
|
|
82
|
-
}, {
|
|
83
|
-
key: 'Policy5',
|
|
84
|
-
name: 'Policy5',
|
|
85
|
-
policyId: 'asdf23zaa-124123asdf',
|
|
86
|
-
id: '3'
|
|
87
|
-
}];
|
|
88
|
-
|
|
89
|
-
// IMPORTANT PLEASE READ
|
|
90
|
-
// in order for the list portion of this recipe to function correctly,
|
|
91
|
-
// the array of objects that will be used to create
|
|
92
|
-
// the production and staging rows, will need to be flat and sorted.
|
|
93
|
-
// I.e. the staging rows will need to immediately follow the prod row that they correspond to.
|
|
94
|
-
// This flat, sorted array will then be passed into the listview component as the items prop.
|
|
95
|
-
// You may not need these functions if you are able to change the data shape on the back end
|
|
96
|
-
// (which is recommended for performance reasons)
|
|
97
|
-
|
|
98
|
-
var flattenArray = function flattenArray(array) {
|
|
99
|
-
var newArray = array;
|
|
100
|
-
(0, _forEach["default"])(newArray).call(newArray, function (item) {
|
|
101
|
-
if (item.childrenObjects) {
|
|
102
|
-
var _context;
|
|
103
|
-
(0, _forEach["default"])(_context = item.childrenObjects).call(_context, function (obj) {
|
|
104
|
-
var newObj = obj;
|
|
105
|
-
newObj.parentId = item.id;
|
|
106
|
-
newArray.push(newObj);
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
return newArray;
|
|
111
|
-
};
|
|
112
|
-
var testSort = function testSort(array) {
|
|
113
|
-
var newArray = array;
|
|
114
|
-
(0, _forEach["default"])(newArray).call(newArray, function (item, i) {
|
|
115
|
-
if (item.parentId) {
|
|
116
|
-
var thisindex = (0, _findIndex["default"])(newArray).call(newArray, function (object) {
|
|
117
|
-
return object.id === item.parentId;
|
|
118
|
-
});
|
|
119
|
-
var element = (0, _splice["default"])(newArray).call(newArray, i, 1)[0];
|
|
120
|
-
(0, _splice["default"])(newArray).call(newArray, thisindex + 1, 0, element);
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
|
-
return newArray;
|
|
124
|
-
};
|
|
125
|
-
var unsorted = flattenArray(testData);
|
|
126
|
-
var sorted = testSort(unsorted);
|
|
127
|
-
var sx = {
|
|
128
|
-
badge: {
|
|
129
|
-
alignItems: 'center',
|
|
130
|
-
alignSelf: 'center',
|
|
131
|
-
ml: 'lg',
|
|
132
|
-
p: '3px 5px 2px 5px'
|
|
133
|
-
},
|
|
134
|
-
bottomBracket: {
|
|
135
|
-
container: {
|
|
136
|
-
ml: 12,
|
|
137
|
-
top: -2,
|
|
138
|
-
position: 'relative',
|
|
139
|
-
maxWidth: 15
|
|
140
|
-
},
|
|
141
|
-
separator: {
|
|
142
|
-
backgroundColor: 'decorative.7',
|
|
143
|
-
marginLeft: '2px !important',
|
|
144
|
-
maxHeight: '30px',
|
|
145
|
-
width: '2px !important'
|
|
146
|
-
},
|
|
147
|
-
separatorBox: {
|
|
148
|
-
alignItems: 'center',
|
|
149
|
-
flexDirection: 'row',
|
|
150
|
-
minWidth: 9
|
|
151
|
-
}
|
|
152
|
-
},
|
|
153
|
-
expirationBadge: {
|
|
154
|
-
alignItems: 'center',
|
|
155
|
-
alignSelf: 'center',
|
|
156
|
-
border: 'solid 1px',
|
|
157
|
-
borderColor: 'neutral.80',
|
|
158
|
-
p: '3px 5px 2px 5px'
|
|
159
|
-
},
|
|
160
|
-
listElement: {
|
|
161
|
-
container: {
|
|
162
|
-
height: 73,
|
|
163
|
-
pl: 24,
|
|
164
|
-
pr: 14
|
|
165
|
-
},
|
|
166
|
-
subText: {
|
|
167
|
-
color: 'text.secondary',
|
|
168
|
-
fontSize: 'sm',
|
|
169
|
-
fontWeight: 0
|
|
170
|
-
},
|
|
171
|
-
text: {
|
|
172
|
-
color: 'text.primary',
|
|
173
|
-
fontSize: 'md',
|
|
174
|
-
fontWeight: 1
|
|
175
|
-
},
|
|
176
|
-
textBox: {
|
|
177
|
-
alignItems: 'center',
|
|
178
|
-
justifyContent: 'center',
|
|
179
|
-
marginRight: 'auto'
|
|
180
|
-
}
|
|
181
|
-
},
|
|
182
|
-
topBracket: {
|
|
183
|
-
top: 50,
|
|
184
|
-
left: 12,
|
|
185
|
-
bottom: -1,
|
|
186
|
-
position: 'absolute'
|
|
187
|
-
}
|
|
188
|
-
};
|
|
189
|
-
var Default = function Default(_ref) {
|
|
190
|
-
var _context2;
|
|
191
|
-
var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
|
|
192
|
-
var _useState = (0, _react.useState)((0, _concat["default"])(_context2 = []).call(_context2, sorted)),
|
|
193
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 1),
|
|
194
|
-
theseItems = _useState2[0];
|
|
195
|
-
|
|
196
|
-
// svg of the bottom portion of the bracket, the portion with the L shaped hook.
|
|
197
|
-
var BottomBracket = function BottomBracket() {
|
|
198
|
-
var color = '#CACED3';
|
|
199
|
-
return (0, _react2.jsx)(_index.Box, {
|
|
200
|
-
sx: sx.bottomBracket.container
|
|
201
|
-
}, (0, _react2.jsx)(_index.Box, {
|
|
202
|
-
flexBasis: "53%"
|
|
203
|
-
}, (0, _react2.jsx)("svg", {
|
|
204
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
205
|
-
version: "1.1",
|
|
206
|
-
preserveAspectRatio: "none",
|
|
207
|
-
viewBox: "0 0 10 10",
|
|
208
|
-
style: {
|
|
209
|
-
flexGrow: 1
|
|
210
|
-
},
|
|
211
|
-
"aria-labelledby": "vertical-bracket-icon-title"
|
|
212
|
-
}, (0, _react2.jsx)("title", {
|
|
213
|
-
id: "vertical-bracket-icon-title"
|
|
214
|
-
}, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 1"), (0, _react2.jsx)("line", {
|
|
215
|
-
strokeLinecap: "undefined",
|
|
216
|
-
strokeLinejoin: "undefined",
|
|
217
|
-
y2: "0",
|
|
218
|
-
x2: "0",
|
|
219
|
-
y1: "15",
|
|
220
|
-
x1: "0",
|
|
221
|
-
stroke: color,
|
|
222
|
-
fill: "none"
|
|
223
|
-
}))), (0, _react2.jsx)("svg", {
|
|
224
|
-
width: "17",
|
|
225
|
-
height: "9",
|
|
226
|
-
viewBox: "0 0 17 9",
|
|
227
|
-
fill: "none",
|
|
228
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
229
|
-
"aria-labelledby": "bracket-icon-title"
|
|
230
|
-
}, (0, _react2.jsx)("title", {
|
|
231
|
-
id: "bracket-icon-title"
|
|
232
|
-
}, "Bracket Icon"), (0, _react2.jsx)("g", {
|
|
233
|
-
clipPath: "url(#clip0_1900_8817)"
|
|
234
|
-
}, (0, _react2.jsx)("g", {
|
|
235
|
-
mask: "url(#mask0_1900_8817)"
|
|
236
|
-
}, (0, _react2.jsx)("rect", {
|
|
237
|
-
x: "0.5",
|
|
238
|
-
y: "-54.5",
|
|
239
|
-
width: "20",
|
|
240
|
-
height: "63",
|
|
241
|
-
rx: "4.5",
|
|
242
|
-
stroke: color
|
|
243
|
-
}))))));
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
// the vector shield and key icon.
|
|
247
|
-
var ShieldIcon = function ShieldIcon(props) {
|
|
248
|
-
var id = (0, _react.useMemo)(function () {
|
|
249
|
-
return (0, _uuid.v4)();
|
|
250
|
-
}, []);
|
|
251
|
-
return (0, _react2.jsx)("svg", (0, _extends2["default"])({
|
|
252
|
-
width: "19",
|
|
253
|
-
height: "23",
|
|
254
|
-
viewBox: "0 0 19 23",
|
|
255
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
256
|
-
"aria-labelledby": "shield-icon-title-".concat(id)
|
|
257
|
-
}, props), (0, _react2.jsx)("title", {
|
|
258
|
-
id: "shield-icon-title-".concat(id)
|
|
259
|
-
}, "Shield Icon"), (0, _react2.jsx)("path", {
|
|
260
|
-
d: "M9.5 7.33342C9.77627 7.33342 10.0412 7.44316 10.2366 7.63851C10.4319 7.83386 10.5417 8.09881 10.5417 8.37508C10.5417 8.65135 10.4319 8.9163 10.2366 9.11165C10.0412 9.307 9.77627 9.41675 9.5 9.41675C9.22373 9.41675 8.95878 9.307 8.76343 9.11165C8.56808 8.9163 8.45833 8.65135 8.45833 8.37508C8.45833 8.09881 8.56808 7.83386 8.76343 7.63851C8.95878 7.44316 9.22373 7.33342 9.5 7.33342ZM18.875 10.4584C18.875 16.2397 14.875 21.6459 9.5 22.9584C4.125 21.6459 0.125 16.2397 0.125 10.4584V4.20842L9.5 0.041748L18.875 4.20842V10.4584ZM9.5 5.25008C8.6712 5.25008 7.87634 5.57932 7.29029 6.16537C6.70424 6.75142 6.375 7.54628 6.375 8.37508C6.375 9.73967 7.23958 10.8959 8.45833 11.323V17.7501H10.5417V15.6667H12.625V13.5834H10.5417V11.323C11.7604 10.8959 12.625 9.73967 12.625 8.37508C12.625 7.54628 12.2958 6.75142 11.7097 6.16537C11.1237 5.57932 10.3288 5.25008 9.5 5.25008Z"
|
|
261
|
-
}));
|
|
262
|
-
};
|
|
263
|
-
var Shield = function Shield(_ref2) {
|
|
264
|
-
var isParent = _ref2.isParent;
|
|
265
|
-
return (0, _react2.jsx)(_index.Box, {
|
|
266
|
-
alignItems: "center",
|
|
267
|
-
justifyContent: "center",
|
|
268
|
-
minWidth: 24,
|
|
269
|
-
sx: {
|
|
270
|
-
position: 'relative'
|
|
271
|
-
}
|
|
272
|
-
}, (0, _react2.jsx)(_index.Icon, {
|
|
273
|
-
icon: ShieldIcon,
|
|
274
|
-
color: isParent ? 'decorative.7' : 'accent.40',
|
|
275
|
-
size: 24,
|
|
276
|
-
isLinked: isParent
|
|
277
|
-
}), isParent && (0, _react2.jsx)(TopBracket, null));
|
|
278
|
-
};
|
|
279
|
-
|
|
280
|
-
// the top portion of the bracket svg, this is basically just a straight vertical line.
|
|
281
|
-
var TopBracket = function TopBracket() {
|
|
282
|
-
var color = '#CACED3';
|
|
283
|
-
return (0, _react2.jsx)(_index.Box, {
|
|
284
|
-
width: 15,
|
|
285
|
-
sx: sx.topBracket
|
|
286
|
-
}, (0, _react2.jsx)("svg", {
|
|
287
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
288
|
-
version: "1.1",
|
|
289
|
-
preserveAspectRatio: "none",
|
|
290
|
-
viewBox: "0 0 10 10",
|
|
291
|
-
style: {
|
|
292
|
-
flexGrow: 1
|
|
293
|
-
},
|
|
294
|
-
"data-testid": "isLastLayer",
|
|
295
|
-
"aria-labelledby": "top-bracket-icon-title"
|
|
296
|
-
}, (0, _react2.jsx)("title", {
|
|
297
|
-
id: "top-bracket-icon-title"
|
|
298
|
-
}, "Top Bracket Icon"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 3"), (0, _react2.jsx)("line", {
|
|
299
|
-
strokeLinecap: "undefined",
|
|
300
|
-
strokeLinejoin: "undefined",
|
|
301
|
-
y2: "0",
|
|
302
|
-
x2: "0",
|
|
303
|
-
y1: "10",
|
|
304
|
-
x1: "0",
|
|
305
|
-
stroke: color,
|
|
306
|
-
fill: "none"
|
|
307
|
-
}))));
|
|
308
|
-
};
|
|
309
|
-
|
|
310
|
-
// reusable piece of code that handles the iconbutton and popover on the right side of the rows
|
|
311
|
-
var IconWithPopover = function IconWithPopover(_ref3) {
|
|
312
|
-
var handleHoverEnd = _ref3.handleHoverEnd,
|
|
313
|
-
handleHoverStart = _ref3.handleHoverStart,
|
|
314
|
-
handleMenuHoverEnd = _ref3.handleMenuHoverEnd;
|
|
315
|
-
return (0, _react2.jsx)(_index.PopoverMenu, {
|
|
316
|
-
direction: "left"
|
|
317
|
-
}, (0, _react2.jsx)(_index.Box, {
|
|
318
|
-
alignItems: "center",
|
|
319
|
-
alignSelf: "center"
|
|
320
|
-
}, (0, _react2.jsx)(_index.IconButton, {
|
|
321
|
-
"aria-label": "Menu Button"
|
|
322
|
-
}, (0, _react2.jsx)(_index.Icon, {
|
|
323
|
-
icon: _DotsVerticalIcon["default"],
|
|
324
|
-
size: "xs",
|
|
325
|
-
color: "Neutral.40",
|
|
326
|
-
m: "0.61px",
|
|
327
|
-
title: {
|
|
328
|
-
name: 'Dots Vertical Icon'
|
|
329
|
-
}
|
|
330
|
-
}))), (0, _react2.jsx)(_index.Menu, {
|
|
331
|
-
direction: "left",
|
|
332
|
-
onAction: handleHoverEnd,
|
|
333
|
-
onHoverEnd: handleMenuHoverEnd,
|
|
334
|
-
onHoverStart: handleHoverStart,
|
|
335
|
-
sx: {
|
|
336
|
-
minWidth: '155px',
|
|
337
|
-
minHeight: '144px'
|
|
338
|
-
}
|
|
339
|
-
}, (0, _react2.jsx)(_index.Item, {
|
|
340
|
-
key: "view"
|
|
341
|
-
}, "View"), (0, _react2.jsx)(_index.Item, {
|
|
342
|
-
key: "edit"
|
|
343
|
-
}, "Edit"), (0, _react2.jsx)(_index.Item, {
|
|
344
|
-
key: "rename"
|
|
345
|
-
}, "Rename"), (0, _react2.jsx)(_index.Item, {
|
|
346
|
-
key: "delete",
|
|
347
|
-
textValue: "delete"
|
|
348
|
-
}, (0, _react2.jsx)(_index.Text, {
|
|
349
|
-
color: "critical.bright"
|
|
350
|
-
}, "Delete"))));
|
|
351
|
-
};
|
|
352
|
-
|
|
353
|
-
// made these separate components because staging and production both use them.
|
|
354
|
-
var DefaultBadge = function DefaultBadge() {
|
|
355
|
-
return (0, _react2.jsx)(_index.Badge, {
|
|
356
|
-
label: "Default",
|
|
357
|
-
bg: "active",
|
|
358
|
-
sx: sx.badge
|
|
359
|
-
});
|
|
360
|
-
};
|
|
361
|
-
var ExpirationBadge = function ExpirationBadge(_ref4) {
|
|
362
|
-
var expirationText = _ref4.expirationText,
|
|
363
|
-
badgeText = _ref4.badgeText;
|
|
364
|
-
return (0, _react2.jsx)(_index.Box, {
|
|
365
|
-
sx: !badgeText && {
|
|
366
|
-
paddingLeft: '72px'
|
|
367
|
-
},
|
|
368
|
-
flexGrow: 1,
|
|
369
|
-
alignItems: "center",
|
|
370
|
-
alignSelf: "center"
|
|
371
|
-
}, (0, _react2.jsx)(_index.Badge, {
|
|
372
|
-
bg: "white",
|
|
373
|
-
sx: sx.expirationBadge,
|
|
374
|
-
textColor: "text.primary",
|
|
375
|
-
label: expirationText
|
|
376
|
-
}));
|
|
377
|
-
};
|
|
378
|
-
var ListElementContent = function ListElementContent(_ref5) {
|
|
379
|
-
var badgeText = _ref5.badgeText,
|
|
380
|
-
isChild = _ref5.isChild,
|
|
381
|
-
name = _ref5.name,
|
|
382
|
-
policyId = _ref5.policyId;
|
|
383
|
-
return (0, _react2.jsx)(_index.Box, {
|
|
384
|
-
isRow: true,
|
|
385
|
-
ml: isChild ? 0 : 18,
|
|
386
|
-
sx: sx.listElement.textBox
|
|
387
|
-
}, isChild && (0, _react2.jsx)(_index.Separator, {
|
|
388
|
-
orientation: "vertical",
|
|
389
|
-
sx: sx.bottomBracket.separator
|
|
390
|
-
}), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
|
|
391
|
-
sx: sx.listElement.text
|
|
392
|
-
}, name), (0, _react2.jsx)(_index.Text, {
|
|
393
|
-
sx: sx.listElement.subText
|
|
394
|
-
}, "Policy Id:", ' ', policyId)), badgeText && (0, _react2.jsx)(DefaultBadge, null));
|
|
395
|
-
};
|
|
396
|
-
var ListElement = function ListElement(_ref6) {
|
|
397
|
-
var badgeText = _ref6.badgeText,
|
|
398
|
-
expirationText = _ref6.expirationText,
|
|
399
|
-
isChild = _ref6.isChild,
|
|
400
|
-
isParent = _ref6.isParent,
|
|
401
|
-
name = _ref6.name,
|
|
402
|
-
policyId = _ref6.policyId;
|
|
403
|
-
var listItemRef = (0, _react.useRef)();
|
|
404
|
-
var _useOverlappingMenuHo = (0, _useOverlappingMenuHoverState["default"])({
|
|
405
|
-
listItemRef: listItemRef
|
|
406
|
-
}),
|
|
407
|
-
handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
|
|
408
|
-
handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
|
|
409
|
-
handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
|
|
410
|
-
handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
|
|
411
|
-
isHovered = _useOverlappingMenuHo.isHovered;
|
|
412
|
-
return (0, _react2.jsx)(_index.ListItem, {
|
|
413
|
-
isHovered: isHovered,
|
|
414
|
-
isRow: true,
|
|
415
|
-
onHoverEnd: handleHoverEnd,
|
|
416
|
-
onHoverStart: handleHoverStart,
|
|
417
|
-
onMouseMove: handleMouseMove,
|
|
418
|
-
ref: listItemRef,
|
|
419
|
-
variant: "listItem.hover",
|
|
420
|
-
sx: sx.listElement.container
|
|
421
|
-
}, isChild ? (0, _react2.jsx)(BottomBracket, null) : (0, _react2.jsx)(Shield, {
|
|
422
|
-
isParent: isParent
|
|
423
|
-
}), (0, _react2.jsx)(ListElementContent, {
|
|
424
|
-
badgeText: badgeText,
|
|
425
|
-
expirationText: expirationText,
|
|
426
|
-
isChild: isChild,
|
|
427
|
-
name: name,
|
|
428
|
-
policyId: policyId
|
|
429
|
-
}), expirationText && (0, _react2.jsx)(ExpirationBadge, {
|
|
430
|
-
expirationText: expirationText
|
|
431
|
-
}), (0, _react2.jsx)(IconWithPopover, {
|
|
432
|
-
handleHoverEnd: handleHoverEnd,
|
|
433
|
-
handleMenuHoverEnd: handleMenuHoverEnd,
|
|
434
|
-
handleHoverStart: handleHoverStart
|
|
435
|
-
}));
|
|
436
|
-
};
|
|
437
|
-
return (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, args, {
|
|
438
|
-
items: theseItems
|
|
439
|
-
}), function (item) {
|
|
440
|
-
return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({}, item, {
|
|
441
|
-
textValue: item.name,
|
|
442
|
-
"data-id": item.key,
|
|
443
|
-
listItemProps: {
|
|
444
|
-
variant: 'listViewItem.linkedViewContainer',
|
|
445
|
-
sx: {
|
|
446
|
-
padding: 1
|
|
447
|
-
}
|
|
448
|
-
}
|
|
449
|
-
}), (0, _react2.jsx)(ListElement, (0, _extends2["default"])({
|
|
450
|
-
isParent: item.childrenObjects,
|
|
451
|
-
isChild: item.parentId
|
|
452
|
-
}, item)));
|
|
453
|
-
});
|
|
454
|
-
};
|
|
455
|
-
|
|
456
|
-
// Added to bypass the rule "Certain ARIA roles must be contained by particular parents"
|
|
457
|
-
exports.Default = Default;
|
|
458
|
-
Default.parameters = {
|
|
459
|
-
a11y: {
|
|
460
|
-
config: {
|
|
461
|
-
rules: [{
|
|
462
|
-
id: 'aria-required-parent',
|
|
463
|
-
enabled: false
|
|
464
|
-
}]
|
|
465
|
-
}
|
|
466
|
-
}
|
|
467
|
-
};
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = exports.Default = void 0;
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _VisibilityOffOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/VisibilityOffOutlineIcon"));
|
|
11
|
-
var _index = require("../index");
|
|
12
|
-
var _react2 = require("@emotion/react");
|
|
13
|
-
var _default = {
|
|
14
|
-
title: 'Recipes/Selected Field Overlay'
|
|
15
|
-
};
|
|
16
|
-
exports["default"] = _default;
|
|
17
|
-
var sx = {
|
|
18
|
-
container: {
|
|
19
|
-
padding: 'md',
|
|
20
|
-
position: 'relative',
|
|
21
|
-
borderWidth: 2,
|
|
22
|
-
borderStyle: 'solid',
|
|
23
|
-
borderColor: 'active',
|
|
24
|
-
borderRadius: 4,
|
|
25
|
-
cursor: 'pointer'
|
|
26
|
-
},
|
|
27
|
-
overlay: {
|
|
28
|
-
position: 'absolute',
|
|
29
|
-
width: '100%',
|
|
30
|
-
height: '100%',
|
|
31
|
-
top: 0,
|
|
32
|
-
left: 0,
|
|
33
|
-
alignItems: 'center',
|
|
34
|
-
justifyContent: 'center',
|
|
35
|
-
'&:focus': {
|
|
36
|
-
outline: 'none'
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
var Default = function Default() {
|
|
41
|
-
return (0, _react2.jsx)(_index.Box, {
|
|
42
|
-
sx: sx.container
|
|
43
|
-
}, (0, _react2.jsx)(_index.TextField, {
|
|
44
|
-
label: "Name",
|
|
45
|
-
controlProps: {
|
|
46
|
-
tabIndex: '-1'
|
|
47
|
-
}
|
|
48
|
-
}), (0, _react2.jsx)(_index.Box, {
|
|
49
|
-
sx: sx.overlay,
|
|
50
|
-
tabIndex: "0"
|
|
51
|
-
}, (0, _react2.jsx)(_index.Icon, {
|
|
52
|
-
icon: _VisibilityOffOutlineIcon["default"],
|
|
53
|
-
size: 22,
|
|
54
|
-
title: {
|
|
55
|
-
name: 'Visibility Off Outline Icon'
|
|
56
|
-
}
|
|
57
|
-
})));
|
|
58
|
-
};
|
|
59
|
-
exports.Default = Default;
|
|
@@ -1,452 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
|
2
|
-
import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
|
|
3
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
4
|
-
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
|
5
|
-
import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
|
|
6
|
-
import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
|
|
7
|
-
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
8
|
-
import React, { useMemo, useRef, useState } from 'react';
|
|
9
|
-
import DotsVerticalIcon from '@pingux/mdi-react/DotsVerticalIcon';
|
|
10
|
-
import { v4 as uuid } from 'uuid';
|
|
11
|
-
import useOverlappingMenuHoverState from '../hooks/useOverlappingMenuHoverState';
|
|
12
|
-
import { Badge, Box, Icon, IconButton, Item, ListItem, ListView, Menu, PopoverMenu, Separator, Text } from '../index';
|
|
13
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
14
|
-
export default {
|
|
15
|
-
title: 'Recipes/Linked List View',
|
|
16
|
-
argTypes: {
|
|
17
|
-
loadingState: {
|
|
18
|
-
control: {
|
|
19
|
-
type: 'select'
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
disabledKeys: {},
|
|
23
|
-
items: {
|
|
24
|
-
control: {
|
|
25
|
-
type: 'none'
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
onSelectionChange: {
|
|
29
|
-
control: 'none'
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
args: {
|
|
33
|
-
disabledKeys: [],
|
|
34
|
-
// eslint-disable-next-line no-console
|
|
35
|
-
onSelectionChange: console.log
|
|
36
|
-
},
|
|
37
|
-
parameters: {
|
|
38
|
-
docs: {
|
|
39
|
-
source: {
|
|
40
|
-
type: 'code'
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
var testData = [{
|
|
46
|
-
key: 'Default Risk Policy',
|
|
47
|
-
name: 'Default Risk Policy',
|
|
48
|
-
policyId: 'sdfasdfasdf-124123asdf',
|
|
49
|
-
id: '1',
|
|
50
|
-
hasSeparator: false,
|
|
51
|
-
hasInsetSeparator: true,
|
|
52
|
-
badgeText: 'default',
|
|
53
|
-
childrenObjects: [{
|
|
54
|
-
key: 'Staging Policy',
|
|
55
|
-
name: 'Staging Policy',
|
|
56
|
-
policyId: '23423sdfsdf-124123asdf',
|
|
57
|
-
id: '4',
|
|
58
|
-
expirationText: 'Expiring On: 2022-12-08',
|
|
59
|
-
hasSeparator: true
|
|
60
|
-
}]
|
|
61
|
-
}, {
|
|
62
|
-
key: 'Policy4',
|
|
63
|
-
name: 'Policy4',
|
|
64
|
-
policyId: '9234890324k-124123asdf',
|
|
65
|
-
badgeText: 'default',
|
|
66
|
-
id: '2',
|
|
67
|
-
hasSeparator: true
|
|
68
|
-
}, {
|
|
69
|
-
key: 'Policy5',
|
|
70
|
-
name: 'Policy5',
|
|
71
|
-
policyId: 'asdf23zaa-124123asdf',
|
|
72
|
-
id: '3'
|
|
73
|
-
}];
|
|
74
|
-
|
|
75
|
-
// IMPORTANT PLEASE READ
|
|
76
|
-
// in order for the list portion of this recipe to function correctly,
|
|
77
|
-
// the array of objects that will be used to create
|
|
78
|
-
// the production and staging rows, will need to be flat and sorted.
|
|
79
|
-
// I.e. the staging rows will need to immediately follow the prod row that they correspond to.
|
|
80
|
-
// This flat, sorted array will then be passed into the listview component as the items prop.
|
|
81
|
-
// You may not need these functions if you are able to change the data shape on the back end
|
|
82
|
-
// (which is recommended for performance reasons)
|
|
83
|
-
|
|
84
|
-
var flattenArray = function flattenArray(array) {
|
|
85
|
-
var newArray = array;
|
|
86
|
-
_forEachInstanceProperty(newArray).call(newArray, function (item) {
|
|
87
|
-
if (item.childrenObjects) {
|
|
88
|
-
var _context;
|
|
89
|
-
_forEachInstanceProperty(_context = item.childrenObjects).call(_context, function (obj) {
|
|
90
|
-
var newObj = obj;
|
|
91
|
-
newObj.parentId = item.id;
|
|
92
|
-
newArray.push(newObj);
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
});
|
|
96
|
-
return newArray;
|
|
97
|
-
};
|
|
98
|
-
var testSort = function testSort(array) {
|
|
99
|
-
var newArray = array;
|
|
100
|
-
_forEachInstanceProperty(newArray).call(newArray, function (item, i) {
|
|
101
|
-
if (item.parentId) {
|
|
102
|
-
var thisindex = _findIndexInstanceProperty(newArray).call(newArray, function (object) {
|
|
103
|
-
return object.id === item.parentId;
|
|
104
|
-
});
|
|
105
|
-
var element = _spliceInstanceProperty(newArray).call(newArray, i, 1)[0];
|
|
106
|
-
_spliceInstanceProperty(newArray).call(newArray, thisindex + 1, 0, element);
|
|
107
|
-
}
|
|
108
|
-
});
|
|
109
|
-
return newArray;
|
|
110
|
-
};
|
|
111
|
-
var unsorted = flattenArray(testData);
|
|
112
|
-
var sorted = testSort(unsorted);
|
|
113
|
-
var sx = {
|
|
114
|
-
badge: {
|
|
115
|
-
alignItems: 'center',
|
|
116
|
-
alignSelf: 'center',
|
|
117
|
-
ml: 'lg',
|
|
118
|
-
p: '3px 5px 2px 5px'
|
|
119
|
-
},
|
|
120
|
-
bottomBracket: {
|
|
121
|
-
container: {
|
|
122
|
-
ml: 12,
|
|
123
|
-
top: -2,
|
|
124
|
-
position: 'relative',
|
|
125
|
-
maxWidth: 15
|
|
126
|
-
},
|
|
127
|
-
separator: {
|
|
128
|
-
backgroundColor: 'decorative.7',
|
|
129
|
-
marginLeft: '2px !important',
|
|
130
|
-
maxHeight: '30px',
|
|
131
|
-
width: '2px !important'
|
|
132
|
-
},
|
|
133
|
-
separatorBox: {
|
|
134
|
-
alignItems: 'center',
|
|
135
|
-
flexDirection: 'row',
|
|
136
|
-
minWidth: 9
|
|
137
|
-
}
|
|
138
|
-
},
|
|
139
|
-
expirationBadge: {
|
|
140
|
-
alignItems: 'center',
|
|
141
|
-
alignSelf: 'center',
|
|
142
|
-
border: 'solid 1px',
|
|
143
|
-
borderColor: 'neutral.80',
|
|
144
|
-
p: '3px 5px 2px 5px'
|
|
145
|
-
},
|
|
146
|
-
listElement: {
|
|
147
|
-
container: {
|
|
148
|
-
height: 73,
|
|
149
|
-
pl: 24,
|
|
150
|
-
pr: 14
|
|
151
|
-
},
|
|
152
|
-
subText: {
|
|
153
|
-
color: 'text.secondary',
|
|
154
|
-
fontSize: 'sm',
|
|
155
|
-
fontWeight: 0
|
|
156
|
-
},
|
|
157
|
-
text: {
|
|
158
|
-
color: 'text.primary',
|
|
159
|
-
fontSize: 'md',
|
|
160
|
-
fontWeight: 1
|
|
161
|
-
},
|
|
162
|
-
textBox: {
|
|
163
|
-
alignItems: 'center',
|
|
164
|
-
justifyContent: 'center',
|
|
165
|
-
marginRight: 'auto'
|
|
166
|
-
}
|
|
167
|
-
},
|
|
168
|
-
topBracket: {
|
|
169
|
-
top: 50,
|
|
170
|
-
left: 12,
|
|
171
|
-
bottom: -1,
|
|
172
|
-
position: 'absolute'
|
|
173
|
-
}
|
|
174
|
-
};
|
|
175
|
-
export var Default = function Default(_ref) {
|
|
176
|
-
var _context2;
|
|
177
|
-
var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
178
|
-
var _useState = useState(_concatInstanceProperty(_context2 = []).call(_context2, sorted)),
|
|
179
|
-
_useState2 = _slicedToArray(_useState, 1),
|
|
180
|
-
theseItems = _useState2[0];
|
|
181
|
-
|
|
182
|
-
// svg of the bottom portion of the bracket, the portion with the L shaped hook.
|
|
183
|
-
var BottomBracket = function BottomBracket() {
|
|
184
|
-
var color = '#CACED3';
|
|
185
|
-
return ___EmotionJSX(Box, {
|
|
186
|
-
sx: sx.bottomBracket.container
|
|
187
|
-
}, ___EmotionJSX(Box, {
|
|
188
|
-
flexBasis: "53%"
|
|
189
|
-
}, ___EmotionJSX("svg", {
|
|
190
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
191
|
-
version: "1.1",
|
|
192
|
-
preserveAspectRatio: "none",
|
|
193
|
-
viewBox: "0 0 10 10",
|
|
194
|
-
style: {
|
|
195
|
-
flexGrow: 1
|
|
196
|
-
},
|
|
197
|
-
"aria-labelledby": "vertical-bracket-icon-title"
|
|
198
|
-
}, ___EmotionJSX("title", {
|
|
199
|
-
id: "vertical-bracket-icon-title"
|
|
200
|
-
}, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 1"), ___EmotionJSX("line", {
|
|
201
|
-
strokeLinecap: "undefined",
|
|
202
|
-
strokeLinejoin: "undefined",
|
|
203
|
-
y2: "0",
|
|
204
|
-
x2: "0",
|
|
205
|
-
y1: "15",
|
|
206
|
-
x1: "0",
|
|
207
|
-
stroke: color,
|
|
208
|
-
fill: "none"
|
|
209
|
-
}))), ___EmotionJSX("svg", {
|
|
210
|
-
width: "17",
|
|
211
|
-
height: "9",
|
|
212
|
-
viewBox: "0 0 17 9",
|
|
213
|
-
fill: "none",
|
|
214
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
215
|
-
"aria-labelledby": "bracket-icon-title"
|
|
216
|
-
}, ___EmotionJSX("title", {
|
|
217
|
-
id: "bracket-icon-title"
|
|
218
|
-
}, "Bracket Icon"), ___EmotionJSX("g", {
|
|
219
|
-
clipPath: "url(#clip0_1900_8817)"
|
|
220
|
-
}, ___EmotionJSX("g", {
|
|
221
|
-
mask: "url(#mask0_1900_8817)"
|
|
222
|
-
}, ___EmotionJSX("rect", {
|
|
223
|
-
x: "0.5",
|
|
224
|
-
y: "-54.5",
|
|
225
|
-
width: "20",
|
|
226
|
-
height: "63",
|
|
227
|
-
rx: "4.5",
|
|
228
|
-
stroke: color
|
|
229
|
-
}))))));
|
|
230
|
-
};
|
|
231
|
-
|
|
232
|
-
// the vector shield and key icon.
|
|
233
|
-
var ShieldIcon = function ShieldIcon(props) {
|
|
234
|
-
var id = useMemo(function () {
|
|
235
|
-
return uuid();
|
|
236
|
-
}, []);
|
|
237
|
-
return ___EmotionJSX("svg", _extends({
|
|
238
|
-
width: "19",
|
|
239
|
-
height: "23",
|
|
240
|
-
viewBox: "0 0 19 23",
|
|
241
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
242
|
-
"aria-labelledby": "shield-icon-title-".concat(id)
|
|
243
|
-
}, props), ___EmotionJSX("title", {
|
|
244
|
-
id: "shield-icon-title-".concat(id)
|
|
245
|
-
}, "Shield Icon"), ___EmotionJSX("path", {
|
|
246
|
-
d: "M9.5 7.33342C9.77627 7.33342 10.0412 7.44316 10.2366 7.63851C10.4319 7.83386 10.5417 8.09881 10.5417 8.37508C10.5417 8.65135 10.4319 8.9163 10.2366 9.11165C10.0412 9.307 9.77627 9.41675 9.5 9.41675C9.22373 9.41675 8.95878 9.307 8.76343 9.11165C8.56808 8.9163 8.45833 8.65135 8.45833 8.37508C8.45833 8.09881 8.56808 7.83386 8.76343 7.63851C8.95878 7.44316 9.22373 7.33342 9.5 7.33342ZM18.875 10.4584C18.875 16.2397 14.875 21.6459 9.5 22.9584C4.125 21.6459 0.125 16.2397 0.125 10.4584V4.20842L9.5 0.041748L18.875 4.20842V10.4584ZM9.5 5.25008C8.6712 5.25008 7.87634 5.57932 7.29029 6.16537C6.70424 6.75142 6.375 7.54628 6.375 8.37508C6.375 9.73967 7.23958 10.8959 8.45833 11.323V17.7501H10.5417V15.6667H12.625V13.5834H10.5417V11.323C11.7604 10.8959 12.625 9.73967 12.625 8.37508C12.625 7.54628 12.2958 6.75142 11.7097 6.16537C11.1237 5.57932 10.3288 5.25008 9.5 5.25008Z"
|
|
247
|
-
}));
|
|
248
|
-
};
|
|
249
|
-
var Shield = function Shield(_ref2) {
|
|
250
|
-
var isParent = _ref2.isParent;
|
|
251
|
-
return ___EmotionJSX(Box, {
|
|
252
|
-
alignItems: "center",
|
|
253
|
-
justifyContent: "center",
|
|
254
|
-
minWidth: 24,
|
|
255
|
-
sx: {
|
|
256
|
-
position: 'relative'
|
|
257
|
-
}
|
|
258
|
-
}, ___EmotionJSX(Icon, {
|
|
259
|
-
icon: ShieldIcon,
|
|
260
|
-
color: isParent ? 'decorative.7' : 'accent.40',
|
|
261
|
-
size: 24,
|
|
262
|
-
isLinked: isParent
|
|
263
|
-
}), isParent && ___EmotionJSX(TopBracket, null));
|
|
264
|
-
};
|
|
265
|
-
|
|
266
|
-
// the top portion of the bracket svg, this is basically just a straight vertical line.
|
|
267
|
-
var TopBracket = function TopBracket() {
|
|
268
|
-
var color = '#CACED3';
|
|
269
|
-
return ___EmotionJSX(Box, {
|
|
270
|
-
width: 15,
|
|
271
|
-
sx: sx.topBracket
|
|
272
|
-
}, ___EmotionJSX("svg", {
|
|
273
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
274
|
-
version: "1.1",
|
|
275
|
-
preserveAspectRatio: "none",
|
|
276
|
-
viewBox: "0 0 10 10",
|
|
277
|
-
style: {
|
|
278
|
-
flexGrow: 1
|
|
279
|
-
},
|
|
280
|
-
"data-testid": "isLastLayer",
|
|
281
|
-
"aria-labelledby": "top-bracket-icon-title"
|
|
282
|
-
}, ___EmotionJSX("title", {
|
|
283
|
-
id: "top-bracket-icon-title"
|
|
284
|
-
}, "Top Bracket Icon"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 3"), ___EmotionJSX("line", {
|
|
285
|
-
strokeLinecap: "undefined",
|
|
286
|
-
strokeLinejoin: "undefined",
|
|
287
|
-
y2: "0",
|
|
288
|
-
x2: "0",
|
|
289
|
-
y1: "10",
|
|
290
|
-
x1: "0",
|
|
291
|
-
stroke: color,
|
|
292
|
-
fill: "none"
|
|
293
|
-
}))));
|
|
294
|
-
};
|
|
295
|
-
|
|
296
|
-
// reusable piece of code that handles the iconbutton and popover on the right side of the rows
|
|
297
|
-
var IconWithPopover = function IconWithPopover(_ref3) {
|
|
298
|
-
var handleHoverEnd = _ref3.handleHoverEnd,
|
|
299
|
-
handleHoverStart = _ref3.handleHoverStart,
|
|
300
|
-
handleMenuHoverEnd = _ref3.handleMenuHoverEnd;
|
|
301
|
-
return ___EmotionJSX(PopoverMenu, {
|
|
302
|
-
direction: "left"
|
|
303
|
-
}, ___EmotionJSX(Box, {
|
|
304
|
-
alignItems: "center",
|
|
305
|
-
alignSelf: "center"
|
|
306
|
-
}, ___EmotionJSX(IconButton, {
|
|
307
|
-
"aria-label": "Menu Button"
|
|
308
|
-
}, ___EmotionJSX(Icon, {
|
|
309
|
-
icon: DotsVerticalIcon,
|
|
310
|
-
size: "xs",
|
|
311
|
-
color: "Neutral.40",
|
|
312
|
-
m: "0.61px",
|
|
313
|
-
title: {
|
|
314
|
-
name: 'Dots Vertical Icon'
|
|
315
|
-
}
|
|
316
|
-
}))), ___EmotionJSX(Menu, {
|
|
317
|
-
direction: "left",
|
|
318
|
-
onAction: handleHoverEnd,
|
|
319
|
-
onHoverEnd: handleMenuHoverEnd,
|
|
320
|
-
onHoverStart: handleHoverStart,
|
|
321
|
-
sx: {
|
|
322
|
-
minWidth: '155px',
|
|
323
|
-
minHeight: '144px'
|
|
324
|
-
}
|
|
325
|
-
}, ___EmotionJSX(Item, {
|
|
326
|
-
key: "view"
|
|
327
|
-
}, "View"), ___EmotionJSX(Item, {
|
|
328
|
-
key: "edit"
|
|
329
|
-
}, "Edit"), ___EmotionJSX(Item, {
|
|
330
|
-
key: "rename"
|
|
331
|
-
}, "Rename"), ___EmotionJSX(Item, {
|
|
332
|
-
key: "delete",
|
|
333
|
-
textValue: "delete"
|
|
334
|
-
}, ___EmotionJSX(Text, {
|
|
335
|
-
color: "critical.bright"
|
|
336
|
-
}, "Delete"))));
|
|
337
|
-
};
|
|
338
|
-
|
|
339
|
-
// made these separate components because staging and production both use them.
|
|
340
|
-
var DefaultBadge = function DefaultBadge() {
|
|
341
|
-
return ___EmotionJSX(Badge, {
|
|
342
|
-
label: "Default",
|
|
343
|
-
bg: "active",
|
|
344
|
-
sx: sx.badge
|
|
345
|
-
});
|
|
346
|
-
};
|
|
347
|
-
var ExpirationBadge = function ExpirationBadge(_ref4) {
|
|
348
|
-
var expirationText = _ref4.expirationText,
|
|
349
|
-
badgeText = _ref4.badgeText;
|
|
350
|
-
return ___EmotionJSX(Box, {
|
|
351
|
-
sx: !badgeText && {
|
|
352
|
-
paddingLeft: '72px'
|
|
353
|
-
},
|
|
354
|
-
flexGrow: 1,
|
|
355
|
-
alignItems: "center",
|
|
356
|
-
alignSelf: "center"
|
|
357
|
-
}, ___EmotionJSX(Badge, {
|
|
358
|
-
bg: "white",
|
|
359
|
-
sx: sx.expirationBadge,
|
|
360
|
-
textColor: "text.primary",
|
|
361
|
-
label: expirationText
|
|
362
|
-
}));
|
|
363
|
-
};
|
|
364
|
-
var ListElementContent = function ListElementContent(_ref5) {
|
|
365
|
-
var badgeText = _ref5.badgeText,
|
|
366
|
-
isChild = _ref5.isChild,
|
|
367
|
-
name = _ref5.name,
|
|
368
|
-
policyId = _ref5.policyId;
|
|
369
|
-
return ___EmotionJSX(Box, {
|
|
370
|
-
isRow: true,
|
|
371
|
-
ml: isChild ? 0 : 18,
|
|
372
|
-
sx: sx.listElement.textBox
|
|
373
|
-
}, isChild && ___EmotionJSX(Separator, {
|
|
374
|
-
orientation: "vertical",
|
|
375
|
-
sx: sx.bottomBracket.separator
|
|
376
|
-
}), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
|
|
377
|
-
sx: sx.listElement.text
|
|
378
|
-
}, name), ___EmotionJSX(Text, {
|
|
379
|
-
sx: sx.listElement.subText
|
|
380
|
-
}, "Policy Id:", ' ', policyId)), badgeText && ___EmotionJSX(DefaultBadge, null));
|
|
381
|
-
};
|
|
382
|
-
var ListElement = function ListElement(_ref6) {
|
|
383
|
-
var badgeText = _ref6.badgeText,
|
|
384
|
-
expirationText = _ref6.expirationText,
|
|
385
|
-
isChild = _ref6.isChild,
|
|
386
|
-
isParent = _ref6.isParent,
|
|
387
|
-
name = _ref6.name,
|
|
388
|
-
policyId = _ref6.policyId;
|
|
389
|
-
var listItemRef = useRef();
|
|
390
|
-
var _useOverlappingMenuHo = useOverlappingMenuHoverState({
|
|
391
|
-
listItemRef: listItemRef
|
|
392
|
-
}),
|
|
393
|
-
handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
|
|
394
|
-
handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
|
|
395
|
-
handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
|
|
396
|
-
handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
|
|
397
|
-
isHovered = _useOverlappingMenuHo.isHovered;
|
|
398
|
-
return ___EmotionJSX(ListItem, {
|
|
399
|
-
isHovered: isHovered,
|
|
400
|
-
isRow: true,
|
|
401
|
-
onHoverEnd: handleHoverEnd,
|
|
402
|
-
onHoverStart: handleHoverStart,
|
|
403
|
-
onMouseMove: handleMouseMove,
|
|
404
|
-
ref: listItemRef,
|
|
405
|
-
variant: "listItem.hover",
|
|
406
|
-
sx: sx.listElement.container
|
|
407
|
-
}, isChild ? ___EmotionJSX(BottomBracket, null) : ___EmotionJSX(Shield, {
|
|
408
|
-
isParent: isParent
|
|
409
|
-
}), ___EmotionJSX(ListElementContent, {
|
|
410
|
-
badgeText: badgeText,
|
|
411
|
-
expirationText: expirationText,
|
|
412
|
-
isChild: isChild,
|
|
413
|
-
name: name,
|
|
414
|
-
policyId: policyId
|
|
415
|
-
}), expirationText && ___EmotionJSX(ExpirationBadge, {
|
|
416
|
-
expirationText: expirationText
|
|
417
|
-
}), ___EmotionJSX(IconWithPopover, {
|
|
418
|
-
handleHoverEnd: handleHoverEnd,
|
|
419
|
-
handleMenuHoverEnd: handleMenuHoverEnd,
|
|
420
|
-
handleHoverStart: handleHoverStart
|
|
421
|
-
}));
|
|
422
|
-
};
|
|
423
|
-
return ___EmotionJSX(ListView, _extends({}, args, {
|
|
424
|
-
items: theseItems
|
|
425
|
-
}), function (item) {
|
|
426
|
-
return ___EmotionJSX(Item, _extends({}, item, {
|
|
427
|
-
textValue: item.name,
|
|
428
|
-
"data-id": item.key,
|
|
429
|
-
listItemProps: {
|
|
430
|
-
variant: 'listViewItem.linkedViewContainer',
|
|
431
|
-
sx: {
|
|
432
|
-
padding: 1
|
|
433
|
-
}
|
|
434
|
-
}
|
|
435
|
-
}), ___EmotionJSX(ListElement, _extends({
|
|
436
|
-
isParent: item.childrenObjects,
|
|
437
|
-
isChild: item.parentId
|
|
438
|
-
}, item)));
|
|
439
|
-
});
|
|
440
|
-
};
|
|
441
|
-
|
|
442
|
-
// Added to bypass the rule "Certain ARIA roles must be contained by particular parents"
|
|
443
|
-
Default.parameters = {
|
|
444
|
-
a11y: {
|
|
445
|
-
config: {
|
|
446
|
-
rules: [{
|
|
447
|
-
id: 'aria-required-parent',
|
|
448
|
-
enabled: false
|
|
449
|
-
}]
|
|
450
|
-
}
|
|
451
|
-
}
|
|
452
|
-
};
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import VisibilityOffOutlineIcon from '@pingux/mdi-react/VisibilityOffOutlineIcon';
|
|
3
|
-
import { Box, Icon, TextField } from '../index';
|
|
4
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
5
|
-
export default {
|
|
6
|
-
title: 'Recipes/Selected Field Overlay'
|
|
7
|
-
};
|
|
8
|
-
var sx = {
|
|
9
|
-
container: {
|
|
10
|
-
padding: 'md',
|
|
11
|
-
position: 'relative',
|
|
12
|
-
borderWidth: 2,
|
|
13
|
-
borderStyle: 'solid',
|
|
14
|
-
borderColor: 'active',
|
|
15
|
-
borderRadius: 4,
|
|
16
|
-
cursor: 'pointer'
|
|
17
|
-
},
|
|
18
|
-
overlay: {
|
|
19
|
-
position: 'absolute',
|
|
20
|
-
width: '100%',
|
|
21
|
-
height: '100%',
|
|
22
|
-
top: 0,
|
|
23
|
-
left: 0,
|
|
24
|
-
alignItems: 'center',
|
|
25
|
-
justifyContent: 'center',
|
|
26
|
-
'&:focus': {
|
|
27
|
-
outline: 'none'
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
export var Default = function Default() {
|
|
32
|
-
return ___EmotionJSX(Box, {
|
|
33
|
-
sx: sx.container
|
|
34
|
-
}, ___EmotionJSX(TextField, {
|
|
35
|
-
label: "Name",
|
|
36
|
-
controlProps: {
|
|
37
|
-
tabIndex: '-1'
|
|
38
|
-
}
|
|
39
|
-
}), ___EmotionJSX(Box, {
|
|
40
|
-
sx: sx.overlay,
|
|
41
|
-
tabIndex: "0"
|
|
42
|
-
}, ___EmotionJSX(Icon, {
|
|
43
|
-
icon: VisibilityOffOutlineIcon,
|
|
44
|
-
size: 22,
|
|
45
|
-
title: {
|
|
46
|
-
name: 'Visibility Off Outline Icon'
|
|
47
|
-
}
|
|
48
|
-
})));
|
|
49
|
-
};
|