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

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

@@ -1,148 +0,0 @@
-@use '../utils';
-
-.str-chat__search {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  &.str-chat__search--active {
-    flex: 1;
-    max-height: 100%;
-  }
-
-  .str-chat__search-bar {
-    @include utils.flex-row-center;
-    padding: var(--str-chat__spacing-2_5)  var(--str-chat__spacing-2);
-    gap: 0.25rem;
-
-    .str-chat__search-bar-button {
-      @include utils.button-reset;
-      padding: var(--str-chat__spacing-1);
-      cursor: pointer;
-    }
-
-    .str-chat__search-input--wrapper {
-      display: flex;
-      align-items: center;
-      flex: 1;
-      padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2);
-      min-width: 0;
-
-      .str-chat__search-input--icon {
-        height: 20px;
-        width: 20px;
-        margin-right: 0.5rem;
-      }
-
-      .str-chat__search-input--clear-button {
-        @include utils.button-reset;
-        cursor: pointer;
-        padding: 0;
-
-        &:disabled {
-          cursor: default;
-        }
-
-        .str-chat__search-input--clear-button-icon {
-          height: 20px;
-          width: 20px;
-          mask-size: 20px;
-          -webkit-mask-size: 20px;
-        }
-      }
-
-      input {
-        flex: 1;
-        min-width: 0;
-      }
-    }
-  }
-
-  .str-chat__search-results {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-
-    .str-chat__search-results-header {
-      width: 100%;
-
-      button {
-        @include utils.button-reset();
-        cursor: pointer;
-      }
-
-      .str-chat__search-results-header__filter-source-buttons {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2_5);
-        width: 100%;
-
-        .str-chat__search-results-header__filter-source-button {
-          padding: 0.5rem 0.75rem;
-          border-radius: var(--str-chat__border-radius-circle);
-          background-color: var(--str-chat__tertiary-surface-color);
-        }
-
-        .str-chat__search-results-header__filter-source-button--active {
-          background-color: var(--str-chat__surface-color);
-          color: var(--str-chat__text-color);
-          font-weight: 500;
-        }
-      }
-    }
-
-    .str-chat__search-results-presearch,
-    .str-chat__search-source-results-empty {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 1.25rem;
-    }
-
-    .str-chat__search-source-results {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-
-      .str-chat__search-source-result-list {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-
-        .str-chat__infinite-scroll-paginator__content {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .str-chat__search-result {
-          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);
-
-          .search__result-text,
-          .str-chat__search-result--display-name {
-            @include utils.ellipsis-text;
-            @include utils.prevent-glitch-text-overflow;
-          }
-        }
-
-        .str-chat__search-source-result-list__footer {
-          height: 4rem;
-          width: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
-        }
-      }
-    }
-  }
-}

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

@@ -1,222 +0,0 @@
-@use '../utils';
-
-/* Only available in React SDK. */
-.str-chat {
-  /* The text/icon color of the component */
-  --str-chat__search-input-color: var(--str-chat__text-color);
-
-  /* The text/icon color of the component */
-  --str-chat__search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The text/icon color of the component */
-  --str-chat__search-input-icon-color: var(--str-chat__text-low-emphasis-color);
-
-  /* Top border of the component */
-  --str-chat__search-input-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__search-input-border-block-end: none;
-
-  /* Left (right in RTL layout) borhe component */
-  --str-chat__search-input-border-inline-start: none;
-
-  /* Right (left in RTL layout) borhe component */
-  --str-chat__search-input-border-inline-end: none;
-
-  /* The border radius used for the borders of the component */
-  --str-chat__search-input-wrapper-border-radius: var(--str-chat__border-radius-circle);
-
-  /* The background color of the component */
-  --str-chat__search-input-wrapper-background-color: transparent;
-
-  /* Top border of the component */
-  --str-chat__search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px
-  solid;
-
-  /* Bottom border of the component */
-  --str-chat__search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px
-  solid;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px
-  solid;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__search-input-wrapper-border-inline-end: var(--str-chat__surface-color) 1px
-  solid;
-
-  /* The border radius used for the borders of the component */
-  --str-chat__search-input-wrapper-active-border-radius: var(--str-chat__border-radius-circle);
-
-  /* The background color of the component */
-  --str-chat__search-input-wrapper-active-background-color: transparent;
-
-  /* Top border of the component */
-  --str-chat__search-input-wrapper-active-border-block-start: var(--str-chat__primary-color)
-  1px solid;
-
-  /* Bottom border of the component */
-  --str-chat__search-input-wrapper-active-border-block-end: var(--str-chat__primary-color)
-  1px solid;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__search-input-wrapper-active-border-inline-start: var(
-                  --str-chat__primary-color
-  )
-  1px solid;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color)
-  1px solid;
-
-  /* The background applied to channel search result */
-  --str-chat__search-result-background-color: transparent;
-
-  /* Top border of the component */
-  --str-chat__search-result-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__search-result-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__search-result-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__search-result-border-inline-end: none;
-
-  /* Background color used for the search result hover / focused state */
-  --str-chat__search-result-hover-background-color: var(
-                  --str-chat__secondary-surface-color
-  );
-
-  --str-chat__search-result-list-color: var(--str-chat__text-color);
-
-  --str-chat__search-result-list-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the component  */
-  --str-chat__search-result-list-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__search-result-list-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__search-result-list-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__search-result-list-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__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__search-results-header-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The background color used in the search results header  */
-  --str-chat__search-results-header-background-color: var(--str-chat__background-color);
-
-  /* Top border of the component  */
-  --str-chat__search-results-header-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__search-results-header-border-block-end: var(--str-chat__surface-color) 1px
-  solid;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__search-results-header-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__search-results-header-border-inline-end: none;
-
-  /* The font color used in the empty search results indicator  */
-  --str-chat__search-results-empty-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The icon color used in the empty search results indicator  */
-  --str-chat__search-results-empty-icon-color: var(--str-chat__disabled-color);
-
-  /* The background color used in the empty search results indicator  */
-  --str-chat__search-results-empty-background-color: var(--str-chat__background-color);
-
-  /* Top border of the component  */
-  --str-chat__search-results-empty-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__search-results-empty-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__search-results-empty-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__search-results-empty-border-inline-end: none;
-}
-
-.str-chat__search-input--wrapper {
-  @include utils.component-layer-overrides('search-input-wrapper');
-
-  .str-chat__search-input--icon {
-    background-image: var(--str-chat__magnifier-glass-icon);
-    background-repeat: no-repeat;
-  }
-
-  input {
-    @include utils.component-layer-overrides('search-input');
-    outline: none;
-    font: var(--str-chat__subtitle-text);
-  }
-
-  .str-chat__search-input--clear-button-icon {
-    background-color: transparent;
-    -webkit-mask: var(--str-chat__clear-icon) no-repeat center / contain;
-    mask: var(--str-chat__clear-icon) no-repeat center / contain;
-  }
-}
-
-.str-chat__search-input--wrapper-active {
-  @include utils.component-layer-overrides('search-input-wrapper-active');
-
-  .str-chat__search-input--clear-button-icon {
-    background-color: var(--str-chat__text-low-emphasis-color);
-  }
-}
-
-.str-chat__search-bar-button--exit-search {
-  @include utils.button-reset();
-  color: var(--str-chat__primary-color);
-  font: var(--str-chat__subtitle-text);
-}
-
-.str-chat__search-results-header {
-  @include utils.component-layer-overrides('search-results-header');
-  font: var(--str-chat__subtitle-text);
-}
-
-.str-chat__search-source-result-list {
-  @include utils.component-layer-overrides('search-result-list');
-
-  .str-chat__search-container-empty {
-    @include utils.component-layer-overrides('search-results-empty');
-    font: var(--str-chat__subtitle2-medium-text);
-
-    svg path {
-      fill: var(--str-chat__search-results-empty-icon-color);
-    }
-  }
-
-  .str-chat__search-result {
-    @include utils.component-layer-overrides('search-result');
-
-    &.str-chat__channel-preview-messenger--active {
-      background-color: var(--str-chat__channel-preview-active-background-color);
-    }
-
-    .str-chat__search-result--display-name {
-      @include utils.channel-preview-display-name-theme;
-    }
-  }
-
-
-
-  .str-chat__search-result:hover,
-  .str-chat__search-result--focused {
-    background-color: var(--str-chat__search-result-hover-background-color);
-  }
-}

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

@@ -1,65 +0,0 @@
-@use '../utils';
-
-// FIXME: figure out why does this "container" exist when __thread is completely valid
-.str-chat__thread-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  .str-chat__thread-header {
-    @include utils.header-layout;
-
-    .str-chat__thread-header-details {
-      @include utils.header-text-layout;
-
-      .str-chat__thread-header-name,
-      .str-chat__thread-header-reply-count,
-      .str-chat__thread-header-channel-name,
-      .str-chat__thread-header-subtitle,
-      .str-chat__thread-header-title {
-        @include utils.ellipsis-text;
-      }
-
-      .str-chat__thread-header-subtitle {
-        @include utils.prevent-glitch-text-overflow;
-      }
-    }
-
-    .str-chat__close-thread-button {
-      $icon-size: calc(var(--str-chat__spacing-px) * 21);
-      @include utils.flex-top-right;
-      width: calc(var(--str-chat__spacing-px) * 40);
-      height: calc(var(--str-chat__spacing-px) * 40);
-      cursor: pointer;
-      line-height: $icon-size;
-      font-size: $icon-size;
-
-      svg {
-        height: $icon-size;
-        width: $icon-size;
-      }
-    }
-  }
-}
-
-.str-chat__thread {
-  .str-chat__main-panel-inner {
-    height: auto;
-  }
-}
-
-.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);
-    }
-  }
-}
-
-.str-chat__parent-message-li {
-  padding: var(--str-chat__spacing-2);
-}

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

