stream-chat-react 10.4.0 → 10.5.0-alpha.0

package/dist/scss/Attachment.scss

@@ -1,30 +1,16 @@
-@mixin clamped-height-from-original-image-dimensions($max-height-css-var, $max-width-css-var) {
-  height: min(
-    var(#{$max-height-css-var}),
-    min(var(#{$max-width-css-var}, 1000000) / var(--original-width, 1000000), 1px) *
-      var(--original-height, 1000000)
-  );
+.str-chat__attachment {
+  max-width: 450px;
 }
 
-.str-chat__attachment,
-.str-chat__message-attachment {
-  --attachment-max-width: 450px;
-  --video-width: 300px;
-
-  max-width: var(--attachment-max-width);
-}
+$video-width: 300px;
 
-.str-chat__message-attachment.str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
-  --attachment-max-width: var(--video-width);
-  width: var(--video-width);
+.str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
+  width: $video-width;
 }
 
 .str-chat__player-wrapper {
   position: relative;
   padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
-  display: flex;
-  flex-direction: column;
-
   .react-player,
   .str-chat__video-angular {
     position: absolute;
@@ -32,33 +18,27 @@
     left: 0;
     width: 100%;
     height: 100%;
-    min-height: 0;
-    max-height: 100%;
   }
 }
 
 .str-chat__message-attachment-dynamic-size {
-  --video-max-height: 300px;
+  $max-height: 300px;
 
-  max-height: var(--video-max-height);
+  max-height: $max-height;
 
   .str-chat__player-wrapper {
-    @include clamped-height-from-original-image-dimensions(
-      '--video-max-height',
-      '--attachment-max-width'
-    );
     padding-top: 0;
     position: static;
     // CDN resize requires to have max-height/height and max-width set on this element - React
-    max-height: var(--video-max-height);
-    max-width: var(--attachment-max-width);
+    max-height: $max-height;
+    max-width: $video-width;
 
     .str-chat__video-angular,
     .react-player {
       position: static;
       // CDN resize requires to have max-height/height and max-width set on this element - Angular
-      max-height: var(--video-max-height);
-      max-width: var(--attachment-max-width);
+      max-height: $max-height;
+      max-width: $video-width;
     }
   }
 }
@@ -76,11 +56,12 @@
 
 .str-chat__message {
   &-attachment {
-    --attachment-max-width: 375px;
     width: 100%;
+    max-width: 375px;
 
     border-radius: var(--border-radius);
-    padding: var(--xs-m) auto var(--xs-m) 0;
+    margin: var(--xs-m) auto var(--xs-m) 0;
+    padding: 0;
   }
 
   /** Let giphies stretch their containers */
@@ -88,20 +69,17 @@
     max-width: unset;
   }
 
-  .str-chat__message-attachment {
-    margin: var(--xs-m) 0 var(--xs-m) auto;
-  }
-
   &--me {
     .str-chat__message-attachment {
       padding-left: 0;
+      margin: var(--xs-m) 0 var(--xs-m) auto;
     }
   }
 }
 
 .str-chat__message-team.thread-list {
   .str-chat__message-attachment {
-    --attachment-max-width: 200px;
+    max-width: 200px;
   }
 }
 
@@ -209,9 +187,9 @@
   }
 
   &--image {
-    --image-max-height: 300px;
-    max-height: var(--image-max-height);
-    max-width: var(--attachment-max-width);
+    height: auto;
+    max-height: 300px;
+    max-width: 100%;
     border-radius: 0;
 
     &:hover {
@@ -219,10 +197,7 @@
     }
 
     img {
-      @include clamped-height-from-original-image-dimensions(
-        '--image-max-height',
-        '--attachment-max-width'
-      );
+      height: inherit;
       width: auto;
       max-height: inherit;
       display: block;

package/dist/scss/Audio.scss

@@ -67,7 +67,6 @@
       margin: 0;
       padding: 0;
       line-height: 1;
-      font-size: var(--md-font);
     }
 
     &--subtitle {

package/dist/scss/ChannelList.scss

@@ -125,17 +125,3 @@
     }
   }
 }
