@selfcommunity/react-ui 0.11.0-mui7.24 → 0.11.0-mui7.27

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

@@ -7,6 +7,7 @@ const constants_1 = require("./constants");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const txt_1 = tslib_1.__importDefault(require("../../../assets/composer/txt"));
 const pdf_1 = tslib_1.__importDefault(require("../../../assets/composer/pdf"));
 const doc_1 = tslib_1.__importDefault(require("../../../assets/composer/doc"));
@@ -36,7 +37,7 @@ function formatBytes(bytes, decimals = 2) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 function DocComponent(props) {
-    const { document, index, onDelete, handleDownload, onMediaClick } = props;
+    const { document, index, onDelete, handleDownload, onMediaClick, className } = props;
     const getImage = (0, react_1.useCallback)(() => {
         switch (document.mimetype) {
             case types_1.SCMimeTypes.PLAIN_TEXT:
@@ -71,6 +72,6 @@ function DocComponent(props) {
                 return fallback_1.default;
         }
     }, [document.mimetype]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.docRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", alt: document.title, src: getImage() }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.textWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [document.mimetype === types_1.SCMimeTypes.PDF && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, component: react_core_1.Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))] }))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.docRoot, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", alt: document.title, src: getImage() }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.textWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [document.mimetype === types_1.SCMimeTypes.PDF && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, component: react_core_1.Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))] }))] })))] })));
 }
 exports.default = DocComponent;

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

@@ -14,7 +14,8 @@ const classes = {
     media: `${constants_1.PREFIX}-media`,
     delete: `${constants_1.PREFIX}-delete`,
     title: `${constants_1.PREFIX}-title`,
-    docsWrapper: `${constants_1.PREFIX}-docs-wrapper`
+    docsWrapper: `${constants_1.PREFIX}-docs-wrapper`,
+    doc: `${constants_1.PREFIX}-doc`
 };
 const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -43,7 +44,7 @@ const PreviewComponent = (0, react_1.forwardRef)((props, ref) => {
     const handleDelete = (0, react_1.useCallback)((id) => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
     // RENDER
     const imageElements = (0, react_1.useMemo)(() => images.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.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: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.delete, onClick: () => handleDelete(media.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) })), media.title && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: media.title }))] }), media.id))), [images]);
-    const docElements = (0, react_1.useMemo)(() => docs.map((doc) => (0, jsx_runtime_1.jsx)(DocComponent_1.default, { document: doc, onDelete: handleDelete }, doc.id)), [docs]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: mediasLength > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: images, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: imageElements })), (0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: docs, setList: handleSort, animation: 200, direction: "vertical", className: classes.docsWrapper }, { children: docElements }))] })) })));
+    const docElements = (0, react_1.useMemo)(() => docs.map((doc) => (0, jsx_runtime_1.jsx)(DocComponent_1.default, { document: doc, onDelete: handleDelete, className: classes.doc }, doc.id)), [docs]);
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(classes.previewRoot, className) }, rest, { children: mediasLength > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: images, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: imageElements })), (0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: docs, setList: handleSort, animation: 200, direction: "vertical", className: classes.docsWrapper }, { children: docElements }))] })) })));
 });
 exports.default = PreviewComponent;

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

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CardContent, Typography, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
-import { APIProvider, Map, Marker } from '@vis.gl/react-google-maps';
+import { APIProvider } from '@vis.gl/react-google-maps';
 import { useSCGoogleApiLoader, useSCFetchEvent } from '@selfcommunity/react-core';
 import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
