stream-chat-react 8.1.2 → 8.2.0

package/dist/stories/{connected-user.stories.d.ts → add-message.stories.d.ts}

@@ -1,4 +1,4 @@
 import '@stream-io/stream-chat-css/dist/css/index.css';
 export declare const User1: () => JSX.Element;
 export declare const User2: () => JSX.Element;
-//# sourceMappingURL=connected-user.stories.d.ts.map
+//# sourceMappingURL=add-message.stories.d.ts.map

package/dist/stories/add-message.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/add-message.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AA8DvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}

package/dist/stories/{connected-user.stories.js → add-message.stories.js}

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import '@stream-io/stream-chat-css/dist/css/index.css';
 import React from 'react';
-import { Channel, ChannelHeader, ChannelList, MessageList, useChannelStateContext, Window, } from '../index';
+import { Channel, ChannelHeader, ChannelList, MessageList, Thread, useChannelStateContext, Window, } from '../index';
 import { ConnectedUser } from './utils';
 var channelId = import.meta.env.E2E_ADD_MESSAGE_CHANNEL;
 if (!channelId || typeof channelId !== 'string') {
@@ -22,12 +22,13 @@ var sort = { last_updated: 1 };
 var WrappedConnectedUser = function (_a) {
     var token = _a.token, userId = _a.userId;
     return (React.createElement(ConnectedUser, { token: token, userId: userId },
-        React.createElement(ChannelList, { filters: { members: { $in: [userId] } }, sort: sort }),
+        React.createElement(ChannelList, { filters: { id: { $eq: 'add-message' }, members: { $in: [userId] } }, setActiveChannelOnMount: false, sort: sort }),
         React.createElement(Channel, null,
             React.createElement(Window, null,
                 React.createElement(ChannelHeader, null),
                 React.createElement(MessageList, null),
-                React.createElement(Controls, null)))));
+                React.createElement(Controls, null)),
+            React.createElement(Thread, null))));
 };
 export var User1 = function () {
     var userId = import.meta.env.E2E_TEST_USER_1;

package/dist/stories/jump-to-message.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jump-to-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/jump-to-message.stories.tsx"],"names":[],"mappings":"AAWA,OAAO,+CAA+C,CAAC;AA0CvD,eAAO,MAAM,wBAAwB,mBAapC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAaxC,CAAC"}
+{"version":3,"file":"jump-to-message.stories.d.ts","sourceRoot":"","sources":["../../src/stories/jump-to-message.stories.tsx"],"names":[],"mappings":"AAWA,OAAO,+CAA+C,CAAC;AAkCvD,eAAO,MAAM,wBAAwB,mBAYpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAYxC,CAAC"}

package/dist/stories/jump-to-message.stories.js

@@ -62,9 +62,7 @@ var JumpToMessage = function () {
             });
         }); } }, "Jump to message '29'"));
 };
-var StyleFix = function () { return (React.createElement("style", null, "\n    .str-chat {\n      height: 700px\n    }\n  ")); };
 export var JumpInRegularMessageList = function () { return (React.createElement("div", null,
-    React.createElement(StyleFix, null),
     React.createElement(ConnectedUser, { token: userToken, userId: userId },
         React.createElement(ChannelList, { filters: { id: { $eq: channelId } } }),
         React.createElement(Channel, null,
@@ -72,7 +70,6 @@ export var JumpInRegularMessageList = function () { return (React.createElement(
             React.createElement(Window, null,
                 React.createElement(MessageList, null)))))); };
 export var JumpInVirtualizedMessageList = function () { return (React.createElement("div", null,
-    React.createElement(StyleFix, null),
     React.createElement(ConnectedUser, { token: userToken, userId: userId },
         React.createElement(ChannelList, { filters: { id: { $eq: channelId } } }),
         React.createElement(Channel, null,

package/dist/stories/mark-read.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mark-read.stories.d.ts","sourceRoot":"","sources":["../../src/stories/mark-read.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AA2FvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}
+{"version":3,"file":"mark-read.stories.d.ts","sourceRoot":"","sources":["../../src/stories/mark-read.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AA6DvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}

package/dist/stories/mark-read.stories.js

@@ -1,19 +1,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import '@stream-io/stream-chat-css/dist/css/index.css';
 import React from 'react';
-import { v4 as uuid } from 'uuid';
-import { Channel, ChannelHeader, ChannelList, ChannelPreview, MessageList, useChannelStateContext, Window, } from '../index';
+import { nanoid } from 'nanoid';
+import { Channel, ChannelHeader, ChannelList, MessageList, useChannelStateContext, Window, } from '../index';
 import { ConnectedUser } from './utils';
 var channelId = import.meta.env.E2E_ADD_MESSAGE_CHANNEL;
 if (!channelId || typeof channelId !== 'string') {
@@ -25,26 +14,16 @@ var Controls = function () {
         React.createElement("button", { "data-testid": 'truncate', onClick: function () { return channel.truncate(); } }, "Truncate"),
         React.createElement("button", { "data-testid": 'add-message', onClick: function () {
                 return channel.sendMessage({
-                    text: uuid(),
+                    text: nanoid(),
                 });
             } }, "Add message")));
 };
 // Sort in reverse order to avoid auto-selecting unread channel
 var sort = { last_updated: 1 };
-var CustomPreviewUI = function (_a) {
-    var _b, _c;
-    var activeChannel = _a.activeChannel, channel = _a.channel, displayTitle = _a.displayTitle, setActiveChannel = _a.setActiveChannel, unread = _a.unread, watchers = _a.watchers;
-    var avatarName = displayTitle || ((_c = (_b = channel.state.messages[channel.state.messages.length - 1]) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.id);
-    return (React.createElement("div", { "data-testid": "channel-" + channel.id, onClick: function () { return setActiveChannel === null || setActiveChannel === void 0 ? void 0 : setActiveChannel(channel, watchers); }, style: { background: channel.cid === (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) ? '#fff' : 'initial' } },
-        React.createElement("span", null, avatarName),
-        " || ",
-        React.createElement("span", { "data-testid": 'unread-count' }, unread)));
-};
-var CustomPreview = function (props) { return (React.createElement(ChannelPreview, __assign({}, props, { Preview: CustomPreviewUI }))); };
 var WrappedConnectedUser = function (_a) {
     var token = _a.token, userId = _a.userId;
     return (React.createElement(ConnectedUser, { token: token, userId: userId },
-        React.createElement(ChannelList, { filters: { members: { $in: [userId] }, name: { $autocomplete: 'mr-channel' } }, Preview: CustomPreview, setActiveChannelOnMount: false, sort: sort }),
+        React.createElement(ChannelList, { filters: { members: { $in: [userId] }, name: { $autocomplete: 'mr-channel' } }, setActiveChannelOnMount: false, sort: sort }),
         React.createElement(Channel, null,
             React.createElement(Window, null,
                 React.createElement(ChannelHeader, null),

package/dist/stories/navigate-long-message-lists.stories.d.ts

@@ -0,0 +1,4 @@
+import '@stream-io/stream-chat-css/dist/css/index.css';
+export declare const User1: () => JSX.Element;
+export declare const User2: () => JSX.Element;
+//# sourceMappingURL=navigate-long-message-lists.stories.d.ts.map

package/dist/stories/navigate-long-message-lists.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigate-long-message-lists.stories.d.ts","sourceRoot":"","sources":["../../src/stories/navigate-long-message-lists.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AAgKvD,eAAO,MAAM,KAAK,mBAQjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAQjB,CAAC"}

package/dist/stories/navigate-long-message-lists.stories.js

@@ -0,0 +1,167 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import '@stream-io/stream-chat-css/dist/css/index.css';
+import React, { useEffect } from 'react';
+import { Channel, ChannelHeader, ChannelList, MessageList, Thread, useChannelActionContext, useChannelStateContext, useChatContext, Window, } from '../index';
+import { ConnectedUser } from './utils';
+var user1Id = import.meta.env.E2E_TEST_USER_1;
+var user1Token = import.meta.env.E2E_TEST_USER_1_TOKEN;
+var user2Id = import.meta.env.E2E_TEST_USER_2;
+var user2Token = import.meta.env.E2E_TEST_USER_2_TOKEN;
+var channelId = import.meta.env.E2E_LONG_MESSAGE_LISTS_CHANNEL;
+if (!channelId || typeof channelId !== 'string') {
+    throw new Error('expected ADD_MESSAGE_CHANNEL');
+}
+var OtherUserControlButtons = function () {
+    var client = useChatContext().client;
+    var _a = useChannelStateContext(), channel = _a.channel, threadMessages = _a.threadMessages;
+    var lastMessage = channel.state.messages.slice(-1)[0];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { "data-testid": 'receive-reply', onClick: function () {
+                return channel.sendMessage({
+                    parent_id: lastMessage.id,
+                    text: 'Reply back',
+                });
+            } }, "Receive reply"),
+        React.createElement("button", { "data-testid": 'delete-other-last-reply', onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                var lastReply;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            lastReply = threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.slice(-1)[0];
+                            if (!lastReply) return [3 /*break*/, 2];
+                            return [4 /*yield*/, client.deleteMessage(lastReply.id, true)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); } }, "Delete other user's last reply")));
+};
+// Sort in reverse order to avoid auto-selecting unread channel
+var sort = { last_updated: 1 };
+var Controls = function () {
+    var client = useChatContext().client;
+    var threadMessages = useChannelStateContext().threadMessages;
+    return (React.createElement("div", null,
+        React.createElement("button", { "data-testid": 'delete-last-reply', onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                var lastReply;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            lastReply = threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.slice(-1)[0];
+                            if (!lastReply) return [3 /*break*/, 2];
+                            return [4 /*yield*/, client.deleteMessage(lastReply.id, true)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); } }, "Delete last reply")));
+};
+var SetThreadOpen = function () {
+    var openThread = useChannelActionContext().openThread;
+    var messages = useChannelStateContext().messages;
+    useEffect(function () {
+        if (messages) {
+            var lastMsg = messages.slice(-1)[0];
+            openThread(lastMsg, { preventDefault: function () { return null; } });
+        }
+    }, [messages]);
+    return null;
+};
+var OtherUserControls = function () {
+    var theOtherUserCredentials = document.location.search.match('user1')
+        ? { token: user2Token, userId: user2Id }
+        : { token: user1Token, userId: user1Id };
+    return (React.createElement("div", { className: theOtherUserCredentials.userId },
+        React.createElement("style", null, "\n      ." + theOtherUserCredentials.userId + " .str-chat-channel {\n        max-height: 30px;\n        display: inline-block;\n      }\n      ." + theOtherUserCredentials.userId + " .str-chat__container {\n        height: 30px;\n      }\n\n      ." + theOtherUserCredentials.userId + " .messaging.str-chat .str-chat__thread {\n        display: none;\n      }\n      "),
+        React.createElement(ConnectedUser, __assign({}, theOtherUserCredentials),
+            React.createElement("div", { style: { display: 'none' } },
+                React.createElement(ChannelList, { customActiveChannel: channelId, filters: { id: { $eq: channelId }, members: { $in: [theOtherUserCredentials.userId] } }, setActiveChannelOnMount: true, sort: sort })),
+            React.createElement("div", { style: { height: '30px' } },
+                React.createElement(Channel, null,
+                    React.createElement(SetThreadOpen, null),
+                    React.createElement(OtherUserControlButtons, null),
+                    React.createElement(Thread, null))))));
+};
+var WrappedConnectedUser = function (_a) {
+    var token = _a.token, userId = _a.userId;
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+        React.createElement("div", { className: userId },
+            React.createElement(ConnectedUser, { token: token, userId: userId },
+                React.createElement(ChannelList, { filters: { id: { $eq: channelId }, members: { $in: [userId] } }, setActiveChannelOnMount: false, sort: sort }),
+                React.createElement(Channel, null,
+                    React.createElement(Window, null,
+                        React.createElement(ChannelHeader, null),
+                        React.createElement(MessageList, null),
+                        React.createElement(Controls, null)),
+                    React.createElement(Thread, null)))),
+        React.createElement(OtherUserControls, null)));
+};
+export var User1 = function () {
+    if (!user1Id || typeof user1Id !== 'string') {
+        throw new Error('expected TEST_USER_1');
+    }
+    if (!user1Token || typeof user1Token !== 'string') {
+        throw new Error('expected TEST_USER_1_TOKEN');
+    }
+    return React.createElement(WrappedConnectedUser, { token: user1Token, userId: user1Id });
+};
+export var User2 = function () {
+    if (!user2Id || typeof user2Id !== 'string') {
+        throw new Error('expected TEST_USER_2');
+    }
+    if (!user2Token || typeof user2Token !== 'string') {
+        throw new Error('expected TEST_USER_2_TOKEN');
+    }
+    return React.createElement(WrappedConnectedUser, { token: user2Token, userId: user2Id });
+};

package/dist/stories/utils.js

@@ -11,7 +11,6 @@ export var ConnectedUser = function (_a) {
     var _b = useState(null), client = _b[0], setClient = _b[1];
     useEffect(function () {
         var c = new StreamChat(apiKey);
-        c.connectUser({ id: userId }, token).then(function () { return setClient(c); });
         var handleConnectionChange = function (_a) {
             var _b = _a.online, online = _b === void 0 ? false : _b;
             if (!online)
@@ -19,6 +18,7 @@ export var ConnectedUser = function (_a) {
             setClient(c);
         };
         c.on('connection.changed', handleConnectionChange);
+        c.connectUser({ id: userId }, token);
         return function () {
             c.off('connection.changed', handleConnectionChange);
             c.disconnectUser().then(function () { return console.log('connection closed'); });

package/dist/types/types.d.ts

@@ -1,6 +1,8 @@
+import type { PropsWithChildren } from 'react';
 import type { LoadingIndicatorProps } from '../components/Loading/LoadingIndicator';
 import type { Event, ExtendableGenerics, LiteralStringForUnion, Mute } from 'stream-chat';
 export declare type UnknownType = Record<string, unknown>;
+export declare type PropsWithChildrenOnly = PropsWithChildren<Record<never, never>>;
 export declare type CustomTrigger = {
     [key: string]: {
         componentProps: UnknownType;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AACpF,OAAO,KAAK,EAAE,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE1F,oBAAY,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,cAAc,EAAE,WAAW,CAAC;QAC5B,IAAI,EAAE,WAAW,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG,cAAc,CAAC;AAEjE,oBAAY,qBAAqB,GAAG,WAAW,GAAG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ,CAAC;AAEF,oBAAY,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,kBAAkB,GAAG;IAC3D,cAAc,EAAE,qBAAqB,CAAC;IACtC,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,qBAAqB,CAAC;IACnC,SAAS,EAAE,WAAW,CAAC;IACvB,WAAW,EAAE,kBAAkB,CAAC;IAChC,YAAY,EAAE,WAAW,CAAC;IAC1B,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAAC;AAEF,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,WAAW,GAAG;IAChB,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,WAAW,GACb,uBAAuB,GAAG;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;CACzC,CAAC;AAEJ,oBAAY,aAAa,GACrB,UAAU,GACV,cAAc,GACd,oBAAoB,GACpB,0BAA0B,GAC1B,aAAa,GACb,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,oBAAY,cAAc,GAAG;IAC3B,qCAAqC;IACrC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9D,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types/types.ts"],"names":[],"mappings":"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"}

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { nanoid } from 'nanoid';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from './types/types';
 export declare const isOnlyEmojis: (text?: string | undefined) => boolean;
@@ -19,6 +20,9 @@ export declare type RenderTextOptions = {
 };
 export declare const renderText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(text?: string | undefined, mentioned_users?: UserResponse<StreamChatGenerics>[] | undefined, options?: RenderTextOptions) => JSX.Element | null;
 export declare function escapeRegExp(text: string): string;
-export declare function generateRandomId(): string;
+/**
+ * @deprecated will be removed in the next major release
+ */
+export declare const generateRandomId: typeof nanoid;
 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,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAE/D,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,2LAmClC,CAAC;AAEF,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,cAAc,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;CAClD,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,4LAKZ,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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAOhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAE/D,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,2LAmClC,CAAC;AAEF,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,cAAc,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;CAClD,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,4LAKZ,iBAAiB,uBAiE3B,CAAC;AAEF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,UAExC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAAS,CAAC;AAGvC,eAAO,MAAM,YAAY,QAAS,MAAM,KAAK,MAAM,WAgClD,CAAC"}

package/dist/utils.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
 import emojiRegex from 'emoji-regex';
 import * as linkify from 'linkifyjs';
+import { nanoid } from 'nanoid';
 //@ts-expect-error
 import findAndReplace from 'mdast-util-find-and-replace';
 import RootReactMarkdown from 'react-markdown';
@@ -174,14 +175,10 @@ export var renderText = function (text, mentioned_users, options) {
 export function escapeRegExp(text) {
     return text.replace(/[-[\]{}()*+?.,\\^$|#]/g, '\\$&');
 }
-function S4() {
-    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-}
-// https://stackoverflow.com/a/6860916/2570866
-export function generateRandomId() {
-    // prettier-ignore
-    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
-}
+/**
+ * @deprecated will be removed in the next major release
+ */
+export var generateRandomId = nanoid;
 // 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);

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '8.1.2';
+export var version = '8.2.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "8.1.2",
+  "version": "8.2.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -41,26 +41,26 @@
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
     "mdast-util-find-and-replace": "1.1.1",
+    "nanoid": "^3.3.4",
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.0",
-    "react-file-utils": "1.1.9",
+    "react-file-utils": "^1.1.11",
     "react-image-gallery": "^1.2.7",
-    "react-is": "^17.0.1",
+    "react-is": "^18.1.0",
     "react-markdown": "^5.0.3",
     "react-player": "^2.7.0",
     "react-textarea-autosize": "^8.3.0",
-    "react-virtuoso": "^2.8.2",
-    "textarea-caret": "^3.1.0",
-    "uuid": "^8.3.1"
+    "react-virtuoso": "^2.10.2",
+    "textarea-caret": "^3.1.0"
   },
   "optionalDependencies": {
     "@stream-io/transliterate": "^1.5.5",
-    "mml-react": "^0.4.5"
+    "mml-react": "^0.4.7"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^16.8.0",
-    "react-dom": "^17.0.0 || ^16.8.0",
+    "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
+    "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "stream-chat": "^6.5.0"
   },
   "files": [
@@ -81,7 +81,7 @@
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@ladle/react": "^0.11.0",
-    "@playwright/test": "^1.20.0",
+    "@playwright/test": "^1.22.0",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -91,22 +91,22 @@
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
-    "@testing-library/jest-dom": "5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/react-hooks": "^3.4.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/react-hooks": "^8.0.0",
     "@types/deep-equal": "^1.0.1",
     "@types/dotenv": "^8.2.0",
-    "@types/emoji-mart": "^3.0.8",
+    "@types/emoji-mart": "^3.0.9",
     "@types/linkifyjs": "^2.1.3",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.throttle": "^4.1.6",
     "@types/lodash.uniqby": "^4.7.6",
     "@types/moment": "^2.13.0",
-    "@types/react": "17.0.3",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
     "@types/react-image-gallery": "^1.0.5",
-    "@types/react-is": "^17.0.0",
+    "@types/react-is": "^17.0.3",
     "@types/textarea-caret": "3.0.0",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "4.27.0",
@@ -146,14 +146,14 @@
     "husky": "^4.3.0",
     "i18next-parser": "^6.0.0",
     "jest": "^26.6.3",
-    "jest-axe": "^5.0.1",
+    "jest-axe": "^6.0.0",
     "moment": "^2.29.1",
     "postcss": "^8.1.10",
     "postcss-loader": "^4.1.0",
     "prettier": "^2.2.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-test-renderer": "^18.1.0",
     "rollup": "^2.33.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.4.0",
@@ -203,7 +203,8 @@
     "semantic-release": "semantic-release",
     "browse-examples": "ladle serve",
     "e2e": "playwright test",
-    "e2e-fixtures": "node e2e/fixtures.mjs"
+    "e2e-fixtures": "node e2e/fixtures.mjs",
+    "e2e-container": "./e2e/scripts/run_in_container.sh"
   },
   "resolutions": {
     "ast-types": "^0.14.0"

package/dist/components/AutoCompleteTextarea/listener.d.ts

@@ -1,22 +0,0 @@
-export namespace KEY_CODES {
-    const ESC: number;
-    const UP: number;
-    const DOWN: number;
-    const ENTER: number;
-    const TAB: number;
-    const SPACE: number;
-}
-declare var _default: Listener;
-export default _default;
-declare class Listener {
-    index: number;
-    listeners: {};
-    refCount: number;
-    f: (e: any) => void;
-    startListen: () => void;
-    stopListen: () => void;
-    add: (keyCodes: any, fn: any) => number;
-    remove: (ids: any) => void;
-    removeAll: () => void;
-}
-//# sourceMappingURL=listener.d.ts.map

package/dist/components/AutoCompleteTextarea/listener.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../src/components/AutoCompleteTextarea/listener.js"],"names":[],"mappings":";;;;;;;;;;AAaA;IAEI,cAAc;IACd,cAAmB;IACnB,iBAAiB;IAEjB,oBAkBC;IAGH,wBAOE;IAEF,uBAOE;IAEF,wCAaE;IAEF,2BAIE;IAEF,sBAGE;CACH"}

package/dist/components/AutoCompleteTextarea/listener.js

@@ -1,77 +0,0 @@
-/* eslint-disable */
-export var KEY_CODES = {
-    ESC: 27,
-    UP: 38,
-    DOWN: 40,
-    ENTER: 13,
-    TAB: 9,
-    SPACE: 32,
-};
-var keycodeMap = {};
-// This is self-made key shortcuts manager, used for caching key strokes
-var Listener = /** @class */ (function () {
-    function Listener() {
-        var _this = this;
-        this.startListen = function () {
-            if (!_this.refCount) {
-                // prevent multiple listeners in case of multiple TextareaAutocomplete components on page
-                document.addEventListener('keydown', _this.f);
-                document.addEventListener('keyup', _this.f);
-            }
-            _this.refCount++;
-        };
-        this.stopListen = function () {
-            _this.refCount--;
-            if (!_this.refCount) {
-                // prevent disable listening in case of multiple TextareaAutocomplete components on page
-                document.removeEventListener('keydown', _this.f);
-                document.removeEventListener('keyup', _this.f);
-            }
-        };
-        this.add = function (keyCodes, fn) {
-            var keyCode = keyCodes;
-            if (typeof keyCode !== 'object')
-                keyCode = [keyCode];
-            _this.listeners[_this.index] = {
-                keyCode: keyCode,
-                fn: fn,
-            };
-            _this.index += 1;
-            return _this.index;
-        };
-        this.remove = function (ids) {
-            for (var _i = 0, _a = Object.entries(ids); _i < _a.length; _i++) {
-                var key = _a[_i];
-                delete _this.listeners[key];
-            }
-        };
-        this.removeAll = function () {
-            _this.listeners = {};
-            _this.index = 0;
-        };
-        this.index = 0;
-        this.listeners = {};
-        this.refCount = 0;
-        this.f = function (e) {
-            var code = e.keyCode || e.which;
-            keycodeMap[code] = e.type === 'keydown';
-            if (e.type !== 'keydown') {
-                keycodeMap[code] = false;
-                return;
-            }
-            Object.values(_this.listeners).forEach(function (_a) {
-                var keyCode = _a.keyCode, fn = _a.fn;
-                if (keyCode.length > 1) {
-                    if (keyCode.every(function (keycode) { return keycodeMap[keycode]; })) {
-                        fn(e);
-                    }
-                }
-                else if (keyCode.includes(code) && keycodeMap[code]) {
-                    fn(e);
-                }
-            });
-        };
-    }
-    return Listener;
-}());
-export default new Listener();

package/dist/stories/connected-user.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"connected-user.stories.d.ts","sourceRoot":"","sources":["../../src/stories/connected-user.stories.tsx"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AAwDvD,eAAO,MAAM,KAAK,mBAUjB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAUjB,CAAC"}