sceyt-chat-react-uikit 1.6.7-beta.2 → 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 +26 -10
  2. package/index.modern.js +26 -10
  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() {
@@ -37575,7 +37590,8 @@ var Details = function Details(_ref) {
37575
37590
  }, editMode ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgArrowLeft, {
37576
37591
  onClick: function onClick() {
37577
37592
  return setEditMode(false);
37578
- }
37593
+ },
37594
+ color: textPrimary
37579
37595
  }), /*#__PURE__*/React__default.createElement(SectionHeader, {
37580
37596
  fontSize: detailsTitleFontSize,
37581
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() {
@@ -37552,7 +37567,8 @@ var Details = function Details(_ref) {
37552
37567
  }, editMode ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgArrowLeft, {
37553
37568
  onClick: function onClick() {
37554
37569
  return setEditMode(false);
37555
- }
37570
+ },
37571
+ color: textPrimary
37556
37572
  }), /*#__PURE__*/React__default.createElement(SectionHeader, {
37557
37573
  fontSize: detailsTitleFontSize,
37558
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.2",
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",