@sendbird/uikit-react 3.7.0 → 3.8.1

package/types/ui/QuoteMessageInput/mockMessage.d.ts

@@ -0,0 +1,362 @@
+export declare const dummyFileMessageImage: {
+    isFileMessage: () => boolean;
+    messageId: number;
+    messageType: string;
+    channelUrl: string;
+    data: string;
+    customType: string;
+    createdAt: number;
+    updatedAt: number;
+    channelType: string;
+    metaArrays: any[];
+    reactions: any[];
+    mentionType: string;
+    mentionedUsers: any[];
+    url: string;
+    name: string;
+    size: number;
+    type: string;
+    thumbnails: any[];
+    sender: {
+        nickname: string;
+        profileUrl: string;
+        userId: string;
+        connectionStatus: string;
+        lastSeenAt: number;
+        isActive: boolean;
+        friendDiscoveryKey: any;
+        friendName: any;
+        _preferredLanguages: any;
+        isBlockedByMe: boolean;
+    };
+    reqId: string;
+    requireAuth: boolean;
+    requestState: string;
+    requestedMentionUserIds: any[];
+    errorCode: number;
+};
+export declare const dummyFileMessageVideo: {
+    isFileMessage: () => boolean;
+    messageId: number;
+    messageType: string;
+    channelUrl: string;
+    data: string;
+    customType: string;
+    createdAt: number;
+    updatedAt: number;
+    channelType: string;
+    metaArrays: any[];
+    reactions: any[];
+    mentionType: string;
+    mentionedUsers: any[];
+    url: string;
+    name: string;
+    size: number;
+    type: string;
+    thumbnails: {
+        url: string;
+        real_height: number;
+        real_width: number;
+        width: number;
+        height: number;
+    }[];
+    sender: {
+        nickname: string;
+        profileUrl: string;
+        userId: string;
+        connectionStatus: string;
+        lastSeenAt: number;
+        isActive: boolean;
+        friendDiscoveryKey: any;
+        friendName: any;
+        _preferredLanguages: any;
+        isBlockedByMe: boolean;
+    };
+    reqId: string;
+    requireAuth: boolean;
+    requestState: string;
+    requestedMentionUserIds: any[];
+    errorCode: number;
+};
+export declare const dummyFileMessageAudio: {
+    isFileMessage: () => boolean;
+    messageId: number;
+    messageType: string;
+    channelUrl: string;
+    data: string;
+    customType: string;
+    createdAt: number;
+    updatedAt: number;
+    channelType: string;
+    metaArrays: any[];
+    reactions: any[];
+    mentionType: string;
+    mentionedUsers: any[];
+    url: string;
+    name: string;
+    size: number;
+    type: string;
+    thumbnails: any[];
+    sender: {
+        nickname: string;
+        profileUrl: string;
+        userId: string;
+        connectionStatus: string;
+        lastSeenAt: number;
+        isActive: boolean;
+        friendDiscoveryKey: any;
+        friendName: any;
+        _preferredLanguages: any;
+        isBlockedByMe: boolean;
+    };
+    reqId: string;
+    requireAuth: boolean;
+    requestState: string;
+    requestedMentionUserIds: any[];
+    errorCode: number;
+};
+export declare const dummyFileMessageGif: {
+    isFileMessage: () => boolean;
+    messageId: number;
+    messageType: string;
+    channelUrl: string;
+    data: string;
+    customType: string;
+    createdAt: number;
+    updatedAt: number;
+    channelType: string;
+    metaArrays: any[];
+    reactions: any[];
+    mentionType: string;
+    mentionedUsers: any[];
+    url: string;
+    name: string;
+    size: number;
+    type: string;
+    thumbnails: any[];
+    sender: {
+        nickname: string;
+        profileUrl: string;
+        userId: string;
+        connectionStatus: string;
+        lastSeenAt: number;
+        isActive: boolean;
+        friendDiscoveryKey: any;
+        friendName: any;
+        _preferredLanguages: any;
+        isBlockedByMe: boolean;
+    };
+    reqId: string;
+    requireAuth: boolean;
+    requestState: string;
+    requestedMentionUserIds: any[];
+    errorCode: number;
+};
+export declare const dummyFileMessageWithThumbnail: {
+    isFileMessage: () => boolean;
+    messageId: number;
+    messageType: string;
+    channelUrl: string;
+    data: string;
+    customType: string;
+    createdAt: number;
+    updatedAt: number;
+    channelType: string;
+    metaArrays: any[];
+    reactions: any[];
+    mentionType: string;
+    mentionedUsers: any[];
+    url: string;
+    name: string;
+    size: number;
+    type: string;
+    thumbnails: {
+        url: string;
+        real_height: number;
+        real_width: number;
+        width: number;
+        height: number;
+    }[];
+    sender: {
+        nickname: string;
+        profileUrl: string;
+        userId: string;
+        connectionStatus: string;
+        lastSeenAt: number;
+        metaData: {};
+        isActive: boolean;
+        friendDiscoveryKey: any;
+        friendName: any;
+        _preferredLanguages: any;
+        isBlockedByMe: boolean;
+    };
+    reqId: string;
+    requireAuth: boolean;
+    requestState: string;
+    requestedMentionUserIds: any[];
+    errorCode: number;
+};
+declare const _default: {
+    dummyFileMessageAudio: {
+        isFileMessage: () => boolean;
+        messageId: number;
+        messageType: string;
+        channelUrl: string;
+        data: string;
+        customType: string;
+        createdAt: number;
+        updatedAt: number;
+        channelType: string;
+        metaArrays: any[];
+        reactions: any[];
+        mentionType: string;
+        mentionedUsers: any[];
+        url: string;
+        name: string;
+        size: number;
+        type: string;
+        thumbnails: any[];
+        sender: {
+            nickname: string;
+            profileUrl: string;
+            userId: string;
+            connectionStatus: string;
+            lastSeenAt: number;
+            isActive: boolean;
+            friendDiscoveryKey: any;
+            friendName: any;
+            _preferredLanguages: any;
+            isBlockedByMe: boolean;
+        };
+        reqId: string;
+        requireAuth: boolean;
+        requestState: string;
+        requestedMentionUserIds: any[];
+        errorCode: number;
+    };
+    dummyFileMessageVideo: {
+        isFileMessage: () => boolean;
+        messageId: number;
+        messageType: string;
+        channelUrl: string;
+        data: string;
+        customType: string;
+        createdAt: number;
+        updatedAt: number;
+        channelType: string;
+        metaArrays: any[];
+        reactions: any[];
+        mentionType: string;
+        mentionedUsers: any[];
+        url: string;
+        name: string;
+        size: number;
+        type: string;
+        thumbnails: {
+            url: string;
+            real_height: number;
+            real_width: number;
+            width: number;
+            height: number;
+        }[];
+        sender: {
+            nickname: string;
+            profileUrl: string;
+            userId: string;
+            connectionStatus: string;
+            lastSeenAt: number;
+            isActive: boolean;
+            friendDiscoveryKey: any;
+            friendName: any;
+            _preferredLanguages: any;
+            isBlockedByMe: boolean;
+        };
+        reqId: string;
+        requireAuth: boolean;
+        requestState: string;
+        requestedMentionUserIds: any[];
+        errorCode: number;
+    };
+    dummyFileMessageImage: {
+        isFileMessage: () => boolean;
+        messageId: number;
+        messageType: string;
+        channelUrl: string;
+        data: string;
+        customType: string;
+        createdAt: number;
+        updatedAt: number;
+        channelType: string;
+        metaArrays: any[];
+        reactions: any[];
+        mentionType: string;
+        mentionedUsers: any[];
+        url: string;
+        name: string;
+        size: number;
+        type: string;
+        thumbnails: any[];
+        sender: {
+            nickname: string;
+            profileUrl: string;
+            userId: string;
+            connectionStatus: string;
+            lastSeenAt: number;
+            isActive: boolean;
+            friendDiscoveryKey: any;
+            friendName: any;
+            _preferredLanguages: any;
+            isBlockedByMe: boolean;
+        };
+        reqId: string;
+        requireAuth: boolean;
+        requestState: string;
+        requestedMentionUserIds: any[];
+        errorCode: number;
+    };
+    dummyFileMessageWithThumbnail: {
+        isFileMessage: () => boolean;
+        messageId: number;
+        messageType: string;
+        channelUrl: string;
+        data: string;
+        customType: string;
+        createdAt: number;
+        updatedAt: number;
+        channelType: string;
+        metaArrays: any[];
+        reactions: any[];
+        mentionType: string;
+        mentionedUsers: any[];
+        url: string;
+        name: string;
+        size: number;
+        type: string;
+        thumbnails: {
+            url: string;
+            real_height: number;
+            real_width: number;
+            width: number;
+            height: number;
+        }[];
+        sender: {
+            nickname: string;
+            profileUrl: string;
+            userId: string;
+            connectionStatus: string;
+            lastSeenAt: number;
+            metaData: {};
+            isActive: boolean;
+            friendDiscoveryKey: any;
+            friendName: any;
+            _preferredLanguages: any;
+            isBlockedByMe: boolean;
+        };
+        reqId: string;
+        requireAuth: boolean;
+        requestState: string;
+        requestedMentionUserIds: any[];
+        errorCode: number;
+    };
+};
+export default _default;

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

