intelicoreact 1.4.44 → 1.4.46

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -428,7 +428,7 @@ const Dropdown = _ref => {
   (0, _react.useEffect)(() => {
     if (!isDoNotPullOutListOfMainContainer || dropdownRef.current) {
       initListContainer();
-      if (isDefaultOpened) setIsOpen(true);
+      if (isDefaultOpened && !isMobileProp) setIsOpen(true);
     }
   }, [isDoNotPullOutListOfMainContainer, dropdownRef.current]);
   (0, _react.useLayoutEffect)(() => {

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

@@ -90,6 +90,7 @@ const TagsDropdown = _ref => {
   const isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
   const [dropdownId] = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2));
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [listPos, setListPos] = (0, _react.useState)(null);
   const [initListHeight, setInitListHeight] = (0, _react.useState)(null);
   const [isScrollableList, setIsScrollableList] = (0, _react.useState)(null);
   const [isFixedMaxHeight, setIsFixedMaxHeight] = (0, _react.useState)(false);
@@ -232,18 +233,28 @@ const TagsDropdown = _ref => {
     let selectorWrapperHeight = selectorWrapper === null || selectorWrapper === void 0 || (_selectorWrapper$getB = selectorWrapper.getBoundingClientRect()) === null || _selectorWrapper$getB === void 0 ? void 0 : _selectorWrapper$getB.height;
     const maxSelectorWrapperHeight = 500 - ((_listHeader$getBoundi = listHeader === null || listHeader === void 0 || (_listHeader$getBoundi2 = listHeader.getBoundingClientRect()) === null || _listHeader$getBoundi2 === void 0 ? void 0 : _listHeader$getBoundi2.height) !== null && _listHeader$getBoundi !== void 0 ? _listHeader$getBoundi : 0) - ((_listFooter$getBoundi = listFooter === null || listFooter === void 0 || (_listFooter$getBoundi2 = listFooter.getBoundingClientRect()) === null || _listFooter$getBoundi2 === void 0 ? void 0 : _listFooter$getBoundi2.height) !== null && _listFooter$getBoundi !== void 0 ? _listFooter$getBoundi : 0);
     if (!isMobile || !withMobileLogic) {
-      var _getComputedStyle2, _dropdownListMaxHeigh;
+      var _getComputedStyle2, _dropdownListMaxHeigh, _customTriggerRef$cur, _customTriggerRef$cur2;
       const dropdownListMaxHeightInPx = (_getComputedStyle2 = getComputedStyle(dropdownList)) === null || _getComputedStyle2 === void 0 ? void 0 : _getComputedStyle2.maxHeight;
       const maxHeight = initListHeight !== null && initListHeight !== void 0 ? initListHeight : parseInt((_dropdownListMaxHeigh = dropdownListMaxHeightInPx === null || dropdownListMaxHeightInPx === void 0 ? void 0 : dropdownListMaxHeightInPx.replace("px", "")) !== null && _dropdownListMaxHeigh !== void 0 ? _dropdownListMaxHeigh : 0, 10);
       if (initListHeight === null && !isNaN(maxHeight)) setInitListHeight(maxHeight);
       if (selectorWrapperHeight > maxHeight && !isNaN(maxHeight)) selectorWrapperHeight = maxHeight - 2 * margin;
-      const toTop = top - margin;
+      const toTop = renderCustomTrigger ? top - margin - ((_customTriggerRef$cur = customTriggerRef === null || customTriggerRef === void 0 || (_customTriggerRef$cur2 = customTriggerRef.current) === null || _customTriggerRef$cur2 === void 0 || (_customTriggerRef$cur2 = _customTriggerRef$cur2.getBoundingClientRect()) === null || _customTriggerRef$cur2 === void 0 ? void 0 : _customTriggerRef$cur2.height) !== null && _customTriggerRef$cur !== void 0 ? _customTriggerRef$cur : 0) : top - margin;
       const toBottom = windowHeight - top - height - margin * 2;
-      const listPos = toTop < toBottom || toBottom >= selectorWrapperHeight ? "bottom" : "top";
-      if (selectorWrapperHeight > (listPos === "top" ? toTop : toBottom)) selectorWrapperHeight = (listPos === "top" ? toTop : toBottom) - 3 * margin;
+      let listPosition = listPos;
+      if (!listPos && options.length) {
+        listPosition = toTop < toBottom || toBottom >= selectorWrapperHeight ? "bottom" : "top";
+        setListPos(listPosition);
+      }
+      if (selectorWrapperHeight > (listPosition === "top" ? toTop : toBottom)) {
+        selectorWrapperHeight = (listPosition === "top" ? toTop : toBottom) - 3 * margin;
+        if (selectorWrapperHeight < 200) {
+          selectorWrapperHeight = 200;
+        }
+        selectorWrapper.style.maxHeight = "".concat(selectorWrapperHeight, "px");
+      }
       listContainer.style.minWidth = "".concat(width, "px");
       listContainer.style.left = "".concat(left, "px");
-      listContainer.style.top = "".concat(listPos === "bottom" ? top + height : top - selectorWrapperHeight - 2 * margin, "px");
+      listContainer.style.top = "".concat(listPosition === "bottom" ? top + height : top - selectorWrapperHeight - 2 * margin, "px");
     } else {
       dropdownList.style.maxHeight = "".concat(maxSelectorWrapperHeight, "px");
     }
@@ -813,7 +824,7 @@ const TagsDropdown = _ref => {
 
   (0, _react.useLayoutEffect)(() => {
     initListContainer();
-    if (isDefaultOpened) setIsOpen(true);
+    if (isDefaultOpened && !isMobileProp) setIsOpen(true);
     return () => {
       var _getListContainer2, _getListContainerWrap;
       (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 || _getListContainer2.remove();
@@ -822,38 +833,33 @@ const TagsDropdown = _ref => {
   }, []);
   (0, _react.useLayoutEffect)(() => {
     var _getListContainer3;
-    const onResize = () => {
-      setListContainerStyles();
-      setEditOptionModalStyles();
-    };
     if (!isMobile) {
-      window.addEventListener("resize", onResize);
       window.addEventListener("mousewheel", closeList);
-      window.addEventListener("scroll", closeList);
+      window.addEventListener("wheel", closeList);
       window.addEventListener("touchmove", closeList);
       window.addEventListener("mouseup", handleClickOutside);
     } else {
-      window.removeEventListener("resize", onResize);
       window.removeEventListener("mousewheel", closeList);
-      window.removeEventListener("scroll", closeList);
+      window.removeEventListener("wheel", closeList);
       window.removeEventListener("touchmove", closeList);
       window.removeEventListener("mouseup", handleClickOutside);
     }
     (_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 || _getListContainer3.addEventListener("click", closeList);
     return () => {
       var _getListContainer4;
-      window.removeEventListener("resize", onResize);
       window.removeEventListener("mousewheel", closeList);
       window.removeEventListener("mouseup", handleClickOutside);
-      window.removeEventListener("scroll", closeList);
+      window.removeEventListener("wheel", closeList);
       window.removeEventListener("touchmove", closeList);
       (_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 || _getListContainer4.removeEventListener("click", closeList);
     };
   }, [getListContainer, isMobile]);
   (0, _react.useLayoutEffect)(() => {
-    setListContainerStyles();
-    setEditOptionModalStyles();
-  }, [isOpen, optionsProp, chosenOptions, isMobile, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 || (_dropdownListWrapperR2 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR2 === void 0 || (_dropdownListWrapperR2 = _dropdownListWrapperR2.getBoundingClientRect()) === null || _dropdownListWrapperR2 === void 0 ? void 0 : _dropdownListWrapperR2.height, recalculateListContainerStylesTrigger]);
+    if (isOpen) {
+      setListContainerStyles();
+      setEditOptionModalStyles();
+    }
+  }, [isOpen, optionsProp, chosenOptions, searchValue, isMobile, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 || (_dropdownListWrapperR2 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR2 === void 0 || (_dropdownListWrapperR2 = _dropdownListWrapperR2.getBoundingClientRect()) === null || _dropdownListWrapperR2 === void 0 ? void 0 : _dropdownListWrapperR2.height, recalculateListContainerStylesTrigger]);
   (0, _react.useEffect)(() => {
     if (isUseLocalOptionsStore && chosenOptions.length !== Object.keys(localOptionsStore).length) {
       options.map(option => {
@@ -891,6 +897,8 @@ const TagsDropdown = _ref => {
       }
       (_getListContainer6 = getListContainer()) === null || _getListContainer6 === void 0 || _getListContainer6.classList.remove("tags-dropdown__container--opened");
       if (withSearchInputInList) setSearchValueInterceptor("");
+      setListPos(null);
+      setSearchValue("");
     }
   }, [isOpen]);
   (0, _react.useEffect)(() => {

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

@@ -311,6 +311,10 @@
         padding: 2px;
         align-items: flex-start;
         gap: 4px;
+        width: 20px;
+        height: 20px;
+        min-width: 20px;
+        min-height: 20px;
 
         &:hover {
           background-color: #EBEFF2;

package/package.json

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