@selfcommunity/react-ui 0.7.50-events.41 → 0.7.50-events.44

package/lib/esm/components/FeedObject/FeedObject.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import CardContent from '@mui/material/CardContent';
@@ -228,13 +229,13 @@ export default function FeedObject(inProps) {
      * else render ContributionActionsMenu
      */
     const renderHeaderAction = () => {
-        return (React.createElement(ContributionActionsMenu, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, onEditContribution: handleToggleEdit, onHideContribution: handleHide, onDeleteContribution: handleDelete, onRestoreContribution: handleRestore, onSuspendNotificationContribution: handleSuspendNotification, onFlagContribution: handleFlag }, ContributionActionsMenuProps)));
+        return (_jsx(ContributionActionsMenu, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, onEditContribution: handleToggleEdit, onHideContribution: handleHide, onDeleteContribution: handleDelete, onRestoreContribution: handleRestore, onSuspendNotificationContribution: handleSuspendNotification, onFlagContribution: handleFlag }, ContributionActionsMenuProps)));
     };
     /**
      * Handle flag obj
      */
     const handleFlag = useCallback((obj, type, flagged) => {
-        enqueueSnackbar(flagged ? (React.createElement(FormattedMessage, { id: "ui.feedObject.flagSent", defaultMessage: "ui.feedObject.flagSent" })) : (React.createElement(FormattedMessage, { id: "ui.feedObject.flagRemoved", defaultMessage: "ui.feedObject.flagRemoved" })), {
+        enqueueSnackbar(flagged ? (_jsx(FormattedMessage, { id: "ui.feedObject.flagSent", defaultMessage: "ui.feedObject.flagSent" })) : (_jsx(FormattedMessage, { id: "ui.feedObject.flagRemoved", defaultMessage: "ui.feedObject.flagRemoved" })), {
             autoHideDuration: 3000
         });
     }, []);
@@ -261,7 +262,7 @@ export default function FeedObject(inProps) {
      */
     const handleSuspendNotification = useCallback(() => {
         updateObject(Object.assign({}, obj, { suspended: !obj.suspended }));
-        enqueueSnackbar(obj.suspended ? (React.createElement(FormattedMessage, { id: "ui.feedObject.notificationsEnabled", defaultMessage: "ui.feedObject.notificationsEnabled" })) : (React.createElement(FormattedMessage, { id: "ui.feedObject.notificationsDisabled", defaultMessage: "ui.feedObject.notificationsDisabled" })), {
+        enqueueSnackbar(obj.suspended ? (_jsx(FormattedMessage, { id: "ui.feedObject.notificationsEnabled", defaultMessage: "ui.feedObject.notificationsEnabled" })) : (_jsx(FormattedMessage, { id: "ui.feedObject.notificationsDisabled", defaultMessage: "ui.feedObject.notificationsDisabled" })), {
             autoHideDuration: 3000
         });
     }, [obj]);
@@ -347,7 +348,7 @@ export default function FeedObject(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else 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
             });
@@ -379,7 +380,7 @@ export default function FeedObject(inProps) {
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
                 if (!catchUnauthorizedActionByBlockedUser(error, scUserContext.managers.blockedUsers.isBlocked(obj.author), enqueueSnackbar)) {
-                    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
                     });
@@ -397,25 +398,19 @@ export default function FeedObject(inProps) {
             ? getContributionHtml(obj.html, scRoutingContext.url)
             : getContributionHtml(contributionHtml, scRoutingContext.url);
         if (template === SCFeedObjectTemplateType.SHARE) {
-            return (React.createElement(Link, { to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.text },
-                React.createElement(Typography, { component: "span", className: classes.text, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: {
-                        __html: summaryHtml
-                    } }),
-                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
-                    React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
+            return (_jsxs(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.text }, { children: [_jsx(Typography, { component: "span", className: classes.text, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: {
+                            __html: summaryHtml
+                        } }), !expanded && summaryHtmlTruncated && (_jsx(Button, Object.assign({ size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" }) })))] })));
         }
         else if (template === SCFeedObjectTemplateType.DETAIL) {
-            return (React.createElement(Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
+            return (_jsx(Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
                     __html: summaryHtml
                 } }));
         }
         else {
-            return (React.createElement(Typography, { component: "div", gutterBottom: true, className: classes.text },
-                React.createElement(Typography, { component: "span", dangerouslySetInnerHTML: {
-                        __html: summaryHtml
-                    } }),
-                !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
-                    React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
+            return (_jsxs(Typography, Object.assign({ component: "div", gutterBottom: true, className: classes.text }, { children: [_jsx(Typography, { component: "span", dangerouslySetInnerHTML: {
+                            __html: summaryHtml
+                        } }), !expanded && summaryHtmlTruncated && (_jsx(Button, Object.assign({ size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" }) })))] })));
         }
     }, [obj, template, expanded]);
     /**
@@ -426,108 +421,26 @@ export default function FeedObject(inProps) {
     let objElement;
     if ((!obj && error) ||
         ((obj === null || obj === void 0 ? void 0 : obj.deleted) && !scUserContext.user && !(UserUtils.isAdmin(scUserContext.user) || UserUtils.isModerator(scUserContext.user)))) {
-        objElement = (React.createElement(CardContent, { className: classNames(classes.error, classes.content) },
-            React.createElement(FormattedMessage, { id: "ui.feedObject.error", defaultMessage: "ui.feedObject.error" })));
+        objElement = (_jsx(CardContent, Object.assign({ className: classNames(classes.error, classes.content) }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.error", defaultMessage: "ui.feedObject.error" }) })));
     }
     else if (template === SCFeedObjectTemplateType.PREVIEW ||
         template === SCFeedObjectTemplateType.DETAIL ||
         template === SCFeedObjectTemplateType.SEARCH) {
-        objElement = (React.createElement(React.Fragment, null, obj ? (React.createElement(Box, { className: classNames({ [classes.deleted]: obj && obj.deleted }) },
-            obj.categories.length > 0 && (React.createElement("div", { className: classes.category },
-                React.createElement(React.Fragment, null,
-                    obj.group && (React.createElement("div", { className: classes.group },
-                        React.createElement(Chip, { color: "secondary", size: "small", key: obj.group.id, icon: React.createElement(Icon, null, "groups"), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }))),
-                    obj.event && (React.createElement("div", { className: classes.event },
-                        React.createElement(Chip, { color: "secondary", size: "small", key: obj.event.id, label: obj.event.name, icon: React.createElement(Icon, null, "CalendarIcon"), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true })))),
-                obj.categories.map((c) => (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c), key: c.id },
-                    React.createElement(Typography, { variant: "overline" }, c.name)))))),
-            obj.group && !obj.categories.length && (React.createElement("div", { className: classes.group },
-                React.createElement(Chip, { color: "secondary", size: "small", key: obj.group.id, icon: React.createElement(Icon, null, "groups"), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }))),
-            obj.event && !obj.categories.length && (React.createElement("div", { className: classes.event },
-                React.createElement(Chip, { color: "secondary", size: "small", key: obj.event.id, icon: React.createElement(Icon, null, "CalendarIcon"), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }))),
-            React.createElement(CardHeader, { className: classes.header, avatar: React.createElement(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }),
-                    React.createElement(UserAvatar, { hide: !obj.author.community_badge },
-                        React.createElement(Avatar, { "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, obj.author.username))), title: React.createElement(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }), obj.author.username), subheader: React.createElement(React.Fragment, null,
-                    React.createElement(Link, { to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt },
-                        React.createElement(DateTimeAgo, { component: 'span', date: obj.added_at })),
-                    obj.location && (React.createElement(React.Fragment, null,
-                        React.createElement(Bullet, null),
-                        React.createElement(Box, { className: classes.location },
-                            React.createElement(Icon, null, "add_location_alt"), (_a = obj.location) === null || _a === void 0 ? void 0 :
-                            _a.location))),
-                    React.createElement(Bullet, null),
-                    React.createElement(Box, { className: classes.tag }, obj.addressing.length > 0 ? (React.createElement(Tags, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? (React.createElement(Tooltip, { title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` },
-                        React.createElement(Icon, { color: "disabled", fontSize: "small" }, "groups"))) : (React.createElement(Tooltip, { title: `${intl.formatMessage(messages.visibleToAll)}` },
-                        React.createElement(Icon, { color: "disabled", fontSize: "small" }, "public"))))), action: renderHeaderAction() }),
-            React.createElement(CardContent, { classes: { root: classes.content } },
-                React.createElement(Box, { className: classes.titleSection }, 'title' in obj && (React.createElement(React.Fragment, null, template === SCFeedObjectTemplateType.DETAIL ? (React.createElement(Typography, { variant: "body1", gutterBottom: true, className: classes.title }, obj.title)) : (React.createElement(Link, { to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) },
-                    React.createElement(Typography, { variant: "body1", gutterBottom: true, className: classes.title }, obj.title)))))),
-                React.createElement(Box, { className: classes.textSection }, getContributionSummary(obj, template)),
-                React.createElement(Box, { className: classes.mediasSection },
-                    React.createElement(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps))),
-                React.createElement(Box, { className: classes.pollsSection }, obj['poll'] && (React.createElement(PollObject, Object.assign({ visible: pollVisible ||
-                        template === SCFeedObjectTemplateType.DETAIL ||
-                        Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps)))),
-                React.createElement(Box, { className: classes.infoSection },
-                    React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                        !hideParticipantsPreview && (React.createElement(ContributorsFeedObject, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy }))),
-                        !hideFollowAction && React.createElement(Follow, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))))),
-            React.createElement(CardActions, { className: classes.actionsSection },
-                React.createElement(Actions, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideCommentAction: template === SCFeedObjectTemplateType.DETAIL, handleExpandActivities: template === SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)),
-                (template === SCFeedObjectTemplateType.DETAIL || expandedActivities) && (React.createElement(Box, { className: classes.replyContent },
-                    React.createElement(CommentObjectReplyComponent, Object.assign({ id: `reply-feedObject-${obj.id}`, onReply: handleReply, editable: !isReplying || Boolean(obj), key: Number(isReplying) }, CommentObjectReplyComponentProps))))),
-            template === SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (React.createElement(Collapse, { in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } },
-                React.createElement(CardContent, { className: classes.activitiesContent },
-                    React.createElement(Activities, Object.assign({ feedObject: obj, key: selectedActivities, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
-                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectComponentProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
-                            CommentObjectSkeletonProps: CommentObjectSkeletonProps
-                        }, cacheStrategy: cacheStrategy }, ActivitiesProps))))),
-            composerOpen && (React.createElement(Composer, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true })))) : (React.createElement(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps)))));
+        objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(Box, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", label: obj.event.name, icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) })))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) }))), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: 'span', date: obj.added_at }) })), obj.location && (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsxs(Box, Object.assign({ className: classes.location }, { children: [_jsx(Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), _jsx(Bullet, {}), _jsx(Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? (_jsx(Tags, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))) }))] }), action: renderHeaderAction() }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(_Fragment, { children: template === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ visible: pollVisible ||
+                                        template === SCFeedObjectTemplateType.DETAIL ||
+                                        Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), _jsx(Box, Object.assign({ className: classes.infoSection }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!hideParticipantsPreview && (_jsx(ContributorsFeedObject, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy }))), !hideFollowAction && _jsx(Follow, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) }))] })), _jsxs(CardActions, Object.assign({ className: classes.actionsSection }, { children: [_jsx(Actions, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideCommentAction: template === SCFeedObjectTemplateType.DETAIL, handleExpandActivities: template === SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), (template === SCFeedObjectTemplateType.DETAIL || expandedActivities) && (_jsx(Box, Object.assign({ className: classes.replyContent }, { children: _jsx(CommentObjectReplyComponent, Object.assign({ id: `reply-feedObject-${obj.id}`, onReply: handleReply, editable: !isReplying || Boolean(obj) }, CommentObjectReplyComponentProps), Number(isReplying)) })))] })), template === SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (_jsx(Collapse, Object.assign({ in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } }, { children: _jsx(CardContent, Object.assign({ className: classes.activitiesContent }, { children: _jsx(Activities, Object.assign({ feedObject: obj, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
+                                    CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectComponentProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
+                                    CommentObjectSkeletonProps: CommentObjectSkeletonProps
+                                }, cacheStrategy: cacheStrategy }, ActivitiesProps), selectedActivities) })) }))), composerOpen && (_jsx(Composer, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true }))] }))) : (_jsx(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
     }
     else if (template === SCFeedObjectTemplateType.SHARE) {
-        objElement = (React.createElement(React.Fragment, null, obj ? (React.createElement(React.Fragment, null,
-            obj.categories.length > 0 && (React.createElement("div", { className: classes.category },
-                React.createElement(React.Fragment, null,
-                    obj.group && (React.createElement("div", { className: classes.group },
-                        React.createElement(Chip, { color: "secondary", size: "small", key: obj.group.id, icon: React.createElement(Icon, null, "groups"), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }))),
-                    obj.event && (React.createElement("div", { className: classes.event },
-                        React.createElement(Chip, { color: "secondary", size: "small", key: obj.event.id, icon: React.createElement(Icon, null, "CalendarIcon"), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true })))),
-                obj.categories.map((c) => (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c), key: c.id },
-                    React.createElement(Typography, { variant: "overline" }, c.name)))))),
-            obj.group && !obj.categories.length && (React.createElement("div", { className: classes.group },
-                React.createElement(Chip, { color: "secondary", size: "small", key: obj.group.id, icon: React.createElement(Icon, null, "groups"), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }))),
-            obj.event && !obj.categories.length && (React.createElement("div", { className: classes.event },
-                React.createElement(Chip, { color: "secondary", size: "small", key: obj.event.id, icon: React.createElement(Icon, null, "groups"), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }))),
-            React.createElement(CardHeader, { classes: { root: classes.header }, avatar: React.createElement(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }),
-                    React.createElement(UserAvatar, { hide: !obj.author.community_badge },
-                        React.createElement(Avatar, { "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, obj.author.username))), title: React.createElement(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }), obj.author.username), subheader: React.createElement(Link, { to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt },
-                    React.createElement(DateTimeAgo, { date: obj.added_at })) }),
-            React.createElement(CardContent, { classes: { root: classes.content } },
-                React.createElement(Box, { className: classes.titleSection }, 'title' in obj && (React.createElement(Link, { to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) },
-                    React.createElement(Typography, { variant: "body1", gutterBottom: true, className: classes.title }, obj.title)))),
-                React.createElement(Box, { className: classes.textSection }, getContributionSummary(obj, template)),
-                React.createElement(Box, { className: classes.mediasSection },
-                    React.createElement(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps))),
-                React.createElement(Box, { className: classes.pollsSection }, obj['poll'] && (React.createElement(PollObject, Object.assign({ feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, visible: Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length) }, PollObjectProps))))))) : (React.createElement(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps)))));
+        objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(React.Fragment, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) })))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) }))), _jsx(CardHeader, { classes: { root: classes.header }, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { date: obj.added_at }) })) }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, visible: Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length) }, PollObjectProps))) }))] }))] })) : (_jsx(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
     }
     else {
-        objElement = (React.createElement(React.Fragment, null, obj ? (React.createElement(BaseItem, { elevation: 0, className: classes.snippet, image: React.createElement(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }),
-                React.createElement(UserAvatar, { hide: !obj.author.community_badge },
-                    React.createElement(Avatar, { alt: obj.author.username, variant: "circular", src: obj.author.avatar, className: classes.avatar }))), primary: React.createElement(Box, null,
-                React.createElement(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }), obj.author.username),
-                React.createElement(Typography, { variant: "body2", className: classes.snippetContent },
-                    React.createElement(Link, { to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, getContributionSnippet(obj)))), disableTypography: true, secondary: React.createElement(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" },
-                React.createElement(Link, { to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt },
-                    React.createElement(DateTimeAgo, { component: "span", date: obj.added_at })),
-                React.createElement(Button, { component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), variant: "text", color: "secondary", size: "small" },
-                    React.createElement(FormattedMessage, { id: "ui.feedObject.comment", defaultMessage: "ui.feedObject.comment" }))) })) : (React.createElement(FeedObjectSkeleton, Object.assign({}, FeedObjectSkeletonProps)))));
+        objElement = (_jsx(React.Fragment, { children: obj ? (_jsx(BaseItem, { elevation: 0, className: classes.snippet, image: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.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: obj.author.avatar, className: classes.avatar }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.snippetContent }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: getContributionSnippet(obj) })) }))] }), disableTypography: true, secondary: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: "span", date: obj.added_at }) })), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), variant: "text", color: "secondary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.comment", defaultMessage: "ui.feedObject.comment" }) }))] })) })) : (_jsx(FeedObjectSkeleton, Object.assign({}, FeedObjectSkeletonProps))) }));
     }
     /**
      * Renders root object
      */
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest),
-            obj && markRead && React.createElement(MarkRead, { endpoint: Endpoints.FeedObjectMarkRead, data: { object: [obj.id] } }),
-            objElement),
-        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest, { children: [obj && markRead && _jsx(MarkRead, { endpoint: Endpoints.FeedObjectMarkRead, data: { object: [obj.id] } }), objElement] })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/FeedObject/Poll/Choice/Choice.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { useSCContext, useSCUser } from '@selfcommunity/react-core';
 import { Box, Card, Typography } from '@mui/material';
@@ -21,9 +21,7 @@ const Root = styled(Card, {
 })(() => ({}));
 function LinearProgressWithLabel(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(Box, { className: className },
-        React.createElement(LinearProgress, Object.assign({ variant: "determinate" }, props)),
-        React.createElement(Typography, { variant: "body2", color: "text.secondary" }, `${Math.round(props.value)}%`)));
+    return (_jsxs(Box, Object.assign({ className: className }, { children: [_jsx(LinearProgress, Object.assign({ variant: "determinate" }, props)), _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: `${Math.round(props.value)}%` }))] })));
 }
 export default function Choice(props) {
     //PROPS
@@ -52,8 +50,5 @@ export default function Choice(props) {
     /**
      * Renders root element
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        React.createElement(Typography, { className: classes.label }, choiceObj.choice),
-        React.createElement(LinearProgressWithLabel, { className: classes.progress, value: renderVotes(choiceObj.vote_count, votes) }),
-        React.createElement(LoadingButton, { loading: isVoting === choiceObj.id, variant: choiceObj.voted ? 'contained' : 'outlined', size: "small", disabled: disabled || isVoting !== null || votable, className: classes.vote, onClick: handleVoteAction }, choiceObj.voted ? (React.createElement(Icon, null, "check")) : (React.createElement(FormattedMessage, { id: "ui.feedObject.poll.choice.vote", defaultMessage: "ui.feedObject.poll.choice.vote" })))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ className: classes.label }, { children: choiceObj.choice })), _jsx(LinearProgressWithLabel, { className: classes.progress, value: renderVotes(choiceObj.vote_count, votes) }), _jsx(LoadingButton, Object.assign({ loading: isVoting === choiceObj.id, variant: choiceObj.voted ? 'contained' : 'outlined', size: "small", disabled: disabled || isVoting !== null || votable, className: classes.vote, onClick: handleVoteAction }, { children: choiceObj.voted ? (_jsx(Icon, { children: "check" })) : (_jsx(FormattedMessage, { id: "ui.feedObject.poll.choice.vote", defaultMessage: "ui.feedObject.poll.choice.vote" })) }))] })));
 }

package/lib/esm/components/FeedObject/Poll/Poll.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useState } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Card from '@mui/material/Card';
 import { http, Endpoints } from '@selfcommunity/api-services';
@@ -147,26 +148,9 @@ export default function PollObject(props) {
     /**
      * Renders the poll object
      */
-    let objElement = React.createElement(React.Fragment, null);
+    let objElement = _jsx(_Fragment, {});
     if (pollObject) {
-        objElement = (React.createElement(React.Fragment, null,
-            React.createElement(CardHeader, { title: React.createElement(React.Fragment, null,
-                    React.createElement(Button, { className: classes.toggleButton, onClick: handleToggleCollapsedClick, "aria-expanded": collapsed, endIcon: React.createElement(Icon, { className: classNames(classes.expandIcon, { [classes.collapsedIcon]: collapsed }) }, "arrow_upward") }, collapsed ? intl.formatMessage(messages.showPoll) : intl.formatMessage(messages.hidePoll))) }),
-            React.createElement(Collapse, { in: !collapsed, timeout: "auto", unmountOnExit: true },
-                React.createElement(CardContent, null,
-                    React.createElement(Typography, { variant: "body1", className: classes.title }, obj.title),
-                    obj.expiration_at && Date.parse(obj.expiration_at) >= new Date().getTime() && (React.createElement(Typography, { variant: "body2", className: classes.expiration },
-                        `${intl.formatMessage(messages.expDate)}`,
-                        `${intl.formatDate(Date.parse(obj.expiration_at), { year: 'numeric', month: 'numeric', day: 'numeric' })}`)),
-                    obj.closed && (React.createElement(Typography, { variant: "body2", className: classes.closed },
-                        React.createElement(FormattedMessage, { id: "ui.feedObject.poll.closed", defaultMessage: "ui.feedObject.poll.closed" }))),
-                    React.createElement(List, null, choices.map((choice, index) => (React.createElement(ListItem, { key: index },
-                        React.createElement(Choice, { elevation: 0, choiceObj: choice, feedObject: disabled ? null : feedObject, votes: votes, vote: vote, isVoting: isVoting, votable: votable }))))),
-                    multipleChoices ? (React.createElement("div", { className: classes.votes },
-                        React.createElement(Icon, null, "list"),
-                        React.createElement(Typography, null, `${intl.formatMessage(messages.votes, { total: votes })}`))) : (React.createElement("div", { className: classes.voters },
-                        React.createElement(Icon, null, "people_alt"),
-                        React.createElement(Typography, null, `${intl.formatMessage(messages.voters, { total: votes })}`)))))));
+        objElement = (_jsxs(_Fragment, { children: [_jsx(CardHeader, { title: _jsx(_Fragment, { children: _jsx(Button, Object.assign({ className: classes.toggleButton, onClick: handleToggleCollapsedClick, "aria-expanded": collapsed, endIcon: _jsx(Icon, Object.assign({ className: classNames(classes.expandIcon, { [classes.collapsedIcon]: collapsed }) }, { children: "arrow_upward" })) }, { children: collapsed ? intl.formatMessage(messages.showPoll) : intl.formatMessage(messages.hidePoll) })) }) }), _jsx(Collapse, Object.assign({ in: !collapsed, timeout: "auto", unmountOnExit: true }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.title }, { children: obj.title })), obj.expiration_at && Date.parse(obj.expiration_at) >= new Date().getTime() && (_jsxs(Typography, Object.assign({ variant: "body2", className: classes.expiration }, { children: [`${intl.formatMessage(messages.expDate)}`, `${intl.formatDate(Date.parse(obj.expiration_at), { year: 'numeric', month: 'numeric', day: 'numeric' })}`] }))), obj.closed && (_jsx(Typography, Object.assign({ variant: "body2", className: classes.closed }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.poll.closed", defaultMessage: "ui.feedObject.poll.closed" }) }))), _jsx(List, { children: choices.map((choice, index) => (_jsx(ListItem, { children: _jsx(Choice, { elevation: 0, choiceObj: choice, feedObject: disabled ? null : feedObject, votes: votes, vote: vote, isVoting: isVoting, votable: votable }) }, index))) }), multipleChoices ? (_jsxs("div", Object.assign({ className: classes.votes }, { children: [_jsx(Icon, { children: "list" }), _jsx(Typography, { children: `${intl.formatMessage(messages.votes, { total: votes })}` })] }))) : (_jsxs("div", Object.assign({ className: classes.voters }, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(Typography, { children: `${intl.formatMessage(messages.voters, { total: votes })}` })] })))] }) }))] }));
     }
     useEffect(() => {
         setChoices(pollObject.choices);
@@ -174,5 +158,5 @@ export default function PollObject(props) {
     /**
      * Renders root element
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), objElement));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: objElement })));
 }

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Widget from '../Widget';
 import { styled } from '@mui/material/styles';
@@ -41,23 +42,10 @@ export default function FeedObjectSkeleton(props) {
     const theme = useTheme();
     let obj;
     if (template === SCFeedObjectTemplateType.PREVIEW || template === SCFeedObjectTemplateType.DETAIL || template === SCFeedObjectTemplateType.SEARCH) {
-        obj = (React.createElement(React.Fragment, null,
-            React.createElement(CardHeader, { avatar: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" }) }),
-            React.createElement(Skeleton, { animation: "wave", variant: "rectangular", className: classes.media }),
-            React.createElement(CardContent, null,
-                React.createElement(React.Fragment, null,
-                    React.createElement(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }),
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }),
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "60%" })))));
+        obj = (_jsxs(React.Fragment, { children: [_jsx(CardHeader, { avatar: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: _jsx(Skeleton, { animation: "wave", height: 10, width: "40%" }) }), _jsx(Skeleton, { animation: "wave", variant: "rectangular", className: classes.media }), _jsx(CardContent, { children: _jsxs(React.Fragment, { children: [_jsx(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "60%" })] }) })] }));
     }
     else {
-        obj = (React.createElement(React.Fragment, null,
-            React.createElement(CardHeader, { avatar: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" }) }),
-            React.createElement(CardContent, null,
-                React.createElement(React.Fragment, null,
-                    React.createElement(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }),
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }),
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 6 } })))));
+        obj = (_jsxs(React.Fragment, { children: [_jsx(CardHeader, { avatar: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: _jsx(Skeleton, { animation: "wave", height: 10, width: "40%" }) }), _jsx(CardContent, { children: _jsxs(React.Fragment, { children: [_jsx(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 6 } })] }) })] }));
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, `${PREFIX}-${template}`) }, rest), obj));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, `${PREFIX}-${template}`) }, rest, { children: obj })));
 }

package/lib/esm/components/FeedObjectMediaPreview/FeedObjectMediaPreview.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 Box from '@mui/material/Box';
 import { useSCMediaClick } from '@selfcommunity/react-core';
@@ -56,9 +56,8 @@ export default (inProps) => {
      * The adornment prop is used to insert the controls
      * for re-editing the media at the top of the group of elements
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest), mediaObjectTypes.map((mediaObject) => {
-        const { displayProps = {} } = mediaObject;
-        return (React.createElement("div", { key: mediaObject.name },
-            React.createElement(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick }))));
-    })));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: mediaObjectTypes.map((mediaObject) => {
+            const { displayProps = {} } = mediaObject;
+            return (_jsx("div", { children: _jsx(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick })) }, mediaObject.name));
+        }) })));
 };

package/lib/esm/components/FeedUpdatesWidget/FeedUpdatesWidget.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardContent } from '@mui/material';
 import PubSub from 'pubsub-js';
@@ -50,7 +51,7 @@ export default function FeedUpdatesWidget(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = 'feed_updates', className = null, message = React.createElement(FormattedMessage, { id: "ui.feedUpdatesWidget.message", defaultMessage: "ui.feedUpdatesWidget.message" }), subscriptionChannel, subscriptionChannelUpdatesCallback = (msg, data) => true, publicationChannel = null, onHeightChange } = props, rest = __rest(props, ["id", "className", "message", "subscriptionChannel", "subscriptionChannelUpdatesCallback", "publicationChannel", "onHeightChange"]);
+    const { id = 'feed_updates', className = null, message = _jsx(FormattedMessage, { id: "ui.feedUpdatesWidget.message", defaultMessage: "ui.feedUpdatesWidget.message" }), subscriptionChannel, subscriptionChannelUpdatesCallback = (msg, data) => true, publicationChannel = null, onHeightChange } = props, rest = __rest(props, ["id", "className", "message", "subscriptionChannel", "subscriptionChannelUpdatesCallback", "publicationChannel", "onHeightChange"]);
     // STATE
     const [updates, setUpdates] = useState(false);
     // REFS
@@ -78,16 +79,12 @@ export default function FeedUpdatesWidget(inProps) {
         onHeightChange && onHeightChange();
     }, [updates]);
     if (!updates) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
     // HANDLERS
     const handleClick = () => {
         PubSub.publishSync(publicationChannel, { refresh: true });
         setUpdates(false);
     };
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        React.createElement(CardContent, null,
-            message,
-            publicationChannel && (React.createElement(Button, { variant: "text", color: "inherit", onClick: handleClick, classes: { root: classes.buttonLoadMore } },
-                React.createElement(FormattedMessage, { id: "ui.feedUpdatesWidget.reload", defaultMessage: "ui.feedUpdatesWidget.reload" }))))));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [message, publicationChannel && (_jsx(Button, Object.assign({ variant: "text", color: "inherit", onClick: handleClick, classes: { root: classes.buttonLoadMore } }, { children: _jsx(FormattedMessage, { id: "ui.feedUpdatesWidget.reload", defaultMessage: "ui.feedUpdatesWidget.reload" }) })))] }) })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import GenericSkeleton from '../Skeleton/GenericSkeleton';
 import { PREFIX } from './constants';
@@ -32,5 +32,5 @@ const Root = styled(GenericSkeleton, {
  *
  */
 export default function FeedUpdatesWidgetSkeleton(props) {
-    return React.createElement(Root, Object.assign({ className: classes.root }, props));
+    return _jsx(Root, Object.assign({ className: classes.root }, props));
 }

package/lib/esm/components/FollowUserButton/FollowUserButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { LoadingButton } from '@mui/lab';
@@ -70,7 +71,7 @@ export default function FollowUserButton(inProps) {
     }, [authUserId, scFollowedManager.isFollowed]);
     const followUser = () => {
         if (!followed && 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
             });
@@ -87,7 +88,7 @@ export default function FollowUserButton(inProps) {
                     setDisabled(true);
                 }
                 else {
-                    enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
+                    enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
                         variant: 'warning',
                         autoHideDuration: 3000
                     });
@@ -107,5 +108,5 @@ export default function FollowUserButton(inProps) {
     if (scUserContext.user && scUserContext.user.id === scUser.id) {
         return null;
     }
-    return (React.createElement(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scFollowedManager.isLoading(scUser) : null, disabled: disabled, className: classNames(classes.root, className) }, rest), scUserContext.user && followed ? (React.createElement(FormattedMessage, { defaultMessage: "ui.followUserButton.unfollow", id: "ui.followUserButton.unfollow" })) : (React.createElement(FormattedMessage, { defaultMessage: "ui.followUserButton.follow", id: "ui.followUserButton.follow" }))));
+    return (_jsx(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scFollowedManager.isLoading(scUser) : null, disabled: disabled, className: classNames(classes.root, className) }, rest, { children: scUserContext.user && followed ? (_jsx(FormattedMessage, { defaultMessage: "ui.followUserButton.unfollow", id: "ui.followUserButton.unfollow" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.followUserButton.follow", id: "ui.followUserButton.follow" })) })));
 }

package/lib/esm/components/Footer/Footer.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Typography } from '@mui/material';
@@ -90,11 +91,7 @@ export default function Footer(inProps) {
      * Renders root object
      */
     if (loading) {
-        return React.createElement(FooterSkeleton, null);
+        return _jsx(FooterSkeleton, {});
     }
-    return (React.createElement(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }),
-        startActions,
-        React.createElement(Box, { className: classes.itemList }, sortByAttr(_menu.items, 'order').map((item, index) => (React.createElement(Button, { component: Link, key: item.id, className: classes.item, to: item.url, variant: "text" }, item.label)))),
-        endActions,
-        React.createElement(Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })));
+    return (_jsxs(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: [startActions, _jsx(Box, Object.assign({ className: classes.itemList }, { children: sortByAttr(_menu.items, 'order').map((item, index) => (_jsx(Button, Object.assign({ component: Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, _jsx(Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
@@ -31,7 +31,5 @@ const Root = styled(Box, {
  *
  */
 export default function FooterSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 10 } }),
-        React.createElement(Skeleton, { animation: "wave", height: 10, width: "60%" })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, props, { children: [_jsx(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 10 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "60%" })] })));
 }

package/lib/esm/components/FriendshipUserButton/FriendshipUserButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { SCConnectionStatus } from '@selfcommunity/types';
 import classNames from 'classnames';
@@ -69,7 +70,7 @@ export default function FriendshipUserButton(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else 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
             });
@@ -94,7 +95,7 @@ export default function FriendshipUserButton(inProps) {
                     setDisabled(true);
                 }
                 else {
-                    enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
+                    enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
                         variant: 'warning',
                         autoHideDuration: 3000
                     });
@@ -109,16 +110,16 @@ export default function FriendshipUserButton(inProps) {
         let _status;
         switch (status) {
             case SCConnectionStatus.CONNECTED:
-                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.removeConnection", id: "ui.friendshipUserButton.removeConnection" });
+                _status = _jsx(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.removeConnection", id: "ui.friendshipUserButton.removeConnection" });
                 break;
             case SCConnectionStatus.CONNECTION_REQUEST_SENT:
-                _status = (React.createElement(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.cancelConnectionRequest", id: "ui.friendshipUserButton.cancelConnectionRequest" }));
+                _status = (_jsx(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.cancelConnectionRequest", id: "ui.friendshipUserButton.cancelConnectionRequest" }));
                 break;
             case SCConnectionStatus.CONNECTION_REQUEST_RECEIVED:
-                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.acceptConnection", id: "ui.friendshipUserButton.acceptConnection" });
+                _status = _jsx(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.acceptConnection", id: "ui.friendshipUserButton.acceptConnection" });
                 break;
             default:
-                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.requestConnection", id: "ui.friendshipUserButton.requestConnection" });
+                _status = _jsx(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.requestConnection", id: "ui.friendshipUserButton.requestConnection" });
                 break;
         }
         return _status;
@@ -137,5 +138,5 @@ export default function FriendshipUserButton(inProps) {
     if (scUserContext.user && scUserContext.user.id === scUser.id) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ size: "small", variant: "outlined", disabled: disabled, loading: scUserContext.user ? scConnectionsManager.isLoading(scUser) : null, onClick: handleConnectionStatus, className: classNames(classes.root, className) }, rest), getStatus()));
+    return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", disabled: disabled, loading: scUserContext.user ? scConnectionsManager.isLoading(scUser) : null, onClick: handleConnectionStatus, className: classNames(classes.root, className) }, rest, { children: getStatus() })));
 }