stream-chat-react 6.12.0 → 7.0.0

package/dist/scss/vendor/react-image-gallery.scss

@@ -0,0 +1,224 @@
+$ig-small-screen: 768px !default;
+$ig-xsmall-screen: 480px !default;
+$ig-white: #fff !default;
+$ig-black: #000 !default;
+$ig-blue: #337ab7 !default;
+$ig-background-black: rgba(0, 0, 0, 0.4) !default;
+$ig-transparent: rgba(0, 0, 0, 0) !default;
+$ig-shadow: 0 2px 2px lighten($ig-black, 10%);
+
+@mixin vendor-prefix($name, $value) {
+  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
+    #{$vendor}#{$name}: #{$value};
+  }
+}
+
+// SVG ICON STYLES
+.image-gallery-icon {
+  color: $ig-white;
+  transition: all 0.3s ease-out;
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  outline: none;
+  position: absolute;
+  z-index: 4;
+  filter: drop-shadow($ig-shadow);
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      color: $ig-blue;
+      .image-gallery-svg {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  &:focus {
+    // a11y support
+    outline: 2px solid $ig-blue;
+  }
+}
+
+.image-gallery-using-mouse {
+  .image-gallery-icon {
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.image-gallery-fullscreen-button {
+  bottom: 0;
+  padding: 20px;
+
+  .image-gallery-svg {
+    height: 28px;
+    width: 28px;
+  }
+
+  @media (max-width: $ig-small-screen) {
+    padding: 15px;
+
+    .image-gallery-svg {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  @media (max-width: $ig-xsmall-screen) {
+    padding: 10px;
+
+    .image-gallery-svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
+}
+
+.image-gallery-fullscreen-button {
+  right: 0;
+}
+
+.image-gallery-left-nav,
+.image-gallery-right-nav {
+  padding: 50px 10px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  .image-gallery-svg {
+    height: 120px;
+    width: 60px;
+  }
+
+  @media (max-width: $ig-small-screen) {
+    .image-gallery-svg {
+      height: 72px;
+      width: 36px;
+    }
+  }
+
+  @media (max-width: $ig-xsmall-screen) {
+    .image-gallery-svg {
+      height: 48px;
+      width: 24px;
+    }
+  }
+
+  &[disabled] {
+    cursor: disabled;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.image-gallery-left-nav {
+  left: 0;
+}
+
+.image-gallery-right-nav {
+  right: 0;
+}
+// End of Icon styles
+
+.image-gallery {
+  @include vendor-prefix('user-select', none);
+  -webkit-tap-highlight-color: $ig-transparent;
+  position: relative;
+
+  &.fullscreen-modal {
+    background: $ig-black;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 5;
+
+    .image-gallery-content {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+.image-gallery-content {
+  position: relative;
+  line-height: 0;
+  top: 0;
+
+  &.fullscreen {
+    background: $ig-black;
+  }
+
+  .image-gallery-slide .image-gallery-image {
+    max-height: calc(100vh - 80px); // 80 px for the thumbnail space
+  }
+
+  &.left,
+  &.right {
+    .image-gallery-slide .image-gallery-image {
+      max-height: 100vh;
+    }
+  }
+}
+
+.image-gallery-slide-wrapper {
+  position: relative;
+
+  &.left,
+  &.right {
+    display: inline-block;
+    width: calc(100% - 110px); // 100px + 10px for margin
+
+    @media (max-width: $ig-small-screen) {
+      width: calc(100% - 87px); // 81px + 6px for margin
+    }
+  }
+  &.image-gallery-rtl {
+    direction: rtl;
+  }
+}
+
+.image-gallery-slides {
+  line-height: 0;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.image-gallery-slide {
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+
+  &.center {
+    position: relative;
+  }
+
+  .image-gallery-image {
+    width: 100%;
+    object-fit: contain;
+  }
+}
+
+.image-gallery-index {
+  background: $ig-background-black;
+  color: $ig-white;
+  line-height: 1;
+  padding: 10px 20px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 4;
+
+  @media (max-width: $ig-small-screen) {
+    font-size: 0.8em;
+    padding: 5px 10px;
+  }
+}

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,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,YAAY,wCAOxB,CAAC;AAoBF,eAAO,MAAM,kBAAkB,YAAa,MAAM,sBAajD,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,MAAM,qBAIhD,CAAC;AAOF,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAA;CAwBtE,CAAC;AAEF,eAAO,MAAM,mBAAmB,gDAe/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,4LAiClC,CAAC;AAEF,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"}
+{"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;AAoBF,eAAO,MAAM,kBAAkB,YAAa,MAAM,sBAajD,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,MAAM,qBAIhD,CAAC;AAyBF,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,WAAW,CAAA;CAwBtE,CAAC;AAEF,eAAO,MAAM,mBAAmB,gDAe/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,4LAiClC,CAAC;AAEF,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,uBAiE3B,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

@@ -58,6 +58,23 @@ export var messageCodeBlocks = function (message) {
     var matches = message.match(codeRegex);
     return matches || [];
 };
+var detectHttp = /(http(s?):\/\/)?(www\.)?/;
+function formatUrlForDisplay(url) {
+    try {
+        return decodeURIComponent(url).replace(detectHttp, '');
+    }
+    catch (e) {
+        return url;
+    }
+}
+function encodeDecode(url) {
+    try {
+        return encodeURI(decodeURIComponent(url));
+    }
+    catch (error) {
+        return url;
+    }
+}
 export var markDownRenderers = {
     // eslint-disable-next-line react/display-name
     link: function (props) {
@@ -122,7 +139,6 @@ export var renderText = function (text, mentioned_users, options) {
     var newText = text;
     var markdownLinks = matchMarkdownLinks(newText);
     var codeBlocks = messageCodeBlocks(newText);
-    var detectHttp = /(http(s?):\/\/)?(www\.)?/;
     // extract all valid links/emails within text and replace it with proper markup
     uniqBy(linkify.find(newText), 'value').forEach(function (_a) {
         var href = _a.href, type = _a.type, value = _a.value;
@@ -138,8 +154,13 @@ export var renderText = function (text, mentioned_users, options) {
             });
         if (noParsingNeeded.length > 0 || linkIsInBlock)
             return;
-        var displayLink = type === 'email' ? value : value.replace(detectHttp, '');
-        newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), "[" + displayLink + "](" + encodeURI(decodeURI(href)) + ")");
+        try {
+            var displayLink = type === 'email' ? value : formatUrlForDisplay(href);
+            newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), "[" + displayLink + "](" + encodeDecode(href) + ")");
+        }
+        catch (e) {
+            void e;
+        }
     });
     var plugins = [emojiMarkdownPlugin];
     if (mentioned_users === null || mentioned_users === void 0 ? void 0 : mentioned_users.length) {

package/dist/version.d.ts

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

package/dist/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/dist/version.js

@@ -1 +1 @@
-export var version = '6.12.0';
+export var version = '7.0.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "6.12.0",
+  "version": "7.0.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -28,6 +28,7 @@
   ],
   "dependencies": {
     "@braintree/sanitize-url": "5.0.0",
+    "@stream-io/stream-chat-css": "^2.2.1",
     "custom-event": "^1.0.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
@@ -43,25 +44,24 @@
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.0",
-    "react-file-utils": "1.1.8",
-    "react-images": "1.2.0-beta.7",
+    "react-file-utils": "1.1.9",
+    "react-image-gallery": "^1.2.7",
     "react-is": "^17.0.1",
     "react-markdown": "^5.0.3",
     "react-player": "^2.7.0",
     "react-textarea-autosize": "^8.3.0",
-    "react-virtuoso": "2.2.6",
-    "stream-chat-css": "^1.0.21",
+    "react-virtuoso": "^2.3.1",
     "textarea-caret": "^3.1.0",
     "uuid": "^8.3.1"
   },
   "optionalDependencies": {
-    "@sindresorhus/transliterate": "^1.4.0",
+    "@stream-io/transliterate": "^1.5.5",
     "mml-react": "^0.4.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^16.8.0",
     "react-dom": "^17.0.0 || ^16.8.0",
-    "stream-chat": "^3.8.0"
+    "stream-chat": "^5.0.0"
   },
   "files": [
     "dist",
@@ -69,6 +69,7 @@
     "README.md"
   ],
   "devDependencies": {
+    "@axe-core/react": "^4.3.2",
     "@babel/cli": "^7.12.8",
     "@babel/core": "^7.12.9",
     "@babel/node": "^7.12.6",
@@ -96,6 +97,7 @@
     "@types/lodash.uniqby": "^4.7.6",
     "@types/moment": "^2.13.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-image-gallery": "^1.0.5",
     "@types/react-is": "^17.0.0",
     "@types/textarea-caret": "3.0.0",
     "@types/uuid": "^8.3.0",
@@ -135,6 +137,7 @@
     "htmlparser2": "^5.0.1",
     "husky": "^4.3.0",
     "jest": "^26.6.3",
+    "jest-axe": "^5.0.1",
     "moment": "^2.29.1",
     "postcss": "^8.1.10",
     "postcss-loader": "^4.1.0",
@@ -151,8 +154,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
+    "semantic-release": "^18.0.0",
     "semantic-release-cli": "^5.4.4",
-    "stream-chat": "4.2.0",
+    "stream-chat": "^5.0.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",
@@ -160,8 +164,7 @@
     "url-loader": "^4.1.1",
     "webpack": "4.44.2",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "~3.11.0",
-    "semantic-release": "^18.0.0"
+    "webpack-dev-server": "~3.11.0"
   },
   "husky": {
     "hooks": {
@@ -182,7 +185,6 @@
     "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",
-    "postversion": "git push && git push --tags && npm publish",
     "prepare": "yarn run build",
     "preversion": "yarn install",
     "test": "jest",

package/dist/components/Gallery/ModalImage.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare type ModalImageProps = {
-    /** The src attribute for the image element */
-    data: {
-        source: string;
-    };
-};
-export declare const ModalImage: React.FC<ModalImageProps>;
-//# sourceMappingURL=ModalImage.d.ts.map

package/dist/components/Gallery/ModalImage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalImage.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/ModalImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,oBAAY,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAOhD,CAAC"}

package/dist/components/Gallery/ModalImage.js

@@ -1,6 +0,0 @@
-import React from 'react';
-export var ModalImage = function (props) {
-    var data = props.data;
-    return (React.createElement("div", { className: 'str-chat__modal-image__wrapper', "data-testid": 'modal-image' },
-        React.createElement("img", { className: 'str-chat__modal-image__image', src: data.source })));
-};

package/dist/scss/ModalImage.scss

@@ -1,11 +0,0 @@
-.str-chat__modal-image__wrapper {
-  line-height: 0;
-  position: relative;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.str-chat__modal-image__image {
-  max-height: 100vh;
-  max-width: 100%;
-}