@edifice.io/react 2.2.2 → 2.2.3

package/dist/index.js

@@ -4,80 +4,84 @@ import { default as default4 } from "./components/AppHeader/AppHeader.js";
 import { default as default5 } from "./components/AppIcon/AppIcon.js";
 import { default as default6 } from "./components/Attachment/Attachment.js";
 import { default as default7 } from "./components/Avatar/Avatar.js";
-import { default as default8 } from "./components/Badge/Badge.js";
-import { default as default9 } from "./components/Breadcrumb/Breadcrumb.js";
-import { default as default10 } from "./components/Button/Button.js";
-import { default as default11 } from "./components/Button/IconButton.js";
-import { default as default12 } from "./components/Button/SearchButton.js";
-import { default as default13 } from "./components/Card/Card.js";
-import { default as default14 } from "./components/Checkbox/Checkbox.js";
-import { default as default15 } from "./components/ColorPicker/ColorPicker.js";
-import { default as default16 } from "./components/ColorPicker/ColorPickerItem.js";
-import { default as default17 } from "./components/Combobox/Combobox.js";
-import { default as default18 } from "./components/Dropdown/Dropdown.js";
-import { default as default19 } from "./components/Dropzone/Dropzone.js";
-import { default as default20 } from "./components/EmptyScreen/EmptyScreen.js";
-import { default as default21 } from "./components/Form/FormText.js";
-import { default as default22 } from "./components/Form/FormControl.js";
-import { default as default23 } from "./components/Heading/Heading.js";
-import { default as default24 } from "./components/Image/Image.js";
-import { default as default25 } from "./components/Input/Input.js";
-import { default as default26 } from "./components/Label/Label.js";
-import { default as default27 } from "./components/Loading/Loading.js";
-import { default as default28 } from "./components/LoadingScreen/LoadingScreen.js";
-import { default as default29 } from "./components/Logo/Logo.js";
-import { default as default30 } from "./components/Modal/Modal.js";
-import { default as default31 } from "./components/Radio/Radio.js";
-import { default as default32 } from "./components/SearchBar/SearchBar.js";
-import { default as default33 } from "./components/Select/Select.js";
-import { default as default34 } from "./components/Table/components/Table.js";
-import { default as default35 } from "./components/TextArea/TextArea.js";
-import { default as default36 } from "./components/Tooltip/Tooltip.js";
+import { default as default8 } from "./components/AvatarGroup/AvatarGroup.js";
+import { default as default9 } from "./components/Badge/Badge.js";
+import { default as default10 } from "./components/Breadcrumb/Breadcrumb.js";
+import { default as default11 } from "./components/Button/Button.js";
+import { default as default12 } from "./components/Button/IconButton.js";
+import { default as default13 } from "./components/Button/SearchButton.js";
+import { default as default14 } from "./components/Card/Card.js";
+import { default as default15 } from "./components/Checkbox/Checkbox.js";
+import { default as default16 } from "./components/ColorPicker/ColorPicker.js";
+import { default as default17 } from "./components/ColorPicker/ColorPickerItem.js";
+import { default as default18 } from "./components/Combobox/Combobox.js";
+import { default as default19 } from "./components/Dropdown/Dropdown.js";
+import { default as default20 } from "./components/Dropzone/Dropzone.js";
+import { default as default21 } from "./components/EmptyScreen/EmptyScreen.js";
+import { default as default22 } from "./components/Form/FormText.js";
+import { default as default23 } from "./components/Form/FormControl.js";
+import { default as default24 } from "./components/Heading/Heading.js";
+import { default as default25 } from "./components/Image/Image.js";
+import { default as default26 } from "./components/Input/Input.js";
+import { default as default27 } from "./components/Label/Label.js";
+import { default as default28 } from "./components/Loading/Loading.js";
+import { default as default29 } from "./components/LoadingScreen/LoadingScreen.js";
+import { default as default30 } from "./components/Logo/Logo.js";
+import { default as default31 } from "./components/Modal/Modal.js";
+import { default as default32 } from "./components/PreventPropagation/PreventPropagation.js";
+import { default as default33 } from "./components/Radio/Radio.js";
+import { default as default34 } from "./components/SearchBar/SearchBar.js";
+import { default as default35 } from "./components/Select/Select.js";
+import { default as default36 } from "./components/StackedGroup/StackedGroup.js";
+import { default as default37 } from "./components/Switch/Switch.js";
+import { default as default38 } from "./components/Table/components/Table.js";
+import { default as default39 } from "./components/TextArea/TextArea.js";
+import { default as default40 } from "./components/Tooltip/Tooltip.js";
 import { DndTree } from "./components/Tree/components/DndTree.js";
