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

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 +53 -20
  2. package/index.modern.js +53 -20
  3. package/package.json +1 -1
package/index.js CHANGED
@@ -24080,7 +24080,8 @@ function ReactionsPopup(_ref) {
24080
24080
  var _useColor = useColors(),
24081
24081
  accentColor = _useColor[THEME_COLORS.ACCENT],
24082
24082
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
24083
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
24083
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
24084
+ sectionBackgroundColor = _useColor[THEME_COLORS.SECTION_BACKGROUND];
24084
24085
  var popupRef = React.useRef(null);
24085
24086
  var scoresRef = React.useRef(null);
24086
24087
  var reactions = reactRedux.useSelector(reactionsListSelector, reactRedux.shallowEqual);
@@ -24167,7 +24168,7 @@ function ReactionsPopup(_ref) {
24167
24168
  if (reactions && reactions.length) {
24168
24169
  if (calculateSizes) {
24169
24170
  var botPost = bottomPosition - messageInputHeight - 40;
24170
- var _reactionsHeight = reactions.length * 44 + 45;
24171
+ var _reactionsHeight = reactions.length * 50 + 45;
24171
24172
  setPopupHeight(_reactionsHeight);
24172
24173
  setPopupVerticalPosition(botPost >= (_reactionsHeight > 320 ? 320 : _reactionsHeight) ? 'bottom' : 'top');
24173
24174
  setCalculateSizes(false);
@@ -24181,7 +24182,8 @@ function ReactionsPopup(_ref) {
24181
24182
  height: popupHeight,
24182
24183
  visible: !calculateSizes,
24183
24184
  rtlDirection: rtlDirection,
24184
- borderRadius: reactionsDetailsPopupBorderRadius
24185
+ borderRadius: reactionsDetailsPopupBorderRadius,
24186
+ backgroundColor: sectionBackgroundColor
24185
24187
  }, /*#__PURE__*/React__default.createElement(ReactionScoresCont, {
24186
24188
  ref: scoresRef
24187
24189
  }, /*#__PURE__*/React__default.createElement(ReactionScoresList, {
@@ -24220,7 +24222,9 @@ function ReactionsPopup(_ref) {
24220
24222
  size: 40,
24221
24223
  textSize: 14,
24222
24224
  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, {
24225
+ })), /*#__PURE__*/React__default.createElement(UserNamePresence$1, null, /*#__PURE__*/React__default.createElement(MemberName$1, {
24226
+ color: textPrimary
24227
+ }, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
24224
24228
  color: textSecondary
24225
24229
  }, 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
24230
  onClick: function onClick() {
@@ -24229,7 +24233,7 @@ function ReactionsPopup(_ref) {
24229
24233
  }, reaction.key));
24230
24234
  })));
24231
24235
  }
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) {
24236
+ 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
24237
  return props.popupHorizontalPosition === 'left' && (props.rtlDirection ? 'calc(100% - 80px)' : 0);
24234
24238
  }, function (props) {
24235
24239
  return props.rtlDirection && 0;
@@ -24245,6 +24249,8 @@ var Container$d = styled__default.div(_templateObject$q || (_templateObject$q =
24245
24249
  return props.height && props.height + 22;
24246
24250
  }, function (props) {
24247
24251
  return !props.height && 'hidden';
24252
+ }, function (props) {
24253
+ return props.backgroundColor || colors.white;
24248
24254
  }, function (props) {
24249
24255
  return props.borderRadius || '12px';
24250
24256
  }, function (props) {
@@ -24261,9 +24267,15 @@ var Container$d = styled__default.div(_templateObject$q || (_templateObject$q =
24261
24267
  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
24268
  }, function (props) {
24263
24269
  return props.visible ? 'visible' : 'hidden';
24264
- }, colors.white);
24270
+ }, function (props) {
24271
+ return props.backgroundColor || colors.white;
24272
+ });
24265
24273
  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"])));
24274
+ 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) {
24275
+ return props.color || colors.gray0;
24276
+ }, function (props) {
24277
+ return props.color || colors.gray0;
24278
+ });
24267
24279
  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) {
24268
24280
  return !props.popupHeight && 'hidden';
24269
24281
  }, function (props) {
@@ -34741,7 +34753,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34741
34753
  backgroundColor: hoverBackground,
34742
34754
  marginLeft: '16px'
34743
34755
  }, /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null), "Delete"), /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
34744
- onClick: handleCloseSelectMessages
34756
+ onClick: handleCloseSelectMessages,
34757
+ color: textPrimary
34745
34758
  }, /*#__PURE__*/React__default.createElement(SvgClose, null)), forwardPopupOpen && (/*#__PURE__*/React__default.createElement(ForwardMessagePopup, {
34746
34759
  handleForward: handleForwardMessage,
34747
34760
  togglePopup: handleToggleForwardMessagePopup,
@@ -35132,7 +35145,9 @@ var CustomButton = styled__default.span(_templateObject33$1 || (_templateObject3
35132
35145
  }, function (props) {
35133
35146
  return props.marginLeft || '8px';
35134
35147
  });
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"])));
35148
+ 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) {
35149
+ return props.color || colors.primary;
35150
+ });
35136
35151
 
35137
35152
  var _path$1c;
35138
35153
  function _extends$1g() {
@@ -36156,7 +36171,8 @@ var Members = function Members(_ref) {
36156
36171
  color: textPrimary,
36157
36172
  hoverBackground: hoverBackgroundColor || hoverBackground,
36158
36173
  addMemberIconColor: accentColor,
36159
- fontSize: addMemberFontSize
36174
+ fontSize: addMemberFontSize,
36175
+ addMemberBackground: hoverBackground
36160
36176
  }, addMemberIcon || /*#__PURE__*/React__default.createElement(SvgAddMember, null), "Add " + displayMemberText)), !!members.length && members.map(function (member, index) {
36161
36177
  return /*#__PURE__*/React__default.createElement(MemberItem$1, {
36162
36178
  key: member.id + index,
@@ -36282,12 +36298,14 @@ var MemberNameWrapper = styled__default.div(_templateObject4$t || (_templateObje
36282
36298
  var MemberName$3 = styled__default.h4(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n margin: 0;\n font-weight: 400;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
36283
36299
  var EditMemberIcon = styled__default.span(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n margin-left: auto;\n cursor: pointer;\n padding: 15px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n"])));
36284
36300
  var MembersList = styled__default.ul(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n list-style: none;\n transition: all 0.2s;\n"])));
36285
- var MemberItem$1 = styled__default.li(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n font-weight: 500;\n padding: 6px 16px;\n transition: all 0.2s;\n color: ", ";\n cursor: pointer;\n\n &:first-child {\n cursor: pointer;\n\n > svg {\n color: ", ";\n margin-right: 12px;\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n\n & .dropdown-wrapper {\n margin-left: auto;\n }\n\n & ", " {\n width: 12px;\n height: 12px;\n right: -1px;\n bottom: -1px;\n }\n"])), function (props) {
36301
+ var MemberItem$1 = styled__default.li(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n font-weight: 500;\n padding: 6px 16px;\n transition: all 0.2s;\n color: ", ";\n cursor: pointer;\n\n &:first-child {\n cursor: pointer;\n\n > svg {\n color: ", ";\n margin-right: 12px;\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n\n & .dropdown-wrapper {\n margin-left: auto;\n }\n\n & ", " {\n width: 12px;\n height: 12px;\n right: -1px;\n bottom: -1px;\n }\n"])), function (props) {
36286
36302
  return props.fontSize || '15px';
36287
36303
  }, function (props) {
36288
36304
  return props.color;
36289
36305
  }, function (props) {
36290
36306
  return props.addMemberIconColor || colors.primary;
36307
+ }, function (props) {
36308
+ return props.addMemberBackground || 'transparent';
36291
36309
  }, function (props) {
36292
36310
  return props.hoverBackground || colors.gray0;
36293
36311
  }, EditMemberIcon, UserStatus);
@@ -36777,7 +36795,9 @@ var VoiceItem = function VoiceItem(_ref) {
36777
36795
  voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor;
36778
36796
  var _useColor = useColors(),
36779
36797
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
36780
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
36798
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
36799
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
36800
+ backgroundColor = _useColor[THEME_COLORS.BACKGROUND];
36781
36801
  var dispatch = reactRedux.useDispatch();
36782
36802
  var playingAudioId = reactRedux.useSelector(playingAudioIdSelector);
36783
36803
  var getFromContacts = getShowOnlyContactUsers();
@@ -36856,15 +36876,19 @@ var VoiceItem = function VoiceItem(_ref) {
36856
36876
  onMouseLeave: function onMouseLeave(e) {
36857
36877
  return e.currentTarget.classList.remove('isHover');
36858
36878
  },
36859
- hoverBackgroundColor: voicePreviewHoverBackgroundColor
36879
+ hoverBackgroundColor: voicePreviewHoverBackgroundColor || hoverBackground
36860
36880
  }, audioIsPlaying ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont$1, {
36861
- onClick: handlePlayPause
36881
+ onClick: handlePlayPause,
36882
+ fill: hoverBackground
36862
36883
  }, voicePreviewPauseIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewPause, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont$1, {
36863
- onClick: handlePlayPause
36884
+ onClick: handlePlayPause,
36885
+ fill: backgroundColor
36864
36886
  }, voicePreviewPauseHoverIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewPauseHover, null)))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont$1, {
36865
- onClick: handlePlayPause
36887
+ onClick: handlePlayPause,
36888
+ fill: hoverBackground
36866
36889
  }, voicePreviewPlayIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreview, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont$1, {
36867
- onClick: handlePlayPause
36890
+ onClick: handlePlayPause,
36891
+ fill: backgroundColor
36868
36892
  }, voicePreviewPlayHoverIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewHoverIcon, null)))), /*#__PURE__*/React__default.createElement(AudioInfo, null, /*#__PURE__*/React__default.createElement(AudioTitle, {
36869
36893
  color: voicePreviewTitleColor || textPrimary
36870
36894
  }, file.user && (file.user.id === user.id ? 'You' : makeUsername(contactsMap[file.user.id], file.user, getFromContacts))), /*#__PURE__*/React__default.createElement(AudioDate, {
@@ -36883,8 +36907,16 @@ var VoiceItem = function VoiceItem(_ref) {
36883
36907
  type: 'audio/mpeg'
36884
36908
  })));
36885
36909
  };
36886
- var FileIconCont$1 = styled__default.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n"])));
36887
- var FileHoverIconCont$1 = styled__default.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n"])));
36910
+ var FileIconCont$1 = styled__default.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n fill: ", ";\n rect {\n fill: ", ";\n }\n"])), function (props) {
36911
+ return props.fill || 'transparent';
36912
+ }, function (props) {
36913
+ return props.fill || 'transparent';
36914
+ });
36915
+ var FileHoverIconCont$1 = styled__default.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n fill: ", ";\n rect {\n fill: ", ";\n }\n"])), function (props) {
36916
+ return props.fill || 'transparent';
36917
+ }, function (props) {
36918
+ return props.fill || 'transparent';
36919
+ });
36888
36920
  var FileItem$2 = styled__default.li(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n padding: 9px 16px;\n display: flex;\n align-items: center;\n text-decoration: none;\n\n &:hover {\n background-color: ", ";\n }\n div {\n margin-left: 12px;\n width: 100%;\n }\n img {\n width: 42px;\n height: 42px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n border-radius: 6px;\n }\n\n &.isHover {\n & ", " {\n display: none;\n }\n & ", " {\n display: inline-flex;\n }\n }\n"])), function (props) {
36889
36921
  return props.hoverBackgroundColor || colors.gray0;
36890
36922
  }, FileIconCont$1, FileHoverIconCont$1);
@@ -37558,7 +37590,8 @@ var Details = function Details(_ref) {
37558
37590
  }, editMode ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgArrowLeft, {
37559
37591
  onClick: function onClick() {
37560
37592
  return setEditMode(false);
37561
- }
37593
+ },
37594
+ color: textPrimary
37562
37595
  }), /*#__PURE__*/React__default.createElement(SectionHeader, {
37563
37596
  fontSize: detailsTitleFontSize,
37564
37597
  margin: '0 0 0 12px',
package/index.modern.js CHANGED
@@ -24057,7 +24057,8 @@ function ReactionsPopup(_ref) {
24057
24057
  var _useColor = useColors(),
24058
24058
  accentColor = _useColor[THEME_COLORS.ACCENT],
24059
24059
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
24060
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
24060
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
24061
+ sectionBackgroundColor = _useColor[THEME_COLORS.SECTION_BACKGROUND];
24061
24062
  var popupRef = useRef(null);
24062
24063
  var scoresRef = useRef(null);
24063
24064
  var reactions = useSelector(reactionsListSelector, shallowEqual);
@@ -24144,7 +24145,7 @@ function ReactionsPopup(_ref) {
24144
24145
  if (reactions && reactions.length) {
24145
24146
  if (calculateSizes) {
24146
24147
  var botPost = bottomPosition - messageInputHeight - 40;
24147
- var _reactionsHeight = reactions.length * 44 + 45;
24148
+ var _reactionsHeight = reactions.length * 50 + 45;
24148
24149
  setPopupHeight(_reactionsHeight);
24149
24150
  setPopupVerticalPosition(botPost >= (_reactionsHeight > 320 ? 320 : _reactionsHeight) ? 'bottom' : 'top');
24150
24151
  setCalculateSizes(false);
@@ -24158,7 +24159,8 @@ function ReactionsPopup(_ref) {
24158
24159
  height: popupHeight,
24159
24160
  visible: !calculateSizes,
24160
24161
  rtlDirection: rtlDirection,
24161
- borderRadius: reactionsDetailsPopupBorderRadius
24162
+ borderRadius: reactionsDetailsPopupBorderRadius,
24163
+ backgroundColor: sectionBackgroundColor
24162
24164
  }, /*#__PURE__*/React__default.createElement(ReactionScoresCont, {
24163
24165
  ref: scoresRef
24164
24166
  }, /*#__PURE__*/React__default.createElement(ReactionScoresList, {
@@ -24197,7 +24199,9 @@ function ReactionsPopup(_ref) {
24197
24199
  size: 40,
24198
24200
  textSize: 14,
24199
24201
  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, {
24202
+ })), /*#__PURE__*/React__default.createElement(UserNamePresence$1, null, /*#__PURE__*/React__default.createElement(MemberName$1, {
24203
+ color: textPrimary
24204
+ }, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
24201
24205
  color: textSecondary
24202
24206
  }, 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
24207
  onClick: function onClick() {
@@ -24206,7 +24210,7 @@ function ReactionsPopup(_ref) {
24206
24210
  }, reaction.key));
24207
24211
  })));
24208
24212
  }
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) {
24213
+ 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
24214
  return props.popupHorizontalPosition === 'left' && (props.rtlDirection ? 'calc(100% - 80px)' : 0);
24211
24215
  }, function (props) {
24212
24216
  return props.rtlDirection && 0;
@@ -24222,6 +24226,8 @@ var Container$d = styled.div(_templateObject$q || (_templateObject$q = _taggedTe
24222
24226
  return props.height && props.height + 22;
24223
24227
  }, function (props) {
24224
24228
  return !props.height && 'hidden';
24229
+ }, function (props) {
24230
+ return props.backgroundColor || colors.white;
24225
24231
  }, function (props) {
24226
24232
  return props.borderRadius || '12px';
24227
24233
  }, function (props) {
@@ -24238,9 +24244,15 @@ var Container$d = styled.div(_templateObject$q || (_templateObject$q = _taggedTe
24238
24244
  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
24245
  }, function (props) {
24240
24246
  return props.visible ? 'visible' : 'hidden';
24241
- }, colors.white);
24247
+ }, function (props) {
24248
+ return props.backgroundColor || colors.white;
24249
+ });
24242
24250
  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"])));
24251
+ 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) {
24252
+ return props.color || colors.gray0;
24253
+ }, function (props) {
24254
+ return props.color || colors.gray0;
24255
+ });
24244
24256
  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) {
24245
24257
  return !props.popupHeight && 'hidden';
24246
24258
  }, function (props) {
@@ -34718,7 +34730,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34718
34730
  backgroundColor: hoverBackground,
34719
34731
  marginLeft: '16px'
34720
34732
  }, /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null), "Delete"), /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
