iguazio.dashboard-react-controls 1.8.11 → 1.9.0

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

@@ -62,7 +62,7 @@ var FormChip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [chipIndex, setChipsSizes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     onClick: function onClick(event) {
-      return handleToEditMode(event, chipIndex);
+      return handleToEditMode(event, chipIndex, keyName);
     },
     ref: chipRef,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipForm.default, {

package/dist/components/FormChipCell/FormChipCell.js

@@ -160,7 +160,7 @@ var FormChipCell = function FormChipCell(_ref) {
         return {
           chipIndex: lastChipSelected ? null : prevState.chipIndex + 1,
           isEdit: !lastChipSelected,
-          isKeyFocused: true,
+          isKeyFocused: !lastChipSelected,
           isValueFocused: false,
           isNewChip: false
         };
@@ -170,29 +170,53 @@ var FormChipCell = function FormChipCell(_ref) {
         handleRemoveChip(event, fields, editConfig.chipIndex);
       }
       setEditConfig(function (prevState) {
-        var isPrevChipIndexExists = prevState.chipIndex - 1 < 0;
-        isChipNotEmpty && isPrevChipIndexExists && onExitEditModeCallback && onExitEditModeCallback();
+        var firstChipIsSelected = prevState.chipIndex === 0;
+        isChipNotEmpty && firstChipIsSelected && onExitEditModeCallback && onExitEditModeCallback();
         return {
-          chipIndex: isPrevChipIndexExists ? null : prevState.chipIndex - 1,
-          isEdit: !isPrevChipIndexExists,
-          isKeyFocused: isPrevChipIndexExists,
-          isValueFocused: !isPrevChipIndexExists,
+          chipIndex: firstChipIsSelected ? null : prevState.chipIndex - 1,
+          isEdit: !firstChipIsSelected,
+          isKeyFocused: false,
+          isValueFocused: !firstChipIsSelected,
           isNewChip: false
         };
       });
     }
     checkChipsList((0, _lodash.get)(formState.values, name));
-    event && event.preventDefault();
+    if (editConfig.chipIndex > 0 && editConfig.chipIndex < fields.value.length - 1 || fields.value.length > 1 && editConfig.chipIndex === 0 && nameEvent !== _constants.TAB_SHIFT || fields.value.length > 1 && editConfig.chipIndex === fields.value.length - 1 && nameEvent !== _constants.TAB) {
+      event && event.preventDefault();
+    }
   }, [editConfig.chipIndex, checkChipsList, formState.values, name, onExitEditModeCallback, handleRemoveChip]);
-  var handleToEditMode = (0, _react.useCallback)(function (event, index) {
+  var handleToEditMode = (0, _react.useCallback)(function (event, chipIndex, keyName) {
     if (isEditable) {
+      var pointerCoordinateX = event.clientX,
+        pointerCoordinateY = event.clientY;
+      var isKeyClicked = false;
+      var isClickedInsideInputElement = function isClickedInsideInputElement(pointerCoordinateX, pointerCoordinateY, inputElement) {
+        if (inputElement) {
+          var _inputElement$getBoun = inputElement.getBoundingClientRect(),
+            topPosition = _inputElement$getBoun.top,
+            leftPosition = _inputElement$getBoun.left,
+            rightPosition = _inputElement$getBoun.right,
+            bottomPosition = _inputElement$getBoun.bottom;
+          if (pointerCoordinateX > rightPosition || pointerCoordinateX < leftPosition) return false;
+          if (pointerCoordinateY > bottomPosition || pointerCoordinateY < topPosition) return false;
+          return true;
+        }
+      };
       event.stopPropagation();
+      if (event.target.nodeName !== 'INPUT') {
+        if (event.target.firstElementChild) {
+          isKeyClicked = isClickedInsideInputElement(pointerCoordinateX, pointerCoordinateY, event.target.firstElementChild);
+        }
+      } else {
+        isKeyClicked = event.target.name === keyName;
+      }
       setEditConfig(function (preState) {
         return _objectSpread(_objectSpread({}, preState), {}, {
-          chipIndex: index,
+          chipIndex: chipIndex,
           isEdit: true,
-          isKeyFocused: true,
-          isValueFocused: false
+          isKeyFocused: isKeyClicked,
+          isValueFocused: !isKeyClicked
         });
       });
     }

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

@@ -14,6 +14,7 @@ var _OptionsMenu = _interopRequireDefault(require("../../../elements/OptionsMenu
 var _ValidationTemplate = _interopRequireDefault(require("../../../elements/ValidationTemplate/ValidationTemplate"));
 var _types = require("../../../types");
 var _constants = require("../../../constants");
+var _formChipCell = require("../formChipCell.util");
 var _close = require("../../../images/close.svg");
 require("./newChipForm.scss");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -99,6 +100,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var labelKeyClassName = (0, _classnames.default)(className, !editConfig.isKeyFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'key'], [])) && !(0, _lodash.isEmpty)(chipData.key) && 'item_edited_invalid');
   var labelContainerClassName = (0, _classnames.default)('edit-chip-container', background && "edit-chip-container-background_".concat(background), borderColor && "edit-chip-container-border_".concat(borderColor), font && "edit-chip-container-font_".concat(font), density && "edit-chip-container-density_".concat(density), borderRadius && "edit-chip-container-border_".concat(borderRadius), (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited');
   var labelValueClassName = (0, _classnames.default)('input-label-value', !editConfig.isValueFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'value'], [])) && !(0, _lodash.isEmpty)(chipData.value) && 'item_edited_invalid');
+  var closeButtonClass = (0, _classnames.default)('edit-chip__icon-close', (editConfig.chipIndex === chipIndex || !isEditable) && 'edit-chip__icon-close_hidden');
   (0, _react.useLayoutEffect)(function () {
     if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {
       var currentWidthKeyInput = refInputKey.current.scrollWidth + 1;
@@ -154,26 +156,19 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
   }, [outsideClick, editConfig.isEdit]);
   var focusChip = (0, _react.useCallback)(function (event) {
-    event.stopPropagation();
     if (editConfig.chipIndex === chipIndex && isEditable) {
       if (!event.shiftKey && event.key === _constants.TAB && editConfig.isValueFocused) {
-        onChange(event, _constants.TAB);
+        return onChange(event, _constants.TAB);
       } else if (event.shiftKey && event.key === _constants.TAB && editConfig.isKeyFocused) {
-        onChange(event, _constants.TAB_SHIFT);
-      }
-      if (event.key === _constants.BACKSPACE || event.key === _constants.DELETE) {
-        setChipData(function (prevState) {
-          return _objectSpread(_objectSpread({}, prevState), {}, {
-            keyFieldWidth: editConfig.isKeyFocused ? minWidthInput : prevState.keyFieldWidth,
-            valueFieldWidth: editConfig.isValueFocused ? minWidthValueInput : prevState.valueFieldWidth
-          });
-        });
+        return onChange(event, _constants.TAB_SHIFT);
       }
     }
+    event.stopPropagation();
   }, [editConfig, onChange, chipIndex, isEditable]);
   var handleOnFocus = (0, _react.useCallback)(function (event) {
+    var isKeyFocused = event.target.name === keyName;
     if (editConfig.chipIndex === chipIndex) {
-      if (event.target.name === keyName) {
+      if (isKeyFocused) {
         refInputKey.current.selectionStart = refInputKey.current.selectionEnd;
         setEditConfig(function (prevConfig) {
           return _objectSpread(_objectSpread({}, prevConfig), {}, {
@@ -191,12 +186,24 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         });
       }
       event && event.stopPropagation();
+    } else if ((0, _lodash.isNil)(editConfig.chipIndex)) {
+      if (isKeyFocused) {
+        refInputKey.current.selectionStart = refInputKey.current.selectionEnd;
+      } else {
+        refInputValue.current.selectionStart = refInputValue.current.selectionEnd;
+      }
+      setEditConfig({
+        chipIndex: chipIndex,
+        isEdit: true,
+        isKeyFocused: isKeyFocused,
+        isValueFocused: !isKeyFocused
+      });
     }
   }, [keyName, refInputKey, refInputValue, setEditConfig, editConfig.chipIndex, chipIndex]);
   var handleOnChange = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     if (event.target.name === keyName) {
-      var currentWidthKeyInput = refInputKey.current.scrollWidth;
+      var currentWidthKeyInput = (0, _formChipCell.getTextWidth)(refInputKey.current);
       setChipData(function (prevState) {
         return _objectSpread(_objectSpread({}, prevState), {}, {
           key: refInputKey.current.value,
@@ -204,7 +211,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         });
       });
     } else {
-      var currentWidthValueInput = refInputValue.current.scrollWidth;
+      var currentWidthValueInput = (0, _formChipCell.getTextWidth)(refInputValue.current);
       setChipData(function (prevState) {
         var _refInputValue$curren;
         return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -214,7 +221,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       });
     }
   }, [maxWidthInput, refInputKey, refInputValue, keyName]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     if (editConfig.chipIndex === chipIndex) {
       setSelectedInput(editConfig.isKeyFocused ? 'key' : editConfig.isValueFocused ? 'value' : null);
     }
@@ -260,7 +267,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ref: refInputContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
       className: labelKeyClassName,
-      disabled: !isEditable || editConfig.chipIndex && editConfig.chipIndex !== chipIndex,
+      disabled: !isEditable || !(0, _lodash.isNil)(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex,
       name: keyName,
       onChange: handleOnChange,
       onFocus: handleOnFocus,
@@ -274,7 +281,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       children: ":"
     }), !chipData.isKeyOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
       className: labelValueClassName,
-      disabled: !isEditable || editConfig.chipIndex && editConfig.chipIndex !== chipIndex,
+      disabled: !isEditable || !(0, _lodash.isNil)(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex,
       name: valueName,
       onChange: handleOnChange,
       onFocus: handleOnFocus,
@@ -283,15 +290,15 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       style: {
         width: chipData.valueFieldWidth
       }
-    }), editConfig.chipIndex !== chipIndex && isEditable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      className: "edit-chip__icon-close",
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: closeButtonClass,
       onClick: function onClick(event) {
         return handleRemoveChip(event, chipIndex);
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
     }), (editConfig.isKeyFocused ? !(0, _lodash.isEmpty)(chipData.key) : !(0, _lodash.isEmpty)(chipData.value)) && editConfig.chipIndex === chipIndex && !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', editConfig.chipIndex, selectedInput], [])) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
       show: showValidationRules,
-      ref: ref,
+      ref: refInputContainer,
       children: getValidationRules()
     })]
   });

