@selfcommunity/react-ui 0.7.0-alpha.33 → 0.7.0-alpha.330

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

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Stack, Typography } from '@mui/material';
@@ -16,7 +6,7 @@ import Icon from '@mui/material/Icon';
 import { red } from '@mui/material/colors';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
-import { getContributionType, getContributionSnippet, getRouteData } from '../../../utils/contribution';
+import { getContributionSnippet, getContributionType, getRouteData } from '../../../utils/contribution';
 import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
@@ -32,7 +22,7 @@ const classes = {
     contributionYouWroteLabel: `${PREFIX}-contribution-you-wrote-label`,
     contributionText: `${PREFIX}-contribution-text`
 };
-const Root = styled(Box, {
+const Root = styled(NotificationItem, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -77,21 +67,19 @@ export default function UndeletedForNotification(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest),
-        React.createElement(NotificationItem, { template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { variant: "circular", classes: { root: classes.undeletedIcon } },
-                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.undeletedText },
-                    React.createElement(FormattedMessage, { id: "ui.notification.undeletedFor.restoredContentSnippet", defaultMessage: "ui.notification.undeletedFor.restoredContentSnippet" })))) : (React.createElement(Typography, { component: "div", color: "inherit", className: classes.undeletedText },
-                React.createElement(FormattedMessage, { id: "ui.notification.undeletedFor.restoredContent", defaultMessage: "ui.notification.undeletedFor.restoredContent" })))), secondary: template === SCNotificationObjectTemplateType.DETAIL && React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), footer: React.createElement(React.Fragment, null,
-                !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", gutterBottom: true }, 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' })))))) })));
+    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.undeletedIcon } },
+            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.undeletedText },
+                React.createElement(FormattedMessage, { id: "ui.notification.undeletedFor.restoredContentSnippet", defaultMessage: "ui.notification.undeletedFor.restoredContentSnippet" })))) : (React.createElement(Typography, { component: "div", color: "inherit", className: classes.undeletedText },
+            React.createElement(FormattedMessage, { id: "ui.notification.undeletedFor.restoredContent", defaultMessage: "ui.notification.undeletedFor.restoredContent" })))), 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 } },
+                    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])))),
+            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)));
 }
-//# sourceMappingURL=UndeletedFor.js.map

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

@@ -1,4 +1,3 @@
 import UndeletedForNotification, { NotificationUndeletedProps } from './UndeletedFor';
 export default UndeletedForNotification;
 export { NotificationUndeletedProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import UndeletedForNotification from './UndeletedFor';
 export default UndeletedForNotification;
-//# sourceMappingURL=index.js.map

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

@@ -1,30 +1,11 @@
 import { SCNotificationBlockedUserType } from '@selfcommunity/types';
-import { SCNotificationObjectTemplateType } from '../../../types';
-export interface NotificationBlockedProps {
-    /**
-     * Id of the feedObject
-     * @default `n_<notificationObject.sid>`
-     */
-    id?: string;
-    /**
-     * Overrides or extends the styles applied to the component.
-     * @default null
-     */
-    className?: string;
+import { NotificationItemProps } from '../../../shared/NotificationItem';
+export interface NotificationBlockedProps extends Pick<NotificationItemProps, Exclude<keyof NotificationItemProps, 'image' | 'disableTypography' | 'primary' | 'primaryTypographyProps' | 'secondary' | 'secondaryTypographyProps' | 'actions' | 'footer' | 'isNew'>> {
     /**
      * Notification obj
      * @default null
      */
     notificationObject: SCNotificationBlockedUserType;
-    /**
-     * Notification Object template type
-     * @default 'detail'
-     */
-    template?: SCNotificationObjectTemplateType;
-    /**
-     * Any other properties
-     */
-    [p: string]: any;
 }
 /**
  * This component render the content of the notification of type user blocked
@@ -32,4 +13,3 @@ export interface NotificationBlockedProps {
  * @constructor
  */
 export default function UserBlockedNotification(inProps: NotificationBlockedProps): JSX.Element;
-//# sourceMappingURL=UserBlocked.d.ts.map

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

@@ -1,17 +1,7 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography } from '@mui/material';
 import { green, red } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 import { SCNotificationTypologyType } from '@selfcommunity/types';
@@ -39,7 +29,7 @@ const classes = {
     blockedText: `${PREFIX}-blocked-text`,
     activeAt: `${PREFIX}-active-at`
 };
-const Root = styled(Box, {
+const Root = styled(NotificationItem, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -73,15 +63,13 @@ export default function UserBlockedNotification(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest),
-        React.createElement(NotificationItem, { template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { variant: "circular", classes: {
-                    root: classNames(classes.unBlockedIcon, {
-                        [classes.blockedIcon]: notificationObject.type === SCNotificationTypologyType.BLOCKED_USER
-                    })
-                } },
-                React.createElement(Icon, null, "outlined_flag")), primary: React.createElement(Typography, { component: "div", color: "inherit", className: classes.blockedText }, notificationObject.type === SCNotificationTypologyType.BLOCKED_USER
-                ? intl.formatMessage(messages.accountBlocked, { b: (...chunks) => React.createElement("strong", null, chunks) })
-                : intl.formatMessage(messages.accountReactivated, { b: (...chunks) => React.createElement("strong", null, chunks) })), secondary: template === SCNotificationObjectTemplateType.DETAIL && React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), footer: React.createElement(React.Fragment, null, template === SCNotificationObjectTemplateType.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                React.createElement(DateTimeAgo, { date: notificationObject.active_at })))) })));
+    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: classNames(classes.unBlockedIcon, {
+                    [classes.blockedIcon]: notificationObject.type === SCNotificationTypologyType.BLOCKED_USER
+                })
+            } },
+            React.createElement(Icon, null, "outlined_flag")), primary: React.createElement(Typography, { component: "div", color: "inherit", className: classes.blockedText }, notificationObject.type === SCNotificationTypologyType.BLOCKED_USER
+            ? intl.formatMessage(messages.accountBlocked, { b: (...chunks) => React.createElement("strong", null, chunks) })
+            : intl.formatMessage(messages.accountReactivated, { 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.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+            React.createElement(DateTimeAgo, { date: notificationObject.active_at }))) }, rest)));
 }
-//# sourceMappingURL=UserBlocked.js.map

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

@@ -1,4 +1,3 @@
 import UserBlockedNotification, { NotificationBlockedProps } from './UserBlocked';
 export default UserBlockedNotification;
 export { NotificationBlockedProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import UserBlockedNotification from './UserBlocked';
 export default UserBlockedNotification;
-//# sourceMappingURL=index.js.map

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

@@ -1,30 +1,11 @@
 import { SCNotificationConnectionAcceptType, SCNotificationConnectionRequestType } from '@selfcommunity/types';
-import { SCNotificationObjectTemplateType } from '../../../types';
-export interface NotificationConnectionProps {
-    /**
-     * Id of the feedObject
-     * @default `n_<notificationObject.sid>`
-     */
-    id?: string;
-    /**
-     * Overrides or extends the styles applied to the component.
-     * @default null
-     */
-    className?: string;
+import { NotificationItemProps } from '../../../shared/NotificationItem';
+export interface NotificationConnectionProps extends Pick<NotificationItemProps, Exclude<keyof NotificationItemProps, 'image' | 'disableTypography' | 'primary' | 'primaryTypographyProps' | 'secondary' | 'secondaryTypographyProps' | 'actions' | 'footer' | 'isNew'>> {
     /**
      * Notification obj
      * @default null
      */
     notificationObject: SCNotificationConnectionRequestType | SCNotificationConnectionAcceptType;
-    /**
-     * Notification Object template type
-     * @default 'detail'
-     */
-    template?: SCNotificationObjectTemplateType;
-    /**
-     * Any other properties
-     */
-    [p: string]: any;
 }
 /**
  * This component render the content of the notification of connection accept/request
@@ -32,4 +13,3 @@ export interface NotificationConnectionProps {
  * @constructor
  */
 export default function UserConnectionNotification(inProps: NotificationConnectionProps): JSX.Element;
-//# sourceMappingURL=UserConnection.d.ts.map

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

@@ -1,17 +1,7 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
+import { __rest } from "tslib";
+import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';
 import { SCNotificationTypologyType } from '@selfcommunity/types';
@@ -20,6 +10,8 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
+import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
+import UserAvatar from '../../../shared/UserAvatar';
 const messages = defineMessages({
     requestConnection: {
         id: 'ui.notification.userConnection.requestConnection',
@@ -38,7 +30,7 @@ const classes = {
     connectionText: `${PREFIX}-connection-text`,
     activeAt: `${PREFIX}-active-at`
 };
-const Root = styled(Box, {
+const Root = styled(NotificationItem, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -67,6 +59,8 @@ export default function UserConnectionNotification(inProps) {
     const { notificationObject = null, 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);
     // INTL
     const intl = useIntl();
     // CONST
@@ -74,17 +68,18 @@ export default function UserConnectionNotification(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest),
-        React.createElement(NotificationItem, { template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) },
-                React.createElement(Avatar, { alt: userConnection.username, variant: "circular", src: userConnection.avatar, classes: { root: classes.avatar } })), primary: React.createElement(Typography, { component: "div", color: "inherit", className: classes.connectionText },
-                React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection), className: classes.username }, userConnection.username),
+    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({}, (!userConnection.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null }),
+                React.createElement(UserAvatar, { hide: !userConnection.community_badge, smaller: true },
+                    React.createElement(Avatar, { alt: userConnection.username, variant: "circular", src: userConnection.avatar, classes: { root: classes.avatar } }))), primary: React.createElement(Typography, { component: "div", color: "inherit", className: classes.connectionText },
+                React.createElement(Link, Object.assign({}, (!userConnection.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null, className: classes.username }), userConnection.username),
                 ' ',
                 notificationObject.type === SCNotificationTypologyType.CONNECTION_REQUEST
                     ? intl.formatMessage(messages.requestConnection, { b: (...chunks) => React.createElement("strong", null, chunks) })
-                    : intl.formatMessage(messages.requestConnection, { b: (...chunks) => React.createElement("strong", null, chunks) })), secondary: template === SCNotificationObjectTemplateType.DETAIL && React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), footer: React.createElement(React.Fragment, null, template === SCNotificationObjectTemplateType.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+                    : intl.formatMessage(messages.acceptConnection, { 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.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.USER_PROFILE_ROUTE_NAME, userConnection) },
-                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.goToProfile", defaultMessage: 'ui.userToastNotifications.goToProfile' })))))) })));
+                    React.createElement(Link, Object.assign({}, (!userConnection.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null }),
+                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.goToProfile", defaultMessage: 'ui.userToastNotifications.goToProfile' }))))) }, rest)),
+        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
-//# sourceMappingURL=UserConnection.js.map

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

@@ -1,4 +1,3 @@
 import UserConnectionNotification, { NotificationConnectionProps } from './UserConnection';
 export default UserConnectionNotification;
 export { NotificationConnectionProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import UserConnectionNotification from './UserConnection';
 export default UserConnectionNotification;
-//# sourceMappingURL=index.js.map

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

@@ -1,30 +1,11 @@
 import { SCNotificationUserFollowType } from '@selfcommunity/types';
-import { SCNotificationObjectTemplateType } from '../../../types';
-export interface NotificationFollowProps {
-    /**
-     * Id of the feedObject
-     * @default `n_<notificationObject.sid>`
-     */
-    id?: string;
-    /**
-     * Overrides or extends the styles applied to the component.
-     * @default null
-     */
-    className?: string;
+import { NotificationItemProps } from '../../../shared/NotificationItem';
+export interface NotificationFollowProps extends Pick<NotificationItemProps, Exclude<keyof NotificationItemProps, 'image' | 'disableTypography' | 'primary' | 'primaryTypographyProps' | 'secondary' | 'secondaryTypographyProps' | 'actions' | 'footer' | 'isNew'>> {
     /**
      * Notification obj
      * @default null
      */
     notificationObject: SCNotificationUserFollowType;
-    /**
-     * Notification Object template type
-     * @default 'detail'
-     */
-    template?: SCNotificationObjectTemplateType;
-    /**
-     * Any other properties
-     */
-    [p: string]: any;
 }
 /**
  * This component render the content of the notification of type user follow
@@ -32,4 +13,3 @@ export interface NotificationFollowProps {
  * @constructor
  */
 export default function UserFollowNotification(inProps: NotificationFollowProps): JSX.Element;
-//# sourceMappingURL=UserFollow.d.ts.map

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

@@ -1,17 +1,7 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
+import { __rest } from "tslib";
+import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';
@@ -19,6 +9,8 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
+import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
+import UserAvatar from '../../../shared/UserAvatar';
 const messages = defineMessages({
     followUser: {
         id: 'ui.notification.userFollow.followUser',
@@ -33,7 +25,7 @@ const classes = {
     followText: `${PREFIX}-follow-text`,
     activeAt: `${PREFIX}-active-at`
 };
-const Root = styled(Box, {
+const Root = styled(NotificationItem, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -63,20 +55,25 @@ export default function UserFollowNotification(inProps) {
     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);
     // INTL
     const intl = useIntl();
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest),
-        React.createElement(NotificationItem, { template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) },
-                React.createElement(Avatar, { alt: notificationObject.follower.username, variant: "circular", src: notificationObject.follower.avatar, classes: { root: classes.avatar } })), primary: React.createElement(Typography, { component: "div", color: "inherit", className: classes.followText },
-                React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower), className: classes.username }, notificationObject.follower.username),
+    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.follower.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }),
+                React.createElement(UserAvatar, { hide: !notificationObject.follower.community_badge, smaller: true },
+                    React.createElement(Avatar, { alt: notificationObject.follower.username, variant: "circular", src: notificationObject.follower.avatar, classes: { root: classes.avatar } }))), primary: React.createElement(Typography, { component: "div", color: "inherit", className: classes.followText },
+                React.createElement(Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null, className: classes.username }), notificationObject.follower.username),
                 ' ',
-                intl.formatMessage(messages.followUser, { b: (...chunks) => React.createElement("strong", null, chunks) })), secondary: template === SCNotificationObjectTemplateType.DETAIL && React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), footer: React.createElement(React.Fragment, null, template === SCNotificationObjectTemplateType.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+                intl.formatMessage(messages.followUser, { 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.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.USER_PROFILE_ROUTE_NAME, notificationObject.follower) },
-                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.goToProfile", defaultMessage: 'ui.userToastNotifications.goToProfile' })))))) })));
+                    React.createElement(Link, Object.assign({}, (!notificationObject.follower.deleted && {
+                        to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower)
+                    }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }),
+                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.goToProfile", defaultMessage: 'ui.userToastNotifications.goToProfile' }))))) }, rest)),
+        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
-//# sourceMappingURL=UserFollow.js.map

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

@@ -1,4 +1,3 @@
 import UserFollowNotification, { NotificationFollowProps } from './UserFollow';
 export default UserFollowNotification;
 export { NotificationFollowProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import UserFollowNotification from './UserFollow';
 export default UserFollowNotification;
-//# sourceMappingURL=index.js.map

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

@@ -1,30 +1,11 @@
 import { SCNotificationVoteUpType } from '@selfcommunity/types';
-import { SCNotificationObjectTemplateType } from '../../../types/notification';
-export interface NotificationVoteUpProps {
-    /**
-     * Id of the feedObject
-     * @default `n_<notificationObject.sid>`
-     */
-    id?: string;
-    /**
-     * Overrides or extends the styles applied to the component.
-     * @default null
-     */
-    className?: string;
+import { NotificationItemProps } from '../../../shared/NotificationItem';
+export interface NotificationVoteUpProps extends Pick<NotificationItemProps, Exclude<keyof NotificationItemProps, 'image' | 'disableTypography' | 'primary' | 'primaryTypographyProps' | 'secondary' | 'secondaryTypographyProps' | 'actions' | 'footer' | 'isNew'>> {
     /**
      * Notification obj
      * @default null
      */
     notificationObject: SCNotificationVoteUpType;
-    /**
-     * Notification Object template type
-     * @default 'detail'
-     */
-    template?: SCNotificationObjectTemplateType;
-    /**
-     * Any other properties
-     */
-    [p: string]: any;
 }
 /**
  * This component render the content of the notification of type vote up
@@ -32,4 +13,3 @@ export interface NotificationVoteUpProps {
  * @constructor
  */
 export default function VoteUpNotification(inProps: NotificationVoteUpProps): JSX.Element;
-//# sourceMappingURL=VoteUp.d.ts.map

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

@@ -1,17 +1,7 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
+import { __rest } from "tslib";
+import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';
@@ -20,6 +10,8 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types/notification';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
+import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
+import UserAvatar from '../../../shared/UserAvatar';
 const messages = defineMessages({
     appreciated: {
         id: 'ui.notification.voteUp.appreciated',
@@ -35,7 +27,7 @@ const classes = {
     activeAt: `${PREFIX}-active-at`,
     contributionText: `${PREFIX}-contribution-text`
 };
-const Root = styled(Box, {
+const Root = styled(NotificationItem, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -73,26 +65,29 @@ export default function VoteUpNotification(inProps) {
     // CONST
     const contribution = getContribution(notificationObject);
     const contributionType = getContributionType(notificationObject);
+    // STATE
+    const [openAlert, setOpenAlert] = useState(false);
     // INTL
     const intl = useIntl();
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`) }, rest),
-        React.createElement(NotificationItem, { template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) },
-                React.createElement(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } })), primary: React.createElement(React.Fragment, null,
-                React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user), className: classes.username }, notificationObject.user.username),
+    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(React.Fragment, 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),
                 ' ',
                 intl.formatMessage(messages.appreciated, {
                     username: notificationObject.user.username,
                     b: (...chunks) => React.createElement("strong", null, chunks)
                 })), secondary: React.createElement(React.Fragment, null,
                 React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-                    React.createElement(Typography, { variant: "body2", className: classes.contributionText, gutterBottom: true, component: 'div' }, getContributionSnippet(notificationObject[contributionType]))),
-                template === SCNotificationObjectTemplateType.DETAIL && 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(Typography, { variant: "body2", className: classes.contributionText, component: 'div' }, getContributionSnippet(notificationObject[contributionType]))),
+                (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (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(getContributionRouteName(contribution), getRouteData(contribution)) },
-                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))) })));
+                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))) }, rest)),
+        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
-//# sourceMappingURL=VoteUp.js.map

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

@@ -1,4 +1,3 @@
 import VoteUpNotification, { NotificationVoteUpProps } from './VoteUp';
 export default VoteUpNotification;
 export { NotificationVoteUpProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import VoteUpNotification from './VoteUp';
 export default VoteUpNotification;
-//# sourceMappingURL=index.js.map

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

@@ -2,4 +2,3 @@ import UserNotification, { NotificationProps } from './Notification';
 import NotificationSkeleton from './Skeleton';
 export default UserNotification;
 export { NotificationProps, NotificationSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

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