@sendbird/uikit-react 3.7.0 → 3.8.0

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

@@ -0,0 +1,17 @@
+import React, { FocusEvent, MouseEvent, ReactNode } from 'react';
+import './index.scss';
+export interface IconButtonProps {
+    className?: string | Array<string>;
+    children: ReactNode;
+    disabled?: boolean;
+    width?: string;
+    height?: string;
+    type?: 'button' | 'submit' | 'reset';
+    style?: {
+        [key: string]: string;
+    };
+    onBlur?: (e: FocusEvent<HTMLButtonElement>) => void;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

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

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import './index.scss';
+import { MultipleFilesMessage } from '@sendbird/chat/message';
+interface ImageGridProps {
+    children: ReactElement[];
+    className?: string;
+    message: MultipleFilesMessage;
+    isReactionEnabled?: boolean;
+}
+export default function ImageGrid({ children, className, message, isReactionEnabled, }: ImageGridProps): ReactElement;
+export {};

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

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+import './index.scss';
+export declare function getBorderRadiusForImageRenderer(circle?: boolean, borderRadius?: string | number): string;
+export declare function getBorderRadiusForMultipleImageRenderer(borderRadius: string | number, index: number, totalCount: number): string;
+export interface ImageRendererProps {
+    className?: string | Array<string>;
+    url: string;
+    alt?: string;
+    width?: string | number;
+    maxSideLength?: string;
+    height?: string | number;
+    circle?: boolean;
+    fixedSize?: boolean;
+    placeHolder?: ((props: {
+        style: {
+            [key: string]: string | number;
+        };
+    }) => ReactElement) | ReactElement;
+    defaultComponent?: (() => ReactElement) | ReactElement;
+    borderRadius?: string | number;
+    onLoad?: () => void;
+    onError?: () => void;
+    shadeOnHover?: boolean;
+    isUploaded?: boolean;
+}
+declare const ImageRenderer: ({ className, url, alt, width, maxSideLength, height, circle, fixedSize, placeHolder, defaultComponent, borderRadius, onLoad, onError, shadeOnHover, isUploaded, }: ImageRendererProps) => ReactElement;
+export default ImageRenderer;

package/types/ui/ImageRenderer/useDynamicSideLength.d.ts

@@ -0,0 +1,8 @@
+interface DynamicSideLengthProps {
+    width: string | number;
+    height: string | number;
+    maxSideLength: string | null;
+    defaultMinLength: string;
+}
+export declare function useDynamicSideLength({ width, height, maxSideLength, defaultMinLength, }: DynamicSideLengthProps): string[];
+export {};

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

@@ -0,0 +1 @@
+export declare function getDynamicMinLengthInPx(sideLength: string | number, maxSideLength: string | null, defaultMinLength: string): string;

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

@@ -0,0 +1,15 @@
+import React, { ReactElement, ReactNode } from 'react';
+import './index.scss';
+export interface InputLabelProps {
+    children: ReactNode;
+}
+export declare const InputLabel: ({ children }: InputLabelProps) => ReactElement;
+export interface InputProps {
+    name: string;
+    required?: boolean;
+    disabled?: boolean;
+    value?: string;
+    placeHolder?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import './index.scss';
+import { Typography, Colors } from './types';
+import { ObjectValues } from '../../utils/typeHelpers/objectValues';
+type LabelProps = {
+    className?: string | string[];
+    type?: ObjectValues<typeof Typography>;
+    color?: ObjectValues<typeof Colors>;
+    children?: React.ReactNode;
+};
+export default function Label({ className, type, color, children, }: LabelProps): JSX.Element;
+declare const LabelTypography: {
+    readonly H_1: "H_1";
+    readonly H_2: "H_2";
+    readonly SUBTITLE_1: "SUBTITLE_1";
+    readonly SUBTITLE_2: "SUBTITLE_2";
+    readonly BODY_1: "BODY_1";
+    readonly BODY_2: "BODY_2";
+    readonly BUTTON_1: "BUTTON_1";
+    readonly BUTTON_2: "BUTTON_2";
+    readonly CAPTION_1: "CAPTION_1";
+    readonly CAPTION_2: "CAPTION_2";
+    readonly CAPTION_3: "CAPTION_3";
+};
+declare const LabelColors: {
+    readonly ONBACKGROUND_1: "ONBACKGROUND_1";
+    readonly ONBACKGROUND_2: "ONBACKGROUND_2";
+    readonly ONBACKGROUND_3: "ONBACKGROUND_3";
+    readonly ONBACKGROUND_4: "ONBACKGROUND_4";
+    readonly ONCONTENT_1: "ONCONTENT_1";
+    readonly ONCONTENT_2: "ONCONTENT_2";
+    readonly PRIMARY: "PRIMARY";
+    readonly ERROR: "ERROR";
+    readonly SECONDARY_3: "SECONDARY_3";
+};
+declare const LabelStringSet: import("./stringSet").StringSet;
+export { LabelTypography, LabelColors, LabelStringSet };

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

@@ -0,0 +1,2 @@
+import { CoreMessageType } from '../../utils';
+export declare function getModalDeleteMessageTitle(stringSet: Record<string, string>, message: CoreMessageType): string;

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

@@ -0,0 +1,189 @@
+/**
+ * NOTE:
+ * Do not forget to update the string set table on Docs
+ * When you update this string set
+ */
+export type StringSet = Record<keyof typeof stringSet['en'], string>;
+declare const stringSet: {
+    en: {
+        MESSAGE_STATUS__YESTERDAY: string;
+        CHANNEL__MESSAGE_LIST__NOTIFICATION__NEW_MESSAGE: string;
+        /** @deprecated Please use `DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE` instead * */
+        CHANNEL__MESSAGE_LIST__NOTIFICATION__ON: string;
+        CHANNEL_PREVIEW_MOBILE_LEAVE: string;
+        CHANNEL_SETTING__HEADER__TITLE: string;
+        CHANNEL_SETTING__PROFILE__EDIT: string;
+        CHANNEL_SETTING__MEMBERS__TITLE: string;
+        CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS: string;
+        CHANNEL_SETTING__MEMBERS__INVITE_MEMBER: string;
+        CHANNEL_SETTING__MEMBERS__YOU: string;
+        CHANNEL_SETTING__MEMBERS__SELECT_TITLE: string;
+        CHANNEL_SETTING__MEMBERS__OPERATOR: string;
+        CHANNEL_SETTING__LEAVE_CHANNEL__TITLE: string;
+        CHANNEL_SETTING__OPERATORS__TITLE: string;
+        CHANNEL_SETTING__OPERATORS__TITLE_ALL: string;
+        CHANNEL_SETTING__OPERATORS__TITLE_ADD: string;
+        CHANNEL_SETTING__OPERATORS__ADD_BUTTON: string;
+        CHANNEL_SETTING__MUTED_MEMBERS__TITLE: string;
+        CHANNEL_SETTING__MUTED_MEMBERS__TITLE_ALL: string;
+        CHANNEL_SETTING__NO_UNMUTED: string;
+        CHANNEL_SETTING__BANNED_MEMBERS__TITLE: string;
+        CHANNEL_SETTING__FREEZE_CHANNEL: string;
+        CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR: string;
+        CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR: string;
+        CHANNEL_SETTING__MODERATION__MUTE: string;
+        CHANNEL_SETTING__MODERATION__UNMUTE: string;
+        CHANNEL_SETTING__MODERATION__BAN: string;
+        CHANNEL_SETTING__MODERATION__UNBAN: string;
+        CHANNEL_SETTING__MODERATION__EMPTY_BAN: string;
+        CHANNEL_SETTING__MODERATION__ALL_BAN: string;
+        OPEN_CHANNEL_CONVERSATION__TITLE_PARTICIPANTS: string;
+        OPEN_CHANNEL_CONVERSATION__SELECT_PARTICIPANTS: string;
+        OPEN_CHANNEL_LIST__TITLE: string;
+        CREATE_OPEN_CHANNEL_LIST__TITLE: string;
+        CREATE_OPEN_CHANNEL_LIST__SUBTITLE__IMG_SECTION: string;
+        CREATE_OPEN_CHANNEL_LIST__SUBTITLE__IMG_UPLOAD: string;
+        CREATE_OPEN_CHANNEL_LIST__SUBTITLE__TEXT_SECTION: string;
+        CREATE_OPEN_CHANNEL_LIST__SUBTITLE__TEXT_PLACE_HOLDER: string;
+        CREATE_OPEN_CHANNEL_LIST__SUBMIT: string;
+        OPEN_CHANNEL_SETTINGS__OPERATOR_TITLE: string;
+        OPEN_CHANNEL_SETTINGS__OPERATOR_URL: string;
+        OPEN_CHANNEL_SETTINGS__PARTICIPANTS_ACCORDION_TITLE: string;
+        OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_PANEL: string;
+        OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_TITLE: string;
+        OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_CONTEXT: string;
+        OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_SUBMIT: string;
+        OPEN_CHANNEL_SETTINGS__OPERATORS_TITLE: string;
+        OPEN_CHANNEL_SETTINGS__OPERATORS__TITLE_ADD: string;
+        OPEN_CHANNEL_SETTINGS__OPERATORS__TITLE_ALL: string;
+        OPEN_CHANNEL_SETTINGS__MUTED_MEMBERS__TITLE: string;
+        OPEN_CHANNEL_SETTINGS__MUTED_MEMBERS__TITLE_ALL: string;
+        OPEN_CHANNEL_SETTINGS__MUTED_MEMBERS__NO_ONE: string;
+        OPEN_CHANNEL_SETTINGS__BANNED_MEMBERS__TITLE: string;
+        OPEN_CHANNEL_SETTINGS__BANNED_MEMBERS__TITLE_ALL: string;
+        OPEN_CHANNEL_SETTINGS__BANNED_MEMBERS__NO_ONE: string;
+        OPEN_CHANNEL_SETTINGS__MEMBERS__YOU: string;
+        OPEN_CHANNEL_SETTINGS__MEMBERS__OPERATOR: string;
+        OPEN_CHANNEL_SETTINGS__PARTICIPANTS_TITLE: string;
+        OPEN_CHANNEL_SETTINGS__EMPTY_LIST: string;
+        OPEN_CHANNEL_SETTINGS__SEE_ALL: string;
+        OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE: string;
+        OPEN_CHANNEL_SETTINGS__NO_TITLE: string;
+        OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR: string;
+        OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR: string;
+        OPEN_CHANNEL_SETTING__MODERATION__MUTE: string;
+        OPEN_CHANNEL_SETTING__MODERATION__UNMUTE: string;
+        OPEN_CHANNEL_SETTING__MODERATION__BAN: string;
+        OPEN_CHANNEL_SETTING__MODERATION__UNBAN: string;
+        TRYING_TO_CONNECT: string;
+        TYPING_INDICATOR__IS_TYPING: string;
+        TYPING_INDICATOR__AND: string;
+        TYPING_INDICATOR__ARE_TYPING: string;
+        TYPING_INDICATOR__MULTIPLE_TYPING: string;
+        CHANNEL_FROZEN: string;
+        PLACE_HOLDER__NO_CHANNEL: string;
+        PLACE_HOLDER__WRONG: string;
+        PLACE_HOLDER__RETRY_TO_CONNECT: string;
+        PLACE_HOLDER__NO_MESSAGES: string;
+        TOOLTIP__AND_YOU: string;
+        TOOLTIP__YOU: string;
+        TOOLTIP__UNKNOWN_USER: string;
+        UNKNOWN__UNKNOWN_MESSAGE_TYPE: string;
+        UNKNOWN__CANNOT_READ_MESSAGE: string;
+        MESSAGE_EDITED: string;
+        MODAL__DELETE_MESSAGE__TITLE: string;
+        MODAL__CHANNEL_INFORMATION__TITLE: string;
+        MODAL__CHANNEL_INFORMATION__CHANNEL_IMAGE: string;
+        MODAL__CHANNEL_INFORMATION__UPLOAD: string;
+        MODAL__CHANNEL_INFORMATION__CHANNEL_NAME: string;
+        MODAL__CHANNEL_INFORMATION__INPUT__PLACE_HOLDER: string;
+        MODAL__INVITE_MEMBER__TITLE: string;
+        MODAL__INVITE_MEMBER__SELECTED: string;
+        MODAL__CHOOSE_CHANNEL_TYPE__TITLE: string;
+        MODAL__CHOOSE_CHANNEL_TYPE__GROUP: string;
+        MODAL__CHOOSE_CHANNEL_TYPE__SUPER_GROUP: string;
+        MODAL__CHOOSE_CHANNEL_TYPE__BROADCAST: string;
+        MODAL__CREATE_CHANNEL__TITLE: string;
+        MODAL__CREATE_CHANNEL__GROUP: string;
+        MODAL__CREATE_CHANNEL__SUPER: string;
+        MODAL__CREATE_CHANNEL__BROADCAST: string;
+        MODAL__CREATE_CHANNEL__SELECTED: string;
+        MODAL__LEAVE_CHANNEL__TITLE: string;
+        MODAL__LEAVE_CHANNEL__FOOTER: string;
+        MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED: string;
+        MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN: string;
+        USER_PROFILE__MESSAGE: string;
+        USER_PROFILE__USER_ID: string;
+        EDIT_PROFILE__TITLE: string;
+        EDIT_PROFILE__IMAGE_LABEL: string;
+        EDIT_PROFILE__IMAGE_UPLOAD: string;
+        EDIT_PROFILE__NICKNAME_LABEL: string;
+        EDIT_PROFILE__NICKNAME_PLACEHOLDER: string;
+        EDIT_PROFILE__USERID_LABEL: string;
+        EDIT_PROFILE__THEME_LABEL: string;
+        MESSAGE_INPUT__PLACE_HOLDER: string;
+        MESSAGE_INPUT__PLACE_HOLDER__DISABLED: string;
+        MESSAGE_INPUT__PLACE_HOLDER__MUTED: string;
+        MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT: string;
+        MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER: string;
+        BUTTON__CANCEL: string;
+        BUTTON__DELETE: string;
+        BUTTON__SAVE: string;
+        BUTTON__CREATE: string;
+        BUTTON__INVITE: string;
+        BUTTON__OK: string;
+        BADGE__OVER: string;
+        NO_TITLE: string;
+        NO_NAME: string;
+        NO_MEMBERS: string;
+        MESSAGE_MENU__COPY: string;
+        MESSAGE_MENU__REPLY: string;
+        MESSAGE_MENU__THREAD: string;
+        MESSAGE_MENU__OPEN_IN_CHANNEL: string;
+        MESSAGE_MENU__EDIT: string;
+        MESSAGE_MENU__RESEND: string;
+        MESSAGE_MENU__DELETE: string;
+        MESSAGE_MENU__SAVE: string;
+        CONTEXT_MENU_DROPDOWN__COPY: string;
+        CONTEXT_MENU_DROPDOWN__EDIT: string;
+        CONTEXT_MENU_DROPDOWN__RESEND: string;
+        CONTEXT_MENU_DROPDOWN__DELETE: string;
+        CONTEXT_MENU_DROPDOWN__SAVE: string;
+        SEARCH: string;
+        SEARCH_IN_CHANNEL: string;
+        SEARCH_IN: string;
+        SEARCHING: string;
+        NO_SEARCHED_MESSAGE: string;
+        QUOTE_MESSAGE_INPUT__REPLY_TO: string;
+        QUOTE_MESSAGE_INPUT__FILE_TYPE_IMAGE: string;
+        QUOTE_MESSAGE_INPUT__FILE_TYPE_GIF: string;
+        QUOTE_MESSAGE_INPUT__FILE_TYPE__VIDEO: string;
+        QUOTED_MESSAGE__REPLIED_TO: string;
+        QUOTED_MESSAGE__CURRENT_USER: string;
+        QUOTED_MESSAGE__UNAVAILABLE: string;
+        THREAD__HEADER_TITLE: string;
+        CHANNEL__THREAD_REPLY: string;
+        CHANNEL__THREAD_REPLIES: string;
+        CHANNEL__THREAD_OVER_MAX: string;
+        THREAD__THREAD_REPLY: string;
+        THREAD__THREAD_REPLIES: string;
+        THREAD__INPUT__REPLY_TO_THREAD: string;
+        THREAD__INPUT__REPLY_IN_THREAD: string;
+        MENTION_NAME__NO_NAME: string;
+        MENTION_COUNT__OVER_LIMIT: string;
+        UI__FILE_VIEWER__UNSUPPORT: string;
+        VOICE_RECORDING_PERMISSION_DENIED: string;
+        VOICE_MESSAGE: string;
+        CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_GIF: string;
+        CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_PHOTO: string;
+        CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_VIDEO: string;
+        CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_AUDIO: string;
+        CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_VOICE_MESSAGE: string;
+        CHANNEL_PREVIEW_LAST_MESSAGE_FILE_TYPE_GENERAL: string;
+        DATE_FORMAT__MESSAGE_LIST__NOTIFICATION__UNREAD_SINCE: string;
+        DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR: string;
+        DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR: string;
+    };
+};
+declare const getStringSet: (lang?: keyof typeof stringSet) => StringSet;
+export default getStringSet;

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

@@ -0,0 +1,24 @@
+export declare const Typography: {
+    readonly H_1: "H_1";
+    readonly H_2: "H_2";
+    readonly SUBTITLE_1: "SUBTITLE_1";
+    readonly SUBTITLE_2: "SUBTITLE_2";
+    readonly BODY_1: "BODY_1";
+    readonly BODY_2: "BODY_2";
+    readonly BUTTON_1: "BUTTON_1";
+    readonly BUTTON_2: "BUTTON_2";
+    readonly CAPTION_1: "CAPTION_1";
+    readonly CAPTION_2: "CAPTION_2";
+    readonly CAPTION_3: "CAPTION_3";
+};
+export declare const Colors: {
+    readonly ONBACKGROUND_1: "ONBACKGROUND_1";
+    readonly ONBACKGROUND_2: "ONBACKGROUND_2";
+    readonly ONBACKGROUND_3: "ONBACKGROUND_3";
+    readonly ONBACKGROUND_4: "ONBACKGROUND_4";
+    readonly ONCONTENT_1: "ONCONTENT_1";
+    readonly ONCONTENT_2: "ONCONTENT_2";
+    readonly PRIMARY: "PRIMARY";
+    readonly ERROR: "ERROR";
+    readonly SECONDARY_3: "SECONDARY_3";
+};

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

@@ -0,0 +1,4 @@
+import { Typography, Colors } from './types';
+import { ObjectValues } from '../../utils/typeHelpers/objectValues';
+export declare function changeTypographyToClassName(type?: ObjectValues<typeof Typography>): "" | "sendbird-label--h-1" | "sendbird-label--h-2" | "sendbird-label--subtitle-1" | "sendbird-label--subtitle-2" | "sendbird-label--body-1" | "sendbird-label--body-2" | "sendbird-label--button-1" | "sendbird-label--button-2" | "sendbird-label--caption-1" | "sendbird-label--caption-2" | "sendbird-label--caption-3";
+export declare function changeColorToClassName(color?: ObjectValues<typeof Colors>): "" | "sendbird-label--color-onbackground-1" | "sendbird-label--color-onbackground-2" | "sendbird-label--color-onbackground-3" | "sendbird-label--color-onbackground-4" | "sendbird-label--color-oncontent-1" | "sendbird-label--color-oncontent-2" | "sendbird-label--color-primary" | "sendbird-label--color-error" | "sendbird-label--color-secondary-3";

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

@@ -0,0 +1,20 @@
+import './index.scss';
+import React, { ReactElement } from 'react';
+import type { User } from '@sendbird/chat';
+interface Props {
+    user: User;
+    theme?: string;
+    onCancel(): void;
+    onSubmit(newFile: File, newNickname: string): void;
+    changeTheme?(theme: string): void;
+    onThemeChange?(theme: string): void;
+}
+export declare function EditUserProfile({ user, theme, onCancel, onSubmit, changeTheme, onThemeChange, }: Props): ReactElement;
+interface ConnectedEditUserProfileProps {
+    user: User;
+    onCancel(): void;
+    onSubmit(newFile: File, newNickname: string): void;
+    onThemeChange?(theme: string): void;
+}
+declare const ConnectedEditUserProfile: (props: ConnectedEditUserProfileProps) => React.ReactElement;
+export default ConnectedEditUserProfile;

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { LabelColors, LabelTypography } from '../Label';
+import './index.scss';
+import { ObjectValues } from '../../utils/typeHelpers/objectValues';
+type LinkLabelProps = {
+    src: string;
+    className?: string | string[];
+    type?: ObjectValues<typeof LabelTypography>;
+    color?: ObjectValues<typeof LabelColors>;
+    children: ReactNode;
+};
+export default function LinkLabel({ className, src, type, color, children }: LinkLabelProps): JSX.Element;
+export declare const LinkLabelTypography: {
+    readonly H_1: "H_1";
+    readonly H_2: "H_2";
+    readonly SUBTITLE_1: "SUBTITLE_1";
+    readonly SUBTITLE_2: "SUBTITLE_2";
+    readonly BODY_1: "BODY_1";
+    readonly BODY_2: "BODY_2";
+    readonly BUTTON_1: "BUTTON_1";
+    readonly BUTTON_2: "BUTTON_2";
+    readonly CAPTION_1: "CAPTION_1";
+    readonly CAPTION_2: "CAPTION_2";
+    readonly CAPTION_3: "CAPTION_3";
+};
+export declare const LinkLabelColors: {
+    readonly ONBACKGROUND_1: "ONBACKGROUND_1";
+    readonly ONBACKGROUND_2: "ONBACKGROUND_2";
+    readonly ONBACKGROUND_3: "ONBACKGROUND_3";
+    readonly ONBACKGROUND_4: "ONBACKGROUND_4";
+    readonly ONCONTENT_1: "ONCONTENT_1";
+    readonly ONCONTENT_2: "ONCONTENT_2";
+    readonly PRIMARY: "PRIMARY";
+    readonly ERROR: "ERROR";
+    readonly SECONDARY_3: "SECONDARY_3";
+};
+export {};

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import './index.scss';
+export interface LoaderProps {
+    className?: string | Array<string>;
+    width?: string | number;
+    height?: string | number;
+    children?: ReactElement;
+}
+export default function Loader({ className, width, height, children, }: LoaderProps): ReactElement;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import './index.scss';
+interface MentionLabelProps {
+    mentionTemplate: string;
+    mentionedUserId: string;
+    mentionedUserNickname: string;
+    isByMe: boolean;
+}
+export default function MentionLabel(props: MentionLabelProps): JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export declare const MENTION_USER_LABEL_CLASSNAME = "sendbird-mention-user-label";

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './index.scss';
+interface MentionUserLabelProps {
+    className?: string;
+    children?: string;
+    isReverse?: boolean;
+    color?: string;
+    userId?: string;
+}
+export default function MentionUserLabel({ className, children, isReverse, color, userId, }: MentionUserLabelProps): JSX.Element;
+export {};

package/types/ui/MentionUserLabel/renderToString.d.ts

@@ -0,0 +1,6 @@
+type renderToStringParams = {
+    userId: string;
+    nickname: string;
+};
+export default function renderToString({ userId, nickname }: renderToStringParams): string;
+export {};

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

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+import './index.scss';
+import { SendableMessageType, CoreMessageType } from '../../utils';
+import { GroupChannel } from '@sendbird/chat/groupChannel';
+import { EmojiContainer } from '@sendbird/chat';
+import { ThreadReplySelectType } from '../../modules/Channel/context/const';
+import { Nullable, ReplyType } from '../../types';
+interface Props {
+    className?: string | Array<string>;
+    userId: string;
+    channel: Nullable<GroupChannel>;
+    message: CoreMessageType;
+    disabled?: boolean;
+    chainTop?: boolean;
+    chainBottom?: boolean;
+    isReactionEnabled?: boolean;
+    disableQuoteMessage?: boolean;
+    replyType?: ReplyType;
+    threadReplySelectType?: ThreadReplySelectType;
+    nicknamesMap?: Map<string, string>;
+    emojiContainer?: EmojiContainer;
+    scrollToMessage?: (createdAt: number, messageId: number) => void;
+    showEdit?: (bool: boolean) => void;
+    showRemove?: (bool: boolean) => void;
+    showFileViewer?: (bool: boolean) => void;
+    resendMessage?: (message: SendableMessageType) => void;
+    deleteMessage?: (message: CoreMessageType) => Promise<CoreMessageType>;
+    toggleReaction?: (message: SendableMessageType, reactionKey: string, isReacted: boolean) => void;
+    setQuoteMessage?: (message: SendableMessageType) => void;
+    onReplyInThread?: (props: {
+        message: SendableMessageType;
+    }) => void;
+    onQuoteMessageClick?: (props: {
+        message: SendableMessageType;
+    }) => void;
+    onMessageHeightChange?: () => void;
+}
+export default function MessageContent({ className, userId, channel, message, disabled, chainTop, chainBottom, isReactionEnabled, disableQuoteMessage, replyType, threadReplySelectType, nicknamesMap, emojiContainer, scrollToMessage, showEdit, showRemove, showFileViewer, resendMessage, deleteMessage, toggleReaction, setQuoteMessage, onReplyInThread, onQuoteMessageClick, onMessageHeightChange, }: Props): ReactElement;
+export {};

package/types/ui/MessageInput/const.d.ts

@@ -0,0 +1,15 @@
+export declare const MessageInputKeys: {
+    Enter: string;
+    ArrowUp: string;
+    ArrowDown: string;
+    Backspace: string;
+};
+export declare const NodeTypes: {
+    ElementNode: number;
+    TextNode: number;
+};
+export declare const NodeNames: {
+    Span: string;
+    Br: string;
+    Div: string;
+};

package/types/ui/MessageInput/hooks/usePaste/consts.d.ts

@@ -0,0 +1,5 @@
+export declare const PASTE_NODE = "sendbird-uikit__paste-node";
+export declare const TEXT_MESSAGE_CLASS = "sendbird-word";
+export declare const MENTION_CLASS = "sendbird-word__mention";
+export declare const MENTION_CLASS_IN_INPUT = "sendbird-mention-user-label";
+export declare const MENTION_CLASS_COMBINED_QUERY: string;

package/types/ui/MessageInput/hooks/usePaste/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DynamicProps } from './types';
+export declare function usePaste({ ref, setIsInput, setHeight, channel, setMentionedUsers, }: DynamicProps): (e: React.ClipboardEvent<HTMLDivElement>) => void;
+export default usePaste;

package/types/ui/MessageInput/hooks/usePaste/insertTemplate.d.ts

@@ -0,0 +1,2 @@
+import { Word } from './types';
+export declare function inserTemplateToDOM(templateList: Word[]): void;

package/types/ui/MessageInput/hooks/usePaste/types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { User } from '@sendbird/chat';
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+import type { OpenChannel } from '@sendbird/chat/openChannel';
+export type Word = {
+    text: string;
+    userId?: string;
+};
+export type DynamicProps = {
+    ref: React.RefObject<HTMLDivElement>;
+    channel: OpenChannel | GroupChannel;
+    setMentionedUsers: React.Dispatch<React.SetStateAction<User[]>>;
+    setIsInput: React.Dispatch<React.SetStateAction<boolean>>;
+    setHeight: () => void;
+};

package/types/ui/MessageInput/hooks/usePaste/utils.d.ts

@@ -0,0 +1,10 @@
+import { GroupChannel } from '@sendbird/chat/groupChannel';
+import { User } from '@sendbird/chat';
+import { Word } from './types';
+export declare function querySelectorIncludingSelf(master: HTMLElement, selector: string): HTMLElement | null;
+export declare function getLeafNodes(master: HTMLElement): ChildNode[];
+export declare function createPasteNode(): HTMLDivElement | null;
+export declare function hasMention(parent: HTMLDivElement): boolean;
+export declare const extractTextFromNodes: (nodes: HTMLSpanElement[]) => string;
+export declare function domToMessageTemplate(nodeArray: ChildNode[]): Word[];
+export declare function getUsersFromWords(templates: Word[], channel: GroupChannel): User[];

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import './index.scss';
+import { GroupChannel } from '@sendbird/chat/groupChannel';
+import { User } from '@sendbird/chat';
+import { OpenChannel } from '@sendbird/chat/openChannel';
+import { UserMessage } from '@sendbird/chat/message';
+type MessageInputProps = {
+    channel: GroupChannel | OpenChannel;
+    message?: UserMessage;
+    value?: null | string;
+    className?: string | string[];
+    messageFieldId?: string;
+    isEdit?: boolean;
+    isMentionEnabled?: boolean;
+    isVoiceMessageEnabled?: boolean;
+    isSelectingMultipleFilesEnabled?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    maxLength?: number;
+    onFileUpload?: (file: File[]) => void;
+    onSendMessage?: (params: {
+        message: string;
+        mentionTemplate: string;
+    }) => void;
+    onUpdateMessage?: (params: {
+        messageId: number;
+        message: string;
+        mentionTemplate: string;
+    }) => void;
+    onCancelEdit?: () => void;
+    onStartTyping?: () => void;
+    channelUrl?: string;
+    mentionSelectedUser?: null | User;
+    onUserMentioned?: (user: User) => void;
+    onMentionStringChange?: (mentionString: string) => void;
+    onMentionedUserIdsUpdated?: (mentionedUserIds: string[]) => void;
+    onVoiceMessageIconClick?: () => void;
+    onKeyUp?: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
+    renderVoiceMessageIcon?: () => React.ReactNode;
+    renderFileUploadIcon?: () => React.ReactNode;
+    renderSendMessageIcon?: () => React.ReactNode;
+    setMentionedUsers?: React.Dispatch<React.SetStateAction<User[]>>;
+    acceptableMimeTypes?: string[];
+};
+declare const MessageInput: React.ForwardRefExoticComponent<MessageInputProps & React.RefAttributes<HTMLInputElement>>;
+export default MessageInput;

package/types/ui/MessageInput/messageInputUtils.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Write new utils here
+ * Migrate old utils as needed, and delete utils.js
+ */
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+import type { OpenChannel } from '@sendbird/chat/openChannel';
+import type { SendBirdStateConfig } from '../../lib/types';
+/**
+ * FIXME: Simplify this in UIKit@v4
+ * If customer is using MessageInput inside our modules(ie: Channel, Thread, etc),
+ * we should use the config from the module.
+ * If customer is using MessageInput outside our modules(ie: custom UI),
+ * we expect Channel to be undefined and customer gets control to show/hide file-upload.
+ * @param {*} channel GroupChannel | OpenChannel
+ * @param {*} config SendBirdStateConfig
+ * @returns boolean
+ */
+export declare const checkIfFileUploadEnabled: ({ channel, config }: {
+    channel?: GroupChannel | OpenChannel;
+    config?: SendBirdStateConfig;
+}) => boolean;

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

@@ -0,0 +1,9 @@
+import { BaseChannel } from '@sendbird/chat';
+export declare const sanitizeString: (str?: string) => string;
+/**
+ * NodeList cannot be used with Array methods
+ * @param {NodeListOf<ChildNode>} childNodes
+ * @returns Array of child nodes
+ */
+export declare const nodeListToArray: (childNodes?: Node['childNodes'] | null) => ChildNode[];
+export declare function isChannelTypeSupportsMultipleFilesMessage(channel: BaseChannel): boolean;