@selfcommunity/react-ui 0.10.2-alpha.2 → 0.10.2-alpha.21

package/lib/esm/components/EventForm/EventForm.js

@@ -112,7 +112,7 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function EventForm(inProps) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -140,7 +140,7 @@ export default function EventForm(inProps) {
         recurring: (event === null || event === void 0 ? void 0 : event.recurring) || SCEventRecurrenceType.NEVER,
         name: (event === null || event === void 0 ? void 0 : event.name) || '',
         description: event ? event.description : '',
-        isPublic: (_a = (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PUBLIC) !== null && _a !== void 0 ? _a : true,
+        isPublic: (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PUBLIC || true,
         isSubmitting: false
     };
     // STATE
@@ -225,9 +225,7 @@ export default function EventForm(inProps) {
         })
             .catch((e) => {
             const _error = formatHttpErrorCode(e);
-            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            if (Object.values(_error)[0].error === 'unique') {
+            if (Object.values(_error)[0]['error'] === 'unique') {
                 setError(Object.assign(Object.assign({}, error), { ['nameError']: _jsx(FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) }));
             }
             else {
@@ -237,7 +235,7 @@ export default function EventForm(inProps) {
             Logger.error(SCOPE_SC_UI, e);
             onError === null || onError === void 0 ? void 0 : onError(e);
         });
-    }, [field, privateEnabled, visibilityEnabled, onSuccess, onError]);
+    }, [field, privateEnabled, visibilityEnabled, onSuccess, onError, notifyChanges]);
     const handleChange = useCallback((event) => {
         const { name, value } = event.target;
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
@@ -245,7 +243,7 @@ export default function EventForm(inProps) {
             delete error[`${name}Error`];
             setError(error);
         }
-    }, [error]);
+    }, [setField, error]);
     const handleChangeDateTime = useCallback((value, name) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
         if (error[`${name}Error`]) {
@@ -256,29 +254,26 @@ export default function EventForm(inProps) {
             delete error['endDateError'];
             setError(error);
         }
-    }, [error]);
-    const shouldDisabledDate = useCallback((date) => {
+    }, [setField, error]);
+    const shouldDisableDate = useCallback((date) => {
         let disabled = false;
         switch (field.recurring) {
             case SCEventRecurrenceType.DAILY:
-                disabled = date.getTime() > getLaterDaysDate(DAILY_LATER_DAYS).getTime();
+                disabled = date.getTime() > getLaterDaysDate(DAILY_LATER_DAYS, field.startDate).getTime();
                 break;
             case SCEventRecurrenceType.WEEKLY:
-                disabled = date.getTime() > getLaterDaysDate(WEEKLY_LATER_DAYS).getTime();
+                disabled = date.getTime() > getLaterDaysDate(WEEKLY_LATER_DAYS, field.startDate).getTime();
                 break;
             case SCEventRecurrenceType.MONTHLY:
-                disabled = date.getTime() > getLaterDaysDate(MONTHLY_LATER_DAYS).getTime();
+                disabled = date.getTime() > getLaterDaysDate(MONTHLY_LATER_DAYS, field.startDate).getTime();
                 break;
             case SCEventRecurrenceType.NEVER:
             default:
-                disabled = date.getTime() > getLaterDaysDate(NEVER_LATER_DAYS).getTime();
-        }
-        if (field.startDate.getDate() > date.getDate()) {
-            disabled = true;
+                disabled = date.getTime() > getLaterDaysDate(NEVER_LATER_DAYS, field.startDate).getTime();
         }
         return disabled;
     }, [field]);
-    const shouldDisabledTime = useCallback((date, _view) => field.startTime.getTime() > date.getTime(), [field]);
+    const shouldDisableTime = useCallback((date) => field.startTime.getTime() > date.getTime(), [field]);
     /**
      * Renders root object
      */
