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

package/dist/components/Emojis/EmojiPicker.js

@@ -0,0 +1,57 @@
+import { __assign } from "tslib";
+/* eslint-disable typescript-sort-keys/interface */
+import React, { useEffect, useState } from 'react';
+import { usePopper } from 'react-popper';
+import data from '@emoji-mart/data';
+import Picker from '@emoji-mart/react';
+import { useChatContext, useMessageInputContext, useTranslationContext, } from '../../context';
+import { EmojiIconLarge, EmojiPickerIcon } from '../MessageInput/icons';
+import { Tooltip } from '../Tooltip';
+var classNames = {
+    1: {
+        buttonClassName: 'str-chat__input-flat-emojiselect',
+        emojiPickerContainerClassName: undefined,
+        wrapperClassName: 'str-chat__emojiselect-wrapper',
+    },
+    2: {
+        buttonClassName: 'str-chat__emoji-picker-button',
+        emojiPickerContainerClassName: 'str-chat__message-textarea-emoji-picker-container',
+        wrapperClassName: 'str-chat__message-textarea-emoji-picker',
+    },
+};
+export var EmojiPicker = function (props) {
+    var _a, _b, _c;
+    var themeVersion = useChatContext('EmojiPicker').themeVersion;
+    var t = useTranslationContext('EmojiPicker').t;
+    var _d = useMessageInputContext('EmojiPicker'), insertText = _d.insertText, textareaRef = _d.textareaRef;
+    var _e = useState(false), displayPicker = _e[0], setDisplayPicker = _e[1];
+    var _f = useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
+    var _g = useState(null), popperElement = _g[0], setPopperElement = _g[1];
+    var _h = usePopper(referenceElement, popperElement, {
+        placement: themeVersion === '2' ? 'top-end' : 'top-start',
+    }), attributes = _h.attributes, styles = _h.styles;
+    var _j = classNames[themeVersion], buttonClassName = _j.buttonClassName, emojiPickerContainerClassName = _j.emojiPickerContainerClassName, wrapperClassName = _j.wrapperClassName;
+    var _k = props.ButtonIconComponent, ButtonIconComponent = _k === void 0 ? themeVersion === '2' ? EmojiPickerIcon : EmojiIconLarge : _k;
+    useEffect(function () {
+        if (!popperElement || !referenceElement)
+            return;
+        var handlePointerDown = function (e) {
+            var target = e.target;
+            if (popperElement.contains(target) || referenceElement.contains(target))
+                return;
+            setDisplayPicker(false);
+        };
+        window.addEventListener('pointerdown', handlePointerDown);
+        return function () { return window.removeEventListener('pointerdown', handlePointerDown); };
+    }, [referenceElement, popperElement]);
+    return (React.createElement("div", { className: (_a = props.wrapperClassName) !== null && _a !== void 0 ? _a : wrapperClassName },
+        displayPicker && (React.createElement("div", __assign({ className: (_b = props.emojiPickerContainerClassName) !== null && _b !== void 0 ? _b : emojiPickerContainerClassName, style: styles.popper }, attributes.popper, { ref: setPopperElement }),
+            React.createElement(Picker, { data: data, onEmojiSelect: function (e) {
+                    var _a;
+                    // @ts-ignore emoji-mart is missing types
+                    insertText(e.native);
+                    (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                } }))),
+        themeVersion === '1' && (React.createElement(Tooltip, null, displayPicker ? t('Close emoji picker') : t('Open emoji picker'))),
+        React.createElement("button", { "aria-label": 'Emoji picker', className: (_c = props.buttonClassName) !== null && _c !== void 0 ? _c : buttonClassName, onClick: function () { return setDisplayPicker(function (cv) { return !cv; }); }, ref: setReferenceElement, type: 'button' }, ButtonIconComponent && React.createElement(ButtonIconComponent, null))));
+};

package/dist/components/Emojis/index.cjs.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var icons = require('../../icons-0801b1e9.js');
+var React = require('react');
+var data = require('@emoji-mart/data');
+var Picker = require('@emoji-mart/react');
+require('react-dom');
+require('react-fast-compare');
+require('crypto');
+require('dayjs');
+require('dayjs/plugin/calendar');
+require('dayjs/plugin/localizedFormat');
+require('i18next');
+require('dayjs/plugin/updateLocale');
+require('dayjs/plugin/localeData');
+require('dayjs/plugin/relativeTime');
+require('dayjs/plugin/utc');
+require('dayjs/plugin/timezone');
+require('dayjs/locale/de');
+require('dayjs/locale/es');
+require('dayjs/locale/fr');
+require('dayjs/locale/hi');
+require('dayjs/locale/it');
+require('dayjs/locale/ja');
+require('dayjs/locale/ko');
+require('dayjs/locale/nl');
+require('dayjs/locale/pt');
+require('dayjs/locale/ru');
+require('dayjs/locale/tr');
+require('dayjs/locale/en');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var data__default = /*#__PURE__*/_interopDefaultLegacy(data);
+var Picker__default = /*#__PURE__*/_interopDefaultLegacy(Picker);
+
+var classNames = {
+    1: {
+        buttonClassName: 'str-chat__input-flat-emojiselect',
+        emojiPickerContainerClassName: undefined,
+        wrapperClassName: 'str-chat__emojiselect-wrapper',
+    },
+    2: {
+        buttonClassName: 'str-chat__emoji-picker-button',
+        emojiPickerContainerClassName: 'str-chat__message-textarea-emoji-picker-container',
+        wrapperClassName: 'str-chat__message-textarea-emoji-picker',
+    },
+};
+var EmojiPicker = function (props) {
+    var _a, _b, _c;
+    var themeVersion = icons.useChatContext('EmojiPicker').themeVersion;
+    var t = icons.useTranslationContext('EmojiPicker').t;
+    var _d = icons.useMessageInputContext('EmojiPicker'), insertText = _d.insertText, textareaRef = _d.textareaRef;
+    var _e = React.useState(false), displayPicker = _e[0], setDisplayPicker = _e[1];
+    var _f = React.useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
+    var _g = React.useState(null), popperElement = _g[0], setPopperElement = _g[1];
+    var _h = icons.usePopper(referenceElement, popperElement, {
+        placement: themeVersion === '2' ? 'top-end' : 'top-start',
+    }), attributes = _h.attributes, styles = _h.styles;
+    var _j = classNames[themeVersion], buttonClassName = _j.buttonClassName, emojiPickerContainerClassName = _j.emojiPickerContainerClassName, wrapperClassName = _j.wrapperClassName;
+    var _k = props.ButtonIconComponent, ButtonIconComponent = _k === void 0 ? themeVersion === '2' ? icons.EmojiPickerIcon : icons.EmojiIconLarge : _k;
+    React.useEffect(function () {
+        if (!popperElement || !referenceElement)
+            return;
+        var handlePointerDown = function (e) {
+            var target = e.target;
+            if (popperElement.contains(target) || referenceElement.contains(target))
+                return;
+            setDisplayPicker(false);
+        };
+        window.addEventListener('pointerdown', handlePointerDown);
+        return function () { return window.removeEventListener('pointerdown', handlePointerDown); };
+    }, [referenceElement, popperElement]);
+    return (React__default["default"].createElement("div", { className: (_a = props.wrapperClassName) !== null && _a !== void 0 ? _a : wrapperClassName },
+        displayPicker && (React__default["default"].createElement("div", icons.__assign({ className: (_b = props.emojiPickerContainerClassName) !== null && _b !== void 0 ? _b : emojiPickerContainerClassName, style: styles.popper }, attributes.popper, { ref: setPopperElement }),
+            React__default["default"].createElement(Picker__default["default"], { data: data__default["default"], onEmojiSelect: function (e) {
+                    var _a;
+                    // @ts-ignore emoji-mart is missing types
+                    insertText(e.native);
+                    (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                } }))),
+        themeVersion === '1' && (React__default["default"].createElement(icons.Tooltip, null, displayPicker ? t('Close emoji picker') : t('Open emoji picker'))),
+        React__default["default"].createElement("button", { "aria-label": 'Emoji picker', className: (_c = props.buttonClassName) !== null && _c !== void 0 ? _c : buttonClassName, onClick: function () { return setDisplayPicker(function (cv) { return !cv; }); }, ref: setReferenceElement, type: 'button' }, ButtonIconComponent && React__default["default"].createElement(ButtonIconComponent, null))));
+};
+
+exports.EmojiPicker = EmojiPicker;

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

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

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

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

package/dist/components/Emojis/index.js

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

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

@@ -1,5 +1,4 @@
 import React, { PropsWithChildren } from 'react';
-import type { EmojiData } from 'emoji-mart';
 import type { SuggestionCommand, SuggestionUser } from '../ChatAutoComplete/ChatAutoComplete';
 import type { CommandItemProps } from '../CommandItem/CommandItem';
 import type { EmoticonItemProps } from '../EmoticonItem/EmoticonItem';
@@ -14,11 +13,11 @@ export declare type AutocompleteMinimalData = {
     name: string;
 });
 export declare type CommandTriggerSetting<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TriggerSetting<CommandItemProps, SuggestionCommand<StreamChatGenerics>>;
-export declare type EmojiTriggerSetting = TriggerSetting<EmoticonItemProps, EmojiData>;
+export declare type EmojiTriggerSetting = TriggerSetting<EmoticonItemProps>;
 export declare type UserTriggerSetting<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TriggerSetting<UserItemProps, SuggestionUser<StreamChatGenerics>>;
 export declare type TriggerSetting<T extends UnknownType = UnknownType, U = UnknownType> = {
     component: string | React.ComponentType<T>;
-    dataProvider: (query: string, text: string, onReady: (data: (U & AutocompleteMinimalData)[], token: string) => void) => U[] | Promise<void> | void;
+    dataProvider: (query: string, text: string, onReady: (data: (U & AutocompleteMinimalData)[], token: string) => void) => U[] | PromiseLike<void> | void;
     output: (entity: U) => {
         caretPosition: 'start' | 'end' | 'next' | number;
         text: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultTriggerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/DefaultTriggerProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAWjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE/F,oBAAY,uBAAuB,GAAG;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAExC,oBAAY,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,cAAc,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAE5E,oBAAY,mBAAmB,GAAG,cAAc,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;AAE/E,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,cAAc,CAAC,aAAa,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAEtE,oBAAY,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,CAAC,GAAG,WAAW,IAAI;IACjF,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3C,YAAY,EAAE,CACZ,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,uBAAuB,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,KACpE,CAAC,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,CACN,MAAM,EAAE,CAAC,KAEP;QACE,aAAa,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;QACjD,IAAI,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,GACD,MAAM,GACN,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,oBAAY,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,CAAC,SAAS,aAAa,GAAG,aAAa,IAErC;KACG,GAAG,IAAI,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3E,GACD;IACE,GAAG,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;IAC/C,GAAG,EAAE,mBAAmB,CAAC;IACzB,GAAG,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;CAC7C,CAAC;AAEN,eAAO,MAAM,sBAAsB,6IAKhC,kBAAkB,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,gBAqB5C,CAAC"}
+{"version":3,"file":"DefaultTriggerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/DefaultTriggerProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAWjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE/F,oBAAY,uBAAuB,GAAG;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAExC,oBAAY,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,cAAc,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAE5E,oBAAY,mBAAmB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEpE,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,cAAc,CAAC,aAAa,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAEtE,oBAAY,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,CAAC,GAAG,WAAW,IAAI;IACjF,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3C,YAAY,EAAE,CACZ,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,uBAAuB,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,KACpE,CAAC,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,CACN,MAAM,EAAE,CAAC,KAEP;QACE,aAAa,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;QACjD,IAAI,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,GACD,MAAM,GACN,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,oBAAY,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,CAAC,SAAS,aAAa,GAAG,aAAa,IAErC;KACG,GAAG,IAAI,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3E,GACD;IACE,GAAG,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;IAC/C,GAAG,EAAE,mBAAmB,CAAC;IACzB,GAAG,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;CAC7C,CAAC;AAEN,eAAO,MAAM,sBAAsB,6IAKhC,kBAAkB,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,gBAqB5C,CAAC"}

package/dist/components/MessageInput/DefaultTriggerProvider.js

@@ -9,7 +9,7 @@ export var DefaultTriggerProvider = function (_a) {
     var currentValue = useMessageInputContext('DefaultTriggerProvider');
     var defaultAutocompleteTriggers = {
         '/': useCommandTrigger(),
-        ':': useEmojiTrigger(currentValue.emojiIndex),
+        ':': useEmojiTrigger(currentValue.emojiSearchIndex),
         '@': useUserTrigger({
             disableMentions: currentValue.disableMentions,
             mentionAllAppUsers: currentValue.mentionAllAppUsers,

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

@@ -1 +1 @@
-{"version":3,"file":"EditMessageForm.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/EditMessageForm.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF,eAAO,MAAM,eAAe,8IA8G3B,CAAC"}
+{"version":3,"file":"EditMessageForm.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/EditMessageForm.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAElF,eAAO,MAAM,eAAe,8IAoG3B,CAAC"}

package/dist/components/MessageInput/EditMessageForm.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { FileUploadButton, ImageDropzone } from '../ReactFileUtilities';
-import { EmojiPicker } from './EmojiPicker';
-import { EmojiIconSmall as DefaultEmojiIcon, FileUploadIcon as DefaultFileUploadIcon, } from './icons';
+import { FileUploadIcon as DefaultFileUploadIcon } from './icons';
 import { UploadsPreview } from './UploadsPreview';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -10,8 +9,8 @@ import { useChannelStateContext, useChatContext, useComponentContext, useMessage
 export var EditMessageForm = function () {
     var _a = useChannelStateContext('EditMessageForm'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads;
     var t = useTranslationContext('EditMessageForm').t;
-    var _b = useMessageInputContext('EditMessageForm'), clearEditingState = _b.clearEditingState, closeEmojiPicker = _b.closeEmojiPicker, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext('EditMessageForm'), _d = _c.EmojiIcon, EmojiIcon = _d === void 0 ? DefaultEmojiIcon : _d, _e = _c.FileUploadIcon, FileUploadIcon = _e === void 0 ? DefaultFileUploadIcon : _e;
+    var _b = useMessageInputContext('EditMessageForm'), clearEditingState = _b.clearEditingState, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, uploadNewFiles = _b.uploadNewFiles;
+    var _c = useComponentContext('EditMessageForm'), _d = _c.FileUploadIcon, FileUploadIcon = _d === void 0 ? DefaultFileUploadIcon : _d, EmojiPicker = _c.EmojiPicker;
     var themeVersion = useChatContext('EditMessageForm').themeVersion;
     useEffect(function () {
         var onKeyDown = function (event) {
@@ -31,12 +30,10 @@ export var EditMessageForm = function () {
         React.createElement(ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
             React.createElement("form", { onSubmit: handleSubmit },
                 isUploadEnabled && React.createElement(UploadsPreview, null),
-                React.createElement(EmojiPicker, { small: true }),
                 React.createElement(ChatAutoComplete, null),
                 React.createElement("div", { className: 'str-chat__message-team-form-footer' },
                     React.createElement("div", { className: 'str-chat__edit-message-form-options' },
-                        React.createElement("button", { "aria-label": 'Open Emoji Picker', className: 'str-chat__input-emojiselect', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker },
-                            React.createElement(EmojiIcon, null)),
+                        EmojiPicker && React.createElement(EmojiPicker, null),
                         isUploadEnabled && (React.createElement("div", { className: 'str-chat__fileupload-wrapper', "data-testid": 'fileinput' },
                             React.createElement(Tooltip, null, maxFilesLeft
                                 ? t('Attach files')

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

@@ -1,19 +1,29 @@
 import React from 'react';
-import type { Message } from 'stream-chat';
 import { StreamMessage } from '../../context/ChannelStateContext';
-import type { Channel, SendFileAPIResponse } from 'stream-chat';
+import { ComponentContextValue } from '../../context/ComponentContext';
+import type { Channel, Message, SendFileAPIResponse } from 'stream-chat';
 import type { SearchQueryParams } from '../ChannelSearch/hooks/useChannelSearch';
 import type { MessageToSend } from '../../context/ChannelActionContext';
-import type { CustomTrigger, DefaultStreamChatGenerics, SendMessageOptions } from '../../types/types';
+import type { CustomTrigger, DefaultStreamChatGenerics, SendMessageOptions, UnknownType } from '../../types/types';
 import type { URLEnrichmentConfig } from './hooks/useLinkPreviews';
 import type { FileUpload, ImageUpload } from './types';
+export declare type EmojiSearchIndexResult = {
+    id: string;
+    name: string;
+    skins: Array<{
+        native: string;
+    }>;
+    emoticons?: Array<string>;
+    native?: string;
+};
+export interface EmojiSearchIndex<T extends UnknownType = UnknownType> {
+    search: (query: string) => PromiseLike<Array<EmojiSearchIndexResult & T>> | Array<EmojiSearchIndexResult & T> | null;
+}
 export declare type MessageInputProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
     /** Additional props to be passed to the underlying `AutoCompleteTextarea` component, [available props](https://www.npmjs.com/package/react-textarea-autosize) */
     additionalTextareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
     /** Function to clear the editing state while editing a message */
     clearEditingState?: () => void;
-    /** If true, picking an emoji from the `EmojiPicker` component will close the picker */
-    closeEmojiPickerOnClick?: boolean;
     /** If true, disables the text input */
     disabled?: boolean;
     /** If true, the suggestion list will not display and autocomplete @mentions. Default: false. */
@@ -22,6 +32,8 @@ export declare type MessageInputProps<StreamChatGenerics extends DefaultStreamCh
     doFileUploadRequest?: (file: FileUpload['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
     /** Function to override the default image upload request */
     doImageUploadRequest?: (file: ImageUpload['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
+    /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
+    emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
     /** Custom error handler function to be called with a file/image upload fails */
     errorHandler?: (error: Error, type: string, file: (FileUpload | ImageUpload)['file'] & {
         id?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/MessageInput/MessageInput.js

@@ -9,9 +9,11 @@ import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 var MessageInputProvider = function (props) {
+    var _a;
     var cooldownTimerState = useCooldownTimer();
     var messageInputState = useMessageInputState(props);
-    var messageInputContextValue = useCreateMessageInputContext(__assign(__assign(__assign({}, cooldownTimerState), messageInputState), props));
+    var emojiSearchIndex = useComponentContext('MessageInput').emojiSearchIndex;
+    var messageInputContextValue = useCreateMessageInputContext(__assign(__assign(__assign(__assign({}, cooldownTimerState), messageInputState), props), { emojiSearchIndex: (_a = props.emojiSearchIndex) !== null && _a !== void 0 ? _a : emojiSearchIndex }));
     return (React.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children));
 };
 var UnMemoizedMessageInput = function (props) {

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":"AAkCA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,eAAO,MAAM,gBAAgB,qGA8B5B,CAAC"}
+{"version":3,"file":"MessageInputFlat.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputFlat.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,eAAO,MAAM,gBAAgB,qGA8B5B,CAAC"}

package/dist/components/MessageInput/MessageInputFlat.js

@@ -1,12 +1,10 @@
 import { __assign } from "tslib";
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { FileUploadButton, ImageDropzone, UploadButton } from '../ReactFileUtilities';
 import clsx from 'clsx';
-import { usePopper } from 'react-popper';
 import { useDropzone } from 'react-dropzone';
 import { nanoid } from 'nanoid';
-import { EmojiPicker } from './EmojiPicker';
-import { EmojiIconLarge as DefaultEmojiIcon, EmojiPickerIcon as DefaultEmojiPickerIcon, FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, UploadIcon as DefaultUploadIcon, } from './icons';
+import { FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, UploadIcon as DefaultUploadIcon, } from './icons';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
 import { AttachmentPreviewList as DefaultAttachmentPreviewList } from './AttachmentPreviewList';
 import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
@@ -47,8 +45,8 @@ export var MessageInputFlat = function () {
 var MessageInputV1 = function () {
     var _a = useChannelStateContext('MessageInputFlat'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
     var t = useTranslationContext('MessageInputFlat').t;
-    var _b = useMessageInputContext('MessageInputFlat'), closeEmojiPicker = _b.closeEmojiPicker, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, hideSendButton = _b.hideSendButton, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer = _d === void 0 ? DefaultCooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? DefaultEmojiIcon : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? DefaultFileUploadIcon : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview = _g === void 0 ? DefaultQuotedMessagePreview : _g, _h = _c.SendButton, SendButton = _h === void 0 ? DefaultSendButton : _h, _j = _c.AttachmentPreviewList, AttachmentPreviewList = _j === void 0 ? UploadsPreview : _j;
+    var _b = useMessageInputContext('MessageInputFlat'), cooldownRemaining = _b.cooldownRemaining, handleSubmit = _b.handleSubmit, hideSendButton = _b.hideSendButton, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
+    var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer = _d === void 0 ? DefaultCooldownTimer : _d, _e = _c.FileUploadIcon, FileUploadIcon = _e === void 0 ? DefaultFileUploadIcon : _e, _f = _c.QuotedMessagePreview, QuotedMessagePreview = _f === void 0 ? DefaultQuotedMessagePreview : _f, _g = _c.SendButton, SendButton = _g === void 0 ? DefaultSendButton : _g, _h = _c.AttachmentPreviewList, AttachmentPreviewList = _h === void 0 ? UploadsPreview : _h, EmojiPicker = _c.EmojiPicker;
     return (React.createElement("div", { className: clsx('str-chat__input-flat', 'str-chat__message-input', {
             'str-chat__input-flat--send-button-active': !!SendButton,
             'str-chat__input-flat-has-attachments': numberOfUploads,
@@ -59,13 +57,9 @@ var MessageInputV1 = function () {
             React.createElement("div", { className: 'str-chat__input-flat-wrapper' },
                 isUploadEnabled && React.createElement(AttachmentPreviewList, null),
                 React.createElement("div", { className: 'str-chat__input-flat--textarea-wrapper' },
-                    React.createElement("div", { className: 'str-chat__emojiselect-wrapper' },
-                        React.createElement(Tooltip, null, emojiPickerIsOpen
-                            ? t('Close emoji picker')
-                            : t('Open emoji picker')),
-                        React.createElement("button", { "aria-label": 'Emoji picker', className: 'str-chat__input-flat-emojiselect', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker }, cooldownRemaining ? (React.createElement("div", { className: 'str-chat__input-flat-cooldown' },
-                            React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining }))) : (React.createElement(EmojiIcon, null)))),
-                    React.createElement(EmojiPicker, null),
+                    EmojiPicker && React.createElement(EmojiPicker, null),
+                    !!cooldownRemaining && (React.createElement("div", { className: 'str-chat__input-flat-cooldown' },
+                        React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining }))),
                     React.createElement(ChatAutoComplete, null),
                     isUploadEnabled && !cooldownRemaining && (React.createElement("div", { className: 'str-chat__fileupload-wrapper', "data-testid": 'fileinput' },
                         React.createElement(Tooltip, null, maxFilesLeft
@@ -79,13 +73,8 @@ var MessageInputV1 = function () {
 var MessageInputV2 = function () {
     var _a = useChannelStateContext('MessageInputV2'), _b = _a.acceptedFiles, acceptedFiles = _b === void 0 ? [] : _b, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
     var t = useTranslationContext('MessageInputV2').t;
-    var _c = useMessageInputContext('MessageInputV2'), closeEmojiPicker = _c.closeEmojiPicker, cooldownRemaining = _c.cooldownRemaining, emojiPickerIsOpen = _c.emojiPickerIsOpen, findAndEnqueueURLsToEnrich = _c.findAndEnqueueURLsToEnrich, handleSubmit = _c.handleSubmit, hideSendButton = _c.hideSendButton, isUploadEnabled = _c.isUploadEnabled, linkPreviews = _c.linkPreviews, maxFilesLeft = _c.maxFilesLeft, message = _c.message, numberOfUploads = _c.numberOfUploads, openEmojiPicker = _c.openEmojiPicker, setCooldownRemaining = _c.setCooldownRemaining, text = _c.text, uploadNewFiles = _c.uploadNewFiles;
-    var _d = useComponentContext('MessageInputV2'), _e = _d.AttachmentPreviewList, AttachmentPreviewList = _e === void 0 ? DefaultAttachmentPreviewList : _e, _f = _d.CooldownTimer, CooldownTimer = _f === void 0 ? DefaultCooldownTimer : _f, _g = _d.EmojiIcon, EmojiIcon = _g === void 0 ? DefaultEmojiPickerIcon : _g, _h = _d.FileUploadIcon, FileUploadIcon = _h === void 0 ? DefaultUploadIcon : _h, _j = _d.LinkPreviewList, LinkPreviewList = _j === void 0 ? DefaultLinkPreviewList : _j, _k = _d.QuotedMessagePreview, QuotedMessagePreview = _k === void 0 ? DefaultQuotedMessagePreview : _k, _l = _d.SendButton, SendButton = _l === void 0 ? DefaultSendButton : _l;
-    var _m = useState(null), referenceElement = _m[0], setReferenceElement = _m[1];
-    var _o = useState(null), popperElement = _o[0], setPopperElement = _o[1];
-    var _p = usePopper(referenceElement, popperElement, {
-        placement: 'top-end',
-    }), attributes = _p.attributes, styles = _p.styles;
+    var _c = useMessageInputContext('MessageInputV2'), cooldownRemaining = _c.cooldownRemaining, findAndEnqueueURLsToEnrich = _c.findAndEnqueueURLsToEnrich, handleSubmit = _c.handleSubmit, hideSendButton = _c.hideSendButton, isUploadEnabled = _c.isUploadEnabled, linkPreviews = _c.linkPreviews, maxFilesLeft = _c.maxFilesLeft, message = _c.message, numberOfUploads = _c.numberOfUploads, setCooldownRemaining = _c.setCooldownRemaining, text = _c.text, uploadNewFiles = _c.uploadNewFiles;
+    var _d = useComponentContext('MessageInputV2'), _e = _d.AttachmentPreviewList, AttachmentPreviewList = _e === void 0 ? DefaultAttachmentPreviewList : _e, _f = _d.CooldownTimer, CooldownTimer = _f === void 0 ? DefaultCooldownTimer : _f, _g = _d.FileUploadIcon, FileUploadIcon = _g === void 0 ? DefaultUploadIcon : _g, _h = _d.LinkPreviewList, LinkPreviewList = _h === void 0 ? DefaultLinkPreviewList : _h, _j = _d.QuotedMessagePreview, QuotedMessagePreview = _j === void 0 ? DefaultQuotedMessagePreview : _j, _k = _d.SendButton, SendButton = _k === void 0 ? DefaultSendButton : _k, EmojiPicker = _d.EmojiPicker;
     var id = useMemo(function () { return nanoid(); }, []);
     var accept = useMemo(function () {
         return acceptedFiles.reduce(function (mediaTypeMap, mediaType) {
@@ -94,13 +83,13 @@ var MessageInputV2 = function () {
             return mediaTypeMap;
         }, {});
     }, [acceptedFiles]);
-    var _q = useDropzone({
+    var _l = useDropzone({
         accept: accept,
         disabled: !isUploadEnabled || maxFilesLeft === 0,
         multiple: multipleUploads,
         noClick: true,
         onDrop: uploadNewFiles,
-    }), getRootProps = _q.getRootProps, isDragActive = _q.isDragActive, isDragReject = _q.isDragReject;
+    }), getRootProps = _l.getRootProps, isDragActive = _l.isDragActive, isDragReject = _l.isDragReject;
     // TODO: "!message" condition is a temporary fix for shared
     // state when editing a message (fix shared state issue)
     var displayQuotedMessage = !message && quotedMessage && !quotedMessage.parent_id;
@@ -123,10 +112,6 @@ var MessageInputV2 = function () {
                     isUploadEnabled && !!numberOfUploads && React.createElement(AttachmentPreviewList, null),
                     React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },
                         React.createElement(ChatAutoComplete, null),
-                        React.createElement("div", { className: 'str-chat__message-textarea-emoji-picker' },
-                            emojiPickerIsOpen && (React.createElement("div", __assign({ className: 'str-chat__message-textarea-emoji-picker-container', style: styles.popper }, attributes.popper, { ref: setPopperElement }),
-                                React.createElement(EmojiPicker, null))),
-                            React.createElement("button", { "aria-label": 'Emoji picker', className: 'str-chat__emoji-picker-button', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker, ref: setReferenceElement, type: 'button' },
-                                React.createElement(EmojiIcon, null))))),
+                        EmojiPicker && React.createElement(EmojiPicker, null))),
                 !hideSendButton && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(SendButton, { disabled: !numberOfUploads && !text.length, sendMessage: handleSubmit }))))))));
 };

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":"AAwBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGlF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,8IA6H7B,CAAC"}
+{"version":3,"file":"MessageInputSmall.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputSmall.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGlF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,8IAkH7B,CAAC"}

package/dist/components/MessageInput/MessageInputSmall.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { FileUploadButton, ImageDropzone } from '../ReactFileUtilities';
-import { EmojiPicker } from './EmojiPicker';
-import { EmojiIconSmall as DefaultEmojiIcon, FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, } from './icons';
+import { FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, EmojiIconSmall, } from './icons';
 import { UploadsPreview } from './UploadsPreview';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -27,8 +26,8 @@ export var MessageInputSmall = function () {
     var setQuotedMessage = useChannelActionContext('MessageInputSmall').setQuotedMessage;
     var t = useTranslationContext('MessageInputSmall').t;
     var channel = useChatContext('MessageInputSmall').channel;
-    var _b = useMessageInputContext('MessageInputSmall'), closeEmojiPicker = _b.closeEmojiPicker, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, hideSendButton = _b.hideSendButton, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext('MessageInputSmall'), _d = _c.CooldownTimer, CooldownTimer = _d === void 0 ? DefaultCooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? DefaultEmojiIcon : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? DefaultFileUploadIcon : _f, _g = _c.SendButton, SendButton = _g === void 0 ? DefaultSendButton : _g, _h = _c.QuotedMessagePreview, QuotedMessagePreview = _h === void 0 ? DefaultQuotedMessagePreview : _h;
+    var _b = useMessageInputContext('MessageInputSmall'), cooldownRemaining = _b.cooldownRemaining, handleSubmit = _b.handleSubmit, hideSendButton = _b.hideSendButton, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
+    var _c = useComponentContext('MessageInputSmall'), _d = _c.CooldownTimer, CooldownTimer = _d === void 0 ? DefaultCooldownTimer : _d, _e = _c.FileUploadIcon, FileUploadIcon = _e === void 0 ? DefaultFileUploadIcon : _e, _f = _c.SendButton, SendButton = _f === void 0 ? DefaultSendButton : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview = _g === void 0 ? DefaultQuotedMessagePreview : _g, EmojiPicker = _c.EmojiPicker;
     useEffect(function () {
         var handleQuotedMessageUpdate = function (e) {
             var _a;
@@ -63,12 +62,10 @@ export var MessageInputSmall = function () {
                             React.createElement(FileUploadButton, { accepts: acceptedFiles, disabled: maxFilesLeft === 0, handleFiles: uploadNewFiles, multiple: multipleUploads },
                                 React.createElement("span", { className: 'str-chat__small-message-input-fileupload' },
                                     React.createElement(FileUploadIcon, null))))),
-                        React.createElement("div", { className: 'str-chat__emojiselect-wrapper' },
-                            React.createElement(Tooltip, null, emojiPickerIsOpen
-                                ? t('Close emoji picker')
-                                : t('Open emoji picker')),
-                            React.createElement("button", { "aria-label": 'Emoji picker', className: 'str-chat__small-message-input-emojiselect', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker },
-                                React.createElement(EmojiIcon, null))))),
-                    React.createElement(EmojiPicker, { small: true })),
+                        EmojiPicker && (React.createElement(EmojiPicker
+                        // @ts-expect-error
+                        , { 
+                            // @ts-expect-error
+                            buttonClassName: 'str-chat__small-message-input-emojiselect', ButtonIconComponent: EmojiIconSmall }))))),
                 !(cooldownRemaining || hideSendButton) && React.createElement(SendButton, { sendMessage: handleSubmit })))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useCreateMessageInputContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useCreateMessageInputContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,4BAA4B,wOA+KxC,CAAC"}
+{"version":3,"file":"useCreateMessageInputContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useCreateMessageInputContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,4BAA4B,wOAmKxC,CAAC"}

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 export var useCreateMessageInputContext = function (value) {
-    var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, cancelURLEnrichment = value.cancelURLEnrichment, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeEmojiPicker = value.closeEmojiPicker, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, dismissLinkPreview = value.dismissLinkPreview, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiIndex = value.emojiIndex, emojiPickerIsOpen = value.emojiPickerIsOpen, emojiPickerRef = value.emojiPickerRef, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, findAndEnqueueURLsToEnrich = value.findAndEnqueueURLsToEnrich, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleEmojiKeyDown = value.handleEmojiKeyDown, handleSubmit = value.handleSubmit, hideSendButton = value.hideSendButton, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, linkPreviews = value.linkPreviews, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectEmoji = value.onSelectEmoji, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openEmojiPicker = value.openEmojiPicker, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, shouldSubmit = value.shouldSubmit, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
+    var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, cancelURLEnrichment = value.cancelURLEnrichment, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, dismissLinkPreview = value.dismissLinkPreview, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiSearchIndex = value.emojiSearchIndex, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, findAndEnqueueURLsToEnrich = value.findAndEnqueueURLsToEnrich, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleSubmit = value.handleSubmit, hideSendButton = value.hideSendButton, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, linkPreviews = value.linkPreviews, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, shouldSubmit = value.shouldSubmit, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
     var editing = message === null || message === void 0 ? void 0 : message.editing;
     var fileUploadsValue = Object.entries(fileUploads)
         // eslint-disable-next-line
@@ -26,7 +26,6 @@ export var useCreateMessageInputContext = function (value) {
         cancelURLEnrichment: cancelURLEnrichment,
         clearEditingState: clearEditingState,
         closeCommandsList: closeCommandsList,
-        closeEmojiPicker: closeEmojiPicker,
         closeMentionsList: closeMentionsList,
         cooldownInterval: cooldownInterval,
         cooldownRemaining: cooldownRemaining,
@@ -35,9 +34,7 @@ export var useCreateMessageInputContext = function (value) {
         dismissLinkPreview: dismissLinkPreview,
         doFileUploadRequest: doFileUploadRequest,
         doImageUploadRequest: doImageUploadRequest,
-        emojiIndex: emojiIndex,
-        emojiPickerIsOpen: emojiPickerIsOpen,
-        emojiPickerRef: emojiPickerRef,
+        emojiSearchIndex: emojiSearchIndex,
         errorHandler: errorHandler,
         fileOrder: fileOrder,
         fileUploads: fileUploads,
@@ -45,7 +42,6 @@ export var useCreateMessageInputContext = function (value) {
         focus: focus,
         grow: grow,
         handleChange: handleChange,
-        handleEmojiKeyDown: handleEmojiKeyDown,
         handleSubmit: handleSubmit,
         hideSendButton: hideSendButton,
         imageOrder: imageOrder,
@@ -62,10 +58,8 @@ export var useCreateMessageInputContext = function (value) {
         noFiles: noFiles,
         numberOfUploads: numberOfUploads,
         onPaste: onPaste,
-        onSelectEmoji: onSelectEmoji,
         onSelectUser: onSelectUser,
         openCommandsList: openCommandsList,
-        openEmojiPicker: openEmojiPicker,
         openMentionsList: openMentionsList,
         overrideSubmitHandler: overrideSubmitHandler,
         parent: parent,
@@ -89,7 +83,7 @@ export var useCreateMessageInputContext = function (value) {
         cooldownRemaining,
         dismissLinkPreview,
         editing,
-        emojiPickerIsOpen,
+        emojiSearchIndex,
         fileUploadsValue,
         findAndEnqueueURLsToEnrich,
         hideSendButton,

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

@@ -1,4 +1,4 @@
-import type { NimbleEmojiIndex } from 'emoji-mart';
 import type { EmojiTriggerSetting } from '../DefaultTriggerProvider';
-export declare const useEmojiTrigger: (emojiIndex?: NimbleEmojiIndex) => EmojiTriggerSetting;
+import type { EmojiSearchIndex } from '../MessageInput';
+export declare const useEmojiTrigger: <T extends EmojiSearchIndex<import("../../../types/types").UnknownType>>(emojiSearchIndex?: T | undefined) => EmojiTriggerSetting;
 //# sourceMappingURL=useEmojiTrigger.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useEmojiTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useEmojiTrigger.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,eAAO,MAAM,eAAe,gBAAiB,gBAAgB,KAAG,mBAsB/D,CAAC"}
+{"version":3,"file":"useEmojiTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useEmojiTrigger.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,eAAO,MAAM,eAAe,gHAEzB,mBAiCF,CAAC"}

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

@@ -1,20 +1,40 @@
+import { __awaiter, __generator } from "tslib";
 import { EmoticonItem } from '../../EmoticonItem/EmoticonItem';
 import { useChatContext } from '../../../context/ChatContext';
-export var useEmojiTrigger = function (emojiIndex) {
+export var useEmojiTrigger = function (emojiSearchIndex) {
     var themeVersion = useChatContext('useEmojiTrigger').themeVersion;
     return {
         component: EmoticonItem,
-        dataProvider: function (query, _, onReady) {
-            if (query.length === 0 || query.charAt(0).match(/[^a-zA-Z0-9+-]/)) {
-                return [];
-            }
-            var emojis = (emojiIndex === null || emojiIndex === void 0 ? void 0 : emojiIndex.search(query)) || [];
-            // emojiIndex.search sometimes returns undefined values, so filter those out first
-            var result = emojis.filter(Boolean).slice(0, themeVersion === '2' ? 7 : 10);
-            if (onReady)
-                onReady(result, query);
-            return result;
-        },
+        dataProvider: function (query, _, onReady) { return __awaiter(void 0, void 0, void 0, function () {
+            var emojis, result;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (query.length === 0 || query.charAt(0).match(/[^a-zA-Z0-9+-]/)) {
+                            return [2 /*return*/, onReady([], query)];
+                        }
+                        return [4 /*yield*/, (emojiSearchIndex === null || emojiSearchIndex === void 0 ? void 0 : emojiSearchIndex.search(query))];
+                    case 1:
+                        emojis = (_a = (_b.sent())) !== null && _a !== void 0 ? _a : [];
+                        result = emojis
+                            .filter(Boolean)
+                            .slice(0, themeVersion === '2' ? 7 : 10)
+                            .map(function (_a) {
+                            var id = _a.id, name = _a.name, native = _a.native, _b = _a.skins, skins = _b === void 0 ? [] : _b;
+                            var firstSkin = skins[0];
+                            return {
+                                id: id,
+                                name: name,
+                                native: native !== null && native !== void 0 ? native : firstSkin.native,
+                            };
+                        });
+                        if (onReady)
+                            onReady(result, query);
+                        return [2 /*return*/];
+                }
+            });
+        }); },
         output: function (entity) { return ({
             caretPosition: 'next',
             key: entity.id,