@selfcommunity/react-ui 0.9.0-alpha.0 → 0.9.0-alpha.10

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

@@ -1,5 +1,5 @@
 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 { LoadingButton } from '@mui/lab';
 import { Box, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -19,7 +19,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { EVENT_DESCRIPTION_MAX_LENGTH, EVENT_TITLE_MAX_LENGTH } from '../../constants/Event';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
-import BaseDialog from '../../shared/BaseDialog';
 import { DAILY_LATER_DAYS, MONTHLY_LATER_DAYS, NEVER_LATER_DAYS, PREFIX, WEEKLY_LATER_DAYS } from './constants';
 import EventAddress from './EventAddress';
 import UploadEventCover from './UploadEventCover';
@@ -72,11 +71,12 @@ const classes = {
     name: `${PREFIX}-name`,
     description: `${PREFIX}-description`,
     content: `${PREFIX}-content`,
+    actions: `${PREFIX}-actions`,
     privacySection: `${PREFIX}-privacy-section`,
     privacySectionInfo: `${PREFIX}-privacy-section-info`,
     error: `${PREFIX}-error`
 };
-const Root = styled(BaseDialog, {
+const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -118,7 +118,7 @@ export default function EventForm(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, open = true, onClose, onSuccess, event = null } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess", "event"]);
+    const { className, onSuccess, onError, event = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event"]);
     // CONTEXT
     const scContext = useSCContext();
     // INTL
@@ -219,10 +219,9 @@ export default function EventForm(inProps) {
         }
         eventService
             .then((data) => {
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
             notifyChanges(data);
-            onClose === null || onClose === void 0 ? void 0 : onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
         })
             .catch((e) => {
             const _error = formatHttpErrorCode(e);
@@ -236,8 +235,9 @@ export default function EventForm(inProps) {
             }
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
             Logger.error(SCOPE_SC_UI, e);
+            onError === null || onError === void 0 ? void 0 : onError(e);
         });
-    }, [field, privateEnabled, visibilityEnabled]);
+    }, [field, privateEnabled, visibilityEnabled, onSuccess, onError]);
     const handleChange = useCallback((event) => {
         const { name, value } = event.target;
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
@@ -282,55 +282,55 @@ export default function EventForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
-                !field.startDate ||
-                !field.startTime ||
-                !field.endDate ||
-                !field.endTime ||
-                (field.location === SCEventLocationType.ONLINE && !field.link) ||
-                (field.location === SCEventLocationType.PERSON && !field.geolocation) ||
-                (field.recurring !== SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
-                Object.keys(error).length !== 0 ||
-                field.name.length > EVENT_TITLE_MAX_LENGTH ||
-                field.description.length > EVENT_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }, rest, { children: _jsxs(_Fragment, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                                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' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
-                                            textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { 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" })
-                                            }
-                                        }, onChange: (value) => handleChangeDateTime(value, 'startDate') }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastStartTime, label: field.startTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, slots: {
-                                            textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { 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" })
-                                            }
-                                        }, onChange: (value) => 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) => {
-                                        if (!selected) {
-                                            return _jsx("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
-                                        }
-                                        return (_jsx(FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
-                                    }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, minDate: field.startDate, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
-                                            textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "calendar_off" }) }) }))) }) })))
-                                        }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
-                                            textField: (params) => {
-                                                var _a;
-                                                return (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? (_jsx(FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
-                                            }
-                                        }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                            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' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
+                                        textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                                    }, slotProps: {
+                                        toolbar: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
                                             // @ts-ignore
-                                            b: (chunks) => _jsx("strong", { children: chunks })
-                                        } })) : (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.date.title", defaultMessage: "ui.eventForm.date.title" })
+                                        }
+                                    }, onChange: (value) => handleChangeDateTime(value, 'startDate') }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastStartTime, label: field.startTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, slots: {
+                                        textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }) })))
+                                    }, slotProps: {
+                                        toolbar: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
                                             // @ts-ignore
-                                            b: (chunks) => _jsx("strong", { children: chunks })
-                                        } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
-                            }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })] }))] }) })));
+                                            toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
+                                        }
+                                    }, onChange: (value) => 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) => {
+                                    if (!selected) {
+                                        return _jsx("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
+                                    }
+                                    return (_jsx(FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
+                                }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, minDate: field.startDate, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
+                                        textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "calendar_off" }) }) }))) }) })))
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
+                                        textField: (params) => {
+                                            var _a;
+                                            return (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }), error: Boolean(error['endDateError']), helperText: ((_a = error['endDateError']) === null || _a === void 0 ? void 0 : _a.error) ? (_jsx(FormattedMessage, { id: "ui.eventForm.time.end.error.invalid", defaultMessage: "ui.eventForm.time.end.error.invalid" })) : null })));
+                                        }
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (chunks) => _jsx("strong", { children: chunks })
+                                    } })) : (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (chunks) => _jsx("strong", { children: chunks })
+                                    } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                            endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                                !field.startDate ||
+                                !field.startTime ||
+                                !field.endDate ||
+                                !field.endTime ||
+                                (field.location === SCEventLocationType.ONLINE && !field.link) ||
+                                (field.location === SCEventLocationType.PERSON && !field.geolocation) ||
+                                (field.recurring !== SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
+                                Object.keys(error).length !== 0 ||
+                                field.name.length > EVENT_TITLE_MAX_LENGTH ||
+                                field.description.length > EVENT_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
 }

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

