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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/index.js +103 -26
  2. package/index.modern.js +103 -26
  3. package/package.json +1 -1
package/index.js CHANGED
@@ -19970,8 +19970,17 @@ var UsersPopup = function UsersPopup(_ref) {
19970
19970
  setFilteredUsers = _useState4[1];
19971
19971
  var memberDisplayText = getChannelTypesMemberDisplayTextMap();
19972
19972
  var channelTypeRoleMap = getDefaultRolesByChannelTypesMap();
19973
+ var _useState5 = React.useState(false),
19974
+ isScrolling = _useState5[0],
19975
+ setIsScrolling = _useState5[1];
19976
+ var scrollTimeout = React.useRef(null);
19973
19977
  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');
19974
19978
  var handleMembersListScroll = function handleMembersListScroll(event) {
19979
+ setIsScrolling(true);
19980
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
19981
+ scrollTimeout.current = setTimeout(function () {
19982
+ return setIsScrolling(false);
19983
+ }, 400);
19975
19984
  if (!userSearchValue && event.target.scrollHeight - event.target.scrollTop <= event.target.offsetHeight + 300) {
19976
19985
  if (!getFromContacts && usersLoadingState === LOADING_STATE.LOADED) {
19977
19986
  dispatch(loadMoreUsersAC(20));
@@ -20177,6 +20186,7 @@ var UsersPopup = function UsersPopup(_ref) {
20177
20186
  }
20178
20187
  }));
20179
20188
  }))), /*#__PURE__*/React__default.createElement(MembersContainer, {
20189
+ className: isScrolling ? 'show-scrollbar' : '',
20180
20190
  isAdd: actionType !== 'createChat',
20181
20191
  selectedMembersHeight: usersContHeight,
20182
20192
  onScroll: handleMembersListScroll
@@ -20244,7 +20254,7 @@ var UsersPopup = function UsersPopup(_ref) {
20244
20254
  }, actionType === 'selectUsers' ? 'Create' : 'Add')))));
20245
20255
  };
20246
20256
  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"])));
20247
- 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) {
20257
+ 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) {
20248
20258
  return "calc(100% - (" + ((props.isAdd ? 67 : 70) + props.selectedMembersHeight) + "px))";
20249
20259
  });