@@ -0,0 +1,12 @@
+import React, { KeyboardEvent, MouseEvent, ReactElement, TouchEvent } from 'react';
+import './index.scss';
+export interface ReactionBadgeProps {
+    className?: string | Array<string>;
+    children: ReactElement;
+    count?: number | string;
+    isAdd?: boolean;
+    selected?: boolean;
+    onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
+}
+declare const ReactionBadge: React.ForwardRefExoticComponent<ReactionBadgeProps & React.RefAttributes<HTMLDivElement>>;
+export default ReactionBadge;

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

@@ -0,0 +1,13 @@
+import React, { KeyboardEvent, MouseEvent, ReactElement, TouchEvent } from 'react';
+import './index.scss';
+export interface ReactionButtonProps {
+    children: ReactElement;
+    className?: string | Array<string>;
+    width?: string | number;
+    height?: string | number;
+    selected?: boolean;
+    dataSbId?: string;
+    onClick?: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
+}
+declare const ReactionButton: React.ForwardRefExoticComponent<ReactionButtonProps & React.RefAttributes<HTMLDivElement>>;
+export default ReactionButton;

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

@@ -0,0 +1,10 @@
+import { ReactElement, ReactNode } from 'react';
+import './index.scss';
+export interface SortByRowProps {
+    className?: string | Array<string>;
+    maxItemCount: number;
+    itemWidth: number;
+    itemHeight: number;
+    children: ReactNode;
+}
+export default function SortByRow({ className, maxItemCount, itemWidth, itemHeight, children, }: SortByRowProps): ReactElement;

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

