@sendbird/uikit-react 3.9.1-rc-2 → 3.9.1

package/ui/BottomSheet.js

@@ -0,0 +1,36 @@
+import React__default, { useRef } from 'react';
+import { createPortal } from 'react-dom';
+import '../hooks/useModal.js';
+import { a as MODAL_ROOT } from '../chunks/bundle-vUampZQQ.js';
+import '../chunks/bundle-c5jegKUx.js';
+import '../chunks/bundle-KZXjN5v7.js';
+import '../chunks/bundle-XtwZ5oLQ.js';
+import '../chunks/bundle-ZSLOjQvb.js';
+import '../chunks/bundle-LdRGfmOs.js';
+import '../chunks/bundle-Izb-WW89.js';
+import '../chunks/bundle-yCtFACB5.js';
+import './IconButton.js';
+import './Button.js';
+import '../chunks/bundle-u2CeAx57.js';
+import './Icon.js';
+
+var BottomSheet = function (props) {
+    var _a = props.className, className = _a === void 0 ? '' : _a, children = props.children, onBackdropClick = props.onBackdropClick;
+    // https://github.com/testing-library/react-testing-library/issues/62#issuecomment-438653348
+    var portalRoot = useRef();
+    portalRoot.current = document.getElementById(MODAL_ROOT);
+    if (!portalRoot.current) {
+        portalRoot.current = document.createElement('div');
+        portalRoot.current.setAttribute('id', MODAL_ROOT);
+        document.body.appendChild(portalRoot.current);
+    }
+    return createPortal(React__default.createElement("div", { className: "".concat(className, " sendbird-bottomsheet") },
+        React__default.createElement("div", { className: 'sendbird-bottomsheet__content', role: 'dialog', "aria-modal": 'true', "aria-expanded": 'true' }, children),
+        React__default.createElement("div", { className: "\n          sendbird-bottomsheet__backdrop\n        ", onClick: function (e) {
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                onBackdropClick();
+            } })), portalRoot.current);
+};
+
+export { BottomSheet as default };
+//# sourceMappingURL=BottomSheet.js.map

package/ui/Button.js

@@ -0,0 +1,49 @@
+import { a as __spreadArray } from '../chunks/bundle-c5jegKUx.js';
+import React__default from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-u2CeAx57.js';
+import '../chunks/bundle-LdRGfmOs.js';
+
+var ButtonTypes;
+(function (ButtonTypes) {
+    ButtonTypes["PRIMARY"] = "PRIMARY";
+    ButtonTypes["SECONDARY"] = "SECONDARY";
+    ButtonTypes["DANGER"] = "DANGER";
+    ButtonTypes["DISABLED"] = "DISABLED";
+})(ButtonTypes || (ButtonTypes = {}));
+var ButtonSizes;
+(function (ButtonSizes) {
+    ButtonSizes["BIG"] = "BIG";
+    ButtonSizes["SMALL"] = "SMALL";
+})(ButtonSizes || (ButtonSizes = {}));
+
+function changeTypeToClassName(type) {
+    switch (type) {
+        case ButtonTypes.PRIMARY: return 'sendbird-button--primary';
+        case ButtonTypes.SECONDARY: return 'sendbird-button--secondary';
+        case ButtonTypes.DANGER: return 'sendbird-button--danger';
+        case ButtonTypes.DISABLED: return 'sendbird-button--disabled';
+        default: return null;
+    }
+}
+function changeSizeToClassName(size) {
+    switch (size) {
+        case ButtonSizes.BIG: return 'sendbird-button--big';
+        case ButtonSizes.SMALL: return 'sendbird-button--small';
+        default: return null;
+    }
+}
+
+function Button(_a) {
+    var className = _a.className, _b = _a.type, type = _b === void 0 ? ButtonTypes.PRIMARY : _b, _c = _a.size, size = _c === void 0 ? ButtonSizes.BIG : _c, _d = _a.children, children = _d === void 0 ? 'Button' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.onClick, onClick = _f === void 0 ? function () { } : _f;
+    var injectingClassNames = __spreadArray(__spreadArray([], ((Array.isArray(className)) ? className : [className]), true), [
+        'sendbird-button',
+        (disabled ? 'sendbird-button__disabled' : ''),
+        changeTypeToClassName(type),
+        changeSizeToClassName(size),
+    ], false).join(' ');
+    return (React__default.createElement("button", { className: injectingClassNames, type: "button", onClick: onClick, disabled: disabled },
+        React__default.createElement(Label, { className: "sendbird-button__text", type: LabelTypography.BUTTON_1, color: LabelColors.ONCONTENT_1 }, children)));
+}
+
+export { ButtonSizes, ButtonTypes, Button as default };
+//# sourceMappingURL=Button.js.map

