@sendbird/uikit-react 3.7.0 → 3.8.0

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

@@ -0,0 +1,6 @@
+export declare const SUPPORTING_TYPES: {
+    IMAGE: string;
+    VIDEO: string;
+    UNSUPPORTED: string;
+};
+export declare const getSupportingFileType: (type: string) => string;

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

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { UserMessage } from '@sendbird/chat/message';
+import './index.scss';
+interface OpenChannelUserMessageProps {
+    className?: string | Array<string>;
+    message: UserMessage;
+    isOperator?: boolean;
+    isEphemeral?: boolean;
+    userId: string;
+    disabled?: boolean;
+    showEdit(bool: boolean): void;
+    showRemove(bool: boolean): void;
+    resendMessage(message: UserMessage): void;
+    chainTop?: boolean;
+    chainBottom?: boolean;
+}
+export default function OpenchannelUserMessage({ className, message, isOperator, isEphemeral, userId, resendMessage, disabled, showEdit, showRemove, chainTop, }: OpenChannelUserMessageProps): ReactElement;
+export {};

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

@@ -0,0 +1,5 @@
+export declare const copyToClipboard: (text: string) => boolean;
+declare const _default: {
+    copyToClipboard: (text: string) => boolean;
+};
+export default _default;

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

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import './index.scss';
+export declare const PlaceHolderTypes: {
+    readonly LOADING: "LOADING";
+    readonly NO_CHANNELS: "NO_CHANNELS";
+    readonly NO_MESSAGES: "NO_MESSAGES";
+    readonly WRONG: "WRONG";
+    readonly SEARCH_IN: "SEARCH_IN";
+    readonly SEARCHING: "SEARCHING";
+    readonly NO_RESULTS: "NO_RESULTS";
+};
+export interface PlaceHolderProps {
+    className?: string | Array<string>;
+    type: keyof typeof PlaceHolderTypes;
+    iconSize?: string | number;
+    searchInString?: string;
+    retryToConnect?: () => void;
+}
+export default function PlaceHolder({ className, type, iconSize, searchInString, retryToConnect, }: PlaceHolderProps): ReactElement;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LabelTypography, LabelColors } from '../Label';
+import { ObjectValues } from '../../utils/typeHelpers/objectValues';
+export interface PlaybackTimeProps {
+    className?: string;
+    time: number;
+    labelType?: ObjectValues<typeof LabelTypography>;
+    labelColor?: ObjectValues<typeof LabelColors>;
+}
+export declare const PlaybackTime: ({ className, time, labelType, labelColor, }: PlaybackTimeProps) => React.ReactElement;
+export default PlaybackTime;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.scss';
+export declare const ProgressBarColorTypes: {
+    readonly PRIMARY: "progress-bar-color--primary";
+    readonly GRAY: "progress-bar-color--gray";
+};
+export type ProgressBarColorTypes = typeof ProgressBarColorTypes[keyof typeof ProgressBarColorTypes];
+export interface ProgressBarProps {
+    className?: string;
+    disabled?: boolean;
+    maxSize: number;
+    currentSize: number;
+    colorType?: ProgressBarColorTypes;
+}
+export declare const ProgressBar: ({ className, disabled, maxSize, currentSize, colorType, }: ProgressBarProps) => React.ReactElement;
+export default ProgressBar;

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

@@ -0,0 +1,13 @@
+import './index.scss';
+import { ReactElement } from 'react';
+import { SendableMessageType } from '../../utils';
+interface Props {
+    className?: string | Array<string>;
+    message?: SendableMessageType;
+    userId?: string;
+    isByMe?: boolean;
+    isUnavailable?: boolean;
+    onClick?: () => void;
+}
+export default function QuoteMessage({ message, userId, isByMe, className, isUnavailable, onClick, }: Props): ReactElement;
+export {};

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

@@ -0,0 +1,7 @@
+import { CoreMessageType } from '../../utils';
+import { Thumbnail } from '@sendbird/chat/lib/__definition';
+export declare function getMessageFirstFileType(message: CoreMessageType): string;
+export declare function getMessageFirstFileName(message: CoreMessageType): string;
+export declare function getMessageFirstFileUrl(message: CoreMessageType): string;
+export declare function getMessageFirstFileThumbnails(message: CoreMessageType): Thumbnail[];
+export declare function getMessageFirstFileThumbnailUrl(message: CoreMessageType): string;

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

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import type { FileMessage } from '@sendbird/chat/message';
+import { MultipleFilesMessage } from '@sendbird/chat/message';
+interface Props {
+    message: FileMessage | MultipleFilesMessage;
+}
+export default function QuoteMessageThumbnail({ message }: Props): ReactElement;
+export {};

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

@@ -0,0 +1,10 @@
+import './index.scss';
+import { ReactElement } from 'react';
+import { SendableMessageType } from '../../utils';
+interface Props {
+    className?: string | Array<string>;
+    replyingMessage: SendableMessageType;
+    onClose?: (message: SendableMessageType) => void;
+}
+export default function QuoteMessageInput({ className, replyingMessage, onClose, }: Props): ReactElement;
+export {};

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/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 {};