iguazio.dashboard-react-controls 0.0.38 → 0.0.39

package/dist/components/FormInput/FormInput.js

@@ -475,7 +475,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
               }
             }, "".concat(item).concat(index));
           })
-        }), !(0, _lodash.isEmpty)(validationRules) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
+        }), !(0, _lodash.isEmpty)(validationRules) && isInvalid && Array.isArray(errorsRef.current) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
           show: showValidationRules,
           ref: ref,
           children: getValidationRules()

package/dist/components/FormSelect/FormSelect.js

@@ -97,15 +97,22 @@ var FormSelect = function FormSelect(_ref) {
       isOpen = _useState6[0],
       setOpen = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)('bottom-right'),
       _useState8 = _slicedToArray(_useState7, 2),
-      searchValue = _useState8[0],
-      setSearchValue = _useState8[1];
+      position = _useState8[0],
+      setPosition = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      searchValue = _useState10[0],
+      setSearchValue = _useState10[1];
 
   var selectRef = (0, _react.useRef)();
+  var popUpRef = (0, _react.useRef)();
 
   var _ref2 = (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect()) || {},
-      dropdownWidth = _ref2.width;
+      selectWidth = _ref2.width,
+      selectLeft = _ref2.left;
 
   var selectWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isOpen && 'form-field__wrapper-active', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
   var selectLabelClassName = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
@@ -151,6 +158,14 @@ var FormSelect = function FormSelect(_ref) {
       closeMenu();
     }
   }, [closeMenu]);
+  (0, _react.useLayoutEffect)(function () {
+    if (popUpRef !== null && popUpRef !== void 0 && popUpRef.current) {
+      var _popUpRef$current$get = popUpRef.current.getBoundingClientRect(),
+          width = _popUpRef$current$get.width;
+
+      selectLeft + width > window.innerWidth ? setPosition('bottom-left') : setPosition('bottom-right');
+    }
+  }, [isOpen, selectLeft]);
   (0, _react.useEffect)(function () {
     if (isOpen) {
       window.addEventListener('scroll', handleScroll, true);
@@ -289,12 +304,14 @@ var FormSelect = function FormSelect(_ref) {
           }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
             className: "form-field form-field-select__options-list",
             headerIsHidden: true,
+            ref: popUpRef,
             customPosition: {
               element: selectRef,
-              position: 'bottom-right'
+              position: position
             },
             style: {
-              width: "".concat(dropdownWidth, "px")
+              maxWidth: "".concat(selectWidth < 500 ? 500 : selectWidth, "px"),
+              minWidth: "".concat(selectWidth, "px")
             },
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               "data-testid": "select-body",

package/dist/components/FormSelect/formSelect.scss

@@ -34,7 +34,7 @@
       display: flex;
       align-items: center;
       width: 100%;
-      padding: 0 8px 0 16px;
+      padding: 0 20px 0 16px;
 
       &-value {
         display: block;

package/dist/components/PopUpDialog/PopUpDialog.js

@@ -47,7 +47,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var PopUpDialog = function PopUpDialog(_ref) {
+var PopUpDialog = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref2;
+
   var children = _ref.children,
       className = _ref.className,
       closePopUp = _ref.closePopUp,
@@ -57,11 +59,14 @@ var PopUpDialog = function PopUpDialog(_ref) {
       style = _ref.style,
       tooltipText = _ref.tooltipText;
   var popUpOverlayRef = (0, _react.useRef)(null);
+  (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : ref = popUpOverlayRef;
   var popUpClassNames = (0, _classnames.default)(className, 'pop-up-dialog__overlay', customPosition.element && 'custom-position');
   var calculateCustomPopUpPosition = (0, _react.useCallback)(function () {
     if (customPosition && customPosition.element) {
+      var _ref3;
+
       var elementRect = customPosition.element.current.getBoundingClientRect();
-      var popUpRect = popUpOverlayRef.current.getBoundingClientRect();
+      var popUpRect = (_ref3 = ref) === null || _ref3 === void 0 ? void 0 : _ref3.current.getBoundingClientRect();
 
       var _customPosition$posit = customPosition.position.split('-'),
           _customPosition$posit2 = _slicedToArray(_customPosition$posit, 2),
@@ -77,15 +82,15 @@ var PopUpDialog = function PopUpDialog(_ref) {
         topPosition = popUpRect.height + elementRect.bottom > window.innerHeight ? window.innerHeight - popUpRect.height - 5 : elementRect.bottom + 5;
       }
 
-      popUpOverlayRef.current.style.top = "".concat(topPosition, "px");
+      ref.current.style.top = "".concat(topPosition, "px");
 
       if (style.left) {
-        popUpOverlayRef.current.style.left = "calc(".concat(leftPosition, "px + ").concat(style.left, ")");
+        ref.current.style.left = "calc(".concat(leftPosition, "px + ").concat(style.left, ")");
       } else {
-        popUpOverlayRef.current.style.left = "".concat(leftPosition, "px");
+        ref.current.style.left = "".concat(leftPosition, "px");
       }
     }
-  }, [customPosition, style.left]);
+  }, [customPosition, style.left, ref]);
   (0, _react.useLayoutEffect)(function () {
     calculateCustomPopUpPosition();
   }, [calculateCustomPopUpPosition]);
@@ -96,7 +101,7 @@ var PopUpDialog = function PopUpDialog(_ref) {
     };
   });
   return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ref: popUpOverlayRef,
+    ref: ref,
     className: popUpClassNames,
     style: style,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -125,7 +130,7 @@ var PopUpDialog = function PopUpDialog(_ref) {
       }), children]
     })
   }), document.getElementById('overlay_container'));
-};
+});
 
 PopUpDialog.defaultProps = {
   className: '',

package/dist/elements/SelectOption/SelectOption.js

@@ -70,16 +70,19 @@ var SelectOption = function SelectOption(_ref) {
       !item.disabled && _onClick(item.id);
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "data-ellipsis label-row",
+      className: "label-row",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "select__item-label",
+        className: "data-ellipsis select__item-label",
         children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           "data-testid": "select-icon",
           className: "select__item-icon",
           children: item.icon
         }), item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "state-".concat(item.status, "-job status")
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+          template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+            text: item.label
+          }),
           children: item.label
         })]
       }), withSelectedIcon && item.id === selectedId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkmark.ReactComponent, {

package/package.json

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