stream-chat-react 10.14.0 → 11.0.0-rc.1

package/dist/index.cjs.js

@@ -55,7 +55,6 @@ var streamChat = require('stream-chat');
 var deepequal = require('react-fast-compare');
 var ReactDOM = require('react-dom');
 var reactVirtuoso = require('react-virtuoso');
-var nimbleEmoji = require('emoji-mart/dist/components/emoji/nimble-emoji');
 var nimblePicker = require('emoji-mart/dist/components/picker/nimble-picker');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -117,7 +116,6 @@ var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce$1);
 var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var deepequal__default = /*#__PURE__*/_interopDefaultLegacy(deepequal);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-var nimbleEmoji__default = /*#__PURE__*/_interopDefaultLegacy(nimbleEmoji);
 var nimblePicker__default = /*#__PURE__*/_interopDefaultLegacy(nimblePicker);
 
 /******************************************************************************
@@ -506,14 +504,12 @@ var withComponentContext = function (Component) {
     return WithComponentContextComponent;
 };
 
-var DefaultEmoji$1 = React__default["default"].lazy(function () { return Promise.resolve().then(function () { return DefaultEmoji; }); });
 var DefaultEmojiPicker$1 = React__default["default"].lazy(function () { return Promise.resolve().then(function () { return DefaultEmojiPicker; }); });
 var EmojiContext = React__default["default"].createContext(undefined);
 var EmojiProvider = function (_a) {
     var children = _a.children, value = _a.value;
-    var _b = value.Emoji, Emoji = _b === void 0 ? DefaultEmoji$1 : _b, emojiConfig = value.emojiConfig, _c = value.EmojiIndex, EmojiIndex = _c === void 0 ? DefaultEmojiIndex__default["default"] : _c, _d = value.EmojiPicker, EmojiPicker = _d === void 0 ? DefaultEmojiPicker$1 : _d;
+    var emojiConfig = value.emojiConfig, _b = value.EmojiIndex, EmojiIndex = _b === void 0 ? DefaultEmojiIndex__default["default"] : _b, _c = value.EmojiPicker, EmojiPicker = _c === void 0 ? DefaultEmojiPicker$1 : _c;
     var emojiContextValue = {
-        Emoji: Emoji,
         emojiConfig: emojiConfig,
         EmojiIndex: EmojiIndex,
         EmojiPicker: EmojiPicker,
@@ -27387,8 +27383,6 @@ var defaultMinimalEmojis = [
     __assign(__assign({ colons: ':pensive:', id: 'sad', name: 'sad', sheet_x: 0, sheet_y: 1 }, commonEmoji), emojiSetDef),
     __assign(__assign({ colons: ':angry:', id: 'angry', name: 'angry', sheet_x: 1, sheet_y: 1 }, commonEmoji), emojiSetDef),
 ];
-// use this only for small lists like in ReactionSelector
-var getStrippedEmojiData = function (data) { return (__assign(__assign({}, data), { emojis: {} })); };
 
 var useCreateChannelStateContext = function (value) {
     var _a;
@@ -32318,24 +32312,32 @@ var isMutableRef = function (ref) {
     }
     return false;
 };
+var getImageDimensions = function (source) {
+    return new Promise(function (resolve, reject) {
+        var image = new Image();
+        image.addEventListener('load', function () {
+            resolve([image.width, image.height]);
+        }, { once: true });
+        image.addEventListener('error', function () { return reject("Couldn't load image from ".concat(source)); }, {
+            once: true,
+        });
+        image.src = source;
+    });
+};
 
 var UnMemoizedReactionSelector = React__default["default"].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$1 = propAvatar || contextAvatar || Avatar;
     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 = React.useMemo(function () { return (reactionsAreCustom ? fullEmojiData : getStrippedEmojiData(fullEmojiData)); }, [fullEmojiData, reactionsAreCustom]);
-    var _h = React.useState(null), tooltipReactionType = _h[0], setTooltipReactionType = _h[1];
-    var _j = React.useState(null), tooltipPositions = _j[0], setTooltipPositions = _j[1];
+    var _f = React.useState(null), tooltipReactionType = _f[0], setTooltipReactionType = _f[1];
+    var _g = React.useState(null), tooltipPositions = _g[0], setTooltipPositions = _g[1];
     var targetRef = React.useRef(null);
     var tooltipRef = React.useRef(null);
     var showTooltip = React.useCallback(function (event, reactionType) {
@@ -32392,17 +32394,17 @@ var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (
             } },
             React__default["default"].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__default["default"].createElement("span", { className: 'latest-user-username', key: "key-".concat(i, "-").concat(user) }, "".concat(user).concat(i < users.length - 1 ? ', ' : ''))); }))),
-        React__default["default"].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__default["default"].createElement("li", { key: "item-".concat(reactionOption.id) },
-                React__default["default"].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__default["default"].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__default["default"].createElement(Avatar$1, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React__default["default"].createElement("div", { className: 'latest-user-not-found' })))),
-                    React__default["default"].createElement(React.Suspense, { fallback: null },
-                        React__default["default"].createElement("span", { className: 'str-chat__message-reaction-emoji' },
-                            React__default["default"].createElement(Emoji, __assign({ data: emojiData, emoji: reactionOption, size: 20 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef))))),
+        React__default["default"].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__default["default"].createElement("li", { key: reactionType },
+                React__default["default"].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__default["default"].createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionType); }, onMouseLeave: hideTooltip }, latestUser ? (React__default["default"].createElement(Avatar$1, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React__default["default"].createElement("div", { className: 'latest-user-not-found' })))),
+                    React__default["default"].createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                        React__default["default"].createElement(Component, null)),
                     Boolean(count) && detailedView && (React__default["default"].createElement("span", { className: 'str-chat__message-reactions-list-item__count' }, count || '')))));
         }))));
 });
@@ -32412,19 +32414,18 @@ var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (
 var ReactionSelector = React__default["default"].memo(UnMemoizedReactionSelector);
 
 var useProcessReactions = function (params) {
-    var _a = params.additionalEmojiProps, additionalEmojiProps = _a === void 0 ? {} : _a, emojiConfig = params.emojiConfig, propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions;
-    var message = useMessageContext('ReactionsList').message;
-    var _b = emojiConfig || {}, defaultMinimalEmojis = _b.defaultMinimalEmojis, fullEmojiData = _b.emojiData, emojiSetDef = _b.emojiSetDef;
+    var propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions;
+    var message = useMessageContext('useProcessReactions').message;
+    var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
+    var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
     var latestReactions = propReactions || message.latest_reactions || [];
     var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
     var reactionCounts = propReactionCounts || message.reaction_counts || {};
-    var reactionOptions = propReactionOptions || defaultMinimalEmojis;
-    var reactionsAreCustom = !!(propReactionOptions === null || propReactionOptions === void 0 ? void 0 : propReactionOptions.length);
     var iHaveReactedWithReaction = React.useCallback(function (reactionType) { return ownReactions.find(function (reaction) { return reaction.type === reactionType; }); }, [ownReactions]);
-    var getEmojiByReactionType = React.useCallback(function (type) {
-        return reactionOptions.find(function (option) { return option.id === type; });
-    }, [reactionOptions]);
-    var emojiData = React.useMemo(function () { return (reactionsAreCustom ? fullEmojiData : getStrippedEmojiData(fullEmojiData)); }, [fullEmojiData, reactionsAreCustom]);
+    var getEmojiByReactionType = React.useCallback(function (reactionType) { return reactionOptions.find(function (_a) {
+        var type = _a.type;
+        return type === reactionType;
+    }); }, [reactionOptions]);
     var latestReactionTypes = React.useMemo(function () {
         return latestReactions.reduce(function (reactionTypes, _a) {
             var type = _a.type;
@@ -32435,13 +32436,13 @@ var useProcessReactions = function (params) {
         }, []);
     }, [latestReactions]);
     var supportedReactionMap = React.useMemo(function () {
-        return reactionOptions.reduce(function (acc, _a) {
-            var id = _a.id;
-            acc[id] = true;
-            return acc;
+        return reactionOptions.reduce(function (map, _a) {
+            var reactionType = _a.type;
+            map[reactionType] = true;
+            return map;
         }, {});
     }, [reactionOptions]);
-    var supportedReactionsArePresent = React.useMemo(function () { return latestReactionTypes.some(function (type) { return supportedReactionMap[type]; }); }, [latestReactionTypes, supportedReactionMap]);
+    var supportedReactionsArePresent = React.useMemo(function () { return latestReactionTypes.some(function (reactionType) { return supportedReactionMap[reactionType]; }); }, [latestReactionTypes, supportedReactionMap]);
     var totalReactionCount = React.useMemo(function () {
         return supportedReactionsArePresent
             ? Object.values(reactionCounts).reduce(function (total, count) { return total + count; }, 0)
@@ -32458,9 +32459,7 @@ var useProcessReactions = function (params) {
         }, {});
     }, [latestReactions]);
     return {
-        additionalEmojiProps: reactionsAreCustom ? additionalEmojiProps : emojiSetDef,
         aggregatedUserNamesByType: aggregatedUserNamesByType,
-        emojiData: emojiData,
         getEmojiByReactionType: getEmojiByReactionType,
         iHaveReactedWithReaction: iHaveReactedWithReaction,
         latestReactions: latestReactions,
@@ -32485,9 +32484,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)
@@ -32497,17 +32495,16 @@ var UnMemoizedReactionsList = function (props) {
         }), "data-testid": 'reaction-list', onClick: onClick || onReactionListClick, onKeyUp: onClick || onReactionListClick, role: 'figure' },
         React__default["default"].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__default["default"].createElement("li", { className: clsx('str-chat__message-reaction', {
+                return (ReactionOption && (React__default["default"].createElement("li", { className: clsx('str-chat__message-reaction', {
                         'str-chat__message-reaction-own': isOwnReaction,
-                    }), key: emojiObject.id },
-                    React__default["default"].createElement(ButtonWithTooltip, { "aria-label": "Reactions: ".concat(reactionType), title: aggregatedUserNamesByType[reactionType].join(', '), type: 'button' },
-                        React__default["default"].createElement(React.Suspense, { fallback: null },
-                            React__default["default"].createElement("span", { className: 'str-chat__message-reaction-emoji' },
-                                React__default["default"].createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, additionalEmojiProps)))),
+                    }), key: reactionType },
+                    React__default["default"].createElement(ButtonWithTooltip, { "aria-label": "Reactions: ".concat(reactionType), "data-testid": "reactions-list-button-".concat(reactionType), title: aggregatedUserNamesByType[reactionType].join(', '), type: 'button' },
+                        React__default["default"].createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                            React__default["default"].createElement(ReactionOption.Component, null)),
                         "\u00A0",
-                        React__default["default"].createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCounts[reactionType])))) : null;
+                        React__default["default"].createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCounts[reactionType])))));
             }),
             React__default["default"].createElement("li", null,
                 React__default["default"].createElement("span", { className: 'str-chat__reaction-list--counter' }, totalReactionCount)))));
@@ -32533,10 +32530,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 = React.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 = React.useState(undefined), tooltipReactionType = _b[0], setTooltipReactionType = _b[1];
     var themeVersion = useChatContext('SimpleReactionsList').themeVersion;
     var handleReaction = propHandleReaction || contextHandleReaction;
     if (!latestReactions.length)
@@ -32556,27 +32552,77 @@ var UnMemoizedSimpleReactionsList = function (props) {
     };
     return (React__default["default"].createElement("div", { className: 'str-chat__message-reactions-container' },
         React__default["default"].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__default["default"].createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
+                return (ReactionOption && (React__default["default"].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__default["default"].createElement(WithTooltip, { onMouseEnter: function () { return setTooltipReactionType(reactionType); }, onMouseLeave: function () { return setTooltipReactionType(undefined); }, title: tooltipContent },
-                        React__default["default"].createElement(React.Suspense, { fallback: null },
-                            React__default["default"].createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 13 }, additionalEmojiProps))),
+                        React__default["default"].createElement(ReactionOption.Component, null),
                         "\u00A0",
                         tooltipVisible && themeVersion === '1' && (React__default["default"].createElement("div", { className: 'str-chat__simple-reactions-list-tooltip' },
                             React__default["default"].createElement("div", { className: 'arrow' }),
-                            tooltipContent))))) : null;
+                            tooltipContent))))));
             }),
             React__default["default"].createElement("li", { className: 'str-chat__simple-reactions-list-item--last-number' }, totalReactionCount))));
 };
 var SimpleReactionsList = React__default["default"].memo(UnMemoizedSimpleReactionsList);
 
+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 = React.useState([0, 0]), _c = _b[0], spriteWidth = _c[0], spriteHeight = _c[1], setSpriteDimensions = _b[1];
+    React.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__default["default"].createElement(React__default["default"].Fragment, null, fallback);
+    return (React__default["default"].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,
+        } }));
+};
+
+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';
+var StreamEmoji = function (_a) {
+    var fallback = _a.fallback, type = _a.type;
+    var position = StreamSpriteEmojiPositions[type];
+    return (React__default["default"].createElement(SpriteImage, { columns: 2, fallback: fallback, height: 18, position: position, rows: 3, spriteUrl: STREAM_SPRITE_URL }));
+};
+
+/* eslint-disable sort-keys */
+var defaultReactionOptions = [
+    { type: 'haha', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\uD83D\uDE02', type: 'haha' }); }, name: 'Joy' },
+    { type: 'like', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\uD83D\uDC4D', type: 'like' }); }, name: 'Thumbs up' },
+    { type: 'love', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\u2764\uFE0F', type: 'love' }); }, name: 'Heart' },
+    { type: 'sad', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\uD83D\uDE14', type: 'sad' }); }, name: 'Sad' },
+    { type: 'wow', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\uD83D\uDE32', type: 'wow' }); }, name: 'Astonished' },
+];
+
 var MessageSimpleWithContext = function (props) {
     var _a;
     var additionalMessageInputProps = props.additionalMessageInputProps, clearEditingState = props.clearEditingState, editing = props.editing, endOfGroup = props.endOfGroup, firstOfGroup = props.firstOfGroup, groupedByUser = props.groupedByUser, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, handleRetry = props.handleRetry, highlighted = props.highlighted, isMyMessage = props.isMyMessage, isReactionEnabled = props.isReactionEnabled, message = props.message, onUserClick = props.onUserClick, onUserHover = props.onUserHover, reactionSelectorRef = props.reactionSelectorRef, renderText = props.renderText, showDetailedReactions = props.showDetailedReactions, threadList = props.threadList;
@@ -33633,49 +33679,52 @@ var ChannelInner = function (props) {
         jumpToMessage,
         jumpToLatestMessage,
     ]);
-    var componentContextValue = React.useMemo(function () { return ({
-        Attachment: props.Attachment || Attachment,
-        AttachmentPreviewList: props.AttachmentPreviewList,
-        AutocompleteSuggestionHeader: props.AutocompleteSuggestionHeader,
-        AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
-        AutocompleteSuggestionList: props.AutocompleteSuggestionList,
-        Avatar: props.Avatar,
-        CooldownTimer: props.CooldownTimer,
-        DateSeparator: props.DateSeparator,
-        EditMessageInput: props.EditMessageInput,
-        EmojiIcon: props.EmojiIcon,
-        EmptyStateIndicator: props.EmptyStateIndicator,
-        FileUploadIcon: props.FileUploadIcon,
-        GiphyPreviewMessage: props.GiphyPreviewMessage,
-        HeaderComponent: props.HeaderComponent,
-        Input: props.Input,
-        LinkPreviewList: props.LinkPreviewList,
-        LoadingIndicator: props.LoadingIndicator,
-        Message: props.Message || MessageSimple,
-        MessageDeleted: props.MessageDeleted,
-        MessageListNotifications: props.MessageListNotifications,
-        MessageNotification: props.MessageNotification,
-        MessageOptions: props.MessageOptions,
-        MessageRepliesCountButton: props.MessageRepliesCountButton,
-        MessageStatus: props.MessageStatus,
-        MessageSystem: props.MessageSystem,
-        MessageTimestamp: props.MessageTimestamp,
-        ModalGallery: props.ModalGallery,
-        PinIndicator: props.PinIndicator,
-        QuotedMessage: props.QuotedMessage,
-        QuotedMessagePreview: props.QuotedMessagePreview,
-        ReactionSelector: props.ReactionSelector,
-        ReactionsList: props.ReactionsList,
-        SendButton: props.SendButton,
-        ThreadHead: props.ThreadHead,
-        ThreadHeader: props.ThreadHeader,
-        ThreadStart: props.ThreadStart,
-        TriggerProvider: props.TriggerProvider,
-        TypingIndicator: props.TypingIndicator,
-        VirtualMessage: props.VirtualMessage,
-    }); }, []);
+    var componentContextValue = React.useMemo(function () {
+        var _a;
+        return ({
+            Attachment: props.Attachment || Attachment,
+            AttachmentPreviewList: props.AttachmentPreviewList,
+            AutocompleteSuggestionHeader: props.AutocompleteSuggestionHeader,
+            AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
+            AutocompleteSuggestionList: props.AutocompleteSuggestionList,
+            Avatar: props.Avatar,
+            CooldownTimer: props.CooldownTimer,
+            DateSeparator: props.DateSeparator,
+            EditMessageInput: props.EditMessageInput,
+            EmojiIcon: props.EmojiIcon,
+            EmptyStateIndicator: props.EmptyStateIndicator,
+            FileUploadIcon: props.FileUploadIcon,
+            GiphyPreviewMessage: props.GiphyPreviewMessage,
+            HeaderComponent: props.HeaderComponent,
+            Input: props.Input,
+            LinkPreviewList: props.LinkPreviewList,
+            LoadingIndicator: props.LoadingIndicator,
+            Message: props.Message || MessageSimple,
+            MessageDeleted: props.MessageDeleted,
+            MessageListNotifications: props.MessageListNotifications,
+            MessageNotification: props.MessageNotification,
+            MessageOptions: props.MessageOptions,
+            MessageRepliesCountButton: props.MessageRepliesCountButton,
+            MessageStatus: props.MessageStatus,
+            MessageSystem: props.MessageSystem,
+            MessageTimestamp: props.MessageTimestamp,
+            ModalGallery: props.ModalGallery,
+            PinIndicator: props.PinIndicator,
+            QuotedMessage: props.QuotedMessage,
+            QuotedMessagePreview: props.QuotedMessagePreview,
+            reactionOptions: (_a = props.reactionOptions) !== null && _a !== void 0 ? _a : defaultReactionOptions,
+            ReactionSelector: props.ReactionSelector,
+            ReactionsList: props.ReactionsList,
+            SendButton: props.SendButton,
+            ThreadHead: props.ThreadHead,
+            ThreadHeader: props.ThreadHeader,
+            ThreadStart: props.ThreadStart,
+            TriggerProvider: props.TriggerProvider,
+            TypingIndicator: props.TypingIndicator,
+            VirtualMessage: props.VirtualMessage,
+        });
+    }, [props.reactionOptions]);
     var emojiContextValue = React.useMemo(function () { return ({
-        Emoji: props.Emoji,
         emojiConfig: emojiConfig,
         EmojiIndex: props.EmojiIndex,
         EmojiPicker: props.EmojiPicker,
@@ -35003,7 +35052,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.14.0';
+var version = '11.0.0-rc.1';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -37048,13 +37097,6 @@ var Window = React__default["default"].memo(UnMemoizedWindow);
 
 // @ts-expect-error
 
-var DefaultEmoji = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': nimbleEmoji__default["default"]
-});
-
-// @ts-expect-error
-
 var DefaultEmojiPicker = /*#__PURE__*/Object.freeze({
     __proto__: null,
     'default': nimblePicker__default["default"]
@@ -37183,6 +37225,8 @@ exports.SendButton = SendButton;
 exports.SendIconV1 = SendIconV1;
 exports.SendIconV2 = SendIconV2;
 exports.SimpleReactionsList = SimpleReactionsList;
+exports.SpriteImage = SpriteImage;
+exports.StreamEmoji = StreamEmoji;
 exports.Streami18n = Streami18n;
 exports.Thread = Thread;
 exports.ThreadHeader = ThreadHeader;
@@ -37209,6 +37253,7 @@ exports.darkModeTheme = darkModeTheme;
 exports.deTranslations = deTranslations;
 exports.defaultDateTimeParser = defaultDateTimeParser;
 exports.defaultPinPermissions = defaultPinPermissions;
+exports.defaultReactionOptions = defaultReactionOptions;
 exports.defaultScrollToItem = defaultScrollToItem;
 exports.defaultTimestampFormat = defaultTimestampFormat;
 exports.defaultTranslatorFunction = defaultTranslatorFunction;