@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-1

package/index.d.ts

@@ -1,12 +1,12 @@
 /**
- * Type Definitions for @sendbird/uikit-react@3.5.0-beta.0
+ * Type Definitions for @sendbird/uikit-react@3.5.0-mobile-web-1
  * homepage: https://sendbird.com/
  * git: https://github.com/sendbird/sendbird-uikit-react
- */
+*/
 declare module "SendbirdUIKitGlobal" {
   import type React from 'react';
-  import type Locale from 'date-fns';
   import type SendbirdChat from '@sendbird/chat';
+  import { GroupChannelModule, ModuleNamespaces, OpenChannelModule } from '@sendbird/chat/lib/__definition';
   import type {
     SendbirdError,
     SessionHandler,
@@ -51,7 +51,7 @@ declare module "SendbirdUIKitGlobal" {
     customApiHost?: string,
     customWebSocketHost?: string,
     // not-ready yet
-    // mediaQueryBreakPoint?: string | boolean,
+    // breakpoint?: string | boolean,
     theme?: 'light' | 'dark';
     userListQuery?(): UserListQuery;
     nickname?: string;
@@ -66,6 +66,11 @@ declare module "SendbirdUIKitGlobal" {
     config?: SendbirdProviderConfig;
     useReaction?: boolean;
     useMessageGrouping?: boolean;
+    isVoiceMessageEnabled?: boolean;
+    voiceRecord?: {
+      maxRecordingTime?: number,
+      minRecordingTime?: number,
+    };
     stringSet?: Record<string, string>;
     colorSet?: Record<string, string>;
     imageCompression?: {
@@ -82,11 +87,17 @@ declare module "SendbirdUIKitGlobal" {
   }
 
   export type Logger = {
-    info?(title?: unknown, description?: unknown): void;
-    error?(title?: unknown, description?: unknown): void;
-    warning?(title?: unknown, description?: unknown): void;
+    info(message: string, payload?: Record<string, unknown>): void;
+    error(message: string, payload?: Record<string, unknown>): void;
+    warning(message: string, payload?: Record<string, unknown>): void;
   }
 
+  export type MarkAsReadSchedulerType = {
+    push: (channel: GroupChannel) => void;
+    clear: () => void;
+    getQueue: () => GroupChannel[];
+  };
+
   export type MessageHandler = (message: UserMessage | FileMessage) => void;
 
   export interface UikitMessageHandler {
@@ -137,7 +148,7 @@ declare module "SendbirdUIKitGlobal" {
   export type EveryMessage = ClientUserMessage | ClientFileMessage | ClientAdminMessage;
   export type ClientSentMessages = ClientUserMessage | ClientFileMessage;
 
-  export type GetSdk = SendbirdChat | undefined;
+  export type GetSdk = SendbirdChat & ModuleNamespaces<[GroupChannelModule, OpenChannelModule]> | undefined;
   export type GetConnect = (
     userId: string,
     accessToken?: string
@@ -218,33 +229,37 @@ declare module "SendbirdUIKitGlobal" {
     userId: string;
     appId: string;
     accessToken?: string;
-    configureSession?: (sdk: SendbirdGroupChat | SendbirdOpenChat) => SessionHandler;
+    configureSession?: (sdk: SendbirdChat | SendbirdGroupChat | SendbirdOpenChat) => SessionHandler;
     customApiHost?: string,
     customWebSocketHost?: string,
-    // mediaQueryBreakPoint?: string | boolean,
-    children?: React.ReactNode | React.ReactElement;
+    children?: React.ReactElement;
     theme?: 'light' | 'dark';
+    replyType?: ReplyType;
     nickname?: string;
     profileUrl?: string;
     dateLocale?: Locale;
+    markAsReadScheduler?: MarkAsReadSchedulerType;
     disableUserProfile?: boolean;
     disableMarkAsDelivered?: boolean;
-    onUserProfileMessage?: (props: GroupChannel) => void;
-    renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
+    renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
     allowProfileEdit?: boolean;
     userListQuery?(): UserListQuery;
     config?: SendbirdProviderConfig;
     stringSet?: Record<string, string>;
     colorSet?: Record<string, string>;
-    isMentionEnabled?: boolean;
     imageCompression?: {
       compressionRate?: number,
       resizingWidth?: number | string,
       resizingHeight?: number | string,
     };
-    isReactionEnabled?: boolean,
-    isTypingIndicatorEnabledOnChannelList?: boolean,
-    isMessageReceiptStatusEnabledOnChannelList?: boolean,
+    isMentionEnabled?: boolean;
+    isVoiceMessageEnabled?: boolean;
+    voiceRecord?: {
+      maxRecordingTime?: number,
+      minRecordingTime?: number,
+    };
+    isTypingIndicatorEnabledOnChannelList?: boolean;
+    isMessageReceiptStatusEnabledOnChannelList?: boolean;
   }
 
   export interface SendBirdStateConfig {
@@ -272,6 +287,11 @@ declare module "SendbirdUIKitGlobal" {
       resizingWidth?: number | string,
       resizingHeight?: number | string,
     };
+    isVoiceMessageEnabled?: boolean;
+    voiceRecord?: {
+      maxRecordingTime?: number,
+      minRecordingTime?: number,
+    };
     isTypingIndicatorEnabledOnChannelList?: boolean;
     isMessageReceiptStatusEnabledOnChannelList?: boolean;
     replyType: ReplyType;
@@ -332,6 +352,7 @@ declare module "SendbirdUIKitGlobal" {
     renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
     disableUserProfile?: boolean;
     disableAutoSelect?: boolean;
+    activeChannelUrl?: string;
     isTypingIndicatorEnabled?: boolean;
     isMessageReceiptStatusEnabled?: boolean;
   }
@@ -425,6 +446,7 @@ declare module "SendbirdUIKitGlobal" {
     channelUrl: string;
     className?: string;
     onCloseClick?(): void;
+    onLeaveChannel?(): void;
     onChannelModified?(channel: GroupChannel): void;
     overrideInviteUser?(params: OverrideInviteMemberType): void;
     onBeforeUpdateChannel?(currentTitle: string, currentImg: File, data: string): GroupChannelUpdateParams;
@@ -463,6 +485,16 @@ declare module "SendbirdUIKitGlobal" {
     onCancel: () => void;
   };
 
+  export enum VoicePlayerStatusType {
+    IDLE = 'IDLE',
+    PREPARING = 'PREPARING',
+    READY_TO_PLAY = 'READY_TO_PLAY',
+    PLAYING = 'PLAYING',
+    COMPLETED = 'COMPLETED',
+  }
+  // should be deprecated / for backward
+  export type VoicePlayerStatus = VoicePlayerStatusType;
+
   /**
    * Channel
    */
@@ -499,6 +531,7 @@ declare module "SendbirdUIKitGlobal" {
     replyType?: ReplyType;
     threadReplySelectType?: ThreadReplySelectType;
     queries?: ChannelQueries;
+    filterMessageList?(messages: BaseMessage): boolean;
     renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
     disableUserProfile?: boolean;
     disableMarkAsRead?: boolean;
@@ -518,6 +551,9 @@ declare module "SendbirdUIKitGlobal" {
     renderMessageInput?: () => React.ReactNode | React.ReactElement;
     renderTypingIndicator?: () => React.ReactNode | React.ReactElement;
     renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactNode | React.ReactElement;
+    renderFileUploadIcon?: () => React.ReactElement;
+    renderVoiceMessageIcon?: () => React.ReactElement;
+    renderSendMessageIcon?: () => React.ReactElement;
   }
 
   export type CoreMessageType = AdminMessage | UserMessage | FileMessage;
@@ -564,7 +600,7 @@ declare module "SendbirdUIKitGlobal" {
     hasSeparator?: boolean;
     chainTop?: boolean;
     chainBottom?: boolean;
-    handleScroll: () => void;
+    handleScroll?: () => void;
     // for extending
     renderMessage?: (props: RenderMessageProps) => React.ReactNode | React.ReactElement;
     renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactNode | React.ReactElement;
@@ -575,7 +611,11 @@ declare module "SendbirdUIKitGlobal" {
   export type MessageInputProps = {
     // value is removed when channelURL changes
     value?: string;
+    disabled?: boolean;
     ref?: React.MutableRefObject<any>;
+    renderFileUploadIcon?: () => React.ReactElement;
+    renderVoiceMessageIcon?: () => React.ReactElement;
+    renderSendMessageIcon?: () => React.ReactElement;
   };
 
   export type MessageListProps = {
@@ -636,7 +676,6 @@ declare module "SendbirdUIKitGlobal" {
       // includeReactions?: boolean,
       // UIKit doesn't support message threading in OpenChannel
       // includeThreadInfo?: boolean,
-      includePollDetails?: boolean,
       includeParentMessageInfo?: boolean,
       showSubchannelMessagesOnly?: boolean,
       customTypes?: Array<string>,
@@ -903,79 +942,14 @@ declare module "SendbirdUIKitGlobal" {
   }
 
   /**
-   * NotificationChannel
+   * Message
    */
-  export enum ActionType {
-    Web = "web",
-    Custom = "custom",
-    UIKit = "uikit"
-  }
-
-  export interface Action {
-    type: ActionType;
-    data: string;
-    customData?: string;
-  }
-
-  export type NotificationFetchMoreCb = (value: [BaseMessage[] | null, Error | null]) => void;
-
-  export type NotficationChannelStateInterface = {
-    uiState: 'loading' | 'initialized' | 'invalid';
-    allMessages: BaseMessage[];
-    currentNotificationChannel: GroupChannel;
-    hasMore: boolean;
-    messageListParams?: MessageListParams;
-    lastSeen?: number;
-    showDeleteModal: boolean;
-    messageToDelete?: BaseMessage;
-  }
-
-  export type NotficationChannelContextProps = {
-    channelUrl: string;
-    children?: React.ReactElement;
-    messageListParams?: MessageListParams;
-    lastSeen?: number;
-    handleWebAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage);
-    handleCustomAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage);
-    handlePredefinedAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage);
-  };
-  export interface NotficationChannelProviderInterface extends NotficationChannelStateInterface,
-    NotficationChannelContextProps {
-      notificationsDispatcher: React.Dispatch<any>;
-      oldestMessageTimeStamp: number;
-      scrollRef: React.RefObject<HTMLDivElement>;
-      onFetchMore: (cb: NotificationFetchMoreCb) => void;
-    }
-  export type RenderNotificationMessageProps = {
-    message: BaseMessage;
-  }
-
-  export type renderNotificationMessage = (props: RenderNotificationMessageProps) => React.ReactElement;
-  export type renderNotificationMessageHeader = (props: RenderNotificationMessageProps) => React.ReactElement;
-
-  export type NotificationChannelUIProps = {
-    isLoading?: boolean;
-    renderPlaceholderLoader?: () => React.ReactElement;
-    renderPlaceholderInvalid?: () => React.ReactElement;
-    renderPlaceholderEmpty?: () => React.ReactElement;
-    renderHeader?: () => React.ReactElement;
-    renderMessageHeader?: renderNotificationMessageHeader;
-    renderMessage?: renderNotificationMessage;
-  }
-
-  export type NotificationListProps = {
-    renderMessage?: renderNotificationMessage;
-    renderMessageHeader?: renderNotificationMessageHeader;
-    renderPlaceholderEmpty?: () => React.ReactElement;
-  }
-
-  export type NotificationMessageWrapProps = {
-    renderMessage?: renderNotificationMessage;
-    renderMessageHeader?: renderNotificationMessageHeader;
+  export interface MessageProviderProps {
     message: BaseMessage;
+    isByMe?: boolean;
+    children?: React.ReactElement;
   }
-
-  export interface NotificationChannelProps extends NotificationChannelUIProps, NotficationChannelContextProps {}
+  export type MessageProviderInterface = Exclude<MessageProviderProps, 'children'>;
 
   /**
    * Thread
@@ -1059,6 +1033,9 @@ declare module "SendbirdUIKitGlobal" {
     renderCustomSeparator?: () => React.ReactElement;
     renderParentMessageInfoPlaceholder?: (type: ParentMessageStateTypes) => React.ReactElement;
     renderThreadListPlaceHolder?: (type: ThreadListStateTypes) => React.ReactElement;
+    renderFileUploadIcon?: () => React.ReactElement;
+    renderVoiceMessageIcon?: () => React.ReactElement;
+    renderSendMessageIcon?: () => React.ReactElement;
   }
 
   type EventType = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;
@@ -1105,6 +1082,10 @@ declare module "SendbirdUIKitGlobal" {
 
   export interface ThreadMessageInputProps {
     className?: string;
+    disabled?: boolean;
+    renderFileUploadIcon?: () => React.ReactElement;
+    renderVoiceMessageIcon?: () => React.ReactElement;
+    renderSendMessageIcon?: () => React.ReactElement;
   }
 
   /**
@@ -1256,6 +1237,11 @@ declare module '@sendbird/uikit-react/utils/message/getOutgoingMessageState' {
   ): OutgoingMessageStates;
 }
 
+declare module '@sendbird/uikit-react/utils/message/isVoiceMessage' {
+  import type { FileMessage } from '@sendbird/chat/message';
+  export function isVoiceMessage(message: FileMessage): boolean;
+}
+
 /** ChannelList */
 declare module '@sendbird/uikit-react/ChannelList' {
   import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
@@ -1586,36 +1572,12 @@ declare module '@sendbird/uikit-react/MessageSearch/components/MessageSearchUI'
 }
 
 /**
- * NotificationChannel
+ * Message
  */
-declare module '@sendbird/uikit-react/NotificationChannel' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const NotificationChannel: React.FC<SendbirdUIKitGlobal.NotificationChannelProps>;
-  export default NotificationChannel;
-}
-
-declare module '@sendbird/uikit-react/NotificationChannel/context' {
+declare module '@sendbird/uikit-react/Message/context' {
   import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  export const useNotficationChannelContext: () => SendbirdUIKitGlobal.NotficationChannelProviderInterface;
-  export const NotficationChannelProvider: React.FC<SendbirdUIKitGlobal.NotficationChannelContextProps>;
-}
-
-declare module '@sendbird/uikit-react/NotificationChannel/components/NotificationChannelUI' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const NotificationChannelUI: React.FC<SendbirdUIKitGlobal.NotificationChannelUIProps>;
-  export default NotificationChannelUI;
-}
-
-declare module '@sendbird/uikit-react/NotificationChannel/components/NotificationList' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const NotificationList: React.FC<SendbirdUIKitGlobal.NotificationListProps>;
-  export default NotificationList;
-}
-
-declare module '@sendbird/uikit-react/NotificationChannel/components/NotificationMessageWrap' {
-  import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  const NotificationMessageWrap: React.FC<SendbirdUIKitGlobal.NotificationMessageWrapProps>;
-  export default NotificationMessageWrap;
+  export const useMessageContext: () => SendbirdUIKitGlobal.MessageProviderInterface;
+  export const MessageProvider: React.FC<SendbirdUIKitGlobal.MessageProviderProps>;
 }
 
 /**
@@ -1902,6 +1864,7 @@ declare module '@sendbird/uikit-react/ui/Dropdown' {
 declare module '@sendbird/uikit-react/ui/EmojiReactions' {
   import type { EmojiCategory } from '@sendbird/chat';
   import type { FileMessage, UserMessage } from '@sendbird/chat/message';
+  import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
   interface EmojiContainer {
     emojiCategories: Array<EmojiCategory>;
@@ -1911,6 +1874,7 @@ declare module '@sendbird/uikit-react/ui/EmojiReactions' {
     className?: string | Array<string>;
     userId: string;
     message: UserMessage | FileMessage;
+    channel: GroupChannel;
     emojiContainer: EmojiContainer;
     memberNicknamesMap: Map<string, string>;
     spaceFromTrigger?: Record<string, unknown>;
@@ -1934,7 +1898,24 @@ declare module '@sendbird/uikit-react/ui/FileMessageItemBody' {
   }
   const FileMessageItemBody: React.FC<FileMessageItemBodyProps>;
   export default FileMessageItemBody;
+}
 
+declare module '@sendbird/uikit-react/ui/VoiceMessageItemBody' {
+  enum VoicePlayerStatusType {
+    IDLE = 'IDLE',
+    PREPARING = 'PREPARING',
+    READY_TO_PLAY = 'READY_TO_PLAY',
+    PLAYING = 'PLAYING',
+    COMPLETED = 'COMPLETED',
+  }
+  interface VoiceMessageItemBodyProps {
+    minRecordTime?: number;
+    maximumValue: number;
+    currentValue?: number;
+    currentType: VoicePlayerStatusType;
+  }
+  type VoiceMessageItemBody = React.FC<VoiceMessageItemBodyProps>;
+  export default VoiceMessageItemBody;
 }
 
 declare module '@sendbird/uikit-react/ui/FileViewer' {
@@ -2100,6 +2081,7 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
     className?: Array<string>,
     isEdit?: boolean,
     isMentionEnabled?: boolean;
+    isVoiceMessageEnabled?: boolean;
     disabled?: boolean,
     // value is removed when channelURL changes
     value?: string,
@@ -2117,11 +2099,38 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
     onMentionedUserIdsUpdated?: (userIds: Array<string>) => void,
     onKeyUp?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
     onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
+    onVoiceMessageIconClick?: () => void;
+    renderFileUploadIcon?: () => React.ReactElement;
+    renderVoiceMessageIcon?: () => React.ReactElement;
+    renderSendMessageIcon?: () => React.ReactElement;
   }
   const MessageInput: React.FC<MessageInputProps>;
   export default MessageInput;
 }
 
+declare module '@sendbird/uikit-react/ui/VoiceMessageInput' {
+  export enum VoiceMessageInputStatus {
+    READY_TO_RECORD = 'READY_TO_RECORD',
+    RECORDING = 'RECORDING',
+    READY_TO_PLAY = 'READY_TO_PLAY',
+    PLAYING = 'PLAYING',
+  }
+  interface VoiceMessageInputProps {
+    minRecordTime?: number;
+    maximumValue: number;
+    currentValue?: number;
+    currentType: VoiceMessageInputStatus;
+    onCancelClick?: () => void;
+    onControlClick?: (type: VoiceMessageInputStatus) => void;
+    onSubmitClick?: () => void;
+    renderCancelButton?: () => React.ReactElement;
+    renderControlButton?: (type: VoiceMessageInputStatus) => React.ReactElement;
+    renderSubmitButton?: () => React.ReactElement;
+  }
+  type VoiceMessageInput = React.FC<VoiceMessageInputProps>;
+  export default VoiceMessageInput;
+}
+
 declare module '@sendbird/uikit-react/ui/MessageItemMenu' {
   import type { GroupChannel } from '@sendbird/chat/groupChannel';
   import type { FileMessage, UserMessage } from '@sendbird/chat/message';
@@ -2267,6 +2276,8 @@ declare module '@sendbird/uikit-react/ui/OpenChannelFileMessage' {
   interface OpenChannelFileMessageProps {
     className?: string | Array<string>;
     message: SenbirdUIKitGlobal.ClientFileMessage;
+    isOperator?: boolean;
+    isEphemeral?: boolean;
     userId: string;
     disabled?: boolean;
     chainTop?: boolean;
@@ -2280,8 +2291,10 @@ declare module '@sendbird/uikit-react/ui/OpenChannelFileMessage' {
 
 declare module '@sendbird/uikit-react/ui/OpenChannelOGMessage' {
   import type SenbirdUIKitGlobal from 'SendbirdUIKitGlobal';
-  interface OOpenChannelOGMessageProps {
+  interface OpenChannelOGMessageProps {
     message: SenbirdUIKitGlobal.ClientUserMessage;
+    isOperator?: boolean;
+    isEphemeral?: boolean;
     className?: string | Array<string>;
     disabled?: boolean;
     showEdit(bool: boolean): void;
@@ -2291,8 +2304,8 @@ declare module '@sendbird/uikit-react/ui/OpenChannelOGMessage' {
     chainBottom?: boolean;
     userId: string;
   }
-  const OOpenChannelOGMessage: React.FC<OOpenChannelOGMessageProps>;
-  export default OOpenChannelOGMessage;
+  const OpenChannelOGMessage: React.FC<OpenChannelOGMessageProps>;
+  export default OpenChannelOGMessage;
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelThumbnailMessage' {
@@ -2300,6 +2313,8 @@ declare module '@sendbird/uikit-react/ui/OpenChannelThumbnailMessage' {
   interface OpenChannelThumbnailMessageProps {
     className?: string | Array<string>;
     message: SenbirdUIKitGlobal.ClientFileMessage;
+    isOperator?: boolean;
+    isEphemeral?: boolean;
     disabled: boolean;
     userId: string;
     chainTop: boolean;
@@ -2313,15 +2328,17 @@ declare module '@sendbird/uikit-react/ui/OpenChannelThumbnailMessage' {
 }
 
 declare module '@sendbird/uikit-react/ui/OpenChannelUserMessage' {
-  import type SenbirdUIKitGlobal from 'SendbirdUIKitGlobal';
+  import type SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
   interface OpenChannelUserMessageProps {
     className?: string | Array<string>;
-    message: SenbirdUIKitGlobal.ClientUserMessage;
+    message: SendbirdUIKitGlobal.ClientUserMessage;
+    isOperator?: boolean;
+    isEphemeral?: boolean;
     userId: string;
     disabled?: boolean;
     showEdit(bool: boolean): void;
     showRemove(bool: boolean): void;
-    resendMessage(message: SenbirdUIKitGlobal.ClientUserMessage): void;
+    resendMessage(message: SendbirdUIKitGlobal.ClientUserMessage): void;
     chainTop?: boolean;
     chainBottom?: boolean;
   }
@@ -2465,6 +2482,37 @@ declare module '@sendbird/uikit-react/ui/ThumbnailMessageItemBody' {
   export default ThumbnailMessageItemBody;
 }
 
+declare module '@sendbird/uikit-react/ui/Toggle' {
+  export interface ToggleContextInterface {
+    checked?: boolean | null;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onFocus?: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: React.ChangeEventHandler<HTMLInputElement>;
+  }
+  export interface ToggleContainerProps extends ToggleContextInterface {
+    children?: React.ReactElement;
+  }
+  export interface ToggleUIProps {
+    reversed?: boolean;
+    width?: string;
+    animationDuration?: string;
+    style?: Record<string, string>;
+    name?: string;
+    id?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+  }
+  export interface ToggleProps extends ToggleContainerProps, ToggleUIProps {
+    className?: string;
+  }
+  export const Toggle: React.FC<ToggleProps>;
+  export const ToggleContainer: React.FC<ToggleContainerProps>;
+  export const ToggleUI: React.FC<ToggleUIProps>;
+  export function useToggleContext(): ToggleContextInterface;
+}
+
 declare module '@sendbird/uikit-react/ui/Tooltip' {
   interface TooltipProps {
     children?: React.ReactElement;