iguazio.dashboard-react-controls 1.3.7 → 1.3.9

package/dist/components/Tooltip/Tooltip.js

@@ -65,61 +65,75 @@ var Tooltip = function Tooltip(_ref) {
   var handleScroll = function handleScroll() {
     setShow(false);
   };
-  var handleMouseLeave = function handleMouseLeave() {
-    setShow(false);
-  };
+  var handleMouseLeave = (0, _react.useCallback)(function (event) {
+    if (tooltipRef.current && !tooltipRef.current.contains(event.relatedTarget) && parentRef.current && !parentRef.current.contains(event.relatedTarget)) {
+      setShow(false);
+    }
+  }, []);
   var handleMouseEnter = (0, _react.useCallback)(function (event) {
-    var _parentRef$current$ch = _slicedToArray(parentRef.current.childNodes, 1),
-      child = _parentRef$current$ch[0];
-    var show = !hidden && (textShow ? true : !child ? false : child.nodeType !== Node.TEXT_NODE ||
-    /*
-    If the child node is a text node and the text of the child node inside the container is greater than the width of the container, then show tooltip.
-    */
-    child.nodeType === Node.TEXT_NODE && parentRef.current.scrollWidth > parentRef.current.offsetWidth);
-    if (show) {
-      var _parentRef$current$ge, _parentRef$current, _tooltipRef$current$g, _tooltipRef$current;
-      setShow(true);
-      var _ref2 = (_parentRef$current$ge = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.getBoundingClientRect()) !== null && _parentRef$current$ge !== void 0 ? _parentRef$current$ge : {},
-        height = _ref2.height,
-        top = _ref2.top,
-        bottom = _ref2.bottom;
-      var _ref3 = (_tooltipRef$current$g = (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.getBoundingClientRect()) !== null && _tooltipRef$current$g !== void 0 ? _tooltipRef$current$g : {
-          height: 0,
-          width: 0
-        },
-        tooltipHeight = _ref3.height,
-        tooltipWidth = _ref3.width;
-      var leftPosition = event.x - (event.x + tooltipWidth - window.innerWidth + offset);
-      var left = event.x + tooltipWidth + offset > window.innerWidth ? leftPosition > offset ? leftPosition : offset : event.x + offset;
-      if (top + height + offset + tooltipHeight >= window.innerHeight) {
-        setStyle({
-          top: bottom - height - offset - tooltipHeight,
-          left: left
-        });
-      } else {
-        setStyle({
-          top: top + height + offset,
-          left: left
-        });
+    if (!show) {
+      var _parentRef$current$ch = _slicedToArray(parentRef.current.childNodes, 1),
+        child = _parentRef$current$ch[0];
+      var _show = !hidden && (textShow ? true : !child ? false : child.nodeType !== Node.TEXT_NODE ||
+      /*
+      If the child node is a text node and the text of the child node inside the container is greater than the width of the container, then show tooltip.
+      */
+      child.nodeType === Node.TEXT_NODE && parentRef.current.scrollWidth > parentRef.current.offsetWidth);
+      if (_show) {
+        var _parentRef$current$ge, _parentRef$current, _tooltipRef$current$g, _tooltipRef$current;
+        setShow(true);
+        var _ref2 = (_parentRef$current$ge = parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.getBoundingClientRect()) !== null && _parentRef$current$ge !== void 0 ? _parentRef$current$ge : {},
+          height = _ref2.height,
+          top = _ref2.top,
+          bottom = _ref2.bottom;
+        var _ref3 = (_tooltipRef$current$g = (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.getBoundingClientRect()) !== null && _tooltipRef$current$g !== void 0 ? _tooltipRef$current$g : {
+            height: 0,
+            width: 0
+          },
+          tooltipHeight = _ref3.height,
+          tooltipWidth = _ref3.width;
+        var leftPosition = event.x - (event.x + tooltipWidth - window.innerWidth + offset);
+        var left = event.x + tooltipWidth + offset > window.innerWidth ? leftPosition > offset ? leftPosition : offset : event.x + offset;
+        if (top + height + offset + tooltipHeight >= window.innerHeight) {
+          var topPosition = bottom - height - offset - tooltipHeight;
+          setStyle({
+            top: topPosition > 0 ? topPosition : offset,
+            left: left
+          });
+        } else {
+          setStyle({
+            top: top + height + offset,
+            left: left
+          });
+        }
       }
     }
-  }, [hidden, textShow]);
+  }, [hidden, textShow, show]);
   var clearStyles = (0, _lodash.debounce)(function () {
     if (!(0, _common.isEveryObjectValueEmpty)(style)) {
       setStyle({});
     }
   }, 100);
   (0, _react.useEffect)(function () {
-    var node = parentRef.current;
-    if (node) {
-      node.addEventListener('mouseenter', handleMouseEnter);
-      node.addEventListener('mouseleave', handleMouseLeave);
+    var parentNode = parentRef.current;
+    if (parentNode) {
+      parentNode.addEventListener('mouseenter', handleMouseEnter);
+      parentNode.addEventListener('mouseleave', handleMouseLeave);
+      return function () {
+        parentNode.removeEventListener('mouseenter', handleMouseEnter);
+        parentNode.removeEventListener('mouseleave', handleMouseLeave);
+      };
+    }
+  }, [parentRef, handleMouseEnter, handleMouseLeave]);
+  (0, _react.useEffect)(function () {
+    var tooltipNode = tooltipRef.current;
+    if (tooltipNode && show) {
+      tooltipNode.addEventListener('mouseleave', handleMouseLeave);
       return function () {
-        node.removeEventListener('mouseenter', handleMouseEnter);
-        node.removeEventListener('mouseleave', handleMouseLeave);
+        tooltipNode.removeEventListener('mouseleave', handleMouseLeave);
       };
     }
-  }, [parentRef, handleMouseEnter]);
+  }, [tooltipRef, handleMouseEnter, handleMouseLeave, show]);
   (0, _react.useEffect)(function () {
     if (show) {
       window.addEventListener('scroll', handleScroll, true);

package/dist/scss/mixins.scss

@@ -1158,7 +1158,6 @@
     font-size: 1em;
     padding: 0 0 0 0.45em;
     height: inherit;
-    text-transform: capitalize;
     user-select: none;
     white-space: nowrap;
   }

package/dist/utils/validation.util.js

@@ -224,6 +224,13 @@ var generateRule = {
       pattern: new RegExp('^[' + convertToPattern(chars) + ']+$')
     };
   },
+  validCharactersWithPrefix: function validCharactersWithPrefix(chars) {
+    return {
+      name: 'validCharactersWithPrefix',
+      label: _constants.validation.VALID_CHARACTERS + ': ' + convertToLabel(chars),
+      pattern: new RegExp('^([' + convertToPattern(chars) + ']+/)?[' + convertToPattern(chars) + ']+$')
+    };
+  },
   noConsecutiveCharacters: function noConsecutiveCharacters(chars) {
     var convertedPattern = chars.split(' ').map(function (charPair) {
       var charsPairArray = charPair.split('');
@@ -311,7 +318,7 @@ var validationRules = {
     }
   },
   function: {
-    name: [generateRule.validCharacters('a-z A-Z 0-9 - .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
+    name: [generateRule.validCharacters('a-z 0-9 - .'), generateRule.beginEndWith('a-z 0-9'), generateRule.length({
       max: 63
     }), generateRule.required()]
   },
@@ -336,6 +343,11 @@ var validationRules = {
     secretKey: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginNotWith('.'), generateRule.length({
       max: 253
     })]
+  },
+  job: {
+    label: [generateRule.validCharactersWithPrefix('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
+      max: 56
+    })]
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "1.3.7",
+    "version": "1.3.9",
     "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",