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

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

@@ -1,141 +0,0 @@
-@use '../utils';
-
-.str-chat__attachment-preview-list {
-  --str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 18);
-  $preview-height: calc(var(--str-chat__spacing-px) * 72);
-
-  @include utils.flex-row-center;
-  padding: var(--str-chat__spacing-1_5);
-  width: 100%;
-
-  .str-chat__attachment-list-scroll-container {
-    overflow-y: hidden;
-    overflow-x: auto;
-    width: 100%;
-    max-width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    column-gap: var(--str-chat__spacing-2);
-  }
-
-  @mixin overlay {
-    @include utils.flex-row-center;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-
-  .str-chat__attachment-preview-image {
-    @include utils.flex-row-center;
-    position: relative;
-    height: $preview-height;
-    width: $preview-height;
-    min-width: $preview-height;
-    overflow: hidden;
-
-    .str-chat__attachment-preview-image-loading {
-      @include overlay;
-    }
-
-    .str-chat__attachment-preview-thumbnail {
-      object-fit: cover;
-      height: $preview-height;
-      width: $preview-height;
-      word-break: break-all;
-      overflow: hidden;
-    }
-  }
-
-  .str-chat__location-preview,
-  .str-chat__attachment-preview-unsupported,
-  .str-chat__attachment-preview-voice-recording,
-  .str-chat__attachment-preview-file {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-
-    height: $preview-height;
-    width: calc(var(--str-chat__spacing-px) * 200);
-    position: relative;
-    padding: 0 var(--str-chat__spacing-4);
-    column-gap: var(--str-chat__spacing-2);
-
-    .str-chat__attachment-preview-metadata,
-    .str-chat__attachment-preview-file-end {
-      @include utils.ellipsis-text-parent;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-
-      .str-chat__attachment-preview-title,
-      .str-chat__attachment-preview-subtitle,
-      .str-chat__attachment-preview-file-name {
-        @include utils.ellipsis-text;
-        max-width: 100%;
-      }
-    }
-
-    .str-chat__location-preview-image,
-    .str-chat__attachment-preview-file-icon {
-      --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
-      --str-chat-icon-width: auto;
-      @include utils.flex-row-center;
-
-      svg {
-        height: calc(var(--str-chat__spacing-px) * 37);
-        width: unset;
-      }
-    }
-  }
-
-  .str-chat__attachment-preview-file {
-    .str-chat__attachment-preview-file-end {
-      .str-chat__attachment-preview-file-download {
-        --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
-        line-height: calc(var(--str-chat__spacing-px) * 13);
-
-        svg {
-          width: calc(var(--str-chat__spacing-px) * 16);
-          height: calc(var(--str-chat__spacing-px) * 16);
-        }
-      }
-    }
-  }
-
-  // button version of the same "class"
-  button.str-chat__attachment-preview-delete {
-    @include utils.unset-button;
-    display: flex;
-  }
-
-  .str-chat__attachment-preview-delete {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
-    position: absolute;
-    top: calc(var(--str-chat__spacing-px) * 2);
-    inset-inline-end: calc(var(--str-chat__spacing-px) * 2);
-    cursor: pointer;
-    z-index: 1;
-
-    svg {
-      width: calc(var(--str-chat__spacing-px) * 24);
-      height: calc(var(--str-chat__spacing-px) * 24);
-    }
-  }
-
-  .str-chat__attachment-preview-error {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
-    @include overlay;
-    @include utils.unset-button(unset);
-    inset-inline-start: 0;
-    cursor: pointer;
-    z-index: 0;
-  }
-}
-
-.str-chat__attachment-preview-list-angular-host {
-  width: 100%;
-  max-width: 100%;
-}

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

