@liveblocks/react-ui 2.7.0-beta1 → 2.7.0-versions

package/dist/components/Composer.mjs

@@ -1,20 +1,16 @@
 'use client';
 import { kInternal } from '@liveblocks/core';
-import { useClient, useCreateThread, useCreateComment, useEditComment } from '@liveblocks/react';
-import React__default, { forwardRef, useRef, useCallback } from 'react';
-import { AttachmentIcon } from '../icons/Attachment.mjs';
+import { useClient, useSelf, useCreateThread, useCreateComment, useEditComment } from '@liveblocks/react';
+import React__default, { forwardRef, useMemo, useState, useCallback } from 'react';
 import { EmojiIcon } from '../icons/Emoji.mjs';
 import { MentionIcon } from '../icons/Mention.mjs';
 import { SendIcon } from '../icons/Send.mjs';
 import { useOverrides } from '../overrides.mjs';
-import { Form as ComposerForm, Editor as ComposerEditor, Submit as ComposerSubmit, AttachFiles as ComposerAttachFiles, Mention as ComposerMention$1, Suggestions as ComposerSuggestions, SuggestionsList as ComposerSuggestionsList, SuggestionsListItem as ComposerSuggestionsListItem, Link as ComposerLink$1 } from '../primitives/Composer/index.mjs';
+import { Editor as ComposerEditor, Submit as ComposerSubmit, Form as ComposerForm, Mention as ComposerMention$1, Suggestions as ComposerSuggestions, SuggestionsList as ComposerSuggestionsList, SuggestionsListItem as ComposerSuggestionsListItem, Link as ComposerLink$1 } from '../primitives/Composer/index.mjs';
 import { useComposer } from '../primitives/Composer/contexts.mjs';
-import { useComposerAttachmentsDropArea } from '../primitives/Composer/utils.mjs';
 import { MENTION_CHARACTER } from '../slate/plugins/mentions.mjs';
 import { classNames } from '../utils/class-names.mjs';
 import { useControllableState } from '../utils/use-controllable-state.mjs';
-import { useLayoutEffect } from '../utils/use-layout-effect.mjs';
-import { FileAttachment } from './internal/Attachment.mjs';
 import { Attribution } from './internal/Attribution.mjs';
 import { Avatar } from './internal/Avatar.mjs';
 import { Button } from './internal/Button.mjs';
@@ -86,31 +82,6 @@ function ComposerInsertEmojiEditorAction({
     className: "lb-button-icon"
   })))));
 }
-function ComposerAttachFilesEditorAction({
-  label,
-  className,
-  ...props
-}) {
-  const preventDefault = useCallback((event) => {
-    event.preventDefault();
-  }, []);
-  const stopPropagation = useCallback((event) => {
-    event.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ React__default.createElement(Tooltip, {
-    content: label
-  }, /* @__PURE__ */ React__default.createElement(ComposerAttachFiles, {
-    asChild: true
-  }, /* @__PURE__ */ React__default.createElement(Button, {
-    className: classNames("lb-composer-editor-action", className),
-    onMouseDown: preventDefault,
-    onClick: stopPropagation,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React__default.createElement(AttachmentIcon, {
-    className: "lb-button-icon"
-  }))));
-}
 function ComposerMention({ userId }) {
   return /* @__PURE__ */ React__default.createElement(ComposerMention$1, {
     className: "lb-composer-mention"
@@ -143,184 +114,68 @@ function ComposerLink({ href, children }) {
     className: "lb-composer-link"
   }, children);
 }
-function ComposerFileAttachment({
-  attachment,
-  className,
-  overrides,
-  ...props
-}) {
-  const { removeAttachment } = useComposer();
-  const handleDeleteClick = useCallback(() => {
-    removeAttachment(attachment.id);
-  }, [attachment.id, removeAttachment]);
-  return /* @__PURE__ */ React__default.createElement(FileAttachment, {
-    className: classNames("lb-composer-attachment", className),
-    ...props,
-    attachment,
-    onDeleteClick: handleDeleteClick,
-    preventFocusOnDelete: true,
-    overrides
-  });
-}
-function ComposerAttachments({
-  overrides,
-  className,
-  ...props
-}) {
-  const { attachments } = useComposer();
-  if (attachments.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: classNames("lb-composer-attachments", className),
-    ...props
-  }, attachments.map((attachment) => {
-    return /* @__PURE__ */ React__default.createElement(ComposerFileAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides
-    });
-  }));
-}
 const editorComponents = {
   Mention: ComposerMention,
   MentionSuggestions: ComposerMentionSuggestions,
   Link: ComposerLink
 };
-function ComposerEditorContainer({
-  showAttachments = true,
-  showAttribution,
-  defaultValue,
-  isCollapsed,
-  overrides,
-  actions,
-  autoFocus,
-  hasResolveMentionSuggestions,
-  onEmojiPickerOpenChange,
-  onEmptyChange,
-  onEditorClick
-}) {
-  const ref = useRef(null);
-  const { isEmpty } = useComposer();
-  const $ = useOverrides(overrides);
-  const ignoreDropAreaLeaveEvent = useCallback(
-    (event) => {
-      return Boolean(
-        event.relatedTarget && event.target && event.relatedTarget === ref.current && ref.current?.contains(event.target)
-      );
-    },
-    []
-  );
-  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({
-    ignoreLeaveEvent: ignoreDropAreaLeaveEvent
-  });
-  useLayoutEffect(() => {
-    onEmptyChange(isEmpty);
-  }, [isEmpty, onEmptyChange]);
-  const preventDefault = useCallback((event) => {
-    event.preventDefault();
-  }, []);
-  const stopPropagation = useCallback((event) => {
-    event.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-editor-container",
-    ref,
-    ...dropAreaProps
-  }, /* @__PURE__ */ React__default.createElement(ComposerEditor, {
-    className: "lb-composer-editor",
-    onClick: onEditorClick,
-    placeholder: $.COMPOSER_PLACEHOLDER,
-    defaultValue,
-    autoFocus,
-    components: editorComponents,
-    dir: $.dir
-  }), showAttachments && /* @__PURE__ */ React__default.createElement(ComposerAttachments, {
-    overrides
-  }), (!isCollapsed || isDraggingOver) && /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-footer"
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-editor-actions"
-  }, hasResolveMentionSuggestions && /* @__PURE__ */ React__default.createElement(ComposerInsertMentionEditorAction, {
-    label: $.COMPOSER_INSERT_MENTION
-  }), /* @__PURE__ */ React__default.createElement(ComposerInsertEmojiEditorAction, {
-    label: $.COMPOSER_INSERT_EMOJI,
-    onPickerOpenChange: onEmojiPickerOpenChange
-  }), showAttachments && /* @__PURE__ */ React__default.createElement(ComposerAttachFilesEditorAction, {
-    label: $.COMPOSER_ATTACH_FILES
-  })), showAttribution && /* @__PURE__ */ React__default.createElement(Attribution, null), /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-actions"
-  }, actions ?? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ShortcutTooltip, {
-    content: $.COMPOSER_SEND,
-    shortcut: /* @__PURE__ */ React__default.createElement(ShortcutTooltipKey, {
-      name: "enter"
-    })
-  }, /* @__PURE__ */ React__default.createElement(ComposerSubmit, {
-    asChild: true
-  }, /* @__PURE__ */ React__default.createElement(Button, {
-    onMouseDown: preventDefault,
-    onClick: stopPropagation,
-    className: "lb-composer-action",
-    variant: "primary",
-    "aria-label": $.COMPOSER_SEND
-  }, /* @__PURE__ */ React__default.createElement(SendIcon, null))))))), showAttachments && isDraggingOver && /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-attachments-drop-area"
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-attachments-drop-area-label"
-  }, /* @__PURE__ */ React__default.createElement(AttachmentIcon, null), $.COMPOSER_ATTACH_FILES)));
-}
-const Composer = forwardRef(
+const ComposerWithContext = forwardRef(
   ({
-    threadId,
-    commentId,
-    metadata,
     defaultValue,
-    defaultAttachments,
-    onComposerSubmit,
+    disabled,
+    autoFocus,
     collapsed: controlledCollapsed,
     defaultCollapsed,
     onCollapsedChange: controlledOnCollapsedChange,
-    overrides,
     actions,
+    overrides,
+    showAttribution,
+    onFocus,
     onBlur,
     className,
-    onFocus,
-    autoFocus,
-    disabled,
-    showAttachments = true,
-    showAttribution,
     ...props
   }, forwardedRef) => {
     const client = useClient();
-    const createThread = useCreateThread();
-    const createComment = useCreateComment();
-    const editComment = useEditComment();
     const hasResolveMentionSuggestions = client[kInternal].resolveMentionSuggestions !== void 0;
-    const isEmptyRef = useRef(true);
-    const isEmojiPickerOpenRef = useRef(false);
+    const self = useSelf();
+    const isDisabled = useMemo(
+      () => disabled || (self ? !self.canComment : false),
+      [disabled, self?.canComment]
+    );
+    const { isEmpty } = useComposer();
     const $ = useOverrides(overrides);
-    const [isCollapsed, onCollapsedChange] = useControllableState(
+    const [isEmojiPickerOpen, setEmojiPickerOpen] = useState(false);
+    const [collapsed, onCollapsedChange] = useControllableState(
       controlledCollapsed === void 0 && defaultCollapsed === void 0 ? false : controlledCollapsed,
       controlledOnCollapsedChange,
       defaultCollapsed
     );
-    const setEmptyRef = useCallback((isEmpty) => {
-      isEmptyRef.current = isEmpty;
+    const preventDefault = useCallback((event) => {
+      event.preventDefault();
     }, []);
-    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen) => {
-      isEmojiPickerOpenRef.current = isEmojiPickerOpen;
+    const stopPropagation = useCallback((event) => {
+      event.stopPropagation();
     }, []);
+    const handleEditorClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+        if (isEmpty) {
+          onCollapsedChange?.(false);
+        }
+      },
+      [isEmpty, onCollapsedChange]
+    );
     const handleFocus = useCallback(
       (event) => {
         onFocus?.(event);
         if (event.isDefaultPrevented()) {
           return;
         }
-        if (isEmptyRef.current) {
+        if (isEmpty) {
           onCollapsedChange?.(false);
         }
       },
-      [onCollapsedChange, onFocus]
+      [isEmpty, onCollapsedChange, onFocus]
     );
     const handleBlur = useCallback(
       (event) => {
@@ -328,24 +183,75 @@ const Composer = forwardRef(
         if (event.isDefaultPrevented()) {
           return;
         }
-        const isOutside = !event.currentTarget.contains(
-          event.relatedTarget ?? document.activeElement
-        );
-        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {
+        const isOutside = !event.currentTarget.contains(event.relatedTarget);
+        if (isOutside && isEmpty && !isEmojiPickerOpen) {
           onCollapsedChange?.(true);
         }
       },
-      [onBlur, onCollapsedChange]
-    );
-    const handleEditorClick = useCallback(
-      (event) => {
-        event.stopPropagation();
-        if (isEmptyRef.current) {
-          onCollapsedChange?.(false);
-        }
-      },
-      [onCollapsedChange]
+      [isEmojiPickerOpen, isEmpty, onBlur, onCollapsedChange]
     );
+    return /* @__PURE__ */ React__default.createElement("form", {
+      className: classNames(
+        "lb-root lb-composer lb-composer-form",
+        className
+      ),
+      dir: $.dir,
+      ...props,
+      ref: forwardedRef,
+      "data-collapsed": collapsed ? "" : void 0,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }, /* @__PURE__ */ React__default.createElement(ComposerEditor, {
+      className: "lb-composer-editor",
+      onClick: handleEditorClick,
+      placeholder: $.COMPOSER_PLACEHOLDER,
+      defaultValue,
+      disabled: isDisabled,
+      autoFocus,
+      components: editorComponents,
+      dir: $.dir
+    }), !collapsed && /* @__PURE__ */ React__default.createElement("div", {
+      className: "lb-composer-footer"
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: "lb-composer-editor-actions"
+    }, hasResolveMentionSuggestions && /* @__PURE__ */ React__default.createElement(ComposerInsertMentionEditorAction, {
+      label: $.COMPOSER_INSERT_MENTION,
+      disabled: isDisabled
+    }), /* @__PURE__ */ React__default.createElement(ComposerInsertEmojiEditorAction, {
+      label: $.COMPOSER_INSERT_EMOJI,
+      onPickerOpenChange: setEmojiPickerOpen,
+      disabled: isDisabled
+    })), showAttribution && /* @__PURE__ */ React__default.createElement(Attribution, null), /* @__PURE__ */ React__default.createElement("div", {
+      className: "lb-composer-actions"
+    }, actions ?? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ShortcutTooltip, {
+      content: $.COMPOSER_SEND,
+      shortcut: /* @__PURE__ */ React__default.createElement(ShortcutTooltipKey, {
+        name: "enter"
+      })
+    }, /* @__PURE__ */ React__default.createElement(ComposerSubmit, {
+      disabled: isDisabled,
+      asChild: true
+    }, /* @__PURE__ */ React__default.createElement(Button, {
+      onMouseDown: preventDefault,
+      onClick: stopPropagation,
+      className: "lb-composer-action",
+      variant: "primary",
+      "aria-label": $.COMPOSER_SEND
+    }, /* @__PURE__ */ React__default.createElement(SendIcon, null))))))));
+  }
+);
+const Composer = forwardRef(
+  ({
+    threadId,
+    commentId,
+    metadata,
+    onComposerSubmit,
+    onFocus,
+    ...props
+  }, forwardedRef) => {
+    const createThread = useCreateThread();
+    const createComment = useCreateComment();
+    const editComment = useEditComment();
     const handleCommentSubmit = useCallback(
       (comment, event) => {
         onComposerSubmit?.(comment, event);
@@ -356,20 +262,17 @@ const Composer = forwardRef(
           editComment({
             commentId,
             threadId,
-            body: comment.body,
-            attachments: comment.attachments
+            body: comment.body
           });
         } else if (threadId) {
           createComment({
             threadId,
-            body: comment.body,
-            attachments: comment.attachments
+            body: comment.body
           });
         } else {
           createThread({
             body: comment.body,
-            metadata: metadata ?? {},
-            attachments: comment.attachments
+            metadata: metadata ?? {}
           });
         }
       },
@@ -385,30 +288,11 @@ const Composer = forwardRef(
     );
     return /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(ComposerForm, {
       onComposerSubmit: handleCommentSubmit,
-      className: classNames(
-        "lb-root lb-composer lb-composer-form",
-        className
-      ),
-      dir: $.dir,
+      onFocus,
+      asChild: true
+    }, /* @__PURE__ */ React__default.createElement(ComposerWithContext, {
       ...props,
-      ref: forwardedRef,
-      "data-collapsed": isCollapsed ? "" : void 0,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      disabled,
-      defaultAttachments
-    }, /* @__PURE__ */ React__default.createElement(ComposerEditorContainer, {
-      defaultValue,
-      actions,
-      overrides,
-      isCollapsed,
-      showAttachments,
-      showAttribution,
-      hasResolveMentionSuggestions,
-      onEmptyChange: setEmptyRef,
-      onEmojiPickerOpenChange: setEmojiPickerOpenRef,
-      onEditorClick: handleEditorClick,
-      autoFocus
+      ref: forwardedRef
     })));
   }
 );

package/dist/components/Composer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.mjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  DragEvent,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport { useComposer } from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { useLayoutEffect } from \"../utils/use-layout-effect\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onMouseDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      {attachments.map((attachment) => {\n        return (\n          <ComposerFileAttachment\n            key={attachment.id}\n            attachment={attachment}\n            overrides={overrides}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { isEmpty } = useComposer();\n  const $ = useOverrides(overrides);\n  const ignoreDropAreaLeaveEvent = useCallback(\n    (event: DragEvent<HTMLDivElement>) => {\n      return Boolean(\n        event.relatedTarget &&\n          event.target &&\n          event.relatedTarget === ref.current &&\n          ref.current?.contains(event.target as HTMLElement)\n      );\n    },\n    []\n  );\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    ignoreLeaveEvent: ignoreDropAreaLeaveEvent,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" ref={ref} {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={editorComponents}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onMouseDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showAttribution,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const client = useClient();\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        // TODO: Handle \"delete\" buttons on attachments (hide them when the composer is collapsed)\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          defaultAttachments={defaultAttachments}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkMA;AAA2C;AACzC;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiB;AACf;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiB;AACf;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AAAyC;AACvC;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiB;AACf;AAAqC;AACnC;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAyB;AAKpC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAGF;AACG;AACiB;AAChB;AACA;AACF;AAKV;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAAiC;AACb;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AAAiC;AAE7B;AAAO;AAI8C;AACrD;AACF;AACC;AAEH;AAAuE;AACnD;AAGpB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAA+B;AAAc;AACzD;AACW;AACD;AACM;AACf;AACA;AACY;AACL;AAEY;AAAoB;AAEtC;AAAc;AACZ;AAAc;AAEV;AACU;AAGZ;AACU;AACW;AAGnB;AACU;AAKd;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACc;AACJ;AACC;AACF;AACM;AAY3B;AAAc;AACZ;AAAc;AAQzB;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AAClB;AACG;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAIlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AACkB;AAGpB;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACR;AACA;AAEC;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AAGN;AAGN;;"}
+{"version":3,"file":"Composer.mjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, DM } from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCreateComment,\n  useCreateThread,\n  useEditComment,\n  useSelf,\n} from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, { forwardRef, useCallback, useMemo, useState } from \"react\";\n\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport { useComposer } from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerEditorProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n  };\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onMouseDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onMouseDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\nconst editorComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nconst ComposerWithContext = forwardRef<\n  HTMLFormElement,\n  Omit<ComposerProps, \"threadId\" | \"commentId\" | \"onComposerSubmit\">\n>(\n  (\n    {\n      defaultValue,\n      disabled,\n      autoFocus,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      actions,\n      overrides,\n      showAttribution,\n      onFocus,\n      onBlur,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const client = useClient();\n    const hasResolveMentionSuggestions =\n      client[kInternal].resolveMentionSuggestions !== undefined;\n    const self = useSelf();\n    const isDisabled = useMemo(\n      () => disabled || (self ? !self.canComment : false),\n      [disabled, self?.canComment] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n    const { isEmpty } = useComposer();\n    const $ = useOverrides(overrides);\n    const [isEmojiPickerOpen, setEmojiPickerOpen] = useState(false);\n    const [collapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const preventDefault = useCallback((event: SyntheticEvent) => {\n      event.preventDefault();\n    }, []);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmpty) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [isEmpty, onCollapsedChange]\n    );\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmpty) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [isEmpty, onCollapsedChange, onFocus]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(event.relatedTarget);\n\n        if (isOutside && isEmpty && !isEmojiPickerOpen) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [isEmojiPickerOpen, isEmpty, onBlur, onCollapsedChange]\n    );\n\n    return (\n      <form\n        className={classNames(\n          \"lb-root lb-composer lb-composer-form\",\n          className\n        )}\n        dir={$.dir}\n        {...props}\n        ref={forwardedRef}\n        data-collapsed={collapsed ? \"\" : undefined}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      >\n        <ComposerPrimitive.Editor\n          className=\"lb-composer-editor\"\n          onClick={handleEditorClick}\n          placeholder={$.COMPOSER_PLACEHOLDER}\n          defaultValue={defaultValue}\n          disabled={isDisabled}\n          autoFocus={autoFocus}\n          components={editorComponents}\n          dir={$.dir}\n        />\n        {!collapsed && (\n          <div className=\"lb-composer-footer\">\n            <div className=\"lb-composer-editor-actions\">\n              {hasResolveMentionSuggestions && (\n                <ComposerInsertMentionEditorAction\n                  label={$.COMPOSER_INSERT_MENTION}\n                  disabled={isDisabled}\n                />\n              )}\n              <ComposerInsertEmojiEditorAction\n                label={$.COMPOSER_INSERT_EMOJI}\n                onPickerOpenChange={setEmojiPickerOpen}\n                disabled={isDisabled}\n              />\n            </div>\n            {showAttribution && <Attribution />}\n            <div className=\"lb-composer-actions\">\n              {actions ?? (\n                <>\n                  <ShortcutTooltip\n                    content={$.COMPOSER_SEND}\n                    shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                  >\n                    <ComposerPrimitive.Submit disabled={isDisabled} asChild>\n                      <Button\n                        onMouseDown={preventDefault}\n                        onClick={stopPropagation}\n                        className=\"lb-composer-action\"\n                        variant=\"primary\"\n                        aria-label={$.COMPOSER_SEND}\n                      >\n                        <SendIcon />\n                      </Button>\n                    </ComposerPrimitive.Submit>\n                  </ShortcutTooltip>\n                </>\n              )}\n            </div>\n          </div>\n        )}\n      </form>\n    );\n  }\n);\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      onComposerSubmit,\n      onFocus,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const createThread = useCreateThread();\n    const createComment = useCreateComment();\n    const editComment = useEditComment();\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          onFocus={onFocus}\n          asChild\n        >\n          <ComposerWithContext {...props} ref={forwardedRef} />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6JA;AAA2C;AACzC;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiB;AACf;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAsB;AAI/B;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiB;AACf;AAA0B;AACxB;AAC6D;AAC/C;AACJ;AACG;AACR;AAEH;AAAoB;AAMjC;AAEA;AACE;AACG;AAAoC;AAElC;AAAK;AAGZ;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AACM;AACK;AACH;AAEN;AACC;AACU;AAEX;AACC;AACU;AAOxB;AAEA;AACE;AACG;AAAuB;AAAsB;AAIlD;AAEA;AAAmD;AACxC;AACW;AAEtB;AAEA;AAA4B;AAKxB;AACE;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AAEA;AACA;AAAmB;AAC4B;AAClB;AAE7B;AACA;AACA;AACA;AAAuC;AAIjC;AACJ;AACA;AAGF;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AAC2B;AAG7B;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AACoC;AAGtC;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAEA;AACE;AAAwB;AAC1B;AACF;AACsD;AAGxD;AACG;AACY;AACT;AACA;AACF;AACO;AACH;AACC;AAC4B;AACxB;AACD;AAEP;AACW;AACD;AACM;AACf;AACU;AACV;AACY;AACL;AAGN;AAAc;AACZ;AAAc;AAEV;AACU;AACC;AAGb;AACU;AACW;AACV;AAIb;AAAc;AAGR;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAmC;AAAmB;AACpD;AACc;AACJ;AACC;AACF;AACM;AAWhC;AAGN;AAQO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AAEA;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACf;AAED;AAAc;AACZ;AACc;AACf;AAED;AAAa;AACG;AACS;AACxB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAEK;AACmB;AAClB;AACO;AAEN;AAAwB;AAAY;AAEzC;AAGN;;"}

package/dist/components/HistoryVersionSummary.js

@@ -0,0 +1,42 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var overrides = require('../overrides.js');
+require('../primitives/Comment/index.js');
+require('../primitives/Composer/index.js');
+require('../primitives/Composer/contexts.js');
+require('../primitives/EmojiPicker/index.js');
+var Timestamp = require('../primitives/Timestamp.js');
+var classNames = require('../utils/class-names.js');
+var List = require('./internal/List.js');
+var User = require('./internal/User.js');
+
+const AUTHORS_TRUNCATE = 3;
+const HistoryVersionSummary = React.forwardRef(({ version, selected, className, ...props }, forwardedRef) => {
+  const $ = overrides.useOverrides();
+  return /* @__PURE__ */ React.createElement("button", {
+    ...props,
+    className: classNames.classNames("lb-root lb-history-version-summary", className),
+    ref: forwardedRef,
+    "data-selected": selected ? "" : void 0
+  }, /* @__PURE__ */ React.createElement(Timestamp.Timestamp, {
+    locale: $.locale,
+    date: version.createdAt,
+    className: "lb-date lb-history-version-summary-date"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "lb-history-version-summary-authors"
+  }, /* @__PURE__ */ React.createElement(List.List, {
+    values: version.authors.map((author) => /* @__PURE__ */ React.createElement(User.User, {
+      key: author.id,
+      userId: author.id,
+      replaceSelf: true
+    })),
+    formatRemaining: $.LIST_REMAINING_USERS,
+    truncate: AUTHORS_TRUNCATE,
+    locale: $.locale
+  })));
+});
+
+exports.HistoryVersionSummary = HistoryVersionSummary;
+//# sourceMappingURL=HistoryVersionSummary.js.map

package/dist/components/HistoryVersionSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryVersionSummary.js","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYA;AAca;AAIX;AAEA;AACG;AACK;AACiE;AAChE;AAC0B;AAE9B;AACW;AACI;AACJ;AAEX;AAAe;AACb;AAEI;AAAiB;AAAmB;AAAe;AACrD;AACkB;AACT;AACA;AAKpB;;"}

package/dist/components/HistoryVersionSummary.mjs

@@ -0,0 +1,40 @@
+'use client';
+import React__default, { forwardRef } from 'react';
+import { useOverrides } from '../overrides.mjs';
+import '../primitives/Comment/index.mjs';
+import '../primitives/Composer/index.mjs';
+import '../primitives/Composer/contexts.mjs';
+import '../primitives/EmojiPicker/index.mjs';
+import { Timestamp } from '../primitives/Timestamp.mjs';
+import { classNames } from '../utils/class-names.mjs';
+import { List } from './internal/List.mjs';
+import { User } from './internal/User.mjs';
+
+const AUTHORS_TRUNCATE = 3;
+const HistoryVersionSummary = forwardRef(({ version, selected, className, ...props }, forwardedRef) => {
+  const $ = useOverrides();
+  return /* @__PURE__ */ React__default.createElement("button", {
+    ...props,
+    className: classNames("lb-root lb-history-version-summary", className),
+    ref: forwardedRef,
+    "data-selected": selected ? "" : void 0
+  }, /* @__PURE__ */ React__default.createElement(Timestamp, {
+    locale: $.locale,
+    date: version.createdAt,
+    className: "lb-date lb-history-version-summary-date"
+  }), /* @__PURE__ */ React__default.createElement("span", {
+    className: "lb-history-version-summary-authors"
+  }, /* @__PURE__ */ React__default.createElement(List, {
+    values: version.authors.map((author) => /* @__PURE__ */ React__default.createElement(User, {
+      key: author.id,
+      userId: author.id,
+      replaceSelf: true
+    })),
+    formatRemaining: $.LIST_REMAINING_USERS,
+    truncate: AUTHORS_TRUNCATE,
+    locale: $.locale
+  })));
+});
+
+export { HistoryVersionSummary };
+//# sourceMappingURL=HistoryVersionSummary.mjs.map

package/dist/components/HistoryVersionSummary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryVersionSummary.mjs","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA;AAca;AAIX;AAEA;AACG;AACK;AACiE;AAChE;AAC0B;AAE9B;AACW;AACI;AACJ;AAEX;AAAe;AACb;AAEI;AAAiB;AAAmB;AAAe;AACrD;AACkB;AACT;AACA;AAKpB;;"}

package/dist/components/HistoryVersionSummaryList.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var classNames = require('../utils/class-names.js');
+
+const HistoryVersionSummaryList = React.forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement("ol", {
+    className: classNames.classNames(
+      "lb-root lb-history-version-summary-list",
+      className
+    ),
+    ...props,
+    ref: forwardedRef
+  }, React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement("li", {
+    key: index,
+    className: "lb-history-version-summary-list-item"
+  }, child)));
+});
+
+exports.HistoryVersionSummaryList = HistoryVersionSummaryList;
+//# sourceMappingURL=HistoryVersionSummaryList.js.map

package/dist/components/HistoryVersionSummaryList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryVersionSummaryList.js","sources":["../../src/components/HistoryVersionSummaryList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays versions summaries as a list.\n *\n * @example\n * <HistoryVersionSummaryList>\n *   {versions.map((version) => (\n *     <HistoryVersionSummary key={version.id} version={version} />\n *   ))}\n * </HistoryVersionSummaryList>\n */\nexport const HistoryVersionSummaryList = forwardRef<\n  HTMLOListElement,\n  HistoryVersionSummaryListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\n        \"lb-root lb-history-version-summary-list\",\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-history-version-summary-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;AAmBa;AAIX;AACG;AACY;AACT;AACA;AACF;AACI;AACC;AAGF;AAAQ;AAAiB;AAMlC;;"}

package/dist/components/HistoryVersionSummaryList.mjs

@@ -0,0 +1,20 @@
+'use client';
+import React__default, { forwardRef, Children } from 'react';
+import { classNames } from '../utils/class-names.mjs';
+
+const HistoryVersionSummaryList = forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React__default.createElement("ol", {
+    className: classNames(
+      "lb-root lb-history-version-summary-list",
+      className
+    ),
+    ...props,
+    ref: forwardedRef
+  }, Children.map(children, (child, index) => /* @__PURE__ */ React__default.createElement("li", {
+    key: index,
+    className: "lb-history-version-summary-list-item"
+  }, child)));
+});
+
+export { HistoryVersionSummaryList };
+//# sourceMappingURL=HistoryVersionSummaryList.mjs.map