sceyt-chat-react-uikit 1.6.7-beta.3 → 1.6.7-beta.5

package/index.js

@@ -19970,6 +19970,9 @@ var UsersPopup = function UsersPopup(_ref) {
     setFilteredUsers = _useState4[1];
   var memberDisplayText = getChannelTypesMemberDisplayTextMap();
   var channelTypeRoleMap = getDefaultRolesByChannelTypesMap();
+  var _useState5 = React.useState(false),
+    isScrolling = _useState5[0],
+    setIsScrolling = _useState5[1];
   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) {
     if (!userSearchValue && event.target.scrollHeight - event.target.scrollTop <= event.target.offsetHeight + 300) {
@@ -20177,9 +20180,16 @@ var UsersPopup = function UsersPopup(_ref) {
       }
     }));
   }))), /*#__PURE__*/React__default.createElement(MembersContainer, {
+    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;
@@ -20244,7 +20254,7 @@ var UsersPopup = function UsersPopup(_ref) {
   }, actionType === 'selectUsers' ? 'Create' : 'Add')))));
 };
 var List = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  margin-top: 12px;\n  min-height: 150px;\n  box-sizing: border-box;\n"])));
-var MembersContainer = styled__default(List)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  //margin-top: 24px;\n  position: relative;\n  max-height: ", ";\n  overflow-y: auto;\n\n  //width: calc(100% + 16px);\n  padding-right: 16px;\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: #b6b6b6;\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: #555;\n  }\n"])), function (props) {
+var MembersContainer = styled__default(List)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  //margin-top: 24px;\n  position: relative;\n  max-height: ", ";\n  overflow-y: auto;\n\n  //width: calc(100% + 16px);\n  padding-right: 16px;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return "calc(100% - (" + ((props.isAdd ? 67 : 70) + props.selectedMembersHeight) + "px))";
 });
 var SearchUserCont = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin: 24px 12px 0;\n\n  ", " {\n    top: 10px;\n    right: 11px;\n  }\n"])), ClearTypedText);
@@ -21384,6 +21394,9 @@ var ChannelList = function ChannelList(_ref) {
   var _useState3 = React.useState(false),
     profileIsOpen = _useState3[0],
     setProfileIsOpen = _useState3[1];
+  var _useState4 = React.useState(false),
+    isScrolling = _useState4[0],
+    setIsScrolling = _useState4[1];
   var handleSetChannelList = function handleSetChannelList(updatedChannels, isRemove) {
     if (isRemove) {
       var channelsMap = {};
@@ -21757,7 +21770,14 @@ var ChannelList = function ChannelList(_ref) {
     color: textFootnote
   }))))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !searchValue && (/*#__PURE__*/React__default.createElement(ChannelsList, {
     ref: channelsScrollRef,
-    onScroll: handleAllChannelsListScroll
+    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, {
       channel: channel,
@@ -21877,7 +21897,7 @@ var Container$7 = styled__default.div(_templateObject$g || (_templateObject$g =
 }, function (props) {
   return props.withCustomList ? '' : "\n    @media  " + device.laptopL + " {\n      width: 400px;\n      min-width: 400px;\n    }\n ";
 });
-var ChannelsList = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  width: 400px;\n  height: 100%;\n"])));
+var ChannelsList = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  width: 400px;\n  height: 100%;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])));
 var SearchedChannels = styled__default.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  height: calc(100vh - 123px);\n  overflow-x: hidden;\n"])));
 var SearchedChannelsHeader = styled__default.p(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  padding-left: 16px;\n  font-weight: 500;\n  font-size: ", ";\n  line-height: 14px;\n  color: ", ";\n"])), function (props) {
   return props.fontSize || '15px';
@@ -22950,6 +22970,9 @@ function ForwardMessagePopup(_ref) {
     selectedChannels = _useState3[0],
     setSelectedChannels = _useState3[1];
   var selectedChannelsContRef = React.useRef();
+  var _useState4 = React.useState(false),
+    isScrolling = _useState4[0],
+    setIsScrolling = _useState4[1];
   var handleForwardMessage = function handleForwardMessage() {
     handleForward(selectedChannels.map(function (channel) {
       return channel.id;
@@ -23073,7 +23096,14 @@ function ForwardMessagePopup(_ref) {
     }));
   })), /*#__PURE__*/React__default.createElement(ForwardChannelsCont, {
     onScroll: handleChannelListScroll,
-    selectedChannelsHeight: selectedChannelsContHeight
+    selectedChannelsHeight: selectedChannelsContHeight,
+    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'
@@ -23201,7 +23231,7 @@ function ForwardMessagePopup(_ref) {
     onClick: handleForwardMessage
   }, buttonText || 'Forward'))));
 }