@@ -1,190 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__attachment-preview-list-border-radius: var(--str-chat__border-radius-sm);
-
-  /* The text/icon color of the component */
-  --str-chat__attachment-preview-list-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__attachment-preview-list-background-color: transparent;
-
-  /* Top border of the component */
-  --str-chat__attachment-preview-list-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__attachment-preview-list-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__attachment-preview-list-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__attachment-preview-list-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__attachment-preview-list-box-shadow: none;
-
-  /* Background color of the preview delete icon */
-  --str-chat__attachment-preview-close-icon-background: var(--str-chat__secondary-overlay-color);
-
-  /* Foreground color of the preview delete icon */
-  --str-chat__attachment-preview-close-icon-color: var(--str-chat__secondary-overlay-text-color);
-
-  /* Color of the upload retry icon */
-  --str-chat__attachment-preview-retry-icon-color: var(--str-chat__primary-color);
-
-  /* Color of the preview download icon */
-  --str-chat__attachment-preview-download-icon-color: var(--str-chat__text-low-emphasis-color);
-
-  /* Overlay color applied to attachment previews during upload and if an error occured during upload */
-  --str-chat__attachment-preview-overlay-color: var(--str-chat__overlay-color);
-
-  /* The border radius used for the borders of the image preview */
-  --str-chat__attachment-preview-image-border-radius: var(--str-chat__border-radius-sm);
-
-  /* The text/icon color of the image preview */
-  --str-chat__attachment-preview-image-color: var(--str-chat__text-color);
-
-  /* The background color of the image preview */
-  --str-chat__attachment-preview-image-background-color: transparent;
-
-  /* Top border of the image preview */
-  --str-chat__attachment-preview-image-border-block-start: none;
-
-  /* Bottom border of the image preview */
-  --str-chat__attachment-preview-image-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the image preview */
-  --str-chat__attachment-preview-image-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the image preview */
-  --str-chat__attachment-preview-image-border-inline-end: none;
-
-  /* Box shadow applied to the image preview */
-  --str-chat__attachment-preview-image-box-shadow: none;
-
-  /* The border radius used for the borders of the file preview */
-  --str-chat__attachment-preview-file-border-radius: var(--str-chat__border-radius-md);
-
-  /* The text/icon color of the file preview */
-  --str-chat__attachment-preview-file-color: var(--str-chat__text-color);
-
-  /* The background color of the file preview */
-  --str-chat__attachment-preview-file-background-color: transparent;
-
-  /* Top border of the file preview */
-  --str-chat__attachment-preview-file-border-block-start: 1px solid var(--str-chat__surface-color);
-
-  /* Bottom border of the file preview */
-  --str-chat__attachment-preview-file-border-block-end: 1px solid var(--str-chat__surface-color);
-
-  /* Left (right in RTL layout) border of the file preview */
-  --str-chat__attachment-preview-file-border-inline-start: 1px solid var(--str-chat__surface-color);
-
-  /* Right (left in RTL layout) border of the file preview */
-  --str-chat__attachment-preview-file-border-inline-end: 1px solid var(--str-chat__surface-color);
-
-  /* Box shadow applied to the file preview */
-  --str-chat__attachment-preview-file-box-shadow: none;
-}
-
-.str-chat__attachment-preview-list {
-  @include utils.component-layer-overrides('attachment-preview-list');
-
-  .str-chat__attachment-list-scroll-container {
-    // inherit as border-radius on parent does nothing
-    border-radius: inherit;
-  }
-
-  .str-chat__attachment-preview-image {
-    @include utils.component-layer-overrides('attachment-preview-image');
-
-    .str-chat__attachment-preview-thumbnail,
-    .str-chat__attachment-preview-image-loading {
-      border-radius: var(--str-chat__attachment-preview-image-border-radius);
-      background-color: var(--str-chat__attachment-preview-overlay-color);
-    }
-  }
-
-  .str-chat__location-preview,
-  .str-chat__attachment-preview-unsupported,
-  .str-chat__attachment-preview-voice-recording,
-  .str-chat__attachment-preview-file {
-    @include utils.component-layer-overrides('attachment-preview-file');
-
-    .str-chat__attachment-preview-title,
-    .str-chat__attachment-preview-file-name {
-      font: var(--str-chat__subtitle-medium-text);
-    }
-
-    .str-chat__attachment-preview-subtitle {
-      font: var(--str-chat__caption-text);
-    }
-
-    .str-chat__attachment-preview-file-download {
-      --str-chat-icon-color: var(--str-chat__attachment-preview-download-icon-color);
-      text-decoration: none;
-
-      svg path {
-        fill: var(--str-chat__attachment-preview-download-icon-color);
-      }
-    }
-  }
-
-  .str-chat__attachment-preview-file {
-    .str-chat__attachment-preview-file-download {
-      svg path {
-        fill: var(--str-chat__attachment-preview-download-icon-color);
-      }
-    }
-  }
-
-  .str-chat__attachment-preview-voice-recording {
-    .str-chat__recording-timer {
-      color: var(--str-chat__text-low-emphasis-color);
-      font: var(--str-chat__caption-medium-text);
-    }
-  }
-
-  .str-chat__location-preview {
-    .str-chat__location-preview-image {
-      color: var(--str-chat__active-primary-color);
-    }
-  }
-
-  .str-chat__attachment-preview-delete {
-    --str-chat-icon-color: var(--str-chat__attachment-preview-close-icon-color);
-
-    .str-chat__icon {
-      background-color: var(--str-chat__attachment-preview-close-icon-background);
-      border-radius: 999px;
-    }
-
-    svg {
-      background-color: var(--str-chat__attachment-preview-close-icon-background);
-      border-radius: 999px;
-
-      path {
-        fill: var(--str-chat__attachment-preview-close-icon-color);
-      }
-    }
-  }
-
-  .str-chat__attachment-preview-error {
-    --str-chat-icon-color: var(--str-chat__attachment-preview-retry-icon-color);
-    background-color: var(--str-chat__attachment-preview-overlay-color);
-
-    svg path {
-      fill: var(--str-chat__attachment-preview-retry-icon-color);
-    }
-
-    &.str-chat__attachment-preview-error-image {
-      border-radius: var(--str-chat__attachment-preview-image-border-radius);
-    }
-
-    &.str-chat__attachment-preview-error-file {
-      border-radius: var(--str-chat__attachment-preview-file-border-radius);
-    }
-  }
-}

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

@@ -1,139 +0,0 @@
-@use '../utils';
-
-.str-chat__audio_recorder-container {
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  min-height: 3.25rem;
-  padding-inline: 1rem;
-}
-
-.str-chat__audio_recorder,
-stream-voice-recorder-wavebar {
-  @include utils.flex-row-center;
-  gap: 0.375rem;
-
-  button {
-    @include utils.flex-row-center;
-    height: 32px;
-    width: 32px;
-    padding: 0;
-  }
-
-  .str-chat__audio_recorder__cancel-button {
-    --str-chat-icon-height: 28px;
-
-    svg {
-      height: 28px;
-    }
-  }
-
-  .str-chat__audio_recorder__toggle-playback-button {
-    --str-chat-icon-height: 16px;
-
-    svg {
-      height: 16px;
-    }
-  }
-
-  .str-chat__audio_recorder__pause-recording-button {
-    --str-chat-icon-height: 12px;
-
-    svg {
-      height: 12px;
-    }
-  }
-
-  .str-chat__audio_recorder__resume-recording-button {
-    --str-chat-icon-height: 24px;
-
-    svg {
-      height: 24px;
-    }
-  }
-
-  .str-chat__audio_recorder__stop-button {
-    --str-chat-icon-height: 12px;
-
-    svg {
-      height: 12px;
-    }
-  }
-
-  .str-chat__audio_recorder__complete-button {
-    --str-chat-icon-height: 16px;
-
-    svg {
-      height: 16px;
-    }
-  }
-
-  .str-chat__recording-timer {
-    display: flex;
-    align-items: center;
-    width: 3rem;
-  }
-
-  .str-chat__recording-timer--hours {
-    width: 3.75rem;
-  }
-
-  .str-chat__wave-progress-bar__track-container {
-    padding-block: 0.5rem;
-    overflow-x: auto;
-    height: fit-content;
-  }
-
-  .str-chat__waveform-box-container {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    width: 100%;
-  }
-
-  .str-chat__audio_recorder__waveform-box,
-  .str-chat__wave-progress-bar__track {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex-wrap: nowrap;
-    height: 2rem;
-    margin-inline: 1rem;
-  }
-
-  .str-chat__wave-progress-bar__track {
-    width: 120px;
-  }
-
-  .str-chat__audio_recorder__waveform-box {
-    overflow-x: hidden;
-  }
-}
-
-.str-chat__audio_recorder-container {
-  .str-chat__message-attachment__voice-recording-widget {
-    display: flex;
-    gap: var(--str-chat__spacing-1_5);
-
-    .str-chat__message-attachment-voice-recording-widget--first-row {
-      display: none;
-    }
-
-    .str-chat__message-attachment__voice-recording-widget__audio-state {
-      display: flex;
-      gap: var(--str-chat__spacing-1_5);
-
-      .str-chat__message-attachment__voice-recording-widget__timer {
-        min-width: 3rem;
-        align-self: center;
-      }
-    }
-
-    .str-chat__message-attachment__voice-recording-widget__right-section {
-      display: none;
-    }
-  }
-}

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

