stream-chat-react 12.0.0-rc.1 → 12.0.0-rc.2

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

@@ -34,11 +34,6 @@
       @include utils.flex-row-center;
     }
   }
-
-  // This is displayed only in theme-v1
-  .str-chat__down-main {
-    display: none;
-  }
 }
 
 .str-chat__channel-list-react {

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

@@ -113,6 +113,7 @@
 
       .channel-search__result-text,
       .str-chat__channel-search-result--display-name {
+        @include utils.ellipsis-text;
         @include utils.prevent-glitch-text-overflow;
       }
     }

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

@@ -1,31 +1,31 @@
 @use '../utils';
 
 .str-chat {
-  /* The border radius used for the borders of the component */
+  /* The border radius used for the borders of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-radius: none;
 
-  /* The text color used for the send button */
+  /* The text color used for the send button. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
 
-  /* The text color used for the cancel button */
+  /* The text color used for the cancel button. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
 
-  /* The background color of the component */
+  /* The background color of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-background-color: transparent;
 
-  /* Top border of the component */
+  /* Top border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-block-start: none;
 
-  /* Bottom border of the component */
+  /* Bottom border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-block-end: none;
 
-  /* Left (right in RTL layout) border of the component */
+  /* Left (right in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-inline-start: none;
 
-  /* Right (left in RTL layout) border of the component */
+  /* Right (left in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-inline-end: none;
 
-  /* Box shadow applied to the component */
+  /* Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-box-shadow: none;
 }
 

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

@@ -1,7 +1,7 @@
 @use '../utils';
 
 .str-chat {
-  /* The width/height of the message options buttons */
+  /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */
   --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);
 
   /* The maximum allowed width of the message component */
@@ -26,6 +26,12 @@
 }
 
 .str-chat__message {
+  --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
+
+  &.str-chat__message-without-touch-support {
+    --str-chat-message-options-size: calc(1 * var(--str-chat__message-options-button-size));
+  }
+
   .str-chat__message-bubble {
     max-width: var(--str-chat__message-max-width);
   }
@@ -127,7 +133,7 @@
       align-items: flex-start;
       justify-content: flex-end;
       flex-direction: row-reverse;
-      width: calc(3 * var(--str-chat__message-options-button-size));
+      width: var(--str-chat-message-options-size);
 
       .str-chat__message-actions-box-button,
       .str-chat__message-reply-in-thread-button,
@@ -287,8 +293,8 @@
 }
 
 // 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__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support),
+.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) {
   /* 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__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) {
@@ -355,11 +361,11 @@
 }
 
 .str-chat__message--other .str-chat__message-inner {
-  margin-inline-end: calc(var(--str-chat__message-options-button-size) * 3);
+  margin-inline-end: var(--str-chat-message-options-size);
 }
 
 .str-chat__message--me .str-chat__message-inner {
-  margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
+  margin-inline-start: var(--str-chat-message-options-size);
 }
 
 .str-chat__li--middle,
@@ -512,3 +518,28 @@
 .str-chat__message-text--pointer-cursor {
   cursor: pointer;
 }
+
+.str-chat__message-with-touch-support {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &.str-chat__message-menu-opened {
+    .str-chat__attachments-container,
+    .str-chat__message-text-inner {
+      pointer-events: none;
+    }
+  }
+
+  .str-chat__message-inner {
+    margin-inline: 0;
+  }
+
+  .str-chat__message-options {
+    display: none;
+  }
+
+  .stream-chat-angular__image-modal-host {
+    -webkit-touch-callout: default;
+  }
+}

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

@@ -6,6 +6,17 @@
   position: absolute;
   inset-block-end: 100%;
 
+  &.str-chat-angular-v5__reaction-selector {
+    position: static;
+
+    .str-chat__message-reactions-options {
+      max-width: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      scrollbar-width: none;
+    }
+  }
+
   .str-chat__message-reactions-options {
     list-style: none;
     display: flex;

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

@@ -62,6 +62,11 @@
 
   /* Box shadow applied to the component */
   --str-chat__message-reactions-option-box-shadow: none;
+
+  .str-chat-angular-v5__reaction-selector {
+    --str-chat__message-reactions-options-box-shadow: none;
+    --str-chat__message-reactions-options-border-radius: 0;
+  }
 }
 
 .str-chat__reaction-selector {

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

@@ -21,7 +21,8 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
 
 .str-chat--windows-flags {
   // TODO: consider adding the rule for reactions (list & selector) if we ever decide to make them use native emojis
-  .str-chat__textarea__textarea,
+  .str-chat__textarea__textarea, // class name from theme v1
+  .str-chat__message-textarea,
   .str-chat__message-text-inner *,
   .str-chat__emoji-item--entity,
   .emoji-mart-emoji-native * {
@@ -32,7 +33,8 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
 
 @-moz-document url-prefix('') {
   .str-chat--windows-flags {
-    .str-chat__textarea__textarea,
+    .str-chat__textarea__textarea, // class name from theme v1
+    .str-chat__message-textarea,
     .str-chat__message-text-inner *,
     .str-chat__emoji-item--entity,
     .emoji-mart-emoji-native * {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "12.0.0-rc.1",
+  "version": "12.0.0-rc.2",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -140,7 +140,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.16.1",
+    "@stream-io/stream-chat-css": "5.0.0-rc.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",