-import { default as default37 } from "./components/Tree/components/SortableTree.js";
-import { default as default38 } from "./components/Tree/components/Tree.js";
-import { default as default39 } from "./components/TreeView/TreeView.js";
-import { default as default40 } from "./components/VisuallyHidden/VisuallyHidden.js";
-import { default as default41 } from "./hooks/useBookmark/useBookmark.js";
-import { default as default42 } from "./hooks/useBreakpoint/useBreakpoint.js";
-import { default as default43 } from "./hooks/useBrowserInfo/useBrowserInfo.js";
-import { default as default44 } from "./hooks/useCantoo/useCantoo.js";
-import { default as default45 } from "./hooks/useClickOutside/useClickOutside.js";
-import { default as default46 } from "./hooks/useConversation/useConversation.js";
-import { default as default47 } from "./hooks/useDate/useDate.js";
-import { default as default48 } from "./hooks/useDebounce/useDebounce.js";
-import { default as default49 } from "./hooks/useDirectory/useDirectory.js";
-import { default as default50 } from "./hooks/useDropdown/useDropdown.js";
-import { default as default51 } from "./hooks/useDropzone/useDropzone.js";
-import { default as default52 } from "./hooks/useEdificeIcons/useEdificeIcons.js";
-import { default as default53 } from "./hooks/useHasWorkflow/useHasWorkflow.js";
-import { default as default54 } from "./hooks/useHover/useHover.js";
-import { default as default55 } from "./hooks/useHttpErrorToast/useHttpErrorToast.js";
-import { default as default56 } from "./hooks/useImage/useImage.js";
-import { default as default57 } from "./hooks/useIsAdml/useIsAdml.js";
-import { default as default58 } from "./hooks/useKeyPress/useKeyPress.js";
-import { default as default59 } from "./hooks/useLibraryUrl/useLibraryUrl.js";
-import { default as default60 } from "./hooks/useMediaLibrary/useMediaLibrary.js";
-import { default as default61 } from "./hooks/useScrollToTop/useScrollToTop.js";
-import { default as default62 } from "./hooks/useTitle/useTitle.js";
-import { default as default63 } from "./hooks/useToast/useToast.js";
-import { default as default64 } from "./hooks/useToggle/useToggle.js";
-import { default as default65 } from "./hooks/useTrapFocus/useTrapFocus.js";
-import { default as default66 } from "./hooks/useTrashedResource/useTrashedResource.js";
-import { default as default67 } from "./hooks/useUpload/useUpload.js";
-import { default as default68 } from "./hooks/useUploadFiles/useUploadFiles.js";
-import { default as default69 } from "./hooks/useUser/useUser.js";
-import { default as default70 } from "./hooks/useWorkspaceFile/useWorkspaceFile.js";
-import { default as default71 } from "./hooks/useWorkspaceSearch/useWorkspaceSearch.js";
-import { default as default72 } from "./hooks/useXitiTrackPageLoad/useXitiTrackPageLoad.js";
-import { default as default73 } from "./hooks/useZendeskGuide/useZendeskGuide.js";
-import { default as default74 } from "./modules/modals/OnboardingModal/OnboardingModal.js";
-import { default as default75 } from "./modules/modals/PublishModal/PublishModal.js";
-import { default as default76 } from "./modules/modals/ResourceModal/apps/BlogPublic.js";
-import { default as default77 } from "./modules/modals/ResourceModal/hooks/useUpdateMutation.js";
-import { default as default78 } from "./modules/modals/ShareModal/ShareModal.js";
-import { default as default79 } from "./modules/modals/ShareModal/apps/ShareBlog.js";
-import { default as default80 } from "./modules/modals/ShareModal/hooks/useShareMutation.js";
+import { default as default41 } from "./components/Tree/components/SortableTree.js";
+import { default as default42 } from "./components/Tree/components/Tree.js";
+import { default as default43 } from "./components/TreeView/TreeView.js";
+import { default as default44 } from "./components/VisuallyHidden/VisuallyHidden.js";
+import { default as default45 } from "./hooks/useBookmark/useBookmark.js";
+import { default as default46 } from "./hooks/useBreakpoint/useBreakpoint.js";
+import { default as default47 } from "./hooks/useBrowserInfo/useBrowserInfo.js";
+import { default as default48 } from "./hooks/useCantoo/useCantoo.js";
+import { default as default49 } from "./hooks/useClickOutside/useClickOutside.js";
+import { default as default50 } from "./hooks/useConversation/useConversation.js";
+import { default as default51 } from "./hooks/useDate/useDate.js";
+import { default as default52 } from "./hooks/useDebounce/useDebounce.js";
+import { default as default53 } from "./hooks/useDirectory/useDirectory.js";
+import { default as default54 } from "./hooks/useDropdown/useDropdown.js";
+import { default as default55 } from "./hooks/useDropzone/useDropzone.js";
+import { default as default56 } from "./hooks/useEdificeIcons/useEdificeIcons.js";
+import { default as default57 } from "./hooks/useHasWorkflow/useHasWorkflow.js";
+import { default as default58 } from "./hooks/useHover/useHover.js";
+import { default as default59 } from "./hooks/useHttpErrorToast/useHttpErrorToast.js";
+import { default as default60 } from "./hooks/useImage/useImage.js";
+import { default as default61 } from "./hooks/useIsAdml/useIsAdml.js";
+import { default as default62 } from "./hooks/useKeyPress/useKeyPress.js";
+import { default as default63 } from "./hooks/useLibraryUrl/useLibraryUrl.js";
+import { default as default64 } from "./hooks/useMediaLibrary/useMediaLibrary.js";
+import { default as default65 } from "./hooks/useScrollToTop/useScrollToTop.js";
+import { default as default66 } from "./hooks/useTitle/useTitle.js";
+import { default as default67 } from "./hooks/useToast/useToast.js";
+import { default as default68 } from "./hooks/useToggle/useToggle.js";
+import { default as default69 } from "./hooks/useTrapFocus/useTrapFocus.js";
+import { default as default70 } from "./hooks/useTrashedResource/useTrashedResource.js";
+import { default as default71 } from "./hooks/useUpload/useUpload.js";
+import { default as default72 } from "./hooks/useUploadFiles/useUploadFiles.js";
+import { default as default73 } from "./hooks/useUser/useUser.js";
+import { default as default74 } from "./hooks/useWorkspaceFile/useWorkspaceFile.js";
+import { default as default75 } from "./hooks/useWorkspaceSearch/useWorkspaceSearch.js";
+import { default as default76 } from "./hooks/useXitiTrackPageLoad/useXitiTrackPageLoad.js";
+import { default as default77 } from "./hooks/useZendeskGuide/useZendeskGuide.js";
+import { default as default78 } from "./modules/modals/OnboardingModal/OnboardingModal.js";
+import { default as default79 } from "./modules/modals/PublishModal/PublishModal.js";
+import { default as default80 } from "./modules/modals/ResourceModal/apps/BlogPublic.js";
+import { default as default81 } from "./modules/modals/ResourceModal/hooks/useUpdateMutation.js";
+import { default as default82 } from "./modules/modals/ShareModal/ShareModal.js";
+import { default as default83 } from "./modules/modals/ShareModal/apps/ShareBlog.js";
+import { default as default84 } from "./modules/modals/ShareModal/hooks/useShareMutation.js";
 import { AccessiblePalette, DefaultPalette } from "./components/ColorPicker/ColorPalette.js";
 import { DropzoneContext, useDropzoneContext } from "./components/Dropzone/DropzoneContext.js";
 import { Column, Grid } from "./components/Grid/Grid.js";
