stream-chat-react 10.15.0 → 11.0.0-rc.2

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { EmojiData, NimbleEmojiIndex } from 'emoji-mart';
 import type { FileLike } from '../../ReactFileUtilities';
 import type { Attachment, Message, UserResponse } from 'stream-chat';
 import type { MessageInputProps } from '../MessageInput';
@@ -9,7 +8,6 @@ import type { FileUpload, ImageUpload, LinkPreviewMap } from '../types';
 import { SetLinkPreviewMode } from '../types';
 export declare type MessageInputState<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     attachments: Attachment<StreamChatGenerics>[];
-    emojiPickerIsOpen: boolean;
     fileOrder: string[];
     fileUploads: Record<string, FileUpload>;
     imageOrder: string[];
@@ -19,10 +17,6 @@ export declare type MessageInputState<StreamChatGenerics extends DefaultStreamCh
     setText: (text: string) => void;
     text: string;
 };
-declare type SetEmojiPickerIsOpenAction = {
-    type: 'setEmojiPickerIsOpen';
-    value: boolean;
-};
 declare type SetTextAction = {
     getNewText: (currentStateText: string) => string;
     type: 'setText';
@@ -63,28 +57,22 @@ declare type AddMentionedUserAction<StreamChatGenerics extends DefaultStreamChat
     type: 'addMentionedUser';
     user: UserResponse<StreamChatGenerics>;
 };
-export declare type MessageInputReducerAction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = SetEmojiPickerIsOpenAction | SetTextAction | ClearAction | SetImageUploadAction | SetFileUploadAction | SetLinkPreviewsAction | RemoveImageUploadAction | RemoveFileUploadAction | AddMentionedUserAction<StreamChatGenerics>;
+export declare type MessageInputReducerAction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = SetTextAction | ClearAction | SetImageUploadAction | SetFileUploadAction | SetLinkPreviewsAction | RemoveImageUploadAction | RemoveFileUploadAction | AddMentionedUserAction<StreamChatGenerics>;
 export declare type MessageInputHookProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = EnrichURLsController & {
-    closeEmojiPicker: React.MouseEventHandler<HTMLElement>;
-    emojiPickerRef: React.MutableRefObject<HTMLDivElement | null>;
     handleChange: React.ChangeEventHandler<HTMLTextAreaElement>;
-    handleEmojiKeyDown: React.KeyboardEventHandler<HTMLSpanElement>;
     handleSubmit: (event: React.BaseSyntheticEvent, customMessageData?: Partial<Message<StreamChatGenerics>>, options?: SendMessageOptions) => void;
     insertText: (textToInsert: string) => void;
     isUploadEnabled: boolean;
     maxFilesLeft: number;
     numberOfUploads: number;
     onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
-    onSelectEmoji: (emoji: EmojiData) => void;
     onSelectUser: (item: UserResponse<StreamChatGenerics>) => void;
-    openEmojiPicker: React.MouseEventHandler<HTMLSpanElement>;
     removeFile: (id: string) => void;
     removeImage: (id: string) => void;
     textareaRef: React.MutableRefObject<HTMLTextAreaElement | null | undefined>;
     uploadFile: (id: string) => void;
     uploadImage: (id: string) => void;
     uploadNewFiles: (files: FileList | File[]) => void;
-    emojiIndex?: NimbleEmojiIndex;
 };
 export declare type CommandsListState = {
     closeCommandsList: () => void;
@@ -100,26 +88,20 @@ export declare type MentionsListState = {
  * hook for MessageInput state
  */
 export declare const useMessageInputState: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: MessageInputProps<StreamChatGenerics, V>) => MessageInputState<StreamChatGenerics> & EnrichURLsController & {
-    closeEmojiPicker: React.MouseEventHandler<HTMLElement>;
-    emojiPickerRef: React.MutableRefObject<HTMLDivElement | null>;
     handleChange: React.ChangeEventHandler<HTMLTextAreaElement>;
-    handleEmojiKeyDown: React.KeyboardEventHandler<HTMLSpanElement>;
     handleSubmit: (event: React.BaseSyntheticEvent, customMessageData?: Partial<Message<StreamChatGenerics>> | undefined, options?: SendMessageOptions) => void;
     insertText: (textToInsert: string) => void;
     isUploadEnabled: boolean;
     maxFilesLeft: number;
     numberOfUploads: number;
     onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
-    onSelectEmoji: (emoji: EmojiData) => void;
     onSelectUser: (item: UserResponse<StreamChatGenerics>) => void;
-    openEmojiPicker: React.MouseEventHandler<HTMLSpanElement>;
     removeFile: (id: string) => void;
     removeImage: (id: string) => void;
     textareaRef: React.MutableRefObject<HTMLTextAreaElement | null | undefined>;
     uploadFile: (id: string) => void;
     uploadImage: (id: string) => void;
     uploadNewFiles: (files: FileList | File[]) => void;
-    emojiIndex?: NimbleEmojiIndex | undefined;
 } & CommandsListState & MentionsListState;
 export {};
 //# sourceMappingURL=useMessageInputState.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useMessageInputState.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useMessageInputState.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMessageInputState.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useMessageInputState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAU1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAgB,YAAY,EAAE,MAAM,aAAa,CAAC;AAEnF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EACV,aAAa,EACb,yBAAyB,EACzB,kBAAkB,EACnB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,oBAAoB,EAAmB,MAAM,mBAAmB,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,EAAoB,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEhE,oBAAY,iBAAiB,CAC3B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,WAAW,EAAE,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAC1C,YAAY,EAAE,cAAc,CAAC;IAC7B,eAAe,EAAE,YAAY,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACpD,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,aAAK,aAAa,GAAG;IACnB,UAAU,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,aAAK,WAAW,GAAG;IACjB,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,aAAK,oBAAoB,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,aAAK,mBAAmB,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,aAAK,qBAAqB,GAAG;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,IAAI,EAAE,iBAAiB,CAAC;CACzB,CAAC;AAEF,aAAK,uBAAuB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,mBAAmB,CAAC;CAC3B,CAAC;AAEF,aAAK,sBAAsB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,kBAAkB,CAAC;CAC1B,CAAC;AAEF,aAAK,sBAAsB,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,IAAI,EAAE,kBAAkB,CAAC;IACzB,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;CACxC,CAAC;AAEF,oBAAY,yBAAyB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAE9E,aAAa,GACb,WAAW,GACX,oBAAoB,GACpB,mBAAmB,GACnB,qBAAqB,GACrB,uBAAuB,GACvB,sBAAsB,GACtB,sBAAsB,CAAC,kBAAkB,CAAC,CAAC;AAE/C,oBAAY,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,oBAAoB,GAAG;IACzB,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAC5D,YAAY,EAAE,CACZ,KAAK,EAAE,KAAK,CAAC,kBAAkB,EAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,EACxD,OAAO,CAAC,EAAE,kBAAkB,KACzB,IAAI,CAAC;IACV,UAAU,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAC/D,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC5E,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAE,KAAK,IAAI,CAAC;CACpD,CAAC;AA8NF,oBAAY,iBAAiB,GAAG;IAC9B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB;kBA/PjB,MAAM,kBAAkB,CAAC,mBAAmB,CAAC;0BAElD,MAAM,kBAAkB,kFAErB,kBAAkB,KACzB,IAAI;+BACkB,MAAM,KAAK,IAAI;qBACzB,OAAO;kBACV,MAAM;qBACH,MAAM;qBACN,oBAAoB,CAAC,mBAAmB,CAAC,KAAK,IAAI;8DACT,IAAI;qBAC7C,MAAM,KAAK,IAAI;sBACd,MAAM,KAAK,IAAI;iBACpB,MAAM,gBAAgB,CAAC,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC;qBAC1D,MAAM,KAAK,IAAI;sBACd,MAAM,KAAK,IAAI;4BACT,QAAQ,GAAG,IAAI,EAAE,KAAK,IAAI;yCAiXnD,CAAC"}

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

@@ -2,17 +2,14 @@ import { __assign } from "tslib";
 import { useCallback, useReducer, useState } from 'react';
 import { nanoid } from 'nanoid';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
-import { useEmojiIndex } from './useEmojiIndex';
 import { useAttachments } from './useAttachments';
 import { useMessageInputText } from './useMessageInputText';
-import { useEmojiPicker } from './useEmojiPicker';
 import { useSubmitHandler } from './useSubmitHandler';
 import { usePasteHandler } from './usePasteHandler';
 import { useLinkPreviews } from './useLinkPreviews';
 import { LinkPreviewState, SetLinkPreviewMode } from '../types';
 var makeEmptyMessageInputState = function () { return ({
     attachments: [],
-    emojiPickerIsOpen: false,
     fileOrder: [],
     fileUploads: {},
     imageOrder: [],
@@ -86,7 +83,6 @@ var initState = function (message) {
     var mentioned_users = message.mentioned_users || [];
     return {
         attachments: attachments,
-        emojiPickerIsOpen: false,
         fileOrder: fileOrder,
         fileUploads: fileUploads,
         imageOrder: imageOrder,
@@ -103,8 +99,6 @@ var initState = function (message) {
 var messageInputReducer = function (state, action) {
     var _a, _b;
     switch (action.type) {
-        case 'setEmojiPickerIsOpen':
-            return __assign(__assign({}, state), { emojiPickerIsOpen: action.value });
         case 'setText':
             return __assign(__assign({}, state), { text: action.getNewText(state.text) });
         case 'clear':
@@ -178,7 +172,7 @@ var messageInputReducer = function (state, action) {
  */
 export var useMessageInputState = function (props) {
     var _a;
-    var additionalTextareaProps = props.additionalTextareaProps, closeEmojiPickerOnClick = props.closeEmojiPickerOnClick, getDefaultValue = props.getDefaultValue, message = props.message, urlEnrichmentConfig = props.urlEnrichmentConfig;
+    var additionalTextareaProps = props.additionalTextareaProps, getDefaultValue = props.getDefaultValue, message = props.message, urlEnrichmentConfig = props.urlEnrichmentConfig;
     var _b = useChannelStateContext('useMessageInputState'), _c = _b.channelCapabilities, channelCapabilities = _c === void 0 ? {} : _c, channelConfig = _b.channelConfig, enrichURLForPreviewChannelContext = _b.enrichURLForPreview;
     var defaultValue = (getDefaultValue === null || getDefaultValue === void 0 ? void 0 : getDefaultValue()) || (additionalTextareaProps === null || additionalTextareaProps === void 0 ? void 0 : additionalTextareaProps.defaultValue);
     var initialStateValue = message ||
@@ -206,8 +200,7 @@ export var useMessageInputState = function (props) {
         setShowMentionsList(true);
     };
     var closeMentionsList = function () { return setShowMentionsList(false); };
-    var _h = useEmojiPicker(state, dispatch, insertText, textareaRef, closeEmojiPickerOnClick), closeEmojiPicker = _h.closeEmojiPicker, emojiPickerRef = _h.emojiPickerRef, handleEmojiKeyDown = _h.handleEmojiKeyDown, onSelectEmoji = _h.onSelectEmoji, openEmojiPicker = _h.openEmojiPicker;
-    var _j = useAttachments(props, state, dispatch, textareaRef), maxFilesLeft = _j.maxFilesLeft, numberOfUploads = _j.numberOfUploads, removeFile = _j.removeFile, removeImage = _j.removeImage, uploadFile = _j.uploadFile, uploadImage = _j.uploadImage, uploadNewFiles = _j.uploadNewFiles;
+    var _h = useAttachments(props, state, dispatch, textareaRef), maxFilesLeft = _h.maxFilesLeft, numberOfUploads = _h.numberOfUploads, removeFile = _h.removeFile, removeImage = _h.removeImage, uploadFile = _h.uploadFile, uploadImage = _h.uploadImage, uploadNewFiles = _h.uploadNewFiles;
     var handleSubmit = useSubmitHandler(props, state, dispatch, numberOfUploads, enrichURLsController).handleSubmit;
     var isUploadEnabled = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.uploads) !== false && channelCapabilities['upload-file'] !== false;
     var onPaste = usePasteHandler(uploadNewFiles, insertText, isUploadEnabled, enrichURLsController.findAndEnqueueURLsToEnrich).onPaste;
@@ -217,10 +210,5 @@ export var useMessageInputState = function (props) {
     var setText = useCallback(function (text) {
         dispatch({ getNewText: function () { return text; }, type: 'setText' });
     }, []);
-    return __assign(__assign(__assign({}, state), enrichURLsController), { closeCommandsList: closeCommandsList, 
-        /**
-         * TODO: fix the below at some point because this type casting is wrong
-         * and just forced to not have warnings currently with the unknown casting
-         */
-        closeEmojiPicker: closeEmojiPicker, closeMentionsList: closeMentionsList, emojiIndex: useEmojiIndex(), emojiPickerRef: emojiPickerRef, handleChange: handleChange, handleEmojiKeyDown: handleEmojiKeyDown, handleSubmit: handleSubmit, insertText: insertText, isUploadEnabled: isUploadEnabled, maxFilesLeft: maxFilesLeft, numberOfUploads: numberOfUploads, onPaste: onPaste, onSelectEmoji: onSelectEmoji, onSelectUser: onSelectUser, openCommandsList: openCommandsList, openEmojiPicker: openEmojiPicker, openMentionsList: openMentionsList, removeFile: removeFile, removeImage: removeImage, setText: setText, showCommandsList: showCommandsList, showMentionsList: showMentionsList, textareaRef: textareaRef, uploadFile: uploadFile, uploadImage: uploadImage, uploadNewFiles: uploadNewFiles });
+    return __assign(__assign(__assign({}, state), enrichURLsController), { closeCommandsList: closeCommandsList, closeMentionsList: closeMentionsList, handleChange: handleChange, handleSubmit: handleSubmit, insertText: insertText, isUploadEnabled: isUploadEnabled, maxFilesLeft: maxFilesLeft, numberOfUploads: numberOfUploads, onPaste: onPaste, onSelectUser: onSelectUser, openCommandsList: openCommandsList, openMentionsList: openMentionsList, removeFile: removeFile, removeImage: removeImage, setText: setText, showCommandsList: showCommandsList, showMentionsList: showMentionsList, textareaRef: textareaRef, uploadFile: uploadFile, uploadImage: uploadImage, uploadNewFiles: uploadNewFiles });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useMessageInputText.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useMessageInputText.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,eAAO,MAAM,mBAAmB,6UAOD,oBAAoB,CAAC,4BAA4B,CAAC;;+BAmB9D,MAAM;;CAyExB,CAAC"}
+{"version":3,"file":"useMessageInputText.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useMessageInputText.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,eAAO,MAAM,mBAAmB,6UAOD,oBAAoB,CAAC,4BAA4B,CAAC;;+BAmB9D,MAAM;;CAwExB,CAAC"}

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

@@ -17,7 +17,7 @@ export var useMessageInputText = function (props, state, dispatch, findAndEnqueu
     var insertText = useCallback(function (textToInsert) {
         var maxLength = (additionalTextareaProps || {}).maxLength;
         if (!textareaRef.current) {
-            dispatch({
+            return dispatch({
                 getNewText: function (text) {
                     var updatedText = text + textToInsert;
                     if (maxLength && updatedText.length > maxLength) {
@@ -27,7 +27,6 @@ export var useMessageInputText = function (props, state, dispatch, findAndEnqueu
                 },
                 type: 'setText',
             });
-            return;
         }
         var _a = textareaRef.current, selectionEnd = _a.selectionEnd, selectionStart = _a.selectionStart;
         newCursorPosition.current = selectionStart + textToInsert.length;

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

@@ -2,7 +2,6 @@ export * from './AttachmentPreviewList';
 export * from './CooldownTimer';
 export * from './DefaultTriggerProvider';
 export * from './EditMessageForm';
-export * from './EmojiPicker';
 export * from './hooks';
 export * from './icons';
 export * from './MessageInput';

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,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,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,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,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,SAAS,CAAC"}

package/dist/components/MessageInput/index.js

@@ -2,7 +2,6 @@ export * from './AttachmentPreviewList';
 export * from './CooldownTimer';
 export * from './DefaultTriggerProvider';
 export * from './EditMessageForm';
-export * from './EmojiPicker';
 export * from './hooks';
 export * from './icons';
 export * from './MessageInput';

package/dist/components/Reactions/ReactionSelector.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
 import { AvatarProps } from '../Avatar';
-import { ReactionEmoji } from '../Channel/emojiData';
-import type { NimbleEmojiProps } from 'emoji-mart';
 import type { ReactionResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { ReactionOptions } from './reactionOptions';
 export declare type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart` */
-    additionalEmojiProps?: Partial<NimbleEmojiProps>;
     /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
     Avatar?: React.ElementType<AvatarProps>;
     /** If true, shows the user's avatar with the reaction */
@@ -18,11 +15,9 @@ export declare type ReactionSelectorProps<StreamChatGenerics extends DefaultStre
     /** An array of the own reaction objects to distinguish own reactions visually */
     own_reactions?: ReactionResponse<StreamChatGenerics>[];
     /** An object that keeps track of the count of each type of reaction on a message */
-    reaction_counts?: {
-        [key: string]: number;
-    };
+    reaction_counts?: Record<string, number>;
     /** A list of the currently supported reactions on a message */
-    reactionOptions?: ReactionEmoji[];
+    reactionOptions?: ReactionOptions;
     /** If true, adds a CSS class that reverses the horizontal positioning of the selector */
     reverse?: boolean;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAK3F,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AACjE,OAAO,EAAwB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAM3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC1D,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,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAiMF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gIAES,CAAC"}
+{"version":3,"file":"ReactionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,WAAW,EAA2B,MAAM,WAAW,CAAC;AAKjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,oBAAY,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC1D,iFAAiF;IACjF,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACvD,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkLF;;GAEG;AACH,eAAO,MAAM,gBAAgB,gIAES,CAAC"}

package/dist/components/Reactions/ReactionSelector.js

@@ -1,29 +1,22 @@
-import { __assign } from "tslib";
-import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { isMutableRef } from './utils/utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
-import { getStrippedEmojiData } from '../Channel/emojiData';
 import { useComponentContext } from '../../context/ComponentContext';
-import { useEmojiContext } from '../../context/EmojiContext';
 import { useMessageContext } from '../../context/MessageContext';
 var UnMemoizedReactionSelector = React.forwardRef(function (props, ref) {
     var _a;
-    var _b = props.additionalEmojiProps, additionalEmojiProps = _b === void 0 ? {} : _b, propAvatar = props.Avatar, _c = props.detailedView, detailedView = _c === void 0 ? true : _c, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, _d = props.reverse, reverse = _d === void 0 ? false : _d;
-    var contextAvatar = useComponentContext('ReactionSelector').Avatar;
-    var _e = useEmojiContext('ReactionSelector'), Emoji = _e.Emoji, emojiConfig = _e.emojiConfig;
-    var _f = useMessageContext('ReactionSelector'), contextHandleReaction = _f.handleReaction, message = _f.message;
-    var _g = emojiConfig || {}, defaultMinimalEmojis = _g.defaultMinimalEmojis, fullEmojiData = _g.emojiData, emojiSetDef = _g.emojiSetDef;
+    var propAvatar = props.Avatar, _b = props.detailedView, detailedView = _b === void 0 ? true : _b, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, _c = props.reverse, reverse = _c === void 0 ? false : _c;
+    var _d = useComponentContext('ReactionSelector'), contextAvatar = _d.Avatar, contextReactionOptions = _d.reactionOptions;
+    var _e = useMessageContext('ReactionSelector'), contextHandleReaction = _e.handleReaction, message = _e.message;
+    var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
     var Avatar = propAvatar || contextAvatar || DefaultAvatar;
     var handleReaction = propHandleReaction || contextHandleReaction;
     var latestReactions = propLatestReactions || (message === null || message === void 0 ? void 0 : message.latest_reactions) || [];
     var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
     var reactionCounts = propReactionCounts || (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
-    var reactionOptions = propReactionOptions || defaultMinimalEmojis;
-    var reactionsAreCustom = !!(propReactionOptions === null || propReactionOptions === void 0 ? void 0 : propReactionOptions.length);
-    var emojiData = useMemo(function () { return (reactionsAreCustom ? fullEmojiData : getStrippedEmojiData(fullEmojiData)); }, [fullEmojiData, reactionsAreCustom]);
-    var _h = useState(null), tooltipReactionType = _h[0], setTooltipReactionType = _h[1];
-    var _j = useState(null), tooltipPositions = _j[0], setTooltipPositions = _j[1];
+    var _f = useState(null), tooltipReactionType = _f[0], setTooltipReactionType = _f[1];
+    var _g = useState(null), tooltipPositions = _g[0], setTooltipPositions = _g[1];
     var targetRef = useRef(null);
     var tooltipRef = useRef(null);
     var showTooltip = useCallback(function (event, reactionType) {
@@ -80,17 +73,17 @@ var UnMemoizedReactionSelector = React.forwardRef(function (props, ref) {
             } },
             React.createElement("div", { className: 'arrow', style: { left: tooltipPositions === null || tooltipPositions === void 0 ? void 0 : tooltipPositions.arrow } }), (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 :
             _a.map(function (user, i, users) { return (React.createElement("span", { className: 'latest-user-username', key: "key-".concat(i, "-").concat(user) }, "".concat(user).concat(i < users.length - 1 ? ', ' : ''))); }))),
-        React.createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(function (reactionOption) {
-            var latestUser = getLatestUserForReactionType(reactionOption.id);
-            var count = reactionCounts && reactionCounts[reactionOption.id];
-            return (React.createElement("li", { key: "item-".concat(reactionOption.id) },
-                React.createElement("button", { "aria-label": "Select Reaction: ".concat(reactionOption.name), className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
-                        'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionOption.id),
-                    }), "data-text": reactionOption.id, onClick: function (event) { return handleReaction(reactionOption.id, event); } },
-                    !!count && detailedView && (React.createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionOption.id); }, onMouseLeave: hideTooltip }, latestUser ? (React.createElement(Avatar, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React.createElement("div", { className: 'latest-user-not-found' })))),
-                    React.createElement(Suspense, { fallback: null },
-                        React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
-                            React.createElement(Emoji, __assign({ data: emojiData, emoji: reactionOption, size: 20 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef))))),
+        React.createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(function (_a) {
+            var Component = _a.Component, reactionName = _a.name, reactionType = _a.type;
+            var latestUser = getLatestUserForReactionType(reactionType);
+            var count = reactionCounts && reactionCounts[reactionType];
+            return (React.createElement("li", { key: reactionType },
+                React.createElement("button", { "aria-label": "Select Reaction: ".concat(reactionName || reactionType), className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
+                        'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionType),
+                    }), "data-text": reactionType, onClick: function (event) { return handleReaction(reactionType, event); } },
+                    !!count && detailedView && (React.createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionType); }, onMouseLeave: hideTooltip }, latestUser ? (React.createElement(Avatar, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React.createElement("div", { className: 'latest-user-not-found' })))),
+                    React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                        React.createElement(Component, null)),
                     Boolean(count) && detailedView && (React.createElement("span", { className: 'str-chat__message-reactions-list-item__count' }, count || '')))));
         }))));
 });

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

@@ -1,21 +1,16 @@
-import type { NimbleEmojiProps } from 'emoji-mart';
 import type { ReactionResponse } from 'stream-chat';
 import type { ReactEventHandler } from '../Message/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { ReactionEmoji } from '../Channel/emojiData';
+import type { ReactionOptions } from './reactionOptions';
 export declare type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart` */
-    additionalEmojiProps?: Partial<NimbleEmojiProps>;
     /** Custom on click handler for an individual reaction, defaults to `onReactionListClick` from the `MessageContext` */
     onClick?: ReactEventHandler;
     /** An array of the own reaction objects to distinguish own reactions visually */
     own_reactions?: ReactionResponse<StreamChatGenerics>[];
     /** An object that keeps track of the count of each type of reaction on a message */
-    reaction_counts?: {
-        [key: string]: number;
-    };
+    reaction_counts?: Record<string, number>;
     /** A list of the currently supported reactions on a message */
-    reactionOptions?: ReactionEmoji[];
+    reactionOptions?: ReactionOptions;
     /** An array of the reaction objects to display in the list */
     reactions?: ReactionResponse<StreamChatGenerics>[];
     /** Display the reactions in the list in reverse order, defaults to false */

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":"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"}
+{"version":3,"file":"ReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/ReactionsList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,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,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACnD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgHF;;GAEG;AACH,eAAO,MAAM,aAAa,yJAAwE,CAAC"}

package/dist/components/Reactions/ReactionsList.js

@@ -1,7 +1,6 @@
 import { __assign, __rest } from "tslib";
-import React, { Suspense, useState } from 'react';
+import React, { 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';
@@ -21,9 +20,8 @@ var ButtonWithTooltip = function (_a) {
 };
 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, 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;
+    var _b = useProcessReactions(rest), aggregatedUserNamesByType = _b.aggregatedUserNamesByType, getEmojiByReactionType = _b.getEmojiByReactionType, iHaveReactedWithReaction = _b.iHaveReactedWithReaction, latestReactions = _b.latestReactions, latestReactionTypes = _b.latestReactionTypes, reactionCounts = _b.reactionCounts, supportedReactionsArePresent = _b.supportedReactionsArePresent, totalReactionCount = _b.totalReactionCount;
     if (!latestReactions.length)
         return null;
     if (!supportedReactionsArePresent)
@@ -33,17 +31,16 @@ var UnMemoizedReactionsList = function (props) {
         }), "data-testid": 'reaction-list', onClick: onClick || onReactionListClick, onKeyUp: onClick || onReactionListClick, role: 'figure' },
         React.createElement("ul", { className: 'str-chat__message-reactions' },
             latestReactionTypes.map(function (reactionType) {
-                var emojiObject = getEmojiByReactionType(reactionType);
+                var ReactionOption = getEmojiByReactionType(reactionType);
                 var isOwnReaction = iHaveReactedWithReaction(reactionType);
-                return emojiObject ? (React.createElement("li", { className: clsx('str-chat__message-reaction', {
+                return (ReactionOption && (React.createElement("li", { className: clsx('str-chat__message-reaction', {
                         'str-chat__message-reaction-own': isOwnReaction,
-                    }), key: emojiObject.id },
-                    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)))),
+                    }), key: reactionType },
+                    React.createElement(ButtonWithTooltip, { "aria-label": "Reactions: ".concat(reactionType), "data-testid": "reactions-list-button-".concat(reactionType), title: aggregatedUserNamesByType[reactionType].join(', '), type: 'button' },
+                        React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                            React.createElement(ReactionOption.Component, null)),
                         "\u00A0",
-                        React.createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCounts[reactionType])))) : null;
+                        React.createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCounts[reactionType])))));
             }),
             React.createElement("li", null,
                 React.createElement("span", { className: 'str-chat__reaction-list--counter' }, totalReactionCount)))));

package/dist/components/Reactions/SimpleReactionsList.d.ts

@@ -1,11 +1,8 @@
 import React from 'react';
-import type { NimbleEmojiProps } from 'emoji-mart';
 import type { ReactionResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { ReactionEmoji } from '../Channel/emojiData';
+import type { ReactionOptions } from './reactionOptions';
 export declare type SimpleReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart` */
-    additionalEmojiProps?: Partial<NimbleEmojiProps>;
     /** Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`) */
     handleReaction?: (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>;
     /** An array of the own reaction objects to distinguish own reactions visually */
@@ -15,7 +12,7 @@ export declare type SimpleReactionsListProps<StreamChatGenerics extends DefaultS
         [key: string]: number;
     };
     /** A list of the currently supported reactions on a message */
-    reactionOptions?: ReactionEmoji[];
+    reactionOptions?: ReactionOptions;
     /** An array of the reaction objects to display in the list */
     reactions?: ReactionResponse<StreamChatGenerics>[];
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/SimpleReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAYrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAsC1D,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6KAA6K;IAC7K,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,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;CACpD,CAAC;AAsGF,eAAO,MAAM,mBAAmB,+JAES,CAAC"}
+{"version":3,"file":"SimpleReactionsList.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/SimpleReactionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAsCzD,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6GAA6G;IAC7G,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1F,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,eAAe,CAAC;IAClC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACpD,CAAC;AA4FF,eAAO,MAAM,mBAAmB,+JAES,CAAC"}

package/dist/components/Reactions/SimpleReactionsList.js

@@ -1,11 +1,10 @@
-import { __assign, __rest } from "tslib";
-import React, { Suspense, useState } from 'react';
+import { __rest } from "tslib";
+import React, { useState } from 'react';
 import clsx from 'clsx';
 import { useChatContext } from '../../context/ChatContext';
-import { useEmojiContext } from '../../context/EmojiContext';
 import { useMessageContext } from '../../context/MessageContext';
-import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { useProcessReactions } from './hooks/useProcessReactions';
+import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { PopperTooltip } from '../Tooltip';
 // todo: merge with ReactionsList/ButtonWithTooltip
 // avoiding breaking change of replacing <span> with <button>
@@ -23,10 +22,9 @@ var WithTooltip = function (_a) {
 };
 var UnMemoizedSimpleReactionsList = function (props) {
     var propHandleReaction = props.handleReaction, rest = __rest(props, ["handleReaction"]);
-    var _a = useEmojiContext('SimpleReactionsList'), Emoji = _a.Emoji, emojiConfig = _a.emojiConfig;
     var contextHandleReaction = useMessageContext('SimpleReactionsList').handleReaction;
-    var _b = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _b.additionalEmojiProps, emojiData = _b.emojiData, getEmojiByReactionType = _b.getEmojiByReactionType, iHaveReactedWithReaction = _b.iHaveReactedWithReaction, latestReactions = _b.latestReactions, latestReactionTypes = _b.latestReactionTypes, supportedReactionsArePresent = _b.supportedReactionsArePresent, totalReactionCount = _b.totalReactionCount;
-    var _c = useState(undefined), tooltipReactionType = _c[0], setTooltipReactionType = _c[1];
+    var _a = useProcessReactions(rest), getEmojiByReactionType = _a.getEmojiByReactionType, iHaveReactedWithReaction = _a.iHaveReactedWithReaction, latestReactions = _a.latestReactions, latestReactionTypes = _a.latestReactionTypes, supportedReactionsArePresent = _a.supportedReactionsArePresent, totalReactionCount = _a.totalReactionCount;
+    var _b = useState(undefined), tooltipReactionType = _b[0], setTooltipReactionType = _b[1];
     var themeVersion = useChatContext('SimpleReactionsList').themeVersion;
     var handleReaction = propHandleReaction || contextHandleReaction;
     if (!latestReactions.length)
@@ -46,22 +44,21 @@ var UnMemoizedSimpleReactionsList = function (props) {
     };
     return (React.createElement("div", { className: 'str-chat__message-reactions-container' },
         React.createElement("ul", { className: 'str-chat__simple-reactions-list str-chat__message-reactions', "data-testid": 'simple-reaction-list', onMouseLeave: function () { return setTooltipReactionType(undefined); } },
-            latestReactionTypes.map(function (reactionType, i) {
+            latestReactionTypes.map(function (reactionType) {
                 var _a;
-                var emojiObject = getEmojiByReactionType(reactionType);
+                var ReactionOption = getEmojiByReactionType(reactionType);
                 var isOwnReaction = iHaveReactedWithReaction(reactionType);
-                var tooltipVisible = emojiObject && tooltipReactionType === (emojiObject === null || emojiObject === void 0 ? void 0 : emojiObject.id);
+                var tooltipVisible = tooltipReactionType === reactionType;
                 var tooltipContent = (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 : _a.join(', ');
-                return emojiObject ? (React.createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
+                return (ReactionOption && (React.createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
                         'str-chat__message-reaction-own': isOwnReaction,
-                    }), key: "".concat(emojiObject.id, "-").concat(i), onClick: function (event) { return handleReaction(reactionType, event); }, onKeyUp: function (event) { return handleReaction(reactionType, event); } },
+                    }), key: reactionType, onClick: function (event) { return handleReaction(reactionType, event); }, onKeyUp: function (event) { return handleReaction(reactionType, event); } },
                     React.createElement(WithTooltip, { onMouseEnter: function () { return setTooltipReactionType(reactionType); }, onMouseLeave: function () { return setTooltipReactionType(undefined); }, title: tooltipContent },
-                        React.createElement(Suspense, { fallback: null },
-                            React.createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 13 }, additionalEmojiProps))),
+                        React.createElement(ReactionOption.Component, null),
                         "\u00A0",
                         tooltipVisible && themeVersion === '1' && (React.createElement("div", { className: 'str-chat__simple-reactions-list-tooltip' },
                             React.createElement("div", { className: 'arrow' }),
-                            tooltipContent))))) : null;
+                            tooltipContent))))));
             }),
             React.createElement("li", { className: 'str-chat__simple-reactions-list-item--last-number' }, totalReactionCount))));
 };

package/dist/components/Reactions/SpriteImage.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type SpriteImageProps = {
+    columns: number;
+    position: [number, number];
+    rows: number;
+    spriteUrl: string;
+    fallback?: React.ReactNode;
+    height?: number;
+    width?: number;
+};
+export declare const SpriteImage: ({ columns, fallback, height, position, rows, spriteUrl, width, }: SpriteImageProps) => JSX.Element;
+//# sourceMappingURL=SpriteImage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpriteImage.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/SpriteImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,oBAAY,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,qEAQrB,gBAAgB,gBAgClB,CAAC"}

package/dist/components/Reactions/SpriteImage.js

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+import { getImageDimensions } from './utils/utils';
+export var SpriteImage = function (_a) {
+    var columns = _a.columns, fallback = _a.fallback, height = _a.height, position = _a.position, rows = _a.rows, spriteUrl = _a.spriteUrl, width = _a.width;
+    var _b = useState([0, 0]), _c = _b[0], spriteWidth = _c[0], spriteHeight = _c[1], setSpriteDimensions = _b[1];
+    useEffect(function () {
+        getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
+    }, [spriteUrl]);
+    var x = position[0], y = position[1];
+    var spriteItemWidth = spriteWidth / columns;
+    var spriteItemHeight = spriteHeight / rows;
+    var resizeRatio = 1;
+    if (!width && height)
+        resizeRatio = height / spriteItemHeight;
+    if (width && !height)
+        resizeRatio = width / spriteItemWidth;
+    if (resizeRatio === Infinity)
+        resizeRatio = 1;
+    if (!spriteHeight || !spriteWidth)
+        return React.createElement(React.Fragment, null, fallback);
+    return (React.createElement("div", { "data-testid": 'sprite-image', style: {
+            backgroundImage: "url('".concat(spriteUrl, "')"),
+            backgroundPosition: "".concat(x * (100 / (columns - 1)), "% ").concat(y * (100 / (rows - 1)), "%"),
+            backgroundSize: "".concat(columns * 100, "% ").concat(rows * 100, "%"),
+            height: height !== null && height !== void 0 ? height : spriteItemHeight * resizeRatio,
+            width: width !== null && width !== void 0 ? width : spriteItemWidth * resizeRatio,
+        } }));
+};

