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

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

@@ -1,122 +0,0 @@
-@use '../utils';
-
-.str-chat__channel-search {
-  $search-bar-height: 65px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  &.str-chat__channel-search--active.str-chat__channel-search--inline,
-  &.str-chat__channel-search--with-results.str-chat__channel-search--inline {
-    height: 100%;
-  }
-
-  &.str-chat__channel-search--inline {
-    min-height: 0;
-  }
-
-  .str-chat__channel-search-bar {
-    @include utils.flex-row-center;
-    padding: var(--str-chat__spacing-2_5);
-    height: $search-bar-height;
-
-    .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-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-result-list {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    &.inline {
-      flex: 1;
-    }
-
-    &.popup {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: $search-bar-height;
-      height: 400px;
-      // have to add z-index as since 1.2023 avatar has position relative
-      // and the ones from channel list would show above search results
-      z-index: 1;
-    }
-
-    .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;
-      }
-    }
-
-    .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);
-
-      .channel-search__result-text,
-      .str-chat__channel-search-result--display-name {
-        @include utils.ellipsis-text;
-        @include utils.prevent-glitch-text-overflow;
-      }
-    }
-  }
-}

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

@@ -1,238 +0,0 @@
-@use '../utils';
-
-/* Only available in React SDK. */
-.str-chat {
-  /* The text/icon color of the component */
-  --str-chat__channel-search-input-color: var(--str-chat__text-color);
-
-  /* The text/icon color of the component */
-  --str-chat__channel-search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The text/icon color of the component */
-  --str-chat__channel-search-input-icon-color: var(--str-chat__text-low-emphasis-color);
-
-  /* Top border of the component */
-  --str-chat__channel-search-input-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-search-input-border-block-end: none;
-
-  /* Left (right in RTL layout) borhe component */
-  --str-chat__channel-search-input-border-inline-start: none;
-
-  /* Right (left in RTL layout) borhe component */
-  --str-chat__channel-search-input-border-inline-end: none;
-
-  /* The border radius used for the borders of the component */
-  --str-chat__channel-search-input-wrapper-border-radius: var(--str-chat__border-radius-lg);
-
-  /* The background color of the component */
-  --str-chat__channel-search-input-wrapper-background-color: transparent;
-
-  /* Top border of the component */
-  --str-chat__channel-search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px
-    solid;
-
-  /* Bottom border of the component */
-  --str-chat__channel-search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px
-    solid;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px
-    solid;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-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__channel-search-input-wrapper-active-border-radius: var(--str-chat__border-radius-lg);
-
-  /* The background color of the component */
-  --str-chat__channel-search-input-wrapper-active-background-color: transparent;
-
-  /* Top border of the component */
-  --str-chat__channel-search-input-wrapper-active-border-block-start: var(--str-chat__primary-color)
-    1px solid;
-
-  /* Bottom border of the component */
-  --str-chat__channel-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__channel-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__channel-search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color)
-    1px solid;
-
-  /* The background applied to channel search result */
-  --str-chat__channel-search-result-background-color: transparent;
-
-  /* Top border of the component */
-  --str-chat__channel-search-result-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-search-result-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-search-result-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-search-result-border-inline-end: none;
-
-  /* Background color used for the search result hover / focused state */
-  --str-chat__channel-search-result-hover-background-color: var(
-    --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);
-
-  /* The background color used in the search results header  */
-  --str-chat__channel-search-results-header-background-color: var(--str-chat__background-color);
-
-  /* Top border of the component  */
-  --str-chat__channel-search-results-header-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-search-results-header-border-block-end: var(--str-chat__surface-color) 1px
-    solid;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-search-results-header-border-inline-start: none;
-
-  /* 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);
-
-  /* The icon color used in the empty search results indicator  */
-  --str-chat__channel-search-results-empty-icon-color: var(--str-chat__disabled-color);
-
-  /* The background color used in the empty search results indicator  */
-  --str-chat__channel-search-results-empty-background-color: var(--str-chat__background-color);
-
-  /* Top border of the component  */
-  --str-chat__channel-search-results-empty-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__channel-search-results-empty-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__channel-search-results-empty-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__channel-search-results-empty-border-inline-end: none;
-}
-
-.str-chat__channel-search-input--wrapper {
-  @include utils.component-layer-overrides('channel-search-input-wrapper');
-
-  input {
-    @include utils.component-layer-overrides('channel-search-input');
-    outline: none;
-    font: var(--str-chat__subtitle-text);
-  }
-
-  .str-chat__channel-search-input--clear-button svg path {
-    fill: transparent;
-  }
-}
-
-.str-chat__channel-search-input--wrapper-active {
-  @include utils.component-layer-overrides('channel-search-input-wrapper-active');
-
-  .str-chat__channel-search-input--icon svg path {
-    fill: var(--str-chat__primary-color);
-  }
-
-  .str-chat__channel-search-input--clear-button svg path {
-    fill: var(--str-chat__text-low-emphasis-color);
-  }
-}
-
-.str-chat__channel-search-results-header {
-  @include utils.component-layer-overrides('channel-search-results-header');
-  font: var(--str-chat__subtitle-text);
-}
-
-.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);
-
-    svg path {
-      fill: var(--str-chat__channel-search-results-empty-icon-color);
-    }
-  }
-
-  .str-chat__channel-search-result {
-    @include utils.component-layer-overrides('channel-search-result');
-
-    .str-chat__channel-search-result--display-name {
-      @include utils.channel-preview-display-name-theme;
-    }
-  }
-
-  .str-chat__channel-preview-messenger--active {
-    background-color: var(--str-chat__channel-preview-active-background-color);
-  }
-
-  .str-chat__channel-search-result:hover,
-  .str-chat__channel-search-result--focused {
-    background-color: var(--str-chat__channel-search-result-hover-background-color);
-  }
-}

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

