stream-chat-react 10.1.2 → 10.3.0

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AAEvB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './components';
 export * from './context';
 export * from './i18n';
+// todo: distribute utils into separate files
 export * from './utils';

package/dist/scss/Attachment.scss

@@ -1,16 +1,30 @@
-.str-chat__attachment {
-  max-width: 450px;
+@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)
+  );
 }
 
-$video-width: 300px;
+.str-chat__attachment,
+.str-chat__message-attachment {
+  --attachment-max-width: 450px;
+  --video-width: 300px;
+
+  max-width: var(--attachment-max-width);
+}
 
-.str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
-  width: $video-width;
+.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__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;
@@ -18,23 +32,33 @@ $video-width: 300px;
     left: 0;
     width: 100%;
     height: 100%;
+    min-height: 0;
+    max-height: 100%;
   }
 }
 
 .str-chat__message-attachment-dynamic-size {
-  $max-height: 300px;
+  --video-max-height: 300px;
 
-  max-height: $max-height;
+  max-height: var(--video-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);
 
-    .str-chat__video-angular {
+    .str-chat__video-angular,
+    .react-player {
       position: static;
-      // CDN resize requires to have max-height/height and max-width set on this element
-      max-height: $max-height;
-      max-width: $video-width;
+      // 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);
     }
   }
 }
@@ -52,8 +76,8 @@ $video-width: 300px;
 
 .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;
@@ -77,7 +101,7 @@ $video-width: 300px;
 
 .str-chat__message-team.thread-list {
   .str-chat__message-attachment {
-    max-width: 200px;
+    --attachment-max-width: 200px;
   }
 }
 
@@ -185,9 +209,9 @@ $video-width: 300px;
   }
 
   &--image {
-    height: auto;
-    max-height: 300px;
-    max-width: 100%;
+    --image-max-height: 300px;
+    max-height: var(--image-max-height);
+    max-width: var(--attachment-max-width);
     border-radius: 0;
 
     &:hover {
@@ -195,7 +219,10 @@ $video-width: 300px;
     }
 
     img {
-      height: inherit;
+      @include clamped-height-from-original-image-dimensions(
+        '--image-max-height',
+        '--attachment-max-width'
+      );
       width: auto;
       max-height: inherit;
       display: block;

package/dist/scss/Audio.scss

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

package/dist/scss/ChannelList.scss

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

package/dist/scss/Message.scss

@@ -8,6 +8,24 @@
    */
   .str-chat__message-inner {
     min-width: 0;
+
+    .str-chat__translation-notice {
+      button {
+        cursor: pointer;
+        padding: 0.25rem 0;
+        margin: 0;
+        font-size: 14px;
+        line-height: 16px;
+        color: var(--lighten-grey);
+        border: none;
+        background: none;
+
+        &:active,
+        &:hover {
+          background: var(--grey-whisper);
+        }
+      }
+    }
   }
 
   .quoted-message {
@@ -417,11 +435,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;
@@ -525,7 +543,6 @@
           // CDN resize requires max-width to be set on this element
           max-width: inherit;
           display: block;
-          height: inherit;
           object-fit: cover;
           border: none;
         }
@@ -831,8 +848,8 @@
         flex-direction: row-reverse;
       }
 
-      .str-chat__message-attachment--image {
-        max-width: 460px;
+      .str-chat__message-attachment {
+        --attachment-max-width: 460px;
       }
 
       &-text-inner {
@@ -1180,20 +1197,20 @@
 }
 
 @media screen and (max-width: 375px) {
-  .str-chat__message .str-chat__message-attachment--img {
-    max-width: 235px;
+  .str-chat__message .str-chat__message-attachment {
+    --attachment-max-width: 235px;
   }
 }
 
 @media screen and (max-width: 414px) {
-  .str-chat__message .str-chat__message-attachment--img {
-    max-width: 274px;
+  .str-chat__message .str-chat__message-attachment {
+    --attachment-max-width: 235px;
   }
 }
 
 @media only screen and (device-width: 375px) and (-webkit-device-pixel-ratio: 3) {
-  .str-chat__message .str-chat__message-attachment--img {
-    max-width: 240px;
+  .str-chat__message .str-chat__message-attachment {
+    --attachment-max-width: 235px;
   }
 }
 

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

@@ -4,31 +4,23 @@
   /* The margin applied to every attachment in the attachment list */
   --str-chat__attachment-margin: var(--str-chat__spacing-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). In case of Angular, there are some [constraints](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size) for the acceptable values you can provide for this variable. */
-  --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;
@@ -104,12 +96,16 @@
   // Images uploaded from files
   .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
     img {
+      @include utils.clamped-height-from-original-image-dimensions(
+        '--str-chat__attachment-max-width',
+        '--str-chat__attachment-max-width'
+      );
+
       // CDN resize requires max-width and height/max-height to be present on this element
       max-width: var(--str-chat__attachment-max-width);
       max-height: var(--str-chat__attachment-max-width);
       object-fit: cover;
       width: 100%;
-      height: 100%;
       cursor: zoom-in;
     }
   }
@@ -117,20 +113,27 @@
   // Video files: uploaded from files and scraped
   .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
   .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
-    max-width: var(--str-chat__attachment-max-width);
+    $maxWidth: var(--str-chat__attachment-max-width);
+    max-width: $maxWidth;
     display: flex;
 
     .str-chat__player-wrapper {
       height: 100%;
       width: 100%;
       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 {
         height: 100%;
         width: 100%;
-        // CDN resize requires max-width to be present on this element
-        max-width: var(--str-chat__attachment-max-width);
+        // CDN resize requires max-width to be present on this element - Angular
+        max-width: $maxWidth;
+        max-height: 100%;
+        min-height: 0;
       }
     }
   }
@@ -140,11 +143,22 @@
   }
 
   .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
-    max-height: var(--str-chat__video-height);
+    $maxHeight: var(--str-chat__video-height);
+
+    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;
+    }
 
     .str-chat__video-angular {
-      // CDN resize requires max-height to be present on this element
-      max-height: var(--str-chat__video-height);
+      // CDN resize requires max-height to be present on this element - Angular
+      max-height: $maxHeight;
     }
   }
 

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

