@selfcommunity/react-ui 0.7.0-alpha.36 → 0.7.0-alpha.361

package/lib/esm/components/CommentObject/CommentObject.js

@@ -1,159 +1,58 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useContext, useMemo, useState } from 'react';
+import { __rest } from "tslib";
+import React, { useContext, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Avatar, Box, Button, CardContent, Tooltip, Typography } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { Avatar, Box, Button, CardContent, Typography } from '@mui/material';
 import Bullet from '../../shared/Bullet';
 import classNames from 'classnames';
-import Votes from './Votes';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import CommentObjectSkeleton from './Skeleton';
-import { LoadingButton } from '@mui/lab';
-import Icon from '@mui/material/Icon';
 import { SCCommentsOrderBy } from '../../types/comments';
-import ReplyCommentObject from './ReplyComment';
+import CommentsObject from '../CommentsObject';
+import CommentObjectReply from '../CommentObjectReply';
 import ContributionActionsMenu from '../../shared/ContributionActionsMenu';
 import DateTimeAgo from '../../shared/DateTimeAgo';
 import { getContributionHtml, getContributionType, getRouteData } from '../../utils/contribution';
 import { useSnackbar } from 'notistack';
 import { useThemeProps } from '@mui/system';
-import CommentsObject from '../CommentsObject';
 import BaseItem from '../../shared/BaseItem';
-import { SCCommentTypologyType, SCFeedObjectTypologyType } from '@selfcommunity/types';
-import { http, Endpoints } from '@selfcommunity/api-services';
+import { SCContributionType } from '@selfcommunity/types';
+import { Endpoints, http } from '@selfcommunity/api-services';
 import { CacheStrategies, Logger, LRUCache } from '@selfcommunity/utils';
-import { Link, SCRoutes, SCCache, SCUserContext, UserUtils, useSCContext, useSCFetchCommentObject, useSCFetchCommentObjects, useSCRouting } from '@selfcommunity/react-core';
-const messages = defineMessages({
-    reply: {
-        id: 'ui.commentObject.reply',
-        defaultMessage: 'ui.commentObject.reply'
-    },
-    voteUp: {
-        id: 'ui.commentObject.voteUp',
-        defaultMessage: 'ui.commentObject.voteUp'
-    },
-    voteDown: {
-        id: 'ui.commentObject.voteDown',
-        defaultMessage: 'ui.commentObject.voteDown'
-    }
-});
-const PREFIX = 'SCCommentObject';
+import { Link, SCCache, SCRoutes, SCUserContext, UserUtils, useSCContext, useSCFetchCommentObject, useSCFetchCommentObjects, useSCRouting } from '@selfcommunity/react-core';
+import VoteButton from '../VoteButton';
+import VoteAudienceButton from '../VoteAudienceButton';
+import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
+import UserAvatar from '../../shared/UserAvatar';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     comment: `${PREFIX}-comment`,
-    nestedComments: `${PREFIX}-nestedComments`,
+    nestedComments: `${PREFIX}-nested-comments`,
     avatar: `${PREFIX}-avatar`,
     content: `${PREFIX}-content`,
+    showMoreContent: `${PREFIX}-show-more-content`,
     author: `${PREFIX}-author`,
     textContent: `${PREFIX}-text-content`,
-    btnVotes: `${PREFIX}-btn-votes`,
-    votes: `${PREFIX}-votes`,
     commentActionsMenu: `${PREFIX}-comment-actions-menu`,
     deleted: `${PREFIX}-deleted`,
     activityAt: `${PREFIX}-activity-at`,
+    vote: `${PREFIX}-vote`,
+    voteAudience: `${PREFIX}-vote-audience`,
     reply: `${PREFIX}-reply`,
     contentSubSection: `${PREFIX}-comment-sub-section`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    overflow: 'visible',
