stream-chat-react 10.20.1 → 10.22.0

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

@@ -34,7 +34,7 @@
   --str-chat__image-attachment-color: var(--str-chat__text-color);
 
   /* The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
-  --str-chat__image-attachment-background-color: var(--str-chat__text-low-emphasis-color);
+  --str-chat__image-attachment-background-color: var(--str-chat__secondary-surface-color);
 
   /* Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
   --str-chat__image-attachment-border-block-start: none;
@@ -266,7 +266,7 @@
     @include utils.component-layer-overrides('image-gallery-attachment');
 
     .str-chat__gallery-image {
-      background-color: transparent;
+      background-color: var(--str-chat__image-attachment-background-color);
       border: 0;
     }
 
@@ -397,4 +397,4 @@
     border-end-start-radius: 0;
     border-end-end-radius: 0;
   }
-}
+}

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

@@ -26,9 +26,11 @@
   }
 
   .str-chat__attachment-preview-image {
+    @include utils.flex-row-center;
     position: relative;
     height: $preview-height;
     width: $preview-height;
+    overflow: hidden;
 
     .str-chat__attachment-preview-image-loading {
       @include overlay;
@@ -108,7 +110,9 @@
   .str-chat__attachment-preview-error {
     @include overlay;
     @include utils.unset-button(unset);
+    inset-inline-start: 0;
     cursor: pointer;
+    z-index: 1;
   }
 }
 

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

@@ -0,0 +1,21 @@
+.str-chat__base-image {
+  .str-chat__message-attachment-file--item-download {
+    display: block;
+  }
+}
+
+.str-chat__message-attachment-card--header,
+.str-chat__gallery-image,
+.str-chat__message-attachment--image {
+  .str-chat__message-attachment-file--item-download {
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+  }
+}
+
+.str-chat__attachment-preview-image {
+  .str-chat__message-attachment-file--item-download {
+      display: none;
+    }
+}

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

@@ -0,0 +1,35 @@
+@use '../utils';
+
+.str-chat__base-image {
+  color: transparent; // prevents the img alt text from being seen through the mask
+}
+
+.str-chat__base-image--load-failed {
+  @include utils.apply-mask-image(
+                  var(--str-chat__image-fallback-icon),
+                  var(--str-chat__disabled-color),
+                  5rem 5rem
+  );
+
+  ~ .str-chat__message-attachment-file--item-download {
+    .str-chat__message-attachment-download-icon path {
+      fill: var(--str-chat__text-color);
+    }
+  }
+}
+
+.str-chat__attachment-preview-image {
+  .str-chat__base-image--load-failed {
+    $fallbackSize: 1.5rem 1.5rem;
+    mask-size: $fallbackSize;
+    -webkit-mask-size: $fallbackSize;
+  }
+}
+
+.str-chat__attachment-preview-list .str-chat__attachment-preview-image--error {
+  background-color: var(--str-chat__secondary-surface-color);
+
+  .str-chat__attachment-preview-thumbnail.str-chat__base-image--load-failed {
+    background-color: var(--str-chat__disabled-color);
+  }
+}

package/dist/scss/v2/BaseImage/index.scss

@@ -0,0 +1,2 @@
+@import "BaseImage-layout";
+@import "BaseImage-theme";

package/dist/scss/v2/_icons.scss

@@ -0,0 +1,3 @@
+.str-chat {
+  --str-chat__image-fallback-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4=");
+}

package/dist/scss/v2/_utils.scss

@@ -199,3 +199,15 @@
       var(--original-height, 1000000)
   );
 }
+
+@mixin apply-mask-image($imageDataUrl, $fill, $size) {
+  mask-image: $imageDataUrl;
+  -webkit-mask-image: $imageDataUrl;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: $size;
+  -webkit-mask-size: $size;
+  background-color: $fill;
+}

package/dist/scss/v2/index.layout.scss

@@ -1,11 +1,13 @@
 @use 'base';
 @use 'emoji-replacement';
 @use 'global-layout-variables';
+@use 'icons';
 
 @use 'Avatar/Avatar-layout';
 @use 'AttachmentList/AttachmentList-layout';
 @use 'AttachmentPreviewList/AttachmentPreviewList-layout';
 @use 'Autocomplete/Autocomplete-layout';
+@use 'BaseImage/BaseImage-layout';
 @use 'Channel/Channel-layout';
 @use 'ChannelHeader/ChannelHeader-layout';
 @use 'ChannelList/ChannelList-layout';

package/dist/scss/v2/index.scss

@@ -11,6 +11,7 @@
 @use 'AttachmentList/AttachmentList-theme';
 @use 'AttachmentPreviewList/AttachmentPreviewList-theme';
 @use 'Autocomplete/Autocomplete-theme';
+@use 'BaseImage/BaseImage-theme';
 @use 'Channel/Channel-theme.scss';
 @use 'ChannelHeader/ChannelHeader-theme';
 @use 'ChannelList/ChannelList-theme';

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '10.20.1';
+export var version = '10.22.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "10.20.1",
+  "version": "10.22.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.4",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "^3.14.2",
+    "@stream-io/stream-chat-css": "3.15.0",
     "clsx": "^2.0.0",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
@@ -170,7 +170,7 @@
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.13.1",
+    "stream-chat": "^8.14.4",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "typescript": "^4.7.4",