intelicoreact 1.4.27 → 1.4.29

package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.js

@@ -43,19 +43,29 @@ const TagListToDropdown = _ref => {
 
   const onConfirmChangesClick = () => {
     if (isValueChanged) {
-      var _onChange;
+      var _Promise;
 
       setIsLoading(true);
       setIsValueChanged(false);
-      (_onChange = onChange(options.filter(_ref3 => {
-        let {
-          value
-        } = _ref3;
-        return newValue.includes(value);
-      }))) === null || _onChange === void 0 ? void 0 : _onChange.finally(() => {
+      (_Promise = new Promise(r => {
+        const onChangeResult = onChange(options.filter(_ref3 => {
+          let {
+            value
+          } = _ref3;
+          return newValue.includes(value);
+        }));
+
+        if (onChangeResult instanceof Promise) {
+          onChangeResult.then(data => r(data));
+        } else {
+          r();
+        }
+      })) === null || _Promise === void 0 ? void 0 : _Promise.finally(() => {
         setIsEditMode(false);
         setIsLoading(false);
       });
+    } else {
+      setIsEditMode(false);
     }
   };
 

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -128,6 +128,7 @@ const TagsDropdown = _ref => {
     searchValueRef.current = value;
   };
 
+  const editingOptionInputRef = (0, _react.useRef)(null);
   const [options, setOptions] = (0, _react.useState)([]);
   const [editingOption, setEditingOptionState] = (0, _react.useState)(null);
 
@@ -359,18 +360,22 @@ const TagsDropdown = _ref => {
   };
 
   const setEditOptionModalStyles = () => {
-    var _editingOption$ref, _el$getBoundingClient, _dropdownListWrapperR, _positionClasses;
+    var _editingOption$ref, _el$getBoundingClient, _dropdownListWrapperR, _positionClasses, _positionClasses2;
 
     if (!editingOption || !(editOptionModalRef !== null && editOptionModalRef !== void 0 && editOptionModalRef.current)) return null;
+    const modalSize = 200;
     const {
       scrollX,
       scrollY
     } = window;
     const positionClasses = {
       left: "modal-left",
-      right: "modal-right"
+      right: "modal-right",
+      top: "modal-top",
+      bottom: "modal-bottom"
     };
     const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     const el = editingOption === null || editingOption === void 0 ? void 0 : (_editingOption$ref = editingOption.ref) === null || _editingOption$ref === void 0 ? void 0 : _editingOption$ref.current;
     const {
       x,
@@ -379,12 +384,16 @@ const TagsDropdown = _ref => {
       height
     } = (_el$getBoundingClient = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) !== null && _el$getBoundingClient !== void 0 ? _el$getBoundingClient : {};
     const containerPosition = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR = dropdownListWrapperRef.current) === null || _dropdownListWrapperR === void 0 ? void 0 : _dropdownListWrapperR.getBoundingClientRect();
-    const widthToRight = windowWidth - (containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.x) - (containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.width);
+    const distanceToRight = windowWidth - (containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.x) - (containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.width);
+    const distanceToBottom = windowHeight - y - scrollY - height;
     Object.values(positionClasses).map(className => editOptionModalRef.current.classList.remove(className));
-    editOptionModalRef.current.classList.add((_positionClasses = positionClasses === null || positionClasses === void 0 ? void 0 : positionClasses[widthToRight < 182 ? "left" : "right"]) !== null && _positionClasses !== void 0 ? _positionClasses : "");
+    editOptionModalRef.current.classList.add((_positionClasses = positionClasses === null || positionClasses === void 0 ? void 0 : positionClasses[distanceToRight < modalSize ? "left" : "right"]) !== null && _positionClasses !== void 0 ? _positionClasses : "");
+    editOptionModalRef.current.classList.add((_positionClasses2 = positionClasses === null || positionClasses === void 0 ? void 0 : positionClasses[distanceToBottom < modalSize ? "top" : "bottom"]) !== null && _positionClasses2 !== void 0 ? _positionClasses2 : "");
+    const xTranslate = distanceToRight < modalSize ? "calc(-100% + 7px)" : "-35px";
+    const yTranslate = distanceToBottom < modalSize ? "calc(-100% - ".concat(height + 10, "px)") : "10px";
     editOptionModalRef.current.style.left = "".concat(x + scrollX + width, "px");
-    editOptionModalRef.current.style.top = "".concat(y + scrollY + height + 10, "px");
-    editOptionModalRef.current.style.transform = widthToRight < 182 ? "translateX(calc(-100% + 7px))" : "translateX(-35px)";
+    editOptionModalRef.current.style.top = "".concat(y + scrollY + height, "px");
+    editOptionModalRef.current.style.transform = "translate(".concat(xTranslate, ", ").concat(yTranslate, ")");
   };
 
   const renderEditOptionModal = () => {
@@ -403,7 +412,8 @@ const TagsDropdown = _ref => {
       onKeyDown: keyCode => {
         if (keyCode === 13) saveEditingOption();
       },
-      symbolsLimit: "50"
+      symbolsLimit: "50",
+      ref: editingOptionInputRef
     }), /*#__PURE__*/_react.default.createElement(_Button.default, {
       variant: "link",
       icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Trash2, null),
@@ -1014,7 +1024,12 @@ const TagsDropdown = _ref => {
     })));
   }, [optionsProp]);
   (0, _react.useEffect)(() => {
-    if (editingOption) setEditOptionModalStyles();
+    if (editingOption) {
+      var _editingOptionInputRe, _editingOptionInputRe2;
+
+      setEditOptionModalStyles();
+      editingOptionInputRef === null || editingOptionInputRef === void 0 ? void 0 : (_editingOptionInputRe = editingOptionInputRef.current) === null || _editingOptionInputRe === void 0 ? void 0 : (_editingOptionInputRe2 = _editingOptionInputRe.focus) === null || _editingOptionInputRe2 === void 0 ? void 0 : _editingOptionInputRe2.call(_editingOptionInputRe);
+    }
   }, [editingOption === null || editingOption === void 0 ? void 0 : editingOption.value]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, {

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss

@@ -371,7 +371,6 @@
       height: 12px;
       background: #FFFFFF;
       transform: rotate(45deg);
-      top: -6px;
     }
 
     &-section {
@@ -468,6 +467,18 @@
     }
   }
 
+  &__edit-option-modal.modal-top {
+    &::before {
+      bottom: -6px;
+    }
+  }
+
+  &__edit-option-modal.modal-bottom {
+    &::before {
+      top: -6px;
+    }
+  }
+
   &__active-icon {
     position: absolute;
     top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.4.27",
+  "version": "1.4.29",
   "description": "",
   "main": "dist/index.js",
   "files": [