34721
- onClick: handleCloseSelectMessages
34733
+ onClick: handleCloseSelectMessages,
34734
+ color: textPrimary
34722
34735
  }, /*#__PURE__*/React__default.createElement(SvgClose, null)), forwardPopupOpen && (/*#__PURE__*/React__default.createElement(ForwardMessagePopup, {
34723
34736
  handleForward: handleForwardMessage,
34724
34737
  togglePopup: handleToggleForwardMessagePopup,
@@ -35109,7 +35122,9 @@ var CustomButton = styled.span(_templateObject33$1 || (_templateObject33$1 = _ta
35109
35122
  }, function (props) {
35110
35123
  return props.marginLeft || '8px';
35111
35124
  });
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"])));
35125
+ 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) {
35126
+ return props.color || colors.primary;
35127
+ });
35113
35128
 
35114
35129
  var _path$1c;
35115
35130
  function _extends$1g() {
@@ -36133,7 +36148,8 @@ var Members = function Members(_ref) {
36133
36148
  color: textPrimary,
36134
36149
  hoverBackground: hoverBackgroundColor || hoverBackground,
36135
36150
  addMemberIconColor: accentColor,
36136
- fontSize: addMemberFontSize
36151
+ fontSize: addMemberFontSize,
36152
+ addMemberBackground: hoverBackground
36137
36153
  }, addMemberIcon || /*#__PURE__*/React__default.createElement(SvgAddMember, null), "Add " + displayMemberText)), !!members.length && members.map(function (member, index) {
36138
36154
  return /*#__PURE__*/React__default.createElement(MemberItem$1, {
36139
36155
  key: member.id + index,
@@ -36259,12 +36275,14 @@ var MemberNameWrapper = styled.div(_templateObject4$t || (_templateObject4$t = _
36259
36275
  var MemberName$3 = styled.h4(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n margin: 0;\n font-weight: 400;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
36260
36276
  var EditMemberIcon = styled.span(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n margin-left: auto;\n cursor: pointer;\n padding: 15px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n"])));
36261
36277
  var MembersList = styled.ul(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n list-style: none;\n transition: all 0.2s;\n"])));
36262
- var MemberItem$1 = styled.li(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n font-weight: 500;\n padding: 6px 16px;\n transition: all 0.2s;\n color: ", ";\n cursor: pointer;\n\n &:first-child {\n cursor: pointer;\n\n > svg {\n color: ", ";\n margin-right: 12px;\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n\n & .dropdown-wrapper {\n margin-left: auto;\n }\n\n & ", " {\n width: 12px;\n height: 12px;\n right: -1px;\n bottom: -1px;\n }\n"])), function (props) {
36278
+ var MemberItem$1 = styled.li(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n font-weight: 500;\n padding: 6px 16px;\n transition: all 0.2s;\n color: ", ";\n cursor: pointer;\n\n &:first-child {\n cursor: pointer;\n\n > svg {\n color: ", ";\n margin-right: 12px;\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n\n & .dropdown-wrapper {\n margin-left: auto;\n }\n\n & ", " {\n width: 12px;\n height: 12px;\n right: -1px;\n bottom: -1px;\n }\n"])), function (props) {
36263
36279
  return props.fontSize || '15px';
36264
36280
  }, function (props) {
36265
36281
  return props.color;
36266
36282
  }, function (props) {
36267
36283
  return props.addMemberIconColor || colors.primary;
36284
+ }, function (props) {
36285
+ return props.addMemberBackground || 'transparent';
36268
36286
  }, function (props) {
36269
36287
  return props.hoverBackground || colors.gray0;
36270
36288
  }, EditMemberIcon, UserStatus);
@@ -36754,7 +36772,9 @@ var VoiceItem = function VoiceItem(_ref) {
36754
36772
  voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor;
36755
36773
  var _useColor = useColors(),
36756
36774
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
36757
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
36775
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
36776
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
36777
+ backgroundColor = _useColor[THEME_COLORS.BACKGROUND];
36758
36778
  var dispatch = useDispatch();
36759
36779
  var playingAudioId = useSelector(playingAudioIdSelector);
36760
36780
  var getFromContacts = getShowOnlyContactUsers();
@@ -36833,15 +36853,19 @@ var VoiceItem = function VoiceItem(_ref) {
36833
36853
  onMouseLeave: function onMouseLeave(e) {
36834
36854
  return e.currentTarget.classList.remove('isHover');
36835
36855
  },
36836
- hoverBackgroundColor: voicePreviewHoverBackgroundColor
36856
+ hoverBackgroundColor: voicePreviewHoverBackgroundColor || hoverBackground
36837
36857
  }, audioIsPlaying ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont$1, {
36838
- onClick: handlePlayPause
36858
+ onClick: handlePlayPause,
36859
+ fill: hoverBackground
36839
36860
  }, voicePreviewPauseIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewPause, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont$1, {
36840
- onClick: handlePlayPause
36861
+ onClick: handlePlayPause,
36862
+ fill: backgroundColor
36841
36863
  }, voicePreviewPauseHoverIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewPauseHover, null)))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont$1, {
36842
- onClick: handlePlayPause
36864
+ onClick: handlePlayPause,
36865
+ fill: hoverBackground
36843
36866
  }, voicePreviewPlayIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreview, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont$1, {
36844
- onClick: handlePlayPause
36867
+ onClick: handlePlayPause,
36868
+ fill: backgroundColor
36845
36869
  }, voicePreviewPlayHoverIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewHoverIcon, null)))), /*#__PURE__*/React__default.createElement(AudioInfo, null, /*#__PURE__*/React__default.createElement(AudioTitle, {
36846
36870
  color: voicePreviewTitleColor || textPrimary
36847
36871
  }, file.user && (file.user.id === user.id ? 'You' : makeUsername(contactsMap[file.user.id], file.user, getFromContacts))), /*#__PURE__*/React__default.createElement(AudioDate, {
@@ -36860,8 +36884,16 @@ var VoiceItem = function VoiceItem(_ref) {
36860
36884
  type: 'audio/mpeg'
36861
36885
  })));
36862
36886
  };
36863
- var FileIconCont$1 = styled.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n"])));
36864
- var FileHoverIconCont$1 = styled.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n"])));
36887
+ var FileIconCont$1 = styled.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n fill: ", ";\n rect {\n fill: ", ";\n }\n"])), function (props) {
36888
+ return props.fill || 'transparent';
36889
+ }, function (props) {
36890
+ return props.fill || 'transparent';
36891
+ });
36892
+ var FileHoverIconCont$1 = styled.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n fill: ", ";\n rect {\n fill: ", ";\n }\n"])), function (props) {
36893
+ return props.fill || 'transparent';
36894
+ }, function (props) {
36895
+ return props.fill || 'transparent';
36896
+ });
36865
36897
  var FileItem$2 = styled.li(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n padding: 9px 16px;\n display: flex;\n align-items: center;\n text-decoration: none;\n\n &:hover {\n background-color: ", ";\n }\n div {\n margin-left: 12px;\n width: 100%;\n }\n img {\n width: 42px;\n height: 42px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n border-radius: 6px;\n }\n\n &.isHover {\n & ", " {\n display: none;\n }\n & ", " {\n display: inline-flex;\n }\n }\n"])), function (props) {
36866
36898
  return props.hoverBackgroundColor || colors.gray0;
36867
36899
  }, FileIconCont$1, FileHoverIconCont$1);
@@ -37535,7 +37567,8 @@ var Details = function Details(_ref) {
37535
37567
  }, editMode ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgArrowLeft, {
37536
37568
  onClick: function onClick() {
37537
37569
  return setEditMode(false);
37538
- }
37570
+ },
37571
+ color: textPrimary
37539
37572
  }), /*#__PURE__*/React__default.createElement(SectionHeader, {
37540
37573
  fontSize: detailsTitleFontSize,
37541
37574
  margin: '0 0 0 12px',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.6.7-beta.1",
3
+ "version": "1.6.7-beta.3",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",