20250
20260
  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,10 @@ var ChannelList = function ChannelList(_ref) {
21384
21394
  var _useState3 = React.useState(false),
21385
21395
  profileIsOpen = _useState3[0],
21386
21396
  setProfileIsOpen = _useState3[1];
21397
+ var _useState4 = React.useState(false),
21398
+ isScrolling = _useState4[0],
21399
+ setIsScrolling = _useState4[1];
21400
+ var scrollTimeout = React.useRef(null);
21387
21401
  var handleSetChannelList = function handleSetChannelList(updatedChannels, isRemove) {
21388
21402
  if (isRemove) {
21389
21403
  var channelsMap = {};
@@ -21410,6 +21424,11 @@ var ChannelList = function ChannelList(_ref) {
21410
21424
  }
21411
21425
  };
21412
21426
  var handleAllChannelsListScroll = function handleAllChannelsListScroll(e) {
21427
+ setIsScrolling(true);
21428
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
21429
+ scrollTimeout.current = setTimeout(function () {
21430
+ return setIsScrolling(false);
21431
+ }, 400);
21413
21432
  if (!searchValue && channelsHasNext && e.target.scrollTop >= e.target.scrollHeight - e.target.offsetHeight - 200) {
21414
21433
  handleLoadMoreChannels();
21415
21434
  }
@@ -21757,7 +21776,8 @@ var ChannelList = function ChannelList(_ref) {
21757
21776
  color: textFootnote
21758
21777
  }))))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !searchValue && (/*#__PURE__*/React__default.createElement(ChannelsList, {
21759
21778
  ref: channelsScrollRef,
21760
- onScroll: handleAllChannelsListScroll
21779
+ onScroll: handleAllChannelsListScroll,
21780
+ className: isScrolling ? 'show-scrollbar' : ''
21761
21781
  }, channels.map(function (channel) {
21762
21782
  return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
21763
21783
  channel: channel,
@@ -21877,7 +21897,7 @@ var Container$7 = styled__default.div(_templateObject$g || (_templateObject$g =
21877
21897
  }, function (props) {
21878
21898
  return props.withCustomList ? '' : "\n @media " + device.laptopL + " {\n width: 400px;\n min-width: 400px;\n }\n ";
21879
21899
  });
21880
- var ChannelsList = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n overflow-y: auto;\n width: 400px;\n height: 100%;\n"])));
21900
+ 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"])));
21881
21901
  var SearchedChannels = styled__default.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n height: calc(100vh - 123px);\n overflow-x: hidden;\n"])));
21882
21902
  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) {
21883
21903
  return props.fontSize || '15px';
@@ -22950,6 +22970,10 @@ function ForwardMessagePopup(_ref) {
22950
22970
  selectedChannels = _useState3[0],
22951
22971
  setSelectedChannels = _useState3[1];
22952
22972
  var selectedChannelsContRef = React.useRef();
22973
+ var _useState4 = React.useState(false),
22974
+ isScrolling = _useState4[0],
22975
+ setIsScrolling = _useState4[1];
22976
+ var scrollTimeout = React.useRef(null);
22953
22977
  var handleForwardMessage = function handleForwardMessage() {
22954
22978
  handleForward(selectedChannels.map(function (channel) {
22955
22979
  return channel.id;
@@ -22957,6 +22981,11 @@ function ForwardMessagePopup(_ref) {
22957
22981
  togglePopup();
22958
22982
  };
22959
22983
  var handleChannelListScroll = function handleChannelListScroll(event) {
22984
+ setIsScrolling(true);
22985
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
22986
+ scrollTimeout.current = setTimeout(function () {
22987
+ return setIsScrolling(false);
22988
+ }, 400);
22960
22989
  if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
22961
22990
  if (channelsLoading === LOADING_STATE.LOADED && channelsHasNext) {
22962
22991
  dispatch(loadMoreChannelsForForward(15));
@@ -23073,7 +23102,8 @@ function ForwardMessagePopup(_ref) {
23073
23102
  }));
23074
23103
  })), /*#__PURE__*/React__default.createElement(ForwardChannelsCont, {
23075
23104
  onScroll: handleChannelListScroll,
23076
- selectedChannelsHeight: selectedChannelsContHeight
23105
+ selectedChannelsHeight: selectedChannelsContHeight,
23106
+ className: isScrolling ? 'show-scrollbar' : ''
23077
23107
  }, 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, {
23078
23108
  color: textSecondary,
23079
23109
  margin: '0 0 12px'
@@ -23201,7 +23231,7 @@ function ForwardMessagePopup(_ref) {
23201
23231
  onClick: handleForwardMessage
23202
23232
  }, buttonText || 'Forward'))));
23203
23233
  }
23204
- 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) {
23234
+ 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) {
23205
23235
  return "calc(100% - " + (props.selectedChannelsHeight + 64) + "px)";
23206
23236
  });
23207
23237
  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"])));
@@ -24080,7 +24110,8 @@ function ReactionsPopup(_ref) {
24080
24110
  var _useColor = useColors(),
24081
24111
  accentColor = _useColor[THEME_COLORS.ACCENT],
24082
24112
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
24083
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
24113
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
24114
+ sectionBackgroundColor = _useColor[THEME_COLORS.SECTION_BACKGROUND];
24084
24115
  var popupRef = React.useRef(null);
24085
24116
  var scoresRef = React.useRef(null);
24086
24117
  var reactions = reactRedux.useSelector(reactionsListSelector, reactRedux.shallowEqual);
@@ -24115,7 +24146,16 @@ function ReactionsPopup(_ref) {
24115
24146
  }
24116
24147
  var user = getClient().user;
24117
24148
  var dispatch = reactRedux.useDispatch();
24149
+ var _useState7 = React.useState(false),
24150
+ isScrolling = _useState7[0],
24151
+ setIsScrolling = _useState7[1];
24152
+ var scrollTimeout = React.useRef(null);
24118
24153
  var handleReactionsListScroll = function handleReactionsListScroll(event) {
24154
+ setIsScrolling(true);
24155
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
24156
+ scrollTimeout.current = setTimeout(function () {
24157
+ return setIsScrolling(false);
24158
+ }, 400);
24119
24159
  if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100 && reactionsHasNext) {
24120
24160
  if (reactionsLoadingState === LOADING_STATE.LOADED) {
24121
24161
  dispatch(loadMoreReactionsAC(15));
@@ -24167,7 +24207,7 @@ function ReactionsPopup(_ref) {
24167
24207
  if (reactions && reactions.length) {
24168
24208
  if (calculateSizes) {
24169
24209
  var botPost = bottomPosition - messageInputHeight - 40;
24170
- var _reactionsHeight = reactions.length * 44 + 45;
24210
+ var _reactionsHeight = reactions.length * 50 + 45;
24171
24211
  setPopupHeight(_reactionsHeight);
24172
24212
  setPopupVerticalPosition(botPost >= (_reactionsHeight > 320 ? 320 : _reactionsHeight) ? 'bottom' : 'top');
24173
24213
  setCalculateSizes(false);
@@ -24181,9 +24221,11 @@ function ReactionsPopup(_ref) {
24181
24221
  height: popupHeight,
24182
24222
  visible: !calculateSizes,
24183
24223
  rtlDirection: rtlDirection,
24184
- borderRadius: reactionsDetailsPopupBorderRadius
24224
+ borderRadius: reactionsDetailsPopupBorderRadius,
24225
+ backgroundColor: sectionBackgroundColor
24185
24226
  }, /*#__PURE__*/React__default.createElement(ReactionScoresCont, {
24186
- ref: scoresRef
24227
+ ref: scoresRef,
24228
+ className: isScrolling ? 'show-scrollbar' : ''
24187
24229
  }, /*#__PURE__*/React__default.createElement(ReactionScoresList, {
24188
24230
  borderBottom: reactionsDetailsPopupHeaderItemsStyle !== 'bubbles'
24189
24231
  }, /*#__PURE__*/React__default.createElement(ReactionScoreItem, {
@@ -24208,6 +24250,7 @@ function ReactionsPopup(_ref) {
24208
24250
  activeColor: textPrimary
24209
24251
  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(TabKey, null, reaction.key), reaction.count));
24210
24252
  }))), /*#__PURE__*/React__default.createElement(ReactionsList, {
24253
+ className: isScrolling ? 'show-scrollbar' : '',
24211
24254
  scoresHeight: scoresHeight,
24212
24255
  onScroll: handleReactionsListScroll,
24213
24256
  popupHeight: popupHeight
@@ -24220,7 +24263,9 @@ function ReactionsPopup(_ref) {
24220
24263
  size: 40,
24221
24264
  textSize: 14,
24222
24265
  setDefaultAvatar: true
24223
- })), /*#__PURE__*/React__default.createElement(UserNamePresence$1, null, /*#__PURE__*/React__default.createElement(MemberName$1, null, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
24266
+ })), /*#__PURE__*/React__default.createElement(UserNamePresence$1, null, /*#__PURE__*/React__default.createElement(MemberName$1, {
24267
+ color: textPrimary
24268
+ }, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
24224
24269
  color: textSecondary
24225
24270
  }, reaction.user.presence && reaction.user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : reaction.user.presence && reaction.user.presence.lastActiveAt && userLastActiveDateFormat(reaction.user.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, {
24226
24271
  onClick: function onClick() {
@@ -24229,7 +24274,7 @@ function ReactionsPopup(_ref) {
24229
24274
  }, reaction.key));
24230
24275
  })));
24231
24276
  }
24232
- var Container$d = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n position: absolute;\n /*right: ", ";*/\n right: ", ";\n /*left: ", ";*/\n left: ", ";\n top: ", ";\n bottom: ", ";\n width: 340px;\n height: ", "px;\n //overflow: ", ";\n overflow: hidden;\n max-height: 320px;\n background: #ffffff;\n //border: 1px solid #dfe0eb;\n box-shadow:\n 0 6px 24px -6px rgba(15, 34, 67, 0.12),\n 0px 1px 3px rgba(24, 23, 37, 0.14);\n box-sizing: border-box;\n //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n border-radius: ", ";\n visibility: ", ";\n transition: all 0.2s;\n\n direction: initial;\n z-index: 12;\n &::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n\n right: ", ";\n left: ", ";\n top: ", ";\n bottom: ", ";\n transform: rotate(45deg);\n box-shadow: ", ";\n border-radius: 2px;\n visibility: ", ";\n transition-delay: 150ms;\n transition-property: visibility;\n\n background: ", ";\n }\n"])), function (props) {
24277
+ var Container$d = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n position: absolute;\n /*right: ", ";*/\n right: ", ";\n /*left: ", ";*/\n left: ", ";\n top: ", ";\n bottom: ", ";\n width: 340px;\n height: ", "px;\n //overflow: ", ";\n overflow: hidden;\n max-height: 320px;\n background: ", ";\n //border: 1px solid #dfe0eb;\n box-shadow:\n 0 6px 24px -6px rgba(15, 34, 67, 0.12),\n 0px 1px 3px rgba(24, 23, 37, 0.14);\n box-sizing: border-box;\n //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n border-radius: ", ";\n visibility: ", ";\n transition: all 0.2s;\n\n direction: initial;\n z-index: 12;\n &::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n\n right: ", ";\n left: ", ";\n top: ", ";\n bottom: ", ";\n transform: rotate(45deg);\n box-shadow: ", ";\n border-radius: 2px;\n visibility: ", ";\n transition-delay: 150ms;\n transition-property: visibility;\n\n background: ", ";\n }\n"])), function (props) {
24233
24278
  return props.popupHorizontalPosition === 'left' && (props.rtlDirection ? 'calc(100% - 80px)' : 0);
24234
24279
  }, function (props) {
24235
24280
  return props.rtlDirection && 0;
@@ -24245,6 +24290,8 @@ var Container$d = styled__default.div(_templateObject$q || (_templateObject$q =
24245
24290
  return props.height && props.height + 22;
24246
24291
  }, function (props) {
24247
24292
  return !props.height && 'hidden';
24293
+ }, function (props) {
24294
+ return props.backgroundColor || colors.white;
24248
24295
  }, function (props) {
24249
24296
  return props.borderRadius || '12px';
24250
24297
  }, function (props) {
@@ -24261,15 +24308,21 @@ var Container$d = styled__default.div(_templateObject$q || (_templateObject$q =
24261
24308
  return props.popupVerticalPosition === 'top' ? '4px 4px 5px -4px rgba(15, 34, 67, 0.12)' : '-4px -4px 5px -4px rgba(15, 34, 67, 0.12)';
24262
24309
  }, function (props) {
24263
24310
  return props.visible ? 'visible' : 'hidden';
24264
- }, colors.white);
24311
+ }, function (props) {
24312
+ return props.backgroundColor || colors.white;
24313
+ });
24265
24314
  var UserNamePresence$1 = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n width: 100%;\n margin-left: 12px;\n"])));
24266
- var MemberName$1 = styled__default.h3(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n margin: 0;\n max-width: calc(100% - 1px);\n font-weight: 500;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n\n & > span {\n color: #abadb7;\n }\n"])));
24267
- 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) {
24315
+ var MemberName$1 = styled__default.h3(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n margin: 0;\n max-width: calc(100% - 47px);\n font-weight: 500;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n color: ", ";\n & > span {\n color: ", ";\n }\n"])), function (props) {
24316
+ return props.color || colors.gray0;
24317
+ }, function (props) {
24318
+ return props.color || colors.gray0;
24319
+ });
24320
+ 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) {
24268
24321
  return !props.popupHeight && 'hidden';
24269
24322
  }, function (props) {
24270
24323
  return "calc(100% - " + (props.scoresHeight || 57) + "px)";
24271
24324
  });
24272
- var ReactionScoresCont = styled__default.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n overflow-y: auto;\n"])));
24325
+ 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"])));
24273
24326
  var ReactionScoresList = styled__default.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n display: flex;\n border-bottom: ", ";\n padding: 2px 8px 0;\n"])), function (props) {
24274
24327
  return props.borderBottom && "1px solid " + colors.gray1;
24275
24328
  });
@@ -30346,13 +30399,17 @@ var MessageList = function MessageList(_ref2) {
30346
30399
  var _useState5 = React.useState(false),
30347
30400
  stopScrolling = _useState5[0],
30348
30401
  setStopScrolling = _useState5[1];
30402
+ var _useState6 = React.useState(false),
30403
+ isScrolling = _useState6[0],
30404
+ setIsScrolling = _useState6[1];
30405
+ var scrollTimeout = React.useRef(null);
30349
30406
  var hideTopDateTimeout = React.useRef(null);
30350
- var _useState6 = React.useState(''),
30351
- lastVisibleMessageId = _useState6[0],
30352
- _setLastVisibleMessageId = _useState6[1];
30353
- var _useState7 = React.useState(null),
30354
- scrollToReply = _useState7[0],
30355
- setScrollToReply = _useState7[1];
30407
+ var _useState7 = React.useState(''),
30408
+ lastVisibleMessageId = _useState7[0],
30409
+ _setLastVisibleMessageId = _useState7[1];
30410
+ var _useState8 = React.useState(null),
30411
+ scrollToReply = _useState8[0],
30412
+ setScrollToReply = _useState8[1];
30356
30413
  var messageForReply = {};
30357
30414
  var messageList = React.useMemo(function () {
30358
30415
  return messages;
@@ -30385,6 +30442,11 @@ var MessageList = function MessageList(_ref2) {
30385
30442
  };
30386
30443
  var handleMessagesListScroll = function handleMessagesListScroll(event) {
30387
30444
  try {
30445
+ setIsScrolling(true);
30446
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
30447
+ scrollTimeout.current = setTimeout(function () {
30448
+ return setIsScrolling(false);
30449
+ }, 400);
30388
30450
  setShowTopDate(true);
30389
30451
  clearTimeout(hideTopDateTimeout.current);
30390
30452
  hideTopDateTimeout.current = setTimeout(function () {
@@ -30799,6 +30861,7 @@ var MessageList = function MessageList(_ref2) {
30799
30861
  ref: messageTopDateRef
30800
30862
  }))), /*#__PURE__*/React__default.createElement(Container$h, {
30801
30863
  id: 'scrollableDiv',
30864
+ className: isScrolling ? 'show-scrollbar' : '',
30802
30865
  ref: scrollRef,
30803
30866
  stopScrolling: stopScrolling,
30804
30867
  onScroll: handleMessagesListScroll,
@@ -31009,7 +31072,7 @@ var MessageList = function MessageList(_ref2) {
31009
31072
  attachmentsPreview: attachmentsPreview
31010
31073
  })))));
31011
31074
  };
