stream-chat-react 10.0.0-theming-v2.3 → 10.0.0

package/dist/scss/Attachment.scss

@@ -2,8 +2,10 @@
   max-width: 450px;
 }
 
+$video-width: 300px;
+
 .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
-  width: 300px;
+  width: $video-width;
 }
 
 .str-chat__player-wrapper {
@@ -19,6 +21,24 @@
   }
 }
 
+.str-chat__message-attachment-dynamic-size {
+  $max-height: 300px;
+
+  max-height: $max-height;
+
+  .str-chat__player-wrapper {
+    padding-top: 0;
+    position: static;
+
+    .str-chat__video-angular {
+      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;
+    }
+  }
+}
+
 /* border radius for attachments */
 .str-chat__message .str-chat__player-wrapper .react-player {
   border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
@@ -176,7 +196,6 @@
       height: inherit;
       width: auto;
       max-height: inherit;
-      max-width: 100%;
       display: block;
       object-fit: cover;
       overflow: hidden;
@@ -204,6 +223,30 @@
   }
 }
 
+.str-chat__message-attachment:not(.str-chat__message-attachment-dynamic-size) {
+  .str-chat__message-attachment--image {
+    img {
+      max-width: 100%;
+    }
+  }
+}
+
+.str-chat__message-attachment-dynamic-size {
+  &.str-chat__message-attachment--svg-image {
+    img {
+      object-fit: contain;
+    }
+  }
+
+  &.str-chat__message-attachment--image {
+    width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+}
+
 .str-chat__message-attachment-card__giphy-logo {
   height: 20px;
   width: auto;

package/dist/scss/Gallery.scss

@@ -1,3 +1,5 @@
+$image-size: 150px;
+
 .str-chat__gallery {
   display: inline-flex;
   flex-wrap: wrap;
@@ -6,8 +8,8 @@
 
   &-image {
     /* flex: 1; x */
-    width: 150px;
-    height: 150px;
+    width: $image-size;
+    height: $image-size;
     background: var(--white);
     margin-bottom: 1px;
     margin-right: 1px;
@@ -23,7 +25,9 @@
 
     img {
       width: inherit;
+      // CDN resize requires max-height/height and max-width to be set on this element
       height: inherit;
+      max-width: $image-size;
       object-fit: cover;
     }
   }
@@ -46,14 +50,16 @@
       margin: 4px 0;
 
       &-image {
-        width: 150px;
-        height: 150px;
+        width: $image-size;
+        height: $image-size;
       }
 
       &-placeholder {
         position: relative;
-        width: 150px;
-        height: 150px;
+        width: $image-size;
+        // CDN resize requires max-height/height and max-width to be set on this element
+        max-width: $image-size;
+        height: $image-size;
         color: var(--white);
         display: flex;
         align-items: center;

package/dist/scss/Message.scss

@@ -531,7 +531,8 @@
       &-attachment {
         &--img {
           width: 100%;
-          max-width: 480px;
+          // CDN resize requires max-width to be set on this element
+          max-width: inherit;
           display: block;
           height: inherit;
           object-fit: cover;

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

@@ -4,7 +4,7 @@
   /* The margin applied to every attachment in the attachment list */
   --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
 
-  /* The maximum allowed width of attachments */
+  /* 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 */
@@ -16,8 +16,8 @@
   /* The height of GIFs */
   --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
 
-  /* The height of videos */
-  --str-chat__video-height: calc(var(--str-chat__spacing-px) * 300);
+  /* 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 {
@@ -25,6 +25,8 @@
     var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin))
   );
 
+  --str-chat__video-height: var(--str-chat__attachment-max-width);
+
   --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
 
   --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
@@ -102,6 +104,7 @@
   // Images uploaded from files
   .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
     img {
+      // 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;
@@ -126,14 +129,25 @@
       .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);
       }
     }
   }
 
-  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
+  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card):not(.str-chat__message-attachment-dynamic-size) {
     height: var(--str-chat__video-height);
   }
 
+  .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
+    max-height: var(--str-chat__video-height);
+
+    .str-chat__video-angular {
+      // CDN resize requires max-height to be present on this element
+      max-height: var(--str-chat__video-height);
+    }
+  }
+
   .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
     height: var(--str-chat__scraped-video-height);
   }
@@ -143,55 +157,66 @@
     margin: var(--str-chat__attachment-margin);
   }
 
-  .str-chat__gallery {
-    display: grid;
-    grid-template-columns: 50% 50%;
-    overflow: hidden;
-    gap: var(--str-chat__spacing-0_5);
-    max-width: var(--str-chat__attachment-max-width);
-    height: var(--str-chat__attachment-max-width);
+  .str-chat__message-attachment--gallery {
+    $max-width: var(--str-chat__attachment-max-width);
     margin: var(--str-chat__attachment-margin);
 
-    &.str-chat__gallery-two-rows {
-      grid-template-rows: 50% 50%;
-    }
-
-    .str-chat__gallery-image {
-      padding: 0;
-      margin: 0;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        cursor: zoom-in;
+    .str-chat__gallery {
+      display: grid;
+      grid-template-columns: 50% 50%;
+      overflow: hidden;
+      // Safari needs this
+      width: fit-content;
+      gap: var(--str-chat__spacing-0_5);
+      max-width: $max-width;
+      // CDN resize requires height/max-height to be present on the img element, this rule ensures that
+      height: var(--str-chat__attachment-max-width);
+
+      &.str-chat__gallery-two-rows {
+        grid-template-rows: 50% 50%;
       }
-    }
 
-    .str-chat__gallery-placeholder {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-size: cover;
-      background-position: top left;
-      background-repeat: no-repeat;
-      margin: 0;
-      cursor: zoom-in;
+      .str-chat__gallery-image {
+        padding: 0;
+        margin: 0;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          cursor: zoom-in;
+          // CDN resize requires max-width to be present on this element
+          max-width: $max-width;
+        }
+      }
 
-      p {
+      .str-chat__gallery-placeholder {
         position: relative;
-        z-index: 1;
-      }
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-size: cover;
+        background-position: top left;
+        background-repeat: no-repeat;
+        margin: 0;
+        cursor: zoom-in;
+        // CDN resize requires max-width to be present on this element
+        max-width: $max-width;
 
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 0;
+        p {
+          position: relative;
+          z-index: 1;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 0;
+        }
       }
     }
   }
@@ -203,6 +228,7 @@
 
     img {
       object-fit: contain;
+      // CDN resize requires max-width and height/max-height to be present on this element
       max-width: calc(var(--str-chat__attachment-max-width) - #{$padding});
       max-height: calc(var(--str-chat__attachment-max-width) - #{$padding});
     }

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

@@ -47,6 +47,7 @@
   column-gap: var(--str-chat__spacing-2);
 
   .str-chat__user-item--name {
+    @include utils.ellipsis-text;
     width: 100%;
   }
 }
@@ -57,6 +58,7 @@
   column-gap: var(--str-chat__spacing-2);
 
   .str-chat__emoji-item--name {
+    @include utils.ellipsis-text;
     width: 100%;
   }
 }

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "10.0.0-theming-v2.3";
+export declare const version = "10.0.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,wBAAwB,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}

package/dist/version.js

@@ -1 +1 @@
-export var version = '10.0.0-theming-v2.3';
+export var version = '10.0.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "10.0.0-theming-v2.3",
+  "version": "10.0.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "3.0.0-theming2.9",
+    "@stream-io/stream-chat-css": "3.0.0",
     "clsx": "^1.1.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
-    "stream-chat": "^6.9.0"
+    "stream-chat": "^7.1.0"
   },
   "files": [
     "dist",
@@ -168,7 +168,7 @@
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.2",
     "semantic-release-cli": "^5.4.4",
-    "stream-chat": "^6.9.0",
+    "stream-chat": "^7.1.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",