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

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

@@ -1,220 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__autocomplete-menu-border-radius: var(--str-chat__border-radius-xs);
-
-  /* The text/icon color of the component */
-  --str-chat__autocomplete-menu-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__autocomplete-menu-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the component */
-  --str-chat__autocomplete-menu-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__autocomplete-menu-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__autocomplete-menu-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__autocomplete-menu-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__autocomplete-menu-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
-
-  /* The background color of a selected autocomplete item */
-  --str-chat__autocomplete-active-background-color: var(--str-chat__surface-color);
-
-  /* The border radius used for the borders of the component (ReactSDK) */
-  --str-chat__suggestion-list-container-border-radius: var(--str-chat__border-radius-xs);
-
-  /* The text/icon color of the component (ReactSDK) */
-  --str-chat__suggestion-list-container-color: var(--str-chat__text-color);
-
-  /* The background color of the component (ReactSDK) */
-  --str-chat__suggestion-list-container-background-color: var(
-    --str-chat__secondary-background-color
-  );
-
-  /* Top border of the component (ReactSDK) */
-  --str-chat__suggestion-list-container-border-block-start: none;
-
-  /* Bottom border of the component (ReactSDK) */
-  --str-chat__suggestion-list-container-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component (ReactSDK) */
-  --str-chat__suggestion-list-container-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component (ReactSDK) */
-  --str-chat__suggestion-list-container-border-inline-end: none;
-
-  /* Box shadow applied to the component (ReactSDK) */
-  --str-chat__suggestion-list-container-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
-
-  /* The background color of a selected autocomplete item (ReactSDK) */
-  --str-chat__suggestion-list-item--selected-background-color: var(--str-chat__surface-color);
-
-  /* The border radius used for the borders of the slash command item in the autocomplete list */
-  --str-chat__slash-command-border-radius: 0;
-
-  /* The text/icon color of the slash command item in the autocomplete list */
-  --str-chat__slash-command-color: var(--str-chat__text-color);
-
-  /* The background color of the slash command item in the autocomplete list */
-  --str-chat__slash-command-background-color: transparent;
-
-  /* Top border of the slash command item in the autocomplete list */
-  --str-chat__slash-command-border-block-start: none;
-
-  /* Bottom border of the slash command item in the autocomplete list */
-  --str-chat__slash-command-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the slash command item in the autocomplete list */
-  --str-chat__slash-command-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the slash command item in the autocomplete list */
-  --str-chat__slash-command-border-inline-end: none;
-
-  /* Box shadow of the slash command item in the autocomplete list */
-  --str-chat__slash-command-box-shadow: none;
-
-  /* Text color of the arguments of a slash command item in the autocomplete list */
-  --str-chat__slash-command-args-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The border radius used for the borders of the user mention item in the autocomplete list */
-  --str-chat__mention-list-user-item-border-radius: 0;
-
-  /* The text/icon color of the user mention item in the autocomplete list */
-  --str-chat__mention-list-user-item-color: var(--str-chat__text-color);
-
-  /* The background color of the user mention item in the autocomplete list */
-  --str-chat__mention-list-user-item-background-color: transparent;
-
-  /* Top border of the user mention item in the autocomplete list */
-  --str-chat__mention-list-user-item-border-block-start: none;
-
-  /* Bottom border of the user mention item in the autocomplete list */
-  --str-chat__mention-list-user-item-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the user mention item in the autocomplete list */
-  --str-chat__mention-list-user-item-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the user mention item in the autocomplete list */
-  --str-chat__mention-list-user-item-border-inline-end: none;
-
-  /* Box shadow of the user mention item in the autocomplete list */
-  --str-chat__mention-list-user-item-box-shadow: none;
-
-  /* The text color of the at sign inside a user mention itome in the autocomplete list */
-  --str-chat__mention-list-user-item-at-sign-color: var(--str-chat__primary-color);
-
-  /* The font used in the emoji suggestion item in the autocomplete list */
-  --str-chat__mention-list-emoji-item-font-family: var(--str-chat__font-family);
-
-  /* The border radius used for the borders of the emoji suggestion item in the autocomplete list */
-  --str-chat__mention-list-emoji-item-border-radius: 0;
-
-  /* The text/icon color of the emoji suggestion item in the autocomplete list */
-  --str-chat__mention-list-emoji-item-color: var(--str-chat__text-color);
-
-  /* The background color of the emoji suggestion item in the autocomplete list */
-  --str-chat__mention-list-emoji-item-background-color: transparent;
-
-  /* Top border of the emoji suggestion item in the autocomplete list */
-  --str-chat__mention-list-emoji-item-border-block-start: none;
-
-  /* Bottom border of the emoji suggestion item in the autocomplete list */
-  --str-chat__mention-list-emoji-item-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list */
-  --str-chat__mention-list-emoji-item-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list */
-  --str-chat__mention-list-emoji-item-border-inline-end: none;
-
-  /* Box shadow of the emoji suggestion item in the autocomplete list */
-  --str-chat__mention-list-emoji-item-box-shadow: none;
-}
-
-// Class defined by Angular mentions
-// !important necessary to override library defined styles
-.mention-menu {
-  @include utils.component-layer-overrides('autocomplete-menu', '!important');
-
-  .active.mention-active > a {
-    background-color: var(--str-chat__autocomplete-active-background-color) !important;
-  }
-
-  .mention-item {
-    color: var(--str-chat__autocomplete-menu-color) !important;
-    background-color: transparent !important;
-  }
-}
-
-.str-chat__slash-command {
-  @include utils.component-layer-overrides('slash-command');
-  text-align: left;
-  font: var(--str-chat__subtitle-text);
-
-  .str-chat__slash-command-header {
-    .str-chat__slash-command-name {
-      text-transform: capitalize;
-      font: var(--str-chat__subtitle2-text);
-    }
-
-    .str-chat__slash-command-args {
-      color: var(--str-chat__slash-command-args-color);
-      font: var(--str-chat__subtitle-text);
-    }
-  }
-}
-
-.str-chat__user-item {
-  @include utils.component-layer-overrides('mention-list-user-item');
-
-  .str-chat__user-item--name {
-    font: var(--str-chat__subtitle-text);
-  }
-
-  .str-chat__user-item-at {
-    font: var(--str-chat__subtitle2-text);
-    color: var(--str-chat__mention-list-user-item-at-sign-color);
-  }
-}
-
-.str-chat__emoji-item {
-  @include utils.component-layer-overrides('mention-list-emoji-item');
-
-  .str-chat__emoji-item--name {
-    font: var(--str-chat__subtitle-text);
-  }
-}
-
-// TODO?: rename to autocomplete? or create new file
-.str-chat__suggestion-list-container {
-  @include utils.component-layer-overrides('suggestion-list-container');
-
-  .str-chat__suggestion-list {
-    .str-chat__suggestion-list-item {
-      > a {
-        text-decoration: none;
-      }
-    }
-
-    .str-chat__suggestion-item--selected {
-      background-color: var(--str-chat__suggestion-list-item--selected-background-color);
-    }
-  }
-
-  .str-chat__suggestion-list--react {
-    .str-chat__suggestion-list-item {
-      > button {
-        @include utils.button-reset;
-        text-decoration: none;
-      }
-    }
-  }
-}

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

