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

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

@@ -1,107 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__message-list-border-radius: 0;
-
-  /* The text/icon color of the component */
-  --str-chat__message-list-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__message-list-background-color: var(--str-chat__background-color);
-
-  /* Box shadow applied to the component */
-  --str-chat__message-list-box-shadow: none;
-
-  /* Top border of the component */
-  --str-chat__message-list-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__message-list-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__message-list-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__message-list-border-inline-end: none;
-
-  /* The border radius used for the borders of the jump to latest message button */
-  --str-chat__jump-to-latest-message-border-radius: var(--str-chat__circle-fab-border-radius);
-
-  /* The text/icon color of the jump to latest message button */
-  --str-chat__jump-to-latest-message-color: var(--str-chat__circle-fab-color);
-
-  /* The background color of the jump to latest message button */
-  --str-chat__jump-to-latest-message-background-color: var(--str-chat__circle-fab-background-color);
-
-  /* The background color of the jump to latest message button in pressed state */
-  --str-chat__jump-to-latest-message-pressed-background-color: var(
-    --str-chat__circle-fab-pressed-background-color
-  );
-
-  /* Box shadow applied to the jump to latest message button */
-  --str-chat__jump-to-latest-message-box-shadow: var(--str-chat__circle-fab-box-shadow);
-
-  /* Top border of the jump to latest message button */
-  --str-chat__jump-to-latest-message-border-block-start: var(
-    --str-chat__circle-fab-border-block-start
-  );
-
-  /* Bottom border of the jump to latest message button */
-  --str-chat__jump-to-latest-message-border-block-end: var(--str-chat__circle-fab-border-block-end);
-
-  /* Left (right in RTL layout) border of the jump to latest message button */
-  --str-chat__jump-to-latest-message-border-inline-start: var(
-    --str-chat__circle-fab-border-inline-start
-  );
-
-  /* Right (left in RTL layout) border of the jump to latest message button */
-  --str-chat__jump-to-latest-message-border-inline-end: var(
-    --str-chat__circle-fab-border-inline-end
-  );
-
-  /* The background color of the unread messages count on the jump to latest message button */
-  --str-chat__jump-to-latest-message-unread-count-background-color: var(
-    --str-chat__jump-to-latest-message-color
-  );
-
-  /* The text/icon color of the unread messages count on the jump to latest message button */
-  --str-chat__jump-to-latest-message-unread-count-color: var(
-    --str-chat__jump-to-latest-message-background-color
-  );
-
-  /* The color used for displaying thread replies and thread separator at the start of a thread */
-  --str-chat__thread-head-start-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The color used for the separator below the first message in a thread */
-  --str-chat__thread-head-start-border-block-end-color: var(--str-chat__surface-color);
-}
-
-.str-chat__list {
-  @include utils.component-layer-overrides('message-list');
-
-  .str-chat__parent-message-li {
-    border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
-
-    .str-chat__thread-start {
-      color: var(--str-chat__thread-head-start-color);
-      font: var(--str-chat__subtitle-text);
-    }
-  }
-}
-
-.str-chat__jump-to-latest-message {
-  --str-chat-icon-color: var(--str-chat__jump-to-latest-message-unread-count-background-color);
-
-  .str-chat__circle-fab {
-    @include utils.component-layer-overrides('jump-to-latest-message');
-    @include utils.circle-fab-overrides('jump-to-latest-message');
-
-    .str-chat__jump-to-latest-unread-count {
-      background-color: var(--str-chat__jump-to-latest-message-unread-count-background-color);
-      color: var(--str-chat__jump-to-latest-message-unread-count-color);
-      border-radius: var(--str-chat__jump-to-latest-message-border-radius);
-      font: var(--str-chat__caption-text);
-    }
-  }
-}

package/dist/scss/v2/MessageList/VirtualizedMessageList-layout.scss

@@ -1,57 +0,0 @@
-@use '../utils';
-
-// todo: React SDK specific. Copied from V1. Deprecate after merging with MessageList
-.str-chat__virtual-list {
-  @include utils.scrollable;
-  position: relative;
-  flex: 1;
-  -webkit-overflow-scrolling: touch; /* enable smooth scrolling on ios */
-  margin: 0;
-  width: 100%;
-  height: 100%;
-
-  .str-chat__message-list-scroll {
-    overscroll-behavior: none;
-  }
-
-  .str-chat__message-list-scroll > div {
-    @include utils.message-list-spacing;
-  }
-
-  .str-chat__parent-message-li {
-    padding-block-end: var(--str-chat__spacing-4);
-
-    .str-chat__thread-start {
-      text-align: start;
-      padding-top: var(--str-chat__spacing-3);
-    }
-  }
-
-  // conditionally showing the header displaces items when prepending.
-  // a simple workaround is to make the loading indicator an overlay.
-  &__loading {
-    display: flex;
-    padding-top: var(--str-chat__spacing-2);
-    justify-content: center;
-    width: 100%;
-    position: absolute;
-  }
-
-  p {
-    margin: 0 !important; // always use padding, margin mess up the height calculations
-
-    a {
-      white-space: pre-line;
-      overflow: hidden;
-      word-wrap: break-word;
-    }
-  }
-
-  .str-chat__message {
-    margin-block-end: 0 !important;
-  }
-
-  .str-chat__virtual-list-message-wrapper {
-    padding-block-end: var(--str-chat__spacing-0_5);
-  }
-}

package/dist/scss/v2/MessageList/VirtualizedMessageList-theme.scss

@@ -1,41 +0,0 @@
-@use '../utils';
-
-/* Only available in React SDK. */
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__virtual-list-border-radius: 0;
-
-  /* The text/icon color of the component */
-  --str-chat__virtual-list-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__virtual-list-background-color: var(--str-chat__background-color);
-
-  /* Box shadow applied to the component */
-  --str-chat__virtual-list-box-shadow: none;
-
-  /* Top border of the component */
-  --str-chat__virtual-list-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__virtual-list-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__virtual-list-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__virtual-list-border-inline-end: none;
-}
-
-.str-chat__virtual-list {
-  @include utils.component-layer-overrides('virtual-list');
-
-  .str-chat__parent-message-li {
-    border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
-
-    .str-chat__thread-start {
-      color: var(--str-chat__thread-head-start-color);
-      font: var(--str-chat__subtitle-text);
-    }
-  }
-}

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

@@ -1,143 +0,0 @@
-@use '../utils';
-
-.str-chat__message-reactions-container {
-  display: flex;
-
-  .str-chat__message-reactions {
-    overflow-y: hidden;
-    overflow-x: auto;
-    scrollbar-width: none;
-    list-style: none;
-    display: flex;
-    margin-block-start: var(--str-chat__spacing-0_5);
-    margin-block-end: var(--str-chat__spacing-0_5);
-    column-gap: var(--str-chat__spacing-0_5);
-    width: fit-content;
-    padding: 0;
-    position: relative;
-
-    .str-chat__message-reaction {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: var(--str-chat__spacing-1_5);
-      position: relative;
-      cursor: pointer;
-      flex-shrink: 0;
-
-      button {
-        @include utils.button-reset;
-        @include utils.flex-row-center;
-        padding: 0;
-      }
-
-      .str-chat__message-reaction-emoji {
-        height: calc(var(--str-chat__spacing-px) * 13);
-        display: flex !important; // Overriding emoji-mart styles
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    // Only in theme-v1
-    .str-chat__reaction-list--counter,
-    .str-chat__simple-reactions-list-item--last-number {
-      display: none;
-    }
-  }
-}
-
-.str-chat__message--me {
-  .str-chat__message-reactions-container {
-    justify-content: flex-end;
-  }
-}
-
-.str-chat__message--other {
-  .str-chat__message-reactions-container {
-    justify-content: flex-start;
-  }
-}
-
-.str-chat__message-reactions-details-modal {
-  .str-chat__modal--open {
-    .str-chat__modal__inner {
-      height: 40%;
-      max-height: 80%;
-      min-width: 90%;
-      max-width: 90%;
-      width: 90%;
-      flex-basis: min-content;
-
-      @media only screen and (min-device-width: 768px) {
-        min-width: 40%;
-        max-width: 60%;
-        width: min-content;
-      }
-    }
-  }
-}
-
-.str-chat__message-reactions-details {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--str-chat__spacing-4);
-  max-height: 100%;
-  height: 100%;
-  min-height: 0;
-
-  .str-chat__message-reactions-details-reaction-types {
-    display: flex;
-    max-width: 100%;
-    width: 100%;
-    min-width: 0;
-    overflow-x: auto;
-    gap: var(--str-chat__spacing-4);
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-
-    .str-chat__message-reactions-details-reaction-type {
-      display: flex;
-      align-items: center;
-      padding: var(--str-chat__spacing-1) 0;
-      flex-shrink: 0;
-      cursor: pointer;
-
-      .str-chat__message-reaction-emoji--with-fallback {
-        width: 18px;
-        line-height: 18px;
-      }
-    }
-  }
-
-  .str-chat__message-reaction-emoji-big {
-    --str-chat__stream-emoji-size: 1em;
-    align-self: center;
-    font-size: 2rem;
-  }
-
-  .str-chat__message-reaction-emoji-big.str-chat__message-reaction-emoji--with-fallback {
-    line-height: 2rem;
-  }
-
-  .str-chat__message-reactions-details-reacting-users {
-    display: flex;
-    flex-direction: column;
-    gap: var(--str-chat__spacing-3);
-    max-height: 100%;
-    overflow-y: auto;
-    min-height: 30vh;
-
-    .str-chat__loading-indicator {
-      margin: auto;
-    }
-
-    .str-chat__message-reactions-details-reacting-user {
-      display: flex;
-      align-items: center;
-      gap: var(--str-chat__spacing-2);
-    }
-  }
-}

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

@@ -1,92 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__message-reactions-border-radius: none;
-
-  /* The text/icon color of the component */
-  --str-chat__message-reactions-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__message-reactions-background-color: transparent;
-
-  /* Top border of the component */
-  --str-chat__message-reactions-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__message-reactions-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__message-reactions-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__message-reactions-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__message-reactions-box-shadow: none;
-
-  /* The border radius used for the borders of a message reaction */
-  --str-chat__message-reaction-border-radius: var(--str-chat__border-radius-xs);
-
-  /* The text/icon color of a message reaction */
-  --str-chat__message-reaction-color: var(--str-chat__text-color);
-
-  /* The background color of a message reaction */
-  --str-chat__message-reaction-background-color: var(--str-chat__tertiary-surface-color);
-
-  /* Top border of a message reaction */
-  --str-chat__message-reaction-border-block-start: none;
-
-  /* Bottom border of a message reaction */
-  --str-chat__message-reaction-border-block-end: none;
-
-  /* Left (right in RTL layout) border of a message reaction */
-  --str-chat__message-reaction-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of a message reaction */
-  --str-chat__message-reaction-border-inline-end: none;
-
-  /* Box shadow applied to a message reaction */
-  --str-chat__message-reaction-box-shadow: none;
-
-  /* The text/icon color of a message reaction, if the user reacted with that reaction */
-  --str-chat__own-message-reaction-color: var(--str-chat__text-color);
-
-  /* The background color of a message reaction, if the user reacted with that reaction */
-  --str-chat__own-message-reaction-background-color: var(
-    --str-chat__primary-surface-color-low-emphasis
-  );
-
-  --str-chat__messsage-reactions-details--selected-color: solid var(--str-chat__primary-color);
-}
-
-.str-chat__message-reactions-container {
-  .str-chat__message-reactions {
-    @include utils.component-layer-overrides('message-reactions');
-
-    .str-chat__message-reaction {
-      @include utils.component-layer-overrides('message-reaction');
-      font: var(--str-chat__caption-text);
-
-      &.str-chat__message-reaction-own {
-        color: var(--str-chat__own-message-reaction-color);
-        background-color: var(--str-chat__own-message-reaction-background-color);
-      }
-    }
-  }
-}
-
-.str-chat__message-reactions-details {
-  .str-chat__message-reactions-details-reaction-type {
-    border-block-end: solid transparent;
-  }
-
-  .str-chat__message-reactions-details-reaction-type--selected {
-    border-block-end: var(--str-chat__messsage-reactions-details--selected-color);
-  }
-
-
-  .str-chat__message-reactions-details-reacting-user {
-    font: var(--str-chat__subtitle-text);
-  }
-}

package/dist/scss/v2/MessageReactions/MessageReactionsSelector-layout.scss

@@ -1,86 +0,0 @@
-@use '../utils';
-
-.str-chat__message-reaction-selector {
-  display: flex;
-  justify-content: flex-end;
-  position: absolute;
-  inset-block-end: 100%;
-
-  &.str-chat-angular-v5__reaction-selector {
-    margin: var(--str-chat__spacing-2);
-    position: static;
-    justify-content: flex-start;
-
-    .str-chat__message-reactions-options {
-      max-width: 100%;
-      overflow-y: hidden;
-      overflow-x: auto;
-      scrollbar-width: none;
-      padding: 0;
-
-      .str-chat__message-reactions-option {
-        flex-shrink: 0;
-      }
-    }
-  }
-
-  .str-chat__message-reactions-options {
-    list-style: none;
-    display: flex;
-    margin-block-end: var(--str-chat__spacing-0_5);
-    width: fit-content;
-    column-gap: var(--str-chat__spacing-1);
-    padding: var(--str-chat__spacing-2);
-
-    .str-chat__message-reactions-option {
-      @include utils.flex-row-center;
-      cursor: pointer;
-      width: calc(var(--str-chat__spacing-px) * 40);
-      height: calc(var(--str-chat__spacing-px) * 40);
-
-      .str-chat__message-reaction-emoji {
-        height: calc(var(--str-chat__spacing-px) * 20);
-        display: flex !important; // Overriding emoji-mart styles
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    // Only in theme-v1
-    .str-chat__message-reactions-last-user {
-      display: none;
-    }
-
-    .str-chat__message-reactions-list-item__count {
-      display: none;
-    }
-  }
-}
-
-.str-chat__message--me {
-  .str-chat__message-reaction-selector {
-    inset-inline-end: 0;
-  }
-}
-
-.str-chat__message--other {
-  .str-chat__message-reaction-selector {
-    inset-inline-start: 0;
-  }
-}
-
-// the React SDK positions the reaction selector with popperjs
-.str-chat-react__message-reaction-selector {
-  position: static;
-  inset-block-end: unset;
-
-  ul {
-    margin: 0;
-  }
-}
-
-.str-chat__message--me, .str-chat__message--other {
-  .str-chat-react__message-reaction-selector {
-    inset-inline-start: unset;
-  }
-}

package/dist/scss/v2/MessageReactions/MessageReactionsSelector-theme.scss

@@ -1,94 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__message-reactions-options-border-radius: var(--str-chat__border-radius-circle);
-
-  /* The text/icon color of the component */
-  --str-chat__message-reactions-options-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__message-reactions-options-background-color: var(
-    --str-chat__secondary-background-color
-  );
-
-  /* Top border of the component */
-  --str-chat__message-reactions-options-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__message-reactions-options-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__message-reactions-options-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__message-reactions-options-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__message-reactions-options-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
-
-  /* The border radius used for the borders of the component */
-  --str-chat__message-reactions-option-border-radius: var(--str-chat__border-radius-md);
-
-  /* The text/icon color of the component */
-  --str-chat__message-reactions-option-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__message-reactions-option-background-color: var(
-    --str-chat__secondary-background-color
-  );
-
-  /* The background color of the component when hovered */
-  --str-chat__message-reactions-option-hover-background-color: var(
-    --str-chat__primary-surface-color
-  );
-
-  /* The background color of the component when selected */
-  --str-chat__message-reactions-option-selected-background-color: var(
-    --str-chat__primary-color-low-emphasis
-  );
-
-  /* Top border of the component */
-  --str-chat__message-reactions-option-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__message-reactions-option-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__message-reactions-option-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__message-reactions-option-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__message-reactions-option-box-shadow: none;
-
-  .str-chat-angular-v5__reaction-selector {
-    --str-chat__message-reactions-options-box-shadow: none;
-    --str-chat__message-reactions-options-border-radius: 0;
-  }
-}
-
-.str-chat__reaction-selector {
-  .str-chat__message-reactions-options {
-    @include utils.component-layer-overrides('message-reactions-options');
-
-    .str-chat__message-reactions-option {
-      @include utils.component-layer-overrides('message-reactions-option');
-
-      &:hover {
-        background-color: var(--str-chat__message-reactions-option-hover-background-color);
-      }
-
-      &.str-chat__message-reactions-option-selected {
-        background-color: var(--str-chat__message-reactions-option-selected-background-color);
-      }
-    }
-
-    @media (hover: none) {
-      .str-chat__message-reactions-option:hover {
-        background-color: transparent;
-      }
-    }
-  }
-}

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

@@ -1,74 +0,0 @@
-@use '../utils';
-
-.str-chat__modal--open {
-  @include utils.flex-col-center;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-
-  .str-chat__modal-header {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 1.25rem 1rem;
-
-    button.str-chat__modal-header__go-back-button,
-    .str-chat__modal__close-button {
-      padding: 1rem;
-      background-size: 0.875rem;
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-
-    button.str-chat__modal-header__go-back-button {
-      background-image: var(--str-chat__arrow-left-icon);
-    }
-
-    .str-chat__modal-header__close-button {
-      @include utils.button-reset;
-      cursor: pointer;
-      background-image: var(--str-chat__close-icon);
-      background-repeat: no-repeat;
-      height: 0.875rem;
-      width: 0.875rem;
-    }
-
-    .str-chat__modal-header__title {
-      flex: 1;
-    }
-  }
-
-  button.str-chat__modal__close-button {
-    @include utils.unset-button;
-    margin: var(--str-chat__spacing-2);
-    cursor: pointer;
-  }
-
-  .str-chat__modal__close-button {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 28);
-    @include utils.flex-row-center;
-    padding: var(--str-chat__spacing-2);
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    cursor: pointer;
-  }
-
-  .str-chat__modal__inner {
-    @include utils.flex-col-center;
-    padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4);
-    width: 40%;
-    max-height: 80%;
-    min-width: 0;
-    min-height: 0;
-  }
-}
-
-.str-chat__modal--close {
-  display: none;
-}