@@ -0,0 +1,13 @@
+import { MouseEvent, KeyboardEvent, ReactElement } from 'react';
+import './index.scss';
+import { Colors } from '../../utils/color';
+export interface TextButtonProps {
+    className?: string | Array<string>;
+    color?: Colors;
+    disabled?: boolean;
+    disableUnderline?: boolean;
+    onClick?: (e: (MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>)) => void;
+    children: ReactElement;
+}
+declare const TextButton: ({ className, color, disabled, disableUnderline, onClick, children, }: TextButtonProps) => ReactElement;
+export default TextButton;

package/types/ui/TextMessageItemBody/consts.d.ts

@@ -0,0 +1 @@
+export declare const TEXT_MESSAGE_BODY_CLASSNAME = "sendbird-text-message-item-body";

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

@@ -0,0 +1,13 @@
+import './index.scss';
+import { ReactElement } from 'react';
+import type { UserMessage } from '@sendbird/chat/message';
+interface Props {
+    className?: string | Array<string>;
+    message: UserMessage;
+    isByMe?: boolean;
+    mouseHover?: boolean;
+    isMentionEnabled?: boolean;
+    isReactionEnabled?: boolean;
+}
+export default function TextMessageItemBody({ className, message, isByMe, mouseHover, isMentionEnabled, isReactionEnabled, }: Props): ReactElement;
+export {};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ThreadInfo } from '@sendbird/chat/message';
+import './index.scss';
+export interface ThreadRepliesProps {
+    className?: string;
+    threadInfo: ThreadInfo;
+    onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export default function ThreadReplies({ className, threadInfo, onClick, }: ThreadRepliesProps): React.ReactElement;

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

@@ -0,0 +1,15 @@
+import './index.scss';
+import { ReactElement } from 'react';
+import type { FileMessage } from '@sendbird/chat/message';
+import { MultipleFilesMessage } from '@sendbird/chat/message';
+interface Props {
+    className?: string | Array<string>;
+    message: FileMessage | MultipleFilesMessage;
+    isByMe?: boolean;
+    mouseHover?: boolean;
+    isReactionEnabled?: boolean;
+    showFileViewer?: (bool: boolean) => void;
+    style?: Record<string, any>;
+}
+export default function ThumbnailMessageItemBody({ className, message, isByMe, mouseHover, isReactionEnabled, showFileViewer, style, }: Props): ReactElement;
+export {};

package/types/ui/Toggle/ToggleContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ToggleContextInterface } from './ToggleContext';
+export interface ToggleContainerProps extends ToggleContextInterface {
+    children?: React.ReactElement;
+}
+export declare function ToggleContainer({ checked, // null
+defaultChecked, disabled, onChange, onFocus, onBlur, children, }: ToggleContainerProps): React.ReactElement;

