@liveblocks/react-ui - npm Package Compare versions

Comparing version 2.12.1-test1 to 2.12.1

dist/components/Comment.js

 'use client';
 'use strict';
 
-var react = require('@liveblocks/react');
+var _private = require('@liveblocks/react/_private');
 var TogglePrimitive = require('@radix-ui/react-toggle');
@@ -114,4 +114,4 @@ var React = require('react');
 const CommentReaction = React.forwardRef(({ comment, reaction, overrides: overrides$1, disabled, ...props }, forwardedRef) => {
-  const addReaction = react.useAddReaction();
-  const removeReaction = react.useRemoveReaction();
+  const addReaction = _private.useAddRoomCommentReaction(comment.roomId);
+  const removeReaction = _private.useRemoveRoomCommentReaction(comment.roomId);
   const currentId = shared.useCurrentUserId();
@@ -202,2 +202,3 @@ const isActive = React.useMemo(() => {
   onAttachmentClick,
+  roomId,
   className,
@@ -207,3 +208,3 @@ overrides,
 }) {
-  const { url } = react.useAttachmentUrl(attachment.id);
+  const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
   const handleClick = React.useCallback(
@@ -228,3 +229,4 @@ (event) => {
     overrides,
-    onClick: url ? handleClick : void 0
+    onClick: url ? handleClick : void 0,
+    roomId
   });
@@ -235,2 +237,3 @@ }
   onAttachmentClick,
+  roomId,
   className,
@@ -240,3 +243,3 @@ overrides,
 }) {
-  const { url } = react.useAttachmentUrl(attachment.id);
+  const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
   const handleClick = React.useCallback(
@@ -261,3 +264,4 @@ (event) => {
     overrides,
-    onClick: url ? handleClick : void 0
+    onClick: url ? handleClick : void 0,
+    roomId
   });
@@ -277,5 +281,6 @@ }
   threadId,
+  roomId,
   commentRef
 }) {
-  const markThreadAsRead = react.useMarkThreadAsRead();
+  const markThreadAsRead = _private.useMarkRoomThreadAsRead(roomId);
   const isWindowFocused = useWindowFocus.useWindowFocus();
@@ -313,10 +318,9 @@ useVisible.useVisibleCallback(
   }, forwardedRef) => {
-    const isInRoom = Boolean(React.useContext(react.RoomContext));
     const ref = React.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
     const currentUserId = shared.useCurrentUserId();
-    const deleteComment = react.useDeleteComment();
-    const editComment = react.useEditComment();
-    const addReaction = react.useAddReaction();
-    const removeReaction = react.useRemoveReaction();
+    const deleteComment = _private.useDeleteRoomComment(comment.roomId);
+    const editComment = _private.useEditRoomComment(comment.roomId);
+    const addReaction = _private.useAddRoomCommentReaction(comment.roomId);
+    const removeReaction = _private.useRemoveRoomCommentReaction(comment.roomId);
     const $ = overrides.useOverrides(overrides$1);
@@ -413,5 +417,6 @@ const [isEditing, setEditing] = React.useState(false);
     }
-    return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, isInRoom && autoMarkReadThreadId && /* @__PURE__ */ React.createElement(AutoMarkReadThreadIdHandler, {
+    return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, autoMarkReadThreadId && /* @__PURE__ */ React.createElement(AutoMarkReadThreadIdHandler, {
       commentRef: ref,
-      threadId: autoMarkReadThreadId
+      threadId: autoMarkReadThreadId,
+      roomId: comment.roomId
     }), /* @__PURE__ */ React.createElement("div", {
@@ -533,3 +538,4 @@ id: comment.id,
         COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
-      }
+      },
+      roomId: comment.roomId
     }) : comment.body ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(index$1.Body, {
@@ -553,3 +559,4 @@ className: "lb-comment-body",
       overrides: overrides$1,
-      onAttachmentClick
+      onAttachmentClick,
+      roomId: comment.roomId
     }))) : null, fileAttachments.length > 0 ? /* @__PURE__ */ React.createElement("div", {
@@ -561,3 +568,4 @@ className: "lb-attachments"
       overrides: overrides$1,
-      onAttachmentClick
+      onAttachmentClick,
+      roomId: comment.roomId
     }))) : null) : null, showReactions && comment.reactions.length > 0 && /* @__PURE__ */ React.createElement("div", {
@@ -564,0 +572,0 @@ className: "lb-comment-reactions"

dist/components/Composer.js

@@ -6,3 +6,5 @@ 'use client';
 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 config = require('../config.js');
@@ -160,2 +162,3 @@ var Attachment = require('../icons/Attachment.js');
   const { removeAttachment } = contexts.useComposer();
+  const { roomId } = contexts.useComposerEditorContext();
   const handleDeleteClick = React.useCallback(() => {
@@ -170,3 +173,4 @@ removeAttachment(attachment.id);
     preventFocusOnDelete: true,
-    overrides
+    overrides,
+    roomId
   });
@@ -279,2 +283,3 @@ }
 }
+React.createContext(null);
 const Composer = React.forwardRef(
@@ -300,8 +305,16 @@ ({
     showAttribution,
+    roomId: _roomId,
     ...props
   }, forwardedRef) => {
     const client = react.useClient();
-    const createThread = react.useCreateThread();
-    const createComment = react.useCreateComment();
-    const editComment = react.useEditComment();
+    const room = _private.useRoomOrNull();
+    const roomId = _roomId !== void 0 ? _roomId : room?.id;
+    if (roomId === void 0) {
+      throw new Error(
+        "Composer must be a descendant of RoomProvider component"
+      );
+    }
+    const createThread = _private.useCreateRoomThread(roomId);
+    const createComment = _private.useCreateRoomComment(roomId);
+    const editComment = _private.useEditRoomComment(roomId);
     const { preventUnsavedComposerChanges } = config.useLiveblocksUIConfig();
@@ -317,2 +330,19 @@ const hasResolveMentionSuggestions = client[core.kInternal].resolveMentionSuggestions !== void 0;
     );
+    const canCommentFallback = index_js.useSyncExternalStore(
+      React.useCallback(
+        (callback) => {
+          if (room === null)
+            return () => {
+            };
+          return room.events.self.subscribeOnce(callback);
+        },
+        [room]
+      ),
+      React.useCallback(() => {
+        return room?.getSelf()?.canComment ?? true;
+      }, [room]),
+      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) => {
@@ -330,7 +360,7 @@ isEmptyRef.current = isEmpty;
         }
-        if (isEmptyRef.current) {
+        if (isEmptyRef.current && canComment) {
           onCollapsedChange?.(false);
         }
       },
-      [onCollapsedChange, onFocus]
+      [onCollapsedChange, onFocus, canComment]
     );
@@ -355,7 +385,7 @@ const handleBlur = React.useCallback(
         event.stopPropagation();
-        if (isEmptyRef.current) {
+        if (isEmptyRef.current && canComment) {
           onCollapsedChange?.(false);
         }
       },
-      [onCollapsedChange]
+      [onCollapsedChange, canComment]
     );