@@ -112,66 +116,70 @@ export {
   default5 as AppIcon,
   default6 as Attachment,
   default7 as Avatar,
-  default8 as Badge,
-  default76 as BlogPublic,
-  default9 as Breadcrumb,
-  default10 as Button,
-  default13 as Card,
-  default14 as Checkbox,
-  default15 as ColorPicker,
-  default16 as ColorPickerItem,
+  default8 as AvatarGroup,
+  default9 as Badge,
+  default80 as BlogPublic,
+  default10 as Breadcrumb,
+  default11 as Button,
+  default14 as Card,
+  default15 as Checkbox,
+  default16 as ColorPicker,
+  default17 as ColorPickerItem,
   Column,
-  default17 as Combobox,
+  default18 as Combobox,
   DefaultPalette,
   DndTree,
-  default18 as Dropdown,
-  default19 as Dropzone,
+  default19 as Dropdown,
+  default20 as Dropzone,
   DropzoneContext,
   EdificeClientContext,
   EdificeClientProvider,
   EdificeThemeContext,
   EdificeThemeProvider,
-  default20 as EmptyScreen,
-  default22 as FormControl,
-  default21 as FormText,
+  default21 as EmptyScreen,
+  default23 as FormControl,
+  default22 as FormText,
   Grid,
-  default23 as Heading,
-  default11 as IconButton,
-  default24 as Image,
-  default25 as Input,
-  default26 as Label,
+  default24 as Heading,
+  default12 as IconButton,
+  default25 as Image,
+  default26 as Input,
+  default27 as Label,
   Layout,
   List,
-  default27 as Loading,
-  default28 as LoadingScreen,
-  default29 as Logo,
+  default28 as Loading,
+  default29 as LoadingScreen,
+  default30 as Logo,
   Menu,
   MockedProvider,
-  default30 as Modal,
-  default74 as OnboardingModal,
+  default31 as Modal,
+  default78 as OnboardingModal,
   Popover,
   PopoverBody,
   PopoverFooter,
   PopoverHeader,
-  default75 as PublishModal,
-  default31 as Radio,
+  default32 as PreventPropagation,
+  default79 as PublishModal,
+  default33 as Radio,
   ResourceModal,
-  default32 as SearchBar,
-  default12 as SearchButton,
-  default33 as Select,
-  default79 as ShareBlog,
-  default78 as ShareModal,
-  default37 as SortableTree,
-  default34 as Table,
+  default34 as SearchBar,
+  default13 as SearchButton,
+  default35 as Select,
+  default83 as ShareBlog,
+  default82 as ShareModal,
+  default41 as SortableTree,
+  default36 as StackedGroup,
+  default37 as Switch,
+  default38 as Table,
   Tabs,
-  default35 as TextArea,
+  default39 as TextArea,
   Toolbar,
-  default36 as Tooltip,
-  default38 as Tree,
+  default40 as Tooltip,
+  default42 as Tree,
   TreeNode,
   TreeNodeFolderWrapper,
-  default39 as TreeView,
-  default40 as VisuallyHidden,
+  default43 as TreeView,
+  default44 as VisuallyHidden,
   addNode,
   arrayUnique,
   buildTree,
@@ -199,46 +207,46 @@ export {
   setRef,
   updateNode,
   updateParentIds,
-  default41 as useBookmark,
-  default42 as useBreakpoint,
-  default43 as useBrowserInfo,
-  default44 as useCantoo,
+  default45 as useBookmark,
+  default46 as useBreakpoint,
+  default47 as useBrowserInfo,
+  default48 as useCantoo,
   useCheckable,
-  default45 as useClickOutside,
-  default46 as useConversation,
-  default47 as useDate,
-  default48 as useDebounce,
-  default49 as useDirectory,
-  default50 as useDropdown,
-  default51 as useDropzone,
+  default49 as useClickOutside,
+  default50 as useConversation,
+  default51 as useDate,
+  default52 as useDebounce,
+  default53 as useDirectory,
+  default54 as useDropdown,
+  default55 as useDropzone,
   useDropzoneContext,
   useEdificeClient,
-  default52 as useEdificeIcons,
+  default56 as useEdificeIcons,
   useEdificeTheme,
-  default53 as useHasWorkflow,
-  default54 as useHover,
-  default55 as useHttpErrorToast,
-  default56 as useImage,
-  default57 as useIsAdml,
-  default58 as useKeyPress,
-  default59 as useLibraryUrl,
-  default60 as useMediaLibrary,
-  default61 as useScrollToTop,
-  default80 as useShareMutation,
-  default62 as useTitle,
-  default63 as useToast,
-  default64 as useToggle,
-  default65 as useTrapFocus,
-  default66 as useTrashedResource,
+  default57 as useHasWorkflow,
+  default58 as useHover,
+  default59 as useHttpErrorToast,
+  default60 as useImage,
+  default61 as useIsAdml,
+  default62 as useKeyPress,
+  default63 as useLibraryUrl,
+  default64 as useMediaLibrary,
+  default65 as useScrollToTop,
+  default84 as useShareMutation,
+  default66 as useTitle,
+  default67 as useToast,
+  default68 as useToggle,
+  default69 as useTrapFocus,
+  default70 as useTrashedResource,
   useTreeSortable,
   useTreeView,
-  default77 as useUpdateMutation,
-  default67 as useUpload,
-  default68 as useUploadFiles,
-  default69 as useUser,
-  default70 as useWorkspaceFile,
-  default71 as useWorkspaceSearch,
-  default72 as useXitiTrackPageLoad,
-  default73 as useZendeskGuide,
+  default81 as useUpdateMutation,
+  default71 as useUpload,
+  default72 as useUploadFiles,
+  default73 as useUser,
+  default74 as useWorkspaceFile,
+  default75 as useWorkspaceSearch,
+  default76 as useXitiTrackPageLoad,
+  default77 as useZendeskGuide,
   wrapTreeNode
 };

package/dist/modules/comments/components/Comment.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, Suspense, lazy } from "react";
 import { useTranslation } from "react-i18next";
 import SvgIconSave from "../../icons/components/IconSave.js";
