@selfcommunity/react-ui 0.11.0-mui7.23 → 0.11.0-mui7.26

package/lib/esm/components/Composer/Layer/ScheduledLayer/ScheduledLayer.js

@@ -46,7 +46,7 @@ const ScheduledLayer = React.forwardRef((props, ref) => {
         const restOfDate = format(value, 'd MMMM yyyy • HH:mm', { locale });
         return _jsx(Typography, Object.assign({ variant: "h4" }, { children: `${dayName} ${restOfDate}` }));
     };
-    return (_jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.title", defaultMessage: "Programma la Pubblicazione" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: () => onSave(scheduledAt), disabled: !scheduledAt }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.submit", defaultMessage: "Attiva Programmazione" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ className: classes.message }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.message", defaultMessage: "ui.composer.audience.scheduled.message" }) })), _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: locale }, { children: _jsx(StaticDateTimePicker, { className: classes.picker, disablePast: true, value: scheduledAt, onChange: (value) => setScheduledAt(value), onAccept: handleUpdate, slots: {
+    return (_jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.title", defaultMessage: "Programma la Pubblicazione" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: () => onSave(scheduledAt), disabled: !scheduledAt }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.submit", defaultMessage: "Attiva Programmazione" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ className: classes.message }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.message", defaultMessage: "ui.composer.audience.scheduled.message" }) })), _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: locale }, { children: _jsx(StaticDateTimePicker, { className: classes.picker, disablePast: true, value: scheduledAt, onChange: setScheduledAt, onAccept: handleUpdate, slots: {
                                 toolbar: CustomToolbar,
                                 tabs: (props) => _jsx(DateTimePickerTabs, Object.assign({}, props)),
                                 actionBar: () => null

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

@@ -84,7 +84,7 @@ export default function EventAddress(inProps) {
             (event.live_stream && event.live_stream.created_at);
     }, [liveStreamEnabled, (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission, event]);
     // HOOKS
-    const { isLoaded, geocodingApiKey } = useSCGoogleApiLoader();
+    const { isLoaded, geocodingApiKey, placesLibrary } = useSCGoogleApiLoader();
     // HANDLERS
     const handleChange = (_event, newValue) => {
         setLocation(newValue);
@@ -132,9 +132,9 @@ export default function EventAddress(inProps) {
         }
         if (inputValue.length >= 3) {
             const newTimeoutId = setTimeout(() => {
-                const autocompleteService = new window.google.maps.places.AutocompleteService();
+                const autocompleteService = new placesLibrary.AutocompleteService(); // TODO - deprecated, to fix when possibile
                 autocompleteService.getPlacePredictions({ input: inputValue }, (predictions, status) => {
-                    if (status === window.google.maps.places.PlacesServiceStatus.OK && predictions) {
+                    if (status === placesLibrary.PlacesServiceStatus.OK && predictions) {
                         setSuggestions(predictions.map((prediction) => ({
                             description: prediction.description,
                             id: prediction.place_id

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

@@ -5,7 +5,7 @@ import { useThemeProps } from '@mui/system';
 import { LocalizationProvider, MobileDatePicker, MobileTimePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { EventService, formatHttpErrorCode } from '@selfcommunity/api-services';
-import { SCPreferences, UserUtils, useSCContext, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCPreferences, UserUtils, useSCContext, useSCGoogleApiLoader, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { SCContentType, SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType, SCFeatureName } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
@@ -25,7 +25,16 @@ import { LIVESTREAM_DEFAULT_SETTINGS } from '../LiveStreamForm/constants';
 import CoverPlaceholder from '../../assets/deafultCover';
 import PaywallsConfigurator from '../PaywallsConfigurator';
 import { ContentAccessType } from '../PaywallsConfigurator/constants';
+import { APIProvider } from '@vis.gl/react-google-maps';
 const messages = defineMessages({
+    titleDate: {
+        id: 'ui.eventForm.date.title',
+        defaultMessage: 'ui.eventForm.date.title'
+    },
+    titleTime: {
+        id: 'ui.eventForm.time.title',
+        defaultMessage: 'ui.eventForm.time.title'
+    },
     name: {
         id: 'ui.eventForm.name.placeholder',
         defaultMessage: 'ui.eventForm.name.placeholder'
@@ -170,6 +179,8 @@ export default function EventForm(inProps) {
     const [field, setField] = useState(initialFieldState);
     const [error, setError] = useState({});
     const [genericError, setGenericError] = useState(null);
+    // HOOKS
+    const { geocodingApiKey, libraries } = useSCGoogleApiLoader();
     // PREFERENCES
     const scPreferences = useSCPreferences();
     const liveStreamEnabled = useMemo(() => scPreferences.preferences &&
@@ -374,89 +385,97 @@ export default function EventForm(inProps) {
                                 endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: EVENT_TITLE_MAX_LENGTH - field.name.length }))
                             }
                         }, error: Boolean(field.name.length > EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > EVENT_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS, localeText: {
-                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
-                            } }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: !event, minDate: minStartDate, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, enableAccessibleFieldDOMStructure: false, slots: {
-                                        textField: (params) => {
-                                            var _a;
-                                            return (_jsx(TextField, Object.assign({}, params, { slotProps: {
-                                                    input: Object.assign(Object.assign({}, (_a = params.slotProps) === null || _a === void 0 ? void 0 : _a.input), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) })
-                                                } })));
-                                        }
+                                cancelButtonLabel: intl.formatMessage(messages.pickerCancelAction)
+                            } }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: !event, minDate: minStartDate, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, enableAccessibleFieldDOMStructure: false, localeText: {
+                                        toolbarTitle: intl.formatMessage(messages.titleDate)
+                                    }, slots: {
+                                        openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { sx: { marginLeft: 0 } }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))
                                     }, 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" })
+                                        field: {
+                                            openPickerButtonPosition: 'start'
+                                        },
+                                        textField: {
+                                            slotProps: {
+                                                input: {
+                                                    placeholder: intl.formatMessage(messages.startDate)
+                                                }
+                                            }
                                         }
                                     }, onChange: (value) => {
                                         handleChangeDateTime(value, 'startDate');
                                         handleChangeDateTime(value, 'startTime');
-                                    } }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastStartTime, minTime: minStartTime, label: field.startTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, enableAccessibleFieldDOMStructure: false, slots: {
-                                        textField: (params) => {
-                                            var _a;
-                                            return (_jsx(TextField, Object.assign({}, params, { slotProps: {
-                                                    input: Object.assign(Object.assign({}, (_a = params.slotProps) === null || _a === void 0 ? void 0 : _a.input), { placeholder: `${intl.formatMessage(messages.startTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) })
-                                                } })));
-                                        }
+                                    } }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastStartTime, minTime: minStartTime, label: field.startTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, enableAccessibleFieldDOMStructure: false, localeText: {
+                                        toolbarTitle: intl.formatMessage(messages.titleTime)
+                                    }, slots: {
+                                        openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { sx: { marginLeft: 0 } }, { children: _jsx(Icon, { children: "access_time" }) })))
                                     }, 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" })
+                                        field: {
+                                            openPickerButtonPosition: 'start'
+                                        },
+                                        textField: {
+                                            slotProps: {
+                                                input: {
+                                                    placeholder: intl.formatMessage(messages.startTime)
+                                                }
+                                            }
                                         }
                                     }, onChange: (value) => {
                                         handleChangeDateTime(value, 'startDate');
                                         handleChangeDateTime(value, 'startTime');
-                                    } })] })) })), _jsxs(FormControl, Object.assign({ className: classes.frequency }, { children: [field.recurring !== SCEventRecurrenceType.NEVER && _jsx(InputLabel, Object.assign({ id: "recurring" }, { children: `${intl.formatMessage(messages.frequency)}` })), _jsx(Select, Object.assign({ name: "recurring", label: field.recurring !== SCEventRecurrenceType.NEVER && `${intl.formatMessage(messages.frequency)}`, labelId: "recurring", value: field.recurring, onChange: handleChange, displayEmpty: true, renderValue: (selected) => {
+                                    } })] })) })), _jsxs(FormControl, Object.assign({ className: classes.frequency }, { children: [field.recurring !== SCEventRecurrenceType.NEVER && _jsx(InputLabel, Object.assign({ id: "recurring" }, { children: intl.formatMessage(messages.frequency) })), _jsx(Select, Object.assign({ name: "recurring", label: field.recurring !== SCEventRecurrenceType.NEVER && intl.formatMessage(messages.frequency), labelId: "recurring", value: field.recurring, onChange: handleChange, displayEmpty: true, renderValue: (selected) => {
                                     if (!selected) {
-                                        return _jsx("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
+                                        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' ? it : enUS, localeText: {
-                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
-                            } }, { 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, enableAccessibleFieldDOMStructure: false, slots: {
-                                        textField: (params) => {
-                                            var _a;
-                                            return (_jsx(TextField, Object.assign({}, params, { slotProps: {
-                                                    input: Object.assign(Object.assign({}, (_a = params.slotProps) === null || _a === void 0 ? void 0 : _a.input), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "calendar_off" }) }) }))) })
-                                                } })));
-                                        }
+                                cancelButtonLabel: intl.formatMessage(messages.pickerCancelAction)
+                            } }, { 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, enableAccessibleFieldDOMStructure: false, localeText: {
+                                        toolbarTitle: intl.formatMessage(messages.titleDate)
+                                    }, slots: {
+                                        openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { sx: { marginLeft: 0 } }, { children: _jsx(Icon, { children: "calendar_off" }) })))
                                     }, 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" })
+                                        field: {
+                                            openPickerButtonPosition: 'start'
+                                        },
+                                        textField: {
+                                            slotProps: {
+                                                input: {
+                                                    placeholder: intl.formatMessage(messages.endDate)
+                                                }
+                                            }
                                         }
                                     }, onChange: (value) => {
                                         handleChangeDateTime(value, 'endDate');
                                         handleChangeDateTime(value, 'endTime');
-                                    }, 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, enableAccessibleFieldDOMStructure: false, slots: {
-                                        textField: (params) => {
-                                            var _a;
-                                            return (_jsx(TextField, Object.assign({}, params, { slotProps: {
-                                                    input: Object.assign(Object.assign({}, (_a = params.slotProps) === null || _a === void 0 ? void 0 : _a.input), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) })
-                                                } })));
-                                        }
+                                    }, 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, enableAccessibleFieldDOMStructure: false, localeText: {
+                                        toolbarTitle: intl.formatMessage(messages.titleTime)
+                                    }, slots: {
+                                        openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { sx: { marginLeft: 0 } }, { children: _jsx(Icon, { children: "access_time" }) })))
                                     }, 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" })
+                                        field: {
+                                            openPickerButtonPosition: 'start'
+                                        },
+                                        textField: {
+                                            slotProps: {
+                                                input: {
+                                                    placeholder: intl.formatMessage(messages.endTime)
+                                                }
+                                            }
                                         }
                                     }, onChange: (value) => {
                                         handleChangeDateTime(value, 'endDate');
                                         handleChangeDateTime(value, 'endTime');
-                                    }, shouldDisableTime: shouldDisableTime })] })) })), _jsx(EventAddress, Object.assign({ forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
-                            name: field.name,
-                            start_date: field.startDate,
-                            location: field.location,
-                            geolocation: field.geolocation,
-                            live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_e = event.live_stream) === null || _e === void 0 ? void 0 : _e.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
-                        }) }, EventAddressComponentProps)), 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 === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PRIVATE }), _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: {
+                                    }, shouldDisableTime: shouldDisableTime })] })) })), _jsx(APIProvider, Object.assign({ apiKey: geocodingApiKey, libraries: libraries }, { children: _jsx(EventAddress, Object.assign({ forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
+                                name: field.name,
+                                start_date: field.startDate,
+                                location: field.location,
+                                geolocation: field.geolocation,
+                                live_stream: Object.assign(Object.assign({ title: field.name || intl.formatMessage(messages.name) }, (event && ((_e = event.live_stream) === null || _e === void 0 ? void 0 : _e.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
+                            }) }, EventAddressComponentProps)) })), 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 === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PRIVATE }), _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: {
                                         b: (chunks) => _jsx("strong", { children: chunks }, "ui.eventForm.privacy.public.info.b")
                                     } })) : (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
                                         b: (chunks) => _jsx("strong", { children: chunks }, "ui.eventForm.privacy.private.info.b")
-                                    } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, slotProps: {
+                                    } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: intl.formatMessage(messages.description), margin: "normal", value: field.description, name: "description", onChange: handleChange, slotProps: {
                             input: {
                                 endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
                             }

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

@@ -64,7 +64,7 @@ export default function EventLocationWidget(inProps) {
     // STATE
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
     // HOOKS
-    const { isLoaded, geocodingApiKey } = useSCGoogleApiLoader();
+    const { isLoaded, geocodingApiKey, libraries } = useSCGoogleApiLoader();
     if (!geocodingApiKey || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.ONLINE) {
         return _jsx(HiddenPlaceholder, {});
     }
@@ -77,7 +77,7 @@ export default function EventLocationWidget(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, gutterBottom: true }, { children: _jsx(FormattedMessage, { id: "ui.eventLocationWidget.title", defaultMessage: "ui.eventLocationWidget.title" }) })), _jsx(Box, Object.assign({ className: classes.map }, { children: _jsx(APIProvider, Object.assign({ apiKey: geocodingApiKey }, { children: _jsx(Map, Object.assign({ className: classes.map, center: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, gutterBottom: true }, { children: _jsx(FormattedMessage, { id: "ui.eventLocationWidget.title", defaultMessage: "ui.eventLocationWidget.title" }) })), _jsx(Box, Object.assign({ className: classes.map }, { children: _jsx(APIProvider, Object.assign({ apiKey: geocodingApiKey, libraries: libraries }, { children: _jsx(Map, Object.assign({ className: classes.map, center: {
                                 lat: scEvent.geolocation_lat,
                                 lng: scEvent.geolocation_lng
                             }, zoom: 15, fullscreenControl: false, mapTypeControl: false, streetViewControl: false, zoomControl: false }, { children: _jsx(Marker, { position: {

package/lib/esm/components/GroupForm/GroupForm.js

@@ -260,11 +260,11 @@ export default function GroupForm(inProps) {
                             }, error: Boolean(((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_g = field.description) === null || _g === void 0 ? void 0 : _g.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
                                             b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.privacy.title.b")
                                         } }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === SCGroupPrivacyType.PRIVATE }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.public.info", defaultMessage: "ui.groupForm.privacy.public.info", values: {
-                                            b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.privacy.public.info.b")
+                                            b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                                         } })) : (_jsx(_Fragment, { children: group && group.privacy === SCGroupPrivacyType.PRIVATE ? (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.private.info.edit", defaultMessage: "ui.groupForm.private.public.info.edit", values: {
-                                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.private.public.info.edit.b")
+                                                b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                                             } })) : (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.private.info", defaultMessage: "ui.groupForm.private.public.info", values: {
-                                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.private.public.info.b")
+                                                b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                                             } })) })) }))] }))), privateEnabled && visibilityEnabled && (_jsx(Box, Object.assign({ className: classes.visibilitySection }, { children: ((!field.isPublic && !group) || (group && !field.isPublic)) && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
                                                 b: (chunks) => _jsx("strong", { children: chunks }, "ui.groupForm.visibility.title.b")
                                             } }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isVisible }) }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), _jsx(Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isVisible }) }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.visibilitySectionInfo }, { children: !field.isVisible ? (_jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {

package/lib/esm/components/LessonReleaseMenu/LessonReleaseMenu.js

@@ -137,28 +137,27 @@ export default function LessonReleaseMenu(inProps) {
                 okButtonLabel: `${intl.formatMessage(messages.pickerOkMessage)}`,
                 cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelMessage)}`,
                 clearButtonLabel: `${intl.formatMessage(messages.pickerClearMessage)}`
-            } }, { children: _jsx(MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), value: drippedAt, enableAccessibleFieldDOMStructure: false, slots: {
-                    //actionBar: PickerActionBar,
+            } }, { children: _jsx(MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), value: drippedAt, enableAccessibleFieldDOMStructure: false, localeText: {
+                    toolbarTitle: intl.formatMessage(messages.pickerPlaceholder)
+                }, slots: {
                     tabs: (props) => _jsx(DateTimePickerTabs, Object.assign({}, props)),
-                    textField: (params) => {
-                        var _a;
-                        return (_jsx(TextField, Object.assign({}, params, { error: false, slotProps: {
-                                input: Object.assign(Object.assign({}, (_a = params.slotProps) === null || _a === void 0 ? void 0 : _a.input), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) }))) })
-                            } })));
-                    }
+                    openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { children: _jsx(Icon, { children: "expand_more" }) })))
                 }, slotProps: {
                     tabs: {
                         hidden: false
                     },
-                    toolbar: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                        // @ts-ignore
-                        toolbarTitle: (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" }))
-                    },
                     actionBar: {
                         actions: ['cancel', 'clear', 'accept']
+                    },
+                    textField: {
+                        error: false,
+                        slotProps: {
+                            input: {
+                                placeholder: intl.formatMessage(messages.pickerPlaceholder)
+                            }
+                        }
                     }
-                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null), disabled: isDisabled }) }))) : (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", value: placeholderStructured, onClick: isDisabled ? undefined : handleClick, slotProps: {
+                }, onChange: setDrippedAt, onAccept: handleUpdate, disabled: isDisabled }) }))) : (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", value: placeholderStructured, onClick: isDisabled ? undefined : handleClick, slotProps: {
                         input: {
                             endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: handleClick, disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) })))
                         }

