@liveblocks/react-ui 2.14.0-v2encoding → 2.15.0-debug1

package/dist/components/Composer.mjs

@@ -1,8 +1,7 @@
-'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Permission } from '@liveblocks/core';
 import { useRoomOrNull, useCreateRoomThread, useCreateRoomComment, useEditRoomComment, useResolveMentionSuggestions, useRoomPermissions } from '@liveblocks/react/_private';
-import React__default, { createContext, forwardRef, useRef, useCallback, useMemo } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+import { createContext, forwardRef, useRef, useSyncExternalStore, useCallback, useMemo, useLayoutEffect } from 'react';
 import { useLiveblocksUIConfig } from '../config.mjs';
 import { FLOATING_ELEMENT_SIDE_OFFSET } from '../constants.mjs';
 import { AttachmentIcon } from '../icons/Attachment.mjs';
@@ -20,7 +19,6 @@ import { useComposerAttachmentsDropArea } from '../primitives/Composer/utils.mjs
 import { MENTION_CHARACTER } from '../slate/plugins/mentions.mjs';
 import { classNames } from '../utils/class-names.mjs';
 import { useControllableState } from '../utils/use-controllable-state.mjs';
-import { useLayoutEffect } from '../utils/use-layout-effect.mjs';
 import { FileAttachment } from './internal/Attachment.mjs';
 import { Attribution } from './internal/Attribution.mjs';
 import { Avatar } from './internal/Avatar.mjs';
@@ -52,17 +50,19 @@ function ComposerInsertMentionEditorAction({
     },
     [createMention, onClick]
   );