@@ -1,137 +0,0 @@
-.str-chat {
-  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32);
-
-  .str-chat__avatar--autocomplete-item,
-  .stream-chat__avatar--autocomplete-item {
-    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
-  }
-
-  .str-chat__avatar--channel-header,
-  .stream-chat__avatar--channel-header {
-    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 40);
-  }
-
-  .str-chat__avatar--channel-preview,
-  .stream-chat__avatar--channel-preview {
-    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 49);
-  }
-
-  .str-chat__avatar--quoted-message-sender,
-  .stream-chat__avatar--quoted-message-sender {
-    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
-  }
-
-  .str-chat__avatar--reaction,
-  .stream-chat__avatar--reaction {
-    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
-  }
-
-  .str-chat__avatar--message-status,
-  .stream-chat__avatar--message-status {
-    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
-  }
-
-  .str-chat__avatar--poll-vote-author {
-    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
-  }
-}
-
-.str-chat__avatar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--str-chat__avatar-size);
-  line-height: var(--str-chat__avatar-size);
-  width: var(--str-chat__avatar-size);
-  min-width: var(--str-chat__avatar-size);
-
-  &.str-chat__avatar--one-letter,
-  &.stream-chat__avatar--one-letter {
-    font-size: calc(var(--str-chat__avatar-size) * 0.5);
-  }
-
-  &.str-chat__avatar--no-letters {
-    --str-chat-icon-width: calc(var(--str-chat__avatar-size) * 0.33);
-    --str-chat-icon-height: calc(var(--str-chat__avatar-size) * 0.33);
-  }
-
-  &.str-chat__avatar--multiple-letters,
-  &.stream-chat__avatar--multiple-letters {
-    font-size: calc(var(--str-chat__avatar-size) * 0.3);
-  }
-
-  .str-chat__avatar-image {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-  }
-
-  .str-chat__avatar-fallback {
-    text-align: center;
-    height: inherit;
-    width: inherit;
-  }
-
-  .str-chat__avatar--online-indicator {
-    position: absolute;
-    width: calc(var(--str-chat__spacing-px) * 12);
-    height: calc(var(--str-chat__spacing-px) * 12);
-    inset-inline-end: 3%;
-    inset-block-start: 2%;
-  }
-}
-
-.str-chat__loading-channels-avatar {
-  flex-shrink: 0;
-  width: calc(var(--str-chat__spacing-px) * 49);
-  height: calc(var(--str-chat__spacing-px) * 49);
-}
-
-
-.str-chat__avatar-group {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  height: var(--str-chat__avatar-size);
-  line-height: var(--str-chat__avatar-size);
-  width: var(--str-chat__avatar-size);
-  min-width: var(--str-chat__avatar-size);
-  overflow: hidden;
-
-  &.str-chat__avatar-group--three-part {
-    .str-chat__avatar:nth-child(1) {
-      grid-area: 1 / 1 / 3 / 2;
-    }
-
-    .str-chat__avatar:nth-child(2) {
-      grid-area: 1 / 2 / 2 / 3;
-    }
-
-    .str-chat__avatar:nth-child(3) {
-      grid-area: 2 / 2 / 3 / 3;
-    }
-  }
-
-  .str-chat__avatar {
-    height: 100%;
-    line-height: 100%;
-    width: 100%;
-    min-width: 100%;
-
-    .str-chat__avatar-fallback, img {
-      border-radius: 0;
-    }
-
-    &.str-chat__avatar--single .str-chat__avatar-fallback {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: calc(var(--str-chat__avatar-size) * 0.5);
-    }
-
-    .str-chat__avatar-fallback {
-      font-size: calc(var(--str-chat__avatar-size) * 0.33);
-    }
-  }
-}

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

