@selfcommunity/react-ui 0.11.0 → 1.0.0

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.d.ts

@@ -23,4 +23,4 @@ export interface VideoConferenceProps {
  * of participants, basic non-persistent chat, screen sharing, and more.
  *
  */
-export declare function VideoConference(inProps: VideoConferenceProps): JSX.Element;
+export declare function VideoConference(inProps: VideoConferenceProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/utils.d.ts

@@ -7,12 +7,12 @@ export declare function chain(...callbacks: any[]): (...args: any[]) => void;
 interface Props {
     [key: string]: any;
 }
-declare type TupleTypes<T> = {
+type TupleTypes<T> = {
     [P in keyof T]: T[P];
 } extends {
     [key: number]: infer V;
 } ? V : never;
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 /**
  * Merges multiple props objects together. Event handlers are chained,
  * classNames are combined, and ids are deduplicated - different ids

package/lib/esm/components/LiveStreamRoom/types.d.ts

@@ -14,7 +14,7 @@ export interface TokenResult {
     accessToken: string;
 }
 export declare function isVideoCodec(codec: string): codec is VideoCodec;
-export declare type ConnectionDetails = {
+export type ConnectionDetails = {
     serverUrl: string;
     roomName: string;
     participantName: string;

package/lib/esm/components/LocationAutocomplete/LocationAutocomplete.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Autocomplete, TextField, CircularProgress, styled } from '@mui/material';
+import { Autocomplete, TextField, CircularProgress, styled, useThemeProps } from '@mui/material';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
-import { useThemeProps } from '@mui/system';
 const PREFIX = 'SCLocationAutocomplete';
 const classes = {
     root: `${PREFIX}-root`
@@ -14,7 +13,7 @@ const classes = {
 const Root = styled(Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({
     minWidth: 120
 }));
@@ -83,11 +82,11 @@ export default function LocationAutocomplete(inProps) {
         }
     }, [value]);
     // Handlers
-    const handleChange = (event, value) => {
+    const handleChange = (_event, value) => {
         setValue(value ? { location: value.full_address, lat: value.lat, lng: value.lng } : null);
         onChange && onChange(value);
     };
-    const handleSearch = (event, _search) => {
+    const handleSearch = (_event, _search) => {
         setSearch(_search);
     };
     // Render
@@ -97,13 +96,14 @@ export default function LocationAutocomplete(inProps) {
         }
         return [...locations, { lat: value.lat, lng: value.lng, full_address: value.location }];
     }, [value, locations]);
-    return (_jsx(Root, Object.assign({ className: classes.root, options: options || [], 
-        // @ts-ignore
-        getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.full_address) || (option === null || option === void 0 ? void 0 : option.location) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, value: value || null, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: _jsx(FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lng === option.lng, renderInput: (params) => {
-            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+    return (_jsx(Root, Object.assign({ className: classes.root, options: options || [], getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option['full_address']) || (option === null || option === void 0 ? void 0 : option['location']) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, value: value || null, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: _jsx(FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lng === option.lng, renderInput: (params) => {
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
+                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: (_jsxs(_Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) })
+                } })));
         }, renderOption: (props, option, { inputValue }) => {
+            const { key } = props, rest = __rest(props, ["key"]);
             const matches = match(option.full_address, inputValue);
             const parts = parse(option.full_address, matches);
-            return (_jsx("li", Object.assign({}, props, { style: { whiteSpace: 'break-spaces' } }, { children: parts.map((part, index) => part.highlight ? (_jsx("span", Object.assign({ style: { fontWeight: 700 } }, { children: part.text }), index)) : (part.text)) }), `${option.lat}_${option.lng}`));
+            return (_jsx("li", Object.assign({}, rest, { style: { whiteSpace: 'break-spaces' } }, { children: parts.map((part, index) => part.highlight ? (_jsx("span", Object.assign({ style: { fontWeight: 700 } }, { children: part.text }), index)) : (part.text)) }), key || `${option.lat}_${option.lng}`));
         } }, rest)));
 }

package/lib/esm/components/LoyaltyProgramWidget/LoyaltyProgramWidget.js

@@ -109,5 +109,5 @@ export default function LoyaltyProgramWidget(inProps) {
     if (loading) {
         return _jsx(Skeleton, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(CardContent, { children: _jsx(Typography, Object.assign({ className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }) })) }), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsxs(Typography, Object.assign({ className: classes.points }, { children: [_jsx(Chip, { size: 'medium', component: "span", label: points }), _jsx(FormattedMessage, { id: "ui.loyaltyProgramWidget.points", defaultMessage: "ui.loyaltyProgramWidget.points" })] })), _jsx(Button, Object.assign({ size: "small", variant: "outlined", className: classes.discoverMore, component: Link, to: scRoutingContext.url(SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.loyaltyProgramWidget.discover", defaultMessage: "ui.loyaltyProgramWidget.discover" }) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(CardContent, { children: _jsx(Typography, Object.assign({ className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }) })) }), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsxs(Typography, Object.assign({ className: classes.points }, { children: [_jsx(Chip, { size: "medium", component: "span", label: points }), _jsx(FormattedMessage, { id: "ui.loyaltyProgramWidget.points", defaultMessage: "ui.loyaltyProgramWidget.points" })] })), _jsx(Button, Object.assign({ size: "small", variant: "outlined", className: classes.discoverMore, component: Link, to: scRoutingContext.url(SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.loyaltyProgramWidget.discover", defaultMessage: "ui.loyaltyProgramWidget.discover" }) }))] }))] })));
 }

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

@@ -40,5 +40,5 @@ const Root = styled(Widget, {
  *
  */
 export default function LoyaltyProgramWidgetSkeleton() {
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(CardContent, Object.assign({ className: classes.content }, { children: _jsx(Typography, Object.assign({ className: classes.title }, { children: _jsx(Skeleton, { animation: "wave", height: 25, width: "40%", variant: "rectangular" }) })) })), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsxs(Typography, Object.assign({ className: classes.points }, { children: [_jsx(Skeleton, { animation: "wave", variant: "circular", width: 60, height: 30, className: classes.chip }), _jsx(Skeleton, { animation: "wave", height: 20, width: 90, variant: "rectangular" })] })), _jsx(Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" }) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(CardContent, Object.assign({ className: classes.content }, { children: _jsx(Typography, Object.assign({ className: classes.title }, { children: _jsx(Skeleton, { animation: "wave", height: 25, width: "40%", variant: "rectangular" }) })) })), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsxs(Typography, Object.assign({ className: classes.points }, { children: [_jsx(Skeleton, { animation: "wave", variant: "circular", width: 60, height: 30, className: classes.chip }), _jsx(Skeleton, { animation: "wave", height: 20, width: 90, variant: "rectangular" })] })), _jsx(Button, Object.assign({ disabled: true, variant: "outlined", size: "small" }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" }) }))] }))] })));
 }

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

@@ -16,4 +16,4 @@ export interface MyEventsWidgetProps extends WidgetProps {
      */
     [p: string]: any;
 }
-export default function MyEventsWidget(inProps: MyEventsWidgetProps): JSX.Element;
+export default function MyEventsWidget(inProps: MyEventsWidgetProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/MyEventsWidget/Skeleton.d.ts

@@ -1 +1 @@
-export default function MyEventsWidgetSkeleton(): JSX.Element;
+export default function MyEventsWidgetSkeleton(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
 import MyEventsWidget, { MyEventsWidgetProps } from './MyEventsWidget';
 import MyEventsWidgetSkeleton from './Skeleton';
 export default MyEventsWidget;
-export { MyEventsWidgetSkeleton, type MyEventsWidgetProps };
+export { MyEventsWidgetSkeleton, MyEventsWidgetProps };

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.d.ts

@@ -6,4 +6,4 @@ export interface DefaultDrawerContentProps extends BoxProps {
     onClose?: () => void;
     onClickHome?: () => void;
 }
-export default function DefaultDrawerContent(inProps: DefaultDrawerContentProps): JSX.Element;
+export default function DefaultDrawerContent(inProps: DefaultDrawerContentProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js

@@ -88,7 +88,8 @@ export default function DefaultDrawerContent(inProps) {
                 scroll(window, { top: 0, behavior: 'smooth' });
             }
         }
-    }, [onClickHome]);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClickHome, onClose]);
     // Order categories
     useEffect(() => {
         if (!scUserContext.user || (scUserContext.user && showAllCategories)) {
@@ -121,7 +122,7 @@ export default function DefaultDrawerContent(inProps) {
         }
     });
     //order
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), onClick: handleClickHome }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "courses" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {}), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), _jsxs(_Fragment, { children: [Object.entries(taggedCategories).map(([tagName, categories]) => {
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), onClick: handleClickHome }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}), onClick: onClose }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "courses" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}), onClick: onClose }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), onClick: onClose }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), onClick: onClose }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {}), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), _jsxs(_Fragment, { children: [Object.entries(taggedCategories).map(([tagName, categories]) => {
                         var _a;
                         if (!categories.length || !((_a = categories[0].tags) === null || _a === void 0 ? void 0 : _a.length))
                             return null;

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerSkeleton.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from '@mui/material';
 export declare const PREFIX = "SCDefaultDrawerSkeleton";
-export declare type DefaultDrawerSkeletonProps = BoxProps;
+export type DefaultDrawerSkeletonProps = BoxProps;
 /**
  * > API documentation for the Community-JS Default Drawer Skeleton component. Learn about the available props and the CSS API.
 

package/lib/esm/components/NavigationMenuIconButton/DefaultHeaderContent.d.ts

@@ -1,3 +1,3 @@
 import { BoxProps } from '@mui/material';
-export declare type DefaultHeaderContentProps = BoxProps;
-export default function DefaultHeaderContent(inProps: DefaultHeaderContentProps): JSX.Element;
+export type DefaultHeaderContentProps = BoxProps;
+export default function DefaultHeaderContent(inProps: DefaultHeaderContentProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js

@@ -245,5 +245,13 @@ export default function NavigationSettingsIconButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    } }, { children: renderList() }))) }))] }));
 }

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

@@ -108,4 +108,4 @@ export interface NavigationToolbarProps extends ToolbarProps {
  *
  * @param inProps
  */
-export default function NavigationToolbar(inProps: NavigationToolbarProps): JSX.Element;
+export default function NavigationToolbar(inProps: NavigationToolbarProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/NavigationToolbar/NotificationMenu.d.ts

@@ -7,4 +7,4 @@ export interface NotificationsMenuProps extends MenuProps {
      */
     SnippetNotificationsProps?: SnippetNotificationsProps;
 }
-export default function NotificationMenu(inProps: NotificationsMenuProps): JSX.Element;
+export default function NotificationMenu(inProps: NotificationsMenuProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/NavigationToolbar/NotificationMenu.js

@@ -22,11 +22,8 @@ export default function NotificationMenu(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { PaperProps = { className: classes.paper }, MenuListProps = { component: Box }, SnippetNotificationsProps = {} } = props, rest = __rest(props, ["PaperProps", "MenuListProps", "SnippetNotificationsProps"]);
+    const { slotProps = { paper: { className: classes.paper }, list: { component: Box } }, SnippetNotificationsProps = {} } = props, rest = __rest(props, ["slotProps", "SnippetNotificationsProps"]);
     // HOOKS
     const scRoutingContext = useSCRouting();
-    return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    _jsxs(Root, Object.assign({ className: classes.root, PaperProps: PaperProps, MenuListProps: MenuListProps }, rest, { children: [_jsx(SnippetNotifications, Object.assign({ className: classes.notifications }, SnippetNotificationsProps)), _jsx(Button, Object.assign({ className: classes.link, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), variant: "text" }, { children: _jsx(FormattedMessage, { id: "ui.header.notifications.button.seeMore", defaultMessage: "ui.header.notifications.button.seeMore" }) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root, slotProps: slotProps }, rest, { children: [_jsx(SnippetNotifications, Object.assign({ className: classes.notifications }, SnippetNotificationsProps)), _jsx(Button, Object.assign({ className: classes.link, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), variant: "text" }, { children: _jsx(FormattedMessage, { id: "ui.header.notifications.button.seeMore", defaultMessage: "ui.header.notifications.button.seeMore" }) }))] })));
 }

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

@@ -76,4 +76,4 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
  *
  * @param inProps
  */
-export default function NavigationToolbarMobile(inProps: NavigationToolbarMobileProps): JSX.Element;
+export default function NavigationToolbarMobile(inProps: NavigationToolbarMobileProps): import("react/jsx-runtime").JSX.Element;

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

@@ -63,5 +63,7 @@ export default function CollapsedForNotification(props) {
     /**
      * Renders root object
      */
-    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.collapsedFor.${camelCase(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.collapsedFor.${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: _jsx(FormattedMessage, { id: "ui.notification.collapsedFor.youWrote", defaultMessage: "ui.notification.collapsedFor.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", gutterBottom: true }, { 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)));
+    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.collapsedFor.${camelCase(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.collapsedFor.${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 }, `${messages[camelCase(notificationObject.type)]}.b`)
+                }) }))) }), 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: _jsx(FormattedMessage, { id: "ui.notification.collapsedFor.youWrote", defaultMessage: "ui.notification.collapsedFor.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", gutterBottom: true }, { 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/Comment/Comment.js

@@ -65,9 +65,9 @@ export default function CommentNotification(props) {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.comment.author)
                         }), { onClick: notificationObject.comment.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.comment.author.username })), ' ', notificationObject.type === SCNotificationTypologyType.NESTED_COMMENT
                             ? intl.formatMessage(messages.nestedComment, {
-                                b: (...chunks) => _jsx("strong", { children: chunks })
+                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.comment.nestedComment.b")
                             })
                             : intl.formatMessage(messages.comment, {
-                                b: (...chunks) => _jsx("strong", { children: chunks })
-                            })] }), secondary: _jsxs(React.Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(notificationObject.comment)) }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contributionText }, { children: getContributionSnippet(notificationObject.comment) })) })), (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-start", alignItems: "center", spacing: 1 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Bullet, { className: classes.bullet }), _jsx(VoteButton, { className: classes.voteButton, variant: "text", size: "small", contributionId: notificationObject.comment.id, contributionType: SCContributionType.COMMENT, contribution: notificationObject.comment, onVote: handleVote })] })))] }), 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.COMMENT_ROUTE_NAME, getRouteData(notificationObject.comment)) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.comment.comment.b")
+                            })] }), secondary: _jsxs(React.Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(notificationObject.comment)) }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contributionText }, { children: getContributionSnippet(notificationObject.comment) })) })), (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-start", alignItems: "center", spacing: 1 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Bullet, { className: classes.bullet }), _jsx(VoteButton, { className: classes.voteButton, variant: "text", size: "small", contributionId: notificationObject.comment.id, contributionType: SCContributionType.COMMENT, contribution: notificationObject.comment, onVote: handleVote })] })))] }), 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.COMMENT_ROUTE_NAME, getRouteData(notificationObject.comment)) }, { 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/Contribution/Contribution.js

@@ -79,5 +79,5 @@ export default function ContributionNotification(props) {
                                 : intl.formatMessage(messages.discussionSnippet) })) : (_jsx(_Fragment, { children: notificationObject[contributionType]['type'] === SCContributionType.POST ||
                                 notificationObject[contributionType]['type'] === SCContributionType.STATUS
                                 ? intl.formatMessage(messages.postOrStatus, { contribution: notificationObject[contributionType]['type'] })
-                                : intl.formatMessage(messages.discussion) }))] }), secondary: _jsxs(React.Fragment, { children: [template === SCNotificationObjectTemplateType.SNIPPET && (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contributionText, component: 'div' }, { children: getContributionSnippet(notificationObject[contributionType]) })) }))), template === SCNotificationObjectTemplateType.DETAIL && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-start", alignItems: "center", spacing: 1 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Bullet, { className: classes.bullet }), _jsx(VoteButton, { className: classes.voteButton, variant: "text", size: "small", contributionId: notificationObject[contributionType].id, contributionType: contributionType, contribution: notificationObject[contributionType], onVote: handleVote })] }))), template === SCNotificationObjectTemplateType.SNIPPET && (_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) })] }));
+                                : intl.formatMessage(messages.discussion) }))] }), secondary: _jsxs(React.Fragment, { children: [template === SCNotificationObjectTemplateType.SNIPPET && (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contributionText, component: "div" }, { children: getContributionSnippet(notificationObject[contributionType]) })) }))), template === SCNotificationObjectTemplateType.DETAIL && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-start", alignItems: "center", spacing: 1 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Bullet, { className: classes.bullet }), _jsx(VoteButton, { className: classes.voteButton, variant: "text", size: "small", contributionId: notificationObject[contributionType].id, contributionType: contributionType, contribution: notificationObject[contributionType], onVote: handleVote })] }))), template === SCNotificationObjectTemplateType.SNIPPET && (_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/ContributionFollow/ContributionFollow.js

@@ -50,6 +50,6 @@ export default function ContributionFollowNotification(props) {
      * Renders root object
      */
     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) })] }));
+                            b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.contributionFollow.follow.b")
+                        })] })), 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/Course/Course.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Avatar, Box, Stack, Typography, styled } from '@mui/material';
+import { Avatar, Box, Button, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { SCNotificationTypologyType } from '@selfcommunity/types';
 import { FormattedMessage } from 'react-intl';
@@ -9,7 +9,6 @@ import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { SCCourseTemplateType, 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';
@@ -54,16 +53,14 @@ export default function CourseNotification(props) {
             }), { 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.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
                             name: notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                 ? notificationObject.comment.lesson_name
                                 : notificationObject.course.name,
-                            link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                            link: (chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                     ? SCRoutes.COURSE_LESSON_ROUTE_NAME
                                     : SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                     ? formatLessonUrl(notificationObject)
-                                    : notificationObject.course) }, { children: chunks })))
+                                    : notificationObject.course) }, { children: chunks }), `ui.notification.course.${notificationObject.type}.link`))
                         } })] }), 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(getRouteName(notificationObject), getRouteParams(notificationObject)) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.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 && {
@@ -71,15 +68,13 @@ export default function CourseNotification(props) {
                 }), { 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.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
                                 name: notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                     ? notificationObject.comment.lesson_name
                                     : notificationObject.course.name,
-                                link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                link: (chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                         ? SCRoutes.COURSE_LESSON_ROUTE_NAME
                                         : SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                         ? formatLessonUrl(notificationObject)
-                                        : notificationObject.course) }, { children: chunks })))
-                            } }), notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? (_jsx(Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : (_jsx(CourseItem, { course: notificationObject.course, actions: _jsx(_Fragment, {}), template: SCCourseTemplateType.SNIPPET, 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(getRouteName(notificationObject), getRouteParams(notificationObject)) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                                        : notificationObject.course) }, { children: chunks }), `ui.notification.course.${notificationObject.type}.link`))
+                            } }), notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? (_jsx(Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : (_jsx(CourseItem, { course: notificationObject.course, actions: _jsx(_Fragment, {}), template: SCCourseTemplateType.SNIPPET, 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(Button, Object.assign({ color: "primary", variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(getRouteName(notificationObject), getRouteParams(notificationObject)) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

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

@@ -45,7 +45,7 @@ const classes = {
 const Root = styled(NotificationItem, {
     name: PREFIX,
     slot: 'DeletedForRoot',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * This component render the content of the notification of type deleted for
@@ -65,5 +65,7 @@ export default function DeletedForNotification(props) {
     /**
      * Renders root object
      */
-    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)));
+    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 }, `${messages[camelCase(notificationObject.type)]}.b`)
+                        }) }))] })) }), 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.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Avatar, Box, Icon, Stack, Typography, styled } from '@mui/material';
+import { Avatar, Box, Button, Icon, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { SCEventLocationType, SCEventSubscriptionStatusType, SCNotificationTypologyType } from '@selfcommunity/types';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -9,7 +9,6 @@ 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';
@@ -61,11 +60,9 @@ export default function EventNotification(props) {
             }), { 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: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
-                            icon: (...chunks) => _jsx(Icon, { children: chunks }),
+                            icon: (chunks) => _jsx(Icon, { children: chunks }, `ui.notification.event.${notificationObject.type}.icon`),
                             event: notificationObject.event.name,
-                            link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
+                            link: (chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }), `ui.notification.event.${notificationObject.type}.link`))
                         } })] }), 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',
@@ -74,21 +71,19 @@ export default function EventNotification(props) {
                                     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: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(LoadingButton, Object.assign({ disabled: disabled, loading: loading, color: 'primary', variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled ? (_jsx(FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : (_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)));
+                            } }) })), _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: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(Button, Object.assign({ disabled: disabled, loading: loading, color: "primary", variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled ? (_jsx(FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : (_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: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                icon: (...chunks) => _jsx(Icon, { children: chunks }),
+                                icon: (chunks) => _jsx(Icon, { children: chunks }, `ui.notification.${notificationObject.type}.icon`),
                                 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({}, (notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
+                                link: (chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }), `ui.notification.${notificationObject.type}.link`))
+                            } }), _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(Button, Object.assign({}, (notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
                             disabled: disabled
-                        }), { loading: loading, color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
+                        }), { loading: loading, color: "primary", variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
                             component: Link,
                             to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event)
                         }), { onClick: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
-import { Avatar, Box, Stack, Typography, styled } from '@mui/material';
+import { Avatar, Box, Button, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, SCUserContext, useSCRouting } from '@selfcommunity/react-core';
 import { SCGroupSubscriptionStatusType, SCNotificationTypologyType } from '@selfcommunity/types';
 import { FormattedMessage } from 'react-intl';
@@ -9,7 +9,6 @@ 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';
@@ -54,16 +53,16 @@ export default function GroupNotification(props) {
                         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 ||
+                            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 })))
+                                    : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, { children: chunks }), `ui.notification.${notificationObject.type}.link`))
                         } })] }), 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) }, { children: _jsx(FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" }) })) })))] }))) }, 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, 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 ||
+    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(Button, 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

@@ -40,9 +40,9 @@ export default function IncubatorApprovedNotification(props) {
      */
     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 })
+                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.incubatorApproved.approved.b.1")
                     }) })) }))) : (_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)));
+                            b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.incubatorApproved.approved.b.2")
+                        }) }))] })) }), 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)));
 }