@selfcommunity/react-ui 0.8.0-live.40 → 0.8.0-live.42

package/lib/cjs/components/AccountChangeMailValidation/AccountChangeMailValidation.js

@@ -85,6 +85,6 @@ function AccountChangeMailValidation(inProps) {
         return null;
     }
     // RENDER
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: succeed ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", className: classes.success, children: [typeof succeed === 'string' ? (succeed) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountChangeMailValidation.success", defaultMessage: "ui.accountChangeMailValidation.success" })), successAction] })) : error ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "error", className: classes.error, children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountChangeMailValidation.error", defaultMessage: "ui.accountChangeMailValidation.error" }), errorAction] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountChangeMailValidation.verifying", defaultMessage: "ui.accountChangeMailValidation.verifying" })] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: succeed ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "success", className: classes.success }, { children: [typeof succeed === 'string' ? (succeed) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountChangeMailValidation.success", defaultMessage: "ui.accountChangeMailValidation.success" })), successAction] }))) : error ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.error }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountChangeMailValidation.error", defaultMessage: "ui.accountChangeMailValidation.error" }), errorAction] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountChangeMailValidation.verifying", defaultMessage: "ui.accountChangeMailValidation.verifying" })] })) })));
 }
 exports.default = AccountChangeMailValidation;

package/lib/cjs/components/AccountDataPortability/AccountDataPortability.js

@@ -153,19 +153,19 @@ function AccountDataPortability(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.title", defaultMessage: "ui.accountDataPortability.title", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", component: "div", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.info", defaultMessage: "ui.accountDataPortability.info", values: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.title", defaultMessage: "ui.accountDataPortability.title", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.info", defaultMessage: "ui.accountDataPortability.info", values: {
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
                         li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
                         ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
-                    } }) }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
+                    } }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
                     (dataPortability &&
                         (dataPortability.computing ||
-                            (dataPortability.requested_at && (0, date_fns_1.differenceInHours)(new Date(), (0, date_fns_1.parseISO)(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile, children: (dataPortability && dataPortability.computing) || loading ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) }), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, { size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "cloud_download_outlined" }), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) })), (0, jsx_runtime_1.jsx)("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.generationInfo, variant: "body2", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
+                            (dataPortability.requested_at && (0, date_fns_1.differenceInHours)(new Date(), (0, date_fns_1.parseISO)(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, { children: (dataPortability && dataPortability.computing) || loading ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) })), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "cloud_download_outlined" }), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) }))), (0, jsx_runtime_1.jsx)("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generationInfo, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
                         date: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: dataPortability.requested_at, day: "numeric", month: "long", year: "numeric" }),
                         time: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedTime, { value: dataPortability.requested_at })
-                    } }) }))] })));
+                    } }) })))] })));
 }
 exports.default = AccountDataPortability;

package/lib/cjs/components/AccountDataPortabilityButton/AccountDataPortabilityButton.js

@@ -73,6 +73,6 @@ function AccountDataPortabilityButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleOpen, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortabilityButton.buttonLabel", defaultMessage: "ui.accountDataPortabilityButton.buttonLabel" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, { title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortabilityButton.dialogTitle", defaultMessage: "ui.accountDataPortabilityButton.dialogTitle", values: { username: scUserContext.user.username } }), onClose: handleClose, open: open, DialogContentProps: {}, children: (0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, {}) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleOpen, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortabilityButton.buttonLabel", defaultMessage: "ui.accountDataPortabilityButton.buttonLabel" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortabilityButton.dialogTitle", defaultMessage: "ui.accountDataPortabilityButton.dialogTitle", values: { username: scUserContext.user.username } }), onClose: handleClose, open: open, DialogContentProps: {} }, { children: (0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, {}) })))] }));
 }
 exports.default = AccountDataPortabilityButton;

package/lib/cjs/components/AccountDelete/AccountDelete.js

