@sendbird/uikit-react 3.14.10-rc.0 → 3.14.11-rc-0

package/types/ui/MessageMenu/menuItems/BasicItems.d.ts

@@ -0,0 +1,11 @@
+import React, { MouseEvent, ReactNode } from 'react';
+export interface MenuItemProps {
+    className?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    testID?: string;
+    onClick?: (e: MouseEvent<HTMLLIElement | HTMLDivElement>) => void;
+    children: ReactNode;
+}
+export declare const MenuItem: ({ className, disabled, tabIndex, testID, onClick, children, }: MenuItemProps) => React.JSX.Element;
+export declare const BottomSheetMenuItem: ({ className, disabled, tabIndex, testID, onClick, children, }: MenuItemProps) => React.JSX.Element;

package/types/ui/MessageMenu/menuItems/BottomSheetMenuItems.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PrebuildMenuItemPropsType } from './MessageMenuItems';
+export declare const CopyMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const EditMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const ResendMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const ReplyMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const ThreadMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const DeleteMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const DownloadMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;

package/types/ui/MessageMenu/menuItems/MessageMenuItems.d.ts

@@ -0,0 +1,18 @@
+import React, { FocusEvent, MouseEvent, MutableRefObject, ReactNode } from 'react';
+import { IconProps } from '../../Icon';
+import { MenuItemProps } from './BasicItems';
+export interface TriggerIconProps {
+    ref: MutableRefObject<any>;
+    onClick?: (e: MouseEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    renderIcon?: (props: IconProps) => ReactNode;
+}
+export declare const TriggerIcon: ({ ref, onClick, onBlur, renderIcon, }: TriggerIconProps) => React.JSX.Element;
+export type PrebuildMenuItemPropsType = Omit<MenuItemProps, 'children'> & Partial<Pick<MenuItemProps, 'children'>>;
+export declare const CopyMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const ReplyMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const ThreadMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const OpenInChannelMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const EditMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const ResendMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const DeleteMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;

package/types/ui/MessageMenu/menuItems/MobileMenuItems.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PrebuildMenuItemPropsType } from './MessageMenuItems';
+export declare const CopyMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const ReplyMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const ThreadMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const EditMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const ResendMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const DeleteMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;
+export declare const DownloadMenuItem: (props: PrebuildMenuItemPropsType) => React.JSX.Element;

package/types/ui/MobileMenu/types.d.ts

@@ -1,10 +1,14 @@
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 import type { EmojiContainer } from '@sendbird/chat';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { OpenChannel } from '@sendbird/chat/openChannel';
 import { CoreMessageType, SendableMessageType } from '../../utils';
 import { ReplyType } from '../../types';
+import type { RenderMenuItemsParams } from '../MessageMenu/MessageMenu';
 export type DeleteMenuStates = 'DISABLE' | 'HIDE' | 'ACTIVE';
+type MobileRenderMenuItemsParams = {
+    items: Omit<RenderMenuItemsParams['items'], 'OpenInChannelMenuItem'>;
+};
 export interface BaseMenuProps {
     channel: GroupChannel | OpenChannel;
     message: SendableMessageType;
@@ -26,8 +30,10 @@ export interface BaseMenuProps {
     }) => void;
     isOpenedFromThread?: boolean;
     onDownloadClick?: (e: MouseEvent) => Promise<void>;
+    renderMenuItems?: (params: MobileRenderMenuItemsParams) => ReactNode;
 }
 export interface MobileBottomSheetProps extends BaseMenuProps {
     emojiContainer?: EmojiContainer;
     toggleReaction?: (message: SendableMessageType, reactionKey: string, isReacted: boolean) => void;
 }
+export {};

package/types/ui/OGMessageItemBody/index.d.ts

@@ -8,7 +8,8 @@ interface Props {
     mouseHover?: boolean;
     isMentionEnabled?: boolean;
     isReactionEnabled?: boolean;
+    isMarkdownEnabled?: boolean;
     onMessageHeightChange?: () => void;
 }
-export default function OGMessageItemBody({ className, message, isByMe, mouseHover, isMentionEnabled, isReactionEnabled, onMessageHeightChange, }: Props): ReactElement;
+export default function OGMessageItemBody({ className, message, isByMe, mouseHover, isMentionEnabled, isReactionEnabled, isMarkdownEnabled, onMessageHeightChange, }: Props): ReactElement;
 export {};

package/types/ui/TextMessageItemBody/index.d.ts

