iguazio.dashboard-react-controls 1.3.8 → 1.3.10

package/dist/components/FormSelect/FormSelect.js

@@ -178,7 +178,7 @@ var FormSelect = function FormSelect(_ref) {
     };
   }, [clickHandler, handleScroll, isOpen]);
   var scrollOptionToView = (0, _react.useCallback)(function () {
-    var selectedOptionEl = optionsListRef.current.querySelector("#".concat(_constants.SELECT_OPTION_ID_PREFIX).concat(input.value));
+    var selectedOptionEl = optionsListRef.current.querySelector("[data-custom-id=\"".concat(input.value, "\"]"));
     if (!selectedOptionEl) return;
     searchValue ? optionsListRef.current.scrollTo({
       top: 0,

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/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validation = exports.TERTIARY_BUTTON = exports.TAB_SHIFT = exports.TAB = exports.SELECT_OPTION_ID_PREFIX = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.NOTFOUND_ERROR_STATUS_CODE = exports.MODAL_SM = exports.MODAL_MIN = exports.MODAL_MD = exports.MODAL_MAX = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.GATEWAY_TIMEOUT_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DELETE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = exports.CLICK = exports.BADREQUEST_ERROR_STATUS_CODE = exports.BACKSPACE = void 0;
+exports.validation = exports.TERTIARY_BUTTON = exports.TAB_SHIFT = exports.TAB = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.NOTFOUND_ERROR_STATUS_CODE = exports.MODAL_SM = exports.MODAL_MIN = exports.MODAL_MD = exports.MODAL_MAX = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.GATEWAY_TIMEOUT_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DELETE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = exports.CLICK = exports.BADREQUEST_ERROR_STATUS_CODE = exports.BACKSPACE = void 0;
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -86,8 +86,4 @@ exports.MODAL_LG = MODAL_LG;
 var MODAL_MIN = 'min';
 exports.MODAL_MIN = MODAL_MIN;
 var MODAL_MAX = 'max';
-
-/*=========== SELECT =============*/
-exports.MODAL_MAX = MODAL_MAX;
-var SELECT_OPTION_ID_PREFIX = 'id-';
-exports.SELECT_OPTION_ID_PREFIX = SELECT_OPTION_ID_PREFIX;
+exports.MODAL_MAX = MODAL_MAX;

package/dist/elements/SelectOption/SelectOption.js

@@ -9,7 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("../../components");
 var _types = require("../../types");
-var _constants = require("../../constants");
 var _checkmark = require("../../images/checkmark.svg");
 require("./selectOption.scss");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -59,7 +58,7 @@ var SelectOption = function SelectOption(_ref) {
     onClick: function onClick() {
       !item.disabled && _onClick(item.id);
     },
-    id: "".concat(_constants.SELECT_OPTION_ID_PREFIX).concat(item.id),
+    "data-custom-id": item.id,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "label-row",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -99,7 +98,6 @@ SelectOption.defaultProps = {
   withSelectedIcon: true
 };
 SelectOption.propTypes = {
-  disabled: _propTypes.default.bool,
   name: _propTypes.default.string.isRequired,
   item: _types.SELECT_OPTION.isRequired,
   onClick: _propTypes.default.func,

package/dist/hooks/useFormTable.hook.js

@@ -68,6 +68,9 @@ var useFormTable = function useFormTable(formState) {
       var _editingItemRef$curre, _editingItemRef$curre2;
       if ((_editingItemRef$curre = editingItemRef.current) !== null && _editingItemRef$curre !== void 0 && (_editingItemRef$curre2 = _editingItemRef$curre.ui) !== null && _editingItemRef$curre2 !== void 0 && _editingItemRef$curre2.isNew) {
         formState.form.mutators.remove(editingItemRef.current.ui.fieldsPath, editingItemRef.current.ui.index);
+        if (editingItemRef.current.ui.index === 0) {
+          formState.form.mutators.concat(editingItemRef.current.ui.fieldsPath, []);
+        }
       } else if (editingItemRef.current) {
         formState.form.mutators.update(editingItemRef.current.ui.fieldsPath, editingItemRef.current.ui.index, (0, _lodash.omit)(editingItemRef.current, ['ui']));
       }

package/dist/utils/validation.util.js

@@ -228,7 +228,7 @@ var generateRule = {
     return {
       name: 'validCharactersWithPrefix',
       label: _constants.validation.VALID_CHARACTERS + ': ' + convertToLabel(chars),
-      pattern: new RegExp('^([' + convertToPattern(chars) + ']+\/)?[' + convertToPattern(chars) + ']+$')
+      pattern: new RegExp('^([' + convertToPattern(chars) + ']+/)?[' + convertToPattern(chars) + ']+$')
     };
   },
   noConsecutiveCharacters: function noConsecutiveCharacters(chars) {
@@ -318,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()]
   },

package/package.json

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