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

package/types/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.d.ts

@@ -1,9 +1,11 @@
 import { ReactElement } from 'react';
 import './ParentMessageInfoItem.scss';
 import { SendableMessageType } from '../../../../utils';
+import type { OnBeforeDownloadFileMessageType } from '../../../GroupChannel/context/GroupChannelProvider';
 export interface ParentMessageInfoItemProps {
     className?: string;
     message: SendableMessageType;
     showFileViewer?: (bool: boolean) => void;
+    onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 }
-export default function ParentMessageInfoItem({ className, message, showFileViewer, }: ParentMessageInfoItemProps): ReactElement;
+export default function ParentMessageInfoItem({ className, message, showFileViewer, onBeforeDownloadFileMessage, }: ParentMessageInfoItemProps): ReactElement;

package/types/modules/Thread/context/ThreadProvider.d.ts

@@ -5,6 +5,7 @@ import type { BaseMessage, FileMessage, FileMessageCreateParams, MultipleFilesMe
 import { ThreadContextInitialState } from './dux/initialState';
 import { SendMessageParams } from './hooks/useSendUserMessageCallback';
 import { SendableMessageType } from '../../../utils';
+import type { OnBeforeDownloadFileMessageType } from '../../GroupChannel/context/GroupChannelProvider';
 export type ThreadProviderProps = {
     children?: React.ReactElement;
     channelUrl: string;
@@ -18,6 +19,7 @@ export type ThreadProviderProps = {
     onBeforeSendFileMessage?: (file: File, quotedMessage?: SendableMessageType) => FileMessageCreateParams;
     onBeforeSendVoiceMessage?: (file: File, quotedMessage?: SendableMessageType) => FileMessageCreateParams;
     onBeforeSendMultipleFilesMessage?: (files: Array<File>, quotedMessage?: SendableMessageType) => MultipleFilesMessageCreateParams;
+    onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
     disableUserProfile?: boolean;
     renderUserProfile?: (props: {
         user: User;

package/types/types.d.ts

@@ -72,6 +72,5 @@ export interface UploadedFileInfoWithUpload {
 export type SendbirdTheme = 'light' | 'dark';
 export declare enum MessageContentMiddleContainerType {
     DEFAULT = "default",
-    WIDE = "wide",
-    FULL = "full"
+    WIDE = "wide"
 }

package/types/ui/Accordion/Accordion.d.ts

@@ -0,0 +1,10 @@
+import React, { type ReactElement } from 'react';
+import './index.scss';
+export interface AccordionProps {
+    className?: string;
+    id: string;
+    renderTitle?: () => ReactElement;
+    renderContent?: () => ReactElement;
+    renderFooter?: () => ReactElement;
+}
+export declare const Accordion: ({ className, id, renderTitle, renderContent, renderFooter, }: AccordionProps) => React.JSX.Element;

package/types/ui/Accordion/AccordionGroup.d.ts

@@ -1,7 +1,17 @@
-import { ReactElement } from 'react';
-interface Props {
-    children: Array<ReactElement> | ReactElement;
+import React, { type ReactElement } from 'react';
+export interface AccordionGroupContextType {
+    openedListKeys: Array<string>;
+    addOpenedListKey: (key: string) => void;
+    removeOpenedListKey: (key: string) => void;
+    clearOpenedListKeys: () => void;
+    allowMultipleOpen: boolean;
+}
+export declare const AccordionGroupContext: React.Context<AccordionGroupContextType>;
+export interface AccordionGroupProps {
     className?: string;
+    children: ReactElement | Array<ReactElement>;
+    allowMultipleOpen?: boolean;
 }
-export default function AccordionGroup({ children, className, }: Props): ReactElement;
-export {};
+export declare const AccordionGroupProvider: ({ className, children, allowMultipleOpen, }: AccordionGroupProps) => React.JSX.Element;
+export declare const useAccordionGroupContext: () => AccordionGroupContextType;
+export default AccordionGroupProvider;

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

@@ -1,13 +1,7 @@
-import { ReactElement } from 'react';
+/// <reference types="react" />
 import './index.scss';
-import AccordionGroup_ from './AccordionGroup';
-interface Props {
-    className?: string | Array<string>;
-    id: string;
-    renderTitle(): ReactElement;
-    renderContent(): ReactElement;
-    renderFooter?(): ReactElement;
-}
-export default function Accordion({ className, id, renderTitle, renderContent, renderFooter, }: Props): ReactElement;
-export declare const AccordionGroup: typeof AccordionGroup_;
-export {};
+import { Accordion } from './Accordion';
+export default Accordion;
+export declare const AccordionGroup: ({ className, children, allowMultipleOpen, }: import("./AccordionGroup").AccordionGroupProps) => import("react").JSX.Element;
+export * from './Accordion';
+export * from './AccordionGroup';

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

@@ -1,10 +1,9 @@
 import './index.scss';
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 interface CarouselProps {
     id: string;
     items: ReactElement[];
     gap?: number;
-    classNameWithTouchAction?: string;
 }
-export declare const Carousel: React.MemoExoticComponent<({ id, items, gap, classNameWithTouchAction, }: CarouselProps) => ReactElement>;
+export declare function Carousel({ id, items, gap, }: CarouselProps): ReactElement;
 export default Carousel;

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

@@ -1,10 +1,9 @@
 import './index.scss';
 import { ReactElement } from 'react';
-import type { EmojiContainer } from '@sendbird/chat';
+import type { EmojiContainer, User } from '@sendbird/chat';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import { Nullable, SpaceFromTriggerType } from '../../types';
 import { SendableMessageType } from '../../utils';
-import { User } from '@sendbird/chat';
 export interface EmojiReactionsProps {
     className?: string | Array<string>;
     userId: string;

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

@@ -1,6 +1,7 @@
 import './index.scss';
 import { ReactElement } from 'react';
 import type { FileMessage } from '@sendbird/chat/message';
+import type { OnBeforeDownloadFileMessageType } from '../../modules/GroupChannel/context/GroupChannelProvider';
 interface Props {
     className?: string | Array<string>;
     message: FileMessage;
@@ -8,6 +9,7 @@ interface Props {
     mouseHover?: boolean;
     isReactionEnabled?: boolean;
     truncateLimit?: number;
+    onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 }
-export default function FileMessageItemBody({ className, message, isByMe, mouseHover, isReactionEnabled, truncateLimit, }: Props): ReactElement;
+export default function FileMessageItemBody({ className, message, isByMe, mouseHover, isReactionEnabled, truncateLimit, onBeforeDownloadFileMessage, }: Props): ReactElement;
 export {};

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

@@ -13,5 +13,6 @@ 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, }: FileViewerProps): ReactElement;
+export default function FileViewer({ message, statefulFileInfoList, onClose, isByMe, onDelete, currentIndex, onClickLeft, onClickRight, onDownloadClick, }: FileViewerProps): ReactElement;

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

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

@@ -4,11 +4,15 @@ 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 type RenderedTemplateBodyType = 'failed' | 'composite' | 'simple';
 export interface MessageBodyProps {
     channel: Nullable<GroupChannel>;
     message: CoreMessageType;
     showFileViewer?: (bool: boolean) => void;
-    onMessageHeightChange?: (isBottomMessageAffected?: boolean) => void;
+    onTemplateMessageRenderedCallback?: (renderedTemplateBodyType: RenderedTemplateBodyType) => void;
+    onMessageHeightChange?: () => void;
+    onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
     mouseHover: boolean;
     isMobile: boolean;
     config: SendBirdStateConfig;

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

@@ -3,6 +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 { CoreMessageType, SendableMessageType } from '../../utils';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import { EmojiContainer } from '@sendbird/chat';
@@ -40,7 +41,8 @@ export interface MessageContentProps {
     onQuoteMessageClick?: (props: {
         message: SendableMessageType;
     }) => void;
-    onMessageHeightChange?: (isBottomMessageAffected?: boolean) => void;
+    onMessageHeightChange?: () => void;
+    onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
     renderSenderProfile?: (props: MessageProfileProps) => ReactNode;
     renderMessageBody?: (props: MessageBodyProps) => ReactNode;
     renderMessageHeader?: (props: MessageHeaderProps) => ReactNode;

package/types/{modules/Channel/components → ui}/MessageFeedbackModal/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import './index.scss';
-import { CoreMessageType } from '../../../../utils';
+import { CoreMessageType } from '../../utils';
 import { FeedbackRating } from '@sendbird/chat/message';
 export interface MessageFeedbackModalProps {
     selectedFeedback: FeedbackRating | undefined;

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

@@ -1,9 +1,16 @@
 import './index.scss';
-import { ReactElement } from 'react';
+import { MouseEvent, 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;
@@ -22,6 +29,7 @@ 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, }: MessageMenuProps): ReactElement;
+export declare function MessageMenu(props: MessageMenuProps): ReactElement;
 export default MessageMenu;

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { MessageTemplateItem } from '../TemplateMessageItemBody/types';
+import { type ComponentsUnion } from '@sendbird/uikit-message-template';
 import './index.scss';
 export interface MessageTemplateProps {
-    templateItems: MessageTemplateItem[];
+    templateVersion: number;
+    templateItems: ComponentsUnion['properties'][];
 }
-export declare function MessageTemplate({ templateItems }: MessageTemplateProps): React.JSX.Element;
+export declare function MessageTemplate({ templateItems, templateVersion }: MessageTemplateProps): React.JSX.Element;
 export default MessageTemplate;

package/types/ui/MessageTemplate/messageTemplateErrorBoundary.d.ts

@@ -1,8 +1,11 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 import { LoggerInterface } from '../../lib/Logger';
+import { RenderedTemplateBodyType } from '../MessageContent/MessageBody';
 interface ErrorBoundaryProps {
     children: ReactNode;
     fallbackMessage: ReactNode;
+    onTemplateMessageRenderedCallback: (renderedTemplateBodyType: RenderedTemplateBodyType) => void;
+    isComposite?: boolean;
     logger?: LoggerInterface;
 }
 interface ErrorBoundaryState {

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,6 +25,7 @@ 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,5 +1,6 @@
 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: {
@@ -16,6 +17,7 @@ interface Props {
     truncateLimit?: number;
     threadMessageKindKey?: string;
     statefulFileInfoList?: UploadedFileInfoWithUpload[];
+    onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 }
-export default function MultipleFilesMessageItemBody({ className, message, isReactionEnabled, threadMessageKindKey, statefulFileInfoList, }: Props): ReactElement;
+export default function MultipleFilesMessageItemBody({ className, message, isReactionEnabled, threadMessageKindKey, statefulFileInfoList, onBeforeDownloadFileMessage, }: Props): ReactElement;
 export {};

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

@@ -2,12 +2,13 @@ import './index.scss';
 import { ReactElement } from 'react';
 import type { BaseMessage } from '@sendbird/chat/message';
 import { SendbirdTheme } from '../../types';
+import { RenderedTemplateBodyType } from '../MessageContent/MessageBody';
 interface TemplateMessageItemBodyProps {
     className?: string | Array<string>;
     message: BaseMessage;
     isByMe?: boolean;
     theme?: SendbirdTheme;
-    onLoad?: () => void;
+    onTemplateMessageRenderedCallback?: (renderedTemplateBodyType: RenderedTemplateBodyType) => void;
 }
-export declare function TemplateMessageItemBody({ className, message, isByMe, theme, }: TemplateMessageItemBodyProps): ReactElement;
+export declare function TemplateMessageItemBody({ className, message, isByMe, theme, onTemplateMessageRenderedCallback, }: TemplateMessageItemBodyProps): ReactElement;
 export default TemplateMessageItemBody;

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

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

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

@@ -1,8 +1,9 @@
 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;
+    user: User | Member;
     className?: string;
     checked?: boolean;
     checkBox?: boolean;

package/types/utils/getIsReactionEnabled.d.ts

@@ -2,10 +2,11 @@
  * This function helps consider the every condition
  * related to enabling emoji reaction feature.
  */
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+import type { SendBirdStateConfig } from '../lib/types';
 export interface IsReactionEnabledProps {
-    isBroadcast?: boolean;
-    isSuper?: boolean;
-    globalLevel?: boolean;
+    channel: GroupChannel;
+    config: SendBirdStateConfig;
     moduleLevel?: boolean;
 }
-export declare function getIsReactionEnabled({ isBroadcast, isSuper, globalLevel, moduleLevel, }: IsReactionEnabledProps): boolean;
+export declare function getIsReactionEnabled({ channel, config, moduleLevel, }: IsReactionEnabledProps): boolean;

package/types/utils/index.d.ts

@@ -53,35 +53,33 @@ export declare const isReadMessage: (channel: GroupChannel, message: SendableMes
 export declare const isFailedMessage: (message: SendableMessageType) => boolean;
 export declare const isPendingMessage: (message: SendableMessageType) => boolean;
 export declare const isSentStatus: (state: string) => boolean;
-export declare const isAdminMessage: (message: CoreMessageType) => boolean;
-export declare const isUserMessage: (message: CoreMessageType) => boolean;
-export declare const isFileMessage: (message: CoreMessageType) => boolean;
-export declare const isMultipleFilesMessage: (message: CoreMessageType) => boolean;
+export declare const isAdminMessage: (message: CoreMessageType) => message is AdminMessage;
+export declare const isUserMessage: (message: CoreMessageType) => message is UserMessage;
+export declare const isFileMessage: (message: CoreMessageType) => message is FileMessage;
+export declare const isMultipleFilesMessage: (message: CoreMessageType) => message is MultipleFilesMessage;
 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;
-export declare const isImageMessage: (message: SendableMessageType) => boolean;
+export declare const isOGMessage: (message: CoreMessageType) => message is UserMessage;
+export declare const isTextMessage: (message: CoreMessageType) => message is UserMessage;
+export declare const isThumbnailMessage: (message: CoreMessageType) => message is FileMessage;
+export declare const isImageMessage: (message: SendableMessageType) => message is FileMessage;
+export declare const isVideoMessage: (message: SendableMessageType) => message is FileMessage;
+export declare const isGifMessage: (message: SendableMessageType) => message is FileMessage;
+export declare const isAudioMessage: (message: CoreMessageType) => message is FileMessage;
 export declare const isImageFileInfo: (fileInfo: UploadedFileInfo) => boolean;
-export declare const isVideoMessage: (message: SendableMessageType) => boolean;
-export declare const isGifMessage: (message: SendableMessageType) => boolean;
-export declare const isAudioMessage: (message: FileMessage) => boolean;
 export declare const isAudioMessageMimeType: (type: string) => boolean;
 export declare const isVoiceMessageMimeType: (type: string) => boolean;
-export declare const isVoiceMessage: (message: Nullable<SendableMessageType>) => boolean;
+export declare const isVoiceMessage: (message: Nullable<CoreMessageType>) => boolean;
 export declare const isEditedMessage: (message: CoreMessageType) => boolean;
 export declare const isEnabledOGMessage: (message: UserMessage) => boolean;
 export declare const getUIKitMessageTypes: () => UIKitMessageTypes;

package/types/utils/isVoiceMessage.d.ts

@@ -1 +1 @@
-export declare const isVoiceMessage: (message: import("./index").SendableMessageType) => boolean;
+export declare const isVoiceMessage: (message: import("./index").CoreMessageType) => boolean;

package/types/utils/utils.d.ts

@@ -4,6 +4,7 @@ export declare const getSenderProfileUrl: (message: SendableMessageType) => stri
 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;
 declare const _default: {
     getSenderName: (message: SendableMessageType) => string;
     getSenderProfileUrl: (message: SendableMessageType) => string;

package/ui/Accordion.js

@@ -1,47 +1,36 @@
-import { c as __spreadArray } from '../chunks/bundle-D_KO6Orc.js';
-import React__default, { useState } from 'react';
+import React__default, { useMemo } from 'react';
 import Icon, { IconTypes } from './Icon.js';
-import AccordionGroup$1 from './AccordionGroup.js';
-import { C as Consumer } from '../chunks/bundle-DrfdRrEf.js';
-import '../chunks/bundle-CwofYH9U.js';
+import { useAccordionGroupContext, AccordionGroupProvider } from './AccordionGroup.js';
+export { AccordionGroupContext } from './AccordionGroup.js';
+import '../chunks/bundle-DRWNB6So.js';
+import '../chunks/bundle-B-rlaXWu.js';
 
-function Accordion(_a) {
+var Accordion = function (_a) {
     var className = _a.className, id = _a.id, renderTitle = _a.renderTitle, renderContent = _a.renderContent, renderFooter = _a.renderFooter;
-    var _b = useState(false), showAccordion = _b[0], setShowAccordion = _b[1];
-    return (React__default.createElement(Consumer, null, 
-    // Function is considered like a react component
-    function (value) {
-        var opened = value.opened, setOpened = value.setOpened; // props from Provider
-        if (id === opened) {
-            setShowAccordion(true);
+    var _b = useAccordionGroupContext(), openedListKeys = _b.openedListKeys, addOpenedListKey = _b.addOpenedListKey, removeOpenedListKey = _b.removeOpenedListKey;
+    var isOpened = useMemo(function () { return openedListKeys.includes(id); }, [openedListKeys]);
+    var handleClick = function () {
+        if (isOpened) {
+            removeOpenedListKey(id);
         }
         else {
-            setShowAccordion(false);
+            addOpenedListKey(id);
         }
-        var handleClick = function () {
-            if (showAccordion) {
-                setOpened('');
-            }
-            else {
-                setOpened(id);
-            }
-        };
-        return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-                    'sendbird-accordion__panel-header',
-                ], false).join(' '), id: id, role: "switch", "aria-checked": false, onClick: handleClick, onKeyDown: handleClick, tabIndex: 0 },
-                renderTitle(),
-                React__default.createElement(Icon, { type: IconTypes.CHEVRON_RIGHT, className: [
-                        'sendbird-accordion__panel-icon-right',
-                        'sendbird-accordion__panel-icon--chevron',
-                        (showAccordion ? 'sendbird-accordion__panel-icon--open' : ''),
-                    ].join(' '), height: "24px", width: "24px" })),
-            showAccordion && (React__default.createElement("div", { className: "sendbird-accordion" },
-                React__default.createElement("div", { className: "sendbird-accordion__list" }, renderContent()),
-                renderFooter && (React__default.createElement("div", { className: "sendbird-accordion__footer" }, renderFooter()))))));
-    }));
-}
-var AccordionGroup = AccordionGroup$1;
+    };
+    return (React__default.createElement("div", { className: "sendbird-accordion ".concat(className, " ").concat(isOpened ? 'sendbird-accordion--opened' : 'sendbird-accordion--closed') },
+        React__default.createElement("div", { className: "sendbird-accordion__panel-header", id: id, role: "switch", "aria-checked": false, onClick: handleClick, onKeyDown: handleClick, tabIndex: 0 },
+            renderTitle(),
+            React__default.createElement(Icon, { type: IconTypes.CHEVRON_RIGHT, className: [
+                    'sendbird-accordion__panel-icon-right',
+                    'sendbird-accordion__panel-icon--chevron',
+                    (isOpened ? 'sendbird-accordion__panel-icon--open' : ''),
+                ].join(' '), height: "24px", width: "24px" })),
+        isOpened && (React__default.createElement("div", { className: "sendbird-accordion-opened-list" },
+            React__default.createElement("div", { className: "sendbird-accordion__list" }, renderContent()),
+            renderFooter && (React__default.createElement("div", { className: "sendbird-accordion__footer" }, renderFooter()))))));
+};
 
-export { AccordionGroup, Accordion as default };
+var AccordionGroup = AccordionGroupProvider;
+
+export { Accordion, AccordionGroup, AccordionGroupProvider, Accordion as default, useAccordionGroupContext };
 //# sourceMappingURL=Accordion.js.map

package/ui/Accordion.js.map

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

package/ui/AccordionGroup.js

@@ -1,15 +1,46 @@
-import React__default, { useState } from 'react';
-import { P as Provider } from '../chunks/bundle-DrfdRrEf.js';
-import '../chunks/bundle-CwofYH9U.js';
+import React__default, { createContext, useState, useContext } from 'react';
+import { n as noop } from '../chunks/bundle-B-rlaXWu.js';
 
-// Wraps all the accordions in an accordion set
-// keep one accordion open at a time
-function AccordionGroup(_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
-    var _c = useState(''), opened = _c[0], setOpened = _c[1];
-    return (React__default.createElement(Provider, { value: { opened: opened, setOpened: setOpened } },
-        React__default.createElement("div", { className: className }, children)));
-}
+var AccordionGroupContext = createContext({
+    openedListKeys: [],
+    addOpenedListKey: noop,
+    removeOpenedListKey: noop,
+    clearOpenedListKeys: noop,
+    allowMultipleOpen: false,
+});
+var AccordionGroupProvider = function (_a) {
+    var className = _a.className, children = _a.children, _b = _a.allowMultipleOpen, allowMultipleOpen = _b === void 0 ? false : _b;
+    var _c = useState([]), openedListKeys = _c[0], setOpenedListKeys = _c[1];
+    var addOpenedListKey = function (key) {
+        setOpenedListKeys(function (prevList) {
+            if (!allowMultipleOpen) {
+                return [key];
+            }
+            prevList.push(key);
+            return prevList;
+        });
+    };
+    var removeOpenedListKey = function (key) {
+        setOpenedListKeys(function (prevList) { return prevList.filter(function (k) { return k !== key; }); });
+    };
+    var clearOpenedListKeys = function () {
+        setOpenedListKeys([]);
+    };
+    return (React__default.createElement("div", { className: "sendbird-accordion-group-provider ".concat(className) },
+        React__default.createElement(AccordionGroupContext.Provider, { value: {
+                openedListKeys: openedListKeys,
+                addOpenedListKey: addOpenedListKey,
+                removeOpenedListKey: removeOpenedListKey,
+                clearOpenedListKeys: clearOpenedListKeys,
+                allowMultipleOpen: allowMultipleOpen,
+            } }, children)));
+};
+var useAccordionGroupContext = function () {
+    var context = useContext(AccordionGroupContext);
+    if (!context)
+        throw new Error('No accordion group context available. Make sure you are rending <AccordionGroupContext />.');
+    return context;
+};
 
-export { AccordionGroup as default };
+export { AccordionGroupContext, AccordionGroupProvider, AccordionGroupProvider as default, useAccordionGroupContext };
 //# sourceMappingURL=AccordionGroup.js.map

package/ui/AccordionGroup.js.map

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

package/ui/AdminMessage.js

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