@@ -8,6 +8,7 @@ interface Props {
     mouseHover?: boolean;
     isMentionEnabled?: boolean;
     isReactionEnabled?: boolean;
+    isMarkdownEnabled?: boolean;
 }
-export default function TextMessageItemBody({ className, message, isByMe, mouseHover, isMentionEnabled, isReactionEnabled, }: Props): ReactElement;
+export default function TextMessageItemBody({ className, message, isByMe, mouseHover, isMentionEnabled, isReactionEnabled, isMarkdownEnabled, }: Props): ReactElement;
 export {};

package/types/utils/menuConditions.d.ts

@@ -0,0 +1,24 @@
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+import type { OpenChannel } from '@sendbird/chat/openChannel';
+import { SendableMessageType } from '.';
+export declare const isReplyTypeMessageEnabled: ({ channel, message }: {
+    channel: any;
+    message: any;
+}) => boolean;
+export interface MenuConditionsParams {
+    message: SendableMessageType;
+    channel: GroupChannel | OpenChannel;
+    isByMe: boolean;
+    replyType: string;
+    onMoveToParentMessage?: (() => void) | null;
+    onReplyInThread?: (props: {
+        message: SendableMessageType;
+    }) => void;
+}
+export declare const showMenuItemCopy: ({ message }: MenuConditionsParams) => boolean;
+export declare const showMenuItemEdit: ({ message, channel, isByMe }: MenuConditionsParams) => boolean;
+export declare const showMenuItemResend: ({ message, isByMe }: MenuConditionsParams) => boolean;
+export declare const showMenuItemDelete: ({ message, channel, isByMe }: MenuConditionsParams) => boolean;
+export declare const showMenuItemOpenInChannel: ({ onMoveToParentMessage }: MenuConditionsParams) => boolean;
+export declare const showMenuItemReply: ({ channel, message, replyType }: MenuConditionsParams) => boolean;
+export declare const showMenuItemThread: ({ channel, message, replyType, onReplyInThread }: MenuConditionsParams) => boolean;

package/ui/Accordion.js

@@ -2,8 +2,8 @@ import React__default, { useMemo } from 'react';
 import Icon, { IconTypes } from './Icon.js';
 import { useAccordionGroupContext, AccordionGroupProvider } from './AccordionGroup.js';
 export { AccordionGroupContext } from './AccordionGroup.js';
-import { c as classnames } from '../chunks/bundle-BPHZWcCv.js';
-import '../chunks/bundle-DdIo_zFs.js';
+import { c as classnames } from '../chunks/bundle-CdRIsiQ1.js';
+import '../chunks/bundle-DIOwxpcG.js';
 
 var Accordion = function (_a) {
     var className = _a.className, id = _a.id, renderTitle = _a.renderTitle, renderContent = _a.renderContent, renderFooter = _a.renderFooter;

package/ui/AccordionGroup.js

@@ -1,5 +1,5 @@
 import React__default, { createContext, useState, useContext } from 'react';
-import { n as noop } from '../chunks/bundle-BPHZWcCv.js';
+import { n as noop } from '../chunks/bundle-CdRIsiQ1.js';
 
 var AccordionGroupContext = createContext({
     openedListKeys: [],

package/ui/AdminMessage.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-DdIo_zFs.js';
+import { c as __spreadArray } from '../chunks/bundle-DIOwxpcG.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DEtCTxPD.js';
-import '../chunks/bundle-DDmvUZXC.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BlCc7_eN.js';
+import '../chunks/bundle-CNHyfb7V.js';
 
 function AdminMessage(_a) {
     var _b;

package/ui/Avatar.js

@@ -1,8 +1,8 @@
-import '../chunks/bundle-DdIo_zFs.js';
+import '../chunks/bundle-DIOwxpcG.js';
 import 'react';
 import './ImageRenderer.js';
-export { b as AvatarInner, A as default } from '../chunks/bundle-CKHDZj3X.js';
-import '../chunks/bundle-BPHZWcCv.js';
-import '../chunks/bundle-BU88BWC9.js';
+export { b as AvatarInner, A as default } from '../chunks/bundle-D_CNS70y.js';
+import '../chunks/bundle-CdRIsiQ1.js';
+import '../chunks/bundle-LJTd2kwV.js';
 import './Icon.js';
 //# sourceMappingURL=Avatar.js.map

package/ui/Badge.js

@@ -1,9 +1,9 @@
-import { c as __spreadArray } from '../chunks/bundle-DdIo_zFs.js';
+import { c as __spreadArray } from '../chunks/bundle-DIOwxpcG.js';
 import React__default, { useContext } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DEtCTxPD.js';
-import { L as LocalizationContext } from '../chunks/bundle-DT4DSBZo.js';
-import '../chunks/bundle-DDmvUZXC.js';
-import '../chunks/bundle-D66A0jl2.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BlCc7_eN.js';
+import { L as LocalizationContext } from '../chunks/bundle-DYYQHn6P.js';
+import '../chunks/bundle-CNHyfb7V.js';
+import '../chunks/bundle-D7eYnlgm.js';
 
 function Badge(_a) {
     var count = _a.count, _b = _a.maxLevel, maxLevel = _b === void 0 ? 2 : _b, _c = _a.className, className = _c === void 0 ? '' : _c;

package/ui/BottomSheet.js

@@ -1,31 +1,32 @@
 import React__default, { useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { a as MODAL_ROOT } from '../chunks/bundle-C7vkuHMJ.js';
+import { a as MODAL_ROOT } from '../chunks/bundle-se1hgaQ-.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import '../chunks/bundle-DdIo_zFs.js';
-import '../chunks/bundle-VXXJZkam.js';
+import '../chunks/bundle-DIOwxpcG.js';
+import '../chunks/bundle-Bq0-bOfM.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-DI7rfz5k.js';
-import '../chunks/bundle-BOBvB-6E.js';
-import '../chunks/bundle-BPHZWcCv.js';
-import '../chunks/bundle-DT4DSBZo.js';
-import '../chunks/bundle-DDmvUZXC.js';
-import '../chunks/bundle-D66A0jl2.js';
-import '../chunks/bundle-ByOz6UaI.js';
+import '../chunks/bundle-CT6oIowo.js';
+import '../chunks/bundle-DKbR0B7W.js';
+import '../chunks/bundle-CdRIsiQ1.js';
+import '../chunks/bundle-DYYQHn6P.js';
+import '../chunks/bundle-CNHyfb7V.js';
+import '../chunks/bundle-D7eYnlgm.js';
+import '../chunks/bundle-5suIscWh.js';
 import './IconButton.js';
 import './Button.js';
-import '../chunks/bundle-DEtCTxPD.js';
+import '../chunks/bundle-BlCc7_eN.js';
 import './Icon.js';
 import '@sendbird/uikit-tools';
 import '../withSendbird.js';
 import 'css-vars-ponyfill';
 import '@sendbird/chat';
-import '../chunks/bundle-BJuiDRhf.js';
+import '../chunks/bundle-CjreAsCZ.js';
 import '@sendbird/chat/openChannel';
-import '../chunks/bundle-DEc9jVCz.js';
-import '../chunks/bundle-B9jaULeT.js';
-import '../chunks/bundle-p7o7XIwK.js';
+import '../chunks/bundle-DDA3KytI.js';
+import '../chunks/bundle-DjH4PXg3.js';
+import './ContextMenu.js';
+import './SortByRow.js';
 
 var BottomSheet = function (props) {
     var _a, _b, _c;

package/ui/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BottomSheet.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/ui/Button.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-DdIo_zFs.js';
+import { c as __spreadArray } from '../chunks/bundle-DIOwxpcG.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DEtCTxPD.js';
-import '../chunks/bundle-DDmvUZXC.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BlCc7_eN.js';
+import '../chunks/bundle-CNHyfb7V.js';
 
 var ButtonTypes;
 (function (ButtonTypes) {

package/ui/ChannelAvatar.js

@@ -1,11 +1,11 @@
 import React__default, { useMemo } from 'react';
-import { A as Avatar } from '../chunks/bundle-CKHDZj3X.js';
+import { A as Avatar } from '../chunks/bundle-D_CNS70y.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-DXfHdLu7.js';
-import '../chunks/bundle-DdIo_zFs.js';
+import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-PaTjZoup.js';
+import '../chunks/bundle-DIOwxpcG.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-BPHZWcCv.js';
-import '../chunks/bundle-BU88BWC9.js';
+import '../chunks/bundle-CdRIsiQ1.js';
+import '../chunks/bundle-LJTd2kwV.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;

package/ui/ConnectionStatus.js

@@ -1,11 +1,11 @@
 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-DEtCTxPD.js';
-import { L as LocalizationContext } from '../chunks/bundle-DT4DSBZo.js';
-import '../chunks/bundle-DdIo_zFs.js';
-import '../chunks/bundle-BPHZWcCv.js';
-import '../chunks/bundle-DDmvUZXC.js';
-import '../chunks/bundle-D66A0jl2.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BlCc7_eN.js';
+import { L as LocalizationContext } from '../chunks/bundle-DYYQHn6P.js';
+import '../chunks/bundle-DIOwxpcG.js';
+import '../chunks/bundle-CdRIsiQ1.js';
+import '../chunks/bundle-CNHyfb7V.js';
+import '../chunks/bundle-D7eYnlgm.js';
 
 function ConnectionStatus() {
     var stringSet = useContext(LocalizationContext).stringSet;

package/ui/ContextMenu.js

@@ -1,18 +1,107 @@
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
-import { M as MenuItems$1 } from '../chunks/bundle-p7o7XIwK.js';
+import { e as __extends, _ as __assign } from '../chunks/bundle-DIOwxpcG.js';
+import { createPortal } from 'react-dom';
+import { c as classnames } from '../chunks/bundle-CdRIsiQ1.js';
 import { Role } from '@sendbird/chat';
 import { OpenChannel } from '@sendbird/chat/openChannel';
-import { createPortal } from 'react-dom';
 import SortByRow from './SortByRow.js';
-import { w as getClassName } from '../chunks/bundle-VXXJZkam.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DEtCTxPD.js';
-import '../chunks/bundle-DdIo_zFs.js';
-import '../chunks/bundle-BJuiDRhf.js';
+import { w as getClassName } from '../chunks/bundle-Bq0-bOfM.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BlCc7_eN.js';
+import '../chunks/bundle-CjreAsCZ.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-DI7rfz5k.js';
-import '../chunks/bundle-BOBvB-6E.js';
-import '../chunks/bundle-DDmvUZXC.js';
+import '../chunks/bundle-CT6oIowo.js';
+import '../chunks/bundle-DKbR0B7W.js';
+import '../chunks/bundle-CNHyfb7V.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: { top: 0, left: 0 },
+            handleClickOutside: function () { },
+        };
+        return _this;
+    }
+    MenuItems.prototype.componentDidMount = function () {
+        this.setupEvents();
+        this.getMenuPosition();
+    };
+    MenuItems.prototype.componentWillUnmount = function () {
+        this.cleanUpEvents();
+    };
+    MenuItems.prototype.render = function () {
+        var portalElement = document.getElementById('sendbird-dropdown-portal');
+        if (!portalElement)
+            return React__default.createElement(React__default.Fragment, null);
+        var menuStyle = this.state.menuStyle;
+        var _a = this.props, children = _a.children, style = _a.style, _b = _a.className, className = _b === void 0 ? '' : _b, testID = _a.testID, id = _a.id;
+        return (createPortal((React__default.createElement("div", { className: classnames(MENU_OBSERVING_CLASS_NAME, className), "data-testid": testID, id: id },
+            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), "data-testid": "sendbird-dropdown-menu" }, children))), portalElement));
+    };
+    return MenuItems;
+}(React__default.Component));
 
 var MuteMenuItem = function (_a) {
     var channel = _a.channel, user = _a.user, _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, _c = _a.disable, disable = _c === void 0 ? false : _c, _d = _a.dataSbId, dataSbId = _d === void 0 ? '' : _d, testID = _a.testID, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.onError, onError = _f === void 0 ? function () { } : _f;
@@ -90,7 +179,7 @@ var OperatorMenuItem = function (_a) {
 
 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 id = _a.id, 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 */
@@ -155,9 +244,9 @@ var EmojiListItems$1 = function (_a) {
             setReactionStyle(reactionStyle);
         }
     }, []);
-    var rootElement = document.getElementById('sendbird-emoji-list-portal');
+    var rootElement = document.getElementById(EMOJI_MENU_ROOT_ID);
     if (rootElement) {
-        return (createPortal(React__default.createElement(React__default.Fragment, null,
+        return (createPortal(React__default.createElement("div", { className: MENU_OBSERVING_CLASS_NAME, id: id },
             React__default.createElement("div", { className: "sendbird-dropdown__menu-backdrop" }),
             React__default.createElement("ul", { className: "sendbird-dropdown__reaction-bar", "data-testid": "sendbird-dropdown__reaction-bar", ref: reactionRef, style: {
                     display: 'inline-block',
@@ -171,6 +260,9 @@ var EmojiListItems$1 = function (_a) {
 };
 
 var ENTER_KEY = 13;
+// # useElementObserve
+var MENU_OBSERVING_CLASS_NAME = 'sendbird-observing-message-menu';
+var getObservingId = function (txt) { return "m_".concat(txt); };
 var MenuItems = MenuItems$1;
 var EmojiListItems = EmojiListItems$1;
 var MenuItem = function (_a) {
@@ -184,9 +276,11 @@ var MenuItem = function (_a) {
             handleClickEvent(e); }, tabIndex: 0, "data-sb-id": testID !== null && testID !== void 0 ? testID : dataSbId, "data-testid": testID !== null && testID !== void 0 ? testID : 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" })); };
+var MENU_ROOT_ID = 'sendbird-dropdown-portal';
+var MenuRoot = function () { return (React__default.createElement("div", { id: MENU_ROOT_ID, className: MENU_ROOT_ID })); };
 // For the test environment
-var EmojiReactionListRoot = function () { return React__default.createElement("div", { id: "sendbird-emoji-list-portal" }); };
+var EMOJI_MENU_ROOT_ID = 'sendbird-emoji-list-portal';
+var EmojiReactionListRoot = function () { return React__default.createElement("div", { id: EMOJI_MENU_ROOT_ID }); };
 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];
@@ -195,5 +289,5 @@ function ContextMenu(_a) {
         (showMenu || isOpen) && menuItems(function () { return setShowMenu(false); })));
 }
 
-export { EmojiListItems, EmojiReactionListRoot, MenuItem, MenuItems, MenuRoot, MuteMenuItem, OperatorMenuItem, ContextMenu as default };
+export { EMOJI_MENU_ROOT_ID, EmojiListItems, EmojiReactionListRoot, MENU_OBSERVING_CLASS_NAME, MENU_ROOT_ID, MenuItem, MenuItems, MenuRoot, MuteMenuItem, OperatorMenuItem, ContextMenu as default, getObservingId };
 //# sourceMappingURL=ContextMenu.js.map

package/ui/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ContextMenu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/ui/DateSeparator.js

@@ -1,8 +1,8 @@
-import { c as __spreadArray } from '../chunks/bundle-DdIo_zFs.js';
+import { c as __spreadArray } from '../chunks/bundle-DIOwxpcG.js';
 import React__default from 'react';
-import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-BpOEDk4N.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DEtCTxPD.js';
-import '../chunks/bundle-DDmvUZXC.js';
+import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-DmtJDvJO.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BlCc7_eN.js';
+import '../chunks/bundle-CNHyfb7V.js';
 
 var DateSeparator = function (_a) {
     var _b = _a.children, children = _b === void 0 ? undefined : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.separatorColor, separatorColor = _d === void 0 ? Colors.ONBACKGROUND_4 : _d;

package/ui/EmojiReactions.js

@@ -4,48 +4,47 @@ import ReactionButton from './ReactionButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import ContextMenu, { EmojiListItems } from './ContextMenu.js';
-import { V as getEmojiUrl, W as isReactedBy, X as getEmojiTooltipString, y as getEmojiListAll, Y as getEmojiMapAll, w as getClassName } from '../chunks/bundle-VXXJZkam.js';
+import { P as getEmojiUrl, Q as isReactedBy, R as getEmojiTooltipString, y as getEmojiListAll, V as getEmojiMapAll, w as getClassName } from '../chunks/bundle-Bq0-bOfM.js';
 import BottomSheet from './BottomSheet.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DEtCTxPD.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BlCc7_eN.js';
 import UserListItem from './UserListItem.js';
-import { c as classnames } from '../chunks/bundle-BPHZWcCv.js';
-import { _ as __assign } from '../chunks/bundle-DdIo_zFs.js';
+import { c as classnames } from '../chunks/bundle-CdRIsiQ1.js';
+import { _ as __assign } from '../chunks/bundle-DIOwxpcG.js';
 import Tooltip from './Tooltip.js';
 import TooltipWrapper from './TooltipWrapper.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-ByOz6UaI.js';
-import { u as useLongPress } from '../chunks/bundle-DhI4QWLh.js';
-import { L as LocalizationContext } from '../chunks/bundle-DT4DSBZo.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-5suIscWh.js';
+import { u as useLongPress } from '../chunks/bundle-BqDr8EF4.js';
+import { L as LocalizationContext } from '../chunks/bundle-DYYQHn6P.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { useMessageContext } from '../Message/context.js';
-import { g as getIsReactionEnabled } from '../chunks/bundle-BDRmRmBl.js';
-import '../chunks/bundle-DDmvUZXC.js';
-import '../chunks/bundle-p7o7XIwK.js';
+import { g as getIsReactionEnabled } from '../chunks/bundle-JEz3lgaG.js';
+import '../chunks/bundle-CNHyfb7V.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-BJuiDRhf.js';
+import '../chunks/bundle-CjreAsCZ.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-DI7rfz5k.js';
-import '../chunks/bundle-BOBvB-6E.js';
-import '../chunks/bundle-C7vkuHMJ.js';
+import '../chunks/bundle-CT6oIowo.js';
+import '../chunks/bundle-DKbR0B7W.js';
+import '../chunks/bundle-se1hgaQ-.js';
 import './IconButton.js';
 import './Button.js';
 import '@sendbird/uikit-tools';
 import '../withSendbird.js';
 import 'css-vars-ponyfill';
-import '../chunks/bundle-DEc9jVCz.js';
-import '../chunks/bundle-B9jaULeT.js';
-import '../chunks/bundle-D66A0jl2.js';
-import '../chunks/bundle-CFVWrfBk.js';
-import '../chunks/bundle-CKHDZj3X.js';
-import '../chunks/bundle-BU88BWC9.js';
+import '../chunks/bundle-DDA3KytI.js';
+import '../chunks/bundle-DjH4PXg3.js';
+import '../chunks/bundle-D7eYnlgm.js';
+import '../chunks/bundle-DwvKuCVj.js';
+import '../chunks/bundle-D_CNS70y.js';
+import '../chunks/bundle-LJTd2kwV.js';
 import './MutedAvatarOverlay.js';
 import './Checkbox.js';
 import './UserProfile.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-6c1kf582.js';
+import '../chunks/bundle-DmIUQle9.js';
 
 var ReactedMembersBottomSheet = function (_a) {
     var _b, _c, _d;

package/ui/EmojiReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiReactions.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EmojiReactions.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/ui/FallbackTemplateMessageItemBody.tsx.js

@@ -1,14 +1,14 @@
 import React__default, { useContext } from 'react';
-import { L as LocalizationContext } from '../chunks/bundle-DT4DSBZo.js';
-import { w as getClassName } from '../chunks/bundle-VXXJZkam.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DEtCTxPD.js';
-import '../chunks/bundle-DdIo_zFs.js';
-import '../chunks/bundle-DDmvUZXC.js';
-import '../chunks/bundle-D66A0jl2.js';
+import { L as LocalizationContext } from '../chunks/bundle-DYYQHn6P.js';
+import { w as getClassName } from '../chunks/bundle-Bq0-bOfM.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BlCc7_eN.js';
+import '../chunks/bundle-DIOwxpcG.js';
+import '../chunks/bundle-CNHyfb7V.js';
+import '../chunks/bundle-D7eYnlgm.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-DI7rfz5k.js';
-import '../chunks/bundle-BOBvB-6E.js';
+import '../chunks/bundle-CT6oIowo.js';
+import '../chunks/bundle-DKbR0B7W.js';
 
 function FallbackTemplateMessageItemBody(_a) {
     var className = _a.className, message = _a.message, isByMe = _a.isByMe;

package/ui/FileMessageItemBody.js

@@ -1,18 +1,18 @@
-import { a as __awaiter, b as __generator } from '../chunks/bundle-DdIo_zFs.js';
+import { a as __awaiter, b as __generator } from '../chunks/bundle-DIOwxpcG.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DEtCTxPD.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-BlCc7_eN.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import TextButton from './TextButton.js';
-import { w as getClassName, o as getUIKitFileType, t as truncateString } from '../chunks/bundle-VXXJZkam.js';
-import { C as Colors } from '../chunks/bundle-BpOEDk4N.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-ByOz6UaI.js';
+import { w as getClassName, o as getUIKitFileType, t as truncateString } from '../chunks/bundle-Bq0-bOfM.js';
+import { C as Colors } from '../chunks/bundle-DmtJDvJO.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-5suIscWh.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { o as openURL } from '../chunks/bundle-BPHZWcCv.js';
-import '../chunks/bundle-DDmvUZXC.js';
+import { o as openURL } from '../chunks/bundle-CdRIsiQ1.js';
+import '../chunks/bundle-CNHyfb7V.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-DI7rfz5k.js';
-import '../chunks/bundle-BOBvB-6E.js';
+import '../chunks/bundle-CT6oIowo.js';
+import '../chunks/bundle-DKbR0B7W.js';
 import '../withSendbird.js';
 
 function FileMessageItemBody(_a) {