package/ui/ChannelAvatar.js

@@ -0,0 +1,30 @@
+import React__default, { useMemo } from 'react';
+import { A as Avatar } from '../chunks/bundle-HbEA73mt.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-c944_BvY.js';
+import '../chunks/bundle-c5jegKUx.js';
+import './ImageRenderer.js';
+import '../chunks/bundle-dJsyeOhk.js';
+import '../chunks/bundle-7JHtC_JJ.js';
+import '../chunks/bundle-XtwZ5oLQ.js';
+
+function ChannelAvatar(_a) {
+    var channel = _a.channel, userId = _a.userId, theme = _a.theme, _b = _a.width, width = _b === void 0 ? 56 : _b, _c = _a.height, height = _c === void 0 ? 56 : _c;
+    var isBroadcast = channel === null || channel === void 0 ? void 0 : channel.isBroadcast;
+    var memoizedAvatar = useMemo(function () { return (isBroadcast
+        ? (generateDefaultAvatar(channel)
+            ? (React__default.createElement("div", { className: "sendbird-chat-header--default-avatar", style: {
+                    width: width,
+                    height: height,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } },
+                React__default.createElement(Icon, { type: IconTypes.BROADCAST, fillColor: IconColors.CONTENT, width: width * 0.575, height: height * 0.575 })))
+            : (React__default.createElement(Avatar, { className: "sendbird-chat-header--avatar--broadcast-channel", src: getChannelAvatarSource(channel, userId), width: width, height: height, alt: channel === null || channel === void 0 ? void 0 : channel.name })))
+        : (React__default.createElement(Avatar, { className: "sendbird-chat-header--avatar--group-channel", src: getChannelAvatarSource(channel, userId), width: "".concat(width, "px"), height: "".concat(height, "px"), alt: channel === null || channel === void 0 ? void 0 : channel.name }))); }, [channel === null || channel === void 0 ? void 0 : channel.members, channel === null || channel === void 0 ? void 0 : channel.coverUrl, theme]);
+    return (React__default.createElement(React__default.Fragment, null, memoizedAvatar));
+}
+
+export { ChannelAvatar as default };
+//# sourceMappingURL=ChannelAvatar.js.map

package/ui/ConnectionStatus.js

@@ -0,0 +1,18 @@
+import React__default, { useContext } from 'react';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-u2CeAx57.js';
+import { L as LocalizationContext } from '../chunks/bundle-ZSLOjQvb.js';
+import '../chunks/bundle-c5jegKUx.js';
+import '../chunks/bundle-XtwZ5oLQ.js';
+import '../chunks/bundle-LdRGfmOs.js';
+import '../chunks/bundle-Izb-WW89.js';
+
+function ConnectionStatus() {
+    var stringSet = useContext(LocalizationContext).stringSet;
+    return (React__default.createElement("div", { className: "sendbird-connection-status" },
+        React__default.createElement(Label, { type: LabelTypography.BODY_2, color: LabelColors.ONBACKGROUND_2 }, stringSet.TRYING_TO_CONNECT),
+        React__default.createElement(Icon, { type: IconTypes.DISCONNECTED, fillColor: IconColors.SENT, width: "14px", height: "14px" })));
+}
+
+export { ConnectionStatus as default };
+//# sourceMappingURL=ConnectionStatus.js.map

package/ui/ContextMenu.js