@@ -110,7 +110,7 @@ function AccountDelete(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.message, component: material_1.Box, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.message, component: material_1.Box }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
                         communityName,
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
@@ -118,11 +118,11 @@ function AccountDelete(inProps) {
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
                         ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
-                    } }) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { className: classes.confirm, component: material_1.Box, children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.confirmMessage", defaultMessage: "ui.accountDelete.confirmMessage", values: {
+                    } }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.confirm, component: material_1.Box }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.confirmMessage", defaultMessage: "ui.accountDelete.confirmMessage", values: {
                             username: scUserContext.user.username,
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore
                             b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks })
-                        } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] }), error && (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: error }), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) })] })));
+                        } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] })), error && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error })), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) }))] })));
 }
 exports.default = AccountDelete;

package/lib/cjs/components/AccountDeleteButton/AccountDeleteButton.js

@@ -77,6 +77,6 @@ function AccountDeleteButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleOpen, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDeleteButton.buttonLabel", defaultMessage: "ui.accountDeleteButton.buttonLabel" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, { title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDeleteButton.dialogTitle", defaultMessage: "ui.accountDeleteButton.dialogTitle" }), onClose: handleClose, open: open, DialogContentProps: {}, children: (0, jsx_runtime_1.jsx)(AccountDelete_1.default, { onDeleteAccount: handleDelete }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleOpen, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDeleteButton.buttonLabel", defaultMessage: "ui.accountDeleteButton.buttonLabel" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDeleteButton.dialogTitle", defaultMessage: "ui.accountDeleteButton.dialogTitle" }), onClose: handleClose, open: open, DialogContentProps: {} }, { children: (0, jsx_runtime_1.jsx)(AccountDelete_1.default, { onDeleteAccount: handleDelete }) })))] }));
 }
 exports.default = AccountDeleteButton;

package/lib/cjs/components/AccountRecover/AccountRecover.js

@@ -103,11 +103,11 @@ function AccountRecover(inProps) {
         return null;
     }
     // RENDER
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isSucceed ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", className: classes.success, children: [intl.formatMessage({ id: 'ui.accountRecover.success', defaultMessage: 'ui.accountRecover.success' }, {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isSucceed ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "success", className: classes.success }, { children: [intl.formatMessage({ id: 'ui.accountRecover.success', defaultMessage: 'ui.accountRecover.success' }, {
                     email,
                     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                     // @ts-ignore
                     b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks })
-                }), successAction] })) : ((0, jsx_runtime_1.jsxs)("form", { className: classes.form, onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(EmailTextField_1.default, Object.assign({ className: classes.email, disabled: isSubmitting, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountRecover.email.label", defaultMessage: "ui.accountRecover.email.label" }) }, TextFieldProps, { value: email, onChange: handleChange, error: Boolean(emailError), helperText: emailError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.accountRecover.email.error.${emailError}`, defaultMessage: `ui.accountRecover.email.error.${emailError}` })) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !email || Boolean(emailError) || isSubmitting, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountRecover.submit", defaultMessage: "ui.accountRecover.submit" }) }))] })) })));
+                }), successAction] }))) : ((0, jsx_runtime_1.jsxs)("form", Object.assign({ className: classes.form, onSubmit: handleSubmit }, { children: [(0, jsx_runtime_1.jsx)(EmailTextField_1.default, Object.assign({ className: classes.email, disabled: isSubmitting, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountRecover.email.label", defaultMessage: "ui.accountRecover.email.label" }) }, TextFieldProps, { value: email, onChange: handleChange, error: Boolean(emailError), helperText: emailError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.accountRecover.email.error.${emailError}`, defaultMessage: `ui.accountRecover.email.error.${emailError}` })) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !email || Boolean(emailError) || isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountRecover.submit", defaultMessage: "ui.accountRecover.submit" }) }))] }))) })));
 }
 exports.default = AccountRecover;

package/lib/cjs/components/AccountReset/AccountReset.js

