Create a new dist version 2.2.0

Collecting: - Fix [DRC] Apply ESLint & Prettier Formatting Adjustments (iguazio#312) - Fix [Models endpoints monitoring, metrics] The 'Choose metrics' dropdown is closing unexpectedly (iguazio#311) - Fix [Round Icon] Tooltip doesn't disappear (iguazio#313)
ilan7empest · Sep 5, 2024 · 10ba5a7 · 10ba5a7
1 parent 5f8fa94
commit 10ba5a7
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 67 deletions.
diff --git a/commit_message b/commit_message
@@ -1,8 +1,8 @@
 
 
-Create a new dist version 2.1.6
+Create a new dist version 2.2.0
 
 Collecting:
-- Fix [DRC] ESLint Error: useRef in Callback (#307)
-- Fix [UI] Labels don't use all the block width (#308)
-- Fix [Model endpoints] switching to model/feature set overview is malfunctioning (#309)
+- Fix [DRC] Apply ESLint & Prettier Formatting Adjustments (#312)
+- Fix [Models endpoints monitoring, metrics] The 'Choose metrics' dropdown is closing unexpectedly (#311)
+- Fix [Round Icon] Tooltip doesn't disappear (#313)
diff --git a/dist/components/FormChipCell/formChipCell.util.js b/dist/components/FormChipCell/formChipCell.util.js
@@ -36,7 +36,7 @@ const getTextWidth = elementWithText => {
     const styles = {
       position: 'absolute',
       left: '-10000px',
-      top: "auto",
+      top: 'auto',
       visibility: 'hidden'
     };
     for (const [styleName, styleValue] of Object.entries(styles)) {

diff --git a/dist/components/PopUpDialog/PopUpDialog.js b/dist/components/PopUpDialog/PopUpDialog.js
@@ -118,11 +118,15 @@ const PopUpDialog = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       trailing: true,
       leading: true
     });
+    const popupObserver = new ResizeObserver(throttledCalculatedCustomPopUpPosition);
+    const popupElement = ref.current;
+    popupObserver.observe(popupElement);
     window.addEventListener('resize', throttledCalculatedCustomPopUpPosition);
     return () => {
+      popupObserver.unobserve(popupElement);
       window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition);
     };
-  });
+  }, [calculateCustomPopUpPosition, ref]);
   return showPopUp ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     className: popUpClassNames,

diff --git a/dist/components/Tooltip/Tooltip.js b/dist/components/Tooltip/Tooltip.js
@@ -144,11 +144,13 @@ const Tooltip = _ref => {
       className: tooltipClassNames,
       dangerouslySetInnerHTML: {
         __html: children
-      }
+      },
+      onClick: handleMouseLeave
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "data-testid": id ? "".concat(id, "-tooltip-wrapper") : 'tooltip-wrapper',
       ref: parentRef,
       className: tooltipClassNames,
+      onClick: handleMouseLeave,
       children: children
     }), !hidden && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
       classNames: "fade",

diff --git a/dist/components/Tooltip/tooltip.scss b/dist/components/Tooltip/tooltip.scss
@@ -27,4 +27,3 @@
     }
   }
 }
-
diff --git a/dist/scss/fonts.scss b/dist/scss/fonts.scss
@@ -4,90 +4,97 @@
   font-style: normal;
   font-weight: 300;
   src: url('../fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
+  src:
+    local(''),
+    /* IE6-IE8 */ url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'),
+    /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-300.woff2') format('woff2'),
+    /* Modern Browsers */ url('../fonts/roboto-v27-latin-300.woff') format('woff'),
+    /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-300.ttf') format('truetype'),
+    /* Legacy iOS */ url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg');
 }
 /* roboto-regular - latin */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+  src:
+    local(''),
+    /* IE6-IE8 */ url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'),
+    /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'),
+    /* Modern Browsers */ url('../fonts/roboto-v27-latin-regular.woff') format('woff'),
+    /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'),
+    /* Legacy iOS */ url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg');
 }
 /* roboto-italic - latin */
 @font-face {
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/roboto-v27-latin-italic.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../fonts/roboto-v27-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v27-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v27-latin-italic.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v27-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v27-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
+  src:
+    local(''),
+    /* IE6-IE8 */ url('../fonts/roboto-v27-latin-italic.eot?#iefix') format('embedded-opentype'),
+    /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-italic.woff2') format('woff2'),
+    /* Modern Browsers */ url('../fonts/roboto-v27-latin-italic.woff') format('woff'),
+    /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-italic.ttf') format('truetype'),
+    /* Legacy iOS */ url('../fonts/roboto-v27-latin-italic.svg#Roboto') format('svg');
 }
 /* roboto-500 - latin */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
   src: url('../fonts/roboto-v27-latin-500.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v27-latin-500.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
+  src:
+    local(''),
+    /* IE6-IE8 */ url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'),
+    /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-500.woff2') format('woff2'),
+    /* Modern Browsers */ url('../fonts/roboto-v27-latin-500.woff') format('woff'),
+    /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500.ttf') format('truetype'),
+    /* Legacy iOS */ url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg');
 }
 /* roboto-500italic - latin */
 @font-face {
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 500;
   src: url('../fonts/roboto-v27-latin-500italic.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../fonts/roboto-v27-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v27-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v27-latin-500italic.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v27-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v27-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
+  src:
+    local(''),
+    /* IE6-IE8 */ url('../fonts/roboto-v27-latin-500italic.eot?#iefix') format('embedded-opentype'),
+    /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-500italic.woff2') format('woff2'),
+    /* Modern Browsers */ url('../fonts/roboto-v27-latin-500italic.woff') format('woff'),
+    /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500italic.ttf') format('truetype'),
+    /* Legacy iOS */ url('../fonts/roboto-v27-latin-500italic.svg#Roboto') format('svg');
 }
 /* roboto-700 - latin */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
   src: url('../fonts/roboto-v27-latin-700.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v27-latin-700.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v27-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
+  src:
+    local(''),
+    /* IE6-IE8 */ url('../fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'),
+    /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-700.woff2') format('woff2'),
+    /* Modern Browsers */ url('../fonts/roboto-v27-latin-700.woff') format('woff'),
+    /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-700.ttf') format('truetype'),
+    /* Legacy iOS */ url('../fonts/roboto-v27-latin-700.svg#Roboto') format('svg');
 }
 /* roboto-700italic - latin */
 @font-face {
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 700;
   src: url('../fonts/roboto-v27-latin-700italic.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../fonts/roboto-v27-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/roboto-v27-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/roboto-v27-latin-700italic.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/roboto-v27-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/roboto-v27-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
+  src:
+    local(''),
+    /* IE6-IE8 */ url('../fonts/roboto-v27-latin-700italic.eot?#iefix') format('embedded-opentype'),
+    /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-700italic.woff2') format('woff2'),
+    /* Modern Browsers */ url('../fonts/roboto-v27-latin-700italic.woff') format('woff'),
+    /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-700italic.ttf') format('truetype'),
+    /* Legacy iOS */ url('../fonts/roboto-v27-latin-700italic.svg#Roboto') format('svg');
 }
 
 /* source-code-pro-regular - latin */
@@ -96,10 +103,15 @@
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/source-code-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('../fonts/source-code-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../fonts/source-code-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../fonts/source-code-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('../fonts/source-code-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro') format('svg'); /* Legacy iOS */
-}
+  src:
+    local(''),
+    /* IE6-IE8 */ url('../fonts/source-code-pro-v14-latin-regular.eot?#iefix')
+      format('embedded-opentype'),
+    /* Super Modern Browsers */ url('../fonts/source-code-pro-v14-latin-regular.woff2')
+      format('woff2'),
+    /* Modern Browsers */ url('../fonts/source-code-pro-v14-latin-regular.woff') format('woff'),
+    /* Safari, Android, iOS */ url('../fonts/source-code-pro-v14-latin-regular.ttf')
+      format('truetype'),
+    /* Legacy iOS */ url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro')
+      format('svg');
+}
diff --git a/dist/scss/mixins.scss b/dist/scss/mixins.scss
@@ -315,7 +315,7 @@
     }
 
     &_disabled {
-      @include editableChipFont($spunPearl)
+      @include editableChipFont($spunPearl);
     }
   } @else if $component == Chip {
     &_white {
@@ -1002,19 +1002,19 @@
 
 @mixin stats() {
   &_total {
-    @include statsAddBorderAndTextColor($totalBorder, $black)
+    @include statsAddBorderAndTextColor($totalBorder, $black);
   }
 
   &_running {
-    @include statsAddBorderAndTextColor($runningBorder, $pictonBlue)
+    @include statsAddBorderAndTextColor($runningBorder, $pictonBlue);
   }
 
   &_failed {
-    @include statsAddBorderAndTextColor($failedBorder, $amaranth)
+    @include statsAddBorderAndTextColor($failedBorder, $amaranth);
   }
 
   &_completed {
-    @include statsAddBorderAndTextColor($completedBorder, $brightTurquoise)
+    @include statsAddBorderAndTextColor($completedBorder, $brightTurquoise);
   }
 }
 
@@ -1136,7 +1136,8 @@
     pointer-events: none;
     opacity: 0.5;
 
-    ~ label, ~ .label {
+    ~ label,
+    ~ .label {
       pointer-events: none;
       opacity: 0.5;
     }
@@ -1175,7 +1176,8 @@
       border-color: currentColor;
     }
 
-    ~ label, ~ .label {
+    ~ label,
+    ~ .label {
       color: $spunPearl;
       cursor: not-allowed;
     }
@@ -1202,7 +1204,8 @@
     }
   }
 
-  ~ label, ~ .label {
+  ~ label,
+  ~ .label {
     display: flex;
     flex: 1;
     align-items: center;

diff --git a/dist/scss/shadows.scss b/dist/scss/shadows.scss
@@ -2,7 +2,9 @@
 
 $jobsShadow: 0 3px 4px rgba($black, 0.18);
 $headerShadow: inset 0 -1px 0 #edecef;
-$mainHeaderShadow: 0 2px 4px -1px rgba($black, 0.2), 0 4px 5px 0 rgba($black, 0.14),
+$mainHeaderShadow:
+  0 2px 4px -1px rgba($black, 0.2),
+  0 4px 5px 0 rgba($black, 0.14),
   0 1px 10px 0 rgba($black, 0.12);
 $filterShadow: 0 4px 8px rgba($black, 0.23);
 $tooltipShadow: 0 5px 11px rgba($black, 0.18);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "2.1.6",
+    "version": "2.2.0",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "main": "dist/index.js",
     "module": "dist/index.js",