-var ForwardChannelsCont = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  margin-top: 16px;\n  max-height: ", ";\n  padding-right: 22px;\n"])), function (props) {
+var ForwardChannelsCont = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  margin-top: 16px;\n  max-height: ", ";\n  padding-right: 22px;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return "calc(100% - " + (props.selectedChannelsHeight + 64) + "px)";
 });
 var ChannelItem = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n  cursor: pointer;\n"])));
@@ -24116,6 +24146,9 @@ function ReactionsPopup(_ref) {
   }
   var user = getClient().user;
   var dispatch = reactRedux.useDispatch();
+  var _useState7 = React.useState(false),
+    isScrolling = _useState7[0],
+    setIsScrolling = _useState7[1];
   var handleReactionsListScroll = function handleReactionsListScroll(event) {
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100 && reactionsHasNext) {
       if (reactionsLoadingState === LOADING_STATE.LOADED) {
@@ -24185,7 +24218,14 @@ function ReactionsPopup(_ref) {
     borderRadius: reactionsDetailsPopupBorderRadius,
     backgroundColor: sectionBackgroundColor
   }, /*#__PURE__*/React__default.createElement(ReactionScoresCont, {
-    ref: scoresRef
+    ref: scoresRef,
+    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, {
@@ -24210,9 +24250,16 @@ function ReactionsPopup(_ref) {
       activeColor: textPrimary
     }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(TabKey, null, reaction.key), reaction.count));
   }))), /*#__PURE__*/React__default.createElement(ReactionsList, {
+    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
@@ -24276,12 +24323,12 @@ var MemberName$1 = styled__default.h3(_templateObject3$g || (_templateObject3$g
 }, function (props) {
   return props.color || colors.gray0;
 });
-var ReactionsList = styled__default.ul(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow: ", ";\n  overflow-x: hidden;\n  list-style: none;\n  transition: all 0.2s;\n  height: ", ";\n    calc(100% - 57px);\n"])), function (props) {
+var ReactionsList = styled__default.ul(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow: ", ";\n  overflow-x: hidden;\n  list-style: none;\n  transition: all 0.2s;\n  height: ", ";\n    calc(100% - 57px);\n\n  &.show-scrollbar {\n    overflow-x: hidden;\n  }\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return !props.popupHeight && 'hidden';
 }, function (props) {
   return "calc(100% - " + (props.scoresHeight || 57) + "px)";
 });
-var ReactionScoresCont = styled__default.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  overflow-y: auto;\n"])));
+var ReactionScoresCont = styled__default.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  overflow-y: auto;\n  &.show-scrollbar {\n    overflow-x: hidden;\n  }\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])));
 var ReactionScoresList = styled__default.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  border-bottom: ", ";\n  padding: 2px 8px 0;\n"])), function (props) {
   return props.borderBottom && "1px solid " + colors.gray1;
 });