@@ -0,0 +1,48 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { EventFormProps } from '../EventForm';
+export interface EventFormDialogProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default null
+     */
+    onClose?: () => void;
+    /**
+     * Props to spread to EventForm component
+     * @default {}
+     */
+    EventFormComponentProps?: EventFormProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS EventFormDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {EventFormDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCEventFormDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventFormDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function EventFormDialog(inProps: EventFormDialogProps): JSX.Element;

package/lib/esm/components/EventFormDialog/EventFormDialog.js

@@ -0,0 +1,53 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import BaseDialog from '../../shared/BaseDialog';
+import { PREFIX } from './constants';
+import EventForm from '../EventForm';
+import { useCallback } from 'react';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS EventFormDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {EventFormDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCEventFormDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventFormDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function EventFormDialog(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, open = true, onClose, EventFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
+    const handleSuccess = useCallback((event) => {
+        var _a;
+        (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose, EventFormComponentProps]);
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? (_jsx(FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsx(EventForm, Object.assign({}, EventFormComponentProps, { onSuccess: handleSuccess })) })));
+}

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCEventFormDialog";

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCEventFormDialog';

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

@@ -0,0 +1,3 @@
+import EventFormDialog, { EventFormDialogProps } from './EventFormDialog';
+export default EventFormDialog;
+export { EventFormDialogProps };

package/lib/esm/components/EventFormDialog/index.js

@@ -0,0 +1,2 @@
+import EventFormDialog from './EventFormDialog';
+export default EventFormDialog;

package/lib/esm/components/EventHeader/EventHeader.js

@@ -174,5 +174,5 @@ export default function EventHeader(inProps) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
+                            } })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ eventId: scEvent.id, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
 }

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