package/types/ui/Toggle/ToggleContext.d.ts

@@ -0,0 +1,19 @@
+import React, { ChangeEventHandler } from 'react';
+export declare const TOGGLE_DEFAULT_VALUE: {
+    checked: any;
+    defaultChecked: boolean;
+    disabled: boolean;
+    onChange: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+};
+export interface ToggleContextInterface {
+    checked?: boolean | null;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onFocus?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const ToggleContext: React.Context<ToggleContextInterface>;
+export declare function useToggleContext(): ToggleContextInterface;

package/types/ui/Toggle/ToggleUI.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ToggleUIProps {
+    reversed?: boolean;
+    width?: string;
+    animationDuration?: string;
+    style?: Record<string, string>;
+    name?: string;
+    id?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+}
+export declare function ToggleUI(props: ToggleUIProps): React.ReactElement;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.scss';
+import { ToggleContainer, ToggleContainerProps } from './ToggleContainer';
+import { useToggleContext } from './ToggleContext';
+import { ToggleUI, ToggleUIProps } from './ToggleUI';
+export interface ToggleProps extends ToggleContainerProps, ToggleUIProps {
+    className?: string;
+}
+declare function Toggle(props: ToggleProps): React.ReactElement;
+export type { ToggleContainerProps, ToggleUIProps };
+export { Toggle, ToggleContainer, ToggleUI, useToggleContext };

package/types/ui/Toggle/utils.d.ts

@@ -0,0 +1 @@
+export declare function filterNumber(input: string | number): Array<number>;

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

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import './index.scss';
+export interface TooltipProps {
+    className?: string | Array<string>;
+    children?: string | ReactElement;
+}
+export default function Tooltip({ className, children, }: TooltipProps): ReactElement;

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

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import './index.scss';
+export interface TooltipWrapperProps {
+    className?: string | Array<string>;
+    children: ReactElement;
+    hoverTooltip: ReactElement;
+}
+export default function TooltipWrapper({ className, children, hoverTooltip, }: TooltipWrapperProps): ReactElement;

package/types/ui/TypingIndicatorMessage/TypingDots.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './typingDots.scss';
+declare const TypingDots: () => JSX.Element;
+export default TypingDots;

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

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import { Member } from '@sendbird/chat/groupChannel';
+export interface TypingIndicatorMessageProps {
+    typingMember: Member;
+}
+export default function TypingIndicatorMessage({ typingMember, }: TypingIndicatorMessageProps): ReactElement;

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

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import './index.scss';
+import { BaseMessage } from '@sendbird/chat/message';
+interface Props {
+    className?: string | Array<string>;
+    isByMe?: boolean;
+    message: BaseMessage;
+    mouseHover?: boolean;
+    isReactionEnabled?: boolean;
+}
+export default function UnknownMessageItemBody({ className, message, isByMe, mouseHover, isReactionEnabled, }: Props): ReactElement;
+export {};

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

@@ -0,0 +1,21 @@
+import { ChangeEvent, MutableRefObject, ReactElement } from 'react';
+import { User } from '@sendbird/chat';
+import './index.scss';
+export interface UserListItemProps {
+    user: User;
+    className?: string;
+    checked?: boolean;
+    checkBox?: boolean;
+    isOperator?: boolean;
+    disabled?: boolean;
+    disableMessaging?: boolean;
+    currentUser?: string;
+    action?({ actionRef, parentRef }: {
+        actionRef: MutableRefObject<any>;
+        parentRef?: MutableRefObject<any>;
+    }): ReactElement;
+    onChange?(e: ChangeEvent<HTMLInputElement>): void;
+    avatarSize?: string;
+    onClick?(): void;
+}
+export default function UserListItem({ user, className, checked, checkBox, isOperator, disabled, disableMessaging, currentUser, action, onChange, avatarSize, onClick, }: UserListItemProps): ReactElement;

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

@@ -0,0 +1,17 @@
+import './index.scss';
+import { ReactElement } from 'react';
+import type { GroupChannel, GroupChannelCreateParams } from '@sendbird/chat/groupChannel';
+import type { User } from '@sendbird/chat';
+interface Logger {
+    info?(message: string, channel: GroupChannel): void;
+}
+interface Props {
+    user: User;
+    currentUserId?: string;
+    logger?: Logger;
+    disableMessaging?: boolean;
+    createChannel?(params: GroupChannelCreateParams): Promise<GroupChannel>;
+    onSuccess?: () => void;
+}
+declare function UserProfile({ user, currentUserId, disableMessaging, onSuccess, }: Props): ReactElement;
+export default UserProfile;

package/types/ui/VoiceMessageInput/controlerIcons.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { VoiceMessageInputStatus } from './types';
+export interface ControlerIconProps {
+    inputState?: VoiceMessageInputStatus;
+}
+export declare const ControlerIcon: ({ inputState, }: ControlerIconProps) => React.ReactElement;
+export default ControlerIcon;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.scss';
+import { VoiceMessageInputStatus } from './types';
+export 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;
+}
+export declare const VoiceMessageInput: ({ minRecordTime, maximumValue, currentValue, currentType, onCancelClick, onControlClick, onSubmitClick, renderCancelButton, renderControlButton, renderSubmitButton, }: VoiceMessageInputProps) => React.ReactElement;

