iguazio.dashboard-react-controls 2.1.5 → 2.2.0
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/dist/components/FormChipCell/HiddenChipsBlock/HiddenChipsBlock.js +1 -0
- package/dist/components/FormChipCell/NewChipForm/NewChipForm.js +1 -1
- package/dist/components/FormChipCell/NewChipForm/newChipForm.scss +4 -0
- package/dist/components/FormChipCell/formChipCell.util.js +1 -1
- package/dist/components/PopUpDialog/PopUpDialog.js +5 -1
- package/dist/components/Tooltip/Tooltip.js +3 -1
- package/dist/components/Tooltip/tooltip.scss +0 -1
- package/dist/hooks/useChipCell.hook.js +1 -0
- package/dist/hooks/useDebounce.hook.js +22 -20
- package/dist/scss/fonts.scss +61 -49
- package/dist/scss/mixins.scss +11 -8
- package/dist/scss/shadows.scss +3 -1
- package/dist/utils/validation.util.js +2 -1
- package/package.json +1 -1
|
@@ -61,6 +61,7 @@ const HiddenChipsBlock = /*#__PURE__*/_react.default.forwardRef((_ref, _ref2) =>
|
|
|
61
61
|
return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
62
62
|
ref: hiddenChipsPopUpRef,
|
|
63
63
|
className: hiddenChipsBlockClassNames,
|
|
64
|
+
onClick: event => event.stopPropagation(),
|
|
64
65
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
65
66
|
className: "chip-block-hidden__scrollable-container",
|
|
66
67
|
children: chips === null || chips === void 0 ? void 0 : chips.map(element => {
|
|
@@ -85,7 +85,7 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
85
85
|
const labelKeyClassName = (0, _classnames.default)(className, !editConfig.isKeyFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'key'], [])) && !(0, _lodash.isEmpty)(chipData.key) && !chip.disabled && 'item_edited_invalid');
|
|
86
86
|
const labelContainerClassName = (0, _classnames.default)('edit-chip-container', background && "edit-chip-container-background_".concat(background), borderColor && "edit-chip-container-border_".concat(borderColor), font && "edit-chip-container-font_".concat(font), density && "edit-chip-container-density_".concat(density), borderRadius && "edit-chip-container-border_".concat(borderRadius), (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited', chip.disabled && 'edit-chip-container_disabled edit-chip-container-font_disabled');
|
|
87
87
|
const labelValueClassName = (0, _classnames.default)('input-label-value', !editConfig.isValueFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'value'], [])) && !(0, _lodash.isEmpty)(chipData.value) && 'item_edited_invalid');
|
|
88
|
-
const closeButtonClass = (0, _classnames.default)('item-icon-close', !chip.disabled &&
|
|
88
|
+
const closeButtonClass = (0, _classnames.default)('item-icon-close', !chip.disabled && editConfig.chipIndex === chipIndex && isEditable && 'item-icon-close_invisible', !isEditable && 'item-icon-close_hidden');
|
|
89
89
|
(0, _react.useLayoutEffect)(() => {
|
|
90
90
|
if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {
|
|
91
91
|
const currentWidthKeyInput = refInputKey.current.scrollWidth + 1;
|
|
@@ -118,11 +118,15 @@ const PopUpDialog = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
118
118
|
trailing: true,
|
|
119
119
|
leading: true
|
|
120
120
|
});
|
|
121
|
+
const popupObserver = new ResizeObserver(throttledCalculatedCustomPopUpPosition);
|
|
122
|
+
const popupElement = ref.current;
|
|
123
|
+
popupObserver.observe(popupElement);
|
|
121
124
|
window.addEventListener('resize', throttledCalculatedCustomPopUpPosition);
|
|
122
125
|
return () => {
|
|
126
|
+
popupObserver.unobserve(popupElement);
|
|
123
127
|
window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition);
|
|
124
128
|
};
|
|
125
|
-
});
|
|
129
|
+
}, [calculateCustomPopUpPosition, ref]);
|
|
126
130
|
return showPopUp ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
127
131
|
ref: ref,
|
|
128
132
|
className: popUpClassNames,
|
|
@@ -144,11 +144,13 @@ const Tooltip = _ref => {
|
|
|
144
144
|
className: tooltipClassNames,
|
|
145
145
|
dangerouslySetInnerHTML: {
|
|
146
146
|
__html: children
|
|
147
|
-
}
|
|
147
|
+
},
|
|
148
|
+
onClick: handleMouseLeave
|
|
148
149
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
149
150
|
"data-testid": id ? "".concat(id, "-tooltip-wrapper") : 'tooltip-wrapper',
|
|
150
151
|
ref: parentRef,
|
|
151
152
|
className: tooltipClassNames,
|
|
153
|
+
onClick: handleMouseLeave,
|
|
152
154
|
children: children
|
|
153
155
|
}), !hidden && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
|
|
154
156
|
classNames: "fade",
|
|
@@ -22,29 +22,31 @@ under the Apache 2.0 license is conditioned upon your compliance with
|
|
|
22
22
|
such restriction.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
const useDebounce = () =>
|
|
25
|
+
const useDebounce = () => {
|
|
26
26
|
const timeout = (0, _react.useRef)(null);
|
|
27
27
|
const lastValue = (0, _react.useRef)(null);
|
|
28
28
|
const lastResult = (0, _react.useRef)(null);
|
|
29
|
-
return
|
|
30
|
-
return
|
|
31
|
-
|
|
32
|
-
timeout.current
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
29
|
+
return (0, _react.useCallback)((validate, time) => {
|
|
30
|
+
return value => {
|
|
31
|
+
return new Promise(resolve => {
|
|
32
|
+
if (timeout.current) {
|
|
33
|
+
timeout.current();
|
|
34
|
+
}
|
|
35
|
+
if (value !== lastValue.current) {
|
|
36
|
+
const timerId = setTimeout(() => {
|
|
37
|
+
lastValue.current = value;
|
|
38
|
+
lastResult.current = validate(value);
|
|
39
|
+
resolve(lastResult.current);
|
|
40
|
+
}, time);
|
|
41
|
+
timeout.current = () => {
|
|
42
|
+
clearTimeout(timerId);
|
|
43
|
+
resolve(true);
|
|
44
|
+
};
|
|
45
|
+
} else {
|
|
38
46
|
resolve(lastResult.current);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
};
|
|
44
|
-
} else {
|
|
45
|
-
resolve(lastResult.current);
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
};
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
}, []);
|
|
49
51
|
};
|
|
50
52
|
exports.useDebounce = useDebounce;
|
package/dist/scss/fonts.scss
CHANGED
|
@@ -4,12 +4,13 @@
|
|
|
4
4
|
font-style: normal;
|
|
5
5
|
font-weight: 300;
|
|
6
6
|
src: url('../fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
|
|
7
|
-
src:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
src:
|
|
8
|
+
local(''),
|
|
9
|
+
/* IE6-IE8 */ url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'),
|
|
10
|
+
/* Super Modern Browsers */ url('../fonts/roboto-v27-latin-300.woff2') format('woff2'),
|
|
11
|
+
/* Modern Browsers */ url('../fonts/roboto-v27-latin-300.woff') format('woff'),
|
|
12
|
+
/* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-300.ttf') format('truetype'),
|
|
13
|
+
/* Legacy iOS */ url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg');
|
|
13
14
|
}
|
|
14
15
|
/* roboto-regular - latin */
|
|
15
16
|
@font-face {
|
|
@@ -17,12 +18,13 @@
|
|
|
17
18
|
font-style: normal;
|
|
18
19
|
font-weight: 400;
|
|
19
20
|
src: url('../fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
|
|
20
|
-
src:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
src:
|
|
22
|
+
local(''),
|
|
23
|
+
/* IE6-IE8 */ url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'),
|
|
24
|
+
/* Super Modern Browsers */ url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'),
|
|
25
|
+
/* Modern Browsers */ url('../fonts/roboto-v27-latin-regular.woff') format('woff'),
|
|
26
|
+
/* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'),
|
|
27
|
+
/* Legacy iOS */ url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg');
|
|
26
28
|
}
|
|
27
29
|
/* roboto-italic - latin */
|
|
28
30
|
@font-face {
|
|
@@ -30,12 +32,13 @@
|
|
|
30
32
|
font-style: italic;
|
|
31
33
|
font-weight: 400;
|
|
32
34
|
src: url('../fonts/roboto-v27-latin-italic.eot'); /* IE9 Compat Modes */
|
|
33
|
-
src:
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
src:
|
|
36
|
+
local(''),
|
|
37
|
+
/* IE6-IE8 */ url('../fonts/roboto-v27-latin-italic.eot?#iefix') format('embedded-opentype'),
|
|
38
|
+
/* Super Modern Browsers */ url('../fonts/roboto-v27-latin-italic.woff2') format('woff2'),
|
|
39
|
+
/* Modern Browsers */ url('../fonts/roboto-v27-latin-italic.woff') format('woff'),
|
|
40
|
+
/* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-italic.ttf') format('truetype'),
|
|
41
|
+
/* Legacy iOS */ url('../fonts/roboto-v27-latin-italic.svg#Roboto') format('svg');
|
|
39
42
|
}
|
|
40
43
|
/* roboto-500 - latin */
|
|
41
44
|
@font-face {
|
|
@@ -43,12 +46,13 @@
|
|
|
43
46
|
font-style: normal;
|
|
44
47
|
font-weight: 500;
|
|
45
48
|
src: url('../fonts/roboto-v27-latin-500.eot'); /* IE9 Compat Modes */
|
|
46
|
-
src:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
src:
|
|
50
|
+
local(''),
|
|
51
|
+
/* IE6-IE8 */ url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'),
|
|
52
|
+
/* Super Modern Browsers */ url('../fonts/roboto-v27-latin-500.woff2') format('woff2'),
|
|
53
|
+
/* Modern Browsers */ url('../fonts/roboto-v27-latin-500.woff') format('woff'),
|
|
54
|
+
/* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500.ttf') format('truetype'),
|
|
55
|
+
/* Legacy iOS */ url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg');
|
|
52
56
|
}
|
|
53
57
|
/* roboto-500italic - latin */
|
|
54
58
|
@font-face {
|
|
@@ -56,12 +60,13 @@
|
|
|
56
60
|
font-style: italic;
|
|
57
61
|
font-weight: 500;
|
|
58
62
|
src: url('../fonts/roboto-v27-latin-500italic.eot'); /* IE9 Compat Modes */
|
|
59
|
-
src:
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
src:
|
|
64
|
+
local(''),
|
|
65
|
+
/* IE6-IE8 */ url('../fonts/roboto-v27-latin-500italic.eot?#iefix') format('embedded-opentype'),
|
|
66
|
+
/* Super Modern Browsers */ url('../fonts/roboto-v27-latin-500italic.woff2') format('woff2'),
|
|
67
|
+
/* Modern Browsers */ url('../fonts/roboto-v27-latin-500italic.woff') format('woff'),
|
|
68
|
+
/* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500italic.ttf') format('truetype'),
|
|
69
|
+
/* Legacy iOS */ url('../fonts/roboto-v27-latin-500italic.svg#Roboto') format('svg');
|
|
65
70
|
}
|
|
66
71
|
/* roboto-700 - latin */
|
|
67
72
|
@font-face {
|
|
@@ -69,12 +74,13 @@
|
|
|
69
74
|
font-style: normal;
|
|
70
75
|
font-weight: 700;
|
|
71
76
|
src: url('../fonts/roboto-v27-latin-700.eot'); /* IE9 Compat Modes */
|
|
72
|
-
src:
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
77
|
+
src:
|
|
78
|
+
local(''),
|
|
79
|
+
/* IE6-IE8 */ url('../fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'),
|
|
80
|
+
/* Super Modern Browsers */ url('../fonts/roboto-v27-latin-700.woff2') format('woff2'),
|
|
81
|
+
/* Modern Browsers */ url('../fonts/roboto-v27-latin-700.woff') format('woff'),
|
|
82
|
+
/* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-700.ttf') format('truetype'),
|
|
83
|
+
/* Legacy iOS */ url('../fonts/roboto-v27-latin-700.svg#Roboto') format('svg');
|
|
78
84
|
}
|
|
79
85
|
/* roboto-700italic - latin */
|
|
80
86
|
@font-face {
|
|
@@ -82,12 +88,13 @@
|
|
|
82
88
|
font-style: italic;
|
|
83
89
|
font-weight: 700;
|
|
84
90
|
src: url('../fonts/roboto-v27-latin-700italic.eot'); /* IE9 Compat Modes */
|
|
85
|
-
src:
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
+
src:
|
|
92
|
+
local(''),
|
|
93
|
+
/* IE6-IE8 */ url('../fonts/roboto-v27-latin-700italic.eot?#iefix') format('embedded-opentype'),
|
|
94
|
+
/* Super Modern Browsers */ url('../fonts/roboto-v27-latin-700italic.woff2') format('woff2'),
|
|
95
|
+
/* Modern Browsers */ url('../fonts/roboto-v27-latin-700italic.woff') format('woff'),
|
|
96
|
+
/* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-700italic.ttf') format('truetype'),
|
|
97
|
+
/* Legacy iOS */ url('../fonts/roboto-v27-latin-700italic.svg#Roboto') format('svg');
|
|
91
98
|
}
|
|
92
99
|
|
|
93
100
|
/* source-code-pro-regular - latin */
|
|
@@ -96,10 +103,15 @@
|
|
|
96
103
|
font-style: normal;
|
|
97
104
|
font-weight: 400;
|
|
98
105
|
src: url('../fonts/source-code-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
|
|
99
|
-
src:
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
+
src:
|
|
107
|
+
local(''),
|
|
108
|
+
/* IE6-IE8 */ url('../fonts/source-code-pro-v14-latin-regular.eot?#iefix')
|
|
109
|
+
format('embedded-opentype'),
|
|
110
|
+
/* Super Modern Browsers */ url('../fonts/source-code-pro-v14-latin-regular.woff2')
|
|
111
|
+
format('woff2'),
|
|
112
|
+
/* Modern Browsers */ url('../fonts/source-code-pro-v14-latin-regular.woff') format('woff'),
|
|
113
|
+
/* Safari, Android, iOS */ url('../fonts/source-code-pro-v14-latin-regular.ttf')
|
|
114
|
+
format('truetype'),
|
|
115
|
+
/* Legacy iOS */ url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro')
|
|
116
|
+
format('svg');
|
|
117
|
+
}
|
package/dist/scss/mixins.scss
CHANGED
|
@@ -315,7 +315,7 @@
|
|
|
315
315
|
}
|
|
316
316
|
|
|
317
317
|
&_disabled {
|
|
318
|
-
@include editableChipFont($spunPearl)
|
|
318
|
+
@include editableChipFont($spunPearl);
|
|
319
319
|
}
|
|
320
320
|
} @else if $component == Chip {
|
|
321
321
|
&_white {
|
|
@@ -1002,19 +1002,19 @@
|
|
|
1002
1002
|
|
|
1003
1003
|
@mixin stats() {
|
|
1004
1004
|
&_total {
|
|
1005
|
-
@include statsAddBorderAndTextColor($totalBorder, $black)
|
|
1005
|
+
@include statsAddBorderAndTextColor($totalBorder, $black);
|
|
1006
1006
|
}
|
|
1007
1007
|
|
|
1008
1008
|
&_running {
|
|
1009
|
-
@include statsAddBorderAndTextColor($runningBorder, $pictonBlue)
|
|
1009
|
+
@include statsAddBorderAndTextColor($runningBorder, $pictonBlue);
|
|
1010
1010
|
}
|
|
1011
1011
|
|
|
1012
1012
|
&_failed {
|
|
1013
|
-
@include statsAddBorderAndTextColor($failedBorder, $amaranth)
|
|
1013
|
+
@include statsAddBorderAndTextColor($failedBorder, $amaranth);
|
|
1014
1014
|
}
|
|
1015
1015
|
|
|
1016
1016
|
&_completed {
|
|
1017
|
-
@include statsAddBorderAndTextColor($completedBorder, $brightTurquoise)
|
|
1017
|
+
@include statsAddBorderAndTextColor($completedBorder, $brightTurquoise);
|
|
1018
1018
|
}
|
|
1019
1019
|
}
|
|
1020
1020
|
|
|
@@ -1136,7 +1136,8 @@
|
|
|
1136
1136
|
pointer-events: none;
|
|
1137
1137
|
opacity: 0.5;
|
|
1138
1138
|
|
|
1139
|
-
~ label,
|
|
1139
|
+
~ label,
|
|
1140
|
+
~ .label {
|
|
1140
1141
|
pointer-events: none;
|
|
1141
1142
|
opacity: 0.5;
|
|
1142
1143
|
}
|
|
@@ -1175,7 +1176,8 @@
|
|
|
1175
1176
|
border-color: currentColor;
|
|
1176
1177
|
}
|
|
1177
1178
|
|
|
1178
|
-
~ label,
|
|
1179
|
+
~ label,
|
|
1180
|
+
~ .label {
|
|
1179
1181
|
color: $spunPearl;
|
|
1180
1182
|
cursor: not-allowed;
|
|
1181
1183
|
}
|
|
@@ -1202,7 +1204,8 @@
|
|
|
1202
1204
|
}
|
|
1203
1205
|
}
|
|
1204
1206
|
|
|
1205
|
-
~ label,
|
|
1207
|
+
~ label,
|
|
1208
|
+
~ .label {
|
|
1206
1209
|
display: flex;
|
|
1207
1210
|
flex: 1;
|
|
1208
1211
|
align-items: center;
|
package/dist/scss/shadows.scss
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
$jobsShadow: 0 3px 4px rgba($black, 0.18);
|
|
4
4
|
$headerShadow: inset 0 -1px 0 #edecef;
|
|
5
|
-
$mainHeaderShadow:
|
|
5
|
+
$mainHeaderShadow:
|
|
6
|
+
0 2px 4px -1px rgba($black, 0.2),
|
|
7
|
+
0 4px 5px 0 rgba($black, 0.14),
|
|
6
8
|
0 1px 10px 0 rgba($black, 0.12);
|
|
7
9
|
$filterShadow: 0 4px 8px rgba($black, 0.23);
|
|
8
10
|
$tooltipShadow: 0 5px 11px rgba($black, 0.18);
|
|
@@ -380,7 +380,8 @@ const getValidationRules = (type, additionalRules) => {
|
|
|
380
380
|
* @returns {Object} The rule that checks if a value is not in the internal labels.
|
|
381
381
|
*/
|
|
382
382
|
exports.getValidationRules = getValidationRules;
|
|
383
|
-
const getInternalLabelsValidationRule =
|
|
383
|
+
const getInternalLabelsValidationRule = function () {
|
|
384
|
+
let internalLabels = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
384
385
|
return {
|
|
385
386
|
name: 'customLabels',
|
|
386
387
|
label: 'System-defined labels cannot be modified.',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "iguazio.dashboard-react-controls",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|