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

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

@@ -1,268 +0,0 @@
-@use '../utils';
-
-.str-chat__message-input {
-  $send-button-size: calc(var(--str-chat__spacing-px) * 45);
-  $start-audio-recording-button-size: calc(var(--str-chat__spacing-px) * 40);
-
-  @include utils.flex-col-center;
-  width: 100%;
-  padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
-
-  position: relative;
-
-  .str-chat__quoted-message-preview-header {
-    @include utils.flex-row-center;
-    width: 100%;
-
-    .str-chat__quoted-message-reply-to-message {
-      width: 100%;
-      text-align: center;
-    }
-
-    .str-chat__quoted-message-remove {
-      width: calc(var(--str-chat__spacing-px) * 40);
-      height: calc(var(--str-chat__spacing-px) * 40);
-      cursor: pointer;
-    }
-  }
-
-  .str-chat__message-input-inner {
-    flex-grow: 1;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .str-chat__file-input-container {
-      --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
-      @include utils.flex-row-center;
-      width: calc(var(--str-chat__spacing-px) * 45);
-      height: calc(var(--str-chat__spacing-px) * 45);
-      cursor: pointer;
-
-      .str-chat__file-input-label {
-        @include utils.flex-row-center;
-        cursor: pointer;
-      }
-    }
-
-    .str-chat-angular__create-poll {
-      --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 21);
-      @include utils.flex-row-center;
-      width: calc(var(--str-chat__spacing-px) * 45);
-      height: calc(var(--str-chat__spacing-px) * 45);
-      cursor: pointer;
-    }
-
-    .str-chat__message-textarea-container {
-      @include utils.flex-col-center;
-      width: 100%;
-      min-width: 0;
-      max-height: 100%;
-
-      .str-chat__message-textarea-with-emoji-picker {
-        width: 100%;
-        min-height: 0;
-        max-height: 100%;
-        display: flex;
-        padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
-        column-gap: var(--str-chat__spacing-2);
-
-        .str-chat__message-textarea {
-          width: 100%;
-          display: flex;
-          max-height: 100%;
-          overflow-y: auto;
-          overflow-x: hidden;
-          padding: 0;
-        }
-
-        .str-chat__message-textarea-emoji-picker {
-          @include utils.flex-row-center;
-          width: calc(var(--str-chat__spacing-px) * 27);
-          height: calc(var(--str-chat__spacing-px) * 27);
-          font-size: calc(var(--str-chat__spacing-px) * 27);
-          align-self: end;
-
-          .str-chat__message-textarea-emoji-picker-container {
-            z-index: 5;
-
-            .str-chat__emoji-picker-container {
-              display: flex;
-            }
-          }
-
-          .str-chat__emoji-picker-button {
-            @include utils.unset-button;
-            display: flex;
-            cursor: pointer;
-
-            svg {
-              width: calc(var(--str-chat__spacing-px) * 24);
-              height: calc(var(--str-chat__spacing-px) * 24);
-
-              path {
-                fill: var(--str-chat__message-input-tools-color);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .str-chat__message-textarea-angular-host {
-    @include utils.flex-row-center;
-    width: 100%;
-  }
-
-  .str-chat__message-textarea-react-host {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .str-chat__stop-ai-generation-button {
-    width: calc(var(--str-chat__spacing-px) * 30);
-    height: calc(var(--str-chat__spacing-px) * 28);
-    cursor: pointer;
-  }
-
-  .str-chat__send-button {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 32);
-    @include utils.flex-row-center;
-    cursor: pointer;
-    padding: 0;
-    width: $send-button-size;
-    height: $send-button-size;
-    min-width: $send-button-size;
-
-    svg {
-      width: calc(var(--str-chat__spacing-px) * 32);
-      height: calc(var(--str-chat__spacing-px) * 32);
-    }
-  }
-
-  .str-chat__start-recording-audio-button {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 25);
-    @include utils.flex-row-center;
-    cursor: pointer;
-    padding: 0;
-    width: $start-audio-recording-button-size;
-    height: $start-audio-recording-button-size;
-    min-width: $start-audio-recording-button-size;
-
-    svg {
-      height: calc(var(--str-chat__spacing-px) * 25);
-    }
-  }
-
-  .str-chat__message-input-cooldown {
-    @include utils.flex-row-center;
-    margin-inline-start: var(--str-chat__spacing-2);
-    margin-block: calc(var(--str-chat__spacing-2) / 2);
-    min-width: calc(#{$send-button-size} - var(--str-chat__spacing-2));
-    min-height: calc(#{$send-button-size} - var(--str-chat__spacing-2));
-  }
-
-  .str-chat__message-input-not-allowed {
-    align-self: center;
-    padding: var(--str-chat__spacing-3);
-  }
-
-  .str-chat__quoted-message-preview {
-    padding: var(--str-chat__spacing-2);
-
-    .str-chat__quoted-poll-preview__name {
-      @include utils.ellipsis-text();
-      overflow-x: hidden; // force ellipsis to show
-    }
-  }
-
-  .str-chat__recording-permission-denied-notification {
-    position: absolute;
-    left: 0.5rem;
-    max-width: 100%;
-    bottom: 100%;
-    padding: 1rem;
-    margin-inline: 0.5rem;
-    z-index: 2;
-
-    .str-chat__recording-permission-denied-notification__dismiss-button-container {
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-}
-
-.str-chat__message-input-angular-host {
-  max-height: 50%;
-}
-
-.str-chat-angular__message-input {
-  height: 100%;
-  max-height: 100%;
-}
-
-.str-chat-angular__message-input-inner {
-  height: 100%;
-  max-height: 100%;
-  min-height: 0;
-  flex-grow: initial;
-}
-
-[dir='rtl'] .str-chat__send-button,
-[dir='rtl'] .str-chat__start-recording-audio-button {
-  svg {
-    transform: scale(-1, 1);
-  }
-}
-
-.str-chat__attachment-selector-actions-menu,
-.str-chat__attachment-selector {
-  button {
-    @include utils.button-reset;
-  }
-}
-
-.str-chat__attachment-selector {
-  .str-chat__attachment-selector__menu-button {
-    padding: 0.25rem 0.5rem;
-    cursor: pointer;
-
-    .str-chat__attachment-selector__menu-button__icon {
-      height: 26px;
-      width: 26px;
-    }
-  }
-}
-
-.str-chat__file-input {
-  display: none;
-}
-
-.str-chat__attachment-selector-actions-menu {
-  min-width: 300px;
-  padding-block: 0.5rem;
-}
-
-.str-chat__send-to-channel-checkbox__container {
-  width: 100%;
-  display: flex;
-  padding: 0.5rem 0.75rem;
-
-  .str-chat__send-to-channel-checkbox__field {
-    display: flex;
-    align-items: center;
-
-    label {
-      padding-inline: 0.5rem;
-    }
-
-    input {
-      margin: 0;
-    }
-  }
-}

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

@@ -1,359 +0,0 @@
-@use '../utils';
-
-.str-chat {
-  /* The border radius of the component */
-  --str-chat__message-input-border-radius: 0;
-
-  /* The text/icon color of the component */
-  --str-chat__message-input-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__message-input-background-color: var(--str-chat__secondary-background-color);
-
-  /* Top border of the component */
-  --str-chat__message-input-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__message-input-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__message-input-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__message-input-border-inline-end: none;
-
-  /* Box shadow applied to the component */
-  --str-chat__message-input-box-shadow: none;
-
-  /* The border radius used for the borders of the textarea */
-  --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md);
-
-  /* The text/icon color of the textarea */
-  --str-chat__message-textarea-color: var(--str-chat__text-color);
-
-  /* The background color of the textarea */
-  --str-chat__message-textarea-background-color: transparent;
-
-  /* Top border of the textarea */
-  --str-chat__message-textarea-border-block-start: 1px solid var(--str-chat__surface-color);
-
-  /* Bottom border of the textarea */
-  --str-chat__message-textarea-border-block-end: 1px solid var(--str-chat__surface-color);
-
-  /* Left (right in RTL layout) border of the textarea */
-  --str-chat__message-textarea-border-inline-start: 1px solid var(--str-chat__surface-color);
-
-  /* Right (left in RTL layout) border of the textarea */
-  --str-chat__message-textarea-border-inline-end: 1px solid var(--str-chat__surface-color);
-
-  /* Box shadow applied to the textarea */
-  --str-chat__message-textarea-box-shadow: none;
-
-  /* The border radius used for the borders of the send button */
-  --str-chat__message-send-border-radius: var(--str-chat__border-radius-circle);
-
-  /* The text/icon color of the send button */
-  --str-chat__message-send-color: var(--str-chat__primary-color);
-
-  /* The background color of the send button */
-  --str-chat__message-send-background-color: transparent;
-
-  /* Top border of the send button */
-  --str-chat__message-send-border-block-start: 0;
-
-  /* Bottom border of the send button */
-  --str-chat__message-send-border-block-end: 0;
-
-  /* Left (right in RTL layout) border of the send button */
-  --str-chat__message-send-border-inline-start: 0;
-
-  /* Right (left in RTL layout) border of the send button */
-  --str-chat__message-send-border-inline-end: 0;
-
-  /* Box shadow applied to the send button */
-  --str-chat__message-send-box-shadow: none;
-
-  /* The color of the send button in disabled state */
-  --str-chat__message-send-disabled-color: var(--str-chat__disabled-color);
-
-  /* The background color of the send button in disabled state */
-  --str-chat__message-send-disabled-background-color: var(--str-chat__disabled-color);
-
-  /* The border radius used for the borders of the audio recording button */
-  --str-chat__start-recording-audio-button-border-radius: var(--str-chat__border-radius-circle);
-
-  /* The text/icon color of the audio recording button */
-  --str-chat__start-recording-audio-button-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The background color of the audio recording button */
-  --str-chat__start-recording-audio-button-background-color: transparent;
-
-  /* Top border of the audio recording button */
-  --str-chat__start-recording-audio-button-border-block-start: 0;
-
-  /* Bottom border of the audio recording button */
-  --str-chat__start-recording-audio-button-border-block-end: 0;
-
-  /* Left (right in RTL layout) border of the audio recording button */
-  --str-chat__start-recording-audio-button-border-inline-start: 0;
-
-  /* Right (left in RTL layout) border of the audio recording button */
-  --str-chat__start-recording-audio-button-border-inline-end: 0;
-
-  /* Box shadow applied to the audio recording button */
-  --str-chat__start-recording-audio-button-box-shadow: none;
-
-  /* The color of the audio recording button in disabled state */
-  --str-chat__start-recording-audio-button-disabled-color: var(--str-chat__disabled-color);
-
-  /* The background color of the audio recording button in disabled state */
-  --str-chat__start-recording-audio-button-disabled-background-color: transparent;
-
-  /* The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) */
-  --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle);
-
-  /* The text/icon color of the tool buttons of the message input (such as attachment upload button) */
-  --str-chat__message-input-tools-color: var(--str-chat__text-low-emphasis-color);
-
-  /* The background color of the tool buttons of the message input (such as attachment upload button) */
-  --str-chat__message-input-tools-background-color: transparent;
-
-  /* Top border of the tool buttons of the message input (such as attachment upload button) */
-  --str-chat__message-input-tools-border-block-start: 0;
-
-  /* Bottom border of the tool buttons of the message input (such as attachment upload button) */
-  --str-chat__message-input-tools-border-block-end: 0;
-
-  /* Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
-  --str-chat__message-input-tools-border-inline-start: 0;
-
-  /* Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
-  --str-chat__message-input-tools-border-inline-end: 0;
-
-  /* Box shadow applied to the tool buttons of the message input (such as attachment upload button) */
-  --str-chat__message-input-tools-box-shadow: none;
-
-  /* Thex text color of the message that is displayed when the use can't send messages */
-  --str-chat__message-input-not-allowed-color: var(--str-chat__disabled-color);
-
-  /* The border radius used for the borders of the cooldown timer */
-  --str-chat__cooldown-border-radius: var(--str-chat__border-radius-circle);
-
-  /* The text/icon color of the cooldown timer */
-  --str-chat__cooldown-color: var(--str-chat__on-disabled-color);
-
-  /* The background color of the cooldown timer */
-  --str-chat__cooldown-background-color: var(--str-chat__disabled-color);
-
-  /* Top border of the cooldown timer */
-  --str-chat__cooldown-border-block-start: 0;
-
-  /* Bottom border of the cooldown timer */
-  --str-chat__cooldown-border-block-end: 0;
-
-  /* Left (right in RTL layout) border of the cooldown timer */
-  --str-chat__cooldown-border-inline-start: 0;
-
-  /* Right (left in RTL layout) border of the cooldown timer */
-  --str-chat__cooldown-border-inline-end: 0;
-
-  /* Box shadow applied to the cooldown timer */
-  --str-chat__cooldown-box-shadow: none;
-
-  /* Color applied to an icon in a button that opens attachment selector */
-  --str-chat__attachment-selector-button-icon-color: var(--str-chat__text-low-emphasis-color);
-
-  /* Color applied to an icon in a button that opens attachment selector when hovered over */
-  --str-chat__attachment-selector-button-icon-color-hover: var(--str-chat__primary-color);
-
-  /* Color applied to an attachment selector menu item icon when hovered over */
-  --str-chat__attachment-selector-actions-menu-button-icon-color: var(--str-chat__primary-color);
-
-  /* Color applied to an attachment selector menu item icon when hovered over or focused */
-  --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(
-    --str-chat__primary-color
-  );
-}
-
-.str-chat__message-input {
-  @include utils.component-layer-overrides('message-input');
-
-  .str-chat__file-input-container,
-  .str-chat-angular__create-poll {
-    --str-chat-icon-color: var(--str-chat__message-input-tools-color);
-    @include utils.component-layer-overrides('message-input-tools');
-
-    svg path {
-      fill: var(--str-chat__message-input-tools-color);
-    }
-  }
-
-  .str-chat__attachment-preview-image-error {
-    svg path {
-      fill: var(--str-chat__primary-color);
-    }
-  }
-
-  .str-chat__message-textarea-container {
-    @include utils.component-layer-overrides('message-textarea');
-
-    .str-chat__message-textarea {
-      resize: none;
-      border: none;
-      color: var(--str-chat__message-textarea-color);
-      background-color: transparent;
-      box-shadow: none;
-      outline: none;
-      font: var(--str-chat__subtitle-text);
-    }
-  }
-
-  .str-chat__stop-ai-generation-button {
-    background-image: var(--str-chat__circle-stop-icon);
-    background-color: transparent;
-    border-width: 0;
-  }
-
-  .str-chat__send-button {
-    --str-chat-icon-color: var(--str-chat__message-send-color);
-    @include utils.component-layer-overrides('message-send');
-
-    svg path {
-      fill: var(--str-chat__message-send-color);
-    }
-
-    &:disabled {
-      --str-chat-icon-color: var(--str-chat__message-send-disabled-color);
-      background-color: transparent;
-
-      svg path {
-        fill: var(--str-chat__message-send-disabled-color);
-      }
-    }
-  }
-
-  .str-chat__start-recording-audio-button {
-    --str-chat-icon-color: var(--str-chat__start-recording-audio-button-color);
-    @include utils.component-layer-overrides('start-recording-audio-button');
-
-    &:disabled {
-      background-color: var(--str-chat__message-send-disabled-background-color);
-    }
-  }
-
-  .str-chat__message-input-cooldown {
-    @include utils.component-layer-overrides('cooldown');
-    font: var(--str-chat__subtitle-medium-text);
-  }
-
-  .str-chat__message-input-not-allowed {
-    color: var(--str-chat__message-input-not-allowed-color);
-    font: var(--str-chat__subtitle-text);
-  }
-
-  .str-chat__quoted-message-preview-header {
-    .str-chat__quoted-message-reply-to-message {
-      font: var(--str-chat__subtitle-medium-text);
-    }
-
-    .str-chat__quoted-message-remove {
-      background-color: transparent;
-      border: none;
-
-      svg path {
-        fill: var(--str-chat__message-input-tools-color);
-      }
-    }
-  }
-
-  .str-chat__recording-permission-denied-notification {
-    background-color: var(--str-chat__text-color);
-    border-radius: var(--str-chat__border-radius-md);
-    color: var(--str-chat__background-color);
-
-    .str-chat__recording-permission-denied-notification__heading,
-    .str-chat__recording-permission-denied-notification__dismiss-button {
-      font: var(--str-chat__subtitle2-medium-text);
-    }
-
-    .str-chat__recording-permission-denied-notification__message {
-      font: var(--str-chat__subtitle-text);
-    }
-
-    .str-chat__recording-permission-denied-notification__dismiss-button {
-      @include utils.button-reset;
-      color: var(--str-chat__background-color);
-      cursor: pointer;
-      text-transform: uppercase;
-    }
-  }
-}
-
-.str-chat__attachment-selector {
-  .str-chat__attachment-selector__menu-button {
-    .str-chat__attachment-selector__menu-button__icon {
-      background-color: var(--str-chat__attachment-selector-button-icon-color);
-      -webkit-mask: var(--str-chat__add-attachment-icon) no-repeat center / contain;
-      mask: var(--str-chat__add-attachment-icon) no-repeat center / contain;
-    }
-
-    &:hover {
-      .str-chat__attachment-selector__menu-button__icon {
-        background-color: var(--str-chat__attachment-selector-button-icon-color-hover);
-      }
-    }
-  }
-}
-
-.str-chat__attachment-selector-actions-menu {
-  .str-chat__attachment-selector-actions-menu__button {
-    color: var(--str-chat__text-low-emphasis-color);
-
-    .str-chat__dialog-menu__button-icon {
-      background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color);
-    }
-
-    &:hover,
-    &:focus {
-      color: var(--str-chat__text-color);
-
-      .str-chat__dialog-menu__button-icon {
-        background-color: var(
-          --str-chat__attachment-selector-actions-menu-button-icon-color-active
-        );
-      }
-    }
-  }
-
-  .str-chat__attachment-selector-actions-menu__upload-file-button {
-    .str-chat__dialog-menu__button-icon {
-      -webkit-mask: var(--str-chat__folder-icon) no-repeat center / contain;
-      mask: var(--str-chat__folder-icon) no-repeat center / contain;
-    }
-  }
-
-  .str-chat__attachment-selector-actions-menu__create-poll-button {
-    .str-chat__dialog-menu__button-icon {
-      -webkit-mask: var(--str-chat__poll-icon) no-repeat center / contain;
-      mask: var(--str-chat__poll-icon) no-repeat center / contain;
-    }
-  }
-
-  .str-chat__attachment-selector-actions-menu__add-location-button {
-    .str-chat__dialog-menu__button-icon {
-      -webkit-mask: var(--str-chat__location-icon) no-repeat center / contain;
-      mask: var(--str-chat__location-icon) no-repeat center / contain;
-    }
-  }
-}
-
-.str-chat__send-to-channel-checkbox__field {
-  * {
-    cursor: pointer;
-  }
-
-  label {
-    color: var(--str-chat__text-low-emphasis-color);
-    font: var(--str-chat__body-text);
-  }
-}

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

@@ -1,65 +0,0 @@
-@use '../utils';
-
-.str-chat__main-panel-inner {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  position: relative;
-  align-items: center;
-}
-
-.str-chat__list {
-  @include utils.scrollable;
-  overscroll-behavior: none;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-
-  .str-chat__message-list-scroll {
-    @include utils.message-list-spacing;
-
-    .str-chat__ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-  }
-
-  .str-chat__parent-message-li {
-    $spacing: var(--str-chat__spacing-4);
-    padding-block-end: $spacing;
-    margin-block-end: $spacing;
-
-    .str-chat__thread-start {
-      text-align: start;
-      padding-top: var(--str-chat__spacing-3);
-    }
-  }
-}
-
-.str-chat__jump-to-latest-message {
-  position: absolute;
-  inset-block-end: var(--str-chat__spacing-4);
-  inset-inline-end: var(--str-chat__spacing-2);
-  z-index: 2;
-
-  .str-chat__jump-to-latest-unread-count {
-    position: absolute;
-    padding: var(--str-chat__spacing-0_5) var(--str-chat__spacing-2);
-    left: 50%;
-    transform: translateX(-50%) translateY(-100%);
-  }
-}
-
-.str-chat__main-panel {
-  .str-chat__ul {
-    .str-chat__li:first-of-type {
-      padding-top: 4.5rem;
-    }
-
-    .str-chat__date-separator + .str-chat__li:first-of-type {
-      padding-top: inherit;
-    }
-  }
-}