stream-chat-react 14.0.0-beta.3 → 14.0.0-beta.5

package/dist/css/emoji-replacement.css

@@ -0,0 +1,34 @@
+/* png based woff for most browsers */
+@font-face {
+  font-family: ReplaceFlagEmojiPNG;
+  src: url("assets/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: U+1F1E6-1F1FF;
+}
+/* svg based for firefox */
+@font-face {
+  font-family: ReplaceFlagEmojiSVG;
+  src: url("assets/EmojiOneColor.woff2") format("woff2");
+  unicode-range: U+1F1E6-1F1FF;
+}
+.str-chat--windows-flags .str-chat__textarea__textarea,
+.str-chat--windows-flags .str-chat__message-textarea,
+.str-chat--windows-flags .str-chat__message-text-inner *,
+.str-chat--windows-flags .str-chat__emoji-item--entity,
+.str-chat--windows-flags .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--windows-flags .str-chat__message-textarea,
+  .str-chat--windows-flags .str-chat__message-text-inner *,
+  .str-chat--windows-flags .str-chat__emoji-item--entity,
+  .str-chat--windows-flags .emoji-mart-emoji-native * {
+    font-family: ReplaceFlagEmojiSVG, var(--str-chat__font-family), sans-serif;
+    font-display: swap;
+  }
+}
+
+/*# sourceMappingURL=emoji-replacement.css.map */

package/dist/css/emoji-replacement.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/styling/_emoji-replacement.scss"],"names":[],"mappings":"AAEA;AACA;EACE;EACA;AACA;EACA,eAPyB;;AAU3B;AACA;EACE;EACA;EACA,eAdyB;;AAmBzB;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;;AAIJ;EAEI;AAAA;AAAA;AAAA;AAAA;IAKE;IACA","file":"emoji-replacement.css"}

package/dist/css/index.css

@@ -1097,22 +1097,6 @@
   -moz-appearance: textfield;
 }
 
-/* declare asset path, useful if you want to create your own style bundle */
-@font-face {
-  font-family: "stream-chat-icons";
-  src: url("../assets/icons/stream-chat-icons.eot");
-  src: url("../assets/icons/stream-chat-icons.eot#iefix") format("embedded-opentype"), url("../assets/icons/stream-chat-icons.woff") format("woff2"), url("../assets/icons/stream-chat-icons.woff") format("woff"), url("../assets/icons/stream-chat-icons.ttf") format("truetype"), url("../assets/icons/stream-chat-icons.svg#stream-chat-icons") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  @font-face {
-    font-family: "stream-chat-icons";
-    src: url("../assets/icons/stream-chat-icons.svg#stream-chat-icons") format("svg");
-  }
-}
 .str-chat__icon {
   flex-shrink: 0;
   width: 1em;
@@ -1120,7 +1104,7 @@
   fill: currentColor;
 }
 
-.str-chat__icon--exclamation-circle {
+.str-chat__icon--exclamation-mark {
   stroke: currentColor;
 }
 
@@ -2205,6 +2189,10 @@
   height: var(--str-chat__dialog-overlay-height);
   width: 100%;
   z-index: 2;
+  pointer-events: none;
+}
+.str-chat__dialog-overlay .str-chat__dialog-contents {
+  pointer-events: auto;
 }
 
 .str-chat__prompt {
@@ -2246,6 +2234,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
 }
 .str-chat__prompt .str-chat__prompt__body .str-chat__prompt__title {
   margin-bottom: 1rem;
@@ -2363,6 +2352,7 @@
   width: 100%;
   height: 100%;
   z-index: 100;
+  pointer-events: auto;
   background-color: var(--str-chat__modal-overlay-color);
   backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter);
 }
@@ -3133,11 +3123,11 @@
   justify-content: center;
   overflow: hidden;
 }