@@ -305,24 +300,36 @@ export default function EventForm(inProps) {
                                         return _jsx("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
                                     }
                                     return (_jsx(FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
-                                }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, minDate: field.startDate, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
+                                }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, minDate: field.startDate, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
                                         textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "calendar_off" }) }) }))) }) })))
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
+                                    }, slotProps: {
+                                        toolbar: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                            // @ts-ignore
+                                            toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.date.title", defaultMessage: "ui.eventForm.date.title" })
+                                        }
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisableDate }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
                                         textField: (params) => {
                                             var _a;
                                             return (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? (_jsx(FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
                                         }
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
+                                    }, slotProps: {
+                                        toolbar: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                            // @ts-ignore
+                                            toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
+                                        }
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisableTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                        // @ts-ignores
                                         b: (chunks) => _jsx("strong", { children: chunks })
                                     } })) : (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
                                         // @ts-ignore
                                         b: (chunks) => _jsx("strong", { children: chunks })
                                     } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                            endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                            endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||

package/lib/esm/components/EventForm/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const PREFIX = "SCEventForm";
-export declare const NEVER_LATER_DAYS = 14;
-export declare const DAILY_LATER_DAYS = 60;
-export declare const WEEKLY_LATER_DAYS = 360;
-export declare const MONTHLY_LATER_DAYS = 730;
+export declare const NEVER_LATER_DAYS = 13;
+export declare const DAILY_LATER_DAYS = 59;
+export declare const WEEKLY_LATER_DAYS = 359;
+export declare const MONTHLY_LATER_DAYS = 729;

package/lib/esm/components/EventForm/constants.js

@@ -1,5 +1,5 @@
 export const PREFIX = 'SCEventForm';
-export const NEVER_LATER_DAYS = 14;
-export const DAILY_LATER_DAYS = 60;
-export const WEEKLY_LATER_DAYS = 360;
-export const MONTHLY_LATER_DAYS = 730;
+export const NEVER_LATER_DAYS = 13; // 2 weeks less 1 day
+export const DAILY_LATER_DAYS = 59; // 60 days less 1 day
+export const WEEKLY_LATER_DAYS = 359; // 360 days less 1 day
+export const MONTHLY_LATER_DAYS = 729; // 2 years less 1 day

package/lib/esm/components/EventForm/utils.d.ts

@@ -1,4 +1,4 @@
-export declare function getNewDate(date?: string): Date;
-export declare function getLaterHoursDate(h: number): Date;
-export declare function getLaterDaysDate(d: number): Date;
+export declare function getNewDate(date?: string | Date): Date;
+export declare function getLaterHoursDate(hours: number, date?: Date): Date;
+export declare function getLaterDaysDate(days: number, date?: Date): Date;
 export declare const combineDateAndTime: (date: Date, time: Date) => string;

package/lib/esm/components/EventForm/utils.js

@@ -1,15 +1,18 @@
 import { addDays, addHours } from 'date-fns';
 export function getNewDate(date) {
     if (date) {
-        return new Date(date);
+        if (typeof date === 'string') {
+            return new Date(date);
+        }
+        return date;
     }
     return new Date();
 }
-export function getLaterHoursDate(h) {
-    return addHours(getNewDate(), h);
+export function getLaterHoursDate(hours, date) {
+    return addHours(getNewDate(date), hours);
 }
-export function getLaterDaysDate(d) {
-    return addDays(getNewDate(), d);
+export function getLaterDaysDate(days, date) {
+    return addDays(getNewDate(date), days);
 }
 export const combineDateAndTime = (date, time) => {
     const combined = date;

package/lib/esm/components/EventInviteButton/EventInviteButton.js

@@ -38,13 +38,13 @@ const classes = {
 const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
 /**
  *> API documentation for the Community-JS Event Invite Button component. Learn about the available props and the CSS API.
  *
@@ -194,7 +194,7 @@ export default function EventInviteButton(inProps) {
         });
     };
     // Autocomplete Handlers
-    const handleInputChange = (event, value, reason) => {
+    const handleInputChange = (_event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);

package/lib/esm/components/EventLocationWidget/EventLocationWidget.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CardContent, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { GoogleMap, MarkerF, useLoadScript } from '@react-google-maps/api';
-import { SCPreferences, useSCFetchEvent, useSCPreferences } from '@selfcommunity/react-core';
+import { GoogleMap, MarkerF } from '@react-google-maps/api';
+import { useSCGoogleApiLoader, useSCFetchEvent } from '@selfcommunity/react-core';
 import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
@@ -13,7 +13,6 @@ import { formatEventLocationGeolocation } from '../../utils/string';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 import EventLocationWidgetSkeleton from './Skeleton';
-import { useMemo } from 'react';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -65,18 +64,8 @@ export default function EventLocationWidget(inProps) {
     const { className, event, eventId } = props, rest = __rest(props, ["className", "event", "eventId"]);
     // STATE
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
-    // PREFERENCES
-    const { preferences } = useSCPreferences();
-    // MEMO
-    const geocodingApiKey = useMemo(() => {
-        return preferences && SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
-            ? preferences[SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
-            : null;
-    }, [preferences]);
-    const { isLoaded } = useLoadScript({
-        googleMapsApiKey: geocodingApiKey,
-        libraries: ['maps']
-    });
+    // HOOKS
+    const { isLoaded, geocodingApiKey } = useSCGoogleApiLoader();
     const mapOptions = {
         fullscreenControl: false,
         mapTypeControl: false,

package/lib/esm/components/Events/Events.js

@@ -210,8 +210,7 @@ export default function Events(inProps) {
      * Renders events list
      */
     const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsxs(_Fragment, { children: [(events.length !== 0 || (events.length === 0 && showMyEvents)) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot, { color: showMyEvents ? 'secondary' : 'default', variant: showMyEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents), 
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
+                                // @ts-expect-error this is needed to use showFollowed into SCEvents
                                 showFollowed: showMyEvents, deleteIcon: showMyEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, disabled: loading }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: loading }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsx(LocationEventsFilter, { value: location, autoHide: !loading && !events.length, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading || (!events.length && !query), onKeyUp: (e) => {
                                     e.preventDefault();
                                     if (e.key === 'Enter') {
@@ -220,8 +219,7 @@ export default function Events(inProps) {
                                 }, InputProps: {
                                     endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchEvents(true), disabled: loading || (!events.length && !query) }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(true), endIcon: _jsx(Icon, { children: "search" }), disabled: loading || (!events.length && !query) })) })))
                                 } }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), _jsx(Select, Object.assign({ disabled: showPastEvents || loading || (!events.length && dateSearch === SCEventDateFilterType.ANY), size: 'small', label: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsx(LocationEventsFilter, { value: location, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot, { color: showFollowed ? 'secondary' : 'default', variant: showFollowed ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
+                                // @ts-expect-error this is needed to use showFollowed into SCEvents
                                 showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading || (!events.length && !showFollowed) }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== SCEventDateFilterType.ANY || loading }) }))] })) }))), _jsx(_Fragment, { children: loading ? (_jsx(Skeleton, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : (_jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: general ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user)) || !onlyStaffEnabled ? _jsx(CreateEventButton, {}) : null })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user)) || !onlyStaffEnabled ? _jsx(CreateEventButton, {}) : null })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.personal", defaultMessage: "ui.events.noEvents.title.personal" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [events.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)

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

@@ -429,7 +429,7 @@ export default function FeedObject(inProps) {
     else if (template === SCFeedObjectTemplateType.PREVIEW ||
         template === SCFeedObjectTemplateType.DETAIL ||
         template === SCFeedObjectTemplateType.SEARCH) {
-        objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(Box, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", label: obj.event.name, icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) })))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) }))), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: 'span', date: obj.added_at }) })), obj.location && (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsxs(Box, Object.assign({ className: classes.location }, { children: [_jsx(Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), _jsx(Bullet, {}), _jsx(Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? (_jsx(Tags, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))) }))] }), action: renderHeaderAction() }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(_Fragment, { children: template === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ visible: pollVisible ||
+        objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(Box, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx(Chip, { className: classes.group, color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id)), obj.event && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", label: obj.event.name, icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id)), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: 'span', date: obj.added_at }) })), obj.location && (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsxs(Box, Object.assign({ className: classes.location }, { children: [_jsx(Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), _jsx(Bullet, {}), _jsx(Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? (_jsx(Tags, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))) }))] }), action: renderHeaderAction() }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(_Fragment, { children: template === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ visible: pollVisible ||
                                         template === SCFeedObjectTemplateType.DETAIL ||
                                         Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), _jsx(Box, Object.assign({ className: classes.infoSection }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!hideParticipantsPreview && (_jsx(ContributorsFeedObject, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy }))), !_hideFollowAction && _jsx(Follow, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) }))] })), _jsxs(CardActions, Object.assign({ className: classes.actionsSection }, { children: [_jsx(Actions, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideCommentAction: template === SCFeedObjectTemplateType.DETAIL || (hasEvent && !((_c = (_b = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.active)), handleExpandActivities: template === SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), ((template === SCFeedObjectTemplateType.DETAIL && (!hasEvent || ((_h = (_g = (_f = (_d = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _d === void 0 ? void 0 : _d[0]) === null || _f === void 0 ? void 0 : _f.embed) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.active))) || expandedActivities) && (_jsx(Box, Object.assign({ className: classes.replyContent }, { children: _jsx(CommentObjectReplyComponent, Object.assign({ id: `reply-feedObject-${obj.id}`, onReply: handleReply, editable: !isReplying || Boolean(obj) }, CommentObjectReplyComponentProps), Number(isReplying)) })))] })), template === SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (_jsx(Collapse, Object.assign({ in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } }, { children: _jsx(CardContent, Object.assign({ className: classes.activitiesContent }, { children: _jsx(Activities, Object.assign({ feedObject: obj, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
                                     CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectComponentProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
@@ -437,7 +437,7 @@ export default function FeedObject(inProps) {
                                 }, cacheStrategy: cacheStrategy }, ActivitiesProps), selectedActivities) })) }))), composerOpen && (_jsx(Composer, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true }))] }))) : (_jsx(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
     }
     else if (template === SCFeedObjectTemplateType.SHARE) {
-        objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(React.Fragment, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) })))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) }))), _jsx(CardHeader, { classes: { root: classes.header }, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { date: obj.added_at }) })) }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, visible: Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length) }, PollObjectProps))) }))] }))] })) : (_jsx(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
+        objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(React.Fragment, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) }))), _jsx(CardHeader, { classes: { root: classes.header }, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { date: obj.added_at }) })) }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, visible: Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length) }, PollObjectProps))) }))] }))] })) : (_jsx(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
     }
     else {
         objElement = (_jsx(React.Fragment, { children: obj ? (_jsx(BaseItem, { elevation: 0, className: classes.snippet, image: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, { alt: obj.author.username, variant: "circular", src: obj.author.avatar, className: classes.avatar }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.snippetContent }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: getContributionSnippet(obj) })) }))] }), disableTypography: true, secondary: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: "span", date: obj.added_at }) })), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), variant: "text", color: "secondary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.comment", defaultMessage: "ui.feedObject.comment" }) }))] })) })) : (_jsx(FeedObjectSkeleton, Object.assign({}, FeedObjectSkeletonProps))) }));

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

@@ -1,17 +1,21 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, ListItem, Typography, Zoom } from '@mui/material';
-import { Link, SCRoutes, useSCFetchCategories, useSCRouting } from '@selfcommunity/react-core';
-import { useEffect, useState } from 'react';
+import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Zoom } from '@mui/material';
+import { Link, SCPreferences, SCRoutes, useSCFetchCategories, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { useEffect, useMemo, useState } from 'react';
 import Category from '../Category';
 import { FormattedMessage } from 'react-intl';
 import { sortByAttr } from '@selfcommunity/utils';
+import { SCFeatureName } from '@selfcommunity/types';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 const PREFIX = 'SCDefaultDrawerContent';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-root`,
+    navigation: `${PREFIX}-navigation`,
+    noResults: `${PREFIX}-no-results`,
+    title: `${PREFIX}-title`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -29,8 +33,26 @@ export default function DefaultDrawerContent(inProps) {
     const [categoriesOrdered, setCategoriesOrdered] = useState([]);
     // ROUTING
     const scRoutingContext = useSCRouting();
+    // CONTEXT
+    const scUserContext = useSCUser();
+    // PREFERENCES
+    const { preferences, features } = useSCPreferences();
     //STATE
     const [isHovered, setIsHovered] = useState({});
+    // MEMO
+    const groupsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        features.includes(SCFeatureName.GROUPING) &&
+        SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
+    const eventsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
+    const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
+    const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     // HANDLERS
     const handleMouseEnter = (index) => {
         setIsHovered((prevState) => {
@@ -53,5 +75,5 @@ export default function DefaultDrawerContent(inProps) {
         onTouchMove: mouseLeave
     });
     //order
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle1" }, { children: [_jsx("span", { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) }), ' ', _jsx(Button, Object.assign({ variant: "text", component: Link, color: "secondary", to: scRoutingContext.url(SCRoutes.CATEGORIES_LIST_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll" }) }))] })), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) }, { 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" }) })] })) })), 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" }) }))), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] })));
 }

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

@@ -144,7 +144,7 @@ export default function NavigationToolbar(inProps) {
                         value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
                 }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}))
-                }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
+                }), "aria-label": "Events", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
     return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
                                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
                                 }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) })), _jsx(NotificationMenu, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: Boolean(anchorNotification), onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps))] }), privateMessagingEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.messages, {

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

@@ -65,10 +65,10 @@ export default function CommentNotification(props) {
                 }), { onClick: notificationObject.comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.comment.author.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.comment.author.username, variant: "circular", src: notificationObject.comment.author.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.comment.author.deleted && {
                             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.comment, {
+                            ? intl.formatMessage(messages.nestedComment, {
                                 b: (...chunks) => _jsx("strong", { children: chunks })
                             })
-                            : intl.formatMessage(messages.nestedComment, {
+                            : 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) })] }));
 }

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

@@ -224,7 +224,7 @@ export default function UserNotification(inProps) {
                 notificationObject.aggregated[0].type === SCNotificationTypologyType.VOTE_UP ||
                 notificationObject.aggregated[0].type === SCNotificationTypologyType.CONTRIBUTION)) {
             const contribution = getContribution(notificationObject);
-            return (_jsx(CardHeader, { className: classes.header, titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(notificationObject[contribution.type])) }, { children: getContributionSnippet(contribution) })), action: contribution && (_jsx(Tooltip, Object.assign({ title: contribution.suspended ? (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspended', defaultMessage: 'ui.notification.notificationSuspended' })) : (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspend', defaultMessage: 'ui.notification.notificationSuspend' })) }, { children: _jsx(LoadingButton, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: 'inherit', classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? _jsx(Icon, Object.assign({ color: 'primary' }, { children: "notifications_off" })) : _jsx(Icon, Object.assign({ color: 'inherit' }, { children: "notifications" })) })) }))) }));
+            return (_jsx(CardHeader, { className: classes.header, titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(notificationObject[contribution.type])) }, { children: getContributionSnippet(contribution) })), action: contribution && (_jsx(Tooltip, Object.assign({ title: contribution.suspended ? (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspended', defaultMessage: 'ui.notification.notificationSuspended' })) : (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspend', defaultMessage: 'ui.notification.notificationSuspend' })) }, { children: _jsx(LoadingButton, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: 'inherit', classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? _jsx(Icon, Object.assign({ color: 'primary' }, { children: "notifications_off" })) : _jsx(Icon, Object.assign({ color: 'inherit' }, { children: "notifications_active" })) })) }))) }));
         }
         return null;
     }

package/lib/esm/components/PrivateMessageThread/PrivateMessageThread.js

@@ -175,12 +175,9 @@ export default function PrivateMessageThread(inProps) {
      * Memoized message recipients ids
      */
     const ids = useMemo(() => {
-        if (recipients && openNewMessage) {
-            return recipients.map((u) => {
-                return parseInt(u.id, 10);
-            });
-        }
-        return [parseInt(recipients === null || recipients === void 0 ? void 0 : recipients.id, 10) || recipients];
+        if (!recipients)
+            return [];
+        return Array.isArray(recipients) ? recipients.map((u) => parseInt(u.id, 10)) : [parseInt(recipients.id || recipients, 10)];
     }, [recipients, openNewMessage]);
     function fetchResults() {
         setLoading(true);

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

@@ -6,7 +6,7 @@ export interface UserProfileEditProps {
      * Id of user object
      * @default null
      */
-    id?: string;
+    id?: string | number;
     /**
      * Overrides or extends the styles applied to the component.
      * @default null

package/lib/esm/components/UserProfileEdit/UserProfileEdit.js

@@ -67,5 +67,5 @@ export default function UserProfileEdit(inProps) {
         setTab(newValue);
     };
     // RENDER
-    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, variant: "scrollable", scrollButtons: "auto", allowScrollButtonsMobile: true }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.info", defaultMessage: "ui.userProfileEdit.info" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.account", defaultMessage: "ui.userProfileEdit.account" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.notification", defaultMessage: "ui.userProfileEdit.notification" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && _jsx(PublicInfo, Object.assign({ className: classes.publicInfo, fields: fields }, UserProfileEditSectionPublicInfoProps)), tab === 1 && _jsx(Account, Object.assign({ className: classes.account }, UserProfileEditSectionAccountProps)), tab === 2 && _jsx(Settings, Object.assign({ settings: settings, className: classes.settings }, UserProfileEditSectionSettingsProps))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, variant: "scrollable", scrollButtons: "auto", allowScrollButtonsMobile: true }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.info", defaultMessage: "ui.userProfileEdit.info" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.account", defaultMessage: "ui.userProfileEdit.account" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.notification", defaultMessage: "ui.userProfileEdit.notification" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && _jsx(PublicInfo, Object.assign({ className: classes.publicInfo, fields: fields }, UserProfileEditSectionPublicInfoProps)), tab === 1 && _jsx(Account, Object.assign({ className: classes.account }, UserProfileEditSectionAccountProps)), tab === 2 && _jsx(Settings, Object.assign({ settings: settings, className: classes.settings }, UserProfileEditSectionSettingsProps))] }))] })));
 }

package/lib/esm/components/UserSocialAssociation/UserSocialAssociation.js

@@ -1,15 +1,23 @@
 import { __rest } from "tslib";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, IconButton, Stack, Typography } from '@mui/material';
+import { Button, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { defineMessages, useIntl } from 'react-intl';
 import { SCPreferences, useSCFetchUser, useSCFetchUserProviders, useSCPreferences } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import Icon from '@mui/material/Icon';
 import { SCUserSocialAssociations } from '../../types';
+import { PROVIDER_ICONS_CONTAINED } from '../../constants/SocialShare';
 const messages = defineMessages({
+    provider: {
+        id: 'ui.userSocialAssociation.provider',
+        defaultMessage: 'ui.userSocialAssociation.provider'
+    },
+    actions: {
+        id: 'ui.userSocialAssociation.actions',
+        defaultMessage: 'ui.userSocialAssociation.actions'
+    },
     socialAdd: {
         id: 'ui.userSocialAssociation.add',
         defaultMessage: 'ui.userSocialAssociation.add'
@@ -22,7 +30,11 @@ const messages = defineMessages({
 const PREFIX = 'SCUserSocialAssociation';
 const classes = {
     root: `${PREFIX}-root`,
-    field: `${PREFIX}-field`
+    field: `${PREFIX}-field`,
+    providerTable: `${PREFIX}-provider-table`,
+    providerIcon: `${PREFIX}-provider-icon`,
+    providerName: `${PREFIX}-provider-name`,
+    providerAction: `${PREFIX}-provider-action`
 };
 const Root = styled(Stack, {
     name: PREFIX,
@@ -101,5 +113,5 @@ export default function UserSocialAssociation(inProps) {
     if (!providersEnabled) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { direction: "column" }, { children: [providersLinked.length !== 0 || (providersToLink.length !== 0 && onCreateAssociation) ? children : null, providersToLink.length !== 0 && onCreateAssociation && (_jsxs(Box, { children: [_jsxs(Typography, Object.assign({ variant: "body2" }, { children: [" ", intl.formatMessage(messages.socialAdd)] })), providersToLink.map((p, index) => (_jsx(React.Fragment, { children: _jsx(IconButton, Object.assign({ onClick: onCreateAssociation ? () => onCreateAssociation(p) : null }, { children: _jsx(Icon, { children: p }) })) }, index)))] })), providersLinked.length !== 0 && (_jsxs(Box, { children: [_jsxs(Typography, Object.assign({ variant: "body2" }, { children: [" ", intl.formatMessage(messages.socialRemove)] })), providersLinked.map((p, index) => (_jsx(React.Fragment, { children: _jsx(IconButton, Object.assign({ color: "primary", onClick: () => onDeleteAssociation(p) }, { children: _jsx(Icon, { children: p.provider }) })) }, index)))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { direction: "column" }, { children: [providersLinked.length !== 0 || (providersToLink.length !== 0 && onCreateAssociation) ? children : null, _jsx(TableContainer, Object.assign({ component: Paper, className: classes.providerTable }, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ sx: { width: '60%' } }, { children: intl.formatMessage(messages.provider) })), _jsx(TableCell, Object.assign({ align: "left" }, { children: intl.formatMessage(messages.actions) }))] }) }), _jsxs(TableBody, { children: [providersToLink.length !== 0 && onCreateAssociation && (_jsx(_Fragment, { children: providersToLink.map((p, index) => (_jsxs(TableRow, { children: [_jsxs(TableCell, Object.assign({ scope: "row" }, { children: [_jsx("img", { src: PROVIDER_ICONS_CONTAINED[`${p}`], width: "30", height: "30", className: classes.providerIcon, alt: p }), _jsx("span", Object.assign({ className: classes.providerName }, { children: p }))] })), _jsx(TableCell, Object.assign({ align: "left" }, { children: _jsx(Button, Object.assign({ variant: "contained", className: classes.providerAction, color: "primary", onClick: onCreateAssociation ? () => onCreateAssociation(p) : null, size: "small" }, { children: intl.formatMessage(messages.socialAdd) })) }))] }, index))) })), providersLinked.length !== 0 && (_jsx(_Fragment, { children: providersLinked.map((p, index) => (_jsxs(TableRow, Object.assign({ sx: { '&:last-child td, &:last-child th': { border: 0 } } }, { children: [_jsxs(TableCell, Object.assign({ scope: "row" }, { children: [_jsx("img", { src: PROVIDER_ICONS_CONTAINED[`${p.provider}`], width: "30", height: "30", className: classes.providerIcon, alt: p.provider }), _jsx("span", Object.assign({ className: classes.providerName }, { children: p.provider }))] })), _jsx(TableCell, Object.assign({ align: "left" }, { children: _jsx(Button, Object.assign({ variant: "outlined", className: classes.providerAction, onClick: () => onDeleteAssociation(p), size: "small" }, { children: intl.formatMessage(messages.socialRemove) })) }))] }), index))) }))] })] }) }))] })));
 }