package/lib/esm/components/PaymentOrders/PaymentOrders.js

@@ -26,6 +26,10 @@ import { enUS } from 'date-fns/locale/en-US';
 import Category from '../Category';
 const PREFIX = 'SCPaymentOrders';
 const messages = defineMessages({
+    datePicker: {
+        id: 'ui.paymentOrders.picker.date',
+        defaultMessage: 'ui.paymentOrders.picker.date'
+    },
     dateFrom: {
         id: 'ui.paymentOrders.dateFrom',
         defaultMessage: 'ui.paymentOrders.dateFrom'
@@ -219,41 +223,39 @@ export default function PaymentOrders(inProps) {
                                                 }, disabled: isLoading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: _jsx(Icon, { children: "search" }), disabled: isLoading }))] })))
                                 }
                             } }) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: _jsx(TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 8, md: 4 } }, { children: _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS, localeText: {
-                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`,
-                                clearButtonLabel: `${intl.formatMessage(messages.pickerClearAction)}`
-                            } }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [_jsx(Grid, Object.assign({ size: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, enableAccessibleFieldDOMStructure: false, slots: {
-                                                textField: (params) => {
-                                                    var _a;
-                                                    return (_jsx(TextField, Object.assign({}, params, { size: "small", slotProps: {
-                                                            input: Object.assign(Object.assign({}, (_a = params.slotProps) === null || _a === void 0 ? void 0 : _a.input), { placeholder: `${intl.formatMessage(messages.dateFrom)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) })
-                                                        } })));
-                                                }
+                                cancelButtonLabel: intl.formatMessage(messages.pickerCancelAction),
+                                clearButtonLabel: intl.formatMessage(messages.pickerClearAction)
+                            } }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [_jsx(Grid, Object.assign({ size: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, enableAccessibleFieldDOMStructure: false, localeText: {
+                                                toolbarTitle: intl.formatMessage(messages.datePicker)
+                                            }, slots: {
+                                                openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { children: _jsx(Icon, { children: "CalendarIcon" }) })))
                                             }, slotProps: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']
                                                 },
-                                                toolbar: {
-                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                                    // @ts-ignore
-                                                    toolbarTitle: _jsx(FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
-                                                }
-                                            }, onChange: (newValue) => setStartDate(newValue) }) })), _jsx(Grid, Object.assign({ size: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, enableAccessibleFieldDOMStructure: false, slots: {
-                                                textField: (params) => {
-                                                    var _a;
-                                                    return (_jsx(TextField, Object.assign({}, params, { size: "small", slotProps: {
-                                                            input: Object.assign(Object.assign({}, (_a = params.slotProps) === null || _a === void 0 ? void 0 : _a.input), { placeholder: `${intl.formatMessage(messages.dateTo)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) })
-                                                        } })));
+                                                textField: {
+                                                    slotProps: {
+                                                        input: {
+                                                            placeholder: intl.formatMessage(messages.dateFrom)
+                                                        }
+                                                    }
                                                 }
+                                            }, onChange: setStartDate }) })), _jsx(Grid, Object.assign({ size: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, enableAccessibleFieldDOMStructure: false, localeText: {
+                                                toolbarTitle: intl.formatMessage(messages.datePicker)
+                                            }, slots: {
+                                                openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { children: _jsx(Icon, { children: "CalendarIcon" }) })))
                                             }, slotProps: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']
                                                 },
-                                                toolbar: {
-                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                                    // @ts-ignore
-                                                    toolbarTitle: _jsx(FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
+                                                textField: {
+                                                    slotProps: {
+                                                        input: {
+                                                            placeholder: intl.formatMessage(messages.dateTo)
+                                                        }
+                                                    }
                                                 }
-                                            }, onChange: (newValue) => setEndDate(newValue) }) }))] })) })) }))] })), _jsx(Box, Object.assign({ className: classes.content }, { children: !isLoading ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ width: "5%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), _jsx(TableCell, Object.assign({ width: "7%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), _jsx(TableCell, Object.assign({ width: "38%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), _jsx(TableCell, Object.assign({ width: "12%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), _jsx(TableCell, Object.assign({ width: "13%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), _jsxs(TableBody, { children: [orders.map((order, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx("b", { children: order.id }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: getConvertedAmount(order.payment_price) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
+                                            }, onChange: setEndDate }) }))] })) })) }))] })), _jsx(Box, Object.assign({ className: classes.content }, { children: !isLoading ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ width: "5%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), _jsx(TableCell, Object.assign({ width: "7%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), _jsx(TableCell, Object.assign({ width: "38%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), _jsx(TableCell, Object.assign({ width: "12%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), _jsx(TableCell, Object.assign({ width: "13%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), _jsxs(TableBody, { children: [orders.map((order, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx("b", { children: order.id }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: getConvertedAmount(order.payment_price) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
                                                     intl.formatDate(new Date(order.created_at), {
                                                         year: 'numeric',
                                                         month: 'numeric',

package/lib/esm/components/UserCounters/UserCounters.js

@@ -91,15 +91,15 @@ export default function UserCounters(inProps) {
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(_Fragment, { children: (followEnabled || connectionEnabled) &&
                     (followEnabled ? (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ className: classes.button, variant: "text", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUser) }, { children: _jsx(FormattedMessage, { id: "ui.userCounters.followings", defaultMessage: "ui.userCounters.followings", values: {
                                         count: scUser === null || scUser === void 0 ? void 0 : scUser.followings_counter,
-                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.userCounters.followings.b")
+                                        b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                                     } }) })), _jsx(Bullet, {}), _jsx(Button, Object.assign({ className: classes.button, variant: "text", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUser) }, { children: _jsx(FormattedMessage, { id: "ui.userCounters.followers", defaultMessage: "ui.userCounters.followers", values: {
                                         count: scUser === null || scUser === void 0 ? void 0 : scUser.followers_counter,
-                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.userCounters.followers.b")
+                                        b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                                     } }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ className: classes.button, variant: "text", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUser) }, { children: _jsx(FormattedMessage, { id: "ui.userCounters.connections", defaultMessage: "ui.userCounters.connections", values: {
                                         count: scUser === null || scUser === void 0 ? void 0 : scUser.connections_counter,
-                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.userCounters.connections.b")
+                                        b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                                     } }) })), _jsx(Bullet, {})] }))) }), categoryFollowEnabled && (_jsx(Button, Object.assign({ className: classes.button, variant: "text", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CATEGORIES_ROUTE_NAME, scUser) }, { children: _jsx(FormattedMessage, { id: "ui.userCounters.categories", defaultMessage: "ui.userCounters.categories", values: {
                         count: scUser === null || scUser === void 0 ? void 0 : scUser.categories_counter,
-                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.userCounters.categories.b")
+                        b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                     } }) })))] })));
 }

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

@@ -69,7 +69,7 @@ export default function PublicInfo(props) {
     // STATE
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    const [user, setUser] = useState();
+    const [user, setUser] = useState(null);
     const [error, setError] = useState({});
     const [editing, setEditing] = useState([]);
     const [saving, setSaving] = useState([]);
@@ -181,12 +181,12 @@ export default function PublicInfo(props) {
                             }
                             setUser(u);
                             setEditing([...editing, field]);
-                        }, disableFuture: true, disabled: isSaving, slots: {
-                            inputAdornment: (params) => {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                const _a = params.children.props, { children } = _a, rest = __rest(_a, ["children"]);
-                                return (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [_jsx(IconButton, Object.assign({}, rest, { children: children })), isSaving && _jsx(CircularProgress, { size: 10 })] })));
+                        }, disableFuture: true, disabled: isSaving, enableAccessibleFieldDOMStructure: false, slots: {
+                            textField: (params) => {
+                                var _a, _b, _c;
+                                return (_jsx(TextField, Object.assign({}, params, { slotProps: {
+                                        input: Object.assign(Object.assign({}, (_a = params.slotProps) === null || _a === void 0 ? void 0 : _a.input), { endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [(_c = (_b = params.slotProps) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.endAdornment, isSaving && _jsx(CircularProgress, { size: 10 })] }))) })
+                                    } })));
                             }
                         }, 
                         // onAccept={isMobile ? handleSave(SCUserProfileFields.DATE_OF_BIRTH) : null}
@@ -196,8 +196,10 @@ export default function PublicInfo(props) {
                                 fullWidth: true,
                                 variant: 'outlined',
                                 helperText: _error || null,
-                                InputProps: {
-                                    endAdornment: isMobile && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ disabled: !isEditing }, { children: _jsx(Icon, { children: "CalendarIcon" }) })), isSaving ? _jsx(CircularProgress, { size: 10 }) : null] }))
+                                slotProps: {
+                                    input: {
+                                        endAdornment: isMobile && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ disabled: !isEditing }, { children: _jsx(Icon, { children: "CalendarIcon" }) })), isSaving && _jsx(CircularProgress, { size: 10 })] }))
+                                    }
                                 }
                             }
                         } }) }), field));

package/lib/esm/shared/Media/File/DocComponent.d.ts

@@ -1,10 +1,12 @@
 import { SCMediaType } from '@selfcommunity/types';
+import { HTMLAttributes } from 'react';
 interface DocComponentProps {
     document: SCMediaType;
     index?: number;
     onDelete?: (id: number) => void;
     handleDownload?: (id: number) => void;
     onMediaClick?: (media: SCMediaType) => void;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
 }
 export default function DocComponent(props: DocComponentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/esm/shared/Media/File/DocComponent.js

@@ -4,6 +4,7 @@ import { PREFIX } from './constants';
 import { Link } from '@selfcommunity/react-core';
 import { SCMimeTypes } from '@selfcommunity/types';
 import { useCallback } from 'react';
+import classNames from 'classnames';
 import txt from '../../../assets/composer/txt';
 import pdf from '../../../assets/composer/pdf';
 import doc from '../../../assets/composer/doc';
@@ -33,7 +34,7 @@ function formatBytes(bytes, decimals = 2) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 export default function DocComponent(props) {
-    const { document, index, onDelete, handleDownload, onMediaClick } = props;
+    const { document, index, onDelete, handleDownload, onMediaClick, className } = props;
     const getImage = useCallback(() => {
         switch (document.mimetype) {
             case SCMimeTypes.PLAIN_TEXT:
@@ -68,5 +69,5 @@ export default function DocComponent(props) {
                 return fallback;
         }
     }, [document.mimetype]);
-    return (_jsxs(Root, Object.assign({ className: classes.docRoot }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.docRoot, className) }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
 }

package/lib/esm/shared/Media/File/PreviewComponent.js

@@ -12,7 +12,8 @@ const classes = {
     media: `${PREFIX}-media`,
     delete: `${PREFIX}-delete`,
     title: `${PREFIX}-title`,
-    docsWrapper: `${PREFIX}-docs-wrapper`
+    docsWrapper: `${PREFIX}-docs-wrapper`,
+    doc: `${PREFIX}-doc`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -41,7 +42,7 @@ const PreviewComponent = forwardRef((props, ref) => {
     const handleDelete = useCallback((id) => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
     // RENDER
     const imageElements = useMemo(() => images.map((media) => (_jsxs(Box, Object.assign({ className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: [_jsx(IconButton, Object.assign({ className: classes.delete, onClick: () => handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })), media.title && _jsx(Typography, Object.assign({ className: classes.title }, { children: media.title }))] }), media.id))), [images]);
-    const docElements = useMemo(() => docs.map((doc) => _jsx(DocComponent, { document: doc, onDelete: handleDelete }, doc.id)), [docs]);
-    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: mediasLength > 0 && (_jsxs(_Fragment, { children: [_jsx(ReactSortable, Object.assign({ list: images, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: imageElements })), _jsx(ReactSortable, Object.assign({ list: docs, setList: handleSort, animation: 200, direction: "vertical", className: classes.docsWrapper }, { children: docElements }))] })) })));
+    const docElements = useMemo(() => docs.map((doc) => _jsx(DocComponent, { document: doc, onDelete: handleDelete, className: classes.doc }, doc.id)), [docs]);
+    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(classes.previewRoot, className) }, rest, { children: mediasLength > 0 && (_jsxs(_Fragment, { children: [_jsx(ReactSortable, Object.assign({ list: images, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: imageElements })), _jsx(ReactSortable, Object.assign({ list: docs, setList: handleSort, animation: 200, direction: "vertical", className: classes.docsWrapper }, { children: docElements }))] })) })));
 });
 export default PreviewComponent;