intelicoreact 1.4.43 → 1.4.45

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

@@ -501,7 +501,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

@@ -110,6 +110,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);
@@ -273,19 +274,34 @@ const TagsDropdown = _ref => {
     const maxSelectorWrapperHeight = 500 - ((_listHeader$getBoundi = listHeader === null || listHeader === void 0 ? 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 ? 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, _customTriggerRef$cur3;
 
       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 ? void 0 : (_customTriggerRef$cur2 = customTriggerRef.current) === null || _customTriggerRef$cur2 === void 0 ? void 0 : (_customTriggerRef$cur3 = _customTriggerRef$cur2.getBoundingClientRect()) === null || _customTriggerRef$cur3 === void 0 ? void 0 : _customTriggerRef$cur3.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");
     }
@@ -899,7 +915,7 @@ const TagsDropdown = _ref => {
 
   (0, _react.useLayoutEffect)(() => {
     initListContainer();
-    if (isDefaultOpened) setIsOpen(true);
+    if (isDefaultOpened && !isMobileProp) setIsOpen(true);
     return () => {
       var _getListContainer2, _getListContainerWrap;
 
@@ -910,21 +926,14 @@ 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);
     }
@@ -933,18 +942,19 @@ const TagsDropdown = _ref => {
     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 ? void 0 : _getListContainer4.removeEventListener("click", closeList);
     };
   }, [getListContainer, isMobile]);
   (0, _react.useLayoutEffect)(() => {
-    setListContainerStyles();
-    setEditOptionModalStyles();
-  }, [isOpen, optionsProp, chosenOptions, isMobile, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR2 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR2 === void 0 ? void 0 : (_dropdownListWrapperR3 = _dropdownListWrapperR2.getBoundingClientRect()) === null || _dropdownListWrapperR3 === void 0 ? void 0 : _dropdownListWrapperR3.height, recalculateListContainerStylesTrigger]);
+    if (isOpen) {
+      setListContainerStyles();
+      setEditOptionModalStyles();
+    }
+  }, [isOpen, optionsProp, chosenOptions, searchValue, isMobile, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR2 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR2 === void 0 ? void 0 : (_dropdownListWrapperR3 = _dropdownListWrapperR2.getBoundingClientRect()) === null || _dropdownListWrapperR3 === void 0 ? void 0 : _dropdownListWrapperR3.height, recalculateListContainerStylesTrigger]);
   (0, _react.useEffect)(() => {
     if (isUseLocalOptionsStore && chosenOptions.length !== Object.keys(localOptionsStore).length) {
       options.map(option => {
@@ -990,6 +1000,8 @@ const TagsDropdown = _ref => {
 
       (_getListContainer6 = getListContainer()) === null || _getListContainer6 === void 0 ? 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/dist/Atomic/FormElements/Textarea/Textarea.js

@@ -20,12 +20,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const RC = "textarea";
-
-const Textarea = _ref => {
+const Textarea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     id,
     value,
     onChange,
+    onFocus,
+    onBlur,
     placeholder,
     disabled,
     className,
@@ -34,12 +35,19 @@ const Textarea = _ref => {
     withAutoGrow,
     onKeyDown = () => {}
   } = _ref;
-  const textareaRef = (0, _react.useRef)();
+  const internalRef = (0, _react.useRef)();
+  const textareaRef = ref || internalRef;
   const handle = {
     change: val => {
       let inputValue = val;
       if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
       onChange(inputValue);
+    },
+    focus: e => {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    },
+    blur: e => {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }
   };
 
@@ -64,9 +72,10 @@ const Textarea = _ref => {
     placeholder: placeholder,
     disabled: disabled,
     onKeyDown: onKeyDown,
-    ref: textareaRef
+    ref: textareaRef,
+    onFocus: handle.focus,
+    onBlur: handle.blur
   }));
-};
-
+});
 var _default = Textarea;
 exports.default = _default;

package/package.json

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