stream-chat-react 10.7.1 → 10.7.2

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

@@ -1,9 +1,19 @@
 .str-chat__avatar {
+  position: relative;
+
   .str-chat__avatar-fallback {
     text-align: center;
     height: inherit;
     width: inherit;
   }
+
+  .str-chat__avatar--online-indicator {
+    position: absolute;
+    width: calc(var(--str-chat__spacing-px) * 12);
+    height: calc(var(--str-chat__spacing-px) * 12);
+    inset-inline-end: 3%;
+    inset-block-start: 2%;
+  }
 }
 
 .str-chat__loading-channels-avatar {

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

@@ -24,6 +24,12 @@
 
   /* Box shadow applied to the component */
   --str-chat__avatar-box-shadow: none;
+
+  /* The color of the online indicator (only available in Angular SDK) */
+  --str-chat__avatar-online-indicator-color: var(--str-chat__info-color);
+
+  /* The border radius of the online indicator (only available in Angular SDK) */
+  --str-chat__avatar-online-indicator-border-radius: var(--str-chat__border-radius-circle);
 }
 
 .str-chat__avatar {
@@ -35,6 +41,11 @@
     @include utils.component-layer-overrides('avatar');
     text-transform: uppercase;
   }
+
+  .str-chat__avatar--online-indicator {
+    background-color: var(--str-chat__avatar-online-indicator-color);
+    border-radius: var(--str-chat__avatar-online-indicator-border-radius);
+  }
 }
 
 .str-chat__loading-channels-avatar {

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

@@ -250,12 +250,48 @@
   }
 }
 
-.str-chat__li {
-  &:hover {
-    .str-chat__message-options {
-      display: flex;
+// Message options display - default mode: they appear when .str-chat__li is hovered
+.str-chat__ul:not(.str-chat__message-options-in-bubble),
+.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) {
+  .str-chat__li {
+    &:hover {
+      .str-chat__message-options {
+        display: flex;
+      }
+    }
+  }
+
+  .str-chat__li:hover {
+    .str-chat__message--other .str-chat__message-inner {
+      margin-inline-end: 0;
+    }
+  }
+
+  .str-chat__li:hover {
+    .str-chat__message--me .str-chat__message-inner {
+      margin-inline-start: 0;
+    }
+  }
+}
+
+// Message options display - second mode: they appear when .str-chat__message-inner is hovered
+.str-chat__ul.str-chat__message-options-in-bubble,
+.str-chat__virtual-list.str-chat__message-options-in-bubble {
+  .str-chat__message-inner {
+    &:hover {
+      .str-chat__message-options {
+        display: flex;
+      }
     }
   }
+
+  .str-chat__message--other .str-chat__message-inner:hover {
+    margin-inline-end: 0;
+  }
+
+  .str-chat__message--me .str-chat__message-inner:hover {
+    margin-inline-start: 0;
+  }
 }
 
 .str-chat__message-inner {
@@ -272,22 +308,10 @@
   margin-inline-end: calc(var(--str-chat__message-options-button-size) * 3);
 }
 
-.str-chat__li:hover {
-  .str-chat__message--other .str-chat__message-inner {
-    margin-inline-end: 0;
-  }
-}
-
 .str-chat__message--me .str-chat__message-inner {
   margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
 }
 
-.str-chat__li:hover {
-  .str-chat__message--me .str-chat__message-inner {
-    margin-inline-start: 0;
-  }
-}
-
 .str-chat__li--middle,
 .str-chat__li--top {
   .str-chat__message {

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

@@ -56,3 +56,11 @@
     height: auto;
   }
 }
+
+.str-chat__main-panel {
+  .str-chat__ul {
+    .str-chat__li:first-of-type {
+      padding-top: 4.5rem;
+    }
+  }
+}

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

@@ -4,6 +4,10 @@
   position: static !important;
 }
 
+.str-chat__virtual-list .str-chat__typing-indicator {
+  position: static;
+}
+
 .str-chat__typing-indicator {
   padding: var(--str-chat__spacing-1_5);
   display: flex;

package/dist/scss/v2/_emoji-replacement.scss

@@ -0,0 +1,40 @@
+/* declare a font faces for our Emoji Replacement font, based on the default font used by Stream Chat React */
+$assetsPath: '../../assets';
+$emoji-flag-unicode-range: U+1F1E6-1F1FF;
+
+/* png based woff for most browsers */
+@font-face {
+  font-family: ReplaceFlagEmojiPNG;
+  src: url('#{$assetsPath}/NotoColorEmoji-flags.woff2') format('woff2');
+  /* using the unicode-range attribute to limit the reach of the Flag Emoji web font to only flags */
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+/* svg based for firefox */
+@font-face {
+  font-family: ReplaceFlagEmojiSVG;
+  src: url('#{$assetsPath}/EmojiOneColor.woff2') format('woff2');
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+.str-chat--windows-flags {
+  .str-chat__textarea__textarea,
+  .str-chat__message-text-inner *,
+  .str-chat__emoji-item--entity,
+  .emoji-mart-emoji-native * {
+    font-family: ReplaceFlagEmojiPNG, var(--str-chat__font-family), sans-serif;
+    font-display: swap;
+  }
+}
+
+@-moz-document url-prefix('') {
+  .str-chat--windows-flags {
+    .str-chat__textarea__textarea,
+    .str-chat__message-text-inner *,
+    .str-chat__emoji-item--entity,
+    .emoji-mart-emoji-native * {
+      font-family: ReplaceFlagEmojiSVG, var(--str-chat__font-family), sans-serif;
+      font-display: swap;
+    }
+  }
+}

package/dist/scss/v2/_global-theme-variables.scss

@@ -134,6 +134,9 @@
 
   /* If a component has a box shadow applied to it, this will be the color used for the shadow */
   --str-chat__box-shadow-color: rgba(0, 0, 0, 0.18);
+
+  /* Used for online indicator and success messages */
+  --str-chat__info-color: var(--str-chat__green500);
 }
 
 .str-chat__theme-dark {
@@ -163,4 +166,5 @@
   --str-chat__opaque-surface-background-color: rgba(250, 250, 250, 0.85);
   --str-chat__opaque-surface-text-color: var(--str-chat__grey900);
   --str-chat__box-shadow-color: rgba(0, 0, 0, 0.8);
+  --str-chat__info-color: var(--str-chat__green500);
 }

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

@@ -1,4 +1,5 @@
 @use 'base';
+@use 'emoji-replacement';
 @use 'global-layout-variables';
 
 @use 'Avatar/Avatar-layout';

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '10.7.1';
+export var version = '10.7.2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "10.7.1",
+  "version": "10.7.2",
   "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.2",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "^3.7.2",
+    "@stream-io/stream-chat-css": "^3.9.1",
     "clsx": "^1.1.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",