@liveblocks/react-ui 2.5.2 → 2.7.0-beta1

package/dist/components/Composer.js

@@ -4,15 +4,19 @@
 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');
@@ -84,6 +88,31 @@ 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"
@@ -116,68 +145,184 @@ 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
 };
-const ComposerWithContext = React.forwardRef(
-  ({
+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,
-    disabled,
     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(
+  ({
+    threadId,
+    commentId,
+    metadata,
+    defaultValue,
+    defaultAttachments,
+    onComposerSubmit,
     collapsed: controlledCollapsed,
     defaultCollapsed,
     onCollapsedChange: controlledOnCollapsedChange,
-    actions,
     overrides: overrides$1,
-    showAttribution,
-    onFocus,
+    actions,
     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 self = react.useSelf();
-    const isDisabled = React.useMemo(
-      () => disabled || (self ? !self.canComment : false),
-      [disabled, self?.canComment]
-    );
-    const { isEmpty } = contexts.useComposer();
+    const isEmptyRef = React.useRef(true);
+    const isEmojiPickerOpenRef = React.useRef(false);
     const $ = overrides.useOverrides(overrides$1);
-    const [isEmojiPickerOpen, setEmojiPickerOpen] = React.useState(false);
-    const [collapsed, onCollapsedChange] = useControllableState.useControllableState(
+    const [isCollapsed, onCollapsedChange] = useControllableState.useControllableState(
       controlledCollapsed === void 0 && defaultCollapsed === void 0 ? false : controlledCollapsed,
       controlledOnCollapsedChange,
       defaultCollapsed
     );
-    const preventDefault = React.useCallback((event) => {
-      event.preventDefault();
+    const setEmptyRef = React.useCallback((isEmpty) => {
+      isEmptyRef.current = isEmpty;
     }, []);
-    const stopPropagation = React.useCallback((event) => {
-      event.stopPropagation();
+    const setEmojiPickerOpenRef = React.useCallback((isEmojiPickerOpen) => {
+      isEmojiPickerOpenRef.current = isEmojiPickerOpen;
     }, []);
-    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 (isEmpty) {
+        if (isEmptyRef.current) {
           onCollapsedChange?.(false);
         }
       },
-      [isEmpty, onCollapsedChange, onFocus]
+      [onCollapsedChange, onFocus]
     );
     const handleBlur = React.useCallback(
       (event) => {
@@ -185,75 +330,24 @@ const ComposerWithContext = React.forwardRef(
         if (event.isDefaultPrevented()) {
           return;
         }
-        const isOutside = !event.currentTarget.contains(event.relatedTarget);
-        if (isOutside && isEmpty && !isEmojiPickerOpen) {
+        const isOutside = !event.currentTarget.contains(
+          event.relatedTarget ?? document.activeElement
+        );
+        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {
           onCollapsedChange?.(true);
         }
       },
-      [isEmojiPickerOpen, isEmpty, onBlur, onCollapsedChange]
+      [onBlur, onCollapsedChange]
+    );
+    const handleEditorClick = React.useCallback(
+      (event) => {
+        event.stopPropagation();
+        if (isEmptyRef.current) {
+          onCollapsedChange?.(false);
+        }
+      },
+      [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);
@@ -264,17 +358,20 @@ const Composer = React.forwardRef(
           editComment({
             commentId,
             threadId,
-            body: comment.body
+            body: comment.body,
+            attachments: comment.attachments
           });
         } else if (threadId) {
           createComment({
             threadId,
-            body: comment.body
+            body: comment.body,
+            attachments: comment.attachments
           });
         } else {
           createThread({
             body: comment.body,
-            metadata: metadata ?? {}
+            metadata: metadata ?? {},
+            attachments: comment.attachments
           });
         }
       },
@@ -290,11 +387,30 @@ const Composer = React.forwardRef(
     );
     return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, /* @__PURE__ */ React.createElement(index.Form, {
       onComposerSubmit: handleCommentSubmit,
-      onFocus,
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(ComposerWithContext, {
+      className: classNames.classNames(
+        "lb-root lb-composer lb-composer-form",
+        className
+      ),
+      dir: $.dir,
       ...props,
-      ref: forwardedRef
+      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
     })));
   }
 );

package/dist/components/Composer.js.map

@@ -1 +1 @@
-{"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;;"}
+{"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;;"}