stream-chat-react 6.12.0 → 6.12.1

package/dist/scss/Card.scss

@@ -88,3 +88,13 @@
     filter: invert(100%);
   }
 }
+
+.str-chat__message-attachment-card.str-chat__message-attachment-card--giphy {
+  .str-chat__message-attachment-card--content {
+    background-image: url('#{$assetsPath}/Poweredby_100px-White_VertText.png');
+    background-position: right var(--border-radius) bottom var(--border-radius);
+    background-repeat: no-repeat;
+    /* that was the original sizing of the img in React */
+    background-size: 56px;
+  }
+}

package/dist/scss/ChannelListMessenger.scss

@@ -3,3 +3,7 @@
   min-width: 300px;
   background: var(--grey-gainsboro);
 }
+
+.str-chat-channel-list .str-chat__channel-list-messenger__main {
+  padding-bottom: 4px;
+}

package/dist/scss/ChannelSearch.scss

@@ -81,7 +81,7 @@
   }
 
   &-container.inline {
-    top: 60px;
+    top: 64px;
     right: 0;
     background: var(--grey-gainsboro);
     height: calc(100vh - 60px);

package/dist/scss/EditMessageForm.scss

@@ -106,3 +106,7 @@
     }
   }
 }
+
+.str-chat__edit-message-form {
+  position: relative;
+}

package/dist/scss/LoadMoreButton.scss

@@ -36,3 +36,8 @@
     }
   }
 }
+
+.str-chat__load-more-button__button {
+  display: flex;
+  justify-content: center;
+}

package/dist/scss/Message.scss

@@ -708,6 +708,11 @@
           position: relative;
           display: none;
         }
+
+        &--options.str-chat-angular__message-simple__actions__action--options--editing {
+          position: relative;
+          display: flex;
+        }
       }
     }
 

package/dist/scss/MessageActions.scss

@@ -89,3 +89,15 @@
 .str-chat__message-actions-options:hover svg {
   fill: var(--primary-color);
 }
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--thread {
+  display: flex;
+}
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--reactions {
+  display: flex;
+}
+
+.str-chat__message-simple:focus-within .str-chat__message-simple__actions__action--options {
+  display: flex;
+}

package/dist/scss/MessageInput.scss

@@ -167,6 +167,14 @@
 .rta__entity--selected {
   background-color: var(--primary-color);
   color: var(--white);
+  width: 100%;
+}
+
+// Using separate rules for Angular so React SDK integrators don't have problems with "!important"
+// Angular needs "!imporant" to override angular-mentions styles
+.active.mention-active > a /* angular-mentions autocomplete */ {
+  background-color: var(--primary-color) !important;
+  color: var(--white) !important;
 }
 
 .rta__list {
@@ -201,6 +209,13 @@
 .str-chat__slash-command {
   padding: var(--xs-p) var(--sm-p);
   font-size: var(--md-font);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  br {
+    display: none;
+  }
 
   &-description {
     font-size: var(--sm-font);

package/dist/scss/MessageInputFlat.scss

@@ -84,6 +84,12 @@
     }
   }
 
+  &-has-attachments {
+    .str-chat__send-button {
+      display: block;
+    }
+  }
+
   &-wrapper {
     display: flex;
     flex-wrap: wrap;
@@ -192,7 +198,8 @@
   }
 }
 
-.rfu-image-previewer {
+.rfu-image-previewer,
+.rfu-image-previewer-angular-host {
   flex: 1 1 100%;
 
   &__image {

package/dist/scss/Modal.scss

@@ -1,12 +1,11 @@
 .str-chat__modal {
-  background: var(--black);
+  background: var(--modal-overlay-color);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
-  opacity: 0.89;
   display: none;
   align-items: center;
   justify-content: center;
@@ -66,3 +65,9 @@
     }
   }
 }
+
+.str-chat__exit {
+  display: flex;
+  width: 86px;
+  justify-content: space-between;
+}

package/dist/scss/_base.scss

@@ -15,6 +15,16 @@
   clear: both;
 }
 
+button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  width: auto;
+}
+
 .messenger-chat {
   &.str-chat {
     display: flex;

package/dist/scss/_variables.scss

@@ -151,4 +151,6 @@ $border-radius: 16px;
   --white: #ffffff;
   --white-smoke: #f2f2f2;
   --white-snow: #fcfcfc;
+
+  --modal-overlay-color: rgba(0, 0, 0, 0.89);
 }

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "6.12.0";
+export declare const version = "6.12.1";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '6.12.0';
+export var version = '6.12.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "6.12.0",
+  "version": "6.12.1",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -28,6 +28,7 @@
   ],
   "dependencies": {
     "@braintree/sanitize-url": "5.0.0",
+    "@stream-io/stream-chat-css": "^1.1.2",
     "custom-event": "^1.0.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
@@ -49,8 +50,7 @@
     "react-markdown": "^5.0.3",
     "react-player": "^2.7.0",
     "react-textarea-autosize": "^8.3.0",
-    "react-virtuoso": "2.2.6",
-    "stream-chat-css": "^1.0.21",
+    "react-virtuoso": "^2.3.1",
     "textarea-caret": "^3.1.0",
     "uuid": "^8.3.1"
   },
@@ -61,7 +61,7 @@
   "peerDependencies": {
     "react": "^17.0.0 || ^16.8.0",
     "react-dom": "^17.0.0 || ^16.8.0",
-    "stream-chat": "^3.8.0"
+    "stream-chat": "^5.0.0"
   },
   "files": [
     "dist",
@@ -151,8 +151,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
+    "semantic-release": "^18.0.0",
     "semantic-release-cli": "^5.4.4",
-    "stream-chat": "4.2.0",
+    "stream-chat": "^5.0.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",
@@ -160,8 +161,7 @@
     "url-loader": "^4.1.1",
     "webpack": "4.44.2",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "~3.11.0",
-    "semantic-release": "^18.0.0"
+    "webpack-dev-server": "~3.11.0"
   },
   "husky": {
     "hooks": {