31012
- 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) {
31075
+ 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) {
31013
31076
  return props.backgroundColor;
31014
31077
  });
31015
31078
  var EmptyDiv = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n height: 300px;\n"])));
@@ -34741,7 +34804,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34741
34804
  backgroundColor: hoverBackground,
34742
34805
  marginLeft: '16px'
34743
34806
  }, /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null), "Delete"), /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
34744
- onClick: handleCloseSelectMessages
34807
+ onClick: handleCloseSelectMessages,
34808
+ color: textPrimary
34745
34809
  }, /*#__PURE__*/React__default.createElement(SvgClose, null)), forwardPopupOpen && (/*#__PURE__*/React__default.createElement(ForwardMessagePopup, {
34746
34810
  handleForward: handleForwardMessage,
34747
34811
  togglePopup: handleToggleForwardMessagePopup,
@@ -35132,7 +35196,9 @@ var CustomButton = styled__default.span(_templateObject33$1 || (_templateObject3
35132
35196
  }, function (props) {
35133
35197
  return props.marginLeft || '8px';
35134
35198
  });
35135
- var CloseIconWrapper = styled__default.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n cursor: pointer;\n margin-left: auto;\n padding: 10px;\n"])));
35199
+ var CloseIconWrapper = styled__default.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n cursor: pointer;\n margin-left: auto;\n padding: 10px;\n color: ", ";\n"])), function (props) {
35200
+ return props.color || colors.primary;
35201
+ });
35136
35202
 
35137
35203
  var _path$1c;
35138
35204
  function _extends$1g() {
@@ -37521,6 +37587,10 @@ var Details = function Details(_ref) {
37521
37587
  var messagesLoading = reactRedux.useSelector(messagesLoadingState);
37522
37588
  var attachmentsHasNex = reactRedux.useSelector(activeTabAttachmentsHasNextSelector);
37523
37589
  var contactsMap = reactRedux.useSelector(contactsMapSelector);
37590
+ var _useState4 = React.useState(false),
37591
+ isScrolling = _useState4[0],
37592
+ setIsScrolling = _useState4[1];
37593
+ var scrollTimeout = React.useRef(null);
37524
37594
  var detailsRef = React.useRef(null);
37525
37595
  var openTimeOut = React.useRef(null);
37526
37596
  var isDirectChannel = activeChannel && activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
@@ -37531,6 +37601,11 @@ var Details = function Details(_ref) {
37531
37601
  return member.id !== user.id;
37532
37602
  });
37533
37603
  var handleMembersListScroll = function handleMembersListScroll(event) {
37604
+ setIsScrolling(true);
37605
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
37606
+ scrollTimeout.current = setTimeout(function () {
37607
+ return setIsScrolling(false);
37608
+ }, 400);
37534
37609
  if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
37535
37610
  if (activeTab === channelDetailsTabs.member) {
37536
37611
  if (membersLoading === LOADING_STATE.LOADED) {
@@ -37575,7 +37650,8 @@ var Details = function Details(_ref) {
37575
37650
  }, editMode ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgArrowLeft, {
37576
37651
  onClick: function onClick() {
37577
37652
  return setEditMode(false);
37578
- }
37653
+ },
37654
+ color: textPrimary
37579
37655
  }), /*#__PURE__*/React__default.createElement(SectionHeader, {
37580
37656
  fontSize: detailsTitleFontSize,
37581
37657
  margin: '0 0 0 12px',
@@ -37595,6 +37671,7 @@ var Details = function Details(_ref) {
37595
37671
  editChannelCancelButtonBackgroundColor: editChannelCancelButtonBackgroundColor,
37596
37672
  editChannelCancelButtonTextColor: editChannelCancelButtonTextColor
37597
37673
  })), /*#__PURE__*/React__default.createElement(ChatDetails, {
37674
+ className: isScrolling ? 'show-scrollbar' : '',
37598
37675
  size: size,
37599
37676
  onScroll: handleMembersListScroll,
37600
37677
  heightOffset: detailsRef && detailsRef.current && detailsRef.current.offsetTop,
@@ -37753,7 +37830,7 @@ var Container$t = styled__default.div(_templateObject$U || (_templateObject$U =
37753
37830
  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) {
37754
37831
  return props.borderColor;
37755
37832
  });
37756
- 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) {
37833
+ 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) {
37757
37834
  return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
37758
37835
  }, function (props) {
37759
37836
  return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';
package/index.modern.js CHANGED
@@ -19947,8 +19947,17 @@ var UsersPopup = function UsersPopup(_ref) {
19947
19947
  setFilteredUsers = _useState4[1];
19948
19948
  var memberDisplayText = getChannelTypesMemberDisplayTextMap();
19949
19949
  var channelTypeRoleMap = getDefaultRolesByChannelTypesMap();
19950
+ var _useState5 = useState(false),
19951
+ isScrolling = _useState5[0],
19952
+ setIsScrolling = _useState5[1];
19953
+ var scrollTimeout = useRef(null);
19950
19954
  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');
19951
19955
  var handleMembersListScroll = function handleMembersListScroll(event) {
19956
+ setIsScrolling(true);
19957
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
19958
+ scrollTimeout.current = setTimeout(function () {
19959
+ return setIsScrolling(false);
19960
+ }, 400);
19952
19961
  if (!userSearchValue && event.target.scrollHeight - event.target.scrollTop <= event.target.offsetHeight + 300) {
19953
19962
  if (!getFromContacts && usersLoadingState === LOADING_STATE.LOADED) {
19954
19963
  dispatch(loadMoreUsersAC(20));
@@ -20154,6 +20163,7 @@ var UsersPopup = function UsersPopup(_ref) {
20154
20163
  }
20155
20164
  }));
20156
20165
  }))), /*#__PURE__*/React__default.createElement(MembersContainer, {
20166
+ className: isScrolling ? 'show-scrollbar' : '',
20157
20167
  isAdd: actionType !== 'createChat',
20158
20168
  selectedMembersHeight: usersContHeight,
20159
20169
  onScroll: handleMembersListScroll
@@ -20221,7 +20231,7 @@ var UsersPopup = function UsersPopup(_ref) {
20221
20231
  }, actionType === 'selectUsers' ? 'Create' : 'Add')))));