@@ -1,64 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__avatar-border-radius: var(--str-chat__border-radius-circle);
-
-  /* The text/icon color of the component */
-  --str-chat__avatar-color: var(--str-chat__on-primary-color);
-
-  /* The background color of the component */
-  --str-chat__avatar-background-color: var(--str-chat__primary-color);
-
-  /* Top border of the component */
-  --str-chat__avatar-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__avatar-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__avatar-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__avatar-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__avatar-box-shadow: none;
-
-  /* The color of the online indicator (only available in Angular SDK) */
-  --str-chat__avatar-online-indicator-color: var(--str-chat__info-color);
-
-  /* The border radius of the online indicator (only available in Angular SDK) */
-  --str-chat__avatar-online-indicator-border-radius: var(--str-chat__border-radius-circle);
-}
-
-.str-chat__avatar {
-  .str-chat__avatar-image {
-    @include utils.component-layer-overrides('avatar');
-    display: block;
-  }
-
-  &.str-chat__avatar--no-letters {
-    --str-chat-icon-color: var(--str-chat__avatar-color);
-    @include utils.component-layer-overrides('avatar');
-  }
-
-  .str-chat__avatar-fallback {
-    @include utils.component-layer-overrides('avatar');
-    text-transform: uppercase;
-  }
-
-  .str-chat__avatar--online-indicator {
-    background-color: var(--str-chat__avatar-online-indicator-color);
-    border-radius: var(--str-chat__avatar-online-indicator-border-radius);
-  }
-}
-
-.str-chat__loading-channels-avatar {
-  border-radius: var(--str-chat__avatar-border-radius);
-}
-
-
-.str-chat__avatar-group {
-  border-radius: var(--str-chat__avatar-border-radius);
-}

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

@@ -1,21 +0,0 @@
-.str-chat__base-image {
-  .str-chat__message-attachment-file--item-download {
-    display: block;
-  }
-}
-
-.str-chat__message-attachment-card--header,
-.str-chat__gallery-image,
-.str-chat__message-attachment--image {
-  .str-chat__message-attachment-file--item-download {
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-  }
-}
-
-.str-chat__attachment-preview-image {
-  .str-chat__message-attachment-file--item-download {
-      display: none;
-    }
-}

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

@@ -1,35 +0,0 @@
-@use '../utils';
-
-.str-chat__base-image {
-  color: transparent; // prevents the img alt text from being seen through the mask
-}
-
-.str-chat__base-image--load-failed {
-  @include utils.apply-mask-image(
-                  var(--str-chat__image-fallback-icon),
-                  var(--str-chat__disabled-color),
-                  5rem 5rem
-  );
-
-  ~ .str-chat__message-attachment-file--item-download {
-    .str-chat__message-attachment-download-icon path {
-      fill: var(--str-chat__text-color);
-    }
-  }
-}
-
-.str-chat__attachment-preview-image {
-  .str-chat__base-image--load-failed {
-    $fallbackSize: 1.5rem 1.5rem;
-    mask-size: $fallbackSize;
-    -webkit-mask-size: $fallbackSize;
-  }
-}
-
-.str-chat__attachment-preview-list .str-chat__attachment-preview-image--error {
-  background-color: var(--str-chat__secondary-surface-color);
-
-  .str-chat__attachment-preview-thumbnail.str-chat__base-image--load-failed {
-    background-color: var(--str-chat__disabled-color);
-  }
-}

package/dist/scss/v2/BaseImage/index.scss

@@ -1,2 +0,0 @@
-@import "BaseImage-layout";
-@import "BaseImage-theme";

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

@@ -1,141 +0,0 @@
-@use '../utils';
-
-.str-chat__channel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  .str-chat__container {
-    height: 100%;
-    display: flex;
-
-    .str-chat__main-panel {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      min-width: 0;
-    }
-  }
-}
-
-.str-chat__empty-channel {
-  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
-  @include utils.empty-layout;
-  position: relative;
-
-  .str-chat__empty-channel-notifications {
-    position: absolute;
-    inset-block-end: var(--str-chat__spacing-2);
-  }
-}
-
-.str-chat__loading-channel {
-  $text-height: calc(var(--str-chat__spacing-px) * 16);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .str-chat__loading-channel-header {
-    @include utils.header-layout;
-
-    .str-chat__loading-channel-header-avatar {
-      flex-shrink: 0;
-      width: calc(var(--str-chat__spacing-px) * 40);
-      height: calc(var(--str-chat__spacing-px) * 40);
-      border-radius: var(--str-chat__avatar-border-radius);
-    }
-
-    .str-chat__loading-channel-header-end {
-      @include utils.header-text-layout;
-
-      .str-chat__loading-channel-header-name {
-        border-radius: var(--str-chat__border-radius-xs);
-        height: $text-height;
-        width: calc(var(--str-chat__spacing-px) * 170);
-      }
-
-      .str-chat__loading-channel-header-info {
-        border-radius: var(--str-chat__border-radius-xs);
-        height: $text-height;
-        width: calc(var(--str-chat__spacing-px) * 66);
-      }
-    }
-  }
-
-  .str-chat__loading-channel-message-list {
-    /* stylelint-disable */
-    height: 100%;
-    @include utils.message-list-spacing;
-
-    .str-chat__loading-channel-message {
-      display: flex;
-      width: 100%;
-      column-gap: var(--str-chat__spacing-2);
-      padding: var(--str-chat__spacing-4) 0;
-
-      .str-chat__loading-channel-message-avatar {
-        flex-shrink: 0;
-        width: calc(var(--str-chat__spacing-px) * 49);
-        height: calc(var(--str-chat__spacing-px) * 49);
-      }
-
-      .str-chat__loading-channel-message-end {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        row-gap: var(--str-chat__spacing-2);
-
-        .str-chat__loading-channel-message-last-row {
-          display: flex;
-          width: 100%;
-          column-gap: var(--str-chat__spacing-2);
-        }
-      }
-
-      .str-chat__loading-channel-message-sender {
-        height: $text-height;
-        width: calc(var(--str-chat__spacing-px) * 66);
-      }
-
-      .str-chat__loading-channel-message-text {
-        height: $text-height;
-        width: 100%;
-      }
-
-      .str-chat__loading-channel-message-date {
-        height: $text-height;
-        width: calc(var(--str-chat__spacing-px) * 50);
-      }
-
-      &:nth-of-type(2) {
-        flex-direction: row-reverse;
-
-        .str-chat__loading-channel-message-sender {
-          align-self: end;
-        }
-
-        .str-chat__loading-channel-message-last-row {
-          flex-direction: row-reverse;
-        }
-      }
-    }
-  }
-
-  .str-chat__loading-channel-message-input-row {
-    display: flex;
-    column-gap: var(--str-chat__spacing-2);
-    padding: var(--str-chat__spacing-2);
-
-    .str-chat__loading-channel-message-input {
-      width: 100%;
-      height: calc(var(--str-chat__spacing-px) * 36);
-    }
-
-    .str-chat__loading-channel-message-send {
-      height: calc(var(--str-chat__spacing-px) * 36);
-      width: calc(var(--str-chat__spacing-px) * 36);
-    }
-  }
-}