elseware-ui 2.31.4 → 2.31.6

package/dist/index.mjs

@@ -22,7 +22,7 @@ import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { MdUpload, MdOutlineDone, MdOutlineRemoveCircleOutline } from 'react-icons/md';
 import '@mdxeditor/editor/style.css';
 import { MDXEditor, headingsPlugin, linkPlugin, listsPlugin, imagePlugin, tablePlugin, linkDialogPlugin, thematicBreakPlugin, quotePlugin, toolbarPlugin, UndoRedo, Separator, BlockTypeSelect, BoldItalicUnderlineToggles, StrikeThroughSupSubToggles, ListsToggle, CreateLink, InsertImage, InsertTable, InsertThematicBreak, markdownShortcutPlugin, frontmatterPlugin, codeBlockPlugin, codeMirrorPlugin } from '@mdxeditor/editor';
-import { BiDotsVerticalRounded, BiEdit, BiTrash, BiFlag, BiSolidLike, BiLike, BiSolidDislike, BiDislike, BiChevronDown, BiChevronUp } from 'react-icons/bi';
+import { BiChevronDown, BiChevronUp, BiSolidLike, BiLike, BiSolidDislike, BiDislike, BiDotsVerticalRounded, BiEdit, BiTrash, BiFlag } from 'react-icons/bi';
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -17522,15 +17522,16 @@ function CommentComposer({
 }
 var CommentComposer_default = CommentComposer;
 function CommentActions({
-  likes = 0,
-  dislikes = 0,
-  liked = false,
-  disliked = false,
-  canReply = true,
+  comment,
   onLike,
   onDislike,
   onReply
 }) {
+  const likes = comment.likes ?? 0;
+  const dislikes = comment.dislikes ?? 0;
+  const liked = comment.liked ?? false;
+  const disliked = comment.disliked ?? false;
+  const canReply = comment.permissions?.canReply ?? true;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -17583,14 +17584,8 @@ function CommentActions({
   );
 }
 var CommentActions_default = CommentActions;
-function CommentContent({ content }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "\n        text-sm\n        leading-relaxed\n        whitespace-pre-wrap\n        break-words\n        text-gray-700\n        dark:text-gray-300\n      ",
-      children: content
-    }
-  );
+function CommentContent({ comment }) {
+  return /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words text-sm text-gray-700 dark:text-gray-300", children: comment.content });
 }
 var CommentContent_default = CommentContent;
 
@@ -17629,31 +17624,29 @@ function formatCommentDate(date) {
   }
   return "Just now";
 }
-function CommentHeader({
-  avatar,
-  username,
-  firstName,
-  lastName,
-  createdAt,
-  edited
-}) {
-  const displayName = firstName || lastName ? `${firstName ?? ""} ${lastName ?? ""}`.trim() : username;
+function CommentHeader({ comment }) {
+  const author = comment.author;
+  const displayName = author?.firstName || author?.lastName ? `${author?.firstName ?? ""} ${author?.lastName ?? ""}`.trim() : author?.username ?? "Unknown";
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-    /* @__PURE__ */ jsx(Avatar, { src: avatar, size: "sm" }),
+    /* @__PURE__ */ jsx(Avatar, { src: author?.avatar, size: "sm" }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap min-w-0", children: [
       /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100", children: displayName }),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
-        "@",
-        username
+      author?.username && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+          "@",
+          author.username
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
-      edited && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "(edited)" })
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(comment.createdAt) }),
+      comment.edited && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "(edited)" })
     ] })
   ] });
 }
 var CommentHeader_default = CommentHeader;
 function CommentMenu({
+  open,
+  setOpen,
   canEdit,
   canDelete,
   canReport,
@@ -17661,7 +17654,6 @@ function CommentMenu({
   onDelete,
   onReport
 }) {
-  const [open, setOpen] = useState(false);
   const ref = useRef(null);
   useEffect(() => {
     function handleOutsideClick(event) {
@@ -17671,7 +17663,7 @@ function CommentMenu({
     }
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, []);
+  }, [setOpen]);
   const hasActions = canEdit || canDelete || canReport;
   if (!hasActions) {
     return null;
@@ -17681,7 +17673,7 @@ function CommentMenu({
       "button",
       {
         type: "button",
-        onClick: () => setOpen((prev) => !prev),
+        onClick: () => setOpen(!open),
         className: "\n          text-gray-500\n          hover:text-gray-900\n          dark:hover:text-gray-100\n          transition-colors\n        ",
         children: /* @__PURE__ */ jsx(BiDotsVerticalRounded, { size: 18 })
       }
@@ -17790,6 +17782,7 @@ var COMMENT_INDENTATION = 24;
 function CommentItem({
   comment,
   depth = 0,
+  components,
   onLike,
   onDislike,
   onReply,
@@ -17800,10 +17793,19 @@ function CommentItem({
   const [collapsed, setCollapsed] = useState(false);
   const [isReplying, setIsReplying] = useState(false);
   const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
+  const {
+    Header: HeaderComponent = CommentHeader_default,
+    Content: ContentComponent = CommentContent_default,
+    Actions: ActionsComponent = CommentActions_default,
+    Menu: MenuComponent = CommentMenu_default,
+    ReplyComposer: ReplyComposerComponent = ReplyComposer_default,
+    RepliesToggle: RepliesToggleComponent = CommentRepliesToggle_default
+  } = components ?? {};
   async function handleReply(content) {
     await onReply?.(comment, content);
     setIsReplying(false);
   }
+  const [menuOpen, setMenuOpen] = useState(false);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -17814,20 +17816,13 @@ function CommentItem({
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx(HeaderComponent, { comment }),
             /* @__PURE__ */ jsx(
-              CommentHeader_default,
-              {
-                avatar: comment.author?.avatar,
-                username: comment.author?.username ?? "unknown",
-                firstName: comment.author?.firstName,
-                lastName: comment.author?.lastName,
-                createdAt: comment.createdAt,
-                edited: comment.edited
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CommentMenu_default,
+              MenuComponent,
               {
+                comment,
+                open: menuOpen,
+                setOpen: setMenuOpen,
                 canEdit: comment.permissions?.canEdit,
                 canDelete: comment.permissions?.canDelete,
                 canReport: comment.permissions?.canReport,
@@ -17837,22 +17832,18 @@ function CommentItem({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(CommentContent_default, { content: comment.content }),
+          /* @__PURE__ */ jsx(ContentComponent, { comment }),
           /* @__PURE__ */ jsx(
-            CommentActions_default,
+            ActionsComponent,
             {
-              likes: comment.likes,
-              dislikes: comment.dislikes,
-              liked: comment.liked,
-              disliked: comment.disliked,
-              canReply: comment.permissions?.canReply,
+              comment,
               onLike: () => onLike?.(comment),
               onDislike: () => onDislike?.(comment),
               onReply: () => setIsReplying((prev) => !prev)
             }
           ),
           isReplying && /* @__PURE__ */ jsx(
-            ReplyComposer_default,
+            ReplyComposerComponent,
             {
               avatar: comment.author?.avatar,
               username: comment.author?.username,
@@ -17860,7 +17851,7 @@ function CommentItem({
             }
           ),
           !!comment.replies?.length && /* @__PURE__ */ jsx(
-            CommentRepliesToggle_default,
+            RepliesToggleComponent,
             {
               collapsed,
               repliesCount: comment.replies.length,
@@ -17880,6 +17871,7 @@ function CommentItem({
               {
                 comments: comment.replies,
                 depth: depth + 1,
+                components,
                 onLike,
                 onDislike,
                 onReply,
@@ -17898,6 +17890,7 @@ var CommentItem_default = CommentItem;
 function CommentList({
   comments,
   depth = 0,
+  components,
   onLike,
   onDislike,
   onReply,
@@ -17913,6 +17906,7 @@ function CommentList({
     {
       comment,
       depth,
+      components,
       onLike,
       onDislike,
       onReply,
@@ -17981,12 +17975,14 @@ function CommentThread({
   currentUser,
   dataSource,
   loading = false,
+  components,
   onEdit,
   onDelete,
   onReport
 }) {
   const [comments, setComments] = useState([]);
   const [isLoadingComments, setIsLoadingComments] = useState(true);
+  const ComposerComponent = components?.ReplyComposer ?? CommentComposer_default;
   useEffect(() => {
     async function loadComments() {
       try {
@@ -18013,35 +18009,55 @@ function CommentThread({
     setComments((prev) => insertReply(prev, parentComment.id, reply));
   }
   async function handleLike(comment) {
-    const result = await dataSource.toggleLike(comment.id);
+    const optimistic = {
+      liked: !comment.liked,
+      disliked: false,
+      likes: comment.liked ? Math.max(comment.likes - 1, 0) : comment.likes + 1,
+      dislikes: comment.disliked ? Math.max(comment.dislikes - 1, 0) : comment.dislikes
+    };
     setComments(
       (prev) => updateComment(prev, comment.id, (item) => ({
         ...item,
-        likes: result.likes,
-        dislikes: result.dislikes,
-        liked: result.liked,
-        disliked: result.disliked
+        likes: optimistic.likes,
+        dislikes: optimistic.dislikes,
+        liked: optimistic.liked,
+        disliked: optimistic.disliked
       }))
     );
+    try {
+      await dataSource.toggleLike(comment.id);
+    } catch {
+      setComments((prev) => updateComment(prev, comment.id, () => comment));
+    }
   }
   async function handleDislike(comment) {
-    const result = await dataSource.toggleDislike(comment.id);
+    const optimistic = {
+      liked: false,
+      disliked: !comment.disliked,
+      likes: comment.liked ? Math.max(comment.likes - 1, 0) : comment.likes,
+      dislikes: comment.disliked ? Math.max(comment.dislikes - 1, 0) : comment.dislikes + 1
+    };
     setComments(
       (prev) => updateComment(prev, comment.id, (item) => ({
         ...item,
-        likes: result.likes,
-        dislikes: result.dislikes,
-        liked: result.liked,
-        disliked: result.disliked
+        likes: optimistic.likes,
+        dislikes: optimistic.dislikes,
+        liked: optimistic.liked,
+        disliked: optimistic.disliked
       }))
     );
+    try {
+      await dataSource.toggleDislike(comment.id);
+    } catch {
+      setComments((prev) => updateComment(prev, comment.id, () => comment));
+    }
   }
   if (loading || isLoadingComments) {
     return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: "Loading comments..." });
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ jsx(
-      CommentComposer_default,
+      ComposerComponent,
       {
         avatar: currentUser.avatar,
         onSubmit: handleCreateComment
@@ -18051,6 +18067,7 @@ function CommentThread({
       CommentList_default,
       {
         comments,
+        components,
         onLike: handleLike,
         onDislike: handleDislike,
         onReply: handleReply,