@@ -39,3 +39,17 @@
     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;
+    }
+  }
+}

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

@@ -1,71 +1,88 @@
 @use '../utils';
 
-.str-chat__channel-search-bar {
-  @include utils.flex-row-center;
-  padding: var(--str-chat__spacing-2_5);
+.str-chat__channel-search {
+  position: relative;
 
-  .str-chat__channel-search-bar-button {
-    @include utils.button-reset;
-    width: calc(var(--str-chat__spacing-px) * 40);
-    height: calc(var(--str-chat__spacing-px) * 40);
+  .str-chat__channel-search-bar {
+    @include utils.flex-row-center;
     padding: var(--str-chat__spacing-2_5);
-    cursor: pointer;
-  }
-
-  .str-chat__channel-search-input--wrapper {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    padding: var(--str-chat__spacing-2_5);
-    min-width: 0;
 
-    .str-chat__channel-search-input--icon,
-    .str-chat__channel-search-input--clear-button {
-      display: inline-flex;
-      padding: 0 var(--str-chat__spacing-2_5);
-    }
-
-    .str-chat__channel-search-input--clear-button {
+    .str-chat__channel-search-bar-button {
       @include utils.button-reset;
+      width: calc(var(--str-chat__spacing-px) * 40);
+      height: calc(var(--str-chat__spacing-px) * 40);
+      padding: var(--str-chat__spacing-2_5);
       cursor: pointer;
-
-      &:disabled {
-        cursor: default;
-      }
     }
 
-    input {
+    .str-chat__channel-search-input--wrapper {
+      display: flex;
+      align-items: center;
       flex: 1;
+      padding: var(--str-chat__spacing-2_5);
       min-width: 0;
+
+      .str-chat__channel-search-input--icon,
+      .str-chat__channel-search-input--clear-button {
+        display: inline-flex;
+        padding: 0 var(--str-chat__spacing-2_5);
+      }
+
+      .str-chat__channel-search-input--clear-button {
+        @include utils.button-reset;
+        cursor: pointer;
+
+        &:disabled {
+          cursor: default;
+        }
+      }
+
+      input {
+        flex: 1;
+        min-width: 0;
+      }
     }
   }
-}
 
-.str-chat__channel-search-results-header {
-  width: 100%;
-  padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
-}
+  .str-chat__channel-search-container-searching {
+    width: 100%;
+    padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
+  }
 
-.str-chat__channel-search-result-list {
-  .str-chat__channel-search-container-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  .str-chat__channel-search-results-header {
     width: 100%;
+    padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
+  }
 
-    svg {
-      height: calc(var(--str-chat__spacing-px) * 90 + var(--str-chat__spacing-20));
-      width: calc(var(--str-chat__spacing-px) * 90);
-      padding: var(--str-chat__spacing-10) 0;
+
+  .str-chat__channel-search-result-list {
+    &.popup {
+      position: absolute;
+      left: 0;
+      right: 0;
     }
-  }
 
-  .str-chat__channel-search-result {
-    @include utils.button-reset;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    column-gap: var(--str-chat__spacing-2);
-    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
+    .str-chat__channel-search-container-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
+
+      svg {
+        height: calc(var(--str-chat__spacing-px) * 90 + var(--str-chat__spacing-20));
+        width: calc(var(--str-chat__spacing-px) * 90);
+        padding: var(--str-chat__spacing-10) 0;
+      }
+    }
+
+    .str-chat__channel-search-result {
+      @include utils.button-reset;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      column-gap: var(--str-chat__spacing-2);
+      padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
+    }
   }
-}
+}

package/dist/scss/v2/ChannelSearch/ChannelSearch-theme.scss

@@ -89,6 +89,25 @@
     --str-chat__secondary-surface-color
   );
 
+  --str-chat__channel-search-result-list-color: var(--str-chat__text-color);
+
+  --str-chat__channel-search-result-list-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component  */
+  --str-chat__channel-search-result-list-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-result-list-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-search-result-list-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-search-result-list-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__channel-search-result-list-popup-box-shadow: 0 4px 4px var(--str-chat__box-shadow-color);
+
   /* The font color used in the search results header  */
   --str-chat__channel-search-results-header-color: var(--str-chat__text-low-emphasis-color);
 
@@ -108,6 +127,25 @@
   /* Right (left in RTL layout) border of the component */
   --str-chat__channel-search-results-header-border-inline-end: none;
 
+  /* The font color used in the search results loading indicator  */
+  --str-chat__channel-search-results-loading-indicator-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color used in the search results loading indicator  */
+  --str-chat__channel-search-results-loading-indicator-background-color: var(--str-chat__background-color);
+
+  /* Top border of the component  */
+  --str-chat__channel-search-results-loading-indicator-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-results-loading-indicator-border-block-end: var(--str-chat__surface-color) 1px
+    solid;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-search-results-loading-indicator-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-search-results-loading-indicator-border-inline-end: none;
+
   /* The font color used in the empty search results indicator  */
   --str-chat__channel-search-results-empty-color: var(--str-chat__text-low-emphasis-color);
 
@@ -162,6 +200,16 @@
 }
 
 .str-chat__channel-search-result-list {
+  @include utils.component-layer-overrides('channel-search-result-list');
+
+  &.popup {
+    box-shadow: var(--str-chat__channel-search-result-list-popup-box-shadow);
+  }
+
+  .str-chat__channel-search-container-searching {
+    @include utils.component-layer-overrides('channel-search-results-loading-indicator');
+  }
+
   .str-chat__channel-search-container-empty {
     @include utils.component-layer-overrides('channel-search-results-empty');
     font: var(--str-chat__subtitle2-medium-text);

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

@@ -71,6 +71,7 @@
     grid-template-areas:
       'avatar message'
       '. replies'
+      '. translation-notice'
       '. metadata';
     column-gap: var(--str-chat__spacing-2);
     grid-template-columns: auto 1fr;
@@ -81,6 +82,7 @@
     grid-template-areas:
       'message'
       'replies'
+      'translation-notice'
       'metadata';
     justify-items: end;
 
@@ -166,6 +168,16 @@
     }
   }
 
+  .str-chat__translation-notice {
+    grid-area: translation-notice;
+
+    button {
+      cursor: pointer;
+      padding: var(--str-chat__spacing-1) 0;
+      margin: 0;
+    }
+  }
+
   .str-chat__message-metadata {
     grid-area: metadata;
     display: flex;