iguazio.dashboard-react-controls 2.1.6 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/FormChipCell/formChipCell.util.js +1 -1
  2. package/dist/components/PopUpDialog/PopUpDialog.js +15 -9
  3. package/dist/components/Tooltip/Tooltip.js +3 -1
  4. package/dist/components/Tooltip/tooltip.scss +0 -1
  5. package/dist/hooks/useChipCell.hook.js +10 -9
  6. package/dist/scss/fonts.scss +61 -49
  7. package/dist/scss/mixins.scss +11 -8
  8. package/dist/scss/shadows.scss +3 -1
  9. package/package.json +1 -1
package/dist/components/FormChipCell/formChipCell.util.js CHANGED
@@ -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)) {
package/dist/components/PopUpDialog/PopUpDialog.js CHANGED
@@ -114,15 +114,21 @@ const PopUpDialog = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
114
114
  calculateCustomPopUpPosition();
115
115
  }, [calculateCustomPopUpPosition]);
116
116
  (0, _react.useEffect)(() => {
117
- const throttledCalculatedCustomPopUpPosition = (0, _lodash.throttle)(calculateCustomPopUpPosition, 100, {
118
- trailing: true,
119
- leading: true
120
- });
121
- window.addEventListener('resize', throttledCalculatedCustomPopUpPosition);
122
- return () => {
123
- window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition);
124
- };
125
- });
117
+ if (showPopUp) {
118
+ const throttledCalculatedCustomPopUpPosition = (0, _lodash.throttle)(calculateCustomPopUpPosition, 100, {
119
+ trailing: true,
120
+ leading: true
121
+ });
122
+ const popupObserver = new ResizeObserver(throttledCalculatedCustomPopUpPosition);
123
+ const popupElement = ref.current;
124
+ popupObserver.observe(popupElement);
125
+ window.addEventListener('resize', throttledCalculatedCustomPopUpPosition);
126
+ return () => {
127
+ popupObserver.unobserve(popupElement);
128
+ window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition);
129
+ };
130
+ }
131
+ }, [calculateCustomPopUpPosition, ref, showPopUp]);
126
132
  return showPopUp ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
127
133
  ref: ref,
128
134
  className: popUpClassNames,
package/dist/components/Tooltip/Tooltip.js CHANGED
@@ -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",
package/dist/components/Tooltip/tooltip.scss CHANGED
@@ -27,4 +27,3 @@
27
27
  }
28
28
  }
29
29
  }
30
-
package/dist/hooks/useChipCell.hook.js CHANGED
@@ -39,21 +39,22 @@ const useChipCell = (isEditMode, visibleChipsMaxLength) => {
39
39
  const hiddenChipsCounterRef = (0, _react.useRef)();
40
40
  const hiddenChipsPopUpRef = (0, _react.useRef)();
41
41
  const handleShowElements = (0, _react.useCallback)(event => {
42
+ var _hiddenChipsCounterRe2;
42
43
  if (!isEditMode || isEditMode && visibleChipsMaxLength) {
43
44
  var _hiddenChipsCounterRe;
44
- if (!((_hiddenChipsCounterRe = hiddenChipsCounterRef.current) !== null && _hiddenChipsCounterRe !== void 0 && _hiddenChipsCounterRe.contains(event.target))) {
45
- setShowHiddenChips(false);
46
- } else {
45
+ if ((_hiddenChipsCounterRe = hiddenChipsCounterRef.current) !== null && _hiddenChipsCounterRe !== void 0 && _hiddenChipsCounterRe.contains(event.target) && !showHiddenChips) {
47
46
  setShowHiddenChips(true);
47
+ } else {
48
+ setShowHiddenChips(false);
48
49
  }
49
50
  }
50
- event && event.stopPropagation();
51
- }, [isEditMode, visibleChipsMaxLength]);
51
+ event && ((_hiddenChipsCounterRe2 = hiddenChipsCounterRef.current) === null || _hiddenChipsCounterRe2 === void 0 ? void 0 : _hiddenChipsCounterRe2.contains(event.target)) && event.stopPropagation();
52
+ }, [isEditMode, showHiddenChips, visibleChipsMaxLength]);
52
53
  (0, _react.useEffect)(() => {
53
54
  if (showHiddenChips) {
54
- window.addEventListener('click', handleShowElements);
55
- return () => window.removeEventListener('click', handleShowElements);
55
+ window.addEventListener('click', handleShowElements, true);
56
56
  }
57
+ return () => window.removeEventListener('click', handleShowElements, true);
57
58
  }, [showHiddenChips, handleShowElements]);
58
59
  const handleScroll = (0, _react.useCallback)(event => {
59
60
  if (event.target.parentElement !== (hiddenChipsPopUpRef === null || hiddenChipsPopUpRef === void 0 ? void 0 : hiddenChipsPopUpRef.current)) {
@@ -68,10 +69,10 @@ const useChipCell = (isEditMode, visibleChipsMaxLength) => {
68
69
  }, [handleScroll, showHiddenChips]);
69
70
  const resizeChipCell = (0, _react.useCallback)(() => {
70
71
  if (hiddenChipsPopUpRef !== null && hiddenChipsPopUpRef !== void 0 && hiddenChipsPopUpRef.current) {
71
- var _hiddenChipsCounterRe2;
72
+ var _hiddenChipsCounterRe3;
72
73
  const scrollableParent = (0, _getFirstScrollableParent.getFirstScrollableParent)(hiddenChipsCounterRef.current.offsetParent);
73
74
  const scrollableParentRect = scrollableParent.getBoundingClientRect();
74
- const hiddenChipsCounterRect = (_hiddenChipsCounterRe2 = hiddenChipsCounterRef.current) === null || _hiddenChipsCounterRe2 === void 0 ? void 0 : _hiddenChipsCounterRe2.getBoundingClientRect();
75
+ const hiddenChipsCounterRect = (_hiddenChipsCounterRe3 = hiddenChipsCounterRef.current) === null || _hiddenChipsCounterRe3 === void 0 ? void 0 : _hiddenChipsCounterRe3.getBoundingClientRect();
75
76
 
76
77
  // Check if the hiddenChipsCounterRect is outside the boundaries of the scrollableParentRect or the window
77
78
  if (hiddenChipsCounterRect.left < scrollableParentRect.left || hiddenChipsCounterRect.top < scrollableParentRect.top || hiddenChipsCounterRect.right > scrollableParentRect.right || hiddenChipsCounterRect.bottom > scrollableParentRect.bottom || hiddenChipsCounterRect.right > window.innerWidth || hiddenChipsCounterRect.bottom > window.innerHeight) {
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: 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
+ }
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, ~ .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;
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: 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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "iguazio.dashboard-react-controls",
3
- "version": "2.1.6",
3
+ "version": "2.2.1",
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",