-    width: '100%',
-    '& .MuiIcon-root': {
-        fontSize: '18px',
-        marginBottom: '0.5px'
-    },
-    [`& .${classes.comment}`]: {
-        paddingBottom: 0,
-        overflow: 'visible',
-        '& > div': {
-            alignItems: 'flex-start'
-        }
-    },
-    [`& .${classes.nestedComments}`]: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingLeft: 25,
-        '& ul.MuiList-root': {
-            paddingTop: 0,
-            paddingBottom: 0,
-            width: '100%',
-            '& li.MuiListItem-root': {
-                paddingTop: 5
-            }
-        },
-        [theme.breakpoints.up('sm')]: {
-            paddingLeft: 55
-        }
-    },
-    [`& .${classes.content}`]: {
-        position: 'relative',
-        display: 'flex',
-        '& .MuiCardContent-root': {
-            padding: '7px 13px 7px 13px',
-            flexGrow: 1
-        }
-    },
-    [`& .${classes.avatar}`]: {
-        top: theme.spacing()
-    },
-    [`& .${classes.author}`]: {
-        textDecoration: 'none',
-        color: theme.palette.text.primary,
-        '& span': {
-            fontWeight: '600'
-        }
-    },
-    [`& .${classes.textContent}`]: {
-        '& a': {
-            color: theme.palette.text.primary
-        },
-        '& p': {
-            marginBlockStart: '0.3em',
-            marginBlockEnd: '0.3em'
-        },
-        '& img': {
-            maxWidth: '100%'
-        }
-    },
-    [`& .${classes.commentActionsMenu}`]: {
-        alignItems: 'flexStart'
-    },
-    [`& .${classes.deleted}`]: {
-        opacity: 0.3
-    },
-    [`& .${classes.contentSubSection}`]: {
-        display: 'flex',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        color: theme.palette.text.secondary
-    },
-    [`& .${classes.activityAt}`]: {
-        display: 'flex',
-        textDecoration: 'none',
-        color: 'inherit'
-    },
-    [`& .${classes.reply}`]: {
-        textTransform: 'capitalize',
-        textDecoration: 'underline',
-        textDecorationStyle: 'dotted'
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 /**
- *> API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a comment item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CommentObject)
 
  #### Import
 
@@ -177,8 +76,8 @@ const Root = styled(Box, {
  |author|.SCCommentObject-author|Styles applied to the author section.|
  |content|.SCCommentObject-content|Styles applied to content section.|
  |textContent|.SCCommentObject-text-content|Styles applied to text content section.|
- |btnVotes|.SCCommentObject-btn-votes|Styles applied to the vote button element.|
- |votes|.SCCommentObject-votes|Styles applied to the votes section.|
+ |vote|.SCCommentObject-vote|Styles applied to the votes section.|
+ |btnVotes|.SCCommentObject-vote-audience|Styles applied to the votes audience section.|
  |commentActionsMenu|.SCCommentObject-comment-actions-menu|Styles applied to comment action menu element.|
  |deleted|.SCCommentObject-deleted|Styles applied to tdeleted element.|
  |activityAt|.SCCommentObject-activity-at|Styles applied to activity at section.|
@@ -193,16 +92,14 @@ export default function CommentObject(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = SCFeedObjectTypologyType.POST, commentReply, onOpenReply, onDelete, onVote, elevation = 0, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, ReplyCommentObjectProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = CacheStrategies.NETWORK_ONLY } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "CommentObjectSkeletonProps", "ReplyCommentObjectProps", "linkableCommentDateTime", "cacheStrategy"]);
+    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentReply, onOpenReply, onDelete, onCollapsed, onRestore, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = CacheStrategies.NETWORK_ONLY, CommentsObjectComponentProps = {} } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onCollapsed", "onRestore", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectComponentProps"]);
     // CONTEXT
     const scContext = useSCContext();
     const scUserContext = useContext(SCUserContext);
     const scRoutingContext = useSCRouting();
     const { enqueueSnackbar } = useSnackbar();
-    const intl = useIntl();
     // STATE
     const { obj, setObj } = useSCFetchCommentObject({ id: commentObjectId, commentObject, cacheStrategy });
-    const [loadingVote, setLoadingVote] = useState(false);
     const [replyComment, setReplyComment] = useState(commentReply);
     const [isReplying, setIsReplying] = useState(false);
     const [isSavingComment, setIsSavingComment] = useState(false);
@@ -215,9 +112,15 @@ export default function CommentObject(inProps) {
         parent: commentObject ? commentObject.id : commentObjectId,
         cacheStrategy
     });
+    const [openAlert, setOpenAlert] = useState(false);
+    // HANDLERS
+    const handleVoteSuccess = (contribution) => {
+        setObj(contribution);
+        onVote && onVote(contribution);
+    };
     /**
      * Update state object
-     * @param obj
+     * @param newObj
      */
     function updateObject(newObj) {
         LRUCache.set(SCCache.getCommentObjectCacheKey(obj.id), newObj);
@@ -234,26 +137,12 @@ export default function CommentObject(inProps) {
             React.createElement(DateTimeAgo, { date: comment.added_at }))) : (React.createElement(DateTimeAgo, { date: comment.added_at }))));
     }
     /**
-     * Render vote action
-     * @param comment
-     */
-    function renderActionVote(comment) {
-        return (React.createElement(LoadingButton, { variant: 'text', sx: { minWidth: 30 }, onClick: () => vote(comment), disabled: loadingVote, color: "inherit" }, comment.voted ? (React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: 'ui.commentObject.voteDown', defaultMessage: 'ui.commentObject.voteDown' }) },
-            React.createElement(Icon, { fontSize: 'small', color: "primary" }, "thumb_up_alt"))) : (React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: 'ui.commentObject.voteUp', defaultMessage: 'ui.commentObject.voteUp' }) },
-            React.createElement(Icon, { fontSize: 'small', color: "inherit" }, "thumb_up_off_alt")))));
-    }
-    /**
-     * Render Reply action
+     * Render CommentObjectReply action
      * @param comment
      */
     function renderActionReply(comment) {
-        return (React.createElement(Button, { className: classes.reply, variant: "text", onClick: () => reply(comment), color: "inherit" }, intl.formatMessage(messages.reply)));
-    }
-    /**
-     * Render Votes counter
-     */
-    function renderVotes(comment) {
-        return React.createElement(Votes, { commentObject: comment, sx: { display: { xs: 'none', sm: 'block' } } });
+        return (React.createElement(Button, { className: classes.reply, variant: "text", onClick: () => reply(comment) },
+            React.createElement(FormattedMessage, { id: "ui.commentObject.reply", defaultMessage: "ui.commentObject.reply" })));
     }
     /**
      * Handle reply: open Editor
@@ -268,58 +157,6 @@ export default function CommentObject(inProps) {
             onOpenReply && onOpenReply(comment);
         }
     }
-    /**
-     * Perform vote comment
-     */
-    const performVoteComment = useMemo(() => (comment) => {
-        return http
-            .request({
-            url: Endpoints.Vote.url({ type: SCCommentTypologyType, id: comment.id }),
-            method: Endpoints.Vote.method
-        })
-            .then((res) => {
-            if (res.status >= 300) {
-                return Promise.reject(res);
-            }
-            return Promise.resolve(res.data);
-        });
-    }, [obj]);
-    /**
-     * Handle vote comment
-     * @param comment
-     */
-    function vote(comment) {
-        if (!scUserContext.user) {
-            scContext.settings.handleAnonymousAction();
-        }
-        else {
-            if (UserUtils.isBlocked(scUserContext.user)) {
-                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
-                    variant: 'warning',
-                    autoHideDuration: 3000
-                });
-            }
-            else {
-                setLoadingVote(true);
-                performVoteComment(comment)
-                    .then((data) => {
-                    const newObj = obj;
-                    obj.voted = !obj.voted;
-                    obj.vote_count = obj.vote_count - (obj.voted ? -1 : 1);
-                    updateObject(obj);
-                    setLoadingVote(false);
-                    onVote && onVote(comment);
-                })
-                    .catch((error) => {
-                    Logger.error(SCOPE_SC_UI, error);
-                    enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
-                        variant: 'error',
-                        autoHideDuration: 3000
-                    });
-                });
-            }
-        }
-    }
     /**
      * Perform reply
      * Comment of second level
@@ -352,7 +189,10 @@ export default function CommentObject(inProps) {
             setIsReplying(true);
             performReply(comment)
                 .then((data) => {
-                updateObject(Object.assign(Object.assign({}, obj), { comment_count: obj.comment_count + 1, latest_comments: [...obj.latest_comments, data] }));
+                // if add a comment -> the comment must be untruncated
+                const _data = data;
+                _data.summary_truncated = false;
+                updateObject(Object.assign(Object.assign({}, obj), { comment_count: obj.comment_count + 1, latest_comments: [...obj.latest_comments, _data] }));
                 setReplyComment(null);
                 setIsReplying(false);
             })
@@ -370,54 +210,22 @@ export default function CommentObject(inProps) {
      * Handle comment delete
      */
     function handleDelete(comment) {
-        if (comment.parent) {
-            const _latestComment = obj.latest_comments.map((c) => {
-                if (c.id === comment.id) {
-                    c.deleted = !c.deleted;
-                }
-                return c;
-            });
-            updateObject(Object.assign({}, obj, { latest_comments: _latestComment }));
-        }
-        else {
-            const _comment = Object.assign({}, obj, { deleted: !obj.deleted });
-            updateObject(Object.assign({}, obj, { deleted: !obj.deleted }));
-            onDelete && onDelete(_comment);
-        }
+        updateObject(comment);
+        onDelete && onDelete(comment);
     }
     /**
      * Handle comment delete
      */
     function handleHide(comment) {
-        if (comment.parent) {
-            const _latestComment = obj.latest_comments.map((c) => {
-                if (c.id === comment.id) {
-                    c.collapsed = !c.collapsed;
-                }
-                return c;
-            });
-            updateObject(Object.assign({}, obj, { latest_comments: _latestComment }));
-        }
-        else {
-            updateObject(Object.assign({}, obj, { collapsed: !obj.collapsed }));
-        }
+        updateObject(Object.assign({}, obj, { collapsed: !obj.collapsed }));
+        onCollapsed && onCollapsed(comment);
     }
     /**
      * Handle comment restore
      */
     function handleRestore(comment) {
-        if (comment.parent) {
-            const _latestComment = obj.latest_comments.map((c) => {
-                if (c.id === comment.id) {
-                    c.deleted = false;
-                }
-                return c;
-            });
-            updateObject(Object.assign({}, obj, { latest_comments: _latestComment }));
-        }
-        else {
-            updateObject(Object.assign({}, obj, { deleted: false }));
-        }
+        updateObject(Object.assign({}, obj, { deleted: false }));
+        onRestore && onRestore(comment);
     }
     /**
      * Handle edit comment
@@ -484,39 +292,46 @@ export default function CommentObject(inProps) {
      */
     function renderComment(comment) {
         if (comment.deleted &&
-            (!scUserContext.user || (scUserContext.user && (!UserUtils.isStaff(scUserContext.user) || scUserContext.user.id !== comment.author.id)))) {
+            (!scUserContext.user || (scUserContext.user && !UserUtils.isStaff(scUserContext.user) && scUserContext.user.id !== comment.author.id))) {
             // render the comment if user is logged and is staff (admin, moderator)
             // or the comment author is the logged user
             return null;
         }
+        const summaryHtmlTruncated = 'summary_truncated' in comment ? comment.summary_truncated : false;
+        const commentHtml = 'summary_html' in comment && truncateContent && summaryHtmlTruncated ? comment.summary_html : comment.html;
+        const summaryHtml = getContributionHtml(commentHtml, scRoutingContext.url);
         return (React.createElement(React.Fragment, { key: comment.id },
             editComment && editComment.id === comment.id ? (React.createElement(Box, { className: classes.comment },
-                React.createElement(ReplyCommentObject, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, ReplyCommentObjectProps)))) : (React.createElement(BaseItem, { elevation: 0, className: classes.comment, image: React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) },
-                    React.createElement(Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar })), disableTypography: true, primary: React.createElement(React.Fragment, null,
+                React.createElement(CommentObjectReply, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)))) : (React.createElement(BaseItem, { elevation: 0, className: classes.comment, image: React.createElement(Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
+                    React.createElement(UserAvatar, { hide: !obj.author.community_badge },
+                        React.createElement(Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }))), disableTypography: true, primary: React.createElement(React.Fragment, null,
                     React.createElement(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest),
                         React.createElement(CardContent, { className: classNames({ [classes.deleted]: obj && obj.deleted }) },
-                            React.createElement(Link, { className: classes.author, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) },
+                            React.createElement(Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
                                 React.createElement(Typography, { component: "span" }, comment.author.username)),
-                            React.createElement(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: getContributionHtml(comment, scRoutingContext.url) } })),
+                            React.createElement(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }),
+                            summaryHtmlTruncated && truncateContent && (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.showMoreContent },
+                                React.createElement(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" })))),
                         scUserContext.user && (React.createElement(Box, { className: classes.commentActionsMenu },
                             React.createElement(ContributionActionsMenu, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit })))),
                     React.createElement(Box, { component: "span", className: classes.contentSubSection },
                         renderTimeAgo(comment),
                         React.createElement(Bullet, null),
-                        renderActionVote(comment),
+                        React.createElement(VoteButton, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }),
                         React.createElement(Bullet, null),
                         renderActionReply(comment),