-.str-chat__message-attachment-giphy img {
+.str-chat__message-attachment-giphy img.str-chat__base-image {
+  height: min(var(--str-chat__attachment-max-width), min(var(--str-chat__attachment-max-width, 1000000) / var(--original-width, 1000000), 1px) * var(--original-height, 1000000));
   object-fit: contain;
-  max-height: 100%;
-  max-width: 100%;
-  height: 100%;
+  max-height: var(--str-chat__attachment-max-width);
+  max-width: var(--str-chat__attachment-max-width);
   width: 100%;
   cursor: default;
 }
@@ -3489,7 +3479,7 @@
   justify-content: center;
   align-items: center;
   gap: var(--spacing-xs);
-  min-width: 40px;
+  min-width: 48px;
   min-height: 24px;
   max-height: 24px;
   padding: var(--button-padding-y-sm) var(--spacing-xs);
@@ -3859,6 +3849,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 0;
   position: relative;
 }
 .str-chat__channel .str-chat__container {
@@ -4136,11 +4127,15 @@
   border-inline-end: var(--str-chat__channel-header-border-inline-end);
   display: flex;
   align-items: center;
+  width: 100%;
   padding: var(--spacing-md);
   gap: var(--spacing-sm);
   height: var(--str-chat__channel-header-height);
   min-width: 0;
+}
+.str-chat__channel-header .str-chat__channel-header__start {
   flex: 1;
+  display: flex;
 }
 .str-chat__channel-header .str-chat__channel-header__data {
   display: flex;
@@ -4148,9 +4143,14 @@
   align-items: center;
   overflow-y: hidden;
   overflow-x: hidden;
-  flex: 1;
+  max-width: 100%;
   row-gap: var(--spacing-xxs);
 }