@@ -143,6 +143,6 @@ function AccountReset(inProps) {
         return null;
     }
     // RENDER
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isSucceed ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", className: classes.success, children: [intl.formatMessage({ id: 'ui.accountReset.success', defaultMessage: 'ui.accountReset.success' }), successAction] })) : validationCodeError ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "error", className: classes.error, children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountReset.code.error", defaultMessage: "ui.accountReset.code.error" }), errorAction] })) : isLoading ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.validating, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountReset.code.validatingToken", defaultMessage: "ui.accountReset.code.validatingToken" }) })] })) : ((0, jsx_runtime_1.jsxs)("form", { className: classes.form, onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(PasswordTextField_1.default, Object.assign({ className: classes.password, disabled: isSubmitting, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountReset.password.label", defaultMessage: "ui.accountReset.password.label" }) }, TextFieldProps, { value: password, onChange: handleChange, error: Boolean(passwordError), helperText: passwordError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.accountReset.password.error.${passwordError}`, defaultMessage: `ui.accountReset.password.error.${passwordError}` })) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !password || isSubmitting, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountReset.submit", defaultMessage: "ui.accountReset.submit" }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isSucceed ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "success", className: classes.success }, { children: [intl.formatMessage({ id: 'ui.accountReset.success', defaultMessage: 'ui.accountReset.success' }), successAction] }))) : validationCodeError ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.error }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountReset.code.error", defaultMessage: "ui.accountReset.code.error" }), errorAction] }))) : isLoading ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.validating }, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountReset.code.validatingToken", defaultMessage: "ui.accountReset.code.validatingToken" }) })] }))) : ((0, jsx_runtime_1.jsxs)("form", Object.assign({ className: classes.form, onSubmit: handleSubmit }, { children: [(0, jsx_runtime_1.jsx)(PasswordTextField_1.default, Object.assign({ className: classes.password, disabled: isSubmitting, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountReset.password.label", defaultMessage: "ui.accountReset.password.label" }) }, TextFieldProps, { value: password, onChange: handleChange, error: Boolean(passwordError), helperText: passwordError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.accountReset.password.error.${passwordError}`, defaultMessage: `ui.accountReset.password.error.${passwordError}` })) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !password || isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountReset.submit", defaultMessage: "ui.accountReset.submit" }) }))] }))) })));
 }
 exports.default = AccountReset;

package/lib/cjs/components/AccountVerify/AccountVerify.js

@@ -86,6 +86,6 @@ function AccountVerify(inProps) {
         return null;
     }
     // RENDER
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: succeed ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "success", className: classes.success, children: [typeof succeed === 'string' ? succeed : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountVerify.success", defaultMessage: "ui.accountVerify.success" }), successAction] })) : error ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "error", className: classes.error, children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountVerify.error", defaultMessage: "ui.accountVerify.error" }), errorAction] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountVerify.verifying", defaultMessage: "ui.accountVerify.verifying" })] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: succeed ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "success", className: classes.success }, { children: [typeof succeed === 'string' ? succeed : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountVerify.success", defaultMessage: "ui.accountVerify.success" }), successAction] }))) : error ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.error }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountVerify.error", defaultMessage: "ui.accountVerify.error" }), errorAction] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountVerify.verifying", defaultMessage: "ui.accountVerify.verifying" })] })) })));
 }
 exports.default = AccountVerify;

package/lib/cjs/components/BottomNavigation/BottomNavigation.js

@@ -93,8 +93,8 @@ function BottomNavigation(inProps) {
                     eventsEnabled &&
                     !exploreStreamEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true }, "composer")) : null,
                 eventsEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }, "events")) : null,
-                scUserContext.user && !groupsEnabled && !eventsEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary", children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" }) }) }, "notifications")) : null,
-                privateMessagingEnabled && scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: 0, color: "secondary", children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) }) }, "messages")) : null
+                scUserContext.user && !groupsEnabled && !eventsEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" }) })) }, "notifications")) : null,
+                privateMessagingEnabled && scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) })) }, "messages")) : null
             ] })));
 }
 exports.default = BottomNavigation;

package/lib/cjs/components/BroadcastMessages/BroadcastMessages.js

@@ -148,6 +148,6 @@ function BroadcastMessages(inProps) {
         onHeightChange && onHeightChange();
     }, [data.results.length, loading, viewAll, cacheStrategy]);
     const messagesToShow = [...unViewedMessages, ...data.results.slice(unViewedMessages.length, viewAll ? viewedMessageCounter : 1)];
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [messagesToShow.map((message, index) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Message_1.default, Object.assign({ message: message }, MessageProps, { onClose: handleDisposeMessage, onRead: handleMarkRead })) }, index))), loading && !disableLoader && (0, jsx_runtime_1.jsx)(Skeleton_1.MessageSkeleton, {}), loading !== null && !loading && (data.next || (data.count > 1 && viewedMessageCounter > 0 && !viewAll)) && ((0, jsx_runtime_1.jsx)(Widget_1.default, { className: classes.boxLoadMore, children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "text", onClick: fetchOtherMessages, disabled: loading, color: "inherit", classes: { root: classes.buttonLoadMore }, children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { component: "span", className: classes.avatarLoadMore, alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.broadcastMessages.loadMore", defaultMessage: "ui.broadcastMessages.loadMore" })] }) }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [messagesToShow.map((message, index) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Message_1.default, Object.assign({ message: message }, MessageProps, { onClose: handleDisposeMessage, onRead: handleMarkRead })) }, index))), loading && !disableLoader && (0, jsx_runtime_1.jsx)(Skeleton_1.MessageSkeleton, {}), loading !== null && !loading && (data.next || (data.count > 1 && viewedMessageCounter > 0 && !viewAll)) && ((0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.boxLoadMore }, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "text", onClick: fetchOtherMessages, disabled: loading, color: "inherit", classes: { root: classes.buttonLoadMore } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { component: "span", className: classes.avatarLoadMore, alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.broadcastMessages.loadMore", defaultMessage: "ui.broadcastMessages.loadMore" })] })) }) })))] })));
 }
 exports.default = BroadcastMessages;

package/lib/cjs/components/BroadcastMessages/Message.js

@@ -85,7 +85,7 @@ function Message(props) {
     }, [message]);
     // RENDER
     const renderContent = (banner) => {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, { className: classes.title, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: banner.title }) }), banner.image && (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }), (banner.body_text || banner.link_text) && ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { className: classes.content, children: [banner.body_text && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", children: banner.body_text })), banner.link_text && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", children: (0, jsx_runtime_1.jsx)("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self', children: banner.link_text }) }))] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: banner.title })) })), banner.image && (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }), (banner.body_text || banner.link_text) && ((0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [banner.body_text && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", color: "text.secondary" }, { children: banner.body_text }))), banner.link_text && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, { children: banner.link_text })) })))] })))] }));
     };
     // Banner
     const { banner } = message;
@@ -94,11 +94,11 @@ function Message(props) {
          * With a fade in transition show the Card (Widget)
          * Include also MarkRead component to
          */
-        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, { in: open, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [message.viewed_at === null && !disableMarkRead && ((0, jsx_runtime_1.jsx)(MarkRead_1.default, { endpoint: api_services_1.Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === types_1.SCBroadcastMessageTemplateType.DETAIL && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "close", onClick: handleClose, disabled: closing, children: closing ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), title: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }), renderContent(banner)] }) }) })));
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: open, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [message.viewed_at === null && !disableMarkRead && ((0, jsx_runtime_1.jsx)(MarkRead_1.default, { endpoint: api_services_1.Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === types_1.SCBroadcastMessageTemplateType.DETAIL && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "close", onClick: handleClose, disabled: closing }, { children: closing ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }))), title: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }), renderContent(banner)] }) })) })));
     }
     // SCBroadcastMessageTemplateType.SNIPPET
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: className }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItem, { alignItems: 'center', component: 'div', classes: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: className }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ alignItems: 'center', component: 'div', classes: {
                 root: (0, classnames_1.default)(classes.listItemSnippet, classes.listItemSnippetNew)
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { classes: { root: classes.messageIconWrap }, children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", classes: { root: classes.messageIconSnippet }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "info" }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { disableTypography: true, primary: (0, jsx_runtime_1.jsx)(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", color: "inherit", children: banner.title }) }) })] }) })));
+            } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, Object.assign({ classes: { root: classes.messageIconWrap } }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.messageIconSnippet } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "info" }) })) })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { disableTypography: true, primary: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", color: "inherit" }, { children: banner.title })) })) })] })) })));
 }
 exports.default = Message;