-                        renderVotes(comment))) })),
+                        React.createElement(VoteAudienceButton, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment }))) })),
             comment.comment_count > 0 && React.createElement(Box, { className: classes.nestedComments }, renderLatestComment(comment)),
             scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (React.createElement(Box, { className: classes.nestedComments },
-                React.createElement(ReplyCommentObject, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, key: `reply-${replyComment.id}`, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, ReplyCommentObjectProps))))));
+                React.createElement(CommentObjectReply, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, key: `reply-${replyComment.id}`, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps))))));
     }
     /**
      * Render Latest Comment
      * @param comment
      */
     function renderLatestComment(comment) {
-        return (React.createElement(CommentsObject, { feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, cacheStrategy: cacheStrategy }));
+        return (React.createElement(CommentsObject, Object.assign({ feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy,
+                truncateContent }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, inPlaceLoadMoreContents: true }, CommentsObjectComponentProps, { cacheStrategy: cacheStrategy })));
     }
     /**
      * Render comments
@@ -531,6 +346,7 @@ export default function CommentObject(inProps) {
     /**
      * Render object
      */
-    return (React.createElement(Root, { id: id, className: classNames(classes.root, className) }, comment));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Root, { id: id, className: classNames(classes.root, className) }, comment),
+        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
-//# sourceMappingURL=CommentObject.js.map