@@ -0,0 +1,207 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { d as __extends, _ as __assign } from '../chunks/bundle-c5jegKUx.js';
+import { createPortal } from 'react-dom';
+import SortByRow from './SortByRow.js';
+import { n as getClassName } from '../chunks/bundle-CQMOLj5V.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-u2CeAx57.js';
+import '../chunks/bundle-dJsyeOhk.js';
+import '../utils/message/getOutgoingMessageState.js';
+import '../chunks/bundle-KZXjN5v7.js';
+import '../chunks/bundle-LdRGfmOs.js';
+
+// padding to handle height of last item in message-list
+var HEIGHT_PADDING = 60;
+var MenuItems$1 = /** @class */ (function (_super) {
+    __extends(MenuItems, _super);
+    function MenuItems(props) {
+        var _this = _super.call(this, props) || this;
+        _this.menuRef = React__default.createRef();
+        _this.setupEvents = function () {
+            var closeDropdown = _this.props.closeDropdown;
+            var menuRef = _this.menuRef;
+            var handleClickOutside = function (event) {
+                var _a, _b;
+                if ((menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) && !((_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
+                    closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+                }
+            };
+            _this.setState({
+                handleClickOutside: handleClickOutside,
+            });
+            document.addEventListener('mousedown', handleClickOutside);
+        };
+        _this.cleanUpEvents = function () {
+            var handleClickOutside = _this.state.handleClickOutside;
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+        _this.getMenuPosition = function () {
+            var _a, _b;
+            var _c = _this.props, parentRef = _c.parentRef, openLeft = _c.openLeft;
+            var parentRect = (_b = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a);
+            var x = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.x) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) || 0;
+            var y = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.y) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) || 0;
+            var menuStyle = {
+                top: y,
+                left: x,
+            };
+            if (!_this.menuRef.current)
+                return menuStyle;
+            var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+            var rect = _this.menuRef.current.getBoundingClientRect();
+            if (y + rect.height + HEIGHT_PADDING > innerHeight) {
+                menuStyle.top -= rect.height;
+            }
+            if (x + rect.width > innerWidth && !openLeft) {
+                menuStyle.left -= rect.width;
+            }
+            if (menuStyle.top < 0) {
+                menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
+            }
+            menuStyle.top += 32;
+            if (openLeft) {
+                var padding = Number.isNaN(rect.width - 30)
+                    ? 108 // default
+                    : rect.width - 30;
+                menuStyle.left -= padding;
+            }
+            // warning: this section has to be executed after the openLeft is calculated
+            // menu is outside viewport
+            if (menuStyle.left < 0) {
+                menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
+            }
+            _this.setState({ menuStyle: menuStyle });
+            return menuStyle;
+        };
+        _this.state = {
+            menuStyle: {},
+            handleClickOutside: function () { },
+        };
+        return _this;
+    }
+    MenuItems.prototype.componentDidMount = function () {
+        this.setupEvents();
+        this.getMenuPosition();
+    };
+    MenuItems.prototype.componentWillUnmount = function () {
+        this.cleanUpEvents();
+    };
+    MenuItems.prototype.render = function () {
+        var _a;
+        var menuStyle = this.state.menuStyle;
+        var _b = this.props, children = _b.children, style = _b.style, _c = _b.className, className = _c === void 0 ? '' : _c;
+        return (createPortal((React__default.createElement("div", { className: (_a = this.props) === null || _a === void 0 ? void 0 : _a.className },
+            React__default.createElement("div", { className: "sendbird-dropdown__menu-backdrop" }),
+            React__default.createElement("ul", { className: "".concat(className, " sendbird-dropdown__menu"), ref: this.menuRef, style: __assign({ display: 'inline-block', position: 'fixed', left: "".concat(Math.round(menuStyle.left), "px"), top: "".concat(Math.round(menuStyle.top), "px") }, style) }, children))), document.getElementById('sendbird-dropdown-portal')));
+    };
+    return MenuItems;
+}(React__default.Component));
+
+var defaultParentRect = { x: 0, y: 0, left: 0, top: 0, height: 0 };
+var EmojiListItems$1 = function (_a) {
+    var children = _a.children, parentRef = _a.parentRef, parentContainRef = _a.parentContainRef, _b = _a.spaceFromTrigger, spaceFromTrigger = _b === void 0 ? { x: 0, y: 0 } : _b, closeDropdown = _a.closeDropdown;
+    var _c = useState({ left: 0, top: 0 }), reactionStyle = _c[0], setReactionStyle = _c[1];
+    var reactionRef = useRef(null);
+    /* showParent & hideParent */
+    useEffect(function () {
+        if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+            parentContainRef.current.classList.add('sendbird-reactions--pressed');
+        }
+        return function () {
+            if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+                parentContainRef.current.classList.remove('sendbird-reactions--pressed');
+            }
+        };
+    }, []);
+    /* setupEvents & cleanupEvents */
+    useEffect(function () {
+        var handleClickOutSide = function (event) {
+            var _a, _b;
+            if ((reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) && !((_b = (_a = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
+                closeDropdown();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutSide);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutSide);
+        };
+    }, []);
+    /* getBarPosition */
+    useEffect(function () {
+        var _a, _b, _c;
+        var spaceFromTriggerX = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.x) || 0;
+        var spaceFromTriggerY = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.y) || 0;
+        var parentRect = (_b = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : defaultParentRect;
+        var x = parentRect.x || parentRect.left;
+        var y = parentRect.y || parentRect.top;
+        var reactionStyle = {
+            top: y,
+            left: x,
+        };
+        if (!(reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current)) {
+            setReactionStyle(reactionStyle);
+        }
+        else {
+            var rect = (_c = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+            if (reactionStyle.top < rect.height) {
+                reactionStyle.top += parentRect.height;
+                reactionStyle.top += spaceFromTriggerY;
+            }
+            else {
+                reactionStyle.top -= rect.height;
+                reactionStyle.top -= spaceFromTriggerY;
+            }
+            reactionStyle.left -= rect.width / 2;
+            reactionStyle.left += (parentRect.height / 2) - 2;
+            reactionStyle.left += spaceFromTriggerX;
+            var maximumLeft = window.innerWidth - rect.width;
+            if (maximumLeft < reactionStyle.left) {
+                reactionStyle.left = maximumLeft;
+            }
+            if (reactionStyle.left < 0) {
+                reactionStyle.left = 0;
+            }
+            setReactionStyle(reactionStyle);
+        }
+    }, []);
+    var rootElement = document.getElementById('sendbird-emoji-list-portal');
+    if (rootElement) {
+        return (createPortal(React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: "sendbird-dropdown__menu-backdrop" }),
+            React__default.createElement("ul", { className: "sendbird-dropdown__reaction-bar", ref: reactionRef, style: {
+                    display: 'inline-block',
+                    position: 'fixed',
+                    left: "".concat(Math.round(reactionStyle.left), "px"),
+                    top: "".concat(Math.round(reactionStyle.top), "px"),
+                } },
+                React__default.createElement(SortByRow, { className: "sendbird-dropdown__reaction-bar__row", maxItemCount: 8, itemWidth: 44, itemHeight: 40 }, children))), rootElement));
+    }
+    return null;
+};
+
+var ENTER_KEY = 13;
+var MenuItems = MenuItems$1;
+var EmojiListItems = EmojiListItems$1;
+var MenuItem = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, onClick = _a.onClick, _c = _a.disable, disable = _c === void 0 ? false : _c, _d = _a.dataSbId, dataSbId = _d === void 0 ? '' : _d;
+    var handleClickEvent = function (e) {
+        if (!disable && onClick) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        }
+    };
+    return (React__default.createElement("li", { className: getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : '']), role: "menuitem", "aria-disabled": disable ? true : false, onClick: handleClickEvent, onKeyPress: function (e) { if (e.keyCode === ENTER_KEY)
+            handleClickEvent(e); }, tabIndex: 0, "data-sb-id": dataSbId },
+        React__default.createElement(Label, { className: "sendbird-dropdown__menu-item__text", type: LabelTypography.SUBTITLE_2, color: disable ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1 }, children)));
+};
+var MenuRoot = function () { return (React__default.createElement("div", { id: "sendbird-dropdown-portal", className: "sendbird-dropdown-portal" })); };
+// For the test environment
+var EmojiReactionListRoot = function () { return React__default.createElement("div", { id: "sendbird-emoji-list-portal" }); };
+function ContextMenu(_a) {
+    var menuTrigger = _a.menuTrigger, menuItems = _a.menuItems, isOpen = _a.isOpen, onClick = _a.onClick;
+    var _b = useState(false), showMenu = _b[0], setShowMenu = _b[1];
+    return (React__default.createElement("div", { className: "sendbird-context-menu", style: { display: 'inline' }, onClick: onClick }, menuTrigger === null || menuTrigger === void 0 ? void 0 :
+        menuTrigger(function () { return setShowMenu(!showMenu); }),
+        (showMenu || isOpen) && menuItems(function () { return setShowMenu(false); })));
+}
+
+export { EmojiListItems, EmojiReactionListRoot, MenuItem, MenuItems, MenuRoot, ContextMenu as default };
+//# sourceMappingURL=ContextMenu.js.map

