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

package/dist/components/Composer.js

@@ -4,19 +4,15 @@
 var core = require('@liveblocks/core');
 var react = require('@liveblocks/react');
 var React = require('react');
-var Attachment = require('../icons/Attachment.js');
 var Emoji = require('../icons/Emoji.js');
 var Mention = require('../icons/Mention.js');
 var Send = require('../icons/Send.js');
 var overrides = require('../overrides.js');
 var index = require('../primitives/Composer/index.js');
 var contexts = require('../primitives/Composer/contexts.js');
-var utils = require('../primitives/Composer/utils.js');
 var mentions = require('../slate/plugins/mentions.js');
 var classNames = require('../utils/class-names.js');
 var useControllableState = require('../utils/use-controllable-state.js');
-var useLayoutEffect = require('../utils/use-layout-effect.js');
-var Attachment$1 = require('./internal/Attachment.js');
 var Attribution = require('./internal/Attribution.js');
 var Avatar = require('./internal/Avatar.js');
 var Button = require('./internal/Button.js');
@@ -88,31 +84,6 @@ function ComposerInsertEmojiEditorAction({
     className: "lb-button-icon"
   })))));
 }
-function ComposerAttachFilesEditorAction({
-  label,
-  className,
-  ...props
-}) {
-  const preventDefault = React.useCallback((event) => {
-    event.preventDefault();
-  }, []);
-  const stopPropagation = React.useCallback((event) => {
-    event.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: label
-  }, /* @__PURE__ */ React.createElement(index.AttachFiles, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    className: classNames.classNames("lb-composer-editor-action", className),
-    onMouseDown: preventDefault,
-    onClick: stopPropagation,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React.createElement(Attachment.AttachmentIcon, {
-    className: "lb-button-icon"
-  }))));
-}
 function ComposerMention({ userId }) {
   return /* @__PURE__ */ React.createElement(index.Mention, {
     className: "lb-composer-mention"
@@ -145,184 +116,68 @@ function ComposerLink({ href, children }) {
     className: "lb-composer-link"
   }, children);
 }
-function ComposerFileAttachment({
-  attachment,
-  className,
-  overrides,
-  ...props
-}) {
-  const { removeAttachment } = contexts.useComposer();
-  const handleDeleteClick = React.useCallback(() => {
-    removeAttachment(attachment.id);
-  }, [attachment.id, removeAttachment]);
-  return /* @__PURE__ */ React.createElement(Attachment$1.FileAttachment, {
-    className: classNames.classNames("lb-composer-attachment", className),
-    ...props,
-    attachment,
-    onDeleteClick: handleDeleteClick,
-    preventFocusOnDelete: true,
-    overrides
-  });
-}
-function ComposerAttachments({
-  overrides,
-  className,
-  ...props
-}) {
-  const { attachments } = contexts.useComposer();
-  if (attachments.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement("div", {
-    className: classNames.classNames("lb-composer-attachments", className),
-    ...props
-  }, attachments.map((attachment) => {
-    return /* @__PURE__ */ React.createElement(ComposerFileAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides
-    });
-  }));
-}
 const editorComponents = {
   Mention: ComposerMention,
   MentionSuggestions: ComposerMentionSuggestions,
   Link: ComposerLink
 };
-function ComposerEditorContainer({
-  showAttachments = true,
-  showAttribution,
-  defaultValue,
-  isCollapsed,
-  overrides: overrides$1,
-  actions,
-  autoFocus,
-  hasResolveMentionSuggestions,
-  onEmojiPickerOpenChange,
-  onEmptyChange,
-  onEditorClick
-}) {
-  const ref = React.useRef(null);
-  const { isEmpty } = contexts.useComposer();
-  const $ = overrides.useOverrides(overrides$1);
-  const ignoreDropAreaLeaveEvent = React.useCallback(
-    (event) => {
-      return Boolean(
-        event.relatedTarget && event.target && event.relatedTarget === ref.current && ref.current?.contains(event.target)
-      );
-    },
-    []
-  );
-  const [isDraggingOver, dropAreaProps] = utils.useComposerAttachmentsDropArea({
-    ignoreLeaveEvent: ignoreDropAreaLeaveEvent
-  });
-  useLayoutEffect.useLayoutEffect(() => {
-    onEmptyChange(isEmpty);
-  }, [isEmpty, onEmptyChange]);
-  const preventDefault = React.useCallback((event) => {
-    event.preventDefault();
-  }, []);
-  const stopPropagation = React.useCallback((event) => {
-    event.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-editor-container",
-    ref,
-    ...dropAreaProps
-  }, /* @__PURE__ */ React.createElement(index.Editor, {
-    className: "lb-composer-editor",
-    onClick: onEditorClick,
-    placeholder: $.COMPOSER_PLACEHOLDER,
-    defaultValue,
-    autoFocus,
-    components: editorComponents,
-    dir: $.dir
-  }), showAttachments && /* @__PURE__ */ React.createElement(ComposerAttachments, {
-    overrides: overrides$1
-  }), (!isCollapsed || isDraggingOver) && /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-footer"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-editor-actions"
-  }, hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(ComposerInsertMentionEditorAction, {
-    label: $.COMPOSER_INSERT_MENTION
-  }), /* @__PURE__ */ React.createElement(ComposerInsertEmojiEditorAction, {
-    label: $.COMPOSER_INSERT_EMOJI,
-    onPickerOpenChange: onEmojiPickerOpenChange
-  }), showAttachments && /* @__PURE__ */ React.createElement(ComposerAttachFilesEditorAction, {
-    label: $.COMPOSER_ATTACH_FILES
-  })), showAttribution && /* @__PURE__ */ React.createElement(Attribution.Attribution, null), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-actions"
-  }, actions ?? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltip, {
-    content: $.COMPOSER_SEND,
-    shortcut: /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "enter"
-    })
-  }, /* @__PURE__ */ React.createElement(index.Submit, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    onMouseDown: preventDefault,
-    onClick: stopPropagation,
-    className: "lb-composer-action",
-    variant: "primary",
-    "aria-label": $.COMPOSER_SEND
-  }, /* @__PURE__ */ React.createElement(Send.SendIcon, null))))))), showAttachments && isDraggingOver && /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-attachments-drop-area"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-attachments-drop-area-label"
-  }, /* @__PURE__ */ React.createElement(Attachment.AttachmentIcon, null), $.COMPOSER_ATTACH_FILES)));
-}
-const Composer = React.forwardRef(
+const ComposerWithContext = React.forwardRef(
   ({
-    threadId,
-    commentId,
-    metadata,
     defaultValue,
-    defaultAttachments,
-    onComposerSubmit,
+    disabled,
+    autoFocus,
     collapsed: controlledCollapsed,
     defaultCollapsed,
     onCollapsedChange: controlledOnCollapsedChange,
-    overrides: overrides$1,
     actions,
+    overrides: overrides$1,
+    showAttribution,
+    onFocus,
     onBlur,
     className,
-    onFocus,
-    autoFocus,
-    disabled,
-    showAttachments = true,
-    showAttribution,
     ...props
   }, forwardedRef) => {
     const client = react.useClient();
-    const createThread = react.useCreateThread();
-    const createComment = react.useCreateComment();
-    const editComment = react.useEditComment();
     const hasResolveMentionSuggestions = client[core.kInternal].resolveMentionSuggestions !== void 0;
-    const isEmptyRef = React.useRef(true);
-    const isEmojiPickerOpenRef = React.useRef(false);
+    const self = react.useSelf();
+    const isDisabled = React.useMemo(
+      () => disabled || (self ? !self.canComment : false),
+      [disabled, self?.canComment]
+    );
+    const { isEmpty } = contexts.useComposer();
     const $ = overrides.useOverrides(overrides$1);
-    const [isCollapsed, onCollapsedChange] = useControllableState.useControllableState(
+    const [isEmojiPickerOpen, setEmojiPickerOpen] = React.useState(false);
+    const [collapsed, onCollapsedChange] = useControllableState.useControllableState(
       controlledCollapsed === void 0 && defaultCollapsed === void 0 ? false : controlledCollapsed,
       controlledOnCollapsedChange,
       defaultCollapsed
     );
-    const setEmptyRef = React.useCallback((isEmpty) => {
-      isEmptyRef.current = isEmpty;
+    const preventDefault = React.useCallback((event) => {
+      event.preventDefault();
     }, []);
-    const setEmojiPickerOpenRef = React.useCallback((isEmojiPickerOpen) => {
-      isEmojiPickerOpenRef.current = isEmojiPickerOpen;
+    const stopPropagation = React.useCallback((event) => {
+      event.stopPropagation();
     }, []);
+    const handleEditorClick = React.useCallback(
+      (event) => {
+        event.stopPropagation();
+        if (isEmpty) {
+          onCollapsedChange?.(false);
+        }
+      },
+      [isEmpty, onCollapsedChange]
+    );
     const handleFocus = React.useCallback(
       (event) => {
         onFocus?.(event);
         if (event.isDefaultPrevented()) {
           return;
         }
-        if (isEmptyRef.current) {
+        if (isEmpty) {
           onCollapsedChange?.(false);
         }
       },
-      [onCollapsedChange, onFocus]
+      [isEmpty, onCollapsedChange, onFocus]
     );
     const handleBlur = React.useCallback(
       (event) => {
@@ -330,24 +185,75 @@ const Composer = React.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 = React.useCallback(
-      (event) => {
-        event.stopPropagation();
-        if (isEmptyRef.current) {
-          onCollapsedChange?.(false);
-        }
-      },
-      [onCollapsedChange]
+      [isEmojiPickerOpen, isEmpty, onBlur, onCollapsedChange]
     );
+    return /* @__PURE__ */ React.createElement("form", {
+      className: classNames.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.createElement(index.Editor, {
+      className: "lb-composer-editor",
+      onClick: handleEditorClick,
+      placeholder: $.COMPOSER_PLACEHOLDER,
+      defaultValue,
+      disabled: isDisabled,
+      autoFocus,
+      components: editorComponents,
+      dir: $.dir
+    }), !collapsed && /* @__PURE__ */ React.createElement("div", {
+      className: "lb-composer-footer"
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "lb-composer-editor-actions"
+    }, hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(ComposerInsertMentionEditorAction, {
+      label: $.COMPOSER_INSERT_MENTION,
+      disabled: isDisabled
+    }), /* @__PURE__ */ React.createElement(ComposerInsertEmojiEditorAction, {
+      label: $.COMPOSER_INSERT_EMOJI,
+      onPickerOpenChange: setEmojiPickerOpen,
+      disabled: isDisabled
+    })), showAttribution && /* @__PURE__ */ React.createElement(Attribution.Attribution, null), /* @__PURE__ */ React.createElement("div", {
+      className: "lb-composer-actions"
+    }, actions ?? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltip, {
+      content: $.COMPOSER_SEND,
+      shortcut: /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
+        name: "enter"
+      })
+    }, /* @__PURE__ */ React.createElement(index.Submit, {
+      disabled: isDisabled,
+      asChild: true
+    }, /* @__PURE__ */ React.createElement(Button.Button, {
+      onMouseDown: preventDefault,
+      onClick: stopPropagation,
+      className: "lb-composer-action",
+      variant: "primary",
+      "aria-label": $.COMPOSER_SEND
+    }, /* @__PURE__ */ React.createElement(Send.SendIcon, null))))))));
+  }
+);
+const Composer = React.forwardRef(
+  ({
+    threadId,
+    commentId,
+    metadata,
+    onComposerSubmit,
+    onFocus,
+    ...props
+  }, forwardedRef) => {
+    const createThread = react.useCreateThread();
+    const createComment = react.useCreateComment();
+    const editComment = react.useEditComment();
     const handleCommentSubmit = React.useCallback(
       (comment, event) => {
         onComposerSubmit?.(comment, event);
@@ -358,20 +264,17 @@ const Composer = React.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 ?? {}
           });
         }
       },
@@ -387,30 +290,11 @@ const Composer = React.forwardRef(
     );
     return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, /* @__PURE__ */ React.createElement(index.Form, {
       onComposerSubmit: handleCommentSubmit,
-      className: classNames.classNames(
-        "lb-root lb-composer lb-composer-form",
-        className
-      ),
-      dir: $.dir,
+      onFocus,
+      asChild: true
+    }, /* @__PURE__ */ React.createElement(ComposerWithContext, {
       ...props,
-      ref: forwardedRef,
-      "data-collapsed": isCollapsed ? "" : void 0,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      disabled,
-      defaultAttachments
-    }, /* @__PURE__ */ React.createElement(ComposerEditorContainer, {
-      defaultValue,
-      actions,
-      overrides: overrides$1,
-      isCollapsed,
-      showAttachments,
-      showAttribution,
-      hasResolveMentionSuggestions,
-      onEmptyChange: setEmptyRef,
-      onEmojiPickerOpenChange: setEmojiPickerOpenRef,
-      onEditorClick: handleEditorClick,
-      autoFocus
+      ref: forwardedRef
     })));
   }
 );

package/dist/components/Composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.js","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.js","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;;"}