-
-.str-chat__channel-list.str-chat__channel-list-react {
-  overflow: hidden;
-
-  .str-chat__channel-list-messenger-react {
-    overflow: hidden;
-    padding-bottom: var(--sm-p);
-
-    .str-chat__channel-list-messenger-react__main {
-      overflow-y: auto;
-      height: 100%;
-    }
-  }
-}

package/dist/scss/ChannelSearch.scss

@@ -1,15 +1,14 @@
 .str-chat__channel-search {
   --channel-search-input-height: 30px;
 
-  padding: var(--md-p);
+  padding: var(--md-p) var(--md-p) 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
   position: relative;
   background: var(--grey-gainsboro);
 
   input {
-    width: 100%;
+    flex: 1;
     background: var(--grey-whisper);
     border: 1px solid transparent;
     outline: none;
@@ -32,7 +31,9 @@
   }
 
   &-container {
-
+    position: absolute;
+    width: 300px;
+    z-index: 2;
     padding: 8px;
 
     &-searching {
@@ -68,10 +69,7 @@
   &-container.popup {
     border-radius: var(--border-radius-md);
     background: var(--white-smoke);
-    position: absolute;
-    z-index: 2;
     left: 0;
-    right: 0;
     top: calc(var(--channel-search-input-height) + 40px);
     box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
     border: 1px solid var(--border);
@@ -88,8 +86,10 @@
   }
 
   &-container.inline {
-    width: 100%;
+    top: 64px;
+    right: 0;
     background: var(--grey-gainsboro);
+    height: calc(100vh - 60px);
 
     .str-chat__channel-search-result {
       &:hover {

package/dist/scss/Message.scss

@@ -83,7 +83,7 @@
   /* group styling */
   &--top,
   &--single {
-    padding-top: calc(var(--md-p)/2);
+    margin: 24px 0 0;
 
     .str-chat__message {
       &-attachment--img,
@@ -176,7 +176,7 @@
   }
 
   &--bottom {
-    padding-bottom: calc(var(--md-p)/2);
+    margin: 0 0 24px;
 
     .str-chat__message {
       &-attachment--img,
@@ -217,7 +217,7 @@
   }
 
   &--single {
-    padding-bottom: calc(var(--md-m)/2);
+    margin-bottom: var(--md-m);
   }
 
   &--top,
@@ -233,14 +233,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -251,10 +253,12 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
 
           &--has-attachment {
-            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
+              var(--border-radius) calc(var(--border-radius-sm) / 2);
           }
         }
       }
@@ -262,10 +266,12 @@
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
-              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+                calc(var(--border-radius-sm) / 2) var(--border-radius);
             }
           }
         }
@@ -278,14 +284,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
               margin: 0;
@@ -296,7 +304,8 @@
         .str-chat__message-attachment-card {
           margin: 0;
           padding: 0;
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+            calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
       }
     }
@@ -310,8 +319,7 @@
   align-items: flex-end;
   padding: 0;
   position: relative;
-  padding-top: var(--xxs-p);
-  padding-bottom: var(--xxs-p);
+  margin: calc(var(--xxs-m) / 2) 0;
   width: 100%;
   transition: background-color 0.5s ease-out;
 
@@ -435,11 +443,11 @@
   }
 
   &-attachment {
-    --attachment-max-width: 480px;
-
     &--img {
       width: 100%;
+      max-width: 480px;
       display: block;
+      height: inherit;
       cursor: -moz-zoom-in;
       cursor: -webkit-zoom-in;
       cursor: zoom-in;
@@ -473,6 +481,7 @@
   /* me */
   &--me {
     display: inline-flex;
+    margin: var(--xxs-m) 0;
     justify-content: flex-end;
 
     .str-chat__message {
@@ -543,6 +552,7 @@
           // CDN resize requires max-width to be set on this element
           max-width: inherit;
           display: block;
+          height: inherit;
           object-fit: cover;
           border: none;
         }
@@ -557,7 +567,7 @@
   }
 
   &--with-reactions {
-    padding-top: var(--md-p);
+    margin-top: var(--md-m);
   }
 
   &--highlighted {
@@ -586,16 +596,20 @@
       .str-chat {
         &__message,
         &__message--me {
+          margin: calc(var(--xxs-m) / 2) 0;
+
           &--with-reactions {
-            padding-top: var(--lg-p);
+            margin-top: var(--lg-m);
           }
         }
 
         &__message-attachment--image {
+          margin: calc(var(--xxs-m) / 2) 0;
           max-width: 480px;
         }
 
         &__message-attachment--card {
+          margin: calc(var(--xxs-m) / 2) 0;
           line-height: normal;
         }
 
@@ -848,8 +862,8 @@
         flex-direction: row-reverse;
       }
 
-      .str-chat__message-attachment {
-        --attachment-max-width: 460px;
+      .str-chat__message-attachment--image {
+        max-width: 460px;
       }
 
       &-text-inner {
@@ -949,6 +963,7 @@
   }
 
   .str-chat__message-attachment--file {
+    margin: 0;
     background: var(--white);
     border-color: transparent;
     border: 1px solid var(--grey-gainsboro);
@@ -1197,20 +1212,20 @@
 }
 
 @media screen and (max-width: 375px) {
-  .str-chat__message .str-chat__message-attachment {
-    --attachment-max-width: 235px;
+  .str-chat__message .str-chat__message-attachment--img {
+    max-width: 235px;
   }
 }
 
 @media screen and (max-width: 414px) {
-  .str-chat__message .str-chat__message-attachment {
-    --attachment-max-width: 235px;
+  .str-chat__message .str-chat__message-attachment--img {
+    max-width: 274px;
   }
 }
 
 @media only screen and (device-width: 375px) and (-webkit-device-pixel-ratio: 3) {
-  .str-chat__message .str-chat__message-attachment {
-    --attachment-max-width: 235px;
+  .str-chat__message .str-chat__message-attachment--img {
+    max-width: 240px;
   }
 }
 

package/dist/scss/MessageCommerce.scss

@@ -176,7 +176,7 @@
   }
 
   &--with-reactions {
-    padding-top: 30px;
+    margin-top: 30px;
 
     .str-chat__message-commerce__actions__action--reactions {
       display: none;

package/dist/scss/Thread.scss

@@ -10,48 +10,11 @@
   flex-direction: column;
   padding-top: 0;
 
-  .str-chat__virtual-list .str-chat__virtual-list-message-wrapper {
-    padding-left: var(--md-p);
-    padding-right: var(--md-p);
-  }
-
-  &.str-chat__thread-container {
-    max-height: 100%;
+  .str-chat__thread-container {
+    height: 100%;
     display: flex;
     flex-direction: column;
     width: 100%;
-
-    .str-chat__parent-message-li {
-      .str-chat__message {
-        padding-left: var(--md-p);
-        padding-right: var(--md-p);
-
-        .str-chat__message-inner {
-          min-width: 0;
-        }
-
-        .str-chat__message-attachment--image,
-        .str-chat__message-attachment-card {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) ;
-        }
-      }
-
-      .str-chat__message--me {
-        .str-chat__message-attachment--img,
-        .str-chat__message-attachment-card {
-          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
-        }
-      }
-
-      .str-chat__message--with-reactions {
-        padding-top: var(--xl-p);
-      }
-
-      .str-chat__message:not(.str-chat__message--has-attachment) {
-        padding-top: var(--xs-p);
-      }
-
-    }
   }
 
   &--full {

package/dist/scss/VirtualMessage.scss

@@ -3,11 +3,12 @@
   font-size: 0;
 
   .str-chat__virtual-list-message-wrapper {
-    padding-left: var(--xl-p);
-    padding-right: var(--xl-p);
+    padding: 1px var(--xl-p);
     width: 100%;
 
     .str-chat__message-simple {
+      padding-bottom: var(--sm-p);
+
       &.str-chat__virtual-message__wrapper--first {
         padding-bottom: 0;
         padding-left: var(--xl-p);
@@ -39,6 +40,7 @@
 
       &.str-chat__virtual-message__wrapper--group {
         align-items: center;
+        padding-bottom: 0;
         padding-left: var(--xl-p);
 
         &.str-chat__message-simple--me {
@@ -252,6 +254,8 @@
 }
 
 .str-chat__virtual-message__wrapper--group {
+  padding-top: 0;
+
   > .str-chat__avatar {
     display: none;
   }

package/dist/scss/v2/AttachmentList/AttachmentList-layout.scss

@@ -2,25 +2,33 @@
 
 .str-chat {
   /* The margin applied to every attachment in the attachment list */
-  --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
+  --str-chat__attachment-margin: var(--str-chat__spacing-px -0_5);
+
+  /* The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). */
+  --str-chat__attachment-max-width: unset;
+
+  /* The height of scraped images, the default value is optimized for 1.91:1 aspect ratio */
+  --str-chat__scraped-image-height: unset;
+
+  /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */
+  --str-chat__scraped-video-height: unset;
 
   /* The height of GIFs */
   --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
+
+  /* The height of videos, the default value is the mase as `--str-chat__attachment-max-width`. In Angular SDK this is the maximum height, the video can be smaller based on the aspect ratio */
+  --str-chat__video-height: unset;
 }
 
 .str-chat__attachment-list {
-  /* The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). */
   --str-chat__attachment-max-width: calc(
     var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin))
   );
 
-  /* The maximum height of videos, the default value is the mase as `--str-chat__attachment-max-width`. The rendered video can be smaller based on the aspect ratio */
   --str-chat__video-height: var(--str-chat__attachment-max-width);
 
-  /* The height of scraped images, the default value is optimized for 1.91:1 aspect ratio */
   --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
 
-  /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */
   --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
 
   display: flex;
@@ -123,8 +131,6 @@
       min-width: 0;
       // CDN resize requires max-width to be present on this element - React
       max-width: $maxWidth;
-      display: flex;
-      flex-direction: column;
 
       .react-player,
       .str-chat__video-angular {
@@ -132,8 +138,6 @@
         width: 100%;
         // CDN resize requires max-width to be present on this element - Angular
         max-width: $maxWidth;
-        max-height: 100%;
-        min-height: 0;
       }
     }
   }
@@ -145,13 +149,14 @@
   .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
     $maxHeight: var(--str-chat__video-height);
 
+    @include utils.clamped-height-from-original-image-dimensions(
+      '--str-chat__video-height',
+      '--str-chat__attachment-max-width'
+    );
+
     max-height: $maxHeight;
 
     .str-chat__player-wrapper {
-      @include utils.clamped-height-from-original-image-dimensions(
-        '--str-chat__video-height',
-        '--str-chat__attachment-max-width'
-      );
       // CDN resize requires max-height to be present on this element - React
       max-height: $maxHeight;
     }

package/dist/scss/v2/ChannelList/ChannelList-layout.scss

@@ -39,17 +39,3 @@
     display: none;
   }
 }
-
-
-.str-chat__channel-list-react {
-  overflow: hidden;
-
-  .str-chat__channel-list-messenger-react {
-    overflow: hidden;
-    padding-bottom: var(--str-chat__spacing-2_5);
-
-    .str-chat__channel-list-messenger-react__main {
-      overflow-y: auto;
-    }
-  }
-}