@selfcommunity/react-ui 0.7.56-alpha.0 → 0.8.0-alpha.0

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
@@ -133,16 +134,14 @@ export default function CommentObject(inProps) {
      * @param comment
      */
     function renderTimeAgo(comment) {
-        return (React.createElement(React.Fragment, null, linkableCommentDateTime ? (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.activityAt },
-            React.createElement(DateTimeAgo, { date: comment.added_at }))) : (React.createElement(DateTimeAgo, { date: comment.added_at }))));
+        return (_jsx(_Fragment, { children: linkableCommentDateTime ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { date: comment.added_at }) }))) : (_jsx(DateTimeAgo, { date: comment.added_at })) }));
     }
     /**
      * Render CommentObjectReply action
      * @param comment
      */
     function renderActionReply(comment) {
-        return (React.createElement(Button, { className: classes.reply, variant: "text", onClick: () => reply(comment) },
-            React.createElement(FormattedMessage, { id: "ui.commentObject.reply", defaultMessage: "ui.commentObject.reply" })));
+        return (_jsx(Button, Object.assign({ className: classes.reply, variant: "text", onClick: () => reply(comment) }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.reply", defaultMessage: "ui.commentObject.reply" }) })));
     }
     /**
      * Handle reply: open Editor
@@ -180,7 +179,7 @@ export default function CommentObject(inProps) {
      */
     function handleReply(comment) {
         if (UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -198,7 +197,7 @@ export default function CommentObject(inProps) {
             })
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
-                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                     variant: 'error',
                     autoHideDuration: 3000
                 });
@@ -258,7 +257,7 @@ export default function CommentObject(inProps) {
      */
     function handleSave(comment) {
         if (UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -279,7 +278,7 @@ export default function CommentObject(inProps) {
             })
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
-                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                     variant: 'error',
                     autoHideDuration: 3000
                 });
@@ -300,37 +299,14 @@ export default function CommentObject(inProps) {
         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(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, 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: 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),
-                        React.createElement(VoteButton, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }),
-                        React.createElement(Bullet, null),
-                        renderActionReply(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(CommentObjectReply, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, key: `reply-${replyComment.id}`, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps))))));
+        return (_jsxs(React.Fragment, { children: [editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsxs(_Fragment, { children: [_jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [_jsx(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 }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.showMoreContent }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(ContributionActionsMenu, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), _jsxs(Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), _jsx(Bullet, {}), _jsx(VoteButton, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), _jsx(Bullet, {}), renderActionReply(comment), _jsx(VoteAudienceButton, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && _jsx(Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (_jsx(Box, Object.assign({ className: classes.nestedComments }, { children: _jsx(CommentObjectReply, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
     }
     /**
      * Render Latest Comment
      * @param comment
      */
     function renderLatestComment(comment) {
-        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,
+        return (_jsx(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 })));
     }
     /**
@@ -341,12 +317,10 @@ export default function CommentObject(inProps) {
         comment = renderComment(obj);
     }
     else {
-        comment = React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps));
+        comment = _jsx(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps));
     }
     /**
      * Render object
      */
-    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) })));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: comment })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Widget from '../Widget';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -38,9 +38,5 @@ const Root = styled(BaseItem, {
 export default function CommentObjectSkeleton(props) {
     const { WidgetProps } = props, rest = __rest(props, ["WidgetProps"]);
     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%" })))) })));
+    return (_jsx(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium, className: classes.avatar }), secondary: _jsx(_Fragment, { children: _jsx(Widget, Object.assign({}, WidgetProps, { children: _jsxs(CardContent, { children: [_jsx(Skeleton, { animation: "wave", height: 10, width: "80%", className: classes.primaryContent }), _jsx(Skeleton, { animation: "wave", height: 10, width: "40%" })] }) })) }) })));
 }

package/lib/esm/components/CommentObjectReply/CommentObjectReply.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
 import { FormattedMessage } from 'react-intl';
@@ -115,15 +116,5 @@ export default function CommentObjectReply(inProps) {
         return _html === '' || _html === '<p class="SCEditor-paragraph"></p>' || _html === '<p class="SCEditor-paragraph"><br></p>';
     }, [html]);
     // RENDER
-    return (React.createElement(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: !scUserContext.user ? (React.createElement(Avatar, { variant: "circular", className: classes.avatar })) : (React.createElement(UserAvatar, { hide: !scUserContext.user.community_badge },
-            React.createElement(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }))), secondary: React.createElement(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps),
-            React.createElement(Editor, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }),
-            !isEditorEmpty && (React.createElement(Stack, { direction: "row", spacing: 2, className: classes.actions },
-                onReply && (React.createElement(LoadingButton, { variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply },
-                    React.createElement(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }))),
-                onSave && (React.createElement(React.Fragment, null,
-                    onCancel && (React.createElement(LoadingButton, { variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel },
-                        React.createElement(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }))),
-                    React.createElement(LoadingButton, { variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave },
-                        React.createElement(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }))))))) })));
+    return (_jsx(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: !scUserContext.user ? (_jsx(Avatar, { variant: "circular", className: classes.avatar })) : (_jsx(UserAvatar, Object.assign({ hide: !scUserContext.user.community_badge }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) }))), secondary: _jsxs(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [_jsx(Editor, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && (_jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }

package/lib/esm/components/CommentsFeedObject/CommentsFeedObject.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
 import CommentObject from '../CommentObject';
@@ -89,8 +90,7 @@ export default function CommentsFeedObject(inProps) {
      */
     const renderTitle = useMemo(() => () => {
         if (showTitle) {
-            return (React.createElement(Typography, { variant: "h6", gutterBottom: true, color: 'inherit' },
-                React.createElement(FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } })));
+            return (_jsx(Typography, Object.assign({ variant: "h6", gutterBottom: true, color: 'inherit' }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } }) })));
         }
         return null;
     }, [total, isLoading]);