@@ -9,6 +9,8 @@ import { CommentAvatar } from "./CommentAvatar.js";
 import { CommentDate } from "./CommentDate.js";
 import { CommentTitle } from "./CommentTitle.js";
 import { TextCounter } from "./TextCounter.js";
+import { CommentDeleted } from "./CommentDeleted.js";
+import { CommentReplies } from "./CommentReplies.js";
 import Button from "../../../components/Button/Button.js";
 import LoadingScreen from "../../../components/LoadingScreen/LoadingScreen.js";
 const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comment = ({
@@ -22,10 +24,12 @@ const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comm
     authorName,
     createdAt,
     updatedAt,
-    comment: content
+    comment: content,
+    replyTo
   } = comment, [ref, onFocus, resizeTextarea] = useAutosizeTextarea(!0), [isDeleteModalOpen, setIsDeleteModalOpen] = useState(!1), {
     t
   } = useTranslation(), {
+    defaultComments,
     editCommentId,
     options,
     type,
@@ -33,42 +37,53 @@ const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comm
     handleDeleteComment: onDeleteComment,
     handleModifyComment,
     handleReset,
-    handleUpdateComment
-  } = useCommentsContext(), isEditing = editCommentId === comment.id, handleChangeContent = (event) => {
+    handleUpdateComment,
+    handleReplyToComment
+  } = useCommentsContext(), replies = (defaultComments == null ? void 0 : defaultComments.filter((comm) => comm.replyTo === comment.id)) ?? [], hasReplies = replies.length > 0, hasAllDeletedReplies = replies.every((reply) => reply.deleted), isEditing = editCommentId === comment.id, handleChangeContent = (event) => {
     resizeTextarea(), setValue(event.target.value);
   };
-  return /* @__PURE__ */ jsxs("div", { className: `${isEditing ? "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200  my-16" : "border rounded-3 p-12 pb-8 d-flex gap-12 mt-16"}`, children: [
-    /* @__PURE__ */ jsx(CommentAvatar, { id: authorId }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-fill", children: [
-      /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
-        /* @__PURE__ */ jsx(CommentTitle, { children: authorName }),
-        /* @__PURE__ */ jsx(BadgeProfile, { profile }),
-        /* @__PURE__ */ jsx(CommentDate, { createdAt, updatedAt })
-      ] }),
-      isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: /* @__PURE__ */ jsx("textarea", { id: "update-comment", ref, value, className: "form-control", placeholder: t("comment.placeholder"), maxLength: options.maxCommentLength, onChange: handleChangeContent, rows: 1, style: {
-          resize: "none",
-          overflow: "hidden"
-        }, onFocus }) }),
-        /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: handleReset, children: t("comment.cancel") }),
-          /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end align-items-center gap-4", children: [
-            /* @__PURE__ */ jsx(TextCounter, { content: value, maxLength: options.maxCommentLength }),
-            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}), disabled: !(content != null && content.length), onClick: () => handleUpdateComment(value), children: t("comment.save") })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    comment.deleted && hasReplies && !hasAllDeletedReplies && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CommentDeleted, {}),
+      /* @__PURE__ */ jsx(CommentReplies, { parentComment: comment })
+    ] }),
+    !comment.deleted && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: `${isEditing ? "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200  my-16" : "border rounded-3 p-12 pb-8 d-flex gap-12 mt-16"}`, children: [
+        /* @__PURE__ */ jsx(CommentAvatar, { id: authorId }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-fill", children: [
+          /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
+            /* @__PURE__ */ jsx(CommentTitle, { children: authorName }),
+            /* @__PURE__ */ jsx(BadgeProfile, { profile }),
+            /* @__PURE__ */ jsx(CommentDate, { createdAt, updatedAt })
+          ] }),
+          isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: /* @__PURE__ */ jsx("textarea", { id: "update-comment", ref, value, className: "form-control", placeholder: t("comment.placeholder"), maxLength: options.maxCommentLength, onChange: handleChangeContent, rows: 1, style: {
+              resize: "none",
+              overflow: "hidden"
+            }, onFocus }) }),
+            /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: handleReset, children: t("comment.cancel") }),
+              /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end align-items-center gap-4", children: [
+                /* @__PURE__ */ jsx(TextCounter, { content: value, maxLength: options.maxCommentLength }),
+                /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}), disabled: !(content != null && content.length), onClick: () => handleUpdateComment(value), children: t("comment.save") })
+              ] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: content }),
+            type === "edit" && /* @__PURE__ */ jsxs("div", { className: "ms-n8", children: [
+              !replyTo && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => handleReplyToComment(comment.id), children: t("comment.reply") }),
+              userId === authorId && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => {
+                handleModifyComment(comment.id), setValue(content);
+              }, children: t("comment.edit") }),
+              (userId === authorId || (userRights == null ? void 0 : userRights.manager)) && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => setIsDeleteModalOpen(!0), children: t("comment.remove") })
+            ] })
           ] })
         ] })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: content }),
-        type === "edit" && /* @__PURE__ */ jsxs("div", { className: "ms-n8", children: [
-          userId === authorId && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => {
-            handleModifyComment(comment.id), setValue(content);
-          }, children: t("comment.edit") }),
-          (userId === authorId || (userRights == null ? void 0 : userRights.manager)) && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => setIsDeleteModalOpen(!0), children: t("comment.remove") })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingScreen, { position: !1 }), children: isDeleteModalOpen && /* @__PURE__ */ jsx(DeleteModal, { isOpen: isDeleteModalOpen, onCancel: () => setIsDeleteModalOpen(!1), onSuccess: () => onDeleteComment(id) }) })
-  ] }, id);
+      ] }, id),
+      /* @__PURE__ */ jsx(CommentReplies, { parentComment: comment }),
+      /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingScreen, { position: !1 }), children: isDeleteModalOpen && /* @__PURE__ */ jsx(DeleteModal, { isOpen: isDeleteModalOpen, onCancel: () => setIsDeleteModalOpen(!1), onSuccess: () => onDeleteComment(id) }) })
+    ] })
+  ] });
 };
 export {
   Comment

package/dist/modules/comments/components/CommentDeleted.d.ts

@@ -0,0 +1 @@
+export declare const CommentDeleted: () => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentDeleted.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+const CommentDeleted = () => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200 my-16", children: t("comment.deleted") });
+};
+export {
+  CommentDeleted
+};

package/dist/modules/comments/components/CommentForm.d.ts

@@ -1,3 +1,4 @@
-export declare const CommentForm: ({ userId }: {
+export declare const CommentForm: ({ userId, replyTo, }: {
     userId: string;
+    replyTo?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentForm.js

@@ -5,19 +5,23 @@ import { useAutosizeTextarea } from "../hooks/useAutosizeTextarea.js";
 import { useCommentsContext } from "../hooks/useCommentsContext.js";
 import { CommentAvatar } from "./CommentAvatar.js";
 import { TextCounter } from "./TextCounter.js";
+import { useState } from "react";
 import Button from "../../../components/Button/Button.js";
 const CommentForm = ({
-  userId
+  userId,
+  replyTo
 }) => {
-  const {
-    t
-  } = useTranslation(), {
-    content,
-    handleChangeContent,
+  const [content, setContent] = useState(""), {
     handleCreateComment,
     options,
     type
-  } = useCommentsContext(), [ref, onFocus] = useAutosizeTextarea();
+  } = useCommentsContext(), [ref, onFocus] = useAutosizeTextarea(), {
+    t
+  } = useTranslation(), handleChangeContent = (event) => {
+    setContent(event.target.value);
+  }, handleSubmit = () => {
+    handleCreateComment(content, replyTo), setContent("");
+  };
   return /* @__PURE__ */ jsx(Fragment, { children: type === "edit" && /* @__PURE__ */ jsxs("div", { className: "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200", children: [
     /* @__PURE__ */ jsx(CommentAvatar, { id: userId }),
     /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill gap-4", children: [
@@ -27,7 +31,7 @@ const CommentForm = ({
       } }),
       /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end align-items-center gap-4", children: [
         /* @__PURE__ */ jsx(TextCounter, { content, maxLength: options.maxCommentLength }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSend, {}), disabled: !(content != null && content.length), onClick: () => handleCreateComment(content), children: t("comment.post") })
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSend, {}), disabled: !(content != null && content.length), onClick: handleSubmit, children: t("comment.post") })
       ] })
     ] })
   ] }) });

