stream-chat-react 11.4.0 → 11.5.0

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

@@ -30,6 +30,7 @@
     position: relative;
     height: $preview-height;
     width: $preview-height;
+    min-width: $preview-height;
     overflow: hidden;
 
     .str-chat__attachment-preview-image-loading {

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

@@ -72,6 +72,7 @@
       'avatar message'
       '. replies'
       '. translation-notice'
+      '. custom-metadata'
       '. metadata';
     column-gap: var(--str-chat__spacing-2);
     grid-template-columns: auto 1fr;
@@ -83,6 +84,7 @@
       'message'
       'replies'
       'translation-notice'
+      'custom-metadata'
       'metadata';
     justify-items: end;
 
@@ -182,6 +184,11 @@
     }
   }
 
+  .str-chat__custom-message-metadata {
+    grid-area: custom-metadata;
+    margin-block-start: var(--str-chat__spacing-0_5);
+  }
+
   .str-chat__message-metadata {
     grid-area: metadata;
     display: flex;
@@ -261,25 +268,37 @@
 // 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;
-      }
+  /* This rule won't be applied in browsers that don't support :has() */
+  .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) {
+    .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;
     }
   }
+
+  /* Fallback for when :has() is unsupported */
+  @supports not selector(:has(a, b)) {
+    .str-chat__li:hover {
+      .str-chat__message-options {
+        display: flex;
+      }
+
+      .str-chat__message--other .str-chat__message-inner {
+        margin-inline-end: 0;
+      }
+
+      .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
@@ -307,7 +326,8 @@
     display: none;
   }
 
-  .str-chat__message-edit-in-progress.str-chat__message-options {
+  .str-chat__message-edit-in-progress.str-chat__message-options,
+  .str-chat__message-actions-open.str-chat__message-options {
     display: flex;
   }
 }
@@ -404,3 +424,41 @@
     }
   }
 }
+
+.str-chat__unread-messages-separator-wrapper {
+  padding-block: 0.5rem;
+
+  .str-chat__unread-messages-separator {
+    @include utils.flex-row-center;
+    width: 100%;
+    padding: 0.5rem;
+  }
+}
+
+.str-chat__unread-messages-notification {
+  position: absolute;
+  top: 0.75rem;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  overflow: clip;
+
+  button {
+    padding-block: 0.5rem;
+    height: 100%;
+    width: 100%;
+    white-space: nowrap;
+  }
+
+  button:first-of-type {
+    padding-inline: 0.75rem 0.375rem;
+  }
+
+  button:last-of-type {
+    padding-inline: 0.375rem 0.75rem;
+
+    svg {
+      width: 0.875rem;
+    }
+  }
+}

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

@@ -261,7 +261,8 @@
     }
   }
 
-  .str-chat__message-metadata {
+  .str-chat__message-metadata,
+  .str-chat__custom-message-metadata {
     color: var(--str-chat__message-secondary-color);
     font: var(--str-chat__caption-text);
 
@@ -308,10 +309,18 @@
   background-color: var(--str-chat__message-highlighted-background-color);
 }
 
-.str-chat__li:hover {
+/* This rule won't be applied in browsers that don't support :has() */
+.str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) {
   background-color: var(--str-chat__message-active-bacground-color);
 }
 
+/* Fallback for when :has() is unsupported */
+@supports not selector(:has(a, b)) {
+  .str-chat__li:hover {
+    background-color: var(--str-chat__message-active-bacground-color);
+  }
+}
+
 .str-chat__li--top,
 .str-chat__li--single {
   .str-chat__message--other {
@@ -375,3 +384,26 @@
     }
   }
 }
+
+.str-chat__unread-messages-separator {
+  background-color: var(--str-chat__secondary-surface-color);
+  color: var(--str-chat__text-low-emphasis-color);
+  text-transform: uppercase;
+  font: var(--str-chat__caption-strong-text);
+}
+
+.str-chat__unread-messages-notification {
+  background-color: var(--str-chat__text-low-emphasis-color);
+  border-radius: 1.125rem;
+
+  button {
+    cursor: pointer;
+    color: var(--str-chat__on-primary-color);
+    border: none;
+    background-color: transparent;
+  }
+
+  button:first-of-type {
+    font: var(--str-chat__caption-text);
+  }
+}

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

