sceyt-chat-react-uikit 1.6.7-beta.4 → 1.6.7-beta.6

package/components/ChannelDetails/Actions/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IChannel, MuteTime } from '../../../types';
 interface IProps {
+    setActionsHeight?: (height: number) => void;
     channel: IChannel;
     theme?: string;
     actionMenuOpen?: () => void;
@@ -67,5 +68,5 @@ interface IProps {
     actionItemsFontSize?: string;
     borderColor?: string;
 }
-declare const Actions: ({ channel, actionMenuOpen, theme, menuIsOpen, toggleable, showMuteUnmuteNotifications, muteUnmuteNotificationsOrder, muteNotificationIcon, unmuteNotificationIcon, muteNotificationIconColor, unmuteNotificationIconColor, muteUnmuteNotificationTextColor, timeOptionsToMuteNotifications, showStarredMessages, starredMessagesOrder, staredMessagesIcon, staredMessagesIconColor, staredMessagesTextColor, showPinChannel, pinChannelOrder, pinChannelIcon, unpinChannelIcon, pinChannelIconColor, pinChannelTextColor, showMarkAsReadUnread, markAsReadUnreadOrder, markAsReadIcon, markAsUnreadIcon, markAsReadIconColor, markAsUnreadIconColor, markAsReadUnreadTextColor, showLeaveChannel, leaveChannelOrder, leaveChannelIcon, leaveChannelIconColor, leaveChannelTextColor, showReportChannel, reportChannelIcon, reportChannelOrder, reportChannelIconColor, reportChannelTextColor, showDeleteChannel, deleteChannelIcon, deleteChannelIconColor, deleteChannelTextColor, deleteChannelOrder, showBlockAndLeaveChannel, showBlockUser, blockAndLeaveChannelIcon, unblockUserIcon, blockAndLeaveChannelIconColor, blockAndLeaveChannelTextColor, unblockUserTextColor, showClearHistory, clearHistoryOrder, clearHistoryIcon, clearHistoryTextColor, deleteAllMessagesOrder, deleteAllMessagesIcon, deleteAllMessagesTextColor, actionItemsFontSize, borderColor }: IProps) => React.JSX.Element;
+declare const Actions: ({ setActionsHeight, channel, actionMenuOpen, theme, menuIsOpen, toggleable, showMuteUnmuteNotifications, muteUnmuteNotificationsOrder, muteNotificationIcon, unmuteNotificationIcon, muteNotificationIconColor, unmuteNotificationIconColor, muteUnmuteNotificationTextColor, timeOptionsToMuteNotifications, showStarredMessages, starredMessagesOrder, staredMessagesIcon, staredMessagesIconColor, staredMessagesTextColor, showPinChannel, pinChannelOrder, pinChannelIcon, unpinChannelIcon, pinChannelIconColor, pinChannelTextColor, showMarkAsReadUnread, markAsReadUnreadOrder, markAsReadIcon, markAsUnreadIcon, markAsReadIconColor, markAsUnreadIconColor, markAsReadUnreadTextColor, showLeaveChannel, leaveChannelOrder, leaveChannelIcon, leaveChannelIconColor, leaveChannelTextColor, showReportChannel, reportChannelIcon, reportChannelOrder, reportChannelIconColor, reportChannelTextColor, showDeleteChannel, deleteChannelIcon, deleteChannelIconColor, deleteChannelTextColor, deleteChannelOrder, showBlockAndLeaveChannel, showBlockUser, blockAndLeaveChannelIcon, unblockUserIcon, blockAndLeaveChannelIconColor, blockAndLeaveChannelTextColor, unblockUserTextColor, showClearHistory, clearHistoryOrder, clearHistoryIcon, clearHistoryTextColor, deleteAllMessagesOrder, deleteAllMessagesIcon, deleteAllMessagesTextColor, actionItemsFontSize, borderColor }: IProps) => React.JSX.Element;
 export default Actions;

package/index.js

@@ -19973,14 +19973,8 @@ var UsersPopup = function UsersPopup(_ref) {
   var _useState5 = React.useState(false),
     isScrolling = _useState5[0],
     setIsScrolling = _useState5[1];
-  var scrollTimeout = React.useRef(null);
   var popupTitleText = channel && (memberDisplayText && memberDisplayText[channel.type] ? "Add " + memberDisplayText[channel.type] + "s" : channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? 'Subscribers' : 'Members');
   var handleMembersListScroll = function handleMembersListScroll(event) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (!userSearchValue && event.target.scrollHeight - event.target.scrollTop <= event.target.offsetHeight + 300) {
       if (!getFromContacts && usersLoadingState === LOADING_STATE.LOADED) {
         dispatch(loadMoreUsersAC(20));
@@ -20189,7 +20183,13 @@ var UsersPopup = function UsersPopup(_ref) {
     className: isScrolling ? 'show-scrollbar' : '',
     isAdd: actionType !== 'createChat',
     selectedMembersHeight: usersContHeight,
-    onScroll: handleMembersListScroll
+    onScroll: handleMembersListScroll,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, filteredUsers.map(function (user) {
     if (actionType === 'addMembers' && memberIds && memberIds.includes(user.id)) {
       return null;
@@ -21397,7 +21397,6 @@ var ChannelList = function ChannelList(_ref) {
   var _useState4 = React.useState(false),
     isScrolling = _useState4[0],
     setIsScrolling = _useState4[1];
-  var scrollTimeout = React.useRef(null);
   var handleSetChannelList = function handleSetChannelList(updatedChannels, isRemove) {
     if (isRemove) {
       var channelsMap = {};
@@ -21424,11 +21423,6 @@ var ChannelList = function ChannelList(_ref) {
     }
   };
   var handleAllChannelsListScroll = function handleAllChannelsListScroll(e) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (!searchValue && channelsHasNext && e.target.scrollTop >= e.target.scrollHeight - e.target.offsetHeight - 200) {
       handleLoadMoreChannels();
     }
@@ -21777,6 +21771,12 @@ var ChannelList = function ChannelList(_ref) {
   }))))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !searchValue && (/*#__PURE__*/React__default.createElement(ChannelsList, {
     ref: channelsScrollRef,
     onScroll: handleAllChannelsListScroll,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    },
     className: isScrolling ? 'show-scrollbar' : ''
   }, channels.map(function (channel) {
     return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
@@ -22973,7 +22973,6 @@ function ForwardMessagePopup(_ref) {
   var _useState4 = React.useState(false),
     isScrolling = _useState4[0],
     setIsScrolling = _useState4[1];
-  var scrollTimeout = React.useRef(null);
   var handleForwardMessage = function handleForwardMessage() {
     handleForward(selectedChannels.map(function (channel) {
       return channel.id;
@@ -22981,11 +22980,6 @@ function ForwardMessagePopup(_ref) {
     togglePopup();
   };
   var handleChannelListScroll = function handleChannelListScroll(event) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
       if (channelsLoading === LOADING_STATE.LOADED && channelsHasNext) {
         dispatch(loadMoreChannelsForForward(15));
@@ -23103,7 +23097,13 @@ function ForwardMessagePopup(_ref) {
   })), /*#__PURE__*/React__default.createElement(ForwardChannelsCont, {
     onScroll: handleChannelListScroll,
     selectedChannelsHeight: selectedChannelsContHeight,
-    className: isScrolling ? 'show-scrollbar' : ''
+    className: isScrolling ? 'show-scrollbar' : '',
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, searchValue ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !!(searchedChannels.chats_groups && searchedChannels.chats_groups.length) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ChannelsGroupTitle, {
     color: textSecondary,
     margin: '0 0 12px'
@@ -24149,13 +24149,7 @@ function ReactionsPopup(_ref) {
   var _useState7 = React.useState(false),
     isScrolling = _useState7[0],
     setIsScrolling = _useState7[1];
-  var scrollTimeout = React.useRef(null);
   var handleReactionsListScroll = function handleReactionsListScroll(event) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100 && reactionsHasNext) {
       if (reactionsLoadingState === LOADING_STATE.LOADED) {
         dispatch(loadMoreReactionsAC(15));
@@ -24225,7 +24219,13 @@ function ReactionsPopup(_ref) {
     backgroundColor: sectionBackgroundColor
   }, /*#__PURE__*/React__default.createElement(ReactionScoresCont, {
     ref: scoresRef,
-    className: isScrolling ? 'show-scrollbar' : ''
+    className: isScrolling ? 'show-scrollbar' : '',
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, /*#__PURE__*/React__default.createElement(ReactionScoresList, {
     borderBottom: reactionsDetailsPopupHeaderItemsStyle !== 'bubbles'
   }, /*#__PURE__*/React__default.createElement(ReactionScoreItem, {
@@ -24253,7 +24253,13 @@ function ReactionsPopup(_ref) {
     className: isScrolling ? 'show-scrollbar' : '',
     scoresHeight: scoresHeight,
     onScroll: handleReactionsListScroll,
-    popupHeight: popupHeight
+    popupHeight: popupHeight,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, reactions.map(function (reaction) {
     return /*#__PURE__*/React__default.createElement(ReactionItem$1, {
       key: reaction.id
@@ -30402,7 +30408,6 @@ var MessageList = function MessageList(_ref2) {
   var _useState6 = React.useState(false),
     isScrolling = _useState6[0],
     setIsScrolling = _useState6[1];
-  var scrollTimeout = React.useRef(null);
   var hideTopDateTimeout = React.useRef(null);
   var _useState7 = React.useState(''),
     lastVisibleMessageId = _useState7[0],
@@ -30442,11 +30447,6 @@ var MessageList = function MessageList(_ref2) {
   };
   var handleMessagesListScroll = function handleMessagesListScroll(event) {
     try {
-      setIsScrolling(true);
-      if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-      scrollTimeout.current = setTimeout(function () {
-        return setIsScrolling(false);
-      }, 400);
       setShowTopDate(true);
       clearTimeout(hideTopDateTimeout.current);
       hideTopDateTimeout.current = setTimeout(function () {
@@ -30865,6 +30865,12 @@ var MessageList = function MessageList(_ref2) {
     ref: scrollRef,
     stopScrolling: stopScrolling,
     onScroll: handleMessagesListScroll,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    },
     onDragEnter: handleDragIn,
     backgroundColor: backgroundColor || themeBackgroundColor
   }, messages.length && messages.length > 0 ? (/*#__PURE__*/React__default.createElement(MessagesBox, {
@@ -35398,7 +35404,8 @@ function SvgUnpin(props) {
 var _templateObject$J, _templateObject2$E, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var _channel$metadata;
-  var channel = _ref.channel,
+  var setActionsHeight = _ref.setActionsHeight,
+    channel = _ref.channel,
     actionMenuOpen = _ref.actionMenuOpen,
     theme = _ref.theme,
     menuIsOpen = _ref.menuIsOpen,
@@ -35601,10 +35608,17 @@ var Actions = function Actions(_ref) {
       dispatch(pinChannelAC(channel.id));
     }
   };
+  var containerRef = React.useRef(null);
+  React.useEffect(function () {
+    if (containerRef.current) {
+      setActionsHeight && setActionsHeight(containerRef.current.offsetHeight);
+    }
+  }, [containerRef.current, showMuteUnmuteNotifications, showStarredMessages, showPinChannel, showMarkAsReadUnread, showLeaveChannel, showBlockAndLeaveChannel, showBlockUser, showReportChannel, showDeleteChannel, showClearHistory]);
   return /*#__PURE__*/React__default.createElement(Container$l, {
     isDirect: isDirectChannel,
     theme: theme,
-    borderColor: borderColor || borderThemeColor
+    borderColor: borderColor || borderThemeColor,
+    ref: containerRef
   }, toggleable && (/*#__PURE__*/React__default.createElement(ActionHeader, {
     onClick: handleActionsOpen
   }, /*#__PURE__*/React__default.createElement(SectionHeader, {
@@ -37579,6 +37593,9 @@ var Details = function Details(_ref) {
   var _useState3 = React.useState(0),
     channelDetailsHeight = _useState3[0],
     setChannelDetailsHeight = _useState3[1];
+  var _useState4 = React.useState(0),
+    actionsHeight = _useState4[0],
+    setActionsHeight = _useState4[1];
   var editMode = reactRedux.useSelector(channelEditModeSelector);
   var activeChannel = reactRedux.useSelector(activeChannelSelector, reactRedux.shallowEqual);
   var _usePermissions = usePermissions(activeChannel ? activeChannel.userRole : ''),
@@ -37587,10 +37604,9 @@ var Details = function Details(_ref) {
   var messagesLoading = reactRedux.useSelector(messagesLoadingState);
   var attachmentsHasNex = reactRedux.useSelector(activeTabAttachmentsHasNextSelector);
   var contactsMap = reactRedux.useSelector(contactsMapSelector);
-  var _useState4 = React.useState(false),
-    isScrolling = _useState4[0],
-    setIsScrolling = _useState4[1];
-  var scrollTimeout = React.useRef(null);
+  var _useState5 = React.useState(false),
+    isScrolling = _useState5[0],
+    setIsScrolling = _useState5[1];
   var detailsRef = React.useRef(null);
   var openTimeOut = React.useRef(null);
   var isDirectChannel = activeChannel && activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
@@ -37601,11 +37617,6 @@ var Details = function Details(_ref) {
     return member.id !== user.id;
   });
   var handleMembersListScroll = function handleMembersListScroll(event) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
       if (activeTab === channelDetailsTabs.member) {
         if (membersLoading === LOADING_STATE.LOADED) {
@@ -37634,7 +37645,7 @@ var Details = function Details(_ref) {
   var handleTabChange = function handleTabChange() {
     if (detailsRef.current) {
       detailsRef.current.scrollTo({
-        top: 350,
+        top: 118 + actionsHeight,
         behavior: 'smooth'
       });
     }
@@ -37676,7 +37687,13 @@ var Details = function Details(_ref) {
     onScroll: handleMembersListScroll,
     heightOffset: detailsRef && detailsRef.current && detailsRef.current.offsetTop,
     height: channelDetailsHeight,
-    ref: detailsRef
+    ref: detailsRef,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, /*#__PURE__*/React__default.createElement(DetailsHeader, {
     borderColor: bordersColor || borderThemeColor
   }, /*#__PURE__*/React__default.createElement(ChannelAvatarAndName, {
@@ -37714,6 +37731,7 @@ var Details = function Details(_ref) {
   }, "About"), /*#__PURE__*/React__default.createElement(AboutChannelText, {
     color: textPrimary
   }, activeChannel && activeChannel.metadata && activeChannel.metadata.d ? activeChannel.metadata.d : '')))), activeChannel && activeChannel.userRole && (/*#__PURE__*/React__default.createElement(Actions, {
+    setActionsHeight: setActionsHeight,
     theme: theme,
     showMuteUnmuteNotifications: showMuteUnmuteNotifications,
     muteUnmuteNotificationsOrder: muteUnmuteNotificationsOrder,

package/index.modern.js

@@ -19950,14 +19950,8 @@ var UsersPopup = function UsersPopup(_ref) {
   var _useState5 = useState(false),
     isScrolling = _useState5[0],
     setIsScrolling = _useState5[1];
-  var scrollTimeout = useRef(null);
   var popupTitleText = channel && (memberDisplayText && memberDisplayText[channel.type] ? "Add " + memberDisplayText[channel.type] + "s" : channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? 'Subscribers' : 'Members');
   var handleMembersListScroll = function handleMembersListScroll(event) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (!userSearchValue && event.target.scrollHeight - event.target.scrollTop <= event.target.offsetHeight + 300) {
       if (!getFromContacts && usersLoadingState === LOADING_STATE.LOADED) {
         dispatch(loadMoreUsersAC(20));
@@ -20166,7 +20160,13 @@ var UsersPopup = function UsersPopup(_ref) {
     className: isScrolling ? 'show-scrollbar' : '',
     isAdd: actionType !== 'createChat',
     selectedMembersHeight: usersContHeight,
-    onScroll: handleMembersListScroll
+    onScroll: handleMembersListScroll,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, filteredUsers.map(function (user) {
     if (actionType === 'addMembers' && memberIds && memberIds.includes(user.id)) {
       return null;
@@ -21374,7 +21374,6 @@ var ChannelList = function ChannelList(_ref) {
   var _useState4 = useState(false),
     isScrolling = _useState4[0],
     setIsScrolling = _useState4[1];
-  var scrollTimeout = useRef(null);
   var handleSetChannelList = function handleSetChannelList(updatedChannels, isRemove) {
     if (isRemove) {
       var channelsMap = {};
@@ -21401,11 +21400,6 @@ var ChannelList = function ChannelList(_ref) {
     }
   };
   var handleAllChannelsListScroll = function handleAllChannelsListScroll(e) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (!searchValue && channelsHasNext && e.target.scrollTop >= e.target.scrollHeight - e.target.offsetHeight - 200) {
       handleLoadMoreChannels();
     }
@@ -21754,6 +21748,12 @@ var ChannelList = function ChannelList(_ref) {
   }))))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !searchValue && (/*#__PURE__*/React__default.createElement(ChannelsList, {
     ref: channelsScrollRef,
     onScroll: handleAllChannelsListScroll,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    },
     className: isScrolling ? 'show-scrollbar' : ''
   }, channels.map(function (channel) {
     return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
@@ -22950,7 +22950,6 @@ function ForwardMessagePopup(_ref) {
   var _useState4 = useState(false),
     isScrolling = _useState4[0],
     setIsScrolling = _useState4[1];
-  var scrollTimeout = useRef(null);
   var handleForwardMessage = function handleForwardMessage() {
     handleForward(selectedChannels.map(function (channel) {
       return channel.id;
@@ -22958,11 +22957,6 @@ function ForwardMessagePopup(_ref) {
     togglePopup();
   };
   var handleChannelListScroll = function handleChannelListScroll(event) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
       if (channelsLoading === LOADING_STATE.LOADED && channelsHasNext) {
         dispatch(loadMoreChannelsForForward(15));
@@ -23080,7 +23074,13 @@ function ForwardMessagePopup(_ref) {
   })), /*#__PURE__*/React__default.createElement(ForwardChannelsCont, {
     onScroll: handleChannelListScroll,
     selectedChannelsHeight: selectedChannelsContHeight,
-    className: isScrolling ? 'show-scrollbar' : ''
+    className: isScrolling ? 'show-scrollbar' : '',
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, searchValue ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !!(searchedChannels.chats_groups && searchedChannels.chats_groups.length) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ChannelsGroupTitle, {
     color: textSecondary,
     margin: '0 0 12px'
@@ -24126,13 +24126,7 @@ function ReactionsPopup(_ref) {
   var _useState7 = useState(false),
     isScrolling = _useState7[0],
     setIsScrolling = _useState7[1];
-  var scrollTimeout = useRef(null);
   var handleReactionsListScroll = function handleReactionsListScroll(event) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100 && reactionsHasNext) {
       if (reactionsLoadingState === LOADING_STATE.LOADED) {
         dispatch(loadMoreReactionsAC(15));
@@ -24202,7 +24196,13 @@ function ReactionsPopup(_ref) {
     backgroundColor: sectionBackgroundColor
   }, /*#__PURE__*/React__default.createElement(ReactionScoresCont, {
     ref: scoresRef,
-    className: isScrolling ? 'show-scrollbar' : ''
+    className: isScrolling ? 'show-scrollbar' : '',
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, /*#__PURE__*/React__default.createElement(ReactionScoresList, {
     borderBottom: reactionsDetailsPopupHeaderItemsStyle !== 'bubbles'
   }, /*#__PURE__*/React__default.createElement(ReactionScoreItem, {
@@ -24230,7 +24230,13 @@ function ReactionsPopup(_ref) {
     className: isScrolling ? 'show-scrollbar' : '',
     scoresHeight: scoresHeight,
     onScroll: handleReactionsListScroll,
-    popupHeight: popupHeight
+    popupHeight: popupHeight,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, reactions.map(function (reaction) {
     return /*#__PURE__*/React__default.createElement(ReactionItem$1, {
       key: reaction.id
@@ -30379,7 +30385,6 @@ var MessageList = function MessageList(_ref2) {
   var _useState6 = useState(false),
     isScrolling = _useState6[0],
     setIsScrolling = _useState6[1];
-  var scrollTimeout = useRef(null);
   var hideTopDateTimeout = useRef(null);
   var _useState7 = useState(''),
     lastVisibleMessageId = _useState7[0],
@@ -30419,11 +30424,6 @@ var MessageList = function MessageList(_ref2) {
   };
   var handleMessagesListScroll = function handleMessagesListScroll(event) {
     try {
-      setIsScrolling(true);
-      if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-      scrollTimeout.current = setTimeout(function () {
-        return setIsScrolling(false);
-      }, 400);
       setShowTopDate(true);
       clearTimeout(hideTopDateTimeout.current);
       hideTopDateTimeout.current = setTimeout(function () {
@@ -30842,6 +30842,12 @@ var MessageList = function MessageList(_ref2) {
     ref: scrollRef,
     stopScrolling: stopScrolling,
     onScroll: handleMessagesListScroll,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    },
     onDragEnter: handleDragIn,
     backgroundColor: backgroundColor || themeBackgroundColor
   }, messages.length && messages.length > 0 ? (/*#__PURE__*/React__default.createElement(MessagesBox, {
@@ -35375,7 +35381,8 @@ function SvgUnpin(props) {
 var _templateObject$J, _templateObject2$E, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var _channel$metadata;
-  var channel = _ref.channel,
+  var setActionsHeight = _ref.setActionsHeight,
+    channel = _ref.channel,
     actionMenuOpen = _ref.actionMenuOpen,
     theme = _ref.theme,
     menuIsOpen = _ref.menuIsOpen,
@@ -35578,10 +35585,17 @@ var Actions = function Actions(_ref) {
       dispatch(pinChannelAC(channel.id));
     }
   };
+  var containerRef = useRef(null);
+  useEffect(function () {
+    if (containerRef.current) {
+      setActionsHeight && setActionsHeight(containerRef.current.offsetHeight);
+    }
+  }, [containerRef.current, showMuteUnmuteNotifications, showStarredMessages, showPinChannel, showMarkAsReadUnread, showLeaveChannel, showBlockAndLeaveChannel, showBlockUser, showReportChannel, showDeleteChannel, showClearHistory]);
   return /*#__PURE__*/React__default.createElement(Container$l, {
     isDirect: isDirectChannel,
     theme: theme,
-    borderColor: borderColor || borderThemeColor
+    borderColor: borderColor || borderThemeColor,
+    ref: containerRef
   }, toggleable && (/*#__PURE__*/React__default.createElement(ActionHeader, {
     onClick: handleActionsOpen
   }, /*#__PURE__*/React__default.createElement(SectionHeader, {
@@ -37556,6 +37570,9 @@ var Details = function Details(_ref) {
   var _useState3 = useState(0),
     channelDetailsHeight = _useState3[0],
     setChannelDetailsHeight = _useState3[1];
+  var _useState4 = useState(0),
+    actionsHeight = _useState4[0],
+    setActionsHeight = _useState4[1];
   var editMode = useSelector(channelEditModeSelector);
   var activeChannel = useSelector(activeChannelSelector, shallowEqual);
   var _usePermissions = usePermissions(activeChannel ? activeChannel.userRole : ''),
@@ -37564,10 +37581,9 @@ var Details = function Details(_ref) {
   var messagesLoading = useSelector(messagesLoadingState);
   var attachmentsHasNex = useSelector(activeTabAttachmentsHasNextSelector);
   var contactsMap = useSelector(contactsMapSelector);
-  var _useState4 = useState(false),
-    isScrolling = _useState4[0],
-    setIsScrolling = _useState4[1];
-  var scrollTimeout = useRef(null);
+  var _useState5 = useState(false),
+    isScrolling = _useState5[0],
+    setIsScrolling = _useState5[1];
   var detailsRef = useRef(null);
   var openTimeOut = useRef(null);
   var isDirectChannel = activeChannel && activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
@@ -37578,11 +37594,6 @@ var Details = function Details(_ref) {
     return member.id !== user.id;
   });
   var handleMembersListScroll = function handleMembersListScroll(event) {
-    setIsScrolling(true);
-    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
-    scrollTimeout.current = setTimeout(function () {
-      return setIsScrolling(false);
-    }, 400);
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
       if (activeTab === channelDetailsTabs.member) {
         if (membersLoading === LOADING_STATE.LOADED) {
@@ -37611,7 +37622,7 @@ var Details = function Details(_ref) {
   var handleTabChange = function handleTabChange() {
     if (detailsRef.current) {
       detailsRef.current.scrollTo({
-        top: 350,
+        top: 118 + actionsHeight,
         behavior: 'smooth'
       });
     }
@@ -37653,7 +37664,13 @@ var Details = function Details(_ref) {
     onScroll: handleMembersListScroll,
     heightOffset: detailsRef && detailsRef.current && detailsRef.current.offsetTop,
     height: channelDetailsHeight,
-    ref: detailsRef
+    ref: detailsRef,
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    }
   }, /*#__PURE__*/React__default.createElement(DetailsHeader, {
     borderColor: bordersColor || borderThemeColor
   }, /*#__PURE__*/React__default.createElement(ChannelAvatarAndName, {
@@ -37691,6 +37708,7 @@ var Details = function Details(_ref) {
   }, "About"), /*#__PURE__*/React__default.createElement(AboutChannelText, {
     color: textPrimary
   }, activeChannel && activeChannel.metadata && activeChannel.metadata.d ? activeChannel.metadata.d : '')))), activeChannel && activeChannel.userRole && (/*#__PURE__*/React__default.createElement(Actions, {
+    setActionsHeight: setActionsHeight,
     theme: theme,
     showMuteUnmuteNotifications: showMuteUnmuteNotifications,
     muteUnmuteNotificationsOrder: muteUnmuteNotificationsOrder,

package/package.json

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