@pingux/astro 2.21.0-alpha.2 → 2.21.0-alpha.4

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.
@@ -9,13 +9,12 @@ _Object$defineProperty(exports, "__esModule", {
9
9
  value: true
10
10
  });
11
11
  exports["default"] = exports.EditRow = exports.Edit = exports.DisplayWithError = exports.DisplayRow = exports.Display = void 0;
12
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
13
12
  var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
13
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
14
14
  var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
15
15
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
16
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
17
17
  var _react = _interopRequireWildcard(require("react"));
18
- var _AddIcon = _interopRequireDefault(require("@pingux/mdi-react/AddIcon"));
19
18
  var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
20
19
  var _CogsIcon = _interopRequireDefault(require("@pingux/mdi-react/CogsIcon"));
21
20
  var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
@@ -82,66 +81,43 @@ var sx = {
82
81
  }
83
82
  };
84
83
  var editSx = {
85
- rowBox: {
86
- mb: '24.95px'
87
- },
88
- textField: {
89
- height: '40px !important'
84
+ comboBoxFieldWrapper: {
85
+ width: '275px',
86
+ '& .is-float-label .field-control-input': {
87
+ pt: '11px',
88
+ pb: '11px'
89
+ }
90
90
  },
91
91
  comboBoxField: {
92
- height: '40px !important',
93
- pt: '5px !important'
94
- },
95
- headingText: {
96
- fontSize: 'sm',
97
- fontWeight: 0,
98
- color: 'neutral.40'
92
+ maxHeight: '40px'
99
93
  },
100
- firstRowTitle: {
94
+ rowTitle: {
101
95
  fontWeight: 3,
102
96
  fontSize: 'md',
103
- maxWidth: '310px',
104
- width: 'calc(50% - 26px)',
105
- minWidth: '153px'
97
+ width: '275px',
98
+ minWidth: '153px',
99
+ mr: 'sm'
106
100
  },
107
- secondRowTitle: {
101
+ lastRowTitle: {
108
102
  fontWeight: 3,
109
103
  fontSize: 'md',
110
- ml: 'sm',
111
- flexGrow: 1
112
- },
113
- comboBoxAndIconParentBox: {
114
- width: '378px',
115
- ml: '12px',
116
- alignItems: 'center'
117
- },
118
- headingParentBox: {
119
- alignItems: 'center',
120
- mb: 'md',
121
- ml: 'xs'
122
- },
123
- addRowButton: {
124
- ml: 'auto',
125
- height: '22px',
126
- minWidth: '0',
127
- width: '70px'
128
- },
129
- addButtonIconBox: {
130
- alignItems: 'center',
131
- width: '38px',
132
- justifyContent: 'center'
133
- },
134
- addIcon: {
135
- mr: 'xs',
136
- color: 'active'
104
+ width: '135px',
105
+ textAlign: 'center'
137
106
  },
138
107
  editAttributesBox: {
139
108
  bg: 'accent.99',
140
- p: '16px'
109
+ p: 'md',
110
+ pr: '12px',
111
+ pt: 'sm'
141
112
  },
142
113
  scrollBox: {
143
114
  mt: 'md',
144
115
  maxHeight: '700px'
116
+ },
117
+ checkbox: {
118
+ '& .field-control-input': {
119
+ margin: 0
120
+ }
145
121
  }
146
122
  };
147
123
  var helperTextId = (0, _uuid.v4)();
@@ -227,44 +203,35 @@ var DisplayWithError = function DisplayWithError() {
227
203
  exports.DisplayWithError = DisplayWithError;
228
204
  var Edit = function Edit() {
229
205
  var defaultRows = [{
230
- isDisabled: false,
231
- textValue: '',
232
- inputValue: '',
206
+ leftValue: 'username',
207
+ rightValue: 'User ID',
233
208
  name: 'first default'
234
209
  }, {
235
- isDisabled: false,
236
- textValue: '',
237
- inputValue: '',
210
+ leftValue: 'firstName',
211
+ rightValue: 'Given Name',
238
212
  name: 'second default'
213
+ }, {
214
+ leftValue: 'lastName',
215
+ rightValue: 'Family Name',
216
+ name: 'third default'
217
+ }, {
218
+ leftValue: 'population',
219
+ rightValue: 'Population',
220
+ name: 'fourth default'
239
221
  }];
240
222
  var _useState = (0, _react.useState)(defaultRows),
241
223
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
242
224
  rows = _useState2[0],
243
225
  setRows = _useState2[1];
244
- var _useState3 = (0, _react.useState)(false),
245
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
246
- isSubmitted = _useState4[0],
247
- setIsSubmitted = _useState4[1];
248
- var addRow = function addRow() {
249
- var _context;
250
- var newRow = {
251
- isDisabled: false,
252
- isNewRow: true,
253
- textValue: '',
254
- inputValue: '',
255
- name: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
256
- };
257
- setRows((0, _concat["default"])(_context = []).call(_context, rows, [newRow]));
258
- };
259
226
  var removeRow = function removeRow(rowIndex) {
260
- var _context2;
227
+ var _context;
261
228
  var newArray = (0, _filter["default"])(rows).call(rows, function (row, index) {
262
229
  return rowIndex !== index;
263
230
  });
264
- setRows((0, _concat["default"])(_context2 = []).call(_context2, newArray));
231
+ setRows((0, _concat["default"])(_context = []).call(_context, newArray));
265
232
  };
266
233
  var updateRow = function updateRow(rowIndex, value, attribute) {
267
- var _context3;
234
+ var _context2;
268
235
  var newArray = (0, _map["default"])(rows).call(rows, function (row, index) {
269
236
  if (rowIndex === index) {
270
237
  var thisRow = rows[index];
@@ -273,47 +240,37 @@ var Edit = function Edit() {
273
240
  }
274
241
  return row;
275
242
  });
276
- setRows((0, _concat["default"])(_context3 = []).call(_context3, newArray));
243
+ setRows((0, _concat["default"])(_context2 = []).call(_context2, newArray));
277
244
  };
278
245
  return (0, _react2.jsx)(_index.Box, {
279
- maxWidth: "740px"
246
+ maxWidth: "735px"
280
247
  }, (0, _react2.jsx)(_index.Box, {
281
- isRow: true,
282
- sx: editSx.headingParentBox
283
- }, (0, _react2.jsx)(_index.Text, {
284
- sx: editSx.headingText
285
- }, "Create new attributes and map predefined attributes with their PingOne Mappings."), (0, _react2.jsx)(_index.Button, {
286
- variant: "inline",
287
- onPress: addRow,
288
- sx: editSx.addRowButton
289
- }, (0, _react2.jsx)(_index.Box, {
290
- isRow: true,
291
- sx: editSx.addButtonIconBox
292
- }, (0, _react2.jsx)(_index.Icon, {
293
- icon: _AddIcon["default"],
294
- size: 15,
295
- title: {
296
- name: 'Add Icon'
297
- },
298
- sx: editSx.addIcon
299
- }), "Add"))), (0, _react2.jsx)(_index.Box, {
300
248
  sx: editSx.editAttributesBox
301
249
  }, (0, _react2.jsx)(_index.Box, {
302
250
  isRow: true
303
251
  }, (0, _react2.jsx)(_index.Text, {
304
- sx: editSx.firstRowTitle
305
- }, "Attributes"), (0, _react2.jsx)(_index.Text, {
306
- sx: editSx.secondRowTitle
307
- }, "PingOne Mappings")), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.ScrollBox, {
252
+ sx: editSx.rowTitle
253
+ }, "Application"), (0, _react2.jsx)(_index.Text, {
254
+ sx: editSx.rowTitle
255
+ }, "PingOne"), (0, _react2.jsx)(_index.Text, {
256
+ sx: editSx.lastRowTitle
257
+ }, "Required")), (0, _react2.jsx)(_index.Box, {
258
+ sx: {
259
+ mr: '3px'
260
+ }
261
+ }, (0, _react2.jsx)(_index.Separator, {
262
+ sx: {
263
+ mb: 0,
264
+ mt: 'sm'
265
+ }
266
+ })), (0, _react2.jsx)(_index.ScrollBox, {
308
267
  sx: editSx.scrollBox
309
268
  }, (0, _react2.jsx)(_index.Box, null, (0, _map["default"])(rows).call(rows, function (row, index) {
310
269
  return (0, _react2.jsx)(EditRow, (0, _extends2["default"])({}, row, {
311
270
  index: index,
312
271
  removeRow: removeRow,
313
272
  updateRow: updateRow,
314
- key: "row container ".concat(row.name),
315
- isSubmitted: isSubmitted,
316
- setIsSubmitted: setIsSubmitted
273
+ key: "row container ".concat(row.name)
317
274
  }));
318
275
  })))));
319
276
  };
@@ -380,88 +337,95 @@ var DisplayRow = function DisplayRow(props) {
380
337
  };
381
338
  exports.DisplayRow = DisplayRow;
382
339
  var EditRow = function EditRow(props) {
383
- var isDisabled = props.isDisabled,
384
- isNewRow = props.isNewRow,
340
+ var isNewRow = props.isNewRow,
385
341
  index = props.index,
386
- textValue = props.textValue,
387
- inputValue = props.inputValue,
388
- _props$removeRow = props.removeRow,
389
- removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow,
342
+ leftValue = props.leftValue,
343
+ rightValue = props.rightValue,
390
344
  _props$updateRow = props.updateRow,
391
345
  updateRow = _props$updateRow === void 0 ? function () {} : _props$updateRow,
392
- areRowsValid = props.areRowsValid,
393
- isSubmitted = props.isSubmitted,
394
- _props$setIsSubmitted = props.setIsSubmitted,
395
- setIsSubmitted = _props$setIsSubmitted === void 0 ? function () {} : _props$setIsSubmitted;
396
- var items = [{
397
- name: 'Aardvark',
346
+ _props$removeRow = props.removeRow,
347
+ removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow;
348
+ var leftItems = [{
349
+ name: 'username',
398
350
  id: '1'
399
351
  }, {
400
- name: 'Kangaroo',
352
+ name: 'firstName',
401
353
  id: '2'
402
354
  }, {
403
- name: 'Snake',
355
+ name: 'lastName',
404
356
  id: '3'
357
+ }, {
358
+ name: 'population',
359
+ id: '4'
360
+ }];
361
+ var rightItems = [{
362
+ name: 'User ID',
363
+ id: '1'
364
+ }, {
365
+ name: 'Given Name',
366
+ id: '2'
367
+ }, {
368
+ name: 'Family Name',
369
+ id: '3'
370
+ }, {
371
+ name: 'Population',
372
+ id: '4'
405
373
  }];
406
374
  var rowRef = (0, _react.useRef)();
407
- var textFieldRef = (0, _react.useRef)();
408
- var setTextValue = function setTextValue(value) {
409
- updateRow(index, value, 'textValue');
410
- setIsSubmitted(false);
375
+ var comboBoxFieldRef = (0, _react.useRef)();
376
+ var setLeftInputValue = function setLeftInputValue(value) {
377
+ updateRow(index, value, 'leftValue');
411
378
  };
412
- var setInputValue = function setInputValue(value) {
413
- updateRow(index, value, 'inputValue');
414
- setIsSubmitted(false);
379
+ var setRightInputValue = function setRightInputValue(value) {
380
+ updateRow(index, value, 'rightValue');
415
381
  };
416
382
  (0, _react.useEffect)(function () {
417
383
  if (isNewRow) {
418
- textFieldRef.current.focus();
419
- textFieldRef.current.scrollIntoView();
384
+ comboBoxFieldRef.current.focus();
385
+ comboBoxFieldRef.current.scrollIntoView();
420
386
  }
421
387
  }, []);
422
- var isInputValueEmpty = !areRowsValid && isSubmitted && inputValue === '' && textValue !== '';
423
- var isTextValueEmpty = !areRowsValid && isSubmitted && textValue === '' && inputValue !== '';
424
388
  return (0, _react2.jsx)(_index.Box, {
425
389
  isRow: true,
426
390
  alignItems: "center",
427
- mb: "md",
391
+ mb: "sm",
392
+ gap: "sm",
428
393
  ref: rowRef
429
394
  }, (0, _react2.jsx)(_index.Box, {
430
- width: "310px",
431
- sx: isInputValueEmpty ? editSx.rowBox : {}
432
- }, (0, _react2.jsx)(_index.TextField, {
433
- name: "custom-name",
434
- "aria-label": "text field",
395
+ sx: editSx.comboBoxFieldWrapper
396
+ }, (0, _react2.jsx)(_index.ComboBoxField, {
397
+ ref: comboBoxFieldRef,
398
+ items: leftItems,
399
+ labelMode: "float",
400
+ id: "leftInputField ".concat(index),
401
+ key: "leftInputField ".concat(index),
435
402
  labelProps: {
436
403
  'aria-label': 'selection field',
437
404
  mb: 0
438
405
  },
406
+ "aria-label": "selection field",
439
407
  controlProps: {
440
- sx: editSx.textField
408
+ 'aria-label': 'selection field',
409
+ sx: editSx.comboBoxField
441
410
  },
442
- id: "textField ".concat(index),
443
- key: "textField ".concat(index),
444
- isReadOnly: isDisabled,
445
- value: textValue,
446
- onChange: function onChange(e) {
447
- return setTextValue(e.target.value);
411
+ containerProps: {
412
+ width: '100%',
413
+ maxWidth: '275px'
448
414
  },
449
- ref: textFieldRef,
450
- status: isTextValueEmpty ? 'error' : 'default',
451
- helperText: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? 'Enter an attribute.' : null
415
+ inputValue: leftValue,
416
+ onInputChange: setLeftInputValue
417
+ }, function (item) {
418
+ return (0, _react2.jsx)(_index.Item, {
419
+ key: item.name,
420
+ "data-id": item.name
421
+ }, item.name);
452
422
  })), (0, _react2.jsx)(_index.Box, {
453
- isRow: true,
454
- sx: isInputValueEmpty ? editSx.rowBox : {} && editSx.comboBoxAndIconParentBox
455
- }, (0, _react2.jsx)(_index.Box, {
456
- flexGrow: "1",
457
- maxWidth: "310px"
423
+ sx: editSx.comboBoxFieldWrapper
458
424
  }, (0, _react2.jsx)(_index.ComboBoxField, {
459
- items: items,
425
+ items: rightItems,
460
426
  labelMode: "float",
461
- id: "inputField ".concat(index),
462
- key: "inputField ".concat(index),
463
- status: isInputValueEmpty ? 'error' : 'default',
464
- helperText: isInputValueEmpty ? 'Select an item.' : null,
427
+ id: "rightInputField ".concat(index),
428
+ key: "rightInputField ".concat(index),
465
429
  labelProps: {
466
430
  'aria-label': 'selection field',
467
431
  mb: 0
@@ -473,24 +437,27 @@ var EditRow = function EditRow(props) {
473
437
  },
474
438
  containerProps: {
475
439
  width: '100%',
476
- maxWidth: '310px'
440
+ maxWidth: '275px'
477
441
  },
478
- inputValue: inputValue,
479
- onInputChange: setInputValue
442
+ inputValue: rightValue,
443
+ onInputChange: setRightInputValue
480
444
  }, function (item) {
481
445
  return (0, _react2.jsx)(_index.Item, {
482
446
  key: item.name,
483
447
  "data-id": item.name
484
448
  }, item.name);
485
449
  })), (0, _react2.jsx)(_index.Box, {
450
+ width: "135px"
451
+ }, (0, _react2.jsx)(_index.Box, {
486
452
  isRow: true,
487
- alignItems: "center",
488
- ml: "xs",
489
- sx: isInputValueEmpty && {
490
- mb: '22.475px',
491
- ml: 'xs'
453
+ sx: {
454
+ alignItems: 'center',
455
+ justifyContent: 'space-between'
492
456
  }
493
457
  }, (0, _react2.jsx)(_index.IconButton, {
458
+ sx: {
459
+ alignSelf: 'center'
460
+ },
494
461
  "aria-label": "icon button with tooltip",
495
462
  title: "Advanced Expression"
496
463
  }, (0, _react2.jsx)(_index.Icon, {
@@ -499,18 +466,21 @@ var EditRow = function EditRow(props) {
499
466
  title: {
500
467
  name: 'Cogs Icon'
501
468
  }
502
- })), (0, _react2.jsx)(_index.IconButton, {
469
+ })), (0, _react2.jsx)(_index.CheckboxField, {
470
+ "aria-label": "required checkbox",
471
+ containerProps: {
472
+ sx: editSx.checkbox
473
+ }
474
+ }), (0, _react2.jsx)(_index.IconButton, {
503
475
  "aria-label": "icon button with tooltip",
504
476
  title: "Delete",
505
- sx: {
506
- ml: 'xs'
507
- },
508
477
  onPress: function onPress() {
509
478
  return removeRow(index);
510
479
  }
511
480
  }, (0, _react2.jsx)(_index.Icon, {
512
481
  icon: _DeleteIcon["default"],
513
- size: "sm",
482
+ color: "neutral.30",
483
+ size: "24px",
514
484
  title: {
515
485
  name: 'Delete Icon'
516
486
  }
@@ -34,9 +34,9 @@ var success = {
34
34
  };
35
35
  exports.success = success;
36
36
  var warning = {
37
- bright: '#ffb91c',
38
- dark: '#b05b00',
39
- light: '#fff6e6'
37
+ bright: '#E86900',
38
+ dark: '#C9450D',
39
+ light: '#FFF6F2'
40
40
  };
41
41
 
42
42
  // NEUTRAL COLORS
@@ -1,15 +1,14 @@
1
1
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
2
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
3
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
4
3
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
5
5
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
6
6
  import React, { useEffect, useRef, useState } from 'react';
7
- import AddIcon from '@pingux/mdi-react/AddIcon';
8
7
  import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
9
8
  import CogsIcon from '@pingux/mdi-react/CogsIcon';
10
9
  import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
11
10
  import { v4 as uuid } from 'uuid';
12
- import { Badge, Box, Button, Callout, ComboBoxField, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
11
+ import { Badge, Box, Callout, CheckboxField, ComboBoxField, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
13
12
  import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
14
13
  import statuses from '../utils/devUtils/constants/statuses';
15
14
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -68,66 +67,43 @@ var sx = {
68
67
  }
69
68
  };
70
69
  var editSx = {
71
- rowBox: {
72
- mb: '24.95px'
73
- },
74
- textField: {
75
- height: '40px !important'
70
+ comboBoxFieldWrapper: {
71
+ width: '275px',
72
+ '& .is-float-label .field-control-input': {
73
+ pt: '11px',
74
+ pb: '11px'
75
+ }
76
76
  },
77
77
  comboBoxField: {
78
- height: '40px !important',
79
- pt: '5px !important'
80
- },
81
- headingText: {
82
- fontSize: 'sm',
83
- fontWeight: 0,
84
- color: 'neutral.40'
78
+ maxHeight: '40px'
85
79
  },
86
- firstRowTitle: {
80
+ rowTitle: {
87
81
  fontWeight: 3,
88
82
  fontSize: 'md',
89
- maxWidth: '310px',
90
- width: 'calc(50% - 26px)',
91
- minWidth: '153px'
83
+ width: '275px',
84
+ minWidth: '153px',
85
+ mr: 'sm'
92
86
  },
93
- secondRowTitle: {
87
+ lastRowTitle: {
94
88
  fontWeight: 3,
95
89
  fontSize: 'md',
96
- ml: 'sm',
97
- flexGrow: 1
98
- },
99
- comboBoxAndIconParentBox: {
100
- width: '378px',
101
- ml: '12px',
102
- alignItems: 'center'
103
- },
104
- headingParentBox: {
105
- alignItems: 'center',
106
- mb: 'md',
107
- ml: 'xs'
108
- },
109
- addRowButton: {
110
- ml: 'auto',
111
- height: '22px',
112
- minWidth: '0',
113
- width: '70px'
114
- },
115
- addButtonIconBox: {
116
- alignItems: 'center',
117
- width: '38px',
118
- justifyContent: 'center'
119
- },
120
- addIcon: {
121
- mr: 'xs',
122
- color: 'active'
90
+ width: '135px',
91
+ textAlign: 'center'
123
92
  },
124
93
  editAttributesBox: {
125
94
  bg: 'accent.99',
126
- p: '16px'
95
+ p: 'md',
96
+ pr: '12px',
97
+ pt: 'sm'
127
98
  },
128
99
  scrollBox: {
129
100
  mt: 'md',
130
101
  maxHeight: '700px'
102
+ },
103
+ checkbox: {
104
+ '& .field-control-input': {
105
+ margin: 0
106
+ }
131
107
  }
132
108
  };
133
109
  var helperTextId = uuid();
@@ -211,44 +187,35 @@ export var DisplayWithError = function DisplayWithError() {
211
187
  };
212
188
  export var Edit = function Edit() {
213
189
  var defaultRows = [{
214
- isDisabled: false,
215
- textValue: '',
216
- inputValue: '',
190
+ leftValue: 'username',
191
+ rightValue: 'User ID',
217
192
  name: 'first default'
218
193
  }, {
219
- isDisabled: false,
220
- textValue: '',
221
- inputValue: '',
194
+ leftValue: 'firstName',
195
+ rightValue: 'Given Name',
222
196
  name: 'second default'
197
+ }, {
198
+ leftValue: 'lastName',
199
+ rightValue: 'Family Name',
200
+ name: 'third default'
201
+ }, {
202
+ leftValue: 'population',
203
+ rightValue: 'Population',
204
+ name: 'fourth default'
223
205
  }];
224
206
  var _useState = useState(defaultRows),
225
207
  _useState2 = _slicedToArray(_useState, 2),
226
208
  rows = _useState2[0],
227
209
  setRows = _useState2[1];
228
- var _useState3 = useState(false),
229
- _useState4 = _slicedToArray(_useState3, 2),
230
- isSubmitted = _useState4[0],
231
- setIsSubmitted = _useState4[1];
232
- var addRow = function addRow() {
233
- var _context;
234
- var newRow = {
235
- isDisabled: false,
236
- isNewRow: true,
237
- textValue: '',
238
- inputValue: '',
239
- name: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
240
- };
241
- setRows(_concatInstanceProperty(_context = []).call(_context, rows, [newRow]));
242
- };
243
210
  var removeRow = function removeRow(rowIndex) {
244
- var _context2;
211
+ var _context;
245
212
  var newArray = _filterInstanceProperty(rows).call(rows, function (row, index) {
246
213
  return rowIndex !== index;
247
214
  });
248
- setRows(_concatInstanceProperty(_context2 = []).call(_context2, newArray));
215
+ setRows(_concatInstanceProperty(_context = []).call(_context, newArray));
249
216
  };
250
217
  var updateRow = function updateRow(rowIndex, value, attribute) {
251
- var _context3;
218
+ var _context2;
252
219
  var newArray = _mapInstanceProperty(rows).call(rows, function (row, index) {
253
220
  if (rowIndex === index) {
254
221
  var thisRow = rows[index];
@@ -257,47 +224,37 @@ export var Edit = function Edit() {
257
224
  }
258
225
  return row;
259
226
  });
260
- setRows(_concatInstanceProperty(_context3 = []).call(_context3, newArray));
227
+ setRows(_concatInstanceProperty(_context2 = []).call(_context2, newArray));
261
228
  };
262
229
  return ___EmotionJSX(Box, {
263
- maxWidth: "740px"
230
+ maxWidth: "735px"
264
231
  }, ___EmotionJSX(Box, {
265
- isRow: true,
266
- sx: editSx.headingParentBox
267
- }, ___EmotionJSX(Text, {
268
- sx: editSx.headingText
269
- }, "Create new attributes and map predefined attributes with their PingOne Mappings."), ___EmotionJSX(Button, {
270
- variant: "inline",
271
- onPress: addRow,
272
- sx: editSx.addRowButton
273
- }, ___EmotionJSX(Box, {
274
- isRow: true,
275
- sx: editSx.addButtonIconBox
276
- }, ___EmotionJSX(Icon, {
277
- icon: AddIcon,
278
- size: 15,
279
- title: {
280
- name: 'Add Icon'
281
- },
282
- sx: editSx.addIcon
283
- }), "Add"))), ___EmotionJSX(Box, {
284
232
  sx: editSx.editAttributesBox
285
233
  }, ___EmotionJSX(Box, {
286
234
  isRow: true
287
235
  }, ___EmotionJSX(Text, {
288
- sx: editSx.firstRowTitle
289
- }, "Attributes"), ___EmotionJSX(Text, {
290
- sx: editSx.secondRowTitle
291
- }, "PingOne Mappings")), ___EmotionJSX(Separator, null), ___EmotionJSX(ScrollBox, {
236
+ sx: editSx.rowTitle
237
+ }, "Application"), ___EmotionJSX(Text, {
238
+ sx: editSx.rowTitle
239
+ }, "PingOne"), ___EmotionJSX(Text, {
240
+ sx: editSx.lastRowTitle
241
+ }, "Required")), ___EmotionJSX(Box, {
242
+ sx: {
243
+ mr: '3px'
244
+ }
245
+ }, ___EmotionJSX(Separator, {
246
+ sx: {
247
+ mb: 0,
248
+ mt: 'sm'
249
+ }
250
+ })), ___EmotionJSX(ScrollBox, {
292
251
  sx: editSx.scrollBox
293
252
  }, ___EmotionJSX(Box, null, _mapInstanceProperty(rows).call(rows, function (row, index) {
294
253
  return ___EmotionJSX(EditRow, _extends({}, row, {
295
254
  index: index,
296
255
  removeRow: removeRow,
297
256
  updateRow: updateRow,
298
- key: "row container ".concat(row.name),
299
- isSubmitted: isSubmitted,
300
- setIsSubmitted: setIsSubmitted
257
+ key: "row container ".concat(row.name)
301
258
  }));
302
259
  })))));
303
260
  };
@@ -362,88 +319,95 @@ export var DisplayRow = function DisplayRow(props) {
362
319
  }));
363
320
  };
364
321
  export var EditRow = function EditRow(props) {
365
- var isDisabled = props.isDisabled,
366
- isNewRow = props.isNewRow,
322
+ var isNewRow = props.isNewRow,
367
323
  index = props.index,
368
- textValue = props.textValue,
369
- inputValue = props.inputValue,
370
- _props$removeRow = props.removeRow,
371
- removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow,
324
+ leftValue = props.leftValue,
325
+ rightValue = props.rightValue,
372
326
  _props$updateRow = props.updateRow,
373
327
  updateRow = _props$updateRow === void 0 ? function () {} : _props$updateRow,
374
- areRowsValid = props.areRowsValid,
375
- isSubmitted = props.isSubmitted,
376
- _props$setIsSubmitted = props.setIsSubmitted,
377
- setIsSubmitted = _props$setIsSubmitted === void 0 ? function () {} : _props$setIsSubmitted;
378
- var items = [{
379
- name: 'Aardvark',
328
+ _props$removeRow = props.removeRow,
329
+ removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow;
330
+ var leftItems = [{
331
+ name: 'username',
380
332
  id: '1'
381
333
  }, {
382
- name: 'Kangaroo',
334
+ name: 'firstName',
383
335
  id: '2'
384
336
  }, {
385
- name: 'Snake',
337
+ name: 'lastName',
386
338
  id: '3'
339
+ }, {
340
+ name: 'population',
341
+ id: '4'
342
+ }];
343
+ var rightItems = [{
344
+ name: 'User ID',
345
+ id: '1'
346
+ }, {
347
+ name: 'Given Name',
348
+ id: '2'
349
+ }, {
350
+ name: 'Family Name',
351
+ id: '3'
352
+ }, {
353
+ name: 'Population',
354
+ id: '4'
387
355
  }];
388
356
  var rowRef = useRef();
389
- var textFieldRef = useRef();
390
- var setTextValue = function setTextValue(value) {
391
- updateRow(index, value, 'textValue');
392
- setIsSubmitted(false);
357
+ var comboBoxFieldRef = useRef();
358
+ var setLeftInputValue = function setLeftInputValue(value) {
359
+ updateRow(index, value, 'leftValue');
393
360
  };
394
- var setInputValue = function setInputValue(value) {
395
- updateRow(index, value, 'inputValue');
396
- setIsSubmitted(false);
361
+ var setRightInputValue = function setRightInputValue(value) {
362
+ updateRow(index, value, 'rightValue');
397
363
  };
398
364
  useEffect(function () {
399
365
  if (isNewRow) {
400
- textFieldRef.current.focus();
401
- textFieldRef.current.scrollIntoView();
366
+ comboBoxFieldRef.current.focus();
367
+ comboBoxFieldRef.current.scrollIntoView();
402
368
  }
403
369
  }, []);
404
- var isInputValueEmpty = !areRowsValid && isSubmitted && inputValue === '' && textValue !== '';
405
- var isTextValueEmpty = !areRowsValid && isSubmitted && textValue === '' && inputValue !== '';
406
370
  return ___EmotionJSX(Box, {
407
371
  isRow: true,
408
372
  alignItems: "center",
409
- mb: "md",
373
+ mb: "sm",
374
+ gap: "sm",
410
375
  ref: rowRef
411
376
  }, ___EmotionJSX(Box, {
412
- width: "310px",
413
- sx: isInputValueEmpty ? editSx.rowBox : {}
414
- }, ___EmotionJSX(TextField, {
415
- name: "custom-name",
416
- "aria-label": "text field",
377
+ sx: editSx.comboBoxFieldWrapper
378
+ }, ___EmotionJSX(ComboBoxField, {
379
+ ref: comboBoxFieldRef,
380
+ items: leftItems,
381
+ labelMode: "float",
382
+ id: "leftInputField ".concat(index),
383
+ key: "leftInputField ".concat(index),
417
384
  labelProps: {
418
385
  'aria-label': 'selection field',
419
386
  mb: 0
420
387
  },
388
+ "aria-label": "selection field",
421
389
  controlProps: {
422
- sx: editSx.textField
390
+ 'aria-label': 'selection field',
391
+ sx: editSx.comboBoxField
423
392
  },
424
- id: "textField ".concat(index),
425
- key: "textField ".concat(index),
426
- isReadOnly: isDisabled,
427
- value: textValue,
428
- onChange: function onChange(e) {
429
- return setTextValue(e.target.value);
393
+ containerProps: {
394
+ width: '100%',
395
+ maxWidth: '275px'
430
396
  },
431
- ref: textFieldRef,
432
- status: isTextValueEmpty ? 'error' : 'default',
433
- helperText: !areRowsValid && isSubmitted && textValue === '' && inputValue !== '' ? 'Enter an attribute.' : null
397
+ inputValue: leftValue,
398
+ onInputChange: setLeftInputValue
399
+ }, function (item) {
400
+ return ___EmotionJSX(Item, {
401
+ key: item.name,
402
+ "data-id": item.name
403
+ }, item.name);
434
404
  })), ___EmotionJSX(Box, {
435
- isRow: true,
436
- sx: isInputValueEmpty ? editSx.rowBox : {} && editSx.comboBoxAndIconParentBox
437
- }, ___EmotionJSX(Box, {
438
- flexGrow: "1",
439
- maxWidth: "310px"
405
+ sx: editSx.comboBoxFieldWrapper
440
406
  }, ___EmotionJSX(ComboBoxField, {
441
- items: items,
407
+ items: rightItems,
442
408
  labelMode: "float",
443
- id: "inputField ".concat(index),
444
- key: "inputField ".concat(index),
445
- status: isInputValueEmpty ? 'error' : 'default',
446
- helperText: isInputValueEmpty ? 'Select an item.' : null,
409
+ id: "rightInputField ".concat(index),
410
+ key: "rightInputField ".concat(index),
447
411
  labelProps: {
448
412
  'aria-label': 'selection field',
449
413
  mb: 0
@@ -455,24 +419,27 @@ export var EditRow = function EditRow(props) {
455
419
  },
456
420
  containerProps: {
457
421
  width: '100%',
458
- maxWidth: '310px'
422
+ maxWidth: '275px'
459
423
  },
460
- inputValue: inputValue,
461
- onInputChange: setInputValue
424
+ inputValue: rightValue,
425
+ onInputChange: setRightInputValue
462
426
  }, function (item) {
463
427
  return ___EmotionJSX(Item, {
464
428
  key: item.name,
465
429
  "data-id": item.name
466
430
  }, item.name);
467
431
  })), ___EmotionJSX(Box, {
432
+ width: "135px"
433
+ }, ___EmotionJSX(Box, {
468
434
  isRow: true,
469
- alignItems: "center",
470
- ml: "xs",
471
- sx: isInputValueEmpty && {
472
- mb: '22.475px',
473
- ml: 'xs'
435
+ sx: {
436
+ alignItems: 'center',
437
+ justifyContent: 'space-between'
474
438
  }
475
439
  }, ___EmotionJSX(IconButton, {
440
+ sx: {
441
+ alignSelf: 'center'
442
+ },
476
443
  "aria-label": "icon button with tooltip",
477
444
  title: "Advanced Expression"
478
445
  }, ___EmotionJSX(Icon, {
@@ -481,18 +448,21 @@ export var EditRow = function EditRow(props) {
481
448
  title: {
482
449
  name: 'Cogs Icon'
483
450
  }
484
- })), ___EmotionJSX(IconButton, {
451
+ })), ___EmotionJSX(CheckboxField, {
452
+ "aria-label": "required checkbox",
453
+ containerProps: {
454
+ sx: editSx.checkbox
455
+ }
456
+ }), ___EmotionJSX(IconButton, {
485
457
  "aria-label": "icon button with tooltip",
486
458
  title: "Delete",
487
- sx: {
488
- ml: 'xs'
489
- },
490
459
  onPress: function onPress() {
491
460
  return removeRow(index);
492
461
  }
493
462
  }, ___EmotionJSX(Icon, {
494
463
  icon: DeleteIcon,
495
- size: "sm",
464
+ color: "neutral.30",
465
+ size: "24px",
496
466
  title: {
497
467
  name: 'Delete Icon'
498
468
  }
@@ -24,9 +24,9 @@ export var success = {
24
24
  light: '#e6ffe9'
25
25
  };
26
26
  export var warning = {
27
- bright: '#ffb91c',
28
- dark: '#b05b00',
29
- light: '#fff6e6'
27
+ bright: '#E86900',
28
+ dark: '#C9450D',
29
+ light: '#FFF6F2'
30
30
  };
31
31
 
32
32
  // NEUTRAL COLORS
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.21.0-alpha.2",
3
+ "version": "2.21.0-alpha.4",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",