@@ -98,15 +98,13 @@ export default function CommentsFeedObject(inProps) {
      * Render no comments
      */
     function renderNoCommentsFound() {
-        return (React.createElement(React.Fragment, null, renderNoComments ? (renderNoComments()) : (React.createElement(Box, { className: classes.noComments },
-            React.createElement(FormattedMessage, { id: "ui.commentsObject.noComments", defaultMessage: "ui.commentsObject.noComments" })))));
+        return (_jsx(_Fragment, { children: renderNoComments ? (renderNoComments()) : (_jsx(Box, Object.assign({ className: classes.noComments }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.noComments", defaultMessage: "ui.commentsObject.noComments" }) }))) }));
     }
     /**
      * Render comment not found
      */
     function renderCommentNotFoundError() {
-        return (React.createElement(React.Fragment, null, renderCommentNotFound ? (renderCommentNotFound()) : (React.createElement(Box, { className: classes.commentNotFound },
-            React.createElement(FormattedMessage, { id: "ui.commentsObject.commentNotFound", defaultMessage: "ui.commentsObject.commentNotFound" })))));
+        return (_jsx(_Fragment, { children: renderCommentNotFound ? (renderCommentNotFound()) : (_jsx(Box, Object.assign({ className: classes.commentNotFound }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.commentNotFound", defaultMessage: "ui.commentsObject.commentNotFound" }) }))) }));
     }
     /**
      * Get a single comment
@@ -197,7 +195,7 @@ export default function CommentsFeedObject(inProps) {
     /**
      * Render comments
      */
-    let commentsRendered = React.createElement(React.Fragment, null);
+    let commentsRendered = _jsx(_Fragment, {});
     if (commentsObject.componentLoaded && !total && !commentsObject.isLoadingNext && !isLoading) {
         /**
          * If comments were not found and loading is finished
@@ -215,14 +213,10 @@ export default function CommentsFeedObject(inProps) {
          *  the component will switch to 'load more pagination' mode automatically
          *  in case it needs to display a single comment
          */
-        commentsRendered = (React.createElement(React.Fragment, null,
-            Boolean((commentError || errorCommentObj) && !isLoading && !total) && renderCommentNotFoundError(),
-            React.createElement(CommentsObject, { feedObject: commentsObject.feedObject, comments: commentsObject.comments, endComments: [...(comment ? [comment] : []), ...(commentsOrderBy === SCCommentsOrderBy.ADDED_AT_ASC ? comments : [])], startComments: [...(commentsOrderBy === SCCommentsOrderBy.ADDED_AT_ASC ? [] : comments)], previous: commentsObject.previous, handlePrevious: commentsObject.getPreviousPage, isLoadingPrevious: commentsObject.isLoadingPrevious, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: commentsObject.getNextPage, page: commentsObject.page, previousPage: commentsObject.previousPage, nextPage: commentsObject.nextPage, infiniteScrolling: infiniteScrolling && commentsObject.total > 0 && !comment && !comments.length, CommentComponent: CommentComponent, CommentComponentProps: CommentComponentProps, CommentObjectSkeletonProps: CommentObjectSkeletonProps })));
+        commentsRendered = (_jsxs(_Fragment, { children: [Boolean((commentError || errorCommentObj) && !isLoading && !total) && renderCommentNotFoundError(), _jsx(CommentsObject, { feedObject: commentsObject.feedObject, comments: commentsObject.comments, endComments: [...(comment ? [comment] : []), ...(commentsOrderBy === SCCommentsOrderBy.ADDED_AT_ASC ? comments : [])], startComments: [...(commentsOrderBy === SCCommentsOrderBy.ADDED_AT_ASC ? [] : comments)], previous: commentsObject.previous, handlePrevious: commentsObject.getPreviousPage, isLoadingPrevious: commentsObject.isLoadingPrevious, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: commentsObject.getNextPage, page: commentsObject.page, previousPage: commentsObject.previousPage, nextPage: commentsObject.nextPage, infiniteScrolling: infiniteScrolling && commentsObject.total > 0 && !comment && !comments.length, CommentComponent: CommentComponent, CommentComponentProps: CommentComponentProps, CommentObjectSkeletonProps: CommentObjectSkeletonProps })] }));
     }
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { ref: commentsContainerRef }),
-        renderTitle(),
-        commentsRendered));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { ref: commentsContainerRef }, { children: [renderTitle(), commentsRendered] })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CommentsObjectSkeleton } from '../CommentsObject';
 import { PREFIX } from './constants';
 import { styled } from '@mui/material/styles';
@@ -10,5 +10,5 @@ const Root = styled(CommentsObjectSkeleton, {
     slot: 'SkeletonRoot'
 })(() => ({}));
 export default function CommentsFeedObjectSkeleton(props) {
-    return React.createElement(Root, Object.assign({ className: classes.root }, props));
+    return _jsx(Root, Object.assign({ className: classes.root }, props));
 }

package/lib/esm/components/CommentsObject/CommentsObject.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
@@ -88,7 +89,7 @@ export default function CommentsObject(inProps) {
             preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED] &&
             ((preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED] && scUserContext.user === null) ||
                 !preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED])) {
-            return (React.createElement(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_IN_COMMENTS }, (obj.categories.length && { categoriesId: obj.categories.map((c) => c.id) }))));
+            return (_jsx(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_IN_COMMENTS }, (obj.categories.length && { categoriesId: obj.categories.map((c) => c.id) }))));
         }
         return null;
     }, [JSON.stringify(obj)]);