package/ui/DateSeparator.js

@@ -0,0 +1,19 @@
+import { a as __spreadArray } from '../chunks/bundle-c5jegKUx.js';
+import React__default from 'react';
+import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-mAbwjJsi.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-u2CeAx57.js';
+import '../chunks/bundle-LdRGfmOs.js';
+
+var DateSeparator = function (_a) {
+    var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.separatorColor, separatorColor = _d === void 0 ? Colors.ONBACKGROUND_4 : _d;
+    return (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-separator',
+        ], false).join(' ') },
+        React__default.createElement("div", { className: ['sendbird-separator__left', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ') }),
+        React__default.createElement("div", { className: "sendbird-separator__text" }, children
+            || (React__default.createElement(Label, { type: LabelTypography.CAPTION_2, color: LabelColors.ONBACKGROUND_2 }, "Date Separator"))),
+        React__default.createElement("div", { className: ['sendbird-separator__right', "".concat(changeColorToClassName(separatorColor), "--background-color")].join(' ') })));
+};
+
+export { DateSeparator as default };
+//# sourceMappingURL=DateSeparator.js.map

package/ui/EmojiReactions.js

@@ -0,0 +1,177 @@
+import React__default, { useState, useContext, useMemo, useRef } from 'react';
+import ReactionBadge from './ReactionBadge.js';
+import ReactionButton from './ReactionButton.js';
+import ImageRenderer from './ImageRenderer.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import ContextMenu, { EmojiListItems } from './ContextMenu.js';
+import { O as getEmojiUrl, P as isReactedBy, Q as getEmojiTooltipString, p as getEmojiListAll, R as getEmojiMapAll, n as getClassName } from '../chunks/bundle-CQMOLj5V.js';
+import BottomSheet from './BottomSheet.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-u2CeAx57.js';
+import UserListItem from './UserListItem.js';
+import { _ as __assign } from '../chunks/bundle-c5jegKUx.js';
+import Tooltip from './Tooltip.js';
+import TooltipWrapper from './TooltipWrapper.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-yCtFACB5.js';
+import { u as useLongPress } from '../chunks/bundle-5HYqTaTr.js';
+import { L as LocalizationContext } from '../chunks/bundle-ZSLOjQvb.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { useMessageContext } from '../Message/context.js';
+import '../chunks/bundle-LdRGfmOs.js';
+import '../chunks/bundle-XtwZ5oLQ.js';
+import 'react-dom';
+import './SortByRow.js';
+import '../chunks/bundle-dJsyeOhk.js';
+import '../utils/message/getOutgoingMessageState.js';
+import '../chunks/bundle-KZXjN5v7.js';
+import '../hooks/useModal.js';
+import '../chunks/bundle-vUampZQQ.js';
+import './IconButton.js';
+import './Button.js';
+import '../chunks/bundle-Izb-WW89.js';
+import '../chunks/bundle-J3Xwcu_c.js';
+import '../chunks/bundle-HbEA73mt.js';
+import '../chunks/bundle-7JHtC_JJ.js';
+import './MutedAvatarOverlay.js';
+import './Checkbox.js';
+import './UserProfile.js';
+import '../sendbirdSelectors.js';
+import '../chunks/bundle-OwUIW9B_.js';
+import '../withSendbird.js';
+
+var ReactedMembersBottomSheet = function (_a) {
+    var _b, _c, _d;
+    var message = _a.message, channel = _a.channel, _e = _a.emojiKey, emojiKey = _e === void 0 ? '' : _e, hideMenu = _a.hideMenu, emojiContainer = _a.emojiContainer, onPressUserProfileHandler = _a.onPressUserProfileHandler;
+    var _f = channel.members, members = _f === void 0 ? [] : _f;
+    var _g = useState(emojiKey), selectedEmoji = _g[0], setSelectedEmoji = _g[1];
+    function onPressUserProfileCallBack() {
+        if (onPressUserProfileHandler && message) {
+            var sender = message === null || message === void 0 ? void 0 : message.sender;
+            onPressUserProfileHandler(sender);
+        }
+    }
+    return (React__default.createElement(BottomSheet, { onBackdropClick: hideMenu },
+        React__default.createElement("div", { className: "sendbird-message__bottomsheet" },
+            React__default.createElement("div", { className: "sendbird-message__bottomsheet__reacted-members" }, (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.map(function (reaction) {
+                var emojiUrl = getEmojiUrl(emojiContainer, reaction.key);
+                return (React__default.createElement("div", { key: reaction.key, className: "\n                  sendbird-message__bottomsheet__reacted-members__item\n                  ".concat(selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : '', "\n                "), onClick: function () {
+                        setSelectedEmoji(reaction.key);
+                    } },
+                    React__default.createElement(ImageRenderer, { url: emojiUrl, width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
+                            React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } }),
+                    React__default.createElement(Label, { type: LabelTypography.BUTTON_2, color: selectedEmoji === reaction.key ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3 }, reaction.userIds.length)));
+            })),
+            React__default.createElement("div", { className: "sendbird-message__bottomsheet__reactor-list" }, // making a member list who reacted to the message with the `selectedEmoji`
+            ((_d = (_c = message.reactions) === null || _c === void 0 ? void 0 : _c.find(function (reaction) { return reaction.key === selectedEmoji; })) === null || _d === void 0 ? void 0 : _d.userIds.map(function (userId) { return members.find(function (member) { return member.userId === userId; }); }).filter(function (member) { return member !== undefined; }))
+                .map(function (member) { return (React__default.createElement(UserListItem, { key: member.userId, className: "sendbird-message__bottomsheet__reactor-list__item", user: member, avatarSize: "36px", onClick: onPressUserProfileCallBack })); })))));
+};
+
+function ReactionItem(_a) {
+    var _b;
+    var reaction = _a.reaction, memberNicknamesMap = _a.memberNicknamesMap, setEmojiKey = _a.setEmojiKey, toggleReaction = _a.toggleReaction, emojisMap = _a.emojisMap, channel = _a.channel, message = _a.message;
+    var store = useSendbirdStateContext();
+    var isMobile = useMediaQueryContext().isMobile;
+    var messageStore = useMessageContext();
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var userId = store.config.userId;
+    var reactedByMe = isReactedBy(userId, reaction);
+    var showHoverTooltip = (reaction.userIds.length > 0)
+        && ((channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !channel.isSuper);
+    var handleOnClick = function () {
+        setEmojiKey('');
+        toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction((message !== null && message !== void 0 ? message : messageStore === null || messageStore === void 0 ? void 0 : messageStore.message), reaction.key, reactedByMe);
+    };
+    var longPress = useLongPress({
+        onLongPress: function () {
+            setEmojiKey(reaction.key);
+        },
+        onClick: handleOnClick,
+    }, {
+        shouldPreventDefault: true,
+        shouldStopPropagation: true,
+    });
+    return (React__default.createElement(TooltipWrapper, { className: "sendbird-emoji-reactions__reaction-badge", hoverTooltip: showHoverTooltip ? (React__default.createElement(Tooltip, null, getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))) : React__default.createElement(React__default.Fragment, null) },
+        React__default.createElement("div", __assign({}, (isMobile
+            ? longPress
+            : { onClick: handleOnClick })),
+            React__default.createElement(ReactionBadge, { count: reaction.userIds.length, selected: reactedByMe },
+                React__default.createElement(ImageRenderer, { circle: true, url: ((_b = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _b === void 0 ? void 0 : _b.url) || '', width: "20px", height: "20px", defaultComponent: (React__default.createElement(Icon, { width: "20px", height: "20px", type: IconTypes.QUESTION })) })))));
+}
+
+var AddReactionBadgeItem = function (_a) {
+    var onClick = _a.onClick;
+    var onlyClick = useLongPress({
+        onLongPress: function () { },
+        onClick: onClick,
+    }, {
+        shouldPreventDefault: true,
+        shouldStopPropagation: true,
+    });
+    return (React__default.createElement("div", __assign({ className: "sendbird-emoji-reactions__add-reaction-badge" }, onlyClick),
+        React__default.createElement(ReactionBadge, { isAdd: true },
+            React__default.createElement(Icon, { type: IconTypes.EMOJI_MORE, fillColor: IconColors.ON_BACKGROUND_3, width: "20px", height: "20px" }))));
+};
+
+var MobileEmojisBottomSheet = function (_a) {
+    var userId = _a.userId, message = _a.message, emojiContainer = _a.emojiContainer, hideMenu = _a.hideMenu, toggleReaction = _a.toggleReaction;
+    var emojiAllList = useMemo(function () {
+        return getEmojiListAll(emojiContainer);
+    }, [emojiContainer]);
+    return (React__default.createElement(BottomSheet, { onBackdropClick: hideMenu },
+        React__default.createElement("div", { className: "sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet" }, emojiAllList.map(function (emoji) {
+            var _a, _b, _c, _d;
+            var isReacted = (_d = ((_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.find(function (reaction) { return reaction.key === emoji.key; })) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) { return reactorId === userId; }))) !== null && _d !== void 0 ? _d : false;
+            return (React__default.createElement(ReactionButton, { key: emoji.key, width: "44px", height: "44px", selected: isReacted, onClick: function (e) {
+                    e === null || e === void 0 ? void 0 : e.stopPropagation();
+                    toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
+                    hideMenu();
+                }, dataSbId: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
+                React__default.createElement(ImageRenderer, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
+                        React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+        }))));
+};
+
+var EmojiReactions = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var _g = _a.className, className = _g === void 0 ? '' : _g, userId = _a.userId, message = _a.message, channel = _a.channel, emojiContainer = _a.emojiContainer, memberNicknamesMap = _a.memberNicknamesMap, _h = _a.spaceFromTrigger, spaceFromTrigger = _h === void 0 ? { x: 0, y: 0 } : _h, _j = _a.isByMe, isByMe = _j === void 0 ? false : _j, toggleReaction = _a.toggleReaction, onPressUserProfile = _a.onPressUserProfile;
+    var isMobile = useMediaQueryContext().isMobile;
+    var addReactionRef = useRef(null);
+    var _k = useState(false), showEmojiList = _k[0], setShowEmojiList = _k[1];
+    var _l = useState(''), selectedEmojiKey = _l[0], setSelectedEmojiKey = _l[1];
+    var emojisMap = getEmojiMapAll(emojiContainer);
+    var showAddReactionBadge = ((_c = (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) < emojisMap.size;
+    return (React__default.createElement("div", { className: getClassName([
+            className, 'sendbird-emoji-reactions',
+            isByMe ? 'outgoing' : 'incoming',
+        ]) },
+        (((_e = (_d = message.reactions) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) > 0) && ((_f = message.reactions) === null || _f === void 0 ? void 0 : _f.map(function (reaction) {
+            return (React__default.createElement(ReactionItem, { key: reaction === null || reaction === void 0 ? void 0 : reaction.key, reaction: reaction, memberNicknamesMap: memberNicknamesMap, setEmojiKey: setSelectedEmojiKey, toggleReaction: toggleReaction, emojisMap: emojisMap, channel: channel, message: message }));
+        })),
+        (!isMobile && showAddReactionBadge) && (React__default.createElement(ContextMenu, { menuTrigger: function (toggleDropdown) { return (React__default.createElement(ReactionBadge, { className: "sendbird-emoji-reactions__add-reaction-badge", ref: addReactionRef, isAdd: true, onClick: function (e) {
+                    var _a;
+                    toggleDropdown();
+                    (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+                } },
+                React__default.createElement(Icon, { type: IconTypes.EMOJI_MORE, fillColor: IconColors.ON_BACKGROUND_3, width: "20px", height: "20px" }))); }, menuItems: function (closeDropdown) { return (React__default.createElement(EmojiListItems, { parentRef: addReactionRef, parentContainRef: addReactionRef, closeDropdown: closeDropdown, spaceFromTrigger: spaceFromTrigger }, getEmojiListAll(emojiContainer).map(function (emoji) {
+                var _a, _b, _c;
+                var isReacted = ((_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.find(function (reaction) { return reaction.key === emoji.key; })) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) { return reactorId === userId; })) || false;
+                return (React__default.createElement(ReactionButton, { key: emoji.key, width: "36px", height: "36px", selected: isReacted, onClick: function (e) {
+                        closeDropdown();
+                        toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
+                        e === null || e === void 0 ? void 0 : e.stopPropagation();
+                    }, dataSbId: "ui_emoji_reactions_menu_".concat(emoji.key) },
+                    React__default.createElement(ImageRenderer, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
+                            React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+            }))); } })),
+        (isMobile && showAddReactionBadge) && (React__default.createElement(AddReactionBadgeItem, { onClick: function () {
+                setShowEmojiList(true);
+            } })),
+        (isMobile && showEmojiList) && (React__default.createElement(MobileEmojisBottomSheet, { userId: userId, message: message, emojiContainer: emojiContainer, hideMenu: function () {
+                setShowEmojiList(false);
+            }, toggleReaction: toggleReaction })),
+        (isMobile && selectedEmojiKey && channel !== null) && (React__default.createElement(ReactedMembersBottomSheet, { message: message, channel: channel, emojiKey: selectedEmojiKey, hideMenu: function () {
+                setSelectedEmojiKey('');
+            }, emojiContainer: emojiContainer, onPressUserProfileHandler: onPressUserProfile }))));
+};
+
+export { EmojiReactions as default };
+//# sourceMappingURL=EmojiReactions.js.map

package/ui/FileMessageItemBody.js

@@ -0,0 +1,39 @@
+import React__default from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-u2CeAx57.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import TextButton from './TextButton.js';
+import { n as getClassName, u as getUIKitFileType, v as truncateString } from '../chunks/bundle-CQMOLj5V.js';
+import { C as Colors } from '../chunks/bundle-mAbwjJsi.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-yCtFACB5.js';
+import '../chunks/bundle-c5jegKUx.js';
+import '../chunks/bundle-LdRGfmOs.js';
+import '../chunks/bundle-XtwZ5oLQ.js';
+import '../utils/message/getOutgoingMessageState.js';
+import '../chunks/bundle-KZXjN5v7.js';
+
+function FileMessageItemBody(_a) {
+    var _b;
+    var className = _a.className, message = _a.message, _c = _a.isByMe, isByMe = _c === void 0 ? false : _c, _d = _a.mouseHover, mouseHover = _d === void 0 ? false : _d, _e = _a.isReactionEnabled, isReactionEnabled = _e === void 0 ? false : _e, _f = _a.truncateLimit, truncateLimit = _f === void 0 ? null : _f;
+    var isMobile = useMediaQueryContext().isMobile;
+    var truncateMaxNum = truncateLimit || (isMobile ? 20 : null);
+    return (React__default.createElement("div", { className: getClassName([
+            className,
+            'sendbird-file-message-item-body',
+            isByMe ? 'outgoing' : 'incoming',
+            mouseHover ? 'mouse-hover' : '',
+            (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
+        ]) },
+        React__default.createElement("div", { className: "sendbird-file-message-item-body__file-icon" },
+            React__default.createElement(Icon, { className: "sendbird-file-message-item-body__file-icon__icon", type: {
+                    IMAGE: IconTypes.PHOTO,
+                    VIDEO: IconTypes.PLAY,
+                    AUDIO: IconTypes.FILE_AUDIO,
+                    GIF: IconTypes.GIF,
+                    OTHERS: IconTypes.FILE_DOCUMENT,
+                }[getUIKitFileType(message === null || message === void 0 ? void 0 : message.type)], fillColor: IconColors.PRIMARY, width: "24px", height: "24px" })),
+        React__default.createElement(TextButton, { className: "sendbird-file-message-item-body__file-name", onClick: function () { window.open(message === null || message === void 0 ? void 0 : message.url); }, color: isByMe ? Colors.ONCONTENT_1 : Colors.ONBACKGROUND_1 },
+            React__default.createElement(Label, { className: "sendbird-file-message-item-body__file-name__text", type: LabelTypography.BODY_1, color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1 }, truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), truncateMaxNum)))));
+}
+
+export { FileMessageItemBody as default };
+//# sourceMappingURL=FileMessageItemBody.js.map

package/ui/FileViewer.js

@@ -0,0 +1,24 @@
+import '../chunks/bundle-c5jegKUx.js';
+import 'react';
+import 'react-dom';
+import '../chunks/bundle-ZSLOjQvb.js';
+import '../hooks/useModal.js';
+import '../chunks/bundle-CQMOLj5V.js';
+import '../chunks/bundle-XtwZ5oLQ.js';
+import '../chunks/bundle-HbEA73mt.js';
+import '../chunks/bundle-u2CeAx57.js';
+import './Icon.js';
+export { b as FileViewerComponent, F as default } from '../chunks/bundle-DB4PuqmB.js';
+import '../chunks/bundle-vUampZQQ.js';
+import '../chunks/bundle-LdRGfmOs.js';
+import '../chunks/bundle-Izb-WW89.js';
+import '../chunks/bundle-KZXjN5v7.js';
+import '../chunks/bundle-yCtFACB5.js';
+import './IconButton.js';
+import './Button.js';
+import '../utils/message/getOutgoingMessageState.js';
+import './ImageRenderer.js';
+import '../chunks/bundle-dJsyeOhk.js';
+import '../chunks/bundle-7JHtC_JJ.js';
+import '../chunks/bundle-EQ2jMcm0.js';
+//# sourceMappingURL=FileViewer.js.map