@liveblocks/react-ui 2.14.0 → 2.15.0-debug1

package/dist/components/Composer.js

@@ -1,11 +1,9 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
-var react = require('@liveblocks/react');
 var _private = require('@liveblocks/react/_private');
-var React = require('react');
-var index_js = require('use-sync-external-store/shim/index.js');
+var react = require('react');
 var config = require('../config.js');
 var constants = require('../constants.js');
 var Attachment = require('../icons/Attachment.js');
@@ -23,7 +21,6 @@ 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');
@@ -42,10 +39,10 @@ function ComposerInsertMentionEditorAction({
   ...props
 }) {
   const { createMention } = contexts.useComposer();
-  const preventDefault = React.useCallback((event) => {
+  const preventDefault = react.useCallback((event) => {
     event.preventDefault();
   }, []);
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (event) => {
       onClick?.(event);
       if (!event.isDefaultPrevented()) {
@@ -55,17 +52,19 @@ function ComposerInsertMentionEditorAction({
     },
     [createMention, onClick]
   );
-  return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: tooltipLabel ?? label
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    className: classNames.classNames("lb-composer-editor-action", className),
-    onPointerDown: preventDefault,
-    onClick: handleClick,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React.createElement(Mention.MentionIcon, {
-    className: "lb-button-icon"
-  })));
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+    content: tooltipLabel ?? label,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+      className: classNames.classNames("lb-composer-editor-action", className),
+      onPointerDown: preventDefault,
+      onClick: handleClick,
+      "aria-label": label,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Mention.MentionIcon, {
+        className: "lb-button-icon"
+      })
+    })
+  });
 }
 function ComposerInsertEmojiEditorAction({
   label,
@@ -75,28 +74,32 @@ function ComposerInsertEmojiEditorAction({
   ...props
 }) {
   const { insertText } = contexts.useComposer();
-  const preventDefault = React.useCallback((event) => {
+  const preventDefault = react.useCallback((event) => {
     event.preventDefault();
   }, []);
-  const stopPropagation = React.useCallback((event) => {
+  const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React.createElement(EmojiPicker.EmojiPicker, {
+  return /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, {
     onEmojiSelect: insertText,
-    onOpenChange: onPickerOpenChange
-  }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: tooltipLabel ?? label
-  }, /* @__PURE__ */ React.createElement(PopoverPrimitive.PopoverTrigger, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    className: classNames.classNames("lb-composer-editor-action", className),
-    onPointerDown: preventDefault,
-    onClick: stopPropagation,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React.createElement(Emoji.EmojiIcon, {
-    className: "lb-button-icon"
-  })))));
+    onOpenChange: onPickerOpenChange,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+      content: tooltipLabel ?? label,
+      children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, {
+        asChild: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+          className: classNames.classNames("lb-composer-editor-action", className),
+          onPointerDown: preventDefault,
+          onClick: stopPropagation,
+          "aria-label": label,
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.EmojiIcon, {
+            className: "lb-button-icon"
+          })
+        })
+      })
+    })
+  });
 }
 function ComposerAttachFilesEditorAction({
   label,
@@ -104,111 +107,159 @@ function ComposerAttachFilesEditorAction({
   className,
   ...props
 }) {
-  const preventDefault = React.useCallback((event) => {
+  const preventDefault = react.useCallback((event) => {
     event.preventDefault();
   }, []);
-  const stopPropagation = React.useCallback((event) => {
+  const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: tooltipLabel ?? label
-  }, /* @__PURE__ */ React.createElement(index.AttachFiles, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    className: classNames.classNames("lb-composer-editor-action", className),
-    onPointerDown: preventDefault,
-    onClick: stopPropagation,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React.createElement(Attachment.AttachmentIcon, {
-    className: "lb-button-icon"
-  }))));
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+    content: tooltipLabel ?? label,
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.AttachFiles, {
+      asChild: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+        className: classNames.classNames("lb-composer-editor-action", className),
+        onPointerDown: preventDefault,
+        onClick: stopPropagation,
+        "aria-label": label,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {
+          className: "lb-button-icon"
+        })
+      })
+    })
+  });
 }
 function ComposerMention({ userId }) {
-  return /* @__PURE__ */ React.createElement(index.Mention, {
-    className: "lb-composer-mention"
-  }, mentions.MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User.User, {
-    userId
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Mention, {
+    className: "lb-composer-mention",
+    children: [
+      mentions.MENTION_CHARACTER,
+      /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+        userId
+      })
+    ]
+  });
 }
 function ComposerMentionSuggestions({
   userIds
 }) {
-  return userIds.length > 0 ? /* @__PURE__ */ React.createElement(index.Suggestions, {
-    className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions"
-  }, /* @__PURE__ */ React.createElement(index.SuggestionsList, {
-    className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list"
-  }, userIds.map((userId) => /* @__PURE__ */ React.createElement(index.SuggestionsListItem, {
-    key: userId,
-    className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
-    value: userId
-  }, /* @__PURE__ */ React.createElement(Avatar.Avatar, {
-    userId,
-    className: "lb-composer-mention-suggestion-avatar"
-  }), /* @__PURE__ */ React.createElement(User.User, {
-    userId,
-    className: "lb-composer-mention-suggestion-user"
-  }))))) : null;
+  return userIds.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.Suggestions, {
+    className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions",
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.SuggestionsList, {
+      className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list",
+      children: userIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsxs(index.SuggestionsListItem, {
+        className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
+        value: userId,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
+            userId,
+            className: "lb-composer-mention-suggestion-avatar"
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+            userId,
+            className: "lb-composer-mention-suggestion-user"
+          })
+        ]
+      }, userId))
+    })
+  }) : null;
 }
 function MarkToggle({ mark, shortcut, children, ...props }) {
   const $ = overrides.useOverrides();
-  const label = React.useMemo(() => {
+  const label = react.useMemo(() => {
     return $.COMPOSER_TOGGLE_MARK(mark);
   }, [$, mark]);
-  return /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltip, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
     content: label,
     shortcut,
-    sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET + 2
-  }, /* @__PURE__ */ React.createElement(index.MarkToggle, {
-    mark,
-    asChild: true,
-    ...props
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    "aria-label": label,
-    variant: "toggle"
-  }, children)));
+    sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET + 2,
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.MarkToggle, {
+      mark,
+      asChild: true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+        "aria-label": label,
+        variant: "toggle",
+        children
+      })
+    })
+  });
 }
 const markToggles = {
-  bold: () => /* @__PURE__ */ React.createElement(MarkToggle, {
+  bold: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "bold",
-    shortcut: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React.createElement("span", null, "B"))
-  }, /* @__PURE__ */ React.createElement(Bold.BoldIcon, null)),
-  italic: () => /* @__PURE__ */ React.createElement(MarkToggle, {
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "B"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Bold.BoldIcon, {})
+  }),
+  italic: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "italic",
-    shortcut: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React.createElement("span", null, "I"))
-  }, /* @__PURE__ */ React.createElement(Italic.ItalicIcon, null)),
-  strikethrough: () => /* @__PURE__ */ React.createElement(MarkToggle, {
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "I"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Italic.ItalicIcon, {})
+  }),
+  strikethrough: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "strikethrough",
-    shortcut: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "shift"
-    }), /* @__PURE__ */ React.createElement("span", null, "S"))
-  }, /* @__PURE__ */ React.createElement(Strikethrough.StrikethroughIcon, null)),
-  code: () => /* @__PURE__ */ React.createElement(MarkToggle, {
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "shift"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "S"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough.StrikethroughIcon, {})
+  }),
+  code: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "code",
-    shortcut: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React.createElement("span", null, "E"))
-  }, /* @__PURE__ */ React.createElement(Code.CodeIcon, null))
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "E"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Code.CodeIcon, {})
+  })
 };
-const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ React.createElement(Toggle, {
-  key: mark
-}));
+const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ jsxRuntime.jsx(Toggle, {}, mark));
 function ComposerFloatingToolbar() {
-  return /* @__PURE__ */ React.createElement(index.FloatingToolbar, {
-    className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar"
-  }, markTogglesList);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.FloatingToolbar, {
+    className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar",
+    children: markTogglesList
+  });
 }
 function ComposerLink({ href, children }) {
-  return /* @__PURE__ */ React.createElement(index.Link, {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Link, {
     href,
-    className: "lb-composer-link"
-  }, children);
+    className: "lb-composer-link",
+    children
+  });
 }
 function ComposerFileAttachment({
   attachment,
@@ -218,10 +269,10 @@ function ComposerFileAttachment({
 }) {
   const { removeAttachment } = contexts.useComposer();
   const { roomId } = contexts.useComposerEditorContext();
-  const handleDeleteClick = React.useCallback(() => {
+  const handleDeleteClick = react.useCallback(() => {
     removeAttachment(attachment.id);
   }, [attachment.id, removeAttachment]);
-  return /* @__PURE__ */ React.createElement(Attachment$1.FileAttachment, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Attachment$1.FileAttachment, {
     className: classNames.classNames("lb-composer-attachment", className),
     ...props,
     attachment,
@@ -240,18 +291,19 @@ function ComposerAttachments({
   if (attachments.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-composer-attachments", className),
-    ...props
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachments"
-  }, attachments.map((attachment) => {
-    return /* @__PURE__ */ React.createElement(ComposerFileAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides
-    });
-  })));
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: "lb-attachments",
+      children: attachments.map((attachment) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(ComposerFileAttachment, {
+          attachment,
+          overrides
+        }, attachment.id);
+      })
+    })
+  });
 }
 const editorRequiredComponents = {
   Mention: ComposerMention,
@@ -276,7 +328,7 @@ function ComposerEditorContainer({
   const { isEmpty } = contexts.useComposer();
   const { hasMaxAttachments } = contexts.useComposerAttachmentsContext();
   const $ = overrides.useOverrides(overrides$1);
-  const components = React.useMemo(() => {
+  const components = react.useMemo(() => {
     return {
       ...editorRequiredComponents,
       FloatingToolbar: showFormattingControls ? ComposerFloatingToolbar : void 0
@@ -285,66 +337,93 @@ function ComposerEditorContainer({
   const [isDraggingOver, dropAreaProps] = utils.useComposerAttachmentsDropArea({
     disabled: disabled || hasMaxAttachments
   });
-  useLayoutEffect.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     onEmptyChange(isEmpty);
   }, [isEmpty, onEmptyChange]);
-  const preventDefault = React.useCallback((event) => {
+  const preventDefault = react.useCallback((event) => {
     event.preventDefault();
   }, []);
-  const stopPropagation = React.useCallback((event) => {
+  const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: "lb-composer-editor-container",
-    ...dropAreaProps
-  }, /* @__PURE__ */ React.createElement(index.Editor, {
-    className: "lb-composer-editor",
-    onClick: onEditorClick,
-    placeholder: $.COMPOSER_PLACEHOLDER,
-    defaultValue,
-    autoFocus,
-    components,
-    disabled,
-    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,
-    disabled
-  }), /* @__PURE__ */ React.createElement(ComposerInsertEmojiEditorAction, {
-    label: $.COMPOSER_INSERT_EMOJI,
-    onPickerOpenChange: onEmojiPickerOpenChange,
-    disabled
-  }), showAttachments && /* @__PURE__ */ React.createElement(ComposerAttachFilesEditorAction, {
-    label: $.COMPOSER_ATTACH_FILES,
-    disabled
-  })), 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, {
-    onPointerDown: 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)));
+    ...dropAreaProps,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.Editor, {
+        className: "lb-composer-editor",
+        onClick: onEditorClick,
+        placeholder: $.COMPOSER_PLACEHOLDER,
+        defaultValue,
+        autoFocus,
+        components,
+        disabled,
+        dir: $.dir
+      }),
+      showAttachments && /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {
+        overrides: overrides$1
+      }),
+      (!isCollapsed || isDraggingOver) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: "lb-composer-footer",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            className: "lb-composer-editor-actions",
+            children: [
+              hasResolveMentionSuggestions && /* @__PURE__ */ jsxRuntime.jsx(ComposerInsertMentionEditorAction, {
+                label: $.COMPOSER_INSERT_MENTION,
+                disabled
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(ComposerInsertEmojiEditorAction, {
+                label: $.COMPOSER_INSERT_EMOJI,
+                onPickerOpenChange: onEmojiPickerOpenChange,
+                disabled
+              }),
+              showAttachments && /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachFilesEditorAction, {
+                label: $.COMPOSER_ATTACH_FILES,
+                disabled
+              })
+            ]
+          }),
+          showAttribution && /* @__PURE__ */ jsxRuntime.jsx(Attribution.Attribution, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-composer-actions",
+            children: actions ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
+                content: $.COMPOSER_SEND,
+                shortcut: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+                  name: "enter"
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx(index.Submit, {
+                  asChild: true,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                    onPointerDown: preventDefault,
+                    onClick: stopPropagation,
+                    className: "lb-composer-action",
+                    variant: "primary",
+                    "aria-label": $.COMPOSER_SEND,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Send.SendIcon, {})
+                  })
+                })
+              })
+            })
+          })
+        ]
+      }),
+      showAttachments && isDraggingOver && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-composer-attachments-drop-area",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          className: "lb-composer-attachments-drop-area-label",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {}),
+            $.COMPOSER_ATTACH_FILES
+          ]
+        })
+      })
+    ]
+  });
 }
-React.createContext(null);
-const Composer = React.forwardRef(
+react.createContext(null);
+const Composer = react.forwardRef(
   ({
     threadId,
     commentId,
@@ -368,7 +447,6 @@ const Composer = React.forwardRef(
     roomId: _roomId,
     ...props
   }, forwardedRef) => {
-    const client = react.useClient();
     const room = _private.useRoomOrNull();
     const roomId = _roomId !== void 0 ? _roomId : room?.id;
     if (roomId === void 0) {
@@ -380,17 +458,17 @@ const Composer = React.forwardRef(
     const createComment = _private.useCreateRoomComment(roomId);
     const editComment = _private.useEditRoomComment(roomId);
     const { preventUnsavedComposerChanges } = config.useLiveblocksUIConfig();
-    const hasResolveMentionSuggestions = client[core.kInternal].resolveMentionSuggestions !== void 0;
-    const isEmptyRef = React.useRef(true);
-    const isEmojiPickerOpenRef = React.useRef(false);
+    const hasResolveMentionSuggestions = _private.useResolveMentionSuggestions() !== void 0;
+    const isEmptyRef = react.useRef(true);
+    const isEmojiPickerOpenRef = react.useRef(false);
     const $ = overrides.useOverrides(overrides$1);
     const [isCollapsed, onCollapsedChange] = useControllableState.useControllableState(
       controlledCollapsed === void 0 && defaultCollapsed === void 0 ? false : controlledCollapsed,
       controlledOnCollapsedChange,
       defaultCollapsed
     );
-    const canCommentFallback = index_js.useSyncExternalStore(
-      React.useCallback(
+    const canCommentFallback = react.useSyncExternalStore(
+      react.useCallback(
         (callback) => {
           if (room === null)
             return () => {
@@ -399,20 +477,20 @@ const Composer = React.forwardRef(
         },
         [room]
       ),
-      React.useCallback(() => {
+      react.useCallback(() => {
         return room?.getSelf()?.canComment ?? true;
       }, [room]),
-      React.useCallback(() => true, [])
+      react.useCallback(() => true, [])
     );
     const permissions = _private.useRoomPermissions(roomId);
     const canComment = permissions.size > 0 ? permissions.has(core.Permission.CommentsWrite) || permissions.has(core.Permission.Write) : canCommentFallback;
-    const setEmptyRef = React.useCallback((isEmpty) => {
+    const setEmptyRef = react.useCallback((isEmpty) => {
       isEmptyRef.current = isEmpty;
     }, []);
-    const setEmojiPickerOpenRef = React.useCallback((isEmojiPickerOpen) => {
+    const setEmojiPickerOpenRef = react.useCallback((isEmojiPickerOpen) => {
       isEmojiPickerOpenRef.current = isEmojiPickerOpen;
     }, []);
-    const handleFocus = React.useCallback(
+    const handleFocus = react.useCallback(
       (event) => {
         onFocus?.(event);
         if (event.isDefaultPrevented()) {
@@ -424,7 +502,7 @@ const Composer = React.forwardRef(
       },
       [onCollapsedChange, onFocus, canComment]
     );
-    const handleBlur = React.useCallback(
+    const handleBlur = react.useCallback(
       (event) => {
         onBlur?.(event);
         if (event.isDefaultPrevented()) {
@@ -439,7 +517,7 @@ const Composer = React.forwardRef(
       },
       [onBlur, onCollapsedChange]
     );
-    const handleEditorClick = React.useCallback(
+    const handleEditorClick = react.useCallback(
       (event) => {
         event.stopPropagation();
         if (isEmptyRef.current && canComment) {
@@ -448,7 +526,7 @@ const Composer = React.forwardRef(
       },
       [onCollapsedChange, canComment]
     );
-    const handleCommentSubmit = React.useCallback(
+    const handleCommentSubmit = react.useCallback(
       (comment, event) => {
         onComposerSubmit?.(comment, event);
         if (event.isDefaultPrevented()) {
@@ -485,38 +563,41 @@ const Composer = React.forwardRef(
         threadId
       ]
     );
-    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,
-      ...props,
-      ref: forwardedRef,
-      "data-collapsed": isCollapsed ? "" : void 0,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      disabled: disabled || !canComment,
-      defaultAttachments,
-      pasteFilesAsAttachments: showAttachments,
-      preventUnsavedChanges: preventUnsavedComposerChanges,
-      roomId
-    }, /* @__PURE__ */ React.createElement(ComposerEditorContainer, {
-      defaultValue,
-      actions,
-      overrides: overrides$1,
-      isCollapsed,
-      showAttachments,
-      showAttribution,
-      showFormattingControls,
-      hasResolveMentionSuggestions,
-      onEmptyChange: setEmptyRef,
-      onEmojiPickerOpenChange: setEmojiPickerOpenRef,
-      onEditorClick: handleEditorClick,
-      autoFocus,
-      disabled
-    })));
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(index.Form, {
+        onComposerSubmit: handleCommentSubmit,
+        className: classNames.classNames(
+          "lb-root lb-composer lb-composer-form",
+          className
+        ),
+        dir: $.dir,
+        ...props,
+        ref: forwardedRef,
+        "data-collapsed": isCollapsed ? "" : void 0,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        disabled: disabled || !canComment,
+        defaultAttachments,
+        pasteFilesAsAttachments: showAttachments,
+        preventUnsavedChanges: preventUnsavedComposerChanges,
+        roomId,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorContainer, {
+          defaultValue,
+          actions,
+          overrides: overrides$1,
+          isCollapsed,
+          showAttachments,
+          showAttribution,
+          showFormattingControls,
+          hasResolveMentionSuggestions,
+          onEmptyChange: setEmptyRef,
+          onEmojiPickerOpenChange: setEmojiPickerOpenRef,
+          onEditorClick: handleEditorClick,
+          autoFocus,
+          disabled
+        })
+      })
+    });
   }
 );