@@ -124,45 +125,31 @@ export default function CommentsObject(inProps) {
      * Render button load previous comments
      */
     function renderLoadPreviousComments() {
-        return (React.createElement(Box, { className: classes.pagination },
-            isLoadingPrevious && React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })),
-            !isLoadingPrevious && (React.createElement(React.Fragment, null,
-                React.createElement(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
-                    ? { onClick: handlePrevious }
-                    : {
-                        component: Link,
-                        to: `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
-                    }), { disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } }),
-                    React.createElement(FormattedMessage, { id: "ui.commentsObject.loadPreviousComments", defaultMessage: "ui.commentsObject.loadPreviousComments" })),
-                !disablePaginationLinks && previousPage && previous && (React.createElement(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
-                        { [paginationLinksPageQueryParam]: previousPage }
-                    ])}`, className: classNames({ [classes.paginationLink]: hidePaginationLinks }) }, PaginationLinkProps),
-                    React.createElement(FormattedMessage, { id: "ui.commentsObject.previousComments", defaultMessage: "ui.commentsObject.previousComments" })))))));
+        return (_jsxs(Box, Object.assign({ className: classes.pagination }, { children: [isLoadingPrevious && _jsx(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })), !isLoadingPrevious && (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                            ? { onClick: handlePrevious }
+                            : {
+                                component: Link,
+                                to: `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
+                            }), { disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.loadPreviousComments", defaultMessage: "ui.commentsObject.loadPreviousComments" }) })), !disablePaginationLinks && previousPage && previous && (_jsx(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
+                                { [paginationLinksPageQueryParam]: previousPage }
+                            ])}`, className: classNames({ [classes.paginationLink]: hidePaginationLinks }) }, PaginationLinkProps, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.previousComments", defaultMessage: "ui.commentsObject.previousComments" }) })))] }))] })));
     }
     /**
      * Footer with n comments of, only for load more pagination mode
      */
     function renderLoadNextComments() {
-        return (React.createElement(Box, { className: classes.pagination }, isLoadingNext ? (React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 }))) : (React.createElement(React.Fragment, null,
-            React.createElement(InView, { as: "div", onChange: handleScrollEnd, threshold: 0.5 },
-                React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                    React.createElement(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
-                        ? { onClick: handleNext }
-                        : {
-                            component: Link,
-                            to: nextPage && next
-                                ? `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
-                                    { [paginationLinksPageQueryParam]: nextPage }
-                                ])}`
-                                : `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
-                        }), { disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } }),
-                        React.createElement(FormattedMessage, { id: "ui.commentsObject.loadMoreComments", defaultMessage: "ui.commentsObject.loadMoreComments" })),
-                    showCommentsCounter() && (React.createElement(Typography, { variant: "body1", classes: { root: classes.commentsCounter } },
-                        React.createElement(FormattedMessage, { id: "ui.commentsObject.numberOfComments", defaultMessage: "ui.commentsObject.numberOfComments", values: { loaded: totalLoadedComments, total: totalComments } }))))),
-            !disablePaginationLinks && nextPage && next && (React.createElement(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
-                    { [paginationLinksPageQueryParam]: nextPage }
-                ])}`, className: classNames({ [classes.paginationLink]: hidePaginationLinks }) }, PaginationLinkProps),
-                React.createElement(FormattedMessage, { id: "ui.commentsObject.nextComments", defaultMessage: "ui.commentsObject.nextComments" })))))));
+        return (_jsx(Box, Object.assign({ className: classes.pagination }, { children: isLoadingNext ? (_jsx(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 }))) : (_jsxs(_Fragment, { children: [_jsx(InView, Object.assign({ as: "div", onChange: handleScrollEnd, threshold: 0.5 }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                                    ? { onClick: handleNext }
+                                    : {
+                                        component: Link,
+                                        to: nextPage && next
+                                            ? `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
+                                                { [paginationLinksPageQueryParam]: nextPage }
+                                            ])}`
+                                            : `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
+                                    }), { disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.loadMoreComments", defaultMessage: "ui.commentsObject.loadMoreComments" }) })), showCommentsCounter() && (_jsx(Typography, Object.assign({ variant: "body1", classes: { root: classes.commentsCounter } }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.numberOfComments", defaultMessage: "ui.commentsObject.numberOfComments", values: { loaded: totalLoadedComments, total: totalComments } }) })))] })) })), !disablePaginationLinks && nextPage && next && (_jsx(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
+                            { [paginationLinksPageQueryParam]: nextPage }
+                        ])}`, className: classNames({ [classes.paginationLink]: hidePaginationLinks }) }, PaginationLinkProps, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.nextComments", defaultMessage: "ui.commentsObject.nextComments" }) })))] })) })));
     }
     /**
      * Remove duplicate comments (from header or footer)
@@ -175,20 +162,18 @@ export default function CommentsObject(inProps) {
      * Render comments and load others with load more button
      */
     function renderComments(comments) {
-        return (React.createElement(React.Fragment, null, comments.map((comment, index) => (React.createElement(React.Fragment, { key: index },
-            React.createElement(CommentComponent, Object.assign({ key: comment.id, commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps })),
-            advPosition === index && renderAdvertising())))));
+        return (_jsx(_Fragment, { children: comments.map((comment, index) => (_jsxs(React.Fragment, { children: [_jsx(CommentComponent, Object.assign({ commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }), comment.id), advPosition === index && renderAdvertising()] }, index))) }));
     }
     /**
      * Render comments
      */
-    let commentsRendered = React.createElement(React.Fragment, null);
+    let commentsRendered = _jsx(_Fragment, {});
     if (!obj || ((isLoadingPrevious || isLoadingNext) && !comments.length)) {
         /**
          * Until the contribution has not been founded and there are
          * no comments during loading render skeletons
          */
-        commentsRendered = React.createElement(CommentsObjectSkeleton, Object.assign({ CommentObjectSkeletonProps: CommentObjectSkeletonProps }, CommentsObjectSkeletonProps));
+        commentsRendered = _jsx(CommentsObjectSkeleton, Object.assign({ CommentObjectSkeletonProps: CommentObjectSkeletonProps }, CommentsObjectSkeletonProps));
     }
     else {
         /**
@@ -199,16 +184,10 @@ export default function CommentsObject(inProps) {
          *  the component will switch to 'load more pagination' mode automatically
          *  in case it needs to display a single comment or newComments
          */
-        commentsRendered = (React.createElement(React.Fragment, null,
-            previous && renderLoadPreviousComments(),
-            renderComments(comments),
-            next && renderLoadNextComments()));
+        commentsRendered = (_jsxs(_Fragment, { children: [previous && renderLoadPreviousComments(), renderComments(comments), next && renderLoadNextComments()] }));
     }
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        renderComments(getFilteredComments(startComments)),
-        commentsRendered,
-        renderComments(getFilteredComments(endComments))));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [renderComments(getFilteredComments(startComments)), commentsRendered, renderComments(getFilteredComments(endComments))] })));
 }

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { CommentObjectSkeleton } from '../CommentObject';
 import { Box } from '@mui/material';
