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

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

@@ -1,483 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__message-border-radius: none;
-
-  /* The text/icon color of the component */
-  --str-chat__message-color: var(--str-chat__text-color);
-
-  /* The text/icon color used for displaying error messages */
-  --str-chat__message-error-message-color: var(--str-chat__danger-color);
-
-  /* The text/icon color used for displaying items with less emphasis */
-  --str-chat__message-secondary-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The text color used for displaying links */
-  --str-chat__message-link-color: var(--str-chat__primary-color);
-
-  /* The text color used for displaying mentions */
-  --str-chat__message-mention-color: var(--str-chat__primary-color);
-
-  /* The text/icon color used for displaying message status */
-  --str-chat__message-status-color: var(--str-chat__primary-color);
-
-  /* The text color used for displaying the number of thread replies of a message */
-  --str-chat__message-replies-count-color: var(--str-chat__primary-color);
-
-  /* The background color of the component */
-  --str-chat__message-background-color: transparent;
-
-  /* The background color of a jumped-to message */
-  --str-chat__message-highlighted-background-color: var(--str-chat__message-highlight-color);
-
-  /* Top border of the component */
-  --str-chat__message-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__message-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__message-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__message-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__message-box-shadow: none;
-
-  /* The background of the message component in active state */
-  --str-chat__message-active-bacground-color: transparent;
-
-  /* The icon color used for displaying message options */
-  --str-chat__message-options-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The icon color used for displaying message options if a message option is clicked */
-  --str-chat__message-options-hover-background-color: var(--str-chat__tertiary-surface-color);
-
-  /* The border radius used for displaying message options */
-  --str-chat__message-options-border-radius: var(--str-chat__border-radius-circle);
-
-  /* The background color used if a message option is hovered */
-  --str-chat__message-options-active-color: var(--str-chat__primary-color);
-
-  /* The border radius used for the borders of the message bubble */
-  --str-chat__message-bubble-border-radius: var(--str-chat__border-radius-md);
-
-  /* The text/icon of the message bubble */
-  --str-chat__message-bubble-color: var(--str-chat__text-color);
-
-  /* The background of the message bubble */
-  --str-chat__message-bubble-background-color: var(--str-chat__secondary-surface-color);
-
-  /* The text/icon of the message bubble, if the message was sent by the user */
-  --str-chat__own-message-bubble-color: var(--str-chat__message-bubble-color);
-
-  /* The background of the message bubble, if the message was sent by the user */
-  --str-chat__own-message-bubble-background-color: var(--str-chat__primary-surface-color);
-
-  /* The background of the message bubble, if it's a quoted message */
-  --str-chat__quoted-message-bubble-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the message bubble */
-  --str-chat__message-bubble-border-block-start: none;
-
-  /* Bottom border of the message bubble */
-  --str-chat__message-bubble-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the message bubble */
-  --str-chat__message-bubble-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the message bubble */
-  --str-chat__message-bubble-border-inline-end: none;
-
-  /* Box shadow applied to the message bubble */
-  --str-chat__message-bubble-box-shadow: none;
-
-  /* The border radius used for the borders of a deleted message */
-  --str-chat__deleted-message-border-radius: var(--str-chat__border-radius-md);
-
-  /* The text/icon of a deleted message */
-  --str-chat__deleted-message-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The background of a deleted message */
-  --str-chat__deleted-message-background-color: var(--str-chat__secondary-surface-color);
-
-  /* Top border of a deleted message */
-  --str-chat__deleted-message-border-block-start: none;
-
-  /* Bottom border of a deleted message */
-  --str-chat__deleted-message-border-block-end: none;
-
-  /* Left (right in RTL layout) border of a deleted message */
-  --str-chat__deleted-message-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of a deleted message */
-  --str-chat__deleted-message-border-inline-end: none;
-
-  /* Box shadow applied to a deleted message */
-  --str-chat__deleted-message-box-shadow: none;
-
-  /* The border radius used for the borders of a deleted message */
-  --str-chat__blocked-message-border-radius: var(--str-chat__border-radius-md);
-
-  /* The text/icon of a deleted message */
-  --str-chat__blocked-message-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The background of a deleted message */
-  --str-chat__blocked-message-background-color: var(--str-chat__secondary-surface-color);
-
-  /* Top border of a deleted message */
-  --str-chat__blocked-message-border-block-start: none;
-
-  /* Bottom border of a deleted message */
-  --str-chat__blocked-message-border-block-end: none;
-
-  /* Left (right in RTL layout) border of a deleted message */
-  --str-chat__blocked-message-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of a deleted message */
-  --str-chat__blocked-message-border-inline-end: none;
-
-  /* Box shadow applied to a deleted message */
-  --str-chat__blocked-message-box-shadow: none;
-
-  /* The border radius used for the borders of a system message */
-  --str-chat__system-message-border-radius: 0;
-
-  /* The text/icon of a system message */
-  --str-chat__system-message-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The background of a system message */
-  --str-chat__system-message-background-color: transparent;
-
-  /* Top border of a system message */
-  --str-chat__system-message-border-block-start: none;
-
-  /* Bottom border of a system message */
-  --str-chat__system-message-border-block-end: none;
-
-  /* Left (right in RTL layout) border of a system message */
-  --str-chat__system-message-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of a system message */
-  --str-chat__system-message-border-inline-end: none;
-
-  /* Box shadow applied to a system message */
-  --str-chat__system-message-box-shadow: none;
-
-  /* Text color in a date separator*/
-  --str-chat__date-separator-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The line color applied to date separator */
-  --str-chat__date-separator-line-color: var(--str-chat__disabled-color);
-
-  /* The border radius used for the borders of a date separator */
-  --str-chat__date-separator-border-radius: 0;
-
-  /* The background color of a date separator */
-  --str-chat__date-separator-background-color: transparent;
-
-  /* Top border of a date separator */
-  --str-chat__date-separator-border-block-start: none;
-
-  /* Bottom border of a date separator */
-  --str-chat__date-separator-border-block-end: none;
-
-  /* Left (right in RTL layout) border of a date separator */
-  --str-chat__date-separator-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of a date separator */
-  --str-chat__date-separator-border-inline-end: none;
-
-  /* Box shadow applied to a date separator */
-  --str-chat__date-separator-box-shadow: none;
-
-  /* The text color of the translation notice that is displayed if a message is translated with auto-translation */
-  --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The hover color of the translation notice that is displayed if a message is translated with auto-translation */
-  --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color);
-
-  /* The text color of the message reminder, if it's a quoted message */
-  --str-chat__message-reminder-color: var(--str-chat__primary-color);
-
-  /* The background of the message reminder, if it's a quoted message */
-  --str-chat__message-reminder-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the message reminder */
-  --str-chat__message-reminder-border-block-start: none;
-
-  /* Bottom border of the message reminder */
-  --str-chat__message-reminder-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the message reminder */
-  --str-chat__message-reminder-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the message reminder */
-  --str-chat__message-reminder-border-inline-end: none;
-
-  /* Box shadow applied to the message reminder */
-  --str-chat__message-reminder-box-shadow: none;
-
-  /* The border radius used for the borders of a message reminder */
-  --str-chat__message-reminder-border-radius: 0;
-}
-
-.str-chat__message--system {
-  @include utils.component-layer-overrides('system-message');
-  font: var(--str-chat__caption-text);
-}
-
-.str-chat__date-separator {
-  @include utils.component-layer-overrides('date-separator');
-  font: var(--str-chat__body-text);
-
-  &-line {
-    background-color: var(--str-chat__date-separator-line-color);
-    border: none;
-  }
-}
-
-.str-chat__message-mention {
-  color: var(--str-chat__message-mention-color);
-  font: var(--str-chat__body2-medium-text);
-}
-
-.str-chat__message {
-  @include utils.component-layer-overrides('message');
-
-  a {
-    text-decoration: none;
-    color: var(--str-chat__message-link-color);
-  }
-
-  .str-chat__message-reminder {
-    @include utils.component-layer-overrides('message-reminder');
-    font: var(--str-chat__caption-medium-text);
-  }
-
-  .str-chat__message-bubble {
-    @include utils.component-layer-overrides('message-bubble');
-    font: var(--str-chat__body2-text);
-  }
-
-  .str-chat__message--deleted-inner {
-    @include utils.component-layer-overrides('deleted-message');
-    font: var(--str-chat__body2-text);
-  }
-
-  .str-chat__message--blocked-inner {
-    @include utils.component-layer-overrides('blocked-message');
-    font: var(--str-chat__body2-text);
-  }
-
-  &.str-chat__message--me .str-chat__message-bubble {
-    color: var(--str-chat__own-message-bubble-color);
-    background-color: var(--str-chat__own-message-bubble-background-color);
-  }
-
-  .str-chat__message-options {
-    --str-chat-icon-color: var(--str-chat__message-options-color);
-
-    .str-chat__message-actions-box-button,
-    .str-chat__message-reply-in-thread-button,
-    .str-chat__message-reactions-button {
-      // remove default button styles (React SDK uses button compared to div in Angular SDK)
-      @include utils.button-reset;
-      border-radius: var(--str-chat__message-options-border-radius);
-      color: var(--str-chat__message-options-color);
-
-      .str-chat__message-action-icon path {
-        fill: var(--str-chat__message-options-color);
-      }
-    }
-
-    .str-chat__message-actions-box-button:hover,
-    .str-chat__message-reply-in-thread-button:hover,
-    .str-chat__message-reactions-button:hover {
-      background-color: var(--str-chat__message-options-hover-background-color);
-    }
-
-    .str-chat__message-actions-box-button:active,
-    .str-chat__message-reply-in-thread-button:active,
-    .str-chat__message-reactions-button:active {
-      .str-chat__message-action-icon path {
-        fill: var(--str-chat__message-options-active-color);
-      }
-    }
-  }
-
-  .str-chat__translation-notice {
-    button {
-      font: var(--str-chat__body2-text);
-      color: var(--str-chat__translation-notice-color);
-      border: none;
-      background: none;
-
-      &:active,
-      &:hover {
-        background: var(--str-chat__translation-notice-active-background-color);
-      }
-    }
-  }
-
-  .str-chat__message-metadata,
-  .str-chat__custom-message-metadata {
-    color: var(--str-chat__message-secondary-color);
-    font: var(--str-chat__caption-text);
-
-    .str-chat__message-sender-name {
-      font: var(--str-chat__caption-medium-text);
-    }
-  }
-
-  .str-chat__message-status {
-    --str-chat-icon-color: var(--str-chat__message-status-color);
-    color: var(--str-chat__message-status-color);
-    font: var(--str-chat__body-text);
-
-    svg {
-      path {
-        fill: var(--str-chat__message-status-color);
-      }
-    }
-  }
-
-  .str-chat__message-status-sent,
-  .str-chat__message-status-delivered {
-    svg {
-      path {
-        fill: var(--str-chat__text-low-emphasis-color);
-      }
-    }
-  }
-
-  .str-chat__message-replies-count-button-wrapper,
-  .str-chat__message-is-thread-reply-button-wrapper {
-    button {
-      border: none;
-      background-color: transparent;
-      font: var(--str-chat__body-medium-text);
-      color: var(--str-chat__message-replies-count-color);
-    }
-  }
-
-  .str-chat__message--error-message {
-    color: var(--str-chat__message-error-message-color);
-    font: var(--str-chat__caption-text);
-  }
-
-  .str-chat__message-error-icon {
-    --str-chat-icon-color: var(--str-chat__message-error-message-color);
-    /* stylelint-disable-next-line selector-max-id */
-    svg #background {
-      fill: var(--str-chat__message-error-message-color);
-    }
-  }
-}
-
-.str-chat__message--highlighted {
-  transition: background-color 0.1s ease-out;
-  background-color: var(--str-chat__message-highlighted-background-color);
-}
-
-/* This rule won't be applied in browsers that don't support :has() */
-.str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)) {
-  background-color: var(--str-chat__message-active-bacground-color);
-}
-
-/* Fallback for when :has() is unsupported */
-@supports not selector(:has(a, b)) {
-  .str-chat__li:hover {
-    background-color: var(--str-chat__message-active-bacground-color);
-  }
-}
-
-.str-chat__li--top,
-.str-chat__li--single {
-  .str-chat__message--other {
-    .str-chat__message-bubble {
-      border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
-    }
-  }
-
-  .str-chat__message--me {
-    .str-chat__message-bubble {
-      border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
-    }
-  }
-}
-
-.str-chat__li--middle,
-.str-chat__li--bottom {
-  .str-chat__message--other {
-    .str-chat__message-bubble {
-      border-start-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
-      border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
-    }
-  }
-
-  .str-chat__message--me {
-    .str-chat__message-bubble {
-      border-start-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
-      border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
-    }
-  }
-}
-
-.str-chat__message-with-thread-link {
-  &.str-chat__message--other {
-    .str-chat__message-bubble {
-      border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
-    }
-  }
-
-  &.str-chat__message--me {
-    .str-chat__message-bubble {
-      border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
-    }
-  }
-}
-
-.str-chat__quoted-message-preview {
-  @include utils.component-layer-overrides('message');
-
-  .str-chat__quoted-message-bubble {
-    @include utils.component-layer-overrides('message-bubble');
-    background-color: var(--str-chat__quoted-message-bubble-background-color);
-    border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius) / 6);
-  }
-}
-
-.str-chat__message-input {
-  .str-chat__quoted-message-preview {
-    .str-chat__quoted-message-bubble {
-      background-color: var(--str-chat__message-bubble-background-color);
-    }
-  }
-}
-
-.str-chat__unread-messages-separator {
-  background-color: var(--str-chat__secondary-surface-color);
-  color: var(--str-chat__text-low-emphasis-color);
-  text-transform: uppercase;
-  font: var(--str-chat__caption-strong-text);
-}
-
-.str-chat__unread-messages-notification {
-  --str-chat-icon-color: var(--str-chat__on-primary-color);
-  background-color: var(--str-chat__text-low-emphasis-color);
-  border-radius: 1.125rem;
-
-  button {
-    cursor: pointer;
-    color: var(--str-chat__on-primary-color);
-    border: none;
-    background-color: transparent;
-  }
-
-  button:first-of-type {
-    font: var(--str-chat__caption-text);
-  }
-}

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