package/lib/esm/components/CommentObject/Skeleton.d.ts

@@ -9,14 +9,13 @@
 
  #### Component Name
 
- The name `SCCommentObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCommentObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentObjectSkeleton-root|Styles applied to the root element.|
+ |root|.SCCommentObject-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CommentObjectSkeleton(props: any): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

package/lib/esm/components/CommentObject/Skeleton.js

@@ -1,41 +1,20 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import Widget from '../Widget';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-import { CardContent } from '@mui/material';
+import { CardContent, useTheme } from '@mui/material';
 import BaseItem from '../../shared/BaseItem';
-const PREFIX = 'SCCommentObjectSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     avatar: `${PREFIX}-avatar`,
     primaryContent: `${PREFIX}-primary-content`
 };
-const Root = styled(BaseItem)(({ theme }) => ({
-    [`&.${classes.root}`]: {
-        paddingBottom: theme.spacing(),
-        overflow: 'visible',
-        '& > div': {
-            alignItems: 'flex-start'
-        }
-    },
-    [`& .${classes.avatar}`]: {
-        top: theme.spacing()
-    },
-    [`& .${classes.primaryContent}`]: {
-        marginBottom: theme.spacing()
-    }
-}));
+const Root = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Comment Object Skeleton component. Learn about the available props and the CSS API.
 
@@ -47,21 +26,21 @@ const Root = styled(BaseItem)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCCommentObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCommentObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentObjectSkeleton-root|Styles applied to the root element.|
+ |root|.SCCommentObject-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CommentObjectSkeleton(props) {
     const { WidgetProps } = props, rest = __rest(props, ["WidgetProps"]);
-    return (React.createElement(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: 40, height: 40, className: classes.avatar }), secondary: React.createElement(React.Fragment, null,
+    const theme = useTheme();
+    return (React.createElement(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium, className: classes.avatar }), secondary: React.createElement(React.Fragment, null,
             React.createElement(Widget, Object.assign({}, WidgetProps),
                 React.createElement(CardContent, null,
                     React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", className: classes.primaryContent }),
                     React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" })))) })));
 }
-//# sourceMappingURL=Skeleton.js.map

package/lib/esm/components/CommentObject/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCommentObject";

package/lib/esm/components/CommentObject/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCCommentObject';

package/lib/esm/components/CommentObject/index.d.ts

@@ -2,4 +2,3 @@ import CommentObject, { CommentObjectProps } from './CommentObject';
 import CommentObjectSkeleton from './Skeleton';
 export default CommentObject;
 export { CommentObjectProps, CommentObjectSkeleton };
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/components/CommentObject/index.js

@@ -2,4 +2,3 @@ import CommentObject from './CommentObject';
 import CommentObjectSkeleton from './Skeleton';
 export default CommentObject;
 export { CommentObjectSkeleton };
-//# sourceMappingURL=index.js.map

package/lib/esm/components/CommentObjectReply/CommentObjectReply.d.ts

@@ -0,0 +1,72 @@
+import { WidgetProps } from '../Widget';
+export interface CommentObjectReplyProps extends WidgetProps {
+    /**
+     * Bind focus on mount
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Callback invoked after reply
+     * @param comment
+     */
+    onReply?: (comment: any) => void;
+    /**
+     * Callback invoked after save/edit
+     * @param comment
+     */
+    onSave?: (comment: any) => void;
+    /**
+     * Callback invoked after disccard save/edit
+     * @param comment
+     */
+    onCancel?: () => void;
+    /**
+     * Disable component
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Initial content
+     * @default ''
+     */
+    text?: string;
+    /**
+     * Initial content
+     * @default {variant: 'outlined'}
+     */
+    WidgetProps?: WidgetProps;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Comment Object Reply component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CommentObjectReply} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `CommentObjectReply` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.CommentObjectReply-root|Styles applied to the root element.|
+ |comment|.SCCommentObjectReply-comment|Styles applied to comment element.|
+ |hasValue|.SCCommentObjectReply-has-value|Styles applied to the comment element when editor is not empty.|
+ |avatar|.SCCommentObjectReply-avatar|Styles applied to the avatar element.|
+ |actions|.SCCommentObjectReply-actions|Styles applied to the actions section.|
+ |buttonReply|.SCCommentObjectReply-button-reply|Styles applied to reply button element.|
+ |buttonSave|.SCCommentObjectReply-button-save|Styles applied to save button element.|
+ |buttonCancel|.SCCommentObjectReply-button-cancel|Styles applied to the cancel button element.|
+
+ * @param inProps
+ */
+export default function CommentObjectReply(inProps: CommentObjectReplyProps): JSX.Element;