package/lib/cjs/components/BroadcastMessages/Skeleton.js

@@ -45,7 +45,7 @@ const MessageSkeletonRoot = (0, styles_1.styled)(Widget_1.default, {
  */
 function MessageSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(MessageSkeletonRoot, { className: messageClasses.root, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: messageClasses.header, avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: 60, height: 20 }) }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { className: messageClasses.title, children: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%" }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: messageClasses.media, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 190, animation: "wave", variant: "rectangular" }) }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { className: messageClasses.content, children: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 60 })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(MessageSkeletonRoot, Object.assign({ className: messageClasses.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: messageClasses.header, avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: 60, height: 20 }) }), (0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: messageClasses.title }, { children: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: messageClasses.media }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 190, animation: "wave", variant: "rectangular" }) })), (0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: messageClasses.content }, { children: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 60 })] }) }))] })));
 }
 exports.MessageSkeleton = MessageSkeleton;
 const classes = {

package/lib/cjs/components/Categories/Categories.js

@@ -149,7 +149,7 @@ function Categories(inProps) {
      * Renders categories list
      */
     const filteredCategories = (0, utils_1.sortByAttr)(getFilteredCategories(), 'order');
-    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters, children: filters ? (filters) : ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, md: 6, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, value: filterName, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })) })), loading ? ((0, jsx_runtime_1.jsx)(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.categories, children: !filteredCategories.length ? ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.noResults, variant: "body2", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" }) }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredCategories.map((category) => ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 4, children: (0, jsx_runtime_1.jsx)(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })) }, category.id))) })) }))] }));
+    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, value: filterName, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) }))) }))), loading ? ((0, jsx_runtime_1.jsx)(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.categories }, { children: !filteredCategories.length ? ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" }) })) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredCategories.map((category) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 6, lg: 4 }, { children: (0, jsx_runtime_1.jsx)(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })) }), category.id))) })) })))] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */

package/lib/cjs/components/Categories/Skeleton.js

@@ -38,6 +38,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  */
 function CategoriesSkeleton(inProps) {
     const { className, CategorySkeletonProps = {} } = inProps, rest = tslib_1.__rest(inProps, ["className", "CategorySkeletonProps"]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.categories, children: [...Array(15)].map((category, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, sm: 6, md: 4, children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: 'outlined' }, CategorySkeletonProps)) }, index))) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.categories }, { children: [...Array(15)].map((category, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 4 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: 'outlined' }, CategorySkeletonProps)) }), index))) })) })));
 }
 exports.default = CategoriesSkeleton;

package/lib/cjs/components/CategoriesPopularWidget/CategoriesPopularWidget.js

@@ -208,7 +208,7 @@ function CategoriesPopularWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.title, variant: "h5", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesPopularWidget.title", defaultMessage: "ui.categoriesPopularWidget.title" }) }), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.noResults, variant: "body2", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesPopularWidget.noResults", defaultMessage: "ui.categoriesPopularWidget.noResults" }) })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((category) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ elevation: 0, category: category, categoryFollowButtonProps: { onFollow: handleFollowersUpdate } }, CategoryProps)) }, category.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.showMore, onClick: handleToggleDialogOpen, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesPopularWidget.button.showAll", defaultMessage: "ui.categoriesPopularWidget.button.showAll" }) }))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoriesPopularWidget.title", id: "ui.categoriesPopularWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(Category_1.CategorySkeleton, Object.assign({ elevation: 0 }, CategoryProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.endMessage, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesPopularWidget.noMoreResults", defaultMessage: "ui.categoriesPopularWidget.noMoreResults" }) }), children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((c) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ elevation: 0, category: c }, CategoryProps, { categoryFollowButtonProps: { onFollow: handleFollowersUpdate } })) }, c.id))) }) }) })))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesPopularWidget.title", defaultMessage: "ui.categoriesPopularWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesPopularWidget.noResults", defaultMessage: "ui.categoriesPopularWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((category) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ elevation: 0, category: category, categoryFollowButtonProps: { onFollow: handleFollowersUpdate } }, CategoryProps)) }, category.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesPopularWidget.button.showAll", defaultMessage: "ui.categoriesPopularWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoriesPopularWidget.title", id: "ui.categoriesPopularWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(Category_1.CategorySkeleton, Object.assign({ elevation: 0 }, CategoryProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesPopularWidget.noMoreResults", defaultMessage: "ui.categoriesPopularWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((c) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ elevation: 0, category: c }, CategoryProps, { categoryFollowButtonProps: { onFollow: handleFollowersUpdate } })) }, c.id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = CategoriesPopularWidget;

package/lib/cjs/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js

@@ -202,7 +202,7 @@ function CategoriesSuggestionWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.title, variant: "h5", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesSuggestionWidget.title", defaultMessage: "ui.categoriesSuggestionWidget.title" }) }), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.noResults, variant: "body2", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesSuggestionWidget.noResults", defaultMessage: "ui.categoriesSuggestionWidget.noResults" }) })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((category) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ elevation: 0, category: category, categoryFollowButtonProps: { onFollow: handleFollow } }, CategoryProps)) }, category.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.showMore, onClick: handleToggleDialogOpen, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesSuggestionWidget.button.showAll", defaultMessage: "ui.categoriesSuggestionWidget.button.showAll" }) }))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoriesSuggestionWidget.title", id: "ui.categoriesSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(Category_1.CategorySkeleton, Object.assign({ elevation: 0 }, CategoryProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.endMessage, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesSuggestionWidget.noMoreResults", defaultMessage: "ui.categoriesSuggestionWidget.noMoreResults" }) }), children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((c) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ elevation: 0, category: c }, CategoryProps, { categoryFollowButtonProps: { onFollow: handleFollow } })) }, c.id))) }) }) })))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesSuggestionWidget.title", defaultMessage: "ui.categoriesSuggestionWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesSuggestionWidget.noResults", defaultMessage: "ui.categoriesSuggestionWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((category) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ elevation: 0, category: category, categoryFollowButtonProps: { onFollow: handleFollow } }, CategoryProps)) }, category.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesSuggestionWidget.button.showAll", defaultMessage: "ui.categoriesSuggestionWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoriesSuggestionWidget.title", id: "ui.categoriesSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(Category_1.CategorySkeleton, Object.assign({ elevation: 0 }, CategoryProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoriesSuggestionWidget.noMoreResults", defaultMessage: "ui.categoriesSuggestionWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((c) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ elevation: 0, category: c }, CategoryProps, { categoryFollowButtonProps: { onFollow: handleFollow } })) }, c.id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = CategoriesSuggestionWidget;

package/lib/cjs/components/CategoriesSuggestionWidget/Skeleton.js

@@ -38,6 +38,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function CategoriesSuggestionWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(List_1.default, { className: classes.list, children: [...Array(4)].map((category, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }) }, index))) }) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(List_1.default, Object.assign({ className: classes.list }, { children: [...Array(4)].map((category, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }) }, index))) })) }) })));
 }
 exports.default = CategoriesSuggestionWidgetSkeleton;

package/lib/cjs/components/Category/Category.js

@@ -83,7 +83,7 @@ function Category(inProps) {
     }
     // RENDER
     if (!autoHide) {
-        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation, className: (0, classnames_1.default)(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: scCategory.name, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.primary, component: "span", variant: "body1", children: scCategory.name }) })) : (scCategory.name) }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.secondary, component: "p", variant: "body2", children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan })) }), actions: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation, className: (0, classnames_1.default)(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scCategory.name }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan })) }), actions: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }

package/lib/cjs/components/Category/Skeleton.js

@@ -41,6 +41,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
  */
 function CategorySkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "rectangular", width: theme.selfcommunity.category.icon.sizeMedium, height: theme.selfcommunity.category.icon.sizeMedium, className: classes.image }), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, className: classes.primary }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, className: classes.secondary }), actions: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "outlined", disabled: true, className: classes.button, children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 50, className: classes.action }) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "rectangular", width: theme.selfcommunity.category.icon.sizeMedium, height: theme.selfcommunity.category.icon.sizeMedium, className: classes.image }), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, className: classes.primary }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, className: classes.secondary }), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true, className: classes.button }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 50, className: classes.action }) })) })));
 }
 exports.default = CategorySkeleton;