@@ -1,21 +0,0 @@
-.str-chat__message-actions-box {
-  overflow: hidden; // Avoids message action box item background overflow in hovered state
-
-  .str-chat__message-actions-box__submenu,
-  .str-chat__message-actions-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    min-width: 10rem;
-
-    .str-chat__message-actions-list-item-button {
-      padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
-      margin: 0;
-      cursor: pointer;
-      width: 100%;
-      text-align: start;
-    }
-  }
-}

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

@@ -1,85 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__message-actions-box-border-radius: var(--str-chat__border-radius-sm);
-
-  /* The text/icon color of the component */
-  --str-chat__message-actions-box-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__message-actions-box-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the component */
-  --str-chat__message-actions-box-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__message-actions-box-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__message-actions-box-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__message-actions-box-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__message-actions-box-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__message-actions-box-item-border-radius: 0;
-
-  /* The text/icon color of an item in the message actions box */
-  --str-chat__message-actions-box-item-color: var(--str-chat__text-color);
-
-  /* The background color of an item in the message actions box */
-  --str-chat__message-actions-box-item-background-color: transparent;
-
-  /* The background color of an item in the message actions box when hovered */
-  --str-chat__message-actions-box-item-hover-background-color: var(
-    --str-chat__secondary-surface-color
-  );
-
-  /* Top border of an item in the message actions box */
-  --str-chat__message-actions-box-item-border-block-start: none;
-
-  /* Bottom border of an item in the message actions box */
-  --str-chat__message-actions-box-item-border-block-end: none;
-
-  /* Left (right in RTL layout) border of an item in the message actions box */
-  --str-chat__message-actions-box-item-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of an item in the message actions box */
-  --str-chat__message-actions-box-item-border-inline-end: none;
-
-  /* Box shadow applied to an item in the message actions box */
-  --str-chat__message-actions-box-item-box-shadow: none;
-}
-
-.str-chat__message-actions-box {
-  @include utils.component-layer-overrides('message-actions-box');
-
-  .str-chat__message-actions-list-item-button {
-    @include utils.component-layer-overrides('message-actions-box-item');
-    font: var(--str-chat__subtitle-text);
-
-    &:hover {
-      background-color: var(--str-chat__message-actions-box-item-hover-background-color);
-    }
-  }
-
-  .str_chat__button-with-submenu--submenu-open {
-    background-color: var(--str-chat__message-actions-box-item-hover-background-color);
-  }
-
-  .str-chat__message-actions-box__submenu {
-    @include utils.component-layer-overrides('message-actions-box');
-  }
-}
-
-@media (hover: none) {
-  .str-chat__message-actions-box {
-    .str-chat__message-actions-list-item-button:hover {
-      background-color: transparent;
-    }
-  }
-}

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

