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

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

@@ -1,100 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__channel-border-radius: 0;
-
-  /* The text/icon color of the component */
-  --str-chat__channel-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__channel-background-color: var(--str-chat__background-color);
-
-  /* Box shadow applied to the component */
-  --str-chat__channel-box-shadow: none;
-
-  /* Top border of the component */
-  --str-chat__channel-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-border-inline-end: none;
-
-  /* The icon color used when no channel is selected */
-  --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
-
-  /* The text color used when no channel is selected */
-  --str-chat__channel-empty-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The color of the loading indicator */
-  --str-chat__channel-loading-state-color: var(--str-chat__disabled-color);
-}
-
-.str-chat__channel {
-  @include utils.component-layer-overrides('channel');
-}
-
-.str-chat__empty-channel {
-  --str-chat-icon-color: var(--str-chat__channel-empty-color);
-  @include utils.component-layer-overrides('channel');
-  @include utils.empty-theme('channel');
-
-  .str-chat__empty-channel-text {
-    color: var(--str-chat__channel-empty-color);
-  }
-}
-
-.str-chat__loading-channel {
-  @include utils.loading-animation;
-
-  .str-chat__loading-channel-header {
-    background-color: var(--str-chat__channel-header-background-color);
-
-    .str-chat__loading-channel-header-avatar {
-      @include utils.loading-item-background('channel');
-      border-radius: var(--str-chat__avatar-border-radius);
-    }
-
-    .str-chat__loading-channel-header-name,
-    .str-chat__loading-channel-header-info {
-      @include utils.loading-item-background('channel');
-      border-radius: var(--str-chat__border-radius-xs);
-    }
-  }
-
-  .str-chat__loading-channel-message-list {
-    background-color: var(--str-chat__message-list-background-color);
-
-    .str-chat__loading-channel-message-avatar {
-      @include utils.loading-item-background('channel');
-      border-radius: var(--str-chat__avatar-border-radius);
-    }
-
-    .str-chat__loading-channel-message-sender,
-    .str-chat__loading-channel-message-text,
-    .str-chat__loading-channel-message-date {
-      @include utils.loading-item-background('channel');
-      border-radius: var(--str-chat__message-bubble-border-radius);
-    }
-  }
-
-  .str-chat__loading-channel-message-input-row {
-    .str-chat__loading-channel-message-input,
-    .str-chat__loading-channel-message-send {
-      @include utils.loading-item-background('channel');
-    }
-
-    .str-chat__loading-channel-message-input {
-      border-radius: var(--str-chat__message-textarea-border-radius);
-    }
-
-    .str-chat__loading-channel-message-send {
-      border-radius: var(--str-chat__message-send-border-radius);
-    }
-  }
-}

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

@@ -1,27 +0,0 @@
-@use '../utils';
-
-.str-chat__channel-header {
-  @include utils.header-layout;
-
-  // Only visible in theme-v1
-  .str-chat__header-hamburger {
-    display: none;
-  }
-
-  .str-chat__channel-header-end {
-    @include utils.header-text-layout;
-
-    p {
-      margin: 0;
-    }
-
-    .str-chat__channel-header-title,
-    .str-chat__channel-header-info {
-      @include utils.ellipsis-text;
-    }
-
-    .str-chat__channel-header-title {
-      @include utils.prevent-glitch-text-overflow;
-    }
-  }
-}

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

@@ -1,43 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__channel-header-border-radius: 0;
-
-  /* The text/icon color of the component */
-  --str-chat__channel-header-color: 0;
-
-  /* The background color of the component */
-  --str-chat__channel-header-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the component */
-  --str-chat__channel-header-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-header-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-header-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-header-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__channel-header-box-shadow: none;
-
-  /* The text/icon color used to display member information about the channel */
-  --str-chat__channel-header-info-color: var(--str-chat__text-low-emphasis-color);
-}
-
-.str-chat__channel-header {
-  @include utils.component-layer-overrides('channel-header');
-
-  .str-chat__channel-header-title {
-    font: var(--str-chat__subtitle-medium-text);
-  }
-
-  .str-chat__channel-header-info {
-    font: var(--str-chat__body-text);
-    color: var(--str-chat__channel-header-info-color);
-  }
-}

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

@@ -1,65 +0,0 @@
-@use '../utils';
-
-.str-chat__channel-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  .str-chat__channel-list-messenger {
-    height: 100%;
-
-    .str-chat__channel-list-messenger__main {
-      height: 100%;
-
-      .str-chat__channel-list-empty {
-        --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
-        @include utils.empty-layout;
-      }
-
-      // Empty channel list for theme-v1
-      .str-chat__channel-list-empty-v1 {
-        display: none;
-      }
-    }
-  }
-
-  .str-chat__load-more-button {
-    display: flex;
-    justify-content: center;
-    margin: var(--str-chat__spacing-2) 0;
-
-    .str-chat__load-more-button__button {
-      @include utils.flex-row-center;
-    }
-  }
-
-  .stream-chat__paginated-list {
-    gap: 0;
-  }
-}
-
-.str-chat__channel-list-react {
-  overflow: hidden;
-
-  .str-chat__channel-list-messenger-react {
-    overflow: hidden;
-    padding-bottom: var(--str-chat__spacing-2_5);
-
-    .str-chat__channel-list-messenger-react__main {
-      overflow-y: auto;
-    }
-  }
-}
-
-.str-chat-angular__channel-list {
-  .str-chat__channel-list-messenger__main {
-    display: flex;
-    flex-direction: column;
-
-    stream-paginated-list {
-      min-height: 0;
-    }
-  }
-}

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

@@ -1,89 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__channel-list-border-radius: 0;
-
-  /* The text/icon color of the component */
-  --str-chat__channel-list-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__channel-list-background-color: var(--str-chat__secondary-background-color);
-
-  /* Box shadow applied to the component */
-  --str-chat__channel-list-box-shadow: none;
-
-  /* Top border of the component */
-  --str-chat__channel-list-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-list-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-list-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
-
-  /* The border radius used for the borders of the load more button */
-  --str-chat__channel-list-load-more-border-radius: var(--str-chat__cta-button-border-radius);
-
-  /* The text/icon color of the load more button */
-  --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color);
-
-  /* The background color of the load more button */
-  --str-chat__channel-list-load-more-background-color: var(--str-chat__cta-button-background-color);
-
-  /* Box shadow applied to the load more button */
-  --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow);
-
-  /* Top border of the load more button */
-  --str-chat__channel-list-load-more-border-block-start: var(
-    --str-chat__cta-button-border-block-start
-  );
-
-  /* Bottom border of the load more button */
-  --str-chat__channel-list-load-more-border-block-end: var(--str-chat__cta-button-border-block-end);
-
-  /* Left (right in RTL layout) border of the load more button */
-  --str-chat__channel-list-load-more-border-inline-start: var(
-    --str-chat__cta-button-border-inline-start
-  );
-
-  /* Right (left in RTL layout) border of the load more button */
-  --str-chat__channel-list-load-more-border-inline-end: var(
-    --str-chat__cta-button-border-inline-end
-  );
-
-  /* The background color of the load more button in pressed state */
-  --str-chat__channel-list-load-more-pressed-background-color: var(
-    --str-chat__cta-button-pressed-background-color
-  );
-
-  /* The background color of the load more button in disabled state */
-  --str-chat__channel-list-load-more-disabled-background-color: var(
-    --str-chat__cta-button-disabled-background-color
-  );
-
-  /* The text/icon color of the load more button in disabled state */
-  --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
-
-  /* The text/icon color for the empty list state */
-  --str-chat__channel-list-empty-indicator-color: var(--str-chat__text-low-emphasis-color);
-}
-
-.str-chat__channel-list {
-  @include utils.component-layer-overrides('channel-list');
-
-  .str-chat__load-more-button__button {
-    @include utils.component-layer-overrides('channel-list-load-more');
-    @include utils.cta-button-overrides('channel-list-load-more');
-    width: 80%;
-  }
-
-  .str-chat__channel-list-empty {
-    --str-chat-icon-color: var(--str-chat__channel-list-empty-indicator-color);
-    @include utils.empty-theme('channel-list');
-    color: var(--str-chat__channel-list-empty-indicator-color);
-  }
-}

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

@@ -1,126 +0,0 @@
-@use '../utils';
-
-@mixin channel-preview-layout {
-  display: flex;
-  column-gap: var(--str-chat__spacing-2);
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
-  margin: 0;
-  text-align: start;
-}
-
-@mixin channel-preview-end-layout {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--str-chat__spacing-0_5);
-  width: 100%;
-}
-
-// Unread badge will be bigger than channel name -> this would cause a layout shift when the unread badge appears -> this trick won't let the unread badge to increase the height of the container avoiding the layout shift
-@mixin unread-badge-layout-fix {
-  .str-chat__channel-preview-end-first-row {
-    height: var(--str-chat__unread-badge-height);
-  }
-}
-
-.str-chat__channel-preview-container {
-  position: relative;
-
-  .str-chat__channel-preview__action-buttons {
-    position: absolute;
-    right: var(--str-chat__spacing-2);
-    bottom: var(--str-chat__spacing-3);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 1px;
-
-    .str-chat__channel-preview__action-button {
-
-      --str-chat-icon-height: 13px;
-      cursor: pointer;
-      padding-block: 2px;
-      padding-inline: 4px;
-    }
-  }
-}
-
-.str-chat__channel-preview {
-  @include channel-preview-layout;
-  cursor: pointer;
-
-  .str-chat__channel-preview-end {
-    @include channel-preview-end-layout;
-    @include utils.ellipsis-text-parent;
-
-    .str-chat__channel-preview-end-first-row {
-      display: flex;
-      column-gap: var(--str-chat__spacing-1);
-      align-items: stretch;
-
-      .str-chat__channel-preview-unread-badge {
-        display: flex;
-        align-items: center;
-        padding: 0 var(--str-chat__spacing-2);
-      }
-
-      .str-chat__channel-preview-messenger--name {
-        width: 100%;
-      }
-    }
-
-    .str-chat__channel-preview-end-second-row {
-      @include utils.ellipsis-text-parent;
-      display: flex;
-      column-gap: var(--str-chat__spacing-1);
-      align-items: center;
-
-      .str-chat__channel-preview-messenger--last-message {
-        flex: 1;
-      }
-
-      .str-chat__channel-preview-messenger--status {
-        --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15);
-
-        svg {
-          width: calc(var(--str-chat__spacing-px) * 15);
-          height: calc(var(--str-chat__spacing-px) * 15);
-        }
-      }
-    }
-
-    .str-chat__channel-preview-messenger--name,
-    .str-chat__channel-preview-messenger--last-message {
-      @include utils.ellipsis-text;
-      @include utils.prevent-glitch-text-overflow;
-      min-width: 0;
-
-      p {
-        @include utils.ellipsis-text;
-        margin: 0;
-        // 40px is the width of the two action buttons
-        max-width: calc(100% - 40px);
-      }
-    }
-  }
-}
-
-.str-chat__channel-preview-loading {
-  @include channel-preview-layout;
-
-  .str-chat__channel-preview-end-loading {
-    @include channel-preview-end-layout;
-  }
-
-  .str-chat__loading-channels-username {
-    height: calc(var(--str-chat__spacing-px) * 16);
-    width: calc(var(--str-chat__spacing-px) * 66);
-  }
-
-  .str-chat__loading-channels-status {
-    height: calc(var(--str-chat__spacing-px) * 16);
-    width: 100%;
-  }
-}

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

@@ -1,148 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__channel-preview-border-radius: 0;
-
-  /* The text/icon color of the component */
-  --str-chat__channel-preview-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__channel-preview-background-color: transparent;
-
-  /* Top border of the component */
-  --str-chat__channel-preview-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-preview-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-preview-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-preview-border-inline-end: none;
-
-  /* Background color used for selected channel preview components */
-  --str-chat__channel-preview-active-background-color: var(--str-chat__surface-color);
-
-  /* Background color used for the hover state */
-  --str-chat__channel-preview-hover-background-color: var(--str-chat__secondary-surface-color);
-
-  /* Text color of the latest message when preview is not hovered or selected */
-  --str-chat__channel-preview-latest-message-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
-
-  /* The color of the loading indicator while initializing the channel list */
-  --str-chat__channel-preview-loading-state-color: var(--str-chat__disabled-color);
-
-  /* The background color of the unread badge */
-  --str-chat__channel-preview-unread-badge-background-color: var(--str-chat__unread-badge-color);
-
-  /* The color of the unread badge */
-  --str-chat__channel-preview-unread-badge-color: var(--str-chat__on-unread-badge-color);
-
-  /* The border radius used for the borders of the unread badge */
-  --str-chat__channel-preview-unread-badge-border-radius: var(--str-chat__border-radius-circle);
-
-  /* Top border of the unread badge */
-  --str-chat__channel-preview-unread-badge-border-block-start: none;
-
-  /* Bottom border of the unread badge */
-  --str-chat__channel-preview-unread-badge-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the unread badge */
-  --str-chat__channel-preview-unread-badge-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the unread badge */
-  --str-chat__channel-preview-unread-badge-border-inline-end: none;
-
-  /* The color of the message status indicator icon (only available in Angular) */
-  --str-chat__channel-preview-message-status-color: var(--str-chat__primary-color);
-
-  /* The color of the text that displays the message time (only available in Angular) */
-  --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
-}
-
-.str-chat__channel-preview-container {
-  .str-chat__channel-preview__action-buttons {
-    .str-chat__channel-preview__action-button {
-      --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
-      border: none;
-      background-color: transparent;
-    }
-
-    .str-chat__channel-preview__action-button--pin.str-chat__channel-preview__action-button--active {
-      --str-chat-icon-color: var(--str-chat__unread-badge-color);
-    }
-
-    .str-chat__channel-preview__action-button--archive.str-chat__channel-preview__action-button--active {
-      --str-chat-icon-color: var(--str-chat__text-color);
-    }
-  }
-}
-
-.str-chat__channel-preview {
-  @include utils.component-layer-overrides('channel-preview');
-
-  &--active,
-  &-messenger--active {
-    background-color: var(--str-chat__channel-preview-active-background-color);
-  }
-
-  &:hover {
-    background-color: var(--str-chat__channel-preview-hover-background-color);
-  }
-
-  .str-chat__channel-preview-end-first-row {
-    @include utils.channel-preview-display-name-theme;
-
-    .str-chat__channel-preview-unread-badge {
-      @include utils.component-layer-overrides('channel-preview-unread-badge');
-      font-size: 80%;
-    }
-
-    .str-chat__channel-preview-messenger--last-message {
-      font: var(--str-chat__body-text);
-      color: var(--str-chat__channel-preview-latest-message-secondary-color);
-    }
-
-    &--active,
-    &:hover {
-      .str-chat__channel-preview-messenger--last-message {
-        color: var(--str-chat__channel-preview-color);
-      }
-    }
-  }
-
-  .str-chat__channel-preview-messenger--status {
-    --str-chat-icon-color: var(--str-chat__channel-preview-message-status-color);
-    color: var(--str-chat__channel-preview-message-status-color);
-
-    svg {
-      path {
-        fill: var(--str-chat__channel-preview-message-status-color);
-      }
-    }
-  }
-
-  .str-chat__channel-preview-messenger--time {
-    color: var(--str-chat__channel-preview-message-time-color);
-    font: var(--str-chat__caption-text);
-  }
-}
-
-.str-chat__channel-preview-loading {
-  @include utils.loading-animation;
-
-  .str-chat__loading-channels-avatar,
-  .str-chat__loading-channels-username,
-  .str-chat__loading-channels-status {
-    @include utils.loading-item-background('channel-preview');
-  }
-
-  .str-chat__loading-channels-username,
-  .str-chat__loading-channels-status {
-    border-radius: var(--str-chat__border-radius-xs);
-  }
-}