@@ -33,5 +33,5 @@ const Root = styled(Box, {
  */
 export default function CommentsObjectSkeleton(props) {
     const { count = 3, CommentObjectSkeletonProps = {} } = props, rest = __rest(props, ["count", "CommentObjectSkeletonProps"]);
-    return (React.createElement(Root, Object.assign({ className: classes.root }, rest), [...Array(count)].map((comment, index) => (React.createElement(CommentObjectSkeleton, Object.assign({ key: index }, CommentObjectSkeletonProps))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count)].map((comment, index) => (_jsx(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps), index))) })));
 }

package/lib/esm/components/Composer/Attributes/Attributes.d.ts

@@ -16,7 +16,7 @@ export interface AttributesProps extends Omit<BoxProps, 'value' | 'onChange' | '
      * @param value
      * @default empty object
      */
-    onClick?: (attribute: 'categories' | 'group' | 'addressing' | 'location') => void;
+    onClick?: (attribute: 'categories' | 'event' | 'group' | 'addressing' | 'location') => void;
 }
 declare const _default: (props: AttributesProps) => JSX.Element;
 export default _default;

package/lib/esm/components/Composer/Attributes/Attributes.js

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { Box, Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
@@ -13,7 +14,7 @@ const Root = styled(Box, {
     slot: 'AttributesRoot'
 })(() => ({}));
 export default (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     // PROPS
     const { className = null, value = null, onChange = null, onClick = null } = props;
     // HANDLERS
@@ -23,6 +24,12 @@ export default (props) => {
     const handleClickCategory = useCallback(() => {
         onClick && onClick('categories');
     }, [onClick]);
+    const handleDeleteEvent = useCallback(() => {
+        onChange && onChange(Object.assign(Object.assign({}, value), { event: null }));
+    }, [value, onChange]);
+    const handleClickEvent = useCallback(() => {
+        onClick && onClick('event');
+    }, [onClick]);
     const handleDeleteGroup = useCallback(() => {
         onChange && onChange(Object.assign(Object.assign({}, value), { group: null }));
     }, [value, onChange]);
@@ -41,11 +48,7 @@ export default (props) => {
     const handleClickLocation = useCallback(() => {
         onClick && onClick('location');
     }, [onClick]);
-    return (React.createElement(Root, { className: classNames(classes.root, className) },
-        ((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-            (value === null || value === void 0 ? void 0 : value.categories.map((c) => (React.createElement(Chip, { key: c.id, label: c.name, onDelete: handleDeleteCategory(c.id), icon: React.createElement(Icon, null, "category"), onClick: handleClickCategory })))),
-        (value === null || value === void 0 ? void 0 : value.group) && (React.createElement(Chip, { key: value === null || value === void 0 ? void 0 : value.group.id, label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: React.createElement(Icon, null, "groups"), onClick: handleClickGroup, disabled: !((_b = value === null || value === void 0 ? void 0 : value.group) === null || _b === void 0 ? void 0 : _b.subscription_status) })),
-        ((_c = value === null || value === void 0 ? void 0 : value.addressing) === null || _c === void 0 ? void 0 : _c.length) > 0 &&
-            (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (React.createElement(TagChip, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: React.createElement(Icon, null, "label"), onClick: handleClickTag })))),
-        (value === null || value === void 0 ? void 0 : value.location) && (React.createElement(Chip, { icon: React.createElement(Icon, null, "add_location_alt"), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                (value === null || value === void 0 ? void 0 : value.categories.map((c) => (_jsx(Chip, { label: c.name, onDelete: handleDeleteCategory(c.id), icon: _jsx(Icon, { children: "category" }), onClick: handleClickCategory }, c.id)))), (value === null || value === void 0 ? void 0 : value.group) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: _jsx(Icon, { children: "groups" }), onClick: handleClickGroup, disabled: !((_b = value === null || value === void 0 ? void 0 : value.group) === null || _b === void 0 ? void 0 : _b.subscription_status) }, value === null || value === void 0 ? void 0 : value.group.id)), (value === null || value === void 0 ? void 0 : value.event) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.event.name, onDelete: handleDeleteEvent, icon: _jsx(Icon, { children: "CalendarIcon" }), onClick: handleClickEvent, disabled: !((_c = value === null || value === void 0 ? void 0 : value.event) === null || _c === void 0 ? void 0 : _c.subscription_status) }, value === null || value === void 0 ? void 0 : value.event.id)), ((_d = value === null || value === void 0 ? void 0 : value.addressing) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
+                (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (_jsx(TagChip, { tag: t, onDelete: handleDeleteTag(t.id), icon: _jsx(Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), (value === null || value === void 0 ? void 0 : value.location) && (_jsx(Chip, { icon: _jsx(Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
 };

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

@@ -1,5 +1,5 @@
 import { SyntheticEvent } from 'react';
-import { SCCategoryType, SCContributionType, SCFeedDiscussionType, SCFeedPostType, SCFeedStatusType, SCFeedTypologyType, SCGroupType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
+import { SCCategoryType, SCContributionType, SCEventType, SCFeedDiscussionType, SCFeedPostType, SCFeedStatusType, SCFeedTypologyType, SCGroupType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
 import { DialogProps } from '@mui/material';
 import { EditorProps } from '../Editor';
 import { SCMediaObjectType } from '../../types/media';
@@ -27,6 +27,7 @@ export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scrol
         title?: string;
         text?: string;
         categories?: SCCategoryType[];
+        event?: SCEventType;
         group?: SCGroupType;
         audience?: string;
         addressing?: SCTagType[];
@@ -53,7 +54,7 @@ export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scrol
      * Callback triggered on close click
      * @default null
      */
-    onClose?: (event: SyntheticEvent) => void;
+    onClose?: (e: SyntheticEvent) => void;
     /**
      * The feed where the component is rendered
      * @default SCFeedTypologyType.HOME