package/dist/modules/comments/components/CommentList.js

@@ -6,15 +6,15 @@ function CommentList() {
   const {
     user
   } = useEdificeClient(), {
-    comments,
+    displayedComments,
     profiles
   } = useCommentsContext();
-  return comments == null ? void 0 : comments.map((comment) => {
+  return displayedComments == null ? void 0 : displayedComments.map((comment) => {
     var _a;
     const {
       authorId
     } = comment, profile = ((_a = profiles == null ? void 0 : profiles.find((user2) => (user2 == null ? void 0 : user2.userId) === authorId)) == null ? void 0 : _a.profile) ?? "Guest";
-    return /* @__PURE__ */ jsx(Comment, { comment, profile, userId: user == null ? void 0 : user.userId }, comment.id);
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Comment, { comment, profile, userId: user == null ? void 0 : user.userId }) }, comment.id);
   });
 }
 export {

package/dist/modules/comments/components/CommentReplies.d.ts

@@ -0,0 +1,4 @@
+import { CommentProps } from '../types';
+export declare const CommentReplies: ({ parentComment, }: {
+    parentComment: CommentProps;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentReplies.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Comment } from "./Comment.js";
+import { CommentForm } from "./CommentForm.js";
+import { useCommentReplies } from "../hooks/useCommentReplies.js";
+import Button from "../../../components/Button/Button.js";
+const CommentReplies = ({
+  parentComment
+}) => {
+  const {
+    t,
+    profiles,
+    user,
+    displayedReplies,
+    showCommentForm,
+    showMoreReplies,
+    handleMoreReplies
+  } = useCommentReplies({
+    parentComment
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "comments-replies-container", children: [
+    showCommentForm && /* @__PURE__ */ jsx("div", { className: "comments-replies-form", children: /* @__PURE__ */ jsx(CommentForm, { userId: user == null ? void 0 : user.userId, replyTo: parentComment.id }) }),
+    /* @__PURE__ */ jsx("div", { className: "comments-replies-list", children: displayedReplies.map((reply) => {
+      var _a;
+      const profile = ((_a = profiles == null ? void 0 : profiles.find((user2) => (user2 == null ? void 0 : user2.userId) === reply.authorId)) == null ? void 0 : _a.profile) ?? "Guest";
+      if (!reply.deleted)
+        return /* @__PURE__ */ jsx("div", { className: "comments-replies-reply", children: /* @__PURE__ */ jsx(Comment, { comment: reply, profile, userId: user == null ? void 0 : user.userId }) }, reply.id);
+    }) }),
+    showMoreReplies && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", onClick: handleMoreReplies, className: "ms-24", children: t("comment.more.replies") })
+  ] });
+};
+export {
+  CommentReplies
+};

package/dist/modules/comments/constants.d.ts

@@ -18,3 +18,7 @@ export declare const DEFAULT_ADD_COMMENTS = 5;
  * Limit to display replies of a comment
  */
 export declare const DEFAULT_MAX_REPLIES = 5;
+/**
+ * Number of comments to add when adding more comment in the limited list
+ */
+export declare const DEFAULT_ADD_REPLIES = 5;

package/dist/modules/comments/constants.js

@@ -1,6 +1,7 @@
-const DEFAULT_MAX_COMMENT_LENGTH = 200, DEFAULT_MAX_REPLY_LENGTH = 200, DEFAULT_MAX_COMMENTS = 4, DEFAULT_ADD_COMMENTS = 5, DEFAULT_MAX_REPLIES = 5;
+const DEFAULT_MAX_COMMENT_LENGTH = 200, DEFAULT_MAX_REPLY_LENGTH = 200, DEFAULT_MAX_COMMENTS = 4, DEFAULT_ADD_COMMENTS = 5, DEFAULT_MAX_REPLIES = 5, DEFAULT_ADD_REPLIES = 5;
 export {
   DEFAULT_ADD_COMMENTS,
+  DEFAULT_ADD_REPLIES,
   DEFAULT_MAX_COMMENTS,
   DEFAULT_MAX_COMMENT_LENGTH,
   DEFAULT_MAX_REPLIES,