@@ -1,19 +0,0 @@
-.str-chat__message-bounce-prompt {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--str-chat__spacing-9);
-
-  .str-chat__message-bounce-actions {
-    display: flex;
-    flex-direction: column;
-    gap: var(--str-chat__spacing-2);
-  }
-
-  .str-chat__message-bounce-edit,
-  .str-chat__message-bounce-send,
-  .str-chat__message-bounce-delete {
-    cursor: pointer;
-    padding: var(--str-chat__spacing-2);
-  }
-}

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

@@ -1,51 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The text color used for the edit button */
-  --str-chat__message-bounce-edit-button-color: var(--str-chat__primary-color);
-
-  /* The text color used for the send button */
-  --str-chat__message-bounce-send-button-color: var(--str-chat__primary-color);
-
-  /* The text color used for the delete button */
-  --str-chat__message-bounce-delete-button-color: var(--str-chat__primary-color);
-
-  /* The background color of the button */
-  --str-chat__message-bounce-button-background-color: transparent;
-
-  /* Top border of the button */
-  --str-chat__message-bounce-button-border-block-start: none;
-
-  /* Bottom border of the button */
-  --str-chat__message-bounce-button-border-block-end: none;
-
-  /* Left (right in RTL layout) button of the component */
-  --str-chat__message-bounce-button-border-inline-start: none;
-
-  /* Right (left in RTL layout) button of the component */
-  --str-chat__message-bounce-button-border-inline-end: none;
-
-  /* Box shadow applied to the button */
-  --str-chat__message-bounce-button-box-shadow: none;
-}
-
-.str-chat__message-bounce-prompt {
-  .str-chat__message-bounce-edit,
-  .str-chat__message-bounce-send,
-  .str-chat__message-bounce-delete {
-    @include utils.component-layer-overrides('message-bounce-button');
-    font: var(--str-chat__body-medium-text);
-  }
-
-  .str-chat__message-bounce-edit {
-    color: var(--str-chat__message-bounce-edit-button-color);
-  }
-
-  .str-chat__message-bounce-send {
-    color: var(--str-chat__message-bounce-send-button-color);
-  }
-
-  .str-chat__message-bounce-delete {
-    color: var(--str-chat__message-bounce-delete-button-color);
-  }
-}