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

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

@@ -1,75 +0,0 @@
-/* Only available in React SDK. */
-.str-chat {
-  --str-chat-thread-list-border-color: var(--str-chat__surface-color);
-  --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color);
-
-  --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color);
-  --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color);
-
-  --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color);
-  --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color);
-
-  --str-chat-thread-list-item-text-color: var(--str-chat__text-color);
-  --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color);
-
-  --str-chat-thread-list-empty-placeholder-background-color: var(
-    --str-chat__secondary-background-color
-  );
-  --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color);
-}
-
-.str-chat__thread-list-container {
-  background-color: var(--str-chat-thread-list-container-background-color);
-}
-
-.str-chat__unseen-threads-banner {
-  border-radius: 16px;
-  background: var(--str-chat-unseen-threads-banner-background-color);
-  color: var(--str-chat-unseen-threads-banner-color);
-
-  &__button {
-    --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color);
-  }
-}
-
-.str-chat__thread-list {
-  
-  border-right: 1px solid var(--str-chat-thread-list-border-color);
-  
-  .str-chat__thread-list-item {
-    --str-chat-icon-color: var(--str-chat-thread-list-item-text-color);
-    
-    border: none;
-    background-color: var(--str-chat-thread-list-item-background-color-default);
-    color: var(--str-chat-thread-list-item-text-color);
-
-    &[aria-selected='true'] {
-      background-color: var(--str-chat-thread-list-item-background-color-selected);
-
-      .str-chat__thread-list-item__parent-message-text,
-      .str-chat__thread-list-item__latest-reply-text-and-timestamp {
-        color: inherit;
-      }
-    }
-
-    .str-chat__thread-list-item__parent-message-text {
-      color: var(--str-chat-thread-list-item-text-low-emphasis-color);
-    }
-
-    .str-chat__thread-list-item__latest-reply {
-      --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color);
-      --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color);
-    }
-
-    .str-chat__thread-list-item__latest-reply-text-and-timestamp {
-      color: var(--str-chat-thread-list-item-text-low-emphasis-color);
-    }
-  }
-}
-
-.str-chat__thread-list-empty-placeholder {
-  --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color);
-
-  background-color: var(--str-chat-thread-list-empty-placeholder-background-color);
-  color: var(--str-chat-thread-list-empty-placeholder-color);
-}

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

@@ -1,10 +0,0 @@
-@use '../utils';
-
-.str-chat__tooltip {
-  @include utils.prevent-glitch-text-overflow;
-  display: flex;
-  padding: var(--str-chat__spacing-2);
-  z-index: 1;
-  max-width: calc(var(--str-chat__spacing-px) * 150);
-  width: max-content;
-}

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

@@ -1,36 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__tooltip-border-radius: var(--str-chat__border-radius-xs);
-
-  /* The text/icon color of the component */
-  --str-chat__tooltip-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__tooltip-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the component */
-  --str-chat__tooltip-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__tooltip-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__tooltip-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__tooltip-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__tooltip-box-shadow: 0 0 20px var(--str-chat__box-shadow-color);
-}
-
-.str-chat__tooltip {
-  @include utils.component-layer-overrides('tooltip');
-  font: var(--str-chat__caption-text);
-
-  &::after {
-    background-color: var(--str-chat__tooltip-background-color);
-  }
-}

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

@@ -1,31 +0,0 @@
-@use '../utils';
-
-.str-chat__typing-indicator-react-host {
-  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;
-  justify-content: flex-start;
-  align-items: center;
-  column-gap: var(--str-chat__spacing-1);
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-
-  .str-chat__typing-indicator__dots {
-    @include utils.flex-row-center;
-    column-gap: var(--str-chat__spacing-0_5);
-
-    .str-chat__typing-indicator__dot {
-      width: calc(var(--str-chat__spacing-px) * 4);
-      height: calc(var(--str-chat__spacing-px) * 4);
-    }
-  }
-}

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

@@ -1,68 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__typing-indicator-border-radius: none;
-
-  /* The text/icon color of the component */
-  --str-chat__typing-indicator-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The background color of the component */
-  --str-chat__typing-indicator-background-color: var(--str-chat__overlay-color);
-
-  /* Top border of the component */
-  --str-chat__typing-indicator-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__typing-indicator-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__typing-indicator-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__typing-indicator-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__typing-indicator-box-shadow: none;
-
-  /* Background color of the animated dots in the typing indicator */
-  --str-chat__typing-indicator-dot-background-color: var(--str-chat__text-color);
-}
-
-.str-chat__typing-indicator {
-  @include utils.component-layer-overrides('typing-indicator');
-
-  .str-chat__typing-indicator__dots {
-    .str-chat__typing-indicator__dot {
-      border-radius: 999px;
-      animation: dotFlashing 1s infinite alternate;
-      background-color: var(--str-chat__typing-indicator-dot-background-color);
-
-      &:nth-child(1) {
-        animation-delay: 0s;
-      }
-
-      &:nth-child(2) {
-        animation-delay: 0.5s;
-      }
-
-      &:nth-child(3) {
-        animation-delay: 1s;
-      }
-
-      @keyframes dotFlashing {
-        0% {
-          opacity: 1;
-        }
-
-        50% {
-          opacity: 0.6;
-        }
-
-        100% {
-          opacity: 0.2;
-        }
-      }
-    }
-  }
-}

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

@@ -1,49 +0,0 @@
-.str-chat {
-  --str-chat-unread-count-badge-absolute-offset-vertical: 50%;
-  --str-chat-unread-count-badge-absolute-offset-horizontal: 50%;
-}
-
-.str-chat__unread-count-badge-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.str-chat__unread-count-badge {
-  font-size: 12px;
-  min-width: 22px;
-  min-height: 22px;
-  line-height: 8px;
-  font-weight: 700;
-  padding: 7px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-variant-numeric: tabular-nums;
-
-  &--top-right {
-    position: absolute;
-    translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal)
-      calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
-  }
-
-  &--bottom-left {
-    position: absolute;
-    translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1)
-      var(--str-chat-unread-count-badge-absolute-offset-vertical);
-  }
-
-  &--bottom-right {
-    position: absolute;
-    translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal)
-      var(--str-chat-unread-count-badge-absolute-offset-vertical);
-  }
-
-  &--top-left {
-    position: absolute;
-    translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1)
-      calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
-  }
-}

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

@@ -1,11 +0,0 @@
-/* Only available in React SDK. */
-.str-chat {
-  --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color);
-  --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color);
-}
-
-.str-chat__unread-count-badge {
-  background-color: var(--str-chat-unread-count-badge-background-color);
-  color: var(--str-chat-unread-count-badge-color);
-  border-radius: 9999px;
-}

package/dist/scss/v2/_base.scss

@@ -1,65 +0,0 @@
-.str-chat {
-  box-sizing: border-box;
-  font-family: var(--str-chat__font-family);
-
-  * {
-    box-sizing: border-box;
-  }
-
-  // Overriding styles of ngx-popperjs/ngx-float-ui
-  .ngxp__container,
-  .float-ui-container {
-    z-index: 1;
-    padding: 0 !important;
-    box-shadow: none !important;
-    border-color: transparent !important;
-    max-width: 100vw;
-
-    .ngxp__arrow {
-      display: none;
-    }
-  }
-}
-
-// Fixes icon sizing problem in Angular SDK
-stream-icon,
-stream-icon-placeholder {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.stream-chat__paginated-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  max-height: 100%;
-  min-height: 0;
-  gap: var(--str-chat__spacing-2);
-
-  .str-chat__loading-indicator {
-    margin: auto;
-  }
-
-  .str-chat__load-more-button__button {
-    margin-inline: auto;
-  }
-}
-
-stream-paginated-list {
-  height: 100%;
-  max-height: 100%;
-}
-
-stream-user-list {
-  height: 100%;
-  max-height: 100%;
-
-  .str-chat__user-list-item {
-    display: flex;
-    align-items: center;
-    gap: var(--str-chat__spacing-2);
-  }
-}

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

@@ -1,45 +0,0 @@
-@use 'variables';
-
-$assetsPath: variables.$assetsPath !default;
-
-$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 {
-  // TODO: consider adding the rule for reactions (list & selector) if we ever decide to make them use native emojis
-  .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 * {
-    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, // class name from theme v1
-    .str-chat__message-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-layout-variables.scss

@@ -1,65 +0,0 @@
-// Since Angular uses dynamic components it's not enough the hide the message input for theme-v1/v2, we have to remove it from the DOM tree
-// Angular component lifecycle requires us to place this on the root level
-:root {
-  /* The theme version being used, 1 or 2. Used internally by SDKs */
-  --str-chat__theme-version: 2;
-}
-
-.str-chat {
-  /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
-  --str-chat__spacing-px: 1px;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-0_5: 0.125rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-1: 0.25rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-1_5: 0.375rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-2: 0.5rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-2_5: 0.625rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-3: 0.75rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-3_5: 0.875rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-4: 1rem; // 16px by default
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-5: 1.25rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-6: 1.5rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-7: 1.75rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-8: 2rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-9: 2.25rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-10: 2.5rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-11: 2.75rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-12: 3rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-14: 3.5rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-16: 4rem;
-}

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

@@ -1,173 +0,0 @@
-.str-chat {
-  /* Border radius used for slightly rounded elements */
-  --str-chat__border-radius-xs: 8px;
-
-  /* Border radius used for slightly rounded elements */
-  --str-chat__border-radius-sm: 14px;
-
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-md: 18px;
-
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-lg: 20px;
-
-  /* Border radius used for circular elements */
-  --str-chat__border-radius-circle: 999px;
-
-  /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
-  --str-chat__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, Helvetica Neue, sans-serif;
-
-  /* The font used for caption texts */
-  --str-chat__caption-text: 0.75rem/1.3 var(--str-chat__font-family);
-
-  /* The font used for caption texts with emphasize */
-  --str-chat__caption-medium-text: 500 0.75rem/1.3 var(--str-chat__font-family);
-
-  /* The font used for caption texts with emphasize */
-  --str-chat__caption-strong-text: 700 0.75rem/1.3 var(--str-chat__font-family);
-
-  /* The font used for body texts */
-  --str-chat__body-text: 0.875rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for body texts with emphasize */
-  --str-chat__body-medium-text: 500 0.875rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for body texts */
-  --str-chat__body2-text: 0.9375rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for body texts with emphasize */
-  --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for subtitle texts */
-  --str-chat__subtitle-text: 1rem/1.25 var(--str-chat__font-family);
-
-  /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family);
-
-  /* The font used for subtitle texts */
-  --str-chat__subtitle2-text: 1.25rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle2-medium-text: 500 1.25rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for headline texts */
-  --str-chat__headline-text: 1.5rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for headline texts */
-  --str-chat__headline2-text: 1.8rem/1.2 var(--str-chat__font-family);
-}
-
-.str-chat,
-.str-chat__theme-light {
-  /* Used for emphasis, brands can inject their main color using this variable */
-  --str-chat__primary-color: var(--str-chat__blue500);
-
-  /* Used for emphasised overlays - color of --str-chat__primary-color with alpha channel */
-  --str-chat__primary-overlay-color: rgba(0, 95, 255, 0.6);
-
-  /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */
-  --str-chat__primary-color-low-emphasis: var(--str-chat__blue300);
-
-  /* Used to indicate that a UI element with primary color is in an active state */
-  --str-chat__active-primary-color: var(--str-chat__blue600);
-
-  /* If the primary color is used as a background, text/icons are displayed in this color */
-  --str-chat__on-primary-color: var(--str-chat__grey50);
-
-  /* Used as a background color for the main chat UI components */
-  --str-chat__background-color: var(--str-chat__grey50);
-
-  /* Used as a background color for the main chat UI components */
-  --str-chat__secondary-background-color: var(--str-chat__grey50);
-
-  /* Used as a background color to give emphasis, but less vibrant than the primary color */
-  --str-chat__primary-surface-color: var(--str-chat__blue100);
-
-  /* Used as a background color to give emphasis, but less vibrant than the primary surface color */
-  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue50);
-
-  /* A neutral color used to give emphasis to different surfaces */
-  --str-chat__surface-color: var(--str-chat__grey300);
-
-  /* A neutral color used to give emphasis to different surfaces */
-  --str-chat__secondary-surface-color: var(--str-chat__grey200);
-
-  /* A neutral color used to give emphasis to different surfaces */
-  --str-chat__tertiary-surface-color: var(--str-chat__grey100);
-
-  /* The main color used for texts/icons */
-  --str-chat__text-color: var(--str-chat__grey950);
-
-  /* Used for texts/icons that need less emphasis */
-  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
-
-  /* Used for displaying disabled UI elements (typically buttons) */
-  --str-chat__disabled-color: var(--str-chat__grey400);
-
-  /* Used for text/icon colors if disabled color is used as a background color */
-  --str-chat__on-disabled-color: var(--str-chat__grey50);
-
-  /* Used for error messages, and destructive actions */
-  --str-chat__danger-color: var(--str-chat__red400);
-
-  /* The background color used to highlight a message when jumping to a message. Only available in React SDK. */
-  --str-chat__message-highlight-color: var(--str-chat__yellow100);
-
-  /* Used for displaying the unread badge */
-  --str-chat__unread-badge-color: var(--str-chat__red400);
-
-  /* Used for text/icon colors if unread badge color is used as a background color */
-  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
-
-  /* The background color used for overlays */
-  --str-chat__overlay-color: rgba(252, 252, 252, 0.9);
-
-  /* The background color used for subtle overlays */
-  --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.2);
-
-  /* The text/icon color used on subtle overlays */
-  --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
-
-  /* The background color used for opaque surfaces */
-  --str-chat__opaque-surface-background-color: rgba(0, 0, 0, 0.8);
-
-  /* The text color used on opaque surfaces */
-  --str-chat__opaque-surface-text-color: var(--str-chat__grey50);
-
-  /* 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 {
-  --str-chat__primary-color: var(--str-chat__blue400);
-  --str-chat__primary-overlay-color: rgba(51, 126, 255, 0.6);
-  --str-chat__primary-color-low-emphasis: var(--str-chat__blue700);
-  --str-chat__active-primary-color: var(--str-chat__blue600);
-  --str-chat__on-primary-color: var(--str-chat__grey50);
-  --str-chat__background-color: var(--str-chat__grey950);
-  --str-chat__secondary-background-color: var(--str-chat__grey900);
-  --str-chat__primary-surface-color: var(--str-chat__blue900);
-  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue950);
-  --str-chat__surface-color: var(--str-chat__grey700);
-  --str-chat__secondary-surface-color: var(--str-chat__grey800);
-  --str-chat__tertiary-surface-color: var(--str-chat__grey900);
-  --str-chat__text-color: var(--str-chat__grey50);
-  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
-  --str-chat__disabled-color: var(--str-chat__grey600);
-  --str-chat__on-disabled-color: var(--str-chat__grey50);
-  --str-chat__danger-color: var(--str-chat__red600);
-  --str-chat__message-highlight-color: var(--str-chat__yellow900);
-  --str-chat__unread-badge-color: var(--str-chat__red400);
-  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
-  --str-chat__overlay-color: rgba(0, 0, 0, 0.7);
-  --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.4);
-  --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
-  --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);
-}