package/lib/cjs/components/CategoryAutocomplete/CategoryAutocomplete.js

@@ -97,7 +97,7 @@ const CategoryAutocomplete = (inProps) => {
         }, renderOption: (props, option, { selected, inputValue }) => {
             const matches = (0, match_1.default)(option.name, inputValue);
             const parts = (0, parse_1.default)(option.name, matches);
-            return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, props, { children: [checkboxSelect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { style: { marginRight: 8 }, checked: selected }), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", { style: { fontWeight: part.highlight ? 700 : 400 }, children: part.text }, index))) }) })] })));
+            return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, props, { children: [checkboxSelect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { style: { marginRight: 8 }, checked: selected }), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] })));
         }, renderInput: (params) => {
             return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         } }, rest)));

package/lib/cjs/components/CategoryFollowersButton/CategoryFollowersButton.js

@@ -125,6 +125,6 @@ function CategoryFollowersButton(inProps) {
     // RENDER
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest, { children: loading || !scCategory ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, { total: scCategory.followers_counter, children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) })) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, { dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.endMessage, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) }), children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) }) })))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest, { children: loading || !scCategory ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scCategory.followers_counter }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
 }
 exports.default = CategoryFollowersButton;

package/lib/cjs/components/CategoryHeader/CategoryHeader.js

@@ -76,6 +76,6 @@ function CategoryHeader(inProps) {
     if (!scCategory) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.info, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h3", className: classes.name, gutterBottom: true, children: scCategory.name }), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", className: classes.slogan, children: scCategory.slogan })), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.followed, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.followedCounter, component: "div", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) }), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.action, children: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps)) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps)) }))] }))] })));
 }
 exports.default = CategoryHeader;

package/lib/cjs/components/CategoryHeader/Skeleton.js

@@ -35,6 +35,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function CategoryHeaderSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(Root, { className: classes.root, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { sx: { height: 230 }, animation: "wave", variant: "rectangular", className: classes.cover }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { sx: { height: 230 }, animation: "wave", variant: "rectangular", className: classes.cover }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) })] })));
 }
 exports.default = CategoryHeaderSkeleton;

package/lib/cjs/components/CategoryTrendingFeedWidget/CategoryTrendingFeedWidget.js

@@ -182,9 +182,9 @@ function CategoryTrendingFeedWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.title, variant: "h5", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.title", defaultMessage: "ui.categoryTrendingFeedWidget.title" }) }), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.noResults, variant: "body2", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noResults", defaultMessage: "ui.categoryTrendingFeedWidget.noResults" }) })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore }, (isMobile
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.title", defaultMessage: "ui.categoryTrendingFeedWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noResults", defaultMessage: "ui.categoryTrendingFeedWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore }, (isMobile
                         ? { onClick: handleToggleDialogOpen }
-                        : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_TRENDING_FEED_ROUTE_NAME, scCategory) }), { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(FeedObject_1.FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.endMessage, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" }) }), children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }) }) })))] }));
+                        : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_TRENDING_FEED_ROUTE_NAME, scCategory) }), { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(FeedObject_1.FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = CategoryTrendingFeedWidget;

package/lib/cjs/components/CategoryTrendingFeedWidget/Skeleton.js

@@ -38,6 +38,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function CategoryTrendingFeedWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(List_1.default, { className: classes.list, children: [...Array(4)].map((post, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }, index))) }) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(List_1.default, Object.assign({ className: classes.list }, { children: [...Array(4)].map((post, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }, index))) })) }) })));
 }
 exports.default = CategoryTrendingFeedWidgetSkeleton;

package/lib/cjs/components/CategoryTrendingUsersWidget/CategoryTrendingUsersWidget.js