-  return /* @__PURE__ */ React__default.createElement(Tooltip, {
-    content: tooltipLabel ?? label
-  }, /* @__PURE__ */ React__default.createElement(Button, {
-    className: classNames("lb-composer-editor-action", className),
-    onPointerDown: preventDefault,
-    onClick: handleClick,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React__default.createElement(MentionIcon, {
-    className: "lb-button-icon"
-  })));
+  return /* @__PURE__ */ jsx(Tooltip, {
+    content: tooltipLabel ?? label,
+    children: /* @__PURE__ */ jsx(Button, {
+      className: classNames("lb-composer-editor-action", className),
+      onPointerDown: preventDefault,
+      onClick: handleClick,
+      "aria-label": label,
+      ...props,
+      children: /* @__PURE__ */ jsx(MentionIcon, {
+        className: "lb-button-icon"
+      })
+    })
+  });
 }
 function ComposerInsertEmojiEditorAction({
   label,
@@ -78,22 +78,26 @@ function ComposerInsertEmojiEditorAction({
   const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React__default.createElement(EmojiPicker, {
+  return /* @__PURE__ */ jsx(EmojiPicker, {
     onEmojiSelect: insertText,
-    onOpenChange: onPickerOpenChange
-  }, /* @__PURE__ */ React__default.createElement(Tooltip, {
-    content: tooltipLabel ?? label
-  }, /* @__PURE__ */ React__default.createElement(PopoverTrigger, {
-    asChild: true
-  }, /* @__PURE__ */ React__default.createElement(Button, {
-    className: classNames("lb-composer-editor-action", className),
-    onPointerDown: preventDefault,
-    onClick: stopPropagation,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React__default.createElement(EmojiIcon, {
-    className: "lb-button-icon"
-  })))));
+    onOpenChange: onPickerOpenChange,
+    children: /* @__PURE__ */ jsx(Tooltip, {
+      content: tooltipLabel ?? label,
+      children: /* @__PURE__ */ jsx(PopoverTrigger, {
+        asChild: true,
+        children: /* @__PURE__ */ jsx(Button, {
+          className: classNames("lb-composer-editor-action", className),
+          onPointerDown: preventDefault,
+          onClick: stopPropagation,
+          "aria-label": label,
+          ...props,
+          children: /* @__PURE__ */ jsx(EmojiIcon, {
+            className: "lb-button-icon"
+          })
+        })
+      })
+    })
+  });
 }
 function ComposerAttachFilesEditorAction({
   label,
@@ -107,105 +111,153 @@ function ComposerAttachFilesEditorAction({
   const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React__default.createElement(Tooltip, {
-    content: tooltipLabel ?? label
-  }, /* @__PURE__ */ React__default.createElement(ComposerAttachFiles, {
-    asChild: true
-  }, /* @__PURE__ */ React__default.createElement(Button, {
-    className: classNames("lb-composer-editor-action", className),
-    onPointerDown: preventDefault,
-    onClick: stopPropagation,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React__default.createElement(AttachmentIcon, {
-    className: "lb-button-icon"
-  }))));
+  return /* @__PURE__ */ jsx(Tooltip, {
+    content: tooltipLabel ?? label,
+    children: /* @__PURE__ */ jsx(ComposerAttachFiles, {
+      asChild: true,
+      children: /* @__PURE__ */ jsx(Button, {
+        className: classNames("lb-composer-editor-action", className),
+        onPointerDown: preventDefault,
+        onClick: stopPropagation,
+        "aria-label": label,
+        ...props,
+        children: /* @__PURE__ */ jsx(AttachmentIcon, {
+          className: "lb-button-icon"
+        })
+      })
+    })
+  });
 }
 function ComposerMention({ userId }) {
-  return /* @__PURE__ */ React__default.createElement(ComposerMention$1, {
-    className: "lb-composer-mention"
-  }, MENTION_CHARACTER, /* @__PURE__ */ React__default.createElement(User, {
-    userId
-  }));
+  return /* @__PURE__ */ jsxs(ComposerMention$1, {
+    className: "lb-composer-mention",
+    children: [
+      MENTION_CHARACTER,
+      /* @__PURE__ */ jsx(User, {
+        userId
+      })
+    ]
+  });
 }
 function ComposerMentionSuggestions({
   userIds
 }) {
-  return userIds.length > 0 ? /* @__PURE__ */ React__default.createElement(ComposerSuggestions, {
-    className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions"
-  }, /* @__PURE__ */ React__default.createElement(ComposerSuggestionsList, {
-    className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list"
-  }, userIds.map((userId) => /* @__PURE__ */ React__default.createElement(ComposerSuggestionsListItem, {
-    key: userId,
-    className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
-    value: userId
-  }, /* @__PURE__ */ React__default.createElement(Avatar, {
-    userId,
-    className: "lb-composer-mention-suggestion-avatar"
-  }), /* @__PURE__ */ React__default.createElement(User, {
-    userId,
-    className: "lb-composer-mention-suggestion-user"
-  }))))) : null;
+  return userIds.length > 0 ? /* @__PURE__ */ jsx(ComposerSuggestions, {
+    className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions",
+    children: /* @__PURE__ */ jsx(ComposerSuggestionsList, {
+      className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list",
+      children: userIds.map((userId) => /* @__PURE__ */ jsxs(ComposerSuggestionsListItem, {
+        className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
+        value: userId,
+        children: [
+          /* @__PURE__ */ jsx(Avatar, {
+            userId,
+            className: "lb-composer-mention-suggestion-avatar"
+          }),
+          /* @__PURE__ */ jsx(User, {
+            userId,
+            className: "lb-composer-mention-suggestion-user"
+          })
+        ]
+      }, userId))
+    })
+  }) : null;
 }
 function MarkToggle({ mark, shortcut, children, ...props }) {
   const $ = useOverrides();
   const label = useMemo(() => {
     return $.COMPOSER_TOGGLE_MARK(mark);
   }, [$, mark]);
-  return /* @__PURE__ */ React__default.createElement(ShortcutTooltip, {
+  return /* @__PURE__ */ jsx(ShortcutTooltip, {
     content: label,
     shortcut,
-    sideOffset: FLOATING_ELEMENT_SIDE_OFFSET + 2
-  }, /* @__PURE__ */ React__default.createElement(ComposerMarkToggle, {
-    mark,
-    asChild: true,
-    ...props
-  }, /* @__PURE__ */ React__default.createElement(Button, {
-    "aria-label": label,
-    variant: "toggle"
-  }, children)));
+    sideOffset: FLOATING_ELEMENT_SIDE_OFFSET + 2,
+    children: /* @__PURE__ */ jsx(ComposerMarkToggle, {
+      mark,
+      asChild: true,
+      ...props,
+      children: /* @__PURE__ */ jsx(Button, {
+        "aria-label": label,
+        variant: "toggle",
+        children
+      })
+    })
+  });
 }
 const markToggles = {
-  bold: () => /* @__PURE__ */ React__default.createElement(MarkToggle, {
+  bold: () => /* @__PURE__ */ jsx(MarkToggle, {
     mark: "bold",
-    shortcut: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React__default.createElement("span", null, "B"))
-  }, /* @__PURE__ */ React__default.createElement(BoldIcon, null)),
-  italic: () => /* @__PURE__ */ React__default.createElement(MarkToggle, {
+    shortcut: /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsx("span", {
+          children: "B"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsx(BoldIcon, {})
+  }),
+  italic: () => /* @__PURE__ */ jsx(MarkToggle, {
     mark: "italic",
-    shortcut: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React__default.createElement("span", null, "I"))
-  }, /* @__PURE__ */ React__default.createElement(ItalicIcon, null)),
-  strikethrough: () => /* @__PURE__ */ React__default.createElement(MarkToggle, {
+    shortcut: /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsx("span", {
+          children: "I"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsx(ItalicIcon, {})
+  }),
+  strikethrough: () => /* @__PURE__ */ jsx(MarkToggle, {
     mark: "strikethrough",
-    shortcut: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React__default.createElement(ShortcutTooltipKey, {
-      name: "shift"
-    }), /* @__PURE__ */ React__default.createElement("span", null, "S"))
-  }, /* @__PURE__ */ React__default.createElement(StrikethroughIcon, null)),
-  code: () => /* @__PURE__ */ React__default.createElement(MarkToggle, {
+    shortcut: /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsx(ShortcutTooltipKey, {
+          name: "shift"
+        }),
+        /* @__PURE__ */ jsx("span", {
+          children: "S"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsx(StrikethroughIcon, {})
+  }),
+  code: () => /* @__PURE__ */ jsx(MarkToggle, {
     mark: "code",
-    shortcut: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React__default.createElement("span", null, "E"))
-  }, /* @__PURE__ */ React__default.createElement(CodeIcon, null))
+    shortcut: /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsx("span", {
+          children: "E"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsx(CodeIcon, {})
+  })
 };
-const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ React__default.createElement(Toggle, {
-  key: mark
-}));
+const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ jsx(Toggle, {}, mark));
 function ComposerFloatingToolbar() {
-  return /* @__PURE__ */ React__default.createElement(ComposerFloatingToolbar$1, {
-    className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar"
-  }, markTogglesList);
+  return /* @__PURE__ */ jsx(ComposerFloatingToolbar$1, {
+    className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar",
+    children: markTogglesList
+  });
 }
 function ComposerLink({ href, children }) {
-  return /* @__PURE__ */ React__default.createElement(ComposerLink$1, {
+  return /* @__PURE__ */ jsx(ComposerLink$1, {
     href,
-    className: "lb-composer-link"
-  }, children);
+    className: "lb-composer-link",
+    children
+  });
 }
 function ComposerFileAttachment({
   attachment,
@@ -218,7 +270,7 @@ function ComposerFileAttachment({
   const handleDeleteClick = useCallback(() => {
     removeAttachment(attachment.id);
   }, [attachment.id, removeAttachment]);
-  return /* @__PURE__ */ React__default.createElement(FileAttachment, {
+  return /* @__PURE__ */ jsx(FileAttachment, {
     className: classNames("lb-composer-attachment", className),
     ...props,
     attachment,
@@ -237,18 +289,19 @@ function ComposerAttachments({
   if (attachments.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: classNames("lb-composer-attachments", className),
-    ...props
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-attachments"
-  }, attachments.map((attachment) => {
-    return /* @__PURE__ */ React__default.createElement(ComposerFileAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides
-    });
-  })));
+    ...props,
+    children: /* @__PURE__ */ jsx("div", {
+      className: "lb-attachments",
+      children: attachments.map((attachment) => {
+        return /* @__PURE__ */ jsx(ComposerFileAttachment, {
+          attachment,
+          overrides
+        }, attachment.id);
+      })
+    })
+  });
 }
 const editorRequiredComponents = {
   Mention: ComposerMention,
@@ -291,54 +344,81 @@ function ComposerEditorContainer({
   const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: "lb-composer-editor-container",
-    ...dropAreaProps
-  }, /* @__PURE__ */ React__default.createElement(ComposerEditor, {
-    className: "lb-composer-editor",
-    onClick: onEditorClick,
-    placeholder: $.COMPOSER_PLACEHOLDER,
-    defaultValue,
-    autoFocus,
-    components,
-    disabled,
-    dir: $.dir
-  }), showAttachments && /* @__PURE__ */ React__default.createElement(ComposerAttachments, {
-    overrides
-  }), (!isCollapsed || isDraggingOver) && /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-footer"
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-editor-actions"
-  }, hasResolveMentionSuggestions && /* @__PURE__ */ React__default.createElement(ComposerInsertMentionEditorAction, {
-    label: $.COMPOSER_INSERT_MENTION,
-    disabled
-  }), /* @__PURE__ */ React__default.createElement(ComposerInsertEmojiEditorAction, {
-    label: $.COMPOSER_INSERT_EMOJI,
-    onPickerOpenChange: onEmojiPickerOpenChange,
-    disabled
-  }), showAttachments && /* @__PURE__ */ React__default.createElement(ComposerAttachFilesEditorAction, {
-    label: $.COMPOSER_ATTACH_FILES,
-    disabled
-  })), showAttribution && /* @__PURE__ */ React__default.createElement(Attribution, null), /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-actions"
-  }, actions ?? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ShortcutTooltip, {
-    content: $.COMPOSER_SEND,
-    shortcut: /* @__PURE__ */ React__default.createElement(ShortcutTooltipKey, {
-      name: "enter"
-    })
-  }, /* @__PURE__ */ React__default.createElement(ComposerSubmit, {
-    asChild: true
-  }, /* @__PURE__ */ React__default.createElement(Button, {
-    onPointerDown: preventDefault,
-    onClick: stopPropagation,
-    className: "lb-composer-action",
-    variant: "primary",
-    "aria-label": $.COMPOSER_SEND
-  }, /* @__PURE__ */ React__default.createElement(SendIcon, null))))))), showAttachments && isDraggingOver && /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-attachments-drop-area"
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-composer-attachments-drop-area-label"
-  }, /* @__PURE__ */ React__default.createElement(AttachmentIcon, null), $.COMPOSER_ATTACH_FILES)));
+    ...dropAreaProps,
+    children: [
+      /* @__PURE__ */ jsx(ComposerEditor, {
+        className: "lb-composer-editor",
+        onClick: onEditorClick,
+        placeholder: $.COMPOSER_PLACEHOLDER,
+        defaultValue,
+        autoFocus,
+        components,
+        disabled,
+        dir: $.dir
+      }),
+      showAttachments && /* @__PURE__ */ jsx(ComposerAttachments, {
+        overrides
+      }),
+      (!isCollapsed || isDraggingOver) && /* @__PURE__ */ jsxs("div", {
+        className: "lb-composer-footer",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "lb-composer-editor-actions",
+            children: [
+              hasResolveMentionSuggestions && /* @__PURE__ */ jsx(ComposerInsertMentionEditorAction, {
+                label: $.COMPOSER_INSERT_MENTION,
+                disabled
+              }),
+              /* @__PURE__ */ jsx(ComposerInsertEmojiEditorAction, {
+                label: $.COMPOSER_INSERT_EMOJI,
+                onPickerOpenChange: onEmojiPickerOpenChange,
+                disabled
+              }),
+              showAttachments && /* @__PURE__ */ jsx(ComposerAttachFilesEditorAction, {
+                label: $.COMPOSER_ATTACH_FILES,
+                disabled
+              })
+            ]
+          }),
+          showAttribution && /* @__PURE__ */ jsx(Attribution, {}),
+          /* @__PURE__ */ jsx("div", {
+            className: "lb-composer-actions",
+            children: actions ?? /* @__PURE__ */ jsx(Fragment, {
+              children: /* @__PURE__ */ jsx(ShortcutTooltip, {
+                content: $.COMPOSER_SEND,
+                shortcut: /* @__PURE__ */ jsx(ShortcutTooltipKey, {
+                  name: "enter"
+                }),
+                children: /* @__PURE__ */ jsx(ComposerSubmit, {
+                  asChild: true,
+                  children: /* @__PURE__ */ jsx(Button, {
+                    onPointerDown: preventDefault,
+                    onClick: stopPropagation,
+                    className: "lb-composer-action",
+                    variant: "primary",
+                    "aria-label": $.COMPOSER_SEND,
+                    children: /* @__PURE__ */ jsx(SendIcon, {})
+                  })
+                })
+              })
+            })
+          })
+        ]
+      }),
+      showAttachments && isDraggingOver && /* @__PURE__ */ jsx("div", {
+        className: "lb-composer-attachments-drop-area",
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "lb-composer-attachments-drop-area-label",
+          children: [
+            /* @__PURE__ */ jsx(AttachmentIcon, {}),
+            $.COMPOSER_ATTACH_FILES
+          ]
+        })
+      })
+    ]
+  });
 }
 createContext(null);
 const Composer = forwardRef(
@@ -481,38 +561,41 @@ const Composer = forwardRef(
         threadId
       ]
     );
-    return /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(ComposerForm, {
-      onComposerSubmit: handleCommentSubmit,
-      className: classNames(
-        "lb-root lb-composer lb-composer-form",
-        className
-      ),
-      dir: $.dir,
-      ...props,
-      ref: forwardedRef,
-      "data-collapsed": isCollapsed ? "" : void 0,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      disabled: disabled || !canComment,
-      defaultAttachments,
-      pasteFilesAsAttachments: showAttachments,
-      preventUnsavedChanges: preventUnsavedComposerChanges,
-      roomId
-    }, /* @__PURE__ */ React__default.createElement(ComposerEditorContainer, {
-      defaultValue,
-      actions,
-      overrides,
-      isCollapsed,
-      showAttachments,
-      showAttribution,
-      showFormattingControls,
-      hasResolveMentionSuggestions,
-      onEmptyChange: setEmptyRef,
-      onEmojiPickerOpenChange: setEmojiPickerOpenRef,
-      onEditorClick: handleEditorClick,
-      autoFocus,
-      disabled
-    })));
+    return /* @__PURE__ */ jsx(TooltipProvider, {
+      children: /* @__PURE__ */ jsx(ComposerForm, {
+        onComposerSubmit: handleCommentSubmit,
+        className: 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__ */ jsx(ComposerEditorContainer, {
+          defaultValue,
+          actions,
+          overrides,
+          isCollapsed,
+          showAttachments,
+          showAttribution,
+          showFormattingControls,
+          hasResolveMentionSuggestions,
+          onEmptyChange: setEmptyRef,
+          onEmojiPickerOpenChange: setEmojiPickerOpenRef,
+          onEditorClick: handleEditorClick,
+          autoFocus,
+          disabled
+        })
+      })
+    });
   }
 );