@@ -1,43 +0,0 @@
-.str-chat__chat-view {
-  display: flex;
-  width: 100%;
-  height: 100%;
-
-  &__selector {
-    display: flex;
-    flex-direction: column;
-    padding-inline: 8px;
-    padding-block: 16px;
-    gap: 20px;
-
-    &-button {
-      --str-chat-icon-height: 20px;
-      --str-chat-icon-width: 20px;
-      --str-chat-unread-count-badge-absolute-offset-vertical: 25%;
-
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-inline: 10px;
-      padding-block: 10px;
-      border-radius: 8px;
-      gap: 4px;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 1;
-      box-sizing: border-box;
-      cursor: pointer;
-      position: relative;
-    }
-  }
-
-  &__channels {
-    display: flex;
-    flex-grow: 1;
-  }
-
-  &__threads {
-    display: flex;
-    flex-grow: 1;
-  }
-}

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

@@ -1,32 +0,0 @@
-/* Only available in React SDK. */
-.str-chat {
-  --str-chat-selector-background-color: var(--str-chat__secondary-background-color);
-  --str-chat-selector-border-color: var(--str-chat__surface-color);
-
-  --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color);
-  --str-chat-selector-button-color-selected: var(--str-chat__text-color);
-  --str-chat-selector-button-background-color-default: transparent;
-  --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color);
-}
-
-.str-chat__chat-view {
-  &__selector {
-    border-right: 1px solid var(--str-chat-selector-border-color);
-    background-color: var(--str-chat-selector-background-color);
-
-    &-button {
-      --str-chat-icon-color: var(--str-chat-selector-button-color-default);
-      
-      border: none;
-      background: var(--str-chat-selector-button-background-color-default);
-      color: var(--str-chat-selector-button-color-default);
-
-
-      &[aria-selected='true'] {
-        --str-chat-icon-color: var(--str-chat-selector-button-color-selected);
-        color: var(--str-chat-selector-button-color-selected);
-        background: var(--str-chat-selector-button-background-color-selected);
-      }
-    }
-  }
-}

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

@@ -1,70 +0,0 @@
-@use '../utils';
-
-.str-chat__dialog-overlay {
-  inset: 0;
-  position: absolute;
-  height: var(--str-chat__dialog-overlay-height);
-  width: 100%;
-  z-index: 2;
-}
-
-.str-chat__dialog {
-  width: 100%;
-
-  .str-chat__dialog__body {
-    padding: 2rem 1rem;
-    overflow-y: auto;
-
-    .str-chat__dialog__title {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .str-chat__dialog__controls {
-    display: flex;
-    justify-content: flex-end;
-    gap: 1.25rem;
-    padding: 2.25rem 1.25rem;
-
-    .str-chat__dialog__controls-button {
-      @include utils.button-reset;
-    }
-  }
-}
-
-.str-chat-angular__dialog-body {
-  &.str-chat__dialog__body {
-    padding: 0;
-  }
-
-  .str-chat__dialog__controls {
-    padding-bottom: 0;
-  }
-}
-
-.str-chat__prompt-dialog {
-  input[type='text'] {
-    width: 100%;
-    padding: 0.625rem 1rem;
-  }
-}
-
-.str-chat__dialog-menu {
-  overflow: hidden;
-
-  .str-chat__dialog-menu__button {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-
-    .str-chat__dialog-menu__button-icon {
-      height: 1rem;
-      width: 1rem;
-    }
-
-    .str-chat__dialog-menu__button-text {
-      padding-inline: 0.675rem;
-    }
-  }
-}

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

@@ -1,103 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__dialog-menu-border-radius: var(--str-chat__border-radius-sm);
-
-  /* The text/icon color of the component */
-  --str-chat__dialog-menu-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__dialog-menu-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the component */
-  --str-chat__dialog-menu-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__dialog-menu-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__dialog-menu-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__dialog-menu-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__dialog-menu-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
-
-  /* The border radius used for the borders of an item in the message actions box */
-  --str-chat__dialog-menu-button-border-radius: 0;
-
-  /* The text/icon color of an item in the message actions box */
-  --str-chat__dialog-menu-button-color: var(--str-chat__text-color);
-
-  /* The background color of an item in the message actions box */
-  --str-chat__dialog-menu-button-background-color: transparent;
-
-  /* The background color of an item in the message actions box when hovered */
-  --str-chat__dialog-menu-button-hover-background-color: var(--str-chat__secondary-surface-color);
-
-  /* Top border of an item in the message actions box */
-  --str-chat__dialog-menu-button-border-block-start: none;
-
-  /* Bottom border of an item in the message actions box */
-  --str-chat__dialog-menu-button-border-block-end: none;
-
-  /* Left (right in RTL layout) border of an item in the message actions box */
-  --str-chat__dialog-menu-button-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of an item in the message actions box */
-  --str-chat__dialog-menu-button-border-inline-end: none;
-
-  /* Box shadow applied to an item in the message actions box */
-  --str-chat__dialog-menu-button-box-shadow: none;
-}
-
-.str-chat__dialog {
-  .str-chat__dialog__title {
-    font: var(--str-chat__subtitle-medium-text);
-  }
-
-  .str-chat__dialog__prompt {
-    font: var(--str-chat__subtitle-text);
-  }
-
-  .str-chat__dialog__controls {
-    .str-chat__dialog__controls-button {
-      cursor: pointer;
-      font: var(--str-chat__body-medium-text);
-      color: var(--str-chat__primary-color);
-    }
-
-    .str-chat__dialog__controls-button--submit {
-      text-transform: uppercase;
-
-      &:disabled {
-        color: var(--str-chat__disabled-color);
-      }
-    }
-  }
-}
-
-.str-chat__prompt-dialog {
-  input[type=text] {
-    font: var(--str-chat__subtitle-text);
-    border-radius: 20px;
-    border: 1px solid var(--str-chat__primary-color);
-  }
-}
-
-
-.str-chat__dialog-menu {
-  @include utils.component-layer-overrides('dialog-menu');
-
-  .str-chat__dialog-menu__button {
-    @include utils.component-layer-overrides('dialog-menu-button');
-    cursor: pointer;
-    font: var(--str-chat__subtitle-text);
-
-    &:hover, &:focus{
-      background-color: var(--str-chat__dialog-menu-button-hover-background-color);
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-.str-chat__drag-and-drop-container__item {
-  display: flex;
-  width: 100%;
-  padding-block: 0.25rem;
-}

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

@@ -1,47 +0,0 @@
-.str-chat {
-  /* Top border of the component */
-  --str-chat__drag-and-drop-container-border-block-start: 2px solid transparent;
-
-  /* Bottom border of the component */
-  --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
-
-  /* Top border of the component on dragover */
-  --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid var(--str-chat__primary-color);
-
-  /* Bottom border of the component on dragover */
-  --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid var(--str-chat__primary-color);
-
-  /* Left (right in RTL layout) border of the component on dragover */
-  --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component on dragover */
-  --str-chat__drag-and-drop-container-on-dragover-border-inline-end: none;
-}
-
-
-.str-chat__drag-and-drop-container--dragging {
-  cursor: grabbing;
-}
-
-.str-chat__drag-and-drop-container__item[draggable="true"] {
-  cursor: grab;
-
-  &:active {
-    background: transparent;
-  }
-}
-
-
-.str-chat__drag-and-drop-container__item {
-  border-bottom: var(--str-chat__drag-and-drop-container-border-block-start);
-  border-top: var(--str-chat__drag-and-drop-container-border-block-start);
-
-  &.str-chat__drag-and-drop-container__item--dragged-over-from-top {
-    border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end);
-  }
-
-  &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
-    border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
-  }
-}
-

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

@@ -1,14 +0,0 @@
-@use '../utils';
-
-.str-chat__dropzone-container {
-  @include utils.flex-row-center;
-
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  z-index: 5;
-
-  p {
-    margin: unset;
-  }
-}

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

@@ -1,17 +0,0 @@
-.str-chat {
-  /* The text/icon color of the dropzone container */
-  --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
-
-  /* The background color of the dropzone container */
-  --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
-
-  /* The backdrop filter applied to the dropzone container */
-  --str-chat__dropzone-container-backdrop-filter: blur(3px);
-}
-
-.str-chat__dropzone-container {
-  background-color: var(--str-chat__dropzone-container-background-color);
-  color: var(--str-chat__dropzone-container-color);
-  backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
-  font: var(--str-chat__subtitle-text);
-}