@@ -28,6 +28,10 @@ export interface EventMediaWidgetProps extends WidgetProps {
      * @default {}
      */
     dialogProps?: BaseDialogProps;
+    /**
+     * Limit results
+     * @default 10
+     */
     limit?: number;
     /**
      * Other props

package/lib/esm/components/EventMediaWidget/EventMediaWidget.js

@@ -6,7 +6,7 @@ import { styled } from '@mui/material/styles';
 import { Box, useThemeProps } from '@mui/system';
 import { Endpoints, EventService, http } from '@selfcommunity/api-services';
 import { SCCache, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
-import { Logger } from '@selfcommunity/utils';
+import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { Fragment, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -67,17 +67,22 @@ export default function EventMediaWidget(inProps) {
     const { event, eventId, limit = DEFAULT_PAGINATION_LIMIT, endpointQueryParams = {
         limit,
         offset: DEFAULT_PAGINATION_OFFSET
-    }, cacheStrategy, dialogProps } = props, rest = __rest(props, ["event", "eventId", "limit", "endpointQueryParams", "cacheStrategy", "dialogProps"]);
+    }, cacheStrategy = CacheStrategies.CACHE_FIRST, dialogProps } = props, rest = __rest(props, ["event", "eventId", "limit", "endpointQueryParams", "cacheStrategy", "dialogProps"]);
+    // HOOKS
+    const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    const intl = useIntl();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // STATE
     const [state, dispatch] = useReducer(dataWidgetReducer, {
         isLoadingNext: false,
         next: null,
-        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY),
+        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY, event ? event.id : eventId),
         cacheStrategy,
         visibleItems: limit
     }, stateWidgetInitializer);
-    const [medias, setMedias] = useState([]);
-    const [mediasCount, setMediasCount] = useState(0);
+    const [medias, setMedias] = useState(state.results);
+    const [mediasCount, setMediasCount] = useState(state.count);
     const [openDialog, setOpenDialog] = useState(false);
     const [openDialogConfirm, setOpenDialogConfirm] = useState(false);
     const [mediaId, setMediaId] = useState(null);
@@ -86,33 +91,9 @@ export default function EventMediaWidget(inProps) {
     const [showSkeleton, setShowSkeleton] = useState(null);
     // CONTEXT
     const scUserContext = useSCUser();
-    // HOOKS
-    const { scEvent } = useSCFetchEvent({ id: eventId, event });
-    const intl = useIntl();
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // CONSTS
     const hasAllow = useMemo(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id); }, [scUserContext, scEvent]);
     const countHiddenMedia = useMemo(() => mediasCount - MEDIAS_TO_SHOW, [mediasCount]);
-    /**
-     * Initialize component
-     * Fetch data only if the component is not initialized and it is not loading data
-     */
-    const _initComponent = useCallback(() => {
-        if (!state.initialized && !state.isLoadingNext) {
-            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
-            EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
-                .then((payload) => {
-                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
-                setMedias(payload.results);
-                setMediasCount(payload.count);
-            })
-                .catch((error) => {
-                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
-                Logger.error(SCOPE_SC_UI, error);
-            });
-        }
-    }, [state.isLoadingNext, state.initialized, scEvent]);
     const _fetchNext = useCallback((index) => {
         if (mediasCount > medias.length && index >= 6 && !state.isLoadingNext && state.next) {
             setPreview(index);
@@ -132,7 +113,7 @@ export default function EventMediaWidget(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [state.next, state.isLoadingNext, medias.length]);
+    }, [state.next, state.isLoadingNext, medias, mediasCount, dispatch, setPreview]);
     const handleOpenLightbox = useCallback((index) => {
         setPreview(index);
     }, [setPreview]);
@@ -185,7 +166,7 @@ export default function EventMediaWidget(inProps) {
             .catch((error) => {
             Logger.error(SCOPE_SC_UI, error);
         });
-    }, [scEvent, mediaId, setMedias, setLoading, setOpenDialogConfirm, dispatch]);
+    }, [scEvent, mediaId, setMedias, setLoading, setOpenDialogConfirm, dispatch, setMediasCount]);
     const handleCloseAction = useCallback(() => {
         setMediaId(null);
         setOpenDialogConfirm(false);
@@ -210,25 +191,55 @@ export default function EventMediaWidget(inProps) {
     // EFFECTS
     useEffect(() => {
         let _t;
-        if (scUserContext.user && scEvent) {
+        if (scUserContext.user &&
+            scEvent &&
+            !state.initialized &&
+            Boolean((eventId !== undefined && scEvent.id === eventId) || (event && scEvent.id === event.id))) {
             _t = setTimeout(_initComponent);
             return () => {
                 clearTimeout(_t);
             };
         }
-    }, [scUserContext.user, scEvent]);
+    }, [scUserContext.user, scEvent, state.initialized]);
+    useEffect(() => {
+        if (state.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
+            dispatch({ type: actionWidgetTypes.RESET, payload: {} });
+        }
+    }, [state.initialized, scEvent, eventId, event]);
+    /**
+     * Initialize component
+     * Fetch data only if the component is not initialized and it is not loading data
+     */
+    const _initComponent = useCallback(() => {
+        if (!state.isLoadingNext) {
+            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
+            EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
+                .then((payload) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
+                setMedias(payload.results);
+                setMediasCount(payload.count);
+            })
+                .catch((error) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+    }, [state.isLoadingNext, scEvent, eventId, dispatch, setMedias, setMediasCount]);
     useEffect(() => {
         if (isMobile && openDialog && state.next) {
             handleNext();
         }
     }, [isMobile, openDialog, state.next]);
     // RENDER
-    if (!scEvent || (state.initialized && mediasCount === 0 && !hasAllow)) {
-        return _jsx(HiddenPlaceholder, {});
-    }
-    if (!state.initialized || (state.isLoadingNext && mediasCount === 0)) {
+    if (!scEvent ||
+        !state.initialized ||
+        (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
+        (state.isLoadingNext && !state.initialized)) {
         return _jsx(SkeletonComponent, {});
     }
+    if (state.initialized && state.count === 0 && !hasAllow) {
+        return _jsx(HiddenPlaceholder, {});
+    }
     return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { showPadding: hasAllow }, { children: [_jsx(CardHeader, { title: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.title", defaultMessage: "ui.eventMediaWidget.title" }) })), hasAllow && mediasCount > 0 && _jsx(TriggerButton, { size: "small", onAdd: handleAddMedia })] })), className: classes.header }), _jsx(Divider, {}), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Box, Object.assign({ className: classes.grid }, { children: [showSkeleton === 'widget' && _jsx(EventMediaSkeleton, {}), medias.slice(0, MEDIAS_TO_SHOW).map((media, i, array) => (_jsx(Box, Object.assign({ onClick: () => handleOpenLightbox(i), sx: {
                                     background: `url(${media.image}) no-repeat center`
                                 }, className: classes.media }, { children: medias.length > array.length && i === array.length - 1 && (_jsxs(Fragment, { children: [_jsx(Box, { className: classes.mediaLayer }), _jsx(Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: _jsxs(Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: _jsx(TriggerButton, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && _jsx(Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: _jsxs(Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => (_jsx(Box, Object.assign({ sx: {

package/lib/esm/components/EventMediaWidget/TriggerButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LoadingButtonProps } from '@mui/lab';
 import { SCMediaType } from '@selfcommunity/types';
 export interface TriggerIconButtonProps extends LoadingButtonProps {
@@ -12,4 +13,5 @@ export interface TriggerIconButtonProps extends LoadingButtonProps {
      */
     isSquare?: boolean;
 }
-export default function TriggerButton(props: TriggerIconButtonProps): JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<TriggerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "name" | "type" | "href" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon" | "loadingIndicator" | "loadingPosition" | "onAdd" | "isSquare"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default _default;

package/lib/esm/components/EventMediaWidget/TriggerButton.js

@@ -25,7 +25,7 @@ const Root = styled(LoadingButton, {
     shouldForwardProp: (prop) => prop !== 'isSquare'
 })(() => ({}));
 const GalleryUploadStack = asUploadButton(forwardRef((props, ref) => _jsx(Stack, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
-export default function TriggerButton(props) {
+function TriggerButton(props, ref) {
     // PROPS
     const { className, onAdd = null, isSquare = false } = props, rest = __rest(props, ["className", "onAdd", "isSquare"]);
     // STATE
@@ -56,5 +56,9 @@ export default function TriggerButton(props) {
     return (_jsxs(ChunkedUploady, Object.assign({ destination: {
             url: Endpoints.ComposerChunkUploadMedia.url(),
             method: Endpoints.ComposerChunkUploadMedia.method
-        }, fileFilter: handleFilterByMime, chunkSize: 204800 }, { children: [_jsx(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError, type: "image" }), _jsx(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add media", loading: isUploading, isSquare: isSquare }, { children: _jsxs(GalleryUploadStack, Object.assign({ className: classes.triggerContent }, { children: [!isSquare && (_jsx(Typography, Object.assign({ variant: "caption", component: "p" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }))), _jsx(Icon, Object.assign({ className: classes.triggerIcon }, { children: "add" }))] })) }))] })));
+        }, fileFilter: handleFilterByMime, chunkSize: 204800 }, { children: [_jsx(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError, type: "image" }), _jsx(Root, Object.assign({ className: classNames(className, classes.triggerRoot), ref: ref }, rest, { "aria-label": "add media", loading: isUploading, 
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                isSquare: isSquare }, { children: _jsxs(GalleryUploadStack, Object.assign({ className: classes.triggerContent }, { children: [!isSquare && (_jsx(Typography, Object.assign({ variant: "caption", component: "p" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }))), _jsx(Icon, Object.assign({ className: classes.triggerIcon }, { children: "add" }))] })) }))] })));
 }
+export default forwardRef(TriggerButton);

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

@@ -35,6 +35,9 @@ export interface EventMembersWidgetProps extends WidgetProps {
      * @default {}
      */
     dialogProps?: BaseDialogProps;
+    /**
+     * Limit items
+     */
     limit?: number;
     /**
      * Other props