@@ -411,6 +441,7 @@ const handleCommentSubmit = React.useCallback(
       onBlur: handleBlur,
-      disabled,
+      disabled: disabled || !canComment,
       defaultAttachments,
       pasteFilesAsAttachments: showAttachments,
-      preventUnsavedChanges: preventUnsavedComposerChanges
+      preventUnsavedChanges: preventUnsavedComposerChanges,
+      roomId
     }, /* @__PURE__ */ React.createElement(ComposerEditorContainer, {
@@ -417,0 +448,0 @@ defaultValue,

dist/components/internal/Attachment.js

 'use client';
 'use strict';
 
-var react = require('@liveblocks/react');
+var _private = require('@liveblocks/react/_private');
 var React = require('react');
@@ -80,5 +80,7 @@ var Cross = require('../../icons/Cross.js');
 function AttachmentImagePreview({
-  attachment
+  attachment,
+  markPreviewAsUnsupported,
+  roomId
 }) {
-  const { url } = react.useAttachmentUrl(attachment.id);
+  const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
   const [isLoaded, setLoaded] = React.useState(false);
@@ -94,9 +96,12 @@ const handleLoad = React.useCallback(() => {
     loading: "lazy",
-    onLoad: handleLoad
+    onLoad: handleLoad,
+    onError: markPreviewAsUnsupported
   })) : null);
 }
 function AttachmentVideoPreview({
-  attachment
+  attachment,
+  markPreviewAsUnsupported,
+  roomId
 }) {
-  const { url } = react.useAttachmentUrl(attachment.id);
+  const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
   const [isLoaded, setLoaded] = React.useState(false);
@@ -111,3 +116,4 @@ const handleLoad = React.useCallback(() => {
     src: url,
-    onLoadedData: handleLoad
+    onLoadedData: handleLoad,
+    onError: markPreviewAsUnsupported
   })) : null);
@@ -117,10 +123,16 @@ }
   attachment,
-  allowMediaPreview = true
+  allowMediaPreview = true,
+  roomId
 }) {
-  const isInsideRoom = react.useIsInsideRoom();
+  const [isUnsupportedPreview, setUnsupportedPreview] = React.useState(false);
   const isUploaded = attachment.type === "attachment" || attachment.status === "uploaded";
-  if (allowMediaPreview && isUploaded && isInsideRoom && attachment.size <= MAX_DISPLAYED_MEDIA_SIZE) {
+  function markPreviewAsUnsupported() {
+    setUnsupportedPreview(true);
+  }
+  if (!isUnsupportedPreview && allowMediaPreview && isUploaded && attachment.size <= MAX_DISPLAYED_MEDIA_SIZE) {
     if (attachment.mimeType.startsWith("image/")) {
       return /* @__PURE__ */ React.createElement(AttachmentImagePreview, {
-        attachment
+        attachment,
+        markPreviewAsUnsupported,
+        roomId
       });
@@ -130,3 +142,5 @@ }
       return /* @__PURE__ */ React.createElement(AttachmentVideoPreview, {
-        attachment
+        attachment,
+        markPreviewAsUnsupported,
+        roomId
       });
@@ -214,2 +228,3 @@ }
   allowMediaPreview = true,
+  roomId,
   className,
@@ -241,3 +256,4 @@ onKeyDown,
     attachment,
-    allowMediaPreview
+    allowMediaPreview,
+    roomId
   })), /* @__PURE__ */ React.createElement("div", {
@@ -267,2 +283,3 @@ className: "lb-attachment-details"
   allowMediaPreview = true,
+  roomId,
   className,
@@ -294,3 +311,4 @@ onKeyDown,
     attachment,
-    allowMediaPreview
+    allowMediaPreview,
+    roomId
   })), /* @__PURE__ */ React.createElement("div", {
@@ -297,0 +315,0 @@ className: "lb-attachment-details"

dist/components/internal/InboxNotificationThread.js

@@ -56,3 +56,4 @@ 'use strict';
     attachment,
-    overrides: overrides$1
+    overrides: overrides$1,
+    roomId: comment.roomId
   })))) : null) : /* @__PURE__ */ React.createElement("div", {
@@ -59,0 +60,0 @@ className: "lb-comment-body"

dist/components/Thread.js

@@ -5,2 +5,3 @@ 'use client';
 var react = require('@liveblocks/react');
+var _private = require('@liveblocks/react/_private');
 var TogglePrimitive = require('@radix-ui/react-toggle');
@@ -61,4 +62,4 @@ var React = require('react');
   }, forwardedRef) => {
-    const markThreadAsResolved = react.useMarkThreadAsResolved();
-    const markThreadAsUnresolved = react.useMarkThreadAsUnresolved();
+    const markThreadAsResolved = _private.useMarkRoomThreadAsResolved(thread.roomId);
+    const markThreadAsUnresolved = _private.useMarkRoomThreadAsUnresolved(thread.roomId);
     const $ = overrides.useOverrides(overrides$1);
@@ -200,3 +201,4 @@ const firstCommentIndex = React.useMemo(() => {
         COMPOSER_SEND: $.THREAD_COMPOSER_SEND
-      }
+      },
+      roomId: thread.roomId
     })));