@@ -12,6 +12,7 @@ import { formatEventLocationGeolocation } from '../../utils/string';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 import EventLocationWidgetSkeleton from './Skeleton';
+import EventMap from './EventMap';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -64,24 +65,18 @@ export default function EventLocationWidget(inProps) {
     // STATE
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
     // HOOKS
-    const { isLoaded, geocodingApiKey } = useSCGoogleApiLoader();
+    const { geocodingApiKey, libraries } = useSCGoogleApiLoader();
     if (!geocodingApiKey || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.ONLINE) {
         return _jsx(HiddenPlaceholder, {});
     }
     /**
      * Loading event
      */
-    if (!isLoaded || !scEvent) {
+    if (!scEvent) {
         return _jsx(EventLocationWidgetSkeleton, {});
     }
     /**
      * 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: {
-                                lat: scEvent.geolocation_lat,
-                                lng: scEvent.geolocation_lng
-                            }, zoom: 15, fullscreenControl: false, mapTypeControl: false, streetViewControl: false, zoomControl: false }, { children: _jsx(Marker, { position: {
-                                    lat: scEvent.geolocation_lat,
-                                    lng: scEvent.geolocation_lng
-                                } }) })) })) })), _jsx(Typography, Object.assign({ variant: "h4", className: classes.locationTitle }, { children: formatEventLocationGeolocation(scEvent.geolocation, true) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.address }, { children: formatEventLocationGeolocation(scEvent.geolocation) }))] }) })));
+    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(EventMap, { event: scEvent, className: classes.map }) })) })), _jsx(Typography, Object.assign({ variant: "h4", className: classes.locationTitle }, { children: formatEventLocationGeolocation(scEvent.geolocation, true) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.address }, { children: formatEventLocationGeolocation(scEvent.geolocation) }))] }) })));
 }

package/lib/esm/components/EventLocationWidget/EventMap.d.ts

@@ -0,0 +1,8 @@
+import { SCEventType } from '@selfcommunity/types';
+import { HTMLAttributes } from 'react';
+interface EventMapProps {
+    event: SCEventType;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+}
+export default function EventMap(props: EventMapProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSCGoogleApiLoader } from '@selfcommunity/react-core';
+import { Map, Marker } from '@vis.gl/react-google-maps';
+export default function EventMap(props) {
+    // PROPS
+    const { event, className } = props;
+    // HOOKS
+    const { isLoaded } = useSCGoogleApiLoader();
+    if (!isLoaded) {
+        return null;
+    }
+    return (_jsx(Map, Object.assign({ className: className, center: {
+            lat: event.geolocation_lat,
+            lng: event.geolocation_lng
+        }, zoom: 15, fullscreenControl: false, mapTypeControl: false, streetViewControl: false, zoomControl: false }, { children: _jsx(Marker, { position: {
+                lat: event.geolocation_lat,
+                lng: event.geolocation_lng
+            } }) })));
+}

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/LocationAutocomplete/LocationAutocomplete.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -104,6 +105,6 @@ export default function LocationAutocomplete(inProps) {
         }, renderOption: (props, option, { inputValue }) => {
             const matches = match(option.full_address, inputValue);
             const parts = parse(option.full_address, matches);
-            return (_jsx("li", Object.assign({}, props, { style: { whiteSpace: 'break-spaces' } }, { children: parts.map((part, index) => part.highlight ? (_jsx("span", Object.assign({ style: { fontWeight: 700 } }, { children: part.text }), index)) : (part.text)) }), `${option.lat}_${option.lng}`));
+            return (_createElement("li", Object.assign({}, props, { key: `${option.lat}_${option.lng}`, style: { whiteSpace: 'break-spaces' } }), parts.map((part, index) => part.highlight ? (_jsx("span", Object.assign({ style: { fontWeight: 700 } }, { children: part.text }), index)) : (part.text))));
         } }, rest)));
 }

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/UserProfileEdit/Section/PublicInfo.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField, useMediaQuery, useTheme, Icon, styled, Button } from '@mui/material';
+import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField, Icon, styled, Button } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { camelCase, Logger } from '@selfcommunity/utils';
@@ -15,7 +15,7 @@ import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
 import { SCUserProfileFields } from '../../../types';
 import MetadataField from '../../../shared/MetadataField';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
-import { format, isBefore, isValid, parseISO, startOfHour } from 'date-fns';
+import { format, isBefore, isValid, startOfHour } from 'date-fns';
 import { it } from 'date-fns/locale/it';
 import { enUS } from 'date-fns/locale/en-US';
 import { useSnackbar } from 'notistack';
@@ -67,9 +67,7 @@ export default function PublicInfo(props) {
         return null;
     }, [scPreferences.preferences]);
     // 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([]);
@@ -159,7 +157,7 @@ export default function PublicInfo(props) {
                 return (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS }, { children: _jsx(DatePicker, { label: intl.formatMessage({
                             id: `ui.userInfo.${camelCase(field)}`,
                             defaultMessage: `ui.userInfo.${field}`
-                        }), defaultValue: user[field] ? parseISO(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
+                        }), defaultValue: user[field] ? new Date(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
                             const u = user;
                             const field = SCUserProfileFields.DATE_OF_BIRTH;
                             const camelField = camelCase(field);
@@ -181,13 +179,8 @@ 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: {
+                            openPickerButton: (params) => (_jsxs(IconButton, Object.assign({}, params, { children: [_jsx(Icon, { children: "CalendarIcon" }), isSaving && _jsx(CircularProgress, { size: 10 })] })))
                         }, 
                         // onAccept={isMobile ? handleSave(SCUserProfileFields.DATE_OF_BIRTH) : null}
                         slotProps: {
@@ -195,10 +188,7 @@ export default function PublicInfo(props) {
                                 className: classes.field,
                                 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] }))
-                                }
+                                helperText: _error || null
                             }
                         } }) }), field));
             case SCUserProfileFields.BIO: