stream-chat-react 10.0.0-theming-v2.2 → 10.0.1

package/dist/components/ChannelSearch/hooks/useChannelSearch.js

@@ -54,38 +54,37 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import throttle from 'lodash.throttle';
 import uniqBy from 'lodash.uniqby';
 import { isChannel } from '../utils';
 import { useChatContext } from '../../../context/ChatContext';
 export var useChannelSearch = function (_a) {
-    var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.enabled, enabled = _d === void 0 ? false : _d, onSelectResult = _a.onSelectResult, _e = _a.searchForChannels, searchForChannels = _e === void 0 ? false : _e, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
+    var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onSearchCallback = _a.onSearch, onSearchExit = _a.onSearchExit, onSelectResult = _a.onSelectResult, _e = _a.searchForChannels, searchForChannels = _e === void 0 ? false : _e, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
     var _f = useChatContext('useChannelSearch'), client = _f.client, navOpen = _f.navOpen, setActiveChannel = _f.setActiveChannel, themeVersion = _f.themeVersion;
     var _g = useState(false), inputIsFocused = _g[0], setInputIsFocused = _g[1];
     var _h = useState(''), query = _h[0], setQuery = _h[1];
     var _j = useState([]), results = _j[0], setResults = _j[1];
-    var _k = useState(false), resultsOpen = _k[0], setResultsOpen = _k[1];
-    var _l = useState(false), searching = _l[0], setSearching = _l[1];
+    var _k = useState(false), searching = _k[0], setSearching = _k[1];
     var inputRef = useRef(null);
     var searchBarRef = useRef(null);
-    var clearState = function () {
+    var clearState = useCallback(function () {
         setQuery('');
         setResults([]);
-        setResultsOpen(false);
         setSearching(false);
-    };
-    var activateSearch = function () {
+    }, []);
+    var activateSearch = useCallback(function () {
         setInputIsFocused(true);
-    };
-    var exitSearch = function () {
+    }, []);
+    var exitSearch = useCallback(function () {
         var _a;
         setInputIsFocused(false);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         clearState();
-    };
+        onSearchExit === null || onSearchExit === void 0 ? void 0 : onSearchExit();
+    }, [clearState, onSearchExit]);
     useEffect(function () {
-        if (!enabled)
+        if (disabled)
             return;
         var clickListener = function (event) {
             var _a, _b;
@@ -96,17 +95,15 @@ export var useChannelSearch = function (_a) {
                 : (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
             if (isInputClick)
                 return;
-            if ((navOpen && inputIsFocused) ||
-                (resultsOpen && clearSearchOnClickOutside) ||
-                (inputIsFocused && !query)) {
+            if ((inputIsFocused && (!query || navOpen)) || clearSearchOnClickOutside) {
                 exitSearch();
             }
         };
         document.addEventListener('click', clickListener);
         return function () { return document.removeEventListener('click', clickListener); };
-    }, [enabled, inputIsFocused, resultsOpen]);
+    }, [disabled, inputIsFocused]);
     useEffect(function () {
-        if (!(inputRef.current && enabled))
+        if (!inputRef.current || disabled)
             return;
         var handleKeyDown = function (event) {
             if (event.key === 'Escape')
@@ -118,7 +115,7 @@ export var useChannelSearch = function (_a) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyDown);
         };
     }, []);
-    var selectResult = function (result) { return __awaiter(void 0, void 0, void 0, function () {
+    var selectResult = useCallback(function (result) { return __awaiter(void 0, void 0, void 0, function () {
         var selectedChannel, newChannel;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -129,7 +126,6 @@ export var useChannelSearch = function (_a) {
                     return [4 /*yield*/, onSelectResult({
                             setQuery: setQuery,
                             setResults: setResults,
-                            setResultsOpen: setResultsOpen,
                             setSearching: setSearching,
                         }, result)];
                 case 1:
@@ -151,13 +147,13 @@ export var useChannelSearch = function (_a) {
                 case 5:
                     setChannels(function (channels) { return uniqBy(__spreadArray([selectedChannel], channels, true), 'cid'); });
                     if (clearSearchOnClickOutside) {
-                        clearState();
+                        exitSearch();
                     }
                     return [2 /*return*/];
             }
         });
-    }); };
-    var getChannels = function (text) { return __awaiter(void 0, void 0, void 0, function () {
+    }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult]);
+    var getChannels = useCallback(function (text) { return __awaiter(void 0, void 0, void 0, function () {
         var userResponse, channelResponse, _a, channels, users_1, users, error_1;
         var _b, _c, _d, _e, _f, _g;
         return __generator(this, function (_h) {
@@ -178,14 +174,12 @@ export var useChannelSearch = function (_a) {
                 case 3:
                     _a = _h.sent(), channels = _a[0], users_1 = _a[1].users;
                     setResults(__spreadArray(__spreadArray([], channels, true), users_1, true));
-                    setResultsOpen(true);
                     setSearching(false);
                     return [2 /*return*/];
                 case 4: return [4 /*yield*/, Promise.resolve(userResponse)];
                 case 5:
                     users = (_h.sent()).users;
                     setResults(users);
-                    setResultsOpen(true);
                     return [3 /*break*/, 7];
                 case 6:
                     error_1 = _h.sent();
@@ -197,17 +191,16 @@ export var useChannelSearch = function (_a) {
                     return [2 /*return*/];
             }
         });
-    }); };
+    }); }, [client, searching]);
     var getChannelsThrottled = throttle(getChannels, 200);
-    var onSearch = function (event) {
+    var onSearch = useCallback(function (event) {
         event.preventDefault();
-        if (!enabled)
+        if (disabled)
             return;
         if (searchFunction) {
             searchFunction({
                 setQuery: setQuery,
                 setResults: setResults,
-                setResultsOpen: setResultsOpen,
                 setSearching: setSearching,
             }, event);
         }
@@ -215,7 +208,8 @@ export var useChannelSearch = function (_a) {
             setQuery(event.target.value);
             getChannelsThrottled(event.target.value);
         }
-    };
+        onSearchCallback === null || onSearchCallback === void 0 ? void 0 : onSearchCallback(event);
+    }, [disabled, getChannelsThrottled, searchFunction]);
     return {
         activateSearch: activateSearch,
         clearState: clearState,

package/dist/components/Message/MessageStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStatus.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAA2C,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEzF,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AASjE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AA2FF,eAAO,MAAM,aAAa,4FA5EjB,kBAAkB,uBA4EuE,CAAC"}
+{"version":3,"file":"MessageStatus.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAA2C,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEzF,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AAUjE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AA0HF,eAAO,MAAM,aAAa,4FArHjB,kBAAkB,uBAqHuE,CAAC"}

package/dist/components/Message/MessageStatus.js

@@ -1,51 +1,53 @@
-import React from 'react';
+import React, { useState } from 'react';
+import clsx from 'clsx';
 import { DeliveredCheckIcon, MessageDeliveredIcon } from './icons';
 import { getReadByTooltipText, mapToUserNameOrId } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { LoadingIndicator } from '../Loading';
-import { Tooltip } from '../Tooltip';
+import { PopperTooltip, Tooltip } from '../Tooltip';
+import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-// TODO: remove after fully deprecating V1 theming
-var TooltipContainer = function (_a) {
-    var children = _a.children;
-    var themeVersion = useChatContext('TooltipContainer').themeVersion;
-    return themeVersion === '2' ? (React.createElement("div", { className: 'str-chat__message-status-tooltip-container' }, children)) : (React.createElement(React.Fragment, null, children));
-};
 var UnMemoizedMessageStatus = function (props) {
     var _a;
     var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
+    var _d = useEnterLeaveHandlers(), handleEnter = _d.handleEnter, handleLeave = _d.handleLeave, tooltipVisible = _d.tooltipVisible;
     var client = useChatContext('MessageStatus').client;
     var contextAvatar = useComponentContext('MessageStatus').Avatar;
-    var _d = useMessageContext('MessageStatus'), isMyMessage = _d.isMyMessage, lastReceivedId = _d.lastReceivedId, message = _d.message, readBy = _d.readBy, threadList = _d.threadList;
+    var _e = useMessageContext('MessageStatus'), isMyMessage = _e.isMyMessage, lastReceivedId = _e.lastReceivedId, message = _e.message, readBy = _e.readBy, threadList = _e.threadList;
     var t = useTranslationContext('MessageStatus').t;
     var themeVersion = useChatContext('MessageStatus').themeVersion;
+    var _f = useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
     var Avatar = propAvatar || contextAvatar || DefaultAvatar;
-    if (!isMyMessage() || message.type === 'error') {
+    if (!isMyMessage() || message.type === 'error')
         return null;
-    }
     var justReadByMe = (readBy === null || readBy === void 0 ? void 0 : readBy.length) === 1 && readBy[0].id === ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
     var rootClassName = "str-chat__message-".concat(messageType, "-status str-chat__message-status");
-    if (message.status === 'sending') {
-        return (React.createElement("span", { className: rootClassName, "data-testid": 'message-status-sending' },
-            React.createElement(Tooltip, null, t('Sending...')),
-            React.createElement(LoadingIndicator, null)));
-    }
-    if ((readBy === null || readBy === void 0 ? void 0 : readBy.length) && !threadList && !justReadByMe) {
-        var lastReadUser = readBy.filter(function (item) { var _a; return item.id !== ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id); })[0];
-        return (React.createElement("span", { className: rootClassName, "data-testid": 'message-status-read-by' },
-            React.createElement(TooltipContainer, null,
-                React.createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
-                React.createElement(Avatar, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser })),
-            readBy.length > 2 && (React.createElement("span", { className: "str-chat__message-".concat(messageType, "-status-number"), "data-testid": 'message-status-read-by-many' }, readBy.length - 1))));
-    }
-    if (message.status === 'received' && message.id === lastReceivedId && !threadList) {
-        return (React.createElement("span", { className: rootClassName, "data-testid": 'message-status-received' },
-            React.createElement(Tooltip, null, t('Delivered')),
-            themeVersion === '2' ? React.createElement(MessageDeliveredIcon, null) : React.createElement(DeliveredCheckIcon, null)));
-    }
-    return null;
+    var sending = message.status === 'sending';
+    var delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
+    var deliveredAndRead = !!((readBy === null || readBy === void 0 ? void 0 : readBy.length) && !threadList && !justReadByMe);
+    var lastReadUser = (deliveredAndRead
+        ? readBy.filter(function (item) { var _a; return item.id !== ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id); })
+        : [])[0];
+    return (React.createElement("span", { className: rootClassName, "data-testid": clsx({
+            'message-status-read-by': deliveredAndRead,
+            'message-status-received': delivered && !deliveredAndRead,
+            'message-status-sending': sending,
+        }), onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
+        sending && (React.createElement(React.Fragment, null,
+            themeVersion === '1' && React.createElement(Tooltip, null, t('Sending...')),
+            themeVersion === '2' && (React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...'))),
+            React.createElement(LoadingIndicator, null))),
+        delivered && !deliveredAndRead && (React.createElement(React.Fragment, null,
+            themeVersion === '1' && React.createElement(Tooltip, null, t('Delivered')),
+            themeVersion === '2' && (React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered'))),
+            themeVersion === '2' ? React.createElement(MessageDeliveredIcon, null) : React.createElement(DeliveredCheckIcon, null))),
+        deliveredAndRead && (React.createElement(React.Fragment, null,
+            themeVersion === '1' && (React.createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
+            themeVersion === '2' && (React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
+            React.createElement(Avatar, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser }),
+            readBy.length > 2 && (React.createElement("span", { className: "str-chat__message-".concat(messageType, "-status-number"), "data-testid": 'message-status-read-by-many' }, readBy.length - 1))))));
 };
 export var MessageStatus = React.memo(UnMemoizedMessageStatus);

package/dist/components/MessageActions/MessageActionsBox.js

@@ -9,7 +9,7 @@ var CustomMessageActionsList = function (props) {
     var customActionsArray = Object.keys(customMessageActions);
     return (React.createElement(React.Fragment, null, customActionsArray.map(function (customAction) {
         var customHandler = customMessageActions[customAction];
-        return (React.createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item', key: customAction, onClick: function (event) { return customHandler(message, event); }, role: 'option' }, customAction));
+        return (React.createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item str-chat__message-actions-list-item-button', key: customAction, onClick: function (event) { return customHandler(message, event); }, role: 'option' }, customAction));
     })));
 };
 var UnMemoizedMessageActionsBox = function (props) {

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type CooldownTimerProps = {
+    cooldownInterval: number;
+    setCooldownRemaining: React.Dispatch<React.SetStateAction<number | undefined>>;
+};
+export declare const CooldownTimer: ({ cooldownInterval, setCooldownRemaining }: CooldownTimerProps) => JSX.Element;
+//# sourceMappingURL=CooldownTimer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CooldownTimer.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/CooldownTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,oBAAY,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CAChF,CAAC;AACF,eAAO,MAAM,aAAa,+CAAgD,kBAAkB,gBAoB3F,CAAC"}

package/dist/components/MessageInput/CooldownTimer.js

@@ -0,0 +1,17 @@
+import React, { useEffect, useState } from 'react';
+export var CooldownTimer = function (_a) {
+    var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
+    var _b = useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
+    useEffect(function () {
+        var countdownInterval = setInterval(function () {
+            if (seconds > 0) {
+                setSeconds(seconds - 1);
+            }
+            else {
+                setCooldownRemaining(0);
+            }
+        }, 1000);
+        return function () { return clearInterval(countdownInterval); };
+    });
+    return (React.createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"MessageInputFlat.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputFlat.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,gBAAgB,qGA8B5B,CAAC"}
+{"version":3,"file":"MessageInputFlat.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputFlat.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,eAAO,MAAM,gBAAgB,qGA8B5B,CAAC"}

package/dist/components/MessageInput/MessageInputFlat.js

@@ -14,10 +14,8 @@ import { FileUploadButton, ImageDropzone, UploadButton } from 'react-file-utils'
 import clsx from 'clsx';
 import { usePopper } from 'react-popper';
 import { useDropzone } from 'react-dropzone';
-import zipObject from 'lodash/zipObject';
 import { nanoid } from 'nanoid';
 import { EmojiPicker } from './EmojiPicker';
-import { CooldownTimer as DefaultCooldownTimer } from './hooks/useCooldownTimer';
 import { EmojiIconLarge as DefaultEmojiIcon, EmojiPickerIcon as DefaultEmojiPickerIcon, FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, UploadIcon as DefaultUploadIcon, } from './icons';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
 import { AttachmentPreviewList } from './AttachmentPreviewList';
@@ -30,6 +28,7 @@ import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
+import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
 export var MessageInputFlat = function () {
     var quotedMessage = useChannelStateContext('MessageInputFlat').quotedMessage;
     var setQuotedMessage = useChannelActionContext('MessageInputFlat').setQuotedMessage;
@@ -98,7 +97,11 @@ var MessageInputV2 = function () {
     }), attributes = _m.attributes, styles = _m.styles;
     var id = useMemo(function () { return nanoid(); }, []);
     var accept = useMemo(function () {
-        return zipObject(acceptedFiles, Array.from({ length: acceptedFiles.length }, function () { return []; }));
+        return acceptedFiles.reduce(function (mediaTypeMap, mediaType) {
+            var _a;
+            (_a = mediaTypeMap[mediaType]) !== null && _a !== void 0 ? _a : (mediaTypeMap[mediaType] = []);
+            return mediaTypeMap;
+        }, {});
     }, [acceptedFiles]);
     var _o = useDropzone({
         accept: accept,

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

@@ -1 +1 @@
-{"version":3,"file":"MessageInputSmall.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputSmall.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,8IA4H7B,CAAC"}
+{"version":3,"file":"MessageInputSmall.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputSmall.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGlF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,8IA4H7B,CAAC"}

package/dist/components/MessageInput/MessageInputSmall.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { FileUploadButton, ImageDropzone } from 'react-file-utils';
 import { EmojiPicker } from './EmojiPicker';
-import { CooldownTimer as DefaultCooldownTimer } from './hooks/useCooldownTimer';
 import { EmojiIconSmall as DefaultEmojiIcon, FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, } from './icons';
 import { UploadsPreview } from './UploadsPreview';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
@@ -13,6 +12,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview } from './QuotedMessagePreview';
+import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
 /**
  * @deprecated This component has beend deprecated in favor of [`MessageInputFlat`](./MessageInputFlat.tsx) from which
  * `MessageInputSmall` "inherited" most of the code with only slight modification to classNames

package/dist/components/MessageInput/hooks/useCooldownTimer.d.ts

@@ -1,10 +1,5 @@
 import React from 'react';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare type CooldownTimerProps = {
-    cooldownInterval: number;
-    setCooldownRemaining: React.Dispatch<React.SetStateAction<number | undefined>>;
-};
-export declare const CooldownTimer: ({ cooldownInterval, setCooldownRemaining }: CooldownTimerProps) => JSX.Element;
 export declare type CooldownTimerState = {
     cooldownInterval: number;
     setCooldownRemaining: React.Dispatch<React.SetStateAction<number | undefined>>;

package/dist/components/MessageInput/hooks/useCooldownTimer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCooldownTimer.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useCooldownTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,oBAAY,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CAChF,CAAC;AAEF,eAAO,MAAM,aAAa,+CAAgD,kBAAkB,gBAoB3F,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,0FAExB,kBA6BJ,CAAC"}
+{"version":3,"file":"useCooldownTimer.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useCooldownTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,oBAAY,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,0FAExB,kBA6BJ,CAAC"}

package/dist/components/MessageInput/hooks/useCooldownTimer.js

@@ -1,22 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
-export var CooldownTimer = function (_a) {
-    var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
-    var _b = useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
-    useEffect(function () {
-        var countdownInterval = setInterval(function () {
-            if (seconds > 0) {
-                setSeconds(seconds - 1);
-            }
-            else {
-                setCooldownRemaining(0);
-            }
-        }, 1000);
-        return function () { return clearInterval(countdownInterval); };
-    });
-    return (React.createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
-};
 export var useCooldownTimer = function () {
     var latestMessageDatesByChannels = useChatContext('useCooldownTimer').latestMessageDatesByChannels;
     var channel = useChannelStateContext('useCooldownTimer').channel;

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

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAKrC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,cAAc,mBAW1B,CAAC;AAEF,eAAO,MAAM,cAAc,mBAW1B,CAAC;AAGF,eAAO,MAAM,eAAe,mBAW3B,CAAC;AAEF,eAAO,MAAM,cAAc,mBAY1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAY9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;iBA0BhC,CAAC;AAGF,eAAO,MAAM,UAAU,mBAqBtB,CAAC;AAEF,eAAO,MAAM,SAAS,mBAcrB,CAAC;AAEF,eAAO,MAAM,SAAS,mBAcrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAcxB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAYtB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAkBtB,CAAC;AAEF,oBAAY,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,WAAW,EAAE,CACX,KAAK,EAAE,KAAK,CAAC,kBAAkB,EAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,KACrD,IAAI,CAAC;CACX,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,kKAoBtB,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,cAAc,mBAW1B,CAAC;AAEF,eAAO,MAAM,cAAc,mBAW1B,CAAC;AAGF,eAAO,MAAM,eAAe,mBAW3B,CAAC;AAEF,eAAO,MAAM,cAAc,mBAY1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAY9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;iBA0BhC,CAAC;AAGF,eAAO,MAAM,UAAU,mBAqBtB,CAAC;AAEF,eAAO,MAAM,SAAS,mBAcrB,CAAC;AAEF,eAAO,MAAM,SAAS,mBAcrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAcxB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAYtB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAkBtB,CAAC;AAEF,oBAAY,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,WAAW,EAAE,CACX,KAAK,EAAE,KAAK,CAAC,kBAAkB,EAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,KACrD,IAAI,CAAC;CACX,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,kKAoBtB,CAAC"}

package/dist/components/MessageInput/icons.js

@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useId } from 'react';
+import React, { useMemo } from 'react';
+import { nanoid } from 'nanoid';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChatContext } from '../../context/ChatContext';
 export var EmojiIconLarge = function () {
@@ -55,7 +56,7 @@ export var FileUploadIconFlat = function () {
 };
 export var LoadingIndicatorIcon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 20 : _b;
-    var id = useId();
+    var id = useMemo(function () { return nanoid(); }, []);
     return (React.createElement("div", { className: 'str-chat__loading-indicator' },
         React.createElement("svg", { "data-testid": 'loading-indicator', height: size, viewBox: '0 0 30 30', width: size, xmlns: 'http://www.w3.org/2000/svg' },
             React.createElement("defs", null,

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

@@ -8,4 +8,5 @@ export * from './MessageInputFlat';
 export * from './MessageInputSmall';
 export * from './QuotedMessagePreview';
 export * from './UploadsPreview';
+export * from './CooldownTimer';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC"}

package/dist/components/MessageInput/index.js

@@ -8,3 +8,4 @@ export * from './MessageInputFlat';
 export * from './MessageInputSmall';
 export * from './QuotedMessagePreview';
 export * from './UploadsPreview';
+export * from './CooldownTimer';

package/dist/components/Reactions/ReactionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,sHAAsH;IACtH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkFF;;GAEG;AACH,eAAO,MAAM,aAAa,yJAAwE,CAAC"}
+{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK1D,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,sHAAsH;IACtH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyHF;;GAEG;AACH,eAAO,MAAM,aAAa,yJAAwE,CAAC"}

package/dist/components/Reactions/ReactionsList.js

@@ -20,16 +20,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { Suspense } from 'react';
+import React, { Suspense, useState } from 'react';
 import clsx from 'clsx';
 import { useEmojiContext } from '../../context/EmojiContext';
 import { useMessageContext } from '../../context/MessageContext';
+import { useChatContext } from '../../context/ChatContext';
 import { useProcessReactions } from './hooks/useProcessReactions';
+import { PopperTooltip } from '../Tooltip';
+import { useEnterLeaveHandlers } from '../Tooltip/hooks';
+var ButtonWithTooltip = function (_a) {
+    var children = _a.children, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, rest = __rest(_a, ["children", "onMouseEnter", "onMouseLeave"]);
+    var _b = useState(null), referenceElement = _b[0], setReferenceElement = _b[1];
+    var _c = useEnterLeaveHandlers({
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+    }), handleEnter = _c.handleEnter, handleLeave = _c.handleLeave, tooltipVisible = _c.tooltipVisible;
+    var themeVersion = useChatContext('ButtonWithTooltip').themeVersion;
+    return (React.createElement(React.Fragment, null,
+        themeVersion === '2' && (React.createElement(PopperTooltip, { referenceElement: referenceElement, visible: tooltipVisible }, rest.title)),
+        React.createElement("button", __assign({ onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement }, rest), children)));
+};
 var UnMemoizedReactionsList = function (props) {
     var onClick = props.onClick, _a = props.reverse, reverse = _a === void 0 ? false : _a, rest = __rest(props, ["onClick", "reverse"]);
     var _b = useEmojiContext('ReactionsList'), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
     var onReactionListClick = useMessageContext('ReactionsList').onReactionListClick;
-    var _c = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _c.additionalEmojiProps, emojiData = _c.emojiData, getEmojiByReactionType = _c.getEmojiByReactionType, iHaveReactedWithReaction = _c.iHaveReactedWithReaction, latestReactions = _c.latestReactions, latestReactionTypes = _c.latestReactionTypes, reactionCounts = _c.reactionCounts, supportedReactionsArePresent = _c.supportedReactionsArePresent, totalReactionCount = _c.totalReactionCount;
+    var _c = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _c.additionalEmojiProps, aggregatedUserNamesByType = _c.aggregatedUserNamesByType, emojiData = _c.emojiData, getEmojiByReactionType = _c.getEmojiByReactionType, iHaveReactedWithReaction = _c.iHaveReactedWithReaction, latestReactions = _c.latestReactions, latestReactionTypes = _c.latestReactionTypes, reactionCounts = _c.reactionCounts, supportedReactionsArePresent = _c.supportedReactionsArePresent, totalReactionCount = _c.totalReactionCount;
     if (!latestReactions.length)
         return null;
     if (!supportedReactionsArePresent)
@@ -44,7 +59,7 @@ var UnMemoizedReactionsList = function (props) {
                 return emojiObject ? (React.createElement("li", { className: clsx('str-chat__message-reaction', {
                         'str-chat__message-reaction-own': isOwnReaction,
                     }), key: emojiObject.id },
-                    React.createElement("button", { "aria-label": "Reactions: ".concat(reactionType) },
+                    React.createElement(ButtonWithTooltip, { "aria-label": "Reactions: ".concat(reactionType), title: aggregatedUserNamesByType[reactionType].join(', '), type: 'button' },
                         React.createElement(Suspense, { fallback: null },
                             React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
                                 React.createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, additionalEmojiProps)))),

package/dist/components/Reactions/hooks/useProcessReactions.d.ts

@@ -6,6 +6,7 @@ declare type SharedReactionListProps = 'additionalEmojiProps' | 'own_reactions'
 declare type UseProcessReactionsParams = Pick<ReactionsListProps, SharedReactionListProps> & Pick<EmojiContextValue, 'emojiConfig'>;
 export declare const useProcessReactions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: UseProcessReactionsParams) => {
     additionalEmojiProps: import("../../../context").EmojiSetDef | Partial<import("emoji-mart").NimbleEmojiProps>;
+    aggregatedUserNamesByType: Record<string, string[]>;
     emojiData: import("emoji-mart").Data;
     getEmojiByReactionType: (type: string) => ReactionEmoji | undefined;
     iHaveReactedWithReaction: (reactionType: string) => import("stream-chat").ReactionResponse<DefaultStreamChatGenerics> | undefined;

package/dist/components/Reactions/hooks/useProcessReactions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProcessReactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Reactions/hooks/useProcessReactions.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,aAAK,uBAAuB,GACxB,sBAAsB,GACtB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,WAAW,CAAC;AAEhB,aAAK,yBAAyB,GAAG,IAAI,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,GAChF,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAEzC,eAAO,MAAM,mBAAmB,6FAGtB,yBAAyB;;;mCAyBxB,MAAM,KAAG,aAAa,GAAG,SAAS;6CAL1B,MAAM;;;;;;;;CA2DxB,CAAC"}
+{"version":3,"file":"useProcessReactions.d.ts","sourceRoot":"","sources":["../../../../src/components/Reactions/hooks/useProcessReactions.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,aAAK,uBAAuB,GACxB,sBAAsB,GACtB,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,WAAW,CAAC;AAEhB,aAAK,yBAAyB,GAAG,IAAI,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,GAChF,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAEzC,eAAO,MAAM,mBAAmB,6FAGtB,yBAAyB;;;;mCAyBxB,MAAM,KAAG,aAAa,GAAG,SAAS;6CAL1B,MAAM;;;;;;;;CAwExB,CAAC"}

package/dist/components/Reactions/hooks/useProcessReactions.js

@@ -37,8 +37,19 @@ export var useProcessReactions = function (params) {
             ? Object.values(reactionCounts).reduce(function (total, count) { return total + count; }, 0)
             : 0;
     }, [reactionCounts, supportedReactionsArePresent]);
+    var aggregatedUserNamesByType = useMemo(function () {
+        return latestReactions.reduce(function (typeMap, _a) {
+            var _b;
+            var type = _a.type, user = _a.user;
+            (_b = typeMap[type]) !== null && _b !== void 0 ? _b : (typeMap[type] = []);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            typeMap[type].push((user === null || user === void 0 ? void 0 : user.name) || user.id);
+            return typeMap;
+        }, {});
+    }, [latestReactions]);
     return {
         additionalEmojiProps: reactionsAreCustom ? additionalEmojiProps : emojiSetDef,
+        aggregatedUserNamesByType: aggregatedUserNamesByType,
         emojiData: emojiData,
         getEmojiByReactionType: getEmojiByReactionType,
         iHaveReactedWithReaction: iHaveReactedWithReaction,

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,15 @@
-import { ComponentProps } from 'react';
-export declare const Tooltip: (props: ComponentProps<'div'>) => JSX.Element;
+import React, { ComponentProps } from 'react';
+import { PopperProps } from 'react-popper';
+export declare const Tooltip: ({ children, ...rest }: ComponentProps<'div'>) => JSX.Element;
+export declare type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<{
+    /** Reference element to which the tooltip should attach to */
+    referenceElement: T | null;
+    /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */
+    offset?: [number, number];
+    /** Popper's placement property defining default position of the tooltip, default 'top' */
+    placement?: PopperProps<unknown>['placement'];
+    /** Tells component whether to render it's contents */
+    visible?: boolean;
+}>;
+export declare const PopperTooltip: <T extends HTMLElement>({ children, offset, referenceElement, placement, visible, }: PopperTooltipProps<T>) => JSX.Element | null;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9C,eAAO,MAAM,OAAO,UAAW,eAAe,KAAK,CAAC,gBAOnD,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAa,MAAM,cAAc,CAAC;AAEtD,eAAO,MAAM,OAAO,0BAA2B,eAAe,KAAK,CAAC,gBAInE,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI,KAAK,CAAC,iBAAiB,CAAC;IAC9E,8DAA8D;IAC9D,gBAAgB,EAAE,CAAC,GAAG,IAAI,CAAC;IAC3B,0FAA0F;IAC1F,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,0FAA0F;IAC1F,SAAS,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;IAC9C,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,mIAgCzB,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -20,8 +20,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
-export var Tooltip = function (props) {
-    var children = props.children, rest = __rest(props, ["children"]);
+import React, { useState } from 'react';
+import { usePopper } from 'react-popper';
+export var Tooltip = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
     return (React.createElement("div", __assign({ className: 'str-chat__tooltip' }, rest), children));
 };
+export var PopperTooltip = function (_a) {
+    var children = _a.children, _b = _a.offset, offset = _b === void 0 ? [0, 10] : _b, referenceElement = _a.referenceElement, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.visible, visible = _d === void 0 ? false : _d;
+    var _e = useState(null), popperElement = _e[0], setPopperElement = _e[1];
+    var _f = usePopper(referenceElement, popperElement, {
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: offset,
+                },
+            },
+        ],
+        placement: placement,
+    }), attributes = _f.attributes, styles = _f.styles;
+    if (!visible)
+        return null;
+    return (React.createElement("div", __assign({ className: 'str-chat__tooltip', ref: setPopperElement, style: styles.popper }, attributes.popper), children));
+};

package/dist/components/Tooltip/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useEnterLeaveHandlers';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/dist/components/Tooltip/hooks/index.js

@@ -0,0 +1 @@
+export * from './useEnterLeaveHandlers';

package/dist/components/Tooltip/hooks/useEnterLeaveHandlers.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const useEnterLeaveHandlers: <T extends HTMLElement>({ onMouseEnter, onMouseLeave, }?: Partial<Record<"onMouseEnter" | "onMouseLeave", React.MouseEventHandler<T>>>) => {
+    handleEnter: React.MouseEventHandler<T>;
+    handleLeave: React.MouseEventHandler<T>;
+    tooltipVisible: boolean;
+};
+//# sourceMappingURL=useEnterLeaveHandlers.d.ts.map

package/dist/components/Tooltip/hooks/useEnterLeaveHandlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnterLeaveHandlers.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/hooks/useEnterLeaveHandlers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,eAAO,MAAM,qBAAqB;;;;CAuBjC,CAAC"}