@@ -174,7 +174,7 @@ function CategoryTrendingUsersWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.title, variant: "h5", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.title", defaultMessage: "ui.categoryTrendingUsersWidget.title" }) }), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.noResults, variant: "body2", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noResults", defaultMessage: "ui.categoryTrendingUsersWidget.noResults" }) })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.showMore, onClick: handleToggleDialogOpen, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.button.showAll", defaultMessage: "ui.categoryTrendingUsersWidget.button.showAll" }) }))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingUsersWidget.title", id: "ui.categoryTrendingUsersWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.endMessage, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noMoreResults", defaultMessage: "ui.categoryTrendingUsersWidget.noMoreResults" }) }), children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }) }) })))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.title", defaultMessage: "ui.categoryTrendingUsersWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noResults", defaultMessage: "ui.categoryTrendingUsersWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.button.showAll", defaultMessage: "ui.categoryTrendingUsersWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingUsersWidget.title", id: "ui.categoryTrendingUsersWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noMoreResults", defaultMessage: "ui.categoryTrendingUsersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = CategoryTrendingUsersWidget;

package/lib/cjs/components/CategoryTrendingUsersWidget/Skeleton.js

@@ -38,6 +38,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function CategoryTrendingPeopleWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(List_1.default, { className: classes.list, children: [...Array(4)].map((person, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }) }, index))) }) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(List_1.default, Object.assign({ className: classes.list }, { children: [...Array(4)].map((person, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }) }, index))) })) }) })));
 }
 exports.default = CategoryTrendingPeopleWidgetSkeleton;

package/lib/cjs/components/ChangeCover/ChangeCover.js

@@ -169,22 +169,22 @@ function ChangeCover(inProps) {
      * Renders change cover menu items
      */
     function renderMenuItems() {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: loading ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { sx: { justifyContent: 'center' }, children: (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_circle_outline" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })] }), hasCover && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })] }))] })) }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: loading ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ sx: { justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_circle_outline" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })] })), hasCover && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })] })))] })) }));
     }
     /**
      * Renders change cover menu
      */
-    const cc = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }) })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, { open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true, children: renderMenuItems() })) : ((0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, open: open, onClose: handleClose, children: renderMenuItems() })) }), !isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "help_outline" }) }), isOpen && ((0, jsx_runtime_1.jsx)(material_1.Popover, { open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
+    const cc = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }) })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : ((0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: open, onClose: handleClose }, { children: renderMenuItems() }))) }), !isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "help_outline" }) })), isOpen && ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
                             vertical: 'bottom',
                             horizontal: 'right'
-                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: '10px' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h3", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {
+                        } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "h3" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" }) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
-                                        } }) })] }) }))] })), openDeleteCoverDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteCoverDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.dialog.msg", defaultMessage: "ui.changeCover.dialog.msg" }), onConfirm: deleteCover, isUpdating: isDeletingCover, onClose: () => {
+                                        } }) }))] })) })))] })), openDeleteCoverDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteCoverDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.dialog.msg", defaultMessage: "ui.changeCover.dialog.msg" }), onConfirm: deleteCover, isUpdating: isDeletingCover, onClose: () => {
                     setOpenDeleteCoverDialog(false);
                     setAnchorEl(null);
                 } }))] }));
@@ -192,13 +192,13 @@ function ChangeCover(inProps) {
      * If there is an error
      */
     if (alert) {
-        return ((0, jsx_runtime_1.jsx)(material_1.Alert, { color: "error", onClose: () => setAlert(null), children: alert }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className), children: cc })));
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: cc })));
     }
     return null;
 }

package/lib/cjs/components/ChangeGroupCover/ChangeGroupCover.js

@@ -125,7 +125,7 @@ function ChangeGroupCover(inProps) {
      * If there is an error
      */
     if (alert) {
-        return ((0, jsx_runtime_1.jsx)(material_1.Alert, { color: "error", onClose: () => setAlert(null), children: alert }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders root object (if not hidden by autoHide prop)

package/lib/cjs/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -123,7 +123,7 @@ function ChangeGroupPicture(inProps) {
      * If there is an error
      */
     if (alert) {
-        return ((0, jsx_runtime_1.jsx)(material_1.Alert, { color: "error", onClose: () => setAlert(null), children: alert }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)