20222
20232
  };
20223
20233
  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"])));
20224
- 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) {
20234
+ 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) {
20225
20235
  return "calc(100% - (" + ((props.isAdd ? 67 : 70) + props.selectedMembersHeight) + "px))";
20226
20236
  });
20227
20237
  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,10 @@ var ChannelList = function ChannelList(_ref) {
21361
21371
  var _useState3 = useState(false),
21362
21372
  profileIsOpen = _useState3[0],
21363
21373
  setProfileIsOpen = _useState3[1];
21374
+ var _useState4 = useState(false),
21375
+ isScrolling = _useState4[0],
21376
+ setIsScrolling = _useState4[1];
21377
+ var scrollTimeout = useRef(null);
21364
21378
  var handleSetChannelList = function handleSetChannelList(updatedChannels, isRemove) {
21365
21379
  if (isRemove) {
21366
21380
  var channelsMap = {};
@@ -21387,6 +21401,11 @@ var ChannelList = function ChannelList(_ref) {
21387
21401
  }
21388
21402
  };
21389
21403
  var handleAllChannelsListScroll = function handleAllChannelsListScroll(e) {
21404
+ setIsScrolling(true);
21405
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
21406
+ scrollTimeout.current = setTimeout(function () {
21407
+ return setIsScrolling(false);
21408
+ }, 400);
21390
21409
  if (!searchValue && channelsHasNext && e.target.scrollTop >= e.target.scrollHeight - e.target.offsetHeight - 200) {
21391
21410
  handleLoadMoreChannels();
21392
21411
  }
@@ -21734,7 +21753,8 @@ var ChannelList = function ChannelList(_ref) {
21734
21753
  color: textFootnote
21735
21754
  }))))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !searchValue && (/*#__PURE__*/React__default.createElement(ChannelsList, {
21736
21755
  ref: channelsScrollRef,
21737
- onScroll: handleAllChannelsListScroll
21756
+ onScroll: handleAllChannelsListScroll,
21757
+ className: isScrolling ? 'show-scrollbar' : ''
21738
21758
  }, channels.map(function (channel) {
21739
21759
  return ListItem ? (/*#__PURE__*/React__default.createElement(ListItem, {
21740
21760
  channel: channel,
@@ -21854,7 +21874,7 @@ var Container$7 = styled.div(_templateObject$g || (_templateObject$g = _taggedTe
21854
21874
  }, function (props) {
21855
21875
  return props.withCustomList ? '' : "\n @media " + device.laptopL + " {\n width: 400px;\n min-width: 400px;\n }\n ";
21856
21876
  });
21857
- var ChannelsList = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n overflow-y: auto;\n width: 400px;\n height: 100%;\n"])));
21877
+ 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"])));
21858
21878
  var SearchedChannels = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n height: calc(100vh - 123px);\n overflow-x: hidden;\n"])));
21859
21879
  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) {
21860
21880
  return props.fontSize || '15px';
@@ -22927,6 +22947,10 @@ function ForwardMessagePopup(_ref) {
22927
22947
  selectedChannels = _useState3[0],
22928
22948
  setSelectedChannels = _useState3[1];
22929
22949
  var selectedChannelsContRef = useRef();
22950
+ var _useState4 = useState(false),
22951
+ isScrolling = _useState4[0],
22952
+ setIsScrolling = _useState4[1];
22953
+ var scrollTimeout = useRef(null);
22930
22954
  var handleForwardMessage = function handleForwardMessage() {
22931
22955
  handleForward(selectedChannels.map(function (channel) {
22932
22956
  return channel.id;
@@ -22934,6 +22958,11 @@ function ForwardMessagePopup(_ref) {
22934
22958
  togglePopup();
22935
22959
  };
22936
22960
  var handleChannelListScroll = function handleChannelListScroll(event) {
22961
+ setIsScrolling(true);
22962
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
22963
+ scrollTimeout.current = setTimeout(function () {
22964
+ return setIsScrolling(false);
22965
+ }, 400);
22937
22966
  if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
22938
22967
  if (channelsLoading === LOADING_STATE.LOADED && channelsHasNext) {
22939
22968
  dispatch(loadMoreChannelsForForward(15));
@@ -23050,7 +23079,8 @@ function ForwardMessagePopup(_ref) {
23050
23079
  }));
23051
23080
  })), /*#__PURE__*/React__default.createElement(ForwardChannelsCont, {
23052
23081
  onScroll: handleChannelListScroll,
23053
- selectedChannelsHeight: selectedChannelsContHeight
23082
+ selectedChannelsHeight: selectedChannelsContHeight,
23083
+ className: isScrolling ? 'show-scrollbar' : ''
23054
23084
  }, 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, {
23055
23085
  color: textSecondary,
23056
23086
  margin: '0 0 12px'
@@ -23178,7 +23208,7 @@ function ForwardMessagePopup(_ref) {
23178
23208
  onClick: handleForwardMessage
23179
23209
  }, buttonText || 'Forward'))));
23180
23210
  }
23181
- 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) {
23211
+ 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) {
23182
23212
  return "calc(100% - " + (props.selectedChannelsHeight + 64) + "px)";
23183
23213
  });
23184
23214
  var ChannelItem = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n cursor: pointer;\n"])));
@@ -24057,7 +24087,8 @@ function ReactionsPopup(_ref) {
24057
24087
  var _useColor = useColors(),
24058
24088
  accentColor = _useColor[THEME_COLORS.ACCENT],
24059
24089
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
24060
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
24090
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
24091
+ sectionBackgroundColor = _useColor[THEME_COLORS.SECTION_BACKGROUND];
24061
24092
  var popupRef = useRef(null);
24062
24093
  var scoresRef = useRef(null);
24063
24094
  var reactions = useSelector(reactionsListSelector, shallowEqual);
@@ -24092,7 +24123,16 @@ function ReactionsPopup(_ref) {
24092
24123
  }
24093
24124
  var user = getClient().user;
24094
24125
  var dispatch = useDispatch();
24126
+ var _useState7 = useState(false),
24127
+ isScrolling = _useState7[0],
24128
+ setIsScrolling = _useState7[1];
24129
+ var scrollTimeout = useRef(null);
24095
24130
  var handleReactionsListScroll = function handleReactionsListScroll(event) {
24131
+ setIsScrolling(true);
24132
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
24133
+ scrollTimeout.current = setTimeout(function () {
24134
+ return setIsScrolling(false);
24135
+ }, 400);
24096
24136
  if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100 && reactionsHasNext) {
24097
24137
  if (reactionsLoadingState === LOADING_STATE.LOADED) {
24098
24138
  dispatch(loadMoreReactionsAC(15));
@@ -24144,7 +24184,7 @@ function ReactionsPopup(_ref) {
24144
24184
  if (reactions && reactions.length) {
24145
24185
  if (calculateSizes) {
24146
24186
  var botPost = bottomPosition - messageInputHeight - 40;
24147
- var _reactionsHeight = reactions.length * 44 + 45;
24187
+ var _reactionsHeight = reactions.length * 50 + 45;
24148
24188
  setPopupHeight(_reactionsHeight);
24149
24189
  setPopupVerticalPosition(botPost >= (_reactionsHeight > 320 ? 320 : _reactionsHeight) ? 'bottom' : 'top');
24150
24190
  setCalculateSizes(false);
@@ -24158,9 +24198,11 @@ function ReactionsPopup(_ref) {
24158
24198
  height: popupHeight,
24159
24199
  visible: !calculateSizes,
24160
24200
  rtlDirection: rtlDirection,
24161
- borderRadius: reactionsDetailsPopupBorderRadius
24201
+ borderRadius: reactionsDetailsPopupBorderRadius,
24202
+ backgroundColor: sectionBackgroundColor
24162
24203
  }, /*#__PURE__*/React__default.createElement(ReactionScoresCont, {
24163
- ref: scoresRef
24204
+ ref: scoresRef,
24205
+ className: isScrolling ? 'show-scrollbar' : ''
24164
24206
  }, /*#__PURE__*/React__default.createElement(ReactionScoresList, {
24165
24207
  borderBottom: reactionsDetailsPopupHeaderItemsStyle !== 'bubbles'
24166
24208
  }, /*#__PURE__*/React__default.createElement(ReactionScoreItem, {
@@ -24185,6 +24227,7 @@ function ReactionsPopup(_ref) {
24185
24227
  activeColor: textPrimary
24186
24228
  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(TabKey, null, reaction.key), reaction.count));
24187
24229
  }))), /*#__PURE__*/React__default.createElement(ReactionsList, {
24230
+ className: isScrolling ? 'show-scrollbar' : '',
24188
24231
  scoresHeight: scoresHeight,
24189
24232
  onScroll: handleReactionsListScroll,
24190
24233
  popupHeight: popupHeight
@@ -24197,7 +24240,9 @@ function ReactionsPopup(_ref) {
24197
24240
  size: 40,
24198
24241
  textSize: 14,
24199
24242
  setDefaultAvatar: true
24200
- })), /*#__PURE__*/React__default.createElement(UserNamePresence$1, null, /*#__PURE__*/React__default.createElement(MemberName$1, null, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
24243
+ })), /*#__PURE__*/React__default.createElement(UserNamePresence$1, null, /*#__PURE__*/React__default.createElement(MemberName$1, {
24244
+ color: textPrimary
24245
+ }, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
24201
24246
  color: textSecondary
24202
24247
  }, reaction.user.presence && reaction.user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : reaction.user.presence && reaction.user.presence.lastActiveAt && userLastActiveDateFormat(reaction.user.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, {
24203
24248
  onClick: function onClick() {
@@ -24206,7 +24251,7 @@ function ReactionsPopup(_ref) {
24206
24251
  }, reaction.key));
24207
24252
  })));
24208
24253
  }
24209
- var Container$d = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n position: absolute;\n /*right: ", ";*/\n right: ", ";\n /*left: ", ";*/\n left: ", ";\n top: ", ";\n bottom: ", ";\n width: 340px;\n height: ", "px;\n //overflow: ", ";\n overflow: hidden;\n max-height: 320px;\n background: #ffffff;\n //border: 1px solid #dfe0eb;\n box-shadow:\n 0 6px 24px -6px rgba(15, 34, 67, 0.12),\n 0px 1px 3px rgba(24, 23, 37, 0.14);\n box-sizing: border-box;\n //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n border-radius: ", ";\n visibility: ", ";\n transition: all 0.2s;\n\n direction: initial;\n z-index: 12;\n &::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n\n right: ", ";\n left: ", ";\n top: ", ";\n bottom: ", ";\n transform: rotate(45deg);\n box-shadow: ", ";\n border-radius: 2px;\n visibility: ", ";\n transition-delay: 150ms;\n transition-property: visibility;\n\n background: ", ";\n }\n"])), function (props) {
24254
+ var Container$d = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n position: absolute;\n /*right: ", ";*/\n right: ", ";\n /*left: ", ";*/\n left: ", ";\n top: ", ";\n bottom: ", ";\n width: 340px;\n height: ", "px;\n //overflow: ", ";\n overflow: hidden;\n max-height: 320px;\n background: ", ";\n //border: 1px solid #dfe0eb;\n box-shadow:\n 0 6px 24px -6px rgba(15, 34, 67, 0.12),\n 0px 1px 3px rgba(24, 23, 37, 0.14);\n box-sizing: border-box;\n //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n border-radius: ", ";\n visibility: ", ";\n transition: all 0.2s;\n\n direction: initial;\n z-index: 12;\n &::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n\n right: ", ";\n left: ", ";\n top: ", ";\n bottom: ", ";\n transform: rotate(45deg);\n box-shadow: ", ";\n border-radius: 2px;\n visibility: ", ";\n transition-delay: 150ms;\n transition-property: visibility;\n\n background: ", ";\n }\n"])), function (props) {
24210
24255
  return props.popupHorizontalPosition === 'left' && (props.rtlDirection ? 'calc(100% - 80px)' : 0);
24211
24256
  }, function (props) {
24212
24257
  return props.rtlDirection && 0;
@@ -24222,6 +24267,8 @@ var Container$d = styled.div(_templateObject$q || (_templateObject$q = _taggedTe
24222
24267
  return props.height && props.height + 22;
24223
24268
  }, function (props) {
24224
24269
  return !props.height && 'hidden';
24270
+ }, function (props) {
24271
+ return props.backgroundColor || colors.white;
24225
24272
  }, function (props) {
24226
24273
  return props.borderRadius || '12px';
24227
24274
  }, function (props) {
@@ -24238,15 +24285,21 @@ var Container$d = styled.div(_templateObject$q || (_templateObject$q = _taggedTe
24238
24285
  return props.popupVerticalPosition === 'top' ? '4px 4px 5px -4px rgba(15, 34, 67, 0.12)' : '-4px -4px 5px -4px rgba(15, 34, 67, 0.12)';
24239
24286
  }, function (props) {
24240
24287
  return props.visible ? 'visible' : 'hidden';
24241
- }, colors.white);
24288
+ }, function (props) {
24289
+ return props.backgroundColor || colors.white;
24290
+ });
24242
24291
  var UserNamePresence$1 = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n width: 100%;\n margin-left: 12px;\n"])));
24243
- var MemberName$1 = styled.h3(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n margin: 0;\n max-width: calc(100% - 1px);\n font-weight: 500;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n\n & > span {\n color: #abadb7;\n }\n"])));
24244
- 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) {
24292
+ var MemberName$1 = styled.h3(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n margin: 0;\n max-width: calc(100% - 47px);\n font-weight: 500;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n color: ", ";\n & > span {\n color: ", ";\n }\n"])), function (props) {
24293
+ return props.color || colors.gray0;
24294
+ }, function (props) {
24295
+ return props.color || colors.gray0;
24296
+ });
24297
+ 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) {
24245
24298
  return !props.popupHeight && 'hidden';
24246
24299
  }, function (props) {
24247
24300
  return "calc(100% - " + (props.scoresHeight || 57) + "px)";
24248
24301
  });
24249
- var ReactionScoresCont = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n overflow-y: auto;\n"])));
24302
+ 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"])));
24250
24303
  var ReactionScoresList = styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n display: flex;\n border-bottom: ", ";\n padding: 2px 8px 0;\n"])), function (props) {
24251
24304
  return props.borderBottom && "1px solid " + colors.gray1;
24252
24305
  });
@@ -30323,13 +30376,17 @@ var MessageList = function MessageList(_ref2) {
30323
30376
  var _useState5 = useState(false),
30324
30377
  stopScrolling = _useState5[0],
30325
30378
  setStopScrolling = _useState5[1];
30379
+ var _useState6 = useState(false),
30380
+ isScrolling = _useState6[0],
30381
+ setIsScrolling = _useState6[1];
30382
+ var scrollTimeout = useRef(null);
30326
30383
  var hideTopDateTimeout = useRef(null);
30327
- var _useState6 = useState(''),
30328
- lastVisibleMessageId = _useState6[0],
30329
- _setLastVisibleMessageId = _useState6[1];
30330
- var _useState7 = useState(null),
30331
- scrollToReply = _useState7[0],
30332
- setScrollToReply = _useState7[1];
30384
+ var _useState7 = useState(''),
30385
+ lastVisibleMessageId = _useState7[0],
30386
+ _setLastVisibleMessageId = _useState7[1];
30387
+ var _useState8 = useState(null),
30388
+ scrollToReply = _useState8[0],
30389
+ setScrollToReply = _useState8[1];
30333
30390
  var messageForReply = {};
30334
30391
  var messageList = useMemo(function () {
30335
30392
  return messages;
@@ -30362,6 +30419,11 @@ var MessageList = function MessageList(_ref2) {
30362
30419
  };
30363
30420
  var handleMessagesListScroll = function handleMessagesListScroll(event) {
30364
30421
  try {
30422
+ setIsScrolling(true);
30423
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
30424
+ scrollTimeout.current = setTimeout(function () {
30425
+ return setIsScrolling(false);
30426
+ }, 400);
30365
30427
  setShowTopDate(true);
30366
30428
  clearTimeout(hideTopDateTimeout.current);
30367
30429
  hideTopDateTimeout.current = setTimeout(function () {
@@ -30776,6 +30838,7 @@ var MessageList = function MessageList(_ref2) {
30776
30838
  ref: messageTopDateRef
30777
30839
  }))), /*#__PURE__*/React__default.createElement(Container$h, {
30778
30840
  id: 'scrollableDiv',
30841
+ className: isScrolling ? 'show-scrollbar' : '',
30779
30842
  ref: scrollRef,
30780
30843
  stopScrolling: stopScrolling,
30781
30844
  onScroll: handleMessagesListScroll,
@@ -30986,7 +31049,7 @@ var MessageList = function MessageList(_ref2) {
30986
31049
  attachmentsPreview: attachmentsPreview
30987
31050
  })))));
30988
31051
  };
30989
- 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) {
31052
+ 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) {
30990
31053
  return props.backgroundColor;
30991
31054
  });
