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

package/lib/cjs/components/SnippetNotifications/SnippetNotifications.js

@@ -1,111 +1,64 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
-const Comment_1 = __importDefault(require("../Notification/Comment"));
-const UserFollow_1 = __importDefault(require("../Notification/UserFollow"));
-const UndeletedFor_1 = __importDefault(require("../Notification/UndeletedFor"));
-const DeletedFor_1 = __importDefault(require("../Notification/DeletedFor"));
-const UserConnection_1 = __importDefault(require("../Notification/UserConnection"));
-const PrivateMessage_1 = __importDefault(require("../Notification/PrivateMessage"));
-const UserBlocked_1 = __importDefault(require("../Notification/UserBlocked"));
-const Mention_1 = __importDefault(require("../Notification/Mention"));
-const CollapsedFor_1 = __importDefault(require("../Notification/CollapsedFor"));
-const KindlyNoticeFor_1 = __importDefault(require("../Notification/KindlyNoticeFor"));
-const KindlyNoticeFlag_1 = __importDefault(require("../Notification/KindlyNoticeFlag"));
-const VoteUp_1 = __importDefault(require("../Notification/VoteUp"));
+const Comment_1 = tslib_1.__importDefault(require("../Notification/Comment"));
+const UserFollow_1 = tslib_1.__importDefault(require("../Notification/UserFollow"));
+const UndeletedFor_1 = tslib_1.__importDefault(require("../Notification/UndeletedFor"));
+const DeletedFor_1 = tslib_1.__importDefault(require("../Notification/DeletedFor"));
+const UserConnection_1 = tslib_1.__importDefault(require("../Notification/UserConnection"));
+const PrivateMessage_1 = tslib_1.__importDefault(require("../Notification/PrivateMessage"));
+const UserBlocked_1 = tslib_1.__importDefault(require("../Notification/UserBlocked"));
+const Mention_1 = tslib_1.__importDefault(require("../Notification/Mention"));
+const CollapsedFor_1 = tslib_1.__importDefault(require("../Notification/CollapsedFor"));
+const KindlyNoticeFor_1 = tslib_1.__importDefault(require("../Notification/KindlyNoticeFor"));
+const KindlyNoticeFlag_1 = tslib_1.__importDefault(require("../Notification/KindlyNoticeFlag"));
+const VoteUp_1 = tslib_1.__importDefault(require("../Notification/VoteUp"));
 const Errors_1 = require("../../constants/Errors");
-const pubsub_js_1 = __importDefault(require("pubsub-js"));
-const ContributionFollow_1 = __importDefault(require("../Notification/ContributionFollow"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const ContributionFollow_1 = tslib_1.__importDefault(require("../Notification/ContributionFollow"));
 const material_1 = require("@mui/material");
-const IncubatorApproved_1 = __importDefault(require("../Notification/IncubatorApproved"));
-const classnames_1 = __importDefault(require("classnames"));
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const IncubatorApproved_1 = tslib_1.__importDefault(require("../Notification/IncubatorApproved"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const types_1 = require("../../types");
-const ScrollContainer_1 = __importDefault(require("../../shared/ScrollContainer"));
+const ScrollContainer_1 = tslib_1.__importDefault(require("../../shared/ScrollContainer"));
 const react_intl_1 = require("react-intl");
 const types_2 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const system_1 = require("@mui/system");
-const Contribution_1 = __importDefault(require("../Notification/Contribution"));
-const NotificationItem_1 = __importDefault(require("../../shared/NotificationItem"));
+const Contribution_1 = tslib_1.__importDefault(require("../Notification/Contribution"));
+const NotificationItem_1 = tslib_1.__importDefault(require("../../shared/NotificationItem"));
 const PREFIX = 'SCSnippetNotifications';
 const classes = {
     root: `${PREFIX}-root`,
     notificationsWrap: `${PREFIX}-notifications-wrap`,
     emptyBoxNotifications: `${PREFIX}-empty-box-notifications`,
-    notificationsList: `${PREFIX}-notifications-list`,
+    list: `${PREFIX}-list`,
     broadcastMessagesBanner: `${PREFIX}-broadcast-messages-banner`,
-    notificationItem: `${PREFIX}-notification-item`
+    item: `${PREFIX}-item`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
+})(() => ({
     width: '100%',
     [`& .${classes.notificationsWrap}`]: {
         height: 330,
-        maxWidth: 320,
         overflowY: 'hidden'
-    },
-    [`& .${classes.notificationItem}`]: {
-        padding: 0,
-        margin: `${theme.spacing()} 0px`,
-        whiteSpace: 'normal',
-        '&:hover': {
-            backgroundColor: 'rgba(0, 0, 0, 0.05)',
-            cursor: 'default'
-        }
-    },
-    '& a': {
-        textDecoration: 'none',
-        color: theme.palette.text.primary
     }
 }));
 const PREFERENCES = [react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, react_core_1.SCPreferences.TEXT_APPLICATION_NAME];
 /**
+ * > API documentation for the Community-JS SnippetNotifications component. Learn about the available props and the CSS API.
+ *
  *
- > API documentation for the Community-JS SnippetNotifications component. Learn about the available props and the CSS API.
+ * This component renders the notification list.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/SnippetNotifications)
 
  #### Import
 
@@ -125,8 +78,8 @@ const PREFERENCES = [react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, react_c
  |root|.SCSnippetNotification-root|Styles applied to the root element.|
  |notificationsWrap|.SCSnippetNotification-notification-wrap|Styles applied to the notifications wrap.|
  |emptyBoxNotifications|.SCSnippetNotification-empty-box-notifications|Styles applied to the box indicating that there are no notifications.|
- |notificationsList|.SCSnippetNotification-notifications-list|Styles applied to the list of notifications.|
- |notificationItem|.SCSnippetNotification-notification-item|Styles applied to the single notification.|
+ |list|.SCSnippetNotification-list|Styles applied to the list of notifications.|
+ |item|.SCSnippetNotification-item|Styles applied to the single notification.|
  |broadcastMessagesBanner|.SCSnippetNotification-broadcast-messages-banner|Styles applied to the broadcast message banner.|
 
  * @param inProps
@@ -137,13 +90,14 @@ function SnippetNotifications(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `snippetNotifications`, className, showMax = 20, handleCustomNotification, handleNotification, ScrollContainerProps = {}, onNotificationClick } = props, rest = __rest(props, ["id", "className", "showMax", "handleCustomNotification", "handleNotification", "ScrollContainerProps", "onNotificationClick"]);
+    const { id = `snippetNotifications`, className, showMax = 20, handleCustomNotification, handleNotification, ScrollContainerProps = {}, onNotificationClick, onFetchNotifications } = props, rest = tslib_1.__rest(props, ["id", "className", "showMax", "handleCustomNotification", "handleNotification", "ScrollContainerProps", "onNotificationClick", "onFetchNotifications"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // STATE
     const [notifications, setNotifications] = (0, react_1.useState)([]);
-    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [initialized, setInitialized] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(false);
     // REFS
     const notificationSubscription = (0, react_1.useRef)(null);
     // Compute preferences
@@ -175,26 +129,34 @@ function SnippetNotifications(inProps) {
      * Handles vote
      * @param comment
      */
-    function fetchNotifications() {
-        setLoading(true);
-        performFetchNotifications()
-            .then((data) => {
-            setNotifications(data.results);
-            setLoading(false);
-            scUserContext.refreshNotificationCounters();
-        })
-            .catch((error) => {
-            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-        });
-    }
+    const fetchNotifications = (0, react_1.useMemo)(() => () => {
+        setInitialized(true);
+        if (!loading) {
+            setLoading(true);
+            performFetchNotifications()
+                .then((data) => {
+                setNotifications(data.results);
+                setLoading(false);
+                scUserContext.refreshCounters();
+                onFetchNotifications && onFetchNotifications(data.results);
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+    }, [loading, notifications.length, onFetchNotifications, setInitialized]);
     /**
      * Fetch notifications
      */
     (0, react_1.useEffect)(() => {
-        if (scUserContext.user && loading) {
-            fetchNotifications();
+        let _t;
+        if (scUserContext.user && !initialized) {
+            _t = setTimeout(fetchNotifications);
+            return () => {
+                _t && clearTimeout(_t);
+            };
         }
-    }, [scUserContext.user]);
+    }, [scUserContext.user, initialized]);
     /**
      * Notification subscriber
      * @param msg
@@ -236,7 +198,7 @@ function SnippetNotifications(inProps) {
      * @param n
      * @param i
      */
-    function renderAggregatedItem(n, i) {
+    const renderAggregatedItem = (n, i) => {
         const type = n.type;
         let content;
         if (type === types_2.SCNotificationTypologyType.COMMENT || type === types_2.SCNotificationTypologyType.NESTED_COMMENT) {
@@ -304,21 +266,20 @@ function SnippetNotifications(inProps) {
             content = handleNotification(type, n, content);
         }
         return content;
-    }
+    };
     /**
      * Renders root object
      */
     return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
-        react_1.default.createElement(material_1.Box, { className: classes.notificationsWrap }, loading ? (react_1.default.createElement(Skeleton_1.default, { elevation: 0 })) : (react_1.default.createElement(react_1.default.Fragment, null, notifications.length === 0 ? (react_1.default.createElement(material_1.Box, { className: classes.emptyBoxNotifications },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.snippetNotifications.noNotifications", defaultMessage: "ui.snippetNotifications.noNotifications" }))) : (react_1.default.createElement(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps),
-            react_1.default.createElement(material_1.MenuList, { className: classes.notificationsList },
-                scUserContext.user.unseen_notification_banners_counter ? (react_1.default.createElement(material_1.MenuItem, { className: (0, classnames_1.default)(classes.notificationItem, classes.broadcastMessagesBanner), key: "banner", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
+        react_1.default.createElement(material_1.Box, { className: classes.notificationsWrap }, !initialized || loading ? (react_1.default.createElement(Skeleton_1.default, { elevation: 0 })) : (react_1.default.createElement(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps),
+            react_1.default.createElement(material_1.MenuList, { className: classes.list, disabledItemsFocusable: true, disableListWrap: true },
+                scUserContext.user.unseen_notification_banners_counter ? (react_1.default.createElement(material_1.MenuItem, { className: (0, classnames_1.default)(classes.item, classes.broadcastMessagesBanner), key: "banner", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
                     react_1.default.createElement(NotificationItem_1.default, { template: types_1.SCNotificationObjectTemplateType.SNIPPET, isNew: true, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), primary: react_1.default.createElement(material_1.Typography, { component: 'div' }, intl.formatMessage({ id: 'ui.snippetNotifications.broadcastMessages', defaultMessage: 'ui.snippetNotifications.broadcastMessages' }, {
                             count: scUserContext.user.unseen_notification_banners_counter,
                             b: (...chunks) => react_1.default.createElement("strong", null, chunks),
                             link: (...chunks) => react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, chunks)
                         })) }))) : null,
-                notifications.slice(0, showMax).map((notificationObject, i) => notificationObject.aggregated.map((n, k) => (react_1.default.createElement(material_1.MenuItem, { className: classes.notificationItem, key: k, onClick: (e) => handleSingleNotificationClick(e, n) }, renderAggregatedItem(n, i)))))))))))));
+                notifications.length === 0 ? (react_1.default.createElement(material_1.MenuItem, { className: classes.emptyBoxNotifications },
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.snippetNotifications.noNotifications", defaultMessage: "ui.snippetNotifications.noNotifications" }))) : (notifications.slice(0, showMax).map((notificationObject, i) => notificationObject.aggregated.map((n, k) => (react_1.default.createElement(material_1.MenuItem, { className: classes.item, key: k, onClick: (e) => handleSingleNotificationClick(e, n), disableRipple: true, disableTouchRipple: true }, renderAggregatedItem(n, i))))))))))));
 }
 exports.default = SnippetNotifications;
-//# sourceMappingURL=SnippetNotifications.js.map

package/lib/cjs/components/SnippetNotifications/index.d.ts

@@ -2,4 +2,3 @@ import SnippetNotifications, { SnippetNotificationsProps } from './SnippetNotifi
 import SnippetNotificationsSkeleton from './Skeleton';
 export default SnippetNotifications;
 export { SnippetNotificationsProps, SnippetNotificationsSkeleton };
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/components/SnippetNotifications/index.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SnippetNotificationsSkeleton = void 0;
-const SnippetNotifications_1 = __importDefault(require("./SnippetNotifications"));
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const tslib_1 = require("tslib");
+const SnippetNotifications_1 = tslib_1.__importDefault(require("./SnippetNotifications"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 exports.SnippetNotificationsSkeleton = Skeleton_1.default;
 exports.default = SnippetNotifications_1.default;
-//# sourceMappingURL=index.js.map

package/lib/cjs/components/ToastNotifications/Skeleton.d.ts

@@ -19,4 +19,3 @@
  *
  */
 export default function ToastNotificationsSkeleton(): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

package/lib/cjs/components/ToastNotifications/Skeleton.js

@@ -1,9 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const Notification_1 = require("../Notification");
 const styles_1 = require("@mui/material/styles");
 const PREFIX = 'SCToastNotificationsSkeleton';
@@ -39,4 +37,3 @@ function ToastNotificationsSkeleton() {
     return react_1.default.createElement(Root, { className: classes.root });
 }
 exports.default = ToastNotificationsSkeleton;
-//# sourceMappingURL=Skeleton.js.map

package/lib/cjs/components/ToastNotifications/ToastNotifications.d.ts

@@ -1,10 +1,5 @@
 import { BoxProps } from '@mui/material';
 export interface ToastNotificationsProps extends BoxProps {
-    /**
-     * Props for toast message
-     * @default null
-     */
-    ToastMessageProps?: any;
     /**
      * Handle notification
      */
@@ -19,8 +14,7 @@ export interface ToastNotificationsProps extends BoxProps {
     [p: string]: any;
 }
 /**
- *
- > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -45,4 +39,3 @@ export interface ToastNotificationsProps extends BoxProps {
  * @param inProps
  */
 export default function UserToastNotifications(inProps: ToastNotificationsProps): JSX.Element;
-//# sourceMappingURL=ToastNotifications.d.ts.map

package/lib/cjs/components/ToastNotifications/ToastNotifications.js

@@ -1,53 +1,28 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
-const pubsub_js_1 = __importDefault(require("pubsub-js"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const notistack_1 = require("notistack");
-const CustomSnackMessage_1 = __importDefault(require("../../shared/CustomSnackMessage"));
+const CustomSnackMessage_1 = tslib_1.__importDefault(require("../../shared/CustomSnackMessage"));
 const types_2 = require("../../types");
-const Comment_1 = __importDefault(require("../Notification/Comment"));
-const ContributionFollow_1 = __importDefault(require("../Notification/ContributionFollow"));
-const UserFollow_1 = __importDefault(require("../Notification/UserFollow"));
-const UserConnection_1 = __importDefault(require("../Notification/UserConnection"));
-const VoteUp_1 = __importDefault(require("../Notification/VoteUp"));
-const PrivateMessage_1 = __importDefault(require("../Notification/PrivateMessage"));
-const Mention_1 = __importDefault(require("../Notification/Mention"));
-const KindlyNoticeFlag_1 = __importDefault(require("../Notification/KindlyNoticeFlag"));
-const IncubatorApproved_1 = __importDefault(require("../Notification/IncubatorApproved"));
-const UserBlocked_1 = __importDefault(require("../Notification/UserBlocked"));
-const Message_1 = __importDefault(require("../BroadcastMessages/Message"));
+const Comment_1 = tslib_1.__importDefault(require("../Notification/Comment"));
+const ContributionFollow_1 = tslib_1.__importDefault(require("../Notification/ContributionFollow"));
+const UserFollow_1 = tslib_1.__importDefault(require("../Notification/UserFollow"));
+const UserConnection_1 = tslib_1.__importDefault(require("../Notification/UserConnection"));
+const VoteUp_1 = tslib_1.__importDefault(require("../Notification/VoteUp"));
+const PrivateMessage_1 = tslib_1.__importDefault(require("../Notification/PrivateMessage"));
+const Mention_1 = tslib_1.__importDefault(require("../Notification/Mention"));
+const KindlyNoticeFlag_1 = tslib_1.__importDefault(require("../Notification/KindlyNoticeFlag"));
+const IncubatorApproved_1 = tslib_1.__importDefault(require("../Notification/IncubatorApproved"));
+const UserBlocked_1 = tslib_1.__importDefault(require("../Notification/UserBlocked"));
+const Message_1 = tslib_1.__importDefault(require("../BroadcastMessages/Message"));
 const system_1 = require("@mui/system");
-const Contribution_1 = __importDefault(require("../Notification/Contribution"));
+const Contribution_1 = tslib_1.__importDefault(require("../Notification/Contribution"));
 const PREFIX = 'SCToastNotifications';
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: PREFIX,
@@ -55,8 +30,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
 /**
- *
- > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -86,13 +60,15 @@ function UserToastNotifications(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { ToastMessageProps = {}, handleNotification, disableToastNotification = false } = props;
+    const { handleNotification, disableToastNotification = false } = props;
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
     // REFS
     const notificationSubscription = (0, react_1.useRef)(null);
     // CONTEXT
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const { options, setOptions } = (0, react_core_1.useSCAlertMessages)();
     /**
      * Render every single notification content
      * @param n
@@ -158,22 +134,25 @@ function UserToastNotifications(inProps) {
             (data.data.activity_type === types_1.SCNotificationTypologyType.NOTIFICATION_BANNER || react_core_1.SCNotification.SCNotificationMapping[data.data.activity_type]) &&
             !react_core_1.SCNotification.SCSilentToastNotifications.includes(data.data.activity_type) &&
             !disableToastNotification &&
-            !scContext.settings.notifications.webSocket.disableToastMessage) {
+            !scContext.settings.notifications.webSocket.disableToastMessage &&
+            scUserContext.managers.settings.get(react_core_1.SCNotification.NOTIFICATIONS_SETTINGS_SHOW_TOAST)) {
             /**
              * !IMPORTANT
              * - messageKey for the notification_banner is 'id', for others type 'feed_serialization_id'
              * - the enqueue message is persistent (it remains on the screen while the others replace each other) if type notification_banner
              */
             const messageKey = data.data.feed_serialization_id ? data.data.feed_serialization_id : data.data.id;
-            enqueueSnackbar(null, Object.assign({}, {
-                content: react_1.default.createElement(CustomSnackMessage_1.default, { id: messageKey, message: getContent(data.data) }),
+            enqueueSnackbar(getContent(data.data), {
                 preventDuplicate: true,
                 key: messageKey,
-                variant: 'default',
+                variant: 'notification',
                 persist: data.data.activity_type === types_1.SCNotificationTypologyType.NOTIFICATION_BANNER ? true : false,
                 anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
-                action: null
-            }, ToastMessageProps));
+                action: null,
+                SnackbarProps: {
+                    id: messageKey
+                }
+            });
         }
     };
     /**
@@ -185,8 +164,10 @@ function UserToastNotifications(inProps) {
         return () => {
             pubsub_js_1.default.unsubscribe(notificationSubscription.current);
         };
-    }, []);
+    }, [scUserContext.managers.settings.all]);
+    (0, react_1.useEffect)(() => {
+        setOptions(Object.assign(Object.assign({}, options), { Components: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.Components), { notification: CustomSnackMessage_1.default }) }));
+    }, [scUserContext.managers.settings.all]);
     return react_1.default.createElement(Root, null);
 }
 exports.default = UserToastNotifications;
-//# sourceMappingURL=ToastNotifications.js.map

package/lib/cjs/components/ToastNotifications/index.d.ts

@@ -2,4 +2,3 @@ import ToastNotifications, { ToastNotificationsProps } from './ToastNotification
 import ToastNotificationsSkeleton from './Skeleton';
 export default ToastNotifications;
 export { ToastNotificationsProps, ToastNotificationsSkeleton };
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/components/ToastNotifications/index.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToastNotificationsSkeleton = void 0;
-const ToastNotifications_1 = __importDefault(require("./ToastNotifications"));
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const tslib_1 = require("tslib");
+const ToastNotifications_1 = tslib_1.__importDefault(require("./ToastNotifications"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 exports.ToastNotificationsSkeleton = Skeleton_1.default;
 exports.default = ToastNotifications_1.default;
-//# sourceMappingURL=index.js.map

package/lib/cjs/components/User/Skeleton.d.ts

@@ -20,4 +20,3 @@ import { WidgetProps } from '../Widget';
  *
  */
 export default function UserSkeleton(props: WidgetProps): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

package/lib/cjs/components/User/Skeleton.js

@@ -1,13 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
-const BaseItem_1 = __importDefault(require("../../shared/BaseItem"));
+const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const PREFIX = 'SCUserSkeleton';
 const classes = {
     root: `${PREFIX}-root`
@@ -34,8 +32,8 @@ const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
  *
  */
 function UserSkeleton(props) {
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: 40, height: 40 }), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", disabled: true },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 50, style: { marginTop: 5, marginBottom: 5 } })) })));
+    const theme = (0, material_1.useTheme)();
+    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", disabled: true },
+            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })) })));
 }
 exports.default = UserSkeleton;
-//# sourceMappingURL=Skeleton.js.map

package/lib/cjs/components/User/User.d.ts

@@ -29,14 +29,9 @@ export interface UserProps extends WidgetProps {
      */
     showFollowers?: boolean;
     /**
-     *  Prop to show reaction badge on user avatar when showing feedObj reactions list
-     * @default false
-     */
-    showReaction?: boolean;
-    /**
-     * Reaction icon to show as user avatar badge if show reaction is true.
+     * Badge content to show as user avatar badge if show reaction is true.
      */
-    reaction?: any;
+    badgeContent?: any;
     /**
      * Any other properties
      */
@@ -44,6 +39,10 @@ export interface UserProps extends WidgetProps {
 }
 /**
  * > API documentation for the Community-JS User component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a user item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/User)
 
  #### Import
 
@@ -61,10 +60,10 @@ export interface UserProps extends WidgetProps {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCUser-root|Styles applied to the root element.|
+ |avatar|.SCUser-avatar|Styles applied to the avatar element.|
  |staffBadgeLabel|.SCUser-staff-badge-label|Styles applied to the staff badge label element.|
- |staffBadgeIcon|.SCUser-staff-badge-icon|Styles applied to the staff badge icon element.|
 
+ *
  * @param inProps
  */
 export default function User(inProps: UserProps): JSX.Element;
-//# sourceMappingURL=User.d.ts.map