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

package/lib/esm/components/Notification/ContributionFollow/ContributionFollow.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, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Stack, Typography } from '@mui/material';
@@ -49,23 +50,7 @@ export default function ContributionFollowNotification(props) {
     /**
      * Renders root object
      */
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }),
-                React.createElement(UserAvatar, { hide: !notificationObject.user.community_badge, smaller: true },
-                    React.createElement(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }))), primary: React.createElement(Typography, { component: "span", color: "inherit", className: classes.followText },
-                React.createElement(Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }), notificationObject.user.username),
-                ' ',
-                intl.formatMessage(messages.contributionFollow, {
-                    b: (...chunks) => React.createElement("strong", null, chunks)
-                })), secondary: React.createElement(React.Fragment, null,
-                template === SCNotificationObjectTemplateType.SNIPPET && (React.createElement(React.Fragment, null,
-                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-                        React.createElement(Typography, { variant: "body2", className: classes.contributionText }, getContributionSnippet(notificationObject[contributionType]))))),
-                (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (React.createElement("div", null,
-                    React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })))), footer: template === SCNotificationObjectTemplateType.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(DateTimeAgo, { date: notificationObject.active_at }),
-                React.createElement(Typography, { color: "primary", component: 'div' },
-                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))) }, rest)),
-        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Typography, Object.assign({ component: "span", color: "inherit", className: classes.followText }, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', intl.formatMessage(messages.contributionFollow, {
+                            b: (...chunks) => _jsx("strong", { children: chunks })
+                        })] })), secondary: _jsxs(React.Fragment, { children: [template === SCNotificationObjectTemplateType.SNIPPET && (_jsx(_Fragment, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contributionText }, { children: getContributionSnippet(notificationObject[contributionType]) })) })) })), (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx("div", { children: _jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }) }))] }), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/Notification/DeletedFor/DeletedFor.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Stack, Typography } from '@mui/material';
 import Icon from '@mui/material/Icon';
@@ -67,20 +67,5 @@ export default function DeletedForNotification(props) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
-            React.createElement(Icon, null, "outlined_flag")), primary: React.createElement(React.Fragment, null, isSnippetTemplate ? (React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-            React.createElement(Typography, { component: "div", color: "inherit", className: classes.flagText },
-                React.createElement(FormattedMessage, { id: `ui.notification.deletedFor.${camelCase(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.deletedFor.${camelCase(notificationObject.type)}Snippet` })))) : (React.createElement(React.Fragment, null,
-            template === SCNotificationObjectTemplateType.DETAIL && notificationObject.is_new && React.createElement(NewChip, null),
-            React.createElement(Typography, { component: "div", color: "inherit", className: classes.flagText }, intl.formatMessage(messages[camelCase(notificationObject.type)], { b: (...chunks) => React.createElement("strong", null, chunks) }))))), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : (React.createElement(React.Fragment, null,
-            React.createElement(Box, { className: classes.contributionWrap },
-                React.createElement(Typography, { variant: 'body2', color: 'inherit', classes: { root: classes.contributionYouWroteLabel } },
-                    React.createElement(FormattedMessage, { id: "ui.notification.deletedFor.youWrote", defaultMessage: "ui.notification.deletedFor.youWrote" })),
-                React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText },
-                    React.createElement(Typography, { component: 'span', color: 'inherit', variant: "body2" }, getContributionSnippet(notificationObject[contributionType])))),
-            template === SCNotificationObjectTemplateType.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(DateTimeAgo, { date: notificationObject.active_at }),
-                React.createElement(Typography, { color: "primary", component: 'div' },
-                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))))) }, rest)));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: _jsx(Icon, { children: "outlined_flag" }) })), primary: _jsx(_Fragment, { children: isSnippetTemplate ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: _jsx(FormattedMessage, { id: `ui.notification.deletedFor.${camelCase(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.deletedFor.${camelCase(notificationObject.type)}Snippet` }) })) }))) : (_jsxs(_Fragment, { children: [template === SCNotificationObjectTemplateType.DETAIL && notificationObject.is_new && _jsx(NewChip, {}), _jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[camelCase(notificationObject.type)], { b: (...chunks) => _jsx("strong", { children: chunks }) }) }))] })) }), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.contributionWrap }, { children: [_jsx(Typography, Object.assign({ variant: 'body2', color: 'inherit', classes: { root: classes.contributionYouWroteLabel } }, { children: _jsx(FormattedMessage, { id: "ui.notification.deletedFor.youWrote", defaultMessage: "ui.notification.deletedFor.youWrote" }) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText }, { children: _jsx(Typography, Object.assign({ component: 'span', color: 'inherit', variant: "body2" }, { children: getContributionSnippet(notificationObject[contributionType]) })) }))] })), template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] })))] })) }, rest)));
 }