package/dist/components/Reactions/StreamEmoji.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SpriteImageProps } from './SpriteImage';
+import type { Readable } from '../../types/types';
+declare const StreamSpriteEmojiPositions: {
+    angry: number[];
+    haha: number[];
+    like: number[];
+    love: number[];
+    sad: number[];
+    wow: number[];
+};
+declare type StreamEmojiType = keyof typeof StreamSpriteEmojiPositions;
+export declare const StreamEmoji: ({ fallback, type, }: {
+    type: StreamEmojiType;
+    fallback?: React.ReactNode;
+}) => JSX.Element;
+export {};
+//# sourceMappingURL=StreamEmoji.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamEmoji.d.ts","sourceRoot":"","sources":["../../../src/components/Reactions/StreamEmoji.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAA,MAAM,0BAA0B;;;;;;;CAO/B,CAAC;AAEF,aAAK,eAAe,GAAG,MAAM,OAAO,0BAA0B,CAAC;AAI/D,eAAO,MAAM,WAAW;UAGJ,eAAe;;iBAYlC,CAAC"}

package/dist/components/Reactions/StreamEmoji.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SpriteImage } from './SpriteImage';
+var StreamSpriteEmojiPositions = {
+    angry: [1, 1],
+    haha: [1, 0],
+    like: [0, 0],
+    love: [1, 2],
+    sad: [0, 1],
+    wow: [0, 2],
+};
+var STREAM_SPRITE_URL = 'https://getstream.imgix.net/images/emoji-sprite.png';
+export var StreamEmoji = function (_a) {
+    var fallback = _a.fallback, type = _a.type;
+    var position = StreamSpriteEmojiPositions[type];
+    return (React.createElement(SpriteImage, { columns: 2, fallback: fallback, height: 18, position: position, rows: 3, spriteUrl: STREAM_SPRITE_URL }));
+};