stream-chat-react 6.7.0 → 6.9.0

package/dist/scss/ReactionList.scss

@@ -16,6 +16,17 @@
 .str-chat__message,
 .str-chat__message-commerce {
   .str-chat__reaction-list {
+    @extend %background-reaction-list;
+
+    position: absolute;
+    right: 15px;
+    top: -28px;
+    z-index: 1;
+    height: 33px;
+    width: initial;
+    background-position: 0 -66px;
+    background-repeat: repeat-x;
+
     ul {
       position: relative;
       list-style-type: none;
@@ -28,28 +39,15 @@
       z-index: 888;
     }
 
-    position: absolute;
-    right: 15px;
-    top: -28px;
-    z-index: 1;
-
-    @extend %background-reaction-list;
-
-    height: 33px;
-    width: initial;
-    background-position: 0 -66px;
-    background-repeat: repeat-x;
-
     .emoji-mart-emoji {
       display: flex;
     }
 
     &::after,
     &::before {
-      position: absolute;
-
       @extend %background-reaction-list;
 
+      position: absolute;
       content: '';
       top: 0;
       height: 33px;
@@ -68,14 +66,14 @@
     }
 
     &--reverse {
-      ul {
-        margin: -1px -4px 0 -16px;
-      }
-
       right: initial;
       left: 15px;
       position: absolute;
 
+      ul {
+        margin: -1px -4px 0 -16px;
+      }
+
       &::after {
         right: -13px;
         width: 13px;
@@ -111,6 +109,7 @@
         left: 46px;
       }
     }
+
     .str-chat__reaction-list {
       right: initial;
       left: 16px;
@@ -162,6 +161,7 @@
       right: 46px;
     }
   }
+
   &--right {
     .str-chat__message-commerce {
       &-inner {

package/dist/scss/ReactionSelector.scss

@@ -10,6 +10,7 @@
   margin: 0 var(--xxs-m);
   position: relative;
   line-height: 0;
+
   button {
     padding: 0;
   }
@@ -182,15 +183,18 @@
   .str-chat__reaction-selector {
     right: unset;
     left: 0;
+
     &--reverse {
       right: 0;
       left: unset;
     }
   }
+
   &--me {
     .str-chat__reaction-selector {
       left: unset;
       right: 0;
+
       &--reverse {
         right: unset;
         left: 0;

package/dist/scss/SimpleReactionsList.scss

@@ -38,7 +38,7 @@
   }
 
   &-item {
-    margin: 0 0;
+    margin: 0;
     cursor: pointer;
 
     > span {
@@ -65,6 +65,7 @@
   .str-chat__simple-reactions-list {
     border: 1px solid var(--white10);
     border-radius: var(--border-radius-sm);
+
     &-item {
       &--last-number {
         color: var(--white);

package/dist/scss/Thread.scss

@@ -138,9 +138,11 @@
         &.str-chat__thread--full {
           margin: 0;
         }
+
         .str-chat__gallery {
           justify-content: flex-end;
           border-radius: 0;
+
           &-image,
           &-placeholder {
             width: 100px;
@@ -148,26 +150,31 @@
           }
         }
       }
+
       &__thread-list {
         padding: var(--sm-p) var(--sm-p) 0 var(--sm-p);
 
         > .str-chat__list {
           background: transparent;
           padding: 0;
+
           .str-chat__list--thread {
             padding: 0;
           }
         }
       }
+
       &__thread-header {
         border: none;
         // box-shadow: none;
         background: var(--white);
         box-shadow: 0 2px 9px 0 var(--border), 0 1px 0 0 var(--border);
       }
+
       &__thread-start {
         margin-top: var(--md-m);
       }
+
       @media screen and (max-width: 960px) {
         &__thread {
           position: fixed;
@@ -182,18 +189,22 @@
         }
       }
     }
+
     &.dark {
       .str-chat__thread {
         background: var(--white5);
+
         &-header {
           background: var(--black80);
           box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
           color: var(--white);
         }
+
         &-start {
           color: var(--white);
         }
       }
+
       @media screen and (max-width: 960px) {
         .str-chat__thread {
           background: var(--dark-grey);
@@ -209,6 +220,7 @@
       &__thread {
         background: var(--white);
       }
+
       @media screen and (max-width: 960px) {
         &__thread {
           position: fixed;
@@ -222,10 +234,12 @@
           max-width: 100%;
         }
       }
+
       &__thread-header {
         height: 80px;
       }
     }
+
     &.dark {
       .str-chat__thread {
         background: var(--dt-bg-team);
@@ -238,21 +252,26 @@
 .str-chat {
   .str-chat__thread {
     background: transparent;
+
     &-header {
       background: var(--white30);
     }
   }
+
   .str-chat__list--thread {
     padding: 0 var(--xs-p);
   }
+
   &.dark {
     .str-chat__thread {
       background: var(--dark-grey);
+
       &-header {
         background: var(--white5);
         box-shadow: 0 1px 1px 0 var(--black30);
         color: var(--white);
       }
+
       &-start {
         background: var(--black5);
         border-radius: var(--border-radius-sm);

package/dist/scss/TypingIndicator.scss

@@ -2,18 +2,23 @@
   display: flex;
   visibility: hidden;
   align-items: center;
+
   &--typing {
     visibility: visible;
   }
+
   &__avatars {
     display: flex;
+
     .str-chat__avatar {
       margin-right: calc(var(--xs-m) * -1);
+
       &:last-of-type {
         margin-right: var(--xs-m);
       }
     }
   }
+
   &__dots {
     position: relative;
     background: var(--white);
@@ -21,6 +26,7 @@
     padding: var(--xxs-p) var(--xs-m);
     border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 2px;
   }
+
   &__dot {
     display: inline-block;
     width: 6px;
@@ -49,6 +55,7 @@
         border-color: var(--dark-grey);
       }
     }
+
     &__dots {
       background: var(--white5);
     }

package/dist/scss/VirtualMessage.scss

@@ -1,4 +1,7 @@
 .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: 1px var(--xl-p);
     width: 100%;
@@ -7,7 +10,7 @@
       padding-bottom: var(--sm-p);
 
       &.str-chat__virtual-message__wrapper--first {
-        padding-bottom: 0px;
+        padding-bottom: 0;
         padding-left: var(--xl-p);
 
         .str-chat__avatar,
@@ -37,7 +40,7 @@
 
       &.str-chat__virtual-message__wrapper--group {
         align-items: center;
-        padding-bottom: 0px;
+        padding-bottom: 0;
         padding-left: var(--xl-p);
 
         &.str-chat__message-simple--me {
@@ -118,8 +121,6 @@
     }
   }
 
-  // this resolves the issue with 1px tall messages (i.e. deleted messages)
-  font-size: 0;
   .str-chat__message.str-chat__message--deleted {
     align-items: initial;
     margin: 0;
@@ -145,11 +146,11 @@
     background: ghostwhite;
   }
 
-  & > .str-chat__avatar {
+  > .str-chat__avatar {
     margin: 0;
   }
 
-  & > .str-chat__virtual-message__content {
+  > .str-chat__virtual-message__content {
     padding-left: 12px;
   }
 
@@ -249,7 +250,7 @@
 .str-chat__virtual-message__wrapper--group {
   padding-top: 0;
 
-  & > .str-chat__avatar {
+  > .str-chat__avatar {
     display: none;
   }
 

package/dist/scss/_base.scss

@@ -50,18 +50,22 @@
   height: 100vh;
   font-family: var(--second-font);
   color: var(--black);
+
   &.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);
@@ -98,7 +102,7 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
   }
 }
 
-@-moz-document url-prefix() {
+@-moz-document url-prefix('') {
   .str-chat--windows-flags {
     .str-chat__textarea__textarea,
     .str-chat__message-text-inner *,
@@ -116,9 +120,11 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
 
 .str-chat-channel {
   max-height: 100vh;
+
   .str-chat__container {
     height: 100%;
     display: flex;
+
     .str-chat__main-panel {
       height: 100%;
       width: 100%;
@@ -128,16 +134,19 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
       flex: 1;
     }
   }
+
   &.messaging {
     .str-chat__main-panel {
-      padding: var(--sm-p) var(--xs-p) 0 0px;
+      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 {
@@ -145,15 +154,18 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
       }
     }
   }
+
   &.commerce {
     .str-chat {
       &__main-panel {
         width: 100%;
       }
+
       &__container {
         background: var(--white95);
       }
     }
+
     &.dark {
       .str-chat__container {
         background: var(--dark-grey);
@@ -168,15 +180,18 @@ $emoji-flag-unicode-range: U+1F1E6-1F1FF;
     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);
     }

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultUserType, UnknownType } from './types/types';
+import type { DefaultUserType } from './types/types';
 export declare const isOnlyEmojis: (text?: string | undefined) => boolean;
 export declare type MentionProps<Us extends DefaultUserType<Us> = DefaultUserType> = {
     mentioned_user: UserResponse<Us>;
@@ -13,5 +13,5 @@ export declare type RenderTextOptions = {
 export declare const renderText: <Us extends DefaultUserType<Us> = DefaultUserType<import("./types/types").DefaultUserTypeInternal>>(text?: string | undefined, mentioned_users?: UserResponse<Us>[] | undefined, options?: RenderTextOptions) => JSX.Element | null;
 export declare function escapeRegExp(text: string): string;
 export declare function generateRandomId(): string;
-export declare const smartRender: (ElementOrComponentOrLiteral: React.ComponentType, props?: UnknownType | undefined, fallback?: React.ComponentType<{}> | null | undefined) => JSX.Element;
+export declare const getWholeChar: (str: string, i: number) => string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AASjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAElE,eAAO,MAAM,YAAY,wCAOxB,CAAC;AA4HF,oBAAY,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,EAAE,CAAC,GAAG,eAAe,IAAI;IAC3E,cAAc,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC;CAClC,CAAC;AAMF,oBAAY,iBAAiB,GAAG;IAC9B,uBAAuB,CAAC,EAAE;QACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC;KACvC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,UAAU,6LAGZ,iBAAiB,uBA8D3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,UAExC;AAOD,wBAAgB,gBAAgB,WAG/B;AAED,eAAO,MAAM,WAAW,gCACO,MAAM,aAAa,wGA2BjD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AASjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,YAAY,wCAOxB,CAAC;AA4HF,oBAAY,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,EAAE,CAAC,GAAG,eAAe,IAAI;IAC3E,cAAc,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC;CAClC,CAAC;AAMF,oBAAY,iBAAiB,GAAG;IAC9B,uBAAuB,CAAC,EAAE;QACxB,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC;KACvC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,UAAU,6LAGZ,iBAAiB,uBA8D3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,UAExC;AAOD,wBAAgB,gBAAgB,WAG/B;AAGD,eAAO,MAAM,YAAY,QAAS,MAAM,KAAK,MAAM,WAgClD,CAAC"}

package/dist/utils.js

@@ -161,22 +161,29 @@ export function generateRandomId() {
     // prettier-ignore
     return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
 }
-export var smartRender = function (ElementOrComponentOrLiteral, props, fallback) {
-    if (ElementOrComponentOrLiteral === undefined && fallback) {
-        ElementOrComponentOrLiteral = fallback;
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt#getting_whole_characters
+export var getWholeChar = function (str, i) {
+    var code = str.charCodeAt(i);
+    if (Number.isNaN(code))
+        return '';
+    if (code < 0xd800 || code > 0xdfff)
+        return str.charAt(i);
+    if (0xd800 <= code && code <= 0xdbff) {
+        if (str.length <= i + 1) {
+            throw 'High surrogate without following low surrogate';
+        }
+        var next = str.charCodeAt(i + 1);
+        if (0xdc00 > next || next > 0xdfff) {
+            throw 'High surrogate without following low surrogate';
+        }
+        return str.charAt(i) + str.charAt(i + 1);
     }
-    if (React.isValidElement(ElementOrComponentOrLiteral)) {
-        // Flow cast through any, to make flow believe it's a React.Element
-        var element = ElementOrComponentOrLiteral;
-        return element;
+    if (i === 0) {
+        throw 'Low surrogate without preceding high surrogate';
     }
-    // Flow cast through any to remove React.Element after previous check
-    var ComponentOrLiteral = ElementOrComponentOrLiteral;
-    if (typeof ComponentOrLiteral === 'string' ||
-        typeof ComponentOrLiteral === 'number' ||
-        typeof ComponentOrLiteral === 'boolean' ||
-        ComponentOrLiteral == null) {
-        return ComponentOrLiteral;
+    var prev = str.charCodeAt(i - 1);
+    if (0xd800 > prev || prev > 0xdbff) {
+        throw 'Low surrogate without preceding high surrogate';
     }
-    return React.createElement(ComponentOrLiteral, __assign({}, props));
+    return '';
 };

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "6.7.0";
+export declare const version = "6.9.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '6.7.0';
+export var version = '6.9.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "6.7.0",
+  "version": "6.9.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -43,17 +43,19 @@
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.0",
-    "react-file-utils": "1.1.6",
+    "react-file-utils": "1.1.7",
     "react-images": "1.2.0-beta.7",
     "react-is": "^17.0.1",
     "react-markdown": "^5.0.3",
     "react-player": "^2.7.0",
     "react-textarea-autosize": "^8.3.0",
-    "react-virtuoso": "^1.10.8",
+    "react-virtuoso": "^2.2.0",
+    "stream-chat-css": "1.0.0",
     "textarea-caret": "^3.1.0",
     "uuid": "^8.3.1"
   },
   "optionalDependencies": {
+    "@sindresorhus/transliterate": "^1.4.0",
     "mml-react": "^0.4.0"
   },
   "peerDependencies": {
@@ -133,8 +135,6 @@
     "husky": "^4.3.0",
     "jest": "^26.6.3",
     "moment": "^2.29.1",
-    "node-sass": "^5.0.0",
-    "node-sass-import": "^2.0.1",
     "postcss": "^8.1.10",
     "postcss-loader": "^4.1.0",
     "prettier": "^2.2.0",
@@ -143,23 +143,15 @@
     "react-test-renderer": "^17.0.1",
     "rollup": "^2.33.3",
     "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-copy-glob": "^0.3.1",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-insert": "^1.3.1",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
-    "sass": "^1.29.0",
-    "sass-loader": "^10.1.0",
-    "stream-chat": "4.0.0",
+    "stream-chat": "4.2.0",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.8.0",
-    "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",
     "typescript": "4.3.5",
@@ -176,34 +168,23 @@
   "scripts": {
     "analyze": "yarn build -- --stats && webpack-bundle-analyzer build/bundle-stats.json",
     "build": "rm -rf dist && mkdir -p dist/assets assets && yarn --silent copy-version && yarn build-translations && yarn types && yarn bundle",
-    "build-styles": "sass src/styles/index.scss dist/css/index.css --style compressed",
     "bundle": "rollup -c",
     "bundle-size": "BUNDLE_SIZE=true yarn bundle",
     "build-translations": "rm -rf .tmpi18ncache || true && mkdir .tmpi18ncache && yarn run babel --config-file ./babel.i18next-extract.js --extensions '.ts','.tsx','.js','.jsx' 'src/**/*.{js,jsx,ts,tsx}' --out-dir '.tmpi18ncache/' && rm -rf .tmpi18ncache && prettier --write 'src/i18n/*.{js,jsx,ts,tsx,json}'",
     "copy-version": "echo '\u001b[34mℹ\u001b[0m Copying Version to \u001b[34msrc/version.ts\u001b[0m' && PACKAGE_VERSION=$(node -pe 'require(`./package.json`).version') && PACKAGE_STRING=\"'$PACKAGE_VERSION'\" && echo 'export const version = '$PACKAGE_STRING';' > src/version.ts && echo '\u001b[32m✓\u001b[0m Done Copying Version'",
     "coverage": "yarn test --collectCoverage && codecov",
     "eslint": "eslint '**/*.{js,md,ts,jsx,tsx}' --max-warnings 0",
-    "lint": "prettier --list-different 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js && eslint 'src/**/*.{js,ts,tsx,md}' --max-warnings 0 && yarn validate-translations && yarn stylelint",
-    "lint-fix": "prettier --write 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js && eslint --fix 'src/**/*.{js,ts,tsx,md}' --max-warnings 0 && yarn stylelint --fix",
+    "lint": "prettier --list-different 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js && eslint 'src/**/*.{js,ts,tsx,md}' --max-warnings 0 && yarn validate-translations",
+    "lint-fix": "prettier --write 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js && eslint --fix 'src/**/*.{js,ts,tsx,md}' --max-warnings 0",
     "prettier": "prettier --list-different '**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js",
     "prettier-fix": "prettier --write '**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js",
     "start": "tsc --watch",
-    "stylelint": "stylelint '**/*.{css,scss}'",
     "postversion": "git push && git push --tags && npm publish",
     "prepare": "yarn run build",
     "preversion": "yarn install && yarn lint && yarn test",
     "test": "jest",
     "types": "tsc --strict",
-    "validate-translations": "node scripts/validate-translations.js",
-    "watch-styles": "sass --watch src/styles/index.scss dist/css/index.css"
-  },
-  "stylelint": {
-    "extends": "stylelint-config-recommended-scss",
-    "rules": {
-      "no-descending-specificity": null,
-      "no-duplicate-selectors": null,
-      "block-no-empty": null
-    }
+    "validate-translations": "node scripts/validate-translations.js"
   },
   "resolutions": {
     "ast-types": "^0.14.0"