@liveblocks/react-ui 3.15.0-thread1 → 3.15.0

package/dist/index.d.cts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ComponentType, ComponentPropsWithoutRef, ElementType, ReactNode, ComponentProps, FormEvent, RefAttributes, MouseEvent, PropsWithChildren } from 'react';
-import { CommentAttachment, AiReasoningPart, AiRetrievalPart, Relax, WithNavigation, AiAssistantMessage, CopilotId, AiKnowledgeSource, AiOpaqueToolDefinition, AiToolTypePack, JsonObject, AiToolExecuteCallback, NoInfr, CommentBody, MentionData, BaseMetadata, DTM, DCM, Patchable, CommentData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD, ThreadData } from '@liveblocks/core';
+import { CommentAttachment, AiReasoningPart, AiRetrievalPart, Relax, WithNavigation, AiAssistantMessage, CopilotId, AiKnowledgeSource, AiOpaqueToolDefinition, AiToolTypePack, JsonObject, AiToolExecuteCallback, NoInfr, CommentBody, MentionData, BaseMetadata, DTM, DCM, Patchable, CommentData, ThreadData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD } from '@liveblocks/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Popover } from 'radix-ui';
 
 interface GlobalComponents {
     Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
@@ -809,6 +810,30 @@ declare const AiTool: react.ForwardRefExoticComponent<Omit<AiToolProps, "ref"> &
     Confirmation: typeof AiToolConfirmation;
 };
 
+interface AvatarStackProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Optional additional user IDs to include in the stack.
+     */
+    userIds?: string[];
+    /**
+     * The maximum number of visible avatars.
+     * Defaults to 3, set to `undefined` to show all avatars.
+     */
+    max?: number;
+    /**
+     * The size of the avatars.
+     */
+    size?: string | number;
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides>;
+}
+/**
+ * Displays a stack of avatars for the users currently present in the room.
+ */
+declare const AvatarStack: react.ForwardRefExoticComponent<AvatarStackProps & react.RefAttributes<HTMLDivElement>>;
+
 interface ComposerEditorMentionProps {
     /**
      * Whether the mention is selected.
@@ -1166,11 +1191,11 @@ interface CommentDropdownItemProps extends Omit<ComponentPropsWithoutRef<"div">,
  *   ))}
  * </>
  */
-declare const Comment: react.ForwardRefExoticComponent<CommentProps<BaseMetadata> & react.RefAttributes<HTMLDivElement>> & {
+declare const Comment: (<CM extends BaseMetadata = BaseMetadata>(props: CommentProps<CM> & RefAttributes<HTMLDivElement>) => JSX.Element) & {
     /**
      * Displays a dropdown item in the comment's dropdown.
      */
-    DropdownItem: react.ForwardRefExoticComponent<CommentDropdownItemProps & react.RefAttributes<HTMLDivElement>>;
+    DropdownItem: react.ForwardRefExoticComponent<CommentDropdownItemProps & RefAttributes<HTMLDivElement>>;
     /**
      * Displays a comment's avatar.
      */
@@ -1185,6 +1210,209 @@ declare const Comment: react.ForwardRefExoticComponent<CommentProps<BaseMetadata
     Date: typeof CommentDate;
 };
 
+interface CommentPinProps extends ComponentPropsWithoutRef<"button"> {
+    /**
+     * The corner that points to the comment position.
+     * Defaults to the bottom left corner.
+     */
+    corner?: "top-left" | "top-right" | "bottom-right" | "bottom-left";
+    /**
+     * The user ID to optionally display an avatar for.
+     */
+    userId?: string;
+    /**
+     * The size of the pin.
+     */
+    size?: string | number;
+}
+/**
+ * Displays a comment pin that can be used as a trigger
+ * for `FloatingComposer` and `FloatingThread`.
+ */
+declare const CommentPin: react.ForwardRefExoticComponent<CommentPinProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CursorProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * A floating label to display next to the cursor.
+     */
+    label?: ReactNode;
+    /**
+     * The color of the cursor.
+     */
+    color?: string;
+}
+/**
+ * Displays a multiplayer cursor.
+ */
+declare const Cursor: react.ForwardRefExoticComponent<CursorProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The key used to store the cursors in users' Presence.
+     * This can be used to have multiple `Cursors` in a single room.
+     */
+    presenceKey?: string;
+}
+/**
+ * Displays multiplayer cursors.
+ */
+declare const Cursors: react.ForwardRefExoticComponent<CursorsProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FloatingComposerProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends Omit<ComposerProps<TM, CM>, "collapsed" | "onCollapsedChange" | "defaultCollapsed">, Relax<Pick<Popover.PopoverProps, "defaultOpen" | "open" | "onOpenChange"> & Pick<Popover.PopoverContentProps, "side" | "sideOffset" | "align" | "alignOffset">> {
+    /**
+     * The element which opens the floating composer.
+     */
+    children: ReactNode;
+}
+/**
+ * Displays a floating composer attached to a trigger element.
+ */
+declare const FloatingComposer: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>) => JSX.Element;
+
+interface ThreadComponents<_TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> {
+    /**
+     * The component used to display comments.
+     */
+    Comment: ComponentType<CommentProps<CM>>;
+}
+interface ThreadProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The thread to display.
+     */
+    thread: ThreadData<TM, CM>;
+    /**
+     * How to show or hide the composer to reply to the thread.
+     */
+    showComposer?: boolean | "collapsed";
+    /**
+     * Whether to show the action to resolve the thread.
+     */
+    showResolveAction?: boolean;
+    /**
+     * How to show or hide the actions.
+     */
+    showActions?: CommentProps["showActions"];
+    /**
+     * Whether to show reactions.
+     */
+    showReactions?: CommentProps["showReactions"];
+    /**
+     * Whether to show the composer's formatting controls.
+     */
+    showComposerFormattingControls?: ComposerProps["showFormattingControls"];
+    /**
+     * Add (or change) items to display in a comment's dropdown.
+     */
+    commentDropdownItems?: ReactNode | ((props: PropsWithChildren<{
+        comment: CommentData<CM>;
+    }>) => ReactNode);
+    /**
+     * The maximum number of comments to show.
+     *
+     * The first and last comments are always shown and by default if some comments
+     * are hidden, only the first comment will be shown before the "show more" button
+     * and after it will be shown all the newest comments to fit the limit set.
+     *
+     * It's possible to customize this by setting `maxVisibleComments` to an object:
+     *
+     * @example
+     * // Only show the last comment, and all the older ones to fit the limit.
+     * <Thread maxVisibleComments={{ max: 5, show: "oldest" }} />
+     *
+     * @example
+     * // Show as many old comments as new ones to fit the limit.
+     * <Thread maxVisibleComments={{ max: 5, show: "both" }} />
+     */
+    maxVisibleComments?: number | {
+        max: number;
+        show: "oldest" | "both" | "newest";
+    };
+    /**
+     * Whether to blur the composer editor when the composer is submitted.
+     */
+    blurComposerOnSubmit?: ComposerProps["blurOnSubmit"];
+    /**
+     * Whether to indent the comments' content.
+     */
+    indentCommentContent?: CommentProps["indentContent"];
+    /**
+     * Whether to show deleted comments.
+     */
+    showDeletedComments?: CommentProps["showDeleted"];
+    /**
+     * Whether to show attachments.
+     */
+    showAttachments?: boolean;
+    /**
+     * The event handler called when changing the resolved status.
+     */
+    onResolvedChange?: (resolved: boolean) => void;
+    /**
+     * The event handler called when a comment is edited.
+     */
+    onCommentEdit?: CommentProps["onCommentEdit"];
+    /**
+     * The event handler called when a comment is deleted.
+     */
+    onCommentDelete?: CommentProps["onCommentDelete"];
+    /**
+     * The event handler called when the thread is deleted.
+     * A thread is deleted when all its comments are deleted.
+     */
+    onThreadDelete?: (thread: ThreadData<TM, CM>) => void;
+    /**
+     * The event handler called when clicking on a comment's author.
+     */
+    onAuthorClick?: CommentProps["onAuthorClick"];
+    /**
+     * The event handler called when clicking on a mention.
+     */
+    onMentionClick?: CommentProps["onMentionClick"];
+    /**
+     * The event handler called when clicking on a comment's attachment.
+     */
+    onAttachmentClick?: CommentProps["onAttachmentClick"];
+    /**
+     * The event handler called when the composer is submitted.
+     */
+    onComposerSubmit?: ComposerProps["onComposerSubmit"];
+    /**
+     * Whether to focus the composer on mount.
+     */
+    autoFocus?: ComposerProps["autoFocus"];
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<GlobalComponents & ThreadComponents<TM, CM>>;
+}
+/**
+ * Displays a thread of comments, with a composer to reply
+ * to it.
+ *
+ * @example
+ * <>
+ *   {threads.map((thread) => (
+ *     <Thread key={thread.id} thread={thread} />
+ *   ))}
+ * </>
+ */
+declare const Thread: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>) => JSX.Element;
+
+interface FloatingThreadProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends ThreadProps<TM, CM>, Relax<Pick<Popover.PopoverProps, "defaultOpen" | "open" | "onOpenChange"> & Pick<Popover.PopoverContentProps, "side" | "sideOffset" | "align" | "alignOffset">> {
+    /**
+     * The element which opens the floating thread.
+     */
+    children: ReactNode;
+}
+/**
+ * Displays a floating thread attached to a trigger element.
+ */
+declare const FloatingThread: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>) => JSX.Element;
+
 interface HistoryVersionSummaryProps extends ComponentPropsWithoutRef<"button"> {
     version: HistoryVersion;
     selected?: boolean;
@@ -1380,139 +1608,6 @@ interface InboxNotificationListProps extends ComponentPropsWithoutRef<"ol"> {
  */
 declare const InboxNotificationList: react.ForwardRefExoticComponent<InboxNotificationListProps & react.RefAttributes<HTMLOListElement>>;
 
-interface ThreadComponents<_TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> {
-    /**
-     * The component used to display comments.
-     */
-    Comment: ComponentType<CommentProps<CM>>;
-}
-interface ThreadProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends ComponentPropsWithoutRef<"div"> {
-    /**
-     * The thread to display.
-     */
-    thread: ThreadData<TM, CM>;
-    /**
-     * How to show or hide the composer to reply to the thread.
-     */
-    showComposer?: boolean | "collapsed";
-    /**
-     * Whether to show the action to resolve the thread.
-     */
-    showResolveAction?: boolean;
-    /**
-     * How to show or hide the actions.
-     */
-    showActions?: CommentProps["showActions"];
-    /**
-     * Whether to show reactions.
-     */
-    showReactions?: CommentProps["showReactions"];
-    /**
-     * Whether to show the composer's formatting controls.
-     */
-    showComposerFormattingControls?: ComposerProps["showFormattingControls"];
-    /**
-     * Add (or change) items to display in a comment's dropdown.
-     */
-    commentDropdownItems?: ReactNode | ((props: PropsWithChildren<{
-        comment: CommentData<CM>;
-    }>) => ReactNode);
-    /**
-     * The maximum number of comments to show.
-     *
-     * The first and last comments are always shown and by default if some comments
-     * are hidden, only the first comment will be shown before the "show more" button
-     * and after it will be shown all the newest comments to fit the limit set.
-     *
-     * It's possible to customize this by setting `maxVisibleComments` to an object:
-     *
-     * @example
-     * // Only show the last comment, and all the older ones to fit the limit.
-     * <Thread maxVisibleComments={{ max: 5, show: "oldest" }} />
-     *
-     * @example
-     * // Show as many old comments as new ones to fit the limit.
-     * <Thread maxVisibleComments={{ max: 5, show: "both" }} />
-     */
-    maxVisibleComments?: number | {
-        max: number;
-        show: "oldest" | "both" | "newest";
-    };
-    /**
-     * Whether to blur the composer editor when the composer is submitted.
-     */
-    blurComposerOnSubmit?: ComposerProps["blurOnSubmit"];
-    /**
-     * Whether to indent the comments' content.
-     */
-    indentCommentContent?: CommentProps["indentContent"];
-    /**
-     * Additional content to display below the thread's comments.
-     */
-    additionalContent?: ReactNode;
-    /**
-     * Whether to show deleted comments.
-     */
-    showDeletedComments?: CommentProps["showDeleted"];
-    /**
-     * Whether to show attachments.
-     */
-    showAttachments?: boolean;
-    /**
-     * The event handler called when changing the resolved status.
-     */
-    onResolvedChange?: (resolved: boolean) => void;
-    /**
-     * The event handler called when a comment is edited.
-     */
-    onCommentEdit?: CommentProps["onCommentEdit"];
-    /**
-     * The event handler called when a comment is deleted.
-     */
-    onCommentDelete?: CommentProps["onCommentDelete"];
-    /**
-     * The event handler called when the thread is deleted.
-     * A thread is deleted when all its comments are deleted.
-     */
-    onThreadDelete?: (thread: ThreadData<TM, CM>) => void;
-    /**
-     * The event handler called when clicking on a comment's author.
-     */
-    onAuthorClick?: CommentProps["onAuthorClick"];
-    /**
-     * The event handler called when clicking on a mention.
-     */
-    onMentionClick?: CommentProps["onMentionClick"];
-    /**
-     * The event handler called when clicking on a comment's attachment.
-     */
-    onAttachmentClick?: CommentProps["onAttachmentClick"];
-    /**
-     * The event handler called when the composer is submitted.
-     */
-    onComposerSubmit?: ComposerProps["onComposerSubmit"];
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
-    /**
-     * Override the component's components.
-     */
-    components?: Partial<GlobalComponents & ThreadComponents>;
-}
-/**
- * Displays a thread of comments, with a composer to reply
- * to it.
- *
- * @example
- * <>
- *   {threads.map((thread) => (
- *     <Thread key={thread.id} thread={thread} />
- *   ))}
- * </>
- */
-declare const Thread: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>) => JSX.Element;
-
 type LiveblocksUiConfigProps = PropsWithChildren<{
     /**
      * Override the components' strings.
@@ -1712,4 +1807,4 @@ declare namespace icon {
   };
 }
 
-export { AiChat, AiChatComponents, AiChatComponentsEmptyProps, AiChatComponentsLoadingProps, AiChatProps, AiComposerSubmitMessage, AiTool, AiToolIconProps, AiToolProps, Comment, CommentAttachmentArgs, CommentAuthorProps, CommentAvatarProps, CommentDateProps, CommentDropdownItemProps, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationInspectorProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUiConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };
+export { AiChat, AiChatComponents, AiChatComponentsEmptyProps, AiChatComponentsLoadingProps, AiChatProps, AiComposerSubmitMessage, AiTool, AiToolIconProps, AiToolProps, AvatarStack, AvatarStackProps, Comment, CommentAttachmentArgs, CommentAuthorProps, CommentAvatarProps, CommentDateProps, CommentDropdownItemProps, CommentOverrides, CommentPin, CommentPinProps, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, Cursor, CursorProps, Cursors, CursorsProps, FloatingComposer, FloatingComposerProps, FloatingThread, FloatingThreadProps, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationInspectorProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUiConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };