stream-chat-react 11.19.0 → 11.21.0

package/dist/i18n/utils.js

@@ -1,8 +1,9 @@
+import { __assign, __rest } from "tslib";
 import { isDate, isDayOrMoment, isNumberOrString, } from '../context';
 export var notValidDateWarning = 'MessageTimestamp was called without a message, or message has invalid created_at date.';
 export var noParsingFunctionWarning = 'MessageTimestamp was called but there is no datetime parsing function available';
 export function getDateString(_a) {
-    var calendar = _a.calendar, format = _a.format, formatDate = _a.formatDate, messageCreatedAt = _a.messageCreatedAt, tDateTimeParser = _a.tDateTimeParser;
+    var calendar = _a.calendar, calendarFormats = _a.calendarFormats, format = _a.format, formatDate = _a.formatDate, messageCreatedAt = _a.messageCreatedAt, t = _a.t, tDateTimeParser = _a.tDateTimeParser, timestampTranslationKey = _a.timestampTranslationKey;
     if (!messageCreatedAt ||
         (typeof messageCreatedAt === 'string' && !Date.parse(messageCreatedAt))) {
         console.warn(notValidDateWarning);
@@ -11,6 +12,19 @@ export function getDateString(_a) {
     if (typeof formatDate === 'function') {
         return formatDate(new Date(messageCreatedAt));
     }
+    if (t && timestampTranslationKey) {
+        var options = {};
+        if (typeof calendar !== 'undefined' && calendar !== null)
+            options.calendar = calendar;
+        if (typeof calendarFormats !== 'undefined' && calendarFormats !== null)
+            options.calendarFormats = calendarFormats;
+        if (typeof format !== 'undefined' && format !== null)
+            options.format = format;
+        var translatedTimestamp = t(timestampTranslationKey, __assign(__assign({}, options), { timestamp: new Date(messageCreatedAt) }));
+        var translationKeyFound = timestampTranslationKey !== translatedTimestamp;
+        if (translationKeyFound)
+            return translatedTimestamp;
+    }
     if (!tDateTimeParser) {
         console.warn(noParsingFunctionWarning);
         return null;
@@ -21,7 +35,9 @@ export function getDateString(_a) {
          * parsedTime.calendar is guaranteed on the type but is only
          * available when a user calls dayjs.extend(calendar)
          */
-        return calendar && parsedTime.calendar ? parsedTime.calendar() : parsedTime.format(format);
+        return calendar && parsedTime.calendar
+            ? parsedTime.calendar(undefined, calendarFormats || undefined)
+            : parsedTime.format(format || undefined);
     }
     if (isDate(parsedTime)) {
         return parsedTime.toDateString();
@@ -31,3 +47,28 @@ export function getDateString(_a) {
     }
     return null;
 }
+export var predefinedFormatters = {
+    timestampFormatter: function (streamI18n) { return function (value, _, _a) {
+        var calendarFormats = _a.calendarFormats, options = __rest(_a, ["calendarFormats"]);
+        var parsedCalendarFormats;
+        try {
+            if (!options.calendar) {
+                parsedCalendarFormats = {};
+            }
+            else if (typeof calendarFormats === 'string') {
+                parsedCalendarFormats = JSON.parse(calendarFormats);
+            }
+            else if (typeof calendarFormats === 'object') {
+                parsedCalendarFormats = calendarFormats;
+            }
+        }
+        catch (e) {
+            console.error('[TIMESTAMP FORMATTER]', e);
+        }
+        var result = getDateString(__assign(__assign({}, options), { calendarFormats: parsedCalendarFormats, messageCreatedAt: value, tDateTimeParser: streamI18n.tDateTimeParser }));
+        if (!result || typeof result === 'number') {
+            return JSON.stringify(value);
+        }
+        return result;
+    }; },
+};

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-8c5139ab.js');
+var Window = require('./Window-6c9f7581.js');
 var React = require('react');
 var streamChat = require('stream-chat');
 var throttle = require('lodash.throttle');
@@ -25,6 +25,14 @@ require('dayjs/plugin/localeData');
 require('dayjs/plugin/relativeTime');
 require('dayjs/plugin/utc');
 require('dayjs/plugin/timezone');
+require('prop-types');
+require('@babel/runtime/helpers/extends');
+require('@babel/runtime/helpers/defineProperty');
+require('react-textarea-autosize');
+require('textarea-caret');
+require('react-is');
+require('crypto');
+require('react/jsx-runtime');
 require('dayjs/locale/de');
 require('dayjs/locale/es');
 require('dayjs/locale/fr');
@@ -37,14 +45,6 @@ require('dayjs/locale/pt');
 require('dayjs/locale/ru');
 require('dayjs/locale/tr');
 require('dayjs/locale/en');
-require('prop-types');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/defineProperty');
-require('react-textarea-autosize');
-require('textarea-caret');
-require('react-is');
-require('crypto');
-require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -612,7 +612,7 @@ function defaultRenderMessages(_a) {
                 React__default["default"].createElement(HeaderComponent, null)));
         }
         else if (message.type === 'system') {
-            renderedMessages.push(React__default["default"].createElement("li", { key: message.id || message.created_at },
+            renderedMessages.push(React__default["default"].createElement("li", { "data-message-id": message.id, key: message.id || message.created_at },
                 React__default["default"].createElement(MessageSystem, { message: message })));
         }
         else {
@@ -929,9 +929,11 @@ var useGiphyPreview = function (separateGiphyPreview) {
         if (separateGiphyPreview)
             client.on('message.new', handleEvent);
         return function () { return client.off('message.new', handleEvent); };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [separateGiphyPreview]);
-    return { giphyPreviewMessage: giphyPreviewMessage, setGiphyPreviewMessage: setGiphyPreviewMessage };
+    }, [client, separateGiphyPreview]);
+    return {
+        giphyPreviewMessage: giphyPreviewMessage,
+        setGiphyPreviewMessage: separateGiphyPreview ? setGiphyPreviewMessage : undefined,
+    };
 };
 
 var useMessageSetKey = function (_a) {
@@ -1073,7 +1075,7 @@ var Footer = function () {
 };
 var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     var _a, _b, _c, _d, _e, _f, _g;
-    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadDate = virtuosoContext.lastReadDate, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, reactionDetailsSort = virtuosoContext.reactionDetailsSort, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _h = virtuosoContext.unreadMessageCount, unreadMessageCount = _h === void 0 ? 0 : _h, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
+    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, formatDate = virtuosoContext.formatDate, lastReadDate = virtuosoContext.lastReadDate, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, reactionDetailsSort = virtuosoContext.reactionDetailsSort, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _h = virtuosoContext.unreadMessageCount, unreadMessageCount = _h === void 0 ? 0 : _h, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
     var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -1114,7 +1116,7 @@ var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         showUnreadSeparatorAbove && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-        React__default["default"].createElement(Window.Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_g = virtuosoRef.current) === null || _g === void 0 ? void 0 : _g.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
+        React__default["default"].createElement(Window.Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_g = virtuosoRef.current) === null || _g === void 0 ? void 0 : _g.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
         showUnreadSeparatorBelow && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };
@@ -1150,7 +1152,7 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
 }
 var VirtualizedMessageListWithContext = function (props) {
     var _a, _b;
-    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _g, messages = props.messages, notifications = props.notifications, 
+    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, formatDate = props.formatDate, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _g, messages = props.messages, notifications = props.notifications, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     _h = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
@@ -1316,6 +1318,7 @@ var VirtualizedMessageListWithContext = function (props) {
                         customMessageRenderer: customMessageRenderer,
                         DateSeparator: DateSeparator,
                         firstUnreadMessageId: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id,
+                        formatDate: formatDate,
                         head: head,
                         lastReadDate: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read,
                         lastReadMessageId: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id,
@@ -1351,7 +1354,7 @@ function VirtualizedMessageList(props) {
     return (React__default["default"].createElement(VirtualizedMessageListWithContext, Window.__assign({ channel: channel, channelUnreadUiState: channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll }, props)));
 }
 
-var version = '11.19.0';
+var version = '11.21.0';
 
 var useChat = function (_a) {
     var _b, _c;

package/dist/version.d.ts

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

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.19.0';
+export var version = '11.21.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.19.0",
+  "version": "11.21.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -104,7 +104,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
-    "stream-chat": "^8.30.0"
+    "stream-chat": "^8.33.1"
   },
   "peerDependenciesMeta": {
     "emoji-mart": {
@@ -226,7 +226,7 @@
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.30.0",
+    "stream-chat": "^8.33.1",
     "style-loader": "^2.0.0",
     "ts-jest": "^28.0.8",
     "typescript": "^4.7.4",