@@ -30358,13 +30405,16 @@ var MessageList = function MessageList(_ref2) {
   var _useState5 = React.useState(false),
     stopScrolling = _useState5[0],
     setStopScrolling = _useState5[1];
+  var _useState6 = React.useState(false),
+    isScrolling = _useState6[0],
+    setIsScrolling = _useState6[1];
   var hideTopDateTimeout = React.useRef(null);
-  var _useState6 = React.useState(''),
-    lastVisibleMessageId = _useState6[0],
-    _setLastVisibleMessageId = _useState6[1];
-  var _useState7 = React.useState(null),
-    scrollToReply = _useState7[0],
-    setScrollToReply = _useState7[1];
+  var _useState7 = React.useState(''),
+    lastVisibleMessageId = _useState7[0],
+    _setLastVisibleMessageId = _useState7[1];
+  var _useState8 = React.useState(null),
+    scrollToReply = _useState8[0],
+    setScrollToReply = _useState8[1];
   var messageForReply = {};
   var messageList = React.useMemo(function () {
     return messages;
@@ -30811,9 +30861,16 @@ var MessageList = function MessageList(_ref2) {
     ref: messageTopDateRef
   }))), /*#__PURE__*/React__default.createElement(Container$h, {
     id: 'scrollableDiv',
+    className: isScrolling ? 'show-scrollbar' : '',
     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, {
@@ -31021,7 +31078,7 @@ var MessageList = function MessageList(_ref2) {
     attachmentsPreview: attachmentsPreview
   })))));
 };
-var Container$h = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n"])), function (props) {
+var Container$h = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.backgroundColor;
 });
 var EmptyDiv = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  height: 300px;\n"])));
@@ -37536,6 +37593,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 detailsRef = React.useRef(null);
   var openTimeOut = React.useRef(null);
   var isDirectChannel = activeChannel && activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
@@ -37611,11 +37671,18 @@ var Details = function Details(_ref) {
     editChannelCancelButtonBackgroundColor: editChannelCancelButtonBackgroundColor,
     editChannelCancelButtonTextColor: editChannelCancelButtonTextColor
   })), /*#__PURE__*/React__default.createElement(ChatDetails, {
+    className: isScrolling ? 'show-scrollbar' : '',
     size: size,
     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, {
@@ -37769,7 +37836,7 @@ var Container$t = styled__default.div(_templateObject$U || (_templateObject$U =
 var ChannelDetailsHeader = styled__default.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  position: relative;\n  height: 64px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  & svg {\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.borderColor;
 });
-var ChatDetails = styled__default.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n"])), function (props) {
+var ChatDetails = styled__default.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
 }, function (props) {
   return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';

package/index.modern.js

@@ -19947,6 +19947,9 @@ var UsersPopup = function UsersPopup(_ref) {
     setFilteredUsers = _useState4[1];
   var memberDisplayText = getChannelTypesMemberDisplayTextMap();
   var channelTypeRoleMap = getDefaultRolesByChannelTypesMap();
+  var _useState5 = useState(false),
+    isScrolling = _useState5[0],
+    setIsScrolling = _useState5[1];
   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) {
     if (!userSearchValue && event.target.scrollHeight - event.target.scrollTop <= event.target.offsetHeight + 300) {
@@ -20154,9 +20157,16 @@ var UsersPopup = function UsersPopup(_ref) {
       }
     }));
   }))), /*#__PURE__*/React__default.createElement(MembersContainer, {
+    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;
@@ -20221,7 +20231,7 @@ var UsersPopup = function UsersPopup(_ref) {
   }, actionType === 'selectUsers' ? 'Create' : 'Add')))));
 };
 var List = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  margin-top: 12px;\n  min-height: 150px;\n  box-sizing: border-box;\n"])));
-var MembersContainer = styled(List)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  //margin-top: 24px;\n  position: relative;\n  max-height: ", ";\n  overflow-y: auto;\n\n  //width: calc(100% + 16px);\n  padding-right: 16px;\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: #b6b6b6;\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: #555;\n  }\n"])), function (props) {
+var MembersContainer = styled(List)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  //margin-top: 24px;\n  position: relative;\n  max-height: ", ";\n  overflow-y: auto;\n\n  //width: calc(100% + 16px);\n  padding-right: 16px;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return "calc(100% - (" + ((props.isAdd ? 67 : 70) + props.selectedMembersHeight) + "px))";
 });
 var SearchUserCont = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin: 24px 12px 0;\n\n  ", " {\n    top: 10px;\n    right: 11px;\n  }\n"])), ClearTypedText);
