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

package/types/stories/common/useSampleChannel.d.ts

@@ -0,0 +1,7 @@
+import { GroupChannel } from "@sendbird/chat/groupChannel";
+type UseSampleChannelParams = {
+    appId?: string;
+    userId?: string;
+};
+export declare const useSampleChannel: ({ appId, userId, }?: UseSampleChannelParams) => GroupChannel | null;
+export {};

package/types/ui/FileViewer/types.d.ts

@@ -1,16 +1,4 @@
 import { MouseEvent } from 'react';
-export type SupportedImageMimesType = 'image/jpeg' | 'image/jpg' | 'image/png' | 'image/gif' | 'image/svg+xml' | 'image/webp';
-export type SupportedVideoMimesType = 'video/mpeg' | 'video/ogg' | 'video/webm' | 'video/mp4';
-export type SupportedMimesType = SupportedImageMimesType | SupportedVideoMimesType;
-export declare const isImage: (type: string) => boolean;
-export declare const isVideo: (type: string) => boolean;
-export declare const isGif: (type: string) => boolean;
-export declare const unSupported: (type: string) => boolean;
-declare const _default: {
-    IMAGE: string[];
-    VIDEO: string[];
-};
-export default _default;
 export declare const ViewerTypes: {
     readonly SINGLE: "SINGLE";
     readonly MULTI: "MULTI";

package/types/utils/browser.d.ts

@@ -0,0 +1,2 @@
+export declare const isSafari: (userAgent: string) => boolean;
+export declare const isMobileIOS: (userAgent: string) => boolean;

package/types/utils/index.d.ts

@@ -39,6 +39,12 @@ export interface SendingMessageStatus {
 export type CoreMessageType = AdminMessage | UserMessage | FileMessage | MultipleFilesMessage;
 export type SendableMessageType = UserMessage | FileMessage | MultipleFilesMessage;
 export declare const isTextuallyNull: (text: string) => boolean;
+export declare const isMOVType: (type: string) => boolean;
+/**
+ * @link: https://sendbird.atlassian.net/browse/SBISSUE-16031?focusedCommentId=270601
+ * We limitedly support .mov file type for ThumbnailMessage only in Safari browser.
+ * */
+export declare const isSupportedVideoFileTypeInSafari: (type: string) => boolean;
 export declare const isImage: (type: string) => boolean;
 export declare const isVideo: (type: string) => boolean;
 export declare const isGif: (type: string) => boolean;

package/types/utils/utils.d.ts

@@ -3,7 +3,6 @@ export declare const noop: () => void;
 export declare const getSenderProfileUrl: (message: SendableMessageType) => string;
 export declare const getSenderName: (message: SendableMessageType) => string;
 export declare const isAboutSame: (a: number, b: number, px: number) => boolean;
-export declare const isMobileIOS: (userAgent: string) => boolean;
 export declare const deleteNullish: <T>(obj: T) => T;
 export declare function openURL(url?: string | null): void;
 type Falsy = undefined | null | false | 0 | '';

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

package/ui/AdminMessage.js

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

package/ui/Avatar.js

@@ -1,8 +1,8 @@
-import '../chunks/bundle-CCRwOILr.js';
+import '../chunks/bundle-DZGTQbIQ.js';
 import 'react';
 import './ImageRenderer.js';
-export { b as AvatarInner, A as default } from '../chunks/bundle-DnCl_muj.js';
-import '../chunks/bundle-C5cPwfl7.js';
-import '../chunks/bundle-BsBFjLW0.js';
+export { b as AvatarInner, A as default } from '../chunks/bundle-Cp__-su1.js';
+import '../chunks/bundle-DRWAxAQV.js';
+import '../chunks/bundle-CkVEsYYj.js';
 import './Icon.js';
 //# sourceMappingURL=Avatar.js.map

package/ui/Badge.js

@@ -1,9 +1,9 @@
-import { c as __spreadArray } from '../chunks/bundle-CCRwOILr.js';
+import { c as __spreadArray } from '../chunks/bundle-DZGTQbIQ.js';
 import React__default, { useContext } from 'react';
-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';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
+import { L as LocalizationContext } from '../chunks/bundle-DscXzkZp.js';
+import '../chunks/bundle-2-kqCUYe.js';
+import '../chunks/bundle-C_0PkSLz.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-BkNi-A4T.js';
+import { a as MODAL_ROOT } from '../chunks/bundle-BbEchf9w.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import '../chunks/bundle-CCRwOILr.js';
-import '../chunks/bundle-CIHtPXyv.js';
+import '../chunks/bundle-DZGTQbIQ.js';
+import '../chunks/bundle-Dep7yb3u.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.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 '../chunks/bundle-DRWAxAQV.js';
+import '../chunks/bundle-DscXzkZp.js';
+import '../chunks/bundle-2-kqCUYe.js';
+import '../chunks/bundle-C_0PkSLz.js';
+import '../chunks/bundle-CONGgsDe.js';
 import './IconButton.js';
 import './Button.js';
-import '../chunks/bundle-rmCgpYl2.js';
+import '../chunks/bundle-zMFwTPRJ.js';
 import './Icon.js';
 import '@sendbird/uikit-tools';
 import '../withSendbird.js';
 import 'css-vars-ponyfill';
 import '@sendbird/chat';
-import '../chunks/bundle-BR1kJOcI.js';
+import '../chunks/bundle-DgHm7Q7u.js';
 import '@sendbird/chat/openChannel';
-import '../chunks/bundle-DZRXYe29.js';
-import '../chunks/bundle-hHUThi_g.js';
-import '../chunks/bundle-CM2t7eH3.js';
+import '../chunks/bundle-l5I18rBj.js';
+import '../chunks/bundle-BePR9e3Z.js';
+import '../chunks/bundle-D4e9r_5E.js';
 
 var BottomSheet = function (props) {
     var _a, _b, _c;

package/ui/Button.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-CCRwOILr.js';
+import { c as __spreadArray } from '../chunks/bundle-DZGTQbIQ.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
-import '../chunks/bundle-CqhNkmsl.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
+import '../chunks/bundle-2-kqCUYe.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-DnCl_muj.js';
+import { A as Avatar } from '../chunks/bundle-Cp__-su1.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-BQo6_bfT.js';
-import '../chunks/bundle-CCRwOILr.js';
+import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-BTneiqM2.js';
+import '../chunks/bundle-DZGTQbIQ.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-C5cPwfl7.js';
-import '../chunks/bundle-BsBFjLW0.js';
+import '../chunks/bundle-DRWAxAQV.js';
+import '../chunks/bundle-CkVEsYYj.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-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';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
+import { L as LocalizationContext } from '../chunks/bundle-DscXzkZp.js';
+import '../chunks/bundle-DZGTQbIQ.js';
+import '../chunks/bundle-DRWAxAQV.js';
+import '../chunks/bundle-2-kqCUYe.js';
+import '../chunks/bundle-C_0PkSLz.js';
 
 function ConnectionStatus() {
     var stringSet = useContext(LocalizationContext).stringSet;

package/ui/ContextMenu.js

@@ -1,16 +1,16 @@
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
-import { M as MenuItems$1 } from '../chunks/bundle-CM2t7eH3.js';
+import { M as MenuItems$1 } from '../chunks/bundle-D4e9r_5E.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-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 { w as getClassName } from '../chunks/bundle-Dep7yb3u.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
+import '../chunks/bundle-DZGTQbIQ.js';
+import '../chunks/bundle-DgHm7Q7u.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-CqhNkmsl.js';
+import '../chunks/bundle-2-kqCUYe.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, testID = _a.testID, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.onError, onError = _f === void 0 ? function () { } : _f;

package/ui/DateSeparator.js

@@ -1,8 +1,8 @@
-import { c as __spreadArray } from '../chunks/bundle-CCRwOILr.js';
+import { c as __spreadArray } from '../chunks/bundle-DZGTQbIQ.js';
 import React__default from 'react';
-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';
+import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-D7oF64FT.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
+import '../chunks/bundle-2-kqCUYe.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-CIHtPXyv.js';
+import { W as getEmojiUrl, X as isReactedBy, Y as getEmojiTooltipString, y as getEmojiListAll, Z as getEmojiMapAll, w as getClassName } from '../chunks/bundle-Dep7yb3u.js';
 import BottomSheet from './BottomSheet.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
 import UserListItem from './UserListItem.js';
-import { c as classnames } from '../chunks/bundle-C5cPwfl7.js';
-import { _ as __assign } from '../chunks/bundle-CCRwOILr.js';
+import { c as classnames } from '../chunks/bundle-DRWAxAQV.js';
+import { _ as __assign } from '../chunks/bundle-DZGTQbIQ.js';
 import Tooltip from './Tooltip.js';
 import TooltipWrapper from './TooltipWrapper.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 { u as useMediaQueryContext } from '../chunks/bundle-CONGgsDe.js';
+import { u as useLongPress } from '../chunks/bundle-CscOrsFl.js';
+import { L as LocalizationContext } from '../chunks/bundle-DscXzkZp.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { useMessageContext } from '../Message/context.js';
-import { g as getIsReactionEnabled } from '../chunks/bundle-D8YkcooO.js';
-import '../chunks/bundle-CqhNkmsl.js';
-import '../chunks/bundle-CM2t7eH3.js';
+import { g as getIsReactionEnabled } from '../chunks/bundle-Bfq-8HBA.js';
+import '../chunks/bundle-2-kqCUYe.js';
+import '../chunks/bundle-D4e9r_5E.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-BR1kJOcI.js';
+import '../chunks/bundle-DgHm7Q7u.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-BkNi-A4T.js';
+import '../chunks/bundle-BbEchf9w.js';
 import './IconButton.js';
 import './Button.js';
 import '@sendbird/uikit-tools';
 import '../withSendbird.js';
 import 'css-vars-ponyfill';
-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 '../chunks/bundle-l5I18rBj.js';
+import '../chunks/bundle-BePR9e3Z.js';
+import '../chunks/bundle-C_0PkSLz.js';
+import '../chunks/bundle-B4S7eiiS.js';
+import '../chunks/bundle-Cp__-su1.js';
+import '../chunks/bundle-CkVEsYYj.js';
 import './MutedAvatarOverlay.js';
 import './Checkbox.js';
 import './UserProfile.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-ScIM6mz0.js';
+import '../chunks/bundle-CnRkOCeA.js';
 
 var ReactedMembersBottomSheet = function (_a) {
     var _b, _c, _d;

package/ui/FallbackTemplateMessageItemBody.tsx.js

@@ -1,10 +1,10 @@
 import React__default, { useContext } from 'react';
-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 { L as LocalizationContext } from '../chunks/bundle-DscXzkZp.js';
+import { w as getClassName } from '../chunks/bundle-Dep7yb3u.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
+import '../chunks/bundle-DZGTQbIQ.js';
+import '../chunks/bundle-2-kqCUYe.js';
+import '../chunks/bundle-C_0PkSLz.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-CCRwOILr.js';
+import { a as __awaiter, b as __generator } from '../chunks/bundle-DZGTQbIQ.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-rmCgpYl2.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.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-CIHtPXyv.js';
-import { C as Colors } from '../chunks/bundle-ThfYP9g9.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-BU6Qpz93.js';
+import { w as getClassName, o as getUIKitFileType, t as truncateString } from '../chunks/bundle-Dep7yb3u.js';
+import { C as Colors } from '../chunks/bundle-D7oF64FT.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-CONGgsDe.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { o as openURL } from '../chunks/bundle-C5cPwfl7.js';
-import '../chunks/bundle-CqhNkmsl.js';
+import { o as openURL } from '../chunks/bundle-DRWAxAQV.js';
+import '../chunks/bundle-2-kqCUYe.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
 import '../withSendbird.js';

package/ui/FileViewer.js

@@ -1,32 +1,145 @@
-import '../chunks/bundle-CCRwOILr.js';
-import 'react';
-import 'react-dom';
-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-LkO70XqN.js';
-import '../chunks/bundle-CEKJ0RSH.js';
-import '../chunks/bundle-CqhNkmsl.js';
-import '../chunks/bundle-144DoI9L.js';
-import '../chunks/bundle-BU6Qpz93.js';
+import { _ as __assign } from '../chunks/bundle-DZGTQbIQ.js';
+import React__default, { useRef, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { L as LocalizationContext } from '../chunks/bundle-DscXzkZp.js';
+import { a as MODAL_ROOT } from '../chunks/bundle-BbEchf9w.js';
+import { c as isMultipleFilesMessage, b as isFileMessage, h as isSupportedFileView, j as isVideo, k as isImage } from '../chunks/bundle-Dep7yb3u.js';
+import { n as noop } from '../chunks/bundle-DRWAxAQV.js';
+import { A as Avatar } from '../chunks/bundle-Cp__-su1.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { l as SLIDER_BUTTON_ICON_SIDE_LENGTH } from '../chunks/bundle-BePR9e3Z.js';
+import { u as useKeyDown } from '../chunks/bundle-I9UlaUZV.js';
+import '../chunks/bundle-2-kqCUYe.js';
+import '../chunks/bundle-C_0PkSLz.js';
+import '../chunks/bundle-CONGgsDe.js';
 import './IconButton.js';
 import './Button.js';
 import '@sendbird/uikit-tools';
 import '../withSendbird.js';
 import 'css-vars-ponyfill';
 import '@sendbird/chat';
-import '../chunks/bundle-BR1kJOcI.js';
+import '../chunks/bundle-DgHm7Q7u.js';
 import '@sendbird/chat/openChannel';
 import '@sendbird/chat/groupChannel';
-import '../chunks/bundle-DZRXYe29.js';
-import '../chunks/bundle-hHUThi_g.js';
+import '../chunks/bundle-l5I18rBj.js';
 import '../useSendbirdStateContext.js';
-import '../chunks/bundle-CM2t7eH3.js';
+import '../chunks/bundle-D4e9r_5E.js';
 import '../utils/message/getOutgoingMessageState.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-BsBFjLW0.js';
+import '../chunks/bundle-CkVEsYYj.js';
+
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
+var ViewerTypes = {
+    SINGLE: 'SINGLE',
+    MULTI: 'MULTI',
+};
+
+function mapFileViewerComponentProps(_a) {
+    var props = _a.props;
+    if (props.viewerType === ViewerTypes.MULTI) {
+        var _b = props, fileInfoList = _b.fileInfoList, currentIndex = _b.currentIndex;
+        return fileInfoList[currentIndex];
+    }
+    var fileInfo = props;
+    return {
+        name: fileInfo.name,
+        type: fileInfo.type,
+        url: fileInfo.url,
+    };
+}
+
+function DeleteButton(props) {
+    if (props.viewerType !== ViewerTypes.MULTI) {
+        var onDelete_1 = props.onDelete, isByMe = props.isByMe, disableDelete_1 = props.disableDelete, className = props.className;
+        return (isByMe)
+            ? (React__default.createElement("div", { className: "sendbird-fileviewer__header__right__actions__delete ".concat(className) },
+                React__default.createElement(Icon, { className: disableDelete_1 ? 'disabled' : '', type: IconTypes.DELETE, fillColor: disableDelete_1 ? IconColors.GRAY : IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: function (e) { if (!disableDelete_1) {
+                        onDelete_1 === null || onDelete_1 === void 0 ? void 0 : onDelete_1(e);
+                    } } })))
+            : React__default.createElement(React__default.Fragment, null);
+    }
+    return React__default.createElement(React__default.Fragment, null);
+}
+
+// this is a slider component that is used to navigate between images
+function Slider(props) {
+    if (props.viewerType === ViewerTypes.MULTI) {
+        var onClickLeft_1 = props.onClickLeft, onClickRight_1 = props.onClickRight;
+        return (React__default.createElement("div", { className: "sendbird-file-viewer-slider" },
+            React__default.createElement("div", { className: "sendbird-file-viewer-arrow--left" },
+                React__default.createElement(Icon, { type: IconTypes.SLIDE_LEFT, fillColor: IconColors.ON_BACKGROUND_1, height: SLIDER_BUTTON_ICON_SIDE_LENGTH, width: SLIDER_BUTTON_ICON_SIDE_LENGTH, onClick: function (e) {
+                        onClickLeft_1 === null || onClickLeft_1 === void 0 ? void 0 : onClickLeft_1();
+                        e.stopPropagation();
+                    } })),
+            React__default.createElement("div", { className: "sendbird-file-viewer-arrow--right" },
+                React__default.createElement(Icon, { type: IconTypes.SLIDE_LEFT, fillColor: IconColors.ON_BACKGROUND_1, height: SLIDER_BUTTON_ICON_SIDE_LENGTH, width: SLIDER_BUTTON_ICON_SIDE_LENGTH, onClick: function (e) {
+                        e.stopPropagation();
+                        onClickRight_1 === null || onClickRight_1 === void 0 ? void 0 : onClickRight_1();
+                    } }))));
+    }
+    // return empty fragment if viewerType is not ViewerTypes.MULTI
+    return React__default.createElement(React__default.Fragment, null);
+}
+
+var FileViewerComponent = function (props) {
+    var profileUrl = props.profileUrl, nickname = props.nickname, onClose = props.onClose, onDownloadClick = props.onDownloadClick;
+    var _a = props, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight;
+    var ref = useRef(null);
+    var onKeyDown = useKeyDown(ref, {
+        Escape: function (e) { return onClose === null || onClose === void 0 ? void 0 : onClose(e); },
+        ArrowLeft: function () { return onClickLeft === null || onClickLeft === void 0 ? void 0 : onClickLeft(); },
+        ArrowRight: function () { return onClickRight === null || onClickRight === void 0 ? void 0 : onClickRight(); },
+    });
+    var _b = mapFileViewerComponentProps({ props: props }), name = _b.name, type = _b.type, url = _b.url;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    return (React__default.createElement("div", { className: "sendbird-fileviewer", "data-testid": "sendbird-fileviewer", onKeyDown: onKeyDown, 
+        // to focus
+        tabIndex: 1, ref: ref },
+        React__default.createElement("div", { className: "sendbird-fileviewer__header" },
+            React__default.createElement("div", { className: "sendbird-fileviewer__header__left" },
+                React__default.createElement("div", { className: "sendbird-fileviewer__header__left__avatar" },
+                    React__default.createElement(Avatar, { height: "32px", width: "32px", src: profileUrl })),
+                React__default.createElement(Label, { className: "sendbird-fileviewer__header__left__filename", type: LabelTypography.H_2, color: LabelColors.ONBACKGROUND_1 }, name),
+                React__default.createElement(Label, { className: "sendbird-fileviewer__header__left__sender-name", type: LabelTypography.BODY_1, color: LabelColors.ONBACKGROUND_2 }, nickname)),
+            React__default.createElement("div", { className: "sendbird-fileviewer__header__right" },
+                isSupportedFileView(type) && (React__default.createElement("div", { className: "sendbird-fileviewer__header__right__actions" },
+                    React__default.createElement("a", { className: "sendbird-fileviewer__header__right__actions__download", rel: "noopener noreferrer", href: url, target: "_blank", onClick: onDownloadClick },
+                        React__default.createElement(Icon, { type: IconTypes.DOWNLOAD, fillColor: IconColors.ON_BACKGROUND_1, height: "24px", width: "24px" })),
+                    React__default.createElement(DeleteButton, __assign({ className: 'sendbird-fileviewer__header__right__actions__delete' }, props)))),
+                React__default.createElement("div", { className: "sendbird-fileviewer__header__right__actions__close" },
+                    React__default.createElement(Icon, { type: IconTypes.CLOSE, fillColor: IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: function (e) { return onClose === null || onClose === void 0 ? void 0 : onClose(e); } })))),
+        React__default.createElement("div", { className: "sendbird-fileviewer__content" },
+            isVideo(type) && (React__default.createElement("video", { controls: true, className: "sendbird-fileviewer__content__video" },
+                React__default.createElement("source", { src: url, type: type }))),
+            isImage(type) && (React__default.createElement("img", { src: url, alt: name, className: props.viewerType === ViewerTypes.MULTI
+                    ? 'sendbird-fileviewer__content__img__multi'
+                    : 'sendbird-fileviewer__content__img' })),
+            !isSupportedFileView(type) && (React__default.createElement("div", { className: "sendbird-fileviewer__content__unsupported" },
+                React__default.createElement(Label, { type: LabelTypography.H_1, color: LabelColors.ONBACKGROUND_1 }, (stringSet === null || stringSet === void 0 ? void 0 : stringSet.UI__FILE_VIEWER__UNSUPPORT) || 'Unsupported message'))),
+            React__default.createElement(Slider, __assign({}, props)))));
+};
+function FileViewer(_a) {
+    var _b, _c, _d;
+    var message = _a.message, _e = _a.statefulFileInfoList, statefulFileInfoList = _e === void 0 ? [] : _e, onClose = _a.onClose, _f = _a.isByMe, isByMe = _f === void 0 ? false : _f, onDelete = _a.onDelete, currentIndex = _a.currentIndex, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight, onDownloadClick = _a.onDownloadClick;
+    if (isMultipleFilesMessage(message)) {
+        var castedMessage = message;
+        return (React__default.createElement(FileViewerComponent, { profileUrl: castedMessage.sender.profileUrl, nickname: castedMessage.sender.nickname, viewerType: ViewerTypes.MULTI, fileInfoList: statefulFileInfoList.filter(function (fileInfo) {
+                return fileInfo.url; // Caution: This assumes that defined url means file upload has completed.
+            }).map(function (fileInfo) {
+                return {
+                    name: fileInfo.fileName || '',
+                    type: fileInfo.mimeType || '',
+                    url: fileInfo.url || '',
+                };
+            }), currentIndex: currentIndex || 0, onClickLeft: onClickLeft || noop, onClickRight: onClickRight || noop, onClose: onClose, onDownloadClick: onDownloadClick }));
+    }
+    else if (isFileMessage(message)) {
+        var castedMessage = message;
+        return createPortal((React__default.createElement(FileViewerComponent, { profileUrl: (_b = castedMessage.sender) === null || _b === void 0 ? void 0 : _b.profileUrl, nickname: (_c = castedMessage.sender) === null || _c === void 0 ? void 0 : _c.nickname, name: castedMessage.name, type: castedMessage.type, url: castedMessage === null || castedMessage === void 0 ? void 0 : castedMessage.url, isByMe: isByMe, disableDelete: (((_d = castedMessage.threadInfo) === null || _d === void 0 ? void 0 : _d.replyCount) || 0) > 0, onClose: onClose, onDelete: onDelete || noop, onDownloadClick: onDownloadClick })), document.getElementById(MODAL_ROOT));
+    }
+    return React__default.createElement(React__default.Fragment, null);
+}
+
+export { FileViewerComponent, FileViewer as default };
 //# sourceMappingURL=FileViewer.js.map

package/ui/FileViewer.js.map

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

package/ui/Header.js

@@ -1,13 +1,13 @@
-import { _ as __assign } from '../chunks/bundle-CCRwOILr.js';
+import { _ as __assign } from '../chunks/bundle-DZGTQbIQ.js';
 import React__default from 'react';
-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 { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-CONGgsDe.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-C5cPwfl7.js';
-import '../chunks/bundle-CqhNkmsl.js';
-import '../chunks/bundle-ThfYP9g9.js';
+import { c as classnames, n as noop } from '../chunks/bundle-DRWAxAQV.js';
+import '../chunks/bundle-2-kqCUYe.js';
+import '../chunks/bundle-D7oF64FT.js';
 
 var Header = function (_a) {
     var _b;

package/ui/Icon.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-CCRwOILr.js';
+import { c as __spreadArray } from '../chunks/bundle-DZGTQbIQ.js';
 import * as React from 'react';
 import React__default from 'react';
-import { n as noop } from '../chunks/bundle-C5cPwfl7.js';
+import { n as noop } from '../chunks/bundle-DRWAxAQV.js';
 
 /* eslint-disable no-redeclare */
 var Types = {

package/ui/IconButton.js

@@ -1,4 +1,4 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-CCRwOILr.js';
+import { c as __spreadArray, _ as __assign } from '../chunks/bundle-DZGTQbIQ.js';
 import React__default, { useState } from 'react';
 
 var IconButton = React__default.forwardRef(function (props, ref) {

package/ui/ImageRenderer.js

@@ -1,6 +1,6 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-CCRwOILr.js';
+import { c as __spreadArray, _ as __assign } from '../chunks/bundle-DZGTQbIQ.js';
 import React__default, { useMemo, useState, useLayoutEffect, useRef } from 'react';
-import { n as noop } from '../chunks/bundle-C5cPwfl7.js';
+import { n as noop } from '../chunks/bundle-DRWAxAQV.js';
 
 var numberToPx = (function (value) {
     if (value === null)

package/ui/Input.js

@@ -1,7 +1,7 @@
 import React__default, { useState } from 'react';
-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 { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-zMFwTPRJ.js';
+import '../chunks/bundle-DZGTQbIQ.js';
+import '../chunks/bundle-2-kqCUYe.js';
 
 var InputLabel = function (_a) {
     var children = _a.children;

package/ui/Label.js

@@ -1,5 +1,5 @@
-import '../chunks/bundle-CCRwOILr.js';
+import '../chunks/bundle-DZGTQbIQ.js';
 import 'react';
-export { L as Label, b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-rmCgpYl2.js';
-import '../chunks/bundle-CqhNkmsl.js';
+export { L as Label, b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-zMFwTPRJ.js';
+import '../chunks/bundle-2-kqCUYe.js';
 //# sourceMappingURL=Label.js.map