stream-chat-react 10.4.1 → 10.5.0-alpha.0

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

@@ -1,88 +1,71 @@
 @use '../utils';
 
-.str-chat__channel-search {
-  position: relative;
+.str-chat__channel-search-bar {
+  @include utils.flex-row-center;
+  padding: var(--str-chat__spacing-2_5);
 
-  .str-chat__channel-search-bar {
-    @include utils.flex-row-center;
+  .str-chat__channel-search-bar-button {
+    @include utils.button-reset;
+    width: calc(var(--str-chat__spacing-px) * 40);
+    height: calc(var(--str-chat__spacing-px) * 40);
     padding: var(--str-chat__spacing-2_5);
+    cursor: pointer;
+  }
+
+  .str-chat__channel-search-input--wrapper {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    padding: var(--str-chat__spacing-2_5);
+    min-width: 0;
 
-    .str-chat__channel-search-bar-button {
+    .str-chat__channel-search-input--icon,
+    .str-chat__channel-search-input--clear-button {
+      display: inline-flex;
+      padding: 0 var(--str-chat__spacing-2_5);
+    }
+
+    .str-chat__channel-search-input--clear-button {
       @include utils.button-reset;
-      width: calc(var(--str-chat__spacing-px) * 40);
-      height: calc(var(--str-chat__spacing-px) * 40);
-      padding: var(--str-chat__spacing-2_5);
       cursor: pointer;
+
+      &:disabled {
+        cursor: default;
+      }
     }
 
-    .str-chat__channel-search-input--wrapper {
-      display: flex;
-      align-items: center;
+    input {
       flex: 1;
-      padding: var(--str-chat__spacing-2_5);
       min-width: 0;
-
-      .str-chat__channel-search-input--icon,
-      .str-chat__channel-search-input--clear-button {
-        display: inline-flex;
-        padding: 0 var(--str-chat__spacing-2_5);
-      }
-
-      .str-chat__channel-search-input--clear-button {
-        @include utils.button-reset;
-        cursor: pointer;
-
-        &:disabled {
-          cursor: default;
-        }
-      }
-
-      input {
-        flex: 1;
-        min-width: 0;
-      }
     }
   }
+}
 
-  .str-chat__channel-search-container-searching {
-    width: 100%;
-    padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
-  }
+.str-chat__channel-search-results-header {
+  width: 100%;
+  padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
+}
 
-  .str-chat__channel-search-results-header {
+.str-chat__channel-search-result-list {
+  .str-chat__channel-search-container-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     width: 100%;
-    padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
-  }
 
-
-  .str-chat__channel-search-result-list {
-    &.popup {
-      position: absolute;
-      left: 0;
-      right: 0;
-    }
-
-    .str-chat__channel-search-container-empty {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-      padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
-
-      svg {
-        height: calc(var(--str-chat__spacing-px) * 90 + var(--str-chat__spacing-20));
-        width: calc(var(--str-chat__spacing-px) * 90);
-        padding: var(--str-chat__spacing-10) 0;
-      }
+    svg {
+      height: calc(var(--str-chat__spacing-px) * 90 + var(--str-chat__spacing-20));
+      width: calc(var(--str-chat__spacing-px) * 90);
+      padding: var(--str-chat__spacing-10) 0;
     }
+  }
 
-    .str-chat__channel-search-result {
-      @include utils.button-reset;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      column-gap: var(--str-chat__spacing-2);
-      padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
-    }
+  .str-chat__channel-search-result {
+    @include utils.button-reset;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    column-gap: var(--str-chat__spacing-2);
+    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
   }
-}
+}

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

@@ -89,25 +89,6 @@
     --str-chat__secondary-surface-color
   );
 
-  --str-chat__channel-search-result-list-color: var(--str-chat__text-color);
-
-  --str-chat__channel-search-result-list-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the component  */
-  --str-chat__channel-search-result-list-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-search-result-list-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-search-result-list-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-search-result-list-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__channel-search-result-list-popup-box-shadow: 0 4px 4px var(--str-chat__box-shadow-color);
-
   /* The font color used in the search results header  */
   --str-chat__channel-search-results-header-color: var(--str-chat__text-low-emphasis-color);
 
@@ -127,25 +108,6 @@
   /* Right (left in RTL layout) border of the component */
   --str-chat__channel-search-results-header-border-inline-end: none;
 
-  /* The font color used in the search results loading indicator  */
-  --str-chat__channel-search-results-loading-indicator-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The background color used in the search results loading indicator  */
-  --str-chat__channel-search-results-loading-indicator-background-color: var(--str-chat__background-color);
-
-  /* Top border of the component  */
-  --str-chat__channel-search-results-loading-indicator-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-search-results-loading-indicator-border-block-end: var(--str-chat__surface-color) 1px
-    solid;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-search-results-loading-indicator-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-search-results-loading-indicator-border-inline-end: none;
-
   /* The font color used in the empty search results indicator  */
   --str-chat__channel-search-results-empty-color: var(--str-chat__text-low-emphasis-color);
 
@@ -200,16 +162,6 @@
 }
 
 .str-chat__channel-search-result-list {
-  @include utils.component-layer-overrides('channel-search-result-list');
-
-  &.popup {
-    box-shadow: var(--str-chat__channel-search-result-list-popup-box-shadow);
-  }
-
-  .str-chat__channel-search-container-searching {
-    @include utils.component-layer-overrides('channel-search-results-loading-indicator');
-  }
-
   .str-chat__channel-search-container-empty {
     @include utils.component-layer-overrides('channel-search-results-empty');
     font: var(--str-chat__subtitle2-medium-text);

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

@@ -32,9 +32,12 @@
 
     .str-chat__thread-start {
       text-align: start;
-      padding-top: var(--str-chat__spacing-3);
     }
   }
+
+  .str-chat__parent-message-li .str-chat__thread-start {
+    padding-top: var(--str-chat__spacing-3);
+  }
 }
 
 .str-chat__jump-to-latest-message {

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

@@ -14,15 +14,6 @@
     @include utils.message-list-spacing;
   }
 
-  .str-chat__parent-message-li {
-    padding-block-end: var(--str-chat__spacing-4);
-
-    .str-chat__thread-start {
-      text-align: start;
-      padding-top: var(--str-chat__spacing-3);
-    }
-  }
-
   // conditionally showing the header displaces items when prepending.
   // a simple workaround is to make the loading indicator an overlay.
   &__loading {
@@ -51,15 +42,3 @@
     padding-block-end: var(--str-chat__spacing-0_5);
   }
 }
-
-
-.str-chat__thread--virtualized {
-  .str-chat__main-panel-inner {
-    height: 100%;
-
-    // the first message in virtualized thread has to be separated from the top by padding, not margin
-    .str-chat__virtual-list-message-wrapper:first-of-type {
-      padding-block-start: var(--str-chat__spacing-4);
-    }
-  }
-}

package/dist/scss/v2/MessageList/VirtualizedMessageList-theme.scss

@@ -29,13 +29,4 @@
 
 .str-chat__virtual-list {
   @include utils.component-layer-overrides('virtual-list');
-
-  .str-chat__parent-message-li {
-    border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
-
-    .str-chat__thread-start {
-      color: var(--str-chat__thread-head-start-color);
-      font: var(--str-chat__subtitle-text);
-    }
-  }
 }

package/dist/scss/v2/Notification/NotificationList-theme.scss

@@ -26,6 +26,6 @@
   --str-chat__notification-list-box-shadow: none;
 }
 
-.str-chat__list-notifications {
-  @include utils.component-layer-overrides('notification-list');
+.str-chat__list-notification-lists {
+  @include utils.component-layer-overrides('notification-list-list');
 }

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

@@ -4,6 +4,6 @@
   display: flex;
   padding: var(--str-chat__spacing-2);
   z-index: 1;
+  word-break: normal;
   max-width: calc(var(--str-chat__spacing-px) * 150);
-  width: max-content;
 }

package/dist/scss/v2/_utils.scss

@@ -188,9 +188,13 @@
 }
 
 @mixin clamped-height-from-original-image-dimensions($max-height-css-var, $max-width-css-var) {
-  height: min(
-    var(#{$max-height-css-var}),
-    min(var(#{$max-width-css-var}, 1000000) / var(--original-width, 1000000), 1px) *
-      var(--original-height, 1000000)
+  height: calc(
+    min(
+        calc(var(#{$max-height-css-var}) * 1px),
+        calc(
+          min(calc(var(#{$max-width-css-var}) / var(--original-width) * 1px), 1) *
+            var(--original-height, Infinity)
+        )
+      ) * 1px
   );
 }

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "10.4.1";
+export declare const version = "10.5.0-alpha.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,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,mBAAmB,CAAC"}

package/dist/version.js

@@ -1 +1 @@
-export var version = '10.4.1';
+export var version = '10.5.0-alpha.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "10.4.1",
+  "version": "10.5.0-alpha.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",