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.
@@ -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 && (editConfig.chipIndex === chipIndex || !isEditable) && 'item-icon-close_hidden');
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;
@@ -58,6 +58,10 @@
58
58
  justify-content: center;
59
59
 
60
60
  &_hidden {
61
+ display: none;
62
+ }
63
+
64
+ &_invisible {
61
65
  visibility: hidden;
62
66
  }
63
67
 
@@ -36,7 +36,7 @@ const getTextWidth = elementWithText => {
36
36
  const styles = {
37
37
  position: 'absolute',
38
38
  left: '-10000px',
39
- top: "auto",
39
+ top: 'auto',
40
40
  visibility: 'hidden'
41
41
  };
42
42
  for (const [styleName, styleValue] of Object.entries(styles)) {
@@ -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",
@@ -27,4 +27,3 @@
27
27
  }
28
28
  }
29
29
  }
30
-
@@ -47,6 +47,7 @@ const useChipCell = (isEditMode, visibleChipsMaxLength) => {
47
47
  setShowHiddenChips(true);
48
48
  }
49
49
  }
50
+ event && event.stopPropagation();
50
51
  }, [isEditMode, visibleChipsMaxLength]);
51
52
  (0, _react.useEffect)(() => {
52
53
  if (showHiddenChips) {
@@ -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 = () => (validate, time) => {
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 function (value) {
30
- return new Promise(resolve => {
31
- if (timeout.current) {
32
- timeout.current();
33
- }
34
- if (value !== lastValue.current) {
35
- const timerId = setTimeout(() => {
36
- lastValue.current = value;
37
- lastResult.current = validate(value);
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
- }, time);
40
- timeout.current = () => {
41
- clearTimeout(timerId);
42
- resolve(true);
43
- };
44
- } else {
45
- resolve(lastResult.current);
46
- }
47
- });
48
- };
47
+ }
48
+ });
49
+ };
50
+ }, []);
49
51
  };
50
52
  exports.useDebounce = useDebounce;
@@ -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: local(''),
8
- url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
9
- url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
10
- url('../fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
11
- url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
12
- url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
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: local(''),
21
- url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
22
- url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
23
- url('../fonts/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
24
- url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
25
- url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
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: local(''),
34
- url('../fonts/roboto-v27-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
35
- url('../fonts/roboto-v27-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
36
- url('../fonts/roboto-v27-latin-italic.woff') format('woff'), /* Modern Browsers */
37
- url('../fonts/roboto-v27-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
38
- url('../fonts/roboto-v27-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
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: local(''),
47
- url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
48
- url('../fonts/roboto-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
49
- url('../fonts/roboto-v27-latin-500.woff') format('woff'), /* Modern Browsers */
50
- url('../fonts/roboto-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
51
- url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
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: local(''),
60
- url('../fonts/roboto-v27-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
61
- url('../fonts/roboto-v27-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
62
- url('../fonts/roboto-v27-latin-500italic.woff') format('woff'), /* Modern Browsers */
63
- url('../fonts/roboto-v27-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
64
- url('../fonts/roboto-v27-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
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: local(''),
73
- url('../fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
74
- url('../fonts/roboto-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
75
- url('../fonts/roboto-v27-latin-700.woff') format('woff'), /* Modern Browsers */
76
- url('../fonts/roboto-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
77
- url('../fonts/roboto-v27-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
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: local(''),
86
- url('../fonts/roboto-v27-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
87
- url('../fonts/roboto-v27-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
88
- url('../fonts/roboto-v27-latin-700italic.woff') format('woff'), /* Modern Browsers */
89
- url('../fonts/roboto-v27-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
90
- url('../fonts/roboto-v27-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
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: local(''),
100
- url('../fonts/source-code-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
101
- url('../fonts/source-code-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
102
- url('../fonts/source-code-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
103
- url('../fonts/source-code-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
104
- url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro') format('svg'); /* Legacy iOS */
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
+ }
@@ -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, ~ .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, ~ .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, ~ .label {
1207
+ ~ label,
1208
+ ~ .label {
1206
1209
  display: flex;
1207
1210
  flex: 1;
1208
1211
  align-items: center;
@@ -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: 0 2px 4px -1px rgba($black, 0.2), 0 4px 5px 0 rgba($black, 0.14),
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 = internalLabels => {
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.1.5",
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",