iguazio.dashboard-react-controls 0.0.34 → 0.0.36

package/dist/components/Button/Button.js

@@ -79,7 +79,7 @@ Button.propTypes = {
   density: _propTypes.default.oneOf(['dense', 'normal', 'medium', 'chunky']),
   icon: _propTypes.default.element,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
-  tooltip: _propTypes.default.string,
+  tooltip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   variant: _types.BUTTON_VARIANTS
 };
 var _default = Button;

package/dist/components/FormCheckBox/FormCheckBox.js

@@ -17,7 +17,7 @@ require("./formCheckBox.scss");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["children", "className", "name", "label"];
+var _excluded = ["children", "className", "highlightLabel", "label", "name"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -34,11 +34,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var FormCheckBox = function FormCheckBox(_ref) {
   var _children = _ref.children,
       className = _ref.className,
-      name = _ref.name,
+      highlightLabel = _ref.highlightLabel,
       label = _ref.label,
+      name = _ref.name,
       inputProps = _objectWithoutProperties(_ref, _excluded);
 
   var formFieldClassNames = (0, _classnames.default)('form-field-checkbox', className);
+  var labelClassNames = (0, _classnames.default)(highlightLabel && 'highlighted');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
     name: name,
     value: inputProps.value,
@@ -53,6 +55,7 @@ var FormCheckBox = function FormCheckBox(_ref) {
           id: (_inputProps$value = inputProps.value) !== null && _inputProps$value !== void 0 ? _inputProps$value : name
         })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
           htmlFor: (_inputProps$value2 = inputProps.value) !== null && _inputProps$value2 !== void 0 ? _inputProps$value2 : name,
+          className: labelClassNames,
           children: [label ? label : '', _children]
         })]
       });
@@ -62,10 +65,12 @@ var FormCheckBox = function FormCheckBox(_ref) {
 
 FormCheckBox.defaultProps = {
   className: '',
+  highlightLabel: false,
   label: ''
 };
 FormCheckBox.propTypes = {
   className: _propTypes.default.string,
+  highlightLabel: _propTypes.default.bool,
   name: _propTypes.default.string.isRequired,
   label: _propTypes.default.string
 };

package/dist/components/FormCheckBox/formCheckBox.scss

@@ -47,5 +47,41 @@
         background: $white;
       }
     }
+
+    &:not(:disabled):checked {
+      ~ label {
+        &.highlighted {
+          color: $white;
+          background-color: $malibu;
+        }
+      }
+
+      &:hover {
+        ~ label {
+          &.highlighted {
+            background-color: $cornflowerBlue;
+          }
+        }
+      }
+    }
+
+    ~ label {
+      &.highlighted {
+        background-color: $mischka;
+        font-size: 12px;
+        font-weight: bold;
+        margin-left: 10px;
+        padding: 4px 8px;
+        border-radius: 4px;
+      }
+    }
+
+    &:not(:disabled):hover {
+      ~ label {
+        &.highlighted {
+          background-color: $iron;
+        }
+      }
+    }
   }
 }

package/dist/components/FormChipCell/FormChip/FormChip.js

@@ -51,11 +51,13 @@ var FormChip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var chipRef = _react.default.useRef();
 
   (0, _react.useEffect)(function () {
-    if (chipRef.current && setChipsSizes) {
-      setChipsSizes(function (state) {
-        return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, chipIndex, chipRef.current.getBoundingClientRect().width));
-      });
-    }
+    queueMicrotask(function () {
+      if (chipRef.current && setChipsSizes) {
+        setChipsSizes(function (state) {
+          return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, chipIndex, chipRef.current.getBoundingClientRect().width));
+        });
+      }
+    });
   }, [chipIndex, setChipsSizes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     onClick: function onClick(event) {

package/dist/components/FormChipCell/FormChipCell.js

@@ -412,7 +412,7 @@ FormChipCell.defaultProps = {
   shortChips: false,
   validationRules: {},
   validator: function validator() {},
-  visibleChipsMaxLength: 'all'
+  visibleChipsMaxLength: null
 };
 FormChipCell.propTypes = {
   chipOptions: _types.CHIP_OPTIONS,

package/dist/components/FormChipCell/FormChipCellView.js

@@ -13,6 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactFinalFormArrays = require("react-final-form-arrays");
 
+var _lodash = require("lodash");
+
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
 var _FormChip = _interopRequireDefault(require("./FormChip/FormChip"));
@@ -79,7 +81,7 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
       var fields = _ref3.fields,
           meta = _ref3.meta;
 
-      if (validationRules.key.every(function (rule) {
+      if (!(0, _lodash.isEmpty)(validationRules) && validationRules.key.every(function (rule) {
         return rule.name !== _formChipCell.uniquenessError.name;
       })) {
         validationRules.key.push(_formChipCell.uniquenessError);
@@ -100,10 +102,12 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
                 template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
                   text: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
                     className: "chip__content",
-                    children: [chipData.key, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      className: "chip__delimiter",
-                      children: chipData.delimiter ? chipData.delimiter : ':'
-                    }), chipData.value]
+                    children: [chipData.key, !chipData.isKeyOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        className: "chip__delimiter",
+                        children: chipData.delimiter ? chipData.delimiter : ':'
+                      }), chipData.value]
+                    })]
                   })
                 }),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormChip.default, {

package/dist/components/FormChipCell/NewChipForm/NewChipForm.js

@@ -71,6 +71,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       valueName = _ref.valueName;
 
   var _useState = (0, _react.useState)({
+    isKeyOnly: chip.isKeyOnly,
     key: chip.key,
     value: chip.value,
     keyFieldWidth: 0,
@@ -108,9 +109,9 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var minWidthInput = 25;
   var minWidthValueInput = 35;
 
-  var refInputKey = _react.default.useRef();
+  var refInputKey = _react.default.useRef({});
 
-  var refInputValue = _react.default.useRef();
+  var refInputValue = _react.default.useRef({});
 
   var refInputContainer = _react.default.useRef();
 
@@ -121,22 +122,14 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {
       var currentWidthKeyInput = refInputKey.current.scrollWidth + 1;
       var currentWidthValueInput = refInputValue.current.scrollWidth + 1;
-
-      if (chipData.key && chipData.value) {
-        setChipData(function (prevState) {
-          return _objectSpread(_objectSpread({}, prevState), {}, {
-            keyFieldWidth: currentWidthKeyInput >= maxWidthInput ? maxWidthInput : currentWidthKeyInput <= minWidthInput ? minWidthInput : currentWidthKeyInput,
-            valueFieldWidth: currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput <= minWidthValueInput ? minWidthValueInput : currentWidthValueInput
-          });
-        });
-      } else {
-        setChipData(function (prevState) {
-          return _objectSpread(_objectSpread({}, prevState), {}, {
-            keyFieldWidth: minWidthInput,
-            valueFieldWidth: minWidthValueInput
-          });
+      var keyFieldWidth = !chipData.key || currentWidthKeyInput <= minWidthInput ? minWidthInput : currentWidthKeyInput >= maxWidthInput ? maxWidthInput : currentWidthKeyInput;
+      var valueFieldWidth = !chipData.value || currentWidthValueInput <= minWidthValueInput ? minWidthValueInput : currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput;
+      setChipData(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          keyFieldWidth: keyFieldWidth,
+          valueFieldWidth: valueFieldWidth
         });
-      }
+      });
     }
   }, [chipData.key, chipData.value, chipData.keyFieldWidth, chipData.valueFieldWidth, maxWidthInput, refInputKey, refInputValue]);
 
@@ -241,9 +234,11 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     } else {
       var currentWidthValueInput = refInputValue.current.scrollWidth;
       setChipData(function (prevState) {
+        var _refInputValue$curren;
+
         return _objectSpread(_objectSpread({}, prevState), {}, {
           value: refInputValue.current.value,
-          valueFieldWidth: refInputValue.current.value.length <= 1 ? minWidthValueInput : currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput > minWidthValueInput ? currentWidthValueInput + 2 : minWidthValueInput
+          valueFieldWidth: ((_refInputValue$curren = refInputValue.current.value) === null || _refInputValue$curren === void 0 ? void 0 : _refInputValue$curren.length) <= 1 ? minWidthValueInput : currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput > minWidthValueInput ? currentWidthValueInput + 2 : minWidthValueInput
         });
       });
     }
@@ -261,7 +256,9 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (0, _react.useEffect)(function () {
     if (meta.error) {
       setValidationRules(function (prevState) {
-        return _objectSpread(_objectSpread({}, prevState), {}, _defineProperty({}, selectedInput, prevState[selectedInput].map(function (rule) {
+        var _prevState$selectedIn;
+
+        return _objectSpread(_objectSpread({}, prevState), {}, _defineProperty({}, selectedInput, (_prevState$selectedIn = prevState[selectedInput]) === null || _prevState$selectedIn === void 0 ? void 0 : _prevState$selectedIn.map(function (rule) {
           return _objectSpread(_objectSpread({}, rule), {}, {
             isValid: (0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', editConfig.chipIndex, selectedInput], [])) ? true : !meta.error[editConfig.chipIndex][selectedInput].some(function (err) {
               return err && err.name === rule.name;
@@ -273,7 +270,9 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
   }, [meta, showValidationRules, selectedInput, editConfig.chipIndex]);
   var getValidationRules = (0, _react.useCallback)(function () {
-    return validationRules[selectedInput].map(function (_ref2) {
+    var _validationRules$sele;
+
+    return (_validationRules$sele = validationRules[selectedInput]) === null || _validationRules$sele === void 0 ? void 0 : _validationRules$sele.map(function (_ref2) {
       var _ref2$isValid = _ref2.isValid,
           isValid = _ref2$isValid === void 0 ? false : _ref2$isValid,
           label = _ref2.label,
@@ -301,10 +300,10 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       style: {
         width: chipData.keyFieldWidth
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), !chipData.isKeyOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "edit-chip-separator",
       children: ":"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
+    }), !chipData.isKeyOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
       className: labelValueClassName,
       disabled: !isEditable || editConfig.chipIndex !== chipIndex,
       name: valueName,

package/dist/components/FormChipCell/formChipCell.scss

@@ -4,6 +4,7 @@
 
 .chips {
   @include inputSelectField;
+  height: auto;
 
   &__wrapper {
     padding: 12px 16px;

package/dist/components/FormChipCell/formChipCell.util.js

@@ -4,6 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uniquenessError = void 0;
+
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
 var uniquenessError = {
   name: 'uniqueness',
   label: 'Key should be unique'

package/dist/components/FormSelect/FormSelect.js

@@ -74,6 +74,7 @@ var FormSelect = function FormSelect(_ref) {
       required = _ref.required,
       search = _ref.search,
       selectedItemAction = _ref.selectedItemAction,
+      tooltip = _ref.tooltip,
       withoutBorder = _ref.withoutBorder,
       withSelectedIcon = _ref.withSelectedIcon;
 
@@ -202,125 +203,132 @@ var FormSelect = function FormSelect(_ref) {
     children: function children(_ref3) {
       var input = _ref3.input,
           meta = _ref3.meta;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        "data-testid": "select",
-        ref: selectRef,
-        className: "form-field-select ".concat(className),
-        onClick: toggleOpen,
-        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: selectLabelClassName,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-            "data-testid": "select-label",
-            children: [label, meta.error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "form-field__label-mandatory",
-              children: " *"
-            })]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          "data-testid": "select-header",
-          className: selectWrapperClassNames,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "form-field__control",
-            children: !hideSelectedOption && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              "data-testid": "selected-option",
-              className: "form-field__select",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: selectValueClassName,
-                children: getSelectValue()
-              })
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        className: "select-tooltip",
+        template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
+          text: tooltip
+        }),
+        hidden: !tooltip,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          "data-testid": "select",
+          ref: selectRef,
+          className: "form-field-select ".concat(className),
+          onClick: toggleOpen,
+          children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: selectLabelClassName,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              "data-testid": "select-label",
+              children: [label, meta.error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "form-field__label-mandatory",
+                children: " *"
+              })]
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "form-field__icons",
-            children: [input.value && selectedItemAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-              children: selectedItemAction.handler ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-                template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
-                  text: selectedItemAction.tooltip
-                }),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-                  onClick: function onClick(event) {
-                    if (selectedItemAction.confirm) {
-                      setConfirmDialogOpen(true);
-                    } else {
-                      selectedItemAction.handler(input.value);
-                    }
-
-                    event.stopPropagation();
-                  },
-                  children: selectedItemAction.icon
+            "data-testid": "select-header",
+            className: selectWrapperClassNames,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "form-field__control",
+              children: !hideSelectedOption && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                "data-testid": "selected-option",
+                className: "form-field__select",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: selectValueClassName,
+                  children: getSelectValue()
                 })
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: selectedItemAction.icon
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.ReactComponent, {
-                className: "form-field__caret"
               })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "form-field__icons",
+              children: [input.value && selectedItemAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                children: selectedItemAction.handler ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+                  template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
+                    text: selectedItemAction.tooltip
+                  }),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                    onClick: function onClick(event) {
+                      if (selectedItemAction.confirm) {
+                        setConfirmDialogOpen(true);
+                      } else {
+                        selectedItemAction.handler(input.value);
+                      }
+
+                      event.stopPropagation();
+                    },
+                    children: selectedItemAction.icon
+                  })
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: selectedItemAction.icon
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.ReactComponent, {
+                  className: "form-field__caret"
+                })
+              })]
             })]
-          })]
-        }), isConfirmDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConfirmDialog.default, {
-          cancelButton: {
-            handler: function handler() {
-              setConfirmDialogOpen(false);
+          }), isConfirmDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConfirmDialog.default, {
+            cancelButton: {
+              handler: function handler() {
+                setConfirmDialogOpen(false);
+              },
+              label: 'Cancel',
+              variant: _constants.TERTIARY_BUTTON
             },
-            label: 'Cancel',
-            variant: _constants.TERTIARY_BUTTON
-          },
-          closePopUp: function closePopUp() {
-            setConfirmDialogOpen(false);
-          },
-          confirmButton: {
-            handler: function handler() {
-              selectedItemAction.handler(input.value);
+            closePopUp: function closePopUp() {
               setConfirmDialogOpen(false);
             },
-            label: selectedItemAction.confirm.btnConfirmLabel,
-            variant: selectedItemAction.confirm.btnConfirmType
-          },
-          header: selectedItemAction.confirm.title,
-          isOpen: isConfirmDialogOpen,
-          message: selectedItemAction.confirm.message
-        }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
-          className: "form-field form-field-select__options-list",
-          headerIsHidden: true,
-          customPosition: {
-            element: selectRef,
-            position: 'bottom-right'
-          },
-          style: {
-            width: "".concat(dropdownWidth, "px")
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            "data-testid": "select-body",
-            className: "options-list__body",
-            onClick: handleCloseSelectBody,
-            children: [search && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "options-list__search",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                type: "text",
-                placeholder: "Search...",
-                value: searchValue,
-                onChange: function onChange(event) {
-                  return setSearchValue(event.target.value);
-                }
-              })
-            }), options.filter(function (option) {
-              return !search || option.label.toLowerCase().includes(searchValue.toLowerCase());
-            }).map(function (option) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
-                item: option,
-                name: name,
-                onClick: function onClick(selectedOption) {
-                  handleSelectOptionClick(selectedOption, option);
-                },
-                multiple: multiple,
-                selectedId: !multiple ? input.value : '',
-                withSelectedIcon: withSelectedIcon
-              }, option.id);
-            })]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, input), {}, {
-          type: "hidden"
-        }))]
+            confirmButton: {
+              handler: function handler() {
+                selectedItemAction.handler(input.value);
+                setConfirmDialogOpen(false);
+              },
+              label: selectedItemAction.confirm.btnConfirmLabel,
+              variant: selectedItemAction.confirm.btnConfirmType
+            },
+            header: selectedItemAction.confirm.title,
+            isOpen: isConfirmDialogOpen,
+            message: selectedItemAction.confirm.message
+          }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
+            className: "form-field form-field-select__options-list",
+            headerIsHidden: true,
+            customPosition: {
+              element: selectRef,
+              position: 'bottom-right'
+            },
+            style: {
+              width: "".concat(dropdownWidth, "px")
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              "data-testid": "select-body",
+              className: "options-list__body",
+              onClick: handleCloseSelectBody,
+              children: [search && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "options-list__search",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "text",
+                  placeholder: "Search...",
+                  value: searchValue,
+                  onChange: function onChange(event) {
+                    return setSearchValue(event.target.value);
+                  }
+                })
+              }), options.filter(function (option) {
+                return !search || option.label.toLowerCase().includes(searchValue.toLowerCase());
+              }).map(function (option) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+                  item: option,
+                  name: name,
+                  onClick: function onClick(selectedOption) {
+                    handleSelectOptionClick(selectedOption, option);
+                  },
+                  multiple: multiple,
+                  selectedId: !multiple ? input.value : '',
+                  withSelectedIcon: withSelectedIcon
+                }, option.id);
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, input), {}, {
+            type: "hidden"
+          }))]
+        })
       });
     }
   });