@@ -21361,6 +21371,9 @@ var ChannelList = function ChannelList(_ref) {
   var _useState3 = useState(false),
     profileIsOpen = _useState3[0],
     setProfileIsOpen = _useState3[1];
+  var _useState4 = useState(false),
+    isScrolling = _useState4[0],
+    setIsScrolling = _useState4[1];
   var handleSetChannelList = function handleSetChannelList(updatedChannels, isRemove) {
     if (isRemove) {
       var channelsMap = {};
@@ -21734,7 +21747,14 @@ var ChannelList = function ChannelList(_ref) {
     color: textFootnote
   }))))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !searchValue && (/*#__PURE__*/React__default.createElement(ChannelsList, {
     ref: channelsScrollRef,
-    onScroll: handleAllChannelsListScroll
+    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, {
       channel: channel,
@@ -21854,7 +21874,7 @@ var Container$7 = styled.div(_templateObject$g || (_templateObject$g = _taggedTe
 }, function (props) {
   return props.withCustomList ? '' : "\n    @media  " + device.laptopL + " {\n      width: 400px;\n      min-width: 400px;\n    }\n ";
 });
-var ChannelsList = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  width: 400px;\n  height: 100%;\n"])));
+var ChannelsList = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  width: 400px;\n  height: 100%;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])));
 var SearchedChannels = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  height: calc(100vh - 123px);\n  overflow-x: hidden;\n"])));
 var SearchedChannelsHeader = styled.p(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  padding-left: 16px;\n  font-weight: 500;\n  font-size: ", ";\n  line-height: 14px;\n  color: ", ";\n"])), function (props) {
   return props.fontSize || '15px';
@@ -22927,6 +22947,9 @@ function ForwardMessagePopup(_ref) {
     selectedChannels = _useState3[0],
     setSelectedChannels = _useState3[1];
   var selectedChannelsContRef = useRef();
+  var _useState4 = useState(false),
+    isScrolling = _useState4[0],
+    setIsScrolling = _useState4[1];
   var handleForwardMessage = function handleForwardMessage() {
     handleForward(selectedChannels.map(function (channel) {
       return channel.id;
@@ -23050,7 +23073,14 @@ function ForwardMessagePopup(_ref) {
     }));
   })), /*#__PURE__*/React__default.createElement(ForwardChannelsCont, {
     onScroll: handleChannelListScroll,
-    selectedChannelsHeight: selectedChannelsContHeight
+    selectedChannelsHeight: selectedChannelsContHeight,
+    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'
@@ -23178,7 +23208,7 @@ function ForwardMessagePopup(_ref) {
     onClick: handleForwardMessage
   }, buttonText || 'Forward'))));
 }
-var ForwardChannelsCont = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  margin-top: 16px;\n  max-height: ", ";\n  padding-right: 22px;\n"])), function (props) {
+var ForwardChannelsCont = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  margin-top: 16px;\n  max-height: ", ";\n  padding-right: 22px;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return "calc(100% - " + (props.selectedChannelsHeight + 64) + "px)";
 });
 var ChannelItem = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n  cursor: pointer;\n"])));
@@ -24093,6 +24123,9 @@ function ReactionsPopup(_ref) {
   }
   var user = getClient().user;
   var dispatch = useDispatch();
+  var _useState7 = useState(false),
+    isScrolling = _useState7[0],
+    setIsScrolling = _useState7[1];
   var handleReactionsListScroll = function handleReactionsListScroll(event) {
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100 && reactionsHasNext) {
       if (reactionsLoadingState === LOADING_STATE.LOADED) {
@@ -24162,7 +24195,14 @@ function ReactionsPopup(_ref) {
     borderRadius: reactionsDetailsPopupBorderRadius,
     backgroundColor: sectionBackgroundColor
   }, /*#__PURE__*/React__default.createElement(ReactionScoresCont, {
-    ref: scoresRef
+    ref: scoresRef,
+    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, {
@@ -24187,9 +24227,16 @@ function ReactionsPopup(_ref) {
       activeColor: textPrimary
     }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(TabKey, null, reaction.key), reaction.count));
   }))), /*#__PURE__*/React__default.createElement(ReactionsList, {
+    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
@@ -24253,12 +24300,12 @@ var MemberName$1 = styled.h3(_templateObject3$g || (_templateObject3$g = _tagged
 }, function (props) {
   return props.color || colors.gray0;
 });
-var ReactionsList = styled.ul(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow: ", ";\n  overflow-x: hidden;\n  list-style: none;\n  transition: all 0.2s;\n  height: ", ";\n    calc(100% - 57px);\n"])), function (props) {
+var ReactionsList = styled.ul(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow: ", ";\n  overflow-x: hidden;\n  list-style: none;\n  transition: all 0.2s;\n  height: ", ";\n    calc(100% - 57px);\n\n  &.show-scrollbar {\n    overflow-x: hidden;\n  }\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return !props.popupHeight && 'hidden';
 }, function (props) {
   return "calc(100% - " + (props.scoresHeight || 57) + "px)";
 });
-var ReactionScoresCont = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  overflow-y: auto;\n"])));
+var ReactionScoresCont = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  overflow-y: auto;\n  &.show-scrollbar {\n    overflow-x: hidden;\n  }\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])));
 var ReactionScoresList = styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  border-bottom: ", ";\n  padding: 2px 8px 0;\n"])), function (props) {
   return props.borderBottom && "1px solid " + colors.gray1;
 });
@@ -30335,13 +30382,16 @@ var MessageList = function MessageList(_ref2) {
   var _useState5 = useState(false),
     stopScrolling = _useState5[0],
     setStopScrolling = _useState5[1];
+  var _useState6 = useState(false),
+    isScrolling = _useState6[0],
+    setIsScrolling = _useState6[1];
   var hideTopDateTimeout = useRef(null);
-  var _useState6 = useState(''),
-    lastVisibleMessageId = _useState6[0],
-    _setLastVisibleMessageId = _useState6[1];
-  var _useState7 = useState(null),
-    scrollToReply = _useState7[0],
-    setScrollToReply = _useState7[1];
+  var _useState7 = useState(''),
+    lastVisibleMessageId = _useState7[0],
+    _setLastVisibleMessageId = _useState7[1];
+  var _useState8 = useState(null),
+    scrollToReply = _useState8[0],
+    setScrollToReply = _useState8[1];
   var messageForReply = {};
   var messageList = useMemo(function () {
     return messages;
@@ -30788,9 +30838,16 @@ var MessageList = function MessageList(_ref2) {
     ref: messageTopDateRef
   }))), /*#__PURE__*/React__default.createElement(Container$h, {
     id: 'scrollableDiv',
+    className: isScrolling ? 'show-scrollbar' : '',
     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, {
@@ -30998,7 +31055,7 @@ var MessageList = function MessageList(_ref2) {
     attachmentsPreview: attachmentsPreview
   })))));
 };
-var Container$h = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n"])), function (props) {
+var Container$h = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.backgroundColor;
 });
 var EmptyDiv = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  height: 300px;\n"])));
@@ -37513,6 +37570,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 detailsRef = useRef(null);
   var openTimeOut = useRef(null);
   var isDirectChannel = activeChannel && activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
@@ -37588,11 +37648,18 @@ var Details = function Details(_ref) {
     editChannelCancelButtonBackgroundColor: editChannelCancelButtonBackgroundColor,
     editChannelCancelButtonTextColor: editChannelCancelButtonTextColor
   })), /*#__PURE__*/React__default.createElement(ChatDetails, {
+    className: isScrolling ? 'show-scrollbar' : '',
     size: size,
     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, {
@@ -37746,7 +37813,7 @@ var Container$t = styled.div(_templateObject$U || (_templateObject$U = _taggedTe
 var ChannelDetailsHeader = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  position: relative;\n  height: 64px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  & svg {\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.borderColor;
 });
-var ChatDetails = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n"])), function (props) {
+var ChatDetails = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: #818c99;\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
 }, function (props) {
   return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';

package/package.json

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