package/types/ui/VoiceMessageInput/types.d.ts

@@ -0,0 +1,7 @@
+export declare const VoiceMessageInputStatus: {
+    readonly READY_TO_RECORD: "READY_TO_RECORD";
+    readonly RECORDING: "RECORDING";
+    readonly READY_TO_PLAY: "READY_TO_PLAY";
+    readonly PLAYING: "PLAYING";
+};
+export type VoiceMessageInputStatus = typeof VoiceMessageInputStatus[keyof typeof VoiceMessageInputStatus];

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FileMessage } from '@sendbird/chat/message';
+import './index.scss';
+export interface VoiceMessageItemBodyProps {
+    className?: string;
+    message: FileMessage;
+    channelUrl: string;
+    isByMe?: boolean;
+    isReactionEnabled?: boolean;
+}
+export declare const VoiceMessageItemBody: ({ className, message, channelUrl, isByMe, isReactionEnabled, }: VoiceMessageItemBodyProps) => React.ReactElement;
+export default VoiceMessageItemBody;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/**
+ * @deprecated  This component is deprecated and will be removed in the next major version.
+ * Use TextFragment instead.
+ */
+import './index.scss';
+import type { UserMessage } from '@sendbird/chat/message';
+import { StringObj } from '../../utils';
+interface WordProps {
+    word: string;
+    message: UserMessage;
+    isByMe?: boolean;
+    mentionTemplate?: string;
+    renderString?: (stringObj: StringObj) => JSX.Element;
+}
+export default function Word(props: WordProps): JSX.Element;
+export {};

package/types/utils/cloneMessage.d.ts

@@ -0,0 +1,2 @@
+import { SendableMessageType } from '.';
+export declare const cloneMessage: (msg: SendableMessageType) => SendableMessageType;