+.str-chat__channel-header .str-chat__channel-header__end {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
 .str-chat__channel-header .str-chat__channel-header__data__title,
 .str-chat__channel-header .str-chat__channel-header__data__subtitle {
   white-space: nowrap;
@@ -4245,6 +4245,7 @@
   flex-direction: column;
   height: 100%;
   max-width: 100%;
+  position: relative;
   min-width: 280px;
   opacity: 1;
   transform: translateX(0);
@@ -4253,6 +4254,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   background: var(--str-chat__channel-list-background-color);
   color: var(--str-chat__channel-list-color);
   box-shadow: var(--str-chat__channel-list-box-shadow);
@@ -4537,6 +4539,7 @@
   display: flex;
   width: 100%;
   height: 100%;
+  min-height: 0;
   position: relative;
 }
 .str-chat__chat-view .str-chat__chat-view__selector {
@@ -4636,6 +4639,7 @@
   display: flex;
   flex-grow: 1;
   min-width: 0;
+  min-height: 0;
   position: relative;
 }
 .str-chat__chat-view .str-chat__chat-view__threads {
@@ -5269,7 +5273,7 @@
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-playback--isPlaying .str-chat__recording-timer {
   color: var(--chat-waveform-bar-playing);
 }
-.str-chat__audio_recorder .str-chat__audio-recorder__recording-preview .str-chat__icon--microphone {
+.str-chat__audio_recorder .str-chat__audio-recorder__recording-preview .str-chat__icon--voice {
   height: var(--icon-size-sm);
   width: var(--icon-size-sm);
   color: var(--button-destructive-text);
@@ -6247,22 +6251,15 @@
   border-radius: var(--str-chat__message-options-border-radius);
   color: var(--str-chat__message-options-color);
 }
-.str-chat__message-options .str-chat__message-actions-box-button .str-chat__message-action-icon path,
-.str-chat__message-options .str-chat__message-reply-in-thread-button .str-chat__message-action-icon path,
-.str-chat__message-options .str-chat__message-reactions-button .str-chat__message-action-icon path {
-  fill: var(--str-chat__message-options-color);
-  stroke: var(--str-chat__message-options-color);
-  stroke-width: 0.25;
-}
 .str-chat__message-options .str-chat__message-actions-box-button:hover,
 .str-chat__message-options .str-chat__message-reply-in-thread-button:hover,
 .str-chat__message-options .str-chat__message-reactions-button:hover {
   background-color: var(--str-chat__message-options-hover-background-color);
 }
-.str-chat__message-options .str-chat__message-actions-box-button:active .str-chat__message-action-icon path,
-.str-chat__message-options .str-chat__message-reply-in-thread-button:active .str-chat__message-action-icon path,
-.str-chat__message-options .str-chat__message-reactions-button:active .str-chat__message-action-icon path {
-  fill: var(--str-chat__message-options-active-color);
+.str-chat__message-options .str-chat__message-actions-box-button:active,
+.str-chat__message-options .str-chat__message-reply-in-thread-button:active,
+.str-chat__message-options .str-chat__message-reactions-button:active {
+  color: var(--str-chat__message-options-active-color);
 }
 .str-chat__message-options .str-chat__message-actions-box-button,
 .str-chat__message-options .str-chat__message-actions-container {
@@ -6272,7 +6269,7 @@
 .str-chat__message-bounce-alert {
   max-width: 300px;
 }
-.str-chat__message-bounce-alert .str-chat__alert-header svg.str-chat__icon--exclamation-circle {
+.str-chat__message-bounce-alert .str-chat__alert-header svg.str-chat__icon--exclamation-mark {
   color: var(--text-tertiary);
 }
 
@@ -6495,7 +6492,7 @@
   background-color: var(--str-chat__attachment-preview-media-overlay-pressed-background-color);
 }
 .str-chat .str-chat__attachment-preview-media__overlay .str-chat__loading-indicator,
-.str-chat .str-chat__attachment-preview-media__overlay .str-chat__icon--exclamation-circle {
+.str-chat .str-chat__attachment-preview-media__overlay .str-chat__icon--exclamation-mark {
   width: 14px;
   height: 14px;
   position: absolute;
@@ -7028,6 +7025,7 @@
   outline: none;
   width: 100%;
   font-size: var(--typography-font-size-md);
+  scrollbar-width: none;
 }
 .str-chat .str-chat__message-composer-controls .str-chat__emoji-picker-button {
   display: flex;
@@ -7037,11 +7035,11 @@
   height: var(--icon-size-md);
   width: var(--icon-size-md);
 }
-.str-chat .str-chat__message-composer-controls .str-chat__start-recording-audio-button .str-chat__icon--microphone {
+.str-chat .str-chat__message-composer-controls .str-chat__start-recording-audio-button .str-chat__icon--voice {
   height: var(--icon-size-md);
   width: var(--icon-size-md);
 }
-.str-chat .str-chat__message-composer-controls .str-chat__send-button .str-chat__icon--paper-plane {
+.str-chat .str-chat__message-composer-controls .str-chat__send-button .str-chat__icon--send {
   height: var(--icon-size-md);
   width: var(--icon-size-md);
 }
@@ -7158,7 +7156,7 @@
   height: var(--typography-font-size-xs);
   width: var(--typography-font-size-xs);
 }
-.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__content .str-chat__quoted-message-preview__message .str-chat__icon--microphone path {
+.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__content .str-chat__quoted-message-preview__message .str-chat__icon--voice path {
   stroke-width: 2;
 }
 .str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__content .str-chat__quoted-message-preview__message .str-chat__quoted-message-preview__message-text {
@@ -7195,11 +7193,11 @@
   border-radius: var(--radius-max);
   background-color: var(--control-play-control-bg);
 }
-.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image .str-chat__attachment-preview__thumbnail__play-indicator .str-chat__icon--play-solid {
+.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image .str-chat__attachment-preview__thumbnail__play-indicator .str-chat__icon--play-fill {
   height: 12px;
   width: 12px;
 }
-.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image .str-chat__attachment-preview__thumbnail__play-indicator .str-chat__icon--play-solid path {
+.str-chat .str-chat__quoted-message-preview .str-chat__quoted-message-preview__image .str-chat__attachment-preview__thumbnail__play-indicator .str-chat__icon--play-fill path {
   fill: var(--control-play-control-icon);
 }
 .str-chat .str-chat__quoted-message-preview--own {
@@ -7286,6 +7284,7 @@
 }
 
 .str-chat__main-panel-inner {
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -7305,6 +7304,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   display: flex;
   justify-content: center;
   position: relative;
@@ -7328,6 +7328,7 @@
   max-width: 100%;
 }
 .str-chat__message-list .str-chat__message-list-scroll {
+  width: 100%;
   max-width: var(--str-chat__message-list-scroll-max-width);
 }
 .str-chat__message-list .str-chat__message-list-scroll .str-chat__ul {
@@ -7519,6 +7520,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   --str-chat__message-list-scroll-max-width: calc(
     var(--str-chat__message-composer-max-width) +
       var(--str-chat__message-composer-padding)
@@ -7916,6 +7918,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   scrollbar-width: none;
   display: flex;
   flex-direction: column;
@@ -8153,6 +8156,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   scrollbar-width: none;
   max-height: 564px;
   padding-bottom: var(--spacing-2xl);
@@ -8199,6 +8203,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   scrollbar-width: none;
   border-radius: var(--radius-lg);
   max-height: 250px;
@@ -8219,10 +8224,11 @@
   padding-inline: var(--spacing-sm);
 }
 .str-chat__reaction-selector .str-chat__reaction-selector-extended-list .str-chat__reaction-selector-extended-list__button .str-chat__reaction-icon {
-  height: 24px;
-  width: 24px;
-  font-size: 24px;
-  letter-spacing: 0;
+  height: var(--emoji-md);
+  width: var(--emoji-md);
+  font-size: var(--emoji-md);
+  letter-spacing: var(--typography-letter-spacing-default);
+  font-style: normal;
   line-height: 0;
   font-family: system-ui;
   display: flex;
@@ -8288,8 +8294,8 @@
 .str-chat__message-reactions .str-chat__message-reactions__list .str-chat__message-reactions__list-item {
   display: flex;
 }
-.str-chat__message-reactions .str-chat__message-reactions__list-item-button {
-  min-height: 26px;
+.str-chat__message-reactions .str-chat__message-reactions__list .str-chat__message-reactions__list-item--more {
+  height: 100%;
 }
 .str-chat__message-reactions .str-chat__message-reactions__list-button,
 .str-chat__message-reactions .str-chat__message-reactions__list-item-button {
@@ -8302,7 +8308,8 @@
   position: relative;
   display: flex;
   gap: var(--spacing-xxs);
-  padding: var(--spacing-xxs) var(--spacing-xs);
+  padding-inline: var(--spacing-xs);
+  padding-block: var(--spacing-xxxs);
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-max);
@@ -8339,12 +8346,10 @@
 }
 .str-chat__message-reactions .str-chat__message-reactions__list-button .str-chat__message-reactions__list-item-icon,
 .str-chat__message-reactions .str-chat__message-reactions__list-item-button .str-chat__message-reactions__list-item-icon {
-  font-size: 13px;
-  line-height: 16px;
   font-family: system-ui;
+  font-size: var(--font-size-size-17);
   font-style: normal;
-  letter-spacing: 0;
-  display: flex;
+  line-height: var(--typography-line-height-normal);
 }
 .str-chat__message-reactions .str-chat__message-reactions__list-button .str-chat__message-reactions__total-count,
 .str-chat__message-reactions .str-chat__message-reactions__list-button .str-chat__message-reactions__overflow-count,
@@ -8354,10 +8359,7 @@
 .str-chat__message-reactions .str-chat__message-reactions__list-item-button .str-chat__message-reactions__list-item-count {
   display: flex;
   align-items: center;
-  color: var(--reaction-text);
-  font-size: var(--typography-font-size-xxs);
-  font-weight: var(--typography-font-weight-bold);
-  line-height: 1;
+  font: var(--str-chat__numeric-md-text);
 }
 .str-chat__message-reactions--bottom .str-chat__message-reactions__list-button,
 .str-chat__message-reactions--bottom .str-chat__message-reactions__list-item-button {
@@ -8427,7 +8429,8 @@
   position: relative;
   display: flex;
   gap: var(--spacing-xxs);
-  padding: var(--spacing-xxs) var(--spacing-xs);
+  padding-inline: var(--spacing-xs);
+  padding-block: var(--spacing-xxxs);
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-max);
@@ -8460,22 +8463,20 @@
   box-shadow: unset;
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__reaction-type-list .str-chat__message-reactions-detail__reaction-type-list-item .str-chat__message-reactions-detail__reaction-type-list-item-button .str-chat__message-reactions-detail__reaction-type-list-item-icon {
-  font-size: 13px;
-  line-height: 16px;
   font-family: system-ui;
+  font-size: var(--font-size-size-17);
   font-style: normal;
-  letter-spacing: 0;
-  display: flex;
+  line-height: var(--typography-line-height-normal);
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__reaction-type-list .str-chat__message-reactions-detail__reaction-type-list-item .str-chat__message-reactions-detail__reaction-type-list-item-button .str-chat__message-reactions-detail__reaction-type-list-item-count {
   color: var(--reaction-text);
-  font-size: var(--typography-font-size-xxs);
-  font-weight: var(--typography-font-weight-bold);
+  font: var(--str-chat__metadata-emphasis-text);
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list {
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   scrollbar-width: none;
   position: relative;
   padding-block-end: var(--spacing-xxs);
@@ -8523,12 +8524,10 @@
   padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs));
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-icon {
-  font-size: 14px;
-  line-height: 20px;
   font-family: system-ui;
+  font-size: var(--font-size-size-17);
   font-style: normal;
-  letter-spacing: 0;
-  display: flex;
+  line-height: var(--typography-line-height-normal);
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-info {
   display: flex;
@@ -8747,6 +8746,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
 }
 .str-chat .str-chat__suggestion-list .str-chat__suggestion-list-item--selected {
   background-color: var(--str-chat__dialog-menu-button-hover-background-color);
@@ -8789,14 +8789,6 @@
   width: 100%;
 }
 
-.str-chat__thread .str-chat__main-panel-inner {
-  height: auto;
-}
-
-.str-chat__thread--virtualized .str-chat__main-panel-inner {
-  height: 100%;
-}
-
 .str-chat__parent-message-li {
   padding-block-start: var(--spacing-sm);
 }
@@ -8842,6 +8834,7 @@
 .str-chat__thread-header {
   display: flex;
   align-items: center;
+  width: 100%;
   padding: var(--spacing-md);
   gap: var(--spacing-sm);
   height: var(--str-chat__channel-header-height);
@@ -8870,7 +8863,7 @@
   align-items: center;
   overflow-y: hidden;
   overflow-x: hidden;
-  flex: 1;
+  max-width: 100%;
   row-gap: var(--spacing-xxs);
   align-items: start;
 }
@@ -8888,6 +8881,15 @@
 .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-subtitle {
   overflow-y: hidden;
 }
+.str-chat__thread-header .str-chat__thread-header__start {
+  flex: 1;
+  display: flex;
+}
+.str-chat__thread-header .str-chat__thread-header__end {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
 .str-chat__thread-header .str-chat__close-thread-button {
   display: flex;
   align-items: flex-start;
@@ -8909,6 +8911,7 @@
 .str-chat__thread-header--main {
   display: flex;
   align-items: center;
+  width: 100%;
   padding: var(--spacing-md);
   gap: var(--spacing-sm);
   height: var(--str-chat__channel-header-height);
@@ -8922,7 +8925,7 @@
   align-items: center;
   overflow-y: hidden;
   overflow-x: hidden;
-  flex: 1;
+  max-width: 100%;
   row-gap: var(--spacing-xxs);
 }
 .str-chat__thread-header--main .str-chat__thread-header--main__details .str-chat__thread-header--main__title {