@@ -1,82 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__thread-border-radius: 0;
-
-  /* The text/icon color of the component */
-  --str-chat__thread-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__thread-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the component */
-  --str-chat__thread-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__thread-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__thread-border-inline-start: 1px solid var(--str-chat__surface-color);
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__thread-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__thread-box-shadow: none;
-
-  /* The border radius used for the borders of the thread header */
-  --str-chat__thread-header-border-radius: 0;
-
-  /* The text/icon color of the thread header */
-  --str-chat__thread-header-color: var(--str-chat__text-color);
-
-  /* The background color of the thread header */
-  --str-chat__thread-header-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the thread header */
-  --str-chat__thread-header-border-block-start: none;
-
-  /* Bottom border of the thread header */
-  --str-chat__thread-header-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the thread header */
-  --str-chat__thread-header-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the thread header */
-  --str-chat__thread-header-border-inline-end: none;
-
-  /* Box shadow applied to the thread header */
-  --str-chat__thread-header-box-shadow: none;
-
-  /* The text/icon color used to display less emphasized text in the channel header */
-  --str-chat__thread-header-info-color: var(--str-chat__text-low-emphasis-color);
-}
-
-.str-chat__thread-container {
-  @include utils.component-layer-overrides('thread');
-
-  .str-chat__thread-header {
-    @include utils.component-layer-overrides('thread-header');
-
-    .str-chat__thread-header-name,
-    .str-chat__thread-header-title {
-      font: var(--str-chat__subtitle-medium-text);
-    }
-
-    .str-chat__thread-header-channel-name,
-    .str-chat__thread-header-subtitle {
-      font: var(--str-chat__body-text);
-      color: var(--str-chat__thread-header-info-color);
-    }
-
-    .str-chat__close-thread-button {
-      background-color: transparent;
-      border: none;
-
-      svg path {
-        fill: var(--str-chat__thread-color);
-      }
-    }
-  }
-}

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

@@ -1,152 +0,0 @@
-.str-chat__thread-list-container {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.str-chat__unseen-threads-banner {
-  font-size: 16px;
-  font-weight: 400;
-
-  margin: 8px;
-  padding: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  &__button {
-    --str-chat-icon-width: 16px;
-    --str-chat-icon-heigh: 22px;
-
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-  }
-}
-
-.str-chat__thread-list {
-  .str-chat__thread-list-item {
-    align-items: stretch;
-    box-sizing: border-box;
-    padding-block: 14px;
-    padding-inline: 8px;
-    gap: 6px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-
-    .str-chat__thread-list-item__channel {
-      --str-chat-icon-height: 14px;
-      --str-chat-icon-width: 14px;
-
-      display: flex;
-      gap: 5px;
-
-      .str-chat__icon {
-        margin-top: 2px;
-        flex-shrink: 0;
-      }
-    }
-
-    .str-chat__thread-list-item__thread-status-symbol {
-      font-size: 14px;
-      line-height: 1;
-    }
-
-    .str-chat__thread-list-item__channel-text {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 1;
-    }
-
-    .str-chat__thread-list-item__parent-message {
-      display: flex;
-      gap: 3px;
-      justify-content: space-between;
-      align-items: center;
-      height: 15px;
-    }
-
-    .str-chat__thread-list-item__parent-message-text {
-      font-size: 12px;
-      font-weight: 400;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .str-chat__thread-list-item__latest-reply {
-      --str-chat__avatar-size: 49px;
-
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-
-    .str-chat__thread-list-item__latest-reply-details {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      gap: 4px;
-      width: 0;
-    }
-
-    .str-chat__thread-list-item__latest-reply-created-by {
-      font-weight: 500;
-      font-size: 16px;
-      text-align: left;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow-x: hidden;
-    }
-
-    .str-chat__thread-list-item__latest-reply-text-and-timestamp {
-      display: flex;
-      font-size: 14px;
-      font-weight: 400;
-      justify-content: space-between;
-      align-items: baseline;
-      line-height: 16px;
-    }
-
-    .str-chat__thread-list-item__latest-reply-text {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .str-chat__thread-list-item__latest-reply-timestamp {
-      white-space: nowrap;
-    }
-  }
-
-  .str-chat__thread-list-loading-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-block: 14px;
-    padding-inline: 8px;
-  }
-}
-
-.str-chat__thread-list-empty-placeholder {
-  --str-chat-icon-height: 95px;
-  --str-chat-icon-width: 95px;
-
-  font-size: 20px;
-  font-weight: 500;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: 16px;
-}