package/lib/esm/components/Notification/Event/Event.d.ts

@@ -0,0 +1,15 @@
+import { SCNotificationEventActivityType } from '@selfcommunity/types';
+import { NotificationItemProps } from '../../../shared/NotificationItem';
+export interface NotificationEventProps extends Pick<NotificationItemProps, Exclude<keyof NotificationItemProps, 'image' | 'disableTypography' | 'primary' | 'primaryTypographyProps' | 'secondary' | 'secondaryTypographyProps' | 'actions' | 'footer' | 'isNew'>> {
+    /**
+     * Notification obj
+     * @default null
+     */
+    notificationObject: SCNotificationEventActivityType;
+}
+/**
+ * This component render the content of the notification of type event
+ * @constructor
+ * @param props
+ */
+export default function EventNotification(props: NotificationEventProps): JSX.Element;

package/lib/esm/components/Notification/Event/Event.js

@@ -0,0 +1,76 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Avatar, Box, Icon, Stack, Typography } from '@mui/material';
+import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
+import { SCEventLocationType } from '@selfcommunity/types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import DateTimeAgo from '../../../shared/DateTimeAgo';
+import classNames from 'classnames';
+import { SCNotificationObjectTemplateType } from '../../../types';
+import NotificationItem from '../../../shared/NotificationItem';
+import { LoadingButton } from '@mui/lab';
+import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
+import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
+import { default as EventItem } from '../../Event';
+const classes = {
+    root: `${PREFIX}-event-root`,
+    avatar: `${PREFIX}-avatar`,
+    actions: `${PREFIX}-actions`,
+    seeButton: `${PREFIX}see-button`,
+    activeAt: `${PREFIX}-active-at`,
+    snippetTime: `${PREFIX}-snippet-time`,
+    username: `${PREFIX}-username`
+};
+const Root = styled(NotificationItem, {
+    name: PREFIX,
+    slot: 'EventRoot'
+})(() => ({}));
+/**
+ * This component render the content of the notification of type event
+ * @constructor
+ * @param props
+ */
+export default function EventNotification(props) {
+    // PROPS
+    const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = SCNotificationObjectTemplateType.DETAIL } = props, rest = __rest(props, ["notificationObject", "id", "className", "template"]);
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    // STATE
+    const [openAlert, setOpenAlert] = useState(false);
+    // CONST
+    const isSnippetTemplate = template === SCNotificationObjectTemplateType.SNIPPET;
+    const isToastTemplate = template === SCNotificationObjectTemplateType.TOAST;
+    const intl = useIntl();
+    // RENDER
+    if (isSnippetTemplate || isToastTemplate) {
+        return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
+                to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+            }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
+                        to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                    }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.event.${notificationObject.type}`, defaultMessage: `ui.notification.event.${notificationObject.type}`, values: {
+                            icon: (...chunks) => _jsx(Icon, { children: chunks }),
+                            event: notificationObject.event.name,
+                            link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
+                        } })] }), secondary: _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.dateTime", defaultMessage: "ui.notification.event.dateTime", values: {
+                                date: intl.formatDate(notificationObject.event.start_date, {
+                                    weekday: 'long',
+                                    day: 'numeric',
+                                    year: 'numeric',
+                                    month: 'long'
+                                }),
+                                hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
+                            } }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) })) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
+                    to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
+                            to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                        }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
+                                icon: (...chunks) => _jsx(Icon, { children: chunks }),
+                                event: notificationObject.event.name,
+                                link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
+                            } }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+}

package/lib/esm/components/Notification/Event/index.d.ts

@@ -0,0 +1,3 @@
+import EventNotification, { NotificationEventProps } from './Event';
+export default EventNotification;
+export { NotificationEventProps };

package/lib/esm/components/Notification/Event/index.js

@@ -0,0 +1,2 @@
+import EventNotification from './Event';
+export default EventNotification;

package/lib/esm/components/Notification/Group/Group.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Stack, Typography } from '@mui/material';
 import { Link, SCRoutes, SCUserContext, useSCRouting } from '@selfcommunity/react-core';
@@ -48,37 +49,23 @@ export default function GroupNotification(props) {
     }, [manager.subscriptionStatus, notificationObject.group]);
     // RENDER
     if (isSnippetTemplate || isToastTemplate) {
-        return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Link, Object.assign({}, (!notificationObject.user.deleted && {
+        return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                 to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
-            }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }),
-                React.createElement(UserAvatar, { hide: !notificationObject.user.community_badge, smaller: true },
-                    React.createElement(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }))), primary: React.createElement(Box, null,
-                React.createElement(Link, Object.assign({}, (!notificationObject.user.deleted && {
-                    to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
-                }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }), notificationObject.user.username),
-                ' ',
-                React.createElement(FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
-                        group: notificationObject.group.name,
-                        link: (...chunks) => (React.createElement(Link, { to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
+            }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
+                        to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                    }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
+                            group: notificationObject.group.name,
+                            link: (...chunks) => (_jsx(Link, Object.assign({ to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
+                                    notificationObject.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
+                                    ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
+                                    : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, { children: chunks })))
+                        } })] }), footer: isToastTemplate && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), status && status !== SCGroupSubscriptionStatusType.SUBSCRIBED && (_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(Link, Object.assign({ to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
                                 notificationObject.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
                                 ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
-                                : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, chunks))
-                    } })), footer: isToastTemplate && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(DateTimeAgo, { date: notificationObject.active_at }),
-                status && status !== SCGroupSubscriptionStatusType.SUBSCRIBED && (React.createElement(Typography, { color: "primary" },
-                    React.createElement(Link, { to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
-                            notificationObject.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
-                            ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
-                            : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
-                        React.createElement(FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" })))))) }, rest)));
+                                : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, { children: _jsx(FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" }) })) })))] }))) }, rest)));
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }),
-                status && status !== SCGroupSubscriptionStatusType.SUBSCRIBED && (React.createElement(LoadingButton, { color: 'primary', variant: "outlined", size: "small", classes: { root: classes.acceptButton }, component: Link, loading: scUserContext.user ? status === null || manager.isLoading(notificationObject.group) : null, to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
-                        notificationObject.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
-                        ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
-                        : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) },
-                    React.createElement(FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" })))) }, rest)),
-        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), status && status !== SCGroupSubscriptionStatusType.SUBSCRIBED && (_jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.acceptButton }, component: Link, loading: scUserContext.user ? status === null || manager.isLoading(notificationObject.group) : null, to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
+                                notificationObject.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
+                                ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
+                                : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, { children: _jsx(FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" }) })))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/Notification/IncubatorApproved/IncubatorApproved.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Avatar, Button, Stack, Typography } from '@mui/material';
 import { Link, useSCRouting, SCRoutes } from '@selfcommunity/react-core';
@@ -39,19 +39,11 @@ export default function IncubatorApprovedNotification(props) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { alt: notificationObject.incubator.approved_category.name, src: notificationObject.incubator.approved_category.image_medium, variant: "square", classes: { root: classes.categoryIcon } }), primary: React.createElement(React.Fragment, null, isSnippetTemplate ? (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, notificationObject.incubator.approved_category) },
-            React.createElement(Typography, { component: "div", className: classes.categoryApprovedText, color: "inherit" }, intl.formatMessage(messages.incubatorApproved, {
-                name: notificationObject.incubator.name,
-                b: (...chunks) => React.createElement("strong", null, chunks)
-            })))) : (React.createElement(React.Fragment, null,
-            template === SCNotificationObjectTemplateType.DETAIL && notificationObject.is_new && React.createElement(NewChip, null),
-            React.createElement(Typography, { component: "div", className: classes.categoryApprovedText, color: "inherit" }, intl.formatMessage(messages.incubatorApproved, {
-                name: notificationObject.incubator.name,
-                b: (...chunks) => React.createElement("strong", null, chunks)
-            }))))), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: template === SCNotificationObjectTemplateType.DETAIL ? (React.createElement(Button, { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, notificationObject.incubator.approved_category), className: classes.viewIncubatorButton },
-            React.createElement(FormattedMessage, { id: 'ui.notification.incubatorApproved.viewIncubator', defaultMessage: 'ui.notification.incubatorApproved.viewIncubator' }))) : template === SCNotificationObjectTemplateType.TOAST ? (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-            React.createElement(DateTimeAgo, { date: notificationObject.active_at }),
-            React.createElement(Typography, { color: "primary", component: 'div' },
-                React.createElement(Link, { to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, notificationObject.incubator) },
-                    React.createElement(FormattedMessage, { id: "ui.userToastNotifications.incubatorApproved.viewIncubator", defaultMessage: 'ui.userToastNotifications.incubatorApproved.viewIncubator' }))))) : null }, rest)));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Avatar, { alt: notificationObject.incubator.approved_category.name, src: notificationObject.incubator.approved_category.image_medium, variant: "square", classes: { root: classes.categoryIcon } }), primary: _jsx(_Fragment, { children: isSnippetTemplate ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, notificationObject.incubator.approved_category) }, { children: _jsx(Typography, Object.assign({ component: "div", className: classes.categoryApprovedText, color: "inherit" }, { children: intl.formatMessage(messages.incubatorApproved, {
+                        name: notificationObject.incubator.name,
+                        b: (...chunks) => _jsx("strong", { children: chunks })
+                    }) })) }))) : (_jsxs(_Fragment, { children: [template === SCNotificationObjectTemplateType.DETAIL && notificationObject.is_new && _jsx(NewChip, {}), _jsx(Typography, Object.assign({ component: "div", className: classes.categoryApprovedText, color: "inherit" }, { children: intl.formatMessage(messages.incubatorApproved, {
+                            name: notificationObject.incubator.name,
+                            b: (...chunks) => _jsx("strong", { children: chunks })
+                        }) }))] })) }), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: template === SCNotificationObjectTemplateType.DETAIL ? (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, notificationObject.incubator.approved_category), className: classes.viewIncubatorButton }, { children: _jsx(FormattedMessage, { id: 'ui.notification.incubatorApproved.viewIncubator', defaultMessage: 'ui.notification.incubatorApproved.viewIncubator' }) }))) : template === SCNotificationObjectTemplateType.TOAST ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, notificationObject.incubator) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.incubatorApproved.viewIncubator", defaultMessage: 'ui.userToastNotifications.incubatorApproved.viewIncubator' }) })) }))] }))) : null }, rest)));
 }

package/lib/esm/components/Notification/KindlyNoticeFlag/KindlyNoticeFlag.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Typography } from '@mui/material';
 import Icon from '@mui/material/Icon';
@@ -49,12 +49,5 @@ export default function KindlyNoticeFlagNotification(props) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
-            React.createElement(Icon, null, "outlined_flag")), primary: React.createElement(React.Fragment, null, isSnippetTemplate ? (React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-            React.createElement(Typography, { component: "div", color: "inherit", className: classes.flagText },
-                React.createElement(FormattedMessage, { id: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet`, defaultMessage: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet` })))) : (React.createElement(Typography, { component: "div", color: "inherit", className: classes.flagText }, intl.formatMessage(messages[camelCase(notificationObject.type)], { b: (...chunks) => React.createElement("strong", null, chunks) })))), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: !isSnippetTemplate && (React.createElement(Box, { className: classes.contributionWrap },
-            React.createElement(Typography, { variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } },
-                React.createElement(FormattedMessage, { id: "ui.notification.undeletedFor.youWrote", defaultMessage: "ui.notification.undeletedFor.youWrote" })),
-            React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText },
-                React.createElement(Typography, { component: 'span', variant: "body2" }, getContributionSnippet(notificationObject[contributionType]))))) }, rest)));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: _jsx(Icon, { children: "outlined_flag" }) })), primary: _jsx(_Fragment, { children: isSnippetTemplate ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: _jsx(FormattedMessage, { id: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet`, defaultMessage: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet` }) })) }))) : (_jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[camelCase(notificationObject.type)], { b: (...chunks) => _jsx("strong", { children: chunks }) }) }))) }), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: !isSnippetTemplate && (_jsxs(Box, Object.assign({ className: classes.contributionWrap }, { children: [_jsx(Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: _jsx(FormattedMessage, { id: "ui.notification.undeletedFor.youWrote", defaultMessage: "ui.notification.undeletedFor.youWrote" }) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText }, { children: _jsx(Typography, Object.assign({ component: 'span', variant: "body2" }, { children: getContributionSnippet(notificationObject[contributionType]) })) }))] }))) }, rest)));
 }

package/lib/esm/components/Notification/KindlyNoticeFor/KindlyNoticeFor.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Stack, Typography } from '@mui/material';
 import Icon from '@mui/material/Icon';
@@ -69,19 +69,7 @@ export default function KindlyNoticeForNotification(props) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
-            React.createElement(Icon, null, "outlined_flag")), primary: React.createElement(React.Fragment, null, isSnippetTemplate ? (React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-            React.createElement(Typography, { component: "div", color: "inherit", className: classes.flagText },
-                React.createElement(FormattedMessage, { id: `ui.notification.kindlyNoticeFor.${camelCase(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.kindlyNoticeFor.${camelCase(notificationObject.type)}Snippet` })))) : (React.createElement(Typography, { component: "div", color: "inherit", className: classes.flagText }, intl.formatMessage(messages[camelCase(notificationObject.type)], { b: (...chunks) => React.createElement("strong", null, chunks) })))), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : (React.createElement(React.Fragment, null,
-            React.createElement(Box, { className: classes.contributionWrap },
-                React.createElement(Typography, { variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, intl.formatMessage(messages.youWrote, {
-                    b: (...chunks) => React.createElement("strong", null, chunks)
-                })),
-                React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText },
-                    React.createElement(Typography, { component: 'span', variant: "body2" }, getContributionSnippet(notificationObject[contributionType])))),
-            template === SCNotificationObjectTemplateType.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(DateTimeAgo, { date: notificationObject.active_at }),
-                React.createElement(Typography, { color: "primary", component: 'div' },
-                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))))) }, rest)));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: _jsx(Icon, { children: "outlined_flag" }) })), primary: _jsx(_Fragment, { children: isSnippetTemplate ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: _jsx(FormattedMessage, { id: `ui.notification.kindlyNoticeFor.${camelCase(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.kindlyNoticeFor.${camelCase(notificationObject.type)}Snippet` }) })) }))) : (_jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[camelCase(notificationObject.type)], { b: (...chunks) => _jsx("strong", { children: chunks }) }) }))) }), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.contributionWrap }, { children: [_jsx(Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: intl.formatMessage(messages.youWrote, {
+                                b: (...chunks) => _jsx("strong", { children: chunks })
+                            }) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText }, { children: _jsx(Typography, Object.assign({ component: 'span', variant: "body2" }, { children: getContributionSnippet(notificationObject[contributionType]) })) }))] })), template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] })))] })) }, rest)));
 }

package/lib/esm/components/Notification/Mention/Mention.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, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Stack, Typography } from '@mui/material';
@@ -50,27 +51,11 @@ export default function MentionNotification(props) {
     /**
      * Renders root object
      */
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Link, Object.assign({}, (!notificationObject[objectType].author.deleted && {
-                to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject[objectType].author)
-            }), { onClick: notificationObject[objectType].author.deleted ? () => setOpenAlert(true) : null }),
-                React.createElement(UserAvatar, { hide: !notificationObject[objectType].author.community_badge, smaller: true },
-                    React.createElement(Avatar, { alt: notificationObject[objectType].author.username, variant: "circular", src: notificationObject[objectType].author.avatar, classes: { root: classes.avatar } }))), primary: React.createElement(Typography, { component: "div", color: "inherit", className: classes.mentionText },
-                React.createElement(Link, Object.assign({}, (!notificationObject[objectType].author.deleted && {
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject[objectType].author.deleted && {
                     to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject[objectType].author)
-                }), { onClick: notificationObject[objectType].author.deleted ? () => setOpenAlert(true) : null, className: classes.username }), notificationObject[objectType].author.username),
-                ' ',
-                intl.formatMessage(messages.quotedYouOn, {
-                    b: (...chunks) => React.createElement("strong", null, chunks)
-                }),
-                ' '), secondary: React.createElement(React.Fragment, null,
-                React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${objectType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[objectType])) },
-                    React.createElement(Typography, { component: 'span', variant: "body2", className: classes.contributionText }, getContributionSnippet(notificationObject[objectType]))),
-                (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (React.createElement(Box, null,
-                    React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })))), footer: template === SCNotificationObjectTemplateType.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(DateTimeAgo, { date: notificationObject.active_at }),
-                React.createElement(Typography, { color: "primary", component: 'div' },
-                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contribution.type.toUpperCase()}_ROUTE_NAME`], getRouteData(contribution)) },
-                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))) }, rest)),
-        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+                }), { onClick: notificationObject[objectType].author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject[objectType].author.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject[objectType].author.username, variant: "circular", src: notificationObject[objectType].author.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Typography, Object.assign({ component: "div", color: "inherit", className: classes.mentionText }, { children: [_jsx(Link, Object.assign({}, (!notificationObject[objectType].author.deleted && {
+                            to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject[objectType].author)
+                        }), { onClick: notificationObject[objectType].author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject[objectType].author.username })), ' ', intl.formatMessage(messages.quotedYouOn, {
+                            b: (...chunks) => _jsx("strong", { children: chunks })
+                        }), ' '] })), secondary: _jsxs(React.Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${objectType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[objectType])) }, { children: _jsx(Typography, Object.assign({ component: 'span', variant: "body2", className: classes.contributionText }, { children: getContributionSnippet(notificationObject[objectType]) })) })), (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(Box, { children: _jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }) }))] }), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contribution.type.toUpperCase()}_ROUTE_NAME`], getRouteData(contribution)) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }