stream-chat-react 11.22.0 → 12.0.0-rc.2

package/dist/scss/VirtualMessage.scss

@@ -1,288 +0,0 @@
-.str-chat__virtual-list {
-  // this resolves the issue with 1px tall messages (i.e. deleted messages)
-  font-size: 0;
-
-  .str-chat__virtual-list-message-wrapper {
-    padding-left: var(--xl-p);
-    padding-right: var(--xl-p);
-    width: 100%;
-
-    .str-chat__message-simple {
-      &.str-chat__virtual-message__wrapper--first {
-        padding-bottom: 0;
-        padding-left: var(--xl-p);
-
-        .str-chat__avatar,
-        .str-chat__message-data.str-chat__message-simple-data {
-          display: none;
-        }
-
-        &.str-chat__message-simple--me {
-          padding-right: var(--xl-p);
-          padding-left: 0;
-
-          &.str-chat__virtual-message__wrapper--end {
-            padding-right: 0;
-          }
-        }
-
-        &.str-chat__virtual-message__wrapper--end {
-          padding-bottom: var(--xs-p);
-
-          .str-chat__message-data.str-chat__message-simple-data {
-            display: block;
-            position: relative;
-            width: 100%;
-          }
-        }
-      }
-
-      &.str-chat__virtual-message__wrapper--group {
-        align-items: center;
-        padding-left: var(--xl-p);
-
-        &.str-chat__message-simple--me {
-          padding-right: var(--xl-p);
-          padding-left: 0;
-
-          &.str-chat__virtual-message__wrapper--end {
-            padding-right: 0;
-          }
-        }
-
-        .str-chat__message-data.str-chat__message-simple-data {
-          display: block;
-          position: relative;
-          width: 100%;
-        }
-      }
-
-      &.str-chat__virtual-message__wrapper--end {
-        padding-bottom: var(--xs-p);
-        padding-left: 0;
-
-        .str-chat__avatar,
-        .str-chat__message-data.str-chat__message-simple-data {
-          display: block;
-        }
-      }
-
-      .quoted-message {
-        display: flex;
-        align-items: flex-end;
-        margin-bottom: var(--xxs-m);
-        cursor: pointer;
-
-        &-inner {
-          display: flex;
-          text-align: start;
-          align-items: flex-end;
-          background: var(--grey-whisper);
-          border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
-          max-width: 408px;
-          padding: var(--xxs-p) var(--xs-p);
-
-          .str-chat__message-attachment-card.str-chat__message-attachment-card--image {
-            border: none;
-            border-radius: var(--border-radius-md);
-          }
-
-          .str-chat__message-attachment {
-            &--image:first-of-type {
-              max-height: 48px;
-              max-width: 48px;
-              border-radius: var(--border-radius-md);
-            }
-
-            img {
-              border-radius: var(--border-radius-md);
-            }
-
-            &--file:first-of-type {
-              background: var(--white);
-              border-radius: var(--border-radius-md);
-              border-bottom: 1px solid var(--grey-whisper);
-              min-width: 33%;
-            }
-          }
-
-          :nth-child(2) {
-            margin-left: var(--xs-m);
-          }
-        }
-
-        &.mine {
-          .quoted-message-inner {
-            background: var(--white-snow);
-          }
-        }
-      }
-    }
-  }
-
-  .str-chat__message.str-chat__message--deleted {
-    align-items: initial;
-    margin: 0;
-  }
-
-  .str-chat__typing-indicator {
-    padding: 5px 40px; // important: div height should be big enough to fully contain the avatars
-  }
-}
-
-.giphy-preview-message {
-  background: var(--white-snow);
-  border-top: 2px solid var(--border);
-}
-
-.str-chat__virtual-message__wrapper {
-  display: flex;
-  padding: 10px 40px;
-  flex-direction: row;
-  position: relative;
-
-  &:hover {
-    background: ghostwhite;
-  }
-
-  > .str-chat__avatar {
-    margin: 0;
-  }
-
-  > .str-chat__virtual-message__content {
-    padding-left: 12px;
-  }
-
-  .str-chat__avatar--rounded {
-    border-radius: var(--border-radius);
-  }
-
-  .str-chat__avatar-fallback {
-    background-color: lightslategray;
-  }
-}
-
-.str-chat__virtual-message__meta {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.str-chat__virtual-message__data {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-  min-width: 70px;
-  margin-left: auto;
-}
-
-.str-chat__virtual-message__author {
-  color: var(--primary-color);
-  font-size: 1rem;
-}
-
-.str-chat__virtual-message__date {
-  font-size: 0.7rem;
-  opacity: 0.5;
-  padding-left: 8px;
-  display: block;
-  margin-left: auto;
-}
-
-.str-chat__virtual-message__actions {
-  position: relative;
-  cursor: pointer;
-
-  button {
-    border: none;
-    background: transparent;
-  }
-
-  svg {
-    fill: var(--black);
-    opacity: 0.5;
-  }
-
-  &:hover {
-    svg {
-      opacity: 1;
-    }
-  }
-
-  .str-chat__message-actions-box {
-    bottom: 10px;
-    left: unset;
-    right: 100%;
-    border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-      var(--border-radius);
-  }
-}
-
-.str-chat__virtual-message__content {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: flex-start;
-
-  .str-chat__message--deleted-inner {
-    padding: 8px 0;
-  }
-}
-
-.str-chat__virtual-message__text {
-  padding-top: 5px;
-  font-size: 0.9rem;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  word-break: break-word;
-
-  p {
-    padding-right: 16px;
-  }
-
-  a {
-    color: var(--primary-color);
-    text-decoration: none;
-    font-weight: var(--font-weight-bold);
-  }
-}
-
-.str-chat__virtual-message__wrapper--group {
-  > .str-chat__avatar {
-    display: none;
-  }
-
-  .str-chat__virtual-message__author {
-    display: none;
-  }
-
-  .str-chat__virtual-message__content {
-    padding-left: 50px;
-
-    .str-chat__gallery {
-      width: 100%;
-      margin: 0;
-      justify-content: unset;
-    }
-  }
-}
-
-.dark {
-  .str-chat__virtual-message__wrapper {
-    &:hover {
-      background: var(--black20);
-    }
-  }
-
-  .str-chat__virtual-message__text {
-    color: ghostwhite;
-  }
-
-  .str-chat__virtual-message__date {
-    color: var(--white);
-  }
-}

package/dist/scss/_base.scss

@@ -1,219 +0,0 @@
-.str-chat {
-  box-sizing: border-box;
-
-  *,
-  *::after,
-  *::before {
-    box-sizing: inherit;
-    font-family: var(--second-font);
-  }
-
-  // Overriding styles of ngx-popperjs
-  .ngxp__container {
-    z-index: 1;
-    margin: 0 !important;
-    padding: 0 !important;
-    box-shadow: none !important;
-    border: none !important;
-
-    .ngxp__arrow {
-      display: none !important;
-    }
-  }
-
-  // Quick fix for: https://github.com/tonysamperi/ngx-popperjs/issues/52
-  &.google-chrome {
-    popper-content {
-      .ngxp__container {
-        display: block !important;
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        opacity: 0;
-
-        &[aria-hidden='true'] {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-
-  // New features are not implemented in theme-v1, corresponding HTML code is hidden
-  .str-chat__unread-messages-notification,
-  .str-chat__unread-messages-separator-wrapper,
-  .str-chat__message-bounce-prompt {
-    display: none;
-  }
-}
-
-.clearfix {
-  clear: both;
-}
-
-.messenger-chat {
-  &.str-chat {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    font-family: var(--second-font);
-    height: 100vh;
-    margin: 0;
-    flex: 1 0 100%;
-
-    .str-chat {
-      &__container {
-        flex: 1;
-        height: 100%;
-        display: flex;
-        flex-direction: row;
-      }
-
-      &__main-panel {
-        width: 100%;
-        min-width: 250px;
-        flex: 1;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        padding: var(--sm-p) var(--sm-p) 0 var(--xs-p);
-      }
-    }
-  }
-}
-
-.str-chat {
-  height: 100vh;
-  font-family: var(--second-font);
-  color: var(--black);
-
-  &.dark {
-    color: var(--white);
-  }
-
-  &.messaging,
-  &.commerce {
-    background-color: var(--grey-gainsboro);
-
-    &.dark {
-      background-color: var(--dark-grey);
-    }
-  }
-
-  &.team {
-    &.dark {
-      background: var(--dark-grey);
-    }
-  }
-
-  &.livestream {
-    &.dark {
-      background: var(--dark-grey);
-    }
-  }
-}
-
-.str-chat-channel-list {
-  float: left;
-}
-
-.str-chat-channel {
-  max-height: 100vh;
-
-  .str-chat__container {
-    height: 100%;
-    display: flex;
-
-    .str-chat__main-panel,
-    .str-chat-angular__main-panel-inner {
-      height: 100%;
-      width: 100%;
-      min-width: 250px;
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-
-      &--hideOnThread {
-        display: none;
-      }
-    }
-
-    .rfu-dropzone {
-      width: 100%;
-    }
-  }
-
-  &.messaging {
-    .str-chat__main-panel {
-      padding: var(--sm-p) var(--xs-p) 0 0;
-    }
-
-    @media screen and (max-width: 960px) {
-      .str-chat__main-panel {
-        padding: var(--xxs-p) var(--xxs-p) 0;
-      }
-    }
-  }
-
-  &.team {
-    .str-chat {
-      &__container {
-        display: flex;
-      }
-    }
-  }
-
-  &.commerce {
-    .str-chat {
-      &__main-panel {
-        width: 100%;
-      }
-
-      &__container {
-        background: var(--white95);
-      }
-    }
-
-    &.dark {
-      .str-chat__container {
-        background: var(--dark-grey);
-        box-shadow: 0 10px 31px 0 var(--black50);
-      }
-    }
-  }
-}
-
-.str-chat.dark {
-  .emoji-mart {
-    background: var(--dark-grey);
-    border: var(--dark-grey);
-  }
-
-  .emoji-mart-category-label span {
-    background: var(--dark-grey);
-    color: var(--white);
-  }
-
-  .emoji-mart-search {
-    input {
-      background: var(--dark-grey);
-      color: var(--white);
-    }
-
-    button svg {
-      fill: var(--white);
-    }
-  }
-}
-
-// Only in theme-v2
-.str-chat__empty-channel {
-  display: none;
-}
-
-// Fixes icon sizing problem in Angular SDK
-stream-icon,
-stream-icon-placeholder {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

package/dist/scss/_variables.scss

@@ -1,161 +0,0 @@
-/* fonts */
-/* https://systemfontstack.com/ */
-$system-stack-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
-  Cantarell, 'Helvetica Neue', sans-serif;
-$main-font: #{$system-stack-font};
-$second-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-$base-font-weight: 400;
-$heavy-font-weight: 700;
-
-/* colors */
-$primary-color: #ff00ff;
-$secondary-color: #006cff;
-
-$dt-bg-team: #1d1f22;
-
-$border-color: #00000014;
-
-$black: #000000;
-$white: #ffffff;
-$grey: #7a7a7a;
-$darken-grey: #343434;
-$lighten-black: #808080;
-$lighten-grey: #858585;
-
-/* miscellaneous */
-$assetsPath: '../assets' !default;
-$border-radius: 16px;
-
-:root {
-  /* fonts */
-  --main-font: #{$main-font};
-  --second-font: #{$second-font};
-
-  /* font size */
-
-  --xs-font: 10px;
-  --sm-font: 12px;
-  --md-font: 14px;
-  --lg-font: 16px;
-  --xl-font: 22px;
-  --xxl-font: 26px;
-  --xxxl-font: 32px;
-
-  /* fonts weight */
-  --font-weight-regular: #{$base-font-weight}; //400
-  --font-weight-semi-bold: 600;
-  --font-weight-bold: #{$heavy-font-weight}; //700
-
-  /* colors */
-  --primary-color: #{$secondary-color}; // this reassignment is to maintain backwards compatibility with the old scss variables
-  --primary-color-faded: #006cff5c;
-
-  --magenta: #{$primary-color};
-  --red: #ff0000;
-  --faded-red: #d0021b1a;
-  --blue: #026afa;
-  --faded-blue: #cfe3ff;
-
-  --dt-bg-team: #{$dt-bg-team};
-
-  --border-color: #{$border-color};
-
-  --lighten-black: #{$lighten-black};
-
-  --lighten-grey: #{$lighten-grey};
-
-  --light-grey: #ebebeb;
-  --grey: #{$grey};
-  --dark-grey: #{$darken-grey};
-
-  --green: #28ca42;
-  --faded-green: #02d0021a;
-
-  //-------------------------------White
-  --white: #{$white};
-  --white5: #ffffff0d;
-  --white10: #ffffff1a;
-  --white20: #ffffff33;
-  --white30: #ffffff4d;
-  --white40: #ffffff66;
-  --white50: #ffffff80;
-  --white60: #ffffff99;
-  --white70: #ffffffb3;
-  --white80: #ffffffcc;
-  --white90: #ffffffe6;
-  --white95: #fffffff2;
-
-  //-------------------------------Black
-  --black: #{$black};
-  --black5: #0000000d;
-  --black10: #0000001a;
-  --black20: #00000033;
-  --black30: #0000004d;
-  --black40: #00000066;
-  --black50: #00000080;
-  --black60: #00000099;
-  --black70: #000000b3;
-  --black80: #000000cc;
-  --black90: #000000e6;
-  --black95: #000000f2;
-
-  /* border-radius */
-  --border-radius: #{$border-radius};
-  --border-radius-sm: calc(var(--border-radius) / 4);
-  --border-radius-md: calc(var(--border-radius) / 2);
-  --border-radius-round: 999px;
-
-  --spacing-unit: 8px; // .5rem
-
-  /* padding */
-  --xxs-p: calc(var(--spacing-unit) / 2); // 4px
-  --xs-p: var(--spacing-unit); // 8px
-  --sm-p: calc(var(--spacing-unit) * 2); // 16px Base
-  --md-p: calc(var(--spacing-unit) * 3); // 24px
-  --lg-p: calc(var(--spacing-unit) * 4); // 32px
-  --xl-p: calc(var(--spacing-unit) * 5); // 40px
-  --xxl-p: calc(var(--spacing-unit) * 8); // 64px
-
-  /* margin */
-  --xxs-m: calc(var(--spacing-unit) / 2); // 4px
-  --xs-m: var(--spacing-unit); // 8px
-  --sm-m: calc(var(--spacing-unit) * 2); // 16px Base
-  --md-m: calc(var(--spacing-unit) * 3); // 24px
-  --lg-m: calc(var(--spacing-unit) * 4); // 32px
-  --xl-m: calc(var(--spacing-unit) * 5); // 40px
-  --xxl-m: calc(var(--spacing-unit) * 8); // 64px
-
-  /* miscellaneous */
-  --assetsPath: '#{$assetsPath}';
-
-  /* accent colors */
-  --accent_blue: #005fff;
-  --accent_green: #20e070;
-  --accent_red: #ff3742;
-
-  /* base colors */
-
-  --bg-gradient-end: #f7f7f7;
-  --bg-gradient-start: #fcfcfc;
-  --blue-alice: #e9f2ff;
-  --border: #00000014; // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
-  --button-background: #ffffff;
-  --button-text: #005fff;
-  --secondary-button-text: var(--grey);
-  --grey-gainsboro: #dbdbdb;
-  --grey-whisper: #ecebeb;
-  --highlight: #fbf4dd;
-  --modal-shadow: #00000099; // 99 = 60% opacity; x=0, y= 1, radius=4
-  --overlay: #00000033; // 33 = 20% opacity
-  --overlay-dark: #00000099; // 99 = 60% opacity
-  --shadow-icon: #00000040; // 40 = 25% opacity; x=0, y=0, radius=4
-  --targetedMessageBackground: #fbf4dd; // dark mode = #302D22
-  --transparent: transparent;
-  --white-smoke: #f2f2f2;
-  --white-snow: #fcfcfc;
-  --unread-badge-color: #ffffff;
-
-  --modal-overlay-color: rgba(0, 0, 0, 0.89);
-  --modal-edit-message-form-width: 47em;
-}

package/dist/scss/index.scss

@@ -1,50 +0,0 @@
-// Setup
-@import './_variables.scss';
-@import './base.scss';
-
-// External dependencies (copied from libraries to rectify built file path discrepancies)
-@import '../vendor/mml-react.scss'; // copy from '../../node_modules/mml-react/dist/styles/index.css'
-@import '../vendor/react-file-utils.scss'; // copy from '../../node_modules/react-file-utils/dist/index.css'
-@import '../vendor/react-image-gallery.scss'; // copy from '../../node_modules/react-image-gallery/styles/css/image-gallery.css'
-
-// Components
-@import './ActionsBox.scss';
-@import './AttachmentActions.scss';
-@import './Attachment.scss';
-@import './Avatar.scss';
-@import './Audio.scss';
-@import './Card.scss';
-@import './ChannelHeader.scss';
-@import './ChannelList.scss';
-@import './ChannelListMessenger.scss';
-@import './ChannelPreview.scss';
-@import './ChannelSearch.scss';
-@import './ChatDown.scss';
-@import './EventComponent.scss';
-@import './DateSeparator.scss';
-@import './EditMessageForm.scss';
-@import './Gallery.scss';
-@import './ImageCarousel.scss';
-@import './LoadingChannels.scss';
-@import './LoadingIndicator.scss';
-@import './LoadMoreButton.scss';
-@import './Message.scss';
-@import './MessageActions.scss';
-@import './MessageCommerce.scss';
-@import './MessageInput.scss';
-@import './MessageInputFlat.scss';
-@import './MessageNotification.scss';
-@import './MessageList.scss';
-@import './MessageTeam.scss';
-@import './MessageLivestream.scss';
-@import './MessageRepliesCountButton.scss';
-@import './Modal.scss';
-@import './ReactionList.scss';
-@import './ReactionSelector.scss';
-@import './SendButton.scss';
-@import './SimpleReactionsList.scss';
-@import './SmallMessageInput.scss';
-@import './Thread.scss';
-@import './TypingIndicator.scss';
-@import './Tooltip.scss';
-@import './VirtualMessage.scss';

package/dist/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}