stream-chat-react 11.16.1 → 11.18.0

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

@@ -47,6 +47,7 @@
     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);
@@ -133,6 +134,7 @@
   }
 
   .str-chat__send-button {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 32);
     @include utils.flex-row-center;
     cursor: pointer;
     padding: 0;
@@ -208,7 +210,8 @@
   flex-grow: initial;
 }
 
-[dir='rtl'] .str-chat__send-button, [dir='rtl'] .str-chat__start-recording-audio-button {
+[dir='rtl'] .str-chat__send-button,
+[dir='rtl'] .str-chat__start-recording-audio-button {
   svg {
     transform: scale(-1, 1);
   }

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

@@ -181,6 +181,7 @@
   }
 
   .str-chat__file-input-container {
+    --str-chat-icon-color: var(--str-chat__message-input-tools-color);
     @include utils.component-layer-overrides('message-input-tools');
 
     svg path {
@@ -209,6 +210,7 @@
   }
 
   .str-chat__send-button {
+    --str-chat-icon-color: var(--str-chat__message-send-color);
     @include utils.component-layer-overrides('message-send');
 
     svg path {
@@ -216,6 +218,7 @@
     }
 
     &:disabled {
+      --str-chat-icon-color: var(--str-chat__message-send-disabled-color);
       background-color: transparent;
 
       svg path {

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

@@ -91,6 +91,8 @@
 }
 
 .str-chat__jump-to-latest-message {
+  --str-chat-icon-color: var(--str-chat__jump-to-latest-message-unread-count-background-color);
+
   .str-chat__circle-fab {
     @include utils.component-layer-overrides('jump-to-latest-message');
     @include utils.circle-fab-overrides('jump-to-latest-message');

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

@@ -18,6 +18,7 @@
   }
 
   .str-chat__modal__close-button {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 28);
     @include utils.flex-row-center;
     padding: var(--str-chat__spacing-2);
     position: absolute;

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

@@ -47,8 +47,14 @@
   }
 
   .str-chat__modal__close-button {
+    --str-chat-icon-color: var(--str-chat__modal-close-icon-color);
     @include utils.button-reset;
 
+    .str-chat__icon {
+      background-color: var(--str-chat__modal-close-icon-background);
+      border-radius: 999px;
+    }
+
     svg {
       path {
         fill: var(--str-chat__modal-close-icon-color);

package/dist/scss/v2/_base.scss

@@ -1,13 +1,14 @@
 .str-chat {
   box-sizing: border-box;
+  font-family: var(--str-chat__font-family);
 
   * {
-    font-family: var(--str-chat__font-family);
     box-sizing: border-box;
   }
 
   // Overriding styles of ngx-popperjs/ngx-float-ui
-  .ngxp__container, .float-ui-container {
+  .ngxp__container,
+  .float-ui-container {
     z-index: 1;
     padding: 0 !important;
     box-shadow: none !important;

package/dist/scss/v2/_icons.scss

@@ -1,3 +1,23 @@
 .str-chat {
-  --str-chat__image-fallback-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4=");
-}
+  --str-chat__image-fallback-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4=');
+}
+
+@font-face {
+  font-family: 'stream-chat-icons';
+  src: url('../assets/icons/stream-chat-icons.eot');
+  src: url('../assets/icons/stream-chat-icons.eot#iefix') format('embedded-opentype'),
+    url('../assets/icons/stream-chat-icons.woff') format('woff2'),
+    url('../assets/icons/stream-chat-icons.woff') format('woff'),
+    url('../assets/icons/stream-chat-icons.ttf') format('truetype'),
+    url('../assets/icons/stream-chat-icons.svg#stream-chat-icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  @font-face {
+    font-family: 'stream-chat-icons';
+    src: url('../assets/icons/stream-chat-icons.svg#stream-chat-icons') format('svg');
+  }
+}

package/dist/scss/v2/index.layout.scss

@@ -17,6 +17,7 @@
 @use 'common/CircleFAButton/CircleFAButton-layout';
 @use 'EditMessageForm/EditMessageForm-layout';
 @use 'ImageCarousel/ImageCarousel-layout';
+@use 'Icon/Icon-layout';
 @use 'LinkPreview/LinkPreview-layout';
 @use 'LoadingIndicator/LoadingIndicator-layout';
 @use 'Message/Message-layout';

package/dist/scss/v2/index.scss

@@ -18,6 +18,7 @@
 @use 'ChannelPreview/ChannelPreview-theme';
 @use 'ChannelSearch/ChannelSearch-theme';
 @use 'EditMessageForm/EditMessageForm-theme';
+@use 'Icon/Icon-theme';
 @use 'ImageCarousel/ImageCarousel-theme';
 @use 'LinkPreview/LinkPreview-theme';
 @use 'LoadingIndicator/LoadingIndicator-theme';

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.16.1';
+export var version = '11.18.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.16.1",
+  "version": "11.18.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -148,7 +148,7 @@
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
-    "@stream-io/stream-chat-css": "^4.14.0",
+    "@stream-io/stream-chat-css": "^4.16.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",

package/dist/components/MessageInput/AttachmentPreviewList.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types';
-export declare const AttachmentPreviewList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;
-type PreviewItemProps = {
-    id: string;
-};
-export declare const ImagePreviewItem: ({ id }: PreviewItemProps) => React.JSX.Element | null;
-export {};
-//# sourceMappingURL=AttachmentPreviewList.d.ts.map

package/dist/components/MessageInput/AttachmentPreviewList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AttachmentPreviewList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/AttachmentPreviewList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAgBrD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7D,eAAO,MAAM,qBAAqB,2GAmDjC,CAAC;AA2GF,KAAK,gBAAgB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvC,eAAO,MAAM,gBAAgB,WAAY,gBAAgB,6BA+DxD,CAAC"}

package/dist/components/MessageInput/AttachmentPreviewList.js

@@ -1,112 +0,0 @@
-import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
-import { CloseIcon, DownloadIcon, LoadingIndicatorIcon, RetryIcon } from './icons';
-import { isAudioAttachment, isMediaAttachment, isVoiceRecordingAttachment, PlayButton, } from '../Attachment';
-import { BaseImage as DefaultBaseImage } from '../Gallery';
-import { useAudioController } from '../Attachment/hooks/useAudioController';
-import { RecordingTimer } from '../MediaRecorder';
-import { FileIcon } from '../ReactFileUtilities';
-import { useComponentContext, useMessageInputContext } from '../../context';
-export var AttachmentPreviewList = function () {
-    var _a = useMessageInputContext('AttachmentPreviewList'), attachments = _a.attachments, fileOrder = _a.fileOrder, imageOrder = _a.imageOrder, removeAttachment = _a.removeAttachment, uploadAttachment = _a.uploadAttachment;
-    return (React.createElement("div", { className: 'str-chat__attachment-preview-list' },
-        React.createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' },
-            attachments.map(function (attachment) {
-                var _a, _b;
-                if (isVoiceRecordingAttachment(attachment)) {
-                    return (React.createElement(VoiceRecordingPreview, { attachment: attachment, handleRetry: uploadAttachment, key: ((_a = attachment.$internal) === null || _a === void 0 ? void 0 : _a.id) || attachment.asset_url, mimeType: attachment.mime_type, removeAttachment: removeAttachment }));
-                }
-                else if (isAudioAttachment(attachment) || isMediaAttachment(attachment)) {
-                    // unnecessary to pass handleRetry as video and audio if among attachments is already uploaded
-                    // - user looking at the edit message input
-                    return (React.createElement(FilePreview, { attachment: attachment, handleRetry: uploadAttachment, key: ((_b = attachment.$internal) === null || _b === void 0 ? void 0 : _b.id) || attachment.asset_url, removeAttachment: removeAttachment }));
-                }
-                return null;
-            }),
-            imageOrder.map(function (id) { return (React.createElement(ImagePreviewItem, { id: id, key: id })); }),
-            fileOrder.map(function (id) { return (React.createElement(FilePreviewItem, { id: id, key: id })); }))));
-};
-var VoiceRecordingPreview = function (_a) {
-    var _b, _c, _d;
-    var attachment = _a.attachment, handleRetry = _a.handleRetry, mimeType = _a.mimeType, removeAttachment = _a.removeAttachment;
-    var _e = useAudioController({ mimeType: mimeType }), audioRef = _e.audioRef, isPlaying = _e.isPlaying, secondsElapsed = _e.secondsElapsed, togglePlay = _e.togglePlay;
-    return (React.createElement("div", { className: 'str-chat__attachment-preview-voice-recording', "data-testid": 'attachment-preview-voice-recording' },
-        React.createElement("audio", { ref: audioRef },
-            React.createElement("source", { "data-testid": 'audio-source', src: attachment.asset_url, type: attachment.mime_type })),
-        React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay }),
-        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: ((_b = attachment.$internal) === null || _b === void 0 ? void 0 : _b.uploadState) === 'uploading', onClick: function () { var _a; return ((_a = attachment.$internal) === null || _a === void 0 ? void 0 : _a.id) && removeAttachment(attachment.$internal.id); } },
-            React.createElement(CloseIcon, null)),
-        ((_c = attachment.$internal) === null || _c === void 0 ? void 0 : _c.uploadState) === 'failed' && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: function () { return handleRetry(attachment); } },
-            React.createElement(RetryIcon, null))),
-        React.createElement("div", { className: 'str-chat__attachment-preview-metadata' },
-            React.createElement("div", { className: 'str-chat__attachment-preview-file-name', title: attachment.title }, attachment.title),
-            typeof attachment.duration !== 'undefined' && (React.createElement(RecordingTimer, { durationSeconds: secondsElapsed || attachment.duration })),
-            ((_d = attachment.$internal) === null || _d === void 0 ? void 0 : _d.uploadState) === 'uploading' && React.createElement(LoadingIndicatorIcon, { size: 17 })),
-        React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
-            React.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type, version: '2' }))));
-};
-var FilePreview = function (_a) {
-    var _b, _c, _d, _e;
-    var attachment = _a.attachment, handleRetry = _a.handleRetry, removeAttachment = _a.removeAttachment;
-    return (React.createElement("div", { className: 'str-chat__attachment-preview-file', "data-testid": 'attachment-preview-file' },
-        React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
-            React.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type, version: '2' })),
-        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: ((_b = attachment.$internal) === null || _b === void 0 ? void 0 : _b.uploadState) === 'uploading', onClick: function () { var _a, _b; return ((_a = attachment.$internal) === null || _a === void 0 ? void 0 : _a.id) && removeAttachment((_b = attachment.$internal) === null || _b === void 0 ? void 0 : _b.id); } },
-            React.createElement(CloseIcon, null)),
-        ((_c = attachment.$internal) === null || _c === void 0 ? void 0 : _c.uploadState) === 'failed' && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: function () { return handleRetry(attachment); } },
-            React.createElement(RetryIcon, null))),
-        React.createElement("div", { className: 'str-chat__attachment-preview-file-end' },
-            React.createElement("div", { className: 'str-chat__attachment-preview-file-name', title: attachment.title }, attachment.title),
-            ((_d = attachment.$internal) === null || _d === void 0 ? void 0 : _d.uploadState) === 'finished' && (React.createElement("a", { className: 'str-chat__attachment-preview-file-download', download: true, href: attachment.asset_url, rel: 'noreferrer', target: '_blank' },
-                React.createElement(DownloadIcon, null))),
-            ((_e = attachment.$internal) === null || _e === void 0 ? void 0 : _e.uploadState) === 'uploading' && React.createElement(LoadingIndicatorIcon, { size: 17 }))));
-};
-export var ImagePreviewItem = function (_a) {
-    var _b;
-    var id = _a.id;
-    var _c = useComponentContext('ImagePreviewItem').BaseImage, BaseImage = _c === void 0 ? DefaultBaseImage : _c;
-    var _d = useMessageInputContext('ImagePreviewItem'), imageUploads = _d.imageUploads, removeImage = _d.removeImage, uploadImage = _d.uploadImage;
-    var _e = useState(false), previewError = _e[0], setPreviewError = _e[1];
-    var handleRemove = useCallback(function (e) {
-        e.stopPropagation();
-        removeImage(id);
-    }, [removeImage, id]);
-    var handleRetry = useCallback(function () { return uploadImage(id); }, [uploadImage, id]);
-    var handleLoadError = useCallback(function () { return setPreviewError(true); }, []);
-    var image = imageUploads[id];
-    // do not display scraped attachments
-    if (!image || image.og_scrape_url)
-        return null;
-    return (React.createElement("div", { className: clsx('str-chat__attachment-preview-image', {
-            'str-chat__attachment-preview-image--error': previewError,
-        }), "data-testid": 'attachment-preview-image' },
-        React.createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: image.state === 'uploading', onClick: handleRemove },
-            React.createElement(CloseIcon, null)),
-        image.state === 'failed' && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: handleRetry },
-            React.createElement(RetryIcon, null))),
-        image.state === 'uploading' && (React.createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
-            React.createElement(LoadingIndicatorIcon, { size: 17 }))),
-        (image.previewUri || image.url) && (React.createElement(BaseImage, { alt: image.file.name, className: 'str-chat__attachment-preview-thumbnail', onError: handleLoadError, src: (_b = image.previewUri) !== null && _b !== void 0 ? _b : image.url, title: image.file.name }))));
-};
-var FilePreviewItem = function (_a) {
-    var id = _a.id;
-    var _b = useMessageInputContext('FilePreviewItem'), fileUploads = _b.fileUploads, removeFile = _b.removeFile, uploadFile = _b.uploadFile;
-    var handleRemove = useCallback(function (id) {
-        removeFile(id);
-    }, [removeFile]);
-    var handleRetry = useCallback(function (attachment) { return attachment.$internal && uploadFile(attachment.$internal.id); }, [uploadFile]);
-    var file = fileUploads[id];
-    if (!file)
-        return null;
-    var attachment = {
-        $internal: {
-            file: file.file,
-            id: id,
-            uploadState: file.state,
-        },
-        asset_url: file.url,
-        mime_type: file.file.type,
-        title: file.file.name,
-    };
-    return (React.createElement(FilePreview, { attachment: attachment, handleRetry: handleRetry, removeAttachment: handleRemove }));
-};