@sendbird/uikit-react 3.13.3 → 3.14.0-beta.2

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

@@ -13,6 +13,5 @@ export interface FileViewerProps {
     onDelete?: (e: MouseEvent) => void;
     onClickLeft?: () => void;
     onClickRight?: () => void;
-    onDownloadClick?: (e: MouseEvent) => Promise<void>;
 }
-export default function FileViewer({ message, statefulFileInfoList, onClose, isByMe, onDelete, currentIndex, onClickLeft, onClickRight, onDownloadClick, }: FileViewerProps): ReactElement;
+export default function FileViewer({ message, statefulFileInfoList, onClose, isByMe, onDelete, currentIndex, onClickLeft, onClickRight, }: FileViewerProps): ReactElement;

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

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+/// <reference types="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;
@@ -32,8 +32,7 @@ export interface SingleFileViewer extends SenderInfo, FileInfo, BaseViewer {
     viewerType?: typeof ViewerTypes.SINGLE;
     isByMe?: boolean;
     disableDelete?: boolean;
-    onDelete: (e: MouseEvent) => void;
-    onDownloadClick?: (e: MouseEvent) => Promise<void>;
+    onDelete: (e: React.MouseEvent) => void;
 }
 export interface MultiFilesViewer extends SenderInfo, BaseViewer {
     viewerType: typeof ViewerTypes.MULTI;
@@ -41,6 +40,5 @@ export interface MultiFilesViewer extends SenderInfo, BaseViewer {
     currentIndex: number;
     onClickLeft: () => void;
     onClickRight: () => void;
-    onDownloadClick?: (e: MouseEvent) => Promise<void>;
 }
 export type FileViewerComponentProps = SingleFileViewer | MultiFilesViewer;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import './index.scss';
 import { Typography, Colors } from './types';
 import { ObjectValues } from '../../utils/typeHelpers/objectValues';
@@ -8,7 +8,7 @@ type LabelProps = {
     color?: ObjectValues<typeof Colors>;
     children?: React.ReactNode;
 };
-export default function Label({ className, type, color, children, }: LabelProps): React.JSX.Element;
+export declare function Label({ className, type, color, children, }: LabelProps, ref?: RefObject<HTMLDivElement>): React.JSX.Element;
 declare const LabelTypography: {
     readonly H_1: "H_1";
     readonly H_2: "H_2";
@@ -38,3 +38,5 @@ declare const LabelColors: {
 };
 declare const LabelStringSet: import("./stringSet").StringSet;
 export { LabelTypography, LabelColors, LabelStringSet };
+declare const _default: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/types/ui/MessageContent/MessageBody/index.d.ts

@@ -4,13 +4,11 @@ import { CoreMessageType } from '../../../utils';
 import { SendBirdStateConfig } from '../../../lib/types';
 import { Nullable } from '../../../types';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
-import type { OnBeforeDownloadFileMessageType } from '../../../modules/GroupChannel/context/GroupChannelProvider';
 export interface MessageBodyProps {
     channel: Nullable<GroupChannel>;
     message: CoreMessageType;
     showFileViewer?: (bool: boolean) => void;
-    onMessageHeightChange?: () => void;
-    onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
+    onMessageHeightChange?: (isBottomMessageAffected?: boolean) => void;
     mouseHover: boolean;
     isMobile: boolean;
     config: SendBirdStateConfig;

package/types/ui/MessageContent/MessageProfile/index.d.ts

@@ -4,5 +4,6 @@ import { MessageContentProps } from '../index';
 export interface MessageProfileProps extends MessageContentProps {
     isByMe?: boolean;
     displayThreadReplies?: boolean;
+    bottom?: string;
 }
 export default function MessageProfile(props: MessageProfileProps): ReactElement;

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

@@ -3,8 +3,7 @@ import './index.scss';
 import { MessageMenuProps } from '../MessageItemMenu';
 import { MessageEmojiMenuProps } from '../MessageItemReactionMenu';
 import { EmojiReactionsProps } from '../EmojiReactions';
-import type { OnBeforeDownloadFileMessageType } from '../../modules/GroupChannel/context/GroupChannelProvider';
-import { SendableMessageType, CoreMessageType } from '../../utils';
+import { CoreMessageType, SendableMessageType } from '../../utils';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { EmojiContainer } from '@sendbird/chat';
 import { ThreadReplySelectType } from '../../modules/Channel/context/const';
@@ -41,8 +40,7 @@ export interface MessageContentProps {
     onQuoteMessageClick?: (props: {
         message: SendableMessageType;
     }) => void;
-    onMessageHeightChange?: () => void;
-    onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
+    onMessageHeightChange?: (isBottomMessageAffected?: boolean) => void;
     renderSenderProfile?: (props: MessageProfileProps) => ReactNode;
     renderMessageBody?: (props: MessageBodyProps) => ReactNode;
     renderMessageHeader?: (props: MessageHeaderProps) => ReactNode;

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

@@ -1,16 +1,9 @@
 import './index.scss';
-import { MouseEvent, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { OpenChannel } from '@sendbird/chat/openChannel';
 import { SendableMessageType } from '../../utils/index';
 import { ReplyType } from '../../types';
-export interface MessageMenuRenderMenuItemProps {
-    className?: string;
-    onClick?: (e: MouseEvent) => void;
-    dataSbId?: string;
-    disable?: boolean;
-    text: string;
-}
 export interface MessageMenuProps {
     className?: string | Array<string>;
     message: SendableMessageType;
@@ -29,7 +22,6 @@ export interface MessageMenuProps {
         message: SendableMessageType;
     }) => void;
     onMoveToParentMessage?: () => void;
-    renderMenuItem?: (props: MessageMenuRenderMenuItemProps) => ReactElement;
 }
-export declare function MessageMenu({ className, message, channel, isByMe, disabled, replyType, disableDeleteMessage, showEdit, showRemove, deleteMessage, resendMessage, setQuoteMessage, setSupposedHover, onReplyInThread, onMoveToParentMessage, renderMenuItem, }: MessageMenuProps): ReactElement;
+export declare function MessageMenu({ className, message, channel, isByMe, disabled, replyType, disableDeleteMessage, showEdit, showRemove, deleteMessage, resendMessage, setQuoteMessage, setSupposedHover, onReplyInThread, onMoveToParentMessage, }: MessageMenuProps): ReactElement;
 export default MessageMenu;

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

@@ -1,7 +1,7 @@
-import React, { MouseEvent } from 'react';
 import type { EmojiContainer } from '@sendbird/chat';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { OpenChannel } from '@sendbird/chat/openChannel';
+import React from 'react';
 import { CoreMessageType, SendableMessageType } from '../../utils';
 import { ReplyType } from '../../types';
 export type DeleteMenuStates = 'DISABLE' | 'HIDE' | 'ACTIVE';
@@ -25,7 +25,6 @@ export interface BaseMenuProps {
         message: SendableMessageType;
     }) => void;
     isOpenedFromThread?: boolean;
-    onDownloadClick?: (e: MouseEvent) => Promise<void>;
 }
 export interface MobileBottomSheetProps extends BaseMenuProps {
     emojiContainer?: EmojiContainer;

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

@@ -1,6 +1,5 @@
 import { ReactElement } from 'react';
 import { MultipleFilesMessage } from '@sendbird/chat/message';
-import type { OnBeforeDownloadFileMessageType } from '../../modules/GroupChannel/context/GroupChannelProvider';
 import './index.scss';
 import { UploadedFileInfoWithUpload } from '../../types';
 export declare const ThreadMessageKind: {
@@ -17,7 +16,6 @@ interface Props {
     truncateLimit?: number;
     threadMessageKindKey?: string;
     statefulFileInfoList?: UploadedFileInfoWithUpload[];
-    onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 }
-export default function MultipleFilesMessageItemBody({ className, message, isReactionEnabled, threadMessageKindKey, statefulFileInfoList, onBeforeDownloadFileMessage, }: Props): ReactElement;
+export default function MultipleFilesMessageItemBody({ className, message, isReactionEnabled, threadMessageKindKey, statefulFileInfoList, }: Props): ReactElement;
 export {};

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

@@ -7,6 +7,7 @@ interface TemplateMessageItemBodyProps {
     message: BaseMessage;
     isByMe?: boolean;
     theme?: SendbirdTheme;
+    onLoad?: () => void;
 }
 export declare function TemplateMessageItemBody({ className, message, isByMe, theme, }: TemplateMessageItemBodyProps): ReactElement;
 export default TemplateMessageItemBody;

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

@@ -1,4 +1,5 @@
 import type { ComponentsUnion } from '@sendbird/uikit-message-template';
+import type { ViewStyle } from '@sendbird/uikit-message-template/src/types/styles';
 type SendbirdFontWeight = 'bold' | 'normal';
 /**
  * The value of each theme property contains both light and dark value with comma separated string
@@ -75,8 +76,17 @@ export type MessageTemplateTheme = {
         };
     };
 };
-export type MessageTemplateItem = ComponentsUnion['properties'];
-export type MessageTemplateData = {
+export type MessageTemplateItem = ComponentsUnion['properties'] | CarouselItem;
+export interface CarouselItem {
+    type: string;
+    viewStyle?: ViewStyle;
+    spacing: number;
+    items: string;
+}
+export type MessageTemplateData = SimpleTemplateData & {
+    view_variables?: Record<string, SimpleTemplateData[]>;
+};
+export type SimpleTemplateData = {
     key: string;
     variables?: Record<string, any>;
 };
@@ -90,7 +100,7 @@ export type SendbirdMessageTemplate = {
             items: MessageTemplateItem[];
         };
     };
-    color_variables?: Record<string, string>;
     name?: string;
+    color_variables?: Record<string, string>;
 };
 export {};

package/types/ui/TemplateMessageItemBody/utils/selectColorVariablesByTheme.d.ts

@@ -1,6 +1,6 @@
 import { SendbirdTheme } from '../../../types';
-import { MessageTemplateTheme } from '../types';
+export declare function convertArgbToRgba(string: string): string;
 export default function selectColorVariablesByTheme({ colorVariables, theme }: {
     colorVariables: Record<string, unknown>;
     theme: SendbirdTheme;
-}): MessageTemplateTheme;
+}): Record<string, unknown>;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import { ThreadInfo } from '@sendbird/chat/message';
 import './index.scss';
 export interface ThreadRepliesProps {
@@ -6,4 +6,6 @@ export interface ThreadRepliesProps {
     threadInfo: ThreadInfo;
     onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
-export default function ThreadReplies({ className, threadInfo, onClick, }: ThreadRepliesProps): React.ReactElement;
+export declare function ThreadReplies({ className, threadInfo, onClick, }: ThreadRepliesProps, ref?: RefObject<HTMLDivElement>): React.ReactElement;
+declare const _default: React.ForwardRefExoticComponent<ThreadRepliesProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -1,9 +1,8 @@
 import { ChangeEvent, MutableRefObject, ReactElement } from 'react';
 import { User } from '@sendbird/chat';
-import { Member } from '@sendbird/chat/groupChannel';
 import './index.scss';
 export interface UserListItemProps {
-    user: User | Member;
+    user: User;
     className?: string;
     checked?: boolean;
     checkBox?: boolean;

package/types/utils/index.d.ts

@@ -60,6 +60,17 @@ export declare const isMultipleFilesMessage: (message: CoreMessageType) => boole
 export declare const isParentMessage: (message: CoreMessageType) => boolean;
 export declare const isThreadMessage: (message: CoreMessageType) => boolean;
 export declare const isTemplateMessage: (message: CoreMessageType) => boolean;
+export declare const isCompositeTemplateMessage: (message: CoreMessageType) => boolean;
+export declare enum UI_CONTAINER_TYPES {
+    DEFAULT = "",
+    WIDE = "ui_container_type__wide",
+    FULL = "ui_container_type__full",
+    DEFAULT_CAROUSEL = "ui_container_type__default-carousel"
+}
+export declare const getMessageContentMiddleClassNameByContainerType: ({ message, isMobile, }: {
+    message: CoreMessageType;
+    isMobile: boolean;
+}) => UI_CONTAINER_TYPES;
 export declare const isOGMessage: (message: SendableMessageType) => boolean;
 export declare const isTextMessage: (message: SendableMessageType) => boolean;
 export declare const isThumbnailMessage: (message: SendableMessageType) => boolean;
@@ -83,6 +94,8 @@ export declare const getUIKitMessageType: (message: CoreMessageType) => string;
  * */
 export declare const getSendingMessageStatus: () => SendingMessageStatus;
 export declare const getClassName: (classNames: string | Array<string | Array<string>>) => string;
+export declare const startsWithAtAndEndsWithBraces: (str: string) => boolean;
+export declare const removeAtAndBraces: (str: string) => string;
 export declare const isReactedBy: (userId: string, reaction: Reaction) => boolean;
 interface StringSet {
     TOOLTIP__YOU: string;

package/ui/Accordion.js

@@ -1,9 +1,9 @@
-import { c as __spreadArray } from '../chunks/bundle-CVDtzU3E.js';
+import { c as __spreadArray } from '../chunks/bundle-D_KO6Orc.js';
 import React__default, { useState } from 'react';
 import Icon, { IconTypes } from './Icon.js';
 import AccordionGroup$1 from './AccordionGroup.js';
-import { C as Consumer } from '../chunks/bundle-DavEbLba.js';
-import '../chunks/bundle-CT3xDvIx.js';
+import { C as Consumer } from '../chunks/bundle-DrfdRrEf.js';
+import '../chunks/bundle-CwofYH9U.js';
 
 function Accordion(_a) {
     var className = _a.className, id = _a.id, renderTitle = _a.renderTitle, renderContent = _a.renderContent, renderFooter = _a.renderFooter;

package/ui/AccordionGroup.js

@@ -1,6 +1,6 @@
 import React__default, { useState } from 'react';
-import { P as Provider } from '../chunks/bundle-DavEbLba.js';
-import '../chunks/bundle-CT3xDvIx.js';
+import { P as Provider } from '../chunks/bundle-DrfdRrEf.js';
+import '../chunks/bundle-CwofYH9U.js';
 
 // Wraps all the accordions in an accordion set
 // keep one accordion open at a time

package/ui/AdminMessage.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-CVDtzU3E.js';
+import { c as __spreadArray } from '../chunks/bundle-D_KO6Orc.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DPhbbRZE.js';
-import '../chunks/bundle-DaQK1Cox.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
+import '../chunks/bundle-DXhynnjn.js';
 
 function AdminMessage(_a) {
     var _b;

package/ui/Avatar.js

@@ -1,8 +1,8 @@
-import '../chunks/bundle-CVDtzU3E.js';
+import '../chunks/bundle-D_KO6Orc.js';
 import 'react';
 import './ImageRenderer.js';
-export { b as AvatarInner, A as default } from '../chunks/bundle-BXpzbAbi.js';
-import '../chunks/bundle-CT3xDvIx.js';
-import '../chunks/bundle-DYJilNov.js';
+export { b as AvatarInner, A as default } from '../chunks/bundle-C4sUzPGS.js';
+import '../chunks/bundle-CwofYH9U.js';
+import '../chunks/bundle-BUy5u56K.js';
 import './Icon.js';
 //# sourceMappingURL=Avatar.js.map

package/ui/Badge.js

@@ -1,9 +1,9 @@
-import { c as __spreadArray } from '../chunks/bundle-CVDtzU3E.js';
+import { c as __spreadArray } from '../chunks/bundle-D_KO6Orc.js';
 import React__default, { useContext } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DPhbbRZE.js';
-import { L as LocalizationContext } from '../chunks/bundle-BX0LQWqY.js';
-import '../chunks/bundle-DaQK1Cox.js';
-import '../chunks/bundle-BxBdkxXV.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
+import { L as LocalizationContext } from '../chunks/bundle-CJIPD7gN.js';
+import '../chunks/bundle-DXhynnjn.js';
+import '../chunks/bundle-CcTHgZqq.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,17 +1,17 @@
 import React__default, { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import '../hooks/useModal.js';
-import { a as MODAL_ROOT } from '../chunks/bundle-CCUBCV04.js';
-import '../chunks/bundle-CVDtzU3E.js';
-import '../chunks/bundle-4a9M9y8N.js';
-import '../chunks/bundle-CT3xDvIx.js';
-import '../chunks/bundle-BX0LQWqY.js';
-import '../chunks/bundle-DaQK1Cox.js';
-import '../chunks/bundle-BxBdkxXV.js';
-import '../chunks/bundle-CLqgMCvn.js';
+import { a as MODAL_ROOT } from '../chunks/bundle-BSPBjwR6.js';
+import '../chunks/bundle-D_KO6Orc.js';
+import '../chunks/bundle-aH4n4ipp.js';
+import '../chunks/bundle-CwofYH9U.js';
+import '../chunks/bundle-CJIPD7gN.js';
+import '../chunks/bundle-DXhynnjn.js';
+import '../chunks/bundle-CcTHgZqq.js';
+import '../chunks/bundle-BuIxT5aZ.js';
 import './IconButton.js';
 import './Button.js';
-import '../chunks/bundle-DPhbbRZE.js';
+import '../chunks/bundle-C-_RpFyM.js';
 import './Icon.js';
 
 var BottomSheet = function (props) {

package/ui/Button.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-CVDtzU3E.js';
+import { c as __spreadArray } from '../chunks/bundle-D_KO6Orc.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DPhbbRZE.js';
-import '../chunks/bundle-DaQK1Cox.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
+import '../chunks/bundle-DXhynnjn.js';
 
 var ButtonTypes;
 (function (ButtonTypes) {

package/ui/Carousel.js

@@ -0,0 +1,249 @@
+import { _ as __assign } from '../chunks/bundle-D_KO6Orc.js';
+import React__default, { useRef, useState, useEffect } from 'react';
+
+var PADDING_WIDTH = 24;
+var CONTENT_LEFT_WIDTH = 40;
+var SWIPE_THRESHOLD = 15;
+var LAST_ITEM_RIGHT_SNAP_THRESHOLD = 100;
+/**
+ * fixed sized template items should use its child width.
+ * Whereas flex sized template items should use its parent's width.
+ * @param item
+ */
+function shouldRenderAsFixed(item) {
+    var _a;
+    return ((_a = item.props.templateItems[0].width) === null || _a === void 0 ? void 0 : _a.type) === 'fixed';
+}
+function CarouselItem(_a) {
+    var item = _a.item, defaultWidth = _a.defaultWidth;
+    return React__default.createElement("div", { style: shouldRenderAsFixed(item) ? { width: 'fit-content' } : { minWidth: defaultWidth } }, item);
+}
+var Carousel = React__default.memo(function (_a) {
+    var _b, _c;
+    var id = _a.id, items = _a.items, _d = _a.gap, gap = _d === void 0 ? 8 : _d, _e = _a.classNameWithTouchAction, classNameWithTouchAction = _e === void 0 ? 'sendbird-conversation__messages-padding' : _e;
+    var carouselRef = useRef(null);
+    var screenWidth = window.innerWidth;
+    var defaultItemWidth = (_c = (_b = carouselRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0;
+    var itemWidths = items.map(function (item) {
+        var _a;
+        if (shouldRenderAsFixed(item)) {
+            return (_a = item.props.templateItems[0].width) === null || _a === void 0 ? void 0 : _a.value;
+        }
+        return defaultItemWidth;
+    });
+    var allItemsWidth = itemWidths.reduce(function (prev, curr) { return prev + gap + curr; });
+    var lastItemWidth = itemWidths[itemWidths.length - 1];
+    var isLastItemNarrow = lastItemWidth <= LAST_ITEM_RIGHT_SNAP_THRESHOLD;
+    var isLastTwoItemsFitScreen = getIsLastTwoItemsFitScreen();
+    var itemPositions = getEachItemPositions();
+    var _f = useState({
+        scrolling: false,
+        dragging: false,
+        startPos: null,
+        offset: 0,
+        translateX: 0,
+        currentIndex: 0,
+    }), draggingInfo = _f[0], setDraggingInfo = _f[1];
+    var handleMouseDown = function (event) {
+        setDraggingInfo(__assign(__assign({}, draggingInfo), { scrolling: false, dragging: true, startPos: {
+                x: event.clientX,
+                y: event.clientY,
+            }, offset: 0 }));
+    };
+    var handleMouseMove = function (event) {
+        if (!draggingInfo.dragging)
+            return;
+        var currentX = event.clientX;
+        var newOffset = currentX - draggingInfo.startPos.x;
+        setDraggingInfo(__assign(__assign({}, draggingInfo), { offset: newOffset }));
+    };
+    var handleMouseUp = function () {
+        if (!draggingInfo.dragging)
+            return;
+        handleDragEnd();
+    };
+    var blockScroll = function () {
+        var parentElements = document.getElementsByClassName(classNameWithTouchAction);
+        var parentElement = parentElements[0];
+        if (parentElement) {
+            parentElement.style.touchAction = 'pan-x';
+        }
+    };
+    var unblockScroll = function () {
+        var parentElements = document.getElementsByClassName(classNameWithTouchAction);
+        var parentElement = parentElements[0];
+        if (parentElement) {
+            parentElement.style.touchAction = 'pan-y';
+        }
+    };
+    var handleTouchStart = function (event) {
+        setDraggingInfo(__assign(__assign({}, draggingInfo), { scrolling: false, dragging: false, startPos: {
+                x: event.touches[0].clientX,
+                y: event.touches[0].clientY,
+            }, offset: 0 }));
+    };
+    useEffect(function () {
+        if (draggingInfo.scrolling) {
+            unblockScroll();
+        }
+    }, [draggingInfo.scrolling]);
+    var handleTouchMove = function (event) {
+        if (!draggingInfo.startPos || draggingInfo.scrolling)
+            return;
+        var startPos = draggingInfo.startPos;
+        var touchMoveX = event.touches[0].clientX;
+        var touchMoveY = event.touches[0].clientY;
+        var deltaX = Math.abs(touchMoveX - startPos.x);
+        var deltaY = Math.abs(touchMoveY - startPos.y);
+        var newOffset = touchMoveX - startPos.x;
+        if (newOffset === draggingInfo.offset)
+            return;
+        if (draggingInfo.dragging) {
+            setDraggingInfo(__assign(__assign({}, draggingInfo), { offset: newOffset }));
+            return;
+        }
+        if (deltaY > deltaX) {
+            setDraggingInfo(__assign(__assign({}, draggingInfo), { scrolling: true }));
+        }
+        else {
+            blockScroll();
+            setDraggingInfo(__assign(__assign({}, draggingInfo), { dragging: true, offset: newOffset }));
+        }
+    };
+    var getNewDraggingInfo = function (props) {
+        if (props === void 0) { props = {}; }
+        var newTranslateX = props.newTranslateX, nextIndex = props.nextIndex;
+        var translateX = draggingInfo.translateX, currentIndex = draggingInfo.currentIndex;
+        return {
+            scrolling: false,
+            dragging: false,
+            startPos: null,
+            offset: 0,
+            translateX: newTranslateX !== null && newTranslateX !== void 0 ? newTranslateX : translateX,
+            currentIndex: nextIndex !== null && nextIndex !== void 0 ? nextIndex : currentIndex,
+        };
+    };
+    var handleDragEnd = function () {
+        var offset = draggingInfo.offset;
+        var absOffset = Math.abs(offset);
+        if (absOffset < SWIPE_THRESHOLD) {
+            setDraggingInfo(getNewDraggingInfo());
+            return;
+        }
+        // If dragged to left, next index should be to the right
+        var currentIndex = draggingInfo.currentIndex;
+        if (offset < 0 && currentIndex < items.length - 1) {
+            var nextIndex = currentIndex + 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex: nextIndex,
+            }));
+            // If dragged to right, next index should be to the left
+        }
+        else if (offset > 0 && currentIndex > 0) {
+            var nextIndex = currentIndex - 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex: nextIndex,
+            }));
+        }
+        else {
+            setDraggingInfo(getNewDraggingInfo());
+        }
+    };
+    var handleTouchEnd = function () {
+        var offset = draggingInfo.offset, currentIndex = draggingInfo.currentIndex;
+        var absOffset = Math.abs(offset);
+        if (absOffset < SWIPE_THRESHOLD) {
+            setDraggingInfo(getNewDraggingInfo());
+            return;
+        }
+        // If dragged to left, next index should be to the right
+        if (offset < 0 && currentIndex < items.length - 1) {
+            var nextIndex = currentIndex + 1;
+            /**
+             * This is special logic for "더 보기" button for Socar use-case.
+             * The button will have a small width (less than 50px).
+             * We want to include this button in the view and snap to right padding wall IFF !isLastTwoItemsFitScreen.
+             */
+            if (isLastItemNarrow) {
+                if (isLastTwoItemsFitScreen) {
+                    if (nextIndex !== items.length - 1) {
+                        setDraggingInfo(getNewDraggingInfo({
+                            newTranslateX: itemPositions[nextIndex].start,
+                            nextIndex: nextIndex,
+                        }));
+                    }
+                    else {
+                        setDraggingInfo(getNewDraggingInfo());
+                    }
+                }
+                else if (nextIndex !== items.length - 1) {
+                    setDraggingInfo(getNewDraggingInfo({
+                        newTranslateX: itemPositions[nextIndex].start,
+                        nextIndex: nextIndex,
+                    }));
+                }
+                else {
+                    var translateWidth = itemPositions[nextIndex].start - lastItemWidth;
+                    var rightEmptyWidth = screenWidth - (allItemsWidth + translateWidth + PADDING_WIDTH + CONTENT_LEFT_WIDTH);
+                    setDraggingInfo(getNewDraggingInfo({
+                        newTranslateX: translateWidth + rightEmptyWidth,
+                        nextIndex: nextIndex,
+                    }));
+                }
+            }
+            else {
+                setDraggingInfo(getNewDraggingInfo({
+                    newTranslateX: itemPositions[nextIndex].start,
+                    nextIndex: nextIndex,
+                }));
+            }
+            // If dragged to right, next index should be to the left
+        }
+        else if (offset > 0 && currentIndex > 0) {
+            var nextIndex = currentIndex - 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex: nextIndex,
+            }));
+        }
+        else {
+            setDraggingInfo(getNewDraggingInfo());
+        }
+        if (draggingInfo.dragging) {
+            unblockScroll();
+        }
+    };
+    function getCurrentTranslateX() {
+        return draggingInfo.translateX + draggingInfo.offset;
+    }
+    function getIsLastTwoItemsFitScreen() {
+        var restItemsWidth = itemWidths.slice(-2).reduce(function (prev, curr) { return prev + gap + curr; });
+        var restTotalWidth = PADDING_WIDTH + CONTENT_LEFT_WIDTH + restItemsWidth;
+        return restTotalWidth <= screenWidth;
+    }
+    function getEachItemPositions() {
+        var accumulator = 0;
+        return itemWidths.map(function (itemWidth, i) {
+            if (i > 0) {
+                accumulator -= gap;
+            }
+            var itemPosition = {
+                start: accumulator,
+                end: accumulator - itemWidth,
+            };
+            accumulator -= itemWidth;
+            return itemPosition;
+        });
+    }
+    return (React__default.createElement("div", { id: id, ref: carouselRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: 'sendbird-carousel-items-wrapper', style: {
+            cursor: draggingInfo.dragging ? 'grabbing' : 'grab',
+            transition: draggingInfo.dragging ? 'none' : 'transform 0.5s ease',
+            transform: "translateX(".concat(getCurrentTranslateX(), "px)"),
+            gap: gap,
+        } }, items.map(function (item, index) { return (React__default.createElement(CarouselItem, { key: "".concat(id, "-").concat(index), item: item, defaultWidth: defaultItemWidth + 'px' })); })));
+});
+
+export { Carousel, Carousel as default };
+//# sourceMappingURL=Carousel.js.map

package/ui/Carousel.js.map

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

package/ui/ChannelAvatar.js

@@ -1,11 +1,11 @@
 import React__default, { useMemo } from 'react';
-import { A as Avatar } from '../chunks/bundle-BXpzbAbi.js';
+import { A as Avatar } from '../chunks/bundle-C4sUzPGS.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-BVGlC_pg.js';
-import '../chunks/bundle-CVDtzU3E.js';
+import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-BPclYGwz.js';
+import '../chunks/bundle-D_KO6Orc.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-CT3xDvIx.js';
-import '../chunks/bundle-DYJilNov.js';
+import '../chunks/bundle-CwofYH9U.js';
+import '../chunks/bundle-BUy5u56K.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;