@sendbird/uikit-react 3.14.6 → 3.14.7-rc.0

package/types/ui/ContextMenu/items/OperatorMenuItem.d.ts

@@ -8,8 +8,12 @@ export interface OperatorMenuItemProps {
     className?: string | Array<string>;
     children: ReactElement | ReactElement[] | ReactNode;
     disable?: boolean;
+    /**
+     * @deprecated Please use the testID instead
+     */
     dataSbId?: string;
+    testID?: string;
     onChange?: (channel: BaseChannel, user: User, isOperator: boolean) => void;
     onError?: (reason: any) => void;
 }
-export declare const OperatorMenuItem: ({ channel, user, className, children, disable, dataSbId, onChange, onError, }: OperatorMenuItemProps) => ReactElement;
+export declare const OperatorMenuItem: ({ channel, user, className, children, disable, dataSbId, testID, onChange, onError, }: OperatorMenuItemProps) => ReactElement;

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

@@ -12,8 +12,9 @@ export interface IconProps {
     height?: string | number;
     onClick?: React.MouseEventHandler<HTMLDivElement> & React.KeyboardEventHandler<HTMLDivElement>;
     children?: React.ReactNode;
+    testID?: string;
 }
-export default function Icon({ className, type, fillColor, width, height, onClick, children, }: IconProps): React.JSX.Element;
+export default function Icon({ className, type, fillColor, width, height, onClick, children, testID, }: IconProps): React.JSX.Element;
 export declare const IconTypes: {
     readonly ADD: "ADD";
     readonly ARROW_LEFT: "ARROW_LEFT";

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

@@ -12,6 +12,7 @@ export interface IconButtonProps {
     };
     onBlur?: (e: FocusEvent<HTMLButtonElement>) => void;
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    testID?: string;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

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

@@ -7,6 +7,7 @@ type LabelProps = {
     type?: ObjectValues<typeof Typography>;
     color?: ObjectValues<typeof Colors>;
     children?: React.ReactNode;
+    testID?: string;
 };
 export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLDivElement>>;
 declare const LabelTypography: {

package/types/ui/Label/stringSet.d.ts

@@ -127,6 +127,7 @@ declare const stringSet: {
         EDIT_PROFILE__THEME_LABEL: string;
         MESSAGE_INPUT__PLACE_HOLDER: string;
         MESSAGE_INPUT__PLACE_HOLDER__DISABLED: string;
+        MESSAGE_INPUT__PLACE_HOLDER__FROZEN: string;
         MESSAGE_INPUT__PLACE_HOLDER__MUTED: string;
         MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT: string;
         MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER: string;

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

@@ -5,5 +5,6 @@ export interface LoaderProps {
     width?: string | number;
     height?: string | number;
     children?: ReactElement;
+    testID?: string;
 }
-export default function Loader({ className, width, height, children, }: LoaderProps): ReactElement;
+export default function Loader({ className, width, height, children, testID, }: LoaderProps): ReactElement;

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

@@ -2,6 +2,7 @@ import React, { KeyboardEvent, MouseEvent, ReactElement, TouchEvent } from 'reac
 import './index.scss';
 export interface ReactionBadgeProps {
     className?: string | Array<string>;
+    testID?: string;
     children: ReactElement;
     count?: number | string;
     isAdd?: boolean;

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

@@ -6,7 +6,11 @@ export interface ReactionButtonProps {
     width?: string | number;
     height?: string | number;
     selected?: boolean;
+    /**
+     * @deprecated Please use the testID instead
+     */
     dataSbId?: string;
+    testID?: string;
     onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
 }
 declare const ReactionButton: React.ForwardRefExoticComponent<ReactionButtonProps & React.RefAttributes<HTMLDivElement>>;

package/types/ui/TemplateMessageItemBody/LoadingTemplateMessageItemBody.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 export interface LoadingTemplateMessageItemBodyProps {
-    className?: string | Array<string>;
+    className?: string;
     isByMe?: boolean;
 }
 export declare function LoadingTemplateMessageItemBody({ className, isByMe, }: LoadingTemplateMessageItemBodyProps): ReactElement;

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

@@ -4,7 +4,7 @@ import type { BaseMessage } from '@sendbird/chat/message';
 import { SendbirdTheme } from '../../types';
 import { RenderedTemplateBodyType } from '../MessageContent/MessageBody';
 interface TemplateMessageItemBodyProps {
-    className?: string | Array<string>;
+    className?: string;
     message: BaseMessage;
     isByMe?: boolean;
     theme?: SendbirdTheme;

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-Dw9nwO7e.js';
-import '../chunks/bundle-DKkCwVCs.js';
+import { c as classnames } from '../chunks/bundle-C5cPwfl7.js';
+import '../chunks/bundle-CCRwOILr.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-Dw9nwO7e.js';
+import { n as noop } from '../chunks/bundle-C5cPwfl7.js';
 
 var AccordionGroupContext = createContext({
     openedListKeys: [],

package/ui/AdminMessage.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-DKkCwVCs.js';
+import { c as __spreadArray } from '../chunks/bundle-CCRwOILr.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-prXB4t_m.js';
-import '../chunks/bundle-Ce-B4ROs.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import '../chunks/bundle-CqhNkmsl.js';
 
 function AdminMessage(_a) {
     var _b;

package/ui/Avatar.js

@@ -1,8 +1,8 @@
-import '../chunks/bundle-DKkCwVCs.js';
+import '../chunks/bundle-CCRwOILr.js';
 import 'react';
 import './ImageRenderer.js';
-export { b as AvatarInner, A as default } from '../chunks/bundle-BgL9QnGd.js';
-import '../chunks/bundle-Dw9nwO7e.js';
-import '../chunks/bundle-Bmk2FVdj.js';
+export { b as AvatarInner, A as default } from '../chunks/bundle-DnCl_muj.js';
+import '../chunks/bundle-C5cPwfl7.js';
+import '../chunks/bundle-BsBFjLW0.js';
 import './Icon.js';
 //# sourceMappingURL=Avatar.js.map

package/ui/Badge.js

@@ -1,9 +1,9 @@
-import { c as __spreadArray } from '../chunks/bundle-DKkCwVCs.js';
+import { c as __spreadArray } from '../chunks/bundle-CCRwOILr.js';
 import React__default, { useContext } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-prXB4t_m.js';
-import { L as LocalizationContext } from '../chunks/bundle-nfJ9J5Md.js';
-import '../chunks/bundle-Ce-B4ROs.js';
-import '../chunks/bundle-DprHnWfH.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import { L as LocalizationContext } from '../chunks/bundle-BhpRDUCv.js';
+import '../chunks/bundle-CqhNkmsl.js';
+import '../chunks/bundle-144DoI9L.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,29 +1,29 @@
 import React__default, { useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { a as MODAL_ROOT } from '../chunks/bundle-CGmq3qGM.js';
+import { a as MODAL_ROOT } from '../chunks/bundle-BkNi-A4T.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import '../chunks/bundle-DKkCwVCs.js';
-import '../chunks/bundle-janisM9b.js';
+import '../chunks/bundle-CCRwOILr.js';
+import '../chunks/bundle-CIHtPXyv.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-Dw9nwO7e.js';
-import '../chunks/bundle-nfJ9J5Md.js';
-import '../chunks/bundle-Ce-B4ROs.js';
-import '../chunks/bundle-DprHnWfH.js';
-import '../chunks/bundle-3Mubyujl.js';
+import '../chunks/bundle-C5cPwfl7.js';
+import '../chunks/bundle-BhpRDUCv.js';
+import '../chunks/bundle-CqhNkmsl.js';
+import '../chunks/bundle-144DoI9L.js';
+import '../chunks/bundle-BU6Qpz93.js';
 import './IconButton.js';
 import './Button.js';
-import '../chunks/bundle-prXB4t_m.js';
+import '../chunks/bundle-rmCgpYl2.js';
 import './Icon.js';
 import '@sendbird/uikit-tools';
 import '../withSendbird.js';
 import 'css-vars-ponyfill';
 import '@sendbird/chat';
-import '../chunks/bundle-uIqOEfCa.js';
+import '../chunks/bundle-BR1kJOcI.js';
 import '@sendbird/chat/openChannel';
-import '../chunks/bundle-BMQLJ23N.js';
-import '../chunks/bundle-DhBuJR0w.js';
-import '../chunks/bundle-DwJ8HgZK.js';
+import '../chunks/bundle-DZRXYe29.js';
+import '../chunks/bundle-hHUThi_g.js';
+import '../chunks/bundle-CM2t7eH3.js';
 
 var BottomSheet = function (props) {
     var _a, _b, _c;

package/ui/Button.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-DKkCwVCs.js';
+import { c as __spreadArray } from '../chunks/bundle-CCRwOILr.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-prXB4t_m.js';
-import '../chunks/bundle-Ce-B4ROs.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import '../chunks/bundle-CqhNkmsl.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-BgL9QnGd.js';
+import { A as Avatar } from '../chunks/bundle-DnCl_muj.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-COoyrRF6.js';
-import '../chunks/bundle-DKkCwVCs.js';
+import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-BQo6_bfT.js';
+import '../chunks/bundle-CCRwOILr.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-Dw9nwO7e.js';
-import '../chunks/bundle-Bmk2FVdj.js';
+import '../chunks/bundle-C5cPwfl7.js';
+import '../chunks/bundle-BsBFjLW0.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-prXB4t_m.js';
-import { L as LocalizationContext } from '../chunks/bundle-nfJ9J5Md.js';
-import '../chunks/bundle-DKkCwVCs.js';
-import '../chunks/bundle-Dw9nwO7e.js';
-import '../chunks/bundle-Ce-B4ROs.js';
-import '../chunks/bundle-DprHnWfH.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import { L as LocalizationContext } from '../chunks/bundle-BhpRDUCv.js';
+import '../chunks/bundle-CCRwOILr.js';
+import '../chunks/bundle-C5cPwfl7.js';
+import '../chunks/bundle-CqhNkmsl.js';
+import '../chunks/bundle-144DoI9L.js';
 
 function ConnectionStatus() {
     var stringSet = useContext(LocalizationContext).stringSet;

package/ui/ContextMenu.js

@@ -1,19 +1,19 @@
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
-import { M as MenuItems$1 } from '../chunks/bundle-DwJ8HgZK.js';
+import { M as MenuItems$1 } from '../chunks/bundle-CM2t7eH3.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-janisM9b.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-prXB4t_m.js';
-import '../chunks/bundle-DKkCwVCs.js';
-import '../chunks/bundle-uIqOEfCa.js';
+import { w as getClassName } from '../chunks/bundle-CIHtPXyv.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import '../chunks/bundle-CCRwOILr.js';
+import '../chunks/bundle-BR1kJOcI.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-Ce-B4ROs.js';
+import '../chunks/bundle-CqhNkmsl.js';
 
 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, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.onError, onError = _f === void 0 ? function () { } : _f;
+    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;
     var _g = useState(user.isMuted), isMuted = _g[0], setIsMuted = _g[1];
     var isProcessing = useRef(false);
     var onClickHandler = useCallback(function () {
@@ -45,11 +45,11 @@ var MuteMenuItem = function (_a) {
             }
         }
     }, [isProcessing, isMuted]);
-    return (React__default.createElement(MenuItem, { className: className, disable: disable, dataSbId: dataSbId, onClick: onClickHandler }, children));
+    return (React__default.createElement(MenuItem, { className: className, disable: disable, testID: testID !== null && testID !== void 0 ? testID : dataSbId, onClick: onClickHandler }, children));
 };
 
 var OperatorMenuItem = 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, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.onError, onError = _f === void 0 ? function () { } : _f;
+    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;
     var _g = useState(channel instanceof OpenChannel
         ? channel.isOperator(user)
         : user.role === Role.OPERATOR), isOperator = _g[0], setIsOperator = _g[1];
@@ -83,7 +83,7 @@ var OperatorMenuItem = function (_a) {
             }
         }
     }, [isProcessing, isOperator]);
-    return (React__default.createElement(MenuItem, { className: className, disable: disable, dataSbId: dataSbId, onClick: onClickHandler }, children));
+    return (React__default.createElement(MenuItem, { className: className, disable: disable, testID: testID !== null && testID !== void 0 ? testID : dataSbId, onClick: onClickHandler }, children));
 };
 
 var defaultParentRect = { x: 0, y: 0, left: 0, top: 0, height: 0 };
@@ -157,7 +157,7 @@ var EmojiListItems$1 = function (_a) {
     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: {
+            React__default.createElement("ul", { className: "sendbird-dropdown__reaction-bar", "data-testid": "sendbird-dropdown__reaction-bar", ref: reactionRef, style: {
                     display: 'inline-block',
                     position: 'fixed',
                     left: "".concat(Math.round(reactionStyle.left), "px"),
@@ -172,14 +172,14 @@ 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 _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, testID = _a.testID;
     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 },
+            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" })); };

package/ui/DateSeparator.js

@@ -1,8 +1,8 @@
-import { c as __spreadArray } from '../chunks/bundle-DKkCwVCs.js';
+import { c as __spreadArray } from '../chunks/bundle-CCRwOILr.js';
 import React__default from 'react';
-import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-h8I0AuUK.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-prXB4t_m.js';
-import '../chunks/bundle-Ce-B4ROs.js';
+import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-ThfYP9g9.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import '../chunks/bundle-CqhNkmsl.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,46 +4,46 @@ 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-janisM9b.js';
+import { V as getEmojiUrl, W as isReactedBy, X as getEmojiTooltipString, y as getEmojiListAll, Y as getEmojiMapAll, w as getClassName } from '../chunks/bundle-CIHtPXyv.js';
 import BottomSheet from './BottomSheet.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-prXB4t_m.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
 import UserListItem from './UserListItem.js';
-import { c as classnames } from '../chunks/bundle-Dw9nwO7e.js';
-import { _ as __assign } from '../chunks/bundle-DKkCwVCs.js';
+import { c as classnames } from '../chunks/bundle-C5cPwfl7.js';
+import { _ as __assign } from '../chunks/bundle-CCRwOILr.js';
 import Tooltip from './Tooltip.js';
 import TooltipWrapper from './TooltipWrapper.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-3Mubyujl.js';
-import { u as useLongPress } from '../chunks/bundle-RoB3xpYU.js';
-import { L as LocalizationContext } from '../chunks/bundle-nfJ9J5Md.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-BU6Qpz93.js';
+import { u as useLongPress } from '../chunks/bundle--dzeu7GZ.js';
+import { L as LocalizationContext } from '../chunks/bundle-BhpRDUCv.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { useMessageContext } from '../Message/context.js';
-import { g as getIsReactionEnabled } from '../chunks/bundle-BFa8UJ8b.js';
-import '../chunks/bundle-Ce-B4ROs.js';
-import '../chunks/bundle-DwJ8HgZK.js';
+import { g as getIsReactionEnabled } from '../chunks/bundle-D8YkcooO.js';
+import '../chunks/bundle-CqhNkmsl.js';
+import '../chunks/bundle-CM2t7eH3.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-uIqOEfCa.js';
+import '../chunks/bundle-BR1kJOcI.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-CGmq3qGM.js';
+import '../chunks/bundle-BkNi-A4T.js';
 import './IconButton.js';
 import './Button.js';
 import '@sendbird/uikit-tools';
 import '../withSendbird.js';
 import 'css-vars-ponyfill';
-import '../chunks/bundle-BMQLJ23N.js';
-import '../chunks/bundle-DhBuJR0w.js';
-import '../chunks/bundle-DprHnWfH.js';
-import '../chunks/bundle-C_dNvBEo.js';
-import '../chunks/bundle-BgL9QnGd.js';
-import '../chunks/bundle-Bmk2FVdj.js';
+import '../chunks/bundle-DZRXYe29.js';
+import '../chunks/bundle-hHUThi_g.js';
+import '../chunks/bundle-144DoI9L.js';
+import '../chunks/bundle-nDjk3-Gt.js';
+import '../chunks/bundle-DnCl_muj.js';
+import '../chunks/bundle-BsBFjLW0.js';
 import './MutedAvatarOverlay.js';
 import './Checkbox.js';
 import './UserProfile.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-CriEArZn.js';
+import '../chunks/bundle-ScIM6mz0.js';
 
 var ReactedMembersBottomSheet = function (_a) {
     var _b, _c, _d;
@@ -116,7 +116,7 @@ var AddReactionBadgeItem = function (_a) {
         shouldPreventDefault: true,
         shouldStopPropagation: true,
     });
-    return (React__default.createElement("div", __assign({ className: "sendbird-emoji-reactions__add-reaction-badge" }, onlyClick),
+    return (React__default.createElement("div", __assign({ className: "sendbird-emoji-reactions__add-reaction-badge", "data-testid": "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" }))));
 };
@@ -134,7 +134,7 @@ var MobileEmojisBottomSheet = function (_a) {
                     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) },
+                }, testID: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
                 React__default.createElement(ImageRenderer, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (_a) {
                         var style = _a.style;
                         return (React__default.createElement("div", { style: style },
@@ -170,7 +170,7 @@ var EmojiReactions = function (_a) {
         (((_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) {
+        (!isMobile && showAddReactionBadge) && (React__default.createElement(ContextMenu, { menuTrigger: function (toggleDropdown) { return (React__default.createElement(ReactionBadge, { className: "sendbird-emoji-reactions__add-reaction-badge", testID: "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);
@@ -182,7 +182,7 @@ var EmojiReactions = function (_a) {
                         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) },
+                    }, testID: "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 (_a) {
                             var style = _a.style;
                             return (React__default.createElement("div", { style: style },

package/ui/FallbackTemplateMessageItemBody.tsx.js

@@ -1,10 +1,10 @@
 import React__default, { useContext } from 'react';
-import { L as LocalizationContext } from '../chunks/bundle-nfJ9J5Md.js';
-import { w as getClassName } from '../chunks/bundle-janisM9b.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-prXB4t_m.js';
-import '../chunks/bundle-DKkCwVCs.js';
-import '../chunks/bundle-Ce-B4ROs.js';
-import '../chunks/bundle-DprHnWfH.js';
+import { L as LocalizationContext } from '../chunks/bundle-BhpRDUCv.js';
+import { w as getClassName } from '../chunks/bundle-CIHtPXyv.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import '../chunks/bundle-CCRwOILr.js';
+import '../chunks/bundle-CqhNkmsl.js';
+import '../chunks/bundle-144DoI9L.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
 

package/ui/FileMessageItemBody.js

@@ -1,14 +1,14 @@
-import { a as __awaiter, b as __generator } from '../chunks/bundle-DKkCwVCs.js';
+import { a as __awaiter, b as __generator } from '../chunks/bundle-CCRwOILr.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-prXB4t_m.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.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-janisM9b.js';
-import { C as Colors } from '../chunks/bundle-h8I0AuUK.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-3Mubyujl.js';
+import { w as getClassName, o as getUIKitFileType, t as truncateString } from '../chunks/bundle-CIHtPXyv.js';
+import { C as Colors } from '../chunks/bundle-ThfYP9g9.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-BU6Qpz93.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { o as openURL } from '../chunks/bundle-Dw9nwO7e.js';
-import '../chunks/bundle-Ce-B4ROs.js';
+import { o as openURL } from '../chunks/bundle-C5cPwfl7.js';
+import '../chunks/bundle-CqhNkmsl.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
 import '../withSendbird.js';
@@ -70,7 +70,7 @@ function FileMessageItemBody(_a) {
                     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: handleOnClickTextButton, 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)))));
+            React__default.createElement(Label, { className: "sendbird-file-message-item-body__file-name__text", testID: "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 };

package/ui/FileViewer.js

@@ -1,32 +1,32 @@
-import '../chunks/bundle-DKkCwVCs.js';
+import '../chunks/bundle-CCRwOILr.js';
 import 'react';
 import 'react-dom';
-import '../chunks/bundle-nfJ9J5Md.js';
-import '../chunks/bundle-CGmq3qGM.js';
-import '../chunks/bundle-janisM9b.js';
-import '../chunks/bundle-Dw9nwO7e.js';
-import '../chunks/bundle-BgL9QnGd.js';
-import '../chunks/bundle-prXB4t_m.js';
+import '../chunks/bundle-BhpRDUCv.js';
+import '../chunks/bundle-BkNi-A4T.js';
+import '../chunks/bundle-CIHtPXyv.js';
+import '../chunks/bundle-C5cPwfl7.js';
+import '../chunks/bundle-DnCl_muj.js';
+import '../chunks/bundle-rmCgpYl2.js';
 import './Icon.js';
-export { b as FileViewerComponent, F as default } from '../chunks/bundle-Cn6S1UKt.js';
-import '../chunks/bundle-B4izwMfD.js';
-import '../chunks/bundle-Ce-B4ROs.js';
-import '../chunks/bundle-DprHnWfH.js';
-import '../chunks/bundle-3Mubyujl.js';
+export { b as FileViewerComponent, F as default } from '../chunks/bundle-LkO70XqN.js';
+import '../chunks/bundle-CEKJ0RSH.js';
+import '../chunks/bundle-CqhNkmsl.js';
+import '../chunks/bundle-144DoI9L.js';
+import '../chunks/bundle-BU6Qpz93.js';
 import './IconButton.js';
 import './Button.js';
 import '@sendbird/uikit-tools';
 import '../withSendbird.js';
 import 'css-vars-ponyfill';
 import '@sendbird/chat';
-import '../chunks/bundle-uIqOEfCa.js';
+import '../chunks/bundle-BR1kJOcI.js';
 import '@sendbird/chat/openChannel';
 import '@sendbird/chat/groupChannel';
-import '../chunks/bundle-BMQLJ23N.js';
-import '../chunks/bundle-DhBuJR0w.js';
+import '../chunks/bundle-DZRXYe29.js';
+import '../chunks/bundle-hHUThi_g.js';
 import '../useSendbirdStateContext.js';
-import '../chunks/bundle-DwJ8HgZK.js';
+import '../chunks/bundle-CM2t7eH3.js';
 import '../utils/message/getOutgoingMessageState.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-Bmk2FVdj.js';
+import '../chunks/bundle-BsBFjLW0.js';
 //# sourceMappingURL=FileViewer.js.map

package/ui/Header.js

@@ -1,13 +1,13 @@
-import { _ as __assign } from '../chunks/bundle-DKkCwVCs.js';
+import { _ as __assign } from '../chunks/bundle-CCRwOILr.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-prXB4t_m.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-3Mubyujl.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-BU6Qpz93.js';
 import TextButton from './TextButton.js';
 import Icon$1 from './Icon.js';
 import IconButton$1 from './IconButton.js';
-import { c as classnames, n as noop } from '../chunks/bundle-Dw9nwO7e.js';
-import '../chunks/bundle-Ce-B4ROs.js';
-import '../chunks/bundle-h8I0AuUK.js';
+import { c as classnames, n as noop } from '../chunks/bundle-C5cPwfl7.js';
+import '../chunks/bundle-CqhNkmsl.js';
+import '../chunks/bundle-ThfYP9g9.js';
 
 var Header = function (_a) {
     var _b;
@@ -19,7 +19,7 @@ var Header = function (_a) {
     catch (err) {
         // TODO: handle it
     }
-    return (React__default.createElement("div", { className: "sendbird-ui-header ".concat(className) },
+    return (React__default.createElement("div", { className: classnames('sendbird-ui-header', className), "data-testid": "sendbird-ui-header" },
         renderLeft ? (React__default.createElement("div", { className: classnames('sendbird-ui-header__left', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop') }, renderLeft === null || renderLeft === void 0 ? void 0 : renderLeft())) : null,
         React__default.createElement("div", { className: "sendbird-ui-header__middle" }, renderMiddle === null || renderMiddle === void 0 ? void 0 : renderMiddle()),
         renderRight ? (React__default.createElement("div", { className: classnames('sendbird-ui-header__right', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop') }, renderRight === null || renderRight === void 0 ? void 0 : renderRight())) : null));