@@ -21,22 +21,11 @@
 
 .str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) {
   display: none;
-  position: absolute;
   z-index: 1;
 
   &.str-chat__message-actions-box--open {
     display: block;
   }
-
-  &.str-chat__message-actions-box--mine {
-    inset-block-end: 100%;
-    inset-inline-start: 100%;
-  }
-
-  &:not(.str-chat__message-actions-box--mine) {
-    inset-block-end: 100%;
-    inset-inline-end: 100%;
-  }
 }
 
 .str-chat__message-edit-in-progress {

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

@@ -0,0 +1,18 @@
+.str-chat__message-bounce-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-chat__spacing-9);
+
+  .str-chat__message-bounce-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-2);
+  }
+
+  .str-chat__message-bounce-edit,
+  .str-chat__message-bounce-send,
+  .str-chat__message-bounce-delete {
+    cursor: pointer;
+    padding: var(--str-chat__spacing-2);
+  }
+}

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

@@ -0,0 +1,51 @@
+@use '../utils';
+
+.str-chat {
+  /* The text color used for the edit button */
+  --str-chat__message-bounce-edit-button-color: var(--str-chat__primary-color);
+
+  /* The text color used for the send button */
+  --str-chat__message-bounce-send-button-color: var(--str-chat__primary-color);
+
+  /* The text color used for the delete button */
+  --str-chat__message-bounce-delete-button-color: var(--str-chat__primary-color);
+
+  /* The background color of the button */
+  --str-chat__message-bounce-button-background-color: transparent;
+
+  /* Top border of the button */
+  --str-chat__message-bounce-button-border-block-start: none;
+
+  /* Bottom border of the button */
+  --str-chat__message-bounce-button-border-block-end: none;
+
+  /* Left (right in RTL layout) button of the component */
+  --str-chat__message-bounce-button-border-inline-start: none;
+
+  /* Right (left in RTL layout) button of the component */
+  --str-chat__message-bounce-button-border-inline-end: none;
+
+  /* Box shadow applied to the button */
+  --str-chat__message-bounce-button-box-shadow: none;
+}
+
+.str-chat__message-bounce-options {
+  .str-chat__message-bounce-edit,
+  .str-chat__message-bounce-send,
+  .str-chat__message-bounce-delete {
+    @include utils.component-layer-overrides('message-bounce-button');
+    font: var(--str-chat__body-medium-text);
+  }
+
+  .str-chat__message-bounce-edit {
+    color: var(--str-chat__message-bounce-edit-button-color);
+  }
+
+  .str-chat__message-bounce-send {
+    color: var(--str-chat__message-bounce-send-button-color);
+  }
+
+  .str-chat__message-bounce-delete {
+    color: var(--str-chat__message-bounce-delete-button-color);
+  }
+}

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

@@ -4,6 +4,9 @@
   display: flex;
 
   .str-chat__message-reactions {
+    overflow-y: hidden;
+    overflow-x: auto;
+    scrollbar-width: none;
     list-style: none;
     display: flex;
     margin-block-start: var(--str-chat__spacing-0_5);
@@ -19,6 +22,8 @@
       align-items: center;
       padding: var(--str-chat__spacing-1_5);
       position: relative;
+      cursor: pointer;
+      flex-shrink: 0;
 
       button {
         @include utils.button-reset;
@@ -53,3 +58,72 @@
     justify-content: flex-start;
   }
 }
+
+.str-chat__message-reactions-details-modal {
+  .str-chat__modal--open {
+    .str-chat__modal__inner {
+      height: 40%;
+      max-height: 80%;
+      min-width: 90%;
+      max-width: 90%;
+      width: 90%;
+      flex-basis: min-content;
+
+      @media only screen and (min-device-width: 768px) {
+        min-width: 40%;
+        max-width: 60%;
+        width: min-content;
+      }
+    }
+  }
+}
+
+.str-chat__message-reactions-details {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-chat__spacing-4);
+  max-height: 100%;
+  height: 100%;
+  min-height: 0;
+
+  .str-chat__message-reactions-details-reaction-types {
+    display: flex;
+    max-width: 100%;
+    width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    gap: var(--str-chat__spacing-4);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .str-chat__message-reactions-details-reaction-type {
+      display: flex;
+      align-items: center;
+      padding: var(--str-chat__spacing-1) 0;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+  }
+
+  .str-chat__message-reaction-emoji-big {
+    align-self: center;
+    font-size: 2rem;
+  }
+
+  .str-chat__message-reactions-details-reacting-users {
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-3);
+    max-height: 100%;
+    overflow-y: auto;
+    min-height: 0;
+
+    .str-chat__message-reactions-details-reacting-user {
+      display: flex;
+      align-items: center;
+      gap: var(--str-chat__spacing-2);
+    }
+  }
+}

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

@@ -56,6 +56,8 @@
   --str-chat__own-message-reaction-background-color: var(
     --str-chat__primary-surface-color-low-emphasis
   );
+
+  --str-chat__messsage-reactions-details--selected-color: solid var(--str-chat__primary-color);
 }
 
 .str-chat__message-reactions-container {
@@ -73,3 +75,18 @@
     }
   }
 }
+
+.str-chat__message-reactions-details {
+  .str-chat__message-reactions-details-reaction-type {
+    border-block-end: solid transparent;
+  }
+
+  .str-chat__message-reactions-details-reaction-type--selected {
+    border-block-end: var(--str-chat__messsage-reactions-details--selected-color);
+  }
+
+
+  .str-chat__message-reactions-details-reacting-user {
+    font: var(--str-chat__subtitle-text);
+  }
+}

package/dist/scss/v2/_base.scss

@@ -9,30 +9,13 @@
   // Overriding styles of ngx-popperjs
   .ngxp__container {
     z-index: 1;
-    margin: -8px !important;
     padding: 0 !important;
     box-shadow: none !important;
-    border: none !important;
+    border-color: transparent !important;
 
     .ngxp__arrow {
-      display: none !important;
-    }
-  }
-
-  // Quick fix for: https://github.com/tonysamperi/ngx-popperjs/issues/52
-  &.google-chrome {
-    popper-content {
-      .ngxp__container {
-        display: block !important;
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        opacity: 0;
-
-        &[aria-hidden="true"] {
-          visibility: hidden;
-        }
-      }
+      color: transparent;
+      width: 100%;
     }
   }
 }

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

@@ -24,6 +24,9 @@
   /* The font used for caption texts with emphasize */
   --str-chat__caption-medium-text: 500 0.75rem/1rem var(--str-chat__font-family);
 
+  /* The font used for caption texts with emphasize */
+  --str-chat__caption-strong-text: 700 0.75rem/1rem var(--str-chat__font-family);
+
   /* The font used for body texts */
   --str-chat__body-text: 0.875rem/1rem var(--str-chat__font-family);
 

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

@@ -20,6 +20,7 @@
 @use 'LoadingIndicator/LoadingIndicator-layout';
 @use 'Message/Message-layout';
 @use 'MessageActionsBox/MessageActionsBox-layout';
+@use 'MessageBounceOptions/MessageBounceOptions-layout';
 @use 'MessageInput/MessageInput-layout';
 @use 'MessageList/MessageList-layout';
 @use 'MessageList/VirtualizedMessageList-layout';

package/dist/scss/v2/index.scss

@@ -22,6 +22,7 @@
 @use 'LoadingIndicator/LoadingIndicator-theme';
 @use 'Message/Message-theme';
 @use 'MessageActionsBox/MessageActionsBox-theme';
+@use 'MessageBounceOptions/MessageBounceOptions-theme';
 @use 'MessageInput/MessageInput-theme';
 @use 'MessageList/MessageList-theme';
 @use 'MessageList/VirtualizedMessageList-theme';
@@ -34,4 +35,3 @@
 @use 'Thread/Thread-theme';
 @use 'Tooltip/Tooltip-theme';
 @use 'TypingIndicator/TypingIndicator-theme';
-

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.4.0';
+export var version = '11.5.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.4.0",
+  "version": "11.5.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -144,7 +144,7 @@
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
-    "@stream-io/stream-chat-css": "^4.2.0",
+    "@stream-io/stream-chat-css": "^4.6.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",
@@ -219,7 +219,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.15.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^28.0.8",
     "typescript": "^4.7.4",