sceyt-chat-react-uikit 1.7.6-beta.18 → 1.7.6-beta.19

package/index.js

@@ -21685,7 +21685,7 @@ function addMembers(action) {
             m: membersIds
           },
           body: 'AM',
-          mentionedUsers: addedMembers,
+          mentionedUsers: getDisableFrowardMentionsCount() ? [] : addedMembers,
           attachments: [],
           type: 'system'
         };
@@ -23833,6 +23833,12 @@ var Channel = function Channel(_ref3) {
   var isTypeValid = React.useCallback(function (type) {
     return !doNotShowMessageDeliveryTypes.includes(type);
   }, [doNotShowMessageDeliveryTypes]);
+  var handleDragEnter = React.useCallback(function (e) {
+    if (e.dataTransfer.types.includes('Files') && activeChannel.id !== channel.id) {
+      e.preventDefault();
+      setSelectedChannel(channel);
+    }
+  }, [channel, activeChannel.id, setSelectedChannel]);
   return /*#__PURE__*/React__default.createElement(Container$3, {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
@@ -23845,6 +23851,7 @@ var Channel = function Channel(_ref3) {
     onClick: function onClick() {
       return setSelectedChannel(channel);
     },
+    onDragEnter: handleDragEnter,
     hoverBackground: channelHoverBackground || backgroundHovered
   }, showAvatar && (/*#__PURE__*/React__default.createElement(AvatarWrapper, null, /*#__PURE__*/React__default.createElement(Avatar, {
     name: avatarName,
@@ -23912,7 +23919,7 @@ var Channel = function Channel(_ref3) {
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
-  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : ((typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording)) && draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
+  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
     color: draftMessageText && warningColor || textPrimary
   }, ": ")), /*#__PURE__*/React__default.createElement(LastMessageText, {
     color: textSecondary,
@@ -23998,7 +24005,7 @@ var Container$3 = styled__default.div(_templateObject6$2 || (_templateObject6$2
 }, UserStatus, function (props) {
   return props.selectedChannel && "\n      border-color: " + props.selectedBackgroundColor + ";\n    ";
 });
-var DraftMessageTitle = styled__default.span(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (props) {
+var DraftMessageTitle = styled__default.span(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin-right: 4px;\n"])), function (props) {
   return props.color;
 });
 var DraftMessageText = styled__default.span(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"])), function (props) {
@@ -35826,6 +35833,13 @@ var MessageInfo = function MessageInfo(_ref) {
   var _useState7 = React.useState(false),
     flipLocked = _useState7[0],
     setFlipLocked = _useState7[1];
+  var _useState8 = React.useState(8),
+    verticalOffset = _useState8[0],
+    setVerticalOffset = _useState8[1];
+  var _useState9 = React.useState(0),
+    transformY = _useState9[0],
+    setTransformY = _useState9[1];
+  var initializingRef = React.useRef(true);
   var getFromContacts = React.useMemo(function () {
     return getShowOnlyContactUsers();
   }, []);
@@ -35914,23 +35928,57 @@ var MessageInfo = function MessageInfo(_ref) {
       var availableAbove = anchorRect.top - containerRect.top - 8;
       var nextFlip = Boolean(flipTarget > availableBelow && flipTarget <= availableAbove);
       setFlipAbove(nextFlip);
+      var offset = 8;
+      var transform = 0;
+      if (nextFlip) {
+        var naturalPopupBottom = anchorRect.top - offset;
+        var naturalPopupTop = naturalPopupBottom - flipTarget;
+        if (naturalPopupTop < containerRect.top) {
+          transform = containerRect.top - naturalPopupTop;
+        } else if (naturalPopupBottom > containerRect.bottom) {
+          transform = containerRect.bottom - naturalPopupBottom;
+        }
+      } else {
+        var _naturalPopupTop = anchorRect.bottom + offset;
+        var _naturalPopupBottom = _naturalPopupTop + flipTarget;
+        if (_naturalPopupBottom > containerRect.bottom) {
+          transform = containerRect.bottom - _naturalPopupBottom;
+        } else if (_naturalPopupTop < containerRect.top) {
+          transform = containerRect.top - _naturalPopupTop;
+        }
+      }
+      setVerticalOffset(offset);
+      setTransformY(transform);
     }
     setIsTransitioning(true);
     setOpen(true);
     setReady(true);
     setFlipLocked(true);
+    setTimeout(function () {
+      initializingRef.current = false;
+    }, 150);
   }, []);
   React.useEffect(function () {
+    if (!open) {
+      initializingRef.current = true;
+    }
+  }, [open]);
+  React.useEffect(function () {
+    if (!open || !ready) return;
     var onDown = function onDown(e) {
+      if (initializingRef.current) return;
       if (rootRef.current && !rootRef.current.contains(e.target)) {
         togglePopup();
       }
     };
-    document.addEventListener('mousedown', onDown);
+    var timeoutId = setTimeout(function () {
+      document.addEventListener('mousedown', onDown);
+    }, 100);
     return function () {
+      clearTimeout(timeoutId);
       document.removeEventListener('mousedown', onDown);
     };
-  }, []);
+  }, [open, ready, togglePopup]);
   React.useEffect(function () {
     var container = document.getElementById('scrollableDiv');
     if (!container) return;
@@ -35950,16 +35998,48 @@ var MessageInfo = function MessageInfo(_ref) {
       var availableAbove = anchorRect.top - containerRect.top - 8;
       var overflowBelow = dropdownHeight > availableBelow;
       var overflowAbove = dropdownHeight > availableAbove;
+      var nextFlip = flipAbove;
       if (!isTransitioning && !flipLocked) {
         setFlipAbove(function (prev) {
           if (prev) {
-            if (overflowAbove && !overflowBelow) return false;
+            if (overflowAbove && !overflowBelow) {
+              nextFlip = false;
+              return false;
+            }
+            nextFlip = true;
             return true;
           }
-          if (overflowBelow && !overflowAbove) return true;
+          if (overflowBelow && !overflowAbove) {
+            nextFlip = true;
+            return true;
+          }
+          nextFlip = false;
           return false;
         });
+      } else {
+        nextFlip = flipAbove;
+      }
+      var offset = 8;
+      var transform = 0;
+      if (nextFlip) {
+        var naturalPopupBottom = anchorRect.top - offset;
+        var naturalPopupTop = naturalPopupBottom - dropdownHeight;
+        if (naturalPopupTop < containerRect.top) {
+          transform = containerRect.top - naturalPopupTop;
+        } else if (naturalPopupBottom > containerRect.bottom) {
+          transform = containerRect.bottom - naturalPopupBottom;
+        }
+      } else {
+        var _naturalPopupTop2 = anchorRect.bottom + offset;
+        var _naturalPopupBottom2 = _naturalPopupTop2 + dropdownHeight;
+        if (_naturalPopupBottom2 > containerRect.bottom) {
+          transform = containerRect.bottom - _naturalPopupBottom2;
+        } else if (_naturalPopupTop2 < containerRect.top) {
+          transform = containerRect.top - _naturalPopupTop2;
+        }
       }
+      setVerticalOffset(offset);
+      setTransformY(transform);
     };
     if (open) {
       recalc();
@@ -35989,7 +36069,7 @@ var MessageInfo = function MessageInfo(_ref) {
         window.removeEventListener('resize', recalc);
       };
     }
-  }, [open, ready, message.id, panelHeightPx, isTransitioning, flipLocked, height]);
+  }, [open, ready, message.id, panelHeightPx, isTransitioning, flipLocked, height, flipAbove, messagesMarkersLoadingState]);
   React.useLayoutEffect(function () {
     var _rootRef$current2;
     var container = document.getElementById('scrollableDiv');
@@ -36015,23 +36095,53 @@ var MessageInfo = function MessageInfo(_ref) {
     var availableBelow = containerRect.bottom - anchorRect.bottom - 8;
     var availableAbove = anchorRect.top - containerRect.top - 8;
     setFlipLocked(true);
+    var currentFlip = flipAbove;
     if (messagesMarkersLoadingState !== LOADING_STATE.LOADING) {
       var overflowBelow = nextHeight > availableBelow;
       var overflowAbove = nextHeight > availableAbove;
       setFlipAbove(function (prev) {
         if (prev) {
-          if (overflowAbove && !overflowBelow) return false;
+          if (overflowAbove && !overflowBelow) {
+            currentFlip = false;
+            return false;
+          }
+          currentFlip = true;
           return true;
         }
-        if (overflowBelow && !overflowAbove) return true;
+        if (overflowBelow && !overflowAbove) {
+          currentFlip = true;
+          return true;
+        }
+        currentFlip = false;
         return false;
       });
     }
+    var offset = 8;
+    var transform = 0;
+    if (currentFlip) {
+      var naturalPopupBottom = anchorRect.top - offset;
+      var naturalPopupTop = naturalPopupBottom - nextHeight;
+      if (naturalPopupTop < containerRect.top) {
+        transform = containerRect.top - naturalPopupTop;
+      } else if (naturalPopupBottom > containerRect.bottom) {
+        transform = containerRect.bottom - naturalPopupBottom;
+      }
+    } else {
+      var _naturalPopupTop3 = anchorRect.bottom + offset;
+      var _naturalPopupBottom3 = _naturalPopupTop3 + nextHeight;
+      if (_naturalPopupBottom3 > containerRect.bottom) {
+        transform = containerRect.bottom - _naturalPopupBottom3;
+      } else if (_naturalPopupTop3 < containerRect.top) {
+        transform = containerRect.top - _naturalPopupTop3;
+      }
+    }
+    setVerticalOffset(offset);
+    setTransformY(transform);
     if (panelHeightPx !== nextHeight) {
       setIsTransitioning(true);
       setPanelHeightPx(nextHeight);
     }
-  }, [ready, panelHeightPx, activeMarkers.length, messagesMarkersLoadingState, height]);
+  }, [ready, panelHeightPx, activeMarkers.length, messagesMarkersLoadingState, height, flipAbove]);
   React.useEffect(function () {
     if (messagesMarkersLoadingState === LOADING_STATE.LOADING) {
       setFlipLocked(true);
@@ -36058,12 +36168,17 @@ var MessageInfo = function MessageInfo(_ref) {
       dispatch(getMessageMarkersAC(message.id, message.channelId, activeTab));
     }
   }, [activeTab, message.id, message.channelId]);
+  if ((messagesMarkersLoadingState === LOADING_STATE.LOADING || messagesMarkersLoadingState == null) && !markers) {
+    return null;
+  }
   return /*#__PURE__*/React__default.createElement(DropdownRoot, {
     ref: rootRef,
     rtl: message.incoming,
     backgroundColor: backgroundSections,
     flip: flipAbove,
-    ready: ready
+    ready: ready,
+    verticalOffset: verticalOffset,
+    transformY: transformY
   }, /*#__PURE__*/React__default.createElement(Panel, {
     ref: panelRef,
     bg: backgroundSections,
@@ -36133,12 +36248,14 @@ var RowDate = styled__default.div(_templateObject7$j || (_templateObject7$j = _t
 var Empty = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px 0;\n  font-size: 14px;\n  height: calc(100% - 32px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (p) {
   return p.color;
 });
-var DropdownRoot = styled__default.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
-  return p.flip ? 'auto' : 'calc(100% + 8px)';
+var DropdownRoot = styled__default.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  transform: ", ";\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
+  return p.flip ? 'auto' : "calc(100% + " + p.verticalOffset + "px)";
 }, function (p) {
-  return p.flip ? 'calc(100% + 8px)' : 'auto';
+  return p.flip ? "calc(100% + " + p.verticalOffset + "px)" : 'auto';
 }, function (p) {
   return p.rtl ? 'left: 4%;' : 'right: 4%;';
+}, function (p) {
+  return p.transformY !== 0 ? "translateY(" + p.transformY + "px)" : 'none';
 }, function (_ref2) {
   var backgroundColor = _ref2.backgroundColor;
   return backgroundColor;
@@ -36606,6 +36723,11 @@ var Message$1 = function Message(_ref) {
       }
     }
   }, [isVisible, unreadScrollTo]);
+  React.useEffect(function () {
+    if (!isVisible && infoPopupOpen) {
+      setInfoPopupOpen(false);
+    }
+  }, [isVisible, infoPopupOpen]);
   useDidUpdate(function () {
     if (tabIsActive) {
       handleSendReadMarker();

package/index.modern.js

@@ -21684,7 +21684,7 @@ function addMembers(action) {
             m: membersIds
           },
           body: 'AM',
-          mentionedUsers: addedMembers,
+          mentionedUsers: getDisableFrowardMentionsCount() ? [] : addedMembers,
           attachments: [],
           type: 'system'
         };
@@ -23832,6 +23832,12 @@ var Channel = function Channel(_ref3) {
   var isTypeValid = useCallback(function (type) {
     return !doNotShowMessageDeliveryTypes.includes(type);
   }, [doNotShowMessageDeliveryTypes]);
+  var handleDragEnter = useCallback(function (e) {
+    if (e.dataTransfer.types.includes('Files') && activeChannel.id !== channel.id) {
+      e.preventDefault();
+      setSelectedChannel(channel);
+    }
+  }, [channel, activeChannel.id, setSelectedChannel]);
   return /*#__PURE__*/React__default.createElement(Container$3, {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
@@ -23844,6 +23850,7 @@ var Channel = function Channel(_ref3) {
     onClick: function onClick() {
       return setSelectedChannel(channel);
     },
+    onDragEnter: handleDragEnter,
     hoverBackground: channelHoverBackground || backgroundHovered
   }, showAvatar && (/*#__PURE__*/React__default.createElement(AvatarWrapper, null, /*#__PURE__*/React__default.createElement(Avatar, {
     name: avatarName,
@@ -23911,7 +23918,7 @@ var Channel = function Channel(_ref3) {
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
-  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : ((typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording)) && draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
+  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
     color: draftMessageText && warningColor || textPrimary
   }, ": ")), /*#__PURE__*/React__default.createElement(LastMessageText, {
     color: textSecondary,
@@ -23997,7 +24004,7 @@ var Container$3 = styled.div(_templateObject6$2 || (_templateObject6$2 = _tagged
 }, UserStatus, function (props) {
   return props.selectedChannel && "\n      border-color: " + props.selectedBackgroundColor + ";\n    ";
 });
-var DraftMessageTitle = styled.span(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (props) {
+var DraftMessageTitle = styled.span(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin-right: 4px;\n"])), function (props) {
   return props.color;
 });
 var DraftMessageText = styled.span(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"])), function (props) {
@@ -35825,6 +35832,13 @@ var MessageInfo = function MessageInfo(_ref) {
   var _useState7 = useState(false),
     flipLocked = _useState7[0],
     setFlipLocked = _useState7[1];
+  var _useState8 = useState(8),
+    verticalOffset = _useState8[0],
+    setVerticalOffset = _useState8[1];
+  var _useState9 = useState(0),
+    transformY = _useState9[0],
+    setTransformY = _useState9[1];
+  var initializingRef = useRef(true);
   var getFromContacts = useMemo(function () {
     return getShowOnlyContactUsers();
   }, []);
@@ -35913,23 +35927,57 @@ var MessageInfo = function MessageInfo(_ref) {
       var availableAbove = anchorRect.top - containerRect.top - 8;
       var nextFlip = Boolean(flipTarget > availableBelow && flipTarget <= availableAbove);
       setFlipAbove(nextFlip);
+      var offset = 8;
+      var transform = 0;
+      if (nextFlip) {
+        var naturalPopupBottom = anchorRect.top - offset;
+        var naturalPopupTop = naturalPopupBottom - flipTarget;
+        if (naturalPopupTop < containerRect.top) {
+          transform = containerRect.top - naturalPopupTop;
+        } else if (naturalPopupBottom > containerRect.bottom) {
+          transform = containerRect.bottom - naturalPopupBottom;
+        }
+      } else {
+        var _naturalPopupTop = anchorRect.bottom + offset;
+        var _naturalPopupBottom = _naturalPopupTop + flipTarget;
+        if (_naturalPopupBottom > containerRect.bottom) {
+          transform = containerRect.bottom - _naturalPopupBottom;
+        } else if (_naturalPopupTop < containerRect.top) {
+          transform = containerRect.top - _naturalPopupTop;
+        }
+      }
+      setVerticalOffset(offset);
+      setTransformY(transform);
     }
     setIsTransitioning(true);
     setOpen(true);
     setReady(true);
     setFlipLocked(true);
+    setTimeout(function () {
+      initializingRef.current = false;
+    }, 150);
   }, []);
   useEffect(function () {
+    if (!open) {
+      initializingRef.current = true;
+    }
+  }, [open]);
+  useEffect(function () {
+    if (!open || !ready) return;
     var onDown = function onDown(e) {
+      if (initializingRef.current) return;
       if (rootRef.current && !rootRef.current.contains(e.target)) {
         togglePopup();
       }
     };
-    document.addEventListener('mousedown', onDown);
+    var timeoutId = setTimeout(function () {
+      document.addEventListener('mousedown', onDown);
+    }, 100);
     return function () {
+      clearTimeout(timeoutId);
       document.removeEventListener('mousedown', onDown);
     };
-  }, []);
+  }, [open, ready, togglePopup]);
   useEffect(function () {
     var container = document.getElementById('scrollableDiv');
     if (!container) return;
@@ -35949,16 +35997,48 @@ var MessageInfo = function MessageInfo(_ref) {
       var availableAbove = anchorRect.top - containerRect.top - 8;
       var overflowBelow = dropdownHeight > availableBelow;
       var overflowAbove = dropdownHeight > availableAbove;
+      var nextFlip = flipAbove;
       if (!isTransitioning && !flipLocked) {
         setFlipAbove(function (prev) {
           if (prev) {
-            if (overflowAbove && !overflowBelow) return false;
+            if (overflowAbove && !overflowBelow) {
+              nextFlip = false;
+              return false;
+            }
+            nextFlip = true;
             return true;
           }
-          if (overflowBelow && !overflowAbove) return true;
+          if (overflowBelow && !overflowAbove) {
+            nextFlip = true;
+            return true;
+          }
+          nextFlip = false;
           return false;
         });
+      } else {
+        nextFlip = flipAbove;
+      }
+      var offset = 8;
+      var transform = 0;
+      if (nextFlip) {
+        var naturalPopupBottom = anchorRect.top - offset;
+        var naturalPopupTop = naturalPopupBottom - dropdownHeight;
+        if (naturalPopupTop < containerRect.top) {
+          transform = containerRect.top - naturalPopupTop;
+        } else if (naturalPopupBottom > containerRect.bottom) {
+          transform = containerRect.bottom - naturalPopupBottom;
+        }
+      } else {
+        var _naturalPopupTop2 = anchorRect.bottom + offset;
+        var _naturalPopupBottom2 = _naturalPopupTop2 + dropdownHeight;
+        if (_naturalPopupBottom2 > containerRect.bottom) {
+          transform = containerRect.bottom - _naturalPopupBottom2;
+        } else if (_naturalPopupTop2 < containerRect.top) {
+          transform = containerRect.top - _naturalPopupTop2;
+        }
       }
+      setVerticalOffset(offset);
+      setTransformY(transform);
     };
     if (open) {
       recalc();
@@ -35988,7 +36068,7 @@ var MessageInfo = function MessageInfo(_ref) {
         window.removeEventListener('resize', recalc);
       };
     }
-  }, [open, ready, message.id, panelHeightPx, isTransitioning, flipLocked, height]);
+  }, [open, ready, message.id, panelHeightPx, isTransitioning, flipLocked, height, flipAbove, messagesMarkersLoadingState]);
   useLayoutEffect(function () {
     var _rootRef$current2;
     var container = document.getElementById('scrollableDiv');
@@ -36014,23 +36094,53 @@ var MessageInfo = function MessageInfo(_ref) {
     var availableBelow = containerRect.bottom - anchorRect.bottom - 8;
     var availableAbove = anchorRect.top - containerRect.top - 8;
     setFlipLocked(true);
+    var currentFlip = flipAbove;
     if (messagesMarkersLoadingState !== LOADING_STATE.LOADING) {
       var overflowBelow = nextHeight > availableBelow;
       var overflowAbove = nextHeight > availableAbove;
       setFlipAbove(function (prev) {
         if (prev) {
-          if (overflowAbove && !overflowBelow) return false;
+          if (overflowAbove && !overflowBelow) {
+            currentFlip = false;
+            return false;
+          }
+          currentFlip = true;
           return true;
         }
-        if (overflowBelow && !overflowAbove) return true;
+        if (overflowBelow && !overflowAbove) {
+          currentFlip = true;
+          return true;
+        }
+        currentFlip = false;
         return false;
       });
     }
+    var offset = 8;
+    var transform = 0;
+    if (currentFlip) {
+      var naturalPopupBottom = anchorRect.top - offset;
+      var naturalPopupTop = naturalPopupBottom - nextHeight;
+      if (naturalPopupTop < containerRect.top) {
+        transform = containerRect.top - naturalPopupTop;
+      } else if (naturalPopupBottom > containerRect.bottom) {
+        transform = containerRect.bottom - naturalPopupBottom;
+      }
+    } else {
+      var _naturalPopupTop3 = anchorRect.bottom + offset;
+      var _naturalPopupBottom3 = _naturalPopupTop3 + nextHeight;
+      if (_naturalPopupBottom3 > containerRect.bottom) {
+        transform = containerRect.bottom - _naturalPopupBottom3;
+      } else if (_naturalPopupTop3 < containerRect.top) {
+        transform = containerRect.top - _naturalPopupTop3;
+      }
+    }
+    setVerticalOffset(offset);
+    setTransformY(transform);
     if (panelHeightPx !== nextHeight) {
       setIsTransitioning(true);
       setPanelHeightPx(nextHeight);
     }
-  }, [ready, panelHeightPx, activeMarkers.length, messagesMarkersLoadingState, height]);
+  }, [ready, panelHeightPx, activeMarkers.length, messagesMarkersLoadingState, height, flipAbove]);
   useEffect(function () {
     if (messagesMarkersLoadingState === LOADING_STATE.LOADING) {
       setFlipLocked(true);
@@ -36057,12 +36167,17 @@ var MessageInfo = function MessageInfo(_ref) {
       dispatch(getMessageMarkersAC(message.id, message.channelId, activeTab));
     }
   }, [activeTab, message.id, message.channelId]);
+  if ((messagesMarkersLoadingState === LOADING_STATE.LOADING || messagesMarkersLoadingState == null) && !markers) {
+    return null;
+  }
   return /*#__PURE__*/React__default.createElement(DropdownRoot, {
     ref: rootRef,
     rtl: message.incoming,
     backgroundColor: backgroundSections,
     flip: flipAbove,
-    ready: ready
+    ready: ready,
+    verticalOffset: verticalOffset,
+    transformY: transformY
   }, /*#__PURE__*/React__default.createElement(Panel, {
     ref: panelRef,
     bg: backgroundSections,
@@ -36132,12 +36247,14 @@ var RowDate = styled.div(_templateObject7$j || (_templateObject7$j = _taggedTemp
 var Empty = styled.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px 0;\n  font-size: 14px;\n  height: calc(100% - 32px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (p) {
   return p.color;
 });
-var DropdownRoot = styled.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
-  return p.flip ? 'auto' : 'calc(100% + 8px)';
+var DropdownRoot = styled.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  transform: ", ";\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
+  return p.flip ? 'auto' : "calc(100% + " + p.verticalOffset + "px)";
 }, function (p) {
-  return p.flip ? 'calc(100% + 8px)' : 'auto';
+  return p.flip ? "calc(100% + " + p.verticalOffset + "px)" : 'auto';
 }, function (p) {
   return p.rtl ? 'left: 4%;' : 'right: 4%;';
+}, function (p) {
+  return p.transformY !== 0 ? "translateY(" + p.transformY + "px)" : 'none';
 }, function (_ref2) {
   var backgroundColor = _ref2.backgroundColor;
   return backgroundColor;
@@ -36605,6 +36722,11 @@ var Message$1 = function Message(_ref) {
       }
     }
   }, [isVisible, unreadScrollTo]);
+  useEffect(function () {
+    if (!isVisible && infoPopupOpen) {
+      setInfoPopupOpen(false);
+    }
+  }, [isVisible, infoPopupOpen]);
   useDidUpdate(function () {
     if (tabIsActive) {
       handleSendReadMarker();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.7.6-beta.18",
+  "version": "1.7.6-beta.19",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",