30992
31055
  var EmptyDiv = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n height: 300px;\n"])));
@@ -34718,7 +34781,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34718
34781
  backgroundColor: hoverBackground,
34719
34782
  marginLeft: '16px'
34720
34783
  }, /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null), "Delete"), /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
34721
- onClick: handleCloseSelectMessages
34784
+ onClick: handleCloseSelectMessages,
34785
+ color: textPrimary
34722
34786
  }, /*#__PURE__*/React__default.createElement(SvgClose, null)), forwardPopupOpen && (/*#__PURE__*/React__default.createElement(ForwardMessagePopup, {
34723
34787
  handleForward: handleForwardMessage,
34724
34788
  togglePopup: handleToggleForwardMessagePopup,
@@ -35109,7 +35173,9 @@ var CustomButton = styled.span(_templateObject33$1 || (_templateObject33$1 = _ta
35109
35173
  }, function (props) {
35110
35174
  return props.marginLeft || '8px';
35111
35175
  });
35112
- var CloseIconWrapper = styled.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n cursor: pointer;\n margin-left: auto;\n padding: 10px;\n"])));
35176
+ var CloseIconWrapper = styled.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n cursor: pointer;\n margin-left: auto;\n padding: 10px;\n color: ", ";\n"])), function (props) {
35177
+ return props.color || colors.primary;
35178
+ });
35113
35179
 
35114
35180
  var _path$1c;
35115
35181
  function _extends$1g() {
@@ -37498,6 +37564,10 @@ var Details = function Details(_ref) {
37498
37564
  var messagesLoading = useSelector(messagesLoadingState);
37499
37565
  var attachmentsHasNex = useSelector(activeTabAttachmentsHasNextSelector);
37500
37566
  var contactsMap = useSelector(contactsMapSelector);
37567
+ var _useState4 = useState(false),
37568
+ isScrolling = _useState4[0],
37569
+ setIsScrolling = _useState4[1];
37570
+ var scrollTimeout = useRef(null);
37501
37571
  var detailsRef = useRef(null);
37502
37572
  var openTimeOut = useRef(null);
37503
37573
  var isDirectChannel = activeChannel && activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
@@ -37508,6 +37578,11 @@ var Details = function Details(_ref) {
37508
37578
  return member.id !== user.id;
37509
37579
  });
37510
37580
  var handleMembersListScroll = function handleMembersListScroll(event) {
37581
+ setIsScrolling(true);
37582
+ if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
37583
+ scrollTimeout.current = setTimeout(function () {
37584
+ return setIsScrolling(false);
37585
+ }, 400);
37511
37586
  if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
37512
37587
  if (activeTab === channelDetailsTabs.member) {
37513
37588
  if (membersLoading === LOADING_STATE.LOADED) {
@@ -37552,7 +37627,8 @@ var Details = function Details(_ref) {
37552
37627
  }, editMode ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgArrowLeft, {
37553
37628
  onClick: function onClick() {
37554
37629
  return setEditMode(false);
37555
- }
37630
+ },
37631
+ color: textPrimary
37556
37632
  }), /*#__PURE__*/React__default.createElement(SectionHeader, {
37557
37633
  fontSize: detailsTitleFontSize,
37558
37634
  margin: '0 0 0 12px',
@@ -37572,6 +37648,7 @@ var Details = function Details(_ref) {
37572
37648
  editChannelCancelButtonBackgroundColor: editChannelCancelButtonBackgroundColor,
37573
37649
  editChannelCancelButtonTextColor: editChannelCancelButtonTextColor
37574
37650
  })), /*#__PURE__*/React__default.createElement(ChatDetails, {
37651
+ className: isScrolling ? 'show-scrollbar' : '',
37575
37652
  size: size,
37576
37653
  onScroll: handleMembersListScroll,
37577
37654
  heightOffset: detailsRef && detailsRef.current && detailsRef.current.offsetTop,
@@ -37730,7 +37807,7 @@ var Container$t = styled.div(_templateObject$U || (_templateObject$U = _taggedTe
37730
37807
  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) {
37731
37808
  return props.borderColor;
37732
37809
  });
37733
- 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) {
37810
+ 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) {
37734
37811
  return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
37735
37812
  }, function (props) {
37736
37813
  return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.6.7-beta.2",
3
+ "version": "1.6.7-beta.4",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",