elseware-ui 2.31.16 → 2.32.0

package/dist/index.js

@@ -3132,7 +3132,7 @@ var ShapeSwitch = () => {
     {
       value: currentShape,
       onChange: handleChange,
-      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
+      className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        ",
       children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: shape, children: shape }, shape))
     }
   ) });
@@ -16126,7 +16126,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: "\n            text-sm\n            font-semibold\n            uppercase\n            tracking-wide\n            text-gray-900\n            dark:text-gray-100\n          ",
+        className: "\r\n            text-sm\r\n            font-semibold\r\n            uppercase\r\n            tracking-wide\r\n            text-gray-900\r\n            dark:text-gray-100\r\n          ",
         children: title
       }
     ) }),
@@ -17121,6 +17121,7 @@ var Menu = ({
             badge: item.badge,
             to: item.to,
             navigate: item.navigate || navigate,
+            onClick: item.onClick,
             className: cn(
               item.className,
               isActive && "bg-gray-200 dark:bg-gray-800/50 text-gray-900 dark:text-gray-300"
@@ -17455,7 +17456,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
+            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -17465,6 +17466,41 @@ var GlowWrapper = ({
   );
 };
 var GlowWrapper_default = GlowWrapper;
+function InfiniteScrollTrigger({
+  children,
+  className,
+  hasMore = false,
+  isLoading = false,
+  rootMargin = "600px",
+  threshold = 0,
+  onLoadMore
+}) {
+  const triggerRef = React4.useRef(null);
+  React4.useEffect(() => {
+    const element = triggerRef.current;
+    if (!element || !hasMore || isLoading) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          onLoadMore?.();
+        }
+      },
+      {
+        root: null,
+        rootMargin,
+        threshold
+      }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [hasMore, isLoading, onLoadMore, rootMargin, threshold]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, className: cn("w-full", className), children });
+}
+var InfiniteScrollTrigger_default = InfiniteScrollTrigger;
 function ShowMore({ text, limit }) {
   const [showMore, setShowMore] = React4.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -17605,6 +17641,33 @@ function CommentContent({ comment }) {
 }
 var CommentContent_default = CommentContent;
 
+// src/compositions/comment-thread/utils/commentReaction.ts
+function getOptimisticLikeState(comment) {
+  return {
+    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
+  };
+}
+function getOptimisticDislikeState(comment) {
+  return {
+    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
+  };
+}
+function applyReactionState(comment, reaction) {
+  return {
+    ...comment,
+    likes: reaction.likes,
+    dislikes: reaction.dislikes,
+    liked: reaction.liked,
+    disliked: reaction.disliked
+  };
+}
+
 // src/compositions/comment-thread/utils/formatCommentDate.ts
 function formatCommentDate(date, format = "relative") {
   const target = new Date(date);
@@ -17643,6 +17706,65 @@ function formatCommentDate(date, format = "relative") {
   }
   return "Just now";
 }
+
+// src/compositions/comment-thread/utils/removeComment.ts
+function removeComment(comments, commentId) {
+  return comments.filter((comment) => comment.id !== commentId);
+}
+function incrementReplyCount(comments, commentId) {
+  return comments.map(
+    (comment) => comment.id === commentId ? {
+      ...comment,
+      replyCount: comment.replyCount + 1
+    } : comment
+  );
+}
+function decrementReplyCount(comments, commentId) {
+  return comments.map(
+    (comment) => comment.id === commentId ? {
+      ...comment,
+      replyCount: Math.max(comment.replyCount - 1, 0)
+    } : comment
+  );
+}
+
+// src/compositions/comment-thread/utils/replyCache.ts
+function addReplyToCache(cache, parentCommentId, reply) {
+  return {
+    ...cache,
+    [parentCommentId]: [...cache[parentCommentId] ?? [], reply]
+  };
+}
+function updateReplyCacheComment(cache, commentId, updater) {
+  const next = {};
+  for (const [parentId, replies] of Object.entries(cache)) {
+    next[parentId] = replies.map(
+      (reply) => reply.id === commentId ? updater(reply) : reply
+    );
+  }
+  return next;
+}
+function removeCommentTreeFromCache(cache, commentId) {
+  const childIds = cache[commentId]?.map((reply) => reply.id) ?? [];
+  let next = Object.fromEntries(
+    Object.entries(cache).map(([parentId, replies]) => [
+      parentId,
+      replies.filter((reply) => reply.id !== commentId)
+    ])
+  );
+  delete next[commentId];
+  for (const childId of childIds) {
+    next = removeCommentTreeFromCache(next, childId);
+  }
+  return next;
+}
+
+// src/compositions/comment-thread/utils/updateComment.ts
+function updateComment(comments, commentId, updater) {
+  return comments.map(
+    (comment) => comment.id === commentId ? updater(comment) : comment
+  );
+}
 function CommentHeader({ comment, config }) {
   const author = comment.author;
   const displayName = author?.firstName || author?.lastName ? `${author?.firstName ?? ""} ${author?.lastName ?? ""}`.trim() : author?.username ?? "Unknown";
@@ -17663,6 +17785,60 @@ function CommentHeader({ comment, config }) {
   ] });
 }
 var CommentHeader_default = CommentHeader;
+var useDrawer = (defaultVisibility = true) => {
+  const [show, setShow] = React4.useState(defaultVisibility);
+  const openDrawer = () => {
+    setShow((prev) => !prev);
+  };
+  const closeDrawer = () => {
+    setShow(false);
+  };
+  return {
+    show,
+    openDrawer,
+    closeDrawer
+  };
+};
+var useDrawer_default = useDrawer;
+var useModal = () => {
+  const [show, setShow] = React4.useState(false);
+  const handleOpenModal = () => {
+    setShow(true);
+  };
+  const handleCloseModal = () => {
+    setShow(false);
+  };
+  return {
+    show,
+    handleOpenModal,
+    handleCloseModal
+  };
+};
+var useModal_default = useModal;
+function CommentMenuItem({
+  icon,
+  name,
+  badge,
+  to,
+  navigate,
+  className,
+  onClick,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuItem,
+    {
+      icon,
+      name,
+      badge,
+      to,
+      navigate,
+      onClick,
+      style,
+      className
+    }
+  );
+}
 function CommentMenu({
   open,
   setOpen,
@@ -17674,17 +17850,48 @@ function CommentMenu({
   onReport
 }) {
   const ref = React4.useRef(null);
-  React4.useEffect(() => {
-    function handleOutsideClick(event) {
-      if (ref.current && !ref.current.contains(event.target)) {
+  useClickOutside(ref, () => setOpen(false));
+  const items = [];
+  if (canEdit) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(bi.BiEdit, {}),
+      name: "Edit",
+      component: CommentMenuItem,
+      onClick: () => {
         setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, [setOpen]);
-  const hasActions = canEdit || canDelete || canReport;
-  if (!hasActions) {
+        onEdit?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (canDelete) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(bi.BiTrash, {}),
+      name: "Delete",
+      component: CommentMenuItem,
+      onClick: () => {
+        setOpen(false);
+        onDelete?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm text-red-500 hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (canReport) {
+    items.push({
+      type: "item",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(bi.BiFlag, {}),
+      name: "Report",
+      component: CommentMenuItem,
+      onClick: () => {
+        setOpen(false);
+        onReport?.();
+      },
+      className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800"
+    });
+  }
+  if (!items.length) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "relative", children: [
@@ -17697,53 +17904,7 @@ function CommentMenu({
         children: /* @__PURE__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: [
-      canEdit && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setOpen(false);
-            onEdit?.();
-          },
-          className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(bi.BiEdit, {}),
-            "Edit"
-          ]
-        }
-      ),
-      canDelete && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setOpen(false);
-            onDelete?.();
-          },
-          className: "flex w-full items-center gap-2 px-4 py-3 text-sm text-red-500 hover:bg-gray-100 dark:hover:bg-neutral-800",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(bi.BiTrash, {}),
-            "Delete"
-          ]
-        }
-      ),
-      canReport && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setOpen(false);
-            onReport?.();
-          },
-          className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(bi.BiFlag, {}),
-            "Report"
-          ]
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(Transition4.TransitionDropdown, { visibility: open, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsx(Menu, { items }) }) })
   ] });
 }
 var CommentMenu_default = CommentMenu;
@@ -17964,13 +18125,6 @@ function CommentList({
 }
 var CommentList_default = CommentList;
 
-// src/compositions/comment-thread/utils/updateComment.ts
-function updateComment(comments, commentId, updater) {
-  return comments.map(
-    (comment) => comment.id === commentId ? updater(comment) : comment
-  );
-}
-
 // src/compositions/comment-thread/constants/comment.constants.ts
 var DEFAULT_COMMENT_THREAD_CONFIG = {
   maxDepth: 5,
@@ -17986,6 +18140,7 @@ function CommentThread({
   components,
   config,
   updatedComment,
+  deletedComment,
   onEdit,
   onDelete,
   onReport
@@ -18013,7 +18168,7 @@ function CommentThread({
         setIsLoadingComments(false);
       }
     }
-    loadComments();
+    void loadComments();
   }, [dataSource, resolvedConfig.commentsPerPage]);
   React4.useEffect(() => {
     replyCacheRef.current = replyCache;
@@ -18054,29 +18209,18 @@ function CommentThread({
       cancelled = true;
     };
   }, [dataSource, resolvedConfig.repliesPerPage]);
-  function updateReplyCacheComment(cache, commentId, updater) {
-    const next = {};
-    for (const [parentId, replies] of Object.entries(cache)) {
-      next[parentId] = replies.map(
-        (reply) => reply.id === commentId ? updater(reply) : reply
-      );
+  React4.useEffect(() => {
+    if (!updatedComment) {
+      return;
     }
-    return next;
-  }
-  function removeCommentTreeFromCache(cache, commentId) {
-    const childIds = cache[commentId]?.map((reply) => reply.id) ?? [];
-    let next = Object.fromEntries(
-      Object.entries(cache).map(([parentId, replies]) => [
-        parentId,
-        replies.filter((reply) => reply.id !== commentId)
-      ])
-    );
-    delete next[commentId];
-    for (const childId of childIds) {
-      next = removeCommentTreeFromCache(next, childId);
+    updateCommentEverywhere(updatedComment.id, () => updatedComment);
+  }, [updatedComment]);
+  React4.useEffect(() => {
+    if (!deletedComment) {
+      return;
     }
-    return next;
-  }
+    removeCommentEverywhere(deletedComment);
+  }, [deletedComment]);
   async function handleCreateComment(content) {
     const comment = await dataSource.createComment({
       content,
@@ -18084,51 +18228,13 @@ function CommentThread({
     });
     setComments((prev) => [comment, ...prev]);
   }
-  async function handleDeleteComment(comment) {
-    await dataSource.deleteComment(comment.id);
-    setComments((prev) => prev.filter((item) => item.id !== comment.id));
-    setReplyCache((prev) => removeCommentTreeFromCache(prev, comment.id));
-    if (comment.parentCommentId) {
-      setComments(
-        (prev) => updateComment(prev, comment.parentCommentId, (item) => ({
-          ...item,
-          replyCount: Math.max(item.replyCount - 1, 0)
-        }))
-      );
-      setReplyCache(
-        (prev) => updateReplyCacheComment(prev, comment.parentCommentId, (item) => ({
-          ...item,
-          replyCount: Math.max(item.replyCount - 1, 0)
-        }))
-      );
-    }
-  }
-  function updateCommentEverywhere(commentId, updater) {
-    setComments((prev) => updateComment(prev, commentId, updater));
-    setReplyCache((prev) => updateReplyCacheComment(prev, commentId, updater));
-  }
-  React4.useEffect(() => {
-    if (!updatedComment) {
-      return;
-    }
-    updateCommentEverywhere(updatedComment.id, () => updatedComment);
-  }, [updatedComment]);
   async function handleReply(parentComment, content) {
     const reply = await dataSource.createComment({
       content,
       parentCommentId: parentComment.id
     });
-    setReplyCache((prev) => ({
-      ...prev,
-      [parentComment.id]: [...prev[parentComment.id] ?? [], reply]
-    }));
-    const incrementReplyCount = (items) => items.map(
-      (item) => item.id === parentComment.id ? {
-        ...item,
-        replyCount: item.replyCount + 1
-      } : item
-    );
-    setComments((prev) => incrementReplyCount(prev));
+    setReplyCache((prev) => addReplyToCache(prev, parentComment.id, reply));
+    setComments((prev) => incrementReplyCount(prev, parentComment.id));
     setReplyCache(
       (prev) => updateReplyCacheComment(prev, parentComment.id, (item) => ({
         ...item,
@@ -18149,61 +18255,66 @@ function CommentThread({
     }));
   }
   async function handleLike(comment) {
-    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
-    };
-    const updater = (item) => ({
-      ...item,
-      likes: optimistic.likes,
-      dislikes: optimistic.dislikes,
-      liked: optimistic.liked,
-      disliked: optimistic.disliked
-    });
+    const optimistic = getOptimisticLikeState(comment);
+    const updater = (item) => applyReactionState(item, optimistic);
     setComments((prev) => updateComment(prev, comment.id, updater));
     setReplyCache((prev) => updateReplyCacheComment(prev, comment.id, updater));
     try {
       await dataSource.toggleLike(comment.id);
     } catch {
-      setComments((prev) => updateComment(prev, comment.id, () => comment));
-      setReplyCache(
-        (prev) => updateReplyCacheComment(prev, comment.id, () => comment)
-      );
+      rollbackComment(comment);
     }
   }
   async function handleDislike(comment) {
-    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
-    };
-    const updater = (item) => ({
-      ...item,
-      likes: optimistic.likes,
-      dislikes: optimistic.dislikes,
-      liked: optimistic.liked,
-      disliked: optimistic.disliked
-    });
+    const optimistic = getOptimisticDislikeState(comment);
+    const updater = (item) => applyReactionState(item, optimistic);
     setComments((prev) => updateComment(prev, comment.id, updater));
     setReplyCache((prev) => updateReplyCacheComment(prev, comment.id, updater));
     try {
       await dataSource.toggleDislike(comment.id);
     } catch {
-      setComments((prev) => updateComment(prev, comment.id, () => comment));
-      setReplyCache(
-        (prev) => updateReplyCacheComment(prev, comment.id, () => comment)
-      );
+      rollbackComment(comment);
     }
   }
+  function rollbackComment(comment) {
+    setComments((prev) => updateComment(prev, comment.id, () => comment));
+    setReplyCache(
+      (prev) => updateReplyCacheComment(prev, comment.id, () => comment)
+    );
+  }
   async function handleEditComment(comment) {
     const updatedComment2 = await onEdit?.(comment);
     if (updatedComment2) {
       updateCommentEverywhere(updatedComment2.id, () => updatedComment2);
     }
   }
+  function updateCommentEverywhere(commentId, updater) {
+    setComments((prev) => updateComment(prev, commentId, updater));
+    setReplyCache((prev) => updateReplyCacheComment(prev, commentId, updater));
+  }
+  async function handleDeleteComment(comment) {
+    if (onDelete) {
+      onDelete(comment);
+      return;
+    }
+    await dataSource.deleteComment(comment.id);
+    removeCommentEverywhere(comment);
+  }
+  function removeCommentEverywhere(comment) {
+    setComments((prev) => removeComment(prev, comment.id));
+    setReplyCache((prev) => removeCommentTreeFromCache(prev, comment.id));
+    if (comment.parentCommentId) {
+      setComments(
+        (prev) => decrementReplyCount(prev, comment.parentCommentId)
+      );
+      setReplyCache(
+        (prev) => updateReplyCacheComment(prev, comment.parentCommentId, (item) => ({
+          ...item,
+          replyCount: Math.max(item.replyCount - 1, 0)
+        }))
+      );
+    }
+  }
   if (loading || isLoadingComments) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-6", children: "Loading comments..." });
   }
@@ -18901,36 +19012,6 @@ var TopNav = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: items.map(renderNode) });
 };
-var useDrawer = (defaultVisibility = true) => {
-  const [show, setShow] = React4.useState(defaultVisibility);
-  const openDrawer = () => {
-    setShow((prev) => !prev);
-  };
-  const closeDrawer = () => {
-    setShow(false);
-  };
-  return {
-    show,
-    openDrawer,
-    closeDrawer
-  };
-};
-var useDrawer_default = useDrawer;
-var useModal = () => {
-  const [show, setShow] = React4.useState(false);
-  const handleOpenModal = () => {
-    setShow(true);
-  };
-  const handleCloseModal = () => {
-    setShow(false);
-  };
-  return {
-    show,
-    handleOpenModal,
-    handleCloseModal
-  };
-};
-var useModal_default = useModal;
 function GenericLayout({
   children,
   styles,
@@ -19114,6 +19195,7 @@ exports.HeaderNavItemTitle = HeaderNavItemTitle;
 exports.HomeLayout = HomeLayout_default;
 exports.Image = Image2;
 exports.ImageInput = ImageInput_default;
+exports.InfiniteScrollTrigger = InfiniteScrollTrigger_default;
 exports.Info = Info_default;
 exports.Input = Input;
 exports.InputFile = InputFile;
@@ -19188,21 +19270,31 @@ exports.ValueBadge = ValueBadge_default;
 exports.WorldMap = WorldMap;
 exports.WorldMapCountryTable = WorldMapCountryTable;
 exports.YoutubeVideoPlayer = YoutubeVideo_default;
+exports.addReplyToCache = addReplyToCache;
+exports.applyReactionState = applyReactionState;
 exports.cn = cn;
 exports.createForceLayout = createForceLayout;
 exports.createGridLayout = createGridLayout;
 exports.createTreeLayout = createTreeLayout;
+exports.decrementReplyCount = decrementReplyCount;
 exports.enumValues = enumValues;
 exports.formatCommentDate = formatCommentDate;
 exports.getCurrencySymbol = getCurrencySymbol;
 exports.getLayout = getLayout;
+exports.getOptimisticDislikeState = getOptimisticDislikeState;
+exports.getOptimisticLikeState = getOptimisticLikeState;
+exports.incrementReplyCount = incrementReplyCount;
 exports.isMatch = isMatch;
 exports.isRenderFn = isRenderFn;
 exports.normalize = normalize;
 exports.registerLayout = registerLayout;
+exports.removeComment = removeComment;
+exports.removeCommentTreeFromCache = removeCommentTreeFromCache;
 exports.resolveAppearanceStyles = resolveAppearanceStyles;
 exports.resolveWithGlobal = resolveWithGlobal;
 exports.sendToast = sendToast;
+exports.updateComment = updateComment;
+exports.updateReplyCacheComment = updateReplyCacheComment;
 exports.useClickOutside = useClickOutside;
 exports.useCloudinaryConfig = useCloudinaryConfig;
 exports.useCurrentTheme = useCurrentTheme_default;