package/dist/components/FormChipCell/NewChipForm/newChipForm.scss

@@ -18,6 +18,10 @@
       background-color: transparent;
       border: none;
 
+      &[disabled] {
+        pointer-events: none;
+      }
+
       &.item_edited {
         &_invalid {
           color: $amaranth;
@@ -58,6 +62,10 @@
     align-items: center;
     justify-content: center;
 
+    &_hidden {
+      visibility: hidden;
+    }
+
     svg {
       transform: scale(0.7);
     }

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

@@ -3,7 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uniquenessError = void 0;
+exports.uniquenessError = exports.getTextWidth = void 0;
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -24,4 +30,34 @@ var uniquenessError = {
   name: 'uniqueness',
   label: 'Key must be unique'
 };
-exports.uniquenessError = uniquenessError;
+exports.uniquenessError = uniquenessError;
+var getTextWidth = function getTextWidth(elementWithText) {
+  var _hiddenElement$offset;
+  if (!elementWithText) {
+    return 0;
+  }
+  var hiddenElementId = 'chips-hidden-element';
+  var hiddenElement = document.getElementById(hiddenElementId);
+  if (!hiddenElement) {
+    hiddenElement = document.createElement('span');
+    var styles = {
+      position: 'absolute',
+      left: '-10000px',
+      top: "auto",
+      visibility: 'hidden'
+    };
+    for (var _i = 0, _Object$entries = Object.entries(styles); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        styleName = _Object$entries$_i[0],
+        styleValue = _Object$entries$_i[1];
+      hiddenElement.style[styleName] = styleValue;
+    }
+    hiddenElement.style.font = window.getComputedStyle(elementWithText).font;
+    hiddenElement.id = hiddenElementId;
+    hiddenElement.tabIndex = -1;
+    document.body.append(hiddenElement);
+  }
+  hiddenElement.textContent = elementWithText.value;
+  return (_hiddenElement$offset = hiddenElement.offsetWidth) !== null && _hiddenElement$offset !== void 0 ? _hiddenElement$offset : 0;
+};
+exports.getTextWidth = getTextWidth;

package/dist/components/FormSelect/FormSelect.js

@@ -85,21 +85,16 @@ var FormSelect = function FormSelect(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     isOpen = _useState6[0],
     setIsOpen = _useState6[1];
-  var _useState7 = (0, _react.useState)('bottom-right'),
+  var _useState7 = (0, _react.useState)(''),
     _useState8 = _slicedToArray(_useState7, 2),
-    position = _useState8[0],
-    setPosition = _useState8[1];
-  var _useState9 = (0, _react.useState)(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    searchValue = _useState10[0],
-    setSearchValue = _useState10[1];
+    searchValue = _useState8[0],
+    setSearchValue = _useState8[1];
   var optionsListRef = (0, _react.useRef)();
   var popUpRef = (0, _react.useRef)();
   var selectRef = (0, _react.useRef)();
   var searchRef = (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()) || {},
-    selectWidth = _ref2.width,
-    selectLeft = _ref2.left;
+    selectWidth = _ref2.width;
   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');
   var selectValueClassName = (0, _classnames.default)('form-field__select-value', !input.value && 'form-field__select-placeholder');
@@ -160,13 +155,6 @@ 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);
@@ -324,7 +312,8 @@ var FormSelect = function FormSelect(_ref) {
             ref: popUpRef,
             customPosition: {
               element: selectRef,
-              position: position
+              position: 'bottom-right',
+              autoHorizontalPosition: true
             },
             style: {
               maxWidth: "".concat(selectWidth < 500 ? 500 : selectWidth, "px"),

package/dist/components/PopUpDialog/PopUpDialog.js

@@ -74,15 +74,45 @@ var PopUpDialog = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         horizontalPosition = _customPosition$posit2[1];
       var popupMargin = 15;
       var elementMargin = 5;
+      var isEnoughSpaceFromLeft = elementRect.right >= popUpRect.width + popupMargin;
+      var isEnoughSpaceFromRight = window.innerWidth - elementRect.left >= popUpRect.width + popupMargin;
+      var isEnoughSpaceFromTop = elementRect.top > popUpRect.height + popupMargin + elementMargin;
+      var isEnoughSpaceFromBottom = elementRect.bottom + popUpRect.height + popupMargin + elementMargin <= window.innerHeight;
       var leftPosition = horizontalPosition === 'left' ? elementRect.right - popUpRect.width : elementRect.left;
       var topPosition;
       if (verticalPosition === 'top') {
-        topPosition = elementRect.top > popUpRect.height + popupMargin ? elementRect.top - popUpRect.height - elementMargin : popupMargin;
+        topPosition = isEnoughSpaceFromTop ? elementRect.top - popUpRect.height - elementMargin : popupMargin;
       } else {
-        topPosition = popUpRect.height + elementRect.bottom + popupMargin > window.innerHeight ? window.innerHeight - popUpRect.height - popupMargin : elementRect.bottom + elementMargin;
+        topPosition = isEnoughSpaceFromBottom ? elementRect.bottom + elementMargin : window.innerHeight - popUpRect.height - popupMargin;
+      }
+      if (customPosition.autoVerticalPosition) {
+        if (verticalPosition === 'top') {
+          if (!isEnoughSpaceFromTop && isEnoughSpaceFromBottom) {
+            topPosition = elementRect.bottom + elementMargin;
+          }
+        } else {
+          if (isEnoughSpaceFromTop && !isEnoughSpaceFromBottom) {
+            topPosition = elementRect.top - popUpRect.height - elementMargin;
+          }
+        }
+      }
+      if (customPosition.autoHorizontalPosition) {
+        if (verticalPosition === 'left') {
+          if (!isEnoughSpaceFromLeft && isEnoughSpaceFromRight) {
+            leftPosition = elementRect.left;
+          } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {
+            leftPosition = popupMargin;
+          }
+        } else {
+          if (isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {
+            leftPosition = elementRect.right - popUpRect.width;
+          } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {
+            leftPosition = window.innerWidth - popUpRect.width - popupMargin;
+          }
+        }
       }
       ref.current.style.top = "".concat(topPosition, "px");
-      if (style.left) {
+      if (style.left && !(customPosition.autoHorizontalPosition && isEnoughSpaceFromRight)) {
         ref.current.style.left = "calc(".concat(leftPosition, "px + ").concat(style.left, ")");
       } else {
         ref.current.style.left = "".concat(leftPosition, "px");

package/dist/components/Tooltip/Tooltip.js

@@ -68,10 +68,10 @@ var Tooltip = function Tooltip(_ref) {
     setShow(false);
   };
   var handleMouseLeave = (0, _react.useCallback)(function (event) {
-    if (tooltipRef.current && !tooltipRef.current.contains(event.relatedTarget) && parentRef.current && !parentRef.current.contains(event.relatedTarget)) {
+    if (tooltipRef.current && !tooltipRef.current.contains(event.relatedTarget) && parentRef.current && !parentRef.current.contains(event.relatedTarget) || hidden) {
       setShow(false);
     }
-  }, []);
+  }, [hidden]);
   var handleMouseEnter = (0, _react.useCallback)(function (event) {
     if (!show) {
       var _parentRef$current$ch = _slicedToArray(parentRef.current.childNodes, 1),

package/dist/elements/OptionsMenu/OptionsMenu.js

@@ -44,10 +44,12 @@ var OptionsMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "options-menu",
       customPosition: {
         element: ref,
-        position: 'bottom-right'
+        position: 'bottom-right',
+        autoVerticalPosition: true,
+        autoHorizontalPosition: true
       },
       style: {
-        width: "".concat(dropdownWidth, "px")
+        'minWidth': "".concat(dropdownWidth, "px")
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
         className: "options-menu__body",
@@ -64,7 +66,7 @@ OptionsMenu.defaultProps = {
 OptionsMenu.propTypes = {
   children: _propTypes.default.arrayOf(_propTypes.default.element),
   show: _propTypes.default.bool.isRequired,
-  timout: _propTypes.default.number
+  timeout: _propTypes.default.number
 };
 var _default = OptionsMenu;
 exports.default = _default;

package/dist/scss/colors.scss

@@ -4,6 +4,7 @@ $amaranth: #ea336a;
 $amethyst: #a44cc5;
 $amethystTwo: rgba($amethyst, 0.16);
 $athensGray: #ebebec;
+$babyPink: #f4bec6;
 $black: #000;
 $bombay: #b1b1b7;
 $brightTurquoise: #0fddaf;

package/dist/types.js

@@ -56,7 +56,9 @@ var CHIPS = _propTypes.default.arrayOf(CHIP);
 exports.CHIPS = CHIPS;
 var POP_UP_CUSTOM_POSITION = _propTypes.default.shape({
   element: _propTypes.default.shape({}),
-  position: _propTypes.default.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right'])
+  position: _propTypes.default.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right']),
+  autoHorizontalPosition: _propTypes.default.bool,
+  autoVerticalPosition: _propTypes.default.bool
 });
 exports.POP_UP_CUSTOM_POSITION = POP_UP_CUSTOM_POSITION;
 var MODAL_SIZES = _propTypes.default.oneOf([_constants.MODAL_SM, _constants.MODAL_MD, _constants.MODAL_LG, _constants.MODAL_MIN, _constants.MODAL_MAX]);

package/package.json

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