@@ -334,6 +342,7 @@ FormSelect.defaultProps = {
   label: '',
   onClick: null,
   search: false,
+  tooltip: '',
   multiple: false,
   withoutBorder: false,
   withSelectedIcon: true
@@ -348,6 +357,7 @@ FormSelect.propTypes = {
   onClick: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
   options: _types.SELECT_OPTIONS.isRequired,
   search: _propTypes.default.bool,
+  tooltip: _propTypes.default.string,
   multiple: _propTypes.default.bool,
   withoutBorder: _propTypes.default.bool,
   withSelectedIcon: _propTypes.default.bool

package/dist/components/FormSelect/formSelect.scss

@@ -2,6 +2,10 @@
 @import '../../scss/colors';
 @import '../../scss/shadows';
 
+.select-tooltip {
+  width: 100%;
+}
+
 .form-field-select {
   width: 100%;
 

package/dist/components/Modal/Modal.scss

@@ -60,9 +60,12 @@
   &__header {
     position: relative;
     border-bottom: $primaryBorder;
-    text-align: center;
-    vertical-align: middle;
-    padding: 1.5rem 2rem;
+    height: 92px;
+    padding: 0 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
 
     &-title {
       color: $primary;
@@ -72,11 +75,10 @@
     }
 
     &-sub-title {
-      color: $primary;
+      color: $topaz;
       font-size: 1.5em;
-      font-weight: 400;
-      line-height: 2em;
-      margin: 0;
+      font-weight: 500;
+      margin: 10px 0 0;
     }
 
     &-button {

package/dist/components/Tooltip/Tooltip.js

@@ -71,9 +71,6 @@ var Tooltip = function Tooltip(_ref) {
   var parentRef = (0, _react.useRef)();
   var tooltipRef = (0, _react.useRef)();
   var offset = 10;
-  var defaultStyle = {
-    transition: "opacity ".concat(duration, "ms ease-in-out ").concat(duration, "ms")
-  };
 
   var handleScroll = function handleScroll() {
     setShow(false);
@@ -172,7 +169,7 @@ var Tooltip = function Tooltip(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         "data-testid": "tooltip",
         ref: tooltipRef,
-        style: _objectSpread(_objectSpread({}, defaultStyle), style),
+        style: _objectSpread({}, style),
         className: "tooltip",
         children: template
       })

package/dist/components/Tooltip/tooltip.scss

@@ -7,3 +7,24 @@
   max-width: 400px;
   z-index: 9;
 }
+
+.fade {
+  &-enter {
+    opacity: 0;
+
+    &-active {
+      opacity: 1;
+      transition: opacity 200ms;
+    }
+  }
+
+  &-exit {
+    opacity: 1;
+
+    &-active {
+      opacity: 0;
+      transition: opacity 200ms;
+    }
+  }
+}
+

package/dist/elements/HiddenChipsBlock/HiddenChipsBlock.js

@@ -82,7 +82,7 @@ var HiddenChipsBlock = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
   }, [hiddenRef]);
 
   var generateChipData = function generateChipData(chip) {
-    return "".concat(chip.key).concat(chip.delimiter ? chip.delimiter : ':', " ").concat(chip.value);
+    return chip.isKeyOnly ? chip.key : "".concat(chip.key).concat(chip.delimiter ? chip.delimiter : ':', " ").concat(chip.value);
   };
 
   (0, _react.useEffect)(function () {
@@ -130,10 +130,12 @@ var HiddenChipsBlock = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
         template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
           text: element.delimiter ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "chip__content",
-            children: [element.key, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "chip__delimiter",
-              children: element.delimiter
-            }), element.value]
+            children: [element.key, !element.isKeyOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "chip__delimiter",
+                children: element.delimiter
+              }), element.value]
+            })]
           }) : generateChipData(element)
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/scss/mixins.scss

@@ -15,12 +15,12 @@
 }
 
 @mixin tableDet {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   text-align: left;
 
   &:first-child {
-    padding-left: 40px;
+    margin-left: 10px;
   }
 }
 
@@ -380,12 +380,18 @@
   line-height: $lineHeight;
 }
 
-@mixin tableHeader($sidePadding) {
-  padding: 5px $sidePadding;
+@mixin tableHeader($topPadding, $rightPadding, $bottomPadding, $leftPadding) {
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  height: auto;
+  min-height: 50px;
+  margin: 0 1px;
+  padding: $topPadding $rightPadding $bottomPadding $leftPadding;
+  text-align: left;
   color: $topaz;
   font-weight: bold;
   font-size: 14px;
-  line-height: 24px;
 }
 
 @mixin resetSpaces {

package/dist/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIZARD_STEPS_CONFIG = exports.SELECT_OPTIONS = exports.SELECT_OPTION = exports.POP_UP_CUSTOM_POSITION = exports.MODAL_SIZES = exports.INPUT_VALIDATION_RULES = exports.INPUT_LINK = exports.FORM_TABLE_EDITING_ITEM = exports.CONFIRM_DIALOG_SUBMIT_BUTTON = exports.CONFIRM_DIALOG_CANCEL_BUTTON = exports.COMBOBOX_VALIDATION_RULES = exports.COMBOBOX_SUGGESTION_LIST = exports.COMBOBOX_SELECT_OPTIONS = exports.CHIP_OPTIONS = exports.CHIP_INPUT_LIST = exports.CHIPS = exports.CHIP = exports.BUTTON_VARIANTS = void 0;
+exports.WIZARD_STEPS_CONFIG = exports.SORT_PROPS = exports.SELECT_OPTIONS = exports.SELECT_OPTION = exports.POP_UP_CUSTOM_POSITION = exports.MODAL_SIZES = exports.INPUT_VALIDATION_RULES = exports.INPUT_LINK = exports.FORM_TABLE_EDITING_ITEM = exports.EXCLUDE_SORT_BY = exports.DEFAULT_SORT_BY = exports.CONFIRM_DIALOG_SUBMIT_BUTTON = exports.CONFIRM_DIALOG_CANCEL_BUTTON = exports.COMBOBOX_VALIDATION_RULES = exports.COMBOBOX_SUGGESTION_LIST = exports.COMBOBOX_SELECT_OPTIONS = exports.CHIP_OPTIONS = exports.CHIP_INPUT_LIST = exports.CHIPS = exports.CHIP = exports.BUTTON_VARIANTS = exports.ALLOW_SORT_BY = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -151,4 +151,24 @@ var FORM_TABLE_EDITING_ITEM = _propTypes.default.shape(_defineProperty({
   }).isRequired
 }, _propTypes.default.string, _propTypes.default.any));
 
-exports.FORM_TABLE_EDITING_ITEM = FORM_TABLE_EDITING_ITEM;
+exports.FORM_TABLE_EDITING_ITEM = FORM_TABLE_EDITING_ITEM;
+
+var SORT_PROPS = _propTypes.default.shape({
+  selectedColumnName: _propTypes.default.string.isRequired,
+  getSortingIcon: _propTypes.default.func.isRequired,
+  sortTable: _propTypes.default.func.isRequired
+});
+
+exports.SORT_PROPS = SORT_PROPS;
+
+var ALLOW_SORT_BY = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.string, _propTypes.default.number)]);
+
+exports.ALLOW_SORT_BY = ALLOW_SORT_BY;
+
+var DEFAULT_SORT_BY = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]);
+
+exports.DEFAULT_SORT_BY = DEFAULT_SORT_BY;
+
+var EXCLUDE_SORT_BY = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.string, _propTypes.default.number)]);
+
+exports.EXCLUDE_SORT_BY = EXCLUDE_SORT_BY;

package/package.json

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