@@ -203,0 +205,0 @@ }

dist/primitives/Composer/index.js

@@ -5,3 +5,3 @@ 'use client';
 var reactDom = require('@floating-ui/react-dom');
-var react = require('@liveblocks/react');
+var core = require('@liveblocks/core');
 var _private = require('@liveblocks/react/_private');
@@ -422,3 +422,3 @@ var reactSlot = require('@radix-ui/react-slot');
   }, forwardedRef) => {
-    const { editor, validate, setFocused } = contexts.useComposerEditorContext();
+    const { editor, validate, setFocused, roomId } = contexts.useComposerEditorContext();
     const {
@@ -442,3 +442,6 @@ submit,
     const [mentionDraft, setMentionDraft] = React.useState();
-    const mentionSuggestions = _private.useMentionSuggestions(mentionDraft?.text);
+    const mentionSuggestions = _private.useMentionSuggestions(
+      roomId,
+      mentionDraft?.text
+    );
     const [
@@ -663,2 +666,13 @@ selectedMentionSuggestionIndex,
 const MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024;
+function prepareAttachment(file) {
+  return {
+    type: "localAttachment",
+    status: "idle",
+    id: core.createCommentAttachmentId(),
+    name: file.name,
+    size: file.size,
+    mimeType: file.type,
+    file
+  };
+}
 const ComposerForm = React.forwardRef(
@@ -674,9 +688,14 @@ ({
     asChild,
+    roomId: _roomId,
     ...props
   }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "form";
-    const room = react.useRoom();
     const [isEmpty$1, setEmpty] = React.useState(true);
     const [isSubmitting, setSubmitting] = React.useState(false);
     const [isFocused, setFocused] = React.useState(false);
+    const room = _private.useRoomOrNull();
+    const roomId = _roomId !== void 0 ? _roomId : room?.id;
+    if (roomId === void 0) {
+      throw new Error("Composer.Form must be a descendant of RoomProvider.");
+    }
     const maxAttachments = MAX_ATTACHMENTS;
@@ -691,3 +710,4 @@ const maxAttachmentSize = MAX_ATTACHMENT_SIZE;
     } = utils.useComposerAttachmentsManager(defaultAttachments, {
-      maxFileSize: maxAttachmentSize
+      maxFileSize: maxAttachmentSize,
+      roomId
     });
@@ -697,6 +717,4 @@ const numberOfAttachments = attachments.length;
     const isDisabled = React.useMemo(() => {
-      const self = room.getSelf();
-      const canComment = self?.canComment ?? true;
-      return isSubmitting || disabled || !canComment;
-    }, [isSubmitting, disabled, room]);
+      return isSubmitting || disabled === true;
+    }, [isSubmitting, disabled]);
     const canSubmit = React.useMemo(() => {
@@ -725,6 +743,6 @@ return !isEmpty$1 && !isUploadingAttachments;
         files.splice(numberOfAcceptedFiles);
-        const attachments2 = files.map((file) => room.prepareAttachment(file));
+        const attachments2 = files.map((file) => prepareAttachment(file));
         addAttachments(attachments2);
       },
-      [addAttachments, maxAttachments, numberOfAttachments, room]
+      [addAttachments, maxAttachments, numberOfAttachments]
     );
@@ -882,3 +900,4 @@ const createAttachmentsRef = React.useRef(createAttachments);
         validate,
-        setFocused
+        setFocused,
+        roomId
       }
@@ -885,0 +904,0 @@ }, /* @__PURE__ */ React.createElement(contexts.ComposerAttachmentsContext.Provider, {

dist/primitives/Composer/utils.js

@@ -209,3 +209,3 @@ 'use strict';
 }
-function createComposerAttachmentsManager(room, options) {
+function createComposerAttachmentsManager(client, roomId, options) {
   const attachments = /* @__PURE__ */ new Map();
@@ -222,3 +222,5 @@ const abortControllers = /* @__PURE__ */ new Map();
     abortControllers.set(attachment.id, abortController);
-    room.uploadAttachment(attachment, {
+    client[core.kInternal].httpClient.uploadAttachment({
+      roomId,
+      attachment,
       signal: abortController.signal
@@ -307,6 +309,6 @@ }).then(() => {
 function useComposerAttachmentsManager(defaultAttachments, options) {
-  const room = react.useRoom();
+  const client = react.useClient();
   const frozenDefaultAttachments = useInitial.useInitial(defaultAttachments);
   const frozenAttachmentsManager = useInitial.useInitial(
-    () => createComposerAttachmentsManager(room, options)
+    () => createComposerAttachmentsManager(client, options.roomId, options)
   );
@@ -313,0 +315,0 @@ React.useEffect(() => {

dist/shared.js

@@ -5,9 +5,6 @@ 'use strict';
 var react = require('@liveblocks/react');
-var React = require('react');
 var index_js = require('use-sync-external-store/shim/index.js');
 
-function useCurrentUserIdFromRoom() {
-  return react.useSelf((user) => typeof user.id === "string" ? user.id : null);
-}
-function useCurrentUserIdFromClient_withClient(client) {
+function useCurrentUserId() {
+  const client = react.useClient();
   const currentUserIdStore = client[core.kInternal].currentUserIdStore;
@@ -18,19 +15,6 @@ return index_js.useSyncExternalStore(
     currentUserIdStore.get
-  );
+  ) ?? null;
 }
-function useCurrentUserId() {
-  const client = React.useContext(react.ClientContext);
-  const room = React.useContext(react.RoomContext);
-  if (room !== null) {
-    return useCurrentUserIdFromRoom();
-  } else if (client !== null) {
-    return useCurrentUserIdFromClient_withClient(client);
-  } else {
-    core.raise(
-      "LiveblocksProvider or RoomProvider are missing from the React tree."
-    );
-  }
-}
 
 exports.useCurrentUserId = useCurrentUserId;
 //# sourceMappingURL=shared.js.map

dist/version.js

 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.12.1-test1";
+const PKG_VERSION = "2.12.1";
 const PKG_FORMAT = "cjs";
@@ -6,0 +6,0 @@

package.json

 {
   "name": "@liveblocks/react-ui",
-  "version": "2.12.1-test1",
+  "version": "2.12.1",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
@@ -78,5 +78,5 @@ "license": "Apache-2.0",
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.12.1-test1",
-    "@liveblocks/core": "2.12.1-test1",
-    "@liveblocks/react": "2.12.1-test1",
+    "@liveblocks/client": "2.12.1",
+    "@liveblocks/core": "2.12.1",
+    "@liveblocks/react": "2.12.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
@@ -83,0 +83,0 @@ "@radix-ui/react-popover": "^1.1.2",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1637568

increased by0.6%

Lines of code

17604

increased by0.74%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Added@liveblocks/client@2.12.1(transitive)

• + Added@liveblocks/core@2.12.1(transitive)

• + Added@liveblocks/react@2.12.1(transitive)

• - Removed@liveblocks/client@2.12.1-test1(transitive)

• - Removed@liveblocks/core@2.12.1-test1(transitive)

• - Removed@liveblocks/react@2.12.1-test1(transitive)

• Updated@liveblocks/client@2.12.1

• Updated@liveblocks/core@2.12.1

• Updated@liveblocks/react@2.12.1