@@ -1,61 +0,0 @@
-@use '../utils';
-
-.str-chat__audio_recorder-container {
-  background-color: var(--str-chat__background-color);
-}
-
-.str-chat__audio_recorder {
-  //@include utils.component-layer-overrides('audio-recorder');
-
-  button {
-    @include utils.button-reset;
-    cursor: pointer;
-
-    &:disabled {
-      cursor: default;
-    }
-  }
-
-  .str-chat__audio_recorder__cancel-button {
-    --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
-    color: var(--str-chat__text-low-emphasis-color);
-  }
-
-  .str-chat__audio_recorder__toggle-playback-button {
-    --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
-    color: var(--str-chat__text-low-emphasis-color);
-  }
-
-  .str-chat__message-attachment-audio-widget--play-button {
-    --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
-    box-shadow: none;
-    border: none;
-  }
-
-  .str-chat__audio_recorder__pause-recording-button,
-  .str-chat__audio_recorder__resume-recording-button {
-    --str-chat-icon-color: var(--str-chat__danger-color);
-    color: var(--str-chat__danger-color);
-  }
-
-  .str-chat__audio_recorder__pause-recording-button {
-    border: 3px solid var(--str-chat__danger-color);
-    border-radius: var(--str-chat__border-radius-circle);
-  }
-
-  .str-chat__audio_recorder__stop-button,
-  .str-chat__audio_recorder__complete-button {
-    --str-chat-icon-color: var(--str-chat__on-primary-color);
-    border-radius: var(--str-chat__border-radius-circle);
-    color: var(--str-chat__on-primary-color);
-    background-color: var(--str-chat__primary-color);
-
-    .str-chat__loading-indicator svg {
-      linearGradient {
-        stop:last-child {
-          stop-color: var(--str-chat__background-color);
-        }
-      }
-    }
-  }
-}

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

@@ -1,94 +0,0 @@
-@use '../utils';
-
-// Class defined by Angular mentions
-// !important necessary to override library defined styles
-.str-chat__message-textarea-angular-host {
-  position: relative;
-
-  mention-list {
-    width: 100%;
-  }
-
-  .mention-menu {
-    padding: var(--str-chat__spacing-2) 0 !important;
-    margin: 0 !important;
-    max-width: 100%;
-
-    .mention-item {
-      padding: 0 !important;
-    }
-  }
-}
-
-// React SDK's version of Angular SDK's .dropup (mention-list)
-.str-chat__suggestion-list-container {
-  position: absolute;
-  bottom: calc(100% + var(--str-chat__spacing-2_5));
-  width: 100%;
-  padding: var(--str-chat__spacing-2) 0;
-
-  .str-chat__suggestion-list {
-    overflow-y: auto;
-    max-height: calc(var(--str-chat__spacing-px) * 320);
-
-    display: flex;
-    flex-direction: column;
-
-    list-style: none;
-    padding: unset;
-    margin: unset;
-  }
-
-  .str-chat__suggestion-list--react {
-    overflow-y: unset;
-
-    .str-chat__suggestion-list-item {
-      > button {
-        width: 100%;
-      }
-    }
-  }
-}
-
-.str-chat__slash-command {
-  padding: var(--str-chat__spacing-2_5);
-
-  .str-chat__slash-command-header {
-    .str-chat__slash-command-args {
-      margin-inline-start: var(--str-chat__spacing-2);
-    }
-  }
-}
-
-.str-chat__user-item {
-  @include utils.flex-row-center;
-  padding: var(--str-chat__spacing-2_5);
-  column-gap: var(--str-chat__spacing-2);
-
-  .str-chat__user-item--name {
-    @include utils.ellipsis-text;
-    @include utils.prevent-glitch-text-overflow;
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-}
-
-.str-chat__emoji-item {
-  @include utils.flex-row-center;
-  padding: var(--str-chat__spacing-2_5);
-  column-gap: var(--str-chat__spacing-2);
-
-  .str-chat__emoji-item--name {
-    @include utils.ellipsis-text;
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-}
-
-.str-chat__message-textarea-angular